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",
    "focus-visible:u-outline",
    "hover:ring-4 hover:cursor-pointer",
    "u-shadow-border-transition"
  ],
  {
    variants: {
      /**
       * Color scheme of the checkbox.
       */
      intent: qe({
        main: [
          "text-on-main",
          "hover:ring-main-container",
          "data-[state=unchecked]:border-outline",
          "data-[state=indeterminate]:border-main data-[state=indeterminate]:bg-main",
          "data-[state=checked]:border-main data-[state=checked]:bg-main"
        ],
        support: [
          "text-on-support",
          "hover:ring-support-container",
          "data-[state=unchecked]:border-outline",
          "data-[state=indeterminate]:border-support data-[state=indeterminate]:bg-support",
          "data-[state=checked]:border-support data-[state=checked]:bg-support"
        ],
        accent: [
          "text-on-accent",
          "hover:ring-accent-container",
          "data-[state=unchecked]:border-outline",
          "data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent",
          "data-[state=checked]:border-accent data-[state=checked]:bg-accent"
        ],
        basic: [
          "text-on-basic",
          "hover:ring-basic-container",
          "data-[state=unchecked]:border-outline",
          "data-[state=indeterminate]:border-basic data-[state=indeterminate]:bg-basic",
          "data-[state=checked]:border-basic data-[state=checked]:bg-basic"
        ],
        success: [
          "text-on-success",
          "hover:ring-success-container",
          "data-[state=unchecked]:border-success",
          "data-[state=indeterminate]:border-success data-[state=indeterminate]:bg-success",
          "data-[state=checked]:border-success data-[state=checked]:bg-success"
        ],
        alert: [
          "text-on-alert",
          "hover:ring-alert-container",
          "data-[state=unchecked]:border-alert",
          "data-[state=indeterminate]:border-alert data-[state=indeterminate]:bg-alert",
          "data-[state=checked]:border-alert data-[state=checked]:bg-alert"
        ],
        error: [
          "text-on-error",
          "hover:ring-error-container",
          "data-[state=unchecked]:border-error",
          "data-[state=indeterminate]:border-error data-[state=indeterminate]:bg-error",
          "data-[state=checked]:border-error data-[state=checked]:bg-error"
        ],
        info: [
          "text-on-info",
          "hover:ring-info-container",
          "data-[state=unchecked]:border-info",
          "data-[state=indeterminate]:border-info data-[state=indeterminate]:bg-info",
          "data-[state=checked]:border-info data-[state=checked]:bg-info"
        ],
        neutral: [
          "text-on-neutral",
          "hover:ring-neutral-container",
          "data-[state=unchecked]:border-outline",
          "data-[state=indeterminate]:border-neutral data-[state=indeterminate]:bg-neutral",
          "data-[state=checked]:border-neutral data-[state=checked]:bg-neutral"
        ]
      })
    },
    defaultVariants: {
      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,
  {
    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 }) })
  }
);
oe.displayName = "CheckboxInput";
const $e = G("grow", {
  variants: {
    disabled: {
      true: ["text-neutral/dim-2", "cursor-not-allowed"],
      false: ["cursor-pointer"]
    }
  },
  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
}) => {
  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 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: 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
    }
  ), se = c.reverse || d ? /* @__PURE__ */ z(A, { children: [
    F,
    $
  ] }) : /* @__PURE__ */ z(A, { children: [
    $,
    F
  ] });
  return /* @__PURE__ */ a(
    "div",
    {
      "data-spark-component": "checkbox",
      className: ke("gap-md text-body-1 relative flex items-start", o),
      children: se
    }
  );
};
je.displayName = "Checkbox";
const De = G(["flex"], {
  variants: {
    /**
     * Prop to set the orientation of the checkbox group which could be `vertical` or `horizontal`.
     */
    orientation: {
      vertical: ["flex-col", "gap-lg"],
      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
}) => {
  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: f,
      className: De({ className: b, orientation: t }),
      role: "group",
      "aria-labelledby": v,
      "aria-describedby": n,
      ...k,
      children: u
    }
  ) });
};
Ve.displayName = "CheckboxGroup";
export {
  je as Checkbox,
  Ve as CheckboxGroup
};
//# sourceMappingURL=index.mjs.map
