{"_id":"@cmedinavera/design-system","_rev":"9-223078abcf70300f50d32d64fe4fc611","name":"@cmedinavera/design-system","dist-tags":{"latest":"1.0.6"},"versions":{"1.0.1":{"name":"@cmedinavera/design-system","version":"1.0.1","keywords":["angular","primeng","tailwind","design-system","uikit","components","acme"],"author":{"name":"Acme Corporation"},"license":"MIT","_id":"@cmedinavera/design-system@1.0.1","maintainers":[{"name":"cmedinavera","email":"cmedinavera@gmail.com"}],"dist":{"shasum":"503129b6192fe9b9363d73a7388ecbf4d9982b8a","tarball":"https://registry.npmjs.org/@cmedinavera/design-system/-/design-system-1.0.1.tgz","fileCount":5,"integrity":"sha512-iF08MvCSl0ETeuyTxHB37lGePKPVflG6Cj+GwoU2RonJWIV+vLzqnjhOoOVpfUnxTrjWSChHaUIHDmsDAHDlkw==","signatures":[{"sig":"MEUCIQD6WBlp5COTJuG2AykN2qSm2sb6dbVfcSC4m4H/vGCcUQIgDZrRMHcKjcQbSz0+1sJpu1J0WHSmJYSAYGPP2HArHoA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":375360},"type":"module","module":"fesm2022/cmedinavera-design-system.mjs","exports":{".":{"types":"./types/cmedinavera-design-system.d.ts","default":"./fesm2022/cmedinavera-design-system.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"0a0d2dfc6f6b87a71c4b7b5f559e47c05b32f949","typings":"types/cmedinavera-design-system.d.ts","_npmUser":{"name":"cmedinavera","email":"cmedinavera@gmail.com"},"_npmVersion":"11.12.0","description":"Enterprise UI Component Library for Acme Corporation, built with Angular 21, PrimeNG 21, and Tailwind CSS v4.","directories":{},"sideEffects":false,"_nodeVersion":"22.22.1","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"^7.8.0","primeng":"^21.0.0","primeicons":"^7.0.0","@angular/core":"^21.0.0","@angular/common":"^21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_1.0.1_1779640489541_0.45359306350811224","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@cmedinavera/design-system","version":"1.0.2","keywords":["angular","primeng","tailwind","design-system","uikit","components","acme"],"author":{"name":"Acme Corporation"},"license":"MIT","_id":"@cmedinavera/design-system@1.0.2","maintainers":[{"name":"cmedinavera","email":"cmedinavera@gmail.com"}],"dist":{"shasum":"7a243f03e0cc2505e0f6d3124ec793c13dec3f91","tarball":"https://registry.npmjs.org/@cmedinavera/design-system/-/design-system-1.0.2.tgz","fileCount":5,"integrity":"sha512-A+zqPu5E+DeYidf2QzU/IpGhyYpHghioP2lcRIUwu5awD2WwnGJAMHRSHD0cbcEhF+4d7goKFAvHpidm6J6KzQ==","signatures":[{"sig":"MEUCIBD9F/XOywq3/Wiu3GB7c2FswuDSY1mg++xZpXUBIWKuAiEA+BuMpXZ55kTktTpSLVRUelyRUy6rI/PPHJAymV818Fg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":375790},"type":"module","module":"fesm2022/cmedinavera-design-system.mjs","exports":{".":{"types":"./types/cmedinavera-design-system.d.ts","default":"./fesm2022/cmedinavera-design-system.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"6b456a2b388c6d51bf5bee48c6c007299f928bb2","typings":"types/cmedinavera-design-system.d.ts","_npmUser":{"name":"cmedinavera","email":"cmedinavera@gmail.com"},"_npmVersion":"11.12.0","description":"Enterprise UI Component Library for Acme Corporation, built with Angular 21, PrimeNG 21, and Tailwind CSS v4.","directories":{},"sideEffects":false,"_nodeVersion":"22.22.1","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"^7.8.0","primeng":"^21.0.0","primeicons":"^7.0.0","@angular/core":"^21.0.0","@angular/common":"^21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_1.0.2_1779713864605_0.5075710233893107","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@cmedinavera/design-system","version":"1.0.3","keywords":["angular","primeng","tailwind","design-system","uikit","components","acme"],"author":{"name":"Acme Corporation"},"license":"MIT","_id":"@cmedinavera/design-system@1.0.3","maintainers":[{"name":"cmedinavera","email":"cmedinavera@gmail.com"}],"dist":{"shasum":"df868b6e87cd735823b4085fa067edcc661ceeaf","tarball":"https://registry.npmjs.org/@cmedinavera/design-system/-/design-system-1.0.3.tgz","fileCount":5,"integrity":"sha512-HyEzIQvys5xD75IvU2y1Upc3cSfsS3fNEAz94gGdZ9Fj5mm4E83VU01t00l5rzWVXo9M0DzXNGDiFoOnujNaVA==","signatures":[{"sig":"MEQCIFQKiHFvAwDt93l4fF1ik0hmW/heKD8kaBNP2MVEAR6AAiBv+Dt4Pt/spdoCeXQJKrpw8Mrf+kzMUULUn2Fpfsrvxw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":512006},"type":"module","module":"fesm2022/cmedinavera-design-system.mjs","exports":{".":{"types":"./types/cmedinavera-design-system.d.ts","default":"./fesm2022/cmedinavera-design-system.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"3cb4f4ae403c3628455d2ea51cd52accc3ebdb94","typings":"types/cmedinavera-design-system.d.ts","_npmUser":{"name":"cmedinavera","email":"cmedinavera@gmail.com"},"_npmVersion":"11.12.0","description":"Enterprise UI Component Library for Acme Corporation, built with Angular 21, PrimeNG 21, and Tailwind CSS v4.","directories":{},"sideEffects":false,"_nodeVersion":"22.22.1","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"^7.8.0","primeng":"^21.0.0","primeicons":"^7.0.0","@angular/core":"^21.0.0","@angular/common":"^21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_1.0.3_1779800944364_0.7643598560203086","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@cmedinavera/design-system","version":"1.0.4","keywords":["angular","primeng","tailwind","design-system","uikit","components","acme"],"author":{"name":"Acme Corporation"},"license":"MIT","_id":"@cmedinavera/design-system@1.0.4","maintainers":[{"name":"cmedinavera","email":"cmedinavera@gmail.com"}],"dist":{"shasum":"f9c77d289da5b21d20cd95abcb450deaedf1112e","tarball":"https://registry.npmjs.org/@cmedinavera/design-system/-/design-system-1.0.4.tgz","fileCount":5,"integrity":"sha512-R+COZjnsJxq0cUxWrrLLhY7rzGfrbsaJZwvWnNfPEZaLI8/lwMVlz97uqGjspUfuA3Nw/FJ+muDdYtwBU9bXzw==","signatures":[{"sig":"MEUCIAGVLd6ApAoOon1Wq0g0qWhHrVn9Zhb6YF+vWCsLvQ+DAiEAhsUv5KkArIRwHSRfGPT2DzGQWMiUwNwrAcIA2cTXfY4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":624953},"type":"module","module":"fesm2022/cmedinavera-design-system.mjs","exports":{".":{"types":"./types/cmedinavera-design-system.d.ts","default":"./fesm2022/cmedinavera-design-system.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"68bb6bed90c4b07f7d00666eebc653d7747700b2","typings":"types/cmedinavera-design-system.d.ts","_npmUser":{"name":"cmedinavera","email":"cmedinavera@gmail.com"},"_npmVersion":"11.12.0","description":"Enterprise UI Component Library for Acme Corporation, built with Angular 21, PrimeNG 21, and Tailwind CSS v4.","directories":{},"sideEffects":false,"_nodeVersion":"22.22.1","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"^7.8.0","primeng":"^21.0.0","primeicons":"^7.0.0","@angular/core":"^21.0.0","@angular/common":"^21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_1.0.4_1779805414033_0.6710555306695596","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@cmedinavera/design-system","version":"1.0.5","keywords":["angular","primeng","tailwind","design-system","uikit","components","acme"],"author":{"name":"Acme Corporation"},"license":"MIT","_id":"@cmedinavera/design-system@1.0.5","maintainers":[{"name":"cmedinavera","email":"cmedinavera@gmail.com"}],"dist":{"shasum":"8d4c0aefb544f27f373e17fb3a02c0fb94db778c","tarball":"https://registry.npmjs.org/@cmedinavera/design-system/-/design-system-1.0.5.tgz","fileCount":5,"integrity":"sha512-aQLufpQ42taesBrPlUC7J0uMCcFjii12dlpaVvhiqkO/eLy9QR7C2jcRc5BpRogdxXYMXFfZoSBczqZev0ed5g==","signatures":[{"sig":"MEYCIQCPO864comsZ9zeJpNDMAbAKiNsWpQhaB75oqb3j75UPAIhANi/+CGOS76faOCVcvV/ayUc4j/ENLc6Me9tO8tOkhB8","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":739913},"type":"module","module":"fesm2022/cmedinavera-design-system.mjs","exports":{".":{"types":"./types/cmedinavera-design-system.d.ts","default":"./fesm2022/cmedinavera-design-system.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"471b33cab2a88746a85755a112ffb435ab5f5921","typings":"types/cmedinavera-design-system.d.ts","_npmUser":{"name":"cmedinavera","email":"cmedinavera@gmail.com"},"_npmVersion":"11.12.0","description":"Enterprise UI Component Library for Acme Corporation, built with Angular 21, PrimeNG 21, and Tailwind CSS v4.","directories":{},"sideEffects":false,"_nodeVersion":"22.22.1","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"rxjs":"^7.8.0","primeng":"^21.0.0","primeicons":"^7.0.0","@angular/core":"^21.0.0","@angular/common":"^21.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system_1.0.5_1779834846318_0.7806760199392924","host":"s3://npm-registry-packages-npm-production"}},"1.0.6":{"name":"@cmedinavera/design-system","version":"1.0.6","description":"Enterprise UI Component Library for Acme Corporation, built with Angular 21, PrimeNG 21, and Tailwind CSS v4.","author":{"name":"Acme Corporation"},"license":"MIT","keywords":["angular","primeng","tailwind","design-system","uikit","components","acme"],"publishConfig":{"access":"public"},"peerDependencies":{"@angular/common":"^21.0.0","@angular/core":"^21.0.0","primeng":"^21.0.0","primeicons":"^7.0.0","rxjs":"^7.8.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"module":"fesm2022/cmedinavera-design-system.mjs","typings":"types/cmedinavera-design-system.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./types/cmedinavera-design-system.d.ts","default":"./fesm2022/cmedinavera-design-system.mjs"}},"type":"module","gitHead":"94bed23322b134d5cfbcd59c50a3d93f5eb91fc0","_id":"@cmedinavera/design-system@1.0.6","_nodeVersion":"22.22.1","_npmVersion":"11.12.0","dist":{"integrity":"sha512-gcG63bYZLeauK/TfHNnM7W2VpVXlcD5FGeNPv51GfeFnAn3TAbBV9znbGQElwNDEoK/M6ke8Y+pgqH5oMi5Auw==","shasum":"27f214a28ebaf19c6aefc54271ba4d3da3e7f03c","tarball":"https://registry.npmjs.org/@cmedinavera/design-system/-/design-system-1.0.6.tgz","fileCount":5,"unpackedSize":879924,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDPYZfGM9Ldtn2neZWnfOqRFSD1XwxB4+1U8yYre+fK/QIgD8pDsqdyO+jGOuR2lU+eOW4/VuyOuWftbSFFtgOKxZ4="}]},"_npmUser":{"name":"cmedinavera","email":"cmedinavera@gmail.com"},"directories":{},"maintainers":[{"name":"cmedinavera","email":"cmedinavera@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_1.0.6_1779886031762_0.15308055545773036"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-24T16:34:49.450Z","modified":"2026-05-27T12:47:12.018Z","1.0.0":"2026-04-28T12:33:37.467Z","1.0.1":"2026-05-24T16:34:49.693Z","1.0.2":"2026-05-25T12:57:44.739Z","1.0.3":"2026-05-26T13:09:04.586Z","1.0.4":"2026-05-26T14:23:34.178Z","1.0.5":"2026-05-26T22:34:06.465Z","1.0.6":"2026-05-27T12:47:11.898Z"},"author":{"name":"Acme Corporation"},"license":"MIT","keywords":["angular","primeng","tailwind","design-system","uikit","components","acme"],"description":"Enterprise UI Component Library for Acme Corporation, built with Angular 21, PrimeNG 21, and Tailwind CSS v4.","maintainers":[{"name":"cmedinavera","email":"cmedinavera@gmail.com"}],"readme":"# 🎨 @cmedinavera/design-system\n\n[![npm version](https://img.shields.io/npm/v/@cmedinavera/design-system.svg?style=flat-square&color=blue)](https://www.npmjs.com/package/@cmedinavera/design-system)\n[![License](https://img.shields.io/npm/l/@cmedinavera/design-system.svg?style=flat-square&color=green)](https://github.com/cmedinavera/design-system)\n[![Angular](https://img.shields.io/badge/Angular-21+-DD0031.svg?style=flat-square&logo=angular)](https://angular.dev)\n[![PrimeNG](https://img.shields.io/badge/PrimeNG-21+-6366F1.svg?style=flat-square)](https://primeng.org)\n\n**@cmedinavera/design-system** es la biblioteca oficial de componentes UI empresariales de **Acme Corporation**. Diseñada bajo estándares de excelencia visual, accesibilidad y máxima flexibilidad responsiva, integrando de forma nativa **Angular 21**, **PrimeNG 21** y **Tailwind CSS v4**.\n\n---\n\n## ✨ Características Principales\n\n* 🧩 **Arquitectura Standalone**: Todos los componentes son completamente modulares e independientes para minimizar el bundle final.\n* 🌓 **Modo Oscuro Integrado**: Transición automática y armónica entre temas mediante variables de colores semánticos (`text-surface-700`, `bg-surface-0`, etc.).\n* 📱 **Rejilla y Flujo Responsivo**: Componentes estructurales avanzados como `<acme-stack>` que adaptan su layout automáticamente a pantallas móviles.\n* ♿ **Accesibilidad de Nivel WAI-ARIA**: Inyección de directivas ARIA nativas, asociación semántica de campos de formulario e interactividad fluida con teclado.\n* 🚀 **CVA Compilado**: Todos los componentes interactivos de formulario implementan `ControlValueAccessor` de Angular para una vinculación impecable y reactiva.\n\n---\n\n## 🌈 Sistema Cromático (Paleta de Colores)\n\nNuestra paleta de colores aprovecha la arquitectura HSL dinámica de **Tailwind CSS v4** y **PrimeNG 21**, lo que garantiza transiciones de Modo Claro a Modo Oscuro fluidas y consistentes.\n\n### 1. Colores Semánticos de Severidad (Estados)\nCada severidad está enlazada automáticamente a un conjunto de tokens CSS que controlan el color de fondo, el borde y el texto según el estado de la UI:\n\n| Severidad | Modo Claro (Fondo / Texto) | Modo Oscuro (Fondo / Texto) | Propósito y Uso |\n| :--- | :--- | :--- | :--- |\n| **`primary`** | `#6366F1` (Indigo-500) | `#818CF8` (Indigo-400) | Marca corporativa, acciones principales. |\n| **`secondary`** | `#64748B` (Slate-500) | `#94A3B8` (Slate-400) | Acciones secundarias o auxiliares. |\n| **`success`** | `#22C55E` (Green-500) | `#4ADE80` (Green-400) | Validaciones positivas, estados completados. |\n| **`info`** | `#3B82F6` (Blue-500) | `#60A5FA` (Blue-400) | Textos de ayuda, información neutral. |\n| **`warn`** | `#F59E0B` (Amber-500) | `#FBBF24` (Amber-400) | Advertencias de seguridad o precaución. |\n| **`danger`** | `#EF4444` (Red-500) | `#F87171` (Red-400) | Errores críticos, acciones destructivas. |\n\n---\n\n### 2. Escala de Grises y Superficies (Surfaces)\nPara garantizar la consistencia en los fondos y bordes de las tarjetas y modales, utilizamos la escala semántica `surface` que se adapta de forma armónica al tema actual:\n\n```\n  💡 Modo Claro (Fondo Brillante):\n  [Surface 0] ------------> [Surface 100] ------------> [Surface 200] ------------> [Surface 950]\n  #FFFFFF (Fondo)           #F1F5F9 (Separadores)       #E2E8F0 (Bordes)           #0F172A (Texto)\n\n  🌙 Modo Oscuro (Fondo Profundo):\n  [Surface 950] ----------> [Surface 900] ------------> [Surface 800] ------------> [Surface 50]\n  #090D16 (Fondo)           #0F172A (Separadores)       #1E293B (Bordes)           #F8FAFC (Texto)\n```\n\n#### Clases Semánticas Recomendadas:\n* **Fondo de la aplicación**: `bg-surface-0 dark:bg-surface-950`\n* **Tarjetas y Paneles**: `bg-surface-0 dark:bg-surface-900 border border-surface-200 dark:border-surface-800`\n* **Textos Principales**: `text-surface-900 dark:text-surface-50`\n* **Labels y Textos Secundarios**: `text-surface-700 dark:text-surface-300`\n* **Subtextos y Ayudas**: `text-surface-500 dark:text-surface-400`\n\n---\n\n## 📦 Instalación\n\nInstala el paquete y sus dependencias requeridas ejecutando en tu terminal:\n\n```bash\nnpm install @cmedinavera/design-system primeng primeicons\n```\n\n---\n\n## ⚙️ Configuración Global\n\n### 1. Importación de Estilos y Temas\n\nEn el archivo de estilos globales de tu aplicación (e.g., `styles.scss`), importa las librerías necesarias de PrimeNG y configura la tipografía corporativa **Lato**:\n\n```scss\n@import \"primeicons/primeicons.css\";\n\n@theme {\n  --font-family-sans: \"Lato\", \"Inter\", sans-serif;\n}\n\n/* Configuración de transiciones de color globales y soporte Dark Mode */\nhtml {\n  transition: background-color 0.2s ease, border-color 0.2s ease;\n  scroll-behavior: smooth;\n}\n```\n\n### 2. Importación de Componentes en Angular\n\nDado que la biblioteca es **totalmente Standalone**, puedes importar selectivamente los componentes individuales en tus controladores Angular:\n\n```typescript\nimport { Component } from '@angular/core';\nimport { \n  StackComponent, \n  InputComponent, \n  LabelComponent, \n  ButtonComponent \n} from '@cmedinavera/design-system';\n\n@Component({\n  selector: 'app-mi-formulario',\n  standalone: true,\n  imports: [StackComponent, InputComponent, LabelComponent, ButtonComponent],\n  templateUrl: './mi-formulario.html'\n})\nexport class MiFormularioComponent {\n  // ...\n}\n```\n\n---\n\n## 🛠️ Ejemplos Prácticos y Casos de Uso Comunes\n\n### Ejemplo 1: Tarjeta Contenedora Responsiva con Soporte para Modo Oscuro\nUna tarjeta corporativa que adapta su tipografía, fondos y bordes automáticamente cuando cambia el tema:\n\n```html\n<div class=\"card p-6 rounded-2xl bg-surface-0 dark:bg-surface-900 border border-surface-200 dark:border-surface-800 shadow-sm flex flex-col gap-4\">\n  <acme-stack direction=\"row\" align=\"center\" gap=\"1rem\" [responsive]=\"false\">\n    <acme-avatar image=\"assets/usuario.png\" size=\"large\" shape=\"circle\"></acme-avatar>\n    <acme-stack direction=\"column\" gap=\"0.25rem\" [responsive]=\"false\" class=\"flex-1\">\n      <h3 class=\"text-lg font-bold text-surface-900 dark:text-surface-50 m-0\">Carlos Medina Vera</h3>\n      <span class=\"text-xs text-surface-500 dark:text-surface-400\">cmedinavera@hospitalhis.com</span>\n    </acme-stack>\n    <acme-tag severity=\"success\" value=\"Administrador\"></acme-tag>\n  </acme-stack>\n  \n  <acme-divider></acme-divider>\n  \n  <p class=\"text-sm text-surface-700 dark:text-surface-300 leading-relaxed m-0\">\n    Bienvenido al panel del Sistema de Diseño del HospitalHIS. Utiliza las variables y atómicos corporativos para asegurar consistencia visual en todos tus microfrontends.\n  </p>\n</div>\n```\n\n---\n\n### Ejemplo 2: Formulario Complejo y Altamente Accesible\nLayout de formulario reactivo en cuadrícula responsiva, utilizando textos de ayuda asociados por accesibilidad:\n\n```html\n<div class=\"p-8 bg-surface-0 dark:bg-surface-950 rounded-xl border border-surface-200 dark:border-surface-800 flex flex-col gap-6\">\n  <div class=\"text-xl font-bold text-surface-900 dark:text-surface-50\">Registro de Paciente</div>\n  \n  <acme-stack direction=\"column\" gap=\"1.5rem\" [responsive]=\"false\">\n    <!-- Fila 1: Nombre y Apellido -->\n    <acme-stack direction=\"row\" gap=\"1.5rem\" [responsive]=\"true\">\n      <div class=\"flex-1 flex flex-col gap-2\">\n        <acme-label for=\"nombre-input\" [required]=\"true\">Nombre(s)</acme-label>\n        <acme-input id=\"nombre-input\" [floatLabel]=\"false\" placeholder=\"Ej. Carlos\"></acme-input>\n      </div>\n      <div class=\"flex-1 flex flex-col gap-2\">\n        <acme-label for=\"apellido-input\" [required]=\"true\">Apellido(s)</acme-label>\n        <acme-input id=\"apellido-input\" [floatLabel]=\"false\" placeholder=\"Ej. Medina\"></acme-input>\n      </div>\n    </acme-stack>\n    \n    <!-- Fila 2: Documento e Interruptor -->\n    <acme-stack direction=\"row\" gap=\"1.5rem\" [responsive]=\"true\">\n      <div class=\"flex-1 flex flex-col gap-2\">\n        <acme-label for=\"rut-input\">Cédula o Identificación</acme-label>\n        <acme-input id=\"rut-input\" [floatLabel]=\"false\" placeholder=\"12345678-9\" helpText=\"Ingrese el documento sin puntos.\"></acme-input>\n      </div>\n      <acme-stack direction=\"row\" align=\"center\" gap=\"1rem\" [responsive]=\"false\" class=\"flex-1 justify-between pt-6\">\n        <span class=\"text-sm font-medium text-surface-700 dark:text-surface-300\">¿Requiere Asistencia Médica?</span>\n        <acme-toggle-switch [(ngModel)]=\"requiereAsistencia\"></acme-toggle-switch>\n      </acme-stack>\n    </acme-stack>\n    \n    <!-- Botones de Acción -->\n    <acme-stack direction=\"row\" gap=\"1rem\" class=\"justify-end w-full pt-4\" [responsive]=\"true\">\n      <acme-button label=\"Cancelar\" severity=\"secondary\" variant=\"text\" class=\"w-full md:w-auto\"></acme-button>\n      <acme-button label=\"Guardar Paciente\" icon=\"pi pi-check\" severity=\"primary\" class=\"w-full md:w-auto\"></acme-button>\n    </acme-stack>\n  </acme-stack>\n</div>\n```\n\n---\n\n### Ejemplo 3: Tabla de Datos Avanzada (`acme-table`)\nComponente de visualización modular y paginado con soporte para plantillas personalizadas:\n\n```html\n<acme-table [value]=\"productos\" [paginator]=\"true\" [rows]=\"5\" styleClass=\"p-datatable-striped\">\n  <ng-template #header>\n    <tr>\n      <th>Código</th>\n      <th>Nombre</th>\n      <th>Categoría</th>\n      <th>Precio</th>\n    </tr>\n  </ng-template>\n  <ng-template #body let-product>\n    <tr>\n      <td>{{ product.code }}</td>\n      <td>{{ product.name }}</td>\n      <td>{{ product.category }}</td>\n      <td>{{ product.price | currency }}</td>\n    </tr>\n  </ng-template>\n</acme-table>\n```\n\n---\n\n### Ejemplo 4: Componentes de Superposición y Overlays (`acme-dialog`, `acme-popover`, `acmeTooltip`)\nMuestra cómo integrar modales con footer personalizado, popovers reactivos cargados con tablas y la directiva de tooltips sobre botones o inputs de texto:\n\n```html\n<!-- Botones para disparar overlays -->\n<acme-stack direction=\"row\" gap=\"1rem\" [responsive]=\"true\">\n  <acme-button label=\"Abrir Diálogo de Confirmación\" (onClick)=\"dialogVisible = true\" acmeTooltip=\"Haga clic para abrir la ventana modal\"></acme-button>\n  <acme-button label=\"Ver Detalles Rápidos\" severity=\"secondary\" (onClick)=\"pop.toggle($event)\" acmeTooltip=\"Haga clic para ver detalles contextuales\"></acme-button>\n</acme-stack>\n\n<!-- 1. Diálogo Modal Premium -->\n<acme-dialog header=\"Confirmar Registro de Paciente\" [(visible)]=\"dialogVisible\" [modal]=\"true\" [style]=\"{ width: '450px' }\">\n  <p class=\"text-sm text-surface-700 dark:text-surface-300 leading-relaxed m-0\">\n    ¿Está seguro de que desea guardar los datos ingresados en el expediente de este paciente? Esta acción registrará la fecha y hora actual en la bitácora.\n  </p>\n  <ng-template #footer>\n    <acme-button label=\"Cancelar\" severity=\"secondary\" [text]=\"true\" (onClick)=\"dialogVisible = false\"></acme-button>\n    <acme-button label=\"Confirmar Registro\" severity=\"success\" (onClick)=\"dialogVisible = false\"></acme-button>\n  </ng-template>\n</acme-dialog>\n\n<!-- 2. Popover Ligero Contextual -->\n<acme-popover #pop [style]=\"{ width: '280px' }\">\n  <div class=\"p-4 flex flex-col gap-2\">\n    <h4 class=\"font-bold text-surface-900 dark:text-surface-50 m-0\">Información del Sistema</h4>\n    <p class=\"text-xs text-surface-600 dark:text-surface-400 m-0\">\n      El estado actual de la red de microfrontends es <strong>Operativo (100%)</strong>. No se registran retrasos en el API gateway.\n    </p>\n  </div>\n</acme-popover>\n```\n\n---\n\n## 🧭 Catálogo Completo de Componentes (71 Componentes)\n\nTodos los componentes son de arquitectura **Standalone** (se importan de forma individual y bajo demanda). Están clasificados en las siguientes 7 categorías estructurales:\n\n### 1. Layout & Estructura (11 Componentes)\nDiseñados para estructurar y segmentar el flujo visual de tus interfaces:\n*   **`<acme-stack>`**: Flexbox inteligente que gestiona la dirección (fila/columna), espaciado (`gap`) y alineación, con soporte para reordenamiento responsivo en dispositivos móviles.\n*   **`<acme-panel>`**: Panel tipo tarjeta colapsable ideal para secciones independientes de información.\n*   **`<acme-accordion>`**: Acordeón para colapsar y expandir secciones de datos de forma compacta.\n*   **`<acme-tabs>`**: Sistema de navegación por pestañas superiores.\n*   **`<acme-fieldset>`**: Recuadro delimitador con título (leyenda) integrado en el borde superior, con soporte opcional de colapso.\n*   **`<acme-toolbar>`**: Barra de herramientas dividida en secciones para proyectar botones y controles (`start`, `center`, `end`).\n*   **`<acme-divider>`**: Separador visual responsivo que puede ser vertical u horizontal con contenido centrado.\n*   **`<acme-card>`**: Contenedor principal de tarjetas con bordes redondeados y transiciones premium.\n*   **`<acme-card-header>`**: Cabecera estructurada para albergar títulos, iconos o acciones de tarjetas.\n*   **`<acme-card-body>`**: Cuerpo central para el contenido principal de la tarjeta.\n*   **`<acme-card-footer>`**: Pie de página autoalineable diseñado para metadatos o contadores de tarjetas.\n\n### 2. Atómicos & Formularios (19 Componentes)\nControles interactivos de formularios que implementan `ControlValueAccessor` (CVA) para un enlace de datos reactivo y bidireccional impecable:\n*   **`<acme-input>`**: Entrada de texto estándar con soporte para placeholders, iconos, etiquetas y textos de ayuda accesibles.\n*   **`<acme-input-number>`**: Entrada dedicada a números con formato de moneda, porcentajes o decimales específicos.\n*   **`<acme-textarea>`**: Campo de comentarios de múltiples líneas ajustable.\n*   **`<acme-label>`**: Etiqueta para asociar controles interactivos con indicador visual de obligatoriedad (`[required]=\"true\"`).\n*   **`<acme-checkbox>`**: Casilla de confirmación y selección múltiple.\n*   **`<acme-radio>`**: Selector exclusivo de opciones circulares.\n*   **`<acme-select>`**: Menú desplegable para selección individual de datos (Combobox).\n*   **`<acme-multiselect>`**: Menú desplegable para selección múltiple de datos.\n*   **`<acme-datepicker>`**: Calendario corporativo responsivo para selección de fechas sencillas o rangos de fecha.\n*   **`<acme-calendar>`**: Selector de fechas y horas avanzado, con soporte para vistas inline, selección de rangos, horas y selección múltiple.\n*   **`<acme-autocomplete>`**: Entrada de texto predictiva con filtrado interactivo en tiempo real.\n*   **`<acme-toggle-switch>`**: Interruptor de estado binario deslizante (tipo switch de iOS/Material).\n*   **`<acme-toggle-button>`**: Botón plano que retiene estados activos/inactivos de manera visual.\n*   **`<acme-select-button>`**: Grupo de botones planos alineados donde solo uno puede estar seleccionado.\n*   **`<acme-rating>`**: Calificador en escala de estrellas.\n*   **`<acme-slider>`**: Barra de selección de rangos numéricos continuos.\n*   **`<acme-colorpicker>`**: Selector y mezclador interactivo de color.\n*   **`<acme-knob>`**: Dial giratorio de control numérico circular.\n*   **`<acme-fileupload>`**: Cargador de archivos con soporte para arrastrar y soltar (drag and drop), validación de tamaños y formatos, y visualización de progreso.\n\n### 3. Botones & Acciones (3 Componentes)\nComponentes diseñados para disparar eventos y controlar flujos:\n*   **`<acme-button>`**: Botón plano corporativo con severidades semánticas (`primary`, `success`, `danger`, etc.), soporte de carga (`[loading]=\"true\"`) y estilos de borde.\n*   **`<acme-button-group>`**: Contenedor para alinear y fusionar bordes de múltiples botones en un solo bloque visual.\n*   **`<acme-split-button>`**: Botón combinado con una acción directa a la izquierda y un disparador de menú dropdown a la derecha.\n\n### 4. Grillas & Visualización de Datos (11 Componentes)\nComponentes de alto rendimiento diseñados para renderizar y estructurar conjuntos complejos de información:\n*   **`<acme-table>`**: Tabla de datos empresariales con paginador responsivo, plantillas flexibles (`#header`, `#body`) y estilos de filas alternas.\n*   **`<acme-dataview>`**: Visualizador dinámico que transforma listas de objetos en cuadrículas de tarjetas responsivas.\n*   **`<acme-list-item>`**: Elemento de visualización reutilizable tipo tarjeta o fila para productos, adaptado para listas o grillas con soporte completo para modo claro/oscuro y stock.\n*   **`<acme-tree>`**: Visualizador modular para explorar estructuras de datos en forma de árbol colapsable.\n*   **`<acme-treetable>`**: Tabla combinada con jerarquías de árbol que permite colapsar subfilas y subcarpetas en tiempo real.\n*   **`<acme-picklist>`**: Lista de transferencia dinámica bidireccional para mover elementos entre columnas de origen y destino con controles y drag & drop.\n*   **`<acme-orderlist>`**: Lista interactiva para ordenar y priorizar colecciones de elementos con botones de desplazamiento integrados.\n*   **`<acme-chart>`**: Visualizador y estructurador de gráficos estadísticos (barras, líneas, tarta, rosca, radar, área polar) de alto rendimiento basado en Chart.js.\n*   **`<acme-timeline>`**: Línea de tiempo responsiva para visualizar flujos clínicos u hojas de ruta secuenciales en orden cronológico.\n*   **`<acme-crud>`**: Plantilla/componente completo de CRUD (Crear, Leer, Actualizar, Borrar) para administración de catálogos y datos.\n*   **`<acme-dashboard>`**: Dashboard completo responsivo que integra estadísticas, gráficos, tabla de ventas recientes y notificaciones.\n\n### 5. Visuales, Estados & Feedback (13 Componentes)\nElementos informativos rápidos y componentes para mejorar la experiencia de usuario en carga:\n*   **`<acme-avatar>`**: Caja circular u cuadrada para renderizar imágenes, iconos o iniciales del perfil del usuario.\n*   **`<acme-avatar-group>`**: Contenedor para apilar múltiples avatares superpuestos en fila (ideal para equipos colaborativos).\n*   **`<acme-badge>`**: Pequeñas insignias numéricas de estado de color asociadas a severidades.\n*   **`<acme-overlay-badge>`**: Insignia especial diseñada para superponerse automáticamente en la esquina de iconos o avatares (muy útil para notificaciones sin leer).\n*   **`<acme-tag>`**: Píldoras estáticas de estado de severidad (`success` para Completado, `danger` para Cancelado, etc.).\n*   **`<acme-chip>`**: Etiquetas tipo tag interactivas y compactas, ideales para filtros aplicados con soporte opcional de eliminación (`removable=\"true\"`).\n*   **`<acme-progressbar>`**: Barra de progreso porcentual estática, animada o de carga indeterminada.\n*   **`<acme-skeleton>`**: Cajas animadas de color gris que simulan la estructura del contenido mientras se cargan los datos reales (Skeleton Screen Loader).\n*   **`<acme-toast>`**: Contenedor de notificaciones emergentes (Toast) con estilos premium para severidades de éxito, información, advertencias, error, secundario y contraste.\n*   **`<acme-message>`**: Barra de mensaje estática en línea con el flujo de la UI, con soporte premium para severidades.\n*   **`<acme-carousel>`**: Carrusel corporativo premium y responsivo para deslizar e interactuar con listas de tarjetas u objetos.\n*   **`<acme-galleria>`**: Galería interactiva avanzada para visualizar álbumes de fotos o imágenes con miniaturas y controles táctiles.\n*   **`<acme-image>`**: Visualizador dinámico de imágenes individuales con soporte de carga diferida y modo de zoom flotante (Preview).\n\n### 6. Navegación & Menús (8 Componentes)\nDiseñados para guiar y estructurar el flujo de navegación de los usuarios a través del sistema:\n*   **`<acme-menubar>`**: Barra de navegación superior responsiva y horizontal con soporte para submenús e iconos.\n*   **`<acme-breadcrumb>`**: Hilo de Ariadna responsivo para indicar la ubicación jerárquica actual en flujos clínicos.\n*   **`<acme-menu>`**: Menú estándar vertical de enlaces o acciones, con soporte para renderizarse en línea o como ventana flotante (popup).\n*   **`<acme-tieredmenu>`**: Menú de niveles anidados con submenús laterales que se despliegan de forma interactiva.\n*   **`<acme-contextmenu>`**: Menú contextual emergente de alta fidelidad que se activa mediante clic derecho sobre un objetivo definido.\n*   **`<acme-megamenu>`**: Menú gigante de navegación organizado en una cuadrícula estructurada de múltiples columnas.\n*   **`<acme-panelmenu>`**: Menú acordeón colapsable vertical, idóneo para barras laterales de control y navegación principal.\n*   **`<acme-stepper>`**: Indicador y controlador lineal de pasos interactivos (wizard), ideal para guiar procesos secuenciales estructurados.\n\n### 7. Componentes de Superposición / Overlays (6 Componentes)\nDiseñados para desplegar paneles flotantes, notificaciones integradas y ventanas emergentes enriquecidas:\n*   **`<acme-dialog>`**: Ventana de diálogo modal o no-modal con cabecera, pie de página flexible y redimensionado responsivo.\n*   **`<acme-drawer>`**: Panel colapsable deslizante (cajón) desde cualquier extremo del viewport (izquierda, derecha, arriba, abajo o pantalla completa).\n*   **`<acme-popover>`**: Contenedor emergente ligero de posicionamiento contextual absoluto activado al hacer clic.\n*   **`<acme-confirm-popup>`**: Diálogo flotante simplificado para confirmaciones rápidas en línea (`ConfirmPopup`).\n*   **`<acme-confirm-dialog>`**: Diálogo modal simplificado para confirmaciones críticas integradas (`ConfirmDialog`).\n*   **`acmeTooltip`**: Directiva premium (`Tooltip`) que inyecta descripciones flotantes dinámicas en el costado deseado del host.\n\n---\n\n## 🚀 Scripts de Desarrollo\n\nSi estás contribuyendo al desarrollo del design system:\n\n* **Compilar la Librería**:\n  ```bash\n  npm run build:lib\n  ```\n* **Ejecutar Storybook en Entorno Local**:\n  ```bash\n  npm run storybook\n  ```\n* **Compilar Storybook Estático**:\n  ```bash\n  npm run build-storybook\n  ```\n* **Aplicar Formato Estándar (Prettier)**:\n  ```bash\n  npm run format\n  ```\n\n---\n\n## 📄 Licencia\n\nEste proyecto está bajo la Licencia **MIT** - consulta el archivo [LICENSE](LICENSE) para más detalles.\n","readmeFilename":"README.md"}