@plenustech/design-system 0.2.2 → 0.2.4

package/dist/index.js

@@ -1,131 +1,203 @@
 /* empty css                  */
 /* empty css                */
-import { Accordion as p } from "./components/data-display/Accordion/Accordion.js";
+import { Accordion as m } from "./components/data-display/Accordion/Accordion.js";
 import { Alert as a } from "./components/feedback/Alert/Alert.js";
-import { Avatar as x } from "./components/data-display/Avatar/Avatar.js";
+import { Avatar as f } from "./components/data-display/Avatar/Avatar.js";
 import { Badge as c } from "./components/data-display/Badge/Badge.js";
-import { Breadcrumb as i } from "./components/navigation/Breadcrumb/Breadcrumb.js";
-import { Button as l } from "./components/actions/Button/Button.js";
-import { ButtonIcon as u } from "./components/actions/ButtonIcon/ButtonIcon.js";
-import { Card as d } from "./components/data-display/Card/Card.js";
+import { Breadcrumb as l } from "./components/navigation/Breadcrumb/Breadcrumb.js";
+import { Button as C } from "./components/actions/Button/Button.js";
+import { ButtonIcon as s } from "./components/actions/ButtonIcon/ButtonIcon.js";
+import { ButtonTile as d } from "./components/actions/ButtonTile/ButtonTile.js";
+import { Card as g } from "./components/data-display/Card/Card.js";
 import { ChartArea as b } from "./components/charts/ChartArea/ChartArea.js";
