@true-tech-team/ui-components

A comprehensive React component library built with TypeScript, SCSS Modules, and featuring a robust theming system with dark/light mode support.

Features

- 🎨 Comprehensive Theming - 37 color families with 10 shades each (370+ colors)
- 🌓 Dark/Light Mode - Built-in theme switching with CSS variables
- 📏 4px Grid System - Consistent spacing throughout
- 🎯 Type-Safe - Full TypeScript support with comprehensive types
- 🧩 Component Library - Reusable, customizable components
- 🎭 Icon System - SVG-based icons with easy customization
- 🛠️ Utility Classes - 500+ utility classes for rapid development
- 📦 Tree-Shakeable - Optimized bundle sizes
- ♿ Accessible - Built with accessibility in mind

Installation

``bash npm install @true-tech-team/ui-components`

`Quick Start`

`$3`

`tsx import { GlobalProvider } from '@true-tech-team/ui-components';

function App() { return ( ); }`

`$3`

`tsx import { Button, Icon } from '@true-tech-team/ui-components';

function MyComponent() { return (


  );
}


Components
$3
#### Button
Versatile button component with multiple variants and sizes.

`tsx

Variants: primary, secondary, outline, ghost Sizes: sm, md, lg

#### IconButton

Button component optimized for icon-only display.

`tsx`

`$3`

#### Icon

SVG-based icon system with customizable size and color.

`tsx`

Available icons: chevron-down, chevron-up, chevron-left, chevron-right, close, check, info, warning, error, eye, eye-off, user, users, building, dollar, chart-line, chart-bar, trending-down, and more

#### Avatar

User profile avatars with image, initials, and icon variants.

`tsx } variant="secondary" />`

Sizes: xs, sm, md, lg, xl Variants: primary, secondary, tertiary

#### Badge

Notification badges with count display.

`tsx`

#### Chip

Interactive chips for tags and selections.

`tsx {}} />`

#### Pill

Status and category pills.

`tsx`

#### Tag

Labeling and categorization tags.

`tsx New Available`

#### StatusIndicator

Status indicator dots with labels.

`tsx`

#### ProgressBar

Linear progress bars with labels and variants.

`tsx`

#### CircularProgress

Circular progress indicators.

`tsx`

#### Skeleton

Loading skeleton screens for content placeholders.

`tsx`

#### KPI

Key Performance Indicator display component.

`tsx value="$45,231" label="Total Revenue" trend={12.5} trendDirection="up" icon={} />`

#### Stat

Statistical display component for metrics.

`tsx`

#### List

Comprehensive list component with selection, virtualization, and keyboard navigation.

`tsx items={users} renderItem={(user) => ( key={user.id} primary={user.name} secondary={user.email} icon={} /> )} selectable onSelectionChange={(selected) => console.log(selected)} />`

#### Table

Data table component with sorting, selection, and pagination.

`tsx data={users} columns={[ { key: 'name', header: 'Name', sortable: true }, { key: 'email', header: 'Email' }, { key: 'role', header: 'Role', sortable: true }, ]} selectable pagination={{ pageSize: 10 }} onSort={(key, direction) => console.log(key, direction)} />`

`$3`

#### SortableList

Reorderable list with drag-and-drop functionality.

`tsx items={items} onReorder={(newOrder) => setItems(newOrder)} renderItem={(item) => (


        
        {item.label}


    )}
  />


#### SortableGrid
Reorderable grid layout with drag-and-drop.

`tsx items={gridItems} columns={3} onReorder={(newOrder) => setGridItems(newOrder)} renderItem={(item) => {item.content}} />`

#### KanbanBoard

Kanban-style board with draggable cards between columns.

`tsx columns={[ { id: 'todo', title: 'To Do', items: todoItems }, { id: 'progress', title: 'In Progress', items: progressItems }, { id: 'done', title: 'Done', items: doneItems }, ]} onCardMove={(cardId, fromColumn, toColumn) => handleMove(cardId, fromColumn, toColumn)} />`

#### ResizablePanels

Resizable panel layouts for split views.

`tsx`

`$3`

#### Filter System

Comprehensive filtering system with various field types and layouts.

`tsx console.log(filters)}> field="status" label="Status" options={[ { value: 'active', label: 'Active' }, { value: 'inactive', label: 'Inactive' }, ]} />`

`$3`

#### Input

Text input with validation, formatting, and various configurations.

`tsx label="Email" type="email" placeholder="Enter your email" validation={(value) => value.includes('@') ? { valid: true } : { valid: false, message: 'Invalid email' } } />`

#### Autocomplete

Input with dropdown suggestions and filtering.

`tsx options={[ { value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, ]} placeholder="Search..." />`

#### Select

Dropdown select component with search and custom rendering.

`tsx options={[ { value: 'us', label: 'United States' }, { value: 'ca', label: 'Canada' }, ]} placeholder="Select country" />`

#### Checkbox

Checkbox input with labels and indeterminate state.

`tsx`

#### Radio & RadioGroup

Radio button inputs with group management.

`tsx`

#### Toggle

Switch/toggle component for boolean states.

`tsx`

#### Textarea

Multi-line text input with auto-resize.

