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

package/src/components/Button/ButtonGroup.tsx

@@ -0,0 +1,51 @@
+import { forwardRef } from 'react'
+import type { ReactElement } from 'react'
+import type { View as RNView, StyleProp, ViewStyle } from 'react-native'
+import GroupView from '../shared/GroupView'
+import type { ButtonNativeProps } from './button.types'
+
+/**
+ * Container for a row of Buttons — the native port of web's `ButtonGroupV2`.
+ *
+ * `stacked` joins members edge to edge and injects each child's
+ * `buttonGroupPosition`; the Button itself collapses its radius
+ * (`getButtonV2BorderRadius`) and shared borders (`groupBorderWidths`) from
+ * that prop, exactly as when the prop is set by hand. Non-stacked renders a
+ * spaced row and injects nothing — same as web.
+ *
+ * IconButton members work (their props keep `buttonGroupPosition`);
+ * LinkButton members do not (no group support, matching web).
+ */
+export type ButtonGroupNativeProps = {
+    /** Join members edge to edge, collapsing shared radii and borders. */
+    stacked?: boolean
+    /** Space between members when not stacked. Defaults to the web gap. */
+    gap?: number | string
+    children:
+        | ReactElement<ButtonNativeProps>
+        | ReactElement<ButtonNativeProps>[]
+    /** Container label; the members stay individually reachable. */
+    accessibilityLabel?: string
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}
+
+const ButtonGroup = forwardRef<RNView, ButtonGroupNativeProps>(
+    function ButtonGroup(
+        { accessibilityLabel = 'Button group', ...rest },
+        ref
+    ) {
+        return (
+            <GroupView
+                {...rest}
+                ref={ref}
+                positionProp="buttonGroupPosition"
+                accessibilityLabel={accessibilityLabel}
+            />
+        )
+    }
+)
+
+ButtonGroup.displayName = 'ButtonGroup'
+
+export default ButtonGroup

package/src/components/Button/IconButton.tsx

@@ -0,0 +1,59 @@
+import { forwardRef, useEffect } from 'react'
+import type { View as RNView } from 'react-native'
+import { ButtonV2SubType } from '@juspay/blend-design-system/node'
+import Button from './Button'
+import type { IconButtonNativeProps } from './button.types'
+
+/**
+ * Icon-only button — the native port of web's `IconButton`.
+ *
+ * A thin wrapper over `Button`: the icon renders through `leftSlot` and
+ * `subType` is forced to `ICON_ONLY`, which selects the square padding and
+ * radius matrices from the BUTTONV2 tokens. No styling of its own.
+ *
+ * Divergence from web: the forced props are applied **after** the rest
+ * spread. Web spreads rest last, so a stray `subType`/`leftSlot` that got
+ * past the types could undo the icon-only shape at runtime; here it cannot.
+ */
+
+/** One warning per session — the portal.tsx dev-warning pattern. */
+let warnedBlankLabel = false
+
+const IconButton = forwardRef<RNView, IconButtonNativeProps>(
+    function IconButton({ icon, accessibilityLabel, ...rest }, ref) {
+        // Warned from an effect, not during render — a render-phase side
+        // effect fires twice under StrictMode and breaks with concurrent
+        // rendering (same reasoning as the portal's provider warning).
+        useEffect(() => {
+            if (
+                typeof __DEV__ !== 'undefined' &&
+                __DEV__ &&
+                !warnedBlankLabel &&
+                accessibilityLabel.trim() === ''
+            ) {
+                warnedBlankLabel = true
+                console.warn(
+                    '[blend-native] IconButton rendered with a blank ' +
+                        'accessibilityLabel. Icon-only buttons have no text ' +
+                        'fallback, so screen readers announce nothing.'
+                )
+            }
+        }, [accessibilityLabel])
+
+        return (
+            <Button
+                {...rest}
+                ref={ref}
+                subType={ButtonV2SubType.ICON_ONLY}
+                text={undefined}
+                leftSlot={{ slot: icon }}
+                rightSlot={undefined}
+                accessibilityLabel={accessibilityLabel}
+            />
+        )
+    }
+)
+
+IconButton.displayName = 'IconButton'
+
+export default IconButton

package/src/components/Button/LinkButton.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react'
+import type { View as RNView } from 'react-native'
+import Button from './Button'
+import type { LinkButtonNativeProps } from './button.types'
+
+/**
+ * Link-styled button — the native port of web's `LinkButton`.
+ *
+ * On web this is a parallel anchor implementation of the whole ButtonV2
+ * style pipeline; on RN there is no anchor, so it is `Button` with
+ * `accessibilityRole="link"`. Same BUTTONV2 tokens, every subType including
+ * INLINE, no styling of its own.
+ *
+ * The role is passed through `Button`'s rest spread, which lands after its
+ * explicit `accessibilityRole="button"` — the render test pins that order.
+ */
+const LinkButton = forwardRef<RNView, LinkButtonNativeProps>(
+    function LinkButton(props, ref) {
+        return <Button {...props} ref={ref} accessibilityRole="link" />
+    }
+)
+
+LinkButton.displayName = 'LinkButton'
+
+export default LinkButton

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

@@ -1,6 +1,8 @@
+import type React from 'react'
 import type {
     GestureResponderEvent,
     PressableProps,
+    StyleProp,
     ViewStyle,
 } from 'react-native'
 import type { ButtonBaseProps } from '@juspay/blend-design-system/node'
@@ -37,8 +39,50 @@ export type ButtonNativeProps = Omit<ButtonBaseProps, 'skeleton'> & {
      */
     justifyContent?: ViewStyle['justifyContent']
     /** Escape hatch for RN styles the token props do not cover. */
-    style?: ViewStyle
+    style?: StyleProp<ViewStyle>
 } & Omit<
         PressableProps,
         'style' | 'onPress' | 'disabled' | 'children' | 'testID'
     >
+
+/**
+ * Props for the native `IconButton` — an icon-only `Button`, mirroring web's
+ * `IconButton` wrapper over `ButtonV2`.
+ *
+ * `text`, `leftSlot`, `rightSlot` and `subType` are omitted so the icon-only
+ * shape cannot be undone from outside: the icon always renders through
+ * `leftSlot` with `subType` forced to `ICON_ONLY`.
+ *
+ * `accessibilityLabel` is **required** (web requires `aria-label` the same
+ * way): an icon-only control has no text to derive an accessible name from,
+ * so omitting the label would ship a button screen readers announce as
+ * nothing.
+ */
+export type IconButtonNativeProps = Omit<
+    ButtonNativeProps,
+    'text' | 'leftSlot' | 'rightSlot' | 'subType' | 'accessibilityLabel'
+> & {
+    /** The icon to render. Tinted by `Slot` like any other button slot. */
+    icon: React.ReactNode
+    accessibilityLabel: string
+}
+
+/**
+ * Props for the native `LinkButton` — a `Button` announced as a link.
+ *
+ * Web's `LinkButton` renders an anchor; RN has no anchor, so navigation is
+ * the app's job via `onPress` (locked decision) and the whole difference is
+ * `accessibilityRole="link"`. Deliberately omitted rather than
+ * accepted-and-ignored (compile errors, the `skeleton` precedent):
+ *
+ * - `href` / `target` / `rel` — never existed here; wire navigation (or
+ *   `Linking.openURL` for external URLs) in `onPress`.
+ * - `justifyContent` — web's LinkButton hardcodes center.
+ * - `buttonGroupPosition` — web's LinkButton has no group support.
+ * - `accessibilityRole` — forced to `link`; overriding it would undo the
+ *   component's one job.
+ */
+export type LinkButtonNativeProps = Omit<
+    ButtonNativeProps,
+    'justifyContent' | 'buttonGroupPosition' | 'accessibilityRole'
+>

package/src/components/Button/index.ts

@@ -1,5 +1,13 @@
 export { default as Button } from './Button'