-import { ChartBar as T } from "./components/charts/ChartBar/ChartBar.js";
-import { ChartCombo as B } from "./components/charts/ChartCombo/ChartCombo.js";
-import { ChartDonut as A } from "./components/charts/ChartDonut/ChartDonut.js";
-import { ChartLine as w } from "./components/charts/ChartLine/ChartLine.js";
-import { ChartPie as L } from "./components/charts/ChartPie/ChartPie.js";
-import { ChartRadial as y } from "./components/charts/ChartRadial/ChartRadial.js";
-import { ChartSankey as E } from "./components/charts/ChartSankey/ChartSankey.js";
-import { ChartScatter as U } from "./components/charts/ChartScatter/ChartScatter.js";
-import { ChartSunburst as F } from "./components/charts/ChartSunburst/ChartSunburst.js";
-import { ChartTooltip as H } from "./components/charts/ChartTooltip/ChartTooltip.js";
-import { ChartTreemap as j } from "./components/charts/ChartTreemap/ChartTreemap.js";
-import { ChartWaterfall as z } from "./components/charts/ChartWaterfall/ChartWaterfall.js";
-import { Checkbox as K } from "./components/forms/Checkbox/Checkbox.js";
-import { CodeBlock as V } from "./components/data-display/CodeBlock/CodeBlock.js";
-import { ComboBox as Y } from "./components/forms/ComboBox/ComboBox.js";
-import { DatePicker as _ } from "./components/forms/DatePicker/DatePicker.js";
-import { DateTimePicker as rr } from "./components/forms/DateTimePicker/DateTimePicker.js";
-import { Dialog as er } from "./components/overlays/Dialog/Dialog.js";
-import { EmptyState as pr } from "./components/feedback/EmptyState/EmptyState.js";
-import { Field as ar } from "./components/forms/Field/Field.js";
-import { IconArrowDown as xr, IconArrowUp as nr, IconCalendar as cr, IconChartBar as Cr, IconChevronDown as ir, IconChevronExpand as hr, IconChevronLeft as lr, IconChevronRight as Ir, IconChevronUp as ur, IconClock as sr, IconClose as dr, IconMinusCircle as Pr, IconPlusCircle as br, IconQuestionCircle as Sr, IconSearch as Tr } from "./components/icons/icons.js";
-import { InputCurrency as Br } from "./components/forms/InputCurrency/InputCurrency.js";
-import { InputNumber as Ar } from "./components/forms/InputNumber/InputNumber.js";
-import { InputPassword as wr } from "./components/forms/InputPassword/InputPassword.js";
-import { InputText as Lr } from "./components/forms/InputText/InputText.js";
-import { Label as yr } from "./components/forms/Label/Label.js";
-import { List as Er } from "./components/data-display/List/List.js";
-import { Menu as Ur } from "./components/overlays/Menu/Menu.js";
-import { Pagination as Fr } from "./components/navigation/Pagination/Pagination.js";
-import { Popover as Hr } from "./components/overlays/Popover/Popover.js";
-import { Progress as jr } from "./components/feedback/Progress/Progress.js";
-import { Radio as zr } from "./components/forms/RadioGroup/Radio.js";
-import { RadioGroup as Kr } from "./components/forms/RadioGroup/RadioGroup.js";
-import { Select as Vr } from "./components/forms/Select/Select.js";
+import { ChartBar as P } from "./components/charts/ChartBar/ChartBar.js";
+import { ChartCombo as A } from "./components/charts/ChartCombo/ChartCombo.js";
+import { ChartDonut as B } from "./components/charts/ChartDonut/ChartDonut.js";
+import { ChartGauge as w } from "./components/charts/ChartGauge/ChartGauge.js";
+import { ChartLine as E } from "./components/charts/ChartLine/ChartLine.js";
+import { ChartMap as U } from "./components/charts/ChartMap/ChartMap.js";
+import { ChartPie as F } from "./components/charts/ChartPie/ChartPie.js";
+import { ChartRadial as N } from "./components/charts/ChartRadial/ChartRadial.js";
+import { ChartSankey as W } from "./components/charts/ChartSankey/ChartSankey.js";
+import { ChartScatter as Q } from "./components/charts/ChartScatter/ChartScatter.js";
+import { ChartSunburst as z } from "./components/charts/ChartSunburst/ChartSunburst.js";
+import { ChartTimeline as K } from "./components/charts/ChartTimeline/ChartTimeline.js";
+import { ChartTooltip as V } from "./components/charts/ChartTooltip/ChartTooltip.js";
+import { ChartTreemap as Y } from "./components/charts/ChartTreemap/ChartTreemap.js";
+import { ChartWaterfall as _ } from "./components/charts/ChartWaterfall/ChartWaterfall.js";
+import { Checkbox as oo } from "./components/forms/Checkbox/Checkbox.js";
+import { CheckboxGroup as eo } from "./components/forms/CheckboxGroup/CheckboxGroup.js";
+import { CodeBlock as mo } from "./components/data-display/CodeBlock/CodeBlock.js";
+import { ColorPicker as ao } from "./components/forms/ColorPicker/ColorPicker.js";
+import { ComboBox as fo } from "./components/forms/ComboBox/ComboBox.js";
+import { DatePicker as co } from "./components/forms/DatePicker/DatePicker.js";
+import { DateTimePicker as lo } from "./components/forms/DateTimePicker/DateTimePicker.js";
+import { Dialog as Co } from "./components/overlays/Dialog/Dialog.js";
+import { Drawer as so } from "./components/overlays/Drawer/Drawer.js";
+import { EmptyState as To } from "./components/feedback/EmptyState/EmptyState.js";
+import { Field as ko } from "./components/forms/Field/Field.js";
+import { FileUpload as So } from "./components/forms/FileUpload/FileUpload.js";
+import { IconAlignCenter as Do, IconAlignLeft as Ao, IconAlignRight as vo, IconArrowDown as Bo, IconArrowUp as Lo, IconBold as wo, IconCalendar as Ro, IconChartBar as Eo, IconCheck as Mo, IconCheckCircle as Uo, IconChevronDown as yo, IconChevronExpand as Fo, IconChevronLeft as Go, IconChevronRight as No, IconChevronUp as Ho, IconClock as Wo, IconClose as qo, IconDesktop as Qo, IconDragHandle as jo, IconExclamationCircle as zo, IconExclamationTriangle as Jo, IconExternalLink as Ko, IconEye as Oo, IconFile as Vo, IconFilter as Xo, IconInfoCircle as Yo, IconItalic as Zo, IconLightning as _o, IconLink as $o, IconMinusCircle as or, IconMobile as rr, IconMore as er, IconPencil as tr, IconPlus as mr, IconPlusCircle as nr, IconQuestionCircle as ar, IconRedo as pr, IconSearch as fr, IconSidebar as xr, IconStructure as cr, IconTablet as ir, IconTrash as lr, IconUndo as Ir, IconUpload as Cr } from "./components/icons/icons.js";
+import { InputCurrency as sr } from "./components/forms/InputCurrency/InputCurrency.js";
+import { InputNumber as dr } from "./components/forms/InputNumber/InputNumber.js";
+import { InputPassword as gr } from "./components/forms/InputPassword/InputPassword.js";
+import { InputText as br } from "./components/forms/InputText/InputText.js";
+import { Label as Pr } from "./components/forms/Label/Label.js";
+import { List as Ar } from "./components/data-display/List/List.js";
+import { Menu as Br } from "./components/overlays/Menu/Menu.js";
+import { Pagination as wr } from "./components/navigation/Pagination/Pagination.js";
+import { Popover as Er } from "./components/overlays/Popover/Popover.js";
+import { Progress as Ur } from "./components/feedback/Progress/Progress.js";
+import { Radio as Fr } from "./components/forms/RadioGroup/Radio.js";
+import { RadioGroup as Nr } from "./components/forms/RadioGroup/RadioGroup.js";
+import { SegmentedControl as Wr } from "./components/forms/SegmentedControl/SegmentedControl.js";
+import { Select as Qr } from "./components/forms/Select/Select.js";
+import { Skeleton as zr } from "./components/feedback/Skeleton/Skeleton.js";
+import { SkipLink as Kr } from "./components/navigation/SkipLink/SkipLink.js";
+import { SortableList as Vr } from "./components/data-display/SortableList/SortableList.js";
 import { Spinner as Yr } from "./components/feedback/Spinner/Spinner.js";
