@adam-milo/ui 1.0.20 → 1.0.22

package/dist/index20.js

@@ -0,0 +1,301 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useRef, useId, useMemo, useEffect } from "react";
+import { cn } from "./index17.js";
+/* empty css        */
+import { useMergedRef } from "./index21.js";
+import { debounce } from "./index33.js";
+const Input = forwardRef(
+  ({
+    type = "text",
+    label,
+    error: externalError,
+    helperText,
+    fullWidth = false,
+    showPasswordToggle = true,
+    showLastChar = true,
+    lastCharDelay = 500,
+    validate,
+    onValidationChange,
+    className,
+    id: providedId,
+    onChange,
+    onBlur,
+    required,
+    value: controlledValue,
+    "data-cy": dataCy,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+    const [internalError, setInternalError] = useState();
+    const [isFocused, setIsFocused] = useState(false);
+    const [isHovered, setIsHovered] = useState(false);
+    const touchedRef = useRef(false);
+    const [displayPassword, setDisplayPassword] = useState("");
+    const actualPasswordRef = useRef("");
+    const timeoutRef = useRef(null);
+    const inputRef = useRef(null);
+    const mergedRef = useMergedRef(ref, inputRef);
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const errorId = `${id}-error`;
+    const helperId = `${id}-helper`;
+    const finalDataCy = dataCy || "input";
+    const finalTestId = dataTestId || "input";
+    const isPasswordType = type === "password";
+    const showToggle = isPasswordType && showPasswordToggle;
+    const shouldEnableLastCharPreview = isPasswordType && showLastChar && !isPasswordVisible;
+    const inputType = isPasswordType && (isPasswordVisible || shouldEnableLastCharPreview && actualPasswordRef.current.length > 0) ? "text" : type;
+    const displayLabel = label && required && !label.includes("*") ? `${label} *` : label;
+    const togglePasswordVisibility = () => {
+      setIsPasswordVisible((prev) => !prev);
+      setTimeout(() => {
+        var _a;
+        return (_a = inputRef.current) == null ? void 0 : _a.focus();
+      }, 0);
+    };
+    const debouncedValidate = useMemo(
+      () => debounce((value) => {
+        if (validate && touchedRef.current) {
+          const validationError = validate(value);
+          setInternalError(validationError);
+          onValidationChange == null ? void 0 : onValidationChange(!validationError);
+        }
+      }, 300),
+      [validate, onValidationChange]
+    );
+    const debouncedValidateRef = useRef(debouncedValidate);
+    useEffect(() => {
+      debouncedValidateRef.current = debouncedValidate;
+    }, [debouncedValidate]);
+    useEffect(() => {
+      if (process.env.NODE_ENV === "development") {
+        if (isPasswordType && showLastChar && controlledValue !== void 0) {
+          console.warn(
+            "[Input] Password last character preview (showLastChar) only works in uncontrolled mode. Remove the value prop to use this feature, or set showLastChar={false}."
+          );
+        }
+      }
+    }, [isPasswordType, showLastChar, controlledValue]);
+    useEffect(() => {
+      return () => {
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        debouncedValidateRef.current.cancel();
+      };
+    }, []);
+    const inputValue = shouldEnableLastCharPreview && controlledValue === void 0 ? displayPassword : isPasswordVisible && isPasswordType && controlledValue === void 0 ? actualPasswordRef.current || "" : controlledValue;
+    const handleChange = (e) => {
+      onChange == null ? void 0 : onChange(e);
+      let value = e.target.value;
+      if (shouldEnableLastCharPreview) {
+        const input = e.target;
+        const newValue = input.value;
+        actualPasswordRef.current = newValue;
+        const masked = newValue ? "•".repeat(newValue.length - 1) + newValue.slice(-1) : "";
+        setDisplayPassword(masked);
+        input.value = masked;
+        value = newValue;
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+          setDisplayPassword("•".repeat(newValue.length));
+        }, lastCharDelay);
+      }
+      if (touchedRef.current) {
+        debouncedValidate(value);
+      }
+    };
+    const handleFocus = (e) => {
+      var _a;
+      setIsFocused(true);
+      (_a = props.onFocus) == null ? void 0 : _a.call(props, e);
+    };
+    const handleBlur = (e) => {
+      setIsFocused(false);
+      touchedRef.current = true;
+      if (validate) {
+        const valueToValidate = shouldEnableLastCharPreview ? actualPasswordRef.current : e.target.value;
+        const validationError = validate(valueToValidate);
+        setInternalError(validationError);
+        onValidationChange == null ? void 0 : onValidationChange(!validationError);
+      }
+      onBlur == null ? void 0 : onBlur(e);
+    };
+    const handleMouseEnter = () => {
+      setIsHovered(true);
+    };
+    const handleMouseLeave = () => {
+      setIsHovered(false);
+    };
+    const displayError = externalError || internalError;
+    const inputState = props.disabled ? "disabled" : displayError ? "error" : isFocused ? "focus" : isHovered ? "hover" : "idle";
+    return /* @__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: displayLabel
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "input__field-container", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: mergedRef,
+                id,
+                type: inputType,
+                value: inputValue,
+                className: cn(
+                  "input",
+                  displayError && "input--error",
+                  fullWidth && "input--full-width",
+                  showToggle && "input--with-toggle",
+                  className
+                ),
+                "aria-invalid": displayError ? "true" : "false",
+                "aria-required": required ? "true" : void 0,
+                "aria-describedby": displayError ? errorId : helperText ? helperId : void 0,
+                "data-cy": finalDataCy,
+                "data-testid": finalTestId,
+                "data-state": inputState,
+                onChange: handleChange,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                onMouseEnter: handleMouseEnter,
+                onMouseLeave: handleMouseLeave,
+                required,
+                ...props
+              }
+            ),
+            showToggle && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "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"
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          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
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+export {
+  Input
+};

package/dist/index21.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react");exports.useMergedRef=function(...r){return e.useCallback(e=>{r.forEach(r=>{r&&("function"==typeof r?r(e):r.current=e)})},r)};

package/dist/index21.js

@@ -0,0 +1,16 @@
+import { useCallback } from "react";
+function useMergedRef(...refs) {
+  return useCallback((element) => {
+    refs.forEach((ref) => {
+      if (!ref) return;
+      if (typeof ref === "function") {
+        ref(element);
+      } else {
+        ref.current = element;
+      }
+    });
+  }, refs);
+}
+export {
+  useMergedRef
+};

package/dist/index3.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),n=require("react"),j=require("./index17.cjs");;/* empty css          */const L=/^[^\s@]+@[^\s@]+\.[^\s@]+$/,w=n.forwardRef(({validateEmail:m=!0,invalidEmailMessage:y="Not a valid email address",onValidationChange:r,error:N,onChange:p,label:f,helperText:o,fullWidth:$=!1,className:_,id:x,"data-cy":q,"data-testid":S,...i},B)=>{const[R,I]=n.useState(),[h,F]=n.useState(!1),A=n.useId(),l=x||A,v=`${l}-error`,E=`${l}-helper`,s=q||"email-input",a=S||"email-input",b=t=>t?L.test(t):!0,D=t=>{const u=t.target.value;if(m&&h){const d=b(u);I(d?void 0:y),r==null||r(d)}p==null||p(t)},G=t=>{var u;if(F(!0),m){const d=b(t.target.value);I(d?void 0:y),r==null||r(d)}(u=i.onBlur)==null||u.call(i,t)},e=N||R;return c.jsxs("div",{className:j.cn("input-wrapper",$&&"input-wrapper--full-width"),"data-cy":`${s}-wrapper`,"data-testid":`${a}-wrapper`,children:[f&&c.jsx("label",{htmlFor:l,className:"input__label","data-cy":`${s}-label`,"data-testid":`${a}-label`,children:f}),c.jsx("input",{ref:B,id:l,type:"email",className:j.cn("input",e&&"input--error",$&&"input--full-width",_),"aria-invalid":e?"true":"false","aria-describedby":e?v:o?E:void 0,"data-cy":s,"data-testid":a,onChange:D,onBlur:G,...i}),e&&c.jsx("span",{id:v,className:"input__error",role:"alert","data-cy":`${s}-error`,"data-testid":`${a}-error`,children:e}),o&&!e&&c.jsx("span",{id:E,className:"input__helper","data-cy":`${s}-helper`,"data-testid":`${a}-helper`,children:o})]})});w.displayName="EmailInput";exports.EmailInput=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),t=require("./index19.cjs"),i=require("./index20.cjs"),r=a.forwardRef(({validateEmail:r=!0,invalidEmailMessage:l="Not a valid email address",validate:d,"data-cy":s,"data-testid":u,...n},c)=>{const o=a.useCallback(e=>{if(e)return t.validate(e)?void 0:l},[l]),m=a.useCallback(e=>r?d?o(e)||d(e):o(e):null==d?void 0:d(e),[r,d,o]);return e.jsx(i.Input,{ref:c,type:"email",validate:m,"data-cy":s||"email-input","data-testid":u||"email-input",...n})});r.displayName="EmailInput",exports.EmailInput=r;

