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

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

@@ -0,0 +1,335 @@
+import { describe, expect, test } from "bun:test";
+import { declaredTokens } from "../../styles/theme-tokens.test";
+import { ICON_SIZE_TOKENS } from "../../styles/tokens";
+import { BADGE_COLORS, BADGE_FOREGROUND_TOKEN, BADGE_SIZES, badgeVariants } from "../badge/badge.variants";
+import {
+	CHIP_CLOSE_HIT_SLOP,
+	CHIP_COLORS,
+	CHIP_FOREGROUND_TOKEN,
+	CHIP_HIT_SLOP,
+	CHIP_SIZES,
+	CHIP_SURFACES,
+	CHIP_VARIANTS,
+	chipVariants,
+	resolveChipCloseExposure,
+	resolveChipForegroundToken,
+	resolveChipMode,
+	resolveChipSurface,
+} from "./chip.variants";
+
+const LIGHT = declaredTokens("light");
+const DARK = declaredTokens("dark");
+
+/** Tailwind's spacing step a class string sets its horizontal padding from. */
+function paddingX(cls: string): number {
+	return Number(cls.match(/\bpx-([\d.]+)\b/)?.[1]);
+}
+
+/** Tailwind's spacing step a class string sets its vertical padding from. */
+function paddingY(cls: string): number {
+	return Number(cls.match(/\bpy-([\d.]+)\b/)?.[1]);
+}
+
+/** Tailwind's spacing step a class string sets its gap from. */
+function gapOf(cls: string): number {
+	return Number(cls.match(/\bgap-([\d.]+)\b/)?.[1]);
+}
+
+/** Position of a label's font size on the type scale, largest last. */
+const TEXT_SCALE = ["text-xs", "text-sm", "text-base", "text-lg"] as const;
+function textStep(cls: string): number {
+	return TEXT_SCALE.findIndex((step) => new RegExp(`\\b${step}\\b`).test(cls));
+}
+
+/** Position of a slot's `size-icon-*` token on the shared icon scale. */
+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 `text-*` colour token a label class string resolves to, minus the prefix. */
+function labelColorToken(cls: string): string | undefined {
+	return cls.match(/\btext-((?:[a-z]+-)*(?:foreground|background))\b/)?.[1];
+}
+
+/** The `bg-*` and `border-*` colour utilities of a root class string, sorted. */
+function surfaceClasses(cls: string): string[] {
+	return cls
+		.split(/\s+/)
+		.filter((c) => /^bg-/.test(c) || (/^border-/.test(c) && c !== "border"))
+		.sort();
+}
+
+describe("the chip's axes", () => {
+	// A chip and a badge sitting side by side in one row mean the same thing by
+	// the same colour. A private colour list is how the two drift apart.
+	test("share Badge's colours and sizes", () => {
+		expect([...CHIP_COLORS]).toEqual([...BADGE_COLORS]);
+		expect([...CHIP_SIZES]).toEqual([...BADGE_SIZES]);
+	});
+
+	// `solid` is what selection paints, so a resting solid chip would be
+	// indistinguishable from a selected one.
+	test("rest on soft or outline only — solid is reserved for selected", () => {
+		expect([...CHIP_VARIANTS]).toEqual(["soft", "outline"]);
+	});
+});
+
+describe("chipVariants root slot", () => {
+	test("defaults to the soft default md chip", () => {
+		const cls = chipVariants().root();
+		expect(cls).toContain("bg-muted");
+		expect(cls).toContain("px-3");
+	});
+
+	test("never stretches and is a capsule, at every size", () => {
+		for (const size of CHIP_SIZES) {
+			const cls = chipVariants({ size }).root();
+			expect(cls).toContain("self-start");
+			expect(cls).toContain("rounded-full");
+		}
+	});
+
+	// Selecting a chip must not make it wider — in a wrapping row that would
+	// reflow every chip after it.
+	test("reserves the border in every state, so selection never resizes the box", () => {
+		for (const variant of CHIP_VARIANTS) {
+			for (const isSelected of [false, true]) {
+				expect(chipVariants({ variant, isSelected }).root()).toMatch(/\bborder\b/);
+			}
+		}
+	});
+
+	test("clips, so a pressed chip fades to the edge of its own box", () => {
+		expect(chipVariants().root()).toContain("overflow-hidden");
+	});
+
+	// Tone is shared with Badge: a resting chip is painted exactly as the
+	// badge of the same variant and colour is.
+	test("paints a resting chip as the matching badge", () => {
+		for (const variant of CHIP_VARIANTS) {
+			for (const color of CHIP_COLORS) {
+				const chip = chipVariants({ variant, color });
+				const badge = badgeVariants({ variant, color });
+				expect(surfaceClasses(chip.root())).toEqual(surfaceClasses(badge.root()));
+				expect(labelColorToken(chip.label())).toBe(labelColorToken(badge.label()));
+			}
+		}
+	});
+
+	test("paints a selected chip as a solid fill in its colour", () => {
+		for (const color of ["primary", "success", "warning", "destructive", "info"] as const) {
+			for (const variant of CHIP_VARIANTS) {
+				const slots = chipVariants({ variant, color, isSelected: true });
+				expect(slots.root()).toContain(`bg-${color}`);
+				expect(slots.root()).toContain(`border-${color}`);
+				expect(slots.label()).toContain(`text-${color}-foreground`);
+			}
+		}
+	});
+
+	// Badge's solid default is `secondary`, which this theme sets a hair from
+	// `muted` — a selected default chip would look unselected. It inverts
+	// instead.
+	test("inverts a selected default chip rather than tinting it", () => {
+		const slots = chipVariants({ color: "default", isSelected: true });
+		expect(slots.root()).toContain("bg-foreground");
+		expect(slots.label()).toContain("text-background");
+	});
+
+	test("reads the same when selected, whatever it rested on", () => {
+		for (const color of CHIP_COLORS) {
+			const soft = chipVariants({ variant: "soft", color, isSelected: true });
+			const outline = chipVariants({ variant: "outline", color, isSelected: true });
+			expect(surfaceClasses(soft.root())).toEqual(surfaceClasses(outline.root()));
+			expect(soft.label()).toBe(outline.label());
+		}
+	});
+
+	test("gives every surface and colour pair a distinct treatment", () => {
+		const seen = new Set<string>();
+		for (const surface of CHIP_SURFACES) {
+			for (const color of CHIP_COLORS) {
+				const slots =
+					surface === "selected"
+						? chipVariants({ color, isSelected: true })
+						: chipVariants({ color, isSelected: false, variant: surface });
+				seen.add(`${surfaceClasses(slots.root()).join(" ")}|${labelColorToken(slots.label())}`);
+			}
+		}
+		expect(seen.size).toBe(CHIP_SURFACES.length * CHIP_COLORS.length);
+	});
+
+	test("adds the disabled treatment only when disabled", () => {
+		expect(chipVariants({ isDisabled: true }).root()).toContain("opacity-50");
+		expect(chipVariants({ isDisabled: false }).root()).not.toContain("opacity-50");
+	});
+
+	test("merges an incoming className last", () => {
+		expect(chipVariants().root({ className: "bg-info" })).toContain("bg-info");
+		expect(chipVariants().root({ className: "bg-info" })).not.toContain("bg-muted");
+	});
+});
+
+describe("chipVariants size axis", () => {
+	test("scales horizontal padding, vertical padding and gap together", () => {
+		const roots = CHIP_SIZES.map((size) => chipVariants({ size }).root());
+		for (const scale of [roots.map(paddingX), roots.map(paddingY), roots.map(gapOf)]) {
+			expect(scale.every(Number.isFinite)).toBe(true);
+			expect(new Set(scale).size).toBe(CHIP_SIZES.length);
+			expect([...scale]).toEqual([...scale].sort((a, b) => a - b));
+		}
+	});
+
+	// A chip is something to aim at, so it is roomier than the badge of the
+	// same size — never smaller.
+	test("pads at least as generously as the badge of the same size", () => {
+		for (const size of CHIP_SIZES) {
+			const chip = chipVariants({ size }).root();
+			const badge = badgeVariants({ size }).root();
+			expect(paddingX(chip)).toBeGreaterThanOrEqual(paddingX(badge));
+			expect(paddingY(chip)).toBeGreaterThanOrEqual(paddingY(badge));
+		}
+	});
+
+	test("takes no height, so the label grows with OS font scaling", () => {
+		for (const size of CHIP_SIZES) {
+			expect(chipVariants({ size }).root()).not.toMatch(/\bh-/);
+		}
+	});
+
+	test("scales label text with size, at medium weight", () => {
+		const labels = CHIP_SIZES.map((size) => chipVariants({ size }).label());
+		const steps = labels.map(textStep);
+		expect(steps.every((step) => step >= 0)).toBe(true);
+		expect([...steps]).toEqual([...steps].sort((a, b) => a - b));
+		for (const label of labels) expect(label).toContain("font-medium");
+	});
+
+	test("matches Badge's icon step at every size", () => {
+		for (const size of CHIP_SIZES) {
+			const step = iconStep(chipVariants({ size }).icon());
+			expect(step).toBeGreaterThanOrEqual(0);
+			expect(step).toBe(iconStep(badgeVariants({ size }).icon()));
+		}
+	});
+
+	test("the label slot carries the text colour, which the root must not", () => {
+		for (const variant of CHIP_VARIANTS) {
+			for (const color of CHIP_COLORS) {
+				for (const isSelected of [false, true]) {
+					const slots = chipVariants({ variant, color, isSelected });
+					expect(labelColorToken(slots.label())).toBeDefined();
+					expect(slots.root()).not.toMatch(/\btext-(?!center\b)/);
+				}
+			}
+		}
+	});
+});
+
+describe("resolveChipSurface", () => {
+	test("selection wins over the resting variant", () => {
+		expect(resolveChipSurface({ variant: "soft", isSelected: true })).toBe("selected");
+		expect(resolveChipSurface({ variant: "outline", isSelected: true })).toBe("selected");
+	});
+
+	test("an unselected chip rests on its variant", () => {
+		expect(resolveChipSurface({ variant: "soft", isSelected: false })).toBe("soft");
+		expect(resolveChipSurface({ variant: "outline", isSelected: false })).toBe("outline");
+	});
+});
+
+describe("CHIP_FOREGROUND_TOKEN", () => {
+	test("reuses Badge's tokens for the resting surfaces", () => {
+		expect(CHIP_FOREGROUND_TOKEN.soft).toEqual(BADGE_FOREGROUND_TOKEN.soft);
+		expect(CHIP_FOREGROUND_TOKEN.outline).toEqual(BADGE_FOREGROUND_TOKEN.outline);
+	});
+
+	// A composed Icon sits beside the label; two maps that can drift is how a
+	// chip ends up with a grey glyph beside white text.
+	test("matches the colour its own label slot resolves to, in every state", () => {
+		for (const variant of CHIP_VARIANTS) {
+			for (const color of CHIP_COLORS) {
+				for (const isSelected of [false, true]) {
+					const label = chipVariants({ variant, color, isSelected }).label();
+					expect(labelColorToken(label)).toBe(resolveChipForegroundToken({ variant, color, isSelected }));
+				}
+			}
+		}
+	});
+
+	test("names only tokens both themes declare", () => {
+		for (const surface of CHIP_SURFACES) {
+			for (const color of CHIP_COLORS) {
+				const token = CHIP_FOREGROUND_TOKEN[surface][color];
+				expect(LIGHT.has(token)).toBe(true);
+				expect(DARK.has(token)).toBe(true);
+			}
+		}
+	});
+});
+
+describe("resolveChipMode", () => {
+	const noop = () => {};
+
+	test("a chip with nothing to do stays a plain view", () => {
+		expect(resolveChipMode({})).toBe("static");
+	});
+
+	test("a press handler makes it a button", () => {
+		expect(resolveChipMode({ onPress: noop })).toBe("button");
+		expect(resolveChipMode({ onLongPress: noop })).toBe("button");
+	});
+
+	// Setting `isSelected` — even to false — says the chip has an on state, and
+	// a screen reader has to hear which one it is in.
+	test("any selection prop makes it a toggle, whatever else is set", () => {
+		expect(resolveChipMode({ isSelected: false })).toBe("toggle");
+		expect(resolveChipMode({ isSelected: true })).toBe("toggle");
+		expect(resolveChipMode({ defaultSelected: false })).toBe("toggle");
+		expect(resolveChipMode({ onSelectedChange: noop })).toBe("toggle");
+		expect(resolveChipMode({ isSelected: false, onPress: noop })).toBe("toggle");
+	});
+});
+
+describe("hit slop", () => {
+	// Chips wrap in rows eight points apart (`gap-2`). More than four points
+	// of vertical slop reaches into the next row and makes a tap ambiguous.
+	test("the root never reaches past half a gap-2 row gap", () => {
+		for (const size of CHIP_SIZES) {
+			const slop = CHIP_HIT_SLOP[size];
+			expect(slop.top).toBeLessThanOrEqual(4);
+			expect(slop.bottom).toBeLessThanOrEqual(4);
+			expect(slop.left).toBe(0);
+			expect(slop.right).toBe(0);
+		}
+	});
+
+	test("the close glyph grows its target with the chip", () => {
+		const slops = CHIP_SIZES.map((size) => CHIP_CLOSE_HIT_SLOP[size]);
+		expect(slops.every((slop) => slop > 0)).toBe(true);
+		expect([...slops]).toEqual([...slops].sort((a, b) => a - b));
+	});
+});
+
+describe("resolveChipCloseExposure", () => {
+	test("nothing to expose without onClose", () => {
+		for (const mode of ["static", "button", "toggle"] as const) {
+			expect(resolveChipCloseExposure({ mode, hasClose: false })).toBe("none");
+		}
+	});
+
+	// A static chip is not an accessibility element, so the close control is
+	// reachable on its own and needs nothing more.
+	test("a static chip leaves the close control as its own element", () => {
+		expect(resolveChipCloseExposure({ mode: "static", hasClose: true })).toBe("element");
+	});
+
+	// iOS folds every descendant of an accessible view into one element, so a
+	// close control inside a pressable chip is unreachable by swipe — it becomes
+	// an action on the chip instead.
+	test("a pressable chip offers removal as an accessibility action", () => {
+		expect(resolveChipCloseExposure({ mode: "button", hasClose: true })).toBe("action");
+		expect(resolveChipCloseExposure({ mode: "toggle", hasClose: true })).toBe("action");
+	});
+});

