@ratio-ui/core 0.2.0 → 0.4.0

package/dist/components/chart/Chart.d.ts

@@ -0,0 +1,137 @@
+import { IconName } from "../icon/registry.js";
+import "../icon/index.js";
+import { HTMLAttributes, JSX, ReactElement, ReactNode } from "react";
+import * as RechartsPrimitive from "recharts";
+import { DefaultLegendContentProps, DefaultTooltipContentProps, TooltipValueType } from "recharts";
+type TooltipNameType = number | string;
+type TooltipContent = DefaultTooltipContentProps<TooltipValueType, TooltipNameType>;
+/**
+ * A chart colour token, in series order: chart-1 the accent blue, chart-2 the body ink, chart-3 the placeholder grey,
+ * chart-4 the accent tint and chart-5 the line grey. chart-4 and chart-5 sit below 3:1 on white, so draw them only
+ * beside a darker series or with a stroke.
+ */
+export type ChartColor = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5';
+/** How one series or category of a chart is named and coloured. */
+export interface ChartSeriesConfig {
+  /** The name the tooltip, the legend and the data table show for it. */
+  label?: ReactNode;
+  /** An icon drawn in place of its colour swatch in the tooltip and the legend. */
+  icon?: IconName;
+  /** The chart token it is drawn in. Pass the same token to the series with chartColor. */
+  color?: ChartColor;
+}
+/** The series and categories of a chart, by data key. */
+export type ChartConfig = Record<string, ChartSeriesConfig>;
+/**
+ * The value a Recharts fill or stroke takes for a chart token, such as var(--rt-chart-1). Series are coloured only from
+ * these tokens.
+ */
+export declare function chartColor(color: ChartColor): string;
+/** The rows a chart offers assistive technology as a table, beside the drawing. */
+export interface ChartTable {
+  /** The rows of the chart, as passed to its data prop. */
+  data: ReadonlyArray<Record<string, unknown>>;
+  /** The key of each row's label, such as the day on the x axis: the table's first column. A Date is written as a date. */
+  labelKey: string;
+  /** Writes each number of the series, such as formatMoney for sales. Defaults to a count. */
+  formatValue?: (value: number) => string;
+}
+/** A chart needs a summary: a description, a data table, or both. */
+type ChartSummary = {
+  /** One sentence on what the chart shows, read after its name, such as "Sales peak on Tuesday". */
+  description: string;
+  /** The chart's rows as a visually hidden table, for assistive technology. */
+  table?: ChartTable;
+} | {
+  /** One sentence on what the chart shows, read after its name, such as "Sales peak on Tuesday". */
+  description?: string;
+  /** The chart's rows as a visually hidden table, for assistive technology. */
+  table: ChartTable;
+};
+/** How a chart takes its size: 16:9 or square at the full width, or the full size of its parent. */
+export type ChartAspect = 'video' | 'square' | 'fill';
+/**
+ * The props of Chart: the HTML attributes of its div, except className, style and children, with the config, the
+ * accessible name and summary, and one Recharts chart.
+ */
+export type ChartProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'> & ChartSummary & {
+  /** The series and categories, by data key: their labels, icons and chart tokens. */
+  config: ChartConfig;
+  /** The chart's accessible name, such as "Sales by day". */
+  label: string;
+  /** The size: video (16:9, the default) or square at the full width, or fill to take the parent's size. */
+  aspect?: ChartAspect;
+  /** The size the chart is drawn at before it measures its box. Defaults to 320 by 200. */
+  initialDimension?: {
+    width: number;
+    height: number;
+  };
+  /** One Recharts chart, such as a BarChart or a LineChart, whose series pass isAnimationActive false. */
+  children: ReactElement;
+};
+/**
+ * A chart on Recharts, drawn with the chart tokens. It holds the config the tooltip and legend read, styles Recharts'
+ * ticks, grid and cursor with the tokens, and is a figure named by its label and summarised by a description, a visually
+ * hidden data table, or both. Motion is colour fades only, so every series passes isAnimationActive false.
+ */
+export declare function Chart({ config, label, description, table, aspect, initialDimension, children, ...rest }: ChartProps): JSX.Element;
+/**
+ * The props of ChartTooltip: Recharts' Tooltip props, except its style and class name props. Its content defaults to
+ * ChartTooltipContent; it never animates.
+ */
+export type ChartTooltipProps = Omit<RechartsPrimitive.TooltipProps<TooltipValueType, TooltipNameType>, 'wrapperStyle' | 'contentStyle' | 'itemStyle' | 'labelStyle' | 'wrapperClassName' | 'labelClassName' | 'cursor'> & {
+  /** Shows the cursor line or band under the pointer. On or off: Recharts' SVG props would carry a class name and a style. */
+  cursor?: boolean;
+};
+/** The chart's tooltip: Recharts' Tooltip, still (no movement), drawing ChartTooltipContent unless given other content. */
+export declare function ChartTooltip({ content, ...props }: ChartTooltipProps): JSX.Element;
+/** The props of ChartTooltipContent. The tooltip sets active, payload and label; the rest choose what it shows. */
+export interface ChartTooltipContentProps {
+  /** Set by the tooltip: whether a point is active. */
+  active?: boolean;
+  /** Set by the tooltip: the values of the series at the active point. */
+  payload?: TooltipContent['payload'];
+  /** Set by the tooltip: the active point's label, such as its x-axis category. */
+  label?: TooltipContent['label'];
+  /** Writes the label from it and the payload. */
+  labelFormatter?: TooltipContent['labelFormatter'];
+  /** Draws a whole row, in place of the swatch, name and value, from the value, name, item, index and payload. */
+  formatter?: TooltipContent['formatter'];
+  /** The swatch: a dot (the default), a line or a dashed line. */
+  indicator?: 'dot' | 'line' | 'dashed';
+  /** Leaves out the label. */
+  hideLabel?: boolean;
+  /** Leaves out the swatches. */
+  hideIndicator?: boolean;
+  /** The key of the item, or its data row, whose value names the config entry of a row. */
+  nameKey?: string;
+  /** The key whose config entry labels the tooltip, in place of the active point's label. */
+  labelKey?: string;
+  /** One chart token for every swatch, in place of each series' own. */
+  color?: ChartColor;
+  /** Writes a number for its series, such as formatMoney for sales. Defaults to a count. */
+  formatValue?: (value: number) => string;
+}
+/**
+ * The box a chart tooltip draws: the active point's label, then a row per series with its swatch, its config label and
+ * its value, a count unless formatValue writes it. A 1px border on white, no shadow.
+ */
+export declare function ChartTooltipContent({ active, payload, label, labelFormatter, formatter, indicator, hideLabel, hideIndicator, nameKey, labelKey, color, formatValue }: ChartTooltipContentProps): JSX.Element | null;
+/** The props of ChartLegend: Recharts' Legend props, except its style props. Its content defaults to ChartLegendContent. */
+export type ChartLegendProps = Omit<RechartsPrimitive.LegendProps, 'wrapperStyle' | 'labelStyle'>;
+/** The chart's legend: Recharts' Legend, drawing ChartLegendContent unless given other content. */
+export declare function ChartLegend({ content, ...props }: ChartLegendProps): JSX.Element;
+/** The props of ChartLegendContent. The legend sets payload and verticalAlign; the rest choose what it shows. */
+export interface ChartLegendContentProps {
+  /** Set by the legend: its series. */
+  payload?: DefaultLegendContentProps['payload'];
+  /** Set by the legend: whether it sits above or below the chart, which sets the side of its gap. */
+  verticalAlign?: DefaultLegendContentProps['verticalAlign'];
+  /** Draws the swatch even where the config gives an icon. */
+  hideIcon?: boolean;
+  /** The key of the item whose value names the config entry of a series. */
+  nameKey?: string;
+}
+/** The row a chart legend draws: a swatch in each series' chart token, or its icon, and its config label. */
+export declare function ChartLegendContent({ payload, verticalAlign, hideIcon, nameKey }: ChartLegendContentProps): JSX.Element | null;
+export {};

