@nofinite/nui 1.1.1 → 2.0.1

package/dist/components/combobox/Combobox.js

@@ -1,114 +1,129 @@
-import { jsxs as v, jsx as i } from "react/jsx-runtime";
-import { useState as k, useRef as M, useCallback as w, useEffect as R } from "react";
+import { jsxs as k, jsx as a } from "react/jsx-runtime";
+import { forwardRef as G, useId as H, useState as D, useRef as J, useCallback as h, useEffect as M } from "react";
 /* empty css             */
-import { generateId as U } from "../../utils/generateid/generateId.js";
-import { onClickOutside as q } from "../../utils/onclickoutside/onClickOutside.js";
-function Q({
-  options: n,
-  value: a,
-  defaultValue: N,
-  onChange: C,
-  placeholder: S = "Select...",
-  disabled: l = !1,
-  className: $ = "",
-  emptyMessage: B = "No results found",
-  filter: D,
-  leftIcon: b,
-  rightIcon: m,
-  renderOption: L,
-  renderOptionIcon: y
-}) {
-  const f = a !== void 0, [d, r] = k(() => f && a ? n.find((o) => o.value === a)?.label ?? "" : N ? n.find((o) => o.value === N)?.label ?? "" : ""), [t, g] = k(!1), [p, x] = k(-1), j = M(null), A = M(U("combobox-list")).current, u = n.filter(
-    (e) => D ? D(d, e) : e.label.toLowerCase().includes(d.toLowerCase())
-  ), E = w(
-    (e) => {
-      C?.(e);
-    },
-    [C]
-  ), c = w(() => {
-    l || g(!0);
-  }, [l]), s = w(() => {
-    g(!1), x(-1);
-  }, []);
-  R(() => {
-    if (t)
-      return q(j, s);
-  }, [t, s]), R(() => {
-    if (f && a !== void 0) {
-      const e = n.find((o) => o.value === a);
-      r(e?.label || "");
-    }
-  }, [f, a, n]);
-  const F = (e) => {
-    if (!l)
-      switch (e.key) {
-        case "ArrowDown":
-          e.preventDefault(), t || c(), x((o) => Math.min(u.length - 1, o + 1));
-          break;
-        case "ArrowUp":
-          e.preventDefault(), t || c(), x((o) => Math.max(0, o - 1));
-          break;
-        case "Enter":
-          if (t && p >= 0) {
-            const o = u[p];
-            r(o.label), E(o.value), s();
-          }
-          break;
-        case "Escape":
-          t && (e.preventDefault(), s());
-          break;
+import { cn as y } from "../../utils/cn/cn.js";
+const O = G(
+  ({
+    options: s,
+    value: t,
+    defaultValue: b,
+    onChange: j,
+    placeholder: F = "Select...",
+    disabled: m = !1,
+    className: I,
+    emptyMessage: K = "No results found",
+    filter: E,
+    leftIcon: w,
+    rightIcon: L,
+    renderOption: g,
+    renderOptionIcon: $,
+    ...U
+  }, r) => {
+    const l = t !== void 0, d = `${H()}-listbox`, [f, p] = D(() => l && t ? s.find((e) => e.value === t)?.label ?? "" : b ? s.find((e) => e.value === b)?.label ?? "" : ""), [n, A] = D(!1), [i, v] = D(-1), N = J(null), q = h(
+      (e) => {
+        N.current = e, typeof r == "function" ? r(e) : r && (r.current = e);
+      },
+      [r]
+    ), u = s.filter(
+      (e) => E ? E(f, e) : e.label.toLowerCase().includes(f.toLowerCase())
+    ), c = h(() => {
+      m || A(!0);
+    }, [m]), x = h(() => {
+      A(!1), v(-1);
+    }, []), C = h(() => {
+      const e = l ? t : b, o = s.find((_) => _.value === e);
+      p(o?.label || "");
+    }, [l, t, b, s]);
+    M(() => {
+      if (!n) return;
+      const e = (o) => {
+        N.current && !N.current.contains(o.target) && (x(), C());
+      };
+      return document.addEventListener("mousedown", e), document.addEventListener("touchstart", e), () => {
+        document.removeEventListener("mousedown", e), document.removeEventListener("touchstart", e);
+      };
+    }, [n, x, C]), M(() => {
+      if (l && t !== void 0) {
+        const e = s.find((o) => o.value === t);
+        p(e?.label || "");
       }
-  }, K = (e) => {
-    r(e.label), E(e.value), s();
-  };
-  return /* @__PURE__ */ v("div", { ref: j, className: `ui-combobox ${$}`, children: [
-    /* @__PURE__ */ v("div", { className: "ui-combobox-input-wrapper", children: [
-      b && /* @__PURE__ */ i("span", { className: "ui-combobox-left-icon", children: b }),
-      /* @__PURE__ */ i(
-        "input",
-        {
-          className: [
-            "ui-combobox-input",
-            b && "has-left-icon",
-            m && "has-right-icon"
-          ].filter(Boolean).join(" "),
-          role: "combobox",
-          "aria-expanded": t,
-          "aria-controls": A,
-          placeholder: S,
-          disabled: l,
-          value: d,
-          onFocus: c,
-          onClick: c,
-          onChange: (e) => {
-            r(e.target.value), t || c();
-          },
-          onKeyDown: F
+    }, [l, t, s]);
+    const z = (e) => {
+      if (!m)
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault(), n || c(), v((o) => Math.min(u.length - 1, o + 1));
+            break;
+          case "ArrowUp":
+            e.preventDefault(), n || c(), v((o) => Math.max(0, o - 1));
+            break;
+          case "Enter":
+            n && i >= 0 && u[i] ? (e.preventDefault(), R(u[i])) : n || c();
+            break;
+          case "Escape":
+            n && (e.preventDefault(), x(), C());
+            break;
         }
-      ),
-      m && /* @__PURE__ */ i("span", { className: "ui-combobox-right-icon", children: m })
-    ] }),
-    t && /* @__PURE__ */ i("div", { id: A, role: "listbox", className: "ui-combobox-listbox", children: u.length === 0 ? /* @__PURE__ */ i("div", { className: "ui-combobox-empty", children: B }) : u.map((e, o) => {
-      const h = o === p;
-      return /* @__PURE__ */ v(
-        "div",
-        {
-          role: "option",
-          "aria-selected": h,
-          className: `ui-combobox-option ${h ? "active" : ""}`,
-          onMouseDown: (O) => O.preventDefault(),
-          onClick: () => K(e),
-          children: [
-            y && /* @__PURE__ */ i("span", { className: "ui-combobox-option-icon", children: y(e) }),
-            L ? L(e, h) : e.label
-          ]
-        },
-        e.value
-      );
-    }) })
-  ] });
-}
+    }, R = (e) => {
+      p(e.label), j?.(e.value), x();
+    };
+    return /* @__PURE__ */ k("div", { ref: q, className: y("nui-combobox", I), ...U, children: [
+      /* @__PURE__ */ k("div", { className: "nui-combobox__wrapper", children: [
+        w && /* @__PURE__ */ a("span", { className: "nui-combobox__icon -left", children: w }),
+        /* @__PURE__ */ a(
+          "input",
+          {
+            className: y(
+              "nui-combobox__input",
+              !!w && "nui-combobox__input--has-left",
+              !!L && "nui-combobox__input--has-right"
+            ),
+            role: "combobox",
+            "aria-expanded": n,
+            "aria-controls": d,
+            "aria-autocomplete": "list",
+            "aria-activedescendant": n && i >= 0 ? `${d}-option-${i}` : void 0,
+            placeholder: F,
+            disabled: m,
+            value: f,
+            onFocus: c,
+            onClick: c,
+            onChange: (e) => {
+              p(e.target.value), n || c(), v(-1);
+            },
+            onKeyDown: z
+          }
+        ),
+        L && /* @__PURE__ */ a("span", { className: "nui-combobox__icon -right", children: L })
+      ] }),
+      n && /* @__PURE__ */ a("div", { id: d, role: "listbox", className: "nui-combobox__listbox", children: u.length === 0 ? /* @__PURE__ */ a("div", { className: "nui-combobox__empty", children: K }) : u.map((e, o) => {
+        const _ = o === i, S = e.label === f;
+        return /* @__PURE__ */ k(
+          "div",
+          {
+            id: `${d}-option-${o}`,
+            role: "option",
+            "aria-selected": S,
+            className: y(
+              "nui-combobox__option",
+              _ && "nui-combobox__option--active",
+              S && "nui-combobox__option--selected"
+            ),
+            onMouseDown: (B) => B.preventDefault(),
+            onClick: () => R(e),
+            children: [
+              $ && /* @__PURE__ */ a("span", { className: "nui-combobox__option-icon", children: $(e) }),
+              g ? g(e, _) : e.label
+            ]
+          },
+          e.value
+        );
+      }) })
+    ] });
+  }
+);
+O.displayName = "Combobox";
 export {
-  Q as Combobox
+  O as Combobox
 };
 //# sourceMappingURL=Combobox.js.map

package/dist/components/combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["/**\r\n * Combobox.tsx\r\n * Fully WCAG-compliant Combobox integrated with your existing utilities.\r\n */\r\n\r\n/**\r\n * Combobox.tsx\r\n * Now includes:\r\n *  - leftIcon (input)\r\n *  - rightIcon (input)\r\n *  - renderOptionIcon (listbox)\r\n */\r\n/**\r\n * Combobox.tsx\r\n * Fully WCAG-Compliant Combobox with:\r\n * - Icons (input + option)\r\n * - Value→Label mapping fixed\r\n * - Keyboard navigation\r\n * - Click outside to close\r\n * - Controlled/uncontrolled\r\n */\r\n\r\nimport React, {\r\n  useState,\r\n  useEffect,\r\n  useRef,\r\n  useCallback,\r\n  KeyboardEvent,\r\n} from 'react';\r\n\r\nimport './Combobox.css';\r\n\r\n// USING YOUR EXISTING UTILS\r\nimport { onClickOutside, generateId } from '../../utils/index';\r\n\r\nexport interface ComboboxOption {\r\n  label: string;\r\n  value: string;\r\n  icon?: React.ReactNode;\r\n}\r\n\r\ninterface ComboboxProps {\r\n  options: ComboboxOption[];\r\n\r\n  value?: string;\r\n  defaultValue?: string;\r\n  onChange?: (value: string) => void;\r\n\r\n  placeholder?: string;\r\n  disabled?: boolean;\r\n  className?: string;\r\n  emptyMessage?: string;\r\n\r\n  filter?: (input: string, option: ComboboxOption) => boolean;\r\n\r\n  leftIcon?: React.ReactNode;\r\n  rightIcon?: React.ReactNode;\r\n\r\n  renderOption?: (option: ComboboxOption, active: boolean) => React.ReactNode;\r\n  renderOptionIcon?: (option: ComboboxOption) => React.ReactNode;\r\n}\r\n\r\nexport function Combobox({\r\n  options,\r\n  value,\r\n  defaultValue,\r\n  onChange,\r\n  placeholder = 'Select...',\r\n  disabled = false,\r\n  className = '',\r\n  emptyMessage = 'No results found',\r\n  filter,\r\n  leftIcon,\r\n  rightIcon,\r\n  renderOption,\r\n  renderOptionIcon,\r\n}: ComboboxProps) {\r\n  const isControlled = value !== undefined;\r\n\r\n  /**\r\n   * displayLabel = what the user SEEES in input\r\n   * value = actual selected value (sent to parent)\r\n   */\r\n  const [displayLabel, setDisplayLabel] = useState<string>(() => {\r\n    if (isControlled && value) {\r\n      const match = options.find((o) => o.value === value);\r\n      return match?.label ?? '';\r\n    }\r\n    if (defaultValue) {\r\n      const match = options.find((o) => o.value === defaultValue);\r\n      return match?.label ?? '';\r\n    }\r\n    return '';\r\n  });\r\n\r\n  const [open, setOpen] = useState(false);\r\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\r\n\r\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\r\n  const listboxId = useRef(generateId('combobox-list')).current;\r\n\r\n  /** Filtered options */\r\n  const filtered = options.filter((opt) =>\r\n    filter\r\n      ? filter(displayLabel, opt)\r\n      : opt.label.toLowerCase().includes(displayLabel.toLowerCase())\r\n  );\r\n\r\n  /** Set parent value */\r\n  const setValue = useCallback(\r\n    (val: string) => {\r\n      onChange?.(val);\r\n    },\r\n    [onChange]\r\n  );\r\n\r\n  const openList = useCallback(() => {\r\n    if (!disabled) setOpen(true);\r\n  }, [disabled]);\r\n\r\n  const closeList = useCallback(() => {\r\n    setOpen(false);\r\n    setActiveIndex(-1);\r\n  }, []);\r\n\r\n  /** Click outside to close */\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    return onClickOutside(wrapperRef, closeList);\r\n  }, [open, closeList]);\r\n\r\n  /** Sync controlled (value → label) */\r\n  useEffect(() => {\r\n    if (isControlled && value !== undefined) {\r\n      const found = options.find((o) => o.value === value);\r\n      setDisplayLabel(found?.label || '');\r\n    }\r\n  }, [isControlled, value, options]);\r\n\r\n  /** Keyboard behavior */\r\n  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\r\n    if (disabled) return;\r\n\r\n    switch (e.key) {\r\n      case 'ArrowDown':\r\n        e.preventDefault();\r\n        if (!open) openList();\r\n        setActiveIndex((i) => Math.min(filtered.length - 1, i + 1));\r\n        break;\r\n\r\n      case 'ArrowUp':\r\n        e.preventDefault();\r\n        if (!open) openList();\r\n        setActiveIndex((i) => Math.max(0, i - 1));\r\n        break;\r\n\r\n      case 'Enter':\r\n        if (open && activeIndex >= 0) {\r\n          const opt = filtered[activeIndex];\r\n          setDisplayLabel(opt.label);\r\n          setValue(opt.value);\r\n          closeList();\r\n        }\r\n        break;\r\n\r\n      case 'Escape':\r\n        if (open) {\r\n          e.preventDefault();\r\n          closeList();\r\n        }\r\n        break;\r\n\r\n      default:\r\n        break;\r\n    }\r\n  };\r\n\r\n  /** Option click */\r\n  const onOptionClick = (opt: ComboboxOption) => {\r\n    setDisplayLabel(opt.label);\r\n    setValue(opt.value);\r\n    closeList();\r\n  };\r\n\r\n  return (\r\n    <div ref={wrapperRef} className={`ui-combobox ${className}`}>\r\n      {/* Input + Icons */}\r\n      <div className=\"ui-combobox-input-wrapper\">\r\n        {leftIcon && <span className=\"ui-combobox-left-icon\">{leftIcon}</span>}\r\n\r\n        <input\r\n          className={[\r\n            'ui-combobox-input',\r\n            leftIcon && 'has-left-icon',\r\n            rightIcon && 'has-right-icon',\r\n          ]\r\n            .filter(Boolean)\r\n            .join(' ')}\r\n          role=\"combobox\"\r\n          aria-expanded={open}\r\n          aria-controls={listboxId}\r\n          placeholder={placeholder}\r\n          disabled={disabled}\r\n          value={displayLabel}\r\n          onFocus={openList}\r\n          onClick={openList}\r\n          onChange={(e) => {\r\n            setDisplayLabel(e.target.value);\r\n            if (!open) openList();\r\n          }}\r\n          onKeyDown={onKeyDown}\r\n        />\r\n\r\n        {rightIcon && (\r\n          <span className=\"ui-combobox-right-icon\">{rightIcon}</span>\r\n        )}\r\n      </div>\r\n\r\n      {open && (\r\n        <div id={listboxId} role=\"listbox\" className=\"ui-combobox-listbox\">\r\n          {filtered.length === 0 ? (\r\n            <div className=\"ui-combobox-empty\">{emptyMessage}</div>\r\n          ) : (\r\n            filtered.map((opt, index) => {\r\n              const active = index === activeIndex;\r\n\r\n              return (\r\n                <div\r\n                  key={opt.value}\r\n                  role=\"option\"\r\n                  aria-selected={active}\r\n                  className={`ui-combobox-option ${active ? 'active' : ''}`}\r\n                  onMouseDown={(e) => e.preventDefault()}\r\n                  onClick={() => onOptionClick(opt)}\r\n                >\r\n                  {/* Option icon (if provided through renderOptionIcon) */}\r\n                  {renderOptionIcon && (\r\n                    <span className=\"ui-combobox-option-icon\">\r\n                      {renderOptionIcon(opt)}\r\n                    </span>\r\n                  )}\r\n\r\n                  {renderOption ? renderOption(opt, active) : opt.label}\r\n                </div>\r\n              );\r\n            })\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n"],"names":["Combobox","options","value","defaultValue","onChange","placeholder","disabled","className","emptyMessage","filter","leftIcon","rightIcon","renderOption","renderOptionIcon","isControlled","displayLabel","setDisplayLabel","useState","open","setOpen","activeIndex","setActiveIndex","wrapperRef","useRef","listboxId","generateId","filtered","opt","setValue","useCallback","val","openList","closeList","useEffect","onClickOutside","found","onKeyDown","i","onOptionClick","jsxs","jsx","index","active","e"],"mappings":"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"}
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/combobox/Combobox.tsx"],"sourcesContent":["\"use client\";\n\nimport React, {\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  KeyboardEvent,\n  useId,\n  forwardRef,\n} from 'react';\nimport { cn } from '../../utils';\nimport './Combobox.css';\n\nexport interface ComboboxOption {\n  label: string;\n  value: string;\n  icon?: React.ReactNode;\n}\n\nexport interface ComboboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {\n  options: ComboboxOption[];\n  /** Controlled value of the combobox */\n  value?: string;\n  /** Initial uncontrolled value */\n  defaultValue?: string;\n  /** Callback fired when an option is selected */\n  onChange?: (value: string) => void;\n  placeholder?: string;\n  disabled?: boolean;\n  /** Message displayed when filtering returns zero results */\n  emptyMessage?: string;\n  /** Custom filter function. Defaults to simple substring matching on the label. */\n  filter?: (input: string, option: ComboboxOption) => boolean;\n  leftIcon?: React.ReactNode;\n  rightIcon?: React.ReactNode;\n  /** Custom renderer for the entire option row */\n  renderOption?: (option: ComboboxOption, active: boolean) => React.ReactNode;\n  /** Custom renderer strictly for the option's icon */\n  renderOptionIcon?: (option: ComboboxOption) => React.ReactNode;\n}\n\n/**\n * Combobox Component\n * * A text input that provides a dropdown list of options to help users enter data.\n * Architecture Note: Implements the WAI-ARIA Combobox pattern, supporting full keyboard \n * navigation (Arrow keys, Enter, Escape) and click-outside dismissal.\n */\nexport const Combobox = forwardRef<HTMLDivElement, ComboboxProps>(\n  (\n    {\n      options,\n      value,\n      defaultValue,\n      onChange,\n      placeholder = 'Select...',\n      disabled = false,\n      className,\n      emptyMessage = 'No results found',\n      filter,\n      leftIcon,\n      rightIcon,\n      renderOption,\n      renderOptionIcon,\n      ...props\n    },\n    ref\n  ) => {\n    const isControlled = value !== undefined;\n    const baseId = useId();\n    const listboxId = `${baseId}-listbox`;\n\n    // * State Management\n    // displayLabel tracks what the user is currently typing OR the label of the selected option.\n    const [displayLabel, setDisplayLabel] = useState<string>(() => {\n      if (isControlled && value) return options.find((o) => o.value === value)?.label ?? '';\n      if (defaultValue) return options.find((o) => o.value === defaultValue)?.label ?? '';\n      return '';\n    });\n    \n    const [open, setOpen] = useState(false);\n    const [activeIndex, setActiveIndex] = useState<number>(-1);\n    const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n    // Merge forwarded ref with our internal wrapper ref\n    const setRefs = useCallback(\n      (node: HTMLDivElement) => {\n        wrapperRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      },\n      [ref]\n    );\n\n    // Filter Options based on current input\n    const filtered = options.filter((opt) =>\n      filter\n        ? filter(displayLabel, opt)\n        : opt.label.toLowerCase().includes(displayLabel.toLowerCase())\n    );\n\n    const openList = useCallback(() => {\n      if (!disabled) setOpen(true);\n    }, [disabled]);\n\n    const closeList = useCallback(() => {\n      setOpen(false);\n      setActiveIndex(-1);\n    }, []);\n\n    // * UX Architecture: Revert Label\n    // If a user types \"App\", sees \"Apple\", but clicks away without selecting it,\n    // we must revert the input field back to whatever value was previously confirmed,\n    // rather than leaving \"App\" dangling in the input.\n    const revertLabel = useCallback(() => {\n      const currentValue = isControlled ? value : defaultValue;\n      const match = options.find((o) => o.value === currentValue);\n      setDisplayLabel(match?.label || '');\n    }, [isControlled, value, defaultValue, options]);\n\n    // Click outside to close\n    useEffect(() => {\n      if (!open) return;\n      const handleClickOutside = (event: MouseEvent | TouchEvent) => {\n        if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) {\n          closeList();\n          revertLabel();\n        }\n      };\n      document.addEventListener('mousedown', handleClickOutside);\n      document.addEventListener('touchstart', handleClickOutside);\n      return () => {\n        document.removeEventListener('mousedown', handleClickOutside);\n        document.removeEventListener('touchstart', handleClickOutside);\n      };\n    }, [open, closeList, revertLabel]);\n\n    // Sync controlled value changes from parent\n    useEffect(() => {\n      if (isControlled && value !== undefined) {\n        const found = options.find((o) => o.value === value);\n        setDisplayLabel(found?.label || '');\n      }\n    }, [isControlled, value, options]);\n\n    // Keyboard Navigation\n    const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          if (!open) openList();\n          setActiveIndex((i) => Math.min(filtered.length - 1, i + 1));\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          if (!open) openList();\n          setActiveIndex((i) => Math.max(0, i - 1));\n          break;\n        case 'Enter':\n          if (open && activeIndex >= 0 && filtered[activeIndex]) {\n            e.preventDefault();\n            handleSelect(filtered[activeIndex]);\n          } else if (!open) {\n            openList();\n          }\n          break;\n        case 'Escape':\n          if (open) {\n            e.preventDefault();\n            closeList();\n            revertLabel();\n          }\n          break;\n      }\n    };\n\n    // Selection Handler\n    const handleSelect = (opt: ComboboxOption) => {\n      setDisplayLabel(opt.label);\n      onChange?.(opt.value);\n      closeList();\n    };\n\n    return (\n      <div ref={setRefs} className={cn('nui-combobox', className)} {...props}>\n        {/* INPUT WRAPPER */}\n        <div className=\"nui-combobox__wrapper\">\n          {leftIcon && <span className=\"nui-combobox__icon -left\">{leftIcon}</span>}\n\n          <input\n            className={cn(\n              'nui-combobox__input',\n              !!leftIcon && 'nui-combobox__input--has-left',\n              !!rightIcon && 'nui-combobox__input--has-right'\n            )}\n            role=\"combobox\"\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-autocomplete=\"list\"\n            aria-activedescendant={\n              open && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined\n            }\n            placeholder={placeholder}\n            disabled={disabled}\n            value={displayLabel}\n            onFocus={openList}\n            onClick={openList}\n            onChange={(e) => {\n              setDisplayLabel(e.target.value);\n              if (!open) openList();\n              setActiveIndex(-1); // Reset highlight when typing\n            }}\n            onKeyDown={onKeyDown}\n          />\n\n          {rightIcon && <span className=\"nui-combobox__icon -right\">{rightIcon}</span>}\n        </div>\n\n        {/* DROPDOWN LISTBOX */}\n        {open && (\n          <div id={listboxId} role=\"listbox\" className=\"nui-combobox__listbox\">\n            {filtered.length === 0 ? (\n              <div className=\"nui-combobox__empty\">{emptyMessage}</div>\n            ) : (\n              filtered.map((opt, index) => {\n                const isActive = index === activeIndex;\n                const isSelected = opt.label === displayLabel; \n\n                return (\n                  <div\n                    key={opt.value}\n                    id={`${listboxId}-option-${index}`}\n                    role=\"option\"\n                    aria-selected={isSelected}\n                    className={cn(\n                      'nui-combobox__option',\n                      isActive && 'nui-combobox__option--active',\n                      isSelected && 'nui-combobox__option--selected'\n                    )}\n                    // Prevent input blur when clicking an option\n                    onMouseDown={(e) => e.preventDefault()} \n                    onClick={() => handleSelect(opt)}\n                  >\n                    {renderOptionIcon && (\n                      <span className=\"nui-combobox__option-icon\">\n                        {renderOptionIcon(opt)}\n                      </span>\n                    )}\n\n                    {renderOption ? renderOption(opt, isActive) : opt.label}\n                  </div>\n                );\n              })\n            )}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nCombobox.displayName = 'Combobox';"],"names":["Combobox","forwardRef","options","value","defaultValue","onChange","placeholder","disabled","className","emptyMessage","filter","leftIcon","rightIcon","renderOption","renderOptionIcon","props","ref","isControlled","listboxId","useId","displayLabel","setDisplayLabel","useState","o","open","setOpen","activeIndex","setActiveIndex","wrapperRef","useRef","setRefs","useCallback","node","filtered","opt","openList","closeList","revertLabel","currentValue","match","useEffect","handleClickOutside","event","found","onKeyDown","i","handleSelect","jsxs","cn","jsx","index","isActive","isSelected","e"],"mappings":"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"}

