blend-native 0.0.1-beta.0

package/src/overlay/toast/ToastOutlet.tsx

@@ -0,0 +1,127 @@
+import { useCallback, useContext, useEffect, useSyncExternalStore } from 'react'
+import { StyleSheet, View } from 'react-native'
+import Animated, {
+    Easing,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated'
+import { Portal } from '../portal'
+import { SafeAreaInsetsContext } from '../safeAreaInsets'
+import {
+    MOTION_DURATION,
+    MOTION_EASING,
+    MOTION_PRESETS,
+} from '../../motion/motion'
+import { useReduceMotion } from '../../motion/useReduceMotion'
+import { useLiveRegionAnnounce } from '../../a11y/useLiveRegion'
+import {
+    dismissToast,
+    getToasts,
+    getVisibleToasts,
+    subscribeToasts,
+    type ToastEntry,
+} from './toastStore'
+
+/**
+ * The toast rendering surface, mounted once by `BlendNativeProvider`.
+ *
+ * Subscribes to the store and renders the newest `MAX_VISIBLE_TOASTS`
+ * bottom-stacked above everything through a `Portal`. Each toast slides up
+ * on entry (a fade under reduce-motion), owns its auto-dismiss timer, and
+ * announces itself to assistive tech when asked.
+ */
+export function ToastOutlet() {
+    const toasts = useSyncExternalStore(subscribeToasts, getToasts, getToasts)
+    const insets = useContext(SafeAreaInsetsContext)
+
+    const visible = getVisibleToasts(toasts)
+    if (visible.length === 0) return null
+
+    return (
+        <Portal>
+            <View
+                style={[
+                    styles.stack,
+                    { paddingBottom: (insets?.bottom ?? 0) + 16 },
+                ]}
+                pointerEvents="box-none"
+                testID="blend-toast-outlet"
+            >
+                {visible.map((toast) => (
+                    <ToastItem key={toast.id} toast={toast} />
+                ))}
+            </View>
+        </Portal>
+    )
+}
+
+ToastOutlet.displayName = 'ToastOutlet'
+
+function ToastItem({ toast }: { toast: ToastEntry }) {
+    const reduceMotion = useReduceMotion()
+    const progress = useSharedValue(0)
+
+    const dismiss = useCallback(() => dismissToast(toast.id), [toast.id])
+
+    // Enter animation once per toast id.
+    useEffect(() => {
+        progress.value = withTiming(1, {
+            duration: MOTION_PRESETS.slideUp.duration,
+            easing: Easing.bezier(...MOTION_EASING.decelerate),
+        })
+    }, [progress])
+
+    // Auto-dismiss owns its timer; content replacement (same id) restarts it.
+    useEffect(() => {
+        if (toast.duration === null) return
+        const timer = setTimeout(dismiss, toast.duration)
+        return () => clearTimeout(timer)
+    }, [toast.id, toast.duration, toast.content, dismiss])
+
+    useLiveRegionAnnounce(toast.announcement, Boolean(toast.announcement))
+
+    const animatedStyle = useAnimatedStyle(() => {
+        if (reduceMotion) {
+            return { opacity: progress.value, transform: [{ translateY: 0 }] }
+        }
+        return {
+            opacity: progress.value,
+            transform: [
+                {
+                    translateY:
+                        (1 - progress.value) *
+                        (MOTION_PRESETS.slideUp.from.translateY ?? 16),
+                },
+            ],
+        }
+    }, [reduceMotion])
+
+    return (
+        <Animated.View
+            style={animatedStyle}
+            accessibilityLiveRegion={toast.announcement ? 'polite' : 'none'}
+        >
+            {typeof toast.content === 'function'
+                ? toast.content(dismiss)
+                : toast.content}
+        </Animated.View>
+    )
+}
+
+/** Exit duration is not modelled yet — dismissal unmounts immediately;
+ * SnackbarV2 will own richer exit choreography when it lands. Kept simple
+ * so the host stays predictable under the synchronous test mock. */
+export const TOAST_EXIT_DURATION = MOTION_DURATION.fast
+
+const styles = StyleSheet.create({
+    stack: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        bottom: 0,
+        alignItems: 'center',
+        gap: 8,
+        paddingHorizontal: 16,
+    },
+})

package/src/overlay/toast/toastStore.ts

