prometeo-design-system 2.6.6 → 2.6.8

package/dist/ButtonV2.d.ts

@@ -0,0 +1,6 @@
+export * from './exports/ButtonV2'
+export {}
+import PrometeoDesignSystem from './exports/ButtonV2'
+export default PrometeoDesignSystem
+export * from './exports/ButtonV2'
+export {}

package/dist/ButtonV2.es.js

@@ -0,0 +1,217 @@
+import { j as e } from "./jsx-runtime-DKDX3adD.js";
+import { memo as N, useMemo as V } from "react";
+import B from "./Spinner.es.js";
+const M = {
+  small: {
+    container: "h-10 px-4 py-2",
+    label: "",
+    icon: ""
+  },
+  medium: {
+    container: "h-12 px-6 py-2",
+    label: "",
+    icon: ""
+  },
+  large: {
+    container: "h-14 px-6 py-2",
+    label: "",
+    icon: ""
+  }
+}, l = {
+  filled: {
+    primary: {
+      container: ` bg-primary-default-default border-primary-default-default
+            hover:bg-primary-default-hover
+            active:bg-primary-default-focused            
+            `,
+      label: " text-neutral-strong-default! group-hover:text-neutral-strong-hover! group-active:text-neutral-strong-pressed!",
+      icon: " text-neutral-strong-default! group-hover:text-neutral-strong-hover! group-active:text-neutral-strong-pressed!"
+    },
+    secondary: {
+      container: `bg-neutral-medium-default border-neutral-medium-default
+            hover:bg-neutral-medium-hover
+            active:bg-neutral-medium-pressed`,
+      label: "text-neutral-strong-default! group-hover:text-neutral-strong-hover! group-active:text-neutral-strong-pressed!",
+      icon: "text-neutral-strong-default! group-hover:text-neutral-strong-hover! group-active:text-neutral-strong-pressed!"
+    },
+    success: {
+      container: "bg-success-default-default border-success-default-default hover:bg-success-default-hover active:bg-success-default-pressed",
+      label: "text-neutral-weak-default group-hover:text-neutral-weak-hover group-active:text-neutral-weak-pressed",
+      icon: "text-neutral-weak-default group-hover:text-neutral-weak-hover group-active:text-neutral-weak-pressed"
+    },
+    error: {
+      container: "bg-error-default-default hover:bg-error-default-hover active:bg-error-default-pressed",
+      label: "text-neutral-strong-default group-hover:text-neutral-strong-hover group-active:text-neutral-strong-pressed",
+      icon: "text-neutral-strong-default group-hover:text-neutral-strong-hover group-active:text-neutral-strong-pressed"
+    },
+    warning: {
+      container: "bg-warning-default-default hover:bg-warning-default-hover active:bg-warning-default-pressed",
+      label: "text-neutral-weak-default group-hover:text-neutral-weak-hover group-active:text-neutral-weak-pressed",
+      icon: "text-neutral-weak-default group-hover:text-neutral-weak-hover group-active:text-neutral-weak-pressed"
+    },
+    disabled: {
+      container: "bg-primary-medium-disabled border-transparent cursor-not-allowed!",
+      label: "text-neutral-strong-disabled group-hover:text-neutral-strong-disabled group-active:text-neutral-strong-disabled",
+      icon: "text-neutral-strong-disabled group-hover:text-neutral-strong-disabled group-active:text-neutral-strong-disabled"
+    }
+  },
+  outlined: {
+    primary: {
+      container: `bg-transparent border-primary-default-default border
+            hover:bg-neutral-default-hover hover:border-primary-medium-hover
+            active:bg-neutral-default-pressed active:border-primary-medium-pressed
+            `,
+      label: "text-primary-default-default group-hover:text-primary-medium-hover group-active:text-primary-medium-pressed",
+      icon: "text-primary-default-default group-hover:text-primary-medium-hover group-active:text-primary-medium-pressed"
+    },
+    secondary: {
+      container: "bg-transparent border-neutral-medium-default border hover:bg-neutral-default-hover hover:border-neutral-medium-hover active:bg-neutral-default-pressed active:border-neutral-medium-pressed",
+      label: "text-neutral-strong-default group-hover:text-neutral-storng-hover group-active:text-neutral-storng-pressed",
+      icon: "text-neutral-strong-default group-hover:text-neutral-storng-hover group-active:text-neutral-storng-pressed"
+    },
+    success: {
+      container: "border border-success-default-default hover:border-success-default-hover hover:bg-neutral-default-hover active:border-success-default-pressed active:bg-neutral-default-pressed",
+      label: "text-success-medium-default group-hover:text-success-medium-hover group-active:text-success-medium-pressed",
+      icon: "text-success-medium-default group-hover:text-success-medium-hover group-active:text-success-medium-pressed"
+    },
+    error: {
+      container: "border border-error-default-default hover:border-error-default-hover hover:bg-neutral-default-hover active:border-error-default-pressed active:bg-neutral-default-pressed",
+      label: "text-error-medium-default group-hover:text-error-medium-hover group-active:text-error-medium-pressed",
+      icon: "text-error-medium-default group-hover:text-error-medium-hover group-active:text-error-medium-pressed"
+    },
+    warning: {
+      container: "border border-warning-default-default hover:border-warning-default-hover hover:bg-neutral-default-hover active:border-warning-default-pressed active:bg-neutral-default-pressed",
+      label: "text-warning-medium-default group-hover:text-warning-medium-hover group-active:text-warning-medium-pressed",
+      icon: "text-warning-medium-default group-hover:text-warning-medium-hover group-active:text-warning-medium-pressed"
+    },
+    disabled: {
+      container: "bg-neutral-default-disabled border-neutral-default-disabled border cursor-not-allowed!",
+      label: "text-neutral-default-disabled group-hover:text-neutral-default-disabled group-active:text-neutral-default-disabled",
+      icon: "text-neutral-default-disabled group-hover:text-neutral-default-disabled group-active:text-neutral-default-disabled"
+    }
+  },
+  text: {
+    primary: {
+      container: " bg-transparent border-0 text-primary-default-default hover:bg-neutral-default-hover hover:border-primary-medium-hover active:bg-neutral-default-pressed",
+      label: "text-primary-default-default group-hover:text-primary-medium-hover group-active:text-primary-medium-pressed",
+      icon: "text-primary-default-default group-hover:text-primary-medium-hover group-active:text-primary-medium-pressed"
+    },
+    secondary: {
+      container: "bg-transparent border-0 hover:bg-neutral-default-hover hover:border-neutral-medium-hover active:bg-neutral-default-pressed",
+      label: "text-neutral-strong-hover group-hover:text-neutral-storng-hover group-active:text-neutral-storng-pressed",
+      icon: "text-neutral-strong-hover group-hover:text-neutral-storng-hover group-active:text-neutral-storng-pressed"
+    },
+    success: {
+      container: "border border-transparent hover:border-success-default-hover hover:bg-neutral-default-hover hover:border-success-default-hover active:border-success-default-pressed active:bg-neutral-default-pressed",
+      label: "text-success-medium-default group-hover:text-success-medium-hover group-active:text-success-medium-pressed",
+      icon: "text-success-medium-default group-hover:text-success-medium-hover group-active:text-success-medium-pressed"
+    },
+    error: {
+      container: "border border-transparent hover:border-error-default-hover hover:bg-neutral-default-hover hover:border-error-default-hover active:border-error-default-pressed active:bg-neutral-default-pressed",
+      label: "text-error-medium-default group-hover:text-error-medium-hover group-active:text-error-medium-pressed",
+      icon: "text-error-medium-default group-hover:text-error-medium-hover group-active:text-error-medium-pressed"
+    },
+    warning: {
+      container: "border border-transparent hover:border-warning-default-hover hover:bg-neutral-default-hover hover:border-warning-default-hover active:border-warning-default-pressed active:bg-neutral-default-pressed",
+      label: "text-warning-medium-default group-hover:text-warning-medium-hover group-active:text-warning-medium-pressed",
+      icon: "text-warning-medium-default group-hover:text-warning-medium-hover group-active:text-warning-medium-pressed"
+    },
+    disabled: {
+      container: "bg-transparent border-neutral-default-disabled border-none cursor-not-allowed!",
+      label: "text-neutral-medium-focused group-hover:text-neutral-medium-focused group-active:text-neutral-medium-focused",
+      icon: "text-neutral-medium-focused group-hover:text-neutral-medium-focused group-active:text-neutral-medium-focused"
+    }
+  }
+}, n = {
+  small: {
+    container: "",
+    label: "prometeo-fonts-label-large",
+    icon: ""
+  },
+  medium: {
+    container: "",
+    label: "prometeo-fonts-label-xlarge",
+    icon: ""
+  },
+  large: {
+    container: "",
+    label: "prometeo-fonts-label-xlarge",
+    icon: ""
+  }
+}, c = {
+  container: "flex items-center gap-1 w-max rounded-lg bg-transparent cursor-pointer transition-all ease-in-out duration-300",
+  label: "w-max transition-all ease-in-out duration-300",
+  icon: "w-max transition-all ease-in-out duration-300"
+}, A = {
+  true: {
+    container: "hover:scale-105 active:scale-95 disabled:scale-100"
+  },
+  false: {
+    container: ""
+  }
+}, C = {
+  true: {
+    icon: "group-hover:rotate-90 group-active:rotate-0 group-disabled:rotate-0"
+  },
+  false: {
+    icon: ""
+  }
+}, E = ({
+  label: m,
+  onClick: g,
+  icon: d,
+  contentClassName: s,
+  loadingText: v = "Cargando...",
+  animate: b = !0,
+  animateIcon: f = !0,
+  isLoading: t = !1,
+  children: i,
+  hideSpinner: h = !1,
+  spinner: x = /* @__PURE__ */ e.jsx(B, { size: "small", variant: "clip", speedMultiplier: 0.5, className: "mt-1.5", color: "var(--neutral-600)" }),
+  type: w,
+  className: y,
+  disabled: o,
+  variant: a = "filled",
+  form: $,
+  size: r = "medium",
+  color: p = "primary"
+}) => {
+  const k = f && !o && !t ? "true" : "false", j = b && !o && !t ? "true" : "false", u = o || t ? "disabled" : p, S = V(() => i || (t ? /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1", children: [
+    !h && x,
+    /* @__PURE__ */ e.jsx("span", { className: ` ${n[r].label} ${l[a][u].label} ${r === "small" ? "prometeo-fonts-label-xsmall" : ""}`, children: v })
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `flex items-center gap-1 ${s}`, children: [
+    d && /* @__PURE__ */ e.jsx("span", { className: `
+            ${c.icon}
+            ${l[a][u].icon} 
+            ${n[r].icon}
+            ${C[k].icon}
+            `, children: d }),
+    /* @__PURE__ */ e.jsx("span", { className: `
+            ${c.label}
+            ${l[a][u].label} 
+            ${n[r].label}
+            `, children: m })
+  ] })), [i, s, d, m, a, p, r]);
+  return /* @__PURE__ */ e.jsx(
+    "button",
+    {
+      type: w,
+      className: `
+            group
+            ${c.container}
+            ${n[r].container}
+            ${M[r].container}
+            ${l[a][u].container}
+            ${A[j].container}
+            ${y}
+        `,
+      disabled: o || t,
+      form: $,
+      onClick: g,
+      children: /* @__PURE__ */ e.jsx("div", { className: `flex items-center gap-1 ${s}`, children: S })
+    }
+  );
+}, D = N(E);
+export {
+  D as default
+};

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-i6OzjjFo.js";
+import { I as wn } from "./Input-R52CsX56.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/DrawerDesktop.es.js

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

