@forgedevstack/bear 1.3.3 → 1.3.4

package/dist/components/CommandPalette/CommandItem.js

@@ -0,0 +1,39 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { cn as l } from "../../utils/cn.js";
+import "react";
+import { formatShortcut as o } from "./CommandPalette.utils.js";
+const x = ({
+  command: e,
+  isHighlighted: t,
+  onSelect: b
+}) => /* @__PURE__ */ a(
+  "button",
+  {
+    type: "button",
+    onClick: b,
+    disabled: e.disabled,
+    className: l(
+      "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",
+      t ? "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",
+      e.disabled && "bear-opacity-50 bear-cursor-not-allowed"
+    ),
+    children: [
+      e.icon && /* @__PURE__ */ r("span", { className: "Bear-CommandPalette__item-icon bear-text-gray-500 dark:bear-text-zinc-400 bear-shrink-0", children: e.icon }),
+      /* @__PURE__ */ a("div", { className: "Bear-CommandPalette__item-content bear-flex-1 bear-min-w-0", children: [
+        /* @__PURE__ */ r("div", { className: "Bear-CommandPalette__item-label bear-text-sm bear-font-medium bear-truncate", children: e.label }),
+        e.description && /* @__PURE__ */ r("div", { className: "Bear-CommandPalette__item-description bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-truncate", children: e.description })
+      ] }),
+      e.shortcut && /* @__PURE__ */ r("div", { className: "Bear-CommandPalette__item-shortcut bear-flex bear-gap-1 bear-shrink-0", children: o(e.shortcut).map((i, n) => /* @__PURE__ */ r(
+        "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: i
+        },
+        n
+      )) })
+    ]
+  }
+);
+export {
+  x as CommandItem
+};

