@rendra-ui/web 2.1.0

package/dist/types/components/app-shell/shell-context.d.ts

@@ -0,0 +1,48 @@
+import { type ReactNode } from 'react';
+import type { ShellLayout } from './layout';
+import type { NavigationTarget } from './navigation-utils';
+import type { NavGroup, NavItem, ShellMenuItem, ShellNotificationsConfig, ShellUser } from './types';
+export interface ShellContextValue {
+    /** Layout efetivo: padrão interno + prop `layout` do AppShell + escolha do usuário. */
+    layout: ShellLayout;
+    /** Altera uma opção de layout (guardada no navegador do usuário). */
+    setLayout: <K extends keyof ShellLayout>(key: K, value: ShellLayout[K]) => void;
+    /** Altera várias opções de uma vez (ex.: um código de menu M1 a M6). */
+    applyLayout: (partial: Partial<ShellLayout>) => void;
+    /** Volta ao layout padrão do projeto. */
+    resetLayout: () => void;
+    /** Gaveta de navegação aberta no mobile. */
+    mobileNavOpen: boolean;
+    setMobileNavOpen: (open: boolean) => void;
+    /**
+     * Espaço do rodapé fixo da página, entre o conteúdo e a barra inferior. A ActionBar
+     * sticky é desenhada aqui: fica sempre colada embaixo, na largura inteira.
+     */
+    footerSlot: HTMLElement | null;
+    /** Texto orientativo da tela (PageHeader help): o header mostra o ícone ao lado do título. */
+    pageHelp: ReactNode;
+    setPageHelp: (help: ReactNode) => void;
+    /** Busca global (Ctrl+K). */
+    searchOpen: boolean;
+    setSearchOpen: (open: boolean) => void;
+    /** Menu do sistema, recebido pela prop `navigation` do AppShell (obrigatória). */
+    navigation: NavGroup[];
+    /** Até 4 itens marcados `bottomNav`, calculados a partir de `navigation`. */
+    bottomNavItems: NavItem[];
+    /** Lista plana de destinos: busca global e cálculo do item ativo. */
+    navigationTargets: NavigationTarget[];
+    /** Usuário exibido no menu do avatar e no rodapé da sidebar. */
+    user: ShellUser;
+    /** Itens do menu do avatar (ex.: "Meu perfil", "Configurações"). */
+    userMenuItems: ShellMenuItem[];
+    /** Chamado ao selecionar "Sair". Sem ele, o botão não faz nada. */
+    onLogout?: () => void;
+    /** Rótulo do destino inicial na trilha do header. */
+    homeLabel: string;
+    /** Ações rápidas da busca global (ex.: "Novo cliente"). */
+    quickActions: ShellMenuItem[];
+    /** Notificações do sino do header. Sem esta prop, o sino não aparece. */
+    notifications?: ShellNotificationsConfig;
+}
+export declare const ShellContext: import("react").Context<ShellContextValue | null>;
+export declare function useShell(): ShellContextValue;

package/dist/types/components/app-shell/sidebar.d.ts

@@ -0,0 +1 @@
+export declare function Sidebar(): import("react").JSX.Element;

package/dist/types/components/app-shell/types.d.ts

@@ -0,0 +1,53 @@
+import type { LucideIcon } from 'lucide-react';
+import type { FeedbackType } from '../../brand/types';
+export interface NavItem {
+    title: string;
+    /** Rota. Item com children e sem rota só abre o submenu. */
+    to?: string;
+    icon: LucideIcon;
+    /** Contador exibido à direita (ex.: pendências). */
+    badge?: number;
+    /** Aparece na barra de navegação inferior do mobile (no máximo 4 itens no total). */
+    bottomNav?: boolean;
+    /** Rótulo curto para a barra inferior, quando o título não cabe. */
+    shortTitle?: string;
+    /** Frase curta exibida no mega menu. */
+    description?: string;
+    children?: NavChild[];
+}
+export interface NavChild {
+    title: string;
+    to: string;
+    description?: string;
+}
+export interface NavGroup {
+    title: string;
+    /** Frase curta da seção, exibida no mega menu. */
+    description?: string;
+    items: NavItem[];
+}
+/** Usuário exibido no menu do avatar e no rodapé da sidebar. */
+export interface ShellUser {
+    name: string;
+    email?: string;
+    avatarUrl?: string;
+}
+/** Item do menu do usuário ou de ação rápida na busca global. */
+export interface ShellMenuItem {
+    label: string;
+    to?: string;
+    onSelect?: () => void;
+    icon?: LucideIcon;
+}
+export interface ShellNotificationItem {
+    id: string;
+    type: FeedbackType;
+    title: string;
+    time: string;
+    read: boolean;
+}
+export interface ShellNotificationsConfig {
+    items: ShellNotificationItem[];
+    onMarkAllRead?: () => void;
+    onItemClick?: (id: string) => void;
+}

