@forgedevstack/bear 1.3.3 → 1.3.4

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

package/dist/components/Menu/MenuItem.js

@@ -0,0 +1,46 @@
+import { jsxs as o, Fragment as g, jsx as a } from "react/jsx-runtime";
+import { cn as y } from "../../utils/cn.js";
+import "react";
+import { NEGATIVE_ONE as c, ZERO as x } from "../../constants/numbers.const.js";
+import { MenuDivider as l } from "./MenuDivider.js";
+const N = ({
+  icon: t,
+  disabled: r = !1,
+  selected: s = !1,
+  divider: n = !1,
+  children: m,
+  onClick: e,
+  className: i,
+  testId: p,
+  ...f
+}) => /* @__PURE__ */ o(g, { children: [
+  /* @__PURE__ */ o(
+    "div",
+    {
+      role: "menuitem",
+      tabIndex: r ? c : x,
+      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",
+        s && "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",
+        i
+      ),
+      onClick: r ? void 0 : e,
+      onKeyDown: (b) => {
+        (b.key === "Enter" || b.key === " ") && !r && (e == null || e());
+      },
+      "data-testid": p,
+      ...f,
+      children: [
+        t && /* @__PURE__ */ a("span", { className: "bear-flex-shrink-0 bear-text-gray-500", children: t }),
+        /* @__PURE__ */ a("span", { className: "bear-flex-1 bear-text-sm", children: m })
+      ]
+    }
+  ),
+  n && /* @__PURE__ */ a(l, {})
+] });
+export {
+  N as MenuItem
+};

