reaxify 0.0.98 → 1.2.0

package/dist/components/Menu/index.cjs.js

@@ -1 +1 @@
-"use client";"use strict";const i=require("react/jsx-runtime"),A=require("../../helpers/cn.cjs.js"),L=require("../../hooks/useClasses.cjs.js"),t=require("react"),G=require("../../node_modules/@tanstack/react-hotkeys/dist/useHotkey.cjs.js"),R=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),J=require("../Button/index.cjs.js"),K=require("../Portal/index.cjs.js"),Q=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),w=t.createContext({open:!1,onClose:()=>{},transitionState:"unmounted",closeOnClick:!1,preventClose:!1});function $({as:l,ref:a,open:n,duration:m=300,onClose:r,onEnter:v,onEntering:y,onEntered:C,onExit:u,onExiting:b,onExited:M,closeOnClick:f=!1,preventClose:j=!1,anchorEl:k=null,className:I,children:H,...N}){const W=L(e=>e.menu.base),B=l||"ul",s=16,o=t.useRef(null),S=t.useRef({left:s,right:s,top:s}),D={entering:"scale-100 opacity-100",entered:"scale-100 opacity-100",exiting:"scale-90 opacity-0",exited:"scale-90 opacity-0",unmounted:""},P=t.useCallback(e=>{S.current=e},[]),z=t.useCallback(e=>{var c,x,d;(c=o.current)==null||c.style.setProperty("--left",`${e.left}px`),(x=o.current)==null||x.style.setProperty("--right",`${e.right}px`),(d=o.current)==null||d.style.setProperty("--top",`${e.top}px`)},[]),p=t.useCallback(()=>{var E,O;if(!n||!k)return;const e=k.getBoundingClientRect(),c=window.innerWidth,x=window.innerHeight,d=((E=o.current)==null?void 0:E.offsetWidth)||150,T=((O=o.current)==null?void 0:O.offsetHeight)||200;let g=e.left,q=e.right,h=e.bottom;g=Math.min(Math.max(g,s),c-d-s),q=Math.min(Math.max(c-e.right,s),c-d-s),h=Math.min(Math.max(h,s),x-T-s),P({left:g,right:q,top:h}),z({left:g,right:q,top:h})},[n,k,P,z]),F=()=>{j||r==null||r()};return t.useEffect(()=>{p()},[p,H]),t.useEffect(()=>{const e=()=>{p()};return window.addEventListener("scroll",e),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e),window.removeEventListener("resize",e)}},[p]),t.useImperativeHandle(a,()=>o.current),G.useHotkey("Escape",()=>r(),{conflictBehavior:"allow",ignoreInputs:!0,enabled:n&&!j}),i.jsx(K,{children:i.jsx(Q.default,{nodeRef:o,in:n,timeout:m,unmountOnExit:!0,onEnter:v,onEntering:y,onEntered:C,onExit:u,onExiting:b,onExited:M,children:e=>i.jsx(w.Provider,{value:{open:n,onClose:F,transitionState:e,closeOnClick:f,preventClose:j},children:i.jsxs(U,{children:[i.jsx(V,{}),i.jsx(B,{ref:o,autoFocus:!0,"data-open":n,role:"menu",style:{transitionDuration:`${m}ms`},className:R.twMerge("w-fit min-w-52 bg-white shadow-lg rounded py-2 transition-[scale,opacity] absolute top-(--top) left-(--left) right-auto origin-top-left rtl:left-auto rtl:right-(--right) rtl:origin-top-right",W,D[e],I),...N,children:H})]})})})})}function U({children:l}){const{transitionState:a}=t.useContext(w),n={entering:"active pointer-events-auto",entered:"active pointer-events-auto",exiting:"pointer-events-none",exited:"pointer-events-none",unmounted:""};return i.jsx("div",{className:R.twMerge("fixed inset-0 size-full flex flex-col bg-transparent transition-opacity overflow-hidden z-10",n[a]),children:l})}function V(){const{onClose:l,preventClose:a}=t.useContext(w);return i.jsx("div",{className:A("w-full flex-1 opacity-0 cursor-default lg:absolute lg:size-full lg:inset-0",a&&"[&:active~*]:scale-95"),onClick:l})}function X({as:l,closeOnClick:a,className:n,children:m,onClick:r,...v}){const y=L(f=>f.menu.item.base),{closeOnClick:C,onClose:u}=t.useContext(w),b=a??C,M=f=>{b&&(u==null||u()),r==null||r(f)};return i.jsx(J,{as:l??"li",color:"light",variant:"text",role:"menuitem",className:R.twMerge("w-full flex items-center justify-start align-middle px-4 py-1.5 bg-transparent text-base font-normal rounded-none whitespace-nowrap transition-colors hover:bg-dark/5",y,n),onClick:M,...v,children:m})}$.Item=X;module.exports=$;
+"use client";"use strict";const i=require("react/jsx-runtime"),n=require("react"),R=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),G=require("../Button/index.cjs.js"),J=require("../Portal/index.cjs.js"),W=require("../../hooks/useClasses.cjs.js"),K=require("../../helpers/anchorPointer.cjs.js"),Q=require("../../hooks/usePreventableClose.cjs.js"),U=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),V=require("../../helpers/cn.cjs.js"),y=n.createContext({open:!1,onClose:()=>{},transitionState:"unmounted",closeOnClick:!1,preventClose:!1,dismiss:()=>{},anchorPointer:!1});function I({as:l,ref:c,open:t,duration:u=300,onClose:o,onEnter:b,onEntering:M,onEntered:j,onExit:x,onExiting:P,onExited:k,closeOnClick:p=!1,preventClose:z=!1,anchorEl:g=null,anchorPointer:q=!1,className:S,children:H,...$}){const B=W(e=>e.menu.base),D=l||"ul",s=16,r=n.useRef(null),A=n.useRef({left:s,right:s,top:s}),F={entering:"scale-100 opacity-100",entered:"scale-100 opacity-100",exiting:"scale-90 opacity-0",exited:"scale-90 opacity-0",unmounted:""},O=n.useCallback(e=>{A.current=e},[]),E=n.useCallback(e=>{var w,h,C;(w=r.current)==null||w.style.setProperty("--left",`${e.left}px`),(h=r.current)==null||h.style.setProperty("--right",`${e.right}px`),(C=r.current)==null||C.style.setProperty("--top",`${e.top}px`)},[]),v=n.useCallback(()=>{var L,N;if(!t||!g)return;const e=window.innerWidth,w=window.innerHeight,h=((L=r.current)==null?void 0:L.offsetWidth)||150,C=((N=r.current)==null?void 0:N.offsetHeight)||200;let d,f,m;if(q){const a=K.getAnchorPointer(g);if(!a)return;d=a.x,f=e-a.x,m=a.y}else{const a=g.getBoundingClientRect();d=a.left,f=e-a.right,m=a.bottom}d=Math.min(Math.max(d,s),e-h-s),f=Math.min(Math.max(f,s),e-h-s),m=Math.min(Math.max(m,s),w-C-s),O({left:d,right:f,top:m}),E({left:d,right:f,top:m})},[t,g,q,O,E]),T=Q({preventClose:z,open:t,onClose:o});return n.useEffect(()=>{v()},[v,H]),n.useEffect(()=>{const e=()=>{v()};return window.addEventListener("scroll",e),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e),window.removeEventListener("resize",e)}},[v]),n.useImperativeHandle(c,()=>r.current),i.jsx(J,{children:i.jsx(U.default,{nodeRef:r,in:t,timeout:u,unmountOnExit:!0,onEnter:b,onEntering:M,onEntered:j,onExit:x,onExiting:P,onExited:k,children:e=>i.jsx(y.Provider,{value:{open:t,onClose:o,dismiss:T,transitionState:e,closeOnClick:p,preventClose:z,anchorPointer:q},children:i.jsxs(X,{children:[i.jsx(Y,{}),i.jsx(D,{ref:r,autoFocus:!0,"data-open":t,role:"menu","data-name":"menu",style:{transitionDuration:`${u}ms`},className:R.twMerge("w-fit min-w-52 bg-white shadow-lg rounded py-2 transition-[scale,opacity] absolute top-(--top) left-(--left) right-auto origin-top-left rtl:left-auto rtl:right-(--right) rtl:origin-top-right",B,F[e],S),...$,children:H})]})})})})}function X({children:l}){const{transitionState:c}=n.useContext(y),t={entering:"active pointer-events-auto",entered:"active pointer-events-auto",exiting:"pointer-events-none",exited:"pointer-events-none",unmounted:""};return i.jsx("div",{"data-name":"menu-container",className:R.twMerge("fixed inset-0 size-full flex flex-col bg-transparent transition-opacity overflow-hidden z-10",t[c]),children:l})}function Y(){const{dismiss:l,preventClose:c,anchorPointer:t}=n.useContext(y),u=o=>{t&&o.preventDefault()};return i.jsx("div",{"data-name":"menu-backdrop",className:V("w-full flex-1 opacity-0 cursor-default lg:absolute lg:size-full lg:inset-0",c&&"[&:active~*]:scale-95"),onContextMenu:u,onClick:l})}function Z({as:l,closeOnClick:c,className:t,children:u,onClick:o,...b}){const M=W(p=>p.menu.item.base),{closeOnClick:j,onClose:x}=n.useContext(y),P=c??j,k=p=>{P&&(x==null||x()),o==null||o(p)};return i.jsx(G,{as:l??"li",color:"light",variant:"text",role:"menuitem","data-name":"menu-item",className:R.twMerge("w-full flex items-center justify-start align-middle px-4 py-1.5 bg-transparent text-base font-normal rounded-none whitespace-nowrap transition-colors hover:bg-dark/5",M,t),onClick:k,...b,children:u})}I.Item=Z;module.exports=I;

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

