@zentauri-ui/zentauri-components 2.0.0 → 2.1.1

package/CHANGELOG.md

@@ -1,21 +1,28 @@
 # @zentauri-ui/zentauri-components Changelog
 
+## 2.2.0
+
+### Minor Changes
+
+- 398393d: Add compact global theme tokens and generated theme CSS support for the Zentauri UI token system.
+
 ## 2.0.0
 
 ### Major Changes
 
 #### Extender hooks list
-- useEventListener	Fundamental utility — safely attach/remove any DOM event
-- usePrevious	Track previous value across renders — very common pattern
-- useInterval / useTimeout	Safe, cleanup-aware timer hooks
-- useCountdown	Countdown timer with pause/resume
-- useKeyPress / useHotkeys	Keyboard shortcut management
-- useScrollPosition	Track scroll X/Y (differs from useInView)
-- useCookie	Cookie read/write with reactive updates
-- useGeolocation	Browser geolocation with permission state
-- useLongPress	Long-press gesture support
-- useVirtualList	Virtual scrolling for large lists (critical for performance)
-- useIdleTimeout	Detect user inactivity (session management)
+
+- useEventListener Fundamental utility — safely attach/remove any DOM event
+- usePrevious Track previous value across renders — very common pattern
+- useInterval / useTimeout Safe, cleanup-aware timer hooks
+- useCountdown Countdown timer with pause/resume
+- useKeyPress / useHotkeys Keyboard shortcut management
+- useScrollPosition Track scroll X/Y (differs from useInView)
+- useCookie Cookie read/write with reactive updates
+- useGeolocation Browser geolocation with permission state
+- useLongPress Long-press gesture support
+- useVirtualList Virtual scrolling for large lists (critical for performance)
+- useIdleTimeout Detect user inactivity (session management)
 
 ## 1.9.0
 

package/README.md

@@ -30,15 +30,16 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | Metric     | Result           |
 | ---------- | ---------------- |
 | Test files | 92 passed (92)   |
-| Tests      | 697 passed (697) |
+| Tests      | 707 passed (707) |
 
 | Area                        | Test files | Tests |
 | --------------------------- | ---------- | ----- |
-| Components and UI utilities | 47         | 452   |
+| Components and UI utilities | 46         | 453   |
 | Standalone animations       | 1          | 45    |
 | React hooks                 | 41         | 174   |
 | Design system facade        | 1          | 11    |
-| CLI and import rewriting    | 2          | 15    |
+| CLI and import rewriting    | 2          | 18    |
+| Axe core test cases         | 1          | 6     |
 
 ### Per-suite snapshot
 
@@ -48,15 +49,15 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | `src/ui/buttons/button.test.tsx`                                        |    44 |
 | `src/ui/inputs/input.test.tsx`                                          |    40 |
 | `src/ui/peer-isolation.test.ts`                                         |    29 |
-| `src/ui/combobox/combobox.test.tsx`                                     |    21 |
+| `src/ui/combobox/combobox.test.tsx`                                     |    24 |
 | `src/ui/pagination/pagination.test.tsx`                                 |    15 |
 | `src/ui/timeline/timeline.test.tsx`                                     |    14 |
+| `cli/cli.integration.test.ts`                                           |    13 |
 | `src/lib/facade.test.ts`                                                |    11 |
 | `src/ui/alert/alert.test.tsx`                                           |    11 |
 | `src/ui/rating/rating.test.tsx`                                         |    11 |
 | `src/ui/select/select.test.tsx`                                         |    11 |
 | `src/ui/table/table.test.tsx`                                           |    11 |
-| `cli/cli.integration.test.ts`                                           |    10 |
 | `src/hooks/usePagination/usePagination.test.ts`                         |    10 |
 | `src/ui/context-menu/context-menu.test.tsx`                             |    10 |
 | `src/ui/marquee/marquee.test.tsx`                                       |    10 |
@@ -67,6 +68,7 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | `src/hooks/useTableFilter/useTableFilter.test.ts`                       |     9 |
 | `src/ui/animated-number/animated-number.test.tsx`                       |     9 |
 | `src/ui/slider/slider.test.tsx`                                         |     9 |
+| `src/ui/command/command.test.tsx`                                       |     8 |
 | `src/ui/copy-button/copy-button.test.tsx`                               |     8 |
 | `src/ui/dynamic-stepper/dynamic-stepper.test.tsx`                       |     8 |
 | `src/ui/progress/progress.test.tsx`                                     |     8 |
@@ -78,10 +80,10 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | `src/hooks/useTableSort/useTableSort.test.ts`                           |     7 |
 | `src/ui/accordion/accordion.test.tsx`                                   |     7 |
 | `src/ui/card/card.test.tsx`                                             |     7 |
-| `src/ui/command/command.test.tsx`                                       |     7 |
 | `src/ui/drawer/drawer.test.tsx`                                         |     7 |
 | `src/ui/kbd/kbd.test.tsx`                                               |     7 |
 | `src/ui/typography/typography.test.tsx`                                 |     7 |
+| `src/accessibility/axe-core.test.tsx`                                   |     6 |
 | `src/charts/charts.test.tsx`                                            |     6 |
 | `src/hooks/useClipboard/useClipboard.test.ts`                           |     6 |
 | `src/hooks/useCountdown/useCountdown.test.ts`                           |     6 |
@@ -90,21 +92,21 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | `src/hooks/useKeyPress/useKeyPress.test.ts`                             |     6 |
 | `src/hooks/useLocalStorage/useLocalStorage.test.ts`                     |     6 |
 | `src/hooks/useVirtualList/useVirtualList.test.ts`                       |     6 |
