doom-design-system 0.5.0 → 0.6.0

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

@@ -1,35 +0,0 @@
-# Alert Component
-
-## Import
-
-```tsx
-import { Alert } from "doom-design-system";
-```
-
-## Props
-
-| Prop          | Type                                          | Default  | Description                       |
-| ------------- | --------------------------------------------- | -------- | --------------------------------- |
-| `variant`     | `"info" \| "success" \| "warning" \| "error"` | `"info"` | Visual style                      |
-| `title`       | `string`                                      | required | Alert heading                     |
-| `description` | `ReactNode`                                   | —        | Additional content                |
-| `icon`        | `ReactNode`                                   | —        | Custom icon (defaults by variant) |
-
-## Usage
-
-```tsx
-<Alert
-  variant="error"
-  title="Invalid credentials"
-  description="Please check your email and password."
-/>
-
-<Alert variant="success" title="Changes saved!" />
-```
-
-## Guidelines
-
-- Use `error` for form validation, API errors.
-- Use `success` for confirmations.
-- Use `warning` for cautions/deprecations.
-- Use `info` for general notices.

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

@@ -1,36 +0,0 @@
-# Avatar Component
-
-## Import
-
-```tsx
-import { Avatar } from "doom-design-system";
-```
-
-## Props
-
-| Prop       | Type                           | Default    | Description                 |
-| ---------- | ------------------------------ | ---------- | --------------------------- |
-| `src`      | `string`                       | —          | Image URL                   |
-| `alt`      | `string`                       | `"Avatar"` | Alt text                    |
-| `fallback` | `ReactNode`                    | required   | Fallback (initials or icon) |
-| `size`     | `"sm" \| "md" \| "lg" \| "xl"` | `"md"`     | Avatar size                 |
-| `shape`    | `"circle" \| "square"`         | `"square"` | Shape                       |
-
-## Usage
-
-```tsx
-<Avatar
-  src="/avatars/user.jpg"
-  fallback="JD"
-  size="lg"
-  shape="circle"
-/>
-
-<Avatar fallback={<User size={20} />} />
-```
-
-## Guidelines
-
-- Always provide a `fallback` for when image fails to load.
-- String fallbacks are auto-truncated to 2 characters.
-- Use `shape="circle"` for user profiles.

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

@@ -1,29 +0,0 @@
-# Badge Component
-
-## Import
-
-```tsx
-import { Badge } from "doom-design-system";
-```
-
-## Props
-
-| Prop       | Type                                                                         | Default     | Description   |
-| ---------- | ---------------------------------------------------------------------------- | ----------- | ------------- |
-| `variant`  | `"primary" \| "success" \| "warning" \| "error" \| "secondary" \| "outline"` | `"primary"` | Visual style  |
-| `size`     | `"sm" \| "md" \| "lg"`                                                       | `"md"`      | Badge size    |
-| `children` | `ReactNode`                                                                  | required    | Badge content |
-
-## Usage
-
-```tsx
-<Badge variant="success">Active</Badge>
-<Badge variant="error" size="sm">Overdue</Badge>
-<Badge variant="outline">Draft</Badge>
-```
-
-## Guidelines
-
-- Use for status indicators, counts, or labels.
-- Keep content short (1-2 words max).
-- Use semantic colors: `success` for positive, `error` for negative, etc.

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

@@ -1,33 +0,0 @@
-# Breadcrumbs Component
-
-## Import
-
-```tsx
-import { Breadcrumbs, BreadcrumbItem } from "doom-design-system";
-```
-
-## Props
-
-### BreadcrumbItem
-
-| Prop        | Type        | Description          |
-| ----------- | ----------- | -------------------- |
-| `href`      | `string`    | Link destination     |
-| `isCurrent` | `boolean`   | Mark as current page |
-| `children`  | `ReactNode` | Link text            |
-
-## Usage
-
-```tsx
-<Breadcrumbs>
-  <BreadcrumbItem href="/">Home</BreadcrumbItem>
-  <BreadcrumbItem href="/products">Products</BreadcrumbItem>
-  <BreadcrumbItem isCurrent>Widget Pro</BreadcrumbItem>
-</Breadcrumbs>
-```
-
-## Guidelines
-
-- Last item should have `isCurrent` (no link, shows as text).
-- Separators are automatically rendered between items.
-- Use for navigation hierarchy in multi-level pages.

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

