@adam-milo/ui 1.0.21 → 1.0.23

package/dist/index4.js

@@ -1,182 +1,19 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useId } from "react";
-import { cn } from "./index17.js";
-/* empty css        */
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Input } from "./index20.js";
 const PasswordInput = forwardRef(
-  ({
-    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__ */ jsxs("div", { className: "password-input-wrapper", children: [
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn("input-wrapper", fullWidth && "input-wrapper--full-width"),
-          "data-cy": `${finalDataCy}-wrapper`,
-          "data-testid": `${finalTestId}-wrapper`,
-          children: [
-            label && /* @__PURE__ */ jsx(
-              "label",
-              {
-                htmlFor: id,
-                className: "input__label",
-                "data-cy": `${finalDataCy}-label`,
-                "data-testid": `${finalTestId}-label`,
-                children: label
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                ref,
-                id,
-                type: isPasswordVisible ? "text" : "password",
-                className: cn(
-                  "input",
-                  "password-input",
-                  error && "input--error",
-                  fullWidth && "input--full-width",
-                  className
-                ),
-                "aria-invalid": error ? "true" : "false",
-                "aria-describedby": error ? errorId : helperText ? helperId : void 0,
-                "data-cy": finalDataCy,
-                "data-testid": finalTestId,
-                ...props
-              }
-            ),
-            error && /* @__PURE__ */ jsx(
-              "span",
-              {
-                id: errorId,
-                className: "input__error",
-                role: "alert",
-                "data-cy": `${finalDataCy}-error`,
-                "data-testid": `${finalTestId}-error`,
-                children: error
-              }
-            ),
-            helperText && !error && /* @__PURE__ */ jsx(
-              "span",
-              {
-                id: helperId,
-                className: "input__helper",
-                "data-cy": `${finalDataCy}-helper`,
-                "data-testid": `${finalTestId}-helper`,
-                children: helperText
-              }
-            )
-          ]
-        }
-      ),
-      showToggle && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "password-input__toggle",
-          onClick: togglePasswordVisibility,
-          "aria-label": isPasswordVisible ? "Hide password" : "Show password",
-          "data-cy": `${finalDataCy}-toggle`,
-          "data-testid": `${finalTestId}-toggle`,
-          children: isPasswordVisible ? /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              width: "20",
-              height: "20",
-              viewBox: "0 0 20 20",
-              fill: "none",
-              xmlns: "http://www.w3.org/2000/svg",
-              "aria-hidden": "true",
-              children: [
-                /* @__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",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    fill: "none"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: "10",
-                    cy: "10",
-                    r: "2.5",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    fill: "none"
-                  }
-                )
-              ]
-            }
-          ) : /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              width: "20",
-              height: "20",
-              viewBox: "0 0 20 20",
-              fill: "none",
-              xmlns: "http://www.w3.org/2000/svg",
-              "aria-hidden": "true",
-              children: [
-                /* @__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",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    fill: "none"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "circle",
-                  {
-                    cx: "10",
-                    cy: "10",
-                    r: "2.5",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    fill: "none"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "path",
-                  {
-                    d: "M3 3l14 14",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round"
-                  }
-                )
-              ]
-            }
-          )
-        }
-      )
-    ] });
+  ({ showToggle = true, "data-cy": dataCy, "data-testid": dataTestId, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "password",
+        showPasswordToggle: showToggle,
+        "data-cy": dataCy || "password-input",
+        "data-testid": dataTestId || "password-input",
+        ...props
+      }
+    );
   }
 );
 PasswordInput.displayName = "PasswordInput";

package/dist/index5.cjs

@@ -1 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("./index20.cjs"),r=t.forwardRef(({min:r,max:i,step:s=1,allowDecimals:u=!1,validate:n,"data-cy":l,"data-testid":c,...d},o)=>{const m=t.useCallback(e=>{if(!e)return;const t=parseFloat(e);return isNaN(t)?"Please enter a valid number":u||Number.isInteger(t)?void 0!==r&&t<r?`Must be at least ${r}`:void 0!==i&&t>i?`Must be at most ${i}`:void 0:"Decimals are not allowed"},[r,i,u]),p=t.useCallback(e=>n?m(e)||n(e):m(e),[m,n]);return e.jsx(a.Input,{ref:o,type:"number",min:r,max:i,validate:p,"data-cy":l||"numeric-input","data-testid":c||"numeric-input",...d,step:u?"any":s})});r.displayName="NumericInput",exports.NumericInput=r;

package/dist/index5.js

@@ -1,186 +1,56 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useId } from "react";
-import { cn } from "./index17.js";
-/* empty css        */
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import { Input } from "./index20.js";
 const NumericInput = forwardRef(
   ({
-    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,
+    step = 1,
+    allowDecimals = false,
+    validate,
     "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",
-        "Escape",
-        "Enter",
-        "ArrowLeft",
-        "ArrowRight",
-        "Home",
-        "End"
-      ];
-      if (e.ctrlKey || e.metaKey) {
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        return;
-      }
-      if (allowedKeys.includes(e.key)) {
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        return;
-      }
-      if (allowDecimal && e.key === ".") {
-        const value = e.currentTarget.value;
-        if (value.includes(".")) {
-          e.preventDefault();
-          return;
+    const numericValidation = useCallback(
+      (value) => {
+        if (!value) return void 0;
+        const numValue = parseFloat(value);
+        if (isNaN(numValue)) {
+          return "Please enter a valid number";
         }
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        return;
-      }
-      if (allowNegative && e.key === "-") {
-        const value = e.currentTarget.value;
-        const selectionStart = e.currentTarget.selectionStart || 0;
-        if (selectionStart !== 0 || value.includes("-")) {
-          e.preventDefault();
-          return;
+        if (!allowDecimals && !Number.isInteger(numValue)) {
+          return "Decimals are not allowed";
         }
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        return;
-      }
-      if (e.key >= "0" && e.key <= "9") {
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        return;
-      }
-      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);
-      }
-      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",
+        if (min !== void 0 && numValue < min) {
+          return `Must be at least ${min}`;
+        }
+        if (max !== void 0 && numValue > max) {
+          return `Must be at most ${max}`;
+        }
+        return void 0;
+      },
+      [min, max, allowDecimals]
+    );
+    const combinedValidation = useCallback(
+      (value) => {
+        if (!validate) return numericValidation(value);
+        return numericValidation(value) || validate(value);
+      },
+      [numericValidation, validate]
+    );
+    return /* @__PURE__ */ jsx(
+      Input,
       {
-        className: cn("input-wrapper", fullWidth && "input-wrapper--full-width"),
-        "data-cy": `${finalDataCy}-wrapper`,
-        "data-testid": `${finalTestId}-wrapper`,
-        children: [
-          label && /* @__PURE__ */ jsx(
-            "label",
-            {
-              htmlFor: id,
-              className: "input__label",
-              "data-cy": `${finalDataCy}-label`,
-              "data-testid": `${finalTestId}-label`,
-              children: label
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref,
-              id,
-              type: "text",
-              inputMode: "numeric",
-              className: cn(
-                "input",
-                displayError && "input--error",
-                fullWidth && "input--full-width",
-                className
-              ),
-              "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
-            }
-          ),
-          displayError && /* @__PURE__ */ jsx(
-            "span",
-            {
-              id: errorId,
-              className: "input__error",
-              role: "alert",
-              "data-cy": `${finalDataCy}-error`,
-              "data-testid": `${finalTestId}-error`,
-              children: displayError
-            }
-          ),
-          helperText && !displayError && /* @__PURE__ */ jsx(
-            "span",
-            {
-              id: helperId,
-              className: "input__helper",
-              "data-cy": `${finalDataCy}-helper`,
-              "data-testid": `${finalTestId}-helper`,
-              children: helperText
-            }
-          )
-        ]
+        ref,
+        type: "number",
+        min,
+        max,
+        validate: combinedValidation,
+        "data-cy": dataCy || "numeric-input",
+        "data-testid": dataTestId || "numeric-input",
+        ...props,
+        step: allowDecimals ? "any" : step
       }
     );
   }

package/dist/index6.cjs

@@ -1 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),a=require("./index20.cjs"),n=require("./index21.cjs"),l=t.forwardRef(({allowHyphen:l=!1,allowUnderscore:r=!1,allowSpace:s=!1,minLength:u,maxLength:i,validate:c,onChange:o,"data-cy":p,"data-testid":d,...h},g)=>{const m=t.useRef(null),f=n.useMergedRef(g,m),v=t.useMemo(()=>{let e="^[a-zA-Z0-9";return l&&(e+="\\-"),r&&(e+="_"),s&&(e+=" "),e+="]*$",new RegExp(e)},[l,r,s]),x=t.useMemo(()=>{let e="[a-zA-Z0-9";return l&&(e+="\\-"),r&&(e+="_"),s&&(e+=" "),e+="]",new RegExp(e)},[l,r,s]),y=t.useCallback(e=>{if(e){if(!v.test(e)){let e="letters and numbers";const t=[];return l&&t.push("hyphens"),r&&t.push("underscores"),s&&t.push("spaces"),t.length>0&&(e+=`, ${t.join(", ")}`),`Only ${e} are allowed`}return void 0!==u&&e.length<u?`Must be at least ${u} characters`:void 0!==i&&e.length>i?`Must be at most ${i} characters`:void 0}},[v,u,i,l,r,s]),b=t.useCallback(e=>c?y(e)||c(e):y(e),[y,c]),[j,w]=t.useState(null);t.useEffect(()=>{null!==j&&m.current&&(m.current.setSelectionRange(j,j),w(null))},[h.value,j]);const R=t.useCallback(e=>{const t=e.target,a=t.value,n=t.selectionStart||0,l=a.split("").filter(e=>x.test(e)).join(""),r=n-a.slice(0,n).split("").filter(e=>!x.test(e)).length;t.value=l;void 0!==h.value?w(r):t.setSelectionRange(r,r),null==o||o(e)},[x,o,h.value]);return e.jsx(a.Input,{ref:f,type:"text",minLength:u,maxLength:i,validate:b,onChange:R,"data-cy":p||"alphanumeric-input","data-testid":d||"alphanumeric-input",...h})});l.displayName="AlphanumericInput",exports.AlphanumericInput=l;