import { jsx as e, jsxs as p, Fragment as ae } from "react/jsx-runtime";
import { forwardRef as ie, useRef as re, useCallback as b } from "react";
import { cx as T } from "../../utils/classNames.js";
import { useArrowTheme as de } from "../../hooks/useArrowTheme.js";
import { useFloatingLabel as le } from "../../hooks/useFloatingLabel.js";
const ne = ie(
  ({
    id: t,
    label: F,
    name: R,
    value: r,
    defaultValue: g,
    onChange: S,
    onBlur: d,
    onFocus: l,
    type: V = "text",
    inputMode: j = "text",
    fieldType: C = "text",
    errorMessage: m,
    supportingText: u,
    disabled: n = !1,
    readOnly: f = !1,
    required: w = !1,
    inverse: H,
    maxLength: I,
    pattern: A,
    placeholder: D,
    trailingDecoration: y,
    trailingButtonLabel: E,
    hasLeadingCCIcon: N = !1,
    showPassword: v,
    formId: Y,
    className: G,
    ...J
  }, a) => {
    var B;
    const K = de(), L = H ?? K.inverse, $ = re(null), M = r !== void 0 ? r : ((B = $.current) == null ? void 0 : B.value) ?? g ?? "", { handlers: o, trackDataAttributes: P } = le({
      value: M,
      disabled: n,
      readOnly: f
    }), Q = b(
      (s) => {
        o.onFocus(), l == null || l(s);
      },
      [o, l]
    ), U = b(
      (s) => {
        o.onBlur(), d == null || d(s);
      },
      [o, d]
    ), W = b(
      (s) => {
        $.current = s, typeof a == "function" ? a(s) : a && (a.current = s);
      },
      [a]
    ), c = m != null && m !== "", x = u != null && u !== "", k = y != null, _ = C === "password", h = v !== void 0, X = h ? v ? "text" : "password" : V, i = [];
    c && i.push(`${t}-error-message`), x && i.push(`${t}-supporting-text`), h && i.push(`${t}-password-state`);
    const Z = i.length > 0 ? i.join(" ") : void 0, q = h ? `${t}-password-state` : `${t}-label`, O = T("tdds-text-field__track", {
      "tdds-text-field__track--decoration": k,
      "tdds-text-field__track--leading-decoration": N
    }), ee = N ? /* @__PURE__ */ e("span", { className: "tdds-text-field__icon-start", "aria-hidden": "true", children: /* @__PURE__ */ e(
      "svg",
      {
        width: "24",
        height: "24",
        viewBox: "0 0 24 24",
        fill: "currentColor",
        children: /* @__PURE__ */ e("path", { d: "M20 4H4c-1.11 0-2 .89-2 2v12c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z" })
      }
    ) }) : null, z = k ? /* @__PURE__ */ e(
      "button",
      {
        type: "button",
        className: "tdds-text-field__button-end",
        "aria-label": E,
        "aria-describedby": q,
        "aria-disabled": n || void 0,
        children: /* @__PURE__ */ e("span", { className: "tdds-text-field__icon-end", children: y })
      }
    ) : null, te = h ? /* @__PURE__ */ e("span", { id: `${t}-password-state`, className: "tdds:screen-reader-only", children: v ? "Your password is visible" : "Your password is hidden" }) : null, se = /* @__PURE__ */ e(
      "input",
      {
        ref: W,
        className: "tdds-text-field__input",
        id: t,
        name: R,
        type: X,
        inputMode: j,
        value: r,
        defaultValue: r === void 0 ? g : void 0,
        onChange: S,
        onFocus: Q,
        onBlur: U,
        readOnly: n || f,
        required: w,
        maxLength: I,
        pattern: A,
        placeholder: D,
        form: Y,
        "aria-invalid": c || void 0,
        "aria-describedby": Z,
        "aria-disabled": n || void 0,
        "aria-readonly": f || void 0,
        ...J
      }
    );
    return /* @__PURE__ */ p(
      "div",
      {
        className: T("tdds-text-field", G),
        ...L ? { "data-inverse": "true" } : {},
        children: [
          /* @__PURE__ */ p("div", { className: O, ...P, children: [
            ee,
            /* @__PURE__ */ p(
              "label",
              {
                htmlFor: t,
                className: "tdds-text-field__label",
                id: `${t}-label`,
                children: [
                  F,
                  w && /* @__PURE__ */ e("span", { "aria-hidden": "true", children: "*" })
                ]
              }
            ),
            _ && te,
            _ && z,
            se,
            !_ && z
          ] }),
          /* @__PURE__ */ e(
            "p",
            {
              id: `${t}-error-message`,
              className: "tdds-text-field__error-message",
              "aria-hidden": !c || void 0,
              children: c && /* @__PURE__ */ p(ae, { children: [
                /* @__PURE__ */ e(
                  "svg",
                  {
                    role: "img",
                    "aria-label": "error",
                    width: "12",
                    height: "12",
                    viewBox: "0 0 24 24",
                    fill: "currentColor",
                    children: /* @__PURE__ */ e("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" })
                  }
                ),
                m
              ] })
            }
          ),
          /* @__PURE__ */ e(
            "p",
            {
              id: `${t}-supporting-text`,
              className: "tdds-text-field__supporting-text",
              "aria-hidden": !x || void 0,
              children: x ? u : null
            }
          )
        ]
      }
    );
  }
);
ne.displayName = "TextField";
export {
  ne as TextField
};
//# sourceMappingURL=TextField.js.map
