reaxify 0.0.98 → 1.3.0

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

@@ -0,0 +1,169 @@
+"use client";
+import { jsx as u } from "react/jsx-runtime";
+import { useHotkey as I } from "../../node_modules/@tanstack/react-hotkeys/dist/useHotkey.es.js";
+import { createContext as H, useContext as j, useRef as E, useCallback as P } from "react";
+import { twMerge as f } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
+import p from "../../hooks/useClasses.es.js";
+import { asComponent as v } from "../../helpers/createPolymorphicComponent.es.js";
+const N = H({
+  hover: !1,
+  disabled: !1
+});
+function x({
+  as: s,
+  divided: i = !1,
+  hover: a = !1,
+  disabled: o = !1,
+  className: r,
+  children: l,
+  ...c
+}) {
+  const t = p((e) => {
+    var d;
+    return (d = e.list) == null ? void 0 : d.base;
+  }), n = v(s, "ul");
+  return /* @__PURE__ */ u(
+    n,
+    {
+      "data-name": "list",
+      className: f(
+        "w-full list-none p-0 m-0",
+        i && "divide-y divide-border",
+        t,
+        r
+      ),
+      ...c,
+      children: /* @__PURE__ */ u(N.Provider, { value: { hover: a, disabled: o }, children: l })
+    }
+  );
+}
+function R({
+  as: s,
+  hover: i,
+  active: a = !1,
+  disabled: o,
+  className: r,
+  children: l,
+  tabIndex: c,
+  onClick: t,
+  ...n
+}) {
+  const e = p((g) => {
+    var L;
+    return (L = g.list) == null ? void 0 : L.item;
+  }), { hover: d, disabled: D } = j(N), h = E(null), m = o ?? D, b = (i ?? d) && !m, y = a && !m, C = b && !!t, w = P(
+    (g) => {
+      m || !t || t(g);
+    },
+    [m, t]
+  );
+  I("Enter", w, {
+    target: h,
+    enabled: C,
+    preventDefault: !0
+  }), I("Space", w, {
+    target: h,
+    enabled: C,
+    preventDefault: !0
+  });
+  const A = v(s, "li");
+  return /* @__PURE__ */ u(
+    A,
+    {
+      ref: h,
+      "data-name": "list-item",
+      tabIndex: c ?? (b ? 0 : void 0),
+      "aria-disabled": m || void 0,
+      "aria-current": y ? "true" : void 0,
+      className: f(
+        "flex items-center gap-3 px-4 py-3 min-w-0 w-full",
+        b && "cursor-pointer transition-colors hover:bg-dark/5 [user-select:none]",
+        b && (e == null ? void 0 : e.hover),
+        y && "bg-primary/10 text-primary",
+        y && (e == null ? void 0 : e.active),
+        m && "opacity-75 cursor-not-allowed pointer-events-none select-none",
+        m && (e == null ? void 0 : e.disabled),
+        e == null ? void 0 : e.base,
+        r
+      ),
+      onClick: m ? void 0 : t,
+      ...n,
+      children: l
+    }
+  );
+}
+function k({
+  as: s,
+  className: i,
+  children: a,
+  ...o
+}) {
+  const r = p((c) => {
+    var t, n;
+    return (n = (t = c.list) == null ? void 0 : t.icon) == null ? void 0 : n.base;
+  }), l = v(s, "div");
+  return /* @__PURE__ */ u(
+    l,
+    {
+      "data-name": "list-icon",
+      className: f(
+        "shrink-0 flex items-center justify-center [&_svg]:size-5.5",
+        r,
+        i
+      ),
+      ...o,
+      children: a
+    }
+  );
+}
+function z({
+  as: s,
+  className: i,
+  children: a,
+  ...o
+}) {
+  const r = p((c) => {
+    var t, n;
+    return (n = (t = c.list) == null ? void 0 : t.content) == null ? void 0 : n.base;
+  }), l = v(s, "div");
+  return /* @__PURE__ */ u(
+    l,
+    {
+      "data-name": "list-content",
+      className: f("flex-1 min-w-0 space-y-px", r, i),
+      ...o,
+      children: a
+    }
+  );
+}
+function M({
+  as: s,
+  className: i,
+  children: a,
+  onClick: o,
+  ...r
+}) {
+  const l = p((n) => {
+    var e, d;
+    return (d = (e = n.list) == null ? void 0 : e.action) == null ? void 0 : d.base;
+  }), c = (n) => {
+    n.stopPropagation(), o == null || o(n);
+  }, t = v(s, "div");
+  return /* @__PURE__ */ u(
+    t,
+    {
+      "data-name": "list-action",
+      className: f("shrink-0 self-center", l, i),
+      onClick: c,
+      ...r,
+      children: a
+    }
+  );
+}
+x.Item = R;
+x.Icon = k;
+x.Content = z;
+x.Action = M;
+export {
+  x as default
+};

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"),X=require("../../helpers/createPolymorphicComponent.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:P,onExit:p,onExiting:j,onExited:q,closeOnClick:x=!1,preventClose:z=!1,anchorEl:g=null,anchorPointer:k=!1,className:S,children:H,...$}){const B=W(e=>e.menu.base),s=16,r=n.useRef(null),D=n.useRef({left:s,right:s,top:s}),A={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=>{D.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(k){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,k,O,E]),F=Q({preventClose:z,open:t,onClose:o});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);const T=X.asComponent(l,"ul");return i.jsx(J,{children:i.jsx(U.default,{nodeRef:r,in:t,timeout:u,unmountOnExit:!0,onEnter:b,onEntering:M,onEntered:P,onExit:p,onExiting:j,onExited:q,children:e=>i.jsx(y.Provider,{value:{open:t,onClose:o,dismiss:F,transitionState:e,closeOnClick:x,preventClose:z,anchorPointer:k},children:i.jsxs(Y,{children:[i.jsx(Z,{}),i.jsx(T,{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,A[e],S),...$,children:H})]})})})})}function Y({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 Z(){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 _({as:l,closeOnClick:c,className:t,children:u,onClick:o,...b}){const M=W(x=>x.menu.item.base),{closeOnClick:P,onClose:p}=n.useContext(y),j=c??P,q=x=>{j&&(p==null||p()),o==null||o(x)};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:q,...b,children:u})}I.Item=_;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,41 +1,47 @@
 "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";
+import { asComponent as et } from "../../helpers/createPolymorphicComponent.es.js";
+const y = U({
   open: !1,
   onClose: () => {
   },
   transitionState: "unmounted",
   closeOnClick: !1,
-  preventClose: !1
+  preventClose: !1,
+  dismiss: () => {
+  },
+  anchorPointer: !1
 });
-function _({
-  as: s,
+function nt({
+  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), n = 16, i = E(null), T = E({
     left: n,
     right: n,
     top: n
@@ -45,77 +51,84 @@ function _({
     exiting: "scale-90 opacity-0",
     exited: "scale-90 opacity-0",
     unmounted: ""
-  }, E = H((t) => {
+  }, W = 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(() => {
+  }, []), $ = 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, $]), G = Z({ preventClose: L, open: e, onClose: o });
+  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);
+  const J = et(a, "ul");
+  return /* @__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: G,
             transitionState: t,
-            closeOnClick: u,
-            preventClose: M
+            closeOnClick: p,
+            preventClose: L,
+            anchorPointer: z
           },
-          children: /* @__PURE__ */ J(tt, { children: [
-            /* @__PURE__ */ r(et, {}),
+          children: /* @__PURE__ */ K(ot, { children: [
+            /* @__PURE__ */ r(it, {}),
             /* @__PURE__ */ r(
-              F,
+              J,
               {
                 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,
+                  F,
                   q[t],
-                  j
+                  D
                 ),
-                ...S,
-                children: R
+                ...A,
+                children: N
               }
             )
           ] })
@@ -124,12 +137,13 @@ function _({
     }
   ) });
 }
-function tt({ children: s }) {
-  const { transitionState: l } = z(w);
+function ot({ 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 +153,58 @@ function tt({ children: s }) {
           unmounted: ""
         }[l]
       ),
-      children: s
+      children: a
     }
   );
 }
-function et() {
-  const { onClose: s, preventClose: l } = z(w);
+function it() {
+  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 st({
+  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;
+nt.Item = st;
 export {
-  _ as default
+  nt 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 s=require("react/jsx-runtime"),l=require("react"),q=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),x=require("../Card/index.cjs.js"),k=require("../Portal/index.cjs.js"),d=require("../../hooks/useClasses.cjs.js"),D=require("../../hooks/usePreventableClose.cjs.js"),H=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),f=require("../../helpers/cn.cjs.js"),P=require("../../helpers/createPolymorphicComponent.cjs.js"),j=l.createContext({size:"md",open:!1,onClose:()=>{},transitionState:"unmounted",duration:300,preventClose:!1,dismiss:()=>{}});function c({as:n,ref:o,size:a="md",open:t=!1,onClose:e=()=>{},onEnter:r,onEntering:p,onEntered:b,onExit:g,onExiting:v,onExited:u,duration:i=300,preventClose:y=!1,className:z,children:h,...w}){const N=d(m=>m.modal.base),M=l.useRef(null),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:""},C=D({preventClose:y,open:t,onClose:e});l.useImperativeHandle(o,()=>M.current);const R=P.asComponent(n,"div");return s.jsx(k,{children:s.jsx(H.default,{nodeRef:M,in:t,timeout:i,unmountOnExit:!0,onEnter:r,onEntering:p,onEntered:b,onExit:g,onExiting:v,onExited:u,children:m=>s.jsxs(R,{ref:M,"data-open":t,role:"dialog","data-name":"modal",style:{transitionDuration:`${i}ms`},className:q.twMerge("modal fixed size-full inset-0 flex flex-col z-10 bg-black/20 transition-opacity backdrop-blur p-4",N,S[m],z),...w,children:[s.jsx("div",{"data-name":"modal-backdrop",onClick:C,className:f("absolute inset-0 cursor-default opacity-0",y&&"[&:active~*]:scale-95")}),s.jsx(j.Provider,{value:{size:a,open:t,onClose:e,dismiss:C,transitionState:m,duration:i,preventClose:y},children:h})]})})})}function B({as:n,className:o,children:a,...t}){const e=d(u=>u.modal.dialog),{size:r,transitionState:p,duration:b}=l.useContext(j),g={entering:"scale-100",entered:"scale-100",exiting:"scale-75",exited:"scale-75",unmounted:""},v=l.useMemo(()=>{var i;return[{sm:"min-[576px]:w-[300px]",md:"min-[576px]:w-[500px]",lg:"min-[992px]:w-[800px]"}[r],(i=e==null?void 0:e.size)==null?void 0:i[r]]},[r,e==null?void 0:e.size]);return s.jsx(x,{as:n,"data-name":"modal-dialog",style:{transitionDuration:`${b}ms`},className:q.twMerge("max-w-full max-h-full m-auto transition-transform",e==null?void 0:e.base,v,g[p],o),...t,children:a})}function F({as:n,className:o,...a}){const t=d(e=>e.modal.header.base);return s.jsx(x.Header,{as:n,"data-name":"modal-header",className:f(t,o),...a})}function $({as:n,className:o,...a}){const t=d(e=>e.modal.body.base);return s.jsx(x.Body,{as:n,"data-name":"modal-body",className:f(t,o),...a})}function O({as:n,className:o,...a}){const t=d(e=>e.modal.footer.base);return s.jsx(x.Footer,{as:n,"data-name":"modal-footer",className:f(t,o),...a})}c.Dialog=B;c.Header=F;c.Body=$;c.Footer=O;exports.ModalContext=j;exports.default=c;

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

@@ -1,20 +1,18 @@
 import { ComponentPropsWithAs, Size, ToggleEventProps, ToggleProps } from '../../types';
-import { ComponentProps, ElementType } from 'react';
+import { ElementType } from 'react';
 import { TransitionStatus } from 'react-transition-group';
 type Context = {
     size: Size;
     transitionState: TransitionStatus;
     duration: number;
+    preventClose: boolean;
+    dismiss: VoidFunction;
 } & ToggleProps;
 type ModalProps = {
     size?: Size;
     duration?: number;
     preventClose?: boolean;
 } & Partial<ToggleEventProps> & Partial<ToggleProps>;
-type ModalDialogProps = Omit<ComponentProps<"div">, "as" | "ref">;
-type ModalHeaderProps = ComponentProps<"div">;
-type ModalBodyProps = ComponentProps<"div">;
-type ModalFooterProps = ComponentProps<"div">;
 export declare const ModalContext: import('react').Context<Context>;
 declare function Modal<E extends ElementType = "div">({ as, ref, size, open, onClose, onEnter, onEntering, onEntered, onExit, onExiting, onExited, duration, preventClose, className, children, ...props }: ComponentPropsWithAs<E, ModalProps>): import("react/jsx-runtime").JSX.Element;
 declare namespace Modal {
@@ -23,9 +21,9 @@ declare namespace Modal {
     var Body: typeof ModalBody;
     var Footer: typeof ModalFooter;
 }
-declare function ModalDialog({ className, children, ...props }: ModalDialogProps): import("react/jsx-runtime").JSX.Element;
-declare function ModalHeader({ className, ...props }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
-declare function ModalBody({ className, ...props }: ModalBodyProps): import("react/jsx-runtime").JSX.Element;
-declare function ModalFooter({ className, ...props }: ModalFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function ModalDialog<E extends ElementType = "div">({ as, className, children, ...props }: ComponentPropsWithAs<E>): import("react/jsx-runtime").JSX.Element;
+declare function ModalHeader<E extends ElementType = "div">({ as, className, ...props }: ComponentPropsWithAs<E>): import("react/jsx-runtime").JSX.Element;
+declare function ModalBody<E extends ElementType = "div">({ as, className, ...props }: ComponentPropsWithAs<E>): import("react/jsx-runtime").JSX.Element;
+declare function ModalFooter<E extends ElementType = "div">({ as, className, ...props }: ComponentPropsWithAs<E>): import("react/jsx-runtime").JSX.Element;
 export default Modal;
 //# sourceMappingURL=index.d.ts.map

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,EAGL,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;AAEvB,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,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAClD,EAAE,EACF,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAmCzB;AACD,iBAAS,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAClD,EAAE,EACF,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAUzB;AACD,iBAAS,SAAS,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAChD,EAAE,EACF,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAUzB;AACD,iBAAS,WAAW,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,EAAE,EAClD,EAAE,EACF,SAAS,EACT,GAAG,KAAK,EACT,EAAE,oBAAoB,CAAC,CAAC,CAAC,2CAUzB;AAOD,eAAe,KAAK,CAAC"}