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

package/src/components/list-group/list-group.context.tsx

@@ -0,0 +1,65 @@
+import { createContext, type ReactElement, type ReactNode, use } from "react";
+import type { ListGroupSize, ListGroupVariant } from "./list-group.variants";
+
+export type ListGroupContextValue = {
+	/** Size of the list group. */
+	size: ListGroupSize;
+	/** Visual variant of the list group. */
+	variant: ListGroupVariant;
+};
+
+const ListGroupContext = createContext<ListGroupContextValue | null>(null);
+
+/**
+ * Supplies the enclosing list group's size and variant to its subtree.
+ *
+ * Lives in its own module, importing nothing but `list-group.variants`, so a
+ * component the list group renders can read it without importing `../list-group`
+ * and closing a cycle through `list-group.tsx`. See AGENTS.md rule 3.
+ */
+export function ListGroupProvider({
+	value,
+	children,
+}: {
+	value: ListGroupContextValue;
+	children: ReactNode;
+}): ReactElement {
+	return <ListGroupContext value={value}>{children}</ListGroupContext>;
+}
+ListGroupProvider.displayName = "DelacourUI.ListGroup.Provider";
+
+/** The enclosing list group's context, or null outside a `<ListGroup>`. */
+export function useListGroupContext(): ListGroupContextValue | null {
+	return use(ListGroupContext);
+}
+
+/**
+ * Reads the enclosing list group's size and variant.
+ *
+ * Lets a custom row style itself to match without the list group having to pass
+ * props down through every slot. Throws outside a `<ListGroup>` — use
+ * {@link useListGroupContext} where the enclosing list group is optional.
+ */
+export function useListGroup(): ListGroupContextValue {
+	const context = useListGroupContext();
+	if (!context) {
+		throw new Error("useListGroup must be called inside a <ListGroup>.");
+	}
+	return context;
+}
+
+/**
+ * The enclosing list group's context, for a compound part that cannot work
+ * without one.
+ *
+ * Internal: deliberately not re-exported from `index.ts`. A caller outside the
+ * library wants {@link useListGroup}, whose error message names the hook rather
+ * than a part.
+ */
+export function useListGroupPart(component: string): ListGroupContextValue {
+	const context = useListGroupContext();
+	if (!context) {
+		throw new Error(`${component} must be rendered inside a <ListGroup>.`);
+	}
+	return context;
+}

package/src/components/list-group/list-group.tsx

