@automattic/charts 0.56.7 → 0.57.0

package/src/charts/bar-chart/test/bar-chart.test.tsx

@@ -562,6 +562,36 @@ describe( 'BarChart', () => {
 				expect( width ).toBeGreaterThan( 0 );
 			} );
 		} );
+
+		test( 'ensures minimum pixel height for zero values in small charts', () => {
+			// With a small chart height (100px) and large data range, zero-value bars
+			// should still be visible (at least 3px based on MIN_PIXEL_HEIGHT)
+			renderWithTheme( {
+				showZeroValues: true,
+				height: 100,
+				data: [
+					{
+						label: 'Test Series',
+						data: [
+							{ label: 'Zero', value: 0 },
+							{ label: 'Large', value: 10000 },
+						],
+						options: {},
+					},
+				],
+			} );
+
+			const svgElement = screen.getByRole( 'grid', { name: /bar chart/i } ).querySelector( 'svg' );
+			const bars = svgElement?.querySelectorAll( '.visx-bar-group rect' );
+
+			expect( bars?.length ).toBe( 2 );
+
+			// The zero-value bar (first bar) should have a minimum visible height.
+			// We check for >= 2px to allow for rounding in the pixel calculation.
+			const zeroBar = bars?.[ 0 ];
+			const zeroBarHeight = parseFloat( zeroBar?.getAttribute( 'height' ) || '0' );
+			expect( zeroBarHeight ).toBeGreaterThanOrEqual( 2 );
+		} );
 	} );
 
 	/* eslint-enable testing-library/no-node-access */

package/src/charts/conversion-funnel-chart/test/conversion-funnel-chart.test.tsx

@@ -372,7 +372,7 @@ describe( 'ConversionFunnelChart', () => {
 			expect( customRenderMainMetric ).toHaveBeenCalledWith( {
 				mainRate: 10.3,
 				changeIndicator: undefined,
-				className: undefined,
+				className: 'main-metric',
 				changeColor: expect.any( String ),
 			} );
 		} );
@@ -427,7 +427,7 @@ describe( 'ConversionFunnelChart', () => {
 				index: 1,
 				top: expect.any( Number ),
 				left: expect.any( Number ),
-				className: undefined,
+				className: 'tooltip-wrapper',
 			} );
 		} );
 

package/src/charts/leaderboard-chart/hooks/use-leaderboard-legend-items.ts

