prometeo-design-system 2.3.1 → 2.3.3

package/dist/useDragScroll-CHN9OMwn.js

@@ -0,0 +1,165 @@
+import { useRef as d, useEffect as X, useCallback as o, useMemo as A } from "react";
+function I(i) {
+  const c = d({
+    axis: "x",
+    friction: 0.9,
+    minVelocity: 0.5,
+    startMomentumThreshold: 1,
+    momentum: !0,
+    clickThreshold: 5,
+    cursor: { idle: i?.cursor?.idle || "grab", dragging: i?.cursor?.dragging || "grabbing" },
+    preventTextSelection: !0,
+    normalizeFrameMs: 16,
+    disabled: !1
+  });
+  X(() => {
+    i && (c.current = {
+      ...c.current,
+      ...i,
+      cursor: {
+        ...c.current.cursor,
+        ...i.cursor || {}
+      }
+    });
+  }, [i]);
+  const f = d(null), r = d({
+    isDragging: !1,
+    startX: 0,
+    startY: 0,
+    scrollLeft: 0,
+    scrollTop: 0,
+    totalDistance: 0,
+    lastX: 0,
+    lastY: 0,
+    lastTime: 0,
+    vx: 0,
+    vy: 0,
+    pointerId: -1,
+    captured: !1,
+    dragged: !1,
+    suppressClickOnce: !1
+  }), a = d({}), m = d(null), h = o(() => {
+    m.current && (cancelAnimationFrame(m.current), m.current = null);
+  }, []), T = o(() => {
+    const t = f.current;
+    if (!t) return;
+    const { friction: e, minVelocity: u } = c.current, n = () => {
+      const { vx: s, vy: l } = r.current, g = Math.abs(s), p = Math.abs(l);
+      g > u || p > u ? (t.scrollLeft -= s, t.scrollTop -= l, r.current.vx *= e, r.current.vy *= e, m.current = requestAnimationFrame(n)) : (r.current.vx = 0, r.current.vy = 0, h());
+    };
+    n();
+  }, [h]), b = o((t) => {
+    const e = f.current;
+    if (!e || c.current.disabled || t.button !== 0) return;
+    h();
+    const u = Date.now(), n = e.offsetLeft, s = e.offsetTop;
+    a.current = {
+      cursor: e.style.cursor,
+      userSelect: e.style.userSelect,
+      scrollBehavior: e.style.scrollBehavior,
+      touchAction: e.style.touchAction
+    }, c.current.preventTextSelection && (e.style.userSelect = "none"), e.style.scrollBehavior = "auto", e.style.touchAction = "none", r.current = {
+      isDragging: !0,
+      startX: t.pageX - n,
+      startY: t.pageY - s,
+      scrollLeft: e.scrollLeft,
+      scrollTop: e.scrollTop,
+      totalDistance: 0,
+      lastX: t.pageX - n,
+      lastY: t.pageY - s,
+      lastTime: u,
+      vx: 0,
+      vy: 0,
+      pointerId: t.pointerId,
+      captured: !1,
+      dragged: !1,
+      suppressClickOnce: !1
+    };
+  }, [h]), x = o((t) => {
+    const e = f.current;
+    if (!e || !r.current.isDragging || c.current.disabled) return;
+    const u = Date.now(), n = t.pageX - e.offsetLeft, s = t.pageY - e.offsetTop, l = n - r.current.startX, g = s - r.current.startY, p = u - r.current.lastTime, Y = Math.abs(n - r.current.lastX) + Math.abs(s - r.current.lastY);
+    r.current.totalDistance += Y;
+    const k = c.current.clickThreshold, v = c.current.axis, P = v === "x" ? Math.abs(l) : v === "y" ? Math.abs(g) : Math.max(Math.abs(l), Math.abs(g));
+    if (!r.current.captured && P < k) {
+      r.current.lastX = n, r.current.lastY = s, r.current.lastTime = u;
+      return;
+    }
+    if (!r.current.captured) {
+      try {
+        t.currentTarget.setPointerCapture?.(t.pointerId);
+      } catch {
+      }
+      r.current.captured = !0, r.current.dragged = !0, e.style.cursor = c.current.cursor.dragging || "grabbing";
+    }
+    if (t.preventDefault(), p > 0) {
+      const S = c.current.normalizeFrameMs;
+      r.current.vx = (n - r.current.lastX) / p * S, r.current.vy = (s - r.current.lastY) / p * S;
+    }
+    r.current.lastX = n, r.current.lastTime = u, r.current.lastY = s, v === "x" ? e.scrollLeft = r.current.scrollLeft - l : (v === "y" || (e.scrollLeft = r.current.scrollLeft - l), e.scrollTop = r.current.scrollTop - g);
+  }, []), y = o(() => {
+    const t = f.current;
+    if (!t) return;
+    t.style.cursor = c.current.cursor.idle || "grab", c.current.preventTextSelection && a.current.userSelect !== void 0 && (t.style.userSelect = a.current.userSelect), a.current.scrollBehavior !== void 0 && (t.style.scrollBehavior = a.current.scrollBehavior), a.current.touchAction !== void 0 && (t.style.touchAction = a.current.touchAction);
+    const { momentum: e, startMomentumThreshold: u } = c.current;
+    e && r.current.dragged && Math.max(Math.abs(r.current.vx), Math.abs(r.current.vy)) > u && T(), r.current.suppressClickOnce = r.current.dragged, r.current.isDragging = !1;
+  }, [T]), D = o((t) => {
+    if (r.current.isDragging) {
+      if (r.current.captured) {
+        try {
+          t.currentTarget.releasePointerCapture?.(t.pointerId);
+        } catch {
+        }
+        r.current.captured = !1;
+      }
+      y();
+    }
+  }, [y]), M = o((t) => {
+    if (r.current.isDragging) {
+      if (r.current.captured) {
+        try {
+          t.currentTarget.releasePointerCapture?.(t.pointerId);
+        } catch {
+        }
+        r.current.captured = !1;
+      }
+      y();
+    }
+  }, [y]), C = o((t) => {
+    r.current.suppressClickOnce && (t.preventDefault(), t.stopPropagation(), r.current.suppressClickOnce = !1);
+  }, []), L = o((t) => {
+    if (r.current.captured) {
+      try {
+        t.currentTarget.releasePointerCapture?.(t.pointerId);
+      } catch {
+      }
+      r.current.captured = !1;
+    }
+    r.current.isDragging = !1;
+  }, []);
+  return X(() => {
+    const t = f.current;
+    t && !c.current.disabled && c.current.cursor.idle && (t.style.cursor = c.current.cursor.idle);
+  }, []), A(() => ({
+    ref: f,
+    bind: {
+      onPointerDown: b,
+      onPointerMove: x,
+      onPointerUp: D,
+      onPointerLeave: M,
+      onPointerCancel: L,
+      onClickCapture: C
+    },
+    isDraggingRef: {
+      get current() {
+        return r.current.isDragging;
+      },
+      set current(t) {
+        r.current.isDragging = t;
+      }
+    }
+  }), [b, x, D, M, L, C]);
+}
+export {
+  I as u
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "2.3.1",
+  "version": "2.3.3",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",
@@ -145,15 +145,15 @@
       "types": "./dist/SegmentedButton.d.ts",
       "import": "./dist/SegmentedButton.es.js"
     },
