prometeo-design-system 2.7.0 → 2.7.2

package/dist/{ImageGallery-DKzJg3un.js → ImageGallery-D8nIvBpV.js}

@@ -2,7 +2,7 @@ import { j as t } from "./jsx-runtime-DKDX3adD.js";
 import ee, { memo as D, forwardRef as L, useRef as v, useEffect as te, useCallback as i, useState as R, useImperativeHandle as ne } from "react";
 import { c as X } from "./cn-B6yFEsav.js";
 import { u as re } from "./useDragScroll-CHN9OMwn.js";
-import { B as S } from "./Button-CvBWH1HX.js";
+import S from "./Button.es.js";
 import { Icons as M } from "./Icons.es.js";
 const O = D(L(({ images: n, className: c }, r) => {
   const { ref: d, bind: a } = re({
@@ -37,7 +37,7 @@ const O = D(L(({ images: n, className: c }, r) => {
   );
 }));
 O.displayName = "GalleryPreview";
-const B = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails: d, thumbnailsClassName: a, currentIndex: l, goToNext: o, goToPrevious: s, goToIndex: N }) => {
+const _ = D(({ images: n, lightboxClassName: c, closeLightbox: r, 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,
@@ -194,7 +194,7 @@ const B = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
             )
           }
         ),
-        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: a }) }),
+        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(B, { images: n, currentIndex: l, goToIndex: N, thumbnailsClassName: a }) }),
         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,
           " / ",
@@ -204,13 +204,13 @@ const B = D(({ images: n, lightboxClassName: c, closeLightbox: r, showThumbnails
     }
   );
 });
