forlogic-core 3.0.11 → 4.0.0

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

@@ -1,20 +1,20 @@
 import * as React from 'react';
+import { type Icon as PhosphorIcon } from '@phosphor-icons/react';
 import { type DialogVariant, type DialogSize } from './dialog';
+import { type DialogTone } from './dialog-signal';
 /**
- * DialogWizard — Dialog multi-step com stepper vertical lateral (padrão v2 da lib).
+ * DialogWizard — Dialog multi-etapas com **trilha horizontal** no topo (padrão v2 da lib).
  *
- * Substitui o padrão anterior de `StepSelector` horizontal no footer. Renderiza uma sidebar
- * azul (`bg-primary`) à esquerda com círculos numerados marcando completude, etapa atual e
- * etapas inacessíveis; à direita, área de conteúdo com header, body scrollável e footer
- * com navegação automática (Voltar / Próximo / Salvar).
+ * A trilha ocupa a faixa superior do dialog: chips numerados ligados por conectores
+ * (linha sólida para etapas concluídas, tracejada para as pendentes). Etapas
+ * concluídas ganham ✓, a atual fica destacada em cor de marca.
  *
  * **Quando usar:** fluxos com 3+ etapas. Para 1-2 etapas, prefira `Dialog` simples.
  *
- * **Validação por etapa:** use `canGoToStep(targetStep)` para bloquear avanço.
- * Voltar para etapas anteriores é sempre permitido (UX padrão de wizard).
+ * **Etapas:** `steps` aceita `string[]` (compatível) ou `DialogWizardStep[]`
+ * (`{ label, description?, icon? }`).
  *
- * **Confirmação de descarte:** se `isDirty=true`, fechar o diálogo dispara o
- * AlertDialog de "alterações não salvas" herdado de `DialogContent` (variant='form').
+ * **Validação por etapa:** `canGoToStep(target)` bloqueia avanço; voltar é sempre permitido.
  *
  * @example
  * ```tsx
@@ -23,20 +23,22 @@ import { type DialogVariant, type DialogSize } from './dialog';
  *   onOpenChange={setOpen}
  *   currentStep={step}
  *   onStepChange={setStep}
- *   steps={['Geral', 'Formulário', 'Configuração']}
+ *   steps={['Cabine', 'Refeições', 'Upgrades', 'Pagamento']}
  *   title={t('new_document')}
- *   isDirty={form.formState.isDirty}
- *   canGoToStep={(s) => s <= 2 ? form.formState.isValid : true}
  *   onSave={handleSave}
  * >
- *   {step === 1 && <StepOneContent />}
- *   {step === 2 && <StepTwoContent />}
- *   {step === 3 && <StepThreeContent />}
+ *   {step === 1 && <StepOne />}
  * </DialogWizard>
  * ```
- *
- * @see {@link Dialog} Para diálogos sem etapas.
  */
