@delacour/react-native-ui 0.1.0-alpha.4 → 0.2.0-alpha.20261010061731

package/src/components/toast/toast.variants.ts

@@ -0,0 +1,304 @@
+import type { VariantProps } from "tailwind-variants";
+import { tv } from "../../lib/tv";
+import { ALERT_FOREGROUND_TOKEN, ALERT_STATUSES, type AlertStatus } from "../alert/alert.variants";
+import type { HapticFeedback } from "../pressable/pressable";
+
+/** Alert's statuses, the same tuple — a toast and an alert saying the same thing look like one family. */
+export const TOAST_STATUSES = ALERT_STATUSES;
+
+/** Alert's glyph and title colour per status — the same map, so the two cannot drift. */
+export const TOAST_FOREGROUND_TOKEN = ALERT_FOREGROUND_TOKEN;
+
+export const TOAST_PLACEMENTS = ["top", "bottom"] as const;
+
+type Status = AlertStatus;
+type Placement = (typeof TOAST_PLACEMENTS)[number];
+
+/**
+ * How long a toast stays, in milliseconds.
+ *
+ * An action buys two more seconds, because reading and then reaching for a
+ * button takes longer than reading. Under a screen reader nothing timed leaves
+ * sooner than ten seconds: a message has to be read out in full before it goes
+ * (WCAG 2.2.1, timing adjustable).
+ */
+export const TOAST_DURATION = {
+	default: 4000,
+	withAction: 6000,
+	screenReaderMinimum: 10_000,
+} as const;
+
+/** How the stack recedes: three drawn, each older one 8pt toward the edge, 5% smaller and 25% fainter. */
+export const TOAST_STACK = {
+	maxVisible: 3,
+	depthOffset: 8,
+	depthScale: 0.05,
+	depthOpacity: 0.25,
+} as const;
+
+/** How far a toast travels in from its edge, in points, while it fades in. */
+export const TOAST_ENTER_DISTANCE = 16;
+
+/** The gap between entrances when several toasts are shown in one tick. */
+export const TOAST_STAGGER_MS = 220;
+
+/** What turns a drag into a dismissal: 40% of the toast's own extent, or a fling over 800pt/s. */
+export const TOAST_SWIPE = {
+	distanceRatio: 0.4,
+	velocity: 800,
+} as const;
+
+/** The furthest a toast follows a drag toward the centre, in points. */
+export const TOAST_RUBBER_BAND = 24;
+
+/**
+ * Styling for every part of a toast, and for the viewport that stacks them.
+ *
+ * The card is a `popover` surface with the card corner and a hairline — no
+ * shadow, like every surface here; the hairline is its edge over the app.
+ * `max-w-[560px]` keeps it a toast on a tablet, centred by the `item` slot
+ * that positions it.
+ *
+ * `items-start`, with the indicator as tall as the title's line, so the glyph
+ * stays level with the first line however far the description wraps; the
+ * action and the close control centre themselves on the whole card.
+ *
+ * The title takes Alert's foreground token for its status — written out, not
+ * built from the map, because Tailwind's scanner is static. A test pins each
+ * class to `ALERT_FOREGROUND_TOKEN`. The root holds no `text-*` (rule 1).
+ *
+ * Free of React Native imports so it stays unit-testable.
+ */
+export const toastVariants = tv({
+	slots: {
+		viewport: "absolute inset-0",
+		stack: "absolute inset-0",
+		item: "absolute inset-x-0 items-center px-3",
+		root: "w-full max-w-[560px] flex-row items-start gap-3 rounded-lg border border-border bg-popover px-4 py-3",
+		indicator: "h-5 items-center justify-center",
+		content: "min-w-0 flex-1 gap-0.5",
+		title: "font-semibold text-sm",
+		description: "text-muted-foreground text-sm",
+		action: "-my-1 h-8 items-center justify-center self-center rounded-md px-2",
+		actionLabel: "font-semibold text-primary text-sm",
+		close: "size-5 items-center justify-center self-center rounded-full",
+		/** Edge length an `Icon` composed into the toast inherits. */
+		icon: "size-icon-md",
+	},
+	variants: {
+		status: {
+			default: { title: "text-foreground" },
+			info: { title: "text-info-soft-foreground" },
+			success: { title: "text-success-soft-foreground" },
+			warning: { title: "text-warning-soft-foreground" },
+			destructive: { title: "text-destructive-soft-foreground" },
+		},
+	},
+	defaultVariants: {
+		status: "default",
+	},
+});
+
+export type ToastVariantProps = VariantProps<typeof toastVariants>;
+
+/**
+ * How long a toast stays, in ms; `0` stays until hidden.
+ *
+ * An explicit, sane `duration` wins. Without one a loading toast stays until
+ * it is updated, one with an action gets 6000 and anything else 4000. Under a
+ * screen reader a timed toast is stretched to at least 10000.
+ */
+export function resolveToastDuration(
+	options: { duration?: number; hasAction?: boolean; isLoading?: boolean },
+	{ isScreenReaderEnabled }: { isScreenReaderEnabled: boolean }
+): number {
+	const { duration } = options;
+	let resolved: number;
+	if (duration !== undefined && Number.isFinite(duration) && duration >= 0) resolved = duration;
+	else if (duration === undefined && options.isLoading) resolved = 0;
+	else resolved = options.hasAction ? TOAST_DURATION.withAction : TOAST_DURATION.default;
+
+	if (resolved === 0) return 0;
+	return isScreenReaderEnabled ? Math.max(resolved, TOAST_DURATION.screenReaderMinimum) : resolved;
+}
+
+/** What `resolveToastStack` reads from each toast. */
+export type ToastStackInput = { id: string; placement: Placement; isExiting: boolean };
+
+/** One toast's place in its stack. */
+export type ToastStackEntry = {
+	id: string;
+	/** 0 is the front. An exiting toast keeps the depth it is leaving from. */
+	depth: number;
+	/** Drawn. A toast past the third is queued until one in front leaves. */
+	isVisible: boolean;
+	isExiting: boolean;
+};
+
+/**
+ * One placement's stack, newest first.
+ *
+ * Depth counts only the toasts that are staying, so the moment one is hidden
+ * the toasts behind it move up and the next queued toast is drawn — while the
+ * hidden one is still animating out, at the depth it left. A toast that was
+ * queued when it was hidden was never drawn and is not drawn leaving.
+ */
+export function resolveToastStack(items: readonly ToastStackInput[], placement: Placement): ToastStackEntry[] {
+	const entries: ToastStackEntry[] = [];
+	let staying = 0;
+	for (let index = items.length - 1; index >= 0; index--) {
+		const item = items[index] as ToastStackInput;
+		if (item.placement !== placement) continue;
+		const isVisible = staying < TOAST_STACK.maxVisible;
+		entries.push({ id: item.id, depth: staying, isVisible, isExiting: item.isExiting });
+		if (!item.isExiting) staying += 1;
+	}
+	return entries;
+}
+
+/**
+ * The transform a toast at `depth` takes: further toward its entry edge,
+ * smaller and fainter. Linear in `depth`, so an animated depth moves smoothly
+ * between steps.
+ */
+export function resolveToastDepthStyle(
+	depth: number,
+	placement: Placement
+): { translateY: number; scale: number; opacity: number } {
+	"worklet";
+	const towardEdge = placement === "bottom" ? 1 : -1;
+	return {
+		translateY: towardEdge * TOAST_STACK.depthOffset * depth,
+		scale: 1 - TOAST_STACK.depthScale * depth,
+		opacity: 1 - TOAST_STACK.depthOpacity * depth,
+	};
+}
+
+/**
+ * How tall a toast is drawn at `depth`, or `null` to leave it at its own height.
+ *
+ * A toast behind takes the front toast's height. Scaled about the entry edge,
+ * a taller one would otherwise rise past the front card and show its title
+ * over it. Between depth 0 and 1 the height eases from the front's to its own,
+ * so a toast moving up grows into place rather than jumping.
+ */
+export function resolveToastStackedHeight({
+	depth,
+	natural,
+	front,
+}: {
+	depth: number;
+	natural: number;
+	front: number;
+}): number | null {
+	"worklet";
+	if (natural <= 0 || front <= 0) return null;
+	const t = Math.min(1, Math.max(0, depth));
+	return natural + (front - natural) * t;
+}
+
+/**
+ * How long a toast waits before entering, so several shown in one tick
+ * arrive one after another. Counted from when it was shown, so a toast that
+ * sat in the queue enters as soon as it is drawn.
+ */
+export function resolveToastEnterDelay({
+	createdAt,
+	batchIndex,
+	now,
+}: {
+	createdAt: number;
+	batchIndex: number;
+	now: number;
+}): number {
+	return Math.max(0, createdAt + batchIndex * TOAST_STAGGER_MS - now);
+}
+
+function rubberBand(distance: number): number {
+	"worklet";
+	const magnitude = Math.abs(distance);
+	return Math.sign(distance) * ((magnitude * TOAST_RUBBER_BAND) / (magnitude + TOAST_RUBBER_BAND));
+}
+
+type ToastDragInput = { placement: Placement; translationX: number; translationY: number };
+
+/**
+ * Where a dragged toast is drawn. Sideways and toward its entry edge it
+ * follows the finger; toward the centre it resists and never goes further than
+ * `TOAST_RUBBER_BAND`, which says "not this way" without a word.
+ */
+export function resolveToastDrag({ placement, translationX, translationY }: ToastDragInput): {
+	x: number;
+	y: number;
+} {
+	"worklet";
+	const towardEdge = placement === "bottom" ? 1 : -1;
+	const y = translationY * towardEdge >= 0 ? translationY : rubberBand(translationY);
+	return { x: translationX, y };
+}
+
+export type ToastRelease = { kind: "settle" } | { kind: "dismiss"; axis: "x" | "y"; direction: 1 | -1 };
+
+/**
+ * What a released drag does.
+ *
+ * Sideways past 40% of the toast's width, or toward its entry edge past 40%
+ * of its height, dismisses — and so does a fling over 800pt/s either way.
+ * Toward the centre never dismisses: that is not where a toast goes. When both
+ * axes qualify, the one the finger travelled further along wins.
+ */
+export function resolveToastRelease({
+	placement,
+	translationX,
+	translationY,
+	velocityX,
+	velocityY,
+	width,
+	height,
+}: ToastDragInput & { velocityX: number; velocityY: number; width: number; height: number }): ToastRelease {
+	"worklet";
+	const towardEdge = placement === "bottom" ? 1 : -1;
+
+	let sideways: ToastRelease = { kind: "settle" };
+	if (Math.abs(velocityX) > TOAST_SWIPE.velocity) {
+		sideways = { kind: "dismiss", axis: "x", direction: velocityX > 0 ? 1 : -1 };
+	} else if (Math.abs(translationX) > width * TOAST_SWIPE.distanceRatio) {
+		sideways = { kind: "dismiss", axis: "x", direction: translationX > 0 ? 1 : -1 };
+	}
+
+	const travel = translationY * towardEdge;
+	const fling = velocityY * towardEdge;
+	const isEdgeward = travel >= 0 && (fling > TOAST_SWIPE.velocity || travel > height * TOAST_SWIPE.distanceRatio);
+	const edgeward: ToastRelease = isEdgeward
+		? { kind: "dismiss", axis: "y", direction: towardEdge }
+		: { kind: "settle" };
+
+	if (sideways.kind === "dismiss" && edgeward.kind === "dismiss") {
+		return Math.abs(translationX) >= Math.abs(translationY) ? sideways : edgeward;
+	}
+	return sideways.kind === "dismiss" ? sideways : edgeward;
+}
+
+/** The haptic a toast plays as it appears: the caller's, else the status's notification, else none. */
+export function resolveToastHaptic(status: Status, haptic: HapticFeedback | false | undefined): HapticFeedback | false {
+	if (haptic !== undefined) return haptic;
+	if (status === "success") return "success";
+	if (status === "warning") return "warning";
+	if (status === "destructive") return "error";
+	return false;
+}
+
+/** What a screen reader says as a toast appears: the title, then the description. */
+export function resolveToastAnnouncement({ title, description }: { title: string; description?: string }): string {
+	return description ? `${title}. ${description}` : title;
+}
+
+/** Whether the announcement cuts in over whatever is being read — a warning or a failure does. */
+export function resolveToastInterrupts(status: Status): boolean {
+	return status === "destructive" || status === "warning";
+}
+
+/** A failure is an `alert`; anything else is a plain group. */
+export function resolveToastRole(status: Status): "alert" | "none" {
+	return status === "destructive" ? "alert" : "none";
+}

