prometeo-design-system 2.8.5 → 2.8.7

package/dist/{ProfilePictureUpload.es.js → components/ProfilePictureUpload/ProfilePictureUpload.js}

@@ -1,23 +1,23 @@
-import { j as o } from "./jsx-runtime-DKDX3adD.js";
-import { memo as L, useRef as w, useLayoutEffect as N } from "react";
-import R from "./Avatar.es.js";
-import { c as i } from "./cn-B6yFEsav.js";
-const F = {
+import { jsxs as R, jsx as n } from "react/jsx-runtime";
+import { memo as j, useRef as w, useLayoutEffect as x } from "react";
+import F from "../Avatar/Avatar.js";
+import { cn as i } from "../../lib/cn.js";
+const A = {
   sm: "w-16 h-16",
   md: "w-24 h-24",
   lg: "w-32 h-32",
   xl: "w-40 h-40"
-}, A = {
+}, M = {
   sm: "w-4 h-4",
   md: "w-5 h-5",
   lg: "w-6 h-6",
   xl: "w-8 h-8"
-}, M = {
+}, T = {
   sm: "w-6 h-6",
   md: "w-7 h-7",
   lg: "w-8 h-8",
   xl: "w-10 h-10"
-}, T = {
+}, U = {
   sm: "-bottom-1 -right-0.5",
   md: "-bottom-0.5 -right-0.5",
   lg: "bottom-1 right-1",
@@ -27,37 +27,37 @@ const F = {
   md: "w-5 h-5",
   lg: "w-6 h-6",
   xl: "w-7 h-7"
-}, U = {
+}, z = {
   sm: "-top-0.5 -right-0.5",
   md: "-top-1 -right-1",
   lg: "-top-1 -right-0",
   xl: "top-1 right-1"
 };
-function z({
+function W({
   imageUrl: t,
   fallbackText: e = "S L",
   onFileSelect: y,
   onEditClick: m,
   onRemoveClick: k,
-  size: r = "lg",
+  size: o = "lg",
   className: C,
-  disabled: n = !1,
-  showRemoveButton: j = !0,
-  acceptedTypes: p = "image/*",
+  disabled: r = !1,
+  showRemoveButton: p = !0,
+  acceptedTypes: v = "image/*",
   maxFileSize: h = 5 * 1024 * 1024,
   onError: g
 }) {
-  const f = w(null), u = w(null), x = (l) => l.type.startsWith("image/") ? l.size > h ? (g?.(
+  const f = w(null), u = w(null), B = (l) => l.type.startsWith("image/") ? l.size > h ? (g?.(
     `La imagen debe ser menor a ${Math.round(h / 1024 / 1024)}MB`
-  ), !1) : !0 : (g?.("Por favor selecciona un archivo de imagen válido"), !1), v = (l) => {
+  ), !1) : !0 : (g?.("Por favor selecciona un archivo de imagen válido"), !1), S = (l) => {
     const a = l.target.files?.[0];
-    a && (x(a) && y?.(a), l.target.value = "");
-  }, B = () => {
-    n || (m ? m() : f.current?.click());
-  }, S = (l) => {
-    l.stopPropagation(), !n && k?.();
+    a && (B(a) && y?.(a), l.target.value = "");
+  }, L = () => {
+    r || (m ? m() : f.current?.click());
+  }, N = (l) => {
+    l.stopPropagation(), !r && k?.();
   };
-  return N(() => {
+  return x(() => {
     if (u.current) {
       const a = ((E) => {
         let c = E;
@@ -74,61 +74,61 @@ function z({
       );
       u.current.style.borderColor = a;
     }
-  }, []), /* @__PURE__ */ o.jsxs(
+  }, []), /* @__PURE__ */ R(
     "div",
     {
       className: i("relative inline-block border-inherit group", C),
       children: [
-        /* @__PURE__ */ o.jsx(
+        /* @__PURE__ */ n(
           "input",
           {
             ref: f,
             type: "file",
-            accept: p,
-            onChange: v,
+            accept: v,
+            onChange: S,
             className: "hidden",
-            disabled: n
+            disabled: r
           }
         ),
-        /* @__PURE__ */ o.jsx(
+        /* @__PURE__ */ n(
           "div",
           {
             className: i(
-              F[r],
+              A[o],
               "rounded-full overflow-hidden flex items-center justify-center relative",
-              n && "opacity-50 cursor-not-default"
+              r && "opacity-50 cursor-not-default"
             ),
-            children: /* @__PURE__ */ o.jsx(
-              R,
+            children: /* @__PURE__ */ n(
+              F,
               {
                 imageUrl: t,
                 fallbackText: e,
-                sizeImage: r,
-                sizeFallback: r
+                sizeImage: o,
+                sizeFallback: o
               }
             )
           }
         ),
-        /* @__PURE__ */ o.jsx(
+        /* @__PURE__ */ n(
           "button",
           {
             ref: u,
             className: i(
               "absolute bg-primary-default-default rounded-lg border-2 hover:bg-primary-default-hover cursor-pointer grid place-content-center",
-              T[r],
-              M[r],
-              n && "opacity-50 cursor-not-default"
+              U[o],
+              T[o],
+              r && "opacity-50 cursor-not-default"
             ),
-            onClick: B,
-            disabled: n,
-            children: /* @__PURE__ */ o.jsx(
+            onClick: L,
+            disabled: r,
+            children: /* @__PURE__ */ n(
               "svg",
               {
-                className: i(A[r], "text-white"),
+                className: i(M[o], "text-white"),
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ o.jsx(
+                children: /* @__PURE__ */ n(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -141,27 +141,27 @@ function z({
             )
           }
         ),
-        t && j && !n && /* @__PURE__ */ o.jsx(
+        t && p && !r && /* @__PURE__ */ n(
           "button",
           {
             className: i(
               "absolute rounded-full shadow-lg bg-error-light flex cursor-pointer items-center justify-center",
               "opacity-0 scale-80 group-hover:opacity-100 group-hover:scale-100",
               "transition-all duration-200 ease-out",
-              U[r],
-              b[r],
-              n && "opacity-50 cursor-default"
+              z[o],
+              b[o],
+              r && "opacity-50 cursor-default"
             ),
-            disabled: n,
-            onClick: S,
-            children: /* @__PURE__ */ o.jsx(
+            disabled: r,
+            onClick: N,
+            children: /* @__PURE__ */ n(
               "svg",
               {
-                className: i(b[r], "text-white p-1"),
+                className: i(b[o], "text-white p-1"),
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ o.jsx(
+                children: /* @__PURE__ */ n(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -178,12 +178,11 @@ function z({
     }
   );
 }
-const W = L(
-  z,
+const I = j(
+  W,
   (t, e) => t.imageUrl === e.imageUrl && t.fallbackText === e.fallbackText && t.size === e.size && t.className === e.className && t.disabled === e.disabled && t.showRemoveButton === e.showRemoveButton && t.acceptedTypes === e.acceptedTypes && t.maxFileSize === e.maxFileSize && t.disableEntryAnimation === e.disableEntryAnimation && t.onFileSelect === e.onFileSelect && t.onEditClick === e.onEditClick && t.onRemoveClick === e.onRemoveClick && t.onError === e.onError
 );
-W.displayName = "ProfilePictureUpload";
+I.displayName = "ProfilePictureUpload";
 export {
-  W as ProfilePictureUpload,
-  W as default
+  I as ProfilePictureUpload
 };

package/dist/components/ProgressBar/ProgressBar.js

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

package/dist/{RadioButton.es.js → components/RadioButton/RadioButton.js}

@@ -1,37 +1,37 @@
-import { j as e } from "./jsx-runtime-DKDX3adD.js";
-import { c as t } from "./cn-B6yFEsav.js";
-import { memo as x, forwardRef as k, useRef as g, useEffect as y } from "react";
-import { H as j } from "./HelperComponent-g_xuKWzK.js";
-const s = k((n, a) => {
-  const r = g(null);
-  y(() => {
-    a && (typeof a == "function" ? a(r.current) : a.current = r.current);
-  }, [a]);
-  const c = (v) => {
-    r.current && (v.stopPropagation(), r.current.click());
-  }, { disabled: o = !1, label: l, required: u = !1, errorComponent: d, helperComponent: i, variant: f = "default", className: p, labelClassName: m, ...b } = n, h = d !== void 0 || i !== void 0;
-  return /* @__PURE__ */ e.jsxs("div", { className: t("flex flex-col gap-1 min-h-10 min-w-max items-center", p), children: [
-    /* @__PURE__ */ e.jsxs("label", { className: t("flex items-center justify-start gap-3"), children: [
-      /* @__PURE__ */ e.jsxs("div", { className: "relative z-10 min-w-10 h-10 flex items-center justify-center ", children: [
-        /* @__PURE__ */ e.jsx(
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import { cn as t } from "../../lib/cn.js";
+import { memo as g, forwardRef as y, useRef as x, useEffect as N } from "react";
+import C from "../Shared/HelperComponent.js";
+const c = y((s, r) => {
+  const e = x(null);
+  N(() => {
+    r && (typeof r == "function" ? r(e.current) : r.current = e.current);
+  }, [r]);
+  const u = (k) => {
+    e.current && (k.stopPropagation(), e.current.click());
+  }, { disabled: l = !1, label: d, required: f = !1, errorComponent: i, helperComponent: n, variant: p = "default", className: b, labelClassName: m, ...h } = s, v = i !== void 0 || n !== void 0;
+  return /* @__PURE__ */ o("div", { className: t("flex flex-col gap-1 min-h-10 min-w-max items-center", b), children: [
+    /* @__PURE__ */ o("label", { className: t("flex items-center justify-start gap-3"), children: [
+      /* @__PURE__ */ o("div", { className: "relative z-10 min-w-10 h-10 flex items-center justify-center ", children: [
+        /* @__PURE__ */ a(
           "input",
           {
             hidden: !0,
             type: "radio",
-            ref: r,
+            ref: e,
             className: "peer",
-            disabled: o,
-            ...b
+            disabled: l,
+            ...h
           }
         ),
-        /* @__PURE__ */ e.jsx(
+        /* @__PURE__ */ a(
           "div",
           {
             role: "radio",
-            "aria-checked": r.current?.checked,
-            "aria-disabled": o,
-            onClick: o ? () => {
-            } : c,
+            "aria-checked": e.current?.checked,
+            "aria-disabled": l,
+            onClick: l ? () => {
+            } : u,
             className: t(
               "size-5 rounded-full border-neutral-default-hover hover:border-neutral-default-default border-2 p-[3px]",
               "transition-all duration-300 cursor-pointer relative ",
@@ -45,7 +45,7 @@ const s = k((n, a) => {
               "peer-disabled:border-neutral-default-disabled peer-disabled:peer-checked:border-neutral-default-default",
               "peer-disabled:peer-checked:*:bg-neutral-weak-hover"
             ),
-            children: /* @__PURE__ */ e.jsx(
+            children: /* @__PURE__ */ a(
               "div",
               {
                 className: t(
@@ -56,23 +56,22 @@ const s = k((n, a) => {
           }
         )
       ] }),
-      l && /* @__PURE__ */ e.jsxs("span", { className: t("prometeo-fonts-label-large w-max min-w-max", m), children: [
-        l,
-        u && " *"
+      d && /* @__PURE__ */ o("span", { className: t("prometeo-fonts-label-large w-max min-w-max", m), children: [
+        d,
+        f && " *"
       ] })
     ] }),
-    h && /* @__PURE__ */ e.jsx("div", { className: "min-h-5", children: /* @__PURE__ */ e.jsx(
-      j,
+    v && /* @__PURE__ */ a("div", { className: "min-h-5", children: /* @__PURE__ */ a(
+      C,
       {
-        variant: f,
-        children: d || i
+        variant: p,
+        children: i || n
       }
     ) })
   ] });
 });
-s.displayName = "RadioButton";
-const z = x(s);
+c.displayName = "RadioButton";
+const B = g(c);
 export {
-  z as RadioButton,
-  z as default
+  B as default
 };

package/dist/{SegmentedButton.es.js → components/SegmentedButton/SegmentedButton.js}

@@ -1,9 +1,9 @@
-import { j as u } from "./jsx-runtime-DKDX3adD.js";
-import { c as s } from "./cn-B6yFEsav.js";
-import z, { useState as M, useMemo as C, useEffect as L } from "react";
-import { motion as E } from "framer-motion";
-const X = (T) => {
-  const [c, _] = M({}), { size: t = "medium", color: R = "default", options: l, value: h, name: x, onChange: j, icon: y, allowExpand: n = !1, disabled: d = !1 } = T, m = Math.max(l.findIndex((e) => e.value === h), 0), w = l.length, N = 9, b = 26, o = {
+import { jsxs as T, jsx as p } from "react/jsx-runtime";
+import { cn as s } from "../../lib/cn.js";
+import M, { useState as L, useMemo as E, useEffect as B } from "react";
+import { motion as _ } from "framer-motion";
+const $ = (S) => {
+  const [u, j] = L({}), { size: t = "medium", color: H = "default", options: l, value: h, name: x, onChange: y, icon: N, allowExpand: n = !1, disabled: d = !1 } = S, c = Math.max(l.findIndex((e) => e.value === h), 0), w = l.length, k = 9, b = 26, o = {
     small: 120,
     medium: 120,
     large: 120
@@ -11,11 +11,11 @@ const X = (T) => {
     small: 94,
     medium: 94,
     large: 94
-  }, k = 16, S = {
+  }, I = 16, R = {
     small: { container: "p-2" },
     medium: { container: "p-4 h-[48px] rounded-lg" },
     large: { container: "p-6" }
-  }, f = {
+  }, m = {
     default: {
       switch: "bg-primary-medium-default text-neutral-weak-default",
       container: "border-neutral-default-default",
@@ -46,24 +46,24 @@ const X = (T) => {
       icon: "text-neutral-strong-disabled",
       option: "text-neutral-medium-pressed"
     }
-  }, I = l.find((e) => e.value === h) ?? l[0], g = I.label.length * N + k * 2 + b, W = () => C(() => Object.values(c).reduce((i, r) => i + r, 0) + b, [c]), v = {
+  }, C = l.find((e) => e.value === h) ?? l[0], g = C.label.length * k + I * 2 + b, W = () => E(() => Object.values(u).reduce((i, r) => i + r, 0) + b, [u]), v = {
     small: n ? W() : (w - 1) * a.small + o.small,
     medium: n ? W() : (w - 1) * a.medium + o.medium,
     large: n ? W() : (w - 1) * a.large + o.large
   };
-  L(() => {
+  B(() => {
     if (!n) return;
     let e = {};
     l.forEach((i, r) => {
-      e[r] = i.label.length * N + k * 2;
-    }), _(e);
+      e[r] = i.label.length * k + I * 2;
+    }), j(e);
   }, []);
-  const H = C(() => n ? Object.values(c).reduce((e, i, r) => r < m ? e + i : e, 0) : Math.max(m * a[t] - 2, 0), [m]), D = () => {
+  const D = E(() => n ? Object.values(u).reduce((e, i, r) => r < c ? e + i : e, 0) : Math.max(c * a[t] - 2, 0), [c]), A = () => {
     if (d) return;
-    const e = m === l.length - 1 ? l[0] : l[m + 1];
-    j?.(x, e.value);
-  }, p = d ? "disabled" : R;
-  return /* @__PURE__ */ u.jsxs(
+    const e = c === l.length - 1 ? l[0] : l[c + 1];
+    y?.(x, e.value);
+  }, f = d ? "disabled" : H;
+  return /* @__PURE__ */ T(
     "button",
     {
       name: x,
@@ -74,18 +74,18 @@ const X = (T) => {
         maxWidth: v[t]
       },
       className: s(
-        S[t].container,
-        f[p].container,
+        R[t].container,
+        m[f].container,
         "border",
         !d && "cursor-pointer",
         "relative"
       ),
       children: [
-        /* @__PURE__ */ u.jsxs(
-          E.div,
+        /* @__PURE__ */ T(
+          _.div,
           {
             animate: {
-              left: `${H}px`,
+              left: `${D}px`,
               width: n ? g : o[t],
               minWidth: n ? g : o[t],
               maxWidth: n ? g : o[t]
@@ -98,31 +98,31 @@ const X = (T) => {
             className: s(
               "absolute top-0 left-0 h-full rounded-[6px] z-30",
               "flex items-center justify-center gap-[2px] p-4",
-              f[p].switch
+              m[f].switch
             ),
             onClick: () => {
-              !d && D();
+              !d && A();
             },
             children: [
-              y && z.cloneElement(y, { className: s(
+              N && M.cloneElement(N, { className: s(
                 "w-6 h-6 text-neutral-weak-default min-w-6 min-h-6",
-                f[p].icon
+                m[f].icon
               ) }),
-              /* @__PURE__ */ u.jsx(
+              /* @__PURE__ */ p(
                 "p",
                 {
                   className: s(
                     "prometeo-fonts-label-large ",
                     " overflow-hidden overflow-ellipsis text-nowrap select-none ",
-                    f[p].switch
+                    m[f].switch
                   ),
-                  children: I.label
+                  children: C.label
                 }
               )
             ]
           }
         ),
-        /* @__PURE__ */ u.jsx(
+        /* @__PURE__ */ p(
           "div",
           {
             className: s(
@@ -130,12 +130,12 @@ const X = (T) => {
               "flex justify-center"
             ),
             children: l?.map((e, i) => {
-              const r = e.value === (h || l[0].value), A = n ? c[i] + b : o[t], P = n ? c[i] : a[t], O = r ? A : P;
-              return /* @__PURE__ */ u.jsx(
-                E.span,
+              const r = e.value === (h || l[0].value), P = n ? u[i] + b : o[t], z = n ? u[i] : a[t], O = r ? P : z;
+              return /* @__PURE__ */ p(
+                _.span,
                 {
                   onClick: () => {
-                    !d && j?.(x, e.value);
+                    !d && y?.(x, e.value);
                   },
                   animate: {
                     width: O,
@@ -154,7 +154,7 @@ const X = (T) => {
                     !d && "cursor-pointer"
                   ),
                   "aria-label": e.label,
-                  children: /* @__PURE__ */ u.jsx(
+                  children: /* @__PURE__ */ p(
                     "p",
                     {
                       style: {
@@ -164,7 +164,7 @@ const X = (T) => {
                       },
                       className: s(
                         "px-3 place-content-center overflow-hidden text-ellipsis text-wrap prometeo-fonts-label-large  h-full select-none",
-                        f[p].option
+                        m[f].option
                       ),
                       children: e.label
                     }
@@ -180,6 +180,5 @@ const X = (T) => {
   );
 };
 export {
-  X as SegmentedButton,
-  X as default
+  $ as default
 };