{"_id":"@apiux-ds/design-system-full","_rev":"3-dc9d52ddda3b2428d667f79051aa413a","name":"@apiux-ds/design-system-full","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@apiux-ds/design-system-full","version":"1.0.0","keywords":["apiux","design-system","react","design-tokens","wcag"],"license":"UNLICENSED","_id":"@apiux-ds/design-system-full@1.0.0","maintainers":[{"name":"dkangme2","email":"dkangme@gmail.com"}],"dist":{"shasum":"6f05edb2c8664cdd949797da894a03ebb2af80c3","tarball":"https://registry.npmjs.org/@apiux-ds/design-system-full/-/design-system-full-1.0.0.tgz","fileCount":131,"integrity":"sha512-zmRmwTvXca86AdoqYfthTGd6vI0IYk6DHrFhyXX1Jcv2D5HQf82bKJk7aAgFRmS3wKjAFCKgWq/4ZdARgLB+Hw==","signatures":[{"sig":"MEUCIQCxt7uSULvVhr3hhv5NV+noADzwd+vOugSLHgvs8IpfIQIgVU8xo+T/zQKCk53h+exPRGTHtzDeJ59u8nmMKVabWpA=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":224328},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./tokens":{"types":"./dist/tokens/tokens.d.ts","import":"./dist/tokens/tokens.js","default":"./dist/tokens/tokens.js"},"./styles.css":"./dist/styles.css","./tokens.css":"./dist/tokens.css","./package.json":"./package.json"},"private":false,"scripts":{"build":"npm run check:contrast && npm run build:js && npm run build:css","build:js":"tsc -p tsconfig.build.json","build:css":"node scripts/build-css.mjs","typecheck":"tsc -p tsconfig.build.json --noEmit","check:contrast":"node scripts/check-contrast.mjs","prepublishOnly":"npm run build"},"_npmUser":{"name":"dkangme2","email":"dkangme@gmail.com"},"_npmVersion":"11.12.1","description":"Design System de Apiux — tokens y componentes React derivados del Brandbook Apiux 2024.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"25.9.0","dependencies":{"@fontsource/montserrat":"^5.0.0"},"publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.5.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system-full_1.0.0_1788950541757_0.33394473923507295","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@apiux-ds/design-system-full","version":"1.0.2","keywords":["apiux","design-system","react","design-tokens","wcag"],"license":"SEE LICENSE IN LICENSE","_id":"@apiux-ds/design-system-full@1.0.2","maintainers":[{"name":"dkangme2","email":"dkangme@gmail.com"}],"dist":{"shasum":"959d52c0791f08dbead9d61a1a6beaae559c4105","tarball":"https://registry.npmjs.org/@apiux-ds/design-system-full/-/design-system-full-1.0.2.tgz","fileCount":132,"integrity":"sha512-hN3NRTqWKCH+d4xSm3FXLgLLYE7SjZXTGEcr8YaQCSusFoCMLmJ2pWigg/vZKHvcwc+1lHj0/Jr7Ty4smQLpAA==","signatures":[{"sig":"MEYCIQCQ+vuOo5JBYsH+T3WzUf5TWLNHmYWSGH0f1OPKPO8gyAIhAJ4GwCtzuLZttgy3MqMudRd1MbSM1rP7kbWqqi9M0Shd","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":225563},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./tokens":{"types":"./dist/tokens/tokens.d.ts","import":"./dist/tokens/tokens.js","default":"./dist/tokens/tokens.js"},"./styles.css":"./dist/styles.css","./tokens.css":"./dist/tokens.css","./package.json":"./package.json"},"private":false,"scripts":{"build":"npm run check:contrast && npm run build:js && npm run build:css","build:js":"tsc -p tsconfig.build.json","build:css":"node scripts/build-css.mjs","typecheck":"tsc -p tsconfig.build.json --noEmit","check:contrast":"node scripts/check-contrast.mjs","prepublishOnly":"npm run build"},"_npmUser":{"name":"dkangme2","email":"dkangme@gmail.com"},"_npmVersion":"11.12.1","description":"Design System de Apiux — tokens y componentes React derivados del Brandbook Apiux 2024.","directories":{},"sideEffects":["*.css"],"_nodeVersion":"25.9.0","dependencies":{"@fontsource/montserrat":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.5.0","@types/react":"^18.3.0","@types/react-dom":"^18.3.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system-full_1.0.2_1788951356296_0.8917531088354551","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"_id":"@apiux-ds/design-system-full@1.0.3","dist":{"shasum":"334d23d4c60870b1b919e01814b10f894b14e344","tarball":"https://registry.npmjs.org/@apiux-ds/design-system-full/-/design-system-full-1.0.3.tgz","fileCount":132,"integrity":"sha512-1RcQdck4S5sI7Q9N+1hkUbvrJyuqVm+oUtPyjQy7mx08pfNK3m+zcH9uEvUg+m7owqDI9NBCAdjBeySbUPykbA==","signatures":[{"sig":"MEQCIHLeLrUlbgf/qLL18XhGLIaVV7TcSe3jP7PDvo2itW32AiAYYxlZVJahcSewM5C++gY+zYITqr/DNKzpWLQIUaOB2w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"},{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCulKWnixIsAmmsFA9Pkql4VHtBG2l7z3KNHE67cTtFtQIhAP36cj8j+XcDUN4H+hIMwAayKUt5SNH33Ma8+tE13YXJ"}],"unpackedSize":228347},"main":"./dist/index.js","name":"@apiux-ds/design-system-full","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","default":"./dist/index.js"},"./tokens":{"types":"./dist/tokens/tokens.d.ts","import":"./dist/tokens/tokens.js","default":"./dist/tokens/tokens.js"},"./styles.css":"./dist/styles.css","./tokens.css":"./dist/tokens.css","./package.json":"./package.json"},"gitHead":"4b9f3c106385c268da149a3946bb1bdfd8066bdc","license":"SEE LICENSE IN LICENSE","private":false,"scripts":{"build":"npm run check:contrast && npm run build:js && npm run build:css","build:js":"tsc -p tsconfig.build.json","build:css":"node scripts/build-css.mjs","typecheck":"tsc -p tsconfig.build.json --noEmit","test:modal":"node scripts/verificar-modal.mjs","check:contrast":"node scripts/check-contrast.mjs","prepublishOnly":"npm run build"},"version":"1.0.3","_npmUser":{"name":"dkangme2","email":"dkangme@gmail.com"},"keywords":["apiux","design-system","react","design-tokens","wcag"],"_npmVersion":"11.12.1","description":"Design System de Apiux — tokens y componentes React derivados del Brandbook Apiux 2024.","directories":{},"maintainers":[{"name":"dkangme2","email":"dkangme@gmail.com"}],"sideEffects":["*.css"],"_nodeVersion":"25.9.0","dependencies":{"@fontsource/montserrat":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^19.3.0","esbuild":"^0.28.2","react-dom":"^19.3.0","playwright":"^1.63.0","typescript":"^5.5.0","@types/react":"^18.3.31","@types/react-dom":"^18.3.7"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system-full_1.0.3_1789506603171_0.19841921431208598"}}},"time":{"created":"2026-09-09T10:42:21.612Z","modified":"2026-09-15T21:10:03.461Z","1.0.0":"2026-09-09T10:42:21.907Z","1.0.2":"2026-09-09T10:55:56.435Z","1.0.3":"2026-09-15T21:10:03.268Z"},"license":"SEE LICENSE IN LICENSE","keywords":["apiux","design-system","react","design-tokens","wcag"],"description":"Design System de Apiux — tokens y componentes React derivados del Brandbook Apiux 2024.","maintainers":[{"name":"dkangme2","email":"dkangme@gmail.com"}],"readme":"# @apiux-ds/design-system-full\n\nDesign System de **Apiux**: tokens y componentes React derivados del *Brandbook Apiux 2024*.\nEs la única fuente de verdad visual para los fronts de la organización y el paquete que\nconsume el skill `react-admin-shell`.\n\n- 28 componentes React tipados (`.d.ts` publicados)\n- Light y dark completos, con `data-theme` y `prefers-color-scheme`\n- Contraste WCAG 2.2 AA verificado por script en cada build\n- Cero colores inventados: todo sale del brandbook o es una derivación comentada en `tokens.css`\n\n---\n\n## Instalación\n\n```bash\nnpm install @apiux-ds/design-system-full\n```\n\n`react` y `react-dom` (>=18) son *peer dependencies*: los aporta la app.\n\n## Uso\n\n```tsx\n// main.tsx — una sola vez, lo antes posible\nimport '@apiux-ds/design-system-full/styles.css';\n// Tipografía de marca (brandbook p.16). Los pesos que use tu app:\nimport '@fontsource/montserrat/400.css';\nimport '@fontsource/montserrat/500.css';\nimport '@fontsource/montserrat/600.css';\nimport '@fontsource/montserrat/700.css';\n```\n\n```tsx\nimport { Button, Card, FormField, Input, useTheme } from '@apiux-ds/design-system-full';\n\nexport function Pantalla() {\n  const { isDark, toggleTheme } = useTheme();\n  return (\n    <Card header=\"Nueva propuesta\">\n      <FormField label=\"Cliente\" required>\n        <Input placeholder=\"Ej: Superintendencia de Educación\" />\n      </FormField>\n      <Button variant=\"primary\">Guardar</Button>\n      <Button variant=\"ghost\" onClick={toggleTheme}>\n        {isDark ? 'Tema claro' : 'Tema oscuro'}\n      </Button>\n    </Card>\n  );\n}\n```\n\n### Solo los tokens\n\n```ts\nimport '@apiux-ds/design-system-full/tokens.css';          // variables CSS\nimport { tokens, chartPalette } from '@apiux-ds/design-system-full/tokens'; // valores en JS\n```\n\n### Tema claro/oscuro\n\nEl tema se controla con el atributo **`data-theme`** en `<html>` (`light` | `dark`).\n\n- Si usas `useTheme()`, el hook lo escribe y lo persiste en `localStorage` (clave `apiux-theme`).\n- Si tu app maneja el tema por su cuenta (por ejemplo el `ThemeContext` de `react-admin-shell`),\n  basta con que escriba ese mismo atributo.\n- Sin atributo, la hoja respeta `prefers-color-scheme`, así que el primer paint ya sale correcto.\n\nPara pintar el fondo de la página con el token del tema, agrega `class=\"apx-body\"` al `<body>`\no `class=\"apx-app\"` al contenedor raíz.\n\n### Íconos\n\nEl DS no trae set propio (el brandbook define construcción de íconos, no una librería).\nEl estándar es **`lucide-react`**, igual que en `react-admin-shell`:\n\n```bash\nnpm install lucide-react\n```\n\n```tsx\nimport { Plus } from 'lucide-react';\n<Button variant=\"primary\" leftIcon={<Plus size={18} strokeWidth={2} />}>Nueva propuesta</Button>\n```\n\n---\n\n## Arquitectura de tokens\n\nDos capas, siempre en este orden:\n\n1. **Marca** — `--apiux-*`: los valores literales del brandbook (`--apiux-yellow: #ffce00`).\n   No cambian entre temas.\n2. **Semántica** — `--color-*`, `--space-*`, `--radius-*`, `--shadow-*`, `--font-*`:\n   los que consumen los componentes y las apps. Sí cambian entre temas.\n\nEn una app **siempre** se usa la capa semántica. Usar `--apiux-yellow` directo rompe el modo oscuro.\n\nAlias del contrato con `react-admin-shell`: `--color-bg`, `--color-bg-elevated`, `--color-surface`,\n`--color-border`, `--color-border-strong`, `--color-text`, `--color-text-muted`, `--color-text-inverse`,\n`--color-primary`, `--color-primary-soft`, `--color-primary-contrast`, `--color-accent`,\n`--color-accent-soft`, `--color-accent-contrast`, `--color-hover`, `--color-active`, `--color-focus`,\n`--color-success|warning|danger|info` (+ `-soft` y `-contrast`), `--font-body`, `--font-heading`,\n`--radius-sm|md|lg|full`, `--shadow-sm|md|lg`, `--space-1..16`, `--transition-fast|base`.\n\n---\n\n## Desarrollo\n\n```bash\nnpm install\nnpm run build          # check de contraste + tsc (JS y .d.ts) + styles.css\nnpm run check:contrast # solo la verificación WCAG\nnpm run typecheck\n```\n\n`scripts/check-contrast.mjs` recorre todos los pares texto/fondo declarados en `tokens.css`\nen light y en dark y falla si alguno queda bajo 4.5:1 (3:1 para bordes y foco).\n**Un par que no cumple se corrige ajustando el gris o el semántico derivado, nunca el color de marca.**\n\n## Publicación\n\nEl paquete queda listo con la versión y el CHANGELOG. Para publicar, desde tu sesión ya autenticada:\n\n```bash\nnpm publish --access public\n```\n\n> El scope `@apiux-ds` debe existir como organización en npmjs.com antes del primer\n> publish (npmjs.com → *Add Organization*, plan gratuito = paquetes públicos ilimitados).\n> Un `404 Not Found` en el `PUT` significa que el scope no existe o tu usuario no es miembro.\n\n## Documentación\n\n- `docs/AI-GUIDE.md` — jerarquía de color, árboles de decisión, patrones y antipatrones de la marca.\n- `docs/components.json` — metadata de los 28 componentes con props, defaults y opciones.\n\n## Licencia\n\n© Apiux Tecnología. Todos los derechos reservados. El paquete se distribuye públicamente\npara uso en los productos y proyectos de Apiux; la marca, el logo y la paleta son propiedad\nde Apiux y su uso fuera de ese contexto no está autorizado. Ver `LICENSE`.\n","readmeFilename":"README.md"}