@craftzbay/ui 0.9.0 → 0.11.0

package/dist-lib/components/ui/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/ui/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useId,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type ReactNode,\n} from 'react';\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { Check, Minus } from '@/icons';\nimport { cn } from '@/lib/utils';\n\nexport interface CheckboxProps extends Omit<\n  ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,\n  'asChild'\n> {\n  /** Visible label rendered to the right of the box. */\n  label?: ReactNode;\n  /** Secondary description rendered below the label. */\n  description?: ReactNode;\n  /** Validation error message. */\n  error?: ReactNode;\n  /** Hide the label visually while keeping it in the a11y tree. */\n  hideLabel?: boolean;\n}\n\n/**\n * Checkbox with optional inline label + description. Pass `checked=\"indeterminate\"`\n * for the indeterminate state — Radix renders a `Minus` icon automatically.\n *\n * @example Single\n *   <Checkbox label=\"I agree to the terms\" checked={ok} onCheckedChange={setOk} />\n *\n * @example Tri-state header\n *   <Checkbox aria-label=\"Select all\"\n *             checked={allSelected ? true : someSelected ? 'indeterminate' : false}\n *             onCheckedChange={toggleAll} />\n *\n * @do Use indeterminate to summarise child rows in a table header.\n * @dont Use a Checkbox for mutually exclusive choices — use RadioGroup.\n */\nexport const Checkbox = forwardRef<ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  function Checkbox(\n    {\n      className,\n      label,\n      description,\n      error,\n      hideLabel,\n      id,\n      disabled,\n      'aria-describedby': ariaDescribedby,\n      'aria-invalid': ariaInvalid,\n      ...props\n    },\n    ref,\n  ) {\n    const autoId = useId();\n    const fieldId = id ?? autoId;\n    const descId = description ? `${fieldId}-desc` : undefined;\n    const errorId = error ? `${fieldId}-error` : undefined;\n    const describedBy = [errorId, descId, ariaDescribedby].filter(Boolean).join(' ') || undefined;\n    const isError = Boolean(error) || ariaInvalid === true || ariaInvalid === 'true';\n\n    return (\n      <div className={cn('flex flex-col gap-1', className)}>\n        <div className=\"flex items-start gap-2.5\">\n          <CheckboxPrimitive.Root\n            ref={ref}\n            id={fieldId}\n            disabled={disabled}\n            aria-describedby={describedBy}\n            aria-invalid={isError ? true : ariaInvalid}\n            className={cn(\n              'peer relative mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-sm border',\n              // WCAG 2.5.8: 16px visual box, ≥24px hit area via an invisible inset halo.\n              'before:absolute before:-inset-1.5 before:content-[\"\"]',\n              'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n              'focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n              'data-[state=checked]:bg-accent data-[state=checked]:border-accent data-[state=checked]:text-on-accent',\n              'data-[state=indeterminate]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:text-on-accent',\n              'disabled:cursor-not-allowed disabled:opacity-50',\n              'border-border-input aria-invalid:border-danger',\n            )}\n            {...props}\n          >\n            <CheckboxPrimitive.Indicator className=\"flex items-center justify-center\">\n              {props.checked === 'indeterminate' ? (\n                <Minus className=\"size-3\" aria-hidden strokeWidth={3} />\n              ) : (\n                <Check className=\"size-3\" aria-hidden strokeWidth={3} />\n              )}\n            </CheckboxPrimitive.Indicator>\n          </CheckboxPrimitive.Root>\n\n          {label && (\n            <div className=\"flex flex-col gap-0.5\">\n              <label\n                htmlFor={fieldId}\n                className={cn(\n                  'text-foreground text-sm select-none',\n                  disabled && 'cursor-not-allowed opacity-50',\n                  hideLabel && 'sr-only',\n                )}\n              >\n                {label}\n              </label>\n              {description && (\n                <p id={descId} className=\"text-foreground-subtle text-xs\">\n                  {description}\n                </p>\n              )}\n            </div>\n          )}\n        </div>\n        {error && (\n          <p id={errorId} className=\"text-danger-text text-xs\">\n            {error}\n          </p>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox","forwardRef","className","label","description","error","hideLabel","id","disabled","ariaDescribedby","ariaInvalid","props","ref","autoId","useId","fieldId","descId","errorId","describedBy","isError","cn","jsxs","jsx","CheckboxPrimitive","Minus","Check"],"mappings":";;;;;;AA0CO,MAAMA,IAAWC;AAAA,EACtB,SACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAoBC;AAAA,IACpB,gBAAgBC;AAAA,IAChB,GAAGC;AAAA,EAAA,GAELC,GACA;AACA,UAAMC,IAASC,EAAA,GACTC,IAAUR,KAAMM,GAChBG,IAASZ,IAAc,GAAGW,CAAO,UAAU,QAC3CE,IAAUZ,IAAQ,GAAGU,CAAO,WAAW,QACvCG,IAAc,CAACD,GAASD,GAAQP,CAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK,QAC9EU,IAAU,EAAQd,KAAUK,MAAgB,MAAQA,MAAgB;AAE1E,6BACG,OAAA,EAAI,WAAWU,EAAG,uBAAuBlB,CAAS,GACjD,UAAA;AAAA,MAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAU,4BACb,UAAA;AAAA,QAAA,gBAAAC;AAAA,UAACC,EAAkB;AAAA,UAAlB;AAAA,YACC,KAAAX;AAAA,YACA,IAAIG;AAAA,YACJ,UAAAP;AAAA,YACA,oBAAkBU;AAAA,YAClB,gBAAcC,IAAU,KAAOT;AAAA,YAC/B,WAAWU;AAAA,cACT;AAAA;AAAA,cAEA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,YAED,GAAGT;AAAA,YAEJ,UAAA,gBAAAW,EAACC,EAAkB,WAAlB,EAA4B,WAAU,oCACpC,UAAAZ,EAAM,YAAY,kBACjB,gBAAAW,EAACE,GAAA,EAAM,WAAU,UAAS,eAAW,IAAC,aAAa,EAAA,CAAG,IAEtD,gBAAAF,EAACG,GAAA,EAAM,WAAU,UAAS,eAAW,IAAC,aAAa,EAAA,CAAG,EAAA,CAE1D;AAAA,UAAA;AAAA,QAAA;AAAA,QAGDtB,KACC,gBAAAkB,EAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAASP;AAAA,cACT,WAAWK;AAAA,gBACT;AAAA,gBACAZ,KAAY;AAAA,gBACZF,KAAa;AAAA,cAAA;AAAA,cAGd,UAAAH;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFC,KACC,gBAAAkB,EAAC,KAAA,EAAE,IAAIN,GAAQ,WAAU,kCACtB,UAAAZ,EAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,GAEJ;AAAA,MACCC,KACC,gBAAAiB,EAAC,KAAA,EAAE,IAAIL,GAAS,WAAU,4BACvB,UAAAZ,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AAEAL,EAAS,cAAc;"}

