@versini/ui-textarea 5.0.7 → 5.1.0

package/dist/index.d.ts

@@ -1,25 +1,29 @@
-import React from 'react';
-
-declare const TEXT_AREA_CLASSNAME = "av-text-area";
-declare const TEXT_AREA_WRAPPER_CLASSNAME = "av-text-area-wrapper";
-declare const TEXT_AREA_HELPER_TEXT_CLASSNAME = "av-text-area-helper-text";
-declare const TEXT_AREA_CONTROL_RIGHT_CLASSNAME = "av-text-area__control--right";
-declare const TEXT_AREA_CONTROL_LEFT_CLASSNAME = "av-text-area__control--left";
-
-declare const TextArea: React.ForwardRefExoticComponent<{
-    label: string;
-    name: string;
-    error?: boolean;
-    focusMode?: "dark" | "light" | "system" | "alt-system";
-    helperText?: string;
-    helperTextOnFocus?: boolean;
-    labelId?: string;
-    mode?: "dark" | "light" | "system" | "alt-system";
-    noBorder?: boolean;
-    raw?: boolean;
-    rightElement?: React.ReactElement;
-    leftElement?: React.ReactElement;
-    textAreaClassName?: string;
-} & React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
-
-export { TEXT_AREA_CLASSNAME, TEXT_AREA_CONTROL_LEFT_CLASSNAME, TEXT_AREA_CONTROL_RIGHT_CLASSNAME, TEXT_AREA_HELPER_TEXT_CLASSNAME, TEXT_AREA_WRAPPER_CLASSNAME, TextArea };
+import { default as React_2 } from 'react';
+
+export declare const TEXT_AREA_CLASSNAME = "av-text-area";
+
+export declare const TEXT_AREA_CONTROL_LEFT_CLASSNAME = "av-text-area__control--left";
+
+export declare const TEXT_AREA_CONTROL_RIGHT_CLASSNAME = "av-text-area__control--right";
+
+export declare const TEXT_AREA_HELPER_TEXT_CLASSNAME = "av-text-area-helper-text";
+
+export declare const TEXT_AREA_WRAPPER_CLASSNAME = "av-text-area-wrapper";
+
+export declare const TextArea: React_2.ForwardRefExoticComponent<{
+    label: string;
+    name: string;
+    error?: boolean;
+    focusMode?: "dark" | "light" | "system" | "alt-system";
+    helperText?: string;
+    helperTextOnFocus?: boolean;
+    labelId?: string;
+    mode?: "dark" | "light" | "system" | "alt-system";
+    noBorder?: boolean;
+    raw?: boolean;
+    rightElement?: React_2.ReactElement;
+    leftElement?: React_2.ReactElement;
+    textAreaClassName?: string;
+} & React_2.TextareaHTMLAttributes<HTMLTextAreaElement> & React_2.RefAttributes<HTMLTextAreaElement>>;
+
+export { }

package/dist/index.js

@@ -1,22 +1,446 @@
-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 v5.0.7
+  @versini/ui-textarea v5.1.0
   © 2025 gizmette.com
 */
 try {
-  window.__VERSINI_UI_TEXTAREA__ || (window.__VERSINI_UI_TEXTAREA__ = {
-    version: "5.0.7",
-    buildTime: "10/24/2025 07:46 PM EDT",
-    homepage: "https://github.com/aversini/ui-components",
-    license: "MIT"
-  });
-} catch {
+  if (!window.__VERSINI_UI_TEXTAREA__) {
+    window.__VERSINI_UI_TEXTAREA__ = {
+      version: "5.1.0",
+      buildTime: "11/04/2025 03:43 PM EST",
+      homepage: "https://github.com/aversini/ui-components",
+      license: "MIT",
+    };
+  }
+} catch (error) {
+  // nothing to declare officer
 }
