@delacour/react-native-ui 0.4.0-alpha.20261020090817 → 0.4.0-alpha.20261020154302

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.4.0-alpha.20261020090817",
+	"version": "0.4.0-alpha.20261020154302",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -35,9 +35,12 @@
 		"./styles/theme": "./src/styles/theme.css",
 		"./accordion": "./src/components/accordion/index.ts",
 		"./alert": "./src/components/alert/index.ts",
+		"./animated-badge": "./src/components/animated-badge/index.ts",
+		"./attachment": "./src/components/attachment/index.ts",
 		"./avatar": "./src/components/avatar/index.ts",
 		"./badge": "./src/components/badge/index.ts",
 		"./bottom-sheet": "./src/components/bottom-sheet/index.ts",
+		"./breadcrumb": "./src/components/breadcrumb/index.ts",
 		"./button": "./src/components/button/index.ts",
 		"./calendar": "./src/components/calendar/index.ts",
 		"./card": "./src/components/card/index.ts",
@@ -45,54 +48,106 @@
 		"./chart": "./src/components/chart/index.ts",
 		"./checkbox": "./src/components/checkbox/index.ts",
 		"./chip": "./src/components/chip/index.ts",
+		"./circular-text": "./src/components/circular-text/index.ts",
 		"./collapsible": "./src/components/collapsible/index.ts",
+		"./color-picker": "./src/components/color-picker/index.ts",
+		"./combobox": "./src/components/combobox/index.ts",
+		"./compare": "./src/components/compare/index.ts",
 		"./context-menu": "./src/components/context-menu/index.ts",
+		"./countdown": "./src/components/countdown/index.ts",
+		"./date-picker": "./src/components/date-picker/index.ts",
+		"./date-time-picker": "./src/components/date-time-picker/index.ts",
 		"./dialog": "./src/components/dialog/index.ts",
+		"./direction": "./src/components/direction/index.ts",
 		"./drawer": "./src/components/drawer/index.ts",
 		"./empty-state": "./src/components/empty-state/index.ts",
 		"./fab": "./src/components/fab/index.ts",
 		"./feedback": "./src/components/feedback/index.ts",
 		"./field": "./src/components/field/index.ts",
+		"./flip-card": "./src/components/flip-card/index.ts",
+		"./flow": "./src/components/flow/index.ts",
+		"./frame": "./src/components/frame/index.ts",
+		"./grid-item": "./src/components/grid-item/index.ts",
 		"./icon": "./src/components/icon/index.ts",
+		"./image-viewer": "./src/components/image-viewer/index.ts",
 		"./input": "./src/components/input/index.ts",
 		"./item": "./src/components/item/index.ts",
 		"./kpi": "./src/components/kpi/index.ts",
 		"./label": "./src/components/label/index.ts",
+		"./leaderboard": "./src/components/leaderboard/index.ts",
 		"./list-group": "./src/components/list-group/index.ts",
 		"./map": "./src/components/map/index.ts",
+		"./markdown-editor": "./src/components/markdown-editor/index.ts",
+		"./marker": "./src/components/marker/index.ts",
+		"./marquee": "./src/components/marquee/index.ts",
 		"./menu": "./src/components/menu/index.ts",
+		"./message": "./src/components/message/index.ts",
+		"./message-scroller": "./src/components/message-scroller/index.ts",
 		"./meter": "./src/components/meter/index.ts",
+		"./number-input": "./src/components/number-input/index.ts",
+		"./otp-input": "./src/components/otp-input/index.ts",
 		"./overlay": "./src/components/overlay/index.ts",
+		"./page-header": "./src/components/page-header/index.ts",
+		"./pagination": "./src/components/pagination/index.ts",
+		"./planner": "./src/components/planner/index.ts",
 		"./popover": "./src/components/popover/index.ts",
+		"./post": "./src/components/post/index.ts",
 		"./pressable": "./src/components/pressable/index.ts",
 		"./progress": "./src/components/progress/index.ts",
 		"./progress-button": "./src/components/progress-button/index.ts",
 		"./provider": "./src/components/provider/index.ts",
