@kinetixui/ui 0.1.0 → 0.4.0

package/src/stories/Stepper.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 { Stepper } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="flex w-full max-w-lg flex-col gap-8">
+      <Stepper
+        current={1}
+        steps={[{ label: "Account" }, { label: "Profile" }, { label: "Review" }]}
+      />
+      <Stepper
+        orientation="vertical"
+        current={1}
+        steps={[
+          { label: "Order placed", description: "We've received your order." },
+          { label: "Processing", description: "Your order is being prepared." },
+          { label: "Shipped", description: "On its way to you." },
+        ]}
+      />
+    </div>
+  );
+
+const meta = {
+  title: "Navigation/Stepper",
+  parameters: {
+    layout: "padded",
+    docs: { source: { code: `<Stepper\n  current={1}\n  steps={[{ label: "Account" }, { label: "Profile" }, { label: "Review" }]}\n/>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Switch.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 { Label, Switch } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="flex items-center gap-2">
+      <Switch id="airplane" />
+      <Label htmlFor="airplane">Airplane mode</Label>
+    </div>
+  );
+
+const meta = {
+  title: "Form Inputs/Switch",
+  component: Switch,
+  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  <Switch id="airplane" />\n  <Label htmlFor="airplane">Airplane mode</Label>\n</div>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Switch {...args} /> };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/TabBar.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 { TabBar, TabBarItem } from "@kinetixui/ui";
+import { Home, Mail, Search, User } from "lucide-react";
+
+const Demo = () => {
+    const [active, setActive] = React.useState("home");
+    const items = [
+      { key: "home", icon: <Home />, label: "Home" },
+      { key: "search", icon: <Search />, label: "Search" },
+      { key: "mail", icon: <Mail />, label: "Mail", badge: 3 },
+      { key: "profile", icon: <User />, label: "Profile" },
+    ];
+    return (
+      <TabBar className="w-full max-w-sm rounded-md">
+        {items.map((it) => (
+          <TabBarItem key={it.key} icon={it.icon} label={it.label} badge={it.badge} active={active === it.key} onClick={() => setActive(it.key)} />
+        ))}
+      </TabBar>
+    );
+  };
+
+const meta = {
+  title: "Navigation/TabBar",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<TabBar>\n  <TabBarItem icon={<Home />} label="Home" active={tab === "home"} onClick={() => setTab("home")} />\n  <TabBarItem icon={<Mail />} label="Mail" badge={3} active={tab === "mail"} onClick={() => setTab("mail")} />\n</TabBar>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Table.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 */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Invoice</TableHead>
+          <TableHead>Status</TableHead>
+          <TableHead className="text-right">Amount</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {[
+          ["INV001", "Paid", "$250.00"],
+          ["INV002", "Pending", "$150.00"],
+          ["INV003", "Unpaid", "$350.00"],
+        ].map((r) => (
+          <TableRow key={r[0]}>
+            <TableCell className="font-medium">{r[0]}</TableCell>
+            <TableCell>{r[1]}</TableCell>
+            <TableCell className="text-right">{r[2]}</TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+
+const meta = {
+  title: "Data Display/Table",
+  parameters: {
+    layout: "padded",
+    docs: { source: { code: `<Table>\n  <TableHeader>…</TableHeader>\n  <TableBody>\n    <TableRow><TableCell>INV001</TableCell>…</TableRow>\n  </TableBody>\n</Table>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/TableOfContents.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 { TableOfContents } from "@kinetixui/ui";
+
+const Demo = () => (
+    <TableOfContents
+      className="w-full max-w-xs"
+      active="props"
+      items={[
+        { id: "overview", label: "Overview", level: 1 },
+        { id: "installation", label: "Installation", level: 1 },
+        { id: "usage", label: "Usage", level: 1 },
+        { id: "props", label: "Props", level: 2 },
+        { id: "examples", label: "Examples", level: 2 },
+      ]}
+    />
+  );
+
+const meta = {
+  title: "Navigation/TableOfContents",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<TableOfContents\n  active={activeId}\n  items={[{ id: "overview", label: "Overview" }, { id: "props", label: "Props", level: 2 }]}\n/>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Tabs.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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Tabs defaultValue="account" className="w-[360px]">
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account" className="text-sm text-muted-foreground">
+        Make changes to your account here.
+      </TabsContent>
+      <TabsContent value="password" className="text-sm text-muted-foreground">
+        Change your password here.
+      </TabsContent>
+    </Tabs>
+  );
+
+const meta = {
+  title: "Navigation/Tabs",
+  component: Tabs,
+  args: { defaultValue: "account" },
+  argTypes: { defaultValue: { control: "inline-radio", options: ["account", "password"] } },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Tabs defaultValue="account">\n  <TabsList>\n    <TabsTrigger value="account">Account</TabsTrigger>\n    <TabsTrigger value="password">Password</TabsTrigger>\n  </TabsList>\n  <TabsContent value="account">…</TabsContent>\n</Tabs>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <Tabs {...args} className="w-[360px]">
+      <TabsList className="grid w-full grid-cols-2">
+        <TabsTrigger value="account">Account</TabsTrigger>
+        <TabsTrigger value="password">Password</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account" className="text-sm text-muted-foreground">
+        Make changes to your account here.
+      </TabsContent>
+      <TabsContent value="password" className="text-sm text-muted-foreground">
+        Change your password here.
+      </TabsContent>
+    </Tabs>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Tag.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 { Tag } from "@kinetixui/ui";
+
+const Demo = () => {
+    const [tags, setTags] = React.useState(["design", "tokens", "figma"]);
+    return (
+      <div className="flex flex-wrap items-center gap-2">
+        {tags.map((t) => (
+          <Tag key={t} onRemove={() => setTags((cur) => cur.filter((x) => x !== t))}>
+            {t}
+          </Tag>
+        ))}
+        <Tag variant="secondary">secondary</Tag>
+        <Tag variant="destructive">destructive</Tag>
+        <Tag variant="warning">warning</Tag>
+        <Tag variant="outline">outline</Tag>
+      </div>
+    );
+  };
+
+const meta = {
+  title: "Feedback/Tag",
+  component: Tag,
+  args: { variant: "default", children: "tag" },
+  argTypes: {
+    variant: { control: "select", options: ["default", "secondary", "destructive", "warning", "outline"] },
+    children: { control: "text" },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Tag onRemove={() => remove(t)}>{t}</Tag>\n<Tag variant="secondary">secondary</Tag>\n<Tag variant="warning">warning</Tag>\n<Tag variant="outline">outline</Tag>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => <Tag {...args} /> };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Toggle.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 · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toggle } from "@kinetixui/ui";
+import { Italic } from "lucide-react";
+
+const Demo = () => (
+    <Toggle aria-label="Toggle italic">
+      <Italic className="size-4" />
+    </Toggle>
+  );
+
+const meta = {
+  title: "Controls & Actions/Toggle",
+  component: Toggle,
+  args: { variant: "default", size: "default" },
+  argTypes: {
+    variant: { control: "inline-radio", options: ["default", "outline"] },
+    size: { control: "inline-radio", options: ["default", "sm", "lg"] },
+  },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<Toggle aria-label="Toggle italic"><Italic className="size-4" /></Toggle>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <Toggle {...args} aria-label="Toggle italic"><Italic className="size-4" /></Toggle>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/ToggleGroup.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 · controls: scripts/gen-stories.mjs CONTROLS */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ToggleGroup, ToggleGroupItem } from "@kinetixui/ui";
+import { Bold, Italic, Underline } from "lucide-react";
+
+const Demo = () => (
+    <ToggleGroup type="multiple">
+      <ToggleGroupItem value="bold"><Bold className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="italic"><Italic className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="underline"><Underline className="size-4" /></ToggleGroupItem>
+    </ToggleGroup>
+  );
+
+const meta = {
+  title: "Controls & Actions/ToggleGroup",
+  component: ToggleGroup,
+  args: { type: "multiple" },
+  argTypes: { type: { control: "inline-radio", options: ["single", "multiple"] } },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<ToggleGroup type="multiple">\n  <ToggleGroupItem value="bold"><Bold /></ToggleGroupItem>\n  <ToggleGroupItem value="italic"><Italic /></ToggleGroupItem>\n</ToggleGroup>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <ToggleGroup {...args}>
+      <ToggleGroupItem value="bold"><Bold className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="italic"><Italic className="size-4" /></ToggleGroupItem>
+      <ToggleGroupItem value="underline"><Underline className="size-4" /></ToggleGroupItem>
+    </ToggleGroup>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Tooltip.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 { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@kinetixui/ui";
+
+const Demo = () => (
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button variant="Outline">Hover</Button>
+        </TooltipTrigger>
+        <TooltipContent>Add to library</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+
+const meta = {
+  title: "Overlays/Tooltip",
+  component: Tooltip,
+  args: { delayDuration: 200 },
+  argTypes: { delayDuration: { control: { type: "number", step: 100 } } },
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: `<TooltipProvider>\n  <Tooltip>\n    <TooltipTrigger asChild><Button variant="Outline">Hover</Button></TooltipTrigger>\n    <TooltipContent>Add to library</TooltipContent>\n  </Tooltip>\n</TooltipProvider>`, language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Playground: StoryObj<typeof meta> = { render: (args) => (
+    <TooltipProvider>
+      <Tooltip {...args}>
+        <TooltipTrigger asChild>
+          <Button variant="Outline">Hover</Button>
+        </TooltipTrigger>
+        <TooltipContent>Add to library</TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  ) };
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };