doom-design-system 0.5.0 → 0.6.0

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

@@ -1,55 +0,0 @@
-# Form Component
-
-## Import
-
-```tsx
-import { Form, Field, FormMessage } from "doom-design-system";
-```
-
-## Components
-
-### Form
-
-Basic form wrapper with consistent styling.
-
-### Field
-
-Form field wrapper with label, error, and description support.
-
-| Prop          | Type                | Description             |
-| ------------- | ------------------- | ----------------------- |
-| `label`       | `string`            | Field label             |
-| `error`       | `string \| boolean` | Error message           |
-| `description` | `string`            | Helper description      |
-| `htmlFor`     | `string`            | Label target ID         |
-| `required`    | `boolean`           | Show required indicator |
-
-### FormMessage
-
-Standalone message component.
-
-| Prop      | Type                       | Default         | Description   |
-| --------- | -------------------------- | --------------- | ------------- |
-| `variant` | `"error" \| "description"` | `"description"` | Message style |
-
-## Usage
-
-```tsx
-<Form onSubmit={handleSubmit}>
-  <Field label="Email" required error={errors.email}>
-    <Input id="email" type="email" />
-  </Field>
-
-  <Field label="Password" description="Min 8 characters">
-    <Input id="password" type="password" />
-  </Field>
-
-  <Button type="submit">Submit</Button>
-</Form>
-```
-
-## Guidelines
-
-- Use `Field` to wrap form inputs for consistent label/error handling.
-- Prefer using `Input`'s built-in `label` and `error` props for simple cases.
-- Use `Field` when you need external error handling or custom inputs.

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

@@ -1,47 +0,0 @@
-# Icon Component
-
-## Import
-
-```tsx
-import { Home, User, Settings, ... } from "doom-design-system";
-// or directly from lucide-react
-import { Home, User, Settings } from "lucide-react";
-```
-
-## Usage
-
-```tsx
-<Home />
-<User size={24} strokeWidth={2.5} />
-<Settings className="text-primary" />
-```
-
-## Neubrutalism Style
-
-For bold neubrutalist icons, use:
-
-- `strokeWidth={2.5}` or `strokeWidth={3}`
-
-## Available Icons
-
-Re-exported from Lucide React for convenience:
-
-**Finance**: `DollarSign`, `TrendingUp`, `TrendingDown`, `PiggyBank`, `Wallet`, `CreditCard`, `Banknote`
-
-**Charts**: `BarChart3`, `LineChart`, `PieChart`
-
-**Status**: `AlertTriangle`, `AlertCircle`, `Info`, `CheckCircle2`, `XCircle`
-
-**Actions**: `Plus`, `Minus`, `X`, `Check`, `Edit`, `Trash2`, `Save`, `Search`, `Filter`, `Upload`, `Download`, `Eye`, `EyeOff`
-
-**Navigation**: `Home`, `ChevronDown`, `ChevronUp`, `ChevronLeft`, `ChevronRight`, `ArrowUpRight`, `ArrowDownRight`, `MoreHorizontal`, `MoreVertical`
-
-**Time**: `Calendar`, `Clock`
-
-**User**: `User`, `Settings`, `LogOut`
-
-## Guidelines
-
-- Import from `doom-design-system` for commonly used icons.
-- Import directly from `lucide-react` for less common icons.
-- All Lucide props are supported (size, color, className, etc.).

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

@@ -1,48 +0,0 @@
-# Image Component
-
-## Import
-
-```tsx
-import { Image } from "doom-design-system";
-```
-
-## Props
-
-| Prop          | Type                                                       | Default | Description                 |
-| ------------- | ---------------------------------------------------------- | ------- | --------------------------- |
-| `src`         | `string`                                                   | —       | Image source URL            |
-| `alt`         | `string`                                                   | —       | Alt text                    |
-| `fit`         | `"cover" \| "contain" \| "fill" \| "none" \| "scale-down"` | —       | Object-fit                  |
-| `fallbackSrc` | `string`                                                   | —       | Fallback image URL on error |
-| `aspectRatio` | `string \| number`                                         | —       | CSS aspect-ratio            |
-| `rounded`     | `boolean`                                                  | `true`  | Apply border-radius         |
-| `width`       | `string \| number`                                         | —       | Image width                 |
-| `height`      | `string \| number`                                         | —       | Image height                |
-
-Plus all standard `<img>` attributes.
-
-## Usage
-
-```tsx
-<Image
-  src="/product.jpg"
-  alt="Product photo"
-  aspectRatio="16/9"
-  fit="cover"
-/>
-
-<Image
-  src={user.avatar}
-  fallbackSrc="/default-avatar.png"
-  width={200}
-  height={200}
-  rounded
-/>
-```
-
-## Guidelines
-
-- Automatically shows skeleton loader while image loads.
-- Smooth crossfade transition when image loads.
-- Use `fallbackSrc` for graceful degradation.
-- `aspectRatio` auto-computed from width/height if not specified.

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

