blend-native 0.0.1-beta.0

package/src/components/Button/Button.tsx

@@ -0,0 +1,180 @@
+import { forwardRef, useMemo } from 'react'
+import type { View as RNView } from 'react-native'
+import {
+    ButtonV2Size,
+    ButtonV2State,
+    ButtonV2SubType,
+    ButtonV2Type,
+    type ButtonV2TokensType,
+} from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { Pressable } from '../../primitives/Pressable'
+import { Slot } from '../../primitives/Slot'
+import { Text } from '../../primitives/Text'
+import {
+    getButtonNativeStyles,
+    getIconMaxHeight,
+    getLoaderSize,
+} from './button.utils'
+import type { ButtonNativeProps } from './button.types'
+
+/**
+ * Button — React Native implementation of web's `ButtonV2`.
+ *
+ * Imports only from `@juspay/blend-design-system/node` (the React-free token
+ * entry), the local adapters, and the local primitives — never from web's
+ * `context/`, `hooks/`, or `Primitives/` directories.
+ *
+ * Tokens resolve through `useNativeTokens('BUTTONV2')`, which reads theme and
+ * per-slot overrides from `BlendNativeProvider`. This replaces the earlier
+ * per-component `theme` prop, which offered no app-wide dark mode, no nested
+ * theme scopes, and no `componentTokens` overrides.
+ */
+const Button = forwardRef<RNView, ButtonNativeProps>(function Button(
+    {
+        buttonType = ButtonV2Type.PRIMARY,
+        size = ButtonV2Size.SMALL,
+        subType = ButtonV2SubType.DEFAULT,
+        text,
+        leftSlot,
+        rightSlot,
+        loading = false,
+        disabled = false,
+        state = ButtonV2State.DEFAULT,
+        buttonGroupPosition,
+        width,
+        minWidth,
+        maxWidth,
+        justifyContent = 'center',
+        onPress,
+        testID,
+        accessibilityLabel,
+        style,
+        ...rest
+    },
+    ref
+) {
+    const tokens = useNativeTokens<ButtonV2TokensType>('BUTTONV2')
+
+    const styles = useMemo(
+        () =>
+            getButtonNativeStyles(
+                disabled,
+                buttonType,
+                subType,
+                size,
+                state,
+                tokens,
+                buttonGroupPosition
+            ),
+        [
+            disabled,
+            buttonType,
+            subType,
+            size,
+            state,
+            tokens,
+            buttonGroupPosition,
+        ]
+    )
+
+    const iconMaxHeights = getIconMaxHeight(
+        subType,
+        leftSlot?.maxHeight,
+        rightSlot?.maxHeight,
+        tokens.slotMaxHeight[size]
+    )
+
+    // Icon colour tracks the resolved text colour for the current state, and
+    // is handed to the icon element explicitly by `Slot` — RN has no
+    // `currentColor` inheritance the way web's `Block` relies on.
+    const iconColor = styles.textColor
+
+    const loaderColor = String(
+        tokens.text.color[buttonType][subType].default ?? '#2563EB'
+    )
+
+    const content = (
+        <>
+            {leftSlot?.slot ? (
+                <Slot
+                    color={iconColor}
+                    maxHeight={iconMaxHeights.left}
+                    hidden={Boolean(text)}
+                    testID={testID ? `${testID}-left-slot` : undefined}
+                >
+                    {leftSlot.slot}
+                </Slot>
+            ) : null}
+
+            {text ? (
+                <Text
+                    fontSize={tokens.text.fontSize[size]}
+                    fontWeight={tokens.text.fontWeight[size]}
+                    lineHeight={tokens.text.lineHeight?.[size]}
+                    color={styles.textColor}
+                    textAlign="center"
+                >
+                    {text}
+                </Text>
+            ) : null}
+
+            {rightSlot?.slot ? (
+                <Slot
+                    color={iconColor}
+                    maxHeight={iconMaxHeights.right}
+                    hidden={Boolean(text)}
+                    testID={testID ? `${testID}-right-slot` : undefined}
+                >
+                    {rightSlot.slot}
+                </Slot>
+            ) : null}
+        </>
+    )
+
+    return (
+        <Pressable
+            ref={ref}
+            background={styles.background}
+            activeBackground={styles.activeBackground}
+            disabledBackground={styles.disabledBackground}
+            border={styles.border}
+            activeBorder={styles.activeBorder}
+            disabledBorder={styles.disabledBorder}
+            borderRadius={styles.borderRadius}
+            boxShadow={styles.boxShadow}
+            activeBoxShadow={styles.activeBoxShadow}
+            paddingTop={styles.padding.top}
+            paddingRight={styles.padding.right}
+            paddingBottom={styles.padding.bottom}
+            paddingLeft={styles.padding.left}
+            flexDirection="row"
+            alignItems="center"
+            justifyContent={justifyContent}
+            gap={styles.gap}
+            // Web defaults to `width: fit-content`; `auto` is RN's equivalent.
+            width={width ?? 'auto'}
+            minWidth={minWidth}
+            maxWidth={maxWidth}
+            height={styles.height}
+            disabled={disabled}
+            loading={loading}
+            loaderColor={loaderColor}
+            loaderSize={getLoaderSize(size)}
+            onPress={onPress}
+            testID={testID}
+            accessibilityLabel={accessibilityLabel ?? text}
+            accessibilityRole="button"
+            // Grouped members drop their shared edges; spread after the
+            // resolved surface so `borderWidth` still covers the other sides.
+            style={{ ...styles.groupBorderWidths, ...style }}
+            {...rest}
+        >
+            {content}
+        </Pressable>
+    )
+})
+
+Button.displayName = 'Button'
+
+export default Button

