@vector-business-services/cristal-ds-web 0.3.0 → 0.5.0

package/dist/index.d.cts

@@ -1,8 +1,11 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode, HTMLAttributes, ButtonHTMLAttributes, SyntheticEvent, MouseEvent, RefObject } from 'react';
+import { InputHTMLAttributes, ReactNode, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, SyntheticEvent, MouseEvent, RefObject } from 'react';
 import { AutoCompleteProps as AutoCompleteProps$1 } from 'primereact/autocomplete';
+import { CheckboxChangeEvent } from 'primereact/checkbox';
 import { ChipRemoveEvent } from 'primereact/chip';
 import { MenuItemCommandEvent } from 'primereact/menuitem';
+import { RadioButtonChangeEvent } from 'primereact/radiobutton';
+import { InputSwitchChangeEvent } from 'primereact/inputswitch';
 
 /** Type no Figma: Outline (com borda) e Filled (com fundo). */
 type InputVariant = 'outline' | 'filled';
@@ -68,6 +71,43 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
+/** Padding no Figma: X-Small (8px), Small (12px), Medium (16px), Large (20px) e X-Large (24px). */
+type CardPadding = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    padding?: CardPadding;
+    /** Outline no Figma: borda de 1px em stroke/neutral/base. */
+    outline?: boolean;
+}
+declare const Card: react.ForwardRefExoticComponent<CardProps & 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 {
+    /** 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. */
+    showLabel?: boolean;
+    /** Lado da caixa. Padrão: left. */
+    position?: CheckboxPosition;
+    /** Padrão: default. */
+    labelSize?: CheckboxLabelSize;
+    checked?: boolean;
+    /** Type=Indeterminate no Figma: traço no lugar do check; o leitor de tela anuncia "misto". */
+    indeterminate?: boolean;
+    onChange?: (event: CheckboxChangeEvent) => void;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: unknown;
+    /** Vai no <input>. */
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
 /** Type no Figma. */
 type ChipVariant = 'default' | 'success' | 'danger' | 'warning' | 'info' | 'highlight' | 'inverse' | 'outline' | 'neutral' | 'on-image';
 /** Size no Figma: small = 24px, medium = 28px, large = 32px, x-large = 36px de altura. */
@@ -102,6 +142,37 @@ interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>
 }
 declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
 