package/src/components/toggle-button/AGENTS.md

@@ -0,0 +1,106 @@
+# ToggleButton
+
+A button that stays pressed — on its own, or as one of a group that owns the
+selection. Compound root plus `ToggleButton.Label` and `ToggleButton.Group`.
+
+`import { ToggleButton } from "@delacour/react-native-ui/toggle-button";`
+
+## Files
+
+| File | What it holds |
+| --- | --- |
+| `index.ts` | → `@delacour/react-native-ui/toggle-button` |
+| `toggle-button.tsx` | Root + the `Object.assign` compound surface |
+| `toggle-button-label.tsx` | `ToggleButton.Label` |
+| `toggle-button-group.tsx` | `ToggleButton.Group`, which owns the selection |
+| `toggle-button.context.tsx` | `ToggleButtonContext` and `ToggleButtonGroupContext`, with their hooks |
+| `toggle-button.variants.ts` | The appearance table, the group's `tv()` and three pure resolvers |
+| `toggle-button.variants.test.ts` | |
+
+There is no `toggle-button.types.ts`: every prop type here has exactly one
+consumer, so each lives beside the component it types. See
+[Compound component layout](../../../AGENTS.md#compound-component-layout).
+
+## Design
+
+- **Variants**: `default`, `outline`, `ghost`. **Sizes**: the button's own —
+  `sm`, `md`, `lg` and the square `icon-sm`, `icon-md`, `icon-lg`. **Selection
+  modes**, on the group: `multiple` (default) and `single`. **Layouts**, on the
+  group: `attached` (default) and `detached`. **Orientations**, on the group:
+  `horizontal` and `vertical`.
+- **A toggle is a `Button`, and owns no paint.** Each state names a button
+  variant — `TOGGLE_BUTTON_APPEARANCE` — and the toggle renders a `Button` with
+  whichever one applies. The fill, the border, the label colour, the colour a
+  composed `Icon` inherits, the corner, the loading spinner and the press
+  feedback all come from the button, so there is no second table of colours
+  here to drift from it. Every button variant draws the same `border` box, so
+  switching state never resizes the toggle. A test asserts every entry names a
+  real button variant and that `on` never equals `off`.
+- **No state is destructive.** A pressed toggle is a choice, not a warning; the
+  appearance table never names `destructive` or `destructive-soft`, and a test
+  holds it there.
+- **A square is a size, not a flag.** `size="icon-md"` is the button's own
+  square step — there is no `isIconOnly`. Always pair one with an
+  `accessibilityLabel`.
+- **The state is announced, not only drawn.** `resolveToggleButtonAccessibility`
+  makes a standalone toggle, or a member of a `multiple` group, a
+  `togglebutton` with `accessibilityState.checked` — read out as on or off. A
+  member of a `single` group is a `radio` with `accessibilityState.selected`,
+  and that group is a `radiogroup`: announcing an either-or option as a toggle
+  promises that pressing it again turns it off, which a group with
+  `isSelectionRequired` refuses to do. A `multiple` group has no role, the same
+  call `Button.Group` makes.
+- **The toggle keeps the role, the state and the press handler.**
+  `accessibilityRole`, `accessibilityState` and `variant` are `Omit`ted from its
+  props, and the three it computes are set *after* the caller's spread, so
+  nothing passed in can make the announced state and the drawn state disagree.
+  A caller's `onPress` still runs — first, before the state moves, so a
+  handler reading the state it closed over sees what the toggle was when
+  pressed.
+- **A toggle works with or without a group.** On its own it is `isSelected` +
+  `onSelected`, or uncontrolled from `defaultSelected`, through
+  `useControllableState`. Inside a `ToggleButton.Group` its `value` identifies
+  it, the group owns the state, and its own `isSelected` is ignored. The hook is
+  still called in a group — a hook may not sit behind a branch — and its state
+  is never read. A grouped toggle with no `value` can never be selected, and
+  warns in development.
+- **Children may be a function of the state.** `{({ isSelected }) => …}` is
+  for content that changes with the toggle — a label that reads *Saved* once
+  pressed, a glyph that swaps. `useToggleButton()` answers the same question
+  for a custom child that would rather read context.
+- **`ToggleButton.Label` is a `Button.Label` with a part check.** The colour is
+  already right — the toggle hands its button the variant for the state it is
+  in — so the part adds nothing but an error that names the toggle when it is
+  rendered outside one.
+
+## ToggleButton.Group
+
+- **State is one array of the members' `value`s**: `selected` + `onSelected`,
+  or `defaultSelected` alone. `resolveToggleSelection` is the whole decision
+  and is pure: `multiple` adds or removes the one pressed, keeping press order;
+  `single` replaces the selection with it; a re-press in `single` clears it.
+- **`isSelectionRequired` keeps an answer on the board.** The last selection
+  cannot be cleared, in either mode. A segmented choice like text alignment
+  always has one.
+- **A press that changes nothing notifies nobody.** The resolver returns
+  `null` rather than the same list back, so `onSelected` is never called with a
+  value the caller already holds — the rule `Radio.Group` keeps for a re-press
+  of the current option.
+- **A controlled `single` group handed several values collapses** to the one
+  pressed rather than carrying the others along.
+- **`attached` is a `Button.Group`, not a copy of one.** The toggles join into
+  one run with the button's own corner squaring, hairline seam and fade-not-scale
+  feedback, and `Button.Group.Separator` works between two of them. Restating
+  any of that here is how the two runs would stop matching. An attached group
+  therefore owns the size *step* outright — controls of different heights do not
+  join — while a square member stays square (`resolveGroupedButtonSize`).
+- **`detached` is a wrapping row, or a column, spaced by a gap** — the one thing
+  an attached run must never have. It is the shape for a row of filters. The
+  classes are compound cells on `layout` × `orientation`, and an attached group
+  emits none of them.
+- **The axes are defaults, not overrides.** `variant`, `size`, `isDisabled` and
+  `haptic` are published raw, so a member's own value wins and one option can
+  disable itself inside a group that did not — `own ?? group ?? default`, the
+  `Checkbox.Group` ladder.
+- **The group paints nothing.** A disabled group publishes `isDisabled` and each
+  member fades itself; a group fading too would compound the two.

package/src/components/toggle-button/index.ts

@@ -0,0 +1,30 @@
+export { ToggleButton, type ToggleButtonProps, type ToggleButtonRenderState } from "./toggle-button";
+export {
+	type ToggleButtonContextValue,
+	type ToggleButtonGroupContextValue,
+	ToggleButtonGroupProvider,
+	ToggleButtonProvider,
+	useToggleButton,
+	useToggleButtonContext,
+	useToggleButtonGroup,
+	useToggleButtonGroupContext,
+} from "./toggle-button.context";
+export {
+	resolveToggleButtonAccessibility,
+	resolveToggleButtonVariant,
+	resolveToggleSelection,
+	TOGGLE_BUTTON_APPEARANCE,
+	TOGGLE_BUTTON_GROUP_LAYOUTS,
+	TOGGLE_BUTTON_GROUP_ORIENTATIONS,
+	TOGGLE_BUTTON_SELECTION_MODES,
+	TOGGLE_BUTTON_VARIANTS,
+	type ToggleButtonAccessibility,
+	type ToggleButtonGroupLayout,
+	type ToggleButtonGroupOrientation,
+	type ToggleButtonSelectionMode,
+	type ToggleButtonVariant,
+	type ToggleButtonVariantProps,
+	toggleButtonVariants,
+} from "./toggle-button.variants";
+export type { ToggleButtonGroupProps } from "./toggle-button-group";
+export type { ToggleButtonLabelProps } from "./toggle-button-label";

package/src/components/toggle-button/toggle-button-group.tsx

@@ -0,0 +1,156 @@
+import { type ReactElement, type ReactNode, useCallback, useMemo } from "react";
+import { View, type ViewProps } from "react-native";
+import { useControllableState } from "../../hooks/use-controllable-state";
+import { Button } from "../button";
+import type { ButtonSize } from "../button/button.variants";
+import type { HapticFeedback, PressableFeedback } from "../pressable";
+import { type ToggleButtonGroupContextValue, ToggleButtonGroupProvider } from "./toggle-button.context";
+import {
+	resolveToggleSelection,
+	type ToggleButtonGroupLayout,
+	type ToggleButtonGroupOrientation,
+	type ToggleButtonSelectionMode,
+	type ToggleButtonVariant,
+	toggleButtonVariants,
+} from "./toggle-button.variants";
+
+export type ToggleButtonGroupProps = Omit<ViewProps, "children"> & {
+	/** `multiple` marks independently; `single` is an either-or choice. Default `multiple`. */
+	selectionMode?: ToggleButtonSelectionMode;
+	/** The `value` of every selected toggle. Controlled. */
+	selected?: string[];
+	/** The values selected to begin with, while uncontrolled. */
+	defaultSelected?: string[];
+	/** Called with the whole new list. Never called for a press that changes nothing. */
+	onSelected?: (selected: string[]) => void;
+	/** Refuse to clear the last selection — a re-press of it does nothing. */
+	isSelectionRequired?: boolean;
+	/** `attached` joins the toggles into one run; `detached` spaces them apart. Default `attached`. */
+	layout?: ToggleButtonGroupLayout;
+	/** Which way the toggles run. Default `horizontal`. */
+	orientation?: ToggleButtonGroupOrientation;
+	/** A default every toggle takes unless it names its own. */
+	variant?: ToggleButtonVariant;
+	/** Shared by every toggle. An attached group owns the step outright. */
+	size?: ButtonSize;
+	/** Disables every toggle that does not say otherwise. */
+	isDisabled?: boolean;
+	/** Haptic for every toggle that does not name its own. */
+	haptic?: false | HapticFeedback;
+	/** Press treatment for every toggle. Unset, an attached toggle fades rather than scaling. */
+	feedback?: PressableFeedback;
+	className?: string;
+	children?: ReactNode;
+};
+
+function ToggleButtonGroupRoot({
+	selectionMode = "multiple",
+	selected,
+	defaultSelected = EMPTY,
+	onSelected,
+	isSelectionRequired = false,
+	layout = "attached",
+	orientation = "horizontal",
+	variant,
+	size,
+	isDisabled,
+	haptic,
+	feedback,
+	className,
+	children,
+	...props
+}: ToggleButtonGroupProps): ReactElement {
+	const [values, setValues] = useControllableState<string[]>({
+		defaultValue: defaultSelected,
+		onChange: onSelected,
+		value: selected,
+	});
+
+	const toggle = useCallback(
+		(value: string) => {
+			const next = resolveToggleSelection({ current: values, isSelectionRequired, selectionMode, value });
+			if (next !== null) setValues(next);
+		},
+		[isSelectionRequired, selectionMode, setValues, values]
+	);
+
+	const context = useMemo<ToggleButtonGroupContextValue>(
+		() => ({ haptic, isDisabled, layout, orientation, selected: values, selectionMode, size, toggle, variant }),
+		[haptic, isDisabled, layout, orientation, selectionMode, size, toggle, values, variant]
+	);
+
+	// A single-choice group is a radio group, and says so. A set of independent
+	// marks is a container with no action of its own, so it announces nothing —
+	// the same call `Button.Group` makes.
+	const accessibilityRole = selectionMode === "single" ? "radiogroup" : undefined;
+
+	return (
+		<ToggleButtonGroupProvider value={context}>
+			{layout === "attached" ? (
+				<Button.Group
+					accessibilityRole={accessibilityRole}
+					className={className}
+					feedback={feedback}
+					orientation={orientation}
+					size={size}
+					{...props}
+				>
+					{children}
+				</Button.Group>
+			) : (
+				<View
+					accessibilityRole={accessibilityRole}
+					className={toggleButtonVariants({ layout, orientation }).group({ className })}
+					{...props}
+				>
+					{children}
+				</View>
+			)}
+		</ToggleButtonGroupProvider>
+	);
+}
+
+/**
+ * A stable empty list, so an uncontrolled group does not seed its state from a
+ * fresh array on every render.
+ */
+const EMPTY: string[] = [];
+
+/**
+ * Toggles sharing one selection.
+ *
+ * State is one array of the members' `value`s, controlled with `selected` and
+ * `onSelected` or held by the group from `defaultSelected`. `selectionMode`
+ * decides what a press does: `multiple` adds or removes the one pressed, while
+ * `single` replaces the selection with it. `isSelectionRequired` keeps the last
+ * one from being cleared — a segmented choice always has an answer.
+ *
+ * `attached` — the default — renders a `Button.Group`, so the toggles join into
+ * one run with shared corners and a hairline seam, and `Button.Group.Separator`
+ * works between them. `detached` spaces them apart and wraps, for a row of
+ * filters.
+ *
+ * `variant`, `size`, `isDisabled` and `haptic` are defaults a member may
+ * override, so one option can disable itself. An attached group owns the size
+ * step outright, because controls of different heights do not join; a square
+ * member stays square.
+ *
+ * @example
+ * <ToggleButton.Group defaultSelected={["bold"]} variant="ghost">
+ *   <ToggleButton accessibilityLabel="Bold" size="icon-md" value="bold">
+ *     <Icon icon={IconBold} />
+ *   </ToggleButton>
+ *   <ToggleButton accessibilityLabel="Italic" size="icon-md" value="italic">
+ *     <Icon icon={IconItalic} />
+ *   </ToggleButton>
+ * </ToggleButton.Group>
+ *
+ * @example
+ * <ToggleButton.Group layout="detached" onSelected={setFilters} selected={filters} size="sm" variant="outline">
+ *   <ToggleButton value="open">Open</ToggleButton>
+ *   <ToggleButton value="closed">Closed</ToggleButton>
+ * </ToggleButton.Group>
+ */
+export const ToggleButtonGroup = Object.assign(ToggleButtonGroupRoot, {
+	displayName: "DelacourUI.ToggleButton.Group",
+});

package/src/components/toggle-button/toggle-button-label.tsx

@@ -0,0 +1,19 @@
+import type { ReactElement } from "react";
+import { Button, type ButtonLabelProps } from "../button";
+import { useToggleButtonPart } from "./toggle-button.context";
+
+export type ToggleButtonLabelProps = ButtonLabelProps;
+
+/**
+ * The toggle's text.
+ *
+ * A `Button.Label`, and nothing more: the toggle hands its button the variant
+ * for the state it is in, so the label already reads the right colour off the
+ * button's context. A part of its own anyway, so a label placed outside a toggle
+ * fails with a message that names the toggle rather than the button.
+ */
+export function ToggleButtonLabel(props: ToggleButtonLabelProps): ReactElement {
+	useToggleButtonPart("ToggleButton.Label");
+	return <Button.Label {...props} />;
+}
+ToggleButtonLabel.displayName = "DelacourUI.ToggleButton.Label";