@forgedevstack/bear 1.2.0 → 1.2.2

package/dist/components/BottomSheet/BottomSheet.js

@@ -1,103 +1,124 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { useState as i, useEffect as h, useCallback as I } from "react";
-import { createPortal as A } from "react-dom";
-import { cn as x } from "../../utils/cn.js";
-import { XIcon as E } from "../Icon/index.js";
-const v = 300, M = {
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useState as d, useEffect as x, useCallback as E } from "react";
+import { createPortal as M } from "react-dom";
+import { cn as n } from "../../utils/cn.js";
+import { XIcon as S } from "../Icon/index.js";
+const v = 300, z = {
   sm: "bear-max-h-[40%]",
   md: "bear-max-h-[60%]",
   lg: "bear-max-h-[80%]",
   full: "bear-max-h-[95%]"
-}, F = ({
+}, q = ({
   isOpen: o,
   onClose: t,
   title: b,
   children: y,
   size: k = "md",
-  showCloseButton: d = !0,
+  showCloseButton: u = !0,
   closeOnBackdrop: p = !0,
-  closeOnEscape: u = !0,
+  closeOnEscape: c = !0,
   showHandle: g = !0,
-  className: w
+  enableScroll: w = !0,
+  isSticky: N = !1,
+  className: j
 }) => {
-  const [r, c] = i(o), [m, n] = i(!1), [N, f] = i(!1);
-  h(() => {
+  const [r, m] = d(o), [f, l] = d(!1), [I, h] = d(!1);
+  x(() => {
     if (o) {
-      c(!0), n(!1);
-      const a = requestAnimationFrame(() => f(!0));
+      m(!0), l(!1);
+      const a = requestAnimationFrame(() => h(!0));
       return () => cancelAnimationFrame(a);
     }
     if (r) {
-      f(!1), n(!0);
+      h(!1), l(!0);
       const a = setTimeout(() => {
-        c(!1), n(!1);
+        m(!1), l(!1);
       }, v);
       return () => clearTimeout(a);
     }
   }, [o, r]);
-  const l = I(
+  const s = E(
     (a) => {
-      u && a.key === "Escape" && t();
+      c && a.key === "Escape" && t();
     },
-    [u, t]
+    [c, t]
   );
-  if (h(() => (r && (document.addEventListener("keydown", l), document.body.style.overflow = "hidden"), () => {
-    document.removeEventListener("keydown", l), document.body.style.overflow = "";
-  }), [r, l]), !r) return null;
-  const j = /* @__PURE__ */ s("div", { className: "bear-fixed bear-inset-0 bear-z-50 bear-flex bear-items-end bear-justify-center", children: [
+  if (x(() => (r && (document.addEventListener("keydown", s), document.body.style.overflow = "hidden"), () => {
+    document.removeEventListener("keydown", s), document.body.style.overflow = "";
+  }), [r, s]), !r) return null;
+  const A = /* @__PURE__ */ i("div", { className: "bear-fixed bear-inset-0 bear-z-[11000] bear-flex bear-items-end bear-justify-center", children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: x(
+        className: n(
           "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",
-          m ? "bear-opacity-0" : "bear-opacity-100"
+          f ? "bear-opacity-0" : "bear-opacity-100"
         ),
         style: { transitionDuration: `${v}ms` },
         onClick: p ? t : void 0,
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ s(
+    /* @__PURE__ */ i(
       "div",
       {
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": b ? "bottom-sheet-title" : void 0,
-        className: x(
-          "Bear-BottomSheet bear-relative bear-w-full bear-rounded-t-2xl bear-shadow-2xl bear-overflow-hidden bear-transition-transform bear-duration-300",
+        className: n(
+          "Bear-BottomSheet bear-relative bear-w-full bear-rounded-t-2xl bear-shadow-2xl bear-transition-transform bear-duration-300",
+          "bear-flex bear-flex-col bear-min-h-0 bear-overflow-hidden",
           "bear-bg-white dark:bear-bg-neutral-900 bear-border-t bear-border-neutral-200 dark:bear-border-neutral-700",
-          M[k],
-          N && !m ? "bear-translate-y-0" : "bear-translate-y-full",
-          w
+          z[k],
+          I && !f ? "bear-translate-y-0" : "bear-translate-y-full",
+          j
         ),
         children: [
           g && /* @__PURE__ */ e("div", { className: "bear-flex bear-justify-center bear-pt-2 bear-pb-1", children: /* @__PURE__ */ e("div", { className: "bear-w-12 bear-h-1 bear-rounded-full bear-bg-neutral-300 dark:bear-bg-neutral-600", "aria-hidden": !0 }) }),
-          (b || d) && /* @__PURE__ */ s("div", { className: "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700", children: [
-            b && /* @__PURE__ */ e(
-              "h2",
-              {
-                id: "bottom-sheet-title",
-                className: "bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",
-                children: b
-              }
-            ),
-            d && /* @__PURE__ */ e(
-              "button",
-              {
-                onClick: t,
-                className: "bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors",
-                "aria-label": "Close",
-                children: /* @__PURE__ */ e(E, { className: "bear-w-5 bear-h-5" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ e("div", { className: "bear-flex-1 bear-overflow-y-auto bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300", children: y })
+          (b || u) && /* @__PURE__ */ i(
+            "div",
+            {
+              className: n(
+                "bear-flex bear-items-center bear-justify-between bear-px-4 bear-py-3 bear-border-b bear-border-neutral-200 dark:bear-border-neutral-700 bear-shrink-0",
+                N && "bear-sticky bear-top-0 bear-z-10 bear-bg-white dark:bear-bg-neutral-900"
+              ),
+              children: [
+                b && /* @__PURE__ */ e(
+                  "h2",
+                  {
+                    id: "bottom-sheet-title",
+                    className: "bear-text-lg bear-font-semibold bear-text-neutral-900 dark:bear-text-white",
+                    children: b
+                  }
+                ),
+                u && /* @__PURE__ */ e(
+                  "button",
+                  {
+                    onClick: t,
+                    className: "bear-p-1 bear-rounded-lg bear-text-neutral-500 dark:bear-text-neutral-400 hover:bear-text-neutral-900 dark:hover:bear-text-white hover:bear-bg-neutral-100 dark:hover:bear-bg-neutral-700 bear-transition-colors",
+                    "aria-label": "Close",
+                    children: /* @__PURE__ */ e(S, { className: "bear-w-5 bear-h-5" })
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              className: n(
+                "bear-flex-1 bear-min-h-0 bear-p-4 bear-text-neutral-700 dark:bear-text-neutral-300",
+                w ? "bear-overflow-y-auto" : "bear-overflow-hidden"
+              ),
+              children: y
+            }
+          )
         ]
       }
     )
   ] });
-  return A(j, document.body);
+  return M(A, document.body);
 };
 export {
-  F as BottomSheet
+  q as BottomSheet
 };

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

@@ -9,5 +9,7 @@ export interface BottomSheetProps {
     closeOnBackdrop?: boolean;
     closeOnEscape?: boolean;
     showHandle?: boolean;
+    enableScroll?: boolean;
+    isSticky?: boolean;
     className?: string;
 }

package/dist/components/Breadcrumbs/Breadcrumbs.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),_=require("react"),b=require("../../utils/cn.cjs"),s=require("./Breadcrumbs.const.cjs"),k=({className:t})=>e.jsx("svg",{className:t,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"})}),A=({className:t})=>e.jsx("svg",{className:t,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M9 5l7 7-7 7"})}),N=t=>{const{items:n,separator:d,maxItems:i,itemsBeforeCollapse:m=s.BREADCRUMBS_DEFAULTS.ITEMS_BEFORE_COLLAPSE,itemsAfterCollapse:x=s.BREADCRUMBS_DEFAULTS.ITEMS_AFTER_COLLAPSE,className:u,size:c=s.BREADCRUMBS_DEFAULTS.SIZE,showHomeIcon:h=s.BREADCRUMBS_DEFAULTS.SHOW_HOME_ICON,testId:p,id:S,"aria-label":E="Breadcrumb"}=t,[f,B]=_.useState(!1),C=()=>d||e.jsx(A,{className:b.cn(s.BREADCRUMBS_ICON_SIZE[c],"bear-text-zinc-500 bear-mx-2")}),j=(r,a,I)=>{const o=e.jsxs("span",{className:"bear-flex bear-items-center bear-gap-1",children:[a===0&&h&&e.jsx(k,{className:s.BREADCRUMBS_ICON_SIZE[c]}),r.icon,r.label]});return I?e.jsx("span",{className:"bear-text-zinc-300 bear-font-medium","aria-current":"page",children:o}):r.href?e.jsx("a",{href:r.href,className:"bear-text-zinc-400 hover:bear-text-pink-400 bear-transition-colors",children:o}):r.onClick?e.jsx("button",{type:"button",onClick:r.onClick,className:"bear-text-zinc-400 hover:bear-text-pink-400 bear-transition-colors",children:o}):e.jsx("span",{className:"bear-text-zinc-400",children:o})},R=i&&n.length>i&&!f;let l=n;if(R){const r=n.slice(0,m),a=n.slice(-x);l=[...r,"ellipsis",...a]}return e.jsx("nav",{id:S,"data-testid":p,className:b.cn("bear-flex bear-items-center bear-flex-wrap",s.BREADCRUMBS_SIZE[c],u),"aria-label":E,children:e.jsx("ol",{className:"bear-flex bear-items-center bear-flex-wrap bear-list-none bear-p-0 bear-m-0",children:l.map((r,a)=>e.jsxs("li",{className:"bear-flex bear-items-center",children:[a>0&&e.jsx("span",{"aria-hidden":"true",children:C()}),r==="ellipsis"?e.jsx("button",{type:"button",onClick:()=>B(!0),className:"bear-text-zinc-400 hover:bear-text-pink-400 bear-transition-colors bear-px-1","aria-label":"Show more breadcrumbs",children:"..."}):j(r,a,a===l.length-1)]},a))})})};exports.Breadcrumbs=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),b=require("react"),H=require("../../context/BearProvider.cjs"),Z=require("../../utils/maxVisible.utils.cjs"),g=require("../../utils/cn.cjs"),R=require("../Dropdown/Dropdown.cjs"),u=require("../Icon/index.cjs"),c=require("./Breadcrumbs.const.cjs"),V=v=>{const{items:n,separator:N,maxItems:p,itemsBeforeCollapse:x=c.BREADCRUMBS_DEFAULTS.ITEMS_BEFORE_COLLAPSE,itemsAfterCollapse:m=c.BREADCRUMBS_DEFAULTS.ITEMS_AFTER_COLLAPSE,className:D,size:h=c.BREADCRUMBS_DEFAULTS.SIZE,showHomeIcon:_=c.BREADCRUMBS_DEFAULTS.SHOW_HOME_ICON,testId:A,id:z,"aria-label":M="Breadcrumb"}=v,w=H.useBearThemeOptional(),[i,f]=b.useState(null),[O,E]=b.useState({}),[I,U]=b.useState(()=>typeof window<"u"?window.innerWidth:1200);b.useEffect(()=>{const e=()=>U(window.innerWidth);return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),b.useEffect(()=>{f(null),E({})},[n]);const S=b.useMemo(()=>p==null?void 0:Z.resolveMaxVisible(p,{width:I,theme:w}),[p,I,w]),L=()=>N||r.jsx(u.BearIcons.ChevronRightIcon,{className:g.cn(c.BREADCRUMBS_ICON_SIZE[h],"bear-text-zinc-500 bear-mx-2")}),B=(e,s,a)=>{const t=r.jsxs("span",{className:"bear-flex bear-items-center bear-gap-1 bear-max-w-[12rem] bear-truncate md:bear-max-w-none",children:[s===0&&_&&r.jsx(u.BearIcons.HomeIcon,{className:c.BREADCRUMBS_ICON_SIZE[h]}),e.icon,e.label]}),o=a?r.jsx("span",{className:"bear-text-zinc-300 bear-font-medium","aria-current":"page",children:t}):e.href?r.jsx("a",{href:e.href,className:"bear-text-zinc-400 hover:bear-text-pink-400 bear-transition-colors bear-truncate",children:t}):e.onClick?r.jsx("button",{type:"button",onClick:e.onClick,className:"bear-text-zinc-400 hover:bear-text-pink-400 bear-transition-colors bear-truncate",children:t}):r.jsx("span",{className:"bear-text-zinc-400 bear-truncate",children:t});if(e.dropdownItems&&e.dropdownItems.length>0&&!a){const d=O[s],k=e.dropdownItems.find(l=>l.key===d);return r.jsx(R.Dropdown,{placement:"bottom-start",closeOnSelect:!0,trigger:r.jsxs("button",{type:"button",className:"bear-inline-flex bear-items-center bear-gap-1 bear-text-zinc-400 hover:bear-text-pink-400 bear-transition-colors","aria-haspopup":"true",children:[t,k&&r.jsx("span",{className:"bear-ml-1 bear-max-w-[8rem] bear-truncate bear-text-xs bear-text-zinc-300",children:k.label}),r.jsx(u.BearIcons.ChevronDownIcon,{size:14})]}),items:e.dropdownItems.map(l=>({key:l.key,label:l.label,disabled:l.disabled,selected:d===l.key,onClick:()=>{var y;E(F=>({...F,[s]:l.key})),(y=l.onClick)==null||y.call(l)}}))})}return o},T=S!=null&&n.length>S,C=x,P=n.length-m;let j=n.map((e,s)=>({type:"item",item:e,index:s}));if(T){const e=n.slice(0,x),s=n.slice(-m),a=n.slice(x,n.length-m);j=[...e.map((t,o)=>({type:"item",item:t,index:o})),...a.length?[{type:"ellipsis",hidden:a}]:[],...s.map((t,o)=>({type:"item",item:t,index:n.length-m+o}))]}const q=i!=null&&i>=C&&i<P;return r.jsx("nav",{id:z,"data-testid":A,className:g.cn("bear-flex bear-min-w-0 bear-items-center bear-flex-wrap",c.BREADCRUMBS_SIZE[h],D),"aria-label":M,children:r.jsx("ol",{className:"bear-flex bear-min-w-0 bear-items-center bear-flex-wrap bear-list-none bear-p-0 bear-m-0",children:j.map((e,s)=>r.jsxs("li",{className:"bear-flex bear-min-w-0 bear-items-center",children:[s>0&&r.jsx("span",{"aria-hidden":"true",children:L()}),e.type==="ellipsis"?r.jsxs("span",{className:"bear-inline-flex bear-min-w-0 bear-max-w-full bear-items-center bear-gap-1",children:[r.jsx(R.Dropdown,{placement:"bottom-start",closeOnSelect:!0,trigger:r.jsx("button",{type:"button",className:"bear-inline-flex bear-items-center bear-justify-center bear-rounded bear-px-2 bear-py-1 bear-text-zinc-400 hover:bear-bg-[var(--bear-bg-tertiary)] hover:bear-text-pink-400 bear-transition-colors","aria-label":"Hidden breadcrumbs",children:r.jsx(u.BearIcons.MoreHorizIcon,{size:18})}),items:e.hidden.map((a,t)=>{const o=C+t;return{key:`${a.label}-${t}`,label:a.label,onClick:()=>{var d;f(o),(d=a.onClick)==null||d.call(a)}}})}),q&&i!=null&&r.jsx("span",{className:"bear-min-w-0 bear-max-w-[12rem] bear-truncate md:bear-max-w-none bear-inline-flex bear-items-center",children:B(n[i],i,i===n.length-1)})]}):B(e.item,e.index,e.index===n.length-1)]},s))})})};exports.Breadcrumbs=V;

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,56 +1,136 @@
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
-import { useState as _ } from "react";
-import { cn as m } from "../../utils/cn.js";
-import { BREADCRUMBS_DEFAULTS as o, BREADCRUMBS_SIZE as M, BREADCRUMBS_ICON_SIZE as d } from "./Breadcrumbs.const.js";
-const A = ({ className: t }) => /* @__PURE__ */ e("svg", { className: t, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" }) }), R = ({ className: t }) => /* @__PURE__ */ e("svg", { className: t, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }), j = (t) => {
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { useState as f, useEffect as z, useMemo as $ } from "react";
+import { useBearThemeOptional as K } from "../../context/BearProvider.js";
+import { resolveMaxVisible as q } from "../../utils/maxVisible.utils.js";
+import { cn as B } from "../../utils/cn.js";
+import { Dropdown as O } from "../Dropdown/Dropdown.js";
+import { BearIcons as d } from "../Icon/index.js";
+import { BREADCRUMBS_DEFAULTS as p, BREADCRUMBS_SIZE as G, BREADCRUMBS_ICON_SIZE as R } from "./Breadcrumbs.const.js";
+const te = (_) => {
   const {
     items: n,
-    separator: p,
-    maxItems: c,
-    itemsBeforeCollapse: h = o.ITEMS_BEFORE_COLLAPSE,
-    itemsAfterCollapse: f = o.ITEMS_AFTER_COLLAPSE,
-    className: u,
-    size: l = o.SIZE,
-    showHomeIcon: x = o.SHOW_HOME_ICON,
-    testId: C,
-    id: E,
-    "aria-label": k = "Breadcrumb"
-  } = t, [S, I] = _(!1), N = () => p || /* @__PURE__ */ e(R, { className: m(d[l], "bear-text-zinc-500 bear-mx-2") }), v = (r, a, L) => {
-    const s = /* @__PURE__ */ b("span", { className: "bear-flex bear-items-center bear-gap-1", children: [
-      a === 0 && x && /* @__PURE__ */ e(A, { className: d[l] }),
-      r.icon,
-      r.label
-    ] });
-    return L ? /* @__PURE__ */ e("span", { className: "bear-text-zinc-300 bear-font-medium", "aria-current": "page", children: s }) : r.href ? /* @__PURE__ */ e("a", { href: r.href, className: "bear-text-zinc-400 hover:bear-text-pink-400 bear-transition-colors", children: s }) : r.onClick ? /* @__PURE__ */ e("button", { type: "button", onClick: r.onClick, className: "bear-text-zinc-400 hover:bear-text-pink-400 bear-transition-colors", children: s }) : /* @__PURE__ */ e("span", { className: "bear-text-zinc-400", children: s });
-  }, B = c && n.length > c && !S;
-  let i = n;
-  if (B) {
-    const r = n.slice(0, h), a = n.slice(-f);
-    i = [...r, "ellipsis", ...a];
+    separator: M,
+    maxItems: h,
+    itemsBeforeCollapse: u = p.ITEMS_BEFORE_COLLAPSE,
+    itemsAfterCollapse: b = p.ITEMS_AFTER_COLLAPSE,
+    className: A,
+    size: x = p.SIZE,
+    showHomeIcon: D = p.SHOW_HOME_ICON,
+    testId: L,
+    id: P,
+    "aria-label": H = "Breadcrumb"
+  } = _, w = K(), [i, I] = f(null), [T, k] = f({}), [E, U] = f(() => typeof window < "u" ? window.innerWidth : 1200);
+  z(() => {
+    const e = () => U(window.innerWidth);
+    return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+  }, []), z(() => {
+    I(null), k({});
+  }, [n]);
+  const y = $(
+    () => h == null ? void 0 : q(h, { width: E, theme: w }),
+    [h, E, w]
+  ), j = () => M || /* @__PURE__ */ r(d.ChevronRightIcon, { className: B(R[x], "bear-text-zinc-500 bear-mx-2") }), C = (e, l, t) => {
+    const a = /* @__PURE__ */ m("span", { className: "bear-flex bear-items-center bear-gap-1 bear-max-w-[12rem] bear-truncate md:bear-max-w-none", children: [
+      l === 0 && D && /* @__PURE__ */ r(d.HomeIcon, { className: R[x] }),
+      e.icon,
+      e.label
+    ] }), o = t ? /* @__PURE__ */ r("span", { className: "bear-text-zinc-300 bear-font-medium", "aria-current": "page", children: a }) : e.href ? /* @__PURE__ */ r("a", { href: e.href, className: "bear-text-zinc-400 hover:bear-text-pink-400 bear-transition-colors bear-truncate", children: a }) : e.onClick ? /* @__PURE__ */ r("button", { type: "button", onClick: e.onClick, className: "bear-text-zinc-400 hover:bear-text-pink-400 bear-transition-colors bear-truncate", children: a }) : /* @__PURE__ */ r("span", { className: "bear-text-zinc-400 bear-truncate", children: a });
+    if (e.dropdownItems && e.dropdownItems.length > 0 && !t) {
+      const c = T[l], v = e.dropdownItems.find((s) => s.key === c);
+      return /* @__PURE__ */ r(
+        O,
+        {
+          placement: "bottom-start",
+          closeOnSelect: !0,
+          trigger: /* @__PURE__ */ m(
+            "button",
+            {
+              type: "button",
+              className: "bear-inline-flex bear-items-center bear-gap-1 bear-text-zinc-400 hover:bear-text-pink-400 bear-transition-colors",
+              "aria-haspopup": "true",
+              children: [
+                a,
+                v && /* @__PURE__ */ r("span", { className: "bear-ml-1 bear-max-w-[8rem] bear-truncate bear-text-xs bear-text-zinc-300", children: v.label }),
+                /* @__PURE__ */ r(d.ChevronDownIcon, { size: 14 })
+              ]
+            }
+          ),
+          items: e.dropdownItems.map((s) => ({
+            key: s.key,
+            label: s.label,
+            disabled: s.disabled,
+            selected: c === s.key,
+            onClick: () => {
+              var S;
+              k((V) => ({ ...V, [l]: s.key })), (S = s.onClick) == null || S.call(s);
+            }
+          }))
+        }
+      );
+    }
+    return o;
+  }, F = y != null && n.length > y, g = u, W = n.length - b;
+  let N = n.map((e, l) => ({ type: "item", item: e, index: l }));
+  if (F) {
+    const e = n.slice(0, u), l = n.slice(-b), t = n.slice(u, n.length - b);
+    N = [
+      ...e.map((a, o) => ({ type: "item", item: a, index: o })),
+      ...t.length ? [{ type: "ellipsis", hidden: t }] : [],
+      ...l.map((a, o) => ({
+        type: "item",
+        item: a,
+        index: n.length - b + o
+      }))
+    ];
   }
-  return /* @__PURE__ */ e(
+  const Z = i != null && i >= g && i < W;
+  return /* @__PURE__ */ r(
     "nav",
     {
-      id: E,
-      "data-testid": C,
-      className: m("bear-flex bear-items-center bear-flex-wrap", M[l], u),
-      "aria-label": k,
-      children: /* @__PURE__ */ e("ol", { className: "bear-flex bear-items-center bear-flex-wrap bear-list-none bear-p-0 bear-m-0", children: i.map((r, a) => /* @__PURE__ */ b("li", { className: "bear-flex bear-items-center", children: [
-        a > 0 && /* @__PURE__ */ e("span", { "aria-hidden": "true", children: N() }),
-        r === "ellipsis" ? /* @__PURE__ */ e(
-          "button",
-          {
-            type: "button",
-            onClick: () => I(!0),
-            className: "bear-text-zinc-400 hover:bear-text-pink-400 bear-transition-colors bear-px-1",
-            "aria-label": "Show more breadcrumbs",
-            children: "..."
-          }
-        ) : v(r, a, a === i.length - 1)
-      ] }, a)) })
+      id: P,
+      "data-testid": L,
+      className: B("bear-flex bear-min-w-0 bear-items-center bear-flex-wrap", G[x], A),
+      "aria-label": H,
+      children: /* @__PURE__ */ r("ol", { className: "bear-flex bear-min-w-0 bear-items-center bear-flex-wrap bear-list-none bear-p-0 bear-m-0", children: N.map((e, l) => /* @__PURE__ */ m("li", { className: "bear-flex bear-min-w-0 bear-items-center", children: [
+        l > 0 && /* @__PURE__ */ r("span", { "aria-hidden": "true", children: j() }),
+        e.type === "ellipsis" ? /* @__PURE__ */ m("span", { className: "bear-inline-flex bear-min-w-0 bear-max-w-full bear-items-center bear-gap-1", children: [
+          /* @__PURE__ */ r(
+            O,
+            {
+              placement: "bottom-start",
+              closeOnSelect: !0,
+              trigger: /* @__PURE__ */ r(
+                "button",
+                {
+                  type: "button",
+                  className: "bear-inline-flex bear-items-center bear-justify-center bear-rounded bear-px-2 bear-py-1 bear-text-zinc-400 hover:bear-bg-[var(--bear-bg-tertiary)] hover:bear-text-pink-400 bear-transition-colors",
+                  "aria-label": "Hidden breadcrumbs",
+                  children: /* @__PURE__ */ r(d.MoreHorizIcon, { size: 18 })
+                }
+              ),
+              items: e.hidden.map((t, a) => {
+                const o = g + a;
+                return {
+                  key: `${t.label}-${a}`,
+                  label: t.label,
+                  onClick: () => {
+                    var c;
+                    I(o), (c = t.onClick) == null || c.call(t);
+                  }
+                };
+              })
+            }
+          ),
+          Z && i != null && /* @__PURE__ */ r("span", { className: "bear-min-w-0 bear-max-w-[12rem] bear-truncate md:bear-max-w-none bear-inline-flex bear-items-center", children: C(
+            n[i],
+            i,
+            i === n.length - 1
+          ) })
+        ] }) : C(e.item, e.index, e.index === n.length - 1)
+      ] }, l)) })
     }
   );
 };
 export {
-  j as Breadcrumbs
+  te as Breadcrumbs
 };

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

@@ -1,24 +1,31 @@
 import { ReactNode } from 'react';
+import { MaxVisibleInput } from '../../utils/maxVisible.utils';
 export type BreadcrumbSize = 'sm' | 'md' | 'lg';
+export interface BreadcrumbDropdownItem {
+    key: string;
+    label: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+}
 export interface BreadcrumbItem {
     label: string;
     href?: string;
     icon?: ReactNode;
     onClick?: () => void;
+    /** When set, the crumb opens a dropdown (same shape as Dropdown items). */
+    dropdownItems?: BreadcrumbDropdownItem[];
 }
 export interface BreadcrumbsProps {
     items: BreadcrumbItem[];
     separator?: ReactNode;
-    maxItems?: number;
+    /** Collapse middle crumbs into a "…" menu when items.length exceeds this threshold. Number or breakpoint map (same rules as TabList maxVisibleTabs). */
+    maxItems?: MaxVisibleInput;
     itemsBeforeCollapse?: number;
     itemsAfterCollapse?: number;
     className?: string;
     size?: BreadcrumbSize;
     showHomeIcon?: boolean;
-    /** Unique identifier for testing */
     testId?: string;
-    /** HTML id attribute */
     id?: string;
-    /** Accessible label for screen readers */
     'aria-label'?: string;
 }

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

@@ -1,2 +1,2 @@
 export { Breadcrumbs } from './Breadcrumbs';
-export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumbs.types';
+export type { BreadcrumbsProps, BreadcrumbItem, BreadcrumbDropdownItem } from './Breadcrumbs.types';

package/dist/components/Cascader/Cascader.cjs

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

package/dist/components/Cascader/Cascader.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={placeholder:"Select option",noOptions:"No options available",loading:"Loading...",clear:"Clear"},r={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4 bear-text-sm",lg:"bear-py-2.5 bear-px-5 bear-text-base"},A={default:"bear-bg-white dark:bear-bg-zinc-800 bear-border-zinc-300 dark:bear-border-zinc-600",filled:"bear-bg-zinc-100 dark:bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-zinc-300 dark:bear-border-zinc-500"},a=9999,b=" / ";exports.CASCADER_DEFAULT_TRANSLATIONS=e;exports.CASCADER_DROPDOWN_Z_INDEX=a;exports.CASCADER_PATH_SEPARATOR=b;exports.CASCADER_SIZE_CLASSES=r;exports.CASCADER_VARIANT_CLASSES=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={placeholder:"Select option",noOptions:"No options available",loading:"Loading...",clear:"Clear"},r={sm:"bear-py-1.5 bear-px-3 bear-text-sm",md:"bear-py-2 bear-px-4 bear-text-sm",lg:"bear-py-2.5 bear-px-5 bear-text-base"},A={default:"bear-bg-white dark:bear-bg-zinc-800 bear-border-zinc-300 dark:bear-border-zinc-600",filled:"bear-bg-zinc-100 dark:bear-bg-zinc-700 bear-border-transparent",outline:"bear-bg-transparent bear-border-zinc-300 dark:bear-border-zinc-500"},a=1e4,b=" / ";exports.CASCADER_DEFAULT_TRANSLATIONS=e;exports.CASCADER_DROPDOWN_Z_INDEX=a;exports.CASCADER_PATH_SEPARATOR=b;exports.CASCADER_SIZE_CLASSES=r;exports.CASCADER_VARIANT_CLASSES=A;

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

@@ -22,7 +22,7 @@ export declare const CASCADER_VARIANT_CLASSES: {
 /**
  * Z-index for dropdown
  */
-export declare const CASCADER_DROPDOWN_Z_INDEX = 9999;
+export declare const CASCADER_DROPDOWN_Z_INDEX = 10000;
 /**
  * Default path separator
  */

package/dist/components/Cascader/Cascader.const.js

@@ -11,7 +11,7 @@ const e = {
   default: "bear-bg-white dark:bear-bg-zinc-800 bear-border-zinc-300 dark:bear-border-zinc-600",
   filled: "bear-bg-zinc-100 dark:bear-bg-zinc-700 bear-border-transparent",
   outline: "bear-bg-transparent bear-border-zinc-300 dark:bear-border-zinc-500"
-}, b = 9999, n = " / ";
+}, b = 1e4, n = " / ";
 export {
   e as CASCADER_DEFAULT_TRANSLATIONS,
   b as CASCADER_DROPDOWN_Z_INDEX,