@versini/ui-textinput 4.0.5 → 4.0.7

package/README.md

@@ -1,3 +1,428 @@
 # @versini/ui-textinput
 
-A simple text input component for React.
+[![npm version](https://img.shields.io/npm/v/@versini/ui-textinput?style=flat-square)](https://www.npmjs.com/package/@versini/ui-textinput)
+
+> Accessible and feature-rich React text input components built with TypeScript and TailwindCSS.
+
+The TextInput package provides standard text inputs and masked text inputs with comprehensive form features including validation states, helper text, and customizable styling. Perfect for building accessible forms and user interfaces.
+
+## Table of Contents
+
+- [Features](#features)
+- [Installation](#installation)
+- [Usage](#usage)
+- [API](#api)
+
+## Features
+
+- **🎯 Multiple Input Types**: TextInput and TextInputMask components
+- **♿ Accessible**: WCAG compliant with proper labeling and keyboard navigation
+- **🎨 Customizable**: Multiple sizes, themes, and styling options
+- **🔧 Form Integration**: Built-in validation states and helper text
+- **🌲 Tree-shakeable**: Lightweight and optimized for bundle size
+- **🔧 TypeScript**: Fully typed with comprehensive prop definitions
+- **🎭 Theme Support**: Built-in support for light, dark, and system themes
+
+## Installation
+
+```bash
+npm install @versini/ui-textinput
+```
+
+> **Note**: This component requires TailwindCSS and the `@versini/ui-styles` plugin for proper styling. See the [root README](../../README.md#tailwindcss-setup) for complete setup instructions.
+
+## Usage
+
+### Basic TextInput
+
+```tsx
+import { TextInput } from "@versini/ui-textinput";
+
+function App() {
+  return (
+    <TextInput
+      label="Email Address"
+      name="email"
+      type="email"
+      placeholder="Enter your email"
+    />
+  );
+}
+```
+
+### TextInput with Helper Text
+
+```tsx
+import { TextInput } from "@versini/ui-textinput";
+
+function App() {
+  return (
+    <TextInput
+      label="Password"
+      name="password"
+      type="password"
+      helperText="Must be at least 8 characters long"
+      placeholder="Enter your password"
+    />
+  );
+}
+```
+
+### TextInput with Error State
+
+```tsx
+import { TextInput } from "@versini/ui-textinput";
+
+function App() {
+  return (
+    <TextInput
+      label="Username"
+      name="username"
+      error
+      helperText="Username is already taken"
+      defaultValue="invalid-username"
+    />
+  );
+}
+```
+
+### TextInput with Right Element
+
+```tsx
+import { TextInput } from "@versini/ui-textinput";
+import { Button } from "@versini/ui-button";
+
+function App() {
+  return (
+    <TextInput
+      label="Search"
+      name="search"
+      placeholder="Search for anything..."
+      rightElement={
+        <Button size="small" variant="primary">
+          Search
+        </Button>
+      }
+    />
+  );
+}
+```
+
+### TextInputMask (Password with Toggle)
+
+```tsx
+import { TextInputMask } from "@versini/ui-textinput";
+import { ButtonIcon } from "@versini/ui-button";
+import { IconEye, IconEyeOff } from "@versini/ui-icons";
+import { useState } from "react";
+
+function App() {
+  const [masked, setMasked] = useState(true);
+
+  return (
+    <TextInputMask
+      label="Password"
+      name="password"
+      type={masked ? "password" : "text"}
+      onMaskChange={setMasked}
+      rightElement={
+        <ButtonIcon
+          label={masked ? "Show password" : "Hide password"}
+          noBackground
+        >
+          {masked ? <IconEye /> : <IconEyeOff />}
+        </ButtonIcon>
+      }
+    />
+  );
+}
+```
+
+## API
+
+### TextInput Props
+
+| Prop                  | Type                                            | Default    | Description                                        |
+| --------------------- | ----------------------------------------------- | ---------- | -------------------------------------------------- |
+| label                 | `string`                                        | -          | The label of the TextInput (required)              |
+| name                  | `string`                                        | -          | The name of the TextInput (required)               |
+| rightElement          | `React.ReactElement`                            | -          | Element to render on the right side                |
+| rightElementClassName | `string`                                        | -          | Extra classes for the right element container      |
+| error                 | `boolean`                                       | `false`    | Whether the TextInput is in error state            |
+| helperText            | `string`                                        | -          | Text to add to the bottom of the TextInput         |
+| size                  | `"xs" \| "sm" \| "md" \| "lg" \| "xl"`          | `"md"`     | Controls input height and padding                  |
+| mode                  | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The mode of TextInput (controls color)             |
+| focusMode             | `"dark" \| "light" \| "system" \| "alt-system"` | `"system"` | The focus ring color mode                          |
+| labelHidden           | `boolean`                                       | `false`    | Hides the label visually but retains accessibility |
+| labelId               | `string`                                        | -          | Id to use for the TextInput label                  |
+| noBorder              | `boolean`                                       | `false`    | Whether the TextInput has a border                 |
+| raw                   | `boolean`                                       | `false`    | Whether to render with styles                      |
+| inputClassName        | `string`                                        | -          | CSS class(es) for the actual input element         |
+
+_Also supports all standard HTML input element attributes_
+
+### TextInputMask Props
+
+| Prop                | Type                        | Default | Description                                    |
+| ------------------- | --------------------------- | ------- | ---------------------------------------------- |
+| rightElement        | `React.ReactElement`        | -       | Element to render on the right side (required) |
+| onMaskChange        | `(masked: boolean) => void` | -       | Callback fired when mask state changes         |
+| onTextInputMaskBlur | `() => void`                | -       | Callback fired when user blurs out             |
+
+_Also supports all TextInput props except rightElement is required_
+
+## Examples
+
+### Form with Validation
+
+```tsx
+import { TextInput } from "@versini/ui-textinput";
+import { Button } from "@versini/ui-button";
+import { useState } from "react";
+
+function ValidationForm() {
+  const [errors, setErrors] = useState({});
+  const [values, setValues] = useState({
+    email: "",
+    password: "",
+    confirmPassword: ""
+  });
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Validation logic here
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 max-w-md">
+      <TextInput
+        label="Email"
+        name="email"
+        type="email"
+        value={values.email}
+        onChange={(e) => setValues({ ...values, email: e.target.value })}
+        error={!!errors.email}
+        helperText={errors.email || "We'll never share your email"}
+        required
+      />
+
+      <TextInput
+        label="Password"
+        name="password"
+        type="password"
+        value={values.password}
+        onChange={(e) => setValues({ ...values, password: e.target.value })}
+        error={!!errors.password}
+        helperText={errors.password || "Must be at least 8 characters"}
+        required
+      />
+
+      <TextInput
+        label="Confirm Password"
+        name="confirmPassword"
+        type="password"
+        value={values.confirmPassword}
+        onChange={(e) =>
+          setValues({ ...values, confirmPassword: e.target.value })
+        }
+        error={!!errors.confirmPassword}
+        helperText={errors.confirmPassword}
+        required
+      />
+
+      <Button type="submit" fullWidth>
+        Create Account
+      </Button>
+    </form>
+  );
+}
+```
+
+### Different Sizes
+
+```tsx
+import { TextInput } from "@versini/ui-textinput";
+
+function SizeExamples() {
+  return (
+    <div className="space-y-4">
+      <TextInput
+        label="Extra Small"
+        name="xs"
+        size="xs"
+        placeholder="Extra small input"
+      />
+      <TextInput label="Small" name="sm" size="sm" placeholder="Small input" />
+      <TextInput
+        label="Medium"
+        name="md"
+        size="md"
+        placeholder="Medium input (default)"
+      />
+      <TextInput label="Large" name="lg" size="lg" placeholder="Large input" />
+      <TextInput
+        label="Extra Large"
+        name="xl"
+        size="xl"
+        placeholder="Extra large input"
+      />
+    </div>
+  );
+}
+```
+
+### Search Input with Icon
+
+```tsx
+import { TextInput } from "@versini/ui-textinput";
+import { ButtonIcon } from "@versini/ui-button";
+import { IconSearch } from "@versini/ui-icons";
+
+function SearchInput() {
+  return (
+    <TextInput
+      label="Search Products"
+      name="search"
+      placeholder="Search for products..."
+      rightElement={
+        <ButtonIcon label="Search" variant="primary" size="small" noBackground>
+          <IconSearch />
+        </ButtonIcon>
+      }
+      rightElementClassName="mr-2"
+    />
+  );
+}
+```
+
+### Clearable Input
+
+```tsx
+import { TextInput } from "@versini/ui-textinput";
+import { ButtonIcon } from "@versini/ui-button";
+import { IconClose } from "@versini/ui-icons";
+import { useState } from "react";
+
+function ClearableInput() {
+  const [value, setValue] = useState("");
+
+  return (
+    <TextInput
+      label="Search Query"
+      name="query"
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      placeholder="Type to search..."
+      rightElement={
+        value ? (
+          <ButtonIcon label="Clear" noBackground onClick={() => setValue("")}>
+            <IconClose />
+          </ButtonIcon>
+        ) : undefined
+      }
+    />
+  );
+}
+```
+
+### Password Input with Strength Indicator
+
+```tsx
+import { TextInputMask } from "@versini/ui-textinput";
+import { ButtonIcon } from "@versini/ui-button";
+import { IconEye, IconEyeOff } from "@versini/ui-icons";
+import { useState } from "react";
+
+function PasswordWithStrength() {
+  const [password, setPassword] = useState("");
+  const [masked, setMasked] = useState(true);
+
+  const getPasswordStrength = (password) => {
+    // Simple strength calculation
+    let strength = 0;
+    if (password.length >= 8) strength++;
+    if (/[A-Z]/.test(password)) strength++;
+    if (/[0-9]/.test(password)) strength++;
+    if (/[^A-Za-z0-9]/.test(password)) strength++;
+    return strength;
+  };
+
+  const strength = getPasswordStrength(password);
+  const strengthColors = ["red", "orange", "yellow", "green"];
+  const strengthLabels = ["Weak", "Fair", "Good", "Strong"];
+
+  return (
+    <div className="space-y-2">
+      <TextInputMask
+        label="Password"
+        name="password"
+        type={masked ? "password" : "text"}
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        onMaskChange={setMasked}
+        rightElement={
+          <ButtonIcon
+            label={masked ? "Show password" : "Hide password"}
+            noBackground
+          >
+            {masked ? <IconEye /> : <IconEyeOff />}
+          </ButtonIcon>
+        }
+      />
+
+      {password && (
+        <div className="space-y-1">
+          <div className="flex space-x-1">
+            {[...Array(4)].map((_, i) => (
+              <div
+                key={i}
+                className={`h-1 flex-1 rounded ${
+                  i < strength
+                    ? `bg-${strengthColors[strength - 1]}-500`
+                    : "bg-gray-200"
+                }`}
+              />
+            ))}
+          </div>
+          <p className="text-sm text-gray-600">
+            Password strength: {strengthLabels[strength - 1] || "Too weak"}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+### Theme Variations
+
+```tsx
+import { TextInput } from "@versini/ui-textinput";
+
+function ThemeVariations() {
+  return (
+    <div className="space-y-4">
+      <TextInput
+        label="Light Theme"
+        name="light"
+        mode="light"
+        placeholder="Light theme input"
+      />
+
+      <TextInput
+        label="Dark Theme"
+        name="dark"
+        mode="dark"
+        placeholder="Dark theme input"
+      />
+
+      <TextInput
+        label="System Theme"
+        name="system"
+        mode="system"
+        placeholder="System theme input"
+      />
+    </div>
+  );
+}
+```

package/dist/chunks/{TextInput.BQusw3pT.js → TextInput.9wpoUp2i.js}

@@ -1,14 +1,14 @@
-import { jsx as f, jsxs as H } from "react/jsx-runtime";
-import z, { useRef as y, useCallback as W, useEffect as _, useState as $, useMemo as J, useId as K, useReducer as Q, useLayoutEffect as L } from "react";
+import { jsx as f, jsxs as q } from "react/jsx-runtime";
+import G, { useRef as y, useCallback as H, useEffect as R, useState as L, useMemo as z, useId as W, useReducer as J, useLayoutEffect as _ } from "react";
 import c from "clsx";
-const P = "av-text-input", me = "av-text-input-simple", Y = "av-text-input-wrapper", I = "av-text-input-helper-text";
-function Z() {
+const S = "av-text-input", he = "av-text-input-simple", K = "av-text-input-wrapper", N = "av-text-input-helper-text";
+function Q() {
   const e = y(!1);
-  return _(() => (e.current = !0, () => {
+  return R(() => (e.current = !0, () => {
     e.current = !1;
-  }), []), W(() => e.current, []);
+  }), []), H(() => e.current, []);
 }
-const B = {
+const Y = {
   x: 0,
   y: 0,
   width: 0,
@@ -18,19 +18,19 @@ const B = {
   bottom: 0,
   right: 0
 };
-function ee(e) {
-  const n = Z(), t = y(0), r = y(null), [a, o] = $(B), l = J(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((p) => {
+function Z(e) {
+  const n = Q(), t = y(0), r = y(null), [a, o] = L(Y), l = z(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((p) => {
     const i = p[0];
     i && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
       r.current && n() && o(i.contentRect);
     }));
   }), [n]);
-  return _(() => (r.current && (l == null || l.observe(r.current, e)), () => {
-    l == null || l.disconnect(), t.current && cancelAnimationFrame(t.current);
+  return R(() => (r.current && l?.observe(r.current, e), () => {
+    l?.disconnect(), t.current && cancelAnimationFrame(t.current);
   }), [l, e]), [r, a];
 }
-function te(e) {
-  const n = K();
+function B(e) {
+  const n = W();
   if (!e)
     return n;
   if (typeof e == "number" || typeof e == "string")
@@ -40,7 +40,7 @@ function te(e) {
     return typeof t == "number" || typeof t == "string" ? `${r}${t}` : `${r}${n}`;
   }
 }
-const D = "SET_ANNOUNCEMENT", w = "CLEAR_ANNOUNCEMENT", re = {
+const P = "SET_ANNOUNCEMENT", D = "CLEAR_ANNOUNCEMENT", ee = {
   alert: null,
   alertdialog: null,
   log: "polite",
@@ -48,14 +48,14 @@ const D = "SET_ANNOUNCEMENT", w = "CLEAR_ANNOUNCEMENT", re = {
   progressbar: null,
   status: "polite",
   timer: "assertive"
-}, ne = (e, n) => {
-  switch (n == null ? void 0 : n.type) {
-    case D:
+}, te = (e, n) => {
+  switch (n?.type) {
+    case P:
       return {
         ...e,
         announcement: n.payload
       };
-    case w:
+    case D:
       return {
         ...e,
         announcement: null
@@ -63,14 +63,14 @@ const D = "SET_ANNOUNCEMENT", w = "CLEAR_ANNOUNCEMENT", re = {
     default:
       return e;
   }
-}, ae = ({
+}, re = ({
   onAnnouncementClear: e,
   dispatch: n
 }) => {
   n({
-    type: w
+    type: D
   }), typeof e == "function" && e();
-}, S = ({
+}, C = ({
   children: e,
   clearAnnouncementDelay: n,
   clearAnnouncementTimeoutRef: t,
@@ -78,16 +78,16 @@ const D = "SET_ANNOUNCEMENT", w = "CLEAR_ANNOUNCEMENT", re = {
   dispatch: a
 }) => {
   clearTimeout(t.current), e !== null && a({
-    type: D,
+    type: P,
     payload: e
   }), n && (t.current = setTimeout(
-    () => ae({
+    () => re({
       onAnnouncementClear: r,
       dispatch: a
     }),
     n
   ));
-}, le = ({
+}, ne = ({
   children: e,
   announcementTimeoutRef: n,
   announcementDelay: t,
@@ -96,13 +96,13 @@ const D = "SET_ANNOUNCEMENT", w = "CLEAR_ANNOUNCEMENT", re = {
   onAnnouncementClear: o,
   dispatch: l
 }) => {
-  clearTimeout(n.current), t ? n.current = setTimeout(S, t, {
+  clearTimeout(n.current), t ? n.current = setTimeout(C, t, {
     children: e,
     clearAnnouncementDelay: r,
     clearAnnouncementTimeoutRef: a,
     onAnnouncementClear: o,
     dispatch: l
-  }) : S({
+  }) : C({
     children: e,
     clearAnnouncementDelay: r,
     clearAnnouncementTimeoutRef: a,
@@ -110,7 +110,7 @@ const D = "SET_ANNOUNCEMENT", w = "CLEAR_ANNOUNCEMENT", re = {
     dispatch: l
   });
 };
-function ce({
+function ae({
   children: e,
   className: n,
   politeness: t,
@@ -121,13 +121,13 @@ function ce({
   visible: p,
   ...i
 }) {
-  const x = y(null), m = y(null), [s, g] = Q(ne, {
+  const h = y(null), m = y(null), [s, g] = J(te, {
     announcement: null
   });
   let d = t;
-  typeof d > "u" && (d = r ? re[r] : "assertive"), _(() => {
-    le({
-      announcementTimeoutRef: x,
+  typeof d > "u" && (d = r ? ee[r] : "assertive"), R(() => {
+    ne({
+      announcementTimeoutRef: h,
       announcementDelay: a,
       children: e,
       clearAnnouncementDelay: o,
@@ -156,33 +156,33 @@ function ce({
   );
 }
 /*!
-  @versini/ui-liveregion v2.0.5
+  @versini/ui-liveregion v2.0.7
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_LIVEREGION__ || (window.__VERSINI_UI_LIVEREGION__ = {
-    version: "2.0.5",
-    buildTime: "06/28/2025 08:58 PM EDT",
+    version: "2.0.7",
+    buildTime: "08/07/2025 04:11 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const oe = ({
+const le = ({
   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"
-}), se = ({
+}), ce = ({
   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"
-}), ue = ({
+}), oe = ({
   noBorder: e,
   error: n
 }) => c("border-2", {
@@ -190,7 +190,7 @@ const oe = ({
   "focus:border-border-dark": !e && n,
   "border-border-error-dark": !e && n,
   "border-transparent": e
-}), ie = ({
+}), se = ({
   disabled: e,
   raw: n,
   error: t,
@@ -214,7 +214,7 @@ const oe = ({
       "text-copy-error-dark dark:text-copy-error-light dark:bg-surface-darker": r === "system",
       "text-copy-lighter dark:text-copy-error-dark": r === "alt-system"
     });
-}, pe = ({
+}, ue = ({
   error: e,
   raw: n,
   mode: t,
@@ -224,24 +224,24 @@ const oe = ({
     return "";
   if (r)
     return c(
-      I,
+      N,
       "absolute px-2 cursor-not-allowed opacity-50 font-medium"
     );
   if (!e)
-    return c(I, "absolute px-2 font-medium", {
+    return c(N, "absolute px-2 font-medium", {
       "text-copy-lighter": t === "dark",
       "text-copy-dark": t === "light",
       "text-copy-dark dark:text-copy-lighter": t === "system",
       "text-copy-lighter dark:text-copy-dark": t === "alt-system"
     });
   if (e)
-    return c(I, "absolute px-2 font-medium", {
+    return c(N, "absolute px-2 font-medium", {
       "text-copy-error-light bg-surface-darker": t === "dark",
       "text-copy-error-dark": t === "light",
       "text-copy-error-dark dark:text-copy-error-light dark:bg-surface-darker": t === "system",
       "dark:text-copy-error-dark text-copy-error-light bg-surface-darker": t === "alt-system"
     });
-}, de = ({
+}, ie = ({
   className: e,
   inputClassName: n,
   raw: t,
@@ -251,11 +251,11 @@ const oe = ({
   mode: l,
   focusMode: p,
   size: i,
-  rightElementClassName: x
+  rightElementClassName: h
 }) => {
   const m = t ? e : c(
     "relative flex w-full flex-col justify-center",
-    Y,
+    K,
     e
   );
   let s = "";
@@ -277,36 +277,36 @@ const oe = ({
       break;
   }
   const g = t ? c(n) : c(
-    P,
+    S,
     s,
     "rounded-md text-base px-4",
-    oe({ mode: l }),
-    se({ focusMode: p }),
-    ue({ noBorder: a, error: o }),
+    le({ mode: l }),
+    ce({ focusMode: p }),
+    oe({ noBorder: a, error: o }),
     {
       "disabled:cursor-not-allowed disabled:opacity-50": r
     },
     n
-  ), d = t ? void 0 : "sr-only", u = ie({
+  ), d = t ? void 0 : "sr-only", u = se({
     disabled: r,
     raw: t,
     error: o,
     mode: l
-  }), b = pe({
+  }), b = ue({
     error: o,
     raw: t,
     mode: l,
     disabled: r
-  }), v = t ? void 0 : c("absolute right-3", x);
+  }), A = t ? void 0 : c("absolute right-3", h);
   return {
     wrapper: m,
     input: g,
     accessibleLabel: d,
     visibleLabel: u,
     helperText: b,
-    rightElement: v
+    rightElement: A
   };
-}, fe = z.forwardRef(
+}, pe = G.forwardRef(
   ({
     id: e,
     name: n,
@@ -317,107 +317,106 @@ const oe = ({
     inputClassName: l,
     mode: p = "system",
     focusMode: i = "system",
-    disabled: x = !1,
+    disabled: h = !1,
     noBorder: m = !1,
     labelId: s,
     labelHidden: g = !1,
     type: d = "text",
     helperText: u = "",
     rightElement: b,
-    rightElementClassName: v,
-    size: N = "md",
-    ...U
-  }, M) => {
-    const [F, T] = ee(), [O, X] = $(0), k = te({ id: e, prefix: `${P}-` }), j = `${n} error, ${u}`, A = y(null), E = y(null), V = {
+    rightElementClassName: A,
+    size: E = "md",
+    ...$
+  }, w) => {
+    const [U, T] = Z(), [M, F] = L(0), k = B({ id: e, prefix: `${S}-` }), O = `${n} error, ${u}`, v = y(null), I = y(null), X = {
       xs: { label: "-25px", helperText: "30px" },
       sm: { label: "-29px", helperText: "34px" },
       md: { label: "-33px", helperText: "38px" },
       lg: { label: "-15px", helperText: "22px" },
       xl: { label: "-19px", helperText: "25px" }
-    }, h = de({
+    }, x = ie({
       className: o,
       inputClassName: l,
       error: r,
       raw: a,
       focusMode: i,
-      disabled: x,
+      disabled: h,
       noBorder: m,
       mode: p,
-      size: N,
-      rightElementClassName: v
+      size: E,
+      rightElementClassName: A
     });
-    return L(() => {
-      T && T.width && X(T.width + 18 + 10);
-    }, [T]), L(() => {
-      var R, C;
-      const { label: q, helperText: G } = V[N];
-      (R = A == null ? void 0 : A.current) == null || R.style.setProperty("--av-text-input-label", q), (C = E == null ? void 0 : E.current) == null || C.style.setProperty(
+    return _(() => {
+      T && T.width && F(T.width + 18 + 10);
+    }, [T]), _(() => {
+      const { label: j, helperText: V } = X[E];
+      v?.current?.style.setProperty("--av-text-input-label", j), I?.current?.style.setProperty(
         "--av-text-input-helper-text",
-        G
+        V
       );
-    }, [N]), /* @__PURE__ */ H("div", { className: h.wrapper, children: [
+    }, [E]), /* @__PURE__ */ q("div", { className: x.wrapper, children: [
       /* @__PURE__ */ f(
         "label",
         {
           htmlFor: k,
           id: s,
-          className: h.accessibleLabel,
+          className: x.accessibleLabel,
           children: t
         }
       ),
       /* @__PURE__ */ f(
         "input",
         {
-          ref: M,
+          ref: w,
           id: k,
           name: n,
           type: d,
-          disabled: x,
+          disabled: h,
           placeholder: a ? void 0 : " ",
-          className: h.input,
+          className: x.input,
           ...u && { "aria-describedby": `${k}-helper` },
           ...r && { "aria-invalid": "true" },
-          ...b && !a && { style: { paddingRight: O } },
-          ...U
+          ...b && !a && { style: { paddingRight: M } },
+          ...$
         }
       ),
       !a && !g && /* @__PURE__ */ f(
         "label",
         {
-          ref: A,
+          ref: v,
           "aria-hidden": !0,
           htmlFor: k,
-          className: h.visibleLabel,
+          className: x.visibleLabel,
           children: t
         }
       ),
       u && /* @__PURE__ */ f(
         "div",
         {
-          ref: E,
+          ref: I,
           id: `${k}-helper`,
-          className: h.helperText,
+          className: x.helperText,
           children: u
         }
       ),
       b && /* @__PURE__ */ f(
         "div",
         {
-          ref: F,
-          className: h.rightElement,
+          ref: U,
+          className: x.rightElement,
           children: b
         }
       ),
-      r && u && /* @__PURE__ */ f(ce, { politeness: "polite", clearAnnouncementDelay: 500, children: j })
+      r && u && /* @__PURE__ */ f(ae, { politeness: "polite", clearAnnouncementDelay: 500, children: O })
     ] });
   }
 );
-fe.displayName = "TextInput";
+pe.displayName = "TextInput";
 export {
-  P as TEXT_INPUT_CLASSNAME,
-  I as TEXT_INPUT_HELPER_TEXT_CLASSNAME,
-  me as TEXT_INPUT_SIMPLE_CLASSNAME,
-  Y as TEXT_INPUT_WRAPPER_CLASSNAME,
-  fe as TextInput,
-  ce as x
+  S as TEXT_INPUT_CLASSNAME,
+  N as TEXT_INPUT_HELPER_TEXT_CLASSNAME,
+  he as TEXT_INPUT_SIMPLE_CLASSNAME,
+  K as TEXT_INPUT_WRAPPER_CLASSNAME,
+  pe as TextInput,
+  ae as x
 };

package/dist/components/TextInput/TextInput.js

@@ -1,5 +1,5 @@
 import "react/jsx-runtime";
-import { TextInput as m } from "../../chunks/TextInput.BQusw3pT.js";
+import { TextInput as m } from "../../chunks/TextInput.9wpoUp2i.js";
 import "react";
 export {
   m as TextInput

package/dist/components/TextInput/TextInputMask.js

@@ -1,85 +1,84 @@
-import { TextInput as F, x as H } from "../../chunks/TextInput.BQusw3pT.js";
-import { jsxs as L, Fragment as B, jsx as x } from "react/jsx-runtime";
-import A, { useMemo as j, useState as _, useRef as m, useEffect as b } from "react";
-function $(r) {
-  return j(() => r.every((t) => t == null) ? () => {
+import { TextInput as y, x as D } from "../../chunks/TextInput.9wpoUp2i.js";
+import { jsxs as F, Fragment as H, jsx as M } from "react/jsx-runtime";
+import N, { useMemo as L, useState as x, useRef as i, useEffect as B } from "react";
+function j(s) {
+  return L(() => s.every((t) => t == null) ? () => {
   } : (t) => {
-    r.forEach((n) => {
+    s.forEach((n) => {
       typeof n == "function" ? n(t) : n != null && (n.current = t);
     });
-  }, [...r]);
+  }, [...s]);
 }
-const q = 500, z = 5e3, G = 2e4, J = A.forwardRef(
+const b = 500, $ = 5e3, q = 2e4, z = N.forwardRef(
   ({
-    name: r,
+    name: s,
     disabled: t,
     label: n,
-    labelHidden: k,
+    labelHidden: A,
     onMaskChange: u,
-    onChange: T,
-    onBlur: d,
-    onFocus: p,
-    onTextInputMaskBlur: f,
-    rightElement: O,
-    ...U
-  }, E) => {
-    const [h, R] = _(!0), [l, g] = _({
+    onChange: m,
+    onBlur: p,
+    onFocus: T,
+    onTextInputMaskBlur: d,
+    rightElement: _,
+    ...k
+  }, f) => {
+    const [E, h] = x(!0), [l, R] = x({
       message: null,
       politeness: null
-    }), c = m(!0), o = m(null), I = m(null), w = $([E, I]), C = h ? "Show" : "Hide", a = () => {
+    }), c = i(!0), o = i(null), g = i(null), O = j([f, g]), U = E ? "Show" : "Hide", a = () => {
       o.current && clearTimeout(o.current), c.current || (o.current = setTimeout(() => {
-        c.current = !0, R(!0), g({
-          announcementTimeout: z,
+        c.current = !0, h(!0), R({
+          announcementTimeout: $,
           politeness: "polite",
           message: `${n} hiding characters`
         }), u && u(!0);
-      }, G));
-    }, S = (e) => {
+      }, q));
+    }, w = (e) => {
       e.preventDefault();
-      const s = !c.current;
-      c.current = s, a(), R(s), g({
-        announcementTimeout: q,
+      const r = !c.current;
+      c.current = r, a(), h(r), R({
+        announcementTimeout: b,
         politeness: "assertive",
-        message: s ? "Characters hidden" : "Characters showing"
-      }), u && u(s);
-    }, M = (e) => {
-      var N;
-      const { relatedTarget: s } = e, i = (N = I.current) == null ? void 0 : N.parentElement;
-      i != null && i.contains(s) || f && f();
-    }, v = (e) => {
-      a(), d && d(e), M(e);
-    }, y = (e) => {
-      a(), p && p(e);
-    }, D = (e) => {
+        message: r ? "Characters hidden" : "Characters showing"
+      }), u && u(r);
+    }, I = (e) => {
+      const { relatedTarget: r } = e;
+      g.current?.parentElement?.contains(r) || d && d();
+    }, C = (e) => {
+      a(), p && p(e), I(e);
+    }, S = (e) => {
       a(), T && T(e);
+    }, v = (e) => {
+      a(), m && m(e);
     };
-    return b(() => () => {
+    return B(() => () => {
       o.current && clearTimeout(o.current);
-    }, []), /* @__PURE__ */ L(B, { children: [
-      /* @__PURE__ */ x(
-        F,
+    }, []), /* @__PURE__ */ F(H, { children: [
+      /* @__PURE__ */ M(
+        y,
         {
-          ref: w,
-          name: r,
+          ref: O,
+          name: s,
           label: n,
-          labelHidden: k,
-          type: h ? "password" : "text",
+          labelHidden: A,
+          type: E ? "password" : "text",
           disabled: t,
-          onBlur: v,
-          onFocus: y,
-          onChange: D,
-          rightElement: A.cloneElement(O, {
-            ref: E,
-            label: C,
-            onClick: S,
-            onBlur: M,
+          onBlur: C,
+          onFocus: S,
+          onChange: v,
+          rightElement: N.cloneElement(_, {
+            ref: f,
+            label: U,
+            onClick: w,
+            onBlur: I,
             disabled: t
           }),
-          ...U
+          ...k
         }
       ),
-      /* @__PURE__ */ x(
-        H,
+      /* @__PURE__ */ M(
+        D,
         {
           role: "status",
           politeness: l.politeness,
@@ -90,7 +89,7 @@ const q = 500, z = 5e3, G = 2e4, J = A.forwardRef(
     ] });
   }
 );
-J.displayName = "TextInputMask";
+z.displayName = "TextInputMask";
 export {
-  J as TextInputMask
+  z as TextInputMask
 };

package/dist/index.js

@@ -1,13 +1,13 @@
-import { TEXT_INPUT_CLASSNAME as I, TEXT_INPUT_HELPER_TEXT_CLASSNAME as e, TEXT_INPUT_SIMPLE_CLASSNAME as o, TEXT_INPUT_WRAPPER_CLASSNAME as t, TextInput as N } from "./chunks/TextInput.BQusw3pT.js";
+import { TEXT_INPUT_CLASSNAME as I, TEXT_INPUT_HELPER_TEXT_CLASSNAME as e, TEXT_INPUT_SIMPLE_CLASSNAME as o, TEXT_INPUT_WRAPPER_CLASSNAME as t, TextInput as N } from "./chunks/TextInput.9wpoUp2i.js";
 import { TextInputMask as P } from "./components/TextInput/TextInputMask.js";
 /*!
-  @versini/ui-textinput v4.0.5
+  @versini/ui-textinput v4.0.7
   © 2025 gizmette.com
 */
 try {
   window.__VERSINI_UI_TEXTINPUT__ || (window.__VERSINI_UI_TEXTINPUT__ = {
-    version: "4.0.5",
-    buildTime: "06/28/2025 08:58 PM EDT",
+    version: "4.0.7",
+    buildTime: "08/07/2025 04:11 PM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-textinput",
-	"version": "4.0.5",
+	"version": "4.0.7",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -27,6 +27,7 @@
 		"dev:types": "tsup --watch src",
 		"dev": "npm-run-all clean --parallel dev:js dev:types",
 		"lint": "biome lint src",
+		"lint:fix": "biome check src --write --no-errors-on-unmatched",
 		"prettier": "biome check --write --no-errors-on-unmatched",
 		"start": "static-server dist --port 5173",
 		"test:coverage:ui": "vitest --coverage --ui",
@@ -39,17 +40,18 @@
 		"react-dom": "^18.3.1 || ^19.0.0"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "5.0.5"
+		"@testing-library/jest-dom": "6.6.4",
+		"@versini/ui-types": "5.0.6"
 	},
 	"dependencies": {
 		"@tailwindcss/typography": "0.5.16",
-		"@versini/ui-hooks": "4.7.4",
-		"@versini/ui-liveregion": "2.0.5",
+		"@versini/ui-hooks": "4.7.5",
+		"@versini/ui-liveregion": "2.0.7",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.1.11"
 	},
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "1b9a792d10e1f67fc7af7cfdff718ef1e1c78633"
+	"gitHead": "42daab1fb88c366495abbc1db78a9987de05e59b"
 }