@@ -1,54 +0,0 @@
-# Input Component
-
-## Import
-
-```tsx
-import { Input } from "doom-design-system";
-```
-
-## Props
-
-| Prop             | Type                             | Default | Description                         |
-| ---------------- | -------------------------------- | ------- | ----------------------------------- |
-| `label`          | `string`                         | —       | Label text above input              |
-| `error`          | `string`                         | —       | Error message (shows in red)        |
-| `helperText`     | `string`                         | —       | Helper text below input             |
-| `startAdornment` | `ReactNode`                      | —       | Icon/element at start of input      |
-| `endAdornment`   | `ReactNode`                      | —       | Icon/element at end of input        |
-| `showCount`      | `boolean`                        | —       | Show character count                |
-| `maxLength`      | `number`                         | —       | Max characters (auto-enables count) |
-| `format`         | `(value) => string`              | —       | Display format when unfocused       |
-| `validate`       | `(value) => string \| undefined` | —       | Custom validation on blur           |
-| `required`       | `boolean`                        | —       | Mark as required                    |
-
-Plus all standard `<input>` HTML attributes.
-
-## Usage
-
-```tsx
-<Input
-  label="Email"
-  placeholder="you@example.com"
-  type="email"
-  required
-/>
-
-<Input
-  label="Search"
-  startAdornment={<Search size={16} />}
-  endAdornment={<Button size="sm" variant="ghost">Clear</Button>}
-/>
-
-<Input
-  label="Bio"
-  maxLength={200}
-  helperText="Brief description"
-/>
-```
-
-## Guidelines
-
-- Use `label` prop instead of external `<Label>` component for proper a11y binding.
-- Use `error` prop for validation errors (shows as red text below).
-- Use `startAdornment` for icons, `endAdornment` for action buttons.
-- Character count auto-shows when `maxLength` is set.

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

@@ -1,32 +0,0 @@
-# Label Component
-
-## Import
-
-```tsx
-import { Label } from "doom-design-system";
-```
-
-## Props
-
-| Prop       | Type        | Default  | Description                  |
-| ---------- | ----------- | -------- | ---------------------------- |
-| `children` | `ReactNode` | required | Label content                |
-| `required` | `boolean`   | —        | Show required indicator (\*) |
-| `htmlFor`  | `string`    | —        | Associated input ID          |
-
-Plus all standard `<label>` attributes.
-
-## Usage
-
-```tsx
-<Label htmlFor="email" required>
-  Email Address
-</Label>
-<Input id="email" type="email" />
-```
-
-## Guidelines
-
-- Prefer using `Input`'s built-in `label` prop for standard cases.
-- Use `Label` directly when you need custom label layouts.
-- Works with all form components (Input, Select, Textarea, etc.).

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

