@pismo/marola 1.0.0-beta.0 → 1.0.0-beta.10

package/dist/components/Input/Input.js

@@ -1,502 +1,105 @@
-import '../../assets/Input.css';
-import { jsxs as q, jsx as B } from "react/jsx-runtime";
-import * as h from "react";
-import { useState as de, useId as ce } from "react";
-import { c as R } from "../../clsx-DB4S2d7J.js";
-import { Typography as L } from "../Typography/Typography.js";
-import { g as _e, a as he, u as me, f as z, b as m, _ as fe, c as Q, i as be, P as e, d as ye, e as ge } from "../../index-CH45lKw7.js";
-function ve(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.";
-}
-const X = /* @__PURE__ */ h.createContext(void 0);
-process.env.NODE_ENV !== "production" && (X.displayName = "FormControlContext");
-function Ce() {
-  return h.useContext(X);
-}
-const Z = "Input";
-function we(a) {
-  return _e(Z, a);
-}
-he(Z, ["root", "formControl", "focused", "disabled", "error", "multiline", "input", "inputMultiline", "inputTypeSearch", "adornedStart", "adornedEnd"]);
-function ke(a = {}) {
-  const {
-    defaultValue: l,
-    disabled: s = !1,
-    error: f = !1,
-    onBlur: i,
-    onChange: b,
-    onFocus: x,
-    required: N = !1,
-    value: g,
-    inputRef: V
-  } = a, o = Ce();
-  let P, _, v, C, y;
-  if (o) {
-    var F, p, I;
-    if (P = void 0, _ = (F = o.disabled) != null ? F : !1, v = (p = o.error) != null ? p : !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, v = f, C = N, y = g;
-  const {
-    current: U
-  } = h.useRef(y != null), M = h.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(`
-`));
-  }, []), w = h.useRef(null), O = me(w, V, M), [k, E] = h.useState(!1);
-  h.useEffect(() => {
-    !o && _ && k && (E(!1), i == null || i());
-  }, [o, _, k, i]);
-  const A = (t) => (r) => {
-    var n;
-    if (o != null && o.disabled) {
-      r.stopPropagation();
-      return;
-    }
-    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);
-  }, D = (t) => (r) => {
-    var n;
-    (n = t.onBlur) == null || n.call(t, r), o && o.onBlur ? o.onBlur() : E(!1);
-  }, T = (t) => (r, ...n) => {
-    var c, H;
-    if (!U && (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." : ve(17));
-    o == null || (c = o.onChange) == null || c.call(o, r), (H = t.onChange) == null || H.call(t, r, ...n);
-  }, j = (t) => (r) => {
-    var n;
-    w.current && r.currentTarget === r.target && w.current.focus(), (n = t.onClick) == null || n.call(t, r);
-  };
-  return {
-    disabled: _,
-    error: v,
-    focused: k,
-    formControlContext: o,
-    getInputProps: (t = {}) => {
-      const n = m({}, {
-        onBlur: i,
-        onChange: b,
-        onFocus: x
-      }, z(t)), c = m({}, n, {
-        onBlur: D(n),
-        onChange: T(n),
-        onFocus: A(n)
-      });
-      return m({}, c, {
-        "aria-invalid": v || void 0,
-        defaultValue: P,
-        value: y,
-        required: C,
-        disabled: _
-      }, t, {
-        ref: O
-      }, c);
-    },
-    getRootProps: (t = {}) => {
-      const r = z(a, ["onBlur", "onChange", "onFocus"]), n = m({}, r, z(t));
-      return m({}, t, n, {
-        onClick: j(n)
-      });
-    },
-    inputRef: O,
-    required: C,
-    value: y
-  };
-}
-const xe = ["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"], Ne = (a) => {
-  const {
-    disabled: l,
-    error: s,
-    focused: f,
-    formControlContext: i,
-    multiline: b,
-    startAdornment: x,
-    endAdornment: N
-  } = a;
-  return ye({
-    root: ["root", l && "disabled", s && "error", f && "focused", !!i && "formControl", b && "multiline", !!x && "adornedStart", !!N && "adornedEnd"],
-    input: ["input", l && "disabled", b && "multiline"]
-  }, ge(we));
-}, ee = /* @__PURE__ */ h.forwardRef(function(l, s) {
-  var f, i, b;
-  const {
-    "aria-describedby": x,
-    "aria-label": N,
-    "aria-labelledby": g,
-    autoComplete: V,
-    autoFocus: o,
-    className: P,
-    defaultValue: _,
-    disabled: v,
-    endAdornment: C,
-    error: y,
-    id: F,
-    multiline: p = !1,
-    name: I,
-    onClick: U,
-    onChange: M,
-    onKeyDown: w,
-    onKeyUp: O,
-    onFocus: k,
-    onBlur: E,
-    placeholder: A,
-    readOnly: D,
-    required: T,
-    startAdornment: j,
-    value: d,
-    type: S,
-    rows: t,
-    slotProps: r = {},
-    slots: n = {},
-    minRows: c,
-    maxRows: H
-  } = l, Y = fe(l, xe), {
-    getRootProps: te,
-    getInputProps: oe,
-    focused: ne,
-    formControlContext: re,
-    error: ae,
-    disabled: se
-  } = ke({
-    disabled: v,
-    defaultValue: _,
-    error: y,
-    onBlur: E,
-    onClick: U,
-    onChange: M,
-    onFocus: k,
-    required: T,
-    value: d
-  }), W = p ? void 0 : S ?? "text", $ = m({}, l, {
-    disabled: se,
-    error: ae,
-    focused: ne,
-    formControlContext: re,
-    multiline: p,
-    type: W
-  }), G = Ne($), le = {
-    "aria-describedby": x,
-    "aria-label": N,
-    "aria-labelledby": g,
-    autoComplete: V,
-    autoFocus: o,
-    id: F,
-    onKeyDown: w,
-    onKeyUp: O,
-    name: I,
-    placeholder: A,
-    readOnly: D,
-    type: W
-  }, J = (f = n.root) != null ? f : "div", ue = Q({
-    elementType: J,
-    getSlotProps: te,
-    externalSlotProps: r.root,
-    externalForwardedProps: Y,
-    additionalProps: {
-      ref: s
-    },
-    ownerState: $,
-    className: [G.root, P]
-  }), K = p ? (i = n.textarea) != null ? i : "textarea" : (b = n.input) != null ? b : "input", ie = Q({
-    elementType: K,
-    getSlotProps: (pe) => oe(m({}, le, pe)),
-    externalSlotProps: r.input,
-    additionalProps: m({
-      rows: p ? t : void 0
-    }, p && !be(K) && {
-      minRows: t || c,
-      maxRows: t || H
-    }),
-    ownerState: $,
-    className: G.input
-  });
-  return process.env.NODE_ENV !== "production" && p && t && (c || H) && console.warn("MUI: You can not use the `minRows` or `maxRows` props when the input `rows` prop is set."), /* @__PURE__ */ q(J, m({}, ue, {
-    children: [j, /* @__PURE__ */ B(K, m({}, ie)), C]
-  }));
-});
-process.env.NODE_ENV !== "production" && (ee.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * @ignore
-   */
-  "aria-describedby": e.string,
-  /**
-   * @ignore
-   */
-  "aria-label": e.string,
-  /**
-   * @ignore
-   */
-  "aria-labelledby": e.string,
-  /**
-   * This prop helps users to fill forms faster, especially on mobile devices.
-   * The name can be confusing, as it's more like an autofill.
-   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
-   */
-  autoComplete: e.string,
-  /**
-   * If `true`, the `input` element is focused during the first mount.
-   */
-  autoFocus: e.bool,
-  /**
-   * Class name applied to the root element.
-   */
-  className: e.string,
-  /**
-   * The default value. Use when the component is not controlled.
-   */
-  defaultValue: e.any,
-  /**
-   * If `true`, the component is disabled.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
-   */
-  disabled: e.bool,
-  /**
-   * Trailing adornment for this input.
-   */
-  endAdornment: e.node,
-  /**
-   * If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute on the input and the `baseui--error` class on the root element.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
-   */
-  error: e.bool,
-  /**
-   * The id of the `input` element.
-   */
-  id: e.string,
-  /**
-   * @ignore
-   */
-  inputRef: e.oneOfType([e.func, e.shape({
-    current: e.object
-  })]),
-  /**
-   * Maximum number of rows to display when multiline option is set to true.
-   */
-  maxRows: e.number,
-  /**
-   * Minimum number of rows to display when multiline option is set to true.
-   */
-  minRows: e.number,
-  /**
-   * If `true`, a `textarea` element is rendered.
-   * @default false
-   */
-  multiline: e.bool,
-  /**
-   * Name attribute of the `input` element.
-   */
-  name: e.string,
-  /**
-   * @ignore
-   */
-  onBlur: e.func,
-  /**
-   * @ignore
-   */
-  onChange: e.func,
-  /**
-   * @ignore
-   */
-  onClick: e.func,
-  /**
-   * @ignore
-   */
-  onFocus: e.func,
-  /**
-   * @ignore
-   */
-  onKeyDown: e.func,
-  /**
-   * @ignore
-   */
-  onKeyUp: e.func,
-  /**
-   * The short hint displayed in the `input` before the user enters a value.
-   */
-  placeholder: e.string,
-  /**
-   * It prevents the user from changing the value of the field
-   * (not from interacting with the field).
-   */
-  readOnly: e.bool,
-  /**
-   * If `true`, the `input` element is required.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
-   */
-  required: e.bool,
-  /**
-   * Number of rows to display when multiline option is set to true.
-   */
-  rows: e.number,
-  /**
-   * The props used for each slot inside the Input.
-   * @default {}
-   */
-  slotProps: e.shape({
-    input: e.oneOfType([e.func, e.object]),
-    root: e.oneOfType([e.func, e.object])
-  }),
-  /**
-   * The components used for each slot inside the InputBase.
-   * Either a string to use a HTML element or a component.
-   * @default {}
-   */
-  slots: e.shape({
-    input: e.elementType,
-    root: e.elementType,
-    textarea: e.elementType
-  }),
-  /**
-   * Leading adornment for this input.
-   */
-  startAdornment: e.node,
-  /**
-   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).
-   * @default 'text'
-   */
-  type: e.oneOf(["button", "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "image", "month", "number", "password", "radio", "range", "reset", "search", "submit", "tel", "text", "time", "url", "week"]),
-  /**
-   * The value of the `input` element, required for a controlled component.
-   */
-  value: e.any
-});
-const Pe = (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: {
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import * as g from "react";
+import { useState as V, useId as k } from "react";
+import { c as a } from "../../clsx-DB4S2d7J.js";
+import { Typography as c } from "../Typography/Typography.js";
+import { s as t, I as q } from "../../Input.module-ZTRZRcNt.js";
+const D = (s) => /* @__PURE__ */ g.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" })), Ee = "_input__label_19vkb_77", Re = "_input_19vkb_56", u = {
-  "u-typography-h1": "_u-typography-h1_19vkb_1",
-  "u-typography-h2": "_u-typography-h2_19vkb_8",
-  "u-typography-h3": "_u-typography-h3_19vkb_15",
-  "u-typography-h4": "_u-typography-h4_19vkb_22",
-  "u-typography-h5": "_u-typography-h5_19vkb_29",
-  "u-typography-h6": "_u-typography-h6_19vkb_36",
-  "u-typography-base": "_u-typography-base_19vkb_43",
-  "u-typography-base--xxl": "_u-typography-base--xxl_19vkb_48",
-  "u-typography-base--xl": "_u-typography-base--xl_19vkb_52",
-  "u-typography-base--lg": "_u-typography-base--lg_19vkb_56",
-  "input__input-el": "_input__input-el_19vkb_56",
-  "u-typography-base--sm": "_u-typography-base--sm_19vkb_60",
-  "u-typography-base--bold": "_u-typography-base--bold_19vkb_64",
-  "u-typography-base--strikethrough": "_u-typography-base--strikethrough_19vkb_67",
-  "u-typography-base--underlined": "_u-typography-base--underlined_19vkb_70",
-  "u-typography-base--strikethrough-underlined": "_u-typography-base--strikethrough-underlined_19vkb_73",
-  input__label: Ee,
-  "input__input-el-wrapper": "_input__input-el-wrapper_19vkb_82",
-  "input__left-icon": "_input__left-icon_19vkb_100",
-  "input__right-icon": "_input__right-icon_19vkb_100",
-  "input__messages-wrapper": "_input__messages-wrapper_19vkb_112",
-  "input__info-message": "_input__info-message_19vkb_120",
-  "input__error-message": "_input__error-message_19vkb_120",
-  "input__chars-counter": "_input__chars-counter_19vkb_131",
-  "input--disabled": "_input--disabled_19vkb_135",
-  input: Re,
-  "input--focused": "_input--focused_19vkb_141",
-  "input--error": "_input--error_19vkb_144"
-}, Be = ({
-  label: a,
-  infoMessage: l,
-  errorMessage: s,
-  leftIcon: f,
-  rightIcon: i,
-  id: b,
-  disabled: x,
+}, ...s }, /* @__PURE__ */ g.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" })), M = ({
+  label: s,
+  infoMessage: d,
+  errorMessage: i,
+  leftIcon: o,
+  rightIcon: p,
+  id: w,
+  disabled: C,
   type: N = "text",
-  maxLength: g,
-  hideCharsCounter: V = !1,
-  onChange: o,
-  classNameWrapper: P,
-  classNameLabel: _,
-  classNameInput: v,
-  classNameInfoMessage: C,
-  classNameErrorMessage: y,
-  classNameCharsCounter: F,
-  "data-testid-wrapper": p,
-  "data-testid-label": I,
-  "data-testid-input": U,
-  "data-testid-infoMessage": M,
-  "data-testid-errorMessage": w,
-  "data-testid-charsCounter": O,
-  ...k
+  maxLength: l,
+  hideCharsCounter: x = !1,
+  onChange: m,
+  classNameWrapper: b,
+  classNameLabel: v,
+  classNameInput: y,
+  classNameInfoMessage: I,
+  classNameErrorMessage: j,
+  classNameCharsCounter: z,
+  "data-testid-wrapper": E,
+  "data-testid-label": A,
+  "data-testid-input": P,
+  "data-testid-infoMessage": S,
+  "data-testid-errorMessage": $,
+  "data-testid-charsCounter": B,
+  ...u
 }) => {
-  const [E, A] = de(0), D = ce(), T = b || `input_${D}`;
-  Object.assign(k, { "data-testid": U });
-  const j = (d) => {
-    var S, t;
-    A((t = (S = d == null ? void 0 : d.target) == null ? void 0 : S.value) == null ? void 0 : t.length), o && o(d);
+  const [F, O] = V(0), R = k(), h = w || `input_${R}`;
+  Object.assign(u, { "data-testid": P });
+  const T = (e) => {
+    var _, f;
+    O((f = (_ = e == null ? void 0 : e.target) == null ? void 0 : _.value) == null ? void 0 : f.length), m && m(e);
   };
-  return /* @__PURE__ */ q("div", { className: R(u.input, P), "data-testid": p, children: [
-    a && /* @__PURE__ */ B(
-      L,
+  return /* @__PURE__ */ n("div", { className: a(t.input, b), "data-testid": E, children: [
+    s && /* @__PURE__ */ r(
+      c,
       {
         element: "label",
-        elementProps: { htmlFor: T },
-        className: R(u.input__label, _),
-        "data-testid": I,
-        children: a
+        elementProps: { htmlFor: h },
+        className: a(t.input__label, v),
+        "data-testid": A,
+        children: s
       }
     ),
-    /* @__PURE__ */ B(
-      ee,
+    /* @__PURE__ */ r(
+      q,
       {
-        id: T,
+        id: h,
         type: N,
-        disabled: x,
-        error: !!s,
-        "aria-label": a,
+        disabled: C,
+        error: !!i,
+        "aria-label": s,
         slotProps: {
-          root: (d) => ({
-            className: R(u["input__input-el-wrapper"], {
-              [u["input--disabled"]]: d.disabled,
-              [u["input--focused"]]: d.focused,
-              [u["input--error"]]: d.error
+          root: (e) => ({
+            className: a(t["input__input-el-wrapper"], {
+              [t["input--disabled"]]: e.disabled,
+              [t["input--focused"]]: e.focused,
+              [t["input--error"]]: e.error
             })
           }),
           input: {
-            className: R(u["input__input-el"], v),
-            maxLength: g,
-            onChange: j,
-            ...k
+            className: a(t["input__input-el"], y),
+            maxLength: l,
+            onChange: T,
+            ...u
           }
         },
-        startAdornment: f && /* @__PURE__ */ B("span", { className: u["input__left-icon"], children: f }),
-        endAdornment: i && /* @__PURE__ */ B("span", { className: u["input__right-icon"], children: i })
+        startAdornment: o && /* @__PURE__ */ r("span", { className: t["input__left-icon"], children: o }),
+        endAdornment: p && /* @__PURE__ */ r("span", { className: t["input__right-icon"], children: p })
       }
     ),
-    /* @__PURE__ */ q("div", { className: u["input__messages-wrapper"], children: [
-      (s || l) && /* @__PURE__ */ q(
-        L,
+    /* @__PURE__ */ n("div", { className: t["input__messages-wrapper"], children: [
+      (i || d) && /* @__PURE__ */ n(
+        c,
         {
-          className: s ? R(u["input__error-message"], y) : R(u["input__info-message"], C),
-          "data-testid": s ? w : M,
+          className: i ? a(t["input__error-message"], j) : a(t["input__info-message"], I),
+          "data-testid": i ? $ : S,
           children: [
-            /* @__PURE__ */ B(Pe, {}),
-            s || l
+            /* @__PURE__ */ r(D, {}),
+            i || d
           ]
         }
       ),
-      g && !V && /* @__PURE__ */ q(
-        L,
+      l && !x && /* @__PURE__ */ n(
+        c,
         {
-          className: R(u["input__chars-counter"], F),
-          "data-testid": O,
+          className: a(t["input__chars-counter"], z),
+          "data-testid": B,
           children: [
-            E,
+            F,
             " / ",
-            g
+            l
           ]
         }
       )
@@ -504,5 +107,5 @@ const Pe = (a) => /* @__PURE__ */ h.createElement("svg", { xmlns: "http://www.w3
   ] });
 };
 export {
-  Be as Input
+  M as Input
 };

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

@@ -8,7 +8,7 @@ declare const meta: {
         errorMessage?: string | undefined;
         leftIcon?: import('react').ReactNode;
         rightIcon?: import('react').ReactNode;
-        type?: "search" | "text" | "password" | undefined;
+        type?: ("number" | "url" | "file" | "color" | "search" | (string & {}) | "button" | "time" | "image" | "text" | "reset" | "tel" | "email" | "date" | "hidden" | "range" | "password" | "datetime-local" | "month" | "week") | undefined;
         hideCharsCounter?: boolean | undefined;
         classNameWrapper?: string | undefined;
         classNameLabel?: string | undefined;

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

@@ -10,7 +10,7 @@ declare const meta: {
         errorMessage?: string | undefined;
         leftIcon?: import('react').ReactNode;
         rightIcon?: import('react').ReactNode;
-        type?: "search" | "text" | "password" | undefined;
+        type?: ("number" | "url" | "file" | "color" | "search" | (string & {}) | "button" | "time" | "image" | "text" | "reset" | "tel" | "email" | "date" | "hidden" | "range" | "password" | "datetime-local" | "month" | "week") | undefined;
         hideCharsCounter?: boolean | undefined;
         classNameWrapper?: string | undefined;
         classNameLabel?: string | undefined;