@prokodo/ui 0.0.26 → 0.0.28

package/dist/components/image/Image.module.scss.js

@@ -1,11 +1,13 @@
-const e = "gradientMove", o = "fadeInKeyframe", a = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Image": "prokodo-Image",
   "prokodo-Image__caption": "prokodo-Image__caption",
-  gradientMove: e,
-  fadeInKeyframe: o
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  a as default,
-  o as fadeInKeyframe,
-  e as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/image/index.js

@@ -1,4 +1,4 @@
-import { Image as o } from "./Image.js";
+import { Image } from "./Image.js";
 export {
-  o as Image
+  Image
 };

package/dist/components/image-text/ImageText.js

@@ -1,99 +1,98 @@
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { useState as d } from "react";
-import { create as v } from "../../helpers/bem.js";
-import { isString as y } from "../../helpers/validations.js";
-import I from "./ImageText.module.scss.js";
-import { RichText as j } from "../rich-text/RichText.js";
-import { Grid as w } from "../grid/Grid.js";
-import { GridRow as o } from "../grid/GridRow.js";
-import { Animated as n } from "../animated/Animated.js";
-import { Headline as N } from "../headline/Headline.js";
-import { Button as z } from "../button/Button.js";
-import { Lottie as A } from "../lottie/Lottie.js";
-import { Image as G } from "../image/Image.js";
-const s = v(I, "ImageText"), J = ({
-  animatedBorder: a,
-  reverse: f,
-  subTitle: c,
-  title: e,
-  content: l,
-  animation: p,
-  image: i,
-  button: r
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./ImageText.module.scss.js";
+import { RichText } from "../rich-text/RichText.js";
+import { Button } from "../button/Button.js";
+import { Grid } from "../grid/Grid.js";
+import { GridRow } from "../grid/GridRow.js";
+import { Animated } from "../animated/Animated.js";
+import { Headline } from "../headline/Headline.server.js";
+import { Lottie } from "../lottie/Lottie.js";
+import { Image } from "../image/Image.js";
+const bem = create(styles, "ImageText");
+const ImageText = /* @__PURE__ */ __name(({
+  animatedBorder,
+  reverse,
+  subTitle,
+  title,
+  content,
+  animation,
+  image,
+  button
 }) => {
-  const [t, _] = d(!1), g = i ? a ? 4 : 6 : a ? 10 : 12;
-  return /* @__PURE__ */ m("div", { className: s(), children: /* @__PURE__ */ h(
-    w,
+  const [lineVisible, setLineVisible] = useState(false);
+  const leftColumnMd = image ? animatedBorder ? 4 : 6 : animatedBorder ? 10 : 12;
+  return /* @__PURE__ */ jsx("div", { className: bem(), children: /* @__PURE__ */ jsxs(
+    Grid,
     {
-      className: s("grid", {
-        "is-reverse": !!f
+      className: bem("grid", {
+        "is-reverse": Boolean(reverse)
       }),
       children: [
-        a && /* @__PURE__ */ m(o, { className: s("animated__border__wrapper"), sm: 2, xs: 3, children: /* @__PURE__ */ m(
-          n,
+        animatedBorder && /* @__PURE__ */ jsx(GridRow, { className: bem("animated__border__wrapper"), sm: 2, xs: 3, children: /* @__PURE__ */ jsx(
+          Animated,
           {
-            className: s("animated__border", {
-              "is-visible": t,
-              [`${(a == null ? void 0 : a.direction) ?? "top-to-bottom"}`]: !!(a != null && a.direction)
+            className: bem("animated__border", {
+              "is-visible": lineVisible,
+              [`${(animatedBorder == null ? void 0 : animatedBorder.direction) ?? "top-to-bottom"}`]: !!(animatedBorder == null ? void 0 : animatedBorder.direction)
             }),
-            onAnimate: (x) => _(x)
+            onAnimate: /* @__PURE__ */ __name((visible) => setLineVisible(visible), "onAnimate")
           }
         ) }),
-        /* @__PURE__ */ m(o, { className: s("content"), md: g, xs: 10, children: /* @__PURE__ */ h(
-          n,
+        /* @__PURE__ */ jsx(GridRow, { className: bem("content"), md: leftColumnMd, xs: 10, children: /* @__PURE__ */ jsxs(Animated, { children: [
+          subTitle && /* @__PURE__ */ jsx(
+            Headline,
+            {
+              highlight: true,
+              className: bem("sub__headline", void 0, subTitle == null ? void 0 : subTitle.className),
+              size: "sm",
+              type: "h3",
+              variant: "primary",
+              ...subTitle,
+              children: subTitle == null ? void 0 : subTitle.content
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Headline,
+            {
+              className: bem("headline", void 0, title == null ? void 0 : title.className),
+              size: "lg",
+              type: "h2",
+              ...title,
+              children: title.content
+            }
+          ),
+          isString(content) && /* @__PURE__ */ jsx(RichText, { className: bem("content__paragraph"), children: content }),
+          button && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outlined",
+              ...button,
+              className: bem("button", void 0, button == null ? void 0 : button.className)
+            }
+          )
+        ] }) }),
+        image && /* @__PURE__ */ jsx(GridRow, { className: bem("image"), md: 6, xs: 10, children: /* @__PURE__ */ jsx(
+          Animated,
           {
-            children: [
-              c && /* @__PURE__ */ m(
-                N,
-                {
-                  highlight: !0,
-                  className: s("sub__headline", void 0, c == null ? void 0 : c.className),
-                  size: "sm",
-                  type: "h3",
-                  variant: "primary",
-                  ...c,
-                  children: c == null ? void 0 : c.content
-                }
-              ),
-              /* @__PURE__ */ m(
-                N,
-                {
-                  className: s("headline", void 0, e == null ? void 0 : e.className),
-                  size: "lg",
-                  type: "h2",
-                  ...e,
-                  children: e.content
-                }
-              ),
-              y(l) && /* @__PURE__ */ m(j, { className: s("content__paragraph"), children: l }),
-              r && /* @__PURE__ */ m(
-                z,
-                {
-                  variant: "outlined",
-                  ...r,
-                  className: s("button", void 0, r == null ? void 0 : r.className)
-                }
-              )
-            ]
-          }
-        ) }),
-        i && /* @__PURE__ */ m(o, { className: s("image"), md: 6, xs: 10, children: /* @__PURE__ */ m(
-          n,
-          {
-            className: s("animated__container"),
-            children: p ? /* @__PURE__ */ m(
-              A,
+            className: bem("animated__container"),
+            children: animation ? /* @__PURE__ */ jsx(
+              Lottie,
               {
-                animationName: p,
-                className: s("animation")
+                animationName: animation,
+                className: bem("animation")
               }
-            ) : /* @__PURE__ */ m(G, { className: s("image__src"), ...i })
+            ) : /* @__PURE__ */ jsx(Image, { className: bem("image__src"), ...image })
           }
         ) })
       ]
     }
   ) });
-};
+}, "ImageText");
 export {
-  J as ImageText
+  ImageText
 };

package/dist/components/image-text/ImageText.module.scss.js

@@ -1,4 +1,6 @@
-const e = "gradientMove", o = "fadeInKeyframe", _ = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-ImageText__grid": "prokodo-ImageText__grid",
   "prokodo-ImageText__grid--is-reverse": "prokodo-ImageText__grid--is-reverse",
   "prokodo-ImageText__animated__border": "prokodo-ImageText__animated__border",
@@ -12,11 +14,11 @@ const e = "gradientMove", o = "fadeInKeyframe", _ = {
   "prokodo-ImageText__animation": "prokodo-ImageText__animation",
   "prokodo-ImageText__image": "prokodo-ImageText__image",
   "prokodo-ImageText__image__src": "prokodo-ImageText__image__src",
-  gradientMove: e,
-  fadeInKeyframe: o
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  _ as default,
-  o as fadeInKeyframe,
-  e as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/image-text/index.js

@@ -1,4 +1,4 @@
-import { ImageText as o } from "./ImageText.js";
+import { ImageText } from "./ImageText.js";
 export {
-  o as ImageText
+  ImageText
 };

package/dist/components/input/Input.js

@@ -1,54 +1,60 @@
-import { jsxs as d, jsx as l } from "react/jsx-runtime";
-import { Input as L } from "@mui/base";
-import { memo as P, useState as x, useEffect as ee, useCallback as re } from "react";
-import { create as ie } from "../../helpers/bem.js";
-import { isNull as se, isString as v } from "../../helpers/validations.js";
-import te from "./Input.module.scss.js";
-import { handleValidation as oe } from "./InputValidation.js";
-import { Label as ae } from "../label/Label.js";
-const e = ie(te, "Input"), le = P(
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Input as Input$1 } from "@mui/base";
+import { memo, useState, useEffect, useCallback } from "react";
+import { create } from "../../helpers/bem.js";
+import { isNull, isString } from "../../helpers/validations.js";
+import styles from "./Input.module.scss.js";
+import { handleValidation } from "./InputValidation.js";
+import { Label } from "../label/Label.js";
+const bem = create(styles, "Input");
+const Input = memo(
   ({
-    fullWidth: V,
-    inputRef: W,
-    hideCounter: _,
-    type: t,
-    color: f = "primary",
-    value: o,
-    name: i,
-    min: z,
-    max: n,
-    multiline: c,
-    maxRows: A,
-    minRows: C,
-    rows: D,
-    disabled: F,
-    maxLength: m,
-    placeholder: I,
-    label: $,
-    customRegexPattern: G,
-    errorTranslations: H,
-    labelProps: u = {},
-    className: J,
-    fieldClassName: K,
-    inputContainerClassName: M,
-    inputClassName: O,
-    required: R,
-    hideLegend: Q,
-    errorText: p,
-    helperText: h,
-    onFocus: N,
-    onBlur: g,
-    onChange: S,
-    onValidate: T,
-    ...U
+    fullWidth,
+    inputRef,
+    hideCounter,
+    type,
+    color = "primary",
+    value,
+    name,
+    min,
+    max,
+    multiline,
+    maxRows,
+    minRows,
+    rows,
+    disabled,
+    maxLength,
+    placeholder,
+    label,
+    customRegexPattern,
+    errorTranslations,
+    labelProps = {},
+    className,
+    fieldClassName,
+    inputContainerClassName,
+    inputClassName,
+    required,
+    hideLegend,
+    errorText,
+    helperText,
+    onFocus,
+    onBlur,
+    onChange,
+    onValidate,
+    ...props
   }) => {
-    var j, E;
-    const [a, q] = x(o), [X, B] = x(!1);
-    ee(() => {
-      se(o) || q(o);
-    }, [o]);
-    const Y = re(() => {
-      switch (t) {
+    var _a, _b;
+    const [Value, setValue] = useState(value);
+    const [focused, setFocused] = useState(false);
+    useEffect(() => {
+      if (!isNull(value)) {
+        setValue(value);
+      }
+    }, [value]);
+    const renderPlaceholder = useCallback(() => {
+      switch (type) {
         case "url":
           return "www.example.com";
         case "email":
@@ -58,132 +64,142 @@ const e = ie(te, "Input"), le = P(
         case "color":
           return "#FFFFFF";
         default:
-          return I;
+          return placeholder;
       }
-    }, [t, I]), s = v(p), w = R === !0, Z = c ? {
-      multiline: c,
-      maxRows: A,
-      minRows: C ?? 3,
-      rows: D
+    }, [type, placeholder]);
+    const isError = isString(errorText);
+    const isRequired = required === true;
+    const inputProps = Boolean(multiline) ? {
+      multiline,
+      maxRows,
+      minRows: minRows ?? 3,
+      rows
     } : {
-      multiline: !1,
+      multiline: false,
       maxRows: void 0,
       minRows: void 0,
-      type: t
+      type
     };
-    return /* @__PURE__ */ d("div", { className: e(void 0, { [f]: !!f }, J), children: [
-      v($) && /* @__PURE__ */ l(
-        ae,
+    return /* @__PURE__ */ jsxs("div", { className: bem(void 0, { [color]: !!color }, className), children: [
+      isString(label) && /* @__PURE__ */ jsx(
+        Label,
         {
-          ...u,
-          className: e("label", void 0, u == null ? void 0 : u.className),
-          error: s,
-          htmlFor: i,
-          label: $,
-          required: w
+          ...labelProps,
+          className: bem("label", void 0, labelProps == null ? void 0 : labelProps.className),
+          error: isError,
+          htmlFor: name,
+          label,
+          required: isRequired
         }
       ),
-      /* @__PURE__ */ l("div", { className: e("field", void 0, K), children: /* @__PURE__ */ l(
-        L,
+      /* @__PURE__ */ jsx("div", { className: bem("field", void 0, fieldClassName), children: /* @__PURE__ */ jsx(
+        Input$1,
         {
-          "aria-required": w ? "true" : void 0,
-          color: f,
-          id: i,
-          ...U,
-          ...Z,
-          "aria-invalid": s,
-          disabled: F,
-          error: s,
-          name: i,
-          placeholder: Y(),
-          required: w,
-          value: a ?? "",
-          "aria-describedby": s ? `${i}-error` : v(h) ? `${i}-helper` : void 0,
-          className: e(
+          "aria-required": isRequired ? "true" : void 0,
+          color,
+          id: name,
+          ...props,
+          ...inputProps,
+          "aria-invalid": isError,
+          disabled,
+          error: isError,
+          name,
+          placeholder: renderPlaceholder(),
+          required: isRequired,
+          value: Value ?? "",
+          "aria-describedby": isError ? `${name}-error` : isString(helperText) ? `${name}-helper` : void 0,
+          className: bem(
             "input",
             {
-              focused: X,
-              multiline: !!c,
-              disabled: !!F,
-              fullWidth: !!V
+              focused,
+              multiline: Boolean(multiline),
+              disabled: Boolean(disabled),
+              fullWidth: Boolean(fullWidth)
             },
-            M
+            inputContainerClassName
           ),
           slotProps: {
             input: {
-              ref: W,
-              className: e(
+              ref: inputRef,
+              className: bem(
                 "input__node",
                 {
-                  multiline: !!c
+                  multiline: Boolean(multiline)
                 },
-                O
+                inputClassName
               )
             }
           },
-          onBlur: (r) => {
-            g == null || g(r), B(!1);
-          },
-          onChange: (r) => {
-            var b, k;
-            const { value: y } = r.target;
-            m !== void 0 && y.length > m || (q(r.target.value), (k = oe) == null || k(
-              t === void 0 ? "text" : t,
-              i,
-              (b = r == null ? void 0 : r.target) == null ? void 0 : b.value,
-              R,
-              z,
-              n,
-              G,
-              H,
-              T
-            ), S && S(r));
-          },
-          onFocus: (r) => {
-            N == null || N(r), B(!0);
-          }
+          onBlur: /* @__PURE__ */ __name((e) => {
+            onBlur == null ? void 0 : onBlur(e);
+            setFocused(false);
+          }, "onBlur"),
+          onChange: /* @__PURE__ */ __name((e) => {
+            var _a2, _b2;
+            const { value: value2 } = e.target;
+            if (maxLength !== void 0 && value2.length > maxLength) return;
+            setValue(e.target.value);
+            (_b2 = handleValidation) == null ? void 0 : _b2(
+              type === void 0 ? "text" : type,
+              name,
+              (_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value,
+              required,
+              min,
+              max,
+              customRegexPattern,
+              errorTranslations,
+              onValidate
+            );
+            if (onChange) {
+              onChange(e);
+            }
+          }, "onChange"),
+          onFocus: /* @__PURE__ */ __name((e) => {
+            onFocus == null ? void 0 : onFocus(e);
+            setFocused(true);
+          }, "onFocus")
         }
       ) }),
-      /* @__PURE__ */ d("div", { className: e("footer"), children: [
-        s || v(h) || n !== void 0 && a !== void 0 ? /* @__PURE__ */ d(
+      /* @__PURE__ */ jsxs("div", { className: bem("footer"), children: [
+        isError || isString(helperText) || max !== void 0 && Value !== void 0 ? /* @__PURE__ */ jsxs(
           "div",
           {
-            "aria-live": s ? "assertive" : "polite",
-            className: e("helperText"),
-            id: s ? `${i}-error` : `${i}-helper`,
-            role: s ? "alert" : void 0,
+            "aria-live": isError ? "assertive" : "polite",
+            className: bem("helperText"),
+            id: isError ? `${name}-error` : `${name}-helper`,
+            role: isError ? "alert" : void 0,
             children: [
-              /* @__PURE__ */ l(
+              /* @__PURE__ */ jsx(
                 "span",
                 {
                   role: "alert",
-                  className: e("helperText__content", {
-                    "is-error": !!p
+                  className: bem("helperText__content", {
+                    "is-error": Boolean(errorText)
                   }),
-                  children: p ?? h
+                  children: errorText ?? helperText
                 }
               ),
-              n !== void 0 && a !== void 0 && Q === !1 && /* @__PURE__ */ d("span", { className: e("helperText__legend"), children: [
-                ((j = a == null ? void 0 : a.toString()) == null ? void 0 : j.length) ?? 0,
+              max !== void 0 && Value !== void 0 && hideLegend === false && /* @__PURE__ */ jsxs("span", { className: bem("helperText__legend"), children: [
+                ((_a = Value == null ? void 0 : Value.toString()) == null ? void 0 : _a.length) ?? 0,
                 " / ",
-                n
+                max
               ] })
             ]
           }
-        ) : /* @__PURE__ */ l("div", { className: e("helperText") }),
-        m !== void 0 && t !== "number" && (_ === void 0 || _ === !1) && /* @__PURE__ */ l("div", { className: e("counter"), children: /* @__PURE__ */ d("span", { children: [
+        ) : /* @__PURE__ */ jsx("div", { className: bem("helperText") }),
+        maxLength !== void 0 && type !== "number" && (hideCounter === void 0 || hideCounter === false) && /* @__PURE__ */ jsx("div", { className: bem("counter"), children: /* @__PURE__ */ jsxs("span", { children: [
           "(",
-          o !== void 0 ? ((E = String(o)) == null ? void 0 : E.length) ?? 0 : 0,
+          value !== void 0 ? ((_b = String(value)) == null ? void 0 : _b.length) ?? 0 : 0,
           " /",
           " ",
-          m,
+          maxLength,
           ")"
         ] }) })
       ] })
     ] });
   }
 );
-le.displayName = "Input";
+Input.displayName = "Input";
 export {
-  le as Input
+  Input
 };

package/dist/components/input/Input.module.scss.js

@@ -1,8 +1,11 @@
-const o = "Input__field", p = "gradientMove", _ = "fadeInKeyframe", t = {
+const Input__field = "Input__field";
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Input": "prokodo-Input",
   "prokodo-Input__label": "prokodo-Input__label",
   "prokodo-Input--primary": "prokodo-Input--primary",
-  Input__field: o,
+  Input__field,
   "prokodo-Input--secondary": "prokodo-Input--secondary",
   "prokodo-Input--error": "prokodo-Input--error",
   "prokodo-Input__field": "prokodo-Input__field",
@@ -19,12 +22,12 @@ const o = "Input__field", p = "gradientMove", _ = "fadeInKeyframe", t = {
   "prokodo-Input__helperText__content--is-error": "prokodo-Input__helperText__content--is-error",
   "prokodo-Input__helperText__legend": "prokodo-Input__helperText__legend",
   "prokodo-Input__counter": "prokodo-Input__counter",
-  gradientMove: p,
-  fadeInKeyframe: _
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  o as Input__field,
-  t as default,
-  _ as fadeInKeyframe,
-  p as gradientMove
+  Input__field,
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };