prometeo-design-system 3.1.5 → 3.1.6

package/dist/Avatar.d.ts

@@ -0,0 +1,4 @@
+export {}
+import PrometeoDesignSystem from './exports/Avatar'
+export default PrometeoDesignSystem
+export {}

package/dist/Avatar.es.js

@@ -0,0 +1,94 @@
+import { j as e } from "./jsx-runtime-GkKLlHH4.js";
+import { g as j } from "./useLabelBackground-BDIHUdND.js";
+import { c as i } from "./cn-B6yFEsav.js";
+import { useState as C, useRef as u, useLayoutEffect as v } from "react";
+function R({
+  imageUrl: t,
+  sizeImage: a = "md",
+  sizeFallback: s = "md",
+  fallbackText: d = "Selene Soluciones",
+  subImageUrl: x
+}) {
+  const [m, f] = C(!1), n = t && t.trim() !== "" && !m, h = (l) => l.split(" ").map((w) => w.charAt(0)).join("").toUpperCase().slice(0, 2), c = {
+    xxxs: "w-6.5 h-6.5",
+    xxs: "w-8 h-8",
+    xs: "w-10 h-10",
+    sm: "w-16 h-16",
+    md: "w-24 h-24",
+    lg: "w-32 h-32",
+    xl: "w-40 h-40"
+  }, g = {
+    xxxs: "text-[12px]",
+    xxs: "text-xs",
+    xs: "text-sm",
+    sm: "text-lg",
+    md: "text-2xl",
+    lg: "text-3xl",
+    xl: "text-4xl"
+  }, b = {
+    xxxs: "w-3 h-3",
+    xxs: "w-[18px] h-[18px] bottom-0 right-0 translate-x-1/3 translate-y-1/3",
+    xs: "w-5 h-5",
+    sm: "w-8 h-8",
+    md: "w-12 h-12 border-3",
+    lg: "w-16 h-16 border-4",
+    xl: "w-20 h-20 border-5"
+  }, p = n ? a : s, r = u(null), o = u(null);
+  return v(() => {
+    if (!r.current || !o.current) return;
+    const l = j(r.current);
+    o.current.style.borderColor = l;
+  }, []), /* @__PURE__ */ e.jsxs("div", { className: "relative inline-block min-w-max ", ref: r, children: [
+    n ? /* @__PURE__ */ e.jsx(
+      "img",
+      {
+        onError: () => {
+          f(!0);
+        },
+        src: t,
+        className: `rounded-full object-cover ${c[a]}`,
+        alt: "Profile",
+        draggable: !1
+      }
+    ) : /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        className: ` flex items-center justify-center rounded-full aspect-square ${c[s]}`,
+        style: { backgroundColor: "#C6D2FF" },
+        children: /* @__PURE__ */ e.jsx(
+          "span",
+          {
+            className: i(
+              "text-[#312C85] font-semibold",
+              g[s]
+            ),
+            children: h(d)
+          }
+        )
+      },
+      "initials"
+    ),
+    x && /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        className: i(
+          "absolute bottom-[-10px] right-[-10px] rounded-full border-1 overflow-hidden bg-gray-900",
+          b[p]
+        ),
+        ref: o,
+        children: /* @__PURE__ */ e.jsx(
+          "img",
+          {
+            draggable: !1,
+            src: x,
+            alt: "Sub badge",
+            className: "w-full h-full object-cover"
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  R as default
+};

package/dist/Button.d.ts

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

package/dist/Button.es.js

@@ -0,0 +1,400 @@
+import { j as t } from "./jsx-runtime-GkKLlHH4.js";
+import { memo as A, useMemo as E } from "react";
+import M from "./Spinner.es.js";
+import { c as p } from "./index-BOQuZ0gG.js";
+import { c as m } from "./cn-B6yFEsav.js";
+const v = {
+  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: ""
+  }
+}, g = {
+  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 flex justify-center items-center"
+}, 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 = p(g.container, {
+  variants: {
+    size: {
+      small: `${r.small.container} ${v.small.container}`,
+      medium: `${r.medium.container} ${v.medium.container}`,
+      large: `${r.large.container} ${v.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 = p(g.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 = p(g.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: i,
+  onClick: j,
+  icon: u,
+  contentClassName: c,
+  loadingText: f = "Cargando...",
+  animate: k = !1,
+  animateIcon: $ = !1,
+  isLoading: a = !1,
+  children: d,
+  hideSpinner: b = !1,
+  spinner: x = /* @__PURE__ */ t.jsx(M, { size: "small", variant: "clip", color: "var(--neutral-600)", className: "size-4 " }),
+  type: N,
+  className: z,
+  disabled: s,
+  variant: l = "fill",
+  form: I,
+  size: o = "medium",
+  color: S = "primary"
+}) => {
+  const h = !!($ && !s && !a), B = !!(k && !s && !a), n = s || a ? "disabled" : S, C = E(() => d || (a ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-1", children: [
+    !b && x,
+    /* @__PURE__ */ t.jsx(
+      "span",
+      {
+        className: m(
+          V({
+            size: o,
+            variant: l,
+            color: n
+          }),
+          o === "small" ? "prometeo-fonts-label-xsmall" : ""
+        ),
+        children: f
+      }
+    )
+  ] }) : /* @__PURE__ */ t.jsxs("div", { className: m("flex items-center gap-1 select-none", c), children: [
+    u && /* @__PURE__ */ t.jsx(
+      "span",
+      {
+        className: q({
+          size: o,
+          variant: l,
+          color: n,
+          animateIcon: h
+        }),
+        children: u
+      }
+    ),
+    i && /* @__PURE__ */ t.jsx(
+      "span",
+      {
+        className: V({
+          size: o,
+          variant: l,
+          color: n
+        }),
+        children: i
+      }
+    )
+  ] })), [
+    d,
+    c,
+    u,
+    i,
+    l,
+    o,
+    n,
+    a,
+    b,
+    x,
+    f,
+    h
+  ]);
+  return /* @__PURE__ */ t.jsx(
+    "button",
+    {
+      type: N,
+      className: m(
+        "group",
+        R({
+          size: o,
+          variant: l,
+          color: n,
+          animation: B
+        }),
+        z
+      ),
+      disabled: s || a,
+      form: I,
+      onClick: j,
+      children: /* @__PURE__ */ t.jsx("div", { className: `flex items-center gap-1 ${c}`, children: C })
+    }
+  );
+}, O = A(D);
+export {
+  O as default
+};