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

package/src/components/Upload/upload.utils.ts

@@ -0,0 +1,229 @@
+import {
+    UploadErrorReason,
+    UploadState,
+    type UploadErrorReasonValue,
+} from '@juspay/blend-design-system/node'
+import type { UploadFileNativeItem } from './upload.types'
+
+/**
+ * Pure helpers for the native `Upload`, ported from web's
+ * `InputsV2/UploadV2/utils.ts`. DOM-bound pieces (`createClickHandler`,
+ * `useUploadState`, `createDragHandlers`) are deliberately not ported —
+ * there is no file input and no drag-and-drop on RN.
+ */
+
+export const FILE_NAME_TAG_MAX_LEN = 24
+
+export const truncateFileNameForTag = (name: string): string =>
+    name.length > FILE_NAME_TAG_MAX_LEN
+        ? `${name.slice(0, FILE_NAME_TAG_MAX_LEN)}…`
+        : name
+
+/**
+ * Web's `getFileId` reads `file.lastModified`, which a DOM `File` has and a
+ * picker result does not. Native falls back to `Date.now()` plus the index,
+ * keeping the same "unique per batch" guarantee.
+ */
+export const getFileId = (
+    uploadFile: UploadFileNativeItem,
+    index: number
+): string =>
+    uploadFile.id ??
+    `${uploadFile.name}-${uploadFile.size}-${Date.now()}-${index}`
+
+/**
+ * Web's `isFileTypeAccepted` operating on `{name, type}` instead of a DOM
+ * `File` — the exact shape `UploadFileNativeItem` carries. Extension
+ * (`.pdf`), group (`image/*`) and exact-mime (`application/pdf`) rules are
+ * identical, as is the empty-list-accepts-everything behaviour.
+ */
+export const isFileTypeAccepted = (
+    file: { name: string; type?: string },
+    acceptedFileTypes: string[]
+): boolean => {
+    if (acceptedFileTypes.length === 0) return true
+
+    const fileName = file.name.toLowerCase()
+    const fileType = (file.type ?? '').toLowerCase()
+
+    return acceptedFileTypes.some((acceptedType) => {
+        const normalizedAcceptedType = acceptedType.trim().toLowerCase()
+        if (!normalizedAcceptedType) return false
+
+        if (normalizedAcceptedType.startsWith('.')) {
+            return fileName.endsWith(normalizedAcceptedType)
+        }
+
+        if (normalizedAcceptedType.endsWith('/*')) {
+            const acceptedGroup = normalizedAcceptedType.slice(0, -1)
+            return fileType.startsWith(acceptedGroup)
+        }
+
+        return fileType === normalizedAcceptedType
+    })
+}
+
+export const formatFileSize = (sizeInBytes: number): string => {
+    if (sizeInBytes >= 1024 * 1024) {
+        const sizeInMb = sizeInBytes / (1024 * 1024)
+        return `${Number(sizeInMb.toFixed(2))} MB`
+    }
+    if (sizeInBytes >= 1024) {
+        const sizeInKb = sizeInBytes / 1024
+        return `${Number(sizeInKb.toFixed(2))} KB`
+    }
+    return `${sizeInBytes} B`
+}
+
+const KNOWN_UPLOAD_ERROR_REASONS = [
+    'oversized',
+    'maxFiles',
+    'invalidType',
+] as const
+type KnownUploadErrorReason = (typeof KNOWN_UPLOAD_ERROR_REASONS)[number]
+
+export const isKnownUploadErrorReason = (
+    reason: unknown
+): reason is KnownUploadErrorReason =>
+    KNOWN_UPLOAD_ERROR_REASONS.includes(reason as KnownUploadErrorReason)
+
+export const normalizeUploadErrorReason = (reason: unknown) =>
+    isKnownUploadErrorReason(reason) ? reason : undefined
+
+export const getValidationMessage = (
+    reason?: unknown,
+    maxSize?: number,
+    maxFiles?: number
+): string => {
+    switch (normalizeUploadErrorReason(reason)) {
+        case 'oversized':
+            return maxSize
+                ? `File is too large. Max size is ${formatFileSize(maxSize)}`
+                : 'File is too large'
+        case 'maxFiles':
+            return maxFiles
+                ? `File limit exceeded. Maximum ${maxFiles} files allowed`
+                : 'File limit exceeded'
+        case 'invalidType':
+            return 'Invalid file type'
+        default:
+            return 'Invalid file'
+    }
+}
+
+/**
+ * The validation half of web's inline `validateFiles`, extracted so apps can
+ * fulfill the native API contract: `onChange` hands back
+ * `UploadFileNativeItem`s already marked, but the app is the one producing
+ * items from a picker, so it must run this before appending.
+ *
+ * Marks each item with `isValid`/`errorReason` in web's precedence order —
+ * maxFiles (index ≥ remaining slots), invalid type, oversized — and returns
+ * new copies; the input array is never mutated.
+ *
+ * `remainingSlots` semantics match web: `maxFiles` limits a multi-upload
+ * against the files already present (`existingCount`); when `multiple` is
+ * false the limit is 1 with no credit for existing files (a single-file
+ * upload replaces, it does not append).
+ */
+export type ValidateUploadFilesOptions = {
+    acceptedTypes?: string[]
+    maxSize?: number
+    maxFiles?: number
+    multiple?: boolean
+    existingCount?: number
+}
+
+export const validateUploadFiles = (
+    items: UploadFileNativeItem[],
+    {
+        acceptedTypes = [],
+        maxSize = 0,
+        maxFiles,
+        multiple = true,
+        existingCount = 0,
+    }: ValidateUploadFilesOptions = {}
+): UploadFileNativeItem[] => {
+    const limit = maxFiles ?? (multiple ? undefined : 1)
+    const remainingSlots =
+        limit !== undefined && multiple
+            ? limit - existingCount
+            : (limit ?? Infinity)
+
+    return items.map((item, index) => {
+        const base = {
+            ...item,
+            id: item.id ?? `${item.name}-${item.size}-${Date.now()}-${index}`,
+        }
+
+        if (limit !== undefined && index >= remainingSlots) {
+            return {
+                ...base,
+                isValid: false,
+                errorReason: UploadErrorReason.MAX_FILES,
+            }
+        }
+
+        if (!isFileTypeAccepted(item, acceptedTypes)) {
+            return {
+                ...base,
+                isValid: false,
+                errorReason: UploadErrorReason.INVALID_TYPE,
+            }
+        }
+
+        if (maxSize && item.size > maxSize) {
+            return {
+                ...base,
+                isValid: false,
+                errorReason: UploadErrorReason.OVERSIZED,
+            }
+        }
+
+        return { ...base, isValid: true }
+    })
+}
+
+/**
+ * Native state derivation — deliberately NOT the shared `getFieldState`:
+ * invalid files force ERROR even when the prop `state` is IDLE, which is
+ * web's `displayUploadState` resolution.
+ */
+export const getUploadDisplayState = (
+    state: UploadState = UploadState.IDLE,
+    disabled?: boolean,
+    hasInvalidFiles?: boolean
+): UploadState => {
+    if (disabled || state === UploadState.DISABLED) return UploadState.DISABLED
+    if (hasInvalidFiles) return UploadState.ERROR
+    return state
+}
+
+/**
+ * The single-file error aggregation web renders inside the container when
+ * `state===ERROR && !errorText && !multiple`: collect the distinct reasons
+ * across invalid files, in the fixed oversized → maxFiles → invalidType
+ * order, and join their messages. Returns the generic message when there
+ * are no invalid files.
+ */
+export const getAggregatedErrorMessage = (
+    files: UploadFileNativeItem[],
+    maxSize?: number,
+    maxFiles?: number
+): string => {
+    const reasons = new Set<UploadErrorReasonValue>()
+    for (const file of files) {
+        const reason = normalizeUploadErrorReason(file.errorReason)
+        if (reason) reasons.add(reason)
+    }
+    const errors: string[] = []
+    if (reasons.has(UploadErrorReason.OVERSIZED))
+        errors.push(getValidationMessage('oversized', maxSize, maxFiles))
+    if (reasons.has(UploadErrorReason.MAX_FILES))
+        errors.push(getValidationMessage('maxFiles', maxSize, maxFiles))
+    if (reasons.has(UploadErrorReason.INVALID_TYPE))
+        errors.push(getValidationMessage('invalidType', maxSize, maxFiles))
+    return errors.length > 0
+        ? errors.join(', ')
+        : getValidationMessage(undefined, maxSize, maxFiles)
+}

package/src/components/shared/GroupView.tsx

@@ -0,0 +1,86 @@
+import { Children, cloneElement, forwardRef, isValidElement } from 'react'
+import { View } from 'react-native'
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native'
+import type { ReactNode, ReactElement } from 'react'
+import { FOUNDATION_THEME } from '@juspay/blend-design-system/node'
+import { parseDimension } from '../../adapters/cssStringAdapter'
+import { getGroupPosition } from './group'
+
+/**
+ * Internal container behind `ButtonGroup` and `TagGroup` — the native
+ * analogue of web's `Primitives/Group`. Not exported from the package.
+ *
+ * Mirrors web's behavior exactly:
+ * - `stacked` joins members edge to edge (zero gap) and injects each child's
+ *   position through `positionProp` via `cloneElement`; the child collapses
+ *   its own radius/borders from that prop.
+ * - Non-stacked renders children verbatim with a gap — no injection.
+ * - Non-element children pass through untouched.
+ *
+ * Divergence from web's `role="group"` + `aria-label`: the container is
+ * deliberately NOT `accessible` — on RN that collapses every member into one
+ * accessibility node and makes them individually unreachable (the Alert
+ * container regression). `accessibilityLabel` is still set for test hooks
+ * and future platform support.
+ */
+
+/** Web's Group default gap: `FOUNDATION_THEME.unit[10]`. */
+const DEFAULT_GAP = parseDimension(String(FOUNDATION_THEME.unit[10])) ?? 10
+
+export type GroupViewProps = {
+    stacked?: boolean
+    gap?: number | string
+    positionProp: 'buttonGroupPosition' | 'tagGroupPosition'
+    children: ReactNode
+    accessibilityLabel?: string
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}
+
+const GroupView = forwardRef<RNView, GroupViewProps>(function GroupView(
+    {
+        stacked = false,
+        gap,
+        positionProp,
+        children,
+        accessibilityLabel,
+        testID,
+        style,
+    },
+    ref
+) {
+    const resolvedGap = stacked ? 0 : (parseDimension(gap) ?? DEFAULT_GAP)
+
+    const totalChildren = Children.count(children)
+    const content = stacked
+        ? Children.map(children, (child, index) => {
+              if (!isValidElement(child)) return child
+              return cloneElement(
+                  child as ReactElement<Record<string, unknown>>,
+                  {
+                      [positionProp]: getGroupPosition(index, totalChildren),
+                  }
+              )
+          })
+        : children
+
+    return (
+        <View
+            ref={ref}
+            accessibilityLabel={accessibilityLabel}
+            testID={testID}
+            style={[
+                {
+                    flexDirection: 'row',
+                    alignItems: 'stretch',
+                    gap: resolvedGap,
+                },
+                style,
+            ]}
+        >
+            {content}
+        </View>
+    )
+})
+
+export default GroupView

