@delacour/react-native-ui 0.1.0-alpha.20261009012154 → 0.1.0-alpha.20261009012956

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.1.0-alpha.20261009012154",
+	"version": "0.1.0-alpha.20261009012956",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -116,8 +116,8 @@
 	},
 	"peerDependencies": {
 		"@central-icons-react-native/round-outlined-radius-1-stroke-1.5": "^1.1",
-		"@delacour/react-native-bottom-sheet": "0.1.0-alpha.20261009012154",
-		"@delacour/react-native-charts": "0.1.0-alpha.20261009012154",
+		"@delacour/react-native-bottom-sheet": "0.1.0-alpha.20261009012956",
+		"@delacour/react-native-charts": "0.1.0-alpha.20261009012956",
 		"@legendapp/list": ">=3.3",
 		"expo-linear-gradient": ">=15",
 		"expo-router": ">=57",

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);
+		}
+	});
+});

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

@@ -41,6 +41,11 @@ export type ButtonSpinnerPlacement = (typeof BUTTON_SPINNER_PLACEMENTS)[number];
 export type ButtonGroupOrientation = (typeof BUTTON_GROUP_ORIENTATIONS)[number];
 export type ButtonGroupPosition = (typeof BUTTON_GROUP_POSITIONS)[number];
 
+/** How a group shapes its run. Omitted, a group joins — that is what a group is. */
+export type ButtonGroupShapeOptions = {
+	isAttached?: boolean;
+};
+
 /** A member's place in its group, or `none` for a button standing on its own. */
 export type ButtonGroupSlotPosition = ButtonGroupPosition | "none";
 
