@vector-business-services/cristal-ds-web 0.8.0 → 0.10.0

package/dist/index.d.cts

@@ -6,6 +6,7 @@ import { ChipRemoveEvent } from 'primereact/chip';
 import { MenuItemCommandEvent } from 'primereact/menuitem';
 import { RadioButtonChangeEvent } from 'primereact/radiobutton';
 import { InputSwitchChangeEvent } from 'primereact/inputswitch';
+import { ToastProps as ToastProps$1 } from 'primereact/toast';
 
 /** Type no Figma: Outline (com borda) e Filled (com fundo). */
 type InputVariant = 'outline' | 'filled';
@@ -349,6 +350,20 @@ interface MenuPrincipalHandle {
 }
 declare const MenuPrincipal: react.ForwardRefExoticComponent<MenuPrincipalProps & react.RefAttributes<MenuPrincipalHandle>>;
 
+/** Type no Figma. */
+type MessageType = 'info' | 'warning' | 'success' | 'danger' | 'highlight' | 'neutral';
+interface MessageProps {
+    /** Padrão: info. */
+    type?: MessageType;
+    /** Texto (Message no Figma). */
+    children: ReactNode;
+    /** Show Icon no Figma. Padrão: true. */
+    showIcon?: boolean;
+    id?: string;
+    className?: string;
+}
+declare const Message: react.ForwardRefExoticComponent<MessageProps & 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).
@@ -428,6 +443,73 @@ interface MultiSelectProps {
 }
 declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLInputElement>>;
 
+/**
+ * Type no Figma: o estilo das abas. Primary tem o ícone em círculo e o fundo azul na aba ativa;
+ * Secondary é só o texto, com o sublinhado na ativa.
+ */
+type PageHeaderVariant = 'primary' | 'secondary';
+/** Uma aba (.Page Header Tab Item ou .Page Header Tab Secondary Item no Figma). */
+interface PageHeaderTab {
+    label: string;
+    /** Ícone de 16px. No primary fica no círculo de 32px; no secondary é opcional. */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Título da página (Page Title no Figma). */
+    title: string;
+    /** Padrão: primary. */
+    variant?: PageHeaderVariant;
+    /** Mostra o botão de voltar antes do título (Show Back Button no Figma). */
+    onBack?: () => void;
+    backLabel?: string;
+    /** Texto da Tag depois do título (Show Tag no Figma). */
+    tag?: ReactNode;
+    /** Segment Control das ferramentas (Show Segment Control no Figma): um `<SegmentControl>`. */
+    segmentControl?: ReactNode;
+    /** Botões das ferramentas (Show Buttons no Figma), 8px entre eles. */
+    actions?: ReactNode;
+    /** Mostra o botão de expandir, o último das ferramentas. */
+    onExpand?: () => void;
+    expandLabel?: string;
+    /** Abas abaixo do título (Show Tabs no Figma). */
+    tabs?: PageHeaderTab[];
+    /** Aba ativa (controlado). Sem ela, o PageHeader controla sozinho. */
+    activeTab?: number;
+    onTabChange?: (index: number) => void;
+    /** Nome das abas para o leitor de tela. Padrão: o título. */
+    tabsLabel?: string;
+}
+declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLDivElement>>;
+
+/** O que o onPageChange recebe (o mesmo evento do Prime). */
+interface PaginatorPageChangeEvent {
+    /** Índice do primeiro item da página. */
+    first: number;
+    /** Itens por página. */
+    rows: number;
+    /** Página, a partir de 0. */
+    page: number;
+    pageCount: number;
+}
+interface PaginatorProps {
+    totalRecords: number;
+    /** Índice do primeiro item da página (controlado). Sem ele, o Paginator controla sozinho. */
+    first?: number;
+    /** Itens por página (controlado). Padrão: o primeiro de rowsPerPageOptions, ou 10. */
+    rows?: number;
+    /** Opções do Select de itens por página; sem elas, o Select não aparece. */
+    rowsPerPageOptions?: number[];
+    /** Quantos números de página aparecem. Padrão: 5, como no Figma. */
+    pageLinkSize?: number;
+    onPageChange?: (event: PaginatorPageChangeEvent) => void;
+    /** Nome do Select para o leitor de tela. */
+    rowsPerPageLabel?: string;
+    id?: string;
+    className?: string;
+}
+declare const Paginator: react.ForwardRefExoticComponent<PaginatorProps & react.RefAttributes<HTMLDivElement>>;
+
 type PanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'onToggle'>;
 declare const Panel: react.ForwardRefExoticComponent<PanelProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -592,6 +674,38 @@ interface TagProps extends HTMLAttributes<HTMLSpanElement> {
 }
 declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
 
