@delacour/react-native-ui 0.1.0-alpha.20261006134908 → 0.1.0-alpha.20261006140500

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.1.0-alpha.20261006134908",
+	"version": "0.1.0-alpha.20261006140500",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -70,6 +70,7 @@
 		"./tabs": "./src/components/tabs/index.ts",
 		"./text": "./src/components/text/index.ts",
 		"./textarea": "./src/components/textarea/index.ts",
+		"./toast": "./src/components/toast/index.ts",
 		"./toggle-button": "./src/components/toggle-button/index.ts",
 		"./expo/navigation-theme": "./src/expo/navigation-theme.tsx",
 		"./hooks/use-calm-motion": "./src/hooks/use-calm-motion.tsx",
@@ -101,8 +102,8 @@
 	},
 	"peerDependencies": {
 		"@central-icons-react-native/round-outlined-radius-1-stroke-1.5": "^1.1",
-		"@delacour/react-native-bottom-sheet": "0.1.0-alpha.20261006134908",
-		"@delacour/react-native-charts": "0.1.0-alpha.20261006134908",
+		"@delacour/react-native-bottom-sheet": "0.1.0-alpha.20261006140500",
+		"@delacour/react-native-charts": "0.1.0-alpha.20261006140500",
 		"@legendapp/list": ">=3.3",
 		"expo-linear-gradient": ">=15",
 		"expo-router": ">=57",

package/src/components/alert/AGENTS.md

@@ -13,7 +13,8 @@ plus `Alert.Indicator`, `Alert.Content`, `Alert.Title`, `Alert.Description`,
 | --- | --- |
 | `index.ts` | → `@delacour/react-native-ui/alert` |
 | `alert.tsx` | Root + the `Object.assign` compound surface |
-| `alert-indicator.tsx` | `Alert.Indicator`, and the status → glyph map |
+| `alert-indicator.tsx` | `Alert.Indicator` |
+| `alert-glyphs.ts` | **Leaf.** `ALERT_GLYPHS`, the status → glyph map — `toast/` imports it |
 | `alert-content.tsx` | `Alert.Content` |
 | `alert-title.tsx` | `Alert.Title` |
 | `alert-description.tsx` | `Alert.Description` |
@@ -66,7 +67,7 @@ plus `Alert.Indicator`, `Alert.Content`, `Alert.Title`, `Alert.Description`,
 - **Glyphs differ in shape, not just colour.** `warning` is a triangle and
   `destructive` a circle, so the two stay apart for anyone who cannot tell amber
   from red. `default` shares `info`'s circle. The map lives in
-  `alert-indicator.tsx` because the glyphs are RN SVG components and
+  `alert-glyphs.ts`, a leaf `Toast` shares, because the glyphs are RN SVG components and
   `alert.variants.ts` must stay importable from `bun test`.
 - **The indicator is hidden from assistive technology.** The title says what
   happened; "image" announced before it adds nothing. Children replace the

package/src/components/alert/alert-glyphs.ts

@@ -0,0 +1,25 @@
+import { IconCircleCheck, IconCircleInfo, IconExclamationCircle, IconExclamationTriangle } from "../../icons/central";
+import type { IconComponent } from "../icon";
+import type { AlertStatus } from "./alert.variants";
+
+/**
+ * The glyph each status draws.
+ *
+ * `warning` and `destructive` differ in shape as well as colour — a triangle
+ * against a circle — so the two stay distinguishable to anyone who cannot tell
+ * amber from red. `default` shares `info`'s glyph: a neutral note is still a
+ * note, and a status of its own would need a meaning it does not have.
+ *
+ * A leaf of its own rather than a constant in `alert-indicator.tsx`: `Toast`
+ * draws the same glyph per status, so the two read as one family, and it may
+ * import a leaf across folders where it may not import a part (package rule 3).
+ * Not in `alert.variants.ts` because the glyphs are React Native SVG components,
+ * and that file must stay importable from `bun test`.
+ */
+export const ALERT_GLYPHS: Record<AlertStatus, IconComponent> = {
+	default: IconCircleInfo,
+	info: IconCircleInfo,
+	success: IconCircleCheck,
+	warning: IconExclamationTriangle,
+	destructive: IconExclamationCircle,
+};

package/src/components/alert/alert-indicator.tsx

@@ -1,28 +1,9 @@
 import type { ReactElement, ReactNode } from "react";
 import { View, type ViewProps } from "react-native";
-import { IconCircleCheck, IconCircleInfo, IconExclamationCircle, IconExclamationTriangle } from "../../icons/central";
-import { Icon, type IconComponent } from "../icon";
+import { Icon } from "../icon";
 import { useAlertPart } from "./alert.context";
-import { type AlertStatus, alertVariants } from "./alert.variants";
-
-/**
- * The glyph each status draws.
- *
- * `warning` and `destructive` differ in shape as well as colour — a triangle
- * against a circle — so the two stay distinguishable to anyone who cannot tell
- * amber from red. `default` shares `info`'s glyph: a neutral note is still a
- * note, and a status of its own would need a meaning it does not have.
- *
- * Lives here rather than in `alert.variants.ts` because the glyphs are React
- * Native SVG components, and that file must stay importable from `bun test`.
- */
-const ALERT_GLYPHS: Record<AlertStatus, IconComponent> = {
-	default: IconCircleInfo,
-	info: IconCircleInfo,
-	success: IconCircleCheck,
-	warning: IconExclamationTriangle,
-	destructive: IconExclamationCircle,
-};
+import { alertVariants } from "./alert.variants";
+import { ALERT_GLYPHS } from "./alert-glyphs";
 
 export type AlertIndicatorProps = ViewProps & {
 	className?: string;

package/src/components/toast/AGENTS.md

@@ -0,0 +1,140 @@
+# Toast
+
+A brief, non-blocking message about something that just happened — "Link copied", "Saved",
+"Upload failed — Retry" — shown from anywhere, including outside React, and gone on its own.
+Anything that must be read or answered is an `Alert` or a `Dialog`, not a toast.
+
+`import { Toast, ToastViewport, toast, useToast } from "@delacour/react-native-ui/toast";`
+
+Three pieces: `toast` (a module-level function that writes to a store), `<ToastViewport />` (mounted
+once, it draws the store) and `<Toast>` (the card, compound, also usable inside a custom `render`).
+
+## Files
+
+| File | What it holds |
+| --- | --- |
+| `index.ts` | → `@delacour/react-native-ui/toast` |
+| `toast.tsx` | `Toast` — the card root, one accessible element; the `Object.assign` names the parts |
+| `toast-indicator.tsx` | `Toast.Indicator` — Alert's glyph for the status (`alert/alert-glyphs.ts`, a leaf) |
+| `toast-content.tsx` | `Toast.Content` |
+| `toast-title.tsx` | `Toast.Title` — coloured from Alert's token |
+| `toast-description.tsx` | `Toast.Description` — muted |
+| `toast-action.tsx` | `Toast.Action` — compact text button; registers itself as the card's `activate` |
+| `toast-close.tsx` | `Toast.Close` — the ✕ |
+| `toast.context.tsx` | **Leaf.** The card's context (`status`, `hide`, `registerAction`) and the viewport's per-item context |
+| `toast.store.ts` | **Pure.** Types, `reduceToasts`, `normalizeToastInput`, `createToastStore`, `createToastApi` |
+| `toast.timer.ts` | **Pure.** The pausable auto-hide clock |
+| `toast.variants.ts` | **Pure.** The slotted `tv()`, the constants and every resolver — duration, stack, depth, stacked height, stagger, drag, release, haptic, announcement |
+| `toast-api.ts` | `toastStore`, `toast`, `useToast` |
+| `toast-viewport.tsx` | `ToastViewport` — two stacks in the overlay `toast` band; insets, keyboard, `AppState`, screen reader |
+| `toast-item.tsx` | One drawn toast: entrance, depth, exit, clock, swipe, announcement, haptic |
+| `*.test.ts` | The store, the clock and the resolvers |
+
+## Design
+
+- **`toast` is a function on a module-level store, not a hook.** A toast's most common caller is
+  not a component — an API client, a mutation's `onError` — so `toast("Saved")` has to work with no
+  provider and no hook. `toast-api.ts` holds the one store; `ToastViewport` and `useToast` read it
+  with `useSyncExternalStore`. The store is `createToastStore()`, so a test (or an app wanting two
+  viewports) can make its own and hand it to `<ToastViewport store>`.
+- **The store is a pure reducer.** `add | update | hide | remove | hideAll`. `hide` only marks a toast
+  `isExiting`, so the viewport can animate it out; `remove` drops it once the exit has run, and is
+  the moment `onHide` fires. An action that changes nothing returns the same array, so nobody is
+  notified. Showing with an existing `id` replaces that toast in place — and revives it if it was
+  leaving.
+- **`revision` is how an update reaches the screen.** Every update bumps it; the item restarts its
+  clock, plays the haptic and announces again on a new revision. That is what makes
+  `toast.promise` one toast: shown loading (a spinner for the glyph, `duration` 0), then updated in
+  place to success or failure with a full duration, a haptic and a fresh announcement. `promise`
+  returns the caller's promise, so `await` still sees the rejection.
+- **`isLoading` is an option, beyond the four statuses.** A loading toast is not a fifth status — it
+  says nothing about how things went — so it is a flag: a `Spinner` replaces the glyph, the ✕ is
+  dropped, and the toast stays until updated unless `duration` says otherwise.
+- **Statuses are Alert's.** `TOAST_STATUSES` *is* `ALERT_STATUSES` and the title reads
+  `ALERT_FOREGROUND_TOKEN` (a test pins each class), and the glyph is Alert's — moved to the
+  `alert-glyphs.ts` leaf for this. A toast and an alert saying the same thing look like one family.
+  `toast.error` sets `destructive`, the token's name.
+- **The card is a `popover` surface with a hairline and no shadow**, like every surface here, capped
+  at 560pt and centred so it stays a toast on a tablet.
+- **Durations: 4000, 6000 with an action, `0` until hidden, ≥10000 under a screen reader.** Reaching
+  for a button takes longer than reading. A timed message must be readable in full before it leaves
+  (WCAG 2.2.1), so `resolveToastDuration` stretches any timed toast to ten seconds while VoiceOver or
+  TalkBack runs; `0` stays `0`.
+- **The clock is data and pauses exactly.** `toast.timer.ts` keeps `{ remaining, startedAt }` and
+  every function takes `now`. The item runs one `setTimeout` per run and pauses — keeping what is
+  left — while the app is not `active` and while a finger is on the toast (the pan's `onBegin`, which
+  fires on touch-down, before the pan activates, so pressing the action pauses too).
+- **Three drawn per edge, the rest queued.** `resolveToastStack` walks newest first; depth counts only
+  toasts that are staying, so when one is hidden the ones behind move up and the next queued toast is
+  drawn immediately while the hidden one fades out at the depth it left. Each older toast sits 8pt
+  further toward its entry edge, `1 − 0.05·depth` scale and `1 − 0.25·depth` opacity, scaled about
+  that edge (`transformOrigin`) so the peek is exactly 8pt. Depth is animated, and linear, so moving
+  up is smooth.
+- **A toast behind takes the front toast's height.** Scaled about the edge, a taller older toast
+  rose past the front card and showed its title above it — seen on the simulator with a one-line
+  toast in front of a two-line one. The front item publishes its card height to a per-stack shared
+  value; `resolveToastStackedHeight` gives the ones behind that height, clipped from the centre side
+  so their edge-side border still peeks, and eases back to their own height as they move to the
+  front. The card is measured inside the clip, so the clip never feeds back into its own size.
+- **Toasts shown in one tick enter 220ms apart.** The store numbers toasts created before a microtask
+  runs (`batchIndex`); `resolveToastEnterDelay` counts from `createdAt`, so a toast that sat in the
+  queue enters as soon as it is drawn rather than paying its stagger late.
+- **Swipe toward the entry edge or sideways dismisses; toward the centre rubber-bands.** Past 40% of
+  the toast's own height or width, or a fling over 800pt/s. Toward the centre it follows the finger
+  to at most 24pt and never dismisses — that is not where a toast goes. The pan activates only past
+  10pt, so a tap still reaches the action and the ✕. Under reduce motion the entrance is a fade; the
+  drag still follows the finger, which is direct manipulation, not decoration.
+- **The viewport is `box-none` all the way down.** Two absolute stacks in `Overlay.Portal
+  layer="toast"` — above every sheet, dialog and popover — and only a card takes a touch, so the app
+  under the viewport stays tappable. It renders nothing while the store is empty, which keeps it out
+  of the overlay registry. The top stack sits `insets.top + 8` down; the bottom one `insets.bottom +
+  8` up and lifts with the keyboard by the part of the keyboard above the home-indicator inset.
+  `offset` adds to either, to clear a tab bar.
+- **One accessible element, never focused.** The card is `accessible`, so VoiceOver and TalkBack read
+  the title and description as one message; the action is its `activate` action (registered by
+  `Toast.Action` under its label) and the ✕ is `escape` plus a custom "Dismiss". `role="alert"` for a
+  failure, a polite live region on Android. On show, and on every revision, the item announces
+  `title. description` — on iOS a warning or failure with `queue: false`, so it cuts in. A toast
+  never moves focus.
+- **Haptics follow the status.** Success, warning and destructive play their notification preset
+  (`playHaptic`, on the UI thread); default and info are silent; `haptic` overrides, `false` silences.
+- **No back button.** The registry's `isTopOverlay` ignores the `toast` band, so Android back goes to
+  whatever is under the toasts.
+- **Custom toasts compose `<Toast>`.** `render(handle)` draws the whole card; a `<Toast>` inside it
+  reads the viewport's per-item context and hides the right toast with no `onHide`. Outside the
+  viewport — a static preview — pass `onHide` yourself.
+
+## Mounting
+
+```tsx
+<DelacourProvider>
+  <OverlayProvider>
+    <BottomSheetProvider>
+      <Stack />
+      <ToastViewport />
+    </BottomSheetProvider>
+  </OverlayProvider>
+</DelacourProvider>
+```
+
+`apps/playground/src/app/_layout.tsx` is the reference mount.
+
+## Testing
+
+`bun test` reaches the reducer, the store's batching, the api (including `promise` both ways), the
+clock and every resolver. Motion, gestures, insets, the keyboard and announcements are verified on a
+simulator through `/toast`.
+
+## Preview capture (not yet shot)
+
+No demo is marked `capture` — the capture tool is unavailable (see `docs/plans/overlays/README.md`).
+The flows are in `.argent/flows/previews/toast/`. When it is back, set:
+
+| Demo | `capture` |
+| --- | --- |
+| `statuses` | `{ flow: "toast/statuses", frame: "device", hero: true }` |
+| `with-action` | `{ flow: "toast/with-action", frame: "device" }` |
+| `placement` | `{ flow: "toast/placement", frame: "device" }` |
+| `promise` | `{ flow: "toast/promise", frame: "device" }` |
+
+`frame: "device"` because a toast draws in a portal, outside the demo's measured stage.

package/src/components/toast/index.ts

@@ -0,0 +1,74 @@
+export { Toast, type ToastProps } from "./toast";
+export {
+	type ToastContextValue,
+	type ToastItemContextValue,
+	useToastContext,
+	useToastItemContext,
+} from "./toast.context";
+export {
+	createToastApi,
+	createToastStore,
+	normalizeToastInput,
+	reduceToasts,
+	type ToastActionOptions,
+	type ToastApi,
+	type ToastCustomItem,
+	type ToastCustomOptions,
+	type ToastHandle,
+	type ToastInput,
+	type ToastItem,
+	type ToastMessageItem,
+	type ToastOptions,
+	type ToastPatch,
+	type ToastPlacement,
+	type ToastPromiseMessages,
+	type ToastState,
+	type ToastStatus,
+	type ToastStore,
+	type ToastStoreAction,
+} from "./toast.store";
+export {
+	createToastTimer,
+	isToastTimerExpired,
+	isToastTimerRunning,
+	pauseToastTimer,
+	resumeToastTimer,
+	startToastTimer,
+	type ToastTimer,
+	toastTimerRemaining,
+} from "./toast.timer";
+export {
+	resolveToastAnnouncement,
+	resolveToastDepthStyle,
+	resolveToastDrag,
+	resolveToastDuration,
+	resolveToastEnterDelay,
+	resolveToastHaptic,
+	resolveToastInterrupts,
+	resolveToastRelease,
+	resolveToastRole,
+	resolveToastStack,
+	resolveToastStackedHeight,
+	TOAST_DURATION,
+	TOAST_ENTER_DISTANCE,
+	TOAST_FOREGROUND_TOKEN,
+	TOAST_PLACEMENTS,
+	TOAST_RUBBER_BAND,
+	TOAST_STACK,
+	TOAST_STAGGER_MS,
+	TOAST_STATUSES,
+	TOAST_SWIPE,
+	type ToastRelease,
+	type ToastStackEntry,
+	type ToastStackInput,
+	type ToastVariantProps,
+	toastVariants,
+} from "./toast.variants";
+export type { ToastActionProps } from "./toast-action";
+export { toast, toastStore, useToast } from "./toast-api";
+export type { ToastCloseProps } from "./toast-close";
+export type { ToastContentProps } from "./toast-content";
+export type { ToastDescriptionProps } from "./toast-description";
+export type { ToastIndicatorProps } from "./toast-indicator";
+export type { ToastTitleProps } from "./toast-title";
+export { ToastViewport, type ToastViewportProps } from "./toast-viewport";

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

@@ -0,0 +1,59 @@
+import { type ReactElement, type ReactNode, useCallback, useEffect } from "react";
+import { Pressable, type PressableProps } from "../pressable";
+import { Text } from "../text";
+import { useToastPart } from "./toast.context";
+import { toastVariants } from "./toast.variants";
+
+export type ToastActionProps = Omit<PressableProps, "asChild" | "busy" | "children"> & {
+	/** The label. A string is set in the action's type; anything else is drawn as given. */
+	children: ReactNode;
+};
+
+/**
+ * The toast's one action — "Undo", "Retry", "View".
+ *
+ * A compact text button in the primary colour. Pressing it runs `onPress` and
+ * then hides the toast: an action answered is a message finished with.
+ *
+ * The toast is one accessible element, so this control is not reachable on its
+ * own with a screen reader. It registers itself with the root instead, which
+ * exposes it as the group's `activate` action under this label.
+ */
+export function ToastAction({
+	accessibilityLabel,
+	children,
+	className,
+	feedback = "fade",
+	onPress,
+	...props
+}: ToastActionProps): ReactElement {
+	const { hide, registerAction } = useToastPart("Toast.Action");
+	const label = accessibilityLabel ?? (typeof children === "string" ? children : "Action");
+
+	const run = useCallback(() => {
+		onPress?.();
+		hide();
+	}, [onPress, hide]);
+
+	useEffect(() => {
+		registerAction({ label, run });
+		return () => registerAction(null);
+	}, [registerAction, label, run]);
+
+	const slots = toastVariants();
+
+	return (
+		<Pressable
+			accessibilityLabel={label}
+			accessibilityRole="button"
+			className={slots.action({ className })}
+			feedback={feedback}
+			hitSlop={6}
+			onPress={run}
+			{...props}
+		>
+			{typeof children === "string" ? <Text className={slots.actionLabel()}>{children}</Text> : children}
+		</Pressable>
+	);
+}
+ToastAction.displayName = "DelacourUI.Toast.Action";

package/src/components/toast/toast-api.ts

@@ -0,0 +1,32 @@
+import { useSyncExternalStore } from "react";
+import { createToastApi, createToastStore, type ToastApi, type ToastState } from "./toast.store";
+
+/**
+ * The one store every `toast()` call writes to and the viewport reads.
+ *
+ * Module scope on purpose: `toast` has to work where no hook can be called —
+ * an API client, a mutation's `onError`, a plain function in a service module.
+ */
+export const toastStore = createToastStore();
+
+/**
+ * Shows a toast from anywhere, inside React or out.
+ *
+ * Call it with a title, with options, or with a `render` for a custom card.
+ * `toast.success` / `.info` / `.warning` / `.error` set the status;
+ * `toast.update`, `.hide` and `.hideAll` act on what is shown; `toast.promise`
+ * shows one toast that turns into the success or the failure in place.
+ * Nothing appears until a `<ToastViewport />` is mounted.
+ *
+ * @example
+ * toast("Link copied");
+ * toast.error("Upload failed", { action: { label: "Retry", onPress: retry } });
+ * await toast.promise(save(), { loading: "Saving…", success: "Saved", error: "Could not save" });
+ */
+export const toast: ToastApi = createToastApi(toastStore);
+
+/** `toast`, and every toast in the store — shown, queued and leaving — oldest first. */
+export function useToast(): { toast: ToastApi; toasts: ToastState } {
+	const toasts = useSyncExternalStore(toastStore.subscribe, toastStore.getSnapshot, toastStore.getSnapshot);
+	return { toast, toasts };
+}

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

@@ -0,0 +1,44 @@
+import type { ReactElement } from "react";
+import { IconCrossSmall } from "../../icons/central";
+import { Icon } from "../icon";
+import { Pressable, type PressableProps } from "../pressable";
+import { useToastPart } from "./toast.context";
+import { toastVariants } from "./toast.variants";
+
+export type ToastCloseProps = Omit<PressableProps, "asChild" | "busy" | "children">;
+
+/**
+ * A trailing ✕ that hides the toast, then calls the caller's `onPress`.
+ *
+ * Muted rather than the status colour — it is about the toast, not part of
+ * what it says — and pressed with `fade`, since a spring on a glyph this small
+ * reads as a jitter. `hitSlop` lifts it to the 44-point target. A screen reader
+ * reaches the same thing through the toast's `escape` and "Dismiss" actions.
+ */
+export function ToastClose({
+	accessibilityLabel = "Dismiss",
+	className,
+	feedback = "fade",
+	hitSlop = 12,
+	onPress,
+	...props
+}: ToastCloseProps): ReactElement {
+	const { hide } = useToastPart("Toast.Close");
+	return (
+		<Pressable
+			accessibilityLabel={accessibilityLabel}
+			accessibilityRole="button"
+			className={toastVariants().close({ className })}
+			feedback={feedback}
+			hitSlop={hitSlop}
+			onPress={() => {
+				hide();
+				onPress?.();
+			}}
+			{...props}
+		>
+			<Icon color="muted-foreground" icon={IconCrossSmall} />
+		</Pressable>
+	);
+}
+ToastClose.displayName = "DelacourUI.Toast.Close";

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

@@ -0,0 +1,11 @@
+import type { ReactElement } from "react";
+import { View, type ViewProps } from "react-native";
+import { toastVariants } from "./toast.variants";
+
+export type ToastContentProps = ViewProps & { className?: string };
+
+/** The column holding the title and the description; takes the width the glyph and the controls leave. */
+export function ToastContent({ className, ...props }: ToastContentProps): ReactElement {
+	return <View className={toastVariants().content({ className })} {...props} />;
+}
+ToastContent.displayName = "DelacourUI.Toast.Content";

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

@@ -0,0 +1,11 @@
+import type { ReactElement } from "react";
+import { Text, type TextPresetProps } from "../text";
+import { toastVariants } from "./toast.variants";
+
+export type ToastDescriptionProps = TextPresetProps;
+
+/** A line under the title, always muted, so a long explanation never shouts. */
+export function ToastDescription({ className, ...props }: ToastDescriptionProps): ReactElement {
+	return <Text className={toastVariants().description({ className })} {...props} />;
+}
+ToastDescription.displayName = "DelacourUI.Toast.Description";

package/src/components/toast/toast-indicator.tsx

@@ -0,0 +1,34 @@
+import type { ReactElement, ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+import { ALERT_GLYPHS } from "../alert/alert-glyphs";
+import { Icon } from "../icon";
+import { useToastPart } from "./toast.context";
+import { toastVariants } from "./toast.variants";
+
+export type ToastIndicatorProps = ViewProps & {
+	className?: string;
+	/** Replaces the status glyph — a `Spinner` while loading, an `Icon` of your own. Inherits the toast's icon size and colour. */
+	children?: ReactNode;
+};
+
+/**
+ * The toast's leading glyph — Alert's glyph for the same status, in Alert's
+ * colour for it, so a toast and an alert saying the same thing look alike.
+ *
+ * As tall as the title's line, so the glyph stays level with the first line.
+ * Hidden from assistive technology: the title says what happened.
+ */
+export function ToastIndicator({ className, children, ...props }: ToastIndicatorProps): ReactElement {
+	const { status } = useToastPart("Toast.Indicator");
+	return (
+		<View
+			accessibilityElementsHidden
+			className={toastVariants().indicator({ className })}
+			importantForAccessibility="no-hide-descendants"
+			{...props}
+		>
+			{children ?? <Icon icon={ALERT_GLYPHS[status]} />}
+		</View>
+	);
+}
+ToastIndicator.displayName = "DelacourUI.Toast.Indicator";