forlogic-core 3.0.10 → 4.0.0

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

@@ -16,25 +16,70 @@
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 /**
- * Componente `Accordion` da lib.
+ * Props configuráveis do `Accordion` (contrato público do pacote).
+ *
+ * - `type`: `"single"` (padrão) ou `"multiple"`.
+ * - `multiple`: atalho booleano equivalente a `type="multiple"`.
+ * - `collapsible`: no modo single, permite fechar o item aberto (padrão `true`).
+ * - `disabled`: desativa todo o accordion (herdado pelos itens).
+ * - Demais props do Radix (`value`, `defaultValue`, `onValueChange`, `dir`, ...) são repassadas.
+ */
+export type AccordionDensity = "compact" | "comfortable";
+export type AccordionProps = Omit<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root>, "type" | "value" | "defaultValue" | "onValueChange"> & {
+    type?: "single" | "multiple";
+    multiple?: boolean;
+    collapsible?: boolean;
+    disabled?: boolean;
+    /** Densidade visual: `comfortable` (padrão) ou `compact`. */
+    density?: AccordionDensity;
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: never) => void;
+};
+/**
+ * Componente `Accordion` da lib — raiz configurável.
  * @example
- * <Accordion />
+ * <Accordion multiple defaultValue={["a", "b"]}>...</Accordion>
+ * @example
+ * <Accordion density="compact" collapsible={false}>...</Accordion>
  */
-declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
+declare const Accordion: React.ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<AccordionPrimitive.AccordionMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">, "value" | "type" | "defaultValue" | "onValueChange"> & {
+    type?: "single" | "multiple";
+    multiple?: boolean;
+    collapsible?: boolean;
+    disabled?: boolean;
+    /** Densidade visual: `comfortable` (padrão) ou `compact`. */
+    density?: AccordionDensity;
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: never) => void;
+} & React.RefAttributes<HTMLDivElement>>;
 /**
  * Componente `AccordionItem` da lib.
  * @example
  * <AccordionItem />
  */
 declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Props do `AccordionTrigger`.
+ * - `loading`: exibe spinner no lugar do caret, marca `aria-busy` e bloqueia o toggle.
+ * - `disabled`: estado desativado com contraste dedicado (tokens `control-*`).
+ */
+export type AccordionTriggerProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> & {
+    loading?: boolean;
+};
 /**
  * Componente `AccordionTrigger` da lib.
+ * Tipografia canônica do DS: Roobert Pro, 13px (`text-sm`), peso 500, `tracking-[-0.005em]`.
  * @example
- * <AccordionTrigger />
+ * <AccordionTrigger loading>Carregando…</AccordionTrigger>
  */
-declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    loading?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
 /**
  * Componente `AccordionContent` da lib.
+ * Tipografia de corpo: 13px, peso 400, `leading-relaxed`, cor `muted-foreground`.
  * @example
  * <AccordionContent />
  */

package/dist/components/ui/action-button.d.ts

@@ -35,7 +35,7 @@ interface ActionButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonEl
  * </ActionButton>
  *
  * // Variante secundária
