@versini/ui-textarea 6.1.0 → 6.2.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React_2 } from 'react';
+import { JSX } from 'react/jsx-runtime';
 
 export declare const TEXT_AREA_CLASSNAME = "av-text-area";
 
@@ -10,20 +10,74 @@ 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<{
+export declare function TextArea({ id, name, label, error, raw, className, textAreaClassName, mode, focusMode, value, defaultValue, disabled, noBorder, labelId, helperText, helperTextOnFocus, rightElement, leftElement, onChange, onFocus, onBlur, ref, ...extraProps }: TextAreaProps): JSX.Element;
+
+declare type TextAreaProps = {
+    /**
+     * A ref to the textarea element.
+     */
+    ref?: React.Ref<HTMLTextAreaElement>;
+    /**
+     * The label of the TextArea.
+     */
     label: string;
+    /**
+     * The name of the TextArea.
+     */
     name: string;
+    /**
+     * Whether or not the TextArea is in error state.
+     * @default false
+     */
     error?: boolean;
+    /**
+     * The type of focus for the TextArea. This will change the color
+     * of the focus ring around the TextArea.
+     */
     focusMode?: "dark" | "light" | "system" | "alt-system";
+    /**
+     * Text to add to the bottom of the TextArea.
+     */
     helperText?: string;
+    /**
+     * Whether or not to show the helper text ONLY when the TextArea is focused.
+     * @default false
+     */
     helperTextOnFocus?: boolean;
+    /**
+     * Id to use for the TextArea label.
+     */
     labelId?: string;
+    /**
+     * Whether or not the TextArea has a border.
+     * @default false
+     */
+    /**
+     * The mode of TextInput. This will change the color of the TextInput.
+     */
     mode?: "dark" | "light" | "system" | "alt-system";
     noBorder?: boolean;
+    /**
+     * Whether or not to render the TextArea with styles or not.
+     * @default false
+     */
     raw?: boolean;
-    rightElement?: React_2.ReactElement;
-    leftElement?: React_2.ReactElement;
+    /**
+     * This prop allows you to pass in a React element to render on the right
+     * side of the TextArea. This is useful for adding icons or actionable
+     * elements, such a Button.
+     */
+    rightElement?: React.ReactElement;
+    /**
+     * This prop allows you to pass in a React element to render on the left
+     * side of the TextArea. This is useful for adding icons or actionable
+     * elements, such a Button.
+     */
+    leftElement?: React.ReactElement;
+    /**
+     * CSS class(es) to add to the actual textarea element.
+     */
     textAreaClassName?: string;
-} & React_2.TextareaHTMLAttributes<HTMLTextAreaElement> & React_2.RefAttributes<HTMLTextAreaElement>>;
+} & React.TextareaHTMLAttributes<HTMLTextAreaElement>;
 
 export { }

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-textarea v6.1.0
+  @versini/ui-textarea v6.2.0
   © 2025 gizmette.com
 */
 
@@ -9,7 +9,7 @@ import { useResizeObserver } from "@versini/ui-hooks/use-resize-observer";
 import { useUncontrolled } from "@versini/ui-hooks/use-uncontrolled";
 import { useUniqueId } from "@versini/ui-hooks/use-unique-id";
 import { LiveRegion } from "@versini/ui-liveregion";
-import react, { useLayoutEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState } from "react";
 import clsx from "clsx";
 
 ;// CONCATENATED MODULE: ./src/common/constants.ts
@@ -188,7 +188,7 @@ const adjustLabelAndHelperText = ({ scrollHeight, currentHeight, currentLabelOff
 
 
 
-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)=>{
+function TextArea({ 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, ref, ...extraProps }) {
     const textAreaRef = useRef(null);
     const mergedTextAreaRef = useMergeRefs([
         ref,
@@ -222,9 +222,9 @@ const TextArea = /*#__PURE__*/ react.forwardRef(({ id, name, label, error = fals
         leftElement: Boolean(leftElement)
     });
     /**
-		 * useUncontrolled hook is used to make the textarea
-		 * both controlled and uncontrolled.
-		 */ const [userInput, setUserInput] = useUncontrolled({
+	 * useUncontrolled hook is used to make the textarea
+	 * both controlled and uncontrolled.
+	 */ const [userInput, setUserInput] = useUncontrolled({
         value,
         initialControlledDelay: 20,
         defaultValue,
@@ -253,44 +253,44 @@ const TextArea = /*#__PURE__*/ react.forwardRef(({ id, name, label, error = fals
         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(()=>{
+	 * 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.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(()=>{
+	 * 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);
+			 * - 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(()=>{
+	 * 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;
         }
@@ -304,15 +304,15 @@ const TextArea = /*#__PURE__*/ react.forwardRef(({ id, name, label, error = fals
         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(()=>{
+	 * 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;
         }
@@ -324,12 +324,12 @@ const TextArea = /*#__PURE__*/ react.forwardRef(({ id, name, label, error = fals
         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(()=>{
+	 * 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;
         }
@@ -355,10 +355,10 @@ const TextArea = /*#__PURE__*/ react.forwardRef(({ id, name, label, error = fals
         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) {
+	 * 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", {
@@ -436,11 +436,9 @@ const TextArea = /*#__PURE__*/ react.forwardRef(({ id, name, label, error = fals
             })
         ]
     });
-});
-TextArea.displayName = "TextArea";
+}
 
 ;// CONCATENATED MODULE: ./src/components/index.ts
-// force new release
 
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-textarea",
-	"version": "6.1.0",
+	"version": "6.2.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -23,7 +23,7 @@
 		"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",
+		"clean": "rimraf dist tmp coverage",
 		"dev:js": "rslib build --watch",
 		"dev:types": "echo 'Types now watched with rslib'",
 		"dev": "rslib build --watch",
@@ -38,17 +38,17 @@
 	},
 	"devDependencies": {
 		"@testing-library/jest-dom": "6.9.1",
-		"@versini/ui-types": "8.1.0"
+		"@versini/ui-types": "8.2.0"
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.19",
-		"@versini/ui-hooks": "6.1.0",
-		"@versini/ui-liveregion": "3.2.0",
+		"@versini/ui-hooks": "6.1.1",
+		"@versini/ui-liveregion": "3.2.2",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.18"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "b2ee2e328ecadfbedcb26d14afa896a30f0ab54b"
+	"gitHead": "5cc3c9aaf61ca3843f16a3d6b322a92f7fb210ca"
 }