+/** Type no Figma. */
+type ToastType = 'warning' | 'danger' | 'success' | 'info';
+/** Onde as mensagens aparecem na tela (o position do Prime). Padrão: top-right. */
+type ToastPosition = NonNullable<ToastProps$1['position']>;
+/** Uma mensagem, passada para `show()`. */
+interface ToastMessage {
+    type: ToastType;
+    /** Title no Figma. */
+    title: string;
+    /** Message no Figma (Show Message content). */
+    message?: string;
+    /** Show Icon no Figma. Padrão: true. */
+    showIcon?: boolean;
+    /** Tempo na tela, em ms. Padrão do Prime: 3000. */
+    life?: number;
+    /** Fica até alguém fechar. */
+    sticky?: boolean;
+}
+/** O que a ref do Toast entrega. */
+interface ToastHandle {
+    show: (message: ToastMessage | ToastMessage[]) => void;
+    clear: () => void;
+}
+interface ToastProps {
+    position?: ToastPosition;
+    /** Nome do X para o leitor de tela. */
+    closeLabel?: string;
+    id?: string;
+    className?: string;
+}
+declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<ToastHandle>>;
+
 /** Type no Figma: Plain (rótulo curto, uma linha) e Rich (texto de até 300px, quebra linha). */
 type TooltipType = 'plain' | 'rich';
 type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
@@ -613,5 +727,5 @@ interface TooltipProps {
 }
 declare function Tooltip({ target, content, type, position, event, showDelay, hideDelay, disabled, id, className, }: TooltipProps): react.JSX.Element;
 
-export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, 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, DrawerSize, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuPrincipalEntry, MenuPrincipalGroup, MenuPrincipalHandle, MenuPrincipalItem, MenuPrincipalProps, 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 };
+export { AutoComplete, Badge, Button, Card, 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 { AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardPadding, CardProps, 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 };

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import { ChipRemoveEvent } from 'primereact/chip';
 import { MenuItemCommandEvent } from 'primereact/menuitem';
 import { RadioButtonChangeEvent } from 'primereact/radiobutton';
 import { InputSwitchChangeEvent } from 'primereact/inputswitch';
+import { ToastProps as ToastProps$1 } from 'primereact/toast';
 
 /** Type no Figma: Outline (com borda) e Filled (com fundo). */
 type InputVariant = 'outline' | 'filled';
@@ -349,6 +350,20 @@ interface MenuPrincipalHandle {
 }
 declare const MenuPrincipal: react.ForwardRefExoticComponent<MenuPrincipalProps & react.RefAttributes<MenuPrincipalHandle>>;
 
+/** Type no Figma. */
+type MessageType = 'info' | 'warning' | 'success' | 'danger' | 'highlight' | 'neutral';
+interface MessageProps {
+    /** Padrão: info. */
+    type?: MessageType;
+    /** Texto (Message no Figma). */
+    children: ReactNode;
+    /** Show Icon no Figma. Padrão: true. */
+    showIcon?: boolean;
+    id?: string;
+    className?: string;
+}
+declare const Message: react.ForwardRefExoticComponent<MessageProps & 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).
@@ -428,6 +443,73 @@ interface MultiSelectProps {
 }
 declare const MultiSelect: react.ForwardRefExoticComponent<MultiSelectProps & react.RefAttributes<HTMLInputElement>>;
 