@@ -135,8 +140,9 @@ export const buttonVariants = tv({
 		/**
 		 * A `Button.Group`'s box.
 		 *
-		 * Holds no `gap` and no `overflow-hidden`, and both absences are
-		 * load-bearing. A gap is the seam this component exists to close. A clip
+		 * Holds no `gap` while attached and no `overflow-hidden` ever, and both
+		 * absences are load-bearing. A gap is the seam a joined run exists to
+		 * close — only `isAttached: false` adds one, where there is no seam. A clip
 		 * would square off the very corners the position compounds just rounded,
 		 * and would have to restate the group's own corner to avoid it — while the
 		 * members already square themselves, which is the whole point.
@@ -192,6 +198,21 @@ export const buttonVariants = tv({
 			horizontal: { group: "flex-row self-start" },
 			vertical: { group: "flex-col" },
 		},
+		// Declared after `orientation` on purpose: `tv` merges in declaration
+		// order, so `self-stretch` here replaces the horizontal run's `self-start`
+		// rather than losing to it.
+		/** A `Button.Group` that spans its parent. The members split it — see `isStretched`. */
+		isFullWidth: { true: { group: "w-full self-stretch" }, false: {} },
+		/** A `Button.Group` whose members join into one shape. Detached, they stand apart by a gap. */
+		isAttached: { true: {}, false: { group: "gap-2" } },
+		/**
+		 * A member of a full-width horizontal run, taking an equal share of it.
+		 *
+		 * `basis-0` is the half that matters. With `flex-1` alone Yoga shares out
+		 * only the space left over after each member's content width, so the
+		 * widths still follow the labels; from a zero basis every share is equal.
+		 */
+		isStretched: { true: { root: "flex-1 basis-0" }, false: {} },
 		// `middle` is the one position whose corner needs neither the size nor the
 		// orientation, so it lands here rather than in six compound cells that
 		// would all say the same word.
@@ -304,6 +325,9 @@ export const buttonVariants = tv({
 		orientation: "horizontal",
 		groupPosition: "none",
 		isSeamed: false,
+		isFullWidth: false,
+		isAttached: true,
+		isStretched: false,
 		isDisabled: false,
 		isLoading: false,
 		isDimmedWhileLoading: false,
@@ -413,9 +437,18 @@ export function resolveGroupedButtonSize(own: ButtonSize | undefined, group: But
  * trade {@link resolveSpinnerSwapIndex} already makes. React Native has no
  * sibling selector, so this is the only place a member's corner can be decided.
  *
+ * A detached run (`isAttached: false`) places every member `only` — the lone
+ * position, which draws the lone button's corner — rather than minting a fourth
+ * sentinel: a spaced member *is* a button on its own that happens to share props.
+ *
  * Pure, so the whole matrix is reachable from `bun test`. See AGENTS.md.
  */
-export function resolveGroupPositions(isMember: readonly boolean[]): (ButtonGroupPosition | null)[] {
+export function resolveGroupPositions(
+	isMember: readonly boolean[],
+	{ isAttached = true }: ButtonGroupShapeOptions = {}
+): (ButtonGroupPosition | null)[] {
+	if (!isAttached) return isMember.map((member) => (member ? "only" : null));
+
 	const count = isMember.reduce((total, member) => (member ? total + 1 : total), 0);
 	let seen = 0;
 
@@ -445,9 +478,16 @@ export function resolveGroupPositions(isMember: readonly boolean[]): (ButtonGrou
  * `isMember[-1]` is `undefined`, so the first child falls out as `false` without
  * a case of its own.
  *
+ * A detached run has no shared edge, so nothing overlaps: a point of overlap
+ * there would only eat into the gap.
+ *
  * Pure, so the whole matrix is reachable from `bun test`. See AGENTS.md.
  */
-export function resolveGroupSeams(isMember: readonly boolean[]): boolean[] {
+export function resolveGroupSeams(
+	isMember: readonly boolean[],
+	{ isAttached = true }: ButtonGroupShapeOptions = {}
+): boolean[] {
+	if (!isAttached) return isMember.map(() => false);
 	return isMember.map((member, index) => member && isMember[index - 1] === true);
 }
 
@@ -463,6 +503,10 @@ export function resolveGroupSeams(isMember: readonly boolean[]): boolean[] {
  * while its neighbours hold still, so the seam the group exists to close tears
  * open for the length of the press. `fade` moves no geometry.
  *
+ * Only while the group is *attached*. A detached run has no seam to tear, so
+ * its members fall back to the lone button's `scale`. `isAttached` defaults to
+ * `true`, because joining is what a group does when it says nothing.
+ *
  * A caller still gets `scale` by asking for it, on one button or on a whole
  * group. `pressedScale` beats both, because `resolvePressedState` lets an
  * explicit value win on the axis it names — see `pressable.variants.ts`.
@@ -472,9 +516,30 @@ export function resolveGroupSeams(isMember: readonly boolean[]): boolean[] {
 export function resolveButtonFeedback(
 	own: PressableFeedback | undefined,
 	group: PressableFeedback | undefined,
-	isGrouped: boolean
+	isGrouped: boolean,
+	isAttached = true
 ): PressableFeedback {
-	return own ?? group ?? (isGrouped ? BUTTON_GROUP_FEEDBACK : BUTTON_FEEDBACK);
+	return own ?? group ?? (isGrouped && isAttached ? BUTTON_GROUP_FEEDBACK : BUTTON_FEEDBACK);
+}
+
+/**
+ * Whether a group's members take an equal share of its width.
+ *
+ * Horizontal only. A vertical run already stretches its members 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 `isFullWidth` on a vertical group
+ * widens the group and does nothing further.
+ *
+ * Pure, so the whole matrix is reachable from `bun test`. See AGENTS.md.
+ */
+export function resolveGroupMemberStretch({
+	isFullWidth,
+	orientation,
+}: {
+	isFullWidth: boolean;
+	orientation: ButtonGroupOrientation;
+}): boolean {
+	return isFullWidth && orientation === "horizontal";
 }
 
 export type ButtonVariantProps = VariantProps<typeof buttonVariants>;

package/src/components/button/index.ts

@@ -28,6 +28,7 @@ export {
 	BUTTON_VARIANTS,
 	type ButtonGroupOrientation,
 	type ButtonGroupPosition,
+	type ButtonGroupShapeOptions,
 	type ButtonGroupSlotPosition,
 	type ButtonIconSize,
 	type ButtonLabelSize,
@@ -41,6 +42,7 @@ export {
 	resolveButtonLayout,
 	resolveButtonSizeStep,
 	resolveGroupedButtonSize,
+	resolveGroupMemberStretch,
 	resolveGroupPositions,
 	resolveGroupSeams,
 } from "./button.variants";