prometeo-design-system 2.7.1 → 2.7.3

package/dist/Avatar.es.js

@@ -1,14 +1,16 @@
-import { j as t } from "./jsx-runtime-DKDX3adD.js";
-import { c as p } from "./cn-B6yFEsav.js";
-import { motion as u } from "framer-motion";
-import { useState as f } from "react";
-function C({
-  imageUrl: s,
+import { j as s } from "./jsx-runtime-DKDX3adD.js";
+import { c as x } from "./cn-B6yFEsav.js";
+import { motion as j } from "framer-motion";
+import { useState as g } from "react";
+function S({
+  imageUrl: t,
   sizeImage: o = "md",
   sizeFallback: e = "md",
-  fallbackText: a = "Selene Soluciones"
+  fallbackText: a = "Selene Soluciones",
+  subImageUrl: l,
+  borderColor: n = "white"
 }) {
-  const [i, x] = f(!1), l = s && s.trim() !== "" && !i, n = (m) => m.split(" ").map((d) => d.charAt(0)).join("").toUpperCase().slice(0, 2), r = {
+  const [c, m] = g(!1), r = t && t.trim() !== "" && !c, d = (f) => f.split(" ").map((w) => w.charAt(0)).join("").toUpperCase().slice(0, 2), i = {
     xxxs: "w-6.5 h-6.5",
     xxs: "w-8.5 h-8.5",
     xs: "w-10 h-10",
@@ -16,7 +18,7 @@ function C({
     md: "w-24 h-24",
     lg: "w-32 h-32",
     xl: "w-40 h-40"
-  }, c = {
+  }, h = {
     xxxs: "text-[12px]",
     xxs: "text-xs",
     xs: "text-sm",
@@ -24,31 +26,68 @@ function C({
     md: "text-2xl",
     lg: "text-3xl",
     xl: "text-4xl"
-  };
-  return /* @__PURE__ */ t.jsx(t.Fragment, { children: l ? /* @__PURE__ */ t.jsx(
-    "img",
-    {
-      onError: () => {
-        x(!0);
+  }, u = {
+    xxxs: "w-3 h-3",
+    xxs: "w-4 h-4",
+    xs: "w-5 h-5",
+    sm: "w-8 h-8",
+    md: "w-12 h-12",
+    lg: "w-16 h-16",
+    xl: "w-20 h-20"
+  }, p = r ? o : e;
+  return /* @__PURE__ */ s.jsxs("div", { className: "relative inline-block", children: [
+    r ? /* @__PURE__ */ s.jsx(
+      "img",
+      {
+        onError: () => {
+          m(!0);
+        },
+        src: t,
+        className: `rounded-full object-cover ${i[o]}`,
+        alt: "Profile"
+      }
+    ) : /* @__PURE__ */ s.jsx(
+      j.div,
+      {
+        className: ` flex items-center justify-center rounded-full aspect-square ${i[e]}`,
+        style: { backgroundColor: "#C6D2FF" },
+        initial: { opacity: 0, scale: 1.1 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.9 },
+        transition: { duration: 0.3 },
+        children: /* @__PURE__ */ s.jsx(
+          "span",
+          {
+            className: x(
+              "text-[#312C85] font-semibold",
+              h[e]
+            ),
+            children: d(a)
+          }
+        )
       },
-      src: s,
-      className: `rounded-full object-cover ${r[o]}`,
-      alt: "Profile"
-    }
-  ) : /* @__PURE__ */ t.jsx(
-    u.div,
-    {
-      className: ` flex items-center justify-center rounded-full aspect-square ${r[e]}`,
-      style: { backgroundColor: "#C6D2FF" },
-      initial: { opacity: 0, scale: 1.1 },
-      animate: { opacity: 1, scale: 1 },
-      exit: { opacity: 0, scale: 0.9 },
-      transition: { duration: 0.3 },
-      children: /* @__PURE__ */ t.jsx("span", { className: p("text-[#312C85] font-semibold", c[e]), children: n(a) })
-    },
-    "initials"
-  ) });
+      "initials"
+    ),
+    l && /* @__PURE__ */ s.jsx(
+      "div",
+      {
+        className: x(
+          "absolute bottom-[-10px] right-[-10px] rounded-full border-4 overflow-hidden bg-gray-900",
+          u[p]
+        ),
+        style: { borderColor: n },
+        children: /* @__PURE__ */ s.jsx(
+          "img",
+          {
+            src: l,
+            alt: "Sub badge",
+            className: "w-full h-full object-cover"
+          }
+        )
+      }
+    )
+  ] });
 }
 export {
-  C as default
+  S as default
 };

package/dist/Button.es.js

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

package/dist/DatePicker.es.js

@@ -1,11 +1,11 @@
 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-C22kKz7U.js";
+import { I as wn } from "./Input-CnXDg2s7.js";
 import { createPortal as bn } from "react-dom";
 import { Icons as Mt } from "./Icons.es.js";
 import { c as Be } from "./cn-B6yFEsav.js";
-import { B as vt } from "./Button-CvBWH1HX.js";
+import vt from "./Button.es.js";
 function Mn(e, t, n = "long") {
   return new Intl.DateTimeFormat("en-US", {
     // Enforces engine to render the time. Without the option JavaScriptCore omits it.