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

package/dist/index.d.cts

@@ -320,6 +320,58 @@ interface ContextMenuHandle {
 }
 declare const ContextMenu: react.ForwardRefExoticComponent<ContextMenuProps & react.RefAttributes<ContextMenuHandle>>;
 
+/** Um período: [início, fim], com as duas datas no mesmo dia quando é um dia só. */
+type DateRange = [Date, Date];
+/** Item da lista de períodos do Data Picker (.Period no Figma). */
+interface DateRangePeriod {
+    /** Texto do item e do botão ("Este mês"). */
+    label: string;
+    /** O período, a partir do dia de hoje. */
+    range: (hoje: Date) => DateRange;
+}
+/**
+ * Os períodos do Figma (DatePicker: .Period, de 6 a 9 itens). O `DateRangeButton` mostra os seis
+ * primeiros; os outros entram pela prop `periods`.
+ */
+declare const DATE_PERIODS: {
+    today: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    yesterday: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    last7Days: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    last14Days: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    last30Days: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    thisMonth: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    lastWeek: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    lastMonth: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    thisYear: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+};
+
 type DatePickerVariant = InputVariant;
 type DatePickerSize = InputSize;
 /**
@@ -340,6 +392,19 @@ interface DatePickerProps<TMode extends CalendarSelectionMode = 'single'> extend
     error?: string;
     /** Dias de folga (Day Off no Figma): aparecem riscados. Para não deixar escolher, use `disabledDates`. */
     offDays?: Date[];
+    /**
+     * Lista de períodos à esquerda do calendário, com os campos de data inicial e final em cima (o
+     * Data Picker do Figma). Só com `selectionMode="range"`; os do Figma estão em `DATE_PERIODS`.
+     * Padrão: sem lista.
+     */
+    periods?: DateRangePeriod[];
+    /**
+     * Rodapé com Fechar e Selecionar (Data Picker do Figma): a escolha só vale no Selecionar; o
+     * Fechar, o Esc e o clique fora descartam. Padrão: false.
+     */
+    footer?: boolean;
+    /** O dia de hoje para os períodos (Hoje, Este mês...). Padrão: a data atual. */
+    today?: Date;
 }
 /** A ref é a do Calendar do Prime: `show()`, `hide()`, `getInput()`, `getElement()`... */
 type DatePickerHandle = Calendar$1;
@@ -348,6 +413,46 @@ declare const DatePicker: <TMode extends CalendarSelectionMode = "single">(props
     ref?: Ref<DatePickerHandle>;
 }) => ReactElement;
 
+interface DateRangeButtonChangeEvent {
+    /** O período escolhido: [início, fim]. */
+    value: DateRange;
+    /** O item da lista de períodos, se veio dele (ou se as datas são as dele). */
+    period: DateRangePeriod | null;
+}
+interface DateRangeButtonProps {
+    /** O período mostrado no botão (controlado). */
+    value?: DateRange | null;
+    /** O Selecionar do painel (ou, sem o rodapé, o período completo). */
+    onChange?: (event: DateRangeButtonChangeEvent) => void;
+    /** Rótulo acima do botão (Label no Figma). Sem rótulo, o nome é o texto do botão. */
+    label?: string;
+    required?: boolean;
+    /** Texto do botão sem período. Padrão: "Selecione o período". */
+    placeholder?: string;
+    /**
+     * A lista de períodos do painel (.Period no Figma). Padrão: os seis do Figma (Hoje a Este mês);
+     * os outros estão em `DATE_PERIODS`. Com `[]`, o painel fica sem a lista.
+     */
+    periods?: DateRangePeriod[];
+    /** Rodapé com Fechar e Selecionar. Sem ele, o período vale assim que fica completo. Padrão: true. */
+    footer?: boolean;
+    /** Meses lado a lado no calendário. Padrão: 2. */
+    numberOfMonths?: number;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    /** Dias de folga (Day Off no Figma): aparecem riscados. */
+    offDays?: Date[];
+    /** O dia de hoje para os períodos (Hoje, Este mês...). Padrão: a data atual. */
+    today?: Date;
+    disabled?: boolean;
+    /** Vai no <button>. */
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const DateRangeButton: react.ForwardRefExoticComponent<DateRangeButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
 /** Horizontal Divider e Vertical Divider no Figma. */
 type DividerOrientation = 'horizontal' | 'vertical';
 /** Style no Figma: Solid (Default no vertical) e Dashed. */
@@ -1080,5 +1185,5 @@ interface ToastProps {
 }
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<ToastHandle>>;
 
-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 };
+export { Accordion, AccordionTab, AutoComplete, Badge, Button, Calendar, Card, Chart, Checkbox, Chip, Column, ContextMenu, DATE_PERIODS, DatePicker, DateRangeButton, 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, DateRange, DateRangeButtonChangeEvent, DateRangeButtonProps, DateRangePeriod, 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

@@ -320,6 +320,58 @@ interface ContextMenuHandle {
 }
 declare const ContextMenu: react.ForwardRefExoticComponent<ContextMenuProps & react.RefAttributes<ContextMenuHandle>>;
 
+/** Um período: [início, fim], com as duas datas no mesmo dia quando é um dia só. */
+type DateRange = [Date, Date];
+/** Item da lista de períodos do Data Picker (.Period no Figma). */
+interface DateRangePeriod {
+    /** Texto do item e do botão ("Este mês"). */
+    label: string;
+    /** O período, a partir do dia de hoje. */
+    range: (hoje: Date) => DateRange;
+}
+/**
+ * Os períodos do Figma (DatePicker: .Period, de 6 a 9 itens). O `DateRangeButton` mostra os seis
+ * primeiros; os outros entram pela prop `periods`.
+ */
+declare const DATE_PERIODS: {
+    today: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    yesterday: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    last7Days: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    last14Days: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    last30Days: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    thisMonth: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    lastWeek: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    lastMonth: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+    thisYear: {
+        label: string;
+        range: (hoje: Date) => [Date, Date];
+    };
+};
+
 type DatePickerVariant = InputVariant;
 type DatePickerSize = InputSize;
 /**
@@ -340,6 +392,19 @@ interface DatePickerProps<TMode extends CalendarSelectionMode = 'single'> extend
     error?: string;
     /** Dias de folga (Day Off no Figma): aparecem riscados. Para não deixar escolher, use `disabledDates`. */
     offDays?: Date[];
+    /**
+     * Lista de períodos à esquerda do calendário, com os campos de data inicial e final em cima (o
+     * Data Picker do Figma). Só com `selectionMode="range"`; os do Figma estão em `DATE_PERIODS`.
+     * Padrão: sem lista.
+     */
+    periods?: DateRangePeriod[];
+    /**
+     * Rodapé com Fechar e Selecionar (Data Picker do Figma): a escolha só vale no Selecionar; o
+     * Fechar, o Esc e o clique fora descartam. Padrão: false.
+     */
+    footer?: boolean;
+    /** O dia de hoje para os períodos (Hoje, Este mês...). Padrão: a data atual. */
+    today?: Date;
 }
 /** A ref é a do Calendar do Prime: `show()`, `hide()`, `getInput()`, `getElement()`... */
 type DatePickerHandle = Calendar$1;
