{"_id":"@apiux-ds/design-system","name":"@apiux-ds/design-system","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@apiux-ds/design-system","version":"2.0.0","description":"Sistema de diseño Apiux con Web Components - 8 componentes optimizados para agentes de IA","main":"src/index.js","type":"module","exports":{".":"./src/index.js","./tokens":"./src/tokens/tokens.css","./button":"./src/components/button.js","./input":"./src/components/input.js","./card":"./src/components/card.js","./alert":"./src/components/alert.js","./badge":"./src/components/badge.js","./navbar":"./src/components/navbar.js","./modal":"./src/components/modal.js","./tabs":"./src/components/tabs.js","./docs":"./docs/components.json"},"scripts":{"dev":"python3 -m http.server 8080","build":"echo 'No build needed - native Web Components'","test":"echo 'Tests coming soon'","docs":"open examples/index.html","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"devDependencies":{},"keywords":["design-system","web-components","apiux","ui-components","ai-friendly","custom-elements","shadow-dom","typescript-ready"],"author":{"name":"Apiux"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/apiux/design-system.git"},"bugs":{"url":"https://github.com/apiux/design-system/issues"},"homepage":"https://github.com/apiux/design-system#readme","peerDependencies":{},"customElementsManifest":"docs/components.json","_id":"@apiux-ds/design-system@2.0.0","_nodeVersion":"24.7.0","_npmVersion":"11.5.1","dist":{"integrity":"sha512-XGBuNbyjYjMaCoxj27cqiat/bUSQwsUp1QqO9pUkIb0Cd7pHXHhWrlnITxtG8cNGBrz8MXQkxFcsVwJ0ysETiA==","shasum":"096db3c50898d6bb948077c8cf8497a81ebfa934","tarball":"https://registry.npmjs.org/@apiux-ds/design-system/-/design-system-2.0.0.tgz","fileCount":14,"unpackedSize":64139,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDKirwg64aQ4WuNJSq2qDLneytEx6s9kKYbsnjGvHdvrwIhANxPAbL1DPut1FQeVVt7WaxpPLE+urU3y7NE2yHr9muo"}]},"_npmUser":{"name":"dkangme2","email":"dkangme@gmail.com"},"directories":{},"maintainers":[{"name":"dkangme2","email":"dkangme@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system_2.0.0_1778421433350_0.7149781381910805"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-10T13:57:13.213Z","2.0.0":"2026-05-10T13:57:13.496Z","modified":"2026-05-10T13:57:13.780Z"},"maintainers":[{"name":"dkangme2","email":"dkangme@gmail.com"}],"description":"Sistema de diseño Apiux con Web Components - 8 componentes optimizados para agentes de IA","homepage":"https://github.com/apiux/design-system#readme","keywords":["design-system","web-components","apiux","ui-components","ai-friendly","custom-elements","shadow-dom","typescript-ready"],"repository":{"type":"git","url":"git+https://github.com/apiux/design-system.git"},"author":{"name":"Apiux"},"bugs":{"url":"https://github.com/apiux/design-system/issues"},"license":"MIT","readme":"# Apiux Design System\n\n> Web Components optimizados para agentes de IA\n\nSistema de diseño basado en el Brandbook Apiux 2024. Componentes encapsulados con Shadow DOM, sin dependencias externas.\n\n## 🚀 Instalación\n\n```bash\nnpm install @apiux/design-system\n```\n\n## 📦 Uso Básico\n\n### Opción 1: Importar todo\n\n```javascript\nimport '@apiux/design-system';\n```\n\n### Opción 2: Importar componentes específicos\n\n```javascript\nimport '@apiux/design-system/button';\n```\n\n### HTML básico\n\n```html\n\n\n\n \n \n\n\n Click me\n\n\n```\n\n## 🎨 Design Tokens\n\n### Colores Principales\n\n| Token | Valor | Uso |\n|-------|-------|-----|\n| `--apiux-color-yellow` | `#FFCE00` | Acción principal, marca |\n| `--apiux-color-black` | `#111111` | Texto, acción secundaria |\n| `--apiux-color-white` | `#FFFFFF` | Fondos, contraste |\n| `--apiux-color-purple` | `#4728BD` | Acento, gradientes |\n\n### Tipografía\n\n```css\n--apiux-font-family: 'Montserrat', sans-serif;\n--apiux-font-weight-regular: 400;\n--apiux-font-weight-semibold: 600;\n--apiux-font-weight-bold: 700;\n```\n\n### Espaciado\n\n```css\n--apiux-space-2: 0.5rem; /* 8px */\n--apiux-space-4: 1rem; /* 16px */\n--apiux-space-6: 1.5rem; /* 24px */\n--apiux-space-8: 2rem; /* 32px */\n```\n\n## 🧩 Componentes\n\n### apiux-button\n\nBotón con 4 variantes y 3 tamaños.\n\n#### Atributos\n\n| Atributo | Tipo | Default | Opciones |\n|----------|------|---------|----------|\n| `variant` | string | `\"primary\"` | `\"primary\"` \\| `\"secondary\"` \\| `\"outline\"` \\| `\"ghost\"` |\n| `size` | string | `\"md\"` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` |\n| `disabled` | boolean | `false` | - |\n| `full-width` | boolean | `false` | - |\n\n#### Ejemplos\n\n```html\n\n\n Acción Principal\n\n\n\n\n Acción Secundaria\n\n\n\n\n Cancelar\n\n\n\n\n Volver\n\n\n\n\n No disponible\n\n\n\n\n Enviar Formulario\n\n```\n\n## 🤖 Guía para Agentes de IA\n\n### Selección de Variantes\n\n```\nSITUACIÓN → VARIANTE\n─────────────────────────────────────\nAcción principal/CTA → variant=\"primary\"\nAcción secundaria → variant=\"secondary\" \nCancelar/Volver → variant=\"outline\"\nNavegación sutil → variant=\"ghost\"\nNo disponible → disabled\n```\n\n### Patrones Comunes\n\n#### Formulario\n\n```html\n\n```\n\n#### Grupo de acciones\n\n```html\n\n
Confirmar\n
Editar\n
Cancelar\n
Título Principal
\n \n Comenzar Ahora\n \n\n```\n\n### Reglas de Composición\n\n1. **Un solo primary por sección**: Máximo un botón `variant=\"primary\"` visible simultáneamente\n2. **Jerarquía visual**: Primary > Secondary > Outline > Ghost\n3. **Tamaños consistentes**: En un grupo, usa el mismo `size`\n4. **Full-width en mobile**: Usa `full-width` en viewports < 768px\n\n### Accesibilidad\n\n- ✅ Focus visible automático (outline amarillo)\n- ✅ Estados hover/active\n- ✅ Atributo `disabled` nativo\n- ✅ Slot content se usa como label accesible\n\n## 📚 Documentación Completa\n\nLa documentación completa en formato JSON está en:\n\n```javascript\nimport metadata from '@apiux/design-system/docs';\nconsole.log(metadata.components['apiux-button']);\n```\n\n## 🎯 Brandbook\n\nBasado en **Brandbook Apiux 2024**:\n- Propósito: \"Impact the future with talent and technology\"\n- Valores: We Care, We Create, We are Owners\n- Personalidad: Inteligentes, Cercanos, Líderes, Apasionados\n\n## 🔧 Desarrollo\n\n```bash\n# Servidor local\nnpm run dev\n\n# Ver ejemplos\nnpm run docs\n```\n\n## 📄 Estructura del Proyecto\n\n```\n@apiux/design-system/\n├── src/\n│ ├── tokens/\n│ │ └── tokens.css # Design tokens\n│ ├── components/\n│ │ └── button.js # Web Component\n│ └── index.js # Entry point\n├── docs/\n│ └── components.json # Metadata para AI\n├── examples/\n│ └── index.html # Demo interactivo\n└── package.json\n```\n\n## 🤝 Contribuir\n\n1. Fork el repositorio\n2. Crea una rama: `git checkout -b feature/nuevo-componente`\n3. Commit: `git commit -m 'Add: nuevo componente'`\n4. Push: `git push origin feature/nuevo-componente`\n5. Pull Request\n\n## 📝 Licencia\n\nMIT © Apiux\n\n## 🆘 Soporte\n\n- Email: marketing@api-ux.com\n- Issues: GitHub Issues\n- Docs: [Ver ejemplos](./examples/index.html)\n\n---\n\n**Para Agentes de IA**: Este paquete está diseñado para ser consumido por LLMs. La estructura JSON en `/docs/components.json` contiene toda la metadata necesaria para generar código correcto.\n","readmeFilename":"README.md","_rev":"1-c63f1863b66675a30e2ab0573baaddf5"}