blend-native 0.0.1-beta.0

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

@@ -0,0 +1,56 @@
+import type {
+    SkeletonShape,
+    SkeletonTokensType,
+} from '@juspay/blend-design-system/node'
+import {
+    parseBorderRadius,
+    parseDuration,
+    parseSize,
+} from '../../adapters/cssStringAdapter'
+
+/**
+ * Pure resolution for the native Skeleton — vitest-testable, worklet-free.
+ */
+
+/** Default when the token duration cannot be parsed. */
+export const SKELETON_FALLBACK_DURATION = 1500
+
+/**
+ * Animation cycle length in milliseconds, from the token's CSS duration
+ * string (`"1.5s"`).
+ */
+export function resolveSkeletonDuration(tokens: SkeletonTokensType): number {
+    return (
+        parseDuration(tokens.animation.duration as string | number) ??
+        SKELETON_FALLBACK_DURATION
+    )
+}
+
+/**
+ * Border radius for a shape.
+ *
+ * The `circle` token is CSS `"50%"`, which RN cannot express — a circle
+ * needs a numeric radius of half the box. When the box size is unknown
+ * (string sizes, wrap mode) a large radius produces the same pill/circle
+ * silhouette, the same trick web's `radius.full` relies on.
+ */
+export function resolveSkeletonRadius(
+    shape: SkeletonShape,
+    tokens: SkeletonTokensType,
+    width?: string | number,
+    height?: string | number
+): number {
+    if (shape === 'circle') {
+        const w = typeof width === 'number' ? width : parseSize(String(width))
+        const h =
+            typeof height === 'number' ? height : parseSize(String(height))
+        if (typeof w === 'number' && typeof h === 'number') {
+            return Math.min(w, h) / 2
+        }
+        return 9999
+    }
+    const parsed = parseBorderRadius(
+        tokens.borderRadius[shape] as string | number
+    )
+    return typeof parsed === 'number' ? parsed : 0
+}

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,204 @@
+import { forwardRef, useMemo } from 'react'
+import type { View as RNView } from 'react-native'
+import {
+    TagV2Color,
+    TagV2Size,
+    TagV2SubType,
+    TagV2Type,
+    type TagV2TokensType,
+} from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { Block } from '../../primitives/Block'
+import { Pressable } from '../../primitives/Pressable'
+import { Slot } from '../../primitives/Slot'
+import { Text } from '../../primitives/Text'
+import {
+    getAccessibleName,
+    getTagBorderRadius,
+    getTagAccessibilityState,
+} from './tag.utils'
+import { getGroupedBorderWidths } from '../shared/group'
+import type { TagNativeProps } from './tag.types'
+
+/**
+ * Layout that never varies with tokens or props.
+ *
+ * Hoisted to module scope so it is allocated once rather than per render.
+ * `alignSelf: 'flex-start'` is RN's equivalent of web's `width: fit-content`
+ * on an inline-flex element — shrink-to-fit inside a column parent.
+ */
+const TAG_LAYOUT = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+} as const
+
+/**
+ * Tag — React Native implementation of web's `TagV2`.
+ *
+ * Tokens resolve through `useNativeTokens('TAGV2')`, the native counterpart
+ * of web's `useResponsiveTokens('TAGV2')`, so theme and per-slot overrides
+ * come from `BlendNativeProvider` rather than a per-component prop.
+ *
+ * Like web, the rendered element depends on interactivity: web picks
+ * `PrimitiveButton` when `onClick` is supplied and `Block` otherwise; native
+ * picks `Pressable` vs `Block`. Both branches resolve their styles through
+ * the same `resolveSurfaceStyle`, so the two render identically apart from
+ * press feedback.
+ *
+ * TagV2's tokens contain no gradients, shadows, or state matrix, so this
+ * component needs no native module — it is pure JS.
+ */
+const Tag = forwardRef<RNView, TagNativeProps>(function Tag(
+    {
+        text,
+        size = TagV2Size.SM,
+        type = TagV2Type.SUBTLE,
+        subType = TagV2SubType.SQUARICAL,
+        color = TagV2Color.PRIMARY,
+        leftSlot,
+        rightSlot,
+        tagGroupPosition,
+        onPress,
+        pressed,
+        accessibilityLabel,
+        testID,
+        style,
+    },
+    ref
+) {
+    const tokens = useNativeTokens<TagV2TokensType>('TAGV2')
+
+    const isInteractive = typeof onPress === 'function'
+
+    // Grouped members drop their shared edges so a seam is one line wide.
+    const groupBorderWidths = useMemo(
+        () => getGroupedBorderWidths(tagGroupPosition),
+        [tagGroupPosition]
+    )
+
+    const borderRadius = useMemo(
+        () => getTagBorderRadius(size, subType, tagGroupPosition, tokens),
+        [size, subType, tagGroupPosition, tokens]
+    )
+
+    const backgroundColor = String(tokens.backgroundColor[type][color])
+    const border = String(tokens.border[type][color])
+    const textColor = String(tokens.text.color[type][color])
+
+    // Slot icons are tinted to match the label. On web this happens
+    // implicitly — `Block`'s `color` becomes CSS `color` and SVGs inherit it
+    // through `currentColor`. RN has no such inheritance, so `Slot` hands the
+    // colour to the icon element explicitly.
+    const accessibleName =
+        accessibilityLabel ?? getAccessibleName(text, isInteractive, pressed)
+
+    const content = (
+        <>
+            {leftSlot?.slot ? (
+                <Slot
+                    color={textColor}
+                    maxHeight={
+                        leftSlot.maxHeight ?? tokens.leftSlot.maxHeight[size]
+                    }
+                    // Matches web's `aria-hidden` on slots accompanying text:
+                    // the label already carries the accessible name.
+                    hidden={Boolean(text)}
+                    testID={testID ? `${testID}-left-slot` : undefined}
+                >
+                    {leftSlot.slot}
+                </Slot>
+            ) : null}
+
+            <Text
+                fontSize={tokens.text.fontSize[size]}
+                fontWeight={tokens.text.fontWeight[size]}
+                lineHeight={tokens.text.lineHeight[size]}
+                color={textColor}
+            >
+                {text}
+            </Text>
+
+            {rightSlot?.slot ? (
+                <Slot
+                    color={textColor}
+                    maxHeight={
+                        rightSlot.maxHeight ?? tokens.rightSlot.maxHeight[size]
+                    }
+                    hidden={Boolean(text)}
+                    testID={testID ? `${testID}-right-slot` : undefined}
+                >
+                    {rightSlot.slot}
+                </Slot>
+            ) : null}
+        </>
+    )
+
+    const surface = useMemo(
+        () => ({
+            ...TAG_LAYOUT,
+            backgroundColor,
+            border,
+            borderRadius,
+            // The height token is applied as `minHeight`, not `height`.
+            //
+            // At the default font scale the result is identical to web: the
+            // line height is shorter than the token height, so the box renders
+            // at exactly `minHeight` with the line centred. But RN respects OS
+            // font scaling (Dynamic Type), and a fixed `height` clips scaled
+            // text — the package policy is to let controls grow instead
+            // (see `primitives/Text.tsx`).
+            //
+            // Vertical padding is still deliberately NOT applied. The tokens
+            // define both a height and vertical padding, and the padding
+            // leaves a content box shorter than the text's own line height
+            // (sm: 14px box vs 18px line). On web that is harmless — the line
+            // box overflows the padding box and `overflow: visible` shows it.
+            // RN clips instead: descenders ("p" in primary, "g" in warning)
+            // were sheared off on iOS while react-native-web rendered fine.
+            // With a centred single line the padding is visually inert on web
+            // anyway, so dropping it reproduces web's result exactly.
+            minHeight: tokens.height[size],
+            paddingLeft: tokens.padding.left[size],
+            paddingRight: tokens.padding.right[size],
+            gap: tokens.gap,
+        }),
+        [backgroundColor, border, borderRadius, tokens, size]
+    )
+
+    if (isInteractive) {
+        return (
+            <Pressable
+                ref={ref}
+                {...surface}
+                onPress={onPress}
+                accessibilityRole="button"
+                accessibilityLabel={accessibleName}
+                accessibilityState={getTagAccessibilityState(true, pressed)}
+                testID={testID}
+                style={{ ...groupBorderWidths, ...style }}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+
+    return (
+        <Block
+            ref={ref}
+            {...surface}
+            accessible
+            accessibilityRole="text"
+            accessibilityLabel={accessibilityLabel}
+            testID={testID}
+            style={{ ...groupBorderWidths, ...style }}
+        >
+            {content}
+        </Block>
+    )
+})
+
+Tag.displayName = 'Tag'
+
+export default Tag

package/src/components/Tag/index.ts

@@ -0,0 +1,7 @@
+export { default as Tag } from './Tag'
+export type { TagNativeProps, TagSlot } from './tag.types'
+export {
+    getTagBorderRadius,
+    getAccessibleName,
+    getTagAccessibilityState,
+} from './tag.utils'

package/src/components/Tag/tag.types.ts

@@ -0,0 +1,63 @@
+import type React from 'react'
+import type { GestureResponderEvent, ViewStyle } from 'react-native'
+import type {
+    TagV2Color,
+    TagV2Size,
+    TagV2SubType,
+    TagV2Type,
+} from '@juspay/blend-design-system/node'
+import type { GroupPosition } from '../shared/group'
+
+/**
+ * Props for the native `Tag`.
+ *
+ * Mirrors web `TagV2Props` (`packages/blend/lib/components/TagV2/
+ * TagV2.types.ts`) with DOM-specific pieces replaced by RN equivalents:
+ *
+ * - `onClick` → `onPress`, carrying a `GestureResponderEvent`.
+ * - `aria-pressed` → `pressed`, surfaced as `accessibilityState.selected`.
+ * - `HTMLAttributes` passthrough → RN `View`/`Pressable` props via `...rest`.
+ *
+ * `skeleton` is deliberately **absent** rather than accepted-and-ignored.
+ * Web's `TagV2` renders a `TagSkeleton`, which has no native counterpart yet;
+ * omitting the prop from the type keeps it a compile error instead of a
+ * silent no-op. Same decision as `Button`.
+ */
+
+export type TagSlot = {
+    slot: React.ReactNode
+    /** Overrides the size-derived slot max height from tokens. */
+    maxHeight?: string | number
+}
+
+export type TagNativeProps = {
+    text: string
+    size?: TagV2Size
+    type?: TagV2Type
+    subType?: TagV2SubType
+    color?: TagV2Color
+    leftSlot?: TagSlot
+    rightSlot?: TagSlot
+    /**
+     * Position within a tag group. Collapses the border radius on the joined
+     * edges, matching web's `getTagBorderRadius`.
+     */
+    tagGroupPosition?: GroupPosition
+    /**
+     * Providing this makes the tag interactive: it renders as a pressable
+     * with `accessibilityRole="button"` instead of a static view, mirroring
+     * web's `TagElement = onClick ? PrimitiveButton : Block`.
+     */
+    onPress?: (event: GestureResponderEvent) => void
+    /**
+     * Toggle state for interactive tags. Maps to web's `aria-pressed` and to
+     * RN's `accessibilityState.selected`, and is folded into the accessible
+     * name exactly as web's `getAccessibleName` does.
+     */
+    pressed?: boolean | 'mixed'
+    /** Overrides the accessible name derived from `text`. */
+    accessibilityLabel?: string
+    testID?: string
+    /** Escape hatch for RN styles the token props do not cover. */
+    style?: ViewStyle
+}

package/src/components/Tag/tag.utils.ts

@@ -0,0 +1,82 @@
+import {
+    TagV2Size,
+    TagV2SubType,
+    type TagV2TokensType,
+} from '@juspay/blend-design-system/node'
+import { getGroupedBorderRadius, type GroupPosition } from '../shared/group'
+
+/**
+ * Native Tag style helpers.
+ *
+ * Ported from `packages/blend/lib/components/TagV2/utils.ts`. Both functions
+ * below are pure string/logic helpers with no DOM dependency, so they are
+ * reproduced verbatim in behaviour — keeping web and native visually and
+ * semantically identical is the whole point.
+ *
+ * Web's third helper, `createKeyboardHandler` (Enter/Space → click), has no
+ * native counterpart: RN's `Pressable` handles activation itself, including
+ * for switch-control and keyboard users.
+ */
+
+/**
+ * Resolve the border radius for a tag, collapsing the joined edges when the
+ * tag sits inside a group.
+ *
+ * Mirrors `getTagBorderRadius` in web `utils.ts`. The collapsing itself lives
+ * in `shared/group` because Button needs exactly the same algorithm.
+ */
+export function getTagBorderRadius(
+    size: TagV2Size,
+    subType: TagV2SubType,
+    tagGroupPosition: GroupPosition | undefined,
+    tokens: TagV2TokensType
+): string {
+    return getGroupedBorderRadius(
+        tokens.borderRadius[size][subType] as string | number,
+        tagGroupPosition
+    )
+}
+
+/**
+ * Build the accessible name for a tag.
+ *
+ * Mirrors `getAccessibleName` in web `utils.ts`: non-interactive tags get no
+ * explicit name (the text content is announced instead), and interactive
+ * tags fold their toggle state into the label.
+ */
+export function getAccessibleName(
+    text: string,
+    isInteractive: boolean,
+    pressed: boolean | 'mixed' | undefined
+): string | undefined {
+    if (!isInteractive) {
+        return undefined
+    }
+
+    let accessibleName = text
+
+    if (pressed !== undefined) {
+        if (pressed === true) {
+            accessibleName = `${text}, pressed`
+        } else if (pressed === 'mixed') {
+            accessibleName = `${text}, mixed state`
+        }
+    }
+
+    return accessibleName
+}
+
+/**
+ * Resolve the accessibility state for a tag.
+ *
+ * `'mixed'` has no RN equivalent — RN's `selected` is a boolean — so it is
+ * reported as unselected and carried in the accessible name instead, which
+ * is what `getAccessibleName` already appends.
+ */
+export function getTagAccessibilityState(
+    isInteractive: boolean,
+    pressed: boolean | 'mixed' | undefined
+): { selected: boolean } | undefined {
+    if (!isInteractive || pressed === undefined) return undefined
+    return { selected: pressed === true }
+}

package/src/components/TextInput/TextInput.tsx

@@ -0,0 +1,165 @@
+import { forwardRef, useCallback, useMemo, useState } from 'react'
+import type {
+    TextInputProps as RNTextInputProps,
+    View as RNView,
+} from 'react-native'
+import {
+    InputSizeV2,
+    type TextInputV2TokensType,
+} from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { Block } from '../../primitives/Block'
+import { PrimitiveInput } from '../../primitives/PrimitiveInput'
+import { Slot } from '../../primitives/Slot'
+import { FieldLabels } from '../shared/field/FieldLabels'
+import { FieldFooter } from '../shared/field/FieldFooter'
+import { getFieldState, getFieldVisualState } from '../shared/field/fieldState'
+import { getTextInputNativeStyles } from './textInput.utils'
+import type { TextInputNativeProps } from './textInput.types'
+
+/**
+ * TextInput — React Native implementation of web's `TextInputV2`, and the
+ * reference consumer of the shared field chrome (`FieldLabels`,
+ * `FieldFooter`, `PrimitiveInput`) the rest of the InputsV2 family will
+ * reuse.
+ *
+ * Anatomy matches web: a column of label row, bordered field row (left
+ * slot / input / right slot), and footer — all resolved from the
+ * `TEXT_INPUTV2` token slot. Focus is component state re-resolving the
+ * container against the FOCUS tokens, replacing web's `_focus` pseudo
+ * object; the spread-only focus ring has no RN equivalent and is dropped.
+ */
+const TextInput = forwardRef<RNView, TextInputNativeProps>(function TextInput(
+    {
+        value,
+        onChangeText,
+        label,
+        subLabel,
+        size = InputSizeV2.SM,
+        error,
+        hintText,
+        required = false,
+        disabled = false,
+        leftSlot,
+        rightSlot,
+        testID,
+        accessibilityLabel,
+        style,
+        inputRef,
+        onFocus,
+        onBlur,
+        ...rest
+    },
+    ref
+) {
+    const tokens = useNativeTokens<TextInputV2TokensType>('TEXT_INPUTV2')
+    const [focused, setFocused] = useState(false)
+
+    // Labels/footer track error+disabled; the container also tracks focus.
+    const fieldState = getFieldState(error, disabled)
+    const visualState = getFieldVisualState(error, disabled, focused)
+
+    const styles = useMemo(
+        () => getTextInputNativeStyles(tokens, size, visualState),
+        [tokens, size, visualState]
+    )
+
+    // Event types come from RN's own prop signatures — they changed shape
+    // across RN versions (FocusEvent/BlurEvent), so deriving keeps us
+    // correct on every supported peer.
+    const handleFocus = useCallback<NonNullable<RNTextInputProps['onFocus']>>(
+        (event) => {
+            setFocused(true)
+            onFocus?.(event)
+        },
+        [onFocus]
+    )
+    const handleBlur = useCallback<NonNullable<RNTextInputProps['onBlur']>>(
+        (event) => {
+            setFocused(false)
+            onBlur?.(event)
+        },
+        [onBlur]
+    )
+
+    return (
+        <Block ref={ref} gap={styles.gap} style={style} testID={testID}>
+            <FieldLabels
+                label={label}
+                sublabel={subLabel}
+                required={required}
+                size={size}
+                state={fieldState}
+                tokens={tokens.topContainer}
+                testID={testID ? `${testID}-labels` : undefined}
+            />
+
+            <Block
+                flexDirection="row"
+                alignItems="center"
+                width="100%"
+                testID={testID ? `${testID}-container` : undefined}
+                border={styles.container.border}
+                backgroundColor={styles.container.backgroundColor}
+                borderRadius={styles.container.borderRadius}
+                gap={styles.container.gap}
+                paddingTop={styles.container.paddingTop}
+                paddingRight={styles.container.paddingRight}
+                paddingBottom={styles.container.paddingBottom}
+                paddingLeft={styles.container.paddingLeft}
+            >
+                {leftSlot?.slot ? (
+                    <Slot
+                        maxHeight={leftSlot.maxHeight}
+                        // Decorative next to the labelled input, matching
+                        // web's aria-hidden on input slots.
+                        hidden
+                        testID={testID ? `${testID}-left-slot` : undefined}
+                    >
+                        {leftSlot.slot}
+                    </Slot>
+                ) : null}
+
+                <PrimitiveInput
+                    ref={inputRef}
+                    value={value}
+                    onChangeText={onChangeText}
+                    editable={!disabled}
+                    fontSize={styles.text.fontSize}
+                    fontWeight={styles.text.fontWeight}
+                    lineHeight={styles.text.lineHeight}
+                    color={styles.text.color}
+                    placeholderColor={styles.placeholderColor}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    accessibilityLabel={accessibilityLabel ?? label}
+                    accessibilityState={{ disabled }}
+                    testID={testID ? `${testID}-input` : undefined}
+                    {...rest}
+                />
+
+                {rightSlot?.slot ? (
+                    <Slot
+                        maxHeight={rightSlot.maxHeight}
+                        hidden
+                        testID={testID ? `${testID}-right-slot` : undefined}
+                    >
+                        {rightSlot.slot}
+                    </Slot>
+                ) : null}
+            </Block>
+
+            <FieldFooter
+                error={error}
+                hintText={hintText}
+                size={size}
+                tokens={tokens.bottomContainer}
+                testID={testID ? `${testID}-footer` : undefined}
+            />
+        </Block>
+    )
+})
+
+TextInput.displayName = 'TextInput'
+
+export default TextInput

package/src/components/TextInput/index.ts

@@ -0,0 +1,2 @@
+export { default as TextInput } from './TextInput'
+export type { TextInputNativeProps, TextInputSlot } from './textInput.types'

package/src/components/TextInput/textInput.types.ts

@@ -0,0 +1,54 @@
+import type React from 'react'
+import type {
+    TextInput as RNTextInput,
+    TextInputProps as RNTextInputProps,
+    ViewStyle,
+} from 'react-native'
+import type { InputSizeV2 } from '@juspay/blend-design-system/node'
+import type { FieldError } from '../shared/field/fieldState'
+
+/**
+ * Props for the native `TextInput` — the port of web's `TextInputV2`.
+ *
+ * Web pieces swapped for RN ones: `onChange` on a DOM input becomes RN's
+ * `onChangeText`, `data-testid` becomes `testID`, and the HTML-attribute
+ * passthrough becomes RN `TextInputProps` (which supplies `placeholder`,
+ * `keyboardType`, `autoCapitalize`, `secureTextEntry`, ... for free).
+ *
+ * Deliberately omitted rather than accepted-and-ignored (the `skeleton`
+ * precedent — passing them should be a compile error, not a no-op):
+ *
+ * - `dropdown` — the embedded SingleSelect needs the native Select family.
+ * - `helpIconText` — needs a native Tooltip.
+ * - The floating-label mode (web floats the label into `lg` inputs on
+ *   phones) — deferred until the field pattern settles on native.
+ */
+
+export type TextInputSlot = {
+    slot: React.ReactElement
+    maxHeight?: string | number
+}
+
+export type TextInputNativeProps = {
+    value: string
+    onChangeText?: (text: string) => void
+    label?: string
+    subLabel?: string
+    size?: InputSizeV2
+    error?: FieldError
+    hintText?: string
+    required?: boolean
+    disabled?: boolean
+    leftSlot?: TextInputSlot
+    rightSlot?: TextInputSlot
+    testID?: string
+    /** Screen-reader name; defaults to `label`. */
+    accessibilityLabel?: string
+    /** Escape hatch for the outer column (label + field + footer). */
+    style?: ViewStyle
+    /** Ref to the underlying RN TextInput (focus/blur/clear). */
+    inputRef?: React.Ref<RNTextInput>
+} & Omit<
+    RNTextInputProps,
+    'value' | 'onChangeText' | 'style' | 'editable' | 'placeholderTextColor'
+>