@prolibu-suite/cobalt-react

Wrappers React (17 / 18 / 19) para los Web Components co-* del Cobalt Design System. Tipado completo, eventos como props React, mejor DX que el custom element crudo.

Recomendado si trabajás en React. Si preferís el WC directo, mirá @prolibu-suite/cobalt-core.

Instalación

pnpm add @prolibu-suite/cobalt-react @prolibu-suite/cobalt-tokens

Setup

/* CSS global */
@import '@prolibu-suite/cobalt-tokens/css';
@import '@prolibu-suite/cobalt-tokens/css/dark';

// main.jsx — registra los custom elements
import { defineCustomElements } from '@prolibu-suite/cobalt-core/loader';
defineCustomElements(window);

Uso

import { useState } from 'react';
import { CoButton, CoInput, CoSelect } from '@prolibu-suite/cobalt-react';

export function MyForm() {
  const [email, setEmail] = useState('');
  const [country, setCountry] = useState('');

  return (
    <>
      <CoInput
        label="Email"
        iconLeft="envelope"
        value={email}
        onCoInput={(e) => setEmail(e.detail)}
      />
      <CoSelect
        label="País"
        value={country}
        options={[
          { value: 'co', label: 'Colombia' },
          { value: 'mx', label: 'México' },
        ]}
        onCoChange={(e) => setCountry(e.detail)}
      />
      <CoButton label="Guardar" variant="primary" onCoClick={save} />
    </>
  );
}

Eventos custom

Los Web Components emiten eventos con prefijo co. En React, los consumís como handlers onCo*:

<CoInput
  onCoInput={(e) => /* e.detail = nuevo valor */}
  onCoChange={(e) => /* dispara en blur */}
  onCoBlur={(e) => /* foco perdido */}
/>

Documentación

→ cobalt-docs — referencia completa de componentes y theming.

License

MIT