@delacour/react-native-ui 0.5.0-alpha.20261024145030 → 0.5.0-alpha.20261024151637

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.5.0-alpha.20261024145030",
+	"version": "0.5.0-alpha.20261024151637",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -182,8 +182,8 @@
 		"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.3.0-alpha.20261024145030",
-		"@delacour/react-native-charts": "0.2.0-alpha.20261024145030",
+		"@delacour/react-native-bottom-sheet": "0.3.0-alpha.20261024151637",
+		"@delacour/react-native-charts": "0.2.0-alpha.20261024151637",
 		"@legendapp/list": ">=3.3",
 		"react-native-skia": ">=3.7.3",
 		"expo-linear-gradient": ">=15",

package/src/components/slide-button/AGENTS.md

@@ -24,7 +24,7 @@ There is no `slide-button.types.ts`: every prop type has exactly one consumer.
 ## Design
 
 - **Variants**: `secondary` (default), `destructive`, `success`. **Sizes**:
-  `sm`, `md`, `lg`. Plus `isFullWidth` and `isDisabled`.
+  `sm`, `md`, `lg`. Plus `isFullWidth`, `isDisabled` and `isLoading`.
 - **There is no `primary` variant.** The handle is neutral, so a primary rail
   with a neutral handle draws the same picture as `secondary` in any theme whose
   primary sits close to its foreground — the default palette included. Two names
@@ -44,6 +44,14 @@ There is no `slide-button.types.ts`: every prop type has exactly one consumer.
   rear is a curve; a trail stopping at the straight edge leaves a sliver of rail
   above and below it. Ending under the handle reads as one shape — the handle
   dragging its colour along — while still sharing an edge with it as seen.
+- **At the end of the travel the trail fills the whole rail.** Held at the
+  handle's middle all the way, a confirmed handle left the rail showing around
+  its front curve and in the inset past it, so the fill looked as if it stopped
+  halfway under the handle. Over the last `handleWidth / 2 + inset` of travel
+  `resolveSlideTrailWidth` runs the lead edge on to the far edge, landing there
+  exactly at full travel, clamped so a spring's overshoot cannot run it past.
+  Before that stretch it stays under the handle, so mid-drag nothing peeks out
+  around the handle's front curve.
 - **The trail is invisible at rest.** It fades in over the first 8pt of travel
   (`resolveSlideTrailOpacity`). Ending under the handle's middle, it would
   otherwise peek out behind the resting handle's rear curve — a coloured sliver
@@ -90,6 +98,14 @@ There is no `slide-button.types.ts`: every prop type has exactly one consumer.
   returns early. A disabled recognizer lets the touch fall through to whatever
   is behind it — inside a stack with a full-screen back swipe, dragging a
   disabled slide navigated back. Found on the simulator.
+- **`isLoading` is `Button`'s prop, on the handle.** The glyph — the default
+  chevron or a custom `SlideButton.Thumb` child — fades out under a `Spinner`
+  that inherits the glyph's size and colour through the handle's icon defaults,
+  the drag and the screen reader's activate are refused (`isSlideDraggable`), and
+  the rail reports `busy`. It does not dim: the slide landed and the work is
+  running, where dimming says the control is unavailable. The control does not
+  infer it from a pending `onComplete` promise — the caller owns the request, so
+  the caller says when it is running, the same way `Button` never guesses.
 - **One `Gesture.Pan()` on the rail, `activeOffsetX ±8`, `failOffsetY ±12`.** A
   vertical scroll that starts on the rail fails the pan first, so the control
   survives inside a vertical `ScrollView`. A cancelled pan returns home.

package/src/components/slide-button/slide-button-label.tsx