package/dist/index3.js

@@ -1,103 +1,45 @@
-import { jsxs as S, jsx as u } from "react/jsx-runtime";
-import { forwardRef as X, useState as E, useId as k } from "react";
-import { cn as N } from "./index17.js";
-/* empty css        */
-const q = /^[^\s@]+@[^\s@]+\.[^\s@]+$/, z = X(
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useCallback } from "react";
+import { validate } from "./index19.js";
+import { Input } from "./index20.js";
+const EmailInput = forwardRef(
   ({
-    validateEmail: m = !0,
-    invalidEmailMessage: n = "Not a valid email address",
-    onValidationChange: r,
-    error: _,
-    onChange: p,
-    label: f,
-    helperText: o,
-    fullWidth: y = !1,
-    className: b,
-    id: B,
-    "data-cy": h,
-    "data-testid": j,
-    ...l
-  }, F) => {
-    const [R, $] = E(), [x, A] = E(!1), D = k(), i = B || D, I = `${i}-error`, v = `${i}-helper`, a = h || "email-input", s = j || "email-input", w = (t) => t ? q.test(t) : !0, G = (t) => {
-      const c = t.target.value;
-      if (m && x) {
-        const d = w(c);
-        $(d ? void 0 : n), r == null || r(d);
-      }
-      p == null || p(t);
-    }, L = (t) => {
-      var c;
-      if (A(!0), m) {
-        const d = w(t.target.value);
-        $(d ? void 0 : n), r == null || r(d);
-      }
-      (c = l.onBlur) == null || c.call(l, t);
-    }, e = _ || R;
-    return /* @__PURE__ */ S(
-      "div",
+    validateEmail = true,
+    invalidEmailMessage = "Not a valid email address",
+    validate: validate$1,
+    "data-cy": dataCy,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    const emailValidation = useCallback(
+      (value) => {
+        if (!value) return void 0;
+        return validate(value) ? void 0 : invalidEmailMessage;
+      },
+      [invalidEmailMessage]
+    );
+    const combinedValidation = useCallback(
+      (value) => {
+        if (!validateEmail) return validate$1 == null ? void 0 : validate$1(value);
+        if (!validate$1) return emailValidation(value);
+        return emailValidation(value) || validate$1(value);
+      },
+      [validateEmail, validate$1, emailValidation]
+    );
+    return /* @__PURE__ */ jsx(
+      Input,
       {
-        className: N("input-wrapper", y && "input-wrapper--full-width"),
-        "data-cy": `${a}-wrapper`,
-        "data-testid": `${s}-wrapper`,
-        children: [
-          f && /* @__PURE__ */ u(
-            "label",
-            {
-              htmlFor: i,
-              className: "input__label",
-              "data-cy": `${a}-label`,
-              "data-testid": `${s}-label`,
-              children: f
-            }
-          ),
-          /* @__PURE__ */ u(
-            "input",
-            {
-              ref: F,
-              id: i,
-              type: "email",
-              className: N(
-                "input",
-                e && "input--error",
-                y && "input--full-width",
-                b
-              ),
-              "aria-invalid": e ? "true" : "false",
-              "aria-describedby": e ? I : o ? v : void 0,
-              "data-cy": a,
-              "data-testid": s,
-              onChange: G,
-              onBlur: L,
-              ...l
-            }
-          ),
-          e && /* @__PURE__ */ u(
-            "span",
-            {
-              id: I,
-              className: "input__error",
-              role: "alert",
-              "data-cy": `${a}-error`,
-              "data-testid": `${s}-error`,
-              children: e
-            }
-          ),
-          o && !e && /* @__PURE__ */ u(
-            "span",
-            {
-              id: v,
-              className: "input__helper",
-              "data-cy": `${a}-helper`,
-              "data-testid": `${s}-helper`,
-              children: o
-            }
-          )
-        ]
+        ref,
+        type: "email",
+        validate: combinedValidation,
+        "data-cy": dataCy || "email-input",
+        "data-testid": dataTestId || "email-input",
+        ...props
       }
     );
   }
 );
-z.displayName = "EmailInput";
+EmailInput.displayName = "EmailInput";
 export {
-  z as EmailInput
+  EmailInput
 };

package/dist/index30.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});process.env.NODE_ENV;exports.devWarn=e=>{};

