@delacour/react-native-ui 0.1.0-alpha.3 → 0.1.0

package/src/components/bottom-sheet/index.ts

@@ -1,40 +1,62 @@
-export { BottomSheet, type BottomSheetProps } from "./bottom-sheet";
 export {
-	type BottomSheetContainerContextValue,
-	BottomSheetContainerProvider,
+	type BottomSheetAnimatedValue,
 	type BottomSheetContextValue,
-	type BottomSheetHandle,
-	type BottomSheetPortalContextValue,
-	BottomSheetPortalProvider,
-	BottomSheetProvider,
+	type BottomSheetHostProps,
+	type BottomSheetPortalProps,
+	type BottomSheetRef,
+	type BottomSheetRegistryValue,
+	type BottomSheetTextInputHandlers,
+	defineSheetMachine,
+	type SheetEvent,
+	type SheetMachine,
+	type SheetMachineConfig,
+	type SheetMachineSnapshot,
+	type SheetStepController,
+	type SheetStepTransition,
 	useBottomSheet,
-	useBottomSheetContainerContext,
-	useBottomSheetContext,
-	useBottomSheetPortalContext,
-} from "./bottom-sheet.context";
+	useBottomSheetAnimated,
+	useBottomSheetRegistry,
+	useBottomSheetTextInput,
+	useOptionalBottomSheet,
+	useOptionalBottomSheet as useBottomSheetContext,
+	useSheetMachine,
+	useSheetStep,
+} from "@delacour/react-native-bottom-sheet";
+export { resolveSheetBottomInset, resolveSheetScrollEndPadding } from "@delacour/react-native-bottom-sheet/core";
+export { BottomSheet, type BottomSheetProps } from "./bottom-sheet";
 export {
 	BOTTOM_SHEET_BACKDROP_INDICES,
 	BOTTOM_SHEET_CLOSE_HIT_SLOP,
 	BOTTOM_SHEET_FOOTER_GAP,
 	BOTTOM_SHEET_FOOTER_PADDING,
-	BOTTOM_SHEET_KEYBOARD_DEFAULTS,
 	BOTTOM_SHEET_OVERLAY_OPACITY,
 	BOTTOM_SHEET_OVERLAY_TOKEN,
-	type BottomSheetFooterFlag,
-	type BottomSheetFooterPlacement,
 	type BottomSheetVariantProps,
 	bottomSheetVariants,
-	resolveFooterPlacement,
-	resolveSheetBottomInset,
 } from "./bottom-sheet.variants";
+export type { BottomSheetBackgroundProps } from "./bottom-sheet-background";
 export type { BottomSheetCloseProps } from "./bottom-sheet-close";
 export type { BottomSheetContainerProps } from "./bottom-sheet-container";
 export type { BottomSheetContentProps } from "./bottom-sheet-content";
 export type { BottomSheetDescriptionProps } from "./bottom-sheet-description";
+export type { BottomSheetFlatListProps } from "./bottom-sheet-flat-list";
 export type { BottomSheetFooterProps } from "./bottom-sheet-footer";
+export type { BottomSheetHandleProps } from "./bottom-sheet-handle";
+export type { BottomSheetLegendListProps } from "./bottom-sheet-legend-list";
 export type { BottomSheetOverlayProps } from "./bottom-sheet-overlay";
-export type { BottomSheetPortalProps } from "./bottom-sheet-portal";
+export { BottomSheetProvider, type BottomSheetProviderProps } from "./bottom-sheet-provider";
 export type { BottomSheetScrollViewProps } from "./bottom-sheet-scroll-view";
+export type { BottomSheetSectionListProps } from "./bottom-sheet-section-list";
+export type { BottomSheetStepProps, BottomSheetStepsProps } from "./bottom-sheet-steps";
+export type { BottomSheetTextInputProps } from "./bottom-sheet-text-input";
 export type { BottomSheetTitleProps } from "./bottom-sheet-title";
 export type { BottomSheetTriggerProps } from "./bottom-sheet-trigger";
 export { type BottomSheetInputHandlers, useBottomSheetInput } from "./use-bottom-sheet-input";
