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

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

@@ -0,0 +1,111 @@
+import { describe, expect, test } from "bun:test";
+import { ICON_SIZE_TOKENS } from "../../styles/tokens";
+import {
+	ICON_FALLBACK_COLOR,
+	ICON_FALLBACK_SIZE_CLASS,
+	ICON_SIZES,
+	iconVariants,
+	isIconSize,
+	resolveIconSizeClass,
+} from "./icon.variants";
+
+/**
+ * Position of a class string's `size-icon-*` token on the shared icon scale.
+ *
+ * Compares by step rather than by points so a test says what it means — that
+ * one icon is a step larger than another — and does not have to be edited when
+ * a token's value is retuned in `tokens.css`. `tokens.test.ts` is what keeps
+ * this array ordered.
+ */
+function iconStep(cls: string): number {
+	const token = cls.match(/\bsize-(icon-[\w-]+)\b/)?.[1];
+	return ICON_SIZE_TOKENS.indexOf(token as (typeof ICON_SIZE_TOKENS)[number]);
+}
+
+describe("iconVariants", () => {
+	test("gives every named size a distinct token, increasing with it", () => {
+		const steps = ICON_SIZES.map((size) => iconStep(iconVariants({ size })));
+		expect(steps).not.toContain(-1);
+		expect(new Set(steps).size).toBe(ICON_SIZES.length);
+		expect([...steps]).toEqual([...steps].sort((a, b) => a - b));
+	});
+
+	// The whole point of the shared scale: a named size has to name a token, not
+	// a raw utility, or Spinner cannot line up with it.
+	test("names a token from the shared icon scale at every size", () => {
+		for (const size of ICON_SIZES) {
+			expect(iconVariants({ size })).toBe(`size-icon-${size}`);
+		}
+	});
+
+	// An icon takes a colour value rather than a class, so the size axis must not
+	// smuggle one in. See ICON_FALLBACK_COLOR and useThemeColor.
+	test("carries size only, never colour", () => {
+		for (const size of ICON_SIZES) {
+			expect(iconVariants({ size })).toMatch(/\bsize-/);
+			expect(iconVariants({ size })).not.toMatch(/\b(text|bg|border)-/);
+		}
+	});
+
+	// A default would emit from inside this call, ahead of an inherited class in
+	// the merge, and the fallback would then beat the enclosing component.
+	test("emits nothing without a size, so the fallback can lose to context", () => {
+		expect(iconVariants() ?? "").not.toMatch(/\bsize-/);
+	});
+});
+
+describe("isIconSize", () => {
+	test("separates a named size from an edge length", () => {
+		for (const size of ICON_SIZES) {
+			expect(isIconSize(size)).toBe(true);
+		}
+		expect(isIconSize(18)).toBe(false);
+		expect(isIconSize(undefined)).toBe(false);
+	});
+});
+
+describe("resolveIconSizeClass", () => {
+	test("falls back when there is nothing to go on", () => {
+		expect(resolveIconSizeClass({})).toBe(ICON_FALLBACK_SIZE_CLASS);
+	});
+
+	test("an inherited class beats the fallback", () => {
+		expect(resolveIconSizeClass({ inherited: "size-icon-xs" })).toBe("size-icon-xs");
+	});
+
+	test("a named size beats an inherited class", () => {
+		expect(resolveIconSizeClass({ inherited: "size-icon-xs", size: "xl" })).toBe("size-icon-xl");
+	});
+
+	test("a className beats a named size", () => {
+		expect(resolveIconSizeClass({ className: "size-7", size: "xs" })).toBe("size-7");
+	});
+
+	test("a className beats an inherited class", () => {
+		expect(resolveIconSizeClass({ className: "size-7", inherited: "size-icon-sm" })).toBe("size-7");
+	});
+
+	test("resolves to exactly one size utility, whatever it was given", () => {
+		const cls = resolveIconSizeClass({ className: "size-7", inherited: "size-icon-xl", size: "xs" });
+		expect(cls.split(" ").filter((name) => name.startsWith("size-"))).toHaveLength(1);
+	});
+
+	// A numeric size is not a class — it goes straight to the glyph's prop, and
+	// uniwind then skips its mapping because that prop is already defined. The
+	// chain is still built and still passed; nothing reads it.
+	test("a numeric size leaves the chain untouched", () => {
+		expect(resolveIconSizeClass({ size: 18 })).toBe(ICON_FALLBACK_SIZE_CLASS);
+		expect(resolveIconSizeClass({ inherited: "size-icon-sm", size: 18 })).toBe("size-icon-sm");
+	});
+
+	test("carries through a className that is not a size", () => {
+		expect(resolveIconSizeClass({ className: "opacity-50" })).toContain("opacity-50");
+		expect(resolveIconSizeClass({ className: "opacity-50" })).toContain(ICON_FALLBACK_SIZE_CLASS);
+	});
+});
+
+describe("ICON_FALLBACK_COLOR", () => {
+	test("names a token the theme always defines", () => {
+		expect(ICON_FALLBACK_COLOR).toBe("foreground");
+	});
+});