@@ -2,14 +2,15 @@ import { ComponentPropsWithAs, ToggleEventProps, ToggleProps } from '../../types
 import { ElementType } from 'react';
 type MenuProps = {
     anchorEl?: HTMLElement | null;
+    anchorPointer?: boolean;
     closeOnClick?: boolean;
     preventClose?: boolean;
     duration?: number;
-} & Partial<ToggleEventProps> & ToggleProps;
+} & Partial<ToggleEventProps> & Partial<ToggleProps>;
 type MenuItemProps = {
     closeOnClick?: boolean;
 };
-declare function Menu<E extends ElementType = "ul">({ as, ref, open, duration, onClose, onEnter, onEntering, onEntered, onExit, onExiting, onExited, closeOnClick, preventClose, anchorEl, className, children, ...props }: ComponentPropsWithAs<E, MenuProps>): import("react/jsx-runtime").JSX.Element;
+declare function Menu<E extends ElementType = "ul">({ as, ref, open, duration, onClose, onEnter, onEntering, onEntered, onExit, onExiting, onExited, closeOnClick, preventClose, anchorEl, anchorPointer, className, children, ...props }: ComponentPropsWithAs<E, MenuProps>): import("react/jsx-runtime").JSX.Element;
 declare namespace Menu {
     var Item: typeof MenuItem;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,oBAAoB,EACpB,gBAAgB,EAChB,WAAW,EACZ,MAAM,SAAS,CAAC;AAGjB,OAAO,EAEL,WAAW,EAOZ,MAAM,OAAO,CAAC;AAOf,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,OAAO,CAAC,gBAAgB,CAAC,GAC3B,WAAW,CAAC;AACd,KAAK,aAAa,GAAG;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAgBF,iBAAS,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,IAAI,EAAE,EAC1C,EAAE,EACF,GAAG,EACH,IAAI,EACJ,QAAc,EACd,OAAO,EACP,OAAO,EACP,UAAU,EACV,SAAS,EACT,MAAM,EACN,SAAS,EACT,QAAQ,EACR,YAAoB,EACpB,YAAoB,EACpB,QAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,EAAE,SAAS,CAAC,2CA2HpC;kBA7IQ,IAAI;;;AA8Kb,iBAAS,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EAClD,EAAE,EACF,YAAY,EAAE,gBAAgB,EAC9B,SAAS,EACT,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,EAAE,aAAa,CAAC,2CAyBxC;AAID,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,oBAAoB,EACpB,gBAAgB,EAChB,WAAW,EACZ,MAAM,SAAS,CAAC;AAEjB,OAAO,EAEL,WAAW,EAOZ,MAAM,OAAO,CAAC;AAOf,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB,GAAG,OAAO,CAAC,gBAAgB,CAAC,GAC3B,OAAO,CAAC,WAAW,CAAC,CAAC;AACvB,KAAK,aAAa,GAAG;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAoBF,iBAAS,IAAI,CAAC,CAAC,SAAS,WAAW,GAAG,IAAI,EAAE,EAC1C,EAAE,EACF,GAAG,EACH,IAAI,EACJ,QAAc,EACd,OAAO,EACP,OAAO,EACP,UAAU,EACV,SAAS,EACT,MAAM,EACN,SAAS,EACT,QAAQ,EACR,YAAoB,EACpB,YAAoB,EACpB,QAAe,EACf,aAAqB,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,EAAE,SAAS,CAAC,2CAmIpC;kBAtJQ,IAAI;;;AA6Lb,iBAAS,QAAQ,CAAC,CAAC,SAAS,WAAW,GAAG,QAAQ,EAAE,EAClD,EAAE,EACF,YAAY,EAAE,gBAAgB,EAC9B,SAAS,EACT,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,EAAE,aAAa,CAAC,2CA0BxC;AAID,eAAe,IAAI,CAAC"}

package/dist/components/Menu/index.es.js

@@ -1,121 +1,131 @@
 "use client";
-import { jsx as r, jsxs as J } from "react/jsx-runtime";
-import K from "../../helpers/cn.es.js";
-import $ from "../../hooks/useClasses.es.js";
-import { createContext as Q, useRef as N, useCallback as H, useEffect as W, useImperativeHandle as U, useContext as z } from "react";
-import { useHotkey as V } from "../../node_modules/@tanstack/react-hotkeys/dist/useHotkey.es.js";
-import { twMerge as O } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
-import X from "../Button/index.es.js";
-import Y from "../Portal/index.es.js";
-import Z from "../../node_modules/react-transition-group/esm/Transition.es.js";
-const w = Q({
+import { jsx as r, jsxs as K } from "react/jsx-runtime";
+import { useRef as E, useCallback as H, useEffect as I, useImperativeHandle as Q, createContext as U, useContext as O } from "react";
+import { twMerge as R } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
+import V from "../Button/index.es.js";
+import X from "../Portal/index.es.js";
+import S from "../../hooks/useClasses.es.js";
+import { getAnchorPointer as Y } from "../../helpers/anchorPointer.es.js";
+import Z from "../../hooks/usePreventableClose.es.js";
+import _ from "../../node_modules/react-transition-group/esm/Transition.es.js";
+import tt from "../../helpers/cn.es.js";
+const y = U({
   open: !1,
   onClose: () => {
   },
   transitionState: "unmounted",
   closeOnClick: !1,
-  preventClose: !1
+  preventClose: !1,
+  dismiss: () => {
+  },
+  anchorPointer: !1
 });
-function _({
-  as: s,
+function et({
+  as: a,
   ref: l,
   open: e,
-  duration: m = 300,
+  duration: c = 300,
   onClose: o,
-  onEnter: x,
-  onEntering: v,
-  onEntered: y,
-  onExit: c,
-  onExiting: b,
-  onExited: C,
-  closeOnClick: u = !1,
-  preventClose: M = !1,
-  anchorEl: k = null,
-  className: j,
-  children: R,
-  ...S
+  onEnter: C,
+  onEntering: b,
+  onEntered: M,
+  onExit: d,
+  onExiting: P,
+  onExited: k,
+  closeOnClick: p = !1,
+  preventClose: L = !1,
+  anchorEl: h = null,
+  anchorPointer: z = !1,
+  className: D,
+  children: N,
+  ...A
 }) {
-  const D = $((t) => t.menu.base), F = s || "ul", n = 16, i = N(null), T = N({
+  const F = S((t) => t.menu.base), T = a || "ul", n = 16, i = E(null), q = E({
     left: n,
     right: n,
     top: n
-  }), q = {
+  }), G = {
     entering: "scale-100 opacity-100",
     entered: "scale-100 opacity-100",
     exiting: "scale-90 opacity-0",
     exited: "scale-90 opacity-0",
     unmounted: ""
-  }, E = H((t) => {
-    T.current = t;
-  }, []), L = H((t) => {
-    var a, p, f;
-    (a = i.current) == null || a.style.setProperty("--left", `${t.left}px`), (p = i.current) == null || p.style.setProperty("--right", `${t.right}px`), (f = i.current) == null || f.style.setProperty("--top", `${t.top}px`);
-  }, []), d = H(() => {
-    var B, I;
-    if (!e || !k) return;
-    const t = k.getBoundingClientRect(), a = window.innerWidth, p = window.innerHeight, f = ((B = i.current) == null ? void 0 : B.offsetWidth) || 150, G = ((I = i.current) == null ? void 0 : I.offsetHeight) || 200;
-    let h = t.left, P = t.right, g = t.bottom;
-    h = Math.min(Math.max(h, n), a - f - n), P = Math.min(
-      Math.max(a - t.right, n),
-      a - f - n
-    ), g = Math.min(Math.max(g, n), p - G - n), E({ left: h, right: P, top: g }), L({ left: h, right: P, top: g });
-  }, [e, k, E, L]), A = () => {
-    M || o == null || o();
-  };
-  return W(() => {
-    d();
-  }, [d, R]), W(() => {
+  }, W = H((t) => {
+    q.current = t;
+  }, []), $ = H((t) => {
+    var v, g, w;
+    (v = i.current) == null || v.style.setProperty("--left", `${t.left}px`), (g = i.current) == null || g.style.setProperty("--right", `${t.right}px`), (w = i.current) == null || w.style.setProperty("--top", `${t.top}px`);
+  }, []), x = H(() => {
+    var j, B;
+    if (!e || !h) return;
+    const t = window.innerWidth, v = window.innerHeight, g = ((j = i.current) == null ? void 0 : j.offsetWidth) || 150, w = ((B = i.current) == null ? void 0 : B.offsetHeight) || 200;
+    let u, m, f;
+    if (z) {
+      const s = Y(h);
+      if (!s) return;
+      u = s.x, m = t - s.x, f = s.y;
+    } else {
+      const s = h.getBoundingClientRect();
+      u = s.left, m = t - s.right, f = s.bottom;
+    }
+    u = Math.min(Math.max(u, n), t - g - n), m = Math.min(
+      Math.max(m, n),
+      t - g - n
+    ), f = Math.min(Math.max(f, n), v - w - n), W({ left: u, right: m, top: f }), $({ left: u, right: m, top: f });
+  }, [e, h, z, W, $]), J = Z({ preventClose: L, open: e, onClose: o });
+  return I(() => {
+    x();
+  }, [x, N]), I(() => {
     const t = () => {
-      d();
+      x();
     };
     return window.addEventListener("scroll", t), window.addEventListener("resize", t), () => {
       window.removeEventListener("scroll", t), window.removeEventListener("resize", t);
     };
-  }, [d]), U(l, () => i.current), V("Escape", () => o(), {
-    conflictBehavior: "allow",
-    ignoreInputs: !0,
-    enabled: e && !M
-  }), /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ r(
-    Z,
+  }, [x]), Q(l, () => i.current), /* @__PURE__ */ r(X, { children: /* @__PURE__ */ r(
+    _,
     {
       nodeRef: i,
       in: e,
-      timeout: m,
+      timeout: c,
       unmountOnExit: !0,
-      onEnter: x,
-      onEntering: v,
-      onEntered: y,
-      onExit: c,
-      onExiting: b,
-      onExited: C,
+      onEnter: C,
+      onEntering: b,
+      onEntered: M,
+      onExit: d,
+      onExiting: P,
+      onExited: k,
       children: (t) => /* @__PURE__ */ r(
-        w.Provider,
+        y.Provider,
         {
           value: {
             open: e,
-            onClose: A,
+            onClose: o,
+            dismiss: J,
             transitionState: t,
-            closeOnClick: u,
-            preventClose: M
+            closeOnClick: p,
+            preventClose: L,
+            anchorPointer: z
           },
-          children: /* @__PURE__ */ J(tt, { children: [
-            /* @__PURE__ */ r(et, {}),
+          children: /* @__PURE__ */ K(nt, { children: [
+            /* @__PURE__ */ r(ot, {}),
             /* @__PURE__ */ r(
-              F,
+              T,
               {
                 ref: i,
                 autoFocus: !0,
                 "data-open": e,
                 role: "menu",
-                style: { transitionDuration: `${m}ms` },
-                className: O(
+                "data-name": "menu",
+                style: { transitionDuration: `${c}ms` },
+                className: R(
                   "w-fit min-w-52 bg-white shadow-lg rounded py-2 transition-[scale,opacity] absolute top-(--top) left-(--left) right-auto origin-top-left rtl:left-auto rtl:right-(--right) rtl:origin-top-right",
-                  D,
-                  q[t],
-                  j
+                  F,
+                  G[t],
+                  D
                 ),
-                ...S,
-                children: R
+                ...A,
+                children: N
               }
             )
           ] })
@@ -124,12 +134,13 @@ function _({
     }
   ) });
 }
-function tt({ children: s }) {
-  const { transitionState: l } = z(w);
+function nt({ children: a }) {
+  const { transitionState: l } = O(y);
   return /* @__PURE__ */ r(
     "div",
     {
-      className: O(
+      "data-name": "menu-container",
+      className: R(
         "fixed inset-0 size-full flex flex-col bg-transparent transition-opacity overflow-hidden z-10",
         {
           entering: "active pointer-events-auto",
@@ -139,53 +150,58 @@ function tt({ children: s }) {
           unmounted: ""
         }[l]
       ),
-      children: s
+      children: a
     }
   );
 }
-function et() {
-  const { onClose: s, preventClose: l } = z(w);
+function ot() {
+  const { dismiss: a, preventClose: l, anchorPointer: e } = O(y), c = (o) => {
+    e && o.preventDefault();
+  };
   return /* @__PURE__ */ r(
     "div",
     {
-      className: K(
+      "data-name": "menu-backdrop",
+      className: tt(
         "w-full flex-1 opacity-0 cursor-default lg:absolute lg:size-full lg:inset-0",
         l && "[&:active~*]:scale-95"
       ),
-      onClick: s
+      onContextMenu: c,
+      onClick: a
     }
   );
 }
-function nt({
-  as: s,
+function it({
+  as: a,
   closeOnClick: l,
   className: e,
-  children: m,
+  children: c,
   onClick: o,
-  ...x
+  ...C
 }) {
-  const v = $((u) => u.menu.item.base), { closeOnClick: y, onClose: c } = z(w), b = l ?? y, C = (u) => {
-    b && (c == null || c()), o == null || o(u);
+  const b = S((p) => p.menu.item.base), { closeOnClick: M, onClose: d } = O(y), P = l ?? M, k = (p) => {
+    P && (d == null || d()), o == null || o(p);
   };
   return /* @__PURE__ */ r(
-    X,
+    V,
     {
-      as: s ?? "li",
+      as: a ?? "li",
       color: "light",
       variant: "text",
       role: "menuitem",
-      className: O(
+      "data-name": "menu-item",
+      className: R(
         "w-full flex items-center justify-start align-middle px-4 py-1.5 bg-transparent text-base font-normal rounded-none whitespace-nowrap transition-colors hover:bg-dark/5",
-        v,
+        b,
         e
       ),
-      onClick: C,
-      ...x,
-      children: m
+      onClick: k,
+      ...C,
+      children: c
     }
   );
 }
-_.Item = nt;
+et.Item = it;
 export {
-  _ as default
+  et as default
 };

package/dist/components/Modal/index.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),m=require("../../helpers/cn.cjs.js"),r=require("../../hooks/useClasses.cjs.js"),i=require("react"),k=require("../../node_modules/@tanstack/react-hotkeys/dist/useHotkey.cjs.js"),z=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),x=require("../Card/index.cjs.js"),R=require("../Portal/index.cjs.js"),B=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),j=i.createContext({size:"md",open:!1,onClose:()=>{},transitionState:"unmounted",duration:300});function l({as:t,ref:n,size:o="md",open:e=!1,onClose:a=()=>{},onEnter:f,onEntering:p,onEntered:b,onExit:v,onExiting:u,onExited:c,duration:y=300,preventClose:g=!1,className:C,children:h,...w}){const H=r(d=>d.modal.base),M=i.useRef(null),N=t||"div",S={entering:"active opacity-100 pointer-events-auto",entered:"active opacity-100 pointer-events-auto",exiting:"opacity-0 pointer-events-none",exited:"opacity-0 pointer-events-none",unmounted:""},q=()=>{g||a()};return i.useImperativeHandle(n,()=>M.current),k.useHotkey("Escape",()=>a(),{conflictBehavior:"allow",ignoreInputs:!0,enabled:e&&!g}),s.jsx(R,{children:s.jsx(B.default,{nodeRef:M,in:e,timeout:y,unmountOnExit:!0,onEnter:f,onEntering:p,onEntered:b,onExit:v,onExiting:u,onExited:c,children:d=>s.jsxs(N,{ref:M,"data-open":e,style:{transitionDuration:`${y}ms`},className:z.twMerge("modal fixed size-full inset-0 flex flex-col z-10 bg-black/20 transition-opacity backdrop-blur p-4",H,S[d],C),...w,children:[s.jsx("div",{onClick:q,className:m("absolute inset-0 cursor-default opacity-0",g&&"[&:active~*]:scale-95")}),s.jsx(j.Provider,{value:{size:o,open:e,onClose:q,transitionState:d,duration:y},children:h})]})})})}function D({className:t,children:n,...o}){const e=r(u=>u.modal.dialog),{size:a,transitionState:f,duration:p}=i.useContext(j),b={entering:"scale-100",entered:"scale-100",exiting:"scale-75",exited:"scale-75",unmounted:""},v=i.useMemo(()=>{var c;return[{sm:"min-[576px]:w-[300px]",md:"min-[576px]:w-[500px]",lg:"min-[992px]:w-[800px]"}[a],(c=e==null?void 0:e.size)==null?void 0:c[a]]},[a,e==null?void 0:e.size]);return s.jsx(x,{as:"div",style:{transitionDuration:`${p}ms`},className:z.twMerge("max-w-full max-h-full m-auto transition-transform",e==null?void 0:e.base,v,b[f],t),...o,children:n})}function F({className:t,...n}){const o=r(e=>e.modal.header.base);return s.jsx(x.Header,{className:m(o,t),...n})}function $({className:t,...n}){const o=r(e=>e.modal.body.base);return s.jsx(x.Body,{className:m(o,t),...n})}function E({className:t,...n}){const o=r(e=>e.modal.footer.base);return s.jsx(x.Footer,{className:m(o,t),...n})}l.Dialog=D;l.Header=F;l.Body=$;l.Footer=E;exports.ModalContext=j;exports.default=l;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react/jsx-runtime"),i=require("react"),z=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),m=require("../Card/index.cjs.js"),k=require("../Portal/index.cjs.js"),r=require("../../hooks/useClasses.cjs.js"),D=require("../../hooks/usePreventableClose.cjs.js"),H=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),x=require("../../helpers/cn.cjs.js"),j=i.createContext({size:"md",open:!1,onClose:()=>{},transitionState:"unmounted",duration:300,preventClose:!1,dismiss:()=>{}});function l({as:t,ref:a,size:n="md",open:e=!1,onClose:s=()=>{},onEnter:f,onEntering:p,onEntered:b,onExit:v,onExiting:d,onExited:c,duration:g=300,preventClose:y=!1,className:C,children:h,...w}){const N=r(u=>u.modal.base),M=i.useRef(null),S=t||"div",R={entering:"active opacity-100 pointer-events-auto",entered:"active opacity-100 pointer-events-auto",exiting:"opacity-0 pointer-events-none",exited:"opacity-0 pointer-events-none",unmounted:""},q=D({preventClose:y,open:e,onClose:s});return i.useImperativeHandle(a,()=>M.current),o.jsx(k,{children:o.jsx(H.default,{nodeRef:M,in:e,timeout:g,unmountOnExit:!0,onEnter:f,onEntering:p,onEntered:b,onExit:v,onExiting:d,onExited:c,children:u=>o.jsxs(S,{ref:M,"data-open":e,role:"dialog","data-name":"modal",style:{transitionDuration:`${g}ms`},className:z.twMerge("modal fixed size-full inset-0 flex flex-col z-10 bg-black/20 transition-opacity backdrop-blur p-4",N,R[u],C),...w,children:[o.jsx("div",{"data-name":"modal-backdrop",onClick:q,className:x("absolute inset-0 cursor-default opacity-0",y&&"[&:active~*]:scale-95")}),o.jsx(j.Provider,{value:{size:n,open:e,onClose:s,dismiss:q,transitionState:u,duration:g,preventClose:y},children:h})]})})})}function B({className:t,children:a,...n}){const e=r(d=>d.modal.dialog),{size:s,transitionState:f,duration:p}=i.useContext(j),b={entering:"scale-100",entered:"scale-100",exiting:"scale-75",exited:"scale-75",unmounted:""},v=i.useMemo(()=>{var c;return[{sm:"min-[576px]:w-[300px]",md:"min-[576px]:w-[500px]",lg:"min-[992px]:w-[800px]"}[s],(c=e==null?void 0:e.size)==null?void 0:c[s]]},[s,e==null?void 0:e.size]);return o.jsx(m,{as:"div","data-name":"modal-dialog",style:{transitionDuration:`${p}ms`},className:z.twMerge("max-w-full max-h-full m-auto transition-transform",e==null?void 0:e.base,v,b[f],t),...n,children:a})}function F({className:t,...a}){const n=r(e=>e.modal.header.base);return o.jsx(m.Header,{"data-name":"modal-header",className:x(n,t),...a})}function P({className:t,...a}){const n=r(e=>e.modal.body.base);return o.jsx(m.Body,{"data-name":"modal-body",className:x(n,t),...a})}function $({className:t,...a}){const n=r(e=>e.modal.footer.base);return o.jsx(m.Footer,{"data-name":"modal-footer",className:x(n,t),...a})}l.Dialog=B;l.Header=F;l.Body=P;l.Footer=$;exports.ModalContext=j;exports.default=l;

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

@@ -5,6 +5,8 @@ type Context = {
     size: Size;
     transitionState: TransitionStatus;
     duration: number;
+    preventClose: boolean;
+    dismiss: VoidFunction;
 } & ToggleProps;
 type ModalProps = {
     size?: Size;

package/dist/components/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,oBAAoB,EACpB,IAAI,EACJ,gBAAgB,EAChB,WAAW,EACZ,MAAM,SAAS,CAAC;AAIjB,OAAO,EACL,cAAc,EAEd,WAAW,EAKZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAc,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKtE,KAAK,OAAO,GAAG;IACb,IAAI,EAAE,IAAI,CAAC;IACX,eAAe,EAAE,gBAAgB,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;CAClB,GAAG,WAAW,CAAC;AAChB,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,GAAG,OAAO,CAAC,gBAAgB,CAAC,GAC3B,OAAO,CAAC,WAAW,CAAC,CAAC;AACvB,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,CAAC;AAClE,KAAK,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAC9C,KAAK,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAC5C,KAAK,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE9C,eAAO,MAAM,YAAY,kCAMvB,CAAC;AAEH,iBAAS,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAC5C,EAAE,EACF,GAAG,EACH,IAAW,EACX,IAAY,EACZ,OAAkB,EAClB,OAAO,EACP,UAAU,EACV,SAAS,EACT,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAc,EACd,YAAoB,EACpB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,EAAE,UAAU,CAAC,2CAuErC;kBAxFQ,KAAK;;;;;;AAyFd,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAkCvE;AACD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAG7D;AACD,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CAGzD;AACD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAG7D;AAOD,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,oBAAoB,EACpB,IAAI,EACJ,gBAAgB,EAChB,WAAW,EACZ,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,cAAc,EAEd,WAAW,EAKZ,MAAM,OAAO,CAAC;AACf,OAAO,EAAc,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAKtE,KAAK,OAAO,GAAG;IACb,IAAI,EAAE,IAAI,CAAC;IACX,eAAe,EAAE,gBAAgB,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,YAAY,CAAC;CACvB,GAAG,WAAW,CAAC;AAChB,KAAK,UAAU,GAAG;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,GAAG,OAAO,CAAC,gBAAgB,CAAC,GAC3B,OAAO,CAAC,WAAW,CAAC,CAAC;AACvB,KAAK,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,CAAC;AAClE,KAAK,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAC9C,KAAK,cAAc,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAC5C,KAAK,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE9C,eAAO,MAAM,YAAY,kCAQvB,CAAC;AAEH,iBAAS,KAAK,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAC5C,EAAE,EACF,GAAG,EACH,IAAW,EACX,IAAY,EACZ,OAAkB,EAClB,OAAO,EACP,UAAU,EACV,SAAS,EACT,MAAM,EACN,SAAS,EACT,QAAQ,EACR,QAAc,EACd,YAAoB,EACpB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,EAAE,UAAU,CAAC,2CAoErC;kBArFQ,KAAK;;;;;;AAsFd,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAmCvE;AACD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAS7D;AACD,iBAAS,SAAS,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,2CASzD;AACD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAS7D;AAOD,eAAe,KAAK,CAAC"}

package/dist/components/Modal/index.es.js

@@ -1,101 +1,103 @@
 "use client";
-import { jsx as a, jsxs as D } from "react/jsx-runtime";
-import m from "../../helpers/cn.es.js";
-import s from "../../hooks/useClasses.es.js";
-import { createContext as S, useRef as F, useImperativeHandle as R, useContext as j, useMemo as E } from "react";
-import { useHotkey as I } from "../../node_modules/@tanstack/react-hotkeys/dist/useHotkey.es.js";
+import { jsx as n, jsxs as S } from "react/jsx-runtime";
+import { createContext as B, useRef as F, useImperativeHandle as P, useContext as R, useMemo as j } from "react";
 import { twMerge as C } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
-import d from "../Card/index.es.js";
-import P from "../Portal/index.es.js";
-import $ from "../../node_modules/react-transition-group/esm/Transition.es.js";
-const M = S({
+import m from "../Card/index.es.js";
+import $ from "../Portal/index.es.js";
+import i from "../../hooks/useClasses.es.js";
+import E from "../../hooks/usePreventableClose.es.js";
+import I from "../../node_modules/react-transition-group/esm/Transition.es.js";
+import c from "../../helpers/cn.es.js";
+const M = B({
   size: "md",
   open: !1,
   onClose: () => {
   },
   transitionState: "unmounted",
-  duration: 300
+  duration: 300,
+  preventClose: !1,
+  dismiss: () => {
+  }
 });
 function u({
   as: t,
   ref: o,
-  size: n = "md",
+  size: a = "md",
   open: e = !1,
-  onClose: i = () => {
+  onClose: s = () => {
   },
   onEnter: f,
   onEntering: p,
   onEntered: x,
-  onExit: v,
+  onExit: b,
   onExiting: r,
   onExited: l,
-  duration: y = 300,
-  preventClose: b = !1,
+  duration: v = 300,
+  preventClose: y = !1,
   className: h,
-  children: w,
-  ...N
+  children: N,
+  ...w
 }) {
-  const H = s((c) => c.modal.base), g = F(null), k = t || "div", B = {
+  const k = i((d) => d.modal.base), g = F(null), D = t || "div", H = {
     entering: "active opacity-100 pointer-events-auto",
     entered: "active opacity-100 pointer-events-auto",
     exiting: "opacity-0 pointer-events-none",
     exited: "opacity-0 pointer-events-none",
     unmounted: ""
-  }, z = () => {
-    b || i();
-  };
-  return R(o, () => g.current), I("Escape", () => i(), {
-    conflictBehavior: "allow",
-    ignoreInputs: !0,
-    enabled: e && !b
-  }), /* @__PURE__ */ a(P, { children: /* @__PURE__ */ a(
-    $,
+  }, z = E({ preventClose: y, open: e, onClose: s });
+  return P(o, () => g.current), /* @__PURE__ */ n($, { children: /* @__PURE__ */ n(
+    I,
     {
       nodeRef: g,
       in: e,
-      timeout: y,
+      timeout: v,
       unmountOnExit: !0,
       onEnter: f,
       onEntering: p,
       onEntered: x,
-      onExit: v,
+      onExit: b,
       onExiting: r,
       onExited: l,
-      children: (c) => /* @__PURE__ */ D(
-        k,
+      children: (d) => /* @__PURE__ */ S(
+        D,
         {
           ref: g,
           "data-open": e,
-          style: { transitionDuration: `${y}ms` },
+          role: "dialog",
+          "data-name": "modal",
+          style: { transitionDuration: `${v}ms` },
           className: C(
             "modal fixed size-full inset-0 flex flex-col z-10 bg-black/20 transition-opacity backdrop-blur p-4",
-            H,
-            B[c],
+            k,
+            H[d],
             h
           ),
-          ...N,
+          ...w,
           children: [
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ n(
               "div",
               {
+                "data-name": "modal-backdrop",
                 onClick: z,
-                className: m(
+                className: c(
                   "absolute inset-0 cursor-default opacity-0",
-                  b && "[&:active~*]:scale-95"
+                  y && "[&:active~*]:scale-95"
                 )
               }
             ),
-            /* @__PURE__ */ a(
+            /* @__PURE__ */ n(
               M.Provider,
               {
                 value: {
-                  size: n,
+                  size: a,
                   open: e,
-                  onClose: z,
-                  transitionState: c,
-                  duration: y
+                  onClose: s,
+                  dismiss: z,
+                  transitionState: d,
+                  duration: v,
+                  preventClose: y
                 },
-                children: w
+                children: N
               }
             )
           ]
@@ -104,49 +106,71 @@ function u({
     }
   ) });
 }
-function O({ className: t, children: o, ...n }) {
-  const e = s((r) => r.modal.dialog), { size: i, transitionState: f, duration: p } = j(M), x = {
+function O({ className: t, children: o, ...a }) {
+  const e = i((r) => r.modal.dialog), { size: s, transitionState: f, duration: p } = R(M), x = {
     entering: "scale-100",
     entered: "scale-100",
     exiting: "scale-75",
     exited: "scale-75",
     unmounted: ""
-  }, v = E(() => {
+  }, b = j(() => {
     var l;
     return [{
       sm: "min-[576px]:w-[300px]",
       md: "min-[576px]:w-[500px]",
       lg: "min-[992px]:w-[800px]"
-    }[i], (l = e == null ? void 0 : e.size) == null ? void 0 : l[i]];
-  }, [i, e == null ? void 0 : e.size]);
-  return /* @__PURE__ */ a(
-    d,
+    }[s], (l = e == null ? void 0 : e.size) == null ? void 0 : l[s]];
+  }, [s, e == null ? void 0 : e.size]);
+  return /* @__PURE__ */ n(
+    m,
     {
       as: "div",
+      "data-name": "modal-dialog",
       style: { transitionDuration: `${p}ms` },
       className: C(
         "max-w-full max-h-full m-auto transition-transform",
         e == null ? void 0 : e.base,
-        v,
+        b,
         x[f],
         t
       ),
-      ...n,
+      ...a,
       children: o
     }
   );
 }
 function T({ className: t, ...o }) {
-  const n = s((e) => e.modal.header.base);
-  return /* @__PURE__ */ a(d.Header, { className: m(n, t), ...o });
+  const a = i((e) => e.modal.header.base);
+  return /* @__PURE__ */ n(
+    m.Header,
+    {
+      "data-name": "modal-header",
+      className: c(a, t),
+      ...o
+    }
+  );
 }
 function q({ className: t, ...o }) {
-  const n = s((e) => e.modal.body.base);
-  return /* @__PURE__ */ a(d.Body, { className: m(n, t), ...o });
+  const a = i((e) => e.modal.body.base);
+  return /* @__PURE__ */ n(
+    m.Body,
+    {
+      "data-name": "modal-body",
+      className: c(a, t),
+      ...o
+    }
+  );
 }
 function A({ className: t, ...o }) {
-  const n = s((e) => e.modal.footer.base);
-  return /* @__PURE__ */ a(d.Footer, { className: m(n, t), ...o });
+  const a = i((e) => e.modal.footer.base);
+  return /* @__PURE__ */ n(
+    m.Footer,
+    {
+      "data-name": "modal-footer",
+      className: c(a, t),
+      ...o
+    }
+  );
 }
 u.Dialog = O;
 u.Header = T;

package/dist/components/Portal/index.cjs.js

@@ -1 +1 @@
-"use client";"use strict";const t=require("../../stores/portalElement.cjs.js"),n=require("react"),c=require("react-dom");function s({children:r}){const e=n.useSyncExternalStore(t.subscribe,t.getElement);return e?c.createPortal(r,e):null}module.exports=s;
+"use client";"use strict";const n=require("react"),c=require("react-dom"),t=require("../../stores/portalElement.cjs.js");function o({children:r}){const e=n.useSyncExternalStore(t.subscribe,t.getElement,void 0);return e?c.createPortal(r,e):null}module.exports=o;