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

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

@@ -0,0 +1,337 @@
+import { describe, expect, test } from "bun:test";
+import type { ReactElement, ReactNode } from "react";
+import { declaredTokens } from "../../styles/theme-tokens.test";
+import {
+	partitionSwipeChildren,
+	resolveOutermostIndex,
+	resolveSwipeActionForegroundToken,
+	resolveSwipeDrag,
+	resolveSwipeRelease,
+	resolveTileLayout,
+	SWIPE_ACTION_COLORS,
+	SWIPE_END_DISPLAY_NAME,
+	SWIPE_FULL_FRACTION,
+	SWIPE_PROJECTION,
+	SWIPE_RUBBER_BAND,
+	SWIPE_START_DISPLAY_NAME,
+	SWIPE_TILE_WIDTH,
+	type SwipeTileProps,
+	swipeVariants,
+	toPhysicalOffset,
+} from "./swipe.variants";
+
+const LIGHT = declaredTokens("light");
+const DARK = declaredTokens("dark");
+
+/** A plain object shaped like a React element — the partition reads nothing else. */
+function element(displayName: string, children?: ReactNode, key?: string): ReactElement<SwipeTileProps> {
+	return { key: key ?? null, props: { children }, type: { displayName } } as unknown as ReactElement<SwipeTileProps>;
+}
+
+const START = (children?: ReactNode) => element(SWIPE_START_DISPLAY_NAME, children);
+const END = (children?: ReactNode) => element(SWIPE_END_DISPLAY_NAME, children);
+const ACTION = (key: string) => element("DelacourUI.Swipe.Action", undefined, key);
+const ROW = (key: string) => element("DelacourUI.Item", undefined, key);
+
+describe("partitionSwipeChildren", () => {
+	test("lifts each marker's children out by element type, and keeps the rest as the row", () => {
+		const done = ACTION("done");
+		const snooze = ACTION("snooze");
+		const remove = ACTION("delete");
+		const row = ROW("row");
+
+		const parts = partitionSwipeChildren([START(done), END([snooze, remove]), row]);
+
+		expect(parts.start).toEqual([done]);
+		expect(parts.end).toEqual([snooze, remove]);
+		expect(parts.row).toEqual([row]);
+	});
+
+	test("order does not matter", () => {
+		const row = ROW("row");
+		const remove = ACTION("delete");
+		const parts = partitionSwipeChildren([row, END(remove)]);
+
+		expect(parts.start).toEqual([]);
+		expect(parts.end).toEqual([remove]);
+		expect(parts.row).toEqual([row]);
+	});
+
+	test("flattens nested arrays, and drops holes inside a panel", () => {
+		const a = ACTION("a");
+		const b = ACTION("b");
+		const parts = partitionSwipeChildren([[END([null, [a, false], undefined, b])]]);
+
+		expect(parts.end).toEqual([a, b]);
+	});
+
+	test("keeps plain text and numbers in the row, and drops holes there too", () => {
+		const parts = partitionSwipeChildren(["Label", 3, null, false, undefined]);
+		expect(parts.row).toEqual(["Label", 3]);
+	});
+
+	test("two markers for one side concatenate in source order", () => {
+		const a = ACTION("a");
+		const b = ACTION("b");
+		expect(partitionSwipeChildren([END(a), END(b)]).end).toEqual([a, b]);
+	});
+
+	test("a lone child that is not an array still partitions", () => {
+		const row = ROW("row");
+		expect(partitionSwipeChildren(row).row).toEqual([row]);
+	});
+});
+
+describe("resolveOutermostIndex", () => {
+	test("end: the last tile", () => {
+		expect(resolveOutermostIndex("end", 3)).toBe(2);
+		expect(resolveOutermostIndex("end", 1)).toBe(0);
+	});
+
+	test("start: the first tile", () => {
+		expect(resolveOutermostIndex("start", 3)).toBe(0);
+	});
+
+	test("an empty side has no outermost tile", () => {
+		expect(resolveOutermostIndex("end", 0)).toBe(-1);
+		expect(resolveOutermostIndex("start", 0)).toBe(-1);
+	});
+});
+
+describe("resolveSwipeDrag", () => {
+	test("passes a drag through on a side with a panel", () => {
+		expect(resolveSwipeDrag({ endWidth: 144, raw: -60, startWidth: 72 })).toBe(-60);
+		expect(resolveSwipeDrag({ endWidth: 144, raw: 60, startWidth: 72 })).toBe(60);
+	});
+
+	test("rubber-bands a side with no panel", () => {
+		expect(resolveSwipeDrag({ endWidth: 144, raw: 100, startWidth: 0 })).toBeCloseTo(100 * SWIPE_RUBBER_BAND);
+		expect(resolveSwipeDrag({ endWidth: 0, raw: -100, startWidth: 72 })).toBeCloseTo(-100 * SWIPE_RUBBER_BAND);
+	});
+
+	test("the resistance is the spec's 0.2", () => {
+		expect(SWIPE_RUBBER_BAND).toBe(0.2);
+	});
+});
+
+describe("resolveSwipeRelease", () => {
+	const base = { endWidth: 144, isFullSwipe: true, rowWidth: 400, startWidth: 72 };
+	const fullAt = base.endWidth + SWIPE_FULL_FRACTION * base.rowWidth;
+
+	test("a release short of half the panel closes", () => {
+		expect(resolveSwipeRelease({ ...base, offset: -60, velocity: 0 })).toEqual({ kind: "close" });
+		expect(resolveSwipeRelease({ ...base, offset: 30, velocity: 0 })).toEqual({ kind: "close" });
+	});
+
+	test("a release past half the panel opens that side", () => {
+		expect(resolveSwipeRelease({ ...base, offset: -80, velocity: 0 })).toEqual({ kind: "open", side: "end" });
+		expect(resolveSwipeRelease({ ...base, offset: 40, velocity: 0 })).toEqual({ kind: "open", side: "start" });
+	});
+
+	test("projects the release by velocity", () => {
+		expect(SWIPE_PROJECTION).toBe(0.1);
+		// -40 + -500 * 0.1 = -90, past half of 144.
+		expect(resolveSwipeRelease({ ...base, offset: -40, velocity: -500 })).toEqual({ kind: "open", side: "end" });
+		// -100 + 500 * 0.1 = -50, short of half.
+		expect(resolveSwipeRelease({ ...base, offset: -100, velocity: 500 })).toEqual({ kind: "close" });
+	});
+
+	test("a flick across the rest position closes rather than opening the other side", () => {
+		expect(resolveSwipeRelease({ ...base, offset: -20, velocity: 2000 })).toEqual({ kind: "close" });
+	});
+
+	test("a side with no panel never opens", () => {
+		expect(resolveSwipeRelease({ ...base, offset: 50, startWidth: 0, velocity: 800 })).toEqual({ kind: "close" });
+	});
+
+	test("past the full-swipe point, a release fires the outermost action", () => {
+		expect(resolveSwipeRelease({ ...base, offset: -(fullAt + 1), velocity: 0 })).toEqual({
+			kind: "full",
+			side: "end",
+		});
+		const startFullAt = base.startWidth + SWIPE_FULL_FRACTION * base.rowWidth;
+		expect(resolveSwipeRelease({ ...base, offset: startFullAt + 1, velocity: 0 })).toEqual({
+			kind: "full",
+			side: "start",
+		});
+	});
+
+	test("a flick alone never reaches a full swipe — the finger has to cross the point", () => {
+		expect(resolveSwipeRelease({ ...base, offset: -(fullAt - 40), velocity: -3000 })).toEqual({
+			kind: "open",
+			side: "end",
+		});
+	});
+
+	test("pulling back from past the point before letting go does not fire", () => {
+		expect(resolveSwipeRelease({ ...base, offset: -(fullAt + 10), velocity: 1500 })).toEqual({
+			kind: "open",
+			side: "end",
+		});
+	});
+
+	test("isFullSwipe false opens instead", () => {
+		expect(resolveSwipeRelease({ ...base, isFullSwipe: false, offset: -(fullAt + 50), velocity: 0 })).toEqual({
+			kind: "open",
+			side: "end",
+		});
+	});
+
+	test("an unmeasured row never full-swipes", () => {
+		expect(resolveSwipeRelease({ ...base, offset: -400, rowWidth: 0, velocity: 0 })).toEqual({
+			kind: "open",
+			side: "end",
+		});
+	});
+});
+
+describe("resolveTileLayout", () => {
+	const tileWidth = SWIPE_TILE_WIDTH;
+
+	test("closed: every tile packs against the row edge", () => {
+		for (const index of [0, 1, 2]) {
+			expect(resolveTileLayout({ count: 3, index, offset: 0, side: "end", tileWidth })).toEqual({
+				width: tileWidth,
+				x: 0,
+			});
+		}
+	});
+
+	test("part open: tiles spread in proportion, innermost against the row", () => {
+		const offset = -108;
+		expect(resolveTileLayout({ count: 3, index: 0, offset, side: "end", tileWidth }).x).toBe(0);
+		expect(resolveTileLayout({ count: 3, index: 1, offset, side: "end", tileWidth }).x).toBe(36);
+		expect(resolveTileLayout({ count: 3, index: 2, offset, side: "end", tileWidth }).x).toBe(72);
+	});
+
+	test("fully open: tiles are whole and edge to edge", () => {
+		const offset = -3 * tileWidth;
+		for (const index of [0, 1, 2]) {
+			expect(resolveTileLayout({ count: 3, index, offset, side: "end", tileWidth })).toEqual({
+				width: tileWidth,
+				x: index * tileWidth,
+			});
+		}
+	});
+
+	test("on start the order runs the other way: the first tile is outermost", () => {
+		const offset = 2 * tileWidth;
+		expect(resolveTileLayout({ count: 2, index: 1, offset, side: "start", tileWidth }).x).toBe(0);
+		expect(resolveTileLayout({ count: 2, index: 0, offset, side: "start", tileWidth }).x).toBe(tileWidth);
+	});
+
+	test("overshoot: the outermost tile grows to fill it, the others hold", () => {
+		const offset = -(2 * tileWidth + 50);
+		expect(resolveTileLayout({ count: 2, index: 0, offset, side: "end", tileWidth })).toEqual({
+			width: tileWidth,
+			x: 0,
+		});
+		expect(resolveTileLayout({ count: 2, index: 1, offset, side: "end", tileWidth })).toEqual({
+			width: tileWidth + 50,
+			x: tileWidth,
+		});
+	});
+
+	test("the tiles always cover the gap exactly — no hole, nothing past the panel", () => {
+		for (const reveal of [0, 10, 72, 100, 144, 216, 300, 500]) {
+			const count = 3;
+			let reach = 0;
+			for (let index = 0; index < count; index++) {
+				const { x, width } = resolveTileLayout({ count, index, offset: -reveal, side: "end", tileWidth });
+				reach = Math.max(reach, x + width);
+			}
+			expect(reach).toBeGreaterThanOrEqual(reveal);
+			if (reveal >= count * tileWidth) expect(reach).toBe(reveal);
+		}
+	});
+
+	test("the other side's offset reveals nothing here", () => {
+		expect(resolveTileLayout({ count: 2, index: 1, offset: 120, side: "end", tileWidth })).toEqual({
+			width: tileWidth,
+			x: 0,
+		});
+	});
+});
+
+describe("toPhysicalOffset", () => {
+	test("left to right, the logical offset is the translation", () => {
+		expect(toPhysicalOffset(40, false)).toBe(40);
+	});
+
+	test("right to left mirrors it, so end stays the edge text runs toward", () => {
+		expect(toPhysicalOffset(40, true)).toBe(-40);
+		expect(toPhysicalOffset(-40, true)).toBe(40);
+	});
+});
+
+describe("tile width", () => {
+	test("is 72pt, and the content box class says the same", () => {
+		expect(SWIPE_TILE_WIDTH).toBe(72);
+		expect(swipeVariants().tileContent()).toContain("w-18");
+	});
+});
+
+describe("swipeVariants", () => {
+	test("default paints muted with foreground ink", () => {
+		const slots = swipeVariants({ color: "default" });
+		expect(slots.tile()).toContain("bg-muted");
+		expect(slots.tileLabel()).toContain("text-foreground");
+		expect(slots.panel()).toContain("bg-muted");
+	});
+
+	test("every other colour paints its own surface and its own foreground", () => {
+		for (const color of SWIPE_ACTION_COLORS) {
+			if (color === "default") continue;
+			const slots = swipeVariants({ color });
+			expect(slots.tile()).toContain(`bg-${color}`);
+			expect(slots.panel()).toContain(`bg-${color}`);
+			expect(slots.tileLabel()).toContain(`text-${color}-foreground`);
+		}
+	});
+
+	test("label is text-xs and its colour sits on the label, never the tile", () => {
+		for (const color of SWIPE_ACTION_COLORS) {
+			const slots = swipeVariants({ color });
+			expect(slots.tileLabel()).toContain("text-xs");
+			expect(slots.tile()).not.toMatch(/\btext-/);
+		}
+	});
+
+	test("the row takes no background of its own", () => {
+		expect(swipeVariants().row()).not.toMatch(/\bbg-/);
+	});
+
+	test("the root clips, so a fly-off never paints outside the row", () => {
+		expect(swipeVariants().root()).toContain("overflow-hidden");
+		expect(swipeVariants().panel()).toContain("overflow-hidden");
+	});
+
+	test("a caller's className wins", () => {
+		expect(swipeVariants().root({ className: "rounded-lg" })).toContain("rounded-lg");
+	});
+});
+
+describe("tokens", () => {
+	test("every surface and foreground named is declared in both themes", () => {
+		for (const color of SWIPE_ACTION_COLORS) {
+			const slots = swipeVariants({ color });
+			const named = [
+				...(slots.tile().match(/\bbg-([a-z-]+)/g) ?? []).map((cls) => cls.slice(3)),
+				...(slots.tileLabel().match(/\btext-([a-z]+(?:-[a-z]+)*)/g) ?? [])
+					.map((cls) => cls.slice(5))
+					.filter((token) => token !== "xs" && token !== "center"),
+				resolveSwipeActionForegroundToken(color),
+			];
+			for (const token of named) {
+				expect(LIGHT.has(token)).toBe(true);
+				expect(DARK.has(token)).toBe(true);
+			}
+		}
+	});
+
+	test("the glyph's tint token matches the label's foreground class", () => {
+		for (const color of SWIPE_ACTION_COLORS) {
+			expect(swipeVariants({ color }).tileLabel()).toContain(`text-${resolveSwipeActionForegroundToken(color)}`);
+		}
+	});
+});

