@kinetixui/ui 0.10.0 → 0.12.0

package/src/stories/MessageBubble.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-vite";
+import { MessageBubble, TypingIndicator } from "@kinetixui/ui";
+
+const Demo = () => (
+    <div className="flex w-full max-w-sm flex-col gap-1.5">
+      <MessageBubble variant="received" timestamp="10:42 AM">
+        Hey, are we still on for tomorrow?
+      </MessageBubble>
+      <MessageBubble variant="sent" timestamp="10:43 AM" status="read">
+        Yep! See you at 3.
+      </MessageBubble>
+      <MessageBubble variant="sent" grouped status="delivered">
+        I&rsquo;ll bring the slides.
+      </MessageBubble>
+      <TypingIndicator className="mt-1" />
+    </div>
+  );
+
+const meta = {
+  title: "Data Display/MessageBubble",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<MessageBubble variant=\"received\" timestamp=\"10:42 AM\">\\n  Hey, are we still on for tomorrow?\\n</MessageBubble>\\n<MessageBubble variant=\"sent\" timestamp=\"10:43 AM\" status=\"read\">\\n  Yep! See you at 3.\\n</MessageBubble>\\n<TypingIndicator />", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/MultiSelect.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-vite";
+import { MultiSelect, Select } from "@kinetixui/ui";
+
+const Demo = () => {
+    const [value, setValue] = React.useState(["react", "swiftui"]);
+    return (
+      <MultiSelect
+        className="w-full max-w-sm"
+        value={value}
+        onValueChange={setValue}
+        placeholder="Select platforms…"
+        options={[
+          { value: "react", label: "React" },
+          { value: "swiftui", label: "SwiftUI" },
+          { value: "compose", label: "Jetpack Compose" },
+          { value: "flutter", label: "Flutter" },
+        ]}
+      />
+    );
+  };
+
+const meta = {
+  title: "Form Inputs/MultiSelect",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<MultiSelect\\n  value={value}\\n  onValueChange={setValue}\\n  placeholder=\"Select platforms…\"\\n  options={[\\n    { value: \"react\", label: \"React\" },\\n    { value: \"swiftui\", label: \"SwiftUI\" },\\n  ]}\\n/>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/NotificationCenter.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 */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { NotificationCenter, NotificationCenterContent, NotificationCenterTrigger, NotificationItem, PageHeader } from "@kinetixui/ui";
+
+const Demo = () => {
+    const [unread, setUnread] = React.useState(2);
+    return (
+      <NotificationCenter>
+        <NotificationCenterTrigger unreadCount={unread} />
+        <NotificationCenterContent onMarkAllRead={() => setUnread(0)}>
+          <NotificationItem
+            unread={unread > 0}
+            title="PR #106 merged"
+            description="feat(ui): add PageHeader"
+            time="2m ago"
+          />
+          <NotificationItem
+            unread={unread > 1}
+            title="Deploy succeeded"
+            description="v0.11.0 is live"
+            time="1h ago"
+          />
+          <NotificationItem title="Welcome to KinetixUI" time="2d ago" />
+        </NotificationCenterContent>
+      </NotificationCenter>
+    );
+  };
+
+const meta = {
+  title: "Overlays/NotificationCenter",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<NotificationCenter>\\n  <NotificationCenterTrigger unreadCount={2} />\\n  <NotificationCenterContent onMarkAllRead={markAllRead}>\\n    <NotificationItem unread title=\"PR #106 merged\" time=\"2m ago\" />\\n    <NotificationItem title=\"Welcome to KinetixUI\" time=\"2d ago\" />\\n  </NotificationCenterContent>\\n</NotificationCenter>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/PageHeader.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 */
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, PageHeader } from "@kinetixui/ui";
+import { Settings } from "lucide-react";
+
+const Demo = () => (
+    <PageHeader
+      className="w-full"
+      breadcrumb={
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="#">Projects</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>KinetixUI</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      }
+      title="KinetixUI"
+      description="One token architecture, in motion across every platform."
+      actions={
+        <>
+          <Button variant="Outline" size="sm">
+            Settings
+          </Button>
+          <Button size="sm">Deploy</Button>
+        </>
+      }
+    />
+  );
+
+const meta = {
+  title: "Navigation/PageHeader",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<PageHeader\\n  breadcrumb={<Breadcrumb>...</Breadcrumb>}\\n  title=\"KinetixUI\"\\n  description=\"One token architecture, in motion across every platform.\"\\n  actions={<><Button variant=\"Outline\" size=\"sm\">Settings</Button><Button size=\"sm\">Deploy</Button></>}\\n/>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Tour.stories.tsx

@@ -0,0 +1,70 @@
+/* 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-vite";
+import { Button, Tour } from "@kinetixui/ui";
+import { Settings } from "lucide-react";
+
+const Demo = () => {
+    const [open, setOpen] = React.useState(false);
+    const [stepIndex, setStepIndex] = React.useState(0);
+    return (
+      <div className="flex w-full flex-col items-start gap-4">
+        <Button
+          size="sm"
+          onClick={() => {
+            setStepIndex(0);
+            setOpen(true);
+          }}
+        >
+          Start tour
+        </Button>
+        <div className="flex items-center gap-3">
+          <Button data-tour-demo="save" variant="Outline" size="sm">
+            Save
+          </Button>
+          <Button data-tour-demo="share" variant="Outline" size="sm">
+            Share
+          </Button>
+          <Button data-tour-demo="settings" variant="Ghost" size="icon" aria-label="Settings">
+            <Settings className="size-4" />
+          </Button>
+        </div>
+        <Tour
+          open={open}
+          onOpenChange={setOpen}
+          stepIndex={stepIndex}
+          onStepIndexChange={setStepIndex}
+          steps={[
+            {
+              target: '[data-tour-demo="save"]',
+              title: "Save your work",
+              content: "Changes save automatically, but you can force a save here.",
+            },
+            {
+              target: '[data-tour-demo="share"]',
+              title: "Invite others",
+              content: "Share this project with your team.",
+            },
+            {
+              target: '[data-tour-demo="settings"]',
+              title: "Fine-tune settings",
+              content: "Adjust preferences for this workspace.",
+            },
+          ]}
+        />
+      </div>
+    );
+  };
+
+const meta = {
+  title: "Overlays/Tour",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<Tour\\n  open={open}\\n  onOpenChange={setOpen}\\n  stepIndex={stepIndex}\\n  onStepIndexChange={setStepIndex}\\n  steps={[\\n    { target: '[data-tour=\"save\"]', title: \"Save your work\", content: \"…\" },\\n    { target: '[data-tour=\"share\"]', title: \"Invite others\", content: \"…\" },\\n  ]}\\n/>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/TreeView.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-vite";
+import { TreeItem, TreeView } from "@kinetixui/ui";
+
+const Demo = () => {
+    const [selected, setSelected] = React.useState("button.tsx");
+    return (
+      <TreeView
+        className="w-full max-w-xs"
+        selected={selected}
+        onSelectedChange={setSelected}
+        defaultExpanded={["src", "src/components"]}
+      >
+        <TreeItem value="src" label="src">
+          <TreeItem value="src/components" label="components">
+            <TreeItem value="button.tsx" label="button.tsx" />
+            <TreeItem value="badge.tsx" label="badge.tsx" />
+          </TreeItem>
+          <TreeItem value="index.ts" label="index.ts" />
+        </TreeItem>
+        <TreeItem value="readme" label="README.md" />
+      </TreeView>
+    );
+  };
+
+const meta = {
+  title: "Navigation/TreeView",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<TreeView selected={selected} onSelectedChange={setSelected} defaultExpanded={[\"src\"]}>\\n  <TreeItem value=\"src\" label=\"src\">\\n    <TreeItem value=\"index.ts\" label=\"index.ts\" />\\n  </TreeItem>\\n  <TreeItem value=\"readme\" label=\"README.md\" />\\n</TreeView>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/VirtualList.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-vite";
+import { VirtualList } from "@kinetixui/ui";
+
+const Demo = () => {
+    const rows = React.useMemo(
+      () => Array.from({ length: 10000 }, (_, i) => ({ id: i, label: `Row ${i + 1}` })),
+      [],
+    );
+    return (
+      <VirtualList
+        className="w-full max-w-sm rounded-md border"
+        items={rows}
+        itemHeight={36}
+        height={280}
+        getItemKey={(row) => row.id}
+        renderItem={(row) => (
+          <div className="flex h-full items-center border-b px-3 text-sm">{row.label}</div>
+        )}
+      />
+    );
+  };
+
+const meta = {
+  title: "Data Display/VirtualList",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "const rows = Array.from({ length: 10000 }, (_, i) => ({ id: i, label: \\`Row \\${i + 1}\\` }));\\n\\n<VirtualList\\n  items={rows}\\n  itemHeight={36}\\n  height={280}\\n  getItemKey={(row) => row.id}\\n  renderItem={(row) => <div>{row.label}</div>}\\n/>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/tailwind.config.ts

@@ -127,11 +127,15 @@ export default {
         "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" } },
         "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" } },
         "caret-blink": { "0%,70%,100%": { opacity: "1" }, "20%,50%": { opacity: "0" } },
+        marquee: { from: { transform: "translateX(0)" }, to: { transform: "translateX(-50%)" } },
+        "typing-dot": { "0%,60%,100%": { transform: "translateY(0)", opacity: "0.4" }, "30%": { transform: "translateY(-3px)", opacity: "1" } },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         "caret-blink": "caret-blink 1.25s ease-out infinite",
+        marquee: "marquee var(--marquee-duration, 32s) linear infinite",
+        "typing-dot": "typing-dot 1.2s ease-in-out infinite",
       },
     },
   },