reaxify 0.0.16 → 0.0.17

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("../../node_modules/react/jsx-runtime.cjs.js"),d=require("react"),x=require("../../hooks/useClasses.cjs.js");require("../Form/index.cjs.js");const n=require("../../helpers/cn.cjs.js"),E=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),p=require("../Card/index.cjs.js"),M=require("../Portal/index.cjs.js"),q=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),j=d.createContext({open:!1,onClose:()=>{},duration:300,anchor:"start",transitionState:"unmounted"});function c({as:a,open:r=!1,onClose:o=()=>{},duration:e=300,anchor:u="end",className:h="",children:y,...b}){const t=x(s=>s.drawer),l=d.useRef(null),m=a||"div",f={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:""},w=d.useMemo(()=>{var v,g,R,C;return{start:n("flex-row-reverse",(v=t==null?void 0:t.anchor)==null?void 0:v.start),end:n("flex-row",(g=t==null?void 0:t.anchor)==null?void 0:g.end),top:n("flex-col-reverse",(R=t==null?void 0:t.anchor)==null?void 0:R.top),bottom:n("flex-col",(C=t==null?void 0:t.anchor)==null?void 0:C.bottom)}[u]},[u,t==null?void 0:t.anchor]);return i.jsxRuntimeExports.jsx(M,{children:i.jsxRuntimeExports.jsx(q.default,{nodeRef:l,in:r,timeout:e,unmountOnExit:!0,children:s=>i.jsxRuntimeExports.jsxs(m,{ref:l,style:{transitionDuration:`${e}ms`},"data-open":r,className:E.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,f[s],w,h),...b,children:[i.jsxRuntimeExports.jsx("button",{type:"button",onClick:()=>o(),className:"h-full flex-1 opacity-0 cursor-default min-w-[5%]"}),i.jsxRuntimeExports.jsx(j.Provider,{value:{open:r,onClose:o,transitionState:s,duration:e,anchor:u},children:y})]})})})}function D({children:a,className:r="",...o}){const e=x(l=>l.drawer.menu),{anchor:u,duration:h,transitionState:y}=d.useContext(j),b=d.useMemo(()=>{var m,f,w,s;return{start:n("w-[30rem] h-full max-w-[97.5%] rounded-e",(m=e==null?void 0:e.anchor)==null?void 0:m.start),end:n("w-[30rem] h-full max-w-[97.5%] rounded-s",(f=e==null?void 0:e.anchor)==null?void 0:f.end),top:n("w-full h-[30rem] max-h-[97.5%] rounded-b",(w=e==null?void 0:e.anchor)==null?void 0:w.top),bottom:n("w-full h-[30rem] max-h-[97.5%] rounded-t",(s=e==null?void 0:e.anchor)==null?void 0:s.bottom)}[u]},[u,e==null?void 0:e.anchor]),t=d.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:""}})[u],[u]);return i.jsxRuntimeExports.jsx(p,{as:"div",style:{transitionDuration:`${h}ms`},className:E.twMerge("relative flex flex-col transition-[translate,width] rounded-none",e==null?void 0:e.base,t[y],b,r),...o,children:a})}function N({className:a,...r}){const o=x(e=>e.drawer.header.base);return i.jsxRuntimeExports.jsx(p.Header,{className:n(o,a),...r})}function S({className:a,...r}){const o=x(e=>e.drawer.body.base);return i.jsxRuntimeExports.jsx(p.Body,{className:n("flex-1 overflow-auto",o,a),...r})}function k({className:a,...r}){const o=x(e=>e.drawer.footer.base);return i.jsxRuntimeExports.jsx(p.Footer,{className:n(o,a),...r})}c.Menu=D;c.Header=N;c.Body=S;c.Footer=k;exports.DrawerContext=j;exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("../../node_modules/react/jsx-runtime.cjs.js"),d=require("react"),x=require("../../hooks/useClasses.cjs.js");require("../Form/index.cjs.js");const n=require("../../helpers/cn.cjs.js"),E=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),p=require("../Card/index.cjs.js"),M=require("../Portal/index.cjs.js"),q=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),j=d.createContext({open:!1,onClose:()=>{},duration:300,anchor:"start",transitionState:"unmounted"});function c({as:a,open:r=!1,onClose:o=()=>{},duration:e=300,anchor:u="end",className:h="",children:y,...b}){const t=x(s=>s.drawer),l=d.useRef(null),m=a||"div",f={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:""},w=d.useMemo(()=>{var v,g,R,C;return{start:n("flex-row-reverse",(v=t==null?void 0:t.anchor)==null?void 0:v.start),end:n("flex-row",(g=t==null?void 0:t.anchor)==null?void 0:g.end),top:n("flex-col-reverse",(R=t==null?void 0:t.anchor)==null?void 0:R.top),bottom:n("flex-col",(C=t==null?void 0:t.anchor)==null?void 0:C.bottom)}[u]},[u,t==null?void 0:t.anchor]);return i.jsxRuntimeExports.jsx(q.default,{nodeRef:l,in:r,timeout:e,unmountOnExit:!0,children:s=>i.jsxRuntimeExports.jsx(M,{children:i.jsxRuntimeExports.jsxs(m,{ref:l,style:{transitionDuration:`${e}ms`},"data-open":r,className:E.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,f[s],w,h),...b,children:[i.jsxRuntimeExports.jsx("button",{type:"button",onClick:()=>o(),className:"h-full flex-1 opacity-0 cursor-default min-w-[5%]"}),i.jsxRuntimeExports.jsx(j.Provider,{value:{open:r,onClose:o,transitionState:s,duration:e,anchor:u},children:y})]})})})}function D({children:a,className:r="",...o}){const e=x(l=>l.drawer.menu),{anchor:u,duration:h,transitionState:y}=d.useContext(j),b=d.useMemo(()=>{var m,f,w,s;return{start:n("w-[30rem] h-full max-w-[97.5%] rounded-e",(m=e==null?void 0:e.anchor)==null?void 0:m.start),end:n("w-[30rem] h-full max-w-[97.5%] rounded-s",(f=e==null?void 0:e.anchor)==null?void 0:f.end),top:n("w-full h-[30rem] max-h-[97.5%] rounded-b",(w=e==null?void 0:e.anchor)==null?void 0:w.top),bottom:n("w-full h-[30rem] max-h-[97.5%] rounded-t",(s=e==null?void 0:e.anchor)==null?void 0:s.bottom)}[u]},[u,e==null?void 0:e.anchor]),t=d.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:""}})[u],[u]);return i.jsxRuntimeExports.jsx(p,{as:"div",style:{transitionDuration:`${h}ms`},className:E.twMerge("relative flex flex-col transition-[translate,width] rounded-none",e==null?void 0:e.base,t[y],b,r),...o,children:a})}function N({className:a,...r}){const o=x(e=>e.drawer.header.base);return i.jsxRuntimeExports.jsx(p.Header,{className:n(o,a),...r})}function S({className:a,...r}){const o=x(e=>e.drawer.body.base);return i.jsxRuntimeExports.jsx(p.Body,{className:n("flex-1 overflow-auto",o,a),...r})}function k({className:a,...r}){const o=x(e=>e.drawer.footer.base);return i.jsxRuntimeExports.jsx(p.Footer,{className:n(o,a),...r})}c.Menu=D;c.Header=N;c.Body=S;c.Footer=k;exports.DrawerContext=j;exports.default=c;

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

