@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/components/chart/index.js

@@ -0,0 +1,9 @@
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartLegendList, ChartStyle, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, DEFAULT_CHART_SERIES_COLORS, buildSeriesChartConfig, getChartSeriesColor } from "./chart-colors.js";
+import { BarChart } from "./bar-chart.js";
+import { AreaChart } from "./area-chart.js";
+import { LineChart } from "./line-chart.js";
+import { ComposedChart } from "./composed-chart.js";
+import { DonutChart } from "./donut-chart.js";
+import { TreemapChart } from "./treemap-chart.js";
+export { AreaChart, BarChart, CHART_CATEGORY_COLORS, CHART_SERIES_COLORS, ChartContainer, ChartLegend, ChartLegendContent, ChartLegendList, ChartStyle, ChartTooltip, ChartTooltipContent, ComposedChart, DEFAULT_CHART_SERIES_COLORS, DonutChart, LineChart, TreemapChart, buildSeriesChartConfig, getChartSeriesColor };

package/dist/components/chart/line-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 @@ function resolveStrokeWidth(width) {
 	if (typeof width === "number") return width;
 	return STROKE_WIDTH_MAP[width];
 }
-var LineChart$1 = React$1.forwardRef(function LineChart$2({ data, config: explicitConfig, categoryKey, stacked = false, curveType = "monotone", strokeWidth, showDots = false, showActiveDot = true, gradientStroke: _gradientStroke = true, gradientGlow = true, showTooltip = true, showLegend = false, showGrid = false, hideXAxis = false, hideYAxis = false, xAxisTickFormatter, yAxisTickFormatter, labelFormatter, className, margin }, ref) {
+var LineChart$1 = React$1.forwardRef(function LineChart$2({ data, config: explicitConfig, tooltipRadius, tooltipElevation, categoryKey, stacked = false, curveType = "monotone", strokeWidth, showDots = false, showActiveDot = true, gradientStroke: _gradientStroke = true, gradientGlow = true, showTooltip = true, showLegend = false, showGrid = false, hideXAxis = false, hideYAxis = false, xAxisTickFormatter, yAxisTickFormatter, labelFormatter, 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,
@@ -47,88 +48,97 @@ var LineChart$1 = React$1.forwardRef(function LineChart$2({ data, config: explic
 	const glowOrderKeys = React$1.useMemo(() => stacked ? [...seriesKeys].reverse() : seriesKeys, [seriesKeys, stacked]);
 	const idPrefix = `line-${React$1.useId().replace(/:/g, "")}`;
 	const glowGradientId = (key) => `${idPrefix}-glow-${key}`;
-	return /* @__PURE__ */ jsx(ChartContainer, {
-		ref,
-		config,
-		className: cn("w-full", className),
-		children: /* @__PURE__ */ jsxs(LineChart, {
-			accessibilityLayer: true,
-			data: processedData,
-			margin,
-			children: [
-				gradientGlow && /* @__PURE__ */ jsx("defs", { children: seriesKeys.map((key) => /* @__PURE__ */ jsxs("linearGradient", {
-					id: glowGradientId(key),
-					x1: "0",
-					y1: "0",
-					x2: "0",
-					y2: "1",
-					children: [/* @__PURE__ */ jsx("stop", {
-						offset: "0%",
-						stopColor: `var(--color-${key})`,
-						stopOpacity: .18
-					}), /* @__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
-				}),
-				/* @__PURE__ */ jsx(YAxis, {
-					type: "number",
-					hide: hideYAxis,
-					tickLine: false,
-					axisLine: false,
-					tickMargin: 8,
-					tickFormatter: yAxisTickFormatter
-				}),
-				showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
-					cursor: {
-						stroke: "var(--color-border)",
-						strokeWidth: 1
-					},
-					labelFormatter,
-					content: /* @__PURE__ */ jsx(ChartTooltipContent, {})
-				}),
-				showLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
-				gradientGlow && glowOrderKeys.map((key) => /* @__PURE__ */ jsx(Area, {
-					type: curveType,
-					dataKey: key,
-					fill: `url(#${glowGradientId(key)})`,
-					stroke: "transparent",
-					strokeWidth: 0,
-					activeDot: false,
-					isAnimationActive: true,
-					legendType: "none",
-					tooltipType: "none"
-				}, `glow-${key}`)),
-				seriesKeys.map((key) => /* @__PURE__ */ jsx(Line, {
-					type: curveType,
-					dataKey: key,
-					stroke: `var(--color-${key})`,
-					strokeWidth: resolvedStrokeWidth,
-					dot: showDots ? {
-						r: 3,
+	const listLegend = renderChartLegendList(showLegend, legendOptions, buildSeriesLegendItems(seriesKeys, config, data));
+	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(LineChart, {
+				accessibilityLayer: true,
+				data: processedData,
+				margin,
+				children: [
+					gradientGlow && /* @__PURE__ */ jsx("defs", { children: seriesKeys.map((key) => /* @__PURE__ */ jsxs("linearGradient", {
+						id: glowGradientId(key),
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: `var(--color-${key})`,
+							stopOpacity: .18
+						}), /* @__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
+					}),
+					/* @__PURE__ */ jsx(YAxis, {
+						type: "number",
+						hide: hideYAxis,
+						tickLine: false,
+						axisLine: false,
+						tickMargin: 8,
+						tickFormatter: yAxisTickFormatter
+					}),
+					showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
+						cursor: {
+							stroke: "var(--color-border)",
+							strokeWidth: 1
+						},
+						labelFormatter,
+						content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+							radius: tooltipRadius,
+							elevation: tooltipElevation
+						})
+					}),
+					showLegend && !listLegend && /* @__PURE__ */ jsx(ChartLegend, { content: /* @__PURE__ */ jsx(ChartLegendContent, {}) }),
+					gradientGlow && glowOrderKeys.map((key) => /* @__PURE__ */ jsx(Area, {
+						type: curveType,
+						dataKey: key,
+						fill: `url(#${glowGradientId(key)})`,
+						stroke: "transparent",
 						strokeWidth: 0,
-						fill: `var(--color-${key})`
-					} : false,
-					activeDot: showActiveDot ? {
-						r: 4,
-						strokeWidth: 2,
-						stroke: "var(--color-background)",
-						fill: `var(--color-${key})`
-					} : false,
-					isAnimationActive: true
-				}, key))
-			]
+						activeDot: false,
+						isAnimationActive: true,
+						legendType: "none",
+						tooltipType: "none"
+					}, `glow-${key}`)),
+					seriesKeys.map((key) => /* @__PURE__ */ jsx(Line, {
+						type: curveType,
+						dataKey: key,
+						stroke: `var(--color-${key})`,
+						strokeWidth: resolvedStrokeWidth,
+						dot: showDots ? {
+							r: 3,
+							strokeWidth: 0,
+							fill: `var(--color-${key})`
+						} : false,
+						activeDot: showActiveDot ? {
+							r: 4,
+							strokeWidth: 2,
+							stroke: "var(--color-background)",
+							fill: `var(--color-${key})`
+						} : false,
+						isAnimationActive: true
+					}, key))
+				]
+			})
 		})
 	});
 });

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

@@ -1,6 +1,6 @@
 import { cn } from "../../utils/cn.js";
 import { isPresetColor } from "../../utils/color.js";
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from "./chart.js";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, renderChartLegendList } from "./chart.js";
 import { buildSeriesChartConfig } from "./chart-colors.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -185,7 +185,7 @@ function TreemapLegend({ config, order, colorByKey }) {
 		})
 	});
 }
-var TreemapChart = React$1.forwardRef(function TreemapChart({ data, config: explicitConfig, color, maxDataPoints, showTooltip = true, showLegend = false, gradient = true, aspectRatio = 4 / 3, valueFormatter = defaultValueFormatter, labelStyle, className, isAnimationActive = true, animationDuration = DEFAULT_TREEMAP_ANIMATION_DURATION_MS, animationEasing = DEFAULT_TREEMAP_ANIMATION_EASING, animationBegin = 0, isUpdateAnimationActive }, ref) {
+var TreemapChart = React$1.forwardRef(function TreemapChart({ data, config: explicitConfig, tooltipRadius, tooltipElevation, color, maxDataPoints, showTooltip = true, showLegend = false, gradient = true, aspectRatio = 4 / 3, valueFormatter = defaultValueFormatter, labelStyle, className, isAnimationActive = true, animationDuration = DEFAULT_TREEMAP_ANIMATION_DURATION_MS, animationEasing = DEFAULT_TREEMAP_ANIMATION_EASING, animationBegin = 0, isUpdateAnimationActive, ...legendOptions }, ref) {
 	const resolvedUpdateAnimationActive = isUpdateAnimationActive ?? isAnimationActive;
 	const gradientScope = React$1.useId().replace(/:/g, "");
 	const resolvedLabelStyle = React$1.useMemo(() => ({
@@ -227,66 +227,79 @@ var TreemapChart = React$1.forwardRef(function TreemapChart({ data, config: expl
 		name: d.key,
 		fill: colorByKey.get(d.key)
 	})), [sortedData, colorByKey]);
+	const listLegend = renderChartLegendList(showLegend, legendOptions, sortedData.filter((d) => d.key in config).map((d) => ({
+		key: d.key,
+		label: config[d.key]?.label ?? d.key,
+		icon: config[d.key]?.icon,
+		color: colorByKey.get(d.key),
+		value: d.value
+	})));
 	return /* @__PURE__ */ jsxs("div", {
 		ref,
-		className: cn("flex w-full flex-col", className),
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "relative min-h-0 flex-1",
-			children: /* @__PURE__ */ jsx(ChartContainer, {
-				config,
-				className: "h-full w-full",
-				children: /* @__PURE__ */ jsxs(Treemap, {
-					data: treemapData,
-					dataKey: "value",
-					nameKey: "key",
-					aspectRatio,
-					stroke: "transparent",
-					isAnimationActive,
-					isUpdateAnimationActive: resolvedUpdateAnimationActive,
-					animationBegin,
-					animationDuration,
-					animationEasing,
-					content: /* @__PURE__ */ jsx(TreemapTile, {
-						gradientScope,
-						gradient,
-						valueFormatter,
-						colorByKey,
-						textColorByKey,
-						autoTextColor,
-						labelStyle: resolvedLabelStyle
-					}),
-					children: [gradient && /* @__PURE__ */ jsx("defs", { children: uniqueKeys.map((key) => {
-						const stopColor = colorByKey.get(key) ?? "var(--color-muted)";
-						return /* @__PURE__ */ jsxs("linearGradient", {
-							id: `treemap-grad-${gradientScope}-${sanitizeId(key)}`,
-							x1: "0",
-							y1: "0",
-							x2: "0",
-							y2: "1",
-							children: [/* @__PURE__ */ jsx("stop", {
-								offset: "0%",
-								stopColor,
-								stopOpacity: GRADIENT_TOP_OPACITY
-							}), /* @__PURE__ */ jsx("stop", {
-								offset: "100%",
-								stopColor,
-								stopOpacity: GRADIENT_BOTTOM_OPACITY
-							})]
-						}, key);
-					}) }), showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
-						cursor: false,
-						content: /* @__PURE__ */ jsx(ChartTooltipContent, {
-							hideLabel: true,
-							nameKey: "key"
-						})
-					})]
+		className: cn("flex w-full flex-col", listLegend && "gap-4", className),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "relative min-h-0 flex-1",
+				children: /* @__PURE__ */ jsx(ChartContainer, {
+					config,
+					className: "h-full w-full",
+					children: /* @__PURE__ */ jsxs(Treemap, {
+						data: treemapData,
+						dataKey: "value",
+						nameKey: "key",
+						aspectRatio,
+						stroke: "transparent",
+						isAnimationActive,
+						isUpdateAnimationActive: resolvedUpdateAnimationActive,
+						animationBegin,
+						animationDuration,
+						animationEasing,
+						content: /* @__PURE__ */ jsx(TreemapTile, {
+							gradientScope,
+							gradient,
+							valueFormatter,
+							colorByKey,
+							textColorByKey,
+							autoTextColor,
+							labelStyle: resolvedLabelStyle
+						}),
+						children: [gradient && /* @__PURE__ */ jsx("defs", { children: uniqueKeys.map((key) => {
+							const stopColor = colorByKey.get(key) ?? "var(--color-muted)";
+							return /* @__PURE__ */ jsxs("linearGradient", {
+								id: `treemap-grad-${gradientScope}-${sanitizeId(key)}`,
+								x1: "0",
+								y1: "0",
+								x2: "0",
+								y2: "1",
+								children: [/* @__PURE__ */ jsx("stop", {
+									offset: "0%",
+									stopColor,
+									stopOpacity: GRADIENT_TOP_OPACITY
+								}), /* @__PURE__ */ jsx("stop", {
+									offset: "100%",
+									stopColor,
+									stopOpacity: GRADIENT_BOTTOM_OPACITY
+								})]
+							}, key);
+						}) }), showTooltip && /* @__PURE__ */ jsx(ChartTooltip, {
+							cursor: false,
+							content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+								radius: tooltipRadius,
+								elevation: tooltipElevation,
+								hideLabel: true,
+								nameKey: "key"
+							})
+						})]
+					})
 				})
+			}),
+			listLegend,
+			showLegend && !listLegend && /* @__PURE__ */ jsx(TreemapLegend, {
+				config,
+				order: uniqueKeys,
+				colorByKey
 			})
-		}), showLegend && /* @__PURE__ */ jsx(TreemapLegend, {
-			config,
-			order: uniqueKeys,
-			colorByKey
-		})]
+		]
 	});
 });
 TreemapChart.displayName = "TreemapChart";

package/dist/components/check-badge/check-badge.js

@@ -0,0 +1,25 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/check-badge/check-badge.tsx
+/** A small filled success circle with a tick, drawn inside an `<svg>` (a scene, a diagram): done. */
+function CheckBadge({ cx, cy, r }) {
+	const scale = r * 2 / 12;
+	return /* @__PURE__ */ jsxs("g", {
+		"data-slot": "check-badge",
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx,
+			cy,
+			r,
+			className: "fill-success"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M2.6 6.3 5 8.6l4.4-4.9",
+			transform: `translate(${cx - r} ${cy - r}) scale(${scale})`,
+			fill: "none",
+			strokeWidth: 1.6,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			className: "stroke-background"
+		})]
+	});
+}
+//#endregion
+export { CheckBadge };

