@forgedevstack/bear 1.3.0 → 1.3.2

package/dist/components/Select/Select.const.js

@@ -1,13 +1,12 @@
-const E = "Bear-Select", _ = "Select an option", e = 4, t = 8, S = 1e4, a = {
+const e = "Bear-Select", E = "Select an option", _ = 4, t = 1e4, S = {
   sm: "bear-h-8 bear-text-sm bear-px-3",
   md: "bear-h-10 bear-text-base bear-px-4",
   lg: "bear-h-12 bear-text-lg bear-px-5"
 };
 export {
-  _ as SELECT_DEFAULT_PLACEHOLDER,
-  t as SELECT_MENU_EDGE_PAD_PX,
-  e as SELECT_MENU_OFFSET_PX,
-  S as SELECT_MENU_Z_INDEX,
-  a as SELECT_SIZE_CLASSES,
-  E as S_E_L_E_C_T_ROOT_CLASS
+  E as SELECT_DEFAULT_PLACEHOLDER,
+  _ as SELECT_MENU_OFFSET_PX,
+  t as SELECT_MENU_Z_INDEX,
+  S as SELECT_SIZE_CLASSES,
+  e as S_E_L_E_C_T_ROOT_CLASS
 };

package/dist/components/Select/Select.js

@@ -1,160 +1,144 @@
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import { useState as B, useRef as R, useCallback as G, useEffect as H } from "react";
-import { SELECT_DEFAULT_PLACEHOLDER as J, SELECT_SIZE_CLASSES as $, S_E_L_E_C_T_ROOT_CLASS as s, SELECT_MENU_Z_INDEX as K, SELECT_MENU_EDGE_PAD_PX as q, SELECT_MENU_OFFSET_PX as Q } from "./Select.const.js";
-import { ChevronDownIcon as Y, CheckIcon as ee } from "../Icon/index.js";
-import { Portal as re } from "../Portal/Portal.js";
-import { cn as b } from "../../utils/cn.js";
-import { resolveBearId as ae } from "../../utils/generateBearId.utils.js";
-import { useBearId as te } from "../../utils/useBearId.js";
-import { useClickOutsideMultiple as le } from "../../hooks/useClickOutside.js";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { useState as X, useRef as $, useCallback as Z } from "react";
+import { SELECT_DEFAULT_PLACEHOLDER as H, SELECT_MENU_OFFSET_PX as G, SELECT_SIZE_CLASSES as q, S_E_L_E_C_T_ROOT_CLASS as t, SELECT_MENU_Z_INDEX as J } from "./Select.const.js";
+import { ChevronDownIcon as K, CheckIcon as Q } from "@forgedevstack/bear-icons";
+import { OverlayPortal as Y } from "../OverlayPortal/OverlayPortal.js";
+import { cn as d } from "../../utils/cn.js";
+import { resolveBearId as ee } from "../../utils/generateBearId.utils.js";
+import { useBearId as re } from "../../utils/useBearId.js";
+import { useClickOutsideMultiple as ae } from "../../hooks/useClickOutside.js";
 import "../../context/BearProvider.js";
 import "../../hooks/useBearComponent/useBearComponent.js";
+import { useFixedAnchorPosition as le } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.js";
+import { resolveOverlayEffects as te } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
 import { useFormControl as se } from "../../hooks/useFormControl/useFormControl.js";
-const xe = (A) => {
+const ge = (N) => {
   const {
-    options: p,
-    value: t,
-    onChange: i,
-    placeholder: h = J,
-    label: u,
-    error: x,
-    disabled: F = !1,
-    required: j = !1,
-    size: L = "md",
+    options: v,
+    value: l,
+    onChange: s,
+    placeholder: p = H,
+    label: c,
+    error: y,
+    disabled: B = !1,
+    required: D = !1,
+    size: S = "md",
     fullWidth: k = !1,
-    displayEmpty: w = !1,
+    displayEmpty: h = !1,
     renderValue: I,
-    native: f = !1,
-    className: C,
-    id: z,
-    testId: P
-  } = A, U = te("Select"), m = ae(z, U), r = se(), [l, g] = B(!1), [y, X] = B({
-    top: 0,
-    left: 0,
-    width: 0
-  }), E = R(null), T = R(null), d = F || !!(r != null && r.disabled), _ = j || !!(r != null && r.required), o = !!x || !!(r != null && r.error), v = typeof x == "string" ? x : void 0, N = p.find((e) => e.value === t), S = t === void 0 || t === "", D = S || w && S, V = G(() => g(!1), []);
-  le([E, T], V, {
-    enabled: l && !f && !d
+    native: u = !1,
+    className: L,
+    id: F,
+    testId: O
+  } = N, { openEffect: P, closeEffect: A } = te(N), j = re("Select"), f = ee(F, j), r = se(), [b, x] = X(!1), g = $(null), C = $(null), { style: M, ready: U } = le({
+    anchorRef: g,
+    open: b && !u,
+    offsetPx: G,
+    matchWidth: !0
+  }), o = B || !!(r != null && r.disabled), _ = D || !!(r != null && r.required), i = !!y || !!(r != null && r.error), m = typeof y == "string" ? y : void 0, E = v.find((e) => e.value === l), w = l === void 0 || l === "", R = w || h && w, z = Z(() => x(!1), []);
+  ae([g, C], z, {
+    enabled: b && !u && !o
   });
-  const W = (e) => {
-    i == null || i(e), g(!1);
-  };
-  H(() => {
-    if (!l || f) return;
-    const e = () => {
-      var O;
-      const n = (O = E.current) == null ? void 0 : O.getBoundingClientRect();
-      n && X({
-        top: n.bottom + Q,
-        left: Math.max(
-          q,
-          Math.min(n.left, window.innerWidth - n.width - q)
-        ),
-        width: n.width
-      });
-    };
-    return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
-      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
-    };
-  }, [l, f]);
-  const Z = I && !S ? I(t) : D || !N ? h : N.label, M = {
+  const V = (e) => {
+    s == null || s(e), x(!1);
+  }, W = I && !w ? I(l) : R || !E ? p : E.label, T = {
     backgroundColor: "var(--bear-bg-primary)",
-    borderColor: o ? void 0 : "var(--bear-border-default)",
-    color: N && !D ? "var(--bear-text-primary)" : "var(--bear-text-muted)"
+    borderColor: i ? void 0 : "var(--bear-border-default)",
+    color: E && !R ? "var(--bear-text-primary)" : "var(--bear-text-muted)"
   };
-  return f ? /* @__PURE__ */ c(
+  return u ? /* @__PURE__ */ n(
     "div",
     {
-      id: m,
-      "data-testid": P,
-      className: b(
-        s,
+      id: f,
+      "data-testid": O,
+      className: d(
+        t,
         "bear-relative bear-flex bear-flex-col bear-gap-1.5",
         k && "bear-w-full"
       ),
       children: [
-        u && /* @__PURE__ */ a(
+        c && /* @__PURE__ */ a(
           "label",
           {
-            htmlFor: `${m}-native`,
+            htmlFor: `${f}-native`,
             className: "bear-text-sm bear-font-medium",
             style: { color: "var(--bear-text-secondary)" },
-            children: u
+            children: c
           }
         ),
-        /* @__PURE__ */ c(
+        /* @__PURE__ */ n(
           "select",
           {
-            id: `${m}-native`,
-            disabled: d,
+            id: `${f}-native`,
+            disabled: o,
             required: _,
-            value: t ?? "",
-            onChange: (e) => i == null ? void 0 : i(e.target.value),
-            className: b(
-              `${s}__native`,
+            value: l ?? "",
+            onChange: (e) => s == null ? void 0 : s(e.target.value),
+            className: d(
+              `${t}__native`,
               "bear-w-full bear-rounded-lg bear-border bear-outline-none bear-transition-all bear-duration-200",
               "focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",
-              o ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500",
-              d && "bear-opacity-50 bear-cursor-not-allowed",
-              $[L],
-              C
+              i ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500",
+              o && "bear-opacity-50 bear-cursor-not-allowed",
+              q[S],
+              L
             ),
-            style: M,
-            "aria-invalid": o || void 0,
+            style: T,
+            "aria-invalid": i || void 0,
             "aria-required": _ || void 0,
             "aria-describedby": r == null ? void 0 : r.helperId,
             children: [
-              (w || h) && /* @__PURE__ */ a("option", { value: "", disabled: !w, children: h }),
-              p.map((e) => /* @__PURE__ */ a("option", { value: e.value, disabled: e.disabled, children: e.label }, e.value))
+              (h || p) && /* @__PURE__ */ a("option", { value: "", disabled: !h, children: p }),
+              v.map((e) => /* @__PURE__ */ a("option", { value: e.value, disabled: e.disabled, children: e.label }, e.value))
             ]
           }
         ),
-        v && /* @__PURE__ */ a("p", { className: "bear-text-sm bear-text-red-500", children: v })
+        m && /* @__PURE__ */ a("p", { className: "bear-text-sm bear-text-red-500", children: m })
       ]
     }
-  ) : /* @__PURE__ */ c(
+  ) : /* @__PURE__ */ n(
     "div",
     {
-      ref: E,
-      id: m,
-      "data-testid": P,
-      className: b(
-        s,
+      ref: g,
+      id: f,
+      "data-testid": O,
+      className: d(
+        t,
         "bear-relative bear-flex bear-flex-col bear-gap-1.5",
         k && "bear-w-full"
       ),
       children: [
-        u && /* @__PURE__ */ a("label", { className: "bear-text-sm bear-font-medium", style: { color: "var(--bear-text-secondary)" }, children: u }),
-        /* @__PURE__ */ c(
+        c && /* @__PURE__ */ a("label", { className: "bear-text-sm bear-font-medium", style: { color: "var(--bear-text-secondary)" }, children: c }),
+        /* @__PURE__ */ n(
           "button",
           {
             type: "button",
-            disabled: d,
-            onClick: () => !d && g(!l),
-            className: b(
-              `${s}__trigger`,
+            disabled: o,
+            onClick: () => !o && x(!b),
+            className: d(
+              `${t}__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",
               "focus:bear-ring-2 focus:bear-ring-offset-2 focus:bear-ring-offset-[var(--bear-bg-primary)]",
-              o ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
-              d && "bear-opacity-50 bear-cursor-not-allowed",
-              $[L],
-              C
+              i ? "bear-border-red-500 focus:bear-ring-red-500" : "focus:bear-border-bear-500 focus:bear-ring-bear-500 dark:focus:bear-border-bear-500 dark:focus:bear-ring-bear-500",
+              o && "bear-opacity-50 bear-cursor-not-allowed",
+              q[S],
+              L
             ),
-            style: M,
+            style: T,
             "aria-haspopup": "listbox",
-            "aria-expanded": l,
-            "aria-invalid": o || void 0,
+            "aria-expanded": b,
+            "aria-invalid": i || void 0,
             "aria-required": _ || void 0,
             "aria-describedby": r == null ? void 0 : r.helperId,
             children: [
-              /* @__PURE__ */ a("span", { className: `${s}__value`, children: Z }),
+              /* @__PURE__ */ a("span", { className: `${t}__value`, children: W }),
               /* @__PURE__ */ a(
-                Y,
+                K,
                 {
-                  className: b(
+                  className: d(
                     "bear-w-4 bear-h-4 bear-shrink-0 bear-transition-transform",
-                    l && "bear-rotate-180"
+                    b && "bear-rotate-180"
                   ),
                   style: { color: "var(--bear-text-muted)" }
                 }
@@ -162,51 +146,53 @@ const xe = (A) => {
             ]
           }
         ),
-        l && /* @__PURE__ */ a(re, { children: /* @__PURE__ */ a(
-          "div",
+        /* @__PURE__ */ a(
+          Y,
           {
-            ref: T,
-            className: `${s}__menu bear-fixed bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden`,
+            open: b && !u,
+            ready: U,
             style: {
+              ...M,
               backgroundColor: "var(--bear-bg-primary)",
-              borderColor: "var(--bear-border-default)",
-              top: y.top,
-              left: y.left,
-              width: y.width,
-              zIndex: K
+              borderColor: "var(--bear-border-default)"
             },
-            role: "listbox",
-            children: /* @__PURE__ */ a("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: p.map((e) => /* @__PURE__ */ c(
+            zIndex: J,
+            openEffect: P,
+            closeEffect: A,
+            panelRef: C,
+            className: `${t}__menu bear-rounded-lg bear-border bear-shadow-lg bear-overflow-hidden`,
+            attributes: { role: "listbox" },
+            children: /* @__PURE__ */ a("div", { className: "bear-max-h-60 bear-overflow-y-auto", children: v.map((e) => /* @__PURE__ */ n(
               "button",
               {
                 type: "button",
                 disabled: e.disabled,
-                onClick: () => !e.disabled && W(e.value),
+                onClick: () => !e.disabled && V(e.value),
                 role: "option",
-                "aria-selected": e.value === t,
-                className: b(
-                  `${s}__option`,
+                "aria-selected": e.value === l,
+                className: d(
+                  `${t}__option`,
                   "bear-flex bear-items-center bear-justify-between bear-w-full bear-px-4 bear-py-2",
                   "bear-text-left bear-transition-colors",
                   e.disabled && "bear-cursor-not-allowed",
-                  e.value === t && "bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",
-                  !e.disabled && e.value !== t && "hover:bear-bg-[var(--bear-bg-tertiary)]"
+                  e.value === l && "bear-bg-bear-100 bear-text-bear-700 dark:bear-bg-bear-600/20 dark:bear-text-bear-300",
+                  !e.disabled && e.value !== l && "hover:bear-bg-[var(--bear-bg-tertiary)]"
                 ),
-                style: e.disabled ? { color: "var(--bear-text-muted)" } : e.value === t ? void 0 : { color: "var(--bear-text-secondary)" },
+                style: e.disabled ? { color: "var(--bear-text-muted)" } : e.value === l ? void 0 : { color: "var(--bear-text-secondary)" },
                 children: [
                   e.label,
-                  e.value === t && /* @__PURE__ */ a(ee, { className: "bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400" })
+                  e.value === l && /* @__PURE__ */ a(Q, { className: "bear-w-4 bear-h-4 bear-shrink-0 bear-text-bear-600 dark:bear-text-bear-400" })
                 ]
               },
               e.value
             )) })
           }
-        ) }),
-        v && /* @__PURE__ */ a("p", { className: "bear-text-sm bear-text-red-500", children: v })
+        ),
+        m && /* @__PURE__ */ a("p", { className: "bear-text-sm bear-text-red-500", children: m })
       ]
     }
   );
 };
 export {
-  xe as Select
+  ge as Select
 };

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

@@ -1,10 +1,11 @@
 import { ReactNode } from 'react';
+import { OverlayEffectProps } from '../../hooks/useFixedAnchorPosition';
 export interface SelectOption {
     value: string;
     label: string;
     disabled?: boolean;
 }
-export interface SelectProps {
+export interface SelectProps extends OverlayEffectProps {
     testId?: string;
     id?: string;
     /** Select options */

package/dist/components/Sidebar/Sidebar.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../utils/cn.cjs");require("react");const t=require("../Icon/index.cjs"),D=require("./components/SidebarItem/SidebarItem.cjs"),a=require("./Sidebar.const.cjs"),p=S=>{const{items:b,collapsed:r=!1,onCollapsedChange:o,width:_=a.SIDEBAR_WIDTH,collapsedWidth:I=a.SIDEBAR_COLLAPSED_WIDTH,header:d,footer:c,showHeader:E=!0,activeItemId:h,onItemClick:u,activeVariant:f="fill",fullHeight:A=!1,variant:s="default",position:l="left",className:C,style:x,testId:B}=S,R=r?I:_,m=l==="left"?"bear-border-r":"bear-border-l",v=E&&d;return e.jsxs("aside",{"data-testid":B,className:i.cn("Bear-Sidebar",`Bear-Sidebar--${s}`,r&&"Bear-Sidebar--collapsed","bear-flex bear-flex-col bear-h-full bear-transition-all bear-duration-300",A&&"bear-min-h-full",s==="default"&&m,a.SIDEBAR_VARIANT_STYLES[s],C),style:{width:R,...x},children:[v&&e.jsxs("div",{className:i.cn("Bear-Sidebar__header",a.SIDEBAR_HEADER_CLASSES),children:[!r&&d,o&&e.jsx("button",{type:"button",onClick:()=>o(!r),className:i.cn("Bear-Sidebar__toggle",a.SIDEBAR_TOGGLE_CLASSES),"aria-label":r?"Expand sidebar":"Collapse sidebar",children:r?l==="left"?e.jsx(t.ChevronRightIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):e.jsx(t.ChevronLeftIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):l==="left"?e.jsx(t.ChevronLeftIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):e.jsx(t.ChevronRightIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE})})]}),e.jsx("nav",{className:"Bear-Sidebar__nav bear-flex-1 bear-overflow-y-auto bear-px-2 bear-py-3 bear-space-y-1 bear-min-h-0",children:b.map(n=>e.jsx(D.SidebarItem,{item:n,isActive:n.id===h,collapsed:r,onClick:u,activeVariant:f},n.id))}),c&&e.jsx("div",{className:i.cn("Bear-Sidebar__footer",a.SIDEBAR_FOOTER_CLASSES),children:r?null:c})]})};exports.Sidebar=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../utils/cn.cjs");require("react");const s=require("@forgedevstack/bear-icons"),D=require("./components/SidebarItem/SidebarItem.cjs"),a=require("./Sidebar.const.cjs"),p=b=>{const{items:I,collapsed:r=!1,onCollapsedChange:o,width:_=a.SIDEBAR_WIDTH,collapsedWidth:E=a.SIDEBAR_COLLAPSED_WIDTH,header:d,footer:c,showHeader:h=!0,activeItemId:S,onItemClick:u,activeVariant:f="fill",fullHeight:A=!1,variant:t="default",position:l="left",className:C,style:B,testId:x}=b,R=r?E:_,m=l==="left"?"bear-border-r":"bear-border-l",v=h&&d;return e.jsxs("aside",{"data-testid":x,className:i.cn("Bear-Sidebar",`Bear-Sidebar--${t}`,r&&"Bear-Sidebar--collapsed","bear-flex bear-flex-col bear-h-full bear-transition-all bear-duration-300",A&&"bear-min-h-full",t==="default"&&m,a.SIDEBAR_VARIANT_STYLES[t],C),style:{width:R,...B},children:[v&&e.jsxs("div",{className:i.cn("Bear-Sidebar__header",a.SIDEBAR_HEADER_CLASSES),children:[!r&&d,o&&e.jsx("button",{type:"button",onClick:()=>o(!r),className:i.cn("Bear-Sidebar__toggle",a.SIDEBAR_TOGGLE_CLASSES),"aria-label":r?"Expand sidebar":"Collapse sidebar",children:r?l==="left"?e.jsx(s.ChevronRightIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):e.jsx(s.ChevronLeftIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):l==="left"?e.jsx(s.ChevronLeftIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE}):e.jsx(s.ChevronRightIcon,{size:a.SIDEBAR_TOGGLE_ICON_SIZE})})]}),e.jsx("nav",{className:"Bear-Sidebar__nav bear-flex-1 bear-overflow-y-auto bear-px-2 bear-py-3 bear-space-y-1 bear-min-h-0",children:I.map(n=>e.jsx(D.SidebarItem,{item:n,isActive:n.id===S,collapsed:r,onClick:u,activeVariant:f,activeItemId:S},n.id))}),c&&e.jsx("div",{className:i.cn("Bear-Sidebar__footer",a.SIDEBAR_FOOTER_CLASSES),children:r?null:c})]})};exports.Sidebar=p;

package/dist/components/Sidebar/Sidebar.js

@@ -1,20 +1,20 @@
-import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { jsxs as c, jsx as a } from "react/jsx-runtime";
 import { cn as r } from "../../utils/cn.js";
 import "react";
-import { ChevronRightIcon as c, ChevronLeftIcon as S } from "../Icon/index.js";
+import { ChevronRightIcon as S, ChevronLeftIcon as f } from "@forgedevstack/bear-icons";
 import { SidebarItem as x } from "./components/SidebarItem/SidebarItem.js";
 import { SIDEBAR_WIDTH as N, SIDEBAR_COLLAPSED_WIDTH as T, SIDEBAR_TOGGLE_ICON_SIZE as i, SIDEBAR_TOGGLE_CLASSES as y, SIDEBAR_HEADER_CLASSES as H, SIDEBAR_FOOTER_CLASSES as O, SIDEBAR_VARIANT_STYLES as g } from "./Sidebar.const.js";
-const V = (f) => {
+const V = (m) => {
   const {
-    items: m,
+    items: _,
     collapsed: e = !1,
     onCollapsedChange: d,
-    width: _ = N,
-    collapsedWidth: h = T,
+    width: h = N,
+    collapsedWidth: p = T,
     header: s,
     footer: n,
-    showHeader: p = !0,
-    activeItemId: E,
+    showHeader: E = !0,
+    activeItemId: b,
     onItemClick: I,
     activeVariant: A = "fill",
     fullHeight: B = !1,
@@ -23,8 +23,8 @@ const V = (f) => {
     className: u,
     style: C,
     testId: v
-  } = f, D = e ? h : _, R = t === "left" ? "bear-border-r" : "bear-border-l", L = p && s;
-  return /* @__PURE__ */ b(
+  } = m, D = e ? p : h, R = t === "left" ? "bear-border-r" : "bear-border-l", L = E && s;
+  return /* @__PURE__ */ c(
     "aside",
     {
       "data-testid": v,
@@ -40,7 +40,7 @@ const V = (f) => {
       ),
       style: { width: D, ...C },
       children: [
-        L && /* @__PURE__ */ b("div", { className: r("Bear-Sidebar__header", H), children: [
+        L && /* @__PURE__ */ c("div", { className: r("Bear-Sidebar__header", H), children: [
           !e && s,
           d && /* @__PURE__ */ a(
             "button",
@@ -49,18 +49,19 @@ const V = (f) => {
               onClick: () => d(!e),
               className: r("Bear-Sidebar__toggle", y),
               "aria-label": e ? "Expand sidebar" : "Collapse sidebar",
-              children: e ? t === "left" ? /* @__PURE__ */ a(c, { size: i }) : /* @__PURE__ */ a(S, { size: i }) : t === "left" ? /* @__PURE__ */ a(S, { size: i }) : /* @__PURE__ */ a(c, { size: i })
+              children: e ? t === "left" ? /* @__PURE__ */ a(S, { size: i }) : /* @__PURE__ */ a(f, { size: i }) : t === "left" ? /* @__PURE__ */ a(f, { size: i }) : /* @__PURE__ */ a(S, { size: i })
             }
           )
         ] }),
-        /* @__PURE__ */ a("nav", { className: "Bear-Sidebar__nav bear-flex-1 bear-overflow-y-auto bear-px-2 bear-py-3 bear-space-y-1 bear-min-h-0", children: m.map((o) => /* @__PURE__ */ a(
+        /* @__PURE__ */ a("nav", { className: "Bear-Sidebar__nav bear-flex-1 bear-overflow-y-auto bear-px-2 bear-py-3 bear-space-y-1 bear-min-h-0", children: _.map((o) => /* @__PURE__ */ a(
           x,
           {
             item: o,
-            isActive: o.id === E,
+            isActive: o.id === b,
             collapsed: e,
             onClick: I,
-            activeVariant: A
+            activeVariant: A,
+            activeItemId: b
           },
           o.id
         )) }),

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

@@ -48,6 +48,6 @@ export interface SidebarItemComponentProps {
     collapsed?: boolean;
     depth?: number;
     onClick?: (item: SidebarItem) => void;
-    /** How active state is shown. Passed from Sidebar activeVariant. */
     activeVariant?: SidebarActiveVariant;
+    activeItemId?: string;
 }

package/dist/components/Sidebar/Sidebar.utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=(n,e)=>{if(!e)return!1;if(n.id===e)return!0;const r=n.children;return!r||r.length===0?!1:r.some(s=>t(s,e))};exports.sidebarItemContainsId=t;

package/dist/components/Sidebar/Sidebar.utils.d.ts

@@ -0,0 +1,2 @@
+import { SidebarItem } from './Sidebar.types';
+export declare const sidebarItemContainsId: (item: SidebarItem, activeItemId?: string) => boolean;

package/dist/components/Sidebar/Sidebar.utils.js

@@ -0,0 +1,11 @@
+const t = (e, r) => {
+  if (!r)
+    return !1;
+  if (e.id === r)
+    return !0;
+  const n = e.children;
+  return !n || n.length === 0 ? !1 : n.some((s) => t(s, r));
+};
+export {
+  t as sidebarItemContainsId
+};

package/dist/components/Sidebar/components/SidebarGroup/SidebarGroup.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("react"),t=require("../../../../utils/cn.cjs"),d=require("../../../Icon/index.cjs"),o=require("../../Sidebar.const.cjs"),S=n=>{const{title:a,children:c,collapsible:r=!1,defaultCollapsed:i=!1,className:l}=n,[s,u]=b.useState(i);return e.jsxs("div",{className:t.cn("Bear-Sidebar__group bear-mb-4",l),children:[a&&e.jsxs("button",{type:"button",onClick:()=>r&&u(!s),className:t.cn("Bear-Sidebar__group-title",o.SIDEBAR_GROUP_TITLE_CLASSES,r&&"bear-cursor-pointer hover:bear-text-zinc-600 dark:hover:bear-text-zinc-300"),children:[r&&e.jsx(d.ChevronDownIcon,{size:o.SIDEBAR_ICON_SIZE-2,className:t.cn("bear-transition-transform",s&&"-bear-rotate-90")}),a]}),!s&&e.jsx("div",{className:"Bear-Sidebar__group-content bear-space-y-1",children:c})]})};exports.SidebarGroup=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),a=require("../../../../utils/cn.cjs"),d=require("@forgedevstack/bear-icons"),o=require("../../Sidebar.const.cjs"),S=n=>{const{title:t,children:c,collapsible:r=!1,defaultCollapsed:i=!1,className:l}=n,[s,b]=u.useState(i);return e.jsxs("div",{className:a.cn("Bear-Sidebar__group bear-mb-4",l),children:[t&&e.jsxs("button",{type:"button",onClick:()=>r&&b(!s),className:a.cn("Bear-Sidebar__group-title",o.SIDEBAR_GROUP_TITLE_CLASSES,r&&"bear-cursor-pointer hover:bear-text-zinc-600 dark:hover:bear-text-zinc-300"),children:[r&&e.jsx(d.ChevronDownIcon,{size:o.SIDEBAR_ICON_SIZE-2,className:a.cn("bear-transition-transform",s&&"-bear-rotate-90")}),t]}),!s&&e.jsx("div",{className:"Bear-Sidebar__group-content bear-space-y-1",children:c})]})};exports.SidebarGroup=S;

package/dist/components/Sidebar/components/SidebarGroup/SidebarGroup.js

@@ -1,7 +1,7 @@
 import { jsxs as t, jsx as s } from "react/jsx-runtime";
 import { useState as p } from "react";
 import { cn as a } from "../../../../utils/cn.js";
-import { ChevronDownIcon as b } from "../../../Icon/index.js";
+import { ChevronDownIcon as b } from "@forgedevstack/bear-icons";
 import { SIDEBAR_ICON_SIZE as d, SIDEBAR_GROUP_TITLE_CLASSES as S } from "../../Sidebar.const.js";
 const h = (i) => {
   const {

package/dist/components/Sidebar/components/SidebarItem/SidebarItem.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),d=require("react"),b=require("../../../../utils/cn.cjs"),f=require("../../../Icon/index.cjs"),r=require("../../Sidebar.const.cjs"),_=o=>{const{item:e,isActive:S,collapsed:i,depth:c=0,onClick:s,activeVariant:m="fill"}=o,[l,I]=d.useState(!1),t=e.children&&e.children.length>0,E=i?r.SIDEBAR_PADDING_BASE:r.SIDEBAR_PADDING_BASE+c*r.SIDEBAR_DEPTH_INDENT,h=d.useCallback(()=>{t&&I(n=>!n),e.onClick&&e.onClick(),s==null||s(e)},[t,e,s]),A=a.jsxs(a.Fragment,{children:[e.icon&&a.jsx("span",{className:"Bear-Sidebar__item-icon bear-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center",children:e.icon}),!i&&a.jsxs(a.Fragment,{children:[a.jsx("span",{className:"Bear-Sidebar__item-label bear-flex-1 bear-truncate",children:e.label}),e.badge&&a.jsx("span",{className:"Bear-Sidebar__item-badge bear-ml-auto",children:e.badge}),t&&a.jsx(f.ChevronDownIcon,{size:r.SIDEBAR_ICON_SIZE,className:b.cn("Bear-Sidebar__item-chevron bear-ml-1 bear-transition-transform bear-duration-200",l&&"bear-rotate-180")})]})]}),B=r.SIDEBAR_ITEM_ACTIVE_BY_VARIANT[m],u=b.cn("Bear-Sidebar__item",r.SIDEBAR_ITEM_BASE_CLASSES,S?`Bear-Sidebar__item--active ${B}`:r.SIDEBAR_ITEM_INACTIVE_CLASSES,e.disabled&&`Bear-Sidebar__item--disabled ${r.SIDEBAR_ITEM_DISABLED_CLASSES}`,i&&"Bear-Sidebar__item--collapsed bear-justify-center"),D=e.href?"a":"button";return a.jsxs("div",{className:"Bear-Sidebar__item-wrapper",children:[a.jsx(D,{href:e.href,onClick:h,disabled:e.disabled,className:u,style:{paddingLeft:E},title:i?e.label:void 0,children:A}),t&&l&&!i&&a.jsx("div",{className:"Bear-Sidebar__children bear-mt-1",children:e.children.map(n=>a.jsx(_,{item:n,isActive:!1,collapsed:i,depth:c+1,onClick:s},n.id))})]})};exports.SidebarItem=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),f=require("react"),o=require("../../../../utils/cn.cjs"),p=require("@forgedevstack/bear-icons"),r=require("../../Sidebar.const.cjs"),C=require("../../Sidebar.utils.cjs"),S=m=>{const{item:e,isActive:I,collapsed:i,depth:d=0,onClick:t,activeVariant:l="fill",activeItemId:n}=m,b=e.children??[],c=b.length>0,[_,E]=f.useState(()=>C.sidebarItemContainsId(e,n)),B=i?r.SIDEBAR_PADDING_BASE:r.SIDEBAR_PADDING_BASE+d*r.SIDEBAR_DEPTH_INDENT,h=()=>{c&&E(s=>!s),e.onClick&&e.onClick(),t==null||t(e)},A=c&&_&&!i,u=r.SIDEBAR_ITEM_ACTIVE_BY_VARIANT[l],D=o.cn("Bear-Sidebar__item",r.SIDEBAR_ITEM_BASE_CLASSES,I?`Bear-Sidebar__item--active ${u}`:r.SIDEBAR_ITEM_INACTIVE_CLASSES,e.disabled&&`Bear-Sidebar__item--disabled ${r.SIDEBAR_ITEM_DISABLED_CLASSES}`,i&&"Bear-Sidebar__item--collapsed bear-justify-center"),N=e.href?"a":"button";return a.jsxs("div",{className:"Bear-Sidebar__item-wrapper",children:[a.jsxs(N,{href:e.href,onClick:h,disabled:e.disabled,className:D,style:{paddingLeft:B},title:i?e.label:void 0,children:[e.icon&&a.jsx("span",{className:"Bear-Sidebar__item-icon bear-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center",children:e.icon}),!i&&a.jsxs("span",{className:"Bear-Sidebar__item-row bear-flex bear-items-center bear-flex-1 bear-min-w-0",children:[a.jsx("span",{className:"Bear-Sidebar__item-label bear-flex-1 bear-truncate",children:e.label}),e.badge&&a.jsx("span",{className:"Bear-Sidebar__item-badge bear-ml-auto",children:e.badge}),c&&a.jsx(p.ChevronDownIcon,{size:r.SIDEBAR_ICON_SIZE,className:o.cn("Bear-Sidebar__item-chevron bear-ml-1 bear-transition-transform bear-duration-200",_&&"bear-rotate-180")})]})]}),A&&a.jsx("div",{className:"Bear-Sidebar__children bear-mt-1",children:b.map(s=>a.jsx(S,{item:s,isActive:s.id===n,collapsed:i,depth:d+1,onClick:t,activeVariant:l,activeItemId:n},s.id))})]})};exports.SidebarItem=S;

package/dist/components/Sidebar/components/SidebarItem/SidebarItem.js

@@ -1,67 +1,71 @@
-import { jsxs as n, Fragment as d, jsx as a } from "react/jsx-runtime";
-import { useState as C, useCallback as D } from "react";
-import { cn as o } from "../../../../utils/cn.js";
-import { ChevronDownIcon as N } from "../../../Icon/index.js";
-import { SIDEBAR_ICON_SIZE as v, SIDEBAR_ITEM_DISABLED_CLASSES as u, SIDEBAR_ITEM_ACTIVE_BY_VARIANT as T, SIDEBAR_ITEM_INACTIVE_CLASSES as R, SIDEBAR_ITEM_BASE_CLASSES as g, SIDEBAR_PADDING_BASE as m, SIDEBAR_DEPTH_INDENT as k } from "../../Sidebar.const.js";
-const x = (_) => {
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { useState as N } from "react";
+import { cn as b } from "../../../../utils/cn.js";
+import { ChevronDownIcon as D } from "@forgedevstack/bear-icons";
+import { SIDEBAR_ITEM_DISABLED_CLASSES as v, SIDEBAR_ITEM_ACTIVE_BY_VARIANT as T, SIDEBAR_ITEM_INACTIVE_CLASSES as u, SIDEBAR_ITEM_BASE_CLASSES as R, SIDEBAR_PADDING_BASE as _, SIDEBAR_ICON_SIZE as x, SIDEBAR_DEPTH_INDENT as w } from "../../Sidebar.const.js";
+import { sidebarItemContainsId as g } from "../../Sidebar.utils.js";
+const L = (S) => {
   const {
     item: e,
-    isActive: b,
-    collapsed: r,
-    depth: l = 0,
-    onClick: i,
-    activeVariant: S = "fill"
-  } = _, [c, h] = C(!1), t = e.children && e.children.length > 0, E = r ? m : m + l * k, I = D(() => {
-    t && h((s) => !s), e.onClick && e.onClick(), i == null || i(e);
-  }, [t, e, i]), B = /* @__PURE__ */ n(d, { children: [
-    e.icon && /* @__PURE__ */ a("span", { className: "Bear-Sidebar__item-icon bear-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center", children: e.icon }),
-    !r && /* @__PURE__ */ n(d, { children: [
-      /* @__PURE__ */ a("span", { className: "Bear-Sidebar__item-label bear-flex-1 bear-truncate", children: e.label }),
-      e.badge && /* @__PURE__ */ a("span", { className: "Bear-Sidebar__item-badge bear-ml-auto", children: e.badge }),
-      t && /* @__PURE__ */ a(
-        N,
-        {
-          size: v,
-          className: o(
-            "Bear-Sidebar__item-chevron bear-ml-1 bear-transition-transform bear-duration-200",
-            c && "bear-rotate-180"
-          )
-        }
-      )
-    ] })
-  ] }), A = T[S], f = o(
+    isActive: I,
+    collapsed: a,
+    depth: c = 0,
+    onClick: t,
+    activeVariant: d = "fill",
+    activeItemId: s
+  } = S, m = e.children ?? [], n = m.length > 0, [o, h] = N(() => g(e, s)), E = a ? _ : _ + c * w, B = () => {
+    n && h((i) => !i), e.onClick && e.onClick(), t == null || t(e);
+  }, p = n && o && !a, f = T[d], A = b(
     "Bear-Sidebar__item",
-    g,
-    b ? `Bear-Sidebar__item--active ${A}` : R,
-    e.disabled && `Bear-Sidebar__item--disabled ${u}`,
-    r && "Bear-Sidebar__item--collapsed bear-justify-center"
-  ), p = e.href ? "a" : "button";
-  return /* @__PURE__ */ n("div", { className: "Bear-Sidebar__item-wrapper", children: [
-    /* @__PURE__ */ a(
-      p,
+    R,
+    I ? `Bear-Sidebar__item--active ${f}` : u,
+    e.disabled && `Bear-Sidebar__item--disabled ${v}`,
+    a && "Bear-Sidebar__item--collapsed bear-justify-center"
+  ), C = e.href ? "a" : "button";
+  return /* @__PURE__ */ l("div", { className: "Bear-Sidebar__item-wrapper", children: [
+    /* @__PURE__ */ l(
+      C,
       {
         href: e.href,
-        onClick: I,
+        onClick: B,
         disabled: e.disabled,
-        className: f,
+        className: A,
         style: { paddingLeft: E },
-        title: r ? e.label : void 0,
-        children: B
+        title: a ? e.label : void 0,
+        children: [
+          e.icon && /* @__PURE__ */ r("span", { className: "Bear-Sidebar__item-icon bear-shrink-0 bear-w-5 bear-h-5 bear-flex bear-items-center bear-justify-center", children: e.icon }),
+          !a && /* @__PURE__ */ l("span", { className: "Bear-Sidebar__item-row bear-flex bear-items-center bear-flex-1 bear-min-w-0", children: [
+            /* @__PURE__ */ r("span", { className: "Bear-Sidebar__item-label bear-flex-1 bear-truncate", children: e.label }),
+            e.badge && /* @__PURE__ */ r("span", { className: "Bear-Sidebar__item-badge bear-ml-auto", children: e.badge }),
+            n && /* @__PURE__ */ r(
+              D,
+              {
+                size: x,
+                className: b(
+                  "Bear-Sidebar__item-chevron bear-ml-1 bear-transition-transform bear-duration-200",
+                  o && "bear-rotate-180"
+                )
+              }
+            )
+          ] })
+        ]
       }
     ),
-    t && c && !r && /* @__PURE__ */ a("div", { className: "Bear-Sidebar__children bear-mt-1", children: e.children.map((s) => /* @__PURE__ */ a(
-      x,
+    p && /* @__PURE__ */ r("div", { className: "Bear-Sidebar__children bear-mt-1", children: m.map((i) => /* @__PURE__ */ r(
+      L,
       {
-        item: s,
-        isActive: !1,
-        collapsed: r,
-        depth: l + 1,
-        onClick: i
+        item: i,
+        isActive: i.id === s,
+        collapsed: a,
+        depth: c + 1,
+        onClick: t,
+        activeVariant: d,
+        activeItemId: s
       },
-      s.id
+      i.id
     )) })
   ] });
 };
 export {
-  x as SidebarItem
+  L as SidebarItem
 };