@adam-milo/ui 1.0.20 → 1.0.21

package/dist/index4.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("react"),u=require("./index17.cjs");;/* empty css          */const w=d.forwardRef(({showToggle:h=!0,label:o,error:e,helperText:i,fullWidth:l=!1,className:x,id:g,"data-cy":j,"data-testid":y,...k},f)=>{const[n,b]=d.useState(!1),m=d.useId(),a=g||m,c=`${a}-error`,p=`${a}-helper`,s=j||"password-input",r=y||"password-input",$=()=>{b(v=>!v)};return t.jsxs("div",{className:"password-input-wrapper",children:[t.jsxs("div",{className:u.cn("input-wrapper",l&&"input-wrapper--full-width"),"data-cy":`${s}-wrapper`,"data-testid":`${r}-wrapper`,children:[o&&t.jsx("label",{htmlFor:a,className:"input__label","data-cy":`${s}-label`,"data-testid":`${r}-label`,children:o}),t.jsx("input",{ref:f,id:a,type:n?"text":"password",className:u.cn("input","password-input",e&&"input--error",l&&"input--full-width",x),"aria-invalid":e?"true":"false","aria-describedby":e?c:i?p:void 0,"data-cy":s,"data-testid":r,...k}),e&&t.jsx("span",{id:c,className:"input__error",role:"alert","data-cy":`${s}-error`,"data-testid":`${r}-error`,children:e}),i&&!e&&t.jsx("span",{id:p,className:"input__helper","data-cy":`${s}-helper`,"data-testid":`${r}-helper`,children:i})]}),h&&t.jsx("button",{type:"button",className:"password-input__toggle",onClick:$,"aria-label":n?"Hide password":"Show password","data-cy":`${s}-toggle`,"data-testid":`${r}-toggle`,children:n?t.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[t.jsx("path",{d:"M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}),t.jsx("circle",{cx:"10",cy:"10",r:"2.5",stroke:"currentColor",strokeWidth:"1.5",fill:"none"})]}):t.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[t.jsx("path",{d:"M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}),t.jsx("circle",{cx:"10",cy:"10",r:"2.5",stroke:"currentColor",strokeWidth:"1.5",fill:"none"}),t.jsx("path",{d:"M3 3l14 14",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})})]})});w.displayName="PasswordInput";exports.PasswordInput=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("./index17.cjs");;/* empty css          */const s=r.forwardRef(({showToggle:s=!0,label:a,error:i,helperText:o,fullWidth:d=!1,className:l,id:n,"data-cy":p,"data-testid":c,...u},h)=>{const[w,x]=r.useState(!1),j=r.useId(),g=n||j,k=`${g}-error`,y=`${g}-helper`,f=p||"password-input",m=c||"password-input";return e.jsxs("div",{className:"password-input-wrapper",children:[e.jsxs("div",{className:t.cn("input-wrapper",d&&"input-wrapper--full-width"),"data-cy":`${f}-wrapper`,"data-testid":`${m}-wrapper`,children:[a&&e.jsx("label",{htmlFor:g,className:"input__label","data-cy":`${f}-label`,"data-testid":`${m}-label`,children:a}),e.jsx("input",{ref:h,id:g,type:w?"text":"password",className:t.cn("input","password-input",i&&"input--error",d&&"input--full-width",l),"aria-invalid":i?"true":"false","aria-describedby":i?k:o?y:void 0,"data-cy":f,"data-testid":m,...u}),i&&e.jsx("span",{id:k,className:"input__error",role:"alert","data-cy":`${f}-error`,"data-testid":`${m}-error`,children:i}),o&&!i&&e.jsx("span",{id:y,className:"input__helper","data-cy":`${f}-helper`,"data-testid":`${m}-helper`,children:o})]}),s&&e.jsx("button",{type:"button",className:"password-input__toggle",onClick:()=>{x(e=>!e)},"aria-label":w?"Hide password":"Show password","data-cy":`${f}-toggle`,"data-testid":`${m}-toggle`,children:w?e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e.jsx("path",{d:"M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}),e.jsx("circle",{cx:"10",cy:"10",r:"2.5",stroke:"currentColor",strokeWidth:"1.5",fill:"none"})]}):e.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:[e.jsx("path",{d:"M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"}),e.jsx("circle",{cx:"10",cy:"10",r:"2.5",stroke:"currentColor",strokeWidth:"1.5",fill:"none"}),e.jsx("path",{d:"M3 3l14 14",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})})]})});s.displayName="PasswordInput",exports.PasswordInput=s;

package/dist/index4.js

@@ -1,95 +1,102 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { forwardRef as x, useState as I, useId as N } from "react";
-import { cn as u } from "./index17.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useId } from "react";
+import { cn } from "./index17.js";
 /* empty css        */
-const _ = x(
+const PasswordInput = forwardRef(
   ({
-    showToggle: w = !0,
-    label: n,
-    error: e,
-    helperText: o,
-    fullWidth: l = !1,
-    className: h,
-    id: m,
-    "data-cy": f,
-    "data-testid": g,
-    ...k
-  }, y) => {
-    const [d, $] = I(!1), b = N(), a = m || b, p = `${a}-error`, c = `${a}-helper`, r = f || "password-input", s = g || "password-input", v = () => {
-      $((C) => !C);
+    showToggle = true,
+    label,
+    error,
+    helperText,
+    fullWidth = false,
+    className,
+    id: providedId,
+    "data-cy": dataCy,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const errorId = `${id}-error`;
+    const helperId = `${id}-helper`;
+    const finalDataCy = dataCy || "password-input";
+    const finalTestId = dataTestId || "password-input";
+    const togglePasswordVisibility = () => {
+      setIsPasswordVisible((prev) => !prev);
     };
-    return /* @__PURE__ */ i("div", { className: "password-input-wrapper", children: [
-      /* @__PURE__ */ i(
+    return /* @__PURE__ */ jsxs("div", { className: "password-input-wrapper", children: [
+      /* @__PURE__ */ jsxs(
         "div",
         {
-          className: u("input-wrapper", l && "input-wrapper--full-width"),
-          "data-cy": `${r}-wrapper`,
-          "data-testid": `${s}-wrapper`,
+          className: cn("input-wrapper", fullWidth && "input-wrapper--full-width"),
+          "data-cy": `${finalDataCy}-wrapper`,
+          "data-testid": `${finalTestId}-wrapper`,
           children: [
-            n && /* @__PURE__ */ t(
+            label && /* @__PURE__ */ jsx(
               "label",
               {
-                htmlFor: a,
+                htmlFor: id,
                 className: "input__label",
-                "data-cy": `${r}-label`,
-                "data-testid": `${s}-label`,
-                children: n
+                "data-cy": `${finalDataCy}-label`,
+                "data-testid": `${finalTestId}-label`,
+                children: label
               }
             ),
-            /* @__PURE__ */ t(
+            /* @__PURE__ */ jsx(
               "input",
               {
-                ref: y,
-                id: a,
-                type: d ? "text" : "password",
-                className: u(
+                ref,
+                id,
+                type: isPasswordVisible ? "text" : "password",
+                className: cn(
                   "input",
                   "password-input",
-                  e && "input--error",
-                  l && "input--full-width",
-                  h
+                  error && "input--error",
+                  fullWidth && "input--full-width",
+                  className
                 ),
-                "aria-invalid": e ? "true" : "false",
-                "aria-describedby": e ? p : o ? c : void 0,
-                "data-cy": r,
-                "data-testid": s,
-                ...k
+                "aria-invalid": error ? "true" : "false",
+                "aria-describedby": error ? errorId : helperText ? helperId : void 0,
+                "data-cy": finalDataCy,
+                "data-testid": finalTestId,
+                ...props
               }
             ),
-            e && /* @__PURE__ */ t(
+            error && /* @__PURE__ */ jsx(
               "span",
               {
-                id: p,
+                id: errorId,
                 className: "input__error",
                 role: "alert",
-                "data-cy": `${r}-error`,
-                "data-testid": `${s}-error`,
-                children: e
+                "data-cy": `${finalDataCy}-error`,
+                "data-testid": `${finalTestId}-error`,
+                children: error
               }
             ),
-            o && !e && /* @__PURE__ */ t(
+            helperText && !error && /* @__PURE__ */ jsx(
               "span",
               {
-                id: c,
+                id: helperId,
                 className: "input__helper",
-                "data-cy": `${r}-helper`,
-                "data-testid": `${s}-helper`,
-                children: o
+                "data-cy": `${finalDataCy}-helper`,
+                "data-testid": `${finalTestId}-helper`,
+                children: helperText
               }
             )
           ]
         }
       ),
-      w && /* @__PURE__ */ t(
+      showToggle && /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           className: "password-input__toggle",
-          onClick: v,
-          "aria-label": d ? "Hide password" : "Show password",
-          "data-cy": `${r}-toggle`,
-          "data-testid": `${s}-toggle`,
-          children: d ? /* @__PURE__ */ i(
+          onClick: togglePasswordVisibility,
+          "aria-label": isPasswordVisible ? "Hide password" : "Show password",
+          "data-cy": `${finalDataCy}-toggle`,
+          "data-testid": `${finalTestId}-toggle`,
+          children: isPasswordVisible ? /* @__PURE__ */ jsxs(
             "svg",
             {
               width: "20",
@@ -99,7 +106,7 @@ const _ = x(
               xmlns: "http://www.w3.org/2000/svg",
               "aria-hidden": "true",
               children: [
-                /* @__PURE__ */ t(
+                /* @__PURE__ */ jsx(
                   "path",
                   {
                     d: "M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",
@@ -110,7 +117,7 @@ const _ = x(
                     fill: "none"
                   }
                 ),
-                /* @__PURE__ */ t(
+                /* @__PURE__ */ jsx(
                   "circle",
                   {
                     cx: "10",
@@ -123,7 +130,7 @@ const _ = x(
                 )
               ]
             }
-          ) : /* @__PURE__ */ i(
+          ) : /* @__PURE__ */ jsxs(
             "svg",
             {
               width: "20",
@@ -133,7 +140,7 @@ const _ = x(
               xmlns: "http://www.w3.org/2000/svg",
               "aria-hidden": "true",
               children: [
-                /* @__PURE__ */ t(
+                /* @__PURE__ */ jsx(
                   "path",
                   {
                     d: "M10 4C5.5 4 2 10 2 10s3.5 6 8 6 8-6 8-6-3.5-6-8-6z",
@@ -144,7 +151,7 @@ const _ = x(
                     fill: "none"
                   }
                 ),
-                /* @__PURE__ */ t(
+                /* @__PURE__ */ jsx(
                   "circle",
                   {
                     cx: "10",
@@ -155,7 +162,7 @@ const _ = x(
                     fill: "none"
                   }
                 ),
-                /* @__PURE__ */ t(
+                /* @__PURE__ */ jsx(
                   "path",
                   {
                     d: "M3 3l14 14",
@@ -172,7 +179,7 @@ const _ = x(
     ] });
   }
 );
-_.displayName = "PasswordInput";
+PasswordInput.displayName = "PasswordInput";
 export {
-  _ as PasswordInput
+  PasswordInput
 };

package/dist/index5.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),p=require("react"),T=require("./index17.cjs");;/* empty css          */const h=p.forwardRef(({allowDecimal:b=!1,allowNegative:N=!1,min:n,max:m,decimalPlaces:q=2,invalidNumberMessage:B="Please enter a valid number",minValueMessage:R,maxValueMessage:A,onValidationChange:s,error:P,onChange:v,onKeyDown:t,label:I,helperText:$,fullWidth:j=!1,className:F,id:M,"data-cy":g,"data-testid":H,...d},L)=>{const[O,x]=p.useState(),[V,z]=p.useState(!1),G=p.useId(),f=M||G,E=`${f}-error`,S=`${f}-helper`,i=g||"numeric-input",l=H||"numeric-input",k=r=>{if(!r)return{isValid:!0};const a=N?"-?":"",e=b?`(\\.\\d{0,${q}})?`:"";if(!new RegExp(`^${a}\\d+${e}$`).test(r))return{isValid:!1,error:B};const _=parseFloat(r);return n!==void 0&&_<n?{isValid:!1,error:R||`Value must be at least ${n}`}:m!==void 0&&_>m?{isValid:!1,error:A||`Value must be at most ${m}`}:{isValid:!0}},J=r=>{const a=["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","Home","End"];if(r.ctrlKey||r.metaKey){t==null||t(r);return}if(a.includes(r.key)){t==null||t(r);return}if(b&&r.key==="."){if(r.currentTarget.value.includes(".")){r.preventDefault();return}t==null||t(r);return}if(N&&r.key==="-"){const e=r.currentTarget.value;if((r.currentTarget.selectionStart||0)!==0||e.includes("-")){r.preventDefault();return}t==null||t(r);return}if(r.key>="0"&&r.key<="9"){t==null||t(r);return}r.preventDefault()},Q=r=>{const a=r.target.value;if(V){const e=k(a);x(e.error),s==null||s(e.isValid)}v==null||v(r)},U=r=>{var e;z(!0);const a=k(r.target.value);x(a.error),s==null||s(a.isValid),(e=d.onBlur)==null||e.call(d,r)},u=P||O;return c.jsxs("div",{className:T.cn("input-wrapper",j&&"input-wrapper--full-width"),"data-cy":`${i}-wrapper`,"data-testid":`${l}-wrapper`,children:[I&&c.jsx("label",{htmlFor:f,className:"input__label","data-cy":`${i}-label`,"data-testid":`${l}-label`,children:I}),c.jsx("input",{ref:L,id:f,type:"text",inputMode:"numeric",className:T.cn("input",u&&"input--error",j&&"input--full-width",F),"aria-invalid":u?"true":"false","aria-describedby":u?E:$?S:void 0,"data-cy":i,"data-testid":l,onChange:Q,onBlur:U,onKeyDown:J,...d}),u&&c.jsx("span",{id:E,className:"input__error",role:"alert","data-cy":`${i}-error`,"data-testid":`${l}-error`,children:u}),$&&!u&&c.jsx("span",{id:S,className:"input__helper","data-cy":`${i}-helper`,"data-testid":`${l}-helper`,children:$})]})});h.displayName="NumericInput";exports.NumericInput=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),a=require("./index17.cjs");;/* empty css          */const t=r.forwardRef(({allowDecimal:t=!1,allowNegative:l=!1,min:i,max:n,decimalPlaces:s=2,invalidNumberMessage:u="Please enter a valid number",minValueMessage:d,maxValueMessage:o,onValidationChange:c,error:p,onChange:m,onKeyDown:v,label:y,helperText:f,fullWidth:h=!1,className:g,id:$,"data-cy":x,"data-testid":b,...w},V)=>{const[N,j]=r.useState(),[D,k]=r.useState(!1),T=r.useId(),_=$||T,M=`${_}-error`,S=`${_}-helper`,q=x||"numeric-input",E=b||"numeric-input",K=e=>{if(!e)return{isValid:!0};if(!new RegExp(`^${l?"-?":""}\\d+${t?`(\\.\\d{0,${s}})?`:""}$`).test(e))return{isValid:!1,error:u};const r=parseFloat(e);return void 0!==i&&r<i?{isValid:!1,error:d||`Value must be at least ${i}`}:void 0!==n&&r>n?{isValid:!1,error:o||`Value must be at most ${n}`}:{isValid:!0}},B=p||N;return e.jsxs("div",{className:a.cn("input-wrapper",h&&"input-wrapper--full-width"),"data-cy":`${q}-wrapper`,"data-testid":`${E}-wrapper`,children:[y&&e.jsx("label",{htmlFor:_,className:"input__label","data-cy":`${q}-label`,"data-testid":`${E}-label`,children:y}),e.jsx("input",{ref:V,id:_,type:"text",inputMode:"numeric",className:a.cn("input",B&&"input--error",h&&"input--full-width",g),"aria-invalid":B?"true":"false","aria-describedby":B?M:f?S:void 0,"data-cy":q,"data-testid":E,onChange:e=>{const r=e.target.value;if(D){const e=K(r);j(e.error),null==c||c(e.isValid)}null==m||m(e)},onBlur:e=>{var r;k(!0);const a=K(e.target.value);j(a.error),null==c||c(a.isValid),null==(r=w.onBlur)||r.call(w,e)},onKeyDown:e=>{if(e.ctrlKey||e.metaKey)null==v||v(e);else if(["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","Home","End"].includes(e.key))null==v||v(e);else{if(t&&"."===e.key){return e.currentTarget.value.includes(".")?void e.preventDefault():void(null==v||v(e))}if(l&&"-"===e.key){const r=e.currentTarget.value;return 0!==(e.currentTarget.selectionStart||0)||r.includes("-")?void e.preventDefault():void(null==v||v(e))}e.key>="0"&&e.key<="9"?null==v||v(e):e.preventDefault()}},...w}),B&&e.jsx("span",{id:M,className:"input__error",role:"alert","data-cy":`${q}-error`,"data-testid":`${E}-error`,children:B}),f&&!B&&e.jsx("span",{id:S,className:"input__helper","data-cy":`${q}-helper`,"data-testid":`${E}-helper`,children:f})]})});t.displayName="NumericInput",exports.NumericInput=t;

package/dist/index5.js

@@ -1,45 +1,63 @@
-import { jsxs as Y, jsx as f } from "react/jsx-runtime";
-import { forwardRef as Z, useState as S, useId as g } from "react";
-import { cn as T } from "./index17.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useId } from "react";
+import { cn } from "./index17.js";
 /* empty css        */
-const W = Z(
+const NumericInput = forwardRef(
   ({
-    allowDecimal: $ = !1,
-    allowNegative: b = !1,
-    min: p,
-    max: m,
-    decimalPlaces: x = 2,
-    invalidNumberMessage: A = "Please enter a valid number",
-    minValueMessage: R,
-    maxValueMessage: j,
-    onValidationChange: s,
-    error: F,
-    onChange: v,
-    onKeyDown: t,
-    label: N,
-    helperText: n,
-    fullWidth: I = !1,
-    className: P,
-    id: H,
-    "data-cy": L,
-    "data-testid": M,
-    ...c
-  }, V) => {
-    const [q, E] = S(), [z, G] = S(!1), J = g(), d = H || J, k = `${d}-error`, _ = `${d}-helper`, l = L || "numeric-input", u = M || "numeric-input", h = (r) => {
-      if (!r) return { isValid: !0 };
-      const a = b ? "-?" : "", e = $ ? `(\\.\\d{0,${x}})?` : "";
-      if (!new RegExp(`^${a}\\d+${e}$`).test(r))
-        return { isValid: !1, error: A };
-      const B = parseFloat(r);
-      return p !== void 0 && B < p ? {
-        isValid: !1,
-        error: R || `Value must be at least ${p}`
-      } : m !== void 0 && B > m ? {
-        isValid: !1,
-        error: j || `Value must be at most ${m}`
-      } : { isValid: !0 };
-    }, O = (r) => {
-      const a = [
+    allowDecimal = false,
+    allowNegative = false,
+    min,
+    max,
+    decimalPlaces = 2,
+    invalidNumberMessage = "Please enter a valid number",
+    minValueMessage,
+    maxValueMessage,
+    onValidationChange,
+    error: externalError,
+    onChange,
+    onKeyDown,
+    label,
+    helperText,
+    fullWidth = false,
+    className,
+    id: providedId,
+    "data-cy": dataCy,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    const [internalError, setInternalError] = useState();
+    const [touched, setTouched] = useState(false);
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const errorId = `${id}-error`;
+    const helperId = `${id}-helper`;
+    const finalDataCy = dataCy || "numeric-input";
+    const finalTestId = dataTestId || "numeric-input";
+    const validateNumber = (value) => {
+      if (!value) return { isValid: true };
+      const isNegativeAllowed = allowNegative ? "-?" : "";
+      const decimalPattern = allowDecimal ? `(\\.\\d{0,${decimalPlaces}})?` : "";
+      const regex = new RegExp(`^${isNegativeAllowed}\\d+${decimalPattern}$`);
+      if (!regex.test(value)) {
+        return { isValid: false, error: invalidNumberMessage };
+      }
+      const numValue = parseFloat(value);
+      if (min !== void 0 && numValue < min) {
+        return {
+          isValid: false,
+          error: minValueMessage || `Value must be at least ${min}`
+        };
+      }
+      if (max !== void 0 && numValue > max) {
+        return {
+          isValid: false,
+          error: maxValueMessage || `Value must be at most ${max}`
+        };
+      }
+      return { isValid: true };
+    };
+    const handleKeyDown = (e) => {
+      const allowedKeys = [
         "Backspace",
         "Delete",
         "Tab",
@@ -50,108 +68,116 @@ const W = Z(
         "Home",
         "End"
       ];
-      if (r.ctrlKey || r.metaKey) {
-        t == null || t(r);
+      if (e.ctrlKey || e.metaKey) {
+        onKeyDown == null ? void 0 : onKeyDown(e);
         return;
       }
-      if (a.includes(r.key)) {
-        t == null || t(r);
+      if (allowedKeys.includes(e.key)) {
+        onKeyDown == null ? void 0 : onKeyDown(e);
         return;
       }
-      if ($ && r.key === ".") {
-        if (r.currentTarget.value.includes(".")) {
-          r.preventDefault();
+      if (allowDecimal && e.key === ".") {
+        const value = e.currentTarget.value;
+        if (value.includes(".")) {
+          e.preventDefault();
           return;
         }
-        t == null || t(r);
+        onKeyDown == null ? void 0 : onKeyDown(e);
         return;
       }
-      if (b && r.key === "-") {
-        const e = r.currentTarget.value;
-        if ((r.currentTarget.selectionStart || 0) !== 0 || e.includes("-")) {
-          r.preventDefault();
+      if (allowNegative && e.key === "-") {
+        const value = e.currentTarget.value;
+        const selectionStart = e.currentTarget.selectionStart || 0;
+        if (selectionStart !== 0 || value.includes("-")) {
+          e.preventDefault();
           return;
         }
-        t == null || t(r);
+        onKeyDown == null ? void 0 : onKeyDown(e);
         return;
       }
-      if (r.key >= "0" && r.key <= "9") {
-        t == null || t(r);
+      if (e.key >= "0" && e.key <= "9") {
+        onKeyDown == null ? void 0 : onKeyDown(e);
         return;
       }
-      r.preventDefault();
-    }, Q = (r) => {
-      const a = r.target.value;
-      if (z) {
-        const e = h(a);
-        E(e.error), s == null || s(e.isValid);
+      e.preventDefault();
+    };
+    const handleChange = (e) => {
+      const value = e.target.value;
+      if (touched) {
+        const validation = validateNumber(value);
+        setInternalError(validation.error);
+        onValidationChange == null ? void 0 : onValidationChange(validation.isValid);
       }
-      v == null || v(r);
-    }, U = (r) => {
-      var e;
-      G(!0);
-      const a = h(r.target.value);
-      E(a.error), s == null || s(a.isValid), (e = c.onBlur) == null || e.call(c, r);
-    }, i = F || q;
-    return /* @__PURE__ */ Y(
+      onChange == null ? void 0 : onChange(e);
+    };
+    const handleBlur = (e) => {
+      var _a;
+      setTouched(true);
+      const validation = validateNumber(e.target.value);
+      setInternalError(validation.error);
+      onValidationChange == null ? void 0 : onValidationChange(validation.isValid);
+      (_a = props.onBlur) == null ? void 0 : _a.call(props, e);
+    };
+    const displayError = externalError || internalError;
+    return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: T("input-wrapper", I && "input-wrapper--full-width"),
-        "data-cy": `${l}-wrapper`,
-        "data-testid": `${u}-wrapper`,
+        className: cn("input-wrapper", fullWidth && "input-wrapper--full-width"),
+        "data-cy": `${finalDataCy}-wrapper`,
+        "data-testid": `${finalTestId}-wrapper`,
         children: [
-          N && /* @__PURE__ */ f(
+          label && /* @__PURE__ */ jsx(
             "label",
             {
-              htmlFor: d,
+              htmlFor: id,
               className: "input__label",
-              "data-cy": `${l}-label`,
-              "data-testid": `${u}-label`,
-              children: N
+              "data-cy": `${finalDataCy}-label`,
+              "data-testid": `${finalTestId}-label`,
+              children: label
             }
           ),
-          /* @__PURE__ */ f(
+          /* @__PURE__ */ jsx(
             "input",
             {
-              ref: V,
-              id: d,
+              ref,
+              id,
               type: "text",
               inputMode: "numeric",
-              className: T(
+              className: cn(
                 "input",
-                i && "input--error",
-                I && "input--full-width",
-                P
+                displayError && "input--error",
+                fullWidth && "input--full-width",
+                className
               ),
-              "aria-invalid": i ? "true" : "false",
-              "aria-describedby": i ? k : n ? _ : void 0,
-              "data-cy": l,
-              "data-testid": u,
-              onChange: Q,
-              onBlur: U,
-              onKeyDown: O,
-              ...c
+              "aria-invalid": displayError ? "true" : "false",
+              "aria-describedby": displayError ? errorId : helperText ? helperId : void 0,
+              "data-cy": finalDataCy,
+              "data-testid": finalTestId,
+              onChange: handleChange,
+              onBlur: handleBlur,
+              onKeyDown: handleKeyDown,
+              ...props
             }
           ),
-          i && /* @__PURE__ */ f(
+          displayError && /* @__PURE__ */ jsx(
             "span",
             {
-              id: k,
+              id: errorId,
               className: "input__error",
               role: "alert",
-              "data-cy": `${l}-error`,
-              "data-testid": `${u}-error`,
-              children: i
+              "data-cy": `${finalDataCy}-error`,
+              "data-testid": `${finalTestId}-error`,
+              children: displayError
             }
           ),
-          n && !i && /* @__PURE__ */ f(
+          helperText && !displayError && /* @__PURE__ */ jsx(
             "span",
             {
-              id: _,
+              id: helperId,
               className: "input__helper",
-              "data-cy": `${l}-helper`,
-              "data-testid": `${u}-helper`,
-              children: n
+              "data-cy": `${finalDataCy}-helper`,
+              "data-testid": `${finalTestId}-helper`,
+              children: helperText
             }
           )
         ]
@@ -159,7 +185,7 @@ const W = Z(
     );
   }
 );
-W.displayName = "NumericInput";
+NumericInput.displayName = "NumericInput";
 export {
-  W as NumericInput
+  NumericInput
 };

package/dist/index6.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),h=require("react"),R=require("./index17.cjs");;/* empty css          */const M=h.forwardRef(({allowHyphen:c=!1,allowUnderscore:f=!1,allowSpace:p=!1,minLength:v,maxLength:m,invalidFormatMessage:O="Only letters and numbers are allowed",minLengthMessage:z,maxLengthMessage:F,onValidationChange:s,error:T,onChange:I,onKeyDown:t,label:_,helperText:j,fullWidth:A=!1,className:Z,id:P,"data-cy":S,"data-testid":G,...$},J)=>{const[Q,E]=h.useState(),[X,Y]=h.useState(!1),W=h.useId(),b=P||W,x=`${b}-error`,N=`${b}-helper`,u=S||"alphanumeric-input",d=G||"alphanumeric-input",q=r=>{if(!r)return{isValid:!0};let e="^[a-zA-Z0-9";if(c&&(e+="\\-"),f&&(e+="_"),p&&(e+=" "),e+="]+$",!new RegExp(e).test(r)){let B=O;if(c||f||p){const k=["letters","numbers"];c&&k.push("hyphens"),f&&k.push("underscores"),p&&k.push("spaces"),B=`Only ${k.join(", ")} are allowed`}return{isValid:!1,error:B}}return v!==void 0&&r.length<v?{isValid:!1,error:z||`Must be at least ${v} characters`}:m!==void 0&&r.length>m?{isValid:!1,error:F||`Must be at most ${m} characters`}:{isValid:!0}},H=r=>{const e=["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","Home","End"];if(r.ctrlKey||r.metaKey){t==null||t(r);return}if(e.includes(r.key)){t==null||t(r);return}if(p&&r.key===" "){t==null||t(r);return}if(c&&r.key==="-"){t==null||t(r);return}if(f&&r.key==="_"){t==null||t(r);return}if(r.key>="a"&&r.key<="z"||r.key>="A"&&r.key<="Z"){t==null||t(r);return}if(r.key>="0"&&r.key<="9"){t==null||t(r);return}r.preventDefault()},V=r=>{const e=r.target.value;if(X){const i=q(e);E(i.error),s==null||s(i.isValid)}I==null||I(r)},U=r=>{var i;Y(!0);const e=q(r.target.value);E(e.error),s==null||s(e.isValid),(i=$.onBlur)==null||i.call($,r)},a=T||Q;return l.jsxs("div",{className:R.cn("input-wrapper",A&&"input-wrapper--full-width"),"data-cy":`${u}-wrapper`,"data-testid":`${d}-wrapper`,children:[_&&l.jsx("label",{htmlFor:b,className:"input__label","data-cy":`${u}-label`,"data-testid":`${d}-label`,children:_}),l.jsx("input",{ref:J,id:b,type:"text",className:R.cn("input",a&&"input--error",A&&"input--full-width",Z),"aria-invalid":a?"true":"false","aria-describedby":a?x:j?N:void 0,"data-cy":u,"data-testid":d,onChange:V,onBlur:U,onKeyDown:H,maxLength:m,...$}),a&&l.jsx("span",{id:x,className:"input__error",role:"alert","data-cy":`${u}-error`,"data-testid":`${d}-error`,children:a}),j&&!a&&l.jsx("span",{id:N,className:"input__helper","data-cy":`${u}-helper`,"data-testid":`${d}-helper`,children:j})]})});M.displayName="AlphanumericInput";exports.AlphanumericInput=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),r=require("./index17.cjs");;/* empty css          */const t=a.forwardRef(({allowHyphen:t=!1,allowUnderscore:l=!1,allowSpace:n=!1,minLength:s,maxLength:i,invalidFormatMessage:d="Only letters and numbers are allowed",minLengthMessage:u,maxLengthMessage:o,onValidationChange:c,error:p,onChange:h,onKeyDown:y,label:m,helperText:g,fullWidth:w=!1,className:x,id:b,"data-cy":f,"data-testid":$,...k},v)=>{const[j,V]=a.useState(),[_,N]=a.useState(!1),A=a.useId(),L=b||A,M=`${L}-error`,S=`${L}-helper`,q=f||"alphanumeric-input",D=$||"alphanumeric-input",E=e=>{if(!e)return{isValid:!0};let a="^[a-zA-Z0-9";t&&(a+="\\-"),l&&(a+="_"),n&&(a+=" "),a+="]+$";if(!new RegExp(a).test(e)){let e=d;if(t||l||n){const a=["letters","numbers"];t&&a.push("hyphens"),l&&a.push("underscores"),n&&a.push("spaces"),e=`Only ${a.join(", ")} are allowed`}return{isValid:!1,error:e}}return void 0!==s&&e.length<s?{isValid:!1,error:u||`Must be at least ${s} characters`}:void 0!==i&&e.length>i?{isValid:!1,error:o||`Must be at most ${i} characters`}:{isValid:!0}},K=p||j;return e.jsxs("div",{className:r.cn("input-wrapper",w&&"input-wrapper--full-width"),"data-cy":`${q}-wrapper`,"data-testid":`${D}-wrapper`,children:[m&&e.jsx("label",{htmlFor:L,className:"input__label","data-cy":`${q}-label`,"data-testid":`${D}-label`,children:m}),e.jsx("input",{ref:v,id:L,type:"text",className:r.cn("input",K&&"input--error",w&&"input--full-width",x),"aria-invalid":K?"true":"false","aria-describedby":K?M:g?S:void 0,"data-cy":q,"data-testid":D,onChange:e=>{const a=e.target.value;if(_){const e=E(a);V(e.error),null==c||c(e.isValid)}null==h||h(e)},onBlur:e=>{var a;N(!0);const r=E(e.target.value);V(r.error),null==c||c(r.isValid),null==(a=k.onBlur)||a.call(k,e)},onKeyDown:e=>{e.ctrlKey||e.metaKey||["Backspace","Delete","Tab","Escape","Enter","ArrowLeft","ArrowRight","Home","End"].includes(e.key)||n&&" "===e.key||t&&"-"===e.key||l&&"_"===e.key||e.key>="a"&&e.key<="z"||e.key>="A"&&e.key<="Z"||e.key>="0"&&e.key<="9"?null==y||y(e):e.preventDefault()},maxLength:i,...k}),K&&e.jsx("span",{id:M,className:"input__error",role:"alert","data-cy":`${q}-error`,"data-testid":`${D}-error`,children:K}),g&&!K&&e.jsx("span",{id:S,className:"input__helper","data-cy":`${q}-helper`,"data-testid":`${D}-helper`,children:g})]})});t.displayName="AlphanumericInput",exports.AlphanumericInput=t;