reaxify 0.0.21 → 0.0.23

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

@@ -1 +1 @@
-"use strict";const x=require("../../node_modules/react/jsx-runtime.cjs.js"),n=require("react"),zt=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),r=require("../../helpers/cn.cjs.js"),Mt=require("../../hooks/useClasses.cjs.js"),Rt=require("../../hooks/useCreateRipple.cjs.js");require("../Form/index.cjs.js");const Et=require("../ButtonGroup/index.cjs.js"),Nt=require("../Drawer/index.cjs.js"),Bt=require("../Modal/index.cjs.js");function Dt({as:bt,variant:xt,color:p,size:pt,loading:lt,stopPropagation:gt=!1,closeModal:ct=!1,closeDrawer:mt=!1,className:ft,onClick:l,children:wt,...m}){const t=Mt(e=>e.button),i=n.useContext(Et.ButtonGroupContext),ht=n.useContext(Bt.ModalContext),yt=n.useContext(Nt.DrawerContext),Ct=Rt(),kt=bt||"button",f=xt??i.variant??"solid",g=n.useMemo(()=>p!==void 0?p:i.color!==void 0?i.color:"primary",[p,i.color]),c=pt??i.size??"md",b=lt??i.loading??!1,d=n.useMemo(()=>{var o,a,u,w,h,y,C,k,v,j,q,s,z,M,R,E,N,B,D,G,$,P,W,A,F,H,I,J,K,L,O,Q,S,T,U,V,X,Y,Z,_,tt,rt,et,ot,nt,it,dt,at,ut;if(!g)return"border-transparent";const e={primary:{solid:r("bg-primary text-white border-primary",(a=(o=t==null?void 0:t.color)==null?void 0:o.primary)==null?void 0:a.solid),outline:r("bg-transparent text-primary border-primary",(w=(u=t==null?void 0:t.color)==null?void 0:u.primary)==null?void 0:w.outline),text:r("bg-transparent text-primary border-transparent",(y=(h=t==null?void 0:t.color)==null?void 0:h.primary)==null?void 0:y.text)},secondary:{solid:r("bg-secondary text-white border-secondary",(k=(C=t==null?void 0:t.color)==null?void 0:C.secondary)==null?void 0:k.solid),outline:r("bg-transparent text-secondary border-secondary",(j=(v=t==null?void 0:t.color)==null?void 0:v.secondary)==null?void 0:j.outline),text:r("bg-transparent text-secondary border-transparent",(s=(q=t==null?void 0:t.color)==null?void 0:q.secondary)==null?void 0:s.text)},success:{solid:r("bg-success text-white border-success",(M=(z=t==null?void 0:t.color)==null?void 0:z.success)==null?void 0:M.solid),outline:r("bg-transparent text-success border-success",(E=(R=t==null?void 0:t.color)==null?void 0:R.success)==null?void 0:E.outline),text:r("bg-transparent text-success border-transparent",(B=(N=t==null?void 0:t.color)==null?void 0:N.success)==null?void 0:B.text)},info:{solid:r("bg-info text-white border-info",(G=(D=t==null?void 0:t.color)==null?void 0:D.info)==null?void 0:G.solid),outline:r("bg-transparent text-info border-info",(P=($=t==null?void 0:t.color)==null?void 0:$.info)==null?void 0:P.outline),text:r("bg-transparent text-info border-transparent",(A=(W=t==null?void 0:t.color)==null?void 0:W.info)==null?void 0:A.text)},warning:{solid:r("bg-warning text-white border-warning",(H=(F=t==null?void 0:t.color)==null?void 0:F.warning)==null?void 0:H.solid),outline:r("bg-transparent text-warning border-warning",(J=(I=t==null?void 0:t.color)==null?void 0:I.warning)==null?void 0:J.outline),text:r("bg-transparent text-warning border-transparent",(L=(K=t==null?void 0:t.color)==null?void 0:K.warning)==null?void 0:L.text)},danger:{solid:r("bg-danger text-white border-danger",(Q=(O=t==null?void 0:t.color)==null?void 0:O.danger)==null?void 0:Q.solid),outline:r("bg-transparent text-danger border-danger",(T=(S=t==null?void 0:t.color)==null?void 0:S.danger)==null?void 0:T.outline),text:r("bg-transparent text-danger border-transparent",(V=(U=t==null?void 0:t.color)==null?void 0:U.danger)==null?void 0:V.text)},dark:{solid:r("bg-dark text-white border-dark",(Y=(X=t==null?void 0:t.color)==null?void 0:X.dark)==null?void 0:Y.solid),outline:r("bg-transparent text-dark border-dark",(_=(Z=t==null?void 0:t.color)==null?void 0:Z.dark)==null?void 0:_.outline),text:r("bg-transparent text-dark border-transparent",(rt=(tt=t==null?void 0:t.color)==null?void 0:tt.dark)==null?void 0:rt.text)},light:{solid:r("bg-light text-dark border-light",(ot=(et=t==null?void 0:t.color)==null?void 0:et.light)==null?void 0:ot.solid),outline:r("bg-transparent text-dark border-light",(it=(nt=t==null?void 0:t.color)==null?void 0:nt.light)==null?void 0:it.outline),text:r("bg-transparent text-dark border-transparent",(at=(dt=t==null?void 0:t.color)==null?void 0:dt.light)==null?void 0:at.text)}};return((ut=e==null?void 0:e[g])==null?void 0:ut[f])??null},[g,f,t==null?void 0:t.color]),vt=n.useMemo(()=>d==null?void 0:d.split(" ").find(e=>e.startsWith("text-")),[d]),jt=n.useMemo(()=>{var o,a,u;if(!c)return null;const e={sm:r("text-base py-1 px-3.5",(o=t==null?void 0:t.size)==null?void 0:o.sm),md:r("text-base py-1.5 px-4",(a=t==null?void 0:t.size)==null?void 0:a.md),lg:r("text-lg py-2 px-5",(u=t==null?void 0:t.size)==null?void 0:u.lg)};return e==null?void 0:e[c]},[c,t==null?void 0:t.size]),qt=n.useMemo(()=>{var e,o;return b?r("disabled:opacity-100 disabled:cursor-wait disabled:text-transparent",(e=t==null?void 0:t.loading)==null?void 0:e.active):r("disabled:opacity-75 disabled:cursor-not-allowed active:shadow-lg",(o=t==null?void 0:t.loading)==null?void 0:o.active)},[b,t==null?void 0:t.loading]),st=e=>{Ct(e),ct&&ht.onClose(),mt&&yt.onClose(),gt&&e.stopPropagation(),l==null||l(e)};return x.jsxRuntimeExports.jsxs(kt,{className:zt.twMerge("relative inline-block no-underline whitespace-nowrap font-medium text-center rounded border border-[#e8eaee] shadow cursor-pointer hover:shadow-md transition-[box-shadow,opacity,color,background-color,border-color]",t==null?void 0:t.base,d,jt,qt,i.buttonClasses,ft),onClick:st,disabled:m.disabled||b,...m,children:[wt,b&&x.jsxRuntimeExports.jsx("span",{className:"absolute inset-0 size-full flex items-center justify-center bg-transparent p-2",children:x.jsxRuntimeExports.jsx("span",{className:r("h-full aspect-square rounded-full border-4 border-current border-l-transparent animate-spin",vt)})}),x.jsxRuntimeExports.jsx("span",{className:"ripple-group absolute size-full inset-0 overflow-hidden rounded-[inherit] pointer-events-none"})]})}module.exports=Dt;
+"use strict";const b=require("../../node_modules/react/jsx-runtime.cjs.js"),n=require("react"),zr=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),o=require("../../helpers/cn.cjs.js"),Mr=require("../../hooks/useClasses.cjs.js"),Rr=require("../../hooks/useCreateRipple.cjs.js");require("../Form/index.cjs.js");const Er=require("../ButtonGroup/index.cjs.js"),Nr=require("../Drawer/index.cjs.js"),$r=require("../Modal/index.cjs.js"),Br=require("../Spinner/index.cjs.js");function Dr({as:sr,variant:gr,color:l,size:br,loading:lr,stopPropagation:cr=!1,closeModal:xr=!1,closeDrawer:pr=!1,className:fr,onClick:c,children:wr,...f}){const r=Mr(t=>t.button),i=n.useContext(Er.ButtonGroupContext),hr=n.useContext($r.ModalContext),mr=n.useContext(Nr.DrawerContext),vr=Rr(),yr=sr||"button",x=gr??i.variant??"solid",p=n.useMemo(()=>l!==void 0?l:i.color!==void 0?i.color:"primary",[l,i.color]),s=br??i.size??"md",g=lr??i.loading??!1,d=n.useMemo(()=>{var e,a,u,w,h,m,v,y,k,C,j,q,z,M,R,E,N,$,B,D,G,P,W,A,F,H,I,J,K,L,O,Q,S,T,U,V,X,Y,Z,_,rr,or,tr,er,nr,ir,dr,ar,ur;if(!p)return"border-transparent";const t={primary:{solid:o("bg-primary text-white border-primary shadow-primary focus-visible:ring-primary",(a=(e=r==null?void 0:r.color)==null?void 0:e.primary)==null?void 0:a.solid),outline:o("bg-transparent text-primary border-primary shadow-primary focus-visible:ring-primary",(w=(u=r==null?void 0:r.color)==null?void 0:u.primary)==null?void 0:w.outline),text:o("bg-transparent text-primary border-transparent shadow-primary focus-visible:ring-primary",(m=(h=r==null?void 0:r.color)==null?void 0:h.primary)==null?void 0:m.text)},secondary:{solid:o("bg-secondary text-white border-secondary shadow-secondary focus-visible:ring-secondary",(y=(v=r==null?void 0:r.color)==null?void 0:v.secondary)==null?void 0:y.solid),outline:o("bg-transparent text-secondary border-secondary shadow-secondary focus-visible:ring-secondary",(C=(k=r==null?void 0:r.color)==null?void 0:k.secondary)==null?void 0:C.outline),text:o("bg-transparent text-secondary border-transparent shadow-secondary focus-visible:ring-secondary",(q=(j=r==null?void 0:r.color)==null?void 0:j.secondary)==null?void 0:q.text)},success:{solid:o("bg-success text-white border-success shadow-success focus-visible:ring-success",(M=(z=r==null?void 0:r.color)==null?void 0:z.success)==null?void 0:M.solid),outline:o("bg-transparent text-success border-success shadow-success focus-visible:ring-success",(E=(R=r==null?void 0:r.color)==null?void 0:R.success)==null?void 0:E.outline),text:o("bg-transparent text-success border-transparent shadow-success focus-visible:ring-success",($=(N=r==null?void 0:r.color)==null?void 0:N.success)==null?void 0:$.text)},info:{solid:o("bg-info text-white border-info shadow-info focus-visible:ring-info",(D=(B=r==null?void 0:r.color)==null?void 0:B.info)==null?void 0:D.solid),outline:o("bg-transparent text-info border-info shadow-info focus-visible:ring-info",(P=(G=r==null?void 0:r.color)==null?void 0:G.info)==null?void 0:P.outline),text:o("bg-transparent text-info border-transparent shadow-info focus-visible:ring-info",(A=(W=r==null?void 0:r.color)==null?void 0:W.info)==null?void 0:A.text)},warning:{solid:o("bg-warning text-white border-warning shadow-warning focus-visible:ring-warning",(H=(F=r==null?void 0:r.color)==null?void 0:F.warning)==null?void 0:H.solid),outline:o("bg-transparent text-warning border-warning shadow-warning focus-visible:ring-warning",(J=(I=r==null?void 0:r.color)==null?void 0:I.warning)==null?void 0:J.outline),text:o("bg-transparent text-warning border-transparent shadow-warning focus-visible:ring-warning",(L=(K=r==null?void 0:r.color)==null?void 0:K.warning)==null?void 0:L.text)},danger:{solid:o("bg-danger text-white border-danger shadow-danger focus-visible:ring-danger",(Q=(O=r==null?void 0:r.color)==null?void 0:O.danger)==null?void 0:Q.solid),outline:o("bg-transparent text-danger border-danger shadow-danger focus-visible:ring-danger",(T=(S=r==null?void 0:r.color)==null?void 0:S.danger)==null?void 0:T.outline),text:o("bg-transparent text-danger border-transparent shadow-danger focus-visible:ring-danger",(V=(U=r==null?void 0:r.color)==null?void 0:U.danger)==null?void 0:V.text)},dark:{solid:o("bg-dark text-white border-dark shadow-dark focus-visible:ring-dark",(Y=(X=r==null?void 0:r.color)==null?void 0:X.dark)==null?void 0:Y.solid),outline:o("bg-transparent text-dark border-dark shadow-dark focus-visible:ring-dark",(_=(Z=r==null?void 0:r.color)==null?void 0:Z.dark)==null?void 0:_.outline),text:o("bg-transparent text-dark border-transparent shadow-dark focus-visible:ring-dark",(or=(rr=r==null?void 0:r.color)==null?void 0:rr.dark)==null?void 0:or.text)},light:{solid:o("bg-light text-dark border-light shadow-light focus-visible:ring-light",(er=(tr=r==null?void 0:r.color)==null?void 0:tr.light)==null?void 0:er.solid),outline:o("bg-transparent text-dark border-light shadow-light focus-visible:ring-light",(ir=(nr=r==null?void 0:r.color)==null?void 0:nr.light)==null?void 0:ir.outline),text:o("bg-transparent text-dark border-transparent shadow-light focus-visible:ring-light",(ar=(dr=r==null?void 0:r.color)==null?void 0:dr.light)==null?void 0:ar.text)}};return((ur=t==null?void 0:t[p])==null?void 0:ur[x])??null},[p,x,r==null?void 0:r.color]),kr=n.useMemo(()=>d==null?void 0:d.split(" ").find(t=>t.startsWith("text-")),[d]),Cr=n.useMemo(()=>{var e,a,u;if(!s)return null;const t={sm:o("text-base py-1 px-3.5",(e=r==null?void 0:r.size)==null?void 0:e.sm),md:o("text-base py-1.5 px-4",(a=r==null?void 0:r.size)==null?void 0:a.md),lg:o("text-lg py-2 px-6",(u=r==null?void 0:r.size)==null?void 0:u.lg)};return t==null?void 0:t[s]},[s,r==null?void 0:r.size]),jr=n.useMemo(()=>{var t,e;return g?o("disabled:opacity-100 disabled:cursor-wait disabled:text-transparent",(t=r==null?void 0:r.loading)==null?void 0:t.active):o("disabled:opacity-75 disabled:cursor-not-allowed",(e=r==null?void 0:r.loading)==null?void 0:e.active)},[g,r==null?void 0:r.loading]),qr=t=>{vr(t),xr&&hr.onClose(),pr&&mr.onClose(),cr&&t.stopPropagation(),c==null||c(t)};return b.jsxRuntimeExports.jsxs(yr,{className:zr.twMerge("relative inline-block no-underline whitespace-nowrap font-medium text-center rounded border border-[#e8eaee] cursor-pointer transition-[box-shadow,opacity,color,background-color,border-color]","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2","hover:shadow-sm active:shadow-md",x==="solid"?"shadow-xs":"shadow-none",r==null?void 0:r.base,d,Cr,jr,i.buttonClasses,fr),onClick:qr,disabled:f.disabled||g,...f,children:[wr,g&&b.jsxRuntimeExports.jsx("span",{className:"absolute inset-0 size-full flex items-center justify-center bg-transparent p-2",children:b.jsxRuntimeExports.jsx(Br,{size:s,color:null,className:kr})}),b.jsxRuntimeExports.jsx("span",{className:"ripple-group absolute size-full inset-0 overflow-hidden rounded-[inherit] pointer-events-none"})]})}module.exports=Dr;

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