package/dist/Header.es.js

@@ -1,16 +1,16 @@
 import { j as l } from "./jsx-runtime-DKDX3adD.js";
-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(
+import { c as a } from "./cn-B6yFEsav.js";
+import { motion as r } from "framer-motion";
+import { memo as d } from "react";
+const x = ({ title: e, subtitle: t, children: i, className: s, subtitleClassName: m, titleClassName: n }) => /* @__PURE__ */ l.jsx(
   "header",
   {
-    className: i(
+    className: a(
       "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",
       s
     ),
     children: /* @__PURE__ */ l.jsxs(
-      n.div,
+      r.div,
       {
         initial: { opacity: 0, y: -10 },
         animate: { opacity: 1, y: 0 },
@@ -18,15 +18,15 @@ const x = ({ title: e, subtitle: t, children: a, className: s, subtitleClassName
         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: 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 })
+            t && /* @__PURE__ */ l.jsx("h3", { className: a("font-semibold text-neutral-medium-default leading-1 sm:leading-2 prometeo-fonts-headline-large ", m), children: t }),
+            e && /* @__PURE__ */ l.jsx("h1", { className: a("text-xl font-bold text-neutral-strong-default sm:text-2xl md:text-3xl xl:text-[32px] 2xl:text-[34px]", n), children: e })
           ] }),
-          a && /* @__PURE__ */ l.jsx("div", { className: "flex gap-4", children: a })
+          i && /* @__PURE__ */ l.jsx("div", { className: "flex gap-4", children: i })
         ]
       }
     )
   }
-), 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);
+), h = d(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 {
-  u as default
+  h as default
 };

package/dist/{Input-i6OzjjFo.js → Input-R52CsX56.js}

@@ -51,7 +51,7 @@ const x = {
       "focus:ring-0 focus:ring-error-default/20"
     ),
     label: r(
-      "text-error-light",
+      "text-lime-500",
       "peer-focus:text-error-light"
     ),
     icon: r(

package/dist/Input.es.js

@@ -1,4 +1,4 @@
-import { I as f } from "./Input-i6OzjjFo.js";
+import { I as f } from "./Input-R52CsX56.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-i6OzjjFo.js";
+import { I as i } from "./Input-R52CsX56.js";
 const c = ({
   field: r,
   form: t,