-export {
-  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
+
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMergeRefs, useResizeObserver, useUncontrolled, useUniqueId } from "@versini/ui-hooks";
+import { LiveRegion } from "@versini/ui-liveregion";
+import react, { useLayoutEffect, useRef, useState } from "react";
+import clsx from "clsx";
+
+;// CONCATENATED MODULE: ./src/common/constants.ts
+const TEXT_AREA_CLASSNAME = "av-text-area";
+const TEXT_AREA_WRAPPER_CLASSNAME = "av-text-area-wrapper";
+const TEXT_AREA_HELPER_TEXT_CLASSNAME = "av-text-area-helper-text";
+const TEXT_AREA_CONTROL_RIGHT_CLASSNAME = "av-text-area__control--right";
+const TEXT_AREA_CONTROL_LEFT_CLASSNAME = "av-text-area__control--left";
+
+;// CONCATENATED MODULE: external "react/jsx-runtime"
+
+;// CONCATENATED MODULE: external "@versini/ui-hooks"
+
+;// CONCATENATED MODULE: external "@versini/ui-liveregion"
+
+;// CONCATENATED MODULE: external "react"
+
+;// CONCATENATED MODULE: external "clsx"
+
+;// CONCATENATED MODULE: ./src/components/TextArea/utilities.ts
+
+
+const getTextAreaBaseClasses = ()=>{
+    /**
+	 * overflow-hidden is needed to prevent the text area from
+	 * showing a scrollbar. We automatically expand the text area
+	 * when the user types more than one line, so there is no
+	 * need for a scrollbar.
+	 */ return "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hidden px-4 py-7";
 };
