@kinetixui/ui 0.10.0 → 0.12.0

package/src/components/tree-view.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { Checkbox } from "./checkbox";
+import { cn } from "../lib/utils";
+
+/**
+ * TreeView / TreeItem — nested expand/collapse rows with keyboard roving
+ * tabindex and optional checkboxes. Sidebar/file/nav trees have no
+ * primitive today (`Sidebar` is flat); Radix has no tree component to
+ * build on, so this is hand-rolled: `role="treeitem"` sits on each
+ * item's own container (not a separate "row" element) so a nested
+ * item's `closest('[role="treeitem"]')` correctly walks up to its real
+ * ancestor rather than a sibling row, and visible items are queried live
+ * from the DOM on every arrow-key press — collapsed subtrees simply
+ * don't render, so that query is always exactly the visible, in-order
+ * item list with no separate registration bookkeeping to keep in sync.
+ * `checkable` checkboxes are independent per item — no automatic
+ * parent-selects-all-children / indeterminate propagation. A real,
+ * documented simplification, not a silent one. Gap-fill addition (not in
+ * the original Figma source).
+ */
+interface TreeViewContextValue {
+  isExpanded: (value: string) => boolean;
+  toggleExpanded: (value: string) => void;
+  selected?: string;
+  select: (value: string) => void;
+  checkable: boolean;
+  isChecked: (value: string) => boolean;
+  toggleChecked: (value: string) => void;
+  tabbableValue: string | null;
+  setTabbableValue: (value: string) => void;
+  firstValueRef: React.MutableRefObject<string | null>;
+}
+
+const TreeViewContext = React.createContext<TreeViewContextValue | null>(null);
+
+function useTreeViewContext() {
+  const ctx = React.useContext(TreeViewContext);
+  if (!ctx) throw new Error("TreeItem must be rendered inside a TreeView");
+  return ctx;
+}
+
+const TreeLevelContext = React.createContext(0);
+
+export interface TreeViewProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** show a checkbox on every item */
+  checkable?: boolean;
+  expanded?: string[];
+  defaultExpanded?: string[];
+  onExpandedChange?: (expanded: string[]) => void;
+  selected?: string;
+  onSelectedChange?: (value: string) => void;
+  checkedValues?: string[];
+  defaultCheckedValues?: string[];
+  onCheckedChange?: (checkedValues: string[]) => void;
+}
+
+const TreeView = React.forwardRef<HTMLDivElement, TreeViewProps>(
+  (
+    {
+      className,
+      checkable = false,
+      expanded,
+      defaultExpanded = [],
+      onExpandedChange,
+      selected,
+      onSelectedChange,
+      checkedValues,
+      defaultCheckedValues = [],
+      onCheckedChange,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);
+    const currentExpanded = expanded ?? internalExpanded;
+    const [internalChecked, setInternalChecked] = React.useState(defaultCheckedValues);
+    const currentChecked = checkedValues ?? internalChecked;
+    const [tabbableValue, setTabbableValue] = React.useState<string | null>(null);
+    const firstValueRef = React.useRef<string | null>(null);
+
+    const toggleExpanded = React.useCallback(
+      (value: string) => {
+        const next = currentExpanded.includes(value)
+          ? currentExpanded.filter((v) => v !== value)
+          : [...currentExpanded, value];
+        setInternalExpanded(next);
+        onExpandedChange?.(next);
+      },
+      [currentExpanded, onExpandedChange],
+    );
+
+    const toggleChecked = React.useCallback(
+      (value: string) => {
+        const next = currentChecked.includes(value)
+          ? currentChecked.filter((v) => v !== value)
+          : [...currentChecked, value];
+        setInternalChecked(next);
+        onCheckedChange?.(next);
+      },
+      [currentChecked, onCheckedChange],
+    );
+
+    const contextValue: TreeViewContextValue = {
+      isExpanded: (value) => currentExpanded.includes(value),
+      toggleExpanded,
+      selected,
+      select: (value) => onSelectedChange?.(value),
+      checkable,
+      isChecked: (value) => currentChecked.includes(value),
+      toggleChecked,
+      tabbableValue,
+      setTabbableValue,
+      firstValueRef,
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="tree"
+        aria-multiselectable={checkable || undefined}
+        className={cn("flex flex-col font-sans", className)}
+        {...props}
+      >
+        <TreeViewContext.Provider value={contextValue}>
+          <TreeLevelContext.Provider value={0}>{children}</TreeLevelContext.Provider>
+        </TreeViewContext.Provider>
+      </div>
+    );
+  },
+);
+TreeView.displayName = "TreeView";
+
+export interface TreeItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  value: string;
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+
+const TreeItem = React.forwardRef<HTMLDivElement, TreeItemProps>(
+  ({ className, value, label, icon, disabled, children, onClick, onKeyDown, ...props }, ref) => {
+    const ctx = useTreeViewContext();
+    const level = React.useContext(TreeLevelContext);
+    const hasChildren = React.Children.count(children) > 0;
+    const expanded = ctx.isExpanded(value);
+    const isChecked = ctx.isChecked(value);
+
+    if (ctx.firstValueRef.current === null) ctx.firstValueRef.current = value;
+    const isTabbable = (ctx.tabbableValue ?? ctx.firstValueRef.current) === value;
+
+    const localRef = React.useRef<HTMLDivElement>(null);
+    const setRefs = (node: HTMLDivElement | null) => {
+      localRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+    };
+
+    const activate = () => {
+      ctx.select(value);
+      if (ctx.checkable) ctx.toggleChecked(value);
+    };
+
+    const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (e) => {
+      onKeyDown?.(e);
+      if (e.defaultPrevented || disabled) return;
+      const root = localRef.current?.closest('[role="tree"]');
+      const items = root ? Array.from(root.querySelectorAll<HTMLElement>('[role="treeitem"]')) : [];
+      const idx = items.indexOf(e.currentTarget);
+
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          items[idx + 1]?.focus();
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          items[idx - 1]?.focus();
+          break;
+        case "Home":
+          e.preventDefault();
+          items[0]?.focus();
+          break;
+        case "End":
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          if (hasChildren && !expanded) ctx.toggleExpanded(value);
+          else if (hasChildren) items[idx + 1]?.focus();
+          break;
+        case "ArrowLeft":
+          e.preventDefault();
+          if (hasChildren && expanded) ctx.toggleExpanded(value);
+          else {
+            const parent = localRef.current?.parentElement?.closest<HTMLElement>('[role="treeitem"]');
+            parent?.focus();
+          }
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          activate();
+          break;
+      }
+    };
+
+    return (
+      <div
+        ref={setRefs}
+        role="treeitem"
+        aria-expanded={hasChildren ? expanded : undefined}
+        aria-selected={ctx.selected === value}
+        aria-disabled={disabled || undefined}
+        tabIndex={disabled ? undefined : isTabbable ? 0 : -1}
+        onFocus={() => ctx.setTabbableValue(value)}
+        onKeyDown={handleKeyDown}
+        onClick={(e) => {
+          onClick?.(e);
+          if (e.defaultPrevented || disabled) return;
+          activate();
+        }}
+        className={cn("outline-none", disabled && "pointer-events-none opacity-disabled", className)}
+        {...props}
+      >
+        <div
+          style={{ paddingLeft: level * 20 + 8 }}
+          className={cn(
+            "flex items-center gap-1.5 rounded-sm py-1.5 pr-2 text-body-sm text-foreground",
+            "hover:bg-accent",
+            ctx.selected === value && "bg-accent",
+            "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring",
+          )}
+        >
+          {hasChildren ? (
+            <ChevronRight
+              className={cn("size-4 shrink-0 text-muted-foreground transition-transform", expanded && "rotate-90")}
+              onClick={(e) => {
+                e.stopPropagation();
+                ctx.toggleExpanded(value);
+              }}
+            />
+          ) : (
+            <span className="size-4 shrink-0" />
+          )}
+          {ctx.checkable && (
+            <Checkbox
+              checked={isChecked}
+              onCheckedChange={() => ctx.toggleChecked(value)}
+              onClick={(e) => e.stopPropagation()}
+              tabIndex={-1}
+            />
+          )}
+          {icon}
+          <span className="truncate">{label}</span>
+        </div>
+        {hasChildren && expanded && (
+          <div role="group">
+            <TreeLevelContext.Provider value={level + 1}>{children}</TreeLevelContext.Provider>
+          </div>
+        )}
+      </div>
+    );
+  },
+);
+TreeItem.displayName = "TreeItem";
+
+export { TreeView, TreeItem };