+
+/**
+ * The imperative handle a `BottomSheet` ref exposes.
+ *
+ * @deprecated The engine's name is `BottomSheetRef`; this alias stays for the
+ * callers that typed the old name and goes with the next major.
+ */
+export type BottomSheetHandle = import("@delacour/react-native-bottom-sheet").BottomSheetRef;

package/src/components/bottom-sheet/use-bottom-sheet-input.ts

@@ -1,125 +1,26 @@
-import { useBottomSheetInternal } from "@gorhom/bottom-sheet";
-import { type RefCallback, useCallback, useRef } from "react";
-import { type BlurEvent, type FocusEvent, findNodeHandle, TextInput } from "react-native";
+import { type BottomSheetTextInputHandlers, useBottomSheetTextInput } from "@delacour/react-native-bottom-sheet";
 
-/**
- * `findNodeHandle` for a value React Native's own types do not admit.
- *
- * `TextInput.State.currentlyFocusedInput()` returns a Fabric host instance, and
- * the shipped signature still describes the pre-Fabric parameter — the runtime
- * accepts it, which is what gorhom's own `BottomSheetTextInput` relies on. One
- * cast, in one place, rather than at each call.
- */
-function nodeHandleOf(instance: unknown): number | null {
-	return findNodeHandle(instance as Parameters<typeof findNodeHandle>[0]);
-}
-
-export type BottomSheetInputHandlers = {
-	onFocus: (event: FocusEvent) => void;
-	onBlur: (event: BlurEvent) => void;
-	ref: RefCallback<TextInput | null>;
-};
+export type BottomSheetInputHandlers = BottomSheetTextInputHandlers;
 
 /**
- * Makes this package's `Input` behave like a text field the sheet owns.
+ * Registers a text field as the sheet's own, so the keyboard it raises is the
+ * sheet's to lift for.
  *
- * Spread the result onto any `TextInput` inside a `BottomSheet`:
+ * The engine's `useBottomSheetTextInput()` under the name this library shipped
+ * it as. Spread the result onto any `Input` or `TextInput`:
  *
  * ```tsx
- * <Input {...useBottomSheetInput()} placeholder="Name" />
+ * const sheetInput = useBottomSheetInput();
+ * <Input {...sheetInput} placeholder="Name" />
  * ```
  *
- * A sheet only knows to grow for the keyboard when it knows the focused field is
- * one of its own. gorhom ships `BottomSheetTextInput` to register that, but
- * reaching for it here would mean this library's `Input` — its variants, its
- * `Input.Group`, its invalid and disabled cascade — could not be used inside a
- * sheet at all. So the registration is exposed as handlers instead, and `Input`
- * keeps knowing nothing about `@gorhom/bottom-sheet`.
- *
- * Three props, and all three are load-bearing:
+ * All three handlers matter: `ref` puts the field's native node in the sheet's
+ * registry, `onFocus` claims the keyboard, and `onBlur` gives it up — unless
+ * focus moved to another registered field in the same sheet, which is what
+ * keeps a tap from one field to the next from reading as a close and a reopen.
+ * Outside a sheet the handlers are inert, so a form shared between a screen
+ * and a sheet needs no branch.
  *
- * - `ref` registers the field's native node with the sheet. Without it, moving
- *   focus from one field in the sheet to the next reads as the keyboard closing
- *   and reopening, and the sheet resizes twice on the way.
- * - `onFocus` tells the sheet which field to keep clear of the keyboard.
- * - `onBlur` gives that up again, unless focus went to another field in the same
- *   sheet.
- *
- * Called outside a sheet it returns inert handlers rather than throwing, so a
- * form component shared between a screen and a sheet needs no branch.
- *
- * It covers the keyboard half only. A *drag* across a field can still be claimed
- * by the sheet's content pan, because gorhom's input is built on Gesture
- * Handler's `TextInput` and this one is not; if that ever bites, the fix is
- * `enableContentPanningGesture={false}` on the `BottomSheet.Container`. The
- * *tap* half — a scrim that used to swallow the press meant for the field — is
- * solved in `BottomSheet.Overlay`, not here.
- *
- * @example
- * <Field>
- *   <Field.Label>Name</Field.Label>
- *   <Input {...useBottomSheetInput()} onChangeText={setName} value={name} />
- * </Field>
+ * `BottomSheet.TextInput` is this over `Input`, for the plain case.
  */
