@pantheon-systems/pds-toolkit-react 2.0.0-alpha.2 → 2.0.0-alpha.21

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)";

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

@@ -0,0 +1,12 @@
+/**
+ * Format a number with K/M/B suffixes for chart axis labels.
+ */
+export declare const formatCompactNumber: (value: number) => string;
+/**
+ * Format a number with locale-aware thousand separators.
+ */
+export declare const formatLocaleNumber: (value: number) => string;
+/**
+ * Format a number as a percentage.
+ */
+export declare const formatPercent: (value: number) => string;

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

@@ -0,0 +1,128 @@
+import type { ReactNode } from 'react';
+export interface ChartDataPoint {
+    /** One or more numeric series values, keyed by series name */
+    [key: string]: number | string;
+    /** X-axis label */
+    label: string;
+}
+export type StrokeStyle = 'dashed' | 'solid';
+export interface SeriesConfig {
+    /** Override default token color (CSS custom property or hex). Not theme-aware — use paletteIndex for theme-aware overrides. */
+    color?: string;
+    /** Key matching a property in ChartDataPoint */
+    dataKey: string;
+    /** Display label for legend/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;
+    /** Line style (LineChart only) */
+    strokeStyle?: StrokeStyle;
+}
+export interface ReferenceLineConfig {
+    /** Color override */
+    color?: string;
+    /** Display label */
+    label: string;
+    /** Line style */
+    strokeStyle?: StrokeStyle;
+    /** Y-axis value where line appears */
+    value: number;
+}
+export interface AnnotationConfig {
+    /** X-axis label value to annotate */
+    atLabel: string;
+    /** Color override */
+    color?: string;
+    /** Line style */
+    strokeStyle?: StrokeStyle;
+    /** Display text */
+    text: string;
+}
+export interface TimePeriodOption {
+    /** Display label ("Last 30 Days") */
+    label: string;
+    /** Value identifier */
+    value: string;
+}
+export type ColorPalette = 'categorical' | 'diverging-a' | 'diverging-b' | 'sequential-gray' | 'sequential-iris' | 'sequential-multi' | 'single' | 'status';
+export type LegendVariant = 'inline' | 'table';
+export interface TooltipEntry {
+    /** Series bar/line color */
+    color: string;
+    /** Series data key */
+    dataKey: string;
+    /** Series display name */
+    name: string;
+    /** Data value */
+    value: number;
+}
+export interface TooltipPayload {
+    /** All series entries for this x-axis position */
+    entries: TooltipEntry[];
+    /** X-axis label */
+    label: string;
+}
+export type YAxisDomainItem = number | string | ((dataMax: number) => number);
+export type YAxisDomain = [YAxisDomainItem, YAxisDomainItem];
+export interface ChartLabelStrings {
+    /** Accessible description for the hidden data table. */
+    accessibleTableDescription?: string;
+    /** Heading for the empty state. */
+    emptyStateHeading?: string;
+    /** Message body for the empty state. */
+    emptyStateMessage?: string;
+    /** Table header for the totals column when legendVariant is 'table'. */
+    legendTableHeader?: string;
+    /** Loading label for screen readers. */
+    loadingLabel?: string;
+}
+export interface BaseChartProps {
+    /** Height of the chart area in pixels. Does not include the legend, header, or accessible table. */
+    chartHeight?: number;
+    /** Maximum width of the chart component in pixels. The chart is responsive and will shrink within this constraint. */
+    chartWidth?: number;
+    /** Color palette to use for series colors (default: 'categorical') */
+    colorPalette?: ColorPalette;
+    /** Chart data points */
+    data: ChartDataPoint[];
+    /** Show loading state */
+    isLoading?: boolean;
+    /** Thumbnail mode — hides grid, axes, legend, tooltips, and reduces chart height. Individual show* props can override. */
+    isThumbnail?: boolean;
+    /** Translatable UI strings. Provide overrides for i18n. */
+    labelStrings?: ChartLabelStrings;
+    /** Legend display style (default: 'inline') */
+    legendVariant?: LegendVariant;
+    /** Callback when time period changes */
+    onTimePeriodChange?: (value: string) => void;
+    /** Currently selected time period */
+    selectedTimePeriod?: string;
+    /** Series definitions */
+    series: SeriesConfig[];
+    /** Show accessible data table (visually hidden). Defaults to true regardless of isThumbnail. */
+    showAccessibleTable?: boolean;
+    /** Show axis baseline lines. Defaults to true; false when isThumbnail is set. */
+    showAxisLines?: boolean;
+    /** Show grid lines. Defaults to true; false when isThumbnail is set. */
+    showGrid?: boolean;
+    /** Show legend. Defaults to true; false when isThumbnail is set. */
+    showLegend?: boolean;
+    /** Show tooltip on hover. Defaults to true; false when isThumbnail is set. */
+    showTooltip?: boolean;
+    /** Time period options for built-in selector */
+    timePeriodOptions?: TimePeriodOption[];
+    /** Custom tooltip renderer. Receives normalized payload and replaces the built-in tooltip. */
+    tooltipContent?: (payload: TooltipPayload) => ReactNode;
+    /** X-axis label */
+    xAxisLabel?: string;
+    /** How often to show x-axis ticks. A number n shows every nth tick (e.g. 1 = every other). Defaults to auto. */
+    xAxisTickInterval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
+    /** Override the Y-axis scale bounds. Accepts a tuple of [min, max] where each can be a number, 'auto', 'dataMin', 'dataMax', or a function receiving the data max. */
+    yAxisDomain?: YAxisDomain;
+    /** Custom Y-axis tick formatter */
+    yAxisFormatter?: (value: number) => string;
+    /** Y-axis label */
+    yAxisLabel?: string;
+    /** How often to show y-axis ticks. A number n shows every nth tick (e.g. 1 = every other). Defaults to auto. */
+    yAxisTickInterval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
+}

package/dist/components/empty-states/HorizontalEmptyState/HorizontalEmptyState.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { HeadingLevel } from '../../../libs/types/custom-types';
-import { VideoEmbedProps } from '../../VideoEmbed/VideoEmbed';
+import { VideoEmbedProps } from '../../media/VideoEmbed/VideoEmbed';
 import './horizontal-empty-state.css';
 /**
  * Prop types for HorizontalEmptyState

package/dist/components/footer/SiteFooter/SiteFooter.d.ts

@@ -2,6 +2,10 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ContainerWidth } from '../../../libs/types/custom-types';
 import './site-footer.css';
 interface SiteFooterProps extends ComponentPropsWithoutRef<'footer'> {
+    /**
+     * HTML element to render. Use 'footer' for standalone usage or 'div' when nested inside another footer landmark.
+     */
+    as?: 'footer' | 'div';
     /**
      * Footer content.
      */
@@ -26,5 +30,5 @@ interface SiteFooterProps extends ComponentPropsWithoutRef<'footer'> {
 /**
  * SiteFooter UI component
  */
-export declare const SiteFooter: ({ children, className, containerWidth, hasTopBorder, legalLinks, ...props }: SiteFooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SiteFooter: ({ as: Element, children, className, containerWidth, hasTopBorder, legalLinks, ...props }: SiteFooterProps) => import("react/jsx-runtime").JSX.Element;
 export {};