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

package/src/components/Chart/ChartHeader.tsx

@@ -0,0 +1,55 @@
+import { forwardRef } from 'react'
+import { View } from 'react-native'
+import type { View as RNView } from 'react-native'
+import type { ChartV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { parseDimension, parseBorder } from '../../adapters/cssStringAdapter'
+import type { ChartHeaderProps } from './chart.types'
+
+/**
+ * Header bar for `Chart` — mirrors web's `ChartHeaderV2`.
+ */
+const ChartHeader = forwardRef<RNView, ChartHeaderProps>(function ChartHeader(
+    { children, style },
+    ref
+) {
+    const tokens = useNativeTokens<ChartV2TokensType>('CHARTSV2')
+    const parsedBorder = parseBorder(String(tokens.header.borderBottom))
+
+    return (
+        <View
+            ref={ref}
+            style={[
+                {
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    paddingTop: parseDimension(
+                        tokens.header.padding.top as string
+                    ),
+                    paddingRight: parseDimension(
+                        tokens.header.padding.right as string
+                    ),
+                    paddingBottom: parseDimension(
+                        tokens.header.padding.bottom as string
+                    ),
+                    paddingLeft: parseDimension(
+                        tokens.header.padding.left as string
+                    ),
+                    backgroundColor: String(tokens.header.backgroundColor),
+                    ...(parsedBorder
+                        ? {
+                              borderBottomWidth: parsedBorder.borderWidth,
+                              borderBottomColor: parsedBorder.borderColor,
+                          }
+                        : {}),
+                },
+                style,
+            ]}
+        >
+            {children}
+        </View>
+    )
+})
+
+ChartHeader.displayName = 'ChartHeader'
+export default ChartHeader

package/src/components/Chart/ChartLegend.tsx

@@ -0,0 +1,158 @@
+import { memo } from 'react'
+import { View, Pressable } from 'react-native'
+import type { ChartV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { parseDimension } from '../../adapters/cssStringAdapter'
+import Text from '../../primitives/Text'
+import type { ChartLegendProps } from './chart.types'
+
+/**
+ * Web hardcodes the legend swatch radius to 4 (`ChartV2Legend.tsx`) instead
+ * of the token's `border.radius[12]` — 12 on a 12×12 swatch would be a full
+ * circle. Native matches the hardcoded 4 for the same reason.
+ */
+const SWATCH_RADIUS = 4
+
+/**
+ * Legend list for `Chart` — mirrors web's `ChartLegendV2`.
+ *
+ * Renders a horizontal row of tappable legend items, each with a color
+ * swatch and optional value. Tapping toggles visibility (the parent
+ * controls hidden state via `onToggle`).
+ */
+function ChartLegendImpl({
+    items,
+    onToggle,
+    layout = 'horizontal',
+    style,
+}: ChartLegendProps) {
+    const tokens = useNativeTokens<ChartV2TokensType>('CHARTSV2')
+    const lt = tokens.legends
+
+    if (!items || items.length === 0) return null
+
+    const swatchW =
+        parseDimension(lt.legendItem.shape.width as string | number) ?? 12
+    const swatchH =
+        parseDimension(lt.legendItem.shape.height as string | number) ?? 12
+    const itemGap = parseDimension(lt.legendItem.gap as string | number) ?? 6
+    const listGap = parseDimension(lt.gap as string | number) ?? 12
+    const textGap =
+        parseDimension(lt.legendItem.text.gap as string | number) ?? 4
+    const separatorColor = String(lt.legendItem.text.separator.color)
+    const separatorWidth = parseDimension(
+        lt.legendItem.text.separator.width as string | number
+    )
+    const separatorHeight = parseDimension(
+        lt.legendItem.text.separator.height as string | number
+    )
+
+    return (
+        <View
+            style={[
+                {
+                    flexDirection: layout === 'horizontal' ? 'row' : 'column',
+                    flexWrap: layout === 'horizontal' ? 'wrap' : 'nowrap',
+                    gap: listGap,
+                },
+                style,
+            ]}
+        >
+            {items.map((item) => {
+                // Web: `!visible ? 0.5 : isDimmed ? 0.3 : 1`. The hover-dim
+                // state (0.3) has no touch equivalent, so only hidden applies.
+                const opacity = item.visible ? 1 : 0.5
+                return (
+                    <Pressable
+                        key={item.key}
+                        onPress={
+                            onToggle ? () => onToggle(item.key) : undefined
+                        }
+                        style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: itemGap,
+                            opacity,
+                        }}
+                    >
+                        <View
+                            style={{
+                                width: swatchW,
+                                height: swatchH,
+                                borderRadius: SWATCH_RADIUS,
+                                backgroundColor: item.color,
+                            }}
+                        />
+                        <View
+                            style={{
+                                flexDirection: 'row',
+                                alignItems: 'center',
+                                gap: textGap,
+                            }}
+                        >
+                            <Text
+                                fontSize={
+                                    lt.legendItem.text.name.fontSize as
+                                        | string
+                                        | number
+                                }
+                                fontWeight={
+                                    lt.legendItem.text.name.fontWeight as
+                                        | string
+                                        | number
+                                }
+                                color={String(lt.legendItem.text.name.color)}
+                                lineHeight={
+                                    lt.legendItem.text.name.lineHeight as
+                                        | string
+                                        | number
+                                }
+                            >
+                                {item.name}
+                            </Text>
+                            {item.value !== undefined && (
+                                <View
+                                    aria-hidden
+                                    style={{
+                                        width: separatorWidth ?? 1,
+                                        height: separatorHeight ?? 9,
+                                        backgroundColor: separatorColor,
+                                        marginHorizontal: 2,
+                                    }}
+                                />
+                            )}
+                            {item.value !== undefined && (
+                                <Text
+                                    fontSize={
+                                        lt.legendItem.text.value.fontSize as
+                                            | string
+                                            | number
+                                    }
+                                    fontWeight={
+                                        lt.legendItem.text.value.fontWeight as
+                                            | string
+                                            | number
+                                    }
+                                    color={String(
+                                        lt.legendItem.text.value.color
+                                    )}
+                                    lineHeight={
+                                        lt.legendItem.text.value.lineHeight as
+                                            | string
+                                            | number
+                                    }
+                                >
+                                    {String(item.value)}
+                                </Text>
+                            )}
+                        </View>
+                    </Pressable>
+                )
+            })}
+        </View>
+    )
+}
+
+export const ChartLegend = memo(ChartLegendImpl)
+ChartLegend.displayName = 'ChartLegend'
+export default ChartLegend