+const getTextAreaColorClasses = ({ mode })=>{
+    return clsx({
+        "bg-surface-darker text-copy-lighter caret-copy-light": mode === "dark",
+        "bg-surface-lighter text-copy-dark caret-copy-dark": mode === "light",
+        "bg-surface-lighter text-copy-dark caret-copy-dark dark:bg-surface-darker dark:text-copy-lighter dark:caret-copy-light": mode === "system",
+        "bg-surface-darker text-copy-lighter caret-copy-light dark:bg-surface-lighter dark:text-copy-dark dark:caret-copy-dark": mode === "alt-system"
+    });
+};
+const getTextAreaFocusClasses = ({ focusMode })=>{
+    return clsx("focus:outline focus:outline-2 focus:outline-offset-2", {
+        "focus:outline-focus-dark": focusMode === "dark",
+        "focus:outline-focus-light": focusMode === "light",
+        "focus:outline-focus-light dark:focus:outline-focus-dark": focusMode === "alt-system",
+        "focus:outline-focus-dark dark:focus:outline-focus-light": focusMode === "system"
+    });
+};
+const getTextAreaBorderClasses = ({ noBorder, error })=>{
+    return clsx("border-2", {
+        "border-border-dark": !noBorder && !error,
+        "focus:border-border-dark": !noBorder && error,
+        "border-border-error-dark": !noBorder && error,
+        "border-transparent": noBorder
+    });
+};
+const getTextAreaLabelClasses = ({ disabled, raw, error, mode, leftElement, rightElement })=>{
+    if (raw) {
+        return "";
+    }
+    if (disabled) {
+        return clsx("transform translate-y-0 scale-100 absolute px-2 cursor-not-allowed opacity-50 font-medium", {
+            "translate-x-[10px]": rightElement === true && !leftElement || !rightElement && !leftElement
+        });
+    }
+    if (!error) {
+        return clsx("absolute px-2 cursor-text font-medium transform translate-y-0 scale-100", {
+            "translate-x-[10px]": rightElement === true && !leftElement || !rightElement && !leftElement,
+            "text-copy-medium": mode === "dark",
+            "text-copy-dark": mode === "light",
+            "text-copy-dark dark:text-copy-medium": mode === "system",
+            "text-copy-medium dark:text-copy-dark": mode === "alt-system"
+        });
+    }
+    if (error) {
+        return clsx("absolute px-2 cursor-text font-medium transform translate-y-0 scale-100", {
+            "translate-x-[10px]": rightElement === true && !leftElement || !rightElement && !leftElement,
+            "text-copy-medium": mode === "dark",
+            "text-copy-error-dark": mode === "light",
+            "text-copy-error-dark dark:text-copy-error-light": mode === "system",
+            "text-copy-medium dark:text-copy-error-dark": mode === "alt-system"
+        });
+    }
+};
+const getTextAreaHelperTextClasses = ({ error, raw, mode, disabled })=>{
+    if (raw) {
+        return "";
+    }
+    if (disabled) {
+        return clsx(TEXT_AREA_HELPER_TEXT_CLASSNAME, "absolute px-2 cursor-not-allowed opacity-50 font-medium");
+    }
+    if (!error) {
+        return clsx(TEXT_AREA_HELPER_TEXT_CLASSNAME, "absolute px-2 font-medium", {
+            "text-copy-medium": mode === "dark",
+            "text-copy-dark": mode === "light",
+            "text-copy-dark dark:text-copy-medium": mode === "system",
+            "text-copy-medium dark:text-copy-dark": mode === "alt-system"
+        });
+    }
+    if (error) {
+        return clsx(TEXT_AREA_HELPER_TEXT_CLASSNAME, "absolute px-2 font-medium", {
+            "text-copy-error-light": mode === "dark",
+            "text-copy-error-dark": mode === "light",
+            "text-copy-error-dark dark:text-copy-error-light": mode === "system",
+            "dark:text-copy-error-dark text-copy-error-light": mode === "alt-system"
+        });
+    }
+};
+const getTextAreaClasses = ({ className, textAreaClassName, raw, focusMode, disabled, noBorder, error, mode, leftElement, rightElement })=>{
+    const wrapper = raw ? className : clsx("relative flex w-full flex-col justify-center", TEXT_AREA_WRAPPER_CLASSNAME, className);
+    const textArea = raw ? clsx(textAreaClassName) : clsx(TEXT_AREA_CLASSNAME, textAreaClassName, getTextAreaBaseClasses(), getTextAreaColorClasses({
+        mode
+    }), getTextAreaFocusClasses({
+        focusMode
+    }), getTextAreaBorderClasses({
+        noBorder,
+        error
+    }), {
+        "disabled:cursor-not-allowed disabled:opacity-50": disabled
+    });
+    const accessibleLabel = raw ? undefined : "sr-only";
+    const visibleLabel = getTextAreaLabelClasses({
+        disabled,
+        raw,
+        error,
+        mode,
+        rightElement,
+        leftElement
+    });
+    const helperText = getTextAreaHelperTextClasses({
+        error,
+        raw,
+        mode,
+        disabled
+    });
+    const rightClasses = raw ? undefined : clsx(TEXT_AREA_CONTROL_RIGHT_CLASSNAME, "absolute");
+    const leftClasses = raw ? undefined : clsx(TEXT_AREA_CONTROL_LEFT_CLASSNAME, "absolute");
+    return {
+        wrapper,
+        textArea,
+        accessibleLabel,
+        visibleLabel,
+        helperText,
+        rightElement: rightClasses,
+        leftElement: leftClasses
+    };
+};
+const adjustLabelAndHelperText = ({ scrollHeight, currentHeight, currentLabelOffset = 0, currentHelperTextOffset = 0 })=>{
+    const ROW_HEIGHT = 24;
+    const TRANSLATION_Y_OFFSET = ROW_HEIGHT / 2;
+    let labelOffset, helperTextOffset;
+    if (scrollHeight > 0 && scrollHeight !== currentHeight) {
+        const diff = scrollHeight - currentHeight;
+        const totalRows = Math.abs(diff / ROW_HEIGHT);
+        labelOffset = currentLabelOffset + -1 * Math.sign(diff) * (TRANSLATION_Y_OFFSET * totalRows);
+        helperTextOffset = currentHelperTextOffset + Math.sign(diff) * (TRANSLATION_Y_OFFSET * totalRows);
+    }
+    return {
+        labelOffset,
+        helperTextOffset,
+        scrollHeight
+    };
+};
+
+;// CONCATENATED MODULE: ./src/components/TextArea/TextArea.tsx
+
+
+
+
+
+
+const TextArea = /*#__PURE__*/ react.forwardRef(({ id, name, label, error = false, raw = false, className, textAreaClassName, mode = "system", focusMode = "system", value, defaultValue, disabled = false, noBorder = false, labelId, helperText = "", helperTextOnFocus = false, rightElement, leftElement, onChange, onFocus, onBlur, ...extraProps }, ref)=>{
+    const textAreaRef = useRef(null);
+    const mergedTextAreaRef = useMergeRefs([
+        ref,
+        textAreaRef
+    ]);
+    const [rightElementRef, rect] = useResizeObserver();
+    const [leftElementRef, lRect] = useResizeObserver();
+    const textAreaHeightRef = useRef(80);
+    const labelOffsetRef = useRef(-25);
+    const labelRef = useRef(null);
+    const helperTextOffsetRef = useRef(30);
+    const helperTextRef = useRef(null);
+    const textAreaId = useUniqueId({
+        id,
+        prefix: `${TEXT_AREA_CLASSNAME}-`
+    });
+    const [textAreaPaddingRight, setTextAreaPaddingRight] = useState(0);
+    const [textAreaPaddingLeft, setTextAreaPaddingLeft] = useState(0);
+    const [showHelperText, setShowHelperText] = useState(Boolean(!helperTextOnFocus && helperText));
+    const liveErrorMessage = `${name} error, ${helperText}`;
+    const textTextAreaClassName = getTextAreaClasses({
+        className,
+        textAreaClassName,
+        error,
+        raw,
+        focusMode,
+        disabled,
+        noBorder,
+        mode,
+        rightElement: Boolean(rightElement),
+        leftElement: Boolean(leftElement)
+    });
+    /**
+		 * useUncontrolled hook is used to make the textarea
+		 * both controlled and uncontrolled.
+		 */ const [userInput, setUserInput] = useUncontrolled({
+        value,
+        initialControlledDelay: 20,
+        defaultValue,
+        onChange: (value)=>{
+            const e = {
+                target: {
+                    value
+                }
+            };
+            onChange && onChange(e);
+        }
+    });
+    const handleChange = (e)=>{
+        setUserInput(e.target.value);
+    };
+    const handleFocus = (e)=>{
+        if (helperTextOnFocus && helperText) {
+            setShowHelperText(true);
+        }
+        onFocus && onFocus(e);
+    };
+    const handleBlur = (e)=>{
+        if (helperTextOnFocus && helperText && !userInput) {
+            setShowHelperText(false);
+        }
+        onBlur && onBlur(e);
+    };
+    /**
+		 * This effect is used to add padding to the rightElement so
+		 * that the input text in the textarea does not overlap with the
+		 * rightElement.
+		 */ /* c8 ignore start - ResizeObserver is tough to test... */ useLayoutEffect(()=>{
+        if (rect && rect.width) {
+            /**
+				 * - rect.width is the width of the right element (Button, Icon, etc.)
+				 * - The main input field has default left/right paddings of
+				 *   16px (px-4) + 2px border (border-2) = 18px
+				 * - We add 10px to the right padding to give some space between the right
+				 *   element and the input field.
+				 */ setTextAreaPaddingRight(rect.width + 18 + 10);
+        }
+    }, [
+        rect
+    ]);
+    /* c8 ignore end */ /**
+		 * This effect is used to add padding to the leftElement so
+		 * that the input text in the textarea does not overlap with the
+		 * leftElement.
+		 */ /* c8 ignore start - ResizeObserver is tough to test... */ useLayoutEffect(()=>{
+        if (lRect && lRect.width) {
+            /**
+				 * - rect.width is the width of the right element (Button, Icon, etc.)
+				 * - The main input field has default left/right paddings of
+				 *   16px (px-4) + 2px border (border-2) = 18px
+				 * - We add 10px to the left padding to give some space between the left
+				 *   element and the input field.
+				 */ setTextAreaPaddingLeft(lRect.width + 18 + 10);
+        }
+    }, [
+        lRect
+    ]);
+    /* c8 ignore end */ /**
+		 * This effect is used to resize the textarea based
+		 * on the content, so that the user can see all the
+		 * content they have typed.
+		 */ useLayoutEffect(()=>{
+        if (raw) {
+            return;
+        }
+        if (textAreaRef && textAreaRef.current && userInput !== undefined) {
+            textAreaRef.current.style.height = "inherit";
+            // Set the height to match the content
+            textAreaRef.current.style.height = textAreaRef.current.scrollHeight + "px";
+        }
+    }, [
+        userInput,
+        raw
+    ]);
+    /**
+		 * This section is to toggle the transitions.
+		 * This is to prevent the label and helper text from
+		 * animating when the user is typing. The animation is
+		 * re-enabled when there is nothing in the textarea.
+		 *
+		 * The reason for the timeout is to prevent it to be
+		 * re-enabled too soon when the user clears out the
+		 * whole textarea.
+		 */ useLayoutEffect(()=>{
+        if (raw) {
+            return;
+        }
+        setTimeout(()=>{
+            labelRef?.current?.style.setProperty("--av-text-area-wrapper-transition", !userInput ? "all 0.2s ease-out" : "none");
+        }, 0);
+    }, [
+        userInput,
+        raw
+    ]);
+    /**
+		 * This effect is used to adjust the label and helper text
+		 * when the height of the textarea changes.
+		 * This is done by calculating the difference in
+		 * height and then adjusting the label and helper
+		 * text by that amount.
+		 */ useLayoutEffect(()=>{
+        if (raw) {
+            return;
+        }
+        if (textAreaRef && textAreaRef.current && userInput !== undefined) {
+            const { labelOffset, helperTextOffset, scrollHeight } = adjustLabelAndHelperText({
+                scrollHeight: textAreaRef.current.scrollHeight,
+                currentHeight: textAreaHeightRef.current,
+                currentLabelOffset: labelOffsetRef.current,
+                currentHelperTextOffset: helperTextOffsetRef.current
+            });
+            /* v8 ignore next 7 */ if (labelOffset) {
+                labelOffsetRef.current = labelOffset;
+                labelRef?.current?.style.setProperty("--av-text-area-label", `${labelOffset}px`);
+            }
+            /* v8 ignore next 7 */ if (helperTextOffset) {
+                helperTextOffsetRef.current = helperTextOffset;
+                helperTextRef?.current?.style.setProperty("--av-text-area-helper-text", `${helperTextOffset}px`);
+            }
+            textAreaHeightRef.current = scrollHeight || textAreaHeightRef.current;
+        }
+    }, [
+        userInput,
+        raw
+    ]);
+    /**
+		 * If there is a left element, we need to translate the label on the x-axis
+		 * to the right so that it does not overlap with the left element.
+		 * NOTE: 12px is the default translate if there are no left elements.
+		 */ if (lRect.width > 0) {
+        labelRef?.current?.style.setProperty("--tw-translate-x", `${12 + lRect.width + 5}px`);
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        className: textTextAreaClassName.wrapper,
+        children: [
+            /*#__PURE__*/ jsx("label", {
+                htmlFor: textAreaId,
+                id: labelId,
+                className: textTextAreaClassName.accessibleLabel,
+                children: label
+            }),
+            leftElement && /*#__PURE__*/ jsx("div", {
+                ref: leftElementRef,
+                className: textTextAreaClassName.leftElement,
+                children: leftElement
+            }),
+            /*#__PURE__*/ jsx("textarea", {
+                ref: mergedTextAreaRef,
+                id: textAreaId,
+                name: name,
+                disabled: disabled,
+                placeholder: !raw ? " " : undefined,
+                className: textTextAreaClassName.textArea,
+                rows: 1,
+                ...helperText && {
+                    "aria-describedby": `${textAreaId}-helper`
+                },
+                ...error && {
+                    "aria-invalid": "true"
+                },
+                ...rightElement && !leftElement && !raw && {
+                    style: {
+                        paddingRight: textAreaPaddingRight
+                    }
+                },
+                ...leftElement && !rightElement && !raw && {
+                    style: {
+                        paddingLeft: textAreaPaddingLeft
+                    }
+                },
+                ...rightElement && leftElement && !raw && {
+                    style: {
+                        paddingRight: textAreaPaddingRight,
+                        paddingLeft: textAreaPaddingLeft
+                    }
+                },
+                value: userInput,
+                onChange: handleChange,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                ...extraProps
+            }),
+            !raw && /*#__PURE__*/ jsx("label", {
+                ref: labelRef,
+                "aria-hidden": true,
+                htmlFor: textAreaId,
+                className: `${textTextAreaClassName.visibleLabel}`,
+                children: label
+            }),
+            showHelperText && /*#__PURE__*/ jsx("div", {
+                ref: helperTextRef,
+                id: `${textAreaId}-helper`,
+                className: textTextAreaClassName.helperText,
+                children: helperText
+            }),
+            rightElement && /*#__PURE__*/ jsx("div", {
+                ref: rightElementRef,
+                className: textTextAreaClassName.rightElement,
+                children: rightElement
+            }),
+            error && helperText && /*#__PURE__*/ jsx(LiveRegion, {
+                politeness: "polite",
+                clearAnnouncementDelay: 500,
+                children: liveErrorMessage
+            })
+        ]
+    });
+});
+TextArea.displayName = "TextArea";
+
+;// CONCATENATED MODULE: ./src/components/index.ts
+
+
+
+export { TEXT_AREA_CLASSNAME, TEXT_AREA_CONTROL_LEFT_CLASSNAME, TEXT_AREA_CONTROL_RIGHT_CLASSNAME, TEXT_AREA_HELPER_TEXT_CLASSNAME, TEXT_AREA_WRAPPER_CLASSNAME, TextArea };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-textarea",
-	"version": "5.0.7",
+	"version": "5.1.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -20,13 +20,13 @@
 	],
 	"scripts": {
 		"build:check": "tsc",
-		"build:js": "vite build",
-		"build:types": "tsup",
-		"build": "npm-run-all --serial clean build:check build:js build:types",
+		"build:js": "rslib build",
+		"build:types": "echo 'Types now built with rslib'",
+		"build": "npm-run-all --serial clean build:check build:js",
 		"clean": "rimraf dist tmp",
-		"dev:js": "vite build --watch --mode development",
-		"dev:types": "tsup --watch src",
-		"dev": "npm-run-all clean --parallel dev:js dev:types",
+		"dev:js": "rslib build --watch",
+		"dev:types": "echo 'Types now watched with rslib'",
+		"dev": "rslib build --watch",
 		"lint": "biome lint src",
 		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
@@ -42,13 +42,13 @@
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.19",
-		"@versini/ui-hooks": "5.1.1",
-		"@versini/ui-liveregion": "3.0.2",
+		"@versini/ui-hooks": "5.2.0",
+		"@versini/ui-liveregion": "3.1.0",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.16"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "26763e1e738bcdcb0806c39612161666e4bc4459"
+	"gitHead": "7484ad443b77ef31e52ae3a7d88b8129bc6cdf1d"
 }