-B.displayName = "LightBox";
+_.displayName = "LightBox";
 const se = (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;
-}, _ = D(({ images: n, currentIndex: c, goToIndex: r, thumbnailsClassName: d }) => /* @__PURE__ */ t.jsxs(
+}, B = D(({ 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",
@@ -251,7 +251,7 @@ const se = (n, c) => {
     ]
   }
 ), se);
-_.displayName = "Thumbnails";
+B.displayName = "Thumbnails";
 const ae = L(
   (n, c) => {
     const {
@@ -295,7 +295,7 @@ const ae = L(
         }
       ),
       h && /* @__PURE__ */ t.jsx(
-        B,
+        _,
         {
           images: s,
           closeLightbox: j,

package/dist/ImageGallery.es.js

@@ -1,4 +1,4 @@
-import { I as p } from "./ImageGallery-DKzJg3un.js";
+import { I as p } from "./ImageGallery-D8nIvBpV.js";
 import { useRef as u, useCallback as r } from "react";
 const g = () => {
   const e = u(null), t = r((a) => {

package/dist/Input-CnXDg2s7.js

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

package/dist/Input.es.js

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

package/dist/InputFormikV2.es.js

@@ -1,29 +1,41 @@
-import { j as o } from "./jsx-runtime-DKDX3adD.js";
-import { FastField as u } from "formik";
+import { j as i } from "./jsx-runtime-DKDX3adD.js";
+import { FastField as m, getIn as n } from "formik";
 import { memo as s } from "react";
-import { I as i } from "./Input-BTsR-vNF.js";
-const c = ({
-  field: r,
-  form: t,
+import { I as d } from "./Input-CnXDg2s7.js";
+const f = ({
+  field: a,
+  form: r,
   ...e
 }) => {
-  const n = t.getFieldMeta(r.name), a = n.touched && n.error;
-  return /* @__PURE__ */ o.jsx(
-    i,
+  const t = r.getFieldMeta(a.name), o = t.touched && t.error;
+  return /* @__PURE__ */ i.jsx(
+    d,
     {
       ...e,
-      ...r,
-      value: r.value,
-      onChange: (m) => {
-        r.onChange({ target: { value: m, name: r.name } });
+      ...a,
+      value: a.value,
+      onChange: (u) => {
+        a.onChange({ target: { value: u.target.value, name: a.name } });
       },
-      variant: a ? "error" : "default",
-      errorComponent: n.error,
+      variant: o ? "error" : "default",
+      errorComponent: t.error,
       type: e.type,
-      ref: e.innerRef
+      ref: e.innerRef,
+      disabled: e.disabled
     }
   );
-}, p = s(c), j = (r) => /* @__PURE__ */ o.jsx(u, { name: r.name, children: ({ field: t, form: e }) => /* @__PURE__ */ o.jsx(p, { ...r, field: t, form: e }) });
+}, l = s(f), h = (a) => /* @__PURE__ */ i.jsx(
+  m,
+  {
+    name: a.name,
+    disabled: a.disabled,
+    shouldUpdate: (r, e) => {
+      const t = r.name;
+      return r.disabled !== e.disabled || t !== e.name || n(r.formik.values, t) !== n(e.formik.values, t) || n(r.formik.errors, t) !== n(e.formik.errors, t) || n(r.formik.touched, t) !== n(e.formik.touched, t) || r.formik.isSubmitting !== e.formik.isSubmitting || Object.keys(r).length !== Object.keys(e).length;
+    },
+    children: ({ field: r, form: e }) => /* @__PURE__ */ i.jsx(l, { ...a, field: r, form: e, disabled: a.disabled })
+  }
+);
 export {
-  j as default
+  h as default
 };

package/dist/ProgressBar.es.js

@@ -1,42 +1,70 @@
 import { j as e } from "./jsx-runtime-DKDX3adD.js";
 import { c as j } from "./cn-B6yFEsav.js";
-import v from "react";
-const V = v.forwardRef(
-  ({
-    className: u,
-    startDate: h,
-    endDate: x,
-    label: o,
-    ...g
-  }, p) => {
-    const d = new Date(h), a = new Date(x), s = /* @__PURE__ */ new Date(), c = a.getTime() - d.getTime(), m = s.getTime() - d.getTime(), y = Math.min(100, Math.max(0, m / c * 100)), n = 1440 * 60 * 1e3, l = Math.max(0, Math.ceil((a.getTime() - s.getTime()) / n)), i = Math.floor((s.getTime() - a.getTime()) / n), f = Math.ceil(c / n), T = Math.min(f, Math.max(0, Math.floor(m / n))), r = s > a, w = l === 0 && !r, b = r && i === 0;
-    let t = o;
-    return o || (r ? i === 0 ? t = "Vence hoy" : i === 1 ? t = "Vencido hace 1 día" : t = `Vencido hace ${i} días` : l === 0 ? t = "Vence hoy" : l === 1 ? t = "Falta 1 día" : t = `Faltan ${l} días`), /* @__PURE__ */ e.jsxs("div", { ref: p, className: u, ...g, children: [
-      /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-end mb-2 gap-4 px-2", children: [
-        /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ e.jsx("span", { className: "text-sm text-neutral-medium-default", children: "Tiempo restante de resolución" }),
-          /* @__PURE__ */ e.jsx("span", { className: "font-semibold text-base text-neutral-default-default", children: t })
+import T from "react";
+const M = T.forwardRef(
+  (o, g) => {
+    const { className: p, label: m, ...b } = o;
+    if (o.variant === "date") {
+      const { startDate: l, endDate: n } = o, r = new Date(l), t = new Date(n), a = /* @__PURE__ */ new Date(), i = t.getTime() - r.getTime(), c = a.getTime() - r.getTime(), d = Math.min(100, Math.max(0, c / i * 100)), u = 1440 * 60 * 1e3, f = Math.max(0, Math.ceil((t.getTime() - a.getTime()) / u)), x = Math.floor((a.getTime() - t.getTime()) / u), y = Math.ceil(i / u), w = Math.min(y, Math.max(0, Math.floor(c / u))), h = a > t, v = f === 0 && !h, N = h && x === 0;
+      let s = m;
+      return m || (h ? x === 0 ? s = "Vence hoy" : x === 1 ? s = "Vencido hace 1 día" : s = `Vencido hace ${x} días` : f === 0 ? s = "Vence hoy" : f === 1 ? s = "Falta 1 día" : s = `Faltan ${f} días`), /* @__PURE__ */ e.jsxs("div", { ref: g, className: p, ...b, children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-end mb-2 gap-4 px-2", children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ e.jsx("span", { className: "text-sm text-neutral-medium-default", children: "Tiempo restante de resolución" }),
+            /* @__PURE__ */ e.jsx("span", { className: "font-semibold text-base text-neutral-default-default", children: s })
+          ] }),
+          /* @__PURE__ */ e.jsxs("span", { className: "text-sm text-neutral-medium-default whitespace-nowrap", children: [
+            w,
+            " / ",
+            y,
+            " días"
+          ] })
         ] }),
-        /* @__PURE__ */ e.jsxs("span", { className: "text-sm text-neutral-medium-default whitespace-nowrap", children: [
-          T,
-          " / ",
-          f,
-          " días"
-        ] })
-      ] }),
-      /* @__PURE__ */ e.jsx("div", { className: "w-full bg-neutral-800 dark:bg-neutral-900 border border-neutral-600 dark:border-neutral-700 rounded-sm h-4 overflow-hidden", children: /* @__PURE__ */ e.jsx(
-        "div",
-        {
-          className: j(
-            "h-full transition-all duration-300",
-            w || b ? "bg-yellow-500" : r ? "bg-red-500" : "bg-primary-default-default"
-          ),
-          style: { width: `${y}%` }
-        }
-      ) })
-    ] });
+        /* @__PURE__ */ e.jsx("div", { className: "w-full bg-neutral-800 dark:bg-neutral-900 border border-neutral-600 dark:border-neutral-700 rounded-sm h-4 overflow-hidden", children: /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            className: j(
+              "h-full transition-all duration-300",
+              v || N ? "bg-yellow-500" : h ? "bg-red-500" : "bg-primary-default-default"
+            ),
+            style: { width: `${d}%` }
+          }
+        ) })
+      ] });
+    }
+    if (o.variant === "quantity") {
+      const { current: l, total: n, unit: r = "items" } = o, t = Math.min(100, Math.max(0, l / n * 100)), a = Math.max(0, n - l), i = l >= n, c = t >= 80 && !i;
+      let d = m;
+      return m || (i ? d = "Completado" : a === 1 ? d = `Falta 1 ${r}` : d = `Faltan ${a} ${r}`), /* @__PURE__ */ e.jsxs("div", { ref: g, className: p, ...b, children: [
+        /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-end mb-2 gap-4 px-2", children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1", children: [
+            /* @__PURE__ */ e.jsx("span", { className: "text-sm text-neutral-medium-default", children: "Progreso" }),
+            /* @__PURE__ */ e.jsx("span", { className: "font-semibold text-base text-neutral-default-default", children: d })
+          ] }),
+          /* @__PURE__ */ e.jsxs("span", { className: "text-sm text-neutral-medium-default whitespace-nowrap", children: [
+            l,
+            " / ",
+            n,
+            " ",
+            r
+          ] })
+        ] }),
+        /* @__PURE__ */ e.jsx("div", { className: "w-full bg-neutral-800 dark:bg-neutral-900 border border-neutral-600 dark:border-neutral-700 rounded-sm h-4 overflow-hidden", children: /* @__PURE__ */ e.jsx(
+          "div",
+          {
+            className: j(
+              "h-full transition-all duration-300",
+              i ? "bg-green-500" : c ? "bg-yellow-500" : "bg-primary-default-default"
+            ),
+            style: { width: `${t}%` }
+          }
+        ) })
+      ] });
+    }
+    return null;
   }
 );
+M.displayName = "ProgressBar";
 export {
-  V as default
+  M as default
 };