package/dist/components/check-badge/index.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+interface CheckBadgeProps {
+    cx: number;
+    cy: number;
+    /** Radius, in scene units. */
+    r: number;
+}
+
+/** A small filled success circle with a tick, drawn inside an `<svg>` (a scene, a diagram): done. */
+declare function CheckBadge({ cx, cy, r }: CheckBadgeProps): React.JSX.Element;
+
+export { CheckBadge, type CheckBadgeProps };

package/dist/components/check-badge/index.js

@@ -0,0 +1,2 @@
+import { CheckBadge } from "./check-badge.js";
+export { CheckBadge };

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { HTMLMotionProps } from 'motion/react';
+
+type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root> & HTMLMotionProps<'button'>;
+declare function Checkbox({ className, onCheckedChange, ...props }: CheckboxProps): React.JSX.Element;
+
+export { Checkbox };

package/dist/components/checkbox/index.js

@@ -0,0 +1,2 @@
+import { Checkbox } from "../../core/checkbox/motion-checkbox.js";
+export { Checkbox };

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

@@ -0,0 +1,99 @@
+import { cn } from "../../utils/cn.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+//#region src/components/choice-card/choice-card.tsx
+var MIST = "from-primary/8 via-primary/3 to-card dark:from-primary/12 dark:via-primary/4";
+/**
+* A stack's chosen card carries a ring. A row's border is one hairline in the
+* mist's own starting colour, chosen or not, so a list of several reads calm:
+* the tick says which are chosen.
+*/
+function border(row, selected) {
+	if (row) return "border-primary/8 hover:border-primary/50 dark:border-primary/12";
+	return selected ? "border-primary ring-2 ring-primary/30" : "border-primary/8 hover:border-primary/50 dark:border-primary/15";
+}
+function Tick() {
+	return /* @__PURE__ */ jsx("span", {
+		className: "absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-sm",
+		children: /* @__PURE__ */ jsx(Check, {
+			className: "h-3.5 w-3.5",
+			"aria-hidden": true
+		})
+	});
+}
+/** The lines under (or beside) the title: the meta, then the note in the primary colour. */
+function Lines({ meta, note, wrap, disabled, className }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("flex min-w-0 flex-col gap-0.5 text-xs text-foreground-secondary", !wrap && "*:truncate", className),
+		children: [meta, note && /* @__PURE__ */ jsx("span", {
+			className: cn("font-medium", disabled ? "text-foreground-secondary" : "text-primary"),
+			children: note
+		})]
+	});
+}
+/**
+* A card you click to CHOOSE something (a board, a framework, a template),
+* where `ShowcaseCard` is one you click to open. The whole card is one toggle
+* button. Its picture sits edge to edge on a mist that clears into the card,
+* so the picture has no box of its own, with the title where the mist ends
+* and the meta lines under it. The chosen one carries a ring and a tick; one
+* that cannot be chosen is greyed with its reason as the note. In a `row`,
+* the picture is small on the left and the mist runs left to right.
+*/
+function ChoiceCard(props) {
+	const { media, title, meta, wrap = false, note, badge, disabled = false, layout = "stack", selected, onSelect } = props;
+	const row = layout === "row";
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		"aria-pressed": selected,
+		disabled,
+		onClick: onSelect,
+		"data-slot": "choice-card",
+		className: cn("group/choice-card relative flex overflow-hidden rounded-2xl border bg-card text-left transition-[border-color,box-shadow,transform] duration-150", row ? "items-stretch" : "flex-col", disabled ? "cursor-not-allowed border-border opacity-55 grayscale" : "cursor-pointer hover:-translate-y-0.5 hover:shadow-md motion-reduce:hover:translate-y-0", !disabled && border(row, selected)),
+		children: [
+			row ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+				className: cn("flex w-22 shrink-0 items-center overflow-hidden bg-linear-to-r", MIST),
+				children: /* @__PURE__ */ jsx("span", {
+					className: "block w-full transition-transform duration-300 ease-out group-hover/choice-card:scale-105 motion-reduce:group-hover/choice-card:scale-100",
+					children: media
+				})
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "flex min-w-0 flex-1 flex-col justify-center gap-0.5 py-2.5 pr-9 pl-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "line-clamp-2 text-sm font-semibold text-foreground",
+					children: title
+				}), /* @__PURE__ */ jsx(Lines, {
+					meta,
+					note,
+					wrap,
+					disabled
+				})]
+			})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+				className: cn("relative block overflow-hidden bg-linear-to-b", MIST),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "block transition-transform duration-300 ease-out group-hover/choice-card:scale-105 motion-reduce:group-hover/choice-card:scale-100",
+					children: media
+				}), /* @__PURE__ */ jsx("span", {
+					className: "relative block px-3 pt-1",
+					children: /* @__PURE__ */ jsx("span", {
+						className: "line-clamp-2 text-sm font-semibold text-foreground",
+						children: title
+					})
+				})]
+			}), /* @__PURE__ */ jsx(Lines, {
+				meta,
+				note,
+				wrap,
+				disabled,
+				className: "px-3 pt-1 pb-3"
+			})] }),
+			selected && /* @__PURE__ */ jsx(Tick, {}),
+			badge && /* @__PURE__ */ jsx("span", {
+				className: "absolute top-2 left-2 flex",
+				children: badge
+			})
+		]
+	});
+}
+//#endregion
+export { ChoiceCard };

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface ChoiceCardProps {
+    /** The picture: transparent behind it, so it sits on the card's mist. Grows a little on hover. */
+    media: ReactNode;
+    title: string;
+    /** Lines under the title (what it is, who makes it), each truncating on its own. */
+    meta?: ReactNode;
+    /** Let the meta lines wrap instead of truncating (a sentence rather than a few words). */
+    wrap?: boolean;
+    /** Drawn over the picture's top-left corner (a "Popular" mark). The top-right is the tick's. */
+    badge?: ReactNode;
+    /** One line under the meta, in the primary colour: why this one is offered ("Has a screen"), or why it cannot be chosen. */
+    note?: ReactNode;
+    /** Cannot be chosen now: greyed, no hover, and `note` says why. */
+    disabled?: boolean;
+    /**
+     * `stack` (default): the picture across the top, the words under it — for a
+     * grid you choose ONE from by its picture. `row`: a small picture on the left,
+     * the words beside it, the mist running left to right — for a list of several
+     * chosen at once, where the words carry more than the picture.
+     */
+    layout?: "stack" | "row";
+    /** The chosen one: a ring, a tick, and `aria-pressed`. */
+    selected: boolean;
+    onSelect: () => void;
+}
+
+/**
+ * A card you click to CHOOSE something (a board, a framework, a template),
+ * where `ShowcaseCard` is one you click to open. The whole card is one toggle
+ * button. Its picture sits edge to edge on a mist that clears into the card,
+ * so the picture has no box of its own, with the title where the mist ends
+ * and the meta lines under it. The chosen one carries a ring and a tick; one
+ * that cannot be chosen is greyed with its reason as the note. In a `row`,
+ * the picture is small on the left and the mist runs left to right.
+ */
+declare function ChoiceCard(props: ChoiceCardProps): React.JSX.Element;
+
+export { ChoiceCard, type ChoiceCardProps };

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

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