-export type { ButtonNativeProps } from './button.types'
+export { default as ButtonGroup } from './ButtonGroup'
+export { default as IconButton } from './IconButton'
+export { default as LinkButton } from './LinkButton'
+export type { ButtonGroupNativeProps } from './ButtonGroup'
+export type {
+    ButtonNativeProps,
+    IconButtonNativeProps,
+    LinkButtonNativeProps,
+} from './button.types'
 export {
     getButtonNativeStyles,
     getButtonPadding,

package/src/components/Card/Card.tsx

@@ -0,0 +1,292 @@
+import { forwardRef } from 'react'
+import { View } from 'react-native'
+import type { View as RNView } from 'react-native'
+import {
+    CardV2Orientation,
+    CardV2Padding,
+    CardV2Variant,
+} from '@juspay/blend-design-system/node'
+import type { CardV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { parseBorder, parseDimension } from '../../adapters/cssStringAdapter'
+import Block from '../../primitives/Block'
+import Pressable from '../../primitives/Pressable'
+import Text from '../../primitives/Text'
+import { Skeleton } from '../Skeleton'
+import type { SurfaceStyleProps } from '../../adapters/surfaceStyle'
+import type { CardNativeProps } from './card.types'
+
+/**
+ * Card — the native port of web's `CardV2` (props API + slots).
+ *
+ * One surface object feeds `Block` or `Pressable` depending on `onPress`
+ * (the Tag pattern), with `selected` swapping in the selected border and
+ * shadow tokens. Ghost cards default to `padding: none`, web parity.
+ */
+const Card = forwardRef<RNView, CardNativeProps>(function Card(
+    {
+        variant = CardV2Variant.OUTLINED,
+        orientation = CardV2Orientation.VERTICAL,
+        padding,
+        eyebrow,
+        title,
+        truncateTitle = false,
+        subtitle,
+        description,
+        media,
+        leadingSlot,
+        trailingSlot,
+        actions,
+        footer,
+        centered = false,
+        onPress,
+        selected = false,
+        skeleton,
+        width,
+        minWidth,
+        maxWidth,
+        minHeight,
+        children,
+        accessibilityLabel,
+        testID,
+        style,
+    },
+    ref
+) {
+    const tokens = useNativeTokens<CardV2TokensType>('CARDV2')
+
+    const resolvedPadding =
+        padding ??
+        (variant === CardV2Variant.GHOST
+            ? CardV2Padding.NONE
+            : CardV2Padding.COMFORTABLE)
+    const pad = tokens.padding[resolvedPadding]
+    const padX = parseDimension(pad.x as string | number) ?? 0
+    const padY = parseDimension(pad.y as string | number) ?? 0
+
+    const surface: SurfaceStyleProps = {
+        backgroundColor: String(tokens.backgroundColor[variant]),
+        border: String(
+            selected ? tokens.state.selected.border : tokens.border[variant]
+        ),
+        borderRadius: tokens.borderRadius as string | number,
+        boxShadow: String(
+            selected
+                ? tokens.state.selected.boxShadow
+                : tokens.boxShadow[variant]
+        ),
+        paddingTop: padY,
+        paddingBottom: padY,
+        paddingLeft: padX,
+        paddingRight: padX,
+        width: width ?? (tokens.width as string | number),
+        minWidth: minWidth ?? (tokens.minWidth as string | number),
+        maxWidth: maxWidth ?? (tokens.maxWidth as string | number),
+        minHeight,
+        gap: parseDimension(tokens.layout.gap as string | number) ?? 12,
+        alignItems: centered ? 'center' : undefined,
+    }
+
+    const header = (eyebrow ||
+        title ||
+        subtitle ||
+        leadingSlot ||
+        trailingSlot) && (
+        <View
+            style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: parseDimension(tokens.header.gap as string | number) ?? 8,
+                alignSelf: 'stretch',
+                justifyContent: centered ? 'center' : 'flex-start',
+            }}
+        >
+            {leadingSlot}
+            <View
+                style={{
+                    flexShrink: 1,
+                    flexGrow: 1,
+                    alignItems: centered ? 'center' : 'flex-start',
+                }}
+            >
+                {eyebrow ? (
+                    <TokenText t={tokens.header.eyebrow} text={eyebrow} />
+                ) : null}
+                {title ? (
+                    <TokenText
+                        t={tokens.header.title}
+                        text={title}
+                        numberOfLines={truncateTitle ? 1 : undefined}
+                    />
+                ) : null}
+                {subtitle ? (
+                    <TokenText t={tokens.header.subtitle} text={subtitle} />
+                ) : null}
+            </View>
+            {trailingSlot}
+        </View>
+    )
+
+    const body = (description || children) && (
+        <View
+            style={{
+                gap: parseDimension(tokens.body.gap as string | number) ?? 8,
+                alignSelf: 'stretch',
+                alignItems: centered ? 'center' : 'flex-start',
+            }}
+        >
+            {description ? (
+                <TokenText t={tokens.body.description} text={description} />
+            ) : null}
+            {children}
+        </View>
+    )
+
+    const horizontal = orientation === CardV2Orientation.HORIZONTAL
+    const mediaGap =
+        parseDimension(
+            tokens.layout.mediaGap[horizontal ? 'horizontal' : 'vertical'] as
+                | string
+                | number
+        ) ?? 12
+
+    const inner = (
+        <>
+            {header}
+            {body}
+            {actions ? (
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        flexWrap: 'wrap',
+                        alignSelf: 'stretch',
+                        gap:
+                            parseDimension(
+                                tokens.actions.gap as string | number
+                            ) ?? 8,
+                        justifyContent: centered ? 'center' : 'flex-start',
+                    }}
+                >
+                    {actions}
+                </View>
+            ) : null}
+            {footer ? (
+                <View
+                    style={{
+                        alignSelf: 'stretch',
+                        gap:
+                            parseDimension(
+                                tokens.footer.gap as string | number
+                            ) ?? 8,
+                        paddingTop:
+                            parseDimension(
+                                tokens.footer.paddingTop as string | number
+                            ) ?? 8,
+                        borderTopWidth: parseBorder(
+                            String(tokens.footer.borderTop)
+                        ).borderWidth,
+                        borderTopColor: parseBorder(
+                            String(tokens.footer.borderTop)
+                        ).borderColor,
+                    }}
+                >
+                    {footer}
+                </View>
+            ) : null}
+        </>
+    )
+
+    const content = !media ? (
+        inner
+    ) : horizontal ? (
+        <View
+            style={{
+                flexDirection: 'row',
+                gap: mediaGap,
+                alignSelf: 'stretch',
+            }}
+        >
+            <View>{media}</View>
+            <View style={{ flexShrink: 1, flexGrow: 1, gap: 12 }}>{inner}</View>
+        </View>
+    ) : (
+        <>
+            <View style={{ alignSelf: 'stretch' }}>{media}</View>
+            {inner}
+        </>
+    )
+
+    if (skeleton?.show) {
+        return (
+            <Skeleton
+                variant={skeleton.variant}
+                shape="rounded"
+                testID={testID}
+            >
+                <Block {...surface}>{content}</Block>
+            </Skeleton>
+        )
+    }
+
+    if (onPress) {
+        return (
+            <Pressable
+                ref={ref}
+                {...surface}
+                onPress={onPress}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? title}
+                accessibilityState={{ selected }}
+                testID={testID}
+                style={style}
+            >
+                <View style={{ alignSelf: 'stretch', gap: surface.gap }}>
+                    {content}
+                </View>
+            </Pressable>
+        )
+    }
+
+    return (
+        <Block
+            ref={ref}
+            {...surface}
+            accessibilityLabel={accessibilityLabel}
+            testID={testID}
+            style={style}
+        >
+            {content}
+        </Block>
+    )
+})
+
+function TokenText({
+    t,
+    text,
+    numberOfLines,
+}: {
+    t: {
+        fontSize?: unknown
+        fontWeight?: unknown
+        lineHeight?: unknown
+        color?: unknown
+    }
+    text: string
+    numberOfLines?: number
+}) {
+    return (
+        <Text
+            fontSize={t.fontSize as string | number}
+            fontWeight={t.fontWeight as string | number}
+            lineHeight={t.lineHeight as string | number}
+            color={String(t.color)}
+            numberOfLines={numberOfLines}
+        >
+            {text}
+        </Text>
+    )
+}
+
+Card.displayName = 'Card'
+
+export default Card

