prometeo-design-system 2.8.5 → 2.8.7

package/dist/components/Drawer/DrawerMobile.js

@@ -0,0 +1,219 @@
+import { jsx as H, jsxs as K, Fragment as X } from "react/jsx-runtime";
+import { cn as _ } from "../../lib/cn.js";
+import { forwardRef as Z, useState as q, useRef as h, useEffect as v, useCallback as u, useMemo as U, useImperativeHandle as P } from "react";
+import { createPortal as ee } from "react-dom";
+const B = 44, te = "height 0.5s cubic-bezier(0.32, 0.72, 0, 1)", ie = Z((w, o) => {
+  const { children: T, defaultOpen: s = !1, onClose: m, snapPoints: y = ["60%"], setSnap: x, snap: f, attachToParent: E = !1 } = w, [L, D] = q(f || "0%"), [Y, r] = q(null), k = h(m), $ = h(x), l = h(Y), d = h(/* @__PURE__ */ new Set());
+  k.current = m, l.current = Y, v(() => {
+    s && M();
+  }, [s]), v(() => {
+    $.current = x;
+  }, [x]);
+  const R = u(() => {
+    D("0%"), k.current?.(l.current), setTimeout(() => r(null), 300);
+  }, []), M = u((a, z) => {
+    D(a || y[0] || "60%"), r(z ?? null);
+  }, [y]), p = U(() => L !== "0%", [L]);
+  v(() => {
+    d.current.forEach((a) => {
+      try {
+        a(p);
+      } catch {
+      }
+    });
+  }, [p]), P(o, () => ({
+    open: M,
+    close: R,
+    isOpen: p,
+    subscribeOpenChange: (a) => (d.current.add(a), () => {
+      d.current.delete(a);
+    }),
+    getContext: () => l.current
+  }), [M, R, p]);
+  const F = f || L;
+  return E ? /* @__PURE__ */ H(Q, { ...w, snap: F, setSnap: D, context: Y, children: T }) : ee(/* @__PURE__ */ H(Q, { ...w, snap: F, setSnap: D, context: Y, children: T }), document.body);
+}), Q = ({ children: w, attachToParent: o = !1, className: T, snap: s, snapPoints: m = ["60%"], setSnap: y, hideOnClose: x = !1, unmountChildrenOnClose: f = !1, header: E, modal: L = !1, closeOnOverlayClick: D = !1, context: Y }) => {
+  const r = h(null), k = h(null), $ = h(null), l = h(null), d = h(null), R = u(() => {
+    if (!r.current) return [];
+    const e = o && r.current.parentElement?.offsetHeight || window.innerHeight;
+    return m?.map((t) => typeof t == "string" && t.endsWith("%") ? parseFloat(t) > 100 ? e : parseFloat(t) / 100 * e : typeof t == "string" && t.endsWith("px") ? parseFloat(t) : typeof t == "number" && t >= 0 && t <= 1 ? t * e : typeof t == "number" ? t : 0) || [];
+  }, [m, o]), M = u((e, t) => {
+    const n = R();
+    if (n.length === 0) return e;
+    if (Math.abs(t) > 0.05)
+      if (t > 0) {
+        const c = n.filter((i) => i < e);
+        return c.length > 0 ? Math.max(...c) : x ? 0 : B;
+      } else {
+        const c = n.filter((i) => i > e);
+        if (c.length > 0)
+          return Math.min(...c);
+      }
+    return n.reduce((c, i) => Math.abs(i - e) < Math.abs(c - e) ? i : c);
+  }, [R]), p = u((e) => {
+    if (y && m) {
+      const t = o && r.current?.parentElement?.offsetHeight || window.innerHeight, n = e <= B ? "0%" : `${Math.round(e / t * 100)}%`;
+      y(n);
+    }
+  }, [y, m, o]), F = u((e) => {
+    r.current && (r.current.style.transition = te, r.current.style.height = `${e}px`);
+  }, [y, m, o]), N = u(() => {
+    if (d.current && o) {
+      const { scrollY: e } = d.current;
+      document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, e), d.current = null;
+    }
+  }, [o]);
+  v(() => () => {
+    N();
+  }, [N]), v(() => {
+    if (!r.current || !s) return;
+    const e = o && r.current.parentElement?.offsetHeight || window.innerHeight;
+    let t = 0;
+    typeof s == "string" && s.endsWith("%") ? parseFloat(s) <= 0 ? t = x ? 0 : B : t = parseFloat(s) / 100 * e : typeof s == "string" && s.endsWith("px") ? t = parseFloat(s) : typeof s == "number" && (s >= 0 && s <= 1 ? t = s * e : t = s), F(t);
+  }, [s, o]);
+  const a = u((e) => {
+    if (!r.current) return;
+    const t = e.touches[0], n = r.current.offsetHeight;
+    l.current = {
+      isDragging: !1,
+      startY: t.clientY,
+      startHeight: n,
+      lastY: t.clientY,
+      lastTime: Date.now(),
+      velocity: 0
+    };
+  }, []), z = u((e) => {
+    if (!r.current) return;
+    const t = e, n = r.current.offsetHeight;
+    l.current = {
+      isDragging: !1,
+      startY: t.clientY,
+      startHeight: n,
+      lastY: t.clientY,
+      lastTime: Date.now(),
+      velocity: 0
+    };
+  }, []), G = u((e) => {
+    if (!l.current || !r.current) return;
+    const t = e.touches[0], n = l.current, S = n.startY - t.clientY, c = n.isDragging || Math.abs(S) > 5;
+    if (!n.isDragging && c && (n.isDragging = !0, o)) {
+      const i = window.scrollY;
+      d.current = { scrollY: i }, document.body.style.position = "fixed", document.body.style.top = `-${i}px`, document.body.style.width = "100%";
+    }
+    if (c) {
+      e.preventDefault();
+      const i = Date.now(), I = i - n.lastTime;
+      if (I > 0) {
+        const O = (t.clientY - n.lastY) / I;
+        n.velocity = n.velocity * 0.8 + O * 0.2;
+      }
+      n.lastY = t.clientY, n.lastTime = i;
+      const W = n.startHeight + S, j = o && r.current.parentElement?.offsetHeight || window.innerHeight, A = Math.max(0, Math.min(W, j));
+      r.current.style.transition = "none", r.current.style.height = `${A}px`;
+    }
+  }, [o]), C = u((e) => {
+    if (!l.current || !r.current) return;
+    const t = e, n = l.current, S = n.startY - t.clientY, c = n.isDragging || Math.abs(S) > 5;
+    if (!n.isDragging && c && (n.isDragging = !0, o)) {
+      const i = window.scrollY;
+      d.current = { scrollY: i }, document.body.style.position = "fixed", document.body.style.top = `-${i}px`, document.body.style.width = "100%";
+    }
+    if (c) {
+      e.preventDefault();
+      const i = Date.now(), I = i - n.lastTime;
+      if (I > 0) {
+        const O = (t.clientY - n.lastY) / I;
+        n.velocity = n.velocity * 0.8 + O * 0.2;
+      }
+      n.lastY = t.clientY, n.lastTime = i;
+      const W = n.startHeight + S, j = o && r.current.parentElement?.offsetHeight || window.innerHeight, A = Math.max(0, Math.min(W, j));
+      r.current.style.transition = "none", r.current.style.height = `${A}px`;
+    }
+  }, [o]), g = u(() => {
+    if (!l.current || !r.current) return;
+    const e = l.current;
+    if (e.isDragging) {
+      N();
+      const t = r.current.offsetHeight, n = M(t, e.velocity);
+      p(n);
+    }
+    l.current = null;
+  }, [M, F, N]);
+  v(() => {
+    const e = $.current;
+    if (e)
+      return e.addEventListener("touchstart", a, { passive: !1 }), e.addEventListener("touchmove", G, { passive: !1 }), e.addEventListener("touchend", g), e.addEventListener("touchcancel", g), e.addEventListener("mousedown", z, { passive: !1 }), e.addEventListener("mousemove", C, { passive: !1 }), e.addEventListener("mouseup", g), e.addEventListener("mouseleave", g), () => {
+        e.removeEventListener("touchstart", a), e.removeEventListener("touchmove", G), e.removeEventListener("touchend", g), e.removeEventListener("touchcancel", g), e.removeEventListener("mousedown", z), e.removeEventListener("mousemove", C), e.removeEventListener("mouseup", g), e.removeEventListener("mouseleave", g);
+      };
+  }, [a, G, g]);
+  const b = U(() => s !== "0%", [s]), [V, J] = q(() => f ? s !== "0%" : !0);
+  return v(() => {
+    f && b && J(!0);
+  }, [b, f]), v(() => {
+    if (!f) return;
+    const e = r.current;
+    if (!e) return;
+    const t = (n) => {
+      n.propertyName === "height" && !b && s === "0%" && J(!1);
+    };
+    return e.addEventListener("transitionend", t), () => {
+      e.removeEventListener("transitionend", t);
+    };
+  }, [b, s, f]), /* @__PURE__ */ K(X, { children: [
+    L && /* @__PURE__ */ H(
+      "div",
+      {
+        className: _(b ? "fixed inset-0 bg-black/40 z-55 cursor-default" : "hidden"),
+        onClick: (e) => {
+          e.preventDefault(), e.stopPropagation(), D && p(0);
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ K(
+      "div",
+      {
+        ref: r,
+        className: _(
+          o ? "absolute" : "fixed",
+          "z-60 bottom-0 w-full overflow-hidden",
+          "bg-neutral-default-default",
+          "border-t border-neutral-strong-default rounded-t-[12px]",
+          b ? "" : "border-neutral-weak",
+          T,
+          "flex flex-col items-center",
+          "touch-none select-none"
+        ),
+        children: [
+          /* @__PURE__ */ H(
+            "div",
+            {
+              ref: $,
+              className: "w-full  absolute top-0 h-11 flex items-center justify-center cursor-grab active:cursor-grabbing z-50 bg-inherit!",
+              children: /* @__PURE__ */ H("span", { className: "w-12 h-1 rounded-full bg-neutral-weak-default" })
+            }
+          ),
+          typeof E == "string" ? /* @__PURE__ */ H("p", { className: " prometeo-fonts-headline-small text-neutral-default-default w-full h-11 bg-inherit absolute top-11 z-50 px-4", children: E }) : E,
+          /* @__PURE__ */ H(
+            "div",
+            {
+              ref: k,
+              className: _(
+                "w-full h-full overflow-y-auto px-4 pb-4 ",
+                E ? "mt-22" : "mt-11"
+              ),
+              style: {
+                overscrollBehavior: "contain",
+                overflow: b ? "auto" : "hidden"
+              },
+              children: (!f || V) && (typeof w == "function" ? w(Y) : w)
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+export {
+  ie as default
+};

package/dist/components/Drawer/useDrawerDesktop.js

@@ -0,0 +1,18 @@
+import { useRef as u, useCallback as t } from "react";
+const p = () => {
+  const e = u(null), n = t((c) => {
+    e.current?.open(c);
+  }, []), r = t(() => {
+    e.current?.close();
+  }, []), o = t(() => e.current?.isOpen ?? !1, []), s = t(() => e.current?.getContext() ?? null, []);
+  return {
+    isOpen: o,
+    open: n,
+    close: r,
+    drawerRef: e,
+    getContext: s
+  };
+};
+export {
+  p as useDrawerDesktop
+};

package/dist/components/Drawer/useDrawerMobile.js

@@ -0,0 +1,27 @@
+import { useRef as b, useState as i, useCallback as r, useEffect as p } from "react";
+const C = () => {
+  const e = b(null), [s, u] = i(!1), c = r((t, n) => {
+    e.current?.open(t, n);
+  }, []), o = r(() => {
+    e.current?.close();
+  }, []), a = r(() => e.current?.getContext() ?? null, []);
+  return p(() => {
+    const t = e.current?.subscribeOpenChange;
+    if (!t) return;
+    const n = t((l) => {
+      u(l);
+    });
+    return () => {
+      n && n();
+    };
+  }, [e.current?.subscribeOpenChange]), {
+    isOpen: s,
+    open: c,
+    close: o,
+    drawerRef: e,
+    getContext: a
+  };
+};
+export {
+  C as useDrawerMobile
+};

package/dist/components/DropZone/DropZone.js

@@ -0,0 +1,86 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { Error as R, Upload as j } from "../../Icons/Icons.js";
+import { cn as i } from "../../lib/cn.js";
+import w, { useCallback as q } from "react";
+import { useDropzone as A } from "react-dropzone";
+const E = w.forwardRef(
+  ({
+    onFilesAccepted: m,
+    onFilesRejected: n,
+    className: p,
+    subtitle: f = "Arrastra y suelta el archivo aquí o haz clic para cargarlo desde tu computadora",
+    acceptedFormats: h = ".PNG, .JPG, .TXT o .PDF. Máx 100 BM.",
+    variant: x = "default",
+    disabled: l = !1,
+    showIcon: v = !0,
+    accept: g,
+    maxFiles: N = 1,
+    ...b
+  }, y) => {
+    const D = q((s, o) => {
+      s.length > 0 && m?.(s), o.length > 0 && n?.(o);
+    }, [m, n]), {
+      getRootProps: P,
+      getInputProps: z,
+      isDragActive: a,
+      isDragReject: t,
+      fileRejections: c
+    } = A({
+      onDrop: D,
+      accept: g,
+      maxFiles: N,
+      disabled: l,
+      ...b
+    }), r = c.length > 0;
+    return /* @__PURE__ */ e("div", { className: i("w-full", p), children: /* @__PURE__ */ d(
+      "div",
+      {
+        ref: y,
+        ...P(),
+        className: i(
+          "relative  rounded-lg border  border-dashed transition-all duration-200 h-36",
+          "flex flex-col items-center justify-center text-center",
+          x === "default" ? "p-8 min-h-[200px] " : "p-1 min-h-[120px] h-24 md:h-36",
+          !a && !r && !l && [
+            "border-neutral-default-default",
+            "hover:border-primary/50 hover:bg-primary/5"
+          ],
+          a && !t && [
+            "border-primary bg-primary/10",
+            "ring-2 ring-primary/20"
+          ],
+          (t || r) && [
+            "border-destructive bg-destructive/10",
+            "ring-2 ring-destructive/20"
+          ],
+          l && [
+            "cursor-default opacity-60",
+            "border-muted-foreground/20 bg-muted/30"
+          ]
+        ),
+        children: [
+          /* @__PURE__ */ e("input", { ...z() }),
+          v && /* @__PURE__ */ e("div", { className: "mb-0.5 md:mb-4", children: r || t ? /* @__PURE__ */ e(R, { size: 24, className: " text-destructive" }) : /* @__PURE__ */ e(j, { size: 24, className: i(
+            "w-8 h-8 transition-colors",
+            a ? "text-primary" : "text-neutral-default-default"
+          ) }) }),
+          /* @__PURE__ */ d("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ e("p", { className: i(
+              "text-base font-medium text-neutral-default-default",
+              r || t ? "text-destructive" : a ? "text-primary " : "text-neutral-default-default text-sm font-[400]"
+            ), children: a && !t ? "Suelta los archivos aquí..." : t || r ? "Archivo no válido" : f }),
+            !r && /* @__PURE__ */ e("p", { className: "text-xs text-neutral-medium-default", children: h })
+          ] }),
+          r && /* @__PURE__ */ e("div", { className: "mt-4 space-y-1", children: c.map(({ file: s, errors: o }) => /* @__PURE__ */ d("div", { className: "text-sm text-destructive", children: [
+            /* @__PURE__ */ e("p", { className: "font-medium", children: s.name }),
+            o.map((u) => /* @__PURE__ */ e("p", { className: "text-xs", children: u.message }, u.code))
+          ] }, s.name)) })
+        ]
+      }
+    ) });
+  }
+);
+E.displayName = "DropZone";
+export {
+  E as DropZone
+};

package/dist/components/DropZone/useFileDropzone.js

@@ -0,0 +1,24 @@
+import a from "react";
+import { useDropzone as h } from "react-dropzone";
+function m({
+  onFilesAccepted: o,
+  onFilesRejected: r,
+  ...u
+}) {
+  const p = a.useCallback(
+    (t, f) => {
+      t.length > 0 && o?.(t), f.length > 0 && r?.(f);
+    },
+    [o, r]
+  ), n = h({
+    onDrop: p,
+    ...u
+  });
+  return {
+    ...n,
+    hasErrors: n.fileRejections.length > 0
+  };
+}
+export {
+  m as useFileDropzone
+};

package/dist/{FAButton.es.js → components/FAB/FAButton.js}

@@ -1,9 +1,9 @@
-import { j as c } from "./jsx-runtime-DKDX3adD.js";
+import { jsx as c } from "react/jsx-runtime";
 import u, { memo as n } from "react";
-import { c as f } from "./cn-B6yFEsav.js";
-import { A as v } from "./Icons-DtFC5DJ7.js";
+import { cn as f } from "../../lib/cn.js";
+import { Add as v } from "../../Icons/Icons.js";
 import { createPortal as m } from "react-dom";
-import { c as b } from "./index-BOQuZ0gG.js";
+import { cva as b } from "../../node_modules/class-variance-authority/dist/index.js";
 const h = {
   right: 24,
   bottom: 64,
@@ -75,7 +75,7 @@ const h = {
     }
   }
 ), y = (e) => {
-  const t = e.position || h, a = e.attachToParent || !1, i = e.color || "primary", s = e.icon || v, o = e.disabled || !1, d = e.variant || "fill", l = /* @__PURE__ */ c.jsx(
+  const t = e.position || h, a = e.attachToParent || !1, i = e.color || "primary", s = e.icon || v, o = e.disabled || !1, d = e.variant || "fill", l = /* @__PURE__ */ c(
     "div",
     {
       style: {

package/dist/components/Header/Header.js

@@ -0,0 +1,32 @@
+import { jsx as l, jsxs as m } from "react/jsx-runtime";
+import { cn as a } from "../../lib/cn.js";
+import { motion as d } from "framer-motion";
+import { memo as c } from "react";
+const f = ({ title: e, subtitle: t, children: i, className: r, subtitleClassName: n, titleClassName: s }) => /* @__PURE__ */ l(
+  "header",
+  {
+    className: a(
+      "h-16 flex items-center px-4 sm:h-20 md:h-24 md:px-6 lg:h-28 xl:h-32 2xl:h-36",
+      r
+    ),
+    children: /* @__PURE__ */ m(
+      d.div,
+      {
+        initial: { opacity: 0, y: -10 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.6, ease: "easeOut" },
+        className: "flex justify-between items-center w-full",
+        children: [
+          /* @__PURE__ */ m("div", { className: "flex flex-col leading-6", children: [
+            t && /* @__PURE__ */ l("h3", { className: a(" prometeo-fonts-body-medium text-neutral-medium-default ", n), children: t }),
+            e && /* @__PURE__ */ l("h1", { className: a("prometeo-fonts-headline-small text-neutral-strong-default", s), children: e })
+          ] }),
+          i && /* @__PURE__ */ l("div", { className: "flex gap-4", children: i })
+        ]
+      }
+    )
+  }
+), N = c(f, (e, t) => e.title !== t.title || e.subtitle !== t.subtitle || e.className !== t.className ? !1 : e.children !== t.children ? !e.children && !t.children : !0);
+export {
+  N as default
+};

package/dist/components/Image/GalleryPreview.js

@@ -0,0 +1,40 @@
+import { jsx as i } from "react/jsx-runtime";
+import c, { memo as m, forwardRef as p } from "react";
+import { cn as f } from "../../lib/cn.js";
+import { useDragScroll as u } from "../../hooks/useDragScroll.js";
+const s = m(p(({ images: r, className: n }, t) => {
+  const { ref: l, bind: e } = u({
+    axis: "x",
+    friction: 0.9,
+    minVelocity: 0.5,
+    startMomentumThreshold: 1,
+    momentum: !0,
+    clickThreshold: 5,
+    cursor: { idle: "default", dragging: "grabbing" },
+    preventTextSelection: !0
+  });
+  return /* @__PURE__ */ i(
+    "section",
+    {
+      ref: l,
+      className: f("flex gap-4 w-full overflow-x-auto py-2 relative", n),
+      onPointerDown: e.onPointerDown,
+      onPointerMove: e.onPointerMove,
+      onPointerUp: e.onPointerUp,
+      onPointerLeave: e.onPointerLeave,
+      onPointerCancel: e.onPointerCancel,
+      onClickCapture: e.onClickCapture,
+      "aria-label": "Image gallery",
+      children: r && r.length > 0 && r.map((o, a) => c.cloneElement(o, {
+        key: o.props.src || a,
+        ...o.props,
+        galleryRef: t,
+        allowPreview: !0
+      }))
+    }
+  );
+}));
+s.displayName = "GalleryPreview";
+export {
+  s as default
+};

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

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

package/dist/components/Image/ImageGallery.js

@@ -0,0 +1,68 @@
+import { jsxs as G, Fragment as L, jsx as g } from "react/jsx-runtime";
+import { forwardRef as j, useState as a, useCallback as t, useImperativeHandle as O } from "react";
+import P from "./GalleryPreview.js";
+/* empty css                 */
+import k from "./LightBox.js";
+const v = j(
+  (h, l) => {
+    const {
+      children: o,
+      className: u,
+      lightboxClassName: x,
+      showThumbnails: d,
+      thumbnailsClassName: f
+    } = h, [s, p] = a([]), [i, m] = a(!1), [I, r] = a(0), y = o ? Array.isArray(o) ? o : [o] : [], b = t((e) => {
+      p((n) => n.some((A) => A.src === e.src) ? n : [...n, e]);
+    }, []), N = t((e = 0) => {
+      r(e), m(!0);
+    }, []), c = t(() => {
+      m(!1);
+    }, []);
+    O(
+      l,
+      () => ({
+        openLightbox: N,
+        closeLightbox: c,
+        isOpen: i,
+        addImage: b,
+        images: s
+      }),
+      [s]
+    );
+    const C = t(() => {
+      r((e) => (e + 1) % s.length);
+    }, [s.length]), T = t(() => {
+      r((e) => (e - 1 + s.length) % s.length);
+    }, [s.length]), w = t((e) => {
+      r(e);
+    }, []);
+    return /* @__PURE__ */ G(L, { children: [
+      /* @__PURE__ */ g(
+        P,
+        {
+          images: y,
+          className: u,
+          ref: l
+        }
+      ),
+      i && /* @__PURE__ */ g(
+        k,
+        {
+          images: s,
+          closeLightbox: c,
+          showThumbnails: d,
+          lightboxClassName: x,
+          thumbnailsClassName: f,
+          currentIndex: I,
+          goToNext: C,
+          goToPrevious: T,
+          goToIndex: w
+        }
+      )
+    ] });
+  }
+);
+v.displayName = "ImageGallery";
+export {
+  v as default
+};