@foris/avocado-suite 1.11.0 → 1.12.0

package/dist/components/bar-chart/BarChart.d.ts

@@ -0,0 +1,36 @@
+import { type ReactNode } from 'react';
+import type { BarChartReferenceLine, BarChartSeries } from './barChart.types';
+export interface BarChartProps<Row> {
+    /** One row per category. */
+    data: readonly Row[];
+    /** Row key of the category shown on the X axis. */
+    xKey: keyof Row & string;
+    /**
+     * Values drawn per category: one bar each, grouped in this order. Keep it stable (`useMemo` or a
+     * module constant): a new array re-registers every bar in the Recharts store.
+     */
+    series: readonly BarChartSeries<Row>[];
+    /** Accessible name of the chart. */
+    label: string;
+    /** Chart height in px. @default 300 */
+    height?: number;
+    /** Dashed line at a consumer-computed value (average, goal, threshold). */
+    referenceLine?: BarChartReferenceLine;
+    /** Shows the series, and the reference line, below the plot. */
+    showLegend?: boolean;
+    /** Shows the category and its series values on hover. */
+    showTooltip?: boolean;
+    /** Highlights the hovered category. */
+    showCursor?: boolean;
+    /** Formats Y ticks and tooltip values. Keep it stable (`useCallback`). */
+    formatValue?: (value: number) => string;
+    /** Extra class for the root element. */
+    className?: string;
+    /**
+     * Custom tooltip content for the hovered row; replaces the series rows. Return `null` to show
+     * the series rows. Requires `showTooltip`. Keep it stable (`useCallback`).
+     */
+    renderTooltip?: (row: Row) => ReactNode;
+}
+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;
+export default BarChart;

package/dist/components/bar-chart/BarChart.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/bar-chart/barChart.types.d.ts

@@ -0,0 +1,12 @@
+export interface BarChartSeries<Row> {
+    /** Row key holding the series value; `null` or `undefined` draws no bar. */
+    key: keyof Row & string;
+    /** Series name in the legend and tooltip. */
+    label: string;
+}
+export interface BarChartReferenceLine {
+    /** Y value of the line; the Y axis always includes it. */
+    value: number;
+    /** Line name in the legend. */
+    label: string;
+}

package/dist/components/bar-chart/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './BarChart';
+export type { BarChartProps } from './BarChart';
+export type { BarChartReferenceLine, BarChartSeries, } from './barChart.types';

package/dist/components/bar-chart/utils/barChart.util.d.ts

@@ -0,0 +1,4 @@
+export declare const BAR_GAP = 4;
+export declare const BAR_RADIUS = 2;
+export declare const BAR_CHART_HEIGHT = 300;
+export declare const getBarSize: (plotWidth: number, categoryCount: number, seriesCount: number) => number;

package/dist/components/bar-chart/utils/barChart.util.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/line-chart/LineChart.d.ts

@@ -0,0 +1,5 @@
+import type { LineChartProps, LineChartRow } from './types/lineChart.types';
+export type { LineChartProps } from './types/lineChart.types';
+/** Renders ordered categories with Suite presentation and native Recharts inspection. */
+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;
+export default LineChart;

package/dist/components/line-chart/LineChart.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/line-chart/components/line-chart-guide/LineChartGuide.d.ts

