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

package/src/components/NumberInput/numberInput.types.ts

@@ -0,0 +1,39 @@
+import type React from 'react'
+import type {
+    StyleProp,
+    TextInput as RNTextInput,
+    ViewStyle,
+} from 'react-native'
+import type { NumberInputBaseProps } from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native `NumberInput` — the port of web's `NumberInputV2`.
+ *
+ * Derives from `NumberInputBaseProps` with two docblocked divergences:
+ *
+ * - **`onValueChange?: (value: number | null) => void`** — web fabricates
+ *   synthetic DOM change events whose `target.value` is a string; native
+ *   hands over the parsed number (null while the field is empty or
+ *   mid-edit like `-`).
+ * - Flat `label`/`subLabel` — web's `label: { text, subtext }` object is
+ *   flattened for cross-input consistency.
+ *
+ * Omitted at the type level: `helpIconText` (needs Tooltip), web's
+ * ReactNode `slot` pair (unit + steppers cover the common cases; slots can
+ * layer on later).
+ */
+export type NumberInputNativeProps = Omit<
+    NumberInputBaseProps,
+    'label' | 'helpIconText'
+> & {
+    onValueChange?: (value: number | null) => void
+    label?: string
+    subLabel?: string
+    required?: boolean
+    disabled?: boolean
+    placeholder?: string
+    testID?: string
+    accessibilityLabel?: string
+    style?: StyleProp<ViewStyle>
+    inputRef?: React.Ref<RNTextInput>
+}

package/src/components/NumberInput/numberInput.utils.ts

@@ -0,0 +1,98 @@
+/**
+ * Pure ports of web's `NumberInputV2/utils.ts` — sanitising, clamping,
+ * display, stepper math and the auto range error. All total.
+ */
+
+/** Web's `NUMBER_INPUT_V2_UNIT_MAX_LENGTH`. */
+export const UNIT_MAX_LENGTH = 7
+
+/**
+ * Web's `sanitizeNumberInput`: strip everything but digits, `.` and `-`,
+ * keep a single leading minus and a single decimal point.
+ */
+export function sanitizeNumberInput(raw: string): string {
+    let cleaned = raw.replace(/[^\d.-]/g, '')
+    const negative = cleaned.startsWith('-')
+    cleaned = cleaned.replace(/-/g, '')
+    const [head, ...restParts] = cleaned.split('.')
+    const rest = restParts.join('')
+    cleaned = restParts.length > 0 ? `${head}.${rest}` : (head ?? '')
+    return negative ? `-${cleaned}` : cleaned
+}
+
+/** Parse the sanitised text; incomplete input (`''`, `-`, `.`) is null. */
+export function parseNumberInput(text: string): number | null {
+    if (text === '' || text === '-' || text === '.' || text === '-.') {
+        return null
+    }
+    const n = Number(text)
+    return Number.isFinite(n) ? n : null
+}
+
+/** Web's `clampValueOnBlur`. */
+export function clampValueOnBlur(
+    value: number | null,
+    min: number | undefined,
+    max: number | undefined,
+    preventNegative: boolean | undefined
+): number | null {
+    if (value === null) return null
+    let next = value
+    if (preventNegative && next < 0) next = 0
+    if (min !== undefined && next < min) next = min
+    if (max !== undefined && next > max) next = max
+    return next
+}
+
+/** Displayed text: raw while typing, canonical number when blurred. */
+export function getDisplayValue(
+    internal: string,
+    focused: boolean,
+    value: number | null
+): string {
+    if (focused) return internal
+    return value === null ? '' : String(value)
+}
+
+/** Web's stepper-disable math: disabled when the next step overshoots. */
+export function isStepUpDisabled(
+    value: number | null,
+    step: number,
+    max: number | undefined
+): boolean {
+    if (max === undefined) return false
+    return (value ?? 0) + step > max
+}
+
+export function isStepDownDisabled(
+    value: number | null,
+    step: number,
+    min: number | undefined,
+    preventNegative: boolean | undefined
+): boolean {
+    const next = (value ?? 0) - step
+    if (preventNegative && next < 0) return true
+    if (min === undefined) return false
+    return next < min
+}
+
+/** Web's `getRangeErrorMessage` — the auto footer error out of range. */
+export function getRangeErrorMessage(
+    value: number | null,
+    min: number | undefined,
+    max: number | undefined
+): string | undefined {
+    if (value === null) return undefined
+    if (min !== undefined && value < min) {
+        return `Value must be at least ${min}`
+    }
+    if (max !== undefined && value > max) {
+        return `Value must be at most ${max}`
+    }
+    return undefined
+}
+
+/** Web hides units longer than 7 chars and shows a footer error instead. */
+export function isUnitTooLong(unit: string | undefined): boolean {
+    return Boolean(unit && unit.trim().length > UNIT_MAX_LENGTH)
+}

package/src/components/OTPInput/OTPInput.tsx

