@espressif/dashboard-ui-components 1.11.2 → 1.12.0

package/dist/components/expandable-text/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface ExpandableTextLabels {
+    /** The link under clamped text ("Show more"). */
+    more: string;
+    /** Inline mode: the link under the full text ("Show less"). */
+    less: string;
+    /** Overlay mode: the close button's accessible name ("Close"). */
+    close: string;
+}
+interface ExpandableTextProps {
+    /** The text. Line breaks are kept. */
+    children: string;
+    /** Lines shown before it is clamped, 1 to 6. Default `2`. */
+    lines?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * `inline` grows in place. `overlay` keeps its own height and opens the full
+     * text over the nearest positioned ancestor (a card), so nothing around it
+     * moves; the ancestor needs `relative`. Default `inline`.
+     */
+    mode?: "inline" | "overlay";
+    /** Already-translated labels. */
+    labels: ExpandableTextLabels;
+    /** Overlay mode: shown above the full text (the title it belongs to). */
+    header?: ReactNode;
+    /** Overlay mode: shown under the full text (tags, a byline). */
+    footer?: ReactNode;
+    className?: string;
+}
+
+/**
+ * Text clamped to a few lines with a "Show more" link — shown only when the
+ * text really is cut off. `inline` grows in place; `overlay` opens the full
+ * text over its card, so the card never changes height.
+ */
+declare function ExpandableText({ children, lines, mode, labels, header, footer, className }: ExpandableTextProps): React.JSX.Element;
+
+export { ExpandableText, type ExpandableTextLabels, type ExpandableTextProps };

package/dist/components/expandable-text/index.js

@@ -0,0 +1,2 @@
+import { ExpandableText } from "./expandable-text.js";
+export { ExpandableText };

package/dist/components/expandable-text/use-clamped.js

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+//#region src/components/expandable-text/use-clamped.ts
+/**
+* Whether the element's text is cut off by its line clamp, kept current as the
+* element resizes. Measured, not guessed from the length: the same sentence
+* fits on a wide card and clamps on a phone.
+*/
+function useClamped(ref, enabled) {
+	const [clamped, setClamped] = useState(false);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el || !enabled) return;
+		const measure = () => setClamped(el.scrollHeight > el.clientHeight + 1);
+		measure();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [ref, enabled]);
+	return clamped;
+}
+//#endregion
+export { useClamped };

package/dist/components/facet-filters/_hooks/use-filter-group.js

@@ -0,0 +1,51 @@
+import { useMemo, useState } from "react";
+//#region src/components/facet-filters/_hooks/use-filter-group.ts
+/** Options a filter group shows before "Show more", and how many each click adds. */
+var GROUP_INITIAL = 3;
+var GROUP_STEP = 5;
+/**
+* What a filter group shows: the first few options, five more per "Show more",
+* every match while its own search is open — and every TICKED option always,
+* even past the limit, so a choice never disappears.
+*/
+function useFilterGroup(options, selected) {
+	const [view, setView] = useState({
+		limit: GROUP_INITIAL,
+		find: null
+	});
+	const visible = useMemo(() => {
+		const needle = view.find?.trim().toLowerCase();
+		if (needle !== void 0 && needle !== "") return options.filter((option) => option.label.toLowerCase().includes(needle));
+		if (view.find !== null) return options;
+		return options.filter((option, index) => index < view.limit || selected.includes(option.value));
+	}, [
+		options,
+		selected,
+		view
+	]);
+	return {
+		visible,
+		hidden: view.find === null ? options.length - visible.length : 0,
+		canShowLess: view.find === null && view.limit > GROUP_INITIAL,
+		searching: view.find !== null,
+		find: view.find ?? "",
+		showMore: () => setView((v) => ({
+			...v,
+			limit: v.limit + GROUP_STEP
+		})),
+		showLess: () => setView((v) => ({
+			...v,
+			limit: GROUP_INITIAL
+		})),
+		toggleSearch: () => setView((v) => ({
+			...v,
+			find: v.find === null ? "" : null
+		})),
+		setFind: (find) => setView((v) => ({
+			...v,
+			find
+		}))
+	};
+}
+//#endregion
+export { GROUP_INITIAL, GROUP_STEP, useFilterGroup };

package/dist/components/facet-filters/active-filters.js

