@forgedevstack/bear 1.3.3 → 1.3.5

package/dist/components/EmptyState/EmptyState.js

@@ -1,50 +1,50 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { Box as m } from "../Box/Box.js";
-import { Flex as N } from "../Flex/Flex.js";
-import { Typography as n } from "../Typography/Typography.js";
-import { cn as a } from "../../utils/cn.js";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { Box as n } from "../Box/Box.js";
+import { Flex as h } from "../Flex/Flex.js";
+import { Typography as T } from "../Typography/Typography.js";
+import { cn as r } from "../../utils/cn.js";
 import "react";
-import { resolveBearId as P } from "../../utils/generateBearId.utils.js";
-import { useBearId as h } from "../../utils/useBearId.js";
-import { EMPTY_STATE_DEFAULT_SIZE as g, EMPTY_STATE_DEFAULT_VARIANT as x, EMPTY_STATE_DEFAULT_PRESET as M, EMPTY_STATE_SIZE_CLASSES as Y, EMPTY_STATE_PRESET_ICON as u } from "./EmptyState.const.js";
-const z = (E) => {
+import { resolveBearId as Y } from "../../utils/generateBearId.utils.js";
+import { useBearId as g } from "../../utils/useBearId.js";
+import { EMPTY_STATE_DEFAULT_SIZE as u, EMPTY_STATE_DEFAULT_VARIANT as x, EMPTY_STATE_DEFAULT_PRESET as D, COMPONENT_NAME_EMPTY_STATE as F, EMPTY_STATE_PRESET_DEFAULTS as d, EMPTY_STATE_SIZE_CLASSES as L, EMPTY_STATE_PRESET_ICON as v } from "./EmptyState.const.js";
+const V = (_) => {
   const {
     icon: p,
-    title: d,
-    description: r,
-    action: o,
-    secondaryAction: s,
-    className: l,
-    size: _ = g,
-    variant: T = x,
-    preset: i = M,
-    id: S,
-    testId: y
-  } = E, A = h("EmptyState"), f = P(S, A), t = Y[_], B = u[i], I = p ?? /* @__PURE__ */ e(B, { className: "bear-w-full bear-h-full" });
-  return /* @__PURE__ */ c(
-    m,
+    title: l,
+    description: o,
+    action: s,
+    secondaryAction: i,
+    className: S,
+    size: A = u,
+    variant: N = x,
+    preset: a = D,
+    id: y,
+    testId: P
+  } = _, f = g(F), B = Y(y, f), t = L[A], I = v[a], M = p ?? /* @__PURE__ */ e(I, { className: "bear-w-full bear-h-full" }), c = d[a] ?? d.empty, E = o !== void 0 ? o : c.description;
+  return /* @__PURE__ */ m(
+    n,
     {
-      id: f,
-      "data-testid": y,
-      className: a(
+      id: B,
+      "data-testid": P,
+      className: r(
         "Bear-EmptyState",
-        T === "card" && "Bear-EmptyState--card",
-        `Bear-EmptyState--${i}`,
+        N === "card" && "Bear-EmptyState--card",
+        `Bear-EmptyState--${a}`,
         t.padding,
-        l
+        S
       ),
       children: [
-        /* @__PURE__ */ e(m, { className: a("Bear-EmptyState__icon", t.icon), children: I }),
-        /* @__PURE__ */ e(n, { className: a("Bear-EmptyState__title", t.title), children: d }),
-        r && /* @__PURE__ */ e(n, { className: a("Bear-EmptyState__description", t.desc), children: r }),
-        (o || s) && /* @__PURE__ */ c(N, { className: "Bear-EmptyState__actions", align: "center", gap: 3, children: [
-          o,
-          s
+        /* @__PURE__ */ e(n, { className: r("Bear-EmptyState__icon", t.icon), children: M }),
+        /* @__PURE__ */ e(T, { className: r("Bear-EmptyState__title", t.title), children: l ?? c.title }),
+        E && /* @__PURE__ */ e(T, { className: r("Bear-EmptyState__description", t.desc), children: E }),
+        (s || i) && /* @__PURE__ */ m(h, { className: "Bear-EmptyState__actions", align: "center", gap: 3, children: [
+          s,
+          i
         ] })
       ]
     }
   );
 };
 export {
-  z as EmptyState
+  V as EmptyState
 };

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

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
-export type EmptyStatePreset = 'empty' | 'search' | 'inbox' | 'error';
+export type EmptyStatePreset = 'empty' | 'search' | 'inbox' | 'error' | 'no-data' | '404' | 'offline' | 'filter-empty';
 export interface EmptyStateProps {
     testId?: string;
     id?: string;
     icon?: ReactNode;
-    title: string;
+    title?: string;
     description?: string;
     action?: ReactNode;
     secondaryAction?: ReactNode;

package/dist/components/HoverCard/HoverCard.cjs

@@ -1,6 +1,7 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react/jsx-runtime"),o=require("react"),P=require("../Portal/Portal.cjs"),C=11e3,i=288,u=200;function N(e,l,n){let t=0,r=0;const h=i/2;return l==="bottom"?(t=e.bottom+8,r=e.left+e.width/2-h,n==="start"&&(r=e.left),n==="end"&&(r=e.right-i)):l==="top"?(t=e.top-u-8,r=e.left+e.width/2-h,n==="start"&&(r=e.left),n==="end"&&(r=e.right-i)):l==="right"?(r=e.right+8,t=e.top+e.height/2-u/2,n==="start"&&(t=e.top),n==="end"&&(t=e.bottom-u)):(r=e.left-i-8,t=e.top+e.height/2-u/2,n==="start"&&(t=e.top),n==="end"&&(t=e.bottom-u)),r=Math.max(8,Math.min(r,window.innerWidth-i-8)),t=Math.max(8,Math.min(t,window.innerHeight-u-8)),{position:"fixed",zIndex:C,top:t,left:r,width:i}}const T=o.forwardRef(({children:e,cardContent:l,side:n="bottom",align:m="center",openDelay:t=200,closeDelay:r=300,arrow:h=!0,className:x="",...L},H)=>{const[a,p]=o.useState(!1),[S,j]=o.useState({}),d=o.useRef(),c=o.useRef(),f=o.useRef(null),v=o.useRef(null);o.useEffect(()=>{if(!a||!f.current)return;const s=()=>{const w=f.current.getBoundingClientRect();j(N(w,n,m))};return s(),window.addEventListener("resize",s),window.addEventListener("scroll",s,!0),()=>{window.removeEventListener("resize",s),window.removeEventListener("scroll",s,!0)}},[a,n,m]),o.useEffect(()=>{if(!a)return;const s=w=>{var y,M;const R=w.target;(y=f.current)!=null&&y.contains(R)||(M=v.current)!=null&&M.contains(R)||p(!1)};return document.addEventListener("mousedown",s),()=>document.removeEventListener("mousedown",s)},[a]);const g=()=>{c.current&&clearTimeout(c.current),d.current=setTimeout(()=>p(!0),t)},E=()=>{d.current&&clearTimeout(d.current),c.current=setTimeout(()=>p(!1),r)};return o.useEffect(()=>()=>{d.current&&clearTimeout(d.current),c.current&&clearTimeout(c.current)},[]),b.jsxs("div",{ref:H,className:`bear-hover-card bear-relative bear-inline-block ${x}`.trim(),onMouseEnter:g,onMouseLeave:E,...L,children:[b.jsx("div",{ref:f,className:"bear-inline-block",children:e}),a&&b.jsx(P.Portal,{children:b.jsx("div",{ref:v,style:S,className:`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),s=require("react"),U=require("../Portal/Portal.cjs"),y=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs"),e=require("../../constants/numbers.const.cjs"),w=require("./HoverCard.const.cjs");function C(t,c,o){const a=e.EIGHT;let r=e.ZERO,n=e.ZERO;const T=e.TWO_HUNDRED_EIGHTY_EIGHT/e.TWO;return c==="bottom"?(r=t.bottom+a,n=t.left+t.width/e.TWO-T,o==="start"&&(n=t.left),o==="end"&&(n=t.right-e.TWO_HUNDRED_EIGHTY_EIGHT)):c==="top"?(r=t.top-e.TWO_HUNDRED-a,n=t.left+t.width/e.TWO-T,o==="start"&&(n=t.left),o==="end"&&(n=t.right-e.TWO_HUNDRED_EIGHTY_EIGHT)):c==="right"?(n=t.right+a,r=t.top+t.height/e.TWO-e.TWO_HUNDRED/e.TWO,o==="start"&&(r=t.top),o==="end"&&(r=t.bottom-e.TWO_HUNDRED)):(n=t.left-e.TWO_HUNDRED_EIGHTY_EIGHT-a,r=t.top+t.height/e.TWO-e.TWO_HUNDRED/e.TWO,o==="start"&&(r=t.top),o==="end"&&(r=t.bottom-e.TWO_HUNDRED)),n=Math.max(e.EIGHT,Math.min(n,window.innerWidth-e.TWO_HUNDRED_EIGHTY_EIGHT-e.EIGHT)),r=Math.max(e.EIGHT,Math.min(r,window.innerHeight-e.TWO_HUNDRED-e.EIGHT)),{position:"fixed",zIndex:e.ELEVEN_THOUSAND,top:r,left:n,width:e.TWO_HUNDRED_EIGHTY_EIGHT}}const W=s.forwardRef(({children:t,cardContent:c,side:o="bottom",align:a="center",openDelay:r=200,closeDelay:n=300,arrow:T=!0,className:p="",...m},I)=>{const[u,H]=s.useState(!1),[N,G]=s.useState({}),l=s.useRef(),f=s.useRef(),d=s.useRef(null),b=s.useRef(null);s.useEffect(()=>{if(!u||!d.current)return;const i=()=>{const _=d.current.getBoundingClientRect();G(C(_,o,a))};return i(),window.addEventListener("resize",i),window.addEventListener("scroll",i,!0),()=>{window.removeEventListener("resize",i),window.removeEventListener("scroll",i,!0)}},[u,o,a]),s.useEffect(()=>{if(!u)return;const i=_=>{var D,v;const h=_.target;(D=d.current)!=null&&D.contains(h)||(v=b.current)!=null&&v.contains(h)||H(!1)};return document.addEventListener("mousedown",i),()=>document.removeEventListener("mousedown",i)},[u]);const R=()=>{f.current&&clearTimeout(f.current),l.current=setTimeout(()=>H(!0),r)},O=()=>{l.current&&clearTimeout(l.current),f.current=setTimeout(()=>H(!1),n)};s.useEffect(()=>()=>{l.current&&clearTimeout(l.current),f.current&&clearTimeout(f.current)},[]);const{openEffect:g}=y.resolveOverlayEffects(m,"scale"),M=w.HOVER_CARD_EFFECT_CLASS_MAP[g]??w.HOVER_CARD_EFFECT_CLASS_MAP.scale;return E.jsxs("div",{ref:I,className:`bear-hover-card bear-relative bear-inline-block ${p}`.trim(),onMouseEnter:R,onMouseLeave:O,...m,children:[E.jsx("div",{ref:d,className:"bear-inline-block",children:t}),u&&E.jsx(U.Portal,{children:E.jsx("div",{ref:b,style:N,className:`
               bear-bg-white dark:bear-bg-gray-800 bear-rounded-lg bear-shadow-xl
               bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-p-4
               bear-transition-all bear-duration-200
-              ${a?"bear-opacity-100 bear-scale-100":"bear-opacity-0 bear-scale-95"}
-            `,onMouseEnter:g,onMouseLeave:E,children:l})})]})});T.displayName="HoverCard";exports.HoverCard=T;
+              ${u?"bear-opacity-100 bear-scale-100":"bear-opacity-0 bear-scale-95"}
+              ${M}
+            `.trim(),onMouseEnter:R,onMouseLeave:O,children:c})})]})});W.displayName="HoverCard";exports.HoverCard=W;

package/dist/components/HoverCard/HoverCard.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../OverlayPortal/OverlayPortal.const.cjs"),e=_.OVERLAY_EFFECT_CLASS_MAP;exports.HOVER_CARD_EFFECT_CLASS_MAP=e;

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

@@ -1 +1,2 @@
 export declare const H_O_V_E_R_C_A_R_D_ROOT_CLASS = "Bear-HoverCard";
+export declare const HOVER_CARD_EFFECT_CLASS_MAP: Record<string, string>;

package/dist/components/HoverCard/HoverCard.const.js

@@ -0,0 +1,5 @@
+import { OVERLAY_EFFECT_CLASS_MAP as _ } from "../OverlayPortal/OverlayPortal.const.js";
+const E = _;
+export {
+  E as HOVER_CARD_EFFECT_CLASS_MAP
+};

package/dist/components/HoverCard/HoverCard.js

@@ -1,86 +1,92 @@
-import { jsxs as C, jsx as w } from "react/jsx-runtime";
-import { forwardRef as O, useState as R, useRef as c, useEffect as v } from "react";
-import { Portal as P } from "../Portal/Portal.js";
-const S = 11e3, a = 288, s = 200;
-function z(e, u, n) {
-  let t = 0, r = 0;
-  const b = a / 2;
-  return u === "bottom" ? (t = e.bottom + 8, r = e.left + e.width / 2 - b, n === "start" && (r = e.left), n === "end" && (r = e.right - a)) : u === "top" ? (t = e.top - s - 8, r = e.left + e.width / 2 - b, n === "start" && (r = e.left), n === "end" && (r = e.right - a)) : u === "right" ? (r = e.right + 8, t = e.top + e.height / 2 - s / 2, n === "start" && (t = e.top), n === "end" && (t = e.bottom - s)) : (r = e.left - a - 8, t = e.top + e.height / 2 - s / 2, n === "start" && (t = e.top), n === "end" && (t = e.bottom - s)), r = Math.max(8, Math.min(r, window.innerWidth - a - 8)), t = Math.max(8, Math.min(t, window.innerHeight - s - 8)), {
+import { jsxs as A, jsx as v } from "react/jsx-runtime";
+import { forwardRef as P, useState as _, useRef as h, useEffect as T } from "react";
+import { Portal as z } from "../Portal/Portal.js";
+import { resolveOverlayEffects as G } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
+import { TWO as a, TWO_HUNDRED_EIGHTY_EIGHT as u, TWO_HUNDRED as f, ZERO as x, ELEVEN_THOUSAND as U, EIGHT as m } from "../../constants/numbers.const.js";
+import { HOVER_CARD_EFFECT_CLASS_MAP as N } from "./HoverCard.const.js";
+function $(e, l, o) {
+  const i = m;
+  let t = x, r = x;
+  const p = u / a;
+  return l === "bottom" ? (t = e.bottom + i, r = e.left + e.width / a - p, o === "start" && (r = e.left), o === "end" && (r = e.right - u)) : l === "top" ? (t = e.top - f - i, r = e.left + e.width / a - p, o === "start" && (r = e.left), o === "end" && (r = e.right - u)) : l === "right" ? (r = e.right + i, t = e.top + e.height / a - f / a, o === "start" && (t = e.top), o === "end" && (t = e.bottom - f)) : (r = e.left - u - i, t = e.top + e.height / a - f / a, o === "start" && (t = e.top), o === "end" && (t = e.bottom - f)), r = Math.max(m, Math.min(r, window.innerWidth - u - m)), t = Math.max(m, Math.min(t, window.innerHeight - f - m)), {
     position: "fixed",
-    zIndex: S,
+    zIndex: U,
     top: t,
     left: r,
-    width: a
+    width: u
   };
 }
-const I = O(({
+const j = P(({
   children: e,
-  cardContent: u,
-  side: n = "bottom",
-  align: m = "center",
+  cardContent: l,
+  side: o = "bottom",
+  align: i = "center",
   openDelay: t = 200,
   closeDelay: r = 300,
-  arrow: b = !0,
-  className: x = "",
-  ...H
-}, N) => {
-  const [i, p] = R(!1), [_, k] = R({}), d = c(), l = c(), f = c(null), g = c(null);
-  v(() => {
-    if (!i || !f.current) return;
-    const o = () => {
-      const h = f.current.getBoundingClientRect();
-      k(z(h, n, m));
+  arrow: p = !0,
+  className: C = "",
+  ...R
+}, D) => {
+  const [s, E] = _(!1), [S, I] = _({}), d = h(), c = h(), b = h(null), g = h(null);
+  T(() => {
+    if (!s || !b.current) return;
+    const n = () => {
+      const w = b.current.getBoundingClientRect();
+      I($(w, o, i));
     };
-    return o(), window.addEventListener("resize", o), window.addEventListener("scroll", o, !0), () => {
-      window.removeEventListener("resize", o), window.removeEventListener("scroll", o, !0);
+    return n(), window.addEventListener("resize", n), window.addEventListener("scroll", n, !0), () => {
+      window.removeEventListener("resize", n), window.removeEventListener("scroll", n, !0);
     };
-  }, [i, n, m]), v(() => {
-    if (!i) return;
-    const o = (h) => {
-      var T, y;
-      const M = h.target;
-      (T = f.current) != null && T.contains(M) || (y = g.current) != null && y.contains(M) || p(!1);
+  }, [s, o, i]), T(() => {
+    if (!s) return;
+    const n = (w) => {
+      var H, O;
+      const y = w.target;
+      (H = b.current) != null && H.contains(y) || (O = g.current) != null && O.contains(y) || E(!1);
     };
-    return document.addEventListener("mousedown", o), () => document.removeEventListener("mousedown", o);
-  }, [i]);
-  const E = () => {
-    l.current && clearTimeout(l.current), d.current = setTimeout(() => p(!0), t);
-  }, L = () => {
-    d.current && clearTimeout(d.current), l.current = setTimeout(() => p(!1), r);
+    return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
+  }, [s]);
+  const L = () => {
+    c.current && clearTimeout(c.current), d.current = setTimeout(() => E(!0), t);
+  }, M = () => {
+    d.current && clearTimeout(d.current), c.current = setTimeout(() => E(!1), r);
   };
-  return v(() => () => {
-    d.current && clearTimeout(d.current), l.current && clearTimeout(l.current);
-  }, []), /* @__PURE__ */ C(
+  T(() => () => {
+    d.current && clearTimeout(d.current), c.current && clearTimeout(c.current);
+  }, []);
+  const { openEffect: W } = G(R, "scale"), k = N[W] ?? N.scale;
+  return /* @__PURE__ */ A(
     "div",
     {
-      ref: N,
-      className: `bear-hover-card bear-relative bear-inline-block ${x}`.trim(),
-      onMouseEnter: E,
-      onMouseLeave: L,
-      ...H,
+      ref: D,
+      className: `bear-hover-card bear-relative bear-inline-block ${C}`.trim(),
+      onMouseEnter: L,
+      onMouseLeave: M,
+      ...R,
       children: [
-        /* @__PURE__ */ w("div", { ref: f, className: "bear-inline-block", children: e }),
-        i && /* @__PURE__ */ w(P, { children: /* @__PURE__ */ w(
+        /* @__PURE__ */ v("div", { ref: b, className: "bear-inline-block", children: e }),
+        s && /* @__PURE__ */ v(z, { children: /* @__PURE__ */ v(
           "div",
           {
             ref: g,
-            style: _,
+            style: S,
             className: `
               bear-bg-white dark:bear-bg-gray-800 bear-rounded-lg bear-shadow-xl
               bear-border bear-border-gray-200 dark:bear-border-gray-700 bear-p-4
               bear-transition-all bear-duration-200
-              ${i ? "bear-opacity-100 bear-scale-100" : "bear-opacity-0 bear-scale-95"}
-            `,
-            onMouseEnter: E,
-            onMouseLeave: L,
-            children: u
+              ${s ? "bear-opacity-100 bear-scale-100" : "bear-opacity-0 bear-scale-95"}
+              ${k}
+            `.trim(),
+            onMouseEnter: L,
+            onMouseLeave: M,
+            children: l
           }
         ) })
       ]
     }
   );
 });