package/src/components/shared/dropdown/DropdownContent.tsx

@@ -0,0 +1,156 @@
+import React, { useCallback, useRef, useState } from 'react'
+import {
+    Pressable as RNPressable,
+    StyleSheet,
+    type LayoutChangeEvent,
+} from 'react-native'
+import Animated, {
+    Easing,
+    runOnJS,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated'
+import {
+    parseBorder,
+    parseBoxShadow,
+    parseDimension,
+} from '../../../adapters/cssStringAdapter'
+import { Portal } from '../../../overlay/portal'
+import { Block } from '../../../primitives/Block'
+import { MOTION_DURATION, MOTION_EASING } from '../../../motion/motion'
+import { useReduceMotion } from '../../../motion/useReduceMotion'
+import type { AnchoredPosition } from '../../../overlay/positioning'
+import type { DropdownContentTokens } from './dropdown.types'
+
+/**
+ * The floating panel — a `Portal`-rendered `Animated.View` with a
+ * scale-fade entrance, positioned against the anchor via
+ * `useAnchoredPosition`.
+ *
+ * Stays transparent (opacity 0) until `position` lands — the content must
+ * remain mounted so `onLayout` fires, but should not flash at `{0, 0}`
+ * before measurement completes.
+ */
+export type DropdownContentProps = {
+    open: boolean
+    onClose: () => void
+    position: AnchoredPosition | null
+    onContentLayout: (event: LayoutChangeEvent) => void
+    tokens: DropdownContentTokens
+    children?: React.ReactNode
+    testID?: string
+    accessibilityLabel?: string
+}
+
+const ENTER = {
+    duration: MOTION_DURATION.normal,
+    easing: Easing.bezier(...MOTION_EASING.decelerate),
+}
+const EXIT = {
+    duration: MOTION_DURATION.fast,
+    easing: Easing.bezier(...MOTION_EASING.accelerate),
+}
+
+export function DropdownContent({
+    open,
+    onClose,
+    position,
+    onContentLayout,
+    tokens,
+    children,
+    testID,
+    accessibilityLabel,
+}: DropdownContentProps) {
+    const reduceMotion = useReduceMotion()
+    const progress = useSharedValue(0)
+    const [mounted, setMounted] = useState(open)
+
+    React.useEffect(() => {
+        if (open) {
+            setMounted(true)
+            progress.value = withTiming(1, ENTER)
+        } else {
+            progress.value = withTiming(0, EXIT, (finished) => {
+                if (finished) runOnJS(setMounted)(false)
+            })
+        }
+    }, [open, progress])
+
+    const animatedStyle = useAnimatedStyle(() => {
+        if (reduceMotion) {
+            return { opacity: progress.value }
+        }
+        return {
+            opacity: progress.value,
+            transform: [{ scale: 0.95 + 0.05 * progress.value }],
+        }
+    }, [reduceMotion])
+
+    const handleBackdropPress = useCallback(() => {
+        onClose()
+    }, [onClose])
+
+    const lastPosition = useRef<AnchoredPosition | null>(null)
+    if (position) lastPosition.current = position
+    const effectivePosition = position ?? lastPosition.current
+
+    if (!mounted) return null
+
+    const hasPosition = effectivePosition !== null
+
+    return (
+        <Portal>
+            {/* Backdrop — transparent press-catcher that closes on tap */}
+            <RNPressable
+                style={StyleSheet.absoluteFill}
+                onPress={handleBackdropPress}
+                accessibilityLabel="Close dropdown"
+                accessibilityRole="button"
+            />
+            <Animated.View
+                onLayout={onContentLayout}
+                style={[
+                    styles.container,
+                    {
+                        backgroundColor: tokens.backgroundColor,
+                        borderRadius: parseDimension(tokens.borderRadius),
+                        ...(parseBorder(tokens.border) ?? {}),
+                        ...(parseBoxShadow(tokens.boxShadow) ?? {}),
+                        paddingTop: parseDimension(tokens.paddingTop),
+                        paddingRight: parseDimension(tokens.paddingRight),
+                        paddingBottom: parseDimension(tokens.paddingBottom),
+                        paddingLeft: parseDimension(tokens.paddingLeft),
+                        minWidth: parseDimension(tokens.minWidth),
+                        maxWidth: parseDimension(tokens.maxWidth),
+                        maxHeight: hasPosition
+                            ? effectivePosition!.maxHeight
+                            : undefined,
+                        // Hidden until position lands so the content does
+                        // not flash at {0,0} before measurement completes.
+                        opacity: hasPosition ? undefined : 0,
+                        position: 'absolute',
+                        left: hasPosition ? effectivePosition!.x : 0,
+                        top: hasPosition ? effectivePosition!.y : 0,
+                    },
+                    animatedStyle,
+                ]}
+                accessibilityRole="menu"
+                accessibilityLabel={accessibilityLabel}
+                testID={testID}
+            >
+                <Block width="100%" overflow="hidden">
+                    {children}
+                </Block>
+            </Animated.View>
+        </Portal>
+    )
+}
+
+DropdownContent.displayName = 'DropdownContent'
+
+const styles = StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+    },
+})

