@sbkbs/ui 1.0.6 → 2.0.0-beta.0

package/CHANGELOG.md

@@ -0,0 +1,57 @@
+# Changelog
+
+## [2.0.0] - 2026-09-24
+
+Alinhamento ao Brand Book SBK 2026. Contém mudanças incompatíveis: veja o [guia de migração](./MIGRATION.md).
+
+### Breaking
+
+- Paleta substituída pela oficial 2026 (Verde Escuro `#023631`, Ciano Escuro `#075056`, Off White `#ECEFF3`, Verde Claro `#0A5A52` e secundárias). Turquesa `#01B2AA`, paleta "O Criador" e gradiente turquesa removidos.
+- Tema padrão SBK IA (primária Verde Claro). Tema institucional SBK via `data-brand="sbk"`.
+- Tipografia restrita aos pesos 300 (corpo) e 600 (títulos). Sora removida.
+- Componentes leem apenas tokens `--sbk-*`. Nomes da 1.x (`--md-*`, `--brand-*`, `--bg-*`, `--text-*`) permanecem como aliases deprecados.
+- A lib não importa mais a fonte (use `@sbkbs/ui/fonts.css`) e não inclui mais o preflight do Tailwind no `styles.css`.
+- `Button`: prop `palette` removida; `type="button"` por padrão; loading preserva a largura.
+- `Title`: prop `gradient` removida; padrões de peso passam a 600 (títulos/subtítulos) e 300 (parágrafos).
+- `Alert` informativo usa `role="status"`. `Modal` com `role="dialog"` no painel e renderizado em portal.
+- Build CJS renomeado de `oficios-ui.umd.cjs` para `index.cjs`; CSS de `oficios-ui.css` para `styles.css` (os subpaths do `exports` continuam os mesmos).
+
+### Added
+
+- Arquitetura de estilos híbrida: tokens em CSS custom properties + preset Tailwind CSS v4 (`@sbkbs/ui/tailwind.css`), com namespace `sbk`.
+- Novos entrypoints: `tokens.css`, `tailwind.css`, `base.css`, `fonts.css`, `reset.css`, `assets/favicon/*`.
+- Tokens `--sbk-color-{success,warning,error,info}-fg` para texto e ícones de estado com contraste nos dois temas.
+- Novos componentes: `Logo` (SVGs oficiais SBK e SBK IA, zona de respiro), `Icon` (lucide-react), `IconButton`, `MiniCard`, `GlassPanel`, `Highlight`, `SideNav`, `DropdownMenu`, `Field`, subcomponentes de `Card`.
+- Exportados componentes que existiam sem export: `Avatar`, `Divider`, `ProgressBar`, `Spinner`.
+- Superfície Liquid Glass (`sbk-glass`) com fallback para `prefers-reduced-transparency` e navegadores sem `backdrop-filter`; `variant="glass"` em Button, IconButton, Card, MiniCard, Header, Footer, SideNav, Modal, Popover, DropdownMenu e Toast.
+- `ThemeProvider`: modo `system`, troca de marca (`setBrand`), `storageKey` configurável e acesso seguro ao `localStorage`.
+- `ProgressBar` indeterminado; `Skeleton` de texto; `Spinner` com label visível.
+- `Pagination` com reticências e variante `simple`; `Tabs` com variante `line` e modo controlado; `Accordion` com `type="multiple"`.
+- `Toast`: ícones por tom, ação, posições, limite de itens e pausa do timer em hover/foco.
+- Tokens em TypeScript: `sbkTokens` e `sbkChartPalette`.
+- Favicons oficiais no playground, Storybook e pacote.
+- Storybook com alternância de tema e marca na toolbar; stories para as peças novas e fundamentos.
+
+### Fixed
+
+- IDs gerados com `Math.random()` a cada render (Input, Select, Combobox e outros) substituídos por `useId`. O Combobox mudava de ID a cada tecla.
+- `id="modal-title"` fixo colidia com múltiplos modais.
+- Anel de foco azul fixo (`rgba(47,93,140)`) trocado pelo token de foco da marca.
+- `public/` deixou de ser copiado para `dist/`.
+- `.d.ts` dos stories deixou de ser publicado; classes usadas só em stories não entram mais no `styles.css`.
+- Testes E2E (Playwright) atualizados para o playground atual. Os 9 que falhavam já falhavam na 1.0.6.
+
+## [1.0.2] - 2026-03-24
+
+### Added
+
+- Playground modernizado com navegação, exemplos e blocos copiáveis.
+- Novos componentes base (feedback, form e layout).
+- Componentes avançados: tooltip, popover, tabs, accordion, toast, table e pagination.
+- Setup inicial de testes com Vitest + Testing Library.
+- Setup inicial de Storybook com addon de acessibilidade.
+
+### Changed
+
+- Migração de componentes para abordagem utilitária (Tailwind classes).
+- Refinos de tema dark mode e contraste.

