prometeo-design-system 4.4.3 → 4.6.0

package/dist/Header.es.js

@@ -1,33 +1,34 @@
-import { j as s } from "./jsx-runtime-GkKLlHH4.js";
+import { j as t } from "./jsx-runtime-GkKLlHH4.js";
 import { c as a } from "./cn-B6yFEsav.js";
 import { motion as n } from "framer-motion";
 import { memo as f } from "react";
-const c = ({ title: e, subtitle: t, children: i, className: r, subtitleClassName: m, titleClassName: d, mainActionSlot: l }) => /* @__PURE__ */ s.jsxs(
+const c = ({ title: e, subtitle: l, children: s, className: r, subtitleClassName: d, titleClassName: m, mainActionSlot: i }) => /* @__PURE__ */ t.jsxs(
   n.header,
   {
     initial: { opacity: 0, y: -10 },
     animate: { opacity: 1, y: 0 },
     transition: { duration: 0.6, ease: "easeOut" },
     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 overflow-hidden",
-      "flex justify-between items-center w-full",
+      "flex items-center sm:min-h-20 md:min-h-24 lg:min-h-28 xl:min-h-32 2xl:min-h-36 overflow-hidden px-4 md:px-0 py-2 md:py-3",
+      "flex justify-between items-center w-full max-w-full overflow-hidden",
+      i && "px-1",
       r
     ),
     children: [
-      /* @__PURE__ */ s.jsxs("div", { className: a(
-        "flex items-center md:items-start md:flex-col leading-6 h-full justify-center min-w-max",
-        l && "justify-start"
+      /* @__PURE__ */ t.jsxs("div", { className: a(
+        "flex items-center md:items-start md:flex-col leading-6 h-full justify-center overflow-hidden p-1  ",
+        i && "justify-start gap-1 w-full"
       ), children: [
-        l && /* @__PURE__ */ s.jsx("div", { children: typeof l == "function" ? l() : l }),
-        /* @__PURE__ */ s.jsxs("div", { className: "flex flex-col leading-6 justify-center", children: [
-          t && /* @__PURE__ */ s.jsx("h3", { className: a(" prometeo-fonts-body-medium text-neutral-medium-default ", m), children: t }),
-          e && /* @__PURE__ */ s.jsx("h1", { className: a("prometeo-fonts-headline-small text-neutral-strong-default", d), children: e })
+        i && /* @__PURE__ */ t.jsx("div", { className: "md:px-3", children: typeof i == "function" ? i() : i }),
+        /* @__PURE__ */ t.jsxs("div", { className: "flex flex-col leading-6 justify-center md:px-6 relative overflow-hidden ", children: [
+          l && /* @__PURE__ */ t.jsx("h3", { className: a(" prometeo-fonts-body-medium text-neutral-medium-default line-clamp-1 text-nowrap overflow-hidden text-ellipsis w-full", d), children: l }),
+          e && /* @__PURE__ */ t.jsx("h1", { className: a("prometeo-fonts-headline-small text-neutral-strong-default line-clamp-1 text-nowrap overflow-hidden text-ellipsis w-full wrap-break-word", m), children: e })
         ] })
       ] }),
-      i && /* @__PURE__ */ s.jsx("div", { className: "bg-red-400 px-2", children: i })
+      s && /* @__PURE__ */ t.jsx("div", { className: "shrink relative", children: s })
     ]
   }
-), u = f(c, (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 = f(c, (e, l) => e.title !== l.title || e.subtitle !== l.subtitle || e.className !== l.className ? !1 : e.children !== l.children ? !e.children && !l.children : !0);
 u.displayName = "Header";
 export {
   u as default

package/dist/IconButton.d.ts

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

package/dist/IconButton.es.js

@@ -0,0 +1,306 @@
+import { j as r } from "./jsx-runtime-GkKLlHH4.js";
+import { memo as C, useMemo as E } from "react";
+import R from "./Spinner.es.js";
+import { c as b } from "./index-BOQuZ0gG.js";
+import { c as f } from "./cn-B6yFEsav.js";
+const u = {
+  small: {
+    container: "w-8 h-8 p-0 rounded-[6px]"
+  },
+  medium: {
+    container: "w-8 h-8 p-0 rounded-[6px]"
+  },
+  large: {
+    container: "w-12 h-12 p-0"
+  }
+}, e = {
+  fill: {
+    primary: {
+      container: ` bg-primary-default-default border-primary-default-default
+            hover:bg-primary-default-hover
+            active:bg-primary-default-focused            
+            `,
+      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`,
+      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",
+      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",
+      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",
+      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!",
+      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
+            `,
+      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",
+      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",
+      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",
+      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",
+      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!",
+      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",
+      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",
+      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",
+      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",
+      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",
+      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",
+      icon: "text-neutral-medium-focused group-hover:text-neutral-medium-focused group-active:text-neutral-medium-focused"
+    }
+  }
+}, a = {
+  small: {
+    container: "",
+    icon: ""
+  },
+  medium: {
+    container: "",
+    icon: ""
+  },
+  large: {
+    container: "",
+    icon: ""
+  }
+}, h = {
+  container: "flex justify-center items-center gap-1 w-max rounded-lg bg-transparent cursor-pointer transition-all ease-in-out duration-300 relative",
+  icon: "w-max transition-all ease-in-out duration-300 flex justify-center items-center"
+}, p = {
+  true: {
+    container: "hover:scale-105 active:scale-95 disabled:scale-100"
+  },
+  false: {
+    container: ""
+  }
+}, g = {
+  true: {
+    icon: "group-hover:rotate-90 group-active:rotate-0 group-disabled:rotate-0"
+  },
+  false: {
+    icon: ""
+  }
+}, q = b(h.container, {
+  variants: {
+    size: {
+      small: `${a.small.container} ${u.small.container}`,
+      medium: `${a.medium.container} ${u.medium.container}`,
+      large: `${a.large.container} ${u.large.container}`
+    },
+    variant: {
+      fill: "",
+      outline: "",
+      text: ""
+    },
+    color: {
+      primary: "",
+      secondary: "",
+      success: "",
+      error: "",
+      warning: "",
+      disabled: ""
+    },
+    animation: {
+      true: p.true.container,
+      false: p.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
+  }
+}), A = b(h.icon, {
+  variants: {
+    size: {
+      small: a.small.icon,
+      medium: a.medium.icon,
+      large: a.large.icon
+    },
+    variant: {
+      fill: "",
+      outline: "",
+      text: ""
+    },
+    color: {
+      primary: "",
+      secondary: "",
+      success: "",
+      error: "",
+      warning: "",
+      disabled: ""
+    },
+    animateIcon: {
+      true: g.true.icon,
+      false: g.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
+  }
+}), M = ({
+  onClick: x,
+  icon: y,
+  contentClassName: n,
+  animate: w = !1,
+  animateIcon: j = !1,
+  isLoading: t = !1,
+  children: V,
+  hideSpinner: d = !1,
+  spinner: v = /* @__PURE__ */ r.jsx(R, { size: "small", variant: "clip", color: "var(--neutral-600)", className: "size-4 " }),
+  type: I,
+  className: $,
+  disabled: o,
+  variant: i = "fill",
+  form: k,
+  size: l = "medium",
+  color: z = "primary"
+}) => {
+  const s = V || y;
+  if (!s)
+    throw new Error('IconButton: Se requiere un icon (prop "icon" o "children")');
+  const m = !!(j && !o && !t), S = !!(w && !o && !t), c = o || t ? "disabled" : z, N = E(() => {
+    if (t)
+      return /* @__PURE__ */ r.jsx("div", { className: "flex items-center justify-center", children: !d && v });
+    const B = s;
+    return /* @__PURE__ */ r.jsx("div", { className: f("flex items-center justify-center select-none", n), children: /* @__PURE__ */ r.jsx(
+      "span",
+      {
+        className: A({
+          size: l,
+          variant: i,
+          color: c,
+          animateIcon: m
+        }),
+        children: /* @__PURE__ */ r.jsx(B, {})
+      }
+    ) });
+  }, [
+    n,
+    s,
+    i,
+    l,
+    c,
+    t,
+    d,
+    v,
+    m
+  ]);
+  return /* @__PURE__ */ r.jsx(
+    "button",
+    {
+      type: I,
+      className: f(
+        "group",
+        q({
+          size: l,
+          variant: i,
+          color: c,
+          animation: S
+        }),
+        $
+      ),
+      disabled: o || t,
+      form: k,
+      onClick: x,
+      children: /* @__PURE__ */ r.jsx("div", { className: `flex items-center gap-1 ${n}`, children: N })
+    }
+  );
+}, H = C(M);
+export {
+  H as default
+};

package/dist/TextArea.es.js

@@ -1,66 +1,108 @@
-import { j as k } from "./jsx-runtime-GkKLlHH4.js";
-import { c as A } from "./cn-B6yFEsav.js";
-import * as a from "react";
-import { forwardRef as E } from "react";
-const M = E(
+import { j as o } from "./jsx-runtime-GkKLlHH4.js";
+import { c as i } from "./cn-B6yFEsav.js";
+import * as s from "react";
+import { forwardRef as V, Children as _, isValidElement as $ } from "react";
+const b = V(
   ({
-    className: f,
-    autoResize: r = !1,
-    userResize: c = !0,
-    minRows: l = 3,
-    maxRows: n,
-    placeholder: d,
-    onChange: m,
-    value: h,
-    rows: p,
-    disabled: x = !1,
-    ...g
+    className: t,
+    autoResize: a = !0,
+    userResize: f = !1,
+    minRows: d = 1,
+    maxRows: u,
+    placeholder: H,
+    onChange: v,
+    value: S,
+    rows: n,
+    disabled: k = !1,
+    children: m,
+    ...A
     // ← Para pasar las props nativas
-  }, t) => {
-    const o = a.useRef(null), b = a.useCallback(
+  }, l) => {
+    const y = s.useRef(null), r = s.useRef(null), L = s.useCallback(
       (e) => {
-        o.current = e, typeof t == "function" ? t(e) : t && (t.current = e);
+        y.current = e, typeof l == "function" ? l(e) : l && (l.current = e);
       },
-      [t]
-    ), s = a.useCallback(() => {
-      const e = o.current;
-      if (!e || !r) return;
+      [l]
+    ), h = s.useCallback(() => {
+      const e = y.current;
+      if (!e || !a) return;
       e.style.height = "auto";
-      const C = e.scrollHeight, i = Number.parseInt(getComputedStyle(e).lineHeight) || 20, j = l * i + 16;
-      let u = Math.max(C, j);
-      if (n) {
-        const N = n * i + 16;
-        u = Math.min(u, N);
+      const F = e.scrollHeight, x = Number.parseInt(getComputedStyle(e).lineHeight) || 16, I = Math.min((n ?? d) * x, r.current?.clientHeight || 0);
+      let c = Math.max(F, I);
+      if (u || n) {
+        const O = (u || n || 1) * x;
+        c = Math.min(c, O);
       }
-      e.style.height = `${u}px`;
-    }, [r, l, n]), y = (e) => {
-      m?.(e), s();
+      e.style.height = `${c}px`, c > x + 12 && (e.style.alignContent = "start");
+    }, [a, d, u]), R = () => {
+      r.current?.classList.remove("border-neutral-default-default"), r.current?.classList.add("border-primary-default-default");
+    }, E = () => {
+      r.current?.classList.remove("border-primary-default-default"), r.current?.classList.add("border-neutral-default-default");
+    }, z = (e) => {
+      v?.(e), h();
     };
-    a.useEffect(() => {
-      s();
-    }, [s]);
-    const H = () => c ? r ? "resize-x" : "resize" : "resize-none";
-    return /* @__PURE__ */ k.jsx(
-      "textarea",
-      {
-        ref: b,
-        "data-slot": "textarea",
-        className: A(
-          "placeholder:text-neutral-medium-default text-neutral-default-default appearance-none border border-neutral-default-default focus:border-primary-default-default flex w-full rounded-md px-3 py-2 outline-none disabled:cursor-default disabled:opacity-50 md:text-sm",
-          H(),
-          f
-        ),
-        onChange: y,
-        rows: r ? l : p,
-        value: h,
-        placeholder: d,
-        disabled: x,
-        ...g
+    s.useEffect(() => {
+      h();
+    }, [h]);
+    const M = () => f ? a ? "resize-x" : "resize" : "resize-none", T = typeof m == "function" ? m() : m, B = _.toArray(T);
+    let g = null, p = null;
+    return B.forEach((e) => {
+      if ($(e)) {
+        if (e.type === j && !g) {
+          g = e;
+          return;
+        }
+        if (e.type === C && !p) {
+          p = e;
+          return;
+        }
       }
-    );
+    }), /* @__PURE__ */ o.jsxs("div", { ref: r, className: i(
+      "transition-all duration-300 ease-in-out",
+      "border border-neutral-default-default px-3 rounded-lg",
+      "flex gap-1 items-stretch",
+      "relative",
+      "overflow-auto prometeo-scrollbar-thin-weak"
+    ), children: [
+      g,
+      /* @__PURE__ */ o.jsx(
+        "textarea",
+        {
+          ref: L,
+          "data-slot": "textarea",
+          className: i(
+            // 'border border-amber-400/30',
+            "flex-2 shrink-0 min-w-min h-fit my-3 ",
+            "prometeo-fonts-body-large resize-none",
+            "placeholder:text-neutral-medium-default text-neutral-default-default appearance-none",
+            "content-center",
+            "outline-none",
+            "prometeo-scrollbar-thin-weak",
+            M(),
+            t
+          ),
+          onChange: z,
+          onFocus: R,
+          onBlur: E,
+          rows: n ?? d,
+          value: S,
+          placeholder: H,
+          disabled: k,
+          ...A
+        }
+      ),
+      p
+    ] });
   }
-);
-M.displayName = "TextArea";
+), N = (t) => {
+  const { children: a, className: f } = t;
+  return /* @__PURE__ */ o.jsx("div", { className: i("slot", f), children: a });
+}, j = (t) => /* @__PURE__ */ o.jsx(N, { ...t, className: i("left-slot flex gap-1 items-center py-3", t?.className) }), C = (t) => /* @__PURE__ */ o.jsx(N, { ...t, className: i("right-slot flex gap-1 items-end py-3", t?.className) }), q = Object.assign(b, {
+  Root: b,
+  LeftSlot: j,
+  RightSlot: C
+});
+q.displayName = "TextArea";
 export {
-  M as default
+  q as default
 };

package/dist/components/IconButton/IconButton.d.ts

@@ -0,0 +1,22 @@
+import { ButtonVariant, ColorVariant, SizeVariant } from '../Shared/types';
+import { IconComponent } from '../../Icons/types';
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    icon?: IconComponent;
+    contentClassName?: string;
+    animate?: boolean;
+    animateIcon?: boolean;
+    isLoading?: boolean;
+    children?: IconComponent;
+    spinner?: React.ReactNode;
+    type?: 'button' | "submit" | "reset";
+    className?: string;
+    disabled?: boolean;
+    variant?: ButtonVariant;
+    form?: string;
+    size?: SizeVariant;
+    color?: ColorVariant;
+    hideSpinner?: boolean;
+}
+declare const _default: import('react').MemoExoticComponent<({ onClick, icon, contentClassName, animate, animateIcon, isLoading, children, hideSpinner, spinner, type, className, disabled, variant, form, size, color }: IconButtonProps) => React.ReactElement>;
+export default _default;

package/dist/components/TextArea/TextArea.d.ts

@@ -1,5 +1,6 @@
+import { ReactNode } from 'react';
 import * as React from "react";
-export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange"> {
+export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "children"> {
     autoResize?: boolean;
     userResize?: boolean;
     minRows?: number;
@@ -10,6 +11,15 @@ export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
     placeholder?: string;
     rows?: number;
     disabled?: boolean;
+    children?: ReactNode | (() => ReactNode);
 }
-declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+type SlotProps = {
+    children: React.ReactNode;
+    className?: string;
+};
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>> & {
+    Root: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+    LeftSlot: (props: SlotProps) => import("react/jsx-runtime").JSX.Element;
+    RightSlot: (props: SlotProps) => import("react/jsx-runtime").JSX.Element;
+};
 export default TextArea;

package/dist/exports/IconButton.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../components/IconButton/IconButton';
+export { type IconButtonProps } from '../components/IconButton/IconButton';

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export { default as Switch } from './components/Switch/Switch';
 export { default as DatePicker } from './components/DatePicker/DatePicker';
 export { default as RecurrentDatePicker } from './components/RecurrentDatePicker/RecurrentDatePicker';
 export { default as RecurrentDatePickerRRule } from './components/RecurrentDatePicker/RecurrentDatePickerRRule';
+export { default as IconButton } from './components/IconButton/IconButton';
 export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from './components/Table/Table';
 export { default as TabLinks } from './components/TabLinks/TabLinks';
 export { default as TextArea } from './components/TextArea/TextArea';

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

@@ -2,7 +2,7 @@ import { default as h } from "./Avatar.es.js";
 import { default as C } from "./Button.es.js";
 import { default as E } from "./CardProfile.es.js";
 import { default as R } from "./CheckBox.es.js";
-import { default as S, useDialogControl as I } from "./DialogModal.es.js";
+import { default as I, useDialogControl as S } from "./DialogModal.es.js";
 import { default as M, useDrawerDesktop as j } from "./DrawerDesktop.es.js";
 import { default as y, useDrawerMobile as H } from "./DrawerMobile.es.js";
 import { default as A } from "./Header.es.js";
@@ -20,27 +20,28 @@ import { default as fe } from "./Switch.es.js";
 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-DnoWdrdk.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";
-import { default as Le } from "./SegmentedButton.es.js";
-import { I as je } from "./ImageGallery-DG9ovlQ-.js";
-import { default as ye } from "./Image.es.js";
-import { default as Oe, toastpyrion as Ae } from "./Toast.es.js";
-import { default as Ge } from "./ToastProvider.es.js";
-import { default as Ze } from "./SelectSearch.es.js";
-import { default as Je } from "./FAButton.es.js";
-import { default as Qe } from "./RadioButton.es.js";
-import { B as We } from "./badge-BEx-0Q-K.js";
+import { default as ce } from "./IconButton.es.js";
+import { Table as De, TableBody as ve, TableCaption as Te, TableCell as ge, TableFooter as ke, TableHead as he, TableHeader as Be, TableRow as Ce } from "./Table.es.js";
+import { T as Ee } from "./TabLinks-DnoWdrdk.js";
+import { default as Re } from "./TextArea.es.js";
+import { default as Ie } from "./Tooltip.es.js";
+import { default as Le } from "./Skeleton.es.js";
+import { default as je } from "./SegmentedButton.es.js";
+import { I as ye } from "./ImageGallery-DG9ovlQ-.js";
+import { default as Oe } from "./Image.es.js";
+import { default as _e, toastpyrion as Ge } from "./Toast.es.js";
+import { default as Ze } from "./ToastProvider.es.js";
+import { default as Je } from "./SelectSearch.es.js";
+import { default as Qe } from "./FAButton.es.js";
+import { default as We } from "./RadioButton.es.js";
+import { B as Ye } from "./badge-BEx-0Q-K.js";
 import { j as s } from "./jsx-runtime-GkKLlHH4.js";
 import { CloseNavBarDesktop as l } from "./Icons/CloseNavBarDesktop.es.js";
-import { default as Ye } from "./OtpInput.es.js";
+import { default as Fe } from "./OtpInput.es.js";
 import n, { useRef as p, useEffect as m } from "react";
 import { useDropzone as d } from "react-dropzone";
-import { u as Fe } from "./useDevice-vwn4GLwK.js";
-import { default as tt } from "./DropZone.es.js";
+import { u as tt } from "./useDevice-vwn4GLwK.js";
+import { default as ot } from "./DropZone.es.js";
 const D = ({
   isCollapsed: e,
   onToggle: t
@@ -95,56 +96,57 @@ const T = (e, t = !0) => {
 };
 export {
   h as Avatar,
-  We as Badge,
+  Ye as Badge,
   C as Button,
   E as CardProfile,
   R as CheckBox,
   ne as DatePicker,
-  S as DialogModal,
+  I as DialogModal,
   M as DrawerDesktop,
   y as DrawerMobile,
-  tt as DropZone,
-  Je as FAButton,
+  ot as DropZone,
+  Qe as FAButton,
   A as Header,
-  ye as Image,
-  je as ImageGallery,
+  ce as IconButton,
+  Oe as Image,
+  ye as ImageGallery,
   G as Input,
   Z as InputMultiple,
   J as Logo,
   Q as Menu,
   D as NavbarCollapseButton,
-  Ye as OtpInput,
+  Fe as OtpInput,
   W as Pagination,
   Y as ProfilePictureUpload,
   F as ProgressBar,
-  Qe as RadioButton,
+  We as RadioButton,
   me as RecurrentDatePicker,
   ie as RecurrentDatePickerRRule,
-  Le as SegmentedButton,
+  je as SegmentedButton,
   te as Select,
-  Ze as SelectSearch,
-  Se as Skeleton,
+  Je as SelectSearch,
+  Le as Skeleton,
   oe as Spinner,
   se as Steps,
   fe as Switch,
-  Ce as TabLinks,
-  ce as Table,
-  be as TableBody,
-  De as TableCaption,
-  ve as TableCell,
-  Te as TableFooter,
-  ge as TableHead,
-  ke as TableHeader,
-  he as TableRow,
-  Ee as TextArea,
-  Oe as Toast,
-  Ge as ToastProvider,
-  Re as Tooltip,
-  Ae as toastpyrion,
+  Ee as TabLinks,
+  De as Table,
+  ve as TableBody,
+  Te as TableCaption,
+  ge as TableCell,
+  ke as TableFooter,
+  he as TableHead,
+  Be as TableHeader,
+  Ce as TableRow,
+  Re as TextArea,
+  _e as Toast,
+  Ze as ToastProvider,
+  Ie as Tooltip,
+  Ge as toastpyrion,
   T as useClickOutside,
-  I as useDialogControl,
+  S as useDialogControl,
   j as useDrawerDesktop,
   H as useDrawerMobile,
   v as useFileDropzone,
-  Fe as useIsMobile
+  tt as useIsMobile
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "4.4.3",
+  "version": "4.6.0",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",
@@ -206,6 +206,10 @@
       "types": "./dist/Chip.d.ts",
       "import": "./dist/Chip.es.js"
     },
+    "./IconButton": {
+      "types": "./dist/IconButton.d.ts",
+      "import": "./dist/IconButton.es.js"
+    },
     "./styles": "./dist/styles.css",
     "./intellisense": "./src/styles/intellisense.css"
   },