+		"./qr-code": "./src/components/qr-code/index.ts",
+		"./questionnaire": "./src/components/questionnaire/index.ts",
 		"./radio": "./src/components/radio/index.ts",
 		"./rating": "./src/components/rating/index.ts",
 		"./screen": "./src/components/screen/index.ts",
+		"./scroll-blur": "./src/components/scroll-blur/index.ts",
+		"./scroll-canvas": "./src/components/scroll-canvas/index.ts",
+		"./scroll-fade": "./src/components/scroll-fade/index.ts",
+		"./scroll-header": "./src/components/scroll-header/index.ts",
+		"./scroll-text": "./src/components/scroll-text/index.ts",
+		"./search-bar": "./src/components/search-bar/index.ts",
+		"./section-progress": "./src/components/section-progress/index.ts",
+		"./section-rail": "./src/components/section-rail/index.ts",
+		"./select": "./src/components/select/index.ts",
 		"./selection-mode": "./src/components/selection-mode/index.ts",
 		"./separator": "./src/components/separator/index.ts",
+		"./signature": "./src/components/signature/index.ts",
 		"./skeleton": "./src/components/skeleton/index.ts",
+		"./sketch": "./src/components/sketch/index.ts",
 		"./slide-button": "./src/components/slide-button/index.ts",
 		"./slider": "./src/components/slider/index.ts",
+		"./sortable": "./src/components/sortable/index.ts",
 		"./spinner": "./src/components/spinner/index.ts",
+		"./split-view": "./src/components/split-view/index.ts",
+		"./splitter": "./src/components/splitter/index.ts",
 		"./stack-card": "./src/components/stack-card/index.ts",
 		"./steps": "./src/components/steps/index.ts",
+		"./support": "./src/components/support/index.ts",
 		"./surface": "./src/components/surface/index.ts",
 		"./swipe": "./src/components/swipe/index.ts",
 		"./switch": "./src/components/switch/index.ts",
+		"./table": "./src/components/table/index.ts",
 		"./tabs": "./src/components/tabs/index.ts",
+		"./tag-input": "./src/components/tag-input/index.ts",
 		"./text": "./src/components/text/index.ts",
+		"./text-animation": "./src/components/text-animation/index.ts",
 		"./textarea": "./src/components/textarea/index.ts",
+		"./theme-selector": "./src/components/theme-selector/index.ts",
+		"./time-picker": "./src/components/time-picker/index.ts",
+		"./timeline": "./src/components/timeline/index.ts",
 		"./toast": "./src/components/toast/index.ts",
 		"./toggle-button": "./src/components/toggle-button/index.ts",
 		"./tooltip": "./src/components/tooltip/index.ts",
+		"./tour": "./src/components/tour/index.ts",
+		"./tree": "./src/components/tree/index.ts",
+		"./expo/blur-layer": "./src/expo/blur-layer.tsx",
 		"./expo/navigation-theme": "./src/expo/navigation-theme.tsx",
 		"./hooks/use-calm-motion": "./src/hooks/use-calm-motion.tsx",
 		"./hooks/use-controllable-state": "./src/hooks/use-controllable-state.ts",
 		"./hooks/use-keyboard-state-sync": "./src/hooks/use-keyboard-state-sync.tsx",
 		"./hooks/use-navigation-theme": "./src/hooks/use-navigation-theme.ts",
+		"./hooks/use-reduce-transparency": "./src/hooks/use-reduce-transparency.ts",
 		"./hooks/use-scroll-sections": "./src/hooks/use-scroll-sections.ts",
 		"./hooks/use-scroll-source": "./src/hooks/use-scroll-source.tsx",
 		"./hooks/use-theme-color": "./src/hooks/use-theme-color.ts",