package/dist/components/chart/Chart.js

@@ -0,0 +1,238 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { formatCount, formatDate } from "../../lib/format.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, use, useId, useMemo } from "react";
+import * as RechartsPrimitive from "recharts";
+// src/components/chart/Chart.tsx
+/**
+* The value a Recharts fill or stroke takes for a chart token, such as var(--rt-chart-1). Series are coloured only from
+* these tokens.
+*/
+function chartColor(color) {
+	return `var(--rt-${color})`;
+}
+/** The swatch classes of each token: a fill for the dot and line indicators, a border for the dashed one. */
+const SWATCH = {
+	"chart-1": {
+		fill: "rt:bg-chart-1",
+		border: "rt:border-chart-1"
+	},
+	"chart-2": {
+		fill: "rt:bg-chart-2",
+		border: "rt:border-chart-2"
+	},
+	"chart-3": {
+		fill: "rt:bg-chart-3",
+		border: "rt:border-chart-3"
+	},
+	"chart-4": {
+		fill: "rt:bg-chart-4",
+		border: "rt:border-chart-4"
+	},
+	"chart-5": {
+		fill: "rt:bg-chart-5",
+		border: "rt:border-chart-5"
+	}
+};
+/** The swatch classes of a series whose token is not known: the muted ink. */
+const UNKNOWN_SWATCH = {
+	fill: "rt:bg-muted-foreground",
+	border: "rt:border-muted-foreground"
+};
+const TOKEN_VALUE = /var\(--rt-(chart-[1-5])\)/;
+/** The chart token a Recharts colour names, when it was written with chartColor. */
+function tokenOf(value) {
+	const match = typeof value === "string" ? TOKEN_VALUE.exec(value) : null;
+	return match ? match[1] : void 0;
+}
+const ChartContext = createContext(null);
+function useChart() {
+	const context = use(ChartContext);
+	if (!context) throw new Error("useChart must be used within a <Chart />");
+	return context;
+}
+const INITIAL_DIMENSION = {
+	width: 320,
+	height: 200
+};
+const ASPECT = {
+	video: "rt:aspect-video rt:w-full",
+	square: "rt:aspect-square rt:w-full",
+	fill: "rt:size-full"
+};
+function cellText(value, formatValue = formatCount) {
+	if (typeof value === "number") return formatValue(value);
+	if (value instanceof Date) return formatDate(value);
+	return typeof value === "string" ? value : "";
+}
+function ChartDataTable({ label, config, table }) {
+	const { data, labelKey, formatValue } = table;
+	const keys = Object.keys(config).filter((key) => key !== labelKey && data.some((row) => key in row));
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chart-table",
+		className: "rt:sr-only",
+		children: /* @__PURE__ */ jsxs("table", { children: [
+			/* @__PURE__ */ jsx("caption", { children: label }),
+			/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+				scope: "col",
+				children: config[labelKey]?.label ?? labelKey
+			}), keys.map((key) => /* @__PURE__ */ jsx("th", {
+				scope: "col",
+				children: config[key]?.label ?? key
+			}, key))] }) }),
+			/* @__PURE__ */ jsx("tbody", { children: data.map((row) => /* @__PURE__ */ jsxs("tr", { children: [/* @__PURE__ */ jsx("th", {
+				scope: "row",
+				children: cellText(row[labelKey])
+			}), keys.map((key) => /* @__PURE__ */ jsx("td", { children: cellText(row[key], formatValue) }, key))] }, cellText(row[labelKey]))) })
+		] })
+	});
+}
+/**
+* A chart on Recharts, drawn with the chart tokens. It holds the config the tooltip and legend read, styles Recharts'
+* ticks, grid and cursor with the tokens, and is a figure named by its label and summarised by a description, a visually
+* hidden data table, or both. Motion is colour fades only, so every series passes isAnimationActive false.
+*/
+function Chart({ config, label, description, table, aspect = "video", initialDimension = INITIAL_DIMENSION, children, ...rest }) {
+	const descriptionId = `${useId()}-description`;
+	const value = useMemo(() => ({ config }), [config]);
+	return /* @__PURE__ */ jsx(ChartContext, {
+		value,
+		children: /* @__PURE__ */ jsxs("div", {
+			...rest,
+			"data-slot": "chart",
+			role: "figure",
+			"aria-label": label,
+			"aria-describedby": description ? descriptionId : void 0,
+			className: cn("rt:recharts rt:relative rt:flex rt:justify-center rt:text-c1 rt:text-foreground", ASPECT[aspect]),
+			children: [
+				description ? /* @__PURE__ */ jsx("p", {
+					id: descriptionId,
+					hidden: true,
+					children: description
+				}) : null,
+				table ? /* @__PURE__ */ jsx(ChartDataTable, {
+					label,
+					config,
+					table
+				}) : null,
+				/* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, {
+					initialDimension,
+					children
+				})
+			]
+		})
+	});
+}
+/** The config entry of a tooltip or legend item: by the item's name key, else by the key itself. */
+function configOf(config, payload, key) {
+	if (typeof payload !== "object" || payload === null) return;
+	const row = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+	let configKey = key;
+	if (key in payload && typeof payload[key] === "string") configKey = payload[key];
+	else if (row && key in row && typeof row[key] === "string") configKey = row[key];
+	return configKey in config ? config[configKey] : config[key];
+}
+/** The chart's tooltip: Recharts' Tooltip, still (no movement), drawing ChartTooltipContent unless given other content. */
+function ChartTooltip({ content = /* @__PURE__ */ jsx(ChartTooltipContent, {}), ...props }) {
+	return /* @__PURE__ */ jsx(RechartsPrimitive.Tooltip, {
+		content,
+		...props,
+		isAnimationActive: false
+	});
+}
+/** The swatch of a tooltip or legend item, in its chart token. */
+function Swatch({ color, indicator, nested }) {
+	const tone = color ? SWATCH[color] : UNKNOWN_SWATCH;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chart-swatch",
+		className: cn("rt:shrink-0 rt:rounded-sm", indicator === "dot" && cn("rt:size-2.5", tone.fill), indicator === "line" && cn("rt:w-1", tone.fill), indicator === "dashed" && cn("rt:w-0 rt:border-2 rt:border-dashed rt:bg-transparent", tone.border), nested && indicator === "dashed" && "rt:my-0.5")
+	});
+}
+/**
+* The box a chart tooltip draws: the active point's label, then a row per series with its swatch, its config label and
+* its value, a count unless formatValue writes it. A 1px border on white, no shadow.
+*/
+function ChartTooltipContent({ active, payload, label, labelFormatter, formatter, indicator = "dot", hideLabel = false, hideIndicator = false, nameKey, labelKey, color, formatValue = formatCount }) {
+	const { config } = useChart();
+	if (!active || !payload?.length) return null;
+	const tooltipLabel = (() => {
+		if (hideLabel) return null;
+		const [item] = payload;
+		const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`;
+		const itemConfig = configOf(config, item, key);
+		const value = !labelKey && typeof label === "string" ? config[label]?.label ?? label : itemConfig?.label;
+		const text = labelFormatter ? labelFormatter(value, payload) : value;
+		return text ? /* @__PURE__ */ jsx("div", {
+			className: "rt:text-c2",
+			children: text
+		}) : null;
+	})();
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chart-tooltip",
+		className: "rt:grid rt:min-w-32 rt:items-start rt:gap-1.5 rt:rounded-lg rt:border rt:border-border rt:bg-background rt:px-3 rt:py-1.5 rt:text-c1 rt:text-foreground",
+		children: [nestLabel ? null : tooltipLabel, /* @__PURE__ */ jsx("div", {
+			className: "rt:grid rt:gap-1.5",
+			children: payload.filter((item) => item.type !== "none").map((item, index) => {
+				const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`;
+				const itemConfig = configOf(config, item, key);
+				const tone = color ?? itemConfig?.color ?? tokenOf(item.payload?.fill) ?? tokenOf(item.color);
+				return /* @__PURE__ */ jsx("div", {
+					className: cn("rt:flex rt:w-full rt:flex-wrap rt:items-stretch rt:gap-2", indicator === "dot" && "rt:items-center"),
+					children: formatter && item.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, payload) : /* @__PURE__ */ jsxs(Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ jsx(Icon, {
+						name: itemConfig.icon,
+						tone: "subdued"
+					}) : hideIndicator ? null : /* @__PURE__ */ jsx(Swatch, {
+						color: tone,
+						indicator,
+						nested: nestLabel
+					}), /* @__PURE__ */ jsxs("div", {
+						className: cn("rt:flex rt:flex-1 rt:justify-between rt:gap-2", nestLabel ? "rt:items-end" : "rt:items-center"),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "rt:grid rt:gap-1.5",
+							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ jsx("span", {
+								className: "rt:text-muted-foreground",
+								children: itemConfig?.label ?? item.name
+							})]
+						}), item.value != null ? /* @__PURE__ */ jsx("span", {
+							className: "rt:text-c2 rt:text-foreground rt:tabular-nums",
+							children: typeof item.value === "number" ? formatValue(item.value) : String(item.value)
+						}) : null]
+					})] })
+				}, key);
+			})
+		})]
+	});
+}
+/** The chart's legend: Recharts' Legend, drawing ChartLegendContent unless given other content. */
+function ChartLegend({ content = /* @__PURE__ */ jsx(ChartLegendContent, {}), ...props }) {
+	return /* @__PURE__ */ jsx(RechartsPrimitive.Legend, {
+		content,
+		...props
+	});
+}
+/** The row a chart legend draws: a swatch in each series' chart token, or its icon, and its config label. */
+function ChartLegendContent({ payload, verticalAlign = "bottom", hideIcon = false, nameKey }) {
+	const { config } = useChart();
+	if (!payload?.length) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "chart-legend",
+		className: cn("rt:flex rt:items-center rt:justify-center rt:gap-3", verticalAlign === "top" ? "rt:pb-3" : "rt:pt-3"),
+		children: payload.filter((item) => item.type !== "none").map((item) => {
+			const key = `${nameKey ?? item.dataKey ?? "value"}`;
+			const itemConfig = configOf(config, item, key);
+			return /* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:items-center rt:gap-1.5",
+				children: [itemConfig?.icon && !hideIcon ? /* @__PURE__ */ jsx(Icon, {
+					name: itemConfig.icon,
+					tone: "subdued"
+				}) : /* @__PURE__ */ jsx("div", {
+					"data-slot": "chart-swatch",
+					className: cn("rt:size-2 rt:shrink-0 rt:rounded-sm", (SWATCH[itemConfig?.color ?? tokenOf(item.color) ?? "none"] ?? UNKNOWN_SWATCH).fill)
+				}), itemConfig?.label ?? item.value]
+			}, key);
+		})
+	});
+}
+export { Chart, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, chartColor };

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