package/src/components/swipe/swipe.variants.ts

@@ -0,0 +1,290 @@
+import type { ReactElement, ReactNode } from "react";
+import type { VariantProps } from "tailwind-variants";
+import { tv } from "../../lib/tv";
+
+/** The two edges a row can slide away from. `end` is the edge text runs toward. */
+export const SWIPE_SIDES = ["start", "end"] as const;
+
+/** Badge's, Slider's and Switch's set. `default` is the neutral tile. */
+export const SWIPE_ACTION_COLORS = ["default", "primary", "success", "warning", "info", "destructive"] as const;
+
+export type SwipeSide = (typeof SWIPE_SIDES)[number];
+export type SwipeOpenSide = SwipeSide | null;
+export type SwipeActionColor = (typeof SWIPE_ACTION_COLORS)[number];
+
+/**
+ * One tile's width, in points. Every tile is the same width, so a panel's width
+ * is a count times this and nothing has to be measured.
+ *
+ * The `tileContent` slot writes it out as `w-18` (18 × 4 = 72) and a test pins
+ * the two together.
+ */
+export const SWIPE_TILE_WIDTH = 72;
+
+/** How much of a drag toward a side with no panel the row follows. */
+export const SWIPE_RUBBER_BAND = 0.2;
+
+/** Seconds of release velocity added to the offset before it is judged. */
+export const SWIPE_PROJECTION = 0.1;
+
+/** How far past the panel, as a share of the row's width, a full swipe sits. */
+export const SWIPE_FULL_FRACTION = 0.35;
+
+/**
+ * The spring a row settles on after a release or a tap.
+ *
+ * Damped to settle with the barest overshoot: a row that bounced past its panel
+ * would flash the colour behind the outermost tile on every open.
+ */
+export const SWIPE_SPRING = { damping: 26, mass: 0.6, stiffness: 320 } as const;
+
+/** What every spring becomes under reduced motion, in milliseconds. */
+export const SWIPE_REDUCED_DURATION = 160;
+
+/** How long a full swipe takes to carry the row off, in milliseconds. */
+export const SWIPE_FLY_OFF_DURATION = 200;
+
+/**
+ * The markers' display names. The partition matches on these rather than on
+ * function identity — Switch's `isSwitchThumbElement` records why identity is
+ * not trusted alone in a package that ships raw source.
+ */
+export const SWIPE_START_DISPLAY_NAME = "DelacourUI.Swipe.Start";
+export const SWIPE_END_DISPLAY_NAME = "DelacourUI.Swipe.End";
+
+/** What the root reads off a lifted tile — `Swipe.Action`'s props, as far as layout and dispatch need. */
+export type SwipeTileProps = { color?: SwipeActionColor; label?: string; onPress?: () => void };
+
+export type SwipeChildren = {
+	/** The tiles behind the start edge, in source order. */
+	start: ReactElement<SwipeTileProps>[];
+	/** The tiles behind the end edge, in source order. */
+	end: ReactElement<SwipeTileProps>[];
+	/** Everything that is not a panel — the row itself. */
+	row: ReactNode[];
+};
+
+type ElementLike = { type: unknown; props: { children?: ReactNode } };
+
+function isElementLike(node: unknown): node is ElementLike {
+	return typeof node === "object" && node !== null && "type" in node && "props" in node;
+}
+
+function displayNameOf(node: ElementLike): string | undefined {
+	const type = node.type as { displayName?: unknown } | null;
+	if (typeof type !== "function" && (typeof type !== "object" || type === null)) return undefined;
+	return typeof type.displayName === "string" ? type.displayName : undefined;
+}
+
+function flatten(node: ReactNode, into: ReactNode[]): void {
+	if (node === null || node === undefined || typeof node === "boolean") return;
+	if (Array.isArray(node)) {
+		for (const child of node) flatten(child, into);
+		return;
+	}
+	into.push(node);
+}
+
+/**
+ * Splits a `Swipe`'s children into the two panels and the row.
+ *
+ * `Swipe.Start` and `Swipe.End` are markers: their children are lifted out and
+ * the markers themselves are dropped, because only the root knows the gap the
+ * tiles have to fill. Anything else is the row, in order. Order between the
+ * markers and the row does not matter.
+ *
+ * Reads only `type.displayName` and `props.children`, so a test can hand it
+ * plain objects.
+ */
+export function partitionSwipeChildren(children: ReactNode): SwipeChildren {
+	const result: SwipeChildren = { end: [], row: [], start: [] };
+	const items: ReactNode[] = [];
+	flatten(children, items);
+
+	for (const item of items) {
+		if (!isElementLike(item)) {
+			result.row.push(item);
+			continue;
+		}
+		const name = displayNameOf(item);
+		const side = name === SWIPE_START_DISPLAY_NAME ? "start" : name === SWIPE_END_DISPLAY_NAME ? "end" : null;
+		if (side === null) {
+			result.row.push(item);
+			continue;
+		}
+		const tiles: ReactNode[] = [];
+		flatten(item.props.children, tiles);
+		for (const tile of tiles) if (isElementLike(tile)) result[side].push(tile as ReactElement<SwipeTileProps>);
+	}
+
+	return result;
+}
+
+/** The tile that grows into an overshoot and fires on a full swipe: the one farthest from the row. */
+export function resolveOutermostIndex(side: SwipeSide, count: number): number {
+	if (count <= 0) return -1;
+	return side === "end" ? count - 1 : 0;
+}
+
+/**
+ * Where the row sits for a raw drag, in logical points (positive reveals `start`).
+ *
+ * A side with no panel follows the finger at {@link SWIPE_RUBBER_BAND}, so the
+ * row still answers the touch without promising an action that is not there.
+ * The gesture worklet restates this.
+ */
+export function resolveSwipeDrag({
+	raw,
+	startWidth,
+	endWidth,
+}: {
+	raw: number;
+	startWidth: number;
+	endWidth: number;
+}): number {
+	if (raw > 0 && startWidth <= 0) return raw * SWIPE_RUBBER_BAND;
+	if (raw < 0 && endWidth <= 0) return raw * SWIPE_RUBBER_BAND;
+	return raw;
+}
+
+export type SwipeRelease = { kind: "close" } | { kind: "open"; side: SwipeSide } | { kind: "full"; side: SwipeSide };
+
+/**
+ * What a release does.
+ *
+ * The offset is projected by {@link SWIPE_PROJECTION} seconds of velocity and
+ * compared with half the panel on the side it lands. A projection that crosses
+ * the rest position closes rather than opening the other side.
+ *
+ * **A full swipe needs the finger itself past the point**, and the projection
+ * still beyond it — a fast flick alone never fires the outermost action,
+ * because that action is routinely Delete. The haptic ticks at exactly that
+ * crossing, so the person releasing knows what will happen. A row not yet
+ * measured never full-swipes.
+ *
+ * The gesture worklet restates this.
+ */
+export function resolveSwipeRelease({
+	offset,
+	velocity,
+	startWidth,
+	endWidth,
+	rowWidth,
+	isFullSwipe,
+}: {
+	offset: number;
+	velocity: number;
+	startWidth: number;
+	endWidth: number;
+	rowWidth: number;
+	isFullSwipe: boolean;
+}): SwipeRelease {
+	const projected = offset + velocity * SWIPE_PROJECTION;
+	if (projected === 0) return { kind: "close" };
+	if (offset !== 0 && Math.sign(projected) !== Math.sign(offset)) return { kind: "close" };
+
+	const side: SwipeSide = projected > 0 ? "start" : "end";
+	const width = side === "start" ? startWidth : endWidth;
+	if (width <= 0) return { kind: "close" };
+
+	const reach = Math.abs(offset);
+	const projectedReach = Math.abs(projected);
+	const fullAt = width + SWIPE_FULL_FRACTION * rowWidth;
+	if (isFullSwipe && rowWidth > 0 && reach > fullAt && projectedReach > fullAt) return { kind: "full", side };
+
+	return projectedReach > width / 2 ? { kind: "open", side } : { kind: "close" };
+}
+
+/**
+ * Where one tile sits inside its panel, measured outward from the row's edge.
+ *
+ * Short of fully open the tiles spread in proportion to the gap, the innermost
+ * pinned to the row and each overlapped by the one outside it, so they emerge
+ * from under the row and are whole and edge to edge the moment the gap reaches
+ * their total. Past that the others hold and the outermost grows into the
+ * overshoot, so the gap is always covered exactly and never by a hole.
+ *
+ * `index` is source order; on `start` the first tile is the outermost. The tile
+ * worklet restates this.
+ */
+export function resolveTileLayout({
+	side,
+	index,
+	count,
+	tileWidth,
+	offset,
+}: {
+	side: SwipeSide;
+	index: number;
+	count: number;
+	tileWidth: number;
+	offset: number;
+}): { x: number; width: number } {
+	const reveal = Math.max(0, side === "start" ? offset : -offset);
+	const order = side === "end" ? index : count - 1 - index;
+	const total = count * tileWidth;
+
+	if (reveal <= total) return { width: tileWidth, x: count > 0 ? (order * reveal) / count : 0 };
+
+	const isOutermost = order === count - 1;
+	return { width: isOutermost ? reveal - order * tileWidth : tileWidth, x: order * tileWidth };
+}
+
+/**
+ * The physical translation for a logical offset. Right to left, `end` is the
+ * left edge, so the sign flips. The worklets restate this.
+ */
+export function toPhysicalOffset(offset: number, isRTL: boolean): number {
+	return isRTL ? -offset : offset;
+}
+
+/** The theme token a tile's glyph and label are drawn in, per colour. */
+export const SWIPE_ACTION_FOREGROUND_TOKEN: Record<SwipeActionColor, string> = {
+	default: "foreground",
+	primary: "primary-foreground",
+	success: "success-foreground",
+	warning: "warning-foreground",
+	info: "info-foreground",
+	destructive: "destructive-foreground",
+};
+
+export function resolveSwipeActionForegroundToken(color: SwipeActionColor): string {
+	return SWIPE_ACTION_FOREGROUND_TOKEN[color];
+}
+
+/**
+ * Every styled part of a swipe row, in one slotted `tv()`.
+ *
+ * The `color` axis paints a tile, its label and a panel together — the panel
+ * takes the outermost tile's colour, so an overshoot extends that action rather
+ * than opening a hole. The row slot sets no background: the row and the panel
+ * never overlap, so it needs none.
+ */
+export const swipeVariants = tv({
+	slots: {
+		root: "relative overflow-hidden",
+		row: "w-full",
+		panel: "absolute inset-y-0 overflow-hidden",
+		tile: "absolute inset-y-0 overflow-hidden",
+		tilePressable: "flex-1 flex-row",
+		tileContent: "w-18 items-center justify-center gap-1 px-1",
+		tileLabel: "text-center font-medium text-xs",
+	},
+	variants: {
+		color: {
+			default: { panel: "bg-muted", tile: "bg-muted", tileLabel: "text-foreground" },
+			primary: { panel: "bg-primary", tile: "bg-primary", tileLabel: "text-primary-foreground" },
+			success: { panel: "bg-success", tile: "bg-success", tileLabel: "text-success-foreground" },
+			warning: { panel: "bg-warning", tile: "bg-warning", tileLabel: "text-warning-foreground" },
+			info: { panel: "bg-info", tile: "bg-info", tileLabel: "text-info-foreground" },
+			destructive: { panel: "bg-destructive", tile: "bg-destructive", tileLabel: "text-destructive-foreground" },
+		},
+		side: {
+			start: { tilePressable: "justify-end" },
+			end: { tilePressable: "justify-start" },
+		},
+	},
+	defaultVariants: { color: "default", side: "end" },
+});
+
+export type SwipeVariantProps = VariantProps<typeof swipeVariants>;

