@zentauri-ui/zentauri-components 1.7.2 → 1.7.4

package/README.md

@@ -13,14 +13,14 @@ Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@ze
 
 ## Package status and test coverage
 
-| Metric      | Result           |
-| ----------- | ---------------- |
-| Test files  | 57 passed (57)   |
-| Tests       | 352 passed (352) |
+| Metric     | Result           |
+| ---------- | ---------------- |
+| Test files | 57 passed (57)   |
+| Tests      | 358 passed (358) |
 
 | Area                        | Test files | Tests |
 | --------------------------- | ---------- | ----- |
-| Components and UI utilities | 29         | 258   |
+| Components and UI utilities | 29         | 264   |
 | React hooks                 | 26         | 85    |
 | CLI and import rewriting    | 2          | 9     |
 
@@ -35,9 +35,11 @@ Published artifacts live under `dist/`. Imports use **per-entry subpaths**: `@ze
 | `cli/cli.integration.test.ts`                                           |     4 |
 | `src/ui/buttons/button.test.tsx`                                        |    41 |
 | `src/ui/inputs/input.test.tsx`                                          |    40 |
+| `src/ui/otp-input/otp-input.test.tsx`                                   |    10 |
 | `src/ui/card/card.test.tsx`                                             |     7 |
 | `src/ui/checkbox/checkbox.test.tsx`                                     |     6 |
 | `src/ui/popover/popover.test.tsx`                                       |     4 |
+| `src/ui/command/command.test.tsx`                                       |     7 |
 | `src/ui/tooltip/tooltip.test.tsx`                                       |     4 |
 | `src/ui/dropdown/dropdown.test.tsx`                                     |     6 |
 | `src/hooks/useFocusManagement/useFocusManagement.test.tsx`              |     3 |
@@ -131,6 +133,7 @@ Import static primitives from `@zentauri-ui/zentauri-components/ui/<subpath>` wh
 | Card            | `card`            | `card/animated`                    |
 | Checkbox        | `checkbox`        | `checkbox/animated`                |
 | Charts          | `charts/<type>`   | —                                  |
+| Command         | `command`         | `command/animated`                 |
 | Divider         | `divider`         | `divider/animated`                 |
 | Drawer          | `drawer`          | `drawer/animated`                  |
 | Dropdown        | `dropdown`        | —                                  |
@@ -139,6 +142,7 @@ Import static primitives from `@zentauri-ui/zentauri-components/ui/<subpath>` wh
 | File upload     | `file-upload`     | —                                  |
 | Input           | `inputs`          | `inputs/animated`                  |
 | Modal           | `modal`           | `modal/animated`                   |
+| OTP input       | `otp-input`       | —                                  |
 | Pagination      | `pagination`      | —                                  |
 | Popover         | `popover`         | `popover/animated`                 |
 | Progress        | `progress`        | `progress/animated`                |
@@ -656,7 +660,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/`, 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 348 test cases in total
+- `pnpm test` / `pnpm test:watch` — **Vitest** and **Testing Library** unit tests // covered 358 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).
 
 ## Github Release log

package/cli/registry.json

@@ -15,6 +15,7 @@
     "charts/line",
     "charts/pie",
     "checkbox",
+    "command",
     "divider",
     "drawer",
     "dropdown",
@@ -23,6 +24,7 @@
     "file-upload",
     "inputs",
     "modal",
+    "otp-input",
     "pagination",
     "popover",
     "progress",

package/dist/chunk-KEKMMNL5.mjs

