Adgytec Web UI Components

A robust, accessible, and highly customizable React component library implementing the Material 3 Expressive design system, built on the solid foundation of React Aria Components.

Key Features

• Material 3 Expressive Implementation: Follows the latest Material Design guidelines with a focus on motion, layout, and expressive styling.
• Accessible by Default: Leverages React Aria Components to provide industry-standard accessibility, including full keyboard navigation and screen reader support.
• Dynamic Theming: Integrated theme management supporting Light/Dark modes, multiple contrast levels (Standard, Medium, High), and Monochrome options.
• Configurable Styling: Built with CSS Modules and extensive CSS tokens, allowing for deep customization without breaking the core design system.
• Icon Integration: Seamlessly integrates with Lucide React for a consistent and modern icon set.
• Utility First: Includes powerful utilities for form validation (Zod integration), fluid typography, and responsive image management.

Component Library

Buttons

• Standard Buttons: Button, Icon Button, Link Button, Link Icon Button.
• Toggle Buttons: Toggle Button, Toggle Icon Button.
• Complex Buttons: Split Button.
• Groups: Button Group (with morphing animation), Connected Button Group.

Data Entry

• Inputs: Input (TextField), SearchField, TextArea, Checkbox, Radio, RadioGroup, Select, ComboBox.
• Pickers: DatePicker, DateRangePicker, TimeField, DateField, Calendar, RangeCalendar.
• Sliders: Slider, RangeSlider.
• Selection: Switch.

Navigation & Layout

• Tabs: Horizontal and Vertical tab systems.
• Toolbar: Contextual action containers (Docked and Floating variants).
• Dividers: Material 3 separators.
• Disclosure: Expandable sections and Accordions.

Feedback & Overlays

• Dialogs: Modal, ModalOverlay, ActionDialog (pre-configured patterns).
• Tooltips: Plain Tooltip and Rich Tooltip (for complex content).
• Status: Loader, Splash (Ripple effect).

Data Display

• Tags: Expressive chips for attributes and selection.
• Images: Responsive image component with resolution-based presets.
• Icons: Unified wrapper for Lucide icons with design system sizing.

Getting Started

1. Wrap your application

To enable theme management and global styles, wrap your root component with the ThemeProvider:

import { ThemeProvider } from '@adgytec/web-ui-components';

function App() {
  return (
    <ThemeProvider>
      <MyContent />
    </ThemeProvider>
  );
}

2. Use Components

Import and use components directly in your application:

import { Button, Input } from '@adgytec/web-ui-components';
import { Mail } from 'lucide-react';

function MyForm() {
  return (
    <div className="form-container">
      <Input label="Email" leadingIcon={Mail} placeholder="Enter your email" />
      <Button color="filled" onPress={() => console.log('Submitted!')}>
        Submit
      </Button>
    </div>
  );
}

Documentation

Each component and utility has its own detailed documentation file (*.md) located within its respective folder in src/components/ and src/utils/. These documents include:

• Available CSS tokens and their default values.
• Comprehensive prop descriptions.
• Extension details for React Aria Components.
• Practical usage examples.

Generated by Gemini