package/src/components/icon/icon.variants.ts

@@ -0,0 +1,79 @@
+import { cn } from "../../lib/cn";
+import { tv } from "../../lib/tv";
+
+export const ICON_SIZES = ["xs", "sm", "md", "lg", "xl", "2xl"] as const;
+
+export type IconSize = (typeof ICON_SIZES)[number];
+
+/**
+ * Edge length for each named icon size, as a token class rather than a number.
+ *
+ * The steps come from the `--spacing-icon-*` scale in `tokens.css`, which
+ * `Spinner` names identically — so `size="md"` is the same edge length in both
+ * and one can replace the other without the layout moving. A control's own size
+ * axis indexes into the same scale rather than restating a number.
+ *
+ * A className can never size a Central Icon through a style. `CentralIconBase`
+ * spreads its props onto `<Svg>` *before* its own `width`/`height`, and
+ * `Svg.render` then pushes the width/height-derived styles onto the root last,
+ * where they beat anything a className contributed. So the size has to arrive as
+ * the `size` **prop** — `Icon` runs this class through `withUniwind` to recover
+ * the width and hands that to the glyph. See `icon.tsx`.
+ *
+ * No `defaultVariants` on purpose. The fallback has to *lose* to an inherited
+ * class, and a default here would emit from inside this same call, ahead of it
+ * in the merge. {@link resolveIconSizeClass} orders the sources instead.
+ *
+ * Free of React Native imports so it stays unit-testable — `bun test` cannot
+ * parse React Native's Flow-typed source. See AGENTS.md.
+ */
+export const iconVariants = tv({
+	variants: {
+		size: {
+			xs: "size-icon-xs",
+			sm: "size-icon-sm",
+			md: "size-icon-md",
+			lg: "size-icon-lg",
+			xl: "size-icon-xl",
+			"2xl": "size-icon-2xl",
+		},
+	},
+});
+
+/** Edge length used with no `size`, no `className` and nothing to inherit — 20pt. */
+export const ICON_FALLBACK_SIZE_CLASS = "size-icon-lg";
+
+/** Theme token used with no `color` prop and nothing to inherit from. */
+export const ICON_FALLBACK_COLOR = "foreground";
+
+/** Whether a size is one of the named steps rather than an edge length in points. */
+export function isIconSize(size: IconSize | number | undefined): size is IconSize {
+	return typeof size === "string";
+}
+
+/**
+ * The class chain that sizes an icon, weakest source first: the fallback, the
+ * enclosing component's class, this icon's named size, then the caller's own
+ * className. `cn` resolves the conflicts, so the last `size-*` wins.
+ *
+ * A numeric `size` is deliberately absent. It is not a class — it goes straight
+ * to the glyph's prop, and uniwind then skips its mapping because that prop is
+ * already defined. That skip *is* the precedence rule.
+ *
+ * Note for callers overriding through `className`: use `size-*`, not `w-*` with
+ * `h-*`. tailwind-merge conflicts `size` into `w`/`h` but not the reverse, so a
+ * trailing `w-6` will not clear a leading `size-5`.
+ *
+ * Pure, so the whole ladder is reachable from `bun test`. See AGENTS.md.
+ */
+export function resolveIconSizeClass({
+	size,
+	inherited,
+	className,
+}: {
+	size?: IconSize | number;
+	inherited?: string;
+	className?: string;
+}): string {
+	return cn(ICON_FALLBACK_SIZE_CLASS, inherited, isIconSize(size) ? iconVariants({ size }) : undefined, className);
+}

