@delacour/react-native-ui 0.1.0-alpha.20261007125731 → 0.1.0-alpha.20261009010050

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.1.0-alpha.20261007125731",
+	"version": "0.1.0-alpha.20261009010050",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -48,6 +48,7 @@
 		"./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",
@@ -68,6 +69,7 @@
 		"./skeleton": "./src/components/skeleton/index.ts",
 		"./slider": "./src/components/slider/index.ts",
 		"./spinner": "./src/components/spinner/index.ts",
+		"./stack-card": "./src/components/stack-card/index.ts",
 		"./steps": "./src/components/steps/index.ts",
 		"./surface": "./src/components/surface/index.ts",
 		"./swipe": "./src/components/swipe/index.ts",
@@ -108,8 +110,8 @@
 	},
 	"peerDependencies": {
 		"@central-icons-react-native/round-outlined-radius-1-stroke-1.5": "^1.1",
-		"@delacour/react-native-bottom-sheet": "0.1.0-alpha.20261007125731",
-		"@delacour/react-native-charts": "0.1.0-alpha.20261007125731",
+		"@delacour/react-native-bottom-sheet": "0.1.0-alpha.20261009010050",
+		"@delacour/react-native-charts": "0.1.0-alpha.20261009010050",
 		"@legendapp/list": ">=3.3",
 		"expo-linear-gradient": ">=15",
 		"expo-router": ">=57",

package/src/components/feedback/AGENTS.md

@@ -0,0 +1,95 @@
+# Feedback
+
+A dialog for writing: "What should we fix first?", a bug report, a one-question survey. It is a
+[`Dialog`](../dialog/AGENTS.md) whose text field sits in a **recessed well** that says "type here",
+with the actions on the band around it. Compound root plus `Feedback.Trigger`, `Feedback.Content`,
+`Feedback.Panel`, `Feedback.Title`, `Feedback.Close`, `Feedback.Field`, `Feedback.Footer`,
+`Feedback.Action`, `Feedback.Cancel` and `Feedback.Submit`, and `useFeedback()`.
+
+`import { Feedback } from "@delacour/react-native-ui/feedback";`
+
+Not for confirmations or warnings — those are a `Dialog`. Like every overlay it draws through
+`Overlay.Portal`, so the app mounts `OverlayProvider` once at its root.
+
+## Files
+
+| File | What it holds |
+| --- | --- |
+| `index.ts` | → `@delacour/react-native-ui/feedback` |
+| `feedback.tsx` | Root — the open state, the draft, the send state — wrapping a `Dialog`, and the `Object.assign` surface |
+| `feedback.context.tsx` | **Leaf.** `FeedbackProvider`, `useFeedback()`, `useFeedbackContext()`, `useFeedbackPart()` |
+| `feedback-trigger.tsx` | `Feedback.Trigger` — `Dialog.Trigger` |
+| `feedback-content.tsx` | `Feedback.Content` — `Dialog.Content` on the muted band, tighter padding |
+| `feedback-panel.tsx` | `Feedback.Panel` — the well, in a clip that eases to its measured height |
+| `feedback-title.tsx` | `Feedback.Title` — `Dialog.Title`; publishes a string title as the field's label |
+| `feedback-close.tsx` | `Feedback.Close` — `Dialog.Close`, in the well's corner |
+| `feedback-field.tsx` | `Feedback.Field` — a bare multiline `TextInput` bound to the draft |
+| `feedback-footer.tsx` | `Feedback.Footer` |
+| `feedback-action.tsx` | `Feedback.Action` — a `secondary` `Button` for custom actions |
+| `feedback-cancel.tsx` | `Feedback.Cancel` — closes, keeps the draft |
+| `feedback-submit.tsx` | `Feedback.Submit` — the gate, the trimmed value, the wait on a promise |
+| `feedback.variants.ts` | The slotted `tv()`, the row and motion constants, `canSubmitFeedback` and the field-height resolvers — no RN imports |
+| `feedback.variants.test.ts` | Slots, tokens in both themes, the submit gate, the field heights |
+
+## Design
+
+- **Everything a dialog does is Dialog's.** `Feedback` renders a `Dialog` and its parts *are*
+  Dialog's parts with classes merged over them — open state, portal, scrim, motion, the `modal`
+  band, the back button, the escape gesture, focus on open and return, and the keyboard lift that
+  keeps the footer above the keyboard. Nothing is restated, so a fix to Dialog is a fix here. The
+  import is `../dialog`: Dialog never imports Feedback, so there is no cycle to route around.
+- **The shell is the band; the panel is the well.** `Feedback.Content` merges `bg-muted` and `p-2`
+  over Dialog's `bg-popover` and `p-5` through the same `tv` merge, so the corner, hairline and
+  width cap stay Dialog's. `Feedback.Panel` is `bg-background` with `rounded-md` — one step down
+  the corner ramp from the card it sits in, so the two read as nested — and a hairline. The well's
+  page colour against the band's muted one is what says "type here" without a field border.
+- **The field has no box.** `Feedback.Field` is a raw `TextInput`, not an `Input`: the well is
+  its box, and an `Input` would draw a second border inside the first. It restates `font-sans` for
+  `Input`'s reason (a `TextInput` inherits nothing), sets `text-input-md` with paragraph leading
+  (`leading-6`, `FEEDBACK_FIELD_LINE_HEIGHT`, pinned by a test), and takes `Input`'s `accent-*`
+  placeholder, caret and selection classes from `input.variants` — a leaf, so no cycle.
+- **The field is floored at `minRows` and capped at `maxRows`.** Six rows and twelve by default,
+  as a style (`resolveFeedbackFieldHeightStyle`) because a runtime number cannot be a class.
+  Between the two React Native's multiline `TextInput` sizes itself. `maxRows` is not in the
+  original spec: without a cap a long message grows the card until Dialog's lift, which keeps the
+  title on screen first, has to give up the footer to the keyboard.
+- **The draft lives on the root, above `Dialog.Content`.** Content unmounts when the exit animation
+  ends; the root does not, so an uncontrolled draft survives a close and a reopen. Cancel, Close,
+  the scrim and back all keep it — a long message put down for a moment must not be thrown away.
+  `useFeedback().clear()` is the one way to empty it.
+- **Submit never closes.** `canSubmitFeedback` gates it (empty and whitespace are empty;
+  `canSubmitEmpty` lets an empty one through for chips or a rating; disabled outranks both), and
+  `onSubmit` gets the trimmed text. A returned promise turns on the button's loading state and
+  makes the field read-only until it settles — and the dialog is still open, so a failure can be
+  shown in the well with the draft intact. The caller closes and clears on success. A rejection is
+  not swallowed: handle failures inside `onSubmit`, or the app's unhandled-rejection reporting sees
+  it, which is better than a send that failed silently.
+- **The well eases between heights; the shell never jumps.** A multi-step flow (rating → text →
+  thanks) is the caller swapping the panel's and footer's children. `Feedback.Panel` measures the
+  well with `onLayout` and animates a clip around it to that height over `FEEDBACK_PANEL_RESIZE_MS`
+  (200ms). The spec named a Reanimated `LinearTransition` on the panel; that animates the panel's
+  frame inside a shell that has already snapped to its final size and re-centred, which is exactly
+  the jump to avoid. A real height changing on every frame moves the shell through ordinary layout
+  and keeps it centred — Accordion's reasoning for its own panel. The first layout lands without
+  animating, and under reduce motion every change does.
+- **The field's label is the title.** `Feedback.Title` publishes its children to the root when
+  they are a plain string, and `Feedback.Field` uses that as its default `accessibilityLabel`, so
+  a screen reader announces the question rather than only the placeholder. A non-string title
+  publishes nothing; pass `accessibilityLabel` then.
+- **Close sits in the well, not the shell.** `Feedback.Close` is `Dialog.Close` with its slot
+  re-pinned to the well's corner (`top-3 right-3`, against the panel's `p-4`); the title keeps
+  Dialog's `pr-8` clearance.
+- **No blur backdrop.** As for every overlay: frosted scrims need `expo-blur`, not a peer.
+
+## Testing
+
+`bun test` reaches `feedbackVariants`, the tokens in both themes, `canSubmitFeedback` and the
+field-height resolvers. Opening, the submit gate, the async send, the draft across close and
+reopen, the keyboard, the multi-step resize and every dismissal path are verified on a simulator
+through `/feedback` in the playground.
+
+Preview media is held back with the rest of the overlays (see `docs/plans/overlays/README.md`).
+When a capture tool is back, re-add `capture` with these settings and run
+`bun run previews -- -- --only feedback`: `basic` `{ flow: "feedback/basic", frame: "device", hero: true }`,
+and `sending`, `multi-step` `{ flow: "feedback/<id>", frame: "device" }`. The flows are in
+`.argent/flows/previews/feedback/`.