package/dist/index30.js

@@ -0,0 +1,9 @@
+const isDev = process.env.NODE_ENV !== "production";
+const devWarn = (message) => {
+  if (isDev) {
+    console.warn(message);
+  }
+};
+export {
+  devWarn
+};

package/dist/index33.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.debounce=function(e,t){let l=null;const n=function(...n){l&&clearTimeout(l);const o=this;l=setTimeout(()=>{e.apply(o,n),l=null},t)};return n.cancel=()=>{l&&(clearTimeout(l),l=null)},n};

package/dist/index33.js

@@ -0,0 +1,21 @@
+function debounce(func, wait) {
+  let timeoutId = null;
+  const debounced = function(...args) {
+    if (timeoutId) clearTimeout(timeoutId);
+    const context = this;
+    timeoutId = setTimeout(() => {
+      func.apply(context, args);
+      timeoutId = null;
+    }, wait);
+  };
+  debounced.cancel = () => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+  };
+  return debounced;
+}
+export {
+  debounce
+};

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"),t=require("react"),s=require("./index20.cjs"),r=t.forwardRef(({showToggle:t=!0,"data-cy":r,"data-testid":a,...o},d)=>e.jsx(s.Input,{ref:d,type:"password",showPasswordToggle:t,"data-cy":r||"password-input","data-testid":a||"password-input",...o}));r.displayName="PasswordInput",exports.PasswordInput=r;