@@ -0,0 +1,31 @@
+import { Button } from "../button/button.js";
+import { Tag as Tag$1 } from "../tag/tag.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+//#region src/components/facet-filters/active-filters.tsx
+/** What is narrowing the list, each removable, and "Clear all". Nothing when nothing is. */
+function ActiveFilters({ tags, clearLabel, onClearAll }) {
+	if (tags.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "active-filters",
+		className: "flex flex-wrap items-center gap-2",
+		children: [tags.map((tag) => /* @__PURE__ */ jsx(Tag$1, {
+			value: tag.label,
+			variant: "outline",
+			color: "silver",
+			size: "sm",
+			rounded: true,
+			onDelete: tag.onDelete
+		}, tag.key)), /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			color: "error",
+			size: "sm",
+			fullWidth: false,
+			startIcon: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }),
+			onClick: onClearAll,
+			children: clearLabel
+		})]
+	});
+}
+//#endregion
+export { ActiveFilters };

package/dist/components/facet-filters/filter-group.js

@@ -0,0 +1,110 @@
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { Typography } from "../typography/typography.js";
+import { Checkbox } from "../../core/checkbox/motion-checkbox.js";
+import SearchBox from "../search-box/search-box.js";
+import { GROUP_STEP, useFilterGroup } from "./_hooks/use-filter-group.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp, Search } from "lucide-react";
+//#region src/components/facet-filters/filter-group.tsx
+var RISE_DELAY = [
+	"delay-0",
+	"delay-75",
+	"delay-150"
+];
+/** One filter group: its options with counts, "Show more", and a search of its own. */
+function FilterGroup({ group, selected, onToggle, order, animate, labels }) {
+	const headingId = useId();
+	const view = useFilterGroup(group.options, selected);
+	const lower = group.title.toLowerCase();
+	return /* @__PURE__ */ jsxs("section", {
+		"aria-labelledby": headingId,
+		"data-slot": "filter-group",
+		className: cn("flex flex-col gap-2 border-t border-border pt-4", animate && "motion-safe:animate-rise-in", animate && RISE_DELAY[order % RISE_DELAY.length]),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx(Typography, {
+					id: headingId,
+					variant: "subtitle2",
+					as: "h3",
+					className: "m-0 text-foreground",
+					children: group.title
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "icon",
+					fullWidth: false,
+					"aria-label": labels.searchGroup(lower),
+					"aria-pressed": view.searching,
+					startIcon: /* @__PURE__ */ jsx(Search, { className: "h-4 w-4" }),
+					onClick: view.toggleSearch
+				})]
+			}),
+			view.searching && /* @__PURE__ */ jsx(SearchBox, {
+				size: "sm",
+				value: view.find,
+				onValueChange: view.setFind,
+				onSearch: view.setFind,
+				onClear: () => view.setFind(""),
+				placeholder: labels.searchGroupPlaceholder(lower),
+				"aria-label": labels.searchGroupPlaceholder(lower)
+			}),
+			/* @__PURE__ */ jsx("ul", {
+				className: "m-0 flex list-none flex-col gap-1 p-0",
+				children: view.visible.map((option) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", {
+					className: "flex cursor-pointer items-center gap-2 rounded-md px-1 py-1 text-sm text-foreground hover:bg-accent",
+					children: [
+						/* @__PURE__ */ jsx(Checkbox, {
+							checked: selected.includes(option.value),
+							onCheckedChange: () => onToggle(group.id, option.value)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 flex-1 truncate",
+							children: option.label
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-mono text-xs text-foreground-muted",
+							children: option.count
+						})
+					]
+				}) }, option.value))
+			}),
+			view.searching && view.visible.length === 0 && /* @__PURE__ */ jsx(Typography, {
+				variant: "body2",
+				className: "m-0 px-1 text-foreground-muted",
+				children: labels.noOptions
+			}),
+			/* @__PURE__ */ jsx(GroupMoreLess, {
+				hidden: view.hidden,
+				canShowLess: view.canShowLess,
+				onMore: view.showMore,
+				onLess: view.showLess,
+				labels
+			})
+		]
+	});
+}
+function GroupMoreLess({ hidden, canShowLess, onMore, onLess, labels }) {
+	if (hidden > 0) return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		fullWidth: false,
+		className: "self-start",
+		startIcon: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }),
+		onClick: onMore,
+		children: labels.showMore(Math.min(hidden, GROUP_STEP))
+	});
+	if (canShowLess) return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		fullWidth: false,
+		className: "self-start",
+		startIcon: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" }),
+		onClick: onLess,
+		children: labels.showLess
+	});
+	return null;
+}
+//#endregion
+export { FilterGroup };