@@ -0,0 +1,17 @@
+/** Cursor shape for a composed Recharts Tooltip inside LineChart. */
+export interface LineChartGuideProps {
+    /** Animate category changes unless reduced motion is preferred. @default true */
+    animate?: boolean;
+    /** Resolved guide endpoints injected by the native Recharts cursor. */
+    points?: readonly {
+        x: number;
+        y: number;
+    }[];
+    /** Cursor class supplied by Recharts. */
+    className?: string;
+}
+/**
+ * Slides only the vertical guide; Recharts keeps tooltip values and active points immediate.
+ * Initial placement and plot resizes snap directly to the resolved coordinates.
+ */
+export declare function LineChartGuide({ animate, points, className, }: LineChartGuideProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/line-chart/components/line-chart-guide/index.d.ts

@@ -0,0 +1,2 @@
+export { LineChartGuide } from './LineChartGuide';
+export type { LineChartGuideProps } from './LineChartGuide';

package/dist/components/line-chart/hooks/useReducedMotion.d.ts

@@ -0,0 +1,2 @@
+/** Tracks the browser preference and removes its subscription on unmount. */
+export declare function useReducedMotion(): boolean;

package/dist/components/line-chart/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './LineChart';
+export { default as LineChart } from './LineChart';
+export type { LineChartProps, LineChartRow, LineChartSeries, LineChartVariant, LineChartCurveType, LineChartReference, } from './types/lineChart.types';

package/dist/components/line-chart/lineChart.constants.d.ts

@@ -0,0 +1,16 @@
+/** Shared geometry and defaults for the line renderer and its validation. */
+export declare const LINE_CHART_HEIGHT = 320;
+export declare const LINE_CHART_MAX_SERIES = 4;
+export declare const LINE_CHART_ANIMATION_MS = 350;
+export declare const LINE_CHART_STROKE_WIDTH = 2;
+export declare const LINE_CHART_DOT_RADIUS = 3;
+export declare const LINE_CHART_ACTIVE_DOT_RADIUS = 4;
+/** Automatic dots are drawn only while neighboring points are at least this far apart. */
+export declare const LINE_CHART_DOT_MIN_SPACING = 24;
+export declare const LINE_CHART_TICK_GAP = 16;
+export declare const LINE_CHART_MARGIN: {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};

package/dist/components/line-chart/types/lineChart.types.d.ts

@@ -0,0 +1,90 @@
+import type { ReactNode } from 'react';
+import type { ChartColor } from '../../../types/chart.types';
+/** A chart row. X values are ordered categories; series values must be finite numbers or missing. */
+export type LineChartRow = Record<string, unknown>;
+/**
+ * A series is identified by its data key, independently of its display label.
+ * Without `color`, series follow the shared chart palette in declaration order; preserve that
+ * order across data updates.
+ */
+export interface LineChartSeries<Row extends object = LineChartRow> {
+    /** Unique row key whose value is a finite number, null, or undefined in each row. */
+    key: keyof Row & string;
+    /** Human-readable name used by the legend and tooltip. */
+    label: string;
+    /** Color token for the line, dots, area, legend and tooltip. Defaults to the palette by position. */
+    color?: ChartColor;
+}
+/** Selects the full-axis or compact chart presentation. */
+export type LineChartVariant = 'full' | 'compact';
+/** Selects the interpolation of each uninterrupted line segment. */
+export type LineChartCurveType = 'linear' | 'monotone';
+/** Consumer-owned reference or target. It never expands the data-derived Y domain. */
+export interface LineChartReference {
+    value: number;
+    label: string;
+    /** Color token for the line and its legend entry. @default 'neutral-70' */
+    color?: ChartColor;
+}
+/** Describes whether the surrounding composition should show content, empty, or error. */
+export type LineChartValidationResult = {
+    status: 'valid';
+} | {
+    status: 'empty';
+    reason: 'no-data' | 'no-series' | 'no-values';
+} | {
+    status: 'invalid';
+    reason: 'invalid-limit' | 'series-limit' | 'duplicate-series' | 'invalid-series' | 'invalid-x' | 'invalid-value';
+};
+/**
+ * Props for an ordered, categorical line chart. A date formatter changes labels, not X spacing.
+ * Suite owns tooltip, legend and cursor presentation; consumers may customize tooltip content.
+ * Loading, empty, and request-error presentation belongs to the surrounding composition.
+ */
+export interface LineChartProps<Row extends object = LineChartRow> {
+    /** Ordered observations; replace the array to refresh values. Missing values break the line; zero is plotted. */
+    data: readonly Row[];
+    /** Row key containing each category's string or numeric label. */
+    xKey: keyof Row & string;
+    /** One or more labeled, uniquely keyed numeric series. */
+    series: readonly LineChartSeries<Row>[];
+    /** Accessible name for the chart. */
+    label: string;
+    /** Accessible explanation of the measure and comparison. */
+    summary?: string;
+    /** Include zero in the data-derived Y domain. Useful when migrating zero-based charts. @default false */
+    includeZero?: boolean;
+    /** Show the series legend. @default false */
+    showLegend?: boolean;
+    /** Show inspected values. Enables pointer and keyboard inspection. @default false */
+    showTooltip?: boolean;
+    /** Show the vertical inspection guide, independently of tooltip visibility. Enables pointer and keyboard inspection. @default false */
+    showCursor?: boolean;
+    /** Replace tooltip content for the original row. Null or undefined uses the standard content. */
+    renderTooltip?: (row: Row) => ReactNode;
+    /**
+     * Show permanent point marks, independently of active inspection marks. `'auto'` shows them
+     * while neighboring points are at least 24 px apart. @default 'auto'
+     */
+    showDots?: boolean | 'auto';
+    /** Fill below the line when exactly one series is configured. @default false */
+    showArea?: boolean;
+    /** Maximum configured series; exceeding it is an invalid input, never truncated. @default 4 */
+    maxSeries?: number;
+    /** Interpolation between present observations. Missing observations always remain gaps. @default 'linear' */
+    curveType?: LineChartCurveType;
+    /** Full axes or an explicit compact presentation without axes. @default 'full' */
+    variant?: LineChartVariant;
+    /** Chart height in CSS pixels, including the legend. @default 320 */
+    height?: number;
+    /** Format a categorical X value for the X axis. */
+    formatX?: (value: string | number) => string;
+    /** Format a numeric observation for the Y axis. */
+    formatValue?: (value: number) => string;
+    /** Optional dashed target, shown only when inside the data domain and named in the legend. */
+    reference?: LineChartReference;
+    /** Enable native Recharts series animation unless reduced motion is preferred. @default true */
+    animate?: boolean;
+    /** Optional class on the outer chart element. */
+    className?: string;
+}

package/dist/components/line-chart/utils/lineChart.utils.d.ts

@@ -0,0 +1,11 @@
+import type { LineChartSeries, LineChartValidationResult } from '../types/lineChart.types';
+/** Validates chart input without changing the consumer's rows or silently dropping series. */
+export declare function validateLineChartInput<Row extends object>(data: readonly Row[], xKey: keyof Row & string, series: readonly LineChartSeries<Row>[], maxSeries?: number): LineChartValidationResult;
+/** Returns a finite, non-degenerate domain with a 5% visual margin around real values. */
+export declare function getLineChartDomain<Row extends object>(data: readonly Row[], series: readonly LineChartSeries<Row>[], includeZero?: boolean): [number, number];
+/**
+ * Resolves `showDots`. Without bars, ComposedChart spreads categories edge to edge, so
+ * neighboring points are `plotWidth / (pointCount - 1)` apart. A lone point is only visible
+ * as a dot.
+ */
+export declare function getLineChartDotsVisible(showDots: boolean | 'auto', plotWidth: number, pointCount: number): boolean;

package/dist/components/line-chart/utils/lineChart.utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -1,13 +1,11 @@
-import { FC } from 'react';
-export interface ProgressBarProps {
-    /** overwrite className */
-    className?: string;
-    /** done */
-    done?: number;
-    /** inProgress */
-    inProgress?: number;
-    /** total */
-    total: number;
-}
+import type { FC } from 'react';
+import type { SegmentedProgressProps } from '../segmented-progress';
+/** @deprecated Use `SegmentedProgressProps`. */
+export type ProgressBarProps = SegmentedProgressProps;
+/**
+ * @deprecated Use `SegmentedProgress`: same props, same segmented rendering.
+ * In the next major version, `ProgressBar` becomes the single-track progress
+ * component exported today as `ProgressBarBase`.
+ */
 declare const ProgressBar: FC<ProgressBarProps>;
 export default ProgressBar;

package/dist/components/progress-bar-base/ProgressBarBase.d.ts

@@ -0,0 +1,33 @@
+import type { FC } from 'react';
+/** Thickness of the track: sm 4 px, md 8 px, lg 12 px. */
+export type ProgressBarBaseSize = 'sm' | 'md' | 'lg';
+/** Where the percentage renders: after the track or below it. */
+export type ProgressBarBasePercentagePosition = 'end' | 'bottom';
+export interface ProgressBarBaseProps {
+    /** Current value, in the unit of min and max. Without a finite value the track renders empty. */
+    value?: number;
+    /** Start of the range. Defaults to 0. */
+    min?: number;
+    /** End of the range. Defaults to 100. */
+    max?: number;
+    /** Thickness of the track. Defaults to md. */
+    size?: ProgressBarBaseSize;
+    /** Shows the percentage next to the track. */
+    showPercentage?: boolean;
+    /** Where the percentage renders. Defaults to end. */
+    percentagePosition?: ProgressBarBasePercentagePosition;
+    /** Decimal places of the percentage. Defaults to 0. */
+    percentageDecimals?: number;
+    /** Loops an indicator through the track while no value exists yet. */
+    indeterminate?: boolean;
+    /** Class added to the root. */
+    className?: string;
+    /** Accessible name, when no visible text names the progress bar. */
+    'aria-label'?: string;
+    /** Id of the composed element that names the progress bar, such as its title. */
+    'aria-labelledby'?: string;
+    /** Id of the composed element that describes the progress bar, such as a status message. */
+    'aria-describedby'?: string;
+}
+declare const ProgressBarBase: FC<ProgressBarBaseProps>;
+export default ProgressBarBase;

package/dist/components/progress-bar-base/ProgressBarBase.types.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/progress-bar-base/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ProgressBarBase';
+export type { ProgressBarBasePercentagePosition, ProgressBarBaseProps, ProgressBarBaseSize, } from './ProgressBarBase';

package/dist/components/progress-bar-base/progressBarBase.util.d.ts

@@ -0,0 +1,20 @@
+/** A value placed within its range, ready for the fill width and the ARIA values. */
+export interface NormalizedProgress {
+    /** Start of the range exposed to assistive technology. */
+    min: number;
+    /** End of the range exposed to assistive technology. */
+    max: number;
+    /** The value limited to the range, or undefined when there is no data to show. */
+    value?: number;
+    /** Where the value sits within the range, from 0 to 100. */
+    percent: number;
+}
+/**
+ * Places `value` within `min`–`max`, limiting it to the range. An invalid range
+ * — a non-finite bound, or `max` not above `min` — falls back to 0–100 with no
+ * value, and so does a missing or non-finite `value`: both render the empty
+ * "no data" track.
+ */
+export declare const normalizeProgress: (value: number | undefined, min: number, max: number) => NormalizedProgress;
+/** Integer by default; an invalid decimal count falls back to the nearest valid one. */
+export declare const formatPercentage: (percent: number, decimals: number) => string;

package/dist/components/segmented-progress/SegmentedProgress.d.ts

@@ -0,0 +1,13 @@
+import type { FC } from 'react';
+export interface SegmentedProgressProps {
+    /** Class added to the track. */
+    className?: string;
+    /** Completed amount, in the same unit as total. */
+    done?: number;
+    /** Amount in progress, in the same unit as total. */
+    inProgress?: number;
+    /** Maximum amount. */
+    total: number;
+}
+declare const SegmentedProgress: FC<SegmentedProgressProps>;
+export default SegmentedProgress;

package/dist/components/segmented-progress/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SegmentedProgress';
+export type { SegmentedProgressProps } from './SegmentedProgress';

package/dist/constants/chart.constants.d.ts

@@ -0,0 +1,5 @@
+import type { ChartColor } from '../types/chart.types';
+/** Shared chart colors in legacy declaration order; repeat only after all 17 colors. */
+export declare const chartColors: string[];
+/** Default reference line color, shared by every chart. */
+export declare const CHART_REFERENCE_COLOR: ChartColor;

package/dist/index.d.ts

@@ -18,12 +18,14 @@ import DatePicker from './components/date-picker/DatePicker';
 import Divider from './components/divider/Divider';
 import Dropzone from './components/dropzone/Dropzone';
 import FileUpload from './components/file-upload/FileUpload';
+import BarChart from './components/bar-chart';
 import Donut from './components/donut/Donut';
 import DonutLabels from './components/donut/donut-labels/DonutLabels';
 import DonutLegend from './components/donut/donut-legend/DonutLegend';
 import DropdownButton from './components/dropdown-button/DropdownButton';
 import Heading from './components/heading/Heading';
 import Link from './components/link/Link';
+import LineChart from './components/line-chart';
 import Loading from './components/loading/Loading';
 import MatrixTable from './components/matrix-table';
 import Menu from './components/menu/Menu';
@@ -33,8 +35,10 @@ import Pill from './components/Pill/Pill';
 import PreviewerMarkdown from './components/previewer-markdown/PreviewerMarkdown';
 import Processing from './components/processing/Processing';
 import ProgressBar from './components/progress-bar/ProgressBar';
+import ProgressBarBase from './components/progress-bar-base';
 import RadioButton from './components/radio-button/RadioButton';
 import RoundButton from './components/round-button/RoundButton';
+import SegmentedProgress from './components/segmented-progress';
 import Select from './components/select/Select';
 import SelectPagination from './components/select-pagination/SelectPagination';
 import SkeletonBase from './components/skeleton-base/SkeletonBase';
@@ -68,7 +72,7 @@ import { toast } from 'react-toastify';
  * Hooks
  */
 export { useFloatingPortal } from './hooks/useFloatingPortal';
-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, };
+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, };
 /**
  * Types
  */