package/src/components/chip/chip.variants.ts

@@ -0,0 +1,321 @@
+import type { VariantProps } from "tailwind-variants";
+import { tv } from "../../lib/tv";
+import {
+	BADGE_COLORS,
+	BADGE_FOREGROUND_TOKEN,
+	BADGE_SIZES,
+	type BadgeColor,
+	type BadgeSize,
+} from "../badge/badge.variants";
+
+/**
+ * How an unselected chip is painted.
+ *
+ * Two of Badge's four, and deliberately not `solid`: a solid fill is what
+ * selection paints, so a resting solid chip would read as already selected.
+ * `ghost` is left out because a chip with no fill and no border has no edge to
+ * aim at.
+ */
+export const CHIP_VARIANTS = ["soft", "outline"] as const;
+
+/** What the chip means. Badge's list, so a chip and a badge agree on colour. */
+export const CHIP_COLORS = BADGE_COLORS;
+
+/** Badge's sizes, so a chip and a badge of one size carry the same glyph. */
+export const CHIP_SIZES = BADGE_SIZES;
+
+/**
+ * Every surface a chip can wear: its two resting variants, and selection.
+ *
+ * Selection is a surface rather than a modifier because it replaces the resting
+ * paint wholesale — a selected chip looks the same whichever variant it rests on.
+ */
+export const CHIP_SURFACES = [...CHIP_VARIANTS, "selected"] as const;
+
+export type ChipVariant = (typeof CHIP_VARIANTS)[number];
+export type ChipColor = BadgeColor;
+export type ChipSize = BadgeSize;
+export type ChipSurface = (typeof CHIP_SURFACES)[number];
+
+/**
+ * What a chip does when touched — decided by which props it was given.
+ *
+ * - `static` — a tag. A plain `View`, announced as text.
+ * - `button` — `onPress` or `onLongPress`, and no selection.
+ * - `toggle` — any selection prop. Announced with its selected state.
+ */
+export type ChipMode = "static" | "button" | "toggle";
+
+/**
+ * Theme token whose value gives an `Icon` composed into the chip its colour.
+ *
+ * The resting surfaces are Badge's own entries, not copies — a soft `success`
+ * chip and a soft `success` badge are the same shade by construction. Only
+ * `selected` is new.
+ *
+ * A selected `default` chip inverts to `foreground`/`background` rather than
+ * taking Badge's solid `secondary`: this theme sets `secondary` a hair from
+ * `muted`, so a selected default chip would look exactly like a resting one.
+ */
+export const CHIP_FOREGROUND_TOKEN: Record<ChipSurface, Record<ChipColor, string>> = {
+	soft: BADGE_FOREGROUND_TOKEN.soft,
+	outline: BADGE_FOREGROUND_TOKEN.outline,
+	selected: {
+		default: "background",
+		primary: "primary-foreground",
+		success: "success-foreground",
+		warning: "warning-foreground",
+		destructive: "destructive-foreground",
+		info: "info-foreground",
+	},
+};
+
+/**
+ * Vertical slop that brings the root towards the 44pt minimum touch target.
+ *
+ * Capped at four points and never horizontal: chips wrap in rows with a
+ * `gap-2` between them, and slop past half that gap reaches into the
+ * neighbouring chip, making a tap between two of them ambiguous — worse than a
+ * target that is merely adequate.
+ */
+export const CHIP_HIT_SLOP: Record<ChipSize, { top: number; bottom: number; left: number; right: number }> = {
+	sm: { top: 4, bottom: 4, left: 0, right: 0 },
+	md: { top: 4, bottom: 4, left: 0, right: 0 },
+	lg: { top: 2, bottom: 2, left: 0, right: 0 },
+};
+
+/**
+ * Slop around the close glyph, on every side.
+ *
+ * The glyph is 14–18 points; this is what makes it something a thumb can find.
+ * It reaches into the chip's own padding and past its edge — both are the
+ * chip's space, and the inner detector claims the tap before the root sees it.
+ */
+export const CHIP_CLOSE_HIT_SLOP: Record<ChipSize, number> = { sm: 8, md: 10, lg: 12 };
+
+/**
+ * Styling for every part of a chip.
+ *
+ * Shares Badge's two axes and its tones — a resting chip is painted exactly as
+ * the badge of the same variant and colour, a test pins every cell — and adds a
+ * third, `isSelected`, which replaces the resting paint with a solid fill in the
+ * chip's colour. The selected cells come **after** the resting ones, so
+ * tailwind-merge lets them win whatever the chip rests on.
+ *
+ * `border border-transparent` sits in the base for the reason it does in Badge,
+ * with more at stake: a chip toggles in place inside a wrapping row, and a box
+ * that grew two points on selection would reflow every chip after it.
+ *
+ * Padding is a step roomier than Badge at every size — a chip is aimed at, a
+ * badge is only read — and still never a height, so the label grows with OS
+ * font scaling. The icon step is Badge's, so a glyph moves between the two
+ * without changing size.
+ *
+ * Free of React Native imports so it stays unit-testable. See AGENTS.md.
+ */
+export const chipVariants = tv({
+	slots: {
+		root: "flex-row items-center justify-center self-start overflow-hidden rounded-full border border-transparent",
+		label: "text-center font-medium",
+		startContent: "items-center justify-center",
+		endContent: "items-center justify-center",
+		closeButton: "items-center justify-center rounded-full",
+		/** Edge length an `Icon` composed into the chip inherits. */
+		icon: "",
+	},
+	variants: {
+		variant: {
+			soft: {},
+			outline: { root: "bg-transparent" },
+		},
+		color: {
+			default: {},
+			primary: {},
+			success: {},
+			warning: {},
+			destructive: {},
+			info: {},
+		},
+		size: {
+			sm: {
+				root: "gap-1 px-2.5 py-1",
+				label: "text-xs",
+				closeButton: "-mr-0.5",
+				icon: "size-icon-xs",
+			},
+			md: {
+				root: "gap-1.5 px-3 py-1.5",
+				label: "text-sm",
+				closeButton: "-mr-1",
+				icon: "size-icon-sm",
+			},
+			lg: {
+				root: "gap-2 px-4 py-2",
+				label: "text-base",
+				closeButton: "-mr-1.5",
+				icon: "size-icon-md",
+			},
+		},
+		// The empty `false` branches are load-bearing typing, not placeholders.
+		// See the note in button.variants.ts.
+		isSelected: { true: {}, false: {} },
+		isDisabled: { true: { root: "opacity-50" }, false: {} },
+	},
+	compoundVariants: [
+		{ variant: "soft", color: "default", class: { root: "bg-muted", label: "text-muted-foreground" } },
+		{ variant: "soft", color: "primary", class: { root: "bg-tertiary", label: "text-tertiary-foreground" } },
+		{
+			variant: "soft",
+			color: "success",
+			class: { root: "bg-success-soft", label: "text-success-soft-foreground" },
+		},
+		{
+			variant: "soft",
+			color: "warning",
+			class: { root: "bg-warning-soft", label: "text-warning-soft-foreground" },
+		},
+		{
+			variant: "soft",
+			color: "destructive",
+			class: { root: "bg-destructive-soft", label: "text-destructive-soft-foreground" },
+		},
+		{ variant: "soft", color: "info", class: { root: "bg-info-soft", label: "text-info-soft-foreground" } },
+
+		{ variant: "outline", color: "default", class: { root: "border-border", label: "text-muted-foreground" } },
+		{ variant: "outline", color: "primary", class: { root: "border-primary", label: "text-foreground" } },
+		{
+			variant: "outline",
+			color: "success",
+			class: { root: "border-success", label: "text-success-soft-foreground" },
+		},
+		{
+			variant: "outline",
+			color: "warning",
+			class: { root: "border-warning", label: "text-warning-soft-foreground" },
+		},
+		{
+			variant: "outline",
+			color: "destructive",
+			class: { root: "border-destructive", label: "text-destructive-soft-foreground" },
+		},
+		{ variant: "outline", color: "info", class: { root: "border-info", label: "text-info-soft-foreground" } },
+
+		{
+			isSelected: true,
+			color: "default",
+			class: { root: "border-foreground bg-foreground", label: "text-background" },
+		},
+		{
+			isSelected: true,
+			color: "primary",
+			class: { root: "border-primary bg-primary", label: "text-primary-foreground" },
+		},
+		{
+			isSelected: true,
+			color: "success",
+			class: { root: "border-success bg-success", label: "text-success-foreground" },
+		},
+		{
+			isSelected: true,
+			color: "warning",
+			class: { root: "border-warning bg-warning", label: "text-warning-foreground" },
+		},
+		{
+			isSelected: true,
+			color: "destructive",
+			class: { root: "border-destructive bg-destructive", label: "text-destructive-foreground" },
+		},
+		{
+			isSelected: true,
+			color: "info",
+			class: { root: "border-info bg-info", label: "text-info-foreground" },
+		},
+	],
+	defaultVariants: {
+		variant: "soft",
+		color: "default",
+		size: "md",
+		isSelected: false,
+		isDisabled: false,
+	},
+});
+
+/**
+ * The surface a chip wears — its resting variant, or `selected`.
+ *
+ * Pure, so the icon colour and the label colour are chosen by one rule that
+ * `bun test` reaches. See AGENTS.md.
+ */
+export function resolveChipSurface({
+	variant,
+	isSelected,
+}: {
+	variant: ChipVariant;
+	isSelected: boolean;
+}): ChipSurface {
+	return isSelected ? "selected" : variant;
+}
+
+/** The theme token an `Icon` composed into the chip takes its colour from. */
+export function resolveChipForegroundToken({
+	variant,
+	color,
+	isSelected,
+}: {
+	variant: ChipVariant;
+	color: ChipColor;
+	isSelected: boolean;
+}): string {
+	return CHIP_FOREGROUND_TOKEN[resolveChipSurface({ isSelected, variant })][color];
+}
+
+/**
+ * What the root renders as — see {@link ChipMode}.
+ *
+ * A chip is content until it is given something to do, as a badge is. Any
+ * selection prop — `isSelected` even when `false`, `defaultSelected`,
+ * `onSelectedChange` — says the chip has an on state, and a screen reader must
+ * hear which one it is in, so selection outranks a bare press handler.
+ *
+ * `onClose` is deliberately not read: the dismiss control is its own
+ * pressable, so a chip that can only be removed still has an inert root.
+ */
+export function resolveChipMode({
+	isSelected,
+	defaultSelected,
+	onSelectedChange,
+	onPress,
+	onLongPress,
+}: {
+	isSelected?: boolean;
+	defaultSelected?: boolean;
+	onSelectedChange?: (isSelected: boolean) => void;
+	onPress?: () => void;
+	onLongPress?: () => void;
+}): ChipMode {
+	if (isSelected !== undefined || defaultSelected !== undefined || onSelectedChange !== undefined) return "toggle";
+	if (onPress !== undefined || onLongPress !== undefined) return "button";
+	return "static";
+}
+
+/**
+ * How the remove control reaches assistive technology.
+ *
+ * - `none` — there is no `onClose`.
+ * - `element` — a static chip is not an accessibility element itself, so the
+ *   close control is announced on its own, as a button.
+ * - `action` — a pressable chip is one accessibility element, and iOS folds its
+ *   descendants into it: the close control is unreachable by swipe and its
+ *   label is read as part of the chip's. It is hidden, and removal is offered as
+ *   a `remove` accessibility action on the chip instead — VoiceOver's Actions
+ *   rotor, TalkBack's actions menu.
+ */
+export type ChipCloseExposure = "none" | "element" | "action";
+
+/** See {@link ChipCloseExposure}. Pure, so `bun test` reaches it. */
+export function resolveChipCloseExposure({ mode, hasClose }: { mode: ChipMode; hasClose: boolean }): ChipCloseExposure {
+	if (!hasClose) return "none";
+	return mode === "static" ? "element" : "action";
+}
+
+export type ChipVariantProps = VariantProps<typeof chipVariants>;

package/src/components/chip/index.ts

@@ -0,0 +1,24 @@
+export { Chip, type ChipProps } from "./chip";
+export { type ChipContextValue, ChipProvider, useChip, useChipContext } from "./chip.context";
+export type { ChipSlotProps } from "./chip.types";
+export {
+	CHIP_CLOSE_HIT_SLOP,
+	CHIP_COLORS,
+	CHIP_FOREGROUND_TOKEN,
+	CHIP_HIT_SLOP,
+	CHIP_SIZES,
+	CHIP_SURFACES,
+	CHIP_VARIANTS,
+	type ChipColor,
+	type ChipMode,
+	type ChipSize,
+	type ChipSurface,
+	type ChipVariant,
+	type ChipVariantProps,
+	chipVariants,
+	resolveChipForegroundToken,
+	resolveChipMode,
+	resolveChipSurface,
+} from "./chip.variants";
+export type { ChipCloseButtonProps } from "./chip-close-button";
+export type { ChipLabelProps } from "./chip-label";