prometeo-design-system 2.8.5 → 2.8.7

package/dist/Icons.es.js

@@ -1,5 +0,0 @@
-import { e as o, e as s } from "./Icons-DtFC5DJ7.js";
-export {
-  o as Icons,
-  s as default
-};

package/dist/ImageGallery-Ckxg9OIC.js

@@ -1,317 +0,0 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.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 ne } from "./useDragScroll-CHN9OMwn.js";
-import S from "./Button.es.js";
-import { a as re, b as ae, c as se } from "./Icons-DtFC5DJ7.js";
-const L = M(A(({ images: n, className: c }, r) => {
-  const { ref: d, bind: s } = ne({
-    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: s.onPointerDown,
-      onPointerMove: s.onPointerMove,
-      onPointerUp: s.onPointerUp,
-      onPointerLeave: s.onPointerLeave,
-      onPointerCancel: s.onPointerCancel,
-      onClickCapture: s.onClickCapture,
-      "aria-label": "Image gallery",
-      children: n && n.length > 0 && n.map((l, o) => Q.cloneElement(l, {
-        key: l.props.src || o,
-        ...l.props,
-        galleryRef: r,
-        allowPreview: !0
-      }))
-    }
-  );
-}));
-L.displayName = "GalleryPreview";
-const O = M(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails: d, thumbnailsClassName: s, currentIndex: l, goToNext: o, goToPrevious: a, 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" ? r() : e.key === "ArrowLeft" ? a() : e.key === "ArrowRight" && o();
-  }, [r, a, 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() : a());
-  }, [o, a]), 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 && a();
-      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, a, C, b]);
-  return n.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: r,
-      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: r,
-            className: "text-white! hover:text-gray-300! w-auto! h-auto! p-2!",
-            "aria-label": "Close gallery",
-            children: /* @__PURE__ */ t.jsx(re, { size: 24 })
-          }
-        ) }),
-        n.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(), a();
-              },
-              children: /* @__PURE__ */ t.jsx(
-                S,
-                {
-                  variant: "text",
-                  color: "secondary",
-                  size: "small",
-                  onClick: (e) => {
-                    e.stopPropagation(), a();
-                  },
-                  className: "text-white! hover:text-gray-300! w-auto! h-auto! p-2!",
-                  "aria-label": "Previous image",
-                  children: /* @__PURE__ */ t.jsx(ae, { 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(se, { 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: n[l].src,
-                    alt: n[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: n, currentIndex: l, goToIndex: N, thumbnailsClassName: s }) }),
-        n.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,
-          " / ",
-          n.length
-        ] })
-      ]
-    }
-  );
-});
-O.displayName = "LightBox";
-const le = (n, c) => {
-  if (n.currentIndex !== c.currentIndex || n.thumbnailsClassName !== c.thumbnailsClassName || n.images.length !== c.images.length) return !1;
-  for (let r = 0; r < n.images.length; r++)
-    if (n.images[r].src !== c.images[r].src) return !1;
-  return !0;
-}, _ = M(({ images: n, currentIndex: c, goToIndex: r, 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;
-                }
-            ` }),
-      n.map((s, l) => /* @__PURE__ */ t.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: (o) => {
-            o.stopPropagation(), r(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: s.src,
-              alt: s.alt,
-              className: "w-full h-full object-cover select-none"
-            }
-          )
-        },
-        s.src
-      ))
-    ]
-  }
-), le);
-_.displayName = "Thumbnails";
-const oe = A(
-  (n, c) => {
-    const {
-      children: r,
-      className: d,
-      lightboxClassName: s,
-      showThumbnails: l,
-      thumbnailsClassName: o
-    } = n, [a, N] = R([]), [h, y] = R(!1), [w, m] = R(0), u = r ? Array.isArray(r) ? r : [r] : [], 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: a
-      }),
-      [a]
-    );
-    const z = i(() => {
-      m((f) => (f + 1) % a.length);
-    }, [a.length]), C = i(() => {
-      m((f) => (f - 1 + a.length) % a.length);
-    }, [a.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: a,
-          closeLightbox: j,
-          showThumbnails: l,
-          lightboxClassName: s,
-          thumbnailsClassName: o,
-          currentIndex: w,
-          goToNext: z,
-          goToPrevious: C,
-          goToIndex: b
-        }
-      )
-    ] });
-  }
-);
-oe.displayName = "ImageGallery";
-export {
-  oe as I
-};

package/dist/Input-Cck37DpG.js

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

package/dist/Input.es.js

@@ -1,4 +0,0 @@
-import { I as f } from "./Input-Cck37DpG.js";
-export {
-  f as default
-};