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

package/src/components/SingleSelect/SingleSelectTrigger.tsx

@@ -0,0 +1,222 @@
+import React, {
+    forwardRef,
+    memo,
+    type ForwardRefExoticComponent,
+    type MemoExoticComponent,
+} from 'react'
+import { ChevronDown } from 'lucide-react-native'
+import type { View as RNView } from 'react-native'
+import {
+    SelectV2Variant,
+    SelectV2Size,
+    type SingleSelectV2TokensType,
+} from '@juspay/blend-design-system/node'
+import { Pressable } from '../../primitives/Pressable'
+import { Text } from '../../primitives/Text'
+import { Block } from '../../primitives/Block'
+import { Slot } from '../../primitives/Slot'
+import { getFieldState, type FieldError } from '../shared/field/fieldState'
+import type { DropdownTriggerState } from '../shared/dropdown/dropdown.types'
+import type { SelectV2ErrorState } from '@juspay/blend-design-system/node'
+
+export type SingleSelectTriggerProps = {
+    label?: string
+    subLabel?: string
+    hintText?: string
+    required?: boolean
+    placeholder: string
+    selectedLabel?: string
+    size: SelectV2Size
+    variant: SelectV2Variant
+    disabled: boolean
+    state: DropdownTriggerState
+    error?: SelectV2ErrorState
+    tokens: SingleSelectV2TokensType
+    slot?: React.ReactNode
+    testID?: string
+    accessibilityLabel?: string
+    onPress?: () => void
+}
+
+function SingleSelectTriggerImpl(
+    props: SingleSelectTriggerProps,
+    ref: React.Ref<RNView>
+) {
+    const {
+        label,
+        subLabel,
+        hintText,
+        required = false,
+        placeholder,
+        selectedLabel,
+        size,
+        variant,
+        disabled,
+        state,
+        error,
+        tokens,
+        slot,
+        testID,
+        accessibilityLabel,
+        onPress,
+    } = props
+
+    const fieldError: FieldError = error
+        ? { show: Boolean(error.show), message: error.message }
+        : undefined
+    const fieldState = getFieldState(fieldError, disabled)
+    const trigger = tokens.trigger
+
+    const backgroundColor = String(
+        trigger.backgroundColor[variant][state] ??
+            trigger.backgroundColor[variant].closed
+    )
+    const border = trigger.outline[variant][state]
+    const height = trigger.height[size][variant]
+    const padding = trigger.padding[size][variant]
+    const borderRadius = trigger.borderRadius[size][variant]
+
+    const showSelected = Boolean(selectedLabel)
+    const textColor = showSelected
+        ? String(trigger.selectedValue.color)
+        : String(trigger.placeholder.color)
+    const fontSize = showSelected
+        ? trigger.selectedValue.fontSize
+        : trigger.placeholder.fontSize
+    const fontWeight = showSelected
+        ? trigger.selectedValue.fontWeight
+        : trigger.placeholder.fontWeight
+
+    const showError = Boolean(fieldError?.show && fieldError?.message)
+    const stateKey = fieldState as string
+
+    return (
+        <>
+            {label ? (
+                <Block
+                    flexDirection="row"
+                    alignItems="center"
+                    gap={4}
+                    width="100%"
+                    testID={testID ? `${testID}-labels` : undefined}
+                >
+                    <Text
+                        fontSize={tokens.label.fontSize}
+                        fontWeight={tokens.label.fontWeight}
+                        color={String(
+                            tokens.label.color[
+                                stateKey as keyof typeof tokens.label.color
+                            ]
+                        )}
+                    >
+                        {label}
+                    </Text>
+                    {required ? (
+                        <Text
+                            color={String(tokens.required.color)}
+                            fontSize={tokens.label.fontSize}
+                            accessibilityElementsHidden
+                            importantForAccessibility="no-hide-descendants"
+                        >
+                            *
+                        </Text>
+                    ) : null}
+                    {subLabel ? (
+                        <Text
+                            fontSize={tokens.subLabel.fontSize}
+                            fontWeight={tokens.subLabel.fontWeight}
+                            color={String(
+                                tokens.subLabel.color[
+                                    stateKey as keyof typeof tokens.subLabel.color
+                                ]
+                            )}
+                        >
+                            ({subLabel})
+                        </Text>
+                    ) : null}
+                </Block>
+            ) : null}
+            <Pressable
+                ref={ref}
+                background={backgroundColor}
+                border={border ? String(border) : undefined}
+                borderRadius={borderRadius}
+                boxShadow={trigger.boxShadow[variant]}
+                paddingTop={padding.top}
+                paddingRight={padding.right}
+                paddingBottom={padding.bottom}
+                paddingLeft={padding.left}
+                flexDirection="row"
+                alignItems="center"
+                gap={trigger.slot.gap}
+                width="100%"
+                height={height}
+                disabled={disabled}
+                onPress={onPress}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? label ?? placeholder}
+                accessibilityState={{
+                    disabled,
+                    expanded: state === 'open',
+                }}
+                testID={testID}
+            >
+                {slot ? (
+                    <Slot maxHeight={trigger.slot.width} hidden>
+                        {slot}
+                    </Slot>
+                ) : null}
+                <Text
+                    fontSize={fontSize}
+                    fontWeight={fontWeight}
+                    color={textColor}
+                    style={{ flex: 1, flexShrink: 1 }}
+                    numberOfLines={1}
+                >
+                    {showSelected ? selectedLabel : placeholder}
+                </Text>
+                <ChevronDown
+                    size={16}
+                    color={String(trigger.placeholder.color)}
+                />
+            </Pressable>
+            {showError ? (
+                <Block
+                    width="100%"
+                    testID={testID ? `${testID}-footer` : undefined}
+                >
+                    <Text
+                        accessibilityLiveRegion="polite"
+                        color={String(tokens.errorMessage.color)}
+                        fontSize={tokens.errorMessage.fontSize}
+                        fontWeight={tokens.errorMessage.fontWeight}
+                    >
+                        {fieldError?.message}
+                    </Text>
+                </Block>
+            ) : hintText ? (
+                <Block
+                    width="100%"
+                    testID={testID ? `${testID}-footer` : undefined}
+                >
+                    <Text
+                        color={String(tokens.hintText.color.default)}
+                        fontSize={tokens.hintText.fontSize}
+                        fontWeight={tokens.hintText.fontWeight}
+                    >
+                        {hintText}
+                    </Text>
+                </Block>
+            ) : null}
+        </>
+    )
+}
+
+export const SingleSelectTrigger = memo(
+    forwardRef(SingleSelectTriggerImpl)
+) as MemoExoticComponent<
+    ForwardRefExoticComponent<
+        SingleSelectTriggerProps & { ref?: React.Ref<RNView> }
+    >
+>
+SingleSelectTrigger.displayName = 'SingleSelectTrigger'

