@soyfri/shared-library 4.1.0 → 4.1.1-beta.3

package/README.md

@@ -267,14 +267,126 @@ const { copy, CopyMessage } = useClipboard({ message: 'Copiado', severity: 'succ
 
 ```bash
 npm install
-npm run dev          # build en watch (tsup)
-npm run storybook    # Storybook en :6006 (documentación interactiva, 260+ stories)
-npm run build        # build de producción (vite + postbuild genera subpaths en dist/)
+npm run dev          # vite build --mode lib --watch (rebuild incremental)
+npm run storybook    # Storybook en :6006 (documentación interactiva)
+npm run build        # build de producción (vite; el postbuild arma el dist/package.json)
+npm test             # vitest run: levanta chromium y corre el play de cada story
+npm run lint         # eslint (flat config v9)
 ```
 
+Las **stories son los tests**: Vitest corre las stories de Storybook en un browser real
+(Playwright, chromium headless). No hay suite de tests fuera de las stories.
+
+## Revisión de PRs con `@claude`
+
+Reemplaza el review de Copilot. Claude **no revisa solo**: responde cuando alguien lo menciona en un comentario de un PR, de un issue o de un review. Si nadie lo menciona, no consume nada.
+
+### Cómo se pide
+
+La mención es el disparador; lo que escribís después es la instrucción. Cuanto
+más concreta, mejor sale el review.
+
+```text
+@claude
+```
+Review general del PR. Es lo más parecido a Copilot y **lo que peor rinde en un
+PR grande**: lee una parte y opina en general.
+
+```text
+@claude ¿el exports map de build.js cubre todos los subpaths que genera vite.config.js?
+```
+Contesta esa pregunta concreta. Es donde mejor rinde.
+
+```text
+@claude revisá si este PR rompe algún contrato público: props que desaparecen,
+componentes nuevos que faltan en src/index.ts, dependencias nuevas que no estén
+en peerDependencies.
+```
+Un review acotado a un eje. Podés pedirle varios, de a uno por comentario.
+
+```text
+@claude ¿este componente re-renderiza de más? Mirá los sx y los callbacks inline.
+```
+
+```text
+@claude ¿cómo agregarías el forwardRef que falta en Gallery?
+```
+Te propone el cambio, pero **no lo aplica**: el workflow le da `contents: read`,
+así que puede leer todo el repo y no puede pushear nada. Quien edita seguís siendo vos.
+
+### Cómo pedirlo en un PR grande
+
+En un PR de cien archivos no le pidas "revisá el PR". Tiene un tope de turnos y
+se le va a ir leyendo archivos sin llegar a lo que importa. Dos formas de
+aprovecharlo:
+
+1. **Inline, sobre la línea del diff.** Es la mejor: sabe exactamente de qué
+   línea le hablás, no tiene que buscarla, y el review sale enfocado y barato.
+2. **Un eje por comentario.** Uno para contratos públicos, otro para
+   re-renders, otro para los tests que faltan. Tres comentarios acotados dan
+   mucho mejor resultado que uno que pide todo junto.
+
+También podés acotarlo vos: *"revisá sólo `src/components/Table/`"*.
+
+### Dónde comentar
+
+- **En el hilo del PR** → contexto del PR entero.
+- **Inline, sobre una línea del diff** → sabe exactamente de qué línea le
+  hablás. Para algo puntual es mejor y mucho más barato.
+
+### Qué revisa
+
+El checklist vive en [`.github/claude-review.md`](.github/claude-review.md) y se
+edita ahí, sin tocar el workflow. Hoy cubre, en orden de prioridad:
+
+1. **Contratos públicos** — props que desaparecen o pasan a requeridas,
+   componentes nuevos que faltan en la lista manual de `src/index.ts`, los
+   subpaths, el `exports` map, `mui.ts` como pass-through, la versión sin
+   bumpear, y **dependencias nuevas que no estén en `peerDependencies`** (se
+   bundlearían dentro del paquete y el consumidor terminaría con dos copias).
+2. **Tests** — no los corre; avisa si faltan. Stories ausentes, `play` sin sus
+   dos `step`, queries que no van por rol, un `action` usado como si fuera un spy.
+3. **Re-renders** — `sx` y callbacks inline, deps mal puestas, estado demasiado
+   arriba, value de Context reconstruido en cada render.
+4. **Legibilidad**, **genéricos** donde el tipo se está perdiendo, y
+   **accesibilidad** más allá de lo que ya ve el lint.
+5. **Código sin usar** — verificando antes con `grep`, porque en un paquete
+   publicado algo puede estar exportado a propósito.
+
+**No corre el build ni los tests.** Sería lento y `component-tests.yml` ya es el
+gate del PR: en vez de correrlos, lee cómo les fue y lo reporta.
+
+### Qué esperar
+
+Aparece un comentario de `github-actions[bot]` que se va actualizando mientras
+trabaja. Podés seguir el hilo respondiéndole con otro `@claude`.
+
+Arranca con un resumen de qué hace el PR y después separa lo bloqueante de lo
+que es sugerencia. Va a encontrar cosas reales y también falsos positivos, los
+dos con el mismo tono de seguridad. Es un primer lector, no una autoridad: quien
+decide sigue siendo quien revisa.
+
+### Qué lee
+
+El `CLAUDE.md` de este repo y el checklist de [`.github/claude-review.md`](.github/claude-review.md) en cada corrida, así que aplica las convenciones propias (`mui.ts` como pass-through, `forwardRef`, props que extienden las de MUI, stories como tests). El `~/.claude/CLAUDE.md` de cada dev **no** viaja al runner — por eso el idioma y el puntero a esos dos archivos van fijados en `claude_args` dentro del workflow.
+
+### Configuración
+
+Dos archivos: `.github/workflows/claude.yml` (el workflow) y [`.github/claude-review.md`](.github/claude-review.md) (**qué revisa**). Para cambiar el criterio del review editá el segundo — el YAML no se toca.
+
+Lo único que hay que cargar es el secret `CLAUDE_CODE_OAUTH_TOKEN` (generado con `claude setup-token`). Ese token factura contra la suscripción de quien lo generó, no genera cargo por API: no hay ninguna `ANTHROPIC_API_KEY` en el repo. Los minutos de Actions sí salen de la cuota de la organización.
+
+Para GitHub se usa el `GITHUB_TOKEN` que Actions provee en cada corrida, no la [Claude GitHub App](https://github.com/apps/claude): `soyfrii` exige aprobación de un owner para instalar apps de terceros. A cambio, los comentarios los firma `github-actions[bot]` y un commit hecho por Claude no dispara los otros workflows. Si la App oficial se aprueba algún día, se borra la línea `github_token` y pasa a firmar como `claude[bot]`.
+
+**Solo lectura sobre el código.** `contents: read` hace imposible que Claude pushee un commit — no es una convención, GitHub le rechaza el push. `pull-requests` e `issues` en `write` no permiten tocar código: son los que le dejan escribir el comentario con el review. Además, `--disallowedTools` le bloquea las herramientas de edición de archivos, y el `--allowedTools` sólo le habilita comandos de lectura (`ls`, `cat`, `head`, `tail`, `wc`, `find`, `grep`, `git log/diff/show` y `gh` para leer el PR y sus checks) — sin esa lista no podía recorrer el repo para responder una pregunta concreta. Esos comandos se **suman** a las herramientas base de la action, no las reemplazan.
+
+Topes de costo: `timeout-minutes: 15`, `--max-turns 40`, `concurrency` con `cancel-in-progress`, un `if:` que evita levantar un runner por comentarios que no mencionan `@claude`, y el hecho de que no corra el build ni los tests.
+
+Como el repo es **privado**, sólo colaboradores pueden comentar y por lo tanto disparar una corrida. Si esto se replica a un repo público hay que agregar un filtro por `author_association`, o cualquiera podría consumir la suscripción.
+
 ## Tecnologías
 
-React 18/19 · Material UI v7 · TypeScript 5 · Tailwind CSS 4 · Storybook 9 · Vite/Rollup · Vitest + Playwright.
+React 18/19 · Material UI v7 · MUI X v8 (date pickers) · Emotion · react-hook-form 7 · TypeScript 5.8 · Storybook 10 · Vite 7 · Vitest 4 + Playwright.
 
 ## Licencia
 

package/chunks/{StatusMessage-CV1xnzeu.cjs → StatusMessage-Bl_E83nN.cjs}

@@ -7,6 +7,7 @@ const mergeSx = require("./mergeSx-Dbccoo_H.cjs");
 const iconsMaterial = require("@mui/icons-material");
 const StatusMessage = React.forwardRef(
   function StatusMessage2(inProps, ref) {
+    var _a;
     const props = styles.useThemeProps({ props: inProps, name: "FriStatusMessage" });
     const {
       title,
@@ -27,8 +28,13 @@ const StatusMessage = React.forwardRef(
       if (!isControlled) setInternalOpen(false);
       close == null ? void 0 : close();
     };
-    const alertVariant = messageType === "danger" ? "error" : messageType;
-    const icon = messageType === "success" ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.CheckCircleOutline, { sx: { fontSize: 64, color: "success.main" } }) : messageType === "danger" ? /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ErrorOutline, { sx: { fontSize: 64, color: "error.main" } }) : /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.WarningAmber, { sx: { fontSize: 64, color: "warning.main" } });
+    const MESSAGE_TYPES = {
+      success: { severity: "success", Icon: iconsMaterial.CheckCircleOutline, color: "success.main" },
+      danger: { severity: "error", Icon: iconsMaterial.ErrorOutline, color: "error.main" },
+      warning: { severity: "warning", Icon: iconsMaterial.WarningAmber, color: "warning.main" }
+    };
+    const DEFAULT_MESSAGE_TYPE = "success";
+    const { severity, Icon, color } = (_a = MESSAGE_TYPES[messageType]) != null ? _a : MESSAGE_TYPES[DEFAULT_MESSAGE_TYPE];
     if (!description) return null;
     if (!isOpen) return null;
     if (displayType === "modal") {
@@ -61,7 +67,7 @@ const StatusMessage = React.forwardRef(
                   gap: 2
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 2 }, children: icon }),
+                  /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mb: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { sx: { fontSize: 64, color } }) }),
                   title && /* @__PURE__ */ jsxRuntime.jsx(
                     material.Typography,
                     {
@@ -76,7 +82,7 @@ const StatusMessage = React.forwardRef(
                 ]
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(material.DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleClose, variant: "contained", color: alertVariant, children: "Aceptar" }) })
+            /* @__PURE__ */ jsxRuntime.jsx(material.DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Button, { onClick: handleClose, variant: "contained", color: severity, children: "Aceptar" }) })
           ]
         }
       );