package/dist-lib/components/ui/Combobox.d.ts

@@ -17,6 +17,11 @@ export interface ComboboxProps {
      * Use for server-side search.
      */
     loadOptions?: (query: string) => Promise<ComboboxOption[]>;
+    /**
+     * Label to show for a preset `value` in `loadOptions` mode before the
+     * first search has resolved (the component has no option list yet).
+     */
+    selectedLabel?: string;
     /** Visible label above the field. */
     label?: ReactNode;
     /** Hint below the field. Hidden when `error` is set. */
@@ -29,12 +34,16 @@ export interface ComboboxProps {
     searchPlaceholder?: string;
     /** Empty state copy when nothing matches. */
     emptyText?: string;
+    /** Message shown when `loadOptions` rejects. */
+    loadErrorText?: string;
     /** Allow clearing the selection with an inline ×. */
     clearable?: boolean;
     /** Disable the entire field. */
     disabled?: boolean;
     /** Field size, matches Input. */
     size?: 'sm' | 'md' | 'lg';
+    /** Consumer-supplied id for the trigger (label association). */
+    id?: string;
     className?: string;
 }
 /**

package/dist-lib/components/ui/Combobox.js

@@ -0,0 +1,195 @@
+"use client";
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import { forwardRef as de, useState as s, useCallback as D, useMemo as M, useRef as ie, useEffect as Q } from "react";
+import * as p from "@radix-ui/react-popover";
+import { Command as f } from "cmdk";
+import { X as ce, ChevronsUpDown as ue, Loader2 as me, Check as fe } from "../../icons/index.js";
+import { cn as b } from "../../lib/utils.js";
+import { useStrings as be } from "../../hooks/use-strings.js";
+import { useFieldIds as xe } from "../../hooks/use-field-ids.js";
+import { IconButton as pe } from "./IconButton.js";
+const ge = de(function({
+  value: a,
+  onChange: g,
+  options: k,
+  loadOptions: l,
+  selectedLabel: h,
+  label: n,
+  helperText: v,
+  error: y,
+  placeholder: U,
+  searchPlaceholder: V,
+  emptyText: X,
+  loadErrorText: A,
+  clearable: z = !0,
+  disabled: L,
+  size: x = "md",
+  id: R,
+  className: G
+}, J) {
+  const d = be(), N = U ?? d.combobox.placeholder, K = V ?? d.combobox.searchPlaceholder, W = X ?? d.combobox.empty, Y = A ?? d.combobox.loadError, w = !!y, { fieldId: c, helperId: Z, errorId: _, describedBy: O } = xe(R, {
+    hasHelper: !!v,
+    hasError: w
+  }), [ee, re] = s(void 0), te = D((e) => re(e == null ? void 0 : e.id), []), [u, B] = s(!1), [C, oe] = s(""), [S, j] = s([]), [I, F] = s(!1), [T, $] = s(!1), [m, H] = s(null), E = M(
+    () => l ? S : k ?? [],
+    [l, S, k]
+  ), q = ie(l);
+  Q(() => {
+    q.current = l;
+  }), Q(() => {
+    const e = q.current;
+    if (!e || !u) return;
+    let t = !1;
+    return F(!0), $(!1), e(C).then((P) => {
+      t || j(P);
+    }).catch(() => {
+      t || (j([]), $(!0));
+    }).finally(() => {
+      t || F(!1);
+    }), () => {
+      t = !0;
+    };
+  }, [C, u, !!l]);
+  const i = M(() => {
+    if (a == null) return null;
+    const e = E.find((t) => t.value === a);
+    return e || ((m == null ? void 0 : m.value) === a ? m : h !== void 0 ? { value: a, label: h } : null);
+  }, [E, a, m, h]), ae = x === "sm" ? "h-8" : x === "lg" ? "h-10" : "h-9", se = x === "sm" ? "px-2.5" : x === "lg" ? "px-3.5" : "px-3", le = z ? "pr-14" : "pr-9", ne = D(() => {
+    H(null), g(null);
+  }, [g]);
+  return /* @__PURE__ */ o("div", { ref: J, className: b("flex flex-col gap-1.5", G), children: [
+    n && /* @__PURE__ */ r(
+      "label",
+      {
+        id: `${c}-label`,
+        htmlFor: c,
+        className: "text-foreground text-sm font-medium",
+        children: n
+      }
+    ),
+    /* @__PURE__ */ o(p.Root, { open: u, onOpenChange: B, children: [
+      /* @__PURE__ */ o("div", { className: "relative w-full", children: [
+        /* @__PURE__ */ r(p.Trigger, { asChild: !0, children: /* @__PURE__ */ r(
+          "button",
+          {
+            id: c,
+            type: "button",
+            role: "combobox",
+            "aria-expanded": u,
+            "aria-haspopup": "listbox",
+            "aria-controls": u ? ee : void 0,
+            "aria-labelledby": n ? `${c}-label` : void 0,
+            "aria-label": n || R ? void 0 : N,
+            "aria-invalid": w || void 0,
+            "aria-describedby": O,
+            disabled: L,
+            className: b(
+              "bg-card text-foreground inline-flex w-full items-center justify-between gap-2 rounded-md border text-sm",
+              "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+              "focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              ae,
+              se,
+              le,
+              w ? "border-danger focus-visible:border-danger focus-visible:ring-danger" : "border-border-input focus-visible:border-accent focus-visible:ring-ring"
+            ),
+            children: /* @__PURE__ */ r(
+              "span",
+              {
+                className: b("truncate", !i && "text-foreground-subtle"),
+                title: i ? i.label : void 0,
+                children: i ? i.label : N
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ o("span", { className: "pointer-events-none absolute inset-y-0 right-0 flex items-center gap-0.5 pr-2", children: [
+          z && i && !L && /* @__PURE__ */ r(
+            pe,
+            {
+              size: "sm",
+              variant: "ghost",
+              "aria-label": d.combobox.clear,
+              icon: /* @__PURE__ */ r(ce, {}),
+              onClick: ne,
+              className: "text-foreground-subtle hover:text-foreground pointer-events-auto size-6"
+            }
+          ),
+          /* @__PURE__ */ r(ue, { className: "text-foreground-subtle size-4", "aria-hidden": !0 })
+        ] })
+      ] }),
+      /* @__PURE__ */ r(p.Portal, { children: /* @__PURE__ */ r(
+        p.Content,
+        {
+          "aria-labelledby": n ? `${c}-label` : void 0,
+          "aria-label": n ? void 0 : N,
+          align: "start",
+          sideOffset: 4,
+          className: b(
+            "border-border bg-popover text-popover-foreground z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-lg border shadow-md",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
+          ),
+          children: /* @__PURE__ */ o(f, { shouldFilter: !l, className: "flex h-full w-full flex-col", children: [
+            /* @__PURE__ */ o("div", { className: "border-border flex items-center border-b px-3", children: [
+              /* @__PURE__ */ r(
+                f.Input,
+                {
+                  value: C,
+                  onValueChange: oe,
+                  placeholder: K,
+                  className: "placeholder:text-foreground-subtle flex h-9 w-full bg-transparent py-2 text-lg outline-none md:text-sm"
+                }
+              ),
+              I && /* @__PURE__ */ r(me, { className: "text-foreground-subtle size-4 animate-spin", "aria-hidden": !0 })
+            ] }),
+            /* @__PURE__ */ o(
+              f.List,
+              {
+                ref: te,
+                label: d.command.suggestions,
+                className: "max-h-64 overflow-y-auto p-1",
+                children: [
+                  E.map((e) => {
+                    const t = e.value === a;
+                    return /* @__PURE__ */ o(
+                      f.Item,
+                      {
+                        value: e.value,
+                        keywords: e.description ? [e.label, e.description] : [e.label],
+                        disabled: e.disabled,
+                        onSelect: (P) => {
+                          H(e), g(P), B(!1);
+                        },
+                        className: b(
+                          "text-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
+                          "data-[selected=true]:bg-background-muted",
+                          "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+                        ),
+                        children: [
+                          /* @__PURE__ */ r("span", { className: "flex-1", children: e.label }),
+                          e.description && /* @__PURE__ */ r("span", { className: "text-foreground-subtle text-xs", children: e.description }),
+                          t && /* @__PURE__ */ r(fe, { className: "text-accent size-4", "aria-hidden": !0 })
+                        ]
+                      },
+                      e.value
+                    );
+                  }),
+                  T && !I && /* @__PURE__ */ r("div", { className: "text-danger-text px-2 py-6 text-center text-sm", children: Y }),
+                  !I && !T && /* @__PURE__ */ r(f.Empty, { className: "text-foreground-subtle px-2 py-6 text-center text-sm", children: W })
+                ]
+              }
+            )
+          ] })
+        }
+      ) })
+    ] }),
+    y ? /* @__PURE__ */ r("p", { id: _, className: "text-danger-text text-xs", children: y }) : v ? /* @__PURE__ */ r("p", { id: Z, className: "text-foreground-subtle text-xs", children: v }) : null
+  ] });
+});
+ge.displayName = "Combobox";
+export {
+  ge as Combobox
+};
+//# sourceMappingURL=Combobox.js.map

package/dist-lib/components/ui/Combobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/ui/Combobox.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Check, ChevronsUpDown, Loader2, X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { useFieldIds } from '@/hooks/use-field-ids';\nimport { IconButton } from './IconButton';\n\nexport interface ComboboxOption {\n  value: string;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n}\n\nexport interface ComboboxProps {\n  /** Currently selected value (controlled). */\n  value: string | null;\n  /** Called when a value is picked or cleared. */\n  onChange: (value: string | null) => void;\n  /** Static options. Ignored if `loadOptions` is provided. */\n  options?: ComboboxOption[];\n  /**\n   * Async loader called with the current query each time it changes.\n   * Use for server-side search.\n   */\n  loadOptions?: (query: string) => Promise<ComboboxOption[]>;\n  /**\n   * Label to show for a preset `value` in `loadOptions` mode before the\n   * first search has resolved (the component has no option list yet).\n   */\n  selectedLabel?: string;\n  /** Visible label above the field. */\n  label?: ReactNode;\n  /** Hint below the field. Hidden when `error` is set. */\n  helperText?: ReactNode;\n  /** Validation error. */\n  error?: ReactNode;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Search placeholder inside the popover. */\n  searchPlaceholder?: string;\n  /** Empty state copy when nothing matches. */\n  emptyText?: string;\n  /** Message shown when `loadOptions` rejects. */\n  loadErrorText?: string;\n  /** Allow clearing the selection with an inline ×. */\n  clearable?: boolean;\n  /** Disable the entire field. */\n  disabled?: boolean;\n  /** Field size, matches Input. */\n  size?: 'sm' | 'md' | 'lg';\n  /** Consumer-supplied id for the trigger (label association). */\n  id?: string;\n  className?: string;\n}\n\n/**\n * Single-select with typeahead. Use `options` for client-side filtering or\n * `loadOptions` for server-side search.\n *\n * @example Client-side\n *   <Combobox label=\"Country\" options={countries} value={c} onChange={setC} />\n *\n * @example Server-side\n *   <Combobox label=\"Assignee\"\n *             value={user}\n *             onChange={setUser}\n *             loadOptions={async (q) => api.searchUsers(q)} />\n *\n * @do Use Combobox over Select for >12 options or when the user is expected\n *      to know what they want.\n * @dont Re-query on every keystroke without debouncing — pass a debounced\n *       `loadOptions` to avoid hammering the server.\n */\nexport const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(function Combobox(\n  {\n    value,\n    onChange,\n    options,\n    loadOptions,\n    selectedLabel,\n    label,\n    helperText,\n    error,\n    placeholder: placeholderProp,\n    searchPlaceholder: searchPlaceholderProp,\n    emptyText: emptyTextProp,\n    loadErrorText: loadErrorTextProp,\n    clearable = true,\n    disabled,\n    size = 'md',\n    id,\n    className,\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const placeholder = placeholderProp ?? strings.combobox.placeholder;\n  const searchPlaceholder = searchPlaceholderProp ?? strings.combobox.searchPlaceholder;\n  const emptyText = emptyTextProp ?? strings.combobox.empty;\n  const loadErrorText = loadErrorTextProp ?? strings.combobox.loadError;\n  const isError = Boolean(error);\n  const { fieldId, helperId, errorId, describedBy } = useFieldIds(id, {\n    hasHelper: Boolean(helperText),\n    hasError: isError,\n  });\n  // cmdk assigns its own id to the list, so read it back from the node once\n  // the portal mounts; aria-controls is only set while the listbox exists.\n  const [listId, setListId] = useState<string | undefined>(undefined);\n  const listRef = useCallback((el: HTMLDivElement | null) => setListId(el?.id), []);\n\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const [loaded, setLoaded] = useState<ComboboxOption[]>([]);\n  const [loading, setLoading] = useState(false);\n  const [loadError, setLoadError] = useState(false);\n  // In async mode the option list only exists after the first search, so the\n  // chosen option is remembered here to keep its label on the trigger.\n  const [selectedOption, setSelectedOption] = useState<ComboboxOption | null>(null);\n\n  // Resolve options: static or async-loaded.\n  const items = useMemo(\n    () => (loadOptions ? loaded : (options ?? [])),\n    [loadOptions, loaded, options],\n  );\n\n  // Latest loader in a ref so an inline `loadOptions={async q => …}` does not\n  // retrigger the fetch on every parent render — only query / open do.\n  const loadRef = useRef(loadOptions);\n  useEffect(() => {\n    loadRef.current = loadOptions;\n  });\n  const hasLoader = Boolean(loadOptions);\n  useEffect(() => {\n    const load = loadRef.current;\n    if (!load || !open) return;\n    let cancelled = false;\n    setLoading(true);\n    setLoadError(false);\n    load(query)\n      .then((res) => {\n        if (!cancelled) setLoaded(res);\n      })\n      .catch(() => {\n        if (!cancelled) {\n          setLoaded([]);\n          setLoadError(true);\n        }\n      })\n      .finally(() => {\n        if (!cancelled) setLoading(false);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [query, open, hasLoader]);\n\n  const selected = useMemo<ComboboxOption | null>(() => {\n    if (value === null || value === undefined) return null;\n    const fromItems = items.find((o) => o.value === value);\n    if (fromItems) return fromItems;\n    if (selectedOption?.value === value) return selectedOption;\n    if (selectedLabel !== undefined) return { value, label: selectedLabel };\n    return null;\n  }, [items, value, selectedOption, selectedLabel]);\n\n  const triggerHeight = size === 'sm' ? 'h-8' : size === 'lg' ? 'h-10' : 'h-9';\n  const triggerPadding = size === 'sm' ? 'px-2.5' : size === 'lg' ? 'px-3.5' : 'px-3';\n  // Leave room on the right for the clear button + chevron.\n  const triggerPaddingRight = clearable ? 'pr-14' : 'pr-9';\n\n  const handleClear = useCallback(() => {\n    setSelectedOption(null);\n    onChange(null);\n  }, [onChange]);\n\n  return (\n    <div ref={ref} className={cn('flex flex-col gap-1.5', className)}>\n      {label && (\n        <label\n          id={`${fieldId}-label`}\n          htmlFor={fieldId}\n          className=\"text-foreground text-sm font-medium\"\n        >\n          {label}\n        </label>\n      )}\n\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n        <div className=\"relative w-full\">\n          <PopoverPrimitive.Trigger asChild>\n            <button\n              id={fieldId}\n              type=\"button\"\n              role=\"combobox\"\n              aria-expanded={open}\n              aria-haspopup=\"listbox\"\n              aria-controls={open ? listId : undefined}\n              // role=combobox takes no name from content, so the placeholder\n              // must be exposed explicitly. A consumer `id` implies an external\n              // <label htmlFor>, which aria-label would override.\n              aria-labelledby={label ? `${fieldId}-label` : undefined}\n              aria-label={label || id ? undefined : placeholder}\n              aria-invalid={isError || undefined}\n              aria-describedby={describedBy}\n              disabled={disabled}\n              className={cn(\n                'bg-card text-foreground inline-flex w-full items-center justify-between gap-2 rounded-md border text-sm',\n                'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n                'focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n                'disabled:cursor-not-allowed disabled:opacity-50',\n                triggerHeight,\n                triggerPadding,\n                triggerPaddingRight,\n                isError\n                  ? 'border-danger focus-visible:border-danger focus-visible:ring-danger'\n                  : 'border-border-input focus-visible:border-accent focus-visible:ring-ring',\n              )}\n            >\n              <span\n                className={cn('truncate', !selected && 'text-foreground-subtle')}\n                title={selected ? selected.label : undefined}\n              >\n                {selected ? selected.label : placeholder}\n              </span>\n            </button>\n          </PopoverPrimitive.Trigger>\n\n          {/* Controls sit outside the trigger: a button inside a button is invalid HTML. */}\n          <span className=\"pointer-events-none absolute inset-y-0 right-0 flex items-center gap-0.5 pr-2\">\n            {clearable && selected && !disabled && (\n              <IconButton\n                size=\"sm\"\n                variant=\"ghost\"\n                aria-label={strings.combobox.clear}\n                icon={<X />}\n                onClick={handleClear}\n                className=\"text-foreground-subtle hover:text-foreground pointer-events-auto size-6\"\n              />\n            )}\n            <ChevronsUpDown className=\"text-foreground-subtle size-4\" aria-hidden />\n          </span>\n        </div>\n\n        <PopoverPrimitive.Portal>\n          <PopoverPrimitive.Content\n            // Radix gives the popover role=\"dialog\"; name it after the field.\n            aria-labelledby={label ? `${fieldId}-label` : undefined}\n            aria-label={label ? undefined : placeholder}\n            align=\"start\"\n            sideOffset={4}\n            className={cn(\n              'border-border bg-popover text-popover-foreground z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-lg border shadow-md',\n              'data-[state=open]:animate-in data-[state=closed]:animate-out',\n              'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n              'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n            )}\n          >\n            <CommandPrimitive shouldFilter={!loadOptions} className=\"flex h-full w-full flex-col\">\n              <div className=\"border-border flex items-center border-b px-3\">\n                <CommandPrimitive.Input\n                  value={query}\n                  onValueChange={setQuery}\n                  placeholder={searchPlaceholder}\n                  className=\"placeholder:text-foreground-subtle flex h-9 w-full bg-transparent py-2 text-lg outline-none md:text-sm\"\n                />\n                {loading && (\n                  <Loader2 className=\"text-foreground-subtle size-4 animate-spin\" aria-hidden />\n                )}\n              </div>\n              <CommandPrimitive.List\n                ref={listRef}\n                label={strings.command.suggestions}\n                className=\"max-h-64 overflow-y-auto p-1\"\n              >\n                {items.map((opt) => {\n                  const isSelected = opt.value === value;\n                  return (\n                    <CommandPrimitive.Item\n                      key={opt.value}\n                      value={opt.value}\n                      // cmdk matches on value + keywords; users type the label, not the id.\n                      keywords={opt.description ? [opt.label, opt.description] : [opt.label]}\n                      disabled={opt.disabled}\n                      onSelect={(v) => {\n                        setSelectedOption(opt);\n                        onChange(v);\n                        setOpen(false);\n                      }}\n                      className={cn(\n                        'text-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm',\n                        'data-[selected=true]:bg-background-muted',\n                        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n                      )}\n                    >\n                      <span className=\"flex-1\">{opt.label}</span>\n                      {opt.description && (\n                        <span className=\"text-foreground-subtle text-xs\">{opt.description}</span>\n                      )}\n                      {isSelected && <Check className=\"text-accent size-4\" aria-hidden />}\n                    </CommandPrimitive.Item>\n                  );\n                })}\n                {loadError && !loading && (\n                  <div className=\"text-danger-text px-2 py-6 text-center text-sm\">\n                    {loadErrorText}\n                  </div>\n                )}\n                {/* cmdk only shows Empty when no item matches the query, so it can always be mounted. */}\n                {!loading && !loadError && (\n                  <CommandPrimitive.Empty className=\"text-foreground-subtle px-2 py-6 text-center text-sm\">\n                    {emptyText}\n                  </CommandPrimitive.Empty>\n                )}\n              </CommandPrimitive.List>\n            </CommandPrimitive>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      </PopoverPrimitive.Root>\n\n      {error ? (\n        <p id={errorId} className=\"text-danger-text text-xs\">\n          {error}\n        </p>\n      ) : helperText ? (\n        <p id={helperId} className=\"text-foreground-subtle text-xs\">\n          {helperText}\n        </p>\n      ) : null}\n    </div>\n  );\n});\n\nCombobox.displayName = 'Combobox';\n"],"names":["Combobox","forwardRef","value","onChange","options","loadOptions","selectedLabel","label","helperText","error","placeholderProp","searchPlaceholderProp","emptyTextProp","loadErrorTextProp","clearable","disabled","size","id","className","ref","strings","useStrings","placeholder","searchPlaceholder","emptyText","loadErrorText","isError","fieldId","helperId","errorId","describedBy","useFieldIds","listId","setListId","useState","listRef","useCallback","el","open","setOpen","query","setQuery","loaded","setLoaded","loading","setLoading","loadError","setLoadError","selectedOption","setSelectedOption","items","useMemo","loadRef","useRef","useEffect","load","cancelled","res","selected","fromItems","o","triggerHeight","triggerPadding","triggerPaddingRight","handleClear","cn","jsx","PopoverPrimitive","jsxs","IconButton","X","ChevronsUpDown","CommandPrimitive","Loader2","opt","isSelected","v","Check"],"mappings":"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"}

package/dist-lib/components/ui/CommandPalette.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
 export declare const Command: import('react').ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
@@ -20,7 +20,7 @@ export declare const CommandInput: import('react').ForwardRefExoticComponent<Omi
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof import('react').InputHTMLAttributes<HTMLInputElement>>, "type" | "onChange" | "value"> & {
+}, "key" | "asChild" | keyof import('react').InputHTMLAttributes<HTMLInputElement>>, "value" | "type" | "onChange"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & import('react').RefAttributes<HTMLInputElement>, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
@@ -46,7 +46,7 @@ export declare const CommandGroup: import('react').ForwardRefExoticComponent<Omi
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -64,17 +64,20 @@ export declare const CommandItem: import('react').ForwardRefExoticComponent<Omit
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "onSelect" | "disabled"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
     keywords?: string[];
     forceMount?: boolean;
 } & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export declare function CommandShortcut({ children, className }: {
+export declare function CommandShortcut({ children, className, }: {
     children: ReactNode;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+export declare namespace CommandShortcut {
+    var displayName: string;
+}
 export interface CommandDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
@@ -106,4 +109,4 @@ export declare function CommandDialog({ open, onOpenChange, children, title }: C
  * @dont Hide essential actions behind the palette only — keep at least one
  *       button entry in the UI.
  */
-export declare function useCommandPaletteShortcut(setOpen: (open: boolean) => void): void;
+export declare function useCommandPaletteShortcut(setOpen: Dispatch<SetStateAction<boolean>>): void;

package/dist-lib/components/ui/CommandPalette.js

@@ -0,0 +1,179 @@
+"use client";
+import { jsx as a, jsxs as u } from "react/jsx-runtime";
+import { forwardRef as d, useRef as x, useEffect as y } from "react";
+import { Command as m } from "cmdk";
+import * as l from "@radix-ui/react-dialog";
+import { Search as C } from "../../icons/index.js";
+import { cn as r } from "../../lib/utils.js";
+import { useStrings as p } from "../../hooks/use-strings.js";
+const f = d(function({ className: t, ...e }, o) {
+  return /* @__PURE__ */ a(
+    m,
+    {
+      ref: o,
+      className: r(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-lg",
+        t
+      ),
+      ...e
+    }
+  );
+});
+f.displayName = "Command";
+const b = d(function({ className: t, ...e }, o) {
+  return /* @__PURE__ */ u("div", { className: "border-border flex items-center gap-2 border-b px-3", "cmdk-input-wrapper": "", children: [
+    /* @__PURE__ */ a(C, { className: "text-foreground-subtle size-4 shrink-0", "aria-hidden": !0 }),
+    /* @__PURE__ */ a(
+      m.Input,
+      {
+        ref: o,
+        className: r(
+          "flex h-11 w-full bg-transparent py-3 text-lg outline-none md:text-sm",
+          "placeholder:text-foreground-subtle disabled:cursor-not-allowed disabled:opacity-50",
+          t
+        ),
+        ...e
+      }
+    )
+  ] });
+});
+b.displayName = "CommandInput";
+const h = d(function({ className: t, label: e, ...o }, i) {
+  const s = p();
+  return /* @__PURE__ */ a(
+    m.List,
+    {
+      ref: i,
+      label: e ?? s.command.suggestions,
+      className: r("max-h-[320px] overflow-y-auto p-1", t),
+      ...o
+    }
+  );
+});
+h.displayName = "CommandList";
+const v = d(function({ className: t, ...e }, o) {
+  return /* @__PURE__ */ a(
+    m.Empty,
+    {
+      ref: o,
+      className: r("text-foreground-subtle py-8 text-center text-sm", t),
+      ...e
+    }
+  );
+});
+v.displayName = "CommandEmpty";
+const N = d(function({ className: t, ...e }, o) {
+  return /* @__PURE__ */ a(
+    m.Group,
+    {
+      ref: o,
+      className: r(
+        "text-foreground overflow-hidden p-1",
+        "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5",
+        "[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        "[&_[cmdk-group-heading]]:text-foreground-subtle",
+        t
+      ),
+      ...e
+    }
+  );
+});
+N.displayName = "CommandGroup";
+const w = d(function({ className: t, ...e }, o) {
+  return /* @__PURE__ */ a(m.Separator, { ref: o, asChild: !0, ...e, children: /* @__PURE__ */ a("div", { role: "none", className: r("bg-border -mx-1 my-1 h-px", t) }) });
+});
+w.displayName = "CommandSeparator";
+const k = d(function({ className: t, ...e }, o) {
+  return /* @__PURE__ */ a(
+    m.Item,
+    {
+      ref: o,
+      className: r(
+        "text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none",
+        "data-[selected=true]:bg-background-muted data-[selected=true]:text-foreground",
+        "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
+        "[&_svg]:text-foreground-subtle [&_svg]:size-4",
+        t
+      ),
+      ...e
+    }
+  );
+});
+k.displayName = "CommandItem";
+function S({
+  children: n,
+  className: t
+}) {
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      className: r(
+        "text-foreground-subtle ml-auto inline-flex items-center gap-0.5 font-mono text-xs tracking-widest",
+        t
+      ),
+      children: n
+    }
+  );
+}
+S.displayName = "CommandShortcut";
+function K({ open: n, onOpenChange: t, children: e, title: o }) {
+  const i = p(), s = x(null);
+  return /* @__PURE__ */ a(l.Root, { open: n, onOpenChange: t, children: /* @__PURE__ */ u(l.Portal, { children: [
+    /* @__PURE__ */ a(
+      l.Overlay,
+      {
+        className: r(
+          "bg-overlay fixed inset-0 z-[var(--z-overlay)]",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0"
+        )
+      }
+    ),
+    /* @__PURE__ */ u(
+      l.Content,
+      {
+        "aria-describedby": void 0,
+        onOpenAutoFocus: () => {
+          s.current = document.activeElement;
+        },
+        onCloseAutoFocus: (g) => {
+          var c;
+          g.preventDefault(), (c = s.current) == null || c.focus(), s.current = null;
+        },
+        className: r(
+          "fixed top-[20%] left-1/2 z-[var(--z-modal)] -translate-x-1/2",
+          "w-[calc(100%-2rem)] max-w-[640px] overflow-hidden",
+          "border-border bg-popover text-popover-foreground rounded-lg border shadow-lg",
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
+          "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95"
+        ),
+        children: [
+          /* @__PURE__ */ a(l.Title, { className: "sr-only", children: o ?? i.commandDialog.title }),
+          /* @__PURE__ */ a(f, { children: e })
+        ]
+      }
+    )
+  ] }) });
+}
+function G(n) {
+  y(() => {
+    const t = (e) => {
+      (e.key === "k" || e.key === "K") && (e.metaKey || e.ctrlKey) && !e.altKey && (e.preventDefault(), n((o) => !o));
+    };
+    return window.addEventListener("keydown", t), () => window.removeEventListener("keydown", t);
+  }, [n]);
+}
+export {
+  f as Command,
+  K as CommandDialog,
+  v as CommandEmpty,
+  N as CommandGroup,
+  b as CommandInput,
+  k as CommandItem,
+  h as CommandList,
+  w as CommandSeparator,
+  S as CommandShortcut,
+  G as useCommandPaletteShortcut
+};
+//# sourceMappingURL=CommandPalette.js.map

package/dist-lib/components/ui/CommandPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommandPalette.js","sources":["../../../src/components/ui/CommandPalette.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type Dispatch,\n  type ElementRef,\n  type ReactNode,\n  type SetStateAction,\n} from 'react';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Search } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\n/* -----------------------------------------------------------------------------\n *  CommandPalette is a Dialog hosting a `cmdk` Command. It supports grouped\n *  items, keyboard navigation (handled by cmdk), an empty state, and a\n *  pluggable list of \"recent\" items shown when the search input is empty.\n * --------------------------------------------------------------------------- */\n\nexport const Command = forwardRef<\n  ElementRef<typeof CommandPrimitive>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive>\n>(function Command({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive\n      ref={ref}\n      className={cn(\n        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-lg',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nCommand.displayName = 'Command';\n\nexport const CommandInput = forwardRef<\n  ElementRef<typeof CommandPrimitive.Input>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Input>\n>(function CommandInput({ className, ...props }, ref) {\n  return (\n    <div className=\"border-border flex items-center gap-2 border-b px-3\" cmdk-input-wrapper=\"\">\n      <Search className=\"text-foreground-subtle size-4 shrink-0\" aria-hidden />\n      <CommandPrimitive.Input\n        ref={ref}\n        className={cn(\n          'flex h-11 w-full bg-transparent py-3 text-lg outline-none md:text-sm',\n          'placeholder:text-foreground-subtle disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n        {...props}\n      />\n    </div>\n  );\n});\nCommandInput.displayName = 'CommandInput';\n\nexport const CommandList = forwardRef<\n  ElementRef<typeof CommandPrimitive.List>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.List>\n>(function CommandList({ className, label, ...props }, ref) {\n  const strings = useStrings();\n  return (\n    <CommandPrimitive.List\n      ref={ref}\n      label={label ?? strings.command.suggestions}\n      className={cn('max-h-[320px] overflow-y-auto p-1', className)}\n      {...props}\n    />\n  );\n});\nCommandList.displayName = 'CommandList';\n\nexport const CommandEmpty = forwardRef<\n  ElementRef<typeof CommandPrimitive.Empty>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>\n>(function CommandEmpty({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Empty\n      ref={ref}\n      className={cn('text-foreground-subtle py-8 text-center text-sm', className)}\n      {...props}\n    />\n  );\n});\nCommandEmpty.displayName = 'CommandEmpty';\n\nexport const CommandGroup = forwardRef<\n  ElementRef<typeof CommandPrimitive.Group>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Group>\n>(function CommandGroup({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Group\n      ref={ref}\n      className={cn(\n        'text-foreground overflow-hidden p-1',\n        '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5',\n        '[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',\n        '[&_[cmdk-group-heading]]:text-foreground-subtle',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nCommandGroup.displayName = 'CommandGroup';\n\nexport const CommandSeparator = forwardRef<\n  ElementRef<typeof CommandPrimitive.Separator>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>\n>(function CommandSeparator({ className, ...props }, ref) {\n  // cmdk hard-codes role=\"separator\", which is not a permitted child of the\n  // listbox. asChild lets the child's role win: the divider is purely visual.\n  return (\n    <CommandPrimitive.Separator ref={ref} asChild {...props}>\n      <div role=\"none\" className={cn('bg-border -mx-1 my-1 h-px', className)} />\n    </CommandPrimitive.Separator>\n  );\n});\nCommandSeparator.displayName = 'CommandSeparator';\n\nexport const CommandItem = forwardRef<\n  ElementRef<typeof CommandPrimitive.Item>,\n  ComponentPropsWithoutRef<typeof CommandPrimitive.Item>\n>(function CommandItem({ className, ...props }, ref) {\n  return (\n    <CommandPrimitive.Item\n      ref={ref}\n      className={cn(\n        'text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',\n        'data-[selected=true]:bg-background-muted data-[selected=true]:text-foreground',\n        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n        '[&_svg]:text-foreground-subtle [&_svg]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nCommandItem.displayName = 'CommandItem';\n\nexport function CommandShortcut({\n  children,\n  className,\n}: {\n  children: ReactNode;\n  className?: string;\n}) {\n  return (\n    <span\n      className={cn(\n        'text-foreground-subtle ml-auto inline-flex items-center gap-0.5 font-mono text-xs tracking-widest',\n        className,\n      )}\n    >\n      {children}\n    </span>\n  );\n}\nCommandShortcut.displayName = 'CommandShortcut';\n\n/* -----------------------------------------------------------------------------\n *  Dialog wrapper — a ready-to-use ⌘K palette.\n * --------------------------------------------------------------------------- */\n\nexport interface CommandDialogProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  children: ReactNode;\n  /** Visible label for screen readers. */\n  title?: string;\n}\n\nexport function CommandDialog({ open, onOpenChange, children, title }: CommandDialogProps) {\n  const strings = useStrings();\n  // The palette has no DialogTrigger (⌘K / any button opens it), so Radix has\n  // no trigger to return focus to and would drop it on <body>. Remember what\n  // was focused when the dialog opened and restore it on close.\n  const returnFocusRef = useRef<HTMLElement | null>(null);\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Overlay\n          className={cn(\n            'bg-overlay fixed inset-0 z-[var(--z-overlay)]',\n            'data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0',\n          )}\n        />\n        <DialogPrimitive.Content\n          aria-describedby={undefined}\n          onOpenAutoFocus={() => {\n            returnFocusRef.current = document.activeElement as HTMLElement | null;\n          }}\n          onCloseAutoFocus={(event) => {\n            event.preventDefault();\n            returnFocusRef.current?.focus();\n            returnFocusRef.current = null;\n          }}\n          className={cn(\n            'fixed top-[20%] left-1/2 z-[var(--z-modal)] -translate-x-1/2',\n            'w-[calc(100%-2rem)] max-w-[640px] overflow-hidden',\n            'border-border bg-popover text-popover-foreground rounded-lg border shadow-lg',\n            'data-[state=open]:animate-in data-[state=closed]:animate-out',\n            'data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0',\n            'data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95',\n          )}\n        >\n          <DialogPrimitive.Title className=\"sr-only\">\n            {title ?? strings.commandDialog.title}\n          </DialogPrimitive.Title>\n          <Command>{children}</Command>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\n/**\n * Hook that wires ⌘K / Ctrl+K to a setter — the canonical way to mount the\n * palette in an app shell.\n *\n * @example\n *   const [open, setOpen] = useState(false);\n *   useCommandPaletteShortcut(setOpen);\n *   …\n *   <CommandDialog open={open} onOpenChange={setOpen}>\n *     <CommandInput placeholder=\"Type a command…\" />\n *     <CommandList>\n *       <CommandEmpty>No results.</CommandEmpty>\n *       <CommandGroup heading=\"Suggestions\">\n *         <CommandItem>Create project</CommandItem>\n *         <CommandItem>Invite teammate</CommandItem>\n *       </CommandGroup>\n *     </CommandList>\n *   </CommandDialog>\n *\n * @do Group items by category. Show \"Recent\" first when the query is empty.\n * @dont Hide essential actions behind the palette only — keep at least one\n *       button entry in the UI.\n */\nexport function useCommandPaletteShortcut(setOpen: Dispatch<SetStateAction<boolean>>): void {\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      if ((e.key === 'k' || e.key === 'K') && (e.metaKey || e.ctrlKey) && !e.altKey) {\n        e.preventDefault();\n        // Functional update: ⌘K toggles without the hook tracking open state.\n        setOpen((prev) => !prev);\n      }\n    };\n    window.addEventListener('keydown', onKey);\n    return () => window.removeEventListener('keydown', onKey);\n  }, [setOpen]);\n}\n"],"names":["Command","forwardRef","className","props","ref","jsx","CommandPrimitive","cn","CommandInput","jsxs","Search","CommandList","label","strings","useStrings","CommandEmpty","CommandGroup","CommandSeparator","CommandItem","CommandShortcut","children","CommandDialog","open","onOpenChange","title","returnFocusRef","useRef","DialogPrimitive","event","_a","useCommandPaletteShortcut","setOpen","useEffect","onKey","prev"],"mappings":"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"}

package/dist-lib/components/ui/ContextMenu.d.ts

@@ -29,15 +29,20 @@ export declare const ContextMenuGroup: import('react').ForwardRefExoticComponent
 export declare const ContextMenuPortal: import('react').FC<ContextMenuPrimitive.ContextMenuPortalProps>;
 export declare const ContextMenuSub: import('react').FC<ContextMenuPrimitive.ContextMenuSubProps>;
 export declare const ContextMenuRadioGroup: import('react').ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
-export declare const ContextMenuSubTrigger: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSubTrigger: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;
 export declare const ContextMenuSubContent: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export declare const ContextMenuContent: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export declare const ContextMenuItem: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
     destructive?: boolean;
 } & import('react').RefAttributes<HTMLDivElement>>;
 export declare const ContextMenuCheckboxItem: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export declare const ContextMenuRadioItem: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const ContextMenuLabel: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuLabel: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;
 export declare const ContextMenuSeparator: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export declare function ContextMenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
 export declare namespace ContextMenuShortcut {