@@ -123,11 +178,13 @@
 		"tailwind-variants": "^3.3.1"
 	},
 	"peerDependencies": {
+		"expo-blur": ">=15",
 		"@maplibre/maplibre-react-native": "^11.5.0",
 		"@central-icons-react-native/round-outlined-radius-1-stroke-1.5": "^1.1",
-		"@delacour/react-native-bottom-sheet": "0.2.0-alpha.20261020090817",
+		"@delacour/react-native-bottom-sheet": "0.2.0-alpha.20261020154302",
 		"@delacour/react-native-charts": ">=0.1.0",
 		"@legendapp/list": ">=3.3",
+		"@shopify/react-native-skia": ">=2",
 		"expo-linear-gradient": ">=15",
 		"expo-router": ">=57",
 		"react": ">=19",
@@ -145,6 +202,9 @@
 		"uniwind": "^1.11.0"
 	},
 	"peerDependenciesMeta": {
+		"expo-blur": {
+			"optional": true
+		},
 		"@maplibre/maplibre-react-native": {
 			"optional": true
 		},
@@ -157,6 +217,9 @@
 		"@legendapp/list": {
 			"optional": true
 		},
+		"@shopify/react-native-skia": {
+			"optional": true
+		},
 		"expo-router": {
 			"optional": true
 		},
@@ -168,6 +231,7 @@
 		}
 	},
 	"devDependencies": {
+		"expo-blur": "~58.0.5",
 		"@maplibre/maplibre-react-native": "^11.5.0",
 		"@delacour/biome-config": "workspace:*",
 		"@delacour/react-native-bottom-sheet": "workspace:*",

package/src/components/animated-badge/AGENTS.md

@@ -0,0 +1,132 @@
+# AnimatedBadge
+
+A status pill whose content moves when it changes: the old glyph and label roll
+out, the new ones roll in, and the capsule springs to the new width. One paint,
+one job, a small closed API.
+
+`import { AnimatedBadge } from "@delacour/react-native-ui/animated-badge";`
+
+## Files
+
+| File | What it holds |
+| --- | --- |
+| `index.ts` | → `@delacour/react-native-ui/animated-badge` (component, props, statuses, sizes, resolvers) |
+| `animated-badge.tsx` | The root — builds the frame, owns the width spring and the layout transition |
+| `animated-badge-content.tsx` | The moving glyph + label unit (internal leaf, `DelacourUI.AnimatedBadge.Content`) |
+| `animated-badge-glyph.tsx` | Status → glyph map, the spinner for `loading`, the pulse (internal leaf, `…Glyph`) |
+| `animated-badge-measure.tsx` | The invisible measurer that lays out the incoming content (internal leaf, `…Measure`) |
+| `use-animated-badge-roll.ts` | The roll: holds the outgoing frame until it is off-screen, then lands the newest |
+| `animated-badge.types.ts` | `AnimatedBadgeFrame`, shared by the root, the roll, the content and the measurer |
+| `animated-badge.variants.ts` | Statuses, sizes, status → colour, constants, pure resolvers — no RN imports |
+| `animated-badge.variants.test.ts` | Written first |
+
+## Design
+
+- **Not a `Badge`, and not a mode of one.** `Badge` is a static label with four
+  paints, six colours and composed content. This is one paint and one job — say a
+  status, and move when it changes. Folding a roll into `Badge` would put a
+  measurer and two springs under every tag in a list that never changes.
+- **No compound parts.** The roll has to own the glyph and the label together as
+  one moving unit, so an `AnimatedBadge.Label` would only invite a child the roll
+  cannot see. A caller wanting composed content uses `Badge`.
+- **No `onPress`.** A status pill reports; it has no action. The root is a plain
+  `Animated.View` with `accessibilityRole="text"`. A tappable status is a `Badge`
+  with `onPress`, which already brings `Pressable`, feedback and haptics.
+- **One paint: `Badge`'s soft row, read rather than restated.**
+  `resolveAnimatedBadgeSlots` calls `badgeVariants({ variant: "soft", color, size })`
+  from `../badge/badge.variants` — a leaf, legal across folders (package rule 3);
+  never `../badge`. A test asserts the root, label and icon slots equal `Badge`'s
+  at every status and size, so the two sit level in a row. No ring: the soft
+  badge's reserved border stays transparent.
+- **`status` maps to a `BadgeColor`, and `neutral` and `loading` share the
+  neutral fill.** `destructive`, never `danger`. Work in flight has no verdict
+  yet; the spinner already says it is moving. The glyph's colour is
+  `BADGE_FOREGROUND_TOKEN.soft[color]`, the token the label resolves to, pinned by
+  a test and checked against both themes.
+- **Sizes are `sm` and `md` only.** A status pill sits in a list row, a header or
+  a sentence; `lg` is a banner's size, and that is `Alert`.
+- **Glyphs match `Alert`'s** for the four statuses both have: `IconCircleInfo`,
+  `IconCircleCheck`, `IconExclamationTriangle` (warning) and
+  `IconExclamationCircle` (destructive) — triangle against circle, so the two
+  read apart without colour. `neutral` is a bare `IconCircle`. `loading` is a
+  `Spinner`, sized and coloured by the same `IconDefaultsProvider` as an icon.
+- **A custom `icon` beats the status's glyph, `loading` included.** It is the
+  caller's explicit word. `showIcon={false}` draws nothing; the two are a
+  discriminated union so `icon` with `showIcon={false}` does not typecheck.
+- **`icon` takes an `IconComponent`, not a node.** The badge renders it through
+  `<Icon>`, so its size and colour come from the badge — icons inherit, never
+  hand-sized.
+- **The roll is one view, never two copies.** `useAnimatedBadgeRoll` holds the
+  frame on screen while the exit runs (`ROLL_OUT_MS`, toward `-ROLL_DISTANCE`,
+  fading out). The swap happens from the exit's completion callback via
+  `scheduleOnRN`, while the content is invisible; the enter springs in from
+  `+ROLL_DISTANCE` in a layout effect after that commit, so it never starts on the
+  outgoing word. Two overlapping copies double up mid-swap, which is the failure
+  this shape exists to prevent.
+- **A change mid-roll retargets.** The exit continues from where it is, and
+  whichever frame is newest when it finishes lands — intermediates are skipped. A
+  change back to the frame still on screen returns it home instead of rolling.
+  The effect is keyed on the two keys, not on the frame object, so a parent
+  re-rendering mid-exit does not restart the exit's clock.
+- **The capsule paints from the frame on screen**, not from the incoming props.
+  Its fill changes while the outgoing word is invisible, rather than under it, and
+  the outgoing word keeps its own colour on its way out.
+- **The width spring measures the next content before it arrives.**
+  `AnimatedBadgeMeasure` is a copy of the capsule — the root's classes, the row,
+  the one-line label — on an absolutely positioned, transparent,
+  `pointerEvents="none"`, hidden-from-assistive-technology canvas. Its `onLayout`
+  drives the root's `width` with `withSpring`. The canvas is
+  `MEASURE_CANVAS_WIDTH` wide because Yoga caps an absolute child's available
+  width at its parent's: without it a narrow badge would wrap the next word and
+  report the wrapped width. The glyph is measured as a box of the icon step — a
+  spinner in the measurer would spin for nobody.
+- **The first paint never jumps.** The root carries no width until the first
+  measure, and that first measure is set without a spring.
+- **A text label is drawn on one line** (`numberOfLines={1}`) — the measurer lays
+  it out on one line too, so the measured width is the width drawn. A status is
+  a word or two; a sentence belongs in an `Alert`.
+- **Padding, never a height** — `Badge`'s rule and reason: OS font scaling.
+- **`animateLayout`** puts `LinearTransition.springify()` on the root, so the
+  badge springs to a new position when the layout around it moves. Inside
+  flowing text that would slide the badge across lines when the sentence
+  reflows, so `animateLayout={false}` turns it off.
+- **Change detection is a string key.** `resolveAnimatedBadgeKey`:
+  `contentKey` wins (`status:contentKey`), then text children — a string, a
+  number, or an array of only those (`status:joined`) — then the status alone. A
+  non-text label therefore rolls only on a status change unless it is given a
+  `contentKey`. The same key across a re-render does nothing.
+- **Reduce motion cuts over; calm motion stills only the pulse.**
+  `resolveAnimatedBadgeMotion` returns `{ roll, resize, layout, pulse }`. Under
+  `useReducedMotion()` the content swaps, the width is set, no layout transition
+  runs and nothing pulses. Under the app's `isMotionCalm` alone (E2E) the roll
+  and springs still run — they settle, which is all a test runner waits for —
+  and only the endless pulse holds still.
+- **The pulse is on the glyph, not the capsule.** A swelling capsule pushes the
+  layout around it and reads as noise; a swelling glyph reads as breathing. It
+  defaults on for `loading`, and an explicit `pulse={false}` wins. Its repeat
+  sets `ReduceMotion.Never` and is gated one level up, exactly like
+  `useSkeletonClock` — under the default policy a `withRepeat(-1)` of a
+  zero-length timing spins forever.
+- **Accessibility.** The root is `accessible`, `accessibilityRole="text"`,
+  labelled with the label text (a caller's `accessibilityLabel` wins) and
+  `accessibilityState.busy` while `loading`. The glyph is hidden — it duplicates
+  the word — and so is the measurer. With `announce` (default `true`) the root
+  is a polite live region on Android, and iOS calls
+  `AccessibilityInfo.announceForAccessibility` once the new content lands, never
+  on mount. Pass `announce={false}` in a list of fifty, where every row
+  announcing is noise.
+
+## Where the spec and the icon set disagreed
+
+- The usage examples name a sparkles glyph; Central has `IconSparkle`, singular.
+  The demos and docs use `IconSparkle`.
+- The spec's file map has no measurer, roll hook or types file. Each exists
+  because the root, the content and the measurer all need the frame, and a part
+  must never import its own root (package rule 3).
+- No demo carries `meta.capture` yet. A captured demo must have committed media
+  in `apps/web/src/previews/manifest.ts`, and that is written only by
+  `bun run previews` on a simulator, which this change did not run. The intended
+  set is `status-flow` (hero), `statuses`, `sizes`, `custom-icon` and
+  `inline-text`; `reduced-motion` stays uncaptured. Add `capture` to those five
+  in the same commit that photographs them, then add `<Preview>` heroes to the
+  docs page.

package/src/components/animated-badge/animated-badge-content.tsx

@@ -0,0 +1,58 @@
+import type { ReactElement } from "react";
+import Animated from "react-native-reanimated";
+import { IconDefaultsProvider } from "../icon";
+import { Text } from "../text";
+import { TextClassProvider } from "../text/text.context";
+import type { AnimatedBadgeAnimatedStyle, AnimatedBadgeFrame } from "./animated-badge.types";
+import {
+	type AnimatedBadgeSize,
+	resolveAnimatedBadgeForeground,
+	resolveAnimatedBadgeSlots,
+} from "./animated-badge.variants";
+import { AnimatedBadgeGlyph } from "./animated-badge-glyph";
+
+export type AnimatedBadgeContentProps = {
+	frame: AnimatedBadgeFrame;
+	size: AnimatedBadgeSize;
+	labelClassName: string | undefined;
+	/** The roll's offset and opacity, from `useAnimatedBadgeRoll`. */
+	rollStyle: AnimatedBadgeAnimatedStyle;
+	isPulsing: boolean;
+};
+
+/**
+ * The moving unit: glyph and label in one row, rolled as one view.
+ *
+ * Paints from the frame it is handed rather than from the root's props, so the
+ * outgoing word keeps its own colour until it has left. A text label is drawn
+ * on one line — the measurer lays the next one out on one line too, and the
+ * capsule springs to that width.
+ */
+export function AnimatedBadgeContent({
+	frame,
+	size,
+	labelClassName,
+	rollStyle,
+	isPulsing,
+}: AnimatedBadgeContentProps): ReactElement {
+	const slots = resolveAnimatedBadgeSlots({ status: frame.status, size, labelClassName });
+	const iconDefaults = { className: slots.icon, color: resolveAnimatedBadgeForeground(frame.status) };
+
+	return (
+		<IconDefaultsProvider value={iconDefaults}>
+			<TextClassProvider value={slots.label}>
+				<Animated.View className={slots.content} style={rollStyle}>
+					<AnimatedBadgeGlyph icon={frame.icon} isPulsing={isPulsing} kind={frame.glyph} status={frame.status} />
+					{frame.text === undefined ? (
+						frame.label
+					) : (
+						<Text className={slots.label} numberOfLines={1}>
+							{frame.text}
+						</Text>
+					)}
+				</Animated.View>
+			</TextClassProvider>
+		</IconDefaultsProvider>
+	);
+}
+AnimatedBadgeContent.displayName = "DelacourUI.AnimatedBadge.Content";

package/src/components/animated-badge/animated-badge-glyph.tsx

@@ -0,0 +1,118 @@
+import { type ReactElement, useEffect } from "react";
+import Animated, {
+	cancelAnimation,
+	Easing,
+	ReduceMotion,
+	useAnimatedStyle,
+	useSharedValue,
+	withRepeat,
+	withTiming,
+} from "react-native-reanimated";
+import {
+	IconCircle,
+	IconCircleCheck,
+	IconCircleInfo,
+	IconExclamationCircle,
+	IconExclamationTriangle,
+} from "../../icons/central";
+import { Icon, type IconComponent } from "../icon";
+import { Spinner } from "../spinner";
+import {
+	type AnimatedBadgeGlyphKind,
+	type AnimatedBadgeStatus,
+	PULSE_CYCLE_MS,
+	PULSE_MAX_SCALE,
+	PULSE_MIN_OPACITY,
+} from "./animated-badge.variants";
+
+/**
+ * The glyph each status draws when the caller names none.
+ *
+ * The four statuses `Alert` also has take `Alert`'s glyphs, so a warning reads
+ * the same in a badge as in a banner — and `warning` and `destructive` differ in
+ * shape as well as colour, a triangle against a circle, for anyone who cannot
+ * tell amber from red. `neutral` is a bare ring: a status with no verdict.
+ * `loading` is absent because it spins instead.
+ *
+ * Lives here rather than in `animated-badge.variants.ts` because the glyphs are
+ * React Native SVG components, and that file must stay importable from `bun test`.
+ */
+const STATUS_GLYPHS: Record<Exclude<AnimatedBadgeStatus, "loading">, IconComponent> = {
+	neutral: IconCircle,
+	info: IconCircleInfo,
+	success: IconCircleCheck,
+	warning: IconExclamationTriangle,
+	destructive: IconExclamationCircle,
+};
+
+/**
+ * The element for a resolved glyph kind. `loading` with no custom icon always
+ * spins, whichever kind it arrives with.
+ */
+function pickGlyph(
+	kind: "spinner" | "icon",
+	status: AnimatedBadgeStatus,
+	icon: IconComponent | undefined
+): ReactElement {
+	if (kind === "icon" && icon) return <Icon icon={icon} />;
+	if (status === "loading") return <Spinner />;
+	return <Icon icon={icon ?? STATUS_GLYPHS[status]} />;
+}
+
+export type AnimatedBadgeGlyphProps = {
+	kind: AnimatedBadgeGlyphKind;
+	status: AnimatedBadgeStatus;
+	icon: IconComponent | undefined;
+	/** Swell in a loop. Already resolved against calm and reduced motion. */
+	isPulsing: boolean;
+};
+
+/**
+ * The glyph leading the label: the caller's icon, the status's icon, or a
+ * spinner for `loading`. Size and colour come from the badge's
+ * `IconDefaultsProvider`, never from here.
+ *
+ * Hidden from assistive technology — it duplicates the word beside it, and the
+ * spinner would otherwise announce itself as a progress bar inside a label.
+ *
+ * The pulse is a 0 → 1 clock read through a cosine, the shape `Skeleton`'s pulse
+ * uses. Its timing sets `ReduceMotion.Never` because the gate is one level up,
+ * in `resolveAnimatedBadgeMotion`: under the default policy a `withRepeat(-1)`
+ * of a timing the OS has zeroed spins forever.
+ */
+export function AnimatedBadgeGlyph({ kind, status, icon, isPulsing }: AnimatedBadgeGlyphProps): ReactElement | null {
+	const clock = useSharedValue(0);
+
+	useEffect(() => {
+		if (!isPulsing) {
+			cancelAnimation(clock);
+			clock.value = 0;
+			return;
+		}
+
+		clock.value = 0;
+		clock.value = withRepeat(
+			withTiming(1, { duration: PULSE_CYCLE_MS, easing: Easing.linear, reduceMotion: ReduceMotion.Never }),
+			-1,
+			false
+		);
+		return () => cancelAnimation(clock);
+	}, [isPulsing, clock]);
+
+	const pulseStyle = useAnimatedStyle(() => {
+		const swell = (1 - Math.cos(clock.value * 2 * Math.PI)) / 2;
+		return {
+			opacity: 1 - (1 - PULSE_MIN_OPACITY) * swell,
+			transform: [{ scale: 1 + (PULSE_MAX_SCALE - 1) * swell }],
+		};
+	});
+
+	if (kind === "none") return null;
+
+	return (
+		<Animated.View accessibilityElementsHidden importantForAccessibility="no-hide-descendants" style={pulseStyle}>
+			{pickGlyph(kind, status, icon)}
+		</Animated.View>
+	);
+}
+AnimatedBadgeGlyph.displayName = "DelacourUI.AnimatedBadge.Glyph";

package/src/components/animated-badge/animated-badge-measure.tsx

@@ -0,0 +1,69 @@
+import type { ReactElement } from "react";
+import { type LayoutChangeEvent, View } from "react-native";
+import { Text } from "../text";
+import { TextClassProvider } from "../text/text.context";
+import type { AnimatedBadgeFrame } from "./animated-badge.types";
+import { type AnimatedBadgeSize, MEASURE_CANVAS_WIDTH, resolveAnimatedBadgeSlots } from "./animated-badge.variants";
+
+export type AnimatedBadgeMeasureProps = {
+	/** The incoming frame — the one the capsule is about to hold. */
+	frame: AnimatedBadgeFrame;
+	size: AnimatedBadgeSize;
+	className: string | undefined;
+	labelClassName: string | undefined;
+	/** Receives the capsule's width for {@link frame}, border and padding included. */
+	onMeasure: (width: number) => void;
+};
+
+/**
+ * Lays out the incoming content, invisibly, so the capsule can spring to its
+ * width before it arrives.
+ *
+ * A copy of the capsule — the root's own classes, the same row, the same label
+ * on one line — on an absolutely positioned canvas wider than any label (see
+ * `MEASURE_CANVAS_WIDTH`). The glyph is a box of the icon step rather than the
+ * glyph itself: the footprint is all that is measured, and a spinner here would
+ * spin for nobody.
+ *
+ * Hidden from assistive technology, transparent and untouchable — it exists for
+ * its `onLayout` and nothing else.
+ */
+export function AnimatedBadgeMeasure({
+	frame,
+	size,
+	className,
+	labelClassName,
+	onMeasure,
+}: AnimatedBadgeMeasureProps): ReactElement {
+	const slots = resolveAnimatedBadgeSlots({ status: frame.status, size, className, labelClassName });
+
+	const handleLayout = (event: LayoutChangeEvent): void => {
+		onMeasure(event.nativeEvent.layout.width);
+	};
+
+	return (
+		<View
+			accessibilityElementsHidden
+			className="absolute top-0 left-0 opacity-0"
+			importantForAccessibility="no-hide-descendants"
+			pointerEvents="none"
+			style={{ width: MEASURE_CANVAS_WIDTH }}
+		>
+			<TextClassProvider value={slots.label}>
+				<View className={slots.root} onLayout={handleLayout}>
+					<View className={slots.content}>
+						{frame.glyph === "none" ? null : <View className={slots.icon} />}
+						{frame.text === undefined ? (
+							frame.label
+						) : (
+							<Text className={slots.label} numberOfLines={1}>
+								{frame.text}
+							</Text>
+						)}
+					</View>
+				</View>
+			</TextClassProvider>
+		</View>
+	);
+}
+AnimatedBadgeMeasure.displayName = "DelacourUI.AnimatedBadge.Measure";