- * <ActionButton variant="action-secondary">
+ * <ActionButton variant="secondary">
  *   <LayoutGrid size={12} />
  * </ActionButton>
  * ```

package/dist/components/ui/alert-dialog.d.ts

@@ -27,6 +27,7 @@
  */
 import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { type OverlayTitleProps } from "./overlay-title";
 /**
  * Raiz do AlertDialog. Controla estado open/onOpenChange.
  * @example
@@ -67,20 +68,25 @@ declare const AlertDialogHeader: {
     displayName: string;
 };
 /**
- * Rodapé do AlertDialog. Alinha botões de ação à direita em desktop.
+ * Rodapé do AlertDialog. Faixa translúcida com separador, alinhado à direita.
+ * Ações principais ficam agrupadas na extremidade direita com gap-2.
+ * Uma ação segregada (ex.: Voltar/Excluir) pode ser declarada via `segregatedAction`
+ * ou detectada automaticamente quando há 3 ou mais botões (primeiro filho).
  * @example
  * <AlertDialogFooter><AlertDialogCancel>Cancelar</AlertDialogCancel><AlertDialogAction>OK</AlertDialogAction></AlertDialogFooter>
  */
 declare const AlertDialogFooter: {
-    ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    ({ className, children, segregatedAction, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+        segregatedAction?: React.ReactNode;
+    }): React.JSX.Element;
     displayName: string;
 };
 /**
- * Título do AlertDialog (text-lg, font-semibold).
+ * Título do AlertDialog, com ícone **duotone** (Phosphor) na mesma linha (default: `Warning`).
  * @example
- * <AlertDialogTitle>Confirmar exclusão</AlertDialogTitle>
+ * <AlertDialogTitle icon={Trash}>Confirmar exclusão</AlertDialogTitle>
  */
-declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & OverlayTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 /**
  * Descrição/contexto da ação (text-sm, muted).
  * @example

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const alertVariants: (props?: {
-    variant?: "danger" | "success" | "warning" | "info";
+    variant?: "danger" | "info" | "success" | "warning";
 } & import("class-variance-authority/types").ClassProp) => string;
 interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
     /** Exibe o ícone semântico automático da variante (default `true`). */

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

@@ -2,11 +2,16 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 /**
  * CVA com variantes do `Badge`. Exportado para compor estilos em outros componentes.
+ *
+ * Geometria e tons são compartilhados com `StatusBadge` — Badge e StatusBadge
+ * são visualmente idênticos, mudando apenas a API.
+ *
  * @example
  * <div className={badgeVariants({ variant: 'success' })}>Custom</div>
  */
 declare const badgeVariants: (props?: {
-    variant?: "secondary" | "outline" | "danger" | "default" | "success" | "warning" | "info" | "sharp";
+    variant?: "default" | "brand" | "secondary" | "outline" | "danger" | "neutral" | "info" | "success" | "warning" | "counter" | "solid-success" | "solid-warning" | "solid-danger";
+    size?: "sm" | "md" | "lg";
 } & import("class-variance-authority/types").ClassProp) => string;
 /**
  * Tipo `BadgeProps` exportado pela lib.
@@ -16,23 +21,23 @@ declare const badgeVariants: (props?: {
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
 /**
- * Etiqueta visual compacta para metadados, contagens ou estados estáticos.
+ * Etiqueta visual compacta para metadados, contagens ou rótulos estáticos.
  *
- * Variantes:
- * - `default`: marca primária (azul).
- * - `secondary`: neutro suave.
- * - `danger`: erros / ações destrutivas. **Use `danger`, não `destructive`** (padrão da lib).
- * - `outline`: apenas borda, sem fundo.
- * - `success` / `warning` / `info`: feedback semântico.
- * - `sharp`: variante verde-limão de destaque (uso pontual).
+ * Variantes (todas por token — paridade light/dark e nas 4 essências):
+ * - `default`: marca primária sólida (rótulo de destaque).
+ * - `brand` / `info`: marca suave.
+ * - `secondary` / `neutral`: neutro suave; `counter` para contagens.
+ * - `success` / `warning` / `danger`: feedback semântico suave.
+ * - `solid-*`: versões sólidas para alertas de alta prioridade.
+ * - `outline`: apenas borda.
  *
- * Para estados dinâmicos de processo (Ativo, Pendente, Concluído), prefira
- * `StatusBadge` da lib (gera cor pastel automaticamente).
+ * Para estados dinâmicos de processo vindos de dados (Ativo, Pendente,
+ * Concluído), use `StatusBadge` — mesma geometria, API orientada a status.
  *
  * @example
  * ```tsx
  * <Badge variant="success">Aprovado</Badge>
