{"_id":"@codeplex-sac/diseno","_rev":"5-1ae9a8f64b08decda39717746204829b","name":"@codeplex-sac/diseno","dist-tags":{"latest":"0.0.20"},"versions":{"0.0.15":{"name":"@codeplex-sac/diseno","version":"0.0.15","_id":"@codeplex-sac/diseno@0.0.15","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"887c12343f8f2efc1abf6355829c01e757ca160f","tarball":"https://registry.npmjs.org/@codeplex-sac/diseno/-/diseno-0.0.15.tgz","fileCount":18,"integrity":"sha512-TZs4K5l0GkIvvEbdtgDgAZboMIAX/d4Q1x97YO85yXE4Yr+go2pwK37ZKHl++u8Ztz+tdutS4d8f8QoNj7hn+A==","signatures":[{"sig":"MEQCICeA39zrhrEMG7oL54qk97ivhqEf6m55SaXRcsXpuRYbAiBjQt6bXjufTD+a2+FNk0TEDQSEMEWuwIJ9qnUWkU+qug==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":178832},"main":"./index.js","type":"module","index":"index.css","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":"El motor de estructura y maquetación definitiva para el ecosistema **Codeplex-SAC**. Este paquete proporciona una base sólida y flexible para construir interfaces modernas, desde rejillas responsivas hasta cascarones de aplicación completos, todo con una ","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@mui/system":"^7.3.7","@mui/material":"^7.3.7","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.7"},"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/diseno_0.0.15_1780500280527_0.7553942910261784","host":"s3://npm-registry-packages-npm-production"}},"0.0.17":{"name":"@codeplex-sac/diseno","version":"0.0.17","_id":"@codeplex-sac/diseno@0.0.17","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"e3301a94757b212150a314cf6471a199cd96d106","tarball":"https://registry.npmjs.org/@codeplex-sac/diseno/-/diseno-0.0.17.tgz","fileCount":18,"integrity":"sha512-773HV0GBgaTX0qXbjjzPvOJ27MGsgrLNTv42LmppUwodGxIoDGyw3crVB0N1cl/r6qJSGUm3O5oYDefS4Yi3ZQ==","signatures":[{"sig":"MEQCIBG9vrAxF0ELwSJWNCY2RrKdlA1DEUDdft66IDczgWOSAiADIuyn6LFT4UloE8el4Rvdq8NeDBxF/g/0Qirlh9fEAw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":182522},"main":"./index.js","type":"module","index":"index.css","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":"El motor de estructura y maquetación definitiva para el ecosistema **Codeplex-SAC**. Este paquete proporciona una base sólida y flexible para construir interfaces modernas, desde rejillas responsivas hasta cascarones de aplicación completos, todo con una ","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@mui/system":"^7.3.7","@mui/material":"^7.3.7","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.7"},"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/diseno_0.0.17_1781294911800_0.6065739976033784","host":"s3://npm-registry-packages-npm-production"}},"0.0.18":{"name":"@codeplex-sac/diseno","version":"0.0.18","_id":"@codeplex-sac/diseno@0.0.18","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"032c93c366fb4ab50fbc831c15664fbf28763509","tarball":"https://registry.npmjs.org/@codeplex-sac/diseno/-/diseno-0.0.18.tgz","fileCount":18,"integrity":"sha512-qpmNzxyNLzxUax3cVZpcLOb5UYJAsHeh6gOD08GuxlPt4GZJmL0RU40RDXpWOcHCOaJlbn+TdZS7RdIl0wTxrA==","signatures":[{"sig":"MEQCIHKtGPdH+zgM1bMpS9BmATW2qNXIZiysxIgn2Y0sv6NRAiBK+/sEDZcqiVC+n8wBXP3nYZcyoTkqUyDFhSFA3YB+Mg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":182522},"main":"./index.js","type":"module","index":"index.css","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":"El motor de estructura y maquetación definitiva para el ecosistema **Codeplex-SAC**. Este paquete proporciona una base sólida y flexible para construir interfaces modernas, desde rejillas responsivas hasta cascarones de aplicación completos, todo con una ","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@mui/system":"^7.3.7","@mui/material":"^7.3.7","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.7"},"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/diseno_0.0.18_1781544029009_0.16760813498611582","host":"s3://npm-registry-packages-npm-production"}},"0.0.19":{"name":"@codeplex-sac/diseno","version":"0.0.19","_id":"@codeplex-sac/diseno@0.0.19","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"dist":{"shasum":"2606158cd2d498044734894d966298141514e86f","tarball":"https://registry.npmjs.org/@codeplex-sac/diseno/-/diseno-0.0.19.tgz","fileCount":18,"integrity":"sha512-2ZsbSWx5z4VsnIf0DUxxqCQ24KtH0asJunHDjPmat91vb6+yb8SYGCyRILlTpezzOGninXFfUUP0tsGw5f1oxA==","signatures":[{"sig":"MEUCIA7U952lXiisNnwVghOFIL18unu69H0WG1c68w65iBN7AiEAgaiX0Gt100GwR2OxD6m1hYD0HrG2sx5iy0UorhZe/GE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":182522},"main":"./index.js","type":"module","index":"index.css","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":"El motor de estructura y maquetación definitiva para el ecosistema **Codeplex-SAC**. Este paquete proporciona una base sólida y flexible para construir interfaces modernas, desde rejillas responsivas hasta cascarones de aplicación completos, todo con una ","directories":{},"_nodeVersion":"22.14.0","dependencies":{"@mui/system":"^7.3.7","@mui/material":"^7.3.7","@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.7"},"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/diseno_0.0.19_1781977523505_0.4788337796772313","host":"s3://npm-registry-packages-npm-production"}},"0.0.20":{"name":"@codeplex-sac/diseno","version":"0.0.20","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"},"index":"index.css","peerDependencies":{"react":"^19.0.0","react-dom":"^19.0.0","react-router-dom":"^6.0.0 || ^7.0.0"},"dependencies":{"@emotion/react":"^11.14.0","@emotion/styled":"^11.14.1","@mui/icons-material":"^7.3.7","@mui/material":"^7.3.7","@mui/system":"^7.3.7"},"gitHead":"c0cbacfc4475c905cb4d7a510f963be540061d0a","_id":"@codeplex-sac/diseno@0.0.20","description":"El motor de estructura y maquetación definitiva para el ecosistema **Codeplex-SAC**. Este paquete proporciona una base sólida y flexible para construir interfaces modernas, desde rejillas responsivas hasta cascarones de aplicación completos, todo con una ","_nodeVersion":"24.18.0","_npmVersion":"11.16.0","dist":{"integrity":"sha512-Mxl8ruYiDPEXbNlPRqJIuNGMd8Ky9Wna62f2Bw/zD31r7d/hgWJ3JWRTrarQgRuOMj9GjSnMrBVHv0vmtha3xA==","shasum":"a193ab77df012879095864a33818f365a6eb8782","tarball":"https://registry.npmjs.org/@codeplex-sac/diseno/-/diseno-0.0.20.tgz","fileCount":18,"unpackedSize":182522,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBlFQzKTdkTT1J9m5JBjKFxx5d88Op6sY9Sx3gqtwlPgAiEApHPdJ7HFZj28mA/YNTCxgKYHVpAzTp5sHdfvDPwOwHQ="}]},"_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/diseno_0.0.20_1782918121341_0.20504844065044647"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-03T15:24:40.354Z","modified":"2026-07-01T15:02:01.706Z","0.0.15":"2026-06-03T15:24:40.681Z","0.0.17":"2026-06-12T20:08:31.992Z","0.0.18":"2026-06-15T17:20:29.197Z","0.0.19":"2026-06-20T17:45:23.652Z","0.0.20":"2026-07-01T15:02:01.533Z"},"description":"El motor de estructura y maquetación definitiva para el ecosistema **Codeplex-SAC**. Este paquete proporciona una base sólida y flexible para construir interfaces modernas, desde rejillas responsivas hasta cascarones de aplicación completos, todo con una ","maintainers":[{"name":"b_manuel","email":"b_manuel@codeplex.pe"},{"name":"codeplexdev","email":"codeplexdev@codeplex.pe"}],"readme":"# @codeplex-sac/diseno\n\nEl motor de estructura y maquetación definitiva para el ecosistema **Codeplex-SAC**. Este paquete proporciona una base sólida y flexible para construir interfaces modernas, desde rejillas responsivas hasta cascarones de aplicación completos, todo con una API semántica en **Español**.\n\n## 🚀 Instalación\n\n```bash\nbun add @codeplex-sac/layout @mui/material @emotion/react @emotion/styled\n```\n\n---\n\n## 🏗️ Estructura Base (Grid & Flex)\n\nComponentes fundamentales para la distribución y alineación del contenido.\n\n### CodeplexCaja (Box)\nEl bloque de construcción más básico. Soporta variantes visuales avanzadas y comportamientos de layout rápidos.\n\n**Ejemplo de Uso:**\n```tsx\nimport { CodeplexCaja } from '@codeplex-sac/layout';\n\nexport const MiCaja = () => (\n  <CodeplexCaja \n    variante=\"vidrio\" \n    relleno={4} \n    centrado \n    alFlotar={{ elevar: true }}\n  >\n    Contenido con Glassmorphism\n  </CodeplexCaja>\n);\n```\n\n**Propiedades Destacadas (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `variante` | `Variante` | `'predeterminado'`| `predeterminado`, `bordeado`, `sombreado`, `vidrio`, `gradiente`. |\n| `centrado` | `boolean` | `false` | Centra el contenido en ambos ejes. |\n| `relleno` | `number \\| string`| - | Espaciado interno (padding). |\n| `alFlotar` | `object` | - | Opciones de interactividad: `{ elevar, escalar }`. |\n| `validacion`| `Validacion` | - | Feedback visual: `error`, `exito`, `advertencia`, `info`. |\n\n---\n\n### CodeplexContenedor (Container)\nCentra tu contenido horizontalmente y establece anchos máximos consistentes.\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `fluido` | `boolean` | `false` | Elimina el ancho máximo para ocupar el 100%. |\n| `anchoMaximo`| `'diminuto' \\| 'pequeno' \\| 'mediano' \\| 'grande' \\| 'enorme' \\| false` | `'grande'` | Ancho máximo del contenedor. |\n| `paginaCentrada`| `boolean` | `false` | Altura 100vh y contenido centrado. |\n\n---\n\n### CodeplexPila (Stack)\nOrganiza elementos en una dirección (fila o columna) con espaciado uniforme.\n\n**Ejemplo de Uso:**\n```tsx\nimport { CodeplexPila } from '@codeplex-sac/layout';\n\nexport const Lista = () => (\n  <CodeplexPila direccion=\"columna\" espaciado={2} divisor>\n    <div>Item 1</div>\n    <div>Item 2</div>\n  </CodeplexPila>\n);\n```\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `direccion` | `string \\| obj` | `'columna'` | `fila`, `columna`, `fila-reversa`, `columna-reversa`. |\n| `espaciado` | `number \\| string`| `0` | Factor de multiplicación para el gap. |\n| `divisor` | `boolean \\| node` | `false` | Agrega una línea o componente entre cada hijo. |\n\n---\n\n### CodeplexCuadricula (Grid)\nSistema de rejilla basado en 12 columnas, ideal para diseños complejos y responsivos.\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `contenedor` | `boolean` | `false` | Define el componente como contenedor Grid. |\n| `elemento` | `boolean` | `false` | Define el componente como item Grid. |\n| `espaciado` | `number` | - | Espacio entre columnas (Padding). |\n| `tamano` | `number \\| object`| - | Número de columnas (1-12) o breakpoints `{ xs, md }`. |\n\n---\n\n### CodeplexFila y CodeplexColumna\nUtilidades ligeras basadas en Tailwind CSS para maquetación rápida y flexible.\n\n**Ejemplo de Uso:**\n```tsx\n<CodeplexFila justificacion=\"between\" alineacion=\"center\">\n  <CodeplexColumna md={6}>Contenido Izquierdo</CodeplexColumna>\n  <CodeplexColumna md={6}>Contenido Derecho</CodeplexColumna>\n</CodeplexFila>\n```\n\n---\n\n## 🏛️ Cascarón de Aplicación (Shell)\n\nComponentes diseñados para construir la estructura de alto nivel de aplicaciones corporativas.\n\n### CodeplexEsqueleto (Standard Scaffold)\nCombina Cabecera, Barra Lateral y Pie de Página en una estructura unificada y lista para usar.\n\n**Ejemplo de Uso:**\n```tsx\nimport { CodeplexEsqueleto } from '@codeplex-sac/layout';\n\nconst MENU = [\n  { id: '1', etiqueta: 'Dashboard', icono: <DashboardIcon />, activo: true },\n  { id: '2', etiqueta: 'Usuarios', icono: <PeopleIcon /> }\n];\n\nexport const MiPantalla = () => (\n  <CodeplexEsqueleto menu={MENU} titulo=\"Admin Panel\">\n    Contenido principal de la página\n  </CodeplexEsqueleto>\n);\n```\n\n---\n\n### CodeplexCabecera (Header)\nBarra superior fija con soporte para migas de pan (breadcrumbs), búsqueda y perfil de usuario.\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `titulo` | `string` | - | Título principal (si no hay migas de pan). |\n| `migasPan` | `Array<Item>` | - | Lista de niveles con `etiqueta`, `href` y callback. |\n| `usuario` | `object` | - | `{ nombre, rol, avatar }`. |\n| `conteoNotificaciones`| `number`| `0` | Badge sobre el icono de campana. |\n| `alBuscar` | `function` | - | Callback que recibe el texto de búsqueda. |\n\n---\n\n### CodeplexBarraNavegacion (Navbar)\nBarra de navegación horizontal con soporte para logo, enlaces responsivos y perfil de usuario.\n\n**Ejemplo de Uso:**\n```tsx\n<CodeplexBarraNavegacion \n  textoLogo=\"Codeplex\"\n  enlaces={[\n    { id: '1', etiqueta: 'Inicio', activo: true },\n    { id: '2', etiqueta: 'Servicios', href: '/servicios' }\n  ]}\n  posicion=\"sticky\"\n/>\n```\n\n---\n\n### CodeplexBarraLateral (Sidebar)\nNavegación vertical avanzada con soporte para submenús, colapsado manual y modo móvil automático.\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `elementos` | `Array<Item>` | - | Árbol de navegación con `etiqueta`, `icono`, `hijos`. |\n| `colapsado` | `boolean` | `false` | Estado contraído del sidebar (solo iconos). |\n| `ancho` | `number` | `260` | Ancho del panel expandido. |\n| `alAlternar` | `function` | - | Callback ejecutado al expandir/colapsar. |\n\n---\n\n### CodeplexPanelLateral (Side Panel / Drawer)\nPanel deslizante para flujos secundarios, disponible en ambos lados y múltiples tamaños.\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `abierto` | `boolean` | - | Controla la visibilidad. |\n| `lado` | `string` | `'derecha'` | `'izquierda'` o `'derecha'`. |\n| `tamano` | `'pequeno' \\| 'mediano' \\| 'grande' \\| 'enorme' \\| 'completo'` | `'mediano'` | Tamaño del panel lateral. |\n| `pie` | `ReactNode` | - | Contenido fijo al final del panel. |\n\n---\n\n### CodeplexPiePagina (Footer)\nPie de página consistente con soporte para enlaces legales y redes sociales.\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `derechosAutor`| `string` | - | Texto de copyright personalizado. |\n| `enlaces` | `Array` | - | Lista de enlaces legales `{ etiqueta, href }`. |\n| `redesSociales`| `object` | - | `{ facebook, twitter, github, linkedin }`. |\n\n---\n\n## 📦 Contenedores de Contenido\n\n### CodeplexAcordeon\nOrganiza información en paneles colapsables con animaciones fluidas y múltiples variantes.\n\n**Ejemplo de Uso:**\n```tsx\nimport { CodeplexAcordeon } from '@codeplex-sac/layout';\n\nconst DATOS = [\n  { id: '1', titulo: 'Sección 1', contenido: 'Detalle 1', iconoIzquierda: <InfoIcon /> },\n  { id: '2', titulo: 'Sección 2', contenido: 'Detalle 2' }\n];\n\nexport const Faq = () => (\n  <CodeplexAcordeon elementos={DATOS} variante=\"separado\" multiple />\n);\n```\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `elementos` | `Array<Item>` | - | Lista de paneles con `id`, `titulo`, `contenido`. |\n| `variante` | `string` | `'simple'` | `'simple'`, `'bordeado'`, `'separado'`. |\n| `multiple` | `boolean` | `false` | Permite abrir varios paneles a la vez. |\n| `alCambiar` | `function` | - | Callback con los IDs de los items abiertos. |\n\n---\n\n### CodeplexListaImagenes (Image List)\nDistribuye una colección de imágenes en rejillas optimizadas (estándar, mosaico o mampostería).\n\n**Propiedades (Props):**\n| Propiedad | Tipo | Por Defecto | Descripción |\n| :--- | :--- | :--- | :--- |\n| `variante` | `string` | `'estandar'`| `estandar`, `mosaico`, `mamposteria`, `tejido`. |\n| `columnas` | `number` | `2` | Número de columnas en la rejilla. |\n| `espacio` | `number` | `4` | Espacio entre imágenes (px). |\n\n---\n\n## 🎨 Diseño y Consistencia\n\nTodos los componentes de `@codeplex-sac/layout` están construidos sobre los cimientos de `@codeplex-sac/theme`. Utilizan tokens de espaciado, elevaciones y colores corporativos para garantizar que la maquetación de tus aplicaciones sea impecable y profesional por defecto.\n\n## 📄 Licencia\n\nEste proyecto es propiedad privada de **Codeplex SAC**. Todos los derechos reservados.\n","readmeFilename":"README.md"}