@pantheon-systems/pds-toolkit-react 2.0.0-alpha.3 → 2.0.0-alpha.30

package/dist/components/Table/Table.d.ts

@@ -1,27 +1,151 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './table.css';
-/**
- * Prop types for Table
- */
-interface TableProps extends ComponentPropsWithoutRef<'table'> {
+export type SortOrder = 'asc' | 'desc';
+export interface TableColumn {
+    /** Content to display in the header cell. */
+    header: ReactNode;
+    /** Stable identifier used for rendering cell content from rowData. */
+    id: string;
+    /** When true, renders a sort button next to the header label. */
+    sortable?: boolean;
     /**
-     * Additional class names
+     * Key to use for sorting instead of `id`. Use when the cell renders a
+     * ReactNode but a separate plain-text field in rowData should drive the sort.
      */
+    sortKey?: string;
+}
+export interface TableProps extends ComponentPropsWithoutRef<'table'> {
+    /** Additional class names */
     className?: string;
+    /** Column definitions. Each column requires a stable `id`. */
+    columns: TableColumn[];
+    /**
+     * Current page number (1-based). Providing this alongside `onPageChange`
+     * enables controlled pagination mode.
+     */
+    currentPage?: number;
+    /**
+     * Column id to sort by on initial render. Only applies in uncontrolled sort mode.
+     * Like `defaultValue` in HTML inputs, this is mount-only — changing it after mount
+     * has no effect. Use `sortKey` + `onSort` for controlled sort.
+     */
+    defaultSortKey?: string;
+    /**
+     * Initial sort direction when `defaultSortKey` is set. Defaults to `'asc'`.
+     * Only applies in uncontrolled sort mode.
+     */
+    defaultSortOrder?: SortOrder;
+    /**
+     * Custom empty state rendered when `rowData` is empty and `isLoading` is false.
+     * When provided, takes precedence over `emptyStateHeading` and `emptyStateMessage`.
+     */
+    emptyState?: ReactNode;
+    /**
+     * Heading text for the default empty state. Defaults to `"No results found."`
+     * Override for translation or context-specific messaging.
+     */
+    emptyStateHeading?: string;
+    /**
+     * Optional message displayed below the heading in the default empty state.
+     */
+    emptyStateMessage?: string;
+    /**
+     * Returns the accessible label for each option in the rows-per-page selector.
+     * Defaults to `(size) => \`Show ${size} rows per page\``.
+     * Override for translation.
+     */
+    getPageSizeLabel?: (size: number) => string;
+    /**
+     * Derives a stable string ID from a row object for selection tracking.
+     * Defaults to the row's array index. Provide this when using pagination
+     * to preserve selection across page changes.
+     */
+    getRowId?: (row: Record<string, ReactNode>) => string;
+    /**
+     * Returns the visually hidden accessible label for each row's checkbox.
+     * Receives the row object and its 1-based display index.
+     * Defaults to `(_row, index) => \`Select row ${index}\``.
+     * Override to include a meaningful identifier (e.g. the site name) for
+     * screen reader users who navigate through checkboxes.
+     */
+    getSelectRowLabel?: (row: Record<string, ReactNode>, index: number) => string;
+    /**
+     * Returns the accessible label for a column's sort button.
+     * Defaults to `(columnHeader) => \`Sort by ${columnHeader}\``.
+     * Override for translation.
+     */
+    getSortLabel?: (columnHeader: string) => string;
+    /**
+     * When true, renders skeleton rows instead of data. Use while data is loading.
+     */
+    isLoading?: boolean;
+    /**
+     * Number of items per page. Required to enable pagination.
+     * In uncontrolled pagination mode the Table slices `rowData` internally.
+     * In controlled mode the consumer passes the current page slice as `rowData`.
+     */
+    itemsPerPage?: number;
+    /**
+     * Number of skeleton rows to render when `isLoading` is true. Defaults to 5.
+     */
+    loadingRowCount?: number;
+    /**
+     * Callback fired when the user navigates to a new page. Receives the new
+     * 1-based page number. Providing this prop enables controlled pagination mode.
+     */
+    onPageChange?: (page: number) => void;
+    /**
+     * Callback fired when the user changes the rows-per-page value.
+     * When provided alongside `pageSizeOptions`, enables controlled page size mode.
+     * In uncontrolled mode the Table manages page size internally.
+     */
+    onPageSizeChange?: (size: number) => void;
+    /**
+     * Callback fired when row selection changes. Providing this prop enables
+     * the checkbox column. Receives the full array of currently selected row IDs.
+     * Note: in uncontrolled selection mode, IDs of rows removed from `rowData`
+     * (e.g. after filtering) remain in the internal selection set. Clear selection
+     * explicitly when filtering if stale IDs are a concern.
+     */
+    onRowSelectionChange?: (ids: string[]) => void;
+    /**
+     * Callback fired when a sortable header is clicked. Providing this prop
+     * enables controlled sort mode — the component will not sort `rowData`
+     * internally and expects the parent to pass pre-sorted data.
+     */
+    onSort?: (key: string, order: SortOrder) => void;
+    /**
+     * Available page size options rendered in the rows-per-page selector.
+     * When provided, the selector is shown to the left of the pagination controls.
+     */
+    pageSizeOptions?: number[];
+    /**
+     * Row data as an array of records keyed by column id.
+     * In controlled pagination mode, pass only the current page's rows.
+     */
+    rowData: Array<Record<string, ReactNode>>;
+    /**
+     * Visually hidden accessible label for the select-all header checkbox.
+     * Defaults to `'Select all rows'`. Override for translation.
+     */
+    selectAllLabel?: string;
+    /**
+     * Controlled selected row IDs. When provided alongside `onRowSelectionChange`,
+     * enables controlled selection mode.
+     */
+    selectedRows?: string[];
+    /**
+     * Controlled sort column id. Only used when `onSort` is provided.
+     */
+    sortKey?: string;
     /**
-     * Table headers
+     * Controlled sort direction. Only used when `onSort` is provided.
      */
-    headers?: Array<{
-        sortable?: boolean;
-        title: string;
-    }>;
+    sortOrder?: SortOrder;
     /**
-     * Table row data - array of rows, where each row is an array of cell values
+     * Total number of items across all pages. Required in controlled pagination
+     * mode so the Pagination component can compute the page count.
      */
-    rowData?: Array<Array<string | ReactNode>>;
+    totalItemCount?: number;
 }
-/**
- * Table UI component
- */
-export declare const Table: ({ className, headers, rowData, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Table: ({ className, columns, currentPage, defaultSortKey, defaultSortOrder, emptyState, emptyStateHeading, emptyStateMessage, getPageSizeLabel, getRowId, getSelectRowLabel, getSortLabel, isLoading, itemsPerPage, loadingRowCount, onPageChange, onPageSizeChange, onRowSelectionChange, onSort, pageSizeOptions, rowData, selectAllLabel, selectedRows, sortKey, sortOrder, totalItemCount, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/TableOfContents/TableOfContents.d.ts

@@ -1,10 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { HeadingLevelCommon } from '../../libs/types/custom-types';
 import './table-of-contents.css';
-/**
- * Prop types for TableOfContents
- */
-interface TableOfContentsProps extends ComponentPropsWithoutRef<'nav'> {
+export interface TableOfContentsProps extends ComponentPropsWithoutRef<'nav'> {
     /**
      * Whether to append the id to the URL when a link is clicked.
      */
@@ -42,4 +39,3 @@ interface TableOfContentsProps extends ComponentPropsWithoutRef<'nav'> {
  * TableOfContents UI component
  */
 export declare const TableOfContents: ({ appendIds, ariaLabel, className, headingLevel, headingText, ignoreClass, showHeading, sourceID, ...props }: TableOfContentsProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Tabs/Tabs.d.ts

@@ -30,6 +30,7 @@ interface Tabs {
         type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
     };
 }
+export type TabsSize = 's' | 'm';
 interface TabsProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Sets tabset aria label
@@ -51,6 +52,10 @@ interface TabsProps extends ComponentPropsWithoutRef<'div'> {
      * Sets currently selected tab using a zero-based index
      */
     selectedTab?: number;
+    /**
+     * Size of the tabs.
+     */
+    size?: TabsSize;
     /**
      * Array of objects for tab data
      */
@@ -59,5 +64,5 @@ interface TabsProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Tabs UI component
  */
-export declare const Tabs: ({ ariaLabel, className, defaultSelected, onActiveTabChange, selectedTab, tabs, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tabs: ({ ariaLabel, className, defaultSelected, onActiveTabChange, selectedTab, size, tabs, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Tag/Tag.d.ts

@@ -1,7 +1,8 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import './tag.css';
-export declare const tagColors: string[];
+export declare const tagColors: readonly ["apollo", "iris", "hypnos", "gaia", "aether", "success", "warning", "critical", "info", "discovery", "amber", "orange", "lime", "teal", "sky", "indigo", "rose", "slate", "sand", "mint", "silver", "stone"];
 type TagColor = (typeof tagColors)[number];
+export type TagSize = 'xs' | 's' | 'm';
 interface TagProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Additional class names
@@ -23,6 +24,10 @@ interface TagProps extends ComponentPropsWithoutRef<'div'> {
      * Label for the remove button. Tag text will be appended to this label.
      */
     removeLabel?: string;
+    /**
+     * Size of the tag.
+     */
+    size?: TagSize;
     /**
      * Tag color. Will use random color if not selected.
      */
@@ -31,9 +36,15 @@ interface TagProps extends ComponentPropsWithoutRef<'div'> {
      * Tag text
      */
     tagLabel: string;
+    /**
+     * Maximum number of characters before truncation. Set to 0 to disable
+     * truncation entirely. Defaults to 20. Most use cases should keep the
+     * default, especially in multi-tag contexts.
+     */
+    truncationLength?: number;
 }
 /**
  * Tag UI component
  */
-export declare const Tag: ({ className, isRemovable, linkContent, onRemove, removeLabel, tagColor, tagLabel, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tag: ({ className, isRemovable, linkContent, onRemove, removeLabel, size, tagColor, tagLabel, truncationLength, ...props }: TagProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ThemeSwitcher/ThemeSwitcher.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react';
 import './theme-switcher.css';
+type Theme = 'light' | 'dark' | 'system';
 /**
  * Prop types for ThemeSwitcher
  */
@@ -9,24 +10,29 @@ export interface ThemeSwitcherProps extends Omit<ComponentPropsWithoutRef<'div'>
      */
     className?: string;
     /**
-     * Callback triggered when the theme changes
+     * ID for the menu button. Must be unique if multiple ThemeSwitchers are rendered.
      */
-    onChange?: (theme: 'light' | 'dark' | 'system') => void;
-    /**
-     * The current theme
-     */
-    theme?: 'light' | 'dark' | 'system';
+    id?: string;
     /**
      * Translation strings for theme options
      */
-    translations?: {
+    labelStrings?: {
         dark: string;
         light: string;
         system: string;
         tooltip?: string;
     };
+    /**
+     * Callback triggered when the theme changes
+     */
+    onChange?: (theme: Theme) => void;
+    /**
+     * The current theme
+     */
+    theme?: Theme;
 }
 /**
  * ThemeSwitcher UI component
  */
-export declare const ThemeSwitcher: ({ className, onChange, theme, translations, ...props }: ThemeSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeSwitcher: ({ className, id, labelStrings, onChange, theme, ...props }: ThemeSwitcherProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Tooltip/Tooltip.d.ts

@@ -15,6 +15,10 @@ interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
      * String or HTML content to use as the trigger instead of an icon. Leave null to use the icon.
      */
     customTrigger?: ReactNode;
+    /**
+     * When true, the tooltip will not show on focus — only on hover.
+     */
+    disableFocusTrigger?: boolean;
     /**
      * The spacing between the trigger and the tooltip in pixels. Use the default value (in most cases) when using an icon trigger.
      */
@@ -30,7 +34,7 @@ interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Icon to trigger tooltip
      */
-    triggerIcon?: 'circleInfo' | 'circleQuestion' | 'circleExclamation';
+    triggerIcon?: 'circleExclamation' | 'circleExclamationSolid' | 'circleInfo' | 'circleInfoSolid' | 'circleQuestion' | 'circleQuestionSolid';
     /**
      * Color of the trigger icon. Uses PDS default text color options.
      */
@@ -38,7 +42,7 @@ interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
     /**
      * Size of the trigger icon. Uses PDS Icon sizing.
      */
-    triggerIconSize?: 's' | 'm' | 'l';
+    triggerIconSize?: 'xs' | 's' | 'm' | 'l';
     /**
      * Z-index value for the tooltip container. In most cases, the default value should be retained.
      */
@@ -47,5 +51,5 @@ interface TooltipProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * Tooltip UI component
  */
-export declare const Tooltip: ({ className, content, customTrigger, offsetValue, preferredPlacement, triggerAccessibleText, triggerIcon, triggerIconColor, triggerIconSize, zIndex, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ className, content, customTrigger, disableFocusTrigger, offsetValue, preferredPlacement, triggerAccessibleText, triggerIcon, triggerIconColor, triggerIconSize, zIndex, ...props }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/UtilityBar/UtilityBar.d.ts

@@ -0,0 +1,27 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { GridGapOptions } from '../../libs/types/layout-types';
+import './utility-bar.css';
+type UtilityBarBackground = 'default' | 'default-secondary' | 'transparent';
+type UtilityBarPadding = GridGapOptions | 'none';
+export interface UtilityBarProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Background color of the utility bar.
+     */
+    backgroundColor?: UtilityBarBackground;
+    /**
+     * Child elements assigned to named slots.
+     * - `items-left` — left-side content (e.g. search input)
+     * - `items-right` — right-side controls (e.g. icon buttons)
+     */
+    children: ReactNode;
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Internal padding. Defaults to 'none'.
+     */
+    padding?: UtilityBarPadding;
+}
+export declare const UtilityBar: ({ backgroundColor, children, className, padding, ...props }: UtilityBarProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/badges/Badge/Badge.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './badge.css';
+export type BadgeColor = 'aether' | 'aether-secondary' | 'amber' | 'amber-secondary' | 'apollo' | 'apollo-secondary' | 'critical' | 'critical-secondary' | 'discovery' | 'discovery-secondary' | 'gaia' | 'gaia-secondary' | 'hypnos' | 'hypnos-secondary' | 'indigo' | 'indigo-secondary' | 'info' | 'info-secondary' | 'iris' | 'iris-secondary' | 'lime' | 'lime-secondary' | 'mint' | 'mint-secondary' | 'orange' | 'orange-secondary' | 'rose' | 'rose-secondary' | 'sand' | 'sand-secondary' | 'silver' | 'silver-secondary' | 'sky' | 'sky-secondary' | 'slate' | 'slate-secondary' | 'stone' | 'stone-secondary' | 'success' | 'success-secondary' | 'teal' | 'teal-secondary' | 'warning' | 'warning-secondary' | 'feature';
+/**
+ * Badge component props
+ */
+export interface BadgeProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Badge color
+     */
+    color: BadgeColor;
+    /**
+     * Badge text or content.
+     */
+    label: ReactNode;
+    /**
+     * Badge size
+     */
+    size?: 'xs' | 's' | 'm';
+}
+/**
+ * Badge UI component
+ */
+export declare const Badge: ({ className, color, label, size, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { ComponentPropsWithoutRef } from 'react';
+import React, { ComponentPropsWithoutRef } from 'react';
 import './close-button.css';
 /**
  * Prop types for CloseButton
@@ -15,7 +15,7 @@ export interface CloseButtonProps extends ComponentPropsWithoutRef<'button'> {
     /**
      * Click event callback function.
      */
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Size of the icon.
      */

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,7 @@
 import { ComponentPropsWithRef, ReactNode } from 'react';
 import { ButtonVariant, HeadingItemType, LinkItemType, MenuItemType, NodeItemType, SeparatorItemType } from '../../../libs/types/custom-types';
 import { PDSIcon } from '../../icons/Icon/Icon';
+import '@components/Dropdown/dropdown.css';
 import './menu-button.css';
 type MenuButtonSize = 's' | 'm';
 /**
@@ -63,15 +64,9 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      * 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.
-     */
-    withinNavbar?: boolean;
 }
 /**
  * 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, displayType, iconName, id, isSplitButton, label, menuItems, menuPosition, onClick, size, testId, undefinedLabel, variant, ...props }: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { GridGapOptions } from '../../../libs/types/layout-types';
 import './card.css';
-export type CardBackground = 'default' | 'mint-gradient' | 'sundown-gradient' | 'yellow-gradient' | 'transparent';
+export type CardBackground = 'default' | 'transparent';
 /**
  * Prop types for Card
  */

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

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, ReactElement } from 'react';
-import { BadgeColor } from '../../../libs/types/custom-types';
+import { BadgeColor } from '../../badges/Badge/Badge';
 import './new-site-card.css';
 interface BadgeValueType {
     color: BadgeColor;

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

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
+import { HeadingLevelCommon } from '../../../libs/types/custom-types';
 import { ListItems } from '../../ComparisonList/ComparisonList';
 import './pricing-card.css';
 interface PrimaryCallToAction {
@@ -54,6 +55,10 @@ interface PricingCardProps extends ComponentPropsWithoutRef<'div'> {
      * Add corresponding `comparisonListId` to each planPricingData object.
      */
     hasComparisonList?: boolean;
+    /**
+     * Heading level for the plan name.
+     */
+    headingLevel?: HeadingLevelCommon;
     /**
      * Optional function to handle the change event of the select input. Only valid when multiple tiers of planPricingData are present.
      */
@@ -86,5 +91,5 @@ interface PricingCardProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * PricingCard UI component
  */
-export declare const PricingCard: ({ actionPrimary, actionSecondary, className, hasComparisonList, onTierChange, planDescription, planName, planPricingData, selectLabel, statusBadgeLabels, statusBadgeType, ...props }: PricingCardProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PricingCard: ({ actionPrimary, actionSecondary, className, hasComparisonList, headingLevel, onTierChange, planDescription, planName, planPricingData, selectLabel, statusBadgeLabels, statusBadgeType, ...props }: PricingCardProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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/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 {};

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

@@ -0,0 +1,25 @@
+import type { ChartDataPoint, SeriesConfig } from './types';
+import './chart-legend.css';
+export type LegendVariant = 'inline' | 'table';
+interface ChartLegendProps {
+    /** Chart data — used to calculate totals for table variant */
+    data?: ChartDataPoint[];
+    /** Series definitions */
+    series: SeriesConfig[];
+    /** Colors resolved from tokens */
+    seriesColors: string[];
+    /** Table header for the totals column */
+    tableHeader?: string;
+    /** Formatter for total values in table variant */
+    valueFormatter?: (value: number) => string;
+    /** Legend display style (default: 'inline') */
+    variant?: LegendVariant;
+}
+/**
+ * ChartLegend component
+ *
+ * Renders a chart legend in either inline (horizontal list) or
+ * table (rows with totals) format.
+ */
+export declare const ChartLegend: ({ data, series, seriesColors, tableHeader, valueFormatter, variant, }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import type { LegendVariant } from './types';
+export interface ChartSkeletonProps {
+    height: number;
+    legendVariant?: LegendVariant;
+    showLegend?: boolean;
+}
+export declare const ChartSkeleton: ({ height, legendVariant, showLegend, }: ChartSkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/charts/shared/chart-colors.d.ts

@@ -0,0 +1,30 @@
+import { RefObject } from 'react';
+import type { ColorPalette } from './types';
+/**
+ * Strips fill-only steps from palettes that have them, returning only standalone-safe colors.
+ * Bar and line charts should always use this before rendering series colors.
+ */
+export declare const toStandaloneColors: (palette: ColorPalette, colors: string[]) => string[];
+/**
+ * Normalizes a paletteIndex for palettes that have fill-only steps.
+ * Clamps fill-only step numbers (e.g. 1–2 on sequential-iris/multi) to the first safe step,
+ * then adjusts for the slice offset so the number still maps correctly into the sliced array.
+ * Non-restricted palettes pass through unchanged.
+ */
+export declare const clampPaletteIndex: (palette: ColorPalette, paletteIndex: number | undefined) => number | undefined;
+/**
+ * Get color for a series by index, cycling through palette if needed.
+ * Priority: customColor (hex) > paletteIndex (theme-aware) > auto-assigned.
+ */
+export declare const getSeriesColor: (index: number, palette: string[], customColor?: string, paletteIndex?: number) => string;
+/**
+ * Resolve palette token colors from computed styles on an element.
+ * Falls back to hex values if tokens are not available.
+ */
+export declare const resolveTokenColors: (element: HTMLElement | null, paletteName: ColorPalette) => string[];
+/**
+ * Hook to resolve chart colors from design tokens at runtime.
+ * Falls back to hex values when tokens are not loaded (e.g., SSR).
+ * Re-resolves when the theme changes (via data-theme attribute).
+ */
+export declare const useChartColors: (containerRef: RefObject<HTMLElement | null>, paletteName?: ColorPalette) => string[];

package/dist/components/charts/shared/chart-styles.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Shared Recharts style configuration using PDS design tokens.
+ * Keeps all chart styling in one place rather than split between CSS and JS.
+ */
+export declare const axisTickStyle: {
+    fill: string;
+    fontFamily: string;
+    fontSize: string;
+};
+export declare const axisLabelStyle: {
+    fill: string;
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+};
+export declare const gridStroke = "var(--pds-color-border-default)";