@@ -0,0 +1,2 @@
+import { Chart, ChartAspect, ChartColor, ChartConfig, ChartLegend, ChartLegendContent, ChartLegendContentProps, ChartLegendProps, ChartProps, ChartSeriesConfig, ChartTable, ChartTooltip, ChartTooltipContent, ChartTooltipContentProps, ChartTooltipProps, chartColor } from "./Chart.js";
+export { Chart, type ChartAspect, type ChartColor, type ChartConfig, ChartLegend, ChartLegendContent, type ChartLegendContentProps, type ChartLegendProps, type ChartProps, type ChartSeriesConfig, type ChartTable, ChartTooltip, ChartTooltipContent, type ChartTooltipContentProps, type ChartTooltipProps, chartColor };

package/dist/components/chart/index.js

@@ -0,0 +1 @@
+export { Chart, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, chartColor } from "./Chart.js";

package/dist/components/checkbox-list/CheckboxList.d.ts

@@ -0,0 +1,36 @@
+import { HTMLAttributes, JSX } from "react";
+/** One option in a CheckboxList. */
+export type CheckboxListItem = {
+  /** The value reported in the list of chosen values. */
+  value: string;
+  /** The label beside the box. */
+  label: string;
+  /** An optional line under the label. */
+  description?: string;
+  /** Stops this item being toggled, and select-all leaves it as it is. */
+  disabled?: boolean;
+};
+/** The props of CheckboxList. */
+export type CheckboxListProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'title' | 'onChange' | 'defaultValue'> & {
+  /** The heading. The count of chosen items sits beside it. */
+  title: string;
+  /** The options. */
+  items: CheckboxListItem[];
+  /** The chosen values, when controlled. */
+  value?: string[];
+  /** The chosen values to start with, when not controlled. */
+  defaultValue?: string[];
+  /** Called with the new list of chosen values. */
+  onValueChange?: (value: string[]) => void;
+  /** Adds a "Select all" box that is mixed while only some are chosen. */
+  selectAll?: boolean;
+  /** The label of the select-all box. Defaults to "Select all". */
+  selectAllLabel?: string;
+  /** Writes the count in the heading from the chosen and total counts, already formatted. Defaults to "4 of 6". */
+  countLabel?: (chosen: string, total: string) => string;
+};
+/**
+ * A titled list of checkboxes with the count of chosen items in the heading ("4 of 6"), an optional description under
+ * each label and an optional select-all.
+ */
+export declare function CheckboxList({ title, items, value, defaultValue, onValueChange, selectAll, selectAllLabel, countLabel, ...rest }: CheckboxListProps): JSX.Element;