- * <Badge variant="info">Novo</Badge>
+ * <Badge variant="counter" size="sm">12</Badge>
  * ```
  *
  * @see Documentação: `docs/design-system/data-display.md`

package/dist/components/ui/breadcrumb-icons.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @module breadcrumb-icons
+ * Resolução canônica dos ícones **duotone** da trilha de navegação.
+ *
+ * Regra do DS: todo nível de breadcrumb carrega um ícone duotone que reforça a
+ * memória visual daquele nível. A cor NUNCA é fixa — o ícone usa
+ * `ds-icon-brand-duotone`, herdando a cor do tema ativo (`currentColor` na
+ * camada principal e 0.35 de opacidade na secundária).
+ *
+ * Ordem de resolução:
+ * 1. Ícone explícito informado no item da trilha
+ * 2. Match semântico do rótulo (`CRUMB_ICONS`)
+ * 3. Primeiro nível → `House`
+ * 4. Nível final → `FileText` (folha) | níveis intermediários → `FolderSimple`
+ */
+import { type Icon as PhosphorIcon } from '@phosphor-icons/react';
+export type CrumbIcon = PhosphorIcon;
+/** Mapa semântico rótulo → ícone duotone. */
+export declare const CRUMB_ICONS: {
+    match: RegExp;
+    icon: PhosphorIcon;
+}[];
+/** Resolve o ícone duotone de um nível da trilha. */
+export declare function resolveCrumbIcon(label: string, index: number, isLast: boolean): PhosphorIcon;

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

@@ -18,6 +18,7 @@
  * @see `docs/design-system/navigation.md`
  */
 import * as React from "react";
+import { type CrumbIcon } from "./breadcrumb-icons";
 /**
  * Raiz `<nav aria-label="breadcrumb">`. Aceite separator customizado via prop.
  * @example
@@ -70,4 +71,29 @@ declare const BreadcrumbEllipsis: {
     ({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
     displayName: string;
 };
-export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
+/**
+ * Ícone duotone do nível da trilha. Resolve automaticamente pelo rótulo
+ * (`label`) ou aceita um ícone explícito. A cor deriva SEMPRE do tema ativo
+ * via `ds-icon-brand-duotone` — nunca use cor fixa aqui.
+ *
+ * @example
+ * <BreadcrumbLink asChild><Link to="/"><BreadcrumbIcon label="Início" />Início</Link></BreadcrumbLink>
+ */
+declare const BreadcrumbIcon: {
+    ({ label, icon, index, isLast, size, className, }: {
+        /** Rótulo do nível, usado para resolver o ícone semanticamente. */
+        label?: string;
+        /** Ícone explícito (vence a resolução automática). */
+        icon?: CrumbIcon;
+        /** Posição do nível na trilha (0 = raiz). */
+        index?: number;
+        /** Indica que é o último nível (página atual). */
+        isLast?: boolean;
+        size?: number;
+        className?: string;
+    }): React.JSX.Element;
+    displayName: string;
+};
+export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, BreadcrumbIcon, };
+export { resolveCrumbIcon, CRUMB_ICONS } from "./breadcrumb-icons";
+export type { CrumbIcon } from "./breadcrumb-icons";

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

@@ -1,28 +1,8 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
-/**
- * Variantes de estilo do componente {@link Button}.
- *
- * Variantes ativas:
- * - `primary` (default): Ação principal (bg azul). Use para CTA único na tela.
- * - `secondary`: Ação secundária com borda.
- * - `tertiary`: Borda suave + bg neutro.
- * - `outline` / `ghost` / `subtle`: Variações de baixa ênfase.
- * - `destructive` / `danger`: Ações irreversíveis (excluir). Aliases entre si — prefira `danger` (padrão da lib).
- * - `link`: Aparência de hyperlink, sem fundo.
- * - `icon`: Botão quadrado para apenas ícone (use `size="icon"`).
- *
- * Variantes legadas (mantidas por compatibilidade — evite em código novo):
- * `default`, `action`, `icon-only`, `external-link`, `action-primary`, `action-secondary`.
- *
- * @see {@link Button}
- *
- * @example
- * buttonVariants;
- */
 declare const buttonVariants: (props?: {
-    variant?: "link" | "icon" | "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "subtle" | "destructive" | "danger" | "loading" | "default" | "action" | "icon-only" | "external-link" | "action-primary" | "action-secondary";
-    size?: "icon" | "default" | "sm" | "md" | "lg" | "xl" | "icon-sm" | "icon-xs";
+    variant?: "link" | "icon" | "default" | "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "subtle" | "danger" | "destructive" | "loading" | "action" | "icon-only" | "external-link" | "action-primary" | "action-secondary";
+    size?: "icon" | "sm" | "md" | "lg" | "xl" | "default" | "icon-sm" | "icon-xs";
 } & import("class-variance-authority/types").ClassProp) => string;
 /**
  * Tipo `ButtonProps` exportado pela lib.
@@ -40,6 +20,13 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * ```
      */
     asChild?: boolean;