@@ -86,16 +92,17 @@ const StatusMessage = React.forwardRef(
       {
         ref,
         className,
-        severity: alertVariant,
+        severity,
         sx: mergeSx.mergeSx({ mb: 2, mt: 2 }, sx),
+        variant: "outlined",
         onClose: close !== void 0 ? handleClose : void 0,
         children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: title }),
-          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", sx: { mt: 1 }, children: description })
+          title && /* @__PURE__ */ jsxRuntime.jsx(material.AlertTitle, { children: title }),
+          description
         ]
       }
     );
   }
 );
 exports.StatusMessage = StatusMessage;
-//# sourceMappingURL=StatusMessage-CV1xnzeu.cjs.map
+//# sourceMappingURL=StatusMessage-Bl_E83nN.cjs.map

package/chunks/StatusMessage-Bl_E83nN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusMessage-Bl_E83nN.cjs","sources":["../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from 'react';\nimport {\n  Alert,\n  Box,\n  Typography,\n  Dialog,\n  DialogContent,\n  DialogActions,\n  Button,\n  AlertTitle,\n} from '@mui/material';\nimport { useThemeProps, type SxProps, type Theme } from '@mui/material/styles';\n\nimport { mergeSx } from '../_shared/mergeSx';\nimport {\n  ErrorOutline as ErrorOutlineIcon,\n  CheckCircleOutline as CheckCircleOutlineIcon,\n  WarningAmber as WarningAmberIcon,\n} from '@mui/icons-material';\n\nexport interface StatusMessageProps {\n  /** Título del mensaje. */\n  title?: string;\n  /** Descripción/contenido detallado. Requerido para que el componente renderice. */\n  description?: string;\n  /** Tipo de mensaje (controla color + icono). `danger` mapea a `error` de MUI. */\n  messageType?: 'success' | 'danger' | 'warning';\n  /** Forma de presentación: alerta inline o modal. Default: `'alert'`. */\n  displayType?: 'alert' | 'modal';\n  /** Callback al cerrar. Si se omite, no se muestra botón de cerrar. */\n  close?: () => void;\n  /**\n   * Controla visibilidad. Si se omite, el componente maneja su propio\n   * state (se oculta solo al llamar `close`). Si se pasa, queda controlled\n   * y el consumer es responsable de actualizarlo.\n   */\n  open?: boolean;\n  /**\n   * sx del nodo raíz: el `Alert` en modo `alert`, el `Dialog` en modo `modal`.\n   * Antes el componente no aceptaba ni `sx` ni `className`, así que ajustar su\n   * separación desde el call-site era imposible.\n   */\n  sx?: SxProps<Theme>;\n  className?: string;\n}\n\n/**\n * Mensaje de éxito / error / advertencia en forma de alerta inline o modal.\n *\n * - **Uncontrolled**: sin pasar `open`, el componente maneja su propia\n *   visibilidad. Al llamar `close`, se oculta automáticamente.\n * - **Controlled**: pasando `open`, el consumer decide cuándo mostrar/ocultar.\n */\nexport const StatusMessage = forwardRef<HTMLDivElement, StatusMessageProps>(\n  function StatusMessage(inProps, ref) {\n  const props = useThemeProps({ props: inProps, name: 'FriStatusMessage' });\n  const {\n    title,\n    description,\n    messageType = 'success',\n    displayType = 'alert',\n    close,\n    open: controlledOpen,\n    sx,\n    className,\n  } = props;\n  const [internalOpen, setInternalOpen] = useState(true);\n  const titleId = useId();\n  const descId = useId();\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const handleClose = () => {\n    if (!isControlled) setInternalOpen(false);\n    close?.();\n  };\n\n   const MESSAGE_TYPES = {\n      success: { severity: \"success\", Icon: CheckCircleOutlineIcon, color: \"success.main\" },\n      danger: { severity: \"error\", Icon: ErrorOutlineIcon, color: \"error.main\" },\n      warning: { severity: \"warning\", Icon: WarningAmberIcon, color: \"warning.main\" },\n   } as const;\n   const DEFAULT_MESSAGE_TYPE: keyof typeof MESSAGE_TYPES = \"success\";\n\n   const { severity, Icon, color } = MESSAGE_TYPES[messageType] ?? MESSAGE_TYPES[DEFAULT_MESSAGE_TYPE];\n\n  if (!description) return null;\n  if (!isOpen) return null;\n\n  if (displayType === 'modal') {\n    return (\n      <Dialog\n        ref={ref}\n        className={className}\n        sx={sx}\n        open={isOpen}\n        onClose={handleClose}\n        aria-labelledby={title ? titleId : undefined}\n        aria-describedby={descId}\n        maxWidth=\"md\"\n        slotProps={{\n          paper: {\n            sx: { borderRadius: '16px', p: 2 },\n          },\n        }}\n      >\n        <DialogContent\n          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'center',\n            textAlign: 'center',\n            p: 4,\n            gap: 2,\n          }}\n        >\n          <Box sx={{ mb: 2 }}>\n            <Icon sx={{ fontSize: 64, color }} />\n         </Box>\n          {title && (\n            <Typography\n              id={titleId}\n              variant=\"h4\"\n              component=\"h2\"\n              sx={{ fontWeight: 'bold' }}\n            >\n              {title}\n            </Typography>\n          )}\n          <Typography id={descId} variant=\"body1\" color=\"text.secondary\">\n            {description}\n          </Typography>\n        </DialogContent>\n        <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n          <Button onClick={handleClose} variant=\"contained\" color={severity}>\n            Aceptar\n          </Button>\n        </DialogActions>\n      </Dialog>\n    );\n  }\n\n  return (\n    <Alert\n      ref={ref}\n      className={className}\n      severity={severity}\n      sx={mergeSx({ mb: 2, mt: 2 }, sx)}\n      variant={'outlined'}\n      onClose={close !== undefined ? handleClose : undefined}\n    >\n      {title && (\n        <AlertTitle>\n            {title}\n        </AlertTitle>\n      )}\n      {description}\n    </Alert>\n  );\n  },\n);\n\nexport default StatusMessage;\n"],"names":["forwardRef","StatusMessage","useThemeProps","useState","useId","CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon","jsxs","Dialog","DialogContent","jsx","Box","Typography","DialogActions","Button","Alert","mergeSx","AlertTitle"],"mappings":"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"}

package/chunks/{StatusMessage-B0oqiu3w.mjs → StatusMessage-Pa5IutUR.mjs}

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useId } from "react";
-import { Dialog, DialogContent, Box, Typography, DialogActions, Button, Alert } from "@mui/material";
+import { Dialog, DialogContent, Box, Typography, DialogActions, Button, Alert, AlertTitle } from "@mui/material";
 import { useThemeProps } from "@mui/material/styles";
 import { m as mergeSx } from "./mergeSx-BXoNZjB_.mjs";
-import { CheckCircleOutline, ErrorOutline, WarningAmber } from "@mui/icons-material";
+import { WarningAmber, ErrorOutline, CheckCircleOutline } from "@mui/icons-material";
 const StatusMessage = forwardRef(
   function StatusMessage2(inProps, ref) {
+    var _a;
     const props = useThemeProps({ props: inProps, name: "FriStatusMessage" });
     const {
       title,
@@ -26,8 +27,13 @@ const StatusMessage = forwardRef(
       if (!isControlled) setInternalOpen(false);
       close == null ? void 0 : close();
     };
-    const alertVariant = messageType === "danger" ? "error" : messageType;
-    const icon = messageType === "success" ? /* @__PURE__ */ jsx(CheckCircleOutline, { sx: { fontSize: 64, color: "success.main" } }) : messageType === "danger" ? /* @__PURE__ */ jsx(ErrorOutline, { sx: { fontSize: 64, color: "error.main" } }) : /* @__PURE__ */ jsx(WarningAmber, { sx: { fontSize: 64, color: "warning.main" } });
+    const MESSAGE_TYPES = {
+      success: { severity: "success", Icon: CheckCircleOutline, color: "success.main" },
+      danger: { severity: "error", Icon: ErrorOutline, color: "error.main" },
+      warning: { severity: "warning", Icon: WarningAmber, color: "warning.main" }
+    };
+    const DEFAULT_MESSAGE_TYPE = "success";
+    const { severity, Icon, color } = (_a = MESSAGE_TYPES[messageType]) != null ? _a : MESSAGE_TYPES[DEFAULT_MESSAGE_TYPE];
     if (!description) return null;
     if (!isOpen) return null;
     if (displayType === "modal") {
@@ -60,7 +66,7 @@ const StatusMessage = forwardRef(
                   gap: 2
                 },
                 children: [
-                  /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: icon }),
+                  /* @__PURE__ */ jsx(Box, { sx: { mb: 2 }, children: /* @__PURE__ */ jsx(Icon, { sx: { fontSize: 64, color } }) }),
                   title && /* @__PURE__ */ jsx(
                     Typography,
                     {
@@ -75,7 +81,7 @@ const StatusMessage = forwardRef(
                 ]
               }
             ),
-            /* @__PURE__ */ jsx(DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, variant: "contained", color: alertVariant, children: "Aceptar" }) })
+            /* @__PURE__ */ jsx(DialogActions, { sx: { justifyContent: "center", p: 2 }, children: /* @__PURE__ */ jsx(Button, { onClick: handleClose, variant: "contained", color: severity, children: "Aceptar" }) })
           ]
         }
       );
