doom-design-system 0.5.0 → 0.6.0

package/.agent/skills/doom/components/select.md

@@ -1,43 +0,0 @@
-# Select Component
-
-## Import
-
-```tsx
-import { Select } from "doom-design-system";
-```
-
-## Props
-
-| Prop           | Type                                           | Default  | Description                      |
-| -------------- | ---------------------------------------------- | -------- | -------------------------------- |
-| `options`      | `{ value: string \| number, label: string }[]` | required | Available options                |
-| `label`        | `string`                                       | —        | Label text                       |
-| `value`        | `string \| number`                             | —        | Controlled value                 |
-| `defaultValue` | `string \| number`                             | —        | Uncontrolled initial value       |
-| `onChange`     | `(e) => void`                                  | —        | Change handler (synthetic event) |
-| `placeholder`  | `string`                                       | —        | Placeholder text                 |
-| `name`         | `string`                                       | —        | Form field name                  |
-| `required`     | `boolean`                                      | —        | Required field                   |
-| `disabled`     | `boolean`                                      | —        | Disabled state                   |
-| `size`         | `"sm" \| "md"`                                 | `"md"`   | Trigger size                     |
-
-## Usage
-
-```tsx
-<Select
-  label="Country"
-  options={[
-    { value: "us", label: "United States" },
-    { value: "uk", label: "United Kingdom" },
-  ]}
-  value={country}
-  onChange={(e) => setCountry(e.target.value)}
-/>
-```
-
-## Guidelines
-
-- Use for single-select with moderate option count.
-- For searchable/multi-select, use `Combobox` instead.
-- Includes hidden input for form submission.
-- Full keyboard navigation (Arrow keys, Enter, Escape).

package/.agent/skills/doom/components/sheet.md

@@ -1,71 +0,0 @@
-# Sheet Component
-
-## Import
-
-```tsx
-import { Sheet } from "doom-design-system";
-```
-
-## Props
-
-| Prop       | Type                   | Default     | Description         |
-| ---------- | ---------------------- | ----------- | ------------------- |
-| `isOpen`   | `boolean`              | required    | Controls visibility |
-| `onClose`  | `() => void`           | required    | Close callback      |
-| `title`    | `ReactNode`            | —           | Header title        |
-| `children` | `ReactNode`            | required    | Sheet content       |
-| `footer`   | `ReactNode`            | —           | Footer content      |
-| `variant`  | `"default" \| "solid"` | `"default"` | Visual style        |
-
-## Usage Patterns
-
-### Shorthand API (simple sheets)
-
-```tsx
-<Sheet
-  isOpen={isOpen}
-  onClose={() => setIsOpen(false)}
-  title="Options"
-  footer={<Button onClick={handleConfirm}>Confirm</Button>}
->
-  <RadioGroup options={options} />
-</Sheet>
-```
-
-### Composition API (custom layouts)
-
-```tsx
-<Sheet isOpen={isOpen} onClose={onClose}>
-  <Sheet.Header>
-    <Flex align="center" gap={2}>
-      <Icon name="settings" />
-      <Text variant="h4">Advanced Options</Text>
-    </Flex>
-  </Sheet.Header>
-  <Sheet.Body>
-    <Stack gap={4}>{/* Custom content */}</Stack>
-  </Sheet.Body>
-  <Sheet.Footer>
-    <Button variant="ghost" onClick={onClose}>
-      Cancel
-    </Button>
-    <Button onClick={handleSave}>Apply</Button>
-  </Sheet.Footer>
-</Sheet>
-```
-
-## Sub-components
-
-| Component      | Description             |
-| -------------- | ----------------------- |
-| `Sheet.Header` | Header with drag handle |
-| `Sheet.Body`   | Scrollable content area |
-| `Sheet.Footer` | Action buttons area     |
-
-## Guidelines
-
-- Use for bottom sheets on mobile or compact overlays.
-- Supports drag-to-dismiss gesture (drag down 150px+ to close).
-- Closes on Escape key and overlay click.
-- Use `variant="solid"` for high-emphasis content.
-- Use composition API when you need custom header content.

package/.agent/skills/doom/components/sidebar.md