+export interface DialogWizardStep {
+    /** Rótulo da etapa exibido no cartão. */
+    label: string;
+    /** Linha de apoio opcional, explicando o que a etapa pede. */
+    description?: string;
+    /** Ícone Phosphor opcional no chip da etapa. */
+    icon?: PhosphorIcon;
+}
 export interface DialogWizardProps {
     /** Controla se o dialog está aberto */
     open: boolean;
@@ -46,12 +48,11 @@ export interface DialogWizardProps {
     currentStep: number;
     /** Callback chamado quando uma etapa é selecionada */
     onStepChange: (step: number) => void;
-    /** Labels das etapas */
-    steps: string[];
+    /** Etapas: rótulos simples ou cartões com descrição/ícone */
+    steps: Array<string | DialogWizardStep>;
     /**
      * Função que valida se pode navegar para uma etapa específica.
      * Voltar para etapas anteriores é sempre permitido.
-     * Se não fornecida, todas as etapas são acessíveis.
      */
     canGoToStep?: (targetStep: number) => boolean;
     /** Conteúdo do step atual */
@@ -60,6 +61,12 @@ export interface DialogWizardProps {
     title: string;
     /** Subtítulo opcional abaixo do título */
     description?: string;
+    /** Tom semântico do sinal visual do header (opcional) */
+    tone?: DialogTone;
+    /** Ícone do sinal visual do header. Exibe o `DialogSignal` quando informado. */
+    icon?: PhosphorIcon;
+    /** Rótulo do bloco de etapas na trilha lateral */
+    stepsLabel?: string;
     /** Callback do botão "Salvar" no último step */
     onSave?: () => void;
     /** Label do botão salvar (default: "Salvar") */
@@ -90,11 +97,20 @@ export interface DialogWizardProps {
     hideNavigation?: boolean;
     /** Conteúdo extra no footer (à esquerda dos botões de navegação) */
     footerLeft?: React.ReactNode;
+    /**
+     * Fases (sub-etapas) da etapa atual — **já filtradas** pelo consumidor.
+     * Como a lista é calculada fora, é possível adaptar o fluxo às respostas do
+     * usuário: fases desnecessárias simplesmente não entram no array.
+     */
+    phases?: Array<string | DialogWizardStep>;
+    /** Fase atual dentro da etapa (1-indexed). Default: 1. */
+    currentPhase?: number;
+    /** Callback ao navegar entre fases da etapa atual. */
+    onPhaseChange?: (phase: number) => void;
+    /** Exibe botão "Cancelar" no footer quando informado. */
+    onCancel?: () => void;
+    /** Label do botão cancelar (default: "Cancelar"). */
+    cancelLabel?: string;
 }
-/**
- * Função utilitária `DialogWizard`.
- * @example
- * DialogWizard();
- */
-declare function DialogWizard({ open, onOpenChange, currentStep, onStepChange, steps, canGoToStep, children, title, description, onSave, saveLabel, nextLabel, backLabel, variant, isDirty, size, unsavedChangesTitle, unsavedChangesDescription, cancelText, leaveWithoutSavingText, className, disableNext, hideNavigation, footerLeft, }: DialogWizardProps): React.JSX.Element;
+declare function DialogWizard({ open, onOpenChange, currentStep, onStepChange, steps, canGoToStep, children, title, description, tone, icon, stepsLabel, onSave, saveLabel, nextLabel, backLabel, variant, isDirty, size, unsavedChangesTitle, unsavedChangesDescription, cancelText, leaveWithoutSavingText, className, disableNext, hideNavigation, footerLeft, phases, currentPhase, onPhaseChange, onCancel, cancelLabel, }: DialogWizardProps): React.JSX.Element;
 export { DialogWizard };

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { type OverlayTitleProps } from "./overlay-title";
 /**
  * Dialog — Modal acessível baseado em Radix UI Dialog (composição padrão da lib).
  *
@@ -16,7 +17,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
  *       {/* conteúdo scrollável *\/}
  *     </DialogBody>
  *     <DialogFooter>
- *       <Button variant="outline" onClick={() => setOpen(false)}>Cancelar</Button>
+ *       <Button variant="secondary" onClick={() => setOpen(false)}>Cancelar</Button>
  *       <Button onClick={handleSave}>Salvar</Button>
  *     </DialogFooter>
  *   </DialogContent>
@@ -46,7 +47,7 @@ declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
  *
  * @example
  * <DialogTrigger asChild>
- *   <Button variant="outline">Editar</Button>
+ *   <Button variant="secondary">Editar</Button>
  * </DialogTrigger>
  */
 declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
@@ -67,7 +68,7 @@ declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
  *
  * @example
  * <DialogClose asChild>
- *   <Button variant="outline">Cancelar</Button>
+ *   <Button variant="secondary">Cancelar</Button>
  * </DialogClose>
  */
 declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
@@ -139,6 +140,8 @@ interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof Dialo
     cancelText?: string;
     /** i18n: Leave without saving button text */
     leaveWithoutSavingText?: string;
+    /** Exibe o botão de fechar no canto superior direito. Default: true, exceto para variant='destructive'. */
+    showCloseButton?: boolean;
 }
 /**
  * Container principal do Dialog. Aplica tamanho, variante e (quando `variant='form'`)
@@ -152,7 +155,7 @@ interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof Dialo
  *   </DialogHeader>
  *   <DialogBody>{/* form fields *\/}</DialogBody>
  *   <DialogFooter>
- *     <Button variant="outline" onClick={() => setOpen(false)}>Cancelar</Button>
+ *     <Button variant="secondary" onClick={() => setOpen(false)}>Cancelar</Button>
  *     <Button onClick={handleSave}>Salvar</Button>
  *   </DialogFooter>
  * </DialogContent>
@@ -161,6 +164,8 @@ declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps
 interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Se `true`, exibe uma linha separadora abaixo do título (default: `false`). */
     showSeparator?: boolean;
+    /** Classes adicionais no container interno que envolve o título/descrição. */
+    contentClassName?: string;
 }
 /**
  * Header do Dialog. Contém `DialogTitle` e opcionalmente `DialogDescription`.
@@ -173,7 +178,7 @@ interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
  * </DialogHeader>
  */
 declare const DialogHeader: {
-    ({ className, showSeparator, children, ...props }: DialogHeaderProps): React.JSX.Element;
+    ({ className, showSeparator, contentClassName, children, ...props }: DialogHeaderProps): React.JSX.Element;
     displayName: string;
 };
 /**
@@ -194,27 +199,41 @@ declare const DialogBody: {
     displayName: string;
 };
 /**
- * Footer do Dialog com separador automático e alinhamento à direita.
- * Tipicamente contém botões de ação (Cancelar, Salvar). Fica fixo no rodapé.
+ * Footer do Dialog com separador automático.
+ *
+ * Layout padrão em todas as dialogs (máxima de distribuição horizontal):
+ * - **2 botões** (ex.: Cancelar + Salvar): preenchem 100% da área útil do footer,
+ *   dividindo o espaço horizontalmente (50/50).
+ * - **3+ botões**: Cancelar/Salvar/Próximo agrupados na extrema direita com `gap-2`,
+ *   e a ação segregada/paralela (ex.: Voltar) isolada na extrema esquerda,
+ *   renderizada como `ghost` por padrão.
+ *
+ * Use `segregatedAction` para declarar explicitamente o botão de navegação/risco.
+ * Caso não seja declarado, o primeiro filho do footer será automaticamente
+ * segregado quando houver 3 ou mais botões.
  *
  * @example
- * <DialogFooter>
- *   <Button variant="outline" onClick={() => setOpen(false)}>Cancelar</Button>
+ * <DialogFooter segregatedAction={<Button onClick={back}>Voltar</Button>}>
+ *   <Button variant="secondary" onClick={() => setOpen(false)}>Cancelar</Button>
  *   <Button onClick={handleSave} disabled={form.formState.isSubmitting}>Salvar</Button>
  * </DialogFooter>
  */
 declare const DialogFooter: {
-    ({ className, children, ...props }: React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
+    ({ className, containerClassName, segregatedAction, children, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+        containerClassName?: string;
+        /** Ação segregada na extremidade oposta do footer (ex.: Voltar/Excluir). Renderizada como `ghost` automaticamente. */
+        segregatedAction?: React.ReactNode;
+    }): React.JSX.Element;
     displayName: string;
 };
 /**
- * Título do Dialog. Renderizado como `<h2>` com estilo `text-xl font-semibold`.
+ * Título do Dialog. Renderizado com ícone **duotone** (Phosphor) na mesma linha do texto.
  * **Obrigatório por acessibilidade** — Radix usa o título para `aria-labelledby` do dialog.
  *
  * @example
- * <DialogTitle>Excluir usuário</DialogTitle>
+ * <DialogTitle icon={Trash}>Excluir usuário</DialogTitle>
  */
-declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+declare const DialogTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & OverlayTitleProps & React.RefAttributes<HTMLHeadingElement>>;
 /**
  * Descrição opcional do Dialog (subtítulo). Exibida em texto muted abaixo do título.
  * Mapeada para `aria-describedby` automaticamente pelo Radix.

package/dist/components/ui/disabled-menu-item.d.ts

@@ -3,6 +3,8 @@ interface DisabledMenuItemProps {
     children: React.ReactNode;
     disabledReason?: string;
     className?: string;
+    /** Superfície de renderização — mantém a semântica correta do menu de contexto. */
+    renderAs?: 'dropdown' | 'context';
 }
 /**
  * DisabledMenuItem - Item de menu desabilitado com tooltip explicativo

package/dist/components/ui/feature-announcement-dialog.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { type Icon as PhosphorIcon } from '@phosphor-icons/react';
+import { type DialogTone } from './dialog-signal';
+export interface FeatureAnnouncementDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Etiqueta curta (ex.: "Novidade", "Beta"). */
+    tag?: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    tone?: DialogTone;
+    icon?: PhosphorIcon;
+    /** Imagem ou GIF de demonstração da novidade. */
+    mediaSrc?: string;
+    mediaAlt?: string;
+    /** Proporção da mídia (default: `16/9`). */
+    mediaAspect?: string;
+    /** Lista de destaques da novidade. */
+    highlights?: React.ReactNode[];
+    /** Ação primária (ex.: "Ver agora"). */
+    primaryAction?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Ação secundária (default: fechar). */
+    dismissText?: string;
+    children?: React.ReactNode;
+}
+/**
+ * FeatureAnnouncementDialog — aviso de nova funcionalidade com mídia (imagem/GIF).
+ *
+ * É o modelo de "primeira impressão": etiqueta + sinal visual + mídia + destaques
+ * + um único caminho adiante. Para fluxos com várias telas, use `OnboardingDialog`.
+ *
+ * @example
+ * <FeatureAnnouncementDialog
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   tag="Novidade"
+ *   title="Organizador de colunas"
+ *   mediaSrc={gif}
+ *   primaryAction={{ label: 'Ver agora', onClick: go }}
+ * />
+ */
+export declare function FeatureAnnouncementDialog({ open, onOpenChange, tag, title, description, tone, icon, mediaSrc, mediaAlt, mediaAspect, highlights, primaryAction, dismissText, children, }: FeatureAnnouncementDialogProps): React.JSX.Element;
+export default FeatureAnnouncementDialog;

package/dist/components/ui/forlogic-assembly.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+export interface ForlogicAssemblyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Tamanho do símbolo. Padrão: 56px. */
+    size?: number | string;
+    /** Cor do símbolo. Padrão: `currentColor` do pai. */
+    color?: string;
+    /** Aumenta a opacidade final no hover (padrão: false). */
+    emphasis?: boolean;
+    /** Texto acessível. */
+    label?: string;
+    /** Ativa o efeito de revelação sem depender de hover (útil para demos). */
+    active?: boolean;
+    /** Classe aplicada ao SVG interno. */
+    svgClassName?: string;
+    /** Classe aplicada a cada bloco. */
+    pieceClassName?: string;
+}
+/**
+ * Animação oficial da marca Forlogic — blocos ocultos que se revelam
+ * sequencialmente até formar o símbolo completo.
+ *
+ * É a mesma decoração usada no Stat Card V6, extraída para uso independente
+ * em loaders, transições de página, estados vazios e outros componentes.
+ *
+ * A revelação é acionada por hover/focus no wrapper `.group` interno. Para
+ * ativar programaticamente, use `active={true}`.
+ */
+export declare const ForlogicAssembly: React.ForwardRefExoticComponent<ForlogicAssemblyProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Wrapper de cartão para demonstração da animação. Replica o comportamento
+ * do Stat Card V6 sem depender do componente de métrica.
+ */
+export interface ForlogicAssemblyCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    size?: number | string;
+    color?: string;
+    emphasis?: boolean;
+    label?: string;
+    active?: boolean;
+    title?: string;
+    description?: string;
+}
+export declare const ForlogicAssemblyCard: React.ForwardRefExoticComponent<ForlogicAssemblyCardProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/forlogic-loader.d.ts

