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

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

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