-    "./DatePicker":{
+    "./DatePicker": {
       "types": "./dist/DatePicker.d.ts",
       "import": "./dist/DatePicker.es.js"
     },
-    "./ImageGallery":{
+    "./ImageGallery": {
       "types": "./dist/ImageGallery.d.ts",
       "import": "./dist/ImageGallery.es.js"
     },
-    "./Image":{
+    "./Image": {
       "types": "./dist/Image.d.ts",
       "import": "./dist/Image.es.js"
     },

package/src/styles/intellisense.css

@@ -212,3 +212,8 @@
 @utility ring-error-default-hover { --intellisense-ring-error-default-hover: 1; }
 @utility ring-error-default-pressed { --intellisense-ring-error-default-pressed: 1; }
 @utility ring-error-default-focused { --intellisense-ring-error-default-focused: 1; }
+@utility prometeo-scrollbar-thin { --intellisense-prometeo-scrollbar-thin: 1; }
+@utility scrollbar-stable { --intellisense-scrollbar-stable: 1; }
+@utility prometeo-scrollbar-overlay { --intellisense-prometeo-scrollbar-overlay: 1; }
+@utility prometeo-scrollbar-overlay-x { --intellisense-prometeo-scrollbar-overlay-x: 1; }
+@utility prometeo-scrollbar-none { --intellisense-prometeo-scrollbar-none: 1; }

package/dist/ImageGallery-O5Y4oBrD.js

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

package/dist/lib/utils.d.ts

@@ -1 +0,0 @@
-export declare function findScrollableAncestors(startElement: HTMLElement): HTMLElement[];

package/dist/preview/Select.d.ts

@@ -1,2 +0,0 @@
-declare const SelectPreview: () => import("react/jsx-runtime").JSX.Element;
-export default SelectPreview;