package/src/components/Button/button.types.ts

@@ -0,0 +1,44 @@
+import type {
+    GestureResponderEvent,
+    PressableProps,
+    ViewStyle,
+} from 'react-native'
+import type { ButtonBaseProps } from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native `Button`.
+ *
+ * Extends web's `ButtonBaseProps` (buttonType, size, subType, text, slots,
+ * loading, state, width, ...) with DOM-specific pieces swapped for RN ones:
+ *
+ * - `onClick` → `onPress`, carrying a `GestureResponderEvent` so consumers
+ *   can read `nativeEvent.locationX` for anchored menus and popovers.
+ * - `data-testid` → `testID`.
+ * - `Omit<ButtonHTMLAttributes>` passthrough → `Omit<PressableProps>`, which
+ *   also supplies `onPressIn`/`onPressOut`/`onLongPress`/`hitSlop`/
+ *   `accessibilityHint` for free.
+ *
+ * `skeleton` is **omitted** rather than accepted-and-ignored. It is part of
+ * `ButtonBaseProps` on web, but there is no native `Skeleton` yet — leaving
+ * it in the type made `skeleton={{ showSkeleton: true }}` type-check while
+ * doing nothing. Omitting it turns that into a compile error instead.
+ */
+export type ButtonNativeProps = Omit<ButtonBaseProps, 'skeleton'> & {
+    /** Called when the button is pressed (replaces web `onClick`). */
+    onPress?: (event: GestureResponderEvent) => void
+    /** Disables interaction and applies disabled tokens. */
+    disabled?: boolean
+    /** RN test ID (replaces web `data-testid`). */
+    testID?: string
+    /**
+     * Flex alignment along the main axis, for slot layout. Typed off RN's own
+     * `ViewStyle` rather than a hand-maintained union so it stays correct as
+     * RN adds values.
+     */
+    justifyContent?: ViewStyle['justifyContent']
+    /** Escape hatch for RN styles the token props do not cover. */
+    style?: ViewStyle
+} & Omit<
+        PressableProps,
+        'style' | 'onPress' | 'disabled' | 'children' | 'testID'
+    >

