@fracui/styleguide 0.0.0-stage → 0.1.1

package/README.md

@@ -1,3 +1,326 @@
-# Temporary Holding Version
+# @fracui/styleguide
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Biblioteca de componentes da Fractal: componentes React sobre Radix UI,
+tokens de design e um preset do Tailwind, para uso compartilhado entre os
+aplicativos do SIGA (`siga-app`, `dams-app`, `siga-app-resop`) em uma
+arquitetura single-spa.
+
+Os tokens e os componentes vêm do arquivo do Figma **Design System —
+2026**. Onde algo foi derivado em vez de extraído, isso está anotado no
+comentário do próprio componente ou token.
+
+## Instalação
+
+```bash
+yarn add @fracui/styleguide
+```
+
+Este repositório usa **yarn** (yarn.lock é o único lockfile versionado).
+Instalar com outro gerenciador gera uma árvore de dependências diferente
+da que o CI valida.
+
+Dependências de par (o app precisa tê-las):
+
+| Pacote        | Versão                |
+| ------------- | --------------------- |
+| `react`       | `^18.0.0 \|\| ^19.0.0` |
+| `react-dom`   | `^18.0.0 \|\| ^19.0.0` |
+| `tailwindcss` | `^3.4.0`              |
+
+## Configuração
+
+São três passos, e pular qualquer um deles quebra de um jeito específico
+— a tabela no fim desta seção diz qual.
+
+**1. Estenda o preset** no `tailwind.config.ts` do app:
+
+```ts
+import fracuiPreset from "@fracui/styleguide/tailwind-preset";
+
+export default {
+  presets: [fracuiPreset],
+  content: [
+    "./index.html",
+    "./src/**/*.{ts,tsx}",
+    // Sem esta linha, o Tailwind remove as classes usadas DENTRO dos
+    // componentes da biblioteca, porque não as vê no seu código.
+    "./node_modules/@fracui/styleguide/dist/**/*.js",
+  ],
+};
+```
+
+**2. Importe as variáveis de tema** uma única vez, na raiz do app:
+
+```ts
+import "@fracui/styleguide/tokens.css";
+```
+
+Ele declara as variáveis CSS que o preset referencia, e só elas. O preset
+sozinho gera classes como `bg-primary`, mas elas apontam para
+`hsl(var(--primary))` — sem o CSS, a variável não existe.
+
+`styles.css` não é o que um app com Tailwind próprio quer. Ele é gerado no
+`yarn build` (a partir de `src/styles/globals.css`, não existe no
+repositório) e traz, além das variáveis, o **preflight** do Tailwind — um
+reset global de `body`, `h1`–`h6`, botões e campos — e as classes dos
+componentes já compiladas, que o Tailwind do app gera de novo pelo
+`content`. Use `styles.css` só em app sem Tailwind.
+
+Como os apps single-spa ficam montados na mesma página, basta um
+`tokens.css` carregado: as variáveis são globais em `:root` e `.dark`.
+
+**3. Importe as fontes** (opcional):
+
+```ts
+import "@fracui/styleguide/fonts.css";
+```
+
+Roboto e Rubik auto-hospedadas, subset latino. É import separado porque
+parte dos apps já serve as fontes pelo shell do single-spa e receberia uma
+segunda cópia.
+
+| Passo esquecido | Sintoma                                              |
+| --------------- | ---------------------------------------------------- |
+| Preset          | `bg-primary` e afins não existem                     |
+| `content`       | Componentes renderizam sem estilo nenhum             |
+| `tokens.css`    | Componentes renderizam sem cor (variáveis indefinidas) |
+| `fonts.css`     | Tipografia cai para a fonte do sistema               |
+
+## Uso
+
+```tsx
+import { Button, Input, Label, WaterDropIcon } from "@fracui/styleguide";
+
+export function Filtro() {
+  return (
+    <form className="flex items-end gap-3">
+      <div className="space-y-1.5">
+        <Label htmlFor="estacao">Estação</Label>
+        <Input id="estacao" placeholder="Buscar por nome" />
+      </div>
+      <Button>
+        <WaterDropIcon />
+        Filtrar
+      </Button>
+    </form>
+  );
+}
+```
+
+### Pontos de entrada
+
+| Import                              | Conteúdo                                 |
+| ----------------------------------- | ---------------------------------------- |
+| `@fracui/styleguide`                | Componentes, ícones e utilitários        |
+| `@fracui/styleguide/icons`          | Só os 195 ícones                         |
+| `@fracui/styleguide/tokens`         | Tokens em TypeScript (cores, tipografia, elevação, malha) |
+| `@fracui/styleguide/tailwind-preset` | Preset do Tailwind                      |
+| `@fracui/styleguide/tokens.css`     | Só as variáveis CSS dos temas (para app com Tailwind) |
+| `@fracui/styleguide/styles.css`     | Variáveis + preflight + classes compiladas (para app sem Tailwind) |
+| `@fracui/styleguide/fonts.css`      | Roboto e Rubik auto-hospedadas           |
+
+## Tokens
+
+Use sempre o token semântico, não a escala primitiva: é ele que troca
+entre os temas. `bg-blue-dark` fica azul-escuro no tema escuro também;
+`bg-primary` se adapta.
+
+**Semânticos** — `background`, `foreground`, `card`, `popover`, `primary`,
+`secondary`, `muted`, `accent`, `destructive`, `border`, `input`, `ring`,
+`disabled`. Cada um com o par `-foreground` onde faz sentido.
+
+**Marca** — `brand`, `brand-medium`, `brand-light` (azul institucional) e
+`brand-secondary` e variações (verde). Separados de `primary` porque o
+`primary` do contrato shadcn é o azul *interativo* (`#3D76CC`), enquanto o
+institucional é o `#142C50`.
+
+**Feedback** — cada estado tem um trio coordenado, como no Figma:
+
+```tsx
+<div className="bg-error-bg text-error-text">
+  <WarningIcon className="text-error-icon" />
+  Falha ao sincronizar
+</div>
+```
+
+Disponíveis para `error`, `alert`, `warning`, `success` e `info`.
+
+**Escalas primitivas** — `blue-1..5`, `blue-{light,medium,dark}`, o mesmo
+para `green`, mais `gray-*`, `subtitle-*` (legendas de mapa) e `alpha-*`
+(pretos transparentes). Não mudam com o tema.
+
+**Tipografia** — `text-h1` a `text-h5`, `text-subtitle-1/2`,
+`text-body-1/2`, `text-body-allcaps`, `text-button`, `text-caption`,
+`text-link`. Cada uma já traz tamanho, entrelinha e tracking do Figma.
+
+**Elevação** — `shadow-{down,up,left,right}-{1,4,8}` e as variantes azuis
+`shadow-blue-*`. A direção importa: um painel que entra pela direita
+projeta sombra para a esquerda.
+
+**Raios** — `rounded-xs` (4px), `sm`/`md`/`lg` derivados de `--radius`,
+`rounded-xl` (12px), `2xl` (16px), `3xl` (30px), `4xl` (40px) e
+`rounded-pill`.
+
+## Tema escuro
+
+Aplique a classe `dark` em um ancestral — normalmente `<html>`:
+
+```ts
+document.documentElement.classList.toggle("dark", escuro);
+```
+
+Todos os tokens semânticos trocam sozinhos. Os valores de feedback no tema
+escuro são **derivados**, não especificados pelo design: trocam os papéis
+de texto e fundo mantendo o ícone. Ver `darkBrand` em
+`src/tokens/theme.ts`.
+
+## Ícones
+
+195 ícones exportados do Figma. Herdam a cor do texto e aceitam `size` em
+pixels:
+
+```tsx
+<WaterDropIcon size={20} className="text-info-icon" />
+```
+
+Sem `title`, o ícone é decorativo e fica `aria-hidden` — o correto quando
+há texto ao lado. Com `title`, vira `role="img"` e é anunciado por leitores
+de tela:
+
+```tsx
+<WaterDropIcon title="Precipitação acumulada" />
+```
+
+Para reexportar depois de atualizar os SVGs em `src/icons/svg`:
+
+```bash
+yarn icons:build
+```
+
+## Desenvolvimento
+
+```bash
+yarn storybook   # catálogo em localhost:6006
+yarn dev         # playground em localhost:5173
+yarn build       # gera dist/
+yarn typecheck
+yarn lint
+```
+
+## Regressão visual
+
+Cada story vira duas imagens de referência — tema claro e escuro — em
+`__snapshots__/`. Elas são versionadas: são a fonte da verdade da
+comparação, e o CI falha se qualquer componente mudar de aparência sem
+que a referência tenha sido atualizada de propósito.
+
+```bash
+yarn test:visual          # compara com as referências
+yarn test:visual:update   # aceita as mudanças e regrava
+```
+
+Os testes rodam dentro do container oficial do Playwright, a mesma imagem
+usada no CI. **Isso não é conveniência:** a renderização de fonte difere
+entre macOS e Linux, e uma referência gerada direto na máquina falharia no
+CI por antialiasing, não por regressão real. Por isso não existe caminho
+que rode fora do Docker.
+
+Quando um teste falha, as imagens de diferença ficam em
+`__snapshots__/<tema>/__diff_output__/` (e viram artefato do workflow no
+CI). Elas não são versionadas.
+
+Ao adicionar um componente, basta criar a story: a cobertura visual vem
+junto, sem configuração adicional.
+
+A mesma suíte roda o **axe** em cada story, verificando rótulos, papéis e
+nomes acessíveis. As regras de contraste ficam desligadas ali porque têm
+verificação própria (ver abaixo). Quando uma regra precisa ser desligada
+para um caso específico, declare junto da story, com o motivo:
+
+```ts
+export const MinhaStory: Story = {
+  parameters: { a11y: { disabledRules: ["aria-hidden-focus"] } },
+  // ...
+};
+```
+
+Duas regras para as stories não ficarem instáveis: nada de recurso
+externo (imagem por URL faz o snapshot depender da rede) e nada de valor
+que mude entre execuções (data de hoje, número aleatório).
+
+## Contraste
+
+```bash
+yarn test:contrast
+```
+
+Compara todos os pares de token que os componentes usam com o WCAG 2.1 AA
+— 4.5:1 para texto, 3:1 para limites de componentes de interface.
+
+Existe porque contraste é a única propriedade visual que a regressão
+visual **não** pega: um snapshot só acusa mudança, e um par ilegível que
+nasceu ilegível continua passando para sempre.
+
+As falhas conhecidas estão em `EXCECOES`, dentro de
+`scripts/check-contrast.mjs`, cada uma com o motivo. O teste falha nos dois
+sentidos: quando aparece uma falha nova, e quando uma exceção deixa de ser
+necessária — assim a lista não vira depósito de dívida esquecida.
+
+## API pública
+
+```bash
+yarn test:exports
+```
+
+Verifica que todo componente em `src/components` chega a `src/index.ts`.
+
+Existe porque nada mais pega essa falha: as stories importam de
+`@/components/x`, não do pacote, então um componente pode ficar de fora do
+índice e ainda assim passar por build, tipos, lint, regressão visual e
+axe — funcionando no Storybook e invisível para quem instala a
+biblioteca.
+
+## Integração contínua
+
+`bitbucket-pipelines.yml` roda em todo pull request e em push na `master`,
+em dois passos paralelos:
+
+- **Verificação** — tipos, lint, build, contraste dos tokens e API pública.
+- **Regressão visual** — Storybook compilado e comparado com as 236
+  imagens de referência, na imagem oficial do Playwright.
+
+A tag da imagem do Playwright é fixa no YAML, porque o Bitbucket não
+aceita imagem dinâmica. O primeiro comando do passo confere a tag contra a
+versão de `playwright-core` no `yarn.lock`: se divergirem, a falha diz o
+que atualizar, em vez de aparecer como diferença de antialiasing nas
+imagens.
+
+## Migração
+
+São dois documentos, para dois problemas diferentes:
+
+- [MIGRATION.md](MIGRATION.md) — para um app que **já consome**
+  `@fracui/styleguide` e vai atualizar. Trata da mudança incompatível dos
+  tokens: o que muda é a aparência, mais um punhado de exports.
+- [MIGRACAO-SIGA-UTIL.md](MIGRACAO-SIGA-UTIL.md) — para trocar o
+  `@fractal-mfe/styleguide` (repositório `siga-util-styleguide`) por esta
+  biblioteca. Inventário dos 594 arquivos consumidores, mapa dos 49
+  componentes antigos, o problema dos ícones e o que o React 19 exige.
+- [PLANO-IMPLEMENTACAO.md](PLANO-IMPLEMENTACAO.md) — a sequência de
+  execução dessa troca: 6 fases por classe de símbolo, ordem entre os
+  apps e estimativa.
+
+## Limitações conhecidas
+
+- **Logos e cursores** não estão na biblioteca: o export dos 16 logos de
+  produto e dos 4 cursores esbarrou no rate limit da API do Figma.
+- **`empty` e `scroll-area`** não têm contraparte no Figma; usam a
+  tipografia e os tokens do sistema, mas o desenho é do shadcn.
+- **`combo box`** não foi extraído: os nós ficaram além da profundidade
+  que a API do Figma aceitou antes do rate limit. É o único componente do
+  `siga-util-styleguide` (`input-autocomplete`) sem substituto aqui — ver
+  [MIGRACAO-SIGA-UTIL.md](MIGRACAO-SIGA-UTIL.md).
+- **Limites de componentes** não atingem os 3:1 do WCAG 1.4.11 em nenhum
+  dos dois temas — a paleta do Figma não tem um tom intermediário que
+  alcance. Pendente de decisão do design; ver as exceções em
+  `scripts/check-contrast.mjs`.

