@foris/avocado-suite 1.10.3 → 1.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist/avocado-suite.es.js +11391 -10590
  2. package/dist/avocado-suite.umd.js +148 -148
  3. package/dist/components/bar-chart/BarChart.d.ts +36 -0
  4. package/dist/components/bar-chart/BarChart.test.d.ts +1 -0
  5. package/dist/components/bar-chart/barChart.types.d.ts +12 -0
  6. package/dist/components/bar-chart/index.d.ts +3 -0
  7. package/dist/components/bar-chart/utils/barChart.util.d.ts +4 -0
  8. package/dist/components/bar-chart/utils/barChart.util.test.d.ts +1 -0
  9. package/dist/components/donut/Donut.d.ts +39 -12
  10. package/dist/components/donut/Donut.test.d.ts +1 -0
  11. package/dist/components/donut/donut-labels/DonutLabels.d.ts +1 -1
  12. package/dist/components/donut/donut-legend/DonutLegend.d.ts +1 -1
  13. package/dist/components/donut/donut.util.d.ts +58 -0
  14. package/dist/components/donut/donut.util.test.d.ts +1 -0
  15. package/dist/components/header-navigation/HeaderNavigation.d.ts +15 -2
  16. package/dist/components/header-navigation/index.d.ts +1 -1
  17. package/dist/components/line-chart/LineChart.d.ts +5 -0
  18. package/dist/components/line-chart/LineChart.test.d.ts +1 -0
  19. package/dist/components/line-chart/components/line-chart-guide/LineChartGuide.d.ts +17 -0
  20. package/dist/components/line-chart/components/line-chart-guide/index.d.ts +2 -0
  21. package/dist/components/line-chart/hooks/useReducedMotion.d.ts +2 -0
  22. package/dist/components/line-chart/index.d.ts +3 -0
  23. package/dist/components/line-chart/lineChart.constants.d.ts +16 -0
  24. package/dist/components/line-chart/types/lineChart.types.d.ts +90 -0
  25. package/dist/components/line-chart/utils/lineChart.utils.d.ts +11 -0
  26. package/dist/components/line-chart/utils/lineChart.utils.test.d.ts +1 -0
  27. package/dist/components/progress-bar/ProgressBar.d.ts +9 -11
  28. package/dist/components/progress-bar-base/ProgressBarBase.d.ts +33 -0
  29. package/dist/components/progress-bar-base/ProgressBarBase.test.d.ts +0 -0
  30. package/dist/components/progress-bar-base/ProgressBarBase.types.test.d.ts +1 -0
  31. package/dist/components/progress-bar-base/index.d.ts +2 -0
  32. package/dist/components/progress-bar-base/progressBarBase.util.d.ts +20 -0
  33. package/dist/components/segmented-progress/SegmentedProgress.d.ts +13 -0
  34. package/dist/components/segmented-progress/SegmentedProgress.test.d.ts +0 -0
  35. package/dist/components/segmented-progress/index.d.ts +2 -0
  36. package/dist/constants/chart.constants.d.ts +5 -0
  37. package/dist/index.d.ts +14 -2
  38. package/dist/shared/components/chart-legend/ChartLegend.d.ts +6 -0
  39. package/dist/shared/components/chart-legend/index.d.ts +1 -0
  40. package/dist/shared/components/chart-tooltip/ChartTooltip.d.ts +10 -0
  41. package/dist/shared/components/chart-tooltip/index.d.ts +2 -0
  42. package/dist/style.css +1 -1
  43. package/dist/types/chart.types.d.ts +11 -0
  44. package/dist/utils/chart.util.d.ts +15 -0
  45. package/dist/utils/chart.util.test.d.ts +1 -0
  46. package/package.json +5 -3
