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

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

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