package/MIGRATION.md

@@ -0,0 +1,96 @@
+# Migração da 1.x para a 2.0
+
+A 2.0 alinha a lib ao **Brand Book SBK 2026**. A mudança mais visível é a paleta: a turquesa `#01B2AA` sai e entram o Verde Claro `#0A5A52` (SBK IA) e o Verde Escuro `#023631` (SBK institucional). A maior parte das aplicações migra com os passos abaixo, sem reescrever telas.
+
+## 1. Atualize o pacote e os imports de CSS
+
+```bash
+npm install @sbkbs/ui@^2
+```
+
+```diff
+- import '@sbkbs/ui/theme.css';
++ import '@sbkbs/ui/styles.css';
++ import '@sbkbs/ui/fonts.css'; // a lib não carrega mais a fonte automaticamente
+```
+
+- `@sbkbs/ui/styles.css` continua sendo o arquivo principal. Agora ele inclui os tokens.
+- `@sbkbs/ui/theme.css` continua existindo, como alias de `tokens.css`, para não quebrar imports antigos.
+- **A fonte não é mais importada pela lib.** Importe `@sbkbs/ui/fonts.css` ou carregue Plus Jakarta Sans 300/600 por conta própria. Se o app tinha o comentário "a fonte vem da @sbkbs/ui", ajuste.
+- O CSS da lib não inclui mais o preflight (reset) do Tailwind. Apps com Tailwind já têm esse reset. Apps sem Tailwind: importe `@sbkbs/ui/reset.css` antes do `styles.css`. Os componentes funcionam sem reset, mas o restante da página pode mudar se dependia dele.
+
+## 2. Tokens: use os nomes novos
+
+Os componentes da 2.0 leem apenas `--sbk-*`. Os nomes antigos continuam definidos como **aliases deprecados** (serão removidos na 3.0), apontando para os valores novos. Isso mantém funcionando o CSS da aplicação que **lê** essas variáveis.
+
+**Sobrescrever um nome antigo não altera mais os componentes.** Por exemplo, `--md-primary: ...` no `theme.css` do app não muda mais o `Button`.
+
+| 1.x | 2.0 |
+| --- | --- |
+| `--md-primary`, `--primary-color`, `--color-primary` | `--sbk-color-primary` |
+| `--primary-color-hover` | `--sbk-color-primary-hover` |
+| `--md-secondary` | `--sbk-color-secondary` |
+| `--bg-page`, `--bg-primary` | `--sbk-color-bg` |
+| `--bg-secondary`, `--bg-card`, `--md-surface` | `--sbk-color-surface` |
+| `--bg-tertiary`, `--md-surface-container*` | `--sbk-color-surface-sunken` |
+| `--bg-hover` | `--sbk-color-surface-hover` |
+| `--text-primary`, `--md-on-surface` | `--sbk-color-fg` |
+| `--text-secondary`, `--text-muted` | `--sbk-color-fg-muted` |
+| `--border-color`, `--md-outline-variant` | `--sbk-color-line` |
+| `--border-color-hover`, `--md-outline` | `--sbk-color-line-strong` |
+| `--border-color-focus` | `--sbk-color-focus` |
+| `--md-error`, `--error-color` | `--sbk-color-error` |
+| `--success-color` / `--warning-color` / `--info-color` | `--sbk-color-success` / `-warning` / `-info` |
+| `--border-radius-*` | `--sbk-radius-xs/sm/md/lg` (4/8/12/16 px) |
+| `--shadow-*` | `--sbk-shadow-sm`, `--sbk-shadow-md` |
+| `--font-primary` | `--sbk-font-family` |
+| `--brand-verde-vibrante` | `--sbk-verde-claro` |
+| `--brand-verde-profundo` | `--sbk-verde-escuro` |
+| `--brand-grafite-azulado` | `--sbk-ciano-profundo` |
+| `--brand-off-white-gelo` | `--sbk-off-white` |
+| `--brand-cinza-medio`, `--brand-azul-acinzentado` | `--sbk-chumbo-leve` |
+
+Removidos sem alias: paleta "O Criador" (`--brand-verde-lima`, `--brand-azul-lavanda` etc.), `--gradient-espectro-turquesa`, `--font-logo` (Sora) e as paletas de botão `data-button-palette`.
+
+### Para apps com overrides próprios (ex.: Cadastro.IA)
+
+Se o app mantém uma seção "Library overrides" que sobrescreve `--md-primary`, `--md-secondary` etc. para corrigir cores da 1.x, **apague essa seção**: as cores padrão da 2.0 já seguem o brand book. Se ainda precisar de um ajuste, sobrescreva o token novo:
+
+```css
+:root {
+  --sbk-color-primary: var(--sbk-verde-escuro);
+}
+```
+
+Atenção à colisão de nomes: se o app define as próprias variáveis `--sbk-verde-escuro`, `--sbk-branco` etc. com os valores antigos (`#1f3a3a`), elas vão sobrescrever as da lib. Remova essas definições e use as da lib.
+
+## 3. Props que mudaram
+
+| Componente | 1.x | 2.0 |
+| --- | --- | --- |
+| `Button` | `palette="verde-vibrante"` e demais paletas | Removido. Use `variant`: `primary`, `secondary`, `outline`, `ghost`, `link`, `inverse`, `glass`, `success`, `error`, `warning`, `info`, `neutral` |
+| `Button` | `type` implícito `submit` | Padrão `type="button"`. Informe `type="submit"` nos formulários |
+| `Button` | `isLoading` removia o texto | O texto fica invisível (preserva a largura) e o botão recebe `aria-busy` |
+| `Title` | `gradient` | Removido (brand book: sem gradientes em texto) |
+| `Title`, `Subtitle`, `Paragraph` | `weight`: `normal`, `medium`, `bold`, `extrabold` | Ainda aceitos, **deprecados**. São mapeados para `light` (300) ou `semibold` (600). Prefira `light` ou `semibold` |
+| `Title` | padrão `weight="bold"` | padrão `semibold`, cor Verde Escuro (`color="heading"`) |
+| `Subtitle` | padrão `weight="normal"` | padrão `semibold` (brand book: subtítulos em Seminegrito) |
+| `Paragraph` | padrão `weight="normal"` (400) | padrão `light` (300) |
+| `Alert` | sempre `role="alert"` | `info`/`success` usam `role="status"`; `warning`/`error` continuam `alert` |
+| `Modal` | `role="dialog"` no overlay | `role="dialog"` no painel. Renderizado em portal no `<body>` |
+| `NumberInput` | `value` string ou number | `value?: number \| null` |
+| `Tooltip` | tooltip sempre no DOM | Sem mudança de API; agora com `side` `left`/`right` e atraso configurável |
+| `Header` | fundo `#1F3A3A`, título em Sora | `variant`: `solid` (Verde Escuro), `light`, `glass`; logo oficial via `logoVariant` |
+| `Footer` | cor do logo via JS | Cor via tokens (acompanha o tema sem JS). Novas props `links`, `copyright`, `variant` |
+| `useTheme` | `{ theme, toggleTheme }` | Mesmos campos, mais `preference`, `setTheme`, `brand`, `setBrand` |
+
+## 4. Checklist
+
+- [ ] `npm install @sbkbs/ui@^2`
+- [ ] Imports de CSS atualizados, incluindo a fonte
+- [ ] Overrides de `--md-*`/`--brand-*` removidos ou trocados por `--sbk-*`
+- [ ] Variáveis próprias `--sbk-*` com valores antigos removidas do app
+- [ ] `palette` e `gradient` removidos dos usos de `Button` e `Title`
+- [ ] Botões de submit com `type="submit"` explícito
+- [ ] Testes que buscavam `role="alert"` em alertas informativos atualizados para `status`
+- [ ] Revisão visual em claro e escuro

