@kinetixui/ui 0.1.0 → 0.3.1

package/src/stories/NavigationMenu.stories.tsx

@@ -0,0 +1,34 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from "@kinetixui/ui";
+
+const Demo = () => (
+    <NavigationMenu>
+      <NavigationMenuList>
+        <NavigationMenuItem>
+          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+          <NavigationMenuContent>
+            <div className="grid w-[320px] gap-2 p-4 text-sm">
+              <NavigationMenuLink className="rounded-md p-2 hover:bg-accent">Introduction</NavigationMenuLink>
+              <NavigationMenuLink className="rounded-md p-2 hover:bg-accent">Installation</NavigationMenuLink>
+              <NavigationMenuLink className="rounded-md p-2 hover:bg-accent">Theming</NavigationMenuLink>
+            </div>
+          </NavigationMenuContent>
+        </NavigationMenuItem>
+      </NavigationMenuList>
+    </NavigationMenu>
+  );
+
+const meta = {
+  title: "Navigation/NavigationMenu",
+  parameters: {
+    layout: "padded",
+    docs: { source: { code: `<NavigationMenu>\n  <NavigationMenuList>\n    <NavigationMenuItem>\n      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n      <NavigationMenuContent>…</NavigationMenuContent>\n    </NavigationMenuItem>\n  </NavigationMenuList>\n</NavigationMenu>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/NumberInput.stories.tsx

@@ -0,0 +1,29 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { NumberInput } from "@kinetixui/ui";
+
+const Demo = () => {
+    const [v, setV] = React.useState(2);
+    return <NumberInput value={v} onChange={setV} min={0} max={10} className="w-32" />;
+  };
+
+const meta = {
+  title: "Form Inputs/NumberInput",
+  component: NumberInput,
+  args: { defaultValue: 2, min: 0, max: 10, step: 1 },
+  argTypes: {
+    min: { control: "number" }, max: { control: "number" }, step: { control: "number" },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<NumberInput value={qty} onChange={setQty} min={0} max={10} />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => <NumberInput {...args} className="w-32" /> };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Pagination.stories.tsx

@@ -0,0 +1,30 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem><PaginationPrevious href="#" /></PaginationItem>
+        <PaginationItem><PaginationLink href="#">1</PaginationLink></PaginationItem>
+        <PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>
+        <PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
+        <PaginationItem><PaginationEllipsis /></PaginationItem>
+        <PaginationItem><PaginationNext href="#" /></PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+
+const meta = {
+  title: "Controls & Actions/Pagination",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Pagination>\n  <PaginationContent>\n    <PaginationItem><PaginationPrevious href="#" /></PaginationItem>\n    <PaginationItem><PaginationLink href="#" isActive>2</PaginationLink></PaginationItem>\n    <PaginationItem><PaginationNext href="#" /></PaginationItem>\n  </PaginationContent>\n</Pagination>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/PasswordInput.stories.tsx

@@ -0,0 +1,23 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { PasswordInput } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="w-full max-w-sm">
+      <PasswordInput placeholder="••••••••" defaultValue="hunter2" />
+    </div>
+  );
+
+const meta = {
+  title: "Form Inputs/PasswordInput",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<PasswordInput placeholder="••••••••" />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Popover.stories.tsx

@@ -0,0 +1,47 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button, Popover, PopoverContent, PopoverTrigger } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="Outline">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <p className="text-sm font-medium">Dimensions</p>
+        <p className="mt-1 text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+      </PopoverContent>
+    </Popover>
+  );
+
+const meta = {
+  title: "Overlays/Popover",
+  component: Popover,
+  args: { side: "bottom", align: "center" },
+  argTypes: {
+    side: { control: "inline-radio", options: ["top", "right", "bottom", "left"] },
+    align: { control: "inline-radio", options: ["start", "center", "end"] },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Popover>\n  <PopoverTrigger asChild><Button variant="Outline">Open popover</Button></PopoverTrigger>\n  <PopoverContent>…</PopoverContent>\n</Popover>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="Outline">Open popover</Button>
+      </PopoverTrigger>
+      <PopoverContent {...args}>
+        <p className="text-sm font-medium">Dimensions</p>
+        <p className="mt-1 text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+      </PopoverContent>
+    </Popover>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Progress.stories.tsx

@@ -0,0 +1,31 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Progress } from "@kinetixui/ui";
+
+const Demo = () => {
+    const [v, setV] = React.useState(13);
+    React.useEffect(() => {
+      const t = setTimeout(() => setV(66), 600);
+      return () => clearTimeout(t);
+    }, []);
+    return <Progress value={v} className="w-[60%]" />;
+  };
+
+const meta = {
+  title: "Feedback/Progress",
+  component: Progress,
+  args: { value: 66 },
+  argTypes: { value: { control: { type: "range", min: 0, max: 100 } } },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `const [value, setValue] = React.useState(13)\n// ...\n<Progress value={value} />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Progress {...args} className="w-60" /> };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Quote.stories.tsx

@@ -0,0 +1,32 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar, AvatarFallback, Quote } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Quote
+      className="max-w-md"
+      author="Amira K."
+      authorTitle="Product Designer"
+      avatar={
+        <Avatar>
+          <AvatarFallback>AK</AvatarFallback>
+        </Avatar>
+      }
+    >
+      This is exactly the token workflow our team needed.
+    </Quote>
+  );
+
+const meta = {
+  title: "Data Display/Quote",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Quote author="Amira K." authorTitle="Product Designer" avatar={<Avatar>...</Avatar>}>\n  This is exactly the token workflow our team needed.\n</Quote>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/RadioGroup.stories.tsx

@@ -0,0 +1,45 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Label, RadioGroup, RadioGroupItem } from "@kinetixui/ui";
+
+const Demo = () => (
+    <RadioGroup defaultValue="comfortable">
+      {["default", "comfortable", "compact"].map((v) => (
+        <div key={v} className="flex items-center gap-2">
+          <RadioGroupItem value={v} id={v} />
+          <Label htmlFor={v} className="capitalize">{v}</Label>
+        </div>
+      ))}
+    </RadioGroup>
+  );
+
+const meta = {
+  title: "Form Inputs/RadioGroup",
+  component: RadioGroup,
+  args: { defaultValue: "comfortable", disabled: false },
+  argTypes: {
+    defaultValue: { control: "inline-radio", options: ["default", "comfortable", "compact"] },
+    disabled: { control: "boolean" },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<RadioGroup defaultValue="comfortable">\n  <div className="flex items-center gap-2">\n    <RadioGroupItem value="default" id="r1" />\n    <Label htmlFor="r1">Default</Label>\n  </div>\n</RadioGroup>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <RadioGroup {...args}>
+      {["default", "comfortable", "compact"].map((v) => (
+        <div key={v} className="flex items-center gap-2">
+          <RadioGroupItem value={v} id={v} />
+          <Label htmlFor={v} className="capitalize">{v}</Label>
+        </div>
+      ))}
+    </RadioGroup>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Rating.stories.tsx

@@ -0,0 +1,35 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Rating } from "@kinetixui/ui";
+
+const Demo = () => {
+    const [v, setV] = React.useState(3);
+    return (
+      <div className="flex flex-col gap-3">
+        <Rating value={v} onChange={setV} />
+        <Rating value={4} readOnly size="sm" />
+      </div>
+    );
+  };
+
+const meta = {
+  title: "Form Inputs/Rating",
+  component: Rating,
+  args: { size: "md", readOnly: false, defaultValue: 3 },
+  argTypes: {
+    size: { control: "inline-radio", options: ["sm", "md", "lg"] },
+    readOnly: { control: "boolean" },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Rating value={value} onChange={setValue} />\n<Rating value={4} readOnly size="sm" />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Rating {...args} /> };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Resizable.stories.tsx

@@ -0,0 +1,29 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@kinetixui/ui";
+
+const Demo = () => (
+    <ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-32 items-center justify-center p-6 text-sm">One</div>
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={50}>
+        <div className="flex h-32 items-center justify-center p-6 text-sm">Two</div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+
+const meta = {
+  title: "Data Display/Resizable",
+  parameters: {
+    layout: "padded",
+    docs: { source: { code: `<ResizablePanelGroup direction="horizontal">\n  <ResizablePanel defaultSize={50}>One</ResizablePanel>\n  <ResizableHandle withHandle />\n  <ResizablePanel defaultSize={50}>Two</ResizablePanel>\n</ResizablePanelGroup>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/ScrollArea.stories.tsx

@@ -0,0 +1,25 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ScrollArea, Tag } from "@kinetixui/ui";
+
+const Demo = () => (
+    <ScrollArea className="h-40 w-56 rounded-md border p-4 text-sm">
+      {Array.from({ length: 20 }).map((_, i) => (
+        <div key={i} className="py-1">Tag {i + 1}</div>
+      ))}
+    </ScrollArea>
+  );
+
+const meta = {
+  title: "Data Display/ScrollArea",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<ScrollArea className="h-40 w-56 rounded-md border p-4">\n  {tags.map((t) => <div key={t}>{t}</div>)}\n</ScrollArea>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Select.stories.tsx

@@ -0,0 +1,46 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Select>
+      <SelectTrigger className="w-[220px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="blueberry">Blueberry</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+
+const meta = {
+  title: "Form Inputs/Select",
+  component: Select,
+  args: { disabled: false },
+  argTypes: { disabled: { control: "boolean" } },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Select>\n  <SelectTrigger><SelectValue placeholder="Select a fruit" /></SelectTrigger>\n  <SelectContent>\n    <SelectItem value="apple">Apple</SelectItem>\n  </SelectContent>\n</Select>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <Select {...args}>
+      <SelectTrigger className="w-[220px]">
+        <SelectValue placeholder="Select a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="blueberry">Blueberry</SelectItem>
+      </SelectContent>
+    </Select>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Separator.stories.tsx

@@ -0,0 +1,41 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Separator } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="text-sm">
+      <div className="font-medium">KinetixUI</div>
+      <div className="text-muted-foreground">One token architecture.</div>
+      <Separator className="my-3" />
+      <div className="flex h-5 items-center gap-3">
+        <span>Docs</span>
+        <Separator orientation="vertical" />
+        <span>Components</span>
+        <Separator orientation="vertical" />
+        <span>Themes</span>
+      </div>
+    </div>
+  );
+
+const meta = {
+  title: "Foundations/Separator",
+  component: Separator,
+  args: { orientation: "horizontal" },
+  argTypes: { orientation: { control: "inline-radio", options: ["horizontal", "vertical"] } },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Separator />\n<Separator orientation="vertical" />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <div className="flex h-16 w-48 items-center justify-center">
+      <Separator {...args} />
+    </div>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Sheet.stories.tsx

@@ -0,0 +1,31 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="Outline">Open</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>Make changes to your profile here.</SheetDescription>
+        </SheetHeader>
+      </SheetContent>
+    </Sheet>
+  );
+
+const meta = {
+  title: "Overlays/Sheet",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Sheet>\n  <SheetTrigger asChild><Button variant="Outline">Open</Button></SheetTrigger>\n  <SheetContent side="right">…</SheetContent>\n</Sheet>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Sidebar.stories.tsx

@@ -0,0 +1,25 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+
+const Demo = () => (
+    <div className="w-full rounded-lg border p-4 text-sm text-muted-foreground">
+      The <code className="text-foreground">Sidebar</code> is a full-page layout primitive
+      (<code className="text-foreground">SidebarProvider</code> + <code className="text-foreground">SidebarInset</code>).
+      See the code tab for a minimal shell; it themes from the <code className="text-foreground">--sidebar-*</code> tokens.
+    </div>
+  );
+
+const meta = {
+  title: "Navigation/Sidebar",
+  parameters: {
+    layout: "padded",
+    docs: { source: { code: `<SidebarProvider>\n  <Sidebar>\n    <SidebarHeader>…</SidebarHeader>\n    <SidebarContent>\n      <SidebarGroup>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <SidebarMenuButton isActive>Home</SidebarMenuButton>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarGroup>\n    </SidebarContent>\n  </Sidebar>\n  <SidebarInset>\n    <SidebarTrigger />\n    {/* page content */}\n  </SidebarInset>\n</SidebarProvider>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Skeleton.stories.tsx

@@ -0,0 +1,27 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Skeleton } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="flex items-center gap-3">
+      <Skeleton className="size-12 rounded-full" />
+      <div className="space-y-2">
+        <Skeleton className="h-4 w-[200px]" />
+        <Skeleton className="h-4 w-[160px]" />
+      </div>
+    </div>
+  );
+
+const meta = {
+  title: "Foundations/Skeleton",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Skeleton className="size-12 rounded-full" />\n<Skeleton className="h-4 w-[200px]" />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Slider.stories.tsx

@@ -0,0 +1,24 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Slider } from "@kinetixui/ui";
+
+const Demo = () => <Slider defaultValue={[50]} max={100} step={1} className="w-[60%]" />;
+
+const meta = {
+  title: "Form Inputs/Slider",
+  component: Slider,
+  args: { disabled: false },
+  argTypes: { disabled: { control: "boolean" } },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Slider defaultValue={[50]} max={100} step={1} />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Slider {...args} defaultValue={[50]} max={100} step={1} className="w-60" /> };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Sonner.stories.tsx

@@ -0,0 +1,26 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button, Toaster, toast } from "@kinetixui/ui";
+
+const Demo = () => (
+    <>
+      <Toaster />
+      <Button variant="Outline" onClick={() => toast("Event created", { description: "Sunday, December 03 at 9:00 AM" })}>
+        Show toast
+      </Button>
+    </>
+  );
+
+const meta = {
+  title: "Feedback/Sonner",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `// app/layout.tsx\n<Toaster />\n\n// anywhere\ntoast("Event created", { description: "Sunday, December 03" })`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Spinner.stories.tsx

@@ -0,0 +1,33 @@
+/* AUTO-GENERATED by scripts/gen-stories.mjs — do not edit.
+   Source of truth: apps/web/src/registry/demos.tsx · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Spinner } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="flex items-center gap-4">
+      <Spinner size="sm" />
+      <Spinner />
+      <Spinner size="lg" />
+    </div>
+  );
+
+const meta = {
+  title: "Foundations/Spinner",
+  component: Spinner,
+  args: { size: "md", variant: "default" },
+  argTypes: {
+    size: { control: "inline-radio", options: ["sm", "md", "lg"] },
+    variant: { control: "inline-radio", options: ["default", "muted", "onColor"] },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Spinner size="sm" />\n<Spinner />\n<Spinner size="lg" />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Spinner {...args} /> };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };