@kinetixui/ui 0.1.0 → 0.4.0

package/src/stories/AudioPlayer.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 { AudioPlayer } from "@kinetixui/ui";
+
+const SAMPLE_AUDIO = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
+
+const Demo = () => (
+    <div className="flex w-full max-w-[380px] flex-col gap-6">
+      <AudioPlayer src={SAMPLE_AUDIO} title="SoundHelix Song 1" artist="T. Schürger" />
+      <AudioPlayer variant="mini" src={SAMPLE_AUDIO} title="SoundHelix Song 1" artist="T. Schürger" />
+    </div>
+  );
+
+const meta = {
+  title: "Data Display/AudioPlayer",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<AudioPlayer src="/audio/song.mp3" title="Song 1" artist="Artist" />\n\n<AudioPlayer variant="mini" src="/audio/song.mp3" title="Song 1" artist="Artist" />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Avatar.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 { Avatar, AvatarFallback } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Avatar>
+      <AvatarFallback>KX</AvatarFallback>
+    </Avatar>
+  );
+
+const meta = {
+  title: "Data Display/Avatar",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Avatar>\n  <AvatarImage src="/avatar.png" alt="@kinetixui" />\n  <AvatarFallback>KX</AvatarFallback>\n</Avatar>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/AvatarGroup.stories.tsx

@@ -0,0 +1,37 @@
+/* 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, AvatarGroup } from "@kinetixui/ui";
+
+const Demo = () => (
+    <AvatarGroup max={3}>
+      <Avatar>
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarFallback>AK</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarFallback>MO</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarFallback>RS</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarFallback>TL</AvatarFallback>
+      </Avatar>
+    </AvatarGroup>
+  );
+
+const meta = {
+  title: "Data Display/AvatarGroup",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<AvatarGroup max={3}>\n  <Avatar><AvatarFallback>JD</AvatarFallback></Avatar>\n  <Avatar><AvatarFallback>AK</AvatarFallback></Avatar>\n  <Avatar><AvatarFallback>MO</AvatarFallback></Avatar>\n</AvatarGroup>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Badge.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 { Badge } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="flex flex-wrap gap-2">
+      <Badge>Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="subtle">Subtle</Badge>
+    </div>
+  );
+
+const meta = {
+  title: "Feedback/Badge",
+  component: Badge,
+  args: { variant: "default", children: "Badge" },
+  argTypes: {
+    variant: { control: "select", options: ["default", "secondary", "destructive", "outline", "subtle"] },
+    children: { control: "text" },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Badge>Default</Badge>\n<Badge variant="secondary">Secondary</Badge>\n<Badge variant="destructive">Destructive</Badge>\n<Badge variant="outline">Outline</Badge>\n<Badge variant="subtle">Subtle</Badge>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Badge {...args} /> };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Breadcrumb.stories.tsx

@@ -0,0 +1,36 @@
+/* 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 { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@kinetixui/ui";
+import { Home } from "lucide-react";
+
+const Demo = () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="/docs">Docs</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+
+const meta = {
+  title: "Navigation/Breadcrumb",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Breadcrumb>\n  <BreadcrumbList>\n    <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>\n    <BreadcrumbSeparator />\n    <BreadcrumbItem><BreadcrumbPage>Breadcrumb</BreadcrumbPage></BreadcrumbItem>\n  </BreadcrumbList>\n</Breadcrumb>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Calendar.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 { Calendar } from "@kinetixui/ui";
+
+const Demo = () => {
+    // no initial value: seeding with `new Date()` would bake "today" into the
+    // static build's server-rendered HTML, which then mismatches the client's
+    // own "today" the moment a day passes without a rebuild.
+    const [date, setDate] = React.useState<Date | undefined>();
+    return <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />;
+  };
+
+const meta = {
+  title: "Form Inputs/Calendar",
+  parameters: {
+    layout: "padded",
+    docs: { source: { code: `const [date, setDate] = React.useState<Date>()\n<Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Card.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 */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Card className="w-[320px]">
+      <CardHeader>
+        <CardTitle>Create project</CardTitle>
+        <CardDescription>Deploy your new project in one click.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Input placeholder="Project name" />
+      </CardContent>
+      <CardFooter className="justify-between">
+        <Button variant="Outline" size="sm">Cancel</Button>
+        <Button size="sm">Deploy</Button>
+      </CardFooter>
+    </Card>
+  );
+
+const meta = {
+  title: "Data Display/Card",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Card>\n  <CardHeader>\n    <CardTitle>Create project</CardTitle>\n    <CardDescription>Deploy your new project in one click.</CardDescription>\n  </CardHeader>\n  <CardContent>…</CardContent>\n  <CardFooter>…</CardFooter>\n</Card>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Carousel.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 */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Carousel className="w-full max-w-xs">
+      <CarouselContent>
+        {Array.from({ length: 5 }).map((_, i) => (
+          <CarouselItem key={i}>
+            <div className="flex aspect-square items-center justify-center rounded-lg border bg-muted text-3xl font-semibold">
+              {i + 1}
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+      <CarouselPrevious />
+      <CarouselNext />
+    </Carousel>
+  );
+
+const meta = {
+  title: "Data Display/Carousel",
+  parameters: {
+    layout: "padded",
+    docs: { source: { code: `<Carousel>\n  <CarouselContent>\n    {items.map((n) => <CarouselItem key={n}>{n}</CarouselItem>)}\n  </CarouselContent>\n  <CarouselPrevious />\n  <CarouselNext />\n</Carousel>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Chart.stories.tsx

@@ -0,0 +1,44 @@
+/* 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 { ChartContainer, ChartTooltip, ChartTooltipContent } from "@kinetixui/ui";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+
+const Demo = () => {
+    const data = [
+      { month: "Jan", desktop: 186, mobile: 80 },
+      { month: "Feb", desktop: 305, mobile: 200 },
+      { month: "Mar", desktop: 237, mobile: 120 },
+      { month: "Apr", desktop: 73, mobile: 190 },
+      { month: "May", desktop: 209, mobile: 130 },
+      { month: "Jun", desktop: 214, mobile: 140 },
+    ];
+    const config = {
+      desktop: { label: "Desktop", color: "hsl(var(--chart-1))" },
+      mobile: { label: "Mobile", color: "hsl(var(--chart-2))" },
+    };
+    return (
+      <ChartContainer config={config} className="min-h-[240px] w-full">
+        <BarChart accessibilityLayer data={data}>
+          <CartesianGrid vertical={false} />
+          <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+          <ChartTooltip content={<ChartTooltipContent />} />
+          <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+          <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+        </BarChart>
+      </ChartContainer>
+    );
+  };
+
+const meta = {
+  title: "Data Display/Chart",
+  parameters: {
+    layout: "padded",
+    docs: { source: { code: `const config = {\n  desktop: { label: "Desktop", color: "hsl(var(--chart-1))" },\n  mobile: { label: "Mobile", color: "hsl(var(--chart-2))" },\n}\n<ChartContainer config={config}>\n  <BarChart data={data}>\n    <CartesianGrid vertical={false} />\n    <XAxis dataKey="month" />\n    <ChartTooltip content={<ChartTooltipContent />} />\n    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />\n  </BarChart>\n</ChartContainer>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Checkbox.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 { Checkbox, Label } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="flex items-center gap-2">
+      <Checkbox id="c1" defaultChecked />
+      <Label htmlFor="c1">Accept terms and conditions</Label>
+    </div>
+  );
+
+const meta = {
+  title: "Form Inputs/Checkbox",
+  component: Checkbox,
+  args: { disabled: false, defaultChecked: false },
+  argTypes: { disabled: { control: "boolean" }, defaultChecked: { control: "boolean" } },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<div className="flex items-center gap-2">\n  <Checkbox id="c1" />\n  <Label htmlFor="c1">Accept terms and conditions</Label>\n</div>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Checkbox {...args} /> };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/CircularProgress.stories.tsx

@@ -0,0 +1,42 @@
+/* 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 { CircularProgress } from "@kinetixui/ui";
+
+const Demo = () => {
+    const [v, setV] = React.useState(25);
+    React.useEffect(() => {
+      const t = setInterval(() => setV((c) => (c >= 100 ? 25 : c + 5)), 400);
+      return () => clearInterval(t);
+    }, []);
+    return (
+      <div className="flex items-center gap-6">
+        <CircularProgress value={v} showValue />
+        <CircularProgress value={v} size={64} strokeWidth={6} showValue />
+        <CircularProgress value={v} />
+      </div>
+    );
+  };
+
+const meta = {
+  title: "Feedback/CircularProgress",
+  component: CircularProgress,
+  args: { value: 66, size: 48, strokeWidth: 4, showValue: true },
+  argTypes: {
+    value: { control: { type: "range", min: 0, max: 100 } },
+    size: { control: { type: "range", min: 24, max: 120 } },
+    strokeWidth: { control: { type: "range", min: 2, max: 12 } },
+    showValue: { control: "boolean" },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<CircularProgress value={66} showValue />\n<CircularProgress value={66} size={64} strokeWidth={6} showValue />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => <CircularProgress {...args} /> };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/CodeBlock.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 { Button, CodeBlock } from "@kinetixui/ui";
+
+const Demo = () => (
+    <CodeBlock
+      className="w-full max-w-lg"
+      filename="button.tsx"
+      code={`export function Button({ children }) {\n  return <button className="btn">{children}</button>;\n}`}
+    />
+  );
+
+const meta = {
+  title: "Foundations/CodeBlock",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<CodeBlock filename="button.tsx" code={source} />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Collapsible.stories.tsx

@@ -0,0 +1,50 @@
+/* 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, Collapsible, CollapsibleContent, CollapsibleTrigger, Toggle } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Collapsible className="w-full max-w-md space-y-2">
+      <div className="flex items-center justify-between rounded-md border px-4 py-2 text-sm">
+        @kinetixui starred 3 repositories
+        <CollapsibleTrigger asChild>
+          <Button variant="Ghost" size="sm">Toggle</Button>
+        </CollapsibleTrigger>
+      </div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border px-4 py-2 text-sm">@radix-ui/primitives</div>
+        <div className="rounded-md border px-4 py-2 text-sm">@stitches/react</div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+
+const meta = {
+  title: "Data Display/Collapsible",
+  component: Collapsible,
+  args: { defaultOpen: false, disabled: false },
+  argTypes: { defaultOpen: { control: "boolean" }, disabled: { control: "boolean" } },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Collapsible>\n  <CollapsibleTrigger>Toggle</CollapsibleTrigger>\n  <CollapsibleContent>…</CollapsibleContent>\n</Collapsible>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <Collapsible {...args} className="w-full max-w-md space-y-2">
+      <div className="flex items-center justify-between rounded-md border px-4 py-2 text-sm">
+        @kinetixui starred 3 repositories
+        <CollapsibleTrigger asChild>
+          <Button variant="Ghost" size="sm">Toggle</Button>
+        </CollapsibleTrigger>
+      </div>
+      <CollapsibleContent className="space-y-2">
+        <div className="rounded-md border px-4 py-2 text-sm">@radix-ui/primitives</div>
+        <div className="rounded-md border px-4 py-2 text-sm">@stitches/react</div>
+      </CollapsibleContent>
+    </Collapsible>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Combobox.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 { Command as Cmd, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@kinetixui/ui";
+import { Search } from "lucide-react";
+
+const Demo = () => (
+    <Cmd className="w-[240px] rounded-lg border">
+      <CommandInput placeholder="Search framework…" />
+      <CommandList>
+        <CommandEmpty>No framework found.</CommandEmpty>
+        <CommandGroup>
+          {["Next.js", "SvelteKit", "Nuxt", "Remix", "Astro"].map((f) => (
+            <CommandItem key={f}>{f}</CommandItem>
+          ))}
+        </CommandGroup>
+      </CommandList>
+    </Cmd>
+  );
+
+const meta = {
+  title: "Controls & Actions/Combobox",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `// Popover + Command\n<Popover>\n  <PopoverTrigger asChild><Button variant="Outline">Select framework…</Button></PopoverTrigger>\n  <PopoverContent className="p-0">\n    <Command>…</Command>\n  </PopoverContent>\n</Popover>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Command.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 { Calendar, Command as Cmd, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@kinetixui/ui";
+import { Search } from "lucide-react";
+
+const Demo = () => (
+    <Cmd className="max-w-[420px] rounded-lg border shadow-md">
+      <CommandInput placeholder="Type a command or search…" />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem>Calendar</CommandItem>
+          <CommandItem>Search Emoji</CommandItem>
+          <CommandItem>Launch</CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </Cmd>
+  );
+
+const meta = {
+  title: "Controls & Actions/Command",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Command>\n  <CommandInput placeholder="Type a command…" />\n  <CommandList>\n    <CommandEmpty>No results found.</CommandEmpty>\n    <CommandGroup heading="Suggestions">\n      <CommandItem>Calendar</CommandItem>\n    </CommandGroup>\n  </CommandList>\n</Command>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/ContextMenu.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 { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger } from "@kinetixui/ui";
+
+const Demo = () => (
+    <ContextMenu>
+      <ContextMenuTrigger className="flex h-32 w-64 items-center justify-center rounded-md border border-dashed text-sm">
+        Right-click here
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-52">
+        <ContextMenuItem>Back</ContextMenuItem>
+        <ContextMenuItem>Forward</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem>Reload</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+
+const meta = {
+  title: "Overlays/ContextMenu",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<ContextMenu>\n  <ContextMenuTrigger>Right-click here</ContextMenuTrigger>\n  <ContextMenuContent>\n    <ContextMenuItem>Back</ContextMenuItem>\n  </ContextMenuContent>\n</ContextMenu>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/DataTable.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 { DataTable } from "@kinetixui/ui";
+
+const Demo = () => {
+    const columns = [
+      { accessorKey: "invoice", header: "Invoice" },
+      { accessorKey: "status", header: "Status" },
+      { accessorKey: "amount", header: "Amount" },
+    ] as never;
+    const data = [
+      { invoice: "INV001", status: "Paid", amount: "$250.00" },
+      { invoice: "INV002", status: "Pending", amount: "$150.00" },
+      { invoice: "INV003", status: "Unpaid", amount: "$350.00" },
+    ];
+    return <DataTable columns={columns} data={data} pageSize={5} />;
+  };
+
+const meta = {
+  title: "Data Display/DataTable",
+  parameters: {
+    layout: "padded",
+    docs: { source: { code: `const columns: ColumnDef<Invoice>[] = [\n  { accessorKey: "invoice", header: "Invoice" },\n  { accessorKey: "amount", header: "Amount" },\n]\n<DataTable columns={columns} data={data} />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/DatePicker.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 { DatePicker } from "@kinetixui/ui";
+
+const Demo = () => {
+    const [date, setDate] = React.useState<Date | undefined>();
+    return (
+      <DatePicker
+        label="Appointment date"
+        value={date}
+        onChange={setDate}
+        helperText="Choose a weekday"
+        className="w-[280px]"
+      />
+    );
+  };
+
+const meta = {
+  title: "Form Inputs/DatePicker",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<DatePicker\n  label="Appointment date"\n  value={date}\n  onChange={setDate}\n  helperText="Choose a weekday"\n/>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Dialog.stories.tsx

@@ -0,0 +1,38 @@
+/* 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, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Input, Label } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant="Outline">Edit profile</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit profile</DialogTitle>
+          <DialogDescription>Make changes to your profile here.</DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-3 py-2">
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" defaultValue="KinetixUI" />
+        </div>
+        <DialogFooter>
+          <Button>Save changes</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+
+const meta = {
+  title: "Overlays/Dialog",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Dialog>\n  <DialogTrigger asChild><Button variant="Outline">Edit profile</Button></DialogTrigger>\n  <DialogContent>…</DialogContent>\n</Dialog>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };