@votodigital-onpeui/react 0.1.58 → 0.1.59

package/dist/{chunk-UWMR6FBN.mjs → chunk-FMHMRILU.mjs}

@@ -1,6 +1,6 @@
 import { IconSpinnerDesktop, IconSpinnerMobile, IconCheck, IconQuestion, IconInfo, IconWarningNotRecommended } from './chunk-WMTOTUKK.mjs';
 import { Modal } from './chunk-DTIU6Q2O.mjs';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 
 var colorClasses = {
@@ -28,23 +28,47 @@ function Button({
   title,
   size = "normal",
   className = "",
+  icon,
+  colorBgIcon,
+  disableEnterClick,
+  hoverEffect = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       className: [
-        "inline-flex items-center justify-center",
+        "inline-flex items-center",
+        icon ? "" : "justify-center",
         "min-w-[200px] border-none",
         "text-white font-semibold cursor-pointer",
         "transition-all duration-300 ease-in-out",
-        "disabled:cursor-default disabled:!bg-onpe-gray",
+        "disabled:cursor-default disabled:bg-onpe-gray!",
+        hoverEffect ? "hover:opacity-50 disabled:hover:opacity-100" : "",
         colorClasses[color],
         sizeClasses[size],
         className
       ].filter(Boolean).join(" "),
+      onKeyDown: disableEnterClick ? handleKeyDown : void 0,
       ...props,
-      children: title
+      children: [
+        icon && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: [
+              "w-12 h-12 flex justify-center items-center shrink-0",
+              props.disabled ? "bg-onpe-gray" : colorClasses[colorBgIcon ?? color]
+            ].join(" "),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 text-center", children: title })
+      ]
     }
   );
 }
