@structyl/primitives 1.0.0 → 1.1.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as _structyl_core from '@structyl/core';
-import { PointerDownOutsideEvent, FocusOutsideEvent } from '@structyl/core';
+import { PointerDownOutsideEvent, FocusOutsideEvent, Primitive } from '@structyl/core';
 
 interface ButtonProps$1 extends React.ComponentPropsWithoutRef<'button'> {
     asChild?: boolean;
@@ -1599,8 +1599,7 @@ declare const Timeline: {
         asChild?: boolean;
     } & React.RefAttributes<HTMLDivElement>>;
 };
-interface ClickAwayListenerProps {
-    children?: React.ReactNode;
+interface ClickAwayListenerProps extends React.ComponentPropsWithoutRef<'span'> {
     onClickAway?: (event: MouseEvent | TouchEvent) => void;
 }
 declare const ClickAwayListener: React.ForwardRefExoticComponent<ClickAwayListenerProps & React.RefAttributes<HTMLSpanElement>>;
@@ -1610,13 +1609,10 @@ declare const NoSsr: React.FC<{
     defer?: boolean;
 }>;
 declare const Portal$3: React.ForwardRefExoticComponent<_structyl_core.PortalProps & React.RefAttributes<HTMLDivElement>>;
-interface PopperProps {
+interface PopperProps extends React.ComponentPropsWithoutRef<'div'> {
     open: boolean;
     anchorEl?: Element | null | (() => Element | null);
     placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
-    children?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
     keepMounted?: boolean;
     disablePortal?: boolean;
     container?: Element | DocumentFragment | null;
@@ -1872,21 +1868,23 @@ declare const Root$f: React.ForwardRefExoticComponent<CalendarRootProps & React.
 declare const Header$1: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const PreviousButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const NextButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const Heading: React.FC<{
+interface CalendarHeadingProps extends React.ComponentPropsWithoutRef<typeof Primitive.span> {
     format?: Intl.DateTimeFormatOptions;
     locale?: string;
-}>;
+}
+declare const Heading: React.ForwardRefExoticComponent<CalendarHeadingProps & React.RefAttributes<HTMLSpanElement>>;
 declare const Grid$1: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
-declare const GridHead: React.FC<{
+interface CalendarGridHeadProps extends React.ComponentPropsWithoutRef<'thead'> {
     locale?: string;
     format?: 'narrow' | 'short' | 'long';
-}>;
-interface GridBodyProps {
+}
+declare const GridHead: React.ForwardRefExoticComponent<CalendarGridHeadProps & React.RefAttributes<HTMLTableSectionElement>>;
+interface GridBodyProps extends Omit<React.ComponentPropsWithoutRef<'tbody'>, 'children'> {
     children: (date: Date, props: {
         isOutsideMonth: boolean;
     }) => React.ReactNode;
 }
-declare const GridBody: React.FC<GridBodyProps>;
+declare const GridBody: React.ForwardRefExoticComponent<GridBodyProps & React.RefAttributes<HTMLTableSectionElement>>;
 interface CalendarDayProps extends React.ComponentPropsWithoutRef<'button'> {
     date: Date;
     isOutsideMonth?: boolean;
@@ -2801,19 +2799,20 @@ declare const Root$9: React.ForwardRefExoticComponent<FileUploadRootProps & Reac
 declare const Dropzone: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const Input$3: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare const List: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
-declare const Item$2: React.FC<{
+interface FileUploadItemProps extends React.ComponentPropsWithoutRef<'li'> {
     file: File;
-    children?: React.ReactNode;
-}>;
+}
+declare const Item$2: React.ForwardRefExoticComponent<FileUploadItemProps & React.RefAttributes<HTMLLIElement>>;
 declare const Trigger$1: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const Clear: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
 declare const index$a_Clear: typeof Clear;
 declare const index$a_Dropzone: typeof Dropzone;
+type index$a_FileUploadItemProps = FileUploadItemProps;
 type index$a_FileUploadRootProps = FileUploadRootProps;
 declare const index$a_List: typeof List;
 declare namespace index$a {
-  export { index$a_Clear as Clear, index$a_Dropzone as Dropzone, type index$a_FileUploadRootProps as FileUploadRootProps, Input$3 as Input, Item$2 as Item, index$a_List as List, Root$9 as Root, Trigger$1 as Trigger };
+  export { index$a_Clear as Clear, index$a_Dropzone as Dropzone, type index$a_FileUploadItemProps as FileUploadItemProps, type index$a_FileUploadRootProps as FileUploadRootProps, Input$3 as Input, Item$2 as Item, index$a_List as List, Root$9 as Root, Trigger$1 as Trigger };
 }
 
 interface ScrollAreaRootProps extends React.ComponentPropsWithoutRef<'div'> {
@@ -2979,8 +2978,7 @@ declare const Root$3: React.ForwardRefExoticComponent<TagsInputRootProps & React
 declare const Input$1: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare const Tag: React.FC<{
     index: number;
-    children?: React.ReactNode;
-}>;
+} & React.ComponentPropsWithoutRef<typeof Primitive.span>>;
 declare const Items$1: React.FC<{
     children: (tag: string, index: number) => React.ReactNode;
 }>;
@@ -3015,20 +3013,21 @@ declare const Suggestions: React.FC<SuggestionsProps>;
 declare const Items: React.FC<{
     children: (item: MentionSuggestion, index: number, highlighted: boolean) => React.ReactNode;
 }>;
-declare const Item: React.FC<{
+interface MentionsItemProps extends React.ComponentPropsWithoutRef<'div'> {
     suggestion: MentionSuggestion;
     index: number;
-    children?: React.ReactNode;
-}>;
+}
+declare const Item: React.FC<MentionsItemProps>;
 
 declare const index$2_Item: typeof Item;
 declare const index$2_Items: typeof Items;
 type index$2_MentionSuggestion = MentionSuggestion;
+type index$2_MentionsItemProps = MentionsItemProps;
 type index$2_MentionsRootProps = MentionsRootProps;
 declare const index$2_Suggestions: typeof Suggestions;
 type index$2_SuggestionsProps = SuggestionsProps;
 declare namespace index$2 {
-  export { index$2_Item as Item, index$2_Items as Items, type index$2_MentionSuggestion as MentionSuggestion, type index$2_MentionsRootProps as MentionsRootProps, Root$2 as Root, index$2_Suggestions as Suggestions, type index$2_SuggestionsProps as SuggestionsProps, Textarea$1 as Textarea };
+  export { index$2_Item as Item, index$2_Items as Items, type index$2_MentionSuggestion as MentionSuggestion, type index$2_MentionsItemProps as MentionsItemProps, type index$2_MentionsRootProps as MentionsRootProps, Root$2 as Root, index$2_Suggestions as Suggestions, type index$2_SuggestionsProps as SuggestionsProps, Textarea$1 as Textarea };
 }
 
 interface CardRootProps extends React.ComponentPropsWithoutRef<'div'> {
@@ -3202,7 +3201,7 @@ interface HighlightScope {
     /** Which items to fade on hover */
     fade?: 'none' | 'series' | 'global';
 }
-interface ChartRootProps {
+interface ChartRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     /** Data array for the chart */
     data: object[];
     /** Total width of the SVG (omit for responsive) */
@@ -3211,31 +3210,27 @@ interface ChartRootProps {
     height?: number;
     /** Outer margins around the plot area */
     margin?: Partial<ChartMargin>;
-    /** CSS class on the wrapper div */
-    className?: string;
     /** Accessible label for screen readers */
     accessibilityLabel?: string;
     /** Enable colorblind-accessible pattern fills */
     accessibilityMode?: boolean;
     children?: React.ReactNode;
 }
-interface ChartPieRootProps {
+interface ChartPieRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     data: object[];
     width?: number;
     height?: number;
-    className?: string;
     accessibilityLabel?: string;
     children?: React.ReactNode;
 }
-interface ChartRadarRootProps {
+interface ChartRadarRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     data: object[];
     width?: number;
     height?: number;
-    className?: string;
     accessibilityLabel?: string;
     children?: React.ReactNode;
 }
-interface ChartXAxisProps {
+interface ChartXAxisProps extends React.ComponentPropsWithoutRef<'g'> {
     /** Key in data objects for x values */
     dataKey?: string;
     /** Axis label */
@@ -3250,10 +3245,8 @@ interface ChartXAxisProps {
     hideTicks?: boolean;
     /** Scale type */
     scale?: AxisScale;
-    /** CSS class */
-    className?: string;
 }
-interface ChartYAxisProps {
+interface ChartYAxisProps extends React.ComponentPropsWithoutRef<'g'> {
     /** Axis label */
     label?: string;
     /** Tick count hint */
@@ -3266,19 +3259,16 @@ interface ChartYAxisProps {
     hideLine?: boolean;
     /** Hide ticks */
     hideTicks?: boolean;
-    /** CSS class */
-    className?: string;
 }
-interface ChartGridProps {
+interface ChartGridProps extends React.ComponentPropsWithoutRef<'g'> {
     /** Show horizontal lines */
     horizontal?: boolean;
     /** Show vertical lines */
     vertical?: boolean;
     /** Stroke color/class override */
     strokeDasharray?: string;
-    className?: string;
 }
-interface ChartBarProps {
+interface ChartBarProps extends Omit<React.ComponentPropsWithoutRef<'g'>, 'onClick'> {
     /** Key in data for bar values */
     dataKey: string;
     /** Bar fill color (falls back to palette) */
@@ -3301,10 +3291,9 @@ interface ChartBarProps {
     highlightScope?: HighlightScope;
     /** Click handler per bar rect */
     onClick?: (entry: Record<string, unknown>, index: number) => void;
-    className?: string;
 }
 type MarkShape = 'circle' | 'square' | 'diamond' | 'cross' | 'star' | 'triangle';
-interface ChartLineProps {
+interface ChartLineProps extends Omit<React.ComponentPropsWithoutRef<'g'>, 'onClick'> {
     dataKey: string;
     color?: string;
     name?: string;
@@ -3326,7 +3315,7 @@ interface ChartLineProps {
     onClick?: (entry: Record<string, unknown>, index: number) => void;
     className?: string;
 }
-interface ChartAreaProps {
+interface ChartAreaProps extends React.ComponentPropsWithoutRef<'g'> {
     dataKey: string;
     color?: string;
     name?: string;
@@ -3354,7 +3343,7 @@ interface ChartAreaProps {
     className?: string;
 }
 type ScatterMarkerShape = 'circle' | 'square' | 'diamond' | 'cross' | 'triangle';
-interface ChartScatterProps {
+interface ChartScatterProps extends Omit<React.ComponentPropsWithoutRef<'g'>, 'onClick'> {
     xKey: string;
     yKey: string;
     name?: string;
@@ -3376,7 +3365,7 @@ interface ChartBubbleProps extends ChartScatterProps {
     /** Max rendered bubble radius */
     maxRadius?: number;
 }
-interface ChartPieProps {
+interface ChartPieProps extends Omit<React.ComponentPropsWithoutRef<'g'>, 'onClick'> {
     dataKey: string;
     nameKey?: string;
     /** Inner radius for donut (0 = pie) */
@@ -3418,7 +3407,7 @@ interface ChartPieProps {
     onClick?: (entry: Record<string, unknown>, index: number) => void;
     className?: string;
 }
-interface ChartPolarGridProps {
+interface ChartPolarGridProps extends React.ComponentPropsWithoutRef<'g'> {
     /** Number of rings */
     rings?: number;
     /**
@@ -3429,11 +3418,10 @@ interface ChartPolarGridProps {
     shape?: 'circular' | 'sharp';
     className?: string;
 }
-interface ChartPolarAngleAxisProps {
+interface ChartPolarAngleAxisProps extends React.ComponentPropsWithoutRef<'g'> {
     dataKey: string;
-    className?: string;
 }
-interface ChartRadarProps {
+interface ChartRadarProps extends React.ComponentPropsWithoutRef<'g'> {
     dataKey: string;
     color?: string;
     name?: string;
@@ -3446,7 +3434,7 @@ interface ChartRadarProps {
     dot?: boolean;
     className?: string;
 }
-interface ChartHeatmapProps {
+interface ChartHeatmapProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     data: object[];
     xKey: string;
     yKey: string;
@@ -3467,7 +3455,7 @@ interface TreemapNode {
     children?: TreemapNode[];
     color?: string;
 }
-interface ChartTreemapProps {
+interface ChartTreemapProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     data: TreemapNode[];
     width?: number;
     height?: number;
@@ -3483,7 +3471,7 @@ interface FunnelEntry {
     value: number;
     color?: string;
 }
-interface ChartFunnelProps {
+interface ChartFunnelProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     data: FunnelEntry[];
     width?: number;
     height?: number;
@@ -3509,7 +3497,7 @@ interface ChartFunnelProps {
     accessibilityLabel?: string;
     onSegmentClick?: (entry: FunnelEntry, index: number) => void;
 }
-interface ChartGaugeProps {
+interface ChartGaugeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     value: number;
     min?: number;
     max?: number;
@@ -3549,7 +3537,7 @@ interface GaugeContextValue {
  * Root wrapper for gauge composition.
  * Provides a shared GaugeContext consumed by GaugeValueArc and GaugeReferenceArc.
  */
-interface ChartGaugeContainerProps {
+interface ChartGaugeContainerProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     value: number;
     min?: number;
     max?: number;
@@ -3568,18 +3556,16 @@ interface ChartGaugeContainerProps {
     children?: React.ReactNode;
 }
 /** The colored value arc inside a GaugeContainer */
-interface ChartGaugeValueArcProps {
+interface ChartGaugeValueArcProps extends React.ComponentPropsWithoutRef<'path'> {
     /** Fill color — defaults to chart-1 CSS variable */
     color?: string;
     /** Color stops: [[percentage, color], ...] */
     colorStops?: [number, string][];
-    className?: string;
 }
 /** The gray background track arc inside a GaugeContainer */
-interface ChartGaugeReferenceArcProps {
+interface ChartGaugeReferenceArcProps extends React.ComponentPropsWithoutRef<'path'> {
     /** Fill color for the background track */
     color?: string;
-    className?: string;
 }
 interface OhlcEntry {
     date: string | number;
@@ -3589,7 +3575,7 @@ interface OhlcEntry {
     close: number;
     volume?: number;
 }
-interface ChartCandlestickProps {
+interface ChartCandlestickProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     data: OhlcEntry[];
     width?: number;
     height?: number;
@@ -3601,11 +3587,9 @@ interface ChartCandlestickProps {
     className?: string;
     accessibilityLabel?: string;
 }
-interface ChartTooltipProps {
+interface ChartTooltipProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content'> {
     /** Fully replace the tooltip — receives the current tooltip state */
     content?: (state: TooltipState) => React.ReactNode;
-    /** Extra class on the tooltip wrapper */
-    className?: string;
     /** Override background color */
     background?: string;
     /** Override border color */
@@ -3622,7 +3606,7 @@ interface ChartLegendEntry {
     color: string;
     dataKey: string;
 }
-interface ChartLegendProps {
+interface ChartLegendProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'content'> {
     /** Where to position the legend relative to the chart */
     position?: LegendPosition;
     /** Fully replace legend rendering */
@@ -3633,8 +3617,6 @@ interface ChartLegendProps {
     iconType?: 'square' | 'circle' | 'line';
     /** Icon size in px, default 12 */
     iconSize?: number;
-    /** Extra class on the legend wrapper */
-    className?: string;
 }
 interface CartesianContextValue {
     data: Record<string, unknown>[];
@@ -3671,7 +3653,7 @@ interface RadarContextValue {
     angleKeys: string[];
     palette: string[];
 }
-interface ChartSparkLineProps {
+interface ChartSparkLineProps extends Omit<React.ComponentPropsWithoutRef<'svg'>, 'width' | 'height'> {
     /** Array of numeric values */
     data: number[];
     /** 'line' or 'bar' sparkline */
@@ -3697,7 +3679,7 @@ interface ChartSparkLineProps {
     /** CSS class on the SVG element */
     className?: string;
 }
-interface ChartRangeBarProps {
+interface ChartRangeBarProps extends React.ComponentPropsWithoutRef<'g'> {
     /** Data key for the low value */
     lowKey: string;
     /** Data key for the high value */
@@ -3708,9 +3690,8 @@ interface ChartRangeBarProps {
     name?: string;
     /** Corner radius */
     radius?: number;
-    className?: string;
 }
-interface ChartReferenceLineProps {
+interface ChartReferenceLineProps extends Omit<React.ComponentPropsWithoutRef<'g'>, 'x' | 'y'> {
     /** Horizontal reference value (y) */
     y?: number;
     /** Vertical reference value (x) */
@@ -3721,9 +3702,8 @@ interface ChartReferenceLineProps {
     stroke?: string;
     /** Dash pattern */
     strokeDasharray?: string;
-    className?: string;
 }
-interface ChartReferenceAreaProps {
+interface ChartReferenceAreaProps extends Omit<React.ComponentPropsWithoutRef<'g'>, 'x1' | 'x2' | 'y1' | 'y2'> {
     /** Low y bound */
     y1?: number;
     /** High y bound */
@@ -3736,19 +3716,17 @@ interface ChartReferenceAreaProps {
     fill?: string;
     /** Fill opacity */
     fillOpacity?: number;
-    className?: string;
 }
-interface ChartRadialBarRootProps {
+interface ChartRadialBarRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     data: object[];
     width?: number;
     height?: number;
     /** Gap between bars in px */
     gap?: number;
-    className?: string;
     accessibilityLabel?: string;
     children?: React.ReactNode;
 }
-interface ChartRadialBarProps {
+interface ChartRadialBarProps extends React.ComponentPropsWithoutRef<'g'> {
     /** Data key for arc length values */
     dataKey: string;
     /** Key for slice labels */
@@ -3771,12 +3749,11 @@ interface WaterfallEntry {
     value: number;
     color?: string;
 }
-interface ChartWaterfallProps {
+interface ChartWaterfallProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     data: WaterfallEntry[];
     width?: number;
     height?: number;
     margin?: Partial<ChartMargin>;
-    className?: string;
     accessibilityLabel?: string;
 }
 interface SankeyNode {
@@ -3788,7 +3765,7 @@ interface SankeyLink {
     target: string;
     value: number;
 }
-interface ChartSankeyProps {
+interface ChartSankeyProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     nodes: SankeyNode[];
     links: SankeyLink[];
     width?: number;
@@ -3802,7 +3779,7 @@ interface ChartSankeyProps {
     className?: string;
     accessibilityLabel?: string;
 }
-interface ChartPyramidProps {
+interface ChartPyramidProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     data: Array<{
         name: string;
         value: number;
@@ -3811,7 +3788,6 @@ interface ChartPyramidProps {
     width?: number;
     height?: number;
     labelPosition?: LabelPosition;
-    className?: string;
     accessibilityLabel?: string;
     onSegmentClick?: (entry: {
         name: string;
@@ -3827,23 +3803,21 @@ interface GanttTask {
     color?: string;
     group?: string;
 }
-interface ChartGanttProps {
+interface ChartGanttProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     tasks: GanttTask[];
     width?: number;
     height?: number;
     margin?: Partial<ChartMargin>;
-    className?: string;
     accessibilityLabel?: string;
 }
-interface ChartRadialLineRootProps {
+interface ChartRadialLineRootProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     data: object[];
     width?: number;
     height?: number;
-    className?: string;
     accessibilityLabel?: string;
     children?: React.ReactNode;
 }
-interface ChartRadialLineProps {
+interface ChartRadialLineProps extends React.ComponentPropsWithoutRef<'g'> {
     dataKey: string;
     nameKey?: string;
     color?: string;
@@ -3856,7 +3830,7 @@ interface ChartRadialLineProps {
     strokeWidth?: number;
     className?: string;
 }
-interface ChartHistogramProps {
+interface ChartHistogramProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     data: number[];
     bins?: number;
     color?: string;
@@ -3864,7 +3838,6 @@ interface ChartHistogramProps {
     height?: number;
     margin?: Partial<ChartMargin>;
     showGrid?: boolean;
-    className?: string;
     accessibilityLabel?: string;
 }
 interface BoxplotEntry {
@@ -3877,13 +3850,12 @@ interface BoxplotEntry {
     color?: string;
     outliers?: number[];
 }
-interface ChartBoxplotProps {
+interface ChartBoxplotProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     data: BoxplotEntry[];
     width?: number;
     height?: number;
     margin?: Partial<ChartMargin>;
     orientation?: 'vertical' | 'horizontal';
-    className?: string;
     accessibilityLabel?: string;
 }
 interface SunburstNode {
@@ -3892,35 +3864,32 @@ interface SunburstNode {
     children?: SunburstNode[];
     color?: string;
 }
-interface ChartSunburstProps {
+interface ChartSunburstProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     data: SunburstNode;
     width?: number;
     height?: number;
     innerRadius?: number;
-    className?: string;
     accessibilityLabel?: string;
     onNodeClick?: (node: SunburstNode) => void;
 }
-interface ChartChordProps {
+interface ChartChordProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     data: number[][];
     labels: string[];
     colors?: string[];
     width?: number;
     height?: number;
     padAngle?: number;
-    className?: string;
     accessibilityLabel?: string;
 }
-interface ChartRangeAreaProps {
+interface ChartRangeAreaProps extends React.ComponentPropsWithoutRef<'g'> {
     lowKey: string;
     highKey: string;
     color?: string;
     name?: string;
     fillOpacity?: number;
     curve?: CurveType;
-    className?: string;
 }
-interface ChartLinearGaugeProps {
+interface ChartLinearGaugeProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'width' | 'height'> {
     value: number;
     min?: number;
     max?: number;
@@ -3931,18 +3900,15 @@ interface ChartLinearGaugeProps {
     showLabel?: boolean;
     label?: string | ((v: number, min: number, max: number) => string);
     cornerRadius?: number;
-    className?: string;
     accessibilityLabel?: string;
 }
-interface ChartPieCenterLabelProps {
+interface ChartPieCenterLabelProps extends React.ComponentPropsWithoutRef<'g'> {
     children: React.ReactNode;
-    className?: string;
 }
-interface ChartGaugePointerProps {
+interface ChartGaugePointerProps extends Omit<React.ComponentPropsWithoutRef<'g'>, 'width'> {
     color?: string;
     length?: number;
     width?: number;
-    className?: string;
 }
 
 /**