import { jsx as r, jsxs as g } from "react/jsx-runtime";
import { IconMinus as J, IconCheckMark as K } from "@frontify/fondue-icons";
import { useCheckbox as Q } from "@react-aria/checkbox";
import { useFocusRing as V } from "@react-aria/focus";
import { mergeProps as Z } from "@react-aria/utils";
import { useToggleState as q } from "@react-stately/toggle";
import { forwardRef as T, useState as b, useRef as O, useEffect as y, useCallback as ee } from "react";
import { InputLabel as te } from "../InputLabel/InputLabel.es.js";
import { useMemoizedId as re } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as ne } from "../../utilities/focusStyle.es.js";
import { merge as o } from "../../utilities/merge.es.js";
import { useForwardedRef as oe } from "../../utilities/useForwardedRef.es.js";
var se = /* @__PURE__ */ ((e) => (e.Checked = "Checked", e.Unchecked = "Unchecked", e.Mixed = "Mixed", e))(se || {}), ie = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Weak = "Weak", e.Strong = "Strong", e))(ie || {}), le = /* @__PURE__ */ ((e) => (e.Default = "Default", e.Large = "Large", e.XLarge = "XLarge", e))(le || {});
const ae = (e) => e === "Checked" || e === "Mixed", E = "tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover", ce = {
  Weak: "tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover",
  Default: E,
  Strong: E
}, we = {
  Default: "tw-h-4 tw-w-4",
  Large: "tw-h-5 tw-w-5",
  XLarge: "tw-h-8 tw-w-8"
}, de = ({
  id: e,
  emphasis: v = "Default",
  size: p = "Default",
  disabled: s,
  required: x,
  label: n,
  hideLabel: h,
  tooltip: S,
  helperText: i,
  "aria-label": k,
  value: W,
  groupInputProps: $,
  onChange: U,
  state: l = "Unchecked",
  "data-test-id": a = "checkbox"
}, R) => {
  const f = re(e), c = oe(R), { focusProps: X } = V(), j = q({
    onChange: s ? void 0 : U,
    isSelected: l === "Checked"
    /* Checked */
  }), [z, C] = b(), w = O(null), d = O(null), [I, P] = b(!1), [H, Y] = b(!1), L = (t) => {
    t.key === "Tab" && C(!0);
  }, M = () => {
    C(!1);
  };
  y(() => {
    const t = c == null ? void 0 : c.current;
    return t == null || t.addEventListener("keyup", L), t == null || t.addEventListener("blur", M), () => {
      t == null || t.removeEventListener("keyup", L), t == null || t.removeEventListener("blur", M);
    };
  }, []);
  const { inputProps: _ } = Q(
    {
      isDisabled: s,
      isRequired: x,
      isIndeterminate: l === "Mixed",
      "aria-label": k,
      value: W
    },
    j,
    c
  ), A = {
    Checked: /* @__PURE__ */ r(K, { size: p === "XLarge" ? 24 : 16 }),
    Mixed: /* @__PURE__ */ r(J, {}),
    Unchecked: null
  }, m = ae(l), B = o([
    "tw-bg-box-disabled tw-pointer-events-none tw-text-box-disabled-inverse tw-border-line-strong",
    m && "tw-text-box-disabled-inverse tw-border-line-strong"
  ]), G = m ? ce[v] : o([
    "tw-bg-base hover:tw-bg-box-neutral",
    v === "Strong" ? "tw-border-2 tw-border-box-selected-strong" : "tw-border tw-border-line-xx-strong"
  ]), u = ee(() => {
    var t, D, N, F;
    w.current && P(((t = w.current) == null ? void 0 : t.scrollWidth) > ((D = w.current) == null ? void 0 : D.clientWidth)), d.current && Y(
      ((N = d.current) == null ? void 0 : N.scrollWidth) > ((F = d.current) == null ? void 0 : F.clientWidth)
    );
  }, [w, d]);
  return y(() => {
    if (!(!n && !i || h))
      return u(), window.removeEventListener("resize", u), window.addEventListener("resize", u), () => {
        window.removeEventListener("resize", u);
      };
  }, [n, i, h, u]), /* @__PURE__ */ r("div", { className: "tw-gap-1 tw-transition-colors tw-w-full", "data-test-id": a, children: /* @__PURE__ */ r("div", { className: o(["tw-inline-flex tw-flex-row tw-rounded tw-w-full", z ? ne : ""]), children: /* @__PURE__ */ r(
    te,
    {
      id: `${f}-label`,
      disabled: s,
      clickable: !0,
      htmlFor: f,
      tooltip: S,
      required: x,
      bold: m,
      children: /* @__PURE__ */ g("span", { className: "tw-flex tw-items-center tw-whitespace-nowrap", children: [
        /* @__PURE__ */ g("span", { className: "tw-inline-flex", children: [
          /* @__PURE__ */ r(
            "input",
            {
              ...Z($ || _, X),
              id: f,
              ref: c,
              className: "tw-sr-only",
              "data-test-id": `${a}-input`,
              role: "checkbox",
              "aria-checked": l === "Checked",
              required: x,
              "aria-label": k,
              "aria-labelledby": n ? `${f}-label` : void 0
            }
          ),
          /* @__PURE__ */ r(
            "span",
            {
              "data-test-id": `${a}-icon-box`,
              "aria-hidden": "true",
              className: o([
                "tw-leading-3 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-shrink-0 tw-flex-none",
                we[p],
                s ? B : G
              ]),
              children: A[l]
            }
          )
        ] }),
        !h && /* @__PURE__ */ g("span", { className: "tw-inline-flex tw-flex-col tw-min-w-0 tw-ml-1.5", children: [
          n && /* @__PURE__ */ r(
            "span",
            {
              ref: w,
              "data-test-id": `${a}-label`,
              className: o([
                "tw-text-ellipsis tw-overflow-hidden",
                "tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white",
                m && "tw-font-medium"
              ]),
              title: I ? n : void 0,
              children: n
            }
          ),
          i && /* @__PURE__ */ r(
            "span",
            {
              ref: d,
              "data-test-id": `${a}-helper-text`,
              className: o([
                "tw-text-ellipsis tw-overflow-hidden",
                "tw-font-sans tw-text-xs tw-font-normal",
                s ? "text-disabled" : "tw-text-text-weak"
              ]),
              title: H ? i : void 0,
              children: i
            }
          )
        ] })
      ] })
    }
  ) }) });
}, ue = T(de);
ue.displayName = "FondueCheckbox";
export {
  ue as Checkbox,
  ie as CheckboxEmphasis,
  le as CheckboxSize,
  se as CheckboxState
};
//# sourceMappingURL=Checkbox.es.js.map