-export function useBottomSheetInput(): BottomSheetInputHandlers {
-	const internal = useBottomSheetInternal(true);
-	// The node this field last registered, so the ref can withdraw exactly it.
-	// A JS ref rather than a shared value: nothing renders differently for it.
-	const registeredNodeRef = useRef<number | null>(null);
-
-	const ref = useCallback<RefCallback<TextInput | null>>(
-		(instance) => {
-			const nodes = internal?.textInputNodesRef.current;
-			const previous = registeredNodeRef.current;
-
-			if (previous !== null) {
-				nodes?.delete(previous);
-				registeredNodeRef.current = null;
-				if (internal !== null && internal.animatedKeyboardState.get().target === previous) {
-					internal.animatedKeyboardState.set((state) => ({ ...state, target: undefined }));
-				}
-			}
-
-			if (instance === null || nodes === undefined) return;
-
-			const node = nodeHandleOf(instance);
-			if (node === null) return;
-
-			nodes.add(node);
-			registeredNodeRef.current = node;
-		},
-		[internal]
-	);
-
-	const onFocus = useCallback(
-		(event: FocusEvent) => {
-			if (internal === null) return;
-			const target = event.nativeEvent.target;
-			internal.animatedKeyboardState.set((state) => ({ ...state, target }));
-		},
-		[internal]
-	);
-
-	const onBlur = useCallback(
-		(event: BlurEvent) => {
-			if (internal === null) return;
-
-			const target = event.nativeEvent.target;
-			const isThisFieldsTarget = internal.animatedKeyboardState.get().target === target;
-			if (!isThisFieldsTarget) return;
-
-			// React Native's own focus registry, not the sheet's: focus may already
-			// have moved to the next field in the same sheet, and giving the target
-			// up there would close and reopen the sheet's keyboard allowance between
-			// two taps that never dismissed the keyboard.
-			const focused = TextInput.State.currentlyFocusedInput();
-			const focusedNode = focused === null ? null : nodeHandleOf(focused);
-			if (focusedNode !== null && internal.textInputNodesRef.current.has(focusedNode)) return;
-
-			internal.animatedKeyboardState.set((state) => ({ ...state, target: undefined }));
-		},
-		[internal]
-	);
-
-	return { onBlur, onFocus, ref };
-}
+export const useBottomSheetInput: () => BottomSheetInputHandlers = useBottomSheetTextInput;

package/src/components/button/AGENTS.md

@@ -194,20 +194,54 @@ for a chunk that says something rather than doing something. An
 - **The group paints nothing.** No background, no border, no disabled fade. A
   disabled group publishes `isDisabled` and each member fades itself; a group
   fading as well would compound the two down to a quarter opacity. It carries no
-  `gap` either — a gap is the seam this component exists to close — and no
-  `overflow-hidden`, which would square off the very corners the position
+  `gap` while attached — a gap is the seam this component exists to close — and
+  no `overflow-hidden`, which would square off the very corners the position
   compounds just rounded.
 - **No `accessibilityRole` on the group.** Announcing a control with no action
   in front of every member helps nobody; the members are already buttons.
