{"_id":"@codeplex-sac/navigation","_rev":"8-7c24f18151e715cb029d59bb9908c2f1","name":"@codeplex-sac/navigation","dist-tags":{"latest":"0.0.8"},"versions":{"0.0.1":{"name":"@codeplex-sac/navigation","version":"0.0.1","_id":"@codeplex-sac/navigation@0.0.1","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"fa35ba41dd888dca452d53b389c5e75affdd27bb","tarball":"https://registry.npmjs.org/@codeplex-sac/navigation/-/navigation-0.0.1.tgz","fileCount":13,"integrity":"sha512-lmbnVd5nT0mousPYCnsnCMs3TxwVeaUQRUAGP5uoNeBxJy5nvoRpptxHwfweKlgat2wRHlLgBN6wZ2bTcL4VBQ==","signatures":[{"sig":"MEUCIQDgC0N4ncjMJQRGBiaaGjuntfGeyI2cYXLl5QZNODgvTAIgQPtUMV4o8yu98lruN1DtIQdqo6v7xwGtqH2pqiWPIlc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":563383},"main":"./index.js","types":"./index.d.ts","shasum":"fa35ba41dd888dca452d53b389c5e75affdd27bb","exports":{".":{"import":"./index.mjs","require":"./index.js"}},"_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_integrity":"sha512-lmbnVd5nT0mousPYCnsnCMs3TxwVeaUQRUAGP5uoNeBxJy5nvoRpptxHwfweKlgat2wRHlLgBN6wZ2bTcL4VBQ==","_npmVersion":"10.8.3","directories":{},"_nodeVersion":"24.3.0","dependencies":{"@mui/material":"^7.3.6","@mui/icons-material":"^7.3.6"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/navigation_0.0.1_1767365583284_0.8998457954806101","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@codeplex-sac/navigation","version":"0.0.2","_id":"@codeplex-sac/navigation@0.0.2","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"d3b435ebc413a165e198750218ee320397697483","tarball":"https://registry.npmjs.org/@codeplex-sac/navigation/-/navigation-0.0.2.tgz","fileCount":13,"integrity":"sha512-bdKNnL72nlU1r+LmaxA5FE2pIOokgtLte0q/5fQve9MeBVtPTfPh+mpebR6EQFAnfWeSoafsTaIY5e9+8D7xRQ==","signatures":[{"sig":"MEUCIDV8o7CBNRAAWx4HDh3anpqBOsvdaYIHYIWfOfebeYL/AiEA7/kzfKLNISPU7QPYfqtZT2cxQNiYISh0Wf/8k4xosg8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":565572},"main":"./index.js","types":"./index.d.ts","exports":{".":{"import":"./index.mjs","require":"./index.js"}},"gitHead":"e07c0a6827e5bb620835280a4b16a93540343c94","_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_npmVersion":"10.9.2","description":"This library was generated with [Nx](https://nx.dev).","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@mui/material":"^7.3.6","@mui/icons-material":"^7.3.6"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/navigation_0.0.2_1767456409147_0.5668273982539571","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@codeplex-sac/navigation","version":"0.0.3","_id":"@codeplex-sac/navigation@0.0.3","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"9946e2d2cc4512dff55143e3ddc7efc3ae5589f0","tarball":"https://registry.npmjs.org/@codeplex-sac/navigation/-/navigation-0.0.3.tgz","fileCount":13,"integrity":"sha512-/XoT8aqCluDylDuOfAgxRuaqe1Rq4F4s4Bjf+grmL58+dCoMzWBeJbAi61stKqpinnqft4I0Ph9CPQ4SX9xfRQ==","signatures":[{"sig":"MEYCIQCXzbH3z+3h6UDoW0gHftRNHdOHIeA28gPA2PsvrvYGZgIhAOA0IGelTF2rD8oGjaYwrVMBtHSu3gKiA1laiOd2fNCD","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":565572},"main":"./index.js","types":"./index.d.ts","shasum":"9946e2d2cc4512dff55143e3ddc7efc3ae5589f0","exports":{".":{"import":"./index.mjs","require":"./index.js"}},"_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_integrity":"sha512-/XoT8aqCluDylDuOfAgxRuaqe1Rq4F4s4Bjf+grmL58+dCoMzWBeJbAi61stKqpinnqft4I0Ph9CPQ4SX9xfRQ==","_npmVersion":"10.8.3","directories":{},"_nodeVersion":"24.3.0","dependencies":{"@mui/material":"^7.3.6","@mui/icons-material":"^7.3.6"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/navigation_0.0.3_1767456707496_0.7783153549644848","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@codeplex-sac/navigation","version":"0.0.4","_id":"@codeplex-sac/navigation@0.0.4","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"8ff8ae3465f51714483a0fc2af82759da6cdc08b","tarball":"https://registry.npmjs.org/@codeplex-sac/navigation/-/navigation-0.0.4.tgz","fileCount":13,"integrity":"sha512-ucstSuRurzVe47u8RVgtDxCmFLINw3tntL58IsnWU29PuSm5ukPkOMTO0k08EK8BiCeIccBw4OkOF/5dUlw/fQ==","signatures":[{"sig":"MEYCIQCUWmwRVPaodsODY0ioOQsLopcdR6DbH0419DJco5Qs7gIhAOJ7vaeFxLXhUTBK1IV6h8nEbsDsW7rQtswcEBQDjLAw","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":569765},"main":"./index.js","types":"./index.d.ts","shasum":"8ff8ae3465f51714483a0fc2af82759da6cdc08b","exports":{".":{"import":"./index.mjs","require":"./index.js"}},"_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_integrity":"sha512-ucstSuRurzVe47u8RVgtDxCmFLINw3tntL58IsnWU29PuSm5ukPkOMTO0k08EK8BiCeIccBw4OkOF/5dUlw/fQ==","_npmVersion":"10.8.3","directories":{},"_nodeVersion":"24.3.0","dependencies":{"@mui/material":"^7.3.6","@mui/icons-material":"^7.3.6"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/navigation_0.0.4_1767741456759_0.3262284703237166","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"@codeplex-sac/navigation","version":"0.0.5","_id":"@codeplex-sac/navigation@0.0.5","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"f9a64f5922ffc5b73a1eaf065dfb41c90a1c504a","tarball":"https://registry.npmjs.org/@codeplex-sac/navigation/-/navigation-0.0.5.tgz","fileCount":13,"integrity":"sha512-IcHAH70xeCf8CeIoPawDmHOW9o9460IXeO3np2zAXxYmNPJV1Iaghvrz/iCOFXVMlzK6P3JiO4ux1y/j4dGGbw==","signatures":[{"sig":"MEYCIQCHpcW+LvegSOjeB85PB+27qAU1dvu4mJarwUIczQHjwQIhAMx0hbZoFlhPo3OX5MjaboOPpG4JJCTSJZFQHovItTty","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":569796},"main":"./index.js","types":"./index.d.ts","shasum":"f9a64f5922ffc5b73a1eaf065dfb41c90a1c504a","exports":{".":{"types":"./index.d.ts","import":"./index.mjs","require":"./index.js"}},"_npmUser":{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"},"_integrity":"sha512-IcHAH70xeCf8CeIoPawDmHOW9o9460IXeO3np2zAXxYmNPJV1Iaghvrz/iCOFXVMlzK6P3JiO4ux1y/j4dGGbw==","_npmVersion":"10.8.3","directories":{},"_nodeVersion":"24.3.0","dependencies":{"@mui/material":"^7.3.6","@mui/icons-material":"^7.3.6"},"_hasShrinkwrap":false,"peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/navigation_0.0.5_1767805299194_0.19225890589099093","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@codeplex-sac/navigation","version":"0.0.6","_id":"@codeplex-sac/navigation@0.0.6","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"3f3ebb630d019cffff314f411a8cd6a153d446b6","tarball":"https://registry.npmjs.org/@codeplex-sac/navigation/-/navigation-0.0.6.tgz","fileCount":13,"integrity":"sha512-E6BaO6ZSjUohVxqGaQks/gDSRGHW7/QaCD9S+YfHLrizp9frAqmvtUsJYLP+5UNIJ0zidA4IeCqoXphyPCvIwA==","signatures":[{"sig":"MEUCIEZ9I44hq18q9j8cSxkrxjy+NiAyS35x0OOijoqmzM8GAiEAkSmW5TstqOAbVS1/vwoyJ9mBMqhUVagv5aNTaKLgPjE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":591504},"main":"./index.js","types":"./index.d.ts","exports":{".":{"types":"./index.d.ts","import":"./index.mjs","require":"./index.js"}},"gitHead":"fad41943ec58e3522dbdaf6f27b6656e6243ed1b","_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"},"_npmOperationalInternal":{"tmp":"tmp/navigation_0.0.6_1768410863509_0.6792120811183533","host":"s3://npm-registry-packages-npm-production"}},"0.0.7":{"name":"@codeplex-sac/navigation","version":"0.0.7","_id":"@codeplex-sac/navigation@0.0.7","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"c8f60ea6513a7a1ff89f1e93c6ca1b192055776f","tarball":"https://registry.npmjs.org/@codeplex-sac/navigation/-/navigation-0.0.7.tgz","fileCount":13,"integrity":"sha512-DC0UMPGZgp9ZsMB02SGtPENRq0MUYDiaVDz8lLxHV/fNuBBMZOvK5OHfriEy3cfNQmETKG/vGGHB17wa9YLLfw==","signatures":[{"sig":"MEUCIHuk+HitvVJXU/8LQu81lcI6b3/AY5FmbR2dNVc4QeI6AiEA+g7/yXl5qa5oPy58mQfK7vIzH9fQuZk4kCYtR4Zi83E=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":591593},"main":"./index.js","type":"module","types":"./index.d.ts","module":"./index.js","exports":{".":{"types":"./index.d.ts","import":"./index.js","require":"./index.js"}},"gitHead":"aa358d65033b4711e27bbfbcac95dad42a96850d","_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/navigation_0.0.7_1768490154124_0.11328516776324515","host":"s3://npm-registry-packages-npm-production"}},"0.0.8":{"name":"@codeplex-sac/navigation","version":"0.0.8","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"},"_id":"@codeplex-sac/navigation@0.0.8","gitHead":"aa358d65033b4711e27bbfbcac95dad42a96850d","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","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-zyI77odUVJuByeGgdtYR9bFKHdGHFZmvV30ZNDesB3ftUj+buSFuab0xm94JfRi9kModbDiI2LgSvUZi7fErvw==","shasum":"0c1f68b70d247cf23475ac71d01bfcb6583395d3","tarball":"https://registry.npmjs.org/@codeplex-sac/navigation/-/navigation-0.0.8.tgz","fileCount":13,"unpackedSize":591672,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHYkwvXLRyVhZfOdt81msmv3mA3IFdBuQfJjp9+Kj6TxAiAdRYsf7ZghVQP4L9ihxTjJ7l/Vsi26QTPHd3C8CVNS9w=="}]},"_npmUser":{"name":"codeplexdev","email":"codeplexdev@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/navigation_0.0.8_1768502800532_0.9645337990631624"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-02T14:53:03.217Z","modified":"2026-01-15T18:46:40.879Z","0.0.1":"2026-01-02T14:53:03.453Z","0.0.2":"2026-01-03T16:06:49.301Z","0.0.3":"2026-01-03T16:11:47.650Z","0.0.4":"2026-01-06T23:17:37.022Z","0.0.5":"2026-01-07T17:01:39.402Z","0.0.6":"2026-01-14T17:14:23.691Z","0.0.7":"2026-01-15T15:15:54.389Z","0.0.8":"2026-01-15T18:46:40.749Z"},"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","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"readme":"# @codeplex-sac/navigation\n\nPaquete 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 API nativa en **Español**.\n\n## 🚀 Instalación\n\n```bash\nbun add @codeplex-sac/navigation @mui/material @emotion/react @emotion/styled\n```\n\n---\n\n## 🏗️ Componentes de Estructura y Flujo\n\n### 🗄️ Grupo 1: Contenedores y Pasos\n\n#### CodeplexCajonLateral (Drawer)\nPanel complementario 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 de Uso:**\n```tsx\nimport { CodeplexCajonLateral } from '@codeplex-sac/navigation';\n\nexport const MiCajon = ({ abierto, alCerrar }) => (\n  <CodeplexCajonLateral \n    abierto={abierto} \n    alCerrar={alCerrar}\n    ancho={320}\n    cabecera={<h2>Menu Principal</h2>}\n    mostrarIconoCierre\n  >\n    {/* Enlaces o navegación aquí */}\n  </CodeplexCajonLateral>\n);\n```\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `abierto` | `boolean` | `false` | Indica si el cajón es visible. |\n| `alCerrar` | `Function` | - | Callback al cerrar (clic fuera, ESC o 'X'). |\n| `ancho` | `number \\| string` | `280` | Ancho del panel (en px o %). |\n| `anclaje` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'left'` | Lado por el que aparece el panel. |\n| `cabecera` | `ReactNode` | - | Contenido fijo superior. |\n| `pie` | `ReactNode` | - | Contenido fijo inferior. |\n| `deslizable` | `boolean` | `false` | Permite abrir/cerrar con gestos (touch). |\n| `mostrarIconoCierre` | `boolean` | `false` | Muestra la 'X' en la cabecera. |\n\n---\n\n#### CodeplexPasos (Stepper)\nGuía a los usuarios a través de una serie de pasos consecutivos en un proceso.\n\n**Ejemplo de Uso:**\n```tsx\nimport { CodeplexPasos } from '@codeplex-sac/navigation';\n\nconst MIS_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={MIS_PASOS} \n    pasoActivo={1} \n    orientacion=\"horizontal\"\n  />\n);\n```\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `pasos` | `Array<CodeplexPaso>`| - | Lista de objetos con `etiqueta` y `descripcion`. |\n| `pasoActivo` | `number` | - | Índice del paso actual (0-base). |\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 (Tabs)\nOrganiza contenido en diferentes vistas accesibles mediante pestañas superiores o integradas.\n\n**Ejemplo de Uso:**\n```tsx\nimport { CodeplexPestanas } from '@codeplex-sac/navigation';\n\nconst ITEMS = [\n  { etiqueta: 'General', valor: 'v1' },\n  { etiqueta: 'Seguridad', valor: 'v2', icono: <LockIcon /> }\n];\n\nexport const MiSeccion = () => (\n  <CodeplexPestanas \n    elementos={ITEMS} \n    valor=\"v1\" \n    alCambiar={(_, val) => console.log(val)}\n    centrado\n  />\n);\n```\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `elementos` | `Array<Item>` | - | Lista con `etiqueta`, `valor` e `icono`. |\n| `valor` | `any` | - | Valor de la pestaña seleccionada. |\n| `alCambiar` | `Function` | - | Evento al seleccionar una pestaña. |\n| `centrado` | `boolean` | `false` | Centra las pestañas horizontalmente. |\n| `posicionIcono`| `'top' \\| 'bottom' \\| 'start' \\| 'end'` | `'top'` | Posición del icono respecto al texto. |\n\n### 🗺️ Grupo 2: Rutas y Jerarquía\n\n#### CodeplexMigasPan (Breadcrumbs)\nAyuda a los usuarios a visualizar su ubicación actual y volver a niveles superiores en la jerarquía de la aplicación.\n\n**Ejemplo de Uso:**\n```tsx\nimport { CodeplexMigasPan } from '@codeplex-sac/navigation';\n\nconst RUTA = [\n  { etiqueta: 'Artículos', href: '/blog' },\n  { etiqueta: 'Tecnología', href: '/blog/tech' },\n  { etiqueta: 'Componentes UI' } // Último elemento sin link\n];\n\nexport const Navegacion = () => (\n  <CodeplexMigasPan \n    elementos={RUTA} \n    rutaInicio=\"/\" \n    colorActivo=\"primary.main\"\n  />\n);\n```\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `elementos` | `Array<Miga>` | - | Lista con `etiqueta`, `href` e `icono`. |\n| `rutaInicio`| `string` | - | Activa botón \"Inicio\" redirigiendo a esta ruta. |\n| `colorActivo`| `string` | `'text.primary'`| Color del texto del último elemento. |\n| `separador` | `ReactNode` | `NavigateNext` | Icono o carácter divisor entre elementos. |\n\n---\n\n#### CodeplexEnlace (Link)\nSimplifica la creación de vínculos de navegación con estilos consistentes y soporte para polimorfismo.\n\n**Ejemplo de Uso:**\n```tsx\nimport { CodeplexEnlace } from '@codeplex-sac/navigation';\n\nexport const MiEnlace = () => (\n  <CodeplexEnlace \n    hijos=\"Ver documentación\" \n    href=\"https://google.com\" \n    subrayado=\"hover\"\n    target=\"_blank\"\n  />\n);\n```\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `hijos` | `ReactNode` | - | Contenido del enlace (texto/iconos). |\n| `href` | `string` | - | Dirección de destino. |\n| `subrayado` | `'none' \\| 'hover' \\| 'always'` | `'hover'` | Controla la visualización del subrayado. |\n| `componente` | `ElementType`| `'a'` | Etiqueta base (útil para `Link` de React Router). |\n\n---\n\n#### CodeplexPaginacion (Pagination)\nComponente de selección de páginas para listas extensas de datos.\n\n**Ejemplo de Uso:**\n```tsx\nimport { CodeplexPaginacion } from '@codeplex-sac/navigation';\n\nexport const Listado = () => (\n  <CodeplexPaginacion \n    total={25} \n    pagina={1} \n    alCambiar={(e, p) => console.log('Nueva página:', p)}\n    centrado\n    color=\"primary\"\n  />\n);\n```\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `total` | `number` | - | Número total de páginas. |\n| `pagina` | `number` | - | Página actual seleccionada. |\n| `alCambiar` | `Function` | - | Evento disparado al seleccionar otra página. |\n| `centrado` | `boolean` | `false` | Centra el componente en su contenedor. |\n| `variante` | `'outlined' \\| 'text'` | `'text'`| Estilo visual de los botones. |\n\n### 🖱️ Grupo 3: Menús y Acciones Flotantes\n\n#### CodeplexMenu\nMuestra una lista de opciones en una superficie temporal anclada a un componente de referencia.\n\n**Ejemplo de Uso:**\n```tsx\nimport { CodeplexMenu, CodeplexBoton } from '@codeplex-sac/ui';\n\nexport const Ejemplo = () => {\n  const [ancla, setAncla] = useState(null);\n  const ACCIONES = [\n    { etiqueta: 'Editar', icono: <EditIcon />, alHacerClick: () => alert('Editando...') },\n    { etiqueta: 'Eliminar', icono: <DeleteIcon />, sx: { color: 'error.main' } }\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**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `abierto` | `boolean` | - | Controla la visibilidad del menú. |\n| `elementoAnclaje`| `HTMLElement` | - | Elemento que sirve de referencia para la posición. |\n| `elementos` | `Array<Item>` | - | Lista de opciones con `etiqueta`, `icono` y callback. |\n| `alCerrar` | `Function` | - | Evento disparado al cerrar el menú. |\n\n---\n\n#### CodeplexMarcacionRapida (Speed Dial)\nBotón flotante (FAB) que despliega una ráfaga de acciones relacionadas al interactuar con él.\n\n**Ejemplo de Uso:**\n```tsx\nimport { CodeplexMarcacionRapida } from '@codeplex-sac/navigation';\n\nconst ACCIONES = [\n  { icono: <SaveIcon />, tituloTooltip: 'Guardar', alHacerClick: () => save() },\n  { icono: <PrintIcon />, tituloTooltip: 'Imprimir' }\n];\n\nexport const MiApp = () => (\n  <CodeplexMarcacionRapida \n    etiquetaAria=\"Acciones de archivo\"\n    icono={<EditIcon />} \n    acciones={ACCIONES}\n    direction=\"up\"\n  />\n);\n```\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `acciones` | `Array<Accion>`| - | Lista de botones internos con `icono` y `tituloTooltip`. |\n| `etiquetaAria` | `string` | - | Texto de accesibilidad (obligatorio). |\n| `icono` | `ReactNode` | - | Icono del botón principal. |\n| `direction` | `string` | `'up'` | Dirección de despliegue (up, down, left, right). |\n\n---\n\n#### CodeplexNavegacionInferior (Bottom Navigation)\nNavegación principal fija en la base de la pantalla, optimizada para aplicaciones móviles.\n\n**Ejemplo de Uso:**\n```tsx\nimport { CodeplexNavegacionInferior } from '@codeplex-sac/navigation';\n\nconst NAV_ITEMS = [\n  { etiqueta: 'Inicio', valor: 'inicio', icono: <HomeIcon /> },\n  { etiqueta: 'Favoritos', valor: 'favs', icono: <FavoriteIcon /> },\n  { etiqueta: 'Perfil', valor: 'perfil', icono: <PersonIcon /> }\n];\n\nexport const AppMovil = () => (\n  <CodeplexNavegacionInferior \n    elementos={NAV_ITEMS} \n    valor=\"inicio\" \n    fijo\n    conPapel\n  />\n);\n```\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `elementos` | `Array<Item>` | - | Lista de pestañas con `etiqueta`, `icono` y `valor`. |\n| `valor` | `any` | - | Valor del elemento activo. |\n| `fijo` | `boolean` | `false` | Ancla la barra al final de la ventana (fixed). |\n| `conPapel`| `boolean` | `true` | Aplica sombra y elevación estilo Material Design. |\n\n---\n\n## 🎨 Integración y Diseño\n\nTodos los componentes de `@codeplex-sac/navigation` están diseñados para heredar automáticamente la identidad visual definida en `@codeplex-sac/theme`, respetando los modos claro/oscuro y utilizando la tipografía **Poppins**.\n\n## 📄 Licencia\n\nEste proyecto es propiedad privada de **Codeplex SAC**. Todos los derechos reservados.\n","readmeFilename":"README.md"}