package/src/components/feedback/feedback-action.tsx

@@ -0,0 +1,16 @@
+import type { ReactElement } from "react";
+import { Button, type ButtonProps } from "../button";
+
+export type FeedbackActionProps = ButtonProps;
+
+/**
+ * A custom footer action — "Skip", "Back", "Attach screenshot" — as a
+ * `secondary` `Button`. Pass `variant` to change it.
+ *
+ * @example
+ * <Feedback.Action onPress={back}>Back</Feedback.Action>
+ */
+export function FeedbackAction({ variant = "secondary", ...props }: FeedbackActionProps): ReactElement {
+	return <Button variant={variant} {...props} />;
+}
+FeedbackAction.displayName = "DelacourUI.Feedback.Action";

package/src/components/feedback/feedback-cancel.tsx

@@ -0,0 +1,34 @@
+import { type ReactElement, useCallback } from "react";
+import { Button, type ButtonProps } from "../button";
+import { useFeedbackPart } from "./feedback.context";
+
+export type FeedbackCancelProps = ButtonProps;
+
+/**
+ * Closes the dialog and keeps the draft — a `secondary` `Button` labelled
+ * "Cancel" unless given children. Clearing on cancel would throw away a long
+ * message the user only meant to put down for a moment.
+ *
+ * @example
+ * <Feedback.Cancel />
+ */
+export function FeedbackCancel({
+	variant = "secondary",
+	children = "Cancel",
+	onPress,
+	...props
+}: FeedbackCancelProps): ReactElement {
+	const { close } = useFeedbackPart("Feedback.Cancel");
+
+	const handlePress = useCallback(() => {
+		close();
+		onPress?.();
+	}, [close, onPress]);
+
+	return (
+		<Button onPress={handlePress} variant={variant} {...props}>
+			{children}
+		</Button>
+	);
+}
+FeedbackCancel.displayName = "DelacourUI.Feedback.Cancel";

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

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react";
+import { Dialog, type DialogCloseProps } from "../dialog";
+import { feedbackVariants } from "./feedback.variants";
+
+export type FeedbackCloseProps = DialogCloseProps;
+
+/**
+ * The ✕ in the well's top-right corner — `Dialog.Close`, positioned against
+ * the panel rather than the shell. `Feedback.Title`'s `pr-8` reserves its
+ * clearance. Labelled `"Close"`; the draft is kept.
+ *
+ * With `asChild` it donates the close to its child, as `Dialog.Close` does.
+ *
+ * @example
+ * <Feedback.Close />
+ */
+export function FeedbackClose(props: FeedbackCloseProps): ReactElement {
+	if (props.asChild) return <Dialog.Close {...props} />;
+	return <Dialog.Close {...props} className={feedbackVariants().close({ className: props.className })} />;
+}
+FeedbackClose.displayName = "DelacourUI.Feedback.Close";

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

