@prolibu-suite/cobalt-core
v0.1.2
Published
Cobalt Design System — Framework-agnostic Web Components built with Stencil
Downloads
918
Maintainers
agoxReadme
@prolibu-suite/cobalt-core
53 Web Components co-* framework-agnostic del Cobalt Design System, construidos con Stencil.
Elemento #27. El azul que no se desvanece. La estructura invisible que hace que todo funcione.
Instalación
pnpm add @prolibu-suite/cobalt-core @prolibu-suite/cobalt-tokensUso
Vue / React / Svelte / cualquier bundler
// main.js — registra todos los custom elements
import { defineCustomElements } from '@prolibu-suite/cobalt-core/loader';
defineCustomElements(window);<co-button label="Guardar" variant="primary"></co-button>
<co-input label="Email" icon-left="envelope"></co-input>
<co-icon name="bell" weight="fill"></co-icon>Vue 3 — configurar custom elements
// vite.config.js
export default {
plugins: [vue({
template: {
compilerOptions: { isCustomElement: (tag) => tag.startsWith('co-') }
}
})]
};Sin build · vía CDN
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@prolibu-suite/[email protected]/build/css/tokens.css">
<script type="module" src="https://unpkg.com/@prolibu-suite/[email protected]/dist/cobalt/cobalt.esm.js"></script>
</head>
<body>
<co-button label="Guardar" variant="primary"></co-button>
<co-input label="Email" icon-left="envelope"></co-input>
</body>
</html>Wrappers framework-específicos
Para tipado completo y mejor DX, usá los wrappers oficiales:
@prolibu-suite/cobalt-vue— Vue 3@prolibu-suite/cobalt-react— React 17/18/19
Componentes incluidos
Botones, inputs, selects, tablas, modales, drawers, tabs, tooltips, popovers, badges, chips, sidebars, autocomplete, combobox, transfer-list… 53 en total. Ver la referencia completa.
Iconos
<co-icon> usa Phosphor Icons en kebab-case:
<co-icon name="magnifying-glass"></co-icon>
<co-icon name="bell" weight="fill" size="20"></co-icon>Documentación
→ cobalt-docs — referencia completa, ejemplos y guías de theming.
License
MIT