{"_id":"@codeplex-sac/navegacion","_rev":"6-fd938060495eed1fc1fe22225f6443bc","name":"@codeplex-sac/navegacion","dist-tags":{"latest":"0.0.16"},"versions":{"0.0.10":{"name":"@codeplex-sac/navegacion","version":"0.0.10","_id":"@codeplex-sac/navegacion@0.0.10","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"2ffd1cdfcfc4e064002137d105c844a3fd811387","tarball":"https://registry.npmjs.org/@codeplex-sac/navegacion/-/navegacion-0.0.10.tgz","fileCount":19,"integrity":"sha512-N3mnJ9rzjRAWs7QFJtDnS8l5oDU+MJarT+G5CCaA9KK64LPr5fLCoRgrnHbOIhvuQyQDXDXsfyfpB5p1+VffMg==","signatures":[{"sig":"MEYCIQDYYLImcaGuvmxrSKufST7TsG+Hf2+Y6Hp8rP9UhlurOAIhAPT3R+EU/850OM1HtoTJKUZzNxx6WYuY4/0gZZDUvOe5","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":161985},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"gitHead":"a79a8026b56a9210697ddccebd35f8eab7c3686a","_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_npmVersion":"10.9.2","description":"Paquete de componentes de navegación avanzados para el ecosistema **Codeplex-SAC**. Ofrece soluciones completas para la gestión de rutas, jerarquías, menús y estructuras de paneles laterales, optimizadas para una experiencia de usuario premium y con una A","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@mui/material":"^7.3.6","@mui/icons-material":"^7.3.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","react-router-dom":"^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/navegacion_0.0.10_1780500285001_0.4982314578661382","host":"s3://npm-registry-packages-npm-production"}},"0.0.12":{"name":"@codeplex-sac/navegacion","version":"0.0.12","_id":"@codeplex-sac/navegacion@0.0.12","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"c5e645500322b3b47aac00610b77dffacbf2f2a8","tarball":"https://registry.npmjs.org/@codeplex-sac/navegacion/-/navegacion-0.0.12.tgz","fileCount":19,"integrity":"sha512-XQBvuOYMUrna0JCJo8mnXgjuPKYXDWziv9bYQQ+mgIReMg4L5JdQHcM5VkdIOwZbiW4WhDplx0dOMuXtvpTxmA==","signatures":[{"sig":"MEYCIQD5Bx9+WjC8RvjFutXZ4CQhjZCyFppNaYduY+8Z9JeA5AIhAPQTCXvLNHvRncz0x5eFAz2+ZPb5tN2LB5NKm5CefYVO","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":161166},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"gitHead":"c886c9d5d03a410cd5133a1c63b41eb74189be22","_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_npmVersion":"10.9.2","description":"Componentes de navegación avanzados para el ecosistema **Codeplex-SAC**. Soluciones completas para rutas, jerarquías, menús y paneles laterales con una API 100% en **Español**.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@mui/material":"^7.3.6","@mui/icons-material":"^7.3.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","react-router-dom":"^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/navegacion_0.0.12_1781294916282_0.10819671359410776","host":"s3://npm-registry-packages-npm-production"}},"0.0.13":{"name":"@codeplex-sac/navegacion","version":"0.0.13","_id":"@codeplex-sac/navegacion@0.0.13","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"b155d2a32e015494b8c9b295415e0110c3922a75","tarball":"https://registry.npmjs.org/@codeplex-sac/navegacion/-/navegacion-0.0.13.tgz","fileCount":19,"integrity":"sha512-5Bfe+6TYaL+/+0FwGFGtH7XOJXusvCcCuV9MFzqCLxs0Co1lsKV859WF+af6et8gObETe8yEBYSp9DP7uv/E/Q==","signatures":[{"sig":"MEUCIQCOpCBsmqlrVUAFki52mobuhPjHrmW4DTXzuKs18BSzhgIgEaZ9FxJnfh64KffyaLtGCSNbtWawMXGvyxDt/DUqaZk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":161166},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"gitHead":"94151effdd9fac04980a1149ec780786fc70cc36","_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_npmVersion":"10.9.2","description":"Componentes de navegación avanzados para el ecosistema **Codeplex-SAC**. Soluciones completas para rutas, jerarquías, menús y paneles laterales con una API 100% en **Español**.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@mui/material":"^7.3.6","@mui/icons-material":"^7.3.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","react-router-dom":"^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/navegacion_0.0.13_1781544032919_0.21390833947997256","host":"s3://npm-registry-packages-npm-production"}},"0.0.14":{"name":"@codeplex-sac/navegacion","version":"0.0.14","_id":"@codeplex-sac/navegacion@0.0.14","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"816228790983663fe68355d28e4b330c359b1af8","tarball":"https://registry.npmjs.org/@codeplex-sac/navegacion/-/navegacion-0.0.14.tgz","fileCount":19,"integrity":"sha512-S7KYD/Kqmefp3dla3CAyt3l68skqQBV4WHVHyYyv6+gAYoFBAkEH18MV8wVr5WyYZdTfYdbMSAyX08nYyWLeXw==","signatures":[{"sig":"MEUCIByIv0Ror2CqgjVg5an0/ykPyBcdzpDQ3rLZ4gtDHecjAiEAiMHXPrlfxBn942wR5VOk7bDx1d7xn4xscj7CJaB9qpw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":161166},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"gitHead":"94151effdd9fac04980a1149ec780786fc70cc36","_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_npmVersion":"10.9.2","description":"Componentes de navegación avanzados para el ecosistema **Codeplex-SAC**. Soluciones completas para rutas, jerarquías, menús y paneles laterales con una API 100% en **Español**.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@mui/material":"^7.3.6","@mui/icons-material":"^7.3.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","react-router-dom":"^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/navegacion_0.0.14_1781977527203_0.17731801971627537","host":"s3://npm-registry-packages-npm-production"}},"0.0.15":{"name":"@codeplex-sac/navegacion","version":"0.0.15","_id":"@codeplex-sac/navegacion@0.0.15","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"d90830360c05508f04fe2bb2a713b68cc5ce4f1a","tarball":"https://registry.npmjs.org/@codeplex-sac/navegacion/-/navegacion-0.0.15.tgz","fileCount":22,"integrity":"sha512-DnMdr1VYYWxb2UOTopfP1F8B+J3jTzk/MAs3SQW35oV/nsRycD0fpcyB6SUo4UxFQApmNegAu0B/qciXNHBpFQ==","signatures":[{"sig":"MEUCICNGjK6pfUIEMIW2WfY0+Bv7LjcvQvhp7xwUGuYW8IM1AiEAz0ikwur9OpoU9yX3BGT2cvVAbVinuuBj7nT0swlezV4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":175034},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"gitHead":"c0cbacfc4475c905cb4d7a510f963be540061d0a","_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_npmVersion":"10.9.2","description":"Componentes de navegación avanzados para el ecosistema **Codeplex-SAC**. Soluciones completas para rutas, jerarquías, menús y paneles laterales con una API 100% en **Español**.","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@mui/material":"^7.3.6","@mui/icons-material":"^7.3.6"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","react-router-dom":"^6.0.0 || ^7.0.0"},"_npmOperationalInternal":{"tmp":"tmp/navegacion_0.0.15_1782323533993_0.18038458631397325","host":"s3://npm-registry-packages-npm-production"}},"0.0.16":{"name":"@codeplex-sac/navegacion","version":"0.0.16","type":"module","main":"./index.js","module":"./index.js","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"publishConfig":{"access":"public"},"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","react-router-dom":"^6.0.0 || ^7.0.0"},"dependencies":{"@mui/icons-material":"^7.3.6","@mui/material":"^7.3.6"},"gitHead":"c0cbacfc4475c905cb4d7a510f963be540061d0a","_id":"@codeplex-sac/navegacion@0.0.16","description":"Componentes de navegación avanzados para el ecosistema **Codeplex-SAC**. Soluciones completas para rutas, jerarquías, menús y paneles laterales con una API 100% en **Español**.","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-gmEnIY3rKSraDS1DyT+eh8dJhCEkR7J93GdJ2Abohcx56tS9B/qYJDCcoQjB+FdW/YSWE0F6Wwz1iVB+dCKw3g==","shasum":"9476a3831ab81823825a6e01259e12f3408d2ecf","tarball":"https://registry.npmjs.org/@codeplex-sac/navegacion/-/navegacion-0.0.16.tgz","fileCount":22,"unpackedSize":175034,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCikevtfsETrT0Myhrze5GeTd2MyldpaYCJwJoK6AxfCQIhANip9VDVsb31QxoB0XBYVhIQU4ZdtH27z1veJxLIxvHv"}]},"_npmUser":{"name":"b_manuel","email":"b_manuel@codeplex.pe"},"directories":{},"maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/navegacion_0.0.16_1782918126905_0.3618883960962591"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-03T15:24:44.808Z","modified":"2026-07-01T15:02:07.208Z","0.0.10":"2026-06-03T15:24:45.142Z","0.0.12":"2026-06-12T20:08:36.424Z","0.0.13":"2026-06-15T17:20:33.061Z","0.0.14":"2026-06-20T17:45:27.354Z","0.0.15":"2026-06-24T17:52:14.141Z","0.0.16":"2026-07-01T15:02:07.068Z"},"description":"Componentes de navegación avanzados para el ecosistema **Codeplex-SAC**. Soluciones completas para rutas, jerarquías, menús y paneles laterales con una API 100% en **Español**.","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"readme":"# @codeplex-sac/navegacion\n\nComponentes de navegación avanzados para el ecosistema **Codeplex-SAC**. Soluciones completas para rutas, jerarquías, menús y paneles laterales con una API 100% en **Español**.\n\n## Instalación\n\n```bash\nbun add @codeplex-sac/navegacion @codeplex-sac/tema @mui/material @emotion/react @emotion/styled\n```\n\n> [!IMPORTANT]\n> Envuelve la aplicación con `CodeplexProveedorTema` de `@codeplex-sac/tema` para que los estilos funcionen correctamente.\n\n---\n\n## Componentes\n\n---\n\n### CodeplexCajonLateral\n\nPanel que se desliza desde los bordes de la pantalla. Ideal para menús de navegación móvil o paneles de filtrado.\n\n**Ejemplo:**\n```tsx\nimport { CodeplexCajonLateral } from '@codeplex-sac/navegacion';\n\nexport const MiCajon = ({ abierto, alCerrar }) => (\n  <CodeplexCajonLateral\n    abierto={abierto}\n    alCerrar={alCerrar}\n    ancho={320}\n    cabecera={<h2>Menú Principal</h2>}\n    mostrarIconoCierre\n  >\n    {/* Contenido del cajón */}\n  </CodeplexCajonLateral>\n);\n```\n\n**Props:**\n| Propiedad | Tipo | Por defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `abierto` | `boolean` | `false` | Controla la visibilidad del cajón. |\n| `alCerrar` | `() => void` | — | Callback al cerrar (clic fuera, Esc o botón X). |\n| `ancho` | `number \\| string` | `280` | Ancho del panel (en px o %). |\n| `anclaje` | `'izquierda' \\| 'derecha' \\| 'arriba' \\| 'abajo'` | `'izquierda'` | Lado por el que aparece. |\n| `cabecera` | `ReactNode` | — | Contenido fijo superior. |\n| `pie` | `ReactNode` | — | Contenido fijo inferior. |\n| `deslizable` | `boolean` | `false` | Permite abrir/cerrar con gestos táctiles. |\n| `mostrarIconoCierre` | `boolean` | `false` | Muestra botón X en la cabecera. |\n\n---\n\n### CodeplexPasos\n\nGuía a los usuarios a través de una serie de pasos consecutivos.\n\n**Ejemplo:**\n```tsx\nimport { CodeplexPasos } from '@codeplex-sac/navegacion';\n\nconst pasos = [\n  { etiqueta: 'Identificación', descripcion: 'Datos personales' },\n  { etiqueta: 'Pago', descripcion: 'Método de facturación' },\n  { etiqueta: 'Resumen', opcional: true },\n];\n\nexport const Ejemplo = () => (\n  <CodeplexPasos\n    pasos={pasos}\n    pasoActivo={1}\n    orientacion=\"horizontal\"\n  />\n);\n```\n\n**Props:**\n| Propiedad | Tipo | Por defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `pasos` | `CodeplexPaso[]` | — | Lista con `etiqueta`, `descripcion` y `opcional`. |\n| `pasoActivo` | `number` | — | Índice del paso actual (base 0). |\n| `orientacion` | `'horizontal' \\| 'vertical'` | `'horizontal'` | Dirección del flujo. |\n| `etiquetasAlternativas` | `boolean` | `false` | Coloca etiquetas bajo los iconos. |\n| `noLineal` | `boolean` | `false` | Permite navegación libre entre pasos. |\n\n---\n\n### CodeplexPestanas\n\nOrganiza contenido en vistas accesibles mediante pestañas.\n\n**Ejemplo:**\n```tsx\nimport { CodeplexPestanas } from '@codeplex-sac/navegacion';\n\nconst elementos = [\n  { etiqueta: 'General', valor: 'general' },\n  { etiqueta: 'Seguridad', valor: 'seguridad' },\n];\n\nexport const Ejemplo = () => (\n  <CodeplexPestanas\n    elementos={elementos}\n    valor=\"general\"\n    alCambiar={(_, val) => console.log(val)}\n    centrado\n  />\n);\n```\n\n**Props:**\n| Propiedad | Tipo | Por defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `elementos` | `{ etiqueta, valor, icono? }[]` | — | Lista de pestañas. |\n| `valor` | `any` | — | Valor de la pestaña activa. |\n| `alCambiar` | `(e, val) => void` | — | Callback al cambiar pestaña. |\n| `centrado` | `boolean` | `false` | Centra las pestañas. |\n| `posicionIcono` | `'arriba' \\| 'abajo' \\| 'inicio' \\| 'fin'` | `'arriba'` | Posición del icono respecto al texto. |\n\n---\n\n### CodeplexPestanasNavegador\n\nPestañas tipo navegador ligadas a rutas: abrir, **fijar** (pin), **reordenar** arrastrando, **cerrar** y **persistir** entre recargas. Se acompaña del hook `usarPestanasNavegador` que gestiona todo el estado.\n\n**Ejemplo:**\n```tsx\nimport { CodeplexPestanasNavegador, usarPestanasNavegador } from '@codeplex-sac/navegacion';\n\nexport const Espacio = () => {\n  const tabs = usarPestanasNavegador({\n    inicial: [\n      { id: '/inicio', titulo: 'Inicio', fijada: true },\n      { id: '/clientes', titulo: 'Clientes' },\n    ],\n    persistenciaClave: 'mi-espacio',\n  });\n\n  return (\n    <CodeplexPestanasNavegador\n      pestanas={tabs.pestanas}\n      activaId={tabs.activaId}\n      alActivar={tabs.activar}\n      alCerrar={tabs.cerrar}\n      alFijar={tabs.alternarFijar}\n      alReordenar={tabs.reordenar}\n    />\n  );\n};\n```\n\n**Props de `CodeplexPestanasNavegador`:**\n| Propiedad | Tipo | Por defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `pestanas` | `CodeplexPestanaNavegador[]` | — | Pestañas abiertas (`{ id, titulo, ruta?, icono?, fijada?, cerrable? }`). |\n| `activaId` | `string` | — | Id de la pestaña activa. |\n| `alActivar` | `(id) => void` | — | Al seleccionar una pestaña. |\n| `alCerrar` | `(id) => void` | — | Al cerrar (× o clic central). |\n| `alFijar` | `(id, fijada) => void` | — | Al fijar/desfijar. |\n| `alReordenar` | `(idsOrdenados) => void` | — | Nuevo orden tras arrastrar. |\n| `reordenable` | `boolean` | `true` | Habilita arrastre para reordenar. |\n| `fijables` | `boolean` | `true` | Habilita el botón de fijar. |\n| `tamano` | `'pequeno' \\| 'mediano'` | `'mediano'` | Tamaño de las pestañas. |\n\n> Documentación completa: `readmes/navegacion/pestanas-navegador.md`.\n\n---\n\n### CodeplexMigasPan\n\nMuestra la ubicación actual y permite volver a niveles superiores.\n\n**Ejemplo:**\n```tsx\nimport { CodeplexMigasPan } from '@codeplex-sac/navegacion';\n\nconst ruta = [\n  { etiqueta: 'Artículos', href: '/blog' },\n  { etiqueta: 'Tecnología', href: '/blog/tech' },\n  { etiqueta: 'Componentes UI' },\n];\n\nexport const Ejemplo = () => (\n  <CodeplexMigasPan\n    elementos={ruta}\n    rutaInicio=\"/\"\n    colorActivo=\"primario.main\"\n  />\n);\n```\n\n**Props:**\n| Propiedad | Tipo | Por defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `elementos` | `{ etiqueta, href?, icono? }[]` | — | Elementos de la ruta. |\n| `rutaInicio` | `string` | — | Activa botón \"Inicio\" con esta ruta. |\n| `colorActivo` | `string` | `'texto.primario'` | Color del último elemento (hoja). |\n| `separador` | `ReactNode` | `NavigateNext` | Divisor entre elementos. |\n\n---\n\n### CodeplexEnlace\n\nVínculo de navegación con estilos consistentes y soporte para React Router.\n\n**Ejemplo:**\n```tsx\nimport { CodeplexEnlace } from '@codeplex-sac/navegacion';\n\nexport const Ejemplo = () => (\n  <CodeplexEnlace\n    href=\"/documentacion\"\n    subrayado=\"hover\"\n    target=\"_blank\"\n  >\n    Ver documentación\n  </CodeplexEnlace>\n);\n```\n\n**Props:**\n| Propiedad | Tipo | Por defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `href` | `string` | — | URL de destino. |\n| `subrayado` | `'ninguno' \\| 'hover' \\| 'siempre'` | `'hover'` | Visibilidad del subrayado. |\n| `componente` | `ElementType` | `'a'` | Etiqueta base (útil para `Link` de React Router). |\n| `children` | `ReactNode` | — | Contenido del enlace. |\n\n---\n\n### CodeplexPaginacion\n\nSelector de páginas para listas extensas de datos.\n\n**Ejemplo:**\n```tsx\nimport { CodeplexPaginacion } from '@codeplex-sac/navegacion';\n\nexport const Ejemplo = () => (\n  <CodeplexPaginacion\n    total={25}\n    pagina={1}\n    alCambiar={(_, p) => console.log('Página:', p)}\n    centrado\n    color=\"primario\"\n  />\n);\n```\n\n**Props:**\n| Propiedad | Tipo | Por defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `total` | `number` | — | Número total de páginas. |\n| `pagina` | `number` | — | Página activa. |\n| `alCambiar` | `(e, pagina: number) => void` | — | Callback al cambiar de página. |\n| `centrado` | `boolean` | `false` | Centra el componente. |\n| `color` | `'primario' \\| 'secundario' \\| 'estandar'` | `'estandar'` | Color de los botones activos. |\n| `variante` | `'contorno' \\| 'texto'` | `'texto'` | Estilo visual de los botones. |\n\n---\n\n### CodeplexMenu\n\nLista de opciones en superficie temporal anclada a un elemento de referencia.\n\n**Ejemplo:**\n```tsx\nimport { CodeplexMenu } from '@codeplex-sac/navegacion';\nimport { CodeplexBoton } from '@codeplex-sac/ui';\nimport { useState } from 'react';\n\nexport const Ejemplo = () => {\n  const [ancla, setAncla] = useState(null);\n  const acciones = [\n    { etiqueta: 'Editar', alHacerClick: () => {} },\n    { etiqueta: 'Eliminar', alHacerClick: () => {} },\n  ];\n\n  return (\n    <>\n      <CodeplexBoton texto=\"Opciones\" alHacerClick={(e) => setAncla(e.currentTarget)} />\n      <CodeplexMenu\n        abierto={Boolean(ancla)}\n        elementoAnclaje={ancla}\n        alCerrar={() => setAncla(null)}\n        elementos={acciones}\n      />\n    </>\n  );\n};\n```\n\n**Props:**\n| Propiedad | Tipo | Por defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `abierto` | `boolean` | — | Controla la visibilidad. |\n| `elementoAnclaje` | `HTMLElement \\| null` | — | Elemento de referencia para posicionarse. |\n| `elementos` | `{ etiqueta, icono?, alHacerClick? }[]` | — | Opciones del menú. |\n| `alCerrar` | `() => void` | — | Callback al cerrar el menú. |\n\n---\n\n### CodeplexMarcacionRapida\n\nBotón flotante (FAB) que despliega acciones relacionadas.\n\n**Ejemplo:**\n```tsx\nimport { CodeplexMarcacionRapida } from '@codeplex-sac/navegacion';\n\nconst acciones = [\n  { icono: <GuardarIcono />, tituloTooltip: 'Guardar', alHacerClick: () => {} },\n  { icono: <ImprimirIcono />, tituloTooltip: 'Imprimir' },\n];\n\nexport const Ejemplo = () => (\n  <CodeplexMarcacionRapida\n    etiquetaAria=\"Acciones de archivo\"\n    icono={<EditarIcono />}\n    acciones={acciones}\n    direccion=\"arriba\"\n  />\n);\n```\n\n**Props:**\n| Propiedad | Tipo | Por defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `acciones` | `{ icono, tituloTooltip, alHacerClick? }[]` | — | Botones internos. |\n| `etiquetaAria` | `string` | — | Texto de accesibilidad (obligatorio). |\n| `icono` | `ReactNode` | — | Icono del botón principal. |\n| `direccion` | `'arriba' \\| 'abajo' \\| 'izquierda' \\| 'derecha'` | `'arriba'` | Dirección de despliegue. |\n\n---\n\n### CodeplexNavegacionInferior\n\nBarra de navegación fija al pie de pantalla, optimizada para móvil.\n\n**Ejemplo:**\n```tsx\nimport { CodeplexNavegacionInferior } from '@codeplex-sac/navegacion';\n\nconst elementos = [\n  { etiqueta: 'Inicio', valor: 'inicio', icono: <InicioIcono /> },\n  { etiqueta: 'Favoritos', valor: 'favs', icono: <FavIcono /> },\n  { etiqueta: 'Perfil', valor: 'perfil', icono: <PerfilIcono /> },\n];\n\nexport const Ejemplo = () => (\n  <CodeplexNavegacionInferior\n    elementos={elementos}\n    valor=\"inicio\"\n    alCambiar={(_, val) => console.log(val)}\n    fijo\n  />\n);\n```\n\n**Props:**\n| Propiedad | Tipo | Por defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `elementos` | `{ etiqueta, valor, icono }[]` | — | Pestañas de navegación. |\n| `valor` | `any` | — | Valor del elemento activo. |\n| `alCambiar` | `(e, val) => void` | — | Callback al cambiar elemento. |\n| `fijo` | `boolean` | `false` | Ancla la barra al pie de la ventana. |\n| `conPapel` | `boolean` | `true` | Aplica sombra y elevación. |\n\n---\n\n## Licencia\n\nPropiedad privada de **Codeplex SAC**. Todos los derechos reservados.\n","readmeFilename":"README.md"}