@kinetixui/ui 0.1.0 → 0.4.0

package/src/stories/Drawer.stories.tsx

@@ -0,0 +1,39 @@
+/* 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, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant="Outline">Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className="mx-auto w-full max-w-sm">
+          <DrawerHeader>
+            <DrawerTitle>Move goal</DrawerTitle>
+            <DrawerDescription>Set your daily activity goal.</DrawerDescription>
+          </DrawerHeader>
+          <DrawerFooter>
+            <Button>Submit</Button>
+            <DrawerClose asChild>
+              <Button variant="Outline">Cancel</Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+
+const meta = {
+  title: "Overlays/Drawer",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Drawer>\n  <DrawerTrigger asChild><Button variant="Outline">Open Drawer</Button></DrawerTrigger>\n  <DrawerContent>…</DrawerContent>\n</Drawer>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/DropdownMenu.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 { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@kinetixui/ui";
+
+const Demo = () => (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="Outline">Open</Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="w-44">
+        <DropdownMenuLabel>My Account</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem>Profile</DropdownMenuItem>
+        <DropdownMenuItem>Billing</DropdownMenuItem>
+        <DropdownMenuItem>Team</DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+
+const meta = {
+  title: "Overlays/DropdownMenu",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<DropdownMenu>\n  <DropdownMenuTrigger asChild><Button variant="Outline">Open</Button></DropdownMenuTrigger>\n  <DropdownMenuContent>…</DropdownMenuContent>\n</DropdownMenu>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Fab.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 { Fab } from "@kinetixui/ui";
+import { Plus } from "lucide-react";
+
+const Demo = () => (
+    <div className="flex items-center gap-4">
+      <Fab aria-label="Add">
+        <Plus />
+      </Fab>
+      <Fab extended>
+        <Plus />
+        New item
+      </Fab>
+      <Fab variant="Secondary" size="sm" aria-label="Add">
+        <Plus />
+      </Fab>
+    </div>
+  );
+
+const meta = {
+  title: "Controls & Actions/Fab",
+  component: Fab,
+  args: { variant: "Primary", size: "default", extended: false },
+  argTypes: {
+    variant: { control: "inline-radio", options: ["Primary", "Secondary"] },
+    size: { control: "inline-radio", options: ["default", "sm"] },
+    extended: { control: "boolean" },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Fab aria-label="Add">\n  <Plus />\n</Fab>\n\n<Fab extended>\n  <Plus />\n  New item\n</Fab>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <Fab {...args} aria-label="Add">
+      <Plus />
+      {args.extended ? "New item" : null}
+    </Fab>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Field.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 */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Field, FieldControl, FieldDescription, FieldLabel, FieldMessage, Input } from "@kinetixui/ui";
+
+const Demo = () => {
+    const [v, setV] = React.useState("");
+    const invalid = v.length > 0 && !v.includes("@");
+    return (
+      <div className="w-full max-w-sm">
+        <Field invalid={invalid}>
+          <FieldLabel>Email</FieldLabel>
+          <FieldControl>
+            <Input value={v} onChange={(e) => setV(e.target.value)} placeholder="you@example.com" />
+          </FieldControl>
+          <FieldDescription>We&rsquo;ll only use it to send receipts.</FieldDescription>
+          {invalid && <FieldMessage intent="error">Enter a valid email address.</FieldMessage>}
+          {!invalid && v.includes("@") && <FieldMessage intent="success">Looks good.</FieldMessage>}
+        </Field>
+      </div>
+    );
+  };
+
+const meta = {
+  title: "Form Inputs/Field",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Field invalid={!!error}>\n  <FieldLabel>Email</FieldLabel>\n  <FieldControl><Input type="email" {...register("email")} /></FieldControl>\n  <FieldDescription>We'll only use it to send receipts.</FieldDescription>\n  {error && <FieldMessage intent="error">{error.message}</FieldMessage>}\n</Field>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/FileUpload.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 { FileUpload } from "@kinetixui/ui";
+
+const Demo = () => {
+    const [files, setFiles] = React.useState([
+      { id: "1", name: "passport-scan.pdf", size: 245_000, status: "uploaded" as const },
+      { id: "2", name: "photo.png", size: 1_200_000, status: "error" as const, error: "File exceeds 1 MB limit" },
+    ]);
+    return (
+      <FileUpload
+        className="w-full max-w-sm"
+        multiple
+        helperText="PDF, PNG up to 5 MB"
+        files={files}
+        onFilesSelected={(picked) =>
+          setFiles((f) => [...f, ...picked.map((p, i) => ({ id: `new-${i}-${p.name}`, name: p.name, size: p.size, status: "uploaded" as const }))])
+        }
+        onRemove={(id) => setFiles((f) => f.filter((x) => x.id !== id))}
+      />
+    );
+  };
+
+const meta = {
+  title: "Form Inputs/FileUpload",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<FileUpload\n  multiple\n  files={files}\n  onFilesSelected={(picked) => upload(picked)}\n  onRemove={(id) => removeFile(id)}\n/>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Footer.stories.tsx

@@ -0,0 +1,39 @@
+/* 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 { Footer, FooterBottom, FooterColumn, FooterLink } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Footer className="w-full max-w-lg rounded-md">
+      <div className="grid grid-cols-2 gap-6">
+        <FooterColumn title="Product">
+          <FooterLink href="#">Overview</FooterLink>
+          <FooterLink href="#">Pricing</FooterLink>
+        </FooterColumn>
+        <FooterColumn title="Company">
+          <FooterLink href="#">About</FooterLink>
+          <FooterLink href="#">Careers</FooterLink>
+        </FooterColumn>
+      </div>
+      <FooterBottom>
+        <span>© 2026 Acme Inc.</span>
+        <div className="flex gap-3">
+          <FooterLink href="#">Privacy</FooterLink>
+          <FooterLink href="#">Terms</FooterLink>
+        </div>
+      </FooterBottom>
+    </Footer>
+  );
+
+const meta = {
+  title: "Data Display/Footer",
+  parameters: {
+    layout: "padded",
+    docs: { source: { code: `<Footer>\n  <div className="grid grid-cols-2 gap-6">\n    <FooterColumn title="Product">\n      <FooterLink href="/pricing">Pricing</FooterLink>\n    </FooterColumn>\n  </div>\n  <FooterBottom>© 2026 Acme Inc.</FooterBottom>\n</Footer>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Form.stories.tsx

@@ -0,0 +1,28 @@
+/* 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, Input } from "@kinetixui/ui";
+
+const Demo = () => (
+    <form className="w-full max-w-sm space-y-4" onSubmit={(e) => e.preventDefault()}>
+      <div className="grid gap-2">
+        <label htmlFor="fd-user" className="text-sm font-medium">Username</label>
+        <Input id="fd-user" placeholder="kinetixui" />
+        <p className="text-sm text-muted-foreground">This is your public display name.</p>
+      </div>
+      <Button type="submit">Submit</Button>
+    </form>
+  );
+
+const meta = {
+  title: "Form Inputs/Form",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `const form = useForm<z.infer<typeof schema>>({ resolver: zodResolver(schema) })\n\n<Form {...form}>\n  <form onSubmit={form.handleSubmit(onSubmit)}>\n    <FormField control={form.control} name="username" render={({ field }) => (\n      <FormItem>\n        <FormLabel>Username</FormLabel>\n        <FormControl><Input {...field} /></FormControl>\n        <FormMessage />\n      </FormItem>\n    )} />\n    <Button type="submit">Submit</Button>\n  </form>\n</Form>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/HoverCard.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 { Button, HoverCard, HoverCardContent, HoverCardTrigger } from "@kinetixui/ui";
+
+const Demo = () => (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button variant="Link">@kinetixui</Button>
+      </HoverCardTrigger>
+      <HoverCardContent>One token architecture, in motion across every platform.</HoverCardContent>
+    </HoverCard>
+  );
+
+const meta = {
+  title: "Overlays/HoverCard",
+  component: HoverCard,
+  args: { openDelay: 200, closeDelay: 200 },
+  argTypes: {
+    openDelay: { control: { type: "number", step: 100 } },
+    closeDelay: { control: { type: "number", step: 100 } },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<HoverCard>\n  <HoverCardTrigger>@kinetixui</HoverCardTrigger>\n  <HoverCardContent>…</HoverCardContent>\n</HoverCard>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <HoverCard {...args}>
+      <HoverCardTrigger asChild>
+        <Button variant="Link">@kinetixui</Button>
+      </HoverCardTrigger>
+      <HoverCardContent>One token architecture, in motion across every platform.</HoverCardContent>
+    </HoverCard>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Image.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 { Image } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="grid w-full max-w-md grid-cols-3 gap-3">
+      <Image ratio="1:1" src="https://picsum.photos/seed/kx1/400" alt="" />
+      <Image ratio="4:3" src="https://picsum.photos/seed/kx2/400/300" alt="" />
+      <Image ratio="3:4" src="https://picsum.photos/seed/kx3/300/400" alt="" />
+    </div>
+  );
+
+const meta = {
+  title: "Foundations/Image",
+  component: Image,
+  args: { ratio: "4:3", rounded: true },
+  argTypes: {
+    ratio: { control: "inline-radio", options: ["1:1", "4:3", "3:4", "16:9"] },
+    rounded: { control: "boolean" },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Image ratio="1:1" src="/photo.jpg" alt="" />\n<Image ratio="4:3" src="/photo.jpg" alt="" />\n<Image ratio="16:9" src="/photo.jpg" alt="" rounded={false} />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <Image {...args} src="https://picsum.photos/seed/kx/400/300" alt="" className="w-56" />
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Inform.stories.tsx

@@ -0,0 +1,39 @@
+/* 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 { Inform } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="flex w-full max-w-md flex-col gap-3">
+      <Inform variant="information" onDismiss={() => {}}>
+        A new software update is available.
+      </Inform>
+      <Inform variant="success">Your changes have been saved.</Inform>
+      <Inform variant="warning">Your subscription expires in 3 days.</Inform>
+      <Inform variant="error" action={{ label: "Retry" }}>
+        We couldn&rsquo;t process your payment.
+      </Inform>
+    </div>
+  );
+
+const meta = {
+  title: "Feedback/Inform",
+  component: Inform,
+  args: { variant: "information" },
+  argTypes: {
+    variant: { control: "inline-radio", options: ["information", "warning", "success", "error"] },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Inform variant="information" onDismiss={close}>\n  A new software update is available.\n</Inform>\n\n<Inform variant="error" action={{ label: "Retry", onClick: retry }}>\n  We couldn't process your payment.\n</Inform>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <Inform {...args} className="max-w-md">A new software update is available.</Inform>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/InputGroup.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 { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from "@kinetixui/ui";
+import { Search } from "lucide-react";
+
+const Demo = () => (
+    <div className="flex w-full max-w-sm flex-col gap-3">
+      <InputGroup>
+        <InputGroupText>https://</InputGroupText>
+        <InputGroupInput placeholder="kinetixui.com" />
+      </InputGroup>
+      <InputGroup>
+        <InputGroupAddon align="start">$</InputGroupAddon>
+        <InputGroupInput placeholder="0.00" inputMode="decimal" />
+        <InputGroupText>USD</InputGroupText>
+      </InputGroup>
+      <InputGroup>
+        <InputGroupInput placeholder="Search components…" />
+        <InputGroupButton>Search</InputGroupButton>
+      </InputGroup>
+    </div>
+  );
+
+const meta = {
+  title: "Form Inputs/InputGroup",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<InputGroup>\n  <InputGroupText>https://</InputGroupText>\n  <InputGroupInput placeholder="kinetixui.com" />\n</InputGroup>\n\n<InputGroup>\n  <InputGroupAddon align="start">$</InputGroupAddon>\n  <InputGroupInput placeholder="0.00" />\n  <InputGroupText>USD</InputGroupText>\n</InputGroup>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/InputOTP.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 { InputOTP, InputOTPGroup, InputOTPSlot } from "@kinetixui/ui";
+
+const Demo = () => (
+    <InputOTP maxLength={6}>
+      <InputOTPGroup>
+        {Array.from({ length: 6 }).map((_, i) => (
+          <InputOTPSlot key={i} index={i} />
+        ))}
+      </InputOTPGroup>
+    </InputOTP>
+  );
+
+const meta = {
+  title: "Form Inputs/InputOTP",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<InputOTP maxLength={6}>\n  <InputOTPGroup>\n    <InputOTPSlot index={0} />\n    ...\n    <InputOTPSlot index={5} />\n  </InputOTPGroup>\n</InputOTP>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Label.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 */
+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="terms" />
+      <Label htmlFor="terms">Accept terms and conditions</Label>
+    </div>
+  );
+
+const meta = {
+  title: "Foundations/Label",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Label htmlFor="email">Your email address</Label>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/List.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 { Badge, List, ListItem, Switch } from "@kinetixui/ui";
+import { Bell, Settings, User } from "lucide-react";
+
+const Demo = () => (
+    <List className="w-full max-w-sm rounded-md border">
+      <ListItem leading={<User className="size-5 text-muted-foreground" />} title="Profile" description="Name, photo, and personal details" trailing={<Badge variant="outline">2</Badge>} onSelect={() => {}} />
+      <ListItem leading={<Bell className="size-5 text-muted-foreground" />} title="Notifications" description="Push, email and SMS preferences" trailing={<Switch />} />
+      <ListItem leading={<Settings className="size-5 text-muted-foreground" />} title="Settings" onSelect={() => {}} />
+    </List>
+  );
+
+const meta = {
+  title: "Data Display/List",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<List>\n  <ListItem\n    leading={<User />}\n    title="Profile"\n    description="Name, photo, and personal details"\n    onSelect={() => router.push("/profile")}\n  />\n  <ListItem leading={<Bell />} title="Notifications" trailing={<Switch />} />\n</List>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Menubar.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 { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Menubar>
+      <MenubarMenu>
+        <MenubarTrigger>File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>New Tab</MenubarItem>
+          <MenubarItem>New Window</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Share</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+      <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem>Undo</MenubarItem>
+          <MenubarItem>Redo</MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  );
+
+const meta = {
+  title: "Navigation/Menubar",
+  parameters: {
+    layout: "padded",
+    docs: { source: { code: `<Menubar>\n  <MenubarMenu>\n    <MenubarTrigger>File</MenubarTrigger>\n    <MenubarContent>\n      <MenubarItem>New Tab</MenubarItem>\n    </MenubarContent>\n  </MenubarMenu>\n</Menubar>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Metric.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 · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Metric } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="grid w-full max-w-lg grid-cols-2 gap-4">
+      <Metric label="Active users" value="2,420" trend="up" change="12%" />
+      <Metric label="Churn rate" value="1.2%" trend="down" change="0.3%" />
+    </div>
+  );
+
+const meta = {
+  title: "Feedback/Metric",
+  component: Metric,
+  args: { label: "Active users", value: "2,420", trend: "up", change: "12%" },
+  argTypes: {
+    trend: { control: "inline-radio", options: ["up", "down", "neutral"] },
+    label: { control: "text" }, value: { control: "text" }, change: { control: "text" },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Metric label="Active users" value="2,420" trend="up" change="12%" />`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Metric {...args} /> };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Modal.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, Dialog, Modal } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="flex flex-wrap gap-3">
+      {(["Info", "Confirmation", "Warning", "Destructive"] as const).map((type) => (
+        <Modal
+          key={type}
+          type={type}
+          title={`${type} dialog`}
+          description="Dialog description text — this modal is the design-source composition (header · divider · body · divider · footer)."
+          trigger={<Button variant="Outline">{type}</Button>}
+        />
+      ))}
+    </div>
+  );
+
+const meta = {
+  title: "Overlays/Modal",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Modal\n  type="Confirmation"\n  title="Are you sure?"\n  description="This action cannot be undone."\n  trigger={<Button variant="Outline">Delete</Button>}\n  onAction={handleDelete}\n/>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/NavigationBar.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 { NavigationBar } from "@kinetixui/ui";
+import { Search } from "lucide-react";
+
+const Demo = () => (
+    <NavigationBar
+      className="w-full max-w-md rounded-md"
+      title="Appointments"
+      infoText="3 upcoming"
+      onBack={() => {}}
+      actions={
+        <button type="button" aria-label="Search" className="flex size-9 items-center justify-center rounded-full hover:bg-accent">
+          <Search className="size-5" />
+        </button>
+      }
+    />
+  );
+
+const meta = {
+  title: "Navigation/NavigationBar",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<NavigationBar\n  title="Appointments"\n  infoText="3 upcoming"\n  onBack={() => router.back()}\n  actions={<Button variant="Ghost" size="icon"><Search /></Button>}\n/>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };