@pantheon-systems/pds-toolkit-react 2.0.0-alpha.5 → 2.0.0-alpha.50

package/dist/components/buttons/FilterButton/FilterButton.d.ts

@@ -0,0 +1,82 @@
+import './filter-button.css';
+/**
+ * A single option the FilterButton can filter by.
+ */
+export interface FilterButtonOption {
+    /**
+     * Whether this option is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Visible label for the option.
+     */
+    label: string;
+    /**
+     * Unique value used for selection.
+     */
+    value: string;
+}
+/**
+ * Prop types for FilterButton
+ */
+export interface FilterButtonProps {
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Text for the clear action in the panel footer.
+     */
+    clearLabel?: string;
+    /**
+     * Disable the entire control.
+     */
+    disabled?: boolean;
+    /**
+     * The filter key/dimension name shown in the trigger (e.g. "Status").
+     */
+    filterKey: string;
+    /**
+     * id applied to the trigger button.
+     */
+    id?: string;
+    /**
+     * Show the in-menu search input once the number of options reaches this
+     * threshold. Defaults to `8`. Set to `0` to always show it.
+     */
+    minFilterItems?: number;
+    /**
+     * Text shown when the search finds no matching options.
+     */
+    noResultsText?: string;
+    /**
+     * Called with the next selected values whenever the selection changes.
+     */
+    onSelectionChange: (values: string[]) => void;
+    /**
+     * Options the user can filter by.
+     */
+    options: FilterButtonOption[];
+    /**
+     * Accessible label for the search input.
+     */
+    searchLabel?: string;
+    /**
+     * Placeholder for the search input.
+     */
+    searchPlaceholder?: string;
+    /**
+     * Currently selected option values (controlled).
+     */
+    selectedValues: string[];
+}
+/**
+ * FilterButton — a multiselect filter with a stateful trigger, designed to sit
+ * in a UtilityBar above a Table. Composes the Dropdown compound component
+ * (checkbox items + a search row + a Clear footer) behind a trigger with three
+ * states: default, single selection, and multiple selections (with a count).
+ *
+ * Selection is controlled: pass `selectedValues` and handle `onSelectionChange`.
+ * The consuming app owns filtering the data with those values.
+ */
+export declare const FilterButton: ({ className, clearLabel, disabled, filterKey, id, minFilterItems, noResultsText, onSelectionChange, options, searchLabel, searchPlaceholder, selectedValues, }: FilterButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/IconButton/IconButton.d.ts

@@ -20,6 +20,10 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
      * Is the button disabled?
      */
     disabled?: boolean;
+    /**
+     * Show a visible border around the button.
+     */
+    hasBorder?: boolean;
     /**
      * Show tooltip on hover. If false, the title attribute will be used.
      */
@@ -32,10 +36,18 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
      * Which icon to render.
      */
     iconName: PDSIcon;
+    /**
+     * Whether the button is in a pressed/active toggle state. Maps to aria-pressed.
+     */
+    isPressed?: boolean;
     /**
      * Click event handler callback.
      */
     onClick?: (e: MouseEvent<HTMLElement>) => void;
+    /**
+     * Icon to display when isPressed is true. When not set, iconName is used in both states.
+     */
+    pressedIconName?: PDSIcon;
     /**
      * Which size of button to render.
      */

package/dist/components/buttons/MenuButton/MenuButton.d.ts

@@ -1,6 +1,9 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
+import { StatusDotType } from '../../../libs/components/StatusDot/StatusDot';
 import { ButtonVariant, HeadingItemType, LinkItemType, MenuItemType, NodeItemType, SeparatorItemType } from '../../../libs/types/custom-types';
+import { TallyProps } from '../../badges/Tally/Tally';
 import { PDSIcon } from '../../icons/Icon/Icon';
+import '@components/Dropdown/dropdown.css';
 import './menu-button.css';
 type MenuButtonSize = 's' | 'm';
 /**
@@ -16,13 +19,13 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      */
     disabled?: boolean;
     /**
-     * How the button is displayed.
+     * Icon name for icon-only mode.
      */
-    displayType?: 'icon-end' | 'icon-only';
+    iconName?: PDSIcon;
     /**
-     * Icon name for icon-only buttons.
+     * Render as an icon-only button (no label, no angle-down). Not compatible with `tally` or `statusDot`.
      */
-    iconName?: PDSIcon;
+    iconOnly?: boolean;
     /**
      * ID value for this component.
      */
@@ -39,10 +42,6 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      * Array of menu items
      */
     menuItems: Array<HeadingItemType | LinkItemType | MenuItemType | NodeItemType | SeparatorItemType>;
-    /**
-     * Horizontal position of the menu relative to the button. Applies to breakpoints `md` and up.
-     */
-    menuPosition?: 'start' | 'end';
     /**
      * Optional callback function for when the button is clicked or activated by the keyboard.
      */
@@ -51,6 +50,17 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      * Which size of button to render.
      */
     size?: MenuButtonSize;
+    /**
+     * A status dot displayed in the left icon slot. Not available in `iconOnly` mode.
+     */
+    statusDot?: StatusDotType;
+    /**
+     * A tally badge displayed between the label and the angle-down icon. Not available in `iconOnly` mode.
+     */
+    tally?: {
+        label: TallyProps['label'];
+        type: TallyProps['type'];
+    };
     /**
      *  Optional `data-testid` value for this component.
      */
@@ -60,18 +70,12 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      */
     undefinedLabel?: string;
     /**
-     * Which variant of button to render — only valid for icon-end (default) display type.
-     */
-    variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'navbar'>;
-    /**
-     * Is this button located with the Navbar component?
-     * This will adjust the styling and position of the dropdown.
-     * Omit this prop for the Dashboard application. It only applies to the standard Navbar component with a bottom border.
+     * Which variant of button to render. Not available in `iconOnly` mode.
      */
-    withinNavbar?: boolean;
+    variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'subtle'>;
 }
 /**
  * MenuButton UI component
  */
