@konstructio/ui/dist/Switch-CT2R9JgM.js

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

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