import { jsxs as m, jsx as r, Fragment as L } from "react/jsx-runtime";
import { forwardRef as O, useState as R, useCallback as f } from "react";
import { cx as q } from "../../utils/classNames.js";
import { dataAttrs as B } from "../../utils/dataAttributes.js";
import { useArrowTheme as C } from "../../hooks/useArrowTheme.js";
import { useFloatingLabel as G } from "../../hooks/useFloatingLabel.js";
function H() {
  return /* @__PURE__ */ r(
    "svg",
    {
      role: "img",
      "aria-label": "error",
      width: "12",
      height: "12",
      viewBox: "0 0 24 24",
      fill: "currentColor",
      children: /* @__PURE__ */ r("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" })
    }
  );
}
const J = O(
  ({
    id: t,
    name: _,
    label: b,
    options: g,
    value: a,
    defaultValue: N = "",
    required: u = !1,
    errorMessage: x = "",
    supportingText: S = "",
    inverse: k,
    disabled: i = !1,
    active: v,
    className: w,
    onChange: d,
    onFocus: s,
    onBlur: o,
    ...y
  }, A) => {
    const I = C(), V = k ?? I.inverse, [j, z] = R(String(N)), h = a !== void 0 ? a : j, l = x.trim(), p = S.trim(), { handlers: n, trackDataAttributes: T } = G({
      value: h,
      disabled: i,
      readOnly: !1
    }), D = v !== void 0 ? B({
      active: v,
      complete: h !== "",
      disabled: i
    }) : T, E = f(
      (e) => {
        a === void 0 && z(e.target.value), d == null || d(e);
      },
      [d, a]
    ), M = f(
      (e) => {
        n.onFocus(), s == null || s(e);
      },
      [n, s]
    ), F = f(
      (e) => {
        n.onBlur(), o == null || o(e);
      },
      [n, o]
    ), c = [];
    return l && c.push(t + "-error"), p && c.push(t + "-optional"), /* @__PURE__ */ m(
      "div",
      {
        className: q("tdds-field", w),
        ...V ? { "data-inverse": "true" } : {},
        children: [
          /* @__PURE__ */ m("div", { className: "tdds-field__track", ...D, children: [
            /* @__PURE__ */ m("label", { htmlFor: t, className: "tdds-field__label", children: [
              b,
              u ? /* @__PURE__ */ r("span", { "aria-hidden": "true", children: "*" }) : null
            ] }),
            /* @__PURE__ */ r(
              "select",
              {
                ref: A,
                id: t,
                name: _,
                "aria-disabled": i || void 0,
                "aria-invalid": l.length > 0 || void 0,
                "aria-describedby": c.length > 0 ? c.join(" ") : void 0,
                "aria-required": u || void 0,
                className: "tdds-field__select",
                value: h,
                onChange: E,
                onFocus: M,
                onBlur: F,
                ...y,
                children: g.map((e) => /* @__PURE__ */ r(
                  "option",
                  {
                    value: e.value,
                    disabled: i || e.disabled,
                    children: e.label
                  },
                  e.value
                ))
              }
            )
          ] }),
          /* @__PURE__ */ r(
            "p",
            {
              id: t + "-error",
              className: "tdds-field__support tdds-field__support--error",
              "aria-hidden": !l || void 0,
              children: l ? /* @__PURE__ */ m(L, { children: [
                /* @__PURE__ */ r(H, {}),
                l
              ] }) : null
            }
          ),
          /* @__PURE__ */ r(
            "p",
            {
              id: t + "-optional",
              className: "tdds-field__support tdds-field__support--optional",
              "aria-hidden": !p || void 0,
              children: p || null
            }
          )
        ]
      }
    );
  }
);
J.displayName = "Select";
export {
  J as Select
};
//# sourceMappingURL=Select.js.map
