@versini/ui-textinput 6.1.1 → 6.2.0

package/dist/index.d.ts

@@ -1,32 +1,72 @@
+import { JSX } from 'react/jsx-runtime';
 import { default as React_2 } from 'react';
 
-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 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 const TextInputMask: React_2.ForwardRefExoticComponent<{
     rightElement: React_2.ReactElement;
@@ -47,4 +87,21 @@ export declare const TextInputMask: React_2.ForwardRefExoticComponent<{
     size?: Size;
 } & Omit<React_2.InputHTMLAttributes<HTMLInputElement>, "size"> & React_2.RefAttributes<HTMLInputElement>>;
 
+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.2.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"
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-textinput",
-	"version": "6.1.1",
+	"version": "6.2.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -50,5 +50,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "a3730974df8fcea3c016bd83844c4243dbb10208"
+	"gitHead": "217f53cc7772e8cbe38e72582cbd65adb133fcd9"
 }