@@ -348,6 +413,46 @@ declare const DatePicker: <TMode extends CalendarSelectionMode = "single">(props
     ref?: Ref<DatePickerHandle>;
 }) => ReactElement;
 
+interface DateRangeButtonChangeEvent {
+    /** O período escolhido: [início, fim]. */
+    value: DateRange;
+    /** O item da lista de períodos, se veio dele (ou se as datas são as dele). */
+    period: DateRangePeriod | null;
+}
+interface DateRangeButtonProps {
+    /** O período mostrado no botão (controlado). */
+    value?: DateRange | null;
+    /** O Selecionar do painel (ou, sem o rodapé, o período completo). */
+    onChange?: (event: DateRangeButtonChangeEvent) => void;
+    /** Rótulo acima do botão (Label no Figma). Sem rótulo, o nome é o texto do botão. */
+    label?: string;
+    required?: boolean;
+    /** Texto do botão sem período. Padrão: "Selecione o período". */
+    placeholder?: string;
+    /**
+     * A lista de períodos do painel (.Period no Figma). Padrão: os seis do Figma (Hoje a Este mês);
+     * os outros estão em `DATE_PERIODS`. Com `[]`, o painel fica sem a lista.
+     */
+    periods?: DateRangePeriod[];
+    /** Rodapé com Fechar e Selecionar. Sem ele, o período vale assim que fica completo. Padrão: true. */
+    footer?: boolean;
+    /** Meses lado a lado no calendário. Padrão: 2. */
+    numberOfMonths?: number;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    /** Dias de folga (Day Off no Figma): aparecem riscados. */
+    offDays?: Date[];
+    /** O dia de hoje para os períodos (Hoje, Este mês...). Padrão: a data atual. */
+    today?: Date;
+    disabled?: boolean;
+    /** Vai no <button>. */
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare const DateRangeButton: react.ForwardRefExoticComponent<DateRangeButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
 /** Horizontal Divider e Vertical Divider no Figma. */
 type DividerOrientation = 'horizontal' | 'vertical';
 /** Style no Figma: Solid (Default no vertical) e Dashed. */
@@ -1080,5 +1185,5 @@ interface ToastProps {
 }
 declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<ToastHandle>>;
 
-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 };
+export { Accordion, AccordionTab, AutoComplete, Badge, Button, Calendar, Card, Chart, Checkbox, Chip, Column, ContextMenu, DATE_PERIODS, DatePicker, DateRangeButton, 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, DateRange, DateRangeButtonChangeEvent, DateRangeButtonProps, DateRangePeriod, 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 };