blend-native 0.0.1-beta.0 → 0.0.1-beta.2

package/src/overlay/sheet/sheetMath.ts

@@ -26,6 +26,56 @@ export function clampSheetDrag(translationY: number): number {
     return Math.max(0, translationY)
 }
 
+/** Downward travel (pt) before the sheet pan may activate — keeps taps live. */
+export const SHEET_PAN_ACTIVATION_DISTANCE = 8
+
+/**
+ * Whether the sheet (rather than an inner scrollable) should consume a drag:
+ * only when the scrollable is at (or bounced past) its top AND the finger is
+ * moving downward. With no scrollable registered the offset stays 0, so a
+ * plain-content sheet always consumes — today's behaviour.
+ */
+export function shouldSheetConsumeDrag(
+    scrollOffsetY: number,
+    translationY: number
+): boolean {
+    'worklet'
+    return scrollOffsetY <= 0 && translationY > 0
+}
+
+/**
+ * The manual-activation decision for the sheet pan: activate only once the
+ * finger has travelled the activation distance downward while the inner
+ * scrollable sits at its top. Until then the pan stays undetermined, so the
+ * scrollable (running simultaneously) keeps full control — and if the list
+ * reaches its top mid-gesture, the pan activates then and the capture logic
+ * picks the sheet up from under the finger.
+ */
+export function shouldActivateSheetPan(
+    touchTravelY: number,
+    scrollOffsetY: number
+): boolean {
+    'worklet'
+    return (
+        touchTravelY > SHEET_PAN_ACTIVATION_DISTANCE &&
+        shouldSheetConsumeDrag(scrollOffsetY, touchTravelY)
+    )
+}
+
+/**
+ * The sheet's effective drag once it starts consuming mid-gesture: the pan
+ * captures the translation at the instant the inner list reaches its top, so
+ * the sheet picks up from under the finger instead of jumping by however far
+ * the list had already scrolled.
+ */
+export function resolveSheetDrag(
+    translationY: number,
+    capturedTranslationY: number
+): number {
+    'worklet'
+    return Math.max(0, translationY - capturedTranslationY)
+}
+
 /**
  * Whether a released drag should dismiss the sheet: past the distance
  * threshold, or a genuine downward fling. An upward fling never dismisses,
@@ -46,13 +96,19 @@ export function shouldDismissSheet(
 
 /**
  * The tallest a sheet may grow: the capped fraction of the window, minus
- * whatever top inset (status bar / notch) must stay visible above it.
+ * whatever top inset (status bar / notch) must stay visible above it, minus
+ * the keyboard when the sheet translates up to avoid it — otherwise a tall
+ * sheet pushed up by the keyboard would run past the notch.
  */
 export function resolveSheetMaxHeight(
     windowHeight: number,
     topInset: number = 0,
-    maxHeightFraction: number = SHEET_MAX_HEIGHT_FRACTION
+    maxHeightFraction: number = SHEET_MAX_HEIGHT_FRACTION,
+    keyboardHeight: number = 0
 ): number {
     const capped = windowHeight * maxHeightFraction
-    return Math.max(0, Math.min(capped, windowHeight - topInset))
+    return Math.max(
+        0,
+        Math.min(capped, windowHeight - topInset - keyboardHeight)
+    )
 }

package/src/overlay/toast/ToastOutlet.tsx

