@konstructio/ui/dist/components/Switch/Switch.js

A set of reusable and customizable React components built for konstruct.io

import { jsxs as x, jsx as n } from "react/jsx-runtime";
import * as p from "react";
import { forwardRef as H, useRef as M, useId as $, useImperativeHandle as j, useEffect as z } from "react";
import { a as A, c as U, b as q } from "../../index-Cq1I1cG9.js";
import { u as P } from "../../index-B5MIi2tR.js";
import { u as F, a as L } from "../../index-Bc1LNrRD.js";
import { P as y } from "../../index-BCGvACM9.js";
import { cn as R } from "../../utils/index.js";
import { thumbVariants as O, switchVariants as V } from "./Switch.variants.js";
var b = "Switch", [D, ce] = U(b), [W, X] = D(b), N = p.forwardRef(
  (t, i) => {
    const {
      __scopeSwitch: r,
      name: a,
      checked: s,
      defaultChecked: d,
      required: u,
      disabled: o,
      value: c = "on",
      onCheckedChange: m,
      form: e,
      ...f
    } = t, [l, h] = p.useState(null), v = P(i, (S) => h(S)), k = p.useRef(!1), C = l ? e || !!l.closest("form") : !0, [w, B] = A({
      prop: s,
      defaultProp: d ?? !1,
      onChange: m,
      caller: b
    });
    return /* @__PURE__ */ x(W, { scope: r, checked: w, disabled: o, children: [
      /* @__PURE__ */ n(
        y.button,
        {
          type: "button",
          role: "switch",
          "aria-checked": w,
          "aria-required": u,
          "data-state": g(w),
          "data-disabled": o ? "" : void 0,
          disabled: o,
          value: c,
          ...f,
          ref: v,
          onClick: q(t.onClick, (S) => {
            B((T) => !T), C && (k.current = S.isPropagationStopped(), k.current || S.stopPropagation());
          })
        }
      ),
      C && /* @__PURE__ */ n(
        I,
        {
          control: l,
          bubbles: !k.current,
          name: a,
          value: c,
          checked: w,
          required: u,
          disabled: o,
          form: e,
          style: { transform: "translateX(-100%)" }
        }
      )
    ] });
  }
);
N.displayName = b;
var E = "SwitchThumb", _ = p.forwardRef(
  (t, i) => {
    const { __scopeSwitch: r, ...a } = t, s = X(E, r);
    return /* @__PURE__ */ n(
      y.span,
      {
        "data-state": g(s.checked),
        "data-disabled": s.disabled ? "" : void 0,
        ...a,
        ref: i
      }
    );
  }
);
_.displayName = E;
var G = "SwitchBubbleInput", I = p.forwardRef(
  ({
    __scopeSwitch: t,
    control: i,
    checked: r,
    bubbles: a = !0,
    ...s
  }, d) => {
    const u = p.useRef(null), o = P(u, d), c = F(r), m = L(i);
    return p.useEffect(() => {
      const e = u.current;
      if (!e) return;
      const f = window.HTMLInputElement.prototype, h = Object.getOwnPropertyDescriptor(
        f,
        "checked"
      ).set;
      if (c !== r && h) {
        const v = new Event("click", { bubbles: a });
        h.call(e, r), e.dispatchEvent(v);
      }
    }, [c, r, a]), /* @__PURE__ */ n(
      "input",
      {
        type: "checkbox",
        "aria-hidden": !0,
        defaultChecked: r,
        ...s,
        tabIndex: -1,
        ref: o,
        style: {
          ...s.style,
          ...m,
          position: "absolute",
          pointerEvents: "none",
          opacity: 0,
          margin: 0
        }
      }
    );
  }
);
I.displayName = G;
function g(t) {
  return t ? "checked" : "unchecked";
}
var J = N, K = _;
const ae = H(
  ({
    name: t,
    alignment: i = "horizontal",
    theme: r,
    thumbClassName: a,
    className: s,
    label: d,
    defaultChecked: u,
    onChange: o,
    value: c
  }, m) => {
    const e = M(null), f = $(), l = t ? `${f}-${t}` : f;
    return j(m, () => e.current, [e]), z(() => {
      e.current && (e.current.value = `${c}`);
    }, [c]), /* @__PURE__ */ x(
      "div",
      {
        className: R(
          "w-full flex gap-3",
          i === "vertical" ? "flex-col" : "flex-row"
        ),
        "data-theme": r,
        children: [
          d ? /* @__PURE__ */ n(
            "label",
            {
              className: "text-base",
              htmlFor: l,
              style: { paddingRight: 15 },
              children: d
            }
          ) : null,
          /* @__PURE__ */ n(
            J,
            {
              id: l,
              defaultChecked: u,
              checked: c,
              onCheckedChange: (h) => o == null ? void 0 : o(h),
              className: R(V({ className: s })),
              "aria-label": d,
              children: /* @__PURE__ */ n(
                K,
                {
                  className: O({
                    className: a
                  })
                }
              )
            }
          ),
          /* @__PURE__ */ n(
            "input",
            {
              ref: e,
              name: t,
              type: "text",
              className: "hidden",
              "aria-hidden": "true"
            }
          )
        ]
      }
    );
  }
);
export {
  ae as Switch
};