package/src/components/virtual-list.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * VirtualList — a windowed-rendering primitive: only the rows visible in
+ * the scroll viewport (plus `overscan`) actually mount, so a list of
+ * thousands of items costs the same as rendering a couple dozen. Fixed
+ * row height only — variable-height virtualization needs a measurement
+ * pass per row (a real library's job, e.g. `@tanstack/react-virtual`),
+ * which is out of scope for this primitive. A prerequisite for `DataGrid`
+ * and any `Command`/`Combobox`/`Select` with a large option list. Gap-fill
+ * addition (not in the original Figma source).
+ */
+export interface VirtualListProps<T>
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  items: T[];
+  /** row height in px — every row is this tall */
+  itemHeight: number;
+  /** viewport height — a number (px) or any CSS height value */
+  height: number | string;
+  renderItem: (item: T, index: number) => React.ReactNode;
+  /** extra rows rendered above/below the viewport, to reduce blank flashes on fast scroll */
+  overscan?: number;
+  getItemKey?: (item: T, index: number) => React.Key;
+}
+
+function VirtualList<T>({
+  items,
+  itemHeight,
+  height,
+  renderItem,
+  overscan = 4,
+  getItemKey,
+  className,
+  style,
+  onScroll,
+  ...props
+}: VirtualListProps<T>) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [viewportHeight, setViewportHeight] = React.useState(typeof height === "number" ? height : 0);
+
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setViewportHeight(entry.contentRect.height);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  const totalHeight = items.length * itemHeight;
+  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
+  const visibleCount = Math.ceil(viewportHeight / itemHeight) + overscan * 2;
+  const endIndex = Math.min(items.length, startIndex + Math.max(visibleCount, 0));
+  const visibleItems = items.slice(startIndex, endIndex);
+
+  return (
+    <div
+      ref={containerRef}
+      role="list"
+      className={cn("overflow-y-auto font-sans", className)}
+      style={{ height, ...style }}
+      onScroll={(e) => {
+        onScroll?.(e);
+        setScrollTop(e.currentTarget.scrollTop);
+      }}
+      {...props}
+    >
+      <div style={{ height: totalHeight, position: "relative" }}>
+        {visibleItems.map((item, i) => {
+          const index = startIndex + i;
+          return (
+            <div
+              key={getItemKey ? getItemKey(item, index) : index}
+              role="listitem"
+              style={{ position: "absolute", top: index * itemHeight, left: 0, right: 0, height: itemHeight }}
+            >
+              {renderItem(item, index)}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export { VirtualList };

package/src/index.ts

@@ -351,5 +351,28 @@ export {
   type SegmentedControlProps,
 } from "./components/segmented-control";
 export { Timeline, type TimelineItem, type TimelineProps } from "./components/timeline";
+export { Marquee, type MarqueeProps } from "./components/marquee";
+export { ComparisonSlider, type ComparisonSliderProps } from "./components/comparison-slider";
+export { PageHeader, type PageHeaderProps } from "./components/page-header";
+export {
+  NotificationCenter,
+  NotificationCenterTrigger,
+  NotificationCenterContent,
+  NotificationItem,
+  type NotificationCenterTriggerProps,
+  type NotificationCenterContentProps,
+  type NotificationItemProps,
+} from "./components/notification-center";
+export { TreeView, TreeItem, type TreeViewProps, type TreeItemProps } from "./components/tree-view";
+export { MultiSelect, type MultiSelectOption, type MultiSelectProps } from "./components/multi-select";
+export { MessageBubble, TypingIndicator, type MessageBubbleProps } from "./components/message-bubble";
+export { Tour, type TourStep, type TourProps } from "./components/tour";
+export { VirtualList, type VirtualListProps } from "./components/virtual-list";
+export { DataGrid, type DataGridColumn, type DataGridProps } from "./components/data-grid";
+export { JsonViewer, type JsonViewerProps } from "./components/json-viewer";
+export { DiffViewer, type DiffViewerProps } from "./components/diff-viewer";
+export { ColorPicker, type ColorPickerProps } from "./components/color-picker";
+export { KanbanBoard, type KanbanBoardProps, type KanbanColumn, type KanbanCard } from "./components/kanban-board";
+export { MarkdownEditor, type MarkdownEditorProps } from "./components/markdown-editor";
 
 export { cn } from "./lib/utils";

package/src/stories/ColorPicker.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-vite";
+import { ColorPicker } from "@kinetixui/ui";
+
+const Demo = () => {
+    const [color, setColor] = React.useState("#3b82f6");
+    return (
+      <ColorPicker
+        value={color}
+        onChange={setColor}
+        swatches={["#ef4444", "#f97316", "#eab308", "#22c55e", "#3b82f6", "#8b5cf6", "#ec4899"]}
+      />
+    );
+  };
+
+const meta = {
+  title: "Form Inputs/ColorPicker",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<ColorPicker\\n  value={color}\\n  onChange={setColor}\\n  swatches={[\"#ef4444\", \"#f97316\", \"#eab308\", \"#22c55e\", \"#3b82f6\"]}\\n/>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/ComparisonSlider.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-vite";
+import { ComparisonSlider } from "@kinetixui/ui";
+
+const Demo = () => (
+    <ComparisonSlider
+      className="w-full max-w-md"
+      beforeLabel="Before"
+      afterLabel="After"
+      before={<div className="flex size-full items-center justify-center bg-muted text-body-sm text-muted-foreground">Original</div>}
+      after={<div className="flex size-full items-center justify-center bg-primary/15 text-body-sm text-primary">Redesign</div>}
+    />
+  );
+
+const meta = {
+  title: "Controls & Actions/ComparisonSlider",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<ComparisonSlider\\n  beforeLabel=\"Before\"\\n  afterLabel=\"After\"\\n  before={<img src=\"/before.jpg\" alt=\"\" />}\\n  after={<img src=\"/after.jpg\" alt=\"\" />}\\n/>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/DataGrid.stories.tsx

@@ -0,0 +1,54 @@
+/* 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 { DataGrid } from "@kinetixui/ui";
+
+const Demo = () => {
+    const rows = React.useMemo(
+      () =>
+        Array.from({ length: 2000 }, (_, i) => ({
+          id: i,
+          name: `Item ${i + 1}`,
+          category: ["Widgets", "Gadgets", "Gizmos"][i % 3],
+          qty: (i * 7) % 500,
+        })),
+      [],
+    );
+    const [data, setData] = React.useState(rows);
+    return (
+      <DataGrid
+        className="w-full"
+        height={280}
+        data={data}
+        getRowId={(row) => row.id}
+        columns={[
+          { id: "id", header: "ID", cell: (row) => row.id, value: (row) => row.id, sortable: true, width: 72, pinned: "left" },
+          {
+            id: "name",
+            header: "Name",
+            cell: (row) => row.name,
+            value: (row) => row.name,
+            sortable: true,
+            editable: true,
+            onCellEdit: (row, rowIndex, value) =>
+              setData((prev) => prev.map((r, i) => (i === rowIndex ? { ...r, name: value } : r))),
+          },
+          { id: "category", header: "Category", cell: (row) => row.category, value: (row) => row.category, sortable: true },
+          { id: "qty", header: "Qty", cell: (row) => row.qty, value: (row) => row.qty, sortable: true, width: 100 },
+        ]}
+      />
+    );
+  };
+
+const meta = {
+  title: "Data Display/DataGrid",
+  parameters: {
+    layout: "padded",
+    docs: { source: { code: "<DataGrid\\n  height={280}\\n  data={data}\\n  getRowId={(row) => row.id}\\n  columns={[\\n    { id: \"id\", header: \"ID\", cell: (row) => row.id, value: (row) => row.id, sortable: true, pinned: \"left\" },\\n    { id: \"name\", header: \"Name\", cell: (row) => row.name, value: (row) => row.name, editable: true, onCellEdit: updateName },\\n    { id: \"qty\", header: \"Qty\", cell: (row) => row.qty, value: (row) => row.qty, sortable: true },\\n  ]}\\n/>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/DiffViewer.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-vite";
+import { DiffViewer } from "@kinetixui/ui";
+
+const Demo = () => (
+    <DiffViewer
+      className="w-full max-w-md"
+      mode="split"
+      oldText={'{\n  "name": "kinetixui",\n  "version": "0.10.0",\n  "private": true\n}'}
+      newText={'{\n  "name": "kinetixui",\n  "version": "0.11.0",\n  "stable": false\n}'}
+    />
+  );
+
+const meta = {
+  title: "Data Display/DiffViewer",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<DiffViewer\\n  mode=\"split\"\\n  oldText={before}\\n  newText={after}\\n/>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/JsonViewer.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-vite";
+import { JsonViewer } from "@kinetixui/ui";
+
+const Demo = () => (
+    <JsonViewer
+      className="w-full max-w-md"
+      data={{
+        name: "kinetixui",
+        version: "0.11.0",
+        platforms: ["react", "swiftui", "compose", "flutter"],
+        stable: false,
+        tokens: { spacing: 8, radius: { sm: 4, md: 8 } },
+        deprecated: null,
+      }}
+    />
+  );
+
+const meta = {
+  title: "Data Display/JsonViewer",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<JsonViewer\\n  data={{\\n    name: \"kinetixui\",\\n    version: \"0.11.0\",\\n    platforms: [\"react\", \"swiftui\", \"compose\", \"flutter\"],\\n    stable: false,\\n  }}\\n/>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/KanbanBoard.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-vite";
+import { ColorPicker, DiffViewer, JsonViewer, KanbanBoard, Progress } from "@kinetixui/ui";
+
+const Demo = () => {
+    const [columns, setColumns] = React.useState<KanbanColumn[]>([
+      {
+        id: "todo",
+        title: "To Do",
+        cards: [
+          { id: "1", content: "Design the onboarding flow" },
+          { id: "2", content: "Write API docs for /r/registry.json" },
+        ],
+      },
+      {
+        id: "in-progress",
+        title: "In Progress",
+        cards: [{ id: "3", content: "Port ColorPicker to Compose" }],
+      },
+      {
+        id: "done",
+        title: "Done",
+        cards: [
+          { id: "4", content: "Ship DiffViewer" },
+          { id: "5", content: "Ship JsonViewer" },
+        ],
+      },
+    ]);
+    return <KanbanBoard columns={columns} onColumnsChange={setColumns} className="w-full" />;
+  };
+
+const meta = {
+  title: "Data Display/KanbanBoard",
+  parameters: {
+    layout: "padded",
+    docs: { source: { code: "<KanbanBoard\\n  columns={columns}\\n  onColumnsChange={setColumns}\\n/>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/MarkdownEditor.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-vite";
+import { MarkdownEditor } from "@kinetixui/ui";
+import { Bold } from "lucide-react";
+
+const Demo = () => {
+    const [text, setText] = React.useState(
+      "## Release notes\n\nShipped **MarkdownEditor** — a toolbar over a plain textarea, not `contenteditable`.\n\n- Bold, italic, links\n- Bulleted and numbered lists\n- An optional preview pane",
+    );
+    return <MarkdownEditor className="w-full" value={text} onChange={setText} rows={8} />;
+  };
+
+const meta = {
+  title: "Form Inputs/MarkdownEditor",
+  parameters: {
+    layout: "padded",
+    docs: { source: { code: "<MarkdownEditor\\n  value={text}\\n  onChange={setText}\\n  rows={8}\\n/>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };

package/src/stories/Marquee.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-vite";
+import { Marquee } from "@kinetixui/ui";
+
+const Demo = () => (
+    <Marquee durationSeconds={18} className="w-full max-w-md">
+      {["React", "SwiftUI", "Jetpack Compose", "Flutter"].map((p) => (
+        <span key={p} className="flex items-center gap-2 px-4 text-body-sm text-muted-foreground">
+          <span className="size-1.5 rounded-full bg-primary" />
+          {p}
+        </span>
+      ))}
+    </Marquee>
+  );
+
+const meta = {
+  title: "Data Display/Marquee",
+  parameters: {
+    layout: "centered",
+    docs: { source: { code: "<Marquee durationSeconds={18}>\\n  {items.map((item) => (\\n    <span key={item}>{item}</span>\\n  ))}\\n</Marquee>", language: "tsx" } },
+  },
+} satisfies Meta;
+
+export default meta;
+
+export const Default: StoryObj<typeof meta> = { render: () => <Demo /> };