@forgedevstack/bear 1.0.5 → 1.0.6

package/dist/components/Cascader/Cascader.js

@@ -0,0 +1,227 @@
+import { jsxs as h, jsx as c } from "react/jsx-runtime";
+import { useState as R, useRef as H, useMemo as O, useEffect as P, useCallback as w } from "react";
+import { createPortal as $ } from "react-dom";
+import { cn as y } from "../../utils/cn.js";
+import { CASCADER_DEFAULT_TRANSLATIONS as ee, CASCADER_PATH_SEPARATOR as re, CASCADER_VARIANT_CLASSES as ae, CASCADER_SIZE_CLASSES as te, CASCADER_DROPDOWN_Z_INDEX as ne } from "./Cascader.const.js";
+const ce = ({
+  options: b,
+  selectedPath: s,
+  expandedPath: o,
+  onSelect: B,
+  onExpand: p,
+  expandTrigger: k,
+  level: i
+}) => {
+  const m = (a) => {
+    var d;
+    B(a, i), (d = a.children) != null && d.length && p(a, i);
+  }, v = (a) => {
+    var d;
+    k === "hover" && ((d = a.children) != null && d.length) && p(a, i);
+  };
+  return /* @__PURE__ */ c("div", { className: "Bear-Cascader__panel bear-min-w-[180px] bear-max-h-[280px] bear-overflow-y-auto bear-border-r bear-border-zinc-200 dark:bear-border-zinc-700 last:bear-border-r-0", children: b.map((a) => {
+    const d = s[i] === a.value, C = o[i] === a.value, N = a.children && a.children.length > 0;
+    return /* @__PURE__ */ h(
+      "button",
+      {
+        type: "button",
+        disabled: a.disabled,
+        onClick: () => m(a),
+        onMouseEnter: () => v(a),
+        className: y(
+          "Bear-Cascader__option bear-w-full bear-flex bear-items-center bear-justify-between bear-px-3 bear-py-2 bear-text-sm bear-text-left bear-transition-colors",
+          d && "Bear-Cascader__option--selected bear-bg-pink-500/20 bear-text-pink-600 dark:bear-text-pink-400",
+          C && !d && "Bear-Cascader__option--expanded bear-bg-gray-100 dark:bear-bg-zinc-700",
+          !d && !C && "bear-text-gray-700 dark:bear-text-zinc-300 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700",
+          a.disabled && "Bear-Cascader__option--disabled bear-opacity-50 bear-cursor-not-allowed"
+        ),
+        children: [
+          /* @__PURE__ */ h("span", { className: "bear-flex bear-items-center bear-gap-2", children: [
+            a.icon && /* @__PURE__ */ c("span", { className: "Bear-Cascader__option-icon", children: a.icon }),
+            /* @__PURE__ */ c("span", { className: "Bear-Cascader__option-label", children: a.label })
+          ] }),
+          N && /* @__PURE__ */ c("svg", { className: "Bear-Cascader__arrow bear-w-4 bear-h-4 bear-text-gray-500 dark:bear-text-zinc-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ c("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) })
+        ]
+      },
+      a.value
+    );
+  }) });
+}, be = ({
+  options: b,
+  value: s = [],
+  onChange: o,
+  placeholder: B,
+  label: p,
+  helperText: k,
+  error: i,
+  disabled: m = !1,
+  loading: v = !1,
+  clearable: a = !0,
+  size: d = "md",
+  variant: C = "default",
+  expandTrigger: N = "click",
+  showFullPath: D = !0,
+  pathSeparator: j = re,
+  changeOnSelect: M = !1,
+  className: U,
+  testId: V,
+  translations: T,
+  icon: Y
+}) => {
+  const [x, E] = R(!1), [_, A] = R([]), [I, q] = R({ top: 0, left: 0 }), W = H(null), z = H(null), S = O(() => ({
+    ...ee,
+    ...T
+  }), [T]);
+  P(() => {
+    if (x && z.current) {
+      const e = z.current.getBoundingClientRect(), t = window.scrollY || document.documentElement.scrollTop, r = window.scrollX || document.documentElement.scrollLeft;
+      q({
+        top: e.bottom + t + 8,
+        left: e.left + r
+      });
+    }
+  }, [x]), P(() => {
+    const e = (t) => {
+      var n, l;
+      const r = t.target;
+      (n = W.current) != null && n.contains(r) || (l = r.closest) != null && l.call(r, "[data-bear-cascader-dropdown]") || E(!1);
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []), P(() => {
+    s.length > 0 && A(s.slice(0, -1));
+  }, [s]);
+  const F = w((e, t) => {
+    for (const r of e) {
+      if (r.value === t) return r;
+      if (r.children) {
+        const n = F(r.children, t);
+        if (n) return n;
+      }
+    }
+  }, []), X = O(() => {
+    var t;
+    if (s.length === 0) return "";
+    const e = s.map((r, n) => {
+      let l = b;
+      for (let f = 0; f < n; f++) {
+        const u = l.find((L) => L.value === s[f]);
+        u != null && u.children && (l = u.children);
+      }
+      return l.find((f) => f.value === r);
+    }).filter(Boolean);
+    return D ? e.map((r) => r.label).join(j) : ((t = e[e.length - 1]) == null ? void 0 : t.label) || "";
+  }, [s, b, D, j]), Z = O(() => {
+    const e = [b];
+    let t = b;
+    for (const r of _) {
+      const n = t.find((l) => l.value === r);
+      if (n != null && n.children)
+        e.push(n.children), t = n.children;
+      else
+        break;
+    }
+    return e;
+  }, [b, _]), G = w((e, t) => {
+    var n, l;
+    const r = [..._.slice(0, t), e.value];
+    if (!((n = e.children) != null && n.length) || M) {
+      const f = [];
+      let u = b;
+      for (const L of r) {
+        const g = u.find((Q) => Q.value === L);
+        g && (f.push(g), g.children && (u = g.children));
+      }
+      o == null || o(r, f), (l = e.children) != null && l.length || E(!1);
+    }
+  }, [_, b, o, M]), J = w((e, t) => {
+    A((r) => [...r.slice(0, t), e.value]);
+  }, []), K = w((e) => {
+    e.stopPropagation(), o == null || o([], []), A([]);
+  }, [o]);
+  return /* @__PURE__ */ h(
+    "div",
+    {
+      ref: W,
+      className: y("Bear-Cascader bear-relative", U),
+      "data-testid": V,
+      children: [
+        p && /* @__PURE__ */ c("label", { className: "Bear-Cascader__label bear-block bear-text-sm bear-font-medium bear-text-zinc-700 dark:bear-text-zinc-300 bear-mb-1.5", children: p }),
+        /* @__PURE__ */ h(
+          "button",
+          {
+            ref: z,
+            type: "button",
+            onClick: () => !m && E(!x),
+            disabled: m,
+            className: y(
+              "Bear-Cascader__trigger bear-w-full bear-flex bear-items-center bear-justify-between bear-rounded-lg bear-border bear-text-left bear-transition-colors",
+              te[d],
+              ae[C],
+              i ? "bear-border-red-500" : "focus:bear-border-pink-500",
+              m && "bear-opacity-50 bear-cursor-not-allowed",
+              X ? "bear-text-gray-900 dark:bear-text-white" : "bear-text-gray-500 dark:bear-text-zinc-500"
+            ),
+            children: [
+              /* @__PURE__ */ c("span", { className: "Bear-Cascader__value bear-truncate bear-flex-1", children: v ? S.loading : X || B || S.placeholder }),
+              /* @__PURE__ */ h("span", { className: "Bear-Cascader__icons bear-flex bear-items-center bear-gap-1", children: [
+                a && s.length > 0 && !m && /* @__PURE__ */ c(
+                  "span",
+                  {
+                    onClick: K,
+                    className: "Bear-Cascader__clear bear-p-0.5 bear-rounded hover:bear-bg-gray-200 dark:hover:bear-bg-zinc-700 bear-cursor-pointer",
+                    children: /* @__PURE__ */ c("svg", { className: "bear-w-4 bear-h-4 bear-text-gray-500 dark:bear-text-zinc-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ c("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                  }
+                ),
+                Y ?? /* @__PURE__ */ c(
+                  "svg",
+                  {
+                    className: y(
+                      "Bear-Cascader__chevron bear-w-4 bear-h-4 bear-text-gray-500 dark:bear-text-zinc-400 bear-transition-transform",
+                      x && "bear-rotate-180"
+                    ),
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ c("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        i && /* @__PURE__ */ c("p", { className: "Bear-Cascader__error bear-mt-1 bear-text-xs bear-text-red-400", children: i }),
+        k && !i && /* @__PURE__ */ c("p", { className: "Bear-Cascader__helper bear-mt-1 bear-text-xs bear-text-zinc-500 dark:bear-text-zinc-400", children: k }),
+        x && typeof document < "u" && $(
+          /* @__PURE__ */ h(
+            "div",
+            {
+              "data-bear-cascader-dropdown": !0,
+              className: "Bear-Cascader__dropdown bear-fixed bear-bg-white dark:bear-bg-zinc-800 bear-border bear-border-zinc-200 dark:bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-flex bear-overflow-hidden",
+              style: { top: I.top, left: I.left, zIndex: ne },
+              children: [
+                Z.map((e, t) => /* @__PURE__ */ c(
+                  ce,
+                  {
+                    options: e,
+                    selectedPath: s,
+                    expandedPath: _,
+                    onSelect: G,
+                    onExpand: J,
+                    expandTrigger: N,
+                    level: t
+                  },
+                  t
+                )),
+                Z.every((e) => e.length === 0) && /* @__PURE__ */ c("div", { className: "Bear-Cascader__empty bear-px-4 bear-py-3 bear-text-sm bear-text-gray-500 dark:bear-text-zinc-500", children: S.noOptions })
+              ]
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+};
+export {
+  be as Cascader
+};

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

@@ -0,0 +1,94 @@
+import { ReactNode } from 'react';
+/**
+ * Cascader option interface
+ */
+export interface CascaderOption {
+    /** Unique value for the option */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Child options for nested levels */
+    children?: CascaderOption[];
+    /** Whether the option is disabled */
+    disabled?: boolean;
+    /** Optional icon */
+    icon?: ReactNode;
+}
+/**
+ * Cascader size variants
+ */
+export type CascaderSize = 'sm' | 'md' | 'lg';
+/**
+ * Cascader variant styles
+ */
+export type CascaderVariant = 'default' | 'filled' | 'outline';
+/**
+ * Trigger type for expanding options
+ */
+export type CascaderExpandTrigger = 'click' | 'hover';
+/**
+ * Translations for Cascader component
+ */
+export interface CascaderTranslations {
+    placeholder: string;
+    noOptions: string;
+    loading: string;
+    clear: string;
+}
+/**
+ * Cascader component props
+ */
+export interface CascaderProps {
+    /** Available options (hierarchical) */
+    options: CascaderOption[];
+    /** Selected value path (array of values) */
+    value?: string[];
+    /** Callback when value changes */
+    onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Input label */
+    label?: string;
+    /** Helper text below input */
+    helperText?: string;
+    /** Error message */
+    error?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is loading */
+    loading?: boolean;
+    /** Whether to allow clearing the selection */
+    clearable?: boolean;
+    /** Size variant */
+    size?: CascaderSize;
+    /** Style variant */
+    variant?: CascaderVariant;
+    /** How to expand child options */
+    expandTrigger?: CascaderExpandTrigger;
+    /** Whether to show the full path in the input */
+    showFullPath?: boolean;
+    /** Path separator for display */
+    pathSeparator?: string;
+    /** Allow selecting parent options */
+    changeOnSelect?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID for testing */
+    testId?: string;
+    /** Translation strings */
+    translations?: Partial<CascaderTranslations>;
+    /** Custom icon */
+    icon?: ReactNode;
+}
+/**
+ * Cascader panel props (internal)
+ */
+export interface CascaderPanelProps {
+    options: CascaderOption[];
+    selectedPath: string[];
+    expandedPath: string[];
+    onSelect: (option: CascaderOption, level: number) => void;
+    onExpand: (option: CascaderOption, level: number) => void;
+    expandTrigger: CascaderExpandTrigger;
+    level: number;
+}

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

@@ -0,0 +1,2 @@
+export { Cascader } from './Cascader';
+export type { CascaderProps, CascaderOption, CascaderSize, CascaderVariant, CascaderExpandTrigger, CascaderTranslations, } from './Cascader.types';

package/dist/components/CommandPalette/CommandPalette.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("react"),Q=require("react-dom"),L=require("../../utils/cn.cjs"),k=require("./CommandPalette.const.cjs"),E=require("./CommandPalette.utils.cjs"),z=({command:s,isHighlighted:g,onSelect:m})=>t.jsxs("button",{type:"button",onClick:m,disabled:s.disabled,className:L.cn("Bear-CommandPalette__item bear-w-full bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-2.5 bear-text-left bear-transition-colors",g?"bear-bg-pink-500/20 bear-text-pink-400":"bear-text-zinc-300 hover:bear-bg-zinc-700",s.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),children:[s.icon&&t.jsx("span",{className:"Bear-CommandPalette__item-icon bear-text-zinc-400 bear-shrink-0",children:s.icon}),t.jsxs("div",{className:"Bear-CommandPalette__item-content bear-flex-1 bear-min-w-0",children:[t.jsx("div",{className:"Bear-CommandPalette__item-label bear-text-sm bear-font-medium bear-truncate",children:s.label}),s.description&&t.jsx("div",{className:"Bear-CommandPalette__item-description bear-text-xs bear-text-zinc-500 bear-truncate",children:s.description})]}),s.shortcut&&t.jsx("div",{className:"Bear-CommandPalette__item-shortcut bear-flex bear-gap-1 bear-shrink-0",children:E.formatShortcut(s.shortcut).map((N,p)=>t.jsx("kbd",{className:"bear-px-1.5 bear-py-0.5 bear-text-xs bear-font-mono bear-bg-zinc-700 bear-rounded bear-text-zinc-400",children:N},p))})]}),V=({commands:s,open:g,onOpenChange:m,placeholder:N,showRecent:p=!0,maxRecent:h=k.COMMAND_PALETTE_MAX_RECENT,recentIds:q,onRecentChange:_,groupByCategory:y=!1,filterFn:B=E.defaultFilterFn,triggerKey:D=k.COMMAND_PALETTE_TRIGGER_KEY,className:O,testId:R,translations:I,icon:K,footer:M})=>{const[H,F]=r.useState(!1),[i,A]=r.useState(""),[n,v]=r.useState(0),[G,U]=r.useState([]),S=r.useRef(null),P=r.useRef(null),u=g??H,l=r.useCallback(e=>{m==null||m(e),F(e)},[m]),d=q??G,T=r.useCallback(e=>{_==null||_(e),U(e)},[_]),j=r.useMemo(()=>({...k.COMMAND_PALETTE_DEFAULT_TRANSLATIONS,...I}),[I]),x=r.useMemo(()=>i.trim()?s.filter(e=>B(e,i)):s,[s,i,B]),c=r.useMemo(()=>!p||i.trim()?[]:d.slice(0,h).map(e=>s.find(a=>a.id===e)).filter(Boolean),[p,i,d,h,s]),C=r.useMemo(()=>y?E.groupCommandsByCategory(x):null,[x,y]),o=r.useMemo(()=>{const e=[];return c.length>0&&e.push(...c),e.push(...x.filter(a=>!d.includes(a.id))),e},[c,x,d]);r.useEffect(()=>{const e=a=>{(a.metaKey||a.ctrlKey)&&a.key.toLowerCase()===D&&(a.preventDefault(),l(!u)),a.key==="Escape"&&u&&(a.preventDefault(),l(!1))};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[u,D,l]),r.useEffect(()=>{u&&(A(""),v(0),setTimeout(()=>{var e;return(e=S.current)==null?void 0:e.focus()},50))},[u]),r.useEffect(()=>{if(n>=0&&P.current){const a=P.current.querySelectorAll("[data-command-item]")[n];a&&a.scrollIntoView({block:"nearest"})}},[n]);const f=r.useCallback(e=>{const a=[e.id,...d.filter(b=>b!==e.id)].slice(0,h);T(a),l(!1),e.onSelect()},[d,h,T,l]),X=r.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),v(a=>a<o.length-1?a+1:0);break;case"ArrowUp":e.preventDefault(),v(a=>a>0?a-1:o.length-1);break;case"Enter":e.preventDefault(),o[n]&&!o[n].disabled&&f(o[n]);break;case"Escape":e.preventDefault(),l(!1);break}},[o,n,f,l]);return u&&typeof document<"u"?Q.createPortal(t.jsxs("div",{className:L.cn("Bear-CommandPalette bear-fixed bear-inset-0 bear-flex bear-items-start bear-justify-center bear-pt-[15vh]",O),style:{zIndex:k.COMMAND_PALETTE_Z_INDEX},"data-testid":R,children:[t.jsx("div",{className:"Bear-CommandPalette__backdrop bear-absolute bear-inset-0 bear-bg-black/50 bear-backdrop-blur-sm",onClick:()=>l(!1)}),t.jsxs("div",{className:"Bear-CommandPalette__content bear-relative bear-w-full bear-max-w-xl bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-xl bear-shadow-2xl bear-overflow-hidden",children:[t.jsxs("div",{className:"Bear-CommandPalette__search bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-3 bear-border-b bear-border-zinc-700",children:[K??t.jsx("svg",{className:"bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"})}),t.jsx("input",{ref:S,type:"text",value:i,onChange:e=>{A(e.target.value),v(0)},onKeyDown:X,placeholder:N||j.placeholder,className:"Bear-CommandPalette__input bear-flex-1 bear-bg-transparent bear-border-0 bear-outline-none bear-text-white placeholder:bear-text-zinc-500"}),t.jsx("kbd",{className:"bear-px-2 bear-py-1 bear-text-xs bear-font-mono bear-bg-zinc-700 bear-rounded bear-text-zinc-400",children:"esc"})]}),t.jsx("div",{ref:P,className:"Bear-CommandPalette__list bear-max-h-[60vh] bear-overflow-y-auto",children:o.length===0?t.jsx("div",{className:"Bear-CommandPalette__empty bear-px-4 bear-py-8 bear-text-center bear-text-sm bear-text-zinc-500",children:j.noResults}):t.jsxs(t.Fragment,{children:[c.length>0&&!i.trim()&&t.jsxs("div",{className:"Bear-CommandPalette__group",children:[t.jsx("div",{className:"Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-zinc-800/50",children:j.recentCommands}),c.map((e,a)=>t.jsx("div",{"data-command-item":!0,children:t.jsx(z,{command:e,isHighlighted:n===a,onSelect:()=>f(e)})},`recent-${e.id}`))]}),y&&C?C.map(e=>{const a=c.length+C.slice(0,C.indexOf(e)).reduce((b,w)=>b+w.commands.length,0);return t.jsxs("div",{className:"Bear-CommandPalette__group",children:[t.jsx("div",{className:"Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-zinc-800/50",children:e.name}),e.commands.map((b,w)=>t.jsx("div",{"data-command-item":!0,children:t.jsx(z,{command:b,isHighlighted:n===a+w,onSelect:()=>f(b)})},b.id))]},e.name)}):t.jsxs("div",{className:"Bear-CommandPalette__group",children:[!i.trim()&&c.length>0&&t.jsx("div",{className:"Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-zinc-800/50",children:j.allCommands}),x.filter(e=>!d.includes(e.id)||i.trim()).map((e,a)=>t.jsx("div",{"data-command-item":!0,children:t.jsx(z,{command:e,isHighlighted:n===c.length+a,onSelect:()=>f(e)})},e.id))]})]})}),M&&t.jsx("div",{className:"Bear-CommandPalette__footer bear-px-4 bear-py-2 bear-border-t bear-border-zinc-700 bear-text-xs bear-text-zinc-500",children:M})]})]}),document.body):null};exports.CommandPalette=V;

package/dist/components/CommandPalette/CommandPalette.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E={placeholder:"Type a command or search...",noResults:"No commands found",recentCommands:"Recent",allCommands:"All Commands",closeHint:"Press ESC to close"},T="k",A=5,_=9999;exports.COMMAND_PALETTE_DEFAULT_TRANSLATIONS=E;exports.COMMAND_PALETTE_MAX_RECENT=A;exports.COMMAND_PALETTE_TRIGGER_KEY=T;exports.COMMAND_PALETTE_Z_INDEX=_;

package/dist/components/CommandPalette/CommandPalette.const.d.ts

@@ -0,0 +1,25 @@
+import { CommandPaletteTranslations } from './CommandPalette.types';
+/**
+ * Default translations
+ */
+export declare const COMMAND_PALETTE_DEFAULT_TRANSLATIONS: CommandPaletteTranslations;
+/**
+ * Default trigger key
+ */
+export declare const COMMAND_PALETTE_TRIGGER_KEY = "k";
+/**
+ * Maximum recent commands
+ */
+export declare const COMMAND_PALETTE_MAX_RECENT = 5;
+/**
+ * Z-index for palette
+ */
+export declare const COMMAND_PALETTE_Z_INDEX = 9999;
+/**
+ * Animation duration
+ */
+export declare const COMMAND_PALETTE_ANIMATION_DURATION = 150;
+/**
+ * Maximum visible commands
+ */
+export declare const COMMAND_PALETTE_MAX_VISIBLE = 10;

package/dist/components/CommandPalette/CommandPalette.const.js

@@ -0,0 +1,13 @@
+const o = {
+  placeholder: "Type a command or search...",
+  noResults: "No commands found",
+  recentCommands: "Recent",
+  allCommands: "All Commands",
+  closeHint: "Press ESC to close"
+}, s = "k", E = 5, n = 9999;
+export {
+  o as COMMAND_PALETTE_DEFAULT_TRANSLATIONS,
+  E as COMMAND_PALETTE_MAX_RECENT,
+  s as COMMAND_PALETTE_TRIGGER_KEY,
+  n as COMMAND_PALETTE_Z_INDEX
+};

package/dist/components/CommandPalette/CommandPalette.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { CommandPaletteProps } from './CommandPalette.types';
+/**
+ * CommandPalette - Command palette component (Cmd+K style)
+ *
+ * @example
+ * ```tsx
+ * <CommandPalette
+ *   commands={[
+ *     { id: '1', label: 'New File', shortcut: 'Ctrl+N', onSelect: () => {} },
+ *     { id: '2', label: 'Open Settings', shortcut: 'Ctrl+,', onSelect: () => {} },
+ *   ]}
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ * />
+ * ```
+ */
+export declare const CommandPalette: FC<CommandPaletteProps>;

package/dist/components/CommandPalette/CommandPalette.js

@@ -0,0 +1,190 @@
+import { jsxs as l, jsx as t, Fragment as Y } from "react/jsx-runtime";
+import { useState as C, useRef as j, useCallback as y, useMemo as h, useEffect as I } from "react";
+import { createPortal as Z } from "react-dom";
+import { cn as H } from "../../utils/cn.js";
+import { COMMAND_PALETTE_DEFAULT_TRANSLATIONS as $, COMMAND_PALETTE_MAX_RECENT as J, COMMAND_PALETTE_TRIGGER_KEY as ee, COMMAND_PALETTE_Z_INDEX as re } from "./CommandPalette.const.js";
+import { defaultFilterFn as te, groupCommandsByCategory as ae, formatShortcut as ne } from "./CommandPalette.utils.js";
+const D = ({
+  command: a,
+  isHighlighted: P,
+  onSelect: m
+}) => /* @__PURE__ */ l(
+  "button",
+  {
+    type: "button",
+    onClick: m,
+    disabled: a.disabled,
+    className: H(
+      "Bear-CommandPalette__item bear-w-full bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-2.5 bear-text-left bear-transition-colors",
+      P ? "bear-bg-pink-500/20 bear-text-pink-400" : "bear-text-zinc-300 hover:bear-bg-zinc-700",
+      a.disabled && "bear-opacity-50 bear-cursor-not-allowed"
+    ),
+    children: [
+      a.icon && /* @__PURE__ */ t("span", { className: "Bear-CommandPalette__item-icon bear-text-zinc-400 bear-shrink-0", children: a.icon }),
+      /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__item-content bear-flex-1 bear-min-w-0", children: [
+        /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__item-label bear-text-sm bear-font-medium bear-truncate", children: a.label }),
+        a.description && /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__item-description bear-text-xs bear-text-zinc-500 bear-truncate", children: a.description })
+      ] }),
+      a.shortcut && /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__item-shortcut bear-flex bear-gap-1 bear-shrink-0", children: ne(a.shortcut).map((w, x) => /* @__PURE__ */ t(
+        "kbd",
+        {
+          className: "bear-px-1.5 bear-py-0.5 bear-text-xs bear-font-mono bear-bg-zinc-700 bear-rounded bear-text-zinc-400",
+          children: w
+        },
+        x
+      )) })
+    ]
+  }
+), be = ({
+  commands: a,
+  open: P,
+  onOpenChange: m,
+  placeholder: w,
+  showRecent: x = !0,
+  maxRecent: _ = J,
+  recentIds: F,
+  onRecentChange: v,
+  groupByCategory: z = !1,
+  filterFn: A = te,
+  triggerKey: T = ee,
+  className: R,
+  testId: q,
+  translations: L,
+  icon: G,
+  footer: M
+}) => {
+  const [U, X] = C(!1), [i, S] = C(""), [n, N] = C(0), [Q, V] = C([]), K = j(null), B = j(null), u = P ?? U, s = y((e) => {
+    m == null || m(e), X(e);
+  }, [m]), c = F ?? Q, O = y((e) => {
+    v == null || v(e), V(e);
+  }, [v]), k = h(() => ({
+    ...$,
+    ...L
+  }), [L]), p = h(() => i.trim() ? a.filter((e) => A(e, i)) : a, [a, i, A]), d = h(() => !x || i.trim() ? [] : c.slice(0, _).map((e) => a.find((r) => r.id === e)).filter(Boolean), [x, i, c, _, a]), g = h(() => z ? ae(p) : null, [p, z]), o = h(() => {
+    const e = [];
+    return d.length > 0 && e.push(...d), e.push(...p.filter((r) => !c.includes(r.id))), e;
+  }, [d, p, c]);
+  I(() => {
+    const e = (r) => {
+      (r.metaKey || r.ctrlKey) && r.key.toLowerCase() === T && (r.preventDefault(), s(!u)), r.key === "Escape" && u && (r.preventDefault(), s(!1));
+    };
+    return document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
+  }, [u, T, s]), I(() => {
+    u && (S(""), N(0), setTimeout(() => {
+      var e;
+      return (e = K.current) == null ? void 0 : e.focus();
+    }, 50));
+  }, [u]), I(() => {
+    if (n >= 0 && B.current) {
+      const r = B.current.querySelectorAll("[data-command-item]")[n];
+      r && r.scrollIntoView({ block: "nearest" });
+    }
+  }, [n]);
+  const f = y((e) => {
+    const r = [e.id, ...c.filter((b) => b !== e.id)].slice(0, _);
+    O(r), s(!1), e.onSelect();
+  }, [c, _, O, s]), W = y((e) => {
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault(), N((r) => r < o.length - 1 ? r + 1 : 0);
+        break;
+      case "ArrowUp":
+        e.preventDefault(), N((r) => r > 0 ? r - 1 : o.length - 1);
+        break;
+      case "Enter":
+        e.preventDefault(), o[n] && !o[n].disabled && f(o[n]);
+        break;
+      case "Escape":
+        e.preventDefault(), s(!1);
+        break;
+    }
+  }, [o, n, f, s]);
+  return u && typeof document < "u" ? Z(
+    /* @__PURE__ */ l(
+      "div",
+      {
+        className: H("Bear-CommandPalette bear-fixed bear-inset-0 bear-flex bear-items-start bear-justify-center bear-pt-[15vh]", R),
+        style: { zIndex: re },
+        "data-testid": q,
+        children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              className: "Bear-CommandPalette__backdrop bear-absolute bear-inset-0 bear-bg-black/50 bear-backdrop-blur-sm",
+              onClick: () => s(!1)
+            }
+          ),
+          /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__content bear-relative bear-w-full bear-max-w-xl bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-xl bear-shadow-2xl bear-overflow-hidden", children: [
+            /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__search bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-3 bear-border-b bear-border-zinc-700", children: [
+              G ?? /* @__PURE__ */ t("svg", { className: "bear-w-5 bear-h-5 bear-text-zinc-400 bear-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ t("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }) }),
+              /* @__PURE__ */ t(
+                "input",
+                {
+                  ref: K,
+                  type: "text",
+                  value: i,
+                  onChange: (e) => {
+                    S(e.target.value), N(0);
+                  },
+                  onKeyDown: W,
+                  placeholder: w || k.placeholder,
+                  className: "Bear-CommandPalette__input bear-flex-1 bear-bg-transparent bear-border-0 bear-outline-none bear-text-white placeholder:bear-text-zinc-500"
+                }
+              ),
+              /* @__PURE__ */ t("kbd", { className: "bear-px-2 bear-py-1 bear-text-xs bear-font-mono bear-bg-zinc-700 bear-rounded bear-text-zinc-400", children: "esc" })
+            ] }),
+            /* @__PURE__ */ t(
+              "div",
+              {
+                ref: B,
+                className: "Bear-CommandPalette__list bear-max-h-[60vh] bear-overflow-y-auto",
+                children: o.length === 0 ? /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__empty bear-px-4 bear-py-8 bear-text-center bear-text-sm bear-text-zinc-500", children: k.noResults }) : /* @__PURE__ */ l(Y, { children: [
+                  d.length > 0 && !i.trim() && /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__group", children: [
+                    /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-zinc-800/50", children: k.recentCommands }),
+                    d.map((e, r) => /* @__PURE__ */ t("div", { "data-command-item": !0, children: /* @__PURE__ */ t(
+                      D,
+                      {
+                        command: e,
+                        isHighlighted: n === r,
+                        onSelect: () => f(e)
+                      }
+                    ) }, `recent-${e.id}`))
+                  ] }),
+                  z && g ? g.map((e) => {
+                    const r = d.length + g.slice(0, g.indexOf(e)).reduce((b, E) => b + E.commands.length, 0);
+                    return /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__group", children: [
+                      /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-zinc-800/50", children: e.name }),
+                      e.commands.map((b, E) => /* @__PURE__ */ t("div", { "data-command-item": !0, children: /* @__PURE__ */ t(
+                        D,
+                        {
+                          command: b,
+                          isHighlighted: n === r + E,
+                          onSelect: () => f(b)
+                        }
+                      ) }, b.id))
+                    ] }, e.name);
+                  }) : /* @__PURE__ */ l("div", { className: "Bear-CommandPalette__group", children: [
+                    !i.trim() && d.length > 0 && /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__group-header bear-px-4 bear-py-2 bear-text-xs bear-font-medium bear-text-zinc-500 bear-uppercase bear-tracking-wider bear-bg-zinc-800/50", children: k.allCommands }),
+                    p.filter((e) => !c.includes(e.id) || i.trim()).map((e, r) => /* @__PURE__ */ t("div", { "data-command-item": !0, children: /* @__PURE__ */ t(
+                      D,
+                      {
+                        command: e,
+                        isHighlighted: n === d.length + r,
+                        onSelect: () => f(e)
+                      }
+                    ) }, e.id))
+                  ] })
+                ] })
+              }
+            ),
+            M && /* @__PURE__ */ t("div", { className: "Bear-CommandPalette__footer bear-px-4 bear-py-2 bear-border-t bear-border-zinc-700 bear-text-xs bear-text-zinc-500", children: M })
+          ] })
+        ]
+      }
+    ),
+    document.body
+  ) : null;
+};
+export {
+  be as CommandPalette
+};