package/dist/components/checkbox-list/CheckboxList.js

@@ -0,0 +1,93 @@
+import { formatCount } from "../../lib/format.js";
+import { Checkbox } from "../checkbox/Checkbox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+// src/components/checkbox-list/CheckboxList.tsx
+/**
+* A titled list of checkboxes with the count of chosen items in the heading ("4 of 6"), an optional description under
+* each label and an optional select-all.
+*/
+function CheckboxList({ title, items, value, defaultValue, onValueChange, selectAll, selectAllLabel = "Select all", countLabel = (c, t) => `${c} of ${t}`, ...rest }) {
+	const [inner, setInner] = useState(defaultValue ?? []);
+	const chosen = value ?? inner;
+	const baseId = useId();
+	const set = (next) => {
+		if (value === void 0) setInner(next);
+		onValueChange?.(next);
+	};
+	const chosenCount = items.filter((i) => chosen.includes(i.value)).length;
+	const toggleable = items.filter((i) => !i.disabled);
+	const allOn = toggleable.length > 0 && toggleable.every((i) => chosen.includes(i.value));
+	const someOn = chosenCount > 0;
+	const toggleAll = () => {
+		const locked = chosen.filter((v) => !toggleable.some((i) => i.value === v));
+		set(allOn ? locked : [...locked, ...toggleable.map((i) => i.value)]);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "checkbox-list",
+		role: "group",
+		"aria-labelledby": `${baseId}-title`,
+		...rest,
+		className: "rt:flex rt:flex-col rt:gap-3",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "rt:flex rt:items-baseline rt:justify-between rt:gap-3",
+				children: /* @__PURE__ */ jsxs("span", {
+					id: `${baseId}-title`,
+					className: "rt:text-b4 rt:text-foreground",
+					children: [title, /* @__PURE__ */ jsx("span", {
+						"data-slot": "checkbox-list-count",
+						className: "rt:ml-2 rt:text-b3 rt:text-foreground-subdued",
+						children: countLabel(formatCount(chosenCount), formatCount(items.length))
+					})]
+				})
+			}),
+			selectAll ? /* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:items-center rt:gap-2",
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					id: `${baseId}-all`,
+					checked: allOn,
+					indeterminate: someOn && !allOn,
+					onCheckedChange: toggleAll,
+					disabled: toggleable.length === 0,
+					"aria-label": selectAllLabel
+				}), /* @__PURE__ */ jsx("label", {
+					htmlFor: `${baseId}-all`,
+					className: "rt:cursor-pointer rt:text-b3 rt:text-foreground",
+					children: selectAllLabel
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("ul", {
+				className: "rt:flex rt:flex-col rt:gap-3",
+				children: items.map((item, index) => {
+					const id = `${baseId}-${index}`;
+					return /* @__PURE__ */ jsxs("li", {
+						className: "rt:flex rt:items-start rt:gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "rt:mt-0.5 rt:flex",
+							children: /* @__PURE__ */ jsx(Checkbox, {
+								id,
+								"aria-labelledby": `${id}-label`,
+								disabled: item.disabled,
+								checked: chosen.includes(item.value),
+								onCheckedChange: (on) => set(on ? [...chosen, item.value] : chosen.filter((v) => v !== item.value))
+							})
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "rt:flex rt:flex-col",
+							children: [/* @__PURE__ */ jsx("label", {
+								id: `${id}-label`,
+								htmlFor: id,
+								className: "rt:cursor-pointer rt:text-b3 rt:text-foreground",
+								children: item.label
+							}), item.description ? /* @__PURE__ */ jsx("span", {
+								className: "rt:text-b3 rt:text-foreground-subdued",
+								children: item.description
+							}) : null]
+						})]
+					}, item.value);
+				})
+			})
+		]
+	});
+}
+export { CheckboxList };

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

