@ratio-ui/core 0.2.0 → 0.3.0

package/dist/components/alert/Alert.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+/** The tone of an alert. Critical uses the question 1 tokens. */
+export type AlertTone = 'info' | 'success' | 'warning' | 'critical';
+/** The props of Alert: the HTML attributes of its div, except className, style, children and title. */
+export type AlertProps = Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children' | 'title'> & {
+  /** The tone. Defaults to info. */
+  tone?: AlertTone;
+  /** An optional bold first line. */
+  title?: ReactNode;
+  /** An optional second line. */
+  description?: ReactNode;
+  /** An optional action on the right, usually one Button. */
+  action?: ReactNode;
+  /** Receives the rendered div. */
+  ref?: Ref<HTMLDivElement>;
+};
+/** A message that stays in the page: a tone glyph, an optional title and description, and an optional action. */
+export declare function Alert({ tone, title, description, action, ref, ...rest }: AlertProps): JSX.Element;

package/dist/components/alert/Alert.js

@@ -0,0 +1,67 @@
+import { cn } from "../../lib/cn.js";
+import { Icon } from "../icon/Icon.js";
+import { Text } from "../text/Text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/alert/Alert.tsx
+const TONES = {
+	info: {
+		box: "rt:bg-primary-tint rt:border-primary-tint",
+		glyph: "rt:text-primary",
+		icon: "info-circle"
+	},
+	success: {
+		box: "rt:bg-success-tint rt:border-success-border",
+		glyph: "rt:text-success",
+		icon: "check"
+	},
+	warning: {
+		box: "rt:bg-warning-tint rt:border-warning-border",
+		glyph: "rt:text-warning",
+		icon: "alert-triangle"
+	},
+	critical: {
+		box: "rt:bg-alert-critical-background rt:border-alert-critical-border rt:text-alert-critical-foreground",
+		glyph: "rt:text-error-icon",
+		icon: "alert-triangle"
+	}
+};
+/** A message that stays in the page: a tone glyph, an optional title and description, and an optional action. */
+function Alert({ tone = "info", title, description, action, ref, ...rest }) {
+	const t = TONES[tone];
+	return /* @__PURE__ */ jsxs("div", {
+		role: tone === "warning" || tone === "critical" ? "alert" : "status",
+		"data-slot": "alert",
+		...rest,
+		ref,
+		"data-tone": tone,
+		className: cn("rt:flex rt:w-full rt:min-w-0 rt:items-start rt:gap-2 rt:rounded-lg rt:border rt:px-3 rt:py-2 rt:text-left rt:text-foreground", t.box),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("rt:mt-0.5 rt:shrink-0", t.glyph),
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: t.icon,
+					size: 16
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "rt:flex rt:min-w-0 rt:flex-1 rt:flex-col rt:gap-0.5",
+				children: [title ? /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					variant: "b4",
+					tone: tone === "critical" ? "inherit" : "default",
+					children: title
+				}) : null, description ? /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					tone: tone === "critical" ? "inherit" : "subdued",
+					children: description
+				}) : null]
+			}),
+			action ? /* @__PURE__ */ jsx("div", {
+				"data-slot": "alert-action",
+				className: "rt:shrink-0",
+				children: action
+			}) : null
+		]
+	});
+}
+export { Alert };

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

@@ -0,0 +1,2 @@
+import { Alert, AlertProps, AlertTone } from "./Alert.js";
+export { Alert, type AlertProps, type AlertTone };

package/dist/components/alert/index.js

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

package/dist/components/alert-dialog/AlertDialog.d.ts

