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

package/src/components/spinner/spinner.variants.ts

@@ -0,0 +1,187 @@
+import { cn } from "../../lib/cn";
+import { tv } from "../../lib/tv";
+import { ICON_SIZES, type IconSize } from "../icon/icon.variants";
+
+/**
+ * The spinner's named sizes *are* the icon's.
+ *
+ * A spinner is a glyph that stands in for an icon — inside a button it replaces
+ * one outright — so the two have to mean the same thing by `size="md"`. Sharing
+ * the scale makes that structural instead of two lists that have to be kept in
+ * step. A leaf import, so no cycle: see AGENTS.md rule 3.
+ */
+export const SPINNER_SIZES = ICON_SIZES;
+export const SPINNER_COLORS = ["default", "success", "warning", "destructive"] as const;
+
+export type SpinnerSize = IconSize;
+export type SpinnerColor = (typeof SPINNER_COLORS)[number];
+
+/** Theme token behind each named colour. */
+export const SPINNER_COLOR_TOKEN: Record<SpinnerColor, string> = {
+	default: "foreground",
+	success: "success",
+	warning: "warning",
+	destructive: "destructive",
+};
+
+/** One full turn, in milliseconds, at speed 1. */
+export const SPINNER_DURATION_MS = 900;
+
+/**
+ * Stroke width of the default arc, in viewBox units.
+ *
+ * The head cap is a circle of half this radius, so the two cannot be tuned
+ * apart — see `spinner-arc.tsx` for why the head is drawn separately at all.
+ */
+export const SPINNER_ARC_STROKE_WIDTH = 2.5;
+
+/** Alpha at the comet's head, and at the far end of its tail. */
+export const SPINNER_ARC_HEAD_OPACITY = 1;
+export const SPINNER_ARC_TAIL_OPACITY = 0;
+
+/**
+ * Alpha where the two half-rings meet, opposite the head.
+ *
+ * Derived, never picked. Each half is a straight ramp, so the joint has to be
+ * the midpoint of the two ends or the ramps meet at different slopes and crease
+ * the ring — a soft bright wedge on one side of the joint, visible even though
+ * the alpha itself is continuous there. Held at 0.55 for a while, which is what
+ * that crease was.
+ */
+export const SPINNER_ARC_JOINT_OPACITY = (SPINNER_ARC_HEAD_OPACITY + SPINNER_ARC_TAIL_OPACITY) / 2;
+
+/** Gradient steps per half-ring. Eight holds the residual skew under 0.01 alpha. */
+export const SPINNER_ARC_STOP_COUNT = 8;
+
+/** One `<Stop>` of a half-ring's gradient. */
+export type SpinnerArcStop = { offset: number; opacity: number };
+
+/**
+ * Gradient stops that dim a half-ring at a constant rate per degree of turn.
+ *
+ * A linear gradient interpolates along its axis, and the axis here is `y` — but
+ * a point at angle θ clockwise from the top sits at `y = 12 - 10·cos θ`, so two
+ * stops alone make the fade stall near 3 and 9 o'clock and race through 12 and
+ * 6. The ring then reads as a bright chunk beside a flat grey quadrant rather
+ * than as an even comet.
+ *
+ * Each stop is therefore placed at the offset the arc actually occupies at that
+ * angle while its opacity steps evenly, which inverts the skew. Both half-rings
+ * share the resulting offset ladder; only the endpoints differ.
+ *
+ * Pure, so the whole ladder is reachable from `bun test`. See AGENTS.md.
+ */
+export function spinnerArcStops(from: number, to: number): SpinnerArcStop[] {
+	return Array.from({ length: SPINNER_ARC_STOP_COUNT + 1 }, (_unused, index) => {
+		const turn = index / SPINNER_ARC_STOP_COUNT;
+
+		return {
+			offset: (1 - Math.cos(Math.PI * turn)) / 2,
+			opacity: from + (to - from) * turn,
+		};
+	});
+}
+
+/** Edge length used with no `size` prop and nothing to inherit from — 24pt. */
+export const SPINNER_FALLBACK_SIZE_CLASS = "size-icon-xl";
+
+/**
+ * Sizing a glyph composed into a spinner inherits.
+ *
+ * It fills rather than pinning a step, so it still matches at a numeric `size`
+ * — which the class scale cannot express, since Tailwind's scanner is static and
+ * a runtime `size-[40px]` is never compiled.
+ */
+export const SPINNER_GLYPH_SIZE_CLASS = "size-full";
+
+/** Named colour used with no `color` prop and nothing to inherit from. */
+export const SPINNER_FALLBACK_COLOR: SpinnerColor = "default";
+
+/**
+ * Styling for every part of a spinner.
+ *
+ * Neither slot carries a colour: the glyph is an SVG stroke, which takes a
+ * resolved value rather than a class. See {@link SPINNER_COLOR_TOKEN}.
+ *
+ * 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 spinnerVariants = tv({
+	slots: {
+		// The root is the only sized box in a spinner. Everything under it fills.
+		root: "items-center justify-center",
+		// `size-full` is load-bearing rather than tidiness. The arc is an `<Svg>`
+		// with no width or height, which react-native-svg resolves to `'100%'`.
+		// If this layer were content-sized instead, that percentage would resolve
+		// against an indefinite parent and the glyph would collapse to zero.
+		content: "size-full items-center justify-center",
+	},
+	variants: {
+		size: {
+			xs: { root: "size-icon-xs" },
+			sm: { root: "size-icon-sm" },
+			md: { root: "size-icon-md" },
+			lg: { root: "size-icon-lg" },
+			xl: { root: "size-icon-xl" },
+			"2xl": { root: "size-icon-2xl" },
+		},
+	},
+});
+
+/** Whether a size is one of the named steps rather than an edge length in points. */
+export function isSpinnerSize(size: SpinnerSize | number | undefined): size is SpinnerSize {
+	return typeof size === "string";
+}
+
+/**
+ * The class chain that sizes a spinner's root, weakest source first: the
+ * fallback, the enclosing component's icon class, this spinner's named size,
+ * then the caller's own className.
+ *
+ * A numeric size drops the chain's sizing entirely rather than leaving a losing
+ * class behind: the root takes the number through `style`, and relying on an
+ * inline style to out-rank a className-derived one is a dependency worth not
+ * having. Tailwind cannot help either way — its scanner is static, so a runtime
+ * `size-[40px]` is never compiled and would draw nothing.
+ *
+ * Precedence matches {@link resolveSpinnerColor}, and the rule `Icon` follows,
+ * so a spinner composed into a button matches it without being told to.
+ *
+ * Pure, so the whole ladder is reachable from `bun test`. See AGENTS.md.
+ */
+export function resolveSpinnerRootClass({
+	size,
+	inherited,
+	className,
+}: {
+	size?: SpinnerSize | number;
+	inherited?: string;
+	className?: string;
+}): string {
+	const isNumeric = typeof size === "number";
+
+	return cn(
+		isNumeric ? undefined : SPINNER_FALLBACK_SIZE_CLASS,
+		isNumeric ? undefined : inherited,
+		spinnerVariants({ size: isSpinnerSize(size) ? size : undefined }).root({ className })
+	);
+}
+
+function isSpinnerColor(color: string): color is SpinnerColor {
+	return (SPINNER_COLORS as readonly string[]).includes(color);
+}
+
+/**
+ * Colour string to hand `useThemeColor`.
+ *
+ * A named colour maps through {@link SPINNER_COLOR_TOKEN}; anything else — a
+ * theme token such as `muted-foreground`, or a literal `#EC4899` — passes
+ * through untouched for the hook to resolve or pass on.
+ *
+ * Precedence matches {@link resolveSpinnerRootClass}: explicit prop, then the
+ * inherited token, then the fallback.
+ */
+export function resolveSpinnerColor(color: string | undefined, inherited?: string): string {
+	const value = color ?? inherited ?? SPINNER_FALLBACK_COLOR;
+	return isSpinnerColor(value) ? SPINNER_COLOR_TOKEN[value] : value;
+}