-- **Horizontal groups are content-width** (`self-start`), because that is what a
-  segmented control is. For a run that fills its parent, put `className="w-full"`
-  on the group and `className="flex-1"` on each member — **and make sure the
-  parent has a definite width**. Yoga resolves a percentage against the parent's
-  content box, so `w-full` inside a container that is itself content-sized
-  resolves to nothing and falls back to the content width: the group collapses
-  onto its buttons and a `flex-1` field between them is squeezed to a few points.
-  It looks like the group ignored `w-full`. It did not; there was no width to
-  take a percentage of.
+- **`isAttached={false}` shares the props and drops the shape.** A toolbar of
+  `Find · Export · Share` wants one `variant` and one `size` without becoming a
+  segmented control. Detached, `resolveGroupPositions` places every member
+  `only` — the lone member's existing position, which draws the lone button's
+  `rounded-button-*` — rather than minting a fourth sentinel, and
+  `resolveGroupSeams` returns no seams, so nothing overlaps into the gap. The gap
+  is `gap-2` on either axis, a `tv` variant on the `group` slot and never inline.
+  `Button.Group.Separator` still renders, as a rule between spaced members.
+- **A detached member presses with `scale` again.** The fade exists only because
+  a scaling member tears its seam, and a detached run has none.
+  `resolveButtonFeedback` takes `isAttached` as a fourth argument, defaulting to
+  `true`, rather than turning into an options object: its positional signature
+  is public, `Input` and the existing tests call it, and the new rung is the only
+  thing that changed.
+- **`isFullWidth` splits the parent equally, not by content.** A
+  `Monthly · Annual · One-off` picker sized to its labels moves its dividers when
+  the copy changes, and a wider segment reads as more important. The group trades
+  `self-start` for `w-full self-stretch` — declared after `orientation` in
+  `buttonVariants`, so tailwind-merge drops `self-start` rather than keeping it —
+  and every member of a horizontal run gets `flex-1 basis-0`. **`basis-0` is the
+  part that matters**: with `flex-1` alone Yoga shares out only the space left
+  after each member's content width, and the widths still follow the labels.
+- **A member learns it stretches from context, as `isStretched`.**
+  `resolveGroupMemberStretch` decides it once per group, it rides on the
+  per-member context beside `position` and `isSeamed`, and `Button` feeds it to
+  an `isStretched` variant on its own `tv`. No `cloneElement`, for the reason
+  above. A caller's `className="flex-none"` on one member still wins — the
+  variant is merged before the caller's class. `Button.Group.Text` and the
+  separator do **not** stretch: a caption and a rule keep their content width
+  and the buttons share what is left. `Input` does not read it yet; a caller
+  sizes a joined field with its own `className`.
+- **`isFullWidth` on a vertical group widens the group and does nothing else.**
+  Its members already stretch on the cross axis, and `basis-0` on the main axis
+  of a column with no definite height would collapse every member to nothing —
+  so `isStretched` is `false` there by construction.
+- **Horizontal groups are content-width by default** (`self-start`), because
+  that is what a segmented control is. `isFullWidth` fills the parent — **and the
+  parent must have a definite width**. Yoga resolves a percentage against the
+  parent's content box, so `w-full` inside a container that is itself
+  content-sized resolves to nothing and falls back to the content width: the
+  group collapses onto its buttons and a `flex-1` field between them is squeezed
+  to a few points. It looks like the group ignored `isFullWidth`. It did not;
+  there was no width to take a percentage of.
 - **`Button.Group.Text` draws the button's own chrome**, not chrome of its own,
   which is what keeps its height, padding and corner identical to the buttons
   beside it — those come off one axis, and restating any of them here is how a

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

@@ -13,6 +13,7 @@ import {
 	type ButtonSize,
 	type ButtonVariant,
 	buttonVariants,
+	resolveGroupMemberStretch,
 	resolveGroupPositions,
 	resolveGroupSeams,
 } from "./button.variants";
@@ -30,6 +31,18 @@ export type ButtonGroupProps = ViewProps & {
 	isDisabled?: boolean;
 	/** Press treatment for every member. Unset, a joined member fades rather than scaling. */
 	feedback?: PressableFeedback;
+	/**
+	 * Join the members into one shape. On by default, because that is what a group is. Off keeps the
+	 * inherited `variant` / `size` / `isDisabled` / `feedback` and drops the joined shape: every
+	 * member keeps its own corner, no seam overlap, and the run takes a `gap`.
+	 */
+	isAttached?: boolean;
+	/**
+	 * Span the parent and split it equally between members. Horizontal only — a vertical group
+	 * already stretches its members, so there it only widens the group. The parent needs a
+	 * definite width.
+	 */
+	isFullWidth?: boolean;
 	className?: string;
 	children?: ReactNode;
 };