package/src/components/switch/switch.variants.ts

@@ -259,8 +259,8 @@ export const SWITCH_INVALID_CONTENT_TEXT_CLASS = "text-destructive-foreground";
  * **The fade lands on `touchArea`, the one slot no animated style touches.**
  * `track` and `thumb` both carry a `useAnimatedStyle`, and while neither writes
  * `opacity` today, a disabled treatment that would break the moment one did is a
- * treatment waiting to fail silently — the failure mode `Radio` records for a
- * class on `Pressable`'s own node.
+ * treatment waiting to fail silently — the failure mode `Pressable` once had
+ * with a class on its own animated node.
  *
  * **`self-start` is load-bearing.** A switch is sized by its own geometry, and
  * inside a gap column every child is stretch-aligned by default — without it the

package/src/components/tabs/AGENTS.md

@@ -223,9 +223,10 @@ A row of tabs and the panels they switch between. Compound root plus `Tabs.List`
   state.
 - **The disabled fade lands on the label, never on the trigger.** The `trigger`
   slot is worn by [`Pressable`](../pressable/AGENTS.md)'s own `Animated.View`,
-  whose `useAnimatedStyle` writes `opacity` every frame —
-  [`Radio`](../radio/AGENTS.md)'s lesson, and it bites twice here because
-  `feedback` defaults to `fade`.
+  which now multiplies a className's opacity into its press rather than
+  overwriting it — but the label already fades, and a fade on the trigger as
+  well would compound the two to a quarter. [`Radio`](../radio/AGENTS.md)'s
+  arrangement.
 - **Selection changes the label's colour and nothing else.** A weight change
   would re-measure the label, which moves the frame the indicator is sitting on,
   on every tap. A test asserts the two class sets differ by exactly one `text-*`.

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

