@votodigital-onpeui/react 0.1.51 → 0.1.53
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/{chunk-KY2E3YVF.mjs → chunk-FBPCESRR.mjs} +12 -6
- package/dist/chunk-FBPCESRR.mjs.map +1 -0
- package/dist/components.js +10 -4
- package/dist/components.js.map +1 -1
- package/dist/components.mjs +1 -1
- package/dist/index.js +10 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/modal.js +10 -4
- package/dist/modal.js.map +1 -1
- package/dist/modal.mjs +1 -1
- package/package.json +1 -1
- package/dist/chunk-KY2E3YVF.mjs.map +0 -1
|
@@ -65,7 +65,13 @@ function renderIcon(type, colorClass) {
|
|
|
65
65
|
if (type === "info") {
|
|
66
66
|
return /* @__PURE__ */ jsx(IconInfo, { role: "presentation", className: `w-16 h-16 ${colorClass}` });
|
|
67
67
|
}
|
|
68
|
-
return /* @__PURE__ */ jsx(
|
|
68
|
+
return /* @__PURE__ */ jsx(
|
|
69
|
+
IconWarningNotRecommended,
|
|
70
|
+
{
|
|
71
|
+
role: "presentation",
|
|
72
|
+
className: `w-16 h-16 ${colorClass}`
|
|
73
|
+
}
|
|
74
|
+
);
|
|
69
75
|
}
|
|
70
76
|
var defaultTitleByType = {
|
|
71
77
|
success: "Confirmaci\xF3n",
|
|
@@ -155,14 +161,14 @@ var ModalConfirm = ({
|
|
|
155
161
|
"div",
|
|
156
162
|
{
|
|
157
163
|
id: messageId,
|
|
158
|
-
className: `mt-7 text-sm md:text-lg
|
|
164
|
+
className: `mt-7 w-full text-sm md:text-lg text-black ${alignJustify ? "text-justify" : "text-center"}`,
|
|
159
165
|
dangerouslySetInnerHTML: { __html: message }
|
|
160
166
|
}
|
|
161
167
|
) : /* @__PURE__ */ jsx(
|
|
162
168
|
"div",
|
|
163
169
|
{
|
|
164
170
|
id: messageId,
|
|
165
|
-
className: `mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
|
|
171
|
+
className: `mt-7 w-full text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
|
|
166
172
|
children: message
|
|
167
173
|
}
|
|
168
174
|
)),
|
|
@@ -170,7 +176,7 @@ var ModalConfirm = ({
|
|
|
170
176
|
"div",
|
|
171
177
|
{
|
|
172
178
|
id: message ? void 0 : messageId,
|
|
173
|
-
className: `
|
|
179
|
+
className: `text-sm w-full md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
|
|
174
180
|
children: content
|
|
175
181
|
}
|
|
176
182
|
),
|
|
@@ -282,5 +288,5 @@ var ModalLoading = ({
|
|
|
282
288
|
};
|
|
283
289
|
|
|
284
290
|
export { Button, ModalConfirm, ModalLoading };
|
|
285
|
-
//# sourceMappingURL=chunk-
|
|
286
|
-
//# sourceMappingURL=chunk-
|
|
291
|
+
//# sourceMappingURL=chunk-FBPCESRR.mjs.map
|
|
292
|
+
//# sourceMappingURL=chunk-FBPCESRR.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-FBPCESRR.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\";\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 className=\"text-white leading-normal text-2xl md:text-[64px] text-center mt-10 md:mt-20\">\n {message}\n </p>\n </Modal>\n );\n};\n\nexport default ModalLoading;\n"]}
|
package/dist/components.js
CHANGED
|
@@ -1184,7 +1184,13 @@ function renderIcon(type, colorClass) {
|
|
|
1184
1184
|
if (type === "info") {
|
|
1185
1185
|
return /* @__PURE__ */ jsxRuntime.jsx(IconInfo, { role: "presentation", className: `w-16 h-16 ${colorClass}` });
|
|
1186
1186
|
}
|
|
1187
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1187
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1188
|
+
IconWarningNotRecommended,
|
|
1189
|
+
{
|
|
1190
|
+
role: "presentation",
|
|
1191
|
+
className: `w-16 h-16 ${colorClass}`
|
|
1192
|
+
}
|
|
1193
|
+
);
|
|
1188
1194
|
}
|
|
1189
1195
|
var defaultTitleByType = {
|
|
1190
1196
|
success: "Confirmaci\xF3n",
|
|
@@ -1274,14 +1280,14 @@ var ModalConfirm = ({
|
|
|
1274
1280
|
"div",
|
|
1275
1281
|
{
|
|
1276
1282
|
id: messageId,
|
|
1277
|
-
className: `mt-7 text-sm md:text-lg
|
|
1283
|
+
className: `mt-7 w-full text-sm md:text-lg text-black ${alignJustify ? "text-justify" : "text-center"}`,
|
|
1278
1284
|
dangerouslySetInnerHTML: { __html: message }
|
|
1279
1285
|
}
|
|
1280
1286
|
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1281
1287
|
"div",
|
|
1282
1288
|
{
|
|
1283
1289
|
id: messageId,
|
|
1284
|
-
className: `mt-7 text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
|
|
1290
|
+
className: `mt-7 w-full text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
|
|
1285
1291
|
children: message
|
|
1286
1292
|
}
|
|
1287
1293
|
)),
|
|
@@ -1289,7 +1295,7 @@ var ModalConfirm = ({
|
|
|
1289
1295
|
"div",
|
|
1290
1296
|
{
|
|
1291
1297
|
id: message ? void 0 : messageId,
|
|
1292
|
-
className: `
|
|
1298
|
+
className: `text-sm w-full md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
|
|
1293
1299
|
children: content
|
|
1294
1300
|
}
|
|
1295
1301
|
),
|