`tsx <br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### NumberInput</p><p class="my-3">Numeric input with increment/decrement controls.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><NumberInput label="Quantity" min={0} max={100} step={1} value={quantity} onChange={setQuantity} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### PhoneInput</p><p class="my-3">International phone number input with country selection.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><PhoneInput value={phone} onChange={setPhone} defaultCountry="US" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Slider</p><p class="my-3">Range slider with marks and custom formatting.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Slider min={0} max={100} value={volume} onChange={setVolume} marks={[0, 25, 50, 75, 100]} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Rating</p><p class="my-3">Star rating input component.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Rating value={rating} onChange={setRating} max={5} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### TagInput</p><p class="my-3">Input for managing multiple tags.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><TagInput tags={tags} onChange={setTags} placeholder="Add tag..." /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### FilePicker</p><p class="my-3">File upload component with drag-and-drop support.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><FilePicker<br /> accept=".pdf,.doc,.docx"<br /> maxSize={5 <em> 1024 </em> 1024}<br /> onChange={(files) => console.log(files)}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### ColorPicker</p><p class="my-3">Color selection with multiple format support (hex, rgb, hsl).</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><ColorPicker value={color} onChange={setColor} format="hex" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### DatePicker</p><p class="my-3">Single date selection with calendar interface.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><DatePicker value={date} onChange={setDate} minDate={new Date()} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### DateRangePicker</p><p class="my-3">Date range selection with presets.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><DateRangePicker<br /> startDate={startDate}<br /> endDate={endDate}<br /> onChange={(start, end) => {<br /> setStartDate(start);<br /> setEndDate(end);<br /> }}<br /> presets={[{ label: 'Last 7 days', value: { start: -7, end: 0 } }]}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Portal</p><p class="my-3">Render children in a different part of the DOM.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Portal><br /> <div>This renders at document.body</div><br /></Portal><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Popover</p><p class="my-3">Floating content positioned relative to a trigger.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Popover trigger={<Button>Open Popover</Button>} content={<div>Popover content</div>} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Tooltip</p><p class="my-3">Hover tooltip with customizable positioning.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Tooltip content="Helpful information" position="top"><br /> <Button>Hover me</Button><br /></Tooltip><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Dropdown</p><p class="my-3">Dropdown menu with trigger and content.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Dropdown<br /> trigger={<Button>Options</Button>}<br /> content={<br /> <MenuList><br /> <MenuItem>Action 1</MenuItem><br /> <MenuItem>Action 2</MenuItem><br /> </MenuList><br /> }<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Menu</p><p class="my-3">Flexible menu system with items, groups, and dividers.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Menu><br /> <MenuList><br /> <MenuItem onClick={() => console.log('Edit')}>Edit</MenuItem><br /> <MenuItem onClick={() => console.log('Delete')}>Delete</MenuItem><br /> <MenuDivider /><br /> <MenuGroup label="More options"><br /> <MenuItem>Settings</MenuItem><br /> </MenuGroup><br /> </MenuList><br /></Menu><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Stepper</p><p class="my-3">Multi-step progress indicator for wizard-like interfaces.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Stepper activeStep={1}><br /> <Step label="Account" description="Create your account" /><br /> <Step label="Profile" description="Set up your profile" /><br /> <Step label="Review" description="Review and submit" /><br /></Stepper><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Breadcrumbs</p><p class="my-3">Navigation breadcrumb trail for hierarchical page structure.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Breadcrumbs><br /> <BreadcrumbItem href="/">Home</BreadcrumbItem><br /> <BreadcrumbItem href="/products">Products</BreadcrumbItem><br /> <BreadcrumbItem>Current Page</BreadcrumbItem><br /></Breadcrumbs><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Navbar</p><p class="my-3">Responsive navigation bar with collapsible menu support.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Navbar><br /> <NavbarBrand>My App</NavbarBrand><br /> <NavbarToggle /><br /> <NavbarCollapse><br /> <NavbarNav><br /> <NavLink href="/">Home</NavLink><br /> <NavLink href="/about">About</NavLink><br /> </NavbarNav><br /> <NavbarActions><br /> <Button>Sign In</Button><br /> </NavbarActions><br /> </NavbarCollapse><br /></Navbar><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### SideNav</p><p class="my-3">Sidebar navigation with groups, items, and dividers.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><SideNav><br /> <SideNavGroup label="Main"><br /> <SideNavItem icon={<Icon name="home" />} href="/"><br /> Dashboard<br /> </SideNavItem><br /> <SideNavItem icon={<Icon name="users" />} href="/users"><br /> Users<br /> </SideNavItem><br /> </SideNavGroup><br /> <SideNavDivider /><br /> <SideNavItem icon={<Icon name="settings" />} href="/settings"><br /> Settings<br /> </SideNavItem><br /></SideNav><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Pagination</p><p class="my-3">Page navigation with customizable controls.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Pagination currentPage={page} totalPages={10} onPageChange={setPage} showFirstLast /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### BottomNavigation</p><p class="my-3">Mobile-friendly bottom navigation bar.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><BottomNavigation value={tab} onChange={setTab}><br /> <BottomNavigationItem icon={<Icon name="home" />} label="Home" value="home" /><br /> <BottomNavigationItem icon={<Icon name="search" />} label="Search" value="search" /><br /> <BottomNavigationItem icon={<Icon name="user" />} label="Profile" value="profile" /><br /></BottomNavigation><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Tabs</p><p class="my-3">Tabbed content navigation.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Tabs defaultValue="tab1"><br /> <TabList><br /> <Tab value="tab1">Tab 1</Tab><br /> <Tab value="tab2">Tab 2</Tab><br /> </TabList><br /> <TabPanel value="tab1">Content 1</TabPanel><br /> <TabPanel value="tab2">Content 2</TabPanel><br /></Tabs><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Panes</p><p class="my-3">Resizable split pane layouts.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Panes direction="horizontal"><br /> <Pane minSize={200}>Left Panel</Pane><br /> <Pane>Right Panel</Pane><br /></Panes><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### ResponsiveStack</p><p class="my-3">Stack layout that adapts to screen size.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><ResponsiveStack breakpoint={768} spacing={4}><br /> <Card>Item 1</Card><br /> <Card>Item 2</Card><br /></ResponsiveStack><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### AdaptiveGrid</p><p class="my-3">Auto-adjusting grid layout based on container width.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><AdaptiveGrid minItemWidth={250} gap={16}><br /> <Card>Item 1</Card><br /> <Card>Item 2</Card><br /> <Card>Item 3</Card><br /></AdaptiveGrid><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### MasonryLayout</p><p class="my-3">Pinterest-style masonry grid for variable-height items.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><MasonryLayout columns={3} gap={16}><br /> <Card>Short content</Card><br /> <Card>Much longer content that takes more space</Card><br /> <Card>Medium content</Card><br /></MasonryLayout><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### FormBuilder</p><p class="my-3">Dynamic form builder with validation and state management.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><FormBuilder<br /> fields={[<br /> {<br /> name: 'email',<br /> label: 'Email',<br /> type: 'email',<br /> required: true,<br /> validation: { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ },<br /> },<br /> {<br /> name: 'password',<br /> label: 'Password',<br /> type: 'password',<br /> required: true,<br /> },<br /> ]}<br /> onSubmit={(values) => console.log(values)}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Theming</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The library includes a comprehensive theming system with 37 color families and 10 shades each, providing 370+ colors out of the box.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { GlobalProvider } from '@true-tech-team/ui-components';</p><p class="my-3">function App() {<br /> return (<br /> <GlobalProvider<br /> themeConfig={{<br /> mode: 'light',<br /> // Optional: override theme values<br /> overrides: {<br /> colors: {<br /> primary: '#007bff',<br /> },<br /> },<br /> }}<br /> ><br /> <YourApp /><br /> </GlobalProvider><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { useTheme } from '@true-tech-team/ui-components';</p><p class="my-3">function ThemeToggle() {<br /> const { mode, toggleMode } = useTheme();<br /> return <button onClick={toggleMode}>Current: {mode}</button>;<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">All theme values are exposed as CSS variables for easy customization:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">css<br />.custom-element {<br /> color: var(--theme-primary);<br /> background: var(--theme-surface);<br /> border-radius: var(--theme-radius-md);<br /> padding: var(--theme-spacing-4);<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>Spacing (4px grid):</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><div class="m-4 p-2">Margin 16px, Padding 8px</div><br /><div class="mt-2 mb-4 px-6">Margin top 8px, bottom 16px, padding x 24px</div><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Flexbox:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><div class="flex items-center justify-between gap-4">...</div><br /><div class="flex-col items-start">...</div><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Grid:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><div class="grid grid-cols-3 gap-4">...</div><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Colors:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><div class="bg-primary text-on-primary">...</div><br /><div class="bg-surface text-on-surface">...</div><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Typography:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><h1 class="text-2xl font-bold">Heading</h1><br /><p class="text-sm text-secondary">Small text</p><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Utility Functions</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { getThemeValue, setThemeValue, pxToRem, gridSpacing } from '@true-tech-team/ui-components';</p><p class="my-3">// Get theme values<br />const primaryColor = getThemeValue('--theme-primary');</p><p class="my-3">// Convert pixels to rem<br />const remValue = pxToRem(16); // '1rem'</p><p class="my-3">// Grid-based spacing<br />const spacing = gridSpacing(4); // '16px' (4 * 4px grid)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { hexToRgb, rgbToHsl, isLightColor, getBrightness } from '@true-tech-team/ui-components';</p><p class="my-3">const rgb = hexToRgb('#ff0000'); // { r: 255, g: 0, b: 0 }<br />const hsl = rgbToHsl(255, 0, 0); // { h: 0, s: 100, l: 50 }<br />const isLight = isLightColor('#ffffff'); // true<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { formatDate, getDaysInMonth, isDateInRange, addDays } from '@true-tech-team/ui-components';</p><p class="my-3">const formatted = formatDate(new Date(), 'YYYY-MM-DD');<br />const daysInMonth = getDaysInMonth(2024, 0); // January 2024<br />const inRange = isDateInRange(date, startDate, endDate);<br />const futureDate = addDays(new Date(), 7);<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { validators, combineValidators } from '@true-tech-team/ui-components';</p><p class="my-3">const emailValidator = validators.email();<br />const requiredValidator = validators.required('This field is required');<br />const combined = combineValidators([requiredValidator, emailValidator]);</p><p class="my-3">const result = combined('test@example.com');<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Development</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br /><h1 class="text-2xl font-bold mt-6 mb-4">Build library for production</h1><br />nx build ui-components --configuration=production</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Build for development</h1><br />nx build ui-components --configuration=development<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The build output will be in </code>dist/libs/ui-components/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br /><h1 class="text-2xl font-bold mt-6 mb-4">Run tests</h1><br />nx test ui-components</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Run tests in watch mode</h1><br />nx test ui-components --watch</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Run tests with coverage</h1><br />nx test ui-components --coverage<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br /><h1 class="text-2xl font-bold mt-6 mb-4">Lint</h1><br />nx lint ui-components</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Lint and fix</h1><br />nx lint ui-components --fix<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">View and interact with all components in Storybook:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br /><h1 class="text-2xl font-bold mt-6 mb-4">Start Storybook dev server</h1><br />nx storybook ui-components</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Build Storybook static site</h1><br />nx build-storybook ui-components<br /></code>``</p><p class="my-3">Storybook will be available at http://localhost:6006.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Browser Support</h2></p><p class="my-3">- Chrome (latest)<br />- Firefox (latest)<br />- Safari (latest)<br />- Edge (latest)</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">TypeScript</h2></p><p class="my-3">This library is written in TypeScript and includes type definitions. All components, props, and utilities are fully typed for the best development experience.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Contributing</h2></p><p class="my-3">Contributions are welcome! Please ensure all tests pass and follow the existing code style.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Repository</h2></p><p class="my-3"><a href="https://github.com/TrueTechTeam/true-tech-team/tree/master/libs/ui-components" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">True Tech Team UI Components Github</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Storybook</h2></p><p class="my-3"><a href="https://truetechteamcomponents.netlify.app" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">True Tech Team React Components</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">MIT<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-full max-w-xl"></div><div class="flex gap-2"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-16"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-20"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-6 w-14"></div></div></div><div class="w-full lg:w-80"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-32 w-full"></div></div></div><div class="space-y-4"><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-10 w-64"></div><div data-slot="skeleton" class="bg-accent animate-pulse rounded-md h-64 w-full"></div></div></div></main></div><script>requestAnimationFrame(function(){$RT=performance.now()});</script><script src="/_next/static/chunks/9b9784636e791b20.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\n4:I[49786,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Header\"]\n5:I[22016,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"\"]\nc:I[68027,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"default\"]\nd:I[2355,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Analytics\"]\nf:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"OutletBoundary\"]\n10:\"$Sreact.suspense\"\n12:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ViewportBoundary\"]\n14:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"MetadataBoundary\"]\n:HL[\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"style\"]\n:HL[\"/_next/static/media/68d403cf9f2c68c5-s.p.f9f15f61.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"x_DymHuNhDTJUp7Mmr_Ru\",\"c\":[\"\",\"package\",\"%40true-tech-team%2Freact-components\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"package\",{\"children\":[[\"name\",\"%40true-tech-team/react-components\",\"c\"],{\"children\":[\"__PAGE__\",{}]}]}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/60ba853f5ed1b16b.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/9c76f6dd8b5c38e2.css?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"children\":[\"$\",\"body\",null,{\"className\":\"font-sans antialiased\",\"children\":[[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto flex max-w-md flex-col items-center justify-center px-4 py-24 text-center\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-package mb-6 h-16 w-16 text-muted-foreground\",\"children\":[[\"$\",\"path\",\"1a0edw\",{\"d\":\"M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z\"}],[\"$\",\"path\",\"d0xqtd\",{\"d\":\"M12 22V12\"}],[\"$\",\"path\",\"yx3hmr\",{\"d\":\"m3.3 7 7.703 4.734a2 2 0 0 0 1.994 0L20.7 7\"}],[\"$\",\"path\",\"1c824w\",{\"d\":\"m7.5 4.27 9 5.15\"}],\"$undefined\"]}],[\"$\",\"h1\",null,{\"className\":\"mb-2 text-3xl font-bold\",\"children\":\"404\"}],[\"$\",\"h2\",null,{\"className\":\"mb-4 text-xl text-muted-foreground\",\"children\":\"Page not found\"}],[\"$\",\"p\",null,{\"className\":\"mb-8 text-muted-foreground\",\"children\":\"The page you're looking for doesn't exist or has been moved.\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-3\",\"children\":[[\"$\",\"$L5\",null,{\"href\":\"/\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-house mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"5wwlr5\",{\"d\":\"M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8\"}],[\"$\",\"path\",\"1d0kgt\",{\"d\":\"M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"}],\"$undefined\"]}],\"Go home\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}],[\"$\",\"$L5\",null,{\"href\":\"/search\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-search mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"circle\",\"4ej97u\",{\"cx\":\"11\",\"cy\":\"11\",\"r\":\"8\"}],[\"$\",\"path\",\"1qie3q\",{\"d\":\"m21 21-4.3-4.3\"}],\"$undefined\"]}],\"Search packages\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-9 px-4 py-2 has-[\u003esvg]:px-3\",\"ref\":null}]]}]]}]]}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}],\"$L6\"]}]}]]}],{\"children\":[\"$L7\",{\"children\":[\"$L8\",{\"children\":[\"$L9\",{},null,false,false]},[\"$La\",[],[]],false,false]},null,false,false]},null,false,false],\"$Lb\",false]],\"m\":\"$undefined\",\"G\":[\"$c\",[]],\"S\":false}\n"])</script><script>self.__next_f.push([1,"6:[\"$\",\"$Ld\",null,{}]\n7:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n8:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n9:[\"$\",\"$1\",\"c\",{\"children\":[\"$Le\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Lf\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@11\"}]}]]}]\na:null\nb:[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L12\",null,{\"children\":\"$L13\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L14\",null,{\"children\":[\"$\",\"$10\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L15\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}]\n"])</script><script>self.__next_f.push([1,"e:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-background\",\"children\":[[\"$\",\"$L4\",null,{}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-6xl px-4 py-8\",\"children\":[\"$\",\"$10\",null,{\"fallback\":[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-full max-w-xl\"}],[\"$\",\"div\",null,{\"className\":\"flex gap-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-16\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-20\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-6 w-14\"}]]}]]}],[\"$\",\"div\",null,{\"className\":\"w-full lg:w-80\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-32 w-full\"}]}]]}],[\"$\",\"div\",null,{\"className\":\"space-y-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-10 w-64\"}],[\"$\",\"div\",null,{\"data-slot\":\"skeleton\",\"className\":\"bg-accent animate-pulse rounded-md h-64 w-full\"}]]}]]}],\"children\":\"$L16\"}]}]]}]\n"])</script><script>self.__next_f.push([1,"13:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"17:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d2be314c3ece3fbe.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"IconMark\"]\n11:null\n15:[[\"$\",\"title\",\"0\",{\"children\":\"@true-tech-team/react-components - npm explorer\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"React TypeScript component library\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/icon-light-32x32.png\",\"media\":\"(prefers-color-scheme: light)\"}],[\"$\",\"link\",\"3\",{\"rel\":\"icon\",\"href\":\"/icon-dark-32x32.png\",\"media\":\"(prefers-color-scheme: dark)\"}],[\"$\",\"link\",\"4\",{\"rel\":\"icon\",\"href\":\"/icon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"5\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-icon.png\"}],[\"$\",\"$L17\",\"6\",{}]]\n"])</script><title>@true-tech-team/react-components - npm explorer</title><meta name="description" content="React TypeScript component library"/><link rel="icon" href="/icon-light-32x32.png" media="(prefers-color-scheme: light)"/><link rel="icon" href="/icon-dark-32x32.png" media="(prefers-color-scheme: dark)"/><link rel="icon" href="/icon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-icon.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div style="display:none" id="S:2"></div><script>$RB=[];$RV=function(a){$RT=performance.now();for(var b=0;b<a.length;b+=2){var c=a[b],e=a[b+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&requestAnimationFrame(g._reactRetry)}}a.length=0}; $RC=function(a,b){if(b=document.getElementById(b))(a=document.getElementById(a))?(a.previousSibling.data="$~",$RB.push(a,b),2===$RB.length&&("number"!==typeof $RT?requestAnimationFrame($RV.bind(null,$RB)):(a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:$RT+300-a)))):b.parentNode.removeChild(b)};$RC("B:2","S:2")</script><div style="display:none" id="S:0"></div><script>$RC("B:0","S:0")</script><script>self.__next_f.push([1,"16:[\"$\",\"div\",null,{\"className\":\"space-y-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-6 lg:flex-row lg:gap-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex-1 space-y-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-start gap-3\",\"children\":[[\"$\",\"h1\",null,{\"className\":\"font-mono text-2xl font-bold sm:text-3xl\",\"children\":\"@true-tech-team/react-components\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-2\",\"children\":[[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 font-mono\",\"children\":[\"v\",\"1.0.0\"]}],[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-blue-600 border-blue-200\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-file-code mr-1 h-3 w-3\",\"children\":[[\"$\",\"path\",\"1tg20x\",{\"d\":\"M10 12.5 8 15l2 2.5\"}],[\"$\",\"path\",\"yinavb\",{\"d\":\"m14 12.5 2 2.5-2 2.5\"}],[\"$\",\"path\",\"tnqrlb\",{\"d\":\"M14 2v4a2 2 0 0 0 2 2h4\"}],[\"$\",\"path\",\"1mlx9k\",{\"d\":\"M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z\"}],\"$undefined\"]}],\"TypeScript\"]}],\"$undefined\"]}]]}],\"$undefined\",[\"$\",\"p\",null,{\"className\":\"text-lg text-muted-foreground\",\"children\":\"React TypeScript component library\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-1.5\",\"children\":[[\"$\",\"$L5\",\"react\",{\"href\":\"/search?q=react\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"react\"}]}],[\"$\",\"$L5\",\"components\",{\"href\":\"/search?q=components\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"components\"}]}],[\"$\",\"$L5\",\"typescript\",{\"href\":\"/search?q=typescript\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"typescript\"}]}],\"$L18\",\"$L19\"]}],\"$L1a\",\"$L1b\"]}],\"$L1c\"]}],\"$L1d\"]}]\n"])</script><script>self.__next_f.push([1,"1e:I[33485,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"InstallCommands\"]\n1f:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"Tabs\"]\n20:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsList\"]\n21:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsTrigger\"]\n22:I[27341,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"TabsContent\"]\n23:I[77801,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"ReadmeViewer\"]\n18:[\"$\",\"$L5\",\"ui\",{\"href\":\"/search?q=ui\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"ui\"}]}]\n19:[\"$\",\"$L5\",\"library\",{\"href\":\"/search?q=library\",\"children\":[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a\u0026]:hover:bg-accent [a\u0026]:hover:text-accent-foreground text-xs font-normal hover:bg-accent\",\"children\":\"library\"}]}]\n"])</script><script>self.__next_f.push([1,"1a:[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-4 text-sm text-muted-foreground\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-download h-4 w-4\",\"children\":[[\"$\",\"path\",\"ih7n3h\",{\"d\":\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"}],[\"$\",\"polyline\",\"2ggqvy\",{\"points\":\"7 10 12 15 17 10\"}],[\"$\",\"line\",\"1vk2je\",{\"x1\":\"12\",\"x2\":\"12\",\"y1\":\"15\",\"y2\":\"3\"}],\"$undefined\"]}],[\"$\",\"span\",null,{\"className\":\"font-medium text-foreground\",\"children\":\"0\"}],\"/week\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-calendar h-4 w-4\",\"children\":[[\"$\",\"path\",\"1cmpym\",{\"d\":\"M8 2v4\"}],[\"$\",\"path\",\"4m81vk\",{\"d\":\"M16 2v4\"}],[\"$\",\"rect\",\"1hopcy\",{\"width\":\"18\",\"height\":\"18\",\"x\":\"3\",\"y\":\"4\",\"rx\":\"2\"}],[\"$\",\"path\",\"8toen8\",{\"d\":\"M3 10h18\"}],\"$undefined\"]}],\"Updated \",\"today\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-scale h-4 w-4\",\"children\":[[\"$\",\"path\",\"7g6ntu\",{\"d\":\"m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"ijws7r\",{\"d\":\"m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z\"}],[\"$\",\"path\",\"1b0cd5\",{\"d\":\"M7 21h10\"}],[\"$\",\"path\",\"108xh3\",{\"d\":\"M12 3v18\"}],[\"$\",\"path\",\"3gwbw2\",{\"d\":\"M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2\"}],\"$undefined\"]}],\"MIT\"]}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[\"Unpacked: \",\"1.7 MB\"]}]]}]\n"])</script><script>self.__next_f.push([1,"1b:[\"$\",\"div\",null,{\"className\":\"text-sm\",\"children\":[[\"$\",\"span\",null,{\"className\":\"text-muted-foreground\",\"children\":\"Published by \"}],[\"$\",\"$L5\",null,{\"href\":\"/~jtrue\",\"className\":\"font-medium hover:underline\",\"children\":\"jtrue\"}]]}]\n"])</script><script>self.__next_f.push([1,"1c:[\"$\",\"div\",null,{\"className\":\"w-full space-y-4 lg:w-80\",\"children\":[[\"$\",\"$L1e\",null,{\"packageName\":\"@true-tech-team/react-components\"}],[\"$\",\"div\",null,{\"className\":\"flex flex-wrap gap-2\",\"children\":[null,\"$undefined\",\"$undefined\",[\"$\",\"a\",null,{\"href\":\"https://npmjs.com/package/@true-tech-team/react-components\",\"target\":\"_blank\",\"rel\":\"noopener noreferrer\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-external-link mr-1.5 h-4 w-4\",\"children\":[[\"$\",\"path\",\"1q9fwt\",{\"d\":\"M15 3h6v6\"}],[\"$\",\"path\",\"gplh6r\",{\"d\":\"M10 14 21 3\"}],[\"$\",\"path\",\"a6xqqp\",{\"d\":\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"}],\"$undefined\"]}],\"npm\"],\"data-slot\":\"button\",\"className\":\"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [\u0026_svg]:pointer-events-none [\u0026_svg:not([class*='size-'])]:size-4 shrink-0 [\u0026_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[\u003esvg]:px-2.5\",\"ref\":null}]]}],false]}]\n"])</script><script>self.__next_f.push([1,"24:T4a0c,"])</script><script>self.__next_f.push([1,"# @true-tech-team/ui-components\n\nA comprehensive React component library built with TypeScript, SCSS Modules, and featuring a robust theming system with dark/light mode support.\n\n## Features\n\n- 🎨 **Comprehensive Theming** - 37 color families with 10 shades each (370+ colors)\n- 🌓 **Dark/Light Mode** - Built-in theme switching with CSS variables\n- 📏 **4px Grid System** - Consistent spacing throughout\n- 🎯 **Type-Safe** - Full TypeScript support with comprehensive types\n- 🧩 **Component Library** - Reusable, customizable components\n- 🎭 **Icon System** - SVG-based icons with easy customization\n- 🛠️ **Utility Classes** - 500+ utility classes for rapid development\n- 📦 **Tree-Shakeable** - Optimized bundle sizes\n- ♿ **Accessible** - Built with accessibility in mind\n\n## Installation\n\n```bash\nnpm install @true-tech-team/ui-components\n```\n\n## Quick Start\n\n### Wrap your app with GlobalProvider\n\n```tsx\nimport { GlobalProvider } from '@true-tech-team/ui-components';\n\nfunction App() {\n return (\n \u003cGlobalProvider themeConfig={{ mode: 'light' }}\u003e\n \u003cYourApp /\u003e\n \u003c/GlobalProvider\u003e\n );\n}\n```\n\n### Use components\n\n```tsx\nimport { Button, Icon } from '@true-tech-team/ui-components';\n\nfunction MyComponent() {\n return (\n \u003cdiv\u003e\n \u003cButton variant=\"primary\" size=\"md\"\u003e\n Click me\n \u003c/Button\u003e\n\n \u003cButton variant=\"outline\" startIcon={\u003cIcon name=\"check\" size={16} /\u003e}\u003e\n Save\n \u003c/Button\u003e\n \u003c/div\u003e\n );\n}\n```\n\n## Components\n\n### Buttons\n\n#### Button\n\nVersatile button component with multiple variants and sizes.\n\n```tsx\n\u003cButton variant=\"primary\" size=\"md\" onClick={() =\u003e console.log('clicked')}\u003e\n Click me\n\u003c/Button\u003e\n\n\u003cButton variant=\"outline\" startIcon={\u003cIcon name=\"check\" /\u003e}\u003e\n With Icon\n\u003c/Button\u003e\n```\n\n**Variants:** primary, secondary, outline, ghost\n**Sizes:** sm, md, lg\n\n#### IconButton\n\nButton component optimized for icon-only display.\n\n```tsx\n\u003cIconButton aria-label=\"Close\" size=\"md\"\u003e\n \u003cIcon name=\"close\" /\u003e\n\u003c/IconButton\u003e\n```\n\n### Display\n\n#### Icon\n\nSVG-based icon system with customizable size and color.\n\n```tsx\n\u003cIcon name=\"check\" size={24} color=\"var(--theme-primary)\" /\u003e\n```\n\n**Available icons:** chevron-down, chevron-up, chevron-left, chevron-right, close, check, info, warning, error, eye, eye-off, user, users, building, dollar, chart-line, chart-bar, trending-down, and more\n\n#### Avatar\n\nUser profile avatars with image, initials, and icon variants.\n\n```tsx\n\u003cAvatar src=\"/path/to/image.jpg\" alt=\"User name\" size=\"md\" /\u003e\n\u003cAvatar initials=\"JD\" size=\"lg\" /\u003e\n\u003cAvatar icon={\u003cIcon name=\"user\" /\u003e} variant=\"secondary\" /\u003e\n```\n\n**Sizes:** xs, sm, md, lg, xl\n**Variants:** primary, secondary, tertiary\n\n#### Badge\n\nNotification badges with count display.\n\n```tsx\n\u003cBadge count={5} variant=\"primary\" /\u003e\n\u003cBadge count={99} max={99} variant=\"error\" /\u003e\n```\n\n#### Chip\n\nInteractive chips for tags and selections.\n\n```tsx\n\u003cChip label=\"React\" onDelete={() =\u003e {}} /\u003e\n\u003cChip label=\"TypeScript\" variant=\"outlined\" /\u003e\n```\n\n#### Pill\n\nStatus and category pills.\n\n```tsx\n\u003cPill label=\"Active\" variant=\"success\" /\u003e\n\u003cPill label=\"Pending\" variant=\"warning\" /\u003e\n```\n\n#### Tag\n\nLabeling and categorization tags.\n\n```tsx\n\u003cTag\u003eNew\u003c/Tag\u003e\n\u003cTag variant=\"success\"\u003eAvailable\u003c/Tag\u003e\n```\n\n#### StatusIndicator\n\nStatus indicator dots with labels.\n\n```tsx\n\u003cStatusIndicator status=\"online\" label=\"Online\" /\u003e\n\u003cStatusIndicator status=\"offline\" label=\"Offline\" /\u003e\n```\n\n#### ProgressBar\n\nLinear progress bars with labels and variants.\n\n```tsx\n\u003cProgressBar value={75} max={100} variant=\"primary\" /\u003e\n\u003cProgressBar value={50} label=\"50%\" showLabel /\u003e\n```\n\n#### CircularProgress\n\nCircular progress indicators.\n\n```tsx\n\u003cCircularProgress value={75} size={64} /\u003e\n\u003cCircularProgress indeterminate size={48} /\u003e\n```\n\n#### Skeleton\n\nLoading skeleton screens for content placeholders.\n\n```tsx\n\u003cSkeleton variant=\"text\" width=\"100%\" /\u003e\n\u003cSkeleton variant=\"circular\" width={40} height={40} /\u003e\n\u003cSkeleton variant=\"rectangular\" width={200} height={100} /\u003e\n```\n\n#### KPI\n\nKey Performance Indicator display component.\n\n```tsx\n\u003cKPI\n value=\"$45,231\"\n label=\"Total Revenue\"\n trend={12.5}\n trendDirection=\"up\"\n icon={\u003cIcon name=\"dollar\" /\u003e}\n/\u003e\n```\n\n#### Stat\n\nStatistical display component for metrics.\n\n```tsx\n\u003cStat label=\"Total Users\" value=\"1,234\" change=\"+12.5%\" changeType=\"increase\" /\u003e\n```\n\n#### List\n\nComprehensive list component with selection, virtualization, and keyboard navigation.\n\n```tsx\n\u003cList\n items={users}\n renderItem={(user) =\u003e (\n \u003cListItem\n key={user.id}\n primary={user.name}\n secondary={user.email}\n icon={\u003cIcon name=\"user\" /\u003e}\n /\u003e\n )}\n selectable\n onSelectionChange={(selected) =\u003e console.log(selected)}\n/\u003e\n```\n\n#### Table\n\nData table component with sorting, selection, and pagination.\n\n```tsx\n\u003cTable\n data={users}\n columns={[\n { key: 'name', header: 'Name', sortable: true },\n { key: 'email', header: 'Email' },\n { key: 'role', header: 'Role', sortable: true },\n ]}\n selectable\n pagination={{ pageSize: 10 }}\n onSort={(key, direction) =\u003e console.log(key, direction)}\n/\u003e\n```\n\n### Drag and Drop\n\n#### SortableList\n\nReorderable list with drag-and-drop functionality.\n\n```tsx\n\u003cDndProvider\u003e\n \u003cSortableList\n items={items}\n onReorder={(newOrder) =\u003e setItems(newOrder)}\n renderItem={(item) =\u003e (\n \u003cdiv\u003e\n \u003cDragHandle /\u003e\n {item.label}\n \u003c/div\u003e\n )}\n /\u003e\n\u003c/DndProvider\u003e\n```\n\n#### SortableGrid\n\nReorderable grid layout with drag-and-drop.\n\n```tsx\n\u003cDndProvider\u003e\n \u003cSortableGrid\n items={gridItems}\n columns={3}\n onReorder={(newOrder) =\u003e setGridItems(newOrder)}\n renderItem={(item) =\u003e \u003cCard\u003e{item.content}\u003c/Card\u003e}\n /\u003e\n\u003c/DndProvider\u003e\n```\n\n#### KanbanBoard\n\nKanban-style board with draggable cards between columns.\n\n```tsx\n\u003cDndProvider\u003e\n \u003cKanbanBoard\n columns={[\n { id: 'todo', title: 'To Do', items: todoItems },\n { id: 'progress', title: 'In Progress', items: progressItems },\n { id: 'done', title: 'Done', items: doneItems },\n ]}\n onCardMove={(cardId, fromColumn, toColumn) =\u003e handleMove(cardId, fromColumn, toColumn)}\n /\u003e\n\u003c/DndProvider\u003e\n```\n\n#### ResizablePanels\n\nResizable panel layouts for split views.\n\n```tsx\n\u003cResizablePanels direction=\"horizontal\"\u003e\n \u003cPanel defaultSize={30} minSize={20}\u003e\n \u003cSidebar /\u003e\n \u003c/Panel\u003e\n \u003cPanel\u003e\n \u003cMainContent /\u003e\n \u003c/Panel\u003e\n\u003c/ResizablePanels\u003e\n```\n\n### Filters\n\n#### Filter System\n\nComprehensive filtering system with various field types and layouts.\n\n```tsx\n\u003cFilterProvider filters={filters} onChange={(filters) =\u003e console.log(filters)}\u003e\n \u003cFilterBar\u003e\n \u003cTextFilter field=\"name\" label=\"Name\" /\u003e\n \u003cSelectFilter\n field=\"status\"\n label=\"Status\"\n options={[\n { value: 'active', label: 'Active' },\n { value: 'inactive', label: 'Inactive' },\n ]}\n /\u003e\n \u003cDateRangeFilter field=\"createdAt\" label=\"Created\" /\u003e\n \u003cNumberRangeFilter field=\"price\" label=\"Price\" min={0} max={1000} /\u003e\n \u003c/FilterBar\u003e\n\u003c/FilterProvider\u003e\n```\n\n### Inputs\n\n#### Input\n\nText input with validation, formatting, and various configurations.\n\n```tsx\n\u003cInput\n label=\"Email\"\n type=\"email\"\n placeholder=\"Enter your email\"\n validation={(value) =\u003e\n value.includes('@') ? { valid: true } : { valid: false, message: 'Invalid email' }\n }\n/\u003e\n```\n\n#### Autocomplete\n\nInput with dropdown suggestions and filtering.\n\n```tsx\n\u003cAutocomplete\n options={[\n { value: '1', label: 'Option 1' },\n { value: '2', label: 'Option 2' },\n ]}\n placeholder=\"Search...\"\n/\u003e\n```\n\n#### Select\n\nDropdown select component with search and custom rendering.\n\n```tsx\n\u003cSelect\n options={[\n { value: 'us', label: 'United States' },\n { value: 'ca', label: 'Canada' },\n ]}\n placeholder=\"Select country\"\n/\u003e\n```\n\n#### Checkbox\n\nCheckbox input with labels and indeterminate state.\n\n```tsx\n\u003cCheckbox label=\"Accept terms\" checked={accepted} onChange={setAccepted} /\u003e\n```\n\n#### Radio \u0026 RadioGroup\n\nRadio button inputs with group management.\n\n```tsx\n\u003cRadioGroup value={selected} onChange={setSelected}\u003e\n \u003cRadio value=\"option1\" label=\"Option 1\" /\u003e\n \u003cRadio value=\"option2\" label=\"Option 2\" /\u003e\n\u003c/RadioGroup\u003e\n```\n\n#### Toggle\n\nSwitch/toggle component for boolean states.\n\n```tsx\n\u003cToggle checked={enabled} onChange={setEnabled} label=\"Enable feature\" /\u003e\n```\n\n#### Textarea\n\nMulti-line text input with auto-resize.\n\n```tsx\n\u003cTextarea label=\"Description\" placeholder=\"Enter description\" rows={4} maxLength={500} /\u003e\n```\n\n#### NumberInput\n\nNumeric input with increment/decrement controls.\n\n```tsx\n\u003cNumberInput label=\"Quantity\" min={0} max={100} step={1} value={quantity} onChange={setQuantity} /\u003e\n```\n\n#### PhoneInput\n\nInternational phone number input with country selection.\n\n```tsx\n\u003cPhoneInput value={phone} onChange={setPhone} defaultCountry=\"US\" /\u003e\n```\n\n#### Slider\n\nRange slider with marks and custom formatting.\n\n```tsx\n\u003cSlider min={0} max={100} value={volume} onChange={setVolume} marks={[0, 25, 50, 75, 100]} /\u003e\n```\n\n#### Rating\n\nStar rating input component.\n\n```tsx\n\u003cRating value={rating} onChange={setRating} max={5} /\u003e\n```\n\n#### TagInput\n\nInput for managing multiple tags.\n\n```tsx\n\u003cTagInput tags={tags} onChange={setTags} placeholder=\"Add tag...\" /\u003e\n```\n\n#### FilePicker\n\nFile upload component with drag-and-drop support.\n\n```tsx\n\u003cFilePicker\n accept=\".pdf,.doc,.docx\"\n maxSize={5 * 1024 * 1024}\n onChange={(files) =\u003e console.log(files)}\n/\u003e\n```\n\n#### ColorPicker\n\nColor selection with multiple format support (hex, rgb, hsl).\n\n```tsx\n\u003cColorPicker value={color} onChange={setColor} format=\"hex\" /\u003e\n```\n\n#### DatePicker\n\nSingle date selection with calendar interface.\n\n```tsx\n\u003cDatePicker value={date} onChange={setDate} minDate={new Date()} /\u003e\n```\n\n#### DateRangePicker\n\nDate range selection with presets.\n\n```tsx\n\u003cDateRangePicker\n startDate={startDate}\n endDate={endDate}\n onChange={(start, end) =\u003e {\n setStartDate(start);\n setEndDate(end);\n }}\n presets={[{ label: 'Last 7 days', value: { start: -7, end: 0 } }]}\n/\u003e\n```\n\n### Overlays\n\n#### Portal\n\nRender children in a different part of the DOM.\n\n```tsx\n\u003cPortal\u003e\n \u003cdiv\u003eThis renders at document.body\u003c/div\u003e\n\u003c/Portal\u003e\n```\n\n#### Popover\n\nFloating content positioned relative to a trigger.\n\n```tsx\n\u003cPopover trigger={\u003cButton\u003eOpen Popover\u003c/Button\u003e} content={\u003cdiv\u003ePopover content\u003c/div\u003e} /\u003e\n```\n\n#### Tooltip\n\nHover tooltip with customizable positioning.\n\n```tsx\n\u003cTooltip content=\"Helpful information\" position=\"top\"\u003e\n \u003cButton\u003eHover me\u003c/Button\u003e\n\u003c/Tooltip\u003e\n```\n\n#### Dropdown\n\nDropdown menu with trigger and content.\n\n```tsx\n\u003cDropdown\n trigger={\u003cButton\u003eOptions\u003c/Button\u003e}\n content={\n \u003cMenuList\u003e\n \u003cMenuItem\u003eAction 1\u003c/MenuItem\u003e\n \u003cMenuItem\u003eAction 2\u003c/MenuItem\u003e\n \u003c/MenuList\u003e\n }\n/\u003e\n```\n\n#### Menu\n\nFlexible menu system with items, groups, and dividers.\n\n```tsx\n\u003cMenu\u003e\n \u003cMenuList\u003e\n \u003cMenuItem onClick={() =\u003e console.log('Edit')}\u003eEdit\u003c/MenuItem\u003e\n \u003cMenuItem onClick={() =\u003e console.log('Delete')}\u003eDelete\u003c/MenuItem\u003e\n \u003cMenuDivider /\u003e\n \u003cMenuGroup label=\"More options\"\u003e\n \u003cMenuItem\u003eSettings\u003c/MenuItem\u003e\n \u003c/MenuGroup\u003e\n \u003c/MenuList\u003e\n\u003c/Menu\u003e\n```\n\n### Navigation\n\n#### Stepper\n\nMulti-step progress indicator for wizard-like interfaces.\n\n```tsx\n\u003cStepper activeStep={1}\u003e\n \u003cStep label=\"Account\" description=\"Create your account\" /\u003e\n \u003cStep label=\"Profile\" description=\"Set up your profile\" /\u003e\n \u003cStep label=\"Review\" description=\"Review and submit\" /\u003e\n\u003c/Stepper\u003e\n```\n\n#### Breadcrumbs\n\nNavigation breadcrumb trail for hierarchical page structure.\n\n```tsx\n\u003cBreadcrumbs\u003e\n \u003cBreadcrumbItem href=\"/\"\u003eHome\u003c/BreadcrumbItem\u003e\n \u003cBreadcrumbItem href=\"/products\"\u003eProducts\u003c/BreadcrumbItem\u003e\n \u003cBreadcrumbItem\u003eCurrent Page\u003c/BreadcrumbItem\u003e\n\u003c/Breadcrumbs\u003e\n```\n\n#### Navbar\n\nResponsive navigation bar with collapsible menu support.\n\n```tsx\n\u003cNavbar\u003e\n \u003cNavbarBrand\u003eMy App\u003c/NavbarBrand\u003e\n \u003cNavbarToggle /\u003e\n \u003cNavbarCollapse\u003e\n \u003cNavbarNav\u003e\n \u003cNavLink href=\"/\"\u003eHome\u003c/NavLink\u003e\n \u003cNavLink href=\"/about\"\u003eAbout\u003c/NavLink\u003e\n \u003c/NavbarNav\u003e\n \u003cNavbarActions\u003e\n \u003cButton\u003eSign In\u003c/Button\u003e\n \u003c/NavbarActions\u003e\n \u003c/NavbarCollapse\u003e\n\u003c/Navbar\u003e\n```\n\n#### SideNav\n\nSidebar navigation with groups, items, and dividers.\n\n```tsx\n\u003cSideNav\u003e\n \u003cSideNavGroup label=\"Main\"\u003e\n \u003cSideNavItem icon={\u003cIcon name=\"home\" /\u003e} href=\"/\"\u003e\n Dashboard\n \u003c/SideNavItem\u003e\n \u003cSideNavItem icon={\u003cIcon name=\"users\" /\u003e} href=\"/users\"\u003e\n Users\n \u003c/SideNavItem\u003e\n \u003c/SideNavGroup\u003e\n \u003cSideNavDivider /\u003e\n \u003cSideNavItem icon={\u003cIcon name=\"settings\" /\u003e} href=\"/settings\"\u003e\n Settings\n \u003c/SideNavItem\u003e\n\u003c/SideNav\u003e\n```\n\n#### Pagination\n\nPage navigation with customizable controls.\n\n```tsx\n\u003cPagination currentPage={page} totalPages={10} onPageChange={setPage} showFirstLast /\u003e\n```\n\n#### BottomNavigation\n\nMobile-friendly bottom navigation bar.\n\n```tsx\n\u003cBottomNavigation value={tab} onChange={setTab}\u003e\n \u003cBottomNavigationItem icon={\u003cIcon name=\"home\" /\u003e} label=\"Home\" value=\"home\" /\u003e\n \u003cBottomNavigationItem icon={\u003cIcon name=\"search\" /\u003e} label=\"Search\" value=\"search\" /\u003e\n \u003cBottomNavigationItem icon={\u003cIcon name=\"user\" /\u003e} label=\"Profile\" value=\"profile\" /\u003e\n\u003c/BottomNavigation\u003e\n```\n\n#### Tabs\n\nTabbed content navigation.\n\n```tsx\n\u003cTabs defaultValue=\"tab1\"\u003e\n \u003cTabList\u003e\n \u003cTab value=\"tab1\"\u003eTab 1\u003c/Tab\u003e\n \u003cTab value=\"tab2\"\u003eTab 2\u003c/Tab\u003e\n \u003c/TabList\u003e\n \u003cTabPanel value=\"tab1\"\u003eContent 1\u003c/TabPanel\u003e\n \u003cTabPanel value=\"tab2\"\u003eContent 2\u003c/TabPanel\u003e\n\u003c/Tabs\u003e\n```\n\n### Layout\n\n#### Panes\n\nResizable split pane layouts.\n\n```tsx\n\u003cPanes direction=\"horizontal\"\u003e\n \u003cPane minSize={200}\u003eLeft Panel\u003c/Pane\u003e\n \u003cPane\u003eRight Panel\u003c/Pane\u003e\n\u003c/Panes\u003e\n```\n\n#### ResponsiveStack\n\nStack layout that adapts to screen size.\n\n```tsx\n\u003cResponsiveStack breakpoint={768} spacing={4}\u003e\n \u003cCard\u003eItem 1\u003c/Card\u003e\n \u003cCard\u003eItem 2\u003c/Card\u003e\n\u003c/ResponsiveStack\u003e\n```\n\n#### AdaptiveGrid\n\nAuto-adjusting grid layout based on container width.\n\n```tsx\n\u003cAdaptiveGrid minItemWidth={250} gap={16}\u003e\n \u003cCard\u003eItem 1\u003c/Card\u003e\n \u003cCard\u003eItem 2\u003c/Card\u003e\n \u003cCard\u003eItem 3\u003c/Card\u003e\n\u003c/AdaptiveGrid\u003e\n```\n\n#### MasonryLayout\n\nPinterest-style masonry grid for variable-height items.\n\n```tsx\n\u003cMasonryLayout columns={3} gap={16}\u003e\n \u003cCard\u003eShort content\u003c/Card\u003e\n \u003cCard\u003eMuch longer content that takes more space\u003c/Card\u003e\n \u003cCard\u003eMedium content\u003c/Card\u003e\n\u003c/MasonryLayout\u003e\n```\n\n### Forms\n\n#### FormBuilder\n\nDynamic form builder with validation and state management.\n\n```tsx\n\u003cFormBuilder\n fields={[\n {\n name: 'email',\n label: 'Email',\n type: 'email',\n required: true,\n validation: { pattern: /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/ },\n },\n {\n name: 'password',\n label: 'Password',\n type: 'password',\n required: true,\n },\n ]}\n onSubmit={(values) =\u003e console.log(values)}\n/\u003e\n```\n\n## Theming\n\n### Theme Configuration\n\nThe library includes a comprehensive theming system with 37 color families and 10 shades each, providing 370+ colors out of the box.\n\n```tsx\nimport { GlobalProvider } from '@true-tech-team/ui-components';\n\nfunction App() {\n return (\n \u003cGlobalProvider\n themeConfig={{\n mode: 'light',\n // Optional: override theme values\n overrides: {\n colors: {\n primary: '#007bff',\n },\n },\n }}\n \u003e\n \u003cYourApp /\u003e\n \u003c/GlobalProvider\u003e\n );\n}\n```\n\n### Toggle Theme\n\n```tsx\nimport { useTheme } from '@true-tech-team/ui-components';\n\nfunction ThemeToggle() {\n const { mode, toggleMode } = useTheme();\n return \u003cbutton onClick={toggleMode}\u003eCurrent: {mode}\u003c/button\u003e;\n}\n```\n\n### CSS Variables\n\nAll theme values are exposed as CSS variables for easy customization:\n\n```css\n.custom-element {\n color: var(--theme-primary);\n background: var(--theme-surface);\n border-radius: var(--theme-radius-md);\n padding: var(--theme-spacing-4);\n}\n```\n\n### Utility Classes\n\n**Spacing (4px grid):**\n\n```html\n\u003cdiv class=\"m-4 p-2\"\u003eMargin 16px, Padding 8px\u003c/div\u003e\n\u003cdiv class=\"mt-2 mb-4 px-6\"\u003eMargin top 8px, bottom 16px, padding x 24px\u003c/div\u003e\n```\n\n**Flexbox:**\n\n```html\n\u003cdiv class=\"flex items-center justify-between gap-4\"\u003e...\u003c/div\u003e\n\u003cdiv class=\"flex-col items-start\"\u003e...\u003c/div\u003e\n```\n\n**Grid:**\n\n```html\n\u003cdiv class=\"grid grid-cols-3 gap-4\"\u003e...\u003c/div\u003e\n```\n\n**Colors:**\n\n```html\n\u003cdiv class=\"bg-primary text-on-primary\"\u003e...\u003c/div\u003e\n\u003cdiv class=\"bg-surface text-on-surface\"\u003e...\u003c/div\u003e\n```\n\n**Typography:**\n\n```html\n\u003ch1 class=\"text-2xl font-bold\"\u003eHeading\u003c/h1\u003e\n\u003cp class=\"text-sm text-secondary\"\u003eSmall text\u003c/p\u003e\n```\n\n## Utility Functions\n\n### Theme Utils\n\n```tsx\nimport { getThemeValue, setThemeValue, pxToRem, gridSpacing } from '@true-tech-team/ui-components';\n\n// Get theme values\nconst primaryColor = getThemeValue('--theme-primary');\n\n// Convert pixels to rem\nconst remValue = pxToRem(16); // '1rem'\n\n// Grid-based spacing\nconst spacing = gridSpacing(4); // '16px' (4 * 4px grid)\n```\n\n### Color Utils\n\n```tsx\nimport { hexToRgb, rgbToHsl, isLightColor, getBrightness } from '@true-tech-team/ui-components';\n\nconst rgb = hexToRgb('#ff0000'); // { r: 255, g: 0, b: 0 }\nconst hsl = rgbToHsl(255, 0, 0); // { h: 0, s: 100, l: 50 }\nconst isLight = isLightColor('#ffffff'); // true\n```\n\n### Date Utils\n\n```tsx\nimport { formatDate, getDaysInMonth, isDateInRange, addDays } from '@true-tech-team/ui-components';\n\nconst formatted = formatDate(new Date(), 'YYYY-MM-DD');\nconst daysInMonth = getDaysInMonth(2024, 0); // January 2024\nconst inRange = isDateInRange(date, startDate, endDate);\nconst futureDate = addDays(new Date(), 7);\n```\n\n### Validation Utils\n\n```tsx\nimport { validators, combineValidators } from '@true-tech-team/ui-components';\n\nconst emailValidator = validators.email();\nconst requiredValidator = validators.required('This field is required');\nconst combined = combineValidators([requiredValidator, emailValidator]);\n\nconst result = combined('test@example.com');\n```\n\n## Development\n\n### Building\n\n```bash\n# Build library for production\nnx build ui-components --configuration=production\n\n# Build for development\nnx build ui-components --configuration=development\n```\n\nThe build output will be in `dist/libs/ui-components/`.\n\n### Testing\n\n```bash\n# Run tests\nnx test ui-components\n\n# Run tests in watch mode\nnx test ui-components --watch\n\n# Run tests with coverage\nnx test ui-components --coverage\n```\n\n### Linting\n\n```bash\n# Lint\nnx lint ui-components\n\n# Lint and fix\nnx lint ui-components --fix\n```\n\n### Storybook\n\nView and interact with all components in Storybook:\n\n```bash\n# Start Storybook dev server\nnx storybook ui-components\n\n# Build Storybook static site\nnx build-storybook ui-components\n```\n\nStorybook will be available at http://localhost:6006.\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## TypeScript\n\nThis library is written in TypeScript and includes type definitions. All components, props, and utilities are fully typed for the best development experience.\n\n## Contributing\n\nContributions are welcome! Please ensure all tests pass and follow the existing code style.\n\n## Repository\n\n[True Tech Team UI Components Github](https://github.com/TrueTechTeam/true-tech-team/tree/master/libs/ui-components)\n\n## Storybook\n\n[True Tech Team React Components](https://truetechteamcomponents.netlify.app)\n\n## License\n\nMIT\n"])</script><script>self.__next_f.push([1,"1d:[\"$\",\"$L1f\",null,{\"defaultValue\":\"readme\",\"className\":\"w-full\",\"children\":[[\"$\",\"$L20\",null,{\"children\":[[\"$\",\"$L21\",null,{\"value\":\"readme\",\"children\":\"Readme\"}],[\"$\",\"$L21\",null,{\"value\":\"dependencies\",\"children\":[\"Dependencies\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",0,\")\"]}]]}],[\"$\",\"$L21\",null,{\"value\":\"versions\",\"children\":[\"Versions\",[\"$\",\"span\",null,{\"className\":\"ml-1.5 text-xs text-muted-foreground\",\"children\":[\"(\",11,\")\"]}]]}]]}],[\"$\",\"$L22\",null,{\"value\":\"readme\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L23\",null,{\"readme\":\"$24\"}]}],\"$L25\",\"$L26\"]}]\n"])</script><script>self.__next_f.push([1,"27:I[7860,[\"/_next/static/chunks/d25c1c87321c1e5e.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/d23d08e0b5d1d215.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\",\"/_next/static/chunks/ae55acb14c32e044.js?dpl=dpl_5VNVLvSu6UbYcDkvZSHQ251MMiDd\"],\"VersionList\"]\n"])</script><script>self.__next_f.push([1,"25:[\"$\",\"$L22\",null,{\"value\":\"dependencies\",\"className\":\"mt-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-6 lg:grid-cols-2\",\"children\":[false,[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-users h-4 w-4\",\"children\":[[\"$\",\"path\",\"1yyitq\",{\"d\":\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"}],[\"$\",\"circle\",\"nufk8\",{\"cx\":\"9\",\"cy\":\"7\",\"r\":\"4\"}],[\"$\",\"path\",\"kshegd\",{\"d\":\"M22 21v-2a4 4 0 0 0-3-3.87\"}],[\"$\",\"path\",\"1da9ce\",{\"d\":\"M16 3.13a4 4 0 0 1 0 7.75\"}],\"$undefined\"]}],\"Peer Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":2}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"react\",{\"href\":\"/package/react\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.0.0 || ^19.0.0\"}]]}],[\"$\",\"$L5\",\"react-dom\",{\"href\":\"/package/react-dom\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"react-dom\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^18.0.0 || ^19.0.0\"}]]}]]}]}]]}],false]}]}]\n"])</script><script>self.__next_f.push([1,"26:[\"$\",\"$L22\",null,{\"value\":\"versions\",\"className\":\"mt-6\",\"children\":[\"$\",\"$L27\",null,{\"packageName\":\"@true-tech-team/react-components\",\"versions\":[{\"version\":\"1.0.0\",\"date\":\"2026-02-09T23:16:53.856Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.0.10\",\"date\":\"2026-01-30T01:56:35.016Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.0.9\",\"date\":\"2026-01-29T11:35:23.864Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.0.8\",\"date\":\"2026-01-29T11:28:50.545Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.0.7\",\"date\":\"2026-01-29T11:25:30.308Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.0.6\",\"date\":\"2026-01-29T11:18:11.488Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.0.5\",\"date\":\"2026-01-26T03:08:50.835Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.0.4\",\"date\":\"2026-01-19T17:12:04.274Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.0.3\",\"date\":\"2026-01-17T14:11:02.911Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.0.2\",\"date\":\"2026-01-15T00:42:15.130Z\",\"deprecated\":\"$undefined\"},{\"version\":\"0.0.1\",\"date\":\"2026-01-13T22:53:14.740Z\",\"deprecated\":\"$undefined\"}],\"currentVersion\":\"1.0.0\"}]}]\n"])</script><div style="display:none" id="S:1"><div class="space-y-8"><div class="flex flex-col gap-6 lg:flex-row lg:gap-8"><div class="flex-1 space-y-4"><div class="flex flex-wrap items-start gap-3"><h1 class="font-mono text-2xl font-bold sm:text-3xl">@true-tech-team/react-components</h1><div class="flex flex-wrap items-center gap-2"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 font-mono">v1.0.0</span><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-blue-600 border-blue-200"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-code mr-1 h-3 w-3"><path d="M10 12.5 8 15l2 2.5"></path><path d="m14 12.5 2 2.5-2 2.5"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z"></path></svg>TypeScript</span></div></div><p class="text-lg text-muted-foreground">React TypeScript component library</p><div class="flex flex-wrap gap-1.5"><a href="/search?q=react"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">react</span></a><a href="/search?q=components"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">components</span></a><a href="/search?q=typescript"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">typescript</span></a><a href="/search?q=ui"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">ui</span></a><a href="/search?q=library"><span data-slot="badge" class="inline-flex items-center justify-center rounded-md border px-2 py-0.5 w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground text-xs font-normal hover:bg-accent">library</span></a></div><div class="flex flex-wrap gap-4 text-sm text-muted-foreground"><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download h-4 w-4"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" x2="12" y1="15" y2="3"></line></svg><span class="font-medium text-foreground">0</span>/week</span><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-calendar h-4 w-4"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path></svg>Updated today</span><span class="flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scale h-4 w-4"><path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path><path d="M7 21h10"></path><path d="M12 3v18"></path><path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"></path></svg>MIT</span><span class="flex items-center gap-1.5">Unpacked: 1.7 MB</span></div><div class="text-sm"><span class="text-muted-foreground">Published by </span><a class="font-medium hover:underline" href="/~jtrue">jtrue</a></div></div><div class="w-full space-y-4 lg:w-80"><div class="rounded-lg border bg-card"><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="text-muted-foreground inline-flex h-9 items-center w-full justify-start rounded-none border-b bg-transparent p-0" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_36av5ubrb_-content-npm" data-state="active" id="radix-_R_36av5ubrb_-trigger-npm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">npm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-yarn" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-yarn" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">yarn</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-pnpm" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-pnpm" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">pnpm</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_36av5ubrb_-content-bun" data-state="inactive" id="radix-_R_36av5ubrb_-trigger-bun" data-slot="tabs-trigger" class="dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 border px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">bun</button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-npm" id="radix-_R_36av5ubrb_-content-npm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0" style="animation-duration:0s"><div class="flex items-center justify-between gap-2 p-3"><code class="flex-1 overflow-x-auto whitespace-nowrap font-mono text-sm">npm install @true-tech-team/react-components</code><button data-slot="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 size-9 h-8 w-8 shrink-0"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-4 w-4"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg></button></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-yarn" hidden="" id="radix-_R_36av5ubrb_-content-yarn" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-pnpm" hidden="" id="radix-_R_36av5ubrb_-content-pnpm" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_36av5ubrb_-trigger-bun" hidden="" id="radix-_R_36av5ubrb_-content-bun" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-0"></div></div></div><div class="flex flex-wrap gap-2"><a href="https://npmjs.com/package/@true-tech-team/react-components" target="_blank" rel="noopener noreferrer" data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link mr-1.5 h-4 w-4"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg>npm</a></div></div></div><div dir="ltr" data-orientation="horizontal" data-slot="tabs" class="flex flex-col gap-2 w-full"><div role="tablist" aria-orientation="horizontal" data-slot="tabs-list" class="bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]" tabindex="-1" data-orientation="horizontal" style="outline:none"><button type="button" role="tab" aria-selected="true" aria-controls="radix-_R_aav5ubrb_-content-readme" data-state="active" id="radix-_R_aav5ubrb_-trigger-readme" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Readme</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-dependencies" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-dependencies" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Dependencies<span class="ml-1.5 text-xs text-muted-foreground">(0)</span></button><button type="button" role="tab" aria-selected="false" aria-controls="radix-_R_aav5ubrb_-content-versions" data-state="inactive" id="radix-_R_aav5ubrb_-trigger-versions" data-slot="tabs-trigger" class="data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Versions<span class="ml-1.5 text-xs text-muted-foreground">(11)</span></button></div><div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-readme" id="radix-_R_aav5ubrb_-content-readme" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6" style="animation-duration:0s"><div class="relative"><div class="prose prose-sm dark:prose-invert max-w-none overflow-hidden rounded-lg border p-6" style="max-height:500px"><p><h1 class="text-2xl font-bold mt-6 mb-4">@true-tech-team/ui-components</h1></p><p class="my-3">A comprehensive React component library built with TypeScript, SCSS Modules, and featuring a robust theming system with dark/light mode support.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Features</h2></p><p class="my-3">- 🎨 <strong>Comprehensive Theming</strong> - 37 color families with 10 shades each (370+ colors)<br />- 🌓 <strong>Dark/Light Mode</strong> - Built-in theme switching with CSS variables<br />- 📏 <strong>4px Grid System</strong> - Consistent spacing throughout<br />- 🎯 <strong>Type-Safe</strong> - Full TypeScript support with comprehensive types<br />- 🧩 <strong>Component Library</strong> - Reusable, customizable components<br />- 🎭 <strong>Icon System</strong> - SVG-based icons with easy customization<br />- 🛠️ <strong>Utility Classes</strong> - 500+ utility classes for rapid development<br />- 📦 <strong>Tree-Shakeable</strong> - Optimized bundle sizes<br />- ♿ <strong>Accessible</strong> - Built with accessibility in mind</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Installation</h2></p><p class="my-3">``<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br />npm install @true-tech-team/ui-components<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Quick Start</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { GlobalProvider } from '@true-tech-team/ui-components';</p><p class="my-3">function App() {<br /> return (<br /> <GlobalProvider themeConfig={{ mode: 'light' }}><br /> <YourApp /><br /> </GlobalProvider><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { Button, Icon } from '@true-tech-team/ui-components';</p><p class="my-3">function MyComponent() {<br /> return (<br /> <div><br /> <Button variant="primary" size="md"><br /> Click me<br /> </Button></p><p class="my-3"> <Button variant="outline" startIcon={<Icon name="check" size={16} />}><br /> Save<br /> </Button><br /> </div><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Components</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Button</p><p class="my-3">Versatile button component with multiple variants and sizes.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Button variant="primary" size="md" onClick={() => console.log('clicked')}><br /> Click me<br /></Button></p><p class="my-3"><Button variant="outline" startIcon={<Icon name="check" />}><br /> With Icon<br /></Button><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Variants:</strong> primary, secondary, outline, ghost<br /><strong>Sizes:</strong> sm, md, lg</p><p class="my-3">#### IconButton</p><p class="my-3">Button component optimized for icon-only display.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><IconButton aria-label="Close" size="md"><br /> <Icon name="close" /><br /></IconButton><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Icon</p><p class="my-3">SVG-based icon system with customizable size and color.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Icon name="check" size={24} color="var(--theme-primary)" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Available icons:</strong> chevron-down, chevron-up, chevron-left, chevron-right, close, check, info, warning, error, eye, eye-off, user, users, building, dollar, chart-line, chart-bar, trending-down, and more</p><p class="my-3">#### Avatar</p><p class="my-3">User profile avatars with image, initials, and icon variants.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Avatar src="/path/to/image.jpg" alt="User name" size="md" /><br /><Avatar initials="JD" size="lg" /><br /><Avatar icon={<Icon name="user" />} variant="secondary" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Sizes:</strong> xs, sm, md, lg, xl<br /><strong>Variants:</strong> primary, secondary, tertiary</p><p class="my-3">#### Badge</p><p class="my-3">Notification badges with count display.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Badge count={5} variant="primary" /><br /><Badge count={99} max={99} variant="error" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Chip</p><p class="my-3">Interactive chips for tags and selections.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Chip label="React" onDelete={() => {}} /><br /><Chip label="TypeScript" variant="outlined" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Pill</p><p class="my-3">Status and category pills.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Pill label="Active" variant="success" /><br /><Pill label="Pending" variant="warning" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Tag</p><p class="my-3">Labeling and categorization tags.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Tag>New</Tag><br /><Tag variant="success">Available</Tag><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### StatusIndicator</p><p class="my-3">Status indicator dots with labels.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><StatusIndicator status="online" label="Online" /><br /><StatusIndicator status="offline" label="Offline" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### ProgressBar</p><p class="my-3">Linear progress bars with labels and variants.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><ProgressBar value={75} max={100} variant="primary" /><br /><ProgressBar value={50} label="50%" showLabel /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### CircularProgress</p><p class="my-3">Circular progress indicators.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><CircularProgress value={75} size={64} /><br /><CircularProgress indeterminate size={48} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Skeleton</p><p class="my-3">Loading skeleton screens for content placeholders.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Skeleton variant="text" width="100%" /><br /><Skeleton variant="circular" width={40} height={40} /><br /><Skeleton variant="rectangular" width={200} height={100} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### KPI</p><p class="my-3">Key Performance Indicator display component.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><KPI<br /> value="$45,231"<br /> label="Total Revenue"<br /> trend={12.5}<br /> trendDirection="up"<br /> icon={<Icon name="dollar" />}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Stat</p><p class="my-3">Statistical display component for metrics.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Stat label="Total Users" value="1,234" change="+12.5%" changeType="increase" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### List</p><p class="my-3">Comprehensive list component with selection, virtualization, and keyboard navigation.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><List<br /> items={users}<br /> renderItem={(user) => (<br /> <ListItem<br /> key={user.id}<br /> primary={user.name}<br /> secondary={user.email}<br /> icon={<Icon name="user" />}<br /> /><br /> )}<br /> selectable<br /> onSelectionChange={(selected) => console.log(selected)}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Table</p><p class="my-3">Data table component with sorting, selection, and pagination.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Table<br /> data={users}<br /> columns={[<br /> { key: 'name', header: 'Name', sortable: true },<br /> { key: 'email', header: 'Email' },<br /> { key: 'role', header: 'Role', sortable: true },<br /> ]}<br /> selectable<br /> pagination={{ pageSize: 10 }}<br /> onSort={(key, direction) => console.log(key, direction)}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### SortableList</p><p class="my-3">Reorderable list with drag-and-drop functionality.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><DndProvider><br /> <SortableList<br /> items={items}<br /> onReorder={(newOrder) => setItems(newOrder)}<br /> renderItem={(item) => (<br /> <div><br /> <DragHandle /><br /> {item.label}<br /> </div><br /> )}<br /> /><br /></DndProvider><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### SortableGrid</p><p class="my-3">Reorderable grid layout with drag-and-drop.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><DndProvider><br /> <SortableGrid<br /> items={gridItems}<br /> columns={3}<br /> onReorder={(newOrder) => setGridItems(newOrder)}<br /> renderItem={(item) => <Card>{item.content}</Card>}<br /> /><br /></DndProvider><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### KanbanBoard</p><p class="my-3">Kanban-style board with draggable cards between columns.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><DndProvider><br /> <KanbanBoard<br /> columns={[<br /> { id: 'todo', title: 'To Do', items: todoItems },<br /> { id: 'progress', title: 'In Progress', items: progressItems },<br /> { id: 'done', title: 'Done', items: doneItems },<br /> ]}<br /> onCardMove={(cardId, fromColumn, toColumn) => handleMove(cardId, fromColumn, toColumn)}<br /> /><br /></DndProvider><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### ResizablePanels</p><p class="my-3">Resizable panel layouts for split views.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><ResizablePanels direction="horizontal"><br /> <Panel defaultSize={30} minSize={20}><br /> <Sidebar /><br /> </Panel><br /> <Panel><br /> <MainContent /><br /> </Panel><br /></ResizablePanels><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Filter System</p><p class="my-3">Comprehensive filtering system with various field types and layouts.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><FilterProvider filters={filters} onChange={(filters) => console.log(filters)}><br /> <FilterBar><br /> <TextFilter field="name" label="Name" /><br /> <SelectFilter<br /> field="status"<br /> label="Status"<br /> options={[<br /> { value: 'active', label: 'Active' },<br /> { value: 'inactive', label: 'Inactive' },<br /> ]}<br /> /><br /> <DateRangeFilter field="createdAt" label="Created" /><br /> <NumberRangeFilter field="price" label="Price" min={0} max={1000} /><br /> </FilterBar><br /></FilterProvider><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Input</p><p class="my-3">Text input with validation, formatting, and various configurations.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Input<br /> label="Email"<br /> type="email"<br /> placeholder="Enter your email"<br /> validation={(value) =><br /> value.includes('@') ? { valid: true } : { valid: false, message: 'Invalid email' }<br /> }<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Autocomplete</p><p class="my-3">Input with dropdown suggestions and filtering.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Autocomplete<br /> options={[<br /> { value: '1', label: 'Option 1' },<br /> { value: '2', label: 'Option 2' },<br /> ]}<br /> placeholder="Search..."<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Select</p><p class="my-3">Dropdown select component with search and custom rendering.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Select<br /> options={[<br /> { value: 'us', label: 'United States' },<br /> { value: 'ca', label: 'Canada' },<br /> ]}<br /> placeholder="Select country"<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Checkbox</p><p class="my-3">Checkbox input with labels and indeterminate state.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Checkbox label="Accept terms" checked={accepted} onChange={setAccepted} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Radio & RadioGroup</p><p class="my-3">Radio button inputs with group management.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><RadioGroup value={selected} onChange={setSelected}><br /> <Radio value="option1" label="Option 1" /><br /> <Radio value="option2" label="Option 2" /><br /></RadioGroup><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Toggle</p><p class="my-3">Switch/toggle component for boolean states.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Toggle checked={enabled} onChange={setEnabled} label="Enable feature" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Textarea</p><p class="my-3">Multi-line text input with auto-resize.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Textarea label="Description" placeholder="Enter description" rows={4} maxLength={500} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### NumberInput</p><p class="my-3">Numeric input with increment/decrement controls.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><NumberInput label="Quantity" min={0} max={100} step={1} value={quantity} onChange={setQuantity} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### PhoneInput</p><p class="my-3">International phone number input with country selection.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><PhoneInput value={phone} onChange={setPhone} defaultCountry="US" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Slider</p><p class="my-3">Range slider with marks and custom formatting.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Slider min={0} max={100} value={volume} onChange={setVolume} marks={[0, 25, 50, 75, 100]} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Rating</p><p class="my-3">Star rating input component.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Rating value={rating} onChange={setRating} max={5} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### TagInput</p><p class="my-3">Input for managing multiple tags.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><TagInput tags={tags} onChange={setTags} placeholder="Add tag..." /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### FilePicker</p><p class="my-3">File upload component with drag-and-drop support.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><FilePicker<br /> accept=".pdf,.doc,.docx"<br /> maxSize={5 <em> 1024 </em> 1024}<br /> onChange={(files) => console.log(files)}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### ColorPicker</p><p class="my-3">Color selection with multiple format support (hex, rgb, hsl).</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><ColorPicker value={color} onChange={setColor} format="hex" /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### DatePicker</p><p class="my-3">Single date selection with calendar interface.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><DatePicker value={date} onChange={setDate} minDate={new Date()} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### DateRangePicker</p><p class="my-3">Date range selection with presets.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><DateRangePicker<br /> startDate={startDate}<br /> endDate={endDate}<br /> onChange={(start, end) => {<br /> setStartDate(start);<br /> setEndDate(end);<br /> }}<br /> presets={[{ label: 'Last 7 days', value: { start: -7, end: 0 } }]}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Portal</p><p class="my-3">Render children in a different part of the DOM.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Portal><br /> <div>This renders at document.body</div><br /></Portal><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Popover</p><p class="my-3">Floating content positioned relative to a trigger.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Popover trigger={<Button>Open Popover</Button>} content={<div>Popover content</div>} /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Tooltip</p><p class="my-3">Hover tooltip with customizable positioning.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Tooltip content="Helpful information" position="top"><br /> <Button>Hover me</Button><br /></Tooltip><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Dropdown</p><p class="my-3">Dropdown menu with trigger and content.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Dropdown<br /> trigger={<Button>Options</Button>}<br /> content={<br /> <MenuList><br /> <MenuItem>Action 1</MenuItem><br /> <MenuItem>Action 2</MenuItem><br /> </MenuList><br /> }<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Menu</p><p class="my-3">Flexible menu system with items, groups, and dividers.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Menu><br /> <MenuList><br /> <MenuItem onClick={() => console.log('Edit')}>Edit</MenuItem><br /> <MenuItem onClick={() => console.log('Delete')}>Delete</MenuItem><br /> <MenuDivider /><br /> <MenuGroup label="More options"><br /> <MenuItem>Settings</MenuItem><br /> </MenuGroup><br /> </MenuList><br /></Menu><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Stepper</p><p class="my-3">Multi-step progress indicator for wizard-like interfaces.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Stepper activeStep={1}><br /> <Step label="Account" description="Create your account" /><br /> <Step label="Profile" description="Set up your profile" /><br /> <Step label="Review" description="Review and submit" /><br /></Stepper><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Breadcrumbs</p><p class="my-3">Navigation breadcrumb trail for hierarchical page structure.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Breadcrumbs><br /> <BreadcrumbItem href="/">Home</BreadcrumbItem><br /> <BreadcrumbItem href="/products">Products</BreadcrumbItem><br /> <BreadcrumbItem>Current Page</BreadcrumbItem><br /></Breadcrumbs><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Navbar</p><p class="my-3">Responsive navigation bar with collapsible menu support.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Navbar><br /> <NavbarBrand>My App</NavbarBrand><br /> <NavbarToggle /><br /> <NavbarCollapse><br /> <NavbarNav><br /> <NavLink href="/">Home</NavLink><br /> <NavLink href="/about">About</NavLink><br /> </NavbarNav><br /> <NavbarActions><br /> <Button>Sign In</Button><br /> </NavbarActions><br /> </NavbarCollapse><br /></Navbar><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### SideNav</p><p class="my-3">Sidebar navigation with groups, items, and dividers.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><SideNav><br /> <SideNavGroup label="Main"><br /> <SideNavItem icon={<Icon name="home" />} href="/"><br /> Dashboard<br /> </SideNavItem><br /> <SideNavItem icon={<Icon name="users" />} href="/users"><br /> Users<br /> </SideNavItem><br /> </SideNavGroup><br /> <SideNavDivider /><br /> <SideNavItem icon={<Icon name="settings" />} href="/settings"><br /> Settings<br /> </SideNavItem><br /></SideNav><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Pagination</p><p class="my-3">Page navigation with customizable controls.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Pagination currentPage={page} totalPages={10} onPageChange={setPage} showFirstLast /><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### BottomNavigation</p><p class="my-3">Mobile-friendly bottom navigation bar.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><BottomNavigation value={tab} onChange={setTab}><br /> <BottomNavigationItem icon={<Icon name="home" />} label="Home" value="home" /><br /> <BottomNavigationItem icon={<Icon name="search" />} label="Search" value="search" /><br /> <BottomNavigationItem icon={<Icon name="user" />} label="Profile" value="profile" /><br /></BottomNavigation><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### Tabs</p><p class="my-3">Tabbed content navigation.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Tabs defaultValue="tab1"><br /> <TabList><br /> <Tab value="tab1">Tab 1</Tab><br /> <Tab value="tab2">Tab 2</Tab><br /> </TabList><br /> <TabPanel value="tab1">Content 1</TabPanel><br /> <TabPanel value="tab2">Content 2</TabPanel><br /></Tabs><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### Panes</p><p class="my-3">Resizable split pane layouts.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><Panes direction="horizontal"><br /> <Pane minSize={200}>Left Panel</Pane><br /> <Pane>Right Panel</Pane><br /></Panes><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### ResponsiveStack</p><p class="my-3">Stack layout that adapts to screen size.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><ResponsiveStack breakpoint={768} spacing={4}><br /> <Card>Item 1</Card><br /> <Card>Item 2</Card><br /></ResponsiveStack><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### AdaptiveGrid</p><p class="my-3">Auto-adjusting grid layout based on container width.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><AdaptiveGrid minItemWidth={250} gap={16}><br /> <Card>Item 1</Card><br /> <Card>Item 2</Card><br /> <Card>Item 3</Card><br /></AdaptiveGrid><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">#### MasonryLayout</p><p class="my-3">Pinterest-style masonry grid for variable-height items.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><MasonryLayout columns={3} gap={16}><br /> <Card>Short content</Card><br /> <Card>Much longer content that takes more space</Card><br /> <Card>Medium content</Card><br /></MasonryLayout><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">#### FormBuilder</p><p class="my-3">Dynamic form builder with validation and state management.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br /><FormBuilder<br /> fields={[<br /> {<br /> name: 'email',<br /> label: 'Email',<br /> type: 'email',<br /> required: true,<br /> validation: { pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/ },<br /> },<br /> {<br /> name: 'password',<br /> label: 'Password',<br /> type: 'password',<br /> required: true,<br /> },<br /> ]}<br /> onSubmit={(values) => console.log(values)}<br />/><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Theming</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">The library includes a comprehensive theming system with 37 color families and 10 shades each, providing 370+ colors out of the box.</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { GlobalProvider } from '@true-tech-team/ui-components';</p><p class="my-3">function App() {<br /> return (<br /> <GlobalProvider<br /> themeConfig={{<br /> mode: 'light',<br /> // Optional: override theme values<br /> overrides: {<br /> colors: {<br /> primary: '#007bff',<br /> },<br /> },<br /> }}<br /> ><br /> <YourApp /><br /> </GlobalProvider><br /> );<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { useTheme } from '@true-tech-team/ui-components';</p><p class="my-3">function ThemeToggle() {<br /> const { mode, toggleMode } = useTheme();<br /> return <button onClick={toggleMode}>Current: {mode}</button>;<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">All theme values are exposed as CSS variables for easy customization:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">css<br />.custom-element {<br /> color: var(--theme-primary);<br /> background: var(--theme-surface);<br /> border-radius: var(--theme-radius-md);<br /> padding: var(--theme-spacing-4);<br />}<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"><strong>Spacing (4px grid):</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><div class="m-4 p-2">Margin 16px, Padding 8px</div><br /><div class="mt-2 mb-4 px-6">Margin top 8px, bottom 16px, padding x 24px</div><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Flexbox:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><div class="flex items-center justify-between gap-4">...</div><br /><div class="flex-col items-start">...</div><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Grid:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><div class="grid grid-cols-3 gap-4">...</div><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Colors:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><div class="bg-primary text-on-primary">...</div><br /><div class="bg-surface text-on-surface">...</div><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><strong>Typography:</strong></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">html<br /><h1 class="text-2xl font-bold">Heading</h1><br /><p class="text-sm text-secondary">Small text</p><br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Utility Functions</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { getThemeValue, setThemeValue, pxToRem, gridSpacing } from '@true-tech-team/ui-components';</p><p class="my-3">// Get theme values<br />const primaryColor = getThemeValue('--theme-primary');</p><p class="my-3">// Convert pixels to rem<br />const remValue = pxToRem(16); // '1rem'</p><p class="my-3">// Grid-based spacing<br />const spacing = gridSpacing(4); // '16px' (4 * 4px grid)<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { hexToRgb, rgbToHsl, isLightColor, getBrightness } from '@true-tech-team/ui-components';</p><p class="my-3">const rgb = hexToRgb('#ff0000'); // { r: 255, g: 0, b: 0 }<br />const hsl = rgbToHsl(255, 0, 0); // { h: 0, s: 100, l: 50 }<br />const isLight = isLightColor('#ffffff'); // true<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { formatDate, getDaysInMonth, isDateInRange, addDays } from '@true-tech-team/ui-components';</p><p class="my-3">const formatted = formatDate(new Date(), 'YYYY-MM-DD');<br />const daysInMonth = getDaysInMonth(2024, 0); // January 2024<br />const inRange = isDateInRange(date, startDate, endDate);<br />const futureDate = addDays(new Date(), 7);<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">tsx<br />import { validators, combineValidators } from '@true-tech-team/ui-components';</p><p class="my-3">const emailValidator = validators.email();<br />const requiredValidator = validators.required('This field is required');<br />const combined = combineValidators([requiredValidator, emailValidator]);</p><p class="my-3">const result = combined('test@example.com');<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Development</h2></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br /><h1 class="text-2xl font-bold mt-6 mb-4">Build library for production</h1><br />nx build ui-components --configuration=production</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Build for development</h1><br />nx build ui-components --configuration=development<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3">The build output will be in </code>dist/libs/ui-components/<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.</p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br /><h1 class="text-2xl font-bold mt-6 mb-4">Run tests</h1><br />nx test ui-components</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Run tests in watch mode</h1><br />nx test ui-components --watch</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Run tests with coverage</h1><br />nx test ui-components --coverage<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br /><h1 class="text-2xl font-bold mt-6 mb-4">Lint</h1><br />nx lint ui-components</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Lint and fix</h1><br />nx lint ui-components --fix<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"></p><p class="my-3"><h3 class="text-lg font-medium mt-4 mb-2">$3</h3></p><p class="my-3">View and interact with all components in Storybook:</p><p class="my-3"></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">bash<br /><h1 class="text-2xl font-bold mt-6 mb-4">Start Storybook dev server</h1><br />nx storybook ui-components</p><p class="my-3"><h1 class="text-2xl font-bold mt-6 mb-4">Build Storybook static site</h1><br />nx build-storybook ui-components<br /></code>``</p><p class="my-3">Storybook will be available at http://localhost:6006.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Browser Support</h2></p><p class="my-3">- Chrome (latest)<br />- Firefox (latest)<br />- Safari (latest)<br />- Edge (latest)</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">TypeScript</h2></p><p class="my-3">This library is written in TypeScript and includes type definitions. All components, props, and utilities are fully typed for the best development experience.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Contributing</h2></p><p class="my-3">Contributions are welcome! Please ensure all tests pass and follow the existing code style.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Repository</h2></p><p class="my-3"><a href="https://github.com/TrueTechTeam/true-tech-team/tree/master/libs/ui-components" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">True Tech Team UI Components Github</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Storybook</h2></p><p class="my-3"><a href="https://truetechteamcomponents.netlify.app" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">True Tech Team React Components</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">MIT<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><template id="P:3"></template><template id="P:4"></template></div></div></div><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><div hidden id="S:4"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>