@anoki/fse-marche-ui/dist/index.es170.js

FSE UI components library

import * as n from "react";
import { useComposedRefs as N } from "./index.es236.js";
import { createContextScope as M } from "./index.es237.js";
import { composeEventHandlers as S } from "./index.es235.js";
import { useControllableState as O } from "./index.es238.js";
import { usePrevious as A } from "./index.es245.js";
import { useSize as B } from "./index.es246.js";
import { Presence as H } from "./index.es247.js";
import { Primitive as j } from "./index.es239.js";
import { j as f } from "./index.es137.js";
var R = "Checkbox", [K, Y] = M(R), [L, q] = K(R), I = n.forwardRef(
  (e, l) => {
    const {
      __scopeCheckbox: t,
      name: i,
      checked: p,
      defaultChecked: r,
      required: m,
      disabled: a,
      value: k = "on",
      onCheckedChange: b,
      form: d,
      ...x
    } = e, [s, C] = n.useState(null), v = N(l, (o) => C(o)), y = n.useRef(!1), P = s ? d || !!s.closest("form") : !0, [u = !1, E] = O({
      prop: p,
      defaultProp: r,
      onChange: b
    }), D = n.useRef(u);
    return n.useEffect(() => {
      const o = s == null ? void 0 : s.form;
      if (o) {
        const h = () => E(D.current);
        return o.addEventListener("reset", h), () => o.removeEventListener("reset", h);
      }
    }, [s, E]), /* @__PURE__ */ f.jsxs(L, { scope: t, state: u, disabled: a, children: [
      /* @__PURE__ */ f.jsx(
        j.button,
        {
          type: "button",
          role: "checkbox",
          "aria-checked": c(u) ? "mixed" : u,
          "aria-required": m,
          "data-state": _(u),
          "data-disabled": a ? "" : void 0,
          disabled: a,
          value: k,
          ...x,
          ref: v,
          onKeyDown: S(e.onKeyDown, (o) => {
            o.key === "Enter" && o.preventDefault();
          }),
          onClick: S(e.onClick, (o) => {
            E((h) => c(h) ? !0 : !h), P && (y.current = o.isPropagationStopped(), y.current || o.stopPropagation());
          })
        }
      ),
      P && /* @__PURE__ */ f.jsx(
        z,
        {
          control: s,
          bubbles: !y.current,
          name: i,
          value: k,
          checked: u,
          required: m,
          disabled: a,
          form: d,
          style: { transform: "translateX(-100%)" },
          defaultChecked: c(r) ? !1 : r
        }
      )
    ] });
  }
);
I.displayName = R;
var g = "CheckboxIndicator", w = n.forwardRef(
  (e, l) => {
    const { __scopeCheckbox: t, forceMount: i, ...p } = e, r = q(g, t);
    return /* @__PURE__ */ f.jsx(H, { present: i || c(r.state) || r.state === !0, children: /* @__PURE__ */ f.jsx(
      j.span,
      {
        "data-state": _(r.state),
        "data-disabled": r.disabled ? "" : void 0,
        ...p,
        ref: l,
        style: { pointerEvents: "none", ...e.style }
      }
    ) });
  }
);
w.displayName = g;
var z = (e) => {
  const { control: l, checked: t, bubbles: i = !0, defaultChecked: p, ...r } = e, m = n.useRef(null), a = A(t), k = B(l);
  n.useEffect(() => {
    const d = m.current, x = window.HTMLInputElement.prototype, C = Object.getOwnPropertyDescriptor(x, "checked").set;
    if (a !== t && C) {
      const v = new Event("click", { bubbles: i });
      d.indeterminate = c(t), C.call(d, c(t) ? !1 : t), d.dispatchEvent(v);
    }
  }, [a, t, i]);
  const b = n.useRef(c(t) ? !1 : t);
  return /* @__PURE__ */ f.jsx(
    "input",
    {
      type: "checkbox",
      "aria-hidden": !0,
      defaultChecked: p ?? b.current,
      ...r,
      tabIndex: -1,
      ref: m,
      style: {
        ...e.style,
        ...k,
        position: "absolute",
        pointerEvents: "none",
        opacity: 0,
        margin: 0
      }
    }
  );
};
function c(e) {
  return e === "indeterminate";
}
function _(e) {
  return c(e) ? "indeterminate" : e ? "checked" : "unchecked";
}
var Z = I, $ = w;
export {
  I as Checkbox,
  w as CheckboxIndicator,
  $ as Indicator,
  Z as Root,
  Y as createCheckboxScope
};
//# sourceMappingURL=index.es170.js.map