@@ -0,0 +1,2 @@
+import { CheckboxList, CheckboxListItem, CheckboxListProps } from "./CheckboxList.js";
+export { CheckboxList, type CheckboxListItem, type CheckboxListProps };

package/dist/components/checkbox-list/index.js

@@ -0,0 +1 @@
+export { CheckboxList } from "./CheckboxList.js";

package/dist/components/collapsible/Collapsible.d.ts

@@ -0,0 +1,24 @@
+import { SummaryChip } from "../summary-chips/SummaryChips.js";
+import "../summary-chips/index.js";
+import { JSX, ReactNode, Ref } from "react";
+/** The props of Collapsible. */
+export interface CollapsibleProps {
+  /** The section heading, shown on the trigger. */
+  title: string;
+  /** The values to show as chips while the section is closed. */
+  summary?: readonly SummaryChip[];
+  /** Whether the section is open, when controlled. */
+  open?: boolean;
+  /** Whether the section starts open, when uncontrolled. Defaults to closed. */
+  defaultOpen?: boolean;
+  /** Called when the section opens or closes. */
+  onOpenChange?: (open: boolean) => void;
+  /** Stops the section from opening or closing. */
+  disabled?: boolean;
+  /** The section's content, shown when open. */
+  children: ReactNode;
+  /** Receives the rendered root. */
+  ref?: Ref<HTMLDivElement>;
+}
+/** A section that opens and closes on its heading and, while closed, still shows its values as chips. The panel appears and disappears with no height animation. */
+export declare function Collapsible({ title, summary, open: openProp, defaultOpen, onOpenChange, disabled, children, ref }: CollapsibleProps): JSX.Element;