@@ -1,92 +0,0 @@
-# Sidebar Component
-
-The Sidebar is a complex navigation component supporting dual-mode (Standard and Rail), collapsible sections, groups, and hover-peek functionality.
-
-## Import
-
-```tsx
-import { Sidebar } from "doom-design-system";
-```
-
-## Props
-
-### Sidebar
-
-| Prop              | Type                                           | Default | Description                                                      |
-| ----------------- | ---------------------------------------------- | ------- | ---------------------------------------------------------------- |
-| `withRail`        | `boolean`                                      | `false` | Enables the two-column rail navigation.                          |
-| `collapsed`       | `boolean`                                      | `false` | Collapses the main panel (standard) or whole sidebar (rail).     |
-| `activeSection`   | `string`                                       | —       | The ID of the currently active Section.                          |
-| `activeItem`      | `string`                                       | —       | The `href` of the currently active Item.                         |
-| `onNavigate`      | `(href: string, e?: React.MouseEvent) => void` | —       | Navigation callback.                                             |
-| `onSectionChange` | `(id: string) => void`                         | —       | Callback when the active section changes (useful for Rail mode). |
-| `brandIcon`       | `React.ReactNode`                              | —       | Icon displayed at the top of the Sidebar/Rail.                   |
-
-### Sidebar.Section
-
-| Prop       | Type              | Default | Description                                    |
-| ---------- | ----------------- | ------- | ---------------------------------------------- |
-| `id`       | `string`          | —       | Unique identifier for section switching.       |
-| `label`    | `string`          | —       | Descriptive label for the section.             |
-| `icon`     | `React.ReactNode` | —       | Icon for the section (required for Rail mode). |
-| `expanded` | `boolean`         | —       | Controlled expansion state.                    |
-
-### Sidebar.Group
-
-| Prop       | Type              | Default | Description                      |
-| ---------- | ----------------- | ------- | -------------------------------- |
-| `id`       | `string`          | —       | Unique identifier for the group. |
-| `label`    | `string`          | —       | Descriptive label for the group. |
-| `icon`     | `React.ReactNode` | —       | Optional icon for the group.     |
-| `expanded` | `boolean`         | —       | Controlled expansion state.      |
-
-### Sidebar.Item
-
-| Prop            | Type              | Default | Description                                     |
-| --------------- | ----------------- | ------- | ----------------------------------------------- |
-| `href`          | `string`          | —       | Link destination.                               |
-| `icon`          | `React.ReactNode` | —       | Optional icon.                                  |
-| `appendContent` | `React.ReactNode` | —       | Content (badges, chips) at the end of the item. |
-
-## Usage
-
-### Standard Sidebar
-
-```tsx
-<Sidebar activeItem="/home">
-  <Sidebar.Header>App Logo</Sidebar.Header>
-  <Sidebar.Nav>
-    <Sidebar.Section id="main" label="Main" icon={<Home />}>
-      <Sidebar.Item href="/home" icon={<Home />}>
-        Dashboard
-      </Sidebar.Item>
-      <Sidebar.Item href="/inbox">Inbox</Sidebar.Item>
-    </Sidebar.Section>
-  </Sidebar.Nav>
-</Sidebar>
-```
-
-### Rail Mode with Groups
-
-```tsx
-<Sidebar withRail activeSection="admin">
-  <Sidebar.Nav>
-    <Sidebar.Section id="main" label="Main" icon={<Home />}>
-      <Sidebar.Item href="/home">Home</Sidebar.Item>
-    </Sidebar.Section>
-    <Sidebar.Section id="admin" label="Admin" icon={<Settings />}>
-      <Sidebar.Group id="users" label="User Management">
-        <Sidebar.Item href="/users/list">User List</Sidebar.Item>
-        <Sidebar.Item href="/users/permissions">Permissions</Sidebar.Item>
-      </Sidebar.Group>
-    </Sidebar.Section>
-  </Sidebar.Nav>
-</Sidebar>
-```
-
-## Guidelines
-
-- **Rail Icons**: Ensure every `Sidebar.Section` has an `icon` if `withRail` is enabled.
-- **Snappy UI**: The component uses instant transitions for a high-performance feel.
-- **Auto-collapse**: In rail mode, clicking an item auto-collapses to save space.
-- **Accessibility**: Collapsed content is hidden via `display: none` to remove it from keyboard tab order.

package/.agent/skills/doom/components/skeleton.md

@@ -1,35 +0,0 @@
-# Skeleton Component
-
-## Import
-
-```tsx
-import { Skeleton } from "doom-design-system";
-```
-
-## Props
-
-| Prop      | Type                                    | Default         | Description |
-| --------- | --------------------------------------- | --------------- | ----------- |
-| `width`   | `string`                                | —               | CSS width   |
-| `height`  | `string`                                | —               | CSS height  |
-| `variant` | `"text" \| "circular" \| "rectangular"` | `"rectangular"` | Shape       |
-
-## Usage
-
-```tsx
-// Text placeholder
-<Skeleton variant="text" width="200px" height="1em" />
-
-// Avatar placeholder
-<Skeleton variant="circular" width="48px" height="48px" />
-
-// Card placeholder
-<Skeleton width="100%" height="150px" />
-```
-
-## Guidelines
-
-- Use while loading content to prevent layout shift.
-- Match skeleton dimensions to expected content size.
-- Use `variant="text"` for text lines, `variant="circular"` for avatars.
-- Used internally by `Image` component during load.