@@ -0,0 +1,24 @@
+import type { ReactElement } from "react";
+import { Dialog, type DialogContentProps } from "../dialog";
+import { feedbackVariants } from "./feedback.variants";
+
+export type FeedbackContentProps = DialogContentProps;
+
+/**
+ * The shell — a `Dialog.Content` on the muted band.
+ *
+ * Portal, scrim, motion, keyboard lift, back button, escape and focus are all
+ * Dialog's. This only swaps the card's fill for `bg-muted` and tightens its
+ * padding, so the `Feedback.Panel` inside reads as a well sunk into it and the
+ * footer's actions sit on the band around it.
+ *
+ * @example
+ * <Feedback.Content>
+ *   <Feedback.Panel>…</Feedback.Panel>
+ *   <Feedback.Footer>…</Feedback.Footer>
+ * </Feedback.Content>
+ */
+export function FeedbackContent({ className, ...props }: FeedbackContentProps): ReactElement {
+	return <Dialog.Content className={feedbackVariants().content({ className })} {...props} />;
+}
+FeedbackContent.displayName = "DelacourUI.Feedback.Content";

package/src/components/feedback/feedback-field.tsx

@@ -0,0 +1,70 @@
+import { type ReactElement, useCallback } from "react";
+import { TextInput, type TextInputProps } from "react-native";
+import { resolvePlaceholderAccentClass, resolveSelectionAccentClass } from "../input/input.variants";
+import { useFeedbackPart } from "./feedback.context";
+import { feedbackVariants, resolveFeedbackFieldHeightStyle } from "./feedback.variants";
+
+export type FeedbackFieldProps = Omit<TextInputProps, "value" | "onChangeText" | "multiline"> & {
+	className?: string;
+	/** Rows before it grows. Default 6. */
+	minRows?: number;
+	/** Rows it grows to before it scrolls. Default 12. */
+	maxRows?: number;
+	/** Read-only — while sending, say. A send in flight makes it read-only on its own. */
+	isDisabled?: boolean;
+};
+
+/**
+ * Where the message is written: a bare multiline `TextInput` with no box of
+ * its own, because the well around it is the box.
+ *
+ * The draft is the root's — `value` and `onChangeText` are withheld — so it
+ * survives the dialog closing and reopening, and `useFeedback().clear()` is
+ * the one way to empty it. It is floored at `minRows` and grows to `maxRows`
+ * before it scrolls (`resolveFeedbackFieldHeightStyle`), as a style, since a
+ * runtime number cannot be a Tailwind class.
+ *
+ * While a promise from `Feedback.Submit` is in flight it is read-only, so what
+ * is being sent is what stays on screen. Its label defaults to the title's
+ * text when the title is a plain string.
+ *
+ * Placeholder, caret and selection take `Input`'s `accent-*` defaults.
+ *
+ * @example
+ * <Feedback.Field placeholder="Tell us what got in your way" />
+ */
+export function FeedbackField({
+	className,
+	minRows,
+	maxRows,
+	isDisabled = false,
+	accessibilityLabel,
+	editable,
+	style,
+	...props
+}: FeedbackFieldProps): ReactElement {
+	const { value, setValue, isSending, titleText } = useFeedbackPart("Feedback.Field");
+	const isReadOnly = isDisabled || isSending;
+	const selectionAccent = resolveSelectionAccentClass({});
+
+	const handleChangeText = useCallback((text: string) => setValue(text), [setValue]);
+
+	return (
+		<TextInput
+			accessibilityLabel={accessibilityLabel ?? titleText}
+			accessibilityState={{ disabled: isReadOnly }}
+			className={feedbackVariants().field({ className })}
+			cursorColorClassName={selectionAccent}
+			placeholderTextColorClassName={resolvePlaceholderAccentClass()}
+			selectionColorClassName={selectionAccent}
+			style={[resolveFeedbackFieldHeightStyle({ maxRows, minRows }), style]}
+			textAlignVertical="top"
+			{...props}
+			editable={isReadOnly ? false : editable}
+			multiline
+			onChangeText={handleChangeText}
+			value={value}
+		/>
+	);
+}
+FeedbackField.displayName = "DelacourUI.Feedback.Field";

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

