@delacour/react-native-ui 0.1.0-alpha.4 → 0.2.0-alpha.20261010061731

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

@@ -0,0 +1,288 @@
+import { describe, expect, test } from "bun:test";
+import { aliasedTokens } from "../../styles/theme-tokens.test";
+import {
+	isSlideArmed,
+	resolveSlideHandleWidth,
+	resolveSlideLabelGutter,
+	resolveSlideRelease,
+	resolveSlideThreshold,
+	resolveSlideTrailOpacity,
+	resolveSlideTrailWidth,
+	resolveSlideTravel,
+	SLIDE_BUTTON_ARM_SLACK,
+	SLIDE_BUTTON_DEFAULT_THRESHOLD,
+	SLIDE_BUTTON_FAR_END_SLOP,
+	SLIDE_BUTTON_GLYPH_TOKEN,
+	SLIDE_BUTTON_HANDLE_RATIO,
+	SLIDE_BUTTON_INSET,
+	SLIDE_BUTTON_LOOKAHEAD,
+	SLIDE_BUTTON_SIZES,
+	SLIDE_BUTTON_SPRING,
+	SLIDE_BUTTON_TRAIL_FADE,
+	SLIDE_BUTTON_VARIANTS,
+	slideButtonVariants,
+} from "./slide-button.variants";
+
+const ALIASED = aliasedTokens();
+
+/** Every colour utility a class string names, with any opacity modifier dropped. */
+function colourTokens(classes: string): string[] {
+	return classes
+		.split(/\s+/)
+		.map((utility) => utility.match(/^(?:bg|text|border)-([a-z-]+?)(?:\/\d+)?$/)?.[1])
+		.filter((name): name is string => name !== undefined)
+		.filter((name) => name !== "center" && !name.startsWith("button-"));
+}
+
+describe("resolveSlideTrailOpacity", () => {
+	test("no trail shows while the handle rests", () => {
+		expect(resolveSlideTrailOpacity(0)).toBe(0);
+		expect(resolveSlideTrailOpacity(-3)).toBe(0);
+	});
+
+	test("it fades in over the first few points, then holds", () => {
+		expect(SLIDE_BUTTON_TRAIL_FADE).toBeGreaterThan(0);
+		expect(resolveSlideTrailOpacity(SLIDE_BUTTON_TRAIL_FADE / 2)).toBeCloseTo(0.5);
+		expect(resolveSlideTrailOpacity(SLIDE_BUTTON_TRAIL_FADE)).toBe(1);
+		expect(resolveSlideTrailOpacity(200)).toBe(1);
+	});
+});
+
+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);
+	});
+});
+
+describe("resolveSlideLabelGutter", () => {
+	test("keeps the label clear of the resting handle on both sides", () => {
+		expect(resolveSlideLabelGutter({ handleWidth: 58, inset: 4 })).toBe(66);
+	});
+
+	test("is the inset alone before the handle is measured", () => {
+		expect(resolveSlideLabelGutter({ handleWidth: 0, inset: 4 })).toBe(8);
+	});
+});
+
+describe("resolveSlideThreshold", () => {
+	test("defaults to 0.9", () => {
+		expect(resolveSlideThreshold()).toBe(0.9);
+		expect(SLIDE_BUTTON_DEFAULT_THRESHOLD).toBe(0.9);
+	});
+
+	test("NaN falls back to the default rather than poisoning every comparison", () => {
+		expect(resolveSlideThreshold(Number.NaN)).toBe(0.9);
+	});
+
+	test("clamps into [0.1, 1]", () => {
+		expect(resolveSlideThreshold(0)).toBe(0.1);
+		expect(resolveSlideThreshold(-3)).toBe(0.1);
+		expect(resolveSlideThreshold(1.5)).toBe(1);
+		expect(resolveSlideThreshold(Number.POSITIVE_INFINITY)).toBe(1);
+	});
+
+	test("passes a value in range through untouched", () => {
+		expect(resolveSlideThreshold(0.5)).toBe(0.5);
+		expect(resolveSlideThreshold(1)).toBe(1);
+		expect(resolveSlideThreshold(0.1)).toBe(0.1);
+	});
+});
+
+describe("resolveSlideTravel", () => {
+	test("is the rail less the handle and an inset at each end", () => {
+		expect(resolveSlideTravel({ handleWidth: 58, inset: 4, railWidth: 300 })).toBe(234);
+	});
+
+	test("is zero before layout and never negative", () => {
+		expect(resolveSlideTravel({ handleWidth: 0, inset: 4, railWidth: 0 })).toBe(0);
+		expect(resolveSlideTravel({ handleWidth: 80, inset: 4, railWidth: 60 })).toBe(0);
+	});
+});
+
+describe("resolveSlideHandleWidth", () => {
+	test("is about 1.6 times the handle's height, which is the rail less an inset top and bottom", () => {
+		expect(SLIDE_BUTTON_HANDLE_RATIO).toBe(1.6);
+		expect(resolveSlideHandleWidth({ inset: 4, railHeight: 44 })).toBe(Math.round(36 * 1.6));
+	});
+
+	test("is zero before layout", () => {
+		expect(resolveSlideHandleWidth({ inset: 4, railHeight: 0 })).toBe(0);
+	});
+});
+
+describe("isSlideArmed", () => {
+	test("arms at the threshold and disarms below it", () => {
+		expect(isSlideArmed({ offset: 180, threshold: 0.9, travel: 200 })).toBe(true);
+		expect(isSlideArmed({ offset: 179, threshold: 0.9, travel: 200 })).toBe(false);
+	});
+
+	test("with threshold 1 arms only at the far end", () => {
+		expect(isSlideArmed({ offset: 199.6, threshold: 1, travel: 200 })).toBe(true);
+		expect(isSlideArmed({ offset: 199, threshold: 1, travel: 200 })).toBe(false);
+	});
+
+	test("never arms before layout", () => {
+		expect(isSlideArmed({ offset: 0, threshold: 0.1, travel: 0 })).toBe(false);
+	});
+});
+
+describe("resolveSlideRelease", () => {
+	const base = { lookahead: SLIDE_BUTTON_LOOKAHEAD, threshold: 0.9, travel: 200 } as const;
+
+	test("a release past the threshold completes", () => {
+		expect(resolveSlideRelease({ ...base, offset: 185, velocity: 0 })).toBe("complete");
+	});
+
+	test("a short release returns", () => {
+		expect(resolveSlideRelease({ ...base, offset: 60, velocity: 0 })).toBe("return");
+	});
+
+	test("a committed flick from about 70% completes", () => {
+		expect(resolveSlideRelease({ ...base, offset: 140, velocity: 1000 })).toBe("complete");
+	});
+
+	test("a lazy flick from halfway does not complete", () => {
+		expect(resolveSlideRelease({ ...base, offset: 100, velocity: 300 })).toBe("return");
+	});
+
+	test("even a hard flick from halfway does not complete — the hand has to get close first", () => {
+		expect(resolveSlideRelease({ ...base, offset: 100, velocity: 4000 })).toBe("return");
+		expect(SLIDE_BUTTON_ARM_SLACK).toBe(0.25);
+	});
+
+	test("letting go past the threshold while pulling back returns", () => {
+		expect(resolveSlideRelease({ ...base, offset: 185, velocity: -1500 })).toBe("return");
+	});
+
+	test("threshold 1 has no velocity shortcut and demands the far end", () => {
+		const strict = { ...base, threshold: 1 };
+		expect(resolveSlideRelease({ ...strict, offset: 150, velocity: 5000 })).toBe("return");
+		expect(resolveSlideRelease({ ...strict, offset: 199, velocity: 5000 })).toBe("return");
+		expect(resolveSlideRelease({ ...strict, offset: 200 - SLIDE_BUTTON_FAR_END_SLOP, velocity: 0 })).toBe("complete");
+		expect(resolveSlideRelease({ ...strict, offset: 200, velocity: 0 })).toBe("complete");
+	});
+
+	test("never completes before layout", () => {
+		expect(resolveSlideRelease({ ...base, offset: 0, travel: 0, velocity: 9000 })).toBe("return");
+	});
+
+	test("a low threshold completes from a short drag", () => {
+		expect(resolveSlideRelease({ ...base, offset: 110, threshold: 0.5, velocity: 0 })).toBe("complete");
+		expect(resolveSlideRelease({ ...base, offset: 90, threshold: 0.5, velocity: 0 })).toBe("return");
+	});
+});
+
+describe("motion constants", () => {
+	test("the handle is inset 4pt inside the rail", () => {
+		expect(SLIDE_BUTTON_INSET).toBe(4);
+	});
+
+	test("the release spring overshoots only a little", () => {
+		const ratio =
+			SLIDE_BUTTON_SPRING.damping / (2 * Math.sqrt(SLIDE_BUTTON_SPRING.stiffness * SLIDE_BUTTON_SPRING.mass));
+		expect(ratio).toBeGreaterThan(0.7);
+	});
+});
+
+describe("slideButtonVariants", () => {
+	test("TODO(category lead): compare against progressButtonVariants at merge — each size's rail is a button-height capsule", () => {
+		for (const size of SLIDE_BUTTON_SIZES) {
+			const root = slideButtonVariants({ size }).root().split(/\s+/);
+			expect(root).toContain(`h-button-${size}`);
+			expect(root).toContain(`rounded-button-${size}`);
+		}
+	});
+
+	test("the label takes the button's type step at each size", () => {
+		for (const size of SLIDE_BUTTON_SIZES) {
+			expect(slideButtonVariants({ size }).label().split(/\s+/)).toContain(`text-button-${size}`);
+		}
+	});
+
+	test("the label frame fills the rail and centres its text", () => {
+		const frame = slideButtonVariants().labelFrame().split(/\s+/);
+		expect(frame).toEqual(expect.arrayContaining(["absolute", "inset-0", "justify-center"]));
+		expect(slideButtonVariants().label()).toContain("text-center");
+		expect(slideButtonVariants().label()).not.toContain("absolute");
+	});
+
+	test("the label over the trail takes the trail's own foreground", () => {
+		expect(slideButtonVariants({ variant: "secondary" }).labelOnTrail()).toContain("text-secondary-foreground");
+		expect(slideButtonVariants({ variant: "destructive" }).labelOnTrail()).toContain("text-destructive-foreground");
+		expect(slideButtonVariants({ variant: "success" }).labelOnTrail()).toContain("text-success-foreground");
+	});
+
+	test("the trail clip is pinned to the start edge and clips", () => {
+		const clip = slideButtonVariants().labelClip().split(/\s+/);
+		expect(clip).toEqual(expect.arrayContaining(["absolute", "start-0", "top-0", "bottom-0", "overflow-hidden"]));
+	});
+
+	test("the glyph takes the icon step that matches the size", () => {
+		expect(slideButtonVariants({ size: "sm" }).thumbGlyph()).toContain("size-icon-sm");
+		expect(slideButtonVariants({ size: "md" }).thumbGlyph()).toContain("size-icon-md");
+		expect(slideButtonVariants({ size: "lg" }).thumbGlyph()).toContain("size-icon-lg");
+	});
+
+	test("there is no primary variant", () => {
+		expect(SLIDE_BUTTON_VARIANTS).toEqual(["secondary", "destructive", "success"]);
+	});
+
+	test("secondary sits on bg-secondary and trails in a faint foreground", () => {
+		const slots = slideButtonVariants({ variant: "secondary" });
+		expect(slots.root()).toContain("bg-secondary");
+		expect(slots.trail()).toContain("bg-foreground/15");
+	});
+
+	test("a state variant sits on its soft fill and trails in its full colour", () => {
+		for (const variant of ["destructive", "success"] as const) {
+			const slots = slideButtonVariants({ variant });
+			expect(slots.root()).toContain(`bg-${variant}-soft`);
+			expect(slots.trail().split(/\s+/)).toContain(`bg-${variant}`);
+			expect(slots.label()).toContain(`text-${variant}-soft-foreground`);
+		}
+	});
+
+	test("the handle is neutral in every variant", () => {
+		for (const variant of SLIDE_BUTTON_VARIANTS) {
+			const thumb = slideButtonVariants({ variant }).thumb();
+			expect(thumb).toContain("bg-background");
+			expect(thumb).toContain("border-border");
+		}
+		expect(SLIDE_BUTTON_GLYPH_TOKEN).toBe("foreground");
+	});
+
+	test("the label colour is on the label, never the rail", () => {
+		for (const variant of SLIDE_BUTTON_VARIANTS) {
+			expect(slideButtonVariants({ variant }).root()).not.toMatch(/\btext-/);
+		}
+	});
+
+	test("disabled fades the whole control", () => {
+		expect(slideButtonVariants({ isDisabled: true }).root()).toContain("opacity-50");
+		expect(slideButtonVariants({ isDisabled: false }).root()).not.toContain("opacity-50");
+	});
+
+	test("full width stretches the rail", () => {
+		expect(slideButtonVariants({ isFullWidth: true }).root()).toContain("w-full");
+		expect(slideButtonVariants({ isFullWidth: false }).root()).not.toContain("w-full");
+	});
+
+	test("every colour named exists in the theme", () => {
+		for (const variant of SLIDE_BUTTON_VARIANTS) {
+			const slots = slideButtonVariants({ variant });
+			const classes = [
+				slots.root(),
+				slots.trail(),
+				slots.label(),
+				slots.labelOnTrail(),
+				slots.thumb(),
+				slots.thumbGlyph(),
+			].join(" ");
+			const tokens = colourTokens(classes);
+			expect(tokens.length).toBeGreaterThan(0);
+			for (const token of tokens) expect(ALIASED.has(`--color-${token}`)).toBe(true);
+		}
+		expect(ALIASED.has(`--color-${SLIDE_BUTTON_GLYPH_TOKEN}`)).toBe(true);
+	});
+});

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

