@pantheon-systems/pds-toolkit-react 1.17.1 → 1.18.0

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/ChartSkeleton.d.ts

@@ -1,7 +1,11 @@
 import type { LegendVariant } from './types';
 export interface ChartSkeletonProps {
+    /** Optional border radius for the skeleton bar area (e.g. 'var(--pds-border-radius-bar)'). When provided, a rectangular skeleton is clipped to this radius. */
+    borderRadius?: string;
     height: number;
+    /** Alignment of the inline legend skeleton (default: 'center') */
+    legendAlignment?: 'center' | 'left';
     legendVariant?: LegendVariant;
     showLegend?: boolean;
 }
-export declare const ChartSkeleton: ({ height, legendVariant, showLegend, }: ChartSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ChartSkeleton: ({ borderRadius, height, legendAlignment, legendVariant, showLegend, }: ChartSkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/_dist/css/component-css/pds-chart-wrapper.css

@@ -1 +1 @@
-.pds-chart{font-family:var(--pds-typography-ff-default);position:relative;width:100%}.pds-chart__header{align-items:center;display:flex;justify-content:flex-end;margin-block-end:var(--pds-spacing-m)}.pds-chart--loading{display:block}.pds-chart__skeleton{display:flex;flex-direction:column;gap:var(--pds-spacing-m);height:100%;width:100%}.pds-chart__skeleton-area{flex-shrink:0}.pds-chart__skeleton-legend{align-items:center;display:flex;gap:var(--pds-spacing-s)}.pds-chart__skeleton-legend--inline{justify-content:center}.pds-chart__skeleton-legend--table{width:100%}.pds-chart--empty{align-items:center;display:flex;justify-content:center}.recharts-default-tooltip{background-color:var(--pds-color-bg-default)!important;border:var(--pds-border-width-default) solid var(--pds-color-border-default)!important;border-radius:var(--pds-border-radius-container)!important;box-shadow:var(--pds-elevation-overlay)!important;font-family:var(--pds-typography-ff-default)!important;font-size:var(--pds-typography-size-xs)!important;padding:var(--pds-spacing-4xs) var(--pds-spacing-xs)!important}.recharts-tooltip-label{color:var(--pds-color-fg-default)!important;font-weight:var(--pds-typography-fw-semibold)!important;margin:0!important}.recharts-tooltip-item-list li{padding-block:0!important}.recharts-tooltip-item-list{padding:0!important}.recharts-tooltip-item{align-items:center;color:var(--pds-color-fg-default)!important;display:flex;font-size:var(--pds-typography-size-xs)!important;gap:var(--pds-spacing-3xs);margin:0!important;padding:var(--pds-spacing-6xs) 0!important}.recharts-tooltip-item__color{border-radius:2px;display:inline-block;flex-shrink:0;height:8px;width:8px}.pds-bar-chart [aria-hidden=true]:focus,.pds-line-chart [aria-hidden=true]:focus,.recharts-surface:focus,.recharts-wrapper :focus,.recharts-wrapper:focus{outline:none}
+.pds-chart{font-family:var(--pds-typography-ff-default);position:relative;width:100%}.pds-chart__header{align-items:center;display:flex;justify-content:flex-end;margin-block-end:var(--pds-spacing-m)}.pds-chart--loading{display:block}.pds-chart__skeleton{display:flex;flex-direction:column;gap:var(--pds-spacing-m);height:100%;width:100%}.pds-chart__skeleton-area{flex-shrink:0}.pds-chart__skeleton-legend{align-items:center;display:flex;gap:var(--pds-spacing-s)}.pds-chart__skeleton-legend--inline{justify-content:center}.pds-chart__skeleton-legend--inline-left{justify-content:flex-start}.pds-chart__skeleton-legend--table{width:100%}.pds-chart--empty{align-items:center;display:flex;justify-content:center}.recharts-default-tooltip{background-color:var(--pds-color-bg-default)!important;border:var(--pds-border-width-default) solid var(--pds-color-border-default)!important;border-radius:var(--pds-border-radius-container)!important;box-shadow:var(--pds-elevation-overlay)!important;font-family:var(--pds-typography-ff-default)!important;font-size:var(--pds-typography-size-xs)!important;padding:var(--pds-spacing-4xs) var(--pds-spacing-xs)!important}.recharts-tooltip-label{color:var(--pds-color-fg-default)!important;font-weight:var(--pds-typography-fw-semibold)!important;margin:0!important}.recharts-tooltip-item-list li{padding-block:0!important}.recharts-tooltip-item-list{padding:0!important}.recharts-tooltip-item{align-items:center;color:var(--pds-color-fg-default)!important;display:flex;font-size:var(--pds-typography-size-xs)!important;gap:var(--pds-spacing-3xs);margin:0!important;padding:var(--pds-spacing-6xs) 0!important}.recharts-tooltip-item__color{border-radius:2px;display:inline-block;flex-shrink:0;height:8px;width:8px}.pds-bar-chart [aria-hidden=true]:focus,.pds-line-chart [aria-hidden=true]:focus,.recharts-surface:focus,.recharts-wrapper :focus,.recharts-wrapper:focus{outline:none}