prometeo-design-system 2.7.0 → 2.7.1

package/dist/DatePicker.es.js

@@ -1,7 +1,7 @@
 import { j as q } from "./jsx-runtime-DKDX3adD.js";
 import m, { createContext as mn, useContext as hn, useCallback as R, useRef as Se, useLayoutEffect as yn, useState as he, useEffect as _e, useMemo as fe, memo as pn } from "react";
 import { InputMultiple as gn } from "./InputMultiple.es.js";
-import { I as wn } from "./Input-BTsR-vNF.js";
+import { I as wn } from "./Input-C22kKz7U.js";
 import { createPortal as bn } from "react-dom";
 import { Icons as Mt } from "./Icons.es.js";
 import { c as Be } from "./cn-B6yFEsav.js";

package/dist/Input-C22kKz7U.js

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

package/dist/InputFormikV2.es.js

@@ -1,7 +1,7 @@
 import { j as o } from "./jsx-runtime-DKDX3adD.js";
 import { FastField as u } from "formik";
 import { memo as s } from "react";
-import { I as i } from "./Input-BTsR-vNF.js";
+import { I as i } from "./Input-C22kKz7U.js";
 const c = ({
   field: r,
   form: t,

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
 };