@zentauri-ui/zentauri-components 1.8.2 → 1.8.3

package/README.md

@@ -11,29 +11,41 @@ The library targets **React 18+** apps that use **Tailwind CSS v4** (or an equiv
 
 Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@zentauri-ui/zentauri-components/ui/<area>` for static UI, `@zentauri-ui/zentauri-components/ui/<area>/animated` where a motion bundle exists, `@zentauri-ui/zentauri-components/charts/<type>` for Recharts-powered chart primitives, and `@zentauri-ui/zentauri-components/hooks/<entry>` for React hooks (and shared helpers under `hooks/utils`). Base UI entries do **not** re-export animated components; motion lives on its own entry so optional `framer-motion` usage stays tree-shakeable and chunk-friendly. Each entry resolves to its own ESM (`.mjs`), CJS (`.js`), and types (`.d.ts`) so bundlers pull only what you import. Most apps rely on Tailwind scanning the package sources (see installation); a separate CSS import is not required for that setup.
 
+## Current package surface
+
+| Surface             | Count | Import shape                                          |
+| ------------------- | ----: | ----------------------------------------------------- |
+| Static UI entries   |    42 | `@zentauri-ui/zentauri-components/ui/<name>`          |
+| Animated UI entries |    27 | `@zentauri-ui/zentauri-components/ui/<name>/animated` |
+| Chart entries       |     9 | `@zentauri-ui/zentauri-components/charts/<type>`      |
+| Hook entries        |    28 | `@zentauri-ui/zentauri-components/hooks/<entry>`      |
+
+`spinner` is the only animated-only UI area. Import it from `@zentauri-ui/zentauri-components/ui/spinner/animated`; there is no `@zentauri-ui/zentauri-components/ui/spinner` static entry.
+
 ## Package status and test coverage
 
 | Metric     | Result           |
 | ---------- | ---------------- |
-| Test files | 75 passed (75)   |
-| Tests      | 507 passed (507) |
+| Test files | 76 passed (76)   |
+| Tests      | 548 passed (548) |
 
 | Area                        | Test files | Tests |
 | --------------------------- | ---------- | ----- |
-| Components and UI utilities | 45         | 397   |
+| Components and UI utilities | 46         | 433   |
 | React hooks                 | 28         | 101   |
-| CLI and import rewriting    | 2          | 9     |
+| CLI and import rewriting    | 2          | 14    |
 
 ### Per-suite snapshot
 
 | Suite                                                                   | Tests |
 | ----------------------------------------------------------------------- | ----: |
 | `src/ui/dynamic-stepper/dynamic-stepper.test.tsx`                       |     8 |
-| `src/ui/select/select.test.tsx`                                         |     6 |
+| `src/ui/select/select.test.tsx`                                         |    10 |
 | `src/charts/charts.test.tsx`                                            |     6 |
-| `src/ui/modal/modal.test.tsx`                                           |     9 |
+| `src/ui/modal/modal.test.tsx`                                           |    10 |
 | `src/ui/drawer/drawer.test.tsx`                                         |     7 |
-| `cli/cli.integration.test.ts`                                           |     4 |
+| `src/ui/peer-isolation.test.ts`                                         |    29 |
+| `cli/cli.integration.test.ts`                                           |     9 |
 | `src/ui/buttons/button.test.tsx`                                        |    41 |
 | `src/ui/inputs/input.test.tsx`                                          |    40 |
 | `src/ui/marquee/marquee.test.tsx`                                       |    10 |
@@ -43,7 +55,7 @@ Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@ze
 | `src/ui/checkbox/checkbox.test.tsx`                                     |     6 |
 | `src/ui/popover/popover.test.tsx`                                       |     4 |
 | `src/ui/command/command.test.tsx`                                       |     7 |
-| `src/ui/context-menu/context-menu.test.tsx`                             |     8 |
+| `src/ui/context-menu/context-menu.test.tsx`                             |    10 |
 | `src/ui/copy-button/copy-button.test.tsx`                               |     8 |
 | `src/ui/kbd/kbd.test.tsx`                                               |     7 |
 | `src/ui/tooltip/tooltip.test.tsx`                                       |     4 |
@@ -106,12 +118,12 @@ Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@ze
 
 ## Package exports
 
-| Subpath                                               | Description                                                                                                                                    |
-| ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@zentauri-ui/zentauri-components/ui/<name>`          | Single UI area: static primitives, compound parts, variants, and types. Does **not** include Framer Motion–based animated exports.             |
-| `@zentauri-ui/zentauri-components/ui/<name>/animated` | Motion entry for that area when published: animated components, motion presets, and related types (depends on **framer-motion**).              |
-| `@zentauri-ui/zentauri-components/charts/<type>`      | Responsive Recharts chart entry for `area`, `bar`, `stacked-bar`, `radar`, `scatter`, `bubble`, `funnel`, `line`, or `pie`, with shared variants, palettes, and exported chart prop types.  |
-| `@zentauri-ui/zentauri-components/hooks/<entry>`      | One hook module or `utils` (`cn`, `clampPage`, `range` from `src/lib/utils.ts`). Entries match files under `src/hooks/` (see **React hooks**). |
+| Subpath                                               | Description                                                                                                                                                                                |
+| ----------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `@zentauri-ui/zentauri-components/ui/<name>`          | Single UI area: static primitives, compound parts, variants, and types. Does **not** include Framer Motion–based animated exports.                                                         |
+| `@zentauri-ui/zentauri-components/ui/<name>/animated` | Motion entry for that area when published: animated components, motion presets, and related types (depends on **framer-motion**).                                                          |
+| `@zentauri-ui/zentauri-components/charts/<type>`      | Responsive Recharts chart entry for `area`, `bar`, `stacked-bar`, `radar`, `scatter`, `bubble`, `funnel`, `line`, or `pie`, with shared variants, palettes, and exported chart prop types. |
+| `@zentauri-ui/zentauri-components/hooks/<entry>`      | One hook module or `utils` (`cn`, `clampPage`, `range` from `src/lib/utils.ts`). Entries match files under `src/hooks/` (see **React hooks**).                                             |
 
 The UI `<name>` segment matches the folder under `src/ui/` (for example `accordion`, `select`, `empty-state`, `buttons` for `Button`, `inputs` for `Input`, `typography` for `Heading` / `Text` and related primitives). The hooks `<entry>` is the file stem (for example `useMediaQuery`, `usePagination`) or `utils`.
 
@@ -124,7 +136,7 @@ Only a subset of UI areas publish a `/animated` entry (see **Components**). Some
 
 Published motion entries (same `<name>` as the base UI folder):
 
-`accordion`, `alert`, `avatar`, `badge`, `buttons`, `card`, `checkbox`, `divider`, `drawer`, `empty-state`, `inputs`, `modal`, `popover`, `progress`, `radio-group`, `skeleton`, `spinner`, `table`, `tabs`, `toast`, `toggle`, `tooltip`, `tree-view`
+`accordion`, `alert`, `avatar`, `badge`, `buttons`, `card`, `checkbox`, `command`, `copy-button`, `divider`, `drawer`, `empty-state`, `inputs`, `kbd`, `modal`, `popover`, `progress`, `radio-group`, `skeleton`, `spinner`, `table`, `tabs`, `timeline`, `toast`, `toggle`, `tooltip`, `tree-view`
 
 **Spinner:** only the motion entry is built—import from `@zentauri-ui/zentauri-components/ui/spinner/animated` (there is no separate `ui/spinner` static bundle).
 
@@ -142,6 +154,7 @@ Import static primitives from `@zentauri-ui/zentauri-components/ui/<subpath>` wh
 | --------------- | ----------------- | ---------------------------------- |
 | Accordion       | `accordion`       | `accordion/animated`               |
 | Alert           | `alert`           | `alert/animated`                   |
+| Animated number | `animated-number` | —                                  |
 | Avatar          | `avatar`          | `avatar/animated`                  |
 | Badge           | `badge`           | `badge/animated`                   |
 | Breadcrumb      | `breadcrumb`      | —                                  |
@@ -169,7 +182,7 @@ Import static primitives from `@zentauri-ui/zentauri-components/ui/<subpath>` wh
 | Rating          | `rating`          | —                                  |
 | Radio group     | `radio-group`     | `radio-group/animated`             |
 | Scroll area     | `scroll-area`     | —                                  |
-| Search          | `search`          | -                                  |
+| Search          | `search`          | —                                  |
 | Select          | `select`          | —                                  |
 | Skeleton        | `skeleton`        | `skeleton/animated`                |
 | Slider          | `slider`          | —                                  |
@@ -177,6 +190,7 @@ Import static primitives from `@zentauri-ui/zentauri-components/ui/<subpath>` wh
 | Stepper         | `stepper`         | —                                  |
 | Table           | `table`           | `table/animated`                   |
 | Tabs            | `tabs`            | `tabs/animated`                    |
+| Timeline        | `timeline`        | `timeline/animated`                |
 | Toast           | `toast`           | `toast/animated`                   |
 | Toggle          | `toggle`          | `toggle/animated`                  |
 | Tooltip         | `tooltip`         | `tooltip/animated`                 |
@@ -655,9 +669,10 @@ Defaults look like this; edit `resolvedPaths` and `aliases` so they match your a
 
 ### Registry (`cli/registry.json`)
 
-- **`components`**: sorted list of folder names under **`src/ui/`**, plus chart entries from **`src/charts/<type>`**, that `add` may copy. The file is **generated**; the canonical build list lives in **`tsup.config.ts`** as `uiComponentNames` and `chartEntryNames`, and the generator always ensures **`spinner`** is included so the CLI stays aligned with the animated-only spinner bundle.
+- **`components`**: sorted list of folder names under **`src/ui/`**, plus chart entries from **`src/charts/<type>`**, that `add` may copy. The file is **generated**; the canonical build lists live in **`tsup.config.ts`** as `uiComponentNames`, `uiAnimatedComponentNames`, and `chartEntryNames`, so animated-only entries such as **`spinner`** stay aligned with the CLI.
 - **`hooks`**: sorted list of folder names under **`src/hooks/`** that `add hook` may copy; generated from **`hooksEntryNames`** in **`tsup.config.ts`** (same entries as published `…/hooks/<name>` subpaths).
-- **`nameAliases`**: optional map from a CLI token to a real folder name. Today: `button` → `buttons`, `input` → `inputs` (matching common singular names while folders stay plural).
+- **`nameAliases`**: optional map from a CLI token to a real folder name: `button` → `buttons`, `input` → `inputs` (singular forms while folders stay plural), and `chart-<type>` → `charts/<type>` for every chart (so `add chart-line` and `add charts/line` are equivalent).
+- **`peerHints`**: generated map from a component/chart name to the **optional peer dependencies** its source imports (`framer-motion` for components that ship an `animated/` variant, `react-icons` where icons are used, `recharts` for every chart). After `add`, the CLI prints a deduplicated install hint built from this map, so you never have to guess which peers a vendored component needs.
 
 Example: these are equivalent when `nameAliases` is configured:
 
@@ -668,6 +683,45 @@ zentauri-components add buttons
 
 After `add`, imports inside copied `.ts`/`.tsx` files are rewritten using your `aliases`; test files (`*.test.*`, `*.spec.*`) from the package are not copied.
 
+### Worked examples
+
+```bash
+# A static UI primitive — copies src/ui/buttons plus the shared design-system tokens it imports.
+zentauri-ui add button
+
+# A chart — copies src/charts/line and the shared chart frame; CLI hints `recharts`.
+zentauri-ui add charts/line
+
+# A hook on its own — copies src/hooks/useClipboard (plus any sibling hooks it imports).
+zentauri-ui add hook useClipboard
+```
+
+### Vendored destination structure
+
+Given the default `components.json`, running `zentauri-ui add button charts/line` then `add hook useClipboard` produces:
+
+```
+your-app/
+├── components.json
+└── src/
+    ├── components/
+    │   ├── design-system/        # shared token + variant strings (copied once, never overwritten)
+    │   │   └── button.ts
+    │   └── ui/
+    │       ├── buttons/          # the component folder (index.ts, button.tsx, variants.ts, …)
+    │       └── charts/
+    │           ├── shared/       # chart frame + helpers shared by every chart
+    │           └── line/         # the requested chart entry only
+    ├── hooks/
+    │   └── useClipboard/         # hooks pulled in by components or `add hook`
+    └── lib/
+        └── utils.ts              # cn() helper, created from the package template if missing
+```
+
+- `design-system/` lands beside `ui/` (one level up from `resolvedPaths.ui`) so vendored components keep their `../../design-system/*` imports working without a new alias. Existing files there are left untouched on re-add.
+- Charts always land under `<ui>/charts/`, with a single shared `charts/shared/` folder regardless of how many chart types you add.
+- Re-adding a component overwrites that component's files but preserves your `design-system/` and `lib/utils.ts` edits.
+
 ### When to use the CLI vs npm imports
 
 | Approach                                         | Best when                                                                                                                   |
@@ -681,14 +735,47 @@ Tailwind still needs to see the classes your **copied** files use—point `@sour
 
 https://zentauri-ui.vercel.app/
 
+## Accessibility checklist for contributors
+
+Every new or changed component should clear this bar before it merges. The
+highest-risk primitives (overlays and keyboard-heavy controls) are expected to
+have explicit tests for the items below.
+
+**Semantics & ARIA**
+
+- [ ] Correct landmark/role for the pattern (`dialog`, `menu`/`menuitem`, `listbox`/`option`, `tab`/`tabpanel`, `slider`, `tree`/`treeitem`, …).
+- [ ] State is announced: `aria-expanded`, `aria-selected`, `aria-checked`, `aria-disabled`, `aria-current` as appropriate.
+- [ ] Overlays set `aria-modal` and wire `aria-labelledby` / `aria-describedby` to the rendered title/description.
+- [ ] Compound parts are linked by id (`aria-controls`, `aria-haspopup`) rather than relying on DOM proximity.
+
+**Keyboard**
+
+- [ ] All interactive parts are reachable and operable by keyboard (Enter/Space activate; Arrow keys navigate where the role implies it).
+- [ ] Roving tabindex for composite widgets (one tab stop; arrows move within).
+- [ ] Dismissible surfaces close on `Escape`.
+- [ ] Focus moves into an opened overlay and **returns to the trigger** on close.
+
+**Disabled & edge states**
+
+- [ ] Disabled items are skipped by keyboard navigation and ignore pointer activation, and expose `aria-disabled`.
+- [ ] SSR-safe: no access to `window`/`document` during render (guard effects; the package targets React 18+ server rendering).
+
+**Motion**
+
+- [ ] Animated entries respect `prefers-reduced-motion` (use `usePrefersReducedMotion` / Framer Motion's `useReducedMotion`).
+- [ ] `framer-motion` stays out of static entries — enforced by `src/ui/peer-isolation.test.ts`. Charts stay isolated to `src/charts/*`.
+
+Add or extend the component's `*.test.tsx` to cover the items that apply; see
+`modal`, `select`, and `context-menu` tests for worked examples.
+
 ## Development
 
 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/`, the 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 // covered 507 test cases in total
-- **`pnpm run generate:registry`** — runs `scripts/generate-registry.mjs`, which reads **`uiComponentNames`**, **`chartEntryNames`**, and **`hooksEntryNames`** from `tsup.config.ts`, merges in **`spinner`**, applies fixed **`nameAliases`**, and writes **`cli/registry.json`** (`components` + `hooks`). Run this after adding or renaming UI/chart areas or hook entries so the CLI stays in sync (the script prints counts).
+- `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // covered 548 test cases in total
+- **`pnpm run generate:registry`** — runs `scripts/generate-registry.mjs`, which reads **`uiComponentNames`**, **`uiAnimatedComponentNames`**, **`chartEntryNames`**, and **`hooksEntryNames`** from `tsup.config.ts`, applies fixed **`nameAliases`**, scans each component/chart source to build **`peerHints`**, and writes **`cli/registry.json`** (`components` + `hooks` + `peerHints`). Run this after adding or renaming UI/chart areas or hook entries so the CLI stays in sync (the script prints counts).
 
 ## Github Release log
 

package/cli/cli.integration.test.ts

@@ -9,8 +9,8 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const packageRoot = join(__dirname, "..");
 const cliEntry = join(packageRoot, "cli", "index.mjs");
 
-function runCli(cwd: string, args: string[]) {
-  execFileSync(process.execPath, [cliEntry, ...args], {
+function runCli(cwd: string, args: string[]): string {
+  return execFileSync(process.execPath, [cliEntry, ...args], {
     cwd,
     encoding: "utf8",
     stdio: ["pipe", "pipe", "pipe"],
@@ -84,4 +84,79 @@ describe("zentauri-ui CLI", () => {
       rmSync(dir, { recursive: true, force: true });
     }
   });
+
+  it("should add a chart entry under charts/ and hint recharts", () => {
+    const dir = mkdtempSync(join(tmpdir(), "zentauri-cli-chart-"));
+    try {
+      runCli(dir, ["init"]);
+      const out = runCli(dir, ["add", "charts/line"]);
+      expect(
+        existsSync(join(dir, "src/components/ui/charts/line/index.ts")),
+      ).toBe(true);
+      // chart-line alias resolves to charts/line as well
+      expect(out).toContain("recharts");
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  it("should add multiple components in one run", () => {
+    const dir = mkdtempSync(join(tmpdir(), "zentauri-cli-multi-"));
+    try {
+      runCli(dir, ["init"]);
+      const out = runCli(dir, ["add", "buttons", "card", "badge"]);
+      expect(existsSync(join(dir, "src/components/ui/buttons/button.tsx"))).toBe(
+        true,
+      );
+      expect(existsSync(join(dir, "src/components/ui/card/card.tsx"))).toBe(
+        true,
+      );
+      expect(existsSync(join(dir, "src/components/ui/badge/badge.tsx"))).toBe(
+        true,
+      );
+      expect(out).toContain("Adding buttons…");
+      expect(out).toContain("Adding badge…");
+    } 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 {
+      runCli(dir, ["init"]);
+      const out = runCli(dir, ["add", "rating"]);
+      expect(out).toContain("Optional peer dependencies");
+      expect(out).toContain("react-icons");
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  it("should print Tailwind v4 source guidance after adding", () => {
+    const dir = mkdtempSync(join(tmpdir(), "zentauri-cli-tw-"));
+    try {
+      runCli(dir, ["init"]);
+      const out = runCli(dir, ["add", "buttons"]);
+      expect(out).toContain("Tailwind v4");
+      expect(out).toContain("@source");
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  it("should not error when re-adding a component (existing files)", () => {
+    const dir = mkdtempSync(join(tmpdir(), "zentauri-cli-reAdd-"));
+    try {
+      runCli(dir, ["init"]);
+      runCli(dir, ["add", "buttons"]);
+      // Second add over existing files must succeed and keep the design-system.
+      expect(() => runCli(dir, ["add", "buttons"])).not.toThrow();
+      expect(
+        existsSync(join(dir, "src/components/design-system/button.ts")),
+      ).toBe(true);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
 });

package/cli/index.mjs

@@ -599,6 +599,58 @@ async function ensureUtilsFile(config, configDir, packageRoot) {
   console.log(`Created ${relative(configDir, dest)}`);
 }
 
+/**
+ * Human-readable note explaining why each optional peer dependency may be
+ * needed, so the install hint is self-explanatory.
+ */
+const PEER_HINT_REASONS = {
+  "framer-motion": "only if you use the animated variants",
+  "react-icons": "icons used by this component",
+  recharts: "required to render charts",
+};
+
+/**
+ * Prints optional peer-dependency install hints and Tailwind v4 scanning
+ * guidance after a successful `add`. Hints come from `registry.peerHints`
+ * (generated by scripts/generate-registry.mjs). Silent when nothing applies.
+ *
+ * @param {string[]} resolvedNames — canonical component/chart names that were added
+ * @param {object} registry — from `loadRegistry()`
+ * @param {object} config — validated `components.json` (for resolvedPaths.ui)
+ */
+function printAdoptionHints(resolvedNames, registry, config) {
+  const peerHints = registry.peerHints ?? {};
+  /** @type {Map<string, string[]>} peer -> component names that need it */
+  const needed = new Map();
+  for (const name of resolvedNames) {
+    for (const peer of peerHints[name] ?? []) {
+      if (!needed.has(peer)) {
+        needed.set(peer, []);
+      }
+      needed.get(peer).push(name);
+    }
+  }
+
+  if (needed.size > 0) {
+    console.log("\nOptional peer dependencies:");
+    for (const [peer, users] of needed) {
+      const reason = PEER_HINT_REASONS[peer] ?? "";
+      console.log(
+        `  - ${peer}${reason ? ` (${reason})` : ""} — used by ${users.join(", ")}`,
+      );
+    }
+    console.log(`  Install with: npm i ${[...needed.keys()].join(" ")}`);
+  }
+
+  const uiPath = config?.resolvedPaths?.ui ?? "your components directory";
+  console.log(
+    `\nTailwind v4: vendored files live in ${uiPath}, so they are scanned automatically when inside your app's content sources.`,
+  );
+  console.log(
+    `  If you placed them elsewhere, add: @source "${uiPath}";  (light + dark: classes are paired, so the whole tree must be scanned)`,
+  );
+}
+
 /**
  * `zentauri-components init` — writes default `components.json` next to `--cwd`.
  *
@@ -707,6 +759,7 @@ async function cmdAdd(names, cwd) {
   }
 
   console.log("Done.");
+  printAdoptionHints(resolvedNames, registry, config);
 }
 
 /**

package/cli/registry.json

@@ -85,6 +85,132 @@
     "useToggle",
     "useWindowSize"
   ],
+  "peerHints": {
+    "accordion": [
+      "framer-motion"
+    ],
+    "alert": [
+      "react-icons",
+      "framer-motion"
+    ],
+    "animated-number": [
+      "framer-motion"
+    ],
+    "avatar": [
+      "framer-motion"
+    ],
+    "badge": [
+      "react-icons",
+      "framer-motion"
+    ],
+    "buttons": [
+      "framer-motion"
+    ],
+    "card": [
+      "framer-motion"
+    ],
+    "checkbox": [
+      "framer-motion"
+    ],
+    "command": [
+      "framer-motion"
+    ],
+    "context-menu": [
+      "react-icons"
+    ],
+    "copy-button": [
+      "react-icons",
+      "framer-motion"
+    ],
+    "divider": [
+      "framer-motion"
+    ],
+    "drawer": [
+      "framer-motion"
+    ],
+    "dropdown": [
+      "react-icons"
+    ],
+    "empty-state": [
+      "framer-motion"
+    ],
+    "inputs": [
+      "framer-motion"
+    ],
+    "kbd": [
+      "framer-motion"
+    ],
+    "modal": [
+      "framer-motion"
+    ],
+    "popover": [
+      "framer-motion"
+    ],
+    "progress": [
+      "framer-motion"
+    ],
+    "radio-group": [
+      "framer-motion"
+    ],
+    "rating": [
+      "react-icons"
+    ],
+    "skeleton": [
+      "framer-motion"
+    ],
+    "table": [
+      "framer-motion"
+    ],
+    "tabs": [
+      "framer-motion"
+    ],
+    "timeline": [
+      "framer-motion"
+    ],
+    "toast": [
+      "framer-motion"
+    ],
+    "toggle": [
+      "framer-motion"
+    ],
+    "tooltip": [
+      "framer-motion"
+    ],
+    "tree-view": [
+      "react-icons",
+      "framer-motion"
+    ],
+    "spinner": [
+      "framer-motion"
+    ],
+    "charts/area": [
+      "recharts"
+    ],
+    "charts/bar": [
+      "recharts"
+    ],
+    "charts/bubble": [
+      "recharts"
+    ],
+    "charts/funnel": [
+      "recharts"
+    ],
+    "charts/line": [
+      "recharts"
+    ],
+    "charts/pie": [
+      "recharts"
+    ],
+    "charts/radar": [
+      "recharts"
+    ],
+    "charts/scatter": [
+      "recharts"
+    ],
+    "charts/stacked-bar": [
+      "recharts"
+    ]
+  },
   "nameAliases": {
     "button": "buttons",
     "chart-area": "charts/area",

package/cli/rewrite-imports.mjs

@@ -13,7 +13,10 @@ export function rewriteImports(source, options) {
     const re = /from\s+(["'])((?:\.\.\/)+)hooks\/([^'"]+)\1/g;
     let m;
     while ((m = re.exec(text)) !== null) {
-      usedHooks.add(m[3]);
+      // Imports may target a file inside the hook folder
+      // (e.g. hooks/useResizeObserver/useResizeObserver); the copyable unit is
+      // the folder, so keep only the first path segment.
+      usedHooks.add(m[3].split("/")[0]);
     }
   };
 

package/dist/{chunk-ABOZ5QIX.js → chunk-466QDL44.js}

@@ -1,24 +1,17 @@
 'use strict';
 
+var chunkMUP7DVQR_js = require('./chunk-MUP7DVQR.js');
 var classVarianceAuthority = require('class-variance-authority');
 
-// src/ui/buttons/variants.ts
-
-// src/design-system/tokens.ts
-var zuiInteractiveBase = ["transition-colors", "select-none"];
-var zuiDisabledState = {
-  default: "disabled:pointer-events-none disabled:opacity-50"
-};
-
 // src/design-system/button.ts
 var zuiButtonBase = [
   "inline-flex items-center justify-center gap-2 whitespace-nowrap",
   "rounded-[var(--zui-button-radius,0.75rem)]",
   "text-sm font-medium",
   "ring-offset-[var(--zui-button-ring-offset,#f8fafc)] dark:ring-offset-[var(--zui-button-ring-offset-dark,#020617)]",
-  ...zuiInteractiveBase,
+  ...chunkMUP7DVQR_js.zuiInteractiveBase,
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-button-focus-ring,#475569)] dark:focus-visible:ring-[var(--zui-button-focus-ring-dark,#cbd5e1)] focus-visible:ring-offset-2",
-  zuiDisabledState.default
+  chunkMUP7DVQR_js.zuiDisabledState.default
 ];
 var zuiButtonAppearances = {
   default: "bg-[var(--zui-button-default-bg,#0f172a)] dark:bg-[var(--zui-button-default-bg-dark,#f8fafc)] text-[color:var(--zui-button-default-fg,#f8fafc)] dark:text-[color:var(--zui-button-default-fg-dark,#020617)] shadow-[var(--zui-button-default-shadow,0_1px_2px_#0f172a14)] dark:shadow-[var(--zui-button-default-shadow-dark,0_1px_2px_#0f172a1f)] hover:bg-[var(--zui-button-default-bg-hover,#000000)] dark:hover:bg-[var(--zui-button-default-bg-hover-dark,#ffffff)]",
@@ -80,5 +73,5 @@ var buttonVariants = classVarianceAuthority.cva(zuiButtonBase, {
 });
 
 exports.buttonVariants = buttonVariants;
-//# sourceMappingURL=chunk-ABOZ5QIX.js.map
-//# sourceMappingURL=chunk-ABOZ5QIX.js.map
+//# sourceMappingURL=chunk-466QDL44.js.map
+//# sourceMappingURL=chunk-466QDL44.js.map

package/dist/chunk-466QDL44.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/design-system/button.ts","../src/ui/buttons/variants.ts"],"names":["zuiInteractiveBase","zuiDisabledState","cva"],"mappings":";;;;;;AAEO,IAAM,aAAA,GAAgB;AAAA,EAC3B,iEAAA;AAAA,EACA,4CAAA;AAAA,EACA,qBAAA;AAAA,EACA,mHAAA;AAAA,EACA,GAAGA,mCAAA;AAAA,EACH,2MAAA;AAAA,EACAC,iCAAA,CAAiB;AACnB,CAAA;AAEO,IAAM,oBAAA,GAAuB;AAAA,EAClC,OAAA,EACE,ycAAA;AAAA,EACF,SAAA,EACE,+UAAA;AAAA,EACF,WAAA,EACE,2VAAA;AAAA,EACF,OAAA,EACE,gdAAA;AAAA,EACF,KAAA,EACE,gPAAA;AAAA,EACF,IAAA,EAAM,2JAAA;AAAA,EACN,KAAA,EACE,idAAA;AAAA,EACF,OAAA,EACE,mUAAA;AAAA,EACF,MAAA,EACE,6TAAA;AAAA,EACF,MAAA,EACE,6TAAA;AAAA,EACF,IAAA,EAAM,iTAAA;AAAA,EACN,IAAA,EAAM,iTAAA;AAAA,EACN,GAAA,EAAK,2SAAA;AAAA,EACL,IAAA,EAAM,iTAAA;AAAA,EACN,MAAA,EACE,6TAAA;AAAA,EACF,MAAA,EACE,6TAAA;AAAA,EACF,IAAA,EAAM,iTAAA;AAAA,EACN,KAAA,EACE,uTAAA;AAAA,EACF,MAAA,EACE,6TAAA;AAAA,EACF,eAAA,EACE,knBAAA;AAAA,EACF,gBAAA,EACE,4nBAAA;AAAA,EACF,cAAA,EACE,wmBAAA;AAAA,EACF,iBAAA,EACE,soBAAA;AAAA,EACF,iBAAA,EACE,soBAAA;AAAA,EACF,eAAA,EACE,knBAAA;AAAA,EACF,iBAAA,EACE,soBAAA;AAAA,EACF,eAAA,EACE,knBAAA;AAAA,EACF,iBAAA,EACE;AACJ,CAAA;AAEO,IAAM,cAAA,GAAiB;AAAA,EAC5B,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,6BAAA;AAAA,EACJ,EAAA,EAAI,2BAAA;AAAA,EACJ,KAAA,EAAO,mCAAA;AAAA,EACP,KAAA,EAAO,qCAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,KAAA,EAAO,6BAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,MAAA,EAAQ,sCAAA;AAAA,EACR,IAAA,EAAM;AACR,CAAA;;;ACxEO,IAAM,cAAA,GAAiBC,2BAAI,aAAA,EAAe;AAAA,EAC/C,QAAA,EAAU;AAAA,IACR,UAAA,EAAY,oBAAA;AAAA,IACZ,IAAA,EAAM;AAAA,GACR;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM;AAAA;AAEV,CAAC","file":"chunk-466QDL44.js","sourcesContent":["import { zuiDisabledState, zuiInteractiveBase } from \"./tokens\";\n\nexport const zuiButtonBase = [\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap\",\n  \"rounded-[var(--zui-button-radius,0.75rem)]\",\n  \"text-sm font-medium\",\n  \"ring-offset-[var(--zui-button-ring-offset,#f8fafc)] dark:ring-offset-[var(--zui-button-ring-offset-dark,#020617)]\",\n  ...zuiInteractiveBase,\n  \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-button-focus-ring,#475569)] dark:focus-visible:ring-[var(--zui-button-focus-ring-dark,#cbd5e1)] focus-visible:ring-offset-2\",\n  zuiDisabledState.default,\n] as const;\n\nexport const zuiButtonAppearances = {\n  default:\n    \"bg-[var(--zui-button-default-bg,#0f172a)] dark:bg-[var(--zui-button-default-bg-dark,#f8fafc)] text-[color:var(--zui-button-default-fg,#f8fafc)] dark:text-[color:var(--zui-button-default-fg-dark,#020617)] shadow-[var(--zui-button-default-shadow,0_1px_2px_#0f172a14)] dark:shadow-[var(--zui-button-default-shadow-dark,0_1px_2px_#0f172a1f)] hover:bg-[var(--zui-button-default-bg-hover,#000000)] dark:hover:bg-[var(--zui-button-default-bg-hover-dark,#ffffff)]\",\n  secondary:\n    \"bg-[var(--zui-button-secondary-bg,#e2e8f0)] dark:bg-[var(--zui-button-secondary-bg-dark,#1e293b)] text-[color:var(--zui-button-secondary-fg,#0f172a)] dark:text-[color:var(--zui-button-secondary-fg-dark,#f8fafc)] hover:bg-[var(--zui-button-secondary-bg-hover,#cbd5e1)] dark:hover:bg-[var(--zui-button-secondary-bg-hover-dark,#334155)]\",\n  destructive:\n    \"bg-[var(--zui-button-destructive-bg,#f43f5e)] dark:bg-[var(--zui-button-destructive-bg-dark,#be123c)] text-[color:var(--zui-button-destructive-fg,#ffffff)] dark:text-[color:var(--zui-button-destructive-fg-dark,#ffffff)] hover:bg-[var(--zui-button-destructive-bg-hover,#f43f5e)] dark:hover:bg-[var(--zui-button-destructive-bg-hover-dark,#9f1239)]\",\n  outline:\n    \"border border-[color:var(--zui-button-outline-border,#0000001a)] dark:border-[color:var(--zui-button-outline-border-dark,#ffffff1a)] bg-[var(--zui-button-outline-bg,#0000000d)] dark:bg-[var(--zui-button-outline-bg-dark,#ffffff0d)] text-[color:var(--zui-button-outline-fg,#0f172a)] dark:text-[color:var(--zui-button-outline-fg-dark,#f8fafc)] hover:bg-[var(--zui-button-outline-bg-hover,#0000001a)] dark:hover:bg-[var(--zui-button-outline-bg-hover-dark,#ffffff1a)]\",\n  ghost:\n    \"bg-transparent text-[color:var(--zui-button-ghost-fg,#334155)] dark:text-[color:var(--zui-button-ghost-fg-dark,#e2e8f0)] hover:bg-[var(--zui-button-ghost-bg-hover,#0000000d)] dark:hover:bg-[var(--zui-button-ghost-bg-hover-dark,#ffffff0d)]\",\n  link: \"bg-transparent text-[color:var(--zui-button-link-fg,#0e7490)] dark:text-[color:var(--zui-button-link-fg-dark,#67e8f9)] underline-offset-4 hover:underline\",\n  glass:\n    \"border border-[color:var(--zui-button-glass-border,#00000026)] dark:border-[color:var(--zui-button-glass-border-dark,#ffffff26)] bg-[var(--zui-button-glass-bg,#0000001a)] dark:bg-[var(--zui-button-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-button-glass-fg,#0f172a)] dark:text-[color:var(--zui-button-glass-fg-dark,#ffffff)] backdrop-blur-md hover:bg-[var(--zui-button-glass-bg-hover,#00000026)] dark:hover:bg-[var(--zui-button-glass-bg-hover-dark,#ffffff26)]\",\n  emerald:\n    \"bg-[var(--zui-button-emerald-bg,#10b981)] dark:bg-[var(--zui-button-emerald-bg-dark,#065f46)] text-[color:var(--zui-button-emerald-fg,#ffffff)] dark:text-[color:var(--zui-button-emerald-fg-dark,#ffffff)] hover:bg-[var(--zui-button-emerald-bg-hover,#10b981)] dark:hover:bg-[var(--zui-button-emerald-bg-hover-dark,#064e3b)]\",\n  indigo:\n    \"bg-[var(--zui-button-indigo-bg,#3730a3)] dark:bg-[var(--zui-button-indigo-bg-dark,#4f46e5)] text-[color:var(--zui-button-indigo-fg,#ffffff)] dark:text-[color:var(--zui-button-indigo-fg-dark,#ffffff)] hover:bg-[var(--zui-button-indigo-bg-hover,#3730a3)] dark:hover:bg-[var(--zui-button-indigo-bg-hover-dark,#4f46e5)]\",\n  purple:\n    \"bg-[var(--zui-button-purple-bg,#6b21a8)] dark:bg-[var(--zui-button-purple-bg-dark,#9333ea)] text-[color:var(--zui-button-purple-fg,#ffffff)] dark:text-[color:var(--zui-button-purple-fg-dark,#ffffff)] hover:bg-[var(--zui-button-purple-bg-hover,#6b21a8)] dark:hover:bg-[var(--zui-button-purple-bg-hover-dark,#9333ea)]\",\n  pink: \"bg-[var(--zui-button-pink-bg,#9d174d)] dark:bg-[var(--zui-button-pink-bg-dark,#db2777)] text-[color:var(--zui-button-pink-fg,#ffffff)] dark:text-[color:var(--zui-button-pink-fg-dark,#ffffff)] hover:bg-[var(--zui-button-pink-bg-hover,#9d174d)] dark:hover:bg-[var(--zui-button-pink-bg-hover-dark,#db2777)]\",\n  rose: \"bg-[var(--zui-button-rose-bg,#9f1239)] dark:bg-[var(--zui-button-rose-bg-dark,#e11d48)] text-[color:var(--zui-button-rose-fg,#ffffff)] dark:text-[color:var(--zui-button-rose-fg-dark,#ffffff)] hover:bg-[var(--zui-button-rose-bg-hover,#9f1239)] dark:hover:bg-[var(--zui-button-rose-bg-hover-dark,#e11d48)]\",\n  sky: \"bg-[var(--zui-button-sky-bg,#0ea5e9)] dark:bg-[var(--zui-button-sky-bg-dark,#0369a1)] text-[color:var(--zui-button-sky-fg,#ffffff)] dark:text-[color:var(--zui-button-sky-fg-dark,#ffffff)] hover:bg-[var(--zui-button-sky-bg-hover,#0ea5e9)] dark:hover:bg-[var(--zui-button-sky-bg-hover-dark,#075985)]\",\n  teal: \"bg-[var(--zui-button-teal-bg,#14b8a6)] dark:bg-[var(--zui-button-teal-bg-dark,#0f766e)] text-[color:var(--zui-button-teal-fg,#ffffff)] dark:text-[color:var(--zui-button-teal-fg-dark,#ffffff)] hover:bg-[var(--zui-button-teal-bg-hover,#14b8a6)] dark:hover:bg-[var(--zui-button-teal-bg-hover-dark,#115e59)]\",\n  yellow:\n    \"bg-[var(--zui-button-yellow-bg,#eab308)] dark:bg-[var(--zui-button-yellow-bg-dark,#854d0e)] text-[color:var(--zui-button-yellow-fg,#ffffff)] dark:text-[color:var(--zui-button-yellow-fg-dark,#ffffff)] hover:bg-[var(--zui-button-yellow-bg-hover,#eab308)] dark:hover:bg-[var(--zui-button-yellow-bg-hover-dark,#713f12)]\",\n  orange:\n    \"bg-[var(--zui-button-orange-bg,#f97316)] dark:bg-[var(--zui-button-orange-bg-dark,#9a3412)] text-[color:var(--zui-button-orange-fg,#ffffff)] dark:text-[color:var(--zui-button-orange-fg-dark,#ffffff)] hover:bg-[var(--zui-button-orange-bg-hover,#f97316)] dark:hover:bg-[var(--zui-button-orange-bg-hover-dark,#7c2d12)]\",\n  gray: \"bg-[var(--zui-button-gray-bg,#6b7280)] dark:bg-[var(--zui-button-gray-bg-dark,#374151)] text-[color:var(--zui-button-gray-fg,#ffffff)] dark:text-[color:var(--zui-button-gray-fg-dark,#ffffff)] hover:bg-[var(--zui-button-gray-bg-hover,#6b7280)] dark:hover:bg-[var(--zui-button-gray-bg-hover-dark,#1f2937)]\",\n  amber:\n    \"bg-[var(--zui-button-amber-bg,#f59e0b)] dark:bg-[var(--zui-button-amber-bg-dark,#92400e)] text-[color:var(--zui-button-amber-fg,#ffffff)] dark:text-[color:var(--zui-button-amber-fg-dark,#ffffff)] hover:bg-[var(--zui-button-amber-bg-hover,#f59e0b)] dark:hover:bg-[var(--zui-button-amber-bg-hover-dark,#78350f)]\",\n  violet:\n    \"bg-[var(--zui-button-violet-bg,#5b21b6)] dark:bg-[var(--zui-button-violet-bg-dark,#7c3aed)] text-[color:var(--zui-button-violet-fg,#ffffff)] dark:text-[color:var(--zui-button-violet-fg-dark,#ffffff)] hover:bg-[var(--zui-button-violet-bg-hover,#5b21b6)] dark:hover:bg-[var(--zui-button-violet-bg-hover-dark,#7c3aed)]\",\n  \"gradient-blue\":\n    \"bg-linear-to-r from-[var(--zui-button-gradient-blue-from,#1e40af)] dark:from-[var(--zui-button-gradient-blue-from-dark,#2563eb)] to-[var(--zui-button-gradient-blue-to,#6b21a8)] dark:to-[var(--zui-button-gradient-blue-to-dark,#9333ea)] text-[color:var(--zui-button-gradient-blue-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-blue-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-blue-from-hover,#1e40af)] dark:hover:from-[var(--zui-button-gradient-blue-from-hover-dark,#2563eb)] hover:to-[var(--zui-button-gradient-blue-to-hover,#6b21a8)] dark:hover:to-[var(--zui-button-gradient-blue-to-hover-dark,#9333ea)]\",\n  \"gradient-green\":\n    \"bg-linear-to-r from-[var(--zui-button-gradient-green-from,#166534)] dark:from-[var(--zui-button-gradient-green-from-dark,#16a34a)] to-[var(--zui-button-gradient-green-to,#3f6212)] dark:to-[var(--zui-button-gradient-green-to-dark,#65a30d)] text-[color:var(--zui-button-gradient-green-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-green-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-green-from-hover,#166534)] dark:hover:from-[var(--zui-button-gradient-green-from-hover-dark,#16a34a)] hover:to-[var(--zui-button-gradient-green-to-hover,#3f6212)] dark:hover:to-[var(--zui-button-gradient-green-to-hover-dark,#65a30d)]\",\n  \"gradient-red\":\n    \"bg-linear-to-r from-[var(--zui-button-gradient-red-from,#991b1b)] dark:from-[var(--zui-button-gradient-red-from-dark,#dc2626)] to-[var(--zui-button-gradient-red-to,#9d174d)] dark:to-[var(--zui-button-gradient-red-to-dark,#db2777)] text-[color:var(--zui-button-gradient-red-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-red-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-red-from-hover,#991b1b)] dark:hover:from-[var(--zui-button-gradient-red-from-hover-dark,#dc2626)] hover:to-[var(--zui-button-gradient-red-to-hover,#9d174d)] dark:hover:to-[var(--zui-button-gradient-red-to-hover-dark,#db2777)]\",\n  \"gradient-yellow\":\n    \"bg-linear-to-r from-[var(--zui-button-gradient-yellow-from,#854d0e)] dark:from-[var(--zui-button-gradient-yellow-from-dark,#ca8a04)] to-[var(--zui-button-gradient-yellow-to,#9a3412)] dark:to-[var(--zui-button-gradient-yellow-to-dark,#ea580c)] text-[color:var(--zui-button-gradient-yellow-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-yellow-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-yellow-from-hover,#854d0e)] dark:hover:from-[var(--zui-button-gradient-yellow-from-hover-dark,#ca8a04)] hover:to-[var(--zui-button-gradient-yellow-to-hover,#9a3412)] dark:hover:to-[var(--zui-button-gradient-yellow-to-hover-dark,#ea580c)]\",\n  \"gradient-purple\":\n    \"bg-linear-to-r from-[var(--zui-button-gradient-purple-from,#6b21a8)] dark:from-[var(--zui-button-gradient-purple-from-dark,#9333ea)] to-[var(--zui-button-gradient-purple-to,#9d174d)] dark:to-[var(--zui-button-gradient-purple-to-dark,#db2777)] text-[color:var(--zui-button-gradient-purple-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-purple-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-purple-from-hover,#6b21a8)] dark:hover:from-[var(--zui-button-gradient-purple-from-hover-dark,#9333ea)] hover:to-[var(--zui-button-gradient-purple-to-hover,#9d174d)] dark:hover:to-[var(--zui-button-gradient-purple-to-hover-dark,#db2777)]\",\n  \"gradient-teal\":\n    \"bg-linear-to-r from-[var(--zui-button-gradient-teal-from,#115e59)] dark:from-[var(--zui-button-gradient-teal-from-dark,#0d9488)] to-[var(--zui-button-gradient-teal-to,#155e75)] dark:to-[var(--zui-button-gradient-teal-to-dark,#0891b2)] text-[color:var(--zui-button-gradient-teal-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-teal-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-teal-from-hover,#115e59)] dark:hover:from-[var(--zui-button-gradient-teal-from-hover-dark,#0d9488)] hover:to-[var(--zui-button-gradient-teal-to-hover,#155e75)] dark:hover:to-[var(--zui-button-gradient-teal-to-hover-dark,#0891b2)]\",\n  \"gradient-indigo\":\n    \"bg-linear-to-r from-[var(--zui-button-gradient-indigo-from,#3730a3)] dark:from-[var(--zui-button-gradient-indigo-from-dark,#4f46e5)] to-[var(--zui-button-gradient-indigo-to,#6b21a8)] dark:to-[var(--zui-button-gradient-indigo-to-dark,#9333ea)] text-[color:var(--zui-button-gradient-indigo-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-indigo-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-indigo-from-hover,#3730a3)] dark:hover:from-[var(--zui-button-gradient-indigo-from-hover-dark,#4f46e5)] hover:to-[var(--zui-button-gradient-indigo-to-hover,#6b21a8)] dark:hover:to-[var(--zui-button-gradient-indigo-to-hover-dark,#9333ea)]\",\n  \"gradient-pink\":\n    \"bg-linear-to-r from-[var(--zui-button-gradient-pink-from,#9d174d)] dark:from-[var(--zui-button-gradient-pink-from-dark,#db2777)] to-[var(--zui-button-gradient-pink-to,#9f1239)] dark:to-[var(--zui-button-gradient-pink-to-dark,#e11d48)] text-[color:var(--zui-button-gradient-pink-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-pink-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-pink-from-hover,#9d174d)] dark:hover:from-[var(--zui-button-gradient-pink-from-hover-dark,#db2777)] hover:to-[var(--zui-button-gradient-pink-to-hover,#9f1239)] dark:hover:to-[var(--zui-button-gradient-pink-to-hover-dark,#e11d48)]\",\n  \"gradient-orange\":\n    \"bg-linear-to-r from-[var(--zui-button-gradient-orange-from,#9a3412)] dark:from-[var(--zui-button-gradient-orange-from-dark,#ea580c)] to-[var(--zui-button-gradient-orange-to,#991b1b)] dark:to-[var(--zui-button-gradient-orange-to-dark,#dc2626)] text-[color:var(--zui-button-gradient-orange-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-orange-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-orange-from-hover,#9a3412)] dark:hover:from-[var(--zui-button-gradient-orange-from-hover-dark,#ea580c)] hover:to-[var(--zui-button-gradient-orange-to-hover,#991b1b)] dark:hover:to-[var(--zui-button-gradient-orange-to-hover-dark,#dc2626)]\",\n} as const;\n\nexport const zuiButtonSizes = {\n  sm: \"h-7 md:h-9 px-3 text-xs\",\n  md: \"h-9 md:h-11 px-4\",\n  lg: \"h-10 md:h-12 px-5 text-base\",\n  xl: \"h-12 md:h-14 px-6 text-lg\",\n  \"2xl\": \"h-14 md:h-16 px-6 md:px-8 text-xl\",\n  \"3xl\": \"h-16 md:h-18 px-8 md:px-10 text-2xl\",\n  \"4xl\": \"h-18 md:h-20 px-10 md:px-12 text-2xl\",\n  \"5xl\": \"h-20 md:h-22 px-12 md:px-14 text-2xl\",\n  \"6xl\": \"h-22 md:h-24 px-14 md:px-16 text-2xl\",\n  \"7xl\": \"h-24 md:h-26 px-16 md:px-18 text-2xl\",\n  \"8xl\": \"h-26 md:h-28 px-20 text-2xl\",\n  \"9xl\": \"h-24 md:h-30 px-18 md:px-22 text-2xl\",\n  \"10xl\": \"h-26 md:h-32 px-20 md:px-24 text-2xl\",\n  icon: \"h-10 w-10\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiButtonAppearances,\n  zuiButtonBase,\n  zuiButtonSizes,\n} from \"../../design-system\";\n\nexport const buttonVariants = cva(zuiButtonBase, {\n  variants: {\n    appearance: zuiButtonAppearances,\n    size: zuiButtonSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n"]}

package/dist/chunk-4ZP444GA.mjs

@@ -0,0 +1,19 @@
+// src/design-system/tokens.ts
+var zuiCssVariablePattern = "--zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?";
+var zuiInteractiveBase = ["transition-colors", "select-none"];
+var zuiDisabledState = {
+  default: "disabled:pointer-events-none disabled:opacity-50"
+};
+var zuiFocusRing = {
+  default: "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-focus-ring,oklch(44.6%_0.043_257.281))] dark:focus-visible:ring-[var(--zui-focus-ring-dark,oklch(86.9%_0.022_252.894))] focus-visible:ring-offset-2"
+};
+var zuiRingOffset = {
+  default: "ring-offset-[var(--zui-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-ring-offset-dark,oklch(12.9%_0.042_264.695))]"
+};
+var zuiRadius = {
+  xl: "rounded-[var(--zui-radius-xl,0.75rem)]"
+};
+
+export { zuiCssVariablePattern, zuiDisabledState, zuiFocusRing, zuiInteractiveBase, zuiRadius, zuiRingOffset };
+//# sourceMappingURL=chunk-4ZP444GA.mjs.map
+//# sourceMappingURL=chunk-4ZP444GA.mjs.map

package/dist/chunk-4ZP444GA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/design-system/tokens.ts"],"names":[],"mappings":";AAAO,IAAM,qBAAA,GACX;AAEK,IAAM,kBAAA,GAAqB,CAAC,mBAAA,EAAqB,aAAa;AAE9D,IAAM,gBAAA,GAAmB;AAAA,EAC9B,OAAA,EAAS;AACX;AAEO,IAAM,YAAA,GAAe;AAAA,EAC1B,OAAA,EACE;AACJ;AAEO,IAAM,aAAA,GAAgB;AAAA,EAC3B,OAAA,EACE;AACJ;AAEO,IAAM,SAAA,GAAY;AAAA,EACvB,EAAA,EAAI;AACN","file":"chunk-4ZP444GA.mjs","sourcesContent":["export const zuiCssVariablePattern =\n  \"--zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?\" as const;\n\nexport const zuiInteractiveBase = [\"transition-colors\", \"select-none\"] as const;\n\nexport const zuiDisabledState = {\n  default: \"disabled:pointer-events-none disabled:opacity-50\",\n} as const;\n\nexport const zuiFocusRing = {\n  default:\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-focus-ring,oklch(44.6%_0.043_257.281))] dark:focus-visible:ring-[var(--zui-focus-ring-dark,oklch(86.9%_0.022_252.894))] focus-visible:ring-offset-2\",\n} as const;\n\nexport const zuiRingOffset = {\n  default:\n    \"ring-offset-[var(--zui-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-ring-offset-dark,oklch(12.9%_0.042_264.695))]\",\n} as const;\n\nexport const zuiRadius = {\n  xl: \"rounded-[var(--zui-radius-xl,0.75rem)]\",\n} as const;\n"]}

package/dist/{chunk-HDO5ZM2S.mjs → chunk-CIEZFHCO.mjs}

@@ -1,13 +1,6 @@
+import { zuiInteractiveBase, zuiDisabledState } from './chunk-4ZP444GA.mjs';
 import { cva } from 'class-variance-authority';
 
-// src/ui/buttons/variants.ts
-
-// src/design-system/tokens.ts
-var zuiInteractiveBase = ["transition-colors", "select-none"];
-var zuiDisabledState = {
-  default: "disabled:pointer-events-none disabled:opacity-50"
-};
-
 // src/design-system/button.ts
 var zuiButtonBase = [
   "inline-flex items-center justify-center gap-2 whitespace-nowrap",
@@ -78,5 +71,5 @@ var buttonVariants = cva(zuiButtonBase, {
 });
 
 export { buttonVariants };
-//# sourceMappingURL=chunk-HDO5ZM2S.mjs.map
-//# sourceMappingURL=chunk-HDO5ZM2S.mjs.map
+//# sourceMappingURL=chunk-CIEZFHCO.mjs.map
+//# sourceMappingURL=chunk-CIEZFHCO.mjs.map