@fracui/styleguide 0.0.0-stage → 0.1.1

package/dist/components/date-picker.d.ts

@@ -0,0 +1,16 @@
+export interface DatePickerProps {
+    date?: Date;
+    onDateChange?: (date: Date | undefined) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * DatePicker: composição de Popover + Calendar + Button.
+ * Não é um primitivo do Radix — é um padrão comum do shadcn/ui.
+ */
+declare function DatePicker({ date, onDateChange, placeholder, disabled, className, }: DatePickerProps): import("react").JSX.Element;
+declare namespace DatePicker {
+    var displayName: string;
+}
+export { DatePicker };

package/dist/components/dialog.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+/**
+ * Modal, conforme os frames da página "↳ Modais" do Figma
+ * "Design System - 2026".
+ *
+ * A página não tem componentes, mas a assinatura se repete 10 vezes de
+ * forma idêntica — o que é especificação, só não promovida a variante:
+ * largura mínima de 560px, raio 12px, padding 32px, empilhamento vertical
+ * com 32px de gap e sombra `Grey/para baixo/8dp`.
+ *
+ * O cabeçalho tem título em `roboto/regular/h4`, um `icon button` de 48px
+ * à direita para fechar, e um divisor de 1px abaixo. O corpo usa
+ * `roboto/medium/subtitle 1` para subtítulo e `roboto/regular/body 2`
+ * para texto.
+ *
+ * DERIVADO: o design não especifica o overlay. Mantido o preto a 40%, que
+ * existe na paleta como `alpha.40`.
+ */
+declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

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

@@ -0,0 +1,39 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+/**
+ * Menu suspenso, conforme os conjuntos `Select_dropdown` (painel) e
+ * `Dropdown frames` (itens) do Figma "Design System - 2026"
+ * (página "↳ Formulários e Dropdown").
+ *
+ * O conjunto `Dropdown frames` tem dois tipos de item: `Info`, que é o
+ * item comum, e `Exclusão`, para ações destrutivas — este último troca o
+ * fundo de hover para `error.bg` e o anel de foco para `error.icon`. O
+ * segundo tipo é acessível aqui pela prop `variant="destructive"`.
+ */
+declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+    /** `destructive` corresponde ao tipo `Exclusão` do Figma. */
+    variant?: "default" | "destructive";
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element;
+    displayName: string;
+};
+export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };

package/dist/components/empty.d.ts

@@ -0,0 +1,25 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Estado vazio.
+ *
+ * Não tem contraparte no Figma — é um utilitário do shadcn, e o design
+ * não especifica o padrão de "nenhum resultado". A geometria foi mantida
+ * como estava; o que mudou foi passar a usar a escala tipográfica e os
+ * tokens da FracUI em vez das classes genéricas do Tailwind, para não
+ * introduzir métricas diferentes das do resto da biblioteca.
+ */
+/**
+ * Bloco de "estado vazio" (empty state): quando uma lista, busca ou
+ * seção não tem conteúdo para mostrar ainda.
+ */
+declare function Empty({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+    variant?: "default" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): React.JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };

package/dist/components/fab.d.ts

