import { jsxs as x, jsx as r, Fragment as R } from "react/jsx-runtime";
import { useFormFieldControl as F } from "../form-field/index.mjs";
import { c as g, a as A } from "../index-BmAFn37q.mjs";
import * as b from "react";
import { useId as E } from "react";
import { useCombinedState as U } from "@spark-ui/hooks/use-combined-state";
import { Check as O } from "@spark-ui/icons/Check";
import { Close as W } from "@spark-ui/icons/Close";
import { a as _ } from "../Slot-C98rL4yy.mjs";
import { makeVariants as C, tw as N } from "@spark-ui/internal-utils";
import { u as X, c as G } from "../index-DlIFg0Eu.mjs";
import { u as L } from "../index-DhGWNzsz.mjs";
import { c as J } from "../index-DFZozV_h.mjs";
import { u as K } from "../index-BZPx6jYI.mjs";
import { u as Q } from "../index-C1qb0595.mjs";
import { P as D } from "../index-MSR-vgWR.mjs";
import { L as Y } from "../index-C34GgsKQ.mjs";
var y = "Switch", [Z] = J(y), [ee, te] = Z(y), M = b.forwardRef(
  (t, a) => {
    const {
      __scopeSwitch: e,
      name: o,
      checked: s,
      defaultChecked: i,
      required: u,
      disabled: c,
      value: d = "on",
      onCheckedChange: h,
      form: l,
      ...p
    } = t, [n, m] = b.useState(null), f = L(a, (w) => m(w)), k = b.useRef(!1), S = n ? l || !!n.closest("form") : !0, [v, z] = X({
      prop: s,
      defaultProp: i ?? !1,
      onChange: h,
      caller: y
    });
    return /* @__PURE__ */ x(ee, { scope: e, checked: v, disabled: c, children: [
      /* @__PURE__ */ r(
        D.button,
        {
          type: "button",
          role: "switch",
          "aria-checked": v,
          "aria-required": u,
          "data-state": q(v),
          "data-disabled": c ? "" : void 0,
          disabled: c,
          value: d,
          ...p,
          ref: f,
          onClick: G(t.onClick, (w) => {
            z((I) => !I), S && (k.current = w.isPropagationStopped(), k.current || w.stopPropagation());
          })
        }
      ),
      S && /* @__PURE__ */ r(
        j,
        {
          control: n,
          bubbles: !k.current,
          name: o,
          value: d,
          checked: v,
          required: u,
          disabled: c,
          form: l,
          style: { transform: "translateX(-100%)" }
        }
      )
    ] });
  }
);
M.displayName = y;
var V = "SwitchThumb", $ = b.forwardRef(
  (t, a) => {
    const { __scopeSwitch: e, ...o } = t, s = te(V, e);
    return /* @__PURE__ */ r(
      D.span,
      {
        "data-state": q(s.checked),
        "data-disabled": s.disabled ? "" : void 0,
        ...o,
        ref: a
      }
    );
  }
);
$.displayName = V;
var ae = "SwitchBubbleInput", j = b.forwardRef(
  ({
    __scopeSwitch: t,
    control: a,
    checked: e,
    bubbles: o = !0,
    ...s
  }, i) => {
    const u = b.useRef(null), c = L(u, i), d = K(e), h = Q(a);
    return b.useEffect(() => {
      const l = u.current;
      if (!l) return;
      const p = window.HTMLInputElement.prototype, m = Object.getOwnPropertyDescriptor(
        p,
        "checked"
      ).set;
      if (d !== e && m) {
        const f = new Event("click", { bubbles: o });
        m.call(l, e), l.dispatchEvent(f);
      }
    }, [d, e, o]), /* @__PURE__ */ r(
      "input",
      {
        type: "checkbox",
        "aria-hidden": !0,
        defaultChecked: e,
        ...s,
        tabIndex: -1,
        ref: c,
        style: {
          ...s.style,
          ...h,
          position: "absolute",
          pointerEvents: "none",
          opacity: 0,
          margin: 0
        }
      }
    );
  }
);
j.displayName = ae;
function q(t) {
  return t ? "checked" : "unchecked";
}
var re = M, se = $;
const ne = g(
  N([
    "relative shrink-0 self-baseline",
    "cursor-pointer",
    "rounded-full border-transparent",
    "hover:ring-4",
    "transition-colors duration-200 ease-in-out",
    "disabled:hover:ring-transparent disabled:cursor-not-allowed disabled:opacity-dim-3",
    "focus-visible:u-outline",
    "data-[state=unchecked]:bg-on-surface/dim-3",
    "u-shadow-border-transition",
    "overflow-x-hidden"
  ]),
  {
    variants: {
      /**
       * Size of the switch input.
       */
      size: C({
        sm: N(["h-sz-24", "w-sz-40", "border-md"]),
        md: N(["h-sz-32", "w-sz-56", "border-[4px]"])
      }),
      /**
       * Color scheme of the switch input.
       */
      intent: C({
        main: ["data-[state=checked]:bg-main", "hover:ring-main-container", "text-main"],
        support: [
          "data-[state=checked]:bg-support",
          "hover:ring-support-container",
          "text-support"
        ],
        accent: ["data-[state=checked]:bg-accent", "hover:ring-accent-container", "text-accent"],
        basic: ["data-[state=checked]:bg-basic", "hover:ring-basic-container", "text-basic"],
        success: [
          "data-[state=checked]:bg-success",
          "hover:ring-success-container",
          "text-success"
        ],
        alert: ["data-[state=checked]:bg-alert", "hover:ring-alert-container", "text-alert"],
        error: ["data-[state=checked]:bg-error", "hover:ring-error-container", "text-error"],
        info: ["data-[state=checked]:bg-info", "hover:ring-info-container", "text-info"],
        neutral: [
          "data-[state=checked]:bg-neutral",
          "hover:ring-neutral-container",
          "text-neutral"
        ]
      })
    },
    defaultVariants: {
      intent: "basic",
      size: "sm"
    }
  }
), oe = g(
  [
    "pointer-events-none absolute inset-0 flex items-center",
    "transition-all duration-200 ease-in-out"
  ],
  {
    variants: {
      checked: {
        true: "translate-x-full",
        false: "translate-x-0"
      }
    }
  }
), ie = g(
  [
    "absolute left-0 top-0 flex items-center justify-center",
    "bg-surface",
    "rounded-full",
    "ring-0",
    "transition-all duration-200 ease-in-out"
  ],
  {
    variants: {
      size: C({
        sm: ["h-sz-20", "w-sz-20"],
        md: ["h-sz-24", "w-sz-24"]
      }),
      checked: {
        true: "-translate-x-full",
        false: "translate-x-0 text-on-surface/dim-2"
      }
    },
    defaultVariants: {
      size: "sm",
      checked: !1
    }
  }
), B = g(["transition-opacity duration-200"], {
  variants: {
    size: C({
      sm: ["h-sz-10 w-sz-10"],
      md: ["h-sz-12 w-sz-12"]
    })
  },
  defaultVariants: {
    size: "sm"
  }
}), H = ({
  checked: t,
  checkedIcon: a = /* @__PURE__ */ r(O, {}),
  defaultChecked: e,
  intent: o,
  uncheckedIcon: s = /* @__PURE__ */ r(W, {}),
  size: i = "md",
  value: u = "on",
  onCheckedChange: c,
  className: d,
  required: h,
  ref: l,
  ...p
}) => {
  const [n, m] = U(t, e), { name: f, description: k, state: S, isRequired: v, isInvalid: z } = F(), w = S ?? o, I = (P) => {
    m(P), c?.(P);
  };
  return /* @__PURE__ */ r(
    re,
    {
      "data-spark-component": "switch-input",
      ref: l,
      className: ne({ intent: w, size: i, className: d }),
      value: u,
      checked: t,
      defaultChecked: e,
      onCheckedChange: I,
      name: f,
      required: h || v,
      "aria-invalid": z,
      "aria-describedby": k,
      ...p,
      children: /* @__PURE__ */ r("span", { className: oe({ checked: n }), children: /* @__PURE__ */ x(se, { className: ie({ size: i, checked: n }), children: [
        n && a && /* @__PURE__ */ r(_, { className: B({ size: i }), children: a }),
        !n && s && /* @__PURE__ */ r(_, { className: B({ size: i }), children: s })
      ] }) })
    }
  );
};
H.displayName = "SwitchInput";
const ce = g("", {
  variants: {
    disabled: {
      true: ["text-neutral/dim-2", "cursor-not-allowed"],
      false: ["cursor-pointer"]
    }
  },
  defaultVariants: {
    disabled: !1
  }
}), de = ({ className: t, disabled: a, ...e }) => /* @__PURE__ */ r(
  Y,
  {
    "data-spark-component": "switch-label",
    className: ce({ disabled: a, className: t }),
    ...e
  }
), T = ":switch", le = ({
  size: t = "md",
  children: a,
  className: e,
  id: o,
  disabled: s,
  reverse: i = !1,
  ref: u,
  ...c
}) => {
  const d = F(), h = `${T}-label-${E()}`, l = `${T}-input-${E()}`, p = d.id || o || l, n = a && /* @__PURE__ */ r(de, { disabled: s, htmlFor: p, id: h, children: a }), m = /* @__PURE__ */ r(
    H,
    {
      ref: u,
      size: t,
      id: p,
      disabled: s,
      "aria-labelledby": a ? h : d.labelId,
      ...c
    }
  ), f = i ? /* @__PURE__ */ x(R, { children: [
    n,
    m
  ] }) : /* @__PURE__ */ x(R, { children: [
    m,
    n
  ] });
  return /* @__PURE__ */ r(
    "div",
    {
      "data-spark-component": "switch",
      className: A("gap-md text-body-1 flex items-center", e),
      children: f
    }
  );
};
le.displayName = "Switch";
export {
  le as Switch
};
//# sourceMappingURL=index.mjs.map
