prometeo-design-system 4.3.6 → 4.4.1

package/dist/Toast.es.js

@@ -1,31 +1,31 @@
-import { j as t } from "./jsx-runtime-GkKLlHH4.js";
-import { c as p } from "./cn-B6yFEsav.js";
-import P, { useRef as C, useEffect as E } from "react";
-import { toast as w } from "sonner";
+import { j as r } from "./jsx-runtime-GkKLlHH4.js";
+import { c as g } from "./cn-B6yFEsav.js";
+import I, { useRef as j, useEffect as E } from "react";
+import { toast as y } from "sonner";
 import { Info as k } from "./Icons/Info.es.js";
-import { Error as N } from "./Icons/Error.es.js";
-import { Cancel as T } from "./Icons/Cancel.es.js";
-import { CheckCircle as M } from "./Icons/CheckCircle.es.js";
-import I from "./Button.es.js";
-import { Close as R } from "./Icons/Close.es.js";
-const y = {
+import { Error as T } from "./Icons/Error.es.js";
+import { Cancel as M } from "./Icons/Cancel.es.js";
+import { CheckCircle as P } from "./Icons/CheckCircle.es.js";
+import R from "./Button.es.js";
+import { Close as L } from "./Icons/Close.es.js";
+const v = {
   dark: {
     success: {
       container: "border-b-[2px] border-success-default-default",
       iconClass: "text-success-medium-default",
-      icon: M,
+      icon: P,
       loading: "bg-success-default-default"
     },
     error: {
       container: "border-b-[2px] border-error-default-default",
       iconClass: "text-error-medium-default",
-      icon: T,
+      icon: M,
       loading: "bg-error-default-default"
     },
     warning: {
       container: "border-b-[2px] border-warning-default-default",
       iconClass: "text-warning-medium-default",
-      icon: N,
+      icon: T,
       loading: "bg-warning-default-default"
     },
     info: {
@@ -39,19 +39,19 @@ const y = {
     success: {
       container: "",
       iconClass: "text-success-default-pressed",
-      icon: M,
+      icon: P,
       loading: "bg-success-default-pressed"
     },
     error: {
       container: "",
       iconClass: "text-error-medium-pressed",
-      icon: T,
+      icon: M,
       loading: "bg-error-medium-pressed"
     },
     warning: {
       container: "",
       iconClass: "text-warning-medium-pressed",
-      icon: N,
+      icon: T,
       loading: "bg-warning-medium-pressed"
     },
     info: {
@@ -61,7 +61,7 @@ const y = {
       loading: "bg-primary-default-pressed"
     }
   }
-}, v = {
+}, C = {
   dark: {
     container: "bg-neutral-default-default",
     title: "text-neutral-strong-default",
@@ -74,197 +74,238 @@ const y = {
     description: "text-neutral-medium-focused",
     shadow: "0px 0px 2px 0px rgba(0, 0, 0, 0.35),8px 8px 20px 0px rgba(0, 0, 0, 0.3),0px 0px 15px 0px rgba(0, 0, 0, 0.2),0px 0px 20px 0px rgba(21, 21, 21, 0.3) inset,6px 0px 100px 0px rgba(0, 0, 0, 0.05) inset"
   }
-}, j = (d) => {
-  const { title: n, description: l, button: s, id: c, icon: a, variant: o = "info", colorMode: e = "dark", showClose: m = !1, loading: u = !1, loadingTimeout: g = 2500, finishLoader: f = !1 } = d;
-  return /* @__PURE__ */ t.jsxs(
+}, N = (x) => {
+  const { title: l, description: f, button: o, id: d, icon: n, variant: i = "info", colorMode: t = "dark", showClose: h = !1, loading: m = !1, loadingTimeout: p = 2500, finishLoader: c = !1, customContent: u } = x;
+  return /* @__PURE__ */ r.jsxs(
     "div",
     {
       style: {
-        boxShadow: v[e].shadow
+        boxShadow: C[t].shadow
       },
-      className: p(
-        "flex p-3 pb-4 md:w-[485px] md:max-w-[485px] md:min-w-[485px] md:h-[68px] md:max-h-[68px] rounded-lg gap-2",
-        "w-[345px] max-w-[345px] min-w-[345px] h-[68px] max-h-[68px] relative",
-        v[e].container,
-        y[e][o].container,
-        u && "border-b-0"
+      className: g(
+        "flex p-3 pb-4 md:w-[485px] md:max-w-[485px] md:min-w-[485px] rounded-lg gap-2",
+        "w-[345px] max-w-[345px] min-w-[345px] relative",
+        // Altura fija solo cuando no hay customContent
+        !u && "md:h-[68px] md:max-h-[68px] h-[68px] max-h-[68px]",
+        // Cuando hay customContent, permitir crecimiento pero con mínimo
+        u && "md:min-h-[68px] min-h-[68px]",
+        C[t].container,
+        v[t][i].container,
+        m && "border-b-0"
       ),
       children: [
-        /* @__PURE__ */ t.jsxs(
+        /* @__PURE__ */ r.jsxs(
           "div",
           {
-            className: "flex items-center justify-start gap-2 max-h-[38px] h-[38px] overflow-hidden flex-1 ",
+            className: g(
+              "flex items-start gap-2 flex-1",
+              // Restricciones de altura solo cuando no hay customContent
+              !u && "justify-start items-center max-h-[38px] h-[38px] overflow-hidden",
+              // Cuando hay customContent, permitir crecimiento
+              u && "justify-start"
+            ),
             children: [
-              /* @__PURE__ */ t.jsx("div", { className: "f", style: { color: "inherit" }, children: P.createElement(a || y[e][o].icon, { size: 24, className: y[e][o].iconClass }) }),
-              /* @__PURE__ */ t.jsxs("div", { className: "flex-1 flex flex-col gap-1", children: [
-                /* @__PURE__ */ t.jsx("p", { className: p("select-none prometeo-fonts-label-medium md:prometeo-fonts-label-xlarge", v[e].title), children: n }),
-                l && /* @__PURE__ */ t.jsx("p", { className: p("select-none prometeo-fonts-body-xsmall md:prometeo-fonts-body-small text-nowrap overflow-ellipsis ", v[e].description), children: l })
+              /* @__PURE__ */ r.jsx("div", { className: "f shrink-0", style: { color: "inherit" }, children: I.createElement(n || v[t][i].icon, { size: 24, className: v[t][i].iconClass }) }),
+              u ? /* @__PURE__ */ r.jsx("div", { className: "flex-1 min-w-0", children: u }) : /* @__PURE__ */ r.jsxs("div", { className: "flex-1 flex flex-col gap-1", children: [
+                /* @__PURE__ */ r.jsx("p", { className: g("select-none prometeo-fonts-label-medium md:prometeo-fonts-label-xlarge", C[t].title), children: l }),
+                f && /* @__PURE__ */ r.jsx("p", { className: g("select-none prometeo-fonts-body-xsmall md:prometeo-fonts-body-small text-nowrap overflow-ellipsis ", C[t].description), children: f })
               ] })
             ]
           }
         ),
-        u && /* @__PURE__ */ t.jsx(L, { color: o, timeOut: g, finished: f, colorMode: e }),
-        s?.label && /* @__PURE__ */ t.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ t.jsx(
-          I,
+        m && /* @__PURE__ */ r.jsx(V, { color: i, timeOut: p, finished: c, colorMode: t }),
+        o?.label && /* @__PURE__ */ r.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ r.jsx(
+          R,
           {
-            label: s?.label,
+            label: o?.label,
             onClick: () => {
-              s?.onClick(), w.dismiss(c);
+              o?.onClick(), y.dismiss(d);
             },
             size: "small",
             color: "secondary"
           }
         ) }),
-        m && /* @__PURE__ */ t.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ t.jsx(
-          I,
+        h && /* @__PURE__ */ r.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ r.jsx(
+          R,
           {
             onClick: () => {
-              w.dismiss(c);
+              y.dismiss(d);
             },
             label: "",
             size: "small",
             color: "secondary",
-            icon: /* @__PURE__ */ t.jsx(R, { className: p(e === "light" ? "text-neutral-medium-focused " : "") }),
+            icon: /* @__PURE__ */ r.jsx(L, { className: g(t === "light" ? "text-neutral-medium-focused " : "") }),
             variant: "text",
             animate: !1,
-            className: p(e === "light" ? "hover:bg-neutral-default-hover-light focus:bg-inherit active:bg-neutral-weak-hover " : "")
+            className: g(t === "light" ? "hover:bg-neutral-default-hover-light focus:bg-inherit active:bg-neutral-weak-hover " : "")
           }
         ) })
       ]
     }
   );
-}, L = ({ className: d, color: n, timeOut: l, finished: s, colorMode: c }) => {
-  const a = C(0), o = C(Date.now()), e = C(null);
+}, V = ({ className: x, color: l, timeOut: f, finished: o, colorMode: d }) => {
+  const n = j(0), i = j(Date.now()), t = j(null);
   E(() => {
-    if (s) {
-      a.current = 1, e.current && (e.current.style.width = "100%");
+    if (o) {
+      n.current = 1, t.current && (t.current.style.width = "100%");
       return;
     }
-    o.current = Date.now(), a.current = 0;
-    const u = setInterval(() => {
-      const g = Date.now() - o.current, f = Math.min(g / l, 1), b = f * 0.95, h = Math.sin(f * Math.PI * 2) * 0.15 + 0.05, r = Math.random() < h;
-      let i;
-      if (r)
-        i = a.current;
+    i.current = Date.now(), n.current = 0;
+    const m = setInterval(() => {
+      const p = Date.now() - i.current, c = Math.min(p / f, 1), u = c * 0.95, b = Math.sin(c * Math.PI * 2) * 0.15 + 0.05, w = Math.random() < b;
+      let e;
+      if (w)
+        e = n.current;
       else {
-        const x = (Math.random() - 0.5) * 0.25;
-        i = Math.max(a.current, Math.min(0.95, b + x));
+        const a = (Math.random() - 0.5) * 0.25;
+        e = Math.max(n.current, Math.min(0.95, u + a));
       }
-      a.current = i, e.current && (e.current.style.width = `${i * 100}%`), (f >= 1 || s) && clearInterval(u);
+      n.current = e, t.current && (t.current.style.width = `${e * 100}%`), (c >= 1 || o) && clearInterval(m);
     }, 50);
-    return () => clearInterval(u);
-  }, [l, s]);
-  const m = y[c][n].loading;
-  return /* @__PURE__ */ t.jsx("div", { className: p(
+    return () => clearInterval(m);
+  }, [f, o]);
+  const h = v[d][l].loading;
+  return /* @__PURE__ */ r.jsx("div", { className: g(
     "absolute bottom-0 translate-y-0 left-0 w-full h-2 overflow-hidden rounded-b-xl",
     'after:content-[""] after:w-[calc(100%-0px)] after:absolute after:bottom-0 after:left-1/2 after:bg-neutral-default-default after:h-2 after:-translate-x-1/2 after:-translate-y-[2px] after:rounded-b-full after:overflow-hidden',
-    d
-  ), children: /* @__PURE__ */ t.jsx(
+    x
+  ), children: /* @__PURE__ */ r.jsx(
     "div",
     {
-      ref: e,
-      className: p("h-full transition-all duration-300 ease-out", m),
+      ref: t,
+      className: g("h-full transition-all duration-300 ease-out", h),
       style: { width: "0%" }
     }
   ) });
 };
-function F(d, n) {
-  const { duration: l = 2500, showClose: s = !1, colorMode: c = "dark", position: a } = n || {};
-  return w.custom((o) => /* @__PURE__ */ t.jsx(
-    j,
+function G(x, l) {
+  const { duration: f = 2500, showClose: o = !1, colorMode: d = "dark", position: n } = l || {};
+  return y.custom((i) => /* @__PURE__ */ r.jsx(
+    N,
     {
-      id: o,
-      variant: n?.variant || "success",
-      title: d,
-      description: n?.description,
-      icon: n?.icon,
-      button: n?.button,
-      showClose: s,
-      colorMode: c
+      id: i,
+      variant: l?.variant || "success",
+      title: x,
+      description: l?.description,
+      icon: l?.icon,
+      button: l?.button,
+      showClose: o,
+      colorMode: d
     }
   ), {
-    duration: l,
-    position: a,
+    duration: f,
+    position: n,
     unstyled: !0
   });
 }
-const G = (d, n = {}) => {
+const H = (x, l = {}) => {
   const {
-    loading: l,
-    success: s,
-    error: c,
-    colorMode: a = "dark",
-    position: o,
-    timeOut: e = 5e3
-  } = n, m = { title: "Cargando...", variant: "info", ...l }, u = { variant: "success", showClose: !0, ...s }, g = { variant: "error", showClose: !0, ...c };
-  let f, b = !1;
-  const h = (r) => {
-    w.custom((i) => /* @__PURE__ */ t.jsx(
-      j,
+    loading: f,
+    success: o,
+    error: d,
+    colorMode: n = "dark",
+    position: i,
+    timeOut: t = 5e3
+  } = l, h = (e) => typeof e == "string" || typeof e == "number" || typeof e == "boolean" || e === null || e === void 0 || typeof e == "object" && ("$$typeof" in e || I.isValidElement(e)), m = { title: "Cargando...", variant: "info", ...f }, p = typeof o == "function" ? { variant: "success", showClose: !0 } : { variant: "success", showClose: !0, ...o }, c = typeof d == "function" ? { variant: "error", showClose: !0 } : { variant: "error", showClose: !0, ...d };
+  let u, b = !1;
+  const w = (e) => {
+    y.custom((a) => /* @__PURE__ */ r.jsx(
+      N,
       {
-        id: i,
-        ...r,
-        colorMode: a
+        id: a,
+        ...e,
+        colorMode: n
       }
     ), {
-      id: f,
+      id: u,
       // Usar el mismo id para reemplazar
-      duration: r.duration || 1 / 0,
-      position: o,
+      duration: e.duration || 1 / 0,
+      position: i,
       unstyled: !0
     });
   };
-  return f = w.custom((r) => /* @__PURE__ */ t.jsx(
-    j,
+  return u = y.custom((e) => /* @__PURE__ */ r.jsx(
+    N,
     {
-      id: r,
-      loadingTimeout: e,
+      id: e,
+      loadingTimeout: t,
       loading: !0,
       ...m,
-      colorMode: a
+      colorMode: n
     }
   ), {
     duration: 1 / 0,
-    position: o,
+    position: i,
     unstyled: !0
-  }), d.then((r) => {
-    if (b) return;
-    b = !0, console.log(r, "-----promise result", typeof r);
-    const i = u.title || (typeof r == "string" ? r : "Operación completada con éxito!"), x = { ...u, title: i };
-    return h({
+  }), x.then((e) => {
+    if (!b)
+      return b = !0, w({
+        ...m,
+        loadingTimeout: t,
+        loading: !0,
+        finishLoader: !0,
+        variant: "info",
+        duration: 1e3
+      }), setTimeout(() => {
+        let a;
+        if (typeof o == "function") {
+          const s = o(e);
+          h(s) ? a = {
+            ...p,
+            customContent: s,
+            duration: p.duration || 2500
+          } : a = {
+            variant: "success",
+            showClose: !0,
+            ...s,
+            duration: s.duration || 2500
+          };
+        } else {
+          const s = p.title || (typeof e == "string" ? e : "Operación completada con éxito!");
+          a = {
+            ...p,
+            title: s,
+            duration: p.duration || 2500
+          };
+        }
+        w(a);
+      }, 500), e;
+  }).catch((e) => {
+    b || (b = !0, w({
       ...m,
-      loadingTimeout: e,
+      loadingTimeout: t,
       loading: !0,
       finishLoader: !0,
       variant: "info",
       duration: 1e3
     }), setTimeout(() => {
-      h({
-        ...x,
-        duration: x.duration || 2500
-      });
-    }, 500), r;
-  }).catch((r) => {
-    if (b) return;
-    b = !0;
-    const i = g.title || (typeof r == "string" ? r : r.message || "Error!"), x = { ...g, title: i };
-    h({
-      ...m,
-      loadingTimeout: e,
-      loading: !0,
-      finishLoader: !0,
-      variant: "info",
-      duration: 1e3
-    }), setTimeout(() => {
-      h({
-        ...x,
-        duration: x.duration || 2500
-      });
-    }, 500);
-  }), d;
+      let a;
+      if (typeof d == "function") {
+        const s = d(e);
+        h(s) ? a = {
+          ...c,
+          customContent: s,
+          duration: c.duration || 2500
+        } : a = {
+          variant: "error",
+          showClose: !0,
+          ...s,
+          duration: s.duration || 2500
+        };
+      } else {
+        const s = c.title || (typeof e == "string" ? e : e.message || "Error!");
+        a = {
+          ...c,
+          title: s,
+          duration: c.duration || 2500
+        };
+      }
+      w(a);
+    }, 500));
+  }), x;
 };
 export {
-  j as default,
-  G as toastPyrionPromise,
-  F as toastpyrion
+  N as default,
+  H as toastPyrionPromise,
+  G as toastpyrion
 };

package/dist/components/Input/Input.d.ts

@@ -1,5 +1,5 @@
 export type InputVariant = "default" | "error" | "success";
-export type InputSize = "small" | "medium" | "large";
+export type InputSize = "xsmall" | "small" | "medium" | "large";
 export type LabelVariant = "default" | "static";
 export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
     label: string;
@@ -31,5 +31,5 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     onClickIcon?: (event: React.MouseEvent) => void;
 }
-declare const _default: import('react').NamedExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
-export default _default;
+declare const Input: import('react').NamedExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export default Input;

package/dist/components/Shared/Chip.d.ts

@@ -1,6 +1,6 @@
 import { ComponentVariant } from './types';
-type ChipProps = {
-    id: string | number;
+export type ChipProps = {
+    id?: string | number;
     label: string;
     onRemove?: (optionId: string | number) => void;
     className?: string;

package/dist/components/TabLinks/TabLinks.d.ts

@@ -47,5 +47,6 @@ interface TabLinkItemProps {
     iconTooltipTitle?: string;
     iconTooltipProps?: PlainTooltipProps;
     iconSize?: number;
+    layoutId?: string;
 }
-export declare const TabLinkItem: ({ id, title, icon, iconPosition, onClick, disabled, className, isActive, activeClassName, animated, onIconHover, onIconClick, iconTooltipTitle, iconTooltipProps, iconSize, indicatorClassName }: TabLinkItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabLinkItem: ({ id, title, icon, iconPosition, onClick, disabled, className, isActive, activeClassName, onIconHover, onIconClick, iconTooltipTitle, iconTooltipProps, iconSize, indicatorClassName, layoutId }: TabLinkItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Toaster/Toaster.d.ts

@@ -1,4 +1,5 @@
 import { IconComponent } from '../../Icons/types';
+import { ReactNode } from 'react';
 import { ColorMode } from '../Shared/types';
 type ToastElementsProps = {
     container: string;
@@ -34,15 +35,16 @@ export interface PyrionToastProps {
     loading?: boolean;
     loadingTimeout?: number;
     finishLoader?: boolean;
+    customContent?: ReactNode;
 }
 declare const PyrionToast: (props: PyrionToastProps) => import("react/jsx-runtime").JSX.Element;
 export default PyrionToast;
 export declare function toastpyrion(title: string, options?: Omit<PyrionToastProps, 'id'>): string | number;
-export declare const toastPyrionPromise: (promise: Promise<any>, options?: {
+export declare const toastPyrionPromise: <TData = any, TError = any>(promise: Promise<TData>, options?: {
     loading?: Omit<PyrionToastProps, "id">;
-    success?: Omit<PyrionToastProps, "id">;
-    error?: Omit<PyrionToastProps, "id">;
+    success?: Omit<PyrionToastProps, "id"> | ((data: TData) => Omit<PyrionToastProps, "id"> | ReactNode);
+    error?: Omit<PyrionToastProps, "id"> | ((error: TError) => Omit<PyrionToastProps, "id"> | ReactNode);
     colorMode?: ColorMode;
     position?: ToastPosition;
     timeOut?: number;
-}) => Promise<any>;
+}) => Promise<TData>;

package/dist/exports/Chip.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../components/Shared/Chip';
+export type { ChipProps } from '../components/Shared/Chip';

package/dist/prometeo-design-system.es.js

@@ -21,7 +21,7 @@ import { D as ne } from "./DatePicker-QuBgR5DQ.js";
 import { RecurrentDatePicker as me } from "./RecurrentDatePicker.es.js";
 import { RecurrentDatePickerRRule as ie } from "./RecurrentDatePickerRRule.es.js";
 import { Table as ce, TableBody as be, TableCaption as De, TableCell as ve, TableFooter as Te, TableHead as ge, TableHeader as ke, TableRow as he } from "./Table.es.js";
-import { T as Ce } from "./TabLinks-DxqprStp.js";
+import { T as Ce } from "./TabLinks-BjGwvqR9.js";
 import { default as Ee } from "./TextArea.es.js";
 import { default as Re } from "./Tooltip.es.js";
 import { default as Se } from "./Skeleton.es.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "4.3.6",
+  "version": "4.4.1",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",
@@ -202,6 +202,10 @@
       "types": "./dist/UserCard.d.ts",
       "import": "./dist/UserCard.es.js"
     },
+    "./Chip": {
+      "types": "./dist/Chip.d.ts",
+      "import": "./dist/Chip.es.js"
+    },
     "./styles": "./dist/styles.css",
     "./intellisense": "./src/styles/intellisense.css"
   },
@@ -305,6 +309,9 @@
     "ajv": "^8.17.1",
     "ajv-draft-04": {
       "ajv": "^8.17.1"
+    },
+    "ajv-formats": {
+      "ajv": "^8.17.1"
     }
   }
 }