@automattic/charts 0.56.7 → 0.58.0

package/dist/providers/index.cjs

@@ -6,8 +6,8 @@
 
 
 
-var _chunkYDVHT7GScjs = require('../chunk-YDVHT7GS.cjs');
-require('../chunk-ZVGEDXDP.cjs');
+var _chunkWYK7EL5Rcjs = require('../chunk-WYK7EL5R.cjs');
+require('../chunk-MXGLYWVP.cjs');
 require('../chunk-EMMSS5I5.cjs');
 
 
@@ -17,5 +17,5 @@ require('../chunk-EMMSS5I5.cjs');
 
 
 
-exports.GlobalChartsContext = _chunkYDVHT7GScjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunkYDVHT7GScjs.GlobalChartsProvider; exports.defaultTheme = _chunkYDVHT7GScjs.defaultTheme; exports.useChartId = _chunkYDVHT7GScjs.useChartId; exports.useChartRegistration = _chunkYDVHT7GScjs.useChartRegistration; exports.useGlobalChartsContext = _chunkYDVHT7GScjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunkYDVHT7GScjs.useGlobalChartsTheme;
+exports.GlobalChartsContext = _chunkWYK7EL5Rcjs.GlobalChartsContext; exports.GlobalChartsProvider = _chunkWYK7EL5Rcjs.GlobalChartsProvider; exports.defaultTheme = _chunkWYK7EL5Rcjs.defaultTheme; exports.useChartId = _chunkWYK7EL5Rcjs.useChartId; exports.useChartRegistration = _chunkWYK7EL5Rcjs.useChartRegistration; exports.useGlobalChartsContext = _chunkWYK7EL5Rcjs.useGlobalChartsContext; exports.useGlobalChartsTheme = _chunkWYK7EL5Rcjs.useGlobalChartsTheme;
 //# sourceMappingURL=index.cjs.map

package/dist/providers/index.css

@@ -6,98 +6,4 @@
   z-index: 1;
   pointer-events: none;
 }
