@mateosuarezdev/react-ui 1.0.6 → 1.0.9

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx as f, jsxs as w, Fragment as Te } from "react/jsx-runtime";
-import { useRef as N, useEffect as j, useState as L, useSyncExternalStore as Ke, useCallback as K, useId as ve, forwardRef as H, memo as Be, useContext as xe, createContext as we } from "react";
+import { useRef as N, useEffect as j, useState as L, useSyncExternalStore as Ke, useCallback as K, useId as xe, forwardRef as H, memo as Be, useContext as ve, createContext as we } from "react";
 import { createPortal as ye } from "react-dom";
 import { clsx as Ve } from "clsx";
 import { twMerge as Xe } from "tailwind-merge";
@@ -195,7 +195,7 @@ const Q = (e) => {
       t
     ),
     children: /* @__PURE__ */ w(
-      xt,
+      vt,
       {
         size: r === "xs" ? 16 : r === "sm" ? 20 : 24,
         fill: "none",
@@ -293,7 +293,7 @@ const at = (e = !0, n) => {
   const [c, u] = L(!1), [d, b] = L({
     width: 192,
     height: 300
-  }), m = N(null), g = N(null), v = N({
+  }), m = N(null), g = N(null), x = N({
     left: 0,
     right: 0,
     top: 0,
@@ -302,9 +302,9 @@ const at = (e = !0, n) => {
     y: 0,
     width: 0,
     height: 0
-  }), x = N(null), A = ve(), F = K(
+  }), v = N(null), A = xe(), F = K(
     (E) => {
-      const z = E ?? v.current;
+      const z = E ?? x.current;
       if (!z) return { x: 0, top: 0, bottom: void 0 };
       const _ = d.width, B = d.height;
       return ut({
@@ -318,18 +318,18 @@ const at = (e = !0, n) => {
         avoidCollisions: l
       });
     },
-    [v.current, d, n, r]
+    [x.current, d, n, r]
   );
   j(() => {
-    if (!c || !e || (x.current = document.getElementById(e), !x.current)) return;
+    if (!c || !e || (v.current = document.getElementById(e), !v.current)) return;
     c && O();
     const E = () => {
-      x.current && (u(!1), o?.(), x.current.removeEventListener("scroll", E));
+      v.current && (u(!1), o?.(), v.current.removeEventListener("scroll", E));
     };
-    return s && x.current.addEventListener("scroll", E, {
+    return s && v.current.addEventListener("scroll", E, {
       passive: !0
     }), () => {
-      x.current && x.current.removeEventListener("scroll", E);
+      v.current && v.current.removeEventListener("scroll", E);
     };
   }, [c, e]);
   const O = () => {
@@ -340,7 +340,7 @@ const at = (e = !0, n) => {
   }, S = K(() => {
     if (!m.current) return;
     const E = m.current.getBoundingClientRect();
-    v.current = {
+    x.current = {
       left: E.left,
       right: E.right,
       top: E.top,
@@ -387,25 +387,25 @@ const at = (e = !0, n) => {
   let c = 0, u = 0;
   if (o) {
     if (i === "right") {
-      const m = e.right + l, g = e.left - n - l, v = Math.max(
+      const m = e.right + l, g = e.left - n - l, x = Math.max(
         0,
         m + n - (a.width - s)
-      ), x = Math.max(0, s - g);
-      v <= x ? (c = m, v > 0 && (c = a.width - n - s)) : (c = g, x > 0 && (c = s)), u = e.top, u + r > a.height - s && (u = a.height - r - s), u < s && (u = s);
+      ), v = Math.max(0, s - g);
+      x <= v ? (c = m, x > 0 && (c = a.width - n - s)) : (c = g, v > 0 && (c = s)), u = e.top, u + r > a.height - s && (u = a.height - r - s), u < s && (u = s);
     } else if (i === "left") {
-      const m = e.left - n - l, g = e.right + l, v = Math.max(0, s - m), x = Math.max(
+      const m = e.left - n - l, g = e.right + l, x = Math.max(0, s - m), v = Math.max(
         0,
         g + n - (a.width - s)
       );
-      v <= x ? (c = m, v > 0 && (c = s)) : (c = g, x > 0 && (c = a.width - n - s)), u = e.top, u + r > a.height - s && (u = a.height - r - s), u < s && (u = s);
+      x <= v ? (c = m, x > 0 && (c = s)) : (c = g, v > 0 && (c = a.width - n - s)), u = e.top, u + r > a.height - s && (u = a.height - r - s), u < s && (u = s);
     } else if (i === "bottom") {
       const m = a.height - e.bottom, g = e.top;
       m >= r + l ? u = e.bottom + l : g >= r + l ? u = e.top - r - l : (u = e.bottom + l, u = Math.min(u, a.height - r - s));
-      const v = a.width - e.left, x = e.right;
+      const x = a.width - e.left, v = e.right;
       if (t === "start")
-        c = e.left, c + n > a.width - s && (x >= n ? c = e.right - n : c = a.width - n - s);
+        c = e.left, c + n > a.width - s && (v >= n ? c = e.right - n : c = a.width - n - s);
       else if (t === "end")
-        c = e.right - n, c < s && (v >= n ? c = e.left : c = s);
+        c = e.right - n, c < s && (x >= n ? c = e.left : c = s);
       else {
         const A = e.left + e.width / 2 - n / 2;
         A >= s && A + n <= a.width - s ? c = A : A < s ? c = s : c = a.width - n - s;
@@ -413,11 +413,11 @@ const at = (e = !0, n) => {
     } else {
       const m = e.top, g = a.height - e.bottom;
       m >= r + l ? u = e.top - r - l : g >= r + l ? u = e.bottom + l : (u = e.top - r - l, u = Math.max(s, u));
-      const v = a.width - e.left, x = e.right;
+      const x = a.width - e.left, v = e.right;
       if (t === "start")
-        c = e.left, c + n > a.width - s && (x >= n ? c = e.right - n : c = a.width - n - s);
+        c = e.left, c + n > a.width - s && (v >= n ? c = e.right - n : c = a.width - n - s);
       else if (t === "end")
-        c = e.right - n, c < s && (v >= n ? c = e.left : c = s);
+        c = e.right - n, c < s && (x >= n ? c = e.left : c = s);
       else {
         const A = e.left + e.width / 2 - n / 2;
         A >= s && A + n <= a.width - s ? c = A : A < s ? c = s : c = a.width - n - s;
@@ -532,7 +532,7 @@ const dt = "relative shrink-0 select-none transition outline-none duration-200 e
   danger: "bg-red-4 text-red-9 lg:hover:bg-red-5 focus:ring-red-9 border border-transparent",
   dangersolid: "bg-red-9 text-base-1 dark-theme:text-base-12 lg:hover:bg-red-8 focus:ring-base-6 border border-transparent",
   disabled: "bg-base-3 text-base-11 border border-transparent"
-}, vt = {
+}, xt = {
   enabled: "",
   disabled: "opacity-75",
   loading: ""
@@ -553,8 +553,8 @@ const dt = "relative shrink-0 select-none transition outline-none duration-200 e
     type: b = "button",
     ...m
   }, g) => {
-    const [v, x] = L(!1), A = ($) => {
-      i === "enabled" && (d ? (x(!0), l && l($), setTimeout(() => x(!1), 1e3)) : l && l($));
+    const [x, v] = L(!1), A = ($) => {
+      i === "enabled" && (d ? (v(!0), l && l($), setTimeout(() => v(!1), 1e3)) : l && l($));
     }, { ref: F, ripple: O } = at(
       a,
       e === "contrast" || c
@@ -566,7 +566,7 @@ const dt = "relative shrink-0 select-none transition outline-none duration-200 e
         type: b,
         disabled: m.disabled ? m.disabled : i === "disabled" || i === "loading",
         onMouseDown: O,
-        onClick: ($) => v ? null : A($),
+        onClick: ($) => x ? null : A($),
         className: p(
           dt,
           ht[n],
@@ -574,7 +574,7 @@ const dt = "relative shrink-0 select-none transition outline-none duration-200 e
           pt[t],
           mt[u],
           gt[e],
-          vt[i],
+          xt[i],
           m.disabled && "opacity-50",
           s
         ),
@@ -585,7 +585,7 @@ const dt = "relative shrink-0 select-none transition outline-none duration-200 e
   }
 );
 ie.displayName = "Button";
-const ur = ({ className: e }) => /* @__PURE__ */ f("div", { className: p("w-full h-px bg-base-4", e) }), xt = ({
+const ur = ({ className: e }) => /* @__PURE__ */ f("div", { className: p("w-full h-px bg-base-4", e) }), vt = ({
   children: e,
   size: n = 24,
   strokeWidth: r = 2,
@@ -847,8 +847,8 @@ const G = {
   }, u) => {
     const d = () => {
       r || n?.(e === "indeterminate" ? !0 : !e);
-    }, b = (v) => {
-      (v.key === " " || v.key === "Enter") && (v.preventDefault(), d());
+    }, b = (x) => {
+      (x.key === " " || x.key === "Enter") && (x.preventDefault(), d());
     }, m = {
       xs: "h-3.5 w-3.5",
       sm: "h-4 w-4",
@@ -948,10 +948,10 @@ const Mt = {
     containerClassName: b,
     className: m,
     type: g = "text",
-    value: v,
-    ...x
+    value: x,
+    ...v
   }, A) => {
-    const F = N(null), O = N(!1), [S, $] = L(!1), [E, z] = L(!1), _ = g === "password", B = _ && S ? "text" : c ? "number" : g, U = v !== "" && v !== null && v !== void 0;
+    const F = N(null), O = N(!1), [S, $] = L(!1), [E, z] = L(!1), _ = g === "password", B = _ && S ? "text" : c ? "number" : g, U = x !== "" && x !== null && x !== void 0;
     return j(() => {
       if (!O.current) {
         O.current = !0;
@@ -1025,11 +1025,11 @@ const Mt = {
                   },
                   m
                 ),
-                value: v,
+                value: x,
                 placeholder: l,
                 onFocus: () => z(!0),
                 onBlur: () => z(!1),
-                ...x
+                ...v
               }
             )
           ]
@@ -1235,7 +1235,7 @@ const mr = ({
   maxTags: a,
   validateTag: c
 }) => {
-  const [u, d] = L(""), [b, m] = L(!1), [g, v] = L(null), x = N(null), A = N(null), F = N([]), O = t.length > 0, S = N(
+  const [u, d] = L(""), [b, m] = L(!1), [g, x] = L(null), v = N(null), A = N(null), F = N([]), O = t.length > 0, S = N(
     `taginput-${Math.random().toString(36).substr(2, 9)}`
   ).current, $ = N(
     `label-${Math.random().toString(36).substr(2, 9)}`
@@ -1250,24 +1250,24 @@ const mr = ({
       k.preventDefault();
       const C = u.trim();
       if (a && t.length >= a) {
-        v(`Maximum of ${a} tags allowed`);
+        x(`Maximum of ${a} tags allowed`);
         return;
       }
       if (t.includes(C)) {
-        v("Tag already exists");
+        x("Tag already exists");
         return;
       }
       if (c) {
         const I = c(C);
         if (typeof I == "string") {
-          v(I);
+          x(I);
           return;
         } else if (I === !1) {
-          v("Invalid tag");
+          x("Invalid tag");
           return;
         }
       }
-      i([...t, C]), d(""), v(null), M(`Added tag ${C}`);
+      i([...t, C]), d(""), x(null), M(`Added tag ${C}`);
     } else if (k.key === "Backspace" && !u && t.length > 0) {
       const C = t[t.length - 1];
       i(t.slice(0, -1)), M(`Removed tag ${C}`);
@@ -1277,17 +1277,17 @@ const mr = ({
       k.preventDefault();
       const I = t[C], Z = [...t];
       Z.splice(C, 1), i(Z), setTimeout(() => {
-        x.current && x.current.focus();
+        v.current && v.current.focus();
       }, 0), M(`Removed tag ${I}`);
-    } else k.key === "ArrowRight" ? (k.preventDefault(), C < t.length - 1 ? F.current[C + 1]?.focus() : x.current?.focus()) : k.key === "ArrowLeft" && (k.preventDefault(), C > 0 && F.current[C - 1]?.focus());
+    } else k.key === "ArrowRight" ? (k.preventDefault(), C < t.length - 1 ? F.current[C + 1]?.focus() : v.current?.focus()) : k.key === "ArrowLeft" && (k.preventDefault(), C > 0 && F.current[C - 1]?.focus());
   }, B = (k, C) => {
     i(t.filter((I) => I !== k)), setTimeout(() => {
-      C < t.length - 1 ? F.current[C]?.focus() : C > 0 ? F.current[C - 1]?.focus() : x.current?.focus();
+      C < t.length - 1 ? F.current[C]?.focus() : C > 0 ? F.current[C - 1]?.focus() : v.current?.focus();
     }, 0), M(`Removed tag ${k}`);
   }, U = (k) => {
-    d(k.target.value), v(null);
+    d(k.target.value), x(null);
   }, V = () => {
-    x.current && x.current.focus();
+    v.current && v.current.focus();
   }, M = (k) => {
     console.log(`Accessibility announcement: ${k}`);
   };
@@ -1390,7 +1390,7 @@ const mr = ({
                     "input",
                     {
                       id: S,
-                      ref: x,
+                      ref: v,
                       type: "text",
                       className: "flex-grow min-w-[60px] bg-transparent outline-none placeholder:text-sm placeholder:text-secondarytext",
                       value: u,
@@ -1463,7 +1463,7 @@ const mr = ({
   disabled: m = !1,
   className: g
 }) => {
-  const [v, x] = L(""), [A, F] = L(!1), [O, S] = L(-1), $ = N(null), E = N(null), z = N([]), {
+  const [x, v] = L(""), [A, F] = L(!1), [O, S] = L(-1), $ = N(null), E = N(null), z = N([]), {
     triggerRef: _,
     triggerProps: B,
     popoverRef: U,
@@ -1479,7 +1479,7 @@ const mr = ({
       F(!0), b && $.current && setTimeout(() => $.current?.focus(), 10);
     },
     onClose: () => {
-      F(!1), x(""), S(-1);
+      F(!1), v(""), S(-1);
     }
   }), I = N(
     `multiselect-${Math.random().toString(36).substr(2, 9)}`
@@ -1492,7 +1492,7 @@ const mr = ({
   ).current, T = o ? t.map((h) => r.find(
     (D) => l(D) === h || l(D) === l(h)
   )).filter(Boolean) : t, te = T.length > 0, X = b ? r.filter(
-    (h) => s(h).toLowerCase().includes(v.toLowerCase())
+    (h) => s(h).toLowerCase().includes(x.toLowerCase())
   ) : r;
   j(() => {
     z.current = z.current.slice(0, X.length);
@@ -1560,14 +1560,14 @@ const mr = ({
           }
           break;
         case "Backspace":
-          if (b && v === "" && T.length > 0) {
+          if (b && x === "" && T.length > 0) {
             const y = T[T.length - 1];
             de(y);
           }
           break;
       }
   }, Ie = (h) => {
-    x(h.target.value), S(-1);
+    v(h.target.value), S(-1);
   }, je = () => {
     m || (b && $.current && $.current.focus(), k());
   }, Y = (h) => {
@@ -1677,7 +1677,7 @@ const mr = ({
                       id: I,
                       type: "text",
                       className: "flex-grow min-w-[60px] bg-transparent outline-none placeholder:text-sm",
-                      value: v,
+                      value: x,
                       onChange: Ie,
                       onKeyDown: he,
                       placeholder: te ? "" : u,
@@ -1730,7 +1730,7 @@ const mr = ({
         role: "listbox",
         id: ee,
         "aria-labelledby": Z,
-        children: X.length === 0 ? /* @__PURE__ */ f("div", { className: "px-3 py-2 text-sm text-secondarytext", children: v ? "No results found" : "No options available" }) : X.map((h, y) => {
+        children: X.length === 0 ? /* @__PURE__ */ f("div", { className: "px-3 py-2 text-sm text-secondarytext", children: x ? "No results found" : "No options available" }) : X.map((h, y) => {
           const D = ue(h);
           return /* @__PURE__ */ w(
             "div",
@@ -1840,7 +1840,7 @@ const mr = ({
     )
   ] });
 };
-function vr({
+function xr({
   checked: e,
   onCheckedChange: n,
   disabled: r = !1,
@@ -1848,7 +1848,7 @@ function vr({
   required: i,
   className: l = ""
 }) {
-  const s = ve();
+  const s = xe();
   return /* @__PURE__ */ w(
     "button",
     {
@@ -1863,12 +1863,11 @@ function vr({
         r || n(!e);
       },
       className: p(
-        `
-        relative inline-flex h-6 w-11 items-center rounded-full
+        `relative inline-flex h-[28px] w-[48px] items-center rounded-full
         transition-colors duration-200 ease-in-out
-        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
-        focus-visible:ring-blue-500`,
-        e ? "bg-blue-600" : "bg-gray-200",
+        focus-visible:outline-none focus-visible:ring-1
+        focus-visible:ring-base-6`,
+        e ? "bg-brand" : "bg-base-3",
         r ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
         l
       ),
@@ -1877,10 +1876,10 @@ function vr({
           "span",
           {
             className: p(
-              `inline-block h-5 w-5 transform rounded-full bg-white
+              `inline-block h-6 w-6 transform rounded-full
           transition-transform duration-200 ease-in-out
-          shadow-lg`,
-              e ? "translate-x-6" : "translate-x-0.5"
+          shadow`,
+              e ? "bg-brand-text translate-x-[22px]" : "bg-base-1 dark-theme:bg-base-12 translate-x-[2px]"
             )
           }
         ),
@@ -1907,11 +1906,11 @@ const Le = we(null), Kt = ({
   children: e,
   value: n
 }) => /* @__PURE__ */ f(Le.Provider, { value: n, children: e }), Bt = () => {
-  const e = xe(Le);
+  const e = ve(Le);
   if (!e)
     throw new Error("useAliveScope must be wrapped within AliveScopeProvider");
   return e;
-}, xr = ({ children: e }) => {
+}, vr = ({ children: e }) => {
   const [n, r] = L({}), t = N(
     {}
   ), i = N(
@@ -1993,7 +1992,7 @@ const Le = we(null), Kt = ({
     children: ye(t, i, e)
   }
 )), wr = () => {
-  const e = xe(Me);
+  const e = ve(Me);
   if (!e)
     throw new Error("useKeepAlive must be used within KeepAliveProvider");
   return e;
@@ -2011,7 +2010,7 @@ const Le = we(null), Kt = ({
   }, [e, n, r, t]), /* @__PURE__ */ f("div", { ...t, ref: i, children: n });
 };
 export {
-  xr as AliveScope,
+  vr as AliveScope,
   lr as Avatar,
   ir as AvatarsGroup,
   ie as Button,
@@ -2023,14 +2022,14 @@ export {
   gr as FormSubmit,
   br as FormTags,
   mr as FormTextArea,
-  xt as Icon,
+  vt as Icon,
   ze as Input,
   yr as KeepAlive,
   Tt as MultiSelect,
   yt as Portal,
   ur as Separator,
   wt as Spinner,
-  vr as Switch,
+  xr as Switch,
   _t as Tags,
   De as TextArea,
   ut as calculatePopoverPosition,