@celke/kole-react 0.4.1 → 0.5.0

package/README.md

@@ -145,6 +145,7 @@ Inertia. Para as telas Blade com o mesmo layout, veja o pacote Composer
 | Dados | `Tabela`, `ListaCards`, `Paginacao`, `Indicador`/`Indicadores`, `Detalhes`, `Status`, `Chip`, `Avatar`, `Placa` |
 | Feedback | `Alerta`, `Dialogo` (central ou `lateral`), `useConfirmacao` (+ `.remover()`, `.avisar()`), `useToast`, `Vazio`, `Skeleton`, `Carregando` |
 | Conversa | `Conversa`, `Mensagem`, `CampoMensagem`, `Referencias` |
+| Site público | `EstruturaSite`, `RodapeSite`, `SecaoSite`, `DestaqueSite`, `CabecalhoSecao`, `CampoPesquisa`, `CardConteudo`, `CardRecurso`, `CardDepoimento`, `CardPlano`, `FaixaNumeros`, `FaixaChamada`, `ListaNumerada`, `FiltroPilulas`, `ConteudoArtigo`, `SumarioPagina`, `Newsletter` |
 | Gráficos | `GraficoLinha`, `GraficoBarras`, `GraficoCombinado`, `GraficoDispersao`, `MapaCalor`, `Minigrafico` (e `tendencia` no `Indicador`), `regressaoLinear` |
 
 ### Conversa (chat)