@@ -40,13 +53,15 @@ function ButtonGroupRoot({
 	variant,
 	isDisabled,
 	feedback,
+	isAttached = true,
+	isFullWidth = false,
 	className,
 	children,
 	...props
 }: ButtonGroupProps): ReactElement {
 	const group = useMemo<ButtonGroupContextValue>(
-		() => ({ feedback, isDisabled, orientation, size, variant }),
-		[feedback, isDisabled, orientation, size, variant]
+		() => ({ feedback, isAttached, isDisabled, isFullWidth, orientation, size, variant }),
+		[feedback, isAttached, isDisabled, isFullWidth, orientation, size, variant]
 	);
 
 	const items = useMemo(() => Children.toArray(children), [children]);
@@ -56,17 +71,18 @@ function ButtonGroupRoot({
 	// the members' order actually change.
 	const values = useMemo(() => {
 		const isMember = items.map(isGroupMember);
-		const positions = resolveGroupPositions(isMember);
-		const seams = resolveGroupSeams(isMember);
+		const positions = resolveGroupPositions(isMember, group);
+		const seams = resolveGroupSeams(isMember, group);
+		const isStretched = resolveGroupMemberStretch(group);
 
 		return positions.map<ButtonGroupItemContextValue | null>((position, index) =>
-			position === null ? null : { ...group, isSeamed: seams[index] === true, position }
+			position === null ? null : { ...group, isSeamed: seams[index] === true, isStretched, position }
 		);
 	}, [items, group]);
 
 	return (
 		<ButtonGroupProvider value={group}>
-			<View className={buttonVariants({ orientation }).group({ className })} {...props}>
+			<View className={buttonVariants({ isAttached, isFullWidth, orientation }).group({ className })} {...props}>
 				{items.map((child, index) => {
 					const value = values[index];
 					if (!value) return child;
@@ -130,8 +146,14 @@ function keyOf(child: ReactNode, index: number): string {
  * The group paints nothing itself — no background, no border, no disabled fade.
  * A fade here would compound with the members' own down to a quarter opacity.
  *
- * Horizontal groups are content-width. For a run that fills its parent, put
- * `className="w-full"` on the group and `className="flex-1"` on each member.
+ * Horizontal groups are content-width. `isFullWidth` spans the parent and
+ * splits it equally between members — `flex-1 basis-0` on each, published as
+ * `isStretched` on the member's context — whatever their labels say. The parent
+ * needs a definite width for there to be anything to split.
+ *
+ * `isAttached={false}` keeps the shared axes and drops the shape: every member
+ * draws its own corner, nothing overlaps, the run takes a gap, and an unset
+ * `feedback` goes back to the lone button's `scale`.
  *
  * @example
  * <Button.Group variant="outline">
@@ -141,6 +163,20 @@ function keyOf(child: ReactNode, index: number): string {
  * </Button.Group>
  *
  * @example
+ * <Button.Group isAttached={false} size="sm" variant="outline">
+ *   <Button onPress={find}>Find</Button>
+ *   <Button onPress={exportFile}>Export</Button>
+ *   <Button onPress={share}>Share</Button>
+ * </Button.Group>
+ *
+ * @example
+ * <Button.Group isFullWidth variant="outline">
+ *   <Button onPress={monthly}>Monthly</Button>
+ *   <Button onPress={annual}>Annual</Button>
+ *   <Button onPress={once}>One-off</Button>
+ * </Button.Group>
+ *
+ * @example
  * <Button.Group>
  *   <Button onPress={save}>Save</Button>
  *   <Button.Group.Separator />

package/src/components/button/button.context.tsx

@@ -76,6 +76,10 @@ export type ButtonGroupContextValue = {
 	isDisabled?: boolean;
 	/** Press treatment for members. Unset falls back to `fade` — see `resolveButtonFeedback`. */
 	feedback?: PressableFeedback;
+	/** Members join into one shape. False, each keeps its own corner and the run takes a gap. */
+	isAttached: boolean;
+	/** The group spans its parent. Horizontal members then split it — see `isStretched`. */
+	isFullWidth: boolean;
 };
 
 export type ButtonGroupItemContextValue = ButtonGroupContextValue & {
@@ -83,6 +87,12 @@ export type ButtonGroupItemContextValue = ButtonGroupContextValue & {
 	position: ButtonGroupPosition;
 	/** Overlap the member before it, so the shared edge is drawn once. */
 	isSeamed: boolean;
+	/**
+	 * Take an equal share of a full-width horizontal run — `flex-1 basis-0`.
+	 * A custom member that should split the run reads this; one that should
+	 * keep its content width ignores it, as `Button.Group.Text` does.
+	 */
+	isStretched: boolean;
 };
 
 const ButtonGroupContext = createContext<ButtonGroupContextValue | null>(null);

package/src/components/button/button.tsx

@@ -74,6 +74,7 @@ function ButtonRoot({
 		isDisabled: resolvedIsDisabled,
 		isLoading,
 		isSeamed: item?.isSeamed ?? false,
+		isStretched: item?.isStretched ?? false,
 		orientation: item?.orientation ?? "horizontal",
 		size: resolvedSize,
 		variant: resolvedVariant,
@@ -96,7 +97,7 @@ function ButtonRoot({
 				busy={isLoading}
 				className={slots.root({ className })}
 				disabled={resolvedIsDisabled}
-				feedback={resolveButtonFeedback(feedback, item?.feedback, item !== null)}
+				feedback={resolveButtonFeedback(feedback, item?.feedback, item !== null, item?.isAttached)}
 				{...props}
 			>
 				<IconDefaultsProvider value={iconDefaults}>

package/src/components/button/button.variants.test.ts

@@ -1,4 +1,5 @@
 import { describe, expect, test } from "bun:test";
+import { cn } from "../../lib/cn";
 import { BUTTON_RADIUS_TOKENS, ICON_SIZE_TOKENS } from "../../styles/tokens";
 import {
 	BUTTON_FOREGROUND_TOKEN,
@@ -16,6 +17,7 @@ import {
 	resolveButtonFeedback,
 	resolveButtonLayout,
 	resolveGroupedButtonSize,
+	resolveGroupMemberStretch,
 	resolveGroupPositions,
 	resolveGroupSeams,
 	resolveSpinnerSwapIndex,
@@ -809,3 +811,155 @@ describe("resolveGroupedButtonSize", () => {
 		}
 	});
 });
+
+describe("a detached group", () => {
+	test("places every member on its own", () => {
+		// `only` is the lone member's position and draws the lone button's corner,
+		// so a spaced run is a row of whole buttons rather than a joined shape with
+		// gaps punched in it.
+		expect(resolveGroupPositions([true, true, true], { isAttached: false })).toEqual(["only", "only", "only"]);
+		expect(resolveGroupPositions([true, false, true], { isAttached: false })).toEqual(["only", null, "only"]);
+	});
+
+	test("still skips a separator", () => {
+		expect(resolveGroupPositions([false, true, false], { isAttached: false })).toEqual([null, "only", null]);
+	});
+
+	test("joins by default", () => {
+		expect(resolveGroupPositions([true, true], { isAttached: true })).toEqual(["first", "last"]);
+		expect(resolveGroupPositions([true, true], {})).toEqual(["first", "last"]);
+	});
+
+	test("overlaps nothing", () => {
+		// There is no shared edge to draw once, and a point of overlap would eat
+		// into the gap instead.
+		for (const shape of SHAPES) {
+			expect(resolveGroupSeams(shape, { isAttached: false }).every((seamed) => !seamed)).toBe(true);
+		}
+		expect(resolveGroupSeams([true, true, true], { isAttached: true })).toEqual([false, true, true]);
+	});
+
+	test("draws each member's own corner", () => {
+		for (const size of BUTTON_SIZES) {
+			const step = size.startsWith("icon-") ? size.slice("icon-".length) : size;
+			const cls = buttonVariants({ groupPosition: "only", size }).root();
+			expect(cls).toContain(`rounded-button-${step}`);
+			expect(cls).not.toMatch(/\brounded-[sebt]-/);
+		}
+	});
+
+	test("spaces its members with a gap on either axis", () => {
+		for (const orientation of BUTTON_GROUP_ORIENTATIONS) {
+			expect(buttonVariants({ isAttached: false, orientation }).group()).toMatch(/\bgap-2\b/);
+		}
+	});
+
+	test("an attached group still holds no gap", () => {
+		for (const orientation of BUTTON_GROUP_ORIENTATIONS) {
+			expect(buttonVariants({ isAttached: true, orientation }).group()).not.toMatch(/\bgap-/);
+		}
+	});
+});
+
+describe("resolveButtonFeedback in a detached group", () => {
+	test("falls back to the lone button's scale", () => {
+		// Tearing a seam is impossible with no seam, so the group rung is dropped.
+		expect(resolveButtonFeedback(undefined, undefined, true, false)).toBe("scale");
+	});
+
+	test("still fades when attached", () => {
+		expect(resolveButtonFeedback(undefined, undefined, true, true)).toBe("fade");
+	});
+
+	test("defaults to attached, which is what a group is", () => {
+		expect(resolveButtonFeedback(undefined, undefined, true)).toBe("fade");
+	});
+
+	test("honours an explicit `none` either way", () => {
+		for (const isAttached of [true, false]) {
+			expect(resolveButtonFeedback("none", undefined, true, isAttached)).toBe("none");
+			expect(resolveButtonFeedback(undefined, "none", true, isAttached)).toBe("none");
+		}
+	});
+
+	test("still lets the group or the member name a treatment", () => {
+		expect(resolveButtonFeedback(undefined, "fade", true, false)).toBe("fade");
+		expect(resolveButtonFeedback("scale-fade", "fade", true, false)).toBe("scale-fade");
+	});
+});
+
+describe("a full-width group", () => {
+	test("spans its parent instead of hugging its content", () => {
+		const cls = buttonVariants({ isFullWidth: true, orientation: "horizontal" }).group();
+		expect(cls).toMatch(/\bw-full\b/);
+		expect(cls).toMatch(/\bself-stretch\b/);
+		expect(cls).not.toMatch(/\bself-start\b/);
+	});
+
+	test("fills the width when vertical too", () => {
+		const cls = buttonVariants({ isFullWidth: true, orientation: "vertical" }).group();
+		expect(cls).toMatch(/\bw-full\b/);
+		expect(cls).toMatch(/\bself-stretch\b/);
+	});
+
+	test("hugs its content by default", () => {
+		const cls = buttonVariants({ orientation: "horizontal" }).group();
+		expect(cls).toMatch(/\bself-start\b/);
+		expect(cls).not.toMatch(/\bw-full\b/);
+	});
+
+	test("keeps a gap when it is also detached", () => {
+		const cls = buttonVariants({ isAttached: false, isFullWidth: true }).group();
+		expect(cls).toMatch(/\bgap-2\b/);
+		expect(cls).toMatch(/\bw-full\b/);
+	});
+});
+
+describe("a stretched member", () => {
+	test("splits the run equally rather than by content", () => {
+		// `basis-0` is the half that matters: with `flex-1` alone Yoga shares out
+		// only the space left over, and the widths still follow the labels.
+		const cls = buttonVariants({ isStretched: true }).root();
+		expect(cls).toMatch(/\bflex-1\b/);
+		expect(cls).toMatch(/\bbasis-0\b/);
+	});
+
+	test("does not stretch by default", () => {
+		const cls = buttonVariants().root();
+		expect(cls).not.toMatch(/\bflex-1\b/);
+		expect(cls).not.toMatch(/\bbasis-0\b/);
+	});
+
+	test("yields to a caller's flex", () => {
+		const slot = buttonVariants({ isStretched: true }).root({ className: "flex-none" });
+		expect(slot).toMatch(/\bflex-none\b/);
+		expect(slot).not.toMatch(/\bflex-1\b/);
+		const merged = cn(buttonVariants({ isStretched: true }).root(), "flex-none");
+		expect(merged).toMatch(/\bflex-none\b/);
+		expect(merged).not.toMatch(/\bflex-1\b/);
+	});
+
+	test("keeps its own corner and height", () => {
+		const cls = buttonVariants({ groupPosition: "first", isStretched: true, size: "md" }).root();
+		expect(cls).toContain("h-button-md");
+		expect(cls).toContain("rounded-s-button-md");
+	});
+});
+
+describe("resolveGroupMemberStretch", () => {
+	test("stretches members of a full-width horizontal run", () => {
+		expect(resolveGroupMemberStretch({ isFullWidth: true, orientation: "horizontal" })).toBe(true);
+	});
+
+	test("leaves a vertical run to the cross axis it already stretches on", () => {
+		// `basis-0` on the main axis of a column with no definite height would
+		// collapse every member to nothing.
+		expect(resolveGroupMemberStretch({ isFullWidth: true, orientation: "vertical" })).toBe(false);
+	});
+
+	test("stretches nothing by default", () => {
+		for (const orientation of BUTTON_GROUP_ORIENTATIONS) {
+			expect(resolveGroupMemberStretch({ isFullWidth: false, orientation })).toBe(false);
+		}
+	});
+});