reaxify 1.2.0 → 1.3.1

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"),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;
+"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.es.js

@@ -9,6 +9,7 @@ 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: () => {
@@ -20,7 +21,7 @@ const y = U({
   },
   anchorPointer: !1
 });
-function et({
+function nt({
   as: a,
   ref: l,
   open: e,
@@ -40,18 +41,18 @@ function et({
   children: N,
   ...A
 }) {
-  const F = S((t) => t.menu.base), T = a || "ul", n = 16, i = E(null), q = E({
+  const F = S((t) => t.menu.base), n = 16, i = E(null), T = E({
     left: n,
     right: n,
     top: n
-  }), G = {
+  }), q = {
     entering: "scale-100 opacity-100",
     entered: "scale-100 opacity-100",
     exiting: "scale-90 opacity-0",
     exited: "scale-90 opacity-0",
     unmounted: ""
   }, W = H((t) => {
-    q.current = t;
+    T.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`);
@@ -72,8 +73,8 @@ function et({
       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(() => {
+  }, [e, h, z, W, $]), G = Z({ preventClose: L, open: e, onClose: o });
+  I(() => {
     x();
   }, [x, N]), I(() => {
     const t = () => {
@@ -82,7 +83,9 @@ function et({
     return window.addEventListener("scroll", t), window.addEventListener("resize", t), () => {
       window.removeEventListener("scroll", t), window.removeEventListener("resize", t);
     };
-  }, [x]), Q(l, () => i.current), /* @__PURE__ */ r(X, { children: /* @__PURE__ */ r(
+  }, [x]), Q(l, () => i.current);
+  const J = et(a, "ul");
+  return /* @__PURE__ */ r(X, { children: /* @__PURE__ */ r(
     _,
     {
       nodeRef: i,
@@ -101,16 +104,16 @@ function et({
           value: {
             open: e,
             onClose: o,
-            dismiss: J,
+            dismiss: G,
             transitionState: t,
             closeOnClick: p,
             preventClose: L,
             anchorPointer: z
           },
-          children: /* @__PURE__ */ K(nt, { children: [
-            /* @__PURE__ */ r(ot, {}),
+          children: /* @__PURE__ */ K(ot, { children: [
+            /* @__PURE__ */ r(it, {}),
             /* @__PURE__ */ r(
-              T,
+              J,
               {
                 ref: i,
                 autoFocus: !0,
@@ -121,7 +124,7 @@ function et({
                 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",
                   F,
-                  G[t],
+                  q[t],
                   D
                 ),
                 ...A,
@@ -134,7 +137,7 @@ function et({
     }
   ) });
 }
-function nt({ children: a }) {
+function ot({ children: a }) {
   const { transitionState: l } = O(y);
   return /* @__PURE__ */ r(
     "div",
@@ -154,7 +157,7 @@ function nt({ children: a }) {
     }
   );
 }
-function ot() {
+function it() {
   const { dismiss: a, preventClose: l, anchorPointer: e } = O(y), c = (o) => {
     e && o.preventDefault();
   };
@@ -171,7 +174,7 @@ function ot() {
     }
   );
 }
-function it({
+function st({
   as: a,
   closeOnClick: l,
   className: e,
@@ -201,7 +204,7 @@ function it({
     }
   );
 }
-et.Item = it;
+nt.Item = st;
 export {
-  et 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 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;
+"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,5 +1,5 @@
 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;
@@ -13,10 +13,6 @@ type ModalProps = {
     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 {
@@ -25,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;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"}
+{"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"}

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

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

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

@@ -1 +1 @@
-"use client";"use strict";const q=require("react/jsx-runtime"),c=require("react"),C=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),M=require("../../hooks/useClasses.cjs.js"),u=require("../../helpers/cn.cjs.js");function j({as:l,direction:t="row",wrap:n=!1,reverse:r=!1,className:f,children:m,...a}){const e=M(o=>o.stack),x=l||"div",w=c.useMemo(()=>{var i,s;return{row:u("[&>*:not([class*='min-w-'])]:min-w-0",r?"flex-row-reverse":"flex-row",(i=e==null?void 0:e.directions)==null?void 0:i.row),column:u("[&>*:not([class*='min-h-'])]:min-h-0",r?"flex-col-reverse":"flex-col",(s=e==null?void 0:e.directions)==null?void 0:s.column)}[t]},[t,r,e==null?void 0:e.directions]),d=c.useMemo(()=>n==="reverse"?"flex-wrap-reverse":n?"flex-wrap":null,[n]);return q.jsx(x,{"data-name":"stack",className:C.twMerge("flex",e==null?void 0:e.base,w,d,f),...a,children:m})}module.exports=j;
+"use client";"use strict";const p=require("react/jsx-runtime"),c=require("react"),q=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),C=require("../../hooks/useClasses.cjs.js"),u=require("../../helpers/cn.cjs.js"),M=require("../../helpers/createPolymorphicComponent.cjs.js");function h({as:l,direction:o="row",wrap:n=!1,reverse:r=!1,className:m,children:a,...f}){const e=C(t=>t.stack),x=c.useMemo(()=>{var i,s;return{row:u("[&>*:not([class*='min-w-'])]:min-w-0",r?"flex-row-reverse":"flex-row",(i=e==null?void 0:e.directions)==null?void 0:i.row),column:u("[&>*:not([class*='min-h-'])]:min-h-0",r?"flex-col-reverse":"flex-col",(s=e==null?void 0:e.directions)==null?void 0:s.column)}[o]},[o,r,e==null?void 0:e.directions]),w=c.useMemo(()=>n==="reverse"?"flex-wrap-reverse":n?"flex-wrap":null,[n]),d=M.asComponent(l,"div");return p.jsx(d,{"data-name":"stack",className:q.twMerge("flex",e==null?void 0:e.base,x,w,m),...f,children:a})}module.exports=h;