+    /**
+     * Estado de carregamento padronizado: aplica `aria-busy`, bloqueia a
+     * interação e exibe o spinner do DS antes do conteúdo.
+     */
+    loading?: boolean;
+    /** Texto opcional exibido no lugar do conteúdo enquanto carrega. */
+    loadingText?: React.ReactNode;
 }
 /**
  * Botão padrão da Forlogic Core. Suporta variantes semânticas, tamanhos, ícones (SVG inline)

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

@@ -6,13 +6,24 @@ import { DayPicker } from "react-day-picker";
  * const props: CalendarProps = { mode: 'single', selected: date, onSelect: setDate };
  */
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+/** Célula de grade (mês / ano) dos seletores de navegação. */
+export declare const CALENDAR_CELL: string;
+export declare const CALENDAR_CELL_ACTIVE = "bg-primary text-primary-foreground font-medium hover:bg-primary";
+export declare const CALENDAR_CELL_TODAY = "ring-1 ring-inset ring-primary/40";
 /**
- * Calendário pt-BR (via date-fns/locale). Wrapper estilizado de `react-day-picker`.
+ * Calendário localizado (via date-fns/locale). Wrapper estilizado de `react-day-picker`.
+ *
+ * Estados canônicos dos dias:
+ * - repouso: sem borda, texto `foreground`
+ * - hover: `bg-muted`, sem deslocamento
+ * - selecionado: `bg-primary` + `text-primary-foreground`
+ * - hoje: anel interno `ring-primary/40`
+ * - range: extremidades sólidas, miolo `bg-primary/12`
  *
  * @example
  * ```tsx
  * <Calendar mode="single" selected={date} onSelect={setDate} />
- * <Calendar mode="range" selected={range} onSelect={setRange} />
+ * <Calendar mode="range" selected={range} onSelect={setRange} numberOfMonths={2} />
  * ```
  *
  * @see `docs/design-system/inputs.md`

package/dist/components/ui/card-select-dialog.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { type Icon as PhosphorIcon } from '@phosphor-icons/react';
+import { type DialogTone } from './dialog-signal';
+export interface CardSelectOption {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: PhosphorIcon;
+    disabled?: boolean;
+}
+export interface CardSelectDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Título — pergunta direta sobre a escolha. */
+    title: React.ReactNode;
+    /** Contexto do que a escolha provoca. */
+    description?: React.ReactNode;
+    /** Sinal visual opcional no header. */
+    tone?: DialogTone;
+    icon?: PhosphorIcon;
+    /** Cartões disponíveis (a ordem reflete `order` quando reordenável). */
+    options: CardSelectOption[];
+    /** IDs selecionados (controlado). */
+    value: string[];
+    onValueChange: (value: string[]) => void;
+    /** Seleção múltipla (default: `true`). */
+    multiple?: boolean;
+    /** Habilita arrastar para ordenar os cartões (default: `false`). */
+    reorderable?: boolean;
+    /** Chamado quando a ordem muda (lista completa de IDs na nova ordem). */
+    onOrderChange?: (orderedIds: string[]) => void;
+    /** Colunas do grid em telas médias (default: 2). */
+    columns?: 1 | 2 | 3;
+    confirmText?: string;
+    cancelText?: string;
+    onConfirm?: () => void;
+    loading?: boolean;
+}
+/**
+ * CardSelectDialog — escolha por cartões, com ordenação opcional por arrasto.
+ *
+ * Cada cartão é uma superfície interativa com chip de ícone, rótulo, apoio e
+ * marca de seleção; quando `reorderable`, ganha alça de arraste e placeholder
+ * tracejado no destino — a mesma gramática do organizador de colunas das tabelas.
+ *
+ * @example
+ * <CardSelectDialog
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   title="Quais blocos entram no painel?"
+ *   options={blocks}
+ *   value={selected}
+ *   onValueChange={setSelected}
+ *   reorderable
+ *   onOrderChange={setOrder}
+ * />
+ */
+export declare function CardSelectDialog({ open, onOpenChange, title, description, tone, icon, options, value, onValueChange, multiple, reorderable, onOrderChange, columns, confirmText, cancelText, onConfirm, loading, }: CardSelectDialogProps): React.JSX.Element;
+export default CardSelectDialog;

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