package/dist/components/circular-progress/circular-progress.js

@@ -58,7 +58,7 @@ function strokeResolvedStyle(color, opacity) {
 	return { stroke: opacity === "muted" ? `color-mix(in srgb, ${color} 20%, transparent)` : color };
 }
 var labelTypographyClass = "whitespace-nowrap text-center leading-none font-semibold tracking-tight tabular-nums";
-var CircularProgress = React$1.forwardRef(function CircularProgress({ value, showPercentage = false, color = "primary", size = DEFAULT_SIZE_PX, className, style, ...props }, ref) {
+var CircularProgress = React$1.forwardRef(function CircularProgress({ value, showPercentage = false, color = "primary", size = DEFAULT_SIZE_PX, className, style, children, ...props }, ref) {
 	const boxSize = clampSizePx(size);
 	const displayValue = truncateOneDecimal(clampProgress(value));
 	const strokeWidth = STROKE_WIDTH_VIEWBOX;
@@ -110,7 +110,10 @@ var CircularProgress = React$1.forwardRef(function CircularProgress({ value, sho
 					strokeDashoffset: dashOffset
 				})]
 			})
-		}), showPercentage ? /* @__PURE__ */ jsxs("span", {
+		}), children != null ? /* @__PURE__ */ jsx("span", {
+			className: "absolute inset-0 flex min-h-0 min-w-0 items-center justify-center",
+			children
+		}) : showPercentage ? /* @__PURE__ */ jsxs("span", {
 			className: cn("pointer-events-none absolute inset-0 flex min-h-0 min-w-0 items-center justify-center", presetProgressClass, labelTypographyClass),
 			style: {
 				fontSize: fontSizePx,

package/dist/components/circular-progress/index.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { C as Color } from '../../index-BQANnKs9.js';
+
+interface CircularProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Progress amount; clamped to 0–100. Display and arc use one decimal place
+     * truncated toward zero (e.g. 78.67676876 → 78.6).
+     */
+    value: number;
+    showPercentage?: boolean;
+    color?: Color;
+    /** Outer width and height of the circle in CSS pixels (e.g. 32 → 32×32). */
+    size?: number;
+    /**
+     * Content centred inside the ring (an icon, an `IconAvatar`, a count). Drawn
+     * instead of the percentage, so pass `showPercentage` only without it.
+     */
+    children?: React.ReactNode;
+}
+
+declare const CircularProgress: React.ForwardRefExoticComponent<CircularProgressProps & React.RefAttributes<HTMLDivElement>>;
+
+export { CircularProgress, type CircularProgressProps };

package/dist/components/circular-progress/index.js

@@ -0,0 +1,2 @@
+import { CircularProgress } from "./circular-progress.js";
+export { CircularProgress };