@delacour/react-native-ui 0.1.0-alpha.20261007120055 → 0.1.0-alpha.20261007130133

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.1.0-alpha.20261007120055",
+	"version": "0.1.0-alpha.20261007130133",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -46,7 +46,9 @@
 		"./chip": "./src/components/chip/index.ts",
 		"./collapsible": "./src/components/collapsible/index.ts",
 		"./dialog": "./src/components/dialog/index.ts",
+		"./drawer": "./src/components/drawer/index.ts",
 		"./empty-state": "./src/components/empty-state/index.ts",
+		"./feedback": "./src/components/feedback/index.ts",
 		"./field": "./src/components/field/index.ts",
 		"./icon": "./src/components/icon/index.ts",
 		"./input": "./src/components/input/index.ts",
@@ -107,8 +109,8 @@
 	},
 	"peerDependencies": {
 		"@central-icons-react-native/round-outlined-radius-1-stroke-1.5": "^1.1",
-		"@delacour/react-native-bottom-sheet": "0.1.0-alpha.20261007120055",
-		"@delacour/react-native-charts": "0.1.0-alpha.20261007120055",
+		"@delacour/react-native-bottom-sheet": "0.1.0-alpha.20261007130133",
+		"@delacour/react-native-charts": "0.1.0-alpha.20261007130133",
 		"@legendapp/list": ">=3.3",
 		"expo-linear-gradient": ">=15",
 		"expo-router": ">=57",

package/src/components/drawer/AGENTS.md

@@ -0,0 +1,123 @@
+# Drawer
+
+A panel that slides in from an edge and covers the app until dismissed: a navigation menu from the
+start edge, a filter panel from the end, a notifications tray from the top. Compound root plus
+`Drawer.Trigger`, `Drawer.Content`, `Drawer.Header`, `Drawer.Title`, `Drawer.Description`,
+`Drawer.Body`, `Drawer.Footer` and `Drawer.Close`, and `useDrawer()`.
+
+`import { Drawer } from "@delacour/react-native-ui/drawer";`
+
+It is drawn with the [overlay foundation](../overlay/AGENTS.md) — `Overlay.Portal`,
+`Overlay.Scrim`, `useOverlayPresence`, `useOverlayBackHandler` — so the app has to mount
+`OverlayProvider` once at its root. Without one the drawer draws inline and warns once.
+
+## Files
+
+| File | What it holds |
+| --- | --- |
+| `index.ts` | → `@delacour/react-native-ui/drawer` |
+| `drawer.tsx` | Root — the open state, the ids and the focus refs — and the `Object.assign` compound surface |
+| `drawer.context.tsx` | **Leaf.** `DrawerProvider`, `DrawerPanelProvider`, `useDrawer()`, `useDrawerContext()`, `useDrawerPart()`, `useDrawerPanel()` |
+| `drawer-trigger.tsx` | `Drawer.Trigger` — donates the open with `asChild`, keeps the trigger's ref for focus return |
+| `drawer-content.tsx` | `Drawer.Content` — presence, portal, scrim, edge and extent, insets, slide, swipe, back button, focus |
+| `drawer-header.tsx` | `Drawer.Header` — the title column and a ✕ at the trailing edge |
+| `drawer-title.tsx` | `Drawer.Title` — a `Text.Header` carrying the title `nativeID` and the focus ref |
+| `drawer-description.tsx` | `Drawer.Description` — a muted `Text.Paragraph` |
+| `drawer-body.tsx` | `Drawer.Body` — a `ScrollView`, or a plain column with `isScrollable={false}` |
+| `drawer-footer.tsx` | `Drawer.Footer` — a row under a hairline |
+| `drawer-close.tsx` | `Drawer.Close` — the ✕, or with `asChild` any control that closes |
+| `use-drawer-pan.ts` | `useDrawerPan` — the swipe-to-dismiss pan, its threshold haptic and its release |
+| `drawer.variants.ts` | The slotted `tv()`, the size table, the release constants and the pure geometry — no RN imports |
+| `drawer.variants.test.ts` | Edges both directions, extents, frame extents, offsets, drag, release, exit duration, insets, slots per edge, tokens in both themes |
+
+## Design
+
+- **A side is logical, an edge is physical, and only the edge is ever measured.** `side` is what a
+  caller writes — `start`, `end`, `top`, `bottom` — and `resolveDrawerEdge(side, I18nManager.isRTL)`
+  turns it into `left`, `right`, `top` or `bottom`. Transforms and a pan's translation are physical
+  in React Native whatever the layout direction, so the offset, the drag, the release and the insets
+  are all computed against the edge. `useDrawer()` returns both.
+- **The panel is placed in a left-to-right frame, and its content gets the app's direction back.**
+  React Native swaps `left`/`right` styles under RTL by default (`swapLeftAndRightInRTL`), and an app
+  may turn that off; either way a `left-0` class would mean something different from the
+  `translateX` beside it. The `positioner` slot is an absolute fill with `direction: "ltr"`, so the
+  panel's `edge` classes, its corners and its safe-area padding are physical, and `inner` sets the
+  app's direction again so text, rows and the header's ✕ lay out as everywhere else. That is also why
+  the spec's `edge` variant could stay keyed on the physical edge.
+- **The size is a fraction of the window with a cap.** `sm` 62% to 280, `md` 78% to 320, `lg` 88% to
+  400, `full` 94% uncapped — of the width for a start/end drawer, of the height for top/bottom. A
+  fraction keeps a strip of the app in view to tap away on; the cap keeps a tablet's drawer a drawer.
+  The extent is a fixed width or height rather than a measured one, so the first frame already knows
+  how far off-screen the panel starts. **The docked edge's inset is added on top**
+  (`resolveDrawerFrameExtent`): the size measures the content, not the band under the status bar. A
+  top `sm` drawer once spent 62 of its 280pt there and clipped its third row.
+- **Insets go on every side that meets a screen edge.** `resolveDrawerInsets` pads the docked side and
+  the two beside it, and nothing on the side facing the app, so a start drawer clears the status bar,
+  the home indicator and a landscape notch, and a top drawer does not pad for the home indicator it
+  never reaches.
+- **Docked corners square, free corners round.** `bg-popover` — a layer over the app, as `Dialog` and
+  `BottomSheet` paint — with `rounded-lg`, the card step, only on the two corners facing the app.
+- **The swipe continues, it does not spring back.** The pan waits for `DRAWER_PAN_ACTIVE_OFFSET` (10pt)
+  along the panel's axis and fails on the same travel across it, so a tap reaches a row and a vertical
+  scroll in a start/end drawer's body never moves the drawer. Toward the edge the panel follows the
+  finger; away it rubber-bands toward 40pt and never reaches it. On release, past 40% of the extent or
+  on a fling toward the edge faster than 800 pt/s dismisses — a fling away always restores. A dismiss
+  carries on from where the finger left the panel at the release speed (`resolveDrawerExitDuration`,
+  80–220 ms, linear) and closes the state only when it lands; the presence exit then runs off-screen
+  and unmounts. A restore eases back in the entrance time.
+- **The scrim thins with the drag.** Its opacity is `progress × (1 − dragFraction)`. `Overlay.Scrim`
+  takes a writable shared value, so an animated reaction writes the product into one of the drawer's
+  own rather than handing it a derived value.
+- **A haptic marks the threshold, nothing else.** `selection` each time the drag crosses 40% — the
+  moment letting go changes what happens — in both directions, from the worklet through `playHaptic`.
+  None on open.
+- **The pan's worklets live in the hook.** `useDrawerPan` builds them inside a `useMemo`, so they may
+  call `drawer.variants`' module-scope worklets; those are flat — a module-scope worklet never calls
+  another function — which is why each restates the edge's sign rather than sharing a helper.
+  Per-gesture memory (`isDragging`, `isPastThreshold`) is shared values. A touch that never activated
+  returns early from `onFinalize`, so a tap during a dismiss cannot restart a restore under it.
+- **Reduce motion fades, and the swipe still works.** Under `useReducedMotion()` the open and close do
+  not slide — the panel fades in place on `progress` — but a drag still moves it: that is direct
+  manipulation, not animation. `isMotionCalm` does not still it, per the foundation.
+- **`isDismissible={false}` turns off every way out the drawer did not offer** — the scrim (which still
+  takes the touch), the back button, the escape gesture and the swipe. `Drawer.Close` still closes it.
+  `isSwipeDismissible={false}` turns off the swipe alone.
+- **Every path to closed is one `setOpen(false)`**, and the root drops a set that does not change the
+  value, so a scrim tap during a swipe's exit does not report `onOpenChange(false)` twice.
+- **The header writes its own ✕, in the flow.** A row: the title column takes the slack and the ✕
+  sits at the trailing edge, so a long title wraps before it and RTL needs no rule. `isCloseHidden`
+  drops it. There is no `title` or `description` slot — both are text presets with no layout of their
+  own, and `tv` emits `undefined` for an empty slot; the parts merge `className` with `cn()`.
+- **The body scrolls by default and takes the slack, and the footer is `mt-auto`**, so the footer sits
+  at the panel's end however short the content — even with no body, which the simulator caught: a
+  header-and-footer bottom drawer left its footer floating under the header. A top or bottom drawer's pan shares the vertical axis with a scroll — keep that
+  content short, or use a `BottomSheet`.
+- **It draws in the `modal` band**, over the navigator's header and over an open bottom sheet.
+- **Triggers and closes donate the press** with `asChild`, for `BottomSheet.Trigger`'s reason.
+- **Accessibility.** The panel is `accessibilityViewIsModal`, `role="dialog"`, labelled by the title's
+  `nativeID`; focus moves to the title once the entrance finishes and back to the trigger once the
+  exit does. `onAccessibilityEscape` and the back button close it when dismissible. The scrim is not
+  accessible. The ✕ is labelled `"Close"`.
+- **No blur backdrop.** Frosted scrims need `expo-blur`, not a peer; a follow-up for every overlay.
+
+## Preview capture (not yet shot)
+
+No demo is marked `capture` until a capture tool is available. When one is, these are the settings,
+and the flows are in `.argent/flows/previews/drawer/`:
+
+| Demo | Capture |
+| --- | --- |
+| `navigation` | `{ flow: "drawer/navigation", frame: "device", hero: true }` |
+| `filters` | `{ flow: "drawer/filters", frame: "device" }` |
+| `sizes` | `{ flow: "drawer/sizes", frame: "device" }` |
+| `notifications` | `{ flow: "drawer/notifications", frame: "device" }` |
+
+## Testing
+
+`bun test` reaches the edge resolution in both directions, the extents on a small and a wide window, the frame extent with the docked inset,
+the offset, the drag and its rubber band, the drag fraction, the release (threshold, fling toward,
+fling away), the exit duration, the insets per edge and the slots per edge with their tokens in both
+themes. All four sides from every dismissal path, the swipe's continue-and-restore, the scrolling
+body, the z-order over a sheet, VoiceOver and reduce motion are verified on a simulator through
+`/drawer` in the playground. RTL needs an app restarted with `I18nManager.forceRTL(true)`; the `rtl`
+demo shows the resolution the drawer will make.

package/src/components/drawer/drawer-body.tsx

@@ -0,0 +1,46 @@
+import type { ReactElement } from "react";
+import { ScrollView, type ScrollViewProps, View, type ViewProps } from "react-native";
+import { cn } from "../../lib/cn";
+import { drawerVariants } from "./drawer.variants";
+
+export type DrawerBodyProps =
+	/** Scrolls when its content is taller than the panel. The default. */
+	| ({ isScrollable?: true; className?: string; contentContainerClassName?: string } & ScrollViewProps)
+	/** A plain column, for content that fits — a few chips and a slider. */
+	| ({ isScrollable: false; className?: string } & ViewProps);
+
+/**
+ * The panel's content, between the header and the footer, taking the height
+ * left over.
+ *
+ * Scrolls by default. The panel's pan waits for travel along its own axis and
+ * fails on travel across it, so a vertical scroll in a start or end drawer
+ * never moves the drawer. A top or bottom drawer's pan runs along the same axis
+ * as a vertical scroll — keep their content short, or reach for a `BottomSheet`.
+ *
+ * @example
+ * <Drawer.Body>
+ *   <ListGroup>…</ListGroup>
+ * </Drawer.Body>
+ *
+ * @example
+ * <Drawer.Body isScrollable={false}>…</Drawer.Body>
+ */
+export function DrawerBody(props: DrawerBodyProps): ReactElement {
+	const slots = drawerVariants();
+
+	if (props.isScrollable === false) {
+		const { isScrollable: _isScrollable, className, ...rest } = props;
+		return <View className={cn(slots.body(), slots.bodyContent(), className)} {...rest} />;
+	}
+
+	const { isScrollable: _isScrollable, className, contentContainerClassName, ...rest } = props;
+	return (
+		<ScrollView
+			className={slots.body({ className })}
+			contentContainerClassName={slots.bodyContent({ className: contentContainerClassName })}
+			{...rest}
+		/>
+	);
+}
+DrawerBody.displayName = "DelacourUI.Drawer.Body";

package/src/components/drawer/drawer-close.tsx

@@ -0,0 +1,76 @@
+import { type ReactElement, useCallback } from "react";
+import { IconCrossSmall } from "../../icons/central";
+import { Slot } from "../../lib/slot";
+import { Icon } from "../icon";
+import { Pressable, type PressableProps } from "../pressable";
+import { useDrawerPart } from "./drawer.context";
+import { DRAWER_CLOSE_HIT_SLOP, drawerVariants } from "./drawer.variants";
+
+export type DrawerCloseProps =
+	/** Donates the close to the single child — a `Button` in the footer, a navigation row. */
+	| ({ asChild: true; children: ReactElement } & Omit<PressableProps, "asChild" | "children">)
+	/** The ✕ glyph. */
+	| ({ asChild?: false; accessibilityLabel?: string } & Omit<PressableProps, "asChild" | "children">);
+
+/**
+ * Closes the drawer.
+ *
+ * Without children it is a ✕: this library's `Pressable` with `fade` feedback
+ * — a scale on a glyph this small reads as a jitter — 8pt of slop because a
+ * bare glyph has no capsule to bring it toward 44pt, and `"Close"` as its
+ * label. `Drawer.Header` writes one at its trailing edge unless told not to.
+ *
+ * With `asChild` it donates the close to its child, chained ahead of the
+ * child's own `onPress` — a navigation row that should also shut the menu.
+ * Either way it is the same `setOpen(false)` the scrim, the swipe and the back
+ * button take, and it closes even a non-dismissible drawer: it is one of the
+ * drawer's own actions.
+ *
+ * @example
+ * <Drawer.Close asChild>
+ *   <Button variant="secondary">Done</Button>
+ * </Drawer.Close>
+ */
+export function DrawerClose(props: DrawerCloseProps): ReactElement {
+	const { close } = useDrawerPart("Drawer.Close");
+	const { onPress } = props;
+
+	const handlePress = useCallback(() => {
+		close();
+		onPress?.();
+	}, [close, onPress]);
+
+	if (props.asChild) {
+		const { asChild: _asChild, children, onPress: _onPress, ...rest } = props;
+		return (
+			<Slot onPress={handlePress} {...rest}>
+				{children}
+			</Slot>
+		);
+	}
+
+	const {
+		asChild: _asChild,
+		accessibilityLabel = "Close",
+		className,
+		feedback = "fade",
+		hitSlop = DRAWER_CLOSE_HIT_SLOP,
+		onPress: _onPress,
+		...rest
+	} = props;
+
+	return (
+		<Pressable
+			accessibilityLabel={accessibilityLabel}
+			accessibilityRole="button"
+			className={drawerVariants().close({ className })}
+			feedback={feedback}
+			hitSlop={hitSlop}
+			onPress={handlePress}
+			{...rest}
+		>
+			<Icon color="muted-foreground" icon={IconCrossSmall} />
+		</Pressable>
+	);
+}
+DrawerClose.displayName = "DelacourUI.Drawer.Close";

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

@@ -0,0 +1,186 @@
+import { type ReactElement, useCallback, useEffect, useId, useMemo } from "react";
+import {
+	AccessibilityInfo,
+	findNodeHandle,
+	I18nManager,
+	useWindowDimensions,
+	View,
+	type ViewProps,
+} from "react-native";
+import { GestureDetector } from "react-native-gesture-handler";
+import Animated, { useAnimatedReaction, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { Overlay, useOverlayBackHandler, useOverlayPresence } from "../overlay";
+import { type DrawerFocusTarget, DrawerPanelProvider, type DrawerPanelValue, useDrawerPart } from "./drawer.context";
+import {
+	type DrawerSide,
+	type DrawerSize,
+	drawerVariants,
+	resolveDrawerDragFraction,
+	resolveDrawerEdge,
+	resolveDrawerExtent,
+	resolveDrawerFrameExtent,
+	resolveDrawerInsets,
+	resolveDrawerOffset,
+} from "./drawer.variants";
+import { useDrawerPan } from "./use-drawer-pan";
+
+export type DrawerContentProps = ViewProps & {
+	className?: string;
+	/** Classes for the scrim behind the panel. */
+	scrimClassName?: string;
+	/** The edge it opens from. `start` and `end` follow the layout direction. Default `"start"`. */
+	side?: DrawerSide;
+	/** The panel's width (start, end) or height (top, bottom): `sm` 62% to 280, `md` 78% to 320, `lg` 88% to 400, `full` 94%. Default `"md"`. */
+	size?: DrawerSize;
+	/** Whether a swipe toward the edge dismisses it. Default true. */
+	isSwipeDismissible?: boolean;
+};
+
+/** Moves VoiceOver / TalkBack focus to a mounted element. A no-op when it has gone. */
+function focus(target: DrawerFocusTarget | null): void {
+	if (target === null) return;
+	const handle = findNodeHandle(target as Parameters<typeof findNodeHandle>[0]);
+	if (handle !== null) AccessibilityInfo.setAccessibilityFocus(handle);
+}
+
+/**
+ * The panel, its scrim and the portal they draw through.
+ *
+ * Renders nothing until the drawer opens, and stays mounted through the exit
+ * (`useOverlayPresence`), so the portal, the z-order and the back button all
+ * follow presence. It draws in the `modal` band — over the navigator's header
+ * and over an open bottom sheet.
+ *
+ * - **Geometry.** `side` resolves to a physical edge under `I18nManager.isRTL`;
+ *   `size` to an extent along that edge's axis. The panel pads the safe-area
+ *   insets on every side that meets a screen edge.
+ * - **Motion.** Opening and closing slide the panel along `progress`; under
+ *   reduce motion it fades in place instead. A swipe toward the edge drags it
+ *   and thins the scrim with it; see `useDrawerPan` for the release.
+ * - **Dismissal.** A scrim tap, Android back, the iOS escape gesture and the
+ *   swipe close a dismissible drawer. With `isDismissible={false}` the scrim
+ *   still takes the touch and only the drawer's own actions close it.
+ * - **Accessibility.** The panel is modal to assistive technology, a `dialog`
+ *   labelled by the title; focus moves to the title once it has entered and
+ *   back to the trigger, if still mounted, once it has gone.
+ *
+ * @example
+ * <Drawer.Content side="end" size="lg">
+ *   <Drawer.Header>…</Drawer.Header>
+ *   <Drawer.Body>…</Drawer.Body>
+ * </Drawer.Content>
+ */
+export function DrawerContent({
+	className,
+	scrimClassName,
+	side = "start",
+	size = "md",
+	isSwipeDismissible = true,
+	children,
+	style,
+	...props
+}: DrawerContentProps): ReactElement | null {
+	const { isOpen, close, isDismissible, titleId, titleRef, triggerRef } = useDrawerPart("Drawer.Content");
+	const id = useId();
+
+	const isRTL = I18nManager.isRTL;
+	const edge = resolveDrawerEdge(side, isRTL);
+	const isHorizontal = edge === "left" || edge === "right";
+	const window = useWindowDimensions();
+	const safeArea = useSafeAreaInsets();
+	const insets = resolveDrawerInsets(edge, safeArea);
+	const extent = resolveDrawerFrameExtent(
+		edge,
+		resolveDrawerExtent(size, isHorizontal ? window.width : window.height),
+		insets
+	);
+
+	const handleEntered = useCallback(() => focus(titleRef.current), [titleRef]);
+	const handleExited = useCallback(() => focus(triggerRef.current), [triggerRef]);
+	const { isPresent, isReduced, progress } = useOverlayPresence({
+		isOpen,
+		onEntered: handleEntered,
+		onExited: handleExited,
+	});
+
+	useOverlayBackHandler({ id, isEnabled: isPresent && isDismissible, onBack: close });
+
+	const drag = useSharedValue(0);
+	useEffect(() => {
+		if (isOpen) drag.value = 0;
+	}, [isOpen, drag]);
+
+	const pan = useDrawerPan({
+		drag,
+		edge,
+		extent,
+		isEnabled: isSwipeDismissible && isDismissible,
+		onDismiss: close,
+	});
+
+	// The scrim fades with presence and thins as a drag carries the panel out.
+	// A shared value of its own, because `Overlay.Scrim` takes a writable one.
+	const scrimProgress = useSharedValue(0);
+	useAnimatedReaction(
+		() => progress.value * (1 - resolveDrawerDragFraction(edge, drag.value, extent)),
+		(visibility) => {
+			scrimProgress.value = visibility;
+		},
+		[edge, extent]
+	);
+
+	const panelStyle = useAnimatedStyle(() => {
+		const slide = isReduced ? { translateX: 0, translateY: 0 } : resolveDrawerOffset(edge, extent, progress.value);
+		return {
+			opacity: isReduced ? progress.value : 1,
+			transform: [
+				{ translateX: slide.translateX + (isHorizontal ? drag.value : 0) },
+				{ translateY: slide.translateY + (isHorizontal ? 0 : drag.value) },
+			],
+		};
+	}, [edge, extent, isHorizontal, isReduced]);
+
+	const panel = useMemo<DrawerPanelValue>(() => ({ edge, side }), [edge, side]);
+
+	if (!isPresent) return null;
+
+	const slots = drawerVariants({ edge });
+	const onEscape = isDismissible ? close : undefined;
+	const frame = {
+		height: isHorizontal ? undefined : extent,
+		paddingBottom: insets.bottom,
+		paddingLeft: insets.left,
+		paddingRight: insets.right,
+		paddingTop: insets.top,
+		width: isHorizontal ? extent : undefined,
+	};
+
+	return (
+		<Overlay.Portal id={id} layer="modal">
+			<Overlay.Scrim
+				className={slots.scrim({ className: scrimClassName })}
+				onDismiss={onEscape}
+				progress={scrimProgress}
+			/>
+			<View className={slots.positioner()} pointerEvents="box-none" style={{ direction: "ltr" }}>
+				<GestureDetector gesture={pan}>
+					<Animated.View
+						accessibilityLabelledBy={titleId}
+						accessibilityViewIsModal
+						className={slots.content({ className })}
+						onAccessibilityEscape={onEscape}
+						role="dialog"
+						style={[frame, panelStyle, style]}
+						{...props}
+					>
+						<View className={slots.inner()} style={{ direction: isRTL ? "rtl" : "ltr" }}>
+							<DrawerPanelProvider value={panel}>{children}</DrawerPanelProvider>
+						</View>
+					</Animated.View>
+				</GestureDetector>
+			</View>
+		</Overlay.Portal>
+	);
+}
+DrawerContent.displayName = "DelacourUI.Drawer.Content";

package/src/components/drawer/drawer-description.tsx

@@ -0,0 +1,23 @@
+import type { ReactElement } from "react";
+import { cn } from "../../lib/cn";
+import { Text, type TextPresetProps } from "../text";
+import { useDrawerPart } from "./drawer.context";
+
+export type DrawerDescriptionProps = TextPresetProps;
+
+/**
+ * Supporting copy under the title.
+ *
+ * *Is* a `Text.Paragraph`, muted by default so the title and this read as a
+ * hierarchy. `color` is an ordinary prop. It has no slot in `drawerVariants` —
+ * see the note there.
+ *
+ * @example
+ * <Drawer.Description>Signed in as aria@harbour.studio</Drawer.Description>
+ */
+export function DrawerDescription({ className, color = "muted", ...props }: DrawerDescriptionProps): ReactElement {
+	const { descriptionId } = useDrawerPart("Drawer.Description");
+
+	return <Text.Paragraph className={cn(className)} color={color} nativeID={descriptionId} {...props} />;
+}
+DrawerDescription.displayName = "DelacourUI.Drawer.Description";

package/src/components/drawer/drawer-footer.tsx

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react";
+import { View, type ViewProps } from "react-native";
+import { drawerVariants } from "./drawer.variants";
+
+export type DrawerFooterProps = ViewProps & { className?: string };
+
+/**
+ * Actions at the panel's far end, under a hairline: a row, right-aligned in a
+ * left-to-right layout. It pushes itself to the panel's end with `mt-auto`, so
+ * it sits at the bottom however short the content is — with or without a body.
+ *
+ * @example
+ * <Drawer.Footer>
+ *   <Button variant="secondary" onPress={reset}>Reset</Button>
+ *   <Drawer.Close asChild><Button>Show results</Button></Drawer.Close>
+ * </Drawer.Footer>
+ */
+export function DrawerFooter({ className, ...props }: DrawerFooterProps): ReactElement {
+	return <View className={drawerVariants().footer({ className })} {...props} />;
+}
+DrawerFooter.displayName = "DelacourUI.Drawer.Footer";

package/src/components/drawer/drawer-header.tsx

@@ -0,0 +1,42 @@
+import type { ReactElement } from "react";
+import { View, type ViewProps } from "react-native";
+import { drawerVariants } from "./drawer.variants";
+import { DrawerClose } from "./drawer-close";
+
+export type DrawerHeaderProps = ViewProps & {
+	className?: string;
+	/** Hide the ✕ the header writes at its trailing edge. Default false. */
+	isCloseHidden?: boolean;
+};
+
+/**
+ * The top of the panel: `Drawer.Title` and `Drawer.Description` in a column
+ * that takes the row's slack, and a ✕ at the trailing edge.
+ *
+ * The ✕ is in the flow, not pinned to a corner, so a long title wraps before
+ * it rather than under it, and it lands on the correct side under RTL with no
+ * rule of its own. `isCloseHidden` drops it — a navigation drawer whose rows
+ * all close it, or a drawer with a `Close` in its footer.
+ *
+ * @example
+ * <Drawer.Header>
+ *   <Drawer.Title>Filters</Drawer.Title>
+ *   <Drawer.Description>12 results</Drawer.Description>
+ * </Drawer.Header>
+ */
+export function DrawerHeader({
+	className,
+	isCloseHidden = false,
+	children,
+	...props
+}: DrawerHeaderProps): ReactElement {
+	const slots = drawerVariants();
+
+	return (
+		<View className={slots.header({ className })} {...props}>
+			<View className={slots.heading()}>{children}</View>
+			{isCloseHidden ? null : <DrawerClose />}
+		</View>
+	);
+}
+DrawerHeader.displayName = "DelacourUI.Drawer.Header";

package/src/components/drawer/drawer-title.tsx

@@ -0,0 +1,35 @@
+import { type ReactElement, useCallback } from "react";
+import { cn } from "../../lib/cn";
+import { Text, type TextPresetProps } from "../text";
+import { type DrawerFocusTarget, useDrawerPart } from "./drawer.context";
+
+/**
+ * A `Text.Header`'s props less `ref`: the drawer holds the title's ref itself,
+ * to move accessibility focus onto it.
+ */
+export type DrawerTitleProps = Omit<TextPresetProps, "ref">;
+
+/**
+ * The drawer's heading.
+ *
+ * *Is* a `Text.Header`. It carries the `nativeID` the panel is labelled by on
+ * Android, and it is where accessibility focus lands once the panel has
+ * finished entering, so a screen reader announces what the drawer is first.
+ *
+ * @example
+ * <Drawer.Title>Menu</Drawer.Title>
+ */
+export function DrawerTitle({ className, ...props }: DrawerTitleProps): ReactElement {
+	const { titleId, titleRef } = useDrawerPart("Drawer.Title");
+	const setTitleRef = useCallback(
+		(node: DrawerFocusTarget | null) => {
+			titleRef.current = node;
+		},
+		[titleRef]
+	);
+
+	return (
+		<Text.Header accessibilityRole="header" className={cn(className)} nativeID={titleId} ref={setTitleRef} {...props} />
+	);
+}
+DrawerTitle.displayName = "DelacourUI.Drawer.Title";

package/src/components/drawer/drawer-trigger.tsx

@@ -0,0 +1,54 @@
+import { type ReactElement, useCallback } from "react";
+import { composeRefs } from "../../lib/compose-refs";
+import { Slot } from "../../lib/slot";
+import { Pressable, type PressableProps } from "../pressable";
+import { useDrawerPart } from "./drawer.context";
+
+export type DrawerTriggerProps = PressableProps;
+
+/**
+ * The control that opens the drawer.
+ *
+ * On its own it is this library's `Pressable`. **`asChild` donates the press
+ * rather than wrapping the child**, the way `BottomSheet.Trigger` does: two tap
+ * gestures in an ancestor/descendant pair are not simultaneous, so a `Button`
+ * wrapped in a pressable trigger would win the touch and the drawer would never
+ * open. With `asChild` the open is chained ahead of the child's own `onPress`.
+ *
+ * The trigger's ref is kept so accessibility focus can return to it when the
+ * drawer closes.
+ *
+ * @example
+ * <Drawer.Trigger asChild>
+ *   <Button accessibilityLabel="Menu" size="icon-md" variant="ghost">
+ *     <Icon icon={IconMenu} />
+ *   </Button>
+ * </Drawer.Trigger>
+ */
+export function DrawerTrigger({ asChild = false, children, onPress, ref, ...props }: DrawerTriggerProps): ReactElement {
+	const { setOpen, triggerRef } = useDrawerPart("Drawer.Trigger");
+
+	const handlePress = useCallback(() => {
+		setOpen(true);
+		onPress?.();
+	}, [setOpen, onPress]);
+
+	const composedRef = composeRefs(ref, (node) => {
+		triggerRef.current = node;
+	});
+
+	if (asChild) {
+		return (
+			<Slot onPress={handlePress} ref={composedRef} {...props}>
+				{children}
+			</Slot>
+		);
+	}
+
+	return (
+		<Pressable accessibilityRole="button" onPress={handlePress} ref={composedRef} {...props}>
+			{children}
+		</Pressable>
+	);
+}
+DrawerTrigger.displayName = "DelacourUI.Drawer.Trigger";