@votodigital-onpeui/react 0.1.52 → 0.1.54
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-RH257UX5.mjs → chunk-FBPCESRR.mjs} +5 -5
- package/dist/{chunk-RH257UX5.mjs.map → chunk-FBPCESRR.mjs.map} +1 -1
- package/dist/components.js +3 -3
- package/dist/components.js.map +1 -1
- package/dist/components.mjs +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/modal.d.mts +1 -3
- package/dist/modal.d.ts +1 -3
- package/dist/modal.js +17 -21
- package/dist/modal.js.map +1 -1
- package/dist/modal.mjs +15 -19
- package/dist/modal.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -161,14 +161,14 @@ var ModalConfirm = ({
|
|
|
161
161
|
"div",
|
|
162
162
|
{
|
|
163
163
|
id: messageId,
|
|
164
|
-
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"}`,
|
|
165
165
|
dangerouslySetInnerHTML: { __html: message }
|
|
166
166
|
}
|
|
167
167
|
) : /* @__PURE__ */ jsx(
|
|
168
168
|
"div",
|
|
169
169
|
{
|
|
170
170
|
id: messageId,
|
|
171
|
-
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"}`,
|
|
172
172
|
children: message
|
|
173
173
|
}
|
|
174
174
|
)),
|
|
@@ -176,7 +176,7 @@ var ModalConfirm = ({
|
|
|
176
176
|
"div",
|
|
177
177
|
{
|
|
178
178
|
id: message ? void 0 : messageId,
|
|
179
|
-
className: `text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
|
|
179
|
+
className: `text-sm w-full md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
|
|
180
180
|
children: content
|
|
181
181
|
}
|
|
182
182
|
),
|
|
@@ -288,5 +288,5 @@ var ModalLoading = ({
|
|
|
288
288
|
};
|
|
289
289
|
|
|
290
290
|
export { Button, ModalConfirm, ModalLoading };
|
|
291
|
-
//# sourceMappingURL=chunk-
|
|
292
|
-
//# sourceMappingURL=chunk-
|
|
291
|
+
//# sourceMappingURL=chunk-FBPCESRR.mjs.map
|
|
292
|
+
//# sourceMappingURL=chunk-FBPCESRR.mjs.map
|
|
@@ -1 +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-RH257UX5.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 text-sm md:text-lg max-w-full text-black ${alignJustify ? \"text-justify\" : \"text-center\"}`}\n dangerouslySetInnerHTML={{ __html: message }}\n />\n ) : (\n <div\n id={messageId}\n className={`mt-7 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 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"]}
|
|
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
|
@@ -1280,14 +1280,14 @@ var ModalConfirm = ({
|
|
|
1280
1280
|
"div",
|
|
1281
1281
|
{
|
|
1282
1282
|
id: messageId,
|
|
1283
|
-
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"}`,
|
|
1284
1284
|
dangerouslySetInnerHTML: { __html: message }
|
|
1285
1285
|
}
|
|
1286
1286
|
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1287
1287
|
"div",
|
|
1288
1288
|
{
|
|
1289
1289
|
id: messageId,
|
|
1290
|
-
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"}`,
|
|
1291
1291
|
children: message
|
|
1292
1292
|
}
|
|
1293
1293
|
)),
|
|
@@ -1295,7 +1295,7 @@ var ModalConfirm = ({
|
|
|
1295
1295
|
"div",
|
|
1296
1296
|
{
|
|
1297
1297
|
id: message ? void 0 : messageId,
|
|
1298
|
-
className: `text-sm md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
|
|
1298
|
+
className: `text-sm w-full md:text-lg max-w-full text-black ${alignJustify ? "text-justify" : "text-center"}`,
|
|
1299
1299
|
children: content
|
|
1300
1300
|
}
|
|
1301
1301
|
),
|