prometeo-design-system 2.8.6 → 2.8.8

package/dist/components/Image/LightBox.js

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

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

@@ -1,4 +1,3 @@
-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) => {
@@ -18,6 +17,5 @@ const g = () => {
   };
 };
 export {
-  p as default,
   g as useImageGallery
 };

package/dist/components/Input/Input.js

@@ -0,0 +1,219 @@
+import { jsxs as H, jsx as t } from "react/jsx-runtime";
+import { EyeVisibility as q, EyeVisibilityOff as V, Close as F } from "../../Icons/Icons.js";
+import { cn as e } from "../../lib/cn.js";
+import { memo as ee, forwardRef as te, useState as re } from "react";
+import oe from "../Spinner/Spinner.js";
+import { useLabelBackground as le } from "../../hooks/useLabelBackground.js";
+import se from "../Shared/HelperComponent.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")
+  }
+}, I = te(
+  ({
+    label: x,
+    icon: l,
+    iconPosition: d = "left",
+    onChange: S,
+    value: j,
+    name: h,
+    width: i = "100%",
+    height: s,
+    variant: a = "default",
+    labelVariant: o = "default",
+    size: L = "medium",
+    disabled: u = !1,
+    type: r = "text",
+    isFetching: n,
+    errorComponent: b,
+    helperComponent: g,
+    placeholder: P,
+    required: N = !1,
+    onFocus: k,
+    onBlur: C,
+    onKeyDown: E,
+    onKeyUp: D,
+    className: R,
+    style: B,
+    readOnly: M = !1,
+    onClear: z,
+    ...v
+  }, O) => {
+    const [w, T] = re(!1), { ref: A } = le();
+    let f = L;
+    s && (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"
+      }
+    }, G = () => {
+      T(!w);
+    }, y = {};
+    i && i !== "100%" && (y.width = i), s && (y.height = s);
+    const $ = a === "error" && b, J = !$ && g, K = r === "password", Q = () => o === "static" ? "-top-1 -translate-y-full left-0 pl-3" : l ? `${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`, U = () => s ? c.customHeight.label : c[f].label, W = () => s ? { height: s } : {}, X = () => o === "default" ? x : P || x || "", Y = () => K ? l ? d === "left" ? "pl-10 pr-10" : "pr-16" : "pr-10" : l ? d === "left" ? "pl-10 pr-3" : "pr-10 pl-3" : "", Z = o === "default" && "transition-all duration-200 ease-in-out", p = b || g;
+    return /* @__PURE__ */ H(
+      "div",
+      {
+        className: e(
+          "relative",
+          c[f].container,
+          !i && "w-full",
+          "bg-inherit",
+          o === "static" && "mt-2",
+          R
+        ),
+        style: { ...B, ...y },
+        children: [
+          /* @__PURE__ */ t(
+            "input",
+            {
+              id: h,
+              name: h,
+              ref: O,
+              value: j,
+              placeholder: X(),
+              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,
+                l && "pr-10",
+                u && "bg-transparent opacity-60 border-neutral-strong-default text-neutral-medium-disabled",
+                m[a].container,
+                Y()
+              ),
+              style: W(),
+              onChange: S,
+              onFocus: k,
+              onBlur: C,
+              disabled: u,
+              required: N,
+              onKeyDown: E,
+              onKeyUp: D,
+              defaultValue: v.defaultValue,
+              readOnly: M,
+              ...v
+            }
+          ),
+          /* @__PURE__ */ t(
+            "label",
+            {
+              ref: A,
+              htmlFor: h,
+              className: e(
+                "absolute left-3 pointer-events-none px-1 z-10",
+                Z,
+                U(),
+                m[a].label,
+                Q(),
+                N && "after:content-['*'] after:text-error-default after:ml-1",
+                u && "text-neutral-medium-disabled prometeo-fonts-label-large"
+              ),
+              children: x
+            }
+          ),
+          (l || r === "password" || n) && /* @__PURE__ */ t(
+            "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 ? G : void 0,
+              onMouseDown: (_) => r === "password" && !n && _.preventDefault(),
+              children: /* @__PURE__ */ H("div", { children: [
+                n && r !== "password" && /* @__PURE__ */ t("div", { children: /* @__PURE__ */ t(oe, { size: 24, color: "#7c86ff", loading: !0, variant: "clip" }) }),
+                r === "password" && (w ? /* @__PURE__ */ t(q, { size: 24, className: "" }) : /* @__PURE__ */ t(V, { size: 24, className: "" })),
+                l
+              ] })
+            }
+          ),
+          z && /* @__PURE__ */ t(
+            "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: z,
+              children: /* @__PURE__ */ t(F, { size: 20, className: "" })
+            }
+          ),
+          p && /* @__PURE__ */ t("div", { className: "min-h-6", children: ($ || J) && /* @__PURE__ */ t(se, { className: "absolute ", variant: a, children: b || g }) })
+        ]
+      }
+    );
+  }
+);
+I.displayName = "Input";
+const ie = ee(I);
+export {
+  ie as default
+};