package/src/components/Button/button.utils.ts

@@ -0,0 +1,213 @@
+import type { ViewStyle } from 'react-native'
+import {
+    ButtonV2Size,
+    ButtonV2State,
+    ButtonV2SubType,
+    ButtonV2Type,
+    PaddingDirection,
+    type ButtonV2TokensType,
+} from '@juspay/blend-design-system/node'
+import {
+    getGroupedBorderRadius,
+    getGroupedBorderWidths,
+    type GroupPosition,
+} from '../shared/group'
+
+/**
+ * Native ButtonV2 style resolver.
+ *
+ * Reimplements `packages/blend/lib/components/ButtonV2/utils.ts` for RN. Web
+ * builds a `ButtonStylesReturn` carrying `_active` / `_hover` /
+ * `_focusVisible` / `_disabled` pseudo-state maps; RN has no pseudo-selectors,
+ * so this returns the token strings per state and lets `Pressable` compose
+ * them against `{ pressed }`.
+ *
+ * `_hover` and `_focusVisible` have no native counterpart and are dropped.
+ */
+
+export type ButtonV2NativeStyles = {
+    /** CSS-string background token for the default state. */
+    background: string
+    activeBackground: string
+    disabledBackground: string
+    /** CSS-string border token per state. */
+    border: string
+    activeBorder: string
+    disabledBorder: string
+    /** CSS-string box-shadow token per state. */
+    boxShadow: string
+    activeBoxShadow: string
+    /** Resolved text/icon colour for the current state. */
+    textColor: string
+    /** Padding token strings per direction. */
+    padding: {
+        top: string
+        right: string
+        bottom: string
+        left: string
+    }
+    gap: string
+    borderRadius: string
+    /**
+     * Border widths to overlay for the group position. Interior members drop
+     * their shared edges so a seam is one line wide, not two.
+     */
+    groupBorderWidths: Pick<ViewStyle, 'borderLeftWidth' | 'borderRightWidth'>
+    /** `'auto'` for the inline subType, otherwise undefined. */
+    height: string | undefined
+}
+
+/**
+ * Resolve padding tokens per direction.
+ * Mirrors `getButtonPadding` in web `utils.ts`.
+ */
+export function getButtonPadding(
+    size: ButtonV2Size,
+    buttonType: ButtonV2Type,
+    subType: ButtonV2SubType,
+    tokens: ButtonV2TokensType
+): { top: string; right: string; bottom: string; left: string } {
+    return {
+        top: String(
+            tokens.padding[PaddingDirection.TOP][size][buttonType][subType]
+        ),
+        right: String(
+            tokens.padding[PaddingDirection.RIGHT][size][buttonType][subType]
+        ),
+        bottom: String(
+            tokens.padding[PaddingDirection.BOTTOM][size][buttonType][subType]
+        ),
+        left: String(
+            tokens.padding[PaddingDirection.LEFT][size][buttonType][subType]
+        ),
+    }
+}
+
+/**
+ * Resolve the border radius, collapsing joined edges inside a button group.
+ *
+ * Mirrors `getButtonV2BorderRadius` in web `utils.ts`. The collapsing itself
+ * lives in `shared/group` because Tag needs the same algorithm.
+ */
+export function getButtonV2BorderRadius(
+    size: ButtonV2Size,
+    buttonType: ButtonV2Type,
+    subType: ButtonV2SubType,
+    buttonGroupPosition: GroupPosition | undefined,
+    tokens: ButtonV2TokensType
+): string {
+    return getGroupedBorderRadius(
+        tokens.borderRadius[size][buttonType][subType] as string | number,
+        buttonGroupPosition
+    )
+}
+
+/**
+ * Resolve the max height for each icon slot.
+ *
+ * Mirrors `getIconMaxHeight` in web `utils.ts`, including both behaviours
+ * that were previously missing on native: the inline subType stretches slots
+ * to `100%`, and a per-slot `maxHeight` overrides the size-derived default.
+ */
+export function getIconMaxHeight(
+    subType: ButtonV2SubType,
+    leftSlotMaxHeight: string | number | undefined,
+    rightSlotMaxHeight: string | number | undefined,
+    defaultMaxHeight: string | number
+): { left: string | number; right: string | number } {
+    if (subType === ButtonV2SubType.INLINE) {
+        return { left: '100%', right: '100%' }
+    }
+    return {
+        left: leftSlotMaxHeight ?? defaultMaxHeight,
+        right: rightSlotMaxHeight ?? defaultMaxHeight,
+    }
+}
+
+/**
+ * Height override for the inline subType.
+ * Mirrors `getButtonHeight` in web `utils.ts` (`fit-content` → RN `auto`).
+ */
+export function getButtonHeight(subType: ButtonV2SubType): string | undefined {
+    return subType === ButtonV2SubType.INLINE ? 'auto' : undefined
+}
+
+/**
+ * Spinner size for the current button size.
+ *
+ * Web maps these to explicit pixel sizes (16/18/20 for sm/md/lg) so the
+ * loader never overflows a small button; RN's `ActivityIndicator` accepts a
+ * number on both platforms.
+ */
+export function getLoaderSize(size: ButtonV2Size): number {
+    const loaderSizeMap: Record<ButtonV2Size, number> = {
+        [ButtonV2Size.SMALL]: 16,
+        [ButtonV2Size.MEDIUM]: 18,
+        [ButtonV2Size.LARGE]: 20,
+    }
+    return loaderSizeMap[size] ?? 16
+}
+
+/**
+ * Resolve the text/icon colour for the current state.
+ * Mirrors `getTextColor` in web `utils.ts`.
+ */
+export function getTextColor(
+    disabled: boolean | undefined,
+    state: ButtonV2State,
+    buttonType: ButtonV2Type,
+    subType: ButtonV2SubType,
+    tokens: ButtonV2TokensType
+): string {
+    const color =
+        tokens.text.color[buttonType][subType][
+            disabled ? ButtonV2State.DISABLED : state
+        ]
+    return color ? String(color) : 'transparent'
+}
+
+/**
+ * Compute the full native style set for a button.
+ *
+ * The native equivalent of `getButtonStyles` in web `utils.ts`.
+ */
+export function getButtonNativeStyles(
+    isDisabled: boolean,
+    buttonType: ButtonV2Type,
+    subType: ButtonV2SubType,
+    size: ButtonV2Size,
+    state: ButtonV2State,
+    tokens: ButtonV2TokensType,
+    buttonGroupPosition?: GroupPosition
+): ButtonV2NativeStyles {
+    const bg = tokens.backgroundColor[buttonType][subType]
+    const borders = tokens.border[buttonType][subType]
+    const shadows = tokens.shadow[buttonType][subType]
+
+    return {
+        background: String(bg.default),
+        activeBackground: String(bg.active),
+        disabledBackground: String(bg.disabled),
+
+        border: String(borders.default),
+        activeBorder: String(borders?.active ?? ''),
+        disabledBorder: String(borders?.disabled ?? ''),
+
+        boxShadow: String(shadows.default),
+        activeBoxShadow: String(shadows?.active ?? 'none'),
+
+        textColor: getTextColor(isDisabled, state, buttonType, subType, tokens),
+
+        padding: getButtonPadding(size, buttonType, subType, tokens),
+        gap: String(tokens.gap),
+        groupBorderWidths: getGroupedBorderWidths(buttonGroupPosition),
+        borderRadius: getButtonV2BorderRadius(
+            size,
+            buttonType,
+            subType,
+            buttonGroupPosition,
+            tokens
+        ),
+        height: getButtonHeight(subType),
+    }
+}