@@ -0,0 +1,96 @@
+import type React from 'react'
+
+/**
+ * Toast queue — the sonner role, minus the styling.
+ *
+ * A module-level store with an imperative `showToast`/`dismissToast` API,
+ * so any code (not just components) can raise a toast; the outlet the
+ * provider mounts subscribes and renders. SnackbarV2 will layer its token
+ * styling on top of this host; the host itself owns only queueing,
+ * stacking, timing, and announcements.
+ *
+ * RN-free (a `React.ReactNode` type is the only React surface) so queue
+ * semantics unit-test under vitest.
+ */
+
+export type ToastOptions = {
+    /** Reusing an id replaces that toast's content in place. */
+    id?: string
+    /** The rendered toast; a function receives its own dismiss. */
+    content: React.ReactNode | ((dismiss: () => void) => React.ReactNode)
+    /** Auto-dismiss delay in ms; `null` keeps the toast until dismissed. */
+    duration?: number | null
+    /** Spoken to assistive tech when the toast appears. */
+    announcement?: string
+}
+
+export type ToastEntry = Required<Pick<ToastOptions, 'content'>> & {
+    id: string
+    duration: number | null
+    announcement?: string
+}
+
+/** How many toasts render at once; older ones wait in the queue. */
+export const MAX_VISIBLE_TOASTS = 3
+
+/** Default auto-dismiss delay, matching sonner's. */
+export const DEFAULT_TOAST_DURATION = 4000
+
+type Listener = (toasts: readonly ToastEntry[]) => void
+
+let toasts: ToastEntry[] = []
+const listeners = new Set<Listener>()
+let counter = 0
+
+function emit() {
+    for (const listener of listeners) listener(toasts)
+}
+
+/** Raise a toast; returns its id. */
+export function showToast(options: ToastOptions): string {
+    const id = options.id ?? `blend-toast-${++counter}`
+    const entry: ToastEntry = {
+        id,
+        content: options.content,
+        duration:
+            options.duration === null
+                ? null
+                : (options.duration ?? DEFAULT_TOAST_DURATION),
+        announcement: options.announcement,
+    }
+    const existing = toasts.findIndex((t) => t.id === id)
+    toasts =
+        existing === -1
+            ? [...toasts, entry]
+            : toasts.map((t, i) => (i === existing ? entry : t))
+    emit()
+    return id
+}
+
+/** Dismiss one toast, or every toast when no id is given. */
+export function dismissToast(id?: string): void {
+    toasts = id === undefined ? [] : toasts.filter((t) => t.id !== id)
+    emit()
+}
+
+export function getToasts(): readonly ToastEntry[] {
+    return toasts
+}
+
+/** The slice the outlet renders: the newest MAX_VISIBLE. */
+export function getVisibleToasts(
+    all: readonly ToastEntry[] = toasts
+): readonly ToastEntry[] {
+    return all.slice(-MAX_VISIBLE_TOASTS)
+}
+
+export function subscribeToasts(listener: Listener): () => void {
+    listeners.add(listener)
+    return () => listeners.delete(listener)
+}
+
+/** Test hook — clears the queue without notifying. */
+export function resetToasts(): void {
+    toasts = []
+    counter = 0
+}

package/src/overlay/useAnchoredPosition.ts

@@ -0,0 +1,92 @@
+import { useCallback, useMemo, useRef, useState } from 'react'
+import {
+    useWindowDimensions,
+    type LayoutChangeEvent,
+    type View,
+} from 'react-native'
+import {
+    computeAnchoredPosition,
+    type Alignment,
+    type AnchoredPosition,
+    type Placement,
+    type Rect,
+    type Size,
+} from './positioning'
+
+/**
+ * Measurement plumbing for `computeAnchoredPosition`.
+ *
+ * Wires the three inputs the pure engine needs: the anchor's window rect
+ * (`measureInWindow`, taken when the overlay opens), the floating content's
+ * size (its `onLayout`), and the window size (re-renders on rotation).
+ *
+ * ```tsx
+ * const { anchorRef, measureAnchor, onContentLayout, position } =
+ *     useAnchoredPosition({ placement: 'bottom' })
+ *
+ * <Pressable ref={anchorRef} onPress={() => { measureAnchor(); open() }} />
+ * <Portal>
+ *   <View
+ *     onLayout={onContentLayout}
+ *     style={position && {
+ *       position: 'absolute', left: position.x, top: position.y,
+ *       maxHeight: position.maxHeight, opacity: 1,
+ *     }}
+ *   />
+ * </Portal>
+ * ```
+ *
+ * `position` is `null` until both measurements land — render the content
+ * transparent (not unmounted, or `onLayout` never fires) until then.
+ */
+export function useAnchoredPosition(options?: {
+    placement?: Placement
+    alignment?: Alignment
+    offset?: number
+    viewportPadding?: number
+}) {
+    const anchorRef = useRef<View>(null)
+    const [anchorRect, setAnchorRect] = useState<Rect | null>(null)
+    const [contentSize, setContentSize] = useState<Size | null>(null)
+    const viewport = useWindowDimensions()
+
+    /** Call when opening (and after anything that moves the anchor). */
+    const measureAnchor = useCallback(() => {
+        anchorRef.current?.measureInWindow((x, y, width, height) => {
+            setAnchorRect({ x, y, width, height })
+        })
+    }, [])
+
+    const onContentLayout = useCallback((event: LayoutChangeEvent) => {
+        const { width, height } = event.nativeEvent.layout
+        setContentSize((previous) =>
+            previous?.width === width && previous?.height === height
+                ? previous
+                : { width, height }
+        )
+    }, [])
+
+    const position = useMemo<AnchoredPosition | null>(() => {
+        if (!anchorRect || !contentSize) return null
+        return computeAnchoredPosition({
+            anchor: anchorRect,
+            content: contentSize,
+            viewport: { width: viewport.width, height: viewport.height },
+            placement: options?.placement,
+            alignment: options?.alignment,
+            offset: options?.offset,
+            viewportPadding: options?.viewportPadding,
+        })
+    }, [
+        anchorRect,
+        contentSize,
+        viewport.width,
+        viewport.height,
+        options?.placement,
+        options?.alignment,
+        options?.offset,
+        options?.viewportPadding,
+    ])
+
+    return { anchorRef, measureAnchor, onContentLayout, position }
+}

