@rendra-ui/web 2.1.0

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

@@ -0,0 +1,91 @@
+import { type InputHTMLAttributes, type ReactNode } from 'react';
+import { type LookupResult } from '../../hooks/use-lookup';
+import { type ControlSize } from '../../lib/control';
+import { type MaskName, type PhoneCountry } from '../../lib/masks';
+/** Uma unidade do seletor embutido do Input (A9). */
+export interface InputUnitOption {
+    /** "percent" e "currency" ligam a máscara de percentual e de moeda automaticamente. */
+    id: string;
+    label: string;
+}
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    size?: ControlSize;
+    /** Máscara brasileira. Define também o teclado do celular (inputMode). */
+    mask?: MaskName;
+    /** Ícone à esquerda. */
+    icon?: ReactNode;
+    /** Conteúdo fixo à direita (ex.: "kg", "dias"). Ignorado quando `units` está presente. */
+    suffix?: ReactNode;
+    /** Mostra botão para limpar quando há valor. */
+    clearable?: boolean;
+    /** Estado de erro (normalmente vem do Field). */
+    invalid?: boolean;
+    value?: string;
+    /** Recebe o valor como aparece no campo (com máscara). */
+    onChange?: (value: string) => void;
+    /** Recebe o valor sem máscara (só dígitos, ou número para moeda e percentual). */
+    onValueChange?: (unmasked: string, masked: string) => void;
+    /**
+     * Telefone (mask="phone"): DDI escolhido no seletor embutido à esquerda, sem o "+".
+     * Padrão "55". Com +55 a máscara é a brasileira; com outro DDI, só dígitos.
+     * O valor do campo continua sendo o número nacional; o completo sai de toE164(ddi, valor).
+     */
+    ddi?: string;
+    onDdiChange?: (ddi: string) => void;
+    /** Países do seletor de DDI. Padrão: phoneCountries (Brasil primeiro). */
+    ddiOptions?: PhoneCountry[];
+    /** Esconde o seletor de DDI do telefone (só números brasileiros). */
+    hideDdi?: boolean;
+    /**
+     * Moeda (mask="currency"): recebe o valor em centavos inteiros (R$ 1.250,50 -> 125050),
+     * ou null quando vazio. Guarde e some dinheiro sempre em centavos.
+     */
+    onCentsChange?: (cents: number | null) => void;
+    /**
+     * CEP, CNPJ e CPF ou CNPJ (mask="cep", "cnpj" ou "cpfCnpj"): busca os dados assim que o
+     * campo fica completo (ViaCEP e BrasilAPI), mostra o carregamento no campo e entrega o
+     * resultado. A tela decide o que preencher; use `result.message` como ajuda do Field.
+     */
+    onLookup?: (result: LookupResult) => void;
+    /**
+     * Unidades (A9): seletor embutido à direita, no mesmo padrão do seletor de DDI. O id
+     * "percent" liga a máscara de percentual (teto configurável por `percentMax`); "currency"
+     * liga a máscara de moeda (R$ 1.250,00). Qualquer outro id não aplica máscara, só rótulo.
+     * Trocar de unidade sempre limpa o valor do campo.
+     */
+    units?: InputUnitOption[];
+    /** Unidade escolhida (controlada). Sem ela, usa a primeira de `units`. */
+    unit?: string;
+    onUnitChange?: (unit: string) => void;
+    /** Teto do percentual quando a unidade escolhida é "percent". Padrão 100. */
+    percentMax?: number;
+    /**
+     * Variante de valor guardado (A10): mostra `maskedHint` no lugar do valor real, que nunca
+     * chega a existir no DOM. "Trocar" abre um campo vazio (`isEditing`); cancelar volta à
+     * máscara. O componente é controlado pela tela: `isEditing`, `onStartEdit`, `onCancelEdit`.
+     */
+    variant?: 'secret';
+    /** Há um valor salvo (mesmo sem mostrá-lo). */
+    hasValue?: boolean;
+    /** Texto mascarado mostrado no lugar do valor, ex.: "••••••a1b2c3". */
+    maskedHint?: string;
+    /** Campo aberto para digitar um valor novo. */
+    isEditing?: boolean;
+    onStartEdit?: () => void;
+    onCancelEdit?: () => void;
+    /** Remove o valor salvo. Sem essa prop, o botão "Remover" não aparece. */
+    onRemove?: () => void;
+    /** Remoção em andamento: desabilita e mostra o carregamento no botão "Remover". */
+    removing?: boolean;
+    className?: string;
+    /**
+     * Classe extra no próprio elemento `<input>` (className vai no quadro em volta). Uso raro:
+     * hoje só o texto riscado de um item marcado no Checklist.
+     */
+    inputClassName?: string;
+}
+/**
+ * Input único. Tipos, máscaras, ícone, limpar, senha, unidades e valor guardado são props:
+ * nunca crie InputCPF, InputTelefone, InputSenha ou InputSegredo.
+ */
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,98 @@
+import { type ReactNode } from 'react';
+import { type BadgeProps } from './badge';
+export interface KanbanColumn {
+    id: string;
+    title: string;
+    /** Cor do marcador da coluna. */
+    tone?: BadgeProps['tone'];
+    /** Limite de cards (WIP). Passando dele, o contador fica em alerta. */
+    limit?: number;
+}
+export interface KanbanCard {
+    id: string;
+    columnId: string;
+    /** Empresa ou pessoa. */
+    title: string;
+    /** Linha abaixo do título: CNPJ da empresa ou CPF da pessoa. */
+    subtitle?: string;
+    description?: string;
+    /** Pessoa de contato: nome, telefone e e-mail. */
+    contact?: {
+        name?: string;
+        phone?: string;
+        email?: string;
+    };
+    tags?: {
+        label: string;
+        tone?: BadgeProps['tone'];
+    }[];
+    /** Nome do responsável (vira avatar com iniciais). */
+    assignee?: string;
+    dueDate?: Date;
+    /** Valor ou informação curta à direita do rodapé (ex.: "R$ 12.500,00"). */
+    meta?: string;
+    /** Valores numéricos do card, pelas chaves de valueFields (ex.: { ps: 4800, mrr: 590 }). */
+    values?: Record<string, number>;
+}
+/** Valor somado no cabeçalho da coluna e mostrado no card (ex.: P&S e MRR). */
+export interface KanbanValueField {
+    key: string;
+    label: string;
+}
+/**
+ * Destino de arraste (etapa A14): uma ação para onde o card vai, diferente de "outra
+ * coluna" (ex.: "Marcar como ganho", "Arquivar"). Aparece numa barra durante o arraste e
+ * como opção do menu "Mover para" (equivalente por teclado, sempre disponível).
+ */
+export interface KanbanDropTarget {
+    id: string;
+    label: string;
+    /** Texto curto de apoio, mostrado abaixo do rótulo na barra. */
+    hint?: string;
+    icon?: ReactNode;
+    tone?: BadgeProps['tone'];
+    disabled?: boolean;
+    /** Motivo mostrado quando desabilitado; o destino recusa o solto. */
+    disabledReason?: string;
+}
+export interface KanbanProps {
+    columns: KanbanColumn[];
+    cards: KanbanCard[];
+    /** Card movido: coluna de destino e posição dentro dela (0 = topo). */
+    onCardMove?: (cardId: string, toColumnId: string, toIndex: number) => void;
+    onCardClick?: (card: KanbanCard) => void;
+    /** Botão (+) no título de cada etapa. */
+    onAddCard?: (columnId: string) => void;
+    /** Cards mostrados por vez em cada etapa; ao rolar até o fim, mostra mais. Padrão: 20. */
+    pageSize?: number;
+    /**
+     * Busca mais cards no servidor quando a etapa chega ao fim do que já foi carregado.
+     * Sem ela, a rolagem infinita só vai revelando os cards recebidos em cards.
+     */
+    onLoadMore?: (columnId: string) => void;
+    /** A etapa ainda tem cards no servidor (usado com onLoadMore). */
+    hasMore?: (columnId: string) => boolean;
+    /** Etapas visíveis por vez no desktop; as demais pela rolagem lateral. Padrão: 5. */
+    visibleColumns?: number;
+    /** Conteúdo próprio do card, no lugar do padrão. */
+    renderCard?: (card: KanbanCard) => ReactNode;
+    /**
+     * Valores do card (até 2, lado a lado com divisória) e o total de cada um na coluna.
+     * Ex.: [{ key: 'ps', label: 'P&S' }, { key: 'mrr', label: 'MRR' }].
+     */
+    valueFields?: KanbanValueField[];
+    /** Formato dos valores. Padrão: moeda (R$ 1.250,00). */
+    formatValue?: (n: number) => string;
+    /**
+     * Destinos de arraste além das colunas (ex.: "Marcar como ganho"). Com eles, mostra uma
+     * barra durante o arraste e o menu "Mover para" passa a listar estes destinos.
+     */
+    dropTargets?: KanbanDropTarget[];
+    /** Card solto num destino da barra (ou escolhido no menu "Mover para"). */
+    onDropTarget?: (cardId: string, targetId: string) => void;
+    'aria-label'?: string;
+    className?: string;
+}
+export declare function Kanban({ columns, cards, onCardMove, onCardClick, onAddCard, renderCard, valueFields, formatValue, pageSize, visibleColumns, onLoadMore, hasMore, dropTargets, onDropTarget, className, ...aria }: KanbanProps): import("react").JSX.Element;
+/** Move um card na lista (para usar no onCardMove): devolve a lista nova. */
+export declare function moveKanbanCard(cards: KanbanCard[], cardId: string, toColumnId: string, toIndex: number): KanbanCard[];

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

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react';
+export interface ListItem {
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Avatar, ícone ou imagem à esquerda. */
+    leading?: ReactNode;
+    /** Valor, badge ou ação à direita. */
+    trailing?: ReactNode;
+    /** Torna a linha navegável. */
+    to?: string;
+    onClick?: () => void;
+    /** Selo textual de status da linha, com contraste AA (nunca só cor). */
+    tone?: 'success' | 'error' | 'warning' | 'neutral';
+}
+export interface ListProps {
+    items: ListItem[];
+    /** Linhas separadas por borda (padrão) ou sem divisória. */
+    divided?: boolean;
+    empty?: ReactNode;
+    className?: string;
+    /**
+     * Reordena os itens por arraste (mouse e toque) e por teclado (setas ↑/↓ na alça).
+     * Sem ela a lista é só leitura e a alça de arraste não aparece.
+     */
+    onReorder?: (items: ListItem[]) => void;
+    /** Nome acessível de cada item para a alça de arraste (ex.: "Cliente A"). Padrão: o título, em texto. */
+    itemLabel?: (item: ListItem) => string;
+}
+/** Lista única: linhas com início, título, descrição e fim; navegável por prop; reordenável por prop. */
+export declare function List({ items, divided, empty, className, onReorder, itemLabel, }: ListProps): import("react").JSX.Element;

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