package/src/components/Card/card.types.ts

@@ -0,0 +1,62 @@
+import type React from 'react'
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'
+import type {
+    CardV2Orientation,
+    CardV2Padding,
+    CardV2Variant,
+    SkeletonVariant,
+} from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native `Card` — the port of web's `CardV2`, as a props API
+ * with ReactNode slots (locked scope decision; the compound sub-components
+ * can layer on later without breaking).
+ *
+ * Divergences from web, by design:
+ *
+ * - `media` / `leadingSlot` / `trailingSlot` / `footer` / `actions` take
+ *   ReactNode — the consumer composes Buttons rather than passing
+ *   `ButtonV2Props[]`.
+ * - `interactive` is replaced by **`onPress`** — providing it renders a
+ *   `Pressable` card (web's core CardV2 has no onClick prop; its handler
+ *   arrives via the HTMLAttributes spread with no keyboard support).
+ *
+ * Deliberately omitted rather than accepted-and-ignored (compile errors):
+ *
+ * - `scrollable` — needs a ScrollView policy; wrap the card in one.
+ * - hover/focus chrome (`state.hover`, `state.focus.outline*`) — no hover
+ *   or focus ring on touch.
+ * - `actionPlacement` — actions render after the body; put them in
+ *   `footer` for footer placement.
+ */
+export type CardNativeProps = {
+    variant?: CardV2Variant
+    orientation?: CardV2Orientation
+    /** Ghost cards default to `none`, web parity. */
+    padding?: CardV2Padding
+    eyebrow?: string
+    title?: string
+    /** Cap the title at one line. */
+    truncateTitle?: boolean
+    subtitle?: string
+    description?: string
+    media?: React.ReactNode
+    leadingSlot?: React.ReactNode
+    trailingSlot?: React.ReactNode
+    actions?: React.ReactNode
+    footer?: React.ReactNode
+    centered?: boolean
+    /** Renders the card as a Pressable with a button role. */
+    onPress?: (event: GestureResponderEvent) => void
+    /** Selected chrome + `accessibilityState.selected` (needs `onPress`). */
+    selected?: boolean
+    skeleton?: { show: boolean; variant?: SkeletonVariant }
+    width?: string | number
+    minWidth?: string | number
+    maxWidth?: string | number
+    minHeight?: string | number
+    children?: React.ReactNode
+    accessibilityLabel?: string
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}

package/src/components/Card/index.ts

@@ -0,0 +1,2 @@
+export { default as Card } from './Card'
+export type { CardNativeProps } from './card.types'