prometeo-design-system 2.8.7 → 2.8.9

package/dist/ProgressBar.es.js

@@ -0,0 +1,70 @@
+import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { c as j } from "./cn-B6yFEsav.js";
+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.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 {
+  M as default
+};

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

@@ -1,37 +1,37 @@
-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(
+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(
           "input",
           {
             hidden: !0,
             type: "radio",
-            ref: e,
+            ref: r,
             className: "peer",
-            disabled: l,
-            ...h
+            disabled: o,
+            ...b
           }
         ),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ e.jsx(
           "div",
           {
             role: "radio",
-            "aria-checked": e.current?.checked,
-            "aria-disabled": l,
-            onClick: l ? () => {
-            } : u,
+            "aria-checked": r.current?.checked,
+            "aria-disabled": o,
+            onClick: o ? () => {
+            } : c,
             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 c = y((s, r) => {
               "peer-disabled:border-neutral-default-disabled peer-disabled:peer-checked:border-neutral-default-default",
               "peer-disabled:peer-checked:*:bg-neutral-weak-hover"
             ),
-            children: /* @__PURE__ */ a(
+            children: /* @__PURE__ */ e.jsx(
               "div",
               {
                 className: t(
@@ -56,22 +56,23 @@ const c = y((s, r) => {
           }
         )
       ] }),
-      d && /* @__PURE__ */ o("span", { className: t("prometeo-fonts-label-large w-max min-w-max", m), children: [
-        d,
-        f && " *"
+      l && /* @__PURE__ */ e.jsxs("span", { className: t("prometeo-fonts-label-large w-max min-w-max", m), children: [
+        l,
+        u && " *"
       ] })
     ] }),
-    v && /* @__PURE__ */ a("div", { className: "min-h-5", children: /* @__PURE__ */ a(
-      C,
+    h && /* @__PURE__ */ e.jsx("div", { className: "min-h-5", children: /* @__PURE__ */ e.jsx(
+      j,
       {
-        variant: p,
-        children: i || n
+        variant: f,
+        children: d || i
       }
     ) })
   ] });
 });
-c.displayName = "RadioButton";
-const B = g(c);
+s.displayName = "RadioButton";
+const z = x(s);
 export {
-  B as default
+  z as RadioButton,
+  z as default
 };

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

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