-import { Switch as _r } from "./components/forms/Switch/Switch.js";
-import { Table as ro } from "./components/data-display/Table/Table.js";
-import { Tabs as eo } from "./components/navigation/Tabs/Tabs.js";
-import { Textarea as po } from "./components/forms/Textarea/Textarea.js";
-import { TimePicker as ao } from "./components/forms/TimePicker/TimePicker.js";
-import { Tooltip as xo } from "./components/overlays/Tooltip/Tooltip.js";
-import { formatarData as co, formatarHora as Co } from "./utils/formatters/formatarData.js";
-import { formatarMoeda as ho, formatarNumero as lo, formatarPercentual as Io } from "./utils/formatters/formatarNumero.js";
-import { paletteWithAccent as so, seriesColors as Po } from "./components/charts/palette/palette.js";
-import { resolveSeriesColors as So } from "./components/charts/palette/seriesColor.js";
+import { Steps as _r } from "./components/navigation/Steps/Steps.js";
+import { Switch as oe } from "./components/forms/Switch/Switch.js";
+import { Table as ee } from "./components/data-display/Table/Table.js";
+import { Tabs as me } from "./components/navigation/Tabs/Tabs.js";
+import { TabsNav as ae } from "./components/navigation/TabsNav/TabsNav.js";
+import { Tag as fe } from "./components/data-display/Tag/Tag.js";
+import { Textarea as ce } from "./components/forms/Textarea/Textarea.js";
+import { TimePicker as le } from "./components/forms/TimePicker/TimePicker.js";
+import { Timeline as Ce } from "./components/data-display/Timeline/Timeline.js";
+import { ToastRegion as se } from "./components/feedback/Toast/ToastRegion.js";
+import { Toolbar as de } from "./components/actions/Toolbar/Toolbar.js";
+import { Tooltip as ge } from "./components/overlays/Tooltip/Tooltip.js";
+import { dismissToast as be, showToast as Se } from "./components/feedback/Toast/toastStore.js";
+import { formatarData as De, formatarHora as Ae } from "./utils/formatters/formatarData.js";
+import { formatarDuracao as Be } from "./utils/formatters/formatarDuracao.js";
+import { formatarMoeda as we, formatarNumero as Re, formatarPercentual as Ee } from "./utils/formatters/formatarNumero.js";
+import { formatarTamanhoDeArquivo as Ue } from "./utils/formatters/formatarTamanhoDeArquivo.js";
+import { paletteWithAccent as Fe, seriesColors as Ge } from "./components/charts/palette/palette.js";
+import { resolveSeriesColors as He } from "./components/charts/palette/seriesColor.js";
 export {
-  p as Accordion,
+  m as Accordion,
   a as Alert,
-  x as Avatar,
+  f as Avatar,
   c as Badge,
-  i as Breadcrumb,
-  l as Button,
-  u as ButtonIcon,
-  d as Card,
+  l as Breadcrumb,
+  C as Button,
+  s as ButtonIcon,
+  d as ButtonTile,
+  g as Card,
   b as ChartArea,
-  T as ChartBar,
-  B as ChartCombo,
-  A as ChartDonut,
-  w as ChartLine,
-  L as ChartPie,
-  y as ChartRadial,
-  E as ChartSankey,
-  U as ChartScatter,
-  F as ChartSunburst,
-  H as ChartTooltip,
-  j as ChartTreemap,
-  z as ChartWaterfall,
-  K as Checkbox,
-  V as CodeBlock,
-  Y as ComboBox,
-  _ as DatePicker,
-  rr as DateTimePicker,
-  er as Dialog,
-  pr as EmptyState,
-  ar as Field,
-  xr as IconArrowDown,
-  nr as IconArrowUp,
-  cr as IconCalendar,
-  Cr as IconChartBar,
-  ir as IconChevronDown,
-  hr as IconChevronExpand,
-  lr as IconChevronLeft,
-  Ir as IconChevronRight,
-  ur as IconChevronUp,
-  sr as IconClock,
-  dr as IconClose,
-  Pr as IconMinusCircle,
-  br as IconPlusCircle,
-  Sr as IconQuestionCircle,
-  Tr as IconSearch,
-  Br as InputCurrency,
-  Ar as InputNumber,
-  wr as InputPassword,
-  Lr as InputText,
-  yr as Label,
-  Er as List,
-  Ur as Menu,
-  Fr as Pagination,
-  Hr as Popover,
-  jr as Progress,
-  zr as Radio,
-  Kr as RadioGroup,
-  Vr as Select,
+  P as ChartBar,
+  A as ChartCombo,
+  B as ChartDonut,
+  w as ChartGauge,
+  E as ChartLine,
+  U as ChartMap,
+  F as ChartPie,
+  N as ChartRadial,
+  W as ChartSankey,
+  Q as ChartScatter,
+  z as ChartSunburst,
+  K as ChartTimeline,
+  V as ChartTooltip,
+  Y as ChartTreemap,
+  _ as ChartWaterfall,
+  oo as Checkbox,
+  eo as CheckboxGroup,
+  mo as CodeBlock,
+  ao as ColorPicker,
+  fo as ComboBox,
+  co as DatePicker,
+  lo as DateTimePicker,
+  Co as Dialog,
+  so as Drawer,
+  To as EmptyState,
+  ko as Field,
+  So as FileUpload,
+  Do as IconAlignCenter,
+  Ao as IconAlignLeft,
+  vo as IconAlignRight,
+  Bo as IconArrowDown,
+  Lo as IconArrowUp,
+  wo as IconBold,
+  Ro as IconCalendar,
+  Eo as IconChartBar,
+  Mo as IconCheck,
+  Uo as IconCheckCircle,
+  yo as IconChevronDown,
+  Fo as IconChevronExpand,
+  Go as IconChevronLeft,
+  No as IconChevronRight,
+  Ho as IconChevronUp,
+  Wo as IconClock,
+  qo as IconClose,
+  Qo as IconDesktop,
+  jo as IconDragHandle,
+  zo as IconExclamationCircle,
+  Jo as IconExclamationTriangle,
+  Ko as IconExternalLink,
+  Oo as IconEye,
+  Vo as IconFile,
+  Xo as IconFilter,
+  Yo as IconInfoCircle,
+  Zo as IconItalic,
+  _o as IconLightning,
+  $o as IconLink,
+  or as IconMinusCircle,
+  rr as IconMobile,
+  er as IconMore,
+  tr as IconPencil,
+  mr as IconPlus,
+  nr as IconPlusCircle,
+  ar as IconQuestionCircle,
+  pr as IconRedo,
+  fr as IconSearch,
+  xr as IconSidebar,
+  cr as IconStructure,
+  ir as IconTablet,
+  lr as IconTrash,
+  Ir as IconUndo,
+  Cr as IconUpload,
+  sr as InputCurrency,
+  dr as InputNumber,
+  gr as InputPassword,
+  br as InputText,
+  Pr as Label,
+  Ar as List,
+  Br as Menu,
+  wr as Pagination,
+  Er as Popover,
+  Ur as Progress,
+  Fr as Radio,
+  Nr as RadioGroup,
+  Wr as SegmentedControl,
+  Qr as Select,
+  zr as Skeleton,
+  Kr as SkipLink,
+  Vr as SortableList,
   Yr as Spinner,
-  _r as Switch,
-  ro as Table,
-  eo as Tabs,
-  po as Textarea,
-  ao as TimePicker,
-  xo as Tooltip,
-  co as formatarData,
-  Co as formatarHora,
-  ho as formatarMoeda,
-  lo as formatarNumero,
-  Io as formatarPercentual,
-  so as paletteWithAccent,
-  So as resolveSeriesColors,
-  Po as seriesColors
+  _r as Steps,
+  oe as Switch,
+  ee as Table,
+  me as Tabs,
+  ae as TabsNav,
+  fe as Tag,
+  ce as Textarea,
+  le as TimePicker,
+  Ce as Timeline,
+  se as ToastRegion,
+  de as Toolbar,
+  ge as Tooltip,
+  be as dismissToast,
+  De as formatarData,
+  Be as formatarDuracao,
+  Ae as formatarHora,
+  we as formatarMoeda,
+  Re as formatarNumero,
+  Ee as formatarPercentual,
+  Ue as formatarTamanhoDeArquivo,
+  Fe as paletteWithAccent,
+  He as resolveSeriesColors,
+  Ge as seriesColors,
+  Se as showToast
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/types/components/actions/ButtonTile/ButtonTile.d.ts

@@ -0,0 +1,14 @@
+import type { ButtonHTMLAttributes, ReactNode, Ref } from 'react';
+export type ButtonTileSize = 'sm' | 'md';
+export interface ButtonTileProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-label' | 'aria-pressed' | 'children'> {
+    /** Mostrada como dica no foco e no ponteiro, e ligada ao botão por `aria-describedby`. */
+    description?: string;
+    icon: ReactNode;
+    /** Texto visível e nome do botão. */
+    label: string;
+    ref?: Ref<HTMLButtonElement>;
+    /** Para o ladrilho que alterna: vira `aria-pressed`. Sem ele, o ladrilho é um botão comum. */
+    selected?: boolean;
+    size?: ButtonTileSize;
+}
+export declare function ButtonTile({ className, description, icon, label, selected, size, type, ...props }: ButtonTileProps): import("react").JSX.Element;