@@ -0,0 +1,21 @@
+import type { ReactElement } from "react";
+import { View, type ViewProps } from "react-native";
+import { feedbackVariants } from "./feedback.variants";
+
+export type FeedbackFooterProps = ViewProps & { className?: string };
+
+/**
+ * The actions, on the band under the well — an end-aligned row, inset less
+ * than the well so the buttons line up with the shell's edge rather than the
+ * well's text.
+ *
+ * @example
+ * <Feedback.Footer>
+ *   <Feedback.Cancel />
+ *   <Feedback.Submit onSubmit={send} />
+ * </Feedback.Footer>
+ */
+export function FeedbackFooter({ className, ...props }: FeedbackFooterProps): ReactElement {
+	return <View className={feedbackVariants().footer({ className })} {...props} />;
+}
+FeedbackFooter.displayName = "DelacourUI.Feedback.Footer";

package/src/components/feedback/feedback-panel.tsx

@@ -0,0 +1,54 @@
+import { type ReactElement, useCallback } from "react";
+import { type LayoutChangeEvent, View, type ViewProps } from "react-native";
+import Animated, { useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { FEEDBACK_PANEL_RESIZE_MS, feedbackVariants } from "./feedback.variants";
+
+export type FeedbackPanelProps = ViewProps & { className?: string };
+
+/** No height measured yet: the clip wraps its content until the first layout. */
+const UNMEASURED = -1;
+
+/**
+ * The recessed well the title, the close and the field sit in.
+ *
+ * **Its height is measured and animated, never laid out.** The well is drawn
+ * inside a clip whose height follows the well's own `onLayout` on a short
+ * timing, so when a multi-step flow swaps the panel's children — a rating, then
+ * a message, then thanks — the clip eases to the new height. The shell grows
+ * with it through ordinary layout and stays centred on every frame, so it never
+ * jumps; a layout transition on the panel alone would animate the panel inside
+ * a shell that had already snapped to its final size. The first layout lands
+ * without animating, and under reduce motion every change does.
+ *
+ * @example
+ * <Feedback.Panel>
+ *   <Feedback.Title>What should we fix first?</Feedback.Title>
+ *   <Feedback.Close />
+ *   <Feedback.Field placeholder="Tell us what got in your way" />
+ * </Feedback.Panel>
+ */
+export function FeedbackPanel({ className, onLayout, ...props }: FeedbackPanelProps): ReactElement {
+	const isReduced = useReducedMotion();
+	const height = useSharedValue(UNMEASURED);
+
+	const handleLayout = useCallback(
+		(event: LayoutChangeEvent) => {
+			const next = event.nativeEvent.layout.height;
+			height.value =
+				height.value === UNMEASURED || isReduced ? next : withTiming(next, { duration: FEEDBACK_PANEL_RESIZE_MS });
+			onLayout?.(event);
+		},
+		[height, isReduced, onLayout]
+	);
+
+	const clipStyle = useAnimatedStyle(() => (height.value === UNMEASURED ? {} : { height: height.value }));
+
+	const slots = feedbackVariants();
+
+	return (
+		<Animated.View className={slots.clip()} style={clipStyle}>
+			<View className={slots.panel({ className })} onLayout={handleLayout} {...props} />
+		</Animated.View>
+	);
+}
+FeedbackPanel.displayName = "DelacourUI.Feedback.Panel";

package/src/components/feedback/feedback-submit.tsx

@@ -0,0 +1,74 @@
+import { type ReactElement, useCallback } from "react";
+import { Button, type ButtonProps } from "../button";
+import { useFeedbackPart } from "./feedback.context";
+import { canSubmitFeedback } from "./feedback.variants";
+
+export type FeedbackSubmitProps = Omit<ButtonProps, "onPress"> & {
+	/** Receives the trimmed message. Does NOT close — sending has to finish first. */
+	onSubmit: (value: string) => void | Promise<void>;
+	/** Allow submitting an empty message (e.g. when chips were picked). Default false. */
+	canSubmitEmpty?: boolean;
+};
+
+/** Whether a value is a promise, without trusting `instanceof` across realms. */
+function isPromiseLike(value: unknown): value is PromiseLike<unknown> {
+	return typeof value === "object" && value !== null && typeof (value as PromiseLike<unknown>).then === "function";
+}
+
+/**
+ * Sends the message — a primary `Button` labelled "Send" unless given children.
+ *
+ * Disabled while `canSubmitFeedback` says no: an empty or whitespace draft,
+ * unless `canSubmitEmpty`. `onSubmit` receives the trimmed text.
+ *
+ * **It never closes the dialog.** When `onSubmit` returns a promise the button
+ * shows its loading state and the field turns read-only until the promise
+ * settles, and then the dialog is still open — so a failure can be shown in
+ * the well with the draft intact. Close and clear from `onSubmit` on success,
+ * through `useFeedback()` or controlled state. Handle a failure inside
+ * `onSubmit`: a rejection is not caught here, so it still reaches the app's
+ * unhandled-rejection reporting rather than vanishing.
+ *
+ * @example
+ * <Feedback.Submit
+ *   onSubmit={async (message) => {
+ *     await send(message);
+ *     clear();
+ *     close();
+ *   }}
+ * />
+ */
+export function FeedbackSubmit({
+	onSubmit,
+	canSubmitEmpty = false,
+	isDisabled = false,
+	isLoading = false,
+	children = "Send",
+	...props
+}: FeedbackSubmitProps): ReactElement {
+	const { value, isSending, setSending } = useFeedbackPart("Feedback.Submit");
+	const canSubmit = canSubmitFeedback({ canSubmitEmpty, isDisabled, value });
+
+	const handlePress = useCallback(() => {
+		if (!canSubmit || isSending) return;
+		const result = onSubmit(value.trim());
+		if (!isPromiseLike(result)) return;
+
+		setSending(true);
+		const settle = () => setSending(false);
+		void Promise.resolve(result).finally(settle);
+	}, [canSubmit, isSending, onSubmit, setSending, value]);
+
+	return (
+		<Button
+			isDisabled={!canSubmit}
+			isLoading={isLoading || isSending}
+			onPress={handlePress}
+			variant="primary"
+			{...props}
+		>
+			{children}
+		</Button>
+	);
+}
+FeedbackSubmit.displayName = "DelacourUI.Feedback.Submit";

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

@@ -0,0 +1,34 @@
+import { type ReactElement, useEffect } from "react";
+import { Dialog, type DialogTitleProps } from "../dialog";
+import { useFeedbackPart } from "./feedback.context";
+import { feedbackVariants } from "./feedback.variants";
+
+export type FeedbackTitleProps = DialogTitleProps;
+
+/**
+ * The question the dialog asks — a `Dialog.Title`, inside the well.
+ *
+ * It is what the dialog is labelled by and where accessibility focus lands on
+ * open, exactly as in a `Dialog`. When its children are a plain string, that
+ * string also becomes `Feedback.Field`'s default `accessibilityLabel`, so the
+ * field announces the question rather than only its placeholder.
+ *
+ * @example
+ * <Feedback.Title>What should we fix first?</Feedback.Title>
+ */
+export function FeedbackTitle({ className, children, ...props }: FeedbackTitleProps): ReactElement {
+	const { setTitleText } = useFeedbackPart("Feedback.Title");
+	const text = typeof children === "string" ? children : undefined;
+
+	useEffect(() => {
+		setTitleText(text);
+		return () => setTitleText(undefined);
+	}, [setTitleText, text]);
+
+	return (
+		<Dialog.Title className={feedbackVariants().title({ className })} {...props}>
+			{children}
+		</Dialog.Title>
+	);
+}
+FeedbackTitle.displayName = "DelacourUI.Feedback.Title";

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

@@ -0,0 +1,20 @@
+import type { ReactElement } from "react";
+import { Dialog, type DialogTriggerProps } from "../dialog";
+
+export type FeedbackTriggerProps = DialogTriggerProps;
+
+/**
+ * The control that opens the feedback dialog — `Dialog.Trigger`, unchanged.
+ *
+ * `asChild` donates the open to a `Button` rather than wrapping it, for the
+ * reason `Dialog.Trigger` gives: two tap gestures nested are not simultaneous.
+ *
+ * @example
+ * <Feedback.Trigger asChild>
+ *   <Button variant="secondary">Give feedback</Button>
+ * </Feedback.Trigger>
+ */
+export function FeedbackTrigger(props: FeedbackTriggerProps): ReactElement {
+	return <Dialog.Trigger {...props} />;
+}
+FeedbackTrigger.displayName = "DelacourUI.Feedback.Trigger";

package/src/components/feedback/feedback.context.tsx

@@ -0,0 +1,73 @@
+import { createContext, type ReactElement, type ReactNode, use } from "react";
+
+export type FeedbackContextValue = {
+	/** The draft as typed — untrimmed. */
+	value: string;
+	/** Replaces the draft. Reports through `onValueChange`. */
+	setValue: (value: string) => void;
+	/** Whether the dialog is open. */
+	isOpen: boolean;
+	/** Closes the dialog. The draft is kept. */
+	close: () => void;
+	/** Empties the draft — after a successful send, say. */
+	clear: () => void;
+};
+
+/** What the parts share that a caller has no use for. */
+export type FeedbackInternalValue = FeedbackContextValue & {
+	/** Whether a promise `onSubmit` returned is still in flight. */
+	isSending: boolean;
+	setSending: (isSending: boolean) => void;
+	/** The title's text when it is a plain string — the field's default label. */
+	titleText: string | undefined;
+	setTitleText: (text: string | undefined) => void;
+};
+
+const FeedbackContext = createContext<FeedbackInternalValue | null>(null);
+
+/**
+ * Supplies the feedback dialog's draft and send state to its parts.
+ *
+ * Its own module, importing nothing but React, so a part can read it without
+ * importing `./feedback` — that import would close a cycle, and Metro serves a
+ * partially initialised module for one.
+ */
+export function FeedbackProvider({
+	value,
+	children,
+}: {
+	value: FeedbackInternalValue;
+	children: ReactNode;
+}): ReactElement {
+	return <FeedbackContext value={value}>{children}</FeedbackContext>;
+}
+FeedbackProvider.displayName = "DelacourUI.Feedback.Provider";
+
+/** The enclosing feedback dialog's context, or null outside a `<Feedback>`. */
+export function useFeedbackContext(): FeedbackContextValue | null {
+	return use(FeedbackContext);
+}
+
+/**
+ * Reads the enclosing feedback dialog's draft, its setters and its open state.
+ *
+ * Lets a custom child — a row of chips, a rating step — read or replace the
+ * draft, and lets an `onSubmit` close and clear once the send has gone through.
+ * Throws outside a `<Feedback>`.
+ */
+export function useFeedback(): FeedbackContextValue {
+	const context = use(FeedbackContext);
+	if (!context) {
+		throw new Error("useFeedback must be called inside a <Feedback>.");
+	}
+	return context;
+}
+
+/** The full context, for a part that cannot work without one. Internal. */
+export function useFeedbackPart(component: string): FeedbackInternalValue {
+	const context = use(FeedbackContext);
+	if (!context) {
+		throw new Error(`${component} must be rendered inside a <Feedback>.`);
+	}
+	return context;
+}