@anoki/fse-ui/dist/index.es338.js

FSE UI components library

import * as c from "react";
import { useComposedRefs as S } from "./index.es478.js";
import { createContextScope as F } from "./index.es477.js";
import { composeEventHandlers as j } from "./index.es479.js";
import { useControllableState as L } from "./index.es482.js";
import { usePrevious as O } from "./index.es503.js";
import { useSize as H } from "./index.es504.js";
import { Presence as z } from "./index.es486.js";
import { Primitive as E } from "./index.es487.js";
import { j as u } from "./index.es237.js";
var R = "Checkbox", [G] = F(R), [K, P] = G(R);
function U(t) {
  const {
    __scopeCheckbox: a,
    checked: s,
    children: l,
    defaultChecked: r,
    disabled: e,
    form: f,
    name: b,
    onCheckedChange: i,
    required: m,
    value: C = "on",
    // @ts-expect-error
    internal_do_not_use_render: d
  } = t, [p, v] = L({
    prop: s,
    defaultProp: r ?? !1,
    onChange: i,
    caller: R
  }), [k, x] = c.useState(null), [_, o] = c.useState(null), n = c.useRef(!1), g = k ? !!f || !!k.closest("form") : (
    // We set this to true by default so that events bubble to forms without JS (SSR)
    !0
  ), I = {
    checked: p,
    disabled: e,
    setChecked: v,
    control: k,
    setControl: x,
    name: b,
    form: f,
    value: C,
    hasConsumerStoppedPropagationRef: n,
    required: m,
    defaultChecked: h(r) ? !1 : r,
    isFormControl: g,
    bubbleInput: _,
    setBubbleInput: o
  };
  return /* @__PURE__ */ u.jsx(
    K,
    {
      scope: a,
      ...I,
      children: Q(d) ? d(I) : l
    }
  );
}
var B = "CheckboxTrigger", N = c.forwardRef(
  ({ __scopeCheckbox: t, onKeyDown: a, onClick: s, ...l }, r) => {
    const {
      control: e,
      value: f,
      disabled: b,
      checked: i,
      required: m,
      setControl: C,
      setChecked: d,
      hasConsumerStoppedPropagationRef: p,
      isFormControl: v,
      bubbleInput: k
    } = P(B, t), x = S(r, C), _ = c.useRef(i);
    return c.useEffect(() => {
      const o = e == null ? void 0 : e.form;
      if (o) {
        const n = () => d(_.current);
        return o.addEventListener("reset", n), () => o.removeEventListener("reset", n);
      }
    }, [e, d]), /* @__PURE__ */ u.jsx(
      E.button,
      {
        type: "button",
        role: "checkbox",
        "aria-checked": h(i) ? "mixed" : i,
        "aria-required": m,
        "data-state": q(i),
        "data-disabled": b ? "" : void 0,
        disabled: b,
        value: f,
        ...l,
        ref: x,
        onKeyDown: j(a, (o) => {
          o.key === "Enter" && o.preventDefault();
        }),
        onClick: j(s, (o) => {
          d((n) => h(n) ? !0 : !n), k && v && (p.current = o.isPropagationStopped(), p.current || o.stopPropagation());
        })
      }
    );
  }
);
N.displayName = B;
var X = c.forwardRef(
  (t, a) => {
    const {
      __scopeCheckbox: s,
      name: l,
      checked: r,
      defaultChecked: e,
      required: f,
      disabled: b,
      value: i,
      onCheckedChange: m,
      form: C,
      ...d
    } = t;
    return /* @__PURE__ */ u.jsx(
      U,
      {
        __scopeCheckbox: s,
        checked: r,
        defaultChecked: e,
        disabled: b,
        required: f,
        onCheckedChange: m,
        name: l,
        form: C,
        value: i,
        internal_do_not_use_render: ({ isFormControl: p }) => /* @__PURE__ */ u.jsxs(u.Fragment, { children: [
          /* @__PURE__ */ u.jsx(
            N,
            {
              ...d,
              ref: a,
              __scopeCheckbox: s
            }
          ),
          p && /* @__PURE__ */ u.jsx(
            M,
            {
              __scopeCheckbox: s
            }
          )
        ] })
      }
    );
  }
);
X.displayName = R;
var w = "CheckboxIndicator", J = c.forwardRef(
  (t, a) => {
    const { __scopeCheckbox: s, forceMount: l, ...r } = t, e = P(w, s);
    return /* @__PURE__ */ u.jsx(
      z,
      {
        present: l || h(e.checked) || e.checked === !0,
        children: /* @__PURE__ */ u.jsx(
          E.span,
          {
            "data-state": q(e.checked),
            "data-disabled": e.disabled ? "" : void 0,
            ...r,
            ref: a,
            style: { pointerEvents: "none", ...t.style }
          }
        )
      }
    );
  }
);
J.displayName = w;
var T = "CheckboxBubbleInput", M = c.forwardRef(
  ({ __scopeCheckbox: t, ...a }, s) => {
    const {
      control: l,
      hasConsumerStoppedPropagationRef: r,
      checked: e,
      defaultChecked: f,
      required: b,
      disabled: i,
      name: m,
      value: C,
      form: d,
      bubbleInput: p,
      setBubbleInput: v
    } = P(T, t), k = S(s, v), x = O(e), _ = H(l);
    c.useEffect(() => {
      const n = p;
      if (!n) return;
      const g = window.HTMLInputElement.prototype, y = Object.getOwnPropertyDescriptor(
        g,
        "checked"
      ).set, A = !r.current;
      if (x !== e && y) {
        const D = new Event("click", { bubbles: A });
        n.indeterminate = h(e), y.call(n, h(e) ? !1 : e), n.dispatchEvent(D);
      }
    }, [p, x, e, r]);
    const o = c.useRef(h(e) ? !1 : e);
    return /* @__PURE__ */ u.jsx(
      E.input,
      {
        type: "checkbox",
        "aria-hidden": !0,
        defaultChecked: f ?? o.current,
        required: b,
        disabled: i,
        name: m,
        value: C,
        form: d,
        ...a,
        tabIndex: -1,
        ref: k,
        style: {
          ...a.style,
          ..._,
          position: "absolute",
          pointerEvents: "none",
          opacity: 0,
          margin: 0,
          // We transform because the input is absolutely positioned but we have
          // rendered it **after** the button. This pulls it back to sit on top
          // of the button.
          transform: "translateX(-100%)"
        }
      }
    );
  }
);
M.displayName = T;
function Q(t) {
  return typeof t == "function";
}
function h(t) {
  return t === "indeterminate";
}
function q(t) {
  return h(t) ? "indeterminate" : t ? "checked" : "unchecked";
}
export {
  X as Checkbox,
  J as CheckboxIndicator,
  J as Indicator,
  X as Root,
  M as unstable_BubbleInput,
  M as unstable_CheckboxBubbleInput,
  U as unstable_CheckboxProvider,
  N as unstable_CheckboxTrigger,
  U as unstable_Provider,
  N as unstable_Trigger
};
//# sourceMappingURL=index.es338.js.map