@@ -0,0 +1,50 @@
+import * as React from 'react';
+/**
+ * Compósito oficial da marca: o símbolo Forlogic dividido em 3 blocos.
+ *
+ * Cada bloco orbita o centro do círculo e converge até formar a marca
+ * completa. É a base do loader circular e pode ser reaproveitado em
+ * transições de página, estados de carregamento e decorações.
+ */
+export declare const FORLOGIC_PIECES: readonly ["M0 16.6702V8.05894C0 7.28714 0.928937 6.87021 1.53434 7.36945L15.8045 19.1542C16.2918 19.5563 16.2266 20.3052 15.6767 20.6223L11.2959 23.1468C11.0029 23.3155 10.6391 23.3155 10.3461 23.1468L0.456838 17.4501C0.173574 17.2868 0 16.9913 0 16.6715V16.6702Z", "M3.28677 4.20813L10.3739 0.126497C10.6669 -0.0421656 11.0307 -0.0421656 11.3237 0.126497L18.0581 4.00573C18.6774 4.3633 18.6636 5.239 18.0332 5.57632L9.5033 10.1464C9.16449 10.3286 8.74515 10.2867 8.45078 10.0439L3.15902 5.67617C2.67164 5.27408 2.7369 4.52521 3.28677 4.20813Z", "M12.0721 11.4257L20.4645 6.92851C21.0851 6.59523 21.8461 7.03241 21.8461 7.72055V16.5517C21.8461 16.8729 21.6711 17.1683 21.3878 17.3316L19.5314 18.3949C19.1898 18.5905 18.7579 18.5541 18.4552 18.3045L11.9193 12.9086C11.4222 12.4984 11.5014 11.732 12.0721 11.4257Z"];
+export interface ForlogicMarkPiecesProps extends React.SVGProps<SVGSVGElement> {
+    /** Classe aplicada a cada bloco. */
+    pieceClassName?: string;
+}
+/**
+ * O símbolo em 3 blocos independentes — herda `currentColor`.
+ * A animação é controlada por CSS (`.ds-forlogic-orbit`).
+ */
+export declare const ForlogicMarkPieces: React.ForwardRefExoticComponent<Omit<ForlogicMarkPiecesProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const SIZES: {
+    readonly sm: "h-5 w-5";
+    readonly md: "h-8 w-8";
+    readonly lg: "h-12 w-12";
+    readonly xl: "h-20 w-20";
+};
+export interface ForlogicLoaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Tamanho da marca. */
+    size?: keyof typeof SIZES;
+    /** Duração de um ciclo completo da órbita. */
+    duration?: string;
+    /** Texto acessível anunciado enquanto carrega. */
+    label?: string;
+    /** Oculta o texto acessível (mantendo-o para leitores de tela). */
+    showLabel?: boolean;
+}
+/**
+ * Loader circular da Forlogic: os 3 blocos do símbolo giram em órbita e se
+ * encaixam formando a marca, em loop contínuo.
+ *
+ * Reutilizável como spinner, overlay de carregamento e transição de página.
+ */
+export declare const ForlogicLoader: React.ForwardRefExoticComponent<ForlogicLoaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface ForlogicPageTransitionProps extends ForlogicLoaderProps {
+    /** Controla a visibilidade do overlay. */
+    active?: boolean;
+}
+/**
+ * Overlay de transição de página usando o loader circular da marca.
+ */
+export declare function ForlogicPageTransition({ active, size, className, ...rest }: ForlogicPageTransitionProps): React.JSX.Element;
+export {};