package/.agent/skills/doom/components/slat.md

@@ -1,46 +0,0 @@
-# Slat Component
-
-## Import
-
-```tsx
-import { Slat } from "doom-design-system";
-```
-
-## Props
-
-| Prop             | Type                                 | Default     | Description                    |
-| ---------------- | ------------------------------------ | ----------- | ------------------------------ |
-| `label`          | `ReactNode`                          | required    | Primary label                  |
-| `secondaryLabel` | `ReactNode`                          | —           | Secondary text                 |
-| `prependContent` | `ReactNode`                          | —           | Left content (icon, thumbnail) |
-| `appendContent`  | `ReactNode`                          | —           | Right content (actions)        |
-| `variant`        | `"default" \| "danger" \| "success"` | `"default"` | Visual style                   |
-| `onClick`        | `() => void`                         | —           | Makes slat clickable           |
-
-## Usage
-
-```tsx
-<Slat
-  label="document.pdf"
-  secondaryLabel="2.4 MB"
-  prependContent={<FileIcon />}
-  appendContent={
-    <Button size="sm" variant="danger">
-      <X size={16} />
-    </Button>
-  }
-/>
-
-// Clickable slat
-<Slat
-  label="Settings"
-  prependContent={<Settings size={20} />}
-  onClick={() => navigate("/settings")}
-/>
-```
-
-## Guidelines
-
-- Use for list items like file lists, settings, or navigation.
-- Used internally by `FileUpload` for file list display.
-- When `onClick` is provided, slat becomes focusable and keyboard accessible.

package/.agent/skills/doom/components/slider.md

@@ -1,51 +0,0 @@
-# Slider Component
-
-## Import
-
-```tsx
-import { Slider } from "doom-design-system";
-```
-
-## Props
-
-| Prop           | Type                         | Default | Description                        |
-| -------------- | ---------------------------- | ------- | ---------------------------------- |
-| `label`        | `string`                     | —       | Label text                         |
-| `showValue`    | `boolean`                    | —       | Display current value              |
-| `value`        | `number \| [number, number]` | —       | Controlled value (single or range) |
-| `defaultValue` | `number \| [number, number]` | —       | Uncontrolled initial value         |
-| `onChange`     | `(value) => void`            | —       | Change handler                     |
-| `min`          | `number`                     | `0`     | Minimum value                      |
-| `max`          | `number`                     | `100`   | Maximum value                      |
-| `step`         | `number`                     | `1`     | Step increment                     |
-
-## Usage
-
-```tsx
-// Single value slider
-<Slider
-  label="Volume"
-  showValue
-  value={volume}
-  onChange={setVolume}
-/>
-
-// Range slider
-<Slider
-  label="Price Range"
-  showValue
-  value={[minPrice, maxPrice]}
-  onChange={([min, max]) => {
-    setMinPrice(min);
-    setMaxPrice(max);
-  }}
-  min={0}
-  max={1000}
-/>
-```
-
-## Guidelines
-
-- Pass `[number, number]` tuple for range slider (two thumbs).
-- Range slider prevents thumbs from crossing each other.
-- Use `showValue` to display the current value.

package/.agent/skills/doom/components/spinner.md

@@ -1,34 +0,0 @@
-# Spinner Component
-
-## Import
-
-```tsx
-import { Spinner } from "doom-design-system";
-```
-
-## Props
-
-| Prop          | Type                           | Default | Description    |
-| ------------- | ------------------------------ | ------- | -------------- |
-| `size`        | `"sm" \| "md" \| "lg" \| "xl"` | `"md"`  | Spinner size   |
-| `strokeWidth` | `number`                       | `2`     | Line thickness |
-
-Plus all Lucide icon props.
-
-## Usage
-
-```tsx
-<Spinner />
-
-<Spinner size="lg" />
-
-<Button loading>
-  {/* Button uses Spinner internally when loading */}
-</Button>
-```
-
-## Guidelines
-
-- Use for loading states.
-- Prefer `Button`'s `loading` prop instead of manually adding Spinner.
-- Has `role="status"` and `aria-label="Loading"` for accessibility.