@@ -0,0 +1,36 @@
1
+ import { type ReactNode } from 'react';
2
+ import type { BarChartReferenceLine, BarChartSeries } from './barChart.types';
3
+ export interface BarChartProps<Row> {
4
+ /** One row per category. */
5
+ data: readonly Row[];
6
+ /** Row key of the category shown on the X axis. */
7
+ xKey: keyof Row & string;
8
+ /**
9
+ * Values drawn per category: one bar each, grouped in this order. Keep it stable (`useMemo` or a
10
+ * module constant): a new array re-registers every bar in the Recharts store.
11
+ */
12
+ series: readonly BarChartSeries<Row>[];
13
+ /** Accessible name of the chart. */
14
+ label: string;
15
+ /** Chart height in px. @default 300 */
16
+ height?: number;
17
+ /** Dashed line at a consumer-computed value (average, goal, threshold). */
18
+ referenceLine?: BarChartReferenceLine;
19
+ /** Shows the series, and the reference line, below the plot. */
20
+ showLegend?: boolean;
21
+ /** Shows the category and its series values on hover. */
22
+ showTooltip?: boolean;
23
+ /** Highlights the hovered category. */
24
+ showCursor?: boolean;
25
+ /** Formats Y ticks and tooltip values. Keep it stable (`useCallback`). */
26
+ formatValue?: (value: number) => string;
27
+ /** Extra class for the root element. */
28
+ className?: string;
29
+ /**
30
+ * Custom tooltip content for the hovered row; replaces the series rows. Return `null` to show
31
+ * the series rows. Requires `showTooltip`. Keep it stable (`useCallback`).
32
+ */
33
+ renderTooltip?: (row: Row) => ReactNode;
34
+ }
35
+ declare const BarChart: <Row>({ data, xKey, series, label, height, referenceLine, showLegend, showTooltip, showCursor, formatValue, className, renderTooltip, }: BarChartProps<Row>) => import("react/jsx-runtime").JSX.Element | null;
36
+ export default BarChart;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,12 @@
1
+ export interface BarChartSeries<Row> {
2
+ /** Row key holding the series value; `null` or `undefined` draws no bar. */
3
+ key: keyof Row & string;
4
+ /** Series name in the legend and tooltip. */
5
+ label: string;
6
+ }
7
+ export interface BarChartReferenceLine {
8
+ /** Y value of the line; the Y axis always includes it. */
9
+ value: number;
10
+ /** Line name in the legend. */
11
+ label: string;
12
+ }
@@ -0,0 +1,3 @@
1
+ export { default } from './BarChart';
2
+ export type { BarChartProps } from './BarChart';
3
+ export type { BarChartReferenceLine, BarChartSeries, } from './barChart.types';
@@ -0,0 +1,4 @@
1
+ export declare const BAR_GAP = 4;
2
+ export declare const BAR_RADIUS = 2;
3
+ export declare const BAR_CHART_HEIGHT = 300;
4
+ export declare const getBarSize: (plotWidth: number, categoryCount: number, seriesCount: number) => number;
@@ -1,18 +1,45 @@
1
- import { FC } from 'react';
2
- export interface IDonutItem {
3
- name: string;
4
- percentage: number;
5
- value: number;
6
- }
1
+ import { type FC, type ReactNode } from 'react';
2
+ import { type DonutCenterMode, type DonutSegment, type DonutSize, type IDonutItem } from './donut.util';
7
3
  export interface DonutProps {
8
- /** overwrite className */
4
+ /** Overwrite className */
9
5
  className?: string;
10
- /** data */
11
- data: IDonutItem[];
12
- /** height */
13
- height?: string;
14
- /** width */
6
+ /** Slices of the ring; proportions come from `value`. */
7
+ segments?: DonutSegment[];
8
+ /** @deprecated Use `segments`. Proportions come from `percentage`, as in the SVG Donut. */
9
+ data?: IDonutItem[];
10
+ /** Ring diameter: `xs` 40, `sm` 56, `md` 96, `lg` 160 px, or `auto` to fill the parent. @default 'sm' */
11
+ size?: DonutSize;
12
+ /** Show the content inside the hole. @default true, false with legacy props */
13
+ showCenter?: boolean;
14
+ /** Custom center content; replaces `centerValue` and `centerLabel`. */
15
+ children?: ReactNode;
16
+ /**
17
+ * `fixed` shows `centerValue` (or the first segment share); `activeSegment` shows the hovered
18
+ * slice label and falls back to `centerValue`, so without it the center is empty until hover.
19
+ * @default 'activeSegment' from 160 px, 'fixed' below
20
+ */
21
+ centerMode?: DonutCenterMode;
22
+ /** Main center text, e.g. a total. */
23
+ centerValue?: string;
24
+ /** Secondary text below `centerValue`. */
25
+ centerLabel?: string;
26
+ /** Enable hover on the slices. @default true from 160 px, false below */
27
+ interactive?: boolean;
28
+ /** Show the hovered slice value and share outside the ring. Requires `interactive`. @default true from 160 px */
29
+ showCallout?: boolean;
30
+ /** Chart adapters only: Recharts nodes rendered inside the PieChart (e.g. Legend). */
31
+ chartChildren?: ReactNode;
32
+ /** Chart adapters only: slice highlighted before user interaction. */
33
+ defaultIndex?: number;
34
+ /** Chart adapters only: caps `size="auto"`. */
35
+ autoMaxDiameter?: number;
36
+ /** Chart adapters only: height reserved below the ring when `size="auto"`. */
37
+ autoLegendReserve?: number;
38
+ /** @deprecated Use `size`. Without `size`: px maps to a diameter, relative values to `'auto'`, none to 300 px. */
15
39
  width?: string;
40
+ /** @deprecated Use `size`. See `width`. */
41
+ height?: string;
16
42
  }
17
43
  declare const Donut: FC<DonutProps>;
18
44
  export default Donut;