package/src/components/Button/index.ts

@@ -0,0 +1,12 @@
+export { default as Button } from './Button'
+export type { ButtonNativeProps } from './button.types'
+export {
+    getButtonNativeStyles,
+    getButtonPadding,
+    getButtonV2BorderRadius,
+    getButtonHeight,
+    getIconMaxHeight,
+    getLoaderSize,
+    getTextColor,
+} from './button.utils'
+export type { ButtonV2NativeStyles } from './button.utils'

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,196 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import {
+    StyleSheet,
+    View,
+    type LayoutChangeEvent,
+    type ViewStyle,
+} from 'react-native'
+import Animated, {
+    Easing,
+    cancelAnimation,
+    useAnimatedStyle,
+    useSharedValue,
+    withRepeat,
+    withTiming,
+} from 'react-native-reanimated'
+import type {
+    SkeletonShape,
+    SkeletonTokensType,
+    SkeletonVariant,
+} from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { useReduceMotion } from '../../motion/useReduceMotion'
+import { LinearGradient } from '../../adapters/optionalGradient'
+import { parseSize } from '../../adapters/cssStringAdapter'
+import {
+    resolveSkeletonDuration,
+    resolveSkeletonRadius,
+} from './skeleton.utils'
+import type { SkeletonNativeProps } from './skeleton.types'
+
+/**
+ * Skeleton — React Native implementation of web's `Skeleton`, resolving the
+ * same themed `SKELETON` token slot (base/highlight colours, duration).
+ *
+ * Two usages, matching web:
+ *
+ * - **Block**: `<Skeleton width={120} height={16} />` — a placeholder box.
+ * - **Wrap**: `<Skeleton>{content}</Skeleton>` — the content keeps its
+ *   layout but renders invisible, with the skeleton surface painted over
+ *   it. This is what restores the `skeleton` prop parity on Button and Tag.
+ *
+ * Variants: `pulse` animates opacity between highlight and base; `wave` and
+ * `shimmer` sweep a highlight gradient across the box (requiring the
+ * optional `expo-linear-gradient` — absent, they degrade to pulse; web's
+ * `::after` sweep has no other RN expression). OS reduce-motion renders a
+ * static base-coloured box.
+ *
+ * Hidden from assistive tech: a skeleton is a visual placeholder, and the
+ * owning component announces its loading state (the Button/Alert pattern).
+ */
+const SkeletonImpl = ({
+    variant = 'pulse',
+    shape = 'rectangle',
+    width,
+    height,
+    borderRadius,
+    children,
+    style,
+    testID,
+}: SkeletonNativeProps) => {
+    const tokens = useNativeTokens<SkeletonTokensType>('SKELETON')
+    const reduceMotion = useReduceMotion()
+
+    const duration = resolveSkeletonDuration(tokens)
+    const baseColor = String(tokens.colors.base)
+    const highlightColor = String(tokens.colors.highlight)
+
+    const radius =
+        borderRadius ?? resolveSkeletonRadius(shape, tokens, width, height)
+
+    // Sweep needs the measured box; pulse does not.
+    const [measuredWidth, setMeasuredWidth] = useState(0)
+    const onLayout = useCallback((event: LayoutChangeEvent) => {
+        setMeasuredWidth(event.nativeEvent.layout.width)
+    }, [])
+
+    const canSweep =
+        (variant === 'wave' || variant === 'shimmer') &&
+        LinearGradient !== null &&
+        !reduceMotion
+    const pulses = !reduceMotion && !canSweep
+
+    const progress = useSharedValue(0)
+    useEffect(() => {
+        if (reduceMotion) {
+            cancelAnimation(progress)
+            progress.value = 0
+            return
+        }
+        progress.value = 0
+        progress.value = withRepeat(
+            withTiming(1, { duration, easing: Easing.inOut(Easing.ease) }),
+            -1,
+            // Pulse breathes in and out; the sweep restarts from the left.
+            !canSweep
+        )
+        return () => cancelAnimation(progress)
+    }, [progress, duration, reduceMotion, canSweep])
+
+    const pulseStyle = useAnimatedStyle(
+        () => ({
+            opacity: pulses ? 1 - progress.value * 0.5 : 1,
+        }),
+        [pulses]
+    )
+
+    const sweepStyle = useAnimatedStyle(
+        () => ({
+            transform: [
+                {
+                    translateX: canSweep
+                        ? -measuredWidth + progress.value * 2 * measuredWidth
+                        : 0,
+                },
+            ],
+        }),
+        [canSweep, measuredWidth]
+    )
+
+    const boxStyle = useMemo<ViewStyle>(
+        () => ({
+            backgroundColor: baseColor,
+            borderRadius: radius,
+            overflow: 'hidden',
+            ...(children
+                ? null
+                : {
+                      width: parseSize(width) ?? undefined,
+                      height: parseSize(height) ?? undefined,
+                  }),
+        }),
+        [baseColor, radius, children, width, height]
+    )
+
+    const surface = (
+        <Animated.View
+            pointerEvents="none"
+            onLayout={canSweep ? onLayout : undefined}
+            style={[children ? styles.fill : null, boxStyle, pulseStyle]}
+            testID={testID ? `${testID}-surface` : undefined}
+        >
+            {canSweep && measuredWidth > 0 && LinearGradient ? (
+                <Animated.View style={[StyleSheet.absoluteFill, sweepStyle]}>
+                    <LinearGradient
+                        colors={[baseColor, highlightColor, baseColor]}
+                        locations={[0.2, 0.5, 0.8]}
+                        start={{ x: 0, y: 0.5 }}
+                        end={{ x: 1, y: 0.5 }}
+                        style={styles.fill}
+                    />
+                </Animated.View>
+            ) : null}
+        </Animated.View>
+    )
+
+    if (!children) {
+        return (
+            <View
+                testID={testID}
+                style={style}
+                accessible={false}
+                importantForAccessibility="no-hide-descendants"
+                accessibilityElementsHidden
+            >
+                {surface}
+            </View>
+        )
+    }
+
+    return (
+        <View
+            testID={testID}
+            style={style}
+            pointerEvents="none"
+            accessible={false}
+            importantForAccessibility="no-hide-descendants"
+            accessibilityElementsHidden
+        >
+            {/* The content sizes the box but stays invisible. */}
+            <View style={styles.hiddenContent}>{children}</View>
+            {surface}
+        </View>
+    )
+}
+
+export const Skeleton = React.memo(SkeletonImpl)
+Skeleton.displayName = 'Skeleton'
+
+const styles = StyleSheet.create({
+    hiddenContent: { opacity: 0 },
+    fill: { position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 },
+})
+
+export default Skeleton
+
+export type { SkeletonShape, SkeletonVariant }

package/src/components/Skeleton/index.ts

@@ -0,0 +1,2 @@
+export { Skeleton, default } from './Skeleton'
+export type { SkeletonNativeProps } from './skeleton.types'

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

@@ -0,0 +1,28 @@
+import type React from 'react'
+import type { ViewStyle } from 'react-native'
+import type {
+    SkeletonShape,
+    SkeletonVariant,
+} from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native `Skeleton`.
+ *
+ * Either a placeholder box (`width`/`height`) or a wrapper
+ * (`children` size the box and render invisible underneath the surface).
+ */
+export type SkeletonNativeProps = {
+    /** `pulse` (default) breathes; `wave`/`shimmer` sweep a gradient. */
+    variant?: SkeletonVariant
+    /** Drives the token border radius; `circle` resolves a numeric half. */
+    shape?: SkeletonShape
+    /** Box width for standalone use. Token strings (`"120px"`) accepted. */
+    width?: string | number
+    height?: string | number
+    /** Explicit radius override (wins over `shape`). */
+    borderRadius?: number
+    /** Wrap mode: content keeps its layout, renders invisible. */
+    children?: React.ReactNode
+    style?: ViewStyle
+    testID?: string
+}