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

Stanford Biodesign Digital Health Spezi Web Design System

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