package/dist/components/Modal/Modal.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),E=require("react"),x=require("react-dom"),a=require("../../utils/cn.cjs"),j=require("../../utils/generateBearId.utils.cjs"),q=require("../../utils/useBearId.cjs"),g=require("@forgedevstack/bear-icons/navigation"),w=require("../Backdrop/Backdrop.cjs"),e=require("./Modal.const.cjs"),R=m=>{const{isOpen:s,onClose:l,title:r,children:L,size:M="md",showCloseButton:d=!0,closeOnEscape:A=!0,disableEscapeKeyDown:B=!1,lockBodyScroll:C=!0,cancelPreventScroll:O=!1,closeOnBackdrop:k=!0,hideBackdrop:b=!1,keepMounted:n=!1,isCancelBackgroundClick:i,zIndex:v=e.MODAL_Z_INDEX,className:y,footer:u,testId:D,id:f}=m,h=q.useBearId("Modal"),c=j.resolveBearId(f,h),_=C&&!O,p=i!==void 0?i:k,S=A&&!B,t=E.useCallback(N=>{S&&N.key==="Escape"&&l()},[S,l]);if(E.useEffect(()=>{if(s)return document.addEventListener("keydown",t),_&&(document.body.style.overflow="hidden"),()=>{document.removeEventListener("keydown",t),document.body.style.overflow=""}},[s,t,_]),!s&&!n)return null;const I=o.jsxs("div",{className:e.MODAL_ROOT_CLASSES,"data-testid":D,id:c,style:{zIndex:v},children:[!b&&o.jsx(w.Backdrop,{open:s,keepMounted:n,blur:!0,nested:!0,className:"Bear-Modal__backdrop",onClick:p?()=>l():void 0}),o.jsxs("div",{role:"dialog","aria-modal":"true","aria-labelledby":r?`${c}-title`:void 0,className:a.cn("Bear-Modal__container",e.MODAL_CONTAINER_CLASSES,e.MODAL_SIZE_CLASSES[M],y),style:{zIndex:e.MODAL_PANEL_Z_INDEX},children:[(r||d)&&o.jsxs("div",{className:a.cn("Bear-Modal__header",e.MODAL_HEADER_CLASSES),children:[r&&o.jsx("h2",{id:`${c}-title`,className:a.cn("Bear-Modal__title",e.MODAL_TITLE_CLASSES),children:r}),d&&o.jsx("button",{onClick:l,className:a.cn("Bear-Modal__close",e.MODAL_CLOSE_CLASSES),"aria-label":"Close modal",children:o.jsx(g.CloseIcon,{className:"bear-w-5 bear-h-5"})})]}),o.jsx("div",{className:a.cn("Bear-Modal__body",e.MODAL_BODY_CLASSES),children:L}),u&&o.jsx("div",{className:a.cn("Bear-Modal__footer",e.MODAL_FOOTER_CLASSES),children:u})]})]});return x.createPortal(I,document.body)};exports.Modal=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),E=require("react"),j=require("react-dom"),a=require("../../utils/cn.cjs"),q=require("../../utils/generateBearId.utils.cjs"),T=require("../../utils/useBearId.cjs"),g=require("../../hooks/useFocusTrap/useFocusTrap.cjs"),F=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs"),R=require("@forgedevstack/bear-icons/navigation"),P=require("../Backdrop/Backdrop.cjs"),e=require("./Modal.const.cjs"),w=t=>{const{isOpen:s,onClose:r,title:l,children:A,size:M="md",showCloseButton:n=!0,closeOnEscape:L=!0,disableEscapeKeyDown:C=!1,lockBodyScroll:O=!0,cancelPreventScroll:f=!1,closeOnBackdrop:m=!0,hideBackdrop:B=!1,keepMounted:d=!1,isCancelBackgroundClick:i,zIndex:b=e.MODAL_Z_INDEX,className:D,footer:u,testId:v,id:p}=t,y=T.useBearId("Modal"),c=q.resolveBearId(p,y),_=E.useRef(null),S=O&&!f,h=i!==void 0?i:m,I=L&&!C,{openEffect:N}=F.resolveOverlayEffects(t,"scale"),k=e.MODAL_EFFECT_CLASS_MAP[N]??e.MODAL_EFFECT_CLASS_MAP.scale;if(g.useFocusTrap(_,{enabled:s,onEscape:I?r:void 0}),E.useEffect(()=>{if(s)return S&&(document.body.style.overflow="hidden"),()=>{document.body.style.overflow=""}},[s,S]),!s&&!d)return null;const x=o.jsxs("div",{className:e.MODAL_ROOT_CLASSES,"data-testid":v,id:c,style:{zIndex:b},children:[!B&&o.jsx(P.Backdrop,{open:s,keepMounted:d,blur:!0,nested:!0,className:"Bear-Modal__backdrop",onClick:h?()=>r():void 0}),o.jsxs("div",{ref:_,role:"dialog","aria-modal":"true","aria-labelledby":l?`${c}-title`:void 0,className:a.cn("Bear-Modal__container",e.MODAL_CONTAINER_CLASSES,e.MODAL_SIZE_CLASSES[M],s&&k,D),style:{zIndex:e.MODAL_PANEL_Z_INDEX},children:[(l||n)&&o.jsxs("div",{className:a.cn("Bear-Modal__header",e.MODAL_HEADER_CLASSES),children:[l&&o.jsx("h2",{id:`${c}-title`,className:a.cn("Bear-Modal__title",e.MODAL_TITLE_CLASSES),children:l}),n&&o.jsx("button",{type:"button",onClick:r,className:a.cn("Bear-Modal__close",e.MODAL_CLOSE_CLASSES),"aria-label":"Close modal",children:o.jsx(R.CloseIcon,{className:"bear-w-5 bear-h-5"})})]}),o.jsx("div",{className:a.cn("Bear-Modal__body",e.MODAL_BODY_CLASSES),children:A}),u&&o.jsx("div",{className:a.cn("Bear-Modal__footer",e.MODAL_FOOTER_CLASSES),children:u})]})]});return j.createPortal(x,document.body)};exports.Modal=w;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=11e3,r=1,a="Bear-Modal bear-fixed bear-inset-0 bear-flex bear-items-center bear-justify-center bear-p-4",b={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"},t="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",S="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",o="bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white",A="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",L="bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300",_="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_BODY_CLASSES=L;exports.MODAL_CLOSE_CLASSES=A;exports.MODAL_CONTAINER_CLASSES=t;exports.MODAL_FOOTER_CLASSES=_;exports.MODAL_HEADER_CLASSES=S;exports.MODAL_PANEL_Z_INDEX=r;exports.MODAL_ROOT_CLASSES=a;exports.MODAL_SIZE_CLASSES=b;exports.MODAL_TITLE_CLASSES=o;exports.MODAL_Z_INDEX=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../constants/numbers.const.cjs"),r=e.ELEVEN_THOUSAND,a=e.ONE,b="Bear-Modal bear-fixed bear-inset-0 bear-flex bear-items-center bear-justify-center bear-p-4",t={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"},S="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",n="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",o="bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white",_="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",A="bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300",L="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={scale:"animate-scale-in",fade:"animate-fade-in","slide-down":"animate-grow-up",fold:"animate-alert-dialog-in",none:""};exports.MODAL_BODY_CLASSES=A;exports.MODAL_CLOSE_CLASSES=_;exports.MODAL_CONTAINER_CLASSES=S;exports.MODAL_EFFECT_CLASS_MAP=E;exports.MODAL_FOOTER_CLASSES=L;exports.MODAL_HEADER_CLASSES=n;exports.MODAL_PANEL_Z_INDEX=a;exports.MODAL_ROOT_CLASSES=b;exports.MODAL_SIZE_CLASSES=t;exports.MODAL_TITLE_CLASSES=o;exports.MODAL_Z_INDEX=r;

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

@@ -10,3 +10,4 @@ export declare const MODAL_TITLE_CLASSES = "bear-text-lg bear-font-semibold bear
 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";
 export declare const MODAL_BODY_CLASSES = "bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300";
 export declare const MODAL_FOOTER_CLASSES = "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 declare const MODAL_EFFECT_CLASS_MAP: Record<string, string>;

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

@@ -1,19 +1,27 @@
-const e = 11e3, r = 1, a = "Bear-Modal bear-fixed bear-inset-0 bear-flex bear-items-center bear-justify-center bear-p-4", b = {
+import { ELEVEN_THOUSAND as e, ONE as r } from "../../constants/numbers.const.js";
+const b = e, t = r, o = "Bear-Modal bear-fixed bear-inset-0 bear-flex bear-items-center bear-justify-center bear-p-4", n = {
   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"
-}, t = "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", o = "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", n = "bear-text-lg bear-font-semibold bear-text-gray-900 dark:bear-text-white", d = "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", x = "bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300", i = "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";
+}, i = "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", d = "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", l = "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", S = "bear-px-6 bear-py-4 bear-text-gray-600 dark:bear-text-gray-300", x = "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", c = {
+  scale: "animate-scale-in",
+  fade: "animate-fade-in",
+  "slide-down": "animate-grow-up",
+  fold: "animate-alert-dialog-in",
+  none: ""
+};
 export {
-  x as MODAL_BODY_CLASSES,
-  d as MODAL_CLOSE_CLASSES,
-  t as MODAL_CONTAINER_CLASSES,
-  i as MODAL_FOOTER_CLASSES,
-  o as MODAL_HEADER_CLASSES,
-  r as MODAL_PANEL_Z_INDEX,
-  a as MODAL_ROOT_CLASSES,
-  b as MODAL_SIZE_CLASSES,
-  n as MODAL_TITLE_CLASSES,
-  e as MODAL_Z_INDEX
+  S as MODAL_BODY_CLASSES,
+  s as MODAL_CLOSE_CLASSES,
+  i as MODAL_CONTAINER_CLASSES,
+  c as MODAL_EFFECT_CLASS_MAP,
+  x as MODAL_FOOTER_CLASSES,
+  d as MODAL_HEADER_CLASSES,
+  t as MODAL_PANEL_Z_INDEX,
+  o as MODAL_ROOT_CLASSES,
+  n as MODAL_SIZE_CLASSES,
+  l as MODAL_TITLE_CLASSES,
+  b as MODAL_Z_INDEX
 };

package/dist/components/Modal/Modal.js

@@ -1,107 +1,110 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
-import { useCallback as I, useEffect as w } from "react";
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { useRef as R, useEffect as w } from "react";
 import { createPortal as x } from "react-dom";
-import { cn as o } from "../../utils/cn.js";
-import { resolveBearId as T } from "../../utils/generateBearId.utils.js";
-import { useBearId as R } from "../../utils/useBearId.js";
-import { CloseIcon as g } from "@forgedevstack/bear-icons/navigation";
-import { Backdrop as z } from "../Backdrop/Backdrop.js";
-import { MODAL_Z_INDEX as P, MODAL_ROOT_CLASSES as Z, MODAL_PANEL_Z_INDEX as j, MODAL_TITLE_CLASSES as X, MODAL_CLOSE_CLASSES as $, MODAL_HEADER_CLASSES as F, MODAL_BODY_CLASSES as H, MODAL_FOOTER_CLASSES as K, MODAL_SIZE_CLASSES as Y, MODAL_CONTAINER_CLASSES as q } from "./Modal.const.js";
-const le = (u) => {
+import { cn as l } from "../../utils/cn.js";
+import { resolveBearId as g } from "../../utils/generateBearId.utils.js";
+import { useBearId as F } from "../../utils/useBearId.js";
+import { useFocusTrap as P } from "../../hooks/useFocusTrap/useFocusTrap.js";
+import { resolveOverlayEffects as z } from "../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.js";
+import { CloseIcon as Z } from "@forgedevstack/bear-icons/navigation";
+import { Backdrop as j } from "../Backdrop/Backdrop.js";
+import { MODAL_Z_INDEX as X, MODAL_ROOT_CLASSES as $, MODAL_PANEL_Z_INDEX as H, MODAL_TITLE_CLASSES as K, MODAL_CLOSE_CLASSES as Y, MODAL_HEADER_CLASSES as q, MODAL_BODY_CLASSES as G, MODAL_FOOTER_CLASSES as J, MODAL_EFFECT_CLASS_MAP as S, MODAL_SIZE_CLASSES as Q, MODAL_CONTAINER_CLASSES as U } from "./Modal.const.js";
+const ne = (d) => {
   const {
-    isOpen: a,
-    onClose: l,
-    title: r,
-    children: E,
-    size: L = "md",
+    isOpen: e,
+    onClose: r,
+    title: a,
+    children: u,
+    size: E = "md",
     showCloseButton: c = !0,
-    closeOnEscape: f = !0,
-    disableEscapeKeyDown: p = !1,
-    lockBodyScroll: A = !0,
+    closeOnEscape: p = !0,
+    disableEscapeKeyDown: A = !1,
+    lockBodyScroll: L = !0,
     cancelPreventScroll: C = !1,
     closeOnBackdrop: M = !0,
     hideBackdrop: O = !1,
     keepMounted: n = !1,
     isCancelBackgroundClick: i,
-    zIndex: B = P,
-    className: k,
+    zIndex: B = X,
+    className: b,
     footer: m,
-    testId: b,
-    id: h
-  } = u, v = R("Modal"), d = T(h, v), _ = A && !C, y = i !== void 0 ? i : M, S = f && !p, t = I(
-    (N) => {
-      S && N.key === "Escape" && l();
-    },
-    [S, l]
-  );
-  if (w(() => {
-    if (a)
-      return document.addEventListener("keydown", t), _ && (document.body.style.overflow = "hidden"), () => {
-        document.removeEventListener("keydown", t), document.body.style.overflow = "";
+    testId: D,
+    id: v
+  } = d, N = F("Modal"), t = g(v, N), _ = R(null), f = L && !C, h = i !== void 0 ? i : M, y = p && !A, { openEffect: k } = z(d, "scale"), I = S[k] ?? S.scale;
+  if (P(_, {
+    enabled: e,
+    onEscape: y ? r : void 0
+  }), w(() => {
+    if (e)
+      return f && (document.body.style.overflow = "hidden"), () => {
+        document.body.style.overflow = "";
       };
-  }, [a, t, _]), !a && !n) return null;
-  const D = /* @__PURE__ */ s(
+  }, [e, f]), !e && !n) return null;
+  const T = /* @__PURE__ */ s(
     "div",
     {
-      className: Z,
-      "data-testid": b,
-      id: d,
+      className: $,
+      "data-testid": D,
+      id: t,
       style: { zIndex: B },
       children: [
-        !O && /* @__PURE__ */ e(
-          z,
+        !O && /* @__PURE__ */ o(
+          j,
           {
-            open: a,
+            open: e,
             keepMounted: n,
             blur: !0,
             nested: !0,
             className: "Bear-Modal__backdrop",
-            onClick: y ? () => l() : void 0
+            onClick: h ? () => r() : void 0
           }
         ),
         /* @__PURE__ */ s(
           "div",
           {
+            ref: _,
             role: "dialog",
             "aria-modal": "true",
-            "aria-labelledby": r ? `${d}-title` : void 0,
-            className: o(
+            "aria-labelledby": a ? `${t}-title` : void 0,
+            className: l(
               "Bear-Modal__container",
-              q,
-              Y[L],
-              k
+              U,
+              Q[E],
+              e && I,
+              b
             ),
-            style: { zIndex: j },
+            style: { zIndex: H },
             children: [
-              (r || c) && /* @__PURE__ */ s("div", { className: o("Bear-Modal__header", F), children: [
-                r && /* @__PURE__ */ e(
+              (a || c) && /* @__PURE__ */ s("div", { className: l("Bear-Modal__header", q), children: [
+                a && /* @__PURE__ */ o(
                   "h2",
                   {
-                    id: `${d}-title`,
-                    className: o("Bear-Modal__title", X),
-                    children: r
+                    id: `${t}-title`,
+                    className: l("Bear-Modal__title", K),
+                    children: a
                   }
                 ),
-                c && /* @__PURE__ */ e(
+                c && /* @__PURE__ */ o(
                   "button",
                   {
-                    onClick: l,
-                    className: o("Bear-Modal__close", $),
+                    type: "button",
+                    onClick: r,
+                    className: l("Bear-Modal__close", Y),
                     "aria-label": "Close modal",
-                    children: /* @__PURE__ */ e(g, { className: "bear-w-5 bear-h-5" })
+                    children: /* @__PURE__ */ o(Z, { className: "bear-w-5 bear-h-5" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ e("div", { className: o("Bear-Modal__body", H), children: E }),
-              m && /* @__PURE__ */ e("div", { className: o("Bear-Modal__footer", K), children: m })
+              /* @__PURE__ */ o("div", { className: l("Bear-Modal__body", G), children: u }),
+              m && /* @__PURE__ */ o("div", { className: l("Bear-Modal__footer", J), children: m })
             ]
           }
         )
       ]
     }
   );
-  return x(D, document.body);
+  return x(T, document.body);
 };
 export {
-  le as Modal
+  ne as Modal
 };

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

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { OverlayMotionEffect, OverlayEffectConfig } from '../../hooks/useFixedAnchorPosition';
 export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export interface ModalProps {
     /** Whether the modal is open */
@@ -26,6 +27,12 @@ export interface ModalProps {
     cancelPreventScroll?: boolean;
     /** When provided, sets whether clicking the backdrop closes the modal (overrides closeOnBackdrop) */
     isCancelBackgroundClick?: boolean;
+    /** Transition effect when opening */
+    openEffect?: OverlayMotionEffect;
+    /** Transition effect when closing */
+    closeEffect?: OverlayMotionEffect;
+    /** Config for open and close transition effects */
+    effect?: OverlayEffectConfig;
     /** Additional class names for content */
     className?: string;
     /** Footer content */

package/dist/components/Popover/Popover.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),l=require("react"),D=require("react-dom"),p=require("../../utils/cn.cjs"),H=11e3;function X(d,t,s){const e={position:"fixed",zIndex:H},a=d.split("-")[0],n=d.includes("start"),o=d.includes("end");return a==="bottom"?(e.top=t.bottom+s,n?e.left=t.left:o?e.left=t.right:e.left=t.left+t.width/2):a==="top"?(e.bottom=window.innerHeight-t.top+s,n?e.left=t.left:o?e.left=t.right:e.left=t.left+t.width/2):a==="left"?(e.right=window.innerWidth-t.left+s,n?e.top=t.top:o?e.bottom=window.innerHeight-t.bottom:e.top=t.top+t.height/2):(e.left=t.right+s,n?e.top=t.top:o?e.bottom=window.innerHeight-t.bottom:e.top=t.top+t.height/2),a==="bottom"||a==="top"?!n&&!o?e.transform="translateX(-50%)":o&&(e.transform="translateX(-100%)"):!n&&!o?e.transform="translateY(-50%)":o&&(e.transform="translateY(-100%)"),e}const T=({children:d,content:t,placement:s="bottom",trigger:e="click",open:a,onOpenChange:n,className:o,contentClassName:x,arrow:L=!0,closeOnClickOutside:m=!0,closeOnEscape:v=!0,offset:w=8})=>{const[k,z]=l.useState(!1),[R,S]=l.useState({}),f=l.useRef(null),h=l.useRef(null),i=a!==void 0?a:k,b=l.useCallback(r=>{z(r),n==null||n(r)},[n]);l.useEffect(()=>{if(!i||!f.current)return;const r=()=>{if(!f.current)return;const u=f.current.getBoundingClientRect();S(X(s,u,w))};return r(),window.addEventListener("resize",r),window.addEventListener("scroll",r,!0),()=>{window.removeEventListener("resize",r),window.removeEventListener("scroll",r,!0)}},[i,s,w]),l.useEffect(()=>{if(!m)return;const r=u=>{var y,g;const E=u.target;(y=f.current)!=null&&y.contains(E)||(g=h.current)!=null&&g.contains(E)||b(!1)};return i&&document.addEventListener("mousedown",r),()=>document.removeEventListener("mousedown",r)},[i,m,b]),l.useEffect(()=>{if(!v)return;const r=u=>{u.key==="Escape"&&b(!1)};return i&&document.addEventListener("keydown",r),()=>document.removeEventListener("keydown",r)},[i,v,b]);const j=()=>{e==="click"&&b(!i)},P=()=>{e==="hover"&&b(!0)},M=()=>{e==="hover"&&b(!1)},N={top:"bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-border-t-zinc-700 bear-border-x-transparent bear-border-b-transparent",bottom:"bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-border-b-zinc-700 bear-border-x-transparent bear-border-t-transparent",left:"bear-left-full bear-top-1/2 -bear-translate-y-1/2 bear-border-l-zinc-700 bear-border-y-transparent bear-border-r-transparent",right:"bear-right-full bear-top-1/2 -bear-translate-y-1/2 bear-border-r-zinc-700 bear-border-y-transparent bear-border-l-transparent"},q=s.split("-")[0],I=i&&typeof document<"u"&&D.createPortal(c.jsxs("div",{ref:h,"data-bear-popover":!0,className:p.cn("bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3",x),style:R,children:[t,L&&c.jsx("div",{className:p.cn("bear-absolute bear-w-0 bear-h-0 bear-border-8",N[q])})]}),document.body);return c.jsxs("div",{ref:f,className:p.cn("bear-relative bear-inline-block",o),onMouseEnter:P,onMouseLeave:M,children:[c.jsx("div",{onClick:j,className:"bear-cursor-pointer",children:d}),I]})};exports.Popover=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react/jsx-runtime"),c=require("react"),V=require("react-dom"),R=require("../../utils/cn.cjs"),m=require("../../constants/numbers.const.cjs"),j=require("../../hooks/useFixedAnchorPosition/useFixedAnchorPosition.utils.cjs"),e=require("./Popover.const.cjs");function z(E,t,d){const n={position:"fixed",zIndex:e.POPOVER_Z_INDEX},[r]=E.split("-"),s=E.includes(e.ALIGN_START),i=E.includes(e.ALIGN_END);return r===e.PLACEMENT_BOTTOM||r===e.PLACEMENT_TOP?(n.top=r===e.PLACEMENT_BOTTOM?t.bottom+d:void 0,n.bottom=r===e.PLACEMENT_TOP?window.innerHeight-t.top+d:void 0,n.left=s?t.left:i?t.right:t.left+t.width/m.TWO,n.transform=!s&&!i?e.TRANSFORM_TRANSLATE_X_CENTER:i?e.TRANSFORM_TRANSLATE_X_END:void 0):(n.left=r===e.PLACEMENT_RIGHT?t.right+d:void 0,n.right=r===e.PLACEMENT_LEFT?window.innerWidth-t.left+d:void 0,n.bottom=i?window.innerHeight-t.bottom:void 0,n.top=i?void 0:s?t.top:t.top+t.height/m.TWO,n.transform=!s&&!i?e.TRANSFORM_TRANSLATE_Y_CENTER:i?e.TRANSFORM_TRANSLATE_Y_END:void 0),n}const B=({children:E,content:t,placement:d=e.PLACEMENT_BOTTOM,trigger:n="click",open:r,onOpenChange:s,className:i,contentClassName:b,arrow:O=!0,closeOnClickOutside:P=!0,closeOnEscape:A=!0,offset:L=e.POPOVER_DEFAULT_OFFSET,openEffect:w,closeEffect:S,effect:h})=>{const[M,p]=c.useState(!1),[C,F]=c.useState({}),f=c.useRef(null),T=c.useRef(null),a=r!==void 0?r:M,l=c.useCallback(o=>{p(o),s==null||s(o)},[s]),v=c.useCallback(()=>{if(!f.current||!T.current)return;const o=f.current.firstElementChild;if(!o)return;const u=o.getBoundingClientRect();F(z(d,u,L))},[d,L]);c.useEffect(()=>{if(a){v();const o=()=>v(),u=()=>v();return window.addEventListener("resize",o),window.addEventListener("scroll",u,!0),()=>{window.removeEventListener("resize",o),window.removeEventListener("scroll",u,!0)}}},[a,v]),c.useEffect(()=>{if(!a||!P)return;const o=u=>{const N=u.target;f.current&&!f.current.contains(N)&&T.current&&!T.current.contains(N)&&l(!1)};return document.addEventListener("mousedown",o),()=>document.removeEventListener("mousedown",o)},[a,P,l]),c.useEffect(()=>{if(!a||!A)return;const o=u=>{u.key==="Escape"&&l(!1)};return document.addEventListener("keydown",o),()=>document.removeEventListener("keydown",o)},[a,A,l]);const g=()=>{n==="click"&&l(!a)},y=()=>{n==="hover"&&l(!0)},k=()=>{n==="hover"&&l(!1)},x=d.split("-")[0],{openEffect:D}=j.resolveOverlayEffects({openEffect:w,closeEffect:S,effect:h},"fade"),q=e.POPOVER_EFFECT_CLASS_MAP[D]??e.POPOVER_EFFECT_CLASS_MAP.fade,I=a&&typeof document<"u"&&V.createPortal(_.jsxs("div",{ref:T,"data-bear-popover":!0,className:R.cn("bear-bg-zinc-800 bear-border bear-border-zinc-700 bear-rounded-lg bear-shadow-xl bear-p-3",q,b),style:C,children:[t,O&&_.jsx("div",{className:R.cn("bear-absolute bear-w-0 bear-h-0 bear-border-8",e.POPOVER_ARROW_STYLES[x])})]}),document.body);return _.jsxs("div",{ref:f,className:R.cn("bear-relative bear-inline-block",i),onMouseEnter:y,onMouseLeave:k,children:[_.jsx("div",{onClick:g,className:"bear-cursor-pointer",children:E}),I]})};exports.Popover=B;

package/dist/components/Popover/Popover.const.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../constants/numbers.const.cjs"),t=r.ELEVEN_THOUSAND,e=r.EIGHT,a={scale:"animate-scale-in",fade:"animate-fade-in","slide-down":"animate-grow-up",fold:"animate-alert-dialog-in",none:""},E="bottom",T="top",n="left",_="right",o="start",A="end",b="translateX(-50%)",R="translateX(-100%)",N="translateY(-50%)",s="translateY(-100%)",O={top:"bear-top-full bear-left-1/2 -bear-translate-x-1/2 bear-border-t-zinc-700 bear-border-x-transparent bear-border-b-transparent",bottom:"bear-bottom-full bear-left-1/2 -bear-translate-x-1/2 bear-border-b-zinc-700 bear-border-x-transparent bear-border-t-transparent",left:"bear-left-full bear-top-1/2 -bear-translate-y-1/2 bear-border-l-zinc-700 bear-border-y-transparent bear-border-r-transparent",right:"bear-right-full bear-top-1/2 -bear-translate-y-1/2 bear-border-r-zinc-700 bear-border-y-transparent bear-border-l-transparent"};exports.ALIGN_END=A;exports.ALIGN_START=o;exports.PLACEMENT_BOTTOM=E;exports.PLACEMENT_LEFT=n;exports.PLACEMENT_RIGHT=_;exports.PLACEMENT_TOP=T;exports.POPOVER_ARROW_STYLES=O;exports.POPOVER_DEFAULT_OFFSET=e;exports.POPOVER_EFFECT_CLASS_MAP=a;exports.POPOVER_Z_INDEX=t;exports.TRANSFORM_TRANSLATE_X_CENTER=b;exports.TRANSFORM_TRANSLATE_X_END=R;exports.TRANSFORM_TRANSLATE_Y_CENTER=N;exports.TRANSFORM_TRANSLATE_Y_END=s;

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

@@ -1 +1,15 @@
-export declare const P_O_P_O_V_E_R_ROOT_CLASS = "Bear-Popover";
+export declare const POPOVER_ROOT_CLASS = "Bear-Popover";
+export declare const POPOVER_Z_INDEX = 11000;
+export declare const POPOVER_DEFAULT_OFFSET = 8;
+export declare const POPOVER_EFFECT_CLASS_MAP: Record<string, string>;
+export declare const PLACEMENT_BOTTOM = "bottom";
+export declare const PLACEMENT_TOP = "top";
+export declare const PLACEMENT_LEFT = "left";
+export declare const PLACEMENT_RIGHT = "right";
+export declare const ALIGN_START = "start";
+export declare const ALIGN_END = "end";
+export declare const TRANSFORM_TRANSLATE_X_CENTER = "translateX(-50%)";
+export declare const TRANSFORM_TRANSLATE_X_END = "translateX(-100%)";
+export declare const TRANSFORM_TRANSLATE_Y_CENTER = "translateY(-50%)";
+export declare const TRANSFORM_TRANSLATE_Y_END = "translateY(-100%)";
+export declare const POPOVER_ARROW_STYLES: Record<string, string>;