prometeo-design-system 2.8.8 → 2.9.1

package/dist/Icons.es.js

@@ -0,0 +1,5 @@
+import { e as o, e as s } from "./Icons-DtFC5DJ7.js";
+export {
+  o as Icons,
+  s as default
+};

package/dist/{components/Image/Image.js → Image.es.js}

@@ -1,17 +1,17 @@
-import { jsxs as E, jsx as f } from "react/jsx-runtime";
-import { memo as M, useState as R, useRef as S, useCallback as N, useEffect as b } from "react";
-import T from "../Spinner/Spinner.js";
-import { cn as d } from "../../lib/cn.js";
-import D from "../Skeleton/Skeleton.js";
-const q = (s, e) => {
+import { j as n } from "./jsx-runtime-DKDX3adD.js";
+import { memo as x, useState as E, useRef as R, useCallback as N, useEffect as b } from "react";
+import M from "./Spinner.es.js";
+import { c as d } from "./cn-B6yFEsav.js";
+import S from "./Skeleton.es.js";
+const T = (s, e) => {
   if (s.src !== e.src || s.alt !== e.alt || s.width !== e.width || s.height !== e.height || s.className !== e.className || s.lazy !== e.lazy || s.showLoader !== e.showLoader || s.allowPreview !== e.allowPreview) return !1;
   const r = s.loaderProps, a = e.loaderProps;
   return !(r !== a && (!r || !a || r.loaderType !== a.loaderType || r.variant !== a.variant || r.speedMultiplier !== a.speedMultiplier || r.className !== a.className || r.size !== a.size || r.backdropClassName !== a.backdropClassName));
-}, x = M(
+}, D = x(
   (s) => {
-    const { src: e, alt: r, width: a, height: n, className: c, lazy: y = !0, showLoader: k = !0, loaderProps: I, allowPreview: i = !1, galleryRef: l } = s, { variant: v = "clip", speedMultiplier: z = 0.7, className: C, size: L = 48, backdropClassName: P, loaderType: u = "clasic" } = I || {}, [m, g] = R(!0), h = S(!1), p = N((t) => {
+    const { src: e, alt: r, width: a, height: c, className: f, lazy: y = !0, showLoader: k = !0, loaderProps: I, allowPreview: t = !1, galleryRef: l } = s, { variant: v = "clip", speedMultiplier: j = 0.7, className: z, size: C = 48, backdropClassName: L, loaderType: u = "clasic" } = I || {}, [m, g] = E(!0), h = R(!1), p = N((i) => {
       const o = new Image();
-      o.src = t, o.onload = () => {
+      o.src = i, o.onload = () => {
         g(!1);
       }, o.onerror = () => {
         g(!1);
@@ -20,58 +20,58 @@ const q = (s, e) => {
     b(() => {
       p(e);
     }, [e, p]), b(() => {
-      l?.current && !h.current && (l.current.addImage({ src: e, alt: r, width: a, height: n, className: c }), h.current = !0);
-    }, [l, e, r, a, n, c]);
+      l?.current && !h.current && (l.current.addImage({ src: e, alt: r, width: a, height: c, className: f }), h.current = !0);
+    }, [l, e, r, a, c, f]);
     const w = N(() => {
-      if (i && l?.current) {
-        const o = l.current.images.findIndex((j) => j.src === e);
+      if (t && l?.current) {
+        const o = l.current.images.findIndex((P) => P.src === e);
         l.current.openLightbox(o >= 0 ? o : 0);
       }
-    }, [i, l, e]);
+    }, [t, l, e]);
     return (
       // biome-ignore lint/a11y/noStaticElementInteractions: false positive
-      /* @__PURE__ */ E(
+      /* @__PURE__ */ n.jsxs(
         "div",
         {
           className: d(
             "relative rounded-2xl overflow-hidden select-none",
-            i && l && "cursor-pointer hover:brightness-75 transition-all ease-in-out duration-300",
-            c
+            t && l && "cursor-pointer hover:brightness-75 transition-all ease-in-out duration-300",
+            f
           ),
           style: {
             width: a,
-            height: n,
+            height: c,
             minWidth: a,
-            minHeight: n
+            minHeight: c
           },
           onClick: w,
-          role: i ? "button" : void 0,
-          tabIndex: i ? 0 : void 0,
-          onKeyDown: i ? (t) => {
-            (t.key === "Enter" || t.key === " ") && (t.preventDefault(), w());
+          role: t ? "button" : void 0,
+          tabIndex: t ? 0 : void 0,
+          onKeyDown: t ? (i) => {
+            (i.key === "Enter" || i.key === " ") && (i.preventDefault(), w());
           } : void 0,
           children: [
-            /* @__PURE__ */ f(
+            /* @__PURE__ */ n.jsx(
               "img",
               {
                 draggable: !1,
                 src: e,
                 alt: r,
-                className: d("object-cover", c, "w-full h-full"),
+                className: d("object-cover", f, "w-full h-full"),
                 loading: y ? "lazy" : "eager"
               }
             ),
-            m && k && /* @__PURE__ */ f(
+            m && k && /* @__PURE__ */ n.jsx(
               "div",
               {
                 className: d(
                   "absolute grid place-items-center",
                   "inset-0",
                   u === "skeleton" ? "bg-inherit" : "bg-black/30",
-                  P
+                  L
                 ),
-                children: u === "clasic" ? /* @__PURE__ */ f(T, { variant: v, speedMultiplier: z, loading: m, className: C, size: L }) : /* @__PURE__ */ f(
-                  D,
+                children: u === "clasic" ? /* @__PURE__ */ n.jsx(M, { variant: v, speedMultiplier: j, loading: m, className: z, size: C }) : /* @__PURE__ */ n.jsx(
+                  S,
                   {
                     className: "w-full h-full z-100"
                   }
@@ -83,9 +83,9 @@ const q = (s, e) => {
       )
     );
   },
-  q
+  T
 );
-x.displayName = "Image";
+D.displayName = "Image";
 export {
-  x as default
+  D as default
 };

package/dist/ImageGallery-Ckxg9OIC.js

@@ -0,0 +1,317 @@
+import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import Q, { memo as M, forwardRef as A, useRef as v, useEffect as ee, useCallback as i, useState as R, useImperativeHandle as te } from "react";
+import { c as X } from "./cn-B6yFEsav.js";
+import { u as ne } from "./useDragScroll-CHN9OMwn.js";
+import S from "./Button.es.js";
+import { a as re, b as ae, c as se } from "./Icons-DtFC5DJ7.js";
+const L = M(A(({ images: n, className: c }, r) => {
+  const { ref: d, bind: s } = ne({
+    axis: "x",
+    friction: 0.9,
+    minVelocity: 0.5,
+    startMomentumThreshold: 1,
+    momentum: !0,
+    clickThreshold: 5,
+    cursor: { idle: "default", dragging: "grabbing" },
+    preventTextSelection: !0
+  });
+  return /* @__PURE__ */ t.jsx(
+    "section",
+    {
+      ref: d,
+      className: X("flex gap-4 w-full overflow-x-auto py-2 relative", c),
+      onPointerDown: s.onPointerDown,
+      onPointerMove: s.onPointerMove,
+      onPointerUp: s.onPointerUp,
+      onPointerLeave: s.onPointerLeave,
+      onPointerCancel: s.onPointerCancel,
+      onClickCapture: s.onClickCapture,
+      "aria-label": "Image gallery",
+      children: n && n.length > 0 && n.map((l, o) => Q.cloneElement(l, {
+        key: l.props.src || o,
+        ...l.props,
+        galleryRef: r,
+        allowPreview: !0
+      }))
+    }
+  );
+}));
+L.displayName = "GalleryPreview";
+const O = M(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails: d, thumbnailsClassName: s, currentIndex: l, goToNext: o, goToPrevious: a, goToIndex: N }) => {
+  const h = v(null), y = v(null), w = v(null), m = v({
+    scale: 1,
+    translateX: 0,
+    translateY: 0
+  }), u = v({
+    startX: 0,
+    startY: 0,
+    isDragging: !1,
+    distanceX: 0,
+    distanceY: 0
+  });
+  ee(() => {
+    w.current && w.current.focus();
+  }, []);
+  const k = i((e) => {
+    e.preventDefault(), e.stopPropagation(), e.key === "Escape" ? r() : e.key === "ArrowLeft" ? a() : e.key === "ArrowRight" && o();
+  }, [r, a, o]), P = i((e) => {
+    u.current = { startX: e.touches[0].clientX, startY: e.touches[0].clientY, isDragging: !0, distanceX: 0, distanceY: 0 };
+  }, []), j = i((e) => {
+    const g = e.touches[0];
+    u.current = { ...u.current, isDragging: !0, distanceX: g.clientX - u.current.startX, distanceY: g.clientY - u.current.startY };
+  }, []), z = i(() => {
+    u.current = { ...u.current, startX: 0, startY: 0, isDragging: !1 }, Math.abs(u.current.distanceX) > Math.abs(u.current.distanceY) && (u.current.distanceX < 0 ? o() : a());
+  }, [o, a]), C = i(() => {
+    const e = h.current;
+    if (!e) return;
+    const { scale: g, translateX: p, translateY: I } = m.current;
+    e.style.transform = `scale(${g}) translate(${p}px, ${I}px)`, e.style.transformOrigin = "center center", e.style.transition = "transform 0.1s ease-out";
+  }, []), b = i(() => {
+    m.current = { scale: 1, translateX: 0, translateY: 0 }, h.current && (h.current.style.transform = "scale(1) translate(0px, 0px)", h.current.style.transformOrigin = "center center");
+  }, []), f = i((e) => {
+    const g = h.current, p = y.current;
+    if (!g || !p) return;
+    if (e.shiftKey) {
+      e.deltaY < 0 ? o() : e.deltaY > 0 && a();
+      return;
+    }
+    const I = 2e-3, D = 1, B = 8, F = -e.deltaY * I, E = m.current.scale;
+    let x = E + F;
+    if (x = Math.max(D, Math.min(B, x)), x === D) {
+      b();
+      return;
+    }
+    const Y = p.getBoundingClientRect(), G = e.clientX - Y.left, W = e.clientY - Y.top, H = Y.width / 2, K = Y.height / 2, $ = G - H, q = W - K, T = x / E, U = m.current.translateX, V = m.current.translateY, Z = U - $ * (T - 1) / x, J = V - q * (T - 1) / x;
+    m.current = {
+      scale: x,
+      translateX: Z,
+      translateY: J
+    }, C();
+  }, [o, a, C, b]);
+  return n.length === 0 ? null : /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      ref: w,
+      className: X("fixed inset-0 z-50 bg-black/90 flex items-center justify-center lg:px-16", c),
+      onClick: r,
+      onKeyDown: k,
+      onTouchStart: P,
+      onTouchMove: j,
+      onTouchEnd: z,
+      tabIndex: 0,
+      role: "dialog",
+      "aria-modal": "true",
+      children: [
+        /* @__PURE__ */ t.jsx("div", { className: "absolute top-4 right-4 z-110", children: /* @__PURE__ */ t.jsx(
+          S,
+          {
+            variant: "text",
+            color: "secondary",
+            size: "small",
+            onClick: r,
+            className: "text-white! hover:text-gray-300! w-auto! h-auto! p-2!",
+            "aria-label": "Close gallery",
+            children: /* @__PURE__ */ t.jsx(re, { size: 24 })
+          }
+        ) }),
+        n.length > 1 && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+          /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              className: "absolute left-0 lg:h-full items-center flex justify-center w-16 z-100 cursor-w-resize",
+              onClick: (e) => {
+                e.stopPropagation(), a();
+              },
+              children: /* @__PURE__ */ t.jsx(
+                S,
+                {
+                  variant: "text",
+                  color: "secondary",
+                  size: "small",
+                  onClick: (e) => {
+                    e.stopPropagation(), a();
+                  },
+                  className: "text-white! hover:text-gray-300! w-auto! h-auto! p-2!",
+                  "aria-label": "Previous image",
+                  children: /* @__PURE__ */ t.jsx(ae, { size: 24 })
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            "div",
+            {
+              className: "absolute right-0 lg:h-full items-center flex justify-center w-16 z-100 cursor-e-resize",
+              onClick: (e) => {
+                e.stopPropagation(), o();
+              },
+              children: /* @__PURE__ */ t.jsx(
+                S,
+                {
+                  variant: "text",
+                  color: "secondary",
+                  size: "small",
+                  onClick: (e) => {
+                    e.stopPropagation(), o();
+                  },
+                  className: "text-white! hover:text-gray-300! w-auto! h-auto! p-2!",
+                  "aria-label": "Next image",
+                  children: /* @__PURE__ */ t.jsx(se, { size: 24 })
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            ref: y,
+            onClick: (e) => e.stopPropagation(),
+            className: "relative max-w-[90vw] max-h-[98vh] mx-auto  flex flex-col w-max lg:h-full h-max",
+            onWheel: f,
+            children: /* @__PURE__ */ t.jsx(
+              "div",
+              {
+                className: "max-h-[98vh] relative overflow-hidden w-full h-full",
+                style: {
+                  animation: "galleryFadeIn 0.6s ease-in-out"
+                },
+                ref: h,
+                children: /* @__PURE__ */ t.jsx(
+                  "img",
+                  {
+                    src: n[l].src,
+                    alt: n[l].alt,
+                    className: X(
+                      " w-full h-full object-contain select-none",
+                      "prometeo-lightbox-image"
+                    ),
+                    onLoad: () => b()
+                  }
+                )
+              },
+              l
+            )
+          }
+        ),
+        d && /* @__PURE__ */ t.jsx("div", { className: " w-full absolute items-center flex justify-center left-0 right-0 z-100 bottom-0", children: /* @__PURE__ */ t.jsx(_, { images: n, currentIndex: l, goToIndex: N, thumbnailsClassName: s }) }),
+        n.length > 1 && /* @__PURE__ */ t.jsxs("div", { className: "absolute bottom-20 left-1/2 transform -translate-x-1/2 text-neutral-default-default prometeo-fonts-label-xlarge px-4 py-2 rounded-full", children: [
+          l + 1,
+          " / ",
+          n.length
+        ] })
+      ]
+    }
+  );
+});
+O.displayName = "LightBox";
+const le = (n, c) => {
+  if (n.currentIndex !== c.currentIndex || n.thumbnailsClassName !== c.thumbnailsClassName || n.images.length !== c.images.length) return !1;
+  for (let r = 0; r < n.images.length; r++)
+    if (n.images[r].src !== c.images[r].src) return !1;
+  return !0;
+}, _ = M(({ images: n, currentIndex: c, goToIndex: r, thumbnailsClassName: d }) => /* @__PURE__ */ t.jsxs(
+  "div",
+  {
+    className: "flex gap-4 w-max overflow-x-auto overflow-y-visible max-w-full px-16 py-4",
+    style: {
+      scrollbarWidth: "none",
+      msOverflowStyle: "none",
+      WebkitOverflowScrolling: "touch"
+    },
+    children: [
+      /* @__PURE__ */ t.jsx("style", { children: `
+                .flex.gap-4.w-max::-webkit-scrollbar {
+                    display: none;
+                }
+            ` }),
+      n.map((s, l) => /* @__PURE__ */ t.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (o) => {
+            o.stopPropagation(), r(l);
+          },
+          className: X(
+            "w-16 h-16 aspect-square min-w-16 rounded overflow-hidden transition-all duration-300 hover:scale-125 cursor-pointer",
+            d,
+            l === c ? "scale-110" : ""
+          ),
+          children: /* @__PURE__ */ t.jsx(
+            "img",
+            {
+              src: s.src,
+              alt: s.alt,
+              className: "w-full h-full object-cover select-none"
+            }
+          )
+        },
+        s.src
+      ))
+    ]
+  }
+), le);
+_.displayName = "Thumbnails";
+const oe = A(
+  (n, c) => {
+    const {
+      children: r,
+      className: d,
+      lightboxClassName: s,
+      showThumbnails: l,
+      thumbnailsClassName: o
+    } = n, [a, N] = R([]), [h, y] = R(!1), [w, m] = R(0), u = r ? Array.isArray(r) ? r : [r] : [], k = i((f) => {
+      N((e) => e.some((p) => p.src === f.src) ? e : [...e, f]);
+    }, []), P = i((f = 0) => {
+      m(f), y(!0);
+    }, []), j = i(() => {
+      y(!1);
+    }, []);
+    te(
+      c,
+      () => ({
+        openLightbox: P,
+        closeLightbox: j,
+        isOpen: h,
+        addImage: k,
+        images: a
+      }),
+      [a]
+    );
+    const z = i(() => {
+      m((f) => (f + 1) % a.length);
+    }, [a.length]), C = i(() => {
+      m((f) => (f - 1 + a.length) % a.length);
+    }, [a.length]), b = i((f) => {
+      m(f);
+    }, []);
+    return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      /* @__PURE__ */ t.jsx(
+        L,
+        {
+          images: u,
+          className: d,
+          ref: c
+        }
+      ),
+      h && /* @__PURE__ */ t.jsx(
+        O,
+        {
+          images: a,
+          closeLightbox: j,
+          showThumbnails: l,
+          lightboxClassName: s,
+          thumbnailsClassName: o,
+          currentIndex: w,
+          goToNext: z,
+          goToPrevious: C,
+          goToIndex: b
+        }
+      )
+    ] });
+  }
+);
+oe.displayName = "ImageGallery";
+export {
+  oe as I
+};

package/dist/{components/Image/useImageGallery.js → ImageGallery.es.js}

@@ -1,3 +1,4 @@
+import { I as p } from "./ImageGallery-Ckxg9OIC.js";
 import { useRef as u, useCallback as r } from "react";
 const g = () => {
   const e = u(null), t = r((a) => {
@@ -17,5 +18,6 @@ const g = () => {
   };
 };
 export {
+  p as default,
   g as useImageGallery
 };