@kinetixui/ui 0.11.0 → 0.13.0

package/src/components/sheet.tsx

@@ -30,6 +30,8 @@ const sheetVariants = cva(
   "fixed z-overlay gap-4 bg-background p-6 shadow-lg transition ease-standard data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-base data-[state=open]:duration-slow font-sans",
   {
     variants: {
+      // rtl-ok-start: `side` picks a physical screen edge on purpose (a caller-chosen
+      // slide-in direction, not text-direction-relative) — left/right stay physical.
       side: {
         top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
         bottom:
@@ -38,6 +40,7 @@ const sheetVariants = cva(
         right:
           "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
       },
+      // rtl-ok-end
     },
     defaultVariants: { side: "right" },
   },
@@ -55,7 +58,7 @@ const SheetContent = React.forwardRef<
     <SheetOverlay />
     <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-muted transition-opacity hover:opacity-visible focus:outline-none focus:ring-2 focus:ring-ring">
+      <SheetPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-muted transition-opacity hover:opacity-visible focus:outline-none focus:ring-2 focus:ring-ring">
         <X className="size-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
@@ -65,7 +68,7 @@ const SheetContent = React.forwardRef<
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-start", className)} {...props} />
 );
 SheetHeader.displayName = "SheetHeader";
 

package/src/components/tour.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { Button } from "./button";
+
+/**
+ * Tour — sequenced spotlight popovers over real elements (onboarding
+ * walkthroughs), with dismiss/skip/next. `target` is a CSS selector
+ * resolved against the live DOM on every step change (and on resize/
+ * scroll, so the spotlight tracks a target that moves or resizes) rather
+ * than a ref, since steps are authored as plain data ahead of the
+ * elements existing. The spotlight itself is a single positioned `div`
+ * with a `box-shadow: 0 0 0 9999px` — a well-known CSS-only cutout
+ * technique, no SVG mask or second overlay layer needed. No focus trap:
+ * a tour narrates the page rather than blocking interaction with it, so
+ * the underlying page stays operable while a step is shown. Gap-fill
+ * addition (not in the original Figma source).
+ */
+export interface TourStep {
+  /** CSS selector for the element this step spotlights */
+  target: string;
+  title: React.ReactNode;
+  content: React.ReactNode;
+}
+
+export interface TourProps {
+  steps: TourStep[];
+  open: boolean;
+  stepIndex: number;
+  onStepIndexChange: (index: number) => void;
+  onOpenChange: (open: boolean) => void;
+  nextLabel?: React.ReactNode;
+  backLabel?: React.ReactNode;
+  skipLabel?: React.ReactNode;
+  doneLabel?: React.ReactNode;
+}
+
+const SPOTLIGHT_PADDING = 8;
+
+const Tour: React.FC<TourProps> = ({
+  steps,
+  open,
+  stepIndex,
+  onStepIndexChange,
+  onOpenChange,
+  nextLabel = "Next",
+  backLabel = "Back",
+  skipLabel = "Skip",
+  doneLabel = "Done",
+}) => {
+  const [mounted, setMounted] = React.useState(false);
+  const [rect, setRect] = React.useState<DOMRect | null>(null);
+  const step = steps[stepIndex];
+
+  React.useEffect(() => setMounted(true), []);
+
+  React.useEffect(() => {
+    if (!open || !step) return;
+    const update = () => {
+      const el = document.querySelector(step.target);
+      if (el) {
+        setRect(el.getBoundingClientRect());
+        el.scrollIntoView({ behavior: "smooth", block: "center" });
+      } else {
+        setRect(null);
+      }
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+    };
+  }, [open, step]);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onOpenChange(false);
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [open, onOpenChange]);
+
+  if (!mounted || !open || !step) return null;
+
+  const isFirst = stepIndex === 0;
+  const isLast = stepIndex === steps.length - 1;
+
+  const spotlightStyle: React.CSSProperties = rect
+    ? {
+        top: rect.top - SPOTLIGHT_PADDING,
+        left: rect.left - SPOTLIGHT_PADDING,
+        width: rect.width + SPOTLIGHT_PADDING * 2,
+        height: rect.height + SPOTLIGHT_PADDING * 2,
+        boxShadow: "0 0 0 9999px rgb(0 0 0 / 0.6)",
+      }
+    : { inset: 0, background: "rgb(0 0 0 / 0.6)" };
+
+  const cardStyle: React.CSSProperties = rect
+    ? {
+        top: Math.min(rect.bottom + SPOTLIGHT_PADDING + 8, window.innerHeight - 220),
+        left: Math.min(Math.max(rect.left, 16), window.innerWidth - 336),
+      }
+    : { top: "50%", left: "50%", transform: "translate(-50%, -50%)" };
+
+  return createPortal(
+    <>
+      <div
+        aria-hidden
+        className="pointer-events-none fixed z-overlay rounded-lg transition-all duration-fast"
+        style={spotlightStyle}
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        className="fixed z-overlay w-80 rounded-lg border border-border bg-popover p-4 font-sans text-popover-foreground shadow-lg transition-all duration-fast"
+        style={cardStyle}
+      >
+        <p className="text-title-sm font-medium text-foreground">{step.title}</p>
+        <div className="mt-1.5 text-body-sm text-muted-foreground">{step.content}</div>
+        <div className="mt-4 flex items-center justify-between">
+          <span className="text-label-sm text-muted-foreground">
+            {stepIndex + 1} / {steps.length}
+          </span>
+          <div className="flex items-center gap-2">
+            {!isFirst && (
+              <Button variant="Ghost" size="sm" onClick={() => onStepIndexChange(stepIndex - 1)}>
+                {backLabel}
+              </Button>
+            )}
+            {!isLast ? (
+              <>
+                <Button variant="Link" size="sm" onClick={() => onOpenChange(false)}>
+                  {skipLabel}
+                </Button>
+                <Button size="sm" onClick={() => onStepIndexChange(stepIndex + 1)}>
+                  {nextLabel}
+                </Button>
+              </>
+            ) : (
+              <Button size="sm" onClick={() => onOpenChange(false)}>
+                {doneLabel}
+              </Button>
+            )}
+          </div>
+        </div>
+      </div>
+    </>,
+    document.body,
+  );
+};
+
+export { Tour };

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

@@ -24,6 +24,10 @@ export {
   AlertDialogCancel,
 } from "./components/alert-dialog";
 export { AspectRatio } from "./components/aspect-ratio";
+export {
+  KinetixDirectionProvider,
+  type KinetixDirectionProviderProps,
+} from "./components/direction-provider";
 export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, type AvatarGroupProps } from "./components/avatar";
 export { Badge, badgeVariants, type BadgeProps } from "./components/badge";
 export {
@@ -354,5 +358,25 @@ export { Timeline, type TimelineItem, type TimelineProps } from "./components/ti
 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/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 /> };