import { defineComponent as w, inject as V, useCssModule as B, openBlock as n, createElementBlock as p, normalizeClass as f, unref as e, Fragment as C, renderList as G, createElementVNode as c, toDisplayString as $, provide as j, computed as v, ref as I, useTemplateRef as D, onMounted as q, onUnmounted as L, watchEffect as U, createBlock as M, mergeProps as A, withCtx as N, renderSlot as E, resolveDynamicComponent as P } from "vue";
import { uniqueId as F } from "es-toolkit/compat";
import { i as J, a as Z } from "./templateRefNarrowing-CeANDylX.js";
import { R as g } from "./RadioGroup.keys-CqfiKkNz.js";
import { _ as k } from "./_plugin-vue_export-helper-CHgC5LLL.js";
import { _ as H } from "./Field.vue_vue_type_script_setup_true_lang-CJUQxQdh.js";
const K = ["id", "name", "value", "checked", "disabled"], Q = ["for"], X = /* @__PURE__ */ w({
  __name: "VariantButton",
  setup(_) {
    const d = V(g.key);
    if (!d)
      throw new Error("VariantButton must be used with a RadioGroup instance.");
    const { name: o, disabled: a, fullWidth: m, modelValue: u, options: b, update: i } = d, l = B();
    return (y, r) => (n(), p("div", {
      class: f(["flex", e(l).root])
    }, [
      (n(!0), p(C, null, G(e(b), (t) => (n(), p("div", {
        key: `${e(o)}-${t.id}`,
        class: f([{ "w-full": e(m) }])
      }, [
        c("input", {
          id: `${e(o)}-${t.id}`,
          class: "sr-only",
          type: "radio",
          name: e(o),
          value: t.value,
          checked: e(u) === t.value,
          disabled: e(a) || t.disabled,
          onInput: r[0] || (r[0] = //@ts-ignore
          (...h) => e(i) && e(i)(...h))
        }, null, 40, K),
        c("label", {
          for: `${e(o)}-${t.id}`
        }, $(t.text), 9, Q)
      ], 2))), 128))
    ], 2));
  }
}), Y = "_root_GisVR", ee = {
  root: Y
}, te = {
  $style: ee
}, ae = /* @__PURE__ */ k(X, [["__cssModules", te]]), oe = ["id", "name", "value", "checked", "disabled"], se = ["for"], le = /* @__PURE__ */ w({
  __name: "VariantChip",
  setup(_) {
    const d = V(g.key);
    if (!d)
      throw new Error("VariantChip must be used with a RadioGroup instance.");
    const { name: o, disabled: a, fullWidth: m, modelValue: u, options: b, update: i } = d, l = B();
    return (y, r) => (n(), p("div", {
      class: f(["my-1.5 flex flex-wrap", e(l).root])
    }, [
      (n(!0), p(C, null, G(e(b), (t) => (n(), p("div", {
        key: `${e(o)}-${t.id}`,
        class: f([{ "w-full": e(m) }])
      }, [
        c("input", {
          id: `${e(o)}-${t.id}`,
          class: "sr-only",
          type: "radio",
          name: e(o),
          value: t.value,
          checked: e(u) === t.value,
          disabled: e(a) || t.disabled,
          onInput: r[0] || (r[0] = //@ts-ignore
          (...h) => e(i) && e(i)(...h))
        }, null, 40, oe),
        c("label", {
          for: `${e(o)}-${t.id}`
        }, $(t.text), 9, se)
      ], 2))), 128))
    ], 2));
  }
}), re = "_root_y97IG", ne = {
  root: re
}, ie = {
  $style: ne
}, de = /* @__PURE__ */ k(le, [["__cssModules", ie]]), ue = ["id", "name", "value", "checked", "disabled"], ce = ["for"], pe = /* @__PURE__ */ w({
  __name: "VariantRadio",
  setup(_) {
    const d = V(g.key);
    if (!d)
      throw new Error("VariantRadio must be used with a RadioGroup instance.");
    const { name: o, disabled: a, fullWidth: m, modelValue: u, options: b, update: i } = d, l = B();
    return (y, r) => (n(), p("div", {
      class: f(["flex flex-wrap", e(l).root])
    }, [
      (n(!0), p(C, null, G(e(b), (t) => (n(), p("div", {
        key: `${e(o)}-${t.id}`,
        class: f([{ "w-full": e(m) }])
      }, [
        c("input", {
          id: `${e(o)}-${t.id}`,
          type: "radio",
          name: e(o),
          value: t.value,
          checked: e(u) === t.value,
          disabled: e(a) || t.disabled,
          onInput: r[0] || (r[0] = //@ts-ignore
          (...h) => e(i) && e(i)(...h))
        }, null, 40, ue),
        c("label", {
          for: `${e(o)}-${t.id}`
        }, $(t.text), 9, ce)
      ], 2))), 128))
    ], 2));
  }
}), _e = "_root_-gLp0", fe = {
  root: _e
}, ve = {
  $style: fe
}, me = /* @__PURE__ */ k(pe, [["__cssModules", ve]]), be = ["for"], he = ["id", "name", "value", "checked", "disabled"], $e = { class: "m-0 text-ice-900" }, ye = { class: "m-0 text-ice-700" }, xe = /* @__PURE__ */ w({
  __name: "VariantTile",
  setup(_) {
    const d = V(g.key);
    if (!d)
      throw new Error("VariantTile must be used with a RadioGroup instance.");
    const { name: o, disabled: a, fullWidth: m, modelValue: u, options: b, update: i } = d, l = B();
    return (y, r) => (n(), p("div", {
      class: f(["flex flex-wrap", e(l).root])
    }, [
      (n(!0), p(C, null, G(e(b), (t) => (n(), p("label", {
        key: `${e(o)}-${t.id}`,
        class: f([e(l)["tile-container"], { "w-full": e(m) }]),
        for: `${e(o)}-${t.id}`
      }, [
        c("div", {
          class: f(["flex border", [
            e(l)["tile-header"],
            {
              "border-blue-500 bg-blue-100 text-ice-900": e(u) === t.value,
              "border-ice-500 bg-ice-100 text-ice-700": e(u) !== t.value
            }
          ]])
        }, [
          c("input", {
            id: `${e(o)}-${t.id}`,
            class: "sr-only",
            type: "radio",
            name: e(o),
            value: t.value,
            checked: e(u) === t.value,
            disabled: e(a) || t.disabled,
            onInput: r[0] || (r[0] = //@ts-ignore
            (...h) => e(i) && e(i)(...h))
          }, null, 40, he),
          c("div", null, [
            c("span", null, $(t.text), 1)
          ])
        ], 2),
        c("div", {
          class: f(["border-x border-b", [
            e(l)["tile-body"],
            {
              "border-ice-500": e(u) !== t.value,
              "border-blue-500": e(u) === t.value
            }
          ]])
        }, [
          c("p", $e, $(t.subTitle), 1),
          c("p", ye, $(t.subText), 1)
        ], 2)
      ], 10, be))), 128))
    ], 2));
  }
}), we = "_root_BUqpG", Be = {
  root: we,
  "tile-container": "_tile-container_5ezBv",
  "tile-header": "_tile-header_UTS77",
  "tile-body": "_tile-body_ga5dj"
}, ge = {
  $style: Be
}, ke = /* @__PURE__ */ k(xe, [["__cssModules", ge]]);
var x = /* @__PURE__ */ ((_) => (_.Radio = "radio", _.Button = "button", _.Chip = "chip", _.Tile = "tile", _))(x || {});
const Re = /* @__PURE__ */ w({
  __name: "RadioGroup",
  props: {
    name: { default: void 0 },
    options: { default: void 0 },
    modelValue: { default: void 0 },
    variant: { default: "radio" },
    fullWidth: { type: Boolean, default: !1 },
    orientation: { default: "horizontal" },
    addBottomSpace: { type: Boolean },
    errorText: {},
    hintText: {},
    id: {},
    errorId: {},
    isReadOnly: { type: Boolean },
    isRequired: { type: Boolean },
    label: {},
    showOptionalInLabel: { type: Boolean },
    isLabelSrOnly: { type: Boolean },
    fieldset: { type: Boolean },
    isDisabled: { type: Boolean },
    disabled: { type: Boolean }
  },
  emits: ["update:modelValue"],
  setup(_, { emit: d }) {
    const o = {
      [x.Button]: ae,
      [x.Chip]: de,
      [x.Radio]: me,
      [x.Tile]: ke
    }, a = _, m = d, u = B();
    function b(s) {
      m("update:modelValue", s.target.value);
    }
    const i = F("radio-group-field-error-");
    j(g.key, {
      name: v(() => a.name),
      disabled: v(() => a.isDisabled || a.disabled),
      fullWidth: v(() => a.fullWidth),
      modelValue: v(() => a.modelValue),
      options: v(() => a.options),
      variant: v(() => a.variant),
      orientation: v(() => l.value),
      update: b
    });
    const l = I(a.orientation), y = v(() => ({
      "flex-wrap": a.variant !== "button",
      "gap-x-1.5 gap-y-3": a.variant === "chip" && l.value === "horizontal",
      "gap-6": a.variant === "radio" || a.variant === "tile" || a.variant === "chip" && l.value === "vertical",
      "flex-col": l.value === "vertical"
    })), r = I(null), t = D("radioGroup"), h = v(() => {
      const s = t.value;
      return J(s) ? s.$el.parentElement : null;
    }), W = v(() => {
      if (a.variant !== "button")
        return [];
      const s = Z(t.value);
      return s ? Array.from(s.querySelectorAll("[data-variant-button]")) : [];
    });
    function z() {
      return W.value.reduce((s, R) => {
        const S = R.getBoundingClientRect().width;
        return s + S;
      }, 0);
    }
    const T = I(0), O = (s) => {
      l.value = T.value > s.contentBoxSize[0].inlineSize ? "vertical" : a.orientation;
    };
    return q(() => {
      if (a.variant === "button" && !a.fullWidth) {
        T.value = z(), r.value = new ResizeObserver((R) => O(R[0]));
        const s = h.value;
        s && r.value.observe(s);
      }
    }), L(() => {
      var s;
      a.variant === "button" && r.value && ((s = r.value) == null || s.disconnect());
    }), U(() => {
      l.value = a.orientation;
    }), (s, R) => (n(), M(H, A(a, {
      ref: "radioGroup",
      class: ["stash-radio-group", e(u)["stash-radio-group"]],
      "data-test": "stash-radio-group",
      "aria-errormessage": e(i),
      "error-id": e(i),
      "aria-invalid": !!a.errorText,
      role: "radiogroup",
      fieldset: ""
    }), {
      default: N(() => [
        a.options ? E(s.$slots, "default", { key: 0 }, () => [
          (n(), M(P(o[a.variant])))
        ]) : (n(), p("div", {
          key: 1,
          class: f(["flex", y.value]),
          "data-test": "stash-radio-group|default-slot"
        }, [
          E(s.$slots, "default")
        ], 2))
      ]),
      _: 3
    }, 16, ["class", "aria-errormessage", "error-id", "aria-invalid"]));
  }
}), Ve = {
  "stash-radio-group": "_stash-radio-group_E6ZR7"
}, Ce = {
  $style: Ve
}, ze = /* @__PURE__ */ k(Re, [["__cssModules", Ce]]);
export {
  g as RADIO_GROUP_INJECTION,
  x as RadioGroupVariant,
  ze as default
};
//# sourceMappingURL=RadioGroup.js.map