@@ -0,0 +1,48 @@
+import { ButtonVariant } from "../button/Button.js";
+import "../button/index.js";
+import { ComponentProps, JSX } from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+/**
+ * The root of a confirmation. It holds the open state and renders nothing itself. Pass `open` and `onOpenChange` to
+ * control it, or `defaultOpen` to leave it uncontrolled. Escape closes it; a click outside does not.
+ */
+declare function AlertDialog$1(props: AlertDialog.Root.Props): JSX.Element;
+/** Props of AlertDialogTrigger. */
+export type AlertDialogTriggerProps = Omit<AlertDialog.Trigger.Props, 'className' | 'style'>;
+/** The button that opens the confirmation. */
+export declare function AlertDialogTrigger(props: AlertDialogTriggerProps): JSX.Element;
+/** Props of AlertDialogContent. */
+export type AlertDialogContentProps = Omit<AlertDialog.Popup.Props, 'className' | 'style'>;
+/**
+ * The panel: 480px wide, white, drawn with the ring outline and no shadow, with no scrim behind it. Put
+ * AlertDialogHeader and AlertDialogFooter inside.
+ */
+export declare function AlertDialogContent(props: AlertDialogContentProps): JSX.Element;
+/** Props of AlertDialogHeader. */
+export type AlertDialogHeaderProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The title and description, stacked. */
+export declare function AlertDialogHeader(props: AlertDialogHeaderProps): JSX.Element;
+/** Props of AlertDialogFooter. */
+export type AlertDialogFooterProps = Omit<ComponentProps<'div'>, 'className' | 'style'>;
+/** The row of actions at the bottom, aligned to the end. */
+export declare function AlertDialogFooter(props: AlertDialogFooterProps): JSX.Element;
+/** Props of AlertDialogTitle. */
+export type AlertDialogTitleProps = Omit<AlertDialog.Title.Props, 'className' | 'style'>;
+/** The question, in the b4 style. It names the dialog for assistive technology. */
+export declare function AlertDialogTitle(props: AlertDialogTitleProps): JSX.Element;
+/** Props of AlertDialogDescription. */
+export type AlertDialogDescriptionProps = Omit<AlertDialog.Description.Props, 'className' | 'style'>;
+/** What will happen, in subdued body text. */
+export declare function AlertDialogDescription(props: AlertDialogDescriptionProps): JSX.Element;
+/** Props of AlertDialogAction. */
+export interface AlertDialogActionProps extends Omit<AlertDialog.Close.Props, 'className' | 'style' | 'render'> {
+  /** The Button look. Defaults to destructive; use main for a confirmation that deletes nothing. */
+  variant?: Extract<ButtonVariant, 'destructive' | 'main'>;
+}
+/** The confirming button. It is the Button's destructive variant and closes the dialog after its onClick runs. */
+export declare function AlertDialogAction({ variant, ...props }: AlertDialogActionProps): JSX.Element;
+/** Props of AlertDialogCancel. */
+export type AlertDialogCancelProps = Omit<AlertDialog.Close.Props, 'className' | 'style' | 'render'>;
+/** The secondary button that closes the dialog without doing anything. */
+export declare function AlertDialogCancel(props: AlertDialogCancelProps): JSX.Element;
+export { AlertDialog$1 as AlertDialog };

package/dist/components/alert-dialog/AlertDialog.js

