@forgedevstack/bear 1.3.3 → 1.3.5

package/dist/components/CommandPalette/CommandPalette.js

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

package/dist/components/Drawer/Drawer.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),U=require("react-dom"),C=require("../../context/BearProvider.cjs"),R=require("../../utils/cn.cjs");require("react");const j=require("../../utils/generateBearId.utils.cjs"),W=require("../../utils/useBearId.cjs"),e=require("../../constants/generals.const.cjs"),g=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.cjs"),$=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs"),V=require("../Backdrop/Backdrop.cjs"),l=require("../Box/Box.cjs"),t=require("./Drawer.const.cjs"),H=require("./helpers/DrawerOptionalHeader.cjs"),Y=require("./hooks/useDrawer.cjs"),z=d=>{const{isOpen:p,onClose:a,title:s,children:N,side:w=t.DRAWER_DEFAULT_SIDE,anchor:T,variant:c=t.DRAWER_DEFAULT_VARIANT,size:L=t.DRAWER_DEFAULT_SIZE,showCloseButton:E=e.BOOLEAN_TRUE,closeOnBackdrop:m=e.BOOLEAN_TRUE,closeOnEscape:q=e.BOOLEAN_TRUE,className:I,container:f,id:x,testId:F}=d,r=c===e.DRAWER_VARIANT_PERMANENT,n=c===e.DRAWER_VARIANT_TEMPORARY,{openEffect:_,closeEffect:u}=$.resolveOverlayEffects(d,g.OVERLAY_OPEN_EFFECT_DEFAULT),P=W.useBearId(e.COMPONENT_NAME_DRAWER),A=j.resolveBearId(x,P),{direction:h}=C.useBearDirectionOptional(),B=T??w,{isMounted:v,isPanelOpen:i}=Y.useDrawer({isOpen:r?e.BOOLEAN_TRUE:p,onClose:a,closeOnEscape:r?e.BOOLEAN_FALSE:q,openEffect:_,closeEffect:u,lockScroll:n,alwaysMounted:r}),y=i?_:u;if(!v)return null;const M=!!s||E,O=`${A}-title`,S=m&&n?()=>a():void 0,b=s?O:void 0,k=r?"complementary":"dialog",D=o.jsxs(l.Box,{id:A,"data-testid":F,className:R.cn("Bear-Drawer",`Bear-Drawer--${c}`),children:[n&&o.jsx(V.Backdrop,{open:i,keepMounted:!0,blur:!0,nested:!0,transitionDuration:t.DRAWER_ANIMATION_MS,className:"Bear-Drawer__backdrop",onClick:S}),o.jsxs(l.Box,{role:k,"aria-modal":n?e.BOOLEAN_TRUE:e.BOOLEAN_FALSE,"aria-labelledby":b,className:R.cn("Bear-Drawer__panel",`Bear-Drawer__panel--${B}`,`Bear-Drawer__panel--${L}`,`Bear-Drawer__panel--effect-${y}`,i&&"Bear-Drawer__panel--open",I),children:[o.jsx(H.DrawerOptionalHeader,{showHeader:M,side:B,title:s,titleId:O,showCloseButton:r?e.BOOLEAN_FALSE:E,onClose:a,direction:h}),o.jsx(l.Box,{className:"Bear-Drawer__body",children:N})]})]});return r?D:U.createPortal(D,f??document.body)};exports.Drawer=z;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),C=require("react"),j=require("react-dom"),W=require("../../context/BearProvider.cjs"),N=require("../../utils/cn.cjs"),g=require("../../utils/generateBearId.utils.cjs"),$=require("../../utils/useBearId.cjs"),V=require("../../hooks/useFocusTrap/useFocusTrap.cjs"),e=require("../../constants/generals.const.cjs"),H=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.cjs"),Y=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs"),z=require("../Backdrop/Backdrop.cjs"),l=require("../Box/Box.cjs"),t=require("./Drawer.const.cjs"),Z=require("./helpers/DrawerOptionalHeader.cjs"),G=require("./hooks/useDrawer.cjs"),J=d=>{const{isOpen:w,onClose:s,title:c,children:T,side:f=t.DRAWER_DEFAULT_SIDE,anchor:q,variant:i=t.DRAWER_DEFAULT_VARIANT,size:I=t.DRAWER_DEFAULT_SIZE,showCloseButton:u=e.BOOLEAN_TRUE,closeOnBackdrop:L=e.BOOLEAN_TRUE,closeOnEscape:E=e.BOOLEAN_TRUE,className:m,container:x,id:F,testId:b}=d,r=i===e.DRAWER_VARIANT_PERMANENT,o=i===e.DRAWER_VARIANT_TEMPORARY,{openEffect:_,closeEffect:A}=Y.resolveOverlayEffects(d,H.OVERLAY_OPEN_EFFECT_DEFAULT),v=$.useBearId(e.COMPONENT_NAME_DRAWER),B=g.resolveBearId(F,v),{direction:P}=W.useBearDirectionOptional(),O=q??f,{isMounted:h,isPanelOpen:a}=G.useDrawer({isOpen:r?e.BOOLEAN_TRUE:w,onClose:s,closeOnEscape:r?e.BOOLEAN_FALSE:E,openEffect:_,closeEffect:A,lockScroll:o,alwaysMounted:r}),y=a?_:A,D=C.useRef(null);if(V.useFocusTrap(D,{enabled:o&&a,onEscape:E?s:void 0}),!h)return null;const M=!!c||u,R=`${B}-title`,S=L&&o?()=>s():void 0,k=c?R:void 0,U=r?"complementary":"dialog",p=n.jsxs(l.Box,{id:B,"data-testid":b,className:N.cn("Bear-Drawer",`Bear-Drawer--${i}`),children:[o&&n.jsx(z.Backdrop,{open:a,keepMounted:!0,blur:!0,nested:!0,transitionDuration:t.DRAWER_ANIMATION_MS,className:"Bear-Drawer__backdrop",onClick:S}),n.jsxs(l.Box,{ref:D,role:U,tabIndex:-1,"aria-modal":o?e.BOOLEAN_TRUE:e.BOOLEAN_FALSE,"aria-labelledby":k,className:N.cn("Bear-Drawer__panel",`Bear-Drawer__panel--${O}`,`Bear-Drawer__panel--${I}`,`Bear-Drawer__panel--effect-${y}`,a&&"Bear-Drawer__panel--open",m),children:[n.jsx(Z.DrawerOptionalHeader,{showHeader:M,side:O,title:c,titleId:R,showCloseButton:r?e.BOOLEAN_FALSE:u,onClose:s,direction:P}),n.jsx(l.Box,{className:"Bear-Drawer__body",children:T})]})]});return r?p:j.createPortal(p,x??document.body)};exports.Drawer=J;

