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

package/src/components/input/input.context.tsx

@@ -0,0 +1,87 @@
+import { createContext, type ReactElement, type ReactNode, type RefObject, use } from "react";
+import type { TextInput } from "react-native";
+import type { InputSize, InputVariant } from "./input.variants";
+
+export type InputGroupContextValue = {
+	/** Visual variant of the box every part of the group sits in. */
+	variant: InputVariant;
+	/** Size of the box, which also drives the field's type scale and a decorator's icon. */
+	size: InputSize;
+	/** Whether the group reports an invalid value. */
+	isInvalid: boolean;
+	/** Whether the group is disabled. */
+	isDisabled: boolean;
+	/** Whether the field inside the group holds focus. */
+	isFocused: boolean;
+	/** Reported by the field on focus and blur, so the box can light up around it. */
+	setFocused: (isFocused: boolean) => void;
+	/**
+	 * The field the group wraps, so tapping the box's gutter can focus it.
+	 *
+	 * A lone field is the whole tap target; inside a group the field only covers
+	 * the middle of the box, and a tap on the padding either side would otherwise
+	 * do nothing.
+	 */
+	fieldRef: RefObject<TextInput | null>;
+};
+
+const InputGroupContext = createContext<InputGroupContextValue | null>(null);
+
+/**
+ * Supplies the enclosing group's box, state and field ref to its subtree.
+ *
+ * The group owns the box, so it owns the axes that draw one: an `Input` inside
+ * a group reads `variant`, `size`, `isInvalid` and `isDisabled` from here rather
+ * than from its own props, the same way a `ListGroup.Item` takes no `variant`.
+ * One box, one set of axes — two would be two things that can disagree.
+ *
+ * Lives in its own module, importing nothing but React and a type-only
+ * `TextInput`, so `input.tsx` can read it without importing `./input-group` and
+ * closing a cycle back through the root. See AGENTS.md rule 3.
+ */
+export function InputGroupProvider({
+	value,
+	children,
+}: {
+	value: InputGroupContextValue;
+	children: ReactNode;
+}): ReactElement {
+	return <InputGroupContext value={value}>{children}</InputGroupContext>;
+}
+InputGroupProvider.displayName = "DelacourUI.Input.Group.Provider";
+
+/** The enclosing group's context, or null for a field standing on its own. */
+export function useInputGroupContext(): InputGroupContextValue | null {
+	return use(InputGroupContext);
+}
+
+/**
+ * Reads the enclosing `Input.Group`'s box and state.
+ *
+ * For a custom part that has to match the group it sits in. Throws outside one —
+ * use {@link useInputGroupContext} where the group is optional, as `Input`
+ * itself does.
+ */
+export function useInputGroup(): InputGroupContextValue {
+	const context = useInputGroupContext();
+	if (!context) {
+		throw new Error("useInputGroup must be called inside an <Input.Group>.");
+	}
+	return context;
+}
+
+/**
+ * The enclosing group's context, for a compound part that cannot work without
+ * one.
+ *
+ * Internal: deliberately not re-exported from `index.ts`. A caller outside the
+ * library wants {@link useInputGroup}, whose error message names the hook rather
+ * than a part.
+ */
+export function useInputGroupPart(component: string): InputGroupContextValue {
+	const context = useInputGroupContext();
+	if (!context) {
+		throw new Error(`${component} must be rendered inside an <Input.Group>.`);
+	}
+	return context;
+}

package/src/components/input/input.tsx

