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

package/src/components/ProgressBar/ProgressBar.tsx

@@ -0,0 +1,333 @@
+import { memo, useEffect, useState } from 'react'
+import { View } from 'react-native'
+import type { LayoutChangeEvent } from 'react-native'
+import Animated, {
+    Easing,
+    useAnimatedProps,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated'
+import Svg, { Circle } from 'react-native-svg'
+import {
+    ProgressBarV2Appearance,
+    ProgressBarV2Size,
+    ProgressBarV2Variant,
+} from '@juspay/blend-design-system/node'
+import type { ProgressBarV2TokenType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { useReduceMotion } from '../../motion/useReduceMotion'
+import { MOTION_EASING } from '../../motion/motion'
+import {
+    parseBorderRadius,
+    parseDimension,
+} from '../../adapters/cssStringAdapter'
+import Text from '../../primitives/Text'
+import type { ProgressBarNativeProps } from './progressBar.types'
+import {
+    calculateCircularProgressStroke,
+    calculatePercentage,
+    clampValue,
+    getCircularDiameter,
+    normalizeRange,
+    parseCircularDashToken,
+    parseSegmentedPattern,
+    parseTransitionDuration,
+} from './progressBar.utils'
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle)
+
+/**
+ * Determinate progress — the native port of web's `ProgressBarV2`.
+ *
+ * Linear animates the fill width, circular animates the SVG dash offset,
+ * both with the duration decoded from web's transition tokens and the
+ * standard easing curve. Reduce-motion jumps without tweening. The
+ * segmented empty track renders discrete tick marks in place of web's
+ * `repeating-linear-gradient` (documented divergence).
+ */
+const ProgressBarImpl = ({
+    value,
+    min = 0,
+    max = 100,
+    size = ProgressBarV2Size.MD,
+    variant = ProgressBarV2Variant.LINEAR,
+    appearance = ProgressBarV2Appearance.SOLID,
+    showLabel = false,
+    accessibilityLabel,
+    testID,
+    style,
+}: ProgressBarNativeProps) => {
+    const tokens = useNativeTokens<ProgressBarV2TokenType>('PROGRESS_BARV2')
+
+    const range = normalizeRange(min, max)
+    const clamped = clampValue(value, range.min, range.max)
+    const percentage = calculatePercentage(clamped, range.min, range.max)
+    const label = `${Math.round(percentage)}%`
+
+    const a11y = {
+        accessibilityRole: 'progressbar' as const,
+        accessibilityLabel: accessibilityLabel ?? `Progress: ${label}`,
+        accessibilityValue: { min: range.min, max: range.max, now: clamped },
+    }
+
+    const shared = {
+        tokens,
+        percentage,
+        appearance,
+        size,
+        showLabel,
+        label,
+        testID,
+    }
+
+    if (variant === ProgressBarV2Variant.CIRCULAR) {
+        return (
+            <View {...a11y} testID={testID} style={style}>
+                <CircularBar {...shared} />
+            </View>
+        )
+    }
+
+    return (
+        <View
+            {...a11y}
+            testID={testID}
+            style={[
+                {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: parseDimension(tokens.linear.gap as string) ?? 8,
+                },
+                style,
+            ]}
+        >
+            <LinearBar {...shared} />
+            {showLabel && <BarLabel tokens={tokens} label={label} />}
+        </View>
+    )
+}
+
+type BarProps = {
+    tokens: ProgressBarV2TokenType
+    percentage: number
+    appearance: ProgressBarV2Appearance
+    size: ProgressBarV2Size
+    showLabel: boolean
+    label: string
+    testID?: string
+}
+
+function useTweenedProgress(percentage: number, duration: number) {
+    const reduceMotion = useReduceMotion()
+    const progress = useSharedValue(percentage)
+    useEffect(() => {
+        if (reduceMotion) {
+            progress.value = percentage
+            return
+        }
+        progress.value = withTiming(percentage, {
+            duration,
+            easing: Easing.bezier(...MOTION_EASING.standard),
+        })
+    }, [progress, percentage, duration, reduceMotion])
+    return progress
+}
+
+function LinearBar({ tokens, percentage, appearance, size, testID }: BarProps) {
+    const [trackWidth, setTrackWidth] = useState(0)
+
+    const height = parseDimension(tokens.linear.height[size] as string) ?? 8
+    const segmented = appearance === ProgressBarV2Appearance.SEGMENTED
+    const trackRadius =
+        parseBorderRadius(tokens.linear.borderRadius[appearance] as string) ?? 0
+    // Segmented track has sharp corners (radius 0); the fill token says 2px,
+    // but that reveals the transparent track (i.e. the card's white bg)
+    // through the rounded corners. Use the track radius for segmented fills.
+    const fillRadius = segmented
+        ? trackRadius
+        : (parseBorderRadius(
+              tokens.linear.fill.borderRadius[appearance] as string
+          ) ?? 0)
+    const duration = parseTransitionDuration(tokens.transition as string)
+
+    const progress = useTweenedProgress(percentage, duration)
+    const fillStyle = useAnimatedStyle(
+        () => ({ width: `${progress.value}%` }),
+        []
+    )
+
+    const pattern = segmented
+        ? parseSegmentedPattern(
+              tokens.linear.empty.backgroundImage[appearance] as
+                  | string
+                  | undefined,
+              tokens.linear.empty.backgroundSize[appearance] as
+                  | string
+                  | undefined
+          )
+        : null
+    const tickCount =
+        pattern && trackWidth > 0 ? Math.ceil(trackWidth / pattern.period) : 0
+
+    const onLayout = segmented
+        ? (event: LayoutChangeEvent) =>
+              setTrackWidth(event.nativeEvent.layout.width)
+        : undefined
+
+    return (
+        <View
+            onLayout={onLayout}
+            testID={testID ? `${testID}-track` : undefined}
+            style={{
+                flex: 1,
+                height,
+                overflow: 'hidden',
+                backgroundColor: String(
+                    tokens.linear.empty.backgroundColor[appearance] ??
+                        'transparent'
+                ),
+                ...(typeof trackRadius === 'number'
+                    ? { borderRadius: trackRadius }
+                    : trackRadius),
+            }}
+        >
+            {pattern?.markColor && (
+                <View
+                    pointerEvents="none"
+                    style={{
+                        ...({
+                            position: 'absolute',
+                            top: 0,
+                            bottom: 0,
+                            left: 0,
+                            right: 0,
+                        } as const),
+                        flexDirection: 'row',
+                        gap: pattern.period - pattern.markWidth,
+                    }}
+                >
+                    {Array.from({ length: tickCount }, (_, i) => (
+                        <View
+                            key={i}
+                            style={{
+                                width: pattern.markWidth,
+                                backgroundColor: pattern.markColor as string,
+                            }}
+                        />
+                    ))}
+                </View>
+            )}
+            <Animated.View
+                testID={testID ? `${testID}-fill` : undefined}
+                style={[
+                    {
+                        height: '100%',
+                        backgroundColor: String(
+                            tokens.linear.fill.backgroundColor[appearance]
+                        ),
+                        ...(typeof fillRadius === 'number'
+                            ? { borderRadius: fillRadius }
+                            : fillRadius),
+                    },
+                    fillStyle,
+                ]}
+            />
+        </View>
+    )
+}
+
+function CircularBar({
+    tokens,
+    percentage,
+    appearance,
+    size,
+    showLabel,
+    label,
+    testID,
+}: BarProps) {
+    const svgSize = getCircularDiameter(
+        tokens.circular.size as Record<string, unknown>,
+        size,
+        parseDimension
+    )
+    const strokeWidth = tokens.circular.strokeWidth[size]
+    const stroke = calculateCircularProgressStroke(
+        svgSize,
+        strokeWidth,
+        percentage
+    )
+    const dash = parseCircularDashToken(
+        tokens.circular.dashArray[appearance] as string | undefined
+    )
+    const duration = parseTransitionDuration(tokens.circular.motion as string)
+
+    const progress = useTweenedProgress(percentage, duration)
+    const animatedProps = useAnimatedProps(() => ({
+        strokeDashoffset:
+            stroke.circumference -
+            (progress.value / 100) * stroke.circumference,
+    }))
+
+    const center = svgSize / 2
+
+    return (
+        <View style={{ alignItems: 'center', gap: 4 }}>
+            <Svg
+                width={svgSize}
+                height={svgSize}
+                viewBox={`0 0 ${svgSize} ${svgSize}`}
+                testID={testID ? `${testID}-svg` : undefined}
+            >
+                <Circle
+                    cx={center}
+                    cy={center}
+                    r={stroke.radius}
+                    stroke={String(tokens.circular.background[appearance])}
+                    strokeWidth={strokeWidth}
+                    strokeDasharray={dash.length ? dash : undefined}
+                    fill="none"
+                />
+                <AnimatedCircle
+                    cx={center}
+                    cy={center}
+                    r={stroke.radius}
+                    stroke={String(tokens.circular.stroke[appearance])}
+                    strokeWidth={strokeWidth}
+                    strokeLinecap="round"
+                    strokeDasharray={[stroke.circumference]}
+                    animatedProps={animatedProps}
+                    fill="none"
+                    // Start at 12 o'clock, web parity.
+                    transform={`rotate(-90 ${center} ${center})`}
+                />
+            </Svg>
+            {showLabel && <BarLabel tokens={tokens} label={label} />}
+        </View>
+    )
+}
+
+function BarLabel({
+    tokens,
+    label,
+}: {
+    tokens: ProgressBarV2TokenType
+    label: string
+}) {
+    return (
+        <Text
+            fontSize={tokens.label.fontSize as string | number}
+            fontWeight={tokens.label.fontWeight as string | number}
+            color={String(tokens.label.color)}
+            accessible={false}
+            importantForAccessibility="no-hide-descendants"
+        >
+            {label}
+        </Text>
+    )
+}
+
+export const ProgressBar = memo(ProgressBarImpl)
+ProgressBar.displayName = 'ProgressBar'
+
+export default ProgressBar

package/src/components/ProgressBar/index.ts

@@ -0,0 +1,13 @@
+export { default as ProgressBar } from './ProgressBar'
+export type { ProgressBarNativeProps } from './progressBar.types'
+export {
+    normalizeRange,
+    clampValue,
+    calculatePercentage,
+    parseCircularDashToken,
+    calculateCircularProgressStroke,
+    getCircularDiameter,
+    parseSegmentedPattern,
+    parseTransitionDuration,
+} from './progressBar.utils'
+export type { CircularStroke, SegmentedPattern } from './progressBar.utils'

package/src/components/ProgressBar/progressBar.types.ts

@@ -0,0 +1,32 @@
+import type { StyleProp, ViewStyle } from 'react-native'
+import type {
+    ProgressBarV2Appearance,
+    ProgressBarV2Size,
+    ProgressBarV2Variant,
+} from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native `ProgressBar` — the port of web's `ProgressBarV2`.
+ *
+ * Determinate only, like web: `value` is required and there is no
+ * indeterminate mode. Announced through RN's `accessibilityValue`
+ * (min/max/now) instead of web's ARIA attributes.
+ *
+ * Divergence: web paints the segmented empty track with a
+ * `repeating-linear-gradient`; RN cannot, so native renders discrete tick
+ * marks with the same color, width and period decoded from the tokens.
+ */
+export type ProgressBarNativeProps = {
+    value: number
+    min?: number
+    max?: number
+    size?: ProgressBarV2Size
+    variant?: ProgressBarV2Variant
+    appearance?: ProgressBarV2Appearance
+    /** Show the rounded percentage next to (linear) or under (circular). */
+    showLabel?: boolean
+    /** Screen-reader name; defaults to web's `Progress: N%`. */
+    accessibilityLabel?: string
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}

package/src/components/ProgressBar/progressBar.utils.ts

@@ -0,0 +1,136 @@
+import { parseBackground, parseDuration } from '../../adapters/cssStringAdapter'
+
+/**
+ * Pure math and token decoding for `ProgressBar` — ports of web's
+ * `ProgressBarV2/utils.ts` plus the native-only segmented-pattern and
+ * transition decoding. All total: bad input degrades to a sane fallback.
+ */
+
+/** Web's `normalizeRange` — reversed bounds swap so min <= max. */
+export function normalizeRange(
+    min: number,
+    max: number
+): { min: number; max: number } {
+    if (!Number.isFinite(min)) min = 0
+    if (!Number.isFinite(max)) max = 100
+    return min <= max ? { min, max } : { min: max, max: min }
+}
+
+/** Web's `clampValue`. */
+export function clampValue(value: number, min: number, max: number): number {
+    if (!Number.isFinite(value)) return min
+    return Math.min(max, Math.max(min, value))
+}
+
+/** Web's `calculatePercentage` — guarded against a zero-width range. */
+export function calculatePercentage(
+    value: number,
+    min: number,
+    max: number
+): number {
+    if (max === min) return 0
+    return ((value - min) / (max - min)) * 100
+}
+
+/** Web's `parseCircularDashToken` — `'4 2'` or `'4,2'` to numbers. */
+export function parseCircularDashToken(token: string | undefined): number[] {
+    if (!token) return []
+    const parts = token
+        .split(/[\s,]+/)
+        .map((p) => parseFloat(p))
+        .filter((n) => Number.isFinite(n) && n >= 0)
+    return parts.length >= 2 ? parts : []
+}
+
+export type CircularStroke = {
+    radius: number
+    circumference: number
+    dashOffset: number
+}
+
+/** Web's `calculateCircularProgressStroke` — radius inset by the stroke. */
+export function calculateCircularProgressStroke(
+    size: number,
+    strokeWidth: number,
+    percentage: number
+): CircularStroke {
+    const radius = Math.max(0, (size - strokeWidth) / 2)
+    const circumference = 2 * Math.PI * radius
+    return {
+        radius,
+        circumference,
+        dashOffset: circumference - (percentage / 100) * circumference,
+    }
+}
+
+export type SegmentedPattern = {
+    markColor: string | null
+    markWidth: number
+    period: number
+}
+
+/**
+ * Decode web's segmented empty-track pattern. Web paints it with
+ * `repeating-linear-gradient(to right, <color>, <color> 2px, transparent
+ * 2px, transparent 8px)` sized `'10px 100%'` — unrepresentable in RN, so
+ * native renders discrete tick marks with the same color, mark width and
+ * period. `parseBackground` degrades the unsupported gradient to its first
+ * color stop, which is exactly the mark color.
+ */
+export function parseSegmentedPattern(
+    backgroundImage: string | undefined,
+    backgroundSize: string | undefined
+): SegmentedPattern {
+    const parsed = parseBackground(backgroundImage)
+    const markColor = parsed?.type === 'flat' ? parsed.color : null
+
+    const firstPx = (value: string | undefined): number | null => {
+        const match = value?.match(/(-?(?:\d+(?:\.\d+)?|\.\d+))px/)
+        if (!match) return null
+        const n = parseFloat(match[1])
+        return Number.isFinite(n) && n > 0 ? n : null
+    }
+
+    return {
+        markColor,
+        markWidth: firstPx(backgroundImage) ?? 2,
+        period: firstPx(backgroundSize) ?? 10,
+    }
+}
+
+/**
+ * Circular diameter for a size, healing a web token hole: the web token
+ * file ships `circular.size = { sm, lg }` with no `md` entry (its md
+ * circular bar renders with an undefined width — flagged upstream). Native
+ * falls back down the ladder, then to web's sm default.
+ */
+export function getCircularDiameter(
+    sizeTokens: Record<string, unknown>,
+    size: string,
+    parse: (v: string | number | undefined) => number | undefined
+): number {
+    return (
+        parse(sizeTokens[size] as string | number | undefined) ??
+        parse(sizeTokens.sm as string | number | undefined) ??
+        40
+    )
+}
+
+export type FillAnimation = { duration: number }
+
+/**
+ * Decode a CSS transition shorthand token (`'width 0.3s ease-in-out'`)
+ * into the animation duration. The easing keyword maps to the motion
+ * layer's standard curve at the call site.
+ */
+export function parseTransitionDuration(
+    transition: string | undefined,
+    fallback = 300
+): number {
+    if (!transition) return fallback
+    for (const part of transition.split(/\s+/)) {
+        const duration = parseDuration(part)
+        if (duration !== undefined) return duration
+    }
+    return fallback
+}

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,149 @@
+import { forwardRef, useEffect } from 'react'
+import { View } from 'react-native'
+import type { View as RNView } from 'react-native'
+import Animated, {
+    Easing,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated'
+import { SelectorV2Size } from '@juspay/blend-design-system/node'
+import type { RadioV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { useReduceMotion } from '../../motion/useReduceMotion'
+import { MOTION_DURATION, MOTION_EASING } from '../../motion/motion'
+import Pressable from '../../primitives/Pressable'
+import Slot from '../../primitives/Slot'
+import { parseDimension } from '../../adapters/cssStringAdapter'
+import { SelectorContent } from '../shared/selector/SelectorContent'
+import type { RadioNativeProps } from './radio.types'
+
+/**
+ * Radio — the native port of web's `RadioV2`.
+ *
+ * Ring + inner dot at half the ring's size, the dot scaling in like web's
+ * `::after` transition. The whole row is one pressable (label-tap selects).
+ * Pressing an already-selected radio does nothing, matching native radio
+ * semantics.
+ */
+const Radio = forwardRef<RNView, RadioNativeProps>(function Radio(
+    {
+        checked = false,
+        onCheckedChange,
+        required = false,
+        error = false,
+        label,
+        subLabel,
+        size = SelectorV2Size.MD,
+        disabled = false,
+        slot,
+        accessibilityLabel,
+        testID,
+        style,
+    },
+    ref
+) {
+    const tokens = useNativeTokens<RadioV2TokensType>('RADIOV2')
+    const reduceMotion = useReduceMotion()
+
+    const indicatorState = checked ? 'active' : 'inactive'
+    const interactionState = disabled ? 'disabled' : error ? 'error' : 'default'
+
+    const progress = useSharedValue(checked ? 1 : 0)
+    useEffect(() => {
+        if (reduceMotion) {
+            progress.value = checked ? 1 : 0
+            return
+        }
+        progress.value = withTiming(checked ? 1 : 0, {
+            duration: MOTION_DURATION.normal,
+            easing: Easing.bezier(...MOTION_EASING.standard),
+        })
+    }, [progress, checked, reduceMotion])
+    const dotStyle = useAnimatedStyle(
+        () => ({ transform: [{ scale: progress.value }] }),
+        []
+    )
+
+    const ringSize =
+        parseDimension(tokens.radio.height[size] as string | number) ?? 16
+    const borderWidth =
+        Number(tokens.radio.borderWidth[indicatorState]?.[interactionState]) ||
+        1
+    const dotSize = ringSize / 2
+
+    const select = () => {
+        // Native radio semantics: selecting an already-selected radio is a
+        // no-op; deselection happens by selecting a sibling.
+        if (!checked) onCheckedChange?.(true)
+    }
+
+    return (
+        <Pressable
+            ref={ref}
+            onPress={select}
+            disabled={disabled}
+            flexDirection="row"
+            alignItems="center"
+            gap={tokens.gap as string | number}
+            accessibilityRole="radio"
+            accessibilityState={{ checked, disabled }}
+            accessibilityLabel={accessibilityLabel ?? label}
+            testID={testID}
+            style={style}
+        >
+            <View
+                testID={testID ? `${testID}-ring` : undefined}
+                style={{
+                    width: ringSize,
+                    height: ringSize,
+                    borderRadius: ringSize / 2,
+                    borderWidth,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: String(
+                        tokens.radio.indicator[indicatorState]?.backgroundColor[
+                            interactionState
+                        ] ?? 'transparent'
+                    ),
+                    borderColor: String(
+                        tokens.radio.indicator[indicatorState]?.borderColor[
+                            interactionState
+                        ] ?? 'transparent'
+                    ),
+                }}
+            >
+                <Animated.View
+                    style={[
+                        {
+                            width: dotSize,
+                            height: dotSize,
+                            borderRadius: dotSize / 2,
+                            backgroundColor: String(
+                                tokens.radio.activeIndicator.active
+                                    .backgroundColor[
+                                    disabled ? 'disabled' : 'default'
+                                ] ?? 'transparent'
+                            ),
+                        },
+                        dotStyle,
+                    ]}
+                />
+            </View>
+            <SelectorContent
+                label={label}
+                subLabel={subLabel}
+                required={required}
+                size={size}
+                state={interactionState}
+                tokens={tokens.content}
+                testID={testID ? `${testID}-content` : undefined}
+            />
+            {slot && <Slot hidden={Boolean(label)}>{slot}</Slot>}
+        </Pressable>
+    )
+})
+
+Radio.displayName = 'Radio'
+
+export default Radio

package/src/components/Radio/index.ts

@@ -0,0 +1,2 @@
+export { default as Radio } from './Radio'
+export type { RadioNativeProps } from './radio.types'

package/src/components/Radio/radio.types.ts

@@ -0,0 +1,23 @@
+import type React from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import type { RadioBaseProps } from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native `Radio` — the port of web's `RadioV2`.
+ *
+ * Derives from `RadioBaseProps`. Divergence: web types `onCheckedChange`
+ * with a DOM `ChangeEvent`; native calls it with `true` (a radio can only
+ * be selected — deselection happens by selecting a sibling). There is no
+ * RadioGroup on either platform: the caller owns the selection state and
+ * renders one `Radio` per option (web's unused `group.gap` token noted).
+ *
+ * `maxLength` truncation is omitted at the type level (needs Tooltip).
+ */
+export type RadioNativeProps = RadioBaseProps & {
+    onCheckedChange?: (checked: true) => void
+    disabled?: boolean
+    slot?: React.ReactNode
+    accessibilityLabel?: string
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}