@@ -19,11 +19,21 @@
  */
 import * as React from "react";
 /**
- * Raiz do card (`rounded-lg border bg-card shadow-sm`).
+ * Raiz do card (`ds-surface rounded-lg bg-card shadow-sm`).
  * @example
  * <Card><CardHeader>...</CardHeader></Card>
  */
-declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Card clicável: aplica o contrato de estados das superfícies
+     * (hover/pressionado/selecionado lendo a essência ativa do tema).
+     * Ativado automaticamente quando há `onClick`.
+     */
+    interactive?: boolean;
+    /** Marca o card como selecionado (superfície e borda de acento). */
+    selected?: boolean;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Cabeçalho do card (padding 6, espaçamento vertical entre título/descrição).
  * @example
@@ -48,10 +58,24 @@ declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttribu
  * <CardContent><p>Conteúdo</p></CardContent>
  */
 declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * `end` (padrão): linha flex, ações alinhadas conforme o `className`.
+     * `split`: grade de colunas iguais — cada ação preenche sua metade do rodapé.
+     * Use `split` no esquema padrão de divisão de botões em espaços pequenos.
+     */
+    layout?: "end" | "split";
+}
 /**
  * Rodapé do card. Padrão flex-row alinhado ao centro vertical.
  * @example
  * <CardFooter><Button>Ver mais</Button></CardFooter>
+ * @example
+ * // Dois botões dividindo 50/50 a largura do rodapé
+ * <CardFooter layout="split">
+ *   <Button variant="outline">Cancelar</Button>
+ *   <Button>Criar</Button>
+ * </CardFooter>
  */
-declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
 export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/dist/components/ui/combobox.d.ts

@@ -14,7 +14,6 @@ export interface ComboboxProps<T = any> {
     }>;
     emptyMessage?: string;
     searchPlaceholder?: string;
-    searchInputTestId?: string;
     disabled?: boolean;
     required?: boolean;
     isLoading?: boolean;
@@ -61,6 +60,6 @@ export interface ComboboxProps<T = any> {
  */
 export declare function Combobox<T = any>({ multiple, options: optionsProp, items, // alias
 value, onChange: onChangeProp, onValueChange, // alias
-getOptionValue, getOptionLabel, renderOption, placeholder, label, icon, emptyMessage, searchPlaceholder, searchInputTestId, disabled, required, isLoading, error, className, sortOptions, maxDisplayedBadges, popoverContainer, onOpen, onClose, clearable, showCheck }: ComboboxProps<T>): React.JSX.Element;
+getOptionValue, getOptionLabel, renderOption, placeholder, label, icon, emptyMessage, searchPlaceholder, disabled, required, isLoading, error, className, sortOptions, maxDisplayedBadges, popoverContainer, onOpen, onClose, clearable, showCheck }: ComboboxProps<T>): React.JSX.Element;
 export type SelectSearchProps<T = any> = ComboboxProps<T>;
 export declare const SelectSearch: typeof Combobox;