package/dist/components/ui/forlogic-mark.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+/**
+ * Paths dos 3 blocos que compõem a marca Forlogic.
+ * Exportado para reutilização em loaders e decorações.
+ */
+export declare const FORLOGIC_PIECES: readonly ["M0 16.6702V8.05894C0 7.28714 0.928937 6.87021 1.53434 7.36945L15.8045 19.1542C16.2918 19.5563 16.2266 20.3052 15.6767 20.6223L11.2959 23.1468C11.0029 23.3155 10.6391 23.3155 10.3461 23.1468L0.456838 17.4501C0.173574 17.2868 0 16.9913 0 16.6715V16.6702Z", "M3.28677 4.20813L10.3739 0.126497C10.6669 -0.0421656 11.0307 -0.0421656 11.3237 0.126497L18.0581 4.00573C18.6774 4.3633 18.6636 5.239 18.0332 5.57632L9.5033 10.1464C9.16449 10.3286 8.74515 10.2867 8.45078 10.0439L3.15902 5.67617C2.67164 5.27408 2.7369 4.52521 3.28677 4.20813Z", "M12.0721 11.4257L20.4645 6.92851C21.0851 6.59523 21.8461 7.03241 21.8461 7.72055V16.5517C21.8461 16.8729 21.6711 17.1683 21.3878 17.3316L19.5314 18.3949C19.1898 18.5905 18.7579 18.5541 18.4552 18.3045L11.9193 12.9086C11.4222 12.4984 11.5014 11.732 12.0721 11.4257Z"];
+/**
+ * Props do primitivo SVG da marca.
+ */
+export interface ForlogicMarkPiecesProps extends React.SVGProps<SVGSVGElement> {
+    /** Classe aplicada em cada bloco (`path`) da marca. */
+    pieceClassName?: string;
+}
+/**
+ * Primitivo SVG dos 3 blocos da marca Forlogic.
+ *
+ * Não possui animação própria — combine com as classes
+ * `ds-forlogic-assembly` (revelação) ou `ds-forlogic-orbit` (loader).
+ *
+ * @example
+ * ```tsx
+ * <ForlogicMarkPieces className="ds-forlogic-orbit h-8 w-8 text-primary" />
+ * ```
+ */
+export declare const ForlogicMarkPieces: React.ForwardRefExoticComponent<Omit<ForlogicMarkPiecesProps, "ref"> & React.RefAttributes<SVGSVGElement>>;