package/dist/types/components/actions/ButtonTile/index.d.ts

@@ -0,0 +1,2 @@
+export { ButtonTile } from './ButtonTile.js';
+export type { ButtonTileProps, ButtonTileSize } from './ButtonTile.js';

package/dist/types/components/actions/Toolbar/Toolbar.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentPropsWithRef, type ReactNode, type RefObject } from 'react';
+import type { PopoverPlacement } from '../../overlays/Popover/index.js';
+export type ToolbarOrientation = 'horizontal' | 'vertical';
+export type ToolbarAppearance = 'floating' | 'flat';
+export type ToolbarPlacement = PopoverPlacement;
+export interface ToolbarProps extends Omit<ComponentPropsWithRef<'div'>, 'aria-label' | 'role'> {
+    /** A barra flutua ancorada a este elemento, num portal, sem tirar o foco de quem o tem. */
+    anchorRef?: RefObject<HTMLElement | null>;
+    appearance?: ToolbarAppearance;
+    children: ReactNode;
+    label: string;
+    orientation?: ToolbarOrientation;
+    placement?: ToolbarPlacement;
+    /** Gruda a barra no topo da área que rola. Vale para a barra no fluxo, sem `anchorRef`. */
+    sticky?: boolean;
+}
+export declare function Toolbar({ anchorRef, placement, ...props }: ToolbarProps): import("react").JSX.Element | null;
+export declare namespace Toolbar {
+    var Group: typeof ToolbarGroup;
+}
+export interface ToolbarGroupProps extends Omit<ComponentPropsWithRef<'div'>, 'aria-label' | 'role'> {
+    children: ReactNode;
+    /** Nome do grupo, quando os botões dele formam um conjunto, como os alinhamentos. */
+    label?: string;
+}
+declare function ToolbarGroup({ className, label, ...props }: ToolbarGroupProps): import("react").JSX.Element;
+export {};

