@spark-ui/components 13.0.6 → 13.1.0

package/dist/checkbox/index.mjs

@@ -1,42 +1,254 @@
-import {
-  Label
-} from "../chunk-HLXYG643.mjs";
-import {
-  Icon
-} from "../chunk-UMUMFMFB.mjs";
-import "../chunk-KEGAAGJW.mjs";
-import "../chunk-6QCEPQ3U.mjs";
-
-// src/checkbox/Checkbox.tsx
-import { useFormFieldControl } from "@spark-ui/components/form-field";
-import { useMergeRefs } from "@spark-ui/hooks/use-merge-refs";
-import { cx } from "class-variance-authority";
-import { useId, useMemo, useRef } from "react";
-
-// src/checkbox/CheckboxGroupContext.tsx
-import { createContext, useContext } from "react";
-var CheckboxGroupContext = createContext({});
-var useCheckboxGroup = () => {
-  const context = useContext(CheckboxGroupContext);
-  return context;
-};
-
-// src/checkbox/CheckboxInput.tsx
-import { Check } from "@spark-ui/icons/Check";
-import { Minus } from "@spark-ui/icons/Minus";
-import { Checkbox as Checkbox2 } from "radix-ui";
-
-// src/checkbox/CheckboxIndicator.tsx
-import { Checkbox } from "radix-ui";
-import { jsx } from "react/jsx-runtime";
-var CheckboxIndicatorPrimitive = Checkbox.CheckboxIndicator;
-var CheckboxIndicator = (props) => /* @__PURE__ */ jsx(CheckboxIndicatorPrimitive, { className: "flex size-full items-center justify-center", ...props });
-CheckboxIndicator.displayName = "CheckboxIndicator";
-
-// src/checkbox/CheckboxInput.styles.ts
-import { makeVariants } from "@spark-ui/internal-utils";
-import { cva } from "class-variance-authority";
-var checkboxInputStyles = cva(
+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(
   [
     "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",
@@ -49,7 +261,7 @@ var checkboxInputStyles = cva(
       /**
        * Color scheme of the checkbox.
        */
-      intent: makeVariants({
+      intent: qe({
         main: [
           "text-on-main",
           "hover:ring-main-container",
@@ -119,34 +331,26 @@ var checkboxInputStyles = cva(
       intent: "basic"
     }
   }
-);
-
-// src/checkbox/CheckboxInput.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var CheckboxPrimitive = Checkbox2.Checkbox;
-var CheckboxInput = ({
-  className,
-  icon = /* @__PURE__ */ jsx2(Check, {}),
-  indeterminateIcon = /* @__PURE__ */ jsx2(Minus, {}),
-  intent,
-  checked,
-  ref,
-  ...others
-}) => /* @__PURE__ */ jsx2(
-  CheckboxPrimitive,
+), 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,
   {
-    ref,
-    className: checkboxInputStyles({ intent, className }),
-    checked,
-    ...others,
-    children: /* @__PURE__ */ jsx2(CheckboxIndicator, { children: /* @__PURE__ */ jsx2(Icon, { size: "sm", children: checked === "indeterminate" ? indeterminateIcon : icon }) })
+    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 }) })
   }
 );
-CheckboxInput.displayName = "CheckboxInput";
-
-// src/checkbox/CheckboxLabel.styles.ts
-import { cva as cva2 } from "class-variance-authority";
-var labelStyles = cva2("grow", {
+oe.displayName = "CheckboxInput";
+const $e = G("grow", {
   variants: {
     disabled: {
       true: ["text-neutral/dim-2", "cursor-not-allowed"],
@@ -154,122 +358,80 @@ var labelStyles = cva2("grow", {
     }
   },
   defaultVariants: {
-    disabled: false
+    disabled: !1
   }
-});
-
-// src/checkbox/CheckboxLabel.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var CheckboxLabel = ({ disabled, ...others }) => /* @__PURE__ */ jsx3(Label, { className: labelStyles({ disabled }), ...others });
-CheckboxLabel.displayName = "CheckboxLabel";
-
-// src/checkbox/Checkbox.tsx
-import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
-var ID_PREFIX = ":checkbox";
-var Checkbox3 = ({
-  id: idProp,
-  className,
-  intent: intentProp,
-  checked: checkedProp,
-  value,
-  disabled,
-  reverse = false,
-  onCheckedChange,
-  children,
-  ref: forwardedRef,
-  ...others
+}), 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
 }) => {
-  const checkboxId = `${ID_PREFIX}-${useId()}`;
-  const innerId = idProp || checkboxId;
-  const innerLabelId = `${ID_PREFIX}-${useId()}`;
-  const field = useFormFieldControl();
-  const group = useCheckboxGroup();
-  const rootRef = useRef(null);
-  const ref = useMergeRefs(forwardedRef, rootRef);
-  const getCheckboxAttributes = ({
-    fieldState,
-    groupState,
-    checkboxIntent
+  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 name2 = fieldState.name ?? groupState.name;
-    const isRequired2 = fieldState.isRequired ?? groupState.isRequired;
-    const state = fieldState.state ?? groupState.state;
-    const isInvalid2 = fieldState.isInvalid ?? groupState.isInvalid;
-    const isFieldEnclosed = fieldState.id !== groupState.id;
-    const id2 = isFieldEnclosed ? fieldState.id : void 0;
-    const description2 = isFieldEnclosed ? fieldState.description : void 0;
-    const intent2 = state ?? checkboxIntent ?? groupState.intent;
-    return { name: name2, isRequired: isRequired2, isInvalid: isInvalid2, id: id2, description: description2, intent: intent2 };
-  };
-  const checked = value ? group.value?.includes(value) : checkedProp;
-  const handleCheckedChange = (isChecked) => {
-    onCheckedChange?.(isChecked);
-    const rootRefValue = rootRef.current?.value;
-    if (rootRefValue && group.onCheckedChange) {
-      group.onCheckedChange(isChecked, rootRefValue);
-    }
-  };
-  const {
-    id,
-    name,
-    isInvalid,
-    description,
-    intent,
-    isRequired: isRequiredAttr
-  } = getCheckboxAttributes({
-    fieldState: field,
-    groupState: group,
-    checkboxIntent: intentProp
-  });
-  const isRequired = useMemo(() => {
-    if (!group) return isRequiredAttr;
-    return isRequiredAttr ? !group.value?.length : false;
-  }, [group, isRequiredAttr]);
-  const checkboxLabel = children && /* @__PURE__ */ jsx4(CheckboxLabel, { disabled, htmlFor: id || innerId, id: innerLabelId, children });
-  const checkboxInput = /* @__PURE__ */ jsx4(
-    CheckboxInput,
+    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);
+  }, {
+    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,
     {
-      ref,
-      id: id || innerId,
-      name,
-      value,
-      intent,
-      checked,
-      disabled,
-      required: isRequired,
-      "aria-describedby": description,
-      "aria-invalid": isInvalid,
-      onCheckedChange: handleCheckedChange,
-      "aria-labelledby": children ? innerLabelId : field.labelId,
-      ...others
+      ref: n,
+      id: E || h,
+      name: _,
+      value: r,
+      intent: w,
+      checked: R,
+      disabled: t,
+      required: L,
+      "aria-describedby": B,
+      "aria-invalid": q,
+      onCheckedChange: y,
+      "aria-labelledby": u ? C : m.labelId,
+      ...k
     }
-  );
-  const content = group.reverse || reverse ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    checkboxLabel,
-    checkboxInput
-  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-    checkboxInput,
-    checkboxLabel
+  ), se = c.reverse || d ? /* @__PURE__ */ z(A, { children: [
+    F,
+    $
+  ] }) : /* @__PURE__ */ z(A, { children: [
+    $,
+    F
   ] });
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ a(
     "div",
     {
       "data-spark-component": "checkbox",
-      className: cx("gap-md text-body-1 relative flex items-start", className),
-      children: content
+      className: ke("gap-md text-body-1 relative flex items-start", o),
+      children: se
     }
   );
 };
-Checkbox3.displayName = "Checkbox";
-
-// src/checkbox/CheckboxGroup.tsx
-import { useFormFieldControl as useFormFieldControl2 } from "@spark-ui/components/form-field";
-import { useCombinedState } from "@spark-ui/hooks/use-combined-state";
-import { useEffect, useMemo as useMemo2, useRef as useRef2 } from "react";
-
-// src/checkbox/CheckboxGroup.styles.ts
-import { cva as cva3 } from "class-variance-authority";
-var checkboxGroupStyles = cva3(["flex"], {
+je.displayName = "Checkbox";
+const De = G(["flex"], {
   variants: {
     /**
      * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.
@@ -279,69 +441,52 @@ var checkboxGroupStyles = cva3(["flex"], {
       horizontal: ["gap-xl"]
     }
   }
-});
-
-// src/checkbox/CheckboxGroup.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
-var CheckboxGroup = ({
-  name: nameProp,
-  value: valueProp,
-  defaultValue,
-  className,
-  intent,
-  orientation = "vertical",
-  onCheckedChange: onCheckedChangeProp,
-  reverse = false,
-  children,
-  ref,
-  ...others
+}), Ve = ({
+  name: e,
+  value: o,
+  defaultValue: s,
+  className: b,
+  intent: r,
+  orientation: t = "vertical",
+  onCheckedChange: d,
+  reverse: p = !1,
+  children: u,
+  ref: f,
+  ...k
 }) => {
-  const [value, setValue] = useCombinedState(valueProp, defaultValue);
-  const field = useFormFieldControl2();
-  const onCheckedChangeRef = useRef2(onCheckedChangeProp);
-  const { id, labelId, description, state, isInvalid, isRequired } = field;
-  const name = nameProp ?? field.name;
-  const current = useMemo2(() => {
-    const handleCheckedChange = (checked, changed) => {
-      const values = value || [];
-      const modified = checked ? [...values, changed] : values.filter((val) => val !== changed);
-      setValue(modified);
-      if (onCheckedChangeRef.current) {
-        onCheckedChangeRef.current(modified);
-      }
-    };
-    return {
-      id,
-      name,
-      value,
-      intent,
-      state,
-      isInvalid,
-      description,
-      isRequired,
-      reverse,
-      onCheckedChange: handleCheckedChange
-    };
-  }, [id, name, value, intent, state, isInvalid, description, isRequired, setValue, reverse]);
-  useEffect(() => {
-    onCheckedChangeRef.current = onCheckedChangeProp;
-  }, [onCheckedChangeProp]);
-  return /* @__PURE__ */ jsx5(CheckboxGroupContext.Provider, { value: current, children: /* @__PURE__ */ jsx5(
+  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,
+    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);
+    }
+  }), [c, E, l, r, i, R, n, y, h, p]);
+  return ve(() => {
+    m.current = d;
+  }, [d]), /* @__PURE__ */ a(ae.Provider, { value: _, children: /* @__PURE__ */ a(
     "div",
     {
-      ref,
-      className: checkboxGroupStyles({ className, orientation }),
+      ref: f,
+      className: De({ className: b, orientation: t }),
       role: "group",
-      "aria-labelledby": labelId,
-      "aria-describedby": description,
-      ...others,
-      children
+      "aria-labelledby": v,
+      "aria-describedby": n,
+      ...k,
+      children: u
     }
   ) });
 };
-CheckboxGroup.displayName = "CheckboxGroup";
+Ve.displayName = "CheckboxGroup";
 export {
-  Checkbox3 as Checkbox,
-  CheckboxGroup
+  je as Checkbox,
+  Ve as CheckboxGroup
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map