@@ -1,43 +0,0 @@
-# Button Component
-
-## Import
-
-```tsx
-import { Button } from "doom-design-system";
-```
-
-## Props
-
-| Prop       | Type                                                                        | Default     | Description                           |
-| ---------- | --------------------------------------------------------------------------- | ----------- | ------------------------------------- |
-| `variant`  | `"primary" \| "secondary" \| "ghost" \| "outline" \| "success" \| "danger"` | `"primary"` | Visual style                          |
-| `size`     | `"sm" \| "md" \| "lg"`                                                      | `"md"`      | Button size                           |
-| `loading`  | `boolean`                                                                   | `false`     | Show loading spinner, disables button |
-| `disabled` | `boolean`                                                                   | `false`     | Disable the button                    |
-
-Plus all standard `<button>` HTML attributes.
-
-## Usage
-
-```tsx
-<Button variant="primary" onClick={handleClick}>
-  Submit
-</Button>
-
-<Button loading variant="danger">
-  Deleting...
-</Button>
-
-<Button variant="ghost" size="sm">
-  Cancel
-</Button>
-```
-
-## Guidelines
-
-- Use `primary` for main actions (submit, save, confirm).
-- Use `secondary` for less prominent actions.
-- Use `ghost` for tertiary/cancel actions.
-- Use `danger` for destructive actions (delete, remove).
-- Use `success` sparingly for positive confirmations.
-- Always use `loading` prop instead of manually disabling + adding spinner.

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

@@ -1,41 +0,0 @@
-# Card Component
-
-## Import
-
-```tsx
-import { Card } from "doom-design-system";
-```
-
-## Props
-
-| Prop        | Type          | Default  | Description            |
-| ----------- | ------------- | -------- | ---------------------- |
-| `as`        | `ElementType` | `"div"`  | HTML element to render |
-| `children`  | `ReactNode`   | required | Card content           |
-| `className` | `string`      | —        | Additional classes     |
-
-Plus all standard HTML attributes for the rendered element.
-
-## Usage
-
-```tsx
-<Card>
-  <Text variant="h4">Card Title</Text>
-  <Text>Card content goes here.</Text>
-</Card>
-```
-
-## Styling
-
-Card provides:
-
-- Background: `var(--card-bg)`
-- Border: `var(--border-width) solid var(--card-border)`
-- Shadow: `var(--shadow-hard)`
-- Padding: Inherited from component (add your own)
-
-## Guidelines
-
-- Card is a generic container—use it to group related content.
-- Cards do not have built-in padding; add your own with Layout components or SCSS.
-- Use `as="article"` or `as="section"` for semantic HTML when appropriate.

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