@@ -0,0 +1,116 @@
+import { Children, isValidElement, type ReactElement, type ReactNode, useMemo } from "react";
+import { View, type ViewProps } from "react-native";
+import { Separator } from "../separator";
+import { type ListGroupContextValue, ListGroupProvider } from "./list-group.context";
+import { type ListGroupSize, type ListGroupVariant, listGroupVariants } from "./list-group.variants";
+import { ListGroupItem } from "./list-group-item";
+import { ListGroupItemContent } from "./list-group-item-content";
+import { ListGroupItemDescription } from "./list-group-item-description";
+import { ListGroupItemPrefix } from "./list-group-item-prefix";
+import { ListGroupItemSuffix } from "./list-group-item-suffix";
+import { ListGroupItemTitle } from "./list-group-item-title";
+
+export type ListGroupProps = ViewProps & {
+	variant?: ListGroupVariant;
+	size?: ListGroupSize;
+	/** Draw a divider between adjacent children. On by default. */
+	isDivided?: boolean;
+	className?: string;
+	children?: ReactNode;
+};
+
+function ListGroupRoot({
+	variant = "default",
+	size = "md",
+	isDivided = true,
+	className,
+	children,
+	...props
+}: ListGroupProps): ReactElement {
+	const context = useMemo<ListGroupContextValue>(() => ({ size, variant }), [size, variant]);
+
+	const slots = listGroupVariants({ size, variant });
+	const dividerClassName = slots.divider();
+
+	const content = useMemo(
+		() => (isDivided ? withDividers(children, dividerClassName) : children),
+		[children, isDivided, dividerClassName]
+	);
+
+	return (
+		<ListGroupProvider value={context}>
+			<View className={slots.root({ className })} {...props}>
+				{content}
+			</View>
+		</ListGroupProvider>
+	);
+}
+
+/**
+ * Inserts a divider between adjacent children.
+ *
+ * A pair is skipped when either side already is a `Separator`, so a hand-placed
+ * divider is never doubled. `Children.toArray` drops the nulls and booleans a
+ * conditional child leaves behind, so a row rendered only some of the time does
+ * not strand a divider where nothing follows it.
+ */
+function withDividers(children: ReactNode, dividerClassName: string): ReactNode {
+	const items = Children.toArray(children);
+	const output: ReactNode[] = [];
+
+	for (const [index, child] of items.entries()) {
+		if (index > 0 && !isSeparator(items[index - 1]) && !isSeparator(child)) {
+			output.push(<Separator className={dividerClassName} key={`divider-${index}`} />);
+		}
+		output.push(child);
+	}
+
+	return output;
+}
+
+function isSeparator(node: ReactNode): boolean {
+	return isValidElement(node) && node.type === Separator;
+}
+
+/**
+ * A surface grouping related rows under one rounded, clipped container.
+ *
+ * `size` and `variant` reach the sub-components through context, so a row's
+ * title picks its own text colour and type scale. That indirection is not
+ * incidental: a React Native `View` does not cascade colour to a `Text`
+ * descendant the way a DOM element would.
+ *
+ * Dividers are inserted between adjacent children rather than written out at
+ * every call site, inset to line up with the rows' own padding. A `Separator`
+ * placed by hand is respected — no divider is added on either side of it — so a
+ * caller can still control one gap without turning the whole feature off.
+ *
+ * @example
+ * <ListGroup>
+ *   <ListGroup.Item onPress={openProfile}>
+ *     <ListGroup.ItemPrefix>
+ *       <Icon icon={IconUser} />
+ *     </ListGroup.ItemPrefix>
+ *     <ListGroup.ItemContent>
+ *       <ListGroup.ItemTitle>Personal info</ListGroup.ItemTitle>
+ *       <ListGroup.ItemDescription>Name, email, phone</ListGroup.ItemDescription>
+ *     </ListGroup.ItemContent>
+ *     <ListGroup.ItemSuffix />
+ *   </ListGroup.Item>
+ * </ListGroup>
+ */
+export const ListGroup = Object.assign(ListGroupRoot, {
+	/** One row of a list group. Bare text children are wrapped in a title inside a content column. */
+	Item: ListGroupItem,
+	/** The leading slot of a row. Its subtree inherits the group's icon size and foreground token. */
+	ItemPrefix: ListGroupItemPrefix,
+	/** The text column of a row, taking whatever width the prefix and suffix leave. */
+	ItemContent: ListGroupItemContent,
+	/** The row's primary line. Carries its own colour — a `View` cannot cascade one to a `Text`. */
+	ItemTitle: ListGroupItemTitle,
+	/** The row's secondary line, a step down in scale and on the muted token. */
+	ItemDescription: ListGroupItemDescription,
+	/** The trailing slot of a row, showing a chevron unless given content. */
+	ItemSuffix: ListGroupItemSuffix,
+	displayName: "DelacourUI.ListGroup",
+});

package/src/components/list-group/list-group.types.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { TextProps, ViewProps } from "react-native";
+
+/**
+ * The shape of a row's leading, text and trailing slots.
+ *
+ * Shared by `ListGroup.ItemPrefix` and `ListGroup.ItemContent`, and extended by
+ * `ListGroup.ItemSuffix`, so it lives in a leaf rather than in one of them
+ * arbitrarily.
+ */
+export type ListGroupSlotProps = ViewProps & { className?: string; children?: ReactNode };
+
+/** The shape of a row's two text lines, `ItemTitle` and `ItemDescription`. */
+export type ListGroupTextProps = TextProps & { className?: string };

package/src/components/list-group/list-group.variants.test.ts

