@pismo/marola 1.0.0-beta.27 → 1.0.0-beta.28

package/dist/components/Input/Input.d.ts

@@ -7,7 +7,9 @@ export type InputProps = InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     /** Info message text */
     infoMessage?: string;
-    /** Error message text */
+    /** Show the field layout as an error */
+    error?: boolean;
+    /** Error message text, if has "errorMessage", the "error" props will be "true" */
     errorMessage?: string;
     /** Left icon element */
     leftIcon?: ReactNode;
@@ -47,7 +49,9 @@ export declare const Input: import('react').ForwardRefExoticComponent<InputHTMLA
     label?: string | undefined;
     /** Info message text */
     infoMessage?: string | undefined;
-    /** Error message text */
+    /** Show the field layout as an error */
+    error?: boolean | undefined;
+    /** Error message text, if has "errorMessage", the "error" props will be "true" */
     errorMessage?: string | undefined;
     /** Left icon element */
     leftIcon?: ReactNode;

package/dist/components/Input/Input.js

@@ -1,164 +1,164 @@
 import '../../assets/Input.css';
-import { jsxs as j, jsx as S } from "react/jsx-runtime";
-import * as h from "react";
+import { jsxs as H, jsx as T } from "react/jsx-runtime";
+import * as f from "react";
 import { forwardRef as de, useState as ce, useId as _e } from "react";
-import { c as R } from "../../clsx-DB4S2d7J.js";
+import { c as E } from "../../clsx-DB4S2d7J.js";
 import { Typography as L } from "../Typography/Typography.js";
-import { g as he, a as fe, u as me, f as z, b as f, _ as ye, c as Q, i as ge, P as e, d as be, e as Ce } from "../../useSlotProps-C_I1kEHr.js";
+import { g as he, a as fe, u as me, f as z, b as m, _ as ye, c as Q, i as ge, P as e, d as be, e as Ce } from "../../useSlotProps-C_I1kEHr.js";
 function we(a) {
-  let l = "https://mui.com/production-error/?code=" + a;
-  for (let s = 1; s < arguments.length; s += 1)
-    l += "&args[]=" + encodeURIComponent(arguments[s]);
-  return "Minified MUI error #" + a + "; visit " + l + " for the full message.";
+  let s = "https://mui.com/production-error/?code=" + a;
+  for (let u = 1; u < arguments.length; u += 1)
+    s += "&args[]=" + encodeURIComponent(arguments[u]);
+  return "Minified MUI error #" + a + "; visit " + s + " for the full message.";
 }
 const X = "Input";
 function ve(a) {
   return he(X, a);
 }
 fe(X, ["root", "formControl", "focused", "disabled", "error", "multiline", "input", "inputMultiline", "inputTypeSearch", "adornedStart", "adornedEnd"]);