@@ -1,106 +0,0 @@
-# Chart Component
-
-## Import
-
-```tsx
-import { Chart } from "doom-design-system";
-```
-
-## Props
-
-| Prop            | Type                         | Default     | Description                         |
-| --------------- | ---------------------------- | ----------- | ----------------------------------- |
-| `data`          | `T[]`                        | required    | Data array                          |
-| `x`             | `(d: T) => string \| number` | required    | Accessor function for X-axis values |
-| `y`             | `(d: T) => number`           | required    | Accessor function for Y-axis values |
-| `type`          | `"line" \| "area" \| "bar"`  | —           | Chart type (shorthand API)          |
-| `title`         | `string \| ReactNode`        | —           | Chart title                         |
-| `subtitle`      | `string`                     | —           | Chart subtitle                      |
-| `withLegend`    | `boolean`                    | —           | Show legend                         |
-| `withFrame`     | `boolean`                    | `true`      | Render card frame around chart      |
-| `variant`       | `"default" \| "solid"`       | `"default"` | Visual variant                      |
-| `flat`          | `boolean`                    | `false`     | Remove shadow                       |
-| `d3Config`      | `ChartConfig`                | —           | D3 configuration options            |
-| `render`        | `(ctx: DrawContext) => void` | —           | Custom D3 render function           |
-| `renderTooltip` | `(data: T) => ReactNode`     | —           | Custom tooltip renderer             |
-| `onValueChange` | `(data: T \| null) => void`  | —           | Callback when hovered value changes |
-| `style`         | `CSSProperties`              | —           | Inline styles                       |
-| `className`     | `string`                     | —           | CSS class name                      |
-
-## D3 Config
-
-```tsx
-const d3Config = {
-  margin: { top: 20, right: 20, bottom: 40, left: 50 },
-  grid: true,
-  withGradient: true,
-  showDots: true,
-  hideYAxisDomain: true,
-  xAxisLabel: "Month",
-  yAxisLabel: "Revenue (USD)",
-  curve: d3Shape.curveMonotoneX, // requires import from d3-shape
-  animate: true,
-};
-```
-
-## Usage
-
-### Shorthand API
-
-```tsx
-const data = [
-  { month: "Jan", revenue: 4500 },
-  { month: "Feb", revenue: 5200 },
-  { month: "Mar", revenue: 4900 },
-];
-
-<Chart
-  type="area"
-  data={data}
-  x={(d) => d.month}
-  y={(d) => d.revenue}
-  title="Monthly Revenue"
-  withLegend
-  d3Config={{ grid: true, withGradient: true }}
-/>;
-```
-
-### Composition API
-
-```tsx
-<Chart.Root
-  data={data}
-  x={(d) => d.label}
-  y={(d) => d.value}
-  d3Config={{ grid: true, showDots: true }}
->
-  <Chart.Header title="Sales" subtitle="Last 12 months">
-    <Chart.Legend />
-  </Chart.Header>
-  <Chart.Plot type="area" color="var(--primary)" />
-  <Chart.Footer>Custom footer content</Chart.Footer>
-</Chart.Root>
-```
-
-### Custom D3 Render
-
-```tsx
-<Chart
-  data={pieData}
-  x={(d) => d.label}
-  y={(d) => d.value}
-  d3Config={{ showAxes: false, grid: false }}
-  render={(ctx) => {
-    // Full D3 access via ctx.g (SVG group)
-    // ctx.data, ctx.xScale, ctx.yScale available
-  }}
-/>
-```
-
-## Guidelines
-
-- Use shorthand API for simple line/area/bar charts.
-- Use composition API for custom layouts with headers/footers.
-- Use `render` prop for fully custom D3 visualizations (pie, treemap, etc.).
-- Built on D3.js with full access to scales and selections.
-- Supports touch interactions and responsive sizing.

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

@@ -1,38 +0,0 @@
-# Checkbox Component
-
-## Import
-
-```tsx
-import { Checkbox } from "doom-design-system";
-```
-
-## Props
-
-| Prop             | Type          | Default | Description                |
-| ---------------- | ------------- | ------- | -------------------------- |
-| `label`          | `string`      | —       | Label text                 |
-| `error`          | `boolean`     | —       | Error state                |
-| `checked`        | `boolean`     | —       | Controlled checked state   |
-| `defaultChecked` | `boolean`     | —       | Uncontrolled initial state |
-| `disabled`       | `boolean`     | —       | Disabled state             |
-| `onChange`       | `(e) => void` | —       | Change handler             |
-
-Plus all standard `<input type="checkbox">` attributes.
-
-## Usage
-
-```tsx
-<Checkbox label="I agree to the terms" />
-
-<Checkbox
-  label="Subscribe to newsletter"
-  checked={subscribed}
-  onChange={(e) => setSubscribed(e.target.checked)}
-/>
-```
-
-## Guidelines
-
-- Use `label` prop for accessibility (auto-binds label to input).
-- Use for binary choices or multi-select lists.
-- Use `RadioGroup` for single-select from multiple options.

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

@@ -1,35 +0,0 @@
-# Chip Component
-
-## Import
-
-```tsx
-import { Chip } from "doom-design-system";
-```
-
-## Props
-
-| Prop        | Type                                                          | Default     | Description                       |
-| ----------- | ------------------------------------------------------------- | ----------- | --------------------------------- |
-| `variant`   | `"default" \| "primary" \| "success" \| "warning" \| "error"` | `"default"` | Visual style                      |
-| `size`      | `"xs" \| "sm" \| "md" \| "lg" \| "xl"`                        | `"md"`      | Chip size                         |
-| `onDismiss` | `() => void`                                                  | —           | Shows X button, called on dismiss |
-| `onClick`   | `() => void`                                                  | —           | Makes chip clickable              |
-| `disabled`  | `boolean`                                                     | `false`     | Disabled state                    |
-
-## Usage
-
-```tsx
-<Chip>Default</Chip>
-
-<Chip variant="primary" onDismiss={() => removeFilter()}>
-  Filter: Active
-</Chip>
-
-<Chip onClick={() => toggleTag()}>Clickable Tag</Chip>
-```
-
-## Guidelines
-
-- Use for tags, filters, or selectable items.
-- `onDismiss` adds a dismiss button (X) on the right.
-- `onClick` makes the entire chip interactive.

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

