import { jsxs as V, jsx as a } from "react/jsx-runtime";
import { useFocusRing as j } from "@react-aria/focus";
import { useMemo as o } from "react";
import { InputLabel as W } from "../InputLabel/InputLabel.es.js";
import { useMemoizedId as $ } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as D } from "../../utilities/focusStyle.es.js";
import { merge as n } from "../../utilities/merge.es.js";
const Y = "switch-container", L = {
  small: "tw-w-[22px] tw-h-3",
  medium: "tw-w-[30px] tw-h-4"
}, w = {
  small: {
    dimensions: "tw-w-3 tw-h-3",
    activeWidth: "group-active:tw-w-[14px]",
    activeTranslation: "tw-translate-x-[9px]"
  },
  medium: {
    dimensions: "tw-w-4 tw-h-4",
    activeWidth: "group-active:tw-w-[18px]",
    activeTranslation: "tw-translate-x-[13px]"
  }
}, p = "tw-w-2 tw-h-[1px]", T = ({
  id: C,
  name: f,
  label: c,
  disabled: e,
  onChange: h,
  size: s = "medium",
  mode: t = "off",
  labelStyle: v = "default",
  ariaLabel: g,
  hug: x = !1,
  tooltip: F,
  "data-test-id": u = "switch"
}) => {
  const r = $(C), { isFocusVisible: m, focusProps: k } = j(), O = o(() => n(["tw-group tw-border tw-inline-flex tw-rounded-full tw-shrink-0 tw-p-0 tw-transition-colors", e && t === "indeterminate" ? "tw-flex tw-items-center tw-justify-center tw-bg-box-disabled tw-border-line tw-pointer-events-none" : e ? "tw-bg-box-disabled tw-border-line tw-pointer-events-none" : t === "indeterminate" ? "tw-bg-text-weak tw-flex tw-items-center tw-justify-center hover:tw-bg-text" : t === "on" ? "tw-bg-text-weak tw-border-line-xx-strong hover:tw-bg-text" : "tw-bg-box-neutral tw-border-line-x-strong hover:tw-bg-box-neutral-hover", L[s], m && D]), [t, e, s, m]), S = o(() => {
    const i = "tw-relative tw-self-center tw-transition-transform", d = t === "on" ? w[s].activeTranslation : "", l = e && t === "indeterminate" ? "tw-bg-text-disabled" : t === "indeterminate" ? "tw-bg-base" : d;
    return n([
      i,
      t === "indeterminate" ? p : w[s].dimensions,
      l
    ]);
  }, [e, t, s]), y = o(() => {
    const i = "tw-border tw-bg-base tw-rounded-full tw-absolute tw-block tw-self-center tw-transition-width tw-duration-75", b = t === "indeterminate" ? "tw-hidden" : t === "on" ? "tw-right-0  tw-translate-x-px" : "tw-left-0", l = e ? "tw-border-line-strong" : n(["tw-bg-base tw-border-line-xx-strong", w[s].activeWidth]);
    return n([
      i,
      t === "indeterminate" ? p : w[s].dimensions,
      b,
      l
    ]);
  }, [t, e, s]), N = o(
    () => n(["tw-gap-2 tw-items-center tw-justify-between", x ? "tw-inline-flex" : "tw-flex"]),
    [x]
  );
  return /* @__PURE__ */ V("div", { className: N, "data-test-id": `${u}-container`, children: [
    c && /* @__PURE__ */ a(W, { clickable: !0, id: `${r}-label`, htmlFor: r, disabled: e, tooltip: F, children: /* @__PURE__ */ a(
      "span",
      {
        "data-test-id": `${u}-label-wrapper`,
        className: v === "default" ? "tw-font-medium tw-text-text-weak" : "tw-font-bold tw-text-text",
        children: c
      }
    ) }),
    /* @__PURE__ */ a(
      "button",
      {
        ...k,
        id: r,
        disabled: e,
        name: f,
        "data-test-id": u,
        className: O,
        value: t,
        onClick: h,
        type: "button",
        role: "switch",
        "aria-checked": t === "on",
        "aria-label": g,
        "aria-labelledby": c ? `${r}-label` : void 0,
        children: /* @__PURE__ */ a("div", { className: S, children: /* @__PURE__ */ a("div", { className: y }) })
      }
    )
  ] });
};
T.displayName = "FondueSwitch";
export {
  Y as SWITCH_ID,
  T as Switch
};
//# sourceMappingURL=Switch.es.js.map
