reaxify 0.0.69 → 0.0.70

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

@@ -1 +1 @@
-"use client";"use strict";const u=require("../../_virtual/jsx-runtime.cjs.js");require("react");const i=require("../../hooks/useClasses.cjs.js"),o=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js");function a({className:e,children:s,...t}){const n=i(r=>r.skeleton.base);return u.jsxRuntimeExports.jsx("span",{className:o.twMerge("inline-block size-10 rounded bg-gray-200 text-gray-200 animate-pulse",n,e),...t,children:s})}module.exports=a;
+"use client";"use strict";const u=require("../../_virtual/jsx-runtime.cjs.js");require("react");const i=require("../../hooks/useClasses.cjs.js"),o=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js");function a({className:e,children:s,...t}){const n=i(r=>r.skeleton.base);return u.jsxRuntimeExports.jsx("span",{className:o.twMerge("inline-block w-10 h-10 rounded bg-gray-200 text-gray-200 animate-pulse",n,e),...t,children:s})}module.exports=a;

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

@@ -13,7 +13,7 @@ function c({
     "span",
     {
       className: i(
-        "inline-block size-10 rounded bg-gray-200 text-gray-200 animate-pulse",
+        "inline-block w-10 h-10 rounded bg-gray-200 text-gray-200 animate-pulse",
         o,
         e
       ),

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

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutAs } from '../../types';
+type SkeletonProps = ComponentPropsWithoutAs<"span", {
+    children?: never;
+}>;
+export default function Spacer({ className, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("../../_virtual/jsx-runtime.cjs.js"),e=require("react"),v=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),g=require("../../helpers/cn.cjs.js"),m=require("../../hooks/useClasses.cjs.js"),R=require("../Button/index.cjs.js"),d=e.createContext({active:null,onChange:()=>{},buttonGroupClasses:""});function p({active:s=null,onChange:r=()=>{},children:a}){const n=m(c=>c.tabs.buttonGroup.base),i=e.useMemo(()=>g("relative flex items-center",n),[n]);return l.jsxRuntimeExports.jsx(d.Provider,{value:{active:s,onChange:r,buttonGroupClasses:i},children:a})}function q({className:s,...r}){const[a,n]=e.useState(!1),i=m(t=>t.tabs.indicator.base),{active:c}=e.useContext(d),x=e.useRef(null),b=e.useCallback(()=>{const t=x.current,u=t==null?void 0:t.parentElement,o=u==null?void 0:u.querySelector("button[data-active='true']");if(!u||!o||!t)return;const h=(o==null?void 0:o.offsetLeft)??0,j=window.getComputedStyle(o).paddingInline,C=(o==null?void 0:o.getBoundingClientRect().width)??0,w=h,y=C;t.style.setProperty("--left",`${w}px`),t.style.setProperty("--width",`${y}px`),t.style.setProperty("--padding-x",`${j}`)},[]);return e.useEffect(()=>{b(),requestAnimationFrame(()=>n(!0))},[b,c]),l.jsxRuntimeExports.jsx("span",{ref:x,className:v.twMerge("absolute bottom-0 left-(--left,0px) rtl:left-(--left,100%) w-(--width,0px) px-(--padding-x,0px) h-px overflow-hidden",a?"transition-[width,left,padding]":"",i,s),...r,children:l.jsxRuntimeExports.jsx("span",{className:"block size-full rounded-full bg-primary"})})}function E({eventKey:s,className:r,children:a,onClick:n,...i}){const c=m(f=>f.tabs.button.base),{active:x,onChange:b}=e.useContext(d),t=s===x,u=f=>{!t&&b(s),n==null||n(f)};return l.jsxRuntimeExports.jsx(R,{as:"button",type:"button","data-active":t,onClick:u,color:t?"primary":null,variant:"text",className:g("shadow-none border-none",c,r),...i,children:a})}function I({eventKey:s,children:r}){const{active:a}=e.useContext(d);return a!==s?null:l.jsxRuntimeExports.jsx(e.Fragment,{children:r})}p.Indicator=q;p.Button=E;p.Item=I;exports.TabsContext=d;exports.default=p;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../../_virtual/jsx-runtime.cjs.js"),n=require("react"),w=require("../../node_modules/tailwind-merge/dist/bundle-mjs.cjs.js"),g=require("../../helpers/cn.cjs.js"),p=require("../../hooks/useClasses.cjs.js"),R=require("../Button/index.cjs.js"),b=n.createContext({active:null,onChange:()=>{},buttonGroupClasses:""});function m({active:r=null,onChange:s=()=>{},children:u}){const a=p(l=>l.tabs.buttonGroup.base),c=n.useMemo(()=>g("relative flex items-center",a),[a]);return d.jsxRuntimeExports.jsx(b.Provider,{value:{active:r,onChange:s,buttonGroupClasses:c},children:u})}function q({className:r,...s}){const[u,a]=n.useState(!1),c=p(t=>t.tabs.indicator.base),{active:l}=n.useContext(b),f=n.useRef(null),x=n.useCallback(()=>{const t=f.current,e=t==null?void 0:t.parentElement,o=e==null?void 0:e.querySelector("button[data-active='true']");if(!e||!o||!t)return;const i=(o==null?void 0:o.offsetLeft)??0,C=window.getComputedStyle(o).paddingInline,j=(o==null?void 0:o.getBoundingClientRect().width)??0,v=i,y=j;t.style.setProperty("--left",`${v}px`),t.style.setProperty("--width",`${y}px`),t.style.setProperty("--padding-x",`${C}`)},[]);return n.useEffect(()=>{x(),requestAnimationFrame(()=>a(!0))},[x,l]),d.jsxRuntimeExports.jsx("span",{ref:f,className:w.twMerge("absolute bottom-0 left-(--left,0px) rtl:left-(--left,100%) w-(--width,0px) px-(--padding-x,0px) h-px overflow-hidden",u?"transition-[width,left,padding]":"",c,r),...s,children:d.jsxRuntimeExports.jsx("span",{className:"block size-full rounded-full bg-primary"})})}function E({eventKey:r,className:s,children:u,onClick:a,...c}){const l=p(i=>i.tabs.button.base),f=p(i=>i.tabs.button.active),{active:x,onChange:t}=n.useContext(b),e=r===x,h=n.useMemo(()=>typeof s=="function"?s({isActive:e}):s,[e,s]),o=i=>{!e&&t(r),a==null||a(i)};return d.jsxRuntimeExports.jsx(R,{as:"button",type:"button","data-active":e,onClick:o,color:e?"primary":null,variant:"text",className:g("shadow-none border-none",l,e&&f,h),...c,children:u})}function I({eventKey:r,children:s}){const{active:u}=n.useContext(b);return u!==r?null:d.jsxRuntimeExports.jsx(n.Fragment,{children:s})}m.Indicator=q;m.Button=E;m.Item=I;exports.TabsContext=b;exports.default=m;

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

@@ -9,6 +9,9 @@ type TabButtonProps = {
     eventKey: string;
     type?: never;
     ref?: never;
+    className?: string | ((options?: {
+        isActive: boolean;
+    }) => string);
 };
 type TabItemProps = {
     eventKey: string;

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

@@ -1,81 +1,86 @@
 "use client";
 import { j as c } from "../../_virtual/jsx-runtime.es.js";
-import { createContext as j, useMemo as I, useState as P, useContext as m, useRef as T, useCallback as A, useEffect as R, Fragment as E } from "react";
+import { createContext as I, useMemo as g, useState as P, useContext as m, useRef as T, useCallback as A, useEffect as R, Fragment as E } from "react";
 import { twMerge as G } from "../../node_modules/tailwind-merge/dist/bundle-mjs.es.js";
-import h from "../../helpers/cn.es.js";
-import b from "../../hooks/useClasses.es.js";
-import N from "../Button/index.es.js";
-const p = j({
+import C from "../../helpers/cn.es.js";
+import p from "../../hooks/useClasses.es.js";
+import S from "../Button/index.es.js";
+const b = I({
   active: null,
   onChange: () => {
   },
   buttonGroupClasses: ""
 });
-function x({ active: e = null, onChange: o = () => {
-}, children: r }) {
-  const n = b((i) => i.tabs.buttonGroup.base), l = I(() => h("relative flex items-center", n), [n]);
-  return /* @__PURE__ */ c.jsx(p.Provider, { value: { active: e, onChange: o, buttonGroupClasses: l }, children: r });
+function x({ active: o = null, onChange: n = () => {
+}, children: a }) {
+  const r = p((u) => u.tabs.buttonGroup.base), l = g(() => C("relative flex items-center", r), [r]);
+  return /* @__PURE__ */ c.jsx(b.Provider, { value: { active: o, onChange: n, buttonGroupClasses: l }, children: a });
 }
-function S({
-  className: e,
-  ...o
+function $({
+  className: o,
+  ...n
 }) {
-  const [r, n] = P(!1), l = b((t) => t.tabs.indicator.base), { active: i } = m(p), u = T(null), d = A(() => {
-    const t = u.current, a = t == null ? void 0 : t.parentElement, s = a == null ? void 0 : a.querySelector("button[data-active='true']");
-    if (!a || !s || !t) return;
-    const g = (s == null ? void 0 : s.offsetLeft) ?? 0, w = window.getComputedStyle(s).paddingInline, y = (s == null ? void 0 : s.getBoundingClientRect().width) ?? 0, C = g, v = y;
-    t.style.setProperty("--left", `${C}px`), t.style.setProperty("--width", `${v}px`), t.style.setProperty("--padding-x", `${w}`);
+  const [a, r] = P(!1), l = p((t) => t.tabs.indicator.base), { active: u } = m(b), d = T(null), f = A(() => {
+    const t = d.current, e = t == null ? void 0 : t.parentElement, s = e == null ? void 0 : e.querySelector("button[data-active='true']");
+    if (!e || !s || !t) return;
+    const i = (s == null ? void 0 : s.offsetLeft) ?? 0, w = window.getComputedStyle(s).paddingInline, y = (s == null ? void 0 : s.getBoundingClientRect().width) ?? 0, v = i, j = y;
+    t.style.setProperty("--left", `${v}px`), t.style.setProperty("--width", `${j}px`), t.style.setProperty("--padding-x", `${w}`);
   }, []);
   return R(() => {
-    d(), requestAnimationFrame(() => n(!0));
-  }, [d, i]), /* @__PURE__ */ c.jsx(
+    f(), requestAnimationFrame(() => r(!0));
+  }, [f, u]), /* @__PURE__ */ c.jsx(
     "span",
     {
-      ref: u,
+      ref: d,
       className: G(
         "absolute bottom-0 left-(--left,0px) rtl:left-(--left,100%) w-(--width,0px) px-(--padding-x,0px) h-px overflow-hidden",
-        r ? "transition-[width,left,padding]" : "",
+        a ? "transition-[width,left,padding]" : "",
         l,
-        e
+        o
       ),
-      ...o,
+      ...n,
       children: /* @__PURE__ */ c.jsx("span", { className: "block size-full rounded-full bg-primary" })
     }
   );
 }
-function $({
-  eventKey: e,
-  className: o,
-  children: r,
-  onClick: n,
+function q({
+  eventKey: o,
+  className: n,
+  children: a,
+  onClick: r,
   ...l
 }) {
-  const i = b((f) => f.tabs.button.base), { active: u, onChange: d } = m(p), t = e === u, a = (f) => {
-    !t && d(e), n == null || n(f);
+  const u = p((i) => i.tabs.button.base), d = p((i) => i.tabs.button.active), { active: f, onChange: t } = m(b), e = o === f, h = g(() => typeof n == "function" ? n({ isActive: e }) : n, [e, n]), s = (i) => {
+    !e && t(o), r == null || r(i);
   };
   return /* @__PURE__ */ c.jsx(
-    N,
+    S,
     {
       as: "button",
       type: "button",
-      "data-active": t,
-      onClick: a,
-      color: t ? "primary" : null,
+      "data-active": e,
+      onClick: s,
+      color: e ? "primary" : null,
       variant: "text",
-      className: h("shadow-none border-none", i, o),
+      className: C(
+        "shadow-none border-none",
+        u,
+        e && d,
+        h
+      ),
       ...l,
-      children: r
+      children: a
     }
   );
 }
-function q({ eventKey: e, children: o }) {
-  const { active: r } = m(p);
-  return r !== e ? null : /* @__PURE__ */ c.jsx(E, { children: o });
+function F({ eventKey: o, children: n }) {
+  const { active: a } = m(b);
+  return a !== o ? null : /* @__PURE__ */ c.jsx(E, { children: n });
 }
-x.Indicator = S;
-x.Button = $;
-x.Item = q;
+x.Indicator = $;
+x.Button = q;
+x.Item = F;
 export {
-  p as TabsContext,
+  b as TabsContext,
   x as default
 };

package/dist/hooks/useAutoFill.cjs.js

@@ -1 +1 @@
-"use client";"use strict";const c=require("react");function a(l){const o=c.useRef(null);c.useEffect(()=>{var t,s;o.current=new AbortController;const e=o.current;return(s=(t=navigator==null?void 0:navigator.credentials)==null?void 0:t.get)==null||s.call(t,{otp:{transport:["sms"]},signal:e.signal}).then(n=>{const r=n;l((r==null?void 0:r.code)||null)}).catch(n=>{console.error(n)}),()=>{e==null||e.abort("signal has been aborted.")}},[])}module.exports=a;
+"use client";"use strict";const a=require("react");function f(s,e){const l=a.useRef(null);a.useEffect(()=>{var t,u;if(e!=null&&e.skip)return;l.current=new AbortController;const r=l.current;return(u=(t=navigator==null?void 0:navigator.credentials)==null?void 0:t.get)==null||u.call(t,{otp:{transport:["sms"]},signal:r.signal}).then(c=>{const n=c;s((n==null?void 0:n.code)||null)}).catch(c=>{console.error(c)}),()=>{r==null||r.abort("signal has been aborted.")}},[e==null?void 0:e.skip])}module.exports=f;

package/dist/hooks/useAutoFill.d.ts

@@ -1,2 +1,4 @@
 import { Dispatch } from 'react';
-export default function useAutoFill(callback: Dispatch<string | null>): void;
+export default function useAutoFill(callback: Dispatch<string | null>, options?: {
+    skip?: boolean;
+}): void;

package/dist/hooks/useAutoFill.es.js

@@ -1,26 +1,27 @@
 "use client";
-import { useRef as a, useEffect as c } from "react";
-function i(l) {
-  const r = a(null);
-  c(() => {
-    var t, s;
-    r.current = new AbortController();
-    const e = r.current;
-    return (s = (t = navigator == null ? void 0 : navigator.credentials) == null ? void 0 : t.get) == null || s.call(t, {
+import { useRef as s, useEffect as f } from "react";
+function b(u, e) {
+  const a = s(null);
+  f(() => {
+    var t, c;
+    if (e != null && e.skip) return;
+    a.current = new AbortController();
+    const r = a.current;
+    return (c = (t = navigator == null ? void 0 : navigator.credentials) == null ? void 0 : t.get) == null || c.call(t, {
       // eslint-disable-next-line
       // @ts-ignore
       otp: { transport: ["sms"] },
-      signal: e.signal
-    }).then((n) => {
-      const o = n;
-      l((o == null ? void 0 : o.code) || null);
-    }).catch((n) => {
-      console.error(n);
+      signal: r.signal
+    }).then((l) => {
+      const n = l;
+      u((n == null ? void 0 : n.code) || null);
+    }).catch((l) => {
+      console.error(l);
     }), () => {
-      e == null || e.abort("signal has been aborted.");
+      r == null || r.abort("signal has been aborted.");
     };
-  }, []);
+  }, [e == null ? void 0 : e.skip]);
 }
 export {
-  i as default
+  b as default
 };

package/dist/providers/ThemeProvider.d.ts

@@ -131,6 +131,9 @@ export type ThemeProviderContextType = {
         skeleton: {
             base: string;
         };
+        spacer: {
+            base: string;
+        };
         stack: {
             base: string;
             variants: {
@@ -172,6 +175,7 @@ export type ThemeProviderContextType = {
             };
             button: {
                 base: string;
+                active: string;
             };
         };
         typography: {

package/package.json

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