@prokodo/ui 0.0.26 → 0.0.28

package/dist/components/list/List.js

@@ -1,97 +1,106 @@
-import { jsx as l, jsxs as f } from "react/jsx-runtime";
-import { memo as j, useMemo as D, useCallback as o, Fragment as x } from "react";
-import { create as P } from "../../helpers/bem.js";
-import { isString as z } from "../../helpers/validations.js";
-import E from "./List.module.scss.js";
-import { Card as F } from "../card/Card.js";
-import { Link as K } from "../link/Link.js";
-import { Icon as I } from "../icon/Icon.js";
-const n = P(E, "List"), M = j(
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useCallback, Fragment } from "react";
+import { create } from "../../helpers/bem.js";
+import { isString } from "../../helpers/validations.js";
+import styles from "./List.module.scss.js";
+import { Card } from "../card/Card.js";
+import { Link } from "../link/Link.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "List");
+const List = memo(
   ({
-    type: a,
-    variant: _ = "inherit",
-    className: L,
-    options: d = {},
-    items: w,
-    classNameDesc: h,
-    ...g
+    type,
+    variant = "inherit",
+    className,
+    options = {},
+    items,
+    classNameDesc,
+    ...props
   }) => {
-    const u = D(
+    const modifier = useMemo(
       () => ({
-        [`${a}`]: !!a
+        [`${type}`]: !!type
       }),
-      [a]
-    ), v = o(
-      (r, c) => /* @__PURE__ */ l(
+      [type]
+    );
+    const renderTitle = useCallback(
+      (title, item) => /* @__PURE__ */ jsx(
         "span",
         {
-          className: n("item__title", {
-            "is-clickable": !!(c != null && c.onClick),
-            ...u
+          className: bem("item__title", {
+            "is-clickable": !!(item == null ? void 0 : item.onClick),
+            ...modifier
           }),
-          children: r
+          children: title
         }
       ),
-      [u]
-    ), C = o(
-      (r, c) => /* @__PURE__ */ l(
-        K,
+      [modifier]
+    );
+    const renderLink = useCallback(
+      (props2, children) => /* @__PURE__ */ jsx(
+        Link,
         {
-          className: n("item__link", void 0, r == null ? void 0 : r.className),
-          variant: _,
-          ...r,
-          children: c
+          className: bem("item__link", void 0, props2 == null ? void 0 : props2.className),
+          variant,
+          ...props2,
+          children
         }
       ),
-      [_]
-    ), k = o(
-      (r) => r ? /* @__PURE__ */ l("div", { className: n("item__icon__wrapper"), children: /* @__PURE__ */ l(I, { color: _, name: r, ...d == null ? void 0 : d.icon }) }) : null,
-      [_, d == null ? void 0 : d.icon]
-    ), N = o(
-      (r) => z(r) && /* @__PURE__ */ l("p", { className: n("item__desc", void 0, h), children: r }),
-      [h]
-    ), e = o(
-      (r) => {
-        var s;
-        const c = r == null ? void 0 : r.icon;
-        return /* @__PURE__ */ l(
-          F,
+      [variant]
+    );
+    const renderIcon = useCallback(
+      (name) => {
+        if (!name) return null;
+        return /* @__PURE__ */ jsx("div", { className: bem("item__icon__wrapper"), children: /* @__PURE__ */ jsx(Icon, { color: variant, name, ...options == null ? void 0 : options.icon }) });
+      },
+      [variant, options == null ? void 0 : options.icon]
+    );
+    const renderDesc = useCallback(
+      (desc) => isString(desc) && /* @__PURE__ */ jsx("p", { className: bem("item__desc", void 0, classNameDesc), children: desc }),
+      [classNameDesc]
+    );
+    const renderCardItem = useCallback(
+      (item) => {
+        var _a;
+        const icon = item == null ? void 0 : item.icon;
+        return /* @__PURE__ */ jsx(
+          Card,
           {
             variant: "white",
-            ...r,
-            className: n("item__card", void 0, r == null ? void 0 : r.className),
-            contentClassName: n(
+            ...item,
+            className: bem("item__card", void 0, item == null ? void 0 : item.className),
+            contentClassName: bem(
               "item__card__content",
               void 0,
-              r == null ? void 0 : r.contentClassName
+              item == null ? void 0 : item.contentClassName
             ),
-            children: /* @__PURE__ */ f(
+            children: /* @__PURE__ */ jsxs(
               "div",
               {
-                className: n("item__inner", void 0, r == null ? void 0 : r.innerClassName),
+                className: bem("item__inner", void 0, item == null ? void 0 : item.innerClassName),
                 children: [
-                  c && /* @__PURE__ */ l(
+                  icon && /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: n(
+                      className: bem(
                         "item__icon",
                         void 0,
-                        (s = r == null ? void 0 : r.iconProps) == null ? void 0 : s.className
+                        (_a = item == null ? void 0 : item.iconProps) == null ? void 0 : _a.className
                       ),
-                      children: /* @__PURE__ */ l(
-                        I,
+                      children: /* @__PURE__ */ jsx(
+                        Icon,
                         {
-                          ...r == null ? void 0 : r.iconProps,
-                          className: n("item__icon__svg"),
-                          name: c,
+                          ...item == null ? void 0 : item.iconProps,
+                          className: bem("item__icon__svg"),
+                          name: icon,
                           size: "sm"
                         }
                       )
                     }
                   ),
-                  /* @__PURE__ */ f("div", { className: n("item__content"), children: [
-                    v(r.title),
-                    N(r == null ? void 0 : r.desc)
+                  /* @__PURE__ */ jsxs("div", { className: bem("item__content"), children: [
+                    renderTitle(item.title),
+                    renderDesc(item == null ? void 0 : item.desc)
                   ] })
                 ]
               }
@@ -99,66 +108,73 @@ const n = P(E, "List"), M = j(
           }
         );
       },
-      [v, N]
-    ), $ = o(
-      (r) => {
-        switch (a) {
+      [renderTitle, renderDesc]
+    );
+    const renderItem = useCallback(
+      (item) => {
+        switch (type) {
           case "card":
-            return e(r);
+            return renderCardItem(item);
           default:
-            return (r == null ? void 0 : r.redirect) !== void 0 ? C(
-              r.redirect,
-              /* @__PURE__ */ f(x, { children: [
-                k(r == null ? void 0 : r.icon),
-                v(r.title, r),
-                N(r == null ? void 0 : r.desc)
-              ] })
-            ) : /* @__PURE__ */ f(x, { children: [
-              k(r == null ? void 0 : r.icon),
-              v(r.title, r),
-              N(r == null ? void 0 : r.desc)
+            if ((item == null ? void 0 : item.redirect) !== void 0) {
+              return renderLink(
+                item.redirect,
+                /* @__PURE__ */ jsxs(Fragment, { children: [
+                  renderIcon(item == null ? void 0 : item.icon),
+                  renderTitle(item.title, item),
+                  renderDesc(item == null ? void 0 : item.desc)
+                ] })
+              );
+            }
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              renderIcon(item == null ? void 0 : item.icon),
+              renderTitle(item.title, item),
+              renderDesc(item == null ? void 0 : item.desc)
             ] });
         }
       },
-      [a, e, k, C, v, N]
+      [type, renderCardItem, renderIcon, renderLink, renderTitle, renderDesc]
     );
-    return /* @__PURE__ */ l(
+    return /* @__PURE__ */ jsx(
       "ul",
       {
         "aria-live": "polite",
         "aria-relevant": "additions text",
-        ...g,
-        className: n(void 0, void 0, L),
-        children: w.map((r) => {
-          const c = !!(r != null && r.onClick) || !!(r != null && r.redirect);
+        ...props,
+        className: bem(void 0, void 0, className),
+        children: items.map((item) => {
+          const isClickable = !!(item == null ? void 0 : item.onClick) || !!(item == null ? void 0 : item.redirect);
           return (
             /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */
-            /* @__PURE__ */ l(
+            /* @__PURE__ */ jsx(
               "li",
               {
-                "aria-pressed": c ? !1 : void 0,
-                role: c ? "button" : void 0,
-                tabIndex: c ? 0 : -1,
-                className: n(
+                "aria-pressed": isClickable ? false : void 0,
+                role: isClickable ? "button" : void 0,
+                tabIndex: isClickable ? 0 : -1,
+                className: bem(
                   "item",
                   {
-                    "is-clickable": c,
-                    [`is-clickable--${(r == null ? void 0 : r.variant) ?? _}`]: c,
-                    ...u
+                    "is-clickable": isClickable,
+                    [`is-clickable--${(item == null ? void 0 : item.variant) ?? variant}`]: isClickable,
+                    ...modifier
                   },
-                  r == null ? void 0 : r.className
+                  item == null ? void 0 : item.className
                 ),
-                onClick: a === "default" && c ? () => {
-                  var s;
-                  return (s = r.onClick) == null ? void 0 : s.call(r, r);
+                onClick: type === "default" && isClickable ? () => {
+                  var _a;
+                  return (_a = item.onClick) == null ? void 0 : _a.call(item, item);
                 } : void 0,
-                onKeyDown: c ? (s) => {
-                  var b;
-                  (s.key === "Enter" || s.key === " ") && (s.preventDefault(), (b = r == null ? void 0 : r.onClick) == null || b.call(r, r));
+                onKeyDown: isClickable ? (e) => {
+                  var _a;
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    (_a = item == null ? void 0 : item.onClick) == null ? void 0 : _a.call(item, item);
+                  }
                 } : void 0,
-                children: $(r)
+                children: renderItem(item)
               },
-              `list-item-${r.title}`
+              `list-item-${item.title}`
             )
           );
         })
@@ -166,7 +182,7 @@ const n = P(E, "List"), M = j(
     );
   }
 );
-M.displayName = "List";
+List.displayName = "List";
 export {
-  M as List
+  List
 };

package/dist/components/list/List.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", i = "fadeInKeyframe", _ = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-List": "prokodo-List",
   "prokodo-List__item": "prokodo-List__item",
   "prokodo-List__item__card": "prokodo-List__item__card",
@@ -21,11 +23,11 @@ const o = "gradientMove", i = "fadeInKeyframe", _ = {
   "prokodo-List__item--is-clickable--error": "prokodo-List__item--is-clickable--error",
   "prokodo-List__item--is-clickable--white": "prokodo-List__item--is-clickable--white",
   "prokodo-List__item--card": "prokodo-List__item--card",
-  gradientMove: o,
-  fadeInKeyframe: i
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  _ as default,
-  i as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/list/index.js

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

package/dist/components/loading/Loading.js

@@ -1,11 +1,12 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { memo as r } from "react";
-import { create as a } from "../../helpers/bem.js";
-import t from "./Loading.module.scss.js";
-const i = a(t, "Loading"), d = r(({ className: s, size: n = "sm" }) => /* @__PURE__ */ o(
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { create } from "../../helpers/bem.js";
+import styles from "./Loading.module.scss.js";
+const bem = create(styles, "Loading");
+const Loading = memo(({ className, size = "sm" }) => /* @__PURE__ */ jsxs(
   "div",
   {
-    className: i(void 0, void 0, s),
+    className: bem(void 0, void 0, className),
     style: {
       display: "flex",
       alignItems: "center",
@@ -13,37 +14,37 @@ const i = a(t, "Loading"), d = r(({ className: s, size: n = "sm" }) => /* @__PUR
       gap: "16px"
     },
     children: [
-      /* @__PURE__ */ e("svg", { height: 0, style: { position: "absolute" }, width: 0, children: /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ o(
+      /* @__PURE__ */ jsx("svg", { height: 0, style: { position: "absolute" }, width: 0, children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
         "linearGradient",
         {
-          className: i("gradient"),
+          className: bem("gradient"),
           id: "loading-gradient",
           x1: "0%",
           x2: "0%",
           y1: "0%",
           y2: "100%",
           children: [
-            /* @__PURE__ */ e("stop", { offset: "0%" }),
-            /* @__PURE__ */ e("stop", { offset: "50%" }),
-            /* @__PURE__ */ e("stop", { offset: "100%" })
+            /* @__PURE__ */ jsx("stop", { offset: "0%" }),
+            /* @__PURE__ */ jsx("stop", { offset: "50%" }),
+            /* @__PURE__ */ jsx("stop", { offset: "100%" })
           ]
         }
       ) }) }),
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ jsx(
         "div",
         {
-          className: i("animation", {
-            [`size-${n}`]: !0
+          className: bem("animation", {
+            [`size-${size}`]: true
           }),
           style: {
             borderRadius: "50%",
-            border: "4px solid transparent",
+            border: `4px solid transparent`,
             // Transparent border for empty space
-            borderTop: "4px solid",
+            borderTop: `4px solid`,
             // Apply color for top border only
-            animation: `${t.spin} 1s linear infinite`,
+            animation: `${styles.spin} 1s linear infinite`,
             // Define animation for spinning
-            background: "conic-gradient(from 0deg at 50% 50%, url(#loading-gradient) 0deg 360deg)"
+            background: `conic-gradient(from 0deg at 50% 50%, url(#loading-gradient) 0deg 360deg)`
             // Create a conic gradient
           }
         }
@@ -51,7 +52,7 @@ const i = a(t, "Loading"), d = r(({ className: s, size: n = "sm" }) => /* @__PUR
     ]
   }
 ));
-d.displayName = "Loading";
+Loading.displayName = "Loading";
 export {
-  d as Loading
+  Loading
 };

package/dist/components/loading/Loading.module.scss.js

@@ -1,19 +1,22 @@
-const o = "spin", i = "gradientMove", n = "fadeInKeyframe", a = {
+const spin = "spin";
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Loading": "prokodo-Loading",
   "prokodo-Loading__gradient": "prokodo-Loading__gradient",
   "prokodo-Loading__animation": "prokodo-Loading__animation",
-  spin: o,
+  spin,
   "prokodo-Loading__animation--size-xs": "prokodo-Loading__animation--size-xs",
   "prokodo-Loading__animation--size-sm": "prokodo-Loading__animation--size-sm",
   "prokodo-Loading__animation--size-md": "prokodo-Loading__animation--size-md",
   "prokodo-Loading__animation--size-lg": "prokodo-Loading__animation--size-lg",
   "prokodo-Loading__animation--size-xl": "prokodo-Loading__animation--size-xl",
-  gradientMove: i,
-  fadeInKeyframe: n
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  a as default,
-  n as fadeInKeyframe,
-  i as gradientMove,
-  o as spin
+  styles as default,
+  fadeInKeyframe,
+  gradientMove,
+  spin
 };

package/dist/components/loading/index.js

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

package/dist/components/lottie/Lottie.js

@@ -1,55 +1,65 @@
-import { jsx as e } from "react/jsx-runtime";
-import { memo as p, useState as v, useRef as I, useEffect as R, Suspense as b, lazy as h } from "react";
-import { create as L } from "../../helpers/bem.js";
-import N from "./Lottie.module.scss.js";
-import { ANIMATIONS as u } from "./LottieAnimations.js";
-const t = L(N, "Lottie"), w = h(
-  () => import("@lottiefiles/dotlottie-react").then((o) => ({
-    default: o.DotLottieReact
+import { jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useEffect, Suspense, lazy } from "react";
+import { create } from "../../helpers/bem.js";
+import styles from "./Lottie.module.scss.js";
+import { ANIMATIONS } from "./LottieAnimations.js";
+const bem = create(styles, "Lottie");
+const DotLottieReact = lazy(
+  () => import("@lottiefiles/dotlottie-react").then((mod) => ({
+    default: mod.DotLottieReact
   }))
-), x = p(
-  ({ className: o, animationName: c, containerClassName: r, ...d }) => {
-    var l;
-    const [f, m] = v(!1), n = I(null);
-    return R(() => {
-      const i = new IntersectionObserver(([s]) => {
-        (s == null ? void 0 : s.isIntersecting) === !0 && (m(!0), i.disconnect());
-      }), a = n.current;
-      return a && i.observe(a), () => i.disconnect();
-    }, []), (l = u) != null && l[c] ? /* @__PURE__ */ e(
+);
+const Lottie = memo(
+  ({ className, animationName, containerClassName, ...props }) => {
+    var _a;
+    const [isInView, setIsInView] = useState(false);
+    const containerRef = useRef(null);
+    useEffect(() => {
+      const observer = new IntersectionObserver(([entry]) => {
+        if ((entry == null ? void 0 : entry.isIntersecting) === true) {
+          setIsInView(true);
+          observer.disconnect();
+        }
+      });
+      const el = containerRef.current;
+      if (el) observer.observe(el);
+      return () => observer.disconnect();
+    }, []);
+    if (!((_a = ANIMATIONS) == null ? void 0 : _a[animationName])) return null;
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        ref: n,
-        className: t("container", void 0, r),
-        children: f ? /* @__PURE__ */ e(
-          b,
+        ref: containerRef,
+        className: bem("container", void 0, containerClassName),
+        children: isInView ? /* @__PURE__ */ jsx(
+          Suspense,
           {
-            fallback: /* @__PURE__ */ e(
+            fallback: /* @__PURE__ */ jsx(
               "div",
               {
-                className: t("placeholder", void 0, r)
+                className: bem("placeholder", void 0, containerClassName)
               }
             ),
-            children: /* @__PURE__ */ e(
-              w,
+            children: /* @__PURE__ */ jsx(
+              DotLottieReact,
               {
-                autoplay: !0,
-                autoResizeCanvas: !0,
-                loop: !0,
-                className: t(void 0, void 0, o),
+                autoplay: true,
+                autoResizeCanvas: true,
+                loop: true,
+                className: bem(void 0, void 0, className),
                 renderConfig: { devicePixelRatio: 0.9 },
-                src: u[c],
-                useFrameInterpolation: !1,
-                ...d
+                src: ANIMATIONS[animationName],
+                useFrameInterpolation: false,
+                ...props
               }
             )
           }
-        ) : /* @__PURE__ */ e("div", { className: t("placeholder", void 0, r) })
+        ) : /* @__PURE__ */ jsx("div", { className: bem("placeholder", void 0, containerClassName) })
       }
-    ) : null;
+    );
   }
 );
-x.displayName = "Lottie";
+Lottie.displayName = "Lottie";
 export {
-  x as Lottie
+  Lottie
 };

package/dist/components/lottie/Lottie.module.scss.js

@@ -1,10 +1,12 @@
-const e = "gradientMove", o = "fadeInKeyframe", t = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Lottie__container": "prokodo-Lottie__container",
-  gradientMove: e,
-  fadeInKeyframe: o
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  t as default,
-  o as fadeInKeyframe,
-  e as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/lottie/LottieAnimations.js

@@ -1,4 +1,4 @@
-const t = {
+const ANIMATIONS = {
   SolutionUIUXDesign: "https://lottie.host/af0b17d4-cc93-48bb-b388-d058f579ae3a/mzzgcsHwL4.lottie",
   SolutionSoftwareDevelopment: "https://lottie.host/bf06b5a0-be40-4f2a-95e4-ae3e033006d3/pxQ7Wtj79u.lottie",
   SolutionAppDevelopment: "https://lottie.host/24da243e-b6e4-4180-abd2-fc70ece1a39c/UDS9WBtmnP.lottie",
@@ -31,5 +31,5 @@ const t = {
   NotFound: "https://lottie.host/ee63adf0-2f07-44ca-94b1-f8829aea03a5/8qjL7cSngV.lottie"
 };
 export {
-  t as ANIMATIONS
+  ANIMATIONS
 };

package/dist/components/lottie/index.js

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