package/src/components/shared/dropdown/DropdownItem.tsx

@@ -0,0 +1,176 @@
+import { forwardRef, memo, useCallback } from 'react'
+import { View, type View as RNView } from 'react-native'
+import { Check, ChevronRight } from 'lucide-react-native'
+import { Pressable } from '../../../primitives/Pressable'
+import { Text } from '../../../primitives/Text'
+import { Slot } from '../../../primitives/Slot'
+import { parseDimension } from '../../../adapters/cssStringAdapter'
+import type { DropdownItemAdapter, DropdownItemTokens } from './dropdown.types'
+
+/**
+ * A pressable row inside a dropdown list: leading slot + label + sublabel
+ * + trailing checkmark/chevron. Generic over the item type so Menu,
+ * SingleSelect, and MultiSelect all share it.
+ *
+ * Layout matches web mobile (`SingleSelectV2MobileItem` / `SelectItemV2`):
+ * outer column with gap between the main row and the sub-label row.
+ * The main row is horizontal: leading accessory + leading slot +
+ * label (flex 1) + trailing slot/checkmark/chevron. The sub-label
+ * renders as a full-width second row below.
+ *
+ * State resolution: native has no hover/focus. `active` (pressed) is
+ * handled by `Pressable` via `activeBackground`; `selected` and `disabled`
+ * are resolved from the item adapter data.
+ */
+export type DropdownItemProps = {
+    adapter: DropdownItemAdapter
+    tokens: DropdownItemTokens
+    onPress: (item: DropdownItemAdapter['item']) => void
+    testID?: string
+}
+
+function resolveItemState(
+    disabled: boolean | undefined,
+    selected: boolean | undefined
+) {
+    if (disabled) return 'disabled'
+    if (selected) return 'selected'
+    return 'default'
+}
+
+const DropdownItemImpl = forwardRef<RNView, DropdownItemProps>(
+    function DropdownItem({ adapter, tokens, onPress, testID }, ref) {
+        const {
+            primaryText,
+            secondaryText,
+            leadingSlot,
+            leadingAccessory,
+            trailingSlot,
+            disabled,
+            isSelected,
+            hasSubMenu,
+            item,
+        } = adapter
+
+        const state = resolveItemState(disabled, isSelected)
+
+        const handlePress = useCallback(() => {
+            if (disabled) return
+            onPress(item)
+        }, [disabled, onPress, item])
+
+        const checkmarkPosition = tokens.text.checkmark?.position ?? 'trailing'
+        const showCheckmark = isSelected && tokens.text.checkmark
+        const checkmarkOnLeading =
+            showCheckmark && checkmarkPosition === 'leading'
+
+        return (
+            <Pressable
+                ref={ref}
+                background={tokens.backgroundColor[state]}
+                activeBackground={tokens.backgroundColor.active}
+                disabledBackground={tokens.backgroundColor.disabled}
+                paddingTop={tokens.paddingTop}
+                paddingRight={tokens.paddingRight}
+                paddingBottom={tokens.paddingBottom}
+                paddingLeft={tokens.paddingLeft}
+                flexDirection="column"
+                gap={tokens.gap}
+                borderRadius={tokens.borderRadius}
+                disabled={disabled}
+                onPress={handlePress}
+                style={
+                    tokens.margin != null
+                        ? {
+                              margin: parseDimension(tokens.margin),
+                          }
+                        : undefined
+                }
+                accessibilityRole="menuitem"
+                accessibilityState={{
+                    disabled: Boolean(disabled),
+                    selected: Boolean(isSelected),
+                }}
+                accessibilityLabel={primaryText}
+                testID={testID}
+            >
+                {/* Main row: leading + label + trailing */}
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        width: '100%',
+                        gap: 8,
+                    }}
+                >
+                    {checkmarkOnLeading && tokens.text.checkmark ? (
+                        <Check
+                            size={Number(tokens.text.checkmark.width) || 16}
+                            color={tokens.text.checkmark.color}
+                        />
+                    ) : null}
+
+                    {leadingAccessory}
+
+                    {leadingSlot ? (
+                        <Slot
+                            maxHeight={tokens.text.leftSlot.maxHeight}
+                            color={tokens.text.color[state]}
+                            hidden
+                        >
+                            {leadingSlot}
+                        </Slot>
+                    ) : null}
+
+                    <View style={{ flex: 1, flexShrink: 1 }}>
+                        <Text
+                            fontSize={tokens.text.fontSize}
+                            fontWeight={tokens.text.fontWeight}
+                            lineHeight={tokens.text.lineHeight}
+                            color={tokens.text.color[state]}
+                            numberOfLines={1}
+                        >
+                            {primaryText}
+                        </Text>
+                    </View>
+
+                    {trailingSlot}
+
+                    {showCheckmark &&
+                    !checkmarkOnLeading &&
+                    tokens.text.checkmark ? (
+                        <Check
+                            size={Number(tokens.text.checkmark.width) || 16}
+                            color={tokens.text.checkmark.color}
+                        />
+                    ) : null}
+
+                    {hasSubMenu ? (
+                        <ChevronRight
+                            size={Number(tokens.text.rightChevron.width) || 16}
+                            color={tokens.text.rightChevron.color}
+                        />
+                    ) : null}
+                </View>
+
+                {/* Sub-label row */}
+                {secondaryText ? (
+                    <View style={{ width: '100%' }}>
+                        <Text
+                            fontSize={tokens.text.subText.fontSize}
+                            fontWeight={tokens.text.subText.fontWeight}
+                            lineHeight={tokens.text.subText.lineHeight}
+                            color={tokens.text.subText.color[state]}
+                            numberOfLines={1}
+                        >
+                            {secondaryText}
+                        </Text>
+                    </View>
+                ) : null}
+            </Pressable>
+        )
+    }
+)
+
+export const DropdownItem = memo(DropdownItemImpl)
+DropdownItem.displayName = 'DropdownItem'