package/dist/components/facet-filters/filters-panel.js

@@ -0,0 +1,59 @@
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { Typography } from "../typography/typography.js";
+import { Badge } from "../../core/badge.js";
+import { FilterGroup } from "./filter-group.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { PanelLeftClose, SlidersHorizontal } from "lucide-react";
+//#region src/components/facet-filters/filters-panel.tsx
+/** The side panel: every filter group, and the button that folds it into the pill. */
+function FiltersPanel({ groups, selected, activeCount, onToggle, onCollapse, animate, labels, children }) {
+	return /* @__PURE__ */ jsxs("aside", {
+		"aria-label": labels.title,
+		"data-slot": "filters-panel",
+		className: cn("view-transition-morph flex flex-col gap-4 rounded-2xl border border-border bg-card p-4", animate && "motion-safe:animate-slide-in-start"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [
+					/* @__PURE__ */ jsx(SlidersHorizontal, {
+						className: "h-4 w-4 text-foreground-secondary",
+						"aria-hidden": true
+					}),
+					/* @__PURE__ */ jsxs(Typography, {
+						variant: "subtitle1",
+						as: "h2",
+						className: "m-0 flex-1 text-foreground",
+						children: [labels.title, activeCount > 0 && /* @__PURE__ */ jsx(Badge, {
+							variant: "soft",
+							color: "primary",
+							radius: "full",
+							className: "ml-2 font-mono",
+							children: labels.activeCount(activeCount)
+						})]
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "icon",
+						fullWidth: false,
+						"aria-label": labels.collapse,
+						tooltip: labels.collapse,
+						startIcon: /* @__PURE__ */ jsx(PanelLeftClose, { className: "h-4 w-4" }),
+						onClick: onCollapse
+					})
+				]
+			}),
+			children,
+			groups.filter((group) => group.options.length > 0).map((group, index) => /* @__PURE__ */ jsx(FilterGroup, {
+				group,
+				selected: selected[group.id] ?? [],
+				onToggle,
+				order: index,
+				animate,
+				labels
+			}, group.id))
+		]
+	});
+}
+//#endregion
+export { FiltersPanel };

package/dist/components/facet-filters/filters-pill.js