package/src/components/SingleSelect/index.ts

@@ -0,0 +1,13 @@
+export { default as SingleSelect } from './SingleSelect'
+export type {
+    SingleSelectNativeProps,
+    SingleSelectRef,
+} from './singleSelect.types'
+export type {
+    SingleSelectV2ItemType,
+    SingleSelectV2GroupType,
+    SelectV2Alignment,
+    SelectV2Variant,
+    SelectV2Size,
+    SelectV2Side,
+} from './singleSelect.types'

package/src/components/SingleSelect/singleSelect.types.ts

@@ -0,0 +1,68 @@
+import type { ReactElement, ReactNode } from 'react'
+import type { View as RNView } from 'react-native'
+import type {
+    SelectV2Alignment,
+    SelectV2Variant,
+    SelectV2Size,
+    SelectV2Side,
+    SingleSelectV2ItemType,
+    SingleSelectV2GroupType,
+    SelectV2ErrorState,
+    SelectV2SearchConfig,
+} from '@juspay/blend-design-system/node'
+
+/**
+ * SingleSelect — React Native implementation of web's `SingleSelectV2`.
+ *
+ * A trigger button that opens a dropdown panel; selecting an item fires
+ * `onSelect(value)` and closes the panel. Supports search, sub-menus,
+ * custom triggers, error state, and mobile bottom-sheet mode.
+ */
+export type SingleSelectNativeProps = {
+    label?: string
+    subLabel?: string
+    hintText?: string
+    required?: boolean
+
+    placeholder: string
+    size?: SelectV2Size
+    variant?: SelectV2Variant
+
+    items: SingleSelectV2GroupType[]
+    selected: string
+    onSelect: (value: string) => void
+
+    search?: SelectV2SearchConfig
+
+    slot?: ReactNode
+    customTrigger?: ReactElement
+
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+
+    usePanelOnMobile?: boolean
+
+    alignment?: SelectV2Alignment
+    side?: SelectV2Side
+    sideOffset?: number
+
+    error?: SelectV2ErrorState
+    disabled?: boolean
+
+    enableVirtualization?: boolean
+
+    allowCustomValue?: boolean
+    customValueLabel?: string
+
+    menuFooter?: ReactNode
+
+    testID?: string
+    accessibilityLabel?: string
+    style?: import('react-native').StyleProp<import('react-native').ViewStyle>
+}
+
+export type { SingleSelectV2ItemType }
+export type { SingleSelectV2GroupType }
+export type { SelectV2Alignment, SelectV2Variant, SelectV2Size, SelectV2Side }
+
+export type SingleSelectRef = RNView

