@forgedevstack/bear 1.2.0 → 1.2.2

package/dist/components/MentionsInput/MentionsInput.js

@@ -1,136 +1,159 @@
-import { jsxs as L, jsx as f } from "react/jsx-runtime";
-import { useState as b, useRef as v, useCallback as P, useEffect as h } from "react";
-import { cn as k } from "../../utils/cn.js";
-import { defaultFilter as S } from "./MentionsInput.utils.js";
-const W = {
+import { jsxs as T, jsx as l } from "react/jsx-runtime";
+import { useState as c, useRef as p, useCallback as J, useEffect as d } from "react";
+import { cn as z } from "../../utils/cn.js";
+import { Portal as X } from "../Portal/Portal.js";
+import { defaultFilter as Y } from "./MentionsInput.utils.js";
+const C = 1e4, ee = {
   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"
-}, C = ({
-  value: p,
-  defaultValue: M = "",
-  onChange: n,
-  onMentionSelect: m,
-  options: T,
-  trigger: s = "@",
-  placeholder: $ = "Type @ to mention...",
-  disabled: z = !1,
-  maxSuggestions: j = 5,
-  filterOptions: A = S,
-  size: K = "md",
-  fullWidth: Q = !1,
-  className: B
+}, oe = ({
+  value: w,
+  defaultValue: A = "",
+  onChange: s,
+  onMentionSelect: x,
+  options: $,
+  trigger: o = "@",
+  placeholder: j = "Type @ to mention...",
+  disabled: I = !1,
+  maxSuggestions: B = 5,
+  filterOptions: K = Y,
+  size: Q = "md",
+  fullWidth: S = !1,
+  className: _
 }) => {
-  const [F, I] = b(M), [i, H] = b(""), [U, u] = b(!1), [l, d] = b(0), [x, V] = b(null), g = v(null), q = v(null), y = v(null), t = p ?? F, o = A(T, i).slice(0, j), E = U && i.length >= 0, D = P(() => {
-    const e = t.lastIndexOf(s);
+  const [F, N] = c(A), [f, H] = c(""), [U, h] = c(!1), [u, m] = c(0), [g, V] = c(null), L = p(null), v = p(null), y = p(null), q = p(null), [k, W] = c({ top: 0, left: 0, width: 0 }), a = w ?? F, b = K($, f).slice(0, B), M = U && f.length >= 0, E = M && b.length > 0, O = J(() => {
+    const e = a.lastIndexOf(o);
     if (e === -1) return { query: "", start: null };
-    const r = t.slice(e + s.length), a = r.indexOf(" ");
-    return { query: a === -1 ? r : r.slice(0, a), start: e };
-  }, [t, s]);
-  h(() => {
-    const { query: e, start: r } = D();
-    H(e), V(r), u(r !== null && !e.includes(" "));
-  }, [t, D]), h(() => {
-    d(0);
-  }, [i]), h(() => {
-    if (l >= 0 && y.current) {
-      const e = y.current.children[l];
+    const t = a.slice(e + o.length), r = t.indexOf(" ");
+    return { query: r === -1 ? t : t.slice(0, r), start: e };
+  }, [a, o]);
+  d(() => {
+    const { query: e, start: t } = O();
+    H(e), V(t), h(t !== null && !e.includes(" "));
+  }, [a, O]), d(() => {
+    m(0);
+  }, [f]), d(() => {
+    if (u >= 0 && y.current) {
+      const e = y.current.children[u];
       e == null || e.scrollIntoView({ block: "nearest" });
     }
-  }, [l]), h(() => {
-    const e = (r) => {
-      g.current && !g.current.contains(r.target) && u(!1);
+  }, [u]), d(() => {
+    if (!E) return;
+    const e = () => {
+      var r;
+      const t = (r = v.current) == null ? void 0 : r.getBoundingClientRect();
+      t && W({
+        top: t.bottom + 4,
+        left: Math.max(8, Math.min(t.left, window.innerWidth - t.width - 8)),
+        width: t.width
+      });
+    };
+    return e(), window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), () => {
+      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+    };
+  }, [E]), d(() => {
+    const e = (t) => {
+      var n, i;
+      const r = t.target;
+      (n = L.current) != null && n.contains(r) || (i = q.current) != null && i.contains(r) || h(!1);
     };
     return document.addEventListener("mousedown", e), () => document.removeEventListener("mousedown", e);
   }, []);
-  const O = (e) => {
-    const r = new RegExp(`${s}(\\w+)`, "g"), a = [];
-    let c;
-    for (; (c = r.exec(e)) !== null; )
-      a.push(c[1]);
-    return [...new Set(a)];
+  const R = (e) => {
+    const t = new RegExp(`${o}(\\w+)`, "g"), r = [];
+    let n;
+    for (; (n = t.exec(e)) !== null; )
+      r.push(n[1]);
+    return [...new Set(r)];
+  }, Z = (e) => {
+    const t = e.target.value;
+    w === void 0 && N(t), s == null || s(t, R(t));
+  }, D = (e) => {
+    var P;
+    if (g == null) return;
+    const t = a.slice(0, g), r = a.slice(g + o.length + f.length), n = `${o}${e.value}`, i = t + n + " " + r;
+    w === void 0 && N(i), s == null || s(i, R(i)), x == null || x(e), h(!1), (P = v.current) == null || P.focus();
   }, G = (e) => {
-    const r = e.target.value;
-    p === void 0 && I(r), n == null || n(r, O(r));
-  }, N = (e) => {
-    var R;
-    if (x == null) return;
-    const r = t.slice(0, x), a = t.slice(x + s.length + i.length), c = `${s}${e.value}`, w = r + c + " " + a;
-    p === void 0 && I(w), n == null || n(w, O(w)), m == null || m(e), u(!1), (R = q.current) == null || R.focus();
-  }, J = (e) => {
-    if (!(!E || o.length === 0)) {
+    if (!(!M || b.length === 0)) {
       if (e.key === "ArrowDown") {
-        e.preventDefault(), d((r) => Math.min(r + 1, o.length - 1));
+        e.preventDefault(), m((t) => Math.min(t + 1, b.length - 1));
         return;
       }
       if (e.key === "ArrowUp") {
-        e.preventDefault(), d((r) => Math.max(r - 1, 0));
+        e.preventDefault(), m((t) => Math.max(t - 1, 0));
         return;
       }
       if (e.key === "Enter" || e.key === "Tab") {
         e.preventDefault();
-        const r = o[l];
-        r && N(r);
+        const t = b[u];
+        t && D(t);
         return;
       }
-      e.key === "Escape" && u(!1);
+      e.key === "Escape" && h(!1);
     }
   };
-  return /* @__PURE__ */ L(
+  return /* @__PURE__ */ T(
     "div",
     {
-      ref: g,
-      className: k(
+      ref: L,
+      className: z(
         "Bear-MentionsInput bear-relative",
-        Q && "bear-w-full",
-        B
+        S && "bear-w-full",
+        _
       ),
       children: [
-        /* @__PURE__ */ f(
+        /* @__PURE__ */ l(
           "input",
           {
-            ref: q,
+            ref: v,
             type: "text",
-            value: t,
-            onChange: G,
-            onKeyDown: J,
-            placeholder: $,
-            disabled: z,
-            className: k(
+            value: a,
+            onChange: Z,
+            onKeyDown: G,
+            placeholder: j,
+            disabled: I,
+            className: z(
               "bear-w-full bear-rounded-lg bear-border bear-border-gray-300 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-900 bear-text-gray-900 dark:bear-text-white placeholder:bear-text-gray-500 dark:placeholder:bear-text-zinc-500 bear-outline-none bear-transition-colors focus:bear-border-bear-500 focus:bear-ring-2 focus:bear-ring-bear-500/20",
-              z && "bear-opacity-50 bear-cursor-not-allowed",
-              W[K]
+              I && "bear-opacity-50 bear-cursor-not-allowed",
+              ee[Q]
             )
           }
         ),
-        E && o.length > 0 && /* @__PURE__ */ f(
+        E && /* @__PURE__ */ l(X, { children: /* @__PURE__ */ l(
           "div",
           {
-            ref: y,
-            className: "bear-absolute bear-z-50 bear-mt-1 bear-w-full bear-max-h-48 bear-overflow-auto bear-rounded-lg bear-border bear-border-gray-200 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-py-1 bear-shadow-lg",
-            children: o.map((e, r) => /* @__PURE__ */ L(
+            ref: q,
+            className: "bear-fixed bear-rounded-lg bear-border bear-border-gray-200 dark:bear-border-zinc-600 bear-bg-white dark:bear-bg-zinc-800 bear-shadow-lg",
+            style: {
+              top: k.top,
+              left: k.left,
+              width: k.width,
+              zIndex: C
+            },
+            children: /* @__PURE__ */ l("div", { ref: y, className: "bear-max-h-48 bear-overflow-auto bear-py-1", children: b.map((e, t) => /* @__PURE__ */ T(
               "button",
               {
                 type: "button",
-                className: k(
+                className: z(
                   "bear-w-full bear-flex bear-items-center bear-gap-2 bear-px-3 bear-py-2 bear-text-left bear-text-gray-800 dark:bear-text-zinc-200 hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors",
-                  r === l && "bear-bg-gray-100 dark:bear-bg-zinc-700"
+                  t === u && "bear-bg-gray-100 dark:bear-bg-zinc-700"
                 ),
-                onMouseEnter: () => d(r),
-                onClick: () => N(e),
+                onMouseEnter: () => m(t),
+                onClick: () => D(e),
                 children: [
-                  e.avatar && /* @__PURE__ */ f("span", { className: "bear-shrink-0", children: e.avatar }),
-                  /* @__PURE__ */ f("span", { children: e.label })
+                  e.avatar && /* @__PURE__ */ l("span", { className: "bear-shrink-0", children: e.avatar }),
+                  /* @__PURE__ */ l("span", { children: e.label })
                 ]
               },
               e.value
-            ))
+            )) })
           }
-        )
+        ) })
       ]
     }
   );
 };
 export {
-  C as MentionsInput
+  oe as MentionsInput
 };

package/dist/components/Menu/Menu.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),d=require("react"),l=require("../../utils/cn.cjs"),k=({icon:t,disabled:e=!1,selected:s=!1,divider:i=!1,children:u,onClick:n,className:g,testId:f,...m})=>o.jsxs(o.Fragment,{children:[o.jsxs("div",{role:"menuitem",tabIndex:e?-1:0,className:l.cn("bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-2 bear-cursor-pointer bear-transition-colors","hover:bear-bg-gray-100 dark:hover:bear-bg-gray-700","focus:bear-outline-none focus:bear-bg-gray-100 dark:focus:bear-bg-gray-700",s&&"bear-bg-pink-50 dark:bear-bg-pink-900/20 bear-text-pink-600",e&&"bear-opacity-50 bear-cursor-not-allowed hover:bear-bg-transparent",g),onClick:e?void 0:n,onKeyDown:c=>{(c.key==="Enter"||c.key===" ")&&!e&&(n==null||n())},"data-testid":f,...m,children:[t&&o.jsx("span",{className:"bear-flex-shrink-0 bear-text-gray-500",children:t}),o.jsx("span",{className:"bear-flex-1 bear-text-sm",children:u})]}),i&&o.jsx(x,{})]}),x=({className:t})=>o.jsx("div",{className:l.cn("bear-h-px bear-bg-gray-200 dark:bear-bg-gray-700 bear-my-1",t)}),w=({open:t=!1,anchorEl:e,onClose:s,children:i,position:u="bottom-start",minWidth:n=180,maxHeight:g=300,className:f,testId:m,...c})=>{const y=d.useRef(null),[p,v]=d.useState({top:0,left:0});return d.useEffect(()=>{if(!t||!e)return;const r=e.getBoundingClientRect();let b=0,a=0;switch(u){case"bottom-start":b=r.bottom+4,a=r.left;break;case"bottom-end":b=r.bottom+4,a=r.right-n;break;case"top-start":b=r.top-4,a=r.left;break;case"top-end":b=r.top-4,a=r.right-n;break}v({top:b,left:a})},[t,e,u,n]),d.useEffect(()=>{if(!t)return;const r=a=>{y.current&&!y.current.contains(a.target)&&e&&!e.contains(a.target)&&(s==null||s())},b=a=>{a.key==="Escape"&&(s==null||s())};return document.addEventListener("mousedown",r),document.addEventListener("keydown",b),()=>{document.removeEventListener("mousedown",r),document.removeEventListener("keydown",b)}},[t,e,s]),t?o.jsx("div",{ref:y,role:"menu",className:l.cn("bear-fixed bear-z-50 bear-bg-white dark:bear-bg-gray-800","bear-border bear-border-gray-200 dark:bear-border-gray-700","bear-rounded-lg bear-shadow-lg bear-py-1","bear-overflow-y-auto",f),style:{top:p.top,left:p.left,minWidth:n,maxHeight:g},"data-testid":m,...c,children:i}):null};exports.Menu=w;exports.MenuDivider=x;exports.MenuItem=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),g=require("react"),p=require("../../utils/cn.cjs"),j=require("../Portal/Portal.cjs"),L=12e3,N=({icon:t,disabled:r=!1,selected:n=!1,divider:l=!1,children:f,onClick:a,className:d,testId:v,...y})=>o.jsxs(o.Fragment,{children:[o.jsxs("div",{role:"menuitem",tabIndex:r?-1:0,className:p.cn("bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-2 bear-cursor-pointer bear-transition-colors","hover:bear-bg-gray-100 dark:hover:bear-bg-gray-700","focus:bear-outline-none focus:bear-bg-gray-100 dark:focus:bear-bg-gray-700",n&&"bear-bg-pink-50 dark:bear-bg-pink-900/20 bear-text-pink-600",r&&"bear-opacity-50 bear-cursor-not-allowed hover:bear-bg-transparent",d),onClick:r?void 0:a,onKeyDown:m=>{(m.key==="Enter"||m.key===" ")&&!r&&(a==null||a())},"data-testid":v,...y,children:[t&&o.jsx("span",{className:"bear-flex-shrink-0 bear-text-gray-500",children:t}),o.jsx("span",{className:"bear-flex-1 bear-text-sm",children:f})]}),l&&o.jsx(h,{})]}),h=({className:t})=>o.jsx("div",{className:p.cn("bear-h-px bear-bg-gray-200 dark:bear-bg-gray-700 bear-my-1",t)}),R=({open:t=!1,anchorEl:r,onClose:n,children:l,position:f="bottom-start",minWidth:a=180,maxHeight:d=300,className:v,testId:y,...m})=>{const c=g.useRef(null),[x,M]=g.useState({top:0,left:0});return g.useLayoutEffect(()=>{if(!t||!r)return;const s=()=>{const e=r.getBoundingClientRect(),k=c.current,w=k?k.offsetHeight:Math.min(d,200);let u=0,i=0;switch(f){case"bottom-start":u=e.bottom+4,i=e.left;break;case"bottom-end":u=e.bottom+4,i=e.right-a;break;case"top-start":u=e.top-w-4,i=e.left;break;case"top-end":u=e.top-w-4,i=e.right-a;break}i=Math.max(8,Math.min(i,window.innerWidth-a-8));const E=window.innerHeight-w-8;u=Math.max(8,Math.min(u,E)),M({top:u,left:i})};s();const b=c.current&&typeof ResizeObserver<"u"?new ResizeObserver(s):null;return c.current&&b&&b.observe(c.current),window.addEventListener("resize",s),window.addEventListener("scroll",s,!0),()=>{b==null||b.disconnect(),window.removeEventListener("resize",s),window.removeEventListener("scroll",s,!0)}},[t,r,f,a,d]),g.useEffect(()=>{if(!t)return;const s=e=>{c.current&&!c.current.contains(e.target)&&r&&!r.contains(e.target)&&(n==null||n())},b=e=>{e.key==="Escape"&&(n==null||n())};return document.addEventListener("mousedown",s),document.addEventListener("keydown",b),()=>{document.removeEventListener("mousedown",s),document.removeEventListener("keydown",b)}},[t,r,n]),t?o.jsx(j.Portal,{children:o.jsx("div",{ref:c,role:"menu",className:p.cn("bear-fixed bear-bg-white dark:bear-bg-gray-800","bear-border bear-border-gray-200 dark:bear-border-gray-700","bear-rounded-lg bear-shadow-lg bear-py-1","bear-overflow-y-auto",v),style:{top:x.top,left:x.left,minWidth:a,maxHeight:d,zIndex:L},"data-testid":y,...m,children:l})}):null};exports.Menu=R;exports.MenuDivider=h;exports.MenuItem=N;

package/dist/components/Menu/Menu.js

@@ -1,111 +1,122 @@
-import { jsx as o, jsxs as l, Fragment as x } from "react/jsx-runtime";
-import { useRef as w, useState as h, useEffect as k } from "react";
-import { cn as p } from "../../utils/cn.js";
-const R = ({
+import { jsx as c, jsxs as x, Fragment as L } from "react/jsx-runtime";
+import { useRef as M, useState as N, useLayoutEffect as z, useEffect as R } from "react";
+import { cn as y } from "../../utils/cn.js";
+import { Portal as I } from "../Portal/Portal.js";
+const D = 12e3, H = ({
   icon: t,
-  disabled: e = !1,
-  selected: b = !1,
-  divider: u = !1,
-  children: d,
-  onClick: s,
-  className: f,
-  testId: g,
-  ...i
-}) => /* @__PURE__ */ l(x, { children: [
-  /* @__PURE__ */ l(
+  disabled: r = !1,
+  selected: n = !1,
+  divider: g = !1,
+  children: f,
+  onClick: a,
+  className: u,
+  testId: l,
+  ...p
+}) => /* @__PURE__ */ x(L, { children: [
+  /* @__PURE__ */ x(
     "div",
     {
       role: "menuitem",
-      tabIndex: e ? -1 : 0,
-      className: p(
+      tabIndex: r ? -1 : 0,
+      className: y(
         "bear-flex bear-items-center bear-gap-3 bear-px-4 bear-py-2 bear-cursor-pointer bear-transition-colors",
         "hover:bear-bg-gray-100 dark:hover:bear-bg-gray-700",
         "focus:bear-outline-none focus:bear-bg-gray-100 dark:focus:bear-bg-gray-700",
-        b && "bear-bg-pink-50 dark:bear-bg-pink-900/20 bear-text-pink-600",
-        e && "bear-opacity-50 bear-cursor-not-allowed hover:bear-bg-transparent",
-        f
+        n && "bear-bg-pink-50 dark:bear-bg-pink-900/20 bear-text-pink-600",
+        r && "bear-opacity-50 bear-cursor-not-allowed hover:bear-bg-transparent",
+        u
       ),
-      onClick: e ? void 0 : s,
-      onKeyDown: (c) => {
-        (c.key === "Enter" || c.key === " ") && !e && (s == null || s());
+      onClick: r ? void 0 : a,
+      onKeyDown: (m) => {
+        (m.key === "Enter" || m.key === " ") && !r && (a == null || a());
       },
-      "data-testid": g,
-      ...i,
+      "data-testid": l,
+      ...p,
       children: [
-        t && /* @__PURE__ */ o("span", { className: "bear-flex-shrink-0 bear-text-gray-500", children: t }),
-        /* @__PURE__ */ o("span", { className: "bear-flex-1 bear-text-sm", children: d })
+        t && /* @__PURE__ */ c("span", { className: "bear-flex-shrink-0 bear-text-gray-500", children: t }),
+        /* @__PURE__ */ c("span", { className: "bear-flex-1 bear-text-sm", children: f })
       ]
     }
   ),
-  u && /* @__PURE__ */ o(N, {})
-] }), N = ({ className: t }) => /* @__PURE__ */ o("div", { className: p("bear-h-px bear-bg-gray-200 dark:bear-bg-gray-700 bear-my-1", t) }), j = ({
+  g && /* @__PURE__ */ c(O, {})
+] }), O = ({ className: t }) => /* @__PURE__ */ c("div", { className: y("bear-h-px bear-bg-gray-200 dark:bear-bg-gray-700 bear-my-1", t) }), K = ({
   open: t = !1,
-  anchorEl: e,
-  onClose: b,
-  children: u,
-  position: d = "bottom-start",
-  minWidth: s = 180,
-  maxHeight: f = 300,
-  className: g,
-  testId: i,
-  ...c
+  anchorEl: r,
+  onClose: n,
+  children: g,
+  position: f = "bottom-start",
+  minWidth: a = 180,
+  maxHeight: u = 300,
+  className: l,
+  testId: p,
+  ...m
 }) => {
-  const m = w(null), [y, v] = h({ top: 0, left: 0 });
-  return k(() => {
-    if (!t || !e) return;
-    const r = e.getBoundingClientRect();
-    let n = 0, a = 0;
-    switch (d) {
-      case "bottom-start":
-        n = r.bottom + 4, a = r.left;
-        break;
-      case "bottom-end":
-        n = r.bottom + 4, a = r.right - s;
-        break;
-      case "top-start":
-        n = r.top - 4, a = r.left;
-        break;
-      case "top-end":
-        n = r.top - 4, a = r.right - s;
-        break;
-    }
-    v({ top: n, left: a });
-  }, [t, e, d, s]), k(() => {
+  const b = M(null), [w, h] = N({ top: 0, left: 0 });
+  return z(() => {
+    if (!t || !r) return;
+    const s = () => {
+      const e = r.getBoundingClientRect(), k = b.current, v = k ? k.offsetHeight : Math.min(u, 200);
+      let d = 0, i = 0;
+      switch (f) {
+        case "bottom-start":
+          d = e.bottom + 4, i = e.left;
+          break;
+        case "bottom-end":
+          d = e.bottom + 4, i = e.right - a;
+          break;
+        case "top-start":
+          d = e.top - v - 4, i = e.left;
+          break;
+        case "top-end":
+          d = e.top - v - 4, i = e.right - a;
+          break;
+      }
+      i = Math.max(8, Math.min(i, window.innerWidth - a - 8));
+      const E = window.innerHeight - v - 8;
+      d = Math.max(8, Math.min(d, E)), h({ top: d, left: i });
+    };
+    s();
+    const o = b.current && typeof ResizeObserver < "u" ? new ResizeObserver(s) : null;
+    return b.current && o && o.observe(b.current), window.addEventListener("resize", s), window.addEventListener("scroll", s, !0), () => {
+      o == null || o.disconnect(), window.removeEventListener("resize", s), window.removeEventListener("scroll", s, !0);
+    };
+  }, [t, r, f, a, u]), R(() => {
     if (!t) return;
-    const r = (a) => {
-      m.current && !m.current.contains(a.target) && e && !e.contains(a.target) && (b == null || b());
-    }, n = (a) => {
-      a.key === "Escape" && (b == null || b());
+    const s = (e) => {
+      b.current && !b.current.contains(e.target) && r && !r.contains(e.target) && (n == null || n());
+    }, o = (e) => {
+      e.key === "Escape" && (n == null || n());
     };
-    return document.addEventListener("mousedown", r), document.addEventListener("keydown", n), () => {
-      document.removeEventListener("mousedown", r), document.removeEventListener("keydown", n);
+    return document.addEventListener("mousedown", s), document.addEventListener("keydown", o), () => {
+      document.removeEventListener("mousedown", s), document.removeEventListener("keydown", o);
     };
-  }, [t, e, b]), t ? /* @__PURE__ */ o(
+  }, [t, r, n]), t ? /* @__PURE__ */ c(I, { children: /* @__PURE__ */ c(
     "div",
     {
-      ref: m,
+      ref: b,
       role: "menu",
-      className: p(
-        "bear-fixed bear-z-50 bear-bg-white dark:bear-bg-gray-800",
+      className: y(
+        "bear-fixed bear-bg-white dark:bear-bg-gray-800",
         "bear-border bear-border-gray-200 dark:bear-border-gray-700",
         "bear-rounded-lg bear-shadow-lg bear-py-1",
         "bear-overflow-y-auto",
-        g
+        l
       ),
       style: {
-        top: y.top,
-        left: y.left,
-        minWidth: s,
-        maxHeight: f
+        top: w.top,
+        left: w.left,
+        minWidth: a,
+        maxHeight: u,
+        zIndex: D
       },
-      "data-testid": i,
-      ...c,
-      children: u
+      "data-testid": p,
+      ...m,
+      children: g
     }
-  ) : null;
+  ) }) : null;
 };
 export {
-  j as Menu,
-  N as MenuDivider,
-  R as MenuItem
+  K as Menu,
+  O as MenuDivider,
+  H as MenuItem
 };

package/dist/components/Modal/Modal.cjs

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

package/dist/components/Modal/Modal.const.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={sm:"bear-max-w-sm",md:"bear-max-w-md",lg:"bear-max-w-lg",xl:"bear-max-w-xl",full:"bear-max-w-full bear-mx-4"},e="bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",a="bear-relative bear-w-full bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95",b="bear-flex bear-items-center bear-justify-between bear-px-6 bear-py-4 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700",t="bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white",S="bear-p-1 bear-rounded-lg bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors",o="bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300",A="bear-flex bear-items-center bear-justify-end bear-gap-3 bear-px-6 bear-py-4 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700";exports.MODAL_BACKDROP_CLASSES=e;exports.MODAL_BODY_CLASSES=o;exports.MODAL_CLOSE_CLASSES=S;exports.MODAL_CONTAINER_CLASSES=a;exports.MODAL_FOOTER_CLASSES=A;exports.MODAL_HEADER_CLASSES=b;exports.MODAL_SIZE_CLASSES=r;exports.MODAL_TITLE_CLASSES=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r={sm:"bear-max-w-sm",md:"bear-max-w-md",lg:"bear-max-w-lg",xl:"bear-max-w-xl",full:"bear-max-w-full bear-mx-4"},e="bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity",a="bear-relative bear-w-full bear-max-h-[calc(100vh-2rem)] bear-overflow-y-auto bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95",b="bear-flex bear-items-center bear-justify-between bear-px-6 bear-py-4 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700",t="bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white",S="bear-p-1 bear-rounded-lg bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors",o="bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300",A="bear-flex bear-items-center bear-justify-end bear-gap-3 bear-px-6 bear-py-4 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700";exports.MODAL_BACKDROP_CLASSES=e;exports.MODAL_BODY_CLASSES=o;exports.MODAL_CLOSE_CLASSES=S;exports.MODAL_CONTAINER_CLASSES=a;exports.MODAL_FOOTER_CLASSES=A;exports.MODAL_HEADER_CLASSES=b;exports.MODAL_SIZE_CLASSES=r;exports.MODAL_TITLE_CLASSES=t;

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

@@ -2,7 +2,7 @@ import { ModalSize } from './Modal.types';
 export declare const MODAL_Z_INDEX = 50;
 export declare const MODAL_SIZE_CLASSES: Record<ModalSize, string>;
 export declare const MODAL_BACKDROP_CLASSES = "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity";
-export declare const MODAL_CONTAINER_CLASSES = "bear-relative bear-w-full bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95";
+export declare const MODAL_CONTAINER_CLASSES = "bear-relative bear-w-full bear-max-h-[calc(100vh-2rem)] bear-overflow-y-auto bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95";
 export declare const MODAL_HEADER_CLASSES = "bear-flex bear-items-center bear-justify-between bear-px-6 bear-py-4 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700";
 export declare const MODAL_TITLE_CLASSES = "bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white";
 export declare const MODAL_CLOSE_CLASSES = "bear-p-1 bear-rounded-lg bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors";

package/dist/components/Modal/Modal.const.js

@@ -4,7 +4,7 @@ const r = {
   lg: "bear-max-w-lg",
   xl: "bear-max-w-xl",
   full: "bear-max-w-full bear-mx-4"
-}, e = "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity", a = "bear-relative bear-w-full bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95", b = "bear-flex bear-items-center bear-justify-between bear-px-6 bear-py-4 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700", t = "bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white", o = "bear-p-1 bear-rounded-lg bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors", n = "bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300", d = "bear-flex bear-items-center bear-justify-end bear-gap-3 bear-px-6 bear-py-4 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700";
+}, e = "bear-absolute bear-inset-0 bear-bg-black/60 bear-backdrop-blur-sm bear-transition-opacity", a = "bear-relative bear-w-full bear-max-h-[calc(100vh-2rem)] bear-overflow-y-auto bear-bg-white dark:bear-bg-zinc-900 bear-rounded-xl bear-shadow-2xl bear-border bear-border-gray-200 dark:bear-border-zinc-700 bear-transform bear-transition-all bear-animate-in bear-fade-in bear-zoom-in-95", b = "bear-flex bear-items-center bear-justify-between bear-px-6 bear-py-4 bear-border-b bear-border-gray-200 dark:bear-border-zinc-700", t = "bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white", o = "bear-p-1 bear-rounded-lg bear-text-gray-400 dark:bear-text-zinc-500 hover:bear-text-gray-600 dark:hover:bear-text-white hover:bear-bg-gray-100 dark:hover:bear-bg-zinc-700 bear-transition-colors", n = "bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300", d = "bear-flex bear-items-center bear-justify-end bear-gap-3 bear-px-6 bear-py-4 bear-border-t bear-border-gray-200 dark:bear-border-zinc-700";
 export {
   e as MODAL_BACKDROP_CLASSES,
   n as MODAL_BODY_CLASSES,