package/dist/components/Drawer/Drawer.js

@@ -1,101 +1,107 @@
-import { jsxs as R, jsx as i } from "react/jsx-runtime";
-import { createPortal as $ } from "react-dom";
-import { useBearDirectionOptional as x } from "../../context/BearProvider.js";
-import { cn as B } from "../../utils/cn.js";
-import "react";
-import { resolveBearId as V } from "../../utils/generateBearId.utils.js";
-import { useBearId as g } from "../../utils/useBearId.js";
-import { BOOLEAN_TRUE as r, COMPONENT_NAME_DRAWER as j, BOOLEAN_FALSE as l, DRAWER_VARIANT_TEMPORARY as H, DRAWER_VARIANT_PERMANENT as Y } from "../../constants/generals.const.js";
-import { OVERLAY_OPEN_EFFECT_DEFAULT as z } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.js";
-import { resolveOverlayEffects as Z } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
-import { Backdrop as q } from "../Backdrop/Backdrop.js";
+import { jsxs as B, jsx as l } from "react/jsx-runtime";
+import { useRef as $ } from "react";
+import { createPortal as V } from "react-dom";
+import { useBearDirectionOptional as g } from "../../context/BearProvider.js";
+import { cn as O } from "../../utils/cn.js";
+import { resolveBearId as j } from "../../utils/generateBearId.utils.js";
+import { useBearId as H } from "../../utils/useBearId.js";
+import { useFocusTrap as Y } from "../../hooks/useFocusTrap/useFocusTrap.js";
+import { BOOLEAN_TRUE as o, COMPONENT_NAME_DRAWER as z, BOOLEAN_FALSE as i, DRAWER_VARIANT_TEMPORARY as Z, DRAWER_VARIANT_PERMANENT as q } from "../../constants/generals.const.js";
+import { OVERLAY_OPEN_EFFECT_DEFAULT as G } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.const.js";
+import { resolveOverlayEffects as J } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
+import { Backdrop as K } from "../Backdrop/Backdrop.js";
 import { Box as c } from "../Box/Box.js";