-I.displayName = "HoverCard";
+j.displayName = "HoverCard";
 export {
-  I as HoverCard
+  j as HoverCard
 };

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { OverlayMotionEffect, OverlayEffectConfig } from '../../hooks/useFixedAnchorPosition';
 export interface HoverCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
     testId?: string;
     id?: string;
@@ -9,6 +10,12 @@ export interface HoverCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'co
     openDelay?: number;
     closeDelay?: number;
     arrow?: boolean;
+    /** Transition effect when opening */
+    openEffect?: OverlayMotionEffect;
+    /** Transition effect when closing */
+    closeEffect?: OverlayMotionEffect;
+    /** Config for open and close transition effects */
+    effect?: OverlayEffectConfig;
 }
 export interface HoverCardContentProps extends HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;

package/dist/components/Menu/Menu.cjs

@@ -1 +1 @@
-"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:y,...v})=>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-primary-50 dark:bear-bg-primary-900/20 bear-text-primary-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":y,...v,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(k,{})]}),k=({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:y,testId:v,...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(),h=c.current,w=h?h.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",y),style:{top:x.top,left:x.left,minWidth:a,maxHeight:d,zIndex:L},"data-testid":v,...m,children:l})}):null};exports.Menu=R;exports.MenuDivider=k;exports.MenuItem=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),u=require("react"),p=require("../../utils/cn.cjs"),S=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs"),q=require("../Portal/Portal.cjs"),b=require("./Menu.const.cjs"),P=({open:c=!1,anchorEl:n,onClose:s,children:k,position:l="bottom-start",minWidth:d=180,maxHeight:f=300,className:E,testId:m,...v})=>{const i=u.useRef(null),[g,L]=u.useState({top:0,left:0});u.useLayoutEffect(()=>{if(!c||!n)return;const r=()=>{const t=n.getBoundingClientRect(),e=i.current,w=e?e.offsetHeight:Math.min(f,200);let o=0,a=0;switch(l){case"bottom-start":o=t.bottom+4,a=t.left;break;case"bottom-end":o=t.bottom+4,a=t.right-((e==null?void 0:e.offsetWidth)??d);break;case"top-start":o=t.top-w-4,a=t.left;break;case"top-end":o=t.top-w-4,a=t.right-((e==null?void 0:e.offsetWidth)??d);break;case"right-start":o=t.top,a=t.right+4;break;case"left-start":o=t.top,a=t.left-((e==null?void 0:e.offsetWidth)??d)-4;break}L({top:o,left:a})};return r(),window.addEventListener("resize",r),window.addEventListener("scroll",r,!0),()=>{window.removeEventListener("resize",r),window.removeEventListener("scroll",r,!0)}},[c,n,l,d,f]),u.useEffect(()=>{if(!c)return;const r=e=>{i.current&&!i.current.contains(e.target)&&n&&!n.contains(e.target)&&(s==null||s())},t=e=>{e.key==="Escape"&&(s==null||s())};return document.addEventListener("mousedown",r),document.addEventListener("keydown",t),()=>{document.removeEventListener("mousedown",r),document.removeEventListener("keydown",t)}},[c,n,s]);const{openEffect:M}=S.resolveOverlayEffects(v,"fade"),_=b.MENU_EFFECT_CLASS_MAP[M]??b.MENU_EFFECT_CLASS_MAP.fade;return c?y.jsx(q.Portal,{children:y.jsx("div",{ref:i,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",_,E),style:{top:g.top,left:g.left,minWidth:d,maxHeight:f,zIndex:b.MENU_Z_INDEX},"data-testid":m,...v,children:k})}):null};exports.Menu=P;

package/dist/components/Menu/Menu.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("../../constants/numbers.const.cjs"),E=require("../OverlayPortal/OverlayPortal.const.cjs"),e=_.TWELVE_THOUSAND,t=E.OVERLAY_EFFECT_CLASS_MAP;exports.MENU_EFFECT_CLASS_MAP=t;exports.MENU_Z_INDEX=e;

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

@@ -1 +1,3 @@
 export declare const M_E_N_U_ROOT_CLASS = "Bear-Menu";
+export declare const MENU_Z_INDEX = 12000;
+export declare const MENU_EFFECT_CLASS_MAP: Record<string, string>;

package/dist/components/Menu/Menu.const.js

@@ -0,0 +1,7 @@
+import { TWELVE_THOUSAND as E } from "../../constants/numbers.const.js";
+import { OVERLAY_EFFECT_CLASS_MAP as _ } from "../OverlayPortal/OverlayPortal.const.js";
+const r = E, t = _;
+export {
+  t as MENU_EFFECT_CLASS_MAP,
+  r as MENU_Z_INDEX
+};

package/dist/components/Menu/Menu.d.ts

@@ -1,13 +1,7 @@
 import { FC } from 'react';
-import { MenuProps, MenuItemProps, MenuDividerProps } from './Menu.types';
-/**
- * MenuItem component for menu items
- */
-export declare const MenuItem: FC<MenuItemProps>;
-/**
- * MenuDivider component for separating menu sections
- */
-export declare const MenuDivider: FC<MenuDividerProps>;
+import { MenuProps } from './Menu.types';
+export { MenuItem } from './MenuItem';
+export { MenuDivider } from './MenuDivider';
 /**
  * Menu component for dropdown menus
  *

package/dist/components/Menu/Menu.js

@@ -1,122 +1,90 @@
-import { jsx as c, jsxs as h, 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 v } from "../../utils/cn.js";
-import { Portal as I } from "../Portal/Portal.js";
-const D = 12e3, H = ({
-  icon: t,
-  disabled: r = !1,
-  selected: n = !1,
-  divider: g = !1,
-  children: m,
-  onClick: a,
-  className: u,
-  testId: l,
-  ...y
-}) => /* @__PURE__ */ h(L, { children: [
-  /* @__PURE__ */ h(
-    "div",
-    {
-      role: "menuitem",
-      tabIndex: r ? -1 : 0,
-      className: v(
-        "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-primary-50 dark:bear-bg-primary-900/20 bear-text-primary-600",
-        r && "bear-opacity-50 bear-cursor-not-allowed hover:bear-bg-transparent",
-        u
-      ),
-      onClick: r ? void 0 : a,
-      onKeyDown: (f) => {
-        (f.key === "Enter" || f.key === " ") && !r && (a == null || a());
-      },
-      "data-testid": l,
-      ...y,
-      children: [
-        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: m })
-      ]
-    }
-  ),
-  g && /* @__PURE__ */ c(O, {})
-] }), O = ({ className: t }) => /* @__PURE__ */ c("div", { className: v("bear-h-px bear-bg-gray-200 dark:bear-bg-gray-700 bear-my-1", t) }), K = ({
-  open: t = !1,
-  anchorEl: r,
-  onClose: n,
+import { jsx as w } from "react/jsx-runtime";
+import { useRef as M, useState as _, useLayoutEffect as h, useEffect as N } from "react";
+import { cn as z } from "../../utils/cn.js";
+import { resolveOverlayEffects as R } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
+import { Portal as S } from "../Portal/Portal.js";
+import { MENU_Z_INDEX as x, MENU_EFFECT_CLASS_MAP as p } from "./Menu.const.js";
+const j = ({
+  open: d = !1,
+  anchorEl: f,
+  onClose: o,
   children: g,
-  position: m = "bottom-start",
-  minWidth: a = 180,
-  maxHeight: u = 300,
+  position: u = "bottom-start",
+  minWidth: n = 180,
+  maxHeight: i = 300,
   className: l,
-  testId: y,
-  ...f
+  testId: k,
+  ...b
 }) => {
-  const b = M(null), [w, k] = N({ top: 0, left: 0 });
-  return z(() => {
-    if (!t || !r) return;
-    const s = () => {
-      const e = r.getBoundingClientRect(), x = b.current, p = x ? x.offsetHeight : Math.min(u, 200);
-      let d = 0, i = 0;
-      switch (m) {
+  const c = M(null), [m, y] = _({ top: 0, left: 0 });
+  h(() => {
+    if (!d || !f) return;
+    const r = () => {
+      const t = f.getBoundingClientRect(), e = c.current, v = e ? e.offsetHeight : Math.min(i, 200);
+      let a = 0, s = 0;
+      switch (u) {
         case "bottom-start":
-          d = e.bottom + 4, i = e.left;
+          a = t.bottom + 4, s = t.left;
           break;
         case "bottom-end":
-          d = e.bottom + 4, i = e.right - a;
+          a = t.bottom + 4, s = t.right - ((e == null ? void 0 : e.offsetWidth) ?? n);
           break;
         case "top-start":
-          d = e.top - p - 4, i = e.left;
+          a = t.top - v - 4, s = t.left;
           break;
         case "top-end":
-          d = e.top - p - 4, i = e.right - a;
+          a = t.top - v - 4, s = t.right - ((e == null ? void 0 : e.offsetWidth) ?? n);
+          break;
+        case "right-start":
+          a = t.top, s = t.right + 4;
+          break;
+        case "left-start":
+          a = t.top, s = t.left - ((e == null ? void 0 : e.offsetWidth) ?? n) - 4;
           break;
       }
-      i = Math.max(8, Math.min(i, window.innerWidth - a - 8));
-      const E = window.innerHeight - p - 8;
-      d = Math.max(8, Math.min(d, E)), k({ top: d, left: i });
+      y({ top: a, left: s });
     };
-    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);
+    return r(), window.addEventListener("resize", r), window.addEventListener("scroll", r, !0), () => {
+      window.removeEventListener("resize", r), window.removeEventListener("scroll", r, !0);
     };
-  }, [t, r, m, a, u]), R(() => {
-    if (!t) return;
-    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());
+  }, [d, f, u, n, i]), N(() => {
+    if (!d) return;
+    const r = (e) => {
+      c.current && !c.current.contains(e.target) && f && !f.contains(e.target) && (o == null || o());
+    }, t = (e) => {
+      e.key === "Escape" && (o == null || o());
     };
-    return document.addEventListener("mousedown", s), document.addEventListener("keydown", o), () => {
-      document.removeEventListener("mousedown", s), document.removeEventListener("keydown", o);
+    return document.addEventListener("mousedown", r), document.addEventListener("keydown", t), () => {
+      document.removeEventListener("mousedown", r), document.removeEventListener("keydown", t);
     };
-  }, [t, r, n]), t ? /* @__PURE__ */ c(I, { children: /* @__PURE__ */ c(
+  }, [d, f, o]);
+  const { openEffect: L } = R(b, "fade"), E = p[L] ?? p.fade;
+  return d ? /* @__PURE__ */ w(S, { children: /* @__PURE__ */ w(
     "div",
     {
-      ref: b,
+      ref: c,
       role: "menu",
-      className: v(
+      className: z(
         "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",
+        E,
         l
       ),
       style: {
-        top: w.top,
-        left: w.left,
-        minWidth: a,
-        maxHeight: u,
-        zIndex: D
+        top: m.top,
+        left: m.left,
+        minWidth: n,
+        maxHeight: i,
+        zIndex: x
       },
-      "data-testid": y,
-      ...f,
+      "data-testid": k,
+      ...b,
       children: g
     }
   ) }) : null;
 };
 export {
-  K as Menu,
-  O as MenuDivider,
-  H as MenuItem
+  j as Menu
 };

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

@@ -1,4 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import { OverlayMotionEffect, OverlayEffectConfig } from '../../hooks/useFixedAnchorPosition';
 export interface MenuItemProps extends HTMLAttributes<HTMLDivElement> {
     id?: string;
     /** Icon to show before the label */
@@ -26,11 +27,17 @@ export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
     /** Menu items */
     children?: ReactNode;
     /** Position relative to anchor */
-    position?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    position?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'right-start' | 'left-start';
     /** Min width of the menu */
     minWidth?: number;
     /** Max height before scrolling */
     maxHeight?: number;
+    /** Transition effect when opening */
+    openEffect?: OverlayMotionEffect;
+    /** Transition effect when closing */
+    closeEffect?: OverlayMotionEffect;
+    /** Config for open and close transition effects */
+    effect?: OverlayEffectConfig;
     /** Test ID */
     testId?: string;
 }

package/dist/components/Menu/MenuDivider.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),i=require("../../utils/cn.cjs");require("react");const a=({className:e})=>r.jsx("div",{className:i.cn("bear-h-px bear-bg-gray-200 dark:bear-bg-gray-700 bear-my-1",e)});exports.MenuDivider=a;

package/dist/components/Menu/MenuDivider.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { MenuDividerProps } from './Menu.types';
+/**
+ * MenuDivider component for separating menu sections
+ */
+export declare const MenuDivider: FC<MenuDividerProps>;

package/dist/components/Menu/MenuDivider.js

@@ -0,0 +1,7 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as e } from "../../utils/cn.js";
+import "react";
+const i = ({ className: r }) => /* @__PURE__ */ a("div", { className: e("bear-h-px bear-bg-gray-200 dark:bear-bg-gray-700 bear-my-1", r) });
+export {
+  i as MenuDivider
+};

package/dist/components/Menu/MenuItem.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("../../utils/cn.cjs");require("react");const n=require("../../constants/numbers.const.cjs"),y=require("./MenuDivider.cjs"),x=({icon:t,disabled:r=!1,selected:b=!1,divider:o=!1,children:i,onClick:a,className:u,testId:c,...g})=>e.jsxs(e.Fragment,{children:[e.jsxs("div",{role:"menuitem",tabIndex:r?n.NEGATIVE_ONE:n.ZERO,className:m.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",b&&"bear-bg-primary-50 dark:bear-bg-primary-900/20 bear-text-primary-600",r&&"bear-opacity-50 bear-cursor-not-allowed hover:bear-bg-transparent",u),onClick:r?void 0:a,onKeyDown:s=>{(s.key==="Enter"||s.key===" ")&&!r&&(a==null||a())},"data-testid":c,...g,children:[t&&e.jsx("span",{className:"bear-flex-shrink-0 bear-text-gray-500",children:t}),e.jsx("span",{className:"bear-flex-1 bear-text-sm",children:i})]}),o&&e.jsx(y.MenuDivider,{})]});exports.MenuItem=x;

package/dist/components/Menu/MenuItem.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { MenuItemProps } from './Menu.types';
+/**
+ * MenuItem component for menu items
+ */
+export declare const MenuItem: FC<MenuItemProps>;