package/dist/components/commandpalette/CommandPalette.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),c=require("react");;/* empty css                     */const w=require("../../utils/onclickoutside/onClickOutside.cjs"),E=require("../../utils/portal/portal.cjs");function g({sections:y,placeholder:j="Search commands…",className:N=""}){const[r,a]=c.useState(!1),[m,f]=c.useState(""),[o,v]=c.useState({section:0,index:0}),p=c.useRef(null),h=c.useRef(null);c.useEffect(()=>{const e=t=>{(navigator.platform.toLowerCase().includes("mac")?t.metaKey:t.ctrlKey)&&t.key.toLowerCase()==="k"&&(t.preventDefault(),a(u=>!u))};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[]),c.useEffect(()=>{if(!r)return;const e=t=>{t.key==="Escape"&&a(!1)};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[r]),c.useEffect(()=>{if(r)return w.onClickOutside(p,()=>a(!1))},[r]),c.useEffect(()=>{r&&(setTimeout(()=>h.current?.focus(),0),f(""))},[r]);const d=y.map(e=>({...e,items:e.items.filter(t=>t.label.toLowerCase().includes(m.toLowerCase()))})),l=d.flatMap((e,t)=>e.items.map((n,i)=>({section:t,index:i}))),x=e=>{if(l.length===0)return;let n=l.findIndex(i=>i.section===o.section&&i.index===o.index)+e;n<0&&(n=l.length-1),n>=l.length&&(n=0),v(l[n])},k=e=>{const t=e.key;if(t==="ArrowDown")e.preventDefault(),x(1);else if(t==="ArrowUp")e.preventDefault(),x(-1);else if(t==="Enter"){e.preventDefault();const i=d[o.section]?.items[o.index];i&&i.onSelect&&(i.onSelect(),a(!1))}};return r?s.jsxs(E.Portal,{children:[s.jsx("div",{className:"ui-cmd-overlay"}),s.jsxs("div",{ref:p,className:`ui-cmd ${N}`,role:"dialog","aria-modal":"true",onKeyDown:k,children:[s.jsx("input",{ref:h,className:"ui-cmd-input",placeholder:j,value:m,onChange:e=>f(e.target.value)}),s.jsx("div",{className:"ui-cmd-list",children:d.map((e,t)=>s.jsxs("div",{className:"ui-cmd-section",children:[e.title&&s.jsx("div",{className:"ui-cmd-section-title",children:e.title}),e.items.length===0?s.jsx("div",{className:"ui-cmd-empty",children:"No results"}):e.items.map((n,i)=>{const u=o.section===t&&o.index===i;return s.jsxs("div",{className:`ui-cmd-item ${u?"active":""}`,onMouseEnter:()=>v({section:t,index:i}),onClick:()=>{n.onSelect?.(),a(!1)},children:[n.icon&&s.jsx("span",{className:"ui-cmd-icon",children:n.icon}),s.jsxs("div",{className:"ui-cmd-meta",children:[s.jsx("div",{className:"ui-cmd-label",children:n.label}),n.description&&s.jsx("div",{className:"ui-cmd-description",children:n.description})]}),n.shortcut&&s.jsx("span",{className:"ui-cmd-shortcut",children:n.shortcut})]},n.id)})]},t))})]})]}):null}exports.CommandPalette=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("react");;/* empty css                     */const q=require("../../utils/onclickoutside/onClickOutside.cjs"),D=require("../../utils/portal/portal.cjs"),N=require("../../utils/cn/cn.cjs");function M({sections:w,placeholder:C="Search commands…",className:E,open:u,onOpenChange:p}){const[g,L]=i.useState(!1),r=u!==void 0?u:g,o=i.useCallback(e=>{u===void 0&&L(e),p?.(e)},[u,p]),[l,h]=i.useState(""),[a,m]=i.useState({section:0,index:0}),j=i.useRef(null),y=i.useRef(null),v=i.useRef(null),f=w.map(e=>({...e,items:e.items.filter(n=>n.label.toLowerCase().includes(l.toLowerCase())||n.description?.toLowerCase().includes(l.toLowerCase()))})).filter(e=>e.items.length>0),d=f.flatMap((e,n)=>e.items.map((s,c)=>({section:n,index:c})));i.useEffect(()=>{const e=n=>{(navigator.platform.toLowerCase().includes("mac")?n.metaKey:n.ctrlKey)&&n.key.toLowerCase()==="k"&&(n.preventDefault(),o(!r))};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[r,o]),i.useEffect(()=>{if(!r)return;const e=n=>{n.key==="Escape"&&o(!1)};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[r,o]),i.useEffect(()=>{if(r)return q.onClickOutside(j,()=>o(!1))},[r,o]),i.useEffect(()=>{r&&(h(""),m({section:0,index:0}),setTimeout(()=>y.current?.focus(),10))},[r]),i.useEffect(()=>{r&&v.current&&v.current.scrollIntoView({block:"nearest"})},[a,r,l]),i.useEffect(()=>{m({section:0,index:0})},[l]);const k=e=>{if(d.length===0)return;let s=d.findIndex(c=>c.section===a.section&&c.index===a.index)+e;s<0&&(s=d.length-1),s>=d.length&&(s=0),m(d[s])},S=e=>{const n=e.key;if(n==="ArrowDown")e.preventDefault(),k(1);else if(n==="ArrowUp")e.preventDefault(),k(-1);else if(n==="Enter"){e.preventDefault();const c=f[a.section]?.items[a.index];c&&c.onSelect&&(c.onSelect(),o(!1))}};return r?t.jsxs(D.Portal,{children:[t.jsx("div",{className:"nui-cmd-overlay"}),t.jsxs("div",{ref:j,className:N.cn("nui-cmd",E),role:"dialog","aria-modal":"true",onKeyDown:S,children:[t.jsxs("div",{className:"nui-cmd-header",children:[t.jsxs("svg",{className:"nui-cmd-search-icon",width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:[t.jsx("circle",{cx:"11",cy:"11",r:"8"}),t.jsx("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]}),t.jsx("input",{ref:y,className:"nui-cmd-input",placeholder:C,value:l,onChange:e=>h(e.target.value)}),l&&t.jsx("button",{className:"nui-cmd-clear",onClick:()=>h(""),children:"ESC"})]}),t.jsx("div",{className:"nui-cmd-list",role:"listbox",children:f.length===0?t.jsx("div",{className:"nui-cmd-empty",children:t.jsxs("span",{className:"nui-cmd-empty-text",children:['No results found for "',l,'"']})}):f.map((e,n)=>t.jsxs("div",{className:"nui-cmd-section",children:[e.title&&t.jsx("div",{className:"nui-cmd-section-title",children:e.title}),t.jsx("div",{className:"nui-cmd-section-items",children:e.items.map((s,c)=>{const x=a.section===n&&a.index===c;return t.jsxs("div",{ref:x?v:null,role:"option","aria-selected":x,className:N.cn("nui-cmd-item",x&&"active"),onMouseEnter:()=>m({section:n,index:c}),onClick:()=>{s.onSelect?.(),o(!1)},children:[s.icon&&t.jsx("div",{className:"nui-cmd-item-icon",children:s.icon}),t.jsxs("div",{className:"nui-cmd-item-meta",children:[t.jsx("div",{className:"nui-cmd-item-label",children:s.label}),s.description&&t.jsx("div",{className:"nui-cmd-item-description",children:s.description})]}),s.shortcut&&t.jsx("div",{className:"nui-cmd-item-shortcut",children:s.shortcut.split(" ").map((b,R)=>t.jsx("kbd",{children:b},R))})]},s.id)})})]},n))})]})]}):null}exports.CommandPalette=M;
 //# sourceMappingURL=CommandPalette.cjs.map

package/dist/components/commandpalette/CommandPalette.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.cjs","sources":["../../../src/components/commandpalette/CommandPalette.tsx"],"sourcesContent":["/**\r\n * CommandPalette.tsx — FINAL VERSION\r\n * -----------------------------------\r\n * Full-featured Cmd+K command menu.\r\n * - Cmd+K / Ctrl+K global shortcut\r\n * - Search filter\r\n * - Keyboard navigation\r\n * - Portal + overlay\r\n * - Sections\r\n * - ARIA-compliant\r\n */\r\n\r\nimport {\r\n  useEffect,\r\n  useRef,\r\n  useState,\r\n  ReactNode,\r\n  KeyboardEvent as ReactKeyboardEvent,\r\n} from 'react';\r\nimport './CommandPalette.css';\r\nimport { Portal, onClickOutside} from '../../utils/index';\r\n\r\nexport interface CommandItem {\r\n  id: string;\r\n  label: string;\r\n  icon?: ReactNode;\r\n  shortcut?: string;\r\n  description?: string;\r\n  onSelect?: () => void;\r\n}\r\n\r\nexport interface CommandSection {\r\n  title?: string;\r\n  items: CommandItem[];\r\n}\r\n\r\ninterface CommandPaletteProps {\r\n  sections: CommandSection[];\r\n  placeholder?: string;\r\n  className?: string;\r\n}\r\n\r\nexport function CommandPalette({\r\n  sections,\r\n  placeholder = 'Search commands…',\r\n  className = '',\r\n}: CommandPaletteProps) {\r\n  const [open, setOpen] = useState(false);\r\n  const [query, setQuery] = useState('');\r\n  const [active, setActive] = useState<{ section: number; index: number }>({\r\n    section: 0,\r\n    index: 0,\r\n  });\r\n\r\n  const paletteRef = useRef<HTMLDivElement | null>(null);\r\n  const inputRef = useRef<HTMLInputElement | null>(null);\r\n\r\n  /** Global Cmd+K shortcut */\r\n  useEffect(() => {\r\n    const handler = (e: globalThis.KeyboardEvent) => {\r\n      const isMac = navigator.platform.toLowerCase().includes('mac');\r\n      const cmd = isMac ? e.metaKey : e.ctrlKey;\r\n\r\n      if (cmd && e.key.toLowerCase() === 'k') {\r\n        e.preventDefault();\r\n        setOpen((o) => !o);\r\n      }\r\n    };\r\n\r\n    document.addEventListener('keydown', handler as EventListener);\r\n    return () =>\r\n      document.removeEventListener('keydown', handler as EventListener);\r\n  }, []);\r\n\r\n  /** Close on ESC */\r\n  useEffect(() => {\r\n    if (!open) return;\r\n\r\n    const handler = (e: globalThis.KeyboardEvent) => {\r\n      if (e.key === 'Escape') setOpen(false);\r\n    };\r\n\r\n    document.addEventListener('keydown', handler as EventListener);\r\n    return () =>\r\n      document.removeEventListener('keydown', handler as EventListener);\r\n  }, [open]);\r\n\r\n  /** Click outside to close */\r\n  useEffect(() => {\r\n    if (!open) return;\r\n    return onClickOutside(paletteRef, () => setOpen(false));\r\n  }, [open]);\r\n\r\n  /** Autofocus search when opened */\r\n  useEffect(() => {\r\n    if (open) {\r\n      setTimeout(() => inputRef.current?.focus(), 0);\r\n      setQuery('');\r\n    }\r\n  }, [open]);\r\n\r\n  /** Filtered list */\r\n  const filteredSections = sections.map((sec) => ({\r\n    ...sec,\r\n    items: sec.items.filter((i) =>\r\n      i.label.toLowerCase().includes(query.toLowerCase())\r\n    ),\r\n  }));\r\n\r\n  /** Flatten for easier navigation */\r\n  const flatList = filteredSections.flatMap((sec, sIdx) =>\r\n    sec.items.map((_, iIdx) => ({ section: sIdx, index: iIdx }))\r\n  );\r\n\r\n  /** Handle keyboard navigation */\r\n  const move = (dir: 1 | -1) => {\r\n    if (flatList.length === 0) return;\r\n\r\n    const currentIndex = flatList.findIndex(\r\n      (x) => x.section === active.section && x.index === active.index\r\n    );\r\n\r\n    let next = currentIndex + dir;\r\n    if (next < 0) next = flatList.length - 1;\r\n    if (next >= flatList.length) next = 0;\r\n\r\n    setActive(flatList[next]);\r\n  };\r\n\r\n  const handleKey = (e: ReactKeyboardEvent<HTMLDivElement>) => {\r\n    const key = e.key;\r\n\r\n    if (key === 'ArrowDown') {\r\n      e.preventDefault();\r\n      move(1);\r\n    } else if (key === 'ArrowUp') {\r\n      e.preventDefault();\r\n      move(-1);\r\n    } else if (key === 'Enter') {\r\n      e.preventDefault();\r\n\r\n      const sec = filteredSections[active.section];\r\n      const item = sec?.items[active.index];\r\n\r\n      if (item && item.onSelect) {\r\n        item.onSelect();\r\n        setOpen(false);\r\n      }\r\n    }\r\n  };\r\n\r\n  if (!open) return null;\r\n\r\n  return (\r\n    <Portal>\r\n      <div className=\"ui-cmd-overlay\" />\r\n\r\n      <div\r\n        ref={paletteRef}\r\n        className={`ui-cmd ${className}`}\r\n        role=\"dialog\"\r\n        aria-modal=\"true\"\r\n        onKeyDown={handleKey}\r\n      >\r\n        {/* Search bar */}\r\n        <input\r\n          ref={inputRef}\r\n          className=\"ui-cmd-input\"\r\n          placeholder={placeholder}\r\n          value={query}\r\n          onChange={(e) => setQuery(e.target.value)}\r\n        />\r\n\r\n        <div className=\"ui-cmd-list\">\r\n          {filteredSections.map((sec, sIdx) => (\r\n            <div key={sIdx} className=\"ui-cmd-section\">\r\n              {sec.title && (\r\n                <div className=\"ui-cmd-section-title\">{sec.title}</div>\r\n              )}\r\n\r\n              {sec.items.length === 0 ? (\r\n                <div className=\"ui-cmd-empty\">No results</div>\r\n              ) : (\r\n                sec.items.map((item, iIdx) => {\r\n                  const isActive =\r\n                    active.section === sIdx && active.index === iIdx;\r\n\r\n                  return (\r\n                    <div\r\n                      key={item.id}\r\n                      className={`ui-cmd-item ${isActive ? 'active' : ''}`}\r\n                      onMouseEnter={() =>\r\n                        setActive({ section: sIdx, index: iIdx })\r\n                      }\r\n                      onClick={() => {\r\n                        item.onSelect?.();\r\n                        setOpen(false);\r\n                      }}\r\n                    >\r\n                      {item.icon && (\r\n                        <span className=\"ui-cmd-icon\">{item.icon}</span>\r\n                      )}\r\n\r\n                      <div className=\"ui-cmd-meta\">\r\n                        <div className=\"ui-cmd-label\">{item.label}</div>\r\n                        {item.description && (\r\n                          <div className=\"ui-cmd-description\">\r\n                            {item.description}\r\n                          </div>\r\n                        )}\r\n                      </div>\r\n\r\n                      {item.shortcut && (\r\n                        <span className=\"ui-cmd-shortcut\">{item.shortcut}</span>\r\n                      )}\r\n                    </div>\r\n                  );\r\n                })\r\n              )}\r\n            </div>\r\n          ))}\r\n        </div>\r\n      </div>\r\n    </Portal>\r\n  );\r\n}\r\n"],"names":["CommandPalette","sections","placeholder","className","open","setOpen","useState","query","setQuery","active","setActive","paletteRef","useRef","inputRef","useEffect","handler","e","o","onClickOutside","filteredSections","sec","i","flatList","sIdx","_","iIdx","move","dir","next","x","handleKey","key","item","Portal","jsx","jsxs","isActive"],"mappings":"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"}
+{"version":3,"file":"CommandPalette.cjs","sources":["../../../src/components/commandpalette/CommandPalette.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useEffect,\n  useRef,\n  useState,\n  ReactNode,\n  KeyboardEvent as ReactKeyboardEvent,\n  useCallback,\n} from 'react';\nimport { Portal, onClickOutside, cn } from '../../utils';\nimport './CommandPalette.css';\n\n/* ============================================================\n * Types\n * ============================================================ */\n\nexport interface CommandItem {\n  id: string;\n  label: string;\n  icon?: ReactNode;\n  /** Displayed as a <kbd> hint, e.g., \"⌘ K\" */\n  shortcut?: string;\n  description?: string;\n  onSelect?: () => void;\n}\n\nexport interface CommandSection {\n  title?: string;\n  items: CommandItem[];\n}\n\nexport interface CommandPaletteProps {\n  sections: CommandSection[];\n  placeholder?: string;\n  className?: string;\n  /** Forces the palette open/closed. If undefined, it operates purely via Cmd+K internally. */\n  open?: boolean; \n  onOpenChange?: (open: boolean) => void;\n}\n\n/* ============================================================\n * Component\n * ============================================================ */\n\n/**\n * CommandPalette Component\n * * A fast, composable, unstyled command menu for React.\n * Architecture Note: Manages a nested data structure (Sections > Items) but mathematically \n * flattens it for seamless O(1) keyboard navigation across section boundaries.\n */\nexport function CommandPalette({\n  sections,\n  placeholder = 'Search commands…',\n  className,\n  open: controlledOpen,\n  onOpenChange,\n}: CommandPaletteProps) {\n  const [internalOpen, setInternalOpen] = useState(false);\n  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n  const handleOpenChange = useCallback((newOpen: boolean) => {\n    if (controlledOpen === undefined) setInternalOpen(newOpen);\n    onOpenChange?.(newOpen);\n  }, [controlledOpen, onOpenChange]);\n\n  const [query, setQuery] = useState('');\n  const [active, setActive] = useState<{ section: number; index: number }>({\n    section: 0,\n    index: 0,\n  });\n\n  const paletteRef = useRef<HTMLDivElement | null>(null);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const activeItemRef = useRef<HTMLDivElement | null>(null);\n\n  /* ----------------------------------------------------\n     Filtering & Flat Mapping\n  ---------------------------------------------------- */\n  // 1. Filter items based on query (checks both label and description)\n  // 2. Filter out sections that end up completely empty\n  const filteredSections = sections\n    .map((sec) => ({\n      ...sec,\n      items: sec.items.filter(\n        (i) =>\n          i.label.toLowerCase().includes(query.toLowerCase()) ||\n          i.description?.toLowerCase().includes(query.toLowerCase())\n      ),\n    }))\n    .filter((sec) => sec.items.length > 0); \n\n  // * Navigation Engine: \n  // Creates a flat list of coordinates [{section: 0, index: 0}, {section: 0, index: 1}, {section: 1, index: 0}]\n  // This allows the ArrowUp/ArrowDown keys to easily increment/decrement a single integer \n  // and look up the exact multidimensional coordinate.\n  const flatList = filteredSections.flatMap((sec, sIdx) =>\n    sec.items.map((_, iIdx) => ({ section: sIdx, index: iIdx }))\n  );\n\n  /* ----------------------------------------------------\n     Event Listeners & Effects\n  ---------------------------------------------------- */\n  // Global Cmd+K / Ctrl+K shortcut\n  useEffect(() => {\n    const handler = (e: KeyboardEvent) => {\n      const isMac = navigator.platform.toLowerCase().includes('mac');\n      const cmd = isMac ? e.metaKey : e.ctrlKey;\n\n      if (cmd && e.key.toLowerCase() === 'k') {\n        e.preventDefault();\n        handleOpenChange(!isOpen);\n      }\n    };\n    document.addEventListener('keydown', handler);\n    return () => document.removeEventListener('keydown', handler);\n  }, [isOpen, handleOpenChange]);\n\n  // Close on ESC\n  useEffect(() => {\n    if (!isOpen) return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') handleOpenChange(false);\n    };\n    document.addEventListener('keydown', handler);\n    return () => document.removeEventListener('keydown', handler);\n  }, [isOpen, handleOpenChange]);\n\n  // Click outside to close\n  useEffect(() => {\n    if (!isOpen) return;\n    return onClickOutside(paletteRef, () => handleOpenChange(false));\n  }, [isOpen, handleOpenChange]);\n\n  // Reset state and autofocus when opened\n  useEffect(() => {\n    if (isOpen) {\n      setQuery('');\n      setActive({ section: 0, index: 0 });\n      // Small timeout ensures the React Portal has mounted the DOM node before focusing\n      setTimeout(() => inputRef.current?.focus(), 10);\n    }\n  }, [isOpen]);\n\n  // Auto-scroll active item into view\n  useEffect(() => {\n    if (isOpen && activeItemRef.current) {\n      activeItemRef.current.scrollIntoView({ block: 'nearest' });\n    }\n  }, [active, isOpen, query]);\n\n  // Reset active index when user types (so it jumps back to top)\n  useEffect(() => {\n    setActive({ section: 0, index: 0 });\n  }, [query]);\n\n  /* ----------------------------------------------------\n     Keyboard Navigation\n  ---------------------------------------------------- */\n  const move = (dir: 1 | -1) => {\n    if (flatList.length === 0) return;\n\n    const currentIndex = flatList.findIndex(\n      (x) => x.section === active.section && x.index === active.index\n    );\n\n    let next = currentIndex + dir;\n    // Wrap around logic\n    if (next < 0) next = flatList.length - 1;\n    if (next >= flatList.length) next = 0;\n\n    setActive(flatList[next]);\n  };\n\n  const handleKey = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    const key = e.key;\n\n    if (key === 'ArrowDown') {\n      e.preventDefault();\n      move(1);\n    } else if (key === 'ArrowUp') {\n      e.preventDefault();\n      move(-1);\n    } else if (key === 'Enter') {\n      e.preventDefault();\n      const sec = filteredSections[active.section];\n      const item = sec?.items[active.index];\n\n      if (item && item.onSelect) {\n        item.onSelect();\n        handleOpenChange(false);\n      }\n    }\n  };\n\n  /* ----------------------------------------------------\n     Render\n  ---------------------------------------------------- */\n  if (!isOpen) return null;\n\n  return (\n    <Portal>\n      <div className=\"nui-cmd-overlay\" />\n\n      <div\n        ref={paletteRef}\n        className={cn(\"nui-cmd\", className)}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        onKeyDown={handleKey}\n      >\n        {/* Search Header */}\n        <div className=\"nui-cmd-header\">\n          <svg className=\"nui-cmd-search-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n            <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n          </svg>\n          <input\n            ref={inputRef}\n            className=\"nui-cmd-input\"\n            placeholder={placeholder}\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n          />\n          {query && (\n            <button className=\"nui-cmd-clear\" onClick={() => setQuery('')}>\n              ESC\n            </button>\n          )}\n        </div>\n\n        {/* Results List */}\n        <div className=\"nui-cmd-list\" role=\"listbox\">\n          {filteredSections.length === 0 ? (\n            <div className=\"nui-cmd-empty\">\n              <span className=\"nui-cmd-empty-text\">No results found for \"{query}\"</span>\n            </div>\n          ) : (\n            filteredSections.map((sec, sIdx) => (\n              <div key={sIdx} className=\"nui-cmd-section\">\n                {sec.title && (\n                  <div className=\"nui-cmd-section-title\">{sec.title}</div>\n                )}\n\n                <div className=\"nui-cmd-section-items\">\n                  {sec.items.map((item, iIdx) => {\n                    const isActive = active.section === sIdx && active.index === iIdx;\n\n                    return (\n                      <div\n                        key={item.id}\n                        ref={isActive ? activeItemRef : null}\n                        role=\"option\"\n                        aria-selected={isActive}\n                        className={cn(\"nui-cmd-item\", isActive && \"active\")}\n                        onMouseEnter={() => setActive({ section: sIdx, index: iIdx })}\n                        onClick={() => {\n                          item.onSelect?.();\n                          handleOpenChange(false);\n                        }}\n                      >\n                        {item.icon && (\n                          <div className=\"nui-cmd-item-icon\">{item.icon}</div>\n                        )}\n\n                        <div className=\"nui-cmd-item-meta\">\n                          <div className=\"nui-cmd-item-label\">{item.label}</div>\n                          {item.description && (\n                            <div className=\"nui-cmd-item-description\">\n                              {item.description}\n                            </div>\n                          )}\n                        </div>\n\n                        {item.shortcut && (\n                          <div className=\"nui-cmd-item-shortcut\">\n                            {item.shortcut.split(' ').map((key, k) => (\n                              <kbd key={k}>{key}</kbd>\n                            ))}\n                          </div>\n                        )}\n                      </div>\n                    );\n                  })}\n                </div>\n              </div>\n            ))\n          )}\n        </div>\n      </div>\n    </Portal>\n  );\n}"],"names":["CommandPalette","sections","placeholder","className","controlledOpen","onOpenChange","internalOpen","setInternalOpen","useState","isOpen","handleOpenChange","useCallback","newOpen","query","setQuery","active","setActive","paletteRef","useRef","inputRef","activeItemRef","filteredSections","sec","i","flatList","sIdx","_","iIdx","useEffect","handler","e","onClickOutside","move","dir","next","x","handleKey","key","item","Portal","jsx","jsxs","cn","isActive","k"],"mappings":"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"}

package/dist/components/commandpalette/CommandPalette.js

@@ -1,111 +1,134 @@
-import { jsxs as l, jsx as c } from "react/jsx-runtime";
-import { useState as f, useRef as k, useEffect as d } from "react";
+import { jsxs as o, jsx as i } from "react/jsx-runtime";
+import { useState as k, useCallback as j, useRef as N, useEffect as d } from "react";
 /* empty css                   */
-import { onClickOutside as E } from "../../utils/onclickoutside/onClickOutside.js";
-import { Portal as D } from "../../utils/portal/portal.js";
-function R({
-  sections: x,
-  placeholder: L = "Search commands…",
-  className: g = ""
+import { onClickOutside as I } from "../../utils/onclickoutside/onClickOutside.js";
+import { Portal as P } from "../../utils/portal/portal.js";
+import { cn as g } from "../../utils/cn/cn.js";
+function W({
+  sections: E,
+  placeholder: b = "Search commands…",
+  className: S,
+  open: u,
+  onOpenChange: x
 }) {
-  const [s, r] = f(!1), [p, v] = f(""), [o, h] = f({
+  const [D, A] = k(!1), s = u !== void 0 ? u : D, r = j((e) => {
+    u === void 0 && A(e), x?.(e);
+  }, [u, x]), [l, v] = k(""), [a, f] = k({
     section: 0,
     index: 0
-  }), y = k(null), N = k(null);
+  }), w = N(null), C = N(null), p = N(null), h = E.map((e) => ({
+    ...e,
+    items: e.items.filter(
+      (n) => n.label.toLowerCase().includes(l.toLowerCase()) || n.description?.toLowerCase().includes(l.toLowerCase())
+    )
+  })).filter((e) => e.items.length > 0), m = h.flatMap(
+    (e, n) => e.items.map((t, c) => ({ section: n, index: c }))
+  );
   d(() => {
-    const e = (t) => {
-      (navigator.platform.toLowerCase().includes("mac") ? t.metaKey : t.ctrlKey) && t.key.toLowerCase() === "k" && (t.preventDefault(), r((u) => !u));
+    const e = (n) => {
+      (navigator.platform.toLowerCase().includes("mac") ? n.metaKey : n.ctrlKey) && n.key.toLowerCase() === "k" && (n.preventDefault(), r(!s));
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, []), d(() => {
+  }, [s, r]), d(() => {
     if (!s) return;
-    const e = (t) => {
-      t.key === "Escape" && r(!1);
+    const e = (n) => {
+      n.key === "Escape" && r(!1);
     };
     return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
-  }, [s]), d(() => {
+  }, [s, r]), d(() => {
     if (s)
-      return E(y, () => r(!1));
+      return I(w, () => r(!1));
+  }, [s, r]), d(() => {
+    s && (v(""), f({ section: 0, index: 0 }), setTimeout(() => C.current?.focus(), 10));
   }, [s]), d(() => {
-    s && (setTimeout(() => N.current?.focus(), 0), v(""));
-  }, [s]);
-  const m = x.map((e) => ({
-    ...e,
-    items: e.items.filter(
-      (t) => t.label.toLowerCase().includes(p.toLowerCase())
-    )
-  })), a = m.flatMap(
-    (e, t) => e.items.map((n, i) => ({ section: t, index: i }))
-  ), w = (e) => {
-    if (a.length === 0) return;
-    let n = a.findIndex(
-      (i) => i.section === o.section && i.index === o.index
+    s && p.current && p.current.scrollIntoView({ block: "nearest" });
+  }, [a, s, l]), d(() => {
+    f({ section: 0, index: 0 });
+  }, [l]);
+  const L = (e) => {
+    if (m.length === 0) return;
+    let t = m.findIndex(
+      (c) => c.section === a.section && c.index === a.index
     ) + e;
-    n < 0 && (n = a.length - 1), n >= a.length && (n = 0), h(a[n]);
-  }, C = (e) => {
-    const t = e.key;
-    if (t === "ArrowDown")
-      e.preventDefault(), w(1);
-    else if (t === "ArrowUp")
-      e.preventDefault(), w(-1);
-    else if (t === "Enter") {
+    t < 0 && (t = m.length - 1), t >= m.length && (t = 0), f(m[t]);
+  }, K = (e) => {
+    const n = e.key;
+    if (n === "ArrowDown")
+      e.preventDefault(), L(1);
+    else if (n === "ArrowUp")
+      e.preventDefault(), L(-1);
+    else if (n === "Enter") {
       e.preventDefault();
-      const i = m[o.section]?.items[o.index];
-      i && i.onSelect && (i.onSelect(), r(!1));
+      const c = h[a.section]?.items[a.index];
+      c && c.onSelect && (c.onSelect(), r(!1));
     }
   };
-  return s ? /* @__PURE__ */ l(D, { children: [
-    /* @__PURE__ */ c("div", { className: "ui-cmd-overlay" }),
-    /* @__PURE__ */ l(
+  return s ? /* @__PURE__ */ o(P, { children: [
+    /* @__PURE__ */ i("div", { className: "nui-cmd-overlay" }),
+    /* @__PURE__ */ o(
       "div",
       {
-        ref: y,
-        className: `ui-cmd ${g}`,
+        ref: w,
+        className: g("nui-cmd", S),
         role: "dialog",
         "aria-modal": "true",
-        onKeyDown: C,
+        onKeyDown: K,
         children: [
-          /* @__PURE__ */ c(
-            "input",
-            {
-              ref: N,
-              className: "ui-cmd-input",
-              placeholder: L,
-              value: p,
-              onChange: (e) => v(e.target.value)
-            }
-          ),
-          /* @__PURE__ */ c("div", { className: "ui-cmd-list", children: m.map((e, t) => /* @__PURE__ */ l("div", { className: "ui-cmd-section", children: [
-            e.title && /* @__PURE__ */ c("div", { className: "ui-cmd-section-title", children: e.title }),
-            e.items.length === 0 ? /* @__PURE__ */ c("div", { className: "ui-cmd-empty", children: "No results" }) : e.items.map((n, i) => {
-              const u = o.section === t && o.index === i;
-              return /* @__PURE__ */ l(
+          /* @__PURE__ */ o("div", { className: "nui-cmd-header", children: [
+            /* @__PURE__ */ o("svg", { className: "nui-cmd-search-icon", width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+              /* @__PURE__ */ i("circle", { cx: "11", cy: "11", r: "8" }),
+              /* @__PURE__ */ i("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+            ] }),
+            /* @__PURE__ */ i(
+              "input",
+              {
+                ref: C,
+                className: "nui-cmd-input",
+                placeholder: b,
+                value: l,
+                onChange: (e) => v(e.target.value)
+              }
+            ),
+            l && /* @__PURE__ */ i("button", { className: "nui-cmd-clear", onClick: () => v(""), children: "ESC" })
+          ] }),
+          /* @__PURE__ */ i("div", { className: "nui-cmd-list", role: "listbox", children: h.length === 0 ? /* @__PURE__ */ i("div", { className: "nui-cmd-empty", children: /* @__PURE__ */ o("span", { className: "nui-cmd-empty-text", children: [
+            'No results found for "',
+            l,
+            '"'
+          ] }) }) : h.map((e, n) => /* @__PURE__ */ o("div", { className: "nui-cmd-section", children: [
+            e.title && /* @__PURE__ */ i("div", { className: "nui-cmd-section-title", children: e.title }),
+            /* @__PURE__ */ i("div", { className: "nui-cmd-section-items", children: e.items.map((t, c) => {
+              const y = a.section === n && a.index === c;
+              return /* @__PURE__ */ o(
                 "div",
                 {
-                  className: `ui-cmd-item ${u ? "active" : ""}`,
-                  onMouseEnter: () => h({ section: t, index: i }),
+                  ref: y ? p : null,
+                  role: "option",
+                  "aria-selected": y,
+                  className: g("nui-cmd-item", y && "active"),
+                  onMouseEnter: () => f({ section: n, index: c }),
                   onClick: () => {
-                    n.onSelect?.(), r(!1);
+                    t.onSelect?.(), r(!1);
                   },
                   children: [
-                    n.icon && /* @__PURE__ */ c("span", { className: "ui-cmd-icon", children: n.icon }),
-                    /* @__PURE__ */ l("div", { className: "ui-cmd-meta", children: [
-                      /* @__PURE__ */ c("div", { className: "ui-cmd-label", children: n.label }),
-                      n.description && /* @__PURE__ */ c("div", { className: "ui-cmd-description", children: n.description })
+                    t.icon && /* @__PURE__ */ i("div", { className: "nui-cmd-item-icon", children: t.icon }),
+                    /* @__PURE__ */ o("div", { className: "nui-cmd-item-meta", children: [
+                      /* @__PURE__ */ i("div", { className: "nui-cmd-item-label", children: t.label }),
+                      t.description && /* @__PURE__ */ i("div", { className: "nui-cmd-item-description", children: t.description })
                     ] }),
-                    n.shortcut && /* @__PURE__ */ c("span", { className: "ui-cmd-shortcut", children: n.shortcut })
+                    t.shortcut && /* @__PURE__ */ i("div", { className: "nui-cmd-item-shortcut", children: t.shortcut.split(" ").map((M, R) => /* @__PURE__ */ i("kbd", { children: M }, R)) })
                   ]
                 },
-                n.id
+                t.id
               );
-            })
-          ] }, t)) })
+            }) })
+          ] }, n)) })
         ]
       }
     )
   ] }) : null;
 }
 export {
-  R as CommandPalette
+  W as CommandPalette
 };
 //# sourceMappingURL=CommandPalette.js.map