@@ -0,0 +1,222 @@
+import { forwardRef, useRef, useState } from 'react'
+import { Platform, View } from 'react-native'
+import type {
+    TextInput as RNTextInput,
+    TextInputKeyPressEventData,
+    NativeSyntheticEvent,
+    View as RNView,
+} from 'react-native'
+import { InputSizeV2 } from '@juspay/blend-design-system/node'
+import type { OTPInputV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { useControllableState } from '../../hooks/useControllableState'
+import Block from '../../primitives/Block'
+import PrimitiveInput from '../../primitives/PrimitiveInput'
+import { FieldLabels } from '../shared/field/FieldLabels'
+import { FieldFooter } from '../shared/field/FieldFooter'
+import { getFieldState, getFieldVisualState } from '../shared/field/fieldState'
+import { parseBorder, parseDimension } from '../../adapters/cssStringAdapter'
+import type { OTPInputNativeProps } from './otpInput.types'
+import {
+    buildCellLabel,
+    clampOtpSlotLength,
+    otpToCells,
+    processCellChange,
+} from './otpInput.utils'
+
+/**
+ * One-time-code input — the native port of web's `OTPInputV2`.
+ *
+ * N single-character cells (no hidden master input, like web). The first
+ * cell carries `textContentType="oneTimeCode"` (iOS) and
+ * `autoComplete="sms-otp"` (Android) so OS autofill lands there and
+ * spreads across the cells as a digit run; Backspace on an empty cell
+ * moves back.
+ */
+const OTPInput = forwardRef<RNView, OTPInputNativeProps>(function OTPInput(
+    {
+        value,
+        onChange,
+        length,
+        label,
+        subLabel,
+        error = false,
+        errorMessage,
+        hintText,
+        autoFocus = false,
+        required = false,
+        disabled = false,
+        testID,
+        style,
+    },
+    ref
+) {
+    const tokens = useNativeTokens<OTPInputV2TokensType>('OTP_INPUTV2')
+    const slots = clampOtpSlotLength(length)
+    const [currentValue, setCurrentValue] = useControllableState<string>(
+        value,
+        '',
+        onChange
+    )
+    const [focusedIndex, setFocusedIndex] = useState<number | null>(null)
+    const cellRefs = useRef<Array<RNTextInput | null>>([])
+
+    const cells = otpToCells(currentValue, slots)
+    const fieldError = error ? { show: true, message: errorMessage } : undefined
+    const fieldState = getFieldState(fieldError, disabled)
+
+    const input = tokens.inputContainer.input
+    const cellWidth = parseDimension(input.width as string | number) ?? 42
+    const cellHeight = parseDimension(input.height as string | number) ?? 48
+    const cellRadius =
+        parseDimension(input.borderRadius as string | number) ?? 12
+
+    const commitCells = (nextCells: string[], focusIndex: number | null) => {
+        setCurrentValue(nextCells.join(''))
+        if (focusIndex !== null) {
+            cellRefs.current[focusIndex]?.focus()
+        }
+    }
+
+    const handleCellChange = (index: number, raw: string) => {
+        const change = processCellChange(cells, index, raw)
+        commitCells(change.cells, change.focusIndex)
+    }
+
+    const handleKeyPress = (
+        index: number,
+        event: NativeSyntheticEvent<TextInputKeyPressEventData>
+    ) => {
+        if (
+            event.nativeEvent.key === 'Backspace' &&
+            cells[index] === '' &&
+            index > 0
+        ) {
+            const next = [...cells]
+            next[index - 1] = ''
+            commitCells(next, index - 1)
+        }
+    }
+
+    const cellState = (index: number) =>
+        getFieldVisualState(fieldError, disabled, focusedIndex === index)
+
+    return (
+        <Block
+            ref={ref}
+            gap={tokens.gap as string | number}
+            style={style}
+            testID={testID}
+            accessibilityLabel={label ?? 'One-time code'}
+        >
+            <FieldLabels
+                label={label}
+                sublabel={subLabel}
+                required={required}
+                size={InputSizeV2.MD}
+                state={fieldState}
+                tokens={tokens.topContainer}
+                testID={testID ? `${testID}-labels` : undefined}
+            />
+            <View
+                style={{
+                    flexDirection: 'row',
+                    gap:
+                        parseDimension(
+                            tokens.inputContainer.gap as string | number
+                        ) ?? 8,
+                }}
+            >
+                {cells.map((cell, index) => {
+                    const state = cellState(index)
+                    return (
+                        <View
+                            key={index}
+                            style={{
+                                width: cellWidth,
+                                height: cellHeight,
+                                borderRadius: cellRadius,
+                                backgroundColor: String(
+                                    input.backgroundColor[state] ??
+                                        'transparent'
+                                ),
+                                ...parseBorder(
+                                    String(input.border[state] ?? 'none')
+                                ),
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }}
+                        >
+                            <PrimitiveInput
+                                ref={(node) => {
+                                    cellRefs.current[index] = node
+                                }}
+                                value={cell}
+                                onChangeText={(raw) =>
+                                    handleCellChange(index, raw)
+                                }
+                                onKeyPress={(event) =>
+                                    handleKeyPress(index, event)
+                                }
+                                keyboardType="number-pad"
+                                autoFocus={autoFocus && index === 0}
+                                editable={!disabled}
+                                fontSize={input.fontSize as string | number}
+                                fontWeight={input.fontWeight as string | number}
+                                color={String(
+                                    input.color?.[state] ?? '#000000'
+                                )}
+                                textAlign="center"
+                                accessibilityLabel={buildCellLabel(
+                                    label,
+                                    index,
+                                    slots
+                                )}
+                                accessibilityState={{ disabled }}
+                                onFocus={() => setFocusedIndex(index)}
+                                onBlur={() =>
+                                    setFocusedIndex((current) =>
+                                        current === index ? null : current
+                                    )
+                                }
+                                // OS one-time-code autofill lands on the
+                                // first cell and spreads as a digit run.
+                                textContentType={
+                                    index === 0 && Platform.OS === 'ios'
+                                        ? 'oneTimeCode'
+                                        : undefined
+                                }
+                                autoComplete={
+                                    index === 0 && Platform.OS === 'android'
+                                        ? 'sms-otp'
+                                        : undefined
+                                }
+                                testID={
+                                    testID
+                                        ? `${testID}-cell-${index}`
+                                        : undefined
+                                }
+                                style={{
+                                    flex: 0,
+                                    width: cellWidth,
+                                    height: cellHeight,
+                                }}
+                            />
+                        </View>
+                    )
+                })}
+            </View>
+            <FieldFooter
+                error={fieldError}
+                hintText={hintText}
+                size={InputSizeV2.MD}
+                tokens={tokens.bottomContainer}
+                testID={testID ? `${testID}-footer` : undefined}
+            />
+        </Block>
+    )
+})
+
+OTPInput.displayName = 'OTPInput'
+
+export default OTPInput

package/src/components/OTPInput/index.ts

@@ -0,0 +1,8 @@
+export { default as OTPInput } from './OTPInput'
+export type { OTPInputNativeProps } from './otpInput.types'
+export {
+    clampOtpSlotLength,
+    otpToCells,
+    processCellChange,
+    buildCellLabel,
+} from './otpInput.utils'

package/src/components/OTPInput/otpInput.types.ts

@@ -0,0 +1,22 @@
+import type { StyleProp, ViewStyle } from 'react-native'
+import type { OTPInputBaseProps } from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native `OTPInput` — the port of web's `OTPInputV2`.
+ *
+ * Derives from `OTPInputBaseProps` (`onChange` already takes the joined
+ * string, so it flows straight through). Web's lowercase `sublabel` is
+ * normalized to `subLabel`; `helpIconHintText` is omitted (needs Tooltip).
+ * The first cell carries the OS one-time-code autofill hooks; paste and
+ * SMS autofill arrive as a multi-character change and spread across cells.
+ */
+export type OTPInputNativeProps = Omit<
+    OTPInputBaseProps,
+    'sublabel' | 'helpIconHintText'
+> & {
+    subLabel?: string
+    required?: boolean
+    disabled?: boolean
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}

package/src/components/OTPInput/otpInput.utils.ts

@@ -0,0 +1,63 @@
+/**
+ * Pure ports of web's `otpInputV2Utils.ts`. On RN there is no separate
+ * paste event — a paste or SMS autofill arrives as a multi-character
+ * change on one cell, which `mergeDigitRunIntoOtp` already handles.
+ */
+
+/** Web's `clampOtpSlotLength` — 1..32 slots. */
+export function clampOtpSlotLength(length: number | undefined): number {
+    if (!Number.isFinite(length ?? NaN)) return 6
+    return Math.min(32, Math.max(1, Math.trunc(length as number)))
+}
+
+/** Value → per-cell digits, padded to the slot count. */
+export function otpToCells(value: string, slots: number): string[] {
+    const digits = value.replace(/\D/g, '').slice(0, slots).split('')
+    return Array.from({ length: slots }, (_, i) => digits[i] ?? '')
+}
+
+export type OtpCellChange = {
+    cells: string[]
+    /** Cell to focus after the change, when any. */
+    focusIndex: number | null
+}
+
+/**
+ * Web's `processOtpCellValueChange`/`mergeDigitRunIntoOtp`: a change on one
+ * cell may carry several characters (paste, SMS autofill, IME) — the digit
+ * run spreads across the following cells; an emptied cell clears itself.
+ */
+export function processCellChange(
+    cells: readonly string[],
+    index: number,
+    raw: string
+): OtpCellChange {
+    const digits = raw.replace(/\D/g, '')
+    const next = [...cells]
+
+    if (digits.length === 0) {
+        next[index] = ''
+        return { cells: next, focusIndex: null }
+    }
+
+    let cursor = index
+    for (const digit of digits) {
+        if (cursor >= next.length) break
+        next[cursor] = digit
+        cursor += 1
+    }
+    return {
+        cells: next,
+        focusIndex: Math.min(cursor, next.length - 1),
+    }
+}
+
+/** Web's `buildOtpCellAriaLabel`. */
+export function buildCellLabel(
+    label: string | undefined,
+    index: number,
+    total: number
+): string {
+    const base = label?.trim() || 'One-time code'
+    return `${base}, digit ${index + 1} of ${total}`
+}