@@ -0,0 +1,184 @@
+import { type ReactElement, type Ref, useCallback, useState } from "react";
+import { TextInput, type TextInputProps } from "react-native";
+import { composeRefs } from "../../lib/compose-refs";
+import { useButtonGroupItemContext } from "../button/button.context";
+import { resolveButtonSizeStep } from "../button/button.variants";
+import { useFieldContext } from "../field/field.context";
+import { useInputGroupContext } from "./input.context";
+import {
+	type InputSize,
+	type InputVariant,
+	resolveInputFieldClass,
+	resolvePlaceholderAccentClass,
+	resolveSelectionAccentClass,
+} from "./input.variants";
+import { InputGroup } from "./input-group";
+
+/**
+ * The events React Native hands a field's focus and blur callbacks.
+ *
+ * Read off `TextInputProps` rather than named outright: React Native renamed
+ * these between versions, and a restated type would go stale silently — the
+ * handler would still compile against the old shape and fail to match the prop.
+ */
+type InputFocusEvent = Parameters<NonNullable<TextInputProps["onFocus"]>>[0];
+type InputBlurEvent = Parameters<NonNullable<TextInputProps["onBlur"]>>[0];
+
+export type InputProps = Omit<TextInputProps, "placeholderTextColorClassName"> & {
+	/** Visual variant of the box. Ignored inside an `Input.Group`, which owns the box. */
+	variant?: InputVariant;
+	/** Size of the box and the value's type scale. Ignored inside an `Input.Group`. */
+	size?: InputSize;
+	/**
+	 * Reports an invalid value. Ignored inside an `Input.Group`, which owns it;
+	 * inherited from an enclosing `Field` when neither names it.
+	 */
+	isInvalid?: boolean;
+	/**
+	 * Blocks editing and fades the field. Ignored inside an `Input.Group`, which
+	 * owns it; inherited from an enclosing `Field` when neither names it.
+	 */
+	isDisabled?: boolean;
+	/**
+	 * Placeholder colour, as an `accent-*` utility — `accent-muted-foreground`.
+	 * Any other utility resolves to nothing; see `input.variants.ts`.
+	 */
+	placeholderColorClassName?: string;
+	/**
+	 * Caret and selection colour, as an `accent-*` utility. Defaults to the
+	 * primary token, or the destructive one while the field is invalid.
+	 */
+	selectionColorClassName?: string;
+	ref?: Ref<TextInput>;
+};
+
+function InputRoot({
+	variant,
+	size,
+	isInvalid,
+	isDisabled,
+	className,
+	placeholderColorClassName,
+	selectionColorClassName,
+	editable,
+	multiline,
+	onBlur,
+	onFocus,
+	ref,
+	...props
+}: InputProps): ReactElement {
+	const group = useInputGroupContext();
+	const field = useFieldContext();
+	// A field sitting directly in a `Button.Group` *is* the box, so it draws the
+	// run's corner itself. One nested in an `Input.Group` is not: that row owns
+	// the box and reads the same context, so the member axes below are simply
+	// never consulted — `resolveInputFieldClass` drops the `root` slot entirely
+	// when the field is grouped.
+	const member = useButtonGroupItemContext();
+	const [ownFocused, setOwnFocused] = useState(false);
+
+	// Nearest wins, and there are three sources for the two state axes.
+	//
+	// Inside a group the box belongs to the group, so the axes that draw one do
+	// too — the same way a `ListGroup.Item` takes no `variant`. An enclosing
+	// `Field` is the outermost of the three and therefore the last fallback, so
+	// a field with no props of its own turns destructive with the `Field` around it
+	// while `<Input isInvalid={false} />` still opts out of one.
+	const resolved = {
+		isDisabled: group?.isDisabled ?? isDisabled ?? field?.isDisabled ?? member?.isDisabled ?? false,
+		isInvalid: group?.isInvalid ?? isInvalid ?? field?.isInvalid ?? false,
+		size: group?.size ?? (member ? resolveButtonSizeStep(member.size) : size) ?? "md",
+		variant: group?.variant ?? variant ?? "primary",
+	};
+
+	// The group's box has to light up around a field it does not contain the
+	// focus of, so focus is reported upward when there is a group and held here
+	// when there is not. Picking the setter is a plain branch, not a hook, so
+	// hook order is the same either way.
+	const isFocused = group ? group.isFocused : ownFocused;
+	const setFocused = group ? group.setFocused : setOwnFocused;
+
+	const handleFocus = useCallback(
+		(event: InputFocusEvent) => {
+			setFocused(true);
+			onFocus?.(event);
+		},
+		[onFocus, setFocused]
+	);
+
+	const handleBlur = useCallback(
+		(event: InputBlurEvent) => {
+			setFocused(false);
+			onBlur?.(event);
+		},
+		[onBlur, setFocused]
+	);
+
+	const selectionAccent = resolveSelectionAccentClass({
+		className: selectionColorClassName,
+		isInvalid: resolved.isInvalid,
+	});
+
+	return (
+		<TextInput
+			className={resolveInputFieldClass({
+				...resolved,
+				className,
+				groupPosition: member?.position ?? "none",
+				isFocused,
+				isGrouped: group !== null,
+				isMultiline: multiline === true,
+				isSeamed: member?.isSeamed ?? false,
+				orientation: member?.orientation ?? "horizontal",
+			})}
+			cursorColorClassName={selectionAccent}
+			multiline={multiline}
+			placeholderTextColorClassName={resolvePlaceholderAccentClass(placeholderColorClassName)}
+			selectionColorClassName={selectionAccent}
+			textAlignVertical={multiline ? "top" : undefined}
+			{...props}
+			editable={resolved.isDisabled ? false : editable}
+			onBlur={handleBlur}
+			onFocus={handleFocus}
+			ref={composeRefs(ref, group?.fieldRef)}
+		/>
+	);
+}
+
+/**
+ * A text field.
+ *
+ * The `TextInput` this renders is uniwind's, not React Native's — uniwind's
+ * Metro resolver rewrites the `react-native` import — which is what lets a
+ * className drive the three props that take a colour *value* rather than a
+ * style: the placeholder, the caret and the selection highlight. No
+ * `withUniwind` wrapper is involved, so AGENTS.md rule 7 is untouched. Those
+ * classNames must be `accent-*` utilities; see `input.variants.ts` for why.
+ *
+ * Focus styling is driven from React state rather than a `focus:` class.
+ * Uniwind tracks focus per component, so a `focus:` utility would light up a
+ * lone field and do nothing for the box `Input.Group` draws around a grouped
+ * one — and the decision would sit somewhere `bun test` cannot reach.
+ *
+ * Everything `TextInput` accepts is accepted here, with one name removed:
+ * uniwind's `placeholderTextColorClassName` is replaced by
+ * `placeholderColorClassName`, so there is exactly one name for the placeholder
+ * colour rather than two that can disagree.
+ *
+ * Wrap it in an `Input.Group` to put an icon, an affix or a control inside the
+ * field's own box.
+ *
+ * @example
+ * <Input onChangeText={setEmail} placeholder="Email" value={email} />
+ *
+ * @example
+ * <Input isInvalid={!isValid} size="lg" variant="secondary" />
+ *
+ * @example
+ * <Input multiline numberOfLines={4} placeholder="Notes" />
+ */
+export const Input = Object.assign(InputRoot, {
+	/** A row that puts prefix and suffix content inside the field's own box. */
+	Group: InputGroup,
+	displayName: "DelacourUI.Input",
+});

