@konstructio/ui/dist/Checkbox-BvRmHWxk.js

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

import { o as G } from "./chunk-cI0lbGMq.js";
import { t as U } from "./prop-types-CE0Kfmwk.js";
import { n as B } from "./dist-C4El7dZ5.js";
import { t as w } from "./utils-COaoD3PI.js";
import { a as S, r as V, s as X, t as I } from "./dist-D_9sBzad.js";
import { t as J } from "./dist-DF7Yi2EK.js";
import { t as Q } from "./dist-DxDE5irg2.js";
import { t as Y } from "./dist-X40eHC8j2.js";
import { useToggle as Z } from "./hooks/useToggle.js";
import { checkboxVariants as ee, labelVariants as te } from "./components/Checkbox/Checkbox.variants.js";
import * as p from "react";
import j, { forwardRef as T, useCallback as re, useId as oe } from "react";
import { Fragment as ne, jsx as f, jsxs as z } from "react/jsx-runtime";
var E = /* @__PURE__ */ G(U());
function R() {
  return R = Object.assign || function(e) {
    for (var a = 1; a < arguments.length; a++) {
      var n = arguments[a];
      for (var r in n) Object.prototype.hasOwnProperty.call(n, r) && (e[r] = n[r]);
    }
    return e;
  }, R.apply(this, arguments);
}
function ae(e, a) {
  if (e == null) return {};
  var n = se(e, a), r, o;
  if (Object.getOwnPropertySymbols) {
    var t = Object.getOwnPropertySymbols(e);
    for (o = 0; o < t.length; o++)
      r = t[o], !(a.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (n[r] = e[r]);
  }
  return n;
}
function se(e, a) {
  if (e == null) return {};
  var n = {}, r = Object.keys(e), o, t;
  for (t = 0; t < r.length; t++)
    o = r[t], !(a.indexOf(o) >= 0) && (n[o] = e[o]);
  return n;
}
var N = T(function(e, a) {
  var n = e.color, r = n === void 0 ? "currentColor" : n, o = e.size, t = o === void 0 ? 24 : o, l = ae(e, ["color", "size"]);
  return /* @__PURE__ */ j.createElement("svg", R({
    ref: a,
    xmlns: "http://www.w3.org/2000/svg",
    width: t,
    height: t,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: r,
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }, l), /* @__PURE__ */ j.createElement("polyline", { points: "20 6 9 17 4 12" }));
});
N.propTypes = {
  color: E.default.string,
  size: E.default.oneOfType([E.default.string, E.default.number])
};
N.displayName = "Check";
var P = "Checkbox", [ce, Ee] = X(P), [ie, O] = ce(P);
function le(e) {
  const { __scopeCheckbox: a, checked: n, children: r, defaultChecked: o, disabled: t, form: l, name: h, onCheckedChange: i, required: b, value: k = "on", internal_do_not_use_render: d } = e, [u, x] = V({
    prop: n,
    defaultProp: o ?? !1,
    onChange: i,
    caller: P
  }), [C, m] = p.useState(null), [v, s] = p.useState(null), c = p.useRef(!1), y = C ? !!l || !!C.closest("form") : !0, _ = {
    checked: u,
    disabled: t,
    setChecked: x,
    control: C,
    setControl: m,
    name: h,
    form: l,
    value: k,
    hasConsumerStoppedPropagationRef: c,
    required: b,
    defaultChecked: g(o) ? !1 : o,
    isFormControl: y,
    bubbleInput: v,
    setBubbleInput: s
  };
  return /* @__PURE__ */ f(ie, {
    scope: a,
    ..._,
    children: de(d) ? d(_) : r
  });
}
var L = "CheckboxTrigger", M = p.forwardRef(({ __scopeCheckbox: e, onKeyDown: a, onClick: n, ...r }, o) => {
  const { control: t, value: l, disabled: h, checked: i, required: b, setControl: k, setChecked: d, hasConsumerStoppedPropagationRef: u, isFormControl: x, bubbleInput: C } = O(L, e), m = B(o, k), v = p.useRef(i);
  return p.useEffect(() => {
    const s = t?.form;
    if (s) {
      const c = () => d(v.current);
      return s.addEventListener("reset", c), () => s.removeEventListener("reset", c);
    }
  }, [t, d]), /* @__PURE__ */ f(I.button, {
    type: "button",
    role: "checkbox",
    "aria-checked": g(i) ? "mixed" : i,
    "aria-required": b,
    "data-state": H(i),
    "data-disabled": h ? "" : void 0,
    disabled: h,
    value: l,
    ...r,
    ref: m,
    onKeyDown: S(a, (s) => {
      s.key === "Enter" && s.preventDefault();
    }),
    onClick: S(n, (s) => {
      d((c) => g(c) ? !0 : !c), C && x && (u.current = s.isPropagationStopped(), u.current || s.stopPropagation());
    })
  });
});
M.displayName = L;
var q = p.forwardRef((e, a) => {
  const { __scopeCheckbox: n, name: r, checked: o, defaultChecked: t, required: l, disabled: h, value: i, onCheckedChange: b, form: k, ...d } = e;
  return /* @__PURE__ */ f(le, {
    __scopeCheckbox: n,
    checked: o,
    defaultChecked: t,
    disabled: h,
    required: l,
    onCheckedChange: b,
    name: r,
    form: k,
    value: i,
    internal_do_not_use_render: ({ isFormControl: u }) => /* @__PURE__ */ z(ne, { children: [/* @__PURE__ */ f(M, {
      ...d,
      ref: a,
      __scopeCheckbox: n
    }), u && /* @__PURE__ */ f(D, { __scopeCheckbox: n })] })
  });
});
q.displayName = P;
var F = "CheckboxIndicator", A = p.forwardRef((e, a) => {
  const { __scopeCheckbox: n, forceMount: r, ...o } = e, t = O(F, n);
  return /* @__PURE__ */ f(J, {
    present: r || g(t.checked) || t.checked === !0,
    children: /* @__PURE__ */ f(I.span, {
      "data-state": H(t.checked),
      "data-disabled": t.disabled ? "" : void 0,
      ...o,
      ref: a,
      style: {
        pointerEvents: "none",
        ...e.style
      }
    })
  });
});
A.displayName = F;
var $ = "CheckboxBubbleInput", D = p.forwardRef(({ __scopeCheckbox: e, ...a }, n) => {
  const { control: r, hasConsumerStoppedPropagationRef: o, checked: t, defaultChecked: l, required: h, disabled: i, name: b, value: k, form: d, bubbleInput: u, setBubbleInput: x } = O($, e), C = B(n, x), m = Q(t), v = Y(r);
  p.useEffect(() => {
    const c = u;
    if (!c) return;
    const y = window.HTMLInputElement.prototype, _ = Object.getOwnPropertyDescriptor(y, "checked").set, K = !o.current;
    if (m !== t && _) {
      const W = new Event("click", { bubbles: K });
      c.indeterminate = g(t), _.call(c, g(t) ? !1 : t), c.dispatchEvent(W);
    }
  }, [
    u,
    m,
    t,
    o
  ]);
  const s = p.useRef(g(t) ? !1 : t);
  return /* @__PURE__ */ f(I.input, {
    type: "checkbox",
    "aria-hidden": !0,
    defaultChecked: l ?? s.current,
    required: h,
    disabled: i,
    name: b,
    value: k,
    form: d,
    ...a,
    tabIndex: -1,
    ref: C,
    style: {
      ...a.style,
      ...v,
      position: "absolute",
      pointerEvents: "none",
      opacity: 0,
      margin: 0,
      transform: "translateX(-100%)"
    }
  });
});
D.displayName = $;
function de(e) {
  return typeof e == "function";
}
function g(e) {
  return e === "indeterminate";
}
function H(e) {
  return g(e) ? "indeterminate" : e ? "checked" : "unchecked";
}
var ue = T(({ ariaLabelledBy: e, className: a, defaultChecked: n, disabled: r, id: o, label: t, labelClassName: l, labelWrapperClassName: h, name: i, theme: b, title: k, variant: d, onChange: u, ...x }, C) => {
  const [m, v] = Z(n ?? !1), s = oe(), c = re((y) => {
    v(y), u?.(y);
  }, [u, v]);
  return /* @__PURE__ */ z("div", {
    className: w("flex items-center gap-4", h),
    "data-theme": b,
    children: [/* @__PURE__ */ f(q, {
      id: o ?? s,
      checked: m,
      ref: C,
      name: i,
      disabled: r,
      "aria-labelledby": e,
      title: k,
      className: w(ee({
        className: a,
        variant: d,
        checked: m
      })),
      onCheckedChange: c,
      ...x,
      children: /* @__PURE__ */ f(A, { children: /* @__PURE__ */ f(N, { className: "w-4 h-4 stroke-2" }) })
    }), t ? /* @__PURE__ */ f("label", {
      htmlFor: i ?? o,
      className: w(te({ className: l }), { "cursor-not-allowed": r }),
      onClick: () => !r && c(!m),
      children: t
    }) : null]
  });
});
ue.displayName = "KonstructCheckbox";
export {
  ue as t
};