package/dist/components/CommandPalette/CommandPalette.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),Q=require("react-dom"),L=require("../../utils/cn.cjs"),v=require("./CommandPalette.const.cjs"),E=require("./CommandPalette.utils.cjs"),z=({command:s,isHighlighted:j,onSelect:m})=>r.jsxs("button",{type:"button",onClick:m,disabled:s.disabled,className:L.cn("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",j?"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",s.disabled&&"bear-opacity-50 bear-cursor-not-allowed"),children:[s.icon&&r.jsx("span",{className:"Bear-CommandPalette__item-icon bear-text-gray-500 dark:bear-text-zinc-400 bear-shrink-0",children:s.icon}),r.jsxs("div",{className:"Bear-CommandPalette__item-content bear-flex-1 bear-min-w-0",children:[r.jsx("div",{className:"Bear-CommandPalette__item-label bear-text-sm bear-font-medium bear-truncate",children:s.label}),s.description&&r.jsx("div",{className:"Bear-CommandPalette__item-description bear-text-xs bear-text-gray-500 dark:bear-text-zinc-500 bear-truncate",children:s.description})]}),s.shortcut&&r.jsx("div",{className:"Bear-CommandPalette__item-shortcut bear-flex bear-gap-1 bear-shrink-0",children:E.formatShortcut(s.shortcut).map((C,f)=>r.jsx("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:C},f))})]}),V=({commands:s,open:j,onOpenChange:m,placeholder:C,showRecent:f=!0,maxRecent:h=v.COMMAND_PALETTE_MAX_RECENT,recentIds:q,onRecentChange:g,groupByCategory:N=!1,filterFn:B=E.defaultFilterFn,triggerKey:D=v.COMMAND_PALETTE_TRIGGER_KEY,className:O,testId:R,translations:I,icon:K,footer:M})=>{const[H,F]=t.useState(!1),[l,A]=t.useState(""),[n,k]=t.useState(0),[G,U]=t.useState([]),S=t.useRef(null),P=t.useRef(null),u=j??H,i=t.useCallback(e=>{m==null||m(e),F(e)},[m]),b=q??G,T=t.useCallback(e=>{g==null||g(e),U(e)},[g]),y=t.useMemo(()=>({...v.COMMAND_PALETTE_DEFAULT_TRANSLATIONS,...I}),[I]),x=t.useMemo(()=>l.trim()?s.filter(e=>B(e,l)):s,[s,l,B]),d=t.useMemo(()=>!f||l.trim()?[]:b.slice(0,h).map(e=>s.find(a=>a.id===e)).filter(Boolean),[f,l,b,h,s]),_=t.useMemo(()=>N?E.groupCommandsByCategory(x):null,[x,N]),c=t.useMemo(()=>{const e=[];return d.length>0&&e.push(...d),e.push(...x.filter(a=>!b.includes(a.id))),e},[d,x,b]);t.useEffect(()=>{const e=a=>{(a.metaKey||a.ctrlKey)&&a.key.toLowerCase()===D&&(a.preventDefault(),i(!u)),a.key==="Escape"&&u&&(a.preventDefault(),i(!1))};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[u,D,i]),t.useEffect(()=>{u&&(A(""),k(0),setTimeout(()=>{var e;return(e=S.current)==null?void 0:e.focus()},50))},[u]),t.useEffect(()=>{if(n>=0&&P.current){const a=P.current.querySelectorAll("[data-command-item]")[n];a&&a.scrollIntoView({block:"nearest"})}},[n]);const p=t.useCallback(e=>{const a=[e.id,...b.filter(o=>o!==e.id)].slice(0,h);T(a),i(!1),e.onSelect()},[b,h,T,i]),X=t.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),k(a=>a<c.length-1?a+1:0);break;case"ArrowUp":e.preventDefault(),k(a=>a>0?a-1:c.length-1);break;case"Enter":e.preventDefault(),c[n]&&!c[n].disabled&&p(c[n]);break;case"Escape":e.preventDefault(),i(!1);break}},[c,n,p,i]);return u&&typeof document<"u"?Q.createPortal(r.jsxs("div",{className:L.cn("Bear-CommandPalette bear-fixed bear-inset-0 bear-flex bear-items-start bear-justify-center bear-pt-[15vh]",O),style:{zIndex:v.COMMAND_PALETTE_Z_INDEX},"data-testid":R,children:[r.jsx("div",{className:"Bear-CommandPalette__backdrop bear-absolute bear-inset-0 bear-bg-black/50 bear-backdrop-blur-sm",onClick:()=>i(!1)}),r.jsxs("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:[r.jsxs("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:[K??r.jsx("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:r.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"})}),r.jsx("input",{ref:S,type:"text",value:l,onChange:e=>{A(e.target.value),k(0)},onKeyDown:X,placeholder:C||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"}),r.jsx("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"})]}),r.jsx("div",{ref:P,className:"Bear-CommandPalette__list bear-max-h-[60vh] bear-overflow-y-auto",children:c.length===0?r.jsx("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}):r.jsxs(r.Fragment,{children:[d.length>0&&!l.trim()&&r.jsxs("div",{className:"Bear-CommandPalette__group",children:[r.jsx("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,a)=>r.jsx("div",{"data-command-item":!0,children:r.jsx(z,{command:e,isHighlighted:n===a,onSelect:()=>p(e)})},`recent-${e.id}`))]}),N&&_?_.map(e=>{const a=d.length+_.slice(0,_.indexOf(e)).reduce((o,w)=>o+w.commands.length,0);return r.jsxs("div",{className:"Bear-CommandPalette__group",children:[r.jsx("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((o,w)=>r.jsx("div",{"data-command-item":!0,children:r.jsx(z,{command:o,isHighlighted:n===a+w,onSelect:()=>p(o)})},o.id))]},e.name)}):r.jsxs("div",{className:"Bear-CommandPalette__group",children:[!l.trim()&&d.length>0&&r.jsx("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}),x.filter(e=>!b.includes(e.id)||l.trim()).map((e,a)=>r.jsx("div",{"data-command-item":!0,children:r.jsx(z,{command:e,isHighlighted:n===d.length+a,onSelect:()=>p(e)})},e.id))]})]})}),M&&r.jsx("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})]})]}),document.body):null};exports.CommandPalette=V;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),t=require("react"),Q=require("react-dom"),V=require("../../utils/cn.cjs"),W=require("../../hooks/useFocusTrap/useFocusTrap.cjs"),_=require("./CommandPalette.const.cjs"),B=require("./CommandPalette.utils.cjs"),P=require("./CommandItem.cjs"),Y=({commands:m,open:S,onOpenChange:f,placeholder:L,showRecent:w=!0,maxRecent:p=_.COMMAND_PALETTE_MAX_RECENT,recentIds:q,onRecentChange:h,groupByCategory:v=!1,filterFn:E=B.defaultFilterFn,triggerKey:I=_.COMMAND_PALETTE_TRIGGER_KEY,className:R,testId:F,translations:z,icon:O,footer:D})=>{const[K,H]=t.useState(!1),[n,T]=t.useState(""),[s,g]=t.useState(0),[G,U]=t.useState([]),C=t.useRef(null),j=t.useRef(null),M=t.useRef(null),i=S??K,l=t.useCallback(e=>{f==null||f(e),H(e)},[f]);W.useFocusTrap(M,{enabled:i,initialFocusRef:C,onEscape:()=>l(!1)});const c=q??G,A=t.useCallback(e=>{h==null||h(e),U(e)},[h]),k=t.useMemo(()=>({..._.COMMAND_PALETTE_DEFAULT_TRANSLATIONS,...z}),[z]),u=t.useMemo(()=>n.trim()?m.filter(e=>E(e,n)):m,[m,n,E]),d=t.useMemo(()=>!w||n.trim()?[]:c.slice(0,p).map(e=>m.find(r=>r.id===e)).filter(Boolean),[w,n,c,p,m]),y=t.useMemo(()=>v?B.groupCommandsByCategory(u):null,[u,v]),o=t.useMemo(()=>{const e=[];return d.length>0&&e.push(...d),e.push(...u.filter(r=>!c.includes(r.id))),e},[d,u,c]);t.useEffect(()=>{const e=r=>{(r.metaKey||r.ctrlKey)&&r.key.toLowerCase()===I&&(r.preventDefault(),l(!i)),r.key==="Escape"&&i&&(r.preventDefault(),l(!1))};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[i,I,l]),t.useEffect(()=>{i&&(T(""),g(0),setTimeout(()=>{var e;return(e=C.current)==null?void 0:e.focus()},50))},[i]),t.useEffect(()=>{if(s>=0&&j.current){const r=j.current.querySelectorAll("[data-command-item]")[s];r&&r.scrollIntoView({block:"nearest"})}},[s]);const x=t.useCallback(e=>{const r=[e.id,...c.filter(b=>b!==e.id)].slice(0,p);A(r),l(!1),e.onSelect()},[c,p,A,l]),X=t.useCallback(e=>{switch(e.key){case"ArrowDown":e.preventDefault(),g(r=>r<o.length-1?r+1:0);break;case"ArrowUp":e.preventDefault(),g(r=>r>0?r-1:o.length-1);break;case"Enter":e.preventDefault(),o[s]&&!o[s].disabled&&x(o[s]);break;case"Escape":e.preventDefault(),l(!1);break}},[o,s,x,l]);return i&&typeof document<"u"?Q.createPortal(a.jsxs("div",{className:V.cn("Bear-CommandPalette bear-fixed bear-inset-0 bear-flex bear-items-start bear-justify-center bear-pt-[15vh]",R),style:{zIndex:_.COMMAND_PALETTE_Z_INDEX},"data-testid":F,children:[a.jsx("div",{className:"Bear-CommandPalette__backdrop bear-absolute bear-inset-0 bear-bg-black/50 bear-backdrop-blur-sm",onClick:()=>l(!1)}),a.jsxs("div",{ref:M,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:[a.jsxs("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:[O??a.jsx("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:a.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"})}),a.jsx("input",{ref:C,type:"text",value:n,onChange:e=>{T(e.target.value),g(0)},onKeyDown:X,placeholder:L||k.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"}),a.jsx("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"})]}),a.jsx("div",{ref:j,className:"Bear-CommandPalette__list bear-max-h-[60vh] bear-overflow-y-auto",children:o.length===0?a.jsx("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:k.noResults}):a.jsxs(a.Fragment,{children:[d.length>0&&!n.trim()&&a.jsxs("div",{className:"Bear-CommandPalette__group",children:[a.jsx("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:k.recentCommands}),d.map((e,r)=>a.jsx("div",{"data-command-item":!0,children:a.jsx(P.CommandItem,{command:e,isHighlighted:s===r,onSelect:()=>x(e)})},`recent-${e.id}`))]}),v&&y?y.map(e=>{const r=d.length+y.slice(0,y.indexOf(e)).reduce((b,N)=>b+N.commands.length,0);return a.jsxs("div",{className:"Bear-CommandPalette__group",children:[a.jsx("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,N)=>a.jsx("div",{"data-command-item":!0,children:a.jsx(P.CommandItem,{command:b,isHighlighted:s===r+N,onSelect:()=>x(b)})},b.id))]},e.name)}):a.jsxs("div",{className:"Bear-CommandPalette__group",children:[!n.trim()&&d.length>0&&a.jsx("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:k.allCommands}),u.filter(e=>!c.includes(e.id)||n.trim()).map((e,r)=>a.jsx("div",{"data-command-item":!0,children:a.jsx(P.CommandItem,{command:e,isHighlighted:s===d.length+r,onSelect:()=>x(e)})},e.id))]})]})}),D&&a.jsx("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:D})]})]}),document.body):null};exports.CommandPalette=Y;

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
 };