@zentauri-ui/zentauri-components 2.1.6 → 2.1.7

package/README.md

@@ -15,7 +15,7 @@ Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@ze
 
 | Surface             | Count | Import shape                                          |
 | ------------------- | ----: | ----------------------------------------------------- |
-| Static UI entries   |    41 | `@zentauri-ui/zentauri-components/ui/<name>`          |
+| Static UI entries   |    42 | `@zentauri-ui/zentauri-components/ui/<name>`          |
 | Animated UI entries |    27 | `@zentauri-ui/zentauri-components/ui/<name>/animated` |
 | Animation entries   |    41 | `@zentauri-ui/zentauri-components/animations/<name>`  |
 | Chart entries       |     9 | `@zentauri-ui/zentauri-components/charts/<type>`      |
@@ -29,16 +29,16 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 
 | Metric     | Result           |
 | ---------- | ---------------- |
-| Test files | 96 passed (96)   |
-| Tests      | 792 passed (792) |
+| Test files | 97 passed (97)   |
+| Tests      | 808 passed (808) |
 
 | Area                           | Test files | Tests |
 | ------------------------------ | ---------- | ----- |
-| Components and UI utilities    | 47         | 490   |
+| Components and UI utilities    | 48         | 503   |
 | Standalone animations          | 1          | 45    |
 | React hooks                    | 41         | 174   |
 | Design system facade           | 1          | 11    |
-| CLI and import rewriting       | 4          | 30    |
+| CLI and import rewriting       | 4          | 33    |
 | Accessibility (axe + keyboard) | 2          | 42    |
 
 ### Per-suite snapshot
@@ -52,10 +52,11 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | `src/ui/peer-isolation.test.ts`                                         |    29 |
 | `src/accessibility/axe-core.test.tsx`                                   |    24 |
 | `src/ui/combobox/combobox.test.tsx`                                     |    24 |
-| `cli/cli.integration.test.ts`                                           |    20 |
+| `cli/cli.integration.test.ts`                                           |    21 |
 | `src/accessibility/keyboard-interaction.test.tsx`                       |    18 |
 | `src/ui/pagination/pagination.test.tsx`                                 |    15 |
 | `src/ui/timeline/timeline.test.tsx`                                     |    14 |
+| `src/ui/data-table/data-table.test.tsx`                                 |    13 |
 | `src/ui/context-menu/context-menu.test.tsx`                             |    12 |
 | `src/lib/facade.test.ts`                                                |    11 |
 | `src/ui/alert/alert.test.tsx`                                           |    11 |
@@ -78,6 +79,7 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | `src/ui/progress/progress.test.tsx`                                     |     8 |
 | `src/ui/scroll-area/scroll-area.test.tsx`                               |     8 |
 | `src/ui/spinner/animated/spinner.test.tsx`                              |     8 |
+| `cli/rewrite-imports.test.ts`                                           |     7 |
 | `src/hooks/useDynamicStepper/useDynamicStepper.test.ts`                 |     7 |
 | `src/hooks/useHotkeys/useHotkeys.test.ts`                               |     7 |
 | `src/hooks/useTableSort/useTableSort.test.ts`                           |     7 |
@@ -101,7 +103,6 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | `src/ui/empty-state/empty-state.test.tsx`                               |     6 |
 | `src/ui/search/filter-search-suggestions.test.ts`                       |     6 |
 | `src/ui/toast/toast.test.tsx`                                           |     6 |
-| `cli/rewrite-imports.test.ts`                                           |     5 |
 | `src/hooks/useCookie/useCookie.test.ts`                                 |     5 |
 | `src/hooks/useDisclosure/useDisclosure.test.ts`                         |     5 |
 | `src/hooks/useEventListener/useEventListener.test.ts`                   |     5 |
@@ -221,6 +222,7 @@ Import static primitives from `@zentauri-ui/zentauri-components/ui/<subpath>` wh
 | Command         | `command`         | `command/animated`                 |
 | Context menu    | `context-menu`    | —                                  |
 | Copy button     | `copy-button`     | `copy-button/animated`             |
