@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/components/category-card/category-card.js

@@ -0,0 +1,111 @@
+"use client";
+import { cn } from "../../utils/cn.js";
+import { resolveVariantStyles } from "../../utils/variant.js";
+import { useStyleAxes } from "../../utils/style-axes.js";
+import { TruncatedLineWithTooltip } from "../truncated-line-with-tooltip/truncated-line-with-tooltip.js";
+import { Badge } from "../../core/badge.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/category-card/category-card.tsx
+var ROOT = cn("group/category-card @container relative isolate flex h-full w-full cursor-pointer overflow-hidden text-left", "rounded-[var(--espd-own-radius,var(--espd-radius-surface,var(--radius-2xl)))] border border-border bg-card text-card-foreground", "ring-offset-background transition-[translate,box-shadow,border-color] duration-200", "hover:-translate-y-0.5 hover:border-primary hover:shadow-lg", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "motion-reduce:transition-none motion-reduce:hover:translate-y-0");
+var SELECTED = "border-primary ring-1 ring-primary";
+var DEFAULT_MAX_TAGS = 3;
+/** The tags row: badges, the rest as "+N". Dropped when the card is narrow (below 12rem). */
+function Tags({ tags, max }) {
+	const shown = tags.slice(0, max);
+	const rest = tags.length - shown.length;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "category-card-tags",
+		className: "mt-auto hidden flex-wrap gap-1.5 @[12rem]:flex",
+		children: [shown.map((tag) => /* @__PURE__ */ jsx(Badge, {
+			variant: "soft",
+			color: "gray",
+			radius: "full",
+			className: "font-normal",
+			children: tag
+		}, tag)), rest > 0 && /* @__PURE__ */ jsxs(Badge, {
+			variant: "soft",
+			color: "gray",
+			radius: "full",
+			className: "font-normal",
+			title: tags.slice(max).join(", "),
+			children: ["+", rest]
+		})]
+	});
+}
+/**
+* One category of a collection, as a card that opens or filters it: its icon
+* on a coloured tile (which tilts under the pointer), how many there are, its
+* name, a line on what it is, and a few examples. The whole card is one
+* button, or one link with `href`. Narrow, it tightens and drops the examples.
+*
+* Give it an `aria-label` when the visible text alone is not the name you
+* want read ("Show only Drivers, 65 blocks").
+*/
+var CategoryCard = React$1.forwardRef(({ icon, title, description, value, tags, maxTags = DEFAULT_MAX_TAGS, color = "primary", iconClassName, selected, href, truncateTitle = true, truncateDescription = true, radius, className, style, ...rest }, ref) => {
+	const { partStyle } = useStyleAxes({ radius }, ["radius"]);
+	const tile = iconClassName ? null : resolveVariantStyles("soft", color);
+	const body = /* @__PURE__ */ jsxs("span", {
+		className: "flex w-full min-w-0 flex-col gap-3 p-4 @[12rem]:gap-4 @[12rem]:p-5",
+		children: [
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex items-start justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-slot": "category-card-icon",
+					"aria-hidden": true,
+					className: cn("flex size-10 shrink-0 items-center justify-center rounded-xl @[12rem]:size-12", "[&_svg]:size-5 @[12rem]:[&_svg]:size-6", "transition-transform duration-300 group-hover/category-card:scale-105 group-hover/category-card:-rotate-3 motion-reduce:transform-none", tile ? [tile.container, tile.foreground] : iconClassName),
+					style: tile?.containerStyle,
+					children: icon
+				}), value !== void 0 && /* @__PURE__ */ jsx("span", {
+					"data-slot": "category-card-value",
+					className: "font-mono text-xl font-bold leading-none tabular-nums text-foreground @[12rem]:text-2xl",
+					children: value
+				})]
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-semibold text-foreground @[12rem]:text-base",
+					children: truncateTitle ? /* @__PURE__ */ jsx(TruncatedLineWithTooltip, {
+						tooltipContent: title,
+						children: title
+					}) : title
+				}), description != null && /* @__PURE__ */ jsx("span", {
+					className: cn("text-xs text-muted-foreground @[12rem]:text-sm", truncateDescription && "line-clamp-2"),
+					children: description
+				})]
+			}),
+			!!tags?.length && /* @__PURE__ */ jsx(Tags, {
+				tags,
+				max: maxTags
+			})
+		]
+	});
+	const shared = {
+		"data-slot": "category-card",
+		"data-selected": selected ? "" : void 0,
+		className: cn(ROOT, selected && SELECTED, className),
+		style: {
+			...partStyle,
+			...style
+		},
+		...rest
+	};
+	if (href !== void 0) return /* @__PURE__ */ jsx("a", {
+		ref,
+		href,
+		"aria-current": selected ? "true" : void 0,
+		...shared,
+		children: body
+	});
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		"aria-pressed": selected,
+		...shared,
+		children: body
+	});
+});
+CategoryCard.displayName = "CategoryCard";
+//#endregion
+export { CategoryCard };

