@onpe/ui 1.2.34 → 1.2.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/components/Feedback/ModalConfirm/ModalConfirm.d.ts +2 -1
  2. package/dist/components.d.ts +2 -1
  3. package/dist/components.esm.js +4 -4
  4. package/dist/components.js +4 -4
  5. package/dist/index.d.ts +2 -1
  6. package/dist/index.esm.js +4 -4
  7. package/dist/index.js +4 -4
  8. package/package.json +1 -1
package/dist/components/Feedback/ModalConfirm/ModalConfirm.d.ts CHANGED
@@ -5,6 +5,7 @@ export interface ModalConfirmProps {
5
5
  title: string;
6
6
  message: string;
7
7
  icon?: "warning" | "success";
8
+ color?: "blue" | "red";
8
9
  onConfirm?: () => void;
9
10
  onCancel?: () => void;
10
11
  textButtonConfirm?: string;
@@ -12,6 +13,6 @@ export interface ModalConfirmProps {
12
13
  twoButtons?: boolean;
13
14
  className?: string;
14
15
  }
15
- export declare const ModalConfirm: ({ isOpen, onClose, title, message, icon, onConfirm, onCancel, textButtonConfirm, textButtonCancel, twoButtons, className, }: ModalConfirmProps) => import("react/jsx-runtime").JSX.Element;
16
+ export declare const ModalConfirm: ({ isOpen, onClose, title, message, icon, color, onConfirm, onCancel, textButtonConfirm, textButtonCancel, twoButtons, className, }: ModalConfirmProps) => import("react/jsx-runtime").JSX.Element;
16
17
  export default ModalConfirm;
17
18
  //# sourceMappingURL=ModalConfirm.d.ts.map
package/dist/components.d.ts CHANGED
@@ -54,6 +54,7 @@ interface ModalConfirmProps {
54
54
  title: string;
55
55
  message: string;
56
56
  icon?: "warning" | "success";
57
+ color?: "blue" | "red";
57
58
  onConfirm?: () => void;
58
59
  onCancel?: () => void;
59
60
  textButtonConfirm?: string;
@@ -61,7 +62,7 @@ interface ModalConfirmProps {
61
62
  twoButtons?: boolean;
62
63
  className?: string;
63
64
  }
64
- declare const ModalConfirm: ({ isOpen, onClose, title, message, icon, onConfirm, onCancel, textButtonConfirm, textButtonCancel, twoButtons, className, }: ModalConfirmProps) => react_jsx_runtime.JSX.Element;
65
+ declare const ModalConfirm: ({ isOpen, onClose, title, message, icon, color, onConfirm, onCancel, textButtonConfirm, textButtonCancel, twoButtons, className, }: ModalConfirmProps) => react_jsx_runtime.JSX.Element;
65
66
 
66
67
  interface ModalLoadingProps {
67
68
  isOpen: boolean;
package/dist/components.esm.js CHANGED
@@ -159,7 +159,7 @@ var Overlay = function (_a) {
159
159
 
160
160
  var IconClose = function (props) { return (jsx("svg", __assign({ width: 16, height: 16, viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M6.82839 1.17139L1.17139 6.82839M1.17139 1.17139L6.82839 6.82839", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
161
161
 
162
- var css_248z$6 = "/* Modal Component Styles */\n.onpe-modal-container {\n position: fixed;\n top: 0;\n width: 100%;\n height: 100vh;\n display: grid;\n place-items: center;\n}\n\n/* Prevenir scroll del body cuando el modal está abierto */\nbody.onpe-modal-open {\n overflow: hidden;\n}\n\n.onpe-modal-container.onpe-modal-open {\n opacity: 1;\n z-index: 50;\n}\n\n.onpe-modal-container.onpe-modal-open.onpe-modal-top-absolute {\n z-index: 100;\n}\n\n.onpe-modal-container.onpe-modal-closed {\n opacity: 0;\n z-index: -10;\n}\n\n.onpe-modal-content-wrapper {\n position: relative;\n z-index: 20;\n display: grid;\n place-items: center;\n}\n\n.onpe-modal-content {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.onpe-modal-content.onpe-modal-with-background {\n background-color: white;\n padding: 2.5rem 0.25rem; /* py-10 px-1 */\n min-width: 320px;\n width: 98vw;\n max-width: 95vw;\n max-height: 90vh;\n overflow-y: auto;\n scroll-behavior: smooth; /* Scroll suave */\n scrollbar-width: thin; /* Scrollbar más delgado */\n scrollbar-color: #cbd5e0 #f7fafc; /* Colores del scrollbar */\n transition: scroll-behavior 0.1s ease-in-out; /* Transición suave para el reset */\n}\n\n/* Estilos para el scrollbar en WebKit (Chrome, Safari, Edge) */\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar {\n width: 8px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-track {\n background: #f7fafc;\n border-radius: 4px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb {\n background: #cbd5e0;\n border-radius: 4px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb:hover {\n background: #a0aec0;\n}\n\n.onpe-modal-content.onpe-modal-without-background {\n /* Sin fondo - solo contenido */\n}\n\n.onpe-modal-close-button {\n position: absolute;\n top: 1rem; /* top-4 */\n right: 1rem; /* right-4 */\n border-radius: 50%;\n background-color: var(--onpe-ui-red);\n padding: 7px;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 30;\n border: none;\n cursor: pointer;\n}\n\n.onpe-modal-close-button:hover {\n background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red con hover */\n}\n\n.onpe-modal-close-icon {\n height: 10px;\n width: 10px;\n color: white;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n .onpe-modal-content.onpe-modal-with-background {\n padding: 2.5rem 0; /* md:px-auto */\n width: 500px; /* md:w-[500px] */\n }\n}\n\n@media (min-width: 1024px) {\n .onpe-modal-content.onpe-modal-with-background {\n padding: 4rem 1.25rem; /* lg:py-16 lg:px-5 */\n width: 1024px; /* lg:w-[1024px] */\n }\n}\n";
162
+ var css_248z$6 = "/* Modal Component Styles */\r\n.onpe-modal-container {\r\n position: fixed;\r\n top: 0;\r\n width: 100%;\r\n height: 100vh;\r\n display: grid;\r\n place-items: center;\r\n}\r\n\r\n/* Prevenir scroll del body cuando el modal está abierto */\r\nbody.onpe-modal-open {\r\n overflow: hidden;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-open {\r\n opacity: 1;\r\n z-index: 50;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-open.onpe-modal-top-absolute {\r\n z-index: 100;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-closed {\r\n opacity: 0;\r\n z-index: -10;\r\n}\r\n\r\n.onpe-modal-content-wrapper {\r\n position: relative;\r\n z-index: 20;\r\n display: grid;\r\n place-items: center;\r\n}\r\n\r\n.onpe-modal-content {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background {\r\n background-color: white;\r\n padding: 2.5rem 0.25rem; /* py-10 px-1 */\r\n min-width: 320px;\r\n width: 98vw;\r\n max-width: 95vw;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n scroll-behavior: smooth; /* Scroll suave */\r\n scrollbar-width: thin; /* Scrollbar más delgado */\r\n scrollbar-color: #cbd5e0 #f7fafc; /* Colores del scrollbar */\r\n transition: scroll-behavior 0.1s ease-in-out; /* Transición suave para el reset */\r\n}\r\n\r\n/* Estilos para el scrollbar en WebKit (Chrome, Safari, Edge) */\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar {\r\n width: 8px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-track {\r\n background: #f7fafc;\r\n border-radius: 4px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb {\r\n background: #cbd5e0;\r\n border-radius: 4px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb:hover {\r\n background: #a0aec0;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-without-background {\r\n /* Sin fondo - solo contenido */\r\n}\r\n\r\n.onpe-modal-close-button {\r\n position: absolute;\r\n top: 1rem; /* top-4 */\r\n right: 1rem; /* right-4 */\r\n border-radius: 50%;\r\n background-color: var(--onpe-ui-red);\r\n padding: 7px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 30;\r\n border: none;\r\n cursor: pointer;\r\n}\r\n\r\n.onpe-modal-close-button:hover {\r\n background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red con hover */\r\n}\r\n\r\n.onpe-modal-close-icon {\r\n height: 10px;\r\n width: 10px;\r\n color: white;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n .onpe-modal-content.onpe-modal-with-background {\r\n padding: 2.5rem 0; /* md:px-auto */\r\n width: 500px; /* md:w-[500px] */\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .onpe-modal-content.onpe-modal-with-background {\r\n padding: 4rem 1.25rem; /* lg:py-16 lg:px-5 */\r\n width: 1024px; /* lg:w-[1024px] */\r\n }\r\n}\r\n";
163
163
  styleInject(css_248z$6);
164
164
 
165
165
  var Modal = function (_a) {
@@ -249,11 +249,11 @@ var ModalBrowserIncompatible = function (_a) {
249
249
 
250
250
  var IconCheck = function (props) { return (jsx("svg", __assign({ width: 64, height: 64, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "mt-10 lg:mt-16" }, props, { children: jsx("path", { d: "M28.2673 44.2663L47.0673 25.4663L43.334 21.733L28.2673 36.7997L20.6673 29.1997L16.934 32.933L28.2673 44.2663ZM32.0007 58.6663C28.3118 58.6663 24.8451 57.9659 21.6007 56.565C18.3562 55.1641 15.534 53.2646 13.134 50.8663C10.734 48.4663 8.83443 45.6441 7.43532 42.3997C6.03621 39.1552 5.33576 35.6886 5.33398 31.9997C5.33398 28.3108 6.03443 24.8441 7.43532 21.5997C8.83621 18.3552 10.7358 15.533 13.134 13.133C15.534 10.733 18.3562 8.83345 21.6007 7.43434C24.8451 6.03523 28.3118 5.33479 32.0007 5.33301C35.6895 5.33301 39.1562 6.03345 42.4007 7.43434C45.6451 8.83523 48.4673 10.7348 50.8673 13.133C53.2673 15.533 55.1678 18.3552 56.5686 21.5997C57.9695 24.8441 58.6691 28.3108 58.6673 31.9997C58.6673 35.6886 57.9669 39.1552 56.566 42.3997C55.1651 45.6441 53.2655 48.4663 50.8673 50.8663C48.4673 53.2663 45.6451 55.1668 42.4007 56.5677C39.1562 57.9686 35.6895 58.6681 32.0007 58.6663ZM32.0007 53.333C37.9562 53.333 43.0006 51.2663 47.134 47.133C51.2673 42.9997 53.334 37.9552 53.334 31.9997C53.334 26.0441 51.2673 20.9997 47.134 16.8663C43.0006 12.733 37.9562 10.6663 32.0007 10.6663C26.0451 10.6663 21.0007 12.733 16.8673 16.8663C12.734 20.9997 10.6673 26.0441 10.6673 31.9997C10.6673 37.9552 12.734 42.9997 16.8673 47.133C21.0007 51.2663 26.0451 53.333 32.0007 53.333Z", fill: "currentColor" }) }))); };
251
251
 
252
- var css_248z$4 = "/* ModalConfirm Component Styles */\n.onpe-modal-confirm-container {\n max-width: 680px !important;\n width: 680px !important;\n padding-top: 1.25rem !important; /* pt-5 */\n padding-bottom: 2rem !important; /* pb-8 */\n}\n\n.onpe-modal-confirm-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.onpe-modal-confirm-icon {\n width: 4rem; /* w-16 */\n height: 4rem; /* h-16 */\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-title {\n margin-top: 0.75rem; /* mt-3 */\n font-size: 1.125rem; /* text-lg */\n font-weight: 500; /* font-medium */\n text-align: center;\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-message {\n margin-top: 1.75rem; /* mt-7 */\n font-size: 0.875rem; /* text-sm */\n text-align: center;\n max-width: 100%;\n}\n\n.onpe-modal-confirm-buttons-container {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 1.25rem; /* gap-5 */\n margin-top: 2.75rem; /* mt-11 */\n}\n\n.onpe-modal-confirm-button {\n width: 100%;\n max-width: 200px;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n}\n\n@media (min-width: 1024px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n \n .onpe-modal-confirm-title {\n margin-top: 1rem; /* lg:mt-4 */\n font-size: 1.5rem; /* lg:text-2xl */\n }\n \n .onpe-modal-confirm-message {\n font-size: 1.125rem; /* lg:text-lg */\n max-width: 576px; /* lg:max-w-[576px] */\n }\n \n .onpe-modal-confirm-buttons-container {\n flex-direction: row; /* lg:flex-row */\n margin-top: 5rem; /* lg:mt-20 */\n }\n \n .onpe-modal-confirm-button {\n width: 200px; /* lg:w-[200px] */\n }\n}\n";
252
+ var css_248z$4 = "/* ModalConfirm Component Styles */\n.onpe-modal-confirm-container {\n max-width: 680px !important;\n width: 680px !important;\n padding-top: 1.25rem !important; /* pt-5 */\n padding-bottom: 2rem !important; /* pb-8 */\n}\n\n.onpe-modal-confirm-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.onpe-modal-confirm-icon {\n width: 4rem; /* w-16 */\n height: 4rem; /* h-16 */\n color: var(--onpe-ui-skyblue); /* Color por defecto: azul */\n}\n\n/* Colores dinámicos para el icono */\n.onpe-modal-confirm-icon-blue {\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-icon-red {\n color: var(--onpe-ui-red);\n}\n\n.onpe-modal-confirm-title {\n margin-top: 0.75rem; /* mt-3 */\n font-size: 1.125rem; /* text-lg */\n font-weight: 600; /* font-semibold */\n text-align: center;\n color: var(--onpe-ui-skyblue); /* Color por defecto: azul */\n}\n\n/* Colores dinámicos para el título */\n.onpe-modal-confirm-title-blue {\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-title-red {\n color: var(--onpe-ui-red);\n}\n\n.onpe-modal-confirm-message {\n margin-top: 1.75rem; /* mt-7 */\n font-size: 0.875rem; /* text-sm */\n text-align: center;\n max-width: 100%;\n color: var(--onpe-ui-dark-gray); /* Usar variable CSS de ONPE, fallback a #333333 */\n}\n\n.onpe-modal-confirm-buttons-container {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 1.25rem; /* gap-5 */\n margin-top: 2.75rem; /* mt-11 */\n}\n\n.onpe-modal-confirm-button {\n width: 100%;\n max-width: 200px;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n}\n\n@media (min-width: 1024px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n \n .onpe-modal-confirm-title {\n margin-top: 1rem; /* lg:mt-4 */\n font-size: 1.5rem; /* lg:text-2xl */\n }\n \n .onpe-modal-confirm-message {\n font-size: 1.125rem; /* lg:text-lg */\n max-width: 576px; /* lg:max-w-[576px] */\n }\n \n .onpe-modal-confirm-buttons-container {\n flex-direction: row; /* lg:flex-row */\n margin-top: 5rem; /* lg:mt-20 */\n }\n \n .onpe-modal-confirm-button {\n width: 200px; /* lg:w-[200px] */\n }\n}\n";
253
253
  styleInject(css_248z$4);
254
254
 
255
255
  var ModalConfirm = function (_a) {
256
- var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, title = _a.title, message = _a.message, _d = _a.icon, icon = _d === void 0 ? "warning" : _d, _e = _a.onConfirm, onConfirm = _e === void 0 ? function () { } : _e, _f = _a.onCancel, onCancel = _f === void 0 ? function () { } : _f, _g = _a.textButtonConfirm, textButtonConfirm = _g === void 0 ? "Confirmar" : _g, _h = _a.textButtonCancel, textButtonCancel = _h === void 0 ? "Cancelar" : _h, _j = _a.twoButtons, twoButtons = _j === void 0 ? true : _j, _k = _a.className, className = _k === void 0 ? "" : _k;
256
+ var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, title = _a.title, message = _a.message, _d = _a.icon, icon = _d === void 0 ? "warning" : _d, _e = _a.color, color = _e === void 0 ? "blue" : _e, _f = _a.onConfirm, onConfirm = _f === void 0 ? function () { } : _f, _g = _a.onCancel, onCancel = _g === void 0 ? function () { } : _g, _h = _a.textButtonConfirm, textButtonConfirm = _h === void 0 ? "Confirmar" : _h, _j = _a.textButtonCancel, textButtonCancel = _j === void 0 ? "Cancelar" : _j, _k = _a.twoButtons, twoButtons = _k === void 0 ? true : _k, _l = _a.className, className = _l === void 0 ? "" : _l;
257
257
  var handleConfirm = function () { return __awaiter(void 0, void 0, void 0, function () {
258
258
  return __generator(this, function (_a) {
259
259
  try {
@@ -271,7 +271,7 @@ var ModalConfirm = function (_a) {
271
271
  onCancel();
272
272
  onClose();
273
273
  };
274
- return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-confirm-container ".concat(className), closeButton: true, closeDisabled: true, topAbsolute: true, children: [jsxs("div", { className: "onpe-modal-confirm-icon-container", children: [icon === "warning" && jsx(IconWarning, { className: "onpe-modal-confirm-icon" }), icon === "success" && jsx(IconCheck, { className: "onpe-modal-confirm-icon" })] }), jsx("p", { className: "onpe-modal-confirm-title", children: title }), jsx("p", { className: "onpe-modal-confirm-message", children: message }), jsxs("div", { className: "onpe-modal-confirm-buttons-container", children: [twoButtons && jsx(Button, { className: "onpe-modal-confirm-button", color: "blue", title: textButtonCancel, onClick: handleCancel }), jsx(Button, { className: "onpe-modal-confirm-button", color: "red", title: textButtonConfirm, onClick: handleConfirm })] })] }));
274
+ return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-confirm-container ".concat(className), closeButton: true, closeDisabled: true, topAbsolute: true, children: [jsxs("div", { className: "onpe-modal-confirm-icon-container onpe-modal-confirm-icon-".concat(color), children: [icon === "warning" && jsx(IconWarning, { className: "onpe-modal-confirm-icon onpe-modal-confirm-icon-".concat(color) }), icon === "success" && jsx(IconCheck, { className: "onpe-modal-confirm-icon onpe-modal-confirm-icon-".concat(color) })] }), jsx("p", { className: "onpe-modal-confirm-title onpe-modal-confirm-title-".concat(color), children: title }), jsx("p", { className: "onpe-modal-confirm-message", children: message }), jsxs("div", { className: "onpe-modal-confirm-buttons-container", children: [twoButtons && jsx(Button, { className: "onpe-modal-confirm-button", color: "blue", title: textButtonCancel, onClick: handleCancel }), jsx(Button, { className: "onpe-modal-confirm-button", color: "red", title: textButtonConfirm, onClick: handleConfirm })] })] }));
275
275
  };
276
276
 
277
277
  var IconSpinnerDesktop = function (props) { return (jsx("svg", __assign({ width: 102, height: 102, viewBox: "0 0 102 102", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M50.9999 3.08313C23.9241 3.08208 3.08296 24.6456 3.08325 51C3.08354 75.4375 22.453 98.9167 50.9999 98.9167C77.5573 98.9167 98.9166 77.3542 98.9166 51", stroke: "currentColor", strokeWidth: 6, strokeLinecap: "round" }) }))); };
package/dist/components.js CHANGED
@@ -159,7 +159,7 @@ var Overlay = function (_a) {
159
159
 
160
160
  var IconClose = function (props) { return (jsx("svg", __assign({ width: 16, height: 16, viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M6.82839 1.17139L1.17139 6.82839M1.17139 1.17139L6.82839 6.82839", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
161
161
 
162
- var css_248z$6 = "/* Modal Component Styles */\n.onpe-modal-container {\n position: fixed;\n top: 0;\n width: 100%;\n height: 100vh;\n display: grid;\n place-items: center;\n}\n\n/* Prevenir scroll del body cuando el modal está abierto */\nbody.onpe-modal-open {\n overflow: hidden;\n}\n\n.onpe-modal-container.onpe-modal-open {\n opacity: 1;\n z-index: 50;\n}\n\n.onpe-modal-container.onpe-modal-open.onpe-modal-top-absolute {\n z-index: 100;\n}\n\n.onpe-modal-container.onpe-modal-closed {\n opacity: 0;\n z-index: -10;\n}\n\n.onpe-modal-content-wrapper {\n position: relative;\n z-index: 20;\n display: grid;\n place-items: center;\n}\n\n.onpe-modal-content {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.onpe-modal-content.onpe-modal-with-background {\n background-color: white;\n padding: 2.5rem 0.25rem; /* py-10 px-1 */\n min-width: 320px;\n width: 98vw;\n max-width: 95vw;\n max-height: 90vh;\n overflow-y: auto;\n scroll-behavior: smooth; /* Scroll suave */\n scrollbar-width: thin; /* Scrollbar más delgado */\n scrollbar-color: #cbd5e0 #f7fafc; /* Colores del scrollbar */\n transition: scroll-behavior 0.1s ease-in-out; /* Transición suave para el reset */\n}\n\n/* Estilos para el scrollbar en WebKit (Chrome, Safari, Edge) */\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar {\n width: 8px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-track {\n background: #f7fafc;\n border-radius: 4px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb {\n background: #cbd5e0;\n border-radius: 4px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb:hover {\n background: #a0aec0;\n}\n\n.onpe-modal-content.onpe-modal-without-background {\n /* Sin fondo - solo contenido */\n}\n\n.onpe-modal-close-button {\n position: absolute;\n top: 1rem; /* top-4 */\n right: 1rem; /* right-4 */\n border-radius: 50%;\n background-color: var(--onpe-ui-red);\n padding: 7px;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 30;\n border: none;\n cursor: pointer;\n}\n\n.onpe-modal-close-button:hover {\n background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red con hover */\n}\n\n.onpe-modal-close-icon {\n height: 10px;\n width: 10px;\n color: white;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n .onpe-modal-content.onpe-modal-with-background {\n padding: 2.5rem 0; /* md:px-auto */\n width: 500px; /* md:w-[500px] */\n }\n}\n\n@media (min-width: 1024px) {\n .onpe-modal-content.onpe-modal-with-background {\n padding: 4rem 1.25rem; /* lg:py-16 lg:px-5 */\n width: 1024px; /* lg:w-[1024px] */\n }\n}\n";
162
+ var css_248z$6 = "/* Modal Component Styles */\r\n.onpe-modal-container {\r\n position: fixed;\r\n top: 0;\r\n width: 100%;\r\n height: 100vh;\r\n display: grid;\r\n place-items: center;\r\n}\r\n\r\n/* Prevenir scroll del body cuando el modal está abierto */\r\nbody.onpe-modal-open {\r\n overflow: hidden;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-open {\r\n opacity: 1;\r\n z-index: 50;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-open.onpe-modal-top-absolute {\r\n z-index: 100;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-closed {\r\n opacity: 0;\r\n z-index: -10;\r\n}\r\n\r\n.onpe-modal-content-wrapper {\r\n position: relative;\r\n z-index: 20;\r\n display: grid;\r\n place-items: center;\r\n}\r\n\r\n.onpe-modal-content {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background {\r\n background-color: white;\r\n padding: 2.5rem 0.25rem; /* py-10 px-1 */\r\n min-width: 320px;\r\n width: 98vw;\r\n max-width: 95vw;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n scroll-behavior: smooth; /* Scroll suave */\r\n scrollbar-width: thin; /* Scrollbar más delgado */\r\n scrollbar-color: #cbd5e0 #f7fafc; /* Colores del scrollbar */\r\n transition: scroll-behavior 0.1s ease-in-out; /* Transición suave para el reset */\r\n}\r\n\r\n/* Estilos para el scrollbar en WebKit (Chrome, Safari, Edge) */\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar {\r\n width: 8px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-track {\r\n background: #f7fafc;\r\n border-radius: 4px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb {\r\n background: #cbd5e0;\r\n border-radius: 4px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb:hover {\r\n background: #a0aec0;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-without-background {\r\n /* Sin fondo - solo contenido */\r\n}\r\n\r\n.onpe-modal-close-button {\r\n position: absolute;\r\n top: 1rem; /* top-4 */\r\n right: 1rem; /* right-4 */\r\n border-radius: 50%;\r\n background-color: var(--onpe-ui-red);\r\n padding: 7px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 30;\r\n border: none;\r\n cursor: pointer;\r\n}\r\n\r\n.onpe-modal-close-button:hover {\r\n background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red con hover */\r\n}\r\n\r\n.onpe-modal-close-icon {\r\n height: 10px;\r\n width: 10px;\r\n color: white;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n .onpe-modal-content.onpe-modal-with-background {\r\n padding: 2.5rem 0; /* md:px-auto */\r\n width: 500px; /* md:w-[500px] */\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .onpe-modal-content.onpe-modal-with-background {\r\n padding: 4rem 1.25rem; /* lg:py-16 lg:px-5 */\r\n width: 1024px; /* lg:w-[1024px] */\r\n }\r\n}\r\n";
163
163
  styleInject(css_248z$6);
164
164
 
165
165
  var Modal = function (_a) {
@@ -249,11 +249,11 @@ var ModalBrowserIncompatible = function (_a) {
249
249
 
250
250
  var IconCheck = function (props) { return (jsx("svg", __assign({ width: 64, height: 64, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "mt-10 lg:mt-16" }, props, { children: jsx("path", { d: "M28.2673 44.2663L47.0673 25.4663L43.334 21.733L28.2673 36.7997L20.6673 29.1997L16.934 32.933L28.2673 44.2663ZM32.0007 58.6663C28.3118 58.6663 24.8451 57.9659 21.6007 56.565C18.3562 55.1641 15.534 53.2646 13.134 50.8663C10.734 48.4663 8.83443 45.6441 7.43532 42.3997C6.03621 39.1552 5.33576 35.6886 5.33398 31.9997C5.33398 28.3108 6.03443 24.8441 7.43532 21.5997C8.83621 18.3552 10.7358 15.533 13.134 13.133C15.534 10.733 18.3562 8.83345 21.6007 7.43434C24.8451 6.03523 28.3118 5.33479 32.0007 5.33301C35.6895 5.33301 39.1562 6.03345 42.4007 7.43434C45.6451 8.83523 48.4673 10.7348 50.8673 13.133C53.2673 15.533 55.1678 18.3552 56.5686 21.5997C57.9695 24.8441 58.6691 28.3108 58.6673 31.9997C58.6673 35.6886 57.9669 39.1552 56.566 42.3997C55.1651 45.6441 53.2655 48.4663 50.8673 50.8663C48.4673 53.2663 45.6451 55.1668 42.4007 56.5677C39.1562 57.9686 35.6895 58.6681 32.0007 58.6663ZM32.0007 53.333C37.9562 53.333 43.0006 51.2663 47.134 47.133C51.2673 42.9997 53.334 37.9552 53.334 31.9997C53.334 26.0441 51.2673 20.9997 47.134 16.8663C43.0006 12.733 37.9562 10.6663 32.0007 10.6663C26.0451 10.6663 21.0007 12.733 16.8673 16.8663C12.734 20.9997 10.6673 26.0441 10.6673 31.9997C10.6673 37.9552 12.734 42.9997 16.8673 47.133C21.0007 51.2663 26.0451 53.333 32.0007 53.333Z", fill: "currentColor" }) }))); };
251
251
 
252
- var css_248z$4 = "/* ModalConfirm Component Styles */\n.onpe-modal-confirm-container {\n max-width: 680px !important;\n width: 680px !important;\n padding-top: 1.25rem !important; /* pt-5 */\n padding-bottom: 2rem !important; /* pb-8 */\n}\n\n.onpe-modal-confirm-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.onpe-modal-confirm-icon {\n width: 4rem; /* w-16 */\n height: 4rem; /* h-16 */\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-title {\n margin-top: 0.75rem; /* mt-3 */\n font-size: 1.125rem; /* text-lg */\n font-weight: 500; /* font-medium */\n text-align: center;\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-message {\n margin-top: 1.75rem; /* mt-7 */\n font-size: 0.875rem; /* text-sm */\n text-align: center;\n max-width: 100%;\n}\n\n.onpe-modal-confirm-buttons-container {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 1.25rem; /* gap-5 */\n margin-top: 2.75rem; /* mt-11 */\n}\n\n.onpe-modal-confirm-button {\n width: 100%;\n max-width: 200px;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n}\n\n@media (min-width: 1024px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n \n .onpe-modal-confirm-title {\n margin-top: 1rem; /* lg:mt-4 */\n font-size: 1.5rem; /* lg:text-2xl */\n }\n \n .onpe-modal-confirm-message {\n font-size: 1.125rem; /* lg:text-lg */\n max-width: 576px; /* lg:max-w-[576px] */\n }\n \n .onpe-modal-confirm-buttons-container {\n flex-direction: row; /* lg:flex-row */\n margin-top: 5rem; /* lg:mt-20 */\n }\n \n .onpe-modal-confirm-button {\n width: 200px; /* lg:w-[200px] */\n }\n}\n";
252
+ var css_248z$4 = "/* ModalConfirm Component Styles */\n.onpe-modal-confirm-container {\n max-width: 680px !important;\n width: 680px !important;\n padding-top: 1.25rem !important; /* pt-5 */\n padding-bottom: 2rem !important; /* pb-8 */\n}\n\n.onpe-modal-confirm-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.onpe-modal-confirm-icon {\n width: 4rem; /* w-16 */\n height: 4rem; /* h-16 */\n color: var(--onpe-ui-skyblue); /* Color por defecto: azul */\n}\n\n/* Colores dinámicos para el icono */\n.onpe-modal-confirm-icon-blue {\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-icon-red {\n color: var(--onpe-ui-red);\n}\n\n.onpe-modal-confirm-title {\n margin-top: 0.75rem; /* mt-3 */\n font-size: 1.125rem; /* text-lg */\n font-weight: 600; /* font-semibold */\n text-align: center;\n color: var(--onpe-ui-skyblue); /* Color por defecto: azul */\n}\n\n/* Colores dinámicos para el título */\n.onpe-modal-confirm-title-blue {\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-title-red {\n color: var(--onpe-ui-red);\n}\n\n.onpe-modal-confirm-message {\n margin-top: 1.75rem; /* mt-7 */\n font-size: 0.875rem; /* text-sm */\n text-align: center;\n max-width: 100%;\n color: var(--onpe-ui-dark-gray); /* Usar variable CSS de ONPE, fallback a #333333 */\n}\n\n.onpe-modal-confirm-buttons-container {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 1.25rem; /* gap-5 */\n margin-top: 2.75rem; /* mt-11 */\n}\n\n.onpe-modal-confirm-button {\n width: 100%;\n max-width: 200px;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n}\n\n@media (min-width: 1024px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n \n .onpe-modal-confirm-title {\n margin-top: 1rem; /* lg:mt-4 */\n font-size: 1.5rem; /* lg:text-2xl */\n }\n \n .onpe-modal-confirm-message {\n font-size: 1.125rem; /* lg:text-lg */\n max-width: 576px; /* lg:max-w-[576px] */\n }\n \n .onpe-modal-confirm-buttons-container {\n flex-direction: row; /* lg:flex-row */\n margin-top: 5rem; /* lg:mt-20 */\n }\n \n .onpe-modal-confirm-button {\n width: 200px; /* lg:w-[200px] */\n }\n}\n";
253
253
  styleInject(css_248z$4);
254
254
 
255
255
  var ModalConfirm = function (_a) {
256
- var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, title = _a.title, message = _a.message, _d = _a.icon, icon = _d === void 0 ? "warning" : _d, _e = _a.onConfirm, onConfirm = _e === void 0 ? function () { } : _e, _f = _a.onCancel, onCancel = _f === void 0 ? function () { } : _f, _g = _a.textButtonConfirm, textButtonConfirm = _g === void 0 ? "Confirmar" : _g, _h = _a.textButtonCancel, textButtonCancel = _h === void 0 ? "Cancelar" : _h, _j = _a.twoButtons, twoButtons = _j === void 0 ? true : _j, _k = _a.className, className = _k === void 0 ? "" : _k;
256
+ var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, title = _a.title, message = _a.message, _d = _a.icon, icon = _d === void 0 ? "warning" : _d, _e = _a.color, color = _e === void 0 ? "blue" : _e, _f = _a.onConfirm, onConfirm = _f === void 0 ? function () { } : _f, _g = _a.onCancel, onCancel = _g === void 0 ? function () { } : _g, _h = _a.textButtonConfirm, textButtonConfirm = _h === void 0 ? "Confirmar" : _h, _j = _a.textButtonCancel, textButtonCancel = _j === void 0 ? "Cancelar" : _j, _k = _a.twoButtons, twoButtons = _k === void 0 ? true : _k, _l = _a.className, className = _l === void 0 ? "" : _l;
257
257
  var handleConfirm = function () { return __awaiter(void 0, void 0, void 0, function () {
258
258
  return __generator(this, function (_a) {
259
259
  try {
@@ -271,7 +271,7 @@ var ModalConfirm = function (_a) {
271
271
  onCancel();
272
272
  onClose();
273
273
  };
274
- return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-confirm-container ".concat(className), closeButton: true, closeDisabled: true, topAbsolute: true, children: [jsxs("div", { className: "onpe-modal-confirm-icon-container", children: [icon === "warning" && jsx(IconWarning, { className: "onpe-modal-confirm-icon" }), icon === "success" && jsx(IconCheck, { className: "onpe-modal-confirm-icon" })] }), jsx("p", { className: "onpe-modal-confirm-title", children: title }), jsx("p", { className: "onpe-modal-confirm-message", children: message }), jsxs("div", { className: "onpe-modal-confirm-buttons-container", children: [twoButtons && jsx(Button, { className: "onpe-modal-confirm-button", color: "blue", title: textButtonCancel, onClick: handleCancel }), jsx(Button, { className: "onpe-modal-confirm-button", color: "red", title: textButtonConfirm, onClick: handleConfirm })] })] }));
274
+ return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-confirm-container ".concat(className), closeButton: true, closeDisabled: true, topAbsolute: true, children: [jsxs("div", { className: "onpe-modal-confirm-icon-container onpe-modal-confirm-icon-".concat(color), children: [icon === "warning" && jsx(IconWarning, { className: "onpe-modal-confirm-icon onpe-modal-confirm-icon-".concat(color) }), icon === "success" && jsx(IconCheck, { className: "onpe-modal-confirm-icon onpe-modal-confirm-icon-".concat(color) })] }), jsx("p", { className: "onpe-modal-confirm-title onpe-modal-confirm-title-".concat(color), children: title }), jsx("p", { className: "onpe-modal-confirm-message", children: message }), jsxs("div", { className: "onpe-modal-confirm-buttons-container", children: [twoButtons && jsx(Button, { className: "onpe-modal-confirm-button", color: "blue", title: textButtonCancel, onClick: handleCancel }), jsx(Button, { className: "onpe-modal-confirm-button", color: "red", title: textButtonConfirm, onClick: handleConfirm })] })] }));
275
275
  };
276
276
 
277
277
  var IconSpinnerDesktop = function (props) { return (jsx("svg", __assign({ width: 102, height: 102, viewBox: "0 0 102 102", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M50.9999 3.08313C23.9241 3.08208 3.08296 24.6456 3.08325 51C3.08354 75.4375 22.453 98.9167 50.9999 98.9167C77.5573 98.9167 98.9166 77.3542 98.9166 51", stroke: "currentColor", strokeWidth: 6, strokeLinecap: "round" }) }))); };
package/dist/index.d.ts CHANGED
@@ -54,6 +54,7 @@ interface ModalConfirmProps {
54
54
  title: string;
55
55
  message: string;
56
56
  icon?: "warning" | "success";
57
+ color?: "blue" | "red";
57
58
  onConfirm?: () => void;
58
59
  onCancel?: () => void;
59
60
  textButtonConfirm?: string;
@@ -61,7 +62,7 @@ interface ModalConfirmProps {
61
62
  twoButtons?: boolean;
62
63
  className?: string;
63
64
  }
64
- declare const ModalConfirm: ({ isOpen, onClose, title, message, icon, onConfirm, onCancel, textButtonConfirm, textButtonCancel, twoButtons, className, }: ModalConfirmProps) => react_jsx_runtime.JSX.Element;
65
+ declare const ModalConfirm: ({ isOpen, onClose, title, message, icon, color, onConfirm, onCancel, textButtonConfirm, textButtonCancel, twoButtons, className, }: ModalConfirmProps) => react_jsx_runtime.JSX.Element;
65
66
 
66
67
  interface ModalLoadingProps {
67
68
  isOpen: boolean;
package/dist/index.esm.js CHANGED
@@ -159,7 +159,7 @@ var Overlay = function (_a) {
159
159
 
160
160
  var IconClose = function (props) { return (jsx("svg", __assign({ width: 16, height: 16, viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M6.82839 1.17139L1.17139 6.82839M1.17139 1.17139L6.82839 6.82839", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
161
161
 
162
- var css_248z$6 = "/* Modal Component Styles */\n.onpe-modal-container {\n position: fixed;\n top: 0;\n width: 100%;\n height: 100vh;\n display: grid;\n place-items: center;\n}\n\n/* Prevenir scroll del body cuando el modal está abierto */\nbody.onpe-modal-open {\n overflow: hidden;\n}\n\n.onpe-modal-container.onpe-modal-open {\n opacity: 1;\n z-index: 50;\n}\n\n.onpe-modal-container.onpe-modal-open.onpe-modal-top-absolute {\n z-index: 100;\n}\n\n.onpe-modal-container.onpe-modal-closed {\n opacity: 0;\n z-index: -10;\n}\n\n.onpe-modal-content-wrapper {\n position: relative;\n z-index: 20;\n display: grid;\n place-items: center;\n}\n\n.onpe-modal-content {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.onpe-modal-content.onpe-modal-with-background {\n background-color: white;\n padding: 2.5rem 0.25rem; /* py-10 px-1 */\n min-width: 320px;\n width: 98vw;\n max-width: 95vw;\n max-height: 90vh;\n overflow-y: auto;\n scroll-behavior: smooth; /* Scroll suave */\n scrollbar-width: thin; /* Scrollbar más delgado */\n scrollbar-color: #cbd5e0 #f7fafc; /* Colores del scrollbar */\n transition: scroll-behavior 0.1s ease-in-out; /* Transición suave para el reset */\n}\n\n/* Estilos para el scrollbar en WebKit (Chrome, Safari, Edge) */\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar {\n width: 8px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-track {\n background: #f7fafc;\n border-radius: 4px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb {\n background: #cbd5e0;\n border-radius: 4px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb:hover {\n background: #a0aec0;\n}\n\n.onpe-modal-content.onpe-modal-without-background {\n /* Sin fondo - solo contenido */\n}\n\n.onpe-modal-close-button {\n position: absolute;\n top: 1rem; /* top-4 */\n right: 1rem; /* right-4 */\n border-radius: 50%;\n background-color: var(--onpe-ui-red);\n padding: 7px;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 30;\n border: none;\n cursor: pointer;\n}\n\n.onpe-modal-close-button:hover {\n background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red con hover */\n}\n\n.onpe-modal-close-icon {\n height: 10px;\n width: 10px;\n color: white;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n .onpe-modal-content.onpe-modal-with-background {\n padding: 2.5rem 0; /* md:px-auto */\n width: 500px; /* md:w-[500px] */\n }\n}\n\n@media (min-width: 1024px) {\n .onpe-modal-content.onpe-modal-with-background {\n padding: 4rem 1.25rem; /* lg:py-16 lg:px-5 */\n width: 1024px; /* lg:w-[1024px] */\n }\n}\n";
162
+ var css_248z$6 = "/* Modal Component Styles */\r\n.onpe-modal-container {\r\n position: fixed;\r\n top: 0;\r\n width: 100%;\r\n height: 100vh;\r\n display: grid;\r\n place-items: center;\r\n}\r\n\r\n/* Prevenir scroll del body cuando el modal está abierto */\r\nbody.onpe-modal-open {\r\n overflow: hidden;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-open {\r\n opacity: 1;\r\n z-index: 50;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-open.onpe-modal-top-absolute {\r\n z-index: 100;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-closed {\r\n opacity: 0;\r\n z-index: -10;\r\n}\r\n\r\n.onpe-modal-content-wrapper {\r\n position: relative;\r\n z-index: 20;\r\n display: grid;\r\n place-items: center;\r\n}\r\n\r\n.onpe-modal-content {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background {\r\n background-color: white;\r\n padding: 2.5rem 0.25rem; /* py-10 px-1 */\r\n min-width: 320px;\r\n width: 98vw;\r\n max-width: 95vw;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n scroll-behavior: smooth; /* Scroll suave */\r\n scrollbar-width: thin; /* Scrollbar más delgado */\r\n scrollbar-color: #cbd5e0 #f7fafc; /* Colores del scrollbar */\r\n transition: scroll-behavior 0.1s ease-in-out; /* Transición suave para el reset */\r\n}\r\n\r\n/* Estilos para el scrollbar en WebKit (Chrome, Safari, Edge) */\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar {\r\n width: 8px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-track {\r\n background: #f7fafc;\r\n border-radius: 4px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb {\r\n background: #cbd5e0;\r\n border-radius: 4px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb:hover {\r\n background: #a0aec0;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-without-background {\r\n /* Sin fondo - solo contenido */\r\n}\r\n\r\n.onpe-modal-close-button {\r\n position: absolute;\r\n top: 1rem; /* top-4 */\r\n right: 1rem; /* right-4 */\r\n border-radius: 50%;\r\n background-color: var(--onpe-ui-red);\r\n padding: 7px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 30;\r\n border: none;\r\n cursor: pointer;\r\n}\r\n\r\n.onpe-modal-close-button:hover {\r\n background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red con hover */\r\n}\r\n\r\n.onpe-modal-close-icon {\r\n height: 10px;\r\n width: 10px;\r\n color: white;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n .onpe-modal-content.onpe-modal-with-background {\r\n padding: 2.5rem 0; /* md:px-auto */\r\n width: 500px; /* md:w-[500px] */\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .onpe-modal-content.onpe-modal-with-background {\r\n padding: 4rem 1.25rem; /* lg:py-16 lg:px-5 */\r\n width: 1024px; /* lg:w-[1024px] */\r\n }\r\n}\r\n";
163
163
  styleInject(css_248z$6);
164
164
 
165
165
  var Modal = function (_a) {
@@ -249,11 +249,11 @@ var ModalBrowserIncompatible = function (_a) {
249
249
 
250
250
  var IconCheck = function (props) { return (jsx("svg", __assign({ width: 64, height: 64, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "mt-10 lg:mt-16" }, props, { children: jsx("path", { d: "M28.2673 44.2663L47.0673 25.4663L43.334 21.733L28.2673 36.7997L20.6673 29.1997L16.934 32.933L28.2673 44.2663ZM32.0007 58.6663C28.3118 58.6663 24.8451 57.9659 21.6007 56.565C18.3562 55.1641 15.534 53.2646 13.134 50.8663C10.734 48.4663 8.83443 45.6441 7.43532 42.3997C6.03621 39.1552 5.33576 35.6886 5.33398 31.9997C5.33398 28.3108 6.03443 24.8441 7.43532 21.5997C8.83621 18.3552 10.7358 15.533 13.134 13.133C15.534 10.733 18.3562 8.83345 21.6007 7.43434C24.8451 6.03523 28.3118 5.33479 32.0007 5.33301C35.6895 5.33301 39.1562 6.03345 42.4007 7.43434C45.6451 8.83523 48.4673 10.7348 50.8673 13.133C53.2673 15.533 55.1678 18.3552 56.5686 21.5997C57.9695 24.8441 58.6691 28.3108 58.6673 31.9997C58.6673 35.6886 57.9669 39.1552 56.566 42.3997C55.1651 45.6441 53.2655 48.4663 50.8673 50.8663C48.4673 53.2663 45.6451 55.1668 42.4007 56.5677C39.1562 57.9686 35.6895 58.6681 32.0007 58.6663ZM32.0007 53.333C37.9562 53.333 43.0006 51.2663 47.134 47.133C51.2673 42.9997 53.334 37.9552 53.334 31.9997C53.334 26.0441 51.2673 20.9997 47.134 16.8663C43.0006 12.733 37.9562 10.6663 32.0007 10.6663C26.0451 10.6663 21.0007 12.733 16.8673 16.8663C12.734 20.9997 10.6673 26.0441 10.6673 31.9997C10.6673 37.9552 12.734 42.9997 16.8673 47.133C21.0007 51.2663 26.0451 53.333 32.0007 53.333Z", fill: "currentColor" }) }))); };
251
251
 
252
- var css_248z$4 = "/* ModalConfirm Component Styles */\n.onpe-modal-confirm-container {\n max-width: 680px !important;\n width: 680px !important;\n padding-top: 1.25rem !important; /* pt-5 */\n padding-bottom: 2rem !important; /* pb-8 */\n}\n\n.onpe-modal-confirm-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.onpe-modal-confirm-icon {\n width: 4rem; /* w-16 */\n height: 4rem; /* h-16 */\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-title {\n margin-top: 0.75rem; /* mt-3 */\n font-size: 1.125rem; /* text-lg */\n font-weight: 500; /* font-medium */\n text-align: center;\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-message {\n margin-top: 1.75rem; /* mt-7 */\n font-size: 0.875rem; /* text-sm */\n text-align: center;\n max-width: 100%;\n}\n\n.onpe-modal-confirm-buttons-container {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 1.25rem; /* gap-5 */\n margin-top: 2.75rem; /* mt-11 */\n}\n\n.onpe-modal-confirm-button {\n width: 100%;\n max-width: 200px;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n}\n\n@media (min-width: 1024px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n \n .onpe-modal-confirm-title {\n margin-top: 1rem; /* lg:mt-4 */\n font-size: 1.5rem; /* lg:text-2xl */\n }\n \n .onpe-modal-confirm-message {\n font-size: 1.125rem; /* lg:text-lg */\n max-width: 576px; /* lg:max-w-[576px] */\n }\n \n .onpe-modal-confirm-buttons-container {\n flex-direction: row; /* lg:flex-row */\n margin-top: 5rem; /* lg:mt-20 */\n }\n \n .onpe-modal-confirm-button {\n width: 200px; /* lg:w-[200px] */\n }\n}\n";
252
+ var css_248z$4 = "/* ModalConfirm Component Styles */\n.onpe-modal-confirm-container {\n max-width: 680px !important;\n width: 680px !important;\n padding-top: 1.25rem !important; /* pt-5 */\n padding-bottom: 2rem !important; /* pb-8 */\n}\n\n.onpe-modal-confirm-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.onpe-modal-confirm-icon {\n width: 4rem; /* w-16 */\n height: 4rem; /* h-16 */\n color: var(--onpe-ui-skyblue); /* Color por defecto: azul */\n}\n\n/* Colores dinámicos para el icono */\n.onpe-modal-confirm-icon-blue {\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-icon-red {\n color: var(--onpe-ui-red);\n}\n\n.onpe-modal-confirm-title {\n margin-top: 0.75rem; /* mt-3 */\n font-size: 1.125rem; /* text-lg */\n font-weight: 600; /* font-semibold */\n text-align: center;\n color: var(--onpe-ui-skyblue); /* Color por defecto: azul */\n}\n\n/* Colores dinámicos para el título */\n.onpe-modal-confirm-title-blue {\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-title-red {\n color: var(--onpe-ui-red);\n}\n\n.onpe-modal-confirm-message {\n margin-top: 1.75rem; /* mt-7 */\n font-size: 0.875rem; /* text-sm */\n text-align: center;\n max-width: 100%;\n color: var(--onpe-ui-dark-gray); /* Usar variable CSS de ONPE, fallback a #333333 */\n}\n\n.onpe-modal-confirm-buttons-container {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 1.25rem; /* gap-5 */\n margin-top: 2.75rem; /* mt-11 */\n}\n\n.onpe-modal-confirm-button {\n width: 100%;\n max-width: 200px;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n}\n\n@media (min-width: 1024px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n \n .onpe-modal-confirm-title {\n margin-top: 1rem; /* lg:mt-4 */\n font-size: 1.5rem; /* lg:text-2xl */\n }\n \n .onpe-modal-confirm-message {\n font-size: 1.125rem; /* lg:text-lg */\n max-width: 576px; /* lg:max-w-[576px] */\n }\n \n .onpe-modal-confirm-buttons-container {\n flex-direction: row; /* lg:flex-row */\n margin-top: 5rem; /* lg:mt-20 */\n }\n \n .onpe-modal-confirm-button {\n width: 200px; /* lg:w-[200px] */\n }\n}\n";
253
253
  styleInject(css_248z$4);
254
254
 
255
255
  var ModalConfirm = function (_a) {
256
- var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, title = _a.title, message = _a.message, _d = _a.icon, icon = _d === void 0 ? "warning" : _d, _e = _a.onConfirm, onConfirm = _e === void 0 ? function () { } : _e, _f = _a.onCancel, onCancel = _f === void 0 ? function () { } : _f, _g = _a.textButtonConfirm, textButtonConfirm = _g === void 0 ? "Confirmar" : _g, _h = _a.textButtonCancel, textButtonCancel = _h === void 0 ? "Cancelar" : _h, _j = _a.twoButtons, twoButtons = _j === void 0 ? true : _j, _k = _a.className, className = _k === void 0 ? "" : _k;
256
+ var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, title = _a.title, message = _a.message, _d = _a.icon, icon = _d === void 0 ? "warning" : _d, _e = _a.color, color = _e === void 0 ? "blue" : _e, _f = _a.onConfirm, onConfirm = _f === void 0 ? function () { } : _f, _g = _a.onCancel, onCancel = _g === void 0 ? function () { } : _g, _h = _a.textButtonConfirm, textButtonConfirm = _h === void 0 ? "Confirmar" : _h, _j = _a.textButtonCancel, textButtonCancel = _j === void 0 ? "Cancelar" : _j, _k = _a.twoButtons, twoButtons = _k === void 0 ? true : _k, _l = _a.className, className = _l === void 0 ? "" : _l;
257
257
  var handleConfirm = function () { return __awaiter(void 0, void 0, void 0, function () {
258
258
  return __generator(this, function (_a) {
259
259
  try {
@@ -271,7 +271,7 @@ var ModalConfirm = function (_a) {
271
271
  onCancel();
272
272
  onClose();
273
273
  };
274
- return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-confirm-container ".concat(className), closeButton: true, closeDisabled: true, topAbsolute: true, children: [jsxs("div", { className: "onpe-modal-confirm-icon-container", children: [icon === "warning" && jsx(IconWarning, { className: "onpe-modal-confirm-icon" }), icon === "success" && jsx(IconCheck, { className: "onpe-modal-confirm-icon" })] }), jsx("p", { className: "onpe-modal-confirm-title", children: title }), jsx("p", { className: "onpe-modal-confirm-message", children: message }), jsxs("div", { className: "onpe-modal-confirm-buttons-container", children: [twoButtons && jsx(Button, { className: "onpe-modal-confirm-button", color: "blue", title: textButtonCancel, onClick: handleCancel }), jsx(Button, { className: "onpe-modal-confirm-button", color: "red", title: textButtonConfirm, onClick: handleConfirm })] })] }));
274
+ return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-confirm-container ".concat(className), closeButton: true, closeDisabled: true, topAbsolute: true, children: [jsxs("div", { className: "onpe-modal-confirm-icon-container onpe-modal-confirm-icon-".concat(color), children: [icon === "warning" && jsx(IconWarning, { className: "onpe-modal-confirm-icon onpe-modal-confirm-icon-".concat(color) }), icon === "success" && jsx(IconCheck, { className: "onpe-modal-confirm-icon onpe-modal-confirm-icon-".concat(color) })] }), jsx("p", { className: "onpe-modal-confirm-title onpe-modal-confirm-title-".concat(color), children: title }), jsx("p", { className: "onpe-modal-confirm-message", children: message }), jsxs("div", { className: "onpe-modal-confirm-buttons-container", children: [twoButtons && jsx(Button, { className: "onpe-modal-confirm-button", color: "blue", title: textButtonCancel, onClick: handleCancel }), jsx(Button, { className: "onpe-modal-confirm-button", color: "red", title: textButtonConfirm, onClick: handleConfirm })] })] }));
275
275
  };
276
276
 
277
277
  var IconSpinnerDesktop = function (props) { return (jsx("svg", __assign({ width: 102, height: 102, viewBox: "0 0 102 102", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M50.9999 3.08313C23.9241 3.08208 3.08296 24.6456 3.08325 51C3.08354 75.4375 22.453 98.9167 50.9999 98.9167C77.5573 98.9167 98.9166 77.3542 98.9166 51", stroke: "currentColor", strokeWidth: 6, strokeLinecap: "round" }) }))); };
package/dist/index.js CHANGED
@@ -159,7 +159,7 @@ var Overlay = function (_a) {
159
159
 
160
160
  var IconClose = function (props) { return (jsx("svg", __assign({ width: 16, height: 16, viewBox: "0 0 8 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M6.82839 1.17139L1.17139 6.82839M1.17139 1.17139L6.82839 6.82839", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }))); };
161
161
 
162
- var css_248z$6 = "/* Modal Component Styles */\n.onpe-modal-container {\n position: fixed;\n top: 0;\n width: 100%;\n height: 100vh;\n display: grid;\n place-items: center;\n}\n\n/* Prevenir scroll del body cuando el modal está abierto */\nbody.onpe-modal-open {\n overflow: hidden;\n}\n\n.onpe-modal-container.onpe-modal-open {\n opacity: 1;\n z-index: 50;\n}\n\n.onpe-modal-container.onpe-modal-open.onpe-modal-top-absolute {\n z-index: 100;\n}\n\n.onpe-modal-container.onpe-modal-closed {\n opacity: 0;\n z-index: -10;\n}\n\n.onpe-modal-content-wrapper {\n position: relative;\n z-index: 20;\n display: grid;\n place-items: center;\n}\n\n.onpe-modal-content {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.onpe-modal-content.onpe-modal-with-background {\n background-color: white;\n padding: 2.5rem 0.25rem; /* py-10 px-1 */\n min-width: 320px;\n width: 98vw;\n max-width: 95vw;\n max-height: 90vh;\n overflow-y: auto;\n scroll-behavior: smooth; /* Scroll suave */\n scrollbar-width: thin; /* Scrollbar más delgado */\n scrollbar-color: #cbd5e0 #f7fafc; /* Colores del scrollbar */\n transition: scroll-behavior 0.1s ease-in-out; /* Transición suave para el reset */\n}\n\n/* Estilos para el scrollbar en WebKit (Chrome, Safari, Edge) */\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar {\n width: 8px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-track {\n background: #f7fafc;\n border-radius: 4px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb {\n background: #cbd5e0;\n border-radius: 4px;\n}\n\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb:hover {\n background: #a0aec0;\n}\n\n.onpe-modal-content.onpe-modal-without-background {\n /* Sin fondo - solo contenido */\n}\n\n.onpe-modal-close-button {\n position: absolute;\n top: 1rem; /* top-4 */\n right: 1rem; /* right-4 */\n border-radius: 50%;\n background-color: var(--onpe-ui-red);\n padding: 7px;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 30;\n border: none;\n cursor: pointer;\n}\n\n.onpe-modal-close-button:hover {\n background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red con hover */\n}\n\n.onpe-modal-close-icon {\n height: 10px;\n width: 10px;\n color: white;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n .onpe-modal-content.onpe-modal-with-background {\n padding: 2.5rem 0; /* md:px-auto */\n width: 500px; /* md:w-[500px] */\n }\n}\n\n@media (min-width: 1024px) {\n .onpe-modal-content.onpe-modal-with-background {\n padding: 4rem 1.25rem; /* lg:py-16 lg:px-5 */\n width: 1024px; /* lg:w-[1024px] */\n }\n}\n";
162
+ var css_248z$6 = "/* Modal Component Styles */\r\n.onpe-modal-container {\r\n position: fixed;\r\n top: 0;\r\n width: 100%;\r\n height: 100vh;\r\n display: grid;\r\n place-items: center;\r\n}\r\n\r\n/* Prevenir scroll del body cuando el modal está abierto */\r\nbody.onpe-modal-open {\r\n overflow: hidden;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-open {\r\n opacity: 1;\r\n z-index: 50;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-open.onpe-modal-top-absolute {\r\n z-index: 100;\r\n}\r\n\r\n.onpe-modal-container.onpe-modal-closed {\r\n opacity: 0;\r\n z-index: -10;\r\n}\r\n\r\n.onpe-modal-content-wrapper {\r\n position: relative;\r\n z-index: 20;\r\n display: grid;\r\n place-items: center;\r\n}\r\n\r\n.onpe-modal-content {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background {\r\n background-color: white;\r\n padding: 2.5rem 0.25rem; /* py-10 px-1 */\r\n min-width: 320px;\r\n width: 98vw;\r\n max-width: 95vw;\r\n max-height: 90vh;\r\n overflow-y: auto;\r\n scroll-behavior: smooth; /* Scroll suave */\r\n scrollbar-width: thin; /* Scrollbar más delgado */\r\n scrollbar-color: #cbd5e0 #f7fafc; /* Colores del scrollbar */\r\n transition: scroll-behavior 0.1s ease-in-out; /* Transición suave para el reset */\r\n}\r\n\r\n/* Estilos para el scrollbar en WebKit (Chrome, Safari, Edge) */\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar {\r\n width: 8px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-track {\r\n background: #f7fafc;\r\n border-radius: 4px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb {\r\n background: #cbd5e0;\r\n border-radius: 4px;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-with-background::-webkit-scrollbar-thumb:hover {\r\n background: #a0aec0;\r\n}\r\n\r\n.onpe-modal-content.onpe-modal-without-background {\r\n /* Sin fondo - solo contenido */\r\n}\r\n\r\n.onpe-modal-close-button {\r\n position: absolute;\r\n top: 1rem; /* top-4 */\r\n right: 1rem; /* right-4 */\r\n border-radius: 50%;\r\n background-color: var(--onpe-ui-red);\r\n padding: 7px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 30;\r\n border: none;\r\n cursor: pointer;\r\n}\r\n\r\n.onpe-modal-close-button:hover {\r\n background-color: rgba(227, 0, 43, 0.8); /* onpe-ui-red con hover */\r\n}\r\n\r\n.onpe-modal-close-icon {\r\n height: 10px;\r\n width: 10px;\r\n color: white;\r\n}\r\n\r\n/* Responsive Design */\r\n@media (min-width: 768px) {\r\n .onpe-modal-content.onpe-modal-with-background {\r\n padding: 2.5rem 0; /* md:px-auto */\r\n width: 500px; /* md:w-[500px] */\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n .onpe-modal-content.onpe-modal-with-background {\r\n padding: 4rem 1.25rem; /* lg:py-16 lg:px-5 */\r\n width: 1024px; /* lg:w-[1024px] */\r\n }\r\n}\r\n";
163
163
  styleInject(css_248z$6);
164
164
 
165
165
  var Modal = function (_a) {
@@ -249,11 +249,11 @@ var ModalBrowserIncompatible = function (_a) {
249
249
 
250
250
  var IconCheck = function (props) { return (jsx("svg", __assign({ width: 64, height: 64, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "mt-10 lg:mt-16" }, props, { children: jsx("path", { d: "M28.2673 44.2663L47.0673 25.4663L43.334 21.733L28.2673 36.7997L20.6673 29.1997L16.934 32.933L28.2673 44.2663ZM32.0007 58.6663C28.3118 58.6663 24.8451 57.9659 21.6007 56.565C18.3562 55.1641 15.534 53.2646 13.134 50.8663C10.734 48.4663 8.83443 45.6441 7.43532 42.3997C6.03621 39.1552 5.33576 35.6886 5.33398 31.9997C5.33398 28.3108 6.03443 24.8441 7.43532 21.5997C8.83621 18.3552 10.7358 15.533 13.134 13.133C15.534 10.733 18.3562 8.83345 21.6007 7.43434C24.8451 6.03523 28.3118 5.33479 32.0007 5.33301C35.6895 5.33301 39.1562 6.03345 42.4007 7.43434C45.6451 8.83523 48.4673 10.7348 50.8673 13.133C53.2673 15.533 55.1678 18.3552 56.5686 21.5997C57.9695 24.8441 58.6691 28.3108 58.6673 31.9997C58.6673 35.6886 57.9669 39.1552 56.566 42.3997C55.1651 45.6441 53.2655 48.4663 50.8673 50.8663C48.4673 53.2663 45.6451 55.1668 42.4007 56.5677C39.1562 57.9686 35.6895 58.6681 32.0007 58.6663ZM32.0007 53.333C37.9562 53.333 43.0006 51.2663 47.134 47.133C51.2673 42.9997 53.334 37.9552 53.334 31.9997C53.334 26.0441 51.2673 20.9997 47.134 16.8663C43.0006 12.733 37.9562 10.6663 32.0007 10.6663C26.0451 10.6663 21.0007 12.733 16.8673 16.8663C12.734 20.9997 10.6673 26.0441 10.6673 31.9997C10.6673 37.9552 12.734 42.9997 16.8673 47.133C21.0007 51.2663 26.0451 53.333 32.0007 53.333Z", fill: "currentColor" }) }))); };
251
251
 
252
- var css_248z$4 = "/* ModalConfirm Component Styles */\n.onpe-modal-confirm-container {\n max-width: 680px !important;\n width: 680px !important;\n padding-top: 1.25rem !important; /* pt-5 */\n padding-bottom: 2rem !important; /* pb-8 */\n}\n\n.onpe-modal-confirm-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.onpe-modal-confirm-icon {\n width: 4rem; /* w-16 */\n height: 4rem; /* h-16 */\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-title {\n margin-top: 0.75rem; /* mt-3 */\n font-size: 1.125rem; /* text-lg */\n font-weight: 500; /* font-medium */\n text-align: center;\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-message {\n margin-top: 1.75rem; /* mt-7 */\n font-size: 0.875rem; /* text-sm */\n text-align: center;\n max-width: 100%;\n}\n\n.onpe-modal-confirm-buttons-container {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 1.25rem; /* gap-5 */\n margin-top: 2.75rem; /* mt-11 */\n}\n\n.onpe-modal-confirm-button {\n width: 100%;\n max-width: 200px;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n}\n\n@media (min-width: 1024px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n \n .onpe-modal-confirm-title {\n margin-top: 1rem; /* lg:mt-4 */\n font-size: 1.5rem; /* lg:text-2xl */\n }\n \n .onpe-modal-confirm-message {\n font-size: 1.125rem; /* lg:text-lg */\n max-width: 576px; /* lg:max-w-[576px] */\n }\n \n .onpe-modal-confirm-buttons-container {\n flex-direction: row; /* lg:flex-row */\n margin-top: 5rem; /* lg:mt-20 */\n }\n \n .onpe-modal-confirm-button {\n width: 200px; /* lg:w-[200px] */\n }\n}\n";
252
+ var css_248z$4 = "/* ModalConfirm Component Styles */\n.onpe-modal-confirm-container {\n max-width: 680px !important;\n width: 680px !important;\n padding-top: 1.25rem !important; /* pt-5 */\n padding-bottom: 2rem !important; /* pb-8 */\n}\n\n.onpe-modal-confirm-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.onpe-modal-confirm-icon {\n width: 4rem; /* w-16 */\n height: 4rem; /* h-16 */\n color: var(--onpe-ui-skyblue); /* Color por defecto: azul */\n}\n\n/* Colores dinámicos para el icono */\n.onpe-modal-confirm-icon-blue {\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-icon-red {\n color: var(--onpe-ui-red);\n}\n\n.onpe-modal-confirm-title {\n margin-top: 0.75rem; /* mt-3 */\n font-size: 1.125rem; /* text-lg */\n font-weight: 600; /* font-semibold */\n text-align: center;\n color: var(--onpe-ui-skyblue); /* Color por defecto: azul */\n}\n\n/* Colores dinámicos para el título */\n.onpe-modal-confirm-title-blue {\n color: var(--onpe-ui-skyblue);\n}\n\n.onpe-modal-confirm-title-red {\n color: var(--onpe-ui-red);\n}\n\n.onpe-modal-confirm-message {\n margin-top: 1.75rem; /* mt-7 */\n font-size: 0.875rem; /* text-sm */\n text-align: center;\n max-width: 100%;\n color: var(--onpe-ui-dark-gray); /* Usar variable CSS de ONPE, fallback a #333333 */\n}\n\n.onpe-modal-confirm-buttons-container {\n display: flex;\n flex-direction: column-reverse;\n align-items: center;\n justify-content: center;\n width: 100%;\n gap: 1.25rem; /* gap-5 */\n margin-top: 2.75rem; /* mt-11 */\n}\n\n.onpe-modal-confirm-button {\n width: 100%;\n max-width: 200px;\n}\n\n/* Responsive Design */\n@media (min-width: 768px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n}\n\n@media (min-width: 1024px) {\n .onpe-modal-confirm-container {\n width: 680px !important;\n max-width: 680px !important;\n }\n \n .onpe-modal-confirm-title {\n margin-top: 1rem; /* lg:mt-4 */\n font-size: 1.5rem; /* lg:text-2xl */\n }\n \n .onpe-modal-confirm-message {\n font-size: 1.125rem; /* lg:text-lg */\n max-width: 576px; /* lg:max-w-[576px] */\n }\n \n .onpe-modal-confirm-buttons-container {\n flex-direction: row; /* lg:flex-row */\n margin-top: 5rem; /* lg:mt-20 */\n }\n \n .onpe-modal-confirm-button {\n width: 200px; /* lg:w-[200px] */\n }\n}\n";
253
253
  styleInject(css_248z$4);
254
254
 
255
255
  var ModalConfirm = function (_a) {
256
- var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, title = _a.title, message = _a.message, _d = _a.icon, icon = _d === void 0 ? "warning" : _d, _e = _a.onConfirm, onConfirm = _e === void 0 ? function () { } : _e, _f = _a.onCancel, onCancel = _f === void 0 ? function () { } : _f, _g = _a.textButtonConfirm, textButtonConfirm = _g === void 0 ? "Confirmar" : _g, _h = _a.textButtonCancel, textButtonCancel = _h === void 0 ? "Cancelar" : _h, _j = _a.twoButtons, twoButtons = _j === void 0 ? true : _j, _k = _a.className, className = _k === void 0 ? "" : _k;
256
+ var _b = _a.isOpen, isOpen = _b === void 0 ? false : _b, _c = _a.onClose, onClose = _c === void 0 ? function () { } : _c, title = _a.title, message = _a.message, _d = _a.icon, icon = _d === void 0 ? "warning" : _d, _e = _a.color, color = _e === void 0 ? "blue" : _e, _f = _a.onConfirm, onConfirm = _f === void 0 ? function () { } : _f, _g = _a.onCancel, onCancel = _g === void 0 ? function () { } : _g, _h = _a.textButtonConfirm, textButtonConfirm = _h === void 0 ? "Confirmar" : _h, _j = _a.textButtonCancel, textButtonCancel = _j === void 0 ? "Cancelar" : _j, _k = _a.twoButtons, twoButtons = _k === void 0 ? true : _k, _l = _a.className, className = _l === void 0 ? "" : _l;
257
257
  var handleConfirm = function () { return __awaiter(void 0, void 0, void 0, function () {
258
258
  return __generator(this, function (_a) {
259
259
  try {
@@ -271,7 +271,7 @@ var ModalConfirm = function (_a) {
271
271
  onCancel();
272
272
  onClose();
273
273
  };
274
- return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-confirm-container ".concat(className), closeButton: true, closeDisabled: true, topAbsolute: true, children: [jsxs("div", { className: "onpe-modal-confirm-icon-container", children: [icon === "warning" && jsx(IconWarning, { className: "onpe-modal-confirm-icon" }), icon === "success" && jsx(IconCheck, { className: "onpe-modal-confirm-icon" })] }), jsx("p", { className: "onpe-modal-confirm-title", children: title }), jsx("p", { className: "onpe-modal-confirm-message", children: message }), jsxs("div", { className: "onpe-modal-confirm-buttons-container", children: [twoButtons && jsx(Button, { className: "onpe-modal-confirm-button", color: "blue", title: textButtonCancel, onClick: handleCancel }), jsx(Button, { className: "onpe-modal-confirm-button", color: "red", title: textButtonConfirm, onClick: handleConfirm })] })] }));
274
+ return (jsxs(Modal, { isOpen: isOpen, onClose: onClose, className: "onpe-modal-confirm-container ".concat(className), closeButton: true, closeDisabled: true, topAbsolute: true, children: [jsxs("div", { className: "onpe-modal-confirm-icon-container onpe-modal-confirm-icon-".concat(color), children: [icon === "warning" && jsx(IconWarning, { className: "onpe-modal-confirm-icon onpe-modal-confirm-icon-".concat(color) }), icon === "success" && jsx(IconCheck, { className: "onpe-modal-confirm-icon onpe-modal-confirm-icon-".concat(color) })] }), jsx("p", { className: "onpe-modal-confirm-title onpe-modal-confirm-title-".concat(color), children: title }), jsx("p", { className: "onpe-modal-confirm-message", children: message }), jsxs("div", { className: "onpe-modal-confirm-buttons-container", children: [twoButtons && jsx(Button, { className: "onpe-modal-confirm-button", color: "blue", title: textButtonCancel, onClick: handleCancel }), jsx(Button, { className: "onpe-modal-confirm-button", color: "red", title: textButtonConfirm, onClick: handleConfirm })] })] }));
275
275
  };
276
276
 
277
277
  var IconSpinnerDesktop = function (props) { return (jsx("svg", __assign({ width: 102, height: 102, viewBox: "0 0 102 102", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { children: jsx("path", { d: "M50.9999 3.08313C23.9241 3.08208 3.08296 24.6456 3.08325 51C3.08354 75.4375 22.453 98.9167 50.9999 98.9167C77.5573 98.9167 98.9166 77.3542 98.9166 51", stroke: "currentColor", strokeWidth: 6, strokeLinecap: "round" }) }))); };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onpe/ui",
3
- "version": "1.2.34",
3
+ "version": "1.2.35",
4
4
  "type": "module",
5
5
  "description": "Librería de componentes UI para ONPE - Componentes, Hooks, Utils y Librerías",
6
6
  "main": "dist/index.js",