package/dist/components/ui/confirm-dialog.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { type Icon as PhosphorIcon } from '@phosphor-icons/react';
+import { type DialogTone } from './dialog-signal';
+/**
+ * Tom (severidade) do ConfirmDialog — alias do tom semântico compartilhado
+ * da família de dialogs (`DialogTone`), sem o tom `neutral`.
+ */
+export type ConfirmDialogTone = Exclude<DialogTone, 'neutral'>;
+export interface ConfirmDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Severidade da ação (default: `danger`). Define ícone, halo e variante do CTA. */
+    tone?: ConfirmDialogTone;
+    /** Ícone Phosphor (duotone). Default derivado do `tone`. */
+    icon?: PhosphorIcon;
+    /** Headline — frase direta, preferencialmente uma pergunta. */
+    title: React.ReactNode;
+    /** Contexto/consequência — o que acontece ao confirmar (permanência, riscos). */
+    description?: React.ReactNode;
+    /** Texto do CTA primário (default: "Confirmar"/`t('confirm')`). */
+    confirmText?: string;
+    /** Texto da saída segura (default: `t('cancel')`). */
+    cancelText?: string;
+    /** Mecanismo de atrito: exige digitar exatamente este texto para liberar o CTA. */
+    confirmationPhrase?: string;
+    /** Rótulo do campo de atrito. */
+    confirmationLabel?: React.ReactNode;
+    /** Mecanismo de atrito por senha: exibe campo de senha para liberar o CTA. */
+    confirmationPassword?: boolean;
+    /** Rótulo do campo de senha. */
+    passwordLabel?: React.ReactNode;
+    /** Placeholder do campo de senha. */
+    passwordPlaceholder?: string;
+    /** Validador customizado da senha. Default: senha com 6+ caracteres. */
+    passwordValidator?: (password: string) => boolean | Promise<boolean>;
+    /** Anel de ênfase pulsante ao redor do ícone (ações de alto risco). */
+    emphasisRing?: boolean;
+    /** Estado de carregamento do CTA primário. */
+    loading?: boolean;
+    onConfirm: () => void | Promise<void>;
+    /** Conteúdo extra opcional entre a descrição e o atrito. */
+    children?: React.ReactNode;
+}
+/**
+ * ConfirmDialog — padrão simples default de confirmação do DS.
+ *
+ * Composição: ícone (visual cue) → título (pergunta) → descrição (consequência)
+ * → atrito opcional → CTA destrutivo + saída segura.
+ *
+ * @example
+ * <ConfirmDialog
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   tone="danger"
+ *   title="Excluir este registro?"
+ *   description="Esta ação é permanente e não pode ser desfeita."
+ *   confirmText="Sim, excluir"
+ *   onConfirm={handleDelete}
+ * />
+ */
+export declare function ConfirmDialog({ open, onOpenChange, tone, icon, title, description, confirmText, cancelText, confirmationPhrase, confirmationLabel, confirmationPassword, passwordLabel, passwordPlaceholder, passwordValidator, emphasisRing, loading, onConfirm, children, }: ConfirmDialogProps): React.JSX.Element;

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