-| `src/ui/accessibility/axe-core.test.tsx`                                |     6 |
 | `src/ui/badge/badge.test.tsx`                                           |     6 |
 | `src/ui/checkbox/checkbox.test.tsx`                                     |     6 |
 | `src/ui/divider/divider.test.tsx`                                       |     6 |
 | `src/ui/dropdown/dropdown.test.tsx`                                     |     6 |
 | `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 |
 | `src/hooks/useScrollPosition/useScrollPosition.test.ts`                 |     5 |
 | `src/hooks/useTimeout/useTimeout.test.ts`                               |     5 |
+| `src/ui/popover/popover.test.tsx`                                       |     5 |
 | `src/ui/radio-group/radio-group.test.tsx`                               |     5 |
-| `src/ui/toast/toast.test.tsx`                                           |     5 |
 | `src/ui/toggle/toggle.test.tsx`                                         |     5 |
 | `src/hooks/useBodyScrollLock/useBodyScrollLock.test.ts`                 |     4 |
 | `src/hooks/useControllableState/useControllableState.test.ts`           |     4 |
@@ -115,7 +117,7 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | `src/ui/avatar/avatar.test.tsx`                                         |     4 |
 | `src/ui/breadcrumb/breadcrumb.test.tsx`                                 |     4 |
 | `src/ui/file-upload/file-upload.test.tsx`                               |     4 |
-| `src/ui/popover/popover.test.tsx`                                       |     4 |
+| `src/ui/tabs/tabs.test.tsx`                                             |     4 |
 | `src/ui/tooltip/tooltip.test.tsx`                                       |     4 |
 | `src/hooks/useClickOutside/useClickOutside.test.tsx`                    |     3 |
 | `src/hooks/useDocumentTitle/useDocumentTitle.test.ts`                   |     3 |
@@ -123,7 +125,6 @@ Generated from the component package Vitest JSON report via `pnpm --filter @zent
 | `src/hooks/useIsMounted/useIsMounted.test.ts`                           |     3 |
 | `src/hooks/usePrevious/usePrevious.test.ts`                             |     3 |
 | `src/hooks/useSessionStorage/useSessionStorage.test.ts`                 |     3 |
-| `src/ui/tabs/tabs.test.tsx`                                             |     3 |
 | `src/hooks/useHover/useHover.test.ts`                                   |     2 |
 | `src/hooks/useIntersectionObserver/useIntersectionObserver.test.ts`     |     2 |
 | `src/hooks/useMediaQuery/useMediaQuery.test.ts`                         |     2 |
