@celke/kole-react 0.0.0-stage → 0.2.0

package/dist/components/Citacao/Citacao.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import { type IconeProp } from '../../utils/Icone.js';
+export type CorCitacao = 'pri' | 'secundario' | 'ok' | 'warn' | 'err' | 'info' | 'destaque' | 'escuro';
+export interface CitacaoProps {
+    /** O texto citado. */
+    children: ReactNode;
+    /** Quem disse. */
+    autor?: ReactNode;
+    /** De onde veio (livro, discurso…), em itálico depois do autor. */
+    fonte?: ReactNode;
+    cor?: CorCitacao;
+    /** `simples` = filete na lateral · `cartao` = fundo claro da cor, ícone e aspas. */
+    aparencia?: 'simples' | 'cartao';
+    alinhamento?: 'inicio' | 'centro' | 'fim';
+    /** Ícone no canto do cartão (só na aparência `cartao`). */
+    icone?: IconeProp;
+    className?: string;
+}
+/** Citação (blockquote) com autor e fonte. */
+export declare function Citacao({ children, autor, fonte, cor, aparencia, alinhamento, icone, className }: CitacaoProps): import("react").JSX.Element;

package/dist/components/Confirmacao/Confirmacao.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+import { type SeveridadeBotao } from '../Botao/Botao.js';
+export interface OpcoesConfirmacao {
+    titulo: string;
+    mensagem?: ReactNode;
+    severidade?: Exclude<SeveridadeBotao, 'secundario'>;
+    icone?: string;
+    rotuloAceitar?: string;
+    rotuloRecusar?: string;
+    iconeAceitar?: string;
+    /** Só o botão de OK (aviso). */
+    somenteOk?: boolean;
+}
+/** Remoção: sempre vermelha e com lixeira (não dá para trocar). */
+export type OpcoesRemocao = Omit<Partial<OpcoesConfirmacao>, 'severidade' | 'iconeAceitar' | 'somenteOk'>;
+/** Aviso: um botão só, para ciência. */
+export type OpcoesAviso = Omit<OpcoesConfirmacao, 'somenteOk' | 'rotuloRecusar'>;
+export interface Confirmar {
+    (opcoes: OpcoesConfirmacao): Promise<boolean>;
+    /** Atalho institucional de exclusão de dado salvo (irreversível). */
+    remover: (opcoes?: OpcoesRemocao) => Promise<boolean>;
+    /** Só ciência — "alertar" é `avisar({ severidade: 'err' })`. */
+    avisar: (opcoes: OpcoesAviso) => Promise<void>;
+}
+/** Fornece `useConfirmacao()` para a árvore. Já incluso no `ProvedorUi`. */
+export declare function ProvedorConfirmacao({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * `const confirmar = useConfirmacao();`
+ * `if (await confirmar({ titulo: 'Excluir?', severidade: 'err' })) …`
+ * `if (await confirmar.remover({ mensagem: '"TJ-PR 2026" será removido.' })) …`
+ * `await confirmar.avisar({ titulo: 'Prazo encerrado', severidade: 'warn' })`
+ */
+export declare function useConfirmacao(): Confirmar;

package/dist/components/Conversa/Conversa.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+export interface ConversaProps {
+    /** As mensagens (`Mensagem`), da mais antiga para a mais nova. */
+    children?: ReactNode;
+    /** Mostrado quando não há mensagens. Padrão: um `Vazio`. */
+    vazio?: ReactNode;
+    /** Campo de envio fixo abaixo da rolagem (normalmente um `CampoMensagem`). */
+    campo?: ReactNode;
+    /** Largura máxima das mensagens e do campo, centralizados (ex.: `48rem` numa página inteira). */
+    larguraMaxima?: string;
+    /** Nome da conversa para leitores de tela. */
+    rotulo?: string;
+    rotuloIrParaFim?: string;
+    className?: string;
+}
+/**
+ * Área rolável de uma conversa. Acompanha o fim quando chegam mensagens ou a
+ * última cresce (streaming); se a pessoa rolar para cima, para de puxar e
+ * mostra "Ir para o fim". Ocupa a altura do contêiner pai.
+ */
+export declare function Conversa({ children, vazio, campo, larguraMaxima, rotulo, rotuloIrParaFim, className, }: ConversaProps): import("react").JSX.Element;

package/dist/components/Detalhes/Detalhes.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface DetalhesProps {
+    rotulo: string;
+    /** Valor em texto; `children` substitui. Vazio mostra travessão. */
+    valor?: ReactNode;
+    /** `coluna` = rótulo em cima · `linha` = rótulo à esquerda, valor à direita. */
+    disposicao?: 'coluna' | 'linha';
+    children?: ReactNode;
+    className?: string;
+}
+/** Par rótulo/valor para telas de visualização. */
+export declare function Detalhes({ rotulo, valor, disposicao, children, className }: DetalhesProps): import("react").JSX.Element;

package/dist/components/Dialogo/Dialogo.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+import { type IconeProp } from '../../utils/Icone.js';
+export type TamanhoDialogo = 'pequeno' | 'medio' | 'grande' | 'extragrande' | 'full';
+/** Efeito de entrada do diálogo central. */
+export type AnimacaoDialogo = 'padrao' | 'escala' | 'deslizar-direita' | 'deslizar-baixo' | 'jornal' | 'queda' | 'girar-horizontal' | 'girar-vertical' | 'super-escala' | 'placa' | 'girar-baixo' | 'girar-esquerda';
+export interface DialogoProps {
+    aberto: boolean;
+    aoFechar: () => void;
+    titulo: string;
+    subtitulo?: string;
+    icone?: IconeProp;
+    tamanho?: TamanhoDialogo;
+    /** Tela cheia só abaixo desta largura (`sm` 36rem · `md` 48rem · `lg` 64rem · `xl` 75rem · `xxl` 87.5rem). */
+    telaCheiaAbaixo?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /**
+     * `central` (padrão) · `lateral` = painel encostado à direita, altura
+     * total (gaveta). No lateral, `full` cai para `grande`.
+     */
+    aparencia?: 'central' | 'lateral';
+    /** Onde o diálogo central fica: `centro` (padrão) ou `topo`. */
+    posicao?: 'centro' | 'topo';
+    /**
+     * Conteúdo longo: `corpo` (padrão) rola só o miolo, com cabeçalho e rodapé
+     * fixos · `pagina` deixa o diálogo crescer e rola a máscara inteira.
+     */
+    rolagem?: 'corpo' | 'pagina';
+    animacao?: AnimacaoDialogo;
+    /** `escuro` = cabeçalho na cor da marca. */
+    tom?: 'claro' | 'escuro';
+    /** Esc / clique fora fecham (padrão: sim). */
+    dispensavel?: boolean;
+    /** Botões do rodapé. */
+    rodape?: ReactNode;
+    children?: ReactNode;
+    className?: string;
+}
+export declare function Dialogo({ aberto, aoFechar, titulo, subtitulo, icone, tamanho, telaCheiaAbaixo, aparencia, posicao, rolagem, animacao, tom, dispensavel, rodape, children, className, }: DialogoProps): import("react").JSX.Element | null;

package/dist/components/Dialogo/Sobreposicao.d.ts

@@ -0,0 +1,19 @@
+import { type ReactNode } from 'react';
+export interface SobreposicaoProps {
+    aoDispensar?: () => void;
+    /** Esc e clique na máscara fecham. */
+    dispensavel?: boolean;
+    rotuloId?: string;
+    descricaoId?: string;
+    /** Elemento que recebe o foco ao abrir (seletor CSS dentro do painel). */
+    focoInicial?: string;
+    className?: string;
+    /** Classe extra na máscara (ex.: alinhamento do painel lateral). */
+    classeMascara?: string;
+    children: ReactNode;
+}
+/**
+ * Máscara + painel modal: portal no <body>, trava o scroll, prende o foco
+ * (Tab circula dentro) e devolve o foco a quem abriu ao fechar.
+ */
+export declare function Sobreposicao({ aoDispensar, dispensavel, rotuloId, descricaoId, focoInicial, className, classeMascara, children, }: SobreposicaoProps): import("react").JSX.Element;

package/dist/components/Dica/Dica.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+export type PosicaoDica = 'cima' | 'direita' | 'baixo' | 'esquerda';
+export type CorDica = 'padrao' | 'pri' | 'secundario' | 'ok' | 'warn' | 'err' | 'info' | 'destaque' | 'claro';
+export interface DicaProps {
+    /** Texto do balão (aceita conteúdo formatado). Vazio = sem dica (o filho é renderizado puro). */
+    texto?: ReactNode;
+    children: ReactNode;
+    /** Atraso para abrir no hover, em ms. */
+    atraso?: number;
+    /** Lado preferido; vira para o oposto se não couber. Padrão: `cima`. */
+    posicao?: PosicaoDica;
+    cor?: CorDica;
+}
+/** Balão de dica (tooltip) no hover/foco do elemento envolvido. */
+export declare function Dica({ texto, children, atraso, posicao, cor }: DicaProps): import("react").JSX.Element;

package/dist/components/Escolha/Escolha.d.ts

@@ -0,0 +1,14 @@
+import type { Opcao } from '../../utils/tipos.js';
+import { type CampoBaseProps } from '../Campo/Campo.js';
+export interface EscolhaProps<V = string> extends Omit<CampoBaseProps, 'variante' | 'aviso'> {
+    opcoes: Opcao<V>[];
+    valor?: V | null;
+    aoMudar?: (valor: V) => void;
+    /** `segmentado` = botões colados · `radio` = lista de bolinhas. */
+    aparencia?: 'segmentado' | 'radio';
+    disabled?: boolean;
+    ariaLabel?: string;
+    id?: string;
+}
+/** Escolha única entre poucas opções (radiogroup). */
+export declare function Escolha<V = string>({ rotulo, dica, erro, obrigatorio, className, opcoes, valor, aoMudar, aparencia, disabled, ariaLabel, id: idExterno, }: EscolhaProps<V>): import("react").JSX.Element;

package/dist/components/Estrutura/Estrutura.d.ts

@@ -0,0 +1,106 @@
+import { type MouseEvent, type ReactNode } from 'react';
+import { type IconeProp } from '../../utils/Icone.js';
+import { type ModeloTrilha } from '../Trilha/Trilha.js';
+export interface ItemNav {
+    rotulo: string;
+    icone?: IconeProp;
+    /** Folha: destino. Grupo: omita e use `filhos`. */
+    rota?: string;
+    filhos?: ItemNav[];
+    desabilitado?: boolean;
+}
+export interface SecaoNav {
+    /** Rótulo do grupo (linha em caixa alta). */
+    rotulo?: string;
+    itens: ItemNav[];
+}
+export interface Marca {
+    nome: string;
+    subtitulo?: string;
+    /** URL da imagem do logo (sem ela, mostra um escudo). */
+    logo?: string;
+    href?: string;
+}
+export interface UsuarioEstrutura {
+    nome: string;
+    cargo?: string;
+    foto?: string;
+    iniciais?: string;
+}
+export interface ItemMenu {
+    id: string;
+    rotulo: string;
+    icone?: string;
+    destrutivo?: boolean;
+    divisorAntes?: boolean;
+}
+export interface Notificacao {
+    id: string;
+    titulo: string;
+    descricao?: string;
+    tempo?: string;
+    icone?: string;
+    naoLida?: boolean;
+}
+/** Props entregues a `renderLink` (para usar o <Link> do seu roteador). */
+export interface PropsLink {
+    href: string;
+    className: string;
+    children: ReactNode;
+    onClick: (e: MouseEvent<HTMLAnchorElement>) => void;
+    'aria-current'?: 'page';
+    'aria-disabled'?: boolean;
+}
+export interface EstruturaProps {
+    marca: Marca;
+    nav: SecaoNav[];
+    /** Rota atual — marca o item ativo (ex.: `location.pathname`). */
+    rotaAtual?: string;
+    /** Navegação SPA: recebe a rota e evita o reload. */
+    aoNavegar?: (rota: string) => void;
+    /** Renderiza os links com o componente do seu roteador. */
+    renderLink?: (props: PropsLink, item: ItemNav) => ReactNode;
+    usuario?: UsuarioEstrutura;
+    menuUsuario?: ItemMenu[];
+    aoEscolherMenuUsuario?: (id: string) => void;
+    /** Lista de notificações. Sem a prop, o sino não aparece. */
+    notificacoes?: Notificacao[];
+    aoEscolherNotificacao?: (id: string) => void;
+    /** Menu de ferramentas de desenvolvimento (não passe em produção). */
+    menuDesenvolvimento?: ItemMenu[];
+    aoEscolherMenuDesenvolvimento?: (id: string) => void;
+    /** Tarja de ambiente no topo da sidebar (Homologação, Treinamento…). */
+    ambiente?: {
+        rotulo: string;
+        severidade?: 'warn' | 'err' | 'info' | 'neutral';
+        /** Texto curto para a sidebar recolhida (padrão: 3 primeiras letras, ex.: "HOM"). */
+        sigla?: string;
+    };
+    versao?: string;
+    /**
+     * Como os grupos do menu abrem com a sidebar expandida: `abaixo` (padrão,
+     * sanfona dentro da própria sidebar) ou `lateral` (painel ao lado). Com a
+     * sidebar recolhida, sempre abre o painel lateral.
+     */
+    submenu?: 'abaixo' | 'lateral';
+    /** Modelo padrão das trilhas de navegação do sistema (separador, ícones, aparência). */
+    modeloTrilha?: ModeloTrilha;
+    /** Conteúdo do rodapé da sidebar (marca do ecossistema, links…). */
+    rodapeSidebar?: ReactNode;
+    /** Rodapé da área de conteúdo, sempre visível no pé da tela (autoria, direitos, links…). */
+    rodape?: ReactNode;
+    /** Substitui a busca padrão (filtro do menu). `false` remove. */
+    busca?: ReactNode | false;
+    placeholderBusca?: string;
+    aoBuscar?: (termo: string) => void;
+    /** Controles extras à direita da topbar. */
+    complementosTopbar?: ReactNode;
+    children?: ReactNode;
+}
+/**
+ * Moldura do app autenticado: sidebar recolhível (com submenu em painel
+ * lateral), topbar com busca, densidade, tema, notificações e perfil.
+ * Responsiva: abaixo de 64rem a sidebar vira sobreposição; abaixo de 48rem,
+ * gaveta com hambúrguer.
+ */
+export declare function Estrutura({ marca, nav, rotaAtual, aoNavegar, renderLink, usuario, menuUsuario, aoEscolherMenuUsuario, notificacoes, aoEscolherNotificacao, menuDesenvolvimento, aoEscolherMenuDesenvolvimento, ambiente, versao, rodapeSidebar, rodape, modeloTrilha, submenu, busca, placeholderBusca, aoBuscar, complementosTopbar, children, }: EstruturaProps): import("react").JSX.Element;

package/dist/components/Filtros/Filtros.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export interface FiltroAplicado {
+    campo: string;
+    rotulo: string;
+    aoRemover?: () => void;
+}
+export interface FiltrosProps {
+    /** Campos de filtro — de preferência com `variante="inline"`. */
+    children: ReactNode;
+    aoConsultar: () => void;
+    aoLimpar?: () => void;
+    /** Chips dos filtros já aplicados. */
+    aplicados?: FiltroAplicado[];
+    /** Há mudanças ainda não consultadas (ponto âmbar + aviso). */
+    alterado?: boolean;
+    consultando?: boolean;
+    /** `barra` = linha única em card · `secao` = moldura com legenda "Filtros". */
+    aparencia?: 'barra' | 'secao';
+    className?: string;
+}
+/** Barra de filtros de listagem: campos + Consultar + Limpar + chips. */
+export declare function Filtros({ children, aoConsultar, aoLimpar, aplicados, alterado, consultando, aparencia, className, }: FiltrosProps): import("react").JSX.Element;

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,85 @@
+import { type MouseEvent, type ReactNode } from 'react';
+import { type IconeProp } from '../../utils/Icone.js';
+import { type Entidade, type Modo } from '../../utils/entidade.js';
+import { type ItemTrilha } from '../Trilha/Trilha.js';
+import { type TamanhoDialogo } from '../Dialogo/Dialogo.js';
+/** Item do menu lateral: cada um leva a um formulário do mesmo cadastro. */
+export interface ItemMenuForm {
+    id: string;
+    rotulo: string;
+    icone?: IconeProp;
+    /** Com `href` o item vira link (ex.: `#/pedidos/novo/itens`). */
+    href?: string;
+    /** Chip de pendências ao lado do rótulo. */
+    pendencias?: number;
+    desabilitado?: boolean;
+}
+export interface FormProps {
+    /** `pagina` = tela cheia com menu lateral opcional · `modal` = dentro de diálogo. */
+    arranjo?: 'pagina' | 'modal';
+    /**
+     * Título do cabeçalho. Com `entidade`, pode ser omitido: vira
+     * "Cadastrar/Editar/Visualizar <entidade>" conforme o `modo`.
+     */
+    titulo?: string;
+    /** Entidade do cadastro (`'veículo'` ou `{ nome, novo: 'Firmar contrato' }`). */
+    entidade?: string | Entidade;
+    /** Fase do registro na tela (padrão: `novo`). Em `leitura` some o Salvar. */
+    modo?: Modo;
+    /**
+     * Página: trilha de navegação abaixo do título. `true` = caminho automático
+     * do menu; lista = automático + estes passos no fim.
+     */
+    trilha?: boolean | ItemTrilha[];
+    /** Identificação do registro (ex.: "Protocolo 2026/0012"). */
+    identidade?: string;
+    icone?: IconeProp;
+    /** Modal: controla a abertura. */
+    aberto?: boolean;
+    tamanho?: TamanhoDialogo;
+    aoSalvar?: () => void;
+    aoCancelar?: () => void;
+    salvando?: boolean;
+    /** Quantos campos faltam corrigir — mostrado no rodapé. */
+    pendencias?: number;
+    /** Página: menu lateral com os formulários do cadastro. */
+    menu?: ItemMenuForm[];
+    /** Título do card do menu (padrão: "Formulários"). */
+    menuTitulo?: string;
+    /** `id` do item do menu que corresponde a este formulário. */
+    menuAtivo?: string;
+    /** Clique num item do menu; num item com `href`, chame `preventDefault` para navegar por conta própria. */
+    aoEscolherMenu?: (id: string, evento: MouseEvent) => void;
+    /** Botões extras no rodapé, antes de Cancelar/Salvar. */
+    acoes?: ReactNode;
+    /** Cancelar + Salvar no rodapé (padrão: sim). */
+    acoesPadrao?: boolean;
+    /**
+     * Página: onde ficam os botões. `secao` (padrão) = card logo abaixo das
+     * seções · `fixo` = barra presa ao pé da tela.
+     */
+    posicaoAcoes?: 'secao' | 'fixo';
+    rotuloSalvar?: string;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Formulário de cadastro. Agrupe os campos em `<FormSecao>`; a grade de
+ * colunas, o menu lateral e o rodapé com Salvar/Cancelar vêm prontos.
+ */
+export declare function Form({ arranjo, titulo: tituloProp, entidade, modo, trilha, identidade, icone, aberto, tamanho, aoSalvar, aoCancelar, salvando, pendencias, menu, menuTitulo, menuAtivo, aoEscolherMenu, acoes, acoesPadrao, posicaoAcoes, rotuloSalvar, children, className, }: FormProps): import("react").JSX.Element | null;
+export interface FormSecaoProps {
+    legenda: string;
+    icone?: IconeProp;
+    /** Botões no cabeçalho da seção. */
+    acoes?: ReactNode;
+    /** Colunas da grade (padrão: 4 na página, 3 no modal). */
+    colunas?: number;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Seção de formulário: card com título e grade de campos.
+ * Larguras: `className="lp-col-2"`, `lp-col-3` ou `lp-col-full` no campo.
+ */
+export declare function FormSecao({ legenda, icone, acoes, colunas, children, className }: FormSecaoProps): import("react").JSX.Element;

package/dist/components/Girador/Girador.d.ts

@@ -0,0 +1,15 @@
+/** `atual` = cor do texto em volta (para usar dentro de botões). */
+export type CorGirador = 'pri' | 'secundario' | 'ok' | 'warn' | 'err' | 'info' | 'destaque' | 'escuro' | 'atual';
+export interface GiradorProps {
+    /** `anel` = gira · `pulso` = cresce e some · `pontos` = três pontos piscando. */
+    tipo?: 'anel' | 'pulso' | 'pontos';
+    cor?: CorGirador;
+    /** Escala pronta, ou qualquer medida CSS (ex.: `'3rem'`). */
+    tamanho?: 'pequeno' | 'medio' | 'grande' | (string & {});
+    /** Texto para leitor de tela (e visível com `mostrarRotulo`). */
+    rotulo?: string;
+    mostrarRotulo?: boolean;
+    className?: string;
+}
+/** Indicador de atividade em linha (spinner). Para espera de seção inteira, use `Carregando`. */
+export declare function Girador({ tipo, cor, tamanho, rotulo, mostrarRotulo, className }: GiradorProps): import("react").JSX.Element;

package/dist/components/GrupoBotoes/GrupoBotoes.d.ts

@@ -0,0 +1,56 @@
+import type { JSX, ReactNode } from 'react';
+import type { IconeProp } from '../../utils/Icone.js';
+import { type BotaoProps, type PadroesBotao } from '../Botao/Botao.js';
+export interface GrupoBotoesProps extends PadroesBotao {
+    children: ReactNode;
+    orientacao?: 'horizontal' | 'vertical';
+    /** Nome do grupo para leitor de tela (ex.: "Controles do player"). */
+    rotulo?: string;
+    className?: string;
+}
+/**
+ * Botões colados num bloco só. `severidade`, `aparencia`, `formato` e
+ * `tamanho` viram o padrão dos botões de dentro (cada um pode sobrescrever).
+ */
+export declare function GrupoBotoes({ children, orientacao, rotulo, className, ...padroes }: GrupoBotoesProps): JSX.Element;
+export interface OpcaoAlternancia<V> {
+    valor: V;
+    rotulo?: string;
+    icone?: IconeProp;
+    /** Obrigatória quando a opção é só ícone. */
+    dica?: string;
+    desabilitada?: boolean;
+}
+interface BaseAlternancia<V> extends Omit<GrupoBotoesProps, 'children'> {
+    opcoes: OpcaoAlternancia<V>[];
+    /** Aparência das opções desmarcadas (as marcadas ficam sólidas). Padrão: `contorno`. */
+    aparencia?: BotaoProps['aparencia'];
+}
+export interface GrupoAlternanciaUnicoProps<V> extends BaseAlternancia<V> {
+    multiplo?: false;
+    valor?: V | null;
+    aoMudar?: (valor: V) => void;
+}
+export interface GrupoAlternanciaMultiploProps<V> extends BaseAlternancia<V> {
+    multiplo: true;
+    valor?: V[];
+    aoMudar?: (valor: V[]) => void;
+}
+export type GrupoAlternanciaProps<V> = GrupoAlternanciaUnicoProps<V> | GrupoAlternanciaMultiploProps<V>;
+/**
+ * Grupo de botões de seleção: única (como rádio) ou múltipla (como caixas de
+ * marcação). Cada opção é um botão de alternância (`aria-pressed`).
+ */
+export declare function GrupoAlternancia<V = string>(props: GrupoAlternanciaMultiploProps<V>): JSX.Element;
+export declare function GrupoAlternancia<V = string>(props: GrupoAlternanciaUnicoProps<V>): JSX.Element;
+export interface BarraBotoesProps {
+    children: ReactNode;
+    /** Nome da barra para leitor de tela. */
+    rotulo?: string;
+    /** `inicio` (padrão) · `entre` = espalha os grupos de ponta a ponta. */
+    distribuicao?: 'inicio' | 'entre';
+    className?: string;
+}
+/** Barra de ferramentas: vários grupos (e campos) lado a lado. */
+export declare function BarraBotoes({ children, rotulo, distribuicao, className }: BarraBotoesProps): JSX.Element;
+export {};

package/dist/components/Imagem/Imagem.d.ts

@@ -0,0 +1,40 @@
+import type { CSSProperties, ImgHTMLAttributes, ReactNode } from 'react';
+/** `reto` · `arredondado` = cantos do card · `circulo` = pílula/círculo. */
+export type CantosImagem = 'reto' | 'arredondado' | 'circulo';
+/** `esquerda`/`direita` = flutua com o texto em volta · `centro` = bloco centralizado. */
+export type AlinhamentoImagem = 'esquerda' | 'centro' | 'direita';
+export interface ImagemProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'alt' | 'width'> {
+    src: string;
+    /** Texto alternativo. Use `''` só para imagem decorativa. */
+    alt: string;
+    /** Encolhe para caber no container (largura máx. 100%). Padrão: true. */
+    responsiva?: boolean;
+    cantos?: CantosImagem;
+    /** Moldura de miniatura: borda fina e respiro em volta. */
+    miniatura?: boolean;
+    alinhamento?: AlinhamentoImagem;
+    /** Recorta na proporção dada (ex.: `'1 / 1'`, `'16 / 9'`) sem distorcer. */
+    proporcao?: string;
+    /** Largura (ex.: `'12rem'`, `'50%'`). */
+    largura?: string;
+}
+/** Imagem responsiva com cantos, miniatura, recorte e alinhamento. */
+export declare function Imagem({ responsiva, cantos, miniatura, alinhamento, proporcao, largura, loading, className, style, ...resto }: ImagemProps): import("react").JSX.Element;
+export interface FiguraProps {
+    src: string;
+    alt: string;
+    /** Legenda abaixo da imagem. */
+    legenda?: ReactNode;
+    alinhamentoLegenda?: 'inicio' | 'centro' | 'fim';
+    cantos?: CantosImagem;
+    miniatura?: boolean;
+    proporcao?: string;
+    /** Posição da figura inteira (imagem + legenda). */
+    alinhamento?: AlinhamentoImagem;
+    /** Largura da figura (ex.: `'14rem'`). */
+    largura?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** Imagem com legenda (`<figure>` + `<figcaption>`). */
+export declare function Figura({ src, alt, legenda, alinhamentoLegenda, cantos, miniatura, proporcao, alinhamento, largura, className, style, }: FiguraProps): import("react").JSX.Element;

package/dist/components/Indicador/Indicador.d.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import { type IconeProp } from '../../utils/Icone.js';
+export interface IndicadorProps {
+    rotulo: string;
+    valor: number | string;
+    icone?: IconeProp;
+    /** Cor de destaque (qualquer cor CSS, de preferência um token: `var(--ok-solid)`). */
+    cor?: string;
+    /** Torna o card um link. */
+    href?: string;
+    aoClicar?: () => void;
+    carregando?: boolean;
+    /** Variação em % (ex.: `1.31` ou `-9.26`): seta e cor ao lado do valor. */
+    variacao?: number;
+    /** Qual direção é boa (verde). Padrão: `alta`; use `baixa` para despesas, rejeições… */
+    variacaoBoa?: 'alta' | 'baixa';
+    /** Linha miúda abaixo do valor (ex.: "há 6 min"). */
+    descricao?: ReactNode;
+    /** Rodapé (variação, comparação…). */
+    children?: ReactNode;
+    className?: string;
+}
+/** Card de KPI para dashboards. */
+export declare function Indicador({ rotulo, valor, icone, cor, href, aoClicar, carregando, variacao, variacaoBoa, descricao, children, className }: IndicadorProps): import("react").JSX.Element;
+/** Grade responsiva de indicadores. */
+export declare function Indicadores({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/Lista/Lista.d.ts

@@ -0,0 +1,47 @@
+import type { MouseEvent, ReactNode } from 'react';
+import { type IconeProp } from '../../utils/Icone.js';
+export type CorItemLista = 'pri' | 'secundario' | 'ok' | 'warn' | 'err' | 'info' | 'destaque' | 'escuro';
+export interface ListaProps {
+    children: ReactNode;
+    /** `padrao` = caixa com borda · `sem-borda` = encostada no container (dentro de card). */
+    variante?: 'padrao' | 'sem-borda';
+    /** Numera os itens (1, 2, 3…). */
+    numerada?: boolean;
+    /** Itens lado a lado; com breakpoint, só a partir dele (`sm` 36rem · `md` 48rem · `lg` 64rem · `xl` 75rem). */
+    horizontal?: boolean | 'sm' | 'md' | 'lg' | 'xl';
+    /** Nome da lista para leitor de tela. */
+    rotulo?: string;
+    className?: string;
+}
+/** Grupo de itens empilhados (list group): lista simples, de links, de seleção… */
+export declare function Lista({ children, variante, numerada, horizontal, rotulo, className }: ListaProps): import("react").JSX.Element;
+export interface ItemListaProps {
+    /** Conteúdo principal (ou a descrição, quando há `titulo`). */
+    children?: ReactNode;
+    /** Linha em negrito acima do conteúdo. */
+    titulo?: ReactNode;
+    /** Ícone à esquerda (atalho para `inicio`). */
+    icone?: IconeProp;
+    /** Conteúdo à esquerda: avatar, ícone em caixa… */
+    inicio?: ReactNode;
+    /** Conteúdo à direita: badge, contagem, data… */
+    fim?: ReactNode;
+    ativo?: boolean;
+    desabilitado?: boolean;
+    /** Tom do item: fundo claro da cor, ou sólido com `solido`. */
+    cor?: CorItemLista;
+    solido?: boolean;
+    /** Vira link. */
+    href?: string;
+    /** Vira botão. */
+    onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /** Vira item de seleção: caixa de marcação ou rádio. */
+    marcacao?: 'caixa' | 'radio';
+    marcado?: boolean;
+    aoMarcar?: (marcado: boolean) => void;
+    /** Nome do grupo de rádios. */
+    nome?: string;
+    className?: string;
+}
+/** Item de `Lista`. Estático, link (`href`), botão (`onClick`) ou seleção (`marcacao`). */
+export declare function ItemLista({ children, titulo, icone, inicio, fim, ativo, desabilitado, cor, solido, href, onClick, marcacao, marcado, aoMarcar, nome, className, }: ItemListaProps): import("react").JSX.Element;

package/dist/components/ListaCards/ListaCards.d.ts

@@ -0,0 +1,28 @@
+import type { Key, ReactNode } from 'react';
+import { type PaginacaoProps } from '../Paginacao/Paginacao.js';
+export interface ListaCardsProps<T> {
+    itens: T[];
+    /** Monta o card de cada item (normalmente um `<Card>` composto pelo módulo). */
+    card: (item: T, indice: number) => ReactNode;
+    chave?: (item: T, indice: number) => Key;
+    /** Largura mínima de cada célula (padrão: 16rem) — define quantas colunas cabem. */
+    larguraMin?: string;
+    /** Altura das silhuetas: calibre pela altura do SEU card (padrão: 8.5rem). */
+    alturaCard?: string;
+    /** Nome acessível da grade. */
+    rotulo?: string;
+    /** Primeira carga: silhuetas no lugar dos cards. */
+    carregando?: boolean;
+    /** Recarga: mantém a grade esmaecida. */
+    atualizando?: boolean;
+    erro?: string | boolean;
+    aoRecarregar?: () => void;
+    vazioTitulo?: string;
+    vazioDescricao?: string;
+    vazioIcone?: string;
+    vazioAcoes?: ReactNode;
+    paginacao?: Omit<PaginacaoProps, 'embutida' | 'className'>;
+    className?: string;
+}
+/** Listagem em grade de cards, irmã da `Tabela` (a ordenação fica na barra de filtros). */
+export declare function ListaCards<T>({ itens, card, chave, larguraMin, alturaCard, rotulo, carregando, atualizando, erro, aoRecarregar, vazioTitulo, vazioDescricao, vazioIcone, vazioAcoes, paginacao, className, }: ListaCardsProps<T>): import("react").JSX.Element;