@@ -0,0 +1,40 @@
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import { Badge } from "../../core/badge.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SlidersHorizontal } from "lucide-react";
+//#region src/components/facet-filters/filters-pill.tsx
+/**
+* The folded filters: a floating button at the bottom of the screen, level
+* with the content's left edge in a 1180px measure (centred on phones). It is
+* the panel itself, morphed — the two share one view-transition name and are
+* never shown together.
+*/
+function FiltersPill({ activeCount, onExpand, animate, labels }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "filters-pill",
+		className: "pointer-events-none fixed inset-x-0 bottom-6 z-40",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "mx-auto flex w-full max-w-295 justify-center px-4 lg:justify-start",
+			children: /* @__PURE__ */ jsxs(Button, {
+				color: "primary",
+				fullWidth: false,
+				radius: "full",
+				"aria-expanded": false,
+				title: labels.expand,
+				startIcon: /* @__PURE__ */ jsx(SlidersHorizontal, { className: "h-4 w-4 transition-transform group-hover:-rotate-12" }),
+				className: cn("group view-transition-morph pointer-events-auto shadow-lg transition-transform hover:-translate-y-0.5", animate && "motion-safe:animate-pop-in"),
+				onClick: onExpand,
+				children: [labels.title, activeCount > 0 && /* @__PURE__ */ jsx(Badge, {
+					variant: "solid",
+					color: "secondary",
+					radius: "full",
+					className: "ml-1 font-mono",
+					children: activeCount
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { FiltersPill };

package/dist/components/facet-filters/index.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+
+interface FacetFilterOption {
+    value: string;
+    label: string;
+    count: number;
+}
+interface FacetFilterGroup {
+    id: string;
+    title: string;
+    options: FacetFilterOption[];
+}
+/** What is ticked, by group id. */
+type FacetSelection = Record<string, string[]>;
+interface FacetFiltersLabels {
+    /** The panel's heading and the pill's text. */
+    title: string;
+    activeCount: (count: number) => string;
+    collapse: string;
+    expand: string;
+    /** A group's own search toggle and field, given the group's title in lower case. */
+    searchGroup: (group: string) => string;
+    searchGroupPlaceholder: (group: string) => string;
+    showMore: (count: number) => string;
+    showLess: string;
+    noOptions: string;
+}
+/** One removable tag above the results. */
+interface ActiveFilterTag {
+    key: string;
+    label: string;
+    onDelete: () => void;
+}
+
+interface FiltersPanelProps {
+    /** Every group, counted and labelled by the page. A group with no options is left out. */
+    groups: FacetFilterGroup[];
+    selected: FacetSelection;
+    activeCount: number;
+    onToggle: (groupId: string, value: string) => void;
+    onCollapse: () => void;
+    /** Play the CSS entrance (only where the browser cannot morph it in). */
+    animate: boolean;
+    labels: FacetFiltersLabels;
+    /** Shown under the heading, above the groups (a page's own switch, like "On my bench"). */
+    children?: ReactNode;
+}
+interface FilterGroupProps {
+    group: FacetFilterGroup;
+    selected: string[];
+    onToggle: (groupId: string, value: string) => void;
+    /** Entrance order, for the staggered rise-in where view transitions are missing. */
+    order: number;
+    animate: boolean;
+    labels: FacetFiltersLabels;
+}
+interface FiltersPillProps {
+    activeCount: number;
+    onExpand: () => void;
+    animate: boolean;
+    labels: {
+        title: string;
+        expand: string;
+    };
+}
+interface ActiveFiltersProps {
+    tags: ActiveFilterTag[];
+    clearLabel: string;
+    onClearAll: () => void;
+}
+
+/** What is narrowing the list, each removable, and "Clear all". Nothing when nothing is. */
+declare function ActiveFilters({ tags, clearLabel, onClearAll }: ActiveFiltersProps): React.JSX.Element | null;
+
+/** One filter group: its options with counts, "Show more", and a search of its own. */
+declare function FilterGroup({ group, selected, onToggle, order, animate, labels }: FilterGroupProps): React.JSX.Element;
+
+/** The side panel: every filter group, and the button that folds it into the pill. */
+declare function FiltersPanel({ groups, selected, activeCount, onToggle, onCollapse, animate, labels, children }: FiltersPanelProps): React.JSX.Element;
+
+/**
+ * The folded filters: a floating button at the bottom of the screen, level
+ * with the content's left edge in a 1180px measure (centred on phones). It is
+ * the panel itself, morphed — the two share one view-transition name and are
+ * never shown together.
+ */
+declare function FiltersPill({ activeCount, onExpand, animate, labels }: FiltersPillProps): React.JSX.Element;
+
+/** True where the browser can morph the panel into the pill itself. */
+declare const supportsViewTransitions: boolean;
+/**
+ * Whether the filters panel is folded into the floating pill. It starts folded,
+ * so the results get the page; the pill opens it. A change runs as a view
+ * transition, so the panel morphs into the pill and the cards glide to their
+ * new places.
+ */
+declare function useFiltersCollapsed(): {
+    collapsed: boolean;
+    collapse: () => void;
+    expand: () => void;
+};
+
+export { type ActiveFilterTag, ActiveFilters, type ActiveFiltersProps, type FacetFilterGroup, type FacetFilterOption, type FacetFiltersLabels, type FacetSelection, FilterGroup, type FilterGroupProps, FiltersPanel, type FiltersPanelProps, FiltersPill, type FiltersPillProps, supportsViewTransitions, useFiltersCollapsed };

package/dist/components/facet-filters/index.js

@@ -0,0 +1,6 @@
+import { ActiveFilters } from "./active-filters.js";
+import { FilterGroup } from "./filter-group.js";
+import { FiltersPanel } from "./filters-panel.js";
+import { FiltersPill } from "./filters-pill.js";
+import { supportsViewTransitions, useFiltersCollapsed } from "./use-filters-collapsed.js";
+export { ActiveFilters, FilterGroup, FiltersPanel, FiltersPill, supportsViewTransitions, useFiltersCollapsed };

package/dist/components/facet-filters/use-filters-collapsed.js

@@ -0,0 +1,21 @@
+import { startViewTransition } from "../../utils/view-transition.js";
+import { useCallback, useState } from "react";
+//#region src/components/facet-filters/use-filters-collapsed.ts
+/** True where the browser can morph the panel into the pill itself. */
+var supportsViewTransitions = typeof document !== "undefined" && "startViewTransition" in document;
+/**
+* Whether the filters panel is folded into the floating pill. It starts folded,
+* so the results get the page; the pill opens it. A change runs as a view
+* transition, so the panel morphs into the pill and the cards glide to their
+* new places.
+*/
+function useFiltersCollapsed() {
+	const [collapsed, setCollapsed] = useState(true);
+	return {
+		collapsed,
+		collapse: useCallback(() => startViewTransition(() => setCollapsed(true)), []),
+		expand: useCallback(() => startViewTransition(() => setCollapsed(false)), [])
+	};
+}
+//#endregion
+export { supportsViewTransitions, useFiltersCollapsed };

package/dist/components/feature-grid/feature-grid.js

@@ -0,0 +1,115 @@
+import { cn } from "../../utils/cn.js";
+import { Button } from "../button/button.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp } from "lucide-react";
+//#region src/components/feature-grid/feature-grid.tsx
+var DEFAULT_PAGE_SIZE = 6;
+var DEFAULT_LABELS = {
+	showAll: (count) => `Show all ${count}`,
+	showMore: (count) => `Show ${count} more`,
+	showFewer: "Show fewer"
+};
+var COLUMNS = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 @xl:grid-cols-2",
+	3: "grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3"
+};
+/** `01`, `02`… — as many digits as the longest number needs, never fewer than two. */
+function numberOf(index, total) {
+	return String(index + 1).padStart(Math.max(2, String(total).length), "0");
+}
+/** How many items show, and what the button does next: show all, show the next page, or fold back. */
+function usePaging(total, pageSize, reveal) {
+	const [shown, setShown] = React$1.useState(pageSize);
+	const visible = Math.min(shown, total);
+	const left = total - visible;
+	let next = null;
+	if (left > 0) next = reveal === "page" ? "page" : "all";
+	else if (total > pageSize) next = "fewer";
+	return {
+		visible,
+		next,
+		nextCount: Math.min(pageSize, left),
+		showMore: () => setShown(next === "page" ? visible + pageSize : total),
+		showFewer: () => setShown(pageSize)
+	};
+}
+/**
+* What something does, as a numbered grid: a short title per item and the
+* sentence under it, two columns where there is room. Each item draws its own
+* dividers, so an odd count leaves a clean empty cell, not a grey block. A
+* long list shows its first `pageSize` items; the button under it shows the
+* rest at once (`reveal="all"`) or a page at a time (`reveal="page"`), moving
+* focus to the first item it adds, then folds back to the first page.
+*/
+var FeatureGrid = React$1.forwardRef(function FeatureGrid({ items, numbered = true, columns = 2, pageSize = DEFAULT_PAGE_SIZE, reveal = "all", titleAs: Title = "h3", labels, className, id, ...props }, ref) {
+	const text = {
+		...DEFAULT_LABELS,
+		...labels
+	};
+	const paging = usePaging(items.length, pageSize, reveal);
+	const generatedId = React$1.useId();
+	const listId = id ?? generatedId;
+	const focusIndex = React$1.useRef(null);
+	const itemRefs = React$1.useRef([]);
+	React$1.useEffect(() => {
+		if (focusIndex.current === null) return;
+		itemRefs.current[focusIndex.current]?.focus();
+		focusIndex.current = null;
+	}, [paging.visible]);
+	function handleClick() {
+		if (paging.next === "fewer") {
+			paging.showFewer();
+			return;
+		}
+		focusIndex.current = paging.visible;
+		paging.showMore();
+	}
+	const buttonText = paging.next === "fewer" ? text.showFewer : paging.next === "page" ? text.showMore(paging.nextCount) : text.showAll(items.length);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "feature-grid",
+		className: "@container flex flex-col gap-4",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "overflow-hidden rounded-xl border border-border",
+			children: /* @__PURE__ */ jsx("ol", {
+				ref,
+				id: listId,
+				className: cn("-mr-px -mb-px grid list-none p-0 m-0", COLUMNS[columns], className),
+				...props,
+				children: items.slice(0, paging.visible).map((item, index) => /* @__PURE__ */ jsxs("li", {
+					ref: (node) => {
+						itemRefs.current[index] = node;
+					},
+					tabIndex: -1,
+					className: cn("flex gap-3 border-r border-b border-border p-4 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", index >= pageSize && "motion-safe:animate-rise-in"),
+					children: [numbered && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "h-fit shrink-0 rounded-md bg-muted px-1.5 py-0.5 font-mono text-xs font-semibold text-muted-foreground",
+						children: numberOf(index, items.length)
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-col gap-1",
+						children: [/* @__PURE__ */ jsx(Title, {
+							className: "m-0 text-sm font-semibold text-foreground [overflow-wrap:anywhere]",
+							children: item.title
+						}), item.description != null && /* @__PURE__ */ jsx("p", {
+							className: "m-0 text-sm leading-relaxed text-muted-foreground",
+							children: item.description
+						})]
+					})]
+				}, item.id))
+			})
+		}), paging.next && /* @__PURE__ */ jsx(Button, {
+			variant: "outline",
+			color: "gray",
+			"aria-controls": listId,
+			"aria-expanded": paging.next === "fewer",
+			endIcon: paging.next === "fewer" ? /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": true }) : /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": true }),
+			onClick: handleClick,
+			children: buttonText
+		})]
+	});
+});
+FeatureGrid.displayName = "FeatureGrid";
+//#endregion
+export { FeatureGrid };

