@celke/kole-react 0.4.1 → 0.6.0

package/dist/components/Site/EstruturaSite.d.ts

@@ -0,0 +1,60 @@
+import { type ReactNode } from 'react';
+import type { Marca, PropsLink } from '../Estrutura/Estrutura.js';
+export interface ItemSite {
+    rotulo: string;
+    rota: string;
+}
+export interface EstruturaSiteProps {
+    marca: Marca;
+    /** Itens do menu horizontal (no celular, vão para o painel do botão Menu). */
+    nav: ItemSite[];
+    /**
+     * Rota atual: marca o item ativo (`/blog` também vale para `/blog/post`; vence a rota mais
+     * longa). A página inicial (o `href` da marca) só é marcada nela mesma.
+     */
+    rotaAtual?: string;
+    /** Navegação do roteador do app. Ctrl+clique e o botão do meio continuam abrindo em nova aba. */
+    aoNavegar?: (rota: string) => void;
+    /** Link do roteador (ex.: o `Link` do React Router); recebe `href`, `className`, `onClick` e `children`. */
+    renderLink?: (props: PropsLink) => ReactNode;
+    /** À direita do menu (ex.: "Entrar" e "Criar conta"). No celular, também vão para o painel. */
+    acoes?: ReactNode;
+    /** Botão de tema claro/escuro (precisa do `ProvedorUi`). Padrão: `true`. */
+    alternarTema?: boolean;
+    /** Barra marinha fina acima do cabeçalho (novidade, telefone, e-mail). Some no celular a parte da direita. */
+    aviso?: ReactNode;
+    /** À direita da barra de aviso (ex.: telefone e e-mail). */
+    avisoLateral?: ReactNode;
+    /** Normalmente um `RodapeSite`. */
+    rodape?: ReactNode;
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Moldura de site público: cabeçalho fixo com marca, menu horizontal e ações,
+ * conteúdo e rodapé. Para sistemas internos, use a `Estrutura`.
+ */
+export declare function EstruturaSite({ marca, nav, rotaAtual, aoNavegar, renderLink, acoes, alternarTema, aviso, avisoLateral, rodape, children, className }: EstruturaSiteProps): import("react").JSX.Element;
+export interface LinkRodape {
+    rotulo: string;
+    rota: string;
+}
+export interface ColunaRodape {
+    titulo: string;
+    links: LinkRodape[];
+}
+export interface RodapeSiteProps {
+    /** Nome em destaque na primeira coluna. */
+    nome: string;
+    descricao?: ReactNode;
+    colunas?: ColunaRodape[];
+    /** Abaixo da descrição (ex.: um `Newsletter aparencia="linha"`). A coluna da marca fica mais larga. */
+    extra?: ReactNode;
+    /** Linha de baixo (ex.: "© 2026 Empresa"). */
+    copyright?: ReactNode;
+    /** À direita da linha de baixo (ex.: links das redes sociais). */
+    redes?: LinkRodape[];
+    className?: string;
+}
+/** Rodapé marinho do site: marca, colunas de links e a linha de direitos. */
+export declare function RodapeSite({ nome, descricao, colunas, extra, copyright, redes, className }: RodapeSiteProps): import("react").JSX.Element;

package/dist/components/Site/FaixaChamada.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export interface FaixaChamadaProps {
+    titulo: string;
+    descricao?: ReactNode;
+    /** Botões à direita. */
+    acoes?: ReactNode;
+    /** `pri` = azul da marca (padrão) · `escuro` = marinho. */
+    cor?: 'pri' | 'escuro';
+    /** Nível do título. Padrão: `2`. */
+    nivel?: 2 | 3;
+    className?: string;
+}
+/** Faixa de chamada para ação ("Pronto para começar?"), com botões. */
+export declare function FaixaChamada({ titulo, descricao, acoes, cor, nivel, className }: FaixaChamadaProps): import("react").JSX.Element;

package/dist/components/Site/FaixaNumeros.d.ts

@@ -0,0 +1,20 @@
+export interface NumeroSite {
+    /** O número já formatado (ex.: "1.200", "4,9/5"). */
+    valor: string;
+    /** Em laranja, logo depois (ex.: "+", "%", "h"). */
+    sufixo?: string;
+    rotulo: string;
+}
+export interface FaixaNumerosProps {
+    itens: NumeroSite[];
+    /**
+     * `faixa` = bloco marinho arredondado, números grandes · `cartoes` = um cartão claro por número ·
+     * `simples` = só os números, para ficar sobre a faixa de abertura.
+     */
+    aparencia?: 'faixa' | 'cartoes' | 'simples';
+    /** Nome da lista para leitor de tela (ex.: "Números da empresa"). */
+    rotulo?: string;
+    className?: string;
+}
+/** Números de destaque (clientes, satisfação, anos de mercado). */
+export declare function FaixaNumeros({ itens, aparencia, rotulo, className }: FaixaNumerosProps): import("react").JSX.Element;

package/dist/components/Site/FiltroPilulas.d.ts

@@ -0,0 +1,17 @@
+export interface OpcaoFiltroPilulas<V extends string = string> {
+    valor: V;
+    rotulo: string;
+}
+export interface FiltroPilulasProps<V extends string = string> {
+    opcoes: OpcaoFiltroPilulas<V>[];
+    valor: V;
+    aoMudar: (valor: V) => void;
+    /** Nome do filtro para leitor de tela (ex.: "Categoria"). */
+    rotulo: string;
+    /** `quebrar` = várias linhas (padrão) · `rolar` = uma linha só, rolando para o lado. */
+    disposicao?: 'quebrar' | 'rolar';
+    alinhamento?: 'inicio' | 'centro';
+    className?: string;
+}
+/** Filtro de uma escolha só em pílulas (categorias, regiões, UFs). A escolhida fica escura. */
+export declare function FiltroPilulas<V extends string = string>({ opcoes, valor, aoMudar, rotulo, disposicao, alinhamento, className }: FiltroPilulasProps<V>): import("react").JSX.Element;

package/dist/components/Site/ListaNumerada.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+export interface ItemListaNumerada {
+    /** Chave do item (padrão: o título). */
+    id?: string;
+    titulo: string;
+    /** Linha miúda abaixo (ex.: data, quantidade). */
+    detalhe?: ReactNode;
+    /** Texto abaixo do título, em tamanho de leitura (ex.: passos de "Como funciona"). */
+    descricao?: ReactNode;
+    href?: string;
+}
+export interface ListaNumeradaProps {
+    itens: ItemListaNumerada[];
+    /** `padrao` = números grandes (ranking da semana) · `compacto` = para colunas laterais. */
+    tamanho?: 'padrao' | 'compacto';
+    /** Nome da lista para leitor de tela. */
+    rotulo?: string;
+    className?: string;
+}
+/** Lista numerada (01, 02…) com os números em laranja: mais lidos, ranking, passos de um processo. */
+export declare function ListaNumerada({ itens, tamanho, rotulo, className }: ListaNumeradaProps): import("react").JSX.Element;

package/dist/components/Site/Newsletter.d.ts

@@ -0,0 +1,16 @@
+export interface NewsletterProps {
+    /** Recebe o e-mail já conferido. Pode devolver uma Promise (o botão espera). */
+    aoInscrever: (email: string) => void | Promise<void>;
+    /** Com `aparencia="cartao"`: título do cartão. */
+    titulo?: string;
+    descricao?: string;
+    placeholder?: string;
+    rotuloBotao?: string;
+    /** Mensagem depois de inscrever. */
+    mensagemSucesso?: string;
+    /** `cartao` = bloco marinho com título (coluna lateral) · `linha` = campo e botão numa pílula (rodapé). */
+    aparencia?: 'cartao' | 'linha';
+    className?: string;
+}
+/** Inscrição por e-mail (newsletter), para fundo marinho: rodapé ou coluna lateral. */
+export declare function Newsletter({ aoInscrever, titulo: tituloProp, descricao, placeholder: placeholderProp, rotuloBotao: rotuloBotaoProp, mensagemSucesso: mensagemSucessoProp, aparencia, className, }: NewsletterProps): import("react").JSX.Element;

package/dist/components/Site/SecaoSite.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+export interface SecaoSiteProps {
+    children: ReactNode;
+    /** `padrao` = fundo da página · `superficie` = faixa branca com linha embaixo · `escuro` = faixa marinha. */
+    fundo?: 'padrao' | 'superficie' | 'escuro';
+    /** `estreita` = 55rem, para FAQ, texto e formulários centralizados. Padrão: `padrao` (largura do site). */
+    largura?: 'padrao' | 'estreita';
+    /** Espaço acima e abaixo. Padrão: `medio`. */
+    espaco?: 'compacto' | 'medio' | 'amplo';
+    /** Nome da região para leitor de tela (vira um `<section>` com `aria-label`). */
+    rotulo?: string;
+    className?: string;
+}
+/** Faixa do site com o conteúdo centralizado na largura `--site-largura`. */
+export declare function SecaoSite({ children, fundo, largura, espaco, rotulo, className }: SecaoSiteProps): import("react").JSX.Element;

package/dist/components/Site/SumarioPagina.d.ts

@@ -0,0 +1,17 @@
+export interface ItemSumario {
+    /** `id` do título da seção na página. */
+    id: string;
+    rotulo: string;
+}
+export interface SumarioPaginaProps {
+    itens: ItemSumario[];
+    /** Padrão: "Nesta página". */
+    titulo?: string;
+    className?: string;
+}
+/**
+ * Sumário de página longa (termos, política, documentação): links para as
+ * seções, com a seção em leitura marcada. Rola até a seção sem trocar o
+ * endereço, então funciona também em app com rotas no `#hash`.
+ */
+export declare function SumarioPagina({ itens, titulo: tituloProp, className }: SumarioPaginaProps): import("react").JSX.Element;

package/dist/components/Site/linkSite.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import type { PropsLink } from '../Estrutura/Estrutura.js';
+export interface ContextoLinkSite {
+    aoNavegar?: (rota: string) => void;
+    renderLink?: (props: PropsLink) => ReactNode;
+    /** Chamado depois de cada navegação (a `EstruturaSite` fecha o menu do celular). */
+    aoNavegou?: () => void;
+}
+export declare const ProvedorLinkSite: import("react").Provider<ContextoLinkSite>;
+/**
+ * Link de verdade (`<a href>`) que, dentro da `EstruturaSite`, navega pelo roteador
+ * do app (`aoNavegar` ou `renderLink`). Fora dela, é um link comum.
+ */
+export declare function useLinkSite(): (href: string, conteudo: ReactNode, className: string, extra?: {
+    atual?: boolean;
+    aoClicar?: () => void;
+    rotulo?: string;
+}) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;

package/dist/components/Tabela/Tabela.d.ts

@@ -54,4 +54,4 @@ export interface TabelaProps<T> {
 }
 /** Mantido por compatibilidade: é o `lerCampo` dos utilitários. */
 export declare const valorDoCampo: typeof lerCampo;
-export declare function Tabela<T>({ colunas, registros, chave, acoes, aparencia, rotulo, carregando, atualizando, erro, aoRecarregar, vazioTitulo, vazioDescricao, vazioIcone, vazioAcoes, ordenacao, aoOrdenar, selecao, selecionados, aoMudarSelecao, aoClicarLinha, paginacao, className, }: TabelaProps<T>): import("react").JSX.Element;
+export declare function Tabela<T>({ colunas, registros, chave, acoes, aparencia, rotulo: rotuloProp, carregando, atualizando, erro, aoRecarregar, vazioTitulo: vazioTituloProp, vazioDescricao, vazioIcone, vazioAcoes, ordenacao, aoOrdenar, selecao, selecionados, aoMudarSelecao, aoClicarLinha, paginacao, className, }: TabelaProps<T>): import("react").JSX.Element;

package/dist/components/TelaLogin/TelaLogin.d.ts

@@ -63,4 +63,4 @@ export interface TelaLoginProps {
     className?: string;
 }
 /** Tela de login institucional: imagem + painel com identificação, senha e 2FA. */
-export declare function TelaLogin({ marca, modelo, apresentacao, ambiente, identificador, titulo, descricao, aoEntrar, aoConfirmarCodigo, confiarDispositivo, instrucaoCodigo, linkSenha, acoes, rodape, className, }: TelaLoginProps): import("react").JSX.Element;
+export declare function TelaLogin({ marca, modelo, apresentacao, ambiente, identificador, titulo: tituloProp, descricao: descricaoProp, aoEntrar, aoConfirmarCodigo, confiarDispositivo, instrucaoCodigo: instrucaoCodigoProp, linkSenha, acoes, rodape, className, }: TelaLoginProps): import("react").JSX.Element;

package/dist/components/Valor/Valor.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from 'react';
+import { type OpcoesMoeda } from '../../utils/dinheiro.js';
+import { type BotaoProps } from '../Botao/Botao.js';
+interface ContextoValores {
+    ocultos: boolean;
+    alternar: () => void;
+    definir: (ocultos: boolean) => void;
+}
+export interface ProvedorValoresProps {
+    children: ReactNode;
+    /** Começa com os valores escondidos. Padrão `false`. */
+    ocultosInicial?: boolean;
+    /**
+     * Chave no `localStorage` para lembrar a escolha entre visitas. Sem ela, vale
+     * só enquanto a página estiver aberta.
+     */
+    chave?: string;
+}
+/** Guarda o "ocultar valores" de uma área: todo `Valor` dentro dela obedece ao `BotaoOcultarValores`. */
+export declare function ProvedorValores({ children, ocultosInicial, chave }: ProvedorValoresProps): import("react").JSX.Element;
+/** `{ ocultos, alternar, definir }` do `ProvedorValores` mais próximo (fora dele, nada fica oculto). */
+export declare function useValoresOcultos(): ContextoValores;
+export type BotaoOcultarValoresProps = Omit<BotaoProps, 'onClick' | 'icone' | 'pressionado' | 'children'>;
+/** Olho que esconde e mostra os valores do `ProvedorValores`. */
+export declare function BotaoOcultarValores({ rotulo, aparencia, severidade, ...resto }: BotaoOcultarValoresProps): import("react").JSX.Element;
+export interface ValorProps extends OpcoesMoeda {
+    valor: number;
+    /**
+     * Cor pelo sinal: verde no positivo, vermelho no negativo. Padrão: `true`
+     * com `tipo`, `false` sem ele.
+     */
+    colorir?: boolean;
+    /**
+     * Força o sentido, para valores guardados sempre positivos: `receita` = entrada (+) ·
+     * `despesa` = saída (−) · `neutro` = sem cor nem `+` (transferência).
+     */
+    tipo?: 'receita' | 'despesa' | 'neutro';
+    /** Força oculto/visível; sem ele, segue o `ProvedorValores`. */
+    oculto?: boolean;
+    tamanho?: 'pequeno' | 'normal' | 'grande' | 'destaque';
+    /** Texto forte. */
+    forte?: boolean;
+    /** Riscado (ex.: lançamento cancelado). */
+    riscado?: boolean;
+    className?: string;
+}
+/**
+ * Valor em dinheiro: `R$ 1.234,56`, com sinal e cor de entrada/saída e o
+ * "ocultar valores" dos apps de finanças. Os números têm largura fixa
+ * (alinham em coluna).
+ */
+export declare function Valor({ valor, colorir, tipo, oculto, tamanho, forte, riscado, className, sinal, ...opcoes }: ValorProps): import("react").JSX.Element;
+export {};