-import { DRAWER_DEFAULT_SIDE as G, DRAWER_DEFAULT_VARIANT as J, DRAWER_DEFAULT_SIZE as K, DRAWER_ANIMATION_MS as Q } from "./Drawer.const.js";
-import { DrawerOptionalHeader as X } from "./helpers/DrawerOptionalHeader.js";
-import { useDrawer as ee } from "./hooks/useDrawer.js";
-const Ae = (d) => {
+import { DRAWER_DEFAULT_SIDE as Q, DRAWER_DEFAULT_VARIANT as X, DRAWER_DEFAULT_SIZE as ee, DRAWER_ANIMATION_MS as re } from "./Drawer.const.js";
+import { DrawerOptionalHeader as oe } from "./helpers/DrawerOptionalHeader.js";
+import { useDrawer as ae } from "./hooks/useDrawer.js";
+const Be = (d) => {
   const {
-    isOpen: O,
-    onClose: t,
-    title: a,
-    children: u,
-    side: N = G,
-    anchor: w,
-    variant: n = J,
-    size: T = K,
-    showCloseButton: m = r,
-    closeOnBackdrop: I = r,
-    closeOnEscape: M = r,
-    className: h,
-    container: k,
-    id: v,
+    isOpen: N,
+    onClose: a,
+    title: n,
+    children: w,
+    side: T = Q,
+    anchor: I,
+    variant: s = X,
+    size: b = ee,
+    showCloseButton: m = o,
+    closeOnBackdrop: v = o,
+    closeOnEscape: p = o,
+    className: M,
+    container: h,
+    id: k,
     testId: y
-  } = d, e = n === Y, o = n === H, { openEffect: p, closeEffect: _ } = Z(d, z), C = g(j), E = V(v, C), { direction: L } = x(), f = w ?? N, { isMounted: b, isPanelOpen: s } = ee({
-    isOpen: e ? r : O,
-    onClose: t,
-    closeOnEscape: e ? l : M,
-    openEffect: p,
+  } = d, e = s === q, r = s === Z, { openEffect: E, closeEffect: _ } = J(d, G), C = H(z), f = j(k, C), { direction: F } = g(), A = I ?? T, { isMounted: L, isPanelOpen: t } = ae({
+    isOpen: e ? o : N,
+    onClose: a,
+    closeOnEscape: e ? i : p,
+    openEffect: E,
     closeEffect: _,
-    lockScroll: o,
+    lockScroll: r,
     alwaysMounted: e
-  }), F = s ? p : _;
-  if (!b)
+  }), P = t ? E : _, D = $(null);
+  if (Y(D, {
+    enabled: r && t,
+    onEscape: p ? a : void 0
+  }), !L)
     return null;
-  const P = !!a || m, A = `${E}-title`, W = I && o ? () => t() : void 0, S = a ? A : void 0, U = e ? "complementary" : "dialog", D = /* @__PURE__ */ R(
+  const W = !!n || m, R = `${f}-title`, S = v && r ? () => a() : void 0, x = n ? R : void 0, U = e ? "complementary" : "dialog", u = /* @__PURE__ */ B(
     c,
     {
-      id: E,
+      id: f,
       "data-testid": y,
-      className: B("Bear-Drawer", `Bear-Drawer--${n}`),
+      className: O("Bear-Drawer", `Bear-Drawer--${s}`),
       children: [
-        o && /* @__PURE__ */ i(
-          q,
+        r && /* @__PURE__ */ l(
+          K,
           {
-            open: s,
+            open: t,
             keepMounted: !0,
             blur: !0,
             nested: !0,
-            transitionDuration: Q,
+            transitionDuration: re,
             className: "Bear-Drawer__backdrop",
-            onClick: W
+            onClick: S
           }
         ),
-        /* @__PURE__ */ R(
+        /* @__PURE__ */ B(
           c,
           {
+            ref: D,
             role: U,
-            "aria-modal": o ? r : l,
-            "aria-labelledby": S,
-            className: B(
+            tabIndex: -1,
+            "aria-modal": r ? o : i,
+            "aria-labelledby": x,
+            className: O(
               "Bear-Drawer__panel",
-              `Bear-Drawer__panel--${f}`,
-              `Bear-Drawer__panel--${T}`,
-              `Bear-Drawer__panel--effect-${F}`,
-              s && "Bear-Drawer__panel--open",
-              h
+              `Bear-Drawer__panel--${A}`,
+              `Bear-Drawer__panel--${b}`,
+              `Bear-Drawer__panel--effect-${P}`,
+              t && "Bear-Drawer__panel--open",
+              M
             ),
             children: [
-              /* @__PURE__ */ i(
-                X,
+              /* @__PURE__ */ l(
+                oe,
                 {
-                  showHeader: P,
-                  side: f,
-                  title: a,
-                  titleId: A,
-                  showCloseButton: e ? l : m,
-                  onClose: t,
-                  direction: L
+                  showHeader: W,
+                  side: A,
+                  title: n,
+                  titleId: R,
+                  showCloseButton: e ? i : m,
+                  onClose: a,
+                  direction: F
                 }
               ),
-              /* @__PURE__ */ i(c, { className: "Bear-Drawer__body", children: u })
+              /* @__PURE__ */ l(c, { className: "Bear-Drawer__body", children: w })
             ]
           }
         )
       ]
     }
   );
-  return e ? D : $(D, k ?? document.body);
+  return e ? u : V(u, h ?? document.body);
 };
 export {
-  Ae as Drawer
+  Be as Drawer
 };

package/dist/components/EmptyState/EmptyState.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("../Box/Box.cjs"),I=require("../Flex/Flex.cjs"),E=require("../Typography/Typography.cjs"),a=require("../../utils/cn.cjs");require("react");const g=require("../../utils/generateBearId.utils.cjs"),N=require("../../utils/useBearId.cjs"),t=require("./EmptyState.const.cjs"),h=d=>{const{icon:l,title:S,description:r,action:c,secondaryAction:n,className:T,size:_=t.EMPTY_STATE_DEFAULT_SIZE,variant:p=t.EMPTY_STATE_DEFAULT_VARIANT,preset:i=t.EMPTY_STATE_DEFAULT_PRESET,id:m,testId:y}=d,u=N.useBearId("EmptyState"),B=g.resolveBearId(m,u),s=t.EMPTY_STATE_SIZE_CLASSES[_],x=t.EMPTY_STATE_PRESET_ICON[i],A=l??e.jsx(x,{className:"bear-w-full bear-h-full"});return e.jsxs(o.Box,{id:B,"data-testid":y,className:a.cn("Bear-EmptyState",p==="card"&&"Bear-EmptyState--card",`Bear-EmptyState--${i}`,s.padding,T),children:[e.jsx(o.Box,{className:a.cn("Bear-EmptyState__icon",s.icon),children:A}),e.jsx(E.Typography,{className:a.cn("Bear-EmptyState__title",s.title),children:S}),r&&e.jsx(E.Typography,{className:a.cn("Bear-EmptyState__description",s.desc),children:r}),(c||n)&&e.jsxs(I.Flex,{className:"Bear-EmptyState__actions",align:"center",gap:3,children:[c,n]})]})};exports.EmptyState=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),T=require("../Box/Box.cjs"),I=require("../Flex/Flex.cjs"),_=require("../Typography/Typography.cjs"),r=require("../../utils/cn.cjs");require("react");const M=require("../../utils/generateBearId.utils.cjs"),g=require("../../utils/useBearId.cjs"),e=require("./EmptyState.const.cjs"),h=d=>{const{icon:l,title:S,description:c,action:n,secondaryAction:i,className:p,size:m=e.EMPTY_STATE_DEFAULT_SIZE,variant:u=e.EMPTY_STATE_DEFAULT_VARIANT,preset:a=e.EMPTY_STATE_DEFAULT_PRESET,id:y,testId:A}=d,P=g.useBearId(e.COMPONENT_NAME_EMPTY_STATE),B=M.resolveBearId(y,P),s=e.EMPTY_STATE_SIZE_CLASSES[m],N=e.EMPTY_STATE_PRESET_ICON[a],x=l??t.jsx(N,{className:"bear-w-full bear-h-full"}),o=e.EMPTY_STATE_PRESET_DEFAULTS[a]??e.EMPTY_STATE_PRESET_DEFAULTS.empty,E=c!==void 0?c:o.description;return t.jsxs(T.Box,{id:B,"data-testid":A,className:r.cn("Bear-EmptyState",u==="card"&&"Bear-EmptyState--card",`Bear-EmptyState--${a}`,s.padding,p),children:[t.jsx(T.Box,{className:r.cn("Bear-EmptyState__icon",s.icon),children:x}),t.jsx(_.Typography,{className:r.cn("Bear-EmptyState__title",s.title),children:S??o.title}),E&&t.jsx(_.Typography,{className:r.cn("Bear-EmptyState__description",s.desc),children:E}),(n||i)&&t.jsxs(I.Flex,{className:"Bear-EmptyState__actions",align:"center",gap:3,children:[n,i]})]})};exports.EmptyState=h;

package/dist/components/EmptyState/EmptyState.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("../../constants/generals.const.cjs"),e=require("./helpers/EmptyStateErrorSvg.cjs"),T=require("./helpers/EmptyStateInboxSvg.cjs"),t=require("./helpers/EmptyStateSearchSvg.cjs"),S=E.SIZE_MD,_=E.VARIANT_DEFAULT,r=E.EMPTY_STATE_PRESET_EMPTY,a={[E.EMPTY_STATE_PRESET_EMPTY]:T.EmptyStateInboxSvg,[E.EMPTY_STATE_PRESET_INBOX]:T.EmptyStateInboxSvg,[E.EMPTY_STATE_PRESET_SEARCH]:t.EmptyStateSearchSvg,[E.EMPTY_STATE_PRESET_ERROR]:e.EmptyStateErrorSvg},A={sm:{icon:"bear-w-12 bear-h-12",title:"bear-text-lg",desc:"bear-text-sm",padding:"bear-py-6 bear-px-4"},md:{icon:"bear-w-16 bear-h-16",title:"bear-text-xl",desc:"bear-text-base",padding:"bear-py-10 bear-px-6"},lg:{icon:"bear-w-20 bear-h-20",title:"bear-text-2xl",desc:"bear-text-lg",padding:"bear-py-14 bear-px-8"}};exports.EMPTY_STATE_DEFAULT_PRESET=r;exports.EMPTY_STATE_DEFAULT_SIZE=S;exports.EMPTY_STATE_DEFAULT_VARIANT=_;exports.EMPTY_STATE_PRESET_ICON=a;exports.EMPTY_STATE_SIZE_CLASSES=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../constants/generals.const.cjs"),r=require("./helpers/EmptyStateErrorSvg.cjs"),e=require("./helpers/EmptyStateInboxSvg.cjs"),E=require("./helpers/EmptyStateSearchSvg.cjs"),T=t.SIZE_MD,o=t.VARIANT_DEFAULT,a=t.EMPTY_STATE_PRESET_EMPTY,S="EmptyState",i={[t.EMPTY_STATE_PRESET_EMPTY]:e.EmptyStateInboxSvg,[t.EMPTY_STATE_PRESET_INBOX]:e.EmptyStateInboxSvg,[t.EMPTY_STATE_PRESET_SEARCH]:E.EmptyStateSearchSvg,[t.EMPTY_STATE_PRESET_ERROR]:r.EmptyStateErrorSvg,"no-data":e.EmptyStateInboxSvg,404:E.EmptyStateSearchSvg,offline:r.EmptyStateErrorSvg,"filter-empty":E.EmptyStateSearchSvg},n={empty:{title:"No items yet",description:"Get started by creating your first item."},inbox:{title:"Your inbox is empty",description:"All caught up! Check back later for new messages."},search:{title:"No results found",description:"Try adjusting your search or filter keywords."},error:{title:"Something went wrong",description:"We encountered an error loading this content."},"no-data":{title:"No data available",description:"There is no data to display right now."},404:{title:"Page not found",description:"The requested page or resource could not be located."},offline:{title:"Connection lost",description:"Please check your internet connection and try again."},"filter-empty":{title:"No matching filters",description:"No records match the selected filter criteria."}},_={sm:{icon:"bear-w-12 bear-h-12",title:"bear-text-lg",desc:"bear-text-sm",padding:"bear-py-6 bear-px-4"},md:{icon:"bear-w-16 bear-h-16",title:"bear-text-xl",desc:"bear-text-base",padding:"bear-py-10 bear-px-6"},lg:{icon:"bear-w-20 bear-h-20",title:"bear-text-2xl",desc:"bear-text-lg",padding:"bear-py-14 bear-px-8"}};exports.COMPONENT_NAME_EMPTY_STATE=S;exports.EMPTY_STATE_DEFAULT_PRESET=a;exports.EMPTY_STATE_DEFAULT_SIZE=T;exports.EMPTY_STATE_DEFAULT_VARIANT=o;exports.EMPTY_STATE_PRESET_DEFAULTS=n;exports.EMPTY_STATE_PRESET_ICON=i;exports.EMPTY_STATE_SIZE_CLASSES=_;

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

@@ -3,9 +3,14 @@ import { EmptyStatePreset } from './EmptyState.types';
 export declare const EMPTY_STATE_DEFAULT_SIZE: "md";
 export declare const EMPTY_STATE_DEFAULT_VARIANT: "default";
 export declare const EMPTY_STATE_DEFAULT_PRESET: EmptyStatePreset;
+export declare const COMPONENT_NAME_EMPTY_STATE = "EmptyState";
 export declare const EMPTY_STATE_PRESET_ICON: Record<EmptyStatePreset, ComponentType<{
     className?: string;
 }>>;
+export declare const EMPTY_STATE_PRESET_DEFAULTS: Record<EmptyStatePreset, {
+    title: string;
+    description: string;
+}>;
 export declare const EMPTY_STATE_SIZE_CLASSES: {
     readonly sm: {
         readonly icon: "bear-w-12 bear-h-12";

package/dist/components/EmptyState/EmptyState.const.js

@@ -1,13 +1,26 @@
-import { SIZE_MD as t, VARIANT_DEFAULT as e, EMPTY_STATE_PRESET_EMPTY as T, EMPTY_STATE_PRESET_ERROR as r, EMPTY_STATE_PRESET_SEARCH as S, EMPTY_STATE_PRESET_INBOX as _ } from "../../constants/generals.const.js";
-import { EmptyStateErrorSvg as a } from "./helpers/EmptyStateErrorSvg.js";
-import { EmptyStateInboxSvg as E } from "./helpers/EmptyStateInboxSvg.js";
-import { EmptyStateSearchSvg as b } from "./helpers/EmptyStateSearchSvg.js";
-const m = t, i = e, x = T, c = {
-  [T]: E,
-  [_]: E,
-  [S]: b,
-  [r]: a
-}, n = {
+import { SIZE_MD as i, VARIANT_DEFAULT as a, EMPTY_STATE_PRESET_EMPTY as o, EMPTY_STATE_PRESET_ERROR as n, EMPTY_STATE_PRESET_SEARCH as E, EMPTY_STATE_PRESET_INBOX as T } from "../../constants/generals.const.js";
+import { EmptyStateErrorSvg as r } from "./helpers/EmptyStateErrorSvg.js";
+import { EmptyStateInboxSvg as e } from "./helpers/EmptyStateInboxSvg.js";
+import { EmptyStateSearchSvg as t } from "./helpers/EmptyStateSearchSvg.js";
+const S = i, _ = a, p = o, b = "EmptyState", m = {
+  [o]: e,
+  [T]: e,
+  [E]: t,
+  [n]: r,
+  "no-data": e,
+  404: t,
+  offline: r,
+  "filter-empty": t
+}, A = {
+  empty: { title: "No items yet", description: "Get started by creating your first item." },
+  inbox: { title: "Your inbox is empty", description: "All caught up! Check back later for new messages." },
+  search: { title: "No results found", description: "Try adjusting your search or filter keywords." },
+  error: { title: "Something went wrong", description: "We encountered an error loading this content." },
+  "no-data": { title: "No data available", description: "There is no data to display right now." },
+  404: { title: "Page not found", description: "The requested page or resource could not be located." },
+  offline: { title: "Connection lost", description: "Please check your internet connection and try again." },
+  "filter-empty": { title: "No matching filters", description: "No records match the selected filter criteria." }
+}, P = {
   sm: {
     icon: "bear-w-12 bear-h-12",
     title: "bear-text-lg",
@@ -28,9 +41,11 @@ const m = t, i = e, x = T, c = {
   }
 };
 export {
-  x as EMPTY_STATE_DEFAULT_PRESET,
-  m as EMPTY_STATE_DEFAULT_SIZE,
-  i as EMPTY_STATE_DEFAULT_VARIANT,
-  c as EMPTY_STATE_PRESET_ICON,
-  n as EMPTY_STATE_SIZE_CLASSES
+  b as COMPONENT_NAME_EMPTY_STATE,
+  p as EMPTY_STATE_DEFAULT_PRESET,
+  S as EMPTY_STATE_DEFAULT_SIZE,
+  _ as EMPTY_STATE_DEFAULT_VARIANT,
+  A as EMPTY_STATE_PRESET_DEFAULTS,
+  m as EMPTY_STATE_PRESET_ICON,
+  P as EMPTY_STATE_SIZE_CLASSES
 };