@@ -82,15 +86,18 @@ export type { DataCardProps, DataCardV1Props, DataCardV1Variant, DataCardV2Props
 export type { DividerProps } from './components/divider/Divider';
 export type { DropzoneDisplay, DropzoneProps, DropzoneUploadStatus, } from './components/dropzone/Dropzone';
 export type { FileUploadProps } from './components/file-upload/FileUpload';
+export type { BarChartProps, BarChartReferenceLine, BarChartSeries, } from './components/bar-chart';
 export type { DonutProps, DonutSegment, DonutSize, DonutCenterMode, IDonutItem, } from './components/donut/Donut';
 export { toDonutLegendItems } from './components/donut/donut.util';
 export type { HeadingProps } from './components/heading/Heading';
 export type { HeaderNavigationBackground, HeaderNavigationImageBackground, HeaderNavigationProps, HeaderNavigationVisual, } from './components/header-navigation';
 export type { ContextualNavigationProps, ContextualNavigationItem, } from './components/contextual-navigation';
 export type { LinkProps } from './components/link/Link';
+export type { LineChartProps, LineChartRow, LineChartSeries, LineChartVariant, LineChartCurveType, LineChartReference, } from './components/line-chart';
 export type { MatrixTableAlign, MatrixTableColumn, MatrixTableGroupColumn, MatrixTablePinnedSide, MatrixTableProps, } from './components/matrix-table';
 export type { MenuItem } from './types/menu.types';
 export type { RoundButtonProps } from './components/round-button/RoundButton';
+export type { SegmentedProgressProps } from './components/segmented-progress';
 export type { SelectProps } from './components/select/Select';
 export type { TextFieldProps } from './components/text-field/TextField';
 export type { TextareaProps } from './components/textarea/Textarea';
@@ -105,9 +112,12 @@ export type { NavListItemData, NavListLeaf } from './components/nav-list/types';
 export type { PagerProps } from './components/pager/Pager';
 export type { PillProps } from './components/Pill/Pill';
 export type { PreviewerMarkdownProps } from './components/previewer-markdown/PreviewerMarkdown';
+export type { ProgressBarBasePercentagePosition, ProgressBarBaseProps, ProgressBarBaseSize, } from './components/progress-bar-base';
 export type { ThemeMode, Theme } from './types/theme.types';
 export * from './types/table.types';
 /**
  * Hook Types
  */
 export type { FloatingStrategy, FloatingPortalOptions, FloatingPortalPosition, UseFloatingPortalReturn, } from './hooks/useFloatingPortal';
+export { chartColors } from './constants/chart.constants';
+export type { ChartColor } from './types/chart.types';

package/dist/shared/components/chart-legend/ChartLegend.d.ts

@@ -0,0 +1,6 @@
+import type { ChartLegendItem } from '../../../types/chart.types';
+interface ChartLegendProps {
+    items: readonly ChartLegendItem[];
+}
+declare const ChartLegend: ({ items }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
+export default ChartLegend;

package/dist/shared/components/chart-legend/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ChartLegend';

package/dist/shared/components/chart-tooltip/ChartTooltip.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import type { TooltipContentProps } from 'recharts';
+export type ChartTooltipProps<Row> = TooltipContentProps<number, string> & {
+    formatX?: (value: string | number) => string;
+    formatValue?: (value: number) => string;
+    /** Replaces the series rows; `null` or `undefined` falls back to them. */
+    renderTooltip?: (row: Row) => ReactNode;
+};
+declare const ChartTooltip: <Row>({ active, label, payload, formatX, formatValue, renderTooltip, }: ChartTooltipProps<Row>) => import("react/jsx-runtime").JSX.Element | null;
+export default ChartTooltip;

package/dist/shared/components/chart-tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './ChartTooltip';
+export type { ChartTooltipProps } from './ChartTooltip';