@@ -1,7 +1,15 @@
-import { useCallback, useContext, useEffect, useSyncExternalStore } from 'react'
+import {
+    useCallback,
+    useContext,
+    useEffect,
+    useRef,
+    useState,
+    useSyncExternalStore,
+} from 'react'
 import { StyleSheet, View } from 'react-native'
 import Animated, {
     Easing,
+    runOnJS,
     useAnimatedStyle,
     useSharedValue,
     withTiming,
@@ -27,19 +35,62 @@ import {
  * 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.
+ * bottom-stacked above everything through a priority `Portal` — priority
+ * keeps toasts painting above overlays that mount later (a sheet opened
+ * after a toast must not cover it). Each toast slides up on entry, slides
+ * away on exit (fades under reduce-motion), owns its auto-dismiss timer —
+ * paused while a finger is on it — and announces itself to assistive tech
+ * when asked.
  */
+
+/** Toasts paint above ordinary overlay layers (sheets, menus, modals). */
+export const TOAST_PORTAL_PRIORITY = 1
+
+export const TOAST_EXIT_DURATION = MOTION_DURATION.fast
+
+function sameEntries(
+    a: readonly ToastEntry[],
+    b: readonly ToastEntry[]
+): boolean {
+    return a.length === b.length && a.every((entry, i) => entry === b[i])
+}
+
 export function ToastOutlet() {
     const toasts = useSyncExternalStore(subscribeToasts, getToasts, getToasts)
     const insets = useContext(SafeAreaInsetsContext)
 
     const visible = getVisibleToasts(toasts)
-    if (visible.length === 0) return null
+
+    // Entries that just left the store are kept mounted, flagged `exiting`,
+    // until their exit animation reports done — the keep-mounted pattern
+    // from BottomSheet. Departures are detected with the official
+    // setState-during-render derived-state form (store entries are stable
+    // object references, so identity comparison is exact and a same-id
+    // content replacement never triggers an exit).
+    const [prevVisible, setPrevVisible] = useState<readonly ToastEntry[]>([])
+    const [exitingList, setExitingList] = useState<readonly ToastEntry[]>([])
+    if (!sameEntries(prevVisible, visible)) {
+        const visibleIds = new Set(visible.map((entry) => entry.id))
+        const departed = prevVisible.filter(
+            (entry) => !visibleIds.has(entry.id)
+        )
+        setPrevVisible(visible)
+        setExitingList((current) => [
+            ...current.filter((entry) => !visibleIds.has(entry.id)),
+            ...departed.filter(
+                (entry) => !current.some((c) => c.id === entry.id)
+            ),
+        ])
+    }
+
+    const handleExited = useCallback((id: string) => {
+        setExitingList((current) => current.filter((entry) => entry.id !== id))
+    }, [])
+
+    if (visible.length === 0 && exitingList.length === 0) return null
 
     return (
-        <Portal>
+        <Portal priority={TOAST_PORTAL_PRIORITY}>
             <View
                 style={[
                     styles.stack,
@@ -48,8 +99,21 @@ export function ToastOutlet() {
                 pointerEvents="box-none"
                 testID="blend-toast-outlet"
             >
-                {visible.map((toast) => (
-                    <ToastItem key={toast.id} toast={toast} />
+                {visible.map((entry) => (
+                    <ToastItem
+                        key={entry.id}
+                        toast={entry}
+                        exiting={false}
+                        onExited={handleExited}
+                    />
+                ))}
+                {exitingList.map((entry) => (
+                    <ToastItem
+                        key={entry.id}
+                        toast={entry}
+                        exiting
+                        onExited={handleExited}
+                    />
                 ))}
             </View>
         </Portal>
@@ -58,26 +122,83 @@ export function ToastOutlet() {
 
 ToastOutlet.displayName = 'ToastOutlet'
 
-function ToastItem({ toast }: { toast: ToastEntry }) {
+function ToastItem({
+    toast,
+    exiting,
+    onExited,
+}: {
+    toast: ToastEntry
+    exiting: boolean
+    onExited: (id: string) => void
+}) {
     const reduceMotion = useReduceMotion()
     const progress = useSharedValue(0)
 
     const dismiss = useCallback(() => dismissToast(toast.id), [toast.id])
 
-    // Enter animation once per toast id.
+    // Enter once per toast id; exit when the store drops the entry, then
+    // report done so the outlet releases the retained item.
+    const notifyExited = useCallback(
+        () => onExited(toast.id),
+        [onExited, toast.id]
+    )
     useEffect(() => {
+        if (exiting) {
+            progress.value = withTiming(
+                0,
+                {
+                    duration: TOAST_EXIT_DURATION,
+                    easing: Easing.bezier(...MOTION_EASING.accelerate),
+                },
+                (finished) => {
+                    if (finished) runOnJS(notifyExited)()
+                }
+            )
+            return
+        }
         progress.value = withTiming(1, {
             duration: MOTION_PRESETS.slideUp.duration,
             easing: Easing.bezier(...MOTION_EASING.decelerate),
         })
-    }, [progress])
+    }, [progress, exiting, notifyExited])
+
+    // Auto-dismiss owns its timer, with remaining-time bookkeeping so a
+    // finger on the toast pauses the countdown (the sonner behaviour).
+    // Content replacement (same id) restarts the full duration.
+    const remainingRef = useRef<number | null>(null)
+    const startedAtRef = useRef(0)
+    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+    const stopTimer = useCallback(() => {
+        if (timerRef.current !== null) {
+            clearTimeout(timerRef.current)
+            timerRef.current = null
+        }
+    }, [])
+
+    const startTimer = useCallback(() => {
+        stopTimer()
+        if (remainingRef.current === null || exiting) return
+        startedAtRef.current = Date.now()
+        timerRef.current = setTimeout(dismiss, remainingRef.current)
+    }, [dismiss, exiting, stopTimer])
+
+    const pauseTimer = useCallback(() => {
+        if (timerRef.current === null || remainingRef.current === null) return
+        stopTimer()
+        remainingRef.current = Math.max(
+            0,
+            remainingRef.current - (Date.now() - startedAtRef.current)
+        )
+    }, [stopTimer])
 
-    // 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])
+        remainingRef.current = toast.duration
+        startTimer()
+        return stopTimer
+        // The full duration restarts when the toast's identity or content
+        // changes; startTimer/stopTimer identities are stable per item.
+    }, [toast.id, toast.duration, toast.content, startTimer, stopTimer])
 
     useLiveRegionAnnounce(toast.announcement, Boolean(toast.announcement))
 
@@ -101,6 +222,9 @@ function ToastItem({ toast }: { toast: ToastEntry }) {
         <Animated.View
             style={animatedStyle}
             accessibilityLiveRegion={toast.announcement ? 'polite' : 'none'}
+            onTouchStart={pauseTimer}
+            onTouchEnd={startTimer}
+            onTouchCancel={startTimer}
         >
             {typeof toast.content === 'function'
                 ? toast.content(dismiss)
@@ -109,11 +233,6 @@ function ToastItem({ toast }: { toast: ToastEntry }) {
     )
 }
 
-/** 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',

package/src/overlay/useAnchoredPosition.ts

@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import {
     useWindowDimensions,
     type LayoutChangeEvent,
@@ -6,25 +6,37 @@ import {
 } from 'react-native'
 import {
     computeAnchoredPosition,
+    computeArrowAlignedPosition,
+    computeArrowPosition,
     type Alignment,
     type AnchoredPosition,
     type Placement,
     type Rect,
     type Size,
 } from './positioning'
+import { useKeyboardHeight } from './useKeyboardHeight'
 
 /**
  * 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).
+ * (`measureInWindow`), the floating content's size (its `onLayout`), and
+ * the window size — reduced by the soft keyboard's height so content flips
+ * and clamps above it.
+ *
+ * Re-measure philosophy: the overlay components render a touch-capturing
+ * backdrop while open, so nothing can scroll under an open overlay — the
+ * anchor only moves on rotation or when the keyboard changes the window.
+ * The anchor is measured when `open` flips true and re-measured on
+ * window-dimension or keyboard changes while open; `remeasure()` covers
+ * anything exotic. There is no RN ResizeObserver, and polling would burn
+ * battery for a case the backdrop already prevents.
  *
  * ```tsx
- * const { anchorRef, measureAnchor, onContentLayout, position } =
- *     useAnchoredPosition({ placement: 'bottom' })
+ * const { anchorRef, onContentLayout, position, arrow } =
+ *     useAnchoredPosition({ open, placement: 'bottom', arrowSize: 6 })
  *
- * <Pressable ref={anchorRef} onPress={() => { measureAnchor(); open() }} />
+ * <Pressable ref={anchorRef} onPress={open} />
  * <Portal>
  *   <View
  *     onLayout={onContentLayout}
@@ -38,25 +50,58 @@ import {
  *
  * `position` is `null` until both measurements land — render the content
  * transparent (not unmounted, or `onLayout` never fires) until then.
+ * `arrow` is `null` unless `arrowSize` is set; it is the arrow's center in
+ * content-local coordinates (`computeArrowPosition`).
  */
-export function useAnchoredPosition(options?: {
+export function useAnchoredPosition(options: {
+    /** Whether the overlay is presented — measurement follows this. */
+    open: boolean
     placement?: Placement
     alignment?: Alignment
     offset?: number
     viewportPadding?: number
+    /** Edge length of the arrow square; enables the `arrow` result. */
+    arrowSize?: number
+    /**
+     * Arrow-led cross axis (the tooltip contract): the tip sits at the
+     * `alignment` spot on the content and the content moves so the tip
+     * lands on the anchor's center. Requires `arrowSize`.
+     */
+    arrowAligned?: boolean
 }) {
+    const {
+        open,
+        placement,
+        alignment,
+        offset,
+        viewportPadding,
+        arrowSize,
+        arrowAligned = false,
+    } = options
     const anchorRef = useRef<View>(null)
     const [anchorRect, setAnchorRect] = useState<Rect | null>(null)
     const [contentSize, setContentSize] = useState<Size | null>(null)
     const viewport = useWindowDimensions()
+    const keyboard = useKeyboardHeight()
 
-    /** Call when opening (and after anything that moves the anchor). */
-    const measureAnchor = useCallback(() => {
+    /** Re-measure the anchor now — for anchors that move in exotic ways. */
+    const remeasure = useCallback(() => {
         anchorRef.current?.measureInWindow((x, y, width, height) => {
             setAnchorRect({ x, y, width, height })
         })
     }, [])
 
+    // Measure on open; re-measure on rotation/keyboard while open; drop the
+    // stale rect on close so the next open cannot flash at the old spot.
+    useEffect(() => {
+        if (open) {
+            remeasure()
+        } else {
+            setAnchorRect(null)
+            setContentSize(null)
+        }
+    }, [open, remeasure, viewport.width, viewport.height, keyboard.height])
+
     const onContentLayout = useCallback((event: LayoutChangeEvent) => {
         const { width, height } = event.nativeEvent.layout
         setContentSize((previous) =>
@@ -66,27 +111,62 @@ export function useAnchoredPosition(options?: {
         )
     }, [])
 
-    const position = useMemo<AnchoredPosition | null>(() => {
+    const resolved = useMemo<{
+        position: AnchoredPosition
+        arrow: { x: number; y: number } | null
+    } | null>(() => {
         if (!anchorRect || !contentSize) return null
-        return computeAnchoredPosition({
+        const input = {
             anchor: anchorRect,
             content: contentSize,
-            viewport: { width: viewport.width, height: viewport.height },
-            placement: options?.placement,
-            alignment: options?.alignment,
-            offset: options?.offset,
-            viewportPadding: options?.viewportPadding,
-        })
+            viewport: {
+                width: viewport.width,
+                height: Math.max(0, viewport.height - keyboard.height),
+            },
+            placement,
+            alignment,
+            offset,
+            viewportPadding,
+        }
+        if (arrowAligned && arrowSize) {
+            const { arrow, ...position } = computeArrowAlignedPosition({
+                ...input,
+                arrowSize,
+            })
+            return { position, arrow }
+        }
+        const position = computeAnchoredPosition(input)
+        const arrow = arrowSize
+            ? computeArrowPosition({
+                  anchor: anchorRect,
+                  contentPosition: { x: position.x, y: position.y },
+                  content: contentSize,
+                  placement: position.placement,
+                  arrowSize,
+              })
+            : null
+        return { position, arrow }
     }, [
         anchorRect,
         contentSize,
         viewport.width,
         viewport.height,
-        options?.placement,
-        options?.alignment,
-        options?.offset,
-        options?.viewportPadding,
+        keyboard.height,
+        placement,
+        alignment,
+        offset,
+        viewportPadding,
+        arrowSize,
+        arrowAligned,
     ])
 
-    return { anchorRef, measureAnchor, onContentLayout, position }
+    return {
+        anchorRef,
+        onContentLayout,
+        position: resolved?.position ?? null,
+        arrow: resolved?.arrow ?? null,
+        /** The anchor's window rect — for anchor-width-matched dropdowns. */
+        anchorRect,
+        remeasure,
+    }
 }

package/src/overlay/useKeyboardHeight.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+import { Keyboard, Platform } from 'react-native'
+
+/**
+ * The soft keyboard's current height in window points — dependency-free
+ * keyboard tracking for overlays.
+ *
+ * iOS fires `keyboardWillShow/Hide` ahead of the frame change, so an
+ * animation started from this state tracks the keyboard closely; Android
+ * only has the `Did` events. Height comes from `endCoordinates`, so an iOS
+ * keyboard that changes height (emoji pane, autocomplete bar) updates too.
+ */
+export function useKeyboardHeight(): { height: number; visible: boolean } {
+    const [height, setHeight] = useState(0)
+
+    useEffect(() => {
+        const showEvent =
+            Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow'
+        const hideEvent =
+            Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide'
+        const show = Keyboard.addListener(showEvent, (event) => {
+            setHeight(event.endCoordinates?.height ?? 0)
+        })
+        const hide = Keyboard.addListener(hideEvent, () => {
+            setHeight(0)
+        })
+        return () => {
+            show.remove()
+            hide.remove()
+        }
+    }, [])
+
+    return { height, visible: height > 0 }
+}
+
+export default useKeyboardHeight

package/src/primitives/Block.tsx

@@ -5,6 +5,7 @@ import {
     StyleSheet,
     type View as RNView,
     type ViewProps,
+    type StyleProp,
     type ViewStyle,
 } from 'react-native'
 import {
@@ -33,7 +34,7 @@ import {
 export type BlockProps = SurfaceStyleProps & {
     children?: React.ReactNode
     /** Escape hatch for RN styles the token props do not cover. */
-    style?: ViewStyle
+    style?: StyleProp<ViewStyle>
 } & Omit<ViewProps, 'style'>
 
 const BlockImpl = forwardRef<RNView, BlockProps>(function Block(

package/src/primitives/Pressable.tsx

@@ -8,6 +8,7 @@ import {
     type LayoutChangeEvent,
     type PressableProps,
     type View as RNView,
+    type StyleProp,
     type ViewStyle,
 } from 'react-native'
 import {
@@ -116,7 +117,7 @@ export type PrimitivePressableProps = SurfaceStyleProps & {
     minTouchTarget?: number
 
     onPress?: (event: GestureResponderEvent) => void
-    style?: ViewStyle
+    style?: StyleProp<ViewStyle>
 } & Omit<PressableProps, 'style' | 'onPress' | 'disabled' | 'children'>
 
 const PressableImpl = forwardRef<RNView, PrimitivePressableProps>(
@@ -377,14 +378,19 @@ const PressableImpl = forwardRef<RNView, PrimitivePressableProps>(
 
         // ---- Gradient path ----------------------------------------------
         //
-        //   <Pressable border + radius + overflow:hidden>
-        //     <LinearGradient absoluteFill (bled into the border zone) />
-        //     <View padding + layout> {content} </View>
+        //   <Pressable full surface + overflow:hidden>
+        //     <LinearGradient absolute (bled into the border zone) />
+        //     {content}
         //   </Pressable>
         //
-        // The gradient absolute-fills the whole border box — including under
-        // the border — so no antialiasing wedge forms at the corners, and the
-        // Pressable's own radius + overflow:hidden clips the bleed.
+        // The whole surface — padding, layout, sizing — stays on the
+        // Pressable. Yoga positions absolute children relative to the BORDER
+        // box (not CSS's padding box), so the bleed gradient fills the frame
+        // regardless of padding, and no inner layout view is needed. The
+        // previous split (frame + `flex`-growing content child) broke
+        // intrinsic sizing: under Yoga's at-most measurement a growing child
+        // consumes the parent row's available width, so an auto-width
+        // gradient button rendered container-wide.
         if (
             canRenderGradient &&
             !usesDisabledChrome &&
@@ -406,36 +412,8 @@ const PressableImpl = forwardRef<RNView, PrimitivePressableProps>(
                 left: bleed,
             }
 
-            // The gradient fills the border box, so padding and inner layout
-            // move to a child view; the Pressable keeps only the frame
-            // (border, radius, sizing) plus the clip.
-            const {
-                paddingTop,
-                paddingRight,
-                paddingBottom,
-                paddingLeft,
-                flexDirection: frameFlexDirection,
-                alignItems: frameAlignItems,
-                justifyContent: frameJustifyContent,
-                gap: frameGap,
-                ...frame
-            } = surface
-
-            const contentLayout: ViewStyle = {
-                flex: 1,
-                paddingTop,
-                paddingRight,
-                paddingBottom,
-                paddingLeft,
-                flexDirection: frameFlexDirection,
-                alignItems: frameAlignItems,
-                justifyContent: frameJustifyContent,
-                gap: frameGap,
-            }
-
             const frameStyle: ViewStyle = {
-                ...frame,
-                flexDirection: frameFlexDirection,
+                ...surface,
                 overflow: 'hidden',
             }
 
@@ -485,7 +463,7 @@ const PressableImpl = forwardRef<RNView, PrimitivePressableProps>(
                                     ]}
                                 />
                             )}
-                            <View style={contentLayout}>{content}</View>
+                            {content}
                         </>
                     )}
                 </RNPressable>

package/src/primitives/PrimitiveInput.tsx

@@ -3,6 +3,7 @@ import {
     TextInput as RNTextInput,
     StyleSheet,
     type TextInputProps as RNTextInputProps,
+    type StyleProp,
     type TextStyle,
 } from 'react-native'
 import { parseDimension } from '../adapters/cssStringAdapter'
@@ -33,7 +34,7 @@ export type PrimitiveInputProps = {
     lineHeight?: string | number
     /** Placeholder colour for the current state. */
     placeholderColor?: string
-    style?: TextStyle
+    style?: StyleProp<TextStyle>
 } & Omit<RNTextInputProps, 'style' | 'placeholderTextColor'>
 
 const PrimitiveInputImpl = forwardRef<RNTextInput, PrimitiveInputProps>(

package/src/primitives/Separator.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, View, type ViewStyle } from 'react-native'
+import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native'
 import { FOUNDATION_THEME } from '@juspay/blend-design-system/node'
 import { parseDimension } from '../adapters/cssStringAdapter'
 
@@ -21,7 +21,7 @@ export type SeparatorProps = {
     /** Thickness across the line. Token string or number. */
     thickness?: string | number
     color?: string
-    style?: ViewStyle
+    style?: StyleProp<ViewStyle>
     testID?: string
 }
 

package/src/primitives/Slot.tsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react'
-import { View, StyleSheet, type ViewStyle } from 'react-native'
+import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native'
 import { parseSize } from '../adapters/cssStringAdapter'
 import { tintSlot } from './tintSlot'
 
@@ -42,7 +42,7 @@ export type SlotProps = {
      * renders a text label, matching web's `aria-hidden`.
      */
     hidden?: boolean
-    style?: ViewStyle
+    style?: StyleProp<ViewStyle>
     testID?: string
 }