+| DataTable       | `data-table`      | —                                  |
 | Divider         | `divider`         | `divider/animated`                 |
 | Drawer          | `drawer`          | `drawer/animated`                  |
 | Dropdown        | `dropdown`        | —                                  |
@@ -850,7 +852,7 @@ From this package directory in the monorepo:
 
 - `pnpm build` (or `npm run build`) — production bundle via `tsup` (Rollup treeshake + `scripts/prepend-use-client.mjs` via `onSuccess` so each UI entry under `dist/ui/`, animation entry under `dist/animations/`, chart entry under `dist/charts/`, and `dist/ui/<name>/animated.*` starts with `"use client"` where needed)
 - `pnpm dev` — `tsup` watch mode (same `onSuccess` hook after each rebuild)
-- `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // currently covered 792 test cases in total
+- `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // currently covered 808 test cases in total
 - `pnpm test:a11y` — focused accessibility coverage for package-level UI primitives and compound components: **axe-core** audits for every interactive component plus **keyboard-interaction** tests (focus order, arrow-key nav, Home/End, Escape/Enter) for the compound components
 - `pnpm check:tokens` — enforce the `--zui-*` token contract across design-system, variant, and local custom-property usage without generating a large checked-in token catalog
 - **`pnpm run generate:registry`** — runs `scripts/generate-registry.mjs`, which reads **`uiComponentNames`**, **`uiAnimatedComponentNames`**, **`animationEntryNames`**, **`chartEntryNames`**, and **`hooksEntryNames`** from `tsup.config.ts`, applies fixed **`nameAliases`**, scans each component/chart source to build **`peerHints`**, and writes **`cli/registry.json`** (`components` + `animations` + `hooks` + `peerHints`). Run this after adding or renaming UI, animation, chart, or hook entries so the CLI stays in sync (the script prints counts).

package/cli/cli.integration.test.ts

@@ -295,6 +295,42 @@ describe("zentauri-ui CLI", () => {
     }
   });
 