package/dist/components/collapsible/Collapsible.js

@@ -0,0 +1,58 @@
+import { Icon } from "../icon/Icon.js";
+import { SummaryChips } from "../summary-chips/SummaryChips.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Collapsible } from "@base-ui/react/collapsible";
+// src/components/collapsible/Collapsible.tsx
+/** A section that opens and closes on its heading and, while closed, still shows its values as chips. The panel appears and disappears with no height animation. */
+function Collapsible$1({ title, summary, open: openProp, defaultOpen = false, onOpenChange, disabled, children, ref }) {
+	const [inner, setInner] = useState(defaultOpen);
+	const open = openProp ?? inner;
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		ref,
+		open,
+		onOpenChange: (next) => {
+			setInner(next);
+			onOpenChange?.(next);
+		},
+		disabled,
+		className: "rt:flex rt:flex-col rt:gap-2",
+		children: [
+			/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+				className: "rt:group rt:flex rt:h-7 rt:w-full rt:cursor-pointer rt:items-center rt:gap-2 rt:rounded-md rt:border-0 rt:bg-transparent rt:p-0 rt:text-left rt:text-b3 rt:text-foreground rt:transition-colors rt:focus-visible:focus-ring rt:disabled:cursor-not-allowed rt:disabled:opacity-50 rt:data-disabled:opacity-50",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "rt:group-data-panel-open:hidden",
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "chevron-right",
+							size: 8
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "rt:hidden rt:group-data-panel-open:inline",
+						children: /* @__PURE__ */ jsx(Icon, {
+							name: "nav-caret-down",
+							size: 8
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "rt:text-c2",
+						children: title
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Collapsible.Panel, {
+				className: "rt:flex rt:flex-col rt:gap-2",
+				children
+			}),
+			!open && summary ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "collapsible-summary",
+				children: /* @__PURE__ */ jsx(SummaryChips, {
+					items: summary,
+					"aria-label": `${title} summary`
+				})
+			}) : null
+		]
+	});
+}
+export { Collapsible$1 as Collapsible };

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