@@ -1,50 +0,0 @@
-# Combobox Component
-
-## Import
-
-```tsx
-import { Combobox } from "doom-design-system";
-```
-
-## Props
-
-| Prop          | Type                                 | Default       | Description                       |
-| ------------- | ------------------------------------ | ------------- | --------------------------------- |
-| `options`     | `{ value: string, label: string }[]` | required      | Available options                 |
-| `value`       | `string \| string[]`                 | —             | Selected value(s)                 |
-| `onChange`    | `(value) => void`                    | required      | Change handler                    |
-| `placeholder` | `string`                             | `"Select..."` | Placeholder text                  |
-| `multiple`    | `boolean`                            | `false`       | Allow multiple selection          |
-| `searchable`  | `boolean`                            | `true`        | Enable search/filter              |
-| `size`        | `"sm" \| "md"`                       | `"md"`        | Trigger size                      |
-| `disabled`    | `boolean`                            | `false`       | Disabled state                    |
-| `inline`      | `boolean`                            | `false`       | Render dropdown only (no trigger) |
-
-## Usage
-
-```tsx
-<Combobox
-  options={[
-    { value: "red", label: "Red" },
-    { value: "blue", label: "Blue" },
-  ]}
-  value={color}
-  onChange={setColor}
-  placeholder="Select color"
-/>
-
-// Multi-select
-<Combobox
-  multiple
-  options={tags}
-  value={selectedTags}
-  onChange={setSelectedTags}
-/>
-```
-
-## Guidelines
-
-- Use for large option lists (virtualized for performance).
-- Use `multiple` for tag/filter selection.
-- Press Enter in search to select all filtered results (multi-select).
-- "All" option automatically manages select/deselect all.

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

