@versini/ui-textarea 4.0.0 → 4.0.2

package/dist/components/TextArea/TextArea.js

@@ -1,6 +1,526 @@
-import "react/jsx-runtime";
-import { TextArea as m } from "../../index.js";
-import "react";
+import { jsx as g, jsxs as pe } from "react/jsx-runtime";
+import ye, { useRef as f, useCallback as me, useEffect as S, useMemo as J, useState as _, useId as xe, useReducer as he, useLayoutEffect as L } from "react";
+import c from "clsx";
+const K = "av-text-area", Ae = "av-text-area-wrapper", F = "av-text-area-helper-text", ge = "av-text-area__control--right", Te = "av-text-area__control--left";
+function ke() {
+  const e = f(!1);
+  return S(() => (e.current = !0, () => {
+    e.current = !1;
+  }), []), me(() => e.current, []);
+}
+function be(e) {
+  return J(() => e.every((r) => r == null) ? () => {
+  } : (r) => {
+    e.forEach((t) => {
+      typeof t == "function" ? t(r) : t != null && (t.current = r);
+    });
+  }, e);
+}
+const ve = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0
+};
+function W(e) {
+  const r = ke(), t = f(0), n = f(null), [a, o] = _(ve), s = J(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((l) => {
+    const u = l[0];
+    u && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
+      n.current && r() && o(u.contentRect);
+    }));
+  }), [r]);
+  return S(() => (n.current && (s == null || s.observe(n.current, e)), () => {
+    s == null || s.disconnect(), t.current && cancelAnimationFrame(t.current);
+  }), [s, e]), [n, a];
+}
+function Re({
+  value: e,
+  defaultValue: r,
+  finalValue: t,
+  onChange: n = () => {
+  },
+  initialControlledDelay: a = 0
+}) {
+  const [o, s] = _(!1), [l, u] = _(
+    r !== void 0 ? r : t
+  ), p = (y) => {
+    u(y), n == null || n(y);
+  };
+  return S(() => {
+    (async () => e !== void 0 && !o && a > 0 && (await new Promise(
+      (y) => setTimeout(y, a)
+    ), s(!0)))();
+  }, [e, a, o]), e !== void 0 ? !o && a > 0 ? ["", n, !0] : [e, n, !0] : [l, p, !1];
+}
+function _e(e) {
+  const r = xe();
+  if (!e)
+    return r;
+  if (typeof e == "number" || typeof e == "string")
+    return `${e}${r}`;
+  if (typeof e == "object") {
+    const { id: t, prefix: n = "" } = e;
+    return typeof t == "number" || typeof t == "string" ? `${n}${t}` : `${n}${r}`;
+  }
+}
+const Q = "SET_ANNOUNCEMENT", Y = "CLEAR_ANNOUNCEMENT", Ne = {
+  alert: null,
+  alertdialog: null,
+  log: "polite",
+  marquee: null,
+  progressbar: null,
+  status: "polite",
+  timer: "assertive"
+}, Ce = (e, r) => {
+  switch (r == null ? void 0 : r.type) {
+    case Q:
+      return {
+        ...e,
+        announcement: r.payload
+      };
+    case Y:
+      return {
+        ...e,
+        announcement: null
+      };
+    default:
+      return e;
+  }
+}, Ee = ({
+  onAnnouncementClear: e,
+  dispatch: r
+}) => {
+  r({
+    type: Y
+  }), typeof e == "function" && e();
+}, q = ({
+  children: e,
+  clearAnnouncementDelay: r,
+  clearAnnouncementTimeoutRef: t,
+  onAnnouncementClear: n,
+  dispatch: a
+}) => {
+  clearTimeout(t.current), e !== null && a({
+    type: Q,
+    payload: e
+  }), r && (t.current = setTimeout(
+    () => Ee({
+      onAnnouncementClear: n,
+      dispatch: a
+    }),
+    r
+  ));
+}, Le = ({
+  children: e,
+  announcementTimeoutRef: r,
+  announcementDelay: t,
+  clearAnnouncementDelay: n,
+  clearAnnouncementTimeoutRef: a,
+  onAnnouncementClear: o,
+  dispatch: s
+}) => {
+  clearTimeout(r.current), t ? r.current = setTimeout(q, t, {
+    children: e,
+    clearAnnouncementDelay: n,
+    clearAnnouncementTimeoutRef: a,
+    onAnnouncementClear: o,
+    dispatch: s
+  }) : q({
+    children: e,
+    clearAnnouncementDelay: n,
+    clearAnnouncementTimeoutRef: a,
+    onAnnouncementClear: o,
+    dispatch: s
+  });
+};
+function Oe({
+  children: e,
+  className: r,
+  politeness: t,
+  role: n = null,
+  announcementDelay: a,
+  clearAnnouncementDelay: o,
+  onAnnouncementClear: s,
+  visible: l,
+  ...u
+}) {
+  const p = f(null), y = f(null), [b, N] = he(Ce, {
+    announcement: null
+  });
+  let T = t;
+  typeof T > "u" && (T = n ? Ne[n] : "assertive"), S(() => {
+    Le({
+      announcementTimeoutRef: p,
+      announcementDelay: a,
+      children: e,
+      clearAnnouncementDelay: o,
+      clearAnnouncementTimeoutRef: y,
+      onAnnouncementClear: s,
+      dispatch: N
+    });
+  }, [
+    e,
+    a,
+    o,
+    s
+  ]);
+  const d = c(r, {
+    "sr-only": !l
+  });
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      "aria-live": T,
+      ...n && { role: n },
+      className: d,
+      ...u,
+      children: b.announcement
+    }
+  );
+}
+/*!
+  @versini/ui-liveregion v2.0.2
+  © 2025 gizmette.com
+*/
+try {
+  window.__VERSINI_UI_LIVEREGION__ || (window.__VERSINI_UI_LIVEREGION__ = {
+    version: "2.0.2",
+    buildTime: "04/12/2025 09:18 AM EDT",
+    homepage: "https://github.com/aversini/ui-components",
+    license: "MIT"
+  });
+} catch {
+}
+const Ie = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hidden px-4 py-7", Se = ({ mode: e }) => c({
+  "bg-surface-darker text-copy-lighter caret-copy-light": e === "dark",
+  "bg-surface-lighter text-copy-dark caret-copy-dark": e === "light",
+  "bg-surface-lighter text-copy-dark caret-copy-dark dark:bg-surface-darker dark:text-copy-lighter dark:caret-copy-light": e === "system",
+  "bg-surface-darker text-copy-lighter caret-copy-light dark:bg-surface-lighter dark:text-copy-dark dark:caret-copy-dark": e === "alt-system"
+}), $e = ({
+  focusMode: e
+}) => c("focus:outline focus:outline-2 focus:outline-offset-2", {
+  "focus:outline-focus-dark": e === "dark",
+  "focus:outline-focus-light": e === "light",
+  "focus:outline-focus-light dark:focus:outline-focus-dark": e === "alt-system",
+  "focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
+}), we = ({
+  noBorder: e,
+  error: r
+}) => c("border-2", {
+  "border-border-dark": !e && !r,
+  "focus:border-border-dark": !e && r,
+  "border-border-error-dark": !e && r,
+  "border-transparent": e
+}), De = ({
+  disabled: e,
+  raw: r,
+  error: t,
+  mode: n,
+  leftElement: a,
+  rightElement: o
+}) => {
+  if (r)
+    return "";
+  if (e)
+    return c(
+      "transform translate-y-0 scale-100 absolute px-2 cursor-not-allowed opacity-50 font-medium",
+      {
+        "translate-x-[12px]": o === !0 && !a || !o && !a
+      }
+    );
+  if (!t)
+    return c(
+      "absolute px-2 cursor-text font-medium transform translate-y-0 scale-100",
+      {
+        "translate-x-[12px]": o === !0 && !a || !o && !a,
+        "text-copy-medium": n === "dark",
+        "text-copy-dark": n === "light",
+        "text-copy-dark dark:text-copy-medium": n === "system",
+        "text-copy-medium dark:text-copy-dark": n === "alt-system"
+      }
+    );
+  if (t)
+    return c(
+      "absolute px-2 cursor-text font-medium transform translate-y-0 scale-100",
+      {
+        "translate-x-[12px]": o === !0 && !a || !o && !a,
+        "text-copy-medium": n === "dark",
+        "text-copy-error-dark": n === "light",
+        "text-copy-error-dark dark:text-copy-error-light": n === "system",
+        "text-copy-medium dark:text-copy-error-dark": n === "alt-system"
+      }
+    );
+}, He = ({
+  error: e,
+  raw: r,
+  mode: t,
+  disabled: n
+}) => {
+  if (r)
+    return "";
+  if (n)
+    return c(
+      F,
+      "absolute px-2 cursor-not-allowed opacity-50 font-medium"
+    );
+  if (!e)
+    return c(F, "absolute px-2 font-medium", {
+      "text-copy-medium": t === "dark",
+      "text-copy-dark": t === "light",
+      "text-copy-dark dark:text-copy-medium": t === "system",
+      "text-copy-medium dark:text-copy-dark": t === "alt-system"
+    });
+  if (e)
+    return c(F, "absolute px-2 font-medium", {
+      "text-copy-error-light": t === "dark",
+      "text-copy-error-dark": t === "light",
+      "text-copy-error-dark dark:text-copy-error-light": t === "system",
+      "dark:text-copy-error-dark text-copy-error-light": t === "alt-system"
+    });
+}, Fe = ({
+  className: e,
+  textAreaClassName: r,
+  raw: t,
+  focusMode: n,
+  disabled: a,
+  noBorder: o,
+  error: s,
+  mode: l,
+  leftElement: u,
+  rightElement: p
+}) => {
+  const y = t ? e : c(
+    "relative flex w-full flex-col justify-center",
+    Ae,
+    e
+  ), b = t ? c(r) : c(
+    K,
+    r,
+    Ie(),
+    Se({ mode: l }),
+    $e({ focusMode: n }),
+    we({
+      noBorder: o,
+      error: s
+    }),
+    {
+      "disabled:cursor-not-allowed disabled:opacity-50": a
+    }
+  ), N = t ? void 0 : "sr-only", T = De({
+    disabled: a,
+    raw: t,
+    error: s,
+    mode: l,
+    rightElement: p,
+    leftElement: u
+  }), d = He({
+    error: s,
+    raw: t,
+    mode: l,
+    disabled: a
+  }), C = t ? void 0 : c(ge, "absolute"), h = t ? void 0 : c(Te, "absolute");
+  return {
+    wrapper: y,
+    textArea: b,
+    accessibleLabel: N,
+    visibleLabel: T,
+    helperText: d,
+    rightElement: C,
+    leftElement: h
+  };
+}, Pe = ({
+  scrollHeight: e,
+  currentHeight: r,
+  currentLabelOffset: t = 0,
+  currentHelperTextOffset: n = 0
+}) => {
+  let s, l;
+  if (e > 0 && e !== r) {
+    const u = e - r, p = Math.abs(u / 24);
+    s = t + -1 * Math.sign(u) * (12 * p), l = n + Math.sign(u) * (12 * p);
+  }
+  return {
+    labelOffset: s,
+    helperTextOffset: l,
+    scrollHeight: e
+  };
+}, Me = ye.forwardRef(
+  ({
+    id: e,
+    name: r,
+    label: t,
+    error: n = !1,
+    raw: a = !1,
+    className: o,
+    textAreaClassName: s,
+    mode: l = "system",
+    focusMode: u = "system",
+    value: p,
+    defaultValue: y,
+    disabled: b = !1,
+    noBorder: N = !1,
+    labelId: T,
+    helperText: d = "",
+    helperTextOnFocus: C = !1,
+    rightElement: h,
+    leftElement: v,
+    onChange: P,
+    onFocus: M,
+    onBlur: U,
+    ...Z
+  }, ee) => {
+    var B;
+    const x = f(null), te = be([ee, x]), [re, O] = W(), [ne, R] = W(), $ = f(80), V = f(-25), m = f(null), X = f(30), I = f(null), E = _e({ id: e, prefix: `${K}-` }), [j, ae] = _(0), [G, oe] = _(0), [se, z] = _(
+      !!(!C && d)
+    ), ce = `${r} error, ${d}`, k = Fe({
+      className: o,
+      textAreaClassName: s,
+      error: n,
+      raw: a,
+      focusMode: u,
+      disabled: b,
+      noBorder: N,
+      mode: l,
+      rightElement: !!h,
+      leftElement: !!v
+    }), [A, le] = Re({
+      value: p,
+      initialControlledDelay: 20,
+      defaultValue: y,
+      onChange: (i) => {
+        P && P({
+          target: {
+            value: i
+          }
+        });
+      }
+    }), ue = (i) => {
+      le(i.target.value);
+    }, ie = (i) => {
+      C && d && z(!0), M && M(i);
+    }, de = (i) => {
+      C && d && !A && z(!1), U && U(i);
+    };
+    return L(() => {
+      O && O.width && ae(O.width + 18 + 10);
+    }, [O]), L(() => {
+      R && R.width && oe(R.width + 18 + 10);
+    }, [R]), L(() => {
+      a || x && x.current && A !== void 0 && (x.current.style.height = "inherit", x.current.style.height = x.current.scrollHeight + "px");
+    }, [A, a]), L(() => {
+      a || setTimeout(() => {
+        var i;
+        (i = m == null ? void 0 : m.current) == null || i.style.setProperty(
+          "--av-text-area-wrapper-transition",
+          A ? "none" : "all 0.2s ease-out"
+        );
+      }, 0);
+    }, [A, a]), L(() => {
+      var i, w;
+      if (!a && x && x.current && A !== void 0) {
+        const { labelOffset: D, helperTextOffset: H, scrollHeight: fe } = Pe({
+          scrollHeight: x.current.scrollHeight,
+          currentHeight: $.current,
+          currentLabelOffset: V.current,
+          currentHelperTextOffset: X.current
+        });
+        D && (V.current = D, (i = m == null ? void 0 : m.current) == null || i.style.setProperty(
+          "--av-text-area-label",
+          `${D}px`
+        )), H && (X.current = H, (w = I == null ? void 0 : I.current) == null || w.style.setProperty(
+          "--av-text-area-helper-text",
+          `${H}px`
+        )), $.current = fe || $.current;
+      }
+    }, [A, a]), R.width > 0 && ((B = m == null ? void 0 : m.current) == null || B.style.setProperty(
+      "--tw-translate-x",
+      `${12 + R.width + 5}px`
+    )), /* @__PURE__ */ pe("div", { className: k.wrapper, children: [
+      /* @__PURE__ */ g(
+        "label",
+        {
+          htmlFor: E,
+          id: T,
+          className: k.accessibleLabel,
+          children: t
+        }
+      ),
+      v && /* @__PURE__ */ g(
+        "div",
+        {
+          ref: ne,
+          className: k.leftElement,
+          children: v
+        }
+      ),
+      /* @__PURE__ */ g(
+        "textarea",
+        {
+          ref: te,
+          id: E,
+          name: r,
+          disabled: b,
+          placeholder: a ? void 0 : " ",
+          className: k.textArea,
+          rows: 1,
+          ...d && { "aria-describedby": `${E}-helper` },
+          ...n && { "aria-invalid": "true" },
+          ...h && !v && !a && { style: { paddingRight: j } },
+          ...v && !h && !a && { style: { paddingLeft: G } },
+          ...h && v && !a && {
+            style: {
+              paddingRight: j,
+              paddingLeft: G
+            }
+          },
+          value: A,
+          onChange: ue,
+          onFocus: ie,
+          onBlur: de,
+          ...Z
+        }
+      ),
+      !a && /* @__PURE__ */ g(
+        "label",
+        {
+          ref: m,
+          "aria-hidden": !0,
+          htmlFor: E,
+          className: `${k.visibleLabel}`,
+          children: t
+        }
+      ),
+      se && /* @__PURE__ */ g(
+        "div",
+        {
+          ref: I,
+          id: `${E}-helper`,
+          className: k.helperText,
+          children: d
+        }
+      ),
+      h && /* @__PURE__ */ g(
+        "div",
+        {
+          ref: re,
+          className: k.rightElement,
+          children: h
+        }
+      ),
+      n && d && /* @__PURE__ */ g(Oe, { politeness: "polite", clearAnnouncementDelay: 500, children: ce })
+    ] });
+  }
+);
+Me.displayName = "TextArea";
 export {
-  m as TextArea
+  K as TEXT_AREA_CLASSNAME,
+  Te as TEXT_AREA_CONTROL_LEFT_CLASSNAME,
+  ge as TEXT_AREA_CONTROL_RIGHT_CLASSNAME,
+  F as TEXT_AREA_HELPER_TEXT_CLASSNAME,
+  Ae as TEXT_AREA_WRAPPER_CLASSNAME,
+  Me as TextArea
 };