@@ -0,0 +1,324 @@
+import type { VariantProps } from "tailwind-variants";
+import { tv } from "../../lib/tv";
+
+/**
+ * What the action the slide confirms means.
+ *
+ * There is no `primary`. 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 — two names for one look. See AGENTS.md.
+ */
+export const SLIDE_BUTTON_VARIANTS = ["secondary", "destructive", "success"] as const;
+
+/** The button's own label steps, so a slide button lines up with a button beside it. */
+export const SLIDE_BUTTON_SIZES = ["sm", "md", "lg"] as const;
+
+export type SlideButtonVariant = (typeof SLIDE_BUTTON_VARIANTS)[number];
+export type SlideButtonSize = (typeof SLIDE_BUTTON_SIZES)[number];
+
+export const SLIDE_BUTTON_DEFAULT_VARIANT: SlideButtonVariant = "secondary";
+export const SLIDE_BUTTON_DEFAULT_SIZE: SlideButtonSize = "md";
+
+/** How far along the travel a release has to reach to confirm. */
+export const SLIDE_BUTTON_DEFAULT_THRESHOLD = 0.9;
+
+/** The lowest threshold accepted. Below it a nudge would confirm, which is a tap with extra steps. */
+export const SLIDE_BUTTON_MIN_THRESHOLD = 0.1;
+
+/**
+ * How far the handle sits inside the rail on every side, in points.
+ *
+ * Written into the `thumb` slot as `start-1 top-1 bottom-1` and subtracted at
+ * both ends by {@link resolveSlideTravel}; a test pins the number.
+ */
+export const SLIDE_BUTTON_INSET = 4;
+
+/** The handle's width over its height — a stadium, wider than a switch's knob. */
+export const SLIDE_BUTTON_HANDLE_RATIO = 1.6;
+
+/**
+ * How far ahead a release looks, in seconds of its own velocity.
+ *
+ * Small on purpose: enough that a finger already committed to the end does not
+ * have to drag the last few points, not enough that a flick does the work.
+ */
+export const SLIDE_BUTTON_LOOKAHEAD = 0.08;
+
+/**
+ * How far short of the threshold the *hand* may be when a flick carries it over.
+ *
+ * Without it the look-ahead alone would let a hard flick from halfway confirm,
+ * which is exactly the habit-driven swipe this control exists to refuse.
+ */
+export const SLIDE_BUTTON_ARM_SLACK = 0.25;
+
+/** How close to the far end counts as there, in points, when the threshold is 1. */
+export const SLIDE_BUTTON_FAR_END_SLOP = 0.5;
+
+/**
+ * The spring a release settles on, either way.
+ *
+ * Damped a little under critical: the handle travelling home after a short
+ * release should land, not bounce, but a hint of give tells the hand it was
+ * heard. A test keeps the damping ratio above 0.7.
+ */
+export const SLIDE_BUTTON_SPRING = { damping: 22, mass: 0.6, stiffness: 260 } as const;
+
+/**
+ * How far the handle travels, in points, before its trail is fully drawn.
+ *
+ * The trail ends under the handle's middle, so at rest it would peek out
+ * behind the handle's rear curve as a coloured sliver — a control that looks
+ * half-started before anyone touched it.
+ */
+export const SLIDE_BUTTON_TRAIL_FADE = 8;
+
+/** How long the chevron takes to cross into a tick, and how long a reduced-motion move takes. */
+export const SLIDE_BUTTON_GLYPH_MS = 180;
+export const SLIDE_BUTTON_REDUCED_MOTION_MS = 180;
+
+/** How long a confirmed handle rests at the end before `isAutoReset` takes it home. */
+export const SLIDE_BUTTON_DEFAULT_AUTO_RESET_MS = 1000;
+
+/**
+ * The gesture's activation window, in points.
+ *
+ * Horizontal movement past 8 takes the drag; vertical movement past 12 fails it
+ * first, so a scroll that begins on the rail stays a scroll.
+ */
+export const SLIDE_BUTTON_ACTIVE_OFFSET_X = 8;
+export const SLIDE_BUTTON_FAIL_OFFSET_Y = 12;
+
+/** The token the handle's glyph is drawn in. A colour value, read through `useThemeColor`. */
+export const SLIDE_BUTTON_GLYPH_TOKEN = "foreground";
+
+/**
+ * Styling for every part of a slide button.
+ *
+ * The rail is the same box `Button` draws at each size — `h-button-*` and
+ * `rounded-button-*` — so a slide button stacks level with any button above or
+ * below it. The handle is neutral in every variant; only the rail, the trail and
+ * the label take the variant's colour. The label's colour sits on the label,
+ * never the rail (rule 1).
+ *
+ * Every positioned part uses logical insets (`start-*`), so under RTL the handle
+ * rests at the right with nothing else said.
+ *
+ * Free of React Native imports so it stays unit-testable. See AGENTS.md.
+ */
+export const slideButtonVariants = tv({
+	slots: {
+		root: "relative justify-center overflow-hidden",
+		trail: "absolute start-0 top-0 bottom-0",
+		labelFrame: "absolute inset-0 justify-center",
+		label: "text-center font-semibold",
+		labelClip: "absolute start-0 top-0 bottom-0 overflow-hidden",
+		labelOnTrailFrame: "absolute start-0 top-0 bottom-0 justify-center",
+		labelOnTrail: "text-center font-semibold",
+		thumb:
+			"absolute start-1 top-1 bottom-1 items-center justify-center rounded-full border border-border bg-background",
+		thumbGlyph: "",
+	},
+	variants: {
+		variant: {
+			secondary: {
+				root: "bg-secondary",
+				trail: "bg-foreground/15",
+				label: "text-secondary-foreground",
+				labelOnTrail: "text-secondary-foreground",
+			},
+			destructive: {
+				root: "bg-destructive-soft",
+				trail: "bg-destructive",
+				label: "text-destructive-soft-foreground",
+				labelOnTrail: "text-destructive-foreground",
+			},
+			success: {
+				root: "bg-success-soft",
+				trail: "bg-success",
+				label: "text-success-soft-foreground",
+				labelOnTrail: "text-success-foreground",
+			},
+		},
+		size: {
+			sm: {
+				root: "h-button-sm rounded-button-sm",
+				label: "text-button-sm",
+				labelOnTrail: "text-button-sm",
+				thumbGlyph: "size-icon-sm",
+			},
+			md: {
+				root: "h-button-md rounded-button-md",
+				label: "text-button-md",
+				labelOnTrail: "text-button-md",
+				thumbGlyph: "size-icon-md",
+			},
+			lg: {
+				root: "h-button-lg rounded-button-lg",
+				label: "text-button-lg",
+				labelOnTrail: "text-button-lg",
+				thumbGlyph: "size-icon-lg",
+			},
+		},
+		isFullWidth: {
+			true: { root: "w-full self-stretch" },
+			false: { root: "w-72" },
+		},
+		isDisabled: {
+			true: { root: "opacity-50" },
+			false: {},
+		},
+	},
+	defaultVariants: {
+		variant: SLIDE_BUTTON_DEFAULT_VARIANT,
+		size: SLIDE_BUTTON_DEFAULT_SIZE,
+		isFullWidth: false,
+		isDisabled: false,
+	},
+});
+
+/**
+ * The threshold a slide button actually uses.
+ *
+ * Undefined and NaN take the default — NaN would otherwise fail every comparison
+ * and leave a control that can never confirm. Anything else is clamped into
+ * [0.1, 1].
+ */
+export function resolveSlideThreshold(threshold?: number): number {
+	if (threshold === undefined || Number.isNaN(threshold)) return SLIDE_BUTTON_DEFAULT_THRESHOLD;
+	return Math.min(1, Math.max(SLIDE_BUTTON_MIN_THRESHOLD, threshold));
+}
+
+/**
+ * How far the handle can move, in points: the rail less the handle and an inset
+ * at each end. Zero before layout, never negative.
+ *
+ * Marked `"worklet"` and written flat — see `resolveSwitchRelease` for why a
+ * module-scope worklet calls nothing.
+ */
+export function resolveSlideTravel({
+	railWidth,
+	handleWidth,
+	inset,
+}: {
+	railWidth: number;
+	handleWidth: number;
+	inset: number;
+}): number {
+	"worklet";
+	const travel = railWidth - handleWidth - inset * 2;
+	return travel > 0 ? travel : 0;
+}
+
+/**
+ * The handle's width from the rail's measured height.
+ *
+ * Measured rather than tabulated, so a consumer who retunes `--spacing-button-*`
+ * keeps a handle in proportion without touching this file.
+ */
+export function resolveSlideHandleWidth({ railHeight, inset }: { railHeight: number; inset: number }): number {
+	"worklet";
+	const height = railHeight - inset * 2;
+	return height > 0 ? Math.round(height * SLIDE_BUTTON_HANDLE_RATIO) : 0;
+}
+
+/**
+ * Whether the handle is far enough along that letting go here would confirm —
+ * what the arming haptic reports.
+ *
+ * With a threshold of 1 that is the far end, less half a point of slop.
+ */
+export function isSlideArmed({
+	offset,
+	travel,
+	threshold,
+}: {
+	offset: number;
+	travel: number;
+	threshold: number;
+}): boolean {
+	"worklet";
+	if (travel <= 0) return false;
+	if (threshold >= 1) return offset >= travel - SLIDE_BUTTON_FAR_END_SLOP;
+	return offset / travel >= threshold;
+}
+
+/**
+ * How visible the trail is at a given offset: nothing at rest, fully drawn after
+ * {@link SLIDE_BUTTON_TRAIL_FADE} points.
+ */
+export function resolveSlideTrailOpacity(offset: number): number {
+	"worklet";
+	if (offset <= 0) return 0;
+	return offset >= SLIDE_BUTTON_TRAIL_FADE ? 1 : offset / SLIDE_BUTTON_TRAIL_FADE;
+}
+
+/**
+ * How wide the trail is: from the rail's start edge to the handle's middle.
+ *
+ * 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.
+ */
+export function resolveSlideTrailWidth({
+	offset,
+	handleWidth,
+	inset,
+}: {
+	offset: number;
+	handleWidth: number;
+	inset: number;
+}): number {
+	"worklet";
+	return inset + offset + handleWidth / 2;
+}
+
+/**
+ * The label's horizontal padding, in points, on **each** side.
+ *
+ * One handle and two insets wide, applied symmetrically: the label stays centred
+ * in the whole rail, and a long one truncates before it runs under the resting
+ * handle instead of after.
+ */
+export function resolveSlideLabelGutter({ handleWidth, inset }: { handleWidth: number; inset: number }): number {
+	"worklet";
+	return handleWidth + inset * 2;
+}
+
+export type SlideRelease = "complete" | "return";
+
+/**
+ * Where a release sends the handle.
+ *
+ * `velocity` is already in the travel direction (flipped under RTL). The release
+ * looks a little ahead — `offset + velocity * lookahead` — and confirms when that
+ * projection reaches the threshold **and** the hand itself got within
+ * {@link SLIDE_BUTTON_ARM_SLACK} of it. The second condition is what stops a hard
+ * flick from halfway confirming.
+ *
+ * A threshold of 1 has no shortcut at all: only a release at the far end confirms.
+ */
+export function resolveSlideRelease({
+	offset,
+	velocity,
+	travel,
+	threshold,
+	lookahead,
+}: {
+	offset: number;
+	velocity: number;
+	travel: number;
+	threshold: number;
+	lookahead: number;
+}): SlideRelease {
+	"worklet";
+	if (travel <= 0) return "return";
+	if (threshold >= 1) return offset >= travel - SLIDE_BUTTON_FAR_END_SLOP ? "complete" : "return";
+
+	const projected = (offset + velocity * lookahead) / travel;
+	const reached = offset / travel;
+	return projected >= threshold && reached >= threshold - SLIDE_BUTTON_ARM_SLACK ? "complete" : "return";
+}
+
+export type SlideButtonVariantProps = VariantProps<typeof slideButtonVariants>;

package/src/components/slider/index.ts

@@ -15,6 +15,7 @@ export {
 	nearestThumbIndex,
 	progressOf,
 	resolveSliderAxes,
+	resolveThumbAccessibilityLabel,
 	SLIDER_COLORS,
 	SLIDER_DEFAULT_COLOR,
 	SLIDER_DEFAULT_ORIENTATION,
@@ -28,6 +29,7 @@ export {
 	SLIDER_SIZES,
 	SLIDER_STEP,
 	SLIDER_THUMB_ANIMATION,
+	SLIDER_THUMB_NAMES,
 	SLIDER_THUMB_SPRING,
 	type SliderAxes,
 	type SliderColor,