package/README.md

@@ -1,115 +1,221 @@
-# @sbkbs/ui
-
-Biblioteca de componentes UI e tema global para manter o mesmo padrão visual entre projetos SBK BS.
-
-## Conteúdo
-
-- **Tema**: variáveis CSS (Material Design 3) light/dark + **Guia de marca SBK** (cores e tipografia Jakarta) em `theme/theme.css` + `ThemeProvider` React.
-- **Componentes**: `Button`, `Card`, `Input`, `Modal`, `Title`, `Subtitle`, `Paragraph`, `Header`, `Footer`.
-- **Paletas de botão**: escolha a cor do botão primary via prop `palette` ou `data-button-palette` no pai (`verde-vibrante`, `grafite-azulado`, etc.).
-
-## Uso em outro projeto
-
-### 1. Instalar no monorepo
-
-No `package.json` do app (ex.: frontend), adicione:
-
-```json
-"dependencies": {
-  "@sbkbs/ui": "^1.0.2"
-}
-```
-
-Rode `npm install` na raiz do monorepo.
-
-### 2. Tema (variáveis CSS)
-
-Os componentes usam variáveis CSS (`--md-surface`, `--primary-color`, etc.). O consumidor pode:
-
-- Usar o tema da lib: `import '@sbkbs/ui/theme.css';` no entry (ex.: `main.tsx`), ou
-- Definir as mesmas variáveis no próprio CSS do projeto (o frontend OFICIO.IA já tem `theme.css` próprio).
-
-### 3. ThemeProvider (opcional)
-
-Para light/dark com toggle e persistência em `localStorage`:
-
-```tsx
-import { ThemeProvider } from '@sbkbs/ui';
-
-root.render(
-  <ThemeProvider defaultTheme="light">
-    <App />
-  </ThemeProvider>
-);
-```
-
-### 4. Componentes
-
-```tsx
-import { Button, Card, Input, Modal, Title, Subtitle, Paragraph, Header, Footer } from '@sbkbs/ui';
-
-<Button variant="primary" size="md" palette="verde-vibrante">Salvar</Button>
-<Card variant="elevated" padding="lg" hoverable>...</Card>
-<Input label="E-mail" size="md" />
-<Modal isOpen={open} onClose={() => setOpen(false)} title="Título">...</Modal>
-<Title size="2xl" weight="bold">Título</Title>
-<Subtitle size="md" muted>Subtítulo</Subtitle>
-<Paragraph size="md">Texto.</Paragraph>
-
-<Header
-  logoSrc="/logo.png"
-  logoDarkSrc="/logo-dark.png"
-  title="OFÍCIO.IA"
-  subtitle="Subtítulo"
-  onLogoClick={() => navigate('/home')}
-  rightContent={<>
-    <LanguageSelector />
-    <ThemeToggle />
-    <UserMenu />
-  </>}
-/>
-<Footer poweredByText="Powered by" logoSrc="/logo.png" logoFallbackText="SBK" />
-```
-
-### Guia de marca (tema)
-
-Cores disponíveis como variáveis CSS: `--brand-verde-vibrante`, `--brand-grafite-azulado`, `--brand-verde-profundo`, `--brand-azul-acinzentado`, `--brand-cinza-medio`, `--brand-cinza-escuro`, `--brand-off-white`, e paleta "O Criador" (`--brand-azul-intenso`, `--brand-verde-lima`, etc.). Tipografia: `--font-primary` / `--font-heading` = Plus Jakarta Sans (Google Fonts).
-
-Paletas de botão (prop `palette` ou `data-button-palette` no pai): `verde-vibrante` | `verde-profundo` | `grafite-azulado` | `azul-acinzentado` | `cinza-medio` | `cinza-escuro` | `off-white`.
-
-## Compartilhar com outro projeto
-
-- **Mesmo monorepo:** adicione o app em `workspaces` e use `"@sbkbs/ui": "*"` nas dependências; depois `npm install` na raiz.
-- **Outro repositório:** use dependência por Git (`"@sbkbs/ui": "git+https://..."`) ou publique em um registry npm e instale com `npm install @sbkbs/ui`.
-
-Guia completo: [docs/COMPARTILHAR_LIB_UI.md](../docs/COMPARTILHAR_LIB_UI.md).
-
-## Desenvolvimento
-
-- **Build**: `npm run build` dentro de `ui`.
-- **Watch**: `npm run dev` dentro de `ui`.
-- **Playground**: `npm run playground`
-- **Storybook**: `npm run storybook`
-- **Testes**: `npm run test`
-
-## Estrutura
-
-```
-ui/
-  src/
-    index.ts
-    theme/
-      theme.css
-      ThemeProvider.tsx
-    components/
-      Button/
-      Card/
-      Input/
-      Modal/
-      Title/
-      Subtitle/
-      Paragraph/
-      Header/
-      Footer/
-  dist/
-```
+# @sbkbs/ui
+
+Design system da SBK para React, construído sobre o **Brand Book SBK 2026**: tokens de marca, 50+ componentes acessíveis, tema claro/escuro, temas SBK IA e SBK institucional, e superfície Liquid Glass opcional.
+
+- Tokens em CSS custom properties (`--sbk-*`), usáveis com ou sem Tailwind
+- Preset para Tailwind CSS v4 (`bg-sbk-primary`, `text-sbk-fg-muted`, `rounded-sbk-md`)
+- CSS pré-compilado **sem reset global**: não interfere no CSS da sua aplicação
+- Somente os pesos tipográficos da marca (300 e 600) e a paleta oficial
+- Acessibilidade WCAG 2.1 AA: foco visível, navegação por teclado, ARIA e `prefers-reduced-motion`
+- Ícones com [lucide-react](https://lucide.dev)
+- ESM com tree-shaking + CJS, tipos TypeScript incluídos
+
+> Vindo da 1.x? Leia o [guia de migração](./MIGRATION.md).
+
+## Instalação
+
+```bash
+npm install @sbkbs/ui
+```
+
+Peer dependencies: `react` e `react-dom` 18 ou superior.
+
+## Configuração
+
+No entry da aplicação (ex.: `main.tsx`), importe o CSS **uma vez**:
+
+```tsx
+import '@sbkbs/ui/reset.css'; // apenas em apps SEM Tailwind (quem usa Tailwind já tem o preflight)
+import '@sbkbs/ui/styles.css'; // obrigatório: tokens + estilos dos componentes
+import '@sbkbs/ui/fonts.css'; // opcional: Plus Jakarta Sans 300/600 via Google Fonts
+import '@sbkbs/ui/base.css'; // opcional: aplica fonte, fundo e pesos da marca ao documento
+```
+
+Envolva a aplicação com o `ThemeProvider`:
+
+```tsx
+import { ThemeProvider } from '@sbkbs/ui';
+
+root.render(
+  <ThemeProvider defaultTheme="system" defaultBrand="sbk-ia">
+    <App />
+  </ThemeProvider>,
+);
+```
+
+| Arquivo | Conteúdo |
+| --- | --- |
+| `@sbkbs/ui/styles.css` | Tokens e estilos dos componentes (sem preflight) |
+| `@sbkbs/ui/tokens.css` | Apenas as variáveis CSS |
+| `@sbkbs/ui/tailwind.css` | Preset `@theme` para Tailwind CSS v4 |
+| `@sbkbs/ui/base.css` | Estilos base opcionais do documento |
+| `@sbkbs/ui/fonts.css` | Import da fonte oficial (pesos 300 e 600) |
+| `@sbkbs/ui/reset.css` | Reset (preflight do Tailwind 4) para apps sem Tailwind |
+| `@sbkbs/ui/assets/favicon/*` | Favicons e ícones de app oficiais |
+
+### Fonte hospedada localmente
+
+Se preferir não depender do Google Fonts, não importe `fonts.css` e use `@fontsource/plus-jakarta-sans` com os pesos 300 e 600.
+
+### Com Tailwind CSS v4
+
+Para usar os mesmos tokens nas classes da sua aplicação:
+
+```css
+/* index.css */
+@import 'tailwindcss';
+@import '@sbkbs/ui/tailwind.css';
+```
+
+```tsx
+<div className="rounded-sbk-md bg-sbk-surface p-4 text-sbk-fg shadow-sbk-sm">
+  <h2 className="font-semibold text-sbk-fg-heading">Título</h2>
+  <p className="font-light text-sbk-fg-muted">Texto de apoio</p>
+</div>
+```
+
+O preset não altera as cores, raios e sombras padrão do Tailwind: tudo da marca fica sob o namespace `sbk`.
+
+Cores de estado em texto e ícones: use as variantes `-fg` (`text-sbk-error-fg`, `text-sbk-success-fg`), que ficam mais claras no tema escuro para manter o contraste. As cores base (`bg-sbk-error`) são para fundos com texto branco.
+
+### Favicons
+
+```html
+<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96" />
+<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+<link rel="shortcut icon" href="/favicon.ico" />
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+<link rel="manifest" href="/site.webmanifest" />
+```
+
+Copie os arquivos de `node_modules/@sbkbs/ui/dist/assets/favicon/` para a pasta `public/` da aplicação e ajuste `name` e `short_name` no `site.webmanifest`.
+
+## Temas
+
+| Atributo no `<html>` | Efeito |
+| --- | --- |
+| (padrão) | SBK IA, produto digital: primária Verde Claro `#0A5A52` |
+| `data-brand="sbk"` | SBK institucional: primária Verde Escuro `#023631` |
+| `data-theme="dark"` | Modo escuro |
+
+O `ThemeProvider` controla esses atributos:
+
+```tsx
+const { theme, preference, setTheme, toggleTheme, brand, setBrand } = useTheme();
+setTheme('system'); // 'light' | 'dark' | 'system'
+setBrand('sbk'); // 'sbk-ia' | 'sbk'
+```
+
+Em SSR, defina `data-theme` no HTML inicial para evitar o flash de tema no primeiro paint.
+
+## Componentes
+
+| Categoria | Componentes |
+| --- | --- |
+| Marca e tipografia | `Logo`, `Title`, `Subtitle`, `Paragraph`, `Highlight`, `Icon` |
+| Ações | `Button`, `IconButton`, `DropdownMenu` |
+| Formulários | `Field`, `Input`, `NumberInput`, `Select`, `Combobox`, `Textarea`, `Checkbox`, `Radio`, `Switch`, `FileUpload` |
+| Superfícies e dados | `Card` (+ `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`), `MiniCard`, `GlassPanel`, `Table`, `Badge`, `Tag`, `Chip`, `Avatar`, `Divider`, `EmptyState` |
+| Feedback e carregamento | `Alert`, `Toast`/`ToastProvider`/`useToast`, `Spinner`, `Skeleton`, `ProgressBar` |
+| Overlays | `Modal`, `Popover`, `Tooltip`, `Accordion`, `Tabs` |
+| Navegação e estrutura | `Header`, `Footer`, `SideNav`, `Sidebar`, `Topbar`, `Breadcrumb`, `Pagination`, `Stepper`, `PageHeader`, `SectionHeader`, `Container`, `Stack`, `Grid` |
+| Utilidades | `cn`, `sbkTokens`, `sbkChartPalette`, `getInitials`, `getPageTokens` |
+
+A documentação interativa de cada componente, com props e estados, está no Storybook (`npm run storybook`).
+
+### Exemplos
+
+```tsx
+import { Save, Search } from 'lucide-react';
+import { Button, IconButton, Input, MiniCard, useToast } from '@sbkbs/ui';
+
+<Button leftIcon={<Save />} isLoading={saving}>Salvar</Button>
+<Button variant="outline">Cancelar</Button>
+<IconButton aria-label="Buscar"><Search /></IconButton>
+
+<Input label="E-mail" error={errors.email} helperText="Usaremos para notificações" />
+
+<MiniCard label="Documentos" value="1.284" delta="+12%" trend="up" />
+
+const { pushToast } = useToast();
+pushToast({ tone: 'success', title: 'Salvo', description: 'Alterações registradas.' });
+```
+
+Navegação lateral integrada ao React Router:
+
+```tsx
+import { NavLink } from 'react-router-dom';
+import { SideNav } from '@sbkbs/ui';
+
+<SideNav
+  activeId={currentId}
+  sections={[{ id: 'main', items: [{ id: 'docs', label: 'Documentos', href: '/docs' }] }]}
+  renderLink={({ href, ...props }) => <NavLink to={href} {...props} />}
+/>;
+```
+
+### Liquid Glass
+
+Superfície translúcida inspirada no material da Apple, opcional e pensada para camadas sobre conteúdo:
+
+```tsx
+<GlassPanel strong blur="lg">...</GlassPanel>
+<Header variant="glass" />
+<Card variant="glass" />
+<Modal variant="glass" />
+<Button variant="glass" />
+```
+
+Em `prefers-reduced-transparency` ou em navegadores sem `backdrop-filter`, a superfície fica opaca automaticamente. Verifique o contraste do texto sobre o conteúdo de fundo.
+
+## Regras da marca aplicadas pela lib
+
+- Paleta oficial apenas, sempre via tokens. O build da lib não gera classes de cor fora da marca.
+- Plus Jakarta Sans em dois pesos: 600 (títulos) e 300 (corpo). Fallback Calibri.
+- Fundo Off White `#ECEFF3` ou branco.
+- Cantos de 8 a 16 px em cards e blocos.
+- Sombras leves, sem ornamentos, sem emojis na interface.
+- Logo a partir dos SVGs oficiais, sem distorção, sombra ou gradiente.
+
+Referência completa: [`docs/SBK_BRAND_GUIDE.md`](../docs/SBK_BRAND_GUIDE.md).
+
+## Desenvolvimento
+
+```bash
+npm run storybook    # documentação interativa (porta 6006)
+npm run playground   # vitrine com todos os componentes
+npm run test         # testes unitários (Vitest + Testing Library)
+npm run test:visual  # testes E2E de acessibilidade (Playwright)
+npm run typecheck && npm run lint && npm run format:check
+npm run build        # gera dist/
+npm run pack:check   # confere o conteúdo do pacote antes de publicar
+```
+
+### Estrutura
+
+```text
+ui/src/
+  styles/        tokens.css, tailwind-theme.css (preset), core.css, lib.css, base.css, fonts.css
+  theme/         ThemeProvider, tokens.ts
+  utils/         cn, fragmentos de estilo compartilhados (foco, campos, escopo invertido)
+  components/    um diretório por componente: .tsx, .test.tsx, .stories.tsx
+  assets/        favicons oficiais
+  playground/    vitrine local
+```
+
+### Convenções
+
+- Componentes consomem apenas tokens semânticos (`bg-sbk-primary`, `text-sbk-fg-muted`), nunca hex nem nomes legados.
+- IDs de acessibilidade com `useId`, nunca `Math.random`.
+- Todo elemento interativo usa o anel de foco padrão (`focusRing` em `utils/styles.ts`).
+- Animações respeitam `motion-reduce`.
+- Novo componente: exportar em `src/index.ts`, com teste e story.
+
+### Publicação
+
+O workflow `.github/workflows/release.yml` publica no npm com Changesets. Para uma nova versão:
+
+```bash
+npm run changeset          # descreve a mudança e o tipo (patch/minor/major)
+git commit && git push     # o CI abre o PR de release; o merge publica
+```

package/dist/assets/favicon/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="361" height="172" viewBox="0 0 361 172"><metadata><rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><rdf:Description><dc:creator>RealFaviconGenerator</dc:creator><dc:source>https://realfavicongenerator.net</dc:source></rdf:Description></rdf:RDF></metadata><image width="361" height="172" xlink:href="data:image/png;base64,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"></image></svg>

package/dist/assets/favicon/site.webmanifest

@@ -0,0 +1,21 @@
+{
+  "name": "SBK",
+  "short_name": "SBK",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#023631",
+  "background_color": "#ECEFF3",
+  "display": "standalone"
+}

package/dist/base.css

@@ -0,0 +1,38 @@
+/* ============================================================
+   @sbkbs/ui · Base opcional (import '@sbkbs/ui/base.css')
+   Aplica fonte, pesos e fundo da marca ao documento.
+   Especificidade zero (:where) para o app sobrescrever sem esforço.
+   ============================================================ */
+
+@layer base {
+  :where(html) {
+    font-family: var(--sbk-font-family);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :where(body) {
+    margin: 0;
+    background-color: var(--sbk-color-bg);
+    color: var(--sbk-color-fg);
+    font-weight: var(--sbk-font-weight-body);
+    line-height: 1.5;
+  }
+
+  :where(h1, h2, h3, h4, h5, h6, strong, b, th) {
+    font-weight: var(--sbk-font-weight-heading);
+  }
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    color: var(--sbk-color-fg-heading);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(*, *::before, *::after) {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}

package/dist/components/Accordion/Accordion.d.ts

@@ -1,11 +1,23 @@
 import type React from 'react';
 export interface AccordionItem {
     content: React.ReactNode;
+    disabled?: boolean;
     id: string;
     title: React.ReactNode;
 }
 export interface AccordionProps {
+    className?: string;
+    /** Item aberto inicialmente (modo single). */
     defaultOpenId?: string;
+    /** Itens abertos inicialmente (modo multiple). */
+    defaultOpenIds?: string[];
     items: AccordionItem[];
+    /** `single`: um item aberto por vez. `multiple`: vários. Padrão: single. */
+    type?: 'single' | 'multiple';
+    /** `separated`: cards independentes. `flush`: lista contínua com divisórias. */
+    variant?: 'separated' | 'flush';
 }
-export declare const Accordion: React.FC<AccordionProps>;
+export declare const Accordion: {
+    ({ items, defaultOpenId, defaultOpenIds, type, variant, className, }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};