@@ -0,0 +1,27 @@
+import { type ReactNode } from 'react';
+export type ModalType = 'confirm' | 'destructive' | 'info' | 'form';
+declare const sizes: {
+    readonly sm: "md:max-w-sm";
+    readonly md: "md:max-w-lg";
+    readonly lg: "md:max-w-2xl";
+};
+export interface ModalProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    description?: ReactNode;
+    type?: ModalType;
+    size?: keyof typeof sizes;
+    /** Conteúdo do body (em form, os campos). */
+    children?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** Pode ser assíncrono: o botão mostra carregamento até terminar. */
+    onConfirm?: () => void | Promise<void>;
+    /** id do <form> quando type="form" (o botão principal vira submit dele). */
+    formId?: string;
+    /** Estado de envio controlado de fora (ex.: isSubmitting do React Hook Form). */
+    loading?: boolean;
+}
+export declare function Modal({ open, onOpenChange, title, description, type, size, children, confirmLabel, cancelLabel, onConfirm, formId, loading, }: ModalProps): import("react").JSX.Element;
+export {};

package/dist/types/components/ui/otp-input.d.ts

@@ -0,0 +1,17 @@
+export interface OtpInputProps {
+    /** Quantidade de dígitos. Padrão 6. */
+    length?: number;
+    value: string;
+    onChange: (value: string) => void;
+    /** Chamado quando todos os dígitos foram preenchidos. */
+    onComplete?: (value: string) => void;
+    invalid?: boolean;
+    disabled?: boolean;
+    id?: string;
+    'aria-describedby'?: string;
+}
+/**
+ * Código de verificação (2FA, confirmação de e-mail). Uma caixa por dígito, aceita colar
+ * o código inteiro, teclado numérico no celular e preenchimento automático por SMS.
+ */
+export declare function OtpInput({ length, value, onChange, onComplete, invalid, disabled, id, ...aria }: OtpInputProps): import("react").JSX.Element;

