@forgedevstack/bear 1.0.8 → 1.1.0

package/dist/components/NavigableSelect/NavigableSelect.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),n=require("../../utils/cn.cjs"),c=require("./NavigableSelect.const.cjs"),oe=Z=>{const{options:_,value:R,defaultValue:G,onChange:i,multiple:b=!1,searchable:K=!0,placeholder:z=c.DEFAULT_PLACEHOLDER,label:O,helperText:M,error:S,disabled:p=!1,size:m="md",fullWidth:X=!1,maxVisible:Y=c.DEFAULT_MAX_VISIBLE,maxSelections:j,emptyText:$=c.DEFAULT_EMPTY_TEXT,className:J,style:Q,testId:ee}=Z,y=R!==void 0,V=e=>e===void 0?[]:Array.isArray(e)?e:[e],[re,P]=s.useState(V(G)),[g,w]=s.useState(!1),[d,o]=s.useState(-1),[x,B]=s.useState(""),E=s.useRef(null),C=s.useRef(null),q=s.useRef(null),H=s.useRef(null),l=y?V(R):re,h=s.useMemo(()=>{if(!x)return _;const e=x.toLowerCase();return _.filter(a=>{var t;return a.label.toLowerCase().includes(e)||((t=a.description)==null?void 0:t.toLowerCase().includes(e))})},[_,x]),ae=s.useMemo(()=>{const e=new Map;return h.forEach(a=>{const t=a.group||"";e.has(t)||e.set(t,[]),e.get(t).push(a)}),e},[h]),v=s.useMemo(()=>h.filter(e=>!e.disabled),[h]);s.useEffect(()=>{const e=a=>{E.current&&!E.current.contains(a.target)&&(w(!1),B(""))};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]),s.useEffect(()=>{if(!C.current||d<0)return;const e=C.current.querySelector('[data-active="true"]');e==null||e.scrollIntoView({block:c.SCROLL_BLOCK})},[d]);const L=s.useCallback(()=>{p||(w(!0),o(0),setTimeout(()=>{var e;return(e=q.current)==null?void 0:e.focus()},0))},[p]),k=s.useCallback(()=>{var e;w(!1),B(""),o(-1),(e=H.current)==null||e.focus()},[]),I=s.useCallback(e=>{let a;if(b)if(l.includes(e))a=l.filter(t=>t!==e);else{if(j&&l.length>=j)return;a=[...l,e]}else a=[e],k();y||P(a),i==null||i(b?a:a[0]??"")},[l,b,y,j,i,k]),D=s.useCallback(e=>{const a=l.filter(t=>t!==e);y||P(a),i==null||i(b?a:a[0]??"")},[l,b,y,i]),W=s.useCallback(e=>{if(!g){(e.key==="ArrowDown"||e.key==="ArrowUp"||e.key==="Enter"||e.key===" ")&&(e.preventDefault(),L());return}switch(e.key){case"ArrowDown":e.preventDefault(),o(a=>Math.min(a+1,v.length-1));break;case"ArrowUp":e.preventDefault(),o(a=>Math.max(a-1,0));break;case"Enter":case" ":e.preventDefault(),d>=0&&v[d]&&I(v[d].value);break;case"Escape":e.preventDefault(),k();break;case"Backspace":x===""&&b&&l.length>0&&D(l[l.length-1]);break;case"Home":e.preventDefault(),o(0);break;case"End":e.preventDefault(),o(v.length-1);break}},[g,d,v,I,k,L,x,b,l,D]),te=s.useCallback(e=>l.includes(e),[l]),u=l.map(e=>_.find(a=>a.value===e)).filter(Boolean),se=!!S,le=c.TRIGGER_SIZE_CLASSES[m],be=c.OPTION_SIZE_CLASSES[m],ne=c.TAG_SIZE_CLASSES[m],F=c.ICON_SIZE[m],ce=Y*c.OPTION_HEIGHT[m];let A=-1;return r.jsxs("div",{ref:E,className:n.cn("Bear-NavigableSelect","bear-relative bear-flex bear-flex-col bear-gap-1.5",X&&"bear-w-full",J),style:Q,"data-testid":ee,children:[O&&r.jsx("label",{className:"Bear-NavigableSelect__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300",children:O}),r.jsxs("button",{ref:H,type:"button",disabled:p,onClick:()=>g?k():L(),onKeyDown:W,className:n.cn("Bear-NavigableSelect__trigger","bear-flex bear-items-center bear-justify-between bear-w-full","bear-rounded-lg bear-border bear-text-left bear-outline-none","bear-transition-all bear-duration-200","bear-bg-white dark:bear-bg-gray-900","bear-text-gray-900 dark:bear-text-white",se?"bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20":"bear-border-gray-300 dark:bear-border-gray-600 focus:bear-border-[var(--bear-primary-500)] focus:bear-ring-2 focus:bear-ring-[var(--bear-primary-500)]/20",p&&"bear-opacity-50 bear-cursor-not-allowed",le),"aria-haspopup":"listbox","aria-expanded":g,children:[r.jsxs("span",{className:"Bear-NavigableSelect__value bear-flex bear-items-center bear-gap-1.5 bear-flex-wrap bear-flex-1 bear-min-w-0 bear-overflow-hidden",children:[b&&u.length>0&&u.map(e=>r.jsxs("span",{className:n.cn("Bear-NavigableSelect__tag","bear-inline-flex bear-items-center bear-gap-1 bear-rounded-md","bear-bg-[var(--bear-primary-100,#fce7f3)] dark:bear-bg-[var(--bear-primary-900,#831843)]/30","bear-text-[var(--bear-primary-700,#be185d)] dark:bear-text-[var(--bear-primary-300,#f9a8d4)]",ne),children:[e.label,!p&&r.jsx("button",{type:"button",onClick:a=>{a.stopPropagation(),D(e.value)},className:"bear-ml-0.5 hover:bear-opacity-70","aria-label":`Remove ${e.label}`,children:"×"})]},e.value)),!b&&u.length>0&&r.jsxs("span",{className:"bear-truncate",children:[u[0].icon&&r.jsx("span",{className:"bear-mr-1.5",children:u[0].icon}),u[0].label]}),u.length===0&&r.jsx("span",{className:"bear-text-gray-400 dark:bear-text-gray-500",children:z})]}),r.jsx("svg",{className:n.cn(F,"bear-text-gray-400 dark:bear-text-gray-500 bear-transition-transform bear-shrink-0 bear-ml-2",g&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19 9l-7 7-7-7"})})]}),g&&r.jsxs("div",{className:n.cn("Bear-NavigableSelect__dropdown","bear-absolute bear-top-full bear-left-0 bear-w-full bear-mt-1","bear-bg-white dark:bear-bg-gray-900","bear-border bear-border-gray-200 dark:bear-border-gray-700","bear-rounded-lg bear-shadow-lg bear-overflow-hidden"),style:{zIndex:c.DROPDOWN_Z_INDEX},children:[K&&r.jsxs("div",{className:"Bear-NavigableSelect__search bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-border-b bear-border-gray-200 dark:bear-border-gray-700",children:[r.jsxs("svg",{className:"bear-w-4 bear-h-4 bear-text-gray-400 dark:bear-text-gray-500 bear-shrink-0",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:[r.jsx("circle",{cx:"11",cy:"11",r:"8"}),r.jsx("line",{x1:"21",y1:"21",x2:"16.65",y2:"16.65"})]}),r.jsx("input",{ref:q,type:"text",value:x,onChange:e=>{B(e.target.value),o(0)},onKeyDown:W,placeholder:"Type to search...",className:n.cn("Bear-NavigableSelect__input","bear-flex-1 bear-bg-transparent bear-outline-none bear-text-sm","bear-text-gray-900 dark:bear-text-white","placeholder:bear-text-gray-400 dark:placeholder:bear-text-gray-500"),autoComplete:"off",spellCheck:!1})]}),r.jsxs("div",{ref:C,className:"Bear-NavigableSelect__list bear-overflow-y-auto bear-py-1",style:{maxHeight:ce},role:"listbox","aria-multiselectable":b,children:[h.length===0&&r.jsx("div",{className:"Bear-NavigableSelect__empty bear-px-3 bear-py-4 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-gray-400",children:$}),Array.from(ae.entries()).map(([e,a])=>r.jsxs("div",{className:"Bear-NavigableSelect__group",children:[e&&r.jsx("div",{className:"Bear-NavigableSelect__group-title bear-px-3 bear-py-1 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-gray-400 dark:bear-text-gray-500",children:e}),a.map(t=>{const N=t.disabled,U=!N;U&&A++;const T=A===d,f=te(t.value),ie=A;return r.jsxs("button",{type:"button",disabled:N,className:n.cn("Bear-NavigableSelect__option","bear-w-full bear-flex bear-items-center bear-gap-2.5 bear-text-left bear-cursor-pointer","bear-transition-colors bear-duration-100",be,T&&"bear-bg-gray-100 dark:bear-bg-gray-800",f&&!T&&"bear-bg-[var(--bear-primary-50,#fdf2f8)] dark:bear-bg-[var(--bear-primary-950,#500724)]/20",N&&"bear-opacity-40 bear-cursor-not-allowed"),"data-active":T,onMouseEnter:()=>{U&&o(ie)},onClick:()=>{N||I(t.value)},role:"option","aria-selected":f,"aria-disabled":N,children:[b&&r.jsx("span",{className:n.cn("Bear-NavigableSelect__checkbox","bear-flex bear-items-center bear-justify-center bear-w-4 bear-h-4 bear-rounded bear-border bear-shrink-0","bear-transition-colors",f?"bear-bg-[var(--bear-primary-500)] bear-border-[var(--bear-primary-500)] bear-text-white":"bear-border-gray-300 dark:bear-border-gray-600"),children:f&&r.jsx("svg",{className:"bear-w-3 bear-h-3",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:3,children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 13l4 4L19 7"})})}),t.icon&&r.jsx("span",{className:"Bear-NavigableSelect__option-icon bear-shrink-0 bear-text-gray-500 dark:bear-text-gray-400",children:t.icon}),r.jsxs("div",{className:"Bear-NavigableSelect__option-body bear-flex-1 bear-min-w-0",children:[r.jsx("div",{className:n.cn("Bear-NavigableSelect__option-label bear-truncate",f?"bear-text-[var(--bear-primary-700,#be185d)] dark:bear-text-[var(--bear-primary-300,#f9a8d4)] bear-font-medium":"bear-text-gray-900 dark:bear-text-white"),children:t.label}),t.description&&r.jsx("div",{className:"Bear-NavigableSelect__option-desc bear-text-xs bear-text-gray-500 dark:bear-text-gray-400 bear-truncate",children:t.description})]}),!b&&f&&r.jsx("svg",{className:n.cn(F,"bear-text-[var(--bear-primary-500)] bear-shrink-0"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5 13l4 4L19 7"})})]},t.value)})]},e))]}),r.jsxs("div",{className:"Bear-NavigableSelect__footer bear-flex bear-items-center bear-gap-3 bear-px-3 bear-py-1.5 bear-border-t bear-border-gray-200 dark:bear-border-gray-700 bear-text-[11px] bear-text-gray-400 dark:bear-text-gray-500",children:[r.jsxs("span",{className:"bear-flex bear-items-center bear-gap-1",children:[r.jsx("kbd",{className:"bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700",children:"↑↓"}),"navigate"]}),r.jsxs("span",{className:"bear-flex bear-items-center bear-gap-1",children:[r.jsx("kbd",{className:"bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700",children:"↵"}),"select"]}),r.jsxs("span",{className:"bear-flex bear-items-center bear-gap-1",children:[r.jsx("kbd",{className:"bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700",children:"esc"}),"close"]})]})]}),(M||S)&&r.jsx("p",{className:n.cn("Bear-NavigableSelect__helper bear-text-xs",S?"bear-text-red-500":"bear-text-gray-500 dark:bear-text-gray-400"),children:S||M})]})};exports.NavigableSelect=oe;

package/dist/components/NavigableSelect/NavigableSelect.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="Select an option...",a="No options found",r=8,t={sm:32,md:40,lg:48},b={sm:"bear-h-8 bear-text-sm bear-px-2.5",md:"bear-h-10 bear-text-sm bear-px-3",lg:"bear-h-12 bear-text-base bear-px-4"},E={sm:"bear-px-2.5 bear-py-1.5 bear-text-sm",md:"bear-px-3 bear-py-2 bear-text-sm",lg:"bear-px-4 bear-py-2.5 bear-text-base"},S={sm:"bear-text-xs bear-px-1.5 bear-py-0.5",md:"bear-text-xs bear-px-2 bear-py-0.5",lg:"bear-text-sm bear-px-2 bear-py-1"},_=50,s="nearest",I={sm:"bear-w-3.5 bear-h-3.5",md:"bear-w-4 bear-h-4",lg:"bear-w-5 bear-h-5"};exports.DEFAULT_EMPTY_TEXT=a;exports.DEFAULT_MAX_VISIBLE=r;exports.DEFAULT_PLACEHOLDER=e;exports.DROPDOWN_Z_INDEX=_;exports.ICON_SIZE=I;exports.OPTION_HEIGHT=t;exports.OPTION_SIZE_CLASSES=E;exports.SCROLL_BLOCK=s;exports.TAG_SIZE_CLASSES=S;exports.TRIGGER_SIZE_CLASSES=b;

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

@@ -0,0 +1,23 @@
+import { NavigableSelectSize } from './NavigableSelect.types';
+/** Default placeholder */
+export declare const DEFAULT_PLACEHOLDER = "Select an option...";
+/** Default empty text */
+export declare const DEFAULT_EMPTY_TEXT = "No options found";
+/** Default max visible options */
+export declare const DEFAULT_MAX_VISIBLE = 8;
+/** Option height per size (approx pixels for scroll calculation) */
+export declare const OPTION_HEIGHT: Record<NavigableSelectSize, number>;
+/** Trigger button size classes */
+export declare const TRIGGER_SIZE_CLASSES: Record<NavigableSelectSize, string>;
+/** Option size classes */
+export declare const OPTION_SIZE_CLASSES: Record<NavigableSelectSize, string>;
+/** Tag size classes (multi-select chips) */
+export declare const TAG_SIZE_CLASSES: Record<NavigableSelectSize, string>;
+/** Dropdown z-index */
+export declare const DROPDOWN_Z_INDEX = 50;
+/** Search input debounce delay */
+export declare const SEARCH_DEBOUNCE = 0;
+/** Scroll into view block setting */
+export declare const SCROLL_BLOCK: "nearest";
+/** Icon size per component size */
+export declare const ICON_SIZE: Record<NavigableSelectSize, string>;

package/dist/components/NavigableSelect/NavigableSelect.const.js

@@ -0,0 +1,33 @@
+const e = "Select an option...", a = "No options found", b = 8, r = {
+  sm: 32,
+  md: 40,
+  lg: 48
+}, t = {
+  sm: "bear-h-8 bear-text-sm bear-px-2.5",
+  md: "bear-h-10 bear-text-sm bear-px-3",
+  lg: "bear-h-12 bear-text-base bear-px-4"
+}, s = {
+  sm: "bear-px-2.5 bear-py-1.5 bear-text-sm",
+  md: "bear-px-3 bear-py-2 bear-text-sm",
+  lg: "bear-px-4 bear-py-2.5 bear-text-base"
+}, x = {
+  sm: "bear-text-xs bear-px-1.5 bear-py-0.5",
+  md: "bear-text-xs bear-px-2 bear-py-0.5",
+  lg: "bear-text-sm bear-px-2 bear-py-1"
+}, p = 50, E = "nearest", o = {
+  sm: "bear-w-3.5 bear-h-3.5",
+  md: "bear-w-4 bear-h-4",
+  lg: "bear-w-5 bear-h-5"
+};
+export {
+  a as DEFAULT_EMPTY_TEXT,
+  b as DEFAULT_MAX_VISIBLE,
+  e as DEFAULT_PLACEHOLDER,
+  p as DROPDOWN_Z_INDEX,
+  o as ICON_SIZE,
+  r as OPTION_HEIGHT,
+  s as OPTION_SIZE_CLASSES,
+  E as SCROLL_BLOCK,
+  x as TAG_SIZE_CLASSES,
+  t as TRIGGER_SIZE_CLASSES
+};

package/dist/components/NavigableSelect/NavigableSelect.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { NavigableSelectProps } from './NavigableSelect.types';
+/**
+ * NavigableSelect - Keyboard-navigable select with single and multi-select.
+ * Arrow up/down navigation, Enter to select, type-ahead search, and theming via BearProvider.
+ */
+export declare const NavigableSelect: FC<NavigableSelectProps>;

package/dist/components/NavigableSelect/NavigableSelect.js

@@ -0,0 +1,361 @@
+import { jsxs as l, jsx as a } from "react/jsx-runtime";
+import { useState as S, useRef as B, useMemo as V, useEffect as X, useCallback as f } from "react";
+import { cn as s } from "../../utils/cn.js";
+import { DEFAULT_PLACEHOLDER as pe, DEFAULT_MAX_VISIBLE as fe, DEFAULT_EMPTY_TEXT as me, SCROLL_BLOCK as xe, TAG_SIZE_CLASSES as ye, ICON_SIZE as he, TRIGGER_SIZE_CLASSES as ve, DROPDOWN_Z_INDEX as ke, OPTION_SIZE_CLASSES as Ne, OPTION_HEIGHT as _e } from "./NavigableSelect.const.js";
+const Le = (q) => {
+  const {
+    options: _,
+    value: j,
+    defaultValue: Y,
+    onChange: o,
+    multiple: n = !1,
+    searchable: $ = !0,
+    placeholder: J = pe,
+    label: H,
+    helperText: P,
+    error: w,
+    disabled: m = !1,
+    size: x = "md",
+    fullWidth: Q = !1,
+    maxVisible: ee = fe,
+    maxSelections: E,
+    emptyText: re = me,
+    className: ae,
+    style: te,
+    testId: le
+  } = q, y = j !== void 0, W = (e) => e === void 0 ? [] : Array.isArray(e) ? e : [e], [be, F] = S(W(Y)), [g, L] = S(!1), [c, i] = S(-1), [u, C] = S(""), I = B(null), D = B(null), U = B(null), Z = B(null), b = y ? W(j) : be, h = V(() => {
+    if (!u) return _;
+    const e = u.toLowerCase();
+    return _.filter(
+      (r) => {
+        var t;
+        return r.label.toLowerCase().includes(e) || ((t = r.description) == null ? void 0 : t.toLowerCase().includes(e));
+      }
+    );
+  }, [_, u]), ne = V(() => {
+    const e = /* @__PURE__ */ new Map();
+    return h.forEach((r) => {
+      const t = r.group || "";
+      e.has(t) || e.set(t, []), e.get(t).push(r);
+    }), e;
+  }, [h]), v = V(() => h.filter((e) => !e.disabled), [h]);
+  X(() => {
+    const e = (r) => {
+      I.current && !I.current.contains(r.target) && (L(!1), C(""));
+    };
+    return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
+  }, []), X(() => {
+    if (!D.current || c < 0) return;
+    const e = D.current.querySelector('[data-active="true"]');
+    e == null || e.scrollIntoView({ block: xe });
+  }, [c]);
+  const A = f(() => {
+    m || (L(!0), i(0), setTimeout(() => {
+      var e;
+      return (e = U.current) == null ? void 0 : e.focus();
+    }, 0));
+  }, [m]), k = f(() => {
+    var e;
+    L(!1), C(""), i(-1), (e = Z.current) == null || e.focus();
+  }, []), T = f(
+    (e) => {
+      let r;
+      if (n)
+        if (b.includes(e))
+          r = b.filter((t) => t !== e);
+        else {
+          if (E && b.length >= E) return;
+          r = [...b, e];
+        }
+      else
+        r = [e], k();
+      y || F(r), o == null || o(n ? r : r[0] ?? "");
+    },
+    [b, n, y, E, o, k]
+  ), O = f(
+    (e) => {
+      const r = b.filter((t) => t !== e);
+      y || F(r), o == null || o(n ? r : r[0] ?? "");
+    },
+    [b, n, y, o]
+  ), G = f(
+    (e) => {
+      if (!g) {
+        (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") && (e.preventDefault(), A());
+        return;
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault(), i((r) => Math.min(r + 1, v.length - 1));
+          break;
+        case "ArrowUp":
+          e.preventDefault(), i((r) => Math.max(r - 1, 0));
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault(), c >= 0 && v[c] && T(v[c].value);
+          break;
+        case "Escape":
+          e.preventDefault(), k();
+          break;
+        case "Backspace":
+          u === "" && n && b.length > 0 && O(b[b.length - 1]);
+          break;
+        case "Home":
+          e.preventDefault(), i(0);
+          break;
+        case "End":
+          e.preventDefault(), i(v.length - 1);
+          break;
+      }
+    },
+    [g, c, v, T, k, A, u, n, b, O]
+  ), se = f((e) => b.includes(e), [b]), d = b.map((e) => _.find((r) => r.value === e)).filter(Boolean), oe = !!w, ie = ve[x], ce = Ne[x], de = ye[x], K = he[x], ge = ee * _e[x];
+  let R = -1;
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      ref: I,
+      className: s(
+        "Bear-NavigableSelect",
+        "bear-relative bear-flex bear-flex-col bear-gap-1.5",
+        Q && "bear-w-full",
+        ae
+      ),
+      style: te,
+      "data-testid": le,
+      children: [
+        H && /* @__PURE__ */ a("label", { className: "Bear-NavigableSelect__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300", children: H }),
+        /* @__PURE__ */ l(
+          "button",
+          {
+            ref: Z,
+            type: "button",
+            disabled: m,
+            onClick: () => g ? k() : A(),
+            onKeyDown: G,
+            className: s(
+              "Bear-NavigableSelect__trigger",
+              "bear-flex bear-items-center bear-justify-between bear-w-full",
+              "bear-rounded-lg bear-border bear-text-left bear-outline-none",
+              "bear-transition-all bear-duration-200",
+              "bear-bg-white dark:bear-bg-gray-900",
+              "bear-text-gray-900 dark:bear-text-white",
+              oe ? "bear-border-red-500 focus:bear-ring-2 focus:bear-ring-red-500/20" : "bear-border-gray-300 dark:bear-border-gray-600 focus:bear-border-[var(--bear-primary-500)] focus:bear-ring-2 focus:bear-ring-[var(--bear-primary-500)]/20",
+              m && "bear-opacity-50 bear-cursor-not-allowed",
+              ie
+            ),
+            "aria-haspopup": "listbox",
+            "aria-expanded": g,
+            children: [
+              /* @__PURE__ */ l("span", { className: "Bear-NavigableSelect__value bear-flex bear-items-center bear-gap-1.5 bear-flex-wrap bear-flex-1 bear-min-w-0 bear-overflow-hidden", children: [
+                n && d.length > 0 && d.map((e) => /* @__PURE__ */ l(
+                  "span",
+                  {
+                    className: s(
+                      "Bear-NavigableSelect__tag",
+                      "bear-inline-flex bear-items-center bear-gap-1 bear-rounded-md",
+                      "bear-bg-[var(--bear-primary-100,#fce7f3)] dark:bear-bg-[var(--bear-primary-900,#831843)]/30",
+                      "bear-text-[var(--bear-primary-700,#be185d)] dark:bear-text-[var(--bear-primary-300,#f9a8d4)]",
+                      de
+                    ),
+                    children: [
+                      e.label,
+                      !m && /* @__PURE__ */ a(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: (r) => {
+                            r.stopPropagation(), O(e.value);
+                          },
+                          className: "bear-ml-0.5 hover:bear-opacity-70",
+                          "aria-label": `Remove ${e.label}`,
+                          children: "×"
+                        }
+                      )
+                    ]
+                  },
+                  e.value
+                )),
+                !n && d.length > 0 && /* @__PURE__ */ l("span", { className: "bear-truncate", children: [
+                  d[0].icon && /* @__PURE__ */ a("span", { className: "bear-mr-1.5", children: d[0].icon }),
+                  d[0].label
+                ] }),
+                d.length === 0 && /* @__PURE__ */ a("span", { className: "bear-text-gray-400 dark:bear-text-gray-500", children: J })
+              ] }),
+              /* @__PURE__ */ a(
+                "svg",
+                {
+                  className: s(
+                    K,
+                    "bear-text-gray-400 dark:bear-text-gray-500 bear-transition-transform bear-shrink-0 bear-ml-2",
+                    g && "bear-rotate-180"
+                  ),
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+                }
+              )
+            ]
+          }
+        ),
+        g && /* @__PURE__ */ l(
+          "div",
+          {
+            className: s(
+              "Bear-NavigableSelect__dropdown",
+              "bear-absolute bear-top-full bear-left-0 bear-w-full bear-mt-1",
+              "bear-bg-white dark:bear-bg-gray-900",
+              "bear-border bear-border-gray-200 dark:bear-border-gray-700",
+              "bear-rounded-lg bear-shadow-lg bear-overflow-hidden"
+            ),
+            style: { zIndex: ke },
+            children: [
+              $ && /* @__PURE__ */ l("div", { className: "Bear-NavigableSelect__search bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-border-b bear-border-gray-200 dark:bear-border-gray-700", children: [
+                /* @__PURE__ */ l(
+                  "svg",
+                  {
+                    className: "bear-w-4 bear-h-4 bear-text-gray-400 dark:bear-text-gray-500 bear-shrink-0",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    children: [
+                      /* @__PURE__ */ a("circle", { cx: "11", cy: "11", r: "8" }),
+                      /* @__PURE__ */ a("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  "input",
+                  {
+                    ref: U,
+                    type: "text",
+                    value: u,
+                    onChange: (e) => {
+                      C(e.target.value), i(0);
+                    },
+                    onKeyDown: G,
+                    placeholder: "Type to search...",
+                    className: s(
+                      "Bear-NavigableSelect__input",
+                      "bear-flex-1 bear-bg-transparent bear-outline-none bear-text-sm",
+                      "bear-text-gray-900 dark:bear-text-white",
+                      "placeholder:bear-text-gray-400 dark:placeholder:bear-text-gray-500"
+                    ),
+                    autoComplete: "off",
+                    spellCheck: !1
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ l(
+                "div",
+                {
+                  ref: D,
+                  className: "Bear-NavigableSelect__list bear-overflow-y-auto bear-py-1",
+                  style: { maxHeight: ge },
+                  role: "listbox",
+                  "aria-multiselectable": n,
+                  children: [
+                    h.length === 0 && /* @__PURE__ */ a("div", { className: "Bear-NavigableSelect__empty bear-px-3 bear-py-4 bear-text-center bear-text-sm bear-text-gray-500 dark:bear-text-gray-400", children: re }),
+                    Array.from(ne.entries()).map(([e, r]) => /* @__PURE__ */ l("div", { className: "Bear-NavigableSelect__group", children: [
+                      e && /* @__PURE__ */ a("div", { className: "Bear-NavigableSelect__group-title bear-px-3 bear-py-1 bear-text-xs bear-font-semibold bear-uppercase bear-tracking-wider bear-text-gray-400 dark:bear-text-gray-500", children: e }),
+                      r.map((t) => {
+                        const N = t.disabled, z = !N;
+                        z && R++;
+                        const M = R === c, p = se(t.value), ue = R;
+                        return /* @__PURE__ */ l(
+                          "button",
+                          {
+                            type: "button",
+                            disabled: N,
+                            className: s(
+                              "Bear-NavigableSelect__option",
+                              "bear-w-full bear-flex bear-items-center bear-gap-2.5 bear-text-left bear-cursor-pointer",
+                              "bear-transition-colors bear-duration-100",
+                              ce,
+                              M && "bear-bg-gray-100 dark:bear-bg-gray-800",
+                              p && !M && "bear-bg-[var(--bear-primary-50,#fdf2f8)] dark:bear-bg-[var(--bear-primary-950,#500724)]/20",
+                              N && "bear-opacity-40 bear-cursor-not-allowed"
+                            ),
+                            "data-active": M,
+                            onMouseEnter: () => {
+                              z && i(ue);
+                            },
+                            onClick: () => {
+                              N || T(t.value);
+                            },
+                            role: "option",
+                            "aria-selected": p,
+                            "aria-disabled": N,
+                            children: [
+                              n && /* @__PURE__ */ a(
+                                "span",
+                                {
+                                  className: s(
+                                    "Bear-NavigableSelect__checkbox",
+                                    "bear-flex bear-items-center bear-justify-center bear-w-4 bear-h-4 bear-rounded bear-border bear-shrink-0",
+                                    "bear-transition-colors",
+                                    p ? "bear-bg-[var(--bear-primary-500)] bear-border-[var(--bear-primary-500)] bear-text-white" : "bear-border-gray-300 dark:bear-border-gray-600"
+                                  ),
+                                  children: p && /* @__PURE__ */ a("svg", { className: "bear-w-3 bear-h-3", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
+                                }
+                              ),
+                              t.icon && /* @__PURE__ */ a("span", { className: "Bear-NavigableSelect__option-icon bear-shrink-0 bear-text-gray-500 dark:bear-text-gray-400", children: t.icon }),
+                              /* @__PURE__ */ l("div", { className: "Bear-NavigableSelect__option-body bear-flex-1 bear-min-w-0", children: [
+                                /* @__PURE__ */ a("div", { className: s(
+                                  "Bear-NavigableSelect__option-label bear-truncate",
+                                  p ? "bear-text-[var(--bear-primary-700,#be185d)] dark:bear-text-[var(--bear-primary-300,#f9a8d4)] bear-font-medium" : "bear-text-gray-900 dark:bear-text-white"
+                                ), children: t.label }),
+                                t.description && /* @__PURE__ */ a("div", { className: "Bear-NavigableSelect__option-desc bear-text-xs bear-text-gray-500 dark:bear-text-gray-400 bear-truncate", children: t.description })
+                              ] }),
+                              !n && p && /* @__PURE__ */ a(
+                                "svg",
+                                {
+                                  className: s(K, "bear-text-[var(--bear-primary-500)] bear-shrink-0"),
+                                  fill: "none",
+                                  viewBox: "0 0 24 24",
+                                  stroke: "currentColor",
+                                  strokeWidth: 2,
+                                  children: /* @__PURE__ */ a("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" })
+                                }
+                              )
+                            ]
+                          },
+                          t.value
+                        );
+                      })
+                    ] }, e))
+                  ]
+                }
+              ),
+              /* @__PURE__ */ l("div", { className: "Bear-NavigableSelect__footer bear-flex bear-items-center bear-gap-3 bear-px-3 bear-py-1.5 bear-border-t bear-border-gray-200 dark:bear-border-gray-700 bear-text-[11px] bear-text-gray-400 dark:bear-text-gray-500", children: [
+                /* @__PURE__ */ l("span", { className: "bear-flex bear-items-center bear-gap-1", children: [
+                  /* @__PURE__ */ a("kbd", { className: "bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700", children: "↑↓" }),
+                  "navigate"
+                ] }),
+                /* @__PURE__ */ l("span", { className: "bear-flex bear-items-center bear-gap-1", children: [
+                  /* @__PURE__ */ a("kbd", { className: "bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700", children: "↵" }),
+                  "select"
+                ] }),
+                /* @__PURE__ */ l("span", { className: "bear-flex bear-items-center bear-gap-1", children: [
+                  /* @__PURE__ */ a("kbd", { className: "bear-px-1 bear-rounded bear-bg-gray-100 dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700", children: "esc" }),
+                  "close"
+                ] })
+              ] })
+            ]
+          }
+        ),
+        (P || w) && /* @__PURE__ */ a("p", { className: s(
+          "Bear-NavigableSelect__helper bear-text-xs",
+          w ? "bear-text-red-500" : "bear-text-gray-500 dark:bear-text-gray-400"
+        ), children: w || P })
+      ]
+    }
+  );
+};
+export {
+  Le as NavigableSelect
+};

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

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+export type NavigableSelectSize = 'sm' | 'md' | 'lg';
+export interface NavigableSelectOption {
+    /** Unique option value */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional description */
+    description?: string;
+    /** Optional icon */
+    icon?: ReactNode;
+    /** Whether option is disabled */
+    disabled?: boolean;
+    /** Optional group name */
+    group?: string;
+}
+export interface NavigableSelectProps {
+    /** Available options */
+    options: NavigableSelectOption[];
+    /** Selected value(s) — string for single, string[] for multiple */
+    value?: string | string[];
+    /** Default value (uncontrolled) */
+    defaultValue?: string | string[];
+    /** Called when selection changes */
+    onChange?: (value: string | string[]) => void;
+    /** Allow multiple selections */
+    multiple?: boolean;
+    /** Enable search/filter */
+    searchable?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Label text */
+    label?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Error message */
+    error?: string;
+    /** Whether select is disabled */
+    disabled?: boolean;
+    /** Component size */
+    size?: NavigableSelectSize;
+    /** Whether select is full width */
+    fullWidth?: boolean;
+    /** Maximum visible options before scrolling */
+    maxVisible?: number;
+    /** Maximum selections in multiple mode */
+    maxSelections?: number;
+    /** Empty state text */
+    emptyText?: string;
+    /** Custom class name */
+    className?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+    /** Test ID */
+    testId?: string;
+}

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

@@ -0,0 +1,2 @@
+export { NavigableSelect } from './NavigableSelect';
+export type { NavigableSelectProps, NavigableSelectOption, NavigableSelectSize } from './NavigableSelect.types';

package/dist/components/Progress/Progress.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn.cjs"),m={sm:"bear-h-1.5",md:"bear-h-2.5",lg:"bear-h-4"},f={default:"bear-bg-pink-500",success:"bear-bg-green-500",warning:"bear-bg-yellow-500",danger:"bear-bg-red-500",info:"bear-bg-blue-500"},x=({value:n,max:b=100,size:l="md",color:o="default",showLabel:i=!1,labelPosition:d="outside",striped:r=!1,animated:c=!1,indeterminate:a=!1,className:g,testId:u})=>{const s=Math.min(100,Math.max(0,n/b*100));return e.jsxs("div",{className:t.cn("bear-w-full",g),"data-testid":u,children:[i&&d==="outside"&&e.jsxs("div",{className:"bear-flex bear-justify-between bear-mb-1",children:[e.jsx("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:"Progress"}),e.jsxs("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:[Math.round(s),"%"]})]}),e.jsx("div",{className:t.cn("bear-w-full bear-bg-gray-200 dark:bear-bg-gray-700 bear-rounded-full bear-overflow-hidden",m[l]),children:e.jsx("div",{className:t.cn("bear-h-full bear-rounded-full bear-transition-all bear-duration-300 bear-ease-out","bear-flex bear-items-center bear-justify-center",f[o],r&&"bear-bg-stripes",c&&"bear-animate-stripes",a&&"bear-animate-indeterminate"),style:{width:a?"50%":`${s}%`,backgroundSize:r?"1rem 1rem":void 0,backgroundImage:r?"linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent)":void 0},role:"progressbar","aria-valuenow":a?void 0:n,"aria-valuemin":0,"aria-valuemax":b,children:i&&d==="inside"&&l==="lg"&&!a&&e.jsxs("span",{className:"bear-text-xs bear-font-medium bear-text-white",children:[Math.round(s),"%"]})})})]})};exports.Progress=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../utils/cn.cjs");require("react");const m={sm:"bear-h-1.5",md:"bear-h-2.5",lg:"bear-h-4"},f={default:"bear-bg-pink-500",success:"bear-bg-green-500",warning:"bear-bg-yellow-500",danger:"bear-bg-red-500",info:"bear-bg-blue-500"},x=({value:n,max:b=100,size:l="md",color:o="default",showLabel:i=!1,labelPosition:d="outside",striped:r=!1,animated:c=!1,indeterminate:a=!1,className:g,testId:u})=>{const s=Math.min(100,Math.max(0,n/b*100));return e.jsxs("div",{className:t.cn("bear-w-full",g),"data-testid":u,children:[i&&d==="outside"&&e.jsxs("div",{className:"bear-flex bear-justify-between bear-mb-1",children:[e.jsx("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:"Progress"}),e.jsxs("span",{className:"bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200",children:[Math.round(s),"%"]})]}),e.jsx("div",{className:t.cn("bear-w-full bear-bg-gray-200 dark:bear-bg-gray-700 bear-rounded-full bear-overflow-hidden",m[l]),children:e.jsx("div",{className:t.cn("bear-h-full bear-rounded-full bear-transition-all bear-duration-300 bear-ease-out","bear-flex bear-items-center bear-justify-center",f[o],r&&"bear-bg-stripes",c&&"bear-animate-stripes",a&&"bear-animate-indeterminate"),style:{width:a?"50%":`${s}%`,backgroundSize:r?"1rem 1rem":void 0,backgroundImage:r?"linear-gradient(45deg, rgba(255,255,255,.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.15) 50%, rgba(255,255,255,.15) 75%, transparent 75%, transparent)":void 0},role:"progressbar","aria-valuenow":a?void 0:n,"aria-valuemin":0,"aria-valuemax":b,children:i&&d==="inside"&&l==="lg"&&!a&&e.jsxs("span",{className:"bear-text-xs bear-font-medium bear-text-white",children:[Math.round(s),"%"]})})})]})};exports.Progress=x;

package/dist/components/Progress/Progress.js

@@ -1,5 +1,6 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
 import { cn as b } from "../../utils/cn.js";
+import "react";
 const f = {
   sm: "bear-h-1.5",
   md: "bear-h-2.5",
@@ -10,7 +11,7 @@ const f = {
   warning: "bear-bg-yellow-500",
   danger: "bear-bg-red-500",
   info: "bear-bg-blue-500"
-}, v = ({
+}, y = ({
   value: n,
   max: l = 100,
   size: d = "md",
@@ -70,5 +71,5 @@ const f = {
   ] });
 };
 export {
-  v as Progress
+  y as Progress
 };

package/dist/components/ResizablePanel/ResizablePanel.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react"),e=require("./ResizablePanel.const.cjs"),v=require("./ResizablePanel.utils.cjs"),_=require("../../utils/cn.cjs"),L=P=>{const{first:I,second:N,direction:c=e.DEFAULT_DIRECTION,defaultSize:R=e.DEFAULT_FIRST_SIZE,minSize:d=e.MIN_SIZE,maxSize:b=e.MAX_SIZE,onResize:s,className:z,testId:T}=P,[t,g]=l.useState(R),u=l.useRef(null),h=l.useCallback(r=>v.clampSize(r,d,b),[d,b]),S=l.useCallback(r=>{var m;r.preventDefault();const n=r.target;(m=n.setPointerCapture)==null||m.call(n,r.pointerId);const E=i=>{if(!u.current)return;const D=u.current.getBoundingClientRect(),y=v.getResizePercentage(D,c,i.clientX,i.clientY),f=h(y);g(f),s==null||s(f)},w=()=>{var i;(i=n.releasePointerCapture)==null||i.call(n,r.pointerId),window.removeEventListener(e.EVENT_POINTER_MOVE,E),window.removeEventListener(e.EVENT_POINTER_UP,w)};window.addEventListener(e.EVENT_POINTER_MOVE,E),window.addEventListener(e.EVENT_POINTER_UP,w)},[c,h,s]),a=c==="horizontal",p=a?{width:`${t}%`,minWidth:0}:{height:`${t}%`,minHeight:0},x=a?{width:`${100-t}%`,minWidth:0}:{height:`${100-t}%`,minHeight:0};return o.jsxs("div",{ref:u,"data-testid":T,className:_.cn("Bear-ResizablePanel bear-flex bear-w-full bear-h-full bear-overflow-hidden",a?"bear-flex-row":"bear-flex-col",z),children:[o.jsx("div",{className:"bear-overflow-auto bear-shrink-0",style:p,children:I}),o.jsx("div",{role:"separator","aria-valuenow":t,"aria-valuemin":d,"aria-valuemax":b,tabIndex:0,onPointerDown:S,className:_.cn("Bear-ResizablePanel__handle bear-shrink-0 bear-bg-gray-200 dark:bear-bg-gray-700 hover:bear-bg-pink-500/30 bear-transition-colors bear-cursor-col-resize",a?"bear-w-1.5":"bear-h-1.5 bear-w-full bear-cursor-row-resize"),style:a?{width:e.HANDLE_WIDTH}:{height:e.HANDLE_WIDTH}}),o.jsx("div",{className:"bear-overflow-auto bear-shrink-0 bear-flex-1",style:x,children:N})]})};exports.ResizablePanel=L;

package/dist/components/ResizablePanel/ResizablePanel.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=50,_=10,T=90,I=6,o="horizontal",t="pointermove",N="pointerup",n=100;exports.DEFAULT_DIRECTION=o;exports.DEFAULT_FIRST_SIZE=E;exports.EVENT_POINTER_MOVE=t;exports.EVENT_POINTER_UP=N;exports.HANDLE_WIDTH=I;exports.MAX_SIZE=T;exports.MIN_SIZE=_;exports.PERCENTAGE_SCALE=n;

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

@@ -0,0 +1,11 @@
+export declare const DEFAULT_FIRST_SIZE = 50;
+export declare const MIN_SIZE = 10;
+export declare const MAX_SIZE = 90;
+export declare const HANDLE_WIDTH = 6;
+/** Default layout direction */
+export declare const DEFAULT_DIRECTION = "horizontal";
+/** DOM event names for resize listeners */
+export declare const EVENT_POINTER_MOVE = "pointermove";
+export declare const EVENT_POINTER_UP = "pointerup";
+/** Percentage scale for size calculation */
+export declare const PERCENTAGE_SCALE = 100;

package/dist/components/ResizablePanel/ResizablePanel.const.js

@@ -0,0 +1,11 @@
+const E = 50, o = 10, t = 90, n = 6, _ = "horizontal", I = "pointermove", T = "pointerup", c = 100;
+export {
+  _ as DEFAULT_DIRECTION,
+  E as DEFAULT_FIRST_SIZE,
+  I as EVENT_POINTER_MOVE,
+  T as EVENT_POINTER_UP,
+  n as HANDLE_WIDTH,
+  t as MAX_SIZE,
+  o as MIN_SIZE,
+  c as PERCENTAGE_SCALE
+};

package/dist/components/ResizablePanel/ResizablePanel.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { ResizablePanelProps } from './ResizablePanel.types';
+/**
+ * Two-pane resizable layout with a draggable divider.
+ * Supports horizontal and vertical directions; respects min/max size and dark/light theme.
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanel
+ *   first={<Sidebar />}
+ *   second={<Main />}
+ *   direction="horizontal"
+ *   defaultSize={30}
+ * />
+ * ```
+ */
+export declare const ResizablePanel: FC<ResizablePanelProps>;