package/dist/index.js

@@ -1,539 +1,22 @@
-import { jsx as T, jsxs as pe } from "react/jsx-runtime";
-import ye, { useRef as f, useEffect as S, useCallback as me, useMemo as J, useState as E, useId as xe, useReducer as he, useLayoutEffect as I } from "react";
-import c from "clsx";
+import { TEXT_AREA_CLASSNAME as T, TEXT_AREA_CONTROL_LEFT_CLASSNAME as R, TEXT_AREA_CONTROL_RIGHT_CLASSNAME as e, TEXT_AREA_HELPER_TEXT_CLASSNAME as S, TEXT_AREA_WRAPPER_CLASSNAME as i, TextArea as o } from "./components/TextArea/TextArea.js";
 /*!
-  @versini/ui-textarea v4.0.0
+  @versini/ui-textarea v4.0.2
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_TEXTAREA__ || (window.__VERSINI_UI_TEXTAREA__ = {
-    version: "4.0.0",
-    buildTime: "03/18/2025 07:53 PM EDT",
+    version: "4.0.2",
+    buildTime: "04/12/2025 09:18 AM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const K = "av-text-area", Ae = "av-text-area-wrapper", H = "av-text-area-helper-text", Te = "av-text-area__control--right", ge = "av-text-area__control--left";
-function _e() {
-  const e = f(!1);
-  return S(() => (e.current = !0, () => {
-    e.current = !1;
-  }), []), me(() => e.current, []);
-}
-function be(e) {
-  return J(() => e.every((n) => n == null) ? () => {
-  } : (n) => {
-    e.forEach((t) => {
-      typeof t == "function" ? t(n) : t != null && (t.current = n);
-    });
-  }, e);
-}
-const ke = {
-  x: 0,
-  y: 0,
-  width: 0,
-  height: 0,
-  top: 0,
-  left: 0,
-  bottom: 0,
-  right: 0
-};
-function W(e) {
-  const n = _e(), t = f(0), r = f(null), [a, s] = E(ke), o = J(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((l) => {
-    const u = l[0];
-    u && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
-      r.current && n() && s(u.contentRect);
-    }));
-  }), [n]);
-  return S(() => (r.current && (o == null || o.observe(r.current, e)), () => {
-    o == null || o.disconnect(), t.current && cancelAnimationFrame(t.current);
-  }), [o, e]), [r, a];
-}
-function Re({
-  value: e,
-  defaultValue: n,
-  finalValue: t,
-  onChange: r = () => {
-  },
-  initialControlledDelay: a = 0
-}) {
-  const [s, o] = E(!1), [l, u] = E(
-    n !== void 0 ? n : t
-  ), p = (y) => {
-    u(y), r == null || r(y);
-  };
-  return S(() => {
-    (async () => e !== void 0 && !s && a > 0 && (await new Promise(
-      (y) => setTimeout(y, a)
-    ), o(!0)))();
-  }, [e, a, s]), e !== void 0 ? !s && a > 0 ? ["", r, !0] : [e, r, !0] : [l, p, !1];
-}
-function Ee(e) {
-  const n = xe();
-  if (!e)
-    return n;
-  if (typeof e == "number" || typeof e == "string")
-    return `${e}${n}`;
-  if (typeof e == "object") {
-    const { id: t, prefix: r = "" } = e;
-    return typeof t == "number" || typeof t == "string" ? `${r}${t}` : `${r}${n}`;
-  }
-}
-const Q = "SET_ANNOUNCEMENT", Y = "CLEAR_ANNOUNCEMENT", Ne = {
-  alert: null,
-  alertdialog: null,
-  log: "polite",
-  marquee: null,
-  progressbar: null,
-  status: "polite",
-  timer: "assertive"
-}, ve = (e, n) => {
-  switch (n == null ? void 0 : n.type) {
-    case Q:
-      return {
-        ...e,
-        announcement: n.payload
-      };
-    case Y:
-      return {
-        ...e,
-        announcement: null
-      };
-    default:
-      return e;
-  }
-}, Ce = ({
-  onAnnouncementClear: e,
-  dispatch: n
-}) => {
-  n({
-    type: Y
-  }), typeof e == "function" && e();
-}, q = ({
-  children: e,
-  clearAnnouncementDelay: n,
-  clearAnnouncementTimeoutRef: t,
-  onAnnouncementClear: r,
-  dispatch: a
-}) => {
-  clearTimeout(t.current), e !== null && a({
-    type: Q,
-    payload: e
-  }), n && (t.current = setTimeout(
-    () => Ce({
-      onAnnouncementClear: r,
-      dispatch: a
-    }),
-    n
-  ));
-}, Ie = ({
-  children: e,
-  announcementTimeoutRef: n,
-  announcementDelay: t,
-  clearAnnouncementDelay: r,
-  clearAnnouncementTimeoutRef: a,
-  onAnnouncementClear: s,
-  dispatch: o
-}) => {
-  clearTimeout(n.current), t ? n.current = setTimeout(q, t, {
-    children: e,
-    clearAnnouncementDelay: r,
-    clearAnnouncementTimeoutRef: a,
-    onAnnouncementClear: s,
-    dispatch: o
-  }) : q({
-    children: e,
-    clearAnnouncementDelay: r,
-    clearAnnouncementTimeoutRef: a,
-    onAnnouncementClear: s,
-    dispatch: o
-  });
-};
-function Le({
-  children: e,
-  className: n,
-  politeness: t,
-  role: r = null,
-  announcementDelay: a,
-  clearAnnouncementDelay: s,
-  onAnnouncementClear: o,
-  visible: l,
-  ...u
-}) {
-  const p = f(null), y = f(null), [b, N] = he(ve, {
-    announcement: null
-  });
-  let g = t;
-  typeof g > "u" && (g = r ? Ne[r] : "assertive"), S(() => {
-    Ie({
-      announcementTimeoutRef: p,
-      announcementDelay: a,
-      children: e,
-      clearAnnouncementDelay: s,
-      clearAnnouncementTimeoutRef: y,
-      onAnnouncementClear: o,
-      dispatch: N
-    });
-  }, [
-    e,
-    a,
-    s,
-    o
-  ]);
-  const d = c(n, {
-    "sr-only": !l
-  });
-  return /* @__PURE__ */ T(
-    "div",
-    {
-      "aria-live": g,
-      ...r && { role: r },
-      className: d,
-      ...u,
-      children: b.announcement
-    }
-  );
-}
-/*!
-  @versini/ui-liveregion v2.0.0
-  © 2025 gizmette.com
-*/
-try {
-  window.__VERSINI_UI_LIVEREGION__ || (window.__VERSINI_UI_LIVEREGION__ = {
-    version: "2.0.0",
-    buildTime: "03/18/2025 07:53 PM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
-}
-const Oe = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hidden px-4 py-7", Se = ({ mode: e }) => c({
-  "bg-surface-darker text-copy-lighter caret-copy-light": e === "dark",
-  "bg-surface-lighter text-copy-dark caret-copy-dark": e === "light",
-  "bg-surface-lighter text-copy-dark caret-copy-dark dark:bg-surface-darker dark:text-copy-lighter dark:caret-copy-light": e === "system",
-  "bg-surface-darker text-copy-lighter caret-copy-light dark:bg-surface-lighter dark:text-copy-dark dark:caret-copy-dark": e === "alt-system"
-}), we = ({
-  focusMode: e
-}) => c("focus:outline focus:outline-2 focus:outline-offset-2", {
-  "focus:outline-focus-dark": e === "dark",
-  "focus:outline-focus-light": e === "light",
-  "focus:outline-focus-light dark:focus:outline-focus-dark": e === "alt-system",
-  "focus:outline-focus-dark dark:focus:outline-focus-light": e === "system"
-}), $e = ({
-  noBorder: e,
-  error: n
-}) => c("border-2", {
-  "border-border-dark": !e && !n,
-  "focus:border-border-dark": !e && n,
-  "border-border-error-dark": !e && n,
-  "border-transparent": e
-}), De = ({
-  disabled: e,
-  raw: n,
-  error: t,
-  mode: r,
-  leftElement: a,
-  rightElement: s
-}) => {
-  if (n)
-    return "";
-  if (e)
-    return c(
-      "transform translate-y-0 scale-100 absolute px-2 cursor-not-allowed opacity-50 font-medium",
-      {
-        "translate-x-[12px]": s === !0 && !a || !s && !a
-      }
-    );
-  if (!t)
-    return c(
-      "absolute px-2 cursor-text font-medium transform translate-y-0 scale-100",
-      {
-        "translate-x-[12px]": s === !0 && !a || !s && !a,
-        "text-copy-medium": r === "dark",
-        "text-copy-dark": r === "light",
-        "text-copy-dark dark:text-copy-medium": r === "system",
-        "text-copy-medium dark:text-copy-dark": r === "alt-system"
-      }
-    );
-  if (t)
-    return c(
-      "absolute px-2 cursor-text font-medium transform translate-y-0 scale-100",
-      {
-        "translate-x-[12px]": s === !0 && !a || !s && !a,
-        "text-copy-medium": r === "dark",
-        "text-copy-error-dark": r === "light",
-        "text-copy-error-dark dark:text-copy-error-light": r === "system",
-        "text-copy-medium dark:text-copy-error-dark": r === "alt-system"
-      }
-    );
-}, Pe = ({
-  error: e,
-  raw: n,
-  mode: t,
-  disabled: r
-}) => {
-  if (n)
-    return "";
-  if (r)
-    return c(
-      H,
-      "absolute px-2 cursor-not-allowed opacity-50 font-medium"
-    );
-  if (!e)
-    return c(H, "absolute px-2 font-medium", {
-      "text-copy-medium": t === "dark",
-      "text-copy-dark": t === "light",
-      "text-copy-dark dark:text-copy-medium": t === "system",
-      "text-copy-medium dark:text-copy-dark": t === "alt-system"
-    });
-  if (e)
-    return c(H, "absolute px-2 font-medium", {
-      "text-copy-error-light": t === "dark",
-      "text-copy-error-dark": t === "light",
-      "text-copy-error-dark dark:text-copy-error-light": t === "system",
-      "dark:text-copy-error-dark text-copy-error-light": t === "alt-system"
-    });
-}, He = ({
-  className: e,
-  textAreaClassName: n,
-  raw: t,
-  focusMode: r,
-  disabled: a,
-  noBorder: s,
-  error: o,
-  mode: l,
-  leftElement: u,
-  rightElement: p
-}) => {
-  const y = t ? e : c(
-    "relative flex w-full flex-col justify-center",
-    Ae,
-    e
-  ), b = t ? c(n) : c(
-    K,
-    n,
-    Oe(),
-    Se({ mode: l }),
-    we({ focusMode: r }),
-    $e({
-      noBorder: s,
-      error: o
-    }),
-    {
-      "disabled:cursor-not-allowed disabled:opacity-50": a
-    }
-  ), N = t ? void 0 : "sr-only", g = De({
-    disabled: a,
-    raw: t,
-    error: o,
-    mode: l,
-    rightElement: p,
-    leftElement: u
-  }), d = Pe({
-    error: o,
-    raw: t,
-    mode: l,
-    disabled: a
-  }), v = t ? void 0 : c(Te, "absolute"), h = t ? void 0 : c(ge, "absolute");
-  return {
-    wrapper: y,
-    textArea: b,
-    accessibleLabel: N,
-    visibleLabel: g,
-    helperText: d,
-    rightElement: v,
-    leftElement: h
-  };
-}, Me = ({
-  scrollHeight: e,
-  currentHeight: n,
-  currentLabelOffset: t = 0,
-  currentHelperTextOffset: r = 0
-}) => {
-  let o, l;
-  if (e > 0 && e !== n) {
-    const u = e - n, p = Math.abs(u / 24);
-    o = t + -1 * Math.sign(u) * (12 * p), l = r + Math.sign(u) * (12 * p);
-  }
-  return {
-    labelOffset: o,
-    helperTextOffset: l,
-    scrollHeight: e
-  };
-}, Fe = ye.forwardRef(
-  ({
-    id: e,
-    name: n,
-    label: t,
-    error: r = !1,
-    raw: a = !1,
-    className: s,
-    textAreaClassName: o,
-    mode: l = "system",
-    focusMode: u = "system",
-    value: p,
-    defaultValue: y,
-    disabled: b = !1,
-    noBorder: N = !1,
-    labelId: g,
-    helperText: d = "",
-    helperTextOnFocus: v = !1,
-    rightElement: h,
-    leftElement: k,
-    onChange: M,
-    onFocus: F,
-    onBlur: U,
-    ...Z
-  }, ee) => {
-    var B;
-    const x = f(null), te = be([ee, x]), [ne, L] = W(), [re, R] = W(), w = f(80), V = f(-25), m = f(null), X = f(30), O = f(null), C = Ee({ id: e, prefix: `${K}-` }), [j, ae] = E(0), [G, se] = E(0), [oe, z] = E(
-      !!(!v && d)
-    ), ce = `${n} error, ${d}`, _ = He({
-      className: s,
-      textAreaClassName: o,
-      error: r,
-      raw: a,
-      focusMode: u,
-      disabled: b,
-      noBorder: N,
-      mode: l,
-      rightElement: !!h,
-      leftElement: !!k
-    }), [A, le] = Re({
-      value: p,
-      initialControlledDelay: 20,
-      defaultValue: y,
-      onChange: (i) => {
-        M && M({
-          target: {
-            value: i
-          }
-        });
-      }
-    }), ue = (i) => {
-      le(i.target.value);
-    }, ie = (i) => {
-      v && d && z(!0), F && F(i);
-    }, de = (i) => {
-      v && d && !A && z(!1), U && U(i);
-    };
-    return I(() => {
-      L && L.width && ae(L.width + 18 + 10);
-    }, [L]), I(() => {
-      R && R.width && se(R.width + 18 + 10);
-    }, [R]), I(() => {
-      a || x && x.current && A !== void 0 && (x.current.style.height = "inherit", x.current.style.height = x.current.scrollHeight + "px");
-    }, [A, a]), I(() => {
-      a || setTimeout(() => {
-        var i;
-        (i = m == null ? void 0 : m.current) == null || i.style.setProperty(
-          "--av-text-area-wrapper-transition",
-          A ? "none" : "all 0.2s ease-out"
-        );
-      }, 0);
-    }, [A, a]), I(() => {
-      var i, $;
-      if (!a && x && x.current && A !== void 0) {
-        const { labelOffset: D, helperTextOffset: P, scrollHeight: fe } = Me({
-          scrollHeight: x.current.scrollHeight,
-          currentHeight: w.current,
-          currentLabelOffset: V.current,
-          currentHelperTextOffset: X.current
-        });
-        D && (V.current = D, (i = m == null ? void 0 : m.current) == null || i.style.setProperty(
-          "--av-text-area-label",
-          `${D}px`
-        )), P && (X.current = P, ($ = O == null ? void 0 : O.current) == null || $.style.setProperty(
-          "--av-text-area-helper-text",
-          `${P}px`
-        )), w.current = fe || w.current;
-      }
-    }, [A, a]), R.width > 0 && ((B = m == null ? void 0 : m.current) == null || B.style.setProperty(
-      "--tw-translate-x",
-      `${12 + R.width + 5}px`
-    )), /* @__PURE__ */ pe("div", { className: _.wrapper, children: [
-      /* @__PURE__ */ T(
-        "label",
-        {
-          htmlFor: C,
-          id: g,
-          className: _.accessibleLabel,
-          children: t
-        }
-      ),
-      k && /* @__PURE__ */ T(
-        "div",
-        {
-          ref: re,
-          className: _.leftElement,
-          children: k
-        }
-      ),
-      /* @__PURE__ */ T(
-        "textarea",
-        {
-          ref: te,
-          id: C,
-          name: n,
-          disabled: b,
-          placeholder: a ? void 0 : " ",
-          className: _.textArea,
-          rows: 1,
-          ...d && { "aria-describedby": `${C}-helper` },
-          ...r && { "aria-invalid": "true" },
-          ...h && !k && !a && { style: { paddingRight: j } },
-          ...k && !h && !a && { style: { paddingLeft: G } },
-          ...h && k && !a && {
-            style: {
-              paddingRight: j,
-              paddingLeft: G
-            }
-          },
-          value: A,
-          onChange: ue,
-          onFocus: ie,
-          onBlur: de,
-          ...Z
-        }
-      ),
-      !a && /* @__PURE__ */ T(
-        "label",
-        {
-          ref: m,
-          "aria-hidden": !0,
-          htmlFor: C,
-          className: `${_.visibleLabel}`,
-          children: t
-        }
-      ),
-      oe && /* @__PURE__ */ T(
-        "div",
-        {
-          ref: O,
-          id: `${C}-helper`,
-          className: _.helperText,
-          children: d
-        }
-      ),
-      h && /* @__PURE__ */ T(
-        "div",
-        {
-          ref: ne,
-          className: _.rightElement,
-          children: h
-        }
-      ),
-      r && d && /* @__PURE__ */ T(Le, { politeness: "polite", clearAnnouncementDelay: 500, children: ce })
-    ] });
-  }
-);
-Fe.displayName = "TextArea";
 export {
-  K as TEXT_AREA_CLASSNAME,
-  ge as TEXT_AREA_CONTROL_LEFT_CLASSNAME,
-  Te as TEXT_AREA_CONTROL_RIGHT_CLASSNAME,
-  H as TEXT_AREA_HELPER_TEXT_CLASSNAME,
-  Ae as TEXT_AREA_WRAPPER_CLASSNAME,
-  Fe as TextArea
+  T as TEXT_AREA_CLASSNAME,
+  R as TEXT_AREA_CONTROL_LEFT_CLASSNAME,
+  e as TEXT_AREA_CONTROL_RIGHT_CLASSNAME,
+  S as TEXT_AREA_HELPER_TEXT_CLASSNAME,
+  i as TEXT_AREA_WRAPPER_CLASSNAME,
+  o as TextArea
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-textarea",
-	"version": "4.0.0",
+	"version": "4.0.2",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -39,17 +39,17 @@
 		"react-dom": "^18.3.1 || ^19.0.0"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "5.0.0"
+		"@versini/ui-types": "5.0.2"
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.16",
 		"@versini/ui-hooks": "4.7.3",
-		"@versini/ui-liveregion": "2.0.0",
+		"@versini/ui-liveregion": "2.0.2",
 		"clsx": "2.1.1",
-		"tailwindcss": "4.0.14"
+		"tailwindcss": "4.1.3"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "40a943e1215f5344afa169a21267769e60ed81fd"
+	"gitHead": "1bc09c4f0904bd8c01a22b1a32299fdd7598ae32"
 }