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

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,147 @@
+import { forwardRef, useEffect } from 'react'
+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 { SwitchV2TokensType } 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 { parseBorder, parseDimension } from '../../adapters/cssStringAdapter'
+import { SelectorContent } from '../shared/selector/SelectorContent'
+import type { SwitchNativeProps } from './switch.types'
+
+/** Web positions the thumb at `top: 1px; left: 1px` — the track inset. */
+const THUMB_INSET = 1
+
+/**
+ * Switch — the native port of web's `SwitchV2`.
+ *
+ * Track + absolutely-positioned thumb sliding on the motion layer. The
+ * thumb's travel is COMPUTED from the track and thumb width tokens
+ * (`trackWidth − thumbWidth − 2×inset`) — web hardcodes `12px`/`16px` in
+ * the component, so the computed form stays correct if the tokens change.
+ * The whole row is one pressable (label-tap toggles).
+ */
+const Switch = forwardRef<RNView, SwitchNativeProps>(function Switch(
+    {
+        checked = false,
+        onCheckedChange,
+        required = false,
+        error = false,
+        label,
+        subLabel,
+        size = SelectorV2Size.MD,
+        disabled = false,
+        slot,
+        accessibilityLabel,
+        testID,
+        style,
+    },
+    ref
+) {
+    const tokens = useNativeTokens<SwitchV2TokensType>('SWITCHV2')
+    const reduceMotion = useReduceMotion()
+
+    const trackWidth =
+        parseDimension(tokens.switch.width[size] as string | number) ?? 32
+    const trackHeight =
+        parseDimension(tokens.switch.height[size] as string | number) ?? 16
+    const thumbWidth =
+        parseDimension(tokens.switch.thumb.width[size] as string | number) ?? 14
+    const thumbHeight =
+        parseDimension(tokens.switch.thumb.height[size] as string | number) ??
+        14
+    const travel = Math.max(0, trackWidth - thumbWidth - 2 * THUMB_INSET)
+
+    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 thumbStyle = useAnimatedStyle(
+        () => ({ transform: [{ translateX: progress.value * travel }] }),
+        [travel]
+    )
+
+    const trackState = checked ? 'checked' : 'unchecked'
+    const interactionState = disabled ? 'disabled' : 'default'
+    const contentState = disabled ? 'disabled' : error ? 'error' : 'default'
+
+    return (
+        <Pressable
+            ref={ref}
+            onPress={() => onCheckedChange?.(!checked)}
+            disabled={disabled}
+            flexDirection="row"
+            alignItems="center"
+            gap={tokens.gap as string | number}
+            accessibilityRole="switch"
+            accessibilityState={{ checked, disabled }}
+            accessibilityLabel={accessibilityLabel ?? label}
+            testID={testID}
+            style={style}
+        >
+            <Animated.View
+                testID={testID ? `${testID}-track` : undefined}
+                style={{
+                    width: trackWidth,
+                    height: trackHeight,
+                    borderRadius: trackHeight / 2,
+                    justifyContent: 'center',
+                    backgroundColor: String(
+                        tokens.switch.backgroundColor[trackState]?.[
+                            interactionState
+                        ] ?? 'transparent'
+                    ),
+                }}
+            >
+                <Animated.View
+                    testID={testID ? `${testID}-thumb` : undefined}
+                    style={[
+                        {
+                            position: 'absolute',
+                            left: THUMB_INSET,
+                            width: thumbWidth,
+                            height: thumbHeight,
+                            borderRadius: thumbHeight / 2,
+                            backgroundColor: String(
+                                tokens.switch.thumb.backgroundColor ?? '#FFFFFF'
+                            ),
+                            ...parseBorder(
+                                String(tokens.switch.thumb.border ?? 'none')
+                            ),
+                        },
+                        thumbStyle,
+                    ]}
+                />
+            </Animated.View>
+            <SelectorContent
+                label={label}
+                subLabel={subLabel}
+                required={required}
+                size={size}
+                state={contentState}
+                tokens={tokens.content}
+                testID={testID ? `${testID}-content` : undefined}
+            />
+            {slot && <Slot hidden={Boolean(label)}>{slot}</Slot>}
+        </Pressable>
+    )
+})
+
+Switch.displayName = 'Switch'
+
+export default Switch

package/src/components/Switch/index.ts

