@vector-business-services/cristal-ds-web 0.18.0 → 0.20.0

package/dist/index.d.cts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, InputHTMLAttributes, ButtonHTMLAttributes, CSSProperties, SyntheticEvent, RefObject, MouseEvent, Ref, ReactElement } from 'react';
+import { HTMLAttributes, ReactNode, InputHTMLAttributes, ButtonHTMLAttributes, Ref, ReactElement, CSSProperties, SyntheticEvent, RefObject, MouseEvent } from 'react';
 import { AutoCompleteProps as AutoCompleteProps$1 } from 'primereact/autocomplete';
+import { CalendarSelectionMode, CalendarProps as CalendarProps$1, Calendar as Calendar$1 } from 'primereact/calendar';
 import { CheckboxChangeEvent } from 'primereact/checkbox';
 import { ChipRemoveEvent } from 'primereact/chip';
 import { MenuItemCommandEvent } from 'primereact/menuitem';
@@ -112,6 +113,22 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Props do Calendar do PrimeReact (`selectionMode` single, range ou multiple, `numberOfMonths`,
+ * `view`, `minDate`, `maxDate`, `disabledDates`, `disabledDays`, `dateTemplate`...), mais os dias de
+ * folga do Figma. O visual (pt e unstyled) e as setas são do Cristal.
+ */
+interface CalendarProps<TMode extends CalendarSelectionMode = 'single'> extends Omit<CalendarProps$1<TMode>, 'pt' | 'ptOptions' | 'unstyled' | 'inline' | 'prevIcon' | 'nextIcon'> {
+    /** Dias de folga (Day Off no Figma): aparecem riscados. Para não deixar escolher, use `disabledDates`. */
+    offDays?: Date[];
+}
+/** A ref é a do Calendar do Prime: `getElement()`, `getCurrentDateTime()`, `getViewDate()`... */
+type CalendarHandle = Calendar$1;
+/** Calendar do Figma "Cristal - Core Components | Web" (DatePicker: .Calendar), sem o campo. */
+declare const Calendar: <TMode extends CalendarSelectionMode = "single">(props: CalendarProps<TMode> & {
+    ref?: Ref<CalendarHandle>;
+}) => ReactElement;
+
 /** 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> {
@@ -303,6 +320,34 @@ interface ContextMenuHandle {
 }
 declare const ContextMenu: react.ForwardRefExoticComponent<ContextMenuProps & react.RefAttributes<ContextMenuHandle>>;
 
+type DatePickerVariant = InputVariant;
+type DatePickerSize = InputSize;
+/**
+ * Props do Calendar do PrimeReact (`selectionMode` single, range ou multiple, `numberOfMonths`,
+ * `view`, `dateFormat`, `minDate`, `maxDate`, `disabledDates`, `showTime`...), mais o campo do Input
+ * do Cristal. O visual (pt e unstyled), o ícone e as setas são do Cristal.
+ */
+interface DatePickerProps<TMode extends CalendarSelectionMode = 'single'> extends Omit<CalendarProps$1<TMode>, 'pt' | 'ptOptions' | 'unstyled' | 'inline' | 'prevIcon' | 'nextIcon' | 'showIcon' | 'icon' | 'iconPos' | 'invalid' | 'variant' | 'inputClassName' | 'panelClassName'> {
+    /** Type no Figma (Input Text): Outline (com borda) e Filled (com fundo). */
+    variant?: DatePickerVariant;
+    /** Size no Figma (Input Text): 32, 36, 42 e 48px de altura do campo. */
+    size?: DatePickerSize;
+    /** Rótulo acima do campo (Label no Figma). Sem rótulo, passe `aria-label`. */
+    label?: string;
+    /** Dica abaixo do campo (Hint 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;
+    /** Dias de folga (Day Off no Figma): aparecem riscados. Para não deixar escolher, use `disabledDates`. */
+    offDays?: Date[];
+}
+/** A ref é a do Calendar do Prime: `show()`, `hide()`, `getInput()`, `getElement()`... */
+type DatePickerHandle = Calendar$1;
+/** DatePicker do Figma "Cristal - Core Components | Web": o campo com o calendário em popup. */
+declare const DatePicker: <TMode extends CalendarSelectionMode = "single">(props: DatePickerProps<TMode> & {
+    ref?: Ref<DatePickerHandle>;
+}) => ReactElement;
+
 /** Horizontal Divider e Vertical Divider no Figma. */
 type DividerOrientation = 'horizontal' | 'vertical';
 /** Style no Figma: Solid (Default no vertical) e Dashed. */
