@forgedevstack/bear 1.2.0 → 1.2.1

package/dist/components/Modal/Modal.js

@@ -1,48 +1,54 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { useCallback as b, useEffect as f } from "react";
-import { createPortal as M } from "react-dom";
+import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { useCallback as h, useEffect as p } from "react";
+import { createPortal as v } from "react-dom";
 import { cn as e } from "../../utils/cn.js";
-import { CloseIcon as O } from "../Icon/icons/navigation.js";
-import { MODAL_BACKDROP_CLASSES as h, MODAL_TITLE_CLASSES as p, MODAL_CLOSE_CLASSES as v, MODAL_HEADER_CLASSES as B, MODAL_BODY_CLASSES as N, MODAL_FOOTER_CLASSES as y, MODAL_SIZE_CLASSES as D, MODAL_CONTAINER_CLASSES as k } from "./Modal.const.js";
-const z = (c) => {
+import { CloseIcon as k } from "../Icon/icons/navigation.js";
+import { MODAL_BACKDROP_CLASSES as y, MODAL_TITLE_CLASSES as N, MODAL_CLOSE_CLASSES as D, MODAL_HEADER_CLASSES as w, MODAL_BODY_CLASSES as x, MODAL_FOOTER_CLASSES as I, MODAL_SIZE_CLASSES as R, MODAL_CONTAINER_CLASSES as T } from "./Modal.const.js";
+const K = (_) => {
   const {
     isOpen: l,
-    onClose: o,
+    onClose: a,
     title: r,
-    children: m,
-    size: _ = "md",
-    showCloseButton: s = !0,
-    closeOnBackdrop: S = !0,
-    closeOnEscape: i = !0,
-    className: E,
+    children: S,
+    size: u = "md",
+    showCloseButton: c = !0,
+    closeOnEscape: s = !0,
+    lockBodyScroll: C = !0,
+    cancelPreventScroll: E = !1,
+    closeOnBackdrop: L = !0,
+    isCancelBackgroundClick: i,
+    className: f,
     footer: n,
-    testId: L,
-    id: u
-  } = c, t = b(
-    (C) => {
-      i && C.key === "Escape" && o();
+    testId: b,
+    id: A
+  } = _, m = C && !E, M = i !== void 0 ? i : L, d = h(
+    (B) => {
+      s && B.key === "Escape" && a();
     },
-    [i, o]
+    [s, a]
   );
-  if (f(() => (l && (document.addEventListener("keydown", t), document.body.style.overflow = "hidden"), () => {
-    document.removeEventListener("keydown", t), document.body.style.overflow = "";
-  }), [l, t]), !l) return null;
-  const A = /* @__PURE__ */ d(
+  if (p(() => {
+    if (l)
+      return document.addEventListener("keydown", d), m && (document.body.style.overflow = "hidden"), () => {
+        document.removeEventListener("keydown", d), document.body.style.overflow = "";
+      };
+  }, [l, d, m]), !l) return null;
+  const O = /* @__PURE__ */ t(
     "div",
     {
-      className: "Bear-Modal bear-fixed bear-inset-0 bear-z-50 bear-flex bear-items-center bear-justify-center",
-      id: u,
-      "data-testid": L,
+      className: "Bear-Modal bear-fixed bear-inset-0 bear-z-[11000] bear-flex bear-items-center bear-justify-center bear-p-4",
+      id: A,
+      "data-testid": b,
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ o(
           "div",
           {
-            className: e("Bear-Modal__backdrop", h),
-            onClick: S ? o : void 0,
+            className: e("Bear-Modal__backdrop", y),
+            onClick: M ? a : void 0,
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ t(
           "div",
           {
             role: "dialog",
@@ -50,40 +56,40 @@ const z = (c) => {
             "aria-labelledby": r ? "modal-title" : void 0,
             className: e(
               "Bear-Modal__container",
-              k,
-              D[_],
-              E
+              T,
+              R[u],
+              f
             ),
             children: [
-              (r || s) && /* @__PURE__ */ d("div", { className: e("Bear-Modal__header", B), children: [
-                r && /* @__PURE__ */ a(
+              (r || c) && /* @__PURE__ */ t("div", { className: e("Bear-Modal__header", w), children: [
+                r && /* @__PURE__ */ o(
                   "h2",
                   {
                     id: "modal-title",
-                    className: e("Bear-Modal__title", p),
+                    className: e("Bear-Modal__title", N),
                     children: r
                   }
                 ),
-                s && /* @__PURE__ */ a(
+                c && /* @__PURE__ */ o(
                   "button",
                   {
-                    onClick: o,
-                    className: e("Bear-Modal__close", v),
+                    onClick: a,
+                    className: e("Bear-Modal__close", D),
                     "aria-label": "Close modal",
-                    children: /* @__PURE__ */ a(O, { className: "bear-w-5 bear-h-5" })
+                    children: /* @__PURE__ */ o(k, { className: "bear-w-5 bear-h-5" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ a("div", { className: e("Bear-Modal__body", N), children: m }),
-              n && /* @__PURE__ */ a("div", { className: e("Bear-Modal__footer", y), children: n })
+              /* @__PURE__ */ o("div", { className: e("Bear-Modal__body", x), children: S }),
+              n && /* @__PURE__ */ o("div", { className: e("Bear-Modal__footer", I), children: n })
             ]
           }
         )
       ]
     }
   );
-  return M(A, document.body);
+  return v(O, document.body);
 };
 export {
-  z as Modal
+  K as Modal
 };

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

@@ -17,6 +17,12 @@ export interface ModalProps {
     closeOnBackdrop?: boolean;
     /** Whether pressing Escape closes modal */
     closeOnEscape?: boolean;
+    /** When false, the document body scroll is not locked while open */
+    lockBodyScroll?: boolean;
+    /** When true, the page behind the modal stays scrollable (same as lockBodyScroll: false) */
+    cancelPreventScroll?: boolean;
+    /** When provided, sets whether clicking the backdrop closes the modal (overrides closeOnBackdrop) */
+    isCancelBackgroundClick?: boolean;
     /** Additional class names for content */
     className?: string;
     /** Footer content */

package/dist/components/MultiSelect/MultiSelect.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),i=require("../../utils/cn.cjs"),z=({options:p,value:w,defaultValue:R=[],onChange:s,placeholder:S="Select options...",label:k,helperText:v,error:u,disabled:b=!1,maxSelections:d,searchable:E=!0,className:O,testId:M})=>{const[f,o]=l.useState(!1),[m,g]=l.useState(""),[V,j]=l.useState(R),x=l.useRef(null),h=l.useRef(null),y=w!==void 0,a=y?w:V;l.useEffect(()=>{const e=r=>{x.current&&!x.current.contains(r.target)&&(o(!1),g(""))};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);const c=p.filter(e=>e.label.toLowerCase().includes(m.toLowerCase())&&!a.includes(e.value)),N=e=>{var n;if(b||d&&a.length>=d)return;const r=[...a,e];y||j(r),s==null||s(r),g(""),(n=h.current)==null||n.focus()},L=e=>{if(b)return;const r=a.filter(n=>n!==e);y||j(r),s==null||s(r)},q=e=>{e.key==="Backspace"&&m===""&&a.length>0&&L(a[a.length-1]),e.key==="Escape"&&(o(!1),g("")),e.key==="Enter"&&c.length>0&&(e.preventDefault(),N(c[0].value))},D=a.map(e=>{var r;return((r=p.find(n=>n.value===e))==null?void 0:r.label)||e});return t.jsxs("div",{className:i.cn("bear-w-full",O),ref:x,"data-testid":M,children:[k&&t.jsx("label",{className:"bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200 bear-mb-1.5",children:k}),t.jsxs("div",{className:i.cn("bear-relative bear-flex bear-flex-wrap bear-items-center bear-gap-1.5 bear-min-h-[42px] bear-px-3 bear-py-2","bear-rounded-lg bear-border bear-bg-white dark:bear-bg-gray-900","bear-transition-colors bear-cursor-text",u?"bear-border-red-500 focus-within:bear-ring-2 focus-within:bear-ring-red-500/20":"bear-border-gray-300 dark:bear-border-gray-600 focus-within:bear-border-amber-500 focus-within:bear-ring-2 focus-within:bear-ring-amber-500/20",b&&"bear-opacity-50 bear-cursor-not-allowed bear-bg-gray-100 dark:bear-bg-gray-800"),onClick:()=>{var e;b||(o(!0),(e=h.current)==null||e.focus())},children:[D.map((e,r)=>t.jsxs("span",{className:"bear-inline-flex bear-items-center bear-gap-1 bear-px-2 bear-py-0.5 bear-text-sm bear-rounded-md bear-bg-amber-100 dark:bear-bg-amber-900/30 bear-text-amber-800 dark:bear-text-amber-200",children:[e,!b&&t.jsx("button",{type:"button",onClick:n=>{n.stopPropagation(),L(a[r])},className:"bear-ml-0.5 bear-text-amber-600 hover:bear-text-amber-800 dark:bear-text-amber-400 dark:hover:bear-text-amber-200",children:"×"})]},a[r])),E&&!b&&t.jsx("input",{ref:h,type:"text",value:m,onChange:e=>{g(e.target.value),o(!0)},onFocus:()=>o(!0),onKeyDown:q,placeholder:a.length===0?S:"",disabled:b||d!==void 0&&a.length>=d,className:"bear-flex-1 bear-min-w-[80px] bear-bg-transparent bear-outline-none bear-text-sm bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400"}),t.jsx("svg",{className:i.cn("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform bear-ml-auto",f&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:t.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]}),f&&!b&&c.length>0&&t.jsx("div",{className:"bear-absolute bear-z-50 bear-w-full bear-mt-1 bear-py-1 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-max-h-60 bear-overflow-auto",children:c.map(e=>t.jsx("button",{type:"button",disabled:e.disabled,onClick:()=>N(e.value),className:i.cn("bear-w-full bear-px-3 bear-py-2 bear-text-left bear-text-sm","hover:bear-bg-amber-50 dark:hover:bear-bg-amber-900/20","bear-text-gray-900 dark:bear-text-white",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),children:e.label},e.value))}),f&&!b&&c.length===0&&m&&t.jsx("div",{className:"bear-absolute bear-z-50 bear-w-full bear-mt-1 bear-py-3 bear-px-4 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-text-sm bear-text-gray-500",children:"No options found"}),(v||u)&&t.jsx("p",{className:i.cn("bear-mt-1.5 bear-text-xs",u?"bear-text-red-500":"bear-text-gray-500 dark:bear-text-gray-400"),children:u||v})]})};exports.MultiSelect=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),s=require("react"),u=require("../../utils/cn.cjs"),q=require("../Portal/Portal.cjs"),z=1e4,F=({options:k,value:j,defaultValue:B=[],onChange:o,placeholder:V="Select options...",label:E,helperText:L,error:f,disabled:b=!1,maxSelections:m,searchable:D=!0,className:_,testId:C})=>{const[i,c]=s.useState(!1),[x,h]=s.useState(""),[K,N]=s.useState(B),R=s.useRef(null),P=s.useRef(null),g=s.useRef(null),w=s.useRef(null),[l,T]=s.useState({top:0,left:0,width:0}),p=j!==void 0,n=p?j:K,d=k.filter(e=>e.label.toLowerCase().includes(x.toLowerCase())&&!n.includes(e.value)),y=i&&!b&&d.length>0,v=i&&!b&&d.length===0&&!!x;s.useEffect(()=>{if(!y&&!v)return;const e=()=>{var t;const r=(t=P.current)==null?void 0:t.getBoundingClientRect();r&&T({top:r.bottom+4,left:Math.max(8,Math.min(r.left,window.innerWidth-r.width-8)),width:Math.max(r.width,160)})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[y,v]),s.useEffect(()=>{if(!i)return;const e=r=>{var O,I;const t=r.target;(O=R.current)!=null&&O.contains(t)||(I=g.current)!=null&&I.contains(t)||(c(!1),h(""))};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[i]);const M=e=>{var t;if(b||m&&n.length>=m)return;const r=[...n,e];p||N(r),o==null||o(r),h(""),(t=w.current)==null||t.focus()},S=e=>{if(b)return;const r=n.filter(t=>t!==e);p||N(r),o==null||o(r)},W=e=>{e.key==="Backspace"&&x===""&&n.length>0&&S(n[n.length-1]),e.key==="Escape"&&(c(!1),h("")),e.key==="Enter"&&d.length>0&&(e.preventDefault(),M(d[0].value))},A=n.map(e=>{var r;return((r=k.find(t=>t.value===e))==null?void 0:r.label)||e});return a.jsxs("div",{className:u.cn("bear-w-full",_),ref:R,"data-testid":C,children:[E&&a.jsx("label",{className:"bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200 bear-mb-1.5",children:E}),a.jsxs("div",{ref:P,className:u.cn("bear-relative bear-flex bear-flex-wrap bear-items-center bear-gap-1.5 bear-min-h-[42px] bear-px-3 bear-py-2","bear-rounded-lg bear-border bear-bg-white dark:bear-bg-gray-900","bear-transition-colors bear-cursor-text",f?"bear-border-red-500 focus-within:bear-ring-2 focus-within:bear-ring-red-500/20":"bear-border-gray-300 dark:bear-border-gray-600 focus-within:bear-border-amber-500 focus-within:bear-ring-2 focus-within:bear-ring-amber-500/20",b&&"bear-opacity-50 bear-cursor-not-allowed bear-bg-gray-100 dark:bear-bg-gray-800"),onClick:()=>{var e;b||(c(!0),(e=w.current)==null||e.focus())},children:[A.map((e,r)=>a.jsxs("span",{className:"bear-inline-flex bear-items-center bear-gap-1 bear-px-2 bear-py-0.5 bear-text-sm bear-rounded-md bear-bg-amber-100 dark:bear-bg-amber-900/30 bear-text-amber-800 dark:bear-text-amber-200",children:[e,!b&&a.jsx("button",{type:"button",onClick:t=>{t.stopPropagation(),S(n[r])},className:"bear-ml-0.5 bear-text-amber-600 hover:bear-text-amber-800 dark:bear-text-amber-400 dark:hover:bear-text-amber-200",children:"×"})]},n[r])),D&&!b&&a.jsx("input",{ref:w,type:"text",value:x,onChange:e=>{h(e.target.value),c(!0)},onFocus:()=>c(!0),onKeyDown:W,placeholder:n.length===0?V:"",disabled:b||m!==void 0&&n.length>=m,className:"bear-flex-1 bear-min-w-[80px] bear-bg-transparent bear-outline-none bear-text-sm bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400"}),a.jsx("svg",{className:u.cn("bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform bear-ml-auto",i&&"bear-rotate-180"),fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:a.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]}),y&&a.jsx(q.Portal,{children:a.jsx("div",{ref:g,className:"bear-fixed bear-py-1 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-max-h-60 bear-overflow-auto",style:{top:l.top,left:l.left,width:l.width,zIndex:z},children:d.map(e=>a.jsx("button",{type:"button",disabled:e.disabled,onClick:()=>M(e.value),className:u.cn("bear-w-full bear-px-3 bear-py-2 bear-text-left bear-text-sm","hover:bear-bg-amber-50 dark:hover:bear-bg-amber-900/20","bear-text-gray-900 dark:bear-text-white",e.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),children:e.label},e.value))})}),v&&a.jsx(q.Portal,{children:a.jsx("div",{ref:g,className:"bear-fixed bear-py-3 bear-px-4 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-text-sm bear-text-gray-500",style:{top:l.top,left:l.left,width:l.width,zIndex:z},children:"No options found"})}),(L||f)&&a.jsx("p",{className:u.cn("bear-mt-1.5 bear-text-xs",f?"bear-text-red-500":"bear-text-gray-500 dark:bear-text-gray-400"),children:f||L})]})};exports.MultiSelect=F;

package/dist/components/MultiSelect/MultiSelect.js

@@ -1,76 +1,95 @@
-import { jsxs as x, jsx as b } from "react/jsx-runtime";
-import { useState as y, useRef as R, useEffect as S } from "react";
-import { cn as i } from "../../utils/cn.js";
-const q = ({
-  options: w,
-  value: k,
-  defaultValue: V = [],
-  onChange: l,
-  placeholder: j = "Select options...",
-  label: v,
-  helperText: N,
-  error: c,
-  disabled: t = !1,
-  maxSelections: d,
-  searchable: D = !0,
-  className: z,
-  testId: B
+import { jsxs as L, jsx as n } from "react/jsx-runtime";
+import { useState as g, useRef as p, useEffect as D } from "react";
+import { cn as c } from "../../utils/cn.js";
+import { Portal as S } from "../Portal/Portal.js";
+const _ = 1e4, X = ({
+  options: E,
+  value: N,
+  defaultValue: C = [],
+  onChange: b,
+  placeholder: K = "Select options...",
+  label: P,
+  helperText: M,
+  error: u,
+  disabled: o = !1,
+  maxSelections: f,
+  searchable: W = !0,
+  className: A,
+  testId: F
 }) => {
-  const [f, o] = y(!1), [u, m] = y(""), [I, L] = y(V), g = R(null), h = R(null), p = k !== void 0, a = p ? k : I;
-  S(() => {
+  const [s, i] = g(!1), [m, h] = g(""), [T, R] = g(C), I = p(null), O = p(null), w = p(null), x = p(null), [l, U] = g({ top: 0, left: 0, width: 0 }), y = N !== void 0, a = y ? N : T, d = E.filter(
+    (e) => e.label.toLowerCase().includes(m.toLowerCase()) && !a.includes(e.value)
+  ), v = s && !o && d.length > 0, k = s && !o && d.length === 0 && !!m;
+  D(() => {
+    if (!v && !k) return;
+    const e = () => {
+      var t;
+      const r = (t = O.current) == null ? void 0 : t.getBoundingClientRect();
+      r && U({
+        top: r.bottom + 4,
+        left: Math.max(8, Math.min(r.left, window.innerWidth - r.width - 8)),
+        width: Math.max(r.width, 160)
+      });
+    };
+    return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+    };
+  }, [v, k]), D(() => {
+    if (!s) return;
     const e = (r) => {
-      g.current && !g.current.contains(r.target) && (o(!1), m(""));
+      var V, j;
+      const t = r.target;
+      (V = I.current) != null && V.contains(t) || (j = w.current) != null && j.contains(t) || (i(!1), h(""));
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
-  }, []);
-  const s = w.filter(
-    (e) => e.label.toLowerCase().includes(u.toLowerCase()) && !a.includes(e.value)
-  ), E = (e) => {
-    var n;
-    if (t || d && a.length >= d) return;
+  }, [s]);
+  const z = (e) => {
+    var t;
+    if (o || f && a.length >= f) return;
     const r = [...a, e];
-    p || L(r), l == null || l(r), m(""), (n = h.current) == null || n.focus();
-  }, O = (e) => {
-    if (t) return;
-    const r = a.filter((n) => n !== e);
-    p || L(r), l == null || l(r);
-  }, K = (e) => {
-    e.key === "Backspace" && u === "" && a.length > 0 && O(a[a.length - 1]), e.key === "Escape" && (o(!1), m("")), e.key === "Enter" && s.length > 0 && (e.preventDefault(), E(s[0].value));
-  }, M = a.map(
+    y || R(r), b == null || b(r), h(""), (t = x.current) == null || t.focus();
+  }, B = (e) => {
+    if (o) return;
+    const r = a.filter((t) => t !== e);
+    y || R(r), b == null || b(r);
+  }, Z = (e) => {
+    e.key === "Backspace" && m === "" && a.length > 0 && B(a[a.length - 1]), e.key === "Escape" && (i(!1), h("")), e.key === "Enter" && d.length > 0 && (e.preventDefault(), z(d[0].value));
+  }, q = a.map(
     (e) => {
       var r;
-      return ((r = w.find((n) => n.value === e)) == null ? void 0 : r.label) || e;
+      return ((r = E.find((t) => t.value === e)) == null ? void 0 : r.label) || e;
     }
   );
-  return /* @__PURE__ */ x("div", { className: i("bear-w-full", z), ref: g, "data-testid": B, children: [
-    v && /* @__PURE__ */ b("label", { className: "bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200 bear-mb-1.5", children: v }),
-    /* @__PURE__ */ x(
+  return /* @__PURE__ */ L("div", { className: c("bear-w-full", A), ref: I, "data-testid": F, children: [
+    P && /* @__PURE__ */ n("label", { className: "bear-block bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-200 bear-mb-1.5", children: P }),
+    /* @__PURE__ */ L(
       "div",
       {
-        className: i(
+        ref: O,
+        className: c(
           "bear-relative bear-flex bear-flex-wrap bear-items-center bear-gap-1.5 bear-min-h-[42px] bear-px-3 bear-py-2",
           "bear-rounded-lg bear-border bear-bg-white dark:bear-bg-gray-900",
           "bear-transition-colors bear-cursor-text",
-          c ? "bear-border-red-500 focus-within:bear-ring-2 focus-within:bear-ring-red-500/20" : "bear-border-gray-300 dark:bear-border-gray-600 focus-within:bear-border-amber-500 focus-within:bear-ring-2 focus-within:bear-ring-amber-500/20",
-          t && "bear-opacity-50 bear-cursor-not-allowed bear-bg-gray-100 dark:bear-bg-gray-800"
+          u ? "bear-border-red-500 focus-within:bear-ring-2 focus-within:bear-ring-red-500/20" : "bear-border-gray-300 dark:bear-border-gray-600 focus-within:bear-border-amber-500 focus-within:bear-ring-2 focus-within:bear-ring-amber-500/20",
+          o && "bear-opacity-50 bear-cursor-not-allowed bear-bg-gray-100 dark:bear-bg-gray-800"
         ),
         onClick: () => {
           var e;
-          t || (o(!0), (e = h.current) == null || e.focus());
+          o || (i(!0), (e = x.current) == null || e.focus());
         },
         children: [
-          M.map((e, r) => /* @__PURE__ */ x(
+          q.map((e, r) => /* @__PURE__ */ L(
             "span",
             {
               className: "bear-inline-flex bear-items-center bear-gap-1 bear-px-2 bear-py-0.5 bear-text-sm bear-rounded-md bear-bg-amber-100 dark:bear-bg-amber-900/30 bear-text-amber-800 dark:bear-text-amber-200",
               children: [
                 e,
-                !t && /* @__PURE__ */ b(
+                !o && /* @__PURE__ */ n(
                   "button",
                   {
                     type: "button",
-                    onClick: (n) => {
-                      n.stopPropagation(), O(a[r]);
+                    onClick: (t) => {
+                      t.stopPropagation(), B(a[r]);
                     },
                     className: "bear-ml-0.5 bear-text-amber-600 hover:bear-text-amber-800 dark:bear-text-amber-400 dark:hover:bear-text-amber-200",
                     children: "×"
@@ -80,61 +99,87 @@ const q = ({
             },
             a[r]
           )),
-          D && !t && /* @__PURE__ */ b(
+          W && !o && /* @__PURE__ */ n(
             "input",
             {
-              ref: h,
+              ref: x,
               type: "text",
-              value: u,
+              value: m,
               onChange: (e) => {
-                m(e.target.value), o(!0);
+                h(e.target.value), i(!0);
               },
-              onFocus: () => o(!0),
-              onKeyDown: K,
-              placeholder: a.length === 0 ? j : "",
-              disabled: t || d !== void 0 && a.length >= d,
+              onFocus: () => i(!0),
+              onKeyDown: Z,
+              placeholder: a.length === 0 ? K : "",
+              disabled: o || f !== void 0 && a.length >= f,
               className: "bear-flex-1 bear-min-w-[80px] bear-bg-transparent bear-outline-none bear-text-sm bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-400"
             }
           ),
-          /* @__PURE__ */ b(
+          /* @__PURE__ */ n(
             "svg",
             {
-              className: i(
+              className: c(
                 "bear-w-4 bear-h-4 bear-text-gray-400 bear-transition-transform bear-ml-auto",
-                f && "bear-rotate-180"
+                s && "bear-rotate-180"
               ),
               fill: "none",
               viewBox: "0 0 24 24",
               stroke: "currentColor",
-              children: /* @__PURE__ */ b("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+              children: /* @__PURE__ */ n("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
             }
           )
         ]
       }
     ),
-    f && !t && s.length > 0 && /* @__PURE__ */ b("div", { className: "bear-absolute bear-z-50 bear-w-full bear-mt-1 bear-py-1 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-max-h-60 bear-overflow-auto", children: s.map((e) => /* @__PURE__ */ b(
-      "button",
+    v && /* @__PURE__ */ n(S, { children: /* @__PURE__ */ n(
+      "div",
       {
-        type: "button",
-        disabled: e.disabled,
-        onClick: () => E(e.value),
-        className: i(
-          "bear-w-full bear-px-3 bear-py-2 bear-text-left bear-text-sm",
-          "hover:bear-bg-amber-50 dark:hover:bear-bg-amber-900/20",
-          "bear-text-gray-900 dark:bear-text-white",
-          e.disabled && "bear-opacity-50 bear-cursor-not-allowed"
-        ),
-        children: e.label
-      },
-      e.value
-    )) }),
-    f && !t && s.length === 0 && u && /* @__PURE__ */ b("div", { className: "bear-absolute bear-z-50 bear-w-full bear-mt-1 bear-py-3 bear-px-4 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-text-sm bear-text-gray-500", children: "No options found" }),
-    (N || c) && /* @__PURE__ */ b("p", { className: i(
+        ref: w,
+        className: "bear-fixed bear-py-1 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-max-h-60 bear-overflow-auto",
+        style: {
+          top: l.top,
+          left: l.left,
+          width: l.width,
+          zIndex: _
+        },
+        children: d.map((e) => /* @__PURE__ */ n(
+          "button",
+          {
+            type: "button",
+            disabled: e.disabled,
+            onClick: () => z(e.value),
+            className: c(
+              "bear-w-full bear-px-3 bear-py-2 bear-text-left bear-text-sm",
+              "hover:bear-bg-amber-50 dark:hover:bear-bg-amber-900/20",
+              "bear-text-gray-900 dark:bear-text-white",
+              e.disabled && "bear-opacity-50 bear-cursor-not-allowed"
+            ),
+            children: e.label
+          },
+          e.value
+        ))
+      }
+    ) }),
+    k && /* @__PURE__ */ n(S, { children: /* @__PURE__ */ n(
+      "div",
+      {
+        ref: w,
+        className: "bear-fixed bear-py-3 bear-px-4 bear-bg-white dark:bear-bg-gray-800 bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-rounded-lg bear-shadow-lg bear-text-sm bear-text-gray-500",
+        style: {
+          top: l.top,
+          left: l.left,
+          width: l.width,
+          zIndex: _
+        },
+        children: "No options found"
+      }
+    ) }),
+    (M || u) && /* @__PURE__ */ n("p", { className: c(
       "bear-mt-1.5 bear-text-xs",
-      c ? "bear-text-red-500" : "bear-text-gray-500 dark:bear-text-gray-400"
-    ), children: c || N })
+      u ? "bear-text-red-500" : "bear-text-gray-500 dark:bear-text-gray-400"
+    ), children: u || M })
   ] });
 };
 export {
-  q as MultiSelect
+  X as MultiSelect
 };

package/dist/components/NavigableSelect/NavigableSelect.cjs

@@ -1 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),b=require("../../utils/cn.cjs"),ge=require("../Portal/Portal.cjs"),o=require("./NavigableSelect.const.cjs"),xe=G=>{const{options:_,value:O,defaultValue:K,onChange:c,multiple:n=!1,searchable:X=!0,placeholder:Y=o.DEFAULT_PLACEHOLDER,label:P,helperText:V,error:S,disabled:m=!1,size:y="md",fullWidth:$=!1,maxVisible:J=o.DEFAULT_MAX_VISIBLE,maxSelections:j,emptyText:Q=o.DEFAULT_EMPTY_TEXT,className:ee,style:re,testId:ae}=G,h=O!==void 0,q=e=>e===void 0?[]:Array.isArray(e)?e:[e],[te,W]=s.useState(q(K)),[i,E]=s.useState(!1),[g,d]=s.useState(-1),[f,B]=s.useState(""),H=s.useRef(null),z=s.useRef(null),L=s.useRef(null),F=s.useRef(null),C=s.useRef(null),[I,se]=s.useState({top:0,left:0,width:0}),l=h?q(O):te,v=s.useMemo(()=>{if(!f)return _;const e=f.toLowerCase();return _.filter(a=>{var t;return a.label.toLowerCase().includes(e)||((t=a.description)==null?void 0:t.toLowerCase().includes(e))})},[_,f]),le=s.useMemo(()=>{const e=new Map;return v.forEach(a=>{const t=a.group||"";e.has(t)||e.set(t,[]),e.get(t).push(a)}),e},[v]),k=s.useMemo(()=>v.filter(e=>!e.disabled),[v]);s.useEffect(()=>{if(!i)return;const e=()=>{var t;const a=(t=C.current)==null?void 0:t.getBoundingClientRect();a&&se({top:a.bottom+4,left:Math.max(8,Math.min(a.left,window.innerWidth-a.width-8)),width:a.width})};return e(),window.addEventListener("resize",e),window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("resize",e),window.removeEventListener("scroll",e,!0)}},[i]),s.useEffect(()=>{if(!i)return;const e=a=>{var u,w;const t=a.target;(u=H.current)!=null&&u.contains(t)||(w=z.current)!=null&&w.contains(t)||(E(!1),B(""))};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[i]),s.useEffect(()=>{if(!L.current||g<0)return;const e=L.current.querySelector('[data-active="true"]');e==null||e.scrollIntoView({block:o.SCROLL_BLOCK})},[g]);const D=s.useCallback(()=>{m||(E(!0),d(0),setTimeout(()=>{var e;return(e=F.current)==null?void 0:e.focus()},0))},[m]),N=s.useCallback(()=>{var e;E(!1),B(""),d(-1),(e=C.current)==null||e.focus()},[]),R=s.useCallback(e=>{let a;if(n)if(l.includes(e))a=l.filter(t=>t!==e);else{if(j&&l.length>=j)return;a=[...l,e]}else a=[e],N();h||W(a),c==null||c(n?a:a[0]??"")},[l,n,h,j,c,N]),A=s.useCallback(e=>{const a=l.filter(t=>t!==e);h||W(a),c==null||c(n?a:a[0]??"")},[l,n,h,c]),U=s.useCallback(e=>{if(!i){(e.key==="ArrowDown"||e.key==="ArrowUp"||e.key==="Enter"||e.key===" ")&&(e.preventDefault(),D());return}switch(e.key){case"ArrowDown":e.preventDefault(),d(a=>Math.min(a+1,k.length-1));break;case"ArrowUp":e.preventDefault(),d(a=>Math.max(a-1,0));break;case"Enter":case" ":e.preventDefault(),g>=0&&k[g]&&R(k[g].value);break;case"Escape":e.preventDefault(),N();break;case"Backspace":f===""&&n&&l.length>0&&A(l[l.length-1]);break;case"Home":e.preventDefault(),d(0);break;case"End":e.preventDefault(),d(k.length-1);break}},[i,g,k,R,N,D,f,n,l,A]),ne=s.useCallback(e=>l.includes(e),[l]),x=l.map(e=>_.find(a=>a.value===e)).filter(Boolean),be=!!S,ie=o.TRIGGER_SIZE_CLASSES[y],oe=o.OPTION_SIZE_CLASSES[y],ce=o.TAG_SIZE_CLASSES[y],Z=o.ICON_SIZE[y],de=J*o.OPTION_HEIGHT[y];let T=-1;return r.jsxs("div",{ref:H,className:b.cn("Bear-NavigableSelect","bear-relative bear-flex bear-flex-col bear-gap-1.5",$&&"bear-w-full",ee),style:re,"data-testid":ae,children:[P&&r.jsx("label",{className:"Bear-NavigableSelect__label bear-text-sm bear-font-medium bear-text-gray-700 dark:bear-text-gray-300",children:P}),r.jsxs("button",{ref:C,type:"button",disabled:m,onClick:()=>i?N():D(),onKeyDown:U,className:b.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",be?"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":i,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:[n&&x.length>0&&x.map(e=>r.jsxs("span",{className:b.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)]",ce),children:[e.label,!m&&r.jsx("button",{type:"button",onClick:a=>{a.stopPropagation(),A(e.value)},className:"bear-ml-0.5 hover:bear-opacity-70","aria-label":`Remove ${e.label}`,children:"×"})]},e.value)),!n&&x.length>0&&r.jsxs("span",{className:"bear-truncate",children:[x[0].icon&&r.jsx("span",{className:"bear-mr-1.5",children:x[0].icon}),x[0].label]}),x.length===0&&r.jsx("span",{className:"bear-text-gray-400 dark:bear-text-gray-500",children:Y})]}),r.jsx("svg",{className:b.cn(Z,"bear-text-gray-400 dark:bear-text-gray-500 bear-transition-transform bear-shrink-0 bear-ml-2",i&&"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"})})]}),i&&r.jsx(ge.Portal,{children:r.jsxs("div",{ref:z,className:b.cn("Bear-NavigableSelect__dropdown","bear-fixed","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:o.DROPDOWN_Z_INDEX,top:I.top,left:I.left,width:I.width},children:[X&&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:F,type:"text",value:f,onChange:e=>{B(e.target.value),d(0)},onKeyDown:U,placeholder:"Type to search...",className:b.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:L,className:"Bear-NavigableSelect__list bear-overflow-y-auto bear-py-1",style:{maxHeight:de},role:"listbox","aria-multiselectable":n,children:[v.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:Q}),Array.from(le.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 u=t.disabled,w=!u;w&&T++;const M=T===g,p=ne(t.value),ue=T;return r.jsxs("button",{type:"button",disabled:u,className:b.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",oe,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",u&&"bear-opacity-40 bear-cursor-not-allowed"),"data-active":M,onMouseEnter:()=>{w&&d(ue)},onClick:()=>{u||R(t.value)},role:"option","aria-selected":p,"aria-disabled":u,children:[n&&r.jsx("span",{className:b.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",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&&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:b.cn("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&&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})]}),!n&&p&&r.jsx("svg",{className:b.cn(Z,"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"]})]})]})}),(V||S)&&r.jsx("p",{className:b.cn("Bear-NavigableSelect__helper bear-text-xs",S?"bear-text-red-500":"bear-text-gray-500 dark:bear-text-gray-400"),children:S||V})]})};exports.NavigableSelect=xe;

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

@@ -1 +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;
+"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"},_=1e4,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

@@ -14,7 +14,7 @@ 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;
+export declare const DROPDOWN_Z_INDEX = 10000;
 /** Search input debounce delay */
 export declare const SEARCH_DEBOUNCE = 0;
 /** Scroll into view block setting */

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

@@ -14,7 +14,7 @@ const e = "Select an option...", a = "No options found", b = 8, r = {
   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 = {
+}, p = 1e4, 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"