package/dist/components/ui/icon-hover-duotone.d.ts

@@ -0,0 +1,19 @@
+import { type Icon as PhosphorIcon } from '@phosphor-icons/react';
+interface IconHoverDuotoneProps {
+    /** Ícone do Phosphor (ex.: House, Bell, Gear). */
+    icon: PhosphorIcon;
+    size?: number;
+    className?: string;
+    /** Nome acessível para leitores de tela (se o ícone não estiver decorativo). */
+    'aria-label'?: string;
+}
+/**
+ * Ícone que vive como **regular** no estado normal e, no hover, ganha vida
+ * duotone com preenchimento da cor primária do tema ativo.
+ *
+ * Usado nos ícones do header (breadcrumb, notificações, configurações e
+ * chevron do perfil) para manter a leitura limpa e reforçar a marca no estado
+ * ativo/hover sem depender de cor fixa.
+ */
+export declare function IconHoverDuotone({ icon: Icon, size, className, 'aria-label': ariaLabel, }: IconHoverDuotoneProps): import("react").JSX.Element;
+export {};

package/dist/components/ui/input-group.d.ts

@@ -56,7 +56,7 @@ declare const InputGroupAddon: React.ForwardRefExoticComponent<InputGroupAddonPr
  * inputGroupButtonVariants;
  */
 declare const inputGroupButtonVariants: (props?: {
-    size?: "sm" | "icon-sm" | "icon-xs" | "xs";
+    size?: "sm" | "md" | "xs" | "icon-sm" | "icon-xs" | "icon-md";
 } & import("class-variance-authority/types").ClassProp) => string;
 /**
  * Tipo `InputGroupButtonProps` exportado pela lib.
@@ -70,12 +70,12 @@ export interface InputGroupButtonProps extends Omit<ButtonProps, "size">, Varian
  *
  * Botão estilizado para uso dentro de InputGroup.
  *
- * @prop size - Tamanho do botão: "xs" | "icon-xs" | "sm" | "icon-sm"
+ * @prop size - Tamanho do botão: "md" | "icon-md" (default) | "sm" | "icon-sm" | "xs" | "icon-xs"
  * @prop variant - Variante do botão (herda do Button)
  *
  * @example
  * ```tsx
- * <InputGroupButton variant="ghost" size="icon-xs">
+ * <InputGroupButton variant="ghost" size="icon-md">
  *   <X className="h-4 w-4" />
  * </InputGroupButton>
  * ```

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

@@ -14,6 +14,11 @@ import * as React from "react";
  */
 export interface InputProps extends React.ComponentProps<"input"> {
     showCharCount?: boolean;
+    /**
+     * Estado de carregamento padronizado: `aria-busy`, borda/superfície de
+     * carregamento da essência ativa e spinner do DS à direita.
+     */
+    loading?: boolean;
 }
 /**
  * Componente `Input` da lib.

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

@@ -0,0 +1,104 @@
+/**
+ * @module KanbanCard
+ * Modelo AVANÇADO e canônico de card do DS (nascido no quadro kanban do Project Hub).
+ *
+ * Anatomia (3 blocos, de cima para baixo):
+ * 1. `KanbanCardTopBar` — flex de 3 partes: slot de seleção (checkbox/ícone),
+ *    título `h3` truncado e zona de troca à direita, onde o ponto de estado
+ *    pulsante (`KanbanCardStatePulse`) dá lugar ao botão de ação (“Ver mais”)
+ *    no hover/foco do card. Divisória apenas no topo, com respiro.
+ * 2. `KanbanCardBody` — bloco vertical: resumo curto em texto secundário
+ *    (recomendado até 140 caracteres, use `truncateSummary`) + badges/status badges.
+ * 3. `KanbanCardFooter` — flex entre metadado (data/prazo) e avatares.
+ *
+ * Variações: `KanbanCardMedia` (card com imagem de capa) e o próprio corpo
+ * livre para finalidades diversas (pessoa, documento, projeto, chamada de ação).
+ *
+ * Regras invioláveis:
+ * - o topo NUNCA recebe preenchimento colorido de estado — o acento é o pulso;
+ * - a cor do pulso deriva do estado/coluna atual via tokens do tema (currentColor);
+ * - sem gradiente e sem acento na borda lateral.
+ *
+ * @example
+ * ```tsx
+ * <KanbanCard>
+ *   <KanbanCardTopBar
+ *     title="Homologar conciliação bancária"
+ *     tone="info"
+ *     stateLabel="Em execução"
+ *     action={<Button variant="tertiary" size="sm">Ver mais</Button>}
+ *     leading={<Checkbox />}
+ *   />
+ *   <KanbanCardBody summary="Homologar a conciliação com extratos reais." badges={<StatusBadge label="Em execução" tone="info" size="sm" variant="filled" dot />} />
+ *   <KanbanCardFooter meta="22 de set." trailing={<Avatar />} />
+ * </KanbanCard>
+ * ```
+ *
+ * @see `docs/design-system/data-display.md`
+ */
+import * as React from "react";
+/** Tons de estado suportados pelo pulso do card (derivados dos tokens do tema). */
+export type KanbanCardTone = "neutral" | "info" | "warning" | "success" | "danger" | "primary";
+/** Cor de texto por tom — o pulso usa `currentColor`, logo segue o tema ativo. */
+export declare const KANBAN_CARD_TONE_TEXT: Record<KanbanCardTone, string>;
+/** Corta o resumo do card no limite canônico (140 caracteres) sem quebrar palavra. */
+export declare function truncateSummary(text: string, max?: number): string;
+export interface KanbanCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Marca o card como selecionado (superfície e borda de acento). */
+    selected?: boolean;
+}
+/**
+ * Raiz do card avançado. Aplica `ds-kanban-card` (contrato de hover/troca)
+ * e remove o padding padrão — os blocos internos controlam o espaçamento.
+ */
+export declare const KanbanCard: React.ForwardRefExoticComponent<KanbanCardProps & React.RefAttributes<HTMLDivElement>>;
+/** Ponto de estado pulsante (8px). A cor vem do tom informado (tokens do tema). */
+export declare function KanbanCardStatePulse({ tone, label, className, }: {
+    tone?: KanbanCardTone;
+    label?: string;
+    className?: string;
+}): React.JSX.Element;
+export interface KanbanCardTopBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Título principal do card (renderizado como `h3` truncado). */
+    title?: React.ReactNode;
+    /** Slot inicial — normalmente o checkbox de seleção. */
+    leading?: React.ReactNode;
+    /** Tom do estado atual (coluna/situação) usado pelo pulso. */
+    tone?: KanbanCardTone;
+    /** Rótulo acessível do estado (tooltip do pulso). */
+    stateLabel?: string;
+    /** Ação revelada no hover/foco, substituindo o pulso (ex.: “Ver mais”). */
+    action?: React.ReactNode;
+}
+/** Topo canônico: seleção + título + zona de troca (pulso ⇄ ação). */
+export declare const KanbanCardTopBar: React.ForwardRefExoticComponent<KanbanCardTopBarProps & React.RefAttributes<HTMLDivElement>>;
+export interface KanbanCardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Resumo curto (texto secundário). Truncado em 140 caracteres. */
+    summary?: string;
+    /** Limite de caracteres do resumo. */
+    summaryLimit?: number;
+    /** Badges e status badges do card. */
+    badges?: React.ReactNode;
+}
+/** Corpo canônico: resumo secundário + linha de badges. */
+export declare const KanbanCardBody: React.ForwardRefExoticComponent<KanbanCardBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface KanbanCardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Metadado à esquerda (prazo, data, origem). */
+    meta?: React.ReactNode;
+    /** Conteúdo à direita (avatares, ações discretas). */
+    trailing?: React.ReactNode;
+}
+/** Rodapé canônico: metadado à esquerda, avatares/ações à direita. Sem divisória. */
+export declare const KanbanCardFooter: React.ForwardRefExoticComponent<KanbanCardFooterProps & React.RefAttributes<HTMLDivElement>>;
+export interface KanbanCardMediaProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** URL da imagem de capa. */
+    src: string;
+    /** Texto alternativo — obrigatório para acessibilidade. */
+    alt: string;
+    /** Proporção da capa. */
+    ratio?: "video" | "square" | "wide";
+    /** Conteúdo sobreposto (badges, ações) no canto superior. */
+    overlay?: React.ReactNode;
+}
+/** Capa de imagem do card (variação `card-image`). Fica acima da topbar. */
+export declare const KanbanCardMedia: React.ForwardRefExoticComponent<KanbanCardMediaProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/overlay-title.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type Icon as PhosphorIcon } from "@phosphor-icons/react";
+/**
+ * Padrão de título para overlays (Dialog, AlertDialog, Sheet).
+ *
+ * Todo título do sistema é composto por um ícone **duotone** (Phosphor) alinhado
+ * na mesma linha do texto — dando personalidade e reforçando o contexto da janela.
+ *
+ * - `icon`: componente Phosphor (default: `Info`).
+ * - `hideIcon`: remove o ícone em casos excepcionais (ex.: título `sr-only`).
+ */
+export interface OverlayTitleProps {
+    /** Ícone Phosphor exibido antes do texto (renderizado em `duotone`). */
+    icon?: PhosphorIcon;
+    /** Oculta o ícone (use quando o título for `sr-only`). */
+    hideIcon?: boolean;
+}
+export declare const overlayTitleClassName = "flex items-center gap-2 text-xl font-bold leading-tight tracking-tight text-foreground";
+/** Renderiza o ícone duotone padrão + conteúdo do título na mesma linha. */
+export declare const OverlayTitleContent: ({ icon: IconComponent, hideIcon, className, children, }: OverlayTitleProps & {
+    className?: string;
+    children?: React.ReactNode;
+}) => React.JSX.Element;