package/src/components/SingleSelect/singleSelect.utils.ts

@@ -0,0 +1,175 @@
+import {
+    SelectV2Variant,
+    SelectV2Size,
+    type SingleSelectV2ItemType,
+    type SingleSelectV2GroupType,
+    type SingleSelectV2TokensType,
+    type SelectV2ItemStates,
+} from '@juspay/blend-design-system/node'
+import type {
+    DropdownItemAdapter,
+    DropdownContentTokens,
+    DropdownItemTokens,
+    DropdownItemState,
+    DropdownTriggerState,
+} from '../shared/dropdown/dropdown.types'
+import type { FilterableItem } from '../shared/dropdown/dropdownFilter'
+
+/**
+ * Adapt a `SingleSelectV2ItemType` to the common `DropdownItemAdapter`.
+ *
+ * SingleSelect items use `label` (string) directly, not the `{ text,
+ * leftSlot }` shape Menu uses. The selected state is derived by comparing
+ * `item.value` against the `selectedValue` prop.
+ */
+export function singleSelectItemAdapter(
+    item: SingleSelectV2ItemType,
+    index: number,
+    selectedValue: string
+): DropdownItemAdapter<SingleSelectV2ItemType> {
+    return {
+        id: `ss-item-${index}`,
+        primaryText: item.label,
+        secondaryText: item.subLabel,
+        leadingSlot: item.slot1,
+        trailingSlot: item.slot2,
+        disabled: item.disabled,
+        isSelected: item.value === selectedValue,
+        hasSubMenu: Boolean(item.subMenu && item.subMenu.length > 0),
+        variant: 'default',
+        item,
+    }
+}
+
+/** Build a value→label map for resolving the selected value's display text. */
+export function getValueLabelMap(
+    groups: SingleSelectV2GroupType[]
+): Record<string, string> {
+    const map: Record<string, string> = {}
+    const traverse = (items: SingleSelectV2ItemType[]) => {
+        for (const item of items) {
+            map[item.value] = item.label
+            if (item.subMenu) traverse(item.subMenu)
+        }
+    }
+    for (const group of groups) traverse(group.items)
+    return map
+}
+
+/** Resolve the trigger state for token lookup. */
+export function getTriggerState(
+    open: boolean,
+    disabled: boolean,
+    hasError: boolean
+): DropdownTriggerState {
+    if (disabled) return 'closed'
+    if (hasError) return 'error'
+    if (open) return 'open'
+    return 'closed'
+}
+
+/** Convert a SingleSelect item to a filterable shape. */
+export function toFilterableItem(
+    item: SingleSelectV2ItemType
+): FilterableItem<SingleSelectV2ItemType> {
+    return {
+        primaryText: item.label,
+        secondaryText: item.subLabel,
+        subItems: item.subMenu?.map(toFilterableItem),
+    }
+}
+
+/**
+ * Map SingleSelectV2 content tokens to the shared `DropdownContentTokens`.
+ */
+export function getSingleSelectContentTokens(
+    tokens: SingleSelectV2TokensType,
+    size: SelectV2Size,
+    variant: SelectV2Variant
+): DropdownContentTokens {
+    const menu = tokens.menu
+    return {
+        backgroundColor: String(menu.content.backgroundColor),
+        border: String(menu.content.border),
+        borderRadius: menu.content.borderRadius,
+        boxShadow: String(menu.content.boxShadow),
+        paddingTop: menu.padding[size][variant].top,
+        paddingRight: menu.padding[size][variant].right,
+        paddingBottom: menu.padding[size][variant].bottom,
+        paddingLeft: menu.padding[size][variant].left,
+    }
+}
+
+/** Map SingleSelectV2 item tokens to the shared `DropdownItemTokens`. */
+export function getSingleSelectItemTokens(
+    tokens: SingleSelectV2TokensType
+): DropdownItemTokens {
+    const item = tokens.menu.item
+    const states: DropdownItemState[] = [
+        'default',
+        'hover',
+        'active',
+        'focus',
+        'focusVisible',
+        'disabled',
+        'selected',
+    ]
+    const bgRecord = {} as Record<DropdownItemState, string>
+    const colorRecord = {} as Record<DropdownItemState, string>
+    const subColorRecord = {} as Record<DropdownItemState, string>
+    for (const s of states) {
+        bgRecord[s] = String(item.backgroundColor[s as SelectV2ItemStates])
+        colorRecord[s] = String(item.option.color[s as SelectV2ItemStates])
+        subColorRecord[s] = String(
+            item.description.color[s as SelectV2ItemStates]
+        )
+    }
+
+    return {
+        paddingTop: item.paddingTop,
+        paddingRight: item.paddingRight,
+        paddingBottom: item.paddingBottom,
+        paddingLeft: item.paddingLeft,
+        margin: item.margin,
+        gap: item.gap,
+        borderRadius: item.borderRadius,
+        backgroundColor: bgRecord,
+        text: {
+            fontSize: item.option.fontSize,
+            fontWeight: item.option.fontWeight,
+            color: colorRecord,
+            subText: {
+                fontSize: item.description.fontSize,
+                fontWeight: item.description.fontWeight,
+                color: subColorRecord,
+            },
+            leftSlot: {
+                maxWidth: 20,
+                maxHeight: 20,
+            },
+            rightChevron: {
+                color: '#6B7280',
+                width: 16,
+            },
+        },
+    }
+}
+
+/** Flatten groups into adapter-backed groups for the dropdown list. */
+export function flattenSingleSelectGroups(
+    groups: SingleSelectV2GroupType[],
+    selectedValue: string
+): Array<{
+    label?: string
+    items: DropdownItemAdapter<SingleSelectV2ItemType>[]
+    showSeparator?: boolean
+}> {
+    let globalIndex = 0
+    return groups.map((group) => ({
+        label: group.groupLabel,
+        items: group.items.map((item) =>
+            singleSelectItemAdapter(item, globalIndex++, selectedValue)
+        ),
+        showSeparator: group.showSeparator,
+    }))
+}