@@ -0,0 +1,2 @@
+import { Collapsible, CollapsibleProps } from "./Collapsible.js";
+export { Collapsible, type CollapsibleProps };

package/dist/components/collapsible/index.js

@@ -0,0 +1 @@
+export { Collapsible } from "./Collapsible.js";

package/dist/components/combobox/Combobox.d.ts

@@ -0,0 +1,52 @@
+import { JSX, Ref } from "react";
+import { Combobox } from "@base-ui/react/combobox";
+/** One option: the value that is stored and the text people see. A plain string stands for both. */
+export type ComboboxItem = string | {
+  value: string;
+  label: string;
+};
+/** The props of Combobox: one choice from a list, with a search field. */
+export type ComboboxProps = {
+  /** The options. Strings or { value, label } objects. */
+  items: readonly ComboboxItem[];
+  /** The chosen value for a controlled combobox, or null for none. */
+  value?: string | null;
+  /** The value to start with when the combobox keeps its own state. */
+  defaultValue?: string | null;
+  /** Called with the new value, or null when the choice is cleared. */
+  onValueChange?: (value: string | null, eventDetails: Combobox.Root.ChangeEventDetails) => void;
+  /** The text shown while nothing is chosen. */
+  placeholder?: string;
+  /** The text shown when the search matches no option. Defaults to "No results found". */
+  emptyText?: string;
+  /** Marks the field invalid and draws the error ring, as on every form control. Field sets it when it shows an error. */
+  'aria-invalid'?: boolean | 'true' | 'false';
+  /** The same as aria-invalid, kept as its alias. */
+  invalid?: boolean;
+  /** Shows a button that clears the choice while one is made. Defaults to true. */
+  clearable?: boolean;
+  /** Stops people from changing the choice. */
+  disabled?: boolean;
+  /** The name of the field in a form. */
+  name?: string;
+  /** The accessible name when no label is wired to the field. */
+  'aria-label'?: string;
+  /** The ids of the elements that name the field. Field sets it to its label. */
+  'aria-labelledby'?: string;
+  /** The ids of the elements that describe the field, such as its hint or error. Field sets it. */
+  'aria-describedby'?: string;
+  /** Tells assistive technology that the field must be filled. Field sets it for a required field. */
+  'aria-required'?: boolean | 'true' | 'false';
+  /** The id of the input, for a label's htmlFor. */
+  id?: string;
+  /** Receives the input element. */
+  ref?: Ref<HTMLInputElement>;
+};
+/**
+ * A field to choose one option from a list, with a search: type to narrow the list, pick with the mouse or Enter.
+ * The field looks like an Input and the list like a Popover panel. For several choices shown as chips, use TagInput.
+ * Mark it invalid with aria-invalid; give the list an empty text with emptyText. Inside a Field, the label, hint, error
+ * and required mark reach the input.
+ */
+declare function Combobox$1({ items, value, defaultValue, onValueChange, placeholder, emptyText, 'aria-invalid': ariaInvalid, invalid, clearable, disabled, name, id, ref, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-required': ariaRequired }: ComboboxProps): JSX.Element;
+export { Combobox$1 as Combobox };