@@ -294,5 +318,5 @@ var ModalLoading = ({
 };
 
 export { Button, ModalConfirm, ModalLoading };
-//# sourceMappingURL=chunk-UWMR6FBN.mjs.map
-//# sourceMappingURL=chunk-UWMR6FBN.mjs.map
+//# sourceMappingURL=chunk-FMHMRILU.mjs.map
+//# sourceMappingURL=chunk-FMHMRILU.mjs.map

package/dist/chunk-FMHMRILU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.tsx","../src/components/Feedback/ModalConfirm/ModalConfirm.tsx","../src/components/Feedback/ModalLoading/ModalLoading.tsx"],"names":["jsx","jsxs"],"mappings":";;;;;AAiCA,IAAM,YAAA,GAA4C;AAAA,EAChD,IAAA,EAAM,cAAA;AAAA,EACN,OAAA,EAAS,iBAAA;AAAA,EACT,eAAA,EAAiB,uBAAA;AAAA,EACjB,MAAA,EAAQ,gBAAA;AAAA,EACR,eAAA,EAAiB,uBAAA;AAAA,EACjB,IAAA,EAAM,cAAA;AAAA,EACN,YAAA,EAAc,oBAAA;AAAA,EACd,kBAAA,EAAoB,0BAAA;AAAA,EACpB,GAAA,EAAK,aAAA;AAAA,EACL,WAAA,EAAa,mBAAA;AAAA,EACb,KAAA,EAAO,eAAA;AAAA,EACP,cAAA,EAAgB,sBAAA;AAAA,EAChB,OAAA,EAAS;AACX,CAAA;AAEA,IAAM,WAAA,GAA0C;AAAA,EAC9C,KAAA,EAAO,cAAA;AAAA,EACP,MAAA,EAAQ,gBAAA;AAAA,EACR,KAAA,EAAO;AACT,CAAA;AAEO,SAAS,MAAA,CAAO;AAAA,EACrB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,QAAA;AAAA,EACP,SAAA,GAAY,EAAA;AAAA,EACZ,IAAA;AAAA,EACA,WAAA;AAAA,EACA,iBAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,aAAA,GAAgB,CAAC,KAAA,KAAkD;AACvE,IAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,OAAA,IAAW,KAAA,CAAM,QAAQ,GAAA,EAAK;AAC9C,MAAA,KAAA,CAAM,cAAA,EAAe;AAAA,IACvB;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW;AAAA,QACT,0BAAA;AAAA,QACA,OAAO,EAAA,GAAK,gBAAA;AAAA,QACZ,2BAAA;AAAA,QACA,yCAAA;AAAA,QACA,yCAAA;AAAA,QACA,gDAAA;AAAA,QACA,cAAc,6CAAA,GAAgD,EAAA;AAAA,QAC9D,aAAa,KAAK,CAAA;AAAA,QAClB,YAAY,IAAI,CAAA;AAAA,QAChB;AAAA,OACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAAA,MACX,SAAA,EAAW,oBAAoB,aAAA,GAAgB,MAAA;AAAA,MAC9C,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,oBACC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW;AAAA,cACT,qDAAA;AAAA,cACA,KAAA,CAAM,QAAA,GACF,cAAA,GACA,YAAA,CAAa,eAAe,KAAK;AAAA,aACvC,CAAE,KAAK,GAAG,CAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,wBAEF,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oBAAA,EAAsB,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAC9C;AAEJ;AC/FA,IAAM,gBAAA,GAA2C;AAAA,EAC/C,GAAA,EAAK,eAAA;AAAA,EACL,IAAA,EAAM,gBAAA;AAAA,EACN,OAAA,EAAS,mBAAA;AAAA,EACT,MAAA,EAAQ;AACV,CAAA;AAEA,SAAS,UAAA,CAAW,MAAiB,UAAA,EAA+B;AAClE,EAAA,IAAI,IAAA,KAAS,QAAQ,OAAO,IAAA;AAC5B,EAAA,IAAI,SAAS,SAAA,EAAW;AACtB,IAAA,uBACEA,IAAC,SAAA,EAAA,EAAU,IAAA,EAAK,gBAAe,SAAA,EAAW,CAAA,UAAA,EAAa,UAAU,CAAA,CAAA,EAAI,CAAA;AAAA,EAEzE;AACA,EAAA,IAAI,SAAS,UAAA,EAAY;AACvB,IAAA,uBACEA,IAAC,YAAA,EAAA,EAAa,IAAA,EAAK,gBAAe,SAAA,EAAW,CAAA,UAAA,EAAa,UAAU,CAAA,CAAA,EAAI,CAAA;AAAA,EAE5E;AACA,EAAA,IAAI,SAAS,MAAA,EAAQ;AACnB,IAAA,uBACEA,IAAC,QAAA,EAAA,EAAS,IAAA,EAAK,gBAAe,SAAA,EAAW,CAAA,UAAA,EAAa,UAAU,CAAA,CAAA,EAAI,CAAA;AAAA,EAExE;AAEA,EAAA,uBACEA,GAAAA;AAAA,IAAC,yBAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,cAAA;AAAA,MACL,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA;AAAA,GACpC;AAEJ;AAEA,IAAM,kBAAA,GAA6C;AAAA,EACjD,OAAA,EAAS,iBAAA;AAAA,EACT,OAAA,EAAS,aAAA;AAAA,EACT,QAAA,EAAU,aAAA;AAAA,EACV,IAAA,EAAM;AACR,CAAA;AA+CO,IAAM,eAAe,CAAC;AAAA,EAC3B,MAAA,GAAS,KAAA;AAAA,EACT,UAAU,MAAM;AAAA,EAAC,CAAA;AAAA,EACjB,gBAAA,GAAmB,KAAA;AAAA,EACnB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,UAAA;AAAA,EACA,qBAAA,GAAwB,KAAA;AAAA,EACxB,aAAA,GAAgB,KAAA;AAAA,EAChB,KAAA;AAAA,EACA,YAAY,MAAM;AAAA,EAAC,CAAA;AAAA,EACnB,WAAW,MAAM;AAAA,EAAC,CAAA;AAAA,EAClB,iBAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,GAAA;AAAA,EACd,YAAA,GAAe,KAAA;AAAA,EACf,WAAA,GAAc,KAAA;AAAA,EACd,YAAA,GAAe,KAAA;AAAA,EACf,QAAA,GAAW,KAAA;AAAA,EACX,QAAA,GAAW,IAAA;AAAA,EACX,iBAAA,GAAoB;AACtB,CAAA,KAAyB;AACvB,EAAA,MAAM,OAAA,GAAU,qBAAA;AAChB,EAAA,MAAM,SAAA,GAAY,uBAAA;AAElB,EAAA,MAAM,cAAA,GAAiB,KAAA,IAAS,kBAAA,CAAmB,IAAI,CAAA,IAAK,EAAA;AAE5D,EAAA,MAAM,mBAAA,GAAsB,KAAA,GACvB,gBAAA,CAAiB,KAAK,KAAK,mBAAA,GAC5B,mBAAA;AACJ,EAAA,MAAM,mBAAA,GACJ,UAAA,KAAe,IAAA,KAAS,UAAA,GAAa,SAAA,GAAY,QAAA,CAAA;AACnD,EAAA,MAAM,gBAAgB,mBAAA,KAAwB,SAAA;AAC9C,EAAA,MAAM,cAAA,GAAiB,wBAAwB,QAAA,IAAY,aAAA;AAC3D,EAAA,MAAM,eACJ,iBAAA,KACC,aAAA,GACG,OAAA,GACA,mBAAA,KAAwB,WACtB,WAAA,GACA,SAAA,CAAA;AACR,EAAA,MAAM,WAAA,GAAc,gBAAA,KAAqB,aAAA,GAAgB,IAAA,GAAO,UAAA,CAAA;AAEhE,EAAA,MAAM,gBAAgB,YAAY;AAChC,IAAA,IAAI;AACF,MAAA,MAAM,SAAA,EAAU;AAChB,MAAA,IAAI,CAAC,kBAAkB,OAAA,EAAQ;AAAA,IACjC,SAAS,KAAA,EAAO;AACd,MAAA,OAAA,CAAQ,KAAA,CAAM,2BAA2B,KAAK,CAAA;AAC9C,MAAA,IAAI,CAAC,kBAAkB,OAAA,EAAQ;AAAA,IACjC;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,eAAe,MAAM;AACzB,IAAA,QAAA,EAAS;AACT,IAAA,IAAI,CAAC,kBAAkB,OAAA,EAAQ;AAAA,EACjC,CAAA;AAEA,EAAA,uBACEC,IAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,EAAW,yDAAyD,SAAS,CAAA,CAAA;AAAA,MAC7E,WAAA;AAAA,MACA,aAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA,EAAiB,OAAA;AAAA,MACjB,kBAAA,EAAkB,SAAA;AAAA,MAClB,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,iBAAA;AAAA,MAGA,QAAA,EAAA;AAAA,wBAAAD,IAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oCACZ,QAAA,EAAA,UAAA,CAAW,IAAA,EAAM,mBAAmB,CAAA,EACvC,CAAA;AAAA,wBAGAA,GAAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,OAAA;AAAA,YACJ,SAAA,EAAW;AAAA,cACT,4DAAA;AAAA,cACA;AAAA,aACF,CAAE,KAAK,GAAG,CAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAGC,OAAA,KACE,OAAO,OAAA,KAAY,QAAA,mBAClBA,GAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,SAAA;AAAA,YACJ,SAAA,EAAW,CAAA,0CAAA,EAA6C,YAAA,GAAe,cAAA,GAAiB,aAAa,CAAA,CAAA;AAAA,YACrG,uBAAA,EAAyB,EAAE,MAAA,EAAQ,OAAA;AAAQ;AAAA,4BAG7CA,GAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,SAAA;AAAA,YACJ,SAAA,EAAW,CAAA,qDAAA,EAAwD,YAAA,GAAe,cAAA,GAAiB,aAAa,CAAA,CAAA;AAAA,YAE/G,QAAA,EAAA;AAAA;AAAA,SACH,CAAA;AAAA,QAEH,2BACCA,GAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,UAAU,MAAA,GAAY,SAAA;AAAA,YAC1B,SAAA,EAAW,CAAA,gDAAA,EAAmD,YAAA,GAAe,cAAA,GAAiB,aAAa,CAAA,CAAA;AAAA,YAE1G,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,wBAIFC,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wEAAA,EACb,QAAA,EAAA;AAAA,0BAAAD,GAAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,sBAAA;AAAA,cACV,KAAA,EAAM,KAAA;AAAA,cACN,KAAA,EAAO,YAAA;AAAA,cACP,OAAA,EAAS,aAAA;AAAA,cACT,QAAA,EAAU;AAAA;AAAA,WACZ;AAAA,UACC,kCACCA,GAAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,sBAAA;AAAA,cACV,KAAA,EAAM,SAAA;AAAA,cACN,KAAA,EAAO,WAAA;AAAA,cACP,OAAA,EAAS;AAAA;AAAA;AACX,SAAA,EAEJ,CAAA;AAAA,wBAGAC,IAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2EAAA,EACZ,QAAA,EAAA;AAAA,UAAA,cAAA,oBACCD,GAAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,WAAA;AAAA,cACV,KAAA,EAAM,SAAA;AAAA,cACN,KAAA,EAAO,WAAA;AAAA,cACP,OAAA,EAAS;AAAA;AAAA,WACX;AAAA,0BAEFA,GAAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,WAAA;AAAA,cACV,KAAA,EAAM,KAAA;AAAA,cACN,KAAA,EAAO,YAAA;AAAA,cACP,OAAA,EAAS,aAAA;AAAA,cACT,QAAA,EAAU;AAAA;AAAA;AACZ,SAAA,EACF;AAAA;AAAA;AAAA,GACF;AAEJ;AC3OO,IAAM,eAAe,CAAC;AAAA,EAC3B,MAAA,GAAS,KAAA;AAAA,EACT,UAAU,MAAM;AAAA,EAAC,CAAA;AAAA,EACjB,OAAA,GAAU,aAAA;AAAA,EACV,SAAA,GAAY,EAAA;AAAA,EACZ,WAAA,GAAc,GAAA;AAAA,EACd,QAAA,GAAW,IAAA;AAAA,EACX,iBAAA,GAAoB,IAAA;AAAA,EACpB;AACF,CAAA,KAAyB;AACvB,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,EAAE,CAAA;AAEzD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,MAAA,EAAQ;AACX,MAAA,kBAAA,CAAmB,EAAE,CAAA;AACrB,MAAA;AAAA,IACF;AACA,IAAA,kBAAA,CAAmB,EAAE,CAAA;AACrB,IAAA,MAAM,CAAA,GAAI,UAAA,CAAW,UAAA,CAAW,MAAM;AACpC,MAAA,kBAAA,CAAmB,OAAO,CAAA;AAAA,IAC5B,GAAG,GAAG,CAAA;AACN,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,aAAa,CAAC,CAAA;AAAA,IAC3B,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAA,EAAQ,OAAO,CAAC,CAAA;AAEpB,EAAA,uBACEC,IAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,IAAA;AAAA,MACZ,WAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA,EAAa,IAAA;AAAA,MACb,iBAAA,EAAmB,IAAA;AAAA,MACnB,QAAA;AAAA,MACA,iBAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAD,GAAAA,CAAC,SAAI,SAAA,EAAU,SAAA,EAAU,aAAU,WAAA,EAAY,aAAA,EAAY,QACxD,QAAA,EAAA,eAAA,EACH,CAAA;AAAA,QACC,OAAA,oBACCC,IAAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAAD,GAAAA;AAAA,YAAC,kBAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,yCAAA;AAAA,cACV,aAAA,EAAY;AAAA;AAAA,WACd;AAAA,0BACAA,GAAAA;AAAA,YAAC,iBAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,yCAAA;AAAA,cACV,aAAA,EAAY;AAAA;AAAA;AACd,SAAA,EACF,CAAA;AAAA,wBAEFA,GAAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,CAAA,8DAAA,EAAiE,OAAA,GAAU,MAAA,GAAS,gBAAgB,CAAA,CAAA;AAAA,YAE9G,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ","file":"chunk-FMHMRILU.mjs","sourcesContent":["import { type ReactNode } from \"react\";\n\ntype ButtonColor =\n  | \"blue\"\n  | \"skyblue\"\n  | \"skyblue-light\"\n  | \"yellow\"\n  | \"light-skyblue\"\n  | \"gray\"\n  | \"gray-light\"\n  | \"gray-extra-light\"\n  | \"red\"\n  | \"dark-gray\"\n  | \"green\"\n  | \"yellow-light\"\n  | \"primary\";\n\ntype ButtonSize = \"small\" | \"normal\" | \"large\";\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  color: ButtonColor;\n  title: string;\n  size?: ButtonSize;\n  /** Icono opcional que se muestra a la izquierda del texto */\n  icon?: ReactNode;\n  /** Color de fondo del contenedor del icono. Si no se especifica, usa el mismo color del botón */\n  colorBgIcon?: ButtonColor;\n  /** Deshabilita el click al presionar Enter o Espacio */\n  disableEnterClick?: boolean;\n  /** Activa el efecto hover (default: true) */\n  hoverEffect?: boolean;\n}\n\nconst colorClasses: Record<ButtonColor, string> = {\n  blue: \"bg-onpe-blue\",\n  skyblue: \"bg-onpe-skyblue\",\n  \"skyblue-light\": \"bg-onpe-skyblue-light\",\n  yellow: \"bg-onpe-yellow\",\n  \"light-skyblue\": \"bg-onpe-light-skyblue\",\n  gray: \"bg-onpe-gray\",\n  \"gray-light\": \"bg-onpe-gray-light\",\n  \"gray-extra-light\": \"bg-onpe-gray-extra-light\",\n  red: \"bg-onpe-red\",\n  \"dark-gray\": \"bg-onpe-dark-gray\",\n  green: \"bg-onpe-green\",\n  \"yellow-light\": \"bg-onpe-yellow-light\",\n  primary: \"bg-onpe-blue\",\n};\n\nconst sizeClasses: Record<ButtonSize, string> = {\n  small: \"h-10 text-sm\",\n  normal: \"h-12 text-base\",\n  large: \"h-14 text-lg\",\n};\n\nexport function Button({\n  color,\n  title,\n  size = \"normal\",\n  className = \"\",\n  icon,\n  colorBgIcon,\n  disableEnterClick,\n  hoverEffect = false,\n  ...props\n}: ButtonProps) {\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n    }\n  };\n\n  return (\n    <button\n      className={[\n        \"inline-flex items-center\",\n        icon ? \"\" : \"justify-center\",\n        \"min-w-[200px] border-none\",\n        \"text-white font-semibold cursor-pointer\",\n        \"transition-all duration-300 ease-in-out\",\n        \"disabled:cursor-default disabled:bg-onpe-gray!\",\n        hoverEffect ? \"hover:opacity-50 disabled:hover:opacity-100\" : \"\",\n        colorClasses[color],\n        sizeClasses[size],\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      onKeyDown={disableEnterClick ? handleKeyDown : undefined}\n      {...props}\n    >\n      {icon && (\n        <div\n          className={[\n            \"w-12 h-12 flex justify-center items-center shrink-0\",\n            props.disabled\n              ? \"bg-onpe-gray\"\n              : colorClasses[colorBgIcon ?? color],\n          ].join(\" \")}\n        >\n          {icon}\n        </div>\n      )}\n      <span className=\"flex-1 text-center\">{title}</span>\n    </button>\n  );\n}\n\nexport default Button;\n","import { type ReactNode } from \"react\";\nimport { Modal } from \"../../Modal/Modal\";\nimport { Button } from \"../../Button/Button\";\nimport { IconCheck } from \"../../../icons/Actions/IconCheck\";\nimport { IconWarningNotRecommended } from \"../../../icons\";\nimport { IconQuestion } from \"../../../icons/Actions/IconQuestion\";\nimport { IconInfo } from \"../../../icons/Actions/IconInfo\";\n\nexport type ModalType = \"warning\" | \"success\" | \"question\" | \"info\" | \"none\";\n\n/** Mapa de override de color a clase CSS (icono + título) */\nconst colorOverrideMap: Record<string, string> = {\n  red: \"text-onpe-red\",\n  blue: \"text-onpe-blue\",\n  skyblue: \"text-onpe-skyblue\",\n  yellow: \"text-onpe-yellow\",\n};\n\nfunction renderIcon(type: ModalType, colorClass: string): ReactNode {\n  if (type === \"none\") return null;\n  if (type === \"success\") {\n    return (\n      <IconCheck role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />\n    );\n  }\n  if (type === \"question\") {\n    return (\n      <IconQuestion role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />\n    );\n  }\n  if (type === \"info\") {\n    return (\n      <IconInfo role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />\n    );\n  }\n  // error | warning\n  return (\n    <IconWarningNotRecommended\n      role=\"presentation\"\n      className={`w-16 h-16 ${colorClass}`}\n    />\n  );\n}\n\nconst defaultTitleByType: Record<string, string> = {\n  success: \"Confirmación\",\n  warning: \"Advertencia\",\n  question: \"Atención\",\n  info: \"Información\",\n};\n\nexport interface ModalConfirmProps {\n  isOpen: boolean;\n  onClose: () => void;\n  title?: string;\n  /** Contenido del modal (string o JSX) */\n  message?: ReactNode;\n  /** Alias de message */\n  content?: ReactNode;\n  /** Tipo semántico: determina icono, color de título y color de botón confirmar */\n  type?: ModalType;\n  /**\n   * \"single\" → un botón \"Confirmar\".\n   * \"double\" → \"Cancelar\" + \"Confirmar\".\n   * \"confirm\" → \"No\" + \"Sí\" (diálogo de confirmación Sí/No).\n   */\n  buttonMode?: \"single\" | \"double\" | \"confirm\";\n  /** Deshabilita el botón confirmar */\n  disabledConfirmButton?: boolean;\n  /** Deshabilita el cierre del modal */\n  closeDisabled?: boolean;\n  /**\n   * Override del color del icono y título.\n   * Si no se provee, se deriva automáticamente del `type`.\n   */\n  color?: \"red\" | \"blue\" | \"skyblue\" | \"yellow\";\n  onConfirm?: () => void | Promise<void>;\n  onCancel?: () => void | Promise<void>;\n  textButtonConfirm?: string;\n  textButtonCancel?: string;\n  className?: string;\n  zIndexLevel?: number;\n  withoutAutoClose?: boolean;\n  disableFocus?: boolean;\n  /** Muestra el botón X para cerrar el modal */\n  closeButton?: boolean;\n  /** Alinea el texto del mensaje a la izquierda (justify) en vez de centrado */\n  alignJustify?: boolean;\n  /** Alinea el modal al tope de la pantalla en vez de al centro */\n  alignTop?: boolean;\n  /** Habilita animación de entrada/salida (default: true) */\n  animated?: boolean;\n  /** Bloquea el scroll del body mientras el modal está abierto (default: true) */\n  preventBodyScroll?: boolean;\n}\n\nexport const ModalConfirm = ({\n  isOpen = false,\n  onClose = () => {},\n  withoutAutoClose = false,\n  title,\n  message,\n  content,\n  type = \"warning\",\n  buttonMode,\n  disabledConfirmButton = false,\n  closeDisabled = false,\n  color,\n  onConfirm = () => {},\n  onCancel = () => {},\n  textButtonConfirm,\n  textButtonCancel,\n  className = \"\",\n  zIndexLevel = 100,\n  disableFocus = false,\n  closeButton = false,\n  alignJustify = false,\n  alignTop = false,\n  animated = true,\n  preventBodyScroll = true,\n}: ModalConfirmProps) => {\n  const titleId = \"modal-confirm-title\";\n  const messageId = \"modal-confirm-message\";\n\n  const effectiveTitle = title ?? defaultTitleByType[type] ?? \"\";\n  // Título e ícono siempre skyblue por defecto; `color` es el único override\n  const effectiveColorClass = color\n    ? (colorOverrideMap[color] ?? \"text-onpe-skyblue\")\n    : \"text-onpe-skyblue\";\n  const effectiveButtonMode =\n    buttonMode ?? (type === \"question\" ? \"confirm\" : \"single\");\n  const isConfirmMode = effectiveButtonMode === \"confirm\";\n  const showTwoButtons = effectiveButtonMode === \"double\" || isConfirmMode;\n  const confirmLabel =\n    textButtonConfirm ??\n    (isConfirmMode\n      ? \"Sí\"\n      : effectiveButtonMode === \"double\"\n        ? \"Confirmar\"\n        : \"Aceptar\");\n  const cancelLabel = textButtonCancel ?? (isConfirmMode ? \"No\" : \"Cancelar\");\n\n  const handleConfirm = async () => {\n    try {\n      await onConfirm();\n      if (!withoutAutoClose) onClose();\n    } catch (error) {\n      console.error(\"Error en handleConfirm:\", error);\n      if (!withoutAutoClose) onClose();\n    }\n  };\n\n  const handleCancel = () => {\n    onCancel();\n    if (!withoutAutoClose) onClose();\n  };\n\n  return (\n    <Modal\n      isOpen={isOpen}\n      onClose={onClose}\n      className={`bg-white pt-[30px] pb-[30px] px-[30px] max-w-[719px]! ${className}`}\n      closeButton={closeButton}\n      closeDisabled={closeDisabled}\n      zIndexLevel={zIndexLevel}\n      aria-labelledby={titleId}\n      aria-describedby={messageId}\n      disableFocus={disableFocus}\n      alignTop={alignTop}\n      animated={animated}\n      preventBodyScroll={preventBodyScroll}\n    >\n      {/* Icono */}\n      <div className=\"flex items-center justify-center\">\n        {renderIcon(type, effectiveColorClass)}\n      </div>\n\n      {/* Título */}\n      <p\n        id={titleId}\n        className={[\n          \"text-lg md:text-2xl font-semibold text-center mt-0 md:mt-4\",\n          effectiveColorClass,\n        ].join(\" \")}\n      >\n        {effectiveTitle}\n      </p>\n\n      {/* Mensaje / Contenido */}\n      {message &&\n        (typeof message === \"string\" ? (\n          <div\n            id={messageId}\n            className={`mt-7 w-full text-sm md:text-lg text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\n            dangerouslySetInnerHTML={{ __html: message }}\n          />\n        ) : (\n          <div\n            id={messageId}\n            className={`mt-7 w-full text-sm md:text-lg max-w-full text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\n          >\n            {message}\n          </div>\n        ))}\n      {content && (\n        <div\n          id={message ? undefined : messageId}\n          className={`text-sm w-full md:text-lg max-w-full text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\n        >\n          {content}\n        </div>\n      )}\n\n      {/* Mobile: apilado */}\n      <div className=\"flex flex-col items-center justify-center w-full gap-5 mt-11 md:hidden\">\n        <Button\n          className=\"w-full max-w-[200px]\"\n          color=\"red\"\n          title={confirmLabel}\n          onClick={handleConfirm}\n          disabled={disabledConfirmButton}\n        />\n        {showTwoButtons && (\n          <Button\n            className=\"w-full max-w-[200px]\"\n            color=\"skyblue\"\n            title={cancelLabel}\n            onClick={handleCancel}\n          />\n        )}\n      </div>\n\n      {/* Desktop: fila */}\n      <div className=\"hidden md:flex md:flex-row items-center justify-center w-full gap-5 mt-11\">\n        {showTwoButtons && (\n          <Button\n            className=\"w-[200px]\"\n            color=\"skyblue\"\n            title={cancelLabel}\n            onClick={handleCancel}\n          />\n        )}\n        <Button\n          className=\"w-[200px]\"\n          color=\"red\"\n          title={confirmLabel}\n          onClick={handleConfirm}\n          disabled={disabledConfirmButton}\n        />\n      </div>\n    </Modal>\n  );\n};\n\nexport default ModalConfirm;\n","import { type ReactNode, useEffect, useState } from \"react\";\nimport { Modal } from \"../../Modal/Modal\";\nimport { IconSpinnerDesktop } from \"../../../icons/Actions/IconSpinnerDesktop\";\nimport { IconSpinnerMobile } from \"../../../icons/Actions/IconSpinnerMobile\";\n\nexport interface ModalLoadingProps {\n  isOpen: boolean;\n  onClose?: () => void;\n  message?: string;\n  className?: string;\n  zIndexLevel?: number;\n  animated?: boolean;\n  preventBodyScroll?: boolean;\n  /** Spinner personalizado. Si no se provee, se usa el spinner por defecto de la librería. */\n  spinner?: ReactNode;\n}\n\nexport const ModalLoading = ({\n  isOpen = false,\n  onClose = () => {},\n  message = \"Cargando...\",\n  className = \"\",\n  zIndexLevel = 100,\n  animated = true,\n  preventBodyScroll = true,\n  spinner,\n}: ModalLoadingProps) => {\n  const [announceMessage, setAnnounceMessage] = useState(\"\");\n\n  useEffect(() => {\n    if (!isOpen) {\n      setAnnounceMessage(\"\");\n      return;\n    }\n    setAnnounceMessage(\"\");\n    const t = globalThis.setTimeout(() => {\n      setAnnounceMessage(message);\n    }, 150);\n    return () => {\n      globalThis.clearTimeout(t);\n    };\n  }, [isOpen, message]);\n\n  return (\n    <Modal\n      disableFocus\n      zIndexLevel={zIndexLevel}\n      isOpen={isOpen}\n      onClose={onClose}\n      className={className}\n      closeDisabled\n      whitoutBackground={true}\n      animated={animated}\n      preventBodyScroll={preventBodyScroll}\n    >\n      <div className=\"sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">\n        {announceMessage}\n      </div>\n      {spinner ?? (\n        <>\n          <IconSpinnerDesktop\n            className=\"hidden md:block text-white animate-spin\"\n            aria-hidden=\"true\"\n          />\n          <IconSpinnerMobile\n            className=\"block md:hidden text-white animate-spin\"\n            aria-hidden=\"true\"\n          />\n        </>\n      )}\n      <p\n        className={`text-white leading-normal text-2xl md:text-[64px] text-center ${spinner ? \"mt-5\" : \"mt-10 md:mt-20\"}`}\n      >\n        {message}\n      </p>\n    </Modal>\n  );\n};\n\nexport default ModalLoading;\n"]}

package/dist/components.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
 export { M as ModalConfirm, a as ModalConfirmProps } from './ModalConfirm-aUXxpQ-H.mjs';
 
 type ButtonColor = "blue" | "skyblue" | "skyblue-light" | "yellow" | "light-skyblue" | "gray" | "gray-light" | "gray-extra-light" | "red" | "dark-gray" | "green" | "yellow-light" | "primary";
@@ -9,8 +9,16 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     color: ButtonColor;
     title: string;
     size?: ButtonSize;
+    /** Icono opcional que se muestra a la izquierda del texto */
+    icon?: ReactNode;
+    /** Color de fondo del contenedor del icono. Si no se especifica, usa el mismo color del botón */
+    colorBgIcon?: ButtonColor;
+    /** Deshabilita el click al presionar Enter o Espacio */
+    disableEnterClick?: boolean;
+    /** Activa el efecto hover (default: true) */
+    hoverEffect?: boolean;
 }