package/src/components/switch/AGENTS.md

@@ -0,0 +1,213 @@
+# Switch
+
+A binary preference, flipped by a tap or by dragging its thumb. Compound root
+plus `Switch.Thumb`, `Switch.StartContent` and `Switch.EndContent`. It inherits
+almost every structural decision from [Slider](../slider/AGENTS.md), which is the
+section to read first — what follows is only where a switch differs.
+
+`import { Switch } from "@delacour/react-native-ui/switch";`
+
+## Files
+
+| File | What it holds |
+| --- | --- |
+| `index.ts` | → `@delacour/react-native-ui/switch` |
+| `switch.tsx` | Root — owns the pan, the state and the track |
+| `switch-thumb.tsx` | `Switch.Thumb`, the knob and its one animated style |
+| `switch-content.tsx` | The shared body behind both content layers — internal |
+| `switch-start-content.tsx` | `Switch.StartContent` |
+| `switch-end-content.tsx` | `Switch.EndContent` |
+| `switch.context.tsx` | `SwitchContext`, `useSwitch()`, `useSwitchContext()`, `useSwitchPart()` |
+| `switch.types.ts` | Prop types shared by two or more parts |
+| `switch.variants.ts` | Pure `tv()` slots + the release worklet, no RN imports |
+| `switch.variants.test.ts` | |
+
+## Design
+
+- **Colours**: `default`, `primary`, `success`, `warning`, `destructive`, `info` —
+  Badge's, Checkbox's and Slider's set. **Sizes**: `sm`, `md`, `lg`. There is no
+  `variant` axis: a switch has one shape, and a second way to paint it would be
+  a second thing to keep in step with the checkbox beside it.
+
+## Gesture
+
+- **The root is not a `Pressable`**, for `Slider`'s three reasons: its
+  `Gesture.Tap()` would fire `onPress` on every toggle, its root `Animated.View`
+  already owns `transform` — which is exactly what a thumb's position is — and a
+  thumb inside its own pressable would nest a descendant recogniser in the
+  root's. `HapticFeedback` and `playHaptic` are imported from `pressable.tsx`,
+  which is what that export is for.
+- **One `Gesture.Pan()` serves the tap and the drag, and there is no `Tap` to
+  race it.** A release whose finger barely moved *is* the tap, which
+  `resolveSwitchRelease` decides along with everything else: tap slop first, then
+  a flick's velocity, then the position. Two recognisers would have to negotiate
+  which one owned a press that turned into a drag, and the negotiation is the
+  bug — this way there is nothing to arbitrate.
+- **`distance` is the larger of the two axes, not the along-track
+  translation.** A vertical swipe that began on the switch moves nothing
+  horizontally, so reading only that axis would call every attempt to scroll past
+  the control a tap and toggle it. Reading both means such a swipe is movement
+  with no travel, which settles back to the state it started in — the switch is
+  left alone.
+- **The value is settled in `onFinalize`, and only there.** Unlike a slider there
+  is nothing to write on `onBegin`: a switch has no position to move a handle to,
+  only a state to end up in. `onFinalize` is still the callback because it is the
+  one that fires on every path, the never-activated one included — which is
+  exactly the path a stationary tap takes.
+- **`minDistance(0)` and `shouldCancelWhenOutside(false)`**, for the reasons
+  [Slider](../slider/AGENTS.md) sets out. The cost is the same one: a drag that
+  starts on the switch is the switch's, so you cannot scroll a list by putting
+  your finger on one.
+
+## Geometry
+
+- **The knob is a rounded rectangle lying on its side, not a disc**, and it is
+  the reason the thumb stopped reading `--spacing-icon-*`. That scale is where a
+  *glyph* belongs; a knob is the body of the control rather than a mark drawn on
+  it — the move `Slider`'s handle already made, and why `Checkbox` still reads
+  that scale for a square that really is a glyph in a box. No
+  `--spacing-switch-*` was minted either way; the thumb is plain spacing steps.
+- **Three relationships hold at every size, and the tests pin each rather than
+  the points.** The knob's width is the track's height; its height is that less
+  twice `SWITCH_THUMB_INSET`; and because both are `rounded-full`, the two
+  capsules come out **concentric** — each radius is half its own height, so the
+  difference is exactly that inset. It is the subtraction `Checkbox`'s fill makes
+  against its border, arrived at by construction rather than by a number.
+- **One inset, all four sides, and only two of them are written down.**
+  Horizontally it is a class the travel maths subtracts twice; vertically it is
+  never written at all, because the track is `justify-center` and an absolutely
+  positioned child with no vertical inset is centred by its parent — `Slider`'s
+  rule, where the track centres the thumb and the thumb carries no offset of its
+  own. On that axis the constant is a relationship a test pins, not a value
+  anything reads.
+- **A content layer is as wide as the travel, not as wide as the knob.** It
+  occupies exactly the space the knob vacates at its own end, which is what the
+  travel *is*. Size it like the knob and the far layer reaches under a knob drawn
+  on top of it, and its text is clipped — visible only at the size where the text
+  is longest, which is the last place anyone looks.
+- **The knob draws no border and no shadow.** A border is a second line where
+  there is already a boundary, and against a saturated track it reads as a dark
+  ring rather than as definition; `Slider`'s handle dropped its own for the same
+  reason. Contrast at rest comes from the track instead, which is why
+  `SWITCH_TRACK_REST_TOKEN` is `input` — the chrome a field's own box wears, a
+  step darker than the page in light and a step lighter in dark, so a knob
+  painted the page's own colour reads against it at either end of the theme.
+- **The track and its touch padding ride in the same size cell**, summing to 44pt
+  at every size, and the test asserts the sum rather than the parts — `Slider`'s
+  rule, and the trap it names: split them across two variants and a shorter track
+  silently shrinks the target.
+
+## Colour
+
+- **Every colour on the control is interpolated, so the `tv()` describes almost
+  none of it.** The track, the thumb and both content layers fade between two
+  token *values* off the one `progress`, and a colour being interpolated cannot
+  be a class — `Checkbox`'s border, four times over. The slot set keeps
+  `bg-secondary` and `bg-background` as the resting appearance those styles start
+  from and names no colour anywhere else; the maps are the single source. There
+  is deliberately **no `color` axis in the `tv()`** — a `bg-*` per colour there
+  would be a second source for one surface, which is how a class and a style end
+  up disagreeing for a frame on every toggle.
+- **The thumb takes the `-foreground` of the track it is travelling on**, so a
+  pale knob is never left unreadable on `warning`. `default` is the exception the
+  theme forces: there is no `--foreground-foreground`, and `background` is
+  what content drawn on the page's ink actually is. A test pins the whole map
+  against the track's.
+- **`Switch.StartContent` and `.EndContent` crossfade themselves.** Start sits at
+  the leading edge, which the knob vacates as the switch turns **on**, so it fades
+  in with `progress`; end is the mirror. That is the whole reason both can be
+  written once with no `isSelected &&` at the call site — the knob reads as
+  uncovering the other end rather than sliding over content that was always
+  there. Each layer is exactly the thumb's footprint at its own end, so a glyph is
+  centred on the space the knob will vacate rather than beside it, and each
+  publishes an `IconDefaultsProvider` and a `TextClassProvider` for the surface it
+  sits on: the coloured track for start, the resting one for end.
+- **A glyph's colour is a token and a `Text`'s is a class**, so
+  `SWITCH_CONTENT_TEXT_CLASS` exists beside `SWITCH_THUMB_TOKEN` rather than being
+  derived from it — Tailwind's scanner is static, so a runtime `text-${token}` is
+  never compiled and would silently draw nothing. A test pins every entry against
+  the token it must agree with.
+
+## Layering and motion
+
+- **The thumb is drawn last however the children were written.** Every part is
+  absolutely positioned and React Native paints later siblings on top, so a
+  `Switch.Thumb` written first — which is the order the anatomy reads best in —
+  would slide *under* the content layers. The root reorders rather than leaving a
+  gotcha in the API, and composes one in when the children hold none, so
+  `<Switch />` is already a complete control.
+- **The track scales on press, and the thumb does not** — the reverse of
+  `Slider`, which grows its handle. The track clips, so a scaled knob would be
+  cut off by its own capsule: a bite taken out of the knob rather than an
+  acknowledgement of the press. The outermost node is the one thing nothing can
+  crop, so that is where the feedback lives, on `Pressable`'s own `PRESS_SPRING`
+  so a switch and a button answer a touch identically.
+- **The thumb's own spring is critically damped**, where every other spring in
+  this package overshoots a little. A wider knob travels a shorter distance
+  inside a track that clips it, so an overshoot has nowhere to go — it would
+  visibly squash against the end of its own capsule on every toggle. A test pins
+  the damping ratio at or above one, and below the point where it crawls.
+- **The colours interpolate off `progress`, not off a timing of their own.** The
+  track therefore colours *with the finger* through a drag rather than snapping
+  when it is let go, and there is no second clock for the position to drift
+  from — the reason all four animated properties read one shared value.
+- **The colour and the press scale are two entries in one `useAnimatedStyle`,
+  never two calls.** Two animated styles on one view fight for the same props and
+  the later one silently wins, so the press would land on a track that never
+  scaled — `Radio.Indicator`'s rule, arrived at from the other side.
+- **The haptic fires at the commit, never at the grab.** A slider ticks on grab
+  because the grab already moves the value; a switch dragged half way and released
+  back has changed nothing, and one that buzzed for it would be reporting a state
+  change that did not happen. Default `haptic="selection"`, matching `Checkbox`.
+- **`settledDrags` and the `isDragging` ref are `Slider`'s, verbatim in shape.**
+  A controlled parent that rejects a dragged value leaves the state unchanged, so
+  without a token that moves on every release the sync effect has nothing to
+  re-run on and the thumb stays where the finger let go. The playground's
+  `/switch` has a switch that rejects every change, so the spring-back is on
+  screen rather than merely asserted.
+- **Reduce motion is left at Reanimated's default `System`**, with `Radio` and
+  `Checkbox` and against `Spinner`. The state is carried by the thumb's
+  *position*, so snapping straight to it is the right degradation.
+
+## Accessibility and API
+
+- **The accessibility surface is written out, because there is no `Pressable` to
+  inherit it from.** `accessibilityRole="switch"` and a checked state announce it;
+  `onAccessibilityTap` and an `activate` entry in `accessibilityActions` are what
+  actually flip it, on iOS and Android respectively. Without them the switch would
+  announce its state and offer no way to change it — the same gap
+  `Slider.Thumb`'s `adjustable` actions close.
+- **The root is marked `accessible`, and that one word is load-bearing.** Without
+  it the view is not an accessibility element on iOS at all, so the role and the
+  checked state written beside it never reach VoiceOver. It also merges the track
+  and its layers into the single element a control should be.
+- **There is no `Switch.Label` and no `Switch.Group`.** The track is a fixed pill
+  and a label cannot sit inside it, so the name is a `Field.Label` or a
+  `ListGroup.ItemTitle` a row away — and unlike `Slider`, the switch **does**
+  register `field.registerPress`, because a row-wide press means exactly what a
+  tap on the pill means. A switch is a binary preference, not one of a set, so
+  there is nothing for a group to own; the axis ladder is two rungs, the switch's
+  own props then an enclosing `Field`.
+- **A part is recognised by its `displayName`, never by reference alone.** The
+  root composes a `Switch.Thumb` in when the children hold none, which means it
+  has to *ask* whether a child is one — and `child.type === SwitchThumb` is not a
+  safe way to ask. This package ships raw `.tsx` for the consuming app to
+  compile, so React Compiler rewrites the binding on the way through, and Metro
+  can serve two instances of one module through a workspace symlink; either
+  leaves an element whose `type` is a different object standing for the same
+  component. The failure is silent and nearly invisible: detection returns false,
+  a second knob is composed on top of the caller's, and because the two are the
+  same size and colour the only symptom is that **anything inside the caller's
+  knob disappears**. `displayName` survives all of it — rule 12 requires one and
+  `display-name.test.ts` enforces that they are present and unique — so that is
+  what `isSwitchThumbElement` asks for, with reference equality kept only as the
+  fast path.
+
+  **[`Radio`](../radio/AGENTS.md) and `ListGroup` still ask the unsafe question**
+  (`radio.tsx`'s indicator detection, and the divider and icon-swap walks
+  elsewhere). Nobody has reported it because their duplicates overlap invisibly
+  rather than hiding content — a second ring exactly behind the first. Worth
+  fixing the next time one of them is touched.
+- **RTL is not handled.** The thumb travels on `translateX`, which does not flip,
+  and nothing else in this package handles it yet. Stated here rather than
+  half-solved.