package/dist/components/category-card/index.d.ts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { C as Color } from '../../index-BQANnKs9.js';
+import { k as StyleAxisProps } from '../../style-axes-DSQ2DGc5.js';
+
+interface CategoryCardProps extends Omit<HTMLAttributes<HTMLElement>, "title" | "color">, Pick<StyleAxisProps, "radius"> {
+    /** The category's icon, drawn on a tile in `color`. Size it with nothing: the tile sizes an svg to fit. */
+    icon: ReactNode;
+    /** The category's name. */
+    title: string;
+    /** One line on what the category is. */
+    description?: ReactNode;
+    /** In the top-right corner: how many there are. Format it (and pluralise any unit) yourself. */
+    value?: ReactNode;
+    /** A few recognisable examples, as small badges. Those past `maxTags` fold into "+N". */
+    tags?: string[];
+    /** Tags shown before the rest fold into "+N". Default `3`. */
+    maxTags?: number;
+    /**
+     * The icon tile's colour, through the same `soft` resolution as `Badge`: a
+     * preset (`primary`, `success`…) or any CSS colour. Default `primary`.
+     */
+    color?: Color;
+    /**
+     * A token tint for the icon tile the colour presets do not cover
+     * (`bg-swatch-2-light text-swatch-2`), INSTEAD of `color`: when set, `color`
+     * is ignored and the icon takes the tint's text colour.
+     */
+    iconClassName?: string;
+    /**
+     * The card is the chosen one, when the cards act as a filter: an accent
+     * border, and `aria-pressed` (a button) or `aria-current` (a link).
+     * Leave it unset for cards that only navigate.
+     */
+    selected?: boolean;
+    /** Render a link to `href` instead of a button. */
+    href?: string;
+    /** Keep the title on one line, with a tooltip when it is cut. Default `true`. */
+    truncateTitle?: boolean;
+    /** Clamp the description to two lines. Default `true`. */
+    truncateDescription?: boolean;
+}
+
+/**
+ * One category of a collection, as a card that opens or filters it: its icon
+ * on a coloured tile (which tilts under the pointer), how many there are, its
+ * name, a line on what it is, and a few examples. The whole card is one
+ * button, or one link with `href`. Narrow, it tightens and drops the examples.
+ *
+ * Give it an `aria-label` when the visible text alone is not the name you
+ * want read ("Show only Drivers, 65 blocks").
+ */
+declare const CategoryCard: React.ForwardRefExoticComponent<CategoryCardProps & React.RefAttributes<HTMLElement>>;
+
+export { CategoryCard, type CategoryCardProps };

package/dist/components/category-card/index.js

@@ -0,0 +1,2 @@
+import { CategoryCard } from "./category-card.js";
+export { CategoryCard };

package/dist/components/chart/area-chart.js

@@ -1,5 +1,5 @@
 import { cn } from "../../utils/cn.js";