@@ -85,12 +91,13 @@ const StatusMessage = forwardRef(
       {
         ref,
         className,
-        severity: alertVariant,
+        severity,
         sx: mergeSx({ mb: 2, mt: 2 }, sx),
+        variant: "outlined",
         onClose: close !== void 0 ? handleClose : void 0,
         children: [
-          title && /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { fontWeight: "bold" }, children: title }),
-          /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { mt: 1 }, children: description })
+          title && /* @__PURE__ */ jsx(AlertTitle, { children: title }),
+          description
         ]
       }
     );
@@ -99,4 +106,4 @@ const StatusMessage = forwardRef(
 export {
   StatusMessage as S
 };
-//# sourceMappingURL=StatusMessage-B0oqiu3w.mjs.map
+//# sourceMappingURL=StatusMessage-Pa5IutUR.mjs.map

package/chunks/StatusMessage-Pa5IutUR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusMessage-Pa5IutUR.mjs","sources":["../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from 'react';\nimport {\n  Alert,\n  Box,\n  Typography,\n  Dialog,\n  DialogContent,\n  DialogActions,\n  Button,\n  AlertTitle,\n} from '@mui/material';\nimport { useThemeProps, type SxProps, type Theme } from '@mui/material/styles';\n\nimport { mergeSx } from '../_shared/mergeSx';\nimport {\n  ErrorOutline as ErrorOutlineIcon,\n  CheckCircleOutline as CheckCircleOutlineIcon,\n  WarningAmber as WarningAmberIcon,\n} from '@mui/icons-material';\n\nexport interface StatusMessageProps {\n  /** Título del mensaje. */\n  title?: string;\n  /** Descripción/contenido detallado. Requerido para que el componente renderice. */\n  description?: string;\n  /** Tipo de mensaje (controla color + icono). `danger` mapea a `error` de MUI. */\n  messageType?: 'success' | 'danger' | 'warning';\n  /** Forma de presentación: alerta inline o modal. Default: `'alert'`. */\n  displayType?: 'alert' | 'modal';\n  /** Callback al cerrar. Si se omite, no se muestra botón de cerrar. */\n  close?: () => void;\n  /**\n   * Controla visibilidad. Si se omite, el componente maneja su propio\n   * state (se oculta solo al llamar `close`). Si se pasa, queda controlled\n   * y el consumer es responsable de actualizarlo.\n   */\n  open?: boolean;\n  /**\n   * sx del nodo raíz: el `Alert` en modo `alert`, el `Dialog` en modo `modal`.\n   * Antes el componente no aceptaba ni `sx` ni `className`, así que ajustar su\n   * separación desde el call-site era imposible.\n   */\n  sx?: SxProps<Theme>;\n  className?: string;\n}\n\n/**\n * Mensaje de éxito / error / advertencia en forma de alerta inline o modal.\n *\n * - **Uncontrolled**: sin pasar `open`, el componente maneja su propia\n *   visibilidad. Al llamar `close`, se oculta automáticamente.\n * - **Controlled**: pasando `open`, el consumer decide cuándo mostrar/ocultar.\n */\nexport const StatusMessage = forwardRef<HTMLDivElement, StatusMessageProps>(\n  function StatusMessage(inProps, ref) {\n  const props = useThemeProps({ props: inProps, name: 'FriStatusMessage' });\n  const {\n    title,\n    description,\n    messageType = 'success',\n    displayType = 'alert',\n    close,\n    open: controlledOpen,\n    sx,\n    className,\n  } = props;\n  const [internalOpen, setInternalOpen] = useState(true);\n  const titleId = useId();\n  const descId = useId();\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const handleClose = () => {\n    if (!isControlled) setInternalOpen(false);\n    close?.();\n  };\n\n   const MESSAGE_TYPES = {\n      success: { severity: \"success\", Icon: CheckCircleOutlineIcon, color: \"success.main\" },\n      danger: { severity: \"error\", Icon: ErrorOutlineIcon, color: \"error.main\" },\n      warning: { severity: \"warning\", Icon: WarningAmberIcon, color: \"warning.main\" },\n   } as const;\n   const DEFAULT_MESSAGE_TYPE: keyof typeof MESSAGE_TYPES = \"success\";\n\n   const { severity, Icon, color } = MESSAGE_TYPES[messageType] ?? MESSAGE_TYPES[DEFAULT_MESSAGE_TYPE];\n\n  if (!description) return null;\n  if (!isOpen) return null;\n\n  if (displayType === 'modal') {\n    return (\n      <Dialog\n        ref={ref}\n        className={className}\n        sx={sx}\n        open={isOpen}\n        onClose={handleClose}\n        aria-labelledby={title ? titleId : undefined}\n        aria-describedby={descId}\n        maxWidth=\"md\"\n        slotProps={{\n          paper: {\n            sx: { borderRadius: '16px', p: 2 },\n          },\n        }}\n      >\n        <DialogContent\n          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'center',\n            textAlign: 'center',\n            p: 4,\n            gap: 2,\n          }}\n        >\n          <Box sx={{ mb: 2 }}>\n            <Icon sx={{ fontSize: 64, color }} />\n         </Box>\n          {title && (\n            <Typography\n              id={titleId}\n              variant=\"h4\"\n              component=\"h2\"\n              sx={{ fontWeight: 'bold' }}\n            >\n              {title}\n            </Typography>\n          )}\n          <Typography id={descId} variant=\"body1\" color=\"text.secondary\">\n            {description}\n          </Typography>\n        </DialogContent>\n        <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n          <Button onClick={handleClose} variant=\"contained\" color={severity}>\n            Aceptar\n          </Button>\n        </DialogActions>\n      </Dialog>\n    );\n  }\n\n  return (\n    <Alert\n      ref={ref}\n      className={className}\n      severity={severity}\n      sx={mergeSx({ mb: 2, mt: 2 }, sx)}\n      variant={'outlined'}\n      onClose={close !== undefined ? handleClose : undefined}\n    >\n      {title && (\n        <AlertTitle>\n            {title}\n        </AlertTitle>\n      )}\n      {description}\n    </Alert>\n  );\n  },\n);\n\nexport default StatusMessage;\n"],"names":["StatusMessage","CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon"],"mappings":"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"}

package/components/StatusMessage/StatusMessageContext.d.cts

@@ -2,7 +2,9 @@ import { Dispatch, SetStateAction, ReactNode } from 'react';
 import { StatusMessageProps } from './StatusMessage';
 export type StatusMessageState = {
     [K in 'title' | 'description' | 'messageType']: StatusMessageProps[K] | undefined;
-} & Pick<StatusMessageProps, 'displayType'>;
+} & Pick<StatusMessageProps, 'displayType'> & {
+    autoReset?: boolean;
+};
 interface StatusMessageContextValue {
     state: StatusMessageState | undefined;
     setMessage: Dispatch<SetStateAction<StatusMessageState | undefined>>;

package/components/StatusMessage/StatusMessageContext.d.mts

@@ -2,7 +2,9 @@ import { Dispatch, SetStateAction, ReactNode } from 'react';
 import { StatusMessageProps } from './StatusMessage.mjs';
 export type StatusMessageState = {
     [K in 'title' | 'description' | 'messageType']: StatusMessageProps[K] | undefined;
-} & Pick<StatusMessageProps, 'displayType'>;
+} & Pick<StatusMessageProps, 'displayType'> & {
+    autoReset?: boolean;
+};
 interface StatusMessageContextValue {
     state: StatusMessageState | undefined;
     setMessage: Dispatch<SetStateAction<StatusMessageState | undefined>>;

package/components/StatusMessage/StatusMessageContext.d.ts

@@ -2,7 +2,9 @@ import { Dispatch, SetStateAction, ReactNode } from 'react';
 import { StatusMessageProps } from './StatusMessage';
 export type StatusMessageState = {
     [K in 'title' | 'description' | 'messageType']: StatusMessageProps[K] | undefined;
-} & Pick<StatusMessageProps, 'displayType'>;
+} & Pick<StatusMessageProps, 'displayType'> & {
+    autoReset?: boolean;
+};
 interface StatusMessageContextValue {
     state: StatusMessageState | undefined;
     setMessage: Dispatch<SetStateAction<StatusMessageState | undefined>>;

package/components/StatusMessage/StatusMessageRenderer.d.cts

@@ -0,0 +1,28 @@
+/**
+ * Pinta el mensaje vigente del `StatusMessageProvider` en el lugar donde se monte.
+ *
+ * Separa el *disparo* del mensaje (`useStatusMessage().showMessage`, desde un
+ * handler cualquiera) del *lugar* donde se muestra: el consumidor monta un único
+ * `<StatusMessageRenderer />` donde quiere ver el feedback (arriba del form, en
+ * el layout de la página) y no tiene que llevar `state` ni `close` a mano hasta
+ * cada `<StatusMessage>`.
+ *
+ * - Sin mensaje en el contexto renderiza `null`, así que puede quedar montado
+ *   siempre sin reservar espacio.
+ * - `close` se conecta a `clearMessage`: cerrar limpia el contexto y el
+ *   componente se desmonta. Por eso el `StatusMessage` queda en modo
+ *   *uncontrolled* (sin `open`): su visibilidad la decide la existencia del
+ *   `state`, no un booleano aparte.
+ * - El auto-cierre (`autoReset`, 6s) lo resuelve el Provider, no este componente.
+ *
+ * Debe montarse dentro de un `StatusMessageProvider`; fuera de él el contexto
+ * devuelve su valor por defecto (`state: undefined`) y nunca muestra nada, sin
+ * error que lo avise.
+ *
+ * @example
+ * <StatusMessageProvider>
+ *   <StatusMessageRenderer />
+ *   <MiFormulario />   // adentro: useStatusMessage().showMessage({ messageType: 'danger', description })
+ * </StatusMessageProvider>
+ */
+export declare const StatusMessageRenderer: () => import("react/jsx-runtime").JSX.Element | null;

package/components/StatusMessage/StatusMessageRenderer.d.mts

@@ -0,0 +1,28 @@
+/**
+ * Pinta el mensaje vigente del `StatusMessageProvider` en el lugar donde se monte.
+ *
+ * Separa el *disparo* del mensaje (`useStatusMessage().showMessage`, desde un
+ * handler cualquiera) del *lugar* donde se muestra: el consumidor monta un único
+ * `<StatusMessageRenderer />` donde quiere ver el feedback (arriba del form, en
+ * el layout de la página) y no tiene que llevar `state` ni `close` a mano hasta
+ * cada `<StatusMessage>`.
+ *
+ * - Sin mensaje en el contexto renderiza `null`, así que puede quedar montado
+ *   siempre sin reservar espacio.
+ * - `close` se conecta a `clearMessage`: cerrar limpia el contexto y el
+ *   componente se desmonta. Por eso el `StatusMessage` queda en modo
+ *   *uncontrolled* (sin `open`): su visibilidad la decide la existencia del
+ *   `state`, no un booleano aparte.
+ * - El auto-cierre (`autoReset`, 6s) lo resuelve el Provider, no este componente.
+ *
+ * Debe montarse dentro de un `StatusMessageProvider`; fuera de él el contexto
+ * devuelve su valor por defecto (`state: undefined`) y nunca muestra nada, sin
+ * error que lo avise.
+ *
+ * @example
+ * <StatusMessageProvider>
+ *   <StatusMessageRenderer />
+ *   <MiFormulario />   // adentro: useStatusMessage().showMessage({ messageType: 'danger', description })
+ * </StatusMessageProvider>
+ */
+export declare const StatusMessageRenderer: () => import("react/jsx-runtime").JSX.Element | null;

package/components/StatusMessage/StatusMessageRenderer.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Pinta el mensaje vigente del `StatusMessageProvider` en el lugar donde se monte.
+ *
+ * Separa el *disparo* del mensaje (`useStatusMessage().showMessage`, desde un
+ * handler cualquiera) del *lugar* donde se muestra: el consumidor monta un único
+ * `<StatusMessageRenderer />` donde quiere ver el feedback (arriba del form, en
+ * el layout de la página) y no tiene que llevar `state` ni `close` a mano hasta
+ * cada `<StatusMessage>`.
+ *
+ * - Sin mensaje en el contexto renderiza `null`, así que puede quedar montado
+ *   siempre sin reservar espacio.
+ * - `close` se conecta a `clearMessage`: cerrar limpia el contexto y el
+ *   componente se desmonta. Por eso el `StatusMessage` queda en modo
+ *   *uncontrolled* (sin `open`): su visibilidad la decide la existencia del
+ *   `state`, no un booleano aparte.
+ * - El auto-cierre (`autoReset`, 6s) lo resuelve el Provider, no este componente.
+ *
+ * Debe montarse dentro de un `StatusMessageProvider`; fuera de él el contexto
+ * devuelve su valor por defecto (`state: undefined`) y nunca muestra nada, sin
+ * error que lo avise.
+ *
+ * @example
+ * <StatusMessageProvider>
+ *   <StatusMessageRenderer />
+ *   <MiFormulario />   // adentro: useStatusMessage().showMessage({ messageType: 'danger', description })
+ * </StatusMessageProvider>
+ */
+export declare const StatusMessageRenderer: () => import("react/jsx-runtime").JSX.Element | null;

package/components/StatusMessage/index.cjs

@@ -1,6 +1,37 @@
 "use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const StatusMessage = require("../../chunks/StatusMessage-CV1xnzeu.cjs");
+const StatusMessage = require("../../chunks/StatusMessage-Bl_E83nN.cjs");
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const initialValues = {
@@ -14,13 +45,45 @@ const StatusMessageContext = React.createContext(initialValues);
 const useStatusMessageContext = () => React.useContext(StatusMessageContext);
 const StatusMessageProvider = ({ children }) => {
   const [stateMessage, setMessage] = React.useState(void 0);
-  const cleanMessage = () => {
+  const cleanMessage = React.useCallback(() => {
     setMessage(void 0);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(StatusMessageContext.Provider, { value: { setMessage, cleanMessage, state: stateMessage }, children });
+  }, []);
+  const value = React.useMemo(
+    () => ({ setMessage, cleanMessage, state: stateMessage }),
+    [cleanMessage, stateMessage]
+  );
+  React.useEffect(() => {
+    if (!stateMessage || stateMessage.autoReset === false) return;
+    const timeout = setTimeout(() => {
+      setMessage(void 0);
+    }, 6e3);
+    return () => clearTimeout(timeout);
+  }, [stateMessage]);
+  return /* @__PURE__ */ jsxRuntime.jsx(StatusMessageContext.Provider, { value, children });
+};
+const useStatusMessage = () => {
+  const { state, setMessage, cleanMessage } = useStatusMessageContext();
+  const showMessage = React.useCallback(
+    (_a) => {
+      var _b = _a, { displayType = "alert", autoReset = true, title } = _b, rest = __objRest(_b, ["displayType", "autoReset", "title"]);
+      setMessage(__spreadProps(__spreadValues({}, rest), { title, displayType, autoReset }));
+    },
+    [setMessage]
+  );
+  return React.useMemo(
+    () => ({ state, showMessage, clearMessage: cleanMessage }),
+    [state, showMessage, cleanMessage]
+  );
+};
+const StatusMessageRenderer = () => {
+  const { state, clearMessage } = useStatusMessage();
+  if (!state) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(StatusMessage.StatusMessage, __spreadProps(__spreadValues({}, state), { close: clearMessage }));
 };
 exports.StatusMessage = StatusMessage.StatusMessage;
 exports.default = StatusMessage.StatusMessage;
 exports.StatusMessageProvider = StatusMessageProvider;
+exports.StatusMessageRenderer = StatusMessageRenderer;
+exports.useStatusMessage = useStatusMessage;
 exports.useStatusMessageContext = useStatusMessageContext;
 //# sourceMappingURL=index.cjs.map

package/components/StatusMessage/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/components/StatusMessage/StatusMessageContext.tsx"],"sourcesContent":["import {\n  createContext,\n  useState,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n  type ReactNode,\n} from 'react';\nimport type { StatusMessageProps } from './StatusMessage';\n\nexport type StatusMessageState = {\n  [K in 'title' | 'description' | 'messageType']: StatusMessageProps[K] | undefined;\n} & Pick<StatusMessageProps, 'displayType'>;\n\ninterface StatusMessageContextValue {\n  state: StatusMessageState | undefined;\n  setMessage: Dispatch<SetStateAction<StatusMessageState | undefined>>;\n  cleanMessage: () => void;\n}\n\nconst initialValues: StatusMessageContextValue = {\n  state: undefined,\n  setMessage: () => {},\n  cleanMessage: () => {},\n};\n\nconst StatusMessageContext = createContext<StatusMessageContextValue>(initialValues);\n\nexport const useStatusMessageContext = () => useContext(StatusMessageContext);\n\ninterface StatusMessageProviderProps {\n  children: ReactNode;\n}\n\nexport const StatusMessageProvider = ({ children }: StatusMessageProviderProps) => {\n  const [stateMessage, setMessage] = useState<StatusMessageState | undefined>(undefined);\n  const cleanMessage = () => {\n    setMessage(undefined);\n  };\n\n  return (\n    <StatusMessageContext.Provider value={{ setMessage, cleanMessage, state: stateMessage }}>\n      {children}\n    </StatusMessageContext.Provider>\n  );\n};\n"],"names":["createContext","useContext","useState","jsx"],"mappings":";;;;;AAoBA,MAAM,gBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,cAAc,MAAM;AAAA,EAAC;AACvB;AAEA,MAAM,uBAAuBA,MAAAA,cAAyC,aAAa;AAE5E,MAAM,0BAA0B,MAAMC,MAAAA,WAAW,oBAAoB;AAMrE,MAAM,wBAAwB,CAAC,EAAE,eAA2C;AACjF,QAAM,CAAC,cAAc,UAAU,IAAIC,MAAAA,SAAyC,MAAS;AACrF,QAAM,eAAe,MAAM;AACzB,eAAW,MAAS;AAAA,EACtB;AAEA,SACEC,+BAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,YAAY,cAAc,OAAO,aAAA,GACtE,SAAA,CACH;AAEJ;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/components/StatusMessage/StatusMessageContext.tsx","../../../src/components/StatusMessage/useStatusMessage.ts","../../../src/components/StatusMessage/StatusMessageRenderer.tsx"],"sourcesContent":["import {\n  createContext,\n  useState,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n  type ReactNode,\n  useEffect,\n  useCallback,\n  useMemo,\n} from 'react';\nimport type { StatusMessageProps } from './StatusMessage';\n\nexport type StatusMessageState = {\n  [K in 'title' | 'description' | 'messageType']: StatusMessageProps[K] | undefined;\n} & Pick<StatusMessageProps, 'displayType'> & {\n      autoReset?: boolean;\n   };\n\ninterface StatusMessageContextValue {\n  state: StatusMessageState | undefined;\n  setMessage: Dispatch<SetStateAction<StatusMessageState | undefined>>;\n  cleanMessage: () => void;\n}\n\nconst initialValues: StatusMessageContextValue = {\n  state: undefined,\n  setMessage: () => {},\n  cleanMessage: () => {},\n};\n\nconst StatusMessageContext = createContext<StatusMessageContextValue>(initialValues);\n\nexport const useStatusMessageContext = () => useContext(StatusMessageContext);\n\ninterface StatusMessageProviderProps {\n  children: ReactNode;\n}\n\nexport const StatusMessageProvider = ({ children }: StatusMessageProviderProps) => {\n  const [stateMessage, setMessage] = useState<StatusMessageState | undefined>(undefined);\n  // Estables para que los consumidores puedan usarlas como deps de un efecto\n  // sin re-dispararlo en cada render del Provider.\n  const cleanMessage = useCallback(() => {\n    setMessage(undefined);\n  }, []);\n  \n  const value = useMemo(\n    () => ({ setMessage, cleanMessage, state: stateMessage }),\n    [cleanMessage, stateMessage],\n  );\n\n   useEffect(() => {\n      if (!stateMessage || stateMessage.autoReset === false) return;\n      const timeout = setTimeout(() => {\n         setMessage(undefined);\n      }, 6000);\n      return () => clearTimeout(timeout);\n   }, [stateMessage]);\n\n  return (\n    <StatusMessageContext.Provider value={value}>\n      {children}\n    </StatusMessageContext.Provider>\n  );\n};\n","import { useCallback, useMemo } from \"react\";\nimport { useStatusMessageContext, type StatusMessageState } from \"./StatusMessageContext\";\n\n/**\n * Lo que recibe `showMessage`. Mismos nombres que las props de `StatusMessage`\n * para que lo que entra sea lo que el componente termina recibiendo.\n * `messageType` y `description` son obligatorios: sin tipo no hay color/icono\n * y sin descripción `StatusMessage` no renderiza.\n */\nexport type ShowMessageOptions = {\n   messageType: NonNullable<StatusMessageState[\"messageType\"]>;\n   description: string;\n   title?: string;\n   /** Default: `'alert'`. */\n   displayType?: StatusMessageState[\"displayType\"];\n   /** Si es `true` el Provider limpia el mensaje a los 6s. Default: `true`. */\n   autoReset?: boolean;\n};\n\n/**\n * API recomendada para disparar feedback desde un handler. Se monta sobre el\n * contexto para no exponer el `setMessage` crudo (un `Dispatch` que obliga al\n * consumidor a armar el estado completo) y para centralizar los defaults.\n *\n * Recibe un objeto y no parámetros posicionales: con `title`/`autoReset`\n * opcionales, el orden se volvía ilegible (`fn('Ok', undefined, false)`).\n *\n * `showMessage` y `clearMessage` tienen identidad estable, así que se pueden\n * usar como dependencias de un efecto sin re-dispararlo en cada render.\n *\n * @example\n * const { showMessage } = useStatusMessage();\n * showMessage({ messageType: 'success', description: 'Cambios guardados' });\n */\nexport const useStatusMessage = () => {\n   const { state, setMessage, cleanMessage } = useStatusMessageContext();\n\n   const showMessage = useCallback(\n      ({ displayType = \"alert\", autoReset = true, title, ...rest }: ShowMessageOptions) => {\n         setMessage({ ...rest, title, displayType, autoReset });\n      },\n      [setMessage],\n   );\n\n   return useMemo(\n      () => ({ state, showMessage, clearMessage: cleanMessage }),\n      [state, showMessage, cleanMessage],\n   );\n};\n","import StatusMessage from \"./StatusMessage\";\nimport { useStatusMessage } from \"./useStatusMessage\";\n\n/**\n * Pinta el mensaje vigente del `StatusMessageProvider` en el lugar donde se monte.\n *\n * Separa el *disparo* del mensaje (`useStatusMessage().showMessage`, desde un\n * handler cualquiera) del *lugar* donde se muestra: el consumidor monta un único\n * `<StatusMessageRenderer />` donde quiere ver el feedback (arriba del form, en\n * el layout de la página) y no tiene que llevar `state` ni `close` a mano hasta\n * cada `<StatusMessage>`.\n *\n * - Sin mensaje en el contexto renderiza `null`, así que puede quedar montado\n *   siempre sin reservar espacio.\n * - `close` se conecta a `clearMessage`: cerrar limpia el contexto y el\n *   componente se desmonta. Por eso el `StatusMessage` queda en modo\n *   *uncontrolled* (sin `open`): su visibilidad la decide la existencia del\n *   `state`, no un booleano aparte.\n * - El auto-cierre (`autoReset`, 6s) lo resuelve el Provider, no este componente.\n *\n * Debe montarse dentro de un `StatusMessageProvider`; fuera de él el contexto\n * devuelve su valor por defecto (`state: undefined`) y nunca muestra nada, sin\n * error que lo avise.\n *\n * @example\n * <StatusMessageProvider>\n *   <StatusMessageRenderer />\n *   <MiFormulario />   // adentro: useStatusMessage().showMessage({ messageType: 'danger', description })\n * </StatusMessageProvider>\n */\nexport const StatusMessageRenderer = () => {\n   const { state, clearMessage } = useStatusMessage();\n\n   if (!state) return null;\n\n   return <StatusMessage {...state} close={clearMessage} />;\n};\n"],"names":["createContext","useContext","useState","useCallback","useMemo","useEffect","jsx","StatusMessage"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,gBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,cAAc,MAAM;AAAA,EAAC;AACvB;AAEA,MAAM,uBAAuBA,MAAAA,cAAyC,aAAa;AAE5E,MAAM,0BAA0B,MAAMC,MAAAA,WAAW,oBAAoB;AAMrE,MAAM,wBAAwB,CAAC,EAAE,eAA2C;AACjF,QAAM,CAAC,cAAc,UAAU,IAAIC,MAAAA,SAAyC,MAAS;AAGrF,QAAM,eAAeC,MAAAA,YAAY,MAAM;AACrC,eAAW,MAAS;AAAA,EACtB,GAAG,CAAA,CAAE;AAEL,QAAM,QAAQC,MAAAA;AAAAA,IACZ,OAAO,EAAE,YAAY,cAAc,OAAO,aAAA;AAAA,IAC1C,CAAC,cAAc,YAAY;AAAA,EAAA;AAG5BC,QAAAA,UAAU,MAAM;AACb,QAAI,CAAC,gBAAgB,aAAa,cAAc,MAAO;AACvD,UAAM,UAAU,WAAW,MAAM;AAC9B,iBAAW,MAAS;AAAA,IACvB,GAAG,GAAI;AACP,WAAO,MAAM,aAAa,OAAO;AAAA,EACpC,GAAG,CAAC,YAAY,CAAC;AAElB,SACEC,2BAAAA,IAAC,qBAAqB,UAArB,EAA8B,OAC5B,SAAA,CACH;AAEJ;AC/BO,MAAM,mBAAmB,MAAM;AACnC,QAAM,EAAE,OAAO,YAAY,aAAA,IAAiB,wBAAA;AAE5C,QAAM,cAAcH,MAAAA;AAAAA,IACjB,CAAC,OAAoF;AAApF,mBAAE,gBAAc,SAAS,YAAY,MAAM,UAA3C,IAAqD,iBAArD,IAAqD,CAAnD,eAAuB,aAAkB;AACzC,iBAAW,iCAAK,OAAL,EAAW,OAAO,aAAa,YAAW;AAAA,IACxD;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAGd,SAAOC,MAAAA;AAAAA,IACJ,OAAO,EAAE,OAAO,aAAa,cAAc,aAAA;AAAA,IAC3C,CAAC,OAAO,aAAa,YAAY;AAAA,EAAA;AAEvC;AClBO,MAAM,wBAAwB,MAAM;AACxC,QAAM,EAAE,OAAO,aAAA,IAAiB,iBAAA;AAEhC,MAAI,CAAC,MAAO,QAAO;AAEnB,SAAOE,2BAAAA,IAACC,cAAAA,eAAA,iCAAkB,QAAlB,EAAyB,OAAO,eAAc;AACzD;;;;;;;"}

package/components/StatusMessage/index.d.cts

@@ -2,3 +2,6 @@ export { StatusMessage, default } from './StatusMessage';
 export type { StatusMessageProps } from './StatusMessage';
 export { StatusMessageProvider, useStatusMessageContext, } from './StatusMessageContext';
 export type { StatusMessageState } from './StatusMessageContext';
+export { StatusMessageRenderer } from './StatusMessageRenderer';
+export { useStatusMessage } from './useStatusMessage';
+export type { ShowMessageOptions } from './useStatusMessage';

package/components/StatusMessage/index.d.mts

@@ -2,3 +2,6 @@ export { StatusMessage, default } from './StatusMessage.mjs';
 export type { StatusMessageProps } from './StatusMessage.mjs';
 export { StatusMessageProvider, useStatusMessageContext, } from './StatusMessageContext.mjs';
 export type { StatusMessageState } from './StatusMessageContext.mjs';
+export { StatusMessageRenderer } from './StatusMessageRenderer.mjs';
+export { useStatusMessage } from './useStatusMessage.mjs';
+export type { ShowMessageOptions } from './useStatusMessage.mjs';

package/components/StatusMessage/index.d.ts

@@ -2,3 +2,6 @@ export { StatusMessage, default } from './StatusMessage';
 export type { StatusMessageProps } from './StatusMessage';
 export { StatusMessageProvider, useStatusMessageContext, } from './StatusMessageContext';
 export type { StatusMessageState } from './StatusMessageContext';
+export { StatusMessageRenderer } from './StatusMessageRenderer';
+export { useStatusMessage } from './useStatusMessage';
+export type { ShowMessageOptions } from './useStatusMessage';

package/components/StatusMessage/index.mjs

@@ -1,6 +1,37 @@
-import { S, S as S2 } from "../../chunks/StatusMessage-B0oqiu3w.mjs";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { S as StatusMessage } from "../../chunks/StatusMessage-Pa5IutUR.mjs";
 import { jsx } from "react/jsx-runtime";
-import { useContext, useState, createContext } from "react";
+import { useContext, useState, useCallback, useMemo, useEffect, createContext } from "react";
 const initialValues = {
   state: void 0,
   setMessage: () => {
@@ -12,15 +43,47 @@ const StatusMessageContext = createContext(initialValues);
 const useStatusMessageContext = () => useContext(StatusMessageContext);
 const StatusMessageProvider = ({ children }) => {
   const [stateMessage, setMessage] = useState(void 0);
-  const cleanMessage = () => {
+  const cleanMessage = useCallback(() => {
     setMessage(void 0);
-  };
-  return /* @__PURE__ */ jsx(StatusMessageContext.Provider, { value: { setMessage, cleanMessage, state: stateMessage }, children });
+  }, []);
+  const value = useMemo(
+    () => ({ setMessage, cleanMessage, state: stateMessage }),
+    [cleanMessage, stateMessage]
+  );
+  useEffect(() => {
+    if (!stateMessage || stateMessage.autoReset === false) return;
+    const timeout = setTimeout(() => {
+      setMessage(void 0);
+    }, 6e3);
+    return () => clearTimeout(timeout);
+  }, [stateMessage]);
+  return /* @__PURE__ */ jsx(StatusMessageContext.Provider, { value, children });
+};
+const useStatusMessage = () => {
+  const { state, setMessage, cleanMessage } = useStatusMessageContext();
+  const showMessage = useCallback(
+    (_a) => {
+      var _b = _a, { displayType = "alert", autoReset = true, title } = _b, rest = __objRest(_b, ["displayType", "autoReset", "title"]);
+      setMessage(__spreadProps(__spreadValues({}, rest), { title, displayType, autoReset }));
+    },
+    [setMessage]
+  );
+  return useMemo(
+    () => ({ state, showMessage, clearMessage: cleanMessage }),
+    [state, showMessage, cleanMessage]
+  );
+};
+const StatusMessageRenderer = () => {
+  const { state, clearMessage } = useStatusMessage();
+  if (!state) return null;
+  return /* @__PURE__ */ jsx(StatusMessage, __spreadProps(__spreadValues({}, state), { close: clearMessage }));
 };
 export {
-  S as StatusMessage,
+  StatusMessage,
   StatusMessageProvider,
-  S2 as default,
+  StatusMessageRenderer,
+  StatusMessage as default,
+  useStatusMessage,
   useStatusMessageContext
 };
 //# sourceMappingURL=index.mjs.map

package/components/StatusMessage/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../src/components/StatusMessage/StatusMessageContext.tsx"],"sourcesContent":["import {\n  createContext,\n  useState,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n  type ReactNode,\n} from 'react';\nimport type { StatusMessageProps } from './StatusMessage';\n\nexport type StatusMessageState = {\n  [K in 'title' | 'description' | 'messageType']: StatusMessageProps[K] | undefined;\n} & Pick<StatusMessageProps, 'displayType'>;\n\ninterface StatusMessageContextValue {\n  state: StatusMessageState | undefined;\n  setMessage: Dispatch<SetStateAction<StatusMessageState | undefined>>;\n  cleanMessage: () => void;\n}\n\nconst initialValues: StatusMessageContextValue = {\n  state: undefined,\n  setMessage: () => {},\n  cleanMessage: () => {},\n};\n\nconst StatusMessageContext = createContext<StatusMessageContextValue>(initialValues);\n\nexport const useStatusMessageContext = () => useContext(StatusMessageContext);\n\ninterface StatusMessageProviderProps {\n  children: ReactNode;\n}\n\nexport const StatusMessageProvider = ({ children }: StatusMessageProviderProps) => {\n  const [stateMessage, setMessage] = useState<StatusMessageState | undefined>(undefined);\n  const cleanMessage = () => {\n    setMessage(undefined);\n  };\n\n  return (\n    <StatusMessageContext.Provider value={{ setMessage, cleanMessage, state: stateMessage }}>\n      {children}\n    </StatusMessageContext.Provider>\n  );\n};\n"],"names":[],"mappings":";;;AAoBA,MAAM,gBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,cAAc,MAAM;AAAA,EAAC;AACvB;AAEA,MAAM,uBAAuB,cAAyC,aAAa;AAE5E,MAAM,0BAA0B,MAAM,WAAW,oBAAoB;AAMrE,MAAM,wBAAwB,CAAC,EAAE,eAA2C;AACjF,QAAM,CAAC,cAAc,UAAU,IAAI,SAAyC,MAAS;AACrF,QAAM,eAAe,MAAM;AACzB,eAAW,MAAS;AAAA,EACtB;AAEA,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,EAAE,YAAY,cAAc,OAAO,aAAA,GACtE,SAAA,CACH;AAEJ;"}
+{"version":3,"file":"index.mjs","sources":["../../../src/components/StatusMessage/StatusMessageContext.tsx","../../../src/components/StatusMessage/useStatusMessage.ts","../../../src/components/StatusMessage/StatusMessageRenderer.tsx"],"sourcesContent":["import {\n  createContext,\n  useState,\n  useContext,\n  type Dispatch,\n  type SetStateAction,\n  type ReactNode,\n  useEffect,\n  useCallback,\n  useMemo,\n} from 'react';\nimport type { StatusMessageProps } from './StatusMessage';\n\nexport type StatusMessageState = {\n  [K in 'title' | 'description' | 'messageType']: StatusMessageProps[K] | undefined;\n} & Pick<StatusMessageProps, 'displayType'> & {\n      autoReset?: boolean;\n   };\n\ninterface StatusMessageContextValue {\n  state: StatusMessageState | undefined;\n  setMessage: Dispatch<SetStateAction<StatusMessageState | undefined>>;\n  cleanMessage: () => void;\n}\n\nconst initialValues: StatusMessageContextValue = {\n  state: undefined,\n  setMessage: () => {},\n  cleanMessage: () => {},\n};\n\nconst StatusMessageContext = createContext<StatusMessageContextValue>(initialValues);\n\nexport const useStatusMessageContext = () => useContext(StatusMessageContext);\n\ninterface StatusMessageProviderProps {\n  children: ReactNode;\n}\n\nexport const StatusMessageProvider = ({ children }: StatusMessageProviderProps) => {\n  const [stateMessage, setMessage] = useState<StatusMessageState | undefined>(undefined);\n  // Estables para que los consumidores puedan usarlas como deps de un efecto\n  // sin re-dispararlo en cada render del Provider.\n  const cleanMessage = useCallback(() => {\n    setMessage(undefined);\n  }, []);\n  \n  const value = useMemo(\n    () => ({ setMessage, cleanMessage, state: stateMessage }),\n    [cleanMessage, stateMessage],\n  );\n\n   useEffect(() => {\n      if (!stateMessage || stateMessage.autoReset === false) return;\n      const timeout = setTimeout(() => {\n         setMessage(undefined);\n      }, 6000);\n      return () => clearTimeout(timeout);\n   }, [stateMessage]);\n\n  return (\n    <StatusMessageContext.Provider value={value}>\n      {children}\n    </StatusMessageContext.Provider>\n  );\n};\n","import { useCallback, useMemo } from \"react\";\nimport { useStatusMessageContext, type StatusMessageState } from \"./StatusMessageContext\";\n\n/**\n * Lo que recibe `showMessage`. Mismos nombres que las props de `StatusMessage`\n * para que lo que entra sea lo que el componente termina recibiendo.\n * `messageType` y `description` son obligatorios: sin tipo no hay color/icono\n * y sin descripción `StatusMessage` no renderiza.\n */\nexport type ShowMessageOptions = {\n   messageType: NonNullable<StatusMessageState[\"messageType\"]>;\n   description: string;\n   title?: string;\n   /** Default: `'alert'`. */\n   displayType?: StatusMessageState[\"displayType\"];\n   /** Si es `true` el Provider limpia el mensaje a los 6s. Default: `true`. */\n   autoReset?: boolean;\n};\n\n/**\n * API recomendada para disparar feedback desde un handler. Se monta sobre el\n * contexto para no exponer el `setMessage` crudo (un `Dispatch` que obliga al\n * consumidor a armar el estado completo) y para centralizar los defaults.\n *\n * Recibe un objeto y no parámetros posicionales: con `title`/`autoReset`\n * opcionales, el orden se volvía ilegible (`fn('Ok', undefined, false)`).\n *\n * `showMessage` y `clearMessage` tienen identidad estable, así que se pueden\n * usar como dependencias de un efecto sin re-dispararlo en cada render.\n *\n * @example\n * const { showMessage } = useStatusMessage();\n * showMessage({ messageType: 'success', description: 'Cambios guardados' });\n */\nexport const useStatusMessage = () => {\n   const { state, setMessage, cleanMessage } = useStatusMessageContext();\n\n   const showMessage = useCallback(\n      ({ displayType = \"alert\", autoReset = true, title, ...rest }: ShowMessageOptions) => {\n         setMessage({ ...rest, title, displayType, autoReset });\n      },\n      [setMessage],\n   );\n\n   return useMemo(\n      () => ({ state, showMessage, clearMessage: cleanMessage }),\n      [state, showMessage, cleanMessage],\n   );\n};\n","import StatusMessage from \"./StatusMessage\";\nimport { useStatusMessage } from \"./useStatusMessage\";\n\n/**\n * Pinta el mensaje vigente del `StatusMessageProvider` en el lugar donde se monte.\n *\n * Separa el *disparo* del mensaje (`useStatusMessage().showMessage`, desde un\n * handler cualquiera) del *lugar* donde se muestra: el consumidor monta un único\n * `<StatusMessageRenderer />` donde quiere ver el feedback (arriba del form, en\n * el layout de la página) y no tiene que llevar `state` ni `close` a mano hasta\n * cada `<StatusMessage>`.\n *\n * - Sin mensaje en el contexto renderiza `null`, así que puede quedar montado\n *   siempre sin reservar espacio.\n * - `close` se conecta a `clearMessage`: cerrar limpia el contexto y el\n *   componente se desmonta. Por eso el `StatusMessage` queda en modo\n *   *uncontrolled* (sin `open`): su visibilidad la decide la existencia del\n *   `state`, no un booleano aparte.\n * - El auto-cierre (`autoReset`, 6s) lo resuelve el Provider, no este componente.\n *\n * Debe montarse dentro de un `StatusMessageProvider`; fuera de él el contexto\n * devuelve su valor por defecto (`state: undefined`) y nunca muestra nada, sin\n * error que lo avise.\n *\n * @example\n * <StatusMessageProvider>\n *   <StatusMessageRenderer />\n *   <MiFormulario />   // adentro: useStatusMessage().showMessage({ messageType: 'danger', description })\n * </StatusMessageProvider>\n */\nexport const StatusMessageRenderer = () => {\n   const { state, clearMessage } = useStatusMessage();\n\n   if (!state) return null;\n\n   return <StatusMessage {...state} close={clearMessage} />;\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA,MAAM,gBAA2C;AAAA,EAC/C,OAAO;AAAA,EACP,YAAY,MAAM;AAAA,EAAC;AAAA,EACnB,cAAc,MAAM;AAAA,EAAC;AACvB;AAEA,MAAM,uBAAuB,cAAyC,aAAa;AAE5E,MAAM,0BAA0B,MAAM,WAAW,oBAAoB;AAMrE,MAAM,wBAAwB,CAAC,EAAE,eAA2C;AACjF,QAAM,CAAC,cAAc,UAAU,IAAI,SAAyC,MAAS;AAGrF,QAAM,eAAe,YAAY,MAAM;AACrC,eAAW,MAAS;AAAA,EACtB,GAAG,CAAA,CAAE;AAEL,QAAM,QAAQ;AAAA,IACZ,OAAO,EAAE,YAAY,cAAc,OAAO,aAAA;AAAA,IAC1C,CAAC,cAAc,YAAY;AAAA,EAAA;AAG5B,YAAU,MAAM;AACb,QAAI,CAAC,gBAAgB,aAAa,cAAc,MAAO;AACvD,UAAM,UAAU,WAAW,MAAM;AAC9B,iBAAW,MAAS;AAAA,IACvB,GAAG,GAAI;AACP,WAAO,MAAM,aAAa,OAAO;AAAA,EACpC,GAAG,CAAC,YAAY,CAAC;AAElB,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAC5B,SAAA,CACH;AAEJ;AC/BO,MAAM,mBAAmB,MAAM;AACnC,QAAM,EAAE,OAAO,YAAY,aAAA,IAAiB,wBAAA;AAE5C,QAAM,cAAc;AAAA,IACjB,CAAC,OAAoF;AAApF,mBAAE,gBAAc,SAAS,YAAY,MAAM,UAA3C,IAAqD,iBAArD,IAAqD,CAAnD,eAAuB,aAAkB;AACzC,iBAAW,iCAAK,OAAL,EAAW,OAAO,aAAa,YAAW;AAAA,IACxD;AAAA,IACA,CAAC,UAAU;AAAA,EAAA;AAGd,SAAO;AAAA,IACJ,OAAO,EAAE,OAAO,aAAa,cAAc,aAAA;AAAA,IAC3C,CAAC,OAAO,aAAa,YAAY;AAAA,EAAA;AAEvC;AClBO,MAAM,wBAAwB,MAAM;AACxC,QAAM,EAAE,OAAO,aAAA,IAAiB,iBAAA;AAEhC,MAAI,CAAC,MAAO,QAAO;AAEnB,SAAO,oBAAC,eAAA,iCAAkB,QAAlB,EAAyB,OAAO,eAAc;AACzD;"}

package/components/StatusMessage/useStatusMessage.d.cts

@@ -0,0 +1,36 @@
+import { StatusMessageState } from './StatusMessageContext';
+/**
+ * Lo que recibe `showMessage`. Mismos nombres que las props de `StatusMessage`
+ * para que lo que entra sea lo que el componente termina recibiendo.
+ * `messageType` y `description` son obligatorios: sin tipo no hay color/icono
+ * y sin descripción `StatusMessage` no renderiza.
+ */
+export type ShowMessageOptions = {
+    messageType: NonNullable<StatusMessageState["messageType"]>;
+    description: string;
+    title?: string;
+    /** Default: `'alert'`. */
+    displayType?: StatusMessageState["displayType"];
+    /** Si es `true` el Provider limpia el mensaje a los 6s. Default: `true`. */
+    autoReset?: boolean;
+};
+/**
+ * API recomendada para disparar feedback desde un handler. Se monta sobre el
+ * contexto para no exponer el `setMessage` crudo (un `Dispatch` que obliga al
+ * consumidor a armar el estado completo) y para centralizar los defaults.
+ *
+ * Recibe un objeto y no parámetros posicionales: con `title`/`autoReset`
+ * opcionales, el orden se volvía ilegible (`fn('Ok', undefined, false)`).
+ *
+ * `showMessage` y `clearMessage` tienen identidad estable, así que se pueden
+ * usar como dependencias de un efecto sin re-dispararlo en cada render.
+ *
+ * @example
+ * const { showMessage } = useStatusMessage();
+ * showMessage({ messageType: 'success', description: 'Cambios guardados' });
+ */
+export declare const useStatusMessage: () => {
+    state: StatusMessageState | undefined;
+    showMessage: ({ displayType, autoReset, title, ...rest }: ShowMessageOptions) => void;
+    clearMessage: () => void;
+};

package/components/StatusMessage/useStatusMessage.d.mts

@@ -0,0 +1,36 @@
+import { StatusMessageState } from './StatusMessageContext.mjs';
+/**
+ * Lo que recibe `showMessage`. Mismos nombres que las props de `StatusMessage`
+ * para que lo que entra sea lo que el componente termina recibiendo.
+ * `messageType` y `description` son obligatorios: sin tipo no hay color/icono
+ * y sin descripción `StatusMessage` no renderiza.
+ */
+export type ShowMessageOptions = {
+    messageType: NonNullable<StatusMessageState["messageType"]>;
+    description: string;
+    title?: string;
+    /** Default: `'alert'`. */
+    displayType?: StatusMessageState["displayType"];
+    /** Si es `true` el Provider limpia el mensaje a los 6s. Default: `true`. */
+    autoReset?: boolean;
+};
+/**
+ * API recomendada para disparar feedback desde un handler. Se monta sobre el
+ * contexto para no exponer el `setMessage` crudo (un `Dispatch` que obliga al
+ * consumidor a armar el estado completo) y para centralizar los defaults.
+ *
+ * Recibe un objeto y no parámetros posicionales: con `title`/`autoReset`
+ * opcionales, el orden se volvía ilegible (`fn('Ok', undefined, false)`).
+ *
+ * `showMessage` y `clearMessage` tienen identidad estable, así que se pueden
+ * usar como dependencias de un efecto sin re-dispararlo en cada render.
+ *
+ * @example
+ * const { showMessage } = useStatusMessage();
+ * showMessage({ messageType: 'success', description: 'Cambios guardados' });
+ */
+export declare const useStatusMessage: () => {
+    state: StatusMessageState | undefined;
+    showMessage: ({ displayType, autoReset, title, ...rest }: ShowMessageOptions) => void;
+    clearMessage: () => void;
+};

package/components/StatusMessage/useStatusMessage.d.ts

@@ -0,0 +1,36 @@
+import { StatusMessageState } from './StatusMessageContext';
+/**
+ * Lo que recibe `showMessage`. Mismos nombres que las props de `StatusMessage`
+ * para que lo que entra sea lo que el componente termina recibiendo.
+ * `messageType` y `description` son obligatorios: sin tipo no hay color/icono
+ * y sin descripción `StatusMessage` no renderiza.
+ */
+export type ShowMessageOptions = {
+    messageType: NonNullable<StatusMessageState["messageType"]>;
+    description: string;
+    title?: string;
+    /** Default: `'alert'`. */
+    displayType?: StatusMessageState["displayType"];
+    /** Si es `true` el Provider limpia el mensaje a los 6s. Default: `true`. */
+    autoReset?: boolean;
+};
+/**
+ * API recomendada para disparar feedback desde un handler. Se monta sobre el
+ * contexto para no exponer el `setMessage` crudo (un `Dispatch` que obliga al
+ * consumidor a armar el estado completo) y para centralizar los defaults.
+ *
+ * Recibe un objeto y no parámetros posicionales: con `title`/`autoReset`
+ * opcionales, el orden se volvía ilegible (`fn('Ok', undefined, false)`).
+ *
+ * `showMessage` y `clearMessage` tienen identidad estable, así que se pueden
+ * usar como dependencias de un efecto sin re-dispararlo en cada render.
+ *
+ * @example
+ * const { showMessage } = useStatusMessage();
+ * showMessage({ messageType: 'success', description: 'Cambios guardados' });
+ */
+export declare const useStatusMessage: () => {
+    state: StatusMessageState | undefined;
+    showMessage: ({ displayType, autoReset, title, ...rest }: ShowMessageOptions) => void;
+    clearMessage: () => void;
+};

package/index.cjs

@@ -19,7 +19,7 @@ const EmptyState = require("./chunks/EmptyState-C3G5C0DO.cjs");
 const Step = require("./chunks/Step-fng1hpkt.cjs");
 const Tab = require("./chunks/Tab-CjCGp0aH.cjs");
 const Table = require("./chunks/Table-BcI9uvYg.cjs");
-const StatusMessage = require("./chunks/StatusMessage-CV1xnzeu.cjs");
+const StatusMessage = require("./chunks/StatusMessage-Bl_E83nN.cjs");
 const Modal = require("./chunks/Modal-KRUDCrlp.cjs");
 const Input = require("./chunks/Input-Bcm7XRHs.cjs");
 const Select = require("./chunks/Select-CjiKx_1z.cjs");

package/index.mjs

@@ -17,7 +17,7 @@ import { E } from "./chunks/EmptyState-CVaRjXkT.mjs";
 import { a, S as S3 } from "./chunks/Step-BdgcmiDk.mjs";
 import { a as a2, T } from "./chunks/Tab-BXTh3QSn.mjs";
 import { T as T2 } from "./chunks/Table-DGmx3UyH.mjs";
-import { S as S4 } from "./chunks/StatusMessage-B0oqiu3w.mjs";
+import { S as S4 } from "./chunks/StatusMessage-Pa5IutUR.mjs";
 import { M, b, c, a as a3 } from "./chunks/Modal-E1V8hyFI.mjs";
 import { I } from "./chunks/Input-BOt_sv7B.mjs";
 import { O, S as S5 } from "./chunks/Select-CWZJnddP.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soyfri/shared-library",
-  "version": "4.1.0",
+  "version": "4.1.1-beta.3",
   "type": "commonjs",
   "main": "./index.cjs",
   "module": "./index.mjs",

package/chunks/StatusMessage-B0oqiu3w.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatusMessage-B0oqiu3w.mjs","sources":["../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from 'react';\nimport {\n  Alert,\n  Box,\n  Typography,\n  Dialog,\n  DialogContent,\n  DialogActions,\n  Button,\n} from '@mui/material';\nimport { useThemeProps, type SxProps, type Theme } from '@mui/material/styles';\n\nimport { mergeSx } from '../_shared/mergeSx';\nimport {\n  ErrorOutline as ErrorOutlineIcon,\n  CheckCircleOutline as CheckCircleOutlineIcon,\n  WarningAmber as WarningAmberIcon,\n} from '@mui/icons-material';\n\nexport interface StatusMessageProps {\n  /** Título del mensaje. */\n  title?: string;\n  /** Descripción/contenido detallado. Requerido para que el componente renderice. */\n  description?: string;\n  /** Tipo de mensaje (controla color + icono). `danger` mapea a `error` de MUI. */\n  messageType?: 'success' | 'danger' | 'warning';\n  /** Forma de presentación: alerta inline o modal. Default: `'alert'`. */\n  displayType?: 'alert' | 'modal';\n  /** Callback al cerrar. Si se omite, no se muestra botón de cerrar. */\n  close?: () => void;\n  /**\n   * Controla visibilidad. Si se omite, el componente maneja su propio\n   * state (se oculta solo al llamar `close`). Si se pasa, queda controlled\n   * y el consumer es responsable de actualizarlo.\n   */\n  open?: boolean;\n  /**\n   * sx del nodo raíz: el `Alert` en modo `alert`, el `Dialog` en modo `modal`.\n   * Antes el componente no aceptaba ni `sx` ni `className`, así que ajustar su\n   * separación desde el call-site era imposible.\n   */\n  sx?: SxProps<Theme>;\n  className?: string;\n}\n\n/**\n * Mensaje de éxito / error / advertencia en forma de alerta inline o modal.\n *\n * - **Uncontrolled**: sin pasar `open`, el componente maneja su propia\n *   visibilidad. Al llamar `close`, se oculta automáticamente.\n * - **Controlled**: pasando `open`, el consumer decide cuándo mostrar/ocultar.\n */\nexport const StatusMessage = forwardRef<HTMLDivElement, StatusMessageProps>(\n  function StatusMessage(inProps, ref) {\n  const props = useThemeProps({ props: inProps, name: 'FriStatusMessage' });\n  const {\n    title,\n    description,\n    messageType = 'success',\n    displayType = 'alert',\n    close,\n    open: controlledOpen,\n    sx,\n    className,\n  } = props;\n  const [internalOpen, setInternalOpen] = useState(true);\n  const titleId = useId();\n  const descId = useId();\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const handleClose = () => {\n    if (!isControlled) setInternalOpen(false);\n    close?.();\n  };\n\n  const alertVariant = messageType === 'danger' ? 'error' : messageType;\n\n  const icon =\n    messageType === 'success' ? (\n      <CheckCircleOutlineIcon sx={{ fontSize: 64, color: 'success.main' }} />\n    ) : messageType === 'danger' ? (\n      <ErrorOutlineIcon sx={{ fontSize: 64, color: 'error.main' }} />\n    ) : (\n      <WarningAmberIcon sx={{ fontSize: 64, color: 'warning.main' }} />\n    );\n\n  if (!description) return null;\n  if (!isOpen) return null;\n\n  if (displayType === 'modal') {\n    return (\n      <Dialog\n        ref={ref}\n        className={className}\n        sx={sx}\n        open={isOpen}\n        onClose={handleClose}\n        aria-labelledby={title ? titleId : undefined}\n        aria-describedby={descId}\n        maxWidth=\"md\"\n        slotProps={{\n          paper: {\n            sx: { borderRadius: '16px', p: 2 },\n          },\n        }}\n      >\n        <DialogContent\n          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'center',\n            textAlign: 'center',\n            p: 4,\n            gap: 2,\n          }}\n        >\n          <Box sx={{ mb: 2 }}>{icon}</Box>\n          {title && (\n            <Typography\n              id={titleId}\n              variant=\"h4\"\n              component=\"h2\"\n              sx={{ fontWeight: 'bold' }}\n            >\n              {title}\n            </Typography>\n          )}\n          <Typography id={descId} variant=\"body1\" color=\"text.secondary\">\n            {description}\n          </Typography>\n        </DialogContent>\n        <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n          <Button onClick={handleClose} variant=\"contained\" color={alertVariant}>\n            Aceptar\n          </Button>\n        </DialogActions>\n      </Dialog>\n    );\n  }\n\n  return (\n    <Alert\n      ref={ref}\n      className={className}\n      severity={alertVariant}\n      sx={mergeSx({ mb: 2, mt: 2 }, sx)}\n      onClose={close !== undefined ? handleClose : undefined}\n    >\n      {title && (\n        <Typography variant=\"h6\" sx={{ fontWeight: 'bold' }}>\n          {title}\n        </Typography>\n      )}\n      <Typography variant=\"body2\" sx={{ mt: 1 }}>\n        {description}\n      </Typography>\n    </Alert>\n  );\n  },\n);\n\nexport default StatusMessage;\n"],"names":["StatusMessage","CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon"],"mappings":"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"}

package/chunks/StatusMessage-CV1xnzeu.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatusMessage-CV1xnzeu.cjs","sources":["../../src/components/StatusMessage/StatusMessage.tsx"],"sourcesContent":["import { forwardRef, useId, useState } from 'react';\nimport {\n  Alert,\n  Box,\n  Typography,\n  Dialog,\n  DialogContent,\n  DialogActions,\n  Button,\n} from '@mui/material';\nimport { useThemeProps, type SxProps, type Theme } from '@mui/material/styles';\n\nimport { mergeSx } from '../_shared/mergeSx';\nimport {\n  ErrorOutline as ErrorOutlineIcon,\n  CheckCircleOutline as CheckCircleOutlineIcon,\n  WarningAmber as WarningAmberIcon,\n} from '@mui/icons-material';\n\nexport interface StatusMessageProps {\n  /** Título del mensaje. */\n  title?: string;\n  /** Descripción/contenido detallado. Requerido para que el componente renderice. */\n  description?: string;\n  /** Tipo de mensaje (controla color + icono). `danger` mapea a `error` de MUI. */\n  messageType?: 'success' | 'danger' | 'warning';\n  /** Forma de presentación: alerta inline o modal. Default: `'alert'`. */\n  displayType?: 'alert' | 'modal';\n  /** Callback al cerrar. Si se omite, no se muestra botón de cerrar. */\n  close?: () => void;\n  /**\n   * Controla visibilidad. Si se omite, el componente maneja su propio\n   * state (se oculta solo al llamar `close`). Si se pasa, queda controlled\n   * y el consumer es responsable de actualizarlo.\n   */\n  open?: boolean;\n  /**\n   * sx del nodo raíz: el `Alert` en modo `alert`, el `Dialog` en modo `modal`.\n   * Antes el componente no aceptaba ni `sx` ni `className`, así que ajustar su\n   * separación desde el call-site era imposible.\n   */\n  sx?: SxProps<Theme>;\n  className?: string;\n}\n\n/**\n * Mensaje de éxito / error / advertencia en forma de alerta inline o modal.\n *\n * - **Uncontrolled**: sin pasar `open`, el componente maneja su propia\n *   visibilidad. Al llamar `close`, se oculta automáticamente.\n * - **Controlled**: pasando `open`, el consumer decide cuándo mostrar/ocultar.\n */\nexport const StatusMessage = forwardRef<HTMLDivElement, StatusMessageProps>(\n  function StatusMessage(inProps, ref) {\n  const props = useThemeProps({ props: inProps, name: 'FriStatusMessage' });\n  const {\n    title,\n    description,\n    messageType = 'success',\n    displayType = 'alert',\n    close,\n    open: controlledOpen,\n    sx,\n    className,\n  } = props;\n  const [internalOpen, setInternalOpen] = useState(true);\n  const titleId = useId();\n  const descId = useId();\n\n  const isControlled = controlledOpen !== undefined;\n  const isOpen = isControlled ? controlledOpen : internalOpen;\n\n  const handleClose = () => {\n    if (!isControlled) setInternalOpen(false);\n    close?.();\n  };\n\n  const alertVariant = messageType === 'danger' ? 'error' : messageType;\n\n  const icon =\n    messageType === 'success' ? (\n      <CheckCircleOutlineIcon sx={{ fontSize: 64, color: 'success.main' }} />\n    ) : messageType === 'danger' ? (\n      <ErrorOutlineIcon sx={{ fontSize: 64, color: 'error.main' }} />\n    ) : (\n      <WarningAmberIcon sx={{ fontSize: 64, color: 'warning.main' }} />\n    );\n\n  if (!description) return null;\n  if (!isOpen) return null;\n\n  if (displayType === 'modal') {\n    return (\n      <Dialog\n        ref={ref}\n        className={className}\n        sx={sx}\n        open={isOpen}\n        onClose={handleClose}\n        aria-labelledby={title ? titleId : undefined}\n        aria-describedby={descId}\n        maxWidth=\"md\"\n        slotProps={{\n          paper: {\n            sx: { borderRadius: '16px', p: 2 },\n          },\n        }}\n      >\n        <DialogContent\n          sx={{\n            display: 'flex',\n            flexDirection: 'column',\n            alignItems: 'center',\n            textAlign: 'center',\n            p: 4,\n            gap: 2,\n          }}\n        >\n          <Box sx={{ mb: 2 }}>{icon}</Box>\n          {title && (\n            <Typography\n              id={titleId}\n              variant=\"h4\"\n              component=\"h2\"\n              sx={{ fontWeight: 'bold' }}\n            >\n              {title}\n            </Typography>\n          )}\n          <Typography id={descId} variant=\"body1\" color=\"text.secondary\">\n            {description}\n          </Typography>\n        </DialogContent>\n        <DialogActions sx={{ justifyContent: 'center', p: 2 }}>\n          <Button onClick={handleClose} variant=\"contained\" color={alertVariant}>\n            Aceptar\n          </Button>\n        </DialogActions>\n      </Dialog>\n    );\n  }\n\n  return (\n    <Alert\n      ref={ref}\n      className={className}\n      severity={alertVariant}\n      sx={mergeSx({ mb: 2, mt: 2 }, sx)}\n      onClose={close !== undefined ? handleClose : undefined}\n    >\n      {title && (\n        <Typography variant=\"h6\" sx={{ fontWeight: 'bold' }}>\n          {title}\n        </Typography>\n      )}\n      <Typography variant=\"body2\" sx={{ mt: 1 }}>\n        {description}\n      </Typography>\n    </Alert>\n  );\n  },\n);\n\nexport default StatusMessage;\n"],"names":["forwardRef","StatusMessage","useThemeProps","useState","useId","jsx","CheckCircleOutlineIcon","ErrorOutlineIcon","WarningAmberIcon","jsxs","Dialog","DialogContent","Box","Typography","DialogActions","Button","Alert","mergeSx"],"mappings":"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"}