@votodigital-onpeui/react 0.1.25 → 0.1.26

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.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/store/modalGlobal/useModalGlobalStore.ts","../src/store/modalGlobal/useModalLoadingStore.ts","../src/store/modalGlobal/useModalLoadingPercentageStore.ts","../src/components/ModalGlobal/ModalGlobalComponent.tsx","../src/components/ModalGlobal/ModalLoadingPercentage.tsx","../src/components/ModalGlobal/ModalGlobalProvider.tsx","../src/utils/showGlobalModal.ts"],"names":["create","jsx","jsxs"],"mappings":"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","file":"modal.mjs","sourcesContent":["import { create } from \"zustand\";\r\nimport type { ReactNode } from \"react\";\r\n\r\nexport type ModalType = \"error\" | \"success\" | \"warning\" | \"question\";\r\nexport type ModalResult = \"confirm\" | \"cancel\" | \"close\";\r\nexport type ButtonMode = \"single\" | \"double\";\r\n\r\nexport interface ModalPayload {\r\n type?: ModalType;\r\n title?: string;\r\n /** Plain text or simple string message */\r\n message?: string;\r\n /** Custom JSX content — replaces message when provided */\r\n content?: ReactNode;\r\n onConfirm?: () => void | Promise<void>;\r\n onCancel?: () => void | Promise<void>;\r\n buttonMode?: ButtonMode;\r\n textButtonConfirm?: string;\r\n textButtonCancel?: string;\r\n disabledConfirmButton?: boolean;\r\n closeDisabled?: boolean;\r\n /**\r\n * Mark this modal as handled by axios interceptor.\r\n * When true, route-change handlers should NOT auto-close it.\r\n */\r\n alreadyHandled?: boolean;\r\n}\r\n\r\ninterface ModalGlobalState {\r\n isOpen: boolean;\r\n payload: ModalPayload | null;\r\n modalId: number;\r\n _resolve: ((result: boolean) => void) | null;\r\n _resolveWithClose: ((result: ModalResult) => void) | null;\r\n\r\n openModal: (payload: ModalPayload) => Promise<boolean>;\r\n openModalWithClose: (payload: ModalPayload) => Promise<ModalResult>;\r\n closeModal: (confirmed?: boolean) => void;\r\n closeModalWithResult: (result: ModalResult) => void;\r\n}\r\n\r\nexport const useModalGlobalStore = create<ModalGlobalState>((set, get) => ({\r\n isOpen: false,\r\n payload: null,\r\n modalId: 0,\r\n _resolve: null,\r\n _resolveWithClose: null,\r\n\r\n openModal: (payload) => {\r\n return new Promise<boolean>((resolve) => {\r\n set((state) => ({\r\n isOpen: true,\r\n payload,\r\n modalId: state.modalId + 1,\r\n _resolve: resolve,\r\n _resolveWithClose: null,\r\n }));\r\n });\r\n },\r\n\r\n openModalWithClose: (payload) => {\r\n return new Promise<ModalResult>((resolve) => {\r\n set((state) => ({\r\n isOpen: true,\r\n payload,\r\n modalId: state.modalId + 1,\r\n _resolve: null,\r\n _resolveWithClose: resolve,\r\n }));\r\n });\r\n },\r\n\r\n closeModal: (confirmed = false) => {\r\n const { _resolve, _resolveWithClose } = get();\r\n _resolve?.(confirmed);\r\n _resolveWithClose?.(confirmed ? \"confirm\" : \"cancel\");\r\n set({ isOpen: false, payload: null, _resolve: null, _resolveWithClose: null });\r\n },\r\n\r\n closeModalWithResult: (result) => {\r\n const { _resolve, _resolveWithClose } = get();\r\n _resolve?.(result === \"confirm\");\r\n _resolveWithClose?.(result);\r\n set({ isOpen: false, payload: null, _resolve: null, _resolveWithClose: null });\r\n },\r\n}));\r\n","import { create } from \"zustand\";\r\n\r\ninterface ModalLoadingState {\r\n isOpen: boolean;\r\n message: string;\r\n openLoading: (message?: string) => void;\r\n closeLoading: () => void;\r\n}\r\n\r\nexport const useModalLoadingStore = create<ModalLoadingState>((set) => ({\r\n isOpen: false,\r\n message: \"Cargando...\",\r\n openLoading: (message = \"Cargando...\") => set({ isOpen: true, message }),\r\n closeLoading: () => set({ isOpen: false, message: \"Cargando...\" }),\r\n}));\r\n","import { create } from \"zustand\";\r\n\r\ninterface ModalLoadingPercentageState {\r\n isOpen: boolean;\r\n message: string;\r\n percentage: number;\r\n openLoadingPercentage: (message?: string) => void;\r\n updatePercentage: (percentage: number) => void;\r\n closeLoadingPercentage: () => void;\r\n}\r\n\r\nexport const useModalLoadingPercentageStore = create<ModalLoadingPercentageState>((set) => ({\r\n isOpen: false,\r\n message: \"Cargando...\",\r\n percentage: 0,\r\n openLoadingPercentage: (message = \"Cargando...\") =>\r\n set({ isOpen: true, message, percentage: 0 }),\r\n updatePercentage: (percentage) =>\r\n set({ percentage: Math.min(100, Math.max(0, percentage)) }),\r\n closeLoadingPercentage: () =>\r\n set({ isOpen: false, message: \"Cargando...\", percentage: 0 }),\r\n}));\r\n","\"use client\";\r\n\r\nimport type { ReactNode } from \"react\";\r\nimport { Modal } from \"../Modal/Modal\";\r\nimport { Button } from \"../Button/Button\";\r\nimport { IconWarningNotRecommended } from \"../../icons/Actions/IconWarningNotRecommended\";\r\nimport { IconCheck } from \"../../icons/Actions/IconCheck\";\r\nimport { IconInfo } from \"../../icons/Actions/IconInfo\";\r\nimport type { ModalPayload, ModalType } from \"../../store/modalGlobal/useModalGlobalStore\";\r\n\r\ninterface ModalGlobalComponentProps extends ModalPayload {\r\n isOpen: boolean;\r\n onConfirmAction: () => void;\r\n onCancelAction: () => void;\r\n onCloseAction: () => void;\r\n zIndexLevel?: number;\r\n}\r\n\r\nconst iconColorMap: Record<ModalType, string> = {\r\n error: \"text-onpe-red\",\r\n warning: \"text-onpe-yellow\",\r\n success: \"text-onpe-skyblue\",\r\n question: \"text-onpe-blue\",\r\n};\r\n\r\nconst titleColorMap: Record<ModalType, string> = {\r\n error: \"text-onpe-red\",\r\n warning: \"text-onpe-yellow\",\r\n success: \"text-onpe-skyblue\",\r\n question: \"text-onpe-blue\",\r\n};\r\n\r\nconst confirmButtonColorMap: Record<ModalType, \"red\" | \"skyblue\"> = {\r\n error: \"red\",\r\n warning: \"red\",\r\n success: \"skyblue\",\r\n question: \"red\",\r\n};\r\n\r\nfunction renderIcon(type: ModalType, colorClass: string): ReactNode {\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 <IconInfo role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n }\r\n return <IconWarningNotRecommended role=\"presentation\" className={`w-16 h-16 ${colorClass}`} />;\r\n}\r\n\r\nexport const ModalGlobalComponent = ({\r\n isOpen,\r\n type = \"error\",\r\n title,\r\n message,\r\n content,\r\n onConfirm,\r\n onCancel,\r\n buttonMode,\r\n textButtonConfirm = \"Aceptar\",\r\n textButtonCancel = \"Cancelar\",\r\n disabledConfirmButton = false,\r\n closeDisabled = false,\r\n onConfirmAction,\r\n onCancelAction,\r\n onCloseAction,\r\n zIndexLevel = 200,\r\n}: ModalGlobalComponentProps) => {\r\n const titleId = \"modal-global-title\";\r\n const messageId = \"modal-global-message\";\r\n\r\n const iconColorClass = iconColorMap[type];\r\n const titleColorClass = titleColorMap[type];\r\n const confirmButtonColor = confirmButtonColorMap[type];\r\n\r\n const showTwoButtons = buttonMode === \"double\" || typeof onCancel === \"function\";\r\n\r\n const handleConfirm = async () => {\r\n try {\r\n if (onConfirm) await onConfirm();\r\n } finally {\r\n onConfirmAction();\r\n }\r\n };\r\n\r\n const handleCancel = async () => {\r\n try {\r\n if (onCancel) await onCancel();\r\n } finally {\r\n onCancelAction();\r\n }\r\n };\r\n\r\n return (\r\n <Modal\r\n isOpen={isOpen}\r\n onClose={onCloseAction}\r\n closeDisabled={closeDisabled}\r\n escapeToClose={!closeDisabled}\r\n zIndexLevel={zIndexLevel}\r\n className=\"!max-w-[719px] !pt-[30px] !pb-[30px] !px-[30px]\"\r\n aria-labelledby={title ? titleId : undefined}\r\n aria-describedby={message || content ? messageId : undefined}\r\n >\r\n {/* Icon */}\r\n <div className=\"flex items-center justify-center\">\r\n {renderIcon(type, iconColorClass)}\r\n </div>\r\n\r\n {/* Title */}\r\n {title && (\r\n <p\r\n id={titleId}\r\n className={[\r\n \"mt-4 text-lg md:text-2xl font-semibold text-center\",\r\n titleColorClass,\r\n ].join(\" \")}\r\n >\r\n {title}\r\n </p>\r\n )}\r\n\r\n {/* Content or message */}\r\n <div\r\n id={messageId}\r\n className=\"mt-7 text-sm md:text-lg text-center max-w-full text-onpe-dark-gray\"\r\n >\r\n {content ?? <span>{message}</span>}\r\n </div>\r\n\r\n {/* Mobile buttons: stacked */}\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={confirmButtonColor}\r\n title={textButtonConfirm}\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={textButtonCancel}\r\n onClick={handleCancel}\r\n />\r\n )}\r\n </div>\r\n\r\n {/* Desktop buttons: row */}\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={textButtonCancel}\r\n onClick={handleCancel}\r\n />\r\n )}\r\n <Button\r\n className=\"w-[200px]\"\r\n color={confirmButtonColor}\r\n title={textButtonConfirm}\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 ModalGlobalComponent;\r\n","\"use client\";\r\n\r\nimport { Modal } from \"../Modal/Modal\";\r\n\r\ninterface ModalLoadingPercentageProps {\r\n isOpen: boolean;\r\n message: string;\r\n percentage: number;\r\n zIndexLevel?: number;\r\n}\r\n\r\nexport const ModalLoadingPercentage = ({\r\n isOpen,\r\n message,\r\n percentage,\r\n zIndexLevel = 300,\r\n}: ModalLoadingPercentageProps) => {\r\n const clamped = Math.min(100, Math.max(0, percentage));\r\n\r\n return (\r\n <Modal\r\n disableFocus\r\n isOpen={isOpen}\r\n onClose={() => {}}\r\n closeDisabled\r\n whitoutBackground\r\n zIndexLevel={zIndexLevel}\r\n >\r\n <div className=\"flex flex-col items-center gap-6 px-4 w-full max-w-xs md:max-w-sm\">\r\n {/* Percentage number */}\r\n <p className=\"text-white text-5xl md:text-[80px] font-semibold leading-none\">\r\n {clamped}%\r\n </p>\r\n\r\n {/* Progress bar */}\r\n <div className=\"w-full h-3 bg-white/30 rounded-full overflow-hidden\">\r\n <div\r\n className=\"h-full bg-white rounded-full transition-all duration-300 ease-out\"\r\n style={{ width: `${clamped}%` }}\r\n role=\"progressbar\"\r\n aria-valuenow={clamped}\r\n aria-valuemin={0}\r\n aria-valuemax={100}\r\n aria-label={message}\r\n />\r\n </div>\r\n\r\n {/* Message */}\r\n <p className=\"text-white text-2xl md:text-[40px] text-center leading-normal\">\r\n {message}\r\n </p>\r\n </div>\r\n </Modal>\r\n );\r\n};\r\n\r\nexport default ModalLoadingPercentage;\r\n","\"use client\";\r\n\r\nimport type { ReactNode } from \"react\";\r\nimport { useModalGlobalStore } from \"../../store/modalGlobal/useModalGlobalStore\";\r\nimport { useModalLoadingStore } from \"../../store/modalGlobal/useModalLoadingStore\";\r\nimport { useModalLoadingPercentageStore } from \"../../store/modalGlobal/useModalLoadingPercentageStore\";\r\nimport { ModalGlobalComponent } from \"./ModalGlobalComponent\";\r\nimport { ModalLoading } from \"../Feedback/ModalLoading/ModalLoading\";\r\nimport { ModalLoadingPercentage } from \"./ModalLoadingPercentage\";\r\n\r\ninterface ModalGlobalProviderProps {\r\n children: ReactNode;\r\n /** z-index for the main global modal (default: 200) */\r\n zIndexLevel?: number;\r\n /** z-index for the loading modal (default: 300) */\r\n zIndexLoading?: number;\r\n /** z-index for the loading percentage modal (default: 300) */\r\n zIndexLoadingPercentage?: number;\r\n}\r\n\r\n/**\r\n * Wrap your app (or layout) with this provider.\r\n * It renders the global modal, loading modal, and loading percentage modal via portals.\r\n *\r\n * Usage:\r\n * ```tsx\r\n * // _app.tsx or layout.tsx\r\n * <ModalGlobalProvider>\r\n * {children}\r\n * </ModalGlobalProvider>\r\n * ```\r\n *\r\n * Then anywhere in the app:\r\n * ```ts\r\n * import {\r\n * showGlobalModal,\r\n * showGlobalLoading, closeGlobalLoading,\r\n * showGlobalLoadingPercentage, updateGlobalLoadingPercentage, closeGlobalLoadingPercentage,\r\n * } from \"@votodigital-onpeui/react\";\r\n * ```\r\n */\r\nexport const ModalGlobalProvider = ({\r\n children,\r\n zIndexLevel = 200,\r\n zIndexLoading = 300,\r\n zIndexLoadingPercentage = 300,\r\n}: ModalGlobalProviderProps) => {\r\n const { isOpen, payload, closeModal, closeModalWithResult } = useModalGlobalStore();\r\n const { isOpen: isLoadingOpen, message: loadingMessage } = useModalLoadingStore();\r\n const {\r\n isOpen: isLoadingPercentageOpen,\r\n message: loadingPercentageMessage,\r\n percentage,\r\n } = useModalLoadingPercentageStore();\r\n\r\n return (\r\n <>\r\n {children}\r\n\r\n {/* Main global modal */}\r\n <ModalGlobalComponent\r\n isOpen={isOpen}\r\n type={payload?.type ?? \"error\"}\r\n title={payload?.title}\r\n message={payload?.message}\r\n content={payload?.content}\r\n onConfirm={payload?.onConfirm}\r\n onCancel={payload?.onCancel}\r\n buttonMode={payload?.buttonMode}\r\n textButtonConfirm={payload?.textButtonConfirm}\r\n textButtonCancel={payload?.textButtonCancel}\r\n disabledConfirmButton={payload?.disabledConfirmButton}\r\n closeDisabled={payload?.closeDisabled}\r\n onConfirmAction={() => closeModal(true)}\r\n onCancelAction={() => closeModal(false)}\r\n onCloseAction={() => closeModalWithResult(\"close\")}\r\n zIndexLevel={zIndexLevel}\r\n />\r\n\r\n {/* Global loading modal */}\r\n <ModalLoading\r\n isOpen={isLoadingOpen}\r\n message={loadingMessage}\r\n zIndexLevel={zIndexLoading}\r\n />\r\n\r\n {/* Global loading percentage modal */}\r\n <ModalLoadingPercentage\r\n isOpen={isLoadingPercentageOpen}\r\n message={loadingPercentageMessage}\r\n percentage={percentage}\r\n zIndexLevel={zIndexLoadingPercentage}\r\n />\r\n </>\r\n );\r\n};\r\n\r\nexport default ModalGlobalProvider;\r\n","import { useModalGlobalStore } from \"../store/modalGlobal/useModalGlobalStore\";\r\nimport { useModalLoadingStore } from \"../store/modalGlobal/useModalLoadingStore\";\r\nimport type { ModalPayload, ModalResult } from \"../store/modalGlobal/useModalGlobalStore\";\r\n\r\n/**\r\n * Open the global modal. Returns a promise that resolves to `true` if the user\r\n * confirmed, or `false` if they cancelled/closed.\r\n *\r\n * @example\r\n * const confirmed = await showGlobalModal({\r\n * type: \"question\",\r\n * title: \"¿Eliminar votante?\",\r\n * message: \"Esta acción no se puede deshacer.\",\r\n * buttonMode: \"double\",\r\n * });\r\n *\r\n * @example — with custom JSX content\r\n * await showGlobalModal({\r\n * type: \"error\",\r\n * title: \"Error de sesión\",\r\n * content: <SesionExpiredDetails />,\r\n * });\r\n */\r\nexport const showGlobalModal = (payload: ModalPayload): Promise<boolean> =>\r\n useModalGlobalStore.getState().openModal(payload);\r\n\r\n/**\r\n * Like `showGlobalModal` but resolves to `\"confirm\"`, `\"cancel\"`, or `\"close\"`,\r\n * letting you distinguish between the three ways a modal can be dismissed.\r\n *\r\n * @example\r\n * const result = await showGlobalModalWithClose({\r\n * type: \"warning\",\r\n * title: \"Guardar cambios\",\r\n * buttonMode: \"double\",\r\n * });\r\n * if (result === \"confirm\") save();\r\n * if (result === \"close\") navigateAway();\r\n */\r\nexport const showGlobalModalWithClose = (payload: ModalPayload): Promise<ModalResult> =>\r\n useModalGlobalStore.getState().openModalWithClose(payload);\r\n\r\n/**\r\n * Programmatically close the global modal (resolves as cancelled).\r\n * Useful for layout/route-change handlers.\r\n *\r\n * ⚠️ Always check `isAlreadyHandled()` before calling this from a route handler\r\n * to avoid closing axios-controlled modals.\r\n */\r\nexport const closeGlobalModal = (): void =>\r\n useModalGlobalStore.getState().closeModal(false);\r\n\r\n/** Returns true if the global modal is currently open. */\r\nexport const isGlobalModalOpen = (): boolean =>\r\n useModalGlobalStore.getState().isOpen;\r\n\r\n/**\r\n * Returns true if the currently open modal was opened by an axios interceptor\r\n * (i.e. `alreadyHandled: true` was set). Use this to skip auto-close on\r\n * route changes.\r\n *\r\n * @example — in a Next.js layout\r\n * router.events.on(\"routeChangeStart\", () => {\r\n * if (isGlobalModalOpen() && !isAlreadyHandled()) {\r\n * closeGlobalModal();\r\n * }\r\n * });\r\n */\r\nexport const isAlreadyHandled = (): boolean =>\r\n useModalGlobalStore.getState().payload?.alreadyHandled ?? false;\r\n\r\n// ---------------------------------------------------------------------------\r\n// Loading helpers\r\n// ---------------------------------------------------------------------------\r\n\r\n/**\r\n * Show the global loading modal.\r\n *\r\n * @example\r\n * showGlobalLoading(\"Guardando cambios...\");\r\n * await api.save(data);\r\n * closeGlobalLoading();\r\n */\r\nexport const showGlobalLoading = (message?: string): void =>\r\n useModalLoadingStore.getState().openLoading(message);\r\n\r\n/** Close the global loading modal. */\r\nexport const closeGlobalLoading = (): void =>\r\n useModalLoadingStore.getState().closeLoading();\r\n\r\n/** Returns true if the global loading modal is currently visible. */\r\nexport const isGlobalLoadingOpen = (): boolean =>\r\n useModalLoadingStore.getState().isOpen;\r\n\r\n// ---------------------------------------------------------------------------\r\n// Loading percentage helpers\r\n// ---------------------------------------------------------------------------\r\n\r\nimport { useModalLoadingPercentageStore } from \"../store/modalGlobal/useModalLoadingPercentageStore\";\r\n\r\n/**\r\n * Show the global loading modal with a percentage progress bar.\r\n *\r\n * @example\r\n * showGlobalLoadingPercentage(\"Subiendo archivo...\");\r\n * for (const chunk of chunks) {\r\n * await upload(chunk);\r\n * updateGlobalLoadingPercentage(Math.round((i / chunks.length) * 100));\r\n * }\r\n * closeGlobalLoadingPercentage();\r\n */\r\nexport const showGlobalLoadingPercentage = (message?: string): void =>\r\n useModalLoadingPercentageStore.getState().openLoadingPercentage(message);\r\n\r\n/** Update the percentage value (0–100). Clamped automatically. */\r\nexport const updateGlobalLoadingPercentage = (percentage: number): void =>\r\n useModalLoadingPercentageStore.getState().updatePercentage(percentage);\r\n\r\n/** Close the global loading percentage modal. */\r\nexport const closeGlobalLoadingPercentage = (): void =>\r\n useModalLoadingPercentageStore.getState().closeLoadingPercentage();\r\n\r\n/** Returns true if the global loading percentage modal is currently visible. */\r\nexport const isGlobalLoadingPercentageOpen = (): boolean =>\r\n useModalLoadingPercentageStore.getState().isOpen;\r\n"]}
1
+ {"version":3,"sources":["../src/store/modalGlobal/useModalGlobalStore.ts","../src/store/modalGlobal/useModalLoadingStore.ts","../src/store/modalGlobal/useModalLoadingPercentageStore.ts","../src/components/ModalGlobal/ModalLoadingPercentage.tsx","../src/components/ModalGlobal/ModalGlobalProvider.tsx","../src/utils/showGlobalModal.ts"],"names":["create","jsxs","jsx"],"mappings":"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","file":"modal.mjs","sourcesContent":["import { create } from \"zustand\";\r\nimport type { ReactNode } from \"react\";\r\nimport type { ModalType } from \"../../components/Feedback/ModalConfirm/ModalConfirm\";\r\n\r\nexport type { ModalType };\r\n\r\nexport type ModalResult = \"confirm\" | \"cancel\" | \"close\";\r\n\r\n/**\r\n * Payload del modal global.\r\n * Combina los props de ModalGlobalComponent (type, buttonMode, content)\r\n * con los de ModalConfirm (icon, color, twoButtons).\r\n * Los props del global component predominan; color e icon son overrides manuales.\r\n */\r\nexport interface ModalPayload {\r\n title: string;\r\n /** Contenido del modal (string o JSX). Alias: content */\r\n message?: ReactNode;\r\n /** Alias de message para compatibilidad */\r\n content?: ReactNode;\r\n /** Tipo semántico: determina color de icono, título y botón */\r\n type?: ModalType;\r\n /** \"double\" muestra el botón cancelar */\r\n buttonMode?: \"single\" | \"double\";\r\n /** Deshabilita el botón confirmar */\r\n disabledConfirmButton?: boolean;\r\n /** Deshabilita el cierre del modal */\r\n closeDisabled?: boolean;\r\n /** Override manual del color del icono y título */\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 /**\r\n * Marca este modal como controlado por axios interceptor.\r\n * Cuando es true, los handlers de cambio de ruta NO deben cerrarlo.\r\n */\r\n alreadyHandled?: boolean;\r\n}\r\n\r\ninterface ModalGlobalState {\r\n isOpen: boolean;\r\n payload: ModalPayload | null;\r\n modalId: number;\r\n _resolve: ((result: boolean) => void) | null;\r\n _resolveWithClose: ((result: ModalResult) => void) | null;\r\n\r\n openModal: (payload: ModalPayload) => Promise<boolean>;\r\n openModalWithClose: (payload: ModalPayload) => Promise<ModalResult>;\r\n closeModal: (confirmed?: boolean) => void;\r\n closeModalWithResult: (result: ModalResult) => void;\r\n}\r\n\r\nexport const useModalGlobalStore = create<ModalGlobalState>((set, get) => ({\r\n isOpen: false,\r\n payload: null,\r\n modalId: 0,\r\n _resolve: null,\r\n _resolveWithClose: null,\r\n\r\n openModal: (payload) => {\r\n return new Promise<boolean>((resolve) => {\r\n set((state) => ({\r\n isOpen: true,\r\n payload,\r\n modalId: state.modalId + 1,\r\n _resolve: resolve,\r\n _resolveWithClose: null,\r\n }));\r\n });\r\n },\r\n\r\n openModalWithClose: (payload) => {\r\n return new Promise<ModalResult>((resolve) => {\r\n set((state) => ({\r\n isOpen: true,\r\n payload,\r\n modalId: state.modalId + 1,\r\n _resolve: null,\r\n _resolveWithClose: resolve,\r\n }));\r\n });\r\n },\r\n\r\n closeModal: (confirmed = false) => {\r\n const { _resolve, _resolveWithClose } = get();\r\n _resolve?.(confirmed);\r\n _resolveWithClose?.(confirmed ? \"confirm\" : \"cancel\");\r\n set({ isOpen: false, payload: null, _resolve: null, _resolveWithClose: null });\r\n },\r\n\r\n closeModalWithResult: (result) => {\r\n const { _resolve, _resolveWithClose } = get();\r\n _resolve?.(result === \"confirm\");\r\n _resolveWithClose?.(result);\r\n set({ isOpen: false, payload: null, _resolve: null, _resolveWithClose: null });\r\n },\r\n}));\r\n","import { create } from \"zustand\";\r\n\r\ninterface ModalLoadingState {\r\n isOpen: boolean;\r\n message: string;\r\n openLoading: (message?: string) => void;\r\n closeLoading: () => void;\r\n}\r\n\r\nexport const useModalLoadingStore = create<ModalLoadingState>((set) => ({\r\n isOpen: false,\r\n message: \"Cargando...\",\r\n openLoading: (message = \"Cargando...\") => set({ isOpen: true, message }),\r\n closeLoading: () => set({ isOpen: false, message: \"Cargando...\" }),\r\n}));\r\n","import { create } from \"zustand\";\r\n\r\ninterface ModalLoadingPercentageState {\r\n isOpen: boolean;\r\n message: string;\r\n percentage: number;\r\n openLoadingPercentage: (message?: string) => void;\r\n updatePercentage: (percentage: number) => void;\r\n closeLoadingPercentage: () => void;\r\n}\r\n\r\nexport const useModalLoadingPercentageStore = create<ModalLoadingPercentageState>((set) => ({\r\n isOpen: false,\r\n message: \"Cargando...\",\r\n percentage: 0,\r\n openLoadingPercentage: (message = \"Cargando...\") =>\r\n set({ isOpen: true, message, percentage: 0 }),\r\n updatePercentage: (percentage) =>\r\n set({ percentage: Math.min(100, Math.max(0, percentage)) }),\r\n closeLoadingPercentage: () =>\r\n set({ isOpen: false, message: \"Cargando...\", percentage: 0 }),\r\n}));\r\n","\"use client\";\r\n\r\nimport { Modal } from \"../Modal/Modal\";\r\n\r\ninterface ModalLoadingPercentageProps {\r\n isOpen: boolean;\r\n message: string;\r\n percentage: number;\r\n zIndexLevel?: number;\r\n}\r\n\r\nexport const ModalLoadingPercentage = ({\r\n isOpen,\r\n message,\r\n percentage,\r\n zIndexLevel = 300,\r\n}: ModalLoadingPercentageProps) => {\r\n const clamped = Math.min(100, Math.max(0, percentage));\r\n\r\n return (\r\n <Modal\r\n disableFocus\r\n isOpen={isOpen}\r\n onClose={() => {}}\r\n closeDisabled\r\n whitoutBackground\r\n zIndexLevel={zIndexLevel}\r\n >\r\n <div className=\"flex flex-col items-center gap-6 px-4 w-full max-w-xs md:max-w-sm\">\r\n {/* Percentage number */}\r\n <p className=\"text-white text-5xl md:text-[80px] font-semibold leading-none\">\r\n {clamped}%\r\n </p>\r\n\r\n {/* Progress bar */}\r\n <div className=\"w-full h-3 bg-white/30 rounded-full overflow-hidden\">\r\n <div\r\n className=\"h-full bg-white rounded-full transition-all duration-300 ease-out\"\r\n style={{ width: `${clamped}%` }}\r\n role=\"progressbar\"\r\n aria-valuenow={clamped}\r\n aria-valuemin={0}\r\n aria-valuemax={100}\r\n aria-label={message}\r\n />\r\n </div>\r\n\r\n {/* Message */}\r\n <p className=\"text-white text-2xl md:text-[40px] text-center leading-normal\">\r\n {message}\r\n </p>\r\n </div>\r\n </Modal>\r\n );\r\n};\r\n\r\nexport default ModalLoadingPercentage;\r\n","\"use client\";\r\n\r\nimport type { ReactNode } from \"react\";\r\nimport { useModalGlobalStore } from \"../../store/modalGlobal/useModalGlobalStore\";\r\nimport { useModalLoadingStore } from \"../../store/modalGlobal/useModalLoadingStore\";\r\nimport { useModalLoadingPercentageStore } from \"../../store/modalGlobal/useModalLoadingPercentageStore\";\r\nimport { ModalConfirm } from \"../Feedback/ModalConfirm/ModalConfirm\";\r\nimport { ModalLoading } from \"../Feedback/ModalLoading/ModalLoading\";\r\nimport { ModalLoadingPercentage } from \"./ModalLoadingPercentage\";\r\n\r\ninterface ModalGlobalProviderProps {\r\n children: ReactNode;\r\n /** z-index del modal principal (default: 200) */\r\n zIndexLevel?: number;\r\n /** z-index del modal de loading (default: 300) */\r\n zIndexLoading?: number;\r\n /** z-index del modal de loading con porcentaje (default: 300) */\r\n zIndexLoadingPercentage?: number;\r\n}\r\n\r\n/**\r\n * Envuelve tu app (o layout) con este provider.\r\n * Renderiza ModalConfirm, ModalLoading y ModalLoadingPercentage vía portals.\r\n *\r\n * @example\r\n * // layout.tsx\r\n * <ModalGlobalProvider>\r\n * {children}\r\n * </ModalGlobalProvider>\r\n *\r\n * // Desde cualquier parte del código:\r\n * import { showGlobalModal, showGlobalLoading, closeGlobalLoading } from \"@votodigital-onpeui/react/modal\";\r\n *\r\n * await showGlobalModal({ title: \"¿Continuar?\", twoButtons: true });\r\n * showGlobalLoading(\"Procesando...\");\r\n * closeGlobalLoading();\r\n */\r\nexport const ModalGlobalProvider = ({\r\n children,\r\n zIndexLevel = 200,\r\n zIndexLoading = 300,\r\n zIndexLoadingPercentage = 300,\r\n}: ModalGlobalProviderProps) => {\r\n const { isOpen, payload, closeModal, closeModalWithResult } =\r\n useModalGlobalStore();\r\n const { isOpen: isLoadingOpen, message: loadingMessage } =\r\n useModalLoadingStore();\r\n const {\r\n isOpen: isPercentageOpen,\r\n message: percentageMessage,\r\n percentage,\r\n } = useModalLoadingPercentageStore();\r\n\r\n return (\r\n <>\r\n {children}\r\n\r\n {/* Modal principal — usa ModalConfirm de la librería directamente */}\r\n <ModalConfirm\r\n isOpen={isOpen}\r\n onClose={() => closeModalWithResult(\"close\")}\r\n title={payload?.title ?? \"\"}\r\n message={payload?.message}\r\n content={payload?.content}\r\n type={payload?.type}\r\n buttonMode={payload?.buttonMode}\r\n disabledConfirmButton={payload?.disabledConfirmButton}\r\n closeDisabled={payload?.closeDisabled}\r\n color={payload?.color}\r\n onConfirm={async () => {\r\n await payload?.onConfirm?.();\r\n closeModal(true);\r\n }}\r\n onCancel={() => {\r\n payload?.onCancel?.();\r\n closeModal(false);\r\n }}\r\n withoutAutoClose\r\n textButtonConfirm={payload?.textButtonConfirm}\r\n textButtonCancel={payload?.textButtonCancel}\r\n zIndexLevel={zIndexLevel}\r\n />\r\n\r\n {/* Loading */}\r\n <ModalLoading\r\n isOpen={isLoadingOpen}\r\n message={loadingMessage}\r\n zIndexLevel={zIndexLoading}\r\n />\r\n\r\n {/* Loading con porcentaje */}\r\n <ModalLoadingPercentage\r\n isOpen={isPercentageOpen}\r\n message={percentageMessage}\r\n percentage={percentage}\r\n zIndexLevel={zIndexLoadingPercentage}\r\n />\r\n </>\r\n );\r\n};\r\n\r\nexport default ModalGlobalProvider;\r\n","import { useModalGlobalStore } from \"../store/modalGlobal/useModalGlobalStore\";\r\nimport { useModalLoadingStore } from \"../store/modalGlobal/useModalLoadingStore\";\r\nimport type { ModalPayload, ModalResult } from \"../store/modalGlobal/useModalGlobalStore\";\r\n\r\n/**\r\n * Open the global modal. Returns a promise that resolves to `true` if the user\r\n * confirmed, or `false` if they cancelled/closed.\r\n *\r\n * @example\r\n * const confirmed = await showGlobalModal({\r\n * type: \"question\",\r\n * title: \"¿Eliminar votante?\",\r\n * message: \"Esta acción no se puede deshacer.\",\r\n * buttonMode: \"double\",\r\n * });\r\n *\r\n * @example — with custom JSX content\r\n * await showGlobalModal({\r\n * type: \"error\",\r\n * title: \"Error de sesión\",\r\n * content: <SesionExpiredDetails />,\r\n * });\r\n */\r\nexport const showGlobalModal = (payload: ModalPayload): Promise<boolean> =>\r\n useModalGlobalStore.getState().openModal(payload);\r\n\r\n/**\r\n * Like `showGlobalModal` but resolves to `\"confirm\"`, `\"cancel\"`, or `\"close\"`,\r\n * letting you distinguish between the three ways a modal can be dismissed.\r\n *\r\n * @example\r\n * const result = await showGlobalModalWithClose({\r\n * type: \"warning\",\r\n * title: \"Guardar cambios\",\r\n * buttonMode: \"double\",\r\n * });\r\n * if (result === \"confirm\") save();\r\n * if (result === \"close\") navigateAway();\r\n */\r\nexport const showGlobalModalWithClose = (payload: ModalPayload): Promise<ModalResult> =>\r\n useModalGlobalStore.getState().openModalWithClose(payload);\r\n\r\n/**\r\n * Programmatically close the global modal (resolves as cancelled).\r\n * Useful for layout/route-change handlers.\r\n *\r\n * ⚠️ Always check `isAlreadyHandled()` before calling this from a route handler\r\n * to avoid closing axios-controlled modals.\r\n */\r\nexport const closeGlobalModal = (): void =>\r\n useModalGlobalStore.getState().closeModal(false);\r\n\r\n/** Returns true if the global modal is currently open. */\r\nexport const isGlobalModalOpen = (): boolean =>\r\n useModalGlobalStore.getState().isOpen;\r\n\r\n/**\r\n * Returns true if the currently open modal was opened by an axios interceptor\r\n * (i.e. `alreadyHandled: true` was set). Use this to skip auto-close on\r\n * route changes.\r\n *\r\n * @example — in a Next.js layout\r\n * router.events.on(\"routeChangeStart\", () => {\r\n * if (isGlobalModalOpen() && !isAlreadyHandled()) {\r\n * closeGlobalModal();\r\n * }\r\n * });\r\n */\r\nexport const isAlreadyHandled = (): boolean =>\r\n useModalGlobalStore.getState().payload?.alreadyHandled ?? false;\r\n\r\n// ---------------------------------------------------------------------------\r\n// Loading helpers\r\n// ---------------------------------------------------------------------------\r\n\r\n/**\r\n * Show the global loading modal.\r\n *\r\n * @example\r\n * showGlobalLoading(\"Guardando cambios...\");\r\n * await api.save(data);\r\n * closeGlobalLoading();\r\n */\r\nexport const showGlobalLoading = (message?: string): void =>\r\n useModalLoadingStore.getState().openLoading(message);\r\n\r\n/** Close the global loading modal. */\r\nexport const closeGlobalLoading = (): void =>\r\n useModalLoadingStore.getState().closeLoading();\r\n\r\n/** Returns true if the global loading modal is currently visible. */\r\nexport const isGlobalLoadingOpen = (): boolean =>\r\n useModalLoadingStore.getState().isOpen;\r\n\r\n// ---------------------------------------------------------------------------\r\n// Loading percentage helpers\r\n// ---------------------------------------------------------------------------\r\n\r\nimport { useModalLoadingPercentageStore } from \"../store/modalGlobal/useModalLoadingPercentageStore\";\r\n\r\n/**\r\n * Show the global loading modal with a percentage progress bar.\r\n *\r\n * @example\r\n * showGlobalLoadingPercentage(\"Subiendo archivo...\");\r\n * for (const chunk of chunks) {\r\n * await upload(chunk);\r\n * updateGlobalLoadingPercentage(Math.round((i / chunks.length) * 100));\r\n * }\r\n * closeGlobalLoadingPercentage();\r\n */\r\nexport const showGlobalLoadingPercentage = (message?: string): void =>\r\n useModalLoadingPercentageStore.getState().openLoadingPercentage(message);\r\n\r\n/** Update the percentage value (0–100). Clamped automatically. */\r\nexport const updateGlobalLoadingPercentage = (percentage: number): void =>\r\n useModalLoadingPercentageStore.getState().updatePercentage(percentage);\r\n\r\n/** Close the global loading percentage modal. */\r\nexport const closeGlobalLoadingPercentage = (): void =>\r\n useModalLoadingPercentageStore.getState().closeLoadingPercentage();\r\n\r\n/** Returns true if the global loading percentage modal is currently visible. */\r\nexport const isGlobalLoadingPercentageOpen = (): boolean =>\r\n useModalLoadingPercentageStore.getState().isOpen;\r\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@votodigital-onpeui/react",
3
- "version": "0.1.25",
3
+ "version": "0.1.26",
4
4
  "description": "Librería de componentes UI para proyectos ONPE",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -1,51 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
-
3
- // src/icons/Actions/IconCheck.tsx
4
- var IconCheck = (props) => /* @__PURE__ */ jsx("svg", { width: 64, height: 64, viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
5
- "path",
6
- {
7
- 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",
8
- fill: "currentColor"
9
- }
10
- ) });
11
- var IconInfo = (props) => /* @__PURE__ */ jsx("svg", { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z", fill: "currentColor" }) });
12
- var IconSpinnerDesktop = (props) => /* @__PURE__ */ jsx("svg", { width: 102, height: 102, viewBox: "0 0 102 102", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
13
- "path",
14
- {
15
- 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",
16
- stroke: "currentColor",
17
- strokeWidth: 6,
18
- strokeLinecap: "round"
19
- }
20
- ) });
21
- var IconSpinnerMobile = (props) => /* @__PURE__ */ jsx("svg", { width: 33, height: 33, viewBox: "0 0 33 33", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx(
22
- "path",
23
- {
24
- d: "M16.5 3C8.87169 2.9997 2.99992 9.07499 3 16.5C3.00008 23.385 8.45721 30 16.5 30C23.9822 30 30 23.925 30 16.5",
25
- stroke: "currentColor",
26
- strokeWidth: 6,
27
- strokeLinecap: "round"
28
- }
29
- ) });
30
- var IconWarningNotRecommended = (props) => /* @__PURE__ */ jsx(
31
- "svg",
32
- {
33
- width: "1em",
34
- height: "1em",
35
- viewBox: "0 0 49 42",
36
- fill: "none",
37
- xmlns: "http://www.w3.org/2000/svg",
38
- ...props,
39
- children: /* @__PURE__ */ jsx(
40
- "path",
41
- {
42
- d: "M0 42L24.5 0L49 42H0ZM7.68409 37.5789H41.3159L24.5 8.84211L7.68409 37.5789ZM24.5 35.3684C25.1311 35.3684 25.6604 35.1562 26.088 34.7318C26.5157 34.3074 26.7288 33.7827 26.7273 33.1579C26.7273 32.5316 26.5135 32.0062 26.0858 31.5818C25.6582 31.1574 25.1296 30.9459 24.5 30.9474C23.8689 30.9474 23.3396 31.1596 22.912 31.584C22.4843 32.0084 22.2712 32.5331 22.2727 33.1579C22.2727 33.7842 22.4865 34.3096 22.9142 34.734C23.3418 35.1584 23.8704 35.3699 24.5 35.3684ZM22.2727 28.7368H26.7273V17.6842H22.2727V28.7368Z",
43
- fill: "currentColor"
44
- }
45
- )
46
- }
47
- );
48
-
49
- export { IconCheck, IconInfo, IconSpinnerDesktop, IconSpinnerMobile, IconWarningNotRecommended };
50
- //# sourceMappingURL=chunk-65JI3EPO.mjs.map
51
- //# sourceMappingURL=chunk-65JI3EPO.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/icons/Actions/IconCheck.tsx","../src/icons/Actions/IconInfo.tsx","../src/icons/Actions/IconSpinnerDesktop.tsx","../src/icons/Actions/IconSpinnerMobile.tsx","../src/icons/Actions/IconWarningNotRecommended.tsx"],"names":["jsx"],"mappings":";;;AAEO,IAAM,YAAY,CAAC,KAAA,qBACxB,GAAA,CAAC,KAAA,EAAA,EAAI,OAAO,EAAA,EAAI,MAAA,EAAQ,EAAA,EAAI,OAAA,EAAQ,aAAY,IAAA,EAAK,MAAA,EAAO,KAAA,EAAM,4BAAA,EAA8B,GAAG,KAAA,EACjG,QAAA,kBAAA,GAAA;AAAA,EAAC,MAAA;AAAA,EAAA;AAAA,IACC,CAAA,EAAE,svCAAA;AAAA,IACF,IAAA,EAAK;AAAA;AACP,CAAA,EACF;ACNK,IAAM,QAAA,GAAW,CAAC,KAAA,qBACvBA,GAAAA,CAAC,SAAI,KAAA,EAAO,EAAA,EAAI,MAAA,EAAQ,EAAA,EAAI,OAAA,EAAQ,WAAA,EAAY,MAAK,MAAA,EAAO,KAAA,EAAM,4BAAA,EAA8B,GAAG,KAAA,EACjG,QAAA,kBAAAA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,kGAAA,EAAmG,IAAA,EAAK,cAAA,EAAe,CAAA,EACjI;ACHK,IAAM,qBAAqB,CAAC,KAAA,qBACjCA,GAAAA,CAAC,KAAA,EAAA,EAAI,OAAO,GAAA,EAAK,MAAA,EAAQ,GAAA,EAAK,OAAA,EAAQ,eAAc,IAAA,EAAK,MAAA,EAAO,OAAM,4BAAA,EAA8B,GAAG,OACrG,QAAA,kBAAAA,GAAAA;AAAA,EAAC,MAAA;AAAA,EAAA;AAAA,IACC,CAAA,EAAE,uJAAA;AAAA,IACF,MAAA,EAAO,cAAA;AAAA,IACP,WAAA,EAAa,CAAA;AAAA,IACb,aAAA,EAAc;AAAA;AAChB,CAAA,EACF;ACRK,IAAM,oBAAoB,CAAC,KAAA,qBAChCA,GAAAA,CAAC,KAAA,EAAA,EAAI,OAAO,EAAA,EAAI,MAAA,EAAQ,EAAA,EAAI,OAAA,EAAQ,aAAY,IAAA,EAAK,MAAA,EAAO,OAAM,4BAAA,EAA8B,GAAG,OACjG,QAAA,kBAAAA,GAAAA;AAAA,EAAC,MAAA;AAAA,EAAA;AAAA,IACC,CAAA,EAAE,8GAAA;AAAA,IACF,MAAA,EAAO,cAAA;AAAA,IACP,WAAA,EAAa,CAAA;AAAA,IACb,aAAA,EAAc;AAAA;AAChB,CAAA,EACF;ACRK,IAAM,yBAAA,GAA4B,CAAC,KAAA,qBACxCA,GAAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,KAAA,EAAM,KAAA;AAAA,IACN,MAAA,EAAO,KAAA;AAAA,IACP,OAAA,EAAQ,WAAA;AAAA,IACR,IAAA,EAAK,MAAA;AAAA,IACL,KAAA,EAAM,4BAAA;AAAA,IACL,GAAG,KAAA;AAAA,IAEJ,QAAA,kBAAAA,GAAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,CAAA,EAAE,kgBAAA;AAAA,QACF,IAAA,EAAK;AAAA;AAAA;AACP;AACF","file":"chunk-65JI3EPO.mjs","sourcesContent":["import { SVGProps } from \"react\";\r\n\r\nexport const IconCheck = (props: SVGProps<SVGSVGElement>) => (\r\n <svg width={64} height={64} viewBox=\"0 0 64 64\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\r\n <path\r\n 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\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n);\r\n\r\nexport default IconCheck;\r\n","import { SVGProps } from \"react\";\r\n\r\nexport const IconInfo = (props: SVGProps<SVGSVGElement>) => (\r\n <svg width={16} height={16} viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\r\n <path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\" fill=\"currentColor\" />\r\n </svg>\r\n);\r\n\r\nexport default IconInfo;\r\n","import { SVGProps } from \"react\";\r\n\r\nexport const IconSpinnerDesktop = (props: SVGProps<SVGSVGElement>) => (\r\n <svg width={102} height={102} viewBox=\"0 0 102 102\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\r\n <path\r\n 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\"\r\n stroke=\"currentColor\"\r\n strokeWidth={6}\r\n strokeLinecap=\"round\"\r\n />\r\n </svg>\r\n);\r\n\r\nexport default IconSpinnerDesktop;\r\n","import { SVGProps } from \"react\";\r\n\r\nexport const IconSpinnerMobile = (props: SVGProps<SVGSVGElement>) => (\r\n <svg width={33} height={33} viewBox=\"0 0 33 33\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" {...props}>\r\n <path\r\n d=\"M16.5 3C8.87169 2.9997 2.99992 9.07499 3 16.5C3.00008 23.385 8.45721 30 16.5 30C23.9822 30 30 23.925 30 16.5\"\r\n stroke=\"currentColor\"\r\n strokeWidth={6}\r\n strokeLinecap=\"round\"\r\n />\r\n </svg>\r\n);\r\n\r\nexport default IconSpinnerMobile;\r\n","import type { SVGProps } from \"react\";\r\n\r\nexport const IconWarningNotRecommended = (props: SVGProps<SVGSVGElement>) => (\r\n <svg\r\n width=\"1em\"\r\n height=\"1em\"\r\n viewBox=\"0 0 49 42\"\r\n fill=\"none\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n {...props}\r\n >\r\n <path\r\n d=\"M0 42L24.5 0L49 42H0ZM7.68409 37.5789H41.3159L24.5 8.84211L7.68409 37.5789ZM24.5 35.3684C25.1311 35.3684 25.6604 35.1562 26.088 34.7318C26.5157 34.3074 26.7288 33.7827 26.7273 33.1579C26.7273 32.5316 26.5135 32.0062 26.0858 31.5818C25.6582 31.1574 25.1296 30.9459 24.5 30.9474C23.8689 30.9474 23.3396 31.1596 22.912 31.584C22.4843 32.0084 22.2712 32.5331 22.2727 33.1579C22.2727 33.7842 22.4865 34.3096 22.9142 34.734C23.3418 35.1584 23.8704 35.3699 24.5 35.3684ZM22.2727 28.7368H26.7273V17.6842H22.2727V28.7368Z\"\r\n fill=\"currentColor\"\r\n />\r\n </svg>\r\n);\r\n\r\nexport default IconWarningNotRecommended;\r\n"]}
@@ -1,107 +0,0 @@
1
- import { IconSpinnerDesktop, IconSpinnerMobile } from './chunk-65JI3EPO.mjs';
2
- import { Modal } from './chunk-EZQGWVW2.mjs';
3
- import { jsx, jsxs } from 'react/jsx-runtime';
4
- import { useState, useEffect } from 'react';
5
-
6
- var colorClasses = {
7
- blue: "bg-onpe-blue",
8
- skyblue: "bg-onpe-skyblue",
9
- "skyblue-light": "bg-onpe-skyblue-light",
10
- yellow: "bg-onpe-yellow",
11
- "light-skyblue": "bg-onpe-light-skyblue",
12
- gray: "bg-onpe-gray",
13
- "gray-light": "bg-onpe-gray-light",
14
- "gray-extra-light": "bg-onpe-gray-extra-light",
15
- red: "bg-onpe-red",
16
- "dark-gray": "bg-onpe-dark-gray",
17
- green: "bg-onpe-green",
18
- "yellow-light": "bg-onpe-yellow-light",
19
- primary: "bg-onpe-blue"
20
- };
21
- var sizeClasses = {
22
- small: "h-10 text-sm",
23
- normal: "h-12 text-base",
24
- large: "h-14 text-lg"
25
- };
26
- function Button({
27
- color,
28
- title,
29
- size = "normal",
30
- className = "",
31
- ...props
32
- }) {
33
- return /* @__PURE__ */ jsx(
34
- "button",
35
- {
36
- className: [
37
- "inline-flex items-center justify-center",
38
- "min-w-[200px] border-none",
39
- "text-white font-semibold cursor-pointer",
40
- "transition-all duration-300 ease-in-out",
41
- "disabled:cursor-default disabled:!bg-onpe-gray",
42
- colorClasses[color],
43
- sizeClasses[size],
44
- className
45
- ].filter(Boolean).join(" "),
46
- ...props,
47
- children: title
48
- }
49
- );
50
- }
51
- var ModalLoading = ({
52
- isOpen = false,
53
- onClose = () => {
54
- },
55
- message = "Cargando...",
56
- className = "",
57
- zIndexLevel = 100
58
- }) => {
59
- const [announceMessage, setAnnounceMessage] = useState("");
60
- useEffect(() => {
61
- if (!isOpen) {
62
- setAnnounceMessage("");
63
- return;
64
- }
65
- setAnnounceMessage("");
66
- const t = globalThis.setTimeout(() => {
67
- setAnnounceMessage(message);
68
- }, 150);
69
- return () => {
70
- globalThis.clearTimeout(t);
71
- };
72
- }, [isOpen, message]);
73
- return /* @__PURE__ */ jsxs(
74
- Modal,
75
- {
76
- disableFocus: true,
77
- zIndexLevel,
78
- isOpen,
79
- onClose,
80
- className,
81
- closeDisabled: true,
82
- whitoutBackground: true,
83
- children: [
84
- /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "assertive", "aria-atomic": "true", children: announceMessage }),
85
- /* @__PURE__ */ jsx(
86
- IconSpinnerDesktop,
87
- {
88
- className: "hidden md:block text-white animate-spin",
89
- "aria-hidden": "true"
90
- }
91
- ),
92
- /* @__PURE__ */ jsx(
93
- IconSpinnerMobile,
94
- {
95
- className: "block md:hidden text-white animate-spin",
96
- "aria-hidden": "true"
97
- }
98
- ),
99
- /* @__PURE__ */ jsx("p", { className: "text-white leading-normal text-2xl md:text-[64px] text-center mt-10 md:mt-20", children: message })
100
- ]
101
- }
102
- );
103
- };
104
-
105
- export { Button, ModalLoading };
106
- //# sourceMappingURL=chunk-7T7V5NBO.mjs.map
107
- //# sourceMappingURL=chunk-7T7V5NBO.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/Button/Button.tsx","../src/components/Feedback/ModalLoading/ModalLoading.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-7T7V5NBO.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 { 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}\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}: 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 >\r\n <div className=\"sr-only\" aria-live=\"assertive\" aria-atomic=\"true\">\r\n {announceMessage}\r\n </div>\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 <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"]}