-import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartLegendFrame, ChartTooltip, ChartTooltipContent, buildSeriesLegendItems, renderChartLegendList, useChartScope } from "./chart.js";
 import { buildAutoSeriesConfig, coerceSeriesValuesToNumbers, inferCategoryKey } from "./chart-series-data.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -15,7 +15,8 @@ var DEFAULT_X_AXIS_PADDING = {
 	left: 0,
 	right: 0
 };
-var AreaChart$1 = React$1.forwardRef(function AreaChart$2({ data, config: explicitConfig, categoryKey, stacked = false, curveType = "monotone", showTooltip = true, showLegend = false, showGrid = false, hideXAxis = false, hideYAxis = false, xAxisTickFormatter, yAxisTickFormatter, className, margin, xAxisPadding }, ref) {
+var AreaChart$1 = React$1.forwardRef(function AreaChart$2({ data, config: explicitConfig, tooltipRadius, tooltipElevation, categoryKey, stacked = false, curveType = "monotone", showTooltip = true, showLegend = false, showGrid = false, hideXAxis = false, hideYAxis = false, xAxisTickFormatter, yAxisTickFormatter, className, margin, xAxisPadding, ...legendOptions }, ref) {
+	const scope = useChartScope();
 	const resolvedMargin = {
 		...DEFAULT_MARGIN,
 		...margin
@@ -44,90 +45,99 @@ var AreaChart$1 = React$1.forwardRef(function AreaChart$2({ data, config: explic
 		mid: .1,
 		soft: .03
 	};
-	return /* @__PURE__ */ jsx(ChartContainer, {
-		ref,
-		config,
-		className: cn("w-full", className),
-		children: /* @__PURE__ */ jsxs(AreaChart, {
-			accessibilityLayer: true,
-			data: chartData,
-			margin: resolvedMargin,
-			children: [
-				/* @__PURE__ */ jsx("defs", { children: seriesKeys.map((key) => /* @__PURE__ */ jsxs("linearGradient", {
-					id: `${gradientPrefix}-${key}`,
-					x1: "0",
-					y1: "0",
-					x2: "0",
-					y2: "1",
-					children: [
-						/* @__PURE__ */ jsx("stop", {
-							offset: "0%",
-							stopColor: `var(--color-${key})`,
-							stopOpacity: gradientStops.peak
-						}),
-						/* @__PURE__ */ jsx("stop", {
-							offset: "14%",
-							stopColor: `var(--color-${key})`,
-							stopOpacity: gradientStops.highlight
-						}),
-						/* @__PURE__ */ jsx("stop", {
-							offset: "38%",
-							stopColor: `var(--color-${key})`,
-							stopOpacity: gradientStops.mid
-						}),
-						/* @__PURE__ */ jsx("stop", {
-							offset: "70%",
-							stopColor: `var(--color-${key})`,
-							stopOpacity: gradientStops.soft
-						}),
-						/* @__PURE__ */ jsx("stop", {
-							offset: "100%",
-							stopColor: `var(--color-${key})`,
-							stopOpacity: 0
+	const listLegend = renderChartLegendList(showLegend, legendOptions, buildSeriesLegendItems(seriesKeys, config, chartData));
+	return /* @__PURE__ */ jsx(ChartLegendFrame, {
+		chartId: scope.chartId,
+		legend: listLegend,
+		children: /* @__PURE__ */ jsx(ChartContainer, {
+			ref,
+			id: scope.id,
+			config,
+			className: cn("w-full", className),
+			children: /* @__PURE__ */ jsxs(AreaChart, {
+				accessibilityLayer: true,
+				data: chartData,
+				margin: resolvedMargin,
+				children: [
+					/* @__PURE__ */ jsx("defs", { children: seriesKeys.map((key) => /* @__PURE__ */ jsxs("linearGradient", {
+						id: `${gradientPrefix}-${key}`,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [
+							/* @__PURE__ */ jsx("stop", {
+								offset: "0%",
+								stopColor: `var(--color-${key})`,
+								stopOpacity: gradientStops.peak
+							}),
+							/* @__PURE__ */ jsx("stop", {
+								offset: "14%",
+								stopColor: `var(--color-${key})`,
+								stopOpacity: gradientStops.highlight
+							}),
+							/* @__PURE__ */ jsx("stop", {
+								offset: "38%",
+								stopColor: `var(--color-${key})`,
+								stopOpacity: gradientStops.mid
+							}),
+							/* @__PURE__ */ jsx("stop", {
+								offset: "70%",
+								stopColor: `var(--color-${key})`,
+								stopOpacity: gradientStops.soft
+							}),
+							/* @__PURE__ */ jsx("stop", {
+								offset: "100%",
+								stopColor: `var(--color-${key})`,
+								stopOpacity: 0
+							})
+						]
+					}, key)) }),
+					showGrid && /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
+					/* @__PURE__ */ jsx(XAxis, {
+						type: "category",
+						dataKey: resolvedCategoryKey,
+						hide: hideXAxis,
+						tickLine: false,
+						axisLine: false,
+						tickMargin: 8,
+						tickFormatter: xAxisTickFormatter,
+						padding: resolvedXAxisPadding,
+						interval: "preserveStartEnd"
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						type: "number",
+						hide: hideYAxis,
+						tickLine: false,
+						axisLine: false,
+						tickMargin: 8,
+						tickFormatter: yAxisTickFormatter
+					}),
+					showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
+						cursor: {
+							fill: "var(--color-muted)",
+							fillOpacity: .12
+						},
+						content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+							radius: tooltipRadius,
+							elevation: tooltipElevation
 						})
-					]
-				}, key)) }),
-				showGrid && /* @__PURE__ */ jsx(CartesianGrid, { vertical: false }),
-				/* @__PURE__ */ jsx(XAxis, {
-					type: "category",
-					dataKey: resolvedCategoryKey,
-					hide: hideXAxis,
-					tickLine: false,
-					axisLine: false,
-					tickMargin: 8,
-					tickFormatter: xAxisTickFormatter,
-					padding: resolvedXAxisPadding,
-					interval: "preserveStartEnd"
-				}),
-				/* @__PURE__ */ jsx(YAxis, {
-					type: "number",
-					hide: hideYAxis,
-					tickLine: false,
-					axisLine: false,
-					tickMargin: 8,
-					tickFormatter: yAxisTickFormatter
-				}),
-				showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
-					cursor: {
-						fill: "var(--color-muted)",
-						fillOpacity: .12
-					},
-					content: /* @__PURE__ */ jsx(ChartTooltipContent, {})
-				}),
-				showLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
-				seriesKeys.map((key) => /* @__PURE__ */ jsx(Area, {
-					type: curveType,
-					dataKey: key,
-					stackId: stacked ? "stack" : void 0,
-					fill: `url(#${gradientPrefix}-${key})`,
-					stroke: `var(--color-${key})`,
-					strokeWidth: 1,
-					strokeOpacity: .75,
-					strokeLinecap: "round",
-					strokeLinejoin: "round",
-					isAnimationActive: true
-				}, key))
-			]
+					}),
+					showLegend && !listLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
+					seriesKeys.map((key) => /* @__PURE__ */ jsx(Area, {
+						type: curveType,
+						dataKey: key,
+						stackId: stacked ? "stack" : void 0,
+						fill: `url(#${gradientPrefix}-${key})`,
+						stroke: `var(--color-${key})`,
+						strokeWidth: 1,
+						strokeOpacity: .75,
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						isAnimationActive: true
+					}, key))
+				]
+			})
 		})
 	});
 });

package/dist/components/chart/bar-chart.js

@@ -1,9 +1,9 @@
 import { cn } from "../../utils/cn.js";
-import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartLegendFrame, ChartTooltip, ChartTooltipContent, buildSeriesLegendItems, renderChartLegendList, useChartScope } from "./chart.js";
 import { buildAutoSeriesConfig, coerceSeriesValuesToNumbers, inferCategoryKey } from "./chart-series-data.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { Bar, BarChart, CartesianGrid, Rectangle, XAxis, YAxis } from "recharts";
 //#region src/components/chart/bar-chart.tsx
 var BAR_SIZE_MAP = {
 	sm: 14,
@@ -76,7 +76,58 @@ function getBarRadius(index, total, stacked, rounded, layout) {
 		0
 	];
 }
-var BarChart$1 = React$1.forwardRef(function BarChart$2({ data, config: explicitConfig, categoryKey, layout = "horizontal", stacked = false, barSize, rounded = true, showTooltip = true, showLegend = false, showGrid = false, hideXAxis = false, hideYAxis = false, xAxisTickFormatter, yAxisTickFormatter, labelFormatter, tooltipFormatter, tooltipContent, barGap, categoryGap, className, margin }, ref) {
+function hasValue(row, key) {
+	const v = Number(row?.[key]);
+	return Number.isFinite(v) && v !== 0;
+}
+/**
+* Shape for one segment of a segmented stack: a fully rounded rect, inset by
+* half the gap on each side that touches another non-empty segment, so the
+* stack's outer ends stay flush with the plot.
+*/
+function renderSegment(props, key, keys, gap, vertical, rounded) {
+	const { fill, payload } = props;
+	let x = props.x ?? 0;
+	let y = props.y ?? 0;
+	let width = props.width ?? 0;
+	let height = props.height ?? 0;
+	if (width < 0) {
+		x += width;
+		width = -width;
+	}
+	if (height < 0) {
+		y += height;
+		height = -height;
+	}
+	if (width === 0 || height === 0) return /* @__PURE__ */ jsx("g", {});
+	const index = keys.indexOf(key);
+	const before = keys.slice(0, index).some((k) => hasValue(payload, k));
+	const after = keys.slice(index + 1).some((k) => hasValue(payload, k));
+	const half = gap / 2;
+	const minExtent = 2;
+	if (vertical) {
+		const start = before ? half : 0;
+		const end = after ? half : 0;
+		x += start;
+		width = Math.max(Math.min(width, minExtent), width - start - end);
+	} else {
+		const bottom = before ? half : 0;
+		const top = after ? half : 0;
+		y += top;
+		height = Math.max(Math.min(height, minExtent), height - top - bottom);
+	}
+	const radius = rounded ? Math.min(width, height) / 2 : 0;
+	return /* @__PURE__ */ jsx(Rectangle, {
+		x,
+		y,
+		width,
+		height,
+		fill,
+		radius
+	});
+}
+var BarChart$1 = React$1.forwardRef(function BarChart$2({ data, config: explicitConfig, tooltipRadius, tooltipElevation, categoryKey, layout = "horizontal", stacked = false, barSize, rounded = true, segmented = false, segmentGap = 4, showTooltip = true, showLegend = false, showGrid = false, hideXAxis = false, hideYAxis = false, xAxisTickFormatter, yAxisTickFormatter, labelFormatter, tooltipFormatter, tooltipContent, barGap, categoryGap, className, margin, ...legendOptions }, ref) {
+	const scope = useChartScope();
 	const resolvedCategoryKey = React$1.useMemo(() => categoryKey ?? inferCategoryKey(data[0]), [categoryKey, data]);
 	const config = React$1.useMemo(() => buildAutoSeriesConfig(data, resolvedCategoryKey, explicitConfig), [
 		data,
@@ -87,63 +138,75 @@ var BarChart$1 = React$1.forwardRef(function BarChart$2({ data, config: explicit
 	const chartData = React$1.useMemo(() => coerceSeriesValuesToNumbers(data, barKeys), [data, barKeys]);
 	const maxBarSize = resolveBarSize(barSize);
 	const isVertical = layout === "vertical";
-	return /* @__PURE__ */ jsx(ChartContainer, {
-		ref,
-		config,
-		className: cn("w-full", className),
-		children: /* @__PURE__ */ jsxs(BarChart, {
-			accessibilityLayer: true,
-			layout,
-			data: chartData,
-			margin,
-			barGap,
-			barCategoryGap: categoryGap,
-			children: [
-				showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
-					vertical: !isVertical,
-					horizontal: isVertical
-				}),
-				/* @__PURE__ */ jsx(XAxis, {
-					type: isVertical ? "number" : "category",
-					dataKey: isVertical ? void 0 : resolvedCategoryKey,
-					hide: hideXAxis,
-					tickLine: false,
-					axisLine: false,
-					tickMargin: 8,
-					tickFormatter: xAxisTickFormatter,
-					...isVertical ? {
-						domain: [0, "dataMax"],
-						padding: {
-							left: 0,
-							right: 0
-						}
-					} : {}
-				}),
-				/* @__PURE__ */ jsx(YAxis, {
-					type: isVertical ? "category" : "number",
-					dataKey: isVertical ? resolvedCategoryKey : void 0,
-					hide: hideYAxis,
-					tickLine: false,
-					axisLine: false,
-					tickFormatter: yAxisTickFormatter
-				}),
-				showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
-					cursor: {
-						fill: "var(--color-muted)",
-						fillOpacity: .12
-					},
-					labelFormatter,
-					content: tooltipContent ?? /* @__PURE__ */ jsx(ChartTooltipContent, { formatter: tooltipFormatter })
-				}),
-				showLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
-				barKeys.map((key, i) => /* @__PURE__ */ jsx(Bar, {
-					dataKey: key,
-					stackId: stacked ? "stack" : void 0,
-					fill: `var(--color-${key})`,
-					maxBarSize,
-					radius: getBarRadius(i, barKeys.length, stacked, rounded, layout)
-				}, key))
-			]
+	const isSegmented = stacked && segmented;
+	const legendLayout = legendOptions.legendLayout ?? "inline";
+	const listLegend = renderChartLegendList(showLegend, legendOptions, buildSeriesLegendItems(barKeys, config, chartData));
+	return /* @__PURE__ */ jsx(ChartLegendFrame, {
+		chartId: scope.chartId,
+		legend: listLegend,
+		children: /* @__PURE__ */ jsx(ChartContainer, {
+			ref,
+			id: scope.id,
+			config,
+			className: cn("w-full", className),
+			children: /* @__PURE__ */ jsxs(BarChart, {
+				accessibilityLayer: true,
+				layout,
+				data: chartData,
+				margin,
+				barGap,
+				barCategoryGap: categoryGap,
+				children: [
+					showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+						vertical: !isVertical,
+						horizontal: isVertical
+					}),
+					/* @__PURE__ */ jsx(XAxis, {
+						type: isVertical ? "number" : "category",
+						dataKey: isVertical ? void 0 : resolvedCategoryKey,
+						hide: hideXAxis,
+						tickLine: false,
+						axisLine: false,
+						tickMargin: 8,
+						tickFormatter: xAxisTickFormatter,
+						...isVertical ? {
+							domain: [0, "dataMax"],
+							padding: {
+								left: 0,
+								right: 0
+							}
+						} : {}
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						type: isVertical ? "category" : "number",
+						dataKey: isVertical ? resolvedCategoryKey : void 0,
+						hide: hideYAxis,
+						tickLine: false,
+						axisLine: false,
+						tickFormatter: yAxisTickFormatter
+					}),
+					showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
+						cursor: {
+							fill: "var(--color-muted)",
+							fillOpacity: .12
+						},
+						labelFormatter,
+						content: tooltipContent ?? /* @__PURE__ */ jsx(ChartTooltipContent, {
+							radius: tooltipRadius,
+							elevation: tooltipElevation,
+							formatter: tooltipFormatter
+						})
+					}),
+					showLegend && legendLayout === "inline" && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
+					barKeys.map((key, i) => /* @__PURE__ */ jsx(Bar, {
+						dataKey: key,
+						stackId: stacked ? "stack" : void 0,
+						fill: `var(--color-${key})`,
+						maxBarSize,
+						...isSegmented ? { shape: (props) => renderSegment(props, key, barKeys, segmentGap, isVertical, rounded) } : { radius: getBarRadius(i, barKeys.length, stacked, rounded, layout) }
+					}, key))
+				]
+			})
 		})
 	});
 });