@@ -1,41 +0,0 @@
-# CopyButton Component
-
-## Import
-
-```tsx
-import { CopyButton } from "doom-design-system";
-```
-
-## Props
-
-| Prop         | Type           | Default       | Description              |
-| ------------ | -------------- | ------------- | ------------------------ |
-| `value`      | `string`       | **required**  | Text to copy             |
-| `variant`    | Button variant | `"secondary"` | Visual style             |
-| `size`       | Button size    | `"md"`        | Button size              |
-| `copiedText` | `string`       | `"Copied!"`   | Text shown after copy    |
-| `resetDelay` | `number`       | `2000`        | Ms before reset to orig. |
-
-Plus all standard `<button>` HTML attributes.
-
-## Usage
-
-```tsx
-<CopyButton value={textToCopy}>Copy</CopyButton>
-
-<CopyButton value={code} variant="ghost" size="sm">
-  Copy Code
-</CopyButton>
-
-<CopyButton copiedText="Done!" value={referenceDoc}>
-  Copy Reference
-</CopyButton>
-```
-
-## Behavior
-
-- **Tactile Pop Animation**: Press effect on click, springy scale-in for success state
-- Text changes to `copiedText` (default: "Copied!")
-- Button width preserved (doesn't jump)
-- Auto-resets after `resetDelay` ms (default 2s)
-- Variant stays the same (no jarring color change)

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

@@ -1,69 +0,0 @@
-# Drawer Component
-
-## Import
-
-```tsx
-import { Drawer } from "doom-design-system";
-```
-
-## Props
-
-| Prop       | Type                   | Default     | Description         |
-| ---------- | ---------------------- | ----------- | ------------------- |
-| `isOpen`   | `boolean`              | required    | Controls visibility |
-| `onClose`  | `() => void`           | required    | Close callback      |
-| `title`    | `ReactNode`            | —           | Header title        |
-| `side`     | `"left" \| "right"`    | `"right"`   | Slide direction     |
-| `children` | `ReactNode`            | required    | Drawer content      |
-| `footer`   | `ReactNode`            | —           | Footer content      |
-| `variant`  | `"default" \| "solid"` | `"default"` | Visual style        |
-
-## Usage Patterns
-
-### Shorthand API (simple drawers)
-
-```tsx
-<Drawer
-  isOpen={isOpen}
-  onClose={() => setIsOpen(false)}
-  title="Settings"
-  footer={<Button onClick={save}>Save</Button>}
->
-  <Stack gap={4}>{/* Settings form */}</Stack>
-</Drawer>
-```
-
-### Composition API (custom layouts)
-
-```tsx
-<Drawer isOpen={isOpen} onClose={onClose} side="right">
-  <Drawer.Header>
-    <Text variant="h3">Custom Title</Text>
-  </Drawer.Header>
-  <Drawer.Body>
-    <Stack gap={4}>{/* Custom content */}</Stack>
-  </Drawer.Body>
-  <Drawer.Footer>
-    <Button variant="ghost" onClick={onClose}>
-      Cancel
-    </Button>
-    <Button onClick={handleSave}>Save</Button>
-  </Drawer.Footer>
-</Drawer>
-```
-
-## Sub-components
-
-| Component       | Description              |
-| --------------- | ------------------------ |
-| `Drawer.Header` | Header with close button |
-| `Drawer.Body`   | Scrollable content area  |
-| `Drawer.Footer` | Action buttons area      |
-
-## Guidelines
-
-- Use for side panels, settings, or detail views.
-- `side="left"` for navigation drawers, `side="right"` for actions/details.
-- Closes on Escape key and overlay click.
-- Use `variant="solid"` for high-emphasis content.
-- Use composition API when you need custom header content (icons, badges, etc.).

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

@@ -1,33 +0,0 @@
-# Dropdown Component
-
-## Import
-
-```tsx
-import { Dropdown } from "doom-design-system";
-```
-
-## Props
-
-| Prop           | Type                                       | Default     | Description  |
-| -------------- | ------------------------------------------ | ----------- | ------------ |
-| `triggerLabel` | `string`                                   | required    | Button text  |
-| `items`        | `{ label: string, onClick: () => void }[]` | required    | Menu items   |
-| `variant`      | `"primary" \| "secondary"`                 | `"primary"` | Button style |
-
-## Usage
-
-```tsx
-<Dropdown
-  triggerLabel="Actions"
-  items={[
-    { label: "Edit", onClick: handleEdit },
-    { label: "Delete", onClick: handleDelete },
-  ]}
-/>
-```
-
-## Guidelines
-
-- Use for action menus or overflow menus.
-- For split primary/secondary actions, use `SplitButton` instead.
-- Menu closes automatically after item click.

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

@@ -1,49 +0,0 @@
-# FileUpload Component
-
-## Import
-
-```tsx
-import { FileUpload } from "doom-design-system";
-```
-
-## Props
-
-| Prop           | Type                      | Default | Description                             |
-| -------------- | ------------------------- | ------- | --------------------------------------- |
-| `label`        | `string`                  | —       | Upload area label                       |
-| `helperText`   | `string`                  | —       | Helper text                             |
-| `accept`       | `string`                  | —       | Accepted file types (e.g., `"image/*"`) |
-| `maxSize`      | `number`                  | —       | Max file size in bytes                  |
-| `multiple`     | `boolean`                 | `false` | Allow multiple files                    |
-| `defaultFiles` | `File[]`                  | `[]`    | Initial files                           |
-| `disabled`     | `boolean`                 | `false` | Disabled state                          |
-| `error`        | `boolean`                 | `false` | Error state                             |
-| `errorMessage` | `string`                  | —       | Error message                           |
-| `required`     | `boolean`                 | `false` | Required field                          |
-| `showPreview`  | `boolean`                 | `false` | Show image thumbnails                   |
-| `onChange`     | `(files: File[]) => void` | —       | Change callback                         |
-
-## Usage
-
-```tsx
-<FileUpload
-  label="Upload Documents"
-  accept=".pdf,.doc,.docx"
-  maxSize={5 * 1024 * 1024} // 5MB
-  multiple
-  onChange={setFiles}
-/>
-
-<FileUpload
-  label="Profile Photo"
-  accept="image/*"
-  showPreview
-/>
-```
-
-## Guidelines
-
-- Supports drag-and-drop and click-to-browse.
-- `showPreview` displays image thumbnails for image files.
-- Files can be removed individually via the X button.
-- File size validation with clear error messages.