prometeo-design-system 2.3.1 → 2.3.3

package/dist/ImageGallery-DnoRTpCr.js

@@ -0,0 +1,317 @@
+import { j as t } from "./jsx-runtime-DKDX3adD.js";
+import ee, { memo as D, forwardRef as L, useRef as v, useEffect as te, useCallback as i, useState as R, useImperativeHandle as ne } from "react";
+import { c as X } from "./cn-B6yFEsav.js";
+import { u as re } from "./useDragScroll-CHN9OMwn.js";
+import { B as S } from "./Button-DsbEyjth.js";
+import { Icons as M } from "./Icons.es.js";
+const O = D(L(({ images: n, className: c }, r) => {
+  const { ref: d, bind: a } = re({
+    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: a.onPointerDown,
+      onPointerMove: a.onPointerMove,
+      onPointerUp: a.onPointerUp,
+      onPointerLeave: a.onPointerLeave,
+      onPointerCancel: a.onPointerCancel,
+      onClickCapture: a.onClickCapture,
+      "aria-label": "Image gallery",
+      children: n && n.length > 0 && n.map((l, o) => ee.cloneElement(l, {
+        key: l.props.src || o,
+        ...l.props,
+        galleryRef: r,
+        allowPreview: !0
+      }))
+    }
+  );
+}));
+O.displayName = "GalleryPreview";
+const B = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails: d, thumbnailsClassName: a, currentIndex: l, goToNext: o, goToPrevious: s, 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
+  });
+  te(() => {
+    w.current && w.current.focus();
+  }, []);
+  const k = i((e) => {
+    e.preventDefault(), e.stopPropagation(), e.key === "Escape" ? r() : e.key === "ArrowLeft" ? s() : e.key === "ArrowRight" && o();
+  }, [r, s, o]), I = 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 };
+  }, []), P = 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() : s());
+  }, [o, s]), C = i(() => {
+    const e = h.current;
+    if (!e) return;
+    const { scale: g, translateX: p, translateY: z } = m.current;
+    e.style.transform = `scale(${g}) translate(${p}px, ${z}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 && s();
+      return;
+    }
+    const z = 2e-3, E = 1, F = 8, G = -e.deltaY * z, T = m.current.scale;
+    let x = T + G;
+    if (x = Math.max(E, Math.min(F, x)), x === E) {
+      b();
+      return;
+    }
+    const Y = p.getBoundingClientRect(), W = e.clientX - Y.left, H = e.clientY - Y.top, K = Y.width / 2, $ = Y.height / 2, q = W - K, U = H - $, A = x / T, V = m.current.translateX, Z = m.current.translateY, J = V - q * (A - 1) / x, Q = Z - U * (A - 1) / x;
+    m.current = {
+      scale: x,
+      translateX: J,
+      translateY: Q
+    }, C();
+  }, [o, s, 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: I,
+      onTouchMove: j,
+      onTouchEnd: P,
+      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(M.Close, { 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(), s();
+              },
+              children: /* @__PURE__ */ t.jsx(
+                S,
+                {
+                  variant: "text",
+                  color: "secondary",
+                  size: "small",
+                  onClick: (e) => {
+                    e.stopPropagation(), s();
+                  },
+                  className: "!text-white hover:!text-gray-300 !w-auto !h-auto !p-2",
+                  "aria-label": "Previous image",
+                  children: /* @__PURE__ */ t.jsx(M.CrevronLeft, { 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(M.CrevronRight, { 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: a }) }),
+        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
+        ] })
+      ]
+    }
+  );
+});
+B.displayName = "LightBox";
+const se = (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;
+}, _ = D(({ 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((a, 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: a.src,
+              alt: a.alt,
+              className: "w-full h-full object-cover select-none"
+            }
+          )
+        },
+        a.src
+      ))
+    ]
+  }
+), se);
+_.displayName = "Thumbnails";
+const ae = L(
+  (n, c) => {
+    const {
+      children: r,
+      className: d,
+      lightboxClassName: a,
+      showThumbnails: l,
+      thumbnailsClassName: o
+    } = n, [s, 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]);
+    }, []), I = i((f = 0) => {
+      m(f), y(!0);
+    }, []), j = i(() => {
+      y(!1);
+    }, []);
+    ne(
+      c,
+      () => ({
+        openLightbox: I,
+        closeLightbox: j,
+        isOpen: h,
+        addImage: k,
+        images: s
+      }),
+      [s]
+    );
+    const P = i(() => {
+      m((f) => (f + 1) % s.length);
+    }, [s.length]), C = i(() => {
+      m((f) => (f - 1 + s.length) % s.length);
+    }, [s.length]), b = i((f) => {
+      m(f);
+    }, []);
+    return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      /* @__PURE__ */ t.jsx(
+        O,
+        {
+          images: u,
+          className: d,
+          ref: c
+        }
+      ),
+      h && /* @__PURE__ */ t.jsx(
+        B,
+        {
+          images: s,
+          closeLightbox: j,
+          showThumbnails: l,
+          lightboxClassName: a,
+          thumbnailsClassName: o,
+          currentIndex: w,
+          goToNext: P,
+          goToPrevious: C,
+          goToIndex: b
+        }
+      )
+    ] });
+  }
+);
+ae.displayName = "ImageGallery";
+export {
+  ae as I
+};

package/dist/ImageGallery.es.js

@@ -1,4 +1,4 @@
-import { I as p } from "./ImageGallery-O5Y4oBrD.js";
+import { I as p } from "./ImageGallery-DnoRTpCr.js";
 import { useRef as u, useCallback as r } from "react";
 const g = () => {
   const e = u(null), t = r((a) => {

package/dist/Input.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-ByW6EXIE.js";
+import { j as t } from "./jsx-runtime-DKDX3adD.js";
 import { Icons as J } from "./Icons.es.js";
 import { c as e } from "./cn-B6yFEsav.js";
 import { memo as xe, useState as H, useRef as K, useCallback as me, useEffect as L, useLayoutEffect as ge } from "react";

package/dist/InputFormik.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { j as e } from "./jsx-runtime-DKDX3adD.js";
 import { c as u } from "./cn-B6yFEsav.js";
 import { FastField as O, ErrorMessage as q } from "formik";
 import { memo as G, useState as I, useRef as H, useCallback as y, useLayoutEffect as J } from "react";

package/dist/InputMultiple.es.js

@@ -1,4 +1,4 @@
-import { j as r } from "./jsx-runtime-ByW6EXIE.js";
+import { j as r } from "./jsx-runtime-DKDX3adD.js";
 import { Icons as C } from "./Icons.es.js";
 import { c as d } from "./cn-B6yFEsav.js";
 import S, { useRef as M, useState as x, useCallback as T, useEffect as ee } from "react";

package/dist/{LayoutGeneric-jDE96L2N.js → LayoutGeneric-p4Pll4Cm.js}

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-ByW6EXIE.js";
+import { j as t } from "./jsx-runtime-DKDX3adD.js";
 import { useRef as a, createContext as i, useContext as u, memo as c } from "react";
 const o = i(null), l = ({ children: e }) => {
   const r = a(null), s = (n) => {

package/dist/LayoutGeneric.es.js

@@ -1,4 +1,4 @@
-import { L as f } from "./LayoutGeneric-jDE96L2N.js";
+import { L as f } from "./LayoutGeneric-p4Pll4Cm.js";
 export {
   f as default
 };

package/dist/Logo.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { j as e } from "./jsx-runtime-DKDX3adD.js";
 import { Icons as t } from "./Icons.es.js";
 const s = () => /* @__PURE__ */ e.jsxs("div", { className: "container-logo flex items-center justify-center gap-1 bg-gradient-to-br from-[#312C85] to-[#1E1A4D] rounded-md min-w-[185px]", children: [
   /* @__PURE__ */ e.jsx(t.TicketFilled, { size: 28, className: "rotate-140 text-primary-medium-pressed icon-logo" }),

package/dist/Menu.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { j as e } from "./jsx-runtime-DKDX3adD.js";
 import { c as r } from "./cn-B6yFEsav.js";
 import { AnimatePresence as n, motion as o } from "framer-motion";
 const s = ({ menuRef: t, children: a, className: i }) => /* @__PURE__ */ e.jsx("div", { ref: t, className: r("flex bg-neutral-default-default absolute bottom-10 left-24 border-1 border-neutral-strong-default h-auto w-60 rounded-md px-2", i), children: /* @__PURE__ */ e.jsx(n, { mode: "wait", children: /* @__PURE__ */ e.jsx(

package/dist/OtpInput.es.js

@@ -1,4 +1,4 @@
-import { j as p } from "./jsx-runtime-ByW6EXIE.js";
+import { j as p } from "./jsx-runtime-DKDX3adD.js";
 import { Icons as ve } from "./Icons.es.js";
 import { c as L } from "./cn-B6yFEsav.js";
 import * as n from "react";

package/dist/Pagination.es.js

@@ -1,4 +1,4 @@
-import { j as t } from "./jsx-runtime-ByW6EXIE.js";
+import { j as t } from "./jsx-runtime-DKDX3adD.js";
 import { motion as a } from "framer-motion";
 function h({
   currentPage: i = 1,

package/dist/ProfilePictureUpload.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { j as e } from "./jsx-runtime-DKDX3adD.js";
 import { motion as i, AnimatePresence as E } from "framer-motion";
 import { useRef as v, useState as R, useLayoutEffect as A } from "react";
 import H from "./Avatar.es.js";

package/dist/ProgressBar.es.js

@@ -1,4 +1,4 @@
-import { j as e } from "./jsx-runtime-ByW6EXIE.js";
+import { j as e } from "./jsx-runtime-DKDX3adD.js";
 import { c as x } from "./cn-B6yFEsav.js";
 import u from "react";
 const j = u.forwardRef(

package/dist/SegmentedButton.es.js

@@ -1,4 +1,4 @@
-import { j as u } from "./jsx-runtime-ByW6EXIE.js";
+import { j as u } from "./jsx-runtime-DKDX3adD.js";
 import { c as d } from "./cn-B6yFEsav.js";
 import z, { useState as M, useMemo as C, useEffect as L } from "react";
 import { motion as E } from "framer-motion";