@@ -0,0 +1,76 @@
+import { Button } from "../button/Button.js";
+import { jsx } from "react/jsx-runtime";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+// src/components/alert-dialog/AlertDialog.tsx
+/**
+* The root of a confirmation. It holds the open state and renders nothing itself. Pass `open` and `onOpenChange` to
+* control it, or `defaultOpen` to leave it uncontrolled. Escape closes it; a click outside does not.
+*/
+function AlertDialog$1(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Root, { ...props });
+}
+/** The button that opens the confirmation. */
+function AlertDialogTrigger(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+/**
+* The panel: 480px wide, white, drawn with the ring outline and no shadow, with no scrim behind it. Put
+* AlertDialogHeader and AlertDialogFooter inside.
+*/
+function AlertDialogContent(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Portal, { children: /* @__PURE__ */ jsx(AlertDialog.Popup, {
+		"data-slot": "alert-dialog-content",
+		className: "rt:fixed rt:inset-0 rt:z-50 rt:m-auto rt:flex rt:h-fit rt:max-h-full rt:w-120 rt:max-w-full rt:overflow-y-auto rt:flex-col rt:gap-6 rt:rounded-lg rt:bg-popover rt:p-6 rt:text-b3 rt:text-popover-foreground rt:shadow-ring-strong rt:forced-outline rt:focus-visible:focus-ring",
+		...props
+	}) });
+}
+/** The title and description, stacked. */
+function AlertDialogHeader(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: "rt:flex rt:flex-col rt:gap-1",
+		...props
+	});
+}
+/** The row of actions at the bottom, aligned to the end. */
+function AlertDialogFooter(props) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: "rt:flex rt:items-center rt:justify-end rt:gap-2",
+		...props
+	});
+}
+/** The question, in the b4 style. It names the dialog for assistive technology. */
+function AlertDialogTitle(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		"data-slot": "alert-dialog-title",
+		className: "rt:text-b4 rt:text-foreground-strong",
+		...props
+	});
+}
+/** What will happen, in subdued body text. */
+function AlertDialogDescription(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		"data-slot": "alert-dialog-description",
+		className: "rt:text-b3 rt:text-foreground-subdued",
+		...props
+	});
+}
+/** The confirming button. It is the Button's destructive variant and closes the dialog after its onClick runs. */
+function AlertDialogAction({ variant = "destructive", ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		render: /* @__PURE__ */ jsx(Button, { variant }),
+		...props
+	});
+}
+/** The secondary button that closes the dialog without doing anything. */
+function AlertDialogCancel(props) {
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		render: /* @__PURE__ */ jsx(Button, { variant: "secondary" }),
+		...props
+	});
+}
+export { AlertDialog$1 as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/alert-dialog/index.d.ts

@@ -0,0 +1,2 @@
+import { AlertDialog, AlertDialogAction, AlertDialogActionProps, AlertDialogCancel, AlertDialogCancelProps, AlertDialogContent, AlertDialogContentProps, AlertDialogDescription, AlertDialogDescriptionProps, AlertDialogFooter, AlertDialogFooterProps, AlertDialogHeader, AlertDialogHeaderProps, AlertDialogTitle, AlertDialogTitleProps, AlertDialogTrigger, AlertDialogTriggerProps } from "./AlertDialog.js";
+export { AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps };

package/dist/components/alert-dialog/index.js

@@ -0,0 +1 @@
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "./AlertDialog.js";

package/dist/components/app-shell/AppShell.js

@@ -1,6 +1,6 @@
 import { ShellNavContext } from "./context.js";
-import { useId, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
 // src/components/app-shell/AppShell.tsx
 /**
 * The frame of every page: the side nav at the left, the top bar above and the content below it. It fills the height of its

package/dist/components/calendar/Calendar.d.ts

@@ -0,0 +1,20 @@
+import { JSX } from "react";
+import { DayPickerProps } from "react-day-picker";
+/** Omit for each member of a union, so the selection modes of DayPicker stay a discriminated union. */
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+/**
+ * Props of Calendar: DayPicker's props (mode, selected, onSelect, defaultMonth, month, today, disabled, startMonth,
+ * endMonth, numberOfMonths, showOutsideDays, locale, labels and the rest), without the ones that restyle it, replace its
+ * parts, change how a date is written or animate it: the calendar is drawn by the design system, dates are written by
+ * the format module and motion is a colour fade only.
+ */
+export type CalendarProps = DistributiveOmit<DayPickerProps, 'className' | 'style' | 'classNames' | 'styles' | 'modifiersClassNames' | 'modifiersStyles' | 'components' | 'formatters' | 'captionLayout' | 'animate' | 'showWeekNumber'>;
+/**
+ * A month grid to pick a day or a range of days, drawn by the design system: 28px days with a 6px radius, today in the
+ * accent ink, the selected day filled with the accent, a range as accent ends on a tinted band, disabled days at 50% and
+ * the days of the months around it in the muted ink. Every day is named in the format module's date order (28/10/2026).
+ * Arrow keys move between days and the previous and next buttons between months. It has no fill of its own, so it sits
+ * in a popover or a container as drawn.
+ */
+export declare function Calendar({ showOutsideDays, labels, ...props }: CalendarProps): JSX.Element;
+export {};

package/dist/components/calendar/Calendar.js

@@ -0,0 +1,119 @@
+import { Icon } from "../icon/Icon.js";
+import { Button } from "../button/Button.js";
+import { FORMAT, formatDate } from "../../lib/format.js";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { cva } from "class-variance-authority";
+import { DayPicker } from "react-day-picker";
+// src/components/calendar/Calendar.tsx
+const dayButtonVariants = cva("rt:flex rt:size-7 rt:items-center rt:justify-center rt:border-0 rt:p-0 rt:select-none rt:cursor-pointer rt:transition-colors rt:focus-visible:focus-ring rt:disabled:pointer-events-none rt:disabled:cursor-not-allowed rt:disabled:opacity-50", {
+	variants: { look: {
+		plain: "rt:rounded-md rt:bg-transparent rt:text-btn rt:text-foreground rt:hover:bg-muted rt:active:bg-muted",
+		today: "rt:rounded-md rt:bg-transparent rt:text-c3 rt:text-primary rt:hover:bg-muted rt:active:bg-muted",
+		outside: "rt:rounded-md rt:bg-transparent rt:text-btn rt:text-muted-foreground rt:hover:bg-muted rt:active:bg-muted",
+		selected: "rt:rounded-md rt:bg-primary rt:text-btn rt:text-primary-foreground rt:hover:bg-primary-hover rt:active:bg-primary-hover",
+		"range-middle": "rt:rounded-none rt:group-first:rounded-l-md rt:group-last:rounded-r-md rt:bg-primary-tint rt:text-btn rt:text-foreground"
+	} },
+	defaultVariants: { look: "plain" }
+});
+/** The look of a day from DayPicker's modifiers: a selection wins over outside, and outside over today. */
+function dayLook(modifiers) {
+	if (modifiers.range_middle) return "range-middle";
+	if (modifiers.selected) return "selected";
+	if (modifiers.outside) return "outside";
+	if (modifiers.today) return "today";
+	return "plain";
+}
+/**
+* The number in a day's button, written as the date pattern writes the day (two digits for DD), so the visible text is a
+* word of the button's name (WCAG 2.5.3): 03 in 03/10/2026.
+*/
+function formatDay(date) {
+	const day = String(date.getDate());
+	return FORMAT.datePattern.includes("DD") ? day.padStart(2, "0") : day;
+}
+/** A day as an accessible name, in the format module's date order: "Today, 28/10/2026, selected". */
+function labelDay(date, modifiers) {
+	return `${modifiers?.today ? "Today, " : ""}${formatDate(date)}${modifiers?.selected ? ", selected" : ""}`;
+}
+/**
+* The button of one day. DayPicker moves focus between days, so the button takes focus when its day is focused. Its look
+* comes after DayPicker's props, so it replaces DayPicker's class name.
+*/
+function CalendarDayButton({ day, modifiers, ...props }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		if (modifiers.focused) ref.current?.focus();
+	}, [modifiers.focused]);
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		...props,
+		"data-day": formatDate(day.date),
+		className: dayButtonVariants({ look: dayLook(modifiers) })
+	});
+}
+/** A month navigation button: the ghost Button with a chevron, disabled at the first or last allowed month. */
+function navButton(icon) {
+	return function CalendarNavButton({ onClick, tabIndex, "aria-label": label, "aria-disabled": ariaDisabled }) {
+		return /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			iconOnly: true,
+			"aria-label": label ?? "",
+			disabled: ariaDisabled === true || ariaDisabled === "true",
+			tabIndex,
+			onClick,
+			children: /* @__PURE__ */ jsx(Icon, {
+				name: icon,
+				size: 12
+			})
+		});
+	};
+}
+const PreviousMonthButton = navButton("chevron-left");
+const NextMonthButton = navButton("chevron-right");
+const CLASS_NAMES = {
+	root: "rt:relative rt:w-fit rt:p-2 rt:text-foreground",
+	months: "rt:relative rt:flex rt:flex-col rt:gap-4 rt:md:flex-row",
+	month: "rt:flex rt:w-full rt:flex-col rt:gap-2",
+	nav: "rt:absolute rt:inset-x-0 rt:top-0 rt:z-10 rt:flex rt:w-full rt:items-center rt:justify-between rt:gap-1",
+	month_caption: "rt:flex rt:h-7 rt:w-full rt:items-center rt:justify-center rt:px-7",
+	caption_label: "rt:text-c3 rt:text-foreground rt:select-none",
+	month_grid: "rt:w-full rt:border-collapse",
+	weekdays: "rt:flex",
+	weekday: "rt:flex rt:w-7 rt:items-center rt:justify-center rt:text-c1 rt:text-muted-foreground rt:select-none",
+	week: "rt:mt-1 rt:flex rt:w-full",
+	day: "rt:relative rt:size-7 rt:p-0 rt:text-center rt:select-none rt:first:rounded-l-md rt:last:rounded-r-md rt:group",
+	range_start: "rt:rounded-l-md rt:bg-primary-tint",
+	range_end: "rt:rounded-r-md rt:bg-primary-tint",
+	hidden: "rt:invisible",
+	footer: "rt:pt-2 rt:text-c1 rt:text-muted-foreground"
+};
+/**
+* A month grid to pick a day or a range of days, drawn by the design system: 28px days with a 6px radius, today in the
+* accent ink, the selected day filled with the accent, a range as accent ends on a tinted band, disabled days at 50% and
+* the days of the months around it in the muted ink. Every day is named in the format module's date order (28/10/2026).
+* Arrow keys move between days and the previous and next buttons between months. It has no fill of its own, so it sits
+* in a popover or a container as drawn.
+*/
+function Calendar({ showOutsideDays = true, labels, ...props }) {
+	return /* @__PURE__ */ jsx(DayPicker, {
+		"data-slot": "calendar",
+		showOutsideDays,
+		classNames: CLASS_NAMES,
+		components: {
+			DayButton: CalendarDayButton,
+			PreviousMonthButton,
+			NextMonthButton
+		},
+		formatters: { formatDay },
+		labels: {
+			labelDayButton: labelDay,
+			labelGridcell: labelDay,
+			labelPrevious: () => "Previous month",
+			labelNext: () => "Next month",
+			...labels
+		},
+		...props
+	});
+}
+export { Calendar };

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

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

package/dist/components/calendar/index.js

@@ -0,0 +1 @@
+export { Calendar } from "./Calendar.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/data-table/DataTable.js

@@ -2,8 +2,8 @@ import { Checkbox } from "../checkbox/Checkbox.js";
 import { RatioLink } from "../link-provider/RatioLink.js";
 import { Pagination } from "../pagination/Pagination.js";
 import { Table, TableBody, TableBox, TableCell, TableHead, TableHeader, TableRow } from "../table/Table.js";
-import { useMemo, useSyncExternalStore } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useSyncExternalStore } from "react";
 import { FlexRender, rowSelectionFeature, rowSortingFeature, tableFeatures, useTable } from "@tanstack/react-table";
 // src/components/data-table/DataTable.tsx
 const features = tableFeatures({