package/.agent/skills/doom/components/splitbutton.md

@@ -1,35 +0,0 @@
-# SplitButton Component
-
-## Import
-
-```tsx
-import { SplitButton } from "doom-design-system";
-```
-
-## Props
-
-| Prop             | Type                                       | Default     | Description               |
-| ---------------- | ------------------------------------------ | ----------- | ------------------------- |
-| `primaryLabel`   | `string`                                   | required    | Main button text          |
-| `onPrimaryClick` | `() => void`                               | required    | Main button click handler |
-| `items`          | `{ label: string, onClick: () => void }[]` | required    | Dropdown items            |
-| `variant`        | `"primary" \| "secondary"`                 | `"primary"` | Button style              |
-
-## Usage
-
-```tsx
-<SplitButton
-  primaryLabel="Save"
-  onPrimaryClick={handleSave}
-  items={[
-    { label: "Save as Draft", onClick: handleSaveDraft },
-    { label: "Save and Publish", onClick: handleSavePublish },
-  ]}
-/>
-```
-
-## Guidelines
-
-- Use when there's a primary action with related secondary actions.
-- Primary button on left, dropdown trigger on right.
-- For simple menus without primary action, use `Dropdown` instead.

package/.agent/skills/doom/components/switch.md

@@ -1,40 +0,0 @@
-# Switch Component
-
-## Import
-
-```tsx
-import { Switch } from "doom-design-system";
-```
-
-## Props
-
-| Prop       | Type                         | Default | Description              |
-| ---------- | ---------------------------- | ------- | ------------------------ |
-| `checked`  | `boolean`                    | `false` | Controlled checked state |
-| `onChange` | `(checked: boolean) => void` | —       | Change handler           |
-| `disabled` | `boolean`                    | —       | Disabled state           |
-| `label`    | `string`                     | —       | Label text               |
-| `readOnly` | `boolean`                    | —       | Read-only state          |
-
-## Usage
-
-```tsx
-<Switch
-  label="Dark Mode"
-  checked={darkMode}
-  onChange={setDarkMode}
-/>
-
-<Switch
-  label="Notifications"
-  checked={notifications}
-  onChange={setNotifications}
-  disabled={!hasPermission}
-/>
-```
-
-## Guidelines
-
-- Use for binary on/off toggles.
-- Prefer `Switch` over `Checkbox` for instant-apply settings.
-- Use `Checkbox` for forms that require explicit submission.

package/.agent/skills/doom/components/table.md

@@ -1,82 +0,0 @@
-# Table Component
-
-## Import
-
-```tsx
-import { Table } from "doom-design-system";
-import { ColumnDef } from "@tanstack/react-table";
-```
-
-## Props
-
-| Prop                      | Type                                   | Default      | Description                                    |
-| ------------------------- | -------------------------------------- | ------------ | ---------------------------------------------- |
-| `data`                    | `T[]`                                  | required     | Array of row data                              |
-| `columns`                 | `ColumnDef<T>[]`                       | required     | TanStack column definitions                    |
-| `enablePagination`        | `boolean`                              | `true`       | Enable pagination controls                     |
-| `enableFiltering`         | `boolean`                              | `true`       | Enable global search                           |
-| `enableColumnFilters`     | `boolean`                              | `true`       | Enable per-column filters                      |
-| `enableSorting`           | `boolean`                              | `true`       | Enable column sorting                          |
-| `enableVirtualization`    | `boolean`                              | `false`      | Virtualize rows for large datasets             |
-| `enableAdvancedFiltering` | `boolean`                              | `false`      | Enable FilterBuilder UI                        |
-| `pageSize`                | `number`                               | `10`         | Default rows per page                          |
-| `height`                  | `string \| number`                     | —            | Fixed height (scrolls body with sticky header) |
-| `maxHeight`               | `string \| number`                     | —            | Max height (scrolls body with sticky header)   |
-| `variant`                 | `"default" \| "flat"`                  | `"default"`  | Visual style                                   |
-| `density`                 | `"compact" \| "standard" \| "relaxed"` | `"standard"` | Row padding                                    |
-| `striped`                 | `boolean`                              | `false`      | Alternating row colors                         |
-| `filters`                 | `FilterConfig[]`                       | —            | Filter definitions for advanced filtering      |
-| `toolbarContent`          | `ReactNode`                            | —            | Custom toolbar content                         |
-
-## Column Definition
-
-```tsx
-const columns: ColumnDef<User>[] = [
-  {
-    accessorKey: "name",
-    header: "Name",
-    size: 200,
-  },
-  {
-    accessorKey: "email",
-    header: "Email",
-  },
-  {
-    accessorKey: "status",
-    header: "Status",
-    cell: ({ getValue }) => <Badge>{getValue()}</Badge>,
-  },
-];
-```
-
-## Usage
-
-```tsx
-<Table
-  data={users}
-  columns={columns}
-  enablePagination
-  enableSorting
-  density="compact"
-/>
-```
-
-## Advanced Filtering
-
-```tsx
-<Table
-  data={orders}
-  columns={columns}
-  enableAdvancedFiltering
-  filters={[
-    { columnId: "status", label: "Status", type: "select", options: [...] },
-    { columnId: "amount", label: "Amount", type: "number", operators: ["eq", "gt", "lt"] },
-  ]}
-/>
-```
-
-## Guidelines
-
-- Use `enableVirtualization` for 500+ rows (set `height` when using).
-- Use `enableAdvancedFiltering` to replace simple column filters with FilterBuilder.
-- Provide `filters` array to define filterable columns with their types/operators.

