@rendra-ui/web 2.1.0

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

@@ -0,0 +1,57 @@
+export interface ChartSeries {
+    /** Chave no objeto de dados. */
+    key: string;
+    label: string;
+    /** Índice da cor do template (1 a 5). Padrão: na ordem das séries. */
+    color?: 1 | 2 | 3 | 4 | 5;
+    /** No type="combo": desenha a série como barra (padrão) ou linha. */
+    kind?: 'bar' | 'line';
+}
+interface BaseProps {
+    valueFormatter?: (n: number) => string;
+    /** Altura: sm (12rem), md (16rem) ou fill (a altura do contêiner, como num widget). */
+    height?: 'sm' | 'md' | 'fill';
+    'aria-label': string;
+    className?: string;
+}
+export interface CartesianChartProps extends BaseProps {
+    type: 'line' | 'bar' | 'area' | 'pie' | 'combo';
+    data: Record<string, string | number>[];
+    /** Chave da categoria (eixo X ou fatias da pizza). */
+    xKey: string;
+    series: ChartSeries[];
+    /** Barras empilhadas (bar e combo). */
+    stacked?: boolean;
+    /** Barra de uma série só com uma cor por categoria. */
+    colorByCategory?: boolean;
+    /** Acima deste número de pontos, o mobile oferece ver como lista. */
+    listThreshold?: number;
+}
+export interface GaugeZone {
+    /** Fim da faixa, de 0 a 1 do máximo. */
+    to: number;
+    tone: 'error' | 'warning' | 'success' | 'primary' | 'neutral';
+}
+export interface GaugeChartProps extends BaseProps {
+    type: 'gauge';
+    value: number;
+    max: number;
+    min?: number;
+    /** Meta: marcada no arco e usada no percentual atingido. */
+    target?: number;
+    /** Faixas de cor do arco. Padrão: vermelho até 60%, amarelo até 90%, verde até o fim. */
+    zones?: GaugeZone[];
+    /** Texto abaixo do valor (ex.: "Receita do mês"). */
+    label?: string;
+}
+export interface FunnelStage {
+    label: string;
+    value: number;
+}
+export interface FunnelChartProps extends BaseProps {
+    type: 'funnel';
+    stages: FunnelStage[];
+}
+export type ChartProps = CartesianChartProps | GaugeChartProps | FunnelChartProps;
+export declare function Chart(props: ChartProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,137 @@
+import { type LucideIcon } from 'lucide-react';
+import { type ReactNode } from 'react';
+import { type BadgeProps } from './badge';
+export type ChatChannel = 'whatsapp' | 'whatsapp-web' | 'instagram' | 'facebook' | 'tiktok' | 'google' | 'reclameaqui' | 'site' | 'email' | 'sms';
+export declare const chatChannels: Record<ChatChannel, {
+    label: string;
+    icon: LucideIcon;
+    /** Logotipo do canal (imagem redonda); sem ele, vale o ícone. */
+    logo?: string;
+    tone: NonNullable<BadgeProps['tone']>;
+}>;
+export declare function ChannelBadge({ channel }: {
+    channel: ChatChannel;
+}): import("react").JSX.Element;
+export interface ChatAttachment {
+    name: string;
+    /** Endereço do arquivo (ou blob: local, para prévia antes de enviar). */
+    url?: string;
+    type?: string;
+    size?: number;
+    /** Duração em segundos (áudio e vídeo). */
+    duration?: number;
+}
+export interface ChatMessage {
+    id: string;
+    /** Foto de quem enviou (cliente ou atendente). */
+    avatar?: string;
+    /** Quem enviou: o cliente, o atendente, o robô (URA/IA) ou um aviso do sistema. */
+    from: 'contact' | 'agent' | 'bot' | 'system';
+    text?: string;
+    time: Date;
+    /** Nome de quem enviou (atendente ou robô). */
+    author?: string;
+    /** Resposta a outra mensagem: mostra a citação acima do texto. */
+    /** Mensagem citada. Com o id, clicar na citação leva até a original. */
+    replyTo?: {
+        id?: string;
+        author?: string;
+        text?: string;
+    };
+    /** Reações com emoji. */
+    reactions?: string[];
+    /** Excluída: continua no chat, riscada e em vermelho claro. */
+    deleted?: boolean;
+    /** Texto antes da edição: a mensagem mostra o novo e o original. */
+    editedFrom?: string;
+    /** Situação da mensagem enviada: enviada, entregue, lida. */
+    status?: 'sent' | 'delivered' | 'read';
+    attachments?: ChatAttachment[];
+}
+export interface Conversation {
+    id: string;
+    name: string;
+    /** Foto do contato. */
+    avatar?: string;
+    channel: ChatChannel;
+    /** Conta ou número do canal que recebeu (ex.: "Comercial"). */
+    account?: string;
+    /** Departamento ou fila (ex.: "Suporte"). */
+    department?: string;
+    lastMessage: string;
+    time: Date;
+    unread?: number;
+    /** Esperando desde (fila): mostra o tempo de espera. */
+    waitingSince?: Date;
+    assignee?: string;
+}
+export interface ConversationListProps {
+    items: Conversation[];
+    activeId?: string | null;
+    onSelect: (id: string) => void;
+    /** Texto quando não há conversas (ex.: com os filtros aplicados). */
+    empty?: string;
+    className?: string;
+}
+export declare function ConversationList({ items, activeId, onSelect, empty, className, }: ConversationListProps): import("react").JSX.Element;
+export interface ChatThreadProps {
+    messages: ChatMessage[];
+    /** Responder (citar) uma mensagem: a tela mostra a citação no campo de mensagem. */
+    onReply?: (message: ChatMessage) => void;
+    /** Reagir com emoji (clicar de novo na mesma reação a remove). */
+    onReact?: (message: ChatMessage, emoji: string) => void;
+    /** Editar uma mensagem do atendente. */
+    onEdit?: (message: ChatMessage) => void;
+    /** Excluir uma mensagem do atendente (continua no chat, riscada). */
+    onDelete?: (message: ChatMessage) => void;
+    className?: string;
+}
+export declare function ChatThread({ messages, onReply, onReact, onEdit, onDelete, className, }: ChatThreadProps): import("react").JSX.Element;
+export interface QuickReply {
+    id: string;
+    /** Nome curto na lista (ex.: "Saudação"). */
+    title: string;
+    text: string;
+}
+export interface ChatComposerProps {
+    /** files inclui o áudio gravado (tipo audio/*), com a duração em segundos. */
+    onSend: (message: {
+        text: string;
+        files: File[];
+        audioSeconds?: number;
+    }) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Motivo de estar desativado, mostrado no lugar do campo (ex.: "Assuma a conversa"). */
+    disabledHint?: string;
+    /** Ação mostrada junto do motivo (ex.: botão "Assumir atendimento"). */
+    disabledAction?: ReactNode;
+    /** Tipos aceitos no botão de arquivo. Padrão: qualquer arquivo. */
+    accept?: string;
+    /**
+     * Mensagens rápidas cadastradas. Com elas, o raio ao lado do microfone abre a lista (com
+     * busca); a escolhida vai para o campo, para revisar antes de enviar.
+     */
+    quickReplies?: QuickReply[];
+    /** Mensagem sendo respondida: aparece citada acima do campo. */
+    quote?: {
+        author?: string;
+        text?: string;
+    } | null;
+    onCancelQuote?: () => void;
+    /** Mensagem sendo editada: o campo vem com o texto dela. */
+    editing?: {
+        id: string;
+        text?: string;
+    } | null;
+    onCancelEdit?: () => void;
+    className?: string;
+}
+/**
+ * Campo de mensagem. Esquerda: arquivo, imagem ou vídeo e emoji. Centro: textarea de 2
+ * linhas que cresce com o texto (Enter envia, Shift+Enter quebra a linha); aceita arrastar e
+ * soltar e colar arquivos, prints e imagens. Direita: mensagens rápidas (quando cadastradas),
+ * gravar áudio (a gravação é simulada no demo: contador, ondas e ponto pulsando; cancelar ou
+ * enviar) e enviar.
+ */
+export declare function ChatComposer({ onSend, placeholder, disabled, disabledHint, disabledAction, accept, quickReplies, quote, onCancelQuote, editing, onCancelEdit, className, }: ChatComposerProps): import("react").JSX.Element;

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

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+export interface CheckboxProps {
+    checked?: boolean | 'indeterminate';
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    label?: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+    invalid?: boolean;
+    id?: string;
+    name?: string;
+    className?: string;
+    'aria-label'?: string;
+}
+/**
+ * Checkbox único, com estado indeterminado (checked="indeterminate").
+ * Com label, a linha inteira é área de toque de 44px no mobile.
+ */
+export declare function Checkbox({ checked, defaultChecked, onCheckedChange, label, description, disabled, invalid, id, name, className, ...aria }: CheckboxProps): import("react").JSX.Element;
+export interface CheckboxGroupProps {
+    options: {
+        value: string;
+        label: ReactNode;
+        description?: ReactNode;
+        disabled?: boolean;
+    }[];
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    /** Checkbox "Selecionar todos" com estado indeterminado. */
+    selectAll?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    invalid?: boolean;
+    id?: string;
+    'aria-describedby'?: string;
+    label?: string;
+}
+export declare function CheckboxGroup({ options, value, onChange, selectAll, orientation, invalid, id, label, ...aria }: CheckboxGroupProps): import("react").JSX.Element;

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

@@ -0,0 +1,16 @@
+export interface ChecklistItem {
+    id: string;
+    label: string;
+    checked: boolean;
+}
+export interface ChecklistProps {
+    value: ChecklistItem[];
+    onChange: (value: ChecklistItem[]) => void;
+    addLabel?: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+    'aria-label'?: string;
+}
+/** Uma lista de verificação por finalidade: itens de um checklist usam este componente. */
+export declare function Checklist({ value, onChange, addLabel, disabled, id, className, ...aria }: ChecklistProps): import("react").JSX.Element;

package/dist/types/components/ui/color-picker.d.ts

@@ -0,0 +1,13 @@
+export interface ColorPickerProps {
+    /** Cor atual, #rrggbb. */
+    value?: string;
+    /** Só chama com hexadecimal válido, sempre em minúsculas. */
+    onChange?: (hex: string) => void;
+    /** Amostras fixas oferecidas antes da cor livre. */
+    swatches?: string[];
+    disabled?: boolean;
+    /** Nome acessível do grupo de amostras e do campo. */
+    'aria-label'?: string;
+    className?: string;
+}
+export declare const ColorPicker: import("react").ForwardRefExoticComponent<ColorPickerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/ui/data-toolbar.d.ts

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+export interface FilterChip {
+    id: string;
+    label: string;
+    onRemove: () => void;
+}
+export interface ToolbarColumn {
+    id: string;
+    label: string;
+    visible: boolean;
+    onToggle: (visible: boolean) => void;
+}
+export interface DataToolbarProps {
+    search?: {
+        value: string;
+        onChange: (v: string) => void;
+        placeholder?: string;
+    };
+    /** Conteúdo dos filtros: popover no desktop, drawer em tela cheia no mobile. */
+    filters?: ReactNode;
+    /** Quantos filtros estão aplicados (contador no botão). */
+    filterCount?: number;
+    onClearFilters?: () => void;
+    /** Chips dos filtros aplicados. */
+    chips?: FilterChip[];
+    /** Ordenação (vai para o drawer no mobile). */
+    sort?: ReactNode;
+    /** Colunas que o usuário pode mostrar ou ocultar. */
+    columns?: ToolbarColumn[];
+    /** Ações secundárias à direita (exportar etc.). No mobile, numa linha abaixo. */
+    actions?: ReactNode;
+    /** Ação principal da listagem (ex.: Novo cliente). Sempre a última à direita. */
+    primaryAction?: ReactNode;
+    /** Substitui a barra quando há itens selecionados (ações em massa, só desktop). */
+    selectionBar?: ReactNode;
+}
+export declare function DataToolbar({ search, filters, filterCount, onClearFilters, chips, sort, columns, actions, primaryAction, selectionBar, }: DataToolbarProps): import("react").JSX.Element;

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

@@ -0,0 +1,41 @@
+import { type DateRange } from 'react-day-picker';
+import { type ControlSize } from '../../lib/control';
+export type { DateRange };
+interface BaseProps {
+    placeholder?: string;
+    /** Título do painel no mobile. */
+    label?: string;
+    size?: ControlSize;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Com horário (campo HH:MM no painel). */
+    time?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    /**
+     * Seletores de mês e ano no topo do calendário (padrão: ligado), para chegar rápido
+     * a datas distantes, como data de nascimento, sem voltar mês a mês.
+     */
+    dropdowns?: boolean;
+    clearable?: boolean;
+    id?: string;
+    className?: string;
+    'aria-describedby'?: string;
+}
+interface SingleProps extends BaseProps {
+    range?: false;
+    value?: Date | null;
+    onChange?: (value: Date | null) => void;
+}
+interface RangeProps extends BaseProps {
+    /** Seleção de período (início e fim). */
+    range: true;
+    value?: DateRange | null;
+    onChange?: (value: DateRange | null) => void;
+}
+export type DatePickerProps = SingleProps | RangeProps;
+/**
+ * DatePicker único em pt-BR: data, período (range) e horário (time) são props.
+ * Desktop: calendário em popover (dois meses no período). Mobile: bottom sheet.
+ */
+export declare const DatePicker: import("react").ForwardRefExoticComponent<DatePickerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/types/components/ui/document-viewer.d.ts

@@ -0,0 +1,19 @@
+export interface DocumentViewerProps {
+    /** Endereço do PDF. null é o estado vazio legítimo (nenhum documento escolhido ainda). */
+    url: string | null;
+    /** Nome acessível do documento (aria-label do visualizador). */
+    title: string;
+    className?: string;
+    emptyTitle?: string;
+    emptyDescription?: string;
+    loadingLabel?: string;
+    errorTitle?: string;
+    errorDescription?: string;
+    openInNewTabLabel?: string;
+    zoomInLabel?: string;
+    zoomOutLabel?: string;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
+}
+/** Um visualizador de documento por tela; nunca crie um segundo para PDF. */
+export declare function DocumentViewer({ url, title, className, emptyTitle, emptyDescription, loadingLabel, errorTitle, errorDescription, openInNewTabLabel, zoomInLabel, zoomOutLabel, previousPageLabel, nextPageLabel, }: DocumentViewerProps): import("react").JSX.Element;

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

@@ -0,0 +1,30 @@
+import { type ReactNode } from 'react';
+declare const sizes: {
+    readonly '30': "md:w-sheet-30";
+    readonly '40': "md:w-sheet-40";
+    readonly '50': "md:w-sheet-50";
+    readonly '75': "md:w-sheet-75";
+    readonly full: "md:w-full";
+    readonly sm: "md:w-sheet-30";
+    readonly md: "md:w-sheet-30";
+    readonly lg: "md:w-sheet-50";
+    readonly xl: "md:w-sheet-75";
+};
+export interface DrawerProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    size?: keyof typeof sizes;
+    children: ReactNode;
+    /** Rodapé fixo. Normalmente um <ActionBar>. */
+    footer?: ReactNode;
+    /** Há alterações não salvas: fechar pede confirmação. */
+    dirty?: boolean;
+    /** Textos da confirmação de descarte. */
+    discardTitle?: string;
+    discardDescription?: string;
+}
+export declare function Drawer({ open, onOpenChange, title, description, icon, size, children, footer, dirty, discardTitle, discardDescription, }: DrawerProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,20 @@
+import { DropdownMenu as D } from 'radix-ui';
+import type { ComponentProps } from 'react';
+export declare const DropdownMenu: import("react").FC<D.DropdownMenuProps>;
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<D.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<D.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSub: import("react").FC<D.DropdownMenuSubProps>;
+export declare const DropdownMenuRadioGroup: import("react").ForwardRefExoticComponent<D.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function DropdownMenuContent({ className, sideOffset, ...props }: ComponentProps<typeof D.Content>): import("react").JSX.Element;
+interface ItemProps extends ComponentProps<typeof D.Item> {
+    /** Item destrutivo (excluir, sair): texto na cor destrutiva. */
+    destructive?: boolean;
+}
+export declare function DropdownMenuItem({ className, destructive, ...props }: ItemProps): import("react").JSX.Element;
+export declare function DropdownMenuCheckboxItem({ className, children, ...props }: ComponentProps<typeof D.CheckboxItem>): import("react").JSX.Element;
+export declare function DropdownMenuRadioItem({ className, children, ...props }: ComponentProps<typeof D.RadioItem>): import("react").JSX.Element;
+export declare function DropdownMenuLabel({ className, ...props }: ComponentProps<typeof D.Label>): import("react").JSX.Element;
+export declare function DropdownMenuSeparator({ className, ...props }: ComponentProps<typeof D.Separator>): import("react").JSX.Element;
+export declare function DropdownMenuSubTrigger({ className, children, ...props }: ComponentProps<typeof D.SubTrigger>): import("react").JSX.Element;
+export declare function DropdownMenuSubContent({ className, ...props }: ComponentProps<typeof D.SubContent>): import("react").JSX.Element;
+export {};

package/dist/types/components/ui/empty-state.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { FeedbackType } from '../../brand/types';
+export interface EmptyStateProps {
+    title: string;
+    description?: ReactNode;
+    /** Tipo do ícone de feedback da marca. info para "sem dados", error para falha. */
+    type?: FeedbackType;
+    /** Ações: no máximo uma principal e uma secundária. */
+    actions?: ReactNode;
+    /** compact: dentro de tabela ou card pequeno. */
+    size?: 'default' | 'compact';
+    className?: string;
+}
+/** Estado vazio (e de erro) com o ícone de feedback da marca. */
+export declare function EmptyState({ title, description, type, actions, size, className, }: EmptyStateProps): import("react").JSX.Element;

package/dist/types/components/ui/error-page.d.ts

@@ -0,0 +1,13 @@
+export interface ErrorPageProps {
+    code: 404 | 500;
+    /** Título próprio no lugar do padrão. */
+    title?: string;
+    description?: string;
+    /** Ocupa a tela inteira (fora do AppShell). */
+    fullScreen?: boolean;
+}
+/**
+ * Tela de erro única (404 e 500), com o ícone de feedback da marca animado.
+ * Ações seguem a regra 30/70: secundária à esquerda, principal à direita.
+ */
+export declare function ErrorPage({ code, title, description, fullScreen }: ErrorPageProps): import("react").JSX.Element;

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

@@ -0,0 +1,42 @@
+import { Label as L } from 'radix-ui';
+import { type ComponentProps, type ReactNode } from 'react';
+import { type FieldSpan } from '../layout/tokens';
+export declare function Label({ className, required, children, ...props }: ComponentProps<typeof L.Root> & {
+    required?: boolean;
+}): import("react").JSX.Element;
+interface FieldContextValue {
+    id: string;
+    describedBy: string;
+    invalid: boolean;
+}
+/** Liga um controle ao Field mais próximo (id, aria-describedby, aria-invalid). */
+export declare function useFieldControl(): FieldContextValue | null;
+export interface FieldProps {
+    label?: ReactNode;
+    required?: boolean;
+    /** Texto de ajuda sempre visível (substitui tooltip no mobile). */
+    help?: ReactNode;
+    /** Mensagem de erro, abaixo do controle, no lugar da ajuda. */
+    error?: ReactNode;
+    /**
+     * Largura na grade de formulário (Grid form ou FormSection): xs (17%), sm (25%),
+     * md (33%, padrão: 3 por linha), lg (50%), xl (67%), full. half é o antigo e vale md.
+     */
+    span?: FieldSpan | 'half';
+    /** Começa uma linha nova (ex.: os campos que vêm depois do CEP ou do CNPJ). */
+    newRow?: boolean;
+    /**
+     * Reserva a linha da mensagem mesmo vazia, para o erro não empurrar o que vem abaixo
+     * (útil em formulários em grid de 2 colunas com validação ao digitar). Padrão: não
+     * reserva, e os campos ficam mais próximos.
+     */
+    reserveMessage?: boolean;
+    /** Obsoleto: sem reserva já é o padrão. Mantido para não quebrar telas existentes. */
+    compact?: boolean;
+    /** id do controle; gerado automaticamente se omitido. */
+    id?: string;
+    className?: string;
+    children: ReactNode;
+}
+export declare function Field({ label, required, help, error, span, newRow, reserveMessage, id, className, children, }: FieldProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+import { type FieldPath, type FieldValues, type SubmitHandler, type UseFormReturn } from 'react-hook-form';
+import { type FieldProps } from './field';
+interface FormProps<T extends FieldValues> {
+    form: UseFormReturn<T>;
+    onSubmit: SubmitHandler<T>;
+    children: ReactNode;
+    id?: string;
+    className?: string;
+}
+export declare function Form<T extends FieldValues>({ form, onSubmit, children, id, className, }: FormProps<T>): import("react").JSX.Element;
+/** Props que o render recebe: prontas para espalhar em Input, Select, DatePicker etc. */
+export interface FormControlProps<V = unknown> {
+    name: string;
+    value: V;
+    onChange: (value: V) => void;
+    onBlur: () => void;
+    invalid: boolean;
+    ref: (el: unknown) => void;
+}
+interface FormFieldProps<T extends FieldValues> extends Omit<FieldProps, 'children' | 'error'> {
+    name: FieldPath<T>;
+    render: (field: FormControlProps<any>) => ReactNode;
+}
+export declare function FormField<T extends FieldValues>({ name, render, ...fieldProps }: FormFieldProps<T>): import("react").JSX.Element;
+interface FormSectionProps {
+    title: ReactNode;
+    /** Subtítulo curto da seção. Instrução de uso vai em `help`. */
+    description?: ReactNode;
+    /** Texto orientativo: ícone de informação ao lado do título, que abre um modal. */
+    help?: ReactNode;
+    /**
+     * 1: todos os campos em largura total (texto longo, cartões de seleção, anexos).
+     * Sem valor: grade de formulário, com a largura de cada campo no span do Field.
+     */
+    columns?: 1 | 2;
+    children: ReactNode;
+    id?: string;
+}
+/** Seção de formulário: card com título e a grade de formulário (3 campos por linha no largo). */
+export declare function FormSection({ title, description, help, columns, children, id }: FormSectionProps): import("react").JSX.Element;
+export {};

package/dist/types/components/ui/image-cropper.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Recorte de imagem (etapa A2 do plano da v2): entra um File, sai um File novo, na
+ * resolução original (ou até maxOutputWidth). A geometria é uma função pura, testada por
+ * proporção, para o arraste e o zoom nunca descolarem a imagem da moldura.
+ */
+export interface ImageCropperAspect {
+    id: string;
+    label: string;
+    /** Largura dividida pela altura (1 = quadrado, 16/9 = paisagem). */
+    ratio: number;
+}
+export interface ImageCropperProps {
+    file: File;
+    aspects: ImageCropperAspect[];
+    /** Teto de largura da saída, em pixels. Sem ele, sai na resolução original do recorte. */
+    maxOutputWidth?: number;
+    /** Chamado só quando o recorte deu certo, com o File novo. */
+    onConfirm: (file: File) => void;
+    onCancel: () => void;
+    className?: string;
+}
+export interface CropGeometryInput {
+    imageWidth: number;
+    imageHeight: number;
+    frameWidth: number;
+    frameHeight: number;
+    /** 1 = ajuste mínimo para cobrir a moldura; maior aproxima (zoom). */
+    zoom: number;
+    /** Deslocamento desejado do centro da imagem, em pixels de tela. */
+    offsetX: number;
+    offsetY: number;
+}
+export interface CropGeometryResult {
+    /** Pixels de tela por pixel da imagem original. */
+    scale: number;
+    /** Deslocamento realmente aplicado: nunca deixa a imagem descolar da moldura. */
+    offsetX: number;
+    offsetY: number;
+    /** Retângulo de origem, em pixels da imagem original, que cai dentro da moldura. */
+    source: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+/**
+ * Geometria pura do recorte: a imagem sempre cobre a moldura (escala mínima = "cover"
+ * vezes o zoom) e o arraste é limitado à sobra, para nunca abrir vão entre a imagem e a
+ * moldura. Devolve também o retângulo de origem na resolução original da imagem, pronto
+ * para desenhar num canvas do tamanho da moldura (ou maior, mantendo a proporção).
+ */
+export declare function computeCropGeometry({ imageWidth, imageHeight, frameWidth, frameHeight, zoom, offsetX, offsetY, }: CropGeometryInput): CropGeometryResult;
+/** Recorte único: entra um File, sai um File novo na resolução original (ou maxOutputWidth). */
+export declare function ImageCropper({ file, aspects, maxOutputWidth, onConfirm, onCancel, className, }: ImageCropperProps): import("react").JSX.Element;

package/dist/types/components/ui/image-viewer.d.ts

@@ -0,0 +1,14 @@
+export interface ViewerImage {
+    src: string;
+    /** Texto alternativo: o que a imagem mostra. */
+    alt: string;
+    /** Legenda visível. Padrão: o alt. */
+    caption?: string;
+}
+export interface ImageViewerProps {
+    images: ViewerImage[];
+    /** Imagem aberta; null fecha o visualizador. */
+    index: number | null;
+    onIndexChange: (index: number | null) => void;
+}
+export declare function ImageViewer({ images, index, onIndexChange }: ImageViewerProps): import("react").JSX.Element;

package/dist/types/components/ui/info-hint.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+export interface InfoHintProps {
+    /** Título do modal (em geral, o título da tela ou da seção). */
+    title: string;
+    /** O texto orientativo. Pode ter parágrafos e listas. */
+    children: ReactNode;
+    className?: string;
+}
+export declare function InfoHint({ title, children, className }: InfoHintProps): import("react").JSX.Element;