@arcadeai/design-system 2.0.0 → 2.1.1

package/dist/components/ui/atoms/switch.js

@@ -1,105 +1,105 @@
-import { jsxs as I, jsx as i } from "react/jsx-runtime";
-import * as a from "react";
+import { jsxs as y, jsx as s } from "react/jsx-runtime";
+import * as n from "react";
 import { c as M } from "../../../index-B695uy69.js";
 import { u as x } from "../../../index-5Bhkapwi.js";
-import { c as H } from "../../../index-DFZozV_h.js";
-import { u as j } from "../../../index-437EL2iq.js";
-import { u as z } from "../../../index-BZPx6jYI.js";
+import { c as j } from "../../../index-DFZozV_h.js";
+import { u as z } from "../../../index-437EL2iq.js";
+import { u as H } from "../../../index-BZPx6jYI.js";
 import { u as A } from "../../../index-BGQepRFJ.js";
-import { P as y } from "../../../index-CpDnqHCm.js";
-import { c as C } from "../../../utils-Db4QWi-E.js";
-var m = "Switch", [U, Z] = H(m), [q, L] = U(m), P = a.forwardRef(
-  (e, r) => {
+import { P } from "../../../index-CpDnqHCm.js";
+import { c as g } from "../../../utils-Db4QWi-E.js";
+var m = "Switch", [U, Z] = j(m), [q, L] = U(m), N = n.forwardRef(
+  (r, e) => {
     const {
       __scopeSwitch: t,
-      name: s,
+      name: a,
       checked: o,
       defaultChecked: b,
       required: d,
-      disabled: n,
+      disabled: c,
       value: u = "on",
-      onCheckedChange: w,
-      form: c,
-      ...k
-    } = e, [l, p] = a.useState(null), v = x(r, (h) => p(h)), S = a.useRef(!1), g = l ? c || !!l.closest("form") : !0, [f, B] = j({
+      onCheckedChange: v,
+      form: i,
+      ...w
+    } = r, [l, p] = n.useState(null), k = x(e, (h) => p(h)), S = n.useRef(!1), C = l ? i || !!l.closest("form") : !0, [f, T] = z({
       prop: o,
       defaultProp: b ?? !1,
-      onChange: w,
+      onChange: v,
       caller: m
     });
-    return /* @__PURE__ */ I(q, { scope: t, checked: f, disabled: n, children: [
-      /* @__PURE__ */ i(
-        y.button,
+    return /* @__PURE__ */ y(q, { scope: t, checked: f, disabled: c, children: [
+      /* @__PURE__ */ s(
+        P.button,
         {
           type: "button",
           role: "switch",
           "aria-checked": f,
           "aria-required": d,
-          "data-state": N(f),
-          "data-disabled": n ? "" : void 0,
-          disabled: n,
+          "data-state": B(f),
+          "data-disabled": c ? "" : void 0,
+          disabled: c,
           value: u,
-          ...k,
-          ref: v,
-          onClick: M(e.onClick, (h) => {
-            B((T) => !T), g && (S.current = h.isPropagationStopped(), S.current || h.stopPropagation());
+          ...w,
+          ref: k,
+          onClick: M(r.onClick, (h) => {
+            T((I) => !I), C && (S.current = h.isPropagationStopped(), S.current || h.stopPropagation());
           })
         }
       ),
-      g && /* @__PURE__ */ i(
+      C && /* @__PURE__ */ s(
         _,
         {
           control: l,
           bubbles: !S.current,
-          name: s,
+          name: a,
           value: u,
           checked: f,
           required: d,
-          disabled: n,
-          form: c,
+          disabled: c,
+          form: i,
           style: { transform: "translateX(-100%)" }
         }
       )
     ] });
   }
 );
-P.displayName = m;
-var R = "SwitchThumb", E = a.forwardRef(
-  (e, r) => {
-    const { __scopeSwitch: t, ...s } = e, o = L(R, t);
-    return /* @__PURE__ */ i(
-      y.span,
+N.displayName = m;
+var R = "SwitchThumb", E = n.forwardRef(
+  (r, e) => {
+    const { __scopeSwitch: t, ...a } = r, o = L(R, t);
+    return /* @__PURE__ */ s(
+      P.span,
       {
-        "data-state": N(o.checked),
+        "data-state": B(o.checked),
         "data-disabled": o.disabled ? "" : void 0,
-        ...s,
-        ref: r
+        ...a,
+        ref: e
       }
     );
   }
 );
 E.displayName = R;
-var O = "SwitchBubbleInput", _ = a.forwardRef(
+var O = "SwitchBubbleInput", _ = n.forwardRef(
   ({
-    __scopeSwitch: e,
-    control: r,
+    __scopeSwitch: r,
+    control: e,
     checked: t,
-    bubbles: s = !0,
+    bubbles: a = !0,
     ...o
   }, b) => {
-    const d = a.useRef(null), n = x(d, b), u = z(t), w = A(r);
-    return a.useEffect(() => {
-      const c = d.current;
-      if (!c) return;
-      const k = window.HTMLInputElement.prototype, p = Object.getOwnPropertyDescriptor(
-        k,
+    const d = n.useRef(null), c = x(d, b), u = H(t), v = A(e);
+    return n.useEffect(() => {
+      const i = d.current;
+      if (!i) return;
+      const w = window.HTMLInputElement.prototype, p = Object.getOwnPropertyDescriptor(
+        w,
         "checked"
       ).set;
       if (u !== t && p) {
-        const v = new Event("click", { bubbles: s });
-        p.call(c, t), c.dispatchEvent(v);
+        const k = new Event("click", { bubbles: a });
+        p.call(i, t), i.dispatchEvent(k);
       }
-    }, [u, t, s]), /* @__PURE__ */ i(
+    }, [u, t, a]), /* @__PURE__ */ s(
       "input",
       {
         type: "checkbox",
@@ -107,10 +107,10 @@ var O = "SwitchBubbleInput", _ = a.forwardRef(
         defaultChecked: t,
         ...o,
         tabIndex: -1,
-        ref: n,
+        ref: c,
         style: {
           ...o.style,
-          ...w,
+          ...v,
           position: "absolute",
           pointerEvents: "none",
           opacity: 0,
@@ -121,32 +121,57 @@ var O = "SwitchBubbleInput", _ = a.forwardRef(
   }
 );
 _.displayName = O;
-function N(e) {
-  return e ? "checked" : "unchecked";
+function B(r) {
+  return r ? "checked" : "unchecked";
 }
-var D = P, F = E;
+var D = N, F = E;
 function ee({
-  className: e,
-  ...r
+  className: r,
+  loading: e = !1,
+  disabled: t,
+  loadingIndicatorClassName: a,
+  ...o
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ y(
     D,
     {
-      className: C(
-        "peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
-        e
+      "aria-busy": e || void 0,
+      className: g(
+        "peer relative inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80",
+        r
       ),
+      "data-loading": e || void 0,
       "data-slot": "switch",
-      ...r,
-      children: /* @__PURE__ */ i(
-        F,
-        {
-          className: C(
-            "pointer-events-none block size-4 rounded-full bg-background ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground"
-          ),
-          "data-slot": "switch-thumb"
-        }
-      )
+      disabled: t || e,
+      ...o,
+      children: [
+        /* @__PURE__ */ s(
+          F,
+          {
+            className: g(
+              "pointer-events-none block size-4 rounded-full bg-background ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground",
+              e && "opacity-0"
+            ),
+            "data-slot": "switch-thumb"
+          }
+        ),
+        e && /* @__PURE__ */ s(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+            children: /* @__PURE__ */ s(
+              "span",
+              {
+                className: g(
+                  "size-3 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent",
+                  a
+                )
+              }
+            )
+          }
+        )
+      ]
     }
   );
 }