package/dist/components/feature-grid/index.d.ts

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/** One item: a short title, and the sentence under it when it has one. */
+interface FeatureGridItem {
+    /** Stable key. */
+    id: string;
+    title: ReactNode;
+    description?: ReactNode;
+}
+/** The most columns the grid uses; it follows its own width, not the viewport's. */
+type FeatureGridColumns = 1 | 2 | 3;
+/**
+ * What the button under a long list does. `all`: one click shows every item
+ * ("Show all 15"). `page`: each click shows the next `pageSize` items
+ * ("Show 6 more"). Either way, once every item shows it folds back ("Show fewer").
+ */
+type FeatureGridReveal = "all" | "page";
+/** Already-translated labels; English when absent. */
+interface FeatureGridLabels {
+    /** `reveal="all"`: `count` is how many items there are in all. */
+    showAll: (count: number) => string;
+    /** `reveal="page"`: `count` is how many the click will add. */
+    showMore: (count: number) => string;
+    /** Back to the first page, once every item shows. */
+    showFewer: string;
+}
+interface FeatureGridProps extends Omit<HTMLAttributes<HTMLOListElement>, "children"> {
+    items: readonly FeatureGridItem[];
+    /** Number the items 01, 02, 03… Default `true`. */
+    numbered?: boolean;
+    /** Default `2`: one column below 36rem of its own width, two above (three from 56rem with `3`). */
+    columns?: FeatureGridColumns;
+    /** Items shown at first, and how many more each "Show more" adds. Default 6. `Infinity` shows them all with no button. */
+    pageSize?: number;
+    /** Default `all`. */
+    reveal?: FeatureGridReveal;
+    /** The element each item's title is. Default `h3`: the grid usually sits under a section's `h2`. */
+    titleAs?: "h3" | "h4" | "p";
+    labels?: Partial<FeatureGridLabels>;
+}
+
+/**
+ * What something does, as a numbered grid: a short title per item and the
+ * sentence under it, two columns where there is room. Each item draws its own
+ * dividers, so an odd count leaves a clean empty cell, not a grey block. A
+ * long list shows its first `pageSize` items; the button under it shows the
+ * rest at once (`reveal="all"`) or a page at a time (`reveal="page"`), moving
+ * focus to the first item it adds, then folds back to the first page.
+ */
+declare const FeatureGrid: React.ForwardRefExoticComponent<FeatureGridProps & React.RefAttributes<HTMLOListElement>>;
+
+export { FeatureGrid, type FeatureGridColumns, type FeatureGridItem, type FeatureGridLabels, type FeatureGridProps, type FeatureGridReveal };

package/dist/components/feature-grid/index.js

@@ -0,0 +1,2 @@
+import { FeatureGrid } from "./feature-grid.js";
+export { FeatureGrid };