@vector-business-services/cristal-ds-web 0.9.0 → 0.11.0

package/dist/index.d.cts

@@ -1,11 +1,42 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, SyntheticEvent, MouseEvent, RefObject } from 'react';
+import { ReactNode, InputHTMLAttributes, 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';
+import { ToastProps as ToastProps$1 } from 'primereact/toast';
+
+/** Um item (.Accordion Item no Figma) e o conteúdo dele. */
+interface AccordionTabProps {
+    /** Título (Accordion Item Title no Figma). Com headerContent, não aparece. */
+    header: string;
+    /** Texto abaixo do título (Show Description no Figma). */
+    description?: string;
+    /** Cabeçalho livre no lugar do título e da descrição (Type=Custom no Figma). */
+    headerContent?: ReactNode;
+    disabled?: boolean;
+    /** Conteúdo do item aberto (Accordion Item Body no Figma). */
+    children?: ReactNode;
+}
+/** Só descreve o item: quem desenha é o Accordion. */
+declare function AccordionTab(_props: AccordionTabProps): null;
+interface AccordionProps {
+    /** Mais de um item aberto ao mesmo tempo. */
+    multiple?: boolean;
+    /**
+     * Item(ns) aberto(s) (controlado): o índice, ou a lista com `multiple`; null fecha todos. Sem
+     * ele, o Accordion controla sozinho e começa com o primeiro aberto, como nos exemplos do Figma.
+     */
+    activeIndex?: number | number[] | null;
+    onTabChange?: (activeIndex: number | number[] | null) => void;
+    /** Os itens, como `<AccordionTab>`. */
+    children: ReactNode;
+    id?: string;
+    className?: string;
+}
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
 
 /** Type no Figma: Outline (com borda) e Filled (com fundo). */
 type InputVariant = 'outline' | 'filled';
@@ -349,6 +380,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).
@@ -467,6 +512,34 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
 }
 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>>;
 
@@ -631,6 +704,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';
@@ -652,5 +757,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, PageHeader, 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, PageHeaderProps, PageHeaderTab, PageHeaderVariant, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, TooltipPosition, TooltipProps, TooltipType };
+export { Accordion, AccordionTab, 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 { AccordionProps, AccordionTabProps, 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

@@ -1,11 +1,42 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, SyntheticEvent, MouseEvent, RefObject } from 'react';
+import { ReactNode, InputHTMLAttributes, 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';
+import { ToastProps as ToastProps$1 } from 'primereact/toast';
+
+/** Um item (.Accordion Item no Figma) e o conteúdo dele. */
+interface AccordionTabProps {
+    /** Título (Accordion Item Title no Figma). Com headerContent, não aparece. */
+    header: string;
+    /** Texto abaixo do título (Show Description no Figma). */
+    description?: string;
+    /** Cabeçalho livre no lugar do título e da descrição (Type=Custom no Figma). */
+    headerContent?: ReactNode;
+    disabled?: boolean;
+    /** Conteúdo do item aberto (Accordion Item Body no Figma). */
+    children?: ReactNode;
+}
+/** Só descreve o item: quem desenha é o Accordion. */
+declare function AccordionTab(_props: AccordionTabProps): null;
+interface AccordionProps {
+    /** Mais de um item aberto ao mesmo tempo. */
+    multiple?: boolean;
+    /**
+     * Item(ns) aberto(s) (controlado): o índice, ou a lista com `multiple`; null fecha todos. Sem
+     * ele, o Accordion controla sozinho e começa com o primeiro aberto, como nos exemplos do Figma.
+     */
+    activeIndex?: number | number[] | null;
+    onTabChange?: (activeIndex: number | number[] | null) => void;
+    /** Os itens, como `<AccordionTab>`. */
+    children: ReactNode;
+    id?: string;
+    className?: string;
+}
+declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
 
 /** Type no Figma: Outline (com borda) e Filled (com fundo). */
 type InputVariant = 'outline' | 'filled';
@@ -349,6 +380,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).
@@ -467,6 +512,34 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>
 }
 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>>;
 
@@ -631,6 +704,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';
@@ -652,5 +757,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, PageHeader, 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, PageHeaderProps, PageHeaderTab, PageHeaderVariant, PanelProps, RadioLabelSize, RadioProps, ScrollPanelProps, SegmentControlOption, SegmentControlProps, SegmentControlVariant, SelectProps, SelectSize, SelectVariant, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TabsProps, TagProps, TagSize, TagVariant, TooltipPosition, TooltipProps, TooltipType };
+export { Accordion, AccordionTab, 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 { AccordionProps, AccordionTabProps, 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 };