@@ -53,7 +53,6 @@ export function useLeaderboardLegendItems( {
 
 		items.push( {
 			label: legendLabels?.primary || __( 'Current period', 'jetpack-charts' ),
-			value: '',
 			color: resolvedPrimaryColor,
 		} );
 
@@ -66,7 +65,6 @@ export function useLeaderboardLegendItems( {
 
 			items.push( {
 				label: legendLabels?.comparison || __( 'Previous period', 'jetpack-charts' ),
-				value: '',
 				color: resolvedSecondaryColor,
 			} );
 		}

package/src/charts/leaderboard-chart/leaderboard-chart.module.scss

@@ -1,19 +1,20 @@
 .leaderboardChart {
-	display: flex;
-	flex-direction: column;
 	transition: opacity 0.3s ease-in-out;
 
-	&--legend-top {
-		flex-direction: column-reverse;
-	}
-
-	&--with-legend {
-		gap: 16px;
+	&--responsive {
+		height: 100%;
+		width: 100%;
 	}
 
 	&--loading {
 		opacity: 0.5;
 	}
+
+	&__content {
+		flex: 1;
+		min-height: 0;
+		overflow: auto;
+	}
 }
 
 .barWithLabelContainer {
@@ -61,8 +62,6 @@
 }
 
 .valueContainer {
-	display: flex;
-	gap: 4px;
 	justify-content: flex-end;
 }
 

package/src/charts/leaderboard-chart/leaderboard-chart.tsx

@@ -1,11 +1,8 @@
 /* eslint-disable @wordpress/no-unsafe-wp-apis */
-import {
-	__experimentalVStack as VStack,
-	__experimentalGrid as Grid,
-	__experimentalText as Text,
-} from '@wordpress/components';
+import { __experimentalGrid as Grid, __experimentalText as Text } from '@wordpress/components';
 import { Fragment } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Stack } from '@wordpress/ui';
 import clsx from 'clsx';
 import { useContext, useMemo, type FC } from 'react';
 import { Legend } from '../../components/legend';
@@ -116,6 +113,8 @@ const BarWithLabel = ( {
  * @param props                   - Component props
  * @param props.data              - Array of leaderboard entries to display
  * @param props.chartId           - Optional unique identifier for the chart
+ * @param props.width             - Optional width of the chart container in pixels
+ * @param props.height            - Optional height of the chart container in pixels
  * @param props.withComparison    - Whether to show comparison data
  * @param props.withOverlayLabel  - Whether to overlay the label on top of the bar
  * @param props.primaryColor      - Primary color for current period bars
@@ -129,10 +128,10 @@ const BarWithLabel = ( {
  * @param props.legendPosition    - Legend position
  * @param props.legendAlignment   - Legend alignment
  * @param props.legendShape       - Legend shape
- * @param props.legendShapeWidth  - Width of legend shapes in pixels
- * @param props.legendShapeHeight - Height of legend shapes in pixels
+ * @param props.legendShapeStyles - Styles for legend shapes (width, height, margin)
  * @param props.legendLabels      - Custom labels for legend items
  * @param props.legendInteractive - Whether legend items are interactive (clickable to toggle series visibility)
+ * @param props.gap               - Spacing between legend and chart content
  * @param props.children          - Child components for composition API
  * @param props.className         - Additional CSS class name
  * @param props.style             - Custom styling for the chart container
@@ -141,6 +140,8 @@ const BarWithLabel = ( {
 const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	data,
 	chartId: providedChartId,
+	width: propWidth,
+	height: propHeight,
 	withComparison = false,
 	withOverlayLabel = false,
 	primaryColor,
@@ -154,16 +155,17 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 	legendPosition = 'bottom',
 	legendAlignment = 'center',
 	legendShape = 'circle',
-	legendShapeWidth = 8,
-	legendShapeHeight = 8,
+	legendShapeStyles: legendShapeStylesProp,
 	legendLabels,
 	legendInteractive = false,
+	gap = 'md',
 	className,
 	style,
 	children,
 } ) => {
 	const chartId = useChartId( providedChartId );
 	const { leaderboardChart: leaderboardChartSettings } = useGlobalChartsTheme();
+	const legendShapeStyles = { width: 8, height: 8, ...legendShapeStylesProp };
 
 	// Process children to extract compound components
 	const { otherChildren } = useChartChildren( children, 'LeaderboardChart' );
@@ -258,13 +260,21 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 					chartHeight: 0,
 				} }
 			>
-				<div
+				<Stack
+					direction="column"
+					data-testid="leaderboard-chart-container"
 					className={ clsx(
 						styles.leaderboardChart,
+						{ [ styles[ 'leaderboardChart--responsive' ] ]: ! propWidth && ! propHeight },
 						{ [ styles[ 'leaderboardChart--loading' ] ]: loading },
 						className
 					) }
-					style={ style }
+					gap={ gap }
+					style={ {
+						...style,
+						width: propWidth || undefined,
+						height: propHeight || undefined,
+					} }
 				>
 					<div className={ styles.emptyState }>
 						{ loading
@@ -273,11 +283,23 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 					</div>
 					{ /* Render children from composition API */ }
 					{ otherChildren }
-				</div>
+				</Stack>
 			</SingleChartContext.Provider>
 		);
 	}
 
+	const legendElement = showLegend && (
+		<Legend
+			orientation={ legendOrientation }
+			position={ legendPosition }
+			alignment={ legendAlignment }
+			shape={ legendShape }
+			shapeStyles={ legendShapeStyles }
+			chartId={ chartId }
+			interactive={ legendInteractive }
+		/>
+	);
+
 	return (
 		<SingleChartContext.Provider
 			value={ {
@@ -286,76 +308,79 @@ const LeaderboardChartInternal: FC< LeaderboardChartProps > = ( {
 				chartHeight: 0,
 			} }
 		>
-			<div
+			<Stack
+				direction="column"
+				data-testid="leaderboard-chart-container"
 				className={ clsx(
 					styles.leaderboardChart,
 					{
+						[ styles[ 'leaderboardChart--responsive' ] ]: ! propWidth && ! propHeight,
 						[ styles[ 'leaderboardChart--loading' ] ]: loading,
-						[ styles[ 'leaderboardChart--with-legend' ] ]: showLegend,
-						[ styles[ 'leaderboardChart--legend-top' ] ]: showLegend && legendPosition === 'top',
 					},
 					className
 				) }
-				style={ style }
+				gap={ gap }
+				style={ {
+					...style,
+					width: propWidth || undefined,
+					height: propHeight || undefined,
+				} }
 			>
-				{ allSeriesHidden ? (
-					<div className={ styles.emptyState }>
-						{ __( 'All series are hidden. Click legend items to show data.', 'jetpack-charts' ) }
-					</div>
-				) : (
-					<Grid templateColumns="minmax(0, 1fr) auto" rowGap={ rowGap } columnGap={ columnGap }>
-						{ data.map( entry => {
-							const colorIndex = Math.sign( entry.delta ) + 1;
-							const deltaColor = deltaColors[ colorIndex ];
-
-							return (
-								<Fragment key={ entry.id }>
-									<VStack spacing={ labelSpacing }>
-										<BarWithLabel
-											entry={ entry }
-											withComparison={ withComparison }
-											withOverlayLabel={ withOverlayLabel }
-											primaryColor={ resolvedPrimaryColor }
-											secondaryColor={ resolvedSecondaryColor }
-											isPrimaryVisible={ isPrimaryVisible }
-											isComparisonVisible={ isComparisonVisible }
-											animation={ animation && ! loading && ! prefersReducedMotion }
-										/>
-									</VStack>
-
-									<div
-										className={ clsx( styles.valueContainer, {
-											[ styles.overlayLabel ]: withOverlayLabel,
-										} ) }
-									>
-										{ isPrimaryVisible && <Text>{ valueFormatter( entry.currentValue ) }</Text> }
-
-										{ withComparison && isComparisonVisible && (
-											<Text style={ { color: deltaColor } }>{ deltaFormatter( entry.delta ) }</Text>
-										) }
-									</div>
-								</Fragment>
-							);
-						} ) }
-					</Grid>
-				) }
+				{ legendPosition === 'top' && legendElement }
 
-				{ showLegend && (
-					<Legend
-						orientation={ legendOrientation }
-						position={ legendPosition }
-						alignment={ legendAlignment }
-						shape={ legendShape }
-						shapeWidth={ legendShapeWidth }
-						shapeHeight={ legendShapeHeight }
-						chartId={ chartId }
-						interactive={ legendInteractive }
-					/>
-				) }
+				<div className={ styles.leaderboardChart__content }>
+					{ allSeriesHidden ? (
+						<div className={ styles.emptyState }>
+							{ __( 'All series are hidden. Click legend items to show data.', 'jetpack-charts' ) }
+						</div>
+					) : (
+						<Grid templateColumns="minmax(0, 1fr) auto" rowGap={ rowGap } columnGap={ columnGap }>
+							{ data.map( entry => {
+								const colorIndex = Math.sign( entry.delta ) + 1;
+								const deltaColor = deltaColors[ colorIndex ];
+
+								return (
+									<Fragment key={ entry.id }>
+										<Stack direction="column" gap={ labelSpacing }>
+											<BarWithLabel
+												entry={ entry }
+												withComparison={ withComparison }
+												withOverlayLabel={ withOverlayLabel }
+												primaryColor={ resolvedPrimaryColor }
+												secondaryColor={ resolvedSecondaryColor }
+												isPrimaryVisible={ isPrimaryVisible }
+												isComparisonVisible={ isComparisonVisible }
+												animation={ animation && ! loading && ! prefersReducedMotion }
+											/>
+										</Stack>
+
+										<Stack
+											direction="row"
+											gap="xs"
+											className={ clsx( styles.valueContainer, {
+												[ styles.overlayLabel ]: withOverlayLabel,
+											} ) }
+										>
+											{ isPrimaryVisible && <Text>{ valueFormatter( entry.currentValue ) }</Text> }
+
+											{ withComparison && isComparisonVisible && (
+												<Text style={ { color: deltaColor } }>
+													{ deltaFormatter( entry.delta ) }
+												</Text>
+											) }
+										</Stack>
+									</Fragment>
+								);
+							} ) }
+						</Grid>
+					) }
+				</div>
+
+				{ legendPosition === 'bottom' && legendElement }
 
 				{ /* Render children from composition API */ }
 				{ otherChildren }
-			</div>
+			</Stack>
 		</SingleChartContext.Provider>
 	);
 };

package/src/charts/leaderboard-chart/test/leaderboard-chart.test.tsx

@@ -2,6 +2,17 @@ import { render, screen } from '@testing-library/react';
 import LeaderboardChart from '../leaderboard-chart';
 import type { LeaderboardEntry } from '../../../types';
 
+const mockDefaultParentSize = () => ( {
+	parentRef: { current: null },
+	width: 400,
+	height: 300,
+} );
+
+// Mock useParentSize so the responsive wrapper returns predictable dimensions in tests
+jest.mock( '@visx/responsive', () => ( {
+	useParentSize: jest.fn( () => mockDefaultParentSize() ),
+} ) );
+
 const mockData: LeaderboardEntry[] = [
 	{
 		id: 'direct',
@@ -40,6 +51,11 @@ const testValueFormatter = ( value: number ) => `${ value }$`;
 const testDeltaFormatter = ( value: number ) => `${ value }delta`;
 
 describe( 'LeaderboardChart', () => {
+	afterEach( () => {
+		const { useParentSize } = jest.requireMock( '@visx/responsive' );
+		useParentSize.mockImplementation( () => mockDefaultParentSize() );
+	} );
+
 	it( 'renders leaderboard entries', () => {
 		render( <LeaderboardChart data={ mockData } /> );
 
@@ -154,8 +170,7 @@ describe( 'LeaderboardChart', () => {
 					withComparison={ true }
 					showLegend={ true }
 					legendShape="rect"
-					legendShapeWidth={ 10 }
-					legendShapeHeight={ 6 }
+					legendShapeStyles={ { width: 10, height: 6 } }
 				/>
 			);
 
@@ -204,7 +219,7 @@ describe( 'LeaderboardChart', () => {
 		it( 'renders LeaderboardChart.Legend as child component', () => {
 			render(
 				<LeaderboardChart data={ mockData } withComparison={ true }>
-					<LeaderboardChart.Legend data-testid="composition-legend-item" />
+					<LeaderboardChart.Legend />
 				</LeaderboardChart>
 			);
 
@@ -212,8 +227,8 @@ describe( 'LeaderboardChart', () => {
 			expect( screen.getByText( 'Direct' ) ).toBeInTheDocument();
 			expect( screen.getByText( 'Social Media' ) ).toBeInTheDocument();
 
-			// Composition legend should render - each legend item gets its own element
-			expect( screen.getAllByTestId( 'composition-legend-item' ) ).toHaveLength( 2 );
+			// Composition legend should render
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
 			expect( screen.getByText( 'Current period' ) ).toBeInTheDocument();
 			expect( screen.getByText( 'Previous period' ) ).toBeInTheDocument();
 		} );
@@ -221,15 +236,12 @@ describe( 'LeaderboardChart', () => {
 		it( 'renders composition legend regardless of showLegend value', () => {
 			render(
 				<LeaderboardChart data={ mockData } withComparison={ true } showLegend={ false }>
-					<LeaderboardChart.Legend data-testid="composition-legend-item" />
+					<LeaderboardChart.Legend />
 				</LeaderboardChart>
 			);
 
-			// No built-in legend should be rendered when showLegend is false
-			expect( screen.queryByTestId( 'legend-item' ) ).not.toBeInTheDocument();
-
-			// Composition legend should still render regardless of showLegend value
-			expect( screen.getAllByTestId( 'composition-legend-item' ) ).toHaveLength( 2 );
+			// Composition legend should render regardless of showLegend value
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
 			expect( screen.getByText( 'Current period' ) ).toBeInTheDocument();
 			expect( screen.getByText( 'Previous period' ) ).toBeInTheDocument();
 		} );
@@ -237,41 +249,36 @@ describe( 'LeaderboardChart', () => {
 		it( 'supports both built-in and composition legends simultaneously', () => {
 			render(
 				<LeaderboardChart data={ mockData } withComparison={ true } showLegend={ true }>
-					<LeaderboardChart.Legend data-testid="composition-legend-item" />
+					<LeaderboardChart.Legend />
 				</LeaderboardChart>
 			);
 
-			// Built-in legend should render (with legend-item test IDs)
-			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 2 );
-
-			// Composition legend should also render
-			expect( screen.getAllByTestId( 'composition-legend-item' ) ).toHaveLength( 2 );
+			// Both built-in and composition legends should render (2 items each = 4 total)
+			expect( screen.getAllByTestId( 'legend-item' ) ).toHaveLength( 4 );
 
 			// Should have legend items from both legends
 			const currentPeriodItems = screen.getAllByText( 'Current period' );
 			const previousPeriodItems = screen.getAllByText( 'Previous period' );
-			expect( currentPeriodItems ).toHaveLength( 2 ); // One from each legend
-			expect( previousPeriodItems ).toHaveLength( 2 ); // One from each legend
+			expect( currentPeriodItems ).toHaveLength( 2 );
+			expect( previousPeriodItems ).toHaveLength( 2 );
 		} );
 
 		it( 'passes props correctly to composition legend', () => {
 			render(
 				<LeaderboardChart data={ mockData } withComparison={ true }>
-					<LeaderboardChart.Legend
-						data-testid="composition-legend-item"
-						shape="circle"
-						shapeWidth={ 12 }
-						shapeHeight={ 12 }
-						style={ { marginTop: '20px' } }
-					/>
+					<LeaderboardChart.Legend shape="circle" shapeStyles={ { margin: '4px 8px' } } />
 				</LeaderboardChart>
 			);
 
-			const legendItems = screen.getAllByTestId( 'composition-legend-item' );
+			const legendItems = screen.getAllByTestId( 'legend-item' );
 			expect( legendItems ).toHaveLength( 2 );
-			// Check that each legend item has the custom style applied
+
+			// Verify custom shape styles are applied within each legend item.
+			// Direct DOM access is needed because visx legend shapes lack accessible attributes and we cannot pass a test id to them.
 			legendItems.forEach( item => {
-				expect( item ).toHaveStyle( { marginTop: '20px' } );
+				// eslint-disable-next-line testing-library/no-node-access
+				const shape = item.querySelector( '.visx-legend-shape' );
+				expect( shape ).toHaveStyle( { margin: '4px 8px' } );
 			} );
 		} );
 
@@ -339,4 +346,26 @@ describe( 'LeaderboardChart', () => {
 			expect( screen.getByText( '-8%' ) ).toBeInTheDocument();
 		} );
 	} );
+
+	describe( 'Responsive wrapper', () => {
+		it( 'fills parent container (height:100%) by default', () => {
+			render( <LeaderboardChart data={ mockData } /> );
+			const wrapper = screen.getByTestId( 'responsive-wrapper' );
+			expect( wrapper ).toHaveStyle( { height: '100%' } );
+		} );
+
+		it( 'applies explicit width and height to chart container', () => {
+			const { useParentSize } = jest.requireMock( '@visx/responsive' );
+			useParentSize.mockReturnValue( {
+				parentRef: { current: null },
+				width: 0,
+				height: 0,
+			} );
+
+			render( <LeaderboardChart data={ mockData } width={ 500 } height={ 240 } /> );
+			const chartContainer = screen.getByTestId( 'leaderboard-chart-container' );
+
+			expect( chartContainer ).toHaveStyle( { width: '500px', height: '240px' } );
+		} );
+	} );
 } );

package/src/charts/leaderboard-chart/test/use-leaderboard-legend-items.test.tsx

@@ -80,7 +80,6 @@ describe( 'useLeaderboardLegendItems', () => {
 			expect( result.current ).toHaveLength( 1 );
 			expect( result.current[ 0 ] ).toEqual( {
 				label: 'Current period',
-				value: '',
 				color: expect.any( String ),
 			} );
 		} );
@@ -102,14 +101,12 @@ describe( 'useLeaderboardLegendItems', () => {
 			// Current period item
 			expect( result.current[ 0 ] ).toEqual( {
 				label: 'Current period',
-				value: '',
 				color: expect.any( String ),
 			} );
 
 			// Previous period item
 			expect( result.current[ 1 ] ).toEqual( {
 				label: 'Previous period',
-				value: '',
 				color: expect.any( String ),
 			} );
 		} );
@@ -585,7 +582,7 @@ describe( 'useLeaderboardLegendItems', () => {
 			expect( result.current[ 1 ].label ).toBe( 'Previous period' );
 		} );
 
-		it( 'should have empty value strings for all items', () => {
+		it( 'should not include value property for legend items', () => {
 			const wrapper = createWrapper();
 			const { result } = renderHook(
 				() =>
@@ -598,7 +595,7 @@ describe( 'useLeaderboardLegendItems', () => {
 			);
 
 			result.current.forEach( item => {
-				expect( item.value ).toBe( '' );
+				expect( item ).not.toHaveProperty( 'value' );
 			} );
 		} );
 

package/src/charts/leaderboard-chart/types.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { BaseChartProps, LeaderboardEntry } from '../../types';
+import type { LegendShapeStyles } from '../../components/legend';
 
 export interface LeaderboardChartProps
 	extends Pick<
@@ -15,6 +16,7 @@ export interface LeaderboardChartProps
 		| 'width'
 		| 'height'
 		| 'size'
+		| 'gap'
 		| 'legendInteractive'
 		| 'animation'
 	> {
@@ -61,14 +63,9 @@ export interface LeaderboardChartProps
 	};
 
 	/**
-	 * Width of legend shapes in pixels
+	 * Styles for legend shapes (width, height, margin).
 	 */
-	legendShapeWidth?: number;
-
-	/**
-	 * Height of legend shapes in pixels
-	 */
-	legendShapeHeight?: number;
+	legendShapeStyles?: LegendShapeStyles;
 
 	/**
 	 * Custom labels for legend items

package/src/charts/line-chart/line-chart.tsx

@@ -457,9 +457,8 @@ const LineChartInternal = forwardRef< SingleChartRef, LineChartProps >(
 				orientation={ legendOrientation }
 				alignment={ legendAlignment }
 				position={ legendPosition }
-				maxWidth={ legendMaxWidth }
-				textOverflow={ legendTextOverflow }
-				legendItemClassName={ legendItemClassName }
+				labelStyles={ { maxWidth: legendMaxWidth, textOverflow: legendTextOverflow } }
+				itemClassName={ legendItemClassName }
 				className={ styles[ 'line-chart__legend' ] }
 				shape={ legendShape }
 				chartId={ chartId }

package/src/charts/pie-chart/pie-chart.tsx

@@ -317,9 +317,8 @@ const PieChartInternal = ( {
 			orientation={ legendOrientation }
 			position={ legendPosition }
 			alignment={ legendAlignment }
-			maxWidth={ legendMaxWidth }
-			textOverflow={ legendTextOverflow }
-			legendItemClassName={ legendItemClassName }
+			labelStyles={ { maxWidth: legendMaxWidth, textOverflow: legendTextOverflow } }
+			itemClassName={ legendItemClassName }
 			shape={ legendShape }
 			chartId={ chartId }
 			interactive={ legendInteractive }

package/src/charts/pie-semi-circle-chart/pie-semi-circle-chart.tsx

@@ -352,9 +352,8 @@ const PieSemiCircleChartInternal: FC< PieSemiCircleChartProps > = ( {
 			orientation={ legendOrientation }
 			position={ legendPosition }
 			alignment={ legendAlignment }
-			maxWidth={ legendMaxWidth }
-			textOverflow={ legendTextOverflow }
-			legendItemClassName={ legendItemClassName }
+			labelStyles={ { maxWidth: legendMaxWidth, textOverflow: legendTextOverflow } }
+			itemClassName={ legendItemClassName }
 			shape={ legendShape }
 			chartId={ chartId }
 			interactive={ legendInteractive }

package/src/components/legend/index.ts

@@ -1,4 +1,11 @@
 export { Legend } from './legend';
 export { useChartLegendItems } from './hooks/use-chart-legend-items';
-export type { LegendProps, BaseLegendProps, BaseLegendItem } from './types';
+export type {
+	LegendProps,
+	BaseLegendProps,
+	BaseLegendItem,
+	LegendItemStyles,
+	LegendLabelStyles,
+	LegendShapeStyles,
+} from './types';
 export type { ChartLegendOptions, LegendValueDisplay } from './hooks/use-chart-legend-items';