reaxify 0.0.83 → 0.0.85

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

@@ -1 +1 @@
-"use client";"use strict";const w=require("react/jsx-runtime"),a=require("../../helpers/cn.cjs.js"),h=require("../../hooks/useClasses.cjs.js"),u=require("react"),k=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js");function q({as:x,variant:i="solid",color:n=null,size:s="md",className:c,children:l,...p}){const e=h(r=>r.badge),m=x||"span",f=u.useMemo(()=>{var t,b,g;if(!n)return"border-transparent";const r={primary:{solid:"bg-primary text-white border-primary",outline:"bg-transparent text-primary border-primary",soft:"bg-primary/10 text-primary border-primary/10"},secondary:{solid:"bg-secondary text-white border-secondary",outline:"bg-transparent text-secondary border-secondary",soft:"bg-secondary/10 text-secondary border-secondary/10"},success:{solid:"bg-success text-white border-success",outline:"bg-transparent text-success border-success",soft:"bg-success/10 text-success border-success/10"},info:{solid:"bg-info text-white border-info",outline:"bg-transparent text-info border-info",soft:"bg-info/10 text-info border-info/10"},warning:{solid:"bg-warning text-white border-warning",outline:"bg-transparent text-warning border-warning",soft:"bg-warning/10 text-warning border-warning/10"},danger:{solid:"bg-danger text-white border-danger",outline:"bg-transparent text-danger border-danger",soft:"bg-danger/10 text-danger border-danger/10"},dark:{solid:"bg-dark text-white border-dark",outline:"bg-transparent text-dark border-dark",soft:"bg-dark/10 text-dark border-dark/10"},light:{solid:"bg-light text-dark border-light",outline:"bg-transparent text-dark border-light",soft:"bg-light/10 text-dark border-light/10"}},o=(t=r==null?void 0:r[n])==null?void 0:t[i],d=(g=(b=e==null?void 0:e.color)==null?void 0:b[n])==null?void 0:g[i];return[o,d]},[n,i,e==null?void 0:e.color]),y=u.useMemo(()=>{var o,d,t;if(!s)return null;const r={sm:a("text-xs py-0.5 px-1.5",(o=e==null?void 0:e.size)==null?void 0:o.sm),md:a("text-sm py-[0.1875rem] px-2",(d=e==null?void 0:e.size)==null?void 0:d.md),lg:a("text-base py-1 px-3",(t=e==null?void 0:e.size)==null?void 0:t.lg)};return r==null?void 0:r[s]},[s,e==null?void 0:e.size]);return w.jsx(m,{className:k.twMerge("inline-flex border border-[#e8eaee] items-center text-center font-medium align-middle whitespace-nowrap rounded",e==null?void 0:e.base,f,y,c),...p,children:l})}module.exports=q;
+"use client";"use strict";const w=require("react/jsx-runtime"),a=require("../../helpers/cn.cjs.js"),h=require("../../hooks/useClasses.cjs.js"),u=require("react"),k=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js");function q({as:x,variant:i="solid",color:n="primary",size:s="md",className:c,children:p,...l}){const r=h(e=>e.badge),m=x||"span",f=u.useMemo(()=>{var t,b,g;if(!n)return"border-transparent";const e={primary:{solid:"bg-primary text-white border-primary",outline:"bg-transparent text-primary border-primary",soft:"bg-primary/10 text-primary border-primary/10"},secondary:{solid:"bg-secondary text-white border-secondary",outline:"bg-transparent text-secondary border-secondary",soft:"bg-secondary/10 text-secondary border-secondary/10"},success:{solid:"bg-success text-white border-success",outline:"bg-transparent text-success border-success",soft:"bg-success/10 text-success border-success/10"},info:{solid:"bg-info text-white border-info",outline:"bg-transparent text-info border-info",soft:"bg-info/10 text-info border-info/10"},warning:{solid:"bg-warning text-white border-warning",outline:"bg-transparent text-warning border-warning",soft:"bg-warning/10 text-warning border-warning/10"},danger:{solid:"bg-danger text-white border-danger",outline:"bg-transparent text-danger border-danger",soft:"bg-danger/10 text-danger border-danger/10"},dark:{solid:"bg-dark text-white border-dark",outline:"bg-transparent text-dark border-dark",soft:"bg-dark/10 text-dark border-dark/10"},light:{solid:"bg-light text-dark border-light",outline:"bg-transparent text-dark border-light",soft:"bg-light/10 text-dark border-light/10"}},o=(t=e==null?void 0:e[n])==null?void 0:t[i],d=(g=(b=r==null?void 0:r.color)==null?void 0:b[n])==null?void 0:g[i];return[o,d]},[n,i,r==null?void 0:r.color]),y=u.useMemo(()=>{var o,d,t;if(!s)return null;const e={sm:a("text-xs py-0.5 px-1.5",(o=r==null?void 0:r.size)==null?void 0:o.sm),md:a("text-sm py-[0.1875rem] px-2",(d=r==null?void 0:r.size)==null?void 0:d.md),lg:a("text-base py-1 px-3",(t=r==null?void 0:r.size)==null?void 0:t.lg)};return e==null?void 0:e[s]},[s,r==null?void 0:r.size]);return w.jsx(m,{className:k.twMerge("inline-flex border border-[#e8eaee] items-center text-center font-medium align-middle whitespace-nowrap rounded",r==null?void 0:r.base,f,y,c),...l,children:p})}module.exports=q;

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

@@ -7,15 +7,15 @@ import { twMerge as k } from "../../node_modules/tailwind-merge/dist/bundle-mjs.
 function B({
   as: p,
   variant: i = "solid",
-  color: n = null,
+  color: o = "primary",
   size: a = "md",
   className: m,
   children: u,
-  ...l
+  ...c
 }) {
-  const r = h((e) => e.badge), c = p || "span", f = x(() => {
+  const r = h((e) => e.badge), f = p || "span", l = x(() => {
     var t, b, g;
-    if (!n) return "border-transparent";
+    if (!o) return "border-transparent";
     const e = {
       primary: {
         solid: "bg-primary text-white border-primary",
@@ -57,29 +57,29 @@ function B({
         outline: "bg-transparent text-dark border-light",
         soft: "bg-light/10 text-dark border-light/10"
       }
-    }, o = (t = e == null ? void 0 : e[n]) == null ? void 0 : t[i], d = (g = (b = r == null ? void 0 : r.color) == null ? void 0 : b[n]) == null ? void 0 : g[i];
-    return [o, d];
-  }, [n, i, r == null ? void 0 : r.color]), y = x(() => {
-    var o, d, t;
+    }, n = (t = e == null ? void 0 : e[o]) == null ? void 0 : t[i], d = (g = (b = r == null ? void 0 : r.color) == null ? void 0 : b[o]) == null ? void 0 : g[i];
+    return [n, d];
+  }, [o, i, r == null ? void 0 : r.color]), y = x(() => {
+    var n, d, t;
     if (!a) return null;
     const e = {
-      sm: s("text-xs py-0.5 px-1.5", (o = r == null ? void 0 : r.size) == null ? void 0 : o.sm),
+      sm: s("text-xs py-0.5 px-1.5", (n = r == null ? void 0 : r.size) == null ? void 0 : n.sm),
       md: s("text-sm py-[0.1875rem] px-2", (d = r == null ? void 0 : r.size) == null ? void 0 : d.md),
       lg: s("text-base py-1 px-3", (t = r == null ? void 0 : r.size) == null ? void 0 : t.lg)
     };
     return e == null ? void 0 : e[a];
   }, [a, r == null ? void 0 : r.size]);
   return /* @__PURE__ */ w(
-    c,
+    f,
     {
       className: k(
         "inline-flex border border-[#e8eaee] items-center text-center font-medium align-middle whitespace-nowrap rounded",
         r == null ? void 0 : r.base,
-        f,
+        l,
         y,
         m
       ),
-      ...l,
+      ...c,
       children: u
     }
   );

package/dist/components/Drawer/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"),d=require("../../hooks/useClasses.cjs.js"),i=require("react"),q=require("../../hooks/useKeyDown.cjs.js"),g=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),b=require("../../helpers/cn.cjs.js"),f=require("../Card/index.cjs.js"),R=require("../Portal/index.cjs.js"),C=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),p=i.createContext({open:!1,onClose:()=>{},duration:300,anchor:"start",transitionState:"unmounted"});function x({as:n,ref:a,open:r=!1,onClose:e=()=>{},duration:o=300,anchor:u="end",className:w="",children:y,...v}){const t=d(l=>l.drawer),c=i.useRef(null),m=n||"div",j={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:""},D=i.useMemo(()=>{var h;const l={start:"flex-row-reverse",end:"flex-row",top:"flex-col-reverse",bottom:"flex-col"},M=(h=t==null?void 0:t.anchor)==null?void 0:h[u];return[l[u],M]},[u,t==null?void 0:t.anchor]);return i.useImperativeHandle(a,()=>c.current),q(()=>{e==null||e()},{skip:!r,targetKey:"Escape"}),s.jsx(R,{children:s.jsx(C.default,{nodeRef:c,in:r,timeout:o,unmountOnExit:!0,children:l=>s.jsxs(m,{ref:c,style:{transitionDuration:`${o}ms`},"data-open":r,className:g.twMerge("fixed size-full inset-0 flex z-10 bg-black/20 backdrop-blur transition-opacity [--drawer-ratio:1] rtl:[--drawer-ratio:-1]",t==null?void 0:t.base,j[l],D,w),...v,children:[s.jsx("button",{type:"button",onClick:()=>e(),className:"absolute inset-0 size-full cursor-default opacity-0"}),s.jsx(p.Provider,{value:{open:r,onClose:e,transitionState:l,duration:o,anchor:u},children:y})]})})})}function N({children:n,className:a="",...r}){const e=d(t=>t.drawer.menu),{anchor:o,duration:u,transitionState:w}=i.useContext(p),y=i.useMemo(()=>{var m;const t={start:"w-[31.875rem] h-full max-w-[92.5%] rounded-e me-auto",end:"w-[31.875rem] h-full max-w-[92.5%] rounded-s ms-auto",top:"w-full h-[31.875rem] max-h-[92.5%] rounded-b mb-auto",bottom:"w-full h-[31.875rem] max-h-[92.5%] rounded-t mt-auto"},c=(m=e==null?void 0:e.anchor)==null?void 0:m[o];return[t[o],c]},[o,e==null?void 0:e.anchor]),v=i.useMemo(()=>({start:{entering:"translate-x-0",entered:"translate-x-0",exiting:"-translate-x-[calc(100%*var(--drawer-ratio))]",exited:"-translate-x-[calc(100%*var(--drawer-ratio))]",unmounted:""},end:{entering:"translate-x-0",entered:"translate-x-0",exiting:"translate-x-[calc(100%*var(--drawer-ratio))]",exited:"translate-x-[calc(100%*var(--drawer-ratio))]",unmounted:""},top:{entering:"translate-y-0",entered:"translate-y-0",exiting:"-translate-y-full",exited:"-translate-y-full",unmounted:""},bottom:{entering:"translate-y-0",entered:"translate-y-0",exiting:"translate-y-full",exited:"translate-y-full",unmounted:""}})[o],[o]);return s.jsx(f,{as:"div",style:{transitionDuration:`${u}ms`},className:g.twMerge("relative flex flex-col transition-[translate,width] rounded-none",e==null?void 0:e.base,v[w],y,a),...r,children:n})}function S({className:n,...a}){const r=d(e=>e.drawer.header.base);return s.jsx(f.Header,{className:b(r,n),...a})}function k({className:n,...a}){const r=d(e=>e.drawer.body.base);return s.jsx(f.Body,{className:b("flex-1 overflow-auto",r,n),...a})}function H({className:n,...a}){const r=d(e=>e.drawer.footer.base);return s.jsx(f.Footer,{className:b(r,n),...a})}x.Menu=N;x.Header=S;x.Body=k;x.Footer=H;exports.DrawerContext=p;exports.default=x;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),d=require("../../hooks/useClasses.cjs.js"),u=require("react"),q=require("../../node_modules/@tanstack/react-hotkeys/dist/useHotkey.cjs.js"),g=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),v=require("../../helpers/cn.cjs.js"),f=require("../Card/index.cjs.js"),D=require("../Portal/index.cjs.js"),R=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),p=u.createContext({open:!1,onClose:()=>{},duration:300,anchor:"start",transitionState:"unmounted"});function x({as:n,ref:a,open:r=!1,onClose:e=()=>{},duration:o=300,anchor:i="end",className:w="",children:y,...b}){const t=d(l=>l.drawer),c=u.useRef(null),m=n||"div",j={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=u.useMemo(()=>{var h;const l={start:"flex-row-reverse",end:"flex-row",top:"flex-col-reverse",bottom:"flex-col"},M=(h=t==null?void 0:t.anchor)==null?void 0:h[i];return[l[i],M]},[i,t==null?void 0:t.anchor]);return u.useImperativeHandle(a,()=>c.current),q.useHotkey("Escape",()=>e(),{enabled:r}),s.jsx(D,{children:s.jsx(R.default,{nodeRef:c,in:r,timeout:o,unmountOnExit:!0,children:l=>s.jsxs(m,{ref:c,style:{transitionDuration:`${o}ms`},"data-open":r,className:g.twMerge("fixed size-full inset-0 flex z-10 bg-black/20 backdrop-blur transition-opacity [--drawer-ratio:1] rtl:[--drawer-ratio:-1]",t==null?void 0:t.base,j[l],C,w),...b,children:[s.jsx("button",{type:"button",onClick:()=>e(),className:"absolute inset-0 size-full cursor-default opacity-0"}),s.jsx(p.Provider,{value:{open:r,onClose:e,transitionState:l,duration:o,anchor:i},children:y})]})})})}function H({children:n,className:a="",...r}){const e=d(t=>t.drawer.menu),{anchor:o,duration:i,transitionState:w}=u.useContext(p),y=u.useMemo(()=>{var m;const t={start:"w-[31.875rem] h-full max-w-[92.5%] rounded-e me-auto",end:"w-[31.875rem] h-full max-w-[92.5%] rounded-s ms-auto",top:"w-full max-h-[92.5%] rounded-b mb-auto",bottom:"w-full max-h-[92.5%] rounded-t mt-auto"},c=(m=e==null?void 0:e.anchor)==null?void 0:m[o];return[t[o],c]},[o,e==null?void 0:e.anchor]),b=u.useMemo(()=>({start:{entering:"translate-x-0",entered:"translate-x-0",exiting:"-translate-x-[calc(100%*var(--drawer-ratio))]",exited:"-translate-x-[calc(100%*var(--drawer-ratio))]",unmounted:""},end:{entering:"translate-x-0",entered:"translate-x-0",exiting:"translate-x-[calc(100%*var(--drawer-ratio))]",exited:"translate-x-[calc(100%*var(--drawer-ratio))]",unmounted:""},top:{entering:"translate-y-0",entered:"translate-y-0",exiting:"-translate-y-full",exited:"-translate-y-full",unmounted:""},bottom:{entering:"translate-y-0",entered:"translate-y-0",exiting:"translate-y-full",exited:"translate-y-full",unmounted:""}})[o],[o]);return s.jsx(f,{as:"div",style:{transitionDuration:`${i}ms`},className:g.twMerge("relative flex flex-col transition-[translate,width] rounded-none",e==null?void 0:e.base,b[w],y,a),...r,children:n})}function N({className:n,...a}){const r=d(e=>e.drawer.header.base);return s.jsx(f.Header,{className:v(r,n),...a})}function k({className:n,...a}){const r=d(e=>e.drawer.body.base);return s.jsx(f.Body,{className:v("flex-1 overflow-auto",r,n),...a})}function S({className:n,...a}){const r=d(e=>e.drawer.footer.base);return s.jsx(f.Footer,{className:v(r,n),...a})}x.Menu=H;x.Header=N;x.Body=k;x.Footer=S;exports.DrawerContext=p;exports.default=x;

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

@@ -3,16 +3,14 @@ import { ComponentProps, ElementType } from 'react';
 import { TransitionStatus } from 'react-transition-group';
 type Anchor = "start" | "end" | "top" | "bottom";
 type Context = {
-    open: boolean;
-    onClose: VoidFunction;
     duration: number;
     anchor: Anchor;
     transitionState: TransitionStatus;
-};
+} & ToggleProps;
 type DrawerBaseProps = {
     anchor?: Anchor;
     duration?: number;
-} & ToggleProps;
+} & Partial<ToggleProps>;
 type DrawerProps<E extends ElementType> = ComponentPropsWithAs<E, DrawerBaseProps>;
 type DrawerMenuProps = Omit<ComponentProps<"div">, "as" | "ref">;
 type DrawerHeaderProps = ComponentProps<"div">;

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

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as s, jsxs as N } from "react/jsx-runtime";
 import d from "../../hooks/useClasses.es.js";
-import { createContext as k, useRef as H, useMemo as y, useImperativeHandle as M, useContext as z } from "react";
-import B from "../../hooks/useKeyDown.es.js";
+import { createContext as H, useRef as k, useMemo as y, useImperativeHandle as M, useContext as z } from "react";
+import { useHotkey as B } from "../../node_modules/@tanstack/react-hotkeys/dist/useHotkey.es.js";
 import { twMerge as h } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
 import v from "../../helpers/cn.es.js";
 import m from "../Card/index.es.js";
 import F from "../Portal/index.es.js";
 import S from "../../node_modules/react-transition-group/esm/Transition.es.js";
-const g = k({
+const g = H({
   open: !1,
   onClose: () => {
   },
@@ -28,28 +28,23 @@ function f({
   children: w,
   ...p
 }) {
-  const e = d((l) => l.drawer), u = H(null), c = n || "div", D = {
+  const e = d((l) => l.drawer), u = k(null), c = n || "div", C = {
     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: ""
-  }, R = y(() => {
+  }, D = y(() => {
     var b;
     const l = {
       start: "flex-row-reverse",
       end: "flex-row",
       top: "flex-col-reverse",
       bottom: "flex-col"
-    }, C = (b = e == null ? void 0 : e.anchor) == null ? void 0 : b[i];
-    return [l[i], C];
+    }, R = (b = e == null ? void 0 : e.anchor) == null ? void 0 : b[i];
+    return [l[i], R];
   }, [i, e == null ? void 0 : e.anchor]);
-  return M(a, () => u.current), B(
-    () => {
-      t == null || t();
-    },
-    { skip: !r, targetKey: "Escape" }
-  ), /* @__PURE__ */ s(F, { children: /* @__PURE__ */ s(S, { nodeRef: u, in: r, timeout: o, unmountOnExit: !0, children: (l) => /* @__PURE__ */ N(
+  return M(a, () => u.current), B("Escape", () => t(), { enabled: r }), /* @__PURE__ */ s(F, { children: /* @__PURE__ */ s(S, { nodeRef: u, in: r, timeout: o, unmountOnExit: !0, children: (l) => /* @__PURE__ */ N(
     c,
     {
       ref: u,
@@ -58,8 +53,8 @@ function f({
       className: h(
         "fixed size-full inset-0 flex z-10 bg-black/20 backdrop-blur transition-opacity [--drawer-ratio:1] rtl:[--drawer-ratio:-1]",
         e == null ? void 0 : e.base,
-        D[l],
-        R,
+        C[l],
+        D,
         x
       ),
       ...p,
@@ -95,8 +90,8 @@ function j({ children: n, className: a = "", ...r }) {
     const e = {
       start: "w-[31.875rem] h-full max-w-[92.5%] rounded-e me-auto",
       end: "w-[31.875rem] h-full max-w-[92.5%] rounded-s ms-auto",
-      top: "w-full h-[31.875rem] max-h-[92.5%] rounded-b mb-auto",
-      bottom: "w-full h-[31.875rem] max-h-[92.5%] rounded-t mt-auto"
+      top: "w-full max-h-[92.5%] rounded-b mb-auto",
+      bottom: "w-full max-h-[92.5%] rounded-t mt-auto"
     }, u = (c = t == null ? void 0 : t.anchor) == null ? void 0 : c[o];
     return [e[o], u];
   }, [o, t == null ? void 0 : t.anchor]), p = y(() => ({
@@ -150,7 +145,7 @@ function E({ className: n, ...a }) {
   const r = d((t) => t.drawer.header.base);
   return /* @__PURE__ */ s(m.Header, { className: v(r, n), ...a });
 }
-function K({ className: n, ...a }) {
+function P({ className: n, ...a }) {
   const r = d((t) => t.drawer.body.base);
   return /* @__PURE__ */ s(
     m.Body,
@@ -160,14 +155,14 @@ function K({ className: n, ...a }) {
     }
   );
 }
-function P({ className: n, ...a }) {
+function $({ className: n, ...a }) {
   const r = d((t) => t.drawer.footer.base);
   return /* @__PURE__ */ s(m.Footer, { className: v(r, n), ...a });
 }
 f.Menu = j;
 f.Header = E;
-f.Body = K;
-f.Footer = P;
+f.Body = P;
+f.Footer = $;
 export {
   g as DrawerContext,
   f as default

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

@@ -1 +1 @@
-"use client";"use strict";const r=require("react/jsx-runtime"),E=require("../../hooks/useClasses.cjs.js"),t=require("react"),N=require("../../hooks/useKeyDown.cjs.js"),k=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),W=require("../Portal/index.cjs.js"),I=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),w=t.createContext({open:!1,onClose:()=>{},transitionState:"unmounted",closeOnClick:!1});function H({as:o,ref:u,open:s,onClose:a,closeOnClick:y=!1,anchorEl:c=null,className:b,children:x,...C}){const M=E(e=>e.menu.base),d=o||"div",n=16,i=t.useRef(null),f=t.useRef({left:n,right:n,top:n}),O={entering:"scale-100 opacity-100",entered:"scale-100 opacity-100",exiting:"scale-90 opacity-0",exited:"scale-90 opacity-0",unmounted:""},R=t.useCallback(e=>{f.current=e},[]),q=t.useCallback(e=>{var l,h,p;(l=i.current)==null||l.style.setProperty("--left",`${e.left}px`),(h=i.current)==null||h.style.setProperty("--right",`${e.right}px`),(p=i.current)==null||p.style.setProperty("--top",`${e.top}px`)},[]),m=t.useCallback(()=>{var P,z;if(!s||!c)return;const e=c.getBoundingClientRect(),l=window.innerWidth,h=window.innerHeight,p=((P=i.current)==null?void 0:P.offsetWidth)||150,L=((z=i.current)==null?void 0:z.offsetHeight)||200;let g=e.left,j=e.right,v=e.bottom;g=Math.min(Math.max(g,n),l-p-n),j=Math.min(Math.max(l-e.right,n),l-p-n),v=Math.min(Math.max(v,n),h-L-n),R({left:g,right:j,top:v}),q({left:g,right:j,top:v})},[s,c,R,q]);return t.useEffect(()=>{m()},[m,x]),t.useEffect(()=>{const e=()=>{m()};return window.addEventListener("scroll",e),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e),window.removeEventListener("resize",e)}},[m]),t.useImperativeHandle(u,()=>i.current),N(()=>{a==null||a()},{skip:!s,targetKey:"Escape"}),r.jsx(W,{children:r.jsx(I.default,{nodeRef:i,in:s,timeout:300,unmountOnExit:!0,children:e=>r.jsx(w.Provider,{value:{open:s,onClose:a,transitionState:e,closeOnClick:y},children:r.jsxs(S,{children:[r.jsx($,{}),r.jsx(d,{ref:i,"data-open":s,className:k.twMerge("w-fit min-w-[12.5rem] bg-white shadow rounded p-2 transition-[scale,opacity] absolute top-[var(--top)] left-[var(--left)] right-auto origin-top-left rtl:left-auto rtl:right-[var(--right)] rtl:origin-top-right",M,O[e],b),...C,children:x})]})})})})}function S({children:o}){const{transitionState:u}=t.useContext(w),s={entering:"active pointer-events-auto",entered:"active pointer-events-auto",exiting:"pointer-events-none",exited:"pointer-events-none",unmounted:""};return r.jsx("div",{className:k.twMerge("fixed inset-0 size-full flex flex-col bg-transparent transition-opacity overflow-hidden z-10",s[u]),children:o})}function $(){const{onClose:o}=t.useContext(w);return r.jsx("button",{type:"button",className:"w-full flex-1 opacity-0 cursor-default lg:absolute lg:size-full lg:inset-0",onClick:o})}function B({as:o,closeOnClick:u,type:s="button",className:a,children:y,onClick:c,...b}){const x=o||"div",C=E(f=>f.menu.item.base),{closeOnClick:M,onClose:d}=t.useContext(w),n=u??M,i=f=>{n&&(d==null||d()),c==null||c(f)};return r.jsx(x,{type:s,className:k.twMerge("flex items-center px-3 py-2 w-full text-dark text-base font-normal rounded transition-colors hover:bg-dark hover:text-white",C,a),onClick:i,...b,children:y})}H.Item=B;module.exports=H;
+"use client";"use strict";const i=require("react/jsx-runtime"),z=require("../../hooks/useClasses.cjs.js"),t=require("react"),N=require("../../node_modules/@tanstack/react-hotkeys/dist/useHotkey.cjs.js"),j=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),W=require("../Portal/index.cjs.js"),I=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),b=t.createContext({open:!1,onClose:()=>{},transitionState:"unmounted",closeOnClick:!1});function E({as:o,ref:l,open:s,onClose:c,closeOnClick:u=!1,anchorEl:d=null,className:m,children:h,...C}){const M=z(e=>e.menu.base),f=o||"div",n=16,r=t.useRef(null),p=t.useRef({left:n,right:n,top:n}),O={entering:"scale-100 opacity-100",entered:"scale-100 opacity-100",exiting:"scale-90 opacity-0",exited:"scale-90 opacity-0",unmounted:""},R=t.useCallback(e=>{p.current=e},[]),H=t.useCallback(e=>{var a,v,x;(a=r.current)==null||a.style.setProperty("--left",`${e.left}px`),(v=r.current)==null||v.style.setProperty("--right",`${e.right}px`),(x=r.current)==null||x.style.setProperty("--top",`${e.top}px`)},[]),g=t.useCallback(()=>{var q,P;if(!s||!d)return;const e=d.getBoundingClientRect(),a=window.innerWidth,v=window.innerHeight,x=((q=r.current)==null?void 0:q.offsetWidth)||150,L=((P=r.current)==null?void 0:P.offsetHeight)||200;let w=e.left,k=e.right,y=e.bottom;w=Math.min(Math.max(w,n),a-x-n),k=Math.min(Math.max(a-e.right,n),a-x-n),y=Math.min(Math.max(y,n),v-L-n),R({left:w,right:k,top:y}),H({left:w,right:k,top:y})},[s,d,R,H]);return t.useEffect(()=>{g()},[g,h]),t.useEffect(()=>{const e=()=>{g()};return window.addEventListener("scroll",e),window.addEventListener("resize",e),()=>{window.removeEventListener("scroll",e),window.removeEventListener("resize",e)}},[g]),t.useImperativeHandle(l,()=>r.current),N.useHotkey("Escape",()=>c==null?void 0:c(),{enabled:s}),i.jsx(W,{children:i.jsx(I.default,{nodeRef:r,in:s,timeout:300,unmountOnExit:!0,children:e=>i.jsx(b.Provider,{value:{open:s,onClose:c,transitionState:e,closeOnClick:u},children:i.jsxs(S,{children:[i.jsx($,{}),i.jsx(f,{ref:r,"data-open":s,className:j.twMerge("w-fit min-w-[12.5rem] bg-white shadow rounded p-2 transition-[scale,opacity] absolute top-[var(--top)] left-[var(--left)] right-auto origin-top-left rtl:left-auto rtl:right-[var(--right)] rtl:origin-top-right",M,O[e],m),...C,children:h})]})})})})}function S({children:o}){const{transitionState:l}=t.useContext(b),s={entering:"active pointer-events-auto",entered:"active pointer-events-auto",exiting:"pointer-events-none",exited:"pointer-events-none",unmounted:""};return i.jsx("div",{className:j.twMerge("fixed inset-0 size-full flex flex-col bg-transparent transition-opacity overflow-hidden z-10",s[l]),children:o})}function $(){const{onClose:o}=t.useContext(b);return i.jsx("button",{type:"button",className:"w-full flex-1 opacity-0 cursor-default lg:absolute lg:size-full lg:inset-0",onClick:o})}function B({as:o,closeOnClick:l,className:s,children:c,onClick:u,...d}){const m=o||"button",h=m==="button"?"button":void 0,C=z(p=>p.menu.item.base),{closeOnClick:M,onClose:f}=t.useContext(b),n=l??M,r=p=>{n&&(f==null||f()),u==null||u(p)};return i.jsx(m,{type:h,className:j.twMerge("flex items-center px-3 py-2 w-full text-dark text-base font-normal rounded cursor-pointer transition-colors hover:bg-dark hover:text-white",C,s),onClick:r,...d,children:c})}E.Item=B;module.exports=E;

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

@@ -1,9 +1,9 @@
 import { ComponentPropsWithAs, ToggleProps } from '../../types';
 import { ElementType } from 'react';
-type MenuProps = ToggleProps & {
+type MenuProps = {
     anchorEl?: HTMLElement | null;
     closeOnClick?: boolean;
-};
+} & ToggleProps;
 type MenuItemProps = {
     closeOnClick?: boolean;
 };
@@ -11,5 +11,5 @@ declare function Menu<E extends ElementType = "div">({ as, ref, open, onClose, c
 declare namespace Menu {
     var Item: typeof MenuItem;
 }
-declare function MenuItem<E extends ElementType = "button">({ as, closeOnClick: itemCloseOnClick, type, className, children, onClick, ...props }: ComponentPropsWithAs<E, MenuItemProps>): import("react/jsx-runtime").JSX.Element;
+declare function MenuItem<E extends ElementType = "button">({ as, closeOnClick: itemCloseOnClick, className, children, onClick, ...props }: ComponentPropsWithAs<E, MenuItemProps>): import("react/jsx-runtime").JSX.Element;
 export default Menu;

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

@@ -1,30 +1,30 @@
 "use client";
-import { jsx as i, jsxs as $ } from "react/jsx-runtime";
+import { jsx as r, jsxs as $ } from "react/jsx-runtime";
 import W from "../../hooks/useClasses.es.js";
 import { createContext as j, useRef as L, useCallback as k, useEffect as N, useImperativeHandle as B, useContext as P } from "react";
-import K from "../../hooks/useKeyDown.es.js";
-import { twMerge as z } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
-import D from "../Portal/index.es.js";
-import T from "../../node_modules/react-transition-group/esm/Transition.es.js";
-const x = j({
+import { useHotkey as T } from "../../node_modules/@tanstack/react-hotkeys/dist/useHotkey.es.js";
+import { twMerge as H } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
+import q from "../Portal/index.es.js";
+import A from "../../node_modules/react-transition-group/esm/Transition.es.js";
+const y = j({
   open: !1,
   onClose: () => {
   },
   transitionState: "unmounted",
   closeOnClick: !1
 });
-function q({
-  as: r,
-  ref: c,
+function D({
+  as: i,
+  ref: l,
   open: o,
-  onClose: a,
-  closeOnClick: w = !1,
-  anchorEl: s = null,
-  className: y,
-  children: m,
+  onClose: s,
+  closeOnClick: c = !1,
+  anchorEl: u = null,
+  className: p,
+  children: h,
   ...b
 }) {
-  const C = W((t) => t.menu.base), u = r || "div", e = 16, n = L(null), f = L({
+  const C = W((t) => t.menu.base), f = i || "div", e = 16, n = L(null), d = L({
     left: e,
     right: e,
     top: e
@@ -34,71 +34,66 @@ function q({
     exiting: "scale-90 opacity-0",
     exited: "scale-90 opacity-0",
     unmounted: ""
-  }, H = k((t) => {
-    f.current = t;
+  }, z = k((t) => {
+    d.current = t;
   }, []), O = k((t) => {
-    var l, h, d;
-    (l = n.current) == null || l.style.setProperty("--left", `${t.left}px`), (h = n.current) == null || h.style.setProperty("--right", `${t.right}px`), (d = n.current) == null || d.style.setProperty("--top", `${t.top}px`);
-  }, []), p = k(() => {
+    var a, v, m;
+    (a = n.current) == null || a.style.setProperty("--left", `${t.left}px`), (v = n.current) == null || v.style.setProperty("--right", `${t.right}px`), (m = n.current) == null || m.style.setProperty("--top", `${t.top}px`);
+  }, []), g = k(() => {
     var R, E;
-    if (!o || !s) return;
-    const t = s.getBoundingClientRect(), l = window.innerWidth, h = window.innerHeight, d = ((R = n.current) == null ? void 0 : R.offsetWidth) || 150, S = ((E = n.current) == null ? void 0 : E.offsetHeight) || 200;
-    let g = t.left, M = t.right, v = t.bottom;
-    g = Math.min(Math.max(g, e), l - d - e), M = Math.min(
-      Math.max(l - t.right, e),
-      l - d - e
-    ), v = Math.min(Math.max(v, e), h - S - e), H({ left: g, right: M, top: v }), O({ left: g, right: M, top: v });
-  }, [o, s, H, O]);
+    if (!o || !u) return;
+    const t = u.getBoundingClientRect(), a = window.innerWidth, v = window.innerHeight, m = ((R = n.current) == null ? void 0 : R.offsetWidth) || 150, S = ((E = n.current) == null ? void 0 : E.offsetHeight) || 200;
+    let x = t.left, M = t.right, w = t.bottom;
+    x = Math.min(Math.max(x, e), a - m - e), M = Math.min(
+      Math.max(a - t.right, e),
+      a - m - e
+    ), w = Math.min(Math.max(w, e), v - S - e), z({ left: x, right: M, top: w }), O({ left: x, right: M, top: w });
+  }, [o, u, z, O]);
   return N(() => {
-    p();
-  }, [p, m]), N(() => {
+    g();
+  }, [g, h]), N(() => {
     const t = () => {
-      p();
+      g();
     };
     return window.addEventListener("scroll", t), window.addEventListener("resize", t), () => {
       window.removeEventListener("scroll", t), window.removeEventListener("resize", t);
     };
-  }, [p]), B(c, () => n.current), K(
-    () => {
-      a == null || a();
-    },
-    { skip: !o, targetKey: "Escape" }
-  ), /* @__PURE__ */ i(D, { children: /* @__PURE__ */ i(T, { nodeRef: n, in: o, timeout: 300, unmountOnExit: !0, children: (t) => /* @__PURE__ */ i(
-    x.Provider,
+  }, [g]), B(l, () => n.current), T("Escape", () => s == null ? void 0 : s(), { enabled: o }), /* @__PURE__ */ r(q, { children: /* @__PURE__ */ r(A, { nodeRef: n, in: o, timeout: 300, unmountOnExit: !0, children: (t) => /* @__PURE__ */ r(
+    y.Provider,
     {
       value: {
         open: o,
-        onClose: a,
+        onClose: s,
         transitionState: t,
-        closeOnClick: w
+        closeOnClick: c
       },
-      children: /* @__PURE__ */ $(A, { children: [
-        /* @__PURE__ */ i(F, {}),
-        /* @__PURE__ */ i(
-          u,
+      children: /* @__PURE__ */ $(F, { children: [
+        /* @__PURE__ */ r(G, {}),
+        /* @__PURE__ */ r(
+          f,
           {
             ref: n,
             "data-open": o,
-            className: z(
+            className: H(
               "w-fit min-w-[12.5rem] bg-white shadow rounded p-2 transition-[scale,opacity] absolute top-[var(--top)] left-[var(--left)] right-auto origin-top-left rtl:left-auto rtl:right-[var(--right)] rtl:origin-top-right",
               C,
               I[t],
-              y
+              p
             ),
             ...b,
-            children: m
+            children: h
           }
         )
       ] })
     }
   ) }) });
 }
-function A({ children: r }) {
-  const { transitionState: c } = P(x);
-  return /* @__PURE__ */ i(
+function F({ children: i }) {
+  const { transitionState: l } = P(y);
+  return /* @__PURE__ */ r(
     "div",
     {
-      className: z(
+      className: H(
         "fixed inset-0 size-full flex flex-col bg-transparent transition-opacity overflow-hidden z-10",
         {
           entering: "active pointer-events-auto",
@@ -106,51 +101,50 @@ function A({ children: r }) {
           exiting: "pointer-events-none",
           exited: "pointer-events-none",
           unmounted: ""
-        }[c]
+        }[l]
       ),
-      children: r
+      children: i
     }
   );
 }
-function F() {
-  const { onClose: r } = P(x);
-  return /* @__PURE__ */ i(
+function G() {
+  const { onClose: i } = P(y);
+  return /* @__PURE__ */ r(
     "button",
     {
       type: "button",
       className: "w-full flex-1 opacity-0 cursor-default lg:absolute lg:size-full lg:inset-0",
-      onClick: r
+      onClick: i
     }
   );
 }
-function G({
-  as: r,
-  closeOnClick: c,
-  type: o = "button",
-  className: a,
-  children: w,
-  onClick: s,
-  ...y
+function J({
+  as: i,
+  closeOnClick: l,
+  className: o,
+  children: s,
+  onClick: c,
+  ...u
 }) {
-  const m = r || "div", b = W((f) => f.menu.item.base), { closeOnClick: C, onClose: u } = P(x), e = c ?? C, n = (f) => {
-    e && (u == null || u()), s == null || s(f);
+  const p = i || "button", h = p === "button" ? "button" : void 0, b = W((d) => d.menu.item.base), { closeOnClick: C, onClose: f } = P(y), e = l ?? C, n = (d) => {
+    e && (f == null || f()), c == null || c(d);
   };
-  return /* @__PURE__ */ i(
-    m,
+  return /* @__PURE__ */ r(
+    p,
     {
-      type: o,
-      className: z(
-        "flex items-center px-3 py-2 w-full text-dark text-base font-normal rounded transition-colors hover:bg-dark hover:text-white",
+      type: h,
+      className: H(
+        "flex items-center px-3 py-2 w-full text-dark text-base font-normal rounded cursor-pointer transition-colors hover:bg-dark hover:text-white",
         b,
-        a
+        o
       ),
       onClick: n,
-      ...y,
-      children: w
+      ...u,
+      children: s
     }
   );
 }
-q.Item = G;
+D.Item = J;
 export {
-  q as default
+  D 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 i=require("react/jsx-runtime"),y=require("../../helpers/cn.cjs.js"),c=require("../../hooks/useClasses.cjs.js"),u=require("react"),q=require("../../hooks/useKeyDown.cjs.js"),v=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),x=require("../Card/index.cjs.js"),z=require("../Portal/index.cjs.js"),w=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),g=u.createContext({size:"md",open:!1,onClose:()=>{},transitionState:"unmounted",duration:300});function l({as:t,ref:n,size:s="md",open:e=!1,onClose:o=()=>{},duration:r=300,className:f,children:p,...b}){const d=c(m=>m.modal.base),a=u.useRef(null),M=t||"div",j={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:""};return u.useImperativeHandle(n,()=>a.current),q(()=>{o==null||o()},{skip:!e,targetKey:"Escape"}),i.jsx(z,{children:i.jsx(w.default,{nodeRef:a,in:e,timeout:r,unmountOnExit:!0,children:m=>i.jsxs(M,{ref:a,"data-open":e,style:{transitionDuration:`${r}ms`},className:v.twMerge("modal fixed size-full inset-0 flex flex-col z-10 bg-black/20 transition-opacity backdrop-blur p-4",d,j[m],f),...b,children:[i.jsx("button",{type:"button",onClick:()=>o(),className:"absolute inset-0 cursor-default opacity-0"}),i.jsx(g.Provider,{value:{size:s,open:e,onClose:o,transitionState:m,duration:r},children:p})]})})})}function N({className:t,children:n,...s}){const e=c(d=>d.modal.dialog),{size:o,transitionState:r,duration:f}=u.useContext(g),p={entering:"scale-100",entered:"scale-100",exiting:"scale-75",exited:"scale-75",unmounted:""},b=u.useMemo(()=>{var a;return[{sm:"min-[576px]:w-[300px]",md:"min-[576px]:w-[500px]",lg:"min-[992px]:w-[800px]"}[o],(a=e==null?void 0:e.size)==null?void 0:a[o]]},[o,e==null?void 0:e.size]);return i.jsx(x,{as:"div",style:{transitionDuration:`${f}ms`},className:v.twMerge("max-w-full max-h-full m-auto transition-transform",e==null?void 0:e.base,b,p[r],t),...s,children:n})}function S({className:t,...n}){const s=c(e=>e.modal.header.base);return i.jsx(x.Header,{className:y(s,t),...n})}function h({className:t,...n}){const s=c(e=>e.modal.body.base);return i.jsx(x.Body,{className:y(s,t),...n})}function D({className:t,...n}){const s=c(e=>e.modal.footer.base);return i.jsx(x.Footer,{className:y(s,t),...n})}l.Dialog=N;l.Header=S;l.Body=h;l.Footer=D;exports.ModalContext=g;exports.default=l;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),y=require("../../helpers/cn.cjs.js"),l=require("../../hooks/useClasses.cjs.js"),u=require("react"),q=require("../../node_modules/@tanstack/react-hotkeys/dist/useHotkey.cjs.js"),g=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),x=require("../Card/index.cjs.js"),z=require("../Portal/index.cjs.js"),C=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),v=u.createContext({size:"md",open:!1,onClose:()=>{},transitionState:"unmounted",duration:300});function c({as:t,ref:n,size:o="md",open:e=!1,onClose:a=()=>{},duration:r=300,className:f,children:p,...b}){const d=l(m=>m.modal.base),i=u.useRef(null),M=t||"div",j={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:""};return u.useImperativeHandle(n,()=>i.current),q.useHotkey("Escape",()=>a(),{enabled:e}),s.jsx(z,{children:s.jsx(C.default,{nodeRef:i,in:e,timeout:r,unmountOnExit:!0,children:m=>s.jsxs(M,{ref:i,"data-open":e,style:{transitionDuration:`${r}ms`},className:g.twMerge("modal fixed size-full inset-0 flex flex-col z-10 bg-black/20 transition-opacity backdrop-blur p-4",d,j[m],f),...b,children:[s.jsx("button",{type:"button",onClick:()=>a(),className:"absolute inset-0 cursor-default opacity-0"}),s.jsx(v.Provider,{value:{size:o,open:e,onClose:a,transitionState:m,duration:r},children:p})]})})})}function w({className:t,children:n,...o}){const e=l(d=>d.modal.dialog),{size:a,transitionState:r,duration:f}=u.useContext(v),p={entering:"scale-100",entered:"scale-100",exiting:"scale-75",exited:"scale-75",unmounted:""},b=u.useMemo(()=>{var i;return[{sm:"min-[576px]:w-[300px]",md:"min-[576px]:w-[500px]",lg:"min-[992px]:w-[800px]"}[a],(i=e==null?void 0:e.size)==null?void 0:i[a]]},[a,e==null?void 0:e.size]);return s.jsx(x,{as:"div",style:{transitionDuration:`${f}ms`},className:g.twMerge("max-w-full max-h-full m-auto transition-transform",e==null?void 0:e.base,b,p[r],t),...o,children:n})}function H({className:t,...n}){const o=l(e=>e.modal.header.base);return s.jsx(x.Header,{className:y(o,t),...n})}function N({className:t,...n}){const o=l(e=>e.modal.body.base);return s.jsx(x.Body,{className:y(o,t),...n})}function S({className:t,...n}){const o=l(e=>e.modal.footer.base);return s.jsx(x.Footer,{className:y(o,t),...n})}c.Dialog=w;c.Header=H;c.Body=N;c.Footer=S;exports.ModalContext=v;exports.default=c;

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

@@ -3,15 +3,13 @@ import { ComponentProps, ElementType } from 'react';
 import { TransitionStatus } from 'react-transition-group';
 type Context = {
     size: Size;
-    open: boolean;
-    onClose: VoidFunction;
     transitionState: TransitionStatus;
     duration: number;
-};
+} & ToggleProps;
 type ModalProps = {
     size?: Size;
     duration?: number;
-} & ToggleProps;
+} & Partial<ToggleProps>;
 type ModalDialogProps = Omit<ComponentProps<"div">, "as" | "ref">;
 type ModalHeaderProps = ComponentProps<"div">;
 type ModalBodyProps = ComponentProps<"div">;