@donotdev/cli 0.0.3 → 0.0.5

package/templates/root-consumer/guides/COMPONENTS.md.example

@@ -1,875 +0,0 @@
-# Component Reference
-
-**Auto-generated from JSDoc** - All components use props-based API, no CSS needed.
-
----
-
-## Actions
-
-### Button
-
-Accessible, type-safe button component with behavioral variants.
-Supports icons, tooltips, responsive layouts, and render prop composition.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `render` | `(props: ButtonRenderProps) => ReactNode` | No | - | Render function for custom element composition (React 19 compatible). Use this instead of wrapping Button around a Link. See examples below. |
-| `display` | `compact \| full \| auto` | No | auto | Display mode: 'compact' (icon-only), 'full' (icon+label), 'auto' (CSS-driven) |
-| `icon` | `ComponentType<LucideProps> \| ReactNode` | No | - | Icon - Lucide component, string name, or ReactNode |
-| `iconEnd` | `boolean` | No | - | Whether to place icon on the right side. |
-| `tooltip` | `string` | No | - | Tooltip text to show on hover |
-| `floating` | `boolean` | No | - | Whether the button floats (e.g., FAB). |
-| `fullWidth` | `boolean` | No | - | Whether the button takes full width of container. |
-| `aria-label` | `string` | No | - | Defines a string value that labels the current element. |
-| `aria-describedby` | `string` | No | - | Identifies the element (or elements) that describes the object. |
-| `variant` | `"default" \| "primary" \| "outline" \| "ghost" \| "destructive" \| "link"` | No | - | Visual variant |
-
-**Examples:**
-
-```tsx
-// Standard button
-<Button variant="primary" icon={Mail}>Send Email</Button>
-
-// Button as Link (render prop pattern - React 19 compatible)
-<Button
-  icon={Home}
-  render={({ children, ...props }) => (
-    <Link href="/" {...props}>{children}</Link>
-  )}
->
-  Home
-</Button>
-
-// Button with Next.js Link
-<Button
-  variant="primary"
-  render={({ children, ...props }) => (
-    <Link href="/dashboard" {...props}>{children}</Link>
-  )}
->
-  Go to Dashboard
-</Button>
-```
-
----
-
-### FileButton
-
-File button component
-
-Renders a button that triggers file input selection.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `label` | `ReactNode` | No | Upload | - |
-| `asChild` | `boolean` | No | - | - |
-
----
-
-## Complex
-
-### Calendar
-
-Accessible date picker component built on react-day-picker.
-
----
-
-### InfiniteScroll
-
-InfiniteScroll component
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `items` | `T[]` | Yes | - | - |
-| `renderItem` | `(item: T, index: number) => ReactNode` | Yes | - | - |
-| `loadMore` | `() => void` | Yes | - | - |
-| `hasMore` | `boolean` | Yes | - | - |
-| `loading` | `boolean` | No | - | - |
-| `loadingComponent` | `ReactNode` | No | - | - |
-| `endMessage` | `ReactNode` | No | - | - |
-| `threshold` | `number` | No | 0.1 | - |
-| `rootMargin` | `string` | No | 100px | - |
-| `itemClassName` | `string` | No | - | - |
-| `gridCols` | `1 | 2 | 3 | 4 | 5 | 6` | No | 3 | - |
-| `gap` | `none | tight | medium | large` | No | medium | - |
-
----
-
-### Stepper
-
-Reusable stepper component for step-by-step workflows.
-Shows one step at a time with navigation controls.
-
----
-
-### Toggle
-
-Toggle component
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `variant` | `"default" | "outline" | null` | No | - | - |
-
----
-
-### ToggleGroup
-
-ToggleGroup component
-
----
-
-## Data Display
-
-### Avatar
-
-Accessible avatar component built on Radix UI primitives. Provides image and fallback support.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `src` | `string` | No | - | The URL of the avatar image |
-| `fallback` | `string` | Yes | - | The initials or text to display when image fails to load |
-| `alt` | `string` | No | - | Alt text for the image |
-
----
-
-### Badge
-
-Status indicator component with semantic variants.
-
-**Polymorphic Component**: Can render as `div`, `span`, or `mark` based on context.
-Defaults to `div` for block-level badges. Use `span` for inline badges within text.
-Use `mark` for semantic highlighting of important content.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `variant` | `"default" | "secondary" | "destructive" | "outline" | "accent" | null` | No | - | - |
-| `as` | `div | mark | span` | No | div | Element type to render as
-@example 'div' - Block-level badge (default)
-@example 'span' - Inline badge (for text content)
-@example 'mark' - Semantic highlight/mark (for emphasized content) |
-| `tooltip` | `string` | No | - | Tooltip text to show on hover |
-
----
-
-### Card
-
-Premium card component with behavioral variants and elevation.
-Supports header, content, and footer sections with automatic grid layout.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `asChild` | `boolean` | No | - | Whether to render as a child element (Radix Slot). |
-| `icon` | `IconType` | No | - | Optional icon to display next to the title |
-| `title` | `ReactNode` | No | - | Main title of the card |
-| `subtitle` | `ReactNode` | No | - | Subtitle displayed below the title |
-| `content` | `ReactNode` | No | - | Main content of the card |
-| `footer` | `ReactNode` | No | - | Footer content |
-| `tooltip` | `string` | No | - | Tooltip text |
-| `onClick` | `(() => void)` | No | - | Click handler |
-| `elevated` | `boolean` | No | - | Whether the card has elevation/shadow. |
-| `variant` | `"default" | "muted" | "accent" | null` | No | - | - |
-
----
-
-### DataTable
-
-High-level DataTable component with built-in sorting, filtering, search, and pagination.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `data` | `T[]` | Yes | - | Data array |
-| `columns` | `TableColumn<T>[]` | Yes | - | Column definitions |
-| `sortable` | `boolean` | No | true | Enable sorting |
-| `selectable` | `boolean` | No | - | Enable row selection |
-| `searchable` | `boolean` | No | true | Enable search |
-| `filterable` | `boolean` | No | - | Enable filtering (placeholder UI) |
-| `pagination` | `boolean` | No | true | Enable pagination |
-| `pageSize` | `number` | No | 10 | Page size |
-| `loading` | `boolean` | No | - | Loading state |
-| `onSort` | `((column: string, direction: "asc" | "desc") => void)` | No | - | Callback when sorting changes |
-| `onSelect` | `((selectedRows: T[]) => void)` | No | - | Callback when selection changes |
-| `onSearch` | `((query: string) => void)` | No | - | Callback when search query changes |
-| `onFilter` | `((filters: Record<string, any>) => void)` | No | - | Callback when filters change |
-
----
-
-### Separator
-
-Accessible separator component with semantic styling.
-Used to visually separate content in a list or group.
-
-**Variants:** `default` | `primary` | `accent` | `muted`
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `width` | `string | number` | No | - | Width of the separator (default: 80% for better visual hierarchy) |
-| `variant` | `default | primary | accent | muted` | No | default | Visual style variant. |
-
----
-
-### Text
-
-Text variant constants - DRY single source of truth
-Used for text styling via data-variant attribute
-
----
-
-## Feedback
-
-### Alert
-
-Attention-grabbing alert component with semantic variants and icons.
-
-**Variants:** `default` | `error` | `warning` | `success` | `info`
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `variant` | `default | error | warning | success | info` | No | default | The visual style of the alert. |
-| `hideIcon` | `boolean` | No | - | Whether to hide the variant icon. |
-| `title` | `ReactNode` | No | - | The title of the alert |
-| `description` | `ReactNode` | No | - | The main content/description of the alert |
-| `tooltip` | `string` | No | - | Tooltip text to show on hover |
-
----
-
-### FeatureFallback
-
-FeatureFallback component
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `featureName` | `string` | Yes | - | - |
-| `message` | `string` | No | - | - |
-| `icon` | `any` | No | 🔧 | - |
-| `showActionButton` | `boolean` | No | - | - |
-| `actionButtonText` | `string` | No | - | - |
-| `helpText` | `string` | No | - | - |
-
----
-
-### Skeleton
-
-Skeleton component for loading states.
-
-Features:
-- Multiple animation variants (pulse, wave, shimmer)
-- Size presets for common content types
-- Content-aware sizing
-- Full ARIA compliance
-- Customizable dimensions
-
-**Variants:** `pulse` | `wave` | `shimmer` | `none` | `text` | `heading` | `avatar` | `button` | `card` | `image` | `custom`
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `variant` | `pulse | wave | shimmer | none` | No | pulse | Animation variant |
-| `size` | `text | heading | avatar | button | card | image | custom` | No | custom | Size preset for common content types |
-| `width` | `string | number` | No | - | Custom width |
-| `height` | `string | number` | No | - | Custom height |
-| `lines` | `number` | No | 1 | Number of lines for text skeleton |
-| `aria-label` | `string` | No | Loading content | Accessibility label for screen readers |
-
----
-
-### Spinner
-
-Spinner component for loading states.
-
-Features:
-- Multiple sizes (sm, md, lg)
-- Accessible with proper ARIA labels
-- Theme-aware colors
-- Smooth animation
-
-**Variants:** `sm` | `md` | `lg`
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `size` | `sm | md | lg` | No | md | Size of the spinner |
-| `aria-label` | `string` | No | Loading | Accessibility label |
-
----
-
-## Inputs
-
-### Input
-
-Accessible input component with mobile-friendly touch targets.
-Styles key input states (focus, disabled, error) automatically.
-
----
-
-### Label
-
-Accessible label component built on Radix UI Label.
-Supports icons and various label positions.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `icon` | `ComponentType<{ className?: string; }>` | No | - | Optional icon to display with the label |
-| `iconEnd` | `boolean` | No | false | Whether to place icon at end (after text). RTL-safe. |
-
----
-
-### PasswordInput
-
-PasswordInput Component
-
-A password input field with show/hide toggle functionality.
-Features industry-standard UX patterns:
-- Eye icon toggle (show/hide password)
-- Keyboard accessibility (Enter to toggle)
-- Smooth icon transitions
-- Mobile-friendly touch targets
-- Screen reader support
-- ARIA labels and descriptions
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `showToggle` | `boolean` | No | true | Whether to show the password toggle button |
-| `toggleButton` | `ReactNode` | No | - | Custom toggle button content |
-| `visible` | `boolean` | No | - | Whether the password is currently visible |
-| `onVisibilityChange` | `((visible: boolean) => void)` | No | - | Callback when visibility changes |
-
----
-
-### RadioGroup
-
-Accessible radio group component built on Radix UI.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `variant` | `"round" | "square" | "dot" | "outline" | null` | No | 'round' | Visual style of the radio buttons. |
-
----
-
-### Textarea
-
-Textarea component
-
----
-
-## Interactive
-
-### AlertDialog
-
-A modal dialog that interrupts the user with important content and expects a response.
-Built on Radix UI AlertDialog.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `trigger` | `ReactNode` | No | - | The element that triggers the dialog to open |
-| `title` | `ReactNode` | Yes | - | The title of the alert dialog |
-| `description` | `ReactNode` | No | - | The description content of the alert dialog |
-| `cancelLabel` | `string` | No | Cancel | Text for the cancel button. |
-| `confirmLabel` | `string` | Yes | - | Text for the confirm button |
-| `onConfirm` | `(() => void)` | No | - | Callback when confirm action is taken |
-| `onCancel` | `(() => void)` | No | - | Callback when cancel action is taken |
-| `open` | `boolean` | No | - | Controlled open state |
-| `onOpenChange` | `((open: boolean) => void)` | No | - | Callback when open state changes |
-
----
-
-### ContextMenu
-
-Accessible context menu component built on Radix UI primitives.
-Supports nested submenus, checkboxes, and radio groups.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `trigger` | `ReactNode` | Yes | - | The element that triggers the context menu (right-click) |
-| `items` | `ContextMenuItemType[]` | Yes | - | List of items to display in the menu |
-
----
-
-### Dialog
-
-Accessible modal dialog component built on Radix UI primitives.
-Supports custom content sizes, actions, and variants.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `trigger` | `ReactNode` | No | - | The element that opens the dialog |
-| `title` | `ReactNode` | No | - | The title of the dialog |
-| `description` | `ReactNode` | No | - | The description of the dialog |
-| `footer` | `ReactNode` | No | - | Footer content |
-| `open` | `boolean` | No | - | Controlled open state |
-| `onOpenChange` | `((open: boolean) => void)` | No | - | Callback when open state changes |
-| `showClose` | `boolean` | No | true | Whether to show the close button |
-| `variant` | `any` | No | - | Visual variant of the dialog (uses surface variants: default, muted, accent) |
-| `actions` | `{ cancel?: { label: string; onClick?: (() => void); }; confirm?: { label: string; onClick?: (() => void) | undefined; variant?: any; } | undefined; } | undefined` | No | - | Shortcut prop to configure standard actions |
-
----
-
-### DropdownMenu
-
-Professional dropdown menu implementation with props-based API.
-Provides accessible, keyboard-navigable dropdown menus with DoNotDev theming.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `trigger` | `ReactNode` | No | - | The element that opens the menu |
-| `items` | `DropdownMenuItemData[]` | No | [] | List of menu items (alternative to children) |
-| `contentWidth` | `string` | No | - | Custom width for the content |
-| `contentAlign` | `start | center | end` | No | start | Alignment of the menu content |
-| `open` | `boolean` | No | - | Controlled open state |
-| `onOpenChange` | `((open: boolean) => void)` | No | - | Callback when open state changes |
-
----
-
-### HoverCard
-
-HoverCard component
-
----
-
-### Popover
-
-Accessible popover component built on Radix UI primitives.
-Displays rich content in a portal, triggered by a button.
-
-**Variants:** `default` | `inverted` | `muted` | `accent` | `ghost` | `subtle`
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `trigger` | `ReactNode` | No | - | Trigger element (button, text, etc.) |
-| `children` | `ReactNode` | No | - | Popover content (rendered inside the floating panel) |
-| `open` | `boolean` | No | - | Controlled open state |
-| `onOpenChange` | `((open: boolean) => void)` | No | - | Callback when open state changes |
-| `align` | `start | center | end` | No | center | Alignment relative to trigger |
-| `side` | `top | right | bottom | left` | No | bottom | Side to show popover |
-| `sideOffset` | `number` | No | 4 | Side offset in pixels |
-| `variant` | `default | inverted | muted | accent | ghost | subtle` | No | - | Optional variant for themed popovers |
-| `modal` | `boolean` | No | true | Whether popover is modal (blocks interaction with rest of page) |
-| `onInteractOutside` | `((event: Event) => void)` | No | - | Handler for outside click |
-
----
-
-### Sheet
-
-Accessible sheet (slide-out) component built on Radix UI Dialog.
-Used for sidebars, mobile navigation, or complex editing panels.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `trigger` | `ReactNode` | No | - | The element that opens the sheet |
-| `title` | `ReactNode` | No | - | The title of the sheet |
-| `description` | `ReactNode` | No | - | The description of the sheet |
-| `footer` | `ReactNode` | No | - | Footer content |
-| `open` | `boolean` | No | - | Controlled open state |
-| `onOpenChange` | `((open: boolean) => void)` | No | - | Callback when open state changes |
-| `showClose` | `boolean` | No | true | Whether to show the close button |
-| `showOverlay` | `boolean` | No | true | Whether to show the overlay |
-| `side` | `top | bottom | left | right` | No | right | The side of the screen the sheet slides from. |
-| `variant` | `any` | No | - | Visual variant of the sheet (uses surface variants: default, muted, accent) |
-
----
-
-### Tooltip
-
-Tooltip component
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `content` | `ReactNode` | Yes | - | - |
-| `side` | `top | right | bottom | left` | No | top | - |
-| `align` | `start | center | end` | No | center | - |
-| `delayDuration` | `number` | No | 300 | - |
-
----
-
-## Layout
-
-### CallToAction
-
-CallToAction component
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `as` | `section | aside | div` | No | section | Element type to render as
-@example 'section' - Standard CTA section (default)
-@example 'aside' - Sidebar promotional CTA
-@example 'div' - Generic container when semantic meaning not needed |
-| `title` | `string` | Yes | - | Main title |
-| `subtitle` | `string` | No | - | Subtitle or description |
-| `primaryAction` | `ReactNode` | No | - | Primary action button (ReactNode - bring your own Button+Link) |
-| `secondaryAction` | `ReactNode` | No | - | Secondary action button (ReactNode - bring your own Button+Link) |
-
----
-
-### HeroSection
-
-HeroSection component
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `variant` | `"primary" | "subtle" | "accent" | null` | No | - | - |
-| `as` | `section | div | header` | No | section | Element type to render as
-@example 'section' - Standard hero section (default)
-@example 'header' - Page header with hero content
-@example 'div' - Generic container when semantic meaning not needed |
-| `badge` | `string` | No | - | Badge text |
-| `title` | `string` | No | - | Hero title |
-| `subtitle` | `string` | No | - | Hero subtitle |
-| `fullHeight` | `boolean` | No | - | Full viewport height |
-
----
-
-### ScrollArea
-
-Scrollable area component with cross-browser custom scrollbars.
-Built on Radix UI ScrollArea.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `showHorizontal` | `boolean` | No | - | Show horizontal scrollbar. |
-| `showVertical` | `boolean` | No | true | Show vertical scrollbar. |
-
----
-
-### Section
-
-Layout section component with header, grid, and tone system.
-Content width is automatically constrained by PageContainer's --content-width variable.
-Use utility class `dndev-max-w-none` on content wrapper to bypass width constraints.
-
-**Polymorphic Component**: Can render as `section`, `article`, `aside`, `div`, or `main`
-based on semantic needs. Defaults to `section` for semantic HTML.
-
-**Variants:** `base` | `muted` | `elevated` | `contrast` | `accent`
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `as` | `section | article | aside | div | main` | No | section | Element type to render as
-@example 'section' - Standard section (default)
-@example 'article' - Independent content (blog posts, articles)
-@example 'aside' - Sidebar content, complementary information
-@example 'div' - Generic container when semantic meaning not needed
-@example 'main' - Main content area (use once per page) |
-| `title` | `string` | No | - | Section title (small, uppercase, accent color) |
-| `separator` | `boolean` | No | false | Show separator above section |
-| `tone` | `base | muted | elevated | contrast | accent` | No | base | Tone system for visual rhythm |
-| `gridCols` | `1 | 2 | 3 | 4` | No | - | Grid columns (1-4) |
-| `gridGap` | `none | tight | medium | large` | No | medium | Grid gap size |
-| `start` | `boolean` | No | false | Left-align content instead of centered |
-
----
-
-## Navigation
-
-### Accordion
-
-A vertically stacked set of interactive headings that each reveal a section of content.
-Built on Radix UI Accordion.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `type` | `single | multiple` | No | single | The type of accordion. |
-| `collapsible` | `boolean` | No | - | Whether an accordion item can be collapsed after opening (only for type="single"). |
-| `defaultValue` | `string | string[]` | No | - | The default active value(s) |
-| `value` | `string | string[]` | No | - | The controlled active value(s) |
-| `onValueChange` | `((value: string | string[]) => void)` | No | - | Callback when value changes |
-| `items` | `AccordionItemType[]` | Yes | - | The list of items to render |
-
----
-
-### Command
-
-Custom Command component using our design system.
-Pure React implementation with our interactive patterns.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `placeholder` | `string` | No | Search... | Placeholder text for the search input |
-| `emptyMessage` | `string` | No | No results found. | Message to show when no results found |
-| `groups` | `CommandGroup[]` | No | [] | Groups of command items |
-| `items` | `CommandItem[]` | No | [] | Standalone command items (ungrouped) |
-
----
-
-### CommandDialog
-
-CommandDialog component
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `open` | `boolean` | No | - | - |
-| `onOpenChange` | `((open: boolean) => void)` | No | - | - |
-| `title` | `ReactNode` | No | - | - |
-
----
-
-### NavigationMenu
-
-Props-based navigation menu component built on Radix UI primitives.
-Supports nested menus, rich content, responsive layouts, and collapsed icon-only mode for sidebars.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `items` | `NavigationMenuItem[]` | No | - | List of navigation items |
-| `vertical` | `boolean` | No | - | Whether to render vertically |
-| `collapsed` | `boolean` | No | - | Collapsed state (icon-only, for sidebars) |
-| `LinkComponent` | `ComponentType<any>` | No | 'a' as any | Custom link component (e.g., Next.js Link) |
-
----
-
-### Pagination
-
-Accessible pagination component with props-based API.
-Handles page number generation, ellipsis truncation, and navigation controls.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `currentPage` | `number` | Yes | - | Current page (1-indexed) |
-| `totalPages` | `number` | Yes | - | Total number of pages |
-| `onPageChange` | `(page: number) => void` | Yes | - | Callback when page changes |
-| `maxVisible` | `number` | No | 7 | Maximum number of page buttons to show (default: 7) |
-| `showNavigation` | `boolean` | No | true | Show previous/next buttons (default: true) |
-
----
-
-### Tabs
-
-Tabbed interface component with props-based API. WCAG 2.1 compliant with full keyboard navigation and ARIA support. Built on Radix UI Tabs primitives with Grid-based layout control.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `items` | `TabItem[]` | Yes | - | Array of tab items (see TabItem interface below) |
-| `defaultValue` | `string` | No | - | Default active tab value (uncontrolled) |
-| `value` | `string` | No | - | Controlled active tab value |
-| `onValueChange` | `(value: string) => void` | No | - | Callback when tab changes (for controlled mode) |
-| `cols` | `1 \| 2 \| 3 \| 4 \| 5 \| 6 \| 12 \| 'auto-fit' \| 'auto-fill'` | No | `6` | Number of columns for tab list (Grid prop) |
-| `minColWidth` | `string` | No | - | Minimum column width for auto-fit/auto-fill layouts (e.g., "250px") |
-| `gap` | `'none' \| 'tight' \| 'medium' \| 'large'` | No | `'none'` | Spacing between tabs (Grid prop) |
-| `align` | `'start' \| 'center' \| 'end' \| 'stretch'` | No | `'stretch'` | Vertical alignment (Grid prop) |
-| `listClassName` | `string` | No | - | Custom className for tab list container |
-| `contentClassName` | `string` | No | - | Custom className for tab content panels |
-| `className` | `string` | No | - | Custom className for root container |
-
-**TabItem Interface:**
-
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `value` | `string` | Yes | Unique identifier for the tab |
-| `label` | `string \| ReactNode` | Yes | Tab label content (text or React element) |
-| `content` | `ReactNode` | Yes | Tab panel content |
-| `disabled` | `boolean` | No | Whether the tab is disabled |
-| `className` | `string` | No | Additional className for the tab trigger |
-| `forceMount` | `boolean` | No | Force mount content even when inactive (for animations) |
-
-**Examples:**
-
-Basic usage:
-```tsx
-<Tabs
-  defaultValue="tab1"
-  items={[
-    { value: 'tab1', label: 'Tab 1', content: <div>Content 1</div> },
-    { value: 'tab2', label: 'Tab 2', content: <div>Content 2</div> }
-  ]}
-/>
-```
-
-Responsive tabs (6 columns desktop, auto-wraps to 3 columns mobile):
-```tsx
-<Tabs
-  items={tabItems}
-  defaultValue="tab1"
-  cols={6}
-  minColWidth="250px"
-  gap="none"
-/>
-```
-
-Fixed 3-column grid (2 rows of 3 on mobile):
-```tsx
-<Tabs
-  items={tabItems}
-  cols={3}
-  gap="tight"
-/>
-```
-
-Controlled tabs:
-```tsx
-const [activeTab, setActiveTab] = useState('tab1');
-
-<Tabs
-  value={activeTab}
-  onValueChange={setActiveTab}
-  items={items}
-/>
-```
-
-**Accessibility:**
-- Full keyboard navigation (Arrow keys, Home, End)
-- ARIA roles: `tablist`, `tab`, `tabpanel`
-- ARIA attributes: `aria-selected`, `aria-controls`, `aria-labelledby`
-- Focus management handled automatically
-- Screen reader support
-- Active tab: Background color + shadow (distinct from hover/focus states)
-- WCAG 2.1 Level AA compliant
-
-**Layout:**
-- Uses Grid internally for precise multi-row layouts
-- Accepts Grid props: `cols`, `minColWidth`, `gap`, `align`
-- Responsive: Use `cols={6}` with `minColWidth="250px"` for desktop 6 cols, mobile 3 cols
-- No card styling by default (composable - wrap in Card if needed)
-
----
-
-## Other
-
-### Collapsible
-
-Collapsible component
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `asChild` | `boolean` | No | - | - |
-
----
-
-### DescriptionList
-
-DescriptionList component for key-value pairs, specifications, and metadata.
-Uses semantic HTML (dl, dt, dd) for proper accessibility.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `items` | `DescriptionItem[]` | Yes | - | Array of term/definition pairs |
-| `orientation` | `horizontal | vertical` | No | vertical | Layout orientation |
-
----
-
-### Grid
-
-Grid Component
-
-Polymorphic CSS Grid layout primitive.
-Can render as any HTML element while maintaining grid layout.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `as` | `ElementType` | No | div | Element type to render as
-@example 'section', 'article', 'aside', 'header', 'footer', 'main' |
-| `cols` | `1 | 2 | 3 | 4 | 5 | 6 | 12 | auto-fit | auto-fill` | No | 1 | Number of columns |
-| `minColWidth` | `string` | No | "250px" | Minimum column width for auto-fit/auto-fill layouts
-@example "250px", "20rem" |
-| `gap` | `none | tight | medium | large` | No | medium | Spacing between items |
-| `align` | `center | start | end | stretch` | No | stretch | Vertical alignment (align-items) |
-| `areas` | `string` | No | - | Named grid areas (CSS grid-template-areas)
-Use with GridArea component for semantic grid layouts
-@example "left center right", "left right", "header header" / "sidebar main" |
-| `templateColumns` | `string` | No | - | Grid template columns (CSS grid-template-columns)
-Required when using `areas` prop
-@example "1fr auto 1fr", "1fr auto", "200px 1fr" |
-
----
-
-### List
-
-List component for bullet points, numbered lists, and feature lists.
-Zero CSS required - handles all styling via framework patterns.
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `items` | `(ReactNode | ListItem)[]` | Yes | - | Array of items (strings or objects) |
-| `ordered` | `boolean` | No | - | Whether to render as ordered list (numbers) |
-
----
-
-### ToggleGroupItem
-
-ToggleGroupItem component
-
----
-
-### VisuallyHidden
-
-VisuallyHidden component
-
-**Props:**
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `asChild` | `boolean` | No | - | - |
-
----
-
-
-**Remember:** No CSS. Just compose components with props.