package/dist/components/accordion.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+/**
+ * Acordeão, conforme o conjunto de acordeões do Figma
+ * "Design System - 2026" (página "↳ Acordeões").
+ *
+ * O gatilho tem 56px de altura, 16px de padding, raio de 8px e 16px de
+ * gap até a seta. A borda de 2px é transparente em repouso e aparece nos
+ * estados — `blue.1` no hover e `blue.2` quando aberto — pelo mesmo
+ * motivo dos campos: se ela só existisse no hover, a linha saltaria.
+ *
+ * O conjunto está nomeado como `Component 1` no Figma, um dos 15 sem nome
+ * próprio no arquivo.
+ */
+declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components/alert-dialog.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: React.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/alert.d.ts

@@ -0,0 +1,8 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+export { Alert, AlertTitle, AlertDescription };

package/dist/components/avatar.d.ts

@@ -0,0 +1,36 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+/**
+ * Avatar, conforme os conjuntos `Image avatars`, `Letter avatars` e
+ * `Icon avatars` do Figma "Design System - 2026" (página "↳ Avatar").
+ *
+ * Os três conjuntos compartilham as mesmas três medidas — 24, 40 e 56px —
+ * e mudam só o conteúdo, então aqui é um componente com a prop `size` em
+ * vez de três componentes.
+ *
+ * A tipografia das iniciais acompanha o tamanho:
+ *
+ * | Tamanho | Estilo do Figma          |
+ * | ------- | ------------------------ |
+ * | 24px    | `roboto/medium/caption`  |
+ * | 40px    | `roboto/medium/subtitle 1` |
+ * | 56px    | `roboto/medium/h5`       |
+ *
+ * As cores de fundo vêm da paleta de legendas (`subtitle`/`subtitleLight`
+ * em `colors.ts`) — o Figma usa tons diferentes por avatar para
+ * diferenciar pessoas, e não uma cor fixa. Passe a cor via `className`.
+ *
+ * ATENÇÃO: há mais dois conjuntos chamados `Image avatars` no arquivo que
+ * não são avatares — são etiquetas de modelo (ECMWF, GFS, CFS). Colisão
+ * de nome no Figma; não estão implementados aqui.
+ */
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & VariantProps<(props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string> & React.RefAttributes<HTMLSpanElement>>;
+declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
+declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar, AvatarImage, AvatarFallback, avatarVariants };

