prometeo-design-system 2.8.7 → 2.8.9

package/dist/components/Image/LightBox.js

@@ -1,223 +0,0 @@
-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/components/Input/Input.js

@@ -1,219 +0,0 @@
-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
-};