@@ -0,0 +1,223 @@
+import { describe, expect, test } from "bun:test";
+import { ICON_SIZE_TOKENS } from "../../styles/tokens";
+import { LIST_GROUP_SIZES, LIST_GROUP_VARIANTS, listGroupVariants } from "./list-group.variants";
+
+/** Pulls the horizontal padding step out of a class string — `px-4` yields 4. */
+function paddingStep(cls: string): string | undefined {
+	return cls.match(/\bpx-(\d+(?:\.\d+)?)\b/)?.[1];
+}
+
+/** Pulls the horizontal margin step out of a class string — `mx-4` yields 4. */
+function marginStep(cls: string): string | undefined {
+	return cls.match(/\bmx-(\d+(?:\.\d+)?)\b/)?.[1];
+}
+
+/**
+ * Position of a class string's `size-icon-*` token on the shared icon scale.
+ *
+ * Compares by step rather than by points, so a test says what it means and
+ * survives a token being retuned in `tokens.css`. `tokens.test.ts` is what
+ * keeps that array ordered.
+ */
+function iconStep(cls: string): number {
+	const token = cls.match(/\bsize-(icon-[\w-]+)\b/)?.[1];
+	return ICON_SIZE_TOKENS.indexOf(token as (typeof ICON_SIZE_TOKENS)[number]);
+}
+
+describe("listGroupVariants root slot", () => {
+	test("defaults to the card surface at md", () => {
+		const cls = listGroupVariants().root();
+		expect(cls).toContain("bg-card");
+		expect(cls).toContain("border-border");
+	});
+
+	test("gives every variant a distinct surface", () => {
+		const seen = new Set(LIST_GROUP_VARIANTS.map((variant) => listGroupVariants({ variant }).root()));
+		expect(seen.size).toBe(LIST_GROUP_VARIANTS.length);
+	});
+
+	test("maps each variant to its surface", () => {
+		expect(listGroupVariants({ variant: "default" }).root()).toContain("bg-card");
+		expect(listGroupVariants({ variant: "secondary" }).root()).toContain("bg-secondary");
+		expect(listGroupVariants({ variant: "tertiary" }).root()).toContain("bg-tertiary");
+		expect(listGroupVariants({ variant: "transparent" }).root()).toContain("bg-transparent");
+	});
+
+	test("only the default variant draws a border", () => {
+		expect(listGroupVariants({ variant: "default" }).root()).toContain("border-border");
+		for (const variant of LIST_GROUP_VARIANTS.filter((name) => name !== "default")) {
+			expect(listGroupVariants({ variant }).root()).not.toContain("border-border");
+		}
+	});
+
+	// The root's radius has to clip its rows: a pressed row fades to the edge of
+	// its own box, and without this the fade squares off the group's corners.
+	test("clips its rows at every variant and size", () => {
+		for (const variant of LIST_GROUP_VARIANTS) {
+			for (const size of LIST_GROUP_SIZES) {
+				const cls = listGroupVariants({ size, variant }).root();
+				expect(cls).toContain("overflow-hidden");
+				expect(cls).toMatch(/\brounded-/);
+			}
+		}
+	});
+
+	// Rule 1: a React Native View does not cascade colour to a Text descendant,
+	// so the text tokens belong on the title and description, never here.
+	test("carries no text treatment", () => {
+		for (const variant of LIST_GROUP_VARIANTS) {
+			expect(listGroupVariants({ variant }).root()).not.toMatch(/\btext-/);
+		}
+	});
+
+	test("merges an incoming className last", () => {
+		expect(listGroupVariants().root({ className: "mb-6" })).toContain("mb-6");
+		expect(listGroupVariants().root({ className: "bg-popover" })).not.toContain("bg-card");
+	});
+});
+
+describe("listGroupVariants item slot", () => {
+	test("lays a row out horizontally across its full width", () => {
+		const cls = listGroupVariants().item();
+		expect(cls).toContain("flex-row");
+		expect(cls).toContain("items-center");
+		expect(cls).toContain("w-full");
+	});
+
+	test("gives every size a distinct row metric", () => {
+		const seen = new Set(LIST_GROUP_SIZES.map((size) => listGroupVariants({ size }).item()));
+		expect(seen.size).toBe(LIST_GROUP_SIZES.length);
+	});
+
+	test("pads and spaces every size", () => {
+		for (const size of LIST_GROUP_SIZES) {
+			const cls = listGroupVariants({ size }).item();
+			expect(cls).toMatch(/\bmin-h-\d/);
+			expect(cls).toMatch(/\bpx-\d/);
+			expect(cls).toMatch(/\bpy-\d/);
+			expect(cls).toMatch(/\bgap-\d/);
+		}
+	});
+
+	test("adds the disabled treatment only when disabled", () => {
+		expect(listGroupVariants({ isDisabled: true }).item()).toContain("opacity-50");
+		expect(listGroupVariants({ isDisabled: false }).item()).not.toContain("opacity-50");
+	});
+
+	// Rule 1 again — the row is a View, so the title owns its own colour.
+	test("carries no text treatment", () => {
+		for (const size of LIST_GROUP_SIZES) {
+			expect(listGroupVariants({ size }).item()).not.toMatch(/\btext-/);
+		}
+	});
+
+	test("merges an incoming className last", () => {
+		expect(listGroupVariants().item({ className: "opacity-80" })).toContain("opacity-80");
+	});
+});
+
+describe("listGroupVariants divider slot", () => {
+	// The load-bearing coupling: an auto-inserted divider is inset to line up with
+	// the row's own padding. Drift between the two is what makes a grouped list
+	// look wrong, so the pair is asserted together rather than pinned separately.
+	// One slotted tv is what now makes this hard to break — both read one axis.
+	test("insets the divider to the row's horizontal padding at every size", () => {
+		for (const size of LIST_GROUP_SIZES) {
+			const slots = listGroupVariants({ size });
+			const inset = marginStep(slots.divider());
+			const padding = paddingStep(slots.item());
+			expect(inset).toBeDefined();
+			expect(inset).toBe(padding);
+		}
+	});
+
+	test("gives every size a distinct inset", () => {
+		const seen = new Set(LIST_GROUP_SIZES.map((size) => listGroupVariants({ size }).divider()));
+		expect(seen.size).toBe(LIST_GROUP_SIZES.length);
+	});
+
+	// The line itself comes from Separator; this only positions it.
+	test("carries no colour of its own", () => {
+		for (const size of LIST_GROUP_SIZES) {
+			expect(listGroupVariants({ size }).divider()).not.toMatch(/\b(bg|text|border)-/);
+		}
+	});
+});
+
+describe("listGroupVariants content slot", () => {
+	test("takes the space the prefix and suffix leave", () => {
+		expect(listGroupVariants().content()).toContain("flex-1");
+	});
+});
+
+describe("listGroupVariants title slot", () => {
+	test("carries the foreground colour, which the row must not", () => {
+		expect(listGroupVariants().title()).toContain("text-foreground");
+	});
+
+	test("gives every size a distinct type scale", () => {
+		const seen = new Set(LIST_GROUP_SIZES.map((size) => listGroupVariants({ size }).title()));
+		expect(seen.size).toBe(LIST_GROUP_SIZES.length);
+	});
+
+	test("merges an incoming className last", () => {
+		expect(listGroupVariants().title({ className: "font-bold" })).toContain("font-bold");
+	});
+});
+
+describe("listGroupVariants description slot", () => {
+	test("sits back from the title on the muted token", () => {
+		expect(listGroupVariants().description()).toContain("text-muted-foreground");
+		expect(listGroupVariants().description()).not.toContain("text-foreground");
+	});
+
+	test("gives every size a distinct type scale", () => {
+		const seen = new Set(LIST_GROUP_SIZES.map((size) => listGroupVariants({ size }).description()));
+		expect(seen.size).toBe(LIST_GROUP_SIZES.length);
+	});
+
+	test("stays smaller than the title it sits under", () => {
+		const scale = ["text-xs", "text-sm", "text-base", "text-lg"];
+		for (const size of LIST_GROUP_SIZES) {
+			const slots = listGroupVariants({ size });
+			const title = scale.findIndex((step) => slots.title().includes(step));
+			const description = scale.findIndex((step) => slots.description().includes(step));
+			expect(description).toBeGreaterThanOrEqual(0);
+			expect(description).toBeLessThan(title);
+		}
+	});
+});
+
+describe("listGroupVariants icon slots", () => {
+	test("give every size a distinct prefix icon token, increasing with it", () => {
+		const steps = LIST_GROUP_SIZES.map((size) => iconStep(listGroupVariants({ size }).prefixIcon()));
+		expect(steps).not.toContain(-1);
+		expect(new Set(steps).size).toBe(LIST_GROUP_SIZES.length);
+		expect([...steps]).toEqual([...steps].sort((a, b) => a - b));
+	});
+
+	test("give every size a distinct suffix icon token, increasing with it", () => {
+		const steps = LIST_GROUP_SIZES.map((size) => iconStep(listGroupVariants({ size }).suffixIcon()));
+		expect(steps).not.toContain(-1);
+		expect(new Set(steps).size).toBe(LIST_GROUP_SIZES.length);
+		expect([...steps]).toEqual([...steps].sort((a, b) => a - b));
+	});
+
+	// The trailing chevron is a hint, not content: it stays under the leading
+	// icon so a row reads left to right rather than being pulled to its edge.
+	test("keep the suffix icon smaller than the prefix icon at every size", () => {
+		for (const size of LIST_GROUP_SIZES) {
+			const slots = listGroupVariants({ size });
+			expect(iconStep(slots.suffixIcon())).toBeLessThan(iconStep(slots.prefixIcon()));
+		}
+	});
+
+	// An icon takes a colour value rather than a class — the slot sizes it only.
+	test("carry no colour", () => {
+		for (const size of LIST_GROUP_SIZES) {
+			const slots = listGroupVariants({ size });
+			expect(slots.prefixIcon()).not.toMatch(/\b(bg|text|border)-/);
+			expect(slots.suffixIcon()).not.toMatch(/\b(bg|text|border)-/);
+		}
+	});
+});