@@ -0,0 +1,2 @@
+export { default as Switch } from './Switch'
+export type { SwitchNativeProps } from './switch.types'

package/src/components/Switch/switch.types.ts

@@ -0,0 +1,18 @@
+import type React from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import type { SwitchBaseProps } from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native `Switch` — the port of web's `SwitchV2`.
+ *
+ * Derives from `SwitchBaseProps`; controlled-only like web (RN core's
+ * `Switch` idiom). `maxLength` truncation is omitted at the type level
+ * (needs Tooltip).
+ */
+export type SwitchNativeProps = SwitchBaseProps & {
+    disabled?: boolean
+    slot?: React.ReactNode
+    accessibilityLabel?: string
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,98 @@
+import { forwardRef, useCallback, useMemo, useRef, useState } from 'react'
+import { View } from 'react-native'
+import type { View as RNView } from 'react-native'
+import { TabsV2Size, TabsV2Variant } from '@juspay/blend-design-system/node'
+import { useControllableState } from '../../hooks/useControllableState'
+import { TabsContext, type TriggerLayout } from './tabs.context'
+import type { TabsNativeProps } from './tabs.types'
+
+/**
+ * Tabs root — the native port of web's `TabsV2`.
+ *
+ * Provides selection + styling context to `TabsList`/`TabsTrigger`/
+ * `TabsContent`. Controlled and uncontrolled (`value`/`defaultValue`/
+ * `onValueChange`), like web's Radix root.
+ */
+const Tabs = forwardRef<RNView, TabsNativeProps>(function Tabs(
+    {
+        value: controlledValue,
+        defaultValue,
+        onValueChange,
+        variant = TabsV2Variant.UNDERLINE,
+        size = TabsV2Size.MD,
+        expanded = false,
+        fitContent = false,
+        disabled = false,
+        children,
+        testID,
+        style,
+    },
+    ref
+) {
+    const [value, setValue] = useControllableState<string | undefined>(
+        controlledValue,
+        defaultValue,
+        onValueChange as (value: string | undefined) => void
+    )
+
+    const layouts = useRef(new Map<string, TriggerLayout>())
+    const [layoutsVersion, setLayoutsVersion] = useState(0)
+    const registerLayout = useCallback(
+        (triggerValue: string, layout: TriggerLayout) => {
+            const previous = layouts.current.get(triggerValue)
+            if (
+                previous &&
+                previous.x === layout.x &&
+                previous.width === layout.width
+            ) {
+                return
+            }
+            layouts.current.set(triggerValue, layout)
+            setLayoutsVersion((v) => v + 1)
+        },
+        []
+    )
+
+    const context = useMemo(
+        () => ({
+            value,
+            setValue: setValue as (value: string) => void,
+            variant,
+            size,
+            disabled,
+            expanded,
+            layouts,
+            layoutsVersion,
+            registerLayout,
+        }),
+        [
+            value,
+            setValue,
+            variant,
+            size,
+            disabled,
+            expanded,
+            layoutsVersion,
+            registerLayout,
+        ]
+    )
+
+    return (
+        <TabsContext.Provider value={context}>
+            <View
+                ref={ref}
+                testID={testID}
+                style={[
+                    { alignSelf: fitContent ? 'flex-start' : 'stretch' },
+                    style,
+                ]}
+            >
+                {children}
+            </View>
+        </TabsContext.Provider>
+    )
+})
+
+Tabs.displayName = 'Tabs'
+
+export default Tabs

package/src/components/Tabs/TabsContent.tsx

@@ -0,0 +1,22 @@
+import { forwardRef } from 'react'
+import { View } from 'react-native'
+import type { View as RNView } from 'react-native'
+import { useTabsContext } from './tabs.context'
+import type { TabsContentNativeProps } from './tabs.types'
+
+/** The active tab's panel — renders nothing while its tab is inactive. */
+const TabsContent = forwardRef<RNView, TabsContentNativeProps>(
+    function TabsContent({ value, children, testID, style }, ref) {
+        const context = useTabsContext('TabsContent')
+        if (context.value !== value) return null
+        return (
+            <View ref={ref} testID={testID} style={style}>
+                {children}
+            </View>
+        )
+    }
+)
+
+TabsContent.displayName = 'TabsContent'
+
+export default TabsContent

package/src/components/Tabs/TabsList.tsx

@@ -0,0 +1,188 @@
+import { forwardRef, useEffect, useRef } from 'react'
+import { ScrollView, View, useWindowDimensions } from 'react-native'
+import Animated, {
+    Easing,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated'
+import { TabsV2Variant } from '@juspay/blend-design-system/node'
+import type { TabsV2TokensType } 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 {
+    parseBorder,
+    parseBorderRadius,
+    parseDimension,
+} from '../../adapters/cssStringAdapter'
+import { useTabsContext } from './tabs.context'
+import type { TabsListNativeProps } from './tabs.types'
+
+/**
+ * The scrollable tab bar with the animated indicator.
+ *
+ * Triggers report their layout into the Tabs context; one Animated.View
+ * follows the active trigger with `withTiming` — replacing web's CSS-vars +
+ * ResizeObserver (underline) and framer-motion `layoutId` (boxed/floating/
+ * pills, where the indicator paints the active background behind triggers).
+ * The active trigger auto-centers via `scrollTo`.
+ */
+const TabsList = forwardRef<View, TabsListNativeProps>(function TabsList(
+    { children, accessibilityLabel, testID, style },
+    ref
+) {
+    const context = useTabsContext('TabsList')
+    const tokens = useNativeTokens<TabsV2TokensType>('TABSV2')
+    const reduceMotion = useReduceMotion()
+    const scrollRef = useRef<ScrollView>(null)
+    const { width: windowWidth } = useWindowDimensions()
+
+    const { variant, size, value, layouts, layoutsVersion } = context
+    const list = tokens.tabList
+    const underline = variant === TabsV2Variant.UNDERLINE
+
+    const indicatorX = useSharedValue(0)
+    const indicatorWidth = useSharedValue(0)
+    const indicatorOpacity = useSharedValue(0)
+
+    useEffect(() => {
+        const layout = value ? layouts.current.get(value) : undefined
+        if (!layout || layout.width === 0) {
+            indicatorOpacity.value = 0
+            return
+        }
+        const timing = {
+            duration: reduceMotion ? 0 : MOTION_DURATION.normal,
+            easing: Easing.bezier(...MOTION_EASING.standard),
+        }
+        // First placement snaps into position instead of sliding from 0.
+        if (indicatorOpacity.value === 0) {
+            indicatorX.value = layout.x
+            indicatorWidth.value = layout.width
+        } else {
+            indicatorX.value = withTiming(layout.x, timing)
+            indicatorWidth.value = withTiming(layout.width, timing)
+        }
+        indicatorOpacity.value = 1
+
+        // Keep the active trigger visible, roughly centred.
+        scrollRef.current?.scrollTo({
+            x: Math.max(0, layout.x - windowWidth / 2 + layout.width / 2),
+            animated: !reduceMotion,
+        })
+    }, [
+        value,
+        layoutsVersion,
+        reduceMotion,
+        windowWidth,
+        layouts,
+        indicatorX,
+        indicatorWidth,
+        indicatorOpacity,
+    ])
+
+    const indicatorStyle = useAnimatedStyle(
+        () => ({
+            transform: [{ translateX: indicatorX.value }],
+            width: indicatorWidth.value,
+            opacity: indicatorOpacity.value,
+        }),
+        []
+    )
+
+    const listRadius =
+        parseBorderRadius(
+            list.borderRadius[size]?.[variant] as string | number
+        ) ?? 0
+    const pad = list.padding[size]?.[variant]
+    const bottomBorder = parseBorder(String(list.borderBottom[variant]))
+    const triggerRadius =
+        parseBorderRadius(
+            list.trigger.borderRadius[size]?.[variant] as string | number
+        ) ?? 0
+
+    const indicatorChrome = underline
+        ? {
+              bottom:
+                  parseDimension(
+                      list.activeIndicator.position.bottom as string | number
+                  ) ?? 0,
+              height:
+                  parseDimension(
+                      list.activeIndicator.height as string | number
+                  ) ?? 2,
+              backgroundColor: String(list.activeIndicator.color),
+          }
+        : {
+              top: 0,
+              bottom: 0,
+              backgroundColor: String(
+                  list.trigger.backgroundColor[variant]?.active ?? 'transparent'
+              ),
+              ...(typeof triggerRadius === 'number'
+                  ? { borderRadius: triggerRadius }
+                  : triggerRadius),
+          }
+
+    return (
+        <View
+            ref={ref}
+            accessibilityLabel={accessibilityLabel}
+            testID={testID}
+            style={[
+                {
+                    backgroundColor: String(
+                        list.backgroundColor[variant] ?? 'transparent'
+                    ),
+                    ...(typeof listRadius === 'number'
+                        ? { borderRadius: listRadius }
+                        : listRadius),
+                    borderBottomWidth: bottomBorder.borderWidth,
+                    borderBottomColor: bottomBorder.borderColor,
+                },
+                style,
+            ]}
+        >
+            <ScrollView
+                ref={scrollRef}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+            >
+                <View
+                    accessibilityRole="tablist"
+                    style={{
+                        flexDirection: 'row',
+                        gap: parseDimension(list.gap as string | number) ?? 8,
+                        paddingTop: parseDimension(pad?.top as string | number),
+                        paddingRight: parseDimension(
+                            pad?.right as string | number
+                        ),
+                        paddingBottom: parseDimension(
+                            pad?.bottom as string | number
+                        ),
+                        paddingLeft: parseDimension(
+                            pad?.left as string | number
+                        ),
+                        minWidth: '100%',
+                    }}
+                >
+                    <Animated.View
+                        pointerEvents="none"
+                        testID={testID ? `${testID}-indicator` : undefined}
+                        style={[
+                            { position: 'absolute', left: 0 },
+                            indicatorChrome,
+                            indicatorStyle,
+                        ]}
+                    />
+                    {children}
+                </View>
+            </ScrollView>
+        </View>
+    )
+})
+
+TabsList.displayName = 'TabsList'
+
+export default TabsList

package/src/components/Tabs/TabsTrigger.tsx

@@ -0,0 +1,98 @@
+import { forwardRef } from 'react'
+import type { View as RNView, LayoutChangeEvent } from 'react-native'
+import type { TabsV2TokensType } 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 { useTabsContext } from './tabs.context'
+import type { TabsTriggerNativeProps } from './tabs.types'
+
+/**
+ * One tab. Reports its layout into the Tabs context so the list's
+ * indicator can follow it; the trigger surface itself stays transparent —
+ * the active background/underline is the list's animated indicator.
+ */
+const TabsTrigger = forwardRef<RNView, TabsTriggerNativeProps>(
+    function TabsTrigger(
+        { value, children, leftSlot, rightSlot, disabled = false, testID },
+        ref
+    ) {
+        const context = useTabsContext('TabsTrigger')
+        const tokens = useNativeTokens<TabsV2TokensType>('TABSV2')
+        const trigger = tokens.tabList.trigger
+
+        const { variant, size } = context
+        const selected = context.value === value
+        const isDisabled = disabled || context.disabled
+        const textState = isDisabled
+            ? 'disabled'
+            : selected
+              ? 'active'
+              : 'default'
+        const pad = trigger.padding[size]?.[variant]
+        const textColor = String(
+            trigger.text.color[variant]?.[textState] ?? '#000000'
+        )
+
+        const onLayout = (event: LayoutChangeEvent) => {
+            const { x, width, height } = event.nativeEvent.layout
+            context.registerLayout(value, { x, width, height })
+        }
+
+        return (
+            <Pressable
+                ref={ref}
+                onPress={() => context.setValue(value)}
+                disabled={isDisabled}
+                onLayout={onLayout}
+                minTouchTarget={0}
+                flexDirection="row"
+                alignItems="center"
+                justifyContent="center"
+                gap={trigger.gap as string | number}
+                paddingTop={pad?.top as string | number}
+                paddingRight={pad?.right as string | number}
+                paddingBottom={pad?.bottom as string | number}
+                paddingLeft={pad?.left as string | number}
+                flexGrow={context.expanded ? 1 : undefined}
+                accessibilityRole="tab"
+                accessibilityState={{ selected, disabled: isDisabled }}
+                accessibilityLabel={String(children)}
+                testID={testID}
+            >
+                {leftSlot && (
+                    <Slot
+                        hidden
+                        color={textColor}
+                        maxHeight={trigger.icon.maxWidth as string | number}
+                    >
+                        {leftSlot}
+                    </Slot>
+                )}
+                <Text
+                    fontSize={trigger.text.fontSize[size] as string | number}
+                    fontWeight={
+                        trigger.text.fontWeight[size] as string | number
+                    }
+                    color={textColor}
+                >
+                    {String(children)}
+                </Text>
+                {rightSlot && (
+                    <Slot
+                        hidden
+                        color={textColor}
+                        maxHeight={trigger.icon.maxWidth as string | number}
+                    >
+                        {rightSlot}
+                    </Slot>
+                )}
+            </Pressable>
+        )
+    }
+)
+
+TabsTrigger.displayName = 'TabsTrigger'
+
+export default TabsTrigger

package/src/components/Tabs/index.ts

@@ -0,0 +1,10 @@
+export { default as Tabs } from './Tabs'
+export { default as TabsList } from './TabsList'
+export { default as TabsTrigger } from './TabsTrigger'
+export { default as TabsContent } from './TabsContent'
+export type {
+    TabsNativeProps,
+    TabsListNativeProps,
+    TabsTriggerNativeProps,
+    TabsContentNativeProps,
+} from './tabs.types'

package/src/components/Tabs/tabs.context.ts

@@ -0,0 +1,31 @@
+import { createContext, useContext } from 'react'
+import type { MutableRefObject } from 'react'
+import { TabsV2Size, TabsV2Variant } from '@juspay/blend-design-system/node'
+
+export type TriggerLayout = { x: number; width: number; height: number }
+
+export type TabsContextValue = {
+    value: string | undefined
+    setValue: (value: string) => void
+    variant: TabsV2Variant
+    size: TabsV2Size
+    disabled: boolean
+    expanded: boolean
+    /** Trigger x/width registry driving the indicator and auto-scroll. */
+    layouts: MutableRefObject<Map<string, TriggerLayout>>
+    /** Bumped on every layout registration so the list re-positions. */
+    layoutsVersion: number
+    registerLayout: (value: string, layout: TriggerLayout) => void
+}
+
+export const TabsContext = createContext<TabsContextValue | null>(null)
+
+export function useTabsContext(part: string): TabsContextValue {
+    const context = useContext(TabsContext)
+    if (!context) {
+        throw new Error(
+            `[blend-native] <${part}> must be rendered inside <Tabs>.`
+        )
+    }
+    return context
+}

package/src/components/Tabs/tabs.types.ts

@@ -0,0 +1,46 @@
+import type React from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import type { TabsBaseProps } from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native compound `Tabs` — the port of web's `TabsV2`
+ * (`Tabs`/`TabsList`/`TabsTrigger`/`TabsContent`), context-based instead of
+ * Radix + cloneElement.
+ *
+ * Deliberately omitted rather than accepted-and-ignored (compile errors):
+ *
+ * - `closable`/`onClose` triggers, `stickyHeader`/`offsetTop`,
+ *   `showSkeleton` — later pickups with their own scope calls.
+ */
+export type TabsNativeProps = TabsBaseProps & {
+    value?: string
+    defaultValue?: string
+    onValueChange?: (value: string) => void
+    children: React.ReactNode
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}
+
+export type TabsListNativeProps = {
+    children: React.ReactNode
+    accessibilityLabel?: string
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}
+
+export type TabsTriggerNativeProps = {
+    value: string
+    /** The label — web constrains trigger children the same way. */
+    children: string | number
+    leftSlot?: React.ReactNode
+    rightSlot?: React.ReactNode
+    disabled?: boolean
+    testID?: string
+}
+
+export type TabsContentNativeProps = {
+    value: string
+    children: React.ReactNode
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}

package/src/components/Tag/Tag.tsx

@@ -177,7 +177,7 @@ const Tag = forwardRef<RNView, TagNativeProps>(function Tag(
                 accessibilityLabel={accessibleName}
                 accessibilityState={getTagAccessibilityState(true, pressed)}
                 testID={testID}
-                style={{ ...groupBorderWidths, ...style }}
+                style={[groupBorderWidths, style]}
             >
                 {content}
             </Pressable>
@@ -192,7 +192,7 @@ const Tag = forwardRef<RNView, TagNativeProps>(function Tag(
             accessibilityRole="text"
             accessibilityLabel={accessibilityLabel}
             testID={testID}
-            style={{ ...groupBorderWidths, ...style }}
+            style={[groupBorderWidths, style]}
         >
             {content}
         </Block>