@@ -46,7 +46,12 @@ export function SlideButtonLabel({ className, ...props }: SlideButtonLabelProps)
 
 	const clipStyle = useAnimatedStyle(() => ({
 		opacity: handleWidth.value > 0 ? resolveSlideTrailOpacity(offset.value) : 0,
-		width: resolveSlideTrailWidth({ handleWidth: handleWidth.value, inset: SLIDE_BUTTON_INSET, offset: offset.value }),
+		width: resolveSlideTrailWidth({
+			handleWidth: handleWidth.value,
+			inset: SLIDE_BUTTON_INSET,
+			offset: offset.value,
+			travel: travel.value,
+		}),
 	}));
 
 	const onTrailStyle = useAnimatedStyle(() => ({

package/src/components/slide-button/slide-button-thumb.tsx

@@ -1,11 +1,12 @@
-import { type ReactElement, type ReactNode, useMemo } from "react";
+import { type ReactElement, type ReactNode, useEffect, useMemo } from "react";
 import type { ViewProps } from "react-native";
-import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { useThemeColor } from "../../hooks/use-theme-color";
 import { IconCheckmark1Small, IconChevronLeft, IconChevronRight } from "../../icons/central";
 import { Icon, IconDefaultsProvider } from "../icon";
+import { Spinner } from "../spinner";
 import { useSlideButtonPart } from "./slide-button.context";
-import { SLIDE_BUTTON_GLYPH_TOKEN, slideButtonVariants } from "./slide-button.variants";
+import { SLIDE_BUTTON_GLYPH_MS, SLIDE_BUTTON_GLYPH_TOKEN, slideButtonVariants } from "./slide-button.variants";
 
 export type SlideButtonThumbProps = Omit<ViewProps, "children" | "style"> & {
 	/** Replaces the chevron. An `Icon` inherits the handle's glyph size and colour. */
@@ -32,9 +33,13 @@ export type SlideButtonThumbProps = Omit<ViewProps, "children" | "style"> & {
  * With no children it draws a chevron pointing the way it travels (mirrored
  * under RTL), which crosses into a tick when the slide confirms. Children replace
  * both: a custom glyph is the caller's to change.
+ *
+ * While the root is `isLoading` the glyph — default or custom — fades out under a
+ * `Spinner` that takes the glyph's size and colour from the same icon defaults, so
+ * the handle shows the work running without a glyph of its own to restyle.
  */
 export function SlideButtonThumb({ className, children, ...props }: SlideButtonThumbProps): ReactElement {
-	const { size, variant, isRTL, offset, handleWidth } = useSlideButtonPart("SlideButton.Thumb");
+	const { size, variant, isRTL, isLoading, offset, handleWidth } = useSlideButtonPart("SlideButton.Thumb");
 	const direction = isRTL ? -1 : 1;
 
 	const thumbStyle = useAnimatedStyle(() => ({
@@ -43,6 +48,12 @@ export function SlideButtonThumb({ className, children, ...props }: SlideButtonT
 		width: handleWidth.value,
 	}));
 
+	const loading = useSharedValue(isLoading ? 1 : 0);
+	useEffect(() => {
+		loading.value = withTiming(isLoading ? 1 : 0, { duration: SLIDE_BUTTON_GLYPH_MS });
+	}, [isLoading, loading]);
+	const glyphStyle = useAnimatedStyle(() => ({ opacity: 1 - loading.value }));
+
 	const slots = slideButtonVariants({ size, variant });
 	const glyphColor = useThemeColor(SLIDE_BUTTON_GLYPH_TOKEN);
 	const glyphClassName = slots.thumbGlyph();
@@ -53,7 +64,12 @@ export function SlideButtonThumb({ className, children, ...props }: SlideButtonT
 
 	return (
 		<Animated.View className={slots.thumb({ className })} style={thumbStyle} {...props}>
-			<IconDefaultsProvider value={iconDefaults}>{children ?? <SlideButtonGlyph />}</IconDefaultsProvider>
+			<IconDefaultsProvider value={iconDefaults}>
+				<Animated.View className="items-center justify-center" style={glyphStyle}>
+					{children ?? <SlideButtonGlyph />}
+				</Animated.View>
+				<Spinner className="absolute" isLoading={isLoading} />
+			</IconDefaultsProvider>
 		</Animated.View>
 	);
 }

package/src/components/slide-button/slide-button.context.tsx

@@ -8,6 +8,8 @@ export type SlideButtonContextValue = {
 	/** Whether the slide has been confirmed, on the **JS thread** — what accessibility reads. */
 	isCompleted: boolean;
 	isDisabled: boolean;
+	/** Whether work is running — the handle shows a spinner and takes no drag. */
+	isLoading: boolean;
 	/** Whether the layout runs right to left, so the handle travels leftwards. */
 	isRTL: boolean;
 	/**

package/src/components/slide-button/slide-button.tsx

@@ -25,6 +25,7 @@ import { type HapticFeedback, playHaptic } from "../pressable";
 import { type SlideButtonContextValue, SlideButtonProvider } from "./slide-button.context";
 import {
 	isSlideArmed,
+	isSlideDraggable,
 	resolveSlideHandleWidth,
 	resolveSlideRelease,
 	resolveSlideThreshold,
@@ -74,6 +75,11 @@ export type SlideButtonProps = Omit<ViewProps, "children" | "style"> & {
 	autoResetDelay?: number;
 	/** Fades the control and refuses the drag — the handle does not move at all. */
 	isDisabled?: boolean;
+	/**
+	 * Swaps the handle's glyph for a spinner, refuses the drag and announces the
+	 * control as busy. Does not dim it — the slide landed, the work is running.
+	 */
+	isLoading?: boolean;
 	/** Played as a drag crosses the threshold; a success knock follows on commit. Off by default. */
 	haptic?: false | HapticFeedback;
 	/** What the screen reader's activate action is called. Imperative, naming the outcome. Default "Confirm". */
@@ -94,6 +100,7 @@ function SlideButtonRoot({
 	isAutoReset = false,
 	autoResetDelay = SLIDE_BUTTON_DEFAULT_AUTO_RESET_MS,
 	isDisabled = false,
+	isLoading = false,
 	haptic = false,
 	accessibilityActionLabel = "Confirm",
 	accessibilityLabel,
@@ -213,7 +220,7 @@ function SlideButtonRoot({
 			.failOffsetY([-SLIDE_BUTTON_FAIL_OFFSET_Y, SLIDE_BUTTON_FAIL_OFFSET_Y])
 			.onStart(() => {
 				"worklet";
-				if (isDisabled || pinned.value) return;
+				if (!isSlideDraggable({ isDisabled, isLoading, isPinned: pinned.value })) return;
 				cancelAnimation(offset);
 				grabbed.value = offset.value;
 				armed.value = false;
@@ -221,7 +228,7 @@ function SlideButtonRoot({
 			.onUpdate((event) => {
 				"worklet";
 				const span = travel.value;
-				if (isDisabled || pinned.value || span <= 0) return;
+				if (!isSlideDraggable({ isDisabled, isLoading, isPinned: pinned.value }) || span <= 0) return;
 
 				// No easing on the way out: the handle tracks the finger exactly.
 				const next = Math.min(span, Math.max(0, grabbed.value + event.translationX * direction));
@@ -236,7 +243,7 @@ function SlideButtonRoot({
 			})
 			.onEnd((event, success) => {
 				"worklet";
-				if (isDisabled || pinned.value) return;
+				if (!isSlideDraggable({ isDisabled, isLoading, isPinned: pinned.value })) return;
 				armed.value = false;
 				const velocity = event.velocityX * direction;
 				const release = resolveSlideRelease({
@@ -265,6 +272,7 @@ function SlideButtonRoot({
 		grabbed,
 		haptic,
 		isDisabled,
+		isLoading,
 		isReducedMotion,
 		offset,
 		pinned,
@@ -273,11 +281,11 @@ function SlideButtonRoot({
 	]);
 
 	const activate = useCallback(() => {
-		if (isDisabled || pinned.value) return;
+		if (!isSlideDraggable({ isDisabled, isLoading, isPinned: pinned.value })) return;
 		pinned.value = true;
 		moveTo(travel.value);
 		complete();
-	}, [complete, isDisabled, moveTo, pinned, travel]);
+	}, [complete, isDisabled, isLoading, moveTo, pinned, travel]);
 
 	const handleAccessibilityAction = useCallback(
 		(event: AccessibilityActionEvent) => {
@@ -297,13 +305,14 @@ function SlideButtonRoot({
 			handleWidth,
 			isCompleted: completed,
 			isDisabled,
+			isLoading,
 			isRTL,
 			offset,
 			size,
 			travel,
 			variant,
 		}),
-		[completed, glyph, handleWidth, isDisabled, offset, size, travel, variant]
+		[completed, glyph, handleWidth, isDisabled, isLoading, offset, size, travel, variant]
 	);
 
 	const content = useMemo(() => withThumb(children), [children]);
@@ -317,7 +326,7 @@ function SlideButtonRoot({
 					accessibilityActions={accessibilityActions}
 					accessibilityLabel={label}
 					accessibilityRole="button"
-					accessibilityState={{ checked: completed, disabled: isDisabled }}
+					accessibilityState={{ busy: isLoading, checked: completed, disabled: isDisabled }}
 					accessible
 					className={slots.root({ className })}
 					onAccessibilityAction={handleAccessibilityAction}
@@ -325,7 +334,7 @@ function SlideButtonRoot({
 					onLayout={handleLayout}
 					{...props}
 				>
-					<SlideButtonTrail className={slots.trail()} handleWidth={handleWidth} offset={offset} />
+					<SlideButtonTrail className={slots.trail()} handleWidth={handleWidth} offset={offset} travel={travel} />
 					{content}
 				</Animated.View>
 			</GestureDetector>
@@ -339,7 +348,9 @@ function SlideButtonRoot({
  * It ends *under* the handle rather than at its rear edge: a stadium's rear is a
  * curve, and a trail that stopped at its straight edge would leave a sliver of
  * rail showing above and below that curve. Ending under the handle means the two
- * read as one shape — the handle dragging its colour along.
+ * read as one shape — the handle dragging its colour along. Over the last
+ * half-handle of travel it runs on to the rail's far edge, so a confirmed slide
+ * reads as filled rather than stopping short of the end.
  *
  * Internal: the root renders it, so it lives here rather than in a part file.
  */
@@ -347,14 +358,21 @@ function SlideButtonTrail({
 	className,
 	offset,
 	handleWidth,
+	travel,
 }: {
 	className: string;
 	offset: SharedValue<number>;
 	handleWidth: SharedValue<number>;
+	travel: SharedValue<number>;
 }): ReactElement {
 	const style = useAnimatedStyle(() => ({
 		opacity: handleWidth.value > 0 ? resolveSlideTrailOpacity(offset.value) : 0,
-		width: resolveSlideTrailWidth({ handleWidth: handleWidth.value, inset: SLIDE_BUTTON_INSET, offset: offset.value }),
+		width: resolveSlideTrailWidth({
+			handleWidth: handleWidth.value,
+			inset: SLIDE_BUTTON_INSET,
+			offset: offset.value,
+			travel: travel.value,
+		}),
 	}));
 	return <Animated.View className={className} style={style} />;
 }
@@ -427,6 +445,11 @@ function isPart(child: ReactNode, part: { displayName?: string }): boolean {
  * The label is centred in the whole rail and never fades. A `SlideButton.Thumb` is
  * composed in when none is written; write one to put a different glyph on the handle.
  *
+ * **`isLoading` shows the work.** The handle's glyph gives way to a spinner, the
+ * drag is refused and the rail announces itself busy — `Button`'s `isLoading`,
+ * on the handle. Pair it with a controlled `isCompleted` to show slow work
+ * running while the handle waits at the end.
+ *
  * Under RTL the handle rests at the right and travels left. A screen reader's
  * activate confirms it outright, named by `accessibilityActionLabel`.
  *

package/src/components/slide-button/slide-button.variants.test.ts

@@ -2,6 +2,7 @@ import { describe, expect, test } from "bun:test";
 import { aliasedTokens } from "../../styles/theme-tokens.test";
 import {
 	isSlideArmed,
+	isSlideDraggable,
 	resolveSlideHandleWidth,
 	resolveSlideLabelGutter,
 	resolveSlideRelease,
@@ -49,9 +50,31 @@ describe("resolveSlideTrailOpacity", () => {
 });
 
 describe("resolveSlideTrailWidth", () => {
-	test("runs from the rail's start edge to the handle's middle", () => {
-		expect(resolveSlideTrailWidth({ handleWidth: 58, inset: 4, offset: 0 })).toBe(33);
-		expect(resolveSlideTrailWidth({ handleWidth: 58, inset: 4, offset: 100 })).toBe(133);
+	test("runs from the rail's start edge to the handle's middle at rest", () => {
+		expect(resolveSlideTrailWidth({ handleWidth: 58, inset: 4, offset: 0, travel: 200 })).toBe(33);
+	});
+
+	test("reaches the rail's far edge at the end of the travel", () => {
+		expect(resolveSlideTrailWidth({ handleWidth: 58, inset: 4, offset: 200, travel: 200 })).toBe(200 + 58 + 4 * 2);
+	});
+
+	test("holds the handle's middle until the last half-handle of travel", () => {
+		expect(resolveSlideTrailWidth({ handleWidth: 58, inset: 4, offset: 100, travel: 200 })).toBe(133);
+		expect(resolveSlideTrailWidth({ handleWidth: 58, inset: 4, offset: 167, travel: 200 })).toBe(200);
+	});
+
+	test("closes the gap to the far edge over that last stretch", () => {
+		const width = resolveSlideTrailWidth({ handleWidth: 58, inset: 4, offset: 183.5, travel: 200 });
+		expect(width).toBeCloseTo(4 + 183.5 + 29 + 16.5);
+		expect(width).toBeLessThan(4 + 183.5 + 58);
+	});
+
+	test("never runs past the rail, even while a spring overshoots", () => {
+		expect(resolveSlideTrailWidth({ handleWidth: 58, inset: 4, offset: 212, travel: 200 })).toBe(266);
+	});
+
+	test("holds the handle's middle before the rail is measured", () => {
+		expect(resolveSlideTrailWidth({ handleWidth: 58, inset: 4, offset: 0, travel: 0 })).toBe(33);
 	});
 });
 
@@ -286,3 +309,15 @@ describe("slideButtonVariants", () => {
 		expect(ALIASED.has(`--color-${SLIDE_BUTTON_GLYPH_TOKEN}`)).toBe(true);
 	});
 });
+
+describe("isSlideDraggable", () => {
+	test("an idle handle takes the drag", () => {
+		expect(isSlideDraggable({ isDisabled: false, isLoading: false, isPinned: false })).toBe(true);
+	});
+
+	test("disabled, loading or pinned at the far end, it refuses", () => {
+		expect(isSlideDraggable({ isDisabled: true, isLoading: false, isPinned: false })).toBe(false);
+		expect(isSlideDraggable({ isDisabled: false, isLoading: true, isPinned: false })).toBe(false);
+		expect(isSlideDraggable({ isDisabled: false, isLoading: false, isPinned: true })).toBe(false);
+	});
+});

package/src/components/slide-button/slide-button.variants.ts

@@ -222,6 +222,26 @@ export function resolveSlideHandleWidth({ railHeight, inset }: { railHeight: num
 	return height > 0 ? Math.round(height * SLIDE_BUTTON_HANDLE_RATIO) : 0;
 }
 
+/**
+ * Whether the handle takes a drag — or a screen reader's activate — right now.
+ *
+ * Disabled refuses it, and so does loading: the work a slide asked for is still
+ * running, and a second slide would ask again. Pinned at the far end, confirmed or
+ * awaiting an answer, the handle has nowhere left to go.
+ */
+export function isSlideDraggable({
+	isDisabled,
+	isLoading,
+	isPinned,
+}: {
+	isDisabled: boolean;
+	isLoading: boolean;
+	isPinned: boolean;
+}): boolean {
+	"worklet";
+	return !isDisabled && !isLoading && !isPinned;
+}
+
 /**
  * Whether the handle is far enough along that letting go here would confirm —
  * what the arming haptic reports.
@@ -254,24 +274,39 @@ export function resolveSlideTrailOpacity(offset: number): number {
 }
 
 /**
- * How wide the trail is: from the rail's start edge to the handle's middle.
+ * How wide the trail is: from the rail's start edge to the handle's middle, and
+ * over the last half-handle of travel, on to the rail's far edge.
  *
  * It ends *under* the handle rather than at its rear edge — a stadium's rear is
  * a curve, and a trail stopping at the straight edge leaves a sliver of rail
- * above and below it. The label's trail-coloured copy is clipped to the same
- * width, so the two cannot disagree.
+ * above and below it. Held at the middle all the way, though, a confirmed
+ * handle left the rail showing around its front curve and in the inset beyond
+ * it, so the fill read as stopping short. Over the final `handleWidth / 2 +
+ * inset` points the lead edge closes that gap, landing on the far edge exactly
+ * at the end of the travel. Clamped to the rail, so a spring's overshoot cannot
+ * run it past. The label's trail-coloured copy is clipped to the same width, so
+ * the two cannot disagree.
  */
 export function resolveSlideTrailWidth({
 	offset,
 	handleWidth,
 	inset,
+	travel,
 }: {
 	offset: number;
 	handleWidth: number;
 	inset: number;
+	travel: number;
 }): number {
 	"worklet";
-	return inset + offset + handleWidth / 2;
+	const middle = inset + offset + handleWidth / 2;
+	if (travel <= 0) return middle;
+	const ramp = handleWidth / 2 + inset;
+	const into = offset - (travel - ramp);
+	const extension = into <= 0 ? 0 : into >= ramp ? ramp : into;
+	const width = middle + extension;
+	const rail = travel + handleWidth + inset * 2;
+	return width > rail ? rail : width;
 }
 
 /**