prometeo-design-system 2.6.5 → 2.6.7

package/dist/DrawerDesktop.es.js

@@ -1,57 +1,100 @@
-import { j as s } from "./jsx-runtime-DKDX3adD.js";
-import { c as b } from "./cn-B6yFEsav.js";
-import { c as y, B as h } from "./Button-DsbEyjth.js";
-import { createPortal as g } from "react-dom";
-import { Icons as C } from "./Icons.es.js";
-import { forwardRef as k, useState as j, useRef as x, useEffect as v, useCallback as l, useImperativeHandle as D } from "react";
-const O = k((e, a) => {
-  const [t, n] = j(e.defaultOpen || !1), o = x(e.onClose), {
-    modal: c = !1,
-    children: d,
-    className: u,
-    direction: f = "left",
-    attachToParent: i = !1,
-    closeOnOverlayClick: p = !1
-  } = e;
-  v(() => {
-    o.current = e.onClose;
-  }, [e.onClose]);
-  const r = l(() => {
-    n(!0);
-  }, []), m = l(() => {
-    n(!1), o.current?.();
+import { j as l } from "./jsx-runtime-DKDX3adD.js";
+import { c as h } from "./cn-B6yFEsav.js";
+import { c as k, B as E } from "./Button-DsbEyjth.js";
+import { createPortal as I } from "react-dom";
+import { Icons as V } from "./Icons.es.js";
+import { forwardRef as B, useRef as u, useState as N, useEffect as d, useCallback as f, useImperativeHandle as P } from "react";
+const L = B((t, s) => {
+  const o = u(null), [e, a] = N(t.defaultOpen || !1), [r, y] = N(null), b = u(t.onClose), c = u(r), {
+    modal: i = !1,
+    children: m,
+    className: w,
+    direction: C = "left",
+    attachToParent: x = !1,
+    closeOnOverlayClick: n = !1,
+    hideCloseButton: T = !1
+  } = t, g = u(n), O = u(e);
+  c.current = r, d(() => {
+    O.current = e;
+  }, [e]), d(() => {
+    c.current = r;
+  }, [r]), d(() => {
+    g.current = n;
+  }, [n]);
+  const R = (p) => {
+    if (!o.current)
+      return;
+    const z = o.current;
+    z && !z.contains(p.target) && g.current && O.current && v();
+  };
+  d(() => {
+    if (!g.current || i || !e)
+      return;
+    const p = setTimeout(() => {
+      document.addEventListener("click", R);
+    }, 0);
+    return () => {
+      clearTimeout(p), document.removeEventListener("click", R);
+    };
+  }, [n, e, i]), d(() => {
+    b.current = t.onClose;
+  }, [t.onClose]);
+  const j = f((p) => {
+    y(p ?? null), a(!0);
+  }, []), v = f(() => {
+    a(!1), b.current?.(c.current), setTimeout(() => y(null), 300);
   }, []);
-  D(a, () => ({
-    open: r,
-    close: m,
-    isOpen: t
-  }), [t, r, m]);
-  const w = /* @__PURE__ */ s.jsx(
-    z,
+  P(
+    s,
+    () => ({
+      open: j,
+      close: v,
+      isOpen: e,
+      getContext: () => c.current
+    }),
+    [e, j, v]
+  );
+  const D = /* @__PURE__ */ l.jsx(
+    Y,
     {
-      isOpen: t,
-      close: m,
-      direction: f,
-      modal: c,
-      className: u,
-      attachToParent: i,
-      closeOnOverlayClick: p,
-      children: d
+      context: r,
+      ref: o,
+      isOpen: e,
+      close: v,
+      direction: C,
+      modal: i,
+      className: w,
+      attachToParent: x,
+      closeOnOverlayClick: n,
+      hideCloseButton: T,
+      children: typeof m == "function" ? m(r) : m
     }
   );
-  return i ? w : g(w, document.body);
+  return x ? D : I(D, document.body);
 });
-O.displayName = "DrawerDesktopV2";
-const z = ({ children: e, direction: a = "left", isOpen: t, close: n, modal: o = !1, className: c, attachToParent: d = !1, closeOnOverlayClick: u = !1 }) => {
-  v(() => {
-    if (t && o) {
-      const r = window.scrollY;
-      return document.body.style.position = "fixed", document.body.style.top = `-${r}px`, document.body.style.width = "100%", () => {
-        document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, r);
+L.displayName = "DrawerDesktopV2";
+const Y = ({
+  ref: t,
+  children: s,
+  direction: o = "left",
+  isOpen: e,
+  close: a,
+  modal: r = !1,
+  className: y,
+  attachToParent: b = !1,
+  closeOnOverlayClick: c = !1,
+  hideCloseButton: i = !1,
+  context: m
+}) => {
+  d(() => {
+    if (e && r) {
+      const n = window.scrollY;
+      return document.body.style.position = "fixed", document.body.style.top = `-${n}px`, document.body.style.width = "100%", () => {
+        document.body.style.position = "", document.body.style.top = "", document.body.style.width = "", window.scrollTo(0, n);
       };
     }
-  }, [t, o]);
-  const f = y("border-neutral-strong-default", {
+  }, [e, r]);
+  const w = k("border-neutral-strong-default", {
     variants: {
       isOpen: {
         true: "desktop-drawer-visible",
@@ -62,14 +105,17 @@ const z = ({ children: e, direction: a = "left", isOpen: t, close: n, modal: o =
         right: "right-0 border-l-[1px] border-r-0"
       }
     }
-  }), i = y("fixed inset-0 bg-black/60 z-[55] cursor-default", {
-    variants: {
-      isOpen: {
-        true: "drawer-overlay-visible",
-        false: "drawer-overlay-hidden"
+  }), C = k(
+    "fixed inset-0 bg-black/60 z-[55] cursor-default",
+    {
+      variants: {
+        isOpen: {
+          true: "drawer-overlay-visible",
+          false: "drawer-overlay-hidden"
+        }
       }
     }
-  }), p = y("", {
+  ), x = k("", {
     variants: {
       direction: {
         left: "right-0",
@@ -77,66 +123,69 @@ const z = ({ children: e, direction: a = "left", isOpen: t, close: n, modal: o =
       }
     }
   });
-  return /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
-    o && /* @__PURE__ */ s.jsx(
+  return /* @__PURE__ */ l.jsxs(l.Fragment, { children: [
+    r && /* @__PURE__ */ l.jsx(
       "div",
       {
-        className: b(i({ isOpen: t })),
-        onClick: (r) => {
-          r.preventDefault(), r.stopPropagation(), u && n();
+        className: h(C({ isOpen: e })),
+        onClick: (n) => {
+          n.preventDefault(), n.stopPropagation(), c && a();
         },
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ s.jsxs(
+    /* @__PURE__ */ l.jsxs(
       "div",
       {
-        className: b(
-          "bg-neutral-strong-default p-4 pt-10 h-full top-0 z-60 w-max overflow-y-auto",
-          d ? "absolute" : "fixed",
-          f({ isOpen: t, direction: a }),
-          c
+        ref: t,
+        className: h(
+          "bg-neutral-strong-default h-full top-0 z-60 w-max overflow-y-auto",
+          b ? "absolute" : "fixed",
+          w({ isOpen: e, direction: o }),
+          !i && "p-4 pt-10",
+          y
         ),
         role: "dialog",
-        "aria-modal": o,
+        "aria-modal": r,
         children: [
-          /* @__PURE__ */ s.jsx(
-            h,
+          !i && /* @__PURE__ */ l.jsx(
+            E,
             {
-              icon: /* @__PURE__ */ s.jsx(C.Close, { size: 24 }),
+              icon: /* @__PURE__ */ l.jsx(V.Close, { size: 24 }),
               animate: !1,
               type: "button",
               size: "small",
               variant: "text",
-              onClick: n,
+              onClick: a,
               label: "",
               color: "secondary",
-              className: b(
+              className: h(
                 "absolute top-0 z-50",
-                p({ direction: a })
+                x({ direction: o })
               ),
               "aria-label": "Close drawer"
             }
           ),
-          e
+          typeof s == "function" ? s(m) : s
         ]
       }
     )
   ] });
-}, E = () => {
-  const e = x(null), a = l(() => {
-    e.current?.open();
-  }, []), t = l(() => {
-    e.current?.close();
-  }, []);
+}, G = () => {
+  const t = u(null), s = f((r) => {
+    t.current?.open(r);
+  }, []), o = f(() => {
+    t.current?.close();
+  }, []), e = f(() => t.current?.isOpen ?? !1, []), a = f(() => t.current?.getContext() ?? null, []);
   return {
-    isOpen: l(() => e.current?.isOpen ?? !1, []),
-    open: a,
-    close: t,
-    drawerRef: e
+    isOpen: e,
+    open: s,
+    close: o,
+    drawerRef: t,
+    getContext: a
   };
 };
 export {
-  O as default,
-  E as useDrawerDesktop
+  L as default,
+  G as useDrawerDesktop
 };

package/dist/Header.es.js

@@ -1,16 +1,16 @@
 import { j as l } from "./jsx-runtime-DKDX3adD.js";
-import { c as s } from "./cn-B6yFEsav.js";
-import { motion as m } from "framer-motion";
-import { memo as n } from "react";
-const r = ({ title: e, subtitle: t, children: a, className: i }) => /* @__PURE__ */ l.jsx(
+import { c as i } from "./cn-B6yFEsav.js";
+import { motion as n } from "framer-motion";
+import { memo as r } from "react";
+const x = ({ title: e, subtitle: t, children: a, className: s, subtitleClassName: m }) => /* @__PURE__ */ l.jsx(
   "header",
   {
-    className: s(
+    className: i(
       "h-16 flex items-center px-4 sm:h-20 md:h-24 md:px-6 lg:h-28 xl:h-32 2xl:h-36",
-      i
+      s
     ),
     children: /* @__PURE__ */ l.jsxs(
-      m.div,
+      n.div,
       {
         initial: { opacity: 0, y: -10 },
         animate: { opacity: 1, y: 0 },
@@ -18,7 +18,7 @@ const r = ({ title: e, subtitle: t, children: a, className: i }) => /* @__PURE__
         className: "flex justify-between items-center w-full",
         children: [
           /* @__PURE__ */ l.jsxs("div", { className: "flex flex-col leading-6", children: [
-            t && /* @__PURE__ */ l.jsx("h3", { className: "text-xs font-semibold text-neutral-medium-default leading-1 sm:leading-2 prometeo-fonts-headline-large", children: t }),
+            t && /* @__PURE__ */ l.jsx("h3", { className: i("text-xs font-semibold text-neutral-medium-default leading-1 sm:leading-2 prometeo-fonts-headline-large ", m), children: t }),
             e && /* @__PURE__ */ l.jsx("h1", { className: "text-xl font-bold text-neutral-strong-default sm:text-2xl md:text-3xl xl:text-[32px] 2xl:text-[34px]", children: e })
           ] }),
           a && /* @__PURE__ */ l.jsx("div", { className: "flex gap-4", children: a })
@@ -26,7 +26,7 @@ const r = ({ title: e, subtitle: t, children: a, className: i }) => /* @__PURE__
       }
     )
   }
-), o = n(r, (e, t) => e.title !== t.title || e.subtitle !== t.subtitle || e.className !== t.className ? !1 : e.children !== t.children ? !e.children && !t.children : !0);
+), u = r(x, (e, t) => e.title !== t.title || e.subtitle !== t.subtitle || e.className !== t.className ? !1 : e.children !== t.children ? !e.children && !t.children : !0);
 export {
-  o as default
+  u as default
 };

package/dist/ProfilePictureUpload.es.js

@@ -118,7 +118,7 @@ function O({
           {
             ref: u,
             className: l(
-              "absolute bg-primary-default-default rounded-lg border-[2px] hover:bg-primary-default-hover cursor-pointer grid place-content-center",
+              "absolute bg-primary-default-default rounded-lg border-2 hover:bg-primary-default-hover cursor-pointer grid place-content-center",
               H[i],
               z[i],
               o && "opacity-50 cursor-not-allowed"

package/dist/ProgressBar.es.js

@@ -1,27 +1,42 @@
 import { j as e } from "./jsx-runtime-DKDX3adD.js";
-import { c as x } from "./cn-B6yFEsav.js";
-import u from "react";
-const j = u.forwardRef(
-  ({ className: r, endDate: n, label: l, ...d }, i) => {
-    const t = new Date(n), s = /* @__PURE__ */ new Date(), o = 1440 * 60 * 1e3, m = Math.max(0, Math.ceil((t.getTime() - s.getTime()) / o)), a = s > t, c = l || `Faltan ${m} días`;
-    return /* @__PURE__ */ e.jsxs("div", { ref: i, className: r, ...d, children: [
-      /* @__PURE__ */ e.jsx("div", { className: "flex justify-between items-center mb-2", children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ e.jsx("span", { className: "text-sm text-neutral-medium-default", children: "Tiempo restante" }),
-        /* @__PURE__ */ e.jsx("span", { className: "font-semibold text-base text-neutral-default-default", children: c })
-      ] }) }),
-      /* @__PURE__ */ e.jsx("div", { className: "w-full border-neutral-strong-default border rounded-sm h-[14px]", children: /* @__PURE__ */ e.jsx(
+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 })
+        ] }),
+        /* @__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: x(
-            "h-[14px] rounded-sm transition-all duration-300",
-            a ? "bg-red-500" : "bg-primary-default-default"
+          className: j(
+            "h-full transition-all duration-300",
+            w || b ? "bg-yellow-500" : r ? "bg-red-500" : "bg-primary-default-default"
           ),
-          style: { width: `${a ? 100 : 0}%` }
+          style: { width: `${y}%` }
         }
       ) })
     ] });
   }
 );
 export {
-  j as default
+  V as default
 };