@@ -1,193 +1,190 @@
-import { j as u } from "../../node_modules/react/jsx-runtime.es.js";
-import { useContext as f, useMemo as p } from "react";
-import { twMerge as Rr } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
-import t from "../../helpers/cn.es.js";
-import Br from "../../hooks/useClasses.es.js";
-import Dr from "../../hooks/useCreateRipple.es.js";
+import { j as b } from "../../node_modules/react/jsx-runtime.es.js";
+import { useContext as x, useMemo as g } from "react";
+import { twMerge as Mr } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
+import o from "../../helpers/cn.es.js";
+import Rr from "../../hooks/useClasses.es.js";
+import Br from "../../hooks/useCreateRipple.es.js";
 import "../Form/index.es.js";
-import { ButtonGroupContext as Gr } from "../ButtonGroup/index.es.js";
-import { DrawerContext as qr } from "../Drawer/index.es.js";
+import { ButtonGroupContext as Dr } from "../ButtonGroup/index.es.js";
+import { DrawerContext as Gr } from "../Drawer/index.es.js";
 import { ModalContext as Er } from "../Modal/index.es.js";
+import Pr from "../Spinner/index.es.js";
 function Qr({
-  as: ur,
-  variant: lr,
-  color: l,
-  size: gr,
-  loading: xr,
-  stopPropagation: mr = !1,
+  as: lr,
+  variant: br,
+  color: s,
+  size: sr,
+  loading: pr,
+  stopPropagation: cr = !1,
   closeModal: fr = !1,
-  closeDrawer: cr = !1,
+  closeDrawer: xr = !1,
   className: wr,
-  onClick: g,
+  onClick: p,
   children: hr,
-  ...c
+  ...w
 }) {
-  const r = Br((o) => o.button), e = f(Gr), yr = f(Er), kr = f(qr), vr = Dr(), Cr = ur || "button", w = lr ?? e.variant ?? "solid", x = p(() => l !== void 0 ? l : e.color !== void 0 ? e.color : "primary", [l, e.color]), m = gr ?? e.size ?? "md", b = xr ?? e.loading ?? !1, i = p(() => {
-    var n, d, a, h, y, k, v, C, z, j, N, M, R, B, D, G, q, E, P, W, A, F, H, I, J, K, L, O, Q, S, T, U, V, X, Y, Z, _, $, s, rr, tr, or, nr, er, ir, dr, ar, pr, br;
-    if (!x) return "border-transparent";
-    const o = {
+  const r = Rr((t) => t.button), i = x(Dr), mr = x(Er), vr = x(Gr), yr = Br(), kr = lr || "button", c = br ?? i.variant ?? "solid", f = g(() => s !== void 0 ? s : i.color !== void 0 ? i.color : "primary", [s, i.color]), u = sr ?? i.size ?? "md", l = pr ?? i.loading ?? !1, e = g(() => {
+    var n, d, a, h, m, v, y, k, C, z, j, N, M, R, B, D, G, E, P, S, W, q, A, F, H, I, J, K, L, O, Q, T, U, V, X, Y, Z, _, $, rr, or, tr, nr, ir, er, dr, ar, gr, ur;
+    if (!f) return "border-transparent";
+    const t = {
       primary: {
-        solid: t(
-          "bg-primary text-white border-primary",
+        solid: o(
+          "bg-primary text-white border-primary shadow-primary focus-visible:ring-primary",
           (d = (n = r == null ? void 0 : r.color) == null ? void 0 : n.primary) == null ? void 0 : d.solid
         ),
-        outline: t(
-          "bg-transparent text-primary border-primary",
+        outline: o(
+          "bg-transparent text-primary border-primary shadow-primary focus-visible:ring-primary",
           (h = (a = r == null ? void 0 : r.color) == null ? void 0 : a.primary) == null ? void 0 : h.outline
         ),
-        text: t(
-          "bg-transparent text-primary border-transparent",
-          (k = (y = r == null ? void 0 : r.color) == null ? void 0 : y.primary) == null ? void 0 : k.text
+        text: o(
+          "bg-transparent text-primary border-transparent shadow-primary focus-visible:ring-primary",
+          (v = (m = r == null ? void 0 : r.color) == null ? void 0 : m.primary) == null ? void 0 : v.text
         )
       },
       secondary: {
-        solid: t(
-          "bg-secondary text-white border-secondary",
-          (C = (v = r == null ? void 0 : r.color) == null ? void 0 : v.secondary) == null ? void 0 : C.solid
+        solid: o(
+          "bg-secondary text-white border-secondary shadow-secondary focus-visible:ring-secondary",
+          (k = (y = r == null ? void 0 : r.color) == null ? void 0 : y.secondary) == null ? void 0 : k.solid
         ),
-        outline: t(
-          "bg-transparent text-secondary border-secondary",
-          (j = (z = r == null ? void 0 : r.color) == null ? void 0 : z.secondary) == null ? void 0 : j.outline
+        outline: o(
+          "bg-transparent text-secondary border-secondary shadow-secondary focus-visible:ring-secondary",
+          (z = (C = r == null ? void 0 : r.color) == null ? void 0 : C.secondary) == null ? void 0 : z.outline
         ),
-        text: t(
-          "bg-transparent text-secondary border-transparent",
-          (M = (N = r == null ? void 0 : r.color) == null ? void 0 : N.secondary) == null ? void 0 : M.text
+        text: o(
+          "bg-transparent text-secondary border-transparent shadow-secondary focus-visible:ring-secondary",
+          (N = (j = r == null ? void 0 : r.color) == null ? void 0 : j.secondary) == null ? void 0 : N.text
         )
       },
       success: {
-        solid: t(
-          "bg-success text-white border-success",
-          (B = (R = r == null ? void 0 : r.color) == null ? void 0 : R.success) == null ? void 0 : B.solid
+        solid: o(
+          "bg-success text-white border-success shadow-success focus-visible:ring-success",
+          (R = (M = r == null ? void 0 : r.color) == null ? void 0 : M.success) == null ? void 0 : R.solid
         ),
-        outline: t(
-          "bg-transparent text-success border-success",
-          (G = (D = r == null ? void 0 : r.color) == null ? void 0 : D.success) == null ? void 0 : G.outline
+        outline: o(
+          "bg-transparent text-success border-success shadow-success focus-visible:ring-success",
+          (D = (B = r == null ? void 0 : r.color) == null ? void 0 : B.success) == null ? void 0 : D.outline
         ),
-        text: t(
-          "bg-transparent text-success border-transparent",
-          (E = (q = r == null ? void 0 : r.color) == null ? void 0 : q.success) == null ? void 0 : E.text
+        text: o(
+          "bg-transparent text-success border-transparent shadow-success focus-visible:ring-success",
+          (E = (G = r == null ? void 0 : r.color) == null ? void 0 : G.success) == null ? void 0 : E.text
         )
       },
       info: {
-        solid: t(
-          "bg-info text-white border-info",
-          (W = (P = r == null ? void 0 : r.color) == null ? void 0 : P.info) == null ? void 0 : W.solid
+        solid: o(
+          "bg-info text-white border-info shadow-info focus-visible:ring-info",
+          (S = (P = r == null ? void 0 : r.color) == null ? void 0 : P.info) == null ? void 0 : S.solid
         ),
-        outline: t(
-          "bg-transparent text-info border-info",
-          (F = (A = r == null ? void 0 : r.color) == null ? void 0 : A.info) == null ? void 0 : F.outline
+        outline: o(
+          "bg-transparent text-info border-info shadow-info focus-visible:ring-info",
+          (q = (W = r == null ? void 0 : r.color) == null ? void 0 : W.info) == null ? void 0 : q.outline
         ),
-        text: t(
-          "bg-transparent text-info border-transparent",
-          (I = (H = r == null ? void 0 : r.color) == null ? void 0 : H.info) == null ? void 0 : I.text
+        text: o(
+          "bg-transparent text-info border-transparent shadow-info focus-visible:ring-info",
+          (F = (A = r == null ? void 0 : r.color) == null ? void 0 : A.info) == null ? void 0 : F.text
         )
       },
       warning: {
-        solid: t(
-          "bg-warning text-white border-warning",
-          (K = (J = r == null ? void 0 : r.color) == null ? void 0 : J.warning) == null ? void 0 : K.solid
+        solid: o(
+          "bg-warning text-white border-warning shadow-warning focus-visible:ring-warning",
+          (I = (H = r == null ? void 0 : r.color) == null ? void 0 : H.warning) == null ? void 0 : I.solid
         ),
-        outline: t(
-          "bg-transparent text-warning border-warning",
-          (O = (L = r == null ? void 0 : r.color) == null ? void 0 : L.warning) == null ? void 0 : O.outline
+        outline: o(
+          "bg-transparent text-warning border-warning shadow-warning focus-visible:ring-warning",
+          (K = (J = r == null ? void 0 : r.color) == null ? void 0 : J.warning) == null ? void 0 : K.outline
         ),
-        text: t(
-          "bg-transparent text-warning border-transparent",
-          (S = (Q = r == null ? void 0 : r.color) == null ? void 0 : Q.warning) == null ? void 0 : S.text
+        text: o(
+          "bg-transparent text-warning border-transparent shadow-warning focus-visible:ring-warning",
+          (O = (L = r == null ? void 0 : r.color) == null ? void 0 : L.warning) == null ? void 0 : O.text
         )
       },
       danger: {
-        solid: t(
-          "bg-danger text-white border-danger",
-          (U = (T = r == null ? void 0 : r.color) == null ? void 0 : T.danger) == null ? void 0 : U.solid
+        solid: o(
+          "bg-danger text-white border-danger shadow-danger focus-visible:ring-danger",
+          (T = (Q = r == null ? void 0 : r.color) == null ? void 0 : Q.danger) == null ? void 0 : T.solid
         ),
-        outline: t(
-          "bg-transparent text-danger border-danger",
-          (X = (V = r == null ? void 0 : r.color) == null ? void 0 : V.danger) == null ? void 0 : X.outline
+        outline: o(
+          "bg-transparent text-danger border-danger shadow-danger focus-visible:ring-danger",
+          (V = (U = r == null ? void 0 : r.color) == null ? void 0 : U.danger) == null ? void 0 : V.outline
         ),
-        text: t(
-          "bg-transparent text-danger border-transparent",
-          (Z = (Y = r == null ? void 0 : r.color) == null ? void 0 : Y.danger) == null ? void 0 : Z.text
+        text: o(
+          "bg-transparent text-danger border-transparent shadow-danger focus-visible:ring-danger",
+          (Y = (X = r == null ? void 0 : r.color) == null ? void 0 : X.danger) == null ? void 0 : Y.text
         )
       },
       dark: {
-        solid: t(
-          "bg-dark text-white border-dark",
-          ($ = (_ = r == null ? void 0 : r.color) == null ? void 0 : _.dark) == null ? void 0 : $.solid
+        solid: o(
+          "bg-dark text-white border-dark shadow-dark focus-visible:ring-dark",
+          (_ = (Z = r == null ? void 0 : r.color) == null ? void 0 : Z.dark) == null ? void 0 : _.solid
         ),
-        outline: t(
-          "bg-transparent text-dark border-dark",
-          (rr = (s = r == null ? void 0 : r.color) == null ? void 0 : s.dark) == null ? void 0 : rr.outline
+        outline: o(
+          "bg-transparent text-dark border-dark shadow-dark focus-visible:ring-dark",
+          (rr = ($ = r == null ? void 0 : r.color) == null ? void 0 : $.dark) == null ? void 0 : rr.outline
         ),
-        text: t(
-          "bg-transparent text-dark border-transparent",
-          (or = (tr = r == null ? void 0 : r.color) == null ? void 0 : tr.dark) == null ? void 0 : or.text
+        text: o(
+          "bg-transparent text-dark border-transparent shadow-dark focus-visible:ring-dark",
+          (tr = (or = r == null ? void 0 : r.color) == null ? void 0 : or.dark) == null ? void 0 : tr.text
         )
       },
       light: {
-        solid: t(
-          "bg-light text-dark border-light",
-          (er = (nr = r == null ? void 0 : r.color) == null ? void 0 : nr.light) == null ? void 0 : er.solid
+        solid: o(
+          "bg-light text-dark border-light shadow-light focus-visible:ring-light",
+          (ir = (nr = r == null ? void 0 : r.color) == null ? void 0 : nr.light) == null ? void 0 : ir.solid
         ),
-        outline: t(
-          "bg-transparent text-dark border-light",
-          (dr = (ir = r == null ? void 0 : r.color) == null ? void 0 : ir.light) == null ? void 0 : dr.outline
+        outline: o(
+          "bg-transparent text-dark border-light shadow-light focus-visible:ring-light",
+          (dr = (er = r == null ? void 0 : r.color) == null ? void 0 : er.light) == null ? void 0 : dr.outline
         ),
-        text: t(
-          "bg-transparent text-dark border-transparent",
-          (pr = (ar = r == null ? void 0 : r.color) == null ? void 0 : ar.light) == null ? void 0 : pr.text
+        text: o(
+          "bg-transparent text-dark border-transparent shadow-light focus-visible:ring-light",
+          (gr = (ar = r == null ? void 0 : r.color) == null ? void 0 : ar.light) == null ? void 0 : gr.text
         )
       }
     };
-    return ((br = o == null ? void 0 : o[x]) == null ? void 0 : br[w]) ?? null;
-  }, [x, w, r == null ? void 0 : r.color]), zr = p(() => i == null ? void 0 : i.split(" ").find((o) => o.startsWith("text-")), [i]), jr = p(() => {
+    return ((ur = t == null ? void 0 : t[f]) == null ? void 0 : ur[c]) ?? null;
+  }, [f, c, r == null ? void 0 : r.color]), Cr = g(() => e == null ? void 0 : e.split(" ").find((t) => t.startsWith("text-")), [e]), zr = g(() => {
     var n, d, a;
-    if (!m) return null;
-    const o = {
-      sm: t("text-base py-1 px-3.5", (n = r == null ? void 0 : r.size) == null ? void 0 : n.sm),
-      md: t("text-base py-1.5 px-4", (d = r == null ? void 0 : r.size) == null ? void 0 : d.md),
-      lg: t("text-lg py-2 px-5", (a = r == null ? void 0 : r.size) == null ? void 0 : a.lg)
+    if (!u) return null;
+    const t = {
+      sm: o("text-base py-1 px-3.5", (n = r == null ? void 0 : r.size) == null ? void 0 : n.sm),
+      md: o("text-base py-1.5 px-4", (d = r == null ? void 0 : r.size) == null ? void 0 : d.md),
+      lg: o("text-lg py-2 px-6", (a = r == null ? void 0 : r.size) == null ? void 0 : a.lg)
     };
-    return o == null ? void 0 : o[m];
-  }, [m, r == null ? void 0 : r.size]), Nr = p(() => {
-    var o, n;
-    return b ? t(
+    return t == null ? void 0 : t[u];
+  }, [u, r == null ? void 0 : r.size]), jr = g(() => {
+    var t, n;
+    return l ? o(
       "disabled:opacity-100 disabled:cursor-wait disabled:text-transparent",
-      (o = r == null ? void 0 : r.loading) == null ? void 0 : o.active
-    ) : t(
-      "disabled:opacity-75 disabled:cursor-not-allowed active:shadow-lg",
+      (t = r == null ? void 0 : r.loading) == null ? void 0 : t.active
+    ) : o(
+      "disabled:opacity-75 disabled:cursor-not-allowed",
       (n = r == null ? void 0 : r.loading) == null ? void 0 : n.active
     );
-  }, [b, r == null ? void 0 : r.loading]), Mr = (o) => {
-    vr(o), fr && yr.onClose(), cr && kr.onClose(), mr && o.stopPropagation(), g == null || g(o);
+  }, [l, r == null ? void 0 : r.loading]), Nr = (t) => {
+    yr(t), fr && mr.onClose(), xr && vr.onClose(), cr && t.stopPropagation(), p == null || p(t);
   };
-  return /* @__PURE__ */ u.jsxs(
-    Cr,
+  return /* @__PURE__ */ b.jsxs(
+    kr,
     {
-      className: Rr(
-        "relative inline-block no-underline whitespace-nowrap font-medium text-center rounded border border-[#e8eaee] shadow cursor-pointer hover:shadow-md transition-[box-shadow,opacity,color,background-color,border-color]",
+      className: Mr(
+        "relative inline-block no-underline whitespace-nowrap font-medium text-center rounded border border-[#e8eaee] cursor-pointer transition-[box-shadow,opacity,color,background-color,border-color]",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "hover:shadow-sm active:shadow-md",
+        c === "solid" ? "shadow-xs" : "shadow-none",
+        // color ? "ring-2 ring-offset-2 ring-transparent" : null,
         r == null ? void 0 : r.base,
-        i,
+        e,
+        zr,
         jr,
-        Nr,
-        e.buttonClasses,
+        i.buttonClasses,
         wr
       ),
-      onClick: Mr,
-      disabled: c.disabled || b,
-      ...c,
+      onClick: Nr,
+      disabled: w.disabled || l,
+      ...w,
       children: [
         hr,
-        b && /* @__PURE__ */ u.jsx("span", { className: "absolute inset-0 size-full flex items-center justify-center bg-transparent p-2", children: /* @__PURE__ */ u.jsx(
-          "span",
-          {
-            className: t(
-              "h-full aspect-square rounded-full border-4 border-current border-l-transparent animate-spin",
-              zr
-            )
-          }
-        ) }),
-        /* @__PURE__ */ u.jsx("span", { className: "ripple-group absolute size-full inset-0 overflow-hidden rounded-[inherit] pointer-events-none" })
+        l && /* @__PURE__ */ b.jsx("span", { className: "absolute inset-0 size-full flex items-center justify-center bg-transparent p-2", children: /* @__PURE__ */ b.jsx(Pr, { size: u, color: null, className: Cr }) }),
+        /* @__PURE__ */ b.jsx("span", { className: "ripple-group absolute size-full inset-0 overflow-hidden rounded-[inherit] pointer-events-none" })
       ]
     }
   );

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(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-[31.875rem] h-full max-w-[97.5%] rounded-e",(m=e==null?void 0:e.anchor)==null?void 0:m.start),end:n("w-[31.875rem] 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-[31.875rem] max-h-[97.5%] rounded-b",(w=e==null?void 0:e.anchor)==null?void 0:w.top),bottom:n("w-full h-[31.875rem] 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

@@ -86,13 +86,19 @@ function H({ children: a, className: r = "", ...o }) {
     var m, c, x, l;
     return {
       start: n(
-        "w-[30rem] h-full max-w-[97.5%] rounded-e",
+        "w-[31.875rem] h-full max-w-[97.5%] rounded-e",
         (m = t == null ? void 0 : t.anchor) == null ? void 0 : m.start
       ),
-      end: n("w-[30rem] h-full max-w-[97.5%] rounded-s", (c = t == null ? void 0 : t.anchor) == null ? void 0 : c.end),
-      top: n("w-full h-[30rem] max-h-[97.5%] rounded-b", (x = t == null ? void 0 : t.anchor) == null ? void 0 : x.top),
+      end: n(
+        "w-[31.875rem] h-full max-w-[97.5%] rounded-s",
+        (c = t == null ? void 0 : t.anchor) == null ? void 0 : c.end
+      ),
+      top: n(
+        "w-full h-[31.875rem] max-h-[97.5%] rounded-b",
+        (x = t == null ? void 0 : t.anchor) == null ? void 0 : x.top
+      ),
       bottom: n(
-        "w-full h-[30rem] max-h-[97.5%] rounded-t",
+        "w-full h-[31.875rem] max-h-[97.5%] rounded-t",
         (l = t == null ? void 0 : t.anchor) == null ? void 0 : l.bottom
       )
     }[u];

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

@@ -0,0 +1 @@
+"use strict";const j=require("../../node_modules/react/jsx-runtime.cjs.js"),n=require("../../helpers/cn.cjs.js"),c=require("react"),k=require("../../hooks/useClasses.cjs.js");require("../Form/index.cjs.js");const w=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js");function M({color:t="primary",size:u="md",className:f,...q}){const r=k(o=>o.spinner),z=c.useMemo(()=>{var e,i,d,b,m,g,p,y;if(!t)return"border-current";const o={primary:n("border-primary",(e=r==null?void 0:r.color)==null?void 0:e.primary),secondary:n("border-secondary",(i=r==null?void 0:r.color)==null?void 0:i.secondary),success:n("border-success",(d=r==null?void 0:r.color)==null?void 0:d.success),info:n("border-info",(b=r==null?void 0:r.color)==null?void 0:b.info),warning:n("border-warning",(m=r==null?void 0:r.color)==null?void 0:m.warning),danger:n("border-danger",(g=r==null?void 0:r.color)==null?void 0:g.danger),dark:n("border-dark",(p=r==null?void 0:r.color)==null?void 0:p.dark),light:n("border-light",(y=r==null?void 0:r.color)==null?void 0:y.light)};return(o==null?void 0:o[t])??null},[t,r==null?void 0:r.color]),x=c.useMemo(()=>{var e,i,d;const o={sm:n("border-2 size-4",(e=r==null?void 0:r.size)==null?void 0:e.sm),md:n("border-3 size-6",(i=r==null?void 0:r.size)==null?void 0:i.md),lg:n("border-4 size-8",(d=r==null?void 0:r.size)==null?void 0:d.lg)};return o==null?void 0:o[u]},[u,r==null?void 0:r.size]);return j.jsxRuntimeExports.jsx("span",{className:w.twMerge("inline-block  align-middle rounded-full animate-spin",r==null?void 0:r.base,z,"border-l-transparent",x,f),...q})}module.exports=M;

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

@@ -0,0 +1,8 @@
+import { Color, ComponentPropsWithoutAs, Size } from '../../types';
+type Props = {
+    color?: Color | null;
+    size?: Size;
+    children?: never;
+};
+export default function Spinner({ color, size, className, ...props }: ComponentPropsWithoutAs<"span", Props>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,53 @@
+import { j as x } from "../../node_modules/react/jsx-runtime.es.js";
+import o from "../../helpers/cn.es.js";
+import { useMemo as y } from "react";
+import h from "../../hooks/useClasses.es.js";
+import "../Form/index.es.js";
+import { twMerge as j } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
+function q({
+  color: e = "primary",
+  size: m = "md",
+  className: z,
+  ...a
+}) {
+  const r = h((n) => n.spinner), k = y(() => {
+    var i, d, t, p, u, b, g, f;
+    if (!e) return "border-current";
+    const n = {
+      primary: o("border-primary", (i = r == null ? void 0 : r.color) == null ? void 0 : i.primary),
+      secondary: o("border-secondary", (d = r == null ? void 0 : r.color) == null ? void 0 : d.secondary),
+      success: o("border-success", (t = r == null ? void 0 : r.color) == null ? void 0 : t.success),
+      info: o("border-info", (p = r == null ? void 0 : r.color) == null ? void 0 : p.info),
+      warning: o("border-warning", (u = r == null ? void 0 : r.color) == null ? void 0 : u.warning),
+      danger: o("border-danger", (b = r == null ? void 0 : r.color) == null ? void 0 : b.danger),
+      dark: o("border-dark", (g = r == null ? void 0 : r.color) == null ? void 0 : g.dark),
+      light: o("border-light", (f = r == null ? void 0 : r.color) == null ? void 0 : f.light)
+    };
+    return (n == null ? void 0 : n[e]) ?? null;
+  }, [e, r == null ? void 0 : r.color]), w = y(() => {
+    var i, d, t;
+    const n = {
+      sm: o("border-2 size-4", (i = r == null ? void 0 : r.size) == null ? void 0 : i.sm),
+      md: o("border-3 size-6", (d = r == null ? void 0 : r.size) == null ? void 0 : d.md),
+      lg: o("border-4 size-8", (t = r == null ? void 0 : r.size) == null ? void 0 : t.lg)
+    };
+    return n == null ? void 0 : n[m];
+  }, [m, r == null ? void 0 : r.size]);
+  return /* @__PURE__ */ x.jsx(
+    "span",
+    {
+      className: j(
+        "inline-block  align-middle rounded-full animate-spin",
+        r == null ? void 0 : r.base,
+        k,
+        "border-l-transparent",
+        w,
+        z
+      ),
+      ...a
+    }
+  );
+}
+export {
+  q as default
+};

package/dist/components/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Accordion/index.cjs.js"),r=require("./Badge/index.cjs.js"),n=require("./Box/index.cjs.js"),i=require("./Button/index.cjs.js"),t=require("./ButtonGroup/index.cjs.js"),o=require("./Card/index.cjs.js"),u=require("./Drawer/index.cjs.js"),d=require("./Form/index.cjs.js"),c=require("./InputGroup/index.cjs.js"),s=require("./Menu/index.cjs.js"),q=require("./Modal/index.cjs.js"),x=require("./Portal/index.cjs.js"),$=require("./Progress/index.cjs.js"),a=require("./Skeleton/index.cjs.js"),l=require("./Stack/index.cjs.js"),f=require("./Table/index.cjs.js"),p=require("./Tabs/index.cjs.js"),g=require("./Tooltip/index.cjs.js"),b=require("./Typography/index.cjs.js");;/* empty css                */exports.Accordion=e;exports.Badge=r;exports.Box=n;exports.Button=i;exports.ButtonGroup=t.default;exports.Card=o;exports.Drawer=u.default;exports.Form=d.default;exports.InputGroup=c;exports.Menu=s;exports.Modal=q.default;exports.Portal=x;exports.Progress=$;exports.Skeleton=a;exports.Stack=l;exports.Table=f;exports.Tabs=p.default;exports.Tooltip=g;exports.Typography=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Accordion/index.cjs.js"),r=require("./Badge/index.cjs.js"),n=require("./Box/index.cjs.js"),i=require("./Button/index.cjs.js"),t=require("./ButtonGroup/index.cjs.js"),o=require("./Card/index.cjs.js"),u=require("./Drawer/index.cjs.js"),d=require("./Form/index.cjs.js"),c=require("./InputGroup/index.cjs.js"),s=require("./Menu/index.cjs.js"),q=require("./Modal/index.cjs.js"),x=require("./Portal/index.cjs.js"),$=require("./Progress/index.cjs.js"),a=require("./Skeleton/index.cjs.js"),l=require("./Spinner/index.cjs.js"),p=require("./Stack/index.cjs.js"),f=require("./Table/index.cjs.js"),g=require("./Tabs/index.cjs.js"),b=require("./Tooltip/index.cjs.js"),S=require("./Typography/index.cjs.js");;/* empty css                */exports.Accordion=e;exports.Badge=r;exports.Box=n;exports.Button=i;exports.ButtonGroup=t.default;exports.Card=o;exports.Drawer=u.default;exports.Form=d.default;exports.InputGroup=c;exports.Menu=s;exports.Modal=q.default;exports.Portal=x;exports.Progress=$;exports.Skeleton=a;exports.Spinner=l;exports.Stack=p;exports.Table=f;exports.Tabs=g.default;exports.Tooltip=b;exports.Typography=S;

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export { default as Modal } from './Modal';
 export { default as Portal } from './Portal';
 export { default as Progress } from './Progress';
 export { default as Skeleton } from './Skeleton';
+export { default as Spinner } from './Spinner';
 export { default as Stack } from './Stack';
 export { default as Table } from './Table';
 export { default as Tabs } from './Tabs';

package/dist/components/index.es.js

@@ -4,19 +4,20 @@ import { default as u } from "./Box/index.es.js";
 import { default as d } from "./Button/index.es.js";
 import { default as m } from "./ButtonGroup/index.es.js";
 import { default as n } from "./Card/index.es.js";
-import { default as T } from "./Drawer/index.es.js";
-import { default as g } from "./Form/index.es.js";
-import { default as b } from "./InputGroup/index.es.js";
-import { default as y } from "./Menu/index.es.js";
-import { default as M } from "./Modal/index.es.js";
-import { default as S } from "./Portal/index.es.js";
+import { default as B } from "./Drawer/index.es.js";
+import { default as c } from "./Form/index.es.js";
+import { default as S } from "./InputGroup/index.es.js";
+import { default as k } from "./Menu/index.es.js";
+import { default as G } from "./Modal/index.es.js";
+import { default as P } from "./Portal/index.es.js";
 import { default as w } from "./Progress/index.es.js";
 import { default as C } from "./Skeleton/index.es.js";
-import { default as F } from "./Stack/index.es.js";
-import { default as j } from "./Table/index.es.js";
-import { default as v } from "./Tabs/index.es.js";
-import { default as E } from "./Tooltip/index.es.js";
-import { default as J } from "./Typography/index.es.js";
+import { default as F } from "./Spinner/index.es.js";
+import { default as j } from "./Stack/index.es.js";
+import { default as v } from "./Table/index.es.js";
+import { default as E } from "./Tabs/index.es.js";
+import { default as J } from "./Tooltip/index.es.js";
+import { default as L } from "./Typography/index.es.js";
 /* empty css              */
 export {
   a as Accordion,
@@ -25,17 +26,18 @@ export {
   d as Button,
   m as ButtonGroup,
   n as Card,
-  T as Drawer,
-  g as Form,
-  b as InputGroup,
-  y as Menu,
-  M as Modal,
-  S as Portal,
+  B as Drawer,
+  c as Form,
+  S as InputGroup,
+  k as Menu,
+  G as Modal,
+  P as Portal,
   w as Progress,
   C as Skeleton,
-  F as Stack,
-  j as Table,
-  v as Tabs,
-  E as Tooltip,
-  J as Typography
+  F as Spinner,
+  j as Stack,
+  v as Table,
+  E as Tabs,
+  J as Tooltip,
+  L as Typography
 };

package/dist/providers/ThemeProvider.d.ts

@@ -1,4 +1,10 @@
-import { ChildrenProps, DeepPartial } from '../types';
+import { ChildrenProps, Color, DeepPartial, Size } from '../types';
+type ColorClasses<T> = {
+    [key in Color]: T;
+};
+type SizeClasses = {
+    [key in Size]: string;
+};
 export type ThemeProviderContextType = {
     classes: {
         accordion: {
@@ -19,106 +25,24 @@ export type ThemeProviderContextType = {
         };
         badge: {
             base: string;
-            color: {
-                primary: {
-                    solid: string;
-                    outline: string;
-                    soft: string;
-                };
-                secondary: {
-                    solid: string;
-                    outline: string;
-                    soft: string;
-                };
-                success: {
-                    solid: string;
-                    outline: string;
-                    soft: string;
-                };
-                info: {
-                    solid: string;
-                    outline: string;
-                    soft: string;
-                };
-                warning: {
-                    solid: string;
-                    outline: string;
-                    soft: string;
-                };
-                danger: {
-                    solid: string;
-                    outline: string;
-                    soft: string;
-                };
-                dark: {
-                    solid: string;
-                    outline: string;
-                    soft: string;
-                };
-                light: {
-                    solid: string;
-                    outline: string;
-                    soft: string;
-                };
-            };
-            size: {
-                sm: string;
-                md: string;
-                lg: string;
-            };
+            color: ColorClasses<{
+                solid: string;
+                outline: string;
+                soft: string;
+            }>;
+            size: SizeClasses;
         };
         box: {
             base: string;
         };
         button: {
             base: string;
-            color: {
-                primary: {
-                    solid: string;
-                    outline: string;
-                    text: string;
-                };
-                secondary: {
-                    solid: string;
-                    outline: string;
-                    text: string;
-                };
-                success: {
-                    solid: string;
-                    outline: string;
-                    text: string;
-                };
-                info: {
-                    solid: string;
-                    outline: string;
-                    text: string;
-                };
-                warning: {
-                    solid: string;
-                    outline: string;
-                    text: string;
-                };
-                danger: {
-                    solid: string;
-                    outline: string;
-                    text: string;
-                };
-                dark: {
-                    solid: string;
-                    outline: string;
-                    text: string;
-                };
-                light: {
-                    solid: string;
-                    outline: string;
-                    text: string;
-                };
-            };
-            size: {
-                sm: string;
-                md: string;
-                lg: string;
-            };
+            color: ColorClasses<{
+                solid: string;
+                outline: string;
+                text: string;
+            }>;
+            size: SizeClasses;
             loading: {
                 active: string;
                 inactive: string;
@@ -222,16 +146,7 @@ export type ThemeProviderContextType = {
         };
         progress: {
             base: string;
-            color: {
-                primary: string;
-                secondary: string;
-                success: string;
-                info: string;
-                warning: string;
-                danger: string;
-                dark: string;
-                light: string;
-            };
+            color: ColorClasses<string>;
         };
         skeleton: {
             base: string;
@@ -294,16 +209,7 @@ export type ThemeProviderContextType = {
         };
         tooltip: {
             base: string;
-            color: {
-                primary: string;
-                secondary: string;
-                success: string;
-                info: string;
-                warning: string;
-                danger: string;
-                dark: string;
-                light: string;
-            };
+            color: ColorClasses<string>;
             placement: {
                 top: string;
                 end: string;
@@ -311,6 +217,11 @@ export type ThemeProviderContextType = {
                 start: string;
             };
         };
+        spinner: {
+            base: string;
+            color: ColorClasses<string>;
+            size: SizeClasses;
+        };
     };
 };
 type Props = ChildrenProps & DeepPartial<ThemeProviderContextType>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "reaxify",
   "private": false,
-  "version": "0.0.21",
+  "version": "0.0.23",
   "type": "module",
   "types": "./dist/index.d.ts",
   "files": [
@@ -36,6 +36,9 @@
       "require": "./dist/providers/index.cjs.js",
       "types": "./dist/providers/index.d.ts"
     },
+    "./types": {
+      "types": "./dist/types/index.d.ts"
+    },
     "./style.css": {
       "require": "./dist/style.css",
       "default": "./dist/style.css"