@@ -219,6 +220,111 @@ export function Chat({ mensagens, gerando, enviar, parar }: ChatProps) {
 }
 ```
 
+### Site público
+
+Para a parte aberta do sistema (site institucional, loja, portal) há uma moldura
+própria, sem o menu lateral: `EstruturaSite`, com barra de aviso opcional,
+cabeçalho fixo (marca, menu horizontal, botão de tema e as `acoes`), conteúdo e
+`RodapeSite`. No celular, o menu vai para um painel aberto pelo botão Menu. Os
+links são `<a href>` de verdade: dentro da `EstruturaSite`, os cartões, as listas e
+a `Trilha` navegam pelo `aoNavegar`/`renderLink` do app, e Ctrl+clique ou o botão
+do meio abrem em nova aba. A demo tem as páginas modelo de um site genérico (menu
+**Site**): Home (faixa escura ou clara), Sobre, Serviços e planos, Blog, Post (sem
+e com coluna lateral), Contato e as páginas legais (Termos de uso, Política de Privacidade e Política de
+Cookies, com texto de exemplo a ser revisado por um advogado).
+
+```tsx
+import { Link, Outlet, useLocation } from 'react-router-dom';
+import {
+  Botao,
+  CabecalhoSecao,
+  CardConteudo,
+  CardDepoimento,
+  CardPlano,
+  CardRecurso,
+  DestaqueSite,
+  EstruturaSite,
+  FaixaChamada,
+  FaixaNumeros,
+  ListaNumerada,
+  Newsletter,
+  RodapeSite,
+  SecaoSite,
+} from '@celke/kole-react';
+
+export function LayoutSite() {
+  const { pathname } = useLocation();
+  return (
+    <EstruturaSite
+      marca={{ nome: 'Sua Marca', href: '/', logo: '/logo.svg' }}
+      nav={[
+        { rotulo: 'Home', rota: '/' },
+        { rotulo: 'Serviços', rota: '/servicos' },
+        { rotulo: 'Contato', rota: '/contato' },
+      ]}
+      rotaAtual={pathname}
+      renderLink={(p) => (
+        <Link to={p.href} className={p.className} onClick={p.onClick} aria-current={p['aria-current']}>
+          {p.children}
+        </Link>
+      )}
+      aviso={<><b>Novidade:</b> conheça a nova versão.</>}
+      acoes={<Botao rotulo="Fale conosco" />}
+      rodape={
+        <RodapeSite
+          nome="Sua Marca"
+          descricao="O que a empresa faz e para quem."
+          extra={<Newsletter aparencia="linha" rotuloBotao="Assinar" aoInscrever={async (email) => { /* envie ao servidor */ }} />}
+          colunas={[{ titulo: 'Navegação', links: [{ rotulo: 'Serviços', rota: '/servicos' }] }]}
+          copyright="© 2026 Sua Marca"
+          redes={[{ rotulo: 'Instagram', rota: 'https://instagram.com/suamarca' }]}
+        />
+      }
+    >
+      <Outlet />
+    </EstruturaSite>
+  );
+}
+
+export function Home() {
+  return (
+    <>
+      {/* aparencia="claro" centraliza o texto e põe a `midia` embaixo */}
+      <DestaqueSite selo="Seu slogan" titulo="Uma frase forte sobre o seu negócio." realce="negócio" lateral={<img src="/produto.png" alt="" />}>
+        <Botao rotulo="Começar agora" severidade="destaque" tamanho="grande" />
+        <FaixaNumeros aparencia="simples" itens={[{ valor: '+1.200', rotulo: 'clientes' }]} />
+      </DestaqueSite>
+      <SecaoSite>
+        <CabecalhoSecao sobretitulo="Diferenciais" titulo="Por que escolher a Sua Marca" />
+        <CardRecurso icone="shield" titulo="Seguro e confiável">Garantias e cuidados com o cliente.</CardRecurso>
+        <ListaNumerada itens={[{ titulo: 'Contato inicial', descricao: 'O cliente conta o que precisa.' }]} />
+        <FaixaNumeros itens={[{ valor: '98', sufixo: '%', rotulo: 'de satisfação' }]} />
+        <CardDepoimento texto="O atendimento foi rápido e o resultado veio." nome="Nome do Cliente" cargo="Cargo · Empresa" />
+        <CardConteudo href="/blog/post" midia={<img src="/post.jpg" alt="" />} titulo="Título do post" />
+        <CardPlano nome="Profissional" preco="99" periodo="/mês" itens={['Suporte prioritário']} destaque acao={<Botao rotulo="Assinar" bloco />} />
+        <FaixaChamada titulo="Pronto para começar?" acoes={<Botao rotulo="Solicitar contato" severidade="destaque" />} />
+      </SecaoSite>
+    </>
+  );
+}
+```
+
+`CardConteudo` tem cinco formatos: `vertical` (grade de posts), `destaque`,
+`horizontal` (post em destaque), `compacto` e `linha` (listagem com quadro à
+direita). `CardRecurso` serve para diferenciais, serviços (`formato="horizontal"`),
+valores (`numero`) e canais de contato (`sobretitulo`). `ConteudoArtigo` estiliza o
+texto de posts e páginas como termos de uso; HTML vindo de Markdown deve chegar
+sanitizado. `SumarioPagina` lista as seções de uma página longa (pelo `id` dos
+títulos), marca a seção em leitura e rola até ela sem trocar o endereço, então
+funciona também em app com rotas no `#hash`. `Newsletter` confere o e-mail antes de chamar `aoInscrever`. Para
+perguntas frequentes, use o `Acordeao` (`icone="mais"`).
+
+Tokens próprios do site: `--site-largura`, `--r-site`, `--r-site-2`,
+`--sombra-site`, `--fs-site-hero`, `--fs-site-titulo`, `--fs-site-secao` e os tons
+sobre o marinho (`--site-escuro-*`). A cor de ação é o `--pri` de sempre: para a cor
+da marca do cliente, redefina `--pri`, `--pri-ink`, `--pri-bg` e `--pri-bd` (veja
+"Tema e tokens").
+
 ### Gráficos
 
 Desenhados em SVG próprio, sem biblioteca de gráficos. A largura
@@ -444,10 +550,17 @@ A ponte `@celke/kole-react/tailwind.css` faz duas coisas:
   `text-t3`, `border-border`, `bg-pri`, `text-ok-fg`, `bg-err-bg`,
   `rounded-card`, `rounded-pill`… Como apontam para os tokens, trocam de tema
   junto com o kole. `font-sans` e `font-mono` passam a ser as fontes do kole.
+  Para o site público: `max-w-site`, `rounded-site`, `rounded-site-2`,
+  `shadow-site`, `text-site-hero`, `text-site-titulo`, `text-site-secao` e, sobre
+  o marinho, `bg-navy text-site-escuro-t3`.
 
 A densidade não chega aos utilitários: `p-4` e `h-10` são fixos, só os
 componentes `lp-*` mudam com ela.
 
