@prokodo/ui 0.0.26 → 0.0.28

package/dist/components/carousel/Carousel.js

@@ -1,232 +1,296 @@
-import { jsx as l, jsxs as J } from "react/jsx-runtime";
-import { useRef as b, useState as f, Children as le, useEffect as X, useCallback as v, useImperativeHandle as ne } from "react";
-import { create as ce } from "../../helpers/bem.js";
-import de from "./Carousel.module.scss.js";
-import { NEXT as N, PREV as R, handleTouchStart as oe, handleTouchMove as fe, handleTouchEnd as me, handleMouseUp as ue, handleMouseDown as be } from "./Carousel.services.js";
-import { Lottie as ve } from "../lottie/Lottie.js";
-import { Button as L } from "../button/Button.js";
-const a = ce(de, "Carousel"), Ie = ({
-  ref: O,
-  autoplay: m,
-  enableControl: y,
-  itemsToShow: r = 1,
-  className: Q,
-  classNameControls: W,
-  classNameButtons: V,
-  classNameWrapper: Y,
-  classNameItem: Z,
-  classNameDots: h,
-  classNameDot: B,
-  onKeyDown: x,
-  onMouseEnter: I,
-  onMouseLeave: p,
-  onTouchEnd: C,
-  onTouchMove: g,
-  onTouchStart: k,
-  onMouseDown: A,
-  onMouseUp: _,
-  children: K,
-  ...U
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, Children, useEffect, useCallback, useImperativeHandle } from "react";
+import { create } from "../../helpers/bem.js";
+import styles from "./Carousel.module.scss.js";
+import { NEXT, PREV, handleTouchStart, handleTouchMove, handleTouchEnd, handleMouseUp, handleMouseDown } from "./Carousel.services.js";
+import { Lottie } from "../lottie/Lottie.js";
+import { Button } from "../button/Button.js";
+const bem = create(styles, "Carousel");
+const Carousel = /* @__PURE__ */ __name(({
+  ref,
+  autoplay,
+  enableControl,
+  itemsToShow = 1,
+  className,
+  classNameControls,
+  classNameButtons,
+  classNameWrapper,
+  classNameItem,
+  classNameDots,
+  classNameDot,
+  onKeyDown,
+  onMouseEnter,
+  onMouseLeave,
+  onTouchEnd,
+  onTouchMove,
+  onTouchStart,
+  onMouseDown,
+  onMouseUp,
+  children,
+  ...props
 }) => {
-  const $ = b(null), E = b(0), j = b(0), z = b(0), w = b(0), [D, M] = f(!0), [c, d] = f(r), [T, H] = f(!1), [q, F] = f(!!m), [u, n] = f(!1), o = le.toArray(K), [G, S] = f([]), s = o.length;
-  X(() => {
-    const e = [
-      ...o.slice(-r),
-      ...o,
-      ...o.slice(0, r)
+  const carouselContainerRef = useRef(null);
+  const touchStartX = useRef(0);
+  const touchEndX = useRef(0);
+  const mouseStartX = useRef(0);
+  const mouseEndX = useRef(0);
+  const [mobileTutorialVisible, setMobileTutorialVisible] = useState(true);
+  const [currentIndex, setCurrentIndex] = useState(itemsToShow);
+  const [mouseActive, setMouseActive] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(Boolean(autoplay));
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const childrenArray = Children.toArray(children);
+  const [items, setItems] = useState([]);
+  const numItems = childrenArray.length;
+  useEffect(() => {
+    const newItems = [
+      ...childrenArray.slice(-itemsToShow),
+      ...childrenArray,
+      ...childrenArray.slice(0, itemsToShow)
     ];
-    e !== G && (S(e), d(r));
-  }, [r]), X(() => {
-    const e = setTimeout(() => {
-      M(!1);
+    if (newItems !== items) {
+      setItems(newItems);
+      setCurrentIndex(itemsToShow);
+    }
+  }, [itemsToShow]);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setMobileTutorialVisible(false);
     }, 1500);
-    return () => clearTimeout(e);
+    return () => clearTimeout(timeout);
   }, []);
-  const i = v(
-    (e) => {
-      if (u) return;
-      n(!0);
-      let t = c;
-      e === N ? t = c + 1 : e === R && (t = c - 1), d(t), setTimeout(() => {
-        t >= s + r ? (d(r), n(!1)) : (t < r && d(s), n(!1));
+  const slide = useCallback(
+    (direction) => {
+      if (isTransitioning) return;
+      setIsTransitioning(true);
+      let newIndex = currentIndex;
+      if (direction === NEXT) {
+        newIndex = currentIndex + 1;
+      } else if (direction === PREV) {
+        newIndex = currentIndex - 1;
+      }
+      setCurrentIndex(newIndex);
+      setTimeout(() => {
+        if (newIndex >= numItems + itemsToShow) {
+          setCurrentIndex(itemsToShow);
+          setIsTransitioning(false);
+        } else if (newIndex < itemsToShow) {
+          setCurrentIndex(numItems);
+          setIsTransitioning(false);
+        } else {
+          setIsTransitioning(false);
+        }
       }, 300);
     },
-    [u, c, r, s]
+    [isTransitioning, currentIndex, itemsToShow, numItems]
   );
-  X(() => {
-    if (typeof m != "number" || m <= 0) return;
-    let e;
-    return q && (e = setInterval(() => {
-      i(N);
-    }, m)), () => {
-      clearInterval(e);
+  useEffect(() => {
+    if (typeof autoplay !== "number" || autoplay <= 0) return;
+    let interval;
+    if (isPlaying) {
+      interval = setInterval(() => {
+        slide(NEXT);
+      }, autoplay);
+    }
+    return () => {
+      clearInterval(interval);
     };
-  }, [i, q, m]);
-  const P = v(
-    (e) => {
-      if (u) return;
-      n(!0);
-      const t = e + r;
-      d(t), setTimeout(() => {
-        t >= s + r ? (d(t - s), n(!1)) : (t < r && d(s + t), n(!1));
+  }, [slide, isPlaying, autoplay]);
+  const slideToIndex = useCallback(
+    (index) => {
+      if (isTransitioning) return;
+      setIsTransitioning(true);
+      const targetIndex = index + itemsToShow;
+      setCurrentIndex(targetIndex);
+      setTimeout(() => {
+        if (targetIndex >= numItems + itemsToShow) {
+          setCurrentIndex(targetIndex - numItems);
+          setIsTransitioning(false);
+        } else if (targetIndex < itemsToShow) {
+          setCurrentIndex(numItems + targetIndex);
+          setIsTransitioning(false);
+        } else {
+          setIsTransitioning(false);
+        }
       }, 300);
     },
-    [u, r, s]
+    [isTransitioning, itemsToShow, numItems]
   );
-  ne(O, () => ({
-    slidePrev: () => i(R),
-    slideNext: () => i(N),
-    carouselContainer: $.current
+  useImperativeHandle(ref, () => ({
+    slidePrev: /* @__PURE__ */ __name(() => slide(PREV), "slidePrev"),
+    slideNext: /* @__PURE__ */ __name(() => slide(NEXT), "slideNext"),
+    carouselContainer: carouselContainerRef.current
   }));
-  const ee = v(
+  const handleMouseEnter = useCallback(
     (e) => {
-      I == null || I(e), F(!1);
+      onMouseEnter == null ? void 0 : onMouseEnter(e);
+      setIsPlaying(false);
     },
-    [I]
-  ), te = v(
+    [onMouseEnter]
+  );
+  const handleMouseLeave = useCallback(
     (e) => {
-      p == null || p(e), F(!0);
+      onMouseLeave == null ? void 0 : onMouseLeave(e);
+      setIsPlaying(true);
     },
-    [p]
-  ), re = () => `translateX(${-c * (100 / r)}%)`, se = v(
-    () => s > 0 && /* @__PURE__ */ l("span", { className: a("dots", void 0, h), children: o.map((e, t) => {
-      const ie = t === (c - r + s) % s;
-      return /* @__PURE__ */ l(
+    [onMouseLeave]
+  );
+  const getTransformValue = /* @__PURE__ */ __name(() => {
+    const offset = -currentIndex * (100 / itemsToShow);
+    return `translateX(${offset}%)`;
+  }, "getTransformValue");
+  const renderDots = useCallback(
+    () => numItems > 0 && /* @__PURE__ */ jsx("span", { className: bem("dots", void 0, classNameDots), children: childrenArray.map((_, i) => {
+      const isActive = i === (currentIndex - itemsToShow + numItems) % numItems;
+      return /* @__PURE__ */ jsx(
         "button",
         {
           tabIndex: 0,
-          className: a(
+          className: bem(
             "dots__dot",
             {
-              "is-active": ie
+              "is-active": isActive
             },
-            B
+            classNameDot
           ),
-          onClick: () => P(t),
-          onKeyDown: (ae) => ae.key === "Enter" && P(t)
+          onClick: /* @__PURE__ */ __name(() => slideToIndex(i), "onClick"),
+          onKeyDown: /* @__PURE__ */ __name((e) => e.key === "Enter" && slideToIndex(i), "onKeyDown")
         },
-        `carousel-dot-${t}`
+        `carousel-dot-${i}`
       );
     }) }),
     [
-      s,
-      o,
-      c,
-      h,
-      B,
-      r,
-      P
+      numItems,
+      childrenArray,
+      currentIndex,
+      classNameDots,
+      classNameDot,
+      itemsToShow,
+      slideToIndex
     ]
   );
-  return s === 0 ? null : /* @__PURE__ */ J(
+  if (numItems === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       "aria-label": "Carousel",
       role: "button",
       tabIndex: 0,
-      ...U,
-      ref: $,
-      className: a(
+      ...props,
+      ref: carouselContainerRef,
+      className: bem(
         void 0,
         {
-          "is-active": T
+          "is-active": mouseActive
         },
-        Q
+        className
       ),
-      onMouseEnter: ee,
-      onMouseLeave: te,
-      onKeyDown: (e) => {
-        switch (x == null || x(e), e.key) {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onKeyDown: /* @__PURE__ */ __name((e) => {
+        onKeyDown == null ? void 0 : onKeyDown(e);
+        switch (e.key) {
           case "ArrowLeft":
-            i("NEXT");
+            slide("NEXT");
             break;
           case "ArrowRight":
-            i("PREV");
+            slide("PREV");
             break;
         }
-      },
-      onMouseDown: (e) => {
-        A == null || A(e), be(e, z), H(!0);
-      },
-      onMouseUp: (e) => {
-        _ == null || _(e), ue(e, z, w, i), H(!1);
-      },
-      onTouchEnd: (e) => {
-        C == null || C(e), me(E, j, i);
-      },
-      onTouchMove: (e) => {
-        g == null || g(e), fe(e, j);
-      },
-      onTouchStart: (e) => {
-        k == null || k(e), oe(e, E);
-      },
+      }, "onKeyDown"),
+      onMouseDown: /* @__PURE__ */ __name((e) => {
+        onMouseDown == null ? void 0 : onMouseDown(e);
+        handleMouseDown(e, mouseStartX);
+        setMouseActive(true);
+      }, "onMouseDown"),
+      onMouseUp: /* @__PURE__ */ __name((e) => {
+        onMouseUp == null ? void 0 : onMouseUp(e);
+        handleMouseUp(e, mouseStartX, mouseEndX, slide);
+        setMouseActive(false);
+      }, "onMouseUp"),
+      onTouchEnd: /* @__PURE__ */ __name((e) => {
+        onTouchEnd == null ? void 0 : onTouchEnd(e);
+        handleTouchEnd(touchStartX, touchEndX, slide);
+      }, "onTouchEnd"),
+      onTouchMove: /* @__PURE__ */ __name((e) => {
+        onTouchMove == null ? void 0 : onTouchMove(e);
+        handleTouchMove(e, touchEndX);
+      }, "onTouchMove"),
+      onTouchStart: /* @__PURE__ */ __name((e) => {
+        onTouchStart == null ? void 0 : onTouchStart(e);
+        handleTouchStart(e, touchStartX);
+      }, "onTouchStart"),
       children: [
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ jsx(
           "div",
           {
-            className: a("wrapper", void 0, Y),
+            className: bem("wrapper", void 0, classNameWrapper),
             style: {
-              transform: re(),
-              transition: u ? "transform 0.3s ease-in-out" : "none"
+              transform: getTransformValue(),
+              transition: isTransitioning ? "transform 0.3s ease-in-out" : "none"
             },
-            children: G.map((e, t) => /* @__PURE__ */ l(
+            children: items.map((child, i) => /* @__PURE__ */ jsx(
               "div",
               {
-                className: a("item", void 0, Z),
+                className: bem("item", void 0, classNameItem),
                 style: {
-                  width: `${100 / r}%`
+                  width: `${100 / itemsToShow}%`
                 },
-                children: e
+                children: child
               },
-              `carousel-item-${t}`
+              `carousel-item-${i}`
             ))
           }
         ),
-        /* @__PURE__ */ l(
+        /* @__PURE__ */ jsx(
           "div",
           {
-            className: a("mobile__tutorial", {
-              "is-hidden": !D
+            className: bem("mobile__tutorial", {
+              "is-hidden": !Boolean(mobileTutorialVisible)
             }),
-            children: /* @__PURE__ */ l("div", { className: a("mobile__tutorial__animation"), children: /* @__PURE__ */ l(ve, { animationName: "Swipe" }) })
+            children: /* @__PURE__ */ jsx("div", { className: bem("mobile__tutorial__animation"), children: /* @__PURE__ */ jsx(Lottie, { animationName: "Swipe" }) })
           }
         ),
-        /* @__PURE__ */ J("footer", { className: a("controls", void 0, W), children: [
-          !!y && /* @__PURE__ */ l(
-            L,
+        /* @__PURE__ */ jsxs("footer", { className: bem("controls", void 0, classNameControls), children: [
+          Boolean(enableControl) && /* @__PURE__ */ jsx(
+            Button,
             {
               "aria-label": "Swipe one slide backwards",
-              className: a("button", void 0, V),
+              className: bem("button", void 0, classNameButtons),
               variant: "outlined",
               iconProps: {
                 name: "ArrowLeft01Icon",
                 size: "md",
                 color: "white"
               },
-              onClick: () => i(R)
+              onClick: /* @__PURE__ */ __name(() => slide(PREV), "onClick")
             }
           ),
-          se(),
-          !!y && /* @__PURE__ */ l(
-            L,
+          renderDots(),
+          Boolean(enableControl) && /* @__PURE__ */ jsx(
+            Button,
             {
               "aria-label": "Swipe one slide forwards",
-              className: a("button", void 0, V),
+              className: bem("button", void 0, classNameButtons),
               variant: "outlined",
               iconProps: {
                 name: "ArrowRight01Icon",
                 size: "md",
                 color: "white"
               },
-              onClick: () => i(N)
+              onClick: /* @__PURE__ */ __name(() => slide(NEXT), "onClick")
             }
           )
         ] })
       ]
     }
   );
-};
-Ie.displayName = "Carousel";
+}, "Carousel");
+Carousel.displayName = "Carousel";
 export {
-  Ie as Carousel
+  Carousel
 };

package/dist/components/carousel/Carousel.module.scss.js

@@ -1,4 +1,6 @@
-const o = "gradientMove", r = "fadeInKeyframe", _ = {
+const gradientMove = "gradientMove";
+const fadeInKeyframe = "fadeInKeyframe";
+const styles = {
   "prokodo-Carousel": "prokodo-Carousel",
   "prokodo-Carousel--is-active": "prokodo-Carousel--is-active",
   "prokodo-Carousel__wrapper": "prokodo-Carousel__wrapper",
@@ -11,11 +13,11 @@ const o = "gradientMove", r = "fadeInKeyframe", _ = {
   "prokodo-Carousel__dots": "prokodo-Carousel__dots",
   "prokodo-Carousel__dots__dot": "prokodo-Carousel__dots__dot",
   "prokodo-Carousel__dots__dot--is-active": "prokodo-Carousel__dots__dot--is-active",
-  gradientMove: o,
-  fadeInKeyframe: r
+  gradientMove,
+  fadeInKeyframe
 };
 export {
-  _ as default,
-  r as fadeInKeyframe,
-  o as gradientMove
+  styles as default,
+  fadeInKeyframe,
+  gradientMove
 };

package/dist/components/carousel/Carousel.services.js

@@ -1,22 +1,41 @@
-const t = "NEXT", u = "PREV", o = (r, c) => {
-  var n;
-  c.current = ((n = r.targetTouches[0]) == null ? void 0 : n.clientX) ?? 0;
-}, T = (r, c) => {
-  var n;
-  c.current = ((n = r.targetTouches[0]) == null ? void 0 : n.clientX) ?? 0;
-}, h = (r, c, n) => {
-  r.current - c.current > 50 && n("NEXT"), r.current - c.current < -50 && n("PREV");
-}, l = (r, c) => {
-  c.current = r.clientX;
-}, a = (r, c, n, e) => {
-  n.current = r.clientX, c.current - n.current > 50 && e("NEXT"), c.current - n.current < -50 && e("PREV");
-};
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const NEXT = "NEXT";
+const PREV = "PREV";
+const handleTouchStart = /* @__PURE__ */ __name((e, touchStartX) => {
+  var _a;
+  touchStartX.current = ((_a = e.targetTouches[0]) == null ? void 0 : _a.clientX) ?? 0;
+}, "handleTouchStart");
+const handleTouchMove = /* @__PURE__ */ __name((e, touchEndX) => {
+  var _a;
+  touchEndX.current = ((_a = e.targetTouches[0]) == null ? void 0 : _a.clientX) ?? 0;
+}, "handleTouchMove");
+const handleTouchEnd = /* @__PURE__ */ __name((touchStartX, touchEndX, slide) => {
+  if (touchStartX.current - touchEndX.current > 50) {
+    slide("NEXT");
+  }
+  if (touchStartX.current - touchEndX.current < -50) {
+    slide("PREV");
+  }
+}, "handleTouchEnd");
+const handleMouseDown = /* @__PURE__ */ __name((e, mouseStartX) => {
+  mouseStartX.current = e.clientX;
+}, "handleMouseDown");
+const handleMouseUp = /* @__PURE__ */ __name((e, mouseStartX, mouseEndX, slide) => {
+  mouseEndX.current = e.clientX;
+  if (mouseStartX.current - mouseEndX.current > 50) {
+    slide("NEXT");
+  }
+  if (mouseStartX.current - mouseEndX.current < -50) {
+    slide("PREV");
+  }
+}, "handleMouseUp");
 export {
-  t as NEXT,
-  u as PREV,
-  l as handleMouseDown,
-  a as handleMouseUp,
-  h as handleTouchEnd,
-  T as handleTouchMove,
-  o as handleTouchStart
+  NEXT,
+  PREV,
+  handleMouseDown,
+  handleMouseUp,
+  handleTouchEnd,
+  handleTouchMove,
+  handleTouchStart
 };

package/dist/components/carousel/index.js

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

package/dist/components/chip/Chip.js

@@ -1,51 +1,59 @@
-import { jsxs as f, jsx as d } from "react/jsx-runtime";
-import { memo as h, useCallback as u } from "react";
-import { create as v } from "../../helpers/bem.js";
-import n from "./Chip.module.scss.js";
-const s = v(n, "Chip"), x = h(
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { create } from "../../helpers/bem.js";
+import styles from "./Chip.module.scss.js";
+const bem = create(styles, "Chip");
+const Chip = memo(
   ({
-    label: i,
-    icon: o,
-    variant: l = "filled",
-    color: m = "primary",
-    className: c,
-    onDelete: p,
-    onClick: a,
-    onKeyDown: e
+    label,
+    icon,
+    variant = "filled",
+    color = "primary",
+    className,
+    onDelete,
+    onClick,
+    onKeyDown
   }) => {
-    const b = u(
-      (t) => {
-        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), e == null || e(t));
+    const handleKeyDown = useCallback(
+      (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onKeyDown == null ? void 0 : onKeyDown(e);
+        }
       },
-      [e]
-    ), r = !!a;
+      [onKeyDown]
+    );
+    const isClickable = !!onClick;
     return (
       // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-      /* @__PURE__ */ f(
+      /* @__PURE__ */ jsxs(
         "div",
         {
-          "aria-label": typeof i == "string" ? i : void 0,
-          role: r ? "button" : void 0,
-          tabIndex: r ? 0 : -1,
-          className: s(
+          "aria-label": typeof label === "string" ? label : void 0,
+          role: isClickable ? "button" : void 0,
+          tabIndex: isClickable ? 0 : -1,
+          className: bem(
             void 0,
-            { [l]: !!l, [m]: !!m },
-            c
+            { [variant]: !!variant, [color]: !!color },
+            className
           ),
-          onClick: (t) => r && (a == null ? void 0 : a(t)),
-          onKeyDown: r || e ? b : void 0,
+          onClick: /* @__PURE__ */ __name((e) => isClickable && (onClick == null ? void 0 : onClick(e)), "onClick"),
+          onKeyDown: isClickable || onKeyDown ? handleKeyDown : void 0,
           children: [
-            o,
-            /* @__PURE__ */ d("span", { className: s("label"), children: i }),
-            p && /* @__PURE__ */ d(
+            icon,
+            /* @__PURE__ */ jsx("span", { className: bem("label"), children: label }),
+            onDelete && /* @__PURE__ */ jsx(
               "button",
               {
                 "aria-label": "delete",
-                className: s("delete"),
+                className: bem("delete"),
                 type: "button",
-                onClick: (t) => {
-                  t.stopPropagation(), p(t);
-                },
+                onClick: /* @__PURE__ */ __name((e) => {
+                  e.stopPropagation();
+                  onDelete(e);
+                }, "onClick"),
                 children: "× "
               }
             )
@@ -55,7 +63,7 @@ const s = v(n, "Chip"), x = h(
     );
   }
 );
-x.displayName = "Chip";
+Chip.displayName = "Chip";
 export {
-  x as Chip
+  Chip
 };