package/src/components/switch/index.ts

@@ -0,0 +1,42 @@
+export { Switch, type SwitchProps } from "./switch";
+export { type SwitchContextValue, SwitchProvider, useSwitch, useSwitchContext } from "./switch.context";
+export type { SwitchContentProps } from "./switch.types";
+export {
+	hasThumbChild,
+	resolveSwitchAxes,
+	resolveSwitchContentTreatment,
+	resolveSwitchRelease,
+	resolveSwitchThumbTokens,
+	resolveSwitchTrackTokens,
+	SWITCH_COLORS,
+	SWITCH_CONTENT_ICON_STEP,
+	SWITCH_CONTENT_REST_TEXT_CLASS,
+	SWITCH_CONTENT_REST_TOKEN,
+	SWITCH_CONTENT_TEXT_CLASS,
+	SWITCH_DEFAULT_COLOR,
+	SWITCH_DEFAULT_SIZE,
+	SWITCH_FLING_VELOCITY,
+	SWITCH_INVALID_CONTENT_TEXT_CLASS,
+	SWITCH_INVALID_THUMB_TOKEN,
+	SWITCH_INVALID_TRACK_TOKEN,
+	SWITCH_PRESS_ANIMATION,
+	SWITCH_PRESS_SPRING,
+	SWITCH_SIZES,
+	SWITCH_TAP_SLOP,
+	SWITCH_THUMB_INSET,
+	SWITCH_THUMB_REST_TOKEN,
+	SWITCH_THUMB_SPRING,
+	SWITCH_THUMB_TOKEN,
+	SWITCH_TRACK_REST_TOKEN,
+	SWITCH_TRACK_TOKEN,
+	type SwitchAxes,
+	type SwitchColor,
+	type SwitchContentPlacement,
+	type SwitchFieldAxes,
+	type SwitchOwnAxes,
+	type SwitchSize,
+	type SwitchVariantProps,
+	switchTravel,
+	switchVariants,
+} from "./switch.variants";
+export type { SwitchThumbProps } from "./switch-thumb";