package/src/components/list-group/list-group.variants.ts

@@ -0,0 +1,107 @@
+import type { VariantProps } from "tailwind-variants";
+import { tv } from "../../lib/tv";
+
+export const LIST_GROUP_VARIANTS = ["default", "secondary", "tertiary", "transparent"] as const;
+
+export const LIST_GROUP_SIZES = ["sm", "md", "lg"] as const;
+
+export type ListGroupVariant = (typeof LIST_GROUP_VARIANTS)[number];
+export type ListGroupSize = (typeof LIST_GROUP_SIZES)[number];
+
+/** Theme token an icon in `ListGroup.ItemPrefix` inherits. */
+export const LIST_GROUP_FOREGROUND_TOKEN = "foreground";
+
+/** Theme token the default trailing chevron inherits. */
+export const LIST_GROUP_SUFFIX_ICON_TOKEN = "muted-foreground";
+
+/**
+ * Styling for every part of a list group.
+ *
+ * Both icon slots name a step on the shared `--spacing-icon-*` scale, the same
+ * one `Icon` and `Spinner` use, so a row's glyph lines up with every other glyph
+ * in the library rather than carrying a private number.
+ *
+ * One slotted `tv()` rather than a call per part, because size is not
+ * decoration here: it drives the row metrics, the title and description type
+ * scale, both icon sizes *and* the divider inset. Those five belong on one axis
+ * rather than in five places that can drift apart — the divider inset tracking
+ * the row's padding is asserted as a pair in the tests for exactly that reason.
+ *
+ * `overflow-hidden` on the root is load-bearing rather than tidiness: a pressed
+ * row fades to the edge of its own box, and the first and last rows would square
+ * off the group's corners without it.
+ *
+ * The root and item slots hold no `text-*` utility — a React Native `View` does
+ * not cascade colour to a `Text` descendant, so the text tokens live on the
+ * title and description slots.
+ *
+ * `w-full` on the item matters because the root clips: without it a short row
+ * leaves the press feedback ending mid-card instead of spanning it.
+ *
+ * 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 listGroupVariants = tv({
+	slots: {
+		root: "overflow-hidden border border-transparent",
+		item: "w-full flex-row items-center",
+		/** Positioning only for a divider the root inserts — the line is a `Separator`. */
+		divider: "",
+		prefix: "items-center justify-center",
+		/** Edge length an `Icon` in the prefix inherits. */
+		prefixIcon: "",
+		content: "flex-1 justify-center gap-0.5",
+		title: "font-medium text-foreground",
+		description: "text-muted-foreground",
+		suffix: "items-center justify-center",
+		/** Edge length of the default trailing chevron. */
+		suffixIcon: "",
+	},
+	variants: {
+		variant: {
+			default: { root: "border-border bg-card" },
+			secondary: { root: "bg-secondary" },
+			tertiary: { root: "bg-tertiary" },
+			transparent: { root: "bg-transparent" },
+		},
+		size: {
+			sm: {
+				root: "rounded-md",
+				item: "min-h-12 gap-2.5 px-3 py-2",
+				divider: "mx-3",
+				prefixIcon: "size-icon-md",
+				suffixIcon: "size-icon-xs",
+				title: "text-sm",
+				description: "text-xs",
+			},
+			md: {
+				root: "rounded-md",
+				item: "min-h-14 gap-3 px-4 py-3",
+				divider: "mx-4",
+				prefixIcon: "size-icon-lg",
+				suffixIcon: "size-icon-sm",
+				title: "text-base",
+				description: "text-sm",
+			},
+			lg: {
+				root: "rounded-md",
+				item: "min-h-16 gap-3.5 px-5 py-4",
+				divider: "mx-5",
+				prefixIcon: "size-icon-xl",
+				suffixIcon: "size-icon-md",
+				title: "text-lg",
+				description: "text-base",
+			},
+		},
+		// The empty `false` branch types the prop as `boolean` rather than `true`.
+		// See the note in button.variants.ts.
+		isDisabled: { true: { item: "opacity-50" }, false: {} },
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md",
+		isDisabled: false,
+	},
+});
+
+export type ListGroupVariantProps = VariantProps<typeof listGroupVariants>;

