@vector-business-services/cristal-ds-web 0.13.1 → 0.15.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, InputHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, RefObject, SyntheticEvent, MouseEvent } from 'react';
+import { HTMLAttributes, ReactNode, InputHTMLAttributes, ButtonHTMLAttributes, CSSProperties, RefObject, SyntheticEvent, MouseEvent } from 'react';
 import { AutoCompleteProps as AutoCompleteProps$1 } from 'primereact/autocomplete';
 import { CheckboxChangeEvent } from 'primereact/checkbox';
 import { ChipRemoveEvent } from 'primereact/chip';
@@ -22,7 +22,7 @@ interface AccordionTabProps {
 }
 /** Só descreve o item: quem desenha é o Accordion. */
 declare function AccordionTab(_props: AccordionTabProps): null;
-interface AccordionProps {
+interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Mais de um item aberto ao mesmo tempo. */
     multiple?: boolean;
     /**
@@ -139,7 +139,7 @@ interface ChartAxis {
     /** Distância entre as marcas (ex.: 50). */
     stepSize?: number;
 }
-interface ChartProps {
+interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
     /** Linhas com área (Chart / Line) ou barras (Chart / Bar). Padrão: line. */
     type?: 'line' | 'bar';
     /** Barras empilhadas: as séries somam numa barra só por rótulo. */
@@ -164,13 +164,14 @@ interface ChartProps {
     id?: string;
     className?: string;
 }
-declare function Chart({ type, stacked, labels, series, yAxis, y2Axis, title, help, helpLabel, actions, height, id, className, }: ChartProps): react.JSX.Element;
+declare const Chart: react.ForwardRefExoticComponent<ChartProps & react.RefAttributes<HTMLDivElement>>;
 
 /** Label Position no Figma: lado da caixa em relação ao rótulo. */
 type CheckboxPosition = 'left' | 'right';
 /** Label Type no Figma: Default (uma linha, com reticências) e Full (quebra em várias linhas). */
 type CheckboxLabelSize = 'default' | 'full';
-interface CheckboxProps {
+/** As demais props vão no <input> (aria-describedby, onBlur, data-*...); className e style, na raiz. */
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'checked' | 'defaultChecked' | 'defaultValue' | 'size' | 'type' | 'children'> {
     /** Texto ao lado da caixa (Label no Figma). Sem rótulo visível, vira o nome acessível. */
     label: ReactNode;
     /** Mostra o rótulo. Padrão: true. */
@@ -240,7 +241,12 @@ type DrawerBehavior = 'full' | 'fixed';
  * tela toda) são do Cristal, nas faixas usuais de drawer.
  */
 type DrawerSize = 'small' | 'medium' | 'large' | 'full';
-interface DrawerProps {
+/** Controle do Drawer pela ref: o elemento só existe com a gaveta aberta. */
+interface DrawerHandle {
+    /** A raiz da gaveta, o role=dialog (null fechada). */
+    getElement: () => HTMLDivElement | null;
+}
+interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'content'> {
     visible: boolean;
     /** Pedido para fechar (X, Esc ou clique no overlay). */
     onHide: () => void;
@@ -269,7 +275,7 @@ interface DrawerProps {
     id?: string;
     className?: string;
 }
-declare function Drawer({ visible, onHide, title, subtitle, side, behavior, size, modal, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<DrawerHandle>>;
 
 /** Type no Figma: Plain (rótulo curto, uma linha) e Rich (texto de até 300px, quebra linha). */
 type TooltipType = 'plain' | 'rich';
@@ -339,7 +345,7 @@ interface MenuItem {
     id?: string;
     className?: string;
 }
-interface MenuProps {
+interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     model: MenuItem[];
     density?: MenuDensity;
     /** Abre sobre a tela, posicionado no elemento que chamou `toggle`/`show` pela ref. */
@@ -391,7 +397,7 @@ interface MenubarUser {
     /** URL da foto. Sem foto, o avatar mostra a inicial do nome (Type=No Image). */
     avatar?: string;
 }
-interface MenubarProps {
+interface MenubarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Logo à esquerda (.Nav Logo no Figma); o padrão é o logo da Vector. */
     logo?: ReactNode;
     /** Menu principal aberto: deixa o botão de menu no estado Active. */
@@ -430,6 +436,8 @@ interface MenuPrincipalItem {
     icon: ReactNode;
     /** Texto da tag no canto (Show Tag no Figma, onde é "Experimente"). */
     tag?: string;
+    /** Ícone da tag. Padrão: DribbbleLogo, o do Figma. */
+    tagIcon?: ReactNode;
     /** Ação do item; o menu popup fecha depois dela. */
     command?: (event: MenuItemCommandEvent) => void;
     /** Link do item; sem ele o clique não navega. */
@@ -446,7 +454,7 @@ interface MenuPrincipalGroup {
     id?: string;
 }
 type MenuPrincipalEntry = MenuPrincipalItem | MenuPrincipalGroup;
-interface MenuPrincipalProps {
+interface MenuPrincipalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Itens soltos e grupos, na ordem; o divisor tracejado entra antes e depois de cada grupo. */
     model: MenuPrincipalEntry[];
     /** Abre sobre a tela, posicionado no elemento que chamou `toggle`/`show` pela ref. */
@@ -470,7 +478,7 @@ declare const MenuPrincipal: react.ForwardRefExoticComponent<MenuPrincipalProps
 
 /** Type no Figma. */
 type MessageType = 'info' | 'warning' | 'success' | 'danger' | 'highlight' | 'neutral';
-interface MessageProps {
+interface MessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'content'> {
     /** Padrão: info. */
     type?: MessageType;
     /** Texto (Message no Figma). */
@@ -487,10 +495,20 @@ declare const Message: react.ForwardRefExoticComponent<MessageProps & react.RefA
  * vira tela cheia, como o Responsive=360 do Figma).
  */
 type ModalSize = 'small' | 'medium' | 'large';
-interface ModalProps {
+/** Controle do Modal pela ref: o elemento só existe com o modal aberto. */
+interface ModalHandle {
+    /** O role=dialog do modal (null fechado). */
+    getElement: () => HTMLDivElement | null;
+}
+interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'content' | 'onClick'> {
     visible: boolean;
-    /** Pedido para fechar (X ou Esc). */
+    /** Pedido para fechar (X, Esc ou clique fora, com dismissableMask). */
     onHide: () => void;
+    /**
+     * Fecha com o clique no overlay, fora do modal. Padrão: true, como o Drawer. Desligue quando
+     * fechar por engano faz perder algo (formulário preenchido, confirmação importante).
+     */
+    dismissableMask?: boolean;
     /** Título do cabeçalho; também é o nome acessível do modal. */
     title: string;
     /** Padrão: large. */
@@ -507,7 +525,7 @@ interface ModalProps {
     id?: string;
     className?: string;
 }
-declare function Modal({ visible, onHide, title, size, onHelp, helpLabel, closeLabel, footer, footerStart, children, id, className, }: ModalProps): react.JSX.Element;
+declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<ModalHandle>>;
 
 /** Type no Figma: Outline (com borda) e Filled (com fundo). */
 type MultiSelectVariant = 'outline' | 'filled';
@@ -515,7 +533,11 @@ type MultiSelectVariant = 'outline' | 'filled';
 type MultiSelectSize = 'xsmall' | 'small' | 'medium' | 'large';
 /** Density da lista no Figma: itens de 40px (normal) ou 32px (compact). */
 type MultiSelectDensity = 'normal' | 'compact';
-interface MultiSelectProps {
+/**
+ * As demais props vão para o MultiSelect do Prime: as aria-* no combobox (aria-describedby soma com
+ * a dica) e o resto na caixa do campo.
+ */
+interface MultiSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'children' | 'placeholder'> {
     variant?: MultiSelectVariant;
     size?: MultiSelectSize;
     density?: MultiSelectDensity;
@@ -618,7 +640,7 @@ interface PaginatorPageChangeEvent {
     page: number;
     pageCount: number;
 }
-interface PaginatorProps {
+interface PaginatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     totalRecords: number;
     /** Índice do primeiro item da página (controlado). Sem ele, o Paginator controla sozinho. */
     first?: number;
@@ -641,7 +663,8 @@ declare const Panel: react.ForwardRefExoticComponent<PanelProps & react.RefAttri
 
 /** Label Size no Figma: Default (uma linha, com reticências) e Full (quebra em várias linhas). */
 type RadioLabelSize = 'default' | 'full';
-interface RadioProps {
+/** As demais props vão no <input> (aria-describedby, onBlur, data-*...); className e style, na raiz. */
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'checked' | 'defaultChecked' | 'defaultValue' | 'size' | 'type' | 'children'> {
     /** Texto ao lado do controle (Label no Figma). Sem rótulo visível, vira o nome acessível. */
     label: ReactNode;
     /** Mostra o rótulo. Padrão: true. */
@@ -663,7 +686,7 @@ interface RadioProps {
 }
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
-interface ScrollPanelProps {
+interface ScrollPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     children?: ReactNode;
     /** O que a área mostra, para o leitor de tela (ex.: "Histórico da carga"). */
     'aria-label'?: string;
@@ -687,7 +710,7 @@ interface SegmentControlOption {
     icon?: ReactNode;
     disabled?: boolean;
 }
-interface SegmentControlProps {
+interface SegmentControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange' | 'defaultValue' | 'unselectable'> {
     options: SegmentControlOption[];
     /** Valor do segmento ativo (controlado). */
     value?: string | number;
@@ -706,7 +729,11 @@ declare const SegmentControl: react.ForwardRefExoticComponent<SegmentControlProp
 type SelectVariant = 'outline' | 'filled';
 /** Size no Figma: 32, 36, 42 e 48px de altura do campo. */
 type SelectSize = 'xsmall' | 'small' | 'medium' | 'large';
-interface SelectProps {
+/**
+ * As demais props vão para o Dropdown do Prime: as aria-* no combobox (aria-describedby soma com a
+ * dica) e o resto na caixa do campo.
+ */
+interface SelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'children' | 'placeholder'> {
     variant?: SelectVariant;
     size?: SelectSize;
     /** Rótulo acima do campo (Label no Figma). Sem rótulo, passe `aria-label`. */
@@ -740,7 +767,8 @@ declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAtt
 type SwitchSize = 'medium' | 'small';
 /** Label Position no Figma: lado do rótulo em relação ao switch. */
 type SwitchLabelPosition = 'right' | 'left';
-interface SwitchProps {
+/** As demais props vão no <input> (aria-describedby, onBlur, data-*...); className e style, na raiz. */
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'checked' | 'defaultChecked' | 'defaultValue' | 'size' | 'type' | 'children'> {
     /** Texto ao lado do switch (Label no Figma). Sem rótulo visível, vira o nome acessível. */
     label: ReactNode;
     /** Mostra o rótulo. Padrão: true. */
@@ -775,7 +803,7 @@ interface TabPanelProps {
 }
 /** Só descreve a aba: quem desenha é o Tabs. */
 declare function TabPanel(_props: TabPanelProps): null;
-interface TabsProps {
+interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Aba ativa (controlado). Sem ela, o Tabs controla sozinho. */
     activeIndex?: number;
     onTabChange?: (index: number) => void;
@@ -833,4 +861,4 @@ interface ToastProps {
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<ToastHandle>>;
 
 export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Chart, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Toast, Tooltip };
-export type { AccordionProps, AccordionTabProps, AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardPadding, CardProps, ChartAxis, ChartColor, ChartProps, ChartSeries, CheckboxLabelSize, CheckboxPosition, CheckboxProps, ChipProps, ChipSize, ChipVariant, DividerOrientation, DividerProps, DividerVariant, DrawerBehavior, DrawerProps, DrawerSide, DrawerSize, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuPrincipalEntry, MenuPrincipalGroup, MenuPrincipalHandle, MenuPrincipalItem, MenuPrincipalProps, MenuProps, MenubarProps, MenubarTool, MenubarUser, MessageProps, MessageType, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PageHeaderProps, PageHeaderTab, PageHeaderVariant, PaginatorPageChangeEvent, PaginatorProps, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };
+export type { AccordionProps, AccordionTabProps, AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardPadding, CardProps, ChartAxis, ChartColor, ChartProps, ChartSeries, CheckboxLabelSize, CheckboxPosition, CheckboxProps, ChipProps, ChipSize, ChipVariant, DividerOrientation, DividerProps, DividerVariant, DrawerBehavior, DrawerHandle, DrawerProps, DrawerSide, DrawerSize, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuPrincipalEntry, MenuPrincipalGroup, MenuPrincipalHandle, MenuPrincipalItem, MenuPrincipalProps, MenuProps, MenubarProps, MenubarTool, MenubarUser, MessageProps, MessageType, ModalHandle, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PageHeaderProps, PageHeaderTab, PageHeaderVariant, PaginatorPageChangeEvent, PaginatorProps, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, InputHTMLAttributes, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, RefObject, SyntheticEvent, MouseEvent } from 'react';
+import { HTMLAttributes, ReactNode, InputHTMLAttributes, ButtonHTMLAttributes, CSSProperties, RefObject, SyntheticEvent, MouseEvent } from 'react';
 import { AutoCompleteProps as AutoCompleteProps$1 } from 'primereact/autocomplete';
 import { CheckboxChangeEvent } from 'primereact/checkbox';
 import { ChipRemoveEvent } from 'primereact/chip';
@@ -22,7 +22,7 @@ interface AccordionTabProps {
 }
 /** Só descreve o item: quem desenha é o Accordion. */
 declare function AccordionTab(_props: AccordionTabProps): null;
-interface AccordionProps {
+interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Mais de um item aberto ao mesmo tempo. */
     multiple?: boolean;
     /**
@@ -139,7 +139,7 @@ interface ChartAxis {
     /** Distância entre as marcas (ex.: 50). */
     stepSize?: number;
 }
-interface ChartProps {
+interface ChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children'> {
     /** Linhas com área (Chart / Line) ou barras (Chart / Bar). Padrão: line. */
     type?: 'line' | 'bar';
     /** Barras empilhadas: as séries somam numa barra só por rótulo. */
@@ -164,13 +164,14 @@ interface ChartProps {
     id?: string;
     className?: string;
 }
-declare function Chart({ type, stacked, labels, series, yAxis, y2Axis, title, help, helpLabel, actions, height, id, className, }: ChartProps): react.JSX.Element;
+declare const Chart: react.ForwardRefExoticComponent<ChartProps & react.RefAttributes<HTMLDivElement>>;
 
 /** Label Position no Figma: lado da caixa em relação ao rótulo. */
 type CheckboxPosition = 'left' | 'right';
 /** Label Type no Figma: Default (uma linha, com reticências) e Full (quebra em várias linhas). */
 type CheckboxLabelSize = 'default' | 'full';
-interface CheckboxProps {
+/** As demais props vão no <input> (aria-describedby, onBlur, data-*...); className e style, na raiz. */
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'checked' | 'defaultChecked' | 'defaultValue' | 'size' | 'type' | 'children'> {
     /** Texto ao lado da caixa (Label no Figma). Sem rótulo visível, vira o nome acessível. */
     label: ReactNode;
     /** Mostra o rótulo. Padrão: true. */
@@ -240,7 +241,12 @@ type DrawerBehavior = 'full' | 'fixed';
  * tela toda) são do Cristal, nas faixas usuais de drawer.
  */
 type DrawerSize = 'small' | 'medium' | 'large' | 'full';
-interface DrawerProps {
+/** Controle do Drawer pela ref: o elemento só existe com a gaveta aberta. */
+interface DrawerHandle {
+    /** A raiz da gaveta, o role=dialog (null fechada). */
+    getElement: () => HTMLDivElement | null;
+}
+interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'content'> {
     visible: boolean;
     /** Pedido para fechar (X, Esc ou clique no overlay). */
     onHide: () => void;
@@ -269,7 +275,7 @@ interface DrawerProps {
     id?: string;
     className?: string;
 }
-declare function Drawer({ visible, onHide, title, subtitle, side, behavior, size, modal, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
+declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<DrawerHandle>>;
 
 /** Type no Figma: Plain (rótulo curto, uma linha) e Rich (texto de até 300px, quebra linha). */
 type TooltipType = 'plain' | 'rich';
@@ -339,7 +345,7 @@ interface MenuItem {
     id?: string;
     className?: string;
 }
-interface MenuProps {
+interface MenuProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     model: MenuItem[];
     density?: MenuDensity;
     /** Abre sobre a tela, posicionado no elemento que chamou `toggle`/`show` pela ref. */
@@ -391,7 +397,7 @@ interface MenubarUser {
     /** URL da foto. Sem foto, o avatar mostra a inicial do nome (Type=No Image). */
     avatar?: string;
 }
-interface MenubarProps {
+interface MenubarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Logo à esquerda (.Nav Logo no Figma); o padrão é o logo da Vector. */
     logo?: ReactNode;
     /** Menu principal aberto: deixa o botão de menu no estado Active. */
@@ -430,6 +436,8 @@ interface MenuPrincipalItem {
     icon: ReactNode;
     /** Texto da tag no canto (Show Tag no Figma, onde é "Experimente"). */
     tag?: string;
+    /** Ícone da tag. Padrão: DribbbleLogo, o do Figma. */
+    tagIcon?: ReactNode;
     /** Ação do item; o menu popup fecha depois dela. */
     command?: (event: MenuItemCommandEvent) => void;
     /** Link do item; sem ele o clique não navega. */
@@ -446,7 +454,7 @@ interface MenuPrincipalGroup {
     id?: string;
 }
 type MenuPrincipalEntry = MenuPrincipalItem | MenuPrincipalGroup;
-interface MenuPrincipalProps {
+interface MenuPrincipalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Itens soltos e grupos, na ordem; o divisor tracejado entra antes e depois de cada grupo. */
     model: MenuPrincipalEntry[];
     /** Abre sobre a tela, posicionado no elemento que chamou `toggle`/`show` pela ref. */
@@ -470,7 +478,7 @@ declare const MenuPrincipal: react.ForwardRefExoticComponent<MenuPrincipalProps
 
 /** Type no Figma. */
 type MessageType = 'info' | 'warning' | 'success' | 'danger' | 'highlight' | 'neutral';
-interface MessageProps {
+interface MessageProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'content'> {
     /** Padrão: info. */
     type?: MessageType;
     /** Texto (Message no Figma). */
@@ -487,10 +495,20 @@ declare const Message: react.ForwardRefExoticComponent<MessageProps & react.RefA
  * vira tela cheia, como o Responsive=360 do Figma).
  */
 type ModalSize = 'small' | 'medium' | 'large';
-interface ModalProps {
+/** Controle do Modal pela ref: o elemento só existe com o modal aberto. */
+interface ModalHandle {
+    /** O role=dialog do modal (null fechado). */
+    getElement: () => HTMLDivElement | null;
+}
+interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'children' | 'content' | 'onClick'> {
     visible: boolean;
-    /** Pedido para fechar (X ou Esc). */
+    /** Pedido para fechar (X, Esc ou clique fora, com dismissableMask). */
     onHide: () => void;
+    /**
+     * Fecha com o clique no overlay, fora do modal. Padrão: true, como o Drawer. Desligue quando
+     * fechar por engano faz perder algo (formulário preenchido, confirmação importante).
+     */
+    dismissableMask?: boolean;
     /** Título do cabeçalho; também é o nome acessível do modal. */
     title: string;
     /** Padrão: large. */
@@ -507,7 +525,7 @@ interface ModalProps {
     id?: string;
     className?: string;
 }
-declare function Modal({ visible, onHide, title, size, onHelp, helpLabel, closeLabel, footer, footerStart, children, id, className, }: ModalProps): react.JSX.Element;
+declare const Modal: react.ForwardRefExoticComponent<ModalProps & react.RefAttributes<ModalHandle>>;
 
 /** Type no Figma: Outline (com borda) e Filled (com fundo). */
 type MultiSelectVariant = 'outline' | 'filled';
@@ -515,7 +533,11 @@ type MultiSelectVariant = 'outline' | 'filled';
 type MultiSelectSize = 'xsmall' | 'small' | 'medium' | 'large';
 /** Density da lista no Figma: itens de 40px (normal) ou 32px (compact). */
 type MultiSelectDensity = 'normal' | 'compact';
-interface MultiSelectProps {
+/**
+ * As demais props vão para o MultiSelect do Prime: as aria-* no combobox (aria-describedby soma com
+ * a dica) e o resto na caixa do campo.
+ */
+interface MultiSelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'children' | 'placeholder'> {
     variant?: MultiSelectVariant;
     size?: MultiSelectSize;
     density?: MultiSelectDensity;
@@ -618,7 +640,7 @@ interface PaginatorPageChangeEvent {
     page: number;
     pageCount: number;
 }
-interface PaginatorProps {
+interface PaginatorProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     totalRecords: number;
     /** Índice do primeiro item da página (controlado). Sem ele, o Paginator controla sozinho. */
     first?: number;
@@ -641,7 +663,8 @@ declare const Panel: react.ForwardRefExoticComponent<PanelProps & react.RefAttri
 
 /** Label Size no Figma: Default (uma linha, com reticências) e Full (quebra em várias linhas). */
 type RadioLabelSize = 'default' | 'full';
-interface RadioProps {
+/** As demais props vão no <input> (aria-describedby, onBlur, data-*...); className e style, na raiz. */
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'checked' | 'defaultChecked' | 'defaultValue' | 'size' | 'type' | 'children'> {
     /** Texto ao lado do controle (Label no Figma). Sem rótulo visível, vira o nome acessível. */
     label: ReactNode;
     /** Mostra o rótulo. Padrão: true. */
@@ -663,7 +686,7 @@ interface RadioProps {
 }
 declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
-interface ScrollPanelProps {
+interface ScrollPanelProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     children?: ReactNode;
     /** O que a área mostra, para o leitor de tela (ex.: "Histórico da carga"). */
     'aria-label'?: string;
@@ -687,7 +710,7 @@ interface SegmentControlOption {
     icon?: ReactNode;
     disabled?: boolean;
 }
-interface SegmentControlProps {
+interface SegmentControlProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'onChange' | 'defaultValue' | 'unselectable'> {
     options: SegmentControlOption[];
     /** Valor do segmento ativo (controlado). */
     value?: string | number;
@@ -706,7 +729,11 @@ declare const SegmentControl: react.ForwardRefExoticComponent<SegmentControlProp
 type SelectVariant = 'outline' | 'filled';
 /** Size no Figma: 32, 36, 42 e 48px de altura do campo. */
 type SelectSize = 'xsmall' | 'small' | 'medium' | 'large';
-interface SelectProps {
+/**
+ * As demais props vão para o Dropdown do Prime: as aria-* no combobox (aria-describedby soma com a
+ * dica) e o resto na caixa do campo.
+ */
+interface SelectProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue' | 'children' | 'placeholder'> {
     variant?: SelectVariant;
     size?: SelectSize;
     /** Rótulo acima do campo (Label no Figma). Sem rótulo, passe `aria-label`. */
@@ -740,7 +767,8 @@ declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAtt
 type SwitchSize = 'medium' | 'small';
 /** Label Position no Figma: lado do rótulo em relação ao switch. */
 type SwitchLabelPosition = 'right' | 'left';
-interface SwitchProps {
+/** As demais props vão no <input> (aria-describedby, onBlur, data-*...); className e style, na raiz. */
+interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'checked' | 'defaultChecked' | 'defaultValue' | 'size' | 'type' | 'children'> {
     /** Texto ao lado do switch (Label no Figma). Sem rótulo visível, vira o nome acessível. */
     label: ReactNode;
     /** Mostra o rótulo. Padrão: true. */
@@ -775,7 +803,7 @@ interface TabPanelProps {
 }
 /** Só descreve a aba: quem desenha é o Tabs. */
 declare function TabPanel(_props: TabPanelProps): null;
-interface TabsProps {
+interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /** Aba ativa (controlado). Sem ela, o Tabs controla sozinho. */
     activeIndex?: number;
     onTabChange?: (index: number) => void;
@@ -833,4 +861,4 @@ interface ToastProps {
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<ToastHandle>>;
 
 export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Chart, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Toast, Tooltip };
-export type { AccordionProps, AccordionTabProps, AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardPadding, CardProps, ChartAxis, ChartColor, ChartProps, ChartSeries, CheckboxLabelSize, CheckboxPosition, CheckboxProps, ChipProps, ChipSize, ChipVariant, DividerOrientation, DividerProps, DividerVariant, DrawerBehavior, DrawerProps, DrawerSide, DrawerSize, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuPrincipalEntry, MenuPrincipalGroup, MenuPrincipalHandle, MenuPrincipalItem, MenuPrincipalProps, MenuProps, MenubarProps, MenubarTool, MenubarUser, MessageProps, MessageType, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PageHeaderProps, PageHeaderTab, PageHeaderVariant, PaginatorPageChangeEvent, PaginatorProps, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };
+export type { AccordionProps, AccordionTabProps, AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardPadding, CardProps, ChartAxis, ChartColor, ChartProps, ChartSeries, CheckboxLabelSize, CheckboxPosition, CheckboxProps, ChipProps, ChipSize, ChipVariant, DividerOrientation, DividerProps, DividerVariant, DrawerBehavior, DrawerHandle, DrawerProps, DrawerSide, DrawerSize, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuPrincipalEntry, MenuPrincipalGroup, MenuPrincipalHandle, MenuPrincipalItem, MenuPrincipalProps, MenuProps, MenubarProps, MenubarTool, MenubarUser, MessageProps, MessageType, ModalHandle, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PageHeaderProps, PageHeaderTab, PageHeaderVariant, PaginatorPageChangeEvent, PaginatorProps, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };