@spark-ui/components 14.0.0-beta.1 → 14.0.0

package/dist/checkbox/index.mjs

@@ -1,254 +1,18 @@
-import { jsx as a, jsxs as z, Fragment as A } from "react/jsx-runtime";
-import { useFormFieldControl as H } from "../form-field/index.mjs";
-import { useMergeRefs as fe } from "@spark-ui/hooks/use-merge-refs";
-import { c as G, a as ke } from "../index-BmAFn37q.mjs";
-import * as x from "react";
-import { createContext as Ce, useContext as xe, useId as D, useRef as X, useMemo as K, useEffect as ve } from "react";
-import { Check as ge } from "@spark-ui/icons/Check";
-import { Minus as Ie } from "@spark-ui/icons/Minus";
-import { I as Re } from "../Icon-D1RueiPY.mjs";
-import { u as U } from "../index-DhGWNzsz.mjs";
-import { c as ye } from "../index-DFZozV_h.mjs";
-import { u as Ee, c as V } from "../index-DlIFg0Eu.mjs";
-import { u as Pe } from "../index-BZPx6jYI.mjs";
-import { u as Ne } from "../index-C1qb0595.mjs";
-import { P as _e } from "../index-BZAtNKwE.mjs";
-import { P as S } from "../index-MSR-vgWR.mjs";
-import { makeVariants as qe } from "@spark-ui/internal-utils";
-import { L as we } from "../index-C34GgsKQ.mjs";
-import { useCombinedState as Le } from "@spark-ui/hooks/use-combined-state";
-var M = "Checkbox", [Fe] = ye(M), [Me, T] = Fe(M);
-function Be(e) {
-  const {
-    __scopeCheckbox: o,
-    checked: s,
-    children: b,
-    defaultChecked: r,
-    disabled: t,
-    form: d,
-    name: p,
-    onCheckedChange: u,
-    required: f,
-    value: k = "on",
-    // @ts-expect-error
-    internal_do_not_use_render: l
-  } = e, [h, C] = Ee({
-    prop: s,
-    defaultProp: r ?? !1,
-    onChange: u,
-    caller: M
-  }), [m, c] = x.useState(null), [v, n] = x.useState(null), i = x.useRef(!1), R = m ? !!d || !!m.closest("form") : (
-    // We set this to true by default so that events bubble to forms without JS (SSR)
-    !0
-  ), y = {
-    checked: h,
-    disabled: t,
-    setChecked: C,
-    control: m,
-    setControl: c,
-    name: p,
-    form: d,
-    value: k,
-    hasConsumerStoppedPropagationRef: i,
-    required: f,
-    defaultChecked: P(r) ? !1 : r,
-    isFormControl: R,
-    bubbleInput: v,
-    setBubbleInput: n
-  };
-  return /* @__PURE__ */ a(
-    Me,
-    {
-      scope: o,
-      ...y,
-      children: ze(l) ? l(y) : b
-    }
-  );
-}
-var J = "CheckboxTrigger", Q = x.forwardRef(
-  ({ __scopeCheckbox: e, onKeyDown: o, onClick: s, ...b }, r) => {
-    const {
-      control: t,
-      value: d,
-      disabled: p,
-      checked: u,
-      required: f,
-      setControl: k,
-      setChecked: l,
-      hasConsumerStoppedPropagationRef: h,
-      isFormControl: C,
-      bubbleInput: m
-    } = T(J, e), c = U(r, k), v = x.useRef(u);
-    return x.useEffect(() => {
-      const n = t?.form;
-      if (n) {
-        const i = () => l(v.current);
-        return n.addEventListener("reset", i), () => n.removeEventListener("reset", i);
-      }
-    }, [t, l]), /* @__PURE__ */ a(
-      S.button,
-      {
-        type: "button",
-        role: "checkbox",
-        "aria-checked": P(u) ? "mixed" : u,
-        "aria-required": f,
-        "data-state": re(u),
-        "data-disabled": p ? "" : void 0,
-        disabled: p,
-        value: d,
-        ...b,
-        ref: c,
-        onKeyDown: V(o, (n) => {
-          n.key === "Enter" && n.preventDefault();
-        }),
-        onClick: V(s, (n) => {
-          l((i) => P(i) ? !0 : !i), m && C && (h.current = n.isPropagationStopped(), h.current || n.stopPropagation());
-        })
-      }
-    );
-  }
-);
-Q.displayName = J;
-var W = x.forwardRef(
-  (e, o) => {
-    const {
-      __scopeCheckbox: s,
-      name: b,
-      checked: r,
-      defaultChecked: t,
-      required: d,
-      disabled: p,
-      value: u,
-      onCheckedChange: f,
-      form: k,
-      ...l
-    } = e;
-    return /* @__PURE__ */ a(
-      Be,
-      {
-        __scopeCheckbox: s,
-        checked: r,
-        defaultChecked: t,
-        disabled: p,
-        required: d,
-        onCheckedChange: f,
-        name: b,
-        form: k,
-        value: u,
-        internal_do_not_use_render: ({ isFormControl: h }) => /* @__PURE__ */ z(A, { children: [
-          /* @__PURE__ */ a(
-            Q,
-            {
-              ...l,
-              ref: o,
-              __scopeCheckbox: s
-            }
-          ),
-          h && /* @__PURE__ */ a(
-            te,
-            {
-              __scopeCheckbox: s
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
-W.displayName = M;
-var Y = "CheckboxIndicator", Z = x.forwardRef(
-  (e, o) => {
-    const { __scopeCheckbox: s, forceMount: b, ...r } = e, t = T(Y, s);
-    return /* @__PURE__ */ a(
-      _e,
-      {
-        present: b || P(t.checked) || t.checked === !0,
-        children: /* @__PURE__ */ a(
-          S.span,
-          {
-            "data-state": re(t.checked),
-            "data-disabled": t.disabled ? "" : void 0,
-            ...r,
-            ref: o,
-            style: { pointerEvents: "none", ...e.style }
-          }
-        )
-      }
-    );
-  }
-);
-Z.displayName = Y;
-var ee = "CheckboxBubbleInput", te = x.forwardRef(
-  ({ __scopeCheckbox: e, ...o }, s) => {
-    const {
-      control: b,
-      hasConsumerStoppedPropagationRef: r,
-      checked: t,
-      defaultChecked: d,
-      required: p,
-      disabled: u,
-      name: f,
-      value: k,
-      form: l,
-      bubbleInput: h,
-      setBubbleInput: C
-    } = T(ee, e), m = U(s, C), c = Pe(t), v = Ne(b);
-    x.useEffect(() => {
-      const i = h;
-      if (!i) return;
-      const R = window.HTMLInputElement.prototype, E = Object.getOwnPropertyDescriptor(
-        R,
-        "checked"
-      ).set, _ = !r.current;
-      if (c !== t && E) {
-        const q = new Event("click", { bubbles: _ });
-        i.indeterminate = P(t), E.call(i, P(t) ? !1 : t), i.dispatchEvent(q);
-      }
-    }, [h, c, t, r]);
-    const n = x.useRef(P(t) ? !1 : t);
-    return /* @__PURE__ */ a(
-      S.input,
-      {
-        type: "checkbox",
-        "aria-hidden": !0,
-        defaultChecked: d ?? n.current,
-        required: p,
-        disabled: u,
-        name: f,
-        value: k,
-        form: l,
-        ...o,
-        tabIndex: -1,
-        ref: m,
-        style: {
-          ...o.style,
-          ...v,
-          position: "absolute",
-          pointerEvents: "none",
-          opacity: 0,
-          margin: 0,
-          // We transform because the input is absolutely positioned but we have
-          // rendered it **after** the button. This pulls it back to sit on top
-          // of the button.
-          transform: "translateX(-100%)"
-        }
-      }
-    );
-  }
-);
-te.displayName = ee;
-function ze(e) {
-  return typeof e == "function";
-}
-function P(e) {
-  return e === "indeterminate";
-}
-function re(e) {
-  return P(e) ? "indeterminate" : e ? "checked" : "unchecked";
-}
-const ae = Ce({}), Ae = () => xe(ae), Ge = Z, ne = (e) => /* @__PURE__ */ a(Ge, { className: "flex size-full items-center justify-center", ...e });
-ne.displayName = "CheckboxIndicator";
-const Se = G(
+import { jsx as e, jsxs as E, Fragment as M } from "react/jsx-runtime";
+import { useFormFieldControl as D } from "@spark-ui/components/form-field";
+import { useMergeRefs as ae } from "@spark-ui/hooks/use-merge-refs";
+import { cva as V, cx as re } from "class-variance-authority";
+import { createContext as ne, useContext as oe, useId as A, useRef as X, useMemo as _, useEffect as ce } from "react";
+import { Check as ie } from "@spark-ui/icons/Check";
+import { Minus as se } from "@spark-ui/icons/Minus";
+import { Checkbox as B } from "radix-ui";
+import { I as de } from "../Icon-Ck-dhfLd.mjs";
+import { makeVariants as le } from "@spark-ui/internal-utils";
+import { Label as be } from "../label/index.mjs";
+import { useCombinedState as ue } from "@spark-ui/hooks/use-combined-state";
+const H = ne({}), he = () => oe(H), me = B.CheckboxIndicator, J = (a) => /* @__PURE__ */ e(me, { className: "flex size-full items-center justify-center", ...a });
+J.displayName = "CheckboxIndicator";
+const ke = V(
   [
     "size-sz-24 shrink-0 items-center justify-center rounded-sm border-md bg-transparent",
     "disabled:cursor-not-allowed disabled:opacity-dim-3 disabled:hover:ring-0",
@@ -261,7 +25,7 @@ const Se = G(
       /**
        * Color scheme of the checkbox.
        */
-      intent: qe({
+      intent: le({
         main: [
           "text-on-main",
           "hover:ring-main-container",
@@ -331,26 +95,26 @@ const Se = G(
       intent: "basic"
     }
   }
-), Te = W, oe = ({
-  className: e,
-  icon: o = /* @__PURE__ */ a(ge, {}),
-  indeterminateIcon: s = /* @__PURE__ */ a(Ie, {}),
-  intent: b,
-  checked: r,
-  ref: t,
-  ...d
-}) => /* @__PURE__ */ a(
-  Te,
+), xe = B.Checkbox, K = ({
+  className: a,
+  icon: c = /* @__PURE__ */ e(ie, {}),
+  indeterminateIcon: b = /* @__PURE__ */ e(se, {}),
+  intent: u,
+  checked: n,
+  ref: s,
+  ...i
+}) => /* @__PURE__ */ e(
+  xe,
   {
-    ref: t,
-    className: Se({ intent: b, className: e }),
-    checked: r,
-    ...d,
-    children: /* @__PURE__ */ a(ne, { children: /* @__PURE__ */ a(Re, { size: "sm", children: r === "indeterminate" ? s : o }) })
+    ref: s,
+    className: ke({ intent: u, className: a }),
+    checked: n,
+    ...i,
+    children: /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(de, { size: "sm", children: n === "indeterminate" ? b : c }) })
   }
 );
-oe.displayName = "CheckboxInput";
-const $e = G("grow", {
+K.displayName = "CheckboxInput";
+const pe = V("grow", {
   variants: {
     disabled: {
       true: ["text-neutral/dim-2", "cursor-not-allowed"],
@@ -360,78 +124,78 @@ const $e = G("grow", {
   defaultVariants: {
     disabled: !1
   }
-}), ce = ({ disabled: e, ...o }) => /* @__PURE__ */ a(we, { className: $e({ disabled: e }), ...o });
-ce.displayName = "CheckboxLabel";
-const O = ":checkbox", je = ({
-  id: e,
-  className: o,
-  intent: s,
-  checked: b,
-  value: r,
-  disabled: t,
-  reverse: d = !1,
-  onCheckedChange: p,
-  children: u,
-  ref: f,
-  ...k
+}), O = ({ disabled: a, ...c }) => /* @__PURE__ */ e(be, { className: pe({ disabled: a }), ...c });
+O.displayName = "CheckboxLabel";
+const P = ":checkbox", fe = ({
+  id: a,
+  className: c,
+  intent: b,
+  checked: u,
+  value: n,
+  disabled: s,
+  reverse: i = !1,
+  onCheckedChange: g,
+  children: h,
+  ref: F,
+  ...z
 }) => {
-  const l = `${O}-${D()}`, h = e || l, C = `${O}-${D()}`, m = H(), c = Ae(), v = X(null), n = fe(f, v), i = ({
-    fieldState: g,
-    groupState: I,
-    checkboxIntent: ie
+  const m = `${P}-${A()}`, k = a || m, x = `${P}-${A()}`, d = D(), t = he(), v = X(null), p = ae(F, v), C = ({
+    fieldState: r,
+    groupState: o,
+    checkboxIntent: T
   }) => {
-    const de = g.name ?? I.name, ue = g.isRequired ?? I.isRequired, le = g.state ?? I.state, be = g.isInvalid ?? I.isInvalid, j = g.id !== I.id, he = j ? g.id : void 0, me = j ? g.description : void 0, pe = le ?? ie ?? I.intent;
-    return { name: de, isRequired: ue, isInvalid: be, id: he, description: me, intent: pe };
-  }, R = r ? c.value?.includes(r) : b, y = (g) => {
-    p?.(g);
-    const I = v.current?.value;
-    I && c.onCheckedChange && c.onCheckedChange(g, I);
+    const U = r.name ?? o.name, W = r.isRequired ?? o.isRequired, Y = r.state ?? o.state, Z = r.isInvalid ?? o.isInvalid, w = r.id !== o.id, S = w ? r.id : void 0, ee = w ? r.description : void 0, te = Y ?? T ?? o.intent;
+    return { name: U, isRequired: W, isInvalid: Z, id: S, description: ee, intent: te };
+  }, I = n ? t.value?.includes(n) : u, y = (r) => {
+    g?.(r);
+    const o = v.current?.value;
+    o && t.onCheckedChange && t.onCheckedChange(r, o);
   }, {
-    id: E,
-    name: _,
-    isInvalid: q,
-    description: B,
-    intent: w,
-    isRequired: N
-  } = i({
-    fieldState: m,
-    groupState: c,
-    checkboxIntent: s
-  }), L = K(() => c ? N ? !c.value?.length : !1 : N, [c, N]), F = u && /* @__PURE__ */ a(ce, { disabled: t, htmlFor: E || h, id: C, children: u }), $ = /* @__PURE__ */ a(
-    oe,
+    id: f,
+    name: G,
+    isInvalid: $,
+    description: L,
+    intent: R,
+    isRequired: l
+  } = C({
+    fieldState: d,
+    groupState: t,
+    checkboxIntent: b
+  }), N = _(() => t ? l ? !t.value?.length : !1 : l, [t, l]), q = h && /* @__PURE__ */ e(O, { disabled: s, htmlFor: f || k, id: x, children: h }), j = /* @__PURE__ */ e(
+    K,
     {
-      ref: n,
-      id: E || h,
-      name: _,
-      value: r,
-      intent: w,
-      checked: R,
-      disabled: t,
-      required: L,
-      "aria-describedby": B,
-      "aria-invalid": q,
+      ref: p,
+      id: f || k,
+      name: G,
+      value: n,
+      intent: R,
+      checked: I,
+      disabled: s,
+      required: N,
+      "aria-describedby": L,
+      "aria-invalid": $,
       onCheckedChange: y,
-      "aria-labelledby": u ? C : m.labelId,
-      ...k
+      "aria-labelledby": h ? x : d.labelId,
+      ...z
     }
-  ), se = c.reverse || d ? /* @__PURE__ */ z(A, { children: [
-    F,
-    $
-  ] }) : /* @__PURE__ */ z(A, { children: [
-    $,
-    F
+  ), Q = t.reverse || i ? /* @__PURE__ */ E(M, { children: [
+    q,
+    j
+  ] }) : /* @__PURE__ */ E(M, { children: [
+    j,
+    q
   ] });
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ e(
     "div",
     {
       "data-spark-component": "checkbox",
-      className: ke("gap-md text-body-1 relative flex items-start", o),
-      children: se
+      className: re("gap-md text-body-1 relative flex items-start", c),
+      children: Q
     }
   );
 };
-je.displayName = "Checkbox";
-const De = G(["flex"], {
+fe.displayName = "Checkbox";
+const ge = V(["flex"], {
   variants: {
     /**
      * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.
@@ -441,52 +205,52 @@ const De = G(["flex"], {
       horizontal: ["gap-xl"]
     }
   }
-}), Ve = ({
-  name: e,
-  value: o,
-  defaultValue: s,
-  className: b,
-  intent: r,
-  orientation: t = "vertical",
-  onCheckedChange: d,
-  reverse: p = !1,
-  children: u,
-  ref: f,
-  ...k
+}), ve = ({
+  name: a,
+  value: c,
+  defaultValue: b,
+  className: u,
+  intent: n,
+  orientation: s = "vertical",
+  onCheckedChange: i,
+  reverse: g = !1,
+  children: h,
+  ref: F,
+  ...z
 }) => {
-  const [l, h] = Le(o, s), C = H(), m = X(d), { id: c, labelId: v, description: n, state: i, isInvalid: R, isRequired: y } = C, E = e ?? C.name, _ = K(() => ({
-    id: c,
-    name: E,
-    value: l,
-    intent: r,
-    state: i,
-    isInvalid: R,
-    description: n,
+  const [m, k] = ue(c, b), x = D(), d = X(i), { id: t, labelId: v, description: p, state: C, isInvalid: I, isRequired: y } = x, f = a ?? x.name, G = _(() => ({
+    id: t,
+    name: f,
+    value: m,
+    intent: n,
+    state: C,
+    isInvalid: I,
+    description: p,
     isRequired: y,
-    reverse: p,
-    onCheckedChange: (B, w) => {
-      const N = l || [], L = B ? [...N, w] : N.filter((F) => F !== w);
-      h(L), m.current && m.current(L);
+    reverse: g,
+    onCheckedChange: (L, R) => {
+      const l = m || [], N = L ? [...l, R] : l.filter((q) => q !== R);
+      k(N), d.current && d.current(N);
     }
-  }), [c, E, l, r, i, R, n, y, h, p]);
-  return ve(() => {
-    m.current = d;
-  }, [d]), /* @__PURE__ */ a(ae.Provider, { value: _, children: /* @__PURE__ */ a(
+  }), [t, f, m, n, C, I, p, y, k, g]);
+  return ce(() => {
+    d.current = i;
+  }, [i]), /* @__PURE__ */ e(H.Provider, { value: G, children: /* @__PURE__ */ e(
     "div",
     {
-      ref: f,
-      className: De({ className: b, orientation: t }),
+      ref: F,
+      className: ge({ className: u, orientation: s }),
       role: "group",
       "aria-labelledby": v,
-      "aria-describedby": n,
-      ...k,
-      children: u
+      "aria-describedby": p,
+      ...z,
+      children: h
     }
   ) });
 };
-Ve.displayName = "CheckboxGroup";
+ve.displayName = "CheckboxGroup";
 export {
-  je as Checkbox,
-  Ve as CheckboxGroup
+  fe as Checkbox,
+  ve as CheckboxGroup
 };
 //# sourceMappingURL=index.mjs.map