prometeo-design-system 3.1.5 → 3.1.7

package/dist/ImageGallery-DG9ovlQ-.js

@@ -0,0 +1,319 @@
+import { j as t } from "./jsx-runtime-GkKLlHH4.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 re } from "./useDragScroll-CHN9OMwn.js";
+import S from "./Button.es.js";
+import { Close as ne } from "./Icons/Close.es.js";
+import { CrevronLeft as se } from "./Icons/CrevronLeft.es.js";
+import { CrevronRight as ae } from "./Icons/CrevronRight.es.js";
+const L = M(A(({ images: r, className: c }, n) => {
+  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: r && r.length > 0 && r.map((l, o) => Q.cloneElement(l, {
+        key: l.props.src || o,
+        ...l.props,
+        galleryRef: n,
+        allowPreview: !0
+      }))
+    }
+  );
+}));
+L.displayName = "GalleryPreview";
+const O = M(({ images: r, lightboxClassName: c, closeLightbox: n, 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
+  });
+  ee(() => {
+    w.current && w.current.focus();
+  }, []);
+  const k = i((e) => {
+    e.preventDefault(), e.stopPropagation(), e.key === "Escape" ? n() : e.key === "ArrowLeft" ? s() : e.key === "ArrowRight" && o();
+  }, [n, s, 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() : s());
+  }, [o, s]), 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 && s();
+      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, s, C, b]);
+  return r.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: n,
+      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: n,
+            className: "text-white! hover:text-gray-300! w-auto! h-auto! p-2!",
+            "aria-label": "Close gallery",
+            children: /* @__PURE__ */ t.jsx(ne, { size: 24 })
+          }
+        ) }),
+        r.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(se, { 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(ae, { 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: r[l].src,
+                    alt: r[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: r, currentIndex: l, goToIndex: N, thumbnailsClassName: a }) }),
+        r.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,
+          " / ",
+          r.length
+        ] })
+      ]
+    }
+  );
+});
+O.displayName = "LightBox";
+const le = (r, c) => {
+  if (r.currentIndex !== c.currentIndex || r.thumbnailsClassName !== c.thumbnailsClassName || r.images.length !== c.images.length) return !1;
+  for (let n = 0; n < r.images.length; n++)
+    if (r.images[n].src !== c.images[n].src) return !1;
+  return !0;
+}, _ = M(({ images: r, currentIndex: c, goToIndex: n, 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;
+                }
+            ` }),
+      r.map((a, l) => /* @__PURE__ */ t.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (o) => {
+            o.stopPropagation(), n(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
+      ))
+    ]
+  }
+), le);
+_.displayName = "Thumbnails";
+const oe = A(
+  (r, c) => {
+    const {
+      children: n,
+      className: d,
+      lightboxClassName: a,
+      showThumbnails: l,
+      thumbnailsClassName: o
+    } = r, [s, N] = R([]), [h, y] = R(!1), [w, m] = R(0), u = n ? Array.isArray(n) ? n : [n] : [], 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: s
+      }),
+      [s]
+    );
+    const z = 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(
+        L,
+        {
+          images: u,
+          className: d,
+          ref: c
+        }
+      ),
+      h && /* @__PURE__ */ t.jsx(
+        O,
+        {
+          images: s,
+          closeLightbox: j,
+          showThumbnails: l,
+          lightboxClassName: a,
+          thumbnailsClassName: o,
+          currentIndex: w,
+          goToNext: z,
+          goToPrevious: C,
+          goToIndex: b
+        }
+      )
+    ] });
+  }
+);
+oe.displayName = "ImageGallery";
+export {
+  oe as I
+};

package/dist/ImageGallery.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/ImageGallery'
+export {}
+import PrometeoDesignSystem from './exports/ImageGallery'
+export default PrometeoDesignSystem
+export * from './exports/ImageGallery'
+export {}

package/dist/ImageGallery.es.js

@@ -0,0 +1,23 @@
+import { I as p } from "./ImageGallery-DG9ovlQ-.js";
+import { useRef as u, useCallback as r } from "react";
+const g = () => {
+  const e = u(null), t = r((a) => {
+    e.current?.addImage(a);
+  }, []), n = r(() => {
+    e.current?.openLightbox();
+  }, []), o = r(() => {
+    e.current?.closeLightbox();
+  }, []), s = r(() => e.current?.isOpen ?? !1, []), c = r(() => e.current?.images ?? [], []);
+  return {
+    isOpen: s,
+    openLightbox: n,
+    closeLightbox: o,
+    galleryRef: e,
+    addImage: t,
+    images: c
+  };
+};
+export {
+  p as default,
+  g as useImageGallery
+};

package/dist/Input.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/Input'
+export {}
+import PrometeoDesignSystem from './exports/Input'
+export default PrometeoDesignSystem
+export * from './exports/Input'
+export {}

package/dist/Input.es.js

@@ -0,0 +1,220 @@
+import { j as t } from "./jsx-runtime-GkKLlHH4.js";
+import { c as e } from "./cn-B6yFEsav.js";
+import { memo as _, forwardRef as q, useState as V } from "react";
+import F from "./Spinner.es.js";
+import { u as ee } from "./useLabelBackground-BDIHUdND.js";
+import { H as te } from "./HelperComponent-ljsn0xD6.js";
+import { EyeVisibility as re } from "./Icons/EyeVisibility.es.js";
+import { EyeVisibilityOff as oe } from "./Icons/EyeVisibilityOff.es.js";
+import { Close as se } from "./Icons/Close.es.js";
+const m = {
+  default: {
+    container: "",
+    input: e(
+      "border-neutral-default-default text-neutral-default-default!",
+      "focus:ring-primary-default-default focus:ring-[1px] focus:border-primary-default-default ",
+      "hover:border-neutral-strong-default"
+    ),
+    label: e("text-neutral-medium-default"),
+    icon: e(
+      "text-neutral-medium-default",
+      "peer-focus:text-primary-default-default"
+    )
+  },
+  error: {
+    container: "",
+    input: e(
+      "border-error-default-default text-neutral-default-default",
+      "focus:border-error-default focus:border-2",
+      "focus:ring-0 focus:ring-error-default/20"
+    ),
+    label: e("text-lime-500", "peer-focus:text-error-light"),
+    icon: e("text-error-light", "peer-focus:text-error-light")
+  },
+  success: {
+    container: "",
+    input: e(
+      "border-success-default-default text-neutral-default-default",
+      "focus:border-success-default focus:border-2",
+      "focus:ring-0 focus:ring-success-default/20"
+    ),
+    label: e("text-success", "peer-focus:text-success-light"),
+    icon: e("text-success-light", "peer-focus:text-success-light")
+  }
+}, H = q(
+  ({
+    label: x,
+    icon: s,
+    iconPosition: d = "left",
+    onChange: $,
+    value: I,
+    name: h,
+    width: i = "100%",
+    height: l,
+    variant: a = "default",
+    labelVariant: o = "default",
+    size: S = "medium",
+    disabled: u = !1,
+    type: r = "text",
+    isFetching: n,
+    errorComponent: b,
+    helperComponent: g,
+    placeholder: E,
+    required: j = !1,
+    onFocus: L,
+    onBlur: P,
+    onKeyDown: k,
+    onKeyUp: C,
+    className: R,
+    style: D,
+    readOnly: B = !1,
+    onClear: N,
+    ...z
+  }, M) => {
+    const [w, O] = V(!1), { ref: T } = ee();
+    let f = S;
+    l && (f = "customHeight");
+    const c = {
+      small: {
+        container: "text-sm",
+        input: "h-10 px-3 text-[1rem] prometeo-fonts-body-large",
+        label: ` prometeo-fonts-label-large 
+            peer-focus:prometeo-fonts-label-large  
+            peer-placeholder-shown:${o === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default peer-focus:text-neutral-medium-default `,
+        icon: "w-4 h-4 right-3"
+      },
+      medium: {
+        container: "text-base",
+        input: "h-12 px-3 prometeo-fonts-body-large",
+        label: ` prometeo-fonts-label-large 
+            peer-focus:prometeo-fonts-label-large  
+            peer-placeholder-shown:${o === "default" ? "prometeo-fonts-body-large" : "prometeo-fonts-label-large"} peer-placeholder-shown:text-neutral-medium-default text-neutral-medium-default peer-focus:text-neutral-medium-default `,
+        icon: "w-5 h-5 right-3"
+      },
+      large: {
+        container: "text-lg",
+        input: "h-14 px-3 text-lg  border-b border-t-0 border-x-0 rounded-none focus:ring-0 prometeo-fonts-body-xlarge ",
+        label: "peer-placeholder-shown:prometeo-fonts-body-xlarge peer-focus:prometeo-fonts-label-large peer-focus:text-neutral-medium-default prometeo-fonts-label-large ",
+        icon: "w-6 h-6 right-3"
+      },
+      customHeight: {
+        container: "text-base",
+        input: "text-base",
+        label: "text-sm peer-focus:text-sm peer-placeholder-shown:text-xs ",
+        icon: "w-6 h-6 right-3"
+      }
+    }, A = () => {
+      O(!w);
+    }, y = {};
+    i && i !== "100%" && (y.width = i), l && (y.height = l);
+    const v = a === "error" && b, G = !v && g, J = r === "password", K = () => o === "static" ? "-top-1 -translate-y-full left-0 pl-3" : s ? `${p ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1 peer-focus:ml-0 peer-focus:mr-0 ${d === "left" ? "peer-placeholder-shown:ml-6" : "peer-placeholder-shown:mr-6"}` : `${p ? "peer-placeholder-shown:top-[calc(50%-12px)]" : "peer-placeholder-shown:top-1/2"} -translate-y-1/2 peer-focus:top-0 peer-focus:left-3 peer-focus:px-1`, Q = () => l ? c.customHeight.label : c[f].label, U = () => l ? { height: l } : {}, W = () => o === "default" ? x : E || x || "", X = () => J ? s ? d === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : s ? d === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", Y = o === "default" && "transition-all duration-200 ease-in-out", p = b || g;
+    return /* @__PURE__ */ t.jsxs(
+      "div",
+      {
+        className: e(
+          "relative",
+          c[f].container,
+          !i && "w-full",
+          "bg-inherit",
+          o === "static" && "mt-2",
+          R
+        ),
+        style: { ...D, ...y },
+        children: [
+          /* @__PURE__ */ t.jsx(
+            "input",
+            {
+              id: h,
+              name: h,
+              ref: M,
+              value: I,
+              placeholder: W(),
+              type: r === "password" && w ? "text" : r,
+              className: e(
+                "peer w-full border rounded-lg bg-transparent appearance-none transition-all duration-200 ease-in-out",
+                "focus:outline-none px-3",
+                o === "default" && "placeholder:text-transparent",
+                o === "static" && "placeholder:text-neutral-medium-default ",
+                m[a].input,
+                c[f].input,
+                s && "pr-10",
+                u && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
+                m[a].container,
+                X()
+              ),
+              style: U(),
+              onChange: $,
+              onFocus: L,
+              onBlur: P,
+              disabled: u,
+              required: j,
+              onKeyDown: k,
+              onKeyUp: C,
+              defaultValue: z.defaultValue,
+              readOnly: B,
+              ...z
+            }
+          ),
+          /* @__PURE__ */ t.jsx(
+            "label",
+            {
+              ref: T,
+              htmlFor: h,
+              className: e(
+                "absolute left-3 pointer-events-none px-1 z-10",
+                Y,
+                Q(),
+                m[a].label,
+                K(),
+                j && "after:content-['*'] after:text-error-default after:ml-1",
+                u && "text-neutral-medium-disabled prometeo-fonts-label-large"
+              ),
+              children: x
+            }
+          ),
+          (s || r === "password" || n) && /* @__PURE__ */ t.jsx(
+            "button",
+            {
+              tabIndex: -1,
+              type: "button",
+              className: e(
+                `absolute ${p ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10`,
+                c[f].icon,
+                m[a].icon,
+                r === "password" && !n ? "cursor-pointer" : "pointer-events-none",
+                d === "right" ? "right-3" : "left-3"
+              ),
+              onClick: r === "password" && !n ? A : void 0,
+              onMouseDown: (Z) => r === "password" && !n && Z.preventDefault(),
+              children: /* @__PURE__ */ t.jsxs("div", { className: "flex items-center", children: [
+                n && r !== "password" ? /* @__PURE__ */ t.jsx(F, { variant: "sync", size: "small", className: "size-5" }) : s,
+                r === "password" && (w ? /* @__PURE__ */ t.jsx(re, { size: 24, className: "" }) : /* @__PURE__ */ t.jsx(oe, { size: 24, className: "" }))
+              ] })
+            }
+          ),
+          N && /* @__PURE__ */ t.jsx(
+            "button",
+            {
+              type: "button",
+              className: e(
+                `absolute ${p ? "top-[calc(50%-12px)]" : "top-1/2"} -translate-y-1/2 flex items-center justify-center z-10 right-1`,
+                "size-6 p-1 rounded-full",
+                "hover:bg-neutral-medium-hover transition-colors",
+                u && "opacity-50 cursor-not-allowed"
+              ),
+              disabled: u,
+              onClick: N,
+              children: /* @__PURE__ */ t.jsx(se, { size: 20, className: "" })
+            }
+          ),
+          p && /* @__PURE__ */ t.jsx("div", { className: "min-h-6", children: (v || G) && /* @__PURE__ */ t.jsx(te, { className: "absolute ", variant: a, children: b || g }) })
+        ]
+      }
+    );
+  }
+);
+H.displayName = "Input";
+const me = _(H);
+export {
+  me as default
+};

package/dist/InputMultiple.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/InputMultiple'
+export {}
+import PrometeoDesignSystem from './exports/InputMultiple'
+export default PrometeoDesignSystem
+export * from './exports/InputMultiple'
+export {}