@@ -908,6 +953,14 @@ interface TableProps<T extends DataTableValue> extends PrimeTableProps<T> {
      * Padrão: true.
      */
     columnMenu?: boolean;
+    /**
+     * Cabeçalho das colunas fixo na página: enquanto a página (ou o contêiner que rola em volta)
+     * passa pela Table, o cabeçalho fica no topo da tela, até a última linha. Soma com o
+     * `scrollHeight` do Prime, que fixa o cabeçalho dentro da Table. Padrão: false.
+     */
+    stickyHeader?: boolean;
+    /** Distância do topo da tela em que o cabeçalho para, em px (uma barra fixa da página). Padrão: 0. */
+    stickyHeaderOffset?: number;
 }
 /** A ref da Table é a do DataTable do Prime: `getElement()`, `exportCSV()`, `reset()`... */
 type TableHandle<T extends DataTableValue = DataTableValue> = DataTable<T[]>;
@@ -1027,5 +1080,5 @@ interface ToastProps {
 }
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<ToastHandle>>;
 
-export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Chart, Checkbox, Chip, Column, ContextMenu, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Skeleton, Switch, TabPanel, Table, TableRowActions, TableToolbar, 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, ColumnProps, ContextMenuHandle, ContextMenuItem, ContextMenuProps, 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, SkeletonProps, SkeletonShape, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TableFilter, TableHandle, TableProps, TableRowActionsProps, TableToolbarAction, TableToolbarProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };
+export { Accordion, AccordionTab, AutoComplete, Badge, Button, Calendar, Card, Chart, Checkbox, Chip, Column, ContextMenu, DatePicker, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Skeleton, Switch, TabPanel, Table, TableRowActions, TableToolbar, Tabs, Tag, Toast, Tooltip };
+export type { AccordionProps, AccordionTabProps, AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CalendarHandle, CalendarProps, CardPadding, CardProps, ChartAxis, ChartColor, ChartProps, ChartSeries, CheckboxLabelSize, CheckboxPosition, CheckboxProps, ChipProps, ChipSize, ChipVariant, ColumnProps, ContextMenuHandle, ContextMenuItem, ContextMenuProps, DatePickerHandle, DatePickerProps, DatePickerSize, DatePickerVariant, 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, SkeletonProps, SkeletonShape, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TableFilter, TableHandle, TableProps, TableRowActionsProps, TableToolbarAction, TableToolbarProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, InputHTMLAttributes, ButtonHTMLAttributes, CSSProperties, SyntheticEvent, RefObject, MouseEvent, Ref, ReactElement } from 'react';
+import { HTMLAttributes, ReactNode, InputHTMLAttributes, ButtonHTMLAttributes, Ref, ReactElement, CSSProperties, SyntheticEvent, RefObject, MouseEvent } from 'react';
 import { AutoCompleteProps as AutoCompleteProps$1 } from 'primereact/autocomplete';
+import { CalendarSelectionMode, CalendarProps as CalendarProps$1, Calendar as Calendar$1 } from 'primereact/calendar';
 import { CheckboxChangeEvent } from 'primereact/checkbox';
 import { ChipRemoveEvent } from 'primereact/chip';
 import { MenuItemCommandEvent } from 'primereact/menuitem';
@@ -112,6 +113,22 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Props do Calendar do PrimeReact (`selectionMode` single, range ou multiple, `numberOfMonths`,
+ * `view`, `minDate`, `maxDate`, `disabledDates`, `disabledDays`, `dateTemplate`...), mais os dias de
+ * folga do Figma. O visual (pt e unstyled) e as setas são do Cristal.
+ */
+interface CalendarProps<TMode extends CalendarSelectionMode = 'single'> extends Omit<CalendarProps$1<TMode>, 'pt' | 'ptOptions' | 'unstyled' | 'inline' | 'prevIcon' | 'nextIcon'> {
+    /** Dias de folga (Day Off no Figma): aparecem riscados. Para não deixar escolher, use `disabledDates`. */
+    offDays?: Date[];
+}
+/** A ref é a do Calendar do Prime: `getElement()`, `getCurrentDateTime()`, `getViewDate()`... */
+type CalendarHandle = Calendar$1;
+/** Calendar do Figma "Cristal - Core Components | Web" (DatePicker: .Calendar), sem o campo. */
+declare const Calendar: <TMode extends CalendarSelectionMode = "single">(props: CalendarProps<TMode> & {
+    ref?: Ref<CalendarHandle>;
+}) => ReactElement;
+
 /** 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> {
@@ -303,6 +320,34 @@ interface ContextMenuHandle {
 }
 declare const ContextMenu: react.ForwardRefExoticComponent<ContextMenuProps & react.RefAttributes<ContextMenuHandle>>;
 
+type DatePickerVariant = InputVariant;
+type DatePickerSize = InputSize;
+/**
+ * Props do Calendar do PrimeReact (`selectionMode` single, range ou multiple, `numberOfMonths`,
+ * `view`, `dateFormat`, `minDate`, `maxDate`, `disabledDates`, `showTime`...), mais o campo do Input
+ * do Cristal. O visual (pt e unstyled), o ícone e as setas são do Cristal.
+ */
+interface DatePickerProps<TMode extends CalendarSelectionMode = 'single'> extends Omit<CalendarProps$1<TMode>, 'pt' | 'ptOptions' | 'unstyled' | 'inline' | 'prevIcon' | 'nextIcon' | 'showIcon' | 'icon' | 'iconPos' | 'invalid' | 'variant' | 'inputClassName' | 'panelClassName'> {
+    /** Type no Figma (Input Text): Outline (com borda) e Filled (com fundo). */
+    variant?: DatePickerVariant;
+    /** Size no Figma (Input Text): 32, 36, 42 e 48px de altura do campo. */
+    size?: DatePickerSize;
+    /** Rótulo acima do campo (Label no Figma). Sem rótulo, passe `aria-label`. */
+    label?: string;
+    /** Dica abaixo do campo (Hint 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;
+    /** Dias de folga (Day Off no Figma): aparecem riscados. Para não deixar escolher, use `disabledDates`. */
+    offDays?: Date[];
+}
+/** A ref é a do Calendar do Prime: `show()`, `hide()`, `getInput()`, `getElement()`... */
+type DatePickerHandle = Calendar$1;
+/** DatePicker do Figma "Cristal - Core Components | Web": o campo com o calendário em popup. */
+declare const DatePicker: <TMode extends CalendarSelectionMode = "single">(props: DatePickerProps<TMode> & {
+    ref?: Ref<DatePickerHandle>;
+}) => ReactElement;
+
 /** Horizontal Divider e Vertical Divider no Figma. */
 type DividerOrientation = 'horizontal' | 'vertical';
 /** Style no Figma: Solid (Default no vertical) e Dashed. */