+  it("should add data-table with vendored sibling UI dependencies", () => {
+    const dir = mkdtempSync(join(tmpdir(), "zentauri-cli-data-table-"));
+    try {
+      runCli(dir, ["init"]);
+      const out = runCli(dir, ["add", "data-table"]);
+      expect(
+        existsSync(join(dir, "src/components/ui/data-table/data-table.tsx")),
+      ).toBe(true);
+      expect(
+        existsSync(join(dir, "src/components/ui/buttons/button.tsx")),
+      ).toBe(true);
+      expect(
+        existsSync(join(dir, "src/components/ui/checkbox/checkbox.tsx")),
+      ).toBe(true);
+      expect(existsSync(join(dir, "src/components/ui/inputs/input.tsx"))).toBe(
+        true,
+      );
+      expect(
+        existsSync(join(dir, "src/components/ui/pagination/pagination.tsx")),
+      ).toBe(true);
+      expect(existsSync(join(dir, "src/components/ui/table/table.tsx"))).toBe(
+        true,
+      );
+      const base = readFileSync(
+        join(dir, "src/components/ui/data-table/data-table-base.tsx"),
+        "utf8",
+      );
+      expect(base).toContain('from "@/components/ui/buttons"');
+      expect(base).not.toContain('from "../buttons"');
+      expect(out).toContain("Adding data-table…");
+      expect(out).toContain("Adding buttons…");
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
   it("should print react-icons peer hint for components that use icons", () => {
     const dir = mkdtempSync(join(tmpdir(), "zentauri-cli-peer-"));
     try {

package/cli/index.mjs

@@ -548,6 +548,27 @@ function isAnimatedComponent(name, registry) {
   return (registry.animatedComponents ?? []).includes(name);
 }
 
+function expandComponentDependencies(names, registry) {
+  const dependencies = registry.componentDependencies ?? {};
+  const expanded = [];
+  const seen = new Set();
+  const queue = [...names];
+
+  while (queue.length > 0) {
+    const name = queue.shift();
+    if (seen.has(name)) {
+      continue;
+    }
+    seen.add(name);
+    expanded.push(name);
+    for (const dependency of dependencies[name] ?? []) {
+      queue.push(dependency);
+    }
+  }
+
+  return expanded;
+}
+
 function printList(registry) {
   const ui = Array.from(
     new Set([
@@ -922,7 +943,13 @@ async function collectHookTransitiveClosure(packageRoot, seedHooks) {
  * // src/components/ui/buttons/Button.tsx
  * // with imports pointing at @/lib/utils, @/hooks/useX, etc.
  */
-async function copyUiComponent(componentName, config, configDir, packageRoot) {
+async function copyUiComponent(
+  componentName,
+  config,
+  configDir,
+  packageRoot,
+  registry,
+) {
   const isChartEntry = componentName.startsWith("charts/");
   const isAnimationEntry = componentName.startsWith("animations/");
   const animationName = componentName.slice("animations/".length);
@@ -979,6 +1006,7 @@ async function copyUiComponent(componentName, config, configDir, packageRoot) {
         utilsAlias: config.aliases.utils,
         hooksAlias: config.aliases.hooks,
         uiAlias: config.aliases.ui,
+        uiComponents: registry.uiComponents ?? [],
       });
       const rewrittenCode = designSystemImportTarget
         ? rewriteDesignSystemBarrelImports(code, designSystemImportTarget)
@@ -1310,8 +1338,9 @@ async function cmdAdd(names, cwd, options = {}) {
   }
 
   const resolvedNames = payload.map((n) => resolveComponentName(n, registry));
+  const requestedNames = [...resolvedNames];
   if (animated) {
-    for (const name of resolvedNames) {
+    for (const name of requestedNames) {
       if (!isAnimatedComponent(name, registry)) {
         console.error(`Component "${name}" has no animated entry.`);
         process.exitCode = 1;
@@ -1319,17 +1348,24 @@ async function cmdAdd(names, cwd, options = {}) {
       }
     }
   }
+  const namesToCopy = expandComponentDependencies(requestedNames, registry);
 
   await ensureUtilsFile(config, configDir, packageRoot);
-  await copyDesignSystemFiles(resolvedNames, config, configDir, packageRoot);
+  await copyDesignSystemFiles(namesToCopy, config, configDir, packageRoot);
 
   const allHooks = new Set();
-  for (const name of resolvedNames) {
+  for (const name of namesToCopy) {
     console.log(`Adding ${name}…`);
-    if (animated) {
+    if (animated && requestedNames.includes(name)) {
       console.log(`Including animated entry for ${name}…`);
     }
-    const uh = await copyUiComponent(name, config, configDir, packageRoot);
+    const uh = await copyUiComponent(
+      name,
+      config,
+      configDir,
+      packageRoot,
+      registry,
+    );
     for (const h of uh) {
       allHooks.add(h);
     }
@@ -1345,7 +1381,7 @@ async function cmdAdd(names, cwd, options = {}) {
   }
 
   console.log("Done.");
-  printAdoptionHints(resolvedNames, registry, config, configDir);
+  printAdoptionHints(namesToCopy, registry, config, configDir);
 }
 
 async function cmdTheme(hex, options, cwd) {

package/cli/props.json

@@ -5308,6 +5308,279 @@
         }
       ]
     },
+    "data-table": {
+      "slug": "data-table",
+      "subcomponents": [
+        {
+          "name": "static:DataTable",
+          "displayName": "DataTable",
+          "propsType": "DataTableProps",
+          "source": "static",
+          "props": [
+            {
+              "name": "appearance",
+              "type": "'default' | 'ghost' | 'blue' | 'cyan' | 'green' | 'lime' | 'mint' | 'ocean' | 'sapphire' | 'lavender' | 'ruby' | 'red' | 'slate' | 'zinc' | 'stone' | 'royal' | 'electric' | 'forest' | 'sunset' | 'magenta' | 'crimson' | 'aqua' | 'plum' | 'sky' | 'rose' | 'purple' | 'pink' | 'orange' | 'yellow' | 'teal' | 'indigo' | 'emerald' | 'gray' | 'violet' | 'amber' | 'striped' | 'bordered' | null | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "bulkActions",
+              "type": "readonly DataTableBulkAction<TData>[] | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "caption",
+              "type": "ReactNode",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "columns",
+              "type": "readonly DataTableColumn<TData, TKey>[]",
+              "required": true,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "data",
+              "type": "readonly TData[]",
+              "required": true,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "defaultSelectedRowIds",
+              "type": "readonly string[] | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "defaultSortDirection",
+              "type": "TableSortDirection | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "defaultSortKey",
+              "type": "TKey | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "defaultVisibleColumnIds",
+              "type": "readonly TKey[] | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "emptyContent",
+              "type": "ReactNode",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "enableColumnVisibility",
+              "type": "boolean | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "enableRowSelection",
+              "type": "boolean | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "getRowId",
+              "type": "((row: TData, index: number) => string) | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "loading",
+              "type": "boolean | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "loadingContent",
+              "type": "ReactNode",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "onColumnVisibilityChange",
+              "type": "((visibleColumnIds: TKey[]) => void) | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "onRowSelectionChange",
+              "type": "((selectedRowIds: string[], selectedRows: TData[]) => void) | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "onSortChange",
+              "type": "((sort: { sortKey?: TKey; sortDirection: TableSortDirection; }) => void) | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "pagination",
+              "type": "boolean | DataTablePaginationOptions | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "ref",
+              "type": "Ref<HTMLElement> | undefined",
+              "required": false,
+              "group": "behavior",
+              "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).",
+              "deprecated": false
+            },
+            {
+              "name": "search",
+              "type": "boolean | DataTableSearchOptions<TKey> | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "selectedRowIds",
+              "type": "readonly string[] | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "showRowCount",
+              "type": "boolean | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "size",
+              "type": "'md' | 'sm' | 'lg' | null | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "sortDirection",
+              "type": "TableSortDirection | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "sortKey",
+              "type": "TKey | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "stickyHeader",
+              "type": "boolean | null | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "tableClassName",
+              "type": "string | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "tableScrollAreaAriaLabel",
+              "type": "string | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "textAlign",
+              "type": "'center' | 'left' | 'right' | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "virtualization",
+              "type": "DataTableVirtualizationOptions | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "visibleColumnIds",
+              "type": "readonly TKey[] | undefined",
+              "required": false,
+              "group": "behavior",
+              "deprecated": false
+            },
+            {
+              "name": "className",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "id",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "onClick",
+              "type": "MouseEventHandler<HTMLElement> | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "style",
+              "type": "CSSProperties | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            },
+            {
+              "name": "title",
+              "type": "string | undefined",
+              "required": false,
+              "group": "dom",
+              "deprecated": false
+            }
+          ]
+        }
+      ]
+    },
     "divider": {
       "slug": "divider",
       "subcomponents": [

package/cli/registry.json

@@ -16,6 +16,7 @@
     "command",
     "context-menu",
     "copy-button",
+    "data-table",
     "divider",
     "drawer",
     "dropdown",
@@ -151,6 +152,7 @@
     "command",
     "context-menu",
     "copy-button",
+    "data-table",
     "divider",
     "drawer",
     "dropdown",
@@ -268,6 +270,24 @@
     "useVirtualList",
     "useWindowSize"
   ],
+  "componentDependencies": {
+    "data-table": [
+      "buttons",
+      "checkbox",
+      "inputs",
+      "pagination",
+      "table"
+    ],
+    "dynamic-stepper": [
+      "buttons"
+    ],
+    "pagination": [
+      "buttons"
+    ],
+    "search": [
+      "inputs"
+    ]
+  },
   "peerHints": {
     "accordion": [
       "framer-motion"

package/cli/rewrite-imports.mjs

@@ -2,12 +2,14 @@
  * Rewrites internal package-relative imports to app aliases.
  *
  * @param {string} source
- * @param {{ utilsAlias: string; hooksAlias: string; uiAlias?: string }} options
- * @returns {{ code: string; usedHooks: string[] }}
+ * @param {{ utilsAlias: string; hooksAlias: string; uiAlias?: string; uiComponents?: string[] }} options
+ * @returns {{ code: string; usedHooks: string[]; usedUiComponents: string[] }}
  */
 export function rewriteImports(source, options) {
-  const { utilsAlias, hooksAlias, uiAlias } = options;
+  const { utilsAlias, hooksAlias, uiAlias, uiComponents = [] } = options;
   const usedHooks = new Set();
+  const usedUiComponents = new Set();
+  const uiComponentSet = new Set(uiComponents);
 
   const collectHooks = (text) => {
     const re = /from\s+(["'])((?:\.\.\/)+)hooks\/([^'"]+)\1/g;
@@ -24,6 +26,25 @@ export function rewriteImports(source, options) {
 
   let code = source;
 
+  if (uiAlias) {
+    // Single-parent imports (`../<name>`) point at a sibling UI component.
+    // The leading `[^'"./]` excludes deeper relatives like `../../lib/utils`,
+    // which are rewritten by the dedicated blocks below. When a `uiComponents`
+    // allowlist is supplied, only those siblings are rewritten; otherwise every
+    // sibling import is treated as a UI component.
+    code = code.replace(
+      /from\s+(["'])\.\.\/([^'"./][^'"]*)\1/g,
+      (match, quote, rest) => {
+        const componentName = rest.split("/")[0];
+        if (uiComponentSet.size > 0 && !uiComponentSet.has(componentName)) {
+          return match;
+        }
+        usedUiComponents.add(componentName);
+        return `from ${quote}${uiAlias}/${rest}${quote}`;
+      },
+    );
+  }
+
   code = code.replace(
     /from\s+(["'])((?:\.\.\/)+)lib\/utils\1/g,
     (_, quote) => `from ${quote}${utilsAlias}${quote}`,
@@ -47,7 +68,11 @@ export function rewriteImports(source, options) {
     );
   }
 
-  return { code, usedHooks: [...usedHooks] };
+  return {
+    code,
+    usedHooks: [...usedHooks],
+    usedUiComponents: [...usedUiComponents],
+  };
 }
 
 /**

package/cli/rewrite-imports.test.ts

@@ -42,11 +42,46 @@ import { useFocusManagement as u } from "../../../hooks/useFocusManagement";
       utilsAlias: "@/lib/utils",
       hooksAlias: "@/hooks",
       uiAlias: "@/components/ui",
+      uiComponents: ["buttons", "pagination"],
     });
     expect(code).toContain('from "@/components/ui/pagination/types"');
     expect(code).not.toContain("../../ui/");
   });
 
+  it("should rewrite sibling ui paths when uiAlias is set", () => {
+    const input = `
+import { Button } from "../buttons";
+import type { PaginationAppearance } from "../pagination";
+`;
+    const { code } = rewriteImports(input, {
+      utilsAlias: "@/lib/utils",
+      hooksAlias: "@/hooks",
+      uiAlias: "@/components/ui",
+    });
+    expect(code).toContain('from "@/components/ui/buttons"');
+    expect(code).toContain('from "@/components/ui/pagination"');
+    expect(code).not.toContain("../buttons");
+  });
+
+  it("should collect sibling ui imports", () => {
+    const input = `
+import { Button } from "../buttons";
+import { Checkbox } from "../checkbox";
+import type { PaginationAppearance } from "../pagination";
+`;
+    const { usedUiComponents } = rewriteImports(input, {
+      utilsAlias: "@/lib/utils",
+      hooksAlias: "@/hooks",
+      uiAlias: "@/components/ui",
+      uiComponents: ["buttons", "checkbox", "pagination"],
+    });
+    expect(usedUiComponents.sort()).toEqual([
+      "buttons",
+      "checkbox",
+      "pagination",
+    ]);
+  });
+
   it("should preserve single-quote import style", () => {
     const input = `import { cn } from '../../lib/utils';\n`;
     const { code } = rewriteImports(input, {