+Vale igual para o site e para o sistema: os componentes de site (`EstruturaSite`,
+`DestaqueSite`…) estão no mesmo `estilos.css`, na mesma camada `kole`, então
+`<SecaoSite className="mt-8" />` funciona e o preflight não desfaz o estilo deles.
+
 ## Desenvolvimento
 
 ```bash

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

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+export interface CabecalhoSecaoProps {
+    titulo: string;
+    /** Texto curto acima do título, em maiúsculas e laranja (ex.: "Novidades"). */
+    sobretitulo?: string;
+    descricao?: ReactNode;
+    /** À direita (ex.: um link "Ver todos →"). */
+    acao?: ReactNode;
+    /** Nível do título. Padrão: `2`. */
+    nivel?: 1 | 2 | 3;
+    /** `titulo` de página (maior) ou de `secao` (padrão). */
+    tamanho?: 'pagina' | 'secao';
+    /** `centro` para seções centralizadas (FAQ, planos). */
+    alinhamento?: 'inicio' | 'centro';
+    className?: string;
+}
+/** Título de seção ou de página do site, com sobretítulo e ação. */
+export declare function CabecalhoSecao({ titulo, sobretitulo, descricao, acao, nivel, tamanho, alinhamento, className }: CabecalhoSecaoProps): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+export interface CampoPesquisaProps {
+    valor: string;
+    aoMudar: (valor: string) => void;
+    /** Enter ou o botão. Recebe o termo sem espaços nas pontas. */
+    aoPesquisar?: (termo: string) => void;
+    placeholder?: string;
+    /** Nome do campo para leitor de tela. Padrão: o `placeholder`. */
+    rotulo?: string;
+    rotuloBotao?: string;
+    /** `padrao` = pílula clara · `destaque` = pílula branca grande com botão laranja, para a faixa marinha. */
+    aparencia?: 'padrao' | 'destaque';
+    className?: string;
+}
+/** Busca em pílula com botão (`role="search"`), como nas faixas e listagens do site. */
+export declare function CampoPesquisa({ valor, aoMudar, aoPesquisar, placeholder, rotulo, rotuloBotao, aparencia, className }: CampoPesquisaProps): import("react").JSX.Element;

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+export interface CardConteudoProps {
+    titulo: string;
+    /**
+     * `vertical` = mídia 16:9 no topo (grade de posts) · `destaque` = mídia no topo e título grande ·
+     * `horizontal` = mídia à esquerda (post em destaque) · `compacto` = miniatura quadrada à esquerda ·
+     * `linha` = item de listagem, com um quadro à direita (`lateral`).
+     */
+    formato?: 'vertical' | 'destaque' | 'horizontal' | 'compacto' | 'linha';
+    resumo?: ReactNode;
+    /** Linha acima do título: `Badge`s, categoria, data. */
+    etiquetas?: ReactNode;
+    /** Imagem (ou qualquer nó) do cartão. */
+    midia?: ReactNode;
+    /** Linha miúda no fim (ex.: "Autor · 05/11/2026 · 6 min de leitura"). */
+    rodape?: ReactNode;
+    /** `linha`: quadro à direita (ex.: preço, quantidade). */
+    lateral?: ReactNode;
+    /** O cartão inteiro vira um link (o do título, esticado: o leitor de tela lê só o título). */
+    href?: string;
+    /** Sem `href`: o cartão inteiro vira um botão. */
+    aoClicar?: () => void;
+    /** Nível do título. Padrão: `3`. */
+    nivel?: 2 | 3 | 4;
+    className?: string;
+}
+/** Cartão de post, notícia, produto ou pessoa do site, em cinco formatos. */
+export declare function CardConteudo({ titulo, formato, resumo, etiquetas, midia, rodape, lateral, href, aoClicar, nivel, className }: CardConteudoProps): import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+export interface CardDepoimentoProps {
+    /** O depoimento, sem aspas (o cartão põe). */
+    texto: string;
+    nome: string;
+    /** Linha abaixo do nome (ex.: "Cargo · Empresa"). */
+    cargo?: string;
+    /** URL da foto. Sem ela, as iniciais do `nome`. */
+    foto?: string;
+    /** De 0 a 5 estrelas. Padrão: `5`; `0` esconde. */
+    nota?: number;
+    className?: string;
+}
+/** Depoimento de cliente: estrelas, citação e quem disse. */
+export declare function CardDepoimento({ texto, nome, cargo, foto, nota, className }: CardDepoimentoProps): import("react").JSX.Element;

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export interface CardPlanoProps {
+    nome: string;
+    descricao?: string;
+    /** Preço já formatado, sem a moeda (ex.: "99"). */
+    preco: string;
+    /** Padrão: "R$". */
+    moeda?: string;
+    /** Depois do preço (ex.: "/mês"). */
+    periodo?: string;
+    /** O que o plano inclui. */
+    itens: string[];
+    /** Plano recomendado: cartão marinho e selo no alto. */
+    destaque?: boolean;
+    /** Texto do selo do `destaque`. Padrão: "Mais escolhido". */
+    rotuloDestaque?: string;
+    /** Botão no pé do cartão (ex.: `<Botao bloco …>`). */
+    acao?: ReactNode;
+    className?: string;
+}
+/** Cartão de plano ou preço: nome, valor, lista do que inclui e o botão de contratar. */
+export declare function CardPlano({ nome, descricao, preco, moeda, periodo, itens, destaque, rotuloDestaque, acao, className }: CardPlanoProps): import("react").JSX.Element;

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import { type IconeProp } from '../../utils/Icone.js';
+export interface CardRecursoProps {
+    titulo: ReactNode;
+    /** Texto de apoio. */
+    children?: ReactNode;
+    /** Ícone num quadrado azul-claro. */
+    icone?: IconeProp;
+    /** No lugar do ícone, um número em laranja (ex.: "01" nos valores da empresa). */
+    numero?: string;
+    /** Texto miúdo acima do título (ex.: "Telefone" no cartão de contato). */
+    sobretitulo?: string;
+    /** Abaixo do texto (ex.: um link "Saiba mais →"). */
+    acao?: ReactNode;
+    /** `vertical` = ícone em cima · `horizontal` = ícone à esquerda. */
+    formato?: 'vertical' | 'horizontal';
+    /** Nível do título. Padrão: `3`. */
+    nivel?: 2 | 3 | 4;
+    className?: string;
+}
+/** Cartão de diferencial, serviço, valor ou canal de contato: ícone (ou número), título e texto. */
+export declare function CardRecurso({ titulo, children, icone, numero, sobretitulo, acao, formato, nivel, className }: CardRecursoProps): import("react").JSX.Element;

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

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface ConteudoArtigoProps {
+    /** HTML comum do texto: `p`, `h2`, `h3`, `ul`, `ol`, `blockquote`, `a`, `img`, `figure`. */
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * Área de leitura de posts e páginas de texto (termos, privacidade): largura de
+ * cerca de 70 caracteres e o estilo dos elementos comuns. Markdown convertido em
+ * HTML pelo app deve chegar já sanitizado.
+ */
+export declare function ConteudoArtigo({ children, className }: ConteudoArtigoProps): import("react").JSX.Element;

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

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+export interface DestaqueSiteProps {
+    /** Título principal (vira o `<h1>` da página). */
+    titulo: string;
+    /** Trecho do título pintado em laranja (ex.: "melhor preço"). */
+    realce?: string;
+    /** Acima de tudo (ex.: uma `Trilha` nas páginas internas). */
+    topo?: ReactNode;
+    /** Selo acima do título (ex.: "Atualizado hoje"). */
+    selo?: ReactNode;
+    /** Texto curto acima do título, em maiúsculas (alternativa ao selo). */
+    sobretitulo?: string;
+    descricao?: ReactNode;
+    /** Abaixo do texto: normalmente um `CampoPesquisa aparencia="destaque"` ou botões. */
+    children?: ReactNode;
+    /** `escuro` (padrão) = faixa marinha com coluna à direita · `claro` = fundo claro, texto centralizado e `midia` embaixo. */
+    aparencia?: 'escuro' | 'claro';
+    /** Coluna da direita, no `escuro` (ex.: imagem do produto). */
+    lateral?: ReactNode;
+    /** Imagem larga abaixo do texto, no `claro` (cantos de cima arredondados, encostada na borda de baixo). */
+    midia?: ReactNode;
+    /** Nível do título. Padrão: `1`. */
+    nivel?: 1 | 2;
+    className?: string;
+}
+/** Faixa marinha de abertura (hero): selo, título com realce, texto, busca e uma coluna livre. */
+export declare function DestaqueSite({ topo, titulo, realce, selo, sobretitulo, descricao, children, aparencia, lateral, midia, nivel, className }: DestaqueSiteProps): import("react").JSX.Element;

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, descricao, placeholder, rotuloBotao, mensagemSucesso, 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, 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;