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

package/src/adapters/surfaceStyle.ts

@@ -162,9 +162,10 @@ export function resolveSurfaceStyle(
     put(style, 'backgroundColor', backgroundColor)
 
     // ---- Border ---------------------------------------------------------
-    const borderStyle = parseBorder(props.border)
-    put(style, 'borderWidth', borderStyle.borderWidth)
-    put(style, 'borderColor', borderStyle.borderColor)
+    const border = parseBorder(props.border)
+    put(style, 'borderWidth', border.borderWidth)
+    put(style, 'borderColor', border.borderColor)
+    put(style, 'borderStyle', border.borderStyle)
 
     // ---- Radius ---------------------------------------------------------
     const radius = parseBorderRadius(props.borderRadius)

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,114 @@
+import { Children, Fragment, forwardRef, useMemo } from 'react'
+import { View } from 'react-native'
+import type { View as RNView } from 'react-native'
+import { AccordionV2Type } from '@juspay/blend-design-system/node'
+import type { AccordionV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { useControllableState } from '../../hooks/useControllableState'
+import Separator from '../../primitives/Separator'
+import { parseDimension } from '../../adapters/cssStringAdapter'
+import { AccordionContext } from './accordion.context'
+import type { AccordionNativeProps } from './accordion.types'
+
+/**
+ * Accordion root — the native port of web's `AccordionV2`.
+ *
+ * Single or multiple expansion (`isMultiple`), controlled and uncontrolled
+ * — controlled-ness follows the current render, not web's mount-latched
+ * ref. `collapsible` is always true, web parity. BORDER type interleaves
+ * `Separator`s between items (web injects isFirst/isLast via cloneElement;
+ * interleaving needs neither).
+ */
+const Accordion = forwardRef<RNView, AccordionNativeProps>(function Accordion(
+    {
+        children,
+        accordionType = AccordionV2Type.NO_BORDER,
+        defaultValue,
+        value,
+        isMultiple = false,
+        onValueChange,
+        testID,
+        style,
+    },
+    ref
+) {
+    const tokens = useNativeTokens<AccordionV2TokensType>('ACCORDIONV2')
+
+    const [current, setCurrent] = useControllableState<string | string[]>(
+        value,
+        defaultValue ?? (isMultiple ? [] : ''),
+        onValueChange
+    )
+
+    const expandedValues = useMemo(
+        () =>
+            Array.isArray(current) ? current : current === '' ? [] : [current],
+        [current]
+    )
+
+    const context = useMemo(
+        () => ({
+            expandedValues,
+            toggle: (itemValue: string) => {
+                if (isMultiple) {
+                    const list = Array.isArray(current)
+                        ? current
+                        : current === ''
+                          ? []
+                          : [current]
+                    setCurrent(
+                        list.includes(itemValue)
+                            ? list.filter((v) => v !== itemValue)
+                            : [...list, itemValue]
+                    )
+                } else {
+                    // collapsible is always true, web parity.
+                    setCurrent(current === itemValue ? '' : itemValue)
+                }
+            },
+            accordionType,
+        }),
+        [expandedValues, current, isMultiple, accordionType, setCurrent]
+    )
+
+    const items = Children.toArray(children)
+    const bordered = accordionType === AccordionV2Type.BORDER
+
+    return (
+        <AccordionContext.Provider value={context}>
+            <View
+                ref={ref}
+                testID={testID}
+                style={[
+                    {
+                        gap:
+                            parseDimension(
+                                tokens.gap[accordionType] as string | number
+                            ) ?? 0,
+                        alignSelf: 'stretch',
+                    },
+                    style,
+                ]}
+            >
+                {items.map((child, index) => (
+                    <Fragment key={index}>
+                        {child}
+                        {bordered && index < items.length - 1 && (
+                            <Separator
+                                orientation="horizontal"
+                                color={String(
+                                    tokens.separator.color[accordionType]
+                                )}
+                                style={{ alignSelf: 'stretch', width: '100%' }}
+                            />
+                        )}
+                    </Fragment>
+                ))}
+            </View>
+        </AccordionContext.Provider>
+    )
+})
+
+Accordion.displayName = 'Accordion'
+
+export default Accordion

package/src/components/Accordion/AccordionItem.tsx

@@ -0,0 +1,264 @@
+import { forwardRef, useEffect, useState } from 'react'
+import { View } from 'react-native'
+import type { View as RNView, LayoutChangeEvent } from 'react-native'
+import Animated, {
+    Easing,
+    useAnimatedStyle,
+    useSharedValue,
+    withTiming,
+} from 'react-native-reanimated'
+import { ChevronDown, ChevronRight } from 'lucide-react-native'
+import { AccordionV2ChevronPosition } from '@juspay/blend-design-system/node'
+import type { AccordionV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { useReduceMotion } from '../../motion/useReduceMotion'
+import { MOTION_EASING } from '../../motion/motion'
+import Pressable from '../../primitives/Pressable'
+import Slot from '../../primitives/Slot'
+import Text from '../../primitives/Text'
+import { parseDimension } from '../../adapters/cssStringAdapter'
+import { useAccordionContext } from './accordion.context'
+import type { AccordionItemNativeProps } from './accordion.types'
+
+/** Web's accordion keyframes run 0.3s; the easing maps to `standard`. */
+const EXPAND_DURATION = 300
+
+/** Split web's `"20px 16px"` padding shorthand into y/x. */
+function splitPadding(shorthand: unknown): { y: number; x: number } {
+    const parts = String(shorthand ?? '').split(/\s+/)
+    return {
+        y: parseDimension(parts[0]) ?? 0,
+        x: parseDimension(parts[1] ?? parts[0]) ?? 0,
+    }
+}
+
+/**
+ * One accordion section — trigger row plus a measured, height-animated
+ * panel. The content stays mounted inside an overflow-hidden wrapper whose
+ * height tweens between 0 and the measured content height (the Skeleton
+ * measurement precedent — no Reanimated layout animations); collapsed
+ * content is hidden from assistive tech. The chevron rotates from the same
+ * progress.
+ */
+const AccordionItem = forwardRef<RNView, AccordionItemNativeProps>(
+    function AccordionItem(
+        {
+            value,
+            title,
+            subtext,
+            isDisabled = false,
+            chevronPosition = AccordionV2ChevronPosition.RIGHT,
+            leftSlot,
+            rightSlot,
+            subtextSlot,
+            children,
+            testID,
+        },
+        ref
+    ) {
+        const context = useAccordionContext('AccordionItem')
+        const tokens = useNativeTokens<AccordionV2TokensType>('ACCORDIONV2')
+        const reduceMotion = useReduceMotion()
+
+        const expanded = context.expandedValues.includes(value)
+        const type = context.accordionType
+        const state = isDisabled ? 'disabled' : expanded ? 'open' : 'default'
+
+        const [contentHeight, setContentHeight] = useState(0)
+        const progress = useSharedValue(expanded ? 1 : 0)
+        useEffect(() => {
+            if (reduceMotion) {
+                progress.value = expanded ? 1 : 0
+                return
+            }
+            progress.value = withTiming(expanded ? 1 : 0, {
+                duration: EXPAND_DURATION,
+                easing: Easing.bezier(...MOTION_EASING.standard),
+            })
+        }, [progress, expanded, reduceMotion])
+
+        const panelStyle = useAnimatedStyle(
+            () => ({ height: progress.value * contentHeight }),
+            [contentHeight]
+        )
+        const chevronStyle = useAnimatedStyle(
+            () => ({
+                transform: [
+                    {
+                        rotate: `${
+                            progress.value *
+                            (chevronPosition === AccordionV2ChevronPosition.LEFT
+                                ? 90
+                                : 180)
+                        }deg`,
+                    },
+                ],
+            }),
+            [chevronPosition]
+        )
+
+        const pad = splitPadding(tokens.trigger.padding[type])
+        const chevronSize =
+            parseDimension(tokens.chevron.height as string | number) ?? 16
+        const chevronColor = String(
+            tokens.chevron.color[state] ?? tokens.chevron.color.default
+        )
+        const ChevronIcon =
+            chevronPosition === AccordionV2ChevronPosition.LEFT
+                ? ChevronRight
+                : ChevronDown
+        const chevron = (
+            <Animated.View style={chevronStyle}>
+                <ChevronIcon size={chevronSize} color={chevronColor} />
+            </Animated.View>
+        )
+
+        const onContentLayout = (event: LayoutChangeEvent) => {
+            const height = event.nativeEvent.layout.height
+            if (height > 0 && height !== contentHeight) {
+                setContentHeight(height)
+            }
+        }
+
+        return (
+            <View ref={ref} testID={testID} style={{ alignSelf: 'stretch' }}>
+                <Pressable
+                    onPress={() => context.toggle(value)}
+                    disabled={isDisabled}
+                    flexDirection="row"
+                    alignItems="center"
+                    gap={tokens.trigger.content.gap as string | number}
+                    paddingTop={pad.y}
+                    paddingBottom={pad.y}
+                    paddingLeft={pad.x}
+                    paddingRight={pad.x}
+                    backgroundColor={String(
+                        tokens.trigger.backgroundColor[type]?.[state] ??
+                            'transparent'
+                    )}
+                    border={String(
+                        tokens.trigger.border[type]?.[state] ?? 'none'
+                    )}
+                    borderRadius={tokens.borderRadius[type] as string | number}
+                    accessibilityRole="button"
+                    accessibilityState={{ expanded, disabled: isDisabled }}
+                    accessibilityLabel={title}
+                    testID={testID ? `${testID}-trigger` : undefined}
+                >
+                    {chevronPosition === AccordionV2ChevronPosition.LEFT &&
+                        chevron}
+                    {leftSlot && (
+                        <Slot
+                            hidden
+                            maxHeight={
+                                tokens.trigger.slot.height as string | number
+                            }
+                        >
+                            {leftSlot}
+                        </Slot>
+                    )}
+                    <View style={{ flexGrow: 1, flexShrink: 1 }}>
+                        <Text
+                            fontSize={
+                                tokens.trigger.text.title.fontSize as
+                                    | string
+                                    | number
+                            }
+                            fontWeight={
+                                tokens.trigger.text.title.fontWeight as
+                                    | string
+                                    | number
+                            }
+                            lineHeight={
+                                tokens.trigger.text.title.lineHeight as
+                                    | string
+                                    | number
+                            }
+                            color={String(
+                                tokens.trigger.text.title.color[state] ??
+                                    tokens.trigger.text.title.color.default
+                            )}
+                        >
+                            {title}
+                        </Text>
+                        {subtext ? (
+                            <View
+                                style={{
+                                    flexDirection: 'row',
+                                    alignItems: 'center',
+                                    gap:
+                                        parseDimension(
+                                            tokens.trigger.text.subtext.gap as
+                                                | string
+                                                | number
+                                        ) ?? 4,
+                                }}
+                            >
+                                <Text
+                                    fontSize={
+                                        tokens.trigger.text.subtext.fontSize as
+                                            | string
+                                            | number
+                                    }
+                                    fontWeight={
+                                        tokens.trigger.text.subtext
+                                            .fontWeight as string | number
+                                    }
+                                    color={String(
+                                        tokens.trigger.text.subtext.color[
+                                            state
+                                        ] ??
+                                            tokens.trigger.text.subtext.color
+                                                .default
+                                    )}
+                                    style={{ flexShrink: 1 }}
+                                >
+                                    {subtext}
+                                </Text>
+                                {subtextSlot && (
+                                    <Slot hidden>{subtextSlot}</Slot>
+                                )}
+                            </View>
+                        ) : null}
+                    </View>
+                    {rightSlot && (
+                        <Slot
+                            hidden
+                            maxHeight={
+                                tokens.trigger.slot.height as string | number
+                            }
+                        >
+                            {rightSlot}
+                        </Slot>
+                    )}
+                    {chevronPosition === AccordionV2ChevronPosition.RIGHT &&
+                        chevron}
+                </Pressable>
+                <Animated.View
+                    style={[{ overflow: 'hidden' }, panelStyle]}
+                    accessibilityElementsHidden={!expanded}
+                    importantForAccessibility={
+                        expanded ? 'auto' : 'no-hide-descendants'
+                    }
+                    testID={testID ? `${testID}-panel` : undefined}
+                >
+                    <View
+                        onLayout={onContentLayout}
+                        style={{
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            right: 0,
+                        }}
+                    >
+                        {children}
+                    </View>
+                </Animated.View>
+            </View>
+        )
+    }
+)
+
+AccordionItem.displayName = 'AccordionItem'
+
+export default AccordionItem

package/src/components/Accordion/accordion.context.ts

@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react'
+import { AccordionV2Type } from '@juspay/blend-design-system/node'
+
+export type AccordionContextValue = {
+    expandedValues: readonly string[]
+    toggle: (value: string) => void
+    accordionType: AccordionV2Type
+}
+
+export const AccordionContext = createContext<AccordionContextValue | null>(
+    null
+)
+
+export function useAccordionContext(part: string): AccordionContextValue {
+    const context = useContext(AccordionContext)
+    if (!context) {
+        throw new Error(
+            `[blend-native] <${part}> must be rendered inside <Accordion>.`
+        )
+    }
+    return context
+}

package/src/components/Accordion/accordion.types.ts

@@ -0,0 +1,30 @@
+import type React from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import type {
+    AccordionBaseProps,
+    AccordionItemBaseProps,
+} from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native compound `Accordion` — the port of web's
+ * `AccordionV2`/`AccordionV2Item`, context-based instead of Radix.
+ *
+ * Divergences, docblocked here:
+ * - Controlled-ness follows the current render — web latches it at mount.
+ * - `collapsible` is always true, matching web's hardcoded value.
+ * - Web's CSS-typed `width`/`maxWidth`/`minWidth` dimensions are covered by
+ *   `style`.
+ */
+export type AccordionNativeProps = AccordionBaseProps & {
+    children: React.ReactNode
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}
+
+export type AccordionItemNativeProps = AccordionItemBaseProps & {
+    leftSlot?: React.ReactNode
+    rightSlot?: React.ReactNode
+    subtextSlot?: React.ReactNode
+    children: React.ReactNode
+    testID?: string
+}

package/src/components/Accordion/index.ts

@@ -0,0 +1,6 @@
+export { default as Accordion } from './Accordion'
+export { default as AccordionItem } from './AccordionItem'
+export type {
+    AccordionNativeProps,
+    AccordionItemNativeProps,
+} from './accordion.types'

package/src/components/Alert/alert.types.ts

@@ -1,21 +1,22 @@
 import type React from 'react'
-import type { GestureResponderEvent, ViewStyle } from 'react-native'
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'
 import type {
+    AlertBaseProps,
     AlertV2ActionPosition,
-    AlertV2SubType,
-    AlertV2Type,
 } from '@juspay/blend-design-system/node'
 
 /**
  * Props for the native `Alert`.
  *
- * Mirrors web `AlertV2Props` (`packages/blend/lib/components/AlertV2/
- * alertV2.types.ts`) with DOM-specific pieces replaced by RN equivalents:
+ * The scalar core (`type`, `subType`, `heading`, `description`) derives from
+ * web's platform-neutral `AlertBaseProps`, so a web-side rename or addition
+ * reaches this type instead of drifting silently. The rest is re-declared
+ * natively because web's shapes are DOM-bound:
  *
  * - `onClick` handlers become `onPress`, carrying a `GestureResponderEvent`.
  * - `HTMLAttributes` passthrough becomes RN `View` props via `...rest`.
  * - `width` / `maxWidth` / `minWidth` accept token strings or numbers and are
- *   resolved by `parseSize`.
+ *   resolved by `parseSize` (web types them as `CSSObject` values).
  */
 
 export type AlertSlot = {
@@ -52,12 +53,8 @@ export type AlertCloseButton = {
     accessibilityLabel?: string
 }
 
-export type AlertNativeProps = {
-    type?: AlertV2Type
-    subType?: AlertV2SubType
+export type AlertNativeProps = AlertBaseProps & {
     slot?: AlertSlot
-    heading?: string
-    description?: string
     actions?: AlertActions
     closeButton?: AlertCloseButton
 
@@ -77,5 +74,5 @@ export type AlertNativeProps = {
     announce?: boolean
     accessibilityLabel?: string
     testID?: string
-    style?: ViewStyle
+    style?: StyleProp<ViewStyle>
 }