package/src/components/switch/switch-content.tsx

@@ -0,0 +1,111 @@
+import { Children, type ReactElement, type ReactNode, useMemo } from "react";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { useThemeColor } from "../../hooks/use-theme-color";
+import { IconDefaultsProvider } from "../icon";
+import { Text } from "../text";
+import { TextClassProvider } from "../text/text.context";
+import { useSwitchPart } from "./switch.context";
+import type { SwitchContentProps } from "./switch.types";
+import { resolveSwitchContentTreatment, type SwitchContentPlacement, switchVariants } from "./switch.variants";
+
+/**
+ * The shared implementation behind `Switch.StartContent` and `.EndContent`.
+ *
+ * The two are the same box at opposite ends of the track — which end, and which
+ * way their opacity runs, are the only differences — so they share this leaf
+ * rather than duplicating {@link wrapTextChildren} and an animated style into
+ * two part files. `Input.Group`'s two decorators make the same trade.
+ *
+ * **The crossfade is the component's, not the caller's.** `StartContent` sits at
+ * the leading edge, which the thumb vacates as the switch turns **on**, so it
+ * fades in with `progress`; `EndContent` sits at the trailing edge and fades out
+ * with it. That is what lets both be written once with no conditionals — the
+ * thumb reads as uncovering the other end rather than as sliding over content
+ * that was always there.
+ *
+ * The layer is exactly the thumb's footprint at its own end, so a glyph is
+ * centred on the space the knob will vacate rather than beside it.
+ *
+ * Not a part itself: it takes the caller-facing name so the error thrown outside
+ * a switch names `Switch.StartContent` rather than something private.
+ */
+export function SwitchContent({
+	part,
+	placement,
+	className,
+	children,
+	...props
+}: SwitchContentProps & { part: string; placement: SwitchContentPlacement }): ReactElement {
+	const { color, size, isDisabled, isInvalid, progress } = useSwitchPart(part);
+	const slots = switchVariants({ isDisabled, size });
+
+	const treatment = resolveSwitchContentTreatment({ color, isInvalid, placement });
+	const glyphColor = useThemeColor(treatment.color);
+	const glyphClassName = slots.glyph();
+	const iconDefaults = useMemo(
+		() => ({ className: glyphClassName, color: glyphColor ?? "" }),
+		[glyphClassName, glyphColor]
+	);
+
+	const isStart = placement === "start";
+	const contentStyle = useAnimatedStyle(() => ({
+		opacity: isStart ? progress.value : 1 - progress.value,
+	}));
+
+	const textClassName = slots.contentText({ className: treatment.textClass });
+
+	return (
+		<Animated.View
+			className={isStart ? slots.startContent({ className }) : slots.endContent({ className })}
+			// Never the element a screen reader lands on. The switch announces itself
+			// as one control with a checked state, and a decorative glyph either side
+			// of the knob has nothing to add to that.
+			accessible={false}
+			importantForAccessibility="no-hide-descendants"
+			pointerEvents="none"
+			style={contentStyle}
+			{...props}
+		>
+			<IconDefaultsProvider value={iconDefaults}>
+				<TextClassProvider value={textClassName}>{wrapTextChildren(children)}</TextClassProvider>
+			</IconDefaultsProvider>
+		</Animated.View>
+	);
+}
+SwitchContent.displayName = "DelacourUI.Switch.Content";
+
+/**
+ * Wraps bare text children in a `Text`.
+ *
+ * A content layer renders a `View`, and React Native cannot render a string
+ * outside a `<Text>` — so `<Switch.EndContent>OFF</Switch.EndContent>`, which is
+ * the shortest thing anyone will write, would otherwise crash. Consecutive
+ * strings and numbers collapse into one `Text` rather than one each, the same
+ * rule and the same reason as `Input`'s decorators.
+ *
+ * The wrapped text needs no className: the layer has already published its
+ * 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={`content-${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/switch/switch-end-content.tsx

@@ -0,0 +1,18 @@
+import type { ReactElement } from "react";
+import type { SwitchContentProps } from "./switch.types";
+import { SwitchContent } from "./switch-content";
+
+/**
+ * Content at the trailing edge of the track, behind the thumb.
+ *
+ * Revealed as the switch turns **off** — this is the end the knob vacates — so
+ * it is where the "off" mark goes: a cross, a moon, the word OFF. The fade is
+ * the component's, so write it once and unconditionally.
+ *
+ * It sits on the resting track rather than the coloured one, so its glyph takes
+ * a muted foreground rather than the switch's colour.
+ */
+export function SwitchEndContent(props: SwitchContentProps): ReactElement {
+	return <SwitchContent part="Switch.EndContent" placement="end" {...props} />;
+}
+SwitchEndContent.displayName = "DelacourUI.Switch.EndContent";

package/src/components/switch/switch-start-content.tsx

@@ -0,0 +1,20 @@
+import type { ReactElement } from "react";
+import type { SwitchContentProps } from "./switch.types";
+import { SwitchContent } from "./switch-content";
+
+/**
+ * Content at the leading edge of the track, behind the thumb.
+ *
+ * Revealed as the switch turns **on** — this is the end the knob vacates — so it
+ * is where the "on" mark goes: a tick, a sun, the word ON. The fade is the
+ * component's, so write it once and unconditionally; there is no `isSelected &&`
+ * to remember.
+ *
+ * An `Icon` needs nothing said at the call site: it inherits the switch's glyph
+ * step and the foreground of the colour the track fades to. A bare string is
+ * wrapped in a `Text` that inherits the same treatment.
+ */
+export function SwitchStartContent(props: SwitchContentProps): ReactElement {
+	return <SwitchContent part="Switch.StartContent" placement="start" {...props} />;
+}
+SwitchStartContent.displayName = "DelacourUI.Switch.StartContent";