@@ -845,7 +846,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 697 test cases in total
+- `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // currently covered 707 test cases in total
 - `pnpm test:a11y` — focused **axe-core** accessibility smoke coverage for package-level UI primitives and 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

@@ -162,6 +162,58 @@ describe("zentauri-ui CLI", () => {
     }
   });
 
+  it("should generate compact global theme CSS", () => {
+    const dir = mkdtempSync(join(tmpdir(), "zentauri-cli-theme-"));
+    try {
+      const out = runCli(dir, ["theme", "#2563eb", "--dark", "#60a5fa"]);
+      const tokenCount = (out.match(/^\s*--zui-/gm) ?? []).length;
+      expect(out).toContain("Generated by zentauri-ui theme #2563eb");
+      expect(out).toContain("--zui-brand: #2563eb;");
+      expect(out).toContain("--zui-brand-dark: #60a5fa;");
+      expect(out).toContain("--zui-color-blue: var(--zui-brand);");
+      expect(out).toContain("--zui-color-blue-dark: var(--zui-brand-dark);");
+      expect(out).not.toContain("--zui-button-default-bg:");
+      expect(tokenCount).toBeLessThan(100);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  it("should keep readable dark foreground when default dark brand stays dark", () => {
+    const dir = mkdtempSync(join(tmpdir(), "zentauri-cli-theme-dark-"));
+    try {
+      const out = runCli(dir, ["theme", "#020617"]);
+      expect(out).toContain(
+        "--zui-brand-dark: color-mix(in oklch, #020617 72%, #ffffff);",
+      );
+      expect(out).toContain("--zui-brand-fg-dark: #ffffff;");
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  it("should write compact theme CSS with a custom selector", () => {
+    const dir = mkdtempSync(join(tmpdir(), "zentauri-cli-theme-out-"));
+    try {
+      const out = runCli(dir, [
+        "theme",
+        "38bdf8",
+        "--selector",
+        "[data-theme='zentauri']",
+        "--out",
+        "src/styles/zentauri-theme.css",
+      ]);
+      const themePath = join(dir, "src/styles/zentauri-theme.css");
+      expect(out).toContain("Wrote ");
+      expect(out).toContain("zentauri-theme.css");
+      const css = readFileSync(themePath, "utf8");
+      expect(css).toContain("[data-theme='zentauri'] {");
+      expect(css).toContain("--zui-brand: #38bdf8;");
+    } 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 {

package/cli/index.mjs

@@ -146,6 +146,7 @@ Usage:
   zentauri-components init [options]              Create components.json with defaults
   zentauri-components add <component> [...]       Copy UI components (and their hooks)
   zentauri-components add hook <hook> [...]       Copy hook source only (plus transitive hook deps)
+  zentauri-components theme <hex>                 Generate compact global --zui-* theme tokens
 
 List of components:
 ${componentsList}
@@ -160,6 +161,9 @@ ${hooksList}
 
 Options:
   --cwd <dir>    Working directory (default: process.cwd())
+  --out <file>   Write theme CSS to a file instead of stdout
+  --selector <s> CSS selector for light tokens (default: :root)
+  --dark <hex>   Explicit dark-mode brand color (default: derived from <hex>)
   -h, --help     Show help
   -v, --version  Show package version
 
@@ -175,6 +179,7 @@ Use hooks from the package without copying (after npm install):
 Published package:
   npx @zentauri-ui/zentauri-components init
   npx @zentauri-ui/zentauri-components add accordion buttons inputs
+  npx @zentauri-ui/zentauri-components theme "#2563eb" --dark "#60a5fa" --out zentauri-theme.css
 
 If npx does not pick the right binary:
   npx --yes --package=@zentauri-ui/zentauri-components zentauri-components init
@@ -391,6 +396,259 @@ function resolveHookName(input, registry) {
   );
 }
 
+const THEME_COLOR_NAMES = [
+  "blue",
+  "cyan",
+  "green",
+  "lime",
+  "mint",
+  "ocean",
+  "sapphire",
+  "lavender",
+  "ruby",
+  "red",
+  "slate",
+  "zinc",
+  "stone",
+  "royal",
+  "electric",
+  "forest",
+  "sunset",
+  "magenta",
+  "crimson",
+  "aqua",
+  "plum",
+  "emerald",
+  "indigo",
+  "purple",
+  "pink",
+  "rose",
+  "sky",
+  "teal",
+  "yellow",
+  "orange",
+  "gray",
+  "amber",
+  "violet",
+];
+
+function normalizeHexColor(input) {
+  const raw = input.trim().replace(/^#/, "");
+  if (/^[0-9a-fA-F]{3}$/.test(raw)) {
+    return `#${raw
+      .split("")
+      .map((ch) => `${ch}${ch}`)
+      .join("")
+      .toLowerCase()}`;
+  }
+  if (/^[0-9a-fA-F]{6}$/.test(raw)) {
+    return `#${raw.toLowerCase()}`;
+  }
+  throw new Error(
+    `Invalid brand color "${input}". Use a 3- or 6-digit hex color, for example "#2563eb".`,
+  );
+}
+
+function hexToRgb(hex) {
+  const normalized = normalizeHexColor(hex).slice(1);
+  return {
+    r: Number.parseInt(normalized.slice(0, 2), 16),
+    g: Number.parseInt(normalized.slice(2, 4), 16),
+    b: Number.parseInt(normalized.slice(4, 6), 16),
+  };
+}
+
+function srgbChannelToLinear(value) {
+  const channel = value / 255;
+  return channel <= 0.04045
+    ? channel / 12.92
+    : ((channel + 0.055) / 1.055) ** 2.4;
+}
+
+function linearChannelToSrgb(value) {
+  const channel =
+    value <= 0.0031308 ? 12.92 * value : 1.055 * value ** (1 / 2.4) - 0.055;
+  return Math.min(255, Math.max(0, Math.round(channel * 255)));
+}
+
+function rgbToOklab({ r, g, b }) {
+  const linearR = srgbChannelToLinear(r);
+  const linearG = srgbChannelToLinear(g);
+  const linearB = srgbChannelToLinear(b);
+
+  const l = Math.cbrt(
+    0.4122214708 * linearR + 0.5363325363 * linearG + 0.0514459929 * linearB,
+  );
+  const m = Math.cbrt(
+    0.2119034982 * linearR + 0.6806995451 * linearG + 0.1073969566 * linearB,
+  );
+  const s = Math.cbrt(
+    0.0883024619 * linearR + 0.2817188376 * linearG + 0.6299787005 * linearB,
+  );
+
+  return {
+    l: 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    a: 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    b: 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+  };
+}
+
+function oklabToRgb({ l, a, b }) {
+  const lPrime = l + 0.3963377774 * a + 0.2158037573 * b;
+  const mPrime = l - 0.1055613458 * a - 0.0638541728 * b;
+  const sPrime = l - 0.0894841775 * a - 1.291485548 * b;
+
+  const lCubed = lPrime ** 3;
+  const mCubed = mPrime ** 3;
+  const sCubed = sPrime ** 3;
+
+  return {
+    r: linearChannelToSrgb(
+      4.0767416621 * lCubed - 3.3077115913 * mCubed + 0.2309699292 * sCubed,
+    ),
+    g: linearChannelToSrgb(
+      -1.2684380046 * lCubed + 2.6097574011 * mCubed - 0.3413193965 * sCubed,
+    ),
+    b: linearChannelToSrgb(
+      -0.0041960863 * lCubed - 0.7034186147 * mCubed + 1.707614701 * sCubed,
+    ),
+  };
+}
+
+function rgbToOklch(rgb) {
+  const lab = rgbToOklab(rgb);
+  return {
+    l: lab.l,
+    c: Math.sqrt(lab.a ** 2 + lab.b ** 2),
+    h: Math.atan2(lab.b, lab.a),
+  };
+}
+
+function oklchToRgb({ l, c, h }) {
+  return oklabToRgb({
+    l,
+    a: c * Math.cos(h),
+    b: c * Math.sin(h),
+  });
+}
+
+function mixHexWithWhiteInOklch(hex, weight) {
+  const brand = rgbToOklch(hexToRgb(hex));
+  const white = rgbToOklch({ r: 255, g: 255, b: 255 });
+
+  return oklchToRgb({
+    l: brand.l * weight + white.l * (1 - weight),
+    c: brand.c * weight,
+    h: brand.h,
+  });
+}
+
+function readableTextColorFromRgb({ r, g, b }) {
+  const linear = [r, g, b].map((value) => {
+    const channel = value / 255;
+    return channel <= 0.03928
+      ? channel / 12.92
+      : ((channel + 0.055) / 1.055) ** 2.4;
+  });
+  const luminance =
+    0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2];
+  return luminance > 0.56 ? "#0f172a" : "#ffffff";
+}
+
+function readableTextColor(hex) {
+  return readableTextColorFromRgb(hexToRgb(hex));
+}
+
+function buildCompactThemeCss(hex, options = {}) {
+  const brand = normalizeHexColor(hex);
+  const darkBrand = options.dark
+    ? normalizeHexColor(options.dark)
+    : `color-mix(in oklch, ${brand} 72%, #ffffff)`;
+  const brandFg = readableTextColor(brand);
+  const darkBrandFg = options.dark
+    ? readableTextColor(darkBrand)
+    : readableTextColorFromRgb(mixHexWithWhiteInOklch(brand, 0.72));
+  const selector = options.selector || ":root";
+  const lightTokens = [
+    ["--zui-ring-offset", "#f8fafc"],
+    ["--zui-focus-ring", "color-mix(in oklch, var(--zui-brand) 72%, #475569)"],
+    ["--zui-surface-muted", "#e2e8f0"],
+    [
+      "--zui-surface-soft",
+      "color-mix(in oklch, var(--zui-brand) 8%, transparent)",
+    ],
+    [
+      "--zui-surface-hover",
+      "color-mix(in oklch, var(--zui-brand) 14%, transparent)",
+    ],
+    ["--zui-border", "color-mix(in oklch, var(--zui-brand) 24%, transparent)"],
+    ["--zui-fg", "#0f172a"],
+    ["--zui-fg-muted", "#475569"],
+    ["--zui-brand", brand],
+    ["--zui-brand-hover", "color-mix(in oklch, var(--zui-brand) 88%, #000000)"],
+    ["--zui-brand-fg", brandFg],
+    ["--zui-status-success", "#16a34a"],
+    ["--zui-status-warning", "#d97706"],
+    ["--zui-status-error", "#e11d48"],
+    ["--zui-status-info", "#0284c7"],
+    ...THEME_COLOR_NAMES.map((name) => [
+      `--zui-color-${name}`,
+      "var(--zui-brand)",
+    ]),
+  ];
+  const darkTokens = [
+    ["--zui-ring-offset-dark", "#020617"],
+    [
+      "--zui-focus-ring-dark",
+      "color-mix(in oklch, var(--zui-brand-dark) 72%, #cbd5e1)",
+    ],
+    ["--zui-surface-muted-dark", "#1e293b"],
+    [
+      "--zui-surface-soft-dark",
+      "color-mix(in oklch, var(--zui-brand-dark) 12%, transparent)",
+    ],
+    [
+      "--zui-surface-hover-dark",
+      "color-mix(in oklch, var(--zui-brand-dark) 18%, transparent)",
+    ],
+    [
+      "--zui-border-dark",
+      "color-mix(in oklch, var(--zui-brand-dark) 28%, transparent)",
+    ],
+    ["--zui-fg-dark", "#f8fafc"],
+    ["--zui-fg-muted-dark", "#cbd5e1"],
+    ["--zui-brand-dark", darkBrand],
+    [
+      "--zui-brand-hover-dark",
+      "color-mix(in oklch, var(--zui-brand-dark) 88%, #ffffff)",
+    ],
+    ["--zui-brand-fg-dark", darkBrandFg],
+    ["--zui-status-success-dark", "#22c55e"],
+    ["--zui-status-warning-dark", "#f59e0b"],
+    ["--zui-status-error-dark", "#fb7185"],
+    ["--zui-status-info-dark", "#38bdf8"],
+    ...THEME_COLOR_NAMES.map((name) => [
+      `--zui-color-${name}-dark`,
+      "var(--zui-brand-dark)",
+    ]),
+  ];
+
+  const render = (scope, tokens) =>
+    `${scope} {\n${tokens.map(([name, value]) => `  ${name}: ${value};`).join("\n")}\n}`;
+
+  return [
+    "/*",
+    ` * Generated by zentauri-ui theme ${brand}`,
+    ` * Compact global token mode: ${lightTokens.length + darkTokens.length} variables`,
+    " */",
+    "",
+    render(selector, lightTokens),
+    "",
+    render(".dark", darkTokens),
+    "",
+  ].join("\n");
+}
+
 /**
  * Starting from hook folder names discovered in UI code, expands the set to
  * include every hook that those hooks import from **sibling** hook packages
@@ -792,6 +1050,29 @@ async function cmdAdd(names, cwd) {
   printAdoptionHints(resolvedNames, registry, config);
 }
 
+async function cmdTheme(hex, options, cwd) {
+  if (!hex) {
+    console.error(
+      'Usage: zentauri-components theme <hex>  (e.g. theme "#2563eb" --dark "#60a5fa" --out zentauri-theme.css)',
+    );
+    process.exitCode = 1;
+    return;
+  }
+
+  const css = buildCompactThemeCss(hex, {
+    dark: options.dark,
+    selector: options.selector,
+  });
+  if (options.out) {
+    const outPath = resolve(cwd, options.out);
+    await mkdir(dirname(outPath), { recursive: true });
+    await writeFile(outPath, css, "utf8");
+    console.log(`Wrote ${outPath}`);
+    return;
+  }
+  console.log(css);
+}
+
 /**
  * Parses `process.argv` with `node:util.parseArgs`, dispatches `init` / `add`,
  * or prints help / version. Sets `process.exitCode` for recoverable CLI errors
@@ -818,6 +1099,9 @@ async function main() {
       help: { type: "boolean", short: "h" },
       version: { type: "boolean", short: "v" },
       cwd: { type: "string" },
+      out: { type: "string" },
+      selector: { type: "string" },
+      dark: { type: "string" },
     },
   });
 
@@ -858,6 +1142,10 @@ async function main() {
     await cmdAdd(rest, cwd);
     return;
   }
+  if (cmd === "theme") {
+    await cmdTheme(rest[0], values, cwd);
+    return;
+  }
 
   console.error(`Unknown command: ${cmd}`);
   printHelp();

package/dist/chunk-22FJROCI.js

@@ -0,0 +1,70 @@
+'use strict';
+
+// src/design-system/radio-group.ts
+var zuiRadioGroupRootBase = "grid gap-2";
+var zuiRadioGroupItemBase = "group inline-flex w-fit items-start gap-2.5 text-sm font-medium text-[color:var(--zui-radio-label-fg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-radio-label-fg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))] data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50";
+var zuiRadioGroupControlBase = "grid shrink-0 place-items-center rounded-full border-2 border-[color:var(--zui-radio-border,var(--zui-border,#0000004d))] bg-[var(--zui-radio-bg,var(--zui-surface-muted,transparent))] dark:bg-[var(--zui-radio-bg-dark,var(--zui-surface-muted-dark,transparent))] transition-[background-color,border-color,box-shadow] peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--zui-radio-ring-focus,var(--zui-focus-ring,oklch(44.6%_0.043_257.281_/_0.7)))] peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-[var(--zui-radio-ring-offset-focus,var(--zui-ring-offset,oklch(98.4%_0.003_247.858)))] dark:border-[color:var(--zui-radio-border-dark,var(--zui-border-dark,#ffffff4d))] dark:peer-focus-visible:ring-[var(--zui-radio-ring-focus-dark,var(--zui-focus-ring-dark,oklch(86.9%_0.022_252.894_/_0.7)))] dark:peer-focus-visible:ring-offset-[var(--zui-radio-ring-offset-focus-dark,var(--zui-ring-offset-dark,oklch(12.9%_0.042_264.695)))] group-data-[disabled=true]:cursor-not-allowed";
+var zuiRadioGroupIndicatorBase = "pointer-events-none block rounded-full opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100";
+var zuiRadioGroupSizes = {
+  sm: {
+    item: "text-xs",
+    control: "mt-0.5 size-4",
+    indicator: "size-1.5"
+  },
+  md: {
+    item: "text-sm",
+    control: "mt-0.5 size-5",
+    indicator: "size-2"
+  },
+  lg: {
+    item: "text-base",
+    control: "mt-0.5 size-6",
+    indicator: "size-2.5"
+  }
+};
+var zuiRadioGroupAppearances = {
+  default: "group-data-[state=checked]:border-[color:var(--zui-radio-default-border-checked,var(--zui-border,oklch(44.6%_0.043_257.281)))] dark:group-data-[state=checked]:border-[color:var(--zui-radio-default-border-checked-dark,var(--zui-border-dark,oklch(44.6%_0.043_257.281)))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-default-indicator-bg,var(--zui-surface-muted,oklch(44.6%_0.043_257.281)))] dark:[&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-default-indicator-bg-dark,var(--zui-surface-muted-dark,oklch(44.6%_0.043_257.281)))]",
+  success: "group-data-[state=checked]:border-[color:var(--zui-radio-success-border-checked,var(--zui-status-success,oklch(59.6%_0.145_163.225)))] dark:group-data-[state=checked]:border-[color:var(--zui-radio-success-border-checked-dark,var(--zui-status-success-dark,oklch(59.6%_0.145_163.225)))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-success-indicator-bg,var(--zui-status-success,oklch(59.6%_0.145_163.225)))] dark:[&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-success-indicator-bg-dark,var(--zui-status-success-dark,oklch(59.6%_0.145_163.225)))]",
+  warning: "group-data-[state=checked]:border-[color:var(--zui-radio-warning-border-checked,var(--zui-status-warning,oklch(68.1%_0.162_75.834)))] dark:group-data-[state=checked]:border-[color:var(--zui-radio-warning-border-checked-dark,var(--zui-status-warning-dark,oklch(68.1%_0.162_75.834)))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-warning-indicator-bg,var(--zui-status-warning,oklch(68.1%_0.162_75.834)))] dark:[&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-warning-indicator-bg-dark,var(--zui-status-warning-dark,oklch(68.1%_0.162_75.834)))]",
+  error: "group-data-[state=checked]:border-[color:var(--zui-radio-error-border-checked,var(--zui-status-error,oklch(58.6%_0.253_17.585)))] dark:group-data-[state=checked]:border-[color:var(--zui-radio-error-border-checked-dark,var(--zui-status-error-dark,oklch(58.6%_0.253_17.585)))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-error-indicator-bg,var(--zui-status-error,oklch(58.6%_0.253_17.585)))] dark:[&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-error-indicator-bg-dark,var(--zui-status-error-dark,oklch(58.6%_0.253_17.585)))]",
+  info: "group-data-[state=checked]:border-[color:var(--zui-radio-info-border-checked,var(--zui-status-info,oklch(54.6%_0.245_262.881)))] dark:group-data-[state=checked]:border-[color:var(--zui-radio-info-border-checked-dark,var(--zui-status-info-dark,oklch(54.6%_0.245_262.881)))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-info-indicator-bg,var(--zui-status-info,oklch(54.6%_0.245_262.881)))] dark:[&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-info-indicator-bg-dark,var(--zui-status-info-dark,oklch(54.6%_0.245_262.881)))]",
+  violet: "group-data-[state=checked]:border-[color:var(--zui-radio-violet-border-checked,var(--zui-color-violet,oklch(54.1%_0.281_293.009)))] dark:group-data-[state=checked]:border-[color:var(--zui-radio-violet-border-checked-dark,var(--zui-color-violet-dark,oklch(54.1%_0.281_293.009)))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-violet-indicator-bg,color-mix(in oklch, var(--zui-color-violet,oklch(54.1%_0.281_293.009)) 10%, transparent))] dark:[&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-violet-indicator-bg-dark,color-mix(in oklch, var(--zui-color-violet-dark,oklch(54.1%_0.281_293.009)) 18%, transparent))]",
+  amber: "group-data-[state=checked]:border-[color:var(--zui-radio-amber-border-checked,var(--zui-color-amber,oklch(66.6%_0.179_58.318)))] dark:group-data-[state=checked]:border-[color:var(--zui-radio-amber-border-checked-dark,var(--zui-color-amber-dark,oklch(66.6%_0.179_58.318)))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-amber-indicator-bg,color-mix(in oklch, var(--zui-color-amber,oklch(66.6%_0.179_58.318)) 10%, transparent))] dark:[&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-amber-indicator-bg-dark,color-mix(in oklch, var(--zui-color-amber-dark,oklch(66.6%_0.179_58.318)) 18%, transparent))]",
+  pink: "group-data-[state=checked]:border-[color:var(--zui-radio-pink-border-checked,var(--zui-color-pink,oklch(59.2%_0.249_0.584)))] dark:group-data-[state=checked]:border-[color:var(--zui-radio-pink-border-checked-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-pink-indicator-bg,color-mix(in oklch, var(--zui-color-pink,oklch(59.2%_0.249_0.584)) 10%, transparent))] dark:[&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-pink-indicator-bg-dark,color-mix(in oklch, var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)) 18%, transparent))]",
+  indigo: "group-data-[state=checked]:border-[color:var(--zui-radio-indigo-border-checked,var(--zui-color-indigo,oklch(51.1%_0.262_276.966)))] dark:group-data-[state=checked]:border-[color:var(--zui-radio-indigo-border-checked-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))] [&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-indigo-indicator-bg,color-mix(in oklch, var(--zui-color-indigo,oklch(51.1%_0.262_276.966)) 10%, transparent))] dark:[&_[data-slot=radio-group-indicator]]:bg-[var(--zui-radio-indigo-indicator-bg-dark,color-mix(in oklch, var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)) 18%, transparent))]",
+  blue: "border-[color:var(--zui-radio-group-blue-border,var(--zui-color-blue,#2563eb))] dark:border-[color:var(--zui-radio-group-blue-border-dark,var(--zui-color-blue-dark,#3b82f6))] text-[color:var(--zui-radio-group-blue-fg,var(--zui-color-blue,#2563eb))] dark:text-[color:var(--zui-radio-group-blue-fg-dark,var(--zui-color-blue-dark,#3b82f6))] data-[state=checked]:border-[color:var(--zui-radio-group-blue-border-checked,var(--zui-color-blue,#2563eb))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-blue-border-checked-dark,var(--zui-color-blue-dark,#3b82f6))] data-[state=checked]:bg-[var(--zui-radio-group-blue-bg-checked,color-mix(in oklch, var(--zui-color-blue,#2563eb14) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-blue-bg-checked-dark,color-mix(in oklch, var(--zui-color-blue-dark,#3b82f624) 14%, transparent))]",
+  cyan: "border-[color:var(--zui-radio-group-cyan-border,var(--zui-color-cyan,#0891b2))] dark:border-[color:var(--zui-radio-group-cyan-border-dark,var(--zui-color-cyan-dark,#22d3ee))] text-[color:var(--zui-radio-group-cyan-fg,var(--zui-color-cyan,#0891b2))] dark:text-[color:var(--zui-radio-group-cyan-fg-dark,var(--zui-color-cyan-dark,#22d3ee))] data-[state=checked]:border-[color:var(--zui-radio-group-cyan-border-checked,var(--zui-color-cyan,#0891b2))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-cyan-border-checked-dark,var(--zui-color-cyan-dark,#22d3ee))] data-[state=checked]:bg-[var(--zui-radio-group-cyan-bg-checked,color-mix(in oklch, var(--zui-color-cyan,#0891b214) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-cyan-bg-checked-dark,color-mix(in oklch, var(--zui-color-cyan-dark,#22d3ee24) 14%, transparent))]",
+  green: "border-[color:var(--zui-radio-group-green-border,var(--zui-color-green,#16a34a))] dark:border-[color:var(--zui-radio-group-green-border-dark,var(--zui-color-green-dark,#22c55e))] text-[color:var(--zui-radio-group-green-fg,var(--zui-color-green,#16a34a))] dark:text-[color:var(--zui-radio-group-green-fg-dark,var(--zui-color-green-dark,#22c55e))] data-[state=checked]:border-[color:var(--zui-radio-group-green-border-checked,var(--zui-color-green,#16a34a))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-green-border-checked-dark,var(--zui-color-green-dark,#22c55e))] data-[state=checked]:bg-[var(--zui-radio-group-green-bg-checked,color-mix(in oklch, var(--zui-color-green,#16a34a14) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-green-bg-checked-dark,color-mix(in oklch, var(--zui-color-green-dark,#22c55e24) 14%, transparent))]",
+  lime: "border-[color:var(--zui-radio-group-lime-border,var(--zui-color-lime,#65a30d))] dark:border-[color:var(--zui-radio-group-lime-border-dark,var(--zui-color-lime-dark,#a3e635))] text-[color:var(--zui-radio-group-lime-fg,var(--zui-color-lime,#65a30d))] dark:text-[color:var(--zui-radio-group-lime-fg-dark,var(--zui-color-lime-dark,#a3e635))] data-[state=checked]:border-[color:var(--zui-radio-group-lime-border-checked,var(--zui-color-lime,#65a30d))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-lime-border-checked-dark,var(--zui-color-lime-dark,#a3e635))] data-[state=checked]:bg-[var(--zui-radio-group-lime-bg-checked,color-mix(in oklch, var(--zui-color-lime,#65a30d14) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-lime-bg-checked-dark,color-mix(in oklch, var(--zui-color-lime-dark,#a3e63524) 14%, transparent))]",
+  mint: "border-[color:var(--zui-radio-group-mint-border,var(--zui-color-mint,#10b981))] dark:border-[color:var(--zui-radio-group-mint-border-dark,var(--zui-color-mint-dark,#6ee7b7))] text-[color:var(--zui-radio-group-mint-fg,var(--zui-color-mint,#10b981))] dark:text-[color:var(--zui-radio-group-mint-fg-dark,var(--zui-color-mint-dark,#6ee7b7))] data-[state=checked]:border-[color:var(--zui-radio-group-mint-border-checked,var(--zui-color-mint,#10b981))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-mint-border-checked-dark,var(--zui-color-mint-dark,#6ee7b7))] data-[state=checked]:bg-[var(--zui-radio-group-mint-bg-checked,color-mix(in oklch, var(--zui-color-mint,#10b98114) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-mint-bg-checked-dark,color-mix(in oklch, var(--zui-color-mint-dark,#6ee7b724) 14%, transparent))]",
+  ocean: "border-[color:var(--zui-radio-group-ocean-border,var(--zui-color-ocean,#0284c7))] dark:border-[color:var(--zui-radio-group-ocean-border-dark,var(--zui-color-ocean-dark,#38bdf8))] text-[color:var(--zui-radio-group-ocean-fg,var(--zui-color-ocean,#0284c7))] dark:text-[color:var(--zui-radio-group-ocean-fg-dark,var(--zui-color-ocean-dark,#38bdf8))] data-[state=checked]:border-[color:var(--zui-radio-group-ocean-border-checked,var(--zui-color-ocean,#0284c7))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-ocean-border-checked-dark,var(--zui-color-ocean-dark,#38bdf8))] data-[state=checked]:bg-[var(--zui-radio-group-ocean-bg-checked,color-mix(in oklch, var(--zui-color-ocean,#0284c714) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-ocean-bg-checked-dark,color-mix(in oklch, var(--zui-color-ocean-dark,#38bdf824) 14%, transparent))]",
+  sapphire: "border-[color:var(--zui-radio-group-sapphire-border,var(--zui-color-sapphire,#1d4ed8))] dark:border-[color:var(--zui-radio-group-sapphire-border-dark,var(--zui-color-sapphire-dark,#60a5fa))] text-[color:var(--zui-radio-group-sapphire-fg,var(--zui-color-sapphire,#1d4ed8))] dark:text-[color:var(--zui-radio-group-sapphire-fg-dark,var(--zui-color-sapphire-dark,#60a5fa))] data-[state=checked]:border-[color:var(--zui-radio-group-sapphire-border-checked,var(--zui-color-sapphire,#1d4ed8))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-sapphire-border-checked-dark,var(--zui-color-sapphire-dark,#60a5fa))] data-[state=checked]:bg-[var(--zui-radio-group-sapphire-bg-checked,color-mix(in oklch, var(--zui-color-sapphire,#1d4ed814) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-sapphire-bg-checked-dark,color-mix(in oklch, var(--zui-color-sapphire-dark,#60a5fa24) 14%, transparent))]",
+  lavender: "border-[color:var(--zui-radio-group-lavender-border,var(--zui-color-lavender,#8b5cf6))] dark:border-[color:var(--zui-radio-group-lavender-border-dark,var(--zui-color-lavender-dark,#a78bfa))] text-[color:var(--zui-radio-group-lavender-fg,var(--zui-color-lavender,#8b5cf6))] dark:text-[color:var(--zui-radio-group-lavender-fg-dark,var(--zui-color-lavender-dark,#a78bfa))] data-[state=checked]:border-[color:var(--zui-radio-group-lavender-border-checked,var(--zui-color-lavender,#8b5cf6))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-lavender-border-checked-dark,var(--zui-color-lavender-dark,#a78bfa))] data-[state=checked]:bg-[var(--zui-radio-group-lavender-bg-checked,color-mix(in oklch, var(--zui-color-lavender,#8b5cf614) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-lavender-bg-checked-dark,color-mix(in oklch, var(--zui-color-lavender-dark,#a78bfa24) 14%, transparent))]",
+  ruby: "border-[color:var(--zui-radio-group-ruby-border,var(--zui-color-ruby,#be123c))] dark:border-[color:var(--zui-radio-group-ruby-border-dark,var(--zui-color-ruby-dark,#fb7185))] text-[color:var(--zui-radio-group-ruby-fg,var(--zui-color-ruby,#be123c))] dark:text-[color:var(--zui-radio-group-ruby-fg-dark,var(--zui-color-ruby-dark,#fb7185))] data-[state=checked]:border-[color:var(--zui-radio-group-ruby-border-checked,var(--zui-color-ruby,#be123c))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-ruby-border-checked-dark,var(--zui-color-ruby-dark,#fb7185))] data-[state=checked]:bg-[var(--zui-radio-group-ruby-bg-checked,color-mix(in oklch, var(--zui-color-ruby,#be123c14) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-ruby-bg-checked-dark,color-mix(in oklch, var(--zui-color-ruby-dark,#fb718524) 14%, transparent))]",
+  red: "border-[color:var(--zui-radio-group-red-border,var(--zui-color-red,#dc2626))] dark:border-[color:var(--zui-radio-group-red-border-dark,var(--zui-color-red-dark,#ef4444))] text-[color:var(--zui-radio-group-red-fg,var(--zui-color-red,#dc2626))] dark:text-[color:var(--zui-radio-group-red-fg-dark,var(--zui-color-red-dark,#ef4444))] data-[state=checked]:border-[color:var(--zui-radio-group-red-border-checked,var(--zui-color-red,#dc2626))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-red-border-checked-dark,var(--zui-color-red-dark,#ef4444))] data-[state=checked]:bg-[var(--zui-radio-group-red-bg-checked,color-mix(in oklch, var(--zui-color-red,#dc262614) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-red-bg-checked-dark,color-mix(in oklch, var(--zui-color-red-dark,#ef444424) 14%, transparent))]",
+  slate: "border-[color:var(--zui-radio-group-slate-border,var(--zui-color-slate,#475569))] dark:border-[color:var(--zui-radio-group-slate-border-dark,var(--zui-color-slate-dark,#64748b))] text-[color:var(--zui-radio-group-slate-fg,var(--zui-color-slate,#475569))] dark:text-[color:var(--zui-radio-group-slate-fg-dark,var(--zui-color-slate-dark,#64748b))] data-[state=checked]:border-[color:var(--zui-radio-group-slate-border-checked,var(--zui-color-slate,#475569))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-slate-border-checked-dark,var(--zui-color-slate-dark,#64748b))] data-[state=checked]:bg-[var(--zui-radio-group-slate-bg-checked,color-mix(in oklch, var(--zui-color-slate,#47556914) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-slate-bg-checked-dark,color-mix(in oklch, var(--zui-color-slate-dark,#64748b24) 14%, transparent))]",
+  zinc: "border-[color:var(--zui-radio-group-zinc-border,var(--zui-color-zinc,#52525b))] dark:border-[color:var(--zui-radio-group-zinc-border-dark,var(--zui-color-zinc-dark,#71717a))] text-[color:var(--zui-radio-group-zinc-fg,var(--zui-color-zinc,#52525b))] dark:text-[color:var(--zui-radio-group-zinc-fg-dark,var(--zui-color-zinc-dark,#71717a))] data-[state=checked]:border-[color:var(--zui-radio-group-zinc-border-checked,var(--zui-color-zinc,#52525b))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-zinc-border-checked-dark,var(--zui-color-zinc-dark,#71717a))] data-[state=checked]:bg-[var(--zui-radio-group-zinc-bg-checked,color-mix(in oklch, var(--zui-color-zinc,#52525b14) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-zinc-bg-checked-dark,color-mix(in oklch, var(--zui-color-zinc-dark,#71717a24) 14%, transparent))]",
+  stone: "border-[color:var(--zui-radio-group-stone-border,var(--zui-color-stone,#57534e))] dark:border-[color:var(--zui-radio-group-stone-border-dark,var(--zui-color-stone-dark,#78716c))] text-[color:var(--zui-radio-group-stone-fg,var(--zui-color-stone,#57534e))] dark:text-[color:var(--zui-radio-group-stone-fg-dark,var(--zui-color-stone-dark,#78716c))] data-[state=checked]:border-[color:var(--zui-radio-group-stone-border-checked,var(--zui-color-stone,#57534e))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-stone-border-checked-dark,var(--zui-color-stone-dark,#78716c))] data-[state=checked]:bg-[var(--zui-radio-group-stone-bg-checked,color-mix(in oklch, var(--zui-color-stone,#57534e14) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-stone-bg-checked-dark,color-mix(in oklch, var(--zui-color-stone-dark,#78716c24) 14%, transparent))]",
+  royal: "border-[color:var(--zui-radio-group-royal-border,var(--zui-color-royal,#4338ca))] dark:border-[color:var(--zui-radio-group-royal-border-dark,var(--zui-color-royal-dark,#818cf8))] text-[color:var(--zui-radio-group-royal-fg,var(--zui-color-royal,#4338ca))] dark:text-[color:var(--zui-radio-group-royal-fg-dark,var(--zui-color-royal-dark,#818cf8))] data-[state=checked]:border-[color:var(--zui-radio-group-royal-border-checked,var(--zui-color-royal,#4338ca))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-royal-border-checked-dark,var(--zui-color-royal-dark,#818cf8))] data-[state=checked]:bg-[var(--zui-radio-group-royal-bg-checked,color-mix(in oklch, var(--zui-color-royal,#4338ca14) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-royal-bg-checked-dark,color-mix(in oklch, var(--zui-color-royal-dark,#818cf824) 14%, transparent))]",
+  electric: "border-[color:var(--zui-radio-group-electric-border,var(--zui-color-electric,#0ea5e9))] dark:border-[color:var(--zui-radio-group-electric-border-dark,var(--zui-color-electric-dark,#38bdf8))] text-[color:var(--zui-radio-group-electric-fg,var(--zui-color-electric,#0ea5e9))] dark:text-[color:var(--zui-radio-group-electric-fg-dark,var(--zui-color-electric-dark,#38bdf8))] data-[state=checked]:border-[color:var(--zui-radio-group-electric-border-checked,var(--zui-color-electric,#0ea5e9))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-electric-border-checked-dark,var(--zui-color-electric-dark,#38bdf8))] data-[state=checked]:bg-[var(--zui-radio-group-electric-bg-checked,color-mix(in oklch, var(--zui-color-electric,#0ea5e914) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-electric-bg-checked-dark,color-mix(in oklch, var(--zui-color-electric-dark,#38bdf824) 14%, transparent))]",
+  forest: "border-[color:var(--zui-radio-group-forest-border,var(--zui-color-forest,#166534))] dark:border-[color:var(--zui-radio-group-forest-border-dark,var(--zui-color-forest-dark,#4ade80))] text-[color:var(--zui-radio-group-forest-fg,var(--zui-color-forest,#166534))] dark:text-[color:var(--zui-radio-group-forest-fg-dark,var(--zui-color-forest-dark,#4ade80))] data-[state=checked]:border-[color:var(--zui-radio-group-forest-border-checked,var(--zui-color-forest,#166534))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-forest-border-checked-dark,var(--zui-color-forest-dark,#4ade80))] data-[state=checked]:bg-[var(--zui-radio-group-forest-bg-checked,color-mix(in oklch, var(--zui-color-forest,#16653414) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-forest-bg-checked-dark,color-mix(in oklch, var(--zui-color-forest-dark,#4ade8024) 14%, transparent))]",
+  sunset: "border-[color:var(--zui-radio-group-sunset-border,var(--zui-color-sunset,#ea580c))] dark:border-[color:var(--zui-radio-group-sunset-border-dark,var(--zui-color-sunset-dark,#fb923c))] text-[color:var(--zui-radio-group-sunset-fg,var(--zui-color-sunset,#ea580c))] dark:text-[color:var(--zui-radio-group-sunset-fg-dark,var(--zui-color-sunset-dark,#fb923c))] data-[state=checked]:border-[color:var(--zui-radio-group-sunset-border-checked,var(--zui-color-sunset,#ea580c))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-sunset-border-checked-dark,var(--zui-color-sunset-dark,#fb923c))] data-[state=checked]:bg-[var(--zui-radio-group-sunset-bg-checked,color-mix(in oklch, var(--zui-color-sunset,#ea580c14) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-sunset-bg-checked-dark,color-mix(in oklch, var(--zui-color-sunset-dark,#fb923c24) 14%, transparent))]",
+  magenta: "border-[color:var(--zui-radio-group-magenta-border,var(--zui-color-magenta,#c026d3))] dark:border-[color:var(--zui-radio-group-magenta-border-dark,var(--zui-color-magenta-dark,#e879f9))] text-[color:var(--zui-radio-group-magenta-fg,var(--zui-color-magenta,#c026d3))] dark:text-[color:var(--zui-radio-group-magenta-fg-dark,var(--zui-color-magenta-dark,#e879f9))] data-[state=checked]:border-[color:var(--zui-radio-group-magenta-border-checked,var(--zui-color-magenta,#c026d3))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-magenta-border-checked-dark,var(--zui-color-magenta-dark,#e879f9))] data-[state=checked]:bg-[var(--zui-radio-group-magenta-bg-checked,color-mix(in oklch, var(--zui-color-magenta,#c026d314) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-magenta-bg-checked-dark,color-mix(in oklch, var(--zui-color-magenta-dark,#e879f924) 14%, transparent))]",
+  crimson: "border-[color:var(--zui-radio-group-crimson-border,var(--zui-color-crimson,#b91c1c))] dark:border-[color:var(--zui-radio-group-crimson-border-dark,var(--zui-color-crimson-dark,#f87171))] text-[color:var(--zui-radio-group-crimson-fg,var(--zui-color-crimson,#b91c1c))] dark:text-[color:var(--zui-radio-group-crimson-fg-dark,var(--zui-color-crimson-dark,#f87171))] data-[state=checked]:border-[color:var(--zui-radio-group-crimson-border-checked,var(--zui-color-crimson,#b91c1c))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-crimson-border-checked-dark,var(--zui-color-crimson-dark,#f87171))] data-[state=checked]:bg-[var(--zui-radio-group-crimson-bg-checked,color-mix(in oklch, var(--zui-color-crimson,#b91c1c14) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-crimson-bg-checked-dark,color-mix(in oklch, var(--zui-color-crimson-dark,#f8717124) 14%, transparent))]",
+  aqua: "border-[color:var(--zui-radio-group-aqua-border,var(--zui-color-aqua,#0f766e))] dark:border-[color:var(--zui-radio-group-aqua-border-dark,var(--zui-color-aqua-dark,#2dd4bf))] text-[color:var(--zui-radio-group-aqua-fg,var(--zui-color-aqua,#0f766e))] dark:text-[color:var(--zui-radio-group-aqua-fg-dark,var(--zui-color-aqua-dark,#2dd4bf))] data-[state=checked]:border-[color:var(--zui-radio-group-aqua-border-checked,var(--zui-color-aqua,#0f766e))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-aqua-border-checked-dark,var(--zui-color-aqua-dark,#2dd4bf))] data-[state=checked]:bg-[var(--zui-radio-group-aqua-bg-checked,color-mix(in oklch, var(--zui-color-aqua,#0f766e14) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-aqua-bg-checked-dark,color-mix(in oklch, var(--zui-color-aqua-dark,#2dd4bf24) 14%, transparent))]",
+  plum: "border-[color:var(--zui-radio-group-plum-border,var(--zui-color-plum,#7e22ce))] dark:border-[color:var(--zui-radio-group-plum-border-dark,var(--zui-color-plum-dark,#c084fc))] text-[color:var(--zui-radio-group-plum-fg,var(--zui-color-plum,#7e22ce))] dark:text-[color:var(--zui-radio-group-plum-fg-dark,var(--zui-color-plum-dark,#c084fc))] data-[state=checked]:border-[color:var(--zui-radio-group-plum-border-checked,var(--zui-color-plum,#7e22ce))] dark:data-[state=checked]:border-[color:var(--zui-radio-group-plum-border-checked-dark,var(--zui-color-plum-dark,#c084fc))] data-[state=checked]:bg-[var(--zui-radio-group-plum-bg-checked,color-mix(in oklch, var(--zui-color-plum,#7e22ce14) 8%, transparent))] dark:data-[state=checked]:bg-[var(--zui-radio-group-plum-bg-checked-dark,color-mix(in oklch, var(--zui-color-plum-dark,#c084fc24) 14%, transparent))]"
+};
+var zuiRadioGroupOrientations = {
+  vertical: "grid gap-2",
+  horizontal: "flex flex-wrap gap-x-5 gap-y-2"
+};
+
+exports.zuiRadioGroupAppearances = zuiRadioGroupAppearances;
+exports.zuiRadioGroupControlBase = zuiRadioGroupControlBase;
+exports.zuiRadioGroupIndicatorBase = zuiRadioGroupIndicatorBase;
+exports.zuiRadioGroupItemBase = zuiRadioGroupItemBase;
+exports.zuiRadioGroupOrientations = zuiRadioGroupOrientations;
+exports.zuiRadioGroupRootBase = zuiRadioGroupRootBase;
+exports.zuiRadioGroupSizes = zuiRadioGroupSizes;
+//# sourceMappingURL=chunk-22FJROCI.js.map
+//# sourceMappingURL=chunk-22FJROCI.js.map