@@ -908,6 +953,14 @@ interface TableProps<T extends DataTableValue> extends PrimeTableProps<T> {
      * Padrão: true.
      */
     columnMenu?: boolean;
+    /**
+     * Cabeçalho das colunas fixo na página: enquanto a página (ou o contêiner que rola em volta)
+     * passa pela Table, o cabeçalho fica no topo da tela, até a última linha. Soma com o
+     * `scrollHeight` do Prime, que fixa o cabeçalho dentro da Table. Padrão: false.
+     */
+    stickyHeader?: boolean;
+    /** Distância do topo da tela em que o cabeçalho para, em px (uma barra fixa da página). Padrão: 0. */
+    stickyHeaderOffset?: number;
 }
 /** A ref da Table é a do DataTable do Prime: `getElement()`, `exportCSV()`, `reset()`... */
 type TableHandle<T extends DataTableValue = DataTableValue> = DataTable<T[]>;
@@ -1027,5 +1080,5 @@ interface ToastProps {
 }
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<ToastHandle>>;
 
-export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Chart, Checkbox, Chip, Column, ContextMenu, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Skeleton, Switch, TabPanel, Table, TableRowActions, TableToolbar, 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, ColumnProps, ContextMenuHandle, ContextMenuItem, ContextMenuProps, 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, SkeletonProps, SkeletonShape, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TableFilter, TableHandle, TableProps, TableRowActionsProps, TableToolbarAction, TableToolbarProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };
+export { Accordion, AccordionTab, AutoComplete, Badge, Button, Calendar, Card, Chart, Checkbox, Chip, Column, ContextMenu, DatePicker, Divider, Drawer, IconButton, Input, Menu, MenuPrincipal, Menubar, Message, Modal, MultiSelect, PageHeader, Paginator, Panel, Radio, ScrollPanel, SegmentControl, Select, Skeleton, Switch, TabPanel, Table, TableRowActions, TableToolbar, Tabs, Tag, Toast, Tooltip };
+export type { AccordionProps, AccordionTabProps, AutoCompleteProps, AutoCompleteSize, AutoCompleteVariant, BadgeProps, BadgeSize, BadgeVariant, ButtonProps, ButtonSize, ButtonVariant, CalendarHandle, CalendarProps, CardPadding, CardProps, ChartAxis, ChartColor, ChartProps, ChartSeries, CheckboxLabelSize, CheckboxPosition, CheckboxProps, ChipProps, ChipSize, ChipVariant, ColumnProps, ContextMenuHandle, ContextMenuItem, ContextMenuProps, DatePickerHandle, DatePickerProps, DatePickerSize, DatePickerVariant, 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, SkeletonProps, SkeletonShape, SwitchLabelPosition, SwitchProps, SwitchSize, TabPanelProps, TableFilter, TableHandle, TableProps, TableRowActionsProps, TableToolbarAction, TableToolbarProps, TabsProps, TagProps, TagSize, TagVariant, ToastHandle, ToastMessage, ToastPosition, ToastProps, ToastType, TooltipPosition, TooltipProps, TooltipType };