@votodigital-onpeui/react 0.1.37 → 0.1.41
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.
- package/dist/{ModalConfirm-CZJCfya3.d.mts → ModalConfirm-aUXxpQ-H.d.mts} +1 -1
- package/dist/{ModalConfirm-CZJCfya3.d.ts → ModalConfirm-aUXxpQ-H.d.ts} +1 -1
- package/dist/{chunk-52VIQAQL.mjs → chunk-HG3JQEAN.mjs} +14 -6
- package/dist/chunk-HG3JQEAN.mjs.map +1 -0
- package/dist/components.d.mts +1 -1
- package/dist/components.d.ts +1 -1
- package/dist/components.js +12 -4
- package/dist/components.js.map +1 -1
- package/dist/components.mjs +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +12 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/modal.d.mts +8 -4
- package/dist/modal.d.ts +8 -4
- package/dist/modal.js +18 -8
- package/dist/modal.js.map +1 -1
- package/dist/modal.mjs +7 -5
- package/dist/modal.mjs.map +1 -1
- package/package.json +1 -1
- package/dist/chunk-52VIQAQL.mjs.map +0 -1
|
@@ -5,7 +5,7 @@ type ModalType = "warning" | "success" | "question" | "info" | "none";
|
|
|
5
5
|
interface ModalConfirmProps {
|
|
6
6
|
isOpen: boolean;
|
|
7
7
|
onClose: () => void;
|
|
8
|
-
title
|
|
8
|
+
title?: string;
|
|
9
9
|
/** Contenido del modal (string o JSX) */
|
|
10
10
|
message?: ReactNode;
|
|
11
11
|
/** Alias de message */
|
|
@@ -5,7 +5,7 @@ type ModalType = "warning" | "success" | "question" | "info" | "none";
|
|
|
5
5
|
interface ModalConfirmProps {
|
|
6
6
|
isOpen: boolean;
|
|
7
7
|
onClose: () => void;
|
|
8
|
-
title
|
|
8
|
+
title?: string;
|
|
9
9
|
/** Contenido del modal (string o JSX) */
|
|
10
10
|
message?: ReactNode;
|
|
11
11
|
/** Alias de message */
|
|
@@ -67,6 +67,12 @@ function renderIcon(type, colorClass) {
|
|
|
67
67
|
}
|
|
68
68
|
return /* @__PURE__ */ jsx(IconWarningNotRecommended, { role: "presentation", className: `w-16 h-16 ${colorClass}` });
|
|
69
69
|
}
|
|
70
|
+
var defaultTitleByType = {
|
|
71
|
+
success: "Confirmaci\xF3n",
|
|
72
|
+
warning: "Advertencia",
|
|
73
|
+
question: "Atenci\xF3n",
|
|
74
|
+
info: "Informaci\xF3n"
|
|
75
|
+
};
|
|
70
76
|
var ModalConfirm = ({
|
|
71
77
|
isOpen = false,
|
|
72
78
|
onClose = () => {
|
|
@@ -97,11 +103,13 @@ var ModalConfirm = ({
|
|
|
97
103
|
}) => {
|
|
98
104
|
const titleId = "modal-confirm-title";
|
|
99
105
|
const messageId = "modal-confirm-message";
|
|
106
|
+
const effectiveTitle = title ?? defaultTitleByType[type] ?? "";
|
|
100
107
|
const effectiveMessage = message ?? content;
|
|
101
108
|
const effectiveColorClass = color ? colorOverrideMap[color] ?? "text-onpe-skyblue" : "text-onpe-skyblue";
|
|
102
|
-
const
|
|
103
|
-
const
|
|
104
|
-
const
|
|
109
|
+
const effectiveButtonMode = buttonMode ?? (type === "question" ? "confirm" : "single");
|
|
110
|
+
const isConfirmMode = effectiveButtonMode === "confirm";
|
|
111
|
+
const showTwoButtons = effectiveButtonMode === "double" || isConfirmMode;
|
|
112
|
+
const confirmLabel = textButtonConfirm ?? (isConfirmMode ? "S\xED" : effectiveButtonMode === "double" ? "Confirmar" : "Aceptar");
|
|
105
113
|
const cancelLabel = textButtonCancel ?? (isConfirmMode ? "No" : "Cancelar");
|
|
106
114
|
const handleConfirm = async () => {
|
|
107
115
|
try {
|
|
@@ -141,7 +149,7 @@ var ModalConfirm = ({
|
|
|
141
149
|
"text-lg md:text-2xl font-semibold text-center mt-0 md:mt-4",
|
|
142
150
|
effectiveColorClass
|
|
143
151
|
].join(" "),
|
|
144
|
-
children:
|
|
152
|
+
children: effectiveTitle
|
|
145
153
|
}
|
|
146
154
|
),
|
|
147
155
|
effectiveMessage && (typeof effectiveMessage === "string" ? /* @__PURE__ */ jsx(
|
|
@@ -267,5 +275,5 @@ var ModalLoading = ({
|
|
|
267
275
|
};
|
|
268
276
|
|
|
269
277
|
export { Button, ModalConfirm, ModalLoading };
|
|
270
|
-
//# sourceMappingURL=chunk-
|
|
271
|
-
//# sourceMappingURL=chunk-
|
|
278
|
+
//# sourceMappingURL=chunk-HG3JQEAN.mjs.map
|
|
279
|
+
//# sourceMappingURL=chunk-HG3JQEAN.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
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":"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","file":"chunk-HG3JQEAN.mjs","sourcesContent":["type 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\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n color: ButtonColor;\n title: string;\n size?: ButtonSize;\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 ...props\n}: ButtonProps) {\n return (\n <button\n className={[\n \"inline-flex items-center 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 colorClasses[color],\n sizeClasses[size],\n className,\n ]\n .filter(Boolean)\n .join(\" \")}\n {...props}\n >\n {title}\n </button>\n );\n}\n\nexport default Button;\n","import { type ReactNode } from \"react\";\r\nimport { Modal } from \"../../Modal/Modal\";\r\nimport { Button } from \"../../Button/Button\";\r\nimport { IconCheck } from \"../../../icons/Actions/IconCheck\";\r\nimport { IconWarningNotRecommended } from \"../../../icons\";\r\nimport { IconQuestion } from \"../../../icons/Actions/IconQuestion\";\r\nimport { IconInfo } from \"../../../icons/Actions/IconInfo\";\r\n\r\nexport type ModalType = \"warning\" | \"success\" | \"question\" | \"info\" | \"none\";\r\n\r\n/** Mapa de override de color a clase CSS (icono + título) */\r\nconst colorOverrideMap: Record<string, string> = {\r\n red: \"text-onpe-red\",\r\n blue: \"text-onpe-blue\",\r\n skyblue: \"text-onpe-skyblue\",\r\n yellow: \"text-onpe-yellow\",\r\n};\r\n\r\nfunction renderIcon(type: ModalType, colorClass: string): ReactNode {\r\n if (type === \"none\") return null;\r\n if (type === \"success\") {\r\n return <IconCheck role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n }\r\n if (type === \"question\") {\r\n return <IconQuestion role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n }\r\n if (type === \"info\") {\r\n return <IconInfo role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n }\r\n // error | warning\r\n return <IconWarningNotRecommended role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n}\r\n\r\nconst defaultTitleByType: Record<string, string> = {\r\n success: \"Confirmación\",\r\n warning: \"Advertencia\",\r\n question: \"Atención\",\r\n info: \"Información\",\r\n};\r\n\r\nexport interface ModalConfirmProps {\r\n isOpen: boolean;\r\n onClose: () => void;\r\n title?: string;\r\n /** Contenido del modal (string o JSX) */\r\n message?: ReactNode;\r\n /** Alias de message */\r\n content?: ReactNode;\r\n /** Tipo semántico: determina icono, color de título y color de botón confirmar */\r\n type?: ModalType;\r\n /**\r\n * \"single\" → un botón \"Confirmar\".\r\n * \"double\" → \"Cancelar\" + \"Confirmar\".\r\n * \"confirm\" → \"No\" + \"Sí\" (diálogo de confirmación Sí/No).\r\n */\r\n buttonMode?: \"single\" | \"double\" | \"confirm\";\r\n /** Deshabilita el botón confirmar */\r\n disabledConfirmButton?: boolean;\r\n /** Deshabilita el cierre del modal */\r\n closeDisabled?: boolean;\r\n /**\r\n * Override del color del icono y título.\r\n * Si no se provee, se deriva automáticamente del `type`.\r\n */\r\n color?: \"red\" | \"blue\" | \"skyblue\" | \"yellow\";\r\n onConfirm?: () => void | Promise<void>;\r\n onCancel?: () => void | Promise<void>;\r\n textButtonConfirm?: string;\r\n textButtonCancel?: string;\r\n className?: string;\r\n zIndexLevel?: number;\r\n withoutAutoClose?: boolean;\r\n disableFocus?: boolean;\r\n /** Muestra el botón X para cerrar el modal */\r\n closeButton?: boolean;\r\n /** Alinea el texto del mensaje a la izquierda (justify) en vez de centrado */\r\n alignJustify?: boolean;\r\n /** Alinea el modal al tope de la pantalla en vez de al centro */\r\n alignTop?: boolean;\r\n /** Habilita animación de entrada/salida (default: true) */\r\n animated?: boolean;\r\n /** Bloquea el scroll del body mientras el modal está abierto (default: true) */\r\n preventBodyScroll?: boolean;\r\n}\r\n\r\nexport const ModalConfirm = ({\r\n isOpen = false,\r\n onClose = () => {},\r\n withoutAutoClose = false,\r\n title,\r\n message,\r\n content,\r\n type = \"warning\",\r\n buttonMode,\r\n disabledConfirmButton = false,\r\n closeDisabled = false,\r\n color,\r\n onConfirm = () => {},\r\n onCancel = () => {},\r\n textButtonConfirm,\r\n textButtonCancel,\r\n className = \"\",\r\n zIndexLevel = 100,\r\n disableFocus = false,\r\n closeButton = false,\r\n alignJustify = false,\r\n alignTop = false,\r\n animated = true,\r\n preventBodyScroll = true,\r\n}: ModalConfirmProps) => {\r\n const titleId = \"modal-confirm-title\";\r\n const messageId = \"modal-confirm-message\";\r\n\r\n const effectiveTitle = title ?? defaultTitleByType[type] ?? \"\";\r\n const effectiveMessage = message ?? content;\r\n // Título e ícono siempre skyblue por defecto; `color` es el único override\r\n const effectiveColorClass = color\r\n ? (colorOverrideMap[color] ?? \"text-onpe-skyblue\")\r\n : \"text-onpe-skyblue\";\r\n const effectiveButtonMode = buttonMode ?? (type === \"question\" ? \"confirm\" : \"single\");\r\n const isConfirmMode = effectiveButtonMode === \"confirm\";\r\n const showTwoButtons = effectiveButtonMode === \"double\" || isConfirmMode;\r\n const confirmLabel = textButtonConfirm ?? (isConfirmMode ? \"Sí\" : effectiveButtonMode === \"double\" ? \"Confirmar\" : \"Aceptar\");\r\n const cancelLabel = textButtonCancel ?? (isConfirmMode ? \"No\" : \"Cancelar\");\r\n\r\n const handleConfirm = async () => {\r\n try {\r\n await onConfirm();\r\n if (!withoutAutoClose) onClose();\r\n } catch (error) {\r\n console.error(\"Error en handleConfirm:\", error);\r\n if (!withoutAutoClose) onClose();\r\n }\r\n };\r\n\r\n const handleCancel = () => {\r\n onCancel();\r\n if (!withoutAutoClose) onClose();\r\n };\r\n\r\n return (\r\n <Modal\r\n isOpen={isOpen}\r\n onClose={onClose}\r\n className={`max-w-[719px]! pt-[30px]! pb-[30px]! px-[30px]! ${className}`}\r\n closeButton={closeButton}\r\n closeDisabled={closeDisabled}\r\n zIndexLevel={zIndexLevel}\r\n aria-labelledby={titleId}\r\n aria-describedby={messageId}\r\n disableFocus={disableFocus}\r\n alignTop={alignTop}\r\n animated={animated}\r\n preventBodyScroll={preventBodyScroll}\r\n >\r\n {/* Icono */}\r\n <div className=\"flex items-center justify-center\">\r\n {renderIcon(type, effectiveColorClass)}\r\n </div>\r\n\r\n {/* Título */}\r\n <p\r\n id={titleId}\r\n className={[\r\n \"text-lg md:text-2xl font-semibold text-center mt-0 md:mt-4\",\r\n effectiveColorClass,\r\n ].join(\" \")}\r\n >\r\n {effectiveTitle}\r\n </p>\r\n\r\n {/* Mensaje / Contenido */}\r\n {effectiveMessage && (\r\n typeof effectiveMessage === \"string\" ? (\r\n <div\r\n id={messageId}\r\n className={`mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\r\n dangerouslySetInnerHTML={{ __html: effectiveMessage }}\r\n />\r\n ) : (\r\n <div\r\n id={messageId}\r\n className={`mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\r\n >\r\n {effectiveMessage}\r\n </div>\r\n )\r\n )}\r\n\r\n {/* Mobile: apilado */}\r\n <div className=\"flex flex-col items-center justify-center w-full gap-5 mt-11 md:hidden\">\r\n <Button\r\n className=\"w-full max-w-[200px]\"\r\n color=\"red\"\r\n title={confirmLabel}\r\n onClick={handleConfirm}\r\n disabled={disabledConfirmButton}\r\n />\r\n {showTwoButtons && (\r\n <Button\r\n className=\"w-full max-w-[200px]\"\r\n color=\"skyblue\"\r\n title={cancelLabel}\r\n onClick={handleCancel}\r\n />\r\n )}\r\n </div>\r\n\r\n {/* Desktop: fila */}\r\n <div className=\"hidden md:flex md:flex-row items-center justify-center w-full gap-5 mt-11\">\r\n {showTwoButtons && (\r\n <Button\r\n className=\"w-[200px]\"\r\n color=\"skyblue\"\r\n title={cancelLabel}\r\n onClick={handleCancel}\r\n />\r\n )}\r\n <Button\r\n className=\"w-[200px]\"\r\n color=\"red\"\r\n title={confirmLabel}\r\n onClick={handleConfirm}\r\n disabled={disabledConfirmButton}\r\n />\r\n </div>\r\n </Modal>\r\n );\r\n};\r\n\r\nexport default ModalConfirm;\r\n","import { type ReactNode, useEffect, useState } from \"react\";\r\nimport { Modal } from \"../../Modal/Modal\";\r\nimport { IconSpinnerDesktop } from \"../../../icons/Actions/IconSpinnerDesktop\";\r\nimport { IconSpinnerMobile } from \"../../../icons/Actions/IconSpinnerMobile\";\r\n\r\nexport interface ModalLoadingProps {\r\n isOpen: boolean;\r\n onClose?: () => void;\r\n message?: string;\r\n className?: string;\r\n zIndexLevel?: number;\r\n animated?: boolean;\r\n preventBodyScroll?: boolean;\r\n /** Spinner personalizado. Si no se provee, se usa el spinner por defecto de la librería. */\r\n spinner?: ReactNode;\r\n}\r\n\r\nexport const ModalLoading = ({\r\n isOpen = false,\r\n onClose = () => {},\r\n message = \"Cargando...\",\r\n className = \"\",\r\n zIndexLevel = 100,\r\n animated = true,\r\n preventBodyScroll = true,\r\n spinner,\r\n}: ModalLoadingProps) => {\r\n const [announceMessage, setAnnounceMessage] = useState(\"\");\r\n\r\n useEffect(() => {\r\n if (!isOpen) {\r\n setAnnounceMessage(\"\");\r\n return;\r\n }\r\n setAnnounceMessage(\"\");\r\n const t = globalThis.setTimeout(() => {\r\n setAnnounceMessage(message);\r\n }, 150);\r\n return () => {\r\n globalThis.clearTimeout(t);\r\n };\r\n }, [isOpen, message]);\r\n\r\n return (\r\n <Modal\r\n disableFocus\r\n zIndexLevel={zIndexLevel}\r\n isOpen={isOpen}\r\n onClose={onClose}\r\n className={className}\r\n closeDisabled\r\n whitoutBackground={true}\r\n animated={animated}\r\n preventBodyScroll={preventBodyScroll}\r\n >\r\n <div className=\"sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n {announceMessage}\r\n </div>\r\n {spinner ?? (\r\n <>\r\n <IconSpinnerDesktop\r\n className=\"hidden md:block text-white animate-spin\"\r\n aria-hidden=\"true\"\r\n />\r\n <IconSpinnerMobile\r\n className=\"block md:hidden text-white animate-spin\"\r\n aria-hidden=\"true\"\r\n />\r\n </>\r\n )}\r\n <p className=\"text-white leading-normal text-2xl md:text-[64px] text-center mt-10 md:mt-20\">\r\n {message}\r\n </p>\r\n </Modal>\r\n );\r\n};\r\n\r\nexport default ModalLoading;\r\n"]}
|
package/dist/components.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
4
|
-
export { M as ModalConfirm, a as ModalConfirmProps } from './ModalConfirm-
|
|
4
|
+
export { M as ModalConfirm, a as ModalConfirmProps } from './ModalConfirm-aUXxpQ-H.mjs';
|
|
5
5
|
|
|
6
6
|
type ButtonColor = "blue" | "skyblue" | "skyblue-light" | "yellow" | "light-skyblue" | "gray" | "gray-light" | "gray-extra-light" | "red" | "dark-gray" | "green" | "yellow-light" | "primary";
|
|
7
7
|
type ButtonSize = "small" | "normal" | "large";
|
package/dist/components.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as react from 'react';
|
|
3
3
|
import { HTMLAttributes, ReactNode } from 'react';
|
|
4
|
-
export { M as ModalConfirm, a as ModalConfirmProps } from './ModalConfirm-
|
|
4
|
+
export { M as ModalConfirm, a as ModalConfirmProps } from './ModalConfirm-aUXxpQ-H.js';
|
|
5
5
|
|
|
6
6
|
type ButtonColor = "blue" | "skyblue" | "skyblue-light" | "yellow" | "light-skyblue" | "gray" | "gray-light" | "gray-extra-light" | "red" | "dark-gray" | "green" | "yellow-light" | "primary";
|
|
7
7
|
type ButtonSize = "small" | "normal" | "large";
|
package/dist/components.js
CHANGED
|
@@ -1174,6 +1174,12 @@ function renderIcon(type, colorClass) {
|
|
|
1174
1174
|
}
|
|
1175
1175
|
return /* @__PURE__ */ jsxRuntime.jsx(IconWarningNotRecommended, { role: "presentation", className: `w-16 h-16 ${colorClass}` });
|
|
1176
1176
|
}
|
|
1177
|
+
var defaultTitleByType = {
|
|
1178
|
+
success: "Confirmaci\xF3n",
|
|
1179
|
+
warning: "Advertencia",
|
|
1180
|
+
question: "Atenci\xF3n",
|
|
1181
|
+
info: "Informaci\xF3n"
|
|
1182
|
+
};
|
|
1177
1183
|
var ModalConfirm = ({
|
|
1178
1184
|
isOpen = false,
|
|
1179
1185
|
onClose = () => {
|
|
@@ -1204,11 +1210,13 @@ var ModalConfirm = ({
|
|
|
1204
1210
|
}) => {
|
|
1205
1211
|
const titleId = "modal-confirm-title";
|
|
1206
1212
|
const messageId = "modal-confirm-message";
|
|
1213
|
+
const effectiveTitle = title ?? defaultTitleByType[type] ?? "";
|
|
1207
1214
|
const effectiveMessage = message ?? content;
|
|
1208
1215
|
const effectiveColorClass = color ? colorOverrideMap[color] ?? "text-onpe-skyblue" : "text-onpe-skyblue";
|
|
1209
|
-
const
|
|
1210
|
-
const
|
|
1211
|
-
const
|
|
1216
|
+
const effectiveButtonMode = buttonMode ?? (type === "question" ? "confirm" : "single");
|
|
1217
|
+
const isConfirmMode = effectiveButtonMode === "confirm";
|
|
1218
|
+
const showTwoButtons = effectiveButtonMode === "double" || isConfirmMode;
|
|
1219
|
+
const confirmLabel = textButtonConfirm ?? (isConfirmMode ? "S\xED" : effectiveButtonMode === "double" ? "Confirmar" : "Aceptar");
|
|
1212
1220
|
const cancelLabel = textButtonCancel ?? (isConfirmMode ? "No" : "Cancelar");
|
|
1213
1221
|
const handleConfirm = async () => {
|
|
1214
1222
|
try {
|
|
@@ -1248,7 +1256,7 @@ var ModalConfirm = ({
|
|
|
1248
1256
|
"text-lg md:text-2xl font-semibold text-center mt-0 md:mt-4",
|
|
1249
1257
|
effectiveColorClass
|
|
1250
1258
|
].join(" "),
|
|
1251
|
-
children:
|
|
1259
|
+
children: effectiveTitle
|
|
1252
1260
|
}
|
|
1253
1261
|
),
|
|
1254
1262
|
effectiveMessage && (typeof effectiveMessage === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
|