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

package/src/hooks/useControllableState.ts

@@ -0,0 +1,32 @@
+import { useCallback, useRef, useState } from 'react'
+
+/**
+ * Controlled/uncontrolled state pair — the `value`/`defaultValue`/`onChange`
+ * contract Tabs, Accordion and the input components share. Internal.
+ *
+ * Controlled-ness follows the current render (a component may switch),
+ * unlike web AccordionV2's mount-latched ref. The updater always notifies
+ * `onChange`; it only writes local state while uncontrolled.
+ */
+export function useControllableState<T>(
+    controlled: T | undefined,
+    defaultValue: T,
+    onChange?: (value: T) => void
+): [T, (value: T) => void] {
+    const [uncontrolled, setUncontrolled] = useState<T>(defaultValue)
+    const isControlled = controlled !== undefined
+    const onChangeRef = useRef(onChange)
+    onChangeRef.current = onChange
+
+    const value = isControlled ? (controlled as T) : uncontrolled
+
+    const setValue = useCallback(
+        (next: T) => {
+            if (controlled === undefined) setUncontrolled(next)
+            onChangeRef.current?.(next)
+        },
+        [controlled]
+    )
+
+    return [value, setValue]
+}

package/src/index.ts

@@ -18,16 +18,158 @@
  */
 
 // ---- Components ---------------------------------------------------------
+export { Accordion, AccordionItem } from './components/Accordion'
+export type {
+    AccordionNativeProps,
+    AccordionItemNativeProps,
+} from './components/Accordion'
 export { Alert } from './components/Alert'
+export { Avatar } from './components/Avatar'
+export type { AvatarNativeProps, AvatarStatus } from './components/Avatar'
+export { Badge } from './components/Badge'
+export type { BadgeNativeProps } from './components/Badge'
 export { Button } from './components/Button'
+export { ButtonGroup } from './components/Button'
+export { IconButton } from './components/Button'
+export { LinkButton } from './components/Button'
+export { Breadcrumb } from './components/Breadcrumb'
+export type {
+    BreadcrumbNativeProps,
+    BreadcrumbNativeItemType,
+} from './components/Breadcrumb'
+export { Card } from './components/Card'
+export { Checkbox } from './components/Checkbox'
+export type { CheckboxNativeProps } from './components/Checkbox'
+export type { CardNativeProps } from './components/Card'
+export { KeyValuePair } from './components/KeyValuePair'
+export type {
+    KeyValuePairNativeProps,
+    KeyValuePairOrientation,
+    KeyValuePairTextOverflow,
+} from './components/KeyValuePair'
+export { Menu } from './components/Menu'
+export type {
+    MenuNativeProps,
+    MenuItemType,
+    MenuGroupType,
+} from './components/Menu'
+export { MultiSelect } from './components/MultiSelect'
+export type {
+    MultiSelectNativeProps,
+    MultiSelectAction,
+    MultiSelectV2ItemType,
+    MultiSelectV2GroupType,
+} from './components/MultiSelect'
+export { SingleSelect } from './components/SingleSelect'
+export type {
+    SingleSelectNativeProps,
+    SingleSelectV2ItemType,
+    SingleSelectV2GroupType,
+} from './components/SingleSelect'
 export { Tag } from './components/Tag'
+export { TagGroup } from './components/Tag'
+export { Modal } from './components/Modal'
+export type { ModalNativeProps, ModalAction } from './components/Modal'
+export { Popover } from './components/Popover'
+export type { PopoverNativeProps, PopoverAction } from './components/Popover'
+export { Tooltip } from './components/Tooltip'
+export type { TooltipNativeProps } from './components/Tooltip'
+export { Tabs, TabsList, TabsTrigger, TabsContent } from './components/Tabs'
+export type {
+    TabsNativeProps,
+    TabsListNativeProps,
+    TabsTriggerNativeProps,
+    TabsContentNativeProps,
+} from './components/Tabs'
+export { TextArea } from './components/TextArea'
+export type { TextAreaNativeProps } from './components/TextArea'
 export { TextInput } from './components/TextInput'
 export type {
     TextInputNativeProps,
     TextInputSlot,
 } from './components/TextInput'