-export declare const MenuButton: ({ className, disabled, displayType, iconName, id, isSplitButton, label, menuItems, menuPosition, onClick, size, testId, undefinedLabel, variant, withinNavbar, ...props }: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuButton: ({ className, disabled, iconName, iconOnly, id, isSplitButton, label, menuItems, onClick, size, statusDot, tally, testId, undefinedLabel, variant, ...props }: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/buttons/SegmentedButton/SegmentedButton.d.ts

@@ -1,17 +1,40 @@
 import { PDSIcon } from '../../icons/Icon/Icon';
 import './segmented-button.css';
+export type SegmentedButtonSize = 's' | 'm' | 'l';
 /**
  * Structure for each option in the SegmentedButton component.
  */
 interface OptionType {
+    /**
+     * Disables this individual option.
+     */
     disabled?: boolean;
+    /**
+     * Optional icon rendered before the label.
+     */
     iconName?: PDSIcon;
+    /**
+     * Optional unique ID for the option. Falls back to a generated ID.
+     */
     id?: string;
+    /**
+     * Shows a spinner before the label to indicate the option is loading.
+     */
+    isLoading?: boolean;
+    /**
+     * Visible text for the option.
+     */
     label: string;
+    /**
+     * Optional tally badge rendered after the label.
+     */
     tally?: {
         label: string | number;
         type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
     };
+    /**
+     * Value submitted when this option is selected.
+     */
     value: string;
 }
 /**
@@ -19,7 +42,11 @@ interface OptionType {
  */
 export interface SegmentedButtonProps {
     /**
-     * Additional class names
+     * Renders a border around the track. Off by default.
+     */
+    border?: boolean;
+    /**
+     * Additional class names.
      */
     className?: string;
     /**
@@ -27,9 +54,16 @@ export interface SegmentedButtonProps {
      */
     defaultValue?: string;
     /**
-     * Is the SegmentedButton disabled?
+     * Disables all options in the SegmentedButton.
      */
     disabled?: boolean;
+    /**
+     * Renders each option as an icon-only, square segment with a circular
+     * selected pill. Each option's `iconName` is required and its `label` is
+     * used as the accessible name (visually hidden) and shown in a tooltip on
+     * hover. Works at any size; the icon and pill scale with the size.
+     */
+    iconOnly?: boolean;
     /**
      * Unique ID for the SegmentedButton.
      */
@@ -39,24 +73,26 @@ export interface SegmentedButtonProps {
      */
     label: string;
     /**
-     * Callback function that will return the updated value from the instance when it changes.
+     * Callback fired when the selected option changes.
      */
     onChange?: (value: string) => void;
     /**
-     * Array of button options — must be between 2 and 6 options.
+     * Array of button options — must be between 2 and 6 options. Each option may
+     * include an optional icon or spinner before the label and a tally after it.
      */
     options: OptionType[];
     /**
-     * Size of the SegmentedButton.
+     * Size of the segmented button: `'s'` (20px), `'m'` (24px, default), or
+     * `'l'` (32px). The icon scales with the size.
      */
-    size?: 's' | 'm';
+    size?: SegmentedButtonSize;
     /**
-     * Value of the Segmented Button. Used to set the value of the field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
+     * Controlled value. Cannot be used together with `defaultValue`.
      */
     value?: string;
 }
 /**
  * SegmentedButton UI component
  */
-export declare const SegmentedButton: ({ className, defaultValue, disabled, id, label, onChange, options, size, value, ...props }: SegmentedButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SegmentedButton: ({ border, className, defaultValue, disabled, iconOnly, id, label, onChange, options, size, value, ...props }: SegmentedButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/cards/ActionCard/ActionCard.d.ts

@@ -0,0 +1,64 @@
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
+import { PaddingScale } from '../../../libs/types/layout-types';
+import { CardBackground, CardImageVariant } from '../../cards/Card/Card';
+import './action-card.css';
+export interface ActionCardPrimaryAction {
+    /**
+     * Accessible label for the card-level action. Required — read by screen readers
+     * as the name of the interactive element that covers the card.
+     */
+    label: string;
+    /**
+     * For link-based actions: pass a native `<a>` or framework link element (e.g.
+     * React Router `<Link>`). The component clones the element and injects the
+     * required class and aria-label. Mutually exclusive with `onClick`.
+     */
+    linkContent?: ReactElement;
+    /**
+     * For button-based actions: callback fired when the card is activated.
+     * Mutually exclusive with `linkContent`.
+     */
+    onClick?: () => void;
+}
+/**
+ * Prop types for ActionCard
+ */
+export interface ActionCardProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Background color of the card.
+     */
+    background?: CardBackground;
+    /**
+     * Card content. Supports `image`, `main`, and `footer` named slots.
+     * Any interactive elements placed inside children (secondary actions) are
+     * naturally positioned above the card-level primary action.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Controls how the image slot is presented.
+     * - `bleed` (default): image extends to card edges, top corners rounded only.
+     * - `inset`: image has padding on all sides, all corners rounded.
+     */
+    imageVariant?: CardImageVariant;
+    /**
+     * Relative padding for the `main` and `footer` slots.
+     */
+    padding?: PaddingScale;
+    /**
+     * The card-level primary action. Provide either `linkContent` (for links) or
+     * `onClick` (for button actions), plus a required accessible `label`.
+     */
+    primaryAction: ActionCardPrimaryAction;
+}
+/**
+ * ActionCard UI component
+ *
+ * A fully-clickable card where the entire surface activates a primary action.
+ * Supports both link and button actions. Secondary interactive elements can be
+ * placed inside children and remain independently clickable above the card action.
+ */
+export declare const ActionCard: ({ background, children, className, imageVariant, padding, primaryAction, ...props }: ActionCardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/cards/Card/Card.d.ts

@@ -1,7 +1,8 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
-import { GridGapOptions } from '../../../libs/types/layout-types';
+import { PaddingScale } from '../../../libs/types/layout-types';
 import './card.css';
-export type CardBackground = 'default' | 'mint-gradient' | 'sundown-gradient' | 'yellow-gradient' | 'transparent';
+export type CardBackground = 'default' | 'transparent';
+export type CardImageVariant = 'bleed' | 'inset';
 /**
  * Prop types for Card
  */
@@ -18,12 +19,18 @@ export interface CardProps extends ComponentPropsWithoutRef<'div'> {
      * Additional class names
      */
     className?: string;
+    /**
+     * Controls how the image fills the card top.
+     * - `bleed` (default): image extends to the card edges, top corners rounded only.
+     * - `inset`: image has padding on all sides, all corners rounded.
+     */
+    imageVariant?: CardImageVariant;
     /**
      * Relative padding for the `main` slot.
      */
-    padding?: GridGapOptions;
+    padding?: PaddingScale;
 }
 /**
  * Card UI component
  */
-export declare const Card: ({ background, children, className, padding, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ background, children, className, imageVariant, padding, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/cards/CardSelect/CardSelect.d.ts

@@ -0,0 +1,83 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './card-select.css';
+export interface CardOption {
+    /**
+     * Composable content rendered inside the card. Use `slot="image"` to place an
+     * image in the card's image area; any unslotted content becomes the main
+     * content area below the label.
+     */
+    children?: ReactNode;
+    /**
+     * Unique ID for the option
+     * @default ''
+     */
+    id?: string;
+    /**
+     * Option label
+     */
+    label: string | ReactNode;
+    /**
+     * Option value
+     */
+    value: string;
+}
+export type CardSelectSize = 'm' | 'l';
+export type CardSelectImageVariant = 'bleed' | 'inset';
+export interface CardSelectProps extends Omit<ComponentPropsWithoutRef<'fieldset'>, 'onChange'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Optional initial selected option value
+     */
+    defaultValue?: string;
+    /**
+     * Unique ID for the card select
+     */
+    id: string;
+    /**
+     * Controls how a card's image slot fills the card top.
+     * - `bleed` (default): image extends to the card edges, top corners rounded only.
+     * - `inset`: image has padding on all sides, all corners rounded.
+     */
+    imageVariant?: CardSelectImageVariant;
+    /**
+     * Label for the card select group. Renders as the fieldset legend.
+     */
+    label: string;
+    /**
+     * Display of the group legend and per-card labels. `hidden` visually hides them
+     * (legend and each card's label text) but keeps them accessible to screen
+     * readers — use it when the cards compose their own visible titles.
+     */
+    labelDisplay?: 'left' | 'center' | 'hidden';
+    /**
+     * Column layout of the cards at breakpoints medium and above.
+     */
+    layout?: 'auto' | 'twoAcross' | 'threeAcross';
+    /**
+     * Callback function that will return the updated value from the instance when it changes.
+     * Function should have the shape of: `(value) => { <do stuff here> } `.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Array of card options
+     */
+    options?: CardOption[];
+    /**
+     * Show the radio-style selection indicator (the circle / check dot) on each
+     * card. When `false`, the indicator is hidden and the selected card is shown
+     * with a highlight ring and raised elevation instead. The underlying radio
+     * inputs remain for keyboard and screen-reader use either way.
+     */
+    showIndicator?: boolean;
+    /**
+     * Size of the card label and indicator. Defaults to `'m'`.
+     */
+    size?: CardSelectSize;
+}
+/**
+ * CardSelect UI component
+ */
+export declare const CardSelect: ({ className, defaultValue, id, imageVariant, label, labelDisplay, layout, onChange, options, showIndicator, size, ...props }: CardSelectProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/BarChart/BarChart.d.ts

@@ -0,0 +1,21 @@
+import { ComponentPropsWithoutRef } from 'react';
+import type { BaseChartProps } from '../shared/types';
+import '../shared/chart-wrapper.css';
+import './bar-chart.css';
+export type BarChartLayout = 'horizontal' | 'vertical';
+export type BarChartVariant = 'grouped' | 'stacked';
+export interface BarChartProps extends BaseChartProps, Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Border radius on bars (default: 2) */
+    barRadius?: number;
+    /** Bar orientation — horizontal (default, bars go up) or vertical (bars go sideways) */
+    layout?: BarChartLayout;
+    /** Bar layout variant (default: 'stacked') */
+    variant?: BarChartVariant;
+}
+/**
+ * BarChart UI component
+ *
+ * Renders a responsive bar chart with support for stacked or grouped layouts,
+ * multiple series, tooltips, and an accessible data table.
+ */
+export declare const BarChart: ({ barRadius, chartHeight, chartWidth, className, colorPalette, data, isLoading, isThumbnail, labelStrings, layout, legendVariant, onTimePeriodChange, selectedTimePeriod, series, showAccessibleTable, showAxisLines, showGrid, showLegend, showTooltip, timePeriodOptions, tooltipContent, variant, xAxisLabel, xAxisTickInterval, yAxisDomain, yAxisFormatter, yAxisLabel, yAxisTickInterval, ...props }: BarChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/LineChart/LineChart.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef } from 'react';
+import type { AnnotationConfig, BaseChartProps, ReferenceLineConfig } from '../shared/types';
+import '../shared/chart-wrapper.css';
+import './line-chart.css';
+export type LineStyle = 'smooth' | 'straight';
+export interface LineChartProps extends BaseChartProps, Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Annotation markers (e.g., "TODAY") */
+    annotations?: AnnotationConfig[];
+    /** Line curve style (default: 'smooth') */
+    lineStyle?: LineStyle;
+    /** Reference lines (e.g., contract limit) */
+    referenceLines?: ReferenceLineConfig[];
+    /** Show data points on lines (default: true) */
+    showDataPoints?: boolean;
+}
+/**
+ * LineChart UI component
+ *
+ * Renders a responsive line chart with support for multiple series,
+ * reference lines, annotations, tooltips, and an accessible data table.
+ */
+export declare const LineChart: ({ annotations, chartHeight, chartWidth, className, colorPalette, data, isLoading, isThumbnail, labelStrings, legendVariant, lineStyle, onTimePeriodChange, referenceLines, selectedTimePeriod, series, showAccessibleTable, showAxisLines, showDataPoints, showGrid, showLegend, showTooltip, timePeriodOptions, tooltipContent, xAxisLabel, xAxisTickInterval, yAxisDomain, yAxisFormatter, yAxisLabel, yAxisTickInterval, ...props }: LineChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/PieChart/PieChart.d.ts

@@ -0,0 +1,59 @@
+import { ComponentPropsWithoutRef } from 'react';
+import type { ColorPalette, LegendVariant } from '../shared/types';
+import '../shared/chart-wrapper.css';
+import './pie-chart.css';
+export type PieChartVariant = 'donut' | 'pie';
+export interface PieSlice {
+    /** Override default token color (CSS custom property or hex). Not theme-aware — use paletteIndex instead when possible. */
+    color?: string;
+    /** Display label for legend and tooltip */
+    label: string;
+    /** Pick a specific color from the selected palette by position (1-based). Theme-aware — automatically adjusts for light/dark mode. */
+    paletteIndex?: number;
+    /** Numeric value for this slice */
+    value: number;
+}
+export interface PieChartLabelStrings {
+    /** Accessible description for the hidden data table */
+    accessibleTableDescription?: string;
+    /** Heading for the empty state */
+    emptyStateHeading?: string;
+    /** Message body for the empty state */
+    emptyStateMessage?: string;
+    /** Loading label for screen readers */
+    loadingLabel?: string;
+}
+export interface PieChartProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Height of the chart area in pixels. Default: 300; 80 when isThumbnail. */
+    chartHeight?: number;
+    /** Maximum width of the component in pixels. Default: 80 when isThumbnail. */
+    chartWidth?: number;
+    /** Color palette to use for slice colors (default: 'categorical') */
+    colorPalette?: ColorPalette;
+    /** Slice data */
+    data: PieSlice[];
+    /** Show loading skeleton */
+    isLoading?: boolean;
+    /** Thumbnail mode — hides legend and tooltip, renders at a small fixed size. Individual show* props can override. */
+    isThumbnail?: boolean;
+    /** Translatable UI strings for i18n. Keys: accessibleTableDescription, emptyStateHeading, emptyStateMessage, loadingLabel. */
+    labelStrings?: PieChartLabelStrings;
+    /** Legend display style (default: 'inline') */
+    legendVariant?: LegendVariant;
+    /** Show accessible data table (visually hidden). Defaults to true. */
+    showAccessibleTable?: boolean;
+    /** Show legend below the chart. Defaults to true; false when isThumbnail is set. */
+    showLegend?: boolean;
+    /** Show tooltip on hover. Defaults to true; false when isThumbnail is set. */
+    showTooltip?: boolean;
+    /** Custom value formatter for legend items. Receives the slice value, total, and label. Defaults to showing percentage. */
+    valueFormatter?: (value: number, total: number, label: string) => string;
+    /** Chart variant (default: 'pie') */
+    variant?: PieChartVariant;
+}
+/**
+ * PieChart UI component
+ *
+ * Renders a responsive pie or donut chart showing proportional data across categories.
+ */
+export declare const PieChart: ({ chartHeight, chartWidth, className, colorPalette, data, isLoading, isThumbnail, labelStrings, legendVariant, showAccessibleTable, showLegend, showTooltip, valueFormatter, variant, ...props }: PieChartProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/ProportionBar/ProportionBar.d.ts

@@ -0,0 +1,57 @@
+import { ComponentPropsWithoutRef } from 'react';
+import type { ColorPalette } from '../shared/types';
+import '../shared/chart-wrapper.css';
+import './proportion-bar.css';
+export interface ProportionSegment {
+    /** Override default token color (CSS custom property or hex). Not theme-aware — use paletteIndex instead when possible. */
+    color?: string;
+    /** Display label for legend and tooltip */
+    label: string;
+    /** Pick a specific color from the selected palette by position (1-based). Theme-aware — automatically adjusts for light/dark mode. */
+    paletteIndex?: number;
+    /** Numeric value for this segment */
+    value: number;
+}
+export interface ProportionBarLabelStrings {
+    /** Accessible description for the hidden data table */
+    accessibleTableDescription?: string;
+    /** Heading for the empty state */
+    emptyStateHeading?: string;
+    /** Message body for the empty state */
+    emptyStateMessage?: string;
+    /** Loading label for screen readers */
+    loadingLabel?: string;
+}
+export interface ProportionBarProps extends Omit<ComponentPropsWithoutRef<'div'>, 'children'> {
+    /** Height of the bar track in pixels (default: 16) */
+    barHeight?: number;
+    /** Maximum width of the component in pixels. The component is responsive and will shrink within this constraint. */
+    chartWidth?: number;
+    /** Color palette to use for segment colors (default: 'categorical') */
+    colorPalette?: ColorPalette;
+    /** Segment data — each segment has a label, numeric value, and optional color override */
+    data: ProportionSegment[];
+    /** Show loading skeleton */
+    isLoading?: boolean;
+    /** Thumbnail mode — hides legend and tooltip. Individual show* props can override. */
+    isThumbnail?: boolean;
+    /** Translatable UI strings for i18n. Keys: accessibleTableDescription, emptyStateHeading, emptyStateMessage, loadingLabel. */
+    labelStrings?: ProportionBarLabelStrings;
+    /** Alignment of the legend (default: 'left') */
+    legendAlignment?: 'center' | 'left';
+    /** Show accessible data table (visually hidden). Defaults to true. */
+    showAccessibleTable?: boolean;
+    /** Show legend below the bar. Defaults to true; false when isThumbnail is set. */
+    showLegend?: boolean;
+    /** Show tooltip on hover. Defaults to true; false when isThumbnail is set. */
+    showTooltip?: boolean;
+    /** Custom value formatter for legend items. Receives the segment value, total, and label. Defaults to showing percentage. */
+    valueFormatter?: (value: number, total: number, label: string) => string;
+}
+/**
+ * ProportionBar UI component
+ *
+ * Renders a single horizontal bar divided into colored segments, showing
+ * the composition of a total. Functions as a linearized pie chart.
+ */
+export declare const ProportionBar: ({ barHeight, chartWidth, className, colorPalette, data, isLoading, isThumbnail, labelStrings, legendAlignment, showAccessibleTable, showLegend, showTooltip, valueFormatter, ...props }: ProportionBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/shared/ChartAccessibleTable.d.ts

@@ -0,0 +1,17 @@
+import type { ChartDataPoint, SeriesConfig } from './types';
+interface ChartAccessibleTableProps {
+    /** Chart data points */
+    data: ChartDataPoint[];
+    /** Accessible description for the table */
+    description: string;
+    /** Series definitions */
+    series: SeriesConfig[];
+    /** Optional value formatter */
+    valueFormatter?: (value: number) => string;
+}
+/**
+ * Renders a visually-hidden HTML table containing chart data
+ * for screen reader accessibility.
+ */
+export declare const ChartAccessibleTable: ({ data, description, series, valueFormatter, }: ChartAccessibleTableProps) => import("react/jsx-runtime").JSX.Element;
+export {};