@adam-milo/ui 1.0.6 → 1.0.9

package/dist/index4.js

@@ -1,61 +1,178 @@
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import * as a from "@radix-ui/react-tabs";
-import { cn as b } from "./index10.js";
+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 "./index13.js";
 /* empty css        */
-const C = a.Root, g = m(
-  ({ className: s, "data-cy": t, "data-testid": i, ...n }, r) => {
-    const e = t || "tabs-list", o = i || "tabs-list";
-    return /* @__PURE__ */ c(
-      a.List,
-      {
-        ref: r,
-        className: b("tabs-list", s),
-        "data-cy": e,
-        "data-testid": o,
-        ...n
-      }
-    );
+const _ = x(
+  ({
+    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);
+    };
+    return /* @__PURE__ */ i("div", { className: "password-input-wrapper", children: [
+      /* @__PURE__ */ i(
+        "div",
+        {
+          className: u("input-wrapper", l && "input-wrapper--full-width"),
+          "data-cy": `${r}-wrapper`,
+          "data-testid": `${s}-wrapper`,
+          children: [
+            n && /* @__PURE__ */ t(
+              "label",
+              {
+                htmlFor: a,
+                className: "input__label",
+                "data-cy": `${r}-label`,
+                "data-testid": `${s}-label`,
+                children: n
+              }
+            ),
+            /* @__PURE__ */ t(
+              "input",
+              {
+                ref: y,
+                id: a,
+                type: d ? "text" : "password",
+                className: u(
+                  "input",
+                  "password-input",
+                  e && "input--error",
+                  l && "input--full-width",
+                  h
+                ),
+                "aria-invalid": e ? "true" : "false",
+                "aria-describedby": e ? p : o ? c : void 0,
+                "data-cy": r,
+                "data-testid": s,
+                ...k
+              }
+            ),
+            e && /* @__PURE__ */ t(
+              "span",
+              {
+                id: p,
+                className: "input__error",
+                role: "alert",
+                "data-cy": `${r}-error`,
+                "data-testid": `${s}-error`,
+                children: e
+              }
+            ),
+            o && !e && /* @__PURE__ */ t(
+              "span",
+              {
+                id: c,
+                className: "input__helper",
+                "data-cy": `${r}-helper`,
+                "data-testid": `${s}-helper`,
+                children: o
+              }
+            )
+          ]
+        }
+      ),
+      w && /* @__PURE__ */ t(
+        "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(
+            "svg",
+            {
+              width: "20",
+              height: "20",
+              viewBox: "0 0 20 20",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ t(
+                  "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__ */ t(
+                  "circle",
+                  {
+                    cx: "10",
+                    cy: "10",
+                    r: "2.5",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    fill: "none"
+                  }
+                )
+              ]
+            }
+          ) : /* @__PURE__ */ i(
+            "svg",
+            {
+              width: "20",
+              height: "20",
+              viewBox: "0 0 20 20",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ t(
+                  "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__ */ t(
+                  "circle",
+                  {
+                    cx: "10",
+                    cy: "10",
+                    r: "2.5",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    fill: "none"
+                  }
+                ),
+                /* @__PURE__ */ t(
+                  "path",
+                  {
+                    d: "M3 3l14 14",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] });
   }
 );
-g.displayName = a.List.displayName;
-const y = m(
-  ({ className: s, value: t, "data-cy": i, "data-testid": n, ...r }, e) => {
-    const o = i || (t ? `tabs-trigger-${t}` : "tabs-trigger"), d = n || (t ? `tabs-trigger-${t}` : "tabs-trigger");
-    return /* @__PURE__ */ c(
-      a.Trigger,
-      {
-        ref: e,
-        className: b("tabs-trigger", s),
-        value: t,
-        "data-cy": o,
-        "data-testid": d,
-        ...r
-      }
-    );
-  }
-);
-y.displayName = a.Trigger.displayName;
-const f = m(
-  ({ className: s, value: t, "data-cy": i, "data-testid": n, ...r }, e) => {
-    const o = i || (t ? `tabs-content-${t}` : "tabs-content"), d = n || (t ? `tabs-content-${t}` : "tabs-content");
-    return /* @__PURE__ */ c(
-      a.Content,
-      {
-        ref: e,
-        className: b("tabs-content", s),
-        value: t,
-        "data-cy": o,
-        "data-testid": d,
-        ...r
-      }
-    );
-  }
-);
-f.displayName = a.Content.displayName;
+_.displayName = "PasswordInput";
 export {
-  C as Tabs,
-  f as TabsContent,
-  g as TabsList,
-  y as TabsTrigger
+  _ as PasswordInput
 };

package/dist/index5.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),m=require("react"),f=require("./index10.cjs");;/* empty css          */const c=m.forwardRef(({variant:s="info",title:r,icon:d,className:i,children:l,"data-cy":n,"data-testid":o,...u},$)=>{const y={info:"status",success:"status",warning:"alert",error:"alert"},t=n||`alert-${s}`,e=o||`alert-${s}`;return a.jsxs("div",{ref:$,role:y[s],className:f.cn("alert",`alert--${s}`,i),"data-cy":t,"data-testid":e,...u,children:[d&&a.jsx("div",{className:"alert__icon","data-cy":`${t}-icon`,"data-testid":`${e}-icon`,children:d}),a.jsxs("div",{className:"alert__content","data-cy":`${t}-content`,"data-testid":`${e}-content`,children:[r&&a.jsx("div",{className:"alert__title","data-cy":`${t}-title`,"data-testid":`${e}-title`,children:r}),a.jsx("div",{"data-cy":`${t}-message`,"data-testid":`${e}-message`,children:l})]})]})});c.displayName="Alert";exports.Alert=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),p=require("react"),T=require("./index13.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;

package/dist/index5.js

@@ -1,61 +1,157 @@
-import { jsxs as c, jsx as s } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { cn as p } from "./index10.js";
+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 "./index13.js";
 /* empty css        */
-const _ = y(
+const W = Z(
   ({
-    variant: e = "info",
-    title: d,
-    icon: r,
-    className: i,
-    children: l,
-    "data-cy": o,
-    "data-testid": n,
-    ...m
-  }, $) => {
-    const f = {
-      info: "status",
-      success: "status",
-      warning: "alert",
-      error: "alert"
-    }, t = o || `alert-${e}`, a = n || `alert-${e}`;
-    return /* @__PURE__ */ c(
+    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 = [
+        "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 ($ && r.key === ".") {
+        if (r.currentTarget.value.includes(".")) {
+          r.preventDefault();
+          return;
+        }
+        t == null || t(r);
+        return;
+      }
+      if (b && 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 (z) {
+        const e = h(a);
+        E(e.error), s == null || s(e.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(
       "div",
       {
-        ref: $,
-        role: f[e],
-        className: p("alert", `alert--${e}`, i),
-        "data-cy": t,
-        "data-testid": a,
-        ...m,
+        className: T("input-wrapper", I && "input-wrapper--full-width"),
+        "data-cy": `${l}-wrapper`,
+        "data-testid": `${u}-wrapper`,
         children: [
-          r && /* @__PURE__ */ s(
-            "div",
+          N && /* @__PURE__ */ f(
+            "label",
+            {
+              htmlFor: d,
+              className: "input__label",
+              "data-cy": `${l}-label`,
+              "data-testid": `${u}-label`,
+              children: N
+            }
+          ),
+          /* @__PURE__ */ f(
+            "input",
+            {
+              ref: V,
+              id: d,
+              type: "text",
+              inputMode: "numeric",
+              className: T(
+                "input",
+                i && "input--error",
+                I && "input--full-width",
+                P
+              ),
+              "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
+            }
+          ),
+          i && /* @__PURE__ */ f(
+            "span",
             {
-              className: "alert__icon",
-              "data-cy": `${t}-icon`,
-              "data-testid": `${a}-icon`,
-              children: r
+              id: k,
+              className: "input__error",
+              role: "alert",
+              "data-cy": `${l}-error`,
+              "data-testid": `${u}-error`,
+              children: i
             }
           ),
-          /* @__PURE__ */ c(
-            "div",
+          n && !i && /* @__PURE__ */ f(
+            "span",
             {
-              className: "alert__content",
-              "data-cy": `${t}-content`,
-              "data-testid": `${a}-content`,
-              children: [
-                d && /* @__PURE__ */ s(
-                  "div",
-                  {
-                    className: "alert__title",
-                    "data-cy": `${t}-title`,
-                    "data-testid": `${a}-title`,
-                    children: d
-                  }
-                ),
-                /* @__PURE__ */ s("div", { "data-cy": `${t}-message`, "data-testid": `${a}-message`, children: l })
-              ]
+              id: _,
+              className: "input__helper",
+              "data-cy": `${l}-helper`,
+              "data-testid": `${u}-helper`,
+              children: n
             }
           )
         ]
@@ -63,7 +159,7 @@ const _ = y(
     );
   }
 );
-_.displayName = "Alert";
+W.displayName = "NumericInput";
 export {
-  _ as Alert
+  W as NumericInput
 };

package/dist/index6.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),i=require("react"),o=require("./index10.cjs");;/* empty css          */const l=i.forwardRef(({variant:a="default",className:t,children:d,"data-cy":e,"data-testid":r,...c},s)=>{const p=e||`card-${a}`,N=r||`card-${a}`;return n.jsx("div",{ref:s,className:o.cn("card",`card--${a}`,t),"data-cy":p,"data-testid":N,...c,children:d})});l.displayName="Card";const f=i.forwardRef(({className:a,"data-cy":t,"data-testid":d,...e},r)=>{const c=t||"card-header",s=d||"card-header";return n.jsx("div",{ref:r,className:o.cn("card-header",a),"data-cy":c,"data-testid":s,...e})});f.displayName="CardHeader";const C=i.forwardRef(({className:a,"data-cy":t,"data-testid":d,...e},r)=>{const c=t||"card-title",s=d||"card-title";return n.jsx("h3",{ref:r,className:o.cn("card-title",a),"data-cy":c,"data-testid":s,...e})});C.displayName="CardTitle";const y=i.forwardRef(({className:a,"data-cy":t,"data-testid":d,...e},r)=>{const c=t||"card-description",s=d||"card-description";return n.jsx("p",{ref:r,className:o.cn("card-description",a),"data-cy":c,"data-testid":s,...e})});y.displayName="CardDescription";const u=i.forwardRef(({className:a,"data-cy":t,"data-testid":d,...e},r)=>{const c=t||"card-content",s=d||"card-content";return n.jsx("div",{ref:r,className:o.cn("card-content",a),"data-cy":c,"data-testid":s,...e})});u.displayName="CardContent";const m=i.forwardRef(({className:a,"data-cy":t,"data-testid":d,...e},r)=>{const c=t||"card-footer",s=d||"card-footer";return n.jsx("div",{ref:r,className:o.cn("card-footer",a),"data-cy":c,"data-testid":s,...e})});m.displayName="CardFooter";exports.Card=l;exports.CardContent=u;exports.CardDescription=y;exports.CardFooter=m;exports.CardHeader=f;exports.CardTitle=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),h=require("react"),R=require("./index13.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;