@@ -236,7 +236,7 @@ describe("the indicator slot", () => {
 });
 
 describe("the trigger slot", () => {
-	test("never carries an opacity, which Pressable's animated style would overwrite", () => {
+	test("never carries an opacity, which would compound with the label's", () => {
 		for (const cell of CELLS) expect(cls(tabsVariants(cell).trigger())).not.toMatch(/\bopacity-/);
 	});
 

package/src/components/tabs/tabs.variants.ts

@@ -559,12 +559,10 @@ export function resolveScrollOffset(state: {
  * three are an animated style, and a class fighting a `useAnimatedStyle` for the
  * same property is an indicator that never appears, with no error anywhere.
  *
- * **The `trigger` slot carries no `opacity-*`, in any cell.** It is worn by
- * `Pressable`'s own `Animated.View`, whose `useAnimatedStyle` writes `opacity` on
- * every frame — at rest, 1 — so a class there is overwritten before it is ever
- * drawn and the tab stays at full contrast while behaving as disabled. The
- * disabled fade lands on the label instead. This is `Radio`'s lesson, and it bites
- * twice here because `feedback` defaults to `fade`.
+ * **The `trigger` slot carries no `opacity-*`, in any cell.** The disabled fade
+ * lands on the label instead. `Pressable` now multiplies a className's opacity
+ * into its press, so a fade on the trigger would draw — but the label already
+ * fades, and the two would compound to a quarter. This is `Radio`'s arrangement.
  *
  * **Selection changes the label's colour and nothing else.** A weight change would
  * re-measure the label, which moves the frame the indicator is sitting on, on