package/src/primitives/Block.tsx

@@ -0,0 +1,129 @@
+import React, { forwardRef, memo } from 'react'
+import {
+    View,
+    Platform,
+    StyleSheet,
+    type View as RNView,
+    type ViewProps,
+    type ViewStyle,
+} from 'react-native'
+import {
+    resolveSurfaceStyle,
+    type SurfaceStyleProps,
+} from '../adapters/surfaceStyle'
+
+/**
+ * Native `Block` — a `View` driven by token-shaped style props.
+ *
+ * Style resolution is delegated to `resolveSurfaceStyle`, the same function
+ * `Pressable` uses, so a component that swaps between the two depending on
+ * whether it is interactive (web's `TagElement = onClick ? PrimitiveButton :
+ * Block` pattern) renders identically in both branches. Before that was
+ * shared, `Block` could not render a border, radius, shadow, or height at
+ * all.
+ *
+ * Note there is **no `color` prop**. On web, `Block`'s `color` maps to CSS
+ * `color` — a foreground value that SVG icons inherit via `currentColor`.
+ * RN has no such inheritance, and mapping `color` to `backgroundColor` (as
+ * this file previously did) silently inverted the meaning of every call
+ * copied over from web. Use `backgroundColor` for a background, and `Slot`
+ * for tinting icons.
+ */
+
+export type BlockProps = SurfaceStyleProps & {
+    children?: React.ReactNode
+    /** Escape hatch for RN styles the token props do not cover. */
+    style?: ViewStyle
+} & Omit<ViewProps, 'style'>
+
+const BlockImpl = forwardRef<RNView, BlockProps>(function Block(
+    { children, style, ...rest },
+    ref
+) {
+    // Split token-shaped style props from pass-through RN View props.
+    const {
+        background,
+        backgroundColor,
+        border,
+        borderRadius,
+        boxShadow,
+        paddingTop,
+        paddingRight,
+        paddingBottom,
+        paddingLeft,
+        width,
+        minWidth,
+        maxWidth,
+        height,
+        minHeight,
+        maxHeight,
+        flexDirection,
+        alignItems,
+        justifyContent,
+        alignSelf,
+        gap,
+        flexShrink,
+        flexGrow,
+        opacity,
+        overflow,
+        ...viewProps
+    } = rest
+
+    const resolved = resolveSurfaceStyle(
+        {
+            background,
+            backgroundColor,
+            border,
+            borderRadius,
+            boxShadow,
+            paddingTop,
+            paddingRight,
+            paddingBottom,
+            paddingLeft,
+            width,
+            minWidth,
+            maxWidth,
+            height,
+            minHeight,
+            maxHeight,
+            flexDirection,
+            alignItems,
+            justifyContent,
+            alignSelf,
+            gap,
+            flexShrink,
+            flexGrow,
+            opacity,
+            overflow,
+        },
+        Platform.OS
+    )
+
+    return (
+        <View
+            ref={ref}
+            style={StyleSheet.flatten([baseStyle.view, resolved, style])}
+            {...viewProps}
+        >
+            {children}
+        </View>
+    )
+})
+
+/**
+ * Memoised because primitives sit at the leaves of every component tree: a
+ * parent re-render should not walk the whole subtree when none of the
+ * token-derived props changed.
+ */
+export const Block = memo(BlockImpl)
+Block.displayName = 'Block'
+
+const baseStyle = StyleSheet.create({
+    view: {
+        // RN Views are already flex containers; declaring it keeps parity
+        // with web `Block`, which is `display: flex`.
+        display: 'flex',
+    },
+})
+
+export default Block