package/src/components/pressable/AGENTS.md

@@ -0,0 +1,64 @@
+# Pressable
+
+The interaction primitive every pressable component in this library builds on —
+a Gesture Handler tap drives the press feedback and the haptic on the UI thread,
+and only `onPress` and `onLongPress` cross back to JS.
+
+`import { Pressable } from "@delacour/react-native-ui/pressable";`
+
+## Files
+
+| File | What it holds |
+| --- | --- |
+| `index.ts` | → `@delacour/react-native-ui/pressable` |
+| `pressable.tsx` | The Gesture API primitive |
+| `pressable.variants.ts` | Shared feedback vocabulary, no RN imports |
+| `pressable.variants.test.ts` | |
+
+## Design
+
+- **`pressable.variants.ts` holds no `tv()`, on purpose.** Its values are
+  opacity and scale *interpolation targets* read by a worklet on the UI thread
+  (`1 - pressed.value * (1 - targetOpacity)`), not styles. A worklet cannot
+  compile a className, so `tv` is the wrong tool here — a deliberate exception
+  to pattern C, not an oversight.
+- **`feedback` is the shared vocabulary**: `scale`, `fade`, `scale-fade`,
+  `none`, defined once in `pressable.variants.ts`. Every pressable in the
+  library resolves through it rather than keeping a private map. A control
+  changes its **default** and nothing else — [`Button`](../button/AGENTS.md) to
+  `scale`, [`ListGroup.Item`](../list-group/AGENTS.md) to `fade`. Neither
+  narrows the union: a second definition of a prop the control does not change
+  is a definition that can drift, which is why the button's own
+  `ButtonFeedback` was removed.
+- **`scale-fade` is composed, not spelled out.** Its scale comes from `scale`
+  and its opacity from `fade`, so tuning either single-axis mode carries
+  through and the name keeps describing what the mode does. A test asserts it.
+- **`pressedScale` / `pressedOpacity` win on the axis they name**, and leave the
+  other to `feedback`. They are the escape hatch for a value the named modes do
+  not cover, not an alternative API — `??` is the merge, so an explicit `0` is a
+  value rather than an absence.
+- **The no-feedback fallback is unnamed on purpose.** A bare `Pressable` presses
+  to `{ opacity: 0.9, scale: 0.97 }`, which fades less than `fade` does. Naming
+  it would either change what a bare pressable has always done or force
+  `scale-fade` to fade less than `fade`.
+- **`disabled` vs `busy`.** Both block the gesture; only `disabled` announces
+  the control as disabled. Use `busy` for a temporary state the component clears
+  itself, so assistive tech reports a control that is momentarily unavailable
+  rather than one that is inert. Neither applies any opacity — that is the
+  caller's variant's job.
+- **A worklet crosses back to JS with `scheduleOnRN`**, imported from
+  `react-native-worklets` — never Reanimated's `runOnJS`, which since Reanimated 4
+  is a deprecated shim that forwards to exactly that call. `scheduleOnRN(fn, ...args)`
+  takes the arguments itself, so there is no second call: `runOnJS(onPress)()`
+  becomes `scheduleOnRN(onPress)`. The same rename covers `runOnUI` →
+  `scheduleOnUI`, which `use-keyboard-state-sync` already uses. A Biome
+  `noRestrictedImports` rule in `@delacour/biome-config` fails the build on the
+  deprecated names, so this cannot regress quietly.
+- **A worklet's body must be self-contained.** The press feedback runs on the UI
+  thread and cannot rely on a module-scope helper: factoring its
+  `Math.min(1, Math.max(0, …))` clamp into a `clampUnit` helper — itself marked
+  `"worklet"` — crashes the UI thread with `undefined is not a function`, because
+  the helper is not captured into the worklet's closure. No unit test sees it,
+  since on the JS thread the helper resolves perfectly.
+  [`Screen`](../screen/AGENTS.md)'s border ramps write the same clamp out twice
+  for this reason.

package/src/components/pressable/index.ts

@@ -0,0 +1,9 @@
+export { type HapticFeedback, Pressable, type PressableProps, playHaptic } from "./pressable";
+export {
+	PRESSABLE_FEEDBACK,
+	PRESSABLE_FEEDBACK_FALLBACK,
+	PRESSABLE_FEEDBACKS,
+	type PressableFeedback,
+	type PressedState,
+	resolvePressedState,
+} from "./pressable.variants";