package/src/components/input/input.types.ts

@@ -0,0 +1,10 @@
+import type { ViewProps } from "react-native";
+
+/**
+ * The shape of a group's leading and trailing slots.
+ *
+ * Shared by `Input.Group.Prefix` and `Input.Group.Suffix`, which are identical
+ * apart from where the row places them, so it lives in a leaf rather than in
+ * one of the two files arbitrarily.
+ */
+export type InputSlotProps = ViewProps & { className?: string };

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

@@ -0,0 +1,369 @@
+import { describe, expect, test } from "bun:test";
+import { ICON_SIZE_TOKENS, INPUT_SIZE_TOKENS, INPUT_TEXT_TOKENS } from "../../styles/tokens";
+import {
+	BUTTON_GROUP_ORIENTATIONS,
+	BUTTON_GROUP_POSITIONS,
+	BUTTON_SIZES,
+	buttonVariants,
+	resolveButtonSizeStep,
+} from "../button/button.variants";
+import {
+	INPUT_INVALID_SELECTION_ACCENT_CLASS,
+	INPUT_PLACEHOLDER_ACCENT_CLASS,
+	INPUT_SELECTION_ACCENT_CLASS,
+	INPUT_SIZES,
+	INPUT_VARIANTS,
+	type InputBoxState,
+	inputVariants,
+	resolveInputFieldClass,
+	resolveInputGroupClass,
+	resolvePlaceholderAccentClass,
+	resolveSelectionAccentClass,
+} from "./input.variants";
+
+/** The `--spacing-input-*` token a class string sizes its box from, fixed or floored. */
+function heightToken(cls: string): string | undefined {
+	return cls.match(/\bmin-h-(input-[\w-]+)\b/)?.[1] ?? cls.match(/\bh-(input-[\w-]+)\b/)?.[1];
+}
+
+/** The `--text-input-*` token a class string sets its type scale from. */
+function textToken(cls: string): string | undefined {
+	return cls.match(/\btext-(input-[\w-]+)\b/)?.[1];
+}
+
+/**
+ * Position of a class string's `size-icon-*` token on the shared icon scale.
+ *
+ * Compares by step rather than by points, so the test says what it means and
+ * survives a token being retuned in `tokens.css`.
+ */
+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]);
+}
+
+/** The four on/off axes a box is drawn from, beside its variant and size. */
+const BOOLEAN_BOX_AXES = ["isDisabled", "isFocused", "isInvalid", "isMultiline"] as const;
+
+/**
+ * Every combination of the axes that change the box.
+ *
+ * The boolean axes are enumerated as a bit pattern rather than as four nested
+ * loops: the sweep is the point of the parity tests, so it has to cover the
+ * whole matrix, and four more levels of indentation would bury what it covers.
+ */
+function everyBoxState(): InputBoxState[] {
+	const states: InputBoxState[] = [];
+
+	for (const variant of INPUT_VARIANTS) {
+		for (const size of INPUT_SIZES) {
+			for (let mask = 0; mask < 1 << BOOLEAN_BOX_AXES.length; mask += 1) {
+				const state: InputBoxState = { size, variant };
+				for (const [bit, axis] of BOOLEAN_BOX_AXES.entries()) {
+					state[axis] = (mask & (1 << bit)) !== 0;
+				}
+				states.push(state);
+			}
+		}
+	}
+
+	return states;
+}
+
+/** Every `rounded-*` class a root string carries, in emission order. */
+function radiusClasses(cls: string): string[] {
+	return cls.match(/\brounded-[\w-]+\b/g) ?? [];
+}
+
+describe("the root slot", () => {
+	test("gives every variant a distinct treatment", () => {
+		const seen = new Set(INPUT_VARIANTS.map((variant) => inputVariants({ variant }).root()));
+		expect(seen.size).toBe(INPUT_VARIANTS.length);
+	});
+
+	test("draws a border in every variant, so focus and invalid have something to recolour", () => {
+		for (const variant of INPUT_VARIANTS) {
+			expect(inputVariants({ variant }).root()).toMatch(/\bborder-/);
+		}
+	});
+
+	// A React Native `View` does not cascade colour to a `Text` descendant, and
+	// when the field is grouped this slot lands on a View. Text colour belongs
+	// to the field. See AGENTS.md rule 1.
+	test("carries no text colour", () => {
+		for (const state of everyBoxState()) {
+			expect(inputVariants(state).root()).not.toMatch(/\btext-/);
+		}
+	});
+
+	test("takes a height token from the input scale at every size", () => {
+		for (const size of INPUT_SIZES) {
+			const token = heightToken(inputVariants({ size }).root());
+			expect(INPUT_SIZE_TOKENS).toContain(token as (typeof INPUT_SIZE_TOKENS)[number]);
+		}
+	});
+
+	test("steps its height with its size", () => {
+		const steps = INPUT_SIZES.map((size) =>
+			INPUT_SIZE_TOKENS.indexOf(heightToken(inputVariants({ size }).root()) as never)
+		);
+		expect(steps).toEqual([0, 1, 2]);
+	});
+
+	test("marks focus and invalid with different borders", () => {
+		const focused = inputVariants({ isFocused: true }).root();
+		const invalid = inputVariants({ isInvalid: true }).root();
+		const resting = inputVariants().root();
+		expect(focused).not.toBe(resting);
+		expect(invalid).not.toBe(resting);
+		expect(focused).not.toBe(invalid);
+	});
+
+	// Focus is the transient state and invalid the reported one: 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.
+	test("keeps an invalid field invalid while it is focused", () => {
+		for (const variant of INPUT_VARIANTS) {
+			const both = inputVariants({ isFocused: true, isInvalid: true, variant }).root();
+			const invalid = inputVariants({ isInvalid: true, variant }).root();
+			expect(both).toContain("border-destructive");
+			expect(both).not.toContain("border-ring");
+			expect(new Set(both.split(" "))).toEqual(new Set(invalid.split(" ")));
+		}
+	});
+
+	test("fades a disabled field", () => {
+		expect(inputVariants({ isDisabled: true }).root()).toContain("opacity-50");
+		expect(inputVariants({ isDisabled: false }).root()).not.toContain("opacity-50");
+	});
+
+	test("merges an incoming className last", () => {
+		expect(inputVariants().root({ className: "mb-6" })).toContain("mb-6");
+		expect(inputVariants().root({ className: "bg-popover" })).not.toContain("bg-card");
+	});
+});
+
+describe("a multiline field", () => {
+	// A fixed height would clip the second line; a floor lets the box grow with
+	// the text while still matching a single-line field at rest.
+	test("turns the height into a floor rather than a fixed measure", () => {
+		for (const size of INPUT_SIZES) {
+			const single = inputVariants({ isMultiline: false, size }).root();
+			const multi = inputVariants({ isMultiline: true, size }).root();
+			expect(single).toMatch(/(?<![\w-])h-input-/);
+			expect(single).not.toMatch(/\bmin-h-input-/);
+			expect(multi).toMatch(/\bmin-h-input-/);
+			expect(multi).not.toMatch(/(?<![\w-])h-input-/);
+		}
+	});
+
+	test("floors at exactly the height a single-line field takes", () => {
+		for (const size of INPUT_SIZES) {
+			expect(heightToken(inputVariants({ isMultiline: true, size }).root())).toBe(
+				heightToken(inputVariants({ isMultiline: false, size }).root())
+			);
+		}
+	});
+
+	// With the box free to grow, centring would drift the decorators down the
+	// side of a paragraph. They belong on the first line.
+	test("aligns the row to the top", () => {
+		for (const size of INPUT_SIZES) {
+			const row = resolveInputGroupClass({ isMultiline: true, size });
+			expect(row).toContain("items-start");
+			expect(row).not.toContain("items-center");
+		}
+	});
+});
+
+describe("the field slot", () => {
+	test("carries the text colour, which the root must not", () => {
+		expect(inputVariants().field()).toMatch(/\btext-foreground\b/);
+	});
+
+	test("takes a type scale token paired with its height", () => {
+		for (const [index, size] of INPUT_SIZES.entries()) {
+			expect(textToken(inputVariants({ size }).field())).toBe(INPUT_TEXT_TOKENS[index]);
+			expect(heightToken(inputVariants({ size }).root())).toBe(INPUT_SIZE_TOKENS[index]);
+		}
+	});
+
+	test("stretches only when it is sharing a row", () => {
+		expect(inputVariants({ isGrouped: true }).field()).toContain("flex-1");
+		expect(inputVariants({ isGrouped: false }).field()).not.toContain("flex-1");
+	});
+
+	test("merges an incoming className last", () => {
+		expect(inputVariants().field({ className: "text-destructive" })).toContain("text-destructive");
+		expect(inputVariants().field({ className: "text-destructive" })).not.toContain("text-foreground");
+	});
+});
+
+describe("a decorator", () => {
+	test("sizes its icon on the shared icon scale", () => {
+		for (const size of INPUT_SIZES) {
+			expect(iconStep(inputVariants({ size }).decoratorIcon())).toBeGreaterThanOrEqual(0);
+		}
+	});
+
+	test("steps that icon up with the field's size", () => {
+		const steps = INPUT_SIZES.map((size) => iconStep(inputVariants({ size }).decoratorIcon()));
+		expect(steps).toEqual([...steps].sort((a, b) => a - b));
+		expect(new Set(steps).size).toBe(INPUT_SIZES.length);
+	});
+
+	// An icon takes a colour value rather than a class — the slot sizes it only.
+	test("puts no colour on the icon slot", () => {
+		for (const size of INPUT_SIZES) {
+			expect(inputVariants({ size }).decoratorIcon()).not.toMatch(/\b(bg|text|border)-/);
+		}
+	});
+
+	test("sets affix text a step quieter than the value beside it", () => {
+		for (const size of INPUT_SIZES) {
+			const text = inputVariants({ size }).decoratorText();
+			expect(text).toContain("text-muted-foreground");
+			expect(textToken(text)).toBe(textToken(inputVariants({ size }).field()));
+		}
+	});
+
+	test("turns its affix text destructive when the field is invalid", () => {
+		expect(inputVariants({ isInvalid: true }).decoratorText()).toContain("text-destructive");
+		expect(inputVariants({ isInvalid: true }).decoratorText()).not.toContain("text-muted-foreground");
+	});
+});
+
+// The whole point of the design: one slot holds the box, and it lands on the
+// `TextInput` when the field stands alone or on the group's row when it does
+// not. These are the tests that make "identical by construction" a property the
+// suite checks rather than a comment.
+describe("the standalone and grouped boxes", () => {
+	test("wear exactly the same chrome, wherever the chrome lands", () => {
+		for (const state of everyBoxState()) {
+			const chrome = inputVariants(state).root().split(" ");
+			const alone = resolveInputFieldClass({ ...state, isGrouped: false }).split(" ");
+			const row = resolveInputGroupClass(state).split(" ");
+
+			for (const utility of chrome) {
+				// `items-start` is the one class a grouped multiline row adds on
+				// top of the box, since a lone field has nothing to align.
+				if (utility === "items-start") continue;
+				expect(alone).toContain(utility);
+				expect(row).toContain(utility);
+			}
+		}
+	});
+
+	test("never draw two boxes: a grouped field carries no chrome of its own", () => {
+		for (const state of everyBoxState()) {
+			const grouped = resolveInputFieldClass({ ...state, isGrouped: true });
+			expect(grouped).not.toMatch(/\bborder\b|\bborder-/);
+			expect(grouped).not.toMatch(/\bbg-/);
+			expect(grouped).not.toMatch(/\brounded/);
+			expect(grouped).not.toMatch(/h-input-/);
+			expect(grouped).not.toMatch(/\bpx-/);
+		}
+	});
+
+	test("keep the text on the field, never on the row", () => {
+		for (const state of everyBoxState()) {
+			expect(resolveInputGroupClass(state)).not.toMatch(/\btext-/);
+			expect(resolveInputFieldClass({ ...state, isGrouped: true })).toMatch(/\btext-/);
+			expect(resolveInputFieldClass({ ...state, isGrouped: false })).toMatch(/\btext-/);
+		}
+	});
+
+	test("lay the row out as a row, which a lone field has no need to be", () => {
+		const state = { size: "md" as const, variant: "primary" as const };
+		expect(resolveInputGroupClass(state)).toContain("flex-row");
+		expect(resolveInputFieldClass({ ...state, isGrouped: false })).not.toContain("flex-row");
+	});
+
+	test("merge an incoming className last, on either path", () => {
+		expect(resolveInputFieldClass({ className: "h-12", isGrouped: false })).toContain("h-12");
+		expect(resolveInputFieldClass({ className: "h-12", isGrouped: false })).not.toContain("h-input-md");
+		expect(resolveInputGroupClass({ className: "w-full" })).toContain("w-full");
+	});
+});
+
+// Uniwind resolves these through `accentColor`, so the value has to be an
+// `accent-*` utility — anything else warns once and draws nothing.
+describe("the accent resolvers", () => {
+	test("name accent utilities, since nothing else resolves", () => {
+		for (const value of [
+			INPUT_PLACEHOLDER_ACCENT_CLASS,
+			INPUT_SELECTION_ACCENT_CLASS,
+			INPUT_INVALID_SELECTION_ACCENT_CLASS,
+		]) {
+			expect(value).toMatch(/^accent-/);
+		}
+	});
+
+	test("default the placeholder to the muted token", () => {
+		expect(resolvePlaceholderAccentClass()).toBe(INPUT_PLACEHOLDER_ACCENT_CLASS);
+	});
+
+	test("let a caller replace the placeholder colour", () => {
+		expect(resolvePlaceholderAccentClass("accent-destructive")).toBe("accent-destructive");
+	});
+
+	test("turn the caret and selection destructive while the field is invalid", () => {
+		expect(resolveSelectionAccentClass({ isInvalid: false })).toBe(INPUT_SELECTION_ACCENT_CLASS);
+		expect(resolveSelectionAccentClass({ isInvalid: true })).toBe(INPUT_INVALID_SELECTION_ACCENT_CLASS);
+	});
+
+	test("let a caller override even the invalid selection colour", () => {
+		expect(resolveSelectionAccentClass({ className: "accent-info", isInvalid: true })).toBe("accent-info");
+	});
+});
+
+describe("a joined field's corner", () => {
+	test("draws the generic ramp when it stands on its own", () => {
+		// A field and the button beside it are meant to be retunable apart, so a
+		// lone field takes `--radius`, never the button's shape token.
+		expect(radiusClasses(inputVariants({ size: "sm" }).root())).toEqual(["rounded-md"]);
+		expect(radiusClasses(inputVariants({ size: "md" }).root())).toEqual(["rounded-lg"]);
+		expect(radiusClasses(inputVariants({ size: "lg" }).root())).toEqual(["rounded-lg"]);
+	});
+
+	test("draws the group's corner, cell for cell, when it is joined", () => {
+		// The whole point of teaching a field to join: a run capped by a field at
+		// one end and a button at the other has to draw one arc, not two ramps
+		// meeting in the middle. Asserted against the button's own variants
+		// rather than against a copied string, so the two cannot drift apart.
+		// Swept over the button's own six sizes, reading each one's step: a field
+		// has no square form, so it joins a run at the step the group is built on.
+		for (const buttonSize of BUTTON_SIZES) {
+			const size = resolveButtonSizeStep(buttonSize);
+			for (const orientation of BUTTON_GROUP_ORIENTATIONS) {
+				for (const groupPosition of BUTTON_GROUP_POSITIONS) {
+					expect(radiusClasses(inputVariants({ groupPosition, orientation, size }).root())).toEqual(
+						radiusClasses(buttonVariants({ groupPosition, orientation, size: buttonSize }).root())
+					);
+				}
+			}
+		}
+	});
+
+	test("overlaps its neighbour exactly as a button does", () => {
+		for (const orientation of BUTTON_GROUP_ORIENTATIONS) {
+			const field = inputVariants({ isSeamed: true, orientation }).root();
+			const button = buttonVariants({ isSeamed: true, orientation }).root();
+			const seam = /\B-(?:ms|mt)-px\b/;
+
+			expect(field.match(seam)?.[0]).toBe(button.match(seam)?.[0]);
+			expect(inputVariants({ isSeamed: false, orientation }).root()).not.toMatch(seam);
+		}
+	});
+
+	test("never mixes a physical corner with a logical one", () => {
+		for (const size of INPUT_SIZES) {
+			for (const groupPosition of BUTTON_GROUP_POSITIONS) {
+				expect(inputVariants({ groupPosition, orientation: "horizontal", size }).root()).not.toMatch(
+					/\brounded-[trbl]-/
+				);
+				expect(inputVariants({ groupPosition, orientation: "vertical", size }).root()).not.toMatch(/\brounded-[se]-/);
+			}
+		}
+	});
+});