-const Z = /* @__PURE__ */ h.createContext(void 0);
+const Z = /* @__PURE__ */ f.createContext(void 0);
 process.env.NODE_ENV !== "production" && (Z.displayName = "FormControlContext");
 function xe() {
-  return h.useContext(Z);
+  return f.useContext(Z);
 }
 function qe(a = {}) {
   const {
-    defaultValue: l,
-    disabled: s = !1,
-    error: m = !1,
-    onBlur: i,
-    onChange: y,
-    onFocus: q,
-    required: N = !1,
-    value: b,
-    inputRef: k
+    defaultValue: s,
+    disabled: u = !1,
+    error: i = !1,
+    onBlur: p,
+    onChange: _,
+    onFocus: x,
+    required: q = !1,
+    value: R,
+    inputRef: N
   } = a, o = xe();
-  let P, _, C, w, g;
+  let g, h, b, C, y;
   if (o) {
     var F, d, I;
-    if (P = void 0, _ = (F = o.disabled) != null ? F : !1, C = (d = o.error) != null ? d : !1, w = (I = o.required) != null ? I : !1, g = o.value, process.env.NODE_ENV !== "production") {
-      const t = ["defaultValue", "disabled", "error", "required", "value"].filter((n) => a[n] !== void 0);
+    if (g = void 0, h = (F = o.disabled) != null ? F : !1, b = (d = o.error) != null ? d : !1, C = (I = o.required) != null ? I : !1, y = o.value, process.env.NODE_ENV !== "production") {
+      const t = ["defaultValue", "disabled", "error", "required", "value"].filter((r) => a[r] !== void 0);
       t.length > 0 && console.warn(["MUI: You have set props on an input that is inside a FormControl.", "Set these props on a FormControl instead. Otherwise they will be ignored.", `Ignored props: ${t.join(", ")}`].join(`
 `));
     }
   } else
-    P = l, _ = s, C = m, w = N, g = b;
+    g = s, h = u, b = i, C = q, y = R;
   const {
-    current: B
-  } = h.useRef(g != null), V = h.useCallback((t) => {
+    current: S
+  } = f.useRef(y != null), k = f.useCallback((t) => {
     process.env.NODE_ENV !== "production" && t && t.nodeName !== "INPUT" && !t.focus && console.error(["MUI: You have provided a `slots.input` to the input component", "that does not correctly handle the `ref` prop.", "Make sure the `ref` prop is called with a HTMLInputElement."].join(`
 `));
-  }, []), v = h.useRef(null), O = me(v, k, V), [x, E] = h.useState(!1);
-  h.useEffect(() => {
-    !o && _ && x && (E(!1), i == null || i());
-  }, [o, _, x, i]);
-  const U = (t) => (n) => {
-    var r;
+  }, []), w = f.useRef(null), O = me(w, N, k), [P, v] = f.useState(!1);
+  f.useEffect(() => {
+    !o && h && P && (v(!1), p == null || p());
+  }, [o, h, P, p]);
+  const B = (t) => (r) => {
+    var n;
     if (o != null && o.disabled) {
-      n.stopPropagation();
+      r.stopPropagation();
       return;
     }
-    if ((r = t.onFocus) == null || r.call(t, n), o && o.onFocus) {
+    if ((n = t.onFocus) == null || n.call(t, r), o && o.onFocus) {
       var c;
       o == null || (c = o.onFocus) == null || c.call(o);
     } else
-      E(!0);
-  }, M = (t) => (n) => {
-    var r;
-    (r = t.onBlur) == null || r.call(t, n), o && o.onBlur ? o.onBlur() : E(!1);
-  }, A = (t) => (n, ...r) => {
-    var c, D;
-    if (!B && (n.target || v.current) == null)
+      v(!0);
+  }, V = (t) => (r) => {
+    var n;
+    (n = t.onBlur) == null || n.call(t, r), o && o.onBlur ? o.onBlur() : v(!1);
+  }, U = (t) => (r, ...n) => {
+    var c, j;
+    if (!S && (r.target || w.current) == null)
       throw new Error(process.env.NODE_ENV !== "production" ? "MUI: Expected valid input target. Did you use a custom `slots.input` and forget to forward refs? See https://mui.com/r/input-component-ref-interface for more info." : we(17));
-    o == null || (c = o.onChange) == null || c.call(o, n), (D = t.onChange) == null || D.call(t, n, ...r);
-  }, T = (t) => (n) => {
-    var r;
-    v.current && n.currentTarget === n.target && v.current.focus(), (r = t.onClick) == null || r.call(t, n);
+    o == null || (c = o.onChange) == null || c.call(o, r), (j = t.onChange) == null || j.call(t, r, ...n);
+  }, M = (t) => (r) => {
+    var n;
+    w.current && r.currentTarget === r.target && w.current.focus(), (n = t.onClick) == null || n.call(t, r);
   };
   return {
-    disabled: _,
-    error: C,
-    focused: x,
+    disabled: h,
+    error: b,
+    focused: P,
     formControlContext: o,
     getInputProps: (t = {}) => {
-      const r = f({}, {
-        onBlur: i,
-        onChange: y,
-        onFocus: q
-      }, z(t)), c = f({}, r, {
-        onBlur: M(r),
-        onChange: A(r),
-        onFocus: U(r)
+      const n = m({}, {
+        onBlur: p,
+        onChange: _,
+        onFocus: x
+      }, z(t)), c = m({}, n, {
+        onBlur: V(n),
+        onChange: U(n),
+        onFocus: B(n)
       });
-      return f({}, c, {
-        "aria-invalid": C || void 0,
-        defaultValue: P,
-        value: g,
-        required: w,
-        disabled: _
+      return m({}, c, {
+        "aria-invalid": b || void 0,
+        defaultValue: g,
+        value: y,
+        required: C,
+        disabled: h
       }, t, {
         ref: O
       }, c);
     },
     getRootProps: (t = {}) => {
-      const n = z(a, ["onBlur", "onChange", "onFocus"]), r = f({}, n, z(t));
-      return f({}, t, r, {
-        onClick: T(r)
+      const r = z(a, ["onBlur", "onChange", "onFocus"]), n = m({}, r, z(t));
+      return m({}, t, n, {
+        onClick: M(n)
       });
     },
     inputRef: O,
-    required: w,
-    value: g
+    required: C,
+    value: y
   };
 }
 const Ne = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete", "autoFocus", "className", "defaultValue", "disabled", "endAdornment", "error", "id", "multiline", "name", "onClick", "onChange", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "placeholder", "readOnly", "required", "startAdornment", "value", "type", "rows", "slotProps", "slots", "minRows", "maxRows"], Pe = (a) => {
   const {
-    disabled: l,
-    error: s,
-    focused: m,
-    formControlContext: i,
-    multiline: y,
-    startAdornment: q,
-    endAdornment: N
+    disabled: s,
+    error: u,
+    focused: i,
+    formControlContext: p,
+    multiline: _,
+    startAdornment: x,
+    endAdornment: q
   } = a;
   return be({
-    root: ["root", l && "disabled", s && "error", m && "focused", !!i && "formControl", y && "multiline", !!q && "adornedStart", !!N && "adornedEnd"],
-    input: ["input", l && "disabled", y && "multiline"]
+    root: ["root", s && "disabled", u && "error", i && "focused", !!p && "formControl", _ && "multiline", !!x && "adornedStart", !!q && "adornedEnd"],
+    input: ["input", s && "disabled", _ && "multiline"]
   }, Ce(ve));
-}, ee = /* @__PURE__ */ h.forwardRef(function(l, s) {
-  var m, i, y;
+}, ee = /* @__PURE__ */ f.forwardRef(function(s, u) {
+  var i, p, _;
   const {
-    "aria-describedby": q,
-    "aria-label": N,
-    "aria-labelledby": b,
-    autoComplete: k,
+    "aria-describedby": x,
+    "aria-label": q,
+    "aria-labelledby": R,
+    autoComplete: N,
     autoFocus: o,
-    className: P,
-    defaultValue: _,
-    disabled: C,
-    endAdornment: w,
-    error: g,
+    className: g,
+    defaultValue: h,
+    disabled: b,
+    endAdornment: C,
+    error: y,
     id: F,
     multiline: d = !1,
     name: I,
-    onClick: B,
-    onChange: V,
-    onKeyDown: v,
+    onClick: S,
+    onChange: k,
+    onKeyDown: w,
     onKeyUp: O,
-    onFocus: x,
-    onBlur: E,
-    placeholder: U,
-    readOnly: M,
-    required: A,
-    startAdornment: T,
-    value: H,
-    type: p,
+    onFocus: P,
+    onBlur: v,
+    placeholder: B,
+    readOnly: V,
+    required: U,
+    startAdornment: M,
+    value: A,
+    type: D,
     rows: t,
-    slotProps: n = {},
-    slots: r = {},
+    slotProps: r = {},
+    slots: n = {},
     minRows: c,
-    maxRows: D
-  } = l, Y = ye(l, Ne), {
+    maxRows: j
+  } = s, Y = ye(s, Ne), {
     getRootProps: te,
     getInputProps: oe,
     focused: ne,
@@ -166,16 +166,16 @@ const Ne = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete",
     error: ae,
     disabled: se
   } = qe({
-    disabled: C,
-    defaultValue: _,
-    error: g,
-    onBlur: E,
-    onClick: B,
-    onChange: V,
-    onFocus: x,
-    required: A,
-    value: H
-  }), W = d ? void 0 : p ?? "text", $ = f({}, l, {
+    disabled: b,
+    defaultValue: h,
+    error: y,
+    onBlur: v,
+    onClick: S,
+    onChange: k,
+    onFocus: P,
+    required: U,
+    value: A
+  }), W = d ? void 0 : D ?? "text", $ = m({}, s, {
     disabled: se,
     error: ae,
     focused: ne,
@@ -183,43 +183,43 @@ const Ne = ["aria-describedby", "aria-label", "aria-labelledby", "autoComplete",
     multiline: d,
     type: W
   }), G = Pe($), le = {
-    "aria-describedby": q,
-    "aria-label": N,
-    "aria-labelledby": b,
-    autoComplete: k,
+    "aria-describedby": x,
+    "aria-label": q,
+    "aria-labelledby": R,
+    autoComplete: N,
     autoFocus: o,
     id: F,
-    onKeyDown: v,
+    onKeyDown: w,
     onKeyUp: O,
     name: I,
-    placeholder: U,
-    readOnly: M,
+    placeholder: B,
+    readOnly: V,
     type: W
-  }, J = (m = r.root) != null ? m : "div", ue = Q({
+  }, J = (i = n.root) != null ? i : "div", ue = Q({
     elementType: J,
     getSlotProps: te,
-    externalSlotProps: n.root,
+    externalSlotProps: r.root,
     externalForwardedProps: Y,
     additionalProps: {
-      ref: s
+      ref: u
     },
     ownerState: $,
-    className: [G.root, P]
-  }), K = d ? (i = r.textarea) != null ? i : "textarea" : (y = r.input) != null ? y : "input", ie = Q({
+    className: [G.root, g]
+  }), K = d ? (p = n.textarea) != null ? p : "textarea" : (_ = n.input) != null ? _ : "input", ie = Q({
     elementType: K,
-    getSlotProps: (pe) => oe(f({}, le, pe)),
-    externalSlotProps: n.input,
-    additionalProps: f({
+    getSlotProps: (pe) => oe(m({}, le, pe)),
+    externalSlotProps: r.input,
+    additionalProps: m({
       rows: d ? t : void 0
     }, d && !ge(K) && {
       minRows: t || c,
-      maxRows: t || D
+      maxRows: t || j
     }),
     ownerState: $,
     className: G.input
   });
-  return process.env.NODE_ENV !== "production" && d && t && (c || D) && console.warn("MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set."), /* @__PURE__ */ j(J, f({}, ue, {
-    children: [T, /* @__PURE__ */ S(K, f({}, ie)), w]
+  return process.env.NODE_ENV !== "production" && d && t && (c || j) && console.warn("MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set."), /* @__PURE__ */ H(J, m({}, ue, {
+    children: [M, /* @__PURE__ */ T(K, m({}, ie)), C]
   }));
 });
 process.env.NODE_ENV !== "production" && (ee.propTypes = {
@@ -372,12 +372,12 @@ process.env.NODE_ENV !== "production" && (ee.propTypes = {
    */
   value: e.any
 });
-const Ee = (a) => /* @__PURE__ */ h.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "data-waves-icon": "fa/solid/circle-exclamation", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
+const Ee = (a) => /* @__PURE__ */ f.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", "data-waves-icon": "fa/solid/circle-exclamation", fill: "currentColor", color: "currentColor", width: "1em", height: "1em", style: {
   fill: "currentcolor",
   color: "currentcolor",
   width: "1em",
   height: "1em"
-}, ...a }, /* @__PURE__ */ h.createElement("path", { d: "M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z" })), Re = "_input__label_1lq2e_78", Fe = "_input_1lq2e_57", u = {
+}, ...a }, /* @__PURE__ */ f.createElement("path", { d: "M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM232 152C232 138.8 242.8 128 256 128s24 10.75 24 24v128c0 13.25-10.75 24-24 24S232 293.3 232 280V152zM256 400c-17.36 0-31.44-14.08-31.44-31.44c0-17.36 14.07-31.44 31.44-31.44s31.44 14.08 31.44 31.44C287.4 385.9 273.4 400 256 400z" })), Re = "_input__label_1lq2e_78", Fe = "_input_1lq2e_57", l = {
   "u-typography-h1": "_u-typography-h1_1lq2e_1",
   "u-typography-h2": "_u-typography-h2_1lq2e_8",
   "u-typography-h3": "_u-typography-h3_1lq2e_15",
@@ -409,96 +409,97 @@ const Ee = (a) => /* @__PURE__ */ h.createElement("svg", { xmlns: "http://www.w3
 }, Be = de(
   ({
     label: a,
-    infoMessage: l,
-    errorMessage: s,
-    leftIcon: m,
-    rightIcon: i,
-    id: y,
+    infoMessage: s,
+    error: u,
+    errorMessage: i,
+    leftIcon: p,
+    rightIcon: _,
+    id: x,
     disabled: q,
-    type: N = "text",
-    maxLength: b,
-    hideCharsCounter: k = !1,
-    onChange: o,
-    classNameWrapper: P,
-    classNameLabel: _,
+    type: R = "text",
+    maxLength: N,
+    hideCharsCounter: o = !1,
+    onChange: g,
+    classNameWrapper: h,
+    classNameLabel: b,
     classNameInput: C,
-    classNameInfoMessage: w,
-    classNameErrorMessage: g,
-    classNameCharsCounter: F,
-    "data-testid-wrapper": d,
-    "data-testid-label": I,
-    "data-testid-input": B,
-    "data-testid-infoMessage": V,
-    "data-testid-errorMessage": v,
-    "data-testid-charsCounter": O,
-    ...x
-  }, E) => {
-    const [U, M] = ce(0), A = _e(), T = y || `input_${A}`;
-    Object.assign(x, { "data-testid": B });
-    const H = (p) => {
-      var t, n;
-      M((n = (t = p == null ? void 0 : p.target) == null ? void 0 : t.value) == null ? void 0 : n.length), o && o(p);
+    classNameInfoMessage: y,
+    classNameErrorMessage: F,
+    classNameCharsCounter: d,
+    "data-testid-wrapper": I,
+    "data-testid-label": S,
+    "data-testid-input": k,
+    "data-testid-infoMessage": w,
+    "data-testid-errorMessage": O,
+    "data-testid-charsCounter": P,
+    ...v
+  }, B) => {
+    const [V, U] = ce(0), M = _e(), A = x || `input_${M}`;
+    Object.assign(v, { "data-testid": k });
+    const D = (t) => {
+      var r, n;
+      U((n = (r = t == null ? void 0 : t.target) == null ? void 0 : r.value) == null ? void 0 : n.length), g && g(t);
     };
-    return /* @__PURE__ */ j("div", { className: R(u.input, P), "data-testid": d, children: [
-      a && /* @__PURE__ */ S(
+    return /* @__PURE__ */ H("div", { className: E(l.input, h), "data-testid": I, children: [
+      a && /* @__PURE__ */ T(
         L,
         {
           element: "label",
-          elementProps: { htmlFor: T },
-          className: R(u.input__label, _),
-          "data-testid": I,
+          elementProps: { htmlFor: A },
+          className: E(l.input__label, b),
+          "data-testid": S,
           children: a
         }
       ),
-      /* @__PURE__ */ S(
+      /* @__PURE__ */ T(
         ee,
         {
-          id: T,
-          type: N,
+          id: A,
+          type: R,
           disabled: q,
-          error: !!s,
+          error: typeof u == "boolean" ? u : !!i,
           "aria-label": a,
           slotProps: {
-            root: (p) => ({
-              className: R(u["input__input-el-wrapper"], {
-                [u["input--disabled"]]: p.disabled,
-                [u["input--focused"]]: p.focused,
-                [u["input--error"]]: p.error
+            root: (t) => ({
+              className: E(l["input__input-el-wrapper"], {
+                [l["input--disabled"]]: t.disabled,
+                [l["input--focused"]]: t.focused,
+                [l["input--error"]]: t.error
               })
             }),
             input: {
-              ref: E,
-              className: R(u["input__input-el"], C),
-              maxLength: b,
-              onChange: H,
-              ...x
+              ref: B,
+              className: E(l["input__input-el"], C),
+              maxLength: N,
+              onChange: D,
+              ...v
             }
           },
-          startAdornment: m && /* @__PURE__ */ S("span", { className: u["input__left-icon"], children: m }),
-          endAdornment: i && /* @__PURE__ */ S("span", { className: u["input__right-icon"], children: i })
+          startAdornment: p && /* @__PURE__ */ T("span", { className: l["input__left-icon"], children: p }),
+          endAdornment: _ && /* @__PURE__ */ T("span", { className: l["input__right-icon"], children: _ })
         }
       ),
-      /* @__PURE__ */ j("div", { className: u["input__messages-wrapper"], children: [
-        (s || l) && /* @__PURE__ */ j(
+      /* @__PURE__ */ H("div", { className: l["input__messages-wrapper"], children: [
+        (i || s) && /* @__PURE__ */ H(
           L,
           {
-            className: s ? R(u["input__error-message"], g) : R(u["input__info-message"], w),
-            "data-testid": s ? v : V,
+            className: i ? E(l["input__error-message"], F) : E(l["input__info-message"], y),
+            "data-testid": i ? O : w,
             children: [
-              /* @__PURE__ */ S(Ee, {}),
-              s || l
+              /* @__PURE__ */ T(Ee, {}),
+              i || s
             ]
           }
         ),
-        b && !k && /* @__PURE__ */ j(
+        N && !o && /* @__PURE__ */ H(
           L,
           {
-            className: R(u["input__chars-counter"], F),
-            "data-testid": O,
+            className: E(l["input__chars-counter"], d),
+            "data-testid": P,
             children: [
-              U,
+              V,
               " / ",
-              b
+              N
             ]
           }
         )

package/dist/components/Input/Input.stories.d.ts

@@ -5,6 +5,7 @@ declare const meta: {
     component: import('react').ForwardRefExoticComponent<import('react').InputHTMLAttributes<HTMLInputElement> & {
         label?: string | undefined;
         infoMessage?: string | undefined;
+        error?: boolean | undefined;
         errorMessage?: string | undefined;
         leftIcon?: import('react').ReactNode;
         rightIcon?: import('react').ReactNode;

package/dist/components/InputSearch/InputSearch.stories.d.ts

@@ -7,6 +7,7 @@ declare const meta: {
     } & import('react').InputHTMLAttributes<HTMLInputElement> & {
         label?: string | undefined;
         infoMessage?: string | undefined;
+        error?: boolean | undefined;
         errorMessage?: string | undefined;
         leftIcon?: import('react').ReactNode;
         rightIcon?: import('react').ReactNode;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pismo/marola",
   "description": "CDX tribe component library",
-  "version": "1.0.0-beta.27",
+  "version": "1.0.0-beta.28",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -60,6 +60,7 @@
     "@types/react-dom": "^18.2.22",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
+    "@vitest/coverage-v8": "^1.4.0",
     "@vitejs/plugin-react": "^4.2.1",
     "clsx": "^2.1.0",
     "commitlint": "^19.2.1",