package/dist/components/badge.d.ts

@@ -0,0 +1,19 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Etiqueta, conforme o conjunto `Tags` do Figma "Design System - 2026"
+ * (página "↳ Tags").
+ *
+ * O conjunto do Figma tem 44 variantes em quatro eixos (Category, Degree,
+ * State, Type). Aqui está coberto o eixo Category no tipo `Filled` e
+ * `Outline`; os eixos Degree e State, mais o botão de remover, entram com
+ * o componente `Tag` dedicado na próxima fase — o `Badge` existe para o
+ * contrato do shadcn e não comporta todos os eixos.
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "outline" | "destructive" | "secondary" | "success" | "warning" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): React.JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/breadcrumb.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+/**
+ * Trilha de navegação, conforme o conjunto `Breadcrumbs` do Figma
+ * "Design System - 2026" (página "↳ Breadcrumbs e Paginação").
+ *
+ * Tipografia `roboto/regular/body 1` com 4px de gap. Os níveis anteriores
+ * usam `gray` e a página atual usa `primary` — é a cor que marca onde
+ * você está, já que não há diferença de peso.
+ *
+ * O separador é o caractere `/`, e não um ícone: é assim no design.
+ *
+ * ATENÇÃO: o `#999999` dos níveis anteriores atinge 2.85:1 sobre branco,
+ * abaixo dos 4.5:1 do WCAG para texto. Como são links, a falha é mais
+ * séria do que em texto decorativo. Mantido fiel ao Figma; a correção
+ * depende de decisão do design, junto das outras registradas em
+ * `scripts/check-contrast.mjs`.
+ */
+declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+/** Último item da trilha: é a página atual, então não é link. */
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbSeparator: {
+    ({ children, className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
+    displayName: string;
+};
+/** Para trilhas longas, no lugar dos níveis omitidos. */
+declare const BreadcrumbEllipsis: {
+    ({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+    displayName: string;
+};
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };

package/dist/components/button-switch.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+/**
+ * Botão alternador, conforme o conjunto `Button Switch` do Figma
+ * "Design System - 2026" (página "↳ Botões").
+ *
+ * 32px com raio de 8px. Desligado é branco com ícone `gray.medium`;
+ * ligado inverte para o azul interativo com ícone branco.
+ *
+ * Diferente do `Switch`, que representa uma preferência ligada ou
+ * desligada, este alterna uma ferramenta — a camada do mapa que está
+ * ativa, o modo de desenho. Por isso é um botão de ícone com estado, e
+ * não um controle deslizante.
+ */
+declare const ButtonSwitch: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ButtonSwitch };

package/dist/components/button.d.ts

@@ -0,0 +1,31 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Botão, conforme o conjunto `ButtonFlat` do Figma "Design System - 2026"
+ * (página "↳ Botões").
+ *
+ * O design nomeia as variantes por cor — `primary`, `secundary`,
+ * `terciário` — mas os nomes do shadcn (`default`, `outline`, `ghost`)
+ * foram mantidos porque já são consumidos pelos apps e por outros
+ * componentes desta biblioteca. O mapeamento é:
+ *
+ * | Figma       | Aqui        |
+ * | ----------- | ----------- |
+ * | primary     | `default`   |
+ * | secundary   | `outline`   |
+ * | terciário   | `ghost`     |
+ * | Link        | `link`      |
+ *
+ * As três cores do azul institucional formam a progressão de estados do
+ * botão primário: `blue.light` em repouso, `blue.medium` no hover e
+ * `blue.dark` no foco.
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "outline" | "ghost" | "destructive" | "secondary" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/components/calendar.d.ts

@@ -0,0 +1,26 @@
+import { DayPicker } from 'react-day-picker';
+import * as React from "react";
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+/**
+ * Calendário, conforme o conjunto `Elementos data picker` do Figma
+ * "Design System - 2026" (página "↳ Seletor de data").
+ *
+ * A célula de dia tem 38×30px, padding 8/12, raio de 8px e tipografia
+ * `roboto/regular/caption`. Os cinco estados especificados:
+ *
+ * | Figma    | Aqui             | Visual                        |
+ * | -------- | ---------------- | ----------------------------- |
+ * | Default  | dia do mês       | transparente, `gray.mediumDark` |
+ * | Hover    | `:hover`         | fundo `blue.1`                |
+ * | Selected | `day_selected`   | fundo `blue.dark`, texto branco |
+ * | Ghost    | `day_outside`    | texto `gray`                  |
+ * | Disabled | `day_disabled`   | texto desabilitado            |
+ *
+ * O dia selecionado usa `blue.dark` (#142C50), e não o `primary`
+ * interativo — é a única superfície de seleção do design que faz isso.
+ */
+declare function Calendar({ className, classNames, showOutsideDays, ...props }: CalendarProps): React.JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+export { Calendar };

package/dist/components/card.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+/**
+ * Cartão, conforme os frames da página "↳ Cards" do Figma
+ * "Design System - 2026".
+ *
+ * ATENÇÃO: essa página não tem componentes — são frames estáticos. A
+ * geometria abaixo foi extraída da assinatura que se repete 8 vezes
+ * (fundo do card, raio 12px, padding 20px, empilhamento vertical com 20px
+ * de gap, sombra `azul/centralizado 2 - light`), o que é consistente o
+ * bastante para tratar como especificação. Os estados de interação, esses
+ * o design não define — o cartão aqui é estático por isso.
+ *
+ * O padding de 20px vive no `Card`, e não em cada sub-bloco como no
+ * shadcn: no Figma o container é um auto-layout único com gap, então
+ * `CardHeader`/`CardContent`/`CardFooter` não repetem padding.
+ */
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/components/checkbox.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+/**
+ * Caixa de seleção, conforme o conjunto `Basics_checkboxes` do Figma
+ * "Design System - 2026" (página "↳ Checkbox - Radio - Switch").
+ *
+ * O design desenha uma caixa de 18px dentro de uma área de 24px, e usa o
+ * espaço restante como halo nos estados hover e focused. Aqui o halo é um
+ * `ring` com offset, o que evita um elemento extra só para decoração.
+ *
+ * As três variações do Figma — `deselected`, `selected` e `indeterminate`
+ * — correspondem aos três estados do Radix (`unchecked`, `checked`,
+ * `indeterminate`).
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { Checkbox };

package/dist/components/context-menu.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+/**
+ * Menu de contexto. Compartilha o visual do `DropdownMenu` — no Figma os
+ * dois saem dos mesmos conjuntos `Select_dropdown` (painel) e
+ * `Dropdown frames` (itens), mudando apenas o gatilho.
+ */
+declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
+declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
+declare const ContextMenuGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuPortal: React.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
+declare const ContextMenuSub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
+declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuLabel: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };

package/dist/components/data-table.d.ts

@@ -0,0 +1,28 @@
+import { Column, ColumnDef } from '@tanstack/react-table';
+import * as React from "react";
+export interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    /** Coluna usada para o campo de busca/filtro exibido acima da tabela. */
+    searchKey?: string;
+    searchPlaceholder?: string;
+}
+/**
+ * DataTable: wrapper genérico sobre @tanstack/react-table com Table,
+ * ordenação por coluna, filtro simples e paginação embutida.
+ * Não é um primitivo do Radix — é o padrão de "data table" do shadcn/ui.
+ */
+declare function DataTable<TData, TValue>({ columns, data, searchKey, searchPlaceholder, }: DataTableProps<TData, TValue>): React.JSX.Element;
+declare namespace DataTable {
+    var displayName: string;
+}
+/** Cabeçalho de coluna clicável para ordenar (usar em `ColumnDef.header`). */
+declare function DataTableColumnHeader<TData, TValue>({ column, title, className, }: {
+    column: Column<TData, TValue>;
+    title: string;
+    className?: string;
+}): React.JSX.Element;
+declare namespace DataTableColumnHeader {
+    var displayName: string;
+}
+export { DataTable, DataTableColumnHeader };