@anoki/fse-ui/dist/index.es440.js

FSE UI components library

import * as r from "react";
import { composeEventHandlers as N } from "./index.es479.js";
import { useComposedRefs as x } from "./index.es478.js";
import { createContextScope as T } from "./index.es477.js";
import { useControllableState as I } from "./index.es482.js";
import { usePrevious as M } from "./index.es503.js";
import { useSize as H } from "./index.es504.js";
import { Primitive as P } from "./index.es487.js";
import { j as u } from "./index.es237.js";
var h = "Switch", [A] = T(h), [U, q] = A(h), R = r.forwardRef(
  (t, a) => {
    const {
      __scopeSwitch: e,
      name: s,
      checked: o,
      defaultChecked: v,
      required: i,
      disabled: n,
      value: p = "on",
      onCheckedChange: w,
      form: c,
      ...S
    } = t, [d, l] = r.useState(null), b = x(a, (m) => l(m)), C = r.useRef(!1), k = d ? c || !!d.closest("form") : !0, [f, j] = I({
      prop: o,
      defaultProp: v ?? !1,
      onChange: w,
      caller: h
    });
    return /* @__PURE__ */ u.jsxs(U, { scope: e, checked: f, disabled: n, children: [
      /* @__PURE__ */ u.jsx(
        P.button,
        {
          type: "button",
          role: "switch",
          "aria-checked": f,
          "aria-required": i,
          "data-state": g(f),
          "data-disabled": n ? "" : void 0,
          disabled: n,
          value: p,
          ...S,
          ref: b,
          onClick: N(t.onClick, (m) => {
            j((B) => !B), k && (C.current = m.isPropagationStopped(), C.current || m.stopPropagation());
          })
        }
      ),
      k && /* @__PURE__ */ u.jsx(
        _,
        {
          control: d,
          bubbles: !C.current,
          name: s,
          value: p,
          checked: f,
          required: i,
          disabled: n,
          form: c,
          style: { transform: "translateX(-100%)" }
        }
      )
    ] });
  }
);
R.displayName = h;
var y = "SwitchThumb", E = r.forwardRef(
  (t, a) => {
    const { __scopeSwitch: e, ...s } = t, o = q(y, e);
    return /* @__PURE__ */ u.jsx(
      P.span,
      {
        "data-state": g(o.checked),
        "data-disabled": o.disabled ? "" : void 0,
        ...s,
        ref: a
      }
    );
  }
);
E.displayName = y;
var z = "SwitchBubbleInput", _ = r.forwardRef(
  ({
    __scopeSwitch: t,
    control: a,
    checked: e,
    bubbles: s = !0,
    ...o
  }, v) => {
    const i = r.useRef(null), n = x(i, v), p = M(e), w = H(a);
    return r.useEffect(() => {
      const c = i.current;
      if (!c) return;
      const S = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(
        S,
        "checked"
      ).set;
      if (p !== e && l) {
        const b = new Event("click", { bubbles: s });
        l.call(c, e), c.dispatchEvent(b);
      }
    }, [p, e, s]), /* @__PURE__ */ u.jsx(
      "input",
      {
        type: "checkbox",
        "aria-hidden": !0,
        defaultChecked: e,
        ...o,
        tabIndex: -1,
        ref: n,
        style: {
          ...o.style,
          ...w,
          position: "absolute",
          pointerEvents: "none",
          opacity: 0,
          margin: 0
        }
      }
    );
  }
);
_.displayName = z;
function g(t) {
  return t ? "checked" : "unchecked";
}
var K = R, Q = E;
export {
  K as Root,
  R as Switch,
  E as SwitchThumb,
  Q as Thumb
};
//# sourceMappingURL=index.es440.js.map