@gerege-systems/ui 0.11.2

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

@@ -0,0 +1,70 @@
+"use client";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { forwardRef as N, useId as y } from "react";
+import * as m from "@radix-ui/react-checkbox";
+import { Minus as j, Check as C } from "../../icons/index.js";
+import { cn as o } from "../../lib/utils.js";
+const I = N(
+  function({
+    className: u,
+    label: c,
+    description: a,
+    error: t,
+    hideLabel: b,
+    id: x,
+    disabled: n,
+    "aria-describedby": h,
+    "aria-invalid": i,
+    ...d
+  }, g) {
+    const v = y(), r = x ?? v, l = a ? `${r}-desc` : void 0, f = t ? `${r}-error` : void 0, k = [f, l, h].filter(Boolean).join(" ") || void 0, p = !!t || i === !0 || i === "true";
+    return /* @__PURE__ */ s("div", { className: o("flex flex-col gap-1", u), children: [
+      /* @__PURE__ */ s("div", { className: "flex items-start gap-2.5", children: [
+        /* @__PURE__ */ e(
+          m.Root,
+          {
+            ref: g,
+            id: r,
+            disabled: n,
+            "aria-describedby": k,
+            "aria-invalid": p ? !0 : i,
+            className: o(
+              "peer relative mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-sm border",
+              // WCAG 2.5.8: 16px visual box, ≥24px hit area via an invisible inset halo.
+              'before:absolute before:-inset-1.5 before:content-[""]',
+              "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+              "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+              "data-[state=checked]:bg-accent data-[state=checked]:border-accent data-[state=checked]:text-on-accent",
+              "data-[state=indeterminate]:bg-accent data-[state=indeterminate]:border-accent data-[state=indeterminate]:text-on-accent",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              "border-border-input aria-invalid:border-danger"
+            ),
+            ...d,
+            children: /* @__PURE__ */ e(m.Indicator, { className: "flex items-center justify-center", children: d.checked === "indeterminate" ? /* @__PURE__ */ e(j, { className: "size-3", "aria-hidden": !0, strokeWidth: 3 }) : /* @__PURE__ */ e(C, { className: "size-3", "aria-hidden": !0, strokeWidth: 3 }) })
+          }
+        ),
+        c && /* @__PURE__ */ s("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: r,
+              className: o(
+                "text-foreground text-sm select-none",
+                n && "cursor-not-allowed opacity-50",
+                b && "sr-only"
+              ),
+              children: c
+            }
+          ),
+          a && /* @__PURE__ */ e("p", { id: l, className: "text-foreground-subtle text-xs", children: a })
+        ] })
+      ] }),
+      t && /* @__PURE__ */ e("p", { id: f, className: "text-danger-text text-xs", children: t })
+    ] });
+  }
+);
+I.displayName = "Checkbox";
+export {
+  I as Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1,67 @@
+import { ReactNode } from 'react';
+export interface ComboboxOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    /** Currently selected value (controlled). */
+    value: string | null;
+    /** Called when a value is picked or cleared. */
+    onChange: (value: string | null) => void;
+    /** Static options. Ignored if `loadOptions` is provided. */
+    options?: ComboboxOption[];
+    /**
+     * Async loader called with the current query each time it changes.
+     * 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. */
+    helperText?: ReactNode;
+    /** Validation error. */
+    error?: ReactNode;
+    /** Placeholder shown when no value is selected. */
+    placeholder?: string;
+    /** Search placeholder inside the popover. */
+    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;
+}
+/**
+ * Single-select with typeahead. Use `options` for client-side filtering or
+ * `loadOptions` for server-side search.
+ *
+ * @example Client-side
+ *   <Combobox label="Country" options={countries} value={c} onChange={setC} />
+ *
+ * @example Server-side
+ *   <Combobox label="Assignee"
+ *             value={user}
+ *             onChange={setUser}
+ *             loadOptions={async (q) => api.searchUsers(q)} />
+ *
+ * @do Use Combobox over Select for >12 options or when the user is expected
+ *      to know what they want.
+ * @dont Re-query on every keystroke without debouncing — pass a debounced
+ *       `loadOptions` to avoid hammering the server.
+ */
+export declare const Combobox: import('react').ForwardRefExoticComponent<ComboboxProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,112 @@
+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>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CommandInput: import('react').ForwardRefExoticComponent<Omit<Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import('react').InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "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>>;
+export declare const CommandList: import('react').ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CommandEmpty: import('react').ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CommandGroup: import('react').ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CommandSeparator: import('react').ForwardRefExoticComponent<Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    alwaysRender?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CommandItem: import('react').ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "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, }: {
+    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;
+    children: ReactNode;
+    /** Visible label for screen readers. */
+    title?: string;
+}
+export declare function CommandDialog({ open, onOpenChange, children, title }: CommandDialogProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook that wires ⌘K / Ctrl+K to a setter — the canonical way to mount the
+ * palette in an app shell.
+ *
+ * @example
+ *   const [open, setOpen] = useState(false);
+ *   useCommandPaletteShortcut(setOpen);
+ *   …
+ *   <CommandDialog open={open} onOpenChange={setOpen}>
+ *     <CommandInput placeholder="Type a command…" />
+ *     <CommandList>
+ *       <CommandEmpty>No results.</CommandEmpty>
+ *       <CommandGroup heading="Suggestions">
+ *         <CommandItem>Create project</CommandItem>
+ *         <CommandItem>Invite teammate</CommandItem>
+ *       </CommandGroup>
+ *     </CommandList>
+ *   </CommandDialog>
+ *
+ * @do Group items by category. Show "Recent" first when the query is empty.
+ * @dont Hide essential actions behind the palette only — keep at least one
+ *       button entry in the UI.
+ */
+export declare function useCommandPaletteShortcut(setOpen: Dispatch<SetStateAction<boolean>>): void;