import { jsxs as t, jsx as e, Fragment as k } from "react/jsx-runtime";
import { forwardRef as R, useState as D, useCallback as G } from "react";
import { cx as H } from "../../utils/classNames.js";
import { useArrowTheme as J } from "../../hooks/useArrowTheme.js";
function K() {
  return /* @__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" })
    }
  );
}
const P = R(
  ({
    id: r,
    formId: g,
    label: x,
    value: l,
    defaultValue: f = "",
    maxLength: a,
    inverse: _,
    disabled: c = !1,
    readOnly: h = !1,
    errorMessage: N = "",
    supportingText: S = "",
    required: p = !1,
    name: b,
    placeholder: w = "",
    isCompact: u,
    className: y,
    onChange: n,
    onFocus: I,
    onBlur: T,
    ...V
  }, j) => {
    const z = J(), A = _ ?? z.inverse, [E, M] = D(String(f)), s = l !== void 0 ? l : E, i = N.trim(), m = S.trim(), o = a !== void 0, B = i.length > 0 || o && s.length > a, F = G(
      (v) => {
        l === void 0 && M(v.target.value), n == null || n(v);
      },
      [n, l]
    ), d = [];
    return i && d.push(r + "-error-message"), m && d.push(r + "-supporting-text"), o && d.push(r + "-character-count"), /* @__PURE__ */ t(
      "div",
      {
        className: H("tdds-text-area", y),
        "data-inverse": String(A),
        children: [
          /* @__PURE__ */ t(
            "div",
            {
              className: "tdds-text-area__wrapper",
              "data-disabled": String(c),
              "data-complete": String(!!s),
              "data-compact": u !== void 0 ? String(u) : void 0,
              children: [
                /* @__PURE__ */ t("label", { htmlFor: r, className: "tdds-text-area__label", children: [
                  x,
                  /* @__PURE__ */ e("span", { "aria-hidden": "true", children: p ? "*" : null })
                ] }),
                /* @__PURE__ */ e(
                  "textarea",
                  {
                    ref: j,
                    className: "tdds-text-area__input",
                    id: r,
                    form: g,
                    placeholder: w,
                    readOnly: c || h,
                    maxLength: a,
                    "aria-disabled": c || h || void 0,
                    "aria-invalid": B || void 0,
                    "aria-readonly": h || void 0,
                    "aria-describedby": d.length > 0 ? d.join(" ") : void 0,
                    required: p,
                    name: b,
                    value: s,
                    onChange: F,
                    onFocus: I,
                    onBlur: T,
                    ...V
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ t("div", { className: "tdds-text-area__messages", children: [
            /* @__PURE__ */ t("div", { className: "tdds-text-area__support-messages", children: [
              /* @__PURE__ */ e(
                "p",
                {
                  id: r + "-error-message",
                  className: "tdds-text-area__error-message",
                  "aria-hidden": !i || void 0,
                  children: i ? /* @__PURE__ */ t(k, { children: [
                    /* @__PURE__ */ e(K, {}),
                    i
                  ] }) : null
                }
              ),
              /* @__PURE__ */ e(
                "p",
                {
                  id: r + "-supporting-text",
                  className: "tdds-text-area__supporting-text",
                  "aria-hidden": !m || void 0,
                  children: m || null
                }
              )
            ] }),
            /* @__PURE__ */ e(
              "p",
              {
                id: r + "-character-count",
                className: "tdds-text-area__character-count",
                "aria-hidden": "true",
                children: o ? s.length + "/" + a : null
              }
            ),
            /* @__PURE__ */ e("span", { className: "tdds:screen-reader-only", role: "status", children: o ? s.length + " of " + a + " characters entered" : null })
          ] })
        ]
      }
    );
  }
);
P.displayName = "TextArea";
export {
  P as TextArea
};
//# sourceMappingURL=TextArea.js.map