@@ -41,7 +41,7 @@ function p({
       bottom: n("flex-col", (C = e == null ? void 0 : e.anchor) == null ? void 0 : C.bottom)
     }[u];
   }, [u, e == null ? void 0 : e.anchor]);
-  return /* @__PURE__ */ i.jsx(B, { children: /* @__PURE__ */ i.jsx(F, { nodeRef: d, in: r, timeout: t, unmountOnExit: !0, children: (l) => /* @__PURE__ */ i.jsxs(
+  return /* @__PURE__ */ i.jsx(F, { nodeRef: d, in: r, timeout: t, unmountOnExit: !0, children: (l) => /* @__PURE__ */ i.jsx(B, { children: /* @__PURE__ */ i.jsxs(
     m,
     {
       ref: d,

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

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../../node_modules/react/jsx-runtime.cjs.js"),a=require("../../helpers/cn.cjs.js"),m=require("react"),u=require("../../hooks/useClasses.cjs.js");require("../Form/index.cjs.js");const R=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),p=require("../Card/index.cjs.js"),v=require("../Portal/index.cjs.js"),M=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),y=m.createContext({size:"md",open:!1,onClose:()=>{},transitionState:"unmounted",duration:300});function l({as:n,size:o="md",open:t=!1,onClose:e=()=>{},duration:i=300,className:f,children:j,...b}){const g=u(x=>x.modal.base),r=m.useRef(null),d=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:""};return s.jsxRuntimeExports.jsx(v,{children:s.jsxRuntimeExports.jsx(M.default,{nodeRef:r,in:t,timeout:i,unmountOnExit:!0,children:x=>s.jsxRuntimeExports.jsxs(d,{ref:r,"data-open":t,style:{transitionDuration:`${i}ms`},className:R.twMerge("modal fixed size-full inset-0 flex flex-col z-10 bg-black/20 transition-opacity backdrop-blur p-4",g,c[x],f),...b,children:[s.jsxRuntimeExports.jsx("button",{type:"button",onClick:()=>e(),className:"absolute inset-0 cursor-default opacity-0"}),s.jsxRuntimeExports.jsx(y.Provider,{value:{size:o,open:t,onClose:e,transitionState:x,duration:i},children:j})]})})})}function E({className:n,children:o,...t}){const e=u(r=>r.modal.dialog),{size:i,transitionState:f,duration:j}=m.useContext(y),b={entering:"scale-100",entered:"scale-100",exiting:"scale-75",exited:"scale-75",unmounted:""},g=m.useMemo(()=>{var r,d,c;return i==="sm"?a("min-[576px]:w-[300px]",(r=e==null?void 0:e.size)==null?void 0:r.sm):i==="lg"?a("min-[992px]:w-[800px]",(d=e==null?void 0:e.size)==null?void 0:d.lg):a("min-[576px]:w-[500px]",(c=e==null?void 0:e.size)==null?void 0:c.md)},[i,e==null?void 0:e.size]);return s.jsxRuntimeExports.jsx(p,{as:"div",style:{transitionDuration:`${j}ms`},className:R.twMerge("max-w-full max-h-full m-auto transition-transform",e==null?void 0:e.base,g,b[f],n),...t,children:o})}function q({className:n,...o}){const t=u(e=>e.modal.header.base);return s.jsxRuntimeExports.jsx(p.Header,{className:a(t,n),...o})}function z({className:n,...o}){const t=u(e=>e.modal.body.base);return s.jsxRuntimeExports.jsx(p.Body,{className:a(t,n),...o})}function C({className:n,...o}){const t=u(e=>e.modal.footer.base);return s.jsxRuntimeExports.jsx(p.Footer,{className:a(t,n),...o})}l.Dialog=E;l.Header=q;l.Body=z;l.Footer=C;exports.ModalContext=y;exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("../../node_modules/react/jsx-runtime.cjs.js"),a=require("../../helpers/cn.cjs.js"),m=require("react"),u=require("../../hooks/useClasses.cjs.js");require("../Form/index.cjs.js");const R=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),p=require("../Card/index.cjs.js"),v=require("../Portal/index.cjs.js"),M=require("../../node_modules/react-transition-group/esm/Transition.cjs.js"),y=m.createContext({size:"md",open:!1,onClose:()=>{},transitionState:"unmounted",duration:300});function l({as:n,size:o="md",open:t=!1,onClose:e=()=>{},duration:i=300,className:f,children:j,...b}){const g=u(x=>x.modal.base),r=m.useRef(null),d=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:""};return s.jsxRuntimeExports.jsx(M.default,{nodeRef:r,in:t,timeout:i,unmountOnExit:!0,children:x=>s.jsxRuntimeExports.jsx(v,{children:s.jsxRuntimeExports.jsxs(d,{ref:r,"data-open":t,style:{transitionDuration:`${i}ms`},className:R.twMerge("modal fixed size-full inset-0 flex flex-col z-10 bg-black/20 transition-opacity backdrop-blur p-4",g,c[x],f),...b,children:[s.jsxRuntimeExports.jsx("button",{type:"button",onClick:()=>e(),className:"absolute inset-0 cursor-default opacity-0"}),s.jsxRuntimeExports.jsx(y.Provider,{value:{size:o,open:t,onClose:e,transitionState:x,duration:i},children:j})]})})})}function E({className:n,children:o,...t}){const e=u(r=>r.modal.dialog),{size:i,transitionState:f,duration:j}=m.useContext(y),b={entering:"scale-100",entered:"scale-100",exiting:"scale-75",exited:"scale-75",unmounted:""},g=m.useMemo(()=>{var r,d,c;return i==="sm"?a("min-[576px]:w-[300px]",(r=e==null?void 0:e.size)==null?void 0:r.sm):i==="lg"?a("min-[992px]:w-[800px]",(d=e==null?void 0:e.size)==null?void 0:d.lg):a("min-[576px]:w-[500px]",(c=e==null?void 0:e.size)==null?void 0:c.md)},[i,e==null?void 0:e.size]);return s.jsxRuntimeExports.jsx(p,{as:"div",style:{transitionDuration:`${j}ms`},className:R.twMerge("max-w-full max-h-full m-auto transition-transform",e==null?void 0:e.base,g,b[f],n),...t,children:o})}function q({className:n,...o}){const t=u(e=>e.modal.header.base);return s.jsxRuntimeExports.jsx(p.Header,{className:a(t,n),...o})}function z({className:n,...o}){const t=u(e=>e.modal.body.base);return s.jsxRuntimeExports.jsx(p.Body,{className:a(t,n),...o})}function C({className:n,...o}){const t=u(e=>e.modal.footer.base);return s.jsxRuntimeExports.jsx(p.Footer,{className:a(t,n),...o})}l.Dialog=E;l.Header=q;l.Body=z;l.Footer=C;exports.ModalContext=y;exports.default=l;

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

@@ -33,7 +33,7 @@ function f({
     exited: "opacity-0 pointer-events-none",
     unmounted: ""
   };
-  return /* @__PURE__ */ i.jsx(N, { children: /* @__PURE__ */ i.jsx(h, { nodeRef: r, in: e, timeout: a, unmountOnExit: !0, children: (u) => /* @__PURE__ */ i.jsxs(
+  return /* @__PURE__ */ i.jsx(h, { nodeRef: r, in: e, timeout: a, unmountOnExit: !0, children: (u) => /* @__PURE__ */ i.jsx(N, { children: /* @__PURE__ */ i.jsxs(
     m,
     {
       ref: r,

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

@@ -1 +1 @@
-"use strict";const o=require("react"),c=require("react-dom"),d=require("../../helpers/randomID.cjs.js");function i({children:t}){const r=o.useMemo(()=>{const n=d(),e=document.createElement("div");return e.id=n,document.body.appendChild(e),e},[]);return c.createPortal(t,r)}module.exports=i;
+"use strict";const r=require("react"),c=require("react-dom"),d=require("../../helpers/randomID.cjs.js");function u({children:o}){const e=r.useMemo(()=>{const n=d(),t=document.createElement("div");return t.id=n,document.body.appendChild(t),t},[]);return r.useEffect(()=>()=>{document.body.removeChild(e)},[e]),c.createPortal(o,e)}module.exports=u;

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

@@ -1,13 +1,15 @@
-import { useMemo as n } from "react";
-import { createPortal as d } from "react-dom";
-import m from "../../helpers/randomID.es.js";
-function u({ children: t }) {
-  const e = n(() => {
-    const r = m(), o = document.createElement("div");
+import { useMemo as d, useEffect as n } from "react";
+import { createPortal as m } from "react-dom";
+import c from "../../helpers/randomID.es.js";
+function f({ children: t }) {
+  const e = d(() => {
+    const r = c(), o = document.createElement("div");
     return o.id = r, document.body.appendChild(o), o;
   }, []);
-  return d(t, e);
+  return n(() => () => {
+    document.body.removeChild(e);
+  }, [e]), m(t, e);
 }
 export {
-  u as default
+  f as default
 };

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

@@ -1 +1 @@
-"use strict";const x=require("../../node_modules/react/jsx-runtime.cjs.js"),n=require("../../helpers/cn.cjs.js"),p=require("react"),E=require("../../hooks/useClasses.cjs.js");require("../Form/index.cjs.js");const v=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js");function q({title:b,color:g="dark",placement:u="top",className:d,children:i,...s}){const t=E(r=>r.tooltip),[f,c]=p.useState(!1),l=p.useMemo(()=>{var e,o,a,m,j,y,M,k;if(!g)return"border-transparent";const r={primary:n("bg-primary text-white",(e=t==null?void 0:t.color)==null?void 0:e.primary),secondary:n("bg-secondary text-white",(o=t==null?void 0:t.color)==null?void 0:o.secondary),success:n("bg-success text-white",(a=t==null?void 0:t.color)==null?void 0:a.success),info:n("bg-info text-white",(m=t==null?void 0:t.color)==null?void 0:m.info),warning:n("bg-warning text-white",(j=t==null?void 0:t.color)==null?void 0:j.warning),danger:n("bg-danger text-white",(y=t==null?void 0:t.color)==null?void 0:y.danger),dark:n("bg-dark text-white",(M=t==null?void 0:t.color)==null?void 0:M.dark),light:n("bg-light text-dark",(k=t==null?void 0:t.color)==null?void 0:k.light)};return(r==null?void 0:r[g])??null},[g,t==null?void 0:t.color]),w=p.useMemo(()=>{var e,o,a,m;return{top:n("bottom-[calc(100%+0.5rem)] left-0 right-0 flex-col origin-bottom",(e=t==null?void 0:t.placement)==null?void 0:e.top),end:n("start-[calc(100%+0.5rem)] top-0 bottom-0 flex-row-reverse origin-start",(o=t==null?void 0:t.placement)==null?void 0:o.end),bottom:n("top-[calc(100%+0.5rem)] left-0 right-0 flex-col-reverse origin-top",(a=t==null?void 0:t.placement)==null?void 0:a.bottom),start:n("end-[calc(100%+0.5rem)] top-0 bottom-0 flex-row origin-end",(m=t==null?void 0:t.placement)==null?void 0:m.start)}[u]},[u,t==null?void 0:t.placement]),h=p.useMemo(()=>({top:"mt-[-0.5rem]",end:"me-[-0.5rem]",bottom:"mb-[-0.5rem]",start:"ms-[-0.5rem]"})[u],[u]);return p.useMemo(()=>i?p.cloneElement(i,{onMouseEnter:r=>{var e,o;(o=(e=i.props).onMouseEnter)==null||o.call(e,r),c(!0)},onMouseLeave:r=>{var e,o;(o=(e=i.props).onMouseLeave)==null||o.call(e,r),c(!1)},onFocus:r=>{var e,o;(o=(e=i.props).onFocus)==null||o.call(e,r),c(!0)},onBlur:r=>{var e,o;(o=(e=i.props).onBlur)==null||o.call(e,r),c(!1)},className:n(i.props.className,"relative"),children:x.jsxRuntimeExports.jsxs(p.Fragment,{children:[i.props.children,x.jsxRuntimeExports.jsxs("div",{className:n("absolute flex justify-center items-center z-10 pointer-events-none transition-[scale,opacity]",w,f?"scale-100 opacity-100":"scale-75 opacity-0"),children:[x.jsxRuntimeExports.jsx("span",{className:v.twMerge("relative block w-fit h-fit bg-dark text-sm rounded px-2 py-px whitespace-nowrap z-[1]",t==null?void 0:t.base,l,d),...s,children:b}),x.jsxRuntimeExports.jsx("span",{className:v.twMerge("block size-3 bg-dark rotate-45",h,l)})]})]})}):null,[b,i,d,t==null?void 0:t.base,l,f,s,w,h])}module.exports=q;
+"use strict";const c=require("../../node_modules/react/jsx-runtime.cjs.js"),n=require("../../helpers/cn.cjs.js"),i=require("react"),F=require("../../hooks/useClasses.cjs.js");require("../Form/index.cjs.js");const v=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),N=require("../Portal/index.cjs.js"),P=require("../../node_modules/react-transition-group/esm/Transition.cjs.js");function O({title:E,color:f="dark",placement:m="top",duration:R=300,className:M,children:s,...k}){const t=F(o=>o.tooltip),w=i.useRef(null),b=i.useRef(null),[h,l]=i.useState(!1),[q,C]=i.useState({}),y=i.useMemo(()=>{var e,r,u,a,x,d,g,j;if(!f)return"border-transparent";const o={primary:n("bg-primary text-white",(e=t==null?void 0:t.color)==null?void 0:e.primary),secondary:n("bg-secondary text-white",(r=t==null?void 0:t.color)==null?void 0:r.secondary),success:n("bg-success text-white",(u=t==null?void 0:t.color)==null?void 0:u.success),info:n("bg-info text-white",(a=t==null?void 0:t.color)==null?void 0:a.info),warning:n("bg-warning text-white",(x=t==null?void 0:t.color)==null?void 0:x.warning),danger:n("bg-danger text-white",(d=t==null?void 0:t.color)==null?void 0:d.danger),dark:n("bg-dark text-white",(g=t==null?void 0:t.color)==null?void 0:g.dark),light:n("bg-light text-dark",(j=t==null?void 0:t.color)==null?void 0:j.light)};return(o==null?void 0:o[f])??null},[f,t==null?void 0:t.color]),L=i.useMemo(()=>{var e,r,u,a;return{top:n("w-(--width) top-(--top) left-(--left) right-(--right) translate-y-[calc(-100%-0.5rem)] flex-col origin-bottom",(e=t==null?void 0:t.placement)==null?void 0:e.top),end:n("h-(--height) top-(--top) bottom-(--bottom) left-(--right) translate-x-[0.5rem] flex-row-reverse origin-start",(r=t==null?void 0:t.placement)==null?void 0:r.end),bottom:n("w-(--width) top-(--bottom) left-(--left) right-(--right) translate-y-[0.5rem] flex-col-reverse origin-top",(u=t==null?void 0:t.placement)==null?void 0:u.bottom),start:n("h-(--height) top-(--top) bottom-(--bottom) left-(--left) translate-x-[calc(var(--ratio)*-100%-0.5rem)] flex-row origin-start",(a=t==null?void 0:t.placement)==null?void 0:a.start)}[m]},[m,t==null?void 0:t.placement]),$={entering:"scale-100 opacity-100",entered:"scale-100 opacity-100",exiting:"scale-75 opacity-0",exited:"scale-75 opacity-0",unmounted:""},z=i.useMemo(()=>({top:"mt-[-0.5rem]",end:"me-[-0.5rem]",bottom:"mb-[-0.5rem]",start:"ms-[-0.5rem]"})[m],[m]),B=i.useMemo(()=>s?i.cloneElement(s,{ref:o=>{b.current=o},onMouseEnter:o=>{var e,r;(r=(e=s.props).onMouseEnter)==null||r.call(e,o),l(!0)},onMouseLeave:o=>{var e,r;(r=(e=s.props).onMouseLeave)==null||r.call(e,o),l(!1)},onFocus:o=>{var e,r;(r=(e=s.props).onFocus)==null||r.call(e,o),l(!0)},onBlur:o=>{var e,r;(r=(e=s.props).onBlur)==null||r.call(e,o),l(!1)}}):null,[s]),p=i.useCallback(()=>{const o=b.current;if(!o)return;const e=o.getBoundingClientRect(),r=e.width,u=e.height,a=e.top,x=e.left,d=e.right,g=e.bottom;C({"--width":`${r}px`,"--height":`${u}px`,"--top":`${a}px`,"--left":`${x}px`,"--right":`${d}px`,"--bottom":`${g}px`})},[]);return i.useEffect(()=>(h&&p(),window.addEventListener("scroll",p),window.addEventListener("resize",p),()=>{window.removeEventListener("scroll",p),window.removeEventListener("resize",p)}),[h,m,p]),c.jsxRuntimeExports.jsxs(i.Fragment,{children:[B,c.jsxRuntimeExports.jsx(P.default,{nodeRef:w,in:h,timeout:R,unmountOnExit:!0,children:o=>c.jsxRuntimeExports.jsx(N,{children:c.jsxRuntimeExports.jsxs("div",{ref:w,style:q,className:n("fixed flex justify-center items-center z-10 pointer-events-none transition-[scale,opacity] [--ratio:1] rtl:[--ratio:-1]",L,$[o]),children:[c.jsxRuntimeExports.jsx("span",{className:v.twMerge("relative block w-fit h-fit bg-dark text-sm rounded px-2 py-px whitespace-nowrap z-[1]",t==null?void 0:t.base,y,M),...k,children:E}),c.jsxRuntimeExports.jsx("span",{className:v.twMerge("block size-3 bg-dark rotate-45",z,y)})]})})})]})}module.exports=O;

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

@@ -4,8 +4,9 @@ type Placement = "top" | "end" | "bottom" | "start";
 type Props = {
     title: string;
     color?: Color;
+    duration?: number;
     placement?: Placement;
     children?: ReactElement;
 };
-export default function Tooltip({ title, color, placement, className, children, ...props }: ComponentPropsWithoutAs<"span", Props>): ReactElement<any, string | import('react').JSXElementConstructor<any>> | null;
+export default function Tooltip({ title, color, placement, duration, className, children, ...props }: ComponentPropsWithoutAs<"span", Props>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,125 +1,141 @@
-import { j as u } from "../../node_modules/react/jsx-runtime.es.js";
+import { j as l } from "../../node_modules/react/jsx-runtime.es.js";
 import n from "../../helpers/cn.es.js";
-import { useState as E, useMemo as l, cloneElement as N, Fragment as s } from "react";
-import z from "../../hooks/useClasses.es.js";
+import { useRef as k, useState as E, useMemo as d, cloneElement as O, useCallback as T, useEffect as S, Fragment as q } from "react";
+import A from "../../hooks/useClasses.es.js";
 import "../Form/index.es.js";
-import { twMerge as M } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
-function T({
-  title: b,
-  color: g = "dark",
-  placement: a = "top",
-  className: d,
+import { twMerge as j } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
+import D from "../Portal/index.es.js";
+import G from "../../node_modules/react-transition-group/esm/Transition.es.js";
+function X({
+  title: C,
+  color: h = "dark",
+  placement: c = "top",
+  duration: L = 300,
+  className: M,
   children: i,
-  ...x
+  ...R
 }) {
-  const t = z((r) => r.tooltip), [w, c] = E(!1), f = l(() => {
-    var o, e, p, m, k, v, j, C;
-    if (!g) return "border-transparent";
-    const r = {
-      primary: n("bg-primary text-white", (o = t == null ? void 0 : t.color) == null ? void 0 : o.primary),
-      secondary: n("bg-secondary text-white", (e = t == null ? void 0 : t.color) == null ? void 0 : e.secondary),
+  const t = A((o) => o.tooltip), w = k(null), b = k(null), [x, u] = E(!1), [$, z] = E({}), y = d(() => {
+    var e, r, p, a, f, s, g, v;
+    if (!h) return "border-transparent";
+    const o = {
+      primary: n("bg-primary text-white", (e = t == null ? void 0 : t.color) == null ? void 0 : e.primary),
+      secondary: n("bg-secondary text-white", (r = t == null ? void 0 : t.color) == null ? void 0 : r.secondary),
       success: n("bg-success text-white", (p = t == null ? void 0 : t.color) == null ? void 0 : p.success),
-      info: n("bg-info text-white", (m = t == null ? void 0 : t.color) == null ? void 0 : m.info),
-      warning: n("bg-warning text-white", (k = t == null ? void 0 : t.color) == null ? void 0 : k.warning),
-      danger: n("bg-danger text-white", (v = t == null ? void 0 : t.color) == null ? void 0 : v.danger),
-      dark: n("bg-dark text-white", (j = t == null ? void 0 : t.color) == null ? void 0 : j.dark),
-      light: n("bg-light text-dark", (C = t == null ? void 0 : t.color) == null ? void 0 : C.light)
+      info: n("bg-info text-white", (a = t == null ? void 0 : t.color) == null ? void 0 : a.info),
+      warning: n("bg-warning text-white", (f = t == null ? void 0 : t.color) == null ? void 0 : f.warning),
+      danger: n("bg-danger text-white", (s = t == null ? void 0 : t.color) == null ? void 0 : s.danger),
+      dark: n("bg-dark text-white", (g = t == null ? void 0 : t.color) == null ? void 0 : g.dark),
+      light: n("bg-light text-dark", (v = t == null ? void 0 : t.color) == null ? void 0 : v.light)
     };
-    return (r == null ? void 0 : r[g]) ?? null;
-  }, [g, t == null ? void 0 : t.color]), h = l(() => {
-    var o, e, p, m;
+    return (o == null ? void 0 : o[h]) ?? null;
+  }, [h, t == null ? void 0 : t.color]), P = d(() => {
+    var e, r, p, a;
     return {
       top: n(
-        "bottom-[calc(100%+0.5rem)] left-0 right-0 flex-col origin-bottom",
-        (o = t == null ? void 0 : t.placement) == null ? void 0 : o.top
+        "w-(--width) top-(--top) left-(--left) right-(--right) translate-y-[calc(-100%-0.5rem)] flex-col origin-bottom",
+        (e = t == null ? void 0 : t.placement) == null ? void 0 : e.top
       ),
       end: n(
-        "start-[calc(100%+0.5rem)] top-0 bottom-0 flex-row-reverse origin-start",
-        (e = t == null ? void 0 : t.placement) == null ? void 0 : e.end
+        "h-(--height) top-(--top) bottom-(--bottom) left-(--right) translate-x-[0.5rem] flex-row-reverse origin-start",
+        (r = t == null ? void 0 : t.placement) == null ? void 0 : r.end
       ),
       bottom: n(
-        "top-[calc(100%+0.5rem)] left-0 right-0 flex-col-reverse origin-top",
+        "w-(--width) top-(--bottom) left-(--left) right-(--right) translate-y-[0.5rem] flex-col-reverse origin-top",
         (p = t == null ? void 0 : t.placement) == null ? void 0 : p.bottom
       ),
       start: n(
-        "end-[calc(100%+0.5rem)] top-0 bottom-0 flex-row origin-end",
-        (m = t == null ? void 0 : t.placement) == null ? void 0 : m.start
+        "h-(--height) top-(--top) bottom-(--bottom) left-(--left) translate-x-[calc(var(--ratio)*-100%-0.5rem)] flex-row origin-start",
+        (a = t == null ? void 0 : t.placement) == null ? void 0 : a.start
       )
-    }[a];
-  }, [a, t == null ? void 0 : t.placement]), y = l(() => ({
+    }[c];
+  }, [c, t == null ? void 0 : t.placement]), B = {
+    entering: "scale-100 opacity-100",
+    entered: "scale-100 opacity-100",
+    exiting: "scale-75 opacity-0",
+    exited: "scale-75 opacity-0",
+    unmounted: ""
+  }, F = d(() => ({
     top: "mt-[-0.5rem]",
     end: "me-[-0.5rem]",
     bottom: "mb-[-0.5rem]",
     start: "ms-[-0.5rem]"
-  })[a], [a]);
-  return l(() => i ? N(i, {
-    onMouseEnter: (r) => {
-      var o, e;
-      (e = (o = i.props).onMouseEnter) == null || e.call(o, r), c(!0);
+  })[c], [c]), N = d(() => i ? O(i, {
+    ref: (o) => {
+      b.current = o;
     },
-    onMouseLeave: (r) => {
-      var o, e;
-      (e = (o = i.props).onMouseLeave) == null || e.call(o, r), c(!1);
+    onMouseEnter: (o) => {
+      var e, r;
+      (r = (e = i.props).onMouseEnter) == null || r.call(e, o), u(!0);
     },
-    onFocus: (r) => {
-      var o, e;
-      (e = (o = i.props).onFocus) == null || e.call(o, r), c(!0);
+    onMouseLeave: (o) => {
+      var e, r;
+      (r = (e = i.props).onMouseLeave) == null || r.call(e, o), u(!1);
     },
-    onBlur: (r) => {
-      var o, e;
-      (e = (o = i.props).onBlur) == null || e.call(o, r), c(!1);
+    onFocus: (o) => {
+      var e, r;
+      (r = (e = i.props).onFocus) == null || r.call(e, o), u(!0);
     },
-    className: n(i.props.className, "relative"),
-    children: /* @__PURE__ */ u.jsxs(s, { children: [
-      i.props.children,
-      /* @__PURE__ */ u.jsxs(
-        "div",
-        {
-          className: n(
-            "absolute flex justify-center items-center z-10 pointer-events-none transition-[scale,opacity]",
-            h,
-            w ? "scale-100 opacity-100" : "scale-75 opacity-0"
+    onBlur: (o) => {
+      var e, r;
+      (r = (e = i.props).onBlur) == null || r.call(e, o), u(!1);
+    }
+  }) : null, [i]), m = T(() => {
+    const o = b.current;
+    if (!o) return;
+    const e = o.getBoundingClientRect(), r = e.width, p = e.height, a = e.top, f = e.left, s = e.right, g = e.bottom;
+    z({
+      "--width": `${r}px`,
+      "--height": `${p}px`,
+      "--top": `${a}px`,
+      "--left": `${f}px`,
+      "--right": `${s}px`,
+      "--bottom": `${g}px`
+    });
+  }, []);
+  return S(() => (x && m(), window.addEventListener("scroll", m), window.addEventListener("resize", m), () => {
+    window.removeEventListener("scroll", m), window.removeEventListener("resize", m);
+  }), [x, c, m]), /* @__PURE__ */ l.jsxs(q, { children: [
+    N,
+    /* @__PURE__ */ l.jsx(G, { nodeRef: w, in: x, timeout: L, unmountOnExit: !0, children: (o) => /* @__PURE__ */ l.jsx(D, { children: /* @__PURE__ */ l.jsxs(
+      "div",
+      {
+        ref: w,
+        style: $,
+        className: n(
+          "fixed flex justify-center items-center z-10 pointer-events-none transition-[scale,opacity] [--ratio:1] rtl:[--ratio:-1]",
+          P,
+          B[o]
+        ),
+        children: [
+          /* @__PURE__ */ l.jsx(
+            "span",
+            {
+              className: j(
+                "relative block w-fit h-fit bg-dark text-sm rounded px-2 py-px whitespace-nowrap z-[1]",
+                t == null ? void 0 : t.base,
+                y,
+                M
+              ),
+              ...R,
+              children: C
+            }
           ),
-          children: [
-            /* @__PURE__ */ u.jsx(
-              "span",
-              {
-                className: M(
-                  "relative block w-fit h-fit bg-dark text-sm rounded px-2 py-px whitespace-nowrap z-[1]",
-                  t == null ? void 0 : t.base,
-                  f,
-                  d
-                ),
-                ...x,
-                children: b
-              }
-            ),
-            /* @__PURE__ */ u.jsx(
-              "span",
-              {
-                className: M(
-                  "block size-3 bg-dark rotate-45",
-                  y,
-                  f
-                )
-              }
-            )
-          ]
-        }
-      )
-    ] })
-  }) : null, [
-    b,
-    i,
-    d,
-    t == null ? void 0 : t.base,
-    f,
-    w,
-    x,
-    h,
-    y
-  ]);
+          /* @__PURE__ */ l.jsx(
+            "span",
+            {
+              className: j(
+                "block size-3 bg-dark rotate-45",
+                F,
+                y
+              )
+            }
+          )
+        ]
+      }
+    ) }) })
+  ] });
 }
 export {
-  T as default
+  X as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reaxify",
   "private": false,
-  "version": "0.0.16",
+  "version": "0.0.17",
   "type": "module",
   "types": "./dist/index.d.ts",
   "files": [