@@ -1,92 +0,0 @@
-# Layout Components
-
-## Import
-
-```tsx
-import { Flex, Stack, Grid, Container, Switcher } from "doom-design-system";
-```
-
-## Components
-
-### Flex
-
-One-dimensional flexbox container.
-
-| Prop        | Type                                                                          | Default        | Description          |
-| ----------- | ----------------------------------------------------------------------------- | -------------- | -------------------- |
-| `direction` | `"row" \| "column" \| "row-reverse" \| "column-reverse"`                      | `"row"`        | Flex direction       |
-| `justify`   | `"flex-start" \| "flex-end" \| "center" \| "space-between" \| "space-around"` | `"flex-start"` | Main axis alignment  |
-| `align`     | `"flex-start" \| "flex-end" \| "center" \| "stretch" \| "baseline"`           | `"stretch"`    | Cross axis alignment |
-| `gap`       | `0-16`                                                                        | `0`            | Spacing token        |
-| `wrap`      | `boolean \| "wrap" \| "nowrap"`                                               | `false`        | Wrap behavior        |
-
-### Stack
-
-Vertical (or horizontal) stacking. Shorthand for Flex with `direction="column"`.
-
-| Prop        | Default    | Description             |
-| ----------- | ---------- | ----------------------- |
-| `gap`       | `4`        | Default vertical gap    |
-| `direction` | `"column"` | Can override to `"row"` |
-
-### Grid
-
-Two-dimensional grid container.
-
-| Prop      | Type               | Default | Description                             |
-| --------- | ------------------ | ------- | --------------------------------------- |
-| `columns` | `string \| number` | `"1fr"` | Grid columns (e.g., `3` or `"1fr 2fr"`) |
-| `gap`     | `0-16`             | `4`     | Spacing token                           |
-
-### Container
-
-Centered max-width container.
-
-| Prop       | Type                                      | Default | Description          |
-| ---------- | ----------------------------------------- | ------- | -------------------- |
-| `maxWidth` | `"sm" \| "md" \| "lg" \| "xl" \| "fluid"` | `"xl"`  | Max width constraint |
-
-### Switcher
-
-Responsive flexbox that switches from row to column at breakpoint.
-
-| Prop        | Type                            | Default | Description          |
-| ----------- | ------------------------------- | ------- | -------------------- |
-| `threshold` | `"xxs" \| "xs" \| "sm" \| "md"` | `"xs"`  | Breakpoint to switch |
-
-## Usage
-
-```tsx
-<Stack gap={4}>
-  <Text variant="h2">Title</Text>
-  <Text>Description</Text>
-</Stack>
-
-<Flex justify="space-between" align="center">
-  <Logo />
-  <Nav />
-</Flex>
-
-<Grid columns={3} gap={4}>
-  <Card>1</Card>
-  <Card>2</Card>
-  <Card>3</Card>
-</Grid>
-
-<Container maxWidth="lg">
-  <PageContent />
-</Container>
-
-<Switcher threshold="sm">
-  <Sidebar />
-  <Main />
-</Switcher>
-```
-
-## Guidelines
-
-- Use `Stack` as your default vertical layout component.
-- Use `Flex` for horizontal layouts or when you need fine control.
-- Use `Grid` for two-dimensional layouts (cards, galleries).
-- Use `Container` to constrain page content width.
-- Use `Switcher` for responsive sidebar layouts.

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

@@ -1,39 +0,0 @@
-# Link Component
-
-## Import
-
-```tsx
-import { Link } from "doom-design-system";
-```
-
-## Props
-
-| Prop         | Type                                | Default     | Description                         |
-| ------------ | ----------------------------------- | ----------- | ----------------------------------- |
-| `variant`    | `"default" \| "button" \| "subtle"` | `"default"` | Visual style                        |
-| `isExternal` | `boolean`                           | —           | Open in new tab, show external icon |
-| `disabled`   | `boolean`                           | —           | Disabled state                      |
-| `prefetch`   | `boolean`                           | —           | Prefetch on hover                   |
-
-Plus all standard `<a>` attributes.
-
-## Usage
-
-```tsx
-<Link href="/about">About Us</Link>
-
-<Link href="https://github.com" isExternal>
-  GitHub
-</Link>
-
-<Link href="/docs" variant="button">
-  View Documentation
-</Link>
-```
-
-## Guidelines
-
-- Use `variant="default"` for inline text links.
-- Use `variant="button"` for links that look like buttons.
-- Use `variant="subtle"` for low-emphasis links.
-- `isExternal` adds `target="_blank"` and rel attributes automatically.

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