package/dist/types/components/layout/index.d.ts

@@ -0,0 +1,4 @@
+export { Container, Grid, Inline, Section, Stack } from './primitives';
+export type { ContainerProps, GridProps, InlineProps, SectionProps, StackProps } from './primitives';
+export { PageHeader } from './page-header';
+export type { PageHeaderProps } from './page-header';

package/dist/types/components/layout/page-header.d.ts

@@ -0,0 +1,38 @@
+import { type ReactNode } from 'react';
+import { type BreadcrumbItem } from '../ui/breadcrumb';
+export interface PageHeaderProps {
+    /** Título da página. Dentro do AppShell ele já aparece no header, então aqui fica oculto. */
+    title: ReactNode;
+    /**
+     * Mostra o título no corpo da página. Use só quando o título do corpo for diferente
+     * do header (ex.: no detalhe, o nome do cliente em vez de "Detalhe do cliente"),
+     * ou em telas fora do AppShell.
+     */
+    showTitle?: boolean;
+    /**
+     * Dado curto sobre o conteúdo (status, segmento, cidade). Nunca instrução de uso: texto
+     * orientativo vai em `help`.
+     */
+    description?: ReactNode;
+    /**
+     * Texto orientativo da tela (como usar, o que cada parte faz). Vira um ícone de informação
+     * ao lado do título, no header fixo, que abre um modal. Nunca um parágrafo no corpo.
+     */
+    help?: ReactNode;
+    /** Trilha própria. Dentro do AppShell a trilha já aparece no header, abaixo do título. */
+    breadcrumb?: BreadcrumbItem[];
+    /**
+     * Ação principal (e no máximo uma secundária). No mobile ficam abaixo da descrição,
+     * dividindo a largura; no desktop ficam à direita, com largura automática.
+     */
+    actions?: ReactNode;
+    /** Conteúdo abaixo, como abas ou metadados. */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * Cabeçalho de conteúdo: descrição e ações da tela, logo abaixo do header.
+ * O título fica no header (com a trilha); aqui ele só é lido por leitores de tela,
+ * para que cada página tenha um único título principal (h1).
+ */
+export declare function PageHeader({ title, showTitle, description, help, breadcrumb, actions, children, className, }: PageHeaderProps): import("react").JSX.Element;

package/dist/types/components/layout/primitives.d.ts

@@ -0,0 +1,71 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+import { type Align, type Justify, type Space } from './tokens';
+interface BaseProps extends HTMLAttributes<HTMLElement> {
+    as?: ElementType;
+    asChild?: boolean;
+}
+declare const containerSize: {
+    readonly narrow: "max-w-3xl";
+    readonly default: "max-w-none";
+    readonly full: "max-w-none";
+};
+export interface ContainerProps extends BaseProps {
+    /** narrow: leitura e formulários; default: telas de sistema; full: sem limite. */
+    size?: keyof typeof containerSize;
+    /** Respiro vertical de página (topo e base). Use no contêiner raiz de cada tela. */
+    padded?: boolean;
+}
+/** Largura máxima e padding lateral de página: 16px no mobile, 24px no tablet, 32px no desktop. */
+export declare function Container({ size, padded, className, ...props }: ContainerProps): import("react").JSX.Element;
+export interface StackProps extends BaseProps {
+    gap?: Space;
+    align?: Align;
+}
+/** Empilha na vertical. gap="section" para separar seções de página. */
+export declare function Stack({ gap, align, className, ...props }: StackProps): import("react").JSX.Element;
+export interface InlineProps extends BaseProps {
+    gap?: Space;
+    align?: Align;
+    justify?: Justify;
+    /** Quebra linha quando falta espaço (padrão). Com false, os filhos precisam poder encolher. */
+    wrap?: boolean;
+    /** Empilha no mobile e alinha em linha a partir de sm. */
+    stackOnMobile?: boolean;
+}
+/** Alinha na horizontal, quebrando linha por padrão para nunca estourar a largura. */
+export declare function Inline({ gap, align, justify, wrap, stackOnMobile, className, ...props }: InlineProps): import("react").JSX.Element;
+type Cols = 1 | 2 | 3 | 4 | 6;
+export interface GridProps extends BaseProps {
+    /** Colunas por faixa. O padrão no mobile é sempre 1. */
+    cols?: {
+        base?: Cols;
+        sm?: Cols;
+        md?: Cols;
+        lg?: Cols;
+        xl?: Cols;
+    };
+    gap?: Space;
+    /**
+     * 'container' faz as colunas reagirem à largura do próprio bloco (@container),
+     * útil dentro de drawers, cards laterais e colunas estreitas.
+     */
+    responsive?: 'screen' | 'container';
+    /**
+     * Grade de formulário: 12 colunas pela largura do bloco, com a largura de cada Field no
+     * span (padrão 3 por linha). Ignora cols e responsive; o gap padrão vira "fields".
+     */
+    form?: boolean;
+}
+export declare function Grid({ cols, gap, responsive, form, className, children, ...props }: GridProps): import("react").JSX.Element;
+export interface SectionProps extends Omit<BaseProps, 'title'> {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** Ações do cabeçalho da seção, à direita no desktop e abaixo do título no mobile. */
+    actions?: ReactNode;
+    /** Nível do título. Padrão h2. */
+    level?: 2 | 3;
+    gap?: Space;
+}
+/** Seção de página com título, descrição e ações. Espaço interno padrão de 16px. */
+export declare function Section({ title, description, actions, level, gap, className, children, id, ...props }: SectionProps): import("react").JSX.Element;
+export {};

package/dist/types/components/layout/tokens.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Mapas de classes das primitivas de layout. Classes completas e estáticas,
+ * para o Tailwind encontrá-las. Só os degraus da escala permitida.
+ */
+export type Space = '0' | '1' | '2' | '3' | '4' | '6' | '8' | '12' | '16' | '24' | 'section' | 'fields';
+export declare const gapClass: Record<Space, string>;
+/**
+ * Grade de formulário, pela largura do próprio bloco (container query), não da tela:
+ * 1 coluna estreito, 6 colunas a partir de 28rem, 12 colunas a partir de 48rem.
+ * No largo, o padrão é 3 campos por linha (md = 4/12). Nunca 2 por linha por padrão.
+ */
+export declare const fieldGridClass = "grid grid-cols-1 @md:grid-cols-6 @3xl:grid-cols-12";
+/** Largura do Field na grade de formulário (no largo, em 12 colunas). */
+export declare const fieldSpanClass: {
+    /** 2/12, cerca de 17%: UF, número, DDD. */
+    readonly xs: "@md:col-span-2 @3xl:col-span-2";
+    /** 3/12 = 25%: CEP, CNPJ, CPF, datas curtas. */
+    readonly sm: "@md:col-span-2 @3xl:col-span-3";
+    /** 4/12 = 33%: o padrão, 3 campos por linha. */
+    readonly md: "@md:col-span-3 @3xl:col-span-4";
+    /** 6/12 = 50%. */
+    readonly lg: "@md:col-span-3 @3xl:col-span-6";
+    /** 8/12 = 67%: nome, logradouro longo. */
+    readonly xl: "@md:col-span-6 @3xl:col-span-8";
+    /** Linha inteira. */
+    readonly full: "@md:col-span-6 @3xl:col-span-12";
+};
+export type FieldSpan = keyof typeof fieldSpanClass;
+export declare const alignClass: {
+    readonly start: "items-start";
+    readonly center: "items-center";
+    readonly end: "items-end";
+    readonly stretch: "items-stretch";
+    readonly baseline: "items-baseline";
+};
+export declare const justifyClass: {
+    readonly start: "justify-start";
+    readonly center: "justify-center";
+    readonly end: "justify-end";
+    readonly between: "justify-between";
+};
+export type Align = keyof typeof alignClass;
+export type Justify = keyof typeof justifyClass;

package/dist/types/components/rendra-provider.d.ts

@@ -0,0 +1,48 @@
+import { type ComponentType, type ReactNode } from 'react';
+/**
+ * Link com a mesma interface do `<a>`/`Link`: recebe `to`, `className`, `children`,
+ * `aria-*`, `onClick` e repassa o resto.
+ */
+export interface RendraLinkProps {
+    to: string;
+    className?: string;
+    children?: ReactNode;
+    [key: string]: unknown;
+}
+export interface RendraBreadcrumbItem {
+    label: string;
+    to?: string;
+}
+export interface RendraNavigateOptions {
+    replace?: boolean;
+}
+export interface RendraProviderProps {
+    children: ReactNode;
+    /** Componente de link do roteador do host (ex.: `Link` do react-router). */
+    linkComponent: ComponentType<RendraLinkProps>;
+    /** Devolve o caminho atual (ex.: `useLocation().pathname`). */
+    useCurrentPath: () => string;
+    /** Navega para um caminho, com `replace` opcional. */
+    navigate: (to: string, options?: RendraNavigateOptions) => void;
+    /** Volta à tela anterior. */
+    goBack: () => void;
+    /** Trilha da rota atual (ex.: via `useMatches` e `handle.crumb`). Opcional. */
+    useBreadcrumbs?: () => RendraBreadcrumbItem[];
+}
+/**
+ * Única peça que sabe como navegar (`react-router`, outro roteador, ou nenhum).
+ * Sem `RendraProvider` na árvore, os hooks abaixo caem para um comportamento simples,
+ * baseado só em `window.location`/`history`, e os componentes continuam funcionando.
+ */
+export declare function RendraProvider({ children, linkComponent, useCurrentPath: useCurrentPathProp, navigate, goBack, useBreadcrumbs, }: RendraProviderProps): import("react").JSX.Element;
+/** Componente de link do provider ativo (ou `<a href>`, sem provider). */
+export declare function useRendraLink(): ComponentType<RendraLinkProps>;
+/** Caminho atual (ex.: `/clientes/novo`), do provider ativo ou de `window.location`. */
+export declare function useCurrentPath(): string;
+/** Navegar e voltar, do provider ativo ou de `window.location`/`history`. */
+export declare function useRendraNavigate(): {
+    navigate: (to: string, options?: RendraNavigateOptions) => void;
+    goBack: () => void;
+};
+/** Trilha da rota atual, do provider ativo ou vazia, sem roteador. */
+export declare function useRendraBreadcrumbs(): RendraBreadcrumbItem[];

package/dist/types/components/rendra-router-bridge.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+/**
+ * Metadados de rota lidos pela trilha: handle: { crumb: 'Clientes' }. Convenção do
+ * react-router (`handle`), que não existe em outros roteadores; por isso fica aqui, na
+ * ponte, e não em src/components/app-shell/header.tsx.
+ */
+export interface RouteHandle {
+    crumb?: string | ((params: Record<string, string | undefined>) => string);
+}
+/**
+ * Liga o `RendraProvider` ao `react-router` do boilerplate: link, caminho atual, navegar
+ * e a trilha. É o único lugar do app que sabe que o roteador é o `react-router`; os
+ * componentes de `src/components/ui` e o `AppShell` não importam `react-router` diretamente.
+ * Sem `children`, renderiza `<Outlet />`, para ser usado como elemento raiz das rotas.
+ */
+export declare function RendraRouterBridge({ children }?: {
+    children?: ReactNode;
+}): import("react").JSX.Element;

package/dist/types/components/ui/accordion.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+export interface AccordionItem {
+    value: string;
+    title: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items: AccordionItem[];
+    /** Permite abrir vários ao mesmo tempo. */
+    multiple?: boolean;
+    defaultValue?: string[];
+    className?: string;
+}
+/** Accordion único, com animação de altura e área de toque de 44px no mobile. */
+export declare function Accordion({ items, multiple, defaultValue, className }: AccordionProps): import("react").JSX.Element;

package/dist/types/components/ui/action-bar.d.ts

@@ -0,0 +1,35 @@
+import { type ReactNode } from 'react';
+export interface ActionBarAction {
+    label: string;
+    onClick?: () => void;
+    icon?: ReactNode;
+    disabled?: boolean;
+    destructive?: boolean;
+}
+export interface ActionBarProps {
+    /** Ação principal: sempre primária (ou destrutiva), 70% da largura. */
+    primary: ActionBarAction & {
+        type?: 'button' | 'submit';
+        form?: string;
+        loading?: boolean;
+        loadingLabel?: string;
+    };
+    /** Cancelar: sempre outline, 30% à esquerda. Sem ele, a principal ocupa 100%. */
+    cancel?: ActionBarAction;
+    /** A partir da terceira ação: vão para o menu de três pontinhos. */
+    secondary?: ActionBarAction[];
+    /**
+     * sticky: rodapé fixo das telas de formulário. Fica sempre colado embaixo, na largura
+     * inteira, fora da área rolável (nunca sobe, mesmo com formulário curto). Em drawer e
+     * modal o rodapé já é fixo; no wizard os botões seguem junto do card. Como o botão fica
+     * fora do <form>, use primary.form com o id do formulário para enviar.
+     */
+    sticky?: boolean;
+    className?: string;
+}
+/**
+ * Barra de ações única, com a regra de botões do sistema:
+ * 1 botão = 100%; 2 botões = cancelar 30% + principal 70%; 3 ou mais = extras no menu.
+ * Vale para drawer, modal e formulário em página, em qualquer tamanho de tela.
+ */
+export declare function ActionBar({ primary, cancel, secondary, sticky, className }: ActionBarProps): import("react").JSX.Element;

package/dist/types/components/ui/alert.d.ts

@@ -0,0 +1,26 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { ReactNode } from 'react';
+import type { FeedbackType } from '../../brand/types';
+/**
+ * Alert único do sistema: ícone da marca à esquerda, título em destaque e descrição.
+ * O tipo é prop; o formato vem do template ativo (quadrado, meio-termo ou arredondado).
+ */
+declare const alertVariants: (props?: ({
+    type?: "success" | "error" | "warning" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AlertProps extends VariantProps<typeof alertVariants> {
+    type: FeedbackType;
+    /** Título curto, em negrito. */
+    title: ReactNode;
+    /** Texto de apoio abaixo do título. */
+    description?: ReactNode;
+    /** Ação opcional à direita (ex.: botão "Desfazer"). */
+    action?: ReactNode;
+    /** Mostra botão de fechar. */
+    onDismiss?: () => void;
+    /** Anima o ícone na entrada (check se formando, X se riscando). */
+    animated?: boolean;
+    className?: string;
+}
+export declare function Alert({ type, title, description, action, onDismiss, animated, className, }: AlertProps): import("react").JSX.Element;
+export {};

package/dist/types/components/ui/avatar.d.ts

@@ -0,0 +1,23 @@
+import { type VariantProps } from 'class-variance-authority';
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "lg" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AvatarProps extends VariantProps<typeof avatarVariants> {
+    name: string;
+    src?: string;
+    className?: string;
+}
+export declare function Avatar({ name, src, size, className }: AvatarProps): import("react").JSX.Element;
+export interface AvatarGroupProps {
+    people: {
+        name: string;
+        src?: string;
+    }[];
+    /** Máximo visível antes de "+N". */
+    max?: number;
+    size?: AvatarProps['size'];
+    className?: string;
+}
+/** Avatares sobrepostos, com contador do excedente. */
+export declare function AvatarGroup({ people, max, size, className }: AvatarGroupProps): import("react").JSX.Element;
+export {};

package/dist/types/components/ui/badge.d.ts

@@ -0,0 +1,15 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { HTMLAttributes, ReactNode } from 'react';
+declare const badgeVariants: (props?: ({
+    tone?: "success" | "error" | "warning" | "info" | "primary" | "outline" | "neutral" | null | undefined;
+    solid?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    /** Ícone antes do texto (fica fora do corte com reticências). */
+    icon?: ReactNode;
+    /** Bolinha de status à esquerda. */
+    dot?: boolean;
+}
+/** Badge único: tom semântico, suave ou sólido, com bolinha opcional. */
+export declare function Badge({ tone, solid, dot, icon, className, children, ...props }: BadgeProps): import("react").JSX.Element;
+export {};

package/dist/types/components/ui/brand-feedback-icon.d.ts

@@ -0,0 +1,26 @@
+import { type VariantProps } from 'class-variance-authority';
+import type { FeedbackType } from '../../brand/types';
+declare const iconVariants: (props?: ({
+    type?: "success" | "error" | "warning" | "info" | null | undefined;
+    size?: "sm" | "lg" | "xl" | "2xl" | "md" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const feedbackLabels: Record<FeedbackType, string>;
+export interface BrandFeedbackIconProps extends Omit<VariantProps<typeof iconVariants>, 'type'> {
+    type: FeedbackType;
+    /** Texto para leitores de tela. Sem ele o ícone é decorativo (o texto ao lado informa). */
+    label?: string;
+    /**
+     * Anima a entrada: o símbolo entra com mola e o glifo se desenha (check se formando,
+     * X se riscando). O erro treme ao final. Respeita reduzir movimento.
+     * Troque a key do componente para repetir a animação.
+     */
+    animated?: boolean;
+    className?: string;
+}
+/**
+ * Ícone de feedback da marca: o símbolo da marca em currentColor, tingido pela cor
+ * semântica, com um selo de status para que o significado não dependa só da cor.
+ * Cada tipo pode ser substituído por um SVG próprio em brand.config.ts (feedbackIcons).
+ */
+export declare function BrandFeedbackIcon({ type, size, label, animated, className, }: BrandFeedbackIconProps): import("react").JSX.Element;
+export {};

package/dist/types/components/ui/brand-logo.d.ts

@@ -0,0 +1,8 @@
+export interface BrandLogoProps {
+    on?: 'sidebar' | 'surface' | 'brand';
+    /** Só o selo com o símbolo (sidebar recolhida, favicon). */
+    symbolOnly?: boolean;
+    size?: 'sm' | 'md';
+    className?: string;
+}
+export declare function BrandLogo({ on, symbolOnly, size, className }: BrandLogoProps): import("react").JSX.Element;

package/dist/types/components/ui/breadcrumb.d.ts

@@ -0,0 +1,19 @@
+export interface BreadcrumbItem {
+    label: string;
+    to?: string;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    /**
+     * responsive: trilha no desktop e botão voltar no mobile (padrão, dentro das páginas).
+     * trail: sempre a trilha, em texto pequeno (usado no header, abaixo do título).
+     */
+    variant?: 'responsive' | 'trail';
+    className?: string;
+}
+/**
+ * Breadcrumb único. No desktop mostra a trilha completa. No mobile vira botão
+ * voltar para o nível anterior com o nome da tela atual (mesmo componente, mesma API).
+ */
+export declare function Breadcrumb({ items, variant, className }: BreadcrumbProps): import("react").JSX.Element | null;
+export {};

package/dist/types/components/ui/button-group.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+interface ButtonGroupProps {
+    /** Botões encostados, com borda compartilhada. */
+    children?: ReactNode;
+    /**
+     * Modo seleção (segmentado): passe options, value e onChange.
+     * Se as opções não couberem, o grupo quebra linha em vez de rolar.
+     */
+    options?: {
+        value: string;
+        label: ReactNode;
+        icon?: ReactNode;
+        disabled?: boolean;
+    }[];
+    value?: string;
+    onChange?: (value: string) => void;
+    size?: 'sm' | 'md';
+    fullWidth?: boolean;
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * ButtonGroup único: agrupa botões de ação (children) ou funciona como controle
+ * segmentado de escolha única (options + value).
+ */
+export declare function ButtonGroup({ children, options, value, onChange, size, fullWidth, className, ...aria }: ButtonGroupProps): import("react").JSX.Element;
+export {};

package/dist/types/components/ui/button.d.ts

@@ -0,0 +1,30 @@
+import { type VariantProps } from 'class-variance-authority';
+import { type ButtonHTMLAttributes, type ReactNode } from 'react';
+/**
+ * Botão único do sistema. Variantes, tamanho, ícone, só ícone, carregamento e
+ * largura total são props: nunca crie outro arquivo de botão.
+ * Altura vem de h-control-*: 44px ou mais no mobile, compacta a partir de md.
+ */
+export declare const buttonVariants: (props?: ({
+    variant?: "link" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "lg" | "md" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type Variants = VariantProps<typeof buttonVariants>;
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Omit<Variants, 'iconOnly' | 'fullWidth'> {
+    /** Ícone à esquerda do texto (ou o próprio conteúdo, com iconOnly). */
+    icon?: ReactNode;
+    /** Ícone à direita do texto. */
+    iconRight?: ReactNode;
+    /** Botão só com ícone: quadrado, e aria-label passa a ser obrigatório. */
+    iconOnly?: boolean;
+    /** Mostra indicador, bloqueia cliques e marca aria-busy. */
+    loading?: boolean;
+    /** Ocupa toda a largura do contêiner. */
+    fullWidth?: boolean;
+    /** Renderiza o filho (ex.: <Link>) com a aparência de botão. */
+    asChild?: boolean;
+}
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/types/components/ui/calendar.d.ts

@@ -0,0 +1,34 @@
+export type CalendarView = 'month' | 'week' | 'day' | 'agenda';
+export type CalendarTone = 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+export interface CalendarEvent {
+    id: string;
+    title: string;
+    start: Date;
+    /** Fim. Sem valor, o evento dura 1 hora. */
+    end?: Date;
+    /** Dia inteiro: aparece no topo do dia, sem horário. */
+    allDay?: boolean;
+    tone?: CalendarTone;
+    description?: string;
+    location?: string;
+}
+export interface CalendarProps {
+    events: CalendarEvent[];
+    view?: CalendarView;
+    defaultView?: CalendarView;
+    onViewChange?: (view: CalendarView) => void;
+    /** Visões oferecidas no seletor. Padrão: todas. */
+    views?: CalendarView[];
+    /** Data em foco (mês, semana ou dia mostrado). */
+    date?: Date;
+    defaultDate?: Date;
+    onDateChange?: (date: Date) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    /** Clique em um dia ou horário vazio (ex.: abrir o cadastro de evento já com a data). */
+    onDateClick?: (date: Date) => void;
+    /** Faixa de horas da semana e do dia. Padrão: 7h às 21h. */
+    hours?: [number, number];
+    'aria-label'?: string;
+    className?: string;
+}
+export declare function Calendar({ events, view: viewProp, defaultView, onViewChange, views, date: dateProp, defaultDate, onDateChange, onEventClick, onDateClick, hours, className, ...aria }: CalendarProps): import("react").JSX.Element;

package/dist/types/components/ui/card.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Card: agrupa conteúdo de página. Borda de 1px, sem sombra pesada.
+ * Nunca aninhe Card dentro de Card: para hierarquia interna use Separator ou título de seção.
+ * Nunca coloque rolagem dentro de Card.
+ */
+export interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Uso interno: quando outro componente catalogado (Calendar, FormSection, StatCard,
+     * Table) usa o Card como o próprio elemento raiz, ele passa o seu código aqui para que
+     * o data-rendra mostre a variante certa, não CARD-001. Sem essa prop, o Card se
+     * identifica como CARD-001, o próprio código dele no catálogo.
+     */
+    'data-rendra'?: string;
+}
+export declare function Card({ className, 'data-rendra': dataRendra, ...props }: CardProps): import("react").JSX.Element;
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Ações do card, no canto do cabeçalho (ex.: Ligar, Restaurar padrão). É o lugar das ações
+     * de um card: nunca um botão solto no meio do conteúdo.
+     */
+    actions?: ReactNode;
+}
+export declare function CardHeader({ className, actions, children, ...props }: CardHeaderProps): import("react").JSX.Element;
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** Texto orientativo da seção: ícone de informação ao lado do título, que abre um modal. */
+    help?: ReactNode;
+}
+export declare function CardTitle({ className, children, help, ...props }: CardTitleProps): import("react").JSX.Element;
+export declare function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>): import("react").JSX.Element;
+export declare function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function CardFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;