@orion-ds/react 4.2.14 → 4.3.7

package/dist/components/Combobox/Combobox.mjs

@@ -0,0 +1,271 @@
+import { jsx as s, jsxs as v, Fragment as fe } from "react/jsx-runtime";
+import { forwardRef as me, useId as he, useRef as M, useState as R, useMemo as Y, useEffect as z, useCallback as h } from "react";
+import { createPortal as pe } from "react-dom";
+import { Loader2 as be, X as we, ChevronDown as ve, Check as ge } from "lucide-react";
+import t from "./Combobox.module.css.mjs";
+const Ne = (d, l) => {
+  const o = l.toLowerCase().trim();
+  return o ? d.label.toLowerCase().includes(o) || d.value.toLowerCase().includes(o) || (d.description?.toLowerCase().includes(o) ?? !1) : !0;
+}, xe = me(
+  ({
+    options: d,
+    value: l,
+    onChange: o,
+    onInputChange: T,
+    size: B = "md",
+    label: I,
+    helperText: V,
+    error: k,
+    loading: G = !1,
+    clearable: J = !0,
+    allowFreeInput: u = !1,
+    filterFn: A = Ne,
+    openOnFocus: H = !0,
+    minChars: C = 0,
+    emptyText: Q = "No results found",
+    renderOption: W,
+    maxHeight: Z = 300,
+    fullWidth: _ = !1,
+    placeholder: X,
+    disabled: g,
+    className: F,
+    id: ee,
+    onFocus: q,
+    onBlur: K,
+    onKeyDown: U,
+    ...te
+  }, L) => {
+    const ne = he(), O = ee || ne, P = `${O}-listbox`, N = M(null), y = M(null), p = M(null), [i, f] = R(!1), [E, a] = R(""), [c, x] = R(-1), [S, se] = R({
+      top: 0,
+      left: 0,
+      width: 0
+    }), r = Y(
+      () => d.find((e) => e.value === l) ?? null,
+      [d, l]
+    );
+    z(() => {
+      r ? a(r.label) : u || a("");
+    }, [r, u]);
+    const b = Y(() => E.length < C ? [] : d.filter((e) => A(e, E)), [d, E, C, A]), w = h(() => {
+      if (!N.current) return;
+      const e = N.current.getBoundingClientRect();
+      se({
+        top: e.bottom + window.scrollY + 4,
+        left: e.left + window.scrollX,
+        width: e.width
+      });
+    }, []);
+    z(() => {
+      if (i)
+        return w(), window.addEventListener("resize", w), window.addEventListener("scroll", w, !0), () => {
+          window.removeEventListener("resize", w), window.removeEventListener("scroll", w, !0);
+        };
+    }, [i, w]), z(() => {
+      if (!i) return;
+      const e = (n) => {
+        const m = n.target;
+        N.current && !N.current.contains(m) && p.current && !p.current.contains(m) && (f(!1), !u && !l ? a("") : r && a(r.label));
+      };
+      return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+    }, [i, u, l, r]);
+    const re = h(
+      (e) => {
+        const n = e.target.value;
+        a(n), x(-1), T?.(n), !i && n.length >= C && f(!0), r && n !== r.label && !u && o?.(null, null);
+      },
+      [
+        i,
+        C,
+        T,
+        r,
+        u,
+        o
+      ]
+    ), ie = h(
+      (e) => {
+        H && !g && f(!0), q?.(e);
+      },
+      [H, g, q]
+    ), le = h(
+      (e) => {
+        setTimeout(() => {
+          p.current?.contains(document.activeElement) || (f(!1), !u && !l ? a("") : r && a(r.label));
+        }, 200), K?.(e);
+      },
+      [u, l, r, K]
+    ), j = h(
+      (e) => {
+        e.disabled || (o?.(e.value, e), a(e.label), f(!1), x(-1), y.current?.focus());
+      },
+      [o]
+    ), oe = h(
+      (e) => {
+        e.stopPropagation(), o?.(null, null), a(""), y.current?.focus();
+      },
+      [o]
+    ), ae = h(
+      (e) => {
+        switch (e.key) {
+          case "ArrowDown":
+            e.preventDefault(), i ? x(
+              (n) => Math.min(n + 1, b.length - 1)
+            ) : f(!0);
+            break;
+          case "ArrowUp":
+            e.preventDefault(), x((n) => Math.max(n - 1, 0));
+            break;
+          case "Enter":
+            e.preventDefault(), i && c >= 0 && b[c] && j(b[c]);
+            break;
+          case "Escape":
+            e.preventDefault(), f(!1), a(r ? r.label : "");
+            break;
+          case "Tab":
+            f(!1);
+            break;
+        }
+        U?.(e);
+      },
+      [
+        i,
+        c,
+        b,
+        j,
+        r,
+        U
+      ]
+    );
+    z(() => {
+      c >= 0 && p.current && p.current.querySelectorAll('[role="option"]')[c]?.scrollIntoView({ block: "nearest" });
+    }, [c]);
+    const ce = [
+      t.container,
+      t[B],
+      _ && t.fullWidth,
+      g && t.disabled,
+      k && t.error,
+      F
+    ].filter(Boolean).join(" "), D = B === "sm" ? 14 : B === "lg" ? 20 : 16, de = (e, n) => {
+      const m = e.value === l, $ = n === c;
+      return W ? W(e, m, $) : /* @__PURE__ */ v(fe, { children: [
+        e.icon && /* @__PURE__ */ s("span", { className: t.optionIcon, "aria-hidden": "true", children: e.icon }),
+        /* @__PURE__ */ v("div", { className: t.optionContent, children: [
+          /* @__PURE__ */ s("span", { className: t.optionLabel, children: e.label }),
+          e.description && /* @__PURE__ */ s("span", { className: t.optionDescription, children: e.description })
+        ] }),
+        m && /* @__PURE__ */ s(
+          ge,
+          {
+            size: D,
+            className: t.checkIcon,
+            "aria-hidden": "true"
+          }
+        )
+      ] });
+    }, ue = /* @__PURE__ */ s(
+      "div",
+      {
+        ref: p,
+        className: `${t.dropdown} ${i && t.visible}`,
+        style: {
+          top: S.top,
+          left: S.left,
+          width: S.width,
+          maxHeight: Z
+        },
+        role: "listbox",
+        id: P,
+        "aria-label": I || X,
+        children: G ? /* @__PURE__ */ v("div", { className: t.loading, children: [
+          /* @__PURE__ */ s(be, { size: D, className: t.spinner }),
+          /* @__PURE__ */ s("span", { children: "Loading..." })
+        ] }) : b.length === 0 ? /* @__PURE__ */ s("div", { className: t.empty, children: Q }) : b.map((e, n) => {
+          const m = n === c, $ = e.value === l;
+          return /* @__PURE__ */ s(
+            "div",
+            {
+              className: [
+                t.option,
+                m && t.highlighted,
+                $ && t.selected,
+                e.disabled && t.disabled
+              ].filter(Boolean).join(" "),
+              role: "option",
+              "aria-selected": $,
+              "aria-disabled": e.disabled,
+              onClick: () => j(e),
+              onMouseEnter: () => x(n),
+              children: de(e, n)
+            },
+            e.value
+          );
+        })
+      }
+    );
+    return /* @__PURE__ */ v("div", { className: ce, children: [
+      I && /* @__PURE__ */ s("label", { htmlFor: O, className: t.label, children: I }),
+      /* @__PURE__ */ v(
+        "div",
+        {
+          ref: N,
+          className: t.inputWrapper,
+          onClick: () => y.current?.focus(),
+          children: [
+            /* @__PURE__ */ s(
+              "input",
+              {
+                ...te,
+                ref: (e) => {
+                  typeof L == "function" ? L(e) : L && (L.current = e), y.current = e;
+                },
+                id: O,
+                type: "text",
+                className: t.input,
+                value: E,
+                onChange: re,
+                onFocus: ie,
+                onBlur: le,
+                onKeyDown: ae,
+                disabled: g,
+                placeholder: X,
+                role: "combobox",
+                "aria-expanded": i,
+                "aria-haspopup": "listbox",
+                "aria-controls": P,
+                "aria-autocomplete": "list",
+                "aria-activedescendant": c >= 0 ? `${P}-option-${c}` : void 0
+              }
+            ),
+            /* @__PURE__ */ v("div", { className: t.actions, children: [
+              J && l && !g && /* @__PURE__ */ s(
+                "button",
+                {
+                  type: "button",
+                  className: t.clearButton,
+                  onClick: oe,
+                  "aria-label": "Clear selection",
+                  tabIndex: -1,
+                  children: /* @__PURE__ */ s(we, { size: D })
+                }
+              ),
+              /* @__PURE__ */ s(
+                "span",
+                {
+                  className: `${t.chevron} ${i ? t.open : ""}`,
+                  "aria-hidden": "true",
+                  children: /* @__PURE__ */ s(ve, { size: D })
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      (V || k) && /* @__PURE__ */ s("span", { className: k ? t.errorText : t.helperText, children: k || V }),
+      i && pe(ue, document.body)
+    ] });
+  }
+);
+xe.displayName = "Combobox";
+export {
+  xe as Combobox
+};

package/dist/components/Command/Command.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("react"),H=require("react-dom"),K=require("lucide-react"),r=require("./Command.module.css.cjs"),U=require("../Divider/Divider.cjs"),B=s.createContext(null);function S(){const e=s.useContext(B);if(!e)throw new Error("Command compound components must be used within <Command>");return e}const $=(e,t)=>t?e.toLowerCase().includes(t.toLowerCase())?1:0:1,d=({value:e,onValueChange:t,filter:n=$,children:i,className:c,...l})=>{const[C,b]=s.useState(""),[v,p]=s.useState(0),y=s.useRef(new Map),[,j]=s.useState(0),x=s.useId(),m=e!==void 0?e:C,I=s.useCallback(o=>{e!==void 0?t?.(o):b(o),p(0)},[e,t]),N=s.useCallback((o,u)=>{y.current.set(o,u),j(f=>f+1)},[]),w=s.useCallback(o=>{y.current.delete(o),j(u=>u+1)},[]),g=s.useCallback(()=>{const o=[];for(const[u,f]of y.current)n(f,m)>0&&o.push(u);return o},[n,m]),h=s.useMemo(()=>({search:m,setSearch:I,filter:n,activeIndex:v,setActiveIndex:p,registerItem:N,unregisterItem:w,items:y.current,getVisibleItems:g,listId:x}),[m,I,n,v,p,N,w,g,x]),k=s.useRef(null),E=s.useCallback(o=>{const u=g();if(u.length){if(o.key==="ArrowDown")o.preventDefault(),p(f=>(f+1)%u.length);else if(o.key==="ArrowUp")o.preventDefault(),p(f=>(f-1+u.length)%u.length);else if(o.key==="Enter"){o.preventDefault();const f=u[v];f&&k.current?.querySelector(`[data-command-id="${f}"]`)?.click()}}},[g,v,p]),T=[r.default.command,c].filter(Boolean).join(" ");return a.jsx(B.Provider,{value:h,children:a.jsx("div",{ref:k,className:T,onKeyDown:E,...l,children:i})})},R=({className:e,...t})=>{const{search:n,setSearch:i,listId:c}=S(),l=s.useRef(null);s.useEffect(()=>{l.current?.focus()},[]);const C=[r.default.inputWrapper,e].filter(Boolean).join(" ");return a.jsxs("div",{className:C,children:[a.jsx(K.Search,{size:16,className:r.default.searchIcon,"aria-hidden":"true"}),a.jsx("input",{ref:l,className:r.default.input,value:n,onChange:b=>i(b.target.value),type:"text",role:"combobox","aria-expanded":"true","aria-autocomplete":"list","aria-controls":c,...t})]})};R.displayName="Command.Input";const q=({children:e,className:t,...n})=>{const{listId:i}=S(),c=[r.default.list,t].filter(Boolean).join(" ");return a.jsx("div",{id:i,className:c,role:"listbox",...n,children:e})};q.displayName="Command.List";const L=({children:e,className:t})=>{const{getVisibleItems:n}=S();if(n().length>0)return null;const c=[r.default.empty,t].filter(Boolean).join(" ");return a.jsx("div",{className:c,role:"status","aria-live":"polite",children:e})};L.displayName="Command.Empty";const A=({heading:e,children:t,className:n})=>{const i=[r.default.group,n].filter(Boolean).join(" ");return a.jsxs("div",{className:i,role:"group","aria-label":e,children:[e&&a.jsx("div",{className:r.default.groupHeading,children:e}),t]})};A.displayName="Command.Group";let z=0;const V=({onSelect:e,disabled:t=!1,value:n,children:i,className:c,...l})=>{const{filter:C,search:b,activeIndex:v,getVisibleItems:p,registerItem:y,unregisterItem:j}=S(),x=s.useRef("");x.current||(x.current=`cmd-item-${++z}`);const m=x.current,I=n||D(i);s.useEffect(()=>(y(m,I),()=>j(m)),[m,I,y,j]);const N=C(I,b)>0,h=p().indexOf(m)===v,k=()=>{t||e?.()},E=[r.default.item,t&&r.default.itemDisabled,!N&&r.default.itemHidden,c].filter(Boolean).join(" ");return a.jsx("div",{className:E,"data-command-id":m,"data-active":h,role:"option","aria-selected":h,"aria-disabled":t,onClick:k,...l,children:i})};V.displayName="Command.Item";const G=({className:e})=>{const t=[r.default.separator,e].filter(Boolean).join(" ");return a.jsx(U.Divider,{spacing:"none",className:t})};G.displayName="Command.Separator";const M=({children:e,className:t})=>{const n=[r.default.shortcut,t].filter(Boolean).join(" ");return a.jsx("span",{className:n,children:e})};M.displayName="Command.Shortcut";const P=({open:e,onOpenChange:t,children:n,className:i})=>{if(s.useEffect(()=>{if(!e)return;const l=C=>{C.key==="Escape"&&t(!1)};return document.addEventListener("keydown",l),()=>document.removeEventListener("keydown",l)},[e,t]),s.useEffect(()=>(e?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[e]),!e)return null;const c=l=>{l.target===l.currentTarget&&t(!1)};return H.createPortal(a.jsx("div",{className:r.default.dialogBackdrop,onClick:c,children:a.jsx("div",{className:[r.default.dialogContent,i].filter(Boolean).join(" "),children:a.jsx(d,{children:n})})}),document.body)};P.displayName="Command.Dialog";d.Input=R;d.List=q;d.Empty=L;d.Group=A;d.Item=V;d.Separator=G;d.Shortcut=M;d.Dialog=P;d.displayName="Command";function D(e){return typeof e=="string"?e:typeof e=="number"?String(e):Array.isArray(e)?e.map(D).join(" "):s.isValidElement(e)&&e.props?D(e.props.children):""}exports.Command=d;

package/dist/components/Command/Command.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Command.d.ts","sourceRoot":"","sources":["../../../src/components/Command/Command.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KASN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EACV,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AAwCzB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,GAAG;IAC7C,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IACnC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IACjC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IACnC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IACnC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IACjC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC3C,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC;IACzC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;CAoHtC,CAAC"}
+{"version":3,"file":"Command.d.ts","sourceRoot":"","sources":["../../../src/components/Command/Command.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KASN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EACV,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AAwCzB,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAAC,GAAG;IAC7C,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IACnC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IACjC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IACnC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC;IACnC,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC;IACjC,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAAC,CAAC;IAC3C,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAAC,CAAC;IACzC,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAAC,CAAC;CAoHtC,CAAC"}

package/dist/components/Command/Command.mjs

@@ -0,0 +1,248 @@
+import { jsx as a, jsxs as R } from "react/jsx-runtime";
+import z, { useState as L, useRef as S, useId as F, useCallback as b, useMemo as W, createContext as J, useEffect as j, useContext as Q } from "react";
+import { createPortal as X } from "react-dom";
+import { Search as Y } from "lucide-react";
+import s from "./Command.module.css.mjs";
+import { Divider as Z } from "../Divider/Divider.mjs";
+const V = J(null);
+function B() {
+  const e = Q(V);
+  if (!e)
+    throw new Error(
+      "Command compound components must be used within <Command>"
+    );
+  return e;
+}
+const _ = (e, t) => t ? e.toLowerCase().includes(t.toLowerCase()) ? 1 : 0 : 1, u = ({
+  value: e,
+  onValueChange: t,
+  filter: o = _,
+  children: r,
+  className: c,
+  ...i
+}) => {
+  const [f, g] = L(""), [y, p] = L(0), C = S(/* @__PURE__ */ new Map()), [, x] = L(0), v = F(), m = e !== void 0 ? e : f, I = b(
+    (n) => {
+      e !== void 0 ? t?.(n) : g(n), p(0);
+    },
+    [e, t]
+  ), h = b((n, l) => {
+    C.current.set(n, l), x((d) => d + 1);
+  }, []), D = b((n) => {
+    C.current.delete(n), x((l) => l + 1);
+  }, []), N = b(() => {
+    const n = [];
+    for (const [l, d] of C.current)
+      o(d, m) > 0 && n.push(l);
+    return n;
+  }, [o, m]), w = W(
+    () => ({
+      search: m,
+      setSearch: I,
+      filter: o,
+      activeIndex: y,
+      setActiveIndex: p,
+      registerItem: h,
+      unregisterItem: D,
+      items: C.current,
+      getVisibleItems: N,
+      listId: v
+    }),
+    [
+      m,
+      I,
+      o,
+      y,
+      p,
+      h,
+      D,
+      N,
+      v
+    ]
+  ), k = S(null), E = b(
+    (n) => {
+      const l = N();
+      if (l.length) {
+        if (n.key === "ArrowDown")
+          n.preventDefault(), p((d) => (d + 1) % l.length);
+        else if (n.key === "ArrowUp")
+          n.preventDefault(), p((d) => (d - 1 + l.length) % l.length);
+        else if (n.key === "Enter") {
+          n.preventDefault();
+          const d = l[y];
+          d && k.current?.querySelector(
+            `[data-command-id="${d}"]`
+          )?.click();
+        }
+      }
+    },
+    [N, y, p]
+  ), q = [s.command, c].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a(V.Provider, { value: w, children: /* @__PURE__ */ a(
+    "div",
+    {
+      ref: k,
+      className: q,
+      onKeyDown: E,
+      ...i,
+      children: r
+    }
+  ) });
+}, G = ({ className: e, ...t }) => {
+  const { search: o, setSearch: r, listId: c } = B(), i = S(null);
+  j(() => {
+    i.current?.focus();
+  }, []);
+  const f = [s.inputWrapper, e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ R("div", { className: f, children: [
+    /* @__PURE__ */ a(Y, { size: 16, className: s.searchIcon, "aria-hidden": "true" }),
+    /* @__PURE__ */ a(
+      "input",
+      {
+        ref: i,
+        className: s.input,
+        value: o,
+        onChange: (g) => r(g.target.value),
+        type: "text",
+        role: "combobox",
+        "aria-expanded": "true",
+        "aria-autocomplete": "list",
+        "aria-controls": c,
+        ...t
+      }
+    )
+  ] });
+};
+G.displayName = "Command.Input";
+const H = ({
+  children: e,
+  className: t,
+  ...o
+}) => {
+  const { listId: r } = B(), c = [s.list, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a("div", { id: r, className: c, role: "listbox", ...o, children: e });
+};
+H.displayName = "Command.List";
+const K = ({ children: e, className: t }) => {
+  const { getVisibleItems: o } = B();
+  if (o().length > 0) return null;
+  const c = [s.empty, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a("div", { className: c, role: "status", "aria-live": "polite", children: e });
+};
+K.displayName = "Command.Empty";
+const M = ({
+  heading: e,
+  children: t,
+  className: o
+}) => {
+  const r = [s.group, o].filter(Boolean).join(" ");
+  return /* @__PURE__ */ R("div", { className: r, role: "group", "aria-label": e, children: [
+    e && /* @__PURE__ */ a("div", { className: s.groupHeading, children: e }),
+    t
+  ] });
+};
+M.displayName = "Command.Group";
+let O = 0;
+const P = ({
+  onSelect: e,
+  disabled: t = !1,
+  value: o,
+  children: r,
+  className: c,
+  ...i
+}) => {
+  const {
+    filter: f,
+    search: g,
+    activeIndex: y,
+    getVisibleItems: p,
+    registerItem: C,
+    unregisterItem: x
+  } = B(), v = S("");
+  v.current || (v.current = `cmd-item-${++O}`);
+  const m = v.current, I = o || A(r);
+  j(() => (C(m, I), () => x(m)), [m, I, C, x]);
+  const h = f(I, g) > 0, w = p().indexOf(m) === y, k = () => {
+    t || e?.();
+  }, E = [
+    s.item,
+    t && s.itemDisabled,
+    !h && s.itemHidden,
+    c
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: E,
+      "data-command-id": m,
+      "data-active": w,
+      role: "option",
+      "aria-selected": w,
+      "aria-disabled": t,
+      onClick: k,
+      ...i,
+      children: r
+    }
+  );
+};
+P.displayName = "Command.Item";
+const T = ({ className: e }) => {
+  const t = [s.separator, e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a(Z, { spacing: "none", className: t });
+};
+T.displayName = "Command.Separator";
+const U = ({
+  children: e,
+  className: t
+}) => {
+  const o = [s.shortcut, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ a("span", { className: o, children: e });
+};
+U.displayName = "Command.Shortcut";
+const $ = ({
+  open: e,
+  onOpenChange: t,
+  children: o,
+  className: r
+}) => {
+  if (j(() => {
+    if (!e) return;
+    const i = (f) => {
+      f.key === "Escape" && t(!1);
+    };
+    return document.addEventListener("keydown", i), () => document.removeEventListener("keydown", i);
+  }, [e, t]), j(() => (e ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "";
+  }), [e]), !e) return null;
+  const c = (i) => {
+    i.target === i.currentTarget && t(!1);
+  };
+  return X(
+    /* @__PURE__ */ a("div", { className: s.dialogBackdrop, onClick: c, children: /* @__PURE__ */ a(
+      "div",
+      {
+        className: [s.dialogContent, r].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ a(u, { children: o })
+      }
+    ) }),
+    document.body
+  );
+};
+$.displayName = "Command.Dialog";
+u.Input = G;
+u.List = H;
+u.Empty = K;
+u.Group = M;
+u.Item = P;
+u.Separator = T;
+u.Shortcut = U;
+u.Dialog = $;
+u.displayName = "Command";
+function A(e) {
+  return typeof e == "string" ? e : typeof e == "number" ? String(e) : Array.isArray(e) ? e.map(A).join(" ") : z.isValidElement(e) && e.props ? A(
+    e.props.children
+  ) : "";
+}
+export {
+  u as Command
+};

package/dist/components/CommandBar/CommandBar.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=require("react"),w=require("lucide-react"),a=require("./CommandBar.module.css.cjs"),S=n.forwardRef(({open:d,onOpenChange:c,commands:m,recentCommands:i,onSelect:D,placeholder:E="Type a command or search...",emptyMessage:C="No results found.",footer:N,className:L,...R},M)=>{const[r,b]=n.useState(""),[o,u]=n.useState(0),v=n.useRef(null),y=n.useRef(null),k=n.useMemo(()=>{if(!r)return m;const e=r.toLowerCase();return m.filter(t=>{const l=t.label.toLowerCase().includes(e),h=t.description?.toLowerCase().includes(e),j=t.keywords?.some(K=>K.toLowerCase().includes(e));return l||h||j})},[m,r]),p=n.useMemo(()=>{const e=[],t=[];return k.forEach(l=>{if(l.category){const h=e.find(j=>j.title===l.category);h?h.commands.push(l):e.push({title:l.category,commands:[l]})}else t.push(l)}),t.length>0&&e.unshift({title:"",commands:t}),e},[k]),f=n.useMemo(()=>{const e=[];return i&&i.length>0&&!r&&e.push(...i),p.forEach(t=>{e.push(...t.commands)}),e},[p,i,r]);n.useEffect(()=>{d&&(b(""),u(0),setTimeout(()=>v.current?.focus(),0))},[d]);const $=n.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),u(t=>Math.min(t+1,f.length-1));break;case"ArrowUp":e.preventDefault(),u(t=>Math.max(t-1,0));break;case"Enter":{e.preventDefault();const t=f[o];t&&!t.disabled&&x(t);break}case"Escape":e.preventDefault(),c(!1);break}},[f,o,c]),x=e=>{D?.(e),e.onSelect(),c(!1)};if(n.useEffect(()=>{const e=y.current;if(!e)return;const t=e.querySelector(`[data-index="${o}"]`);t&&t.scrollIntoView({block:"nearest"})},[o]),n.useEffect(()=>{const e=t=>{(t.metaKey||t.ctrlKey)&&t.key==="k"&&(t.preventDefault(),c(!d))};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[d,c]),!d)return null;const I=[a.default.commandBar,L].filter(Boolean).join(" ");let g=0;return s.jsx("div",{className:a.default.overlay,onClick:()=>c(!1),children:s.jsxs("div",{ref:M,className:I,onClick:e=>e.stopPropagation(),onKeyDown:$,...R,children:[s.jsxs("div",{className:a.default.inputWrapper,children:[s.jsx(w.Search,{size:18,className:a.default.searchIcon}),s.jsx("input",{ref:v,type:"text",className:a.default.input,placeholder:E,value:r,onChange:e=>{b(e.target.value),u(0)},autoComplete:"off",autoCorrect:"off",spellCheck:!1}),s.jsx("kbd",{className:a.default.shortcutHint,children:"ESC"})]}),s.jsx("div",{ref:y,className:a.default.results,children:f.length===0?s.jsx("div",{className:a.default.empty,children:C}):s.jsxs(s.Fragment,{children:[i&&i.length>0&&!r&&s.jsxs("div",{className:a.default.group,children:[s.jsx("div",{className:a.default.groupTitle,children:"Recent"}),i.map(e=>{const t=g++;return s.jsxs("button",{type:"button","data-index":t,className:`${a.default.item} ${t===o?a.default.itemSelected:""} ${e.disabled?a.default.itemDisabled:""}`,onClick:()=>!e.disabled&&x(e),onMouseEnter:()=>u(t),children:[e.icon&&s.jsx("span",{className:a.default.itemIcon,children:e.icon}),s.jsxs("span",{className:a.default.itemContent,children:[s.jsx("span",{className:a.default.itemLabel,children:e.label}),e.description&&s.jsx("span",{className:a.default.itemDescription,children:e.description})]}),e.shortcut&&s.jsx("kbd",{className:a.default.itemShortcut,children:e.shortcut})]},`recent-${e.id}`)})]}),p.map(e=>s.jsxs("div",{className:a.default.group,children:[e.title&&s.jsx("div",{className:a.default.groupTitle,children:e.title}),e.commands.map(t=>{const l=g++;return s.jsxs("button",{type:"button","data-index":l,className:`${a.default.item} ${l===o?a.default.itemSelected:""} ${t.disabled?a.default.itemDisabled:""}`,onClick:()=>!t.disabled&&x(t),onMouseEnter:()=>u(l),children:[t.icon&&s.jsx("span",{className:a.default.itemIcon,children:t.icon}),s.jsxs("span",{className:a.default.itemContent,children:[s.jsx("span",{className:a.default.itemLabel,children:t.label}),t.description&&s.jsx("span",{className:a.default.itemDescription,children:t.description})]}),t.shortcut&&s.jsx("kbd",{className:a.default.itemShortcut,children:t.shortcut})]},t.id)})]},e.title||"ungrouped"))]})}),N?s.jsx("div",{className:a.default.footer,children:N}):s.jsxs("div",{className:a.default.footer,children:[s.jsxs("span",{className:a.default.footerHint,children:[s.jsx(w.Command,{size:12})," ",s.jsx("span",{children:"K to toggle"})]}),s.jsxs("span",{className:a.default.footerHint,children:[s.jsx("span",{children:"↑↓"})," to navigate"]}),s.jsxs("span",{className:a.default.footerHint,children:[s.jsx("span",{children:"↵"})," to select"]})]})]})})});S.displayName="CommandBar";exports.CommandBar=S;

package/dist/components/CommandBar/CommandBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandBar.d.ts","sourceRoot":"","sources":["../../../src/components/CommandBar/CommandBar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAWH,OAAO,KAAK,EACV,eAAe,EAGhB,MAAM,oBAAoB,CAAC;AAG5B,eAAO,MAAM,UAAU,4GAmStB,CAAC"}
+{"version":3,"file":"CommandBar.d.ts","sourceRoot":"","sources":["../../../src/components/CommandBar/CommandBar.tsx"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EACV,eAAe,EAGhB,MAAM,oBAAoB,CAAC;AAG5B,eAAO,MAAM,UAAU,4GAmStB,CAAC"}