@stanfordspezi/spezi-web-design-system/dist/Switch-CLuyati4.mjs

Stanford Biodesign Digital Health Spezi Web Design System

import { jsxs as _, jsx as n } from "react/jsx-runtime";
import { c as v } from "./index-2NvaPZWc.mjs";
import * as c from "react";
import { a as H, c as I, d as M } from "./index-DqbtYIhp.mjs";
import { u as j } from "./index-Bytw4Lqn.mjs";
import { u as z } from "./index-BZPx6jYI.mjs";
import { u as B } from "./index-Da5ea2iF.mjs";
import { P as C } from "./index-WWNfSPCj.mjs";
var w = "Switch", [q, Q] = I(w), [A, O] = q(w), g = c.forwardRef(
  (e, o) => {
    const {
      __scopeSwitch: t,
      name: r,
      checked: s,
      defaultChecked: l,
      required: i,
      disabled: a,
      value: d = "on",
      onCheckedChange: m,
      form: b,
      ...p
    } = e, [u, R] = c.useState(null), E = j(o, (f) => R(f)), k = c.useRef(!1), S = u ? b || !!u.closest("form") : !0, [h = !1, N] = H({
      prop: s,
      defaultProp: l,
      onChange: m
    });
    return /* @__PURE__ */ _(A, { scope: t, checked: h, disabled: a, children: [
      /* @__PURE__ */ n(
        C.button,
        {
          type: "button",
          role: "switch",
          "aria-checked": h,
          "aria-required": i,
          "data-state": y(h),
          "data-disabled": a ? "" : void 0,
          disabled: a,
          value: d,
          ...p,
          ref: E,
          onClick: M(e.onClick, (f) => {
            N((T) => !T), S && (k.current = f.isPropagationStopped(), k.current || f.stopPropagation());
          })
        }
      ),
      S && /* @__PURE__ */ n(
        D,
        {
          control: u,
          bubbles: !k.current,
          name: r,
          value: d,
          checked: h,
          required: i,
          disabled: a,
          form: b,
          style: { transform: "translateX(-100%)" }
        }
      )
    ] });
  }
);
g.displayName = w;
var P = "SwitchThumb", x = c.forwardRef(
  (e, o) => {
    const { __scopeSwitch: t, ...r } = e, s = O(P, t);
    return /* @__PURE__ */ n(
      C.span,
      {
        "data-state": y(s.checked),
        "data-disabled": s.disabled ? "" : void 0,
        ...r,
        ref: o
      }
    );
  }
);
x.displayName = P;
var D = (e) => {
  const { control: o, checked: t, bubbles: r = !0, ...s } = e, l = c.useRef(null), i = z(t), a = B(o);
  return c.useEffect(() => {
    const d = l.current, m = window.HTMLInputElement.prototype, p = Object.getOwnPropertyDescriptor(m, "checked").set;
    if (i !== t && p) {
      const u = new Event("click", { bubbles: r });
      p.call(d, t), d.dispatchEvent(u);
    }
  }, [i, t, r]), /* @__PURE__ */ n(
    "input",
    {
      type: "checkbox",
      "aria-hidden": !0,
      defaultChecked: t,
      ...s,
      tabIndex: -1,
      ref: l,
      style: {
        ...e.style,
        ...a,
        position: "absolute",
        pointerEvents: "none",
        opacity: 0,
        margin: 0
      }
    }
  );
};
function y(e) {
  return e ? "checked" : "unchecked";
}
var F = g, L = x;
const V = ({
  className: e,
  ...o
}) => /* @__PURE__ */ n(
  F,
  {
    className: v(
      "focus-ring data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition disabled:cursor-not-allowed disabled:opacity-50",
      e
    ),
    ...o,
    children: /* @__PURE__ */ n(
      L,
      {
        className: v(
          "bg-surface-primary pointer-events-none block size-4 rounded-full shadow-lg ring-0 transition data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
        )
      }
    )
  }
);
export {
  V as S
};