package/dist/types/components/ui/overlay-shell.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+interface OverlayShellProps {
+    title: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    children: ReactNode;
+    footer?: ReactNode;
+    /** Esconde o header visualmente (o título continua para leitores de tela). */
+    hideHeader?: boolean;
+    onRequestClose: () => void;
+    bodyClassName?: string;
+}
+export declare function OverlayShell({ title, description, icon, children, footer, hideHeader, onRequestClose, bodyClassName, }: OverlayShellProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+export interface PaginationProps {
+    /** Página atual, começando em 1. */
+    page: number;
+    pageSize: number;
+    total: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange?: (size: number) => void;
+    pageSizes?: number[];
+    /**
+     * Mobile: 'pages' mostra anterior e próxima com "Página 2 de 25";
+     * 'loadMore' troca por um botão "Carregar mais".
+     */
+    mobileMode?: 'pages' | 'loadMore';
+    loading?: boolean;
+    className?: string;
+}
+/** Paginação única: completa no desktop, compacta ou "carregar mais" no mobile. */
+export declare function Pagination({ page, pageSize, total, onPageChange, onPageSizeChange, pageSizes, mobileMode, loading, className, }: PaginationProps): import("react").JSX.Element;

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

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+interface PickerPanelProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** O gatilho (renderizado com asChild). */
+    trigger: ReactNode;
+    /** Título do bottom sheet no mobile (normalmente o rótulo do campo). */
+    title: string;
+    /** Topo fixo (ex.: campo de busca). */
+    header?: ReactNode;
+    children: ReactNode;
+    /** Rodapé fixo (ex.: Limpar / Aplicar). */
+    footer?: ReactNode;
+    /** Largura no desktop: do gatilho ou automática (calendário). */
+    width?: 'trigger' | 'auto';
+    /**
+     * Botão sobreposto ao gatilho (ex.: limpar). Fica como irmão do gatilho, nunca dentro
+     * dele: botão dentro de botão é HTML inválido e confunde leitores de tela.
+     */
+    adornment?: ReactNode;
+    align?: 'start' | 'center' | 'end';
+}
+export declare function PickerPanel({ open, onOpenChange, trigger, title, header, children, footer, width, adornment, align, }: PickerPanelProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+import { Popover as P } from 'radix-ui';
+import type { ComponentProps } from 'react';
+export declare const Popover: import("react").FC<P.PopoverProps>;
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<P.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<P.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<P.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
+interface PopoverContentProps extends ComponentProps<typeof P.Content> {
+    /** Largura: sm (16rem) ou md (22rem). Sempre limitada à tela menos 32px. */
+    width?: 'sm' | 'md';
+}
+export declare function PopoverContent({ className, align, sideOffset, width, ...props }: PopoverContentProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+import { type VariantProps } from 'class-variance-authority';
+declare const bar: (props?: ({
+    tone?: "success" | "error" | "warning" | "primary" | "brand" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ProgressProps extends VariantProps<typeof bar> {
+    /** 0 a 100. Sem valor: indeterminado (animado). */
+    value?: number | null;
+    size?: 'sm' | 'md';
+    /** Mostra o percentual à direita. */
+    showValue?: boolean;
+    label?: string;
+    className?: string;
+}
+/** Barra de progresso única. tone="brand" usa o degradê de detalhe do template. */
+export declare function Progress({ value, size, tone, showValue, label, className }: ProgressProps): import("react").JSX.Element;
+export {};

package/dist/types/components/ui/qr-code.d.ts

@@ -0,0 +1,13 @@
+import { type ErrorCorrectionLevel } from '../../lib/qr-encode';
+export interface QrCodeProps {
+    value: string;
+    /** Lado do quadrado, em pixels. */
+    size?: number;
+    errorCorrection?: ErrorCorrectionLevel;
+    className?: string;
+    'aria-label'?: string;
+    emptyLabel?: string;
+    errorLabel?: string;
+}
+/** Um único QR Code por tela; nunca crie um segundo componente parecido para outro tamanho. */
+export declare function QrCode({ value, size, errorCorrection, className, emptyLabel, errorLabel, ...aria }: QrCodeProps): import("react").JSX.Element;

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

@@ -0,0 +1,27 @@
+import type { ReactNode } from 'react';
+export interface RadioOption {
+    value: string;
+    label: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupProps {
+    options: RadioOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    /** list: bolinha e texto; cards: cartões selecionáveis com ícone e descrição. */
+    variant?: 'list' | 'cards';
+    /** Colunas dos cards a partir de md (no mobile sempre 1). */
+    columns?: 1 | 2 | 3;
+    orientation?: 'vertical' | 'horizontal';
+    invalid?: boolean;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+}
+/** Radio único: em lista ou em cards, por prop. */
+export declare function RadioGroup({ options, value, defaultValue, onChange, variant, columns, orientation, invalid, disabled, id, name, ...aria }: RadioGroupProps): import("react").JSX.Element;

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

@@ -0,0 +1,19 @@
+export interface RatingProps {
+    variant?: 'stars' | 'scale';
+    value: number | null;
+    onChange?: (value: number | null) => void;
+    /** stars: total de estrelas (padrão 5). scale: valor máximo (padrão 10, até 10). */
+    max?: number;
+    /** Só a escala: valor mínimo (padrão 1). */
+    min?: number;
+    /** Só a escala: rótulo da ponta de baixo. */
+    lowLabel?: string;
+    /** Só a escala: rótulo da ponta de cima. */
+    highLabel?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    id?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+}
+export declare function Rating({ variant, value, onChange, max, min, lowLabel, highLabel, disabled, invalid, id, ...aria }: RatingProps): import("react").JSX.Element;

package/dist/types/components/ui/rendra-credit.d.ts

@@ -0,0 +1,12 @@
+export declare const RENDRA_CREDIT_TEXT = "Feito com Rendra";
+export declare const RENDRA_CREDIT_HREF = "https://github.com/bsmagalhaes/rendra-design-system";
+export interface RendraCreditProps {
+    /** Padrão true; false remove o crédito. */
+    credit?: boolean;
+    /** Padrão "Feito com Rendra". */
+    text?: string;
+    /** Padrão: o repositório do Rendra Design System. */
+    href?: string;
+    className?: string;
+}
+export declare function RendraCredit({ credit, text, href, className, }: RendraCreditProps): import("react").JSX.Element | null;

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export interface RepeatableItem {
+    id: string;
+    isPrimary?: boolean;
+}
+export interface RepeatableFieldProps<T extends RepeatableItem> {
+    items: T[];
+    onChange: (items: T[]) => void;
+    /** Cria um item novo (com id próprio) quando a pessoa clica em "Adicionar". */
+    createItem: () => T;
+    /** Desenha os campos de um item; update aplica um patch parcial nesse item. */
+    renderField: (item: T, update: (patch: Partial<T>) => void, index: number) => ReactNode;
+    /** Mostra o controle de "marcar como principal" em cada item. */
+    showPrimary?: boolean;
+    maxItems?: number;
+    addLabel?: string;
+    emptyLabel?: string;
+    disabled?: boolean;
+    className?: string;
+}
+/** Uma lista repetível por finalidade: telefones, e-mails, endereços e afins usam este componente. */
+export declare function RepeatableField<T extends RepeatableItem>({ items, onChange, createItem, renderField, showPrimary, maxItems, addLabel, emptyLabel, disabled, className, }: RepeatableFieldProps<T>): import("react").JSX.Element;

package/dist/types/components/ui/rich-text-editor.d.ts

@@ -0,0 +1,21 @@
+export interface RichTextEditorProps {
+    /** Conteúdo em HTML. */
+    value?: string;
+    defaultValue?: string;
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    /**
+     * Envia a imagem e devolve a URL pública. Sem ela, a imagem entra no conteúdo em base64
+     * (bom para demonstração; em produção, envie ao servidor).
+     */
+    onImageUpload?: (file: File) => Promise<string>;
+    /** Altura mínima da área de texto. */
+    minHeight?: 'sm' | 'md' | 'lg';
+    invalid?: boolean;
+    disabled?: boolean;
+    id?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+    className?: string;
+}
+export declare function RichTextEditor({ value, defaultValue, onChange, placeholder, onImageUpload, minHeight, invalid, disabled, id, className, ...aria }: RichTextEditorProps): import("react").JSX.Element;

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

@@ -0,0 +1,65 @@
+import { type ReactNode } from 'react';
+import { type ControlSize } from '../../lib/control';
+export interface SelectOption {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Agrupa opções sob um título. */
+    group?: string;
+}
+interface BaseProps {
+    options?: SelectOption[];
+    placeholder?: string;
+    /**
+     * Nome do campo: título do painel no mobile e, quando o Select não está dentro de um
+     * Field (sem id ligado a um rótulo visível), nome acessível do gatilho.
+     */
+    label?: string;
+    size?: ControlSize;
+    invalid?: boolean;
+    disabled?: boolean;
+    /** Campo de busca no topo da lista. */
+    searchable?: boolean;
+    /** Permite criar uma opção nova a partir do texto buscado. */
+    creatable?: boolean;
+    onCreate?: (label: string) => SelectOption | Promise<SelectOption>;
+    /** Busca remota: recebe o texto e devolve as opções. Liga a busca automaticamente. */
+    loadOptions?: (query: string) => Promise<SelectOption[]>;
+    /** Mostra indicador de carregamento na lista. */
+    loading?: boolean;
+    /** Botão de limpar no campo. */
+    clearable?: boolean;
+    emptyText?: string;
+    id?: string;
+    className?: string;
+    'aria-describedby'?: string;
+}
+interface SingleProps extends BaseProps {
+    multiple?: false;
+    value?: string | null;
+    onChange?: (value: string | null) => void;
+    selectAll?: never;
+    showCount?: never;
+    maxChips?: never;
+}
+interface MultipleProps extends BaseProps {
+    /** Seleção múltipla com checkbox e chips. */
+    multiple: true;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+    /** Opção "Selecionar todos" no topo da lista. */
+    selectAll?: boolean;
+    /** Mostra "3 selecionados" no lugar dos chips. */
+    showCount?: boolean;
+    /** Máximo de chips visíveis antes de "+N". */
+    maxChips?: number;
+}
+export type SelectProps = SingleProps | MultipleProps;
+/**
+ * Select único do sistema. Busca, múltiplo, selecionar todos, contador, criar opção,
+ * busca remota e carregamento são props. No mobile abre como bottom sheet.
+ */
+export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,7 @@
+/** Separador: hierarquia dentro de um card (no lugar de card dentro de card). */
+export declare function Separator({ orientation, label, className, }: {
+    orientation?: 'horizontal' | 'vertical';
+    /** Texto no meio da linha (ex.: "ou"). */
+    label?: string;
+    className?: string;
+}): import("react").JSX.Element;

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

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+/** Bloco de carregamento. Monte o skeleton com a mesma estrutura do conteúdo final. */
+export declare function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;

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

@@ -0,0 +1,18 @@
+export interface SliderProps {
+    /** Um número, ou dois para faixa (mínimo e máximo). */
+    value?: number[];
+    defaultValue?: number[];
+    onChange?: (value: number[]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    /** Mostra o valor atual acima da trilha. */
+    showValue?: boolean;
+    formatValue?: (n: number) => string;
+    id?: string;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+}
+/** Slider único: valor simples ou faixa. Alça com área de toque de 44px. */
+export declare function Slider({ value, defaultValue, onChange, min, max, step, disabled, showValue, formatValue, id, ...aria }: SliderProps): import("react").JSX.Element;

package/dist/types/components/ui/sortable-handle.d.ts

@@ -0,0 +1,16 @@
+import type { UseSortableResult } from '../../lib/sortable';
+export interface SortableHandleProps {
+    id: string;
+    /** Nome acessível da alça (ex.: "Reordenar Cliente A"). */
+    label: string;
+    /** O resultado de useSortable (motor de src/lib/sortable.ts). */
+    sortable: Pick<UseSortableResult, 'handleProps'>;
+    className?: string;
+}
+/**
+ * Alça de arraste única, reaproveitada pela List e pelo Upload (o Kanban tem alça própria,
+ * por ser posicionada dentro do card e não ter movimento por seta): pointer down inicia o
+ * arraste (mouse e toque) e as setas ↑/↓ movem uma posição pelo teclado, tudo vindo do
+ * motor (useSortable), sem duplicar aqui a lógica de mover.
+ */
+export declare function SortableHandle({ id, label, sortable, className }: SortableHandleProps): import("react").JSX.Element;

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

@@ -0,0 +1,7 @@
+export interface SpinnerProps {
+    size?: 'sm' | 'md' | 'lg';
+    /** Nome do que está carregando. Vazio (padrão): decorativo, sem anúncio de leitor de tela. */
+    label?: string;
+    className?: string;
+}
+export declare function Spinner({ size, label, className }: SpinnerProps): import("react").JSX.Element;

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

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+export interface StatCardProps {
+    label: string;
+    value: ReactNode;
+    /** Variação em %, positiva ou negativa. */
+    change?: number;
+    /** Texto ao lado da variação (ex.: "vs. mês anterior"). */
+    changeLabel?: string;
+    /** Quando cair é bom (ex.: custo), inverte as cores da variação. */
+    inverse?: boolean;
+    icon?: ReactNode;
+    /** Destaque com o degradê suave do template. Use em no máximo um card por tela. */
+    highlight?: boolean;
+    loading?: boolean;
+    /** Conteúdo extra no rodapé (ex.: mini gráfico). */
+    footer?: ReactNode;
+    className?: string;
+}
+/** Card de indicador. Em grid: 1 coluna no mobile, 2 para cards pequenos. */
+export declare function StatCard({ label, value, change, changeLabel, inverse, icon, highlight, loading, footer, className, }: StatCardProps): import("react").JSX.Element;

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

@@ -0,0 +1,15 @@
+import { type ReactNode } from 'react';
+export interface SwitchProps {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    label?: ReactNode;
+    description?: ReactNode;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    className?: string;
+    'aria-label'?: string;
+}
+/** Switch único, com rótulo e descrição à esquerda e a chave à direita. */
+export declare function Switch({ checked, defaultChecked, onCheckedChange, label, description, disabled, id, name, className, ...aria }: SwitchProps): import("react").JSX.Element;