@voriel_salut/ds 0.1.0

package/dist/manifest.json

@@ -0,0 +1,1008 @@
+{
+  "v": 0,
+  "components": {
+    "ui-air-style": {
+      "id": "ui-air-style",
+      "name": "AirStyle",
+      "path": "./src/components/air-style/air-style.stories.tsx",
+      "jsDocTags": {},
+      "reactDocgen": {
+        "description": "",
+        "methods": [],
+        "displayName": "AirStyle",
+        "definedInFile": "src/components/air-style/air-style.tsx",
+        "actualName": "AirStyle",
+        "exportName": "AirStyle",
+        "props": {
+          "label": {
+            "required": true,
+            "tsType": {
+              "name": "ReactReactNode",
+              "raw": "React.ReactNode"
+            },
+            "description": "Text under the image. Clamped to two lines."
+          },
+          "src": {
+            "required": true,
+            "tsType": {
+              "name": "string"
+            },
+            "description": "Image URL for the tile. Shown square and cropped to fill."
+          },
+          "sources": {
+            "required": false,
+            "tsType": {
+              "name": "Array",
+              "elements": [
+                {
+                  "name": "signature",
+                  "type": "object",
+                  "raw": "{\n  srcSet: string\n  media?: string\n  sizes?: string\n}",
+                  "signature": {
+                    "properties": [
+                      {
+                        "key": "srcSet",
+                        "value": {
+                          "name": "string",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "media",
+                        "value": {
+                          "name": "string",
+                          "required": false
+                        }
+                      },
+                      {
+                        "key": "sizes",
+                        "value": {
+                          "name": "string",
+                          "required": false
+                        }
+                      }
+                    ]
+                  }
+                }
+              ],
+              "raw": "AirStyleSource[]"
+            },
+            "description": "Optional responsive sources, rendered as <source> elements inside <picture>.",
+            "defaultValue": {
+              "value": "[]",
+              "computed": false
+            }
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "ui-air-style--default",
+          "name": "Default",
+          "snippet": "const Default = () => <AirStyle label=\"Training\" src={training} />;"
+        },
+        {
+          "id": "ui-air-style--long-label",
+          "name": "Long label",
+          "snippet": "const LongLabel = () => <AirStyle\n    label=\"Outdoor strength training and conditioning in the park\"\n    src={training} />;"
+        },
+        {
+          "id": "ui-air-style--grid",
+          "name": "Grid",
+          "snippet": "const Grid = () => (\n  <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4\">\n    <AirStyle label=\"Training\" src={training} />\n    <AirStyle label=\"Cooking\" src={cooking} />\n    <AirStyle label=\"Photography\" src={photography} />\n    <AirStyle label=\"Art\" src={art} />\n  </div>\n);"
+        }
+      ],
+      "import": "import { AirStyle } from '@voriel_salut/ds';"
+    },
+    "ui-hero": {
+      "id": "ui-hero",
+      "name": "Hero",
+      "path": "./src/components/hero/hero.stories.tsx",
+      "jsDocTags": {},
+      "reactDocgen": {
+        "description": "",
+        "methods": [],
+        "displayName": "Hero",
+        "definedInFile": "src/components/hero/hero.tsx",
+        "actualName": "Hero",
+        "exportName": "Hero",
+        "props": {
+          "title": {
+            "required": true,
+            "tsType": {
+              "name": "ReactReactNode",
+              "raw": "React.ReactNode"
+            },
+            "description": "Main heading, rendered as an h1."
+          },
+          "description": {
+            "required": false,
+            "tsType": {
+              "name": "ReactReactNode",
+              "raw": "React.ReactNode"
+            },
+            "description": "Supporting text under the heading."
+          },
+          "eyebrow": {
+            "required": false,
+            "tsType": {
+              "name": "ReactReactNode",
+              "raw": "React.ReactNode"
+            },
+            "description": "Small label above the heading, e.g. a Badge."
+          },
+          "background": {
+            "required": false,
+            "tsType": {
+              "name": "union",
+              "raw": "\"mesh\" | \"nebula\"",
+              "elements": [
+                {
+                  "name": "literal",
+                  "value": "\"mesh\""
+                },
+                {
+                  "name": "literal",
+                  "value": "\"nebula\""
+                }
+              ]
+            },
+            "description": "\"mesh\" is the calm animated gradient. \"nebula\" is the interactive halftone sky: the pointer\nlights the gas and a click hangs a new star.",
+            "defaultValue": {
+              "value": "\"mesh\"",
+              "computed": false
+            }
+          },
+          "children": {
+            "required": false,
+            "tsType": {
+              "name": "ReactReactNode",
+              "raw": "React.ReactNode"
+            },
+            "description": "Calls to action, usually Buttons."
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "ui-hero--default",
+          "name": "Default",
+          "snippet": "const Default = () => <Hero\n    title=\"Build bold interfaces, fast\"\n    description=\"lets-vibe-ds gives you brutalist components and tokens that work together out of the box.\"\n    eyebrow={<Badge variant=\"accent\">New</Badge>}>(<>\n      <Button size=\"lg\">Get started</Button>\n      <Button size=\"lg\" variant=\"outline\">\n        View components\n      </Button>\n    </>)</Hero>;"
+        },
+        {
+          "id": "ui-hero--interactive",
+          "name": "Interactive",
+          "snippet": "const Interactive = () => <Hero\n    title=\"Lost in the green static\"\n    description=\"A nebula printed one dot at a time. Move to light the gas, click to hang a star.\"\n    eyebrow={<Badge variant=\"accent\">Interactive</Badge>}\n    background=\"nebula\">(<>\n      <Button size=\"lg\">Get started</Button>\n      <Button size=\"lg\" variant=\"outline\">\n        View components\n      </Button>\n    </>)</Hero>;"
+        },
+        {
+          "id": "ui-hero--title-only",
+          "name": "Title only",
+          "snippet": "const TitleOnly = () => <Hero title=\"Build bold interfaces, fast\" description={undefined} />;"
+        }
+      ],
+      "import": "import { Badge, Button, Hero } from '@voriel_salut/ds';"
+    },
+    "ui-badge": {
+      "id": "ui-badge",
+      "name": "Badge",
+      "path": "./src/components/ui/badge.stories.tsx",
+      "jsDocTags": {},
+      "reactDocgen": {
+        "description": "",
+        "methods": [],
+        "displayName": "Badge",
+        "definedInFile": "src/components/ui/badge.tsx",
+        "actualName": "Badge",
+        "exportName": "Badge",
+        "props": {
+          "asChild": {
+            "required": false,
+            "tsType": {
+              "name": "boolean"
+            },
+            "description": "",
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            }
+          },
+          "variant": {
+            "defaultValue": {
+              "value": "\"default\"",
+              "computed": false
+            },
+            "required": false
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "ui-badge--default",
+          "name": "Default",
+          "snippet": "const Default = () => <Badge variant=\"default\">Badge</Badge>;"
+        },
+        {
+          "id": "ui-badge--secondary",
+          "name": "Secondary",
+          "snippet": "const Secondary = () => <Badge variant=\"secondary\">Badge</Badge>;"
+        },
+        {
+          "id": "ui-badge--accent",
+          "name": "Accent",
+          "snippet": "const Accent = () => <Badge variant=\"accent\">Badge</Badge>;"
+        },
+        {
+          "id": "ui-badge--outline",
+          "name": "Outline",
+          "snippet": "const Outline = () => <Badge variant=\"outline\">Badge</Badge>;"
+        },
+        {
+          "id": "ui-badge--destructive",
+          "name": "Destructive",
+          "snippet": "const Destructive = () => <Badge variant=\"destructive\">Badge</Badge>;"
+        },
+        {
+          "id": "ui-badge--all-variants",
+          "name": "All variants",
+          "snippet": "const AllVariants = () => (\n  <div className=\"flex flex-wrap gap-2\">\n    <Badge>Default</Badge>\n    <Badge variant=\"secondary\">Secondary</Badge>\n    <Badge variant=\"accent\">Accent</Badge>\n    <Badge variant=\"outline\">Outline</Badge>\n    <Badge variant=\"ghost\">Ghost</Badge>\n    <Badge variant=\"destructive\">Destructive</Badge>\n    <Badge variant=\"link\">Link</Badge>\n  </div>\n);"
+        }
+      ],
+      "import": "import { Badge } from '@voriel_salut/ds';"
+    },
+    "ui-button": {
+      "id": "ui-button",
+      "name": "Button",
+      "path": "./src/components/ui/button.stories.tsx",
+      "jsDocTags": {},
+      "reactDocgen": {
+        "description": "",
+        "methods": [],
+        "displayName": "Button",
+        "definedInFile": "src/components/ui/button.tsx",
+        "actualName": "Button",
+        "exportName": "Button",
+        "props": {
+          "asChild": {
+            "required": false,
+            "tsType": {
+              "name": "boolean"
+            },
+            "description": "",
+            "defaultValue": {
+              "value": "false",
+              "computed": false
+            }
+          },
+          "variant": {
+            "defaultValue": {
+              "value": "\"default\"",
+              "computed": false
+            },
+            "required": false
+          },
+          "size": {
+            "defaultValue": {
+              "value": "\"default\"",
+              "computed": false
+            },
+            "required": false
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "ui-button--default",
+          "name": "Default",
+          "snippet": "const Default = () => <Button variant=\"default\" size=\"default\" disabled={false}>Button</Button>;"
+        },
+        {
+          "id": "ui-button--outline",
+          "name": "Outline",
+          "snippet": "const Outline = () => <Button variant=\"outline\" size=\"default\" disabled={false}>Button</Button>;"
+        },
+        {
+          "id": "ui-button--secondary",
+          "name": "Secondary",
+          "snippet": "const Secondary = () => <Button variant=\"secondary\" size=\"default\" disabled={false}>Button</Button>;"
+        },
+        {
+          "id": "ui-button--accent",
+          "name": "Accent",
+          "snippet": "const Accent = () => <Button variant=\"accent\" size=\"default\" disabled={false}>Button</Button>;"
+        },
+        {
+          "id": "ui-button--ghost",
+          "name": "Ghost",
+          "snippet": "const Ghost = () => <Button variant=\"ghost\" size=\"default\" disabled={false}>Button</Button>;"
+        },
+        {
+          "id": "ui-button--destructive",
+          "name": "Destructive",
+          "snippet": "const Destructive = () => <Button variant=\"destructive\" size=\"default\" disabled={false}>Button</Button>;"
+        },
+        {
+          "id": "ui-button--link",
+          "name": "Link",
+          "snippet": "const Link = () => <Button variant=\"link\" size=\"default\" disabled={false}>Button</Button>;"
+        }
+      ],
+      "import": "import { Button } from '@voriel_salut/ds';"
+    },
+    "ui-card": {
+      "id": "ui-card",
+      "name": "Card",
+      "path": "./src/components/ui/card.stories.tsx",
+      "jsDocTags": {},
+      "reactDocgen": {
+        "description": "",
+        "methods": [],
+        "displayName": "Card",
+        "definedInFile": "src/components/ui/card.tsx",
+        "actualName": "Card",
+        "exportName": "Card",
+        "props": {
+          "size": {
+            "required": false,
+            "tsType": {
+              "name": "union",
+              "raw": "\"default\" | \"sm\"",
+              "elements": [
+                {
+                  "name": "literal",
+                  "value": "\"default\""
+                },
+                {
+                  "name": "literal",
+                  "value": "\"sm\""
+                }
+              ]
+            },
+            "description": "",
+            "defaultValue": {
+              "value": "\"default\"",
+              "computed": false
+            }
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "ui-card--default",
+          "name": "Default",
+          "snippet": "const Default = () => <Card size=\"default\" className=\"w-80\">\n    <CardHeader>\n        <CardTitle>Sign up</CardTitle>\n        <CardDescription>Get updates on the design system.</CardDescription>\n    </CardHeader>\n    <CardContent className=\"flex flex-col gap-2\">\n        <Label htmlFor=\"card-email\">Email</Label>\n        <Input id=\"card-email\" type=\"email\" placeholder=\"you@example.com\" />\n    </CardContent>\n    <CardFooter>\n        <Button className=\"w-full\">Subscribe</Button>\n    </CardFooter>\n</Card>;"
+        },
+        {
+          "id": "ui-card--with-action",
+          "name": "With action",
+          "snippet": "const WithAction = () => <Card size=\"default\" className=\"w-80\">\n    <CardHeader>\n        <CardTitle>Monthly plan</CardTitle>\n        <CardDescription>Billed every month.</CardDescription>\n        <CardAction>\n            <Badge variant=\"accent\">Popular</Badge>\n        </CardAction>\n    </CardHeader>\n    <CardContent>\n        <p className=\"text-3xl font-bold\">€12</p>\n    </CardContent>\n</Card>;"
+        },
+        {
+          "id": "ui-card--small",
+          "name": "Small",
+          "snippet": "const Small = () => <Card size=\"sm\" className=\"w-64\">\n    <CardHeader>\n        <CardTitle>Small card</CardTitle>\n        <CardDescription>Tighter spacing for dense layouts.</CardDescription>\n    </CardHeader>\n</Card>;"
+        }
+      ],
+      "import": "import {\n  Badge,\n  Button,\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n  Input,\n  Label,\n} from '@voriel_salut/ds';"
+    },
+    "ui-dialog": {
+      "id": "ui-dialog",
+      "name": "Dialog",
+      "path": "./src/components/ui/dialog.stories.tsx",
+      "jsDocTags": {},
+      "reactDocgen": {
+        "description": "",
+        "methods": [],
+        "displayName": "Dialog",
+        "definedInFile": "src/components/ui/dialog.tsx",
+        "actualName": "Dialog",
+        "exportName": "Dialog"
+      },
+      "stories": [
+        {
+          "id": "ui-dialog--default",
+          "name": "Default",
+          "snippet": "const Default = () => <Dialog>\n    <DialogTrigger asChild>\n        <Button variant=\"outline\">Edit profile</Button>\n    </DialogTrigger>\n    <DialogContent>\n        <DialogHeader>\n            <DialogTitle>Edit profile</DialogTitle>\n            <DialogDescription>Change your details, then save.</DialogDescription>\n        </DialogHeader>\n        <div className=\"flex flex-col gap-2\">\n            <Label htmlFor=\"dialog-name\">Name</Label>\n            <Input id=\"dialog-name\" defaultValue=\"Oliver\" />\n        </div>\n        <DialogFooter>\n            <DialogClose asChild>\n                <Button variant=\"outline\">Cancel</Button>\n            </DialogClose>\n            <Button>Save</Button>\n        </DialogFooter>\n    </DialogContent>\n</Dialog>;"
+        },
+        {
+          "id": "ui-dialog--destructive",
+          "name": "Destructive",
+          "snippet": "const Destructive = () => <Dialog>\n    <DialogTrigger asChild>\n        <Button variant=\"destructive\">Delete project</Button>\n    </DialogTrigger>\n    <DialogContent>\n        <DialogHeader>\n            <DialogTitle>Delete this project?</DialogTitle>\n            <DialogDescription>This can't be undone.</DialogDescription>\n        </DialogHeader>\n        <DialogFooter showCloseButton>\n            <Button variant=\"destructive\">Delete</Button>\n        </DialogFooter>\n    </DialogContent>\n</Dialog>;"
+        },
+        {
+          "id": "ui-dialog--open",
+          "name": "Open",
+          "error": {
+            "name": "SyntaxError",
+            "message": "Expected render to be an arrow function or function expression\n  70 | export const Open: Story = {\n  71 |   args: { defaultOpen: true },\n> 72 |   render: Default.render,\n     |           ^^^^^^^^^^^^^^\n  73 | }\n  74 |"
+          }
+        }
+      ],
+      "import": "import {\n  Button,\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n  Input,\n  Label,\n} from '@voriel_salut/ds';"
+    },
+    "ui-halftone-nebula": {
+      "id": "ui-halftone-nebula",
+      "name": "HalftoneNebula",
+      "path": "./src/components/ui/halftone-nebula.stories.tsx",
+      "jsDocTags": {},
+      "reactDocgen": {
+        "description": "",
+        "methods": [],
+        "displayName": "HalftoneNebula",
+        "definedInFile": "src/components/ui/halftone-nebula.tsx",
+        "actualName": "HalftoneNebula",
+        "exportName": "HalftoneNebula",
+        "props": {
+          "height": {
+            "required": false,
+            "tsType": {
+              "name": "string"
+            },
+            "description": "Explicit height, e.g. \"100svh\". The canvas fills the box, so without it the\nsection needs its height from its content or classes."
+          },
+          "preset": {
+            "required": false,
+            "tsType": {
+              "name": "union",
+              "raw": "keyof typeof NEBULA_PRESETS",
+              "elements": [
+                {
+                  "name": "literal",
+                  "value": "brand"
+                },
+                {
+                  "name": "literal",
+                  "value": "crimson"
+                },
+                {
+                  "name": "literal",
+                  "value": "ultraviolet"
+                },
+                {
+                  "name": "literal",
+                  "value": "abyssal"
+                },
+                {
+                  "name": "literal",
+                  "value": "solar"
+                },
+                {
+                  "name": "literal",
+                  "value": "phosphor"
+                }
+              ]
+            },
+            "description": "A named palette + layout, layered over the defaults.",
+            "defaultValue": {
+              "value": "\"brand\"",
+              "computed": false
+            }
+          },
+          "params": {
+            "required": false,
+            "tsType": {
+              "name": "Partial",
+              "elements": [
+                {
+                  "name": "signature",
+                  "type": "object",
+                  "raw": "{\n  // the grid\n  /** CSS px per pixel cell. Everything snaps to this. */\n  pixel: number\n  /** Dot radius, in cells, where the gas is empty / densest. >0.5 merges dots. */\n  dotMin: number\n  dotMax: number\n  /** Quantisation steps before dithering. Fewer reads more like pixel art. */\n  levels: number\n  // the gas\n  scale: number\n  warp: number\n  drift: number\n  density: number\n  threshold: number\n  softness: number\n  /** The luminous river of gas that sweeps across the frame. */\n  band: number\n  bandAngle: number\n  bandOffset: number\n  bandWidth: number\n  haze: number\n  // stars\n  stars: number\n  twinkle: number\n  starDrift: number\n  sparkles: number\n  seed: number\n  spikeWidth: number\n  // planet\n  planet: boolean\n  planetX: number\n  planetY: number\n  planetRadius: number\n  // the pointer\n  parallax: number\n  lens: number\n  lensRadius: number\n  lensPush: number\n  rippleSpeed: number\n  // post\n  speed: number\n  vignette: number\n  grain: number\n  // palette, dark to bright. Any CSS colour, including var(--token) and color-mix().\n  voidColor: string\n  hazeColor: string\n  duskColor: string\n  wineColor: string\n  crimsonColor: string\n  hotColor: string\n  starColor: string\n}",
+                  "signature": {
+                    "properties": [
+                      {
+                        "key": "pixel",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        },
+                        "description": "CSS px per pixel cell. Everything snaps to this."
+                      },
+                      {
+                        "key": "dotMin",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        },
+                        "description": "Dot radius, in cells, where the gas is empty / densest. >0.5 merges dots."
+                      },
+                      {
+                        "key": "dotMax",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "levels",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        },
+                        "description": "Quantisation steps before dithering. Fewer reads more like pixel art."
+                      },
+                      {
+                        "key": "scale",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "warp",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "drift",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "density",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "threshold",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "softness",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "band",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        },
+                        "description": "The luminous river of gas that sweeps across the frame."
+                      },
+                      {
+                        "key": "bandAngle",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "bandOffset",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "bandWidth",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "haze",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "stars",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "twinkle",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "starDrift",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "sparkles",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "seed",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "spikeWidth",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "planet",
+                        "value": {
+                          "name": "boolean",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "planetX",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "planetY",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "planetRadius",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "parallax",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "lens",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "lensRadius",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "lensPush",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "rippleSpeed",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "speed",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "vignette",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "grain",
+                        "value": {
+                          "name": "number",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "voidColor",
+                        "value": {
+                          "name": "string",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "hazeColor",
+                        "value": {
+                          "name": "string",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "duskColor",
+                        "value": {
+                          "name": "string",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "wineColor",
+                        "value": {
+                          "name": "string",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "crimsonColor",
+                        "value": {
+                          "name": "string",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "hotColor",
+                        "value": {
+                          "name": "string",
+                          "required": true
+                        }
+                      },
+                      {
+                        "key": "starColor",
+                        "value": {
+                          "name": "string",
+                          "required": true
+                        }
+                      }
+                    ]
+                  }
+                }
+              ],
+              "raw": "Partial<NebulaParams>"
+            },
+            "description": "Overrides layered over the preset."
+          },
+          "interactive": {
+            "required": false,
+            "tsType": {
+              "name": "boolean"
+            },
+            "description": "Pointer lights the gas and parallaxes the sky; click drops a sparkle.",
+            "defaultValue": {
+              "value": "true",
+              "computed": false
+            }
+          },
+          "touch": {
+            "required": false,
+            "tsType": {
+              "name": "union",
+              "raw": "\"scroll\" | \"draw\"",
+              "elements": [
+                {
+                  "name": "literal",
+                  "value": "\"scroll\""
+                },
+                {
+                  "name": "literal",
+                  "value": "\"draw\""
+                }
+              ]
+            },
+            "description": "\"scroll\" keeps page scrolling on touch; \"draw\" takes the gesture.",
+            "defaultValue": {
+              "value": "\"scroll\"",
+              "computed": false
+            }
+          },
+          "maxDpr": {
+            "required": false,
+            "tsType": {
+              "name": "number"
+            },
+            "description": "Device-pixel-ratio cap. The shader is per-pixel, so 2 is plenty.",
+            "defaultValue": {
+              "value": "2",
+              "computed": false
+            }
+          },
+          "children": {
+            "required": false,
+            "tsType": {
+              "name": "ReactReactNode",
+              "raw": "React.ReactNode"
+            },
+            "description": "Content laid over the sky. Pointer events pass through unless opted in."
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "ui-halftone-nebula--default",
+          "name": "Default",
+          "snippet": "const Default = () => <HalftoneNebula height=\"32rem\" preset=\"brand\" interactive />;"
+        },
+        {
+          "id": "ui-halftone-nebula--crimson",
+          "name": "Crimson",
+          "snippet": "const Crimson = () => <HalftoneNebula height=\"32rem\" preset=\"crimson\" interactive />;"
+        },
+        {
+          "id": "ui-halftone-nebula--static",
+          "name": "Static",
+          "snippet": "const Static = () => <HalftoneNebula height=\"32rem\" preset=\"brand\" interactive={false} />;"
+        }
+      ],
+      "import": "import { HalftoneNebula } from '@voriel_salut/ds';"
+    },
+    "ui-input": {
+      "id": "ui-input",
+      "name": "Input",
+      "path": "./src/components/ui/input.stories.tsx",
+      "jsDocTags": {},
+      "reactDocgen": {
+        "description": "",
+        "methods": [],
+        "displayName": "Input",
+        "definedInFile": "src/components/ui/input.tsx",
+        "actualName": "Input",
+        "exportName": "Input"
+      },
+      "stories": [
+        {
+          "id": "ui-input--default",
+          "name": "Default",
+          "snippet": "const Default = () => <Input placeholder=\"you@example.com\" type=\"email\" disabled={false} />;"
+        },
+        {
+          "id": "ui-input--with-label",
+          "name": "With label",
+          "snippet": "const WithLabel = () => <div className=\"flex flex-col gap-2\">\n    <Label htmlFor=\"input-email\">Email</Label>\n    <Input\n        id=\"input-email\"\n        placeholder=\"you@example.com\"\n        type=\"email\"\n        disabled={false} />\n</div>;"
+        },
+        {
+          "id": "ui-input--disabled",
+          "name": "Disabled",
+          "snippet": "const Disabled = () => <Input placeholder=\"you@example.com\" type=\"email\" disabled />;"
+        },
+        {
+          "id": "ui-input--invalid",
+          "name": "Invalid",
+          "snippet": "const Invalid = () => <div className=\"flex flex-col gap-2\">\n    <Label htmlFor=\"input-invalid\">Email</Label>\n    <Input\n        id=\"input-invalid\"\n        aria-invalid\n        defaultValue=\"not-an-email\"\n        placeholder=\"you@example.com\"\n        type=\"email\"\n        disabled={false} />\n    <p className=\"text-xs text-destructive\">Enter a valid email address.</p>\n</div>;"
+        },
+        {
+          "id": "ui-input--file",
+          "name": "File",
+          "snippet": "const File = () => <Input placeholder={undefined} type=\"file\" disabled={false} />;"
+        }
+      ],
+      "import": "import { Input, Label } from '@voriel_salut/ds';"
+    },
+    "ui-label": {
+      "id": "ui-label",
+      "name": "Label",
+      "path": "./src/components/ui/label.stories.tsx",
+      "jsDocTags": {},
+      "reactDocgen": {
+        "description": "",
+        "methods": [],
+        "displayName": "Label",
+        "definedInFile": "src/components/ui/label.tsx",
+        "actualName": "Label",
+        "exportName": "Label"
+      },
+      "stories": [
+        {
+          "id": "ui-label--default",
+          "name": "Default",
+          "snippet": "const Default = () => <Label>Email</Label>;"
+        },
+        {
+          "id": "ui-label--with-input",
+          "name": "With input",
+          "snippet": "const WithInput = () => <div className=\"flex w-72 flex-col gap-2\">\n    <Label htmlFor=\"label-email\">Email</Label>\n    <Input id=\"label-email\" type=\"email\" placeholder=\"you@example.com\" />\n</div>;"
+        }
+      ],
+      "import": "import { Input, Label } from '@voriel_salut/ds';"
+    },
+    "ui-tabs": {
+      "id": "ui-tabs",
+      "name": "Tabs",
+      "path": "./src/components/ui/tabs.stories.tsx",
+      "jsDocTags": {},
+      "reactDocgen": {
+        "description": "",
+        "methods": [],
+        "displayName": "Tabs",
+        "definedInFile": "src/components/ui/tabs.tsx",
+        "actualName": "Tabs",
+        "exportName": "Tabs",
+        "props": {
+          "orientation": {
+            "defaultValue": {
+              "value": "\"horizontal\"",
+              "computed": false
+            },
+            "required": false
+          }
+        }
+      },
+      "stories": [
+        {
+          "id": "ui-tabs--default",
+          "name": "Default",
+          "snippet": "const Default = () => <Tabs defaultValue=\"overview\" className=\"w-96\">\n    <Example />\n</Tabs>;"
+        },
+        {
+          "id": "ui-tabs--line",
+          "name": "Line",
+          "snippet": "const Line = () => <Tabs defaultValue=\"overview\" className=\"w-96\">\n    <Example variant=\"line\" />\n</Tabs>;"
+        },
+        {
+          "id": "ui-tabs--vertical",
+          "name": "Vertical",
+          "snippet": "const Vertical = () => <Tabs defaultValue=\"overview\" orientation=\"vertical\" className=\"w-96\">\n    <Example />\n</Tabs>;"
+        }
+      ],
+      "import": "import { Tabs, TabsContent, TabsList, TabsTrigger } from '@voriel_salut/ds';"
+    },
+    "ui-tooltip": {
+      "id": "ui-tooltip",
+      "name": "Tooltip",
+      "path": "./src/components/ui/tooltip.stories.tsx",
+      "jsDocTags": {},
+      "reactDocgen": {
+        "description": "",
+        "methods": [],
+        "displayName": "Tooltip",
+        "definedInFile": "src/components/ui/tooltip.tsx",
+        "actualName": "Tooltip",
+        "exportName": "Tooltip"
+      },
+      "stories": [
+        {
+          "id": "ui-tooltip--default",
+          "name": "Default",
+          "snippet": "const Default = () => <Tooltip>\n    <TooltipTrigger asChild>\n        <Button variant=\"outline\">Hover me</Button>\n    </TooltipTrigger>\n    <TooltipContent>A tooltip</TooltipContent>\n</Tooltip>;"
+        },
+        {
+          "id": "ui-tooltip--sides",
+          "name": "Sides",
+          "snippet": "const Sides = () => (\n  <div className=\"grid grid-cols-2 gap-4\">\n    {([\"top\", \"right\", \"bottom\", \"left\"] as const).map((side) => (\n      <Tooltip key={side}>\n        <TooltipTrigger asChild>\n          <Button variant=\"outline\">{side}</Button>\n        </TooltipTrigger>\n        <TooltipContent side={side}>Shown on the {side}</TooltipContent>\n      </Tooltip>\n    ))}\n  </div>\n);"
+        },
+        {
+          "id": "ui-tooltip--open",
+          "name": "Open",
+          "error": {
+            "name": "SyntaxError",
+            "message": "Expected render to be an arrow function or function expression\n  41 | export const Open: Story = {\n  42 |   args: { defaultOpen: true },\n> 43 |   render: Default.render,\n     |           ^^^^^^^^^^^^^^\n  44 | }\n  45 |"
+          }
+        }
+      ],
+      "import": "import { Button, Tooltip, TooltipContent, TooltipTrigger } from '@voriel_salut/ds';"
+    }
+  },
+  "meta": {
+    "docgen": "react-docgen",
+    "durationMs": 140
+  },
+  "package": "@voriel_salut/ds",
+  "version": "0.1.0"
+}