package/.agent/skills/doom/components/tabs.md

@@ -1,65 +0,0 @@
-# Tabs Component
-
-## Import
-
-```tsx
-import {
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsBody,
-  TabsContent,
-} from "doom-design-system";
-```
-
-## Props
-
-### Tabs
-
-| Prop            | Type                      | Default | Description           |
-| --------------- | ------------------------- | ------- | --------------------- |
-| `defaultValue`  | `string`                  | —       | Initial active tab    |
-| `value`         | `string`                  | —       | Controlled active tab |
-| `onValueChange` | `(value: string) => void` | —       | Change callback       |
-
-### TabsList
-
-| Prop    | Type                | Default  | Description   |
-| ------- | ------------------- | -------- | ------------- |
-| `align` | `"left" \| "right"` | `"left"` | Tab alignment |
-
-### TabsTrigger
-
-| Prop    | Type     | Description                        |
-| ------- | -------- | ---------------------------------- |
-| `value` | `string` | Tab value (must match TabsContent) |
-
-### TabsContent
-
-| Prop    | Type     | Description                        |
-| ------- | -------- | ---------------------------------- |
-| `value` | `string` | Tab value (must match TabsTrigger) |
-
-## Usage
-
-```tsx
-<Tabs defaultValue="overview">
-  <TabsList>
-    <TabsTrigger value="overview">Overview</TabsTrigger>
-    <TabsTrigger value="settings">Settings</TabsTrigger>
-    <TabsTrigger value="team">Team</TabsTrigger>
-  </TabsList>
-
-  <TabsBody>
-    <TabsContent value="overview">Overview content...</TabsContent>
-    <TabsContent value="settings">Settings content...</TabsContent>
-    <TabsContent value="team">Team content...</TabsContent>
-  </TabsBody>
-</Tabs>
-```
-
-## Guidelines
-
-- Match `value` props between `TabsTrigger` and `TabsContent`.
-- Only active `TabsContent` renders (not hidden with CSS).
-- Full keyboard navigation and ARIA support.

package/.agent/skills/doom/components/text.md

@@ -1,42 +0,0 @@
-# Text Component
-
-## Import
-
-```tsx
-import { Text } from "doom-design-system";
-```
-
-## Props
-
-| Prop      | Type                                                                             | Default  | Description            |
-| --------- | -------------------------------------------------------------------------------- | -------- | ---------------------- |
-| `variant` | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6" \| "body" \| "small" \| "caption"` | `"body"` | Typography style       |
-| `weight`  | `"normal" \| "medium" \| "semibold" \| "bold" \| "black"`                        | —        | Font weight override   |
-| `color`   | `"primary" \| "secondary" \| "muted" \| "error" \| "success" \| "warning"`       | —        | Text color             |
-| `align`   | `"left" \| "center" \| "right"`                                                  | —        | Text alignment         |
-| `as`      | `ElementType`                                                                    | auto     | HTML element to render |
-
-## Usage
-
-```tsx
-<Text variant="h1">Page Title</Text>
-
-<Text variant="body">
-  Regular paragraph text.
-</Text>
-
-<Text variant="small" color="muted">
-  Helper text or captions.
-</Text>
-
-<Text as="label" htmlFor="input" weight="semibold">
-  Form Label
-</Text>
-```
-
-## Guidelines
-
-- Use semantic variants (`h1`-`h6` auto-render as heading elements).
-- Use `as` prop to override the HTML element when needed.
-- Heading variants use the design system's heading font.
-- Body/small/caption use the body font.