+/**
+ * Type no Figma: o estilo das abas. Primary tem o ícone em círculo e o fundo azul na aba ativa;
+ * Secondary é só o texto, com o sublinhado na ativa.
+ */
+type PageHeaderVariant = 'primary' | 'secondary';
+/** Uma aba (.Page Header Tab Item ou .Page Header Tab Secondary Item no Figma). */
+interface PageHeaderTab {
+    label: string;
+    /** Ícone de 16px. No primary fica no círculo de 32px; no secondary é opcional. */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Título da página (Page Title no Figma). */
+    title: string;
+    /** Padrão: primary. */
+    variant?: PageHeaderVariant;
+    /** Mostra o botão de voltar antes do título (Show Back Button no Figma). */
+    onBack?: () => void;
+    backLabel?: string;
+    /** Texto da Tag depois do título (Show Tag no Figma). */
+    tag?: ReactNode;
+    /** Segment Control das ferramentas (Show Segment Control no Figma): um `<SegmentControl>`. */
+    segmentControl?: ReactNode;
+    /** Botões das ferramentas (Show Buttons no Figma), 8px entre eles. */
+    actions?: ReactNode;
+    /** Mostra o botão de expandir, o último das ferramentas. */
+    onExpand?: () => void;
+    expandLabel?: string;
+    /** Abas abaixo do título (Show Tabs no Figma). */
+    tabs?: PageHeaderTab[];
+    /** Aba ativa (controlado). Sem ela, o PageHeader controla sozinho. */
+    activeTab?: number;
+    onTabChange?: (index: number) => void;
+    /** Nome das abas para o leitor de tela. Padrão: o título. */
+    tabsLabel?: string;
+}
+declare const PageHeader: react.ForwardRefExoticComponent<PageHeaderProps & react.RefAttributes<HTMLDivElement>>;
+
+/** O que o onPageChange recebe (o mesmo evento do Prime). */
+interface PaginatorPageChangeEvent {
+    /** Índice do primeiro item da página. */
+    first: number;
+    /** Itens por página. */
+    rows: number;
+    /** Página, a partir de 0. */
+    page: number;
+    pageCount: number;
+}
+interface PaginatorProps {
+    totalRecords: number;
+    /** Índice do primeiro item da página (controlado). Sem ele, o Paginator controla sozinho. */
+    first?: number;
+    /** Itens por página (controlado). Padrão: o primeiro de rowsPerPageOptions, ou 10. */
+    rows?: number;
+    /** Opções do Select de itens por página; sem elas, o Select não aparece. */
+    rowsPerPageOptions?: number[];
+    /** Quantos números de página aparecem. Padrão: 5, como no Figma. */
+    pageLinkSize?: number;
+    onPageChange?: (event: PaginatorPageChangeEvent) => void;
+    /** Nome do Select para o leitor de tela. */
+    rowsPerPageLabel?: string;
+    id?: string;
+    className?: string;
+}
+declare const Paginator: react.ForwardRefExoticComponent<PaginatorProps & react.RefAttributes<HTMLDivElement>>;
+
 type PanelProps = Omit<HTMLAttributes<HTMLDivElement>, 'onToggle'>;
 declare const Panel: react.ForwardRefExoticComponent<PanelProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -592,6 +674,38 @@ interface TagProps extends HTMLAttributes<HTMLSpanElement> {
 }
 declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
 
+/** Type no Figma. */
+type ToastType = 'warning' | 'danger' | 'success' | 'info';
+/** Onde as mensagens aparecem na tela (o position do Prime). Padrão: top-right. */
+type ToastPosition = NonNullable<ToastProps$1['position']>;
+/** Uma mensagem, passada para `show()`. */
+interface ToastMessage {
+    type: ToastType;
+    /** Title no Figma. */
+    title: string;
+    /** Message no Figma (Show Message content). */
+    message?: string;
+    /** Show Icon no Figma. Padrão: true. */
+    showIcon?: boolean;
+    /** Tempo na tela, em ms. Padrão do Prime: 3000. */
+    life?: number;
+    /** Fica até alguém fechar. */
+    sticky?: boolean;
+}
+/** O que a ref do Toast entrega. */
+interface ToastHandle {
+    show: (message: ToastMessage | ToastMessage[]) => void;
+    clear: () => void;
+}
+interface ToastProps {
+    position?: ToastPosition;
+    /** Nome do X para o leitor de tela. */
+    closeLabel?: string;
+    id?: string;
+    className?: string;
+}
+declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<ToastHandle>>;
+
 /** Type no Figma: Plain (rótulo curto, uma linha) e Rich (texto de até 300px, quebra linha). */
 type TooltipType = 'plain' | 'rich';
 type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
@@ -613,5 +727,5 @@ interface TooltipProps {
 }
 declare function Tooltip({ target, content, type, position, event, showDelay, hideDelay, disabled, id, className, }: TooltipProps): react.JSX.Element;
 
-export { AutoComplete, Badge, Button, Card, Checkbox, Chip, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, 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, DrawerSize, IconButtonProps, IconButtonSize, IconButtonVariant, InputProps, InputSize, InputVariant, MenuDensity, MenuHandle, MenuItem, MenuPrincipalEntry, MenuPrincipalGroup, MenuPrincipalHandle, MenuPrincipalItem, MenuPrincipalProps, 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 };
+export { AutoComplete, Badge, Button, Card, 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 { AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CardPadding, CardProps, 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 };