+export { Switch } from './components/Switch'
+export type { SwitchNativeProps } from './components/Switch'
+export { SearchInput } from './components/SearchInput'
+export type { SearchInputNativeProps } from './components/SearchInput'
 export { Skeleton } from './components/Skeleton'
 export type { SkeletonNativeProps } from './components/Skeleton'
+export { NumberInput } from './components/NumberInput'
+export type { NumberInputNativeProps } from './components/NumberInput'
+export { OTPInput } from './components/OTPInput'
+export type { OTPInputNativeProps } from './components/OTPInput'
+export { Radio } from './components/Radio'
+export type { RadioNativeProps } from './components/Radio'
+export { ProgressBar } from './components/ProgressBar'
+export type { ProgressBarNativeProps } from './components/ProgressBar'
+export { Spinner } from './components/Spinner'
+export type { SpinnerNativeProps } from './components/Spinner'
+export { Sparkline } from './components/Sparkline'
+export type {
+    SparklineDatum,
+    SparklineNativeProps,
+    SparklineType,
+} from './components/Sparkline'
+export { StatCard } from './components/StatCard'
+export type {
+    StatCardNativeProps,
+    StatCardChange,
+    StatCardSkeletonProps,
+} from './components/StatCard'
+export { Chart } from './components/Chart'
+export { ChartContainer } from './components/Chart'
+export { ChartHeader } from './components/Chart'
+export { ChartLegend } from './components/Chart'
+export { ChartSkeleton } from './components/Chart'
+export { ChartNoData } from './components/Chart'
+export type {
+    ChartNativeProps,
+    ChartType,
+    ChartSeries,
+    ChartDatum,
+    ChartPieSlice,
+    ChartLegendItem,
+    ChartLegendProps,
+    ChartHeaderProps,
+    ChartContainerProps,
+    ChartSkeletonProps,
+    ChartNoDataProps,
+} from './components/Chart'
+export { SankeyChart } from './components/SankeyChart'
+export type {
+    SankeyChartProps,
+    SankeyNode,
+    SankeyLink,
+} from './components/SankeyChart'
+export { OutageChart } from './components/OutageChart'
+export type {
+    OutageChartNativeProps,
+    OutageTrendDatum,
+    OutageZone,
+    OutageSegment,
+} from './components/OutageChart'
+export { Upload } from './components/Upload'
+export type {
+    UploadNativeProps,
+    UploadFileNativeItem,
+} from './components/Upload'
+export { validateUploadFiles } from './components/Upload'
+export {
+    UploadState,
+    UploadErrorReason,
+} from '@juspay/blend-design-system/node'
+
+// Value unions for the props above. Exported so a consumer can type a
+// `variant`/`size` prop of their own, and so tooling can enumerate the
+// options; they are string unions on the web side, not enums, so there is
+// no runtime object to re-export.
+export type {
+    SkeletonVariant,
+    SkeletonShape,
+    SpinnerSize,
+    SpinnerColor,
+    BadgePosition,
+} from '@juspay/blend-design-system/node'
 
 export type {
     AlertNativeProps,
@@ -36,8 +178,17 @@ export type {
     AlertActions,
     AlertCloseButton,
 } from './components/Alert'
-export type { ButtonNativeProps } from './components/Button'
-export type { TagNativeProps, TagSlot } from './components/Tag'
+export type {
+    ButtonNativeProps,
+    ButtonGroupNativeProps,
+    IconButtonNativeProps,
+    LinkButtonNativeProps,
+} from './components/Button'
+export type {
+    TagNativeProps,
+    TagGroupNativeProps,
+    TagSlot,
+} from './components/Tag'
 
 // ---- Theming ------------------------------------------------------------
 export {
@@ -107,11 +258,16 @@ export { useReduceMotion } from './motion/useReduceMotion'
 // Select/Menu/Modal compose it; also public for consumer-built sheets.
 export { BottomSheet } from './overlay/sheet/BottomSheet'
 export type { BottomSheetProps } from './overlay/sheet/BottomSheet'
+// Makes a scrollable inside a sheet cooperate with the sheet drag: the list
+// scrolls until it hits its top, then the sheet follows the finger.
+export { BottomSheetScrollable } from './overlay/sheet/SheetScrollable'
 
-// The toast host: the provider mounts the outlet, this pair drives it.
-// SnackbarV2 will layer token styling on top when it lands.
+// The toast host: the provider mounts the outlet, this pair drives it;
+// `addSnackbar` layers the SNACKBARV2 token styling on top.
 export { showToast, dismissToast } from './overlay/toast/toastStore'
 export type { ToastOptions } from './overlay/toast/toastStore'
+export { addSnackbar, dismissSnackbar } from './components/Snackbar'
+export type { SnackbarOptions, SnackbarAction } from './components/Snackbar'
 
 /** Position of a control within a button or tag group. */
 export type { GroupPosition } from './components/shared/group'
@@ -127,18 +283,58 @@ export type { GroupPosition } from './components/shared/group'
 export { useLiveRegionAnnounce } from './a11y/useLiveRegion'
 
 export {
+    AccordionV2Type as AccordionType,
+    AccordionV2ChevronPosition as AccordionChevronPosition,
     AlertV2Type as AlertType,
+    AvatarV2Size as AvatarSize,
+    AvatarV2Shape as AvatarShape,
+    AvatarV2Status as AvatarStatusType,
+    AvatarV2StatusPosition as AvatarStatusPosition,
+    BadgeColor,
+    BadgeSize,
     AlertV2SubType as AlertSubType,
     AlertV2ActionPosition as AlertActionPosition,
     ButtonV2Type as ButtonType,
     ButtonV2Size as ButtonSize,
     ButtonV2SubType as ButtonSubType,
     ButtonV2State as ButtonState,
+    CardV2Variant as CardVariant,
+    CardV2Orientation as CardOrientation,
+    CardV2Padding as CardPadding,
+    SelectorV2Size as SelectorSize,
+    SelectV2Size as SelectSize,
+    MultiSelectV2SelectionTagType as MultiSelectSelectionTagType,
+    SelectV2Variant as SelectVariant,
+    TabsV2Variant as TabsVariant,
+    TabsV2Size as TabsSize,
+    CheckboxV2CheckedState as CheckboxCheckedState,
     InputSizeV2 as InputSize,
+    KeyValuePairV2Size as KeyValuePairSize,
     InputStateV2 as InputState,
+    MenuV2Alignment as MenuAlignment,
+    MenuV2Side as MenuSide,
+    MenuV2ItemVariant as MenuItemVariant,
+    MenuV2ItemActionType as MenuItemActionType,
+    NumberInputV2Direction as NumberInputDirection,
+    ProgressBarV2Size as ProgressBarSize,
+    SelectV2Alignment as SelectAlignment,
+    SelectV2Side as SelectSide,
+    SnackbarV2Variant as SnackbarVariant,
+    ProgressBarV2Variant as ProgressBarVariant,
+    ProgressBarV2Appearance as ProgressBarAppearance,
+    StatCardV2Variant as StatCardVariant,
+    StatCardV2ChangeType as StatCardChangeType,
+    StatCardV2ArrowDirection as StatCardArrowDirection,
     TagV2Type as TagType,
     TagV2Size as TagSize,
     TagV2SubType as TagSubType,
     TagV2Color as TagColor,
+    PopoverV2Size as PopoverSize,
+    PopoverV2Side as PopoverSide,
+    PopoverV2Align as PopoverAlign,
+    TooltipV2Side as TooltipSide,
+    TooltipV2Align as TooltipAlign,
+    TooltipV2Size as TooltipSize,
+    TooltipV2SlotDirection as TooltipSlotDirection,
     Theme,
 } from '@juspay/blend-design-system/node'

package/src/overlay/anchored/AnchoredOverlay.tsx

@@ -0,0 +1,286 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { BackHandler, Pressable, StyleSheet, View } from 'react-native'
+import type { StyleProp, ViewStyle } from 'react-native'
+import Animated, {
+    Easing,
+    runOnJS,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated'
+import { Portal } from '../portal'
+import { useAnchoredPosition } from '../useAnchoredPosition'
+import type { Alignment, Placement } from '../positioning'
+import {
+    MOTION_EASING,
+    MOTION_PRESETS,
+    reducedMotionVariant,
+    type MotionEasing,
+} from '../../motion/motion'
+import { useReduceMotion } from '../../motion/useReduceMotion'
+
+// Indexing MOTION_EASING with a dynamic key yields a union of tuples,
+// which cannot be spread into Easing.bezier directly.
+function bezierFor(name: MotionEasing) {
+    const [x1, y1, x2, y2] = MOTION_EASING[name]
+    return Easing.bezier(x1, y1, x2, y2)
+}
+
+/**
+ * AnchoredOverlay — the internal building block behind every anchored
+ * surface: Tooltip at all sizes, and the tablet (`lg`) mode of Popover,
+ * Menu and the Selects. Not public: components own their prop contracts,
+ * this owns the shared anatomy.
+ *
+ * Anatomy: the trigger renders inline inside a `collapsable={false}` view
+ * that carries the anchor ref; while open, a portal layer hosts a
+ * touch-capturing backdrop (which is what makes anchor re-measure
+ * unnecessary — nothing can scroll under an open overlay) and the content,
+ * positioned by `useAnchoredPosition`, animated with the `scaleFade`
+ * preset via measured `withTiming` shared values, kept mounted through the
+ * exit animation like `BottomSheet`. Android back and VoiceOver's escape
+ * gesture both request close.
+ */
+
+export type AnchoredOverlayProps = {
+    open: boolean
+    /** Every dismiss route calls this; the owner flips `open`. */
+    onRequestClose: () => void
+    /** The anchor. Rendered inline where the component sits. */
+    trigger: React.ReactNode
+    placement?: Placement
+    alignment?: Alignment
+    /** Gap between anchor and content, in points. */
+    offset?: number
+    viewportPadding?: number
+    /** Edge length of the arrow square; omit for no arrow. */
+    arrowSize?: number
+    arrowColor?: string
+    /**
+     * `'transparent'` captures outside taps without dimming (tooltip,
+     * menu); a color string dims and captures; `false` renders no backdrop
+     * (outside taps fall through to the app).
+     */
+    backdrop?: 'transparent' | string | false
+    /** Styles the positioned content container (surface chrome). */
+    contentStyle?: StyleProp<ViewStyle>
+    /** Hide the app and lower layers from assistive tech while open. */
+    modal?: boolean
+    /**
+     * 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
+    /** Give the content the anchor's width as its minWidth (dropdowns). */
+    matchAnchorWidth?: boolean
+    children?: React.ReactNode
+    accessibilityLabel?: string
+    testID?: string
+}
+
+export function AnchoredOverlay({
+    open,
+    onRequestClose,
+    trigger,
+    placement = 'bottom',
+    alignment = 'start',
+    offset = 8,
+    viewportPadding = 8,
+    arrowSize,
+    arrowColor = '#000000',
+    backdrop = 'transparent',
+    contentStyle,
+    modal = false,
+    arrowAligned = false,
+    matchAnchorWidth = false,
+    children,
+    accessibilityLabel,
+    testID,
+}: AnchoredOverlayProps) {
+    // Mounted outlives `open` by one exit animation (the BottomSheet
+    // pattern), so the fade-out is visible.
+    const [mounted, setMounted] = useState(open)
+    const progress = useSharedValue(0)
+    const reduceMotion = useReduceMotion()
+    const preset = reduceMotion
+        ? reducedMotionVariant(MOTION_PRESETS.scaleFade)
+        : MOTION_PRESETS.scaleFade
+
+    const { anchorRef, onContentLayout, position, arrow, anchorRect } =
+        useAnchoredPosition({
+            open,
+            placement,
+            alignment,
+            offset,
+            viewportPadding,
+            arrowSize,
+            arrowAligned,
+        })
+
+    // The engine works in window coordinates, but the portal layer is an
+    // absolute-fill of the provider, which need not sit at the window
+    // origin (headers, safe areas, embedded previews). Measure the layer's
+    // own window offset and subtract it, or every overlay drifts by that
+    // delta.
+    const layerRef = useRef<View>(null)
+    const [layerOffset, setLayerOffset] = useState({ x: 0, y: 0 })
+    const measureLayer = useCallback(() => {
+        layerRef.current?.measureInWindow((x, y) => {
+            setLayerOffset((current) =>
+                current.x === x && current.y === y ? current : { x, y }
+            )
+        })
+    }, [])
+
+    const unmount = useCallback(() => setMounted(false), [])
+
+    useEffect(() => {
+        if (open) {
+            setMounted(true)
+            progress.value = withTiming(1, {
+                duration: preset.duration,
+                easing: bezierFor(preset.easing),
+            })
+        } else {
+            progress.value = withTiming(
+                0,
+                {
+                    duration: preset.exitDuration,
+                    easing: bezierFor(preset.exitEasing),
+                },
+                (finished) => {
+                    if (finished) runOnJS(unmount)()
+                }
+            )
+        }
+    }, [open, progress, preset, unmount])
+
+    // Android hardware back closes the overlay instead of the screen.
+    useEffect(() => {
+        if (!open) return
+        const subscription = BackHandler.addEventListener(
+            'hardwareBackPress',
+            () => {
+                onRequestClose()
+                return true
+            }
+        )
+        return () => subscription.remove()
+    }, [open, onRequestClose])
+
+    const fromOpacity = preset.from.opacity ?? 1
+    const toOpacity = preset.to.opacity ?? 1
+    const fromScale = preset.from.scale ?? 1
+    const toScale = preset.to.scale ?? 1
+    const motionStyle = useAnimatedStyle(() => ({
+        opacity: fromOpacity + (toOpacity - fromOpacity) * progress.value,
+        transform: [
+            {
+                scale: fromScale + (toScale - fromScale) * progress.value,
+            },
+        ],
+    }))
+
+    const dimsBackdrop =
+        typeof backdrop === 'string' && backdrop !== 'transparent'
+    const backdropStyle = useAnimatedStyle(() => ({
+        opacity: dimsBackdrop ? progress.value : 1,
+    }))
+
+    return (
+        <>
+            <View collapsable={false} ref={anchorRef}>
+                {trigger}
+            </View>
+            {mounted ? (
+                <Portal modal={modal}>
+                    {backdrop !== false ? (
+                        <Animated.View
+                            style={[StyleSheet.absoluteFill, backdropStyle]}
+                            accessible={false}
+                            importantForAccessibility="no-hide-descendants"
+                            testID={testID ? `${testID}-backdrop` : undefined}
+                        >
+                            <Pressable
+                                style={[
+                                    StyleSheet.absoluteFill,
+                                    dimsBackdrop && {
+                                        backgroundColor: backdrop,
+                                    },
+                                ]}
+                                onPress={onRequestClose}
+                            />
+                        </Animated.View>
+                    ) : null}
+                    <View
+                        ref={layerRef}
+                        collapsable={false}
+                        pointerEvents="none"
+                        style={StyleSheet.absoluteFill}
+                        onLayout={measureLayer}
+                    />
+                    <View
+                        // Positioner: parks the content invisibly until the
+                        // first measurement lands (unmounting instead would
+                        // keep onLayout from ever firing).
+                        style={[
+                            styles.positioner,
+                            position
+                                ? {
+                                      left: position.x - layerOffset.x,
+                                      top: position.y - layerOffset.y,
+                                      maxWidth: position.maxWidth,
+                                      maxHeight: position.maxHeight,
+                                      opacity: 1,
+                                  }
+                                : styles.unmeasured,
+                        ]}
+                        pointerEvents={position ? 'box-none' : 'none'}
+                        onLayout={onContentLayout}
+                        onAccessibilityEscape={onRequestClose}
+                        accessibilityLabel={accessibilityLabel}
+                        testID={testID}
+                    >
+                        <Animated.View
+                            style={[
+                                contentStyle,
+                                matchAnchorWidth && anchorRect
+                                    ? { minWidth: anchorRect.width }
+                                    : null,
+                                motionStyle,
+                            ]}
+                        >
+                            {children}
+                            {arrowSize && arrow ? (
+                                <View
+                                    style={{
+                                        position: 'absolute',
+                                        left: arrow.x - arrowSize / 2,
+                                        top: arrow.y - arrowSize / 2,
+                                        width: arrowSize,
+                                        height: arrowSize,
+                                        backgroundColor: arrowColor,
+                                        transform: [{ rotate: '45deg' }],
+                                    }}
+                                    testID={
+                                        testID ? `${testID}-arrow` : undefined
+                                    }
+                                />
+                            ) : null}
+                        </Animated.View>
+                    </View>
+                </Portal>
+            ) : null}
+        </>
+    )
+}
+
+AnchoredOverlay.displayName = 'AnchoredOverlay'
+
+const styles = StyleSheet.create({
+    positioner: { position: 'absolute' },
+    unmeasured: { left: 0, top: 0, opacity: 0 },
+})
+
+export default AnchoredOverlay