+/** Side no Figma: de que lado da tela a gaveta abre. */
+type DrawerSide = 'right' | 'left';
+/**
+ * Behavior no Figma: Full Body (tudo rola junto) ou Fixed Body (cabeçalho e rodapé fixos, só o
+ * corpo rola).
+ */
+type DrawerBehavior = 'full' | 'fixed';
+interface DrawerProps {
+    visible: boolean;
+    /** Pedido para fechar (X, Esc ou clique no overlay). */
+    onHide: () => void;
+    /** Título do cabeçalho; também é o nome acessível da gaveta. */
+    title: string;
+    /** Subtítulo descritivo, até 2 linhas. */
+    subtitle?: ReactNode;
+    /** Padrão: right. */
+    side?: DrawerSide;
+    /** Padrão: full. */
+    behavior?: DrawerBehavior;
+    /** Mostra o botão de voltar antes do título. */
+    onBack?: () => void;
+    backLabel?: string;
+    closeLabel?: string;
+    /** Botões do rodapé, alinhados à direita. */
+    footer?: ReactNode;
+    children?: ReactNode;
+    id?: string;
+    className?: string;
+}
+declare function Drawer({ visible, onHide, title, subtitle, side, behavior, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
+
 /**
  * Hierarchy no Figma: Primary (Filled), Secondary (Tonal), Tertiary (Outlined) e Other (Icon),
  * que aqui é `ghost`: só o ícone, com fundo no hover.
@@ -218,6 +289,33 @@ interface MenubarProps {
 }
 declare const Menubar: react.ForwardRefExoticComponent<MenubarProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Size no Figma: Small (520px), Medium (768px) e Large (1200 x 720px; abaixo de 768px de tela
+ * vira tela cheia, como o Responsive=360 do Figma).
+ */
+type ModalSize = 'small' | 'medium' | 'large';
+interface ModalProps {
+    visible: boolean;
+    /** Pedido para fechar (X ou Esc). */
+    onHide: () => void;
+    /** Título do cabeçalho; também é o nome acessível do modal. */
+    title: string;
+    /** Padrão: large. */
+    size?: ModalSize;
+    /** Mostra o botão de ajuda (QuestionMark) ao lado do X, no small e no medium. */
+    onHelp?: () => void;
+    helpLabel?: string;
+    closeLabel?: string;
+    /** Botões do rodapé, à direita. */
+    footer?: ReactNode;
+    /** Conteúdo do rodapé à esquerda (ex.: o botão secundário dos Two/Tree Buttons do Figma). */
+    footerStart?: ReactNode;
+    children?: ReactNode;
+    id?: string;
+    className?: string;
+}
+declare function Modal({ visible, onHide, title, size, onHelp, helpLabel, closeLabel, footer, footerStart, children, id, className, }: ModalProps): react.JSX.Element;
+
 /** Type no Figma: Outline (com borda) e Filled (com fundo). */
 type MultiSelectVariant = 'outline' | 'filled';
 /** Size no Figma: 32, 36, 42 e 48px de altura do campo. */
@@ -270,6 +368,156 @@ interface MultiSelectProps {
 }
 declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLInputElement>>;
 
+type PanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'onToggle'>;
+declare const Panel: react.ForwardRefExoticComponent<PanelProps & react.RefAttributes<HTMLDivElement>>;
+
+/** Label Size no Figma: Default (uma linha, com reticências) e Full (quebra em várias linhas). */
+type RadioLabelSize = 'default' | 'full';
+interface RadioProps {
+    /** 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. */
+    showLabel?: boolean;
+    /** Padrão: default. */
+    labelSize?: RadioLabelSize;
+    checked?: boolean;
+    /** Valor da opção, devolvido no `onChange`. */
+    value?: unknown;
+    /** Nome do grupo: radios com o mesmo `name` se excluem e navegam pelas setas. */
+    name?: string;
+    onChange?: (event: RadioButtonChangeEvent) => void;
+    disabled?: boolean;
+    required?: boolean;
+    /** Vai no <input>. */
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ScrollPanelProps {
+    children?: ReactNode;
+    /** O que a área mostra, para o leitor de tela (ex.: "Histórico da carga"). */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** Dê uma altura (ou max-height) para a área rolar. */
+    style?: CSSProperties;
+    id?: string;
+    className?: string;
+}
+declare const ScrollPanel: react.ForwardRefExoticComponent<ScrollPanelProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * No Figma: Primary é o Header Segment Control (pílula em fill/brand/subtlest) e Secondary é o
+ * Segment Control (cinza, com ícones).
+ */
+type SegmentControlVariant = 'primary' | 'secondary';
+interface SegmentControlOption {
+    label: string;
+    value: string | number;
+    /** Ícone de 16px antes do texto (o Secondary do Figma usa). */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface SegmentControlProps {
+    options: SegmentControlOption[];
+    /** Valor do segmento ativo (controlado). */
+    value?: string | number;
+    onChange?: (value: string | number) => void;
+    variant?: SegmentControlVariant;
+    /** O que o grupo controla, para o leitor de tela (ex.: "Visualização"). */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+}
+declare const SegmentControl: react.ForwardRefExoticComponent<SegmentControlProps & react.RefAttributes<HTMLDivElement>>;
+
+/** Type no Figma: Outline (com borda) e Filled (com fundo). */
+type SelectVariant = 'outline' | 'filled';
+/** Size no Figma: 32, 36, 42 e 48px de altura do campo. */
+type SelectSize = 'xsmall' | 'small' | 'medium' | 'large';
+interface SelectProps {
+    variant?: SelectVariant;
+    size?: SelectSize;
+    /** Rótulo acima do campo (Label no Figma). Sem rótulo, passe `aria-label`. */
+    label?: string;
+    'aria-label'?: string;
+    /** Opções da lista. */
+    options: unknown[];
+    /** Campo da opção usado como texto (padrão: `label`). */
+    optionLabel?: string;
+    /** Campo da opção usado como valor; sem ele, o valor é a própria opção. */
+    optionValue?: string;
+    /** Valor selecionado (controlado). */
+    value?: unknown;
+    onChange?: (value: unknown) => void;
+    /** Texto do campo vazio (Field Text no Figma). */
+    placeholder?: string;
+    /** Dica abaixo do campo (Hint Info no Figma). */
+    hint?: string;
+    /** Mensagem de erro: deixa o campo no estado Error e mostra a dica de erro no lugar da dica. */
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Vai no campo (combobox). */
+    id?: string;
+    name?: string;
+    className?: string;
+}
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLInputElement>>;
+
+/** Size no Figma: Medium (48x28) e Small (32x20). */
+type SwitchSize = 'medium' | 'small';
+/** Label Position no Figma: lado do rótulo em relação ao switch. */
+type SwitchLabelPosition = 'right' | 'left';
+interface SwitchProps {
+    /** 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. */
+    showLabel?: boolean;
+    /** Padrão: right. */
+    labelPosition?: SwitchLabelPosition;
+    /** Padrão: medium. */
+    size?: SwitchSize;
+    checked?: boolean;
+    onChange?: (event: InputSwitchChangeEvent) => void;
+    disabled?: boolean;
+    name?: string;
+    /** Vai no <input>. */
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
+
+/** Uma aba (.Tab Item no Figma) e o conteúdo dela. */
+interface TabPanelProps {
+    /** Texto da aba (Label no Figma). */
+    header: string;
+    /** Ícone antes do texto (Leading Icon no Figma). */
+    leftIcon?: ReactNode;
+    /** Contador depois do texto (Badge no Figma). */
+    badge?: ReactNode;
+    /** Mostra o X (Tab Btn no Figma) e é chamado ao fechar a aba (clique no X ou Delete na aba). */
+    onClose?: () => void;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+/** Só descreve a aba: quem desenha é o Tabs. */
+declare function TabPanel(_props: TabPanelProps): null;
+interface TabsProps {
+    /** Aba ativa (controlado). Sem ela, o Tabs controla sozinho. */
+    activeIndex?: number;
+    onTabChange?: (index: number) => void;
+    /** As abas, como `<TabPanel>`. */
+    children: ReactNode;
+    id?: string;
+    className?: string;
+}
+declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
+
 /** Type no Figma. */
 type TagVariant = 'default' | 'success' | 'warning' | 'danger' | 'info' | 'purple' | 'gray' | 'inverse' | 'outline';
 /** Size no Figma: small = 24px, medium = 28px, large = 32px, x-large = 36px de altura. */
@@ -305,5 +553,5 @@ interface TooltipProps {
 }
 declare function Tooltip({ target, content, type, position, event, showDelay, hideDelay, disabled, id, className, }: TooltipProps): react.JSX.Element;
 
-export { AutoComplete, Badge, Button, Chip, Divider, IconButton, Input, Menu, Menubar, MultiSelect, Tag, Tooltip };
-export type { AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, ChipProps, ChipSize, ChipVariant, DividerOrientation, DividerProps, DividerVariant, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuProps, MenubarProps, MenubarTool, MenubarUser, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, TagProps, TagSize, TagVariant, TooltipPosition, TooltipProps, TooltipType };
+export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, Menubar, Modal, MultiSelect, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Tooltip };
+export type { AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardPadding, CardProps, CheckboxLabelSize, CheckboxPosition, CheckboxProps, ChipProps, ChipSize, ChipVariant, DividerOrientation, DividerProps, DividerVariant, DrawerBehavior, DrawerProps, DrawerSide, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuProps, MenubarProps, MenubarTool, MenubarUser, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, TooltipPosition, TooltipProps, TooltipType };

package/dist/index.d.ts

@@ -1,8 +1,11 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode, HTMLAttributes, ButtonHTMLAttributes, SyntheticEvent, MouseEvent, RefObject } from 'react';
+import { InputHTMLAttributes, ReactNode, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, SyntheticEvent, MouseEvent, RefObject } from 'react';
 import { AutoCompleteProps as AutoCompleteProps$1 } from 'primereact/autocomplete';
+import { CheckboxChangeEvent } from 'primereact/checkbox';
 import { ChipRemoveEvent } from 'primereact/chip';
 import { MenuItemCommandEvent } from 'primereact/menuitem';
+import { RadioButtonChangeEvent } from 'primereact/radiobutton';
+import { InputSwitchChangeEvent } from 'primereact/inputswitch';
 
 /** Type no Figma: Outline (com borda) e Filled (com fundo). */
 type InputVariant = 'outline' | 'filled';
@@ -68,6 +71,43 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
+/** Padding no Figma: X-Small (8px), Small (12px), Medium (16px), Large (20px) e X-Large (24px). */
+type CardPadding = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    padding?: CardPadding;
+    /** Outline no Figma: borda de 1px em stroke/neutral/base. */
+    outline?: boolean;
+}
+declare const Card: react.ForwardRefExoticComponent<CardProps & 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 {
+    /** 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. */
+    showLabel?: boolean;
+    /** Lado da caixa. Padrão: left. */
+    position?: CheckboxPosition;
+    /** Padrão: default. */
+    labelSize?: CheckboxLabelSize;
+    checked?: boolean;
+    /** Type=Indeterminate no Figma: traço no lugar do check; o leitor de tela anuncia "misto". */
+    indeterminate?: boolean;
+    onChange?: (event: CheckboxChangeEvent) => void;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: unknown;
+    /** Vai no <input>. */
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
 /** Type no Figma. */
 type ChipVariant = 'default' | 'success' | 'danger' | 'warning' | 'info' | 'highlight' | 'inverse' | 'outline' | 'neutral' | 'on-image';
 /** Size no Figma: small = 24px, medium = 28px, large = 32px, x-large = 36px de altura. */
@@ -102,6 +142,37 @@ interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'>
 }
 declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
 
+/** Side no Figma: de que lado da tela a gaveta abre. */
+type DrawerSide = 'right' | 'left';
+/**
+ * Behavior no Figma: Full Body (tudo rola junto) ou Fixed Body (cabeçalho e rodapé fixos, só o
+ * corpo rola).
+ */
+type DrawerBehavior = 'full' | 'fixed';
+interface DrawerProps {
+    visible: boolean;
+    /** Pedido para fechar (X, Esc ou clique no overlay). */
+    onHide: () => void;
+    /** Título do cabeçalho; também é o nome acessível da gaveta. */
+    title: string;
+    /** Subtítulo descritivo, até 2 linhas. */
+    subtitle?: ReactNode;
+    /** Padrão: right. */
+    side?: DrawerSide;
+    /** Padrão: full. */
+    behavior?: DrawerBehavior;
+    /** Mostra o botão de voltar antes do título. */
+    onBack?: () => void;
+    backLabel?: string;
+    closeLabel?: string;
+    /** Botões do rodapé, alinhados à direita. */
+    footer?: ReactNode;
+    children?: ReactNode;
+    id?: string;
+    className?: string;
+}
+declare function Drawer({ visible, onHide, title, subtitle, side, behavior, onBack, backLabel, closeLabel, footer, children, id, className, }: DrawerProps): react.JSX.Element;
+
 /**
  * Hierarchy no Figma: Primary (Filled), Secondary (Tonal), Tertiary (Outlined) e Other (Icon),
  * que aqui é `ghost`: só o ícone, com fundo no hover.
@@ -218,6 +289,33 @@ interface MenubarProps {
 }
 declare const Menubar: react.ForwardRefExoticComponent<MenubarProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Size no Figma: Small (520px), Medium (768px) e Large (1200 x 720px; abaixo de 768px de tela
+ * vira tela cheia, como o Responsive=360 do Figma).
+ */
+type ModalSize = 'small' | 'medium' | 'large';
+interface ModalProps {
+    visible: boolean;
+    /** Pedido para fechar (X ou Esc). */
+    onHide: () => void;
+    /** Título do cabeçalho; também é o nome acessível do modal. */
+    title: string;
+    /** Padrão: large. */
+    size?: ModalSize;
+    /** Mostra o botão de ajuda (QuestionMark) ao lado do X, no small e no medium. */
+    onHelp?: () => void;
+    helpLabel?: string;
+    closeLabel?: string;
+    /** Botões do rodapé, à direita. */
+    footer?: ReactNode;
+    /** Conteúdo do rodapé à esquerda (ex.: o botão secundário dos Two/Tree Buttons do Figma). */
+    footerStart?: ReactNode;
+    children?: ReactNode;
+    id?: string;
+    className?: string;
+}
+declare function Modal({ visible, onHide, title, size, onHelp, helpLabel, closeLabel, footer, footerStart, children, id, className, }: ModalProps): react.JSX.Element;
+
 /** Type no Figma: Outline (com borda) e Filled (com fundo). */
 type MultiSelectVariant = 'outline' | 'filled';
 /** Size no Figma: 32, 36, 42 e 48px de altura do campo. */
@@ -270,6 +368,156 @@ interface MultiSelectProps {
 }
 declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLInputElement>>;
 
+type PanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'onToggle'>;
+declare const Panel: react.ForwardRefExoticComponent<PanelProps & react.RefAttributes<HTMLDivElement>>;
+
+/** Label Size no Figma: Default (uma linha, com reticências) e Full (quebra em várias linhas). */
+type RadioLabelSize = 'default' | 'full';
+interface RadioProps {
+    /** 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. */
+    showLabel?: boolean;
+    /** Padrão: default. */
+    labelSize?: RadioLabelSize;
+    checked?: boolean;
+    /** Valor da opção, devolvido no `onChange`. */
+    value?: unknown;
+    /** Nome do grupo: radios com o mesmo `name` se excluem e navegam pelas setas. */
+    name?: string;
+    onChange?: (event: RadioButtonChangeEvent) => void;
+    disabled?: boolean;
+    required?: boolean;
+    /** Vai no <input>. */
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface ScrollPanelProps {
+    children?: ReactNode;
+    /** O que a área mostra, para o leitor de tela (ex.: "Histórico da carga"). */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    /** Dê uma altura (ou max-height) para a área rolar. */
+    style?: CSSProperties;
+    id?: string;
+    className?: string;
+}
+declare const ScrollPanel: react.ForwardRefExoticComponent<ScrollPanelProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * No Figma: Primary é o Header Segment Control (pílula em fill/brand/subtlest) e Secondary é o
+ * Segment Control (cinza, com ícones).
+ */
+type SegmentControlVariant = 'primary' | 'secondary';
+interface SegmentControlOption {
+    label: string;
+    value: string | number;
+    /** Ícone de 16px antes do texto (o Secondary do Figma usa). */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface SegmentControlProps {
+    options: SegmentControlOption[];
+    /** Valor do segmento ativo (controlado). */
+    value?: string | number;
+    onChange?: (value: string | number) => void;
+    variant?: SegmentControlVariant;
+    /** O que o grupo controla, para o leitor de tela (ex.: "Visualização"). */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    disabled?: boolean;
+    id?: string;
+    className?: string;
+}
+declare const SegmentControl: react.ForwardRefExoticComponent<SegmentControlProps & react.RefAttributes<HTMLDivElement>>;
+
+/** Type no Figma: Outline (com borda) e Filled (com fundo). */
+type SelectVariant = 'outline' | 'filled';
+/** Size no Figma: 32, 36, 42 e 48px de altura do campo. */
+type SelectSize = 'xsmall' | 'small' | 'medium' | 'large';
+interface SelectProps {
+    variant?: SelectVariant;
+    size?: SelectSize;
+    /** Rótulo acima do campo (Label no Figma). Sem rótulo, passe `aria-label`. */
+    label?: string;
+    'aria-label'?: string;
+    /** Opções da lista. */
+    options: unknown[];
+    /** Campo da opção usado como texto (padrão: `label`). */
+    optionLabel?: string;
+    /** Campo da opção usado como valor; sem ele, o valor é a própria opção. */
+    optionValue?: string;
+    /** Valor selecionado (controlado). */
+    value?: unknown;
+    onChange?: (value: unknown) => void;
+    /** Texto do campo vazio (Field Text no Figma). */
+    placeholder?: string;
+    /** Dica abaixo do campo (Hint Info no Figma). */
+    hint?: string;
+    /** Mensagem de erro: deixa o campo no estado Error e mostra a dica de erro no lugar da dica. */
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    /** Vai no campo (combobox). */
+    id?: string;
+    name?: string;
+    className?: string;
+}
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLInputElement>>;
+
+/** Size no Figma: Medium (48x28) e Small (32x20). */
+type SwitchSize = 'medium' | 'small';
+/** Label Position no Figma: lado do rótulo em relação ao switch. */
+type SwitchLabelPosition = 'right' | 'left';
+interface SwitchProps {
+    /** 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. */
+    showLabel?: boolean;
+    /** Padrão: right. */
+    labelPosition?: SwitchLabelPosition;
+    /** Padrão: medium. */
+    size?: SwitchSize;
+    checked?: boolean;
+    onChange?: (event: InputSwitchChangeEvent) => void;
+    disabled?: boolean;
+    name?: string;
+    /** Vai no <input>. */
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
+
+/** Uma aba (.Tab Item no Figma) e o conteúdo dela. */
+interface TabPanelProps {
+    /** Texto da aba (Label no Figma). */
+    header: string;
+    /** Ícone antes do texto (Leading Icon no Figma). */
+    leftIcon?: ReactNode;
+    /** Contador depois do texto (Badge no Figma). */
+    badge?: ReactNode;
+    /** Mostra o X (Tab Btn no Figma) e é chamado ao fechar a aba (clique no X ou Delete na aba). */
+    onClose?: () => void;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+/** Só descreve a aba: quem desenha é o Tabs. */
+declare function TabPanel(_props: TabPanelProps): null;
+interface TabsProps {
+    /** Aba ativa (controlado). Sem ela, o Tabs controla sozinho. */
+    activeIndex?: number;
+    onTabChange?: (index: number) => void;
+    /** As abas, como `<TabPanel>`. */
+    children: ReactNode;
+    id?: string;
+    className?: string;
+}
+declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
+
 /** Type no Figma. */
 type TagVariant = 'default' | 'success' | 'warning' | 'danger' | 'info' | 'purple' | 'gray' | 'inverse' | 'outline';
 /** Size no Figma: small = 24px, medium = 28px, large = 32px, x-large = 36px de altura. */
@@ -305,5 +553,5 @@ interface TooltipProps {
 }
 declare function Tooltip({ target, content, type, position, event, showDelay, hideDelay, disabled, id, className, }: TooltipProps): react.JSX.Element;
 
-export { AutoComplete, Badge, Button, Chip, Divider, IconButton, Input, Menu, Menubar, MultiSelect, Tag, Tooltip };
-export type { AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, ChipProps, ChipSize, ChipVariant, DividerOrientation, DividerProps, DividerVariant, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuProps, MenubarProps, MenubarTool, MenubarUser, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, TagProps, TagSize, TagVariant, TooltipPosition, TooltipProps, TooltipType };
+export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, Menubar, Modal, MultiSelect, Panel, Radio, ScrollPanel, SegmentControl, Select, Switch, TabPanel, Tabs, Tag, Tooltip };
+export type { AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardPadding, CardProps, CheckboxLabelSize, CheckboxPosition, CheckboxProps, ChipProps, ChipSize, ChipVariant, DividerOrientation, DividerProps, DividerVariant, DrawerBehavior, DrawerProps, DrawerSide, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuProps, MenubarProps, MenubarTool, MenubarUser, ModalProps, ModalSize, MultiSelectDensity, MultiSelectProps, MultiSelectSize, MultiSelectVariant, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, TooltipPosition, TooltipProps, TooltipType };