@@ -1,71 +0,0 @@
-# Modal Component
-
-## Import
-
-```tsx
-import { Modal } from "doom-design-system";
-```
-
-## Props
-
-| Prop      | Type                   | Default     | Description                                           |
-| --------- | ---------------------- | ----------- | ----------------------------------------------------- |
-| `isOpen`  | `boolean`              | required    | Controls visibility                                   |
-| `onClose` | `() => void`           | required    | Called on close (Escape, overlay click, close button) |
-| `title`   | `ReactNode`            | —           | Title content (uses shorthand API if provided)        |
-| `footer`  | `ReactNode`            | —           | Footer content (uses shorthand API if provided)       |
-| `variant` | `"default" \| "solid"` | `"default"` | Visual style                                          |
-
-## Usage Patterns
-
-### Shorthand API (simple modals)
-
-```tsx
-<Modal
-  isOpen={isOpen}
-  title={<Text variant="h4">Confirm Action</Text>}
-  footer={
-    <>
-      <Button variant="ghost" onClick={onClose}>
-        Cancel
-      </Button>
-      <Button onClick={handleConfirm}>Confirm</Button>
-    </>
-  }
-  onClose={onClose}
->
-  <Text>Are you sure you want to proceed?</Text>
-</Modal>
-```
-
-### Composition API (custom layouts)
-
-```tsx
-<Modal isOpen={isOpen} onClose={onClose}>
-  <Modal.Header>
-    <Text variant="h3">Custom Title</Text>
-  </Modal.Header>
-  <Modal.Body>
-    <Stack gap={4}>
-      <Text>Custom body content...</Text>
-    </Stack>
-  </Modal.Body>
-  <Modal.Footer>
-    <Button onClick={onClose}>Close</Button>
-  </Modal.Footer>
-</Modal>
-```
-
-## Sub-components
-
-| Component      | Description              |
-| -------------- | ------------------------ |
-| `Modal.Header` | Header with close button |
-| `Modal.Body`   | Scrollable content area  |
-| `Modal.Footer` | Action buttons area      |
-
-## Guidelines
-
-- Use `variant="solid"` for high-impact announcements or critical alerts.
-- Modal closes on Escape key and overlay click automatically.
-- Always provide meaningful `title` or `aria-label` for accessibility.

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

@@ -1,41 +0,0 @@
-# Page Component
-
-## Import
-
-```tsx
-import { Page } from "doom-design-system";
-```
-
-## Props
-
-| Prop       | Type                       | Default     | Description    |
-| ---------- | -------------------------- | ----------- | -------------- |
-| `variant`  | `"default" \| "fullWidth"` | `"default"` | Layout variant |
-| `children` | `ReactNode`                | required    | Page content   |
-
-## Usage
-
-```tsx
-// Standard constrained page
-<Page>
-  <Text variant="h1">Dashboard</Text>
-  <Stack gap={4}>
-    {/* Page content */}
-  </Stack>
-</Page>
-
-// Full-width page
-<Page variant="fullWidth">
-  <FullWidthHero />
-  <Container>
-    <MainContent />
-  </Container>
-</Page>
-```
-
-## Guidelines
-
-- `variant="default"`: 65vw max-width with standard padding.
-- `variant="fullWidth"`: 100% width, no default padding.
-- Renders as `<main>` element for semantic HTML.
-- Use with `Container` for more control over content width.

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

@@ -1,32 +0,0 @@
-# Pagination Component
-
-## Import
-
-```tsx
-import { Pagination } from "doom-design-system";
-```
-
-## Props
-
-| Prop           | Type                     | Description                     |
-| -------------- | ------------------------ | ------------------------------- |
-| `currentPage`  | `number`                 | Current active page (1-indexed) |
-| `totalPages`   | `number`                 | Total number of pages           |
-| `onPageChange` | `(page: number) => void` | Page change callback            |
-
-## Usage
-
-```tsx
-<Pagination
-  currentPage={page}
-  totalPages={Math.ceil(total / pageSize)}
-  onPageChange={setPage}
-/>
-```
-
-## Guidelines
-
-- Pages are 1-indexed.
-- Automatically truncates with ellipsis for large page counts.
-- Prev/Next buttons are disabled at boundaries.
-- Used internally by Table component when `enablePagination` is true.

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

@@ -1,45 +0,0 @@
-# Popover Component
-
-## Import
-
-```tsx
-import { Popover } from "doom-design-system";
-```
-
-## Props
-
-| Prop        | Type                                                                                            | Default          | Description                   |
-| ----------- | ----------------------------------------------------------------------------------------------- | ---------------- | ----------------------------- |
-| `trigger`   | `ReactNode`                                                                                     | required         | Element that triggers popover |
-| `content`   | `ReactNode`                                                                                     | required         | Popover content               |
-| `isOpen`    | `boolean`                                                                                       | required         | Controlled open state         |
-| `onClose`   | `() => void`                                                                                    | required         | Close callback                |
-| `placement` | `"bottom-start" \| "bottom-end" \| "bottom-center" \| "top-start" \| "top-end" \| "top-center"` | `"bottom-start"` | Position                      |
-| `offset`    | `number`                                                                                        | `8`              | Distance from trigger         |
-
-## Usage
-
-```tsx
-const [isOpen, setIsOpen] = useState(false);
-
-<Popover
-  trigger={<Button onClick={() => setIsOpen(true)}>Open Menu</Button>}
-  content={
-    <Card>
-      <Stack gap={2}>
-        <Button variant="ghost">Option 1</Button>
-        <Button variant="ghost">Option 2</Button>
-      </Stack>
-    </Card>
-  }
-  isOpen={isOpen}
-  onClose={() => setIsOpen(false)}
-/>;
-```
-
-## Guidelines
-
-- Used as the foundation for Dropdown, Select, Tooltip, etc.
-- Automatically repositions to stay in viewport.
-- Closes on click outside.
-- You manage open state externally (controlled component).

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

@@ -1,37 +0,0 @@
-# ProgressBar Component
-
-## Import
-
-```tsx
-import { ProgressBar } from "doom-design-system";
-```
-
-## Props
-
-| Prop          | Type               | Default            | Description                    |
-| ------------- | ------------------ | ------------------ | ------------------------------ |
-| `value`       | `number`           | required           | Current value (0-100 or 0-max) |
-| `max`         | `number`           | `100`              | Maximum value                  |
-| `height`      | `string \| number` | `"24px"`           | Bar height                     |
-| `color`       | `string`           | `"var(--primary)"` | Fill color                     |
-| `showStripes` | `boolean`          | `true`             | Show animated stripes          |
-| `label`       | `ReactNode`        | —                  | Label above the bar            |
-
-## Usage
-
-```tsx
-<ProgressBar value={75} />
-
-<ProgressBar
-  value={uploadProgress}
-  max={100}
-  label="Uploading..."
-  color="var(--success)"
-/>
-```
-
-## Guidelines
-
-- Value is automatically clamped to 0-max range.
-- Stripes provide visual feedback for in-progress states.
-- Set `showStripes={false}` for static/completed states.

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

@@ -1,45 +0,0 @@
-# RadioGroup Component
-
-## Import
-
-```tsx
-import { RadioGroup, RadioGroupItem } from "doom-design-system";
-```
-
-## Props
-
-### RadioGroup
-
-| Prop            | Type                      | Default | Description                |
-| --------------- | ------------------------- | ------- | -------------------------- |
-| `name`          | `string`                  | —       | Form field name            |
-| `value`         | `string`                  | —       | Controlled value           |
-| `defaultValue`  | `string`                  | —       | Uncontrolled initial value |
-| `onValueChange` | `(value: string) => void` | —       | Change callback            |
-| `disabled`      | `boolean`                 | —       | Disable all items          |
-
-### RadioGroupItem
-
-| Prop       | Type        | Description       |
-| ---------- | ----------- | ----------------- |
-| `value`    | `string`    | Item value        |
-| `disabled` | `boolean`   | Disable this item |
-| `children` | `ReactNode` | Label content     |
-
-## Usage
-
-```tsx
-<RadioGroup name="plan" value={selectedPlan} onValueChange={setSelectedPlan}>
-  <RadioGroupItem value="free">Free</RadioGroupItem>
-  <RadioGroupItem value="pro">Pro</RadioGroupItem>
-  <RadioGroupItem value="enterprise" disabled>
-    Enterprise (Coming Soon)
-  </RadioGroupItem>
-</RadioGroup>
-```
-
-## Guidelines
-
-- Use for single-select from a small set of options (2-5).
-- For larger option sets, use `Select` or `Combobox`.
-- Items must be used within a RadioGroup context.