@@ -0,0 +1,98 @@
+import * as React from "react";
+/**
+ * Tema do `ThemedDatePicker`. Cada chave sobrescreve **apenas dentro do
+ * componente** o token semântico correspondente do DS — nada vaza para o resto
+ * da tela e nenhum arquivo da lib precisa ser alterado.
+ *
+ * Aceita qualquer cor CSS (`#2563eb`, `rgb(...)`, `hsl(...)`) ou o triplet HSL
+ * cru do DS (`"221 83% 53%"`).
+ *
+ * @example
+ * const theme: DatePickerTheme = { accent: '#7c3aed', radius: '12px' };
+ */
+export interface DatePickerTheme {
+    /** Cor de seleção (dias/ações ativas). Token `--primary`. */
+    accent?: string;
+    /** Cor do texto sobre o accent. Token `--primary-foreground`. */
+    accentForeground?: string;
+    /** Fundo do popover e do campo. Tokens `--popover` / `--background`. */
+    surface?: string;
+    /** Texto principal. Tokens `--popover-foreground` / `--foreground`. */
+    surfaceForeground?: string;
+    /** Fundo de hover / superfícies suaves. Token `--muted`. */
+    muted?: string;
+    /** Texto secundário (dias fora do mês, semanas). Token `--muted-foreground`. */
+    mutedForeground?: string;
+    /** Bordas e divisórias. Tokens `--border` / `--input`. */
+    border?: string;
+    /** Anel de foco. Tokens `--ring` / `--control-ring`. */
+    ring?: string;
+    /** Raio dos cantos. Token `--radius`. */
+    radius?: string;
+}
+/**
+ * Textos do `ThemedDatePicker`. Permite redefinir toda a cópia sem tocar o
+ * componente nem o dicionário de i18n.
+ *
+ * @example
+ * const labels: DatePickerLabels = { placeholder: 'Escolha a data', today: 'Hoje' };
+ */
+export interface DatePickerLabels {
+    /** Texto do campo vazio. */
+    placeholder?: string;
+    /** Rótulo do botão que salta para hoje. */
+    today?: string;
+    /** Rótulo do botão que limpa a seleção. */
+    clear?: string;
+    /** Formato `date-fns` do valor exibido. Default: `dd MMM yyyy`. */
+    dateFormat?: string;
+    /** Formatador completo do valor — vence sobre `dateFormat`. */
+    formatValue?: (date: Date) => string;
+}
+/**
+ * Converte um `DatePickerTheme` em CSS custom properties escopadas.
+ * Exportado para reuso em outras superfícies temáticas.
+ *
+ * @example
+ * <div style={datePickerThemeVars({ accent: '#7c3aed' })} />
+ */
+export declare function datePickerThemeVars(theme?: DatePickerTheme): React.CSSProperties;
+/**
+ * Props do `ThemedDatePicker`.
+ * @example
+ * const props: ThemedDatePickerProps = { date, onDateChange: setDate, theme: { accent: '#7c3aed' } };
+ */
+export interface ThemedDatePickerProps {
+    date?: Date;
+    onDateChange?: (date: Date | undefined) => void;
+    disabled?: boolean;
+    className?: string;
+    /** Classe aplicada ao popover (superfície do calendário). */
+    contentClassName?: string;
+    disabledDates?: (date: Date) => boolean;
+    /** Sobrescreve cores e raio apenas dentro do componente. */
+    theme?: DatePickerTheme;
+    /** Sobrescreve os textos exibidos. */
+    labels?: DatePickerLabels;
+    /** Mostra o rodapé com "hoje" e "limpar". Default: `true`. */
+    showFooter?: boolean;
+}
+/**
+ * Variante temática do `DatePicker`: mesma anatomia e comportamento canônicos,
+ * porém com cores, raio e textos redefiníveis por props. Os overrides são
+ * escopados via CSS custom properties, então o restante da tela continua no
+ * tema ativo do DS.
+ *
+ * @example
+ * ```tsx
+ * <ThemedDatePicker
+ *   date={date}
+ *   onDateChange={setDate}
+ *   theme={{ accent: '#7c3aed', radius: '12px' }}
+ *   labels={{ placeholder: 'Escolha a data', today: 'Hoje', clear: 'Limpar' }}
+ * />
+ * ```
+ *
+ * @see `docs/design-system/inputs.md`
+ */
+export declare function ThemedDatePicker({ date, onDateChange, disabled, className, contentClassName, disabledDates, theme, labels, showFooter, }: ThemedDatePickerProps): React.JSX.Element;