-
-/* esbuild-sass-plugin:css-chunk:src/components/legend/private/base-legend.module.scss */
-.a8ccharts-AELBvX {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 16px;
-}
-.a8ccharts-fX8uQe {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.a8ccharts-fX8uQe.a8ccharts-DEe0wg {
-  align-items: flex-start;
-}
-.a8ccharts-fX8uQe.a8ccharts-WBKF9I {
-  align-items: center;
-}
-.a8ccharts-fX8uQe.a8ccharts-JfwMng {
-  align-items: flex-end;
-}
-.a8ccharts-8Y73Kh {
-  position: relative;
-}
-.a8ccharts-8Y73Kh.a8ccharts-DEe0wg {
-  justify-content: flex-start;
-}
-.a8ccharts-8Y73Kh.a8ccharts-WBKF9I {
-  justify-content: center;
-}
-.a8ccharts-8Y73Kh.a8ccharts-JfwMng {
-  justify-content: flex-end;
-}
-.a8ccharts-TVM-IY {
-  position: relative;
-}
-.a8ccharts-TVM-IY.a8ccharts-DEe0wg {
-  justify-content: flex-start;
-}
-.a8ccharts-TVM-IY.a8ccharts-WBKF9I {
-  justify-content: center;
-}
-.a8ccharts-TVM-IY.a8ccharts-JfwMng {
-  justify-content: flex-end;
-}
-.a8ccharts-Vflwq8 {
-  display: flex;
-  align-items: center;
-  font-size: 0.875rem;
-}
-.a8ccharts-qGsavM {
-  cursor: pointer;
-  user-select: none;
-  transition: opacity 0.2s ease;
-}
-.a8ccharts-qGsavM:hover {
-  opacity: 0.8;
-}
-.a8ccharts-qGsavM:focus {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-  border-radius: 4px;
-}
-.a8ccharts-qGsavM:focus:not(:focus-visible) {
-  outline: none;
-}
-.a8ccharts-ZtDY-Q {
-  opacity: 0.4;
-}
-.a8ccharts-ZtDY-Q .a8ccharts-2H65Kr {
-  text-decoration: line-through;
-}
-.a8ccharts-2H65Kr {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.a8ccharts-faSDBI {
-  overflow-wrap: break-word;
-  white-space: normal;
-  hyphens: auto;
-}
-.a8ccharts-FISUIO {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  flex-shrink: 1;
-  min-width: 0;
-}
-.a8ccharts-DTZlT- {
-  font-weight: 500;
-  flex-shrink: 0;
-}
 /*# sourceMappingURL=index.css.map */

package/dist/providers/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["esbuild-sass-plugin:css-chunk:src/hooks/use-tooltip-portal-relocator.module.scss","esbuild-sass-plugin:css-chunk:src/components/legend/private/base-legend.module.scss"],"sourcesContent":[".a8ccharts-jCw5dQ {\n  position: fixed;\n  inset: 0;\n  overflow: visible;\n  z-index: 1;\n  pointer-events: none;\n}",".a8ccharts-AELBvX {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  gap: 16px;\n}\n.a8ccharts-fX8uQe {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.a8ccharts-fX8uQe.a8ccharts-DEe0wg {\n  align-items: flex-start;\n}\n.a8ccharts-fX8uQe.a8ccharts-WBKF9I {\n  align-items: center;\n}\n.a8ccharts-fX8uQe.a8ccharts-JfwMng {\n  align-items: flex-end;\n}\n.a8ccharts-8Y73Kh {\n  position: relative;\n}\n.a8ccharts-8Y73Kh.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-8Y73Kh.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-8Y73Kh.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n.a8ccharts-TVM-IY {\n  position: relative;\n}\n.a8ccharts-TVM-IY.a8ccharts-DEe0wg {\n  justify-content: flex-start;\n}\n.a8ccharts-TVM-IY.a8ccharts-WBKF9I {\n  justify-content: center;\n}\n.a8ccharts-TVM-IY.a8ccharts-JfwMng {\n  justify-content: flex-end;\n}\n\n.a8ccharts-Vflwq8 {\n  display: flex;\n  align-items: center;\n  font-size: 0.875rem;\n}\n.a8ccharts-qGsavM {\n  cursor: pointer;\n  user-select: none;\n  transition: opacity 0.2s ease;\n}\n.a8ccharts-qGsavM:hover {\n  opacity: 0.8;\n}\n.a8ccharts-qGsavM:focus {\n  outline: 2px solid currentColor;\n  outline-offset: 2px;\n  border-radius: 4px;\n}\n.a8ccharts-qGsavM:focus:not(:focus-visible) {\n  outline: none;\n}\n.a8ccharts-ZtDY-Q {\n  opacity: 0.4;\n}\n.a8ccharts-ZtDY-Q .a8ccharts-2H65Kr {\n  text-decoration: line-through;\n}\n\n.a8ccharts-2H65Kr {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  /* Text wrapping is handled at the text level, not the label container */\n}\n\n.a8ccharts-faSDBI {\n  overflow-wrap: break-word;\n  white-space: normal;\n  hyphens: auto;\n}\n.a8ccharts-FISUIO {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  flex-shrink: 1;\n  min-width: 0;\n}\n\n.a8ccharts-DTZlT- {\n  font-weight: 500;\n  flex-shrink: 0;\n}"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,SAAO;AACP,YAAU;AACV,WAAS;AACT,kBAAgB;AAClB;;;ACNA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,aAAW;AACX,OAAK;AACP;AACA,CAAC;AACC,WAAS;AACT,kBAAgB;AAChB,OAAK;AACP;AACA,CALC,gBAKgB,CAAC;AAChB,eAAa;AACf;AACA,CARC,gBAQgB,CAAC;AAChB,eAAa;AACf;AACA,CAXC,gBAWgB,CAAC;AAChB,eAAa;AACf;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAZC;AAahB,mBAAiB;AACnB;AACA,CAAC;AACC,YAAU;AACZ;AACA,CAHC,gBAGgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CANC,gBAMgB,CAxBC;AAyBhB,mBAAiB;AACnB;AACA,CATC,gBASgB,CAxBC;AAyBhB,mBAAiB;AACnB;AAEA,CAAC;AACC,WAAS;AACT,eAAa;AACb,aAAW;AACb;AACA,CAAC;AACC,UAAQ;AACR,eAAa;AACb,cAAY,QAAQ,KAAK;AAC3B;AACA,CALC,gBAKgB;AACf,WAAS;AACX;AACA,CARC,gBAQgB;AACf,WAAS,IAAI,MAAM;AACnB,kBAAgB;AAChB,iBAAe;AACjB;AACA,CAbC,gBAagB,MAAM,KAAK;AAC1B,WAAS;AACX;AACA,CAAC;AACC,WAAS;AACX;AACA,CAHC,iBAGiB,CAAC;AACjB,mBAAiB;AACnB;AAEA,CAJmB;AAKjB,WAAS;AACT,eAAa;AACb,OAAK;AAEP;AAEA,CAAC;AACC,iBAAe;AACf,eAAa;AACb,WAAS;AACX;AACA,CAAC;AACC,eAAa;AACb,YAAU;AACV,iBAAe;AACf,eAAa;AACb,aAAW;AACb;AAEA,CAAC;AACC,eAAa;AACb,eAAa;AACf;","names":[]}
+{"version":3,"sources":["esbuild-sass-plugin:css-chunk:src/hooks/use-tooltip-portal-relocator.module.scss"],"sourcesContent":[".a8ccharts-jCw5dQ {\n  position: fixed;\n  inset: 0;\n  overflow: visible;\n  z-index: 1;\n  pointer-events: none;\n}"],"mappings":";AAAA,CAAC;AACC,YAAU;AACV,SAAO;AACP,YAAU;AACV,WAAS;AACT,kBAAgB;AAClB;","names":[]}

package/dist/providers/index.d.cts

@@ -1,7 +1,7 @@
-export { C as ChartRegistration, E as ElementStyles, c as GetElementStylesParams, G as GlobalChartsContext, e as GlobalChartsContextValue, a as GlobalChartsProvider, d as defaultTheme, u as useGlobalChartsContext, b as useGlobalChartsTheme } from '../themes-CVR5rmIs.cjs';
-import { B as BaseLegendItem } from '../types-C05PdDJa.cjs';
+export { C as ChartRegistration, E as ElementStyles, c as GetElementStylesParams, G as GlobalChartsContext, e as GlobalChartsContextValue, a as GlobalChartsProvider, d as defaultTheme, u as useGlobalChartsContext, b as useGlobalChartsTheme } from '../themes-D0qc5JaW.cjs';
+import { B as BaseLegendItem } from '../types-Dfw9VOKI.cjs';
 import 'react';
-import '../types-CzdN7rUe.cjs';
+import '../types-ChOUI9-N.cjs';
 import '@visx/annotation/lib/components/CircleSubject';
 import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';

package/dist/providers/index.d.ts

@@ -1,7 +1,7 @@
-export { C as ChartRegistration, E as ElementStyles, c as GetElementStylesParams, G as GlobalChartsContext, e as GlobalChartsContextValue, a as GlobalChartsProvider, d as defaultTheme, u as useGlobalChartsContext, b as useGlobalChartsTheme } from '../themes-DQzmaSze.js';
-import { B as BaseLegendItem } from '../types-C05PdDJa.js';
+export { C as ChartRegistration, E as ElementStyles, c as GetElementStylesParams, G as GlobalChartsContext, e as GlobalChartsContextValue, a as GlobalChartsProvider, d as defaultTheme, u as useGlobalChartsContext, b as useGlobalChartsTheme } from '../themes-itO4Ht5g.js';
+import { B as BaseLegendItem } from '../types-BuSrRM4p.js';
 import 'react';
-import '../types-CzdN7rUe.js';
+import '../types-ChOUI9-N.js';
 import '@visx/annotation/lib/components/CircleSubject';
 import '@visx/annotation/lib/components/Connector';
 import '@visx/annotation/lib/components/Label';

package/dist/providers/index.js

@@ -6,8 +6,8 @@ import {
   useChartRegistration,
   useGlobalChartsContext,
   useGlobalChartsTheme
-} from "../chunk-RFSHE3HL.js";
-import "../chunk-TE63Y5PX.js";
+} from "../chunk-2I67QUIV.js";
+import "../chunk-JJIMABHT.js";
 import "../chunk-G3PMV62Z.js";
 export {
   GlobalChartsContext,

package/dist/{themes-CVR5rmIs.d.cts → themes-D0qc5JaW.d.cts}

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, CSSProperties, FC } from 'react';
-import { b as CompleteChartTheme, j as SeriesData, d as DataPointPercentage, C as ChartTheme } from './types-CzdN7rUe.cjs';
-import { B as BaseLegendItem } from './types-C05PdDJa.cjs';
+import { c as CompleteChartTheme, o as SeriesData, e as DataPointPercentage, b as ChartTheme } from './types-ChOUI9-N.cjs';
+import { B as BaseLegendItem } from './types-Dfw9VOKI.cjs';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles, GlyphProps } from '@visx/xychart';
 

package/dist/{themes-DQzmaSze.d.ts → themes-itO4Ht5g.d.ts}

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { ReactNode, CSSProperties, FC } from 'react';
-import { b as CompleteChartTheme, j as SeriesData, d as DataPointPercentage, C as ChartTheme } from './types-CzdN7rUe.js';
-import { B as BaseLegendItem } from './types-C05PdDJa.js';
+import { c as CompleteChartTheme, o as SeriesData, e as DataPointPercentage, b as ChartTheme } from './types-ChOUI9-N.js';
+import { B as BaseLegendItem } from './types-BuSrRM4p.js';
 import { LegendShape } from '@visx/legend/lib/types';
 import { LineStyles, GlyphProps } from '@visx/xychart';
 

package/dist/{types-BBwg4Evw.d.cts → types-B5f6XQ7Q.d.cts}

@@ -1,4 +1,4 @@
-import { L as Legend } from './legend-C9ahiwOt.cjs';
+import { L as Legend } from './legend-DFkosEvC.cjs';
 import { ComponentType, FC, PropsWithChildren } from 'react';
 
 /**

package/dist/{types-DQNnq5Fr.d.ts → types-BsHooDbM.d.ts}

@@ -1,4 +1,4 @@
-import { L as Legend } from './legend-jjMmhSg3.js';
+import { L as Legend } from './legend-DLswHhOk.js';
 import { ComponentType, FC, PropsWithChildren } from 'react';
 
 /**

package/dist/{types-C05PdDJa.d.cts → types-BuSrRM4p.d.ts}

@@ -1,32 +1,24 @@
 import { LegendOrdinal } from '@visx/legend';
+import { j as LegendPosition, h as LegendItemStyles, i as LegendLabelStyles, k as LegendShapeStyles } from './types-ChOUI9-N.js';
 import { GlyphProps, LineStyles } from '@visx/xychart';
 import { ComponentProps, ReactNode, CSSProperties } from 'react';
 
-type LegendOrdinalProps = Omit<ComponentProps<typeof LegendOrdinal>, 'scale' | 'direction'>;
-type BaseLegendProps = Omit<LegendOrdinalProps, 'shapeStyle'> & {
+type VisxLegendProps = Pick<ComponentProps<typeof LegendOrdinal>, 'className' | 'shape' | 'fill' | 'size' | 'labelFormat' | 'labelTransform'>;
+type BaseLegendProps = VisxLegendProps & {
     items: BaseLegendItem[];
     orientation?: 'horizontal' | 'vertical';
-    /**
-     * TODO: Add 'left' | 'right' positioning support in future implementation
-     */
-    position?: 'top' | 'bottom';
+    position?: LegendPosition;
     alignment?: 'start' | 'center' | 'end';
-    /**
-     * Maximum width for legend items. When set, text overflow behavior is controlled by textOverflow prop.
-     * Should be a CSS value string (e.g. '200px', '50%', '10rem')
-     */
-    maxWidth?: string;
-    /**
-     * Controls how text behaves when it exceeds maxWidth.
-     * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
-     * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
-     */
-    textOverflow?: 'ellipsis' | 'wrap';
-    /**
-     * Additional CSS class name for legend items.
-     * This allows consumers to customize individual legend item styling.
-     */
-    legendItemClassName?: string;
+    /** Additional CSS class name for legend items. */
+    itemClassName?: string;
+    /** CSS styles for each legend item (margin, flexDirection). */
+    itemStyles?: LegendItemStyles;
+    /** Additional CSS class name for legend labels. */
+    labelClassName?: string;
+    /** CSS styles for legend labels (justifyContent, flex, margin). */
+    labelStyles?: LegendLabelStyles;
+    /** Styles for legend shapes (width, height, margin). */
+    shapeStyles?: LegendShapeStyles;
     /**
      * Function for rendering a custom legend layout.
      */
@@ -47,7 +39,7 @@ type LegendProps = Omit<BaseLegendProps, 'items'> & {
 };
 type BaseLegendItem = {
     label: string;
-    value: number | string;
+    value?: number | string;
     color: string;
     glyphSize?: number;
     renderGlyph?: <Datum extends object>(props: GlyphProps<Datum>) => ReactNode;

package/dist/{types-CzdN7rUe.d.cts → types-ChOUI9-N.d.cts}

@@ -8,7 +8,7 @@ import { ScaleType, ScaleInput } from '@visx/scale';
 import { TextProps } from '@visx/text/lib/Text';
 import { EventHandlerParams, LineStyles, GridStyles, GlyphProps } from '@visx/xychart';
 import { GapSize } from '@wordpress/theme';
-import { PointerEvent, ReactNode, CSSProperties } from 'react';
+import { PointerEvent, CSSProperties, ReactNode } from 'react';
 import { GoogleDataTableColumn, GoogleDataTableRow } from 'react-google-charts';
 
 type ValueOf<T> = T[keyof T];
@@ -192,14 +192,17 @@ type ChartTheme = {
     xAxisLineStyles?: LineStyles;
     /** Styles for series lines */
     seriesLineStyles?: LineStyles[];
-    /** Styles for legend shapes */
-    legendShapeStyles?: Record<string, unknown>[];
     /** Array of render functions for glyphs */
     glyphs?: Array<(<Datum extends object>(props: GlyphProps<Datum>) => ReactNode)>;
-    /** Styles for legend labels */
-    legendLabelStyles?: CSSProperties;
-    /** Styles for legend container */
-    legendContainerStyles?: CSSProperties;
+    /** Legend specific settings */
+    legend?: {
+        /** Styles for legend shapes */
+        shapeStyles?: Record<string, unknown>[];
+        /** Styles for legend labels */
+        labelStyles?: CSSProperties;
+        /** Styles for legend container */
+        containerStyles?: CSSProperties;
+    };
     /** Styles for small SVG text (eg. axis tick labels), passed through to the XYChart theme. */
     svgLabelSmall?: TextProps;
     annotationStyles?: AnnotationStyles;
@@ -260,6 +263,7 @@ type CompleteChartTheme = Required<ChartTheme> & {
     lineChart: {
         lineStyles: Record<NonNullable<SeriesDataOptions['type']>, LineStyles>;
     };
+    legend: Required<NonNullable<ChartTheme['legend']>>;
     sparkline: Required<NonNullable<ChartTheme['sparkline']>> & {
         margin: Required<NonNullable<ChartTheme['sparkline']>['margin']>;
     };
@@ -318,6 +322,81 @@ type ScaleOptions = {
      */
     paddingOuter?: number;
 };
+type LegendItemStyles = {
+    /** Margin around each legend item. */
+    margin?: CSSProperties['margin'];
+    /** Flex direction for items within each legend entry. */
+    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+};
+type LegendLabelStyles = Pick<CSSProperties, 'justifyContent' | 'flex' | 'margin'> & {
+    /**
+     * Maximum width for legend label text as a CSS value (e.g. '200px', '50%', '10rem').
+     * When set, text overflow behavior is controlled by textOverflow.
+     */
+    maxWidth?: string;
+    /**
+     * Controls how text behaves when it exceeds maxWidth.
+     * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
+     * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
+     */
+    textOverflow?: 'ellipsis' | 'wrap';
+};
+type LegendShapeStyles = {
+    /** Width of the legend shape in pixels. */
+    width?: number;
+    /** Height of the legend shape in pixels. */
+    height?: number;
+    /** Margin around the legend shape. */
+    margin?: CSSProperties['margin'];
+};
+/** Position of the legend relative to chart content. */
+type LegendPosition = 'top' | 'bottom';
+/**
+ * Configuration object for chart legend appearance and behavior.
+ * Consolidates all legend styling and layout props into a single structured object.
+ */
+type ChartLegendConfig<T = DataPoint | DataPointDate | LeaderboardEntry> = {
+    /**
+     * Layout direction of legend items.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Position of the legend relative to the chart.
+     * TODO: Add 'left' | 'right' positioning support in future implementation
+     */
+    position?: LegendPosition;
+    /**
+     * Alignment of the legend within its position.
+     */
+    alignment?: 'start' | 'center' | 'end';
+    /**
+     * Shape of the legend marker icon.
+     */
+    shape?: LegendShape<T, number>;
+    /**
+     * Enable interactive legend items that can toggle series visibility.
+     * Supported for all chart types that render series.
+     * Requires chartId and GlobalChartsProvider.
+     * For pie charts, percentages are recalculated so visible segments total 100%.
+     */
+    interactive?: boolean;
+    /**
+     * Additional CSS class name for individual legend items.
+     */
+    itemClassName?: string;
+    /**
+     * CSS styles for each legend item (margin, flexDirection).
+     */
+    itemStyles?: LegendItemStyles;
+    /**
+     * CSS styles for legend labels (maxWidth, textOverflow, justifyContent, flex, margin).
+     */
+    labelStyles?: LegendLabelStyles;
+    /**
+     * Styles for legend shapes (width, height, margin).
+     */
+    shapeStyles?: LegendShapeStyles;
+};
 /**
  * Base properties shared across all chart components
  */
@@ -382,45 +461,10 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
      */
     showLegend?: boolean;
     /**
-     * Legend orientation
-     */
-    legendOrientation?: 'horizontal' | 'vertical';
-    /**
-     * Legend shape
-     */
-    legendShape?: LegendShape<T, number>;
-    /**
-     * Legend position (where the legend appears)
-     * TODO: Add 'left' | 'right' positioning support in future implementation
-     */
-    legendPosition?: 'top' | 'bottom';
-    /**
-     * Legend alignment within its position
-     */
-    legendAlignment?: 'start' | 'center' | 'end';
-    /**
-     * Maximum width for legend items. When set, text overflow behavior is controlled by legendTextOverflow.
-     * Should be a CSS value string (e.g. '200px', '50%', '10rem')
-     */
-    legendMaxWidth?: string;
-    /**
-     * Controls how text behaves when it exceeds legendMaxWidth.
-     * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
-     * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
-     */
-    legendTextOverflow?: 'ellipsis' | 'wrap';
-    /**
-     * Additional CSS class name for legend items.
-     * This allows consumers to customize individual legend item styling.
-     */
-    legendItemClassName?: string;
-    /**
-     * Enable interactive legend items that can toggle series visibility.
-     * Supported for LineChart, PieChart, and PieSemiCircleChart.
-     * Requires chartId and GlobalChartsProvider.
-     * For pie charts, percentages are recalculated so visible segments total 100%.
+     * Legend configuration object for controlling legend appearance and behavior.
+     * Includes orientation, position, alignment, shape, styling, and interactivity options.
      */
-    legendInteractive?: boolean;
+    legend?: ChartLegendConfig<T>;
     /**
      * Grid visibility. x is default when orientation is vertical. y is default when orientation is horizontal.
      */
@@ -498,4 +542,4 @@ interface ToggleEvent extends Event {
     oldState: 'open' | 'closed';
 }
 
-export type { AnnotationStyles as A, BaseChartProps as B, ChartTheme as C, DataPoint as D, GeoData as G, LeaderboardEntry as L, MultipleDataPointsDate as M, Optional as O, PopoverButtonAttributes as P, ScaleOptions as S, ToggleEvent as T, ButtonWithPopover as a, CompleteChartTheme as b, DataPointDate as c, DataPointPercentage as d, GradientStop as e, GridProps as f, OrientationType as g, PopoverElement as h, PopoverElementAttributes as i, SeriesData as j, SeriesDataOptions as k };
+export type { AnnotationStyles as A, BaseChartProps as B, ChartLegendConfig as C, DataPoint as D, GeoData as G, LeaderboardEntry as L, MultipleDataPointsDate as M, Optional as O, PopoverButtonAttributes as P, ScaleOptions as S, ToggleEvent as T, ButtonWithPopover as a, ChartTheme as b, CompleteChartTheme as c, DataPointDate as d, DataPointPercentage as e, GradientStop as f, GridProps as g, LegendItemStyles as h, LegendLabelStyles as i, LegendPosition as j, LegendShapeStyles as k, OrientationType as l, PopoverElement as m, PopoverElementAttributes as n, SeriesData as o, SeriesDataOptions as p };

package/dist/{types-CzdN7rUe.d.ts → types-ChOUI9-N.d.ts}

@@ -8,7 +8,7 @@ import { ScaleType, ScaleInput } from '@visx/scale';
 import { TextProps } from '@visx/text/lib/Text';
 import { EventHandlerParams, LineStyles, GridStyles, GlyphProps } from '@visx/xychart';
 import { GapSize } from '@wordpress/theme';
-import { PointerEvent, ReactNode, CSSProperties } from 'react';
+import { PointerEvent, CSSProperties, ReactNode } from 'react';
 import { GoogleDataTableColumn, GoogleDataTableRow } from 'react-google-charts';
 
 type ValueOf<T> = T[keyof T];
@@ -192,14 +192,17 @@ type ChartTheme = {
     xAxisLineStyles?: LineStyles;
     /** Styles for series lines */
     seriesLineStyles?: LineStyles[];
-    /** Styles for legend shapes */
-    legendShapeStyles?: Record<string, unknown>[];
     /** Array of render functions for glyphs */
     glyphs?: Array<(<Datum extends object>(props: GlyphProps<Datum>) => ReactNode)>;
-    /** Styles for legend labels */
-    legendLabelStyles?: CSSProperties;
-    /** Styles for legend container */
-    legendContainerStyles?: CSSProperties;
+    /** Legend specific settings */
+    legend?: {
+        /** Styles for legend shapes */
+        shapeStyles?: Record<string, unknown>[];
+        /** Styles for legend labels */
+        labelStyles?: CSSProperties;
+        /** Styles for legend container */
+        containerStyles?: CSSProperties;
+    };
     /** Styles for small SVG text (eg. axis tick labels), passed through to the XYChart theme. */
     svgLabelSmall?: TextProps;
     annotationStyles?: AnnotationStyles;
@@ -260,6 +263,7 @@ type CompleteChartTheme = Required<ChartTheme> & {
     lineChart: {
         lineStyles: Record<NonNullable<SeriesDataOptions['type']>, LineStyles>;
     };
+    legend: Required<NonNullable<ChartTheme['legend']>>;
     sparkline: Required<NonNullable<ChartTheme['sparkline']>> & {
         margin: Required<NonNullable<ChartTheme['sparkline']>['margin']>;
     };
@@ -318,6 +322,81 @@ type ScaleOptions = {
      */
     paddingOuter?: number;
 };
+type LegendItemStyles = {
+    /** Margin around each legend item. */
+    margin?: CSSProperties['margin'];
+    /** Flex direction for items within each legend entry. */
+    flexDirection?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+};
+type LegendLabelStyles = Pick<CSSProperties, 'justifyContent' | 'flex' | 'margin'> & {
+    /**
+     * Maximum width for legend label text as a CSS value (e.g. '200px', '50%', '10rem').
+     * When set, text overflow behavior is controlled by textOverflow.
+     */
+    maxWidth?: string;
+    /**
+     * Controls how text behaves when it exceeds maxWidth.
+     * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
+     * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
+     */
+    textOverflow?: 'ellipsis' | 'wrap';
+};
+type LegendShapeStyles = {
+    /** Width of the legend shape in pixels. */
+    width?: number;
+    /** Height of the legend shape in pixels. */
+    height?: number;
+    /** Margin around the legend shape. */
+    margin?: CSSProperties['margin'];
+};
+/** Position of the legend relative to chart content. */
+type LegendPosition = 'top' | 'bottom';
+/**
+ * Configuration object for chart legend appearance and behavior.
+ * Consolidates all legend styling and layout props into a single structured object.
+ */
+type ChartLegendConfig<T = DataPoint | DataPointDate | LeaderboardEntry> = {
+    /**
+     * Layout direction of legend items.
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Position of the legend relative to the chart.
+     * TODO: Add 'left' | 'right' positioning support in future implementation
+     */
+    position?: LegendPosition;
+    /**
+     * Alignment of the legend within its position.
+     */
+    alignment?: 'start' | 'center' | 'end';
+    /**
+     * Shape of the legend marker icon.
+     */
+    shape?: LegendShape<T, number>;
+    /**
+     * Enable interactive legend items that can toggle series visibility.
+     * Supported for all chart types that render series.
+     * Requires chartId and GlobalChartsProvider.
+     * For pie charts, percentages are recalculated so visible segments total 100%.
+     */
+    interactive?: boolean;
+    /**
+     * Additional CSS class name for individual legend items.
+     */
+    itemClassName?: string;
+    /**
+     * CSS styles for each legend item (margin, flexDirection).
+     */
+    itemStyles?: LegendItemStyles;
+    /**
+     * CSS styles for legend labels (maxWidth, textOverflow, justifyContent, flex, margin).
+     */
+    labelStyles?: LegendLabelStyles;
+    /**
+     * Styles for legend shapes (width, height, margin).
+     */
+    shapeStyles?: LegendShapeStyles;
+};
 /**
  * Base properties shared across all chart components
  */
@@ -382,45 +461,10 @@ type BaseChartProps<T = DataPoint | DataPointDate | LeaderboardEntry> = {
      */
     showLegend?: boolean;
     /**
-     * Legend orientation
-     */
-    legendOrientation?: 'horizontal' | 'vertical';
-    /**
-     * Legend shape
-     */
-    legendShape?: LegendShape<T, number>;
-    /**
-     * Legend position (where the legend appears)
-     * TODO: Add 'left' | 'right' positioning support in future implementation
-     */
-    legendPosition?: 'top' | 'bottom';
-    /**
-     * Legend alignment within its position
-     */
-    legendAlignment?: 'start' | 'center' | 'end';
-    /**
-     * Maximum width for legend items. When set, text overflow behavior is controlled by legendTextOverflow.
-     * Should be a CSS value string (e.g. '200px', '50%', '10rem')
-     */
-    legendMaxWidth?: string;
-    /**
-     * Controls how text behaves when it exceeds legendMaxWidth.
-     * - 'ellipsis': Truncate with ellipsis (ideal for widgets/small devices)
-     * - 'wrap': Wrap text to multiple lines (default, ideal for larger displays)
-     */
-    legendTextOverflow?: 'ellipsis' | 'wrap';
-    /**
-     * Additional CSS class name for legend items.
-     * This allows consumers to customize individual legend item styling.
-     */
-    legendItemClassName?: string;
-    /**
-     * Enable interactive legend items that can toggle series visibility.
-     * Supported for LineChart, PieChart, and PieSemiCircleChart.
-     * Requires chartId and GlobalChartsProvider.
-     * For pie charts, percentages are recalculated so visible segments total 100%.
+     * Legend configuration object for controlling legend appearance and behavior.
+     * Includes orientation, position, alignment, shape, styling, and interactivity options.
      */
-    legendInteractive?: boolean;
+    legend?: ChartLegendConfig<T>;
     /**
      * Grid visibility. x is default when orientation is vertical. y is default when orientation is horizontal.
      */
@@ -498,4 +542,4 @@ interface ToggleEvent extends Event {
     oldState: 'open' | 'closed';
 }
 
-export type { AnnotationStyles as A, BaseChartProps as B, ChartTheme as C, DataPoint as D, GeoData as G, LeaderboardEntry as L, MultipleDataPointsDate as M, Optional as O, PopoverButtonAttributes as P, ScaleOptions as S, ToggleEvent as T, ButtonWithPopover as a, CompleteChartTheme as b, DataPointDate as c, DataPointPercentage as d, GradientStop as e, GridProps as f, OrientationType as g, PopoverElement as h, PopoverElementAttributes as i, SeriesData as j, SeriesDataOptions as k };
+export type { AnnotationStyles as A, BaseChartProps as B, ChartLegendConfig as C, DataPoint as D, GeoData as G, LeaderboardEntry as L, MultipleDataPointsDate as M, Optional as O, PopoverButtonAttributes as P, ScaleOptions as S, ToggleEvent as T, ButtonWithPopover as a, ChartTheme as b, CompleteChartTheme as c, DataPointDate as d, DataPointPercentage as e, GradientStop as f, GridProps as g, LegendItemStyles as h, LegendLabelStyles as i, LegendPosition as j, LegendShapeStyles as k, OrientationType as l, PopoverElement as m, PopoverElementAttributes as n, SeriesData as o, SeriesDataOptions as p };