package/dist/types/components/actions/Toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export { Toolbar } from './Toolbar.js';
+export type { ToolbarAppearance, ToolbarGroupProps, ToolbarOrientation, ToolbarPlacement, ToolbarProps } from './Toolbar.js';

package/dist/types/components/charts/ChartArea/ChartArea.d.ts

@@ -1,4 +1,4 @@
-import { type AxisLabelAngle, type AxisVisibility, type ChartCurve, type ChartHeight, type ChartLegendAlign, type ChartLegendPosition } from '../core/index.js';
+import { type AxisLabelAngle, type AxisVisibility, type ChartCurve, type ChartHeight, type ChartLegendAlign, type ChartLegendPosition, type MarkVisibility } from '../core/index.js';
 import { type SeriesAppearance } from '../palette/index.js';
 export interface ChartAreaSeries extends SeriesAppearance {
     label: string;
@@ -10,6 +10,8 @@ export interface ChartAreaProps {
     curve?: ChartCurve;
     defaultHiddenSeries?: readonly string[];
     emptyMessage?: string;
+    /** Formato dos valores no balao. Sem ele, vale o `formatValue`: o eixo pode sair compacto e o balao, exato. */
+    formatTooltipValue?: (value: number) => string;
     formatValue?: (value: number) => string;
     /**
      * Inclui o zero no dominio do eixo de valor. Ligado por padrao, porque marca
@@ -23,13 +25,22 @@ export interface ChartAreaProps {
     legend?: ChartLegendPosition;
     legendAlign?: ChartLegendAlign;
     onHiddenSeriesChange?: (hidden: readonly string[]) => void;
+    /** Indice da categoria mais proxima do ponteiro, ou `null` ao sair. */
+    onHoverCategory?: (index: number | null) => void;
     series: readonly ChartAreaSeries[];
-    showDataLabels?: boolean;
-    showDots?: boolean;
+    /** Valor acima de cada ponto: sempre, nunca, ou so os da serie mais proxima do ponteiro. */
+    showDataLabels?: MarkVisibility;
+    /** Pontos de cada valor: sempre, nunca, ou so os da serie mais proxima do ponteiro. */
+    showDots?: MarkVisibility;
+    /**
+     * Balao com as series da categoria mais proxima do ponteiro. Desligue para montar o proprio
+     * `ChartTooltip` pela costura; sem balao nem costura, o ponto volta a ter o `<title>`.
+     */
+    showTooltip?: boolean;
     stacked?: boolean;
     title: string;
     xAxis?: AxisVisibility;
     yAxis?: AxisVisibility;
     yAxisRight?: AxisVisibility;
 }
-export declare function ChartArea({ accent, categories, curve, defaultHiddenSeries, emptyMessage, formatValue, height, includeZero, hiddenSeries, labelAngle, legend, legendAlign, onHiddenSeriesChange, series, showDataLabels, showDots, stacked, title, xAxis, yAxis, yAxisRight, }: ChartAreaProps): import("react").JSX.Element;
+export declare function ChartArea({ accent, categories, curve, defaultHiddenSeries, emptyMessage, formatTooltipValue, formatValue, height, includeZero, hiddenSeries, labelAngle, legend, legendAlign, onHiddenSeriesChange, onHoverCategory, series, showDataLabels, showDots, showTooltip, stacked, title, xAxis, yAxis, yAxisRight, }: ChartAreaProps): import("react").JSX.Element;

package/dist/types/components/charts/ChartBar/ChartBar.d.ts

@@ -1,4 +1,4 @@
-import { type AxisLabelAngle, type AxisVisibility, type ChartHeight, type ChartLegendAlign, type ChartLegendPosition } from '../core/index.js';
+import { type AxisLabelAngle, type AxisVisibility, type ChartHeight, type ChartLegendAlign, type ChartLegendPosition, type MarkVisibility } from '../core/index.js';
 import { type SeriesAppearance } from '../palette/index.js';
 export type ChartBarOrientation = 'vertical' | 'horizontal';
 export interface ChartBarSeries extends SeriesAppearance {
@@ -10,6 +10,8 @@ export interface ChartBarProps {
     categories: readonly string[];
     defaultHiddenSeries?: readonly string[];
     emptyMessage?: string;
+    /** Formato dos valores no balao. Sem ele, vale o `formatValue`: o eixo pode sair compacto e o balao, exato. */
+    formatTooltipValue?: (value: number) => string;
     formatValue?: (value: number) => string;
     height?: ChartHeight;
     hiddenSeries?: readonly string[];
@@ -21,12 +23,17 @@ export interface ChartBarProps {
     onHoverCategory?: (index: number | null) => void;
     orientation?: ChartBarOrientation;
     series: readonly ChartBarSeries[];
-    /** Valor alem da ponta de cada barra; empilhada, o total da categoria alem da ponta da pilha. */
-    showDataLabels?: boolean;
+    /**
+     * Valor alem da ponta de cada barra; empilhada, o total da categoria alem da ponta da pilha. Em `onHover`,
+     * so os da serie da barra sob o ponteiro, ou o total da pilha sob ele.
+     */
+    showDataLabels?: MarkVisibility;
+    /** Balao com o detalhe do que esta sob o ponteiro. Desligue para montar o proprio `ChartTooltip` pela costura. */
+    showTooltip?: boolean;
     stacked?: boolean;
     title: string;
     xAxis?: AxisVisibility;
     yAxis?: AxisVisibility;
     yAxisRight?: AxisVisibility;
 }
-export declare function ChartBar({ accent, categories, defaultHiddenSeries, emptyMessage, formatValue, height, hiddenSeries, labelAngle, legend, legendAlign, onHiddenSeriesChange, onHoverCategory, orientation, series, showDataLabels, stacked, title, xAxis, yAxis, yAxisRight, }: ChartBarProps): import("react").JSX.Element;
+export declare function ChartBar({ accent, categories, defaultHiddenSeries, emptyMessage, formatTooltipValue, formatValue, height, hiddenSeries, labelAngle, legend, legendAlign, onHiddenSeriesChange, onHoverCategory, orientation, series, showDataLabels, showTooltip, stacked, title, xAxis, yAxis, yAxisRight, }: ChartBarProps): import("react").JSX.Element;

package/dist/types/components/charts/ChartCombo/ChartCombo.d.ts

@@ -1,4 +1,4 @@
-import { type AxisLabelAngle, type AxisVisibility, type ChartCurve, type ChartHeight, type ChartLegendAlign, type ChartLegendPosition } from '../core/index.js';
+import { type AxisLabelAngle, type AxisVisibility, type ChartCurve, type ChartHeight, type ChartLegendAlign, type ChartLegendPosition, type MarkVisibility } from '../core/index.js';
 import { type SeriesAppearance } from '../palette/index.js';
 export type ChartComboKind = 'bar' | 'line';
 /**
@@ -19,6 +19,11 @@ export interface ChartComboProps {
     defaultHiddenSeries?: readonly string[];
     emptyMessage?: string;
     formatRightValue?: (value: number) => string;
+    /**
+     * Formato no balao das series da esquerda. Sem ele, vale o `formatValue`: o eixo pode sair compacto e o
+     * balao, exato. As da direita seguem `formatRightValue`.
+     */
+    formatTooltipValue?: (value: number) => string;
     formatValue?: (value: number) => string;
     height?: ChartHeight;
     hiddenSeries?: readonly string[];
@@ -29,8 +34,15 @@ export interface ChartComboProps {
     /** Indice da categoria sob o ponteiro, ou `null` ao sair dela. */
     onHoverCategory?: (index: number | null) => void;
     series: readonly ChartComboSeries[];
-    showDataLabels?: boolean;
-    showDots?: boolean;
+    /**
+     * Valor de cada barra e de cada ponto. Em `onHover`, nas barras os da serie da barra sob o ponteiro; nas
+     * linhas, que nao tem alvo proprio, os da categoria sob o ponteiro.
+     */
+    showDataLabels?: MarkVisibility;
+    /** Pontos das linhas. Em `onHover`, os da categoria sob o ponteiro. */
+    showDots?: MarkVisibility;
+    /** Balao com as series da categoria sob o ponteiro, cada uma no formato do seu eixo. Desligue para montar o proprio `ChartTooltip`. */
+    showTooltip?: boolean;
     title: string;
     xAxis?: AxisVisibility;
     yAxis?: AxisVisibility;
@@ -41,4 +53,4 @@ export interface ChartComboProps {
  * eixo de valor pertence; sem nenhuma a direita, o dominio e unico e o eixo
  * direito espelha o esquerdo.
  */
-export declare function ChartCombo({ accent, categories, curve, defaultHiddenSeries, emptyMessage, formatRightValue, formatValue, height, hiddenSeries, labelAngle, legend, legendAlign, onHiddenSeriesChange, onHoverCategory, series, showDataLabels, showDots, title, xAxis, yAxis, yAxisRight, }: ChartComboProps): import("react").JSX.Element;
+export declare function ChartCombo({ accent, categories, curve, defaultHiddenSeries, emptyMessage, formatRightValue, formatTooltipValue, formatValue, height, hiddenSeries, labelAngle, legend, legendAlign, onHiddenSeriesChange, onHoverCategory, series, showDataLabels, showTooltip, showDots, title, xAxis, yAxis, yAxisRight, }: ChartComboProps): import("react").JSX.Element;

package/dist/types/components/charts/ChartDonut/ChartDonut.d.ts

@@ -7,6 +7,8 @@ export interface ChartDonutProps {
     defaultHiddenSlices?: readonly string[];
     emptyMessage?: string;
     formatPercent?: (ratio: number) => string;
+    /** Formato dos valores no balao. Sem ele, vale o `formatValue`: o eixo pode sair compacto e o balao, exato. */
+    formatTooltipValue?: (value: number) => string;
     formatValue?: (value: number) => string;
     height?: ChartHeight;
     hiddenSlices?: readonly string[];
@@ -21,6 +23,8 @@ export interface ChartDonutProps {
     sliceRadius?: number;
     showCenter?: boolean;
     showLegendValues?: boolean;
+    /** Balao com a fatia sob o ponteiro, o valor e a parte do total. Desligue para montar o proprio `ChartTooltip`. */
+    showTooltip?: boolean;
     slices: readonly ChartSlice[];
     /** Fracao do total abaixo da qual a fatia entra no agrupamento. */
     smallSliceThreshold?: number;
@@ -28,4 +32,4 @@ export interface ChartDonutProps {
     thickness?: number;
     title: string;
 }
-export declare function ChartDonut({ accent, centerLabel, defaultHiddenSlices, emptyMessage, formatPercent, formatValue, height, hiddenSlices, legend, legendAlign, onHiddenSlicesChange, onHoverSlice, otherLabel, showCenter, showLegendValues, sliceRadius, slices, smallSliceThreshold, thickness, title, }: ChartDonutProps): import("react").JSX.Element;
+export declare function ChartDonut({ accent, centerLabel, defaultHiddenSlices, emptyMessage, formatPercent, formatTooltipValue, formatValue, height, hiddenSlices, legend, legendAlign, onHiddenSlicesChange, onHoverSlice, otherLabel, showCenter, showLegendValues, showTooltip, sliceRadius, slices, smallSliceThreshold, thickness, title, }: ChartDonutProps): import("react").JSX.Element;

package/dist/types/components/charts/ChartGauge/ChartGauge.d.ts

@@ -0,0 +1,83 @@
+import { type ChartHeight, type ChartLegendPosition, type MarkVisibility } from '../core/index.js';
+import { type SeriesAppearance, type SeriesIntent } from '../palette/index.js';
+/** Uma faixa da escala. A cor segue a regra da família: `color`, depois `intent`, depois a paleta. */
+export interface ChartGaugeSegment extends SeriesAppearance {
+    label?: string;
+    /** Limite superior, na unidade de `segmentUnit`. Omitido na última faixa, vai até `max`. */
+    to?: number;
+}
+export interface ChartGaugeTarget {
+    label?: string;
+    value: number;
+}
+export interface ChartGaugeDelta {
+    /** Formato do módulo da variação; o sinal é do componente. */
+    format?: (delta: number) => string;
+    /** Sem ela, positiva quando sobe e negativa quando desce. */
+    intent?: SeriesIntent;
+    label?: string;
+    value: number;
+}
+export type ChartGaugeIndicator = 'fill' | 'needle' | 'fillAndNeedle';
+export type ChartGaugeSegmentStyle = 'track' | 'rim' | 'hidden';
+export type ChartGaugeScaleLabels = 'hidden' | 'minMax' | 'ticks';
+export type ChartGaugeSize = 'default' | 'compact';
+export type ChartGaugeTicks = 'hidden' | 'major' | 'majorAndMinor';
+/** Leitura contra a meta: a mesma palavra na exibição e na unidade das faixas. */
+export type ChartGaugeValueDisplay = 'value' | 'percentOfTarget';
+export type ChartGaugeSegmentUnit = 'value' | 'percentOfTarget';
+export interface ChartGaugeProps {
+    accent?: string;
+    /** Troca a frase montada do `aria-valuetext`. */
+    ariaValueText?: string;
+    /** Texto sob o valor. Sem ele, na leitura contra a meta, a outra leitura. */
+    centerLabel?: string;
+    /** O arco assume a cor da faixa onde o valor está. */
+    colorBySegment?: boolean;
+    /** Cor do arco fora de `colorBySegment`. Vence `intent`. */
+    color?: string;
+    delta?: ChartGaugeDelta;
+    emptyMessage?: string;
+    /** Ângulo final, em graus a partir do topo. */
+    endAngle?: number;
+    /** Formato exato do balão e, na leitura contra a meta, do `aria-valuetext`. */
+    formatTooltipValue?: (value: number) => string;
+    /** Formato do centro, da escala e da meta. */
+    formatValue?: (value: number) => string;
+    height?: ChartHeight;
+    indicator?: ChartGaugeIndicator;
+    intent?: SeriesIntent;
+    legend?: ChartLegendPosition;
+    loading?: boolean;
+    /** Fim da escala. Omitido com meta, vai a 120% dela. */
+    max?: number;
+    min?: number;
+    /** De onde o arco preenchido parte. Sem ele, o zero quando a escala o cruza; senão, `min`. */
+    origin?: number;
+    scaleLabels?: ChartGaugeScaleLabels;
+    segmentStyle?: ChartGaugeSegmentStyle;
+    segmentUnit?: ChartGaugeSegmentUnit;
+    segments?: readonly ChartGaugeSegment[];
+    showCenter?: boolean;
+    showSegmentLabels?: MarkVisibility;
+    showTooltip?: boolean;
+    size?: ChartGaugeSize;
+    /** Ângulo inicial, em graus a partir do topo. */
+    startAngle?: number;
+    target?: ChartGaugeTarget;
+    /** Espessura do arco, em pixels. No compacto, até 10. */
+    thickness?: number;
+    tickCount?: number;
+    ticks?: ChartGaugeTicks;
+    title: string;
+    /** Raio das pontas, limitado a metade da espessura. Sem valor, o token de raio pequeno. */
+    trackRadius?: number;
+    /** `null` é sem dado. */
+    value: number | null;
+    valueDisplay?: ChartGaugeValueDisplay;
+}
+/**
+ * Medidor de um valor numa escala com faixas de significado. É `role="meter"`: o leitor de tela ouve o valor, a faixa,
+ * a meta e a variação. Carregando ou sem dado, vira `role="img"`.
+ */
+export declare function ChartGauge({ accent, ariaValueText, centerLabel, colorBySegment, color, delta, emptyMessage, endAngle, formatTooltipValue, formatValue, height, indicator, intent, legend, loading, max, min, origin, scaleLabels, segmentStyle, segmentUnit, segments, showCenter, showSegmentLabels, showTooltip, size, startAngle, target, thickness, tickCount, ticks, title, trackRadius, value, valueDisplay, }: ChartGaugeProps): import("react").JSX.Element;