package/src/components/Skeleton/skeleton.types.ts

@@ -1,5 +1,5 @@
 import type React from 'react'
-import type { ViewStyle } from 'react-native'
+import type { StyleProp, ViewStyle } from 'react-native'
 import type {
     SkeletonShape,
     SkeletonVariant,
@@ -23,6 +23,6 @@ export type SkeletonNativeProps = {
     borderRadius?: number
     /** Wrap mode: content keeps its layout, renders invisible. */
     children?: React.ReactNode
-    style?: ViewStyle
+    style?: StyleProp<ViewStyle>
     testID?: string
 }

package/src/components/Snackbar/SnackbarToast.tsx

@@ -0,0 +1,158 @@
+import { View, Pressable as RNPressable } from 'react-native'
+import {
+    CircleAlert,
+    CircleCheckBig,
+    Info,
+    TriangleAlert,
+    X,
+} from 'lucide-react-native'
+import { SnackbarV2Variant } from '@juspay/blend-design-system/node'
+import type { SnackbarV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import {
+    parseBorderRadius,
+    parseBoxShadow,
+    parseDimension,
+} from '../../adapters/cssStringAdapter'
+import Text from '../../primitives/Text'
+import Slot from '../../primitives/Slot'
+import type { SnackbarOptions } from './snackbar.types'
+
+const VARIANT_ICON = {
+    [SnackbarV2Variant.INFO]: Info,
+    [SnackbarV2Variant.SUCCESS]: CircleCheckBig,
+    [SnackbarV2Variant.WARNING]: TriangleAlert,
+    [SnackbarV2Variant.ERROR]: CircleAlert,
+} as const
+
+/**
+ * The styled toast body `addSnackbar` mounts through the host — web's
+ * `StyledToast`, from the same SNACKBARV2 tokens. Rendered inside the
+ * provider's toast outlet, so `useNativeTokens` resolves normally.
+ */
+export function SnackbarToast({
+    options,
+    dismiss,
+}: {
+    options: SnackbarOptions
+    dismiss: () => void
+}) {
+    const tokens = useNativeTokens<SnackbarV2TokensType>('SNACKBARV2')
+    const variant = options.variant ?? SnackbarV2Variant.INFO
+    const Icon = VARIANT_ICON[variant]
+
+    const text = tokens.mainContainer.content.textContainer
+    const action = tokens.mainContainer.content.actionContainer.primaryAction
+    const iconSize = parseDimension(tokens.slot.width as string | number) ?? 16
+    const radius = parseBorderRadius(tokens.borderRadius as string | number)
+
+    const handleClose = () => {
+        dismiss()
+        options.onClose?.()
+    }
+
+    const handleAction = () => {
+        options.actionButton?.onPress()
+        if (options.actionButton?.autoDismiss !== false) dismiss()
+    }
+
+    return (
+        <View
+            testID={options.testID ?? 'blend-snackbar'}
+            style={{
+                alignSelf: 'stretch',
+                flexDirection: 'row',
+                backgroundColor: String(tokens.backgroundColor),
+                padding:
+                    parseDimension(tokens.padding as string | number) ?? 16,
+                gap: parseDimension(tokens.gap as string | number) ?? 8,
+                ...(typeof radius === 'number'
+                    ? { borderRadius: radius }
+                    : (radius ?? {})),
+                ...(parseBoxShadow(String(tokens.boxShadow)) ?? {}),
+            }}
+        >
+            <Slot maxHeight={iconSize}>
+                {options.slot ?? (
+                    <Icon
+                        size={iconSize}
+                        color={String(tokens.slot.color[variant])}
+                    />
+                )}
+            </Slot>
+            <View
+                style={{
+                    flexShrink: 1,
+                    flexGrow: 1,
+                    gap:
+                        parseDimension(
+                            tokens.mainContainer.content.gap as string | number
+                        ) ?? 4,
+                }}
+            >
+                <Text
+                    fontSize={text.header.fontSize as string | number}
+                    fontWeight={text.header.fontWeight as string | number}
+                    lineHeight={text.header.lineHeight as string | number}
+                    color={String(text.header.color[variant])}
+                >
+                    {options.header}
+                </Text>
+                {options.description ? (
+                    <Text
+                        fontSize={text.description.fontSize as string | number}
+                        fontWeight={
+                            text.description.fontWeight as string | number
+                        }
+                        lineHeight={
+                            text.description.lineHeight as string | number
+                        }
+                        color={String(text.description.color[variant])}
+                    >
+                        {options.description}
+                    </Text>
+                ) : null}
+                {options.actionButton ? (
+                    <RNPressable
+                        onPress={handleAction}
+                        accessibilityRole="button"
+                        accessibilityLabel={options.actionButton.label}
+                        hitSlop={8}
+                        style={{ alignSelf: 'flex-start' }}
+                        testID={`${options.testID ?? 'blend-snackbar'}-action`}
+                    >
+                        <Text
+                            fontSize={action.fontSize as string | number}
+                            fontWeight={action.fontWeight as string | number}
+                            color={String(action.color[variant])}
+                        >
+                            {options.actionButton.label}
+                        </Text>
+                    </RNPressable>
+                ) : null}
+            </View>
+            <RNPressable
+                onPress={handleClose}
+                accessibilityRole="button"
+                accessibilityLabel="Dismiss notification"
+                hitSlop={8}
+                testID={`${options.testID ?? 'blend-snackbar'}-close`}
+            >
+                <X
+                    size={
+                        parseDimension(
+                            tokens.mainContainer.closeButton.height as
+                                | string
+                                | number
+                        ) ?? 16
+                    }
+                    color={String(
+                        tokens.mainContainer.closeButton.color[variant]
+                    )}
+                />
+            </RNPressable>
+        </View>
+    )
+}
+
+SnackbarToast.displayName = 'SnackbarToast'

package/src/components/Snackbar/index.ts

@@ -0,0 +1,7 @@
+export { addSnackbar, dismissSnackbar } from './snackbar'
+export { SnackbarToast } from './SnackbarToast'
+export type { SnackbarOptions, SnackbarAction } from './snackbar.types'
+export {
+    resolveSnackbarDuration,
+    resetSnackbarWarnings,
+} from './snackbar.utils'

package/src/components/Snackbar/snackbar.tsx

@@ -0,0 +1,26 @@
+import { dismissToast, showToast } from '../../overlay/toast/toastStore'
+import { buildAnnouncement } from '../../a11y/announcement'
+import { SnackbarToast } from './SnackbarToast'
+import { resolveSnackbarDuration } from './snackbar.utils'
+import type { SnackbarOptions } from './snackbar.types'
+
+/**
+ * Imperative snackbar — the native port of web's `addSnackbarV2`, riding
+ * the provider-mounted toast host (bottom stack, exit animation, paused
+ * timers, topmost layering). Returns the id for `dismissSnackbar`.
+ */
+export function addSnackbar(options: SnackbarOptions): string {
+    return showToast({
+        id: options.id,
+        duration: resolveSnackbarDuration(options.duration),
+        announcement: buildAnnouncement(options.header, options.description),
+        content: (dismiss) => (
+            <SnackbarToast options={options} dismiss={dismiss} />
+        ),
+    })
+}
+
+/** Dismiss one snackbar by id, or every toast when called without one. */
+export function dismissSnackbar(id?: string): void {
+    dismissToast(id)
+}