@versini/ui-textinput 6.1.1 → 6.3.0

package/dist/index.d.ts

@@ -1,50 +1,111 @@
-import { default as React_2 } from 'react';
+import { JSX } from 'react/jsx-runtime';
 
-declare type Size = "xs" | "sm" | "md" | "lg" | "xl";
-
-export declare const TEXT_INPUT_CLASSNAME = "av-text-input";
-
-export declare const TEXT_INPUT_HELPER_TEXT_CLASSNAME = "av-text-input-helper-text";
-
-export declare const TEXT_INPUT_SIMPLE_CLASSNAME = "av-text-input-simple";
-
-export declare const TEXT_INPUT_WRAPPER_CLASSNAME = "av-text-input-wrapper";
-
-export declare const TextInput: React_2.ForwardRefExoticComponent<{
-    rightElement?: React_2.ReactElement;
-    rightElementClassName?: string;
-} & {
+declare type CommonTextInputProps = {
+    /**
+     * The label of the TextInput.
+     */
     label: string;
+    /**
+     * The name of the TextInput.
+     */
     name: string;
+    /**
+     * Whether or not the TextInput is in error state.
+     * @default false
+     */
     error?: boolean;
+    /**
+     * The type of focus for the TextInput. This will change the color
+     * of the focus ring around the TextInput.
+     */
     focusMode?: "dark" | "light" | "system" | "alt-system";
+    /**
+     * Text to add to the bottom of the TextInput.
+     */
     helperText?: string;
+    /**
+     * CSS class(es) to add to the actual textarea element.
+     */
     inputClassName?: string;
+    /**
+     * Hides the label visually but retain accessible relationship with the TextInput.
+     */
     labelHidden?: boolean;
+    /**
+     * Id to use for the TextInput label.
+     */
     labelId?: string;
+    /**
+     * The mode of TextInput. This will change the color of the TextInput.
+     */
     mode?: "dark" | "light" | "system" | "alt-system";
+    /**
+     * Whether or not the TextInput has a border.
+     * @default false
+     */
     noBorder?: boolean;
+    /**
+     * Whether or not to render the TextInput with styles or not.
+     * @default false
+     */
     raw?: boolean;
+    /**
+     * Controls input height and horizontal padding, 'md' by default
+     */
     size?: Size;
-} & Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "size"> & React_2.RefAttributes<HTMLInputElement>>;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+
+declare type Size = "xs" | "sm" | "md" | "lg" | "xl";
+
+export declare const TEXT_INPUT_CLASSNAME = "av-text-input";
+
+export declare const TEXT_INPUT_HELPER_TEXT_CLASSNAME = "av-text-input-helper-text";
+
+export declare const TEXT_INPUT_SIMPLE_CLASSNAME = "av-text-input-simple";
 
-export declare const TextInputMask: React_2.ForwardRefExoticComponent<{
-    rightElement: React_2.ReactElement;
+export declare const TEXT_INPUT_WRAPPER_CLASSNAME = "av-text-input-wrapper";
+
+export declare function TextInput({ id, name, label, error, raw, className, inputClassName, mode, focusMode, disabled, noBorder, labelId, labelHidden, type, helperText, rightElement, rightElementClassName, size, ref, ...extraProps }: TextInputProps): JSX.Element;
+
+export declare function TextInputMask({ name, disabled, label, labelHidden, onMaskChange, onChange, onBlur, onFocus, onTextInputMaskBlur, rightElement, ref, ...otherProps }: TextInputMaskProps): JSX.Element;
+
+declare type TextInputMaskProps = {
+    /**
+     * A ref to the input element.
+     */
+    ref?: React.Ref<HTMLInputElement>;
+    /**
+     * This prop allows you to pass in a React element to render on the right
+     * side of the TextInput. This is useful for adding icons or actionable
+     * elements, such a Button.
+     */
+    rightElement: React.ReactElement;
+    /**
+     * Callback fired when the value changes.
+     * @param masked whether or not the value is masked
+     */
     onMaskChange?: (masked: boolean) => void;
+    /**
+     * Callback fired when the user blurs out of the TextInputMask.
+     */
     onTextInputMaskBlur?: () => void;
-} & {
-    label: string;
-    name: string;
-    error?: boolean;
-    focusMode?: "dark" | "light" | "system" | "alt-system";
-    helperText?: string;
-    inputClassName?: string;
-    labelHidden?: boolean;
-    labelId?: string;
-    mode?: "dark" | "light" | "system" | "alt-system";
-    noBorder?: boolean;
-    raw?: boolean;
-    size?: Size;
-} & Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "size"> & React_2.RefAttributes<HTMLInputElement>>;
+} & CommonTextInputProps;
+
+declare type TextInputProps = {
+    /**
+     * A ref to the input element.
+     */
+    ref?: React.Ref<HTMLInputElement>;
+    /**
+     * This prop allows you to pass in a React element to render on the right
+     * side of the TextInput. This is useful for adding icons or actionable
+     * elements, such a Button.
+     */
+    rightElement?: React.ReactElement;
+    /**
+     * Extra classes to add to the right element container.
+     */
+    rightElementClassName?: string;
+} & CommonTextInputProps;
 
 export { }

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-textinput v6.1.1
+  @versini/ui-textinput v6.3.0
   © 2025 gizmette.com
 */
 
@@ -166,7 +166,7 @@ const getTextInputClasses = ({ className, inputClassName, raw, disabled, noBorde
 
 
 
-const TextInput = /*#__PURE__*/ react.forwardRef(({ id, name, label, error = false, raw = false, className, inputClassName, mode = "system", focusMode = "system", disabled = false, noBorder = false, labelId, labelHidden = false, type = "text", helperText = "", rightElement, rightElementClassName, size = "md", ...extraProps }, ref)=>{
+function TextInput({ id, name, label, error = false, raw = false, className, inputClassName, mode = "system", focusMode = "system", disabled = false, noBorder = false, labelId, labelHidden = false, type = "text", helperText = "", rightElement, rightElementClassName, size = "md", ref, ...extraProps }) {
     const [rightElementRef, rect] = useResizeObserver();
     const [inputPaddingRight, setInputPaddingRight] = useState(0);
     const inputId = useUniqueId({
@@ -213,20 +213,20 @@ const TextInput = /*#__PURE__*/ react.forwardRef(({ id, name, label, error = fal
     /* 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.
-				 */ setInputPaddingRight(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.
+			 */ setInputPaddingRight(rect.width + 18 + 10);
         }
     }, [
         rect
     ]);
     /* c8 ignore end */ /**
-		 * This effect sets the label and helper text position based on
-		 * the size of the input.
-		 */ useLayoutEffect(()=>{
+	 * This effect sets the label and helper text position based on
+	 * the size of the input.
+	 */ useLayoutEffect(()=>{
         const { label, helperText } = sizeStyles[size];
         labelRef?.current?.style.setProperty("--av-text-input-label", label);
         helperTextRef?.current?.style.setProperty("--av-text-input-helper-text", helperText);
@@ -288,8 +288,7 @@ const TextInput = /*#__PURE__*/ react.forwardRef(({ id, name, label, error = fal
             })
         ]
     });
-});
-TextInput.displayName = "TextInput";
+}
 
 ;// CONCATENATED MODULE: external "@versini/ui-hooks/use-merge-refs"
 
@@ -302,7 +301,7 @@ TextInput.displayName = "TextInput";
 const CLEAR_ANNOUNCEMENT_TIMEOUT = 500;
 const AUTO_HIDE_CLEAR_ANNOUNCEMENT_TIMEOUT = 5000;
 const AUTO_HIDE_TIMEOUT = 20000;
-const TextInputMask = /*#__PURE__*/ react.forwardRef(({ name, disabled, label, labelHidden, onMaskChange, onChange, onBlur, onFocus, onTextInputMaskBlur, rightElement, ...otherProps }, ref)=>{
+function TextInputMask({ name, disabled, label, labelHidden, onMaskChange, onChange, onBlur, onFocus, onTextInputMaskBlur, rightElement, ref, ...otherProps }) {
     const [masked, setMasked] = useState(true);
     const [liveRegionStatus, setLiveRegionStatus] = useState({
         message: null,
@@ -328,9 +327,9 @@ const TextInputMask = /*#__PURE__*/ react.forwardRef(({ name, disabled, label, l
                     message: `${label} hiding characters`
                 });
                 /**
-					 * Callback that can be used to generate
-					 * show/hide analytics.
-					 */ onMaskChange && onMaskChange(true);
+				 * Callback that can be used to generate
+				 * show/hide analytics.
+				 */ onMaskChange && onMaskChange(true);
             }, AUTO_HIDE_TIMEOUT);
         }
     };
@@ -346,19 +345,19 @@ const TextInputMask = /*#__PURE__*/ react.forwardRef(({ name, disabled, label, l
             message: newHiddenState ? "Characters hidden" : "Characters showing"
         });
         /**
-			 * Callback that can be used to generate
-			 * show/hide analytics.
-			 */ onMaskChange && onMaskChange(newHiddenState);
+		 * Callback that can be used to generate
+		 * show/hide analytics.
+		 */ onMaskChange && onMaskChange(newHiddenState);
     };
     const handleTextInputMaskBlur = (e)=>{
         const { relatedTarget } = e;
         /**
-			 * If the related target is not a child of the input,
-			 * then the blur is leaving the input
-			 * and not going to a child of the input.
-			 * This is the case when the user blurs from the show/hide button.
-			 * In this case, we want to call the onTextInputMaskBlur callback.
-			 */ const parent = inputRef.current?.parentElement;
+		 * If the related target is not a child of the input,
+		 * then the blur is leaving the input
+		 * and not going to a child of the input.
+		 * This is the case when the user blurs from the show/hide button.
+		 * In this case, we want to call the onTextInputMaskBlur callback.
+		 */ const parent = inputRef.current?.parentElement;
         if (!parent?.contains(relatedTarget)) {
             onTextInputMaskBlur && onTextInputMaskBlur();
         }
@@ -382,23 +381,23 @@ const TextInputMask = /*#__PURE__*/ react.forwardRef(({ name, disabled, label, l
         };
     }, []);
     /**
-		 * TextInputMask rules.
-		 *
-		 *  If button label is "Show", then characters must be masked.
-		 *    - Type is set to password e.g. <input type="password">.
-		 *    - Once button is clicked, toggle the input text to show characters
-		 *      (type="text") and live region (aria-live="assertive") should
-		 *      announce, "showing characters" or similar.
-		 *  If button label is "Hide", then characters must be unmasked.
-		 *     Type is set to password e.g. <input type="text">.
-		 *    - Once button is clicked, toggle the input text to hide characters
-		 *      (type="password") and live region (aria-live="assertive") should
-		 *      announce, "hiding characters" or similar.
-		 *  If 20 seconds have passed and text input mask field has no focus-in nor
-		 *  keystrokes while text input mask characters are shown, then hide characters,
-		 *  toggle control label back to "Show", and use aria-live="polite" to announce
-		 *  "[text input mask label] hiding characters" or similar.
-		 */ return /*#__PURE__*/ jsxs(Fragment, {
+	 * TextInputMask rules.
+	 *
+	 *  If button label is "Show", then characters must be masked.
+	 *    - Type is set to password e.g. <input type="password">.
+	 *    - Once button is clicked, toggle the input text to show characters
+	 *      (type="text") and live region (aria-live="assertive") should
+	 *      announce, "showing characters" or similar.
+	 *  If button label is "Hide", then characters must be unmasked.
+	 *     Type is set to password e.g. <input type="text">.
+	 *    - Once button is clicked, toggle the input text to hide characters
+	 *      (type="password") and live region (aria-live="assertive") should
+	 *      announce, "hiding characters" or similar.
+	 *  If 20 seconds have passed and text input mask field has no focus-in nor
+	 *  keystrokes while text input mask characters are shown, then hide characters,
+	 *  toggle control label back to "Show", and use aria-live="polite" to announce
+	 *  "[text input mask label] hiding characters" or similar.
+	 */ return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(TextInput, {
                 ref: mergedInputRef,
@@ -427,8 +426,7 @@ const TextInputMask = /*#__PURE__*/ react.forwardRef(({ name, disabled, label, l
             })
         ]
     });
-});
-TextInputMask.displayName = "TextInputMask";
+}
 
 ;// CONCATENATED MODULE: ./src/components/index.ts
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-textinput",
-	"version": "6.1.1",
+	"version": "6.3.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -38,17 +38,17 @@
 	},
 	"devDependencies": {
 		"@testing-library/jest-dom": "6.9.1",
-		"@versini/ui-types": "8.1.1"
+		"@versini/ui-types": "8.2.0"
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.19",
 		"@versini/ui-hooks": "6.1.1",
-		"@versini/ui-liveregion": "3.2.1",
+		"@versini/ui-liveregion": "3.2.2",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.18"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "a3730974df8fcea3c016bd83844c4243dbb10208"
+	"gitHead": "5cc3c9aaf61ca3843f16a3d6b322a92f7fb210ca"
 }