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

Stanford Biodesign Digital Health Spezi Web Design System

import { jsxs as I, jsx as i } from "react/jsx-runtime";
import { c as g } from "./index-2NvaPZWc.mjs";
import * as a from "react";
import { u as M, c as H, a as j } from "./index-CBSFK5oB.mjs";
import { u as y } from "./index-CB1Wkg0G.mjs";
import { u as z } from "./index-BZPx6jYI.mjs";
import { u as A } from "./index-DXTv4gV1.mjs";
import { P } from "./index-8-FPuQXg.mjs";
var m = "Switch", [U, V] = H(m), [q, L] = U(m), x = a.forwardRef(
  (e, r) => {
    const {
      __scopeSwitch: t,
      name: s,
      checked: o,
      defaultChecked: b,
      required: d,
      disabled: n,
      value: u = "on",
      onCheckedChange: w,
      form: c,
      ...S
    } = e, [p, l] = a.useState(null), v = y(r, (f) => l(f)), k = a.useRef(!1), C = p ? c || !!p.closest("form") : !0, [h, B] = M({
      prop: o,
      defaultProp: b ?? !1,
      onChange: w,
      caller: m
    });
    return /* @__PURE__ */ I(q, { scope: t, checked: h, disabled: n, children: [
      /* @__PURE__ */ i(
        P.button,
        {
          type: "button",
          role: "switch",
          "aria-checked": h,
          "aria-required": d,
          "data-state": N(h),
          "data-disabled": n ? "" : void 0,
          disabled: n,
          value: u,
          ...S,
          ref: v,
          onClick: j(e.onClick, (f) => {
            B((T) => !T), C && (k.current = f.isPropagationStopped(), k.current || f.stopPropagation());
          })
        }
      ),
      C && /* @__PURE__ */ i(
        _,
        {
          control: p,
          bubbles: !k.current,
          name: s,
          value: u,
          checked: h,
          required: d,
          disabled: n,
          form: c,
          style: { transform: "translateX(-100%)" }
        }
      )
    ] });
  }
);
x.displayName = m;
var R = "SwitchThumb", E = a.forwardRef(
  (e, r) => {
    const { __scopeSwitch: t, ...s } = e, o = L(R, t);
    return /* @__PURE__ */ i(
      P.span,
      {
        "data-state": N(o.checked),
        "data-disabled": o.disabled ? "" : void 0,
        ...s,
        ref: r
      }
    );
  }
);
E.displayName = R;
var O = "SwitchBubbleInput", _ = a.forwardRef(
  ({
    __scopeSwitch: e,
    control: r,
    checked: t,
    bubbles: s = !0,
    ...o
  }, b) => {
    const d = a.useRef(null), n = y(d, b), u = z(t), w = A(r);
    return a.useEffect(() => {
      const c = d.current;
      if (!c) return;
      const S = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(
        S,
        "checked"
      ).set;
      if (u !== t && l) {
        const v = new Event("click", { bubbles: s });
        l.call(c, t), c.dispatchEvent(v);
      }
    }, [u, t, s]), /* @__PURE__ */ i(
      "input",
      {
        type: "checkbox",
        "aria-hidden": !0,
        defaultChecked: t,
        ...o,
        tabIndex: -1,
        ref: n,
        style: {
          ...o.style,
          ...w,
          position: "absolute",
          pointerEvents: "none",
          opacity: 0,
          margin: 0
        }
      }
    );
  }
);
_.displayName = O;
function N(e) {
  return e ? "checked" : "unchecked";
}
var D = x, F = E;
const Y = ({
  className: e,
  ...r
}) => /* @__PURE__ */ i(
  D,
  {
    className: g(
      "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
    ),
    ...r,
    children: /* @__PURE__ */ i(
      F,
      {
        className: g(
          "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 {
  Y as S
};