Desenvolver
Com Preline
Como usar Sinapse + Preline em HTML puro (vanilla JS + data-attributes). Tokens semantic compatíveis — componentes Preline ficam Sinapse-coral automático.
Por que funciona
Preline UI é
framework-agnostic (HTML + Tailwind + JS plugin opcional). Usa os mesmos semantic tokens
que a Sinapse @itps/styles. Carregando nossa CSS,
os componentes Preline viram coral Sinapse automaticamente.
1 · Setup
Instalar tudo
Terminal
# 1. Tailwind v4
pnpm add tailwindcss
# 2. Preline (CSS + JS plugin)
pnpm add preline
# 3. Sinapse tokens — workspace OU copy
# workspace: pnpm add @itps/styles --workspace
# copy: cp <repo-sinapse>/packages/styles/*.css ./src/styles/2 · CSS entry
Importar Sinapse + Preline
Sinapse vem depois de Tailwind/Preline pra sobrescrever defaults:
src/styles/global.css
@import "tailwindcss";
@import "preline/dist/preline.css"; /* opcional — só se usa themes Preline */
@import "@itps/styles"; /* nossa CSS — sobrescreve com Sinapse */3 · JS plugin
Init Preline scripts
Componentes interativos (Modal, Dropdown, Accordion, Tabs) usam JS via data-attributes. Inicialize uma vez:
src/main.ts (ou layout root)
import 'preline/dist/preline'
// SPAs (Astro view transitions, Vue Router, etc) precisam re-init após navegação:
document.addEventListener('astro:page-load', () => {
window.HSStaticMethods?.autoInit()
})4 · Componentes
HTML + data-attributes
Componentes Preline = HTML puro com classes Tailwind + data-attrs. Funciona em Astro, HTML estático, qualquer stack.
Exemplo: Modal
<button type="button" data-hs-overlay="#hs-modal"
class="rounded-form bg-primary px-5 py-3 text-sm font-medium text-primary-foreground">
Abrir modal
</button>
<div id="hs-modal" class="hs-overlay hidden ...">
<div class="rounded-card bg-card text-foreground p-6">
<!-- Conteúdo modal -->
</div>
</div>Catálogo completo: preline.co/docs.
5 · Componentes Sinapse drop-in
HTML pronto — 1:1 com o DS
Componentes Preline ficam coral via tokens. Pra ficar idêntico ao Sinapse (radius, altura, hover, focus), use as classes .itps-* direto. Cole no HTML do seu projeto:
Button
<button class="itps-btn itps-btn--primary">Salvar</button>
<button class="itps-btn itps-btn--secondary">Voltar</button>
<button class="itps-btn itps-btn--ghost">Cancelar</button>
<button class="itps-btn itps-btn--outline">Editar</button>
<!-- sizes -->
<button class="itps-btn itps-btn--primary itps-btn--sm">Small</button>
<button class="itps-btn itps-btn--primary itps-btn--lg">Large</button>
<!-- icon only -->
<button class="itps-btn itps-btn--ghost itps-btn--icon" aria-label="Fechar">
<span class="material-symbols-outlined">close</span>
</button>Card
<div class="itps-card">
<h3 class="text-base font-semibold">Indicador epidemiológico</h3>
<p class="mt-1 text-sm text-muted-foreground">Casos confirmados nos últimos 7 dias.</p>
</div>
<!-- elevated (com shadow) -->
<div class="itps-card itps-card--elevated">
<h3>Título</h3>
<p>Body</p>
</div>Chip
<span class="itps-chip">Default</span>
<span class="itps-chip itps-chip--primary">Em análise</span>
<span class="itps-chip itps-chip--success">OK</span>
<span class="itps-chip itps-chip--warning">Atenção</span>
<span class="itps-chip itps-chip--danger">Erro</span>Callout
<div class="itps-callout itps-callout--info">
<span class="material-symbols-outlined shrink-0">info</span>
<div>
<p class="font-medium">Backup configurado</p>
<p class="text-sm text-muted-foreground">Backups diários às 02h.</p>
</div>
</div>
<!-- variants: info / success / warning / danger -->Input
<input type="text" class="itps-input" placeholder="Buscar..." />
<!-- estado de erro -->
<input type="email" class="itps-input itps-input--error" />Field (label + input + helper)
<div class="itps-field">
<label for="email" class="itps-field__label">Email</label>
<input type="email" id="email" class="itps-input" placeholder="voce@itps.org.br" />
<p class="itps-field__hint">Usamos somente para envio de releases internos.</p>
</div>
<!-- com erro -->
<div class="itps-field">
<label for="email" class="itps-field__label">Email</label>
<input type="email" id="email" class="itps-input itps-input--error" />
<p class="itps-field__error">Formato inválido.</p>
</div>6 · Componentes Sinapse-only
RiskClassification, DataOverlay, FeedbackIcon
Estes 3 componentes não existem em Preline. Pegue o HTML+classes da página de cada um em /componentes e cole direto no seu projeto.
Próximos passos