package/src/components/icon/index.ts

@@ -0,0 +1,11 @@
+export { Icon, type IconComponent, type IconProps } from "./icon";
+export { type IconDefaults, IconDefaultsProvider, useIconDefaults } from "./icon.context";
+export {
+	ICON_FALLBACK_COLOR,
+	ICON_FALLBACK_SIZE_CLASS,
+	ICON_SIZES,
+	type IconSize,
+	iconVariants,
+	isIconSize,
+	resolveIconSizeClass,
+} from "./icon.variants";

package/src/components/input/AGENTS.md

@@ -0,0 +1,126 @@
+# Input
+
+A text field, and the box that can hold content beside it. Root plus
+`Input.Group` and its two decorators, `Prefix` and `Suffix`.
+
+`import { Input } from "@delacour/react-native-ui/input";`
+
+## Files
+
+| File | What it holds |
+| --- | --- |
+| `index.ts` | → `@delacour/react-native-ui/input` |
+| `input.tsx` | Root + the `Object.assign` compound surface |
+| `input-group.tsx` | `Input.Group`, plus its own nested surface |
+| `input-group-decorator.tsx` | The shared body behind both decorators |
+| `input-group-prefix.tsx` | `Input.Group.Prefix` |
+| `input-group-suffix.tsx` | `Input.Group.Suffix` |
+| `input.context.tsx` | `InputGroupProvider`, `useInputGroup()`, `useInputGroupContext()`, `useInputGroupPart()` |
+| `input.types.ts` | Prop types shared by two or more parts |
+| `input.variants.ts` | Pure `tv()` slots + resolvers, no RN imports |
+| `input.variants.test.ts` | |
+
+## Design
+
+- **Variants**: `primary`, `secondary`. **Sizes**: `sm`, `md`, `lg` — the box
+  height, the value's type scale and a decorator's icon step, on one axis.
+- **The box is one slot with two homes, and that is the whole design.** The
+  `root` slot of `inputVariants` lands on the `TextInput` when a field stands
+  alone and on `Input.Group`'s row when it does not. `resolveInputFieldClass` is
+  the decision, and it is pure, so `input.variants.test.ts` sweeps the entire
+  matrix and asserts that every chrome utility a lone field wears is present on
+  the group's row. A grouped field is therefore the *same* box rather than a
+  similar one. **Do not give `Input.Group` a border, background or height of its
+  own** — a second class string is a second thing that can drift, and the drift
+  would be a one-pixel difference nobody notices until it is shipped.
+- **The group owns the axes, because it owns the box.** `variant`, `size`,
+  `isInvalid` and `isDisabled` live on `Input.Group`, and an `Input` inside one
+  reads them from context — the same way a [`ListGroup.Item`](../list-group/AGENTS.md) takes no `variant`.
+  The field's own copies of those props are ignored while it is grouped. One box,
+  one set of axes; two would be two answers to the same question.
+- **The two state axes have three sources, and the nearest wins:**
+  `Input.Group` → the `Input`'s own prop → the enclosing [`Field`](../field/AGENTS.md). An `Input`
+  inside `<Field isInvalid>` goes `destructive` with nothing said at the call site, and
+  `<Input isInvalid={false} />` opts that one control out. `Input.Group` reads
+  the `Field` too, or a decorated field inside an invalid one would stay calm
+  while its label went red. Both are `??` chains, so an explicit `false` is a
+  value rather than an absence — the rule `pressedScale` already follows.
+- **Uniwind bridges the three colour *props*, so rule 7 is untouched.** A
+  `TextInput`'s placeholder, caret and selection take a colour value, not a
+  style, and uniwind's own `TextInput` — which is what a plain
+  `import { TextInput } from "react-native"` resolves to, via its Metro
+  resolver — accepts a className for each and compiles it to `styles.accentColor`.
+  So this component wraps nothing in `withUniwind`, and the `Icon` carve-out
+  stays spent exactly once.
+- **Those classNames must be `accent-*` utilities.** `accent-muted-foreground`,
+  never `text-muted-foreground`. Uniwind reads only `accentColor` off the
+  compiled class, so anything else resolves to nothing: it warns once in
+  development and leaves the prop undefined, which renders as the platform
+  default rather than as an error. The defaults live in `input.variants.ts`.
+- **`placeholderTextColorClassName` is `Omit`ed from `InputProps`.** Uniwind's
+  name and ours would otherwise both reach the same colour, and a caller setting
+  one while the component set the other is a bug with no error attached.
+  `selectionColorClassName` keeps uniwind's name because it already is the name
+  this package would have chosen; only its default is supplied here.
+- **Focus is React state, not a `focus:` class.** Uniwind's `TextInput` does
+  track its own focus, and `focus:border-ring` would work on a lone field — and
+  do nothing at all for the box `Input.Group` draws around a grouped one, since a
+  `View` cannot see a sibling's focus. One state, read by an `isFocused` variant,
+  keeps the two identical and puts the decision somewhere `bun test` can reach.
+- **Invalid outranks focus.** A field that went grey the moment it was tapped
+  would drop the only signal it has that its value is wrong, exactly while the
+  value is being corrected. The border, the caret and the decorators all stay
+  `destructive`.
+- **A multiline field turns its height into a floor**, and the row aligns to the
+  top with it — centred decorators would drift down the side of a paragraph
+  instead of sitting on its first line. `py-0` on the single-line branch is
+  load-bearing on Android, where the platform's own vertical padding would
+  otherwise push the value off centre inside a fixed height.
+- **Prefix and suffix share one `decorator` slot and one implementation.** They
+  are the same box in different places — the row's `gap` is what separates
+  them — so a second identical slot would only be a second thing to keep in step.
+  `input-group-decorator.tsx` is the shared leaf; the two part files name it.
+- **A decorator wraps bare text in a `Text`.** `<Input.Group.Prefix>$</...>` is
+  the shortest thing anyone will write and React Native cannot render a string
+  outside a `<Text>`, so it would crash. Consecutive strings collapse into one —
+  the same rule, and the same reason, as [`Button`](../button/AGENTS.md).
+- **Pressing the group focuses the field.** A lone field is its own tap target
+  edge to edge; a grouped one only covers the middle of the box, so the group is
+  a `Pressable` with `feedback="none"` whose press focuses the field through the
+  ref it shares on context. A `Button` inside a decorator still receives its own
+  press.
+- **There is no `Input.Label`, `Input.Description` or `Input.ErrorMessage`.**
+  [`Text.Label`](../text/AGENTS.md) and `Text.Caption` already are those, and a label defined twice is
+  a type scale that can drift. `apps/playground`'s `/input/form` is what the
+  trade looks like at a call site.
+- **`--spacing-input-*` is its own scale**, matching `--spacing-button-*` in
+  value and not in name — this is the case [Sizing](../../../AGENTS.md#sizing)
+  anticipated. A token test asserts the two stay level, so either can be retuned
+  without silently dragging the other along.
+
+## Joining a Button.Group
+
+A field can sit inside a [`Button.Group`](../button/AGENTS.md#buttongroup) and
+join the run, so `<Button.Group><Input /><Button>Go</Button></Button.Group>`
+reads as one control rather than two boxes touching.
+
+- **A joined field draws the *group's* corner, not its own.** Alone it takes the
+  generic ramp — `rounded-lg`, stepping down to `rounded-md` at `sm` — because a
+  field and the button beside it are meant to be retunable apart, which is the
+  same reason `--spacing-input-*` exists rather than the field reading
+  `h-button-md`. In a group that independence is exactly wrong: a run capped by
+  a field at one end and a button at the other would draw two different arcs.
+  The group owns the shape of its run, so a joined field switches to
+  `--radius-button-*`. `input.variants.test.ts` asserts the two emit identical
+  corner classes cell for cell, so the copies cannot drift.
+- **A field nested in an `Input.Group` never consults the member axes.** That
+  row owns the box, and `resolveInputFieldClass` already drops the `root` slot
+  entirely when the field is grouped — so the corner and the seam land on the
+  row, once, exactly as they land on a lone field. The two are threaded through
+  the same `InputBoxState` for that reason: one struct, one box, wherever it
+  ends up.
+- **`size` comes from the enclosing group outright; `isDisabled` stays a
+  fallback.** Controls of different heights do not join, so the group's size
+  wins. Disabled is the outermost rung of an already-three-deep ladder
+  (`Input.Group` → own prop → `Field` → `Button.Group`), so a single field in a
+  run can still be the only one disabled.

package/src/components/input/index.ts

@@ -0,0 +1,27 @@
+export { Input, type InputProps } from "./input";
+export {
+	type InputGroupContextValue,
+	InputGroupProvider,
+	useInputGroup,
+	useInputGroupContext,
+} from "./input.context";
+export type { InputSlotProps } from "./input.types";
+export {
+	INPUT_DECORATOR_ICON_TOKEN,
+	INPUT_INVALID_DECORATOR_ICON_TOKEN,
+	INPUT_INVALID_SELECTION_ACCENT_CLASS,
+	INPUT_PLACEHOLDER_ACCENT_CLASS,
+	INPUT_SELECTION_ACCENT_CLASS,
+	INPUT_SIZES,
+	INPUT_VARIANTS,
+	type InputBoxState,
+	type InputSize,
+	type InputVariant,
+	type InputVariantProps,
+	inputVariants,
+	resolveInputFieldClass,
+	resolveInputGroupClass,
+	resolvePlaceholderAccentClass,
+	resolveSelectionAccentClass,
+} from "./input.variants";
+export type { InputGroupProps } from "./input-group";

package/src/components/input/input-group-decorator.tsx

@@ -0,0 +1,84 @@
+import { Children, type ReactElement, type ReactNode, useMemo } from "react";
+import { View } from "react-native";
+import { IconDefaultsProvider } from "../icon";
+import { Text } from "../text";
+import { TextClassProvider } from "../text/text.context";
+import { useInputGroupPart } from "./input.context";
+import type { InputSlotProps } from "./input.types";
+import { INPUT_DECORATOR_ICON_TOKEN, INPUT_INVALID_DECORATOR_ICON_TOKEN, inputVariants } from "./input.variants";
+
+/**
+ * The shared implementation behind `Input.Group.Prefix` and `.Suffix`.
+ *
+ * The two are the same box in different places — the row's `gap` is what puts
+ * them either side of the field, not a class of their own — so they read one
+ * `decorator` slot and share this file. Duplicating {@link wrapTextChildren}
+ * into two part files to keep them apart is exactly what this leaf avoids.
+ *
+ * Not a part itself: it takes the caller-facing name so the error thrown
+ * outside a group names `Input.Group.Prefix` rather than something private.
+ */
+export function InputGroupDecorator({
+	part,
+	className,
+	children,
+	...props
+}: InputSlotProps & { part: string }): ReactElement {
+	const { isInvalid, size } = useInputGroupPart(part);
+	const slots = inputVariants({ isInvalid, size });
+
+	const iconClassName = slots.decoratorIcon();
+	const iconDefaults = useMemo(
+		() => ({
+			className: iconClassName,
+			color: isInvalid ? INPUT_INVALID_DECORATOR_ICON_TOKEN : INPUT_DECORATOR_ICON_TOKEN,
+		}),
+		[iconClassName, isInvalid]
+	);
+
+	return (
+		<View className={slots.decorator({ className })} {...props}>
+			<IconDefaultsProvider value={iconDefaults}>
+				<TextClassProvider value={slots.decoratorText()}>{wrapTextChildren(children)}</TextClassProvider>
+			</IconDefaultsProvider>
+		</View>
+	);
+}
+InputGroupDecorator.displayName = "DelacourUI.Input.Group.Decorator";
+
+/**
+ * Wraps bare text children in a `Text`.
+ *
+ * A decorator renders a `View`, and React Native cannot render a string outside
+ * a `<Text>` — so `<Input.Group.Prefix>$</Input.Group.Prefix>`, which is the
+ * shortest thing anyone will write, would otherwise crash. Consecutive strings
+ * and numbers are collected into one `Text` rather than one each, so a
+ * `{currency}{symbol}` pair is a single affix instead of two spaced apart by
+ * nothing.
+ *
+ * The wrapped text needs no className: the decorator has already published the
+ * affix treatment through `TextClassProvider`.
+ */
+function wrapTextChildren(children: ReactNode): ReactNode {
+	const items = Children.toArray(children);
+	const output: ReactNode[] = [];
+	let run: (string | number)[] = [];
+
+	const flushRun = () => {
+		if (run.length === 0) return;
+		output.push(<Text key={`affix-${output.length}`}>{run.join("")}</Text>);
+		run = [];
+	};
+
+	for (const child of items) {
+		if (typeof child === "string" || typeof child === "number") {
+			run.push(child);
+			continue;
+		}
+		flushRun();
+		output.push(child);
+	}
+	flushRun();
+
+	return output;
+}

package/src/components/input/input-group-prefix.tsx

@@ -0,0 +1,16 @@
+import type { ReactElement } from "react";
+import type { InputSlotProps } from "./input.types";
+import { InputGroupDecorator } from "./input-group-decorator";
+
+/**
+ * Leading content inside the field's own box — an icon, a text affix, a control.
+ *
+ * An `Icon` needs nothing said at the call site: it inherits the field's icon
+ * step and a muted colour from the decorator's `IconDefaultsProvider`, and turns
+ * destructive with the group when the value is invalid. A bare string is wrapped in a
+ * `Text` that inherits the same affix treatment.
+ */
+export function InputGroupPrefix(props: InputSlotProps): ReactElement {
+	return <InputGroupDecorator part="Input.Group.Prefix" {...props} />;
+}
+InputGroupPrefix.displayName = "DelacourUI.Input.Group.Prefix";

package/src/components/input/input-group-suffix.tsx

@@ -0,0 +1,15 @@
+import type { ReactElement } from "react";
+import type { InputSlotProps } from "./input.types";
+import { InputGroupDecorator } from "./input-group-decorator";
+
+/**
+ * Trailing content inside the field's own box — an icon, a text affix, a control.
+ *
+ * Draws nothing of its own, unlike `ListGroup.ItemSuffix`: a row in a list has a
+ * default chevron because it always navigates, whereas a field's trailing slot
+ * has no one thing it usually holds.
+ */
+export function InputGroupSuffix(props: InputSlotProps): ReactElement {
+	return <InputGroupDecorator part="Input.Group.Suffix" {...props} />;
+}
+InputGroupSuffix.displayName = "DelacourUI.Input.Group.Suffix";

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

@@ -0,0 +1,140 @@
+import { type ReactElement, type ReactNode, useCallback, useMemo, useRef, useState } from "react";
+import type { TextInput } from "react-native";
+import { useButtonGroupItemContext } from "../button/button.context";
+import { resolveButtonSizeStep } from "../button/button.variants";
+import { useFieldContext } from "../field/field.context";
+import { Pressable } from "../pressable";
+import { type InputGroupContextValue, InputGroupProvider } from "./input.context";
+import { type InputSize, type InputVariant, resolveInputGroupClass } from "./input.variants";
+import { InputGroupPrefix } from "./input-group-prefix";
+import { InputGroupSuffix } from "./input-group-suffix";
+
+export type InputGroupProps = {
+	/** Visual variant of the box. Read by the `Input` inside it. */
+	variant?: InputVariant;
+	/** Size of the box, the field's type scale and a decorator's icon. */
+	size?: InputSize;
+	/**
+	 * Reports an invalid value: the border, the caret and the decorators all turn
+	 * destructive. Inherited from an enclosing `Field` when it is not given.
+	 */
+	isInvalid?: boolean;
+	/**
+	 * Disables the field inside and fades the whole box. Inherited from an
+	 * enclosing `Field` when it is not given.
+	 */
+	isDisabled?: boolean;
+	className?: string;
+	children?: ReactNode;
+};
+
+function InputGroupRoot({
+	variant = "primary",
+	size = "md",
+	isInvalid,
+	isDisabled,
+	className,
+	children,
+}: InputGroupProps): ReactElement {
+	const fieldRef = useRef<TextInput | null>(null);
+	const field = useFieldContext();
+	const [isFocused, setFocused] = useState(false);
+
+	// An enclosing `Field` is the outermost source, so it is the last fallback:
+	// a group inside an invalid field turns destructive with it, and a group that
+	// names its own state overrides that. These are deliberately not defaulted
+	// in the destructure — `false` there would swallow the field before it was
+	// ever consulted.
+	const resolvedIsInvalid = isInvalid ?? field?.isInvalid ?? false;
+
+	// An enclosing `Button.Group` owns the run's shape, so a grouped field draws
+	// the group's corner and overlaps its neighbour instead of drawing its own.
+	// `size` comes from the group outright — controls of different heights do
+	// not join — while `isDisabled` stays a fallback, so one member of a group
+	// can still be the only one disabled.
+	const member = useButtonGroupItemContext();
+	const resolvedSize = member ? resolveButtonSizeStep(member.size) : size;
+	const resolvedIsMemberDisabled = isDisabled ?? field?.isDisabled ?? member?.isDisabled ?? false;
+
+	const context = useMemo<InputGroupContextValue>(
+		() => ({
+			fieldRef,
+			isDisabled: resolvedIsMemberDisabled,
+			isFocused,
+			isInvalid: resolvedIsInvalid,
+			setFocused,
+			size: resolvedSize,
+			variant,
+		}),
+		[resolvedIsMemberDisabled, isFocused, resolvedIsInvalid, resolvedSize, variant]
+	);
+
+	// A lone field is its own tap target edge to edge. Inside a group the field
+	// only covers the middle of the box, so the gutter and the space around a
+	// decorator have to hand the press on rather than swallow it.
+	const focusField = useCallback(() => fieldRef.current?.focus(), []);
+
+	return (
+		<InputGroupProvider value={context}>
+			<Pressable
+				accessible={false}
+				className={resolveInputGroupClass({
+					className,
+					groupPosition: member?.position ?? "none",
+					isDisabled: resolvedIsMemberDisabled,
+					isFocused,
+					isInvalid: resolvedIsInvalid,
+					isSeamed: member?.isSeamed ?? false,
+					orientation: member?.orientation ?? "horizontal",
+					size: resolvedSize,
+					variant,
+				})}
+				disabled={resolvedIsMemberDisabled}
+				feedback="none"
+				onPress={focusField}
+			>
+				{children}
+			</Pressable>
+		</InputGroupProvider>
+	);
+}
+
+/**
+ * A field with content inside its box — a leading icon, a trailing control, a
+ * text affix, or all three.
+ *
+ * The box is the same one a lone `Input` draws. It is not a copy: both read the
+ * one `root` slot of `inputVariants`, which lands on the `TextInput` when a
+ * field stands alone and on this row when it does not. A grouped field is
+ * therefore indistinguishable from an ungrouped one by construction, and
+ * `input.variants.test.ts` pins that as a property rather than a comment.
+ *
+ * The group owns the box, so it owns the axes that draw one — `variant`, `size`,
+ * `isInvalid`, `isDisabled` all live here and the `Input` inside reads them from
+ * context. One box, one set of axes.
+ *
+ * Pressing the box focuses the field, so the gutter behaves the way a lone
+ * field's does. A control inside a decorator still receives its own press.
+ *
+ * @example
+ * <Input.Group>
+ *   <Input.Group.Prefix>
+ *     <Icon icon={IconMagnifyingGlass} />
+ *   </Input.Group.Prefix>
+ *   <Input placeholder="Search" />
+ * </Input.Group>
+ *
+ * @example
+ * <Input.Group size="lg">
+ *   <Input.Group.Prefix>$</Input.Group.Prefix>
+ *   <Input inputMode="decimal" placeholder="0.00" />
+ *   <Input.Group.Suffix>NZD</Input.Group.Suffix>
+ * </Input.Group>
+ */
+export const InputGroup = Object.assign(InputGroupRoot, {
+	/** Leading content inside the box. An `Icon` or a bare string needs nothing else. */
+	Prefix: InputGroupPrefix,
+	/** Trailing content inside the box — a clear button, a unit, a reveal toggle. */
+	Suffix: InputGroupSuffix,
+	displayName: "DelacourUI.Input.Group",
+});