package/dist/components/TextArea/TextArea.js

@@ -1,331 +0,0 @@
-import { jsxs as oe, jsx as h } from "react/jsx-runtime";
-import { useMergeRefs as ce, useResizeObserver as B, useUniqueId as le, useUncontrolled as ne } from "@versini/ui-hooks";
-import { LiveRegion as ie } from "@versini/ui-liveregion";
-import ue, { useRef as T, useState as H, useLayoutEffect as m } from "react";
-import o from "clsx";
-const U = "av-text-area", de = "av-text-area-wrapper", I = "av-text-area-helper-text", fe = "av-text-area__control--right", xe = "av-text-area__control--left", pe = () => "rounded-md text-base h-20 min-h-[80px] resize-none overflow-hidden px-4 py-7", ye = ({ mode: e }) => o({
-  "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"
-}), he = ({
-  focusMode: e
-}) => o("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"
-}), ge = ({
-  noBorder: e,
-  error: a
-}) => o("border-2", {
-  "border-border-dark": !e && !a,
-  "focus:border-border-dark": !e && a,
-  "border-border-error-dark": !e && a,
-  "border-transparent": e
-}), ke = ({
-  disabled: e,
-  raw: a,
-  error: t,
-  mode: s,
-  leftElement: r,
-  rightElement: c
-}) => {
-  if (a)
-    return "";
-  if (e)
-    return o(
-      "transform translate-y-0 scale-100 absolute px-2 cursor-not-allowed opacity-50 font-medium",
-      {
-        "translate-x-[10px]": c === !0 && !r || !c && !r
-      }
-    );
-  if (!t)
-    return o(
-      "absolute px-2 cursor-text font-medium transform translate-y-0 scale-100",
-      {
-        "translate-x-[10px]": c === !0 && !r || !c && !r,
-        "text-copy-medium": s === "dark",
-        "text-copy-dark": s === "light",
-        "text-copy-dark dark:text-copy-medium": s === "system",
-        "text-copy-medium dark:text-copy-dark": s === "alt-system"
-      }
-    );
-  if (t)
-    return o(
-      "absolute px-2 cursor-text font-medium transform translate-y-0 scale-100",
-      {
-        "translate-x-[10px]": c === !0 && !r || !c && !r,
-        "text-copy-medium": s === "dark",
-        "text-copy-error-dark": s === "light",
-        "text-copy-error-dark dark:text-copy-error-light": s === "system",
-        "text-copy-medium dark:text-copy-error-dark": s === "alt-system"
-      }
-    );
-}, Ae = ({
-  error: e,
-  raw: a,
-  mode: t,
-  disabled: s
-}) => {
-  if (a)
-    return "";
-  if (s)
-    return o(
-      I,
-      "absolute px-2 cursor-not-allowed opacity-50 font-medium"
-    );
-  if (!e)
-    return o(I, "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 o(I, "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"
-    });
-}, Te = ({
-  className: e,
-  textAreaClassName: a,
-  raw: t,
-  focusMode: s,
-  disabled: r,
-  noBorder: c,
-  error: u,
-  mode: d,
-  leftElement: p,
-  rightElement: g
-}) => {
-  const N = t ? e : o(
-    "relative flex w-full flex-col justify-center",
-    de,
-    e
-  ), _ = t ? o(a) : o(
-    U,
-    a,
-    pe(),
-    ye({ mode: d }),
-    he({ focusMode: s }),
-    ge({
-      noBorder: c,
-      error: u
-    }),
-    {
-      "disabled:cursor-not-allowed disabled:opacity-50": r
-    }
-  ), O = t ? void 0 : "sr-only", S = ke({
-    disabled: r,
-    raw: t,
-    error: u,
-    mode: d,
-    rightElement: g,
-    leftElement: p
-  }), n = Ae({
-    error: u,
-    raw: t,
-    mode: d,
-    disabled: r
-  }), b = t ? void 0 : o(fe, "absolute"), f = t ? void 0 : o(xe, "absolute");
-  return {
-    wrapper: N,
-    textArea: _,
-    accessibleLabel: O,
-    visibleLabel: S,
-    helperText: n,
-    rightElement: b,
-    leftElement: f
-  };
-}, be = ({
-  scrollHeight: e,
-  currentHeight: a,
-  currentLabelOffset: t = 0,
-  currentHelperTextOffset: s = 0
-}) => {
-  let u, d;
-  if (e > 0 && e !== a) {
-    const p = e - a, g = Math.abs(p / 24);
-    u = t + -1 * Math.sign(p) * (12 * g), d = s + Math.sign(p) * (12 * g);
-  }
-  return {
-    labelOffset: u,
-    helperTextOffset: d,
-    scrollHeight: e
-  };
-}, Re = ue.forwardRef(
-  ({
-    id: e,
-    name: a,
-    label: t,
-    error: s = !1,
-    raw: r = !1,
-    className: c,
-    textAreaClassName: u,
-    mode: d = "system",
-    focusMode: p = "system",
-    value: g,
-    defaultValue: N,
-    disabled: _ = !1,
-    noBorder: O = !1,
-    labelId: S,
-    helperText: n = "",
-    helperTextOnFocus: b = !1,
-    rightElement: f,
-    leftElement: k,
-    onChange: P,
-    onFocus: F,
-    onBlur: $,
-    ...Y
-  }, z) => {
-    const i = T(null), D = ce([z, i]), [q, v] = B(), [J, A] = B(), E = T(80), M = T(-25), L = T(null), X = T(30), j = T(null), R = le({ id: e, prefix: `${U}-` }), [w, K] = H(0), [G, Q] = H(0), [V, W] = H(
-      !!(!b && n)
-    ), Z = `${a} error, ${n}`, y = Te({
-      className: c,
-      textAreaClassName: u,
-      error: s,
-      raw: r,
-      focusMode: p,
-      disabled: _,
-      noBorder: O,
-      mode: d,
-      rightElement: !!f,
-      leftElement: !!k
-    }), [x, ee] = ne({
-      value: g,
-      initialControlledDelay: 20,
-      defaultValue: N,
-      onChange: (l) => {
-        P && P({
-          target: {
-            value: l
-          }
-        });
-      }
-    }), te = (l) => {
-      ee(l.target.value);
-    }, re = (l) => {
-      b && n && W(!0), F && F(l);
-    }, se = (l) => {
-      b && n && !x && W(!1), $ && $(l);
-    };
-    return m(() => {
-      v && v.width && K(v.width + 18 + 10);
-    }, [v]), m(() => {
-      A && A.width && Q(A.width + 18 + 10);
-    }, [A]), m(() => {
-      r || i && i.current && x !== void 0 && (i.current.style.height = "inherit", i.current.style.height = i.current.scrollHeight + "px");
-    }, [x, r]), m(() => {
-      r || setTimeout(() => {
-        L?.current?.style.setProperty(
-          "--av-text-area-wrapper-transition",
-          x ? "none" : "all 0.2s ease-out"
-        );
-      }, 0);
-    }, [x, r]), m(() => {
-      if (!r && i && i.current && x !== void 0) {
-        const { labelOffset: l, helperTextOffset: C, scrollHeight: ae } = be({
-          scrollHeight: i.current.scrollHeight,
-          currentHeight: E.current,
-          currentLabelOffset: M.current,
-          currentHelperTextOffset: X.current
-        });
-        l && (M.current = l, L?.current?.style.setProperty(
-          "--av-text-area-label",
-          `${l}px`
-        )), C && (X.current = C, j?.current?.style.setProperty(
-          "--av-text-area-helper-text",
-          `${C}px`
-        )), E.current = ae || E.current;
-      }
-    }, [x, r]), A.width > 0 && L?.current?.style.setProperty(
-      "--tw-translate-x",
-      `${12 + A.width + 5}px`
-    ), /* @__PURE__ */ oe("div", { className: y.wrapper, children: [
-      /* @__PURE__ */ h(
-        "label",
-        {
-          htmlFor: R,
-          id: S,
-          className: y.accessibleLabel,
-          children: t
-        }
-      ),
-      k && /* @__PURE__ */ h(
-        "div",
-        {
-          ref: J,
-          className: y.leftElement,
-          children: k
-        }
-      ),
-      /* @__PURE__ */ h(
-        "textarea",
-        {
-          ref: D,
-          id: R,
-          name: a,
-          disabled: _,
-          placeholder: r ? void 0 : " ",
-          className: y.textArea,
-          rows: 1,
-          ...n && { "aria-describedby": `${R}-helper` },
-          ...s && { "aria-invalid": "true" },
-          ...f && !k && !r && { style: { paddingRight: w } },
-          ...k && !f && !r && { style: { paddingLeft: G } },
-          ...f && k && !r && {
-            style: {
-              paddingRight: w,
-              paddingLeft: G
-            }
-          },
-          value: x,
-          onChange: te,
-          onFocus: re,
-          onBlur: se,
-          ...Y
-        }
-      ),
-      !r && /* @__PURE__ */ h(
-        "label",
-        {
-          ref: L,
-          "aria-hidden": !0,
-          htmlFor: R,
-          className: `${y.visibleLabel}`,
-          children: t
-        }
-      ),
-      V && /* @__PURE__ */ h(
-        "div",
-        {
-          ref: j,
-          id: `${R}-helper`,
-          className: y.helperText,
-          children: n
-        }
-      ),
-      f && /* @__PURE__ */ h(
-        "div",
-        {
-          ref: q,
-          className: y.rightElement,
-          children: f
-        }
-      ),
-      s && n && /* @__PURE__ */ h(ie, { politeness: "polite", clearAnnouncementDelay: 500, children: Z })
-    ] });
-  }
-);
-Re.displayName = "TextArea";
-export {
-  U as TEXT_AREA_CLASSNAME,
-  xe as TEXT_AREA_CONTROL_LEFT_CLASSNAME,
-  fe as TEXT_AREA_CONTROL_RIGHT_CLASSNAME,
-  I as TEXT_AREA_HELPER_TEXT_CLASSNAME,
-  de as TEXT_AREA_WRAPPER_CLASSNAME,
-  Re as TextArea
-};