@@ -0,0 +1,26 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Botão de ação flutuante, conforme o conjunto `FAB` do Figma
+ * "Design System - 2026" (página "↳ Botões").
+ *
+ * A progressão de estados é a mesma do botão primário — `blue.light` em
+ * repouso, `blue.medium` no hover, `blue.dark` no foco — mas o FAB tem
+ * **elevação** (`azul/centralizado 2 - light`), e é isso que o separa de
+ * um `<Button size="icon">`: ele flutua sobre o conteúdo em vez de morar
+ * dentro de uma barra.
+ *
+ * O tamanho de 20px é o único com raio de 6px; os demais usam 12px.
+ */
+declare const fabVariants: (props?: ({
+    size?: "sm" | "lg" | "xs" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface FabProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof fabVariants> {
+    asChild?: boolean;
+}
+/**
+ * Um FAB é sempre só um ícone, então precisa de `aria-label` — sem ele o
+ * botão não tem nome acessível.
+ */
+declare const Fab: React.ForwardRefExoticComponent<FabProps & React.RefAttributes<HTMLButtonElement>>;
+export { Fab, fabVariants };

package/dist/components/form-field.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+/**
+ * Envelope de campo de formulário.
+ *
+ * Os conjuntos `Form text`, `Dropdown` e `Password` do Figma têm a mesma
+ * anatomia — `Título`, `Box` e `HelpText`, empilhados com 8px de gap — e
+ * por isso ela vive aqui, uma vez, em vez de ser remontada à mão em cada
+ * tela.
+ *
+ * O ganho não é só de repetição: o componente conecta o rótulo ao
+ * controle e o texto de apoio ao `aria-describedby` sozinho. Montado à
+ * mão, é justamente o `htmlFor` que falta e o `aria-describedby` que
+ * ninguém lembra de escrever — os dois casos que o axe acusa.
+ *
+ * ```tsx
+ * <FormField label="Estação" help="Busque pelo nome ou pelo código">
+ *   <Input />
+ * </FormField>
+ *
+ * <FormField label="Vazão" error="Valor fora da faixa operacional">
+ *   <Input />
+ * </FormField>
+ * ```
+ */
+export interface FormFieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    label?: React.ReactNode;
+    /** Texto de apoio. Substituído pelo `error` quando houver. */
+    help?: React.ReactNode;
+    /** Mensagem de erro. Marca o controle como inválido. */
+    error?: React.ReactNode;
+    /** O controle: `Input`, `Textarea`, `Select`, `SearchBar`… */
+    children: React.ReactElement;
+}
+declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
+export { FormField };

package/dist/components/input.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+/**
+ * Classes compartilhadas por `Input` e `Textarea`.
+ *
+ * Conforme o conjunto `Form text` do Figma "Design System - 2026"
+ * (página "↳ Formulários e Dropdown"). Estados especificados:
+ *
+ * | Figma      | Aqui                    | Borda            |
+ * | ---------- | ----------------------- | ---------------- |
+ * | Default    | repouso                 | transparente     |
+ * | Hover      | `:hover`                | `blue.1`         |
+ * | Selected   | `:focus-visible`        | `blue.3`         |
+ * | Erro       | `[aria-invalid="true"]` | `error.icon`     |
+ * | Disabled   | `:disabled`             | transparente     |
+ *
+ * A borda é sempre de 2px, transparente em repouso: se ela só aparecesse
+ * no hover, o campo saltaria 2px a cada passagem do mouse.
+ *
+ * O estado `Complete` do Figma é idêntico ao `Default` no arquivo atual —
+ * provavelmente inacabado — então não virou um estado próprio aqui.
+ *
+ * A altura de 40px vem do `Box` do conjunto: campos só de texto têm 40px
+ * e campos com ícone têm 48px, porque o ícone de 24px com padding de 12px
+ * empurra a caixa. Ver `Select`, `SearchBar` e `PasswordInput`.
+ */
+export declare const fieldClassName = "w-full rounded-lg border-2 border-transparent bg-secondary px-3.5 py-3 text-body-2 text-foreground outline-none transition-colors placeholder:text-gray-light-medium hover:border-accent focus-visible:border-blue-3 aria-[invalid=true]:border-error-icon aria-[invalid=true]:bg-error-bg disabled:cursor-not-allowed disabled:text-disabled-foreground";
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export { Input };

package/dist/components/label.d.ts

@@ -0,0 +1,5 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: import('class-variance-authority/types').ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
+export { Label };

package/dist/components/marker.d.ts

@@ -0,0 +1,42 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Marcador de mapa, conforme o conjunto `markers` do Figma
+ * "Design System - 2026" (página "↳ Marcadores"), com 128 variantes.
+ *
+ * É o componente mais específico do domínio: cruza três informações que
+ * o SIGA precisa mostrar de uma vez em cima do mapa.
+ *
+ * - `situation` — o que está acontecendo com o corpo d'água: `estiagem`,
+ *   `inundacao`, `normal` ou `sem-dado`.
+ * - `level` — a gravidade: `normal`, `atencao`, `alerta`, `emergencia`
+ *   ou `sem-dado`.
+ * - `trend` — para onde o nível está indo: `subindo`, `descendo`,
+ *   `estavel` ou `sem-dado`.
+ *
+ * A cor vem do cruzamento de `situation` com `level`: estiagem puxa para
+ * o âmbar e a inundação para o azul, e dentro de cada família a gravidade
+ * escurece o tom. Emergência de inundação é a única cor fora da paleta —
+ * um índigo que existe só neste conjunto.
+ *
+ * A tendência é uma seta, não uma cor: são eixos independentes, e o mapa
+ * precisa dos dois legíveis ao mesmo tempo.
+ */
+declare const markerVariants: (props?: ({
+    type?: "estacao" | "bacia" | null | undefined;
+    situation?: "estiagem" | "inundacao" | "normal" | "sem-dado" | null | undefined;
+    level?: "normal" | "sem-dado" | "atencao" | "alerta" | "emergencia" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const TREND_ICON: {
+    readonly subindo: React.ForwardRefExoticComponent<import('../icons').IconProps & React.RefAttributes<SVGSVGElement>>;
+    readonly descendo: React.ForwardRefExoticComponent<import('../icons').IconProps & React.RefAttributes<SVGSVGElement>>;
+    readonly estavel: React.ForwardRefExoticComponent<import('../icons').IconProps & React.RefAttributes<SVGSVGElement>>;
+    readonly "sem-dado": null;
+};
+export interface MarkerProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, VariantProps<typeof markerVariants> {
+    trend?: keyof typeof TREND_ICON;
+    /** Rótulo ao lado do ícone — o eixo `label` do conjunto. */
+    label?: React.ReactNode;
+}
+declare const Marker: React.ForwardRefExoticComponent<MarkerProps & React.RefAttributes<HTMLSpanElement>>;
+export { Marker, markerVariants };

package/dist/components/model-legend.d.ts

@@ -0,0 +1,48 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Legenda de modelo meteorológico, conforme os componentes da página
+ * "↳ Legendas" do Figma "Design System - 2026".
+ *
+ * Identifica de qual modelo de previsão vem uma série: ECMWF, GFS, CFS,
+ * WRF e os que vierem depois. A cor é o identificador, então ela é dado,
+ * não estilo — por isso vem em `MODEL_COLORS`, um mapa que cresce quando
+ * um modelo novo entra, em vez de virar variante do componente.
+ *
+ * O texto alterna entre branco e `gray.mediumDark` conforme a
+ * luminosidade do fundo, como no design: `CFS` e `WRF-ECMWF` são claros
+ * demais para texto branco.
+ */
+export declare const MODEL_COLORS: Record<string, {
+    bg: string;
+    onLight: boolean;
+}>;
+/** Cores reservadas para modelos novos, na ordem em que o Figma as lista. */
+export declare const MODEL_COLORS_EXTRA: {
+    bg: string;
+    onLight: boolean;
+}[];
+export interface ModelLegendProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
+    /** Nome do modelo. Se estiver em `MODEL_COLORS`, a cor vem de lá. */
+    model: string;
+    /** Sobrescreve a cor, para modelos ainda não catalogados. */
+    color?: {
+        bg: string;
+        onLight: boolean;
+    };
+}
+declare const ModelLegend: React.ForwardRefExoticComponent<ModelLegendProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * Texto de situação, também da página "↳ Legendas".
+ *
+ * Estados de fluxo de trabalho — solicitações, aprovações, ativação — em
+ * texto colorido sem fundo. Não é etiqueta: aparece dentro de tabelas e
+ * listas, onde um fundo criaria ruído.
+ */
+declare const statusTextVariants: (props?: ({
+    status?: "solicitado" | "processando" | "aprovado" | "cancelado" | "ativa" | "inativa" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface StatusTextProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof statusTextVariants> {
+}
+declare const StatusText: React.ForwardRefExoticComponent<StatusTextProps & React.RefAttributes<HTMLSpanElement>>;
+export { ModelLegend, StatusText, statusTextVariants };

package/dist/components/monitoring-status.d.ts

@@ -0,0 +1,24 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Indicador de situação de monitoramento, conforme o conjunto
+ * `monitoramento` do Figma (página "↳ Marcadores").
+ *
+ * Um ponto colorido com rótulo, para listas e painéis. Diferente do
+ * `Marker`, que vive sobre o mapa e cruza situação com tendência, aqui a
+ * informação é só a gravidade.
+ *
+ * O ponto e o texto usam cores diferentes de propósito: o ponto precisa
+ * saltar à distância, e o texto precisa ser legível de perto.
+ *
+ * ATENÇÃO: o Figma grafa a variante de atenção como "alenção". Aqui está
+ * `atencao`, com o nome correto.
+ */
+declare const dotVariants: (props?: ({
+    status?: "normal" | "sem-dado" | "atencao" | "alerta" | "emergencia" | "nulo" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface MonitoringStatusProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, VariantProps<typeof dotVariants> {
+    children?: React.ReactNode;
+}
+declare const MonitoringStatus: React.ForwardRefExoticComponent<MonitoringStatusProps & React.RefAttributes<HTMLSpanElement>>;
+export { MonitoringStatus, dotVariants as monitoringDotVariants };

package/dist/components/navbar.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+/**
+ * Barra superior, conforme o conjunto `Navbar` do Figma
+ * "Design System - 2026" (página "↳ Navbar e Sidebar").
+ *
+ * 72px de altura, fundo do card, padding de 16px na vertical e 20px na
+ * horizontal. O gap entre as ações é de 16px no tablet e 24px no desktop,
+ * conforme as duas variantes do conjunto — nesta ordem, não o contrário. O design tem duas variantes, desktop e tablet, que diferem
+ * apenas no espaço entre a marca e as ações — aqui isso é
+ * `justify-between`, e não uma variante, porque o comportamento é o
+ * mesmo em qualquer largura.
+ *
+ * ```tsx
+ * <Navbar>
+ *   <NavbarBrand><SigaHorizontalBlueLogo height={24} /></NavbarBrand>
+ *   <NavbarActions>
+ *     <Button variant="ghost" size="icon"><NotificationsIcon /></Button>
+ *   </NavbarActions>
+ * </Navbar>
+ * ```
+ */
+declare const Navbar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+/** A marca do produto, à esquerda. */
+declare const NavbarBrand: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** Ações e conta, à direita. O gap de 24px é o do design. */
+declare const NavbarActions: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Navbar, NavbarBrand, NavbarActions };

package/dist/components/pagination.d.ts

@@ -0,0 +1,39 @@
+import { ButtonProps } from './button';
+import * as React from "react";
+/**
+ * Paginação, conforme o conjunto de paginação do Figma
+ * "Design System - 2026" (página "↳ Breadcrumbs e Paginação").
+ *
+ * Cada número é uma célula de 36px em `roboto/regular/body 2`, na cor
+ * `gray.medium`; a página atual assume `info.text` em peso medium.
+ *
+ * O Figma especifica a variante "Alternada 1" em Inter 500 — a única
+ * ocorrência de Inter no arquivo inteiro, quase certamente um resquício.
+ * Aqui foi mantido Roboto, como no resto do design system.
+ */
+declare const Pagination: {
+    ({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
+    displayName: string;
+};
+declare const PaginationContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const PaginationItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<ButtonProps, "size"> & React.ComponentProps<"a">;
+declare const PaginationLink: {
+    ({ className, isActive, size, ...props }: PaginationLinkProps): React.JSX.Element;
+    displayName: string;
+};
+declare const PaginationPrevious: {
+    ({ className, ...props }: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
+    displayName: string;
+};
+declare const PaginationNext: {
+    ({ className, ...props }: React.ComponentProps<typeof PaginationLink>): React.JSX.Element;
+    displayName: string;
+};
+declare const PaginationEllipsis: {
+    ({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+    displayName: string;
+};
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };

package/dist/components/password-input.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+/**
+ * Campo de senha, conforme o conjunto `Password` do Figma
+ * "Design System - 2026" (página "↳ Formulários e Dropdown").
+ *
+ * É o campo do `Input` com o botão de mostrar/ocultar à direita. O eixo
+ * `View` do Figma (`on`/`off`) é estado interno aqui — quem usa não
+ * precisa controlá-lo, embora possa, via `visible` e `onVisibleChange`.
+ *
+ * Altura de 48px, e não os 40px do `Input`: o campo cresce para acomodar
+ * o ícone de 24px com o mesmo padding de 12px.
+ */
+export interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Controla a visibilidade de fora, se necessário. */
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean) => void;
+    /** Rótulo do botão de alternar, para leitores de tela. */
+    toggleLabel?: {
+        show: string;
+        hide: string;
+    };
+}
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+export { PasswordInput };

package/dist/components/player.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+/**
+ * Controle de reprodução de série temporal, conforme os componentes da
+ * página "↳ Player" do Figma "Design System - 2026".
+ *
+ * Percorre uma série no tempo — animar a evolução da chuva sobre a bacia,
+ * varrer o horizonte de uma previsão. Não é um player de mídia: a barra
+ * representa passos de tempo, e os rótulos abaixo dela marcam o intervalo.
+ *
+ * 72px de altura, raio de 12px, superfície `secondary`, com botões de
+ * ícone de 40px. O design tem quatro variantes que combinam dois eixos —
+ * `Padrão`/`Completo` (quantos controles aparecem) e `vazio`/`preenchido`
+ * (se a barra tem progresso) — e os dois viram props aqui, porque
+ * `preenchido` é estado em tempo de execução, não uma escolha de layout.
+ */
+export interface PlayerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Controles de transporte: voltar, reproduzir, avançar. */
+    controls?: React.ReactNode;
+    /** Progresso da série, de 0 a 100. `null` quando não há dado. */
+    value?: number | null;
+    /** Rótulo à esquerda, abaixo da barra. */
+    startLabel?: React.ReactNode;
+    /** Rótulo à direita, abaixo da barra. */
+    endLabel?: React.ReactNode;
+}
+declare const Player: React.ForwardRefExoticComponent<PlayerProps & React.RefAttributes<HTMLDivElement>>;
+export { Player };

package/dist/components/popover.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+/**
+ * Popover, conforme os frames da página "↳ Pop over" do Figma
+ * "Design System - 2026".
+ *
+ * A página não tem componentes, mas a assinatura se repete de forma
+ * consistente: raio 12px, padding 20px, gap 20px e sombra
+ * `azul/centralizado 2 - light`.
+ *
+ * O fundo é o da página, não uma superfície elevada — o design distingue
+ * o popover pela borda, e isso vale nos dois temas: `#FFFFFF` sobre borda
+ * `#E5E5E5` no claro, `#040814` sobre borda `#142C50` no escuro. É um dos
+ * poucos elementos com dark mode explicitamente especificado no arquivo,
+ * e confirma os valores que estavam derivados nos tokens.
+ */
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/dist/components/progress.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+/** Percentual a partir do qual a barra passa a verde. */
+export declare const COMPLETING_THRESHOLD = 80;
+export interface ProgressProps extends React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
+    /** Marca a barra como erro ou cancelamento. */
+    error?: boolean;
+}
+declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
+export { Progress };

package/dist/components/radio-group.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+/**
+ * Grupo de opções exclusivas, conforme o conjunto `radio` do Figma
+ * "Design System - 2026" (página "↳ Checkbox - Radio - Switch").
+ *
+ * O design desenha um círculo de 20px dentro de uma área de 42px e usa o
+ * espaço restante como halo de 28px nos estados hover e focused — a mesma
+ * gramática do `Checkbox`, e por isso o halo aqui também é um `ring` com
+ * offset em vez de um elemento decorativo extra.
+ *
+ * | Estado              | Círculo                        | Halo       |
+ * | ------------------- | ------------------------------ | ---------- |
+ * | não selecionado     | `secondary` + borda `gray.medium` | —       |
+ * | não selec. + hover  | idem                           | `secondary` |
+ * | não selec. + foco   | idem                           | `secondary` + borda `border` |
+ * | selecionado         | borda `primary` + ponto        | —          |
+ * | selecionado + hover | idem                           | `accent`   |
+ * | desabilitado        | borda `border`                 | —          |
+ * | selec. desabilitado | borda `blue.2`                 | —          |
+ */
+declare const RadioGroup: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: React.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { RadioGroup, RadioGroupItem };

package/dist/components/scroll-area.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+/**
+ * Área com rolagem.
+ *
+ * Não tem contraparte no Figma. A barra usa `bg-border`, que já é o
+ * `gray.light` do design.
+ */
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ScrollArea, ScrollBar };

package/dist/components/search-bar.d.ts

@@ -0,0 +1,26 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from "react";
+/**
+ * Campo de busca, conforme o conjunto `Search bar` do Figma
+ * "Design System - 2026" (página "↳ Formulários e Dropdown").
+ *
+ * Compartilha os estados do `Input` — mesma superfície, mesmas bordas de
+ * hover, foco e erro — e acrescenta o ícone de lupa à esquerda.
+ *
+ * Os dois tamanhos do design mudam altura, padding e tipografia juntos:
+ *
+ * | Tamanho | Altura | Padding | Texto     |
+ * | ------- | ------ | ------- | --------- |
+ * | `sm`    | 48px   | 14px    | `body-2`  |
+ * | `lg`    | 64px   | 20px    | `h5`      |
+ *
+ * No estado de erro o ícone acompanha o texto e vai para `error.icon`, em
+ * vez de continuar cinza.
+ */
+declare const searchBarVariants: (props?: ({
+    size?: "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SearchBarProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof searchBarVariants> {
+}
+declare const SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLInputElement>>;
+export { SearchBar, searchBarVariants };

package/dist/components/select.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+/**
+ * Seleção, conforme os conjuntos `Dropdown` (o gatilho) e
+ * `Select_dropdown` (o painel) do Figma "Design System - 2026"
+ * (página "↳ Formulários e Dropdown").
+ *
+ * O gatilho é visualmente o mesmo campo do `Input` — mesmo fundo, mesmo
+ * raio, mesmos estados — então reaproveita `fieldClassName` em vez de
+ * repetir a lista de classes. O painel é o único elemento com visual
+ * próprio: fundo branco, raio de 12px, borda `gray.light` e 12px de
+ * padding interno.
+ *
+ * Os itens seguem o conjunto `Dropdown frames`: 48px de altura, raio de
+ * 8px e 16px de gap entre ícone e rótulo.
+ */
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, };

package/dist/components/separator.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+/**
+ * Divisor, conforme os componentes `Horizontal` e `Vertical` da página
+ * "↳ Divisores" do Figma "Design System - 2026".
+ *
+ * 1px em `gray.light` (#E5E5E5) nas duas orientações — que é exatamente o
+ * token `border`. O componente já estava correto: nenhuma medida mudou,
+ * só a confirmação contra o arquivo.
+ */
+declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Separator };