-declare function Button({ color, title, size, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ color, title, size, className, icon, colorBgIcon, disableEnterClick, hoverEffect, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface FooterProps extends HTMLAttributes<HTMLDivElement> {
     showBrowserInfo?: boolean;

package/dist/components.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
 export { M as ModalConfirm, a as ModalConfirmProps } from './ModalConfirm-aUXxpQ-H.js';
 
 type ButtonColor = "blue" | "skyblue" | "skyblue-light" | "yellow" | "light-skyblue" | "gray" | "gray-light" | "gray-extra-light" | "red" | "dark-gray" | "green" | "yellow-light" | "primary";
@@ -9,8 +9,16 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     color: ButtonColor;
     title: string;
     size?: ButtonSize;
+    /** Icono opcional que se muestra a la izquierda del texto */
+    icon?: ReactNode;
+    /** Color de fondo del contenedor del icono. Si no se especifica, usa el mismo color del botón */
+    colorBgIcon?: ButtonColor;
+    /** Deshabilita el click al presionar Enter o Espacio */
+    disableEnterClick?: boolean;
+    /** Activa el efecto hover (default: true) */
+    hoverEffect?: boolean;
 }
-declare function Button({ color, title, size, className, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ color, title, size, className, icon, colorBgIcon, disableEnterClick, hoverEffect, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
 interface FooterProps extends HTMLAttributes<HTMLDivElement> {
     showBrowserInfo?: boolean;

package/dist/components.js

@@ -30,23 +30,47 @@ function Button({
   title,
   size = "normal",
   className = "",
+  icon,
+  colorBgIcon,
+  disableEnterClick,
+  hoverEffect = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     "button",
     {
       className: [
-        "inline-flex items-center justify-center",
+        "inline-flex items-center",
+        icon ? "" : "justify-center",
         "min-w-[200px] border-none",
         "text-white font-semibold cursor-pointer",
         "transition-all duration-300 ease-in-out",
-        "disabled:cursor-default disabled:!bg-onpe-gray",
+        "disabled:cursor-default disabled:bg-onpe-gray!",
+        hoverEffect ? "hover:opacity-50 disabled:hover:opacity-100" : "",
         colorClasses[color],
         sizeClasses[size],
         className
       ].filter(Boolean).join(" "),
+      onKeyDown: disableEnterClick ? handleKeyDown : void 0,
       ...props,
-      children: title
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: [
+              "w-12 h-12 flex justify-center items-center shrink-0",
+              props.disabled ? "bg-onpe-gray" : colorClasses[colorBgIcon ?? color]
+            ].join(" "),
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 text-center", children: title })
+      ]
     }
   );
 }