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

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 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';
@@ -8,6 +8,36 @@ 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';
 /** Size no Figma: 32, 36, 42 e 48px de altura do campo. */
@@ -81,6 +111,61 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Cor da série: os tokens de gráfico (color/chart/fill/<cor>/<tom>), na ordem fixa. Sem `color`,
+ * cada série pega a da sua posição; a cor acompanha a série, nunca a ordem. A quinary (ciano) fica
+ * de fora: clara demais sobre o fundo (1,75:1).
+ */
+type ChartColor = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+/** Tom da cor (o passo do token). Padrão: 600 na linha e 500 na barra, como no Figma. */
+type ChartTone = 100 | 200 | 300 | 400 | 500 | 600;
+/** Uma série: uma linha ou um conjunto de barras. */
+interface ChartSeries {
+    label: string;
+    /** Um valor por rótulo do eixo X; null deixa o ponto em branco. */
+    data: (number | null)[];
+    color?: ChartColor;
+    /** Tom da cor: nas barras empilhadas do Figma, partes de um total usam tons da mesma cor. */
+    tone?: ChartTone;
+    /** Eixo do valor: o da esquerda (padrão) ou o da direita (y2Axis). */
+    axis?: 'left' | 'right';
+}
+/** Escala de um eixo Y. */
+interface ChartAxis {
+    /** Texto de cada marca e do valor no tooltip (ex.: `(v) => \`R$ ${v}\``). */
+    format?: (value: number) => string;
+    min?: number;
+    max?: number;
+    /** Distância entre as marcas (ex.: 50). */
+    stepSize?: number;
+}
+interface ChartProps {
+    /** Linhas com área (Chart / Line) ou barras (Chart / Bar). Padrão: line. */
+    type?: 'line' | 'bar';
+    /** Barras empilhadas: as séries somam numa barra só por rótulo. */
+    stacked?: boolean;
+    /** Rótulos do eixo X, um por ponto. */
+    labels: string[];
+    /** As séries, até 4 cores (as de gráfico dos tokens). */
+    series: ChartSeries[];
+    /** Eixo da esquerda. */
+    yAxis?: ChartAxis;
+    /** Eixo da direita, para séries com `axis: 'right'`. */
+    y2Axis?: ChartAxis;
+    /** Título do card. Sem título nem ações, só o gráfico e a legenda, sem a caixa. */
+    title?: string;
+    /** Texto do ícone de ajuda (Question) ao lado do título, num Tooltip. */
+    help?: string;
+    helpLabel?: string;
+    /** Botões à direita do título (IconButton tertiary xsmall no Figma). */
+    actions?: ReactNode;
+    /** Altura da área do gráfico, com os eixos. Padrão: 266px, a do Figma. */
+    height?: number;
+    id?: string;
+    className?: string;
+}
+declare function Chart({ type, stacked, labels, series, yAxis, y2Axis, title, help, helpLabel, actions, height, id, className, }: ChartProps): react.JSX.Element;
+
 /** 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). */
@@ -727,5 +812,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, 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 };
+export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Chart, 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, ChartAxis, ChartColor, ChartProps, ChartSeries, 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,5 +1,5 @@
 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';
@@ -8,6 +8,36 @@ 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';
 /** Size no Figma: 32, 36, 42 e 48px de altura do campo. */
@@ -81,6 +111,61 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Cor da série: os tokens de gráfico (color/chart/fill/<cor>/<tom>), na ordem fixa. Sem `color`,
+ * cada série pega a da sua posição; a cor acompanha a série, nunca a ordem. A quinary (ciano) fica
+ * de fora: clara demais sobre o fundo (1,75:1).
+ */
+type ChartColor = 'primary' | 'secondary' | 'tertiary' | 'quaternary';
+/** Tom da cor (o passo do token). Padrão: 600 na linha e 500 na barra, como no Figma. */
+type ChartTone = 100 | 200 | 300 | 400 | 500 | 600;
+/** Uma série: uma linha ou um conjunto de barras. */
+interface ChartSeries {
+    label: string;
+    /** Um valor por rótulo do eixo X; null deixa o ponto em branco. */
+    data: (number | null)[];
+    color?: ChartColor;
+    /** Tom da cor: nas barras empilhadas do Figma, partes de um total usam tons da mesma cor. */
+    tone?: ChartTone;
+    /** Eixo do valor: o da esquerda (padrão) ou o da direita (y2Axis). */
+    axis?: 'left' | 'right';
+}
+/** Escala de um eixo Y. */
+interface ChartAxis {
+    /** Texto de cada marca e do valor no tooltip (ex.: `(v) => \`R$ ${v}\``). */
+    format?: (value: number) => string;
+    min?: number;
+    max?: number;
+    /** Distância entre as marcas (ex.: 50). */
+    stepSize?: number;
+}
+interface ChartProps {
+    /** Linhas com área (Chart / Line) ou barras (Chart / Bar). Padrão: line. */
+    type?: 'line' | 'bar';
+    /** Barras empilhadas: as séries somam numa barra só por rótulo. */
+    stacked?: boolean;
+    /** Rótulos do eixo X, um por ponto. */
+    labels: string[];
+    /** As séries, até 4 cores (as de gráfico dos tokens). */
+    series: ChartSeries[];
+    /** Eixo da esquerda. */
+    yAxis?: ChartAxis;
+    /** Eixo da direita, para séries com `axis: 'right'`. */
+    y2Axis?: ChartAxis;
+    /** Título do card. Sem título nem ações, só o gráfico e a legenda, sem a caixa. */
+    title?: string;
+    /** Texto do ícone de ajuda (Question) ao lado do título, num Tooltip. */
+    help?: string;
+    helpLabel?: string;
+    /** Botões à direita do título (IconButton tertiary xsmall no Figma). */
+    actions?: ReactNode;
+    /** Altura da área do gráfico, com os eixos. Padrão: 266px, a do Figma. */
+    height?: number;
+    id?: string;
+    className?: string;
+}
+declare function Chart({ type, stacked, labels, series, yAxis, y2Axis, title, help, helpLabel, actions, height, id, className, }: ChartProps): react.JSX.Element;
+
 /** 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). */
@@ -727,5 +812,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, 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 };
+export { Accordion, AccordionTab, AutoComplete, Badge, Button, Card, Chart, 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, ChartAxis, ChartColor, ChartProps, ChartSeries, 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 };