@@ -0,0 +1,600 @@
+import { useFocusManagement } from './chunk-K6YI4FJO.mjs';
+import { cn } from './chunk-4D54YOL6.mjs';
+import { cva } from 'class-variance-authority';
+import { createContext, useContext, useState, useCallback, useId, useRef, useMemo, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/design-system/command.ts
+var zuiCommandOverlayBase = "fixed inset-0 z-9999 bg-[var(--zui-command-overlay-bg,oklch(12.9%_0.042_264.695_/_0.6))] backdrop-blur-sm";
+var zuiCommandTriggerBase = "relative inline-flex shrink-0 cursor-pointer items-center gap-2 rounded-md border border-[color:var(--zui-command-trigger-border,#0000001a)] dark:border-[color:var(--zui-command-trigger-border-dark,#ffffff1a)] bg-[var(--zui-command-trigger-bg,oklch(98.4%_0.003_247.858))] dark:bg-[var(--zui-command-trigger-bg-dark,oklch(12.9%_0.042_264.695))] px-3 py-2 text-sm text-[color:var(--zui-command-trigger-fg,oklch(44.6%_0.03_256.802))] dark:text-[color:var(--zui-command-trigger-fg-dark,oklch(86.9%_0.022_252.894))] transition hover:bg-black/5 dark:hover:bg-white/5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-500/40";
+var zuiCommandContentBase = "fixed left-1/2 top-[15%] z-9999 w-[calc(100%-2rem)] -translate-x-1/2 overflow-hidden rounded-xl border border-[color:var(--zui-command-content-border,#0000001a)] dark:border-[color:var(--zui-command-content-border-dark,#ffffff1a)] bg-[var(--zui-command-content-bg,oklch(98.4%_0.003_247.858))] dark:bg-[var(--zui-command-content-bg-dark,oklch(12.9%_0.042_264.695))] text-[color:var(--zui-command-content-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-command-content-fg-dark,oklch(98.4%_0.003_247.858))] shadow-[var(--zui-command-content-shadow,0_12px_40px_rgba(15,23,42,0.18))] dark:shadow-[var(--zui-command-content-shadow-dark,0_24px_80px_rgba(15,23,42,0.6))] focus:outline-none";
+var zuiCommandContentSizes = {
+  sm: "max-w-md",
+  md: "max-w-lg",
+  lg: "max-w-2xl"
+};
+var zuiCommandInputRowBase = "flex items-center gap-2 border-b border-[color:var(--zui-command-input-border,#0000000f)] dark:border-[color:var(--zui-command-input-border-dark,#ffffff14)] px-4";
+var zuiCommandInputBase = "h-12 w-full bg-transparent text-sm text-[color:var(--zui-command-input-fg,oklch(20.8%_0.042_265.755))] dark:text-[color:var(--zui-command-input-fg-dark,oklch(98.4%_0.003_247.858))] placeholder:text-[color:var(--zui-command-input-placeholder,oklch(55.1%_0.027_264.364))] dark:placeholder:text-[color:var(--zui-command-input-placeholder-dark,oklch(55.1%_0.027_264.364))] focus:outline-none";
+var zuiCommandListBase = "max-h-[min(60vh,420px)] overflow-y-auto overscroll-contain p-2";
+var zuiCommandGroupHeadingBase = "px-2 pb-1 pt-3 text-xs font-semibold uppercase tracking-[0.12em] text-[color:var(--zui-command-group-heading-fg,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-command-group-heading-fg-dark,oklch(70.7%_0.022_261.325))]";
+var zuiCommandItemBase = "flex cursor-pointer items-center gap-3 rounded-lg px-3 py-2 text-sm text-[color:var(--zui-command-item-fg,oklch(27.8%_0.033_256.848))] dark:text-[color:var(--zui-command-item-fg-dark,oklch(86.9%_0.022_252.894))] transition-colors data-[active=true]:bg-[var(--zui-command-item-active-bg,oklch(95.1%_0.026_236.824))] dark:data-[active=true]:bg-[var(--zui-command-item-active-bg-dark,oklch(28.2%_0.091_267.935_/_0.55))] data-[active=true]:text-[color:var(--zui-command-item-active-fg,oklch(20.8%_0.042_265.755))] dark:data-[active=true]:text-[color:var(--zui-command-item-active-fg-dark,oklch(98.4%_0.003_247.858))] aria-disabled:cursor-not-allowed aria-disabled:opacity-50";
+var zuiCommandSeparatorBase = "my-1 h-px bg-[var(--zui-command-separator-bg,#0000000f)] dark:bg-[var(--zui-command-separator-bg-dark,#ffffff14)]";
+var zuiCommandEmptyBase = "px-3 py-8 text-center text-sm text-[color:var(--zui-command-empty-fg,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-command-empty-fg-dark,oklch(70.7%_0.022_261.325))]";
+var zuiCommandFooterBase = "flex items-center gap-3 border-t border-[color:var(--zui-command-footer-border,#0000000f)] dark:border-[color:var(--zui-command-footer-border-dark,#ffffff14)] px-4 py-2 text-xs text-[color:var(--zui-command-footer-fg,oklch(55.1%_0.027_264.364))] dark:text-[color:var(--zui-command-footer-fg-dark,oklch(70.7%_0.022_261.325))]";
+var zuiCommandContentAppearances = {
+  default: "bg-[var(--zui-command-content-default-bg,oklch(98.4%_0.003_247.858))] dark:bg-[var(--zui-command-content-default-bg-dark,oklch(12.9%_0.042_264.695))]",
+  glass: "border-[color:var(--zui-command-content-glass-border,#00000026)] dark:border-[color:var(--zui-command-content-glass-border-dark,#ffffff26)] bg-[var(--zui-command-content-glass-bg,oklch(98.4%_0.003_247.858_/_0.7))] dark:bg-[var(--zui-command-content-glass-bg-dark,oklch(12.9%_0.042_264.695_/_0.7))] backdrop-blur-xl",
+  sky: "border-[color:var(--zui-command-content-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-command-content-sky-border-dark,oklch(58.8%_0.158_241.966))] bg-[var(--zui-command-content-sky-bg,oklch(97.7%_0.013_236.62))] dark:bg-[var(--zui-command-content-sky-bg-dark,oklch(29.3%_0.066_243.157_/_0.7))] backdrop-blur-xl",
+  rose: "border-[color:var(--zui-command-content-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-command-content-rose-border-dark,oklch(58.6%_0.253_17.585))] bg-[var(--zui-command-content-rose-bg,oklch(96.9%_0.015_12.422))] dark:bg-[var(--zui-command-content-rose-bg-dark,oklch(27.1%_0.105_12.094_/_0.7))] backdrop-blur-xl",
+  purple: "border-[color:var(--zui-command-content-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-command-content-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-[var(--zui-command-content-purple-bg,oklch(97.7%_0.014_308.299))] dark:bg-[var(--zui-command-content-purple-bg-dark,oklch(29.1%_0.149_302.717_/_0.7))] backdrop-blur-xl",
+  pink: "border-[color:var(--zui-command-content-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-command-content-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-[var(--zui-command-content-pink-bg,oklch(97.1%_0.014_343.198))] dark:bg-[var(--zui-command-content-pink-bg-dark,oklch(28.4%_0.109_3.907_/_0.7))] backdrop-blur-xl",
+  orange: "border-[color:var(--zui-command-content-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-command-content-orange-border-dark,oklch(64.6%_0.222_41.116))] bg-[var(--zui-command-content-orange-bg,oklch(98%_0.016_73.684))] dark:bg-[var(--zui-command-content-orange-bg-dark,oklch(26.6%_0.079_36.259_/_0.7))] backdrop-blur-xl",
+  yellow: "border-[color:var(--zui-command-content-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-command-content-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-[var(--zui-command-content-yellow-bg,oklch(98.7%_0.026_102.212))] dark:bg-[var(--zui-command-content-yellow-bg-dark,oklch(28.6%_0.066_53.813_/_0.7))] backdrop-blur-xl",
+  teal: "border-[color:var(--zui-command-content-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-command-content-teal-border-dark,oklch(60%_0.118_184.704))] bg-[var(--zui-command-content-teal-bg,oklch(98.4%_0.014_180.72))] dark:bg-[var(--zui-command-content-teal-bg-dark,oklch(27.7%_0.046_192.524_/_0.7))] backdrop-blur-xl",
+  indigo: "border-[color:var(--zui-command-content-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-command-content-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-[var(--zui-command-content-indigo-bg,oklch(96.2%_0.018_272.314))] dark:bg-[var(--zui-command-content-indigo-bg-dark,oklch(25.7%_0.09_281.288_/_0.7))] backdrop-blur-xl",
+  emerald: "border-[color:var(--zui-command-content-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-command-content-emerald-border-dark,oklch(59.6%_0.145_163.225))] bg-[var(--zui-command-content-emerald-bg,oklch(97.9%_0.021_166.113))] dark:bg-[var(--zui-command-content-emerald-bg-dark,oklch(26.2%_0.051_172.552_/_0.7))] backdrop-blur-xl",
+  gray: "border-[color:var(--zui-command-content-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-command-content-gray-border-dark,oklch(44.6%_0.03_256.802))] bg-[var(--zui-command-content-gray-bg,oklch(98.5%_0.002_247.839))] dark:bg-[var(--zui-command-content-gray-bg-dark,oklch(13%_0.028_261.692_/_0.7))] backdrop-blur-xl",
+  amber: "border-[color:var(--zui-command-content-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-command-content-amber-border-dark,oklch(66.6%_0.179_58.318))] bg-[var(--zui-command-content-amber-bg,oklch(98.7%_0.022_95.277))] dark:bg-[var(--zui-command-content-amber-bg-dark,oklch(27.9%_0.077_45.635_/_0.7))] backdrop-blur-xl",
+  violet: "border-[color:var(--zui-command-content-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-command-content-violet-border-dark,oklch(54.1%_0.281_293.009))] bg-[var(--zui-command-content-violet-bg,oklch(96.9%_0.016_293.756))] dark:bg-[var(--zui-command-content-violet-bg-dark,oklch(28.3%_0.141_291.089_/_0.7))] backdrop-blur-xl",
+  "gradient-blue": "border-[color:var(--zui-command-content-gradient-blue-border,oklch(42.4%_0.199_265.638))] dark:border-[color:var(--zui-command-content-gradient-blue-border-dark,oklch(54.6%_0.245_262.881))] bg-linear-to-br from-[var(--zui-command-content-gradient-blue-from,oklch(97%_0.014_254.604))] dark:from-[var(--zui-command-content-gradient-blue-from-dark,oklch(28.2%_0.091_267.935_/_0.85))] to-[var(--zui-command-content-gradient-blue-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-command-content-gradient-blue-to-dark,oklch(29.1%_0.149_302.717_/_0.85))] backdrop-blur-xl",
+  "gradient-green": "border-[color:var(--zui-command-content-gradient-green-border,oklch(44.8%_0.119_151.328))] dark:border-[color:var(--zui-command-content-gradient-green-border-dark,oklch(62.7%_0.194_149.214))] bg-linear-to-br from-[var(--zui-command-content-gradient-green-from,oklch(98.2%_0.018_155.826))] dark:from-[var(--zui-command-content-gradient-green-from-dark,oklch(26.6%_0.065_152.934_/_0.85))] to-[var(--zui-command-content-gradient-green-to,oklch(98.6%_0.031_120.757))] dark:to-[var(--zui-command-content-gradient-green-to-dark,oklch(27.4%_0.072_132.109_/_0.85))] backdrop-blur-xl",
+  "gradient-red": "border-[color:var(--zui-command-content-gradient-red-border,oklch(44.4%_0.177_26.899))] dark:border-[color:var(--zui-command-content-gradient-red-border-dark,oklch(57.7%_0.245_27.325))] bg-linear-to-br from-[var(--zui-command-content-gradient-red-from,oklch(97.1%_0.013_17.38))] dark:from-[var(--zui-command-content-gradient-red-from-dark,oklch(25.8%_0.092_26.042_/_0.85))] to-[var(--zui-command-content-gradient-red-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-command-content-gradient-red-to-dark,oklch(28.4%_0.109_3.907_/_0.85))] backdrop-blur-xl",
+  "gradient-yellow": "border-[color:var(--zui-command-content-gradient-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-command-content-gradient-yellow-border-dark,oklch(68.1%_0.162_75.834))] bg-linear-to-br from-[var(--zui-command-content-gradient-yellow-from,oklch(98.7%_0.026_102.212))] dark:from-[var(--zui-command-content-gradient-yellow-from-dark,oklch(28.6%_0.066_53.813_/_0.85))] to-[var(--zui-command-content-gradient-yellow-to,oklch(98%_0.016_73.684))] dark:to-[var(--zui-command-content-gradient-yellow-to-dark,oklch(26.6%_0.079_36.259_/_0.85))] backdrop-blur-xl",
+  "gradient-purple": "border-[color:var(--zui-command-content-gradient-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-command-content-gradient-purple-border-dark,oklch(55.8%_0.288_302.321))] bg-linear-to-br from-[var(--zui-command-content-gradient-purple-from,oklch(97.7%_0.014_308.299))] dark:from-[var(--zui-command-content-gradient-purple-from-dark,oklch(29.1%_0.149_302.717_/_0.85))] to-[var(--zui-command-content-gradient-purple-to,oklch(97.1%_0.014_343.198))] dark:to-[var(--zui-command-content-gradient-purple-to-dark,oklch(28.4%_0.109_3.907_/_0.85))] backdrop-blur-xl",
+  "gradient-teal": "border-[color:var(--zui-command-content-gradient-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-command-content-gradient-teal-border-dark,oklch(60%_0.118_184.704))] bg-linear-to-br from-[var(--zui-command-content-gradient-teal-from,oklch(98.4%_0.014_180.72))] dark:from-[var(--zui-command-content-gradient-teal-from-dark,oklch(27.7%_0.046_192.524_/_0.85))] to-[var(--zui-command-content-gradient-teal-to,oklch(98.4%_0.019_200.873))] dark:to-[var(--zui-command-content-gradient-teal-to-dark,oklch(30.2%_0.056_229.695_/_0.85))] backdrop-blur-xl",
+  "gradient-indigo": "border-[color:var(--zui-command-content-gradient-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-command-content-gradient-indigo-border-dark,oklch(51.1%_0.262_276.966))] bg-linear-to-br from-[var(--zui-command-content-gradient-indigo-from,oklch(96.2%_0.018_272.314))] dark:from-[var(--zui-command-content-gradient-indigo-from-dark,oklch(25.7%_0.09_281.288_/_0.85))] to-[var(--zui-command-content-gradient-indigo-to,oklch(97.7%_0.014_308.299))] dark:to-[var(--zui-command-content-gradient-indigo-to-dark,oklch(29.1%_0.149_302.717_/_0.85))] backdrop-blur-xl",
+  "gradient-pink": "border-[color:var(--zui-command-content-gradient-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-command-content-gradient-pink-border-dark,oklch(59.2%_0.249_0.584))] bg-linear-to-br from-[var(--zui-command-content-gradient-pink-from,oklch(97.1%_0.014_343.198))] dark:from-[var(--zui-command-content-gradient-pink-from-dark,oklch(28.4%_0.109_3.907_/_0.85))] to-[var(--zui-command-content-gradient-pink-to,oklch(96.9%_0.015_12.422))] dark:to-[var(--zui-command-content-gradient-pink-to-dark,oklch(27.1%_0.105_12.094_/_0.85))] backdrop-blur-xl"
+};
+
+// src/ui/command/variants.ts
+var commandOverlayVariants = cva(zuiCommandOverlayBase);
+var commandTriggerVariants = cva(zuiCommandTriggerBase);
+var commandContentVariants = cva(zuiCommandContentBase, {
+  variants: {
+    size: zuiCommandContentSizes,
+    appearance: zuiCommandContentAppearances
+  },
+  defaultVariants: {
+    size: "md",
+    appearance: "default"
+  }
+});
+var commandInputRowVariants = cva(zuiCommandInputRowBase);
+var commandInputVariants = cva(zuiCommandInputBase);
+var commandListVariants = cva(zuiCommandListBase);
+var commandGroupHeadingVariants = cva(zuiCommandGroupHeadingBase);
+var commandItemVariants = cva(zuiCommandItemBase);
+var commandSeparatorVariants = cva(zuiCommandSeparatorBase);
+var commandEmptyVariants = cva(zuiCommandEmptyBase);
+var commandFooterVariants = cva(zuiCommandFooterBase);
+var CommandContext = createContext(null);
+function useCommandContext(component) {
+  const ctx = useContext(CommandContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Command>`);
+  }
+  return ctx;
+}
+function itemMatches(value, meta, normalized) {
+  if (!normalized) {
+    return true;
+  }
+  if (value.toLowerCase().includes(normalized)) {
+    return true;
+  }
+  if (meta.searchText?.toLowerCase().includes(normalized)) {
+    return true;
+  }
+  return Boolean(
+    meta.keywords?.some(
+      (keyword) => keyword.toLowerCase().includes(normalized)
+    )
+  );
+}
+function isEditableEventTarget(target) {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+  if (target.isContentEditable) {
+    return true;
+  }
+  return Boolean(
+    target.closest("input, textarea, select, [contenteditable=true]")
+  );
+}
+function useCommandPortalTarget() {
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  if (!isMounted) {
+    return null;
+  }
+  return document.body;
+}
+function CommandPortal({ children }) {
+  const portalTarget = useCommandPortalTarget();
+  if (!portalTarget) {
+    return null;
+  }
+  return createPortal(children, portalTarget);
+}
+function CommandPortalFrame({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-9999", "data-slot": "command-portal", children });
+}
+function CommandContentLayer({
+  className,
+  size,
+  appearance,
+  children,
+  ref,
+  id,
+  style,
+  componentName,
+  renderPresence,
+  renderOverlay,
+  renderPanel
+}) {
+  const { open, setOpen, labelId, contentRef, triggerRef } = useCommandContext(componentName);
+  useFocusManagement({
+    open,
+    setOpen,
+    contentRef,
+    triggerRef
+  });
+  const overlayProps = {
+    role: "presentation",
+    "data-slot": "command-overlay",
+    className: commandOverlayVariants(),
+    onClick: () => setOpen(false)
+  };
+  const panelProps = {
+    ref: (node) => {
+      contentRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    role: "dialog",
+    "aria-modal": true,
+    "aria-labelledby": labelId,
+    "data-slot": "command-content",
+    tabIndex: -1,
+    className: cn(commandContentVariants({ size, appearance }), className),
+    id,
+    style,
+    children
+  };
+  const content = open ? /* @__PURE__ */ jsxs(CommandPortalFrame, { children: [
+    renderOverlay ? renderOverlay(overlayProps) : /* @__PURE__ */ jsx("div", { ...overlayProps }),
+    renderPanel ? renderPanel(panelProps) : /* @__PURE__ */ jsx("div", { ...panelProps })
+  ] }) : null;
+  return /* @__PURE__ */ jsx(CommandPortal, { children: renderPresence ? renderPresence(content) : content });
+}
+function Command({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  hotkey,
+  label = "Command menu",
+  children
+}) {
+  const isControlled = open !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const resolvedOpen = isControlled ? Boolean(open) : uncontrolledOpen;
+  const setOpen = useCallback(
+    (next) => {
+      if (!isControlled) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const labelId = useId();
+  const listId = useId();
+  const contentRef = useRef(null);
+  const triggerRef = useRef(null);
+  const inputRef = useRef(null);
+  const [query, setQuery] = useState("");
+  const [activeValue, setActiveValue] = useState(null);
+  const itemsRef = useRef([]);
+  const [registryVersion, setRegistryVersion] = useState(0);
+  const registerItem = useCallback((item) => {
+    itemsRef.current = [...itemsRef.current, item];
+    setRegistryVersion((version) => version + 1);
+    return () => {
+      itemsRef.current = itemsRef.current.filter((entry) => entry !== item);
+      setRegistryVersion((version) => version + 1);
+    };
+  }, []);
+  const invalidateRegistry = useCallback(() => {
+    setRegistryVersion((version) => version + 1);
+  }, []);
+  const visibleValues = useMemo(() => {
+    const normalized = query.trim().toLowerCase();
+    return itemsRef.current.filter((item) => {
+      const meta = item.metaRef.current;
+      if (meta.disabled) {
+        return false;
+      }
+      return itemMatches(item.value, meta, normalized);
+    }).map((item) => item.value);
+  }, [query, registryVersion]);
+  const visibleSet = useMemo(() => new Set(visibleValues), [visibleValues]);
+  const isVisible = useCallback(
+    (value) => visibleSet.has(value),
+    [visibleSet]
+  );
+  const selectValue = useCallback((value) => {
+    const entry = itemsRef.current.find((item) => item.value === value);
+    if (!entry || entry.metaRef.current.disabled) {
+      return false;
+    }
+    entry?.metaRef.current.onSelect?.(value);
+    return true;
+  }, []);
+  useEffect(() => {
+    if (!resolvedOpen) {
+      setQuery("");
+      setActiveValue(null);
+    }
+  }, [resolvedOpen]);
+  useEffect(() => {
+    if (!resolvedOpen) {
+      return;
+    }
+    if (activeValue && visibleSet.has(activeValue)) {
+      return;
+    }
+    setActiveValue(visibleValues[0] ?? null);
+  }, [resolvedOpen, activeValue, visibleSet, visibleValues]);
+  useEffect(() => {
+    if (!hotkey) {
+      return;
+    }
+    const key = (typeof hotkey === "string" ? hotkey : "k").toLowerCase();
+    const handler = (event) => {
+      if (isEditableEventTarget(event.target)) {
+        return;
+      }
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === key) {
+        event.preventDefault();
+        setOpen(!resolvedOpen);
+      }
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [hotkey, resolvedOpen, setOpen]);
+  const ctx = useMemo(
+    () => ({
+      open: resolvedOpen,
+      setOpen,
+      labelId,
+      listId,
+      query,
+      setQuery,
+      activeValue,
+      setActiveValue,
+      visibleValues,
+      isVisible,
+      registerItem,
+      invalidateRegistry,
+      selectValue,
+      contentRef,
+      triggerRef,
+      inputRef
+    }),
+    [
+      resolvedOpen,
+      setOpen,
+      labelId,
+      listId,
+      query,
+      activeValue,
+      visibleValues,
+      isVisible,
+      registerItem,
+      invalidateRegistry,
+      selectValue
+    ]
+  );
+  return /* @__PURE__ */ jsxs(CommandContext.Provider, { value: ctx, children: [
+    /* @__PURE__ */ jsx("span", { hidden: true, id: labelId, children: label }),
+    children
+  ] });
+}
+Command.displayName = "Command";
+function CommandTrigger({
+  className,
+  children,
+  onClick,
+  ref: refProp
+}) {
+  const { setOpen, triggerRef } = useCommandContext("CommandTrigger");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref: (node) => {
+        triggerRef.current = node;
+        if (typeof refProp === "function") {
+          refProp(node);
+        } else if (refProp) {
+          refProp.current = node;
+        }
+      },
+      type: "button",
+      "data-slot": "command-trigger",
+      className: cn(commandTriggerVariants(), className),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          setOpen(true);
+        }
+      },
+      children
+    }
+  );
+}
+CommandTrigger.displayName = "CommandTrigger";
+function CommandContent({
+  className,
+  size,
+  appearance,
+  children,
+  ref,
+  id,
+  style
+}) {
+  return /* @__PURE__ */ jsx(
+    CommandContentLayer,
+    {
+      appearance,
+      className,
+      componentName: "CommandContent",
+      id,
+      ref,
+      size,
+      style,
+      children
+    }
+  );
+}
+CommandContent.displayName = "CommandContent";
+function CommandInput({
+  className,
+  placeholder,
+  ref
+}) {
+  const {
+    query,
+    setQuery,
+    visibleValues,
+    activeValue,
+    setActiveValue,
+    selectValue,
+    setOpen,
+    inputRef,
+    listId
+  } = useCommandContext("CommandInput");
+  const moveActive = (direction) => {
+    if (visibleValues.length === 0) {
+      return;
+    }
+    const currentIndex = activeValue ? visibleValues.indexOf(activeValue) : -1;
+    const nextIndex = currentIndex === -1 ? direction === 1 ? 0 : visibleValues.length - 1 : (currentIndex + direction + visibleValues.length) % visibleValues.length;
+    setActiveValue(visibleValues[nextIndex] ?? null);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: commandInputRowVariants(), "data-slot": "command-input-row", children: [
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        "aria-hidden": true,
+        viewBox: "0 0 24 24",
+        className: "size-4 shrink-0 opacity-60",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+          /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (node) => {
+          inputRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        type: "text",
+        autoFocus: true,
+        role: "combobox",
+        "aria-expanded": true,
+        "aria-controls": listId,
+        "aria-autocomplete": "list",
+        "data-slot": "command-input",
+        className: cn(commandInputVariants(), className),
+        placeholder,
+        value: query,
+        onChange: (event) => setQuery(event.target.value),
+        onKeyDown: (event) => {
+          if (event.key === "ArrowDown") {
+            event.preventDefault();
+            moveActive(1);
+          } else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            moveActive(-1);
+          } else if (event.key === "Enter") {
+            if (activeValue && visibleValues.includes(activeValue)) {
+              event.preventDefault();
+              if (selectValue(activeValue)) {
+                setOpen(false);
+              }
+            }
+          }
+        }
+      }
+    )
+  ] });
+}
+CommandInput.displayName = "CommandInput";
+function CommandList({ className, children }) {
+  const { listId } = useCommandContext("CommandList");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: listId,
+      role: "listbox",
+      "aria-label": "Commands",
+      "data-slot": "command-list",
+      className: cn(commandListVariants(), className),
+      children
+    }
+  );
+}
+CommandList.displayName = "CommandList";
+function CommandGroup({
+  className,
+  heading,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "group",
+      "data-slot": "command-group",
+      className: cn(
+        "[&:not(:has([data-slot=command-item]:not([hidden])))]:hidden",
+        className
+      ),
+      children: [
+        heading ? /* @__PURE__ */ jsx("div", { className: commandGroupHeadingVariants(), "aria-hidden": true, children: heading }) : null,
+        children
+      ]
+    }
+  );
+}
+CommandGroup.displayName = "CommandGroup";
+function CommandItem({
+  className,
+  value,
+  keywords,
+  disabled,
+  onSelect,
+  children
+}) {
+  const {
+    registerItem,
+    invalidateRegistry,
+    isVisible,
+    activeValue,
+    setActiveValue,
+    selectValue,
+    setOpen
+  } = useCommandContext("CommandItem");
+  const itemRef = useRef(null);
+  const keywordSignature = keywords?.join("\0") ?? "";
+  const metaRef = useRef({ keywords, disabled, onSelect });
+  metaRef.current = {
+    keywords,
+    disabled,
+    onSelect,
+    searchText: metaRef.current.searchText
+  };
+  useEffect(() => {
+    const unregister = registerItem({ value, metaRef });
+    return unregister;
+  }, [registerItem, value]);
+  useEffect(() => {
+    metaRef.current = {
+      keywords: metaRef.current.keywords,
+      disabled,
+      onSelect: metaRef.current.onSelect,
+      searchText: itemRef.current?.textContent ?? void 0
+    };
+    invalidateRegistry();
+  }, [children, disabled, invalidateRegistry, keywordSignature]);
+  const visible = isVisible(value);
+  const active = activeValue === value;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: itemRef,
+      role: "option",
+      "aria-selected": active,
+      "aria-disabled": disabled || void 0,
+      "data-slot": "command-item",
+      "data-value": value,
+      "data-active": active || void 0,
+      hidden: !visible || void 0,
+      className: cn(commandItemVariants(), className),
+      onMouseEnter: () => {
+        if (!disabled) {
+          setActiveValue(value);
+        }
+      },
+      onClick: () => {
+        if (disabled) {
+          return;
+        }
+        if (selectValue(value)) {
+          setOpen(false);
+        }
+      },
+      children
+    }
+  );
+}
+CommandItem.displayName = "CommandItem";
+function CommandSeparator({ className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "separator",
+      "data-slot": "command-separator",
+      className: cn(commandSeparatorVariants(), className)
+    }
+  );
+}
+CommandSeparator.displayName = "CommandSeparator";
+function CommandEmpty({ className, children }) {
+  const { visibleValues } = useCommandContext("CommandEmpty");
+  if (visibleValues.length > 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "command-empty",
+      className: cn(commandEmptyVariants(), className),
+      children
+    }
+  );
+}
+CommandEmpty.displayName = "CommandEmpty";
+function CommandFooter({ className, children }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "command-footer",
+      className: cn(commandFooterVariants(), className),
+      children
+    }
+  );
+}
+CommandFooter.displayName = "CommandFooter";
+
+export { Command, CommandContent, CommandContentLayer, CommandEmpty, CommandFooter, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandTrigger, commandContentVariants, commandItemVariants, commandOverlayVariants, useCommandContext };
+//# sourceMappingURL=chunk-KEKMMNL5.mjs.map
+//# sourceMappingURL=chunk-KEKMMNL5.mjs.map