45
+ export type { DonutSegment, DonutSize, DonutCenterMode, IDonutItem, } from './donut.util';
@@ -0,0 +1 @@
1
+ export {};
@@ -1,5 +1,5 @@
1
1
  import { FC } from 'react';
2
- import { IDonutItem } from '../Donut';
2
+ import { type IDonutItem } from '../donut.util';
3
3
  export interface DonutLabelsProps {
4
4
  /** overwrite className */
5
5
  className?: string;
@@ -1,5 +1,5 @@
1
1
  import { FC } from 'react';
2
- import { IDonutItem } from '../Donut';
2
+ import { type IDonutItem } from '../donut.util';
3
3
  export interface DonutLegendProps {
4
4
  /** overwrite className */
5
5
  className?: string;
@@ -0,0 +1,58 @@
1
+ import type { Color } from '../../../../avocado-icons';
2
+ export declare const DONUT_PALETTE: `${Color}`[];
3
+ /** Colors of the SVG Donut (core `$donutColors`), kept for the deprecated `data` API. */
4
+ export declare const LEGACY_DONUT_COLORS: `${Color}`[];
5
+ export declare const DONUT_ANALYTIC_THRESHOLD = 160;
6
+ export declare const ACTIVE_CENTER_MAX_FONT_SIZE = 14;
7
+ /** Size of the legacy SVG Donut when no dimension was passed. */
8
+ export declare const LEGACY_DONUT_DIAMETER = 300;
9
+ export declare const DONUT_SIZE_MAP: {
10
+ readonly xs: 40;
11
+ readonly sm: 56;
12
+ readonly md: 96;
13
+ readonly lg: 160;
14
+ };
15
+ export type DonutSize = keyof typeof DONUT_SIZE_MAP | 'auto';
16
+ export type DonutCenterMode = 'fixed' | 'activeSegment';
17
+ export interface DonutSegment {
18
+ label: string;
19
+ value: number;
20
+ /** Design-system color name, e.g. `'success-50'`. Defaults to the palette by index. */
21
+ color?: `${Color}`;
22
+ }
23
+ /** Item consumed by `DonutLegend` and `DonutLabels`. */
24
+ export interface IDonutItem {
25
+ name: string;
26
+ percentage: number;
27
+ value: number;
28
+ /** Design-system color name. Defaults to the legacy SVG Donut colors by index. */
29
+ color?: `${Color}`;
30
+ }
31
+ interface DonutBehavior {
32
+ interactive: boolean;
33
+ showCallout: boolean;
34
+ centerMode: DonutCenterMode;
35
+ }
36
+ interface DonutLayout {
37
+ containerSize: number;
38
+ innerRadius: number;
39
+ outerRadius: number;
40
+ }
41
+ export declare const toColorVar: (color: `${Color}`) => string;
42
+ export declare const getSegmentColor: ({ color }: DonutSegment, index: number) => `${Color}`;
43
+ export declare const getDonutItemColor: ({ color }: IDonutItem, index: number) => `${Color}`;
44
+ export declare const resolveAutoDiameter: (width: number, height: number, { maxDiameter, legendReserve }?: {
45
+ maxDiameter?: number | undefined;
46
+ legendReserve?: number | undefined;
47
+ }) => number;
48
+ export declare const resolveLegacySize: (width?: string, height?: string) => DonutSize | number;
49
+ export declare const fromLegacyData: (data: IDonutItem[]) => DonutSegment[];
50
+ export declare const resolveDonutDiameter: (size: DonutSize | number, autoDiameter?: number) => number;
51
+ export declare const getDonutLayout: (diameter: number, showCallout: boolean) => DonutLayout;
52
+ export declare const getCenterFontSize: (diameter: number, innerDiameter: number, centerMode: DonutCenterMode) => number;
53
+ export declare const getDatumPercent: (datum: DonutSegment, segments: DonutSegment[]) => number;
54
+ export declare const resolveDonutBehavior: (analytic: boolean, overrides?: Partial<DonutBehavior>) => DonutBehavior;
55
+ /** Maps `segments` to the items of `DonutLegend` and `DonutLabels`, keeping the ring colors. */
56
+ export declare const toDonutLegendItems: (segments: DonutSegment[]) => IDonutItem[];
57
+ export declare const getDonutAriaLabel: (segments: DonutSegment[], centerText?: string) => string;
58
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -14,6 +14,19 @@ export type HeaderNavigationVisual = {
14
14
  src: string;
15
15
  alt: string;
16
16
  };
17
+ /** Solid preset, or a decorative photo with a fixed contrast overlay shape. */
18
+ export type HeaderNavigationImageBackground = {
19
+ type: 'image';
20
+ src: string;
21
+ /**
22
+ * CSS color for the tinted overlay gradient (`rgb()`, `hsl()`, hex, or
23
+ * `var(--color-*)`). When omitted, the packaged brand gradient on
24
+ * `web-cyan-100` is used. Also paints the header surface when the photograph
25
+ * is loading or fails.
26
+ */
27
+ overlayColor?: string;
28
+ };
29
+ export type HeaderNavigationBackground = 'default' | 'brand' | HeaderNavigationImageBackground;
17
30
  /** Reusable page navigation, with content and actions supplied by its host. */
18
31
  export interface HeaderNavigationProps extends HTMLAttributes<HTMLElement> {
19
32
  /** Page title, rendered as the primary heading. */
@@ -28,8 +41,8 @@ export interface HeaderNavigationProps extends HTMLAttributes<HTMLElement> {
28
41
  menuLabel?: string;
29
42
  /** Disables the overflow trigger. */
30
43
  menuDisabled?: boolean;
31
- /** Gray by default; brand selects the Figma blue in either theme. */
32
- background?: 'default' | 'brand';
44
+ /** Gray by default, brand blue, or a full-bleed hero photograph. */
45
+ background?: HeaderNavigationBackground;
33
46
  /** Optional leading icon or image. */
34
47
  leadingVisual?: HeaderNavigationVisual;
35
48
  /** Displays the packaged pattern when true, or a caller-provided pattern URL. */
@@ -1,2 +1,2 @@
1
1
  export { default } from './HeaderNavigation';
2
- export type { HeaderNavigationProps, HeaderNavigationVisual, } from './HeaderNavigation';
2
+ export type { HeaderNavigationBackground, HeaderNavigationImageBackground, HeaderNavigationProps, HeaderNavigationVisual, } from './HeaderNavigation';
@@ -0,0 +1,5 @@
1
+ import type { LineChartProps, LineChartRow } from './types/lineChart.types';
2
+ export type { LineChartProps } from './types/lineChart.types';
3
+ /** Renders ordered categories with Suite presentation and native Recharts inspection. */
4
+ declare function LineChart<Row extends object = LineChartRow>({ data, xKey, series, label, summary, includeZero, showDots, showArea, maxSeries, curveType, variant, height, formatX, formatValue, reference, animate, showLegend, showTooltip, showCursor, renderTooltip, className, }: LineChartProps<Row>): import("react/jsx-runtime").JSX.Element | null;
5
+ export default LineChart;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,17 @@
1
+ /** Cursor shape for a composed Recharts Tooltip inside LineChart. */
2
+ export interface LineChartGuideProps {
3
+ /** Animate category changes unless reduced motion is preferred. @default true */
4
+ animate?: boolean;
5
+ /** Resolved guide endpoints injected by the native Recharts cursor. */
6
+ points?: readonly {
7
+ x: number;
8
+ y: number;
9
+ }[];
10
+ /** Cursor class supplied by Recharts. */
11
+ className?: string;
12
+ }
13
+ /**
14
+ * Slides only the vertical guide; Recharts keeps tooltip values and active points immediate.
15
+ * Initial placement and plot resizes snap directly to the resolved coordinates.
16
+ */
17
+ export declare function LineChartGuide({ animate, points, className, }: LineChartGuideProps): import("react/jsx-runtime").JSX.Element | null;
@@ -0,0 +1,2 @@
1
+ export { LineChartGuide } from './LineChartGuide';
2
+ export type { LineChartGuideProps } from './LineChartGuide';
@@ -0,0 +1,2 @@
1
+ /** Tracks the browser preference and removes its subscription on unmount. */
2
+ export declare function useReducedMotion(): boolean;
@@ -0,0 +1,3 @@
1
+ export { default } from './LineChart';
2
+ export { default as LineChart } from './LineChart';
3
+ export type { LineChartProps, LineChartRow, LineChartSeries, LineChartVariant, LineChartCurveType, LineChartReference, } from './types/lineChart.types';
@@ -0,0 +1,16 @@
1
+ /** Shared geometry and defaults for the line renderer and its validation. */
2
+ export declare const LINE_CHART_HEIGHT = 320;
3
+ export declare const LINE_CHART_MAX_SERIES = 4;
4
+ export declare const LINE_CHART_ANIMATION_MS = 350;
5
+ export declare const LINE_CHART_STROKE_WIDTH = 2;
6
+ export declare const LINE_CHART_DOT_RADIUS = 3;
7
+ export declare const LINE_CHART_ACTIVE_DOT_RADIUS = 4;
8
+ /** Automatic dots are drawn only while neighboring points are at least this far apart. */
9
+ export declare const LINE_CHART_DOT_MIN_SPACING = 24;
10
+ export declare const LINE_CHART_TICK_GAP = 16;
11
+ export declare const LINE_CHART_MARGIN: {
12
+ top: number;
13
+ right: number;
14
+ bottom: number;
15
+ left: number;
16
+ };
@@ -0,0 +1,90 @@
1
+ import type { ReactNode } from 'react';
2
+ import type { ChartColor } from '../../../types/chart.types';
3
+ /** A chart row. X values are ordered categories; series values must be finite numbers or missing. */
4
+ export type LineChartRow = Record<string, unknown>;
5
+ /**
6
+ * A series is identified by its data key, independently of its display label.
7
+ * Without `color`, series follow the shared chart palette in declaration order; preserve that
8
+ * order across data updates.
9
+ */
10
+ export interface LineChartSeries<Row extends object = LineChartRow> {
11
+ /** Unique row key whose value is a finite number, null, or undefined in each row. */
12
+ key: keyof Row & string;
13
+ /** Human-readable name used by the legend and tooltip. */
14
+ label: string;
15
+ /** Color token for the line, dots, area, legend and tooltip. Defaults to the palette by position. */
16
+ color?: ChartColor;
17
+ }
18
+ /** Selects the full-axis or compact chart presentation. */
19
+ export type LineChartVariant = 'full' | 'compact';
20
+ /** Selects the interpolation of each uninterrupted line segment. */
21
+ export type LineChartCurveType = 'linear' | 'monotone';
22
+ /** Consumer-owned reference or target. It never expands the data-derived Y domain. */
23
+ export interface LineChartReference {
24
+ value: number;
25
+ label: string;
26
+ /** Color token for the line and its legend entry. @default 'neutral-70' */
27
+ color?: ChartColor;
28
+ }
29
+ /** Describes whether the surrounding composition should show content, empty, or error. */
30
+ export type LineChartValidationResult = {
31
+ status: 'valid';
32
+ } | {
33
+ status: 'empty';
34
+ reason: 'no-data' | 'no-series' | 'no-values';
35
+ } | {
36
+ status: 'invalid';
37
+ reason: 'invalid-limit' | 'series-limit' | 'duplicate-series' | 'invalid-series' | 'invalid-x' | 'invalid-value';
38
+ };
39
+ /**
40
+ * Props for an ordered, categorical line chart. A date formatter changes labels, not X spacing.
41
+ * Suite owns tooltip, legend and cursor presentation; consumers may customize tooltip content.
42
+ * Loading, empty, and request-error presentation belongs to the surrounding composition.
43
+ */
44
+ export interface LineChartProps<Row extends object = LineChartRow> {
45
+ /** Ordered observations; replace the array to refresh values. Missing values break the line; zero is plotted. */
46
+ data: readonly Row[];
47
+ /** Row key containing each category's string or numeric label. */
48
+ xKey: keyof Row & string;
49
+ /** One or more labeled, uniquely keyed numeric series. */
50
+ series: readonly LineChartSeries<Row>[];
51
+ /** Accessible name for the chart. */
52
+ label: string;
53
+ /** Accessible explanation of the measure and comparison. */
54
+ summary?: string;
55
+ /** Include zero in the data-derived Y domain. Useful when migrating zero-based charts. @default false */
56
+ includeZero?: boolean;
57
+ /** Show the series legend. @default false */
58
+ showLegend?: boolean;
59
+ /** Show inspected values. Enables pointer and keyboard inspection. @default false */
60
+ showTooltip?: boolean;
61
+ /** Show the vertical inspection guide, independently of tooltip visibility. Enables pointer and keyboard inspection. @default false */
62
+ showCursor?: boolean;
63
+ /** Replace tooltip content for the original row. Null or undefined uses the standard content. */
64
+ renderTooltip?: (row: Row) => ReactNode;
65
+ /**
66
+ * Show permanent point marks, independently of active inspection marks. `'auto'` shows them
67
+ * while neighboring points are at least 24 px apart. @default 'auto'
68
+ */
69
+ showDots?: boolean | 'auto';
70
+ /** Fill below the line when exactly one series is configured. @default false */
71
+ showArea?: boolean;
72
+ /** Maximum configured series; exceeding it is an invalid input, never truncated. @default 4 */
73
+ maxSeries?: number;
74
+ /** Interpolation between present observations. Missing observations always remain gaps. @default 'linear' */
75
+ curveType?: LineChartCurveType;
76
+ /** Full axes or an explicit compact presentation without axes. @default 'full' */
77
+ variant?: LineChartVariant;
78
+ /** Chart height in CSS pixels, including the legend. @default 320 */
79
+ height?: number;
80
+ /** Format a categorical X value for the X axis. */
81
+ formatX?: (value: string | number) => string;
82
+ /** Format a numeric observation for the Y axis. */
83
+ formatValue?: (value: number) => string;
84
+ /** Optional dashed target, shown only when inside the data domain and named in the legend. */
85
+ reference?: LineChartReference;
86
+ /** Enable native Recharts series animation unless reduced motion is preferred. @default true */
87
+ animate?: boolean;
88
+ /** Optional class on the outer chart element. */
89
+ className?: string;
90
+ }
@@ -0,0 +1,11 @@
1
+ import type { LineChartSeries, LineChartValidationResult } from '../types/lineChart.types';
2
+ /** Validates chart input without changing the consumer's rows or silently dropping series. */
3
+ export declare function validateLineChartInput<Row extends object>(data: readonly Row[], xKey: keyof Row & string, series: readonly LineChartSeries<Row>[], maxSeries?: number): LineChartValidationResult;
4
+ /** Returns a finite, non-degenerate domain with a 5% visual margin around real values. */
5
+ export declare function getLineChartDomain<Row extends object>(data: readonly Row[], series: readonly LineChartSeries<Row>[], includeZero?: boolean): [number, number];
6
+ /**
7
+ * Resolves `showDots`. Without bars, ComposedChart spreads categories edge to edge, so
8
+ * neighboring points are `plotWidth / (pointCount - 1)` apart. A lone point is only visible
9
+ * as a dot.
10
+ */
11
+ export declare function getLineChartDotsVisible(showDots: boolean | 'auto', plotWidth: number, pointCount: number): boolean;
@@ -1,13 +1,11 @@
1
- import { FC } from 'react';
2
- export interface ProgressBarProps {
3
- /** overwrite className */
4
- className?: string;
5
- /** done */
6
- done?: number;
7
- /** inProgress */
8
- inProgress?: number;
9
- /** total */
10
- total: number;
11
- }
1
+ import type { FC } from 'react';
2
+ import type { SegmentedProgressProps } from '../segmented-progress';
3
+ /** @deprecated Use `SegmentedProgressProps`. */
4
+ export type ProgressBarProps = SegmentedProgressProps;
5
+ /**
6
+ * @deprecated Use `SegmentedProgress`: same props, same segmented rendering.
7
+ * In the next major version, `ProgressBar` becomes the single-track progress
8
+ * component exported today as `ProgressBarBase`.
9
+ */
12
10
  declare const ProgressBar: FC<ProgressBarProps>;
13
11
  export default ProgressBar;
@@ -0,0 +1,33 @@
1
+ import type { FC } from 'react';
2
+ /** Thickness of the track: sm 4 px, md 8 px, lg 12 px. */
3
+ export type ProgressBarBaseSize = 'sm' | 'md' | 'lg';
4
+ /** Where the percentage renders: after the track or below it. */
5
+ export type ProgressBarBasePercentagePosition = 'end' | 'bottom';
6
+ export interface ProgressBarBaseProps {
7
+ /** Current value, in the unit of min and max. Without a finite value the track renders empty. */
8
+ value?: number;
9
+ /** Start of the range. Defaults to 0. */
10
+ min?: number;
11
+ /** End of the range. Defaults to 100. */
12
+ max?: number;
13
+ /** Thickness of the track. Defaults to md. */
14
+ size?: ProgressBarBaseSize;
15
+ /** Shows the percentage next to the track. */
16
+ showPercentage?: boolean;
17
+ /** Where the percentage renders. Defaults to end. */
18
+ percentagePosition?: ProgressBarBasePercentagePosition;
19
+ /** Decimal places of the percentage. Defaults to 0. */
20
+ percentageDecimals?: number;
21
+ /** Loops an indicator through the track while no value exists yet. */
22
+ indeterminate?: boolean;
23
+ /** Class added to the root. */
24
+ className?: string;
25
+ /** Accessible name, when no visible text names the progress bar. */
26
+ 'aria-label'?: string;
27
+ /** Id of the composed element that names the progress bar, such as its title. */
28
+ 'aria-labelledby'?: string;
29
+ /** Id of the composed element that describes the progress bar, such as a status message. */
30
+ 'aria-describedby'?: string;
31
+ }
32
+ declare const ProgressBarBase: FC<ProgressBarBaseProps>;
33
+ export default ProgressBarBase;
@@ -0,0 +1,2 @@
1
+ export { default } from './ProgressBarBase';
2
+ export type { ProgressBarBasePercentagePosition, ProgressBarBaseProps, ProgressBarBaseSize, } from './ProgressBarBase';
@@ -0,0 +1,20 @@
1
+ /** A value placed within its range, ready for the fill width and the ARIA values. */
2
+ export interface NormalizedProgress {
3
+ /** Start of the range exposed to assistive technology. */
4
+ min: number;
5
+ /** End of the range exposed to assistive technology. */
6
+ max: number;
7
+ /** The value limited to the range, or undefined when there is no data to show. */
8
+ value?: number;
9
+ /** Where the value sits within the range, from 0 to 100. */
10
+ percent: number;
11
+ }
12
+ /**
13
+ * Places `value` within `min`–`max`, limiting it to the range. An invalid range
14
+ * — a non-finite bound, or `max` not above `min` — falls back to 0–100 with no
15
+ * value, and so does a missing or non-finite `value`: both render the empty
16
+ * "no data" track.
17
+ */
18
+ export declare const normalizeProgress: (value: number | undefined, min: number, max: number) => NormalizedProgress;
19
+ /** Integer by default; an invalid decimal count falls back to the nearest valid one. */
20
+ export declare const formatPercentage: (percent: number, decimals: number) => string;
@@ -0,0 +1,13 @@
1
+ import type { FC } from 'react';
2
+ export interface SegmentedProgressProps {
3
+ /** Class added to the track. */
4
+ className?: string;
5
+ /** Completed amount, in the same unit as total. */
6
+ done?: number;
7
+ /** Amount in progress, in the same unit as total. */
8
+ inProgress?: number;
9
+ /** Maximum amount. */
10
+ total: number;
11
+ }
12
+ declare const SegmentedProgress: FC<SegmentedProgressProps>;
13
+ export default SegmentedProgress;
@@ -0,0 +1,2 @@
1
+ export { default } from './SegmentedProgress';
2
+ export type { SegmentedProgressProps } from './SegmentedProgress';
@@ -0,0 +1,5 @@
1
+ import type { ChartColor } from '../types/chart.types';
2
+ /** Shared chart colors in legacy declaration order; repeat only after all 17 colors. */
3
+ export declare const chartColors: string[];
4
+ /** Default reference line color, shared by every chart. */
5
+ export declare const CHART_REFERENCE_COLOR: ChartColor;
package/dist/index.d.ts CHANGED
@@ -18,12 +18,14 @@ import DatePicker from './components/date-picker/DatePicker';
18
18
  import Divider from './components/divider/Divider';
19
19
  import Dropzone from './components/dropzone/Dropzone';
20
20
  import FileUpload from './components/file-upload/FileUpload';
21
+ import BarChart from './components/bar-chart';
21
22
  import Donut from './components/donut/Donut';
22
23
  import DonutLabels from './components/donut/donut-labels/DonutLabels';
23
24
  import DonutLegend from './components/donut/donut-legend/DonutLegend';
24
25
  import DropdownButton from './components/dropdown-button/DropdownButton';
25
26
  import Heading from './components/heading/Heading';
26
27
  import Link from './components/link/Link';
28
+ import LineChart from './components/line-chart';
27
29
  import Loading from './components/loading/Loading';
28
30
  import MatrixTable from './components/matrix-table';
29
31
  import Menu from './components/menu/Menu';
@@ -33,8 +35,10 @@ import Pill from './components/Pill/Pill';
33
35
  import PreviewerMarkdown from './components/previewer-markdown/PreviewerMarkdown';
34
36
  import Processing from './components/processing/Processing';
35
37
  import ProgressBar from './components/progress-bar/ProgressBar';
38
+ import ProgressBarBase from './components/progress-bar-base';
36
39
  import RadioButton from './components/radio-button/RadioButton';
37
40
  import RoundButton from './components/round-button/RoundButton';
41
+ import SegmentedProgress from './components/segmented-progress';
38
42
  import Select from './components/select/Select';
39
43
  import SelectPagination from './components/select-pagination/SelectPagination';
40
44
  import SkeletonBase from './components/skeleton-base/SkeletonBase';
@@ -68,7 +72,7 @@ import { toast } from 'react-toastify';
68
72
  * Hooks
69
73
  */
70
74
  export { useFloatingPortal } from './hooks/useFloatingPortal';
71
- export { Banner, Beacon, Header, HeaderNavigation, ContextualNavigation, Hotspot, NavList, Drawer, AccessPanel, AccountMenu, SidebarMenu, Weekly, WeeklyGroup, Accordion, Box, Breadcrumbs, Button, Card, CardAccordion, CardNotification, Checkbox, DataCard, DataTable, DatePicker, Divider, Dropzone, FileUpload, Donut, DonutLabels, DonutLegend, DropdownButton, Heading, Link, Loading, MatrixTable, Menu, Modal, Pager, Pill, PreviewerMarkdown, Processing, ProgressBar, RadioButton, RoundButton, Select, SelectPagination, SkeletonBase, SkeletonCircle, Stepper, Switch, Tabs, Tag, Text, TextField, Textarea, ThemeProvider, ThemeStore, LocaleStore, Timer, Toaster, Tooltip, Table, toast, };
75
+ export { Banner, Beacon, Header, HeaderNavigation, ContextualNavigation, Hotspot, NavList, Drawer, AccessPanel, AccountMenu, SidebarMenu, Weekly, WeeklyGroup, Accordion, Box, Breadcrumbs, Button, Card, CardAccordion, CardNotification, Checkbox, DataCard, DataTable, DatePicker, Divider, Dropzone, FileUpload, BarChart, Donut, DonutLabels, DonutLegend, DropdownButton, Heading, Link, LineChart, Loading, MatrixTable, Menu, Modal, Pager, Pill, PreviewerMarkdown, Processing, ProgressBar, ProgressBarBase, RadioButton, RoundButton, SegmentedProgress, Select, SelectPagination, SkeletonBase, SkeletonCircle, Stepper, Switch, Tabs, Tag, Text, TextField, Textarea, ThemeProvider, ThemeStore, LocaleStore, Timer, Toaster, Tooltip, Table, toast, };
72
76
  /**
73
77
  * Types
74
78
  */
@@ -82,13 +86,18 @@ export type { DataCardProps, DataCardV1Props, DataCardV1Variant, DataCardV2Props
82
86
  export type { DividerProps } from './components/divider/Divider';
83
87
  export type { DropzoneDisplay, DropzoneProps, DropzoneUploadStatus, } from './components/dropzone/Dropzone';
84
88
  export type { FileUploadProps } from './components/file-upload/FileUpload';
89
+ export type { BarChartProps, BarChartReferenceLine, BarChartSeries, } from './components/bar-chart';
90
+ export type { DonutProps, DonutSegment, DonutSize, DonutCenterMode, IDonutItem, } from './components/donut/Donut';
91
+ export { toDonutLegendItems } from './components/donut/donut.util';
85
92
  export type { HeadingProps } from './components/heading/Heading';
86
- export type { HeaderNavigationProps, HeaderNavigationVisual, } from './components/header-navigation';
93
+ export type { HeaderNavigationBackground, HeaderNavigationImageBackground, HeaderNavigationProps, HeaderNavigationVisual, } from './components/header-navigation';
87
94
  export type { ContextualNavigationProps, ContextualNavigationItem, } from './components/contextual-navigation';
88
95
  export type { LinkProps } from './components/link/Link';
96
+ export type { LineChartProps, LineChartRow, LineChartSeries, LineChartVariant, LineChartCurveType, LineChartReference, } from './components/line-chart';
89
97
  export type { MatrixTableAlign, MatrixTableColumn, MatrixTableGroupColumn, MatrixTablePinnedSide, MatrixTableProps, } from './components/matrix-table';
90
98
  export type { MenuItem } from './types/menu.types';
91
99
  export type { RoundButtonProps } from './components/round-button/RoundButton';
100
+ export type { SegmentedProgressProps } from './components/segmented-progress';
92
101
  export type { SelectProps } from './components/select/Select';
93
102
  export type { TextFieldProps } from './components/text-field/TextField';
94
103
  export type { TextareaProps } from './components/textarea/Textarea';
@@ -103,9 +112,12 @@ export type { NavListItemData, NavListLeaf } from './components/nav-list/types';
103
112
  export type { PagerProps } from './components/pager/Pager';
104
113
  export type { PillProps } from './components/Pill/Pill';
105
114
  export type { PreviewerMarkdownProps } from './components/previewer-markdown/PreviewerMarkdown';
115
+ export type { ProgressBarBasePercentagePosition, ProgressBarBaseProps, ProgressBarBaseSize, } from './components/progress-bar-base';
106
116
  export type { ThemeMode, Theme } from './types/theme.types';
107
117
  export * from './types/table.types';
108
118
  /**
109
119
  * Hook Types
110
120
  */
111
121
  export type { FloatingStrategy, FloatingPortalOptions, FloatingPortalPosition, UseFloatingPortalReturn, } from './hooks/useFloatingPortal';
122
+ export { chartColors } from './constants/chart.constants';
123
+ export type { ChartColor } from './types/chart.types';
@@ -0,0 +1,6 @@
1
+ import type { ChartLegendItem } from '../../../types/chart.types';
2
+ interface ChartLegendProps {
3
+ items: readonly ChartLegendItem[];
4
+ }
5
+ declare const ChartLegend: ({ items }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
6
+ export default ChartLegend;
@@ -0,0 +1 @@
1
+ export { default } from './ChartLegend';
@@ -0,0 +1,10 @@
1
+ import type { ReactNode } from 'react';
2
+ import type { TooltipContentProps } from 'recharts';
3
+ export type ChartTooltipProps<Row> = TooltipContentProps<number, string> & {
4
+ formatX?: (value: string | number) => string;
5
+ formatValue?: (value: number) => string;
6
+ /** Replaces the series rows; `null` or `undefined` falls back to them. */
7
+ renderTooltip?: (row: Row) => ReactNode;
8
+ };
9
+ declare const ChartTooltip: <Row>({ active, label, payload, formatX, formatValue, renderTooltip, }: ChartTooltipProps<Row>) => import("react/jsx-runtime").JSX.Element | null;
10
+ export default ChartTooltip;
@@ -0,0 +1,2 @@
1
+ export { default } from './ChartTooltip';
2
+ export type { ChartTooltipProps } from './ChartTooltip';