@adam-milo/ui 1.0.19 → 1.0.21

package/dist/index6.js

@@ -1,50 +1,73 @@
-import { jsxs as U, jsx as b } from "react/jsx-runtime";
-import { forwardRef as L, useState as x, useId as g } from "react";
-import { cn as z } from "./index17.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useState, useId } from "react";
+import { cn } from "./index17.js";
 /* empty css        */
-const y = L(
+const AlphanumericInput = forwardRef(
   ({
-    allowHyphen: u = !1,
-    allowUnderscore: c = !1,
-    allowSpace: f = !1,
-    minLength: h,
-    maxLength: p,
-    invalidFormatMessage: F = "Only letters and numbers are allowed",
-    minLengthMessage: M,
-    maxLengthMessage: O,
-    onValidationChange: a,
-    error: Z,
-    onChange: v,
-    onKeyDown: t,
-    label: _,
-    helperText: I,
-    fullWidth: E = !1,
-    className: T,
-    id: q,
-    "data-cy": G,
-    "data-testid": J,
-    ...m
-  }, P) => {
-    const [Q, A] = x(), [X, Y] = x(!1), W = g(), $ = q || W, N = `${$}-error`, B = `${$}-helper`, d = G || "alphanumeric-input", l = J || "alphanumeric-input", j = (r) => {
-      if (!r) return { isValid: !0 };
-      let s = "^[a-zA-Z0-9";
-      if (u && (s += "\\-"), c && (s += "_"), f && (s += " "), s += "]+$", !new RegExp(s).test(r)) {
-        let R = F;
-        if (u || c || f) {
-          const k = ["letters", "numbers"];
-          u && k.push("hyphens"), c && k.push("underscores"), f && k.push("spaces"), R = `Only ${k.join(", ")} are allowed`;
+    allowHyphen = false,
+    allowUnderscore = false,
+    allowSpace = false,
+    minLength,
+    maxLength,
+    invalidFormatMessage = "Only letters and numbers are allowed",
+    minLengthMessage,
+    maxLengthMessage,
+    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 || "alphanumeric-input";
+    const finalTestId = dataTestId || "alphanumeric-input";
+    const validateFormat = (value) => {
+      if (!value) return { isValid: true };
+      let pattern = "^[a-zA-Z0-9";
+      if (allowHyphen) pattern += "\\-";
+      if (allowUnderscore) pattern += "_";
+      if (allowSpace) pattern += " ";
+      pattern += "]+$";
+      const regex = new RegExp(pattern);
+      if (!regex.test(value)) {
+        let message = invalidFormatMessage;
+        if (allowHyphen || allowUnderscore || allowSpace) {
+          const allowed = ["letters", "numbers"];
+          if (allowHyphen) allowed.push("hyphens");
+          if (allowUnderscore) allowed.push("underscores");
+          if (allowSpace) allowed.push("spaces");
+          message = `Only ${allowed.join(", ")} are allowed`;
         }
-        return { isValid: !1, error: R };
+        return { isValid: false, error: message };
       }
-      return h !== void 0 && r.length < h ? {
-        isValid: !1,
-        error: M || `Must be at least ${h} characters`
-      } : p !== void 0 && r.length > p ? {
-        isValid: !1,
-        error: O || `Must be at most ${p} characters`
-      } : { isValid: !0 };
-    }, H = (r) => {
-      const s = [
+      if (minLength !== void 0 && value.length < minLength) {
+        return {
+          isValid: false,
+          error: minLengthMessage || `Must be at least ${minLength} characters`
+        };
+      }
+      if (maxLength !== void 0 && value.length > maxLength) {
+        return {
+          isValid: false,
+          error: maxLengthMessage || `Must be at most ${maxLength} characters`
+        };
+      }
+      return { isValid: true };
+    };
+    const handleKeyDown = (e) => {
+      const allowedKeys = [
         "Backspace",
         "Delete",
         "Tab",
@@ -55,107 +78,113 @@ const y = L(
         "Home",
         "End"
       ];
-      if (r.ctrlKey || r.metaKey) {
-        t == null || t(r);
+      if (e.ctrlKey || e.metaKey) {
+        onKeyDown == null ? void 0 : onKeyDown(e);
         return;
       }
-      if (s.includes(r.key)) {
-        t == null || t(r);
+      if (allowedKeys.includes(e.key)) {
+        onKeyDown == null ? void 0 : onKeyDown(e);
         return;
       }
-      if (f && r.key === " ") {
-        t == null || t(r);
+      if (allowSpace && e.key === " ") {
+        onKeyDown == null ? void 0 : onKeyDown(e);
         return;
       }
-      if (u && r.key === "-") {
-        t == null || t(r);
+      if (allowHyphen && e.key === "-") {
+        onKeyDown == null ? void 0 : onKeyDown(e);
         return;
       }
-      if (c && r.key === "_") {
-        t == null || t(r);
+      if (allowUnderscore && e.key === "_") {
+        onKeyDown == null ? void 0 : onKeyDown(e);
         return;
       }
-      if (r.key >= "a" && r.key <= "z" || r.key >= "A" && r.key <= "Z") {
-        t == null || t(r);
+      if (e.key >= "a" && e.key <= "z" || e.key >= "A" && e.key <= "Z") {
+        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();
-    }, S = (r) => {
-      const s = r.target.value;
-      if (X) {
-        const i = j(s);
-        A(i.error), a == null || a(i.isValid);
+      e.preventDefault();
+    };
+    const handleChange = (e) => {
+      const value = e.target.value;
+      if (touched) {
+        const validation = validateFormat(value);
+        setInternalError(validation.error);
+        onValidationChange == null ? void 0 : onValidationChange(validation.isValid);
       }
-      v == null || v(r);
-    }, V = (r) => {
-      var i;
-      Y(!0);
-      const s = j(r.target.value);
-      A(s.error), a == null || a(s.isValid), (i = m.onBlur) == null || i.call(m, r);
-    }, e = Z || Q;
-    return /* @__PURE__ */ U(
+      onChange == null ? void 0 : onChange(e);
+    };
+    const handleBlur = (e) => {
+      var _a;
+      setTouched(true);
+      const validation = validateFormat(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: z("input-wrapper", E && "input-wrapper--full-width"),
-        "data-cy": `${d}-wrapper`,
-        "data-testid": `${l}-wrapper`,
+        className: cn("input-wrapper", fullWidth && "input-wrapper--full-width"),
+        "data-cy": `${finalDataCy}-wrapper`,
+        "data-testid": `${finalTestId}-wrapper`,
         children: [
-          _ && /* @__PURE__ */ b(
+          label && /* @__PURE__ */ jsx(
             "label",
             {
-              htmlFor: $,
+              htmlFor: id,
               className: "input__label",
-              "data-cy": `${d}-label`,
-              "data-testid": `${l}-label`,
-              children: _
+              "data-cy": `${finalDataCy}-label`,
+              "data-testid": `${finalTestId}-label`,
+              children: label
             }
           ),
-          /* @__PURE__ */ b(
+          /* @__PURE__ */ jsx(
             "input",
             {
-              ref: P,
-              id: $,
+              ref,
+              id,
               type: "text",
-              className: z(
+              className: cn(
                 "input",
-                e && "input--error",
-                E && "input--full-width",
-                T
+                displayError && "input--error",
+                fullWidth && "input--full-width",
+                className
               ),
-              "aria-invalid": e ? "true" : "false",
-              "aria-describedby": e ? N : I ? B : void 0,
-              "data-cy": d,
-              "data-testid": l,
-              onChange: S,
-              onBlur: V,
-              onKeyDown: H,
-              maxLength: p,
-              ...m
+              "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,
+              maxLength,
+              ...props
             }
           ),
-          e && /* @__PURE__ */ b(
+          displayError && /* @__PURE__ */ jsx(
             "span",
             {
-              id: N,
+              id: errorId,
               className: "input__error",
               role: "alert",
-              "data-cy": `${d}-error`,
-              "data-testid": `${l}-error`,
-              children: e
+              "data-cy": `${finalDataCy}-error`,
+              "data-testid": `${finalTestId}-error`,
+              children: displayError
             }
           ),
-          I && !e && /* @__PURE__ */ b(
+          helperText && !displayError && /* @__PURE__ */ jsx(
             "span",
             {
-              id: B,
+              id: helperId,
               className: "input__helper",
-              "data-cy": `${d}-helper`,
-              "data-testid": `${l}-helper`,
-              children: I
+              "data-cy": `${finalDataCy}-helper`,
+              "data-testid": `${finalTestId}-helper`,
+              children: helperText
             }
           )
         ]
@@ -163,7 +192,7 @@ const y = L(
     );
   }
 );
-y.displayName = "AlphanumericInput";
+AlphanumericInput.displayName = "AlphanumericInput";
 export {
-  y as AlphanumericInput
+  AlphanumericInput
 };

package/dist/index7.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),i=require("react"),k=require("./index17.cjs");;/* empty css          */const f=i.forwardRef(({label:t,error:e,helperText:n,indeterminate:o=!1,className:y,id:_,required:l,disabled:b,checked:$,"data-cy":m,"data-testid":j,...v},c)=>{const N=i.useId(),d=_||N,p=`${d}-error`,x=`${d}-helper`,s=m||"checkbox",r=j||"checkbox",u=i.useRef(null),w=i.useCallback(h=>{u.current=h,c&&(typeof c=="function"?c(h):"current"in c&&(c.current=h))},[c]);i.useEffect(()=>{u.current&&(u.current.indeterminate=o)},[o]);const C=t&&l&&!t.includes("*")?`${t} *`:t;return a.jsxs("div",{className:k.cn("checkbox-wrapper",b&&"checkbox-wrapper--disabled"),"data-cy":`${s}-wrapper`,"data-testid":`${r}-wrapper`,children:[a.jsxs("div",{className:"checkbox__container",children:[a.jsx("input",{ref:w,id:d,type:"checkbox",checked:$,className:k.cn("checkbox__input",e&&"checkbox__input--error",y),"aria-invalid":e?"true":"false","aria-required":l?"true":void 0,"aria-describedby":e?p:n?x:void 0,"data-cy":s,"data-testid":r,"data-indeterminate":o?"true":void 0,disabled:b,required:l,...v}),t&&a.jsx("label",{htmlFor:d,className:"checkbox__label","data-cy":`${s}-label`,"data-testid":`${r}-label`,children:C})]}),e&&a.jsx("span",{id:p,className:"checkbox__error",role:"alert","data-cy":`${s}-error`,"data-testid":`${r}-error`,children:e}),n&&!e&&a.jsx("span",{id:x,className:"checkbox__helper","data-cy":`${s}-helper`,"data-testid":`${r}-helper`,children:n})]})});f.displayName="Checkbox";exports.Checkbox=f;
+"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 c=r.forwardRef(({label:c,error:t,helperText:d,indeterminate:i=!1,className:s,id:l,required:n,disabled:o,checked:u,"data-cy":b,"data-testid":h,...x},p)=>{const k=r.useId(),m=l||k,y=`${m}-error`,_=`${m}-helper`,$=b||"checkbox",f=h||"checkbox",j=r.useRef(null),N=r.useCallback(e=>{j.current=e,p&&("function"==typeof p?p(e):"current"in p&&(p.current=e))},[p]);r.useEffect(()=>{j.current&&(j.current.indeterminate=i)},[i]);const q=c&&n&&!c.includes("*")?`${c} *`:c;return e.jsxs("div",{className:a.cn("checkbox-wrapper",o&&"checkbox-wrapper--disabled"),"data-cy":`${$}-wrapper`,"data-testid":`${f}-wrapper`,children:[e.jsxs("div",{className:"checkbox__container",children:[e.jsx("input",{ref:N,id:m,type:"checkbox",checked:u,className:a.cn("checkbox__input",t&&"checkbox__input--error",s),"aria-invalid":t?"true":"false","aria-required":n?"true":void 0,"aria-describedby":t?y:d?_:void 0,"data-cy":$,"data-testid":f,"data-indeterminate":i?"true":void 0,disabled:o,required:n,...x}),c&&e.jsx("label",{htmlFor:m,className:"checkbox__label","data-cy":`${$}-label`,"data-testid":`${f}-label`,children:q})]}),t&&e.jsx("span",{id:y,className:"checkbox__error",role:"alert","data-cy":`${$}-error`,"data-testid":`${f}-error`,children:t}),d&&!t&&e.jsx("span",{id:_,className:"checkbox__helper","data-cy":`${$}-helper`,"data-testid":`${f}-helper`,children:d})]})});c.displayName="Checkbox",exports.Checkbox=c;

package/dist/index7.js

@@ -1,89 +1,104 @@
-import { jsxs as f, jsx as i } from "react/jsx-runtime";
-import { forwardRef as C, useId as R, useRef as j, useCallback as g, useEffect as D } from "react";
-import { cn as k } from "./index17.js";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useId, useRef, useCallback, useEffect } from "react";
+import { cn } from "./index17.js";
 /* empty css        */
-const E = C(
+const Checkbox = forwardRef(
   ({
-    label: c,
-    error: a,
-    helperText: s,
-    indeterminate: o = !1,
-    className: m,
-    id: x,
-    required: n,
-    disabled: h,
-    checked: y,
-    "data-cy": _,
-    "data-testid": $,
-    ...N
-  }, e) => {
-    const v = R(), d = x || v, u = `${d}-error`, b = `${d}-helper`, t = _ || "checkbox", r = $ || "checkbox", l = j(null), w = g(
-      (p) => {
-        l.current = p, e && (typeof e == "function" ? e(p) : "current" in e && (e.current = p));
+    label,
+    error,
+    helperText,
+    indeterminate = false,
+    className,
+    id: providedId,
+    required,
+    disabled,
+    checked,
+    "data-cy": dataCy,
+    "data-testid": dataTestId,
+    ...props
+  }, ref) => {
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const errorId = `${id}-error`;
+    const helperId = `${id}-helper`;
+    const finalDataCy = dataCy || "checkbox";
+    const finalTestId = dataTestId || "checkbox";
+    const internalRef = useRef(null);
+    const combinedRef = useCallback(
+      (element) => {
+        internalRef.current = element;
+        if (!ref) return;
+        if (typeof ref === "function") {
+          ref(element);
+        } else if ("current" in ref) {
+          ref.current = element;
+        }
       },
-      [e]
+      [ref]
     );
-    D(() => {
-      l.current && (l.current.indeterminate = o);
-    }, [o]);
-    const I = c && n && !c.includes("*") ? `${c} *` : c;
-    return /* @__PURE__ */ f(
+    useEffect(() => {
+      if (internalRef.current) {
+        internalRef.current.indeterminate = indeterminate;
+      }
+    }, [indeterminate]);
+    const displayLabel = label && required && !label.includes("*") ? `${label} *` : label;
+    return /* @__PURE__ */ jsxs(
       "div",
       {
-        className: k("checkbox-wrapper", h && "checkbox-wrapper--disabled"),
-        "data-cy": `${t}-wrapper`,
-        "data-testid": `${r}-wrapper`,
+        className: cn("checkbox-wrapper", disabled && "checkbox-wrapper--disabled"),
+        "data-cy": `${finalDataCy}-wrapper`,
+        "data-testid": `${finalTestId}-wrapper`,
         children: [
-          /* @__PURE__ */ f("div", { className: "checkbox__container", children: [
-            /* @__PURE__ */ i(
+          /* @__PURE__ */ jsxs("div", { className: "checkbox__container", children: [
+            /* @__PURE__ */ jsx(
               "input",
               {
-                ref: w,
-                id: d,
+                ref: combinedRef,
+                id,
                 type: "checkbox",
-                checked: y,
-                className: k("checkbox__input", a && "checkbox__input--error", m),
-                "aria-invalid": a ? "true" : "false",
-                "aria-required": n ? "true" : void 0,
-                "aria-describedby": a ? u : s ? b : void 0,
-                "data-cy": t,
-                "data-testid": r,
-                "data-indeterminate": o ? "true" : void 0,
-                disabled: h,
-                required: n,
-                ...N
+                checked,
+                className: cn("checkbox__input", error && "checkbox__input--error", className),
+                "aria-invalid": error ? "true" : "false",
+                "aria-required": required ? "true" : void 0,
+                "aria-describedby": error ? errorId : helperText ? helperId : void 0,
+                "data-cy": finalDataCy,
+                "data-testid": finalTestId,
+                "data-indeterminate": indeterminate ? "true" : void 0,
+                disabled,
+                required,
+                ...props
               }
             ),
-            c && /* @__PURE__ */ i(
+            label && /* @__PURE__ */ jsx(
               "label",
               {
-                htmlFor: d,
+                htmlFor: id,
                 className: "checkbox__label",
-                "data-cy": `${t}-label`,
-                "data-testid": `${r}-label`,
-                children: I
+                "data-cy": `${finalDataCy}-label`,
+                "data-testid": `${finalTestId}-label`,
+                children: displayLabel
               }
             )
           ] }),
-          a && /* @__PURE__ */ i(
+          error && /* @__PURE__ */ jsx(
             "span",
             {
-              id: u,
+              id: errorId,
               className: "checkbox__error",
               role: "alert",
-              "data-cy": `${t}-error`,
-              "data-testid": `${r}-error`,
-              children: a
+              "data-cy": `${finalDataCy}-error`,
+              "data-testid": `${finalTestId}-error`,
+              children: error
             }
           ),
-          s && !a && /* @__PURE__ */ i(
+          helperText && !error && /* @__PURE__ */ jsx(
             "span",
             {
-              id: b,
+              id: helperId,
               className: "checkbox__helper",
-              "data-cy": `${t}-helper`,
-              "data-testid": `${r}-helper`,
-              children: s
+              "data-cy": `${finalDataCy}-helper`,
+              "data-testid": `${finalTestId}-helper`,
+              children: helperText
             }
           )
         ]
@@ -91,7 +106,7 @@ const E = C(
     );
   }
 );
-E.displayName = "Checkbox";
+Checkbox.displayName = "Checkbox";
 export {
-  E as Checkbox
+  Checkbox
 };

package/dist/index8.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),_=require("./index17.cjs");;/* empty css          */const $=n.forwardRef(({label:r,error:d,helperText:c,className:f,id:h,required:l,disabled:p,checked:m,"data-cy":j,"data-testid":R,...b},a)=>{const N=n.useId(),s=h||N,u=`${s}-error`,y=`${s}-helper`,t=j||"radio",i=R||"radio",x=n.useRef(null),w=n.useCallback(o=>{x.current=o,a&&(typeof a=="function"?a(o):"current"in a&&(a.current=o))},[a]),I=r&&l&&!r.includes("*")?`${r} *`:r;return e.jsxs("div",{className:_.cn("radio-wrapper",p&&"radio-wrapper--disabled"),"data-cy":`${t}-wrapper`,"data-testid":`${i}-wrapper`,children:[e.jsxs("div",{className:"radio__container",children:[e.jsx("input",{ref:w,id:s,type:"radio",checked:m,className:_.cn("radio__input",d&&"radio__input--error",f),"aria-describedby":d?u:c?y:void 0,"data-cy":t,"data-testid":i,disabled:p,required:l,...b}),r&&e.jsx("label",{htmlFor:s,className:"radio__label","data-cy":`${t}-label`,"data-testid":`${i}-label`,children:I})]}),d&&e.jsx("span",{id:u,className:"radio__error",role:"alert","data-cy":`${t}-error`,"data-testid":`${i}-error`,children:d}),c&&!d&&e.jsx("span",{id:y,className:"radio__helper","data-cy":`${t}-helper`,"data-testid":`${i}-helper`,children:c})]})});$.displayName="Radio";exports.Radio=$;
+"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 d=r.forwardRef(({label:d,error:i,helperText:t,className:s,id:l,required:c,disabled:o,checked:n,"data-cy":p,"data-testid":u,...b},h)=>{const x=r.useId(),y=l||x,_=`${y}-error`,m=`${y}-helper`,$=p||"radio",j=u||"radio",N=r.useRef(null),f=r.useCallback(e=>{N.current=e,h&&("function"==typeof h?h(e):"current"in h&&(h.current=e))},[h]),q=d&&c&&!d.includes("*")?`${d} *`:d;return e.jsxs("div",{className:a.cn("radio-wrapper",o&&"radio-wrapper--disabled"),"data-cy":`${$}-wrapper`,"data-testid":`${j}-wrapper`,children:[e.jsxs("div",{className:"radio__container",children:[e.jsx("input",{ref:f,id:y,type:"radio",checked:n,className:a.cn("radio__input",i&&"radio__input--error",s),"aria-describedby":i?_:t?m:void 0,"data-cy":$,"data-testid":j,disabled:o,required:c,...b}),d&&e.jsx("label",{htmlFor:y,className:"radio__label","data-cy":`${$}-label`,"data-testid":`${j}-label`,children:q})]}),i&&e.jsx("span",{id:_,className:"radio__error",role:"alert","data-cy":`${$}-error`,"data-testid":`${j}-error`,children:i}),t&&!i&&e.jsx("span",{id:m,className:"radio__helper","data-cy":`${$}-helper`,"data-testid":`${j}-helper`,children:t})]})});d.displayName="Radio",exports.Radio=d;