@versini/ui-textinput 1.1.6 → 1.2.0

package/dist/chunks/{TextInput.BGAYG8uI.js → TextInput.ByT_qkyR.js}

@@ -1,14 +1,14 @@
-import { jsx as f, jsxs as z } from "react/jsx-runtime";
-import W, { useRef as y, useEffect as _, useCallback as G, useState as S, useMemo as J, useId as K, useReducer as Q, useLayoutEffect as $ } from "react";
-import o from "clsx";
-const L = "av-text-input", ge = "av-text-input-simple", Y = "av-text-input-wrapper", I = "av-text-input-helper-text";
-function Z() {
+import { jsx as f, jsxs as W } from "react/jsx-runtime";
+import G, { useRef as y, useEffect as R, useCallback as J, useState as L, useMemo as K, useId as Q, useReducer as Y, useLayoutEffect as S } from "react";
+import c from "clsx";
+const D = "av-text-input", be = "av-text-input-simple", Z = "av-text-input-wrapper", C = "av-text-input-helper-text";
+function B() {
   const e = y(!1);
-  return _(() => (e.current = !0, () => {
+  return R(() => (e.current = !0, () => {
     e.current = !1;
-  }), []), G(() => e.current, []);
+  }), []), J(() => e.current, []);
 }
-const B = {
+const ee = {
   x: 0,
   y: 0,
   width: 0,
@@ -18,19 +18,19 @@ const B = {
   bottom: 0,
   right: 0
 };
-function ee(e) {
-  const r = Z(), t = y(0), n = y(null), [l, c] = S(B), a = J(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((u) => {
+function te(e) {
+  const r = B(), t = y(0), n = y(null), [l, o] = L(ee), a = K(() => typeof ResizeObserver > "u" ? null : new ResizeObserver((u) => {
     const p = u[0];
     p && (cancelAnimationFrame(t.current), t.current = requestAnimationFrame(() => {
-      n.current && r() && c(p.contentRect);
+      n.current && r() && o(p.contentRect);
     }));
   }), [r]);
-  return _(() => (n.current && (a == null || a.observe(n.current, e)), () => {
+  return R(() => (n.current && (a == null || a.observe(n.current, e)), () => {
     a == null || a.disconnect(), t.current && cancelAnimationFrame(t.current);
   }), [a, e]), [n, l];
 }
-function te(e) {
-  const r = K();
+function re(e) {
+  const r = Q();
   if (!e)
     return r;
   if (typeof e == "number" || typeof e == "string")
@@ -40,7 +40,7 @@ function te(e) {
     return typeof t == "number" || typeof t == "string" ? `${n}${t}` : `${n}${r}`;
   }
 }
-const D = "SET_ANNOUNCEMENT", w = "CLEAR_ANNOUNCEMENT", re = {
+const w = "SET_ANNOUNCEMENT", M = "CLEAR_ANNOUNCEMENT", ne = {
   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, r) => {
+}, le = (e, r) => {
   switch (r == null ? void 0 : r.type) {
-    case D:
+    case w:
       return {
         ...e,
         announcement: r.payload
       };
-    case w:
+    case M:
       return {
         ...e,
         announcement: null
@@ -63,12 +63,12 @@ const D = "SET_ANNOUNCEMENT", w = "CLEAR_ANNOUNCEMENT", re = {
     default:
       return e;
   }
-}, le = ({
+}, ae = ({
   onAnnouncementClear: e,
   dispatch: r
 }) => {
   r({
-    type: w
+    type: M
   }), typeof e == "function" && e();
 }, P = ({
   children: e,
@@ -78,70 +78,70 @@ const D = "SET_ANNOUNCEMENT", w = "CLEAR_ANNOUNCEMENT", re = {
   dispatch: l
 }) => {
   (t == null ? void 0 : t.current) !== null && clearTimeout(t.current), e !== null && l({
-    type: D,
+    type: w,
     payload: e
   }), r && (t.current = setTimeout(
-    () => le({
+    () => ae({
       onAnnouncementClear: n,
       dispatch: l
     }),
     r
   ));
-}, ae = ({
+}, ce = ({
   children: e,
   announcementTimeoutRef: r,
   announcementDelay: t,
   clearAnnouncementDelay: n,
   clearAnnouncementTimeoutRef: l,
-  onAnnouncementClear: c,
+  onAnnouncementClear: o,
   dispatch: a
 }) => {
   clearTimeout(r.current), t ? r.current = setTimeout(P, t, {
     children: e,
     clearAnnouncementDelay: n,
     clearAnnouncementTimeoutRef: l,
-    onAnnouncementClear: c,
+    onAnnouncementClear: o,
     dispatch: a
   }) : P({
     children: e,
     clearAnnouncementDelay: n,
     clearAnnouncementTimeoutRef: l,
-    onAnnouncementClear: c,
+    onAnnouncementClear: o,
     dispatch: a
   });
 };
-function ce({
+function oe({
   children: e,
   className: r,
   politeness: t,
   role: n = null,
   announcementDelay: l,
-  clearAnnouncementDelay: c,
+  clearAnnouncementDelay: o,
   onAnnouncementClear: a,
   visible: u,
   ...p
 }) {
-  const m = y(), x = y(), [s, g] = Q(ne, {
+  const m = y(), x = y(), [g, s] = Y(le, {
     announcement: null
   });
   let d = t;
-  typeof d > "u" && (d = n ? re[n] : "assertive"), _(() => {
-    ae({
+  typeof d > "u" && (d = n ? ne[n] : "assertive"), R(() => {
+    ce({
       announcementTimeoutRef: m,
       announcementDelay: l,
       children: e,
-      clearAnnouncementDelay: c,
+      clearAnnouncementDelay: o,
       clearAnnouncementTimeoutRef: x,
       onAnnouncementClear: a,
-      dispatch: g
+      dispatch: s
     });
   }, [
     e,
     l,
-    c,
+    o,
     a
   ]);
-  const i = o(r, {
+  const i = c(r, {
     "sr-only": !u
   });
   return /* @__PURE__ */ f(
@@ -151,11 +151,11 @@ function ce({
       ...n && { role: n },
       className: i,
       ...p,
-      children: s.announcement
+      children: g.announcement
     }
   );
 }
-const oe = (e) => {
+const se = (e) => {
   let r = "";
   if (typeof e == "number" || typeof e == "string")
     r = "m-" + e;
@@ -172,35 +172,35 @@ const oe = (e) => {
 try {
   window.__VERSINI_UI_PRIVATE__ || (window.__VERSINI_UI_PRIVATE__ = {
     version: "1.4.17",
-    buildTime: "09/28/2024 06:57 PM EDT",
+    buildTime: "09/30/2024 09:27 AM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
 } catch {
 }
-const se = ({
+const ue = ({
   mode: e
-}) => o({
+}) => 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"
-}), ue = ({
+}), ie = ({
   focusMode: e
-}) => o("focus:outline focus:outline-2 focus:outline-offset-2", {
+}) => 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"
-}), ie = ({
+}), pe = ({
   noBorder: e,
   error: r
-}) => o("border-2", {
+}) => c("border-2", {
   "border-border-dark": !e && !r,
   "focus:border-border-dark": !e && r,
   "border-border-error-dark": !e && r,
   "border-transparent": e
-}), pe = ({
+}), de = ({
   disabled: e,
   raw: r,
   error: t,
@@ -209,22 +209,22 @@ const se = ({
   if (r)
     return "";
   if (e)
-    return o("absolute px-2 cursor-not-allowed opacity-50 font-medium");
+    return c("absolute px-2 cursor-not-allowed opacity-50 font-medium");
   if (!t)
-    return o("absolute px-2 cursor-text font-medium", {
+    return c("absolute px-2 cursor-text font-medium", {
       "text-copy-lighter": n === "dark",
       "text-copy-dark": n === "light",
       "text-copy-dark dark:text-copy-lighter": n === "system",
       "text-copy-lighter dark:text-copy-dark": n === "alt-system"
     });
   if (t)
-    return o("absolute px-2 cursor-text font-medium", {
+    return c("absolute px-2 cursor-text font-medium", {
       "text-copy-lighter": n === "dark",
       "text-copy-error-dark": n === "light",
       "text-copy-error-dark dark:text-copy-error-light dark:bg-surface-darker": n === "system",
       "text-copy-lighter dark:text-copy-error-dark": n === "alt-system"
     });
-}, de = ({
+}, fe = ({
   error: e,
   raw: r,
   mode: t,
@@ -233,41 +233,42 @@ const se = ({
   if (r)
     return "";
   if (n)
-    return o(
-      I,
+    return c(
+      C,
       "absolute px-2 cursor-not-allowed opacity-50 font-medium"
     );
   if (!e)
-    return o(I, "absolute px-2 font-medium", {
+    return c(C, "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 o(I, "absolute px-2 font-medium", {
+    return c(C, "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"
     });
-}, fe = ({
+}, ye = ({
   className: e,
   inputClassName: r,
   raw: t,
   disabled: n,
   noBorder: l,
-  error: c,
+  error: o,
   spacing: a,
   mode: u,
   focusMode: p,
-  size: m
+  size: m,
+  rightElementClassName: x
 }) => {
-  const x = t ? e : o(
+  const g = t ? e : c(
     "relative flex w-full flex-col justify-center",
-    Y,
+    Z,
     e,
-    oe(a)
+    se(a)
   );
   let s = "";
   switch (m) {
@@ -287,91 +288,93 @@ const se = ({
       s = "h-12";
       break;
   }
-  const g = t ? o(r) : o(
-    L,
+  const d = t ? c(r) : c(
+    D,
     r,
     s,
     "rounded-md text-base px-4",
-    se({ mode: u }),
-    ue({ focusMode: p }),
-    ie({ noBorder: l, error: c }),
+    ue({ mode: u }),
+    ie({ focusMode: p }),
+    pe({ noBorder: l, error: o }),
     {
       "disabled:cursor-not-allowed disabled:opacity-50": n
     }
-  ), d = t ? void 0 : "sr-only", i = pe({
+  ), i = t ? void 0 : "sr-only", b = de({
     disabled: n,
     raw: t,
-    error: c,
+    error: o,
     mode: u
-  }), b = de({
-    error: c,
+  }), E = fe({
+    error: o,
     raw: t,
     mode: u,
     disabled: n
-  });
+  }), I = t ? void 0 : c("absolute right-3", x);
   return {
-    wrapper: x,
-    input: g,
-    accessibleLabel: d,
-    visibleLabel: i,
-    helperText: b,
-    rightElement: t ? void 0 : "absolute right-3"
+    wrapper: g,
+    input: d,
+    accessibleLabel: i,
+    visibleLabel: b,
+    helperText: E,
+    rightElement: I
   };
-}, ye = W.forwardRef(
+}, me = G.forwardRef(
   ({
     id: e,
     name: r,
     label: t,
     error: n = !1,
     raw: l = !1,
-    className: c,
+    className: o,
     inputClassName: a,
     mode: u = "system",
     focusMode: p = "system",
     disabled: m = !1,
     noBorder: x = !1,
-    labelId: s,
-    labelHidden: g = !1,
+    labelId: g,
+    labelHidden: s = !1,
     type: d = "text",
     helperText: i = "",
     rightElement: b,
-    spacing: C,
-    size: E = "md",
-    ...M
-  }, U) => {
-    const [j, T] = ee(), [F, O] = S(0), k = te({ id: e, prefix: `${L}-` }), X = `${r} error, ${i}`, v = y(null), A = y(null), V = {
+    rightElementClassName: E,
+    spacing: I,
+    size: _ = "md",
+    ...U
+  }, j) => {
+    const [F, T] = te(), [O, X] = L(0), k = re({ id: e, prefix: `${D}-` }), V = `${r} error, ${i}`, A = y(null), v = y(null), q = {
       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 = fe({
-      className: c,
+    }, h = ye({
+      className: o,
       inputClassName: a,
       error: n,
       raw: l,
       focusMode: p,
       disabled: m,
       noBorder: x,
-      spacing: C,
+      spacing: I,
       mode: u,
-      size: E
+      size: _,
+      rightElementClassName: E
     });
-    return $(() => {
-      T && T.width && O(T.width + 18 + 10);
-    }, [T]), $(() => {
-      var R, N;
-      const { label: q, helperText: H } = V[E];
-      (R = v == null ? void 0 : v.current) == null || R.style.setProperty("--av-text-input-label", q), (N = A == null ? void 0 : A.current) == null || N.style.setProperty(
+    return S(() => {
+      T && T.width && X(T.width + 18 + 10);
+    }, [T]), S(() => {
+      var N, $;
+      const { label: H, helperText: z } = q[_];
+      (N = A == null ? void 0 : A.current) == null || N.style.setProperty("--av-text-input-label", H), ($ = v == null ? void 0 : v.current) == null || $.style.setProperty(
         "--av-text-input-helper-text",
-        H
+        z
       );
-    }, [E]), /* @__PURE__ */ z("div", { className: h.wrapper, children: [
+    }, [_]), /* @__PURE__ */ W("div", { className: h.wrapper, children: [
       /* @__PURE__ */ f(
         "label",
         {
           htmlFor: k,
-          id: s,
+          id: g,
           className: h.accessibleLabel,
           children: t
         }
@@ -379,7 +382,7 @@ const se = ({
       /* @__PURE__ */ f(
         "input",
         {
-          ref: U,
+          ref: j,
           id: k,
           name: r,
           type: d,
@@ -388,14 +391,14 @@ const se = ({
           className: h.input,
           ...i && { "aria-describedby": `${k}-helper` },
           ...n && { "aria-invalid": "true" },
-          ...b && !l && { style: { paddingRight: F } },
-          ...M
+          ...b && !l && { style: { paddingRight: O } },
+          ...U
         }
       ),
-      !l && !g && /* @__PURE__ */ f(
+      !l && !s && /* @__PURE__ */ f(
         "label",
         {
-          ref: v,
+          ref: A,
           "aria-hidden": !0,
           htmlFor: k,
           className: h.visibleLabel,
@@ -405,7 +408,7 @@ const se = ({
       i && /* @__PURE__ */ f(
         "div",
         {
-          ref: A,
+          ref: v,
           id: `${k}-helper`,
           className: h.helperText,
           children: i
@@ -414,21 +417,21 @@ const se = ({
       b && /* @__PURE__ */ f(
         "div",
         {
-          ref: j,
+          ref: F,
           className: h.rightElement,
           children: b
         }
       ),
-      n && i && /* @__PURE__ */ f(ce, { politeness: "polite", clearAnnouncementDelay: 500, children: X })
+      n && i && /* @__PURE__ */ f(oe, { politeness: "polite", clearAnnouncementDelay: 500, children: V })
     ] });
   }
 );
-ye.displayName = "TextInput";
+me.displayName = "TextInput";
 export {
-  L as TEXT_INPUT_CLASSNAME,
-  I as TEXT_INPUT_HELPER_TEXT_CLASSNAME,
-  ge as TEXT_INPUT_SIMPLE_CLASSNAME,
-  Y as TEXT_INPUT_WRAPPER_CLASSNAME,
-  ye as TextInput,
-  ce as j
+  D as TEXT_INPUT_CLASSNAME,
+  C as TEXT_INPUT_HELPER_TEXT_CLASSNAME,
+  be as TEXT_INPUT_SIMPLE_CLASSNAME,
+  Z as TEXT_INPUT_WRAPPER_CLASSNAME,
+  me as TextInput,
+  oe as j
 };

package/dist/components/TextInput/TextInput.js

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

package/dist/components/TextInput/TextInputMask.js

@@ -1,4 +1,4 @@
-import { TextInput as H, j as L } from "../../chunks/TextInput.BGAYG8uI.js";
+import { TextInput as H, j as L } from "../../chunks/TextInput.ByT_qkyR.js";
 import { jsxs as j, Fragment as B, jsx as w } from "react/jsx-runtime";
 import A, { useMemo as b, useState as _, useRef as m, useEffect as $ } from "react";
 function q(r) {

package/dist/index.d.ts

@@ -10,6 +10,7 @@ type Size = "xs" | "sm" | "md" | "lg" | "xl";
 
 declare const TextInput: React.ForwardRefExoticComponent<{
     rightElement?: React.ReactElement;
+    rightElementClassName?: string;
 } & {
     label: string;
     name: string;

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.BGAYG8uI.js";
-import { TextInputMask as P } from "./components/TextInput/TextInputMask.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.ByT_qkyR.js";
+import { TextInputMask as S } from "./components/TextInput/TextInputMask.js";
 /*!
-  @versini/ui-textinput v1.1.6
+  @versini/ui-textinput v1.2.0
   © 2024 gizmette.com
 */
 try {
   window.__VERSINI_UI_TEXTINPUT__ || (window.__VERSINI_UI_TEXTINPUT__ = {
-    version: "1.1.6",
-    buildTime: "09/28/2024 06:57 PM EDT",
+    version: "1.2.0",
+    buildTime: "09/30/2024 09:28 AM EDT",
     homepage: "https://github.com/aversini/ui-components",
     license: "MIT"
   });
@@ -19,5 +19,5 @@ export {
   o as TEXT_INPUT_SIMPLE_CLASSNAME,
   t as TEXT_INPUT_WRAPPER_CLASSNAME,
   N as TextInput,
-  P as TextInputMask
+  S as TextInputMask
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-textinput",
-	"version": "1.1.6",
+	"version": "1.2.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -47,5 +47,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "3bbac69788c0cff96c933959514612dbd9bbd366"
+	"gitHead": "9cced954bca31bcfa598b09dabd5e95a10184896"
 }