package/src/components/Chart/ChartNoData.tsx

@@ -0,0 +1,52 @@
+import { View } from 'react-native'
+import type { ChartV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import Text from '../../primitives/Text'
+import type { ChartNoDataProps } from './chart.types'
+
+/**
+ * Empty state for `Chart` — mirrors web's `ChartV2NoData`.
+ */
+function ChartNoData({ title, subtitle, slot }: ChartNoDataProps) {
+    const tokens = useNativeTokens<ChartV2TokensType>('CHARTSV2')
+
+    return (
+        <View
+            style={{
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 8,
+                padding: 16,
+                backgroundColor: String(tokens.chart.backgroundColor),
+            }}
+            accessibilityRole="text"
+        >
+            {title ? (
+                /* Matches web's `heading.sm` variant: 18/600/24. */
+                <Text
+                    fontSize={18}
+                    fontWeight={600}
+                    lineHeight={24}
+                    color={String(tokens.chart.xAxis.title.color)}
+                >
+                    {title}
+                </Text>
+            ) : null}
+            {subtitle ? (
+                /* Matches web's `body.sm` variant: 12/400/18. */
+                <Text
+                    fontSize={12}
+                    fontWeight={400}
+                    lineHeight={18}
+                    color={String(tokens.chart.xAxis.labels.color)}
+                >
+                    {subtitle}
+                </Text>
+            ) : null}
+            {slot}
+        </View>
+    )
+}
+
+ChartNoData.displayName = 'ChartNoData'
+export default ChartNoData

package/src/components/Chart/ChartSkeleton.tsx

@@ -0,0 +1,20 @@
+import { View } from 'react-native'
+import { Skeleton } from '../Skeleton'
+import type { ChartSkeletonProps } from './chart.types'
+
+/**
+ * Loading placeholder for `Chart` — mirrors web's `ChartV2Skeleton`.
+ */
+function ChartSkeleton({
+    variant = 'pulse',
+    height = 400,
+}: Omit<ChartSkeletonProps, 'show'>) {
+    return (
+        <View style={{ gap: 16, padding: 8, width: '100%' }}>
+            <Skeleton variant={variant} style={{ width: '40%', height: 40 }} />
+            <Skeleton variant={variant} style={{ height }} />
+        </View>
+    )
+}
+
+export default ChartSkeleton

package/src/components/Chart/chart.types.ts

@@ -0,0 +1,192 @@
+import type { StyleProp, ViewStyle } from 'react-native'
+import type { SkeletonVariant } from '../Skeleton/Skeleton'
+
+// ---- Chart types --------------------------------------------------------
+
+export type ChartType =
+    | 'line'
+    | 'area'
+    | 'bar'
+    | 'column'
+    | 'lineColumn'
+    | 'scatter'
+    | 'pie'
+    | 'donut'
+
+// ---- Series data --------------------------------------------------------
+
+/** One datum in a series. */
+export type ChartDatum = {
+    /** X-axis value (label). */
+    x: string | number
+    /** Y-axis value. */
+    y: number
+    /** Optional per-point color (overrides series color). */
+    color?: string
+}
+
+/** A named series of data points. */
+export type ChartSeries = {
+    /** Unique name for this series (used as legend label). */
+    name: string
+    /** Data points. */
+    data: ChartDatum[]
+    /** Series color. Defaults to a rotating palette. */
+    color?: string
+    /** Line/area stroke width. */
+    strokeWidth?: number
+    /** Fill opacity for area charts (0–1). */
+    fillOpacity?: number
+    /**
+     * Per-series chart type for combo charts. Only read when the chart
+     * `type` is `'lineColumn'` — series default to `'column'`, so a combo
+     * is one or more `'line'` series plus one or more columns.
+     */
+    chartType?: 'line' | 'column'
+}
+
+// ---- Pie data -----------------------------------------------------------
+
+/** One slice of a pie/donut chart. */
+export type ChartPieSlice = {
+    /** Slice label. */
+    label: string
+    /** Slice value. */
+    value: number
+    /** Slice color. Defaults to a rotating palette. */
+    color?: string
+}
+
+// ---- Legend items -------------------------------------------------------
+
+export type ChartLegendItem = {
+    /** Unique key (matches series name or slice label). */
+    key: string
+    /** Display name. */
+    name: string
+    /** Swatch color. */
+    color: string
+    /** Optional value shown after the name. */
+    value?: string | number
+    /** Whether the series/slice is currently visible. */
+    visible: boolean
+}
+
+// ---- Component props ----------------------------------------------------
+
+export type ChartSkeletonProps = {
+    show: boolean
+    variant?: SkeletonVariant
+    height?: number
+}
+
+export type ChartNoDataProps = {
+    title?: string
+    subtitle?: string
+    slot?: React.ReactNode
+}
+
+export type ChartLegendProps = {
+    /** Legend items. If not provided, built from series/pie data. */
+    items?: ChartLegendItem[]
+    /** Called when a legend item is tapped. `key` is the item's key. */
+    onToggle?: (key: string) => void
+    layout?: 'horizontal' | 'vertical'
+    style?: StyleProp<ViewStyle>
+}
+
+export type ChartHeaderProps = {
+    children: React.ReactNode
+    style?: StyleProp<ViewStyle>
+}
+
+export type ChartContainerProps = {
+    children: React.ReactNode
+    style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Props for the native `Chart` component.
+ *
+ * Renders one of: line, area, bar, column, pie, or donut chart using
+ * `victory-native`, styled from `CHARTSV2` tokens.
+ */
+export type ChartNativeProps = {
+    /** Which chart to render. */
+    type: ChartType
+    /** Series data (line/area/bar/column). */
+    series?: ChartSeries[]
+    /** Pie/donut data. */
+    data?: ChartPieSlice[]
+    /** Chart height. */
+    height?: number
+    /** Show the legend. Defaults to `true` when multiple series/pie. */
+    showLegend?: boolean
+    /** Show axis grid lines. */
+    showGrid?: boolean
+    /** Show x-axis labels. */
+    showXAxis?: boolean
+    /** Show y-axis labels. */
+    showYAxis?: boolean
+    /** Interactive legend toggle. */
+    onLegendToggle?: (key: string) => void
+    /** Hidden series keys (controlled). */
+    hiddenKeys?: string[]
+    /** Donut center label. */
+    centerLabel?: string
+    /** Donut center value. */
+    centerValue?: string
+    /** Skeleton loading state. */
+    skeleton?: ChartSkeletonProps
+    /** No-data state. */
+    noData?: ChartNoDataProps
+    /** Custom header content. */
+    header?: React.ReactNode
+    /** Accessibility label for the chart. */
+    accessibilityLabel?: string
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}
+
+/** Default palette for multi-series charts. */
+export const CHART_PALETTE = [
+    '#2B7FFF', // blue-500
+    '#FB2C36', // red-500
+    '#FF6B00', // orange-500
+    '#00C950', // green-500
+    '#A855F7', // purple-500
+    '#06B6D4', // cyan-500
+    '#EAB308', // yellow-500
+    '#EC4899', // pink-500
+    '#6366F1', // indigo-500
+    '#14B8A6', // teal-500
+] as const
+
+/** Pick a palette color by index (wraps around). */
+export function paletteColor(index: number): string {
+    return CHART_PALETTE[index % CHART_PALETTE.length]
+}
+
+/** Build legend items from series or pie slices. */
+export function buildLegendItems(
+    type: ChartType,
+    series?: ChartSeries[],
+    data?: ChartPieSlice[],
+    hiddenKeys?: string[]
+): ChartLegendItem[] {
+    const hidden = new Set(hiddenKeys ?? [])
+    if (type === 'pie' || type === 'donut') {
+        return (data ?? []).map((s, i) => ({
+            key: s.label,
+            name: s.label,
+            color: s.color ?? paletteColor(i),
+            visible: !hidden.has(s.label),
+        }))
+    }
+    return (series ?? []).map((s, i) => ({
+        key: s.name,
+        name: s.name,
+        color: s.color ?? paletteColor(i),
+        visible: !hidden.has(s.name),
+    }))
+}

package/src/components/Chart/index.ts

@@ -0,0 +1,20 @@
+export { default as Chart } from './Chart'
+export { default as ChartContainer } from './ChartContainer'
+export { default as ChartHeader } from './ChartHeader'
+export { default as ChartLegend } from './ChartLegend'
+export { default as ChartSkeleton } from './ChartSkeleton'
+export { default as ChartNoData } from './ChartNoData'
+
+export type {
+    ChartNativeProps,
+    ChartType,
+    ChartSeries,
+    ChartDatum,
+    ChartPieSlice,
+    ChartLegendItem,
+    ChartLegendProps,
+    ChartHeaderProps,
+    ChartContainerProps,
+    ChartSkeletonProps,
+    ChartNoDataProps,
+} from './chart.types'

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,182 @@
+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 { Check, Minus } from 'lucide-react-native'
+import { SelectorV2Size } from '@juspay/blend-design-system/node'
+import type { CheckboxV2TokensType } 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,
+    parseBorderRadius,
+    parseDimension,
+} from '../../adapters/cssStringAdapter'
+import { SelectorContent } from '../shared/selector/SelectorContent'
+import type { CheckboxNativeProps } from './checkbox.types'
+
+/**
+ * Checkbox — the native port of web's `CheckboxV2`.
+ *
+ * The whole row (box + label) is one pressable, so tapping the label
+ * toggles — web's label-click parity. The indicator (lucide Check/Minus,
+ * like web) scales in via the motion layer; reduce-motion renders it
+ * statically. `accessibilityState.checked` reports `'mixed'` for the
+ * indeterminate state.
+ */
+const Checkbox = forwardRef<RNView, CheckboxNativeProps>(function Checkbox(
+    {
+        checked = false,
+        onCheckedChange,
+        required = false,
+        error = false,
+        label,
+        subLabel,
+        size = SelectorV2Size.MD,
+        disabled = false,
+        slot,
+        accessibilityLabel,
+        testID,
+        style,
+    },
+    ref
+) {
+    const tokens = useNativeTokens<CheckboxV2TokensType>('CHECKBOXV2')
+    const reduceMotion = useReduceMotion()
+
+    const checkedState =
+        checked === 'indeterminate'
+            ? 'indeterminate'
+            : checked
+              ? 'checked'
+              : 'unchecked'
+    const interactionState = disabled ? 'disabled' : error ? 'error' : 'default'
+    const showIndicator = checkedState !== 'unchecked'
+
+    // Web's scale-in keyframe (0.7 → 1, fade), on the motion layer.
+    const progress = useSharedValue(showIndicator ? 1 : 0)
+    useEffect(() => {
+        if (reduceMotion) {
+            progress.value = showIndicator ? 1 : 0
+            return
+        }
+        progress.value = withTiming(showIndicator ? 1 : 0, {
+            duration: MOTION_DURATION.normal,
+            easing: Easing.bezier(...MOTION_EASING.standard),
+        })
+    }, [progress, showIndicator, reduceMotion])
+    const indicatorStyle = useAnimatedStyle(
+        () => ({
+            opacity: progress.value,
+            transform: [{ scale: 0.7 + 0.3 * progress.value }],
+        }),
+        []
+    )
+
+    const boxSize =
+        parseDimension(tokens.checkbox.width[size] as string | number) ?? 16
+    const radius =
+        parseBorderRadius(
+            tokens.checkbox.borderRadius[size] as string | number
+        ) ?? 4
+    const iconSize =
+        parseDimension(tokens.checkbox.icon.width[size] as string | number) ??
+        12
+    const iconColorState = disabled ? 'disabled' : 'default'
+    const IndicatorIcon = checkedState === 'indeterminate' ? Minus : Check
+
+    const toggle = () => {
+        // Web parity (Radix + the Enter handler): indeterminate resolves to
+        // checked; otherwise invert.
+        onCheckedChange?.(checked === 'indeterminate' ? true : !checked)
+    }
+
+    return (
+        <Pressable
+            ref={ref}
+            onPress={toggle}
+            disabled={disabled}
+            flexDirection="row"
+            alignItems="center"
+            gap={tokens.gap as string | number}
+            opacity={
+                disabled ? Number(tokens.checkbox.opacity) || 0.7 : undefined
+            }
+            accessibilityRole="checkbox"
+            accessibilityState={{
+                checked: checked === 'indeterminate' ? 'mixed' : checked,
+                disabled,
+            }}
+            accessibilityLabel={accessibilityLabel ?? label}
+            testID={testID}
+            style={style}
+        >
+            <View
+                testID={testID ? `${testID}-box` : undefined}
+                style={{
+                    width: boxSize,
+                    height: boxSize,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    backgroundColor: String(
+                        tokens.checkbox.backgroundColor[checkedState]?.[
+                            interactionState
+                        ] ?? 'transparent'
+                    ),
+                    ...(typeof radius === 'number'
+                        ? { borderRadius: radius }
+                        : radius),
+                    ...parseBorder(
+                        String(
+                            tokens.checkbox.border[checkedState]?.[
+                                interactionState
+                            ] ?? 'none'
+                        )
+                    ),
+                }}
+            >
+                {showIndicator && (
+                    <Animated.View style={indicatorStyle}>
+                        <IndicatorIcon
+                            size={iconSize}
+                            strokeWidth={
+                                Number(
+                                    tokens.checkbox.icon.strokeWidth[size]
+                                ) || 2.5
+                            }
+                            color={String(
+                                tokens.checkbox.icon.color[
+                                    checkedState === 'indeterminate'
+                                        ? 'indeterminate'
+                                        : 'checked'
+                                ]?.[iconColorState] ?? '#FFFFFF'
+                            )}
+                        />
+                    </Animated.View>
+                )}
+            </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>
+    )
+})
+
+Checkbox.displayName = 'Checkbox'
+
+export default Checkbox