{"_id":"@corporacion-de-bienes-de-capital/cbc-ui","_rev":"2-83780e3f606fd081f90487847e66de84","name":"@corporacion-de-bienes-de-capital/cbc-ui","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@corporacion-de-bienes-de-capital/cbc-ui","version":"1.0.0","keywords":["css","design-system","design-tokens","cbc"],"author":{"name":"Corporación de Bienes de Capital"},"license":"UNLICENSED","_id":"@corporacion-de-bienes-de-capital/cbc-ui@1.0.0","maintainers":[{"name":"soportecbc","email":"soporte@cbc.cl"}],"homepage":"https://github.com/Corporacion-de-Bienes-de-Capital/cbc-ui#readme","bugs":{"url":"https://github.com/Corporacion-de-Bienes-de-Capital/cbc-ui/issues"},"dist":{"shasum":"0f20221b31805bccffde46859937e6be74ad4232","tarball":"https://registry.npmjs.org/@corporacion-de-bienes-de-capital/cbc-ui/-/cbc-ui-1.0.0.tgz","fileCount":4,"integrity":"sha512-sBUx7fVHA9cnSanjaARC9CM4uLtomp6G6XAOByFlEMbSvFoWXc0QDQHh40P9uHabjNYEWpu6dZPw0UNysYuhPQ==","signatures":[{"sig":"MEYCIQDSTFo2YzqnITjfQb+MqwXDoCC3hJwT+gwxDJ8n6TE/0QIhAOoTo2+aQZIUCr8BF8ufUtt2FRhZhRWJlD9tCTWxEeMe","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":51930},"type":"module","exports":{".":{"style":"./dist/index.css","default":"./dist/index.css"}},"gitHead":"3faf69bdbd63b296834cb31b3f201dbbdb0ec0c1","scripts":{"build":"postcss src/index.css -o dist/index.css","prebuild":"npm run generate:spacing","prepublishOnly":"npm run build","generate:spacing":"node scripts/generate-spacing.cjs"},"_npmUser":{"name":"soportecbc","email":"soporte@cbc.cl"},"repository":{"url":"git+https://github.com/Corporacion-de-Bienes-de-Capital/cbc-ui.git","type":"git"},"_npmVersion":"10.9.1","description":"Biblioteca de estilos CSS de Corporación de Bienes de Capital: design tokens, tokens semánticos, utilidades y componentes reutilizables.","directories":{},"_nodeVersion":"22.16.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"postcss":"^8.5.16","postcss-cli":"^11.0.1","postcss-import":"^16.1.1"},"_npmOperationalInternal":{"tmp":"tmp/cbc-ui_1.0.0_1783701919715_0.874486288495337","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2026-07-10T16:45:19.575Z","modified":"2026-07-10T16:53:54.969Z","1.0.0":"2026-07-10T16:45:19.882Z"},"bugs":{"url":"https://github.com/Corporacion-de-Bienes-de-Capital/cbc-ui/issues"},"author":{"name":"Corporación de Bienes de Capital"},"license":"UNLICENSED","homepage":"https://github.com/Corporacion-de-Bienes-de-Capital/cbc-ui#readme","keywords":["css","design-system","design-tokens","cbc"],"repository":{"url":"git+https://github.com/Corporacion-de-Bienes-de-Capital/cbc-ui.git","type":"git"},"description":"Biblioteca de estilos CSS de Corporación de Bienes de Capital: design tokens, tokens semánticos, utilidades y componentes reutilizables.","maintainers":[{"email":"doyarce@cbc.cl","name":"diegooyarce"},{"email":"soporte@cbc.cl","name":"soportecbc"}],"readme":"# CBC UI\n\nBiblioteca de estilos de CBC basada en **Design Tokens**, **tokens semánticos**, **utilidades CSS** y **componentes reutilizables**. Su objetivo es proporcionar una base visual consistente para el desarrollo de aplicaciones y sitios web de la organización.\n\nSe distribuye como una única hoja de estilos compilada (`dist/index.css`). No incluye JavaScript, ni bindings de framework, ni lógica de componentes: **es CSS puro**.\n\nPaquete: `@corporacion-de-bienes-de-capital/cbc-ui` · publicado públicamente en **npm** (uso restringido — ver [Licencia y uso restringido](#licencia-y-uso-restringido)).\n\n---\n\n## Características\n\n* Sistema de Design Tokens.\n* Tokens semánticos para colores, superficies, acciones y capas.\n* Utilidades CSS para layout y espaciado.\n* Componentes reutilizables.\n* Arquitectura modular basada en CSS.\n* Playground para pruebas y desarrollo.\n\n---\n\n## Instalación\n\nEl paquete se publica públicamente en **npm**, por lo que no requiere autenticación ni configuración de `.npmrc` para instalarlo:\n\n```bash\nnpm install @corporacion-de-bienes-de-capital/cbc-ui\n```\n\n> Aunque la instalación es abierta, el uso del paquete está sujeto a la licencia del proyecto — ver [Licencia y uso restringido](#licencia-y-uso-restringido).\n\n---\n\n## Licencia y uso restringido\n\nEste paquete se distribuye bajo licencia **`UNLICENSED`** (todos los derechos reservados). Se publica en el registro público de npm únicamente por conveniencia técnica de distribución: cualquiera puede descargarlo, pero **su uso, modificación o integración está reservado a proyectos de Corporación de Bienes de Capital y sus afiliados autorizados**. Cualquier otro uso requiere autorización previa y expresa. Ver el archivo [`LICENSE`](./LICENSE) para el texto completo.\n\n---\n\n## Uso en proyectos\n\nLa librería expone una única hoja de estilos. Basta con importarla una vez en el punto de entrada de tu aplicación; a partir de ahí, todas las clases (`cbc-*`) y variables (`--cbc-*`) quedan disponibles globalmente.\n\n### Con un bundler (Vite, webpack, Next.js, etc.)\n\nDesde un archivo **CSS**:\n\n```css\n@import \"@corporacion-de-bienes-de-capital/cbc-ui\";\n```\n\nO desde el **entry point JS/TS**:\n\n```js\nimport \"@corporacion-de-bienes-de-capital/cbc-ui\";\n```\n\n### Sin bundler (HTML plano)\n\nEnlaza directamente el CSS compilado desde `node_modules`:\n\n```html\n<link rel=\"stylesheet\" href=\"node_modules/@corporacion-de-bienes-de-capital/cbc-ui/dist/index.css\" />\n```\n\n### Ejemplo de uso\n\nUna vez importada la hoja de estilos, se combinan componentes y utilidades:\n\n```html\n<button class=\"cbc-button cbc-button--primary\">Guardar</button>\n\n<div class=\"cbc-card cbc-p-4 cbc-mt-4\">\n  <p class=\"cbc-text-brand\">Contenido de la tarjeta</p>\n</div>\n```\n\nLos componentes disponibles son `button`, `card`, `input`, `drawer` y `modal`, además de las utilidades atómicas de layout, espaciado, colores, tipografía, bordes y sombras.\n\n---\n\n## Estructura del proyecto\n\n```text\ncbc-ui/\n├── playground/\n│   ├── buttons.html\n│   ├── cards.html\n│   ├── drawer.html\n│   ├── inputs.html\n│   ├── modal.html\n│   └── playground.html\n│\n├── scripts/\n│   └── generate-spacing.cjs\n│\n├── src/\n│   ├── components/\n│   ├── semantic/\n│   ├── tokens/\n│   ├── utilities/\n│   └── index.css\n│\n├── dist/\n│   └── index.css\n│\n├── package.json\n├── postcss.config.js\n└── README.md\n```\n\n---\n\n## Arquitectura\n\n### Tokens\n\nContienen los valores base del sistema de diseño.\n\nEjemplos:\n\n* Colores\n* Espaciados\n* Tipografía\n* Sombras\n* Blur\n\nLos componentes y la semántica utilizan estos valores como fuente de verdad.\n\n---\n\n### Tokens semánticos\n\nRepresentan la intención de uso de un token, desacoplando los componentes de valores específicos.\n\nEjemplos:\n\n* Surface\n* Text\n* Border\n* Action\n* Z-index\n\n---\n\n### Utilidades\n\nConjunto de clases reutilizables para acelerar la construcción de interfaces.\n\nIncluyen utilidades para:\n\n* Layout\n* Display\n* Flexbox\n* Grid\n* Posicionamiento\n* Espaciados\n* Tamaños\n* Bordes\n* Tipografía\n\n---\n\n### Componentes\n\nLos componentes encapsulan patrones visuales reutilizables construidos sobre los tokens y utilidades del sistema.\n\nActualmente la biblioteca incluye:\n\n* Button\n* Card\n* Drawer\n* Input\n* Modal\n\n---\n\n## Desarrollo local\n\nRequiere Node.js. Instala las dependencias y usa los scripts disponibles:\n\n```bash\nnpm install              # instalar dependencias de desarrollo\nnpm run build            # genera utilidades de espaciado y compila src/index.css -> dist/index.css\nnpm run generate:spacing # regenera src/utilities/spacing.css desde scripts/generate-spacing.cjs\n```\n\nLa carpeta `playground` contiene ejemplos de uso de los componentes y sirve como entorno de pruebas. Los HTML enlazan `../src/index.css` directamente, por lo que puedes iterar sobre el código fuente sin ejecutar el build.\n\n> `src/utilities/spacing.css` se genera automáticamente: **no lo edites a mano**; modifica `scripts/generate-spacing.cjs` y ejecuta `npm run generate:spacing`.\n\n---\n\n## Publicación (mantenedores)\n\nEl paquete se publica en el registro público de **npm**. `publishConfig.access: \"public\"` en `package.json` ya indica que el paquete (con scope) debe publicarse como público, sin flags adicionales.\n\n> **Prerequisito (una sola vez):** el scope `@corporacion-de-bienes-de-capital` debe existir en npmjs.com. Crea una organización npm gratuita con ese nombre (permite paquetes públicos sin costo) o confirma que ya existe y que tu cuenta tiene permiso de publicación.\n\n1. **Autenticarse** con tu cuenta personal de npm:\n\n   ```bash\n   npm login\n   ```\n\n2. **Versionar** siguiendo [SemVer](https://semver.org/lang/es/):\n\n   ```bash\n   npm version patch   # o minor / major\n   ```\n\n3. **Publicar**:\n\n   ```bash\n   npm publish\n   ```\n\n   El script `prepublishOnly` compila automáticamente `dist/index.css` antes de cada publicación, evitando subir un artefacto desactualizado.\n\n> El campo `repository` de `package.json` vincula el paquete publicado con este repositorio en GitHub. Mantenlo actualizado si el repositorio cambia de nombre u organización.\n\n---\n\n## Principios del proyecto\n\n* Utilizar Design Tokens como única fuente de valores.\n* Preferir tokens semánticos dentro de los componentes.\n* Mantener una arquitectura modular y escalable.\n* Incorporar nuevos componentes únicamente cuando exista evidencia de reutilización dentro del producto.\n* Evitar duplicación de estilos.\n\n---\n\n## Estado\n\nVersión **1.0.0**\n\nEsta versión establece la base del sistema de diseño e incluye los componentes y utilidades fundamentales para el desarrollo de interfaces dentro de CBC.\n","readmeFilename":"README.md"}