@orion-ds/react 4.9.2 → 4.9.3

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/Command/Command.module.css

@@ -0,0 +1 @@
+._command_ou903_8{display:flex;flex-direction:column;width:100%;overflow:hidden;background:var(--surface-base);border:1px solid var(--border-subtle);border-radius:var(--radius-container);font-family:var(--font-secondary)}._inputWrapper_ou903_23{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--border-subtle)}._searchIcon_ou903_31{color:var(--text-tertiary);flex-shrink:0}._input_ou903_23{flex:1;border:none;outline:none;background:transparent;font-family:var(--font-secondary);font-size:var(--font-size-14);color:var(--text-primary);padding:0}._input_ou903_23::placeholder{color:var(--text-tertiary)}._list_ou903_55{max-height:300px;overflow-y:auto;overflow-x:hidden;padding:var(--spacing-2)}._empty_ou903_66{display:flex;align-items:center;justify-content:center;padding:var(--spacing-6);font-size:var(--font-size-14);color:var(--text-tertiary)}._group_ou903_79{padding:var(--spacing-1) 0}._groupHeading_ou903_83{padding:var(--spacing-1) var(--spacing-2);font-size:var(--font-size-12);font-weight:var(--font-weight-medium);color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.05em}._item_ou903_96{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-2);border-radius:var(--radius-sm);font-size:var(--font-size-14);color:var(--text-primary);cursor:pointer;transition:background var(--transition-fast);position:relative;-webkit-user-select:none;user-select:none}._item_ou903_96:hover:not(._itemDisabled_ou903_110){background:var(--interactive-ghost-hover)}._item_ou903_96[data-active=true]{background:var(--interactive-ghost-hover)}._item_ou903_96:focus-visible{outline:2px solid var(--interactive-primary);outline-offset:-2px}._itemDisabled_ou903_110{opacity:.5;cursor:not-allowed;pointer-events:none}._itemHidden_ou903_129{display:none}._separator_ou903_138{margin:var(--spacing-1) calc(var(--spacing-2) * -1)}._shortcut_ou903_146{margin-left:auto;font-size:var(--font-size-12);color:var(--text-tertiary);font-family:var(--font-secondary);letter-spacing:.02em;pointer-events:none}._dialogBackdrop_ou903_159{position:fixed;inset:0;z-index:var(--z-modal-backdrop);display:flex;align-items:flex-start;justify-content:center;padding-top:20vh;background:var(--surface-overlay);-webkit-backdrop-filter:blur(var(--blur-sm));backdrop-filter:blur(var(--blur-sm));animation:_fadeIn_ou903_1 .15s ease}._dialogContent_ou903_172{width:100%;max-width:520px;animation:_slideDown_ou903_1 .15s ease}._dialogContent_ou903_172 ._command_ou903_8{box-shadow:var(--shadow-xl)}@keyframes _fadeIn_ou903_1{0%{opacity:0}to{opacity:1}}@keyframes _slideDown_ou903_1{0%{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){._item_ou903_96{transition:none}._dialogBackdrop_ou903_159,._dialogContent_ou903_172{animation:none}}

package/dist/components/Command/Command.module.css.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o="_command_ou903_8",t="_inputWrapper_ou903_23",e="_searchIcon_ou903_31",n="_input_ou903_23",i="_list_ou903_55",_="_empty_ou903_66",a="_group_ou903_79",s="_groupHeading_ou903_83",u="_item_ou903_96",r="_itemDisabled_ou903_110",c="_itemHidden_ou903_129",p="_separator_ou903_138",d="_shortcut_ou903_146",m="_dialogBackdrop_ou903_159",l="_dialogContent_ou903_172",g={command:o,inputWrapper:t,searchIcon:e,input:n,list:i,empty:_,group:a,groupHeading:s,item:u,itemDisabled:r,itemHidden:c,separator:p,shortcut:d,dialogBackdrop:m,dialogContent:l};exports.command=o;exports.default=g;exports.dialogBackdrop=m;exports.dialogContent=l;exports.empty=_;exports.group=a;exports.groupHeading=s;exports.input=n;exports.inputWrapper=t;exports.item=u;exports.itemDisabled=r;exports.itemHidden=c;exports.list=i;exports.searchIcon=e;exports.separator=p;exports.shortcut=d;

package/dist/components/Command/Command.module.css.mjs

@@ -0,0 +1,35 @@
+const o = "_command_ou903_8", t = "_inputWrapper_ou903_23", _ = "_searchIcon_ou903_31", n = "_input_ou903_23", e = "_list_ou903_55", s = "_empty_ou903_66", i = "_group_ou903_79", a = "_groupHeading_ou903_83", c = "_item_ou903_96", u = "_itemDisabled_ou903_110", p = "_itemHidden_ou903_129", r = "_separator_ou903_138", d = "_shortcut_ou903_146", m = "_dialogBackdrop_ou903_159", g = "_dialogContent_ou903_172", l = {
+  command: o,
+  inputWrapper: t,
+  searchIcon: _,
+  input: n,
+  list: e,
+  empty: s,
+  group: i,
+  groupHeading: a,
+  item: c,
+  itemDisabled: u,
+  itemHidden: p,
+  separator: r,
+  shortcut: d,
+  dialogBackdrop: m,
+  dialogContent: g
+};
+export {
+  o as command,
+  l as default,
+  m as dialogBackdrop,
+  g as dialogContent,
+  s as empty,
+  i as group,
+  a as groupHeading,
+  n as input,
+  t as inputWrapper,
+  c as item,
+  u as itemDisabled,
+  p as itemHidden,
+  e as list,
+  _ as searchIcon,
+  r as separator,
+  d as shortcut
+};

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

@@ -0,0 +1,150 @@
+import { HTMLAttributes, ReactNode, InputHTMLAttributes } from 'react';
+
+/**
+ * Command root props
+ */
+export interface CommandProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /**
+     * Controlled search value
+     */
+    value?: string;
+    /**
+     * Callback when search value changes
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Custom filter function. Return 0 to hide, 1 to show.
+     * By default uses case-insensitive includes.
+     */
+    filter?: (value: string, search: string) => number;
+    /**
+     * Children (compound components)
+     */
+    children?: ReactNode;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * Command.Dialog props — renders Command inside a modal overlay
+ */
+export interface CommandDialogProps {
+    /**
+     * Whether the dialog is open
+     */
+    open: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Children (Command compound components)
+     */
+    children?: ReactNode;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * Command.Input props
+ */
+export interface CommandInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * Command.List props
+ */
+export interface CommandListProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Children (groups and items)
+     */
+    children?: ReactNode;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * Command.Empty props
+ */
+export interface CommandEmptyProps {
+    /**
+     * Content to show when no results match
+     */
+    children?: ReactNode;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * Command.Group props
+ */
+export interface CommandGroupProps {
+    /**
+     * Group heading
+     */
+    heading?: string;
+    /**
+     * Group items
+     */
+    children?: ReactNode;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * Command.Item props
+ */
+export interface CommandItemProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+    /**
+     * Callback when item is selected (click or Enter)
+     */
+    onSelect?: () => void;
+    /**
+     * Whether the item is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Search value for filtering (defaults to text content)
+     */
+    value?: string;
+    /**
+     * Children
+     */
+    children?: ReactNode;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * Command.Separator props
+ */
+export interface CommandSeparatorProps {
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+/**
+ * Command.Shortcut props
+ */
+export interface CommandShortcutProps {
+    /**
+     * Keyboard shortcut text
+     */
+    children?: ReactNode;
+    /**
+     * Additional class name
+     */
+    className?: string;
+}
+//# sourceMappingURL=Command.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Command.types.d.ts","sourceRoot":"","sources":["../../../src/components/Command/Command.types.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE5E;;GAEG;AACH,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAEnD;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;IAEd;;OAEG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEtC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAC7C,mBAAmB,CAAC,gBAAgB,CAAC,EACrC,UAAU,GAAG,OAAO,CACrB;IACC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

@@ -0,0 +1,21 @@
+/**
+ * Command Component - Searchable command palette with keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * import { Command } from '@orion-ds/react';
+ *
+ * <Command>
+ *   <Command.Input placeholder="Type a command..." />
+ *   <Command.List>
+ *     <Command.Empty>No results found.</Command.Empty>
+ *     <Command.Group heading="Suggestions">
+ *       <Command.Item onSelect={() => {}}>Calendar</Command.Item>
+ *     </Command.Group>
+ *   </Command.List>
+ * </Command>
+ * ```
+ */
+export { Command } from './Command';
+export type { CommandProps, CommandDialogProps, CommandInputProps, CommandListProps, CommandEmptyProps, CommandGroupProps, CommandItemProps, CommandSeparatorProps, CommandShortcutProps, } from './Command.types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Command/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EACV,YAAY,EACZ,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,GACrB,MAAM,iBAAiB,CAAC"}

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

@@ -0,0 +1,4 @@
+import { CommandBarProps } from './CommandBar.types';
+
+export declare const CommandBar: import('react').ForwardRefExoticComponent<CommandBarProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=CommandBar.d.ts.map

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

@@ -0,0 +1 @@
+{"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"}