blend-native 0.0.1-beta.0

package/src/components/TextInput/textInput.utils.ts

@@ -0,0 +1,68 @@
+import {
+    InputSizeV2,
+    InputStateV2,
+    type TextInputV2TokensType,
+} from '@juspay/blend-design-system/node'
+
+/**
+ * Native TextInputV2 style resolver.
+ *
+ * Reimplements the inline resolution `TextInputV2.tsx` performs for RN. Web
+ * expresses hover/focus through styled-components pseudo-state objects; on
+ * native the field re-resolves against the current visual state (focus
+ * tracked in component state), so this returns plain token strings for one
+ * state at a time — the pattern `getButtonNativeStyles` set.
+ */
+
+export type TextInputNativeStyles = {
+    /** Outer column: label / field / footer. */
+    gap: string
+    /** The bordered field row. */
+    container: {
+        border: string
+        backgroundColor: string
+        borderRadius: string
+        gap: string
+        paddingTop: string
+        paddingRight: string
+        paddingBottom: string
+        paddingLeft: string
+    }
+    /** The editable text. */
+    text: {
+        fontSize: string
+        fontWeight: string
+        lineHeight: string
+        color: string
+    }
+    placeholderColor: string
+}
+
+export function getTextInputNativeStyles(
+    tokens: TextInputV2TokensType,
+    size: InputSizeV2,
+    visualState: InputStateV2
+): TextInputNativeStyles {
+    const container = tokens.inputContainer
+
+    return {
+        gap: String(tokens.gap),
+        container: {
+            border: String(container.border[visualState]),
+            backgroundColor: String(container.backgroundColor[visualState]),
+            borderRadius: String(container.borderRadius[size]),
+            gap: String(container.gap),
+            paddingTop: String(container.padding.top[size]),
+            paddingRight: String(container.padding.right[size]),
+            paddingBottom: String(container.padding.bottom[size]),
+            paddingLeft: String(container.padding.left[size]),
+        },
+        text: {
+            fontSize: String(container.inputText.fontSize[size]),
+            fontWeight: String(container.inputText.fontWeight[size]),
+            lineHeight: String(container.inputText.lineHeight[size]),
+            color: String(container.inputText.color[visualState]),
+        },
+        placeholderColor: String(container.placeholder.color[visualState]),
+    }
+}

package/src/components/shared/field/FieldFooter.tsx

@@ -0,0 +1,66 @@
+import {
+    InputSizeV2,
+    type TextInputV2TokensType,
+} from '@juspay/blend-design-system/node'
+import { Block } from '../../../primitives/Block'
+import { Text } from '../../../primitives/Text'
+import { useLiveRegionAnnounce } from '../../../a11y/useLiveRegion'
+import type { FieldError } from './fieldState'
+
+/**
+ * Footer under a field: the error message when erroring, else the hint.
+ *
+ * Ports web's `InputFooterV2` against the same `bottomContainer` token
+ * shape. Web marks the error `role="alert"` + `aria-live="polite"`; the
+ * native split is the Alert pattern — `accessibilityLiveRegion` for
+ * Android, an imperative announcement for iOS.
+ */
+
+export type FieldFooterProps = {
+    error?: FieldError
+    hintText?: string
+    size?: InputSizeV2
+    tokens: TextInputV2TokensType['bottomContainer']
+    testID?: string
+}
+
+export function FieldFooter({
+    error,
+    hintText,
+    size = InputSizeV2.SM,
+    tokens,
+    testID,
+}: FieldFooterProps) {
+    const showError = Boolean(error?.show && error.message)
+
+    useLiveRegionAnnounce(showError ? error?.message : undefined, showError)
+
+    if (!showError && !hintText) return null
+
+    return (
+        <Block width="100%" testID={testID}>
+            {showError ? (
+                <Text
+                    accessibilityLiveRegion="polite"
+                    color={String(tokens.errorMessage.color)}
+                    fontSize={tokens.errorMessage.fontSize[size]}
+                    fontWeight={tokens.errorMessage.fontWeight[size]}
+                    lineHeight={tokens.errorMessage.lineHeight[size]}
+                >
+                    {error?.message}
+                </Text>
+            ) : (
+                <Text
+                    color={String(tokens.hintText.color.default)}
+                    fontSize={tokens.hintText.fontSize[size]}
+                    fontWeight={tokens.hintText.fontWeight[size]}
+                    lineHeight={tokens.hintText.lineHeight[size]}
+                >
+                    {hintText}
+                </Text>
+            )}
+        </Block>
+    )
+}
+
+FieldFooter.displayName = 'FieldFooter'

package/src/components/shared/field/FieldLabels.tsx

@@ -0,0 +1,86 @@
+import {
+    InputSizeV2,
+    InputStateV2,
+    type TextInputV2TokensType,
+} from '@juspay/blend-design-system/node'
+import { Block } from '../../../primitives/Block'
+import { Text } from '../../../primitives/Text'
+
+/**
+ * Label row above a field: label, required marker, sublabel.
+ *
+ * Ports web's `InputLabelsV2` against the same `topContainer` token shape,
+ * with two deliberate omissions:
+ *
+ * - `helpIconText` — web wraps a help icon in `Tooltip`; native has no
+ *   tooltip yet, so the prop does not exist rather than silently doing
+ *   nothing (the `skeleton` precedent).
+ * - `as="label"`/`htmlFor` — no DOM. The field component instead puts the
+ *   label text into the input's `accessibilityLabel`.
+ */
+
+export type FieldLabelsProps = {
+    label?: string
+    sublabel?: string
+    required?: boolean
+    size?: InputSizeV2
+    state?: InputStateV2
+    tokens: TextInputV2TokensType['topContainer']
+    testID?: string
+}
+
+export function FieldLabels({
+    label,
+    sublabel,
+    required = false,
+    size = InputSizeV2.SM,
+    state = InputStateV2.DEFAULT,
+    tokens,
+    testID,
+}: FieldLabelsProps) {
+    if (!label) return null
+
+    return (
+        <Block
+            flexDirection="row"
+            alignItems="center"
+            gap={4}
+            width="100%"
+            testID={testID}
+        >
+            <Text
+                fontWeight={tokens.label.fontWeight[size]}
+                fontSize={tokens.label.fontSize[size]}
+                color={String(tokens.label.color[state])}
+                lineHeight={tokens.label.lineHeight[size]}
+            >
+                {label}
+            </Text>
+            {required ? (
+                // Web renders <sup aria-hidden>*</sup>; the accessible
+                // "required" semantics live on the input's a11y props, so
+                // the marker stays visual-only here too.
+                <Text
+                    color={String(tokens.required.color)}
+                    fontSize={tokens.label.fontSize[size]}
+                    accessibilityElementsHidden
+                    importantForAccessibility="no-hide-descendants"
+                >
+                    *
+                </Text>
+            ) : null}
+            {sublabel ? (
+                <Text
+                    fontWeight={tokens.subLabel.fontWeight[size]}
+                    fontSize={tokens.subLabel.fontSize[size]}
+                    color={String(tokens.subLabel.color[state])}
+                    lineHeight={tokens.subLabel.lineHeight[size]}
+                >
+                    ({sublabel})
+                </Text>
+            ) : null}
+        </Block>
+    )
+}
+
+FieldLabels.displayName = 'FieldLabels'

package/src/components/shared/field/fieldState.ts

@@ -0,0 +1,39 @@
+import { InputStateV2 } from '@juspay/blend-design-system/node'
+
+/**
+ * Input state derivation, shared by every field component.
+ *
+ * Mirrors web's `getInputState` (`InputsV2/TextInputV2/utils.ts`) and the
+ * per-variant resolution `TextInputV2.tsx` performs inline: error always
+ * wins, then disabled, and focus applies only when nothing stronger does.
+ * `HOVER` exists in the enum but has no touch counterpart.
+ *
+ * Pure and RN-free so the whole truth table unit-tests under vitest.
+ */
+
+export type FieldError = { show: boolean; message?: string } | undefined
+
+/** The state driving label/footer colours — web's `getInputState`. */
+export function getFieldState(
+    error: FieldError,
+    disabled?: boolean
+): InputStateV2 {
+    if (error?.show) return InputStateV2.ERROR
+    if (disabled) return InputStateV2.DISABLED
+    return InputStateV2.DEFAULT
+}
+
+/**
+ * The state driving the input container's border/background/text, which
+ * unlike the label state also reflects focus.
+ */
+export function getFieldVisualState(
+    error: FieldError,
+    disabled: boolean | undefined,
+    focused: boolean
+): InputStateV2 {
+    if (error?.show) return InputStateV2.ERROR
+    if (disabled) return InputStateV2.DISABLED
+    if (focused) return InputStateV2.FOCUS
+    return InputStateV2.DEFAULT
+}

package/src/components/shared/group.ts

@@ -0,0 +1,72 @@
+import type { ViewStyle } from 'react-native'
+
+/**
+ * Shared styling for grouped controls (button groups, tag groups).
+ *
+ * Members join edge to edge, so each keeps its radius only on the outward
+ * corners, and interior members drop the borders they would otherwise double
+ * up with their neighbour. Web implements the radius half identically in
+ * `ButtonV2/utils.ts` and `TagV2/utils.ts`, and the border half in
+ * `ButtonV2/utils.ts` (`getButtonBorderStyles`).
+ *
+ * Mirrors `components/shared/` in the web package, which holds cross-component
+ * internals rather than components.
+ */
+
+/** Where a control sits within its group. `undefined` means ungrouped. */
+export type GroupPosition = 'center' | 'left' | 'right'
+
+/** Every corner squared — the interior members of a group. */
+const ALL_SQUARE = '0px 0px 0px 0px'
+
+/**
+ * Collapse a control's border radius for its position in a group.
+ *
+ * Returns a CSS string — either the untouched radius or a four-corner
+ * shorthand in CSS order (top-left, top-right, bottom-right, bottom-left).
+ * `parseBorderRadius` handles both forms.
+ *
+ * ```
+ * getGroupedBorderRadius('10px', undefined) -> '10px'
+ * getGroupedBorderRadius('10px', 'left')    -> '10px 0 0 10px'
+ * getGroupedBorderRadius('10px', 'right')   -> '0 10px 10px 0'
+ * getGroupedBorderRadius('10px', 'center')  -> '0px 0px 0px 0px'
+ * ```
+ */
+export function getGroupedBorderRadius(
+    radius: string | number,
+    position: GroupPosition | undefined
+): string {
+    const value = String(radius)
+
+    if (position === undefined) return value
+    if (position === 'left') return `${value} 0 0 ${value}`
+    if (position === 'right') return `0 ${value} ${value} 0`
+
+    return ALL_SQUARE
+}
+
+/**
+ * Border widths to overlay for a control's position in a group.
+ *
+ * Interior (`center`) members drop their left and right borders so a shared
+ * edge is one line wide rather than two. Web does this in
+ * `getButtonBorderStyles`, which sets `borderLeft`/`borderRight` to `'none'`
+ * for the centre position and leaves the end caps fully bordered.
+ *
+ * Returned as a `ViewStyle` fragment to spread *after* the resolved surface,
+ * so `borderWidth: 1` still applies to the remaining sides.
+ *
+ * ```
+ * getGroupedBorderWidths(undefined) -> {}
+ * getGroupedBorderWidths('left')    -> {}
+ * getGroupedBorderWidths('right')   -> {}
+ * getGroupedBorderWidths('center')  -> { borderLeftWidth: 0, borderRightWidth: 0 }
+ * ```
+ */
+export function getGroupedBorderWidths(
+    position: GroupPosition | undefined
+): Pick<ViewStyle, 'borderLeftWidth' | 'borderRightWidth'> {
+    if (position !== 'center') return {}
+    return { borderLeftWidth: 0, borderRightWidth: 0 }
+}

package/src/index.ts

@@ -0,0 +1,144 @@
+/**
+ * blend-native — React Native components for Blend Design System.
+ *
+ * Consumes Blend's token system via the React-free
+ * `@juspay/blend-design-system/node` entry and translates CSS-string token
+ * values into RN style objects.
+ *
+ * No `styled-components`, no DOM, no `window.addEventListener`.
+ *
+ * ---
+ *
+ * This barrel is the package's **public API**, and everything named here is a
+ * semver commitment. Low-level internals — the CSS-string parsers, the surface
+ * resolver, the token registry, the grouped-control helpers — are deliberately
+ * NOT exported: they exist to serve the primitives, their shapes will change as
+ * more components land, and `Block` / `Pressable` already expose everything a
+ * consumer needs to build a token-driven surface of their own.
+ */
+
+// ---- Components ---------------------------------------------------------
+export { Alert } from './components/Alert'
+export { Button } from './components/Button'
+export { Tag } from './components/Tag'
+export { TextInput } from './components/TextInput'
+export type {
+    TextInputNativeProps,
+    TextInputSlot,
+} from './components/TextInput'
+export { Skeleton } from './components/Skeleton'
+export type { SkeletonNativeProps } from './components/Skeleton'
+
+export type {
+    AlertNativeProps,
+    AlertSlot,
+    AlertAction,
+    AlertActions,
+    AlertCloseButton,
+} from './components/Alert'
+export type { ButtonNativeProps } from './components/Button'
+export type { TagNativeProps, TagSlot } from './components/Tag'
+
+// ---- Theming ------------------------------------------------------------
+export {
+    BlendNativeProvider,
+    BlendNativeThemeContext,
+    DEFAULT_NATIVE_THEME,
+} from './theme/BlendNativeProvider'
+export type {
+    BlendNativeProviderProps,
+    BlendNativeThemeValue,
+} from './theme/BlendNativeProvider'
+
+/** Pass `theme={SYSTEM_THEME}` (or `theme="system"`) to follow the OS. */
+export { SYSTEM_THEME } from './theme/systemTheme'
+export type { NativeThemeSetting } from './theme/systemTheme'
+export type {
+    NativeFontRole,
+    NativeFontFamilies,
+    NativeFontFamilyOption,
+} from './theme/fonts'
+
+export { useNativeTokens } from './theme/useNativeTokens'
+export { useNativeBreakpoint } from './theme/useNativeBreakpoint'
+export type { NativeBreakpoint } from './theme/useNativeBreakpoint'
+export type {
+    NativeTokenSlot,
+    NativeComponentTokenOverrides,
+} from './theme/nativeTokenRegistry'
+
+// ---- Primitives ---------------------------------------------------------
+// Exported so consumers can compose token-driven surfaces of their own.
+export { Block } from './primitives/Block'
+export { Pressable } from './primitives/Pressable'
+export { Text } from './primitives/Text'
+export { Slot } from './primitives/Slot'
+export { Separator } from './primitives/Separator'
+export { PrimitiveInput } from './primitives/PrimitiveInput'
+export type { PrimitiveInputProps } from './primitives/PrimitiveInput'
+
+export type { BlockProps } from './primitives/Block'
+export type { PrimitivePressableProps } from './primitives/Pressable'
+export type { BlendTextProps } from './primitives/Text'
+export type { SlotProps } from './primitives/Slot'
+export type { SeparatorProps } from './primitives/Separator'
+// The shared base both `Block` and `Pressable` accept — needed to type a
+// wrapper around either.
+export type { SurfaceStyleProps } from './adapters/surfaceStyle'
+export type { RNSize } from './adapters/cssStringAdapter'
+
+/**
+ * The minimum tap target `Pressable` enforces via `hitSlop`, in points.
+ * Exposed so consumers can reason about it; pass `minTouchTarget={0}` to opt
+ * a control out.
+ */
+export { MIN_TOUCH_TARGET } from './primitives/touchTarget'
+
+// ---- Overlay & motion ---------------------------------------------------
+// `Portal` renders content into the provider's overlay layer (above the
+// app), and `useReduceMotion` mirrors web's prefers-reduced-motion. The
+// positioning engine and motion presets stay internal until the overlay
+// components stabilise their shapes.
+export { Portal } from './overlay/portal'
+export type { PortalProps } from './overlay/portal'
+export { useReduceMotion } from './motion/useReduceMotion'
+
+// The gesture-driven sheet foundation — DrawerV2 and the phone modes of
+// Select/Menu/Modal compose it; also public for consumer-built sheets.
+export { BottomSheet } from './overlay/sheet/BottomSheet'
+export type { BottomSheetProps } from './overlay/sheet/BottomSheet'
+
+// The toast host: the provider mounts the outlet, this pair drives it.
+// SnackbarV2 will layer token styling on top when it lands.
+export { showToast, dismissToast } from './overlay/toast/toastStore'
+export type { ToastOptions } from './overlay/toast/toastStore'
+
+/** Position of a control within a button or tag group. */
+export type { GroupPosition } from './components/shared/group'
+
+// ---- Enums --------------------------------------------------------------
+// Re-exported with cleaner native names (no "V2" suffix). The underlying
+// values are the same string constants, so they are interchangeable with the
+// web enums at runtime.
+/**
+ * Announce a status message to assistive tech. Exposed for consumers building
+ * their own status surfaces; `Alert` uses it internally.
+ */
+export { useLiveRegionAnnounce } from './a11y/useLiveRegion'
+
+export {
+    AlertV2Type as AlertType,
+    AlertV2SubType as AlertSubType,
+    AlertV2ActionPosition as AlertActionPosition,
+    ButtonV2Type as ButtonType,
+    ButtonV2Size as ButtonSize,
+    ButtonV2SubType as ButtonSubType,
+    ButtonV2State as ButtonState,
+    InputSizeV2 as InputSize,
+    InputStateV2 as InputState,
+    TagV2Type as TagType,
+    TagV2Size as TagSize,
+    TagV2SubType as TagSubType,
+    TagV2Color as TagColor,
+    Theme,
+} from '@juspay/blend-design-system/node'

package/src/motion/motion.ts

@@ -0,0 +1,115 @@
+/**
+ * Motion tokens and presets.
+ *
+ * Web Blend has no motion token layer — durations and curves are scattered
+ * inline (`transition: 'transform 0.15s ease-in-out'`, the MenuV2/ModalV2
+ * animation modules). Native centralises them here so every overlay and
+ * state change moves the same way.
+ *
+ * Pure data, deliberately independent of any animation library: consumers
+ * (the Reanimated-based overlay components) translate a preset into
+ * `withTiming`/`withSpring` calls. Keeping the descriptions library-free
+ * means this module stays vitest-testable and the animation dependency
+ * stays contained to the components that actually animate.
+ */
+
+/** Milliseconds. `fast` = state feedback, `normal` = overlays, `slow` = sheets. */
+export const MOTION_DURATION = {
+    fast: 150,
+    normal: 250,
+    slow: 400,
+} as const
+
+/** Cubic-bezier control points, CSS order `[x1, y1, x2, y2]`. */
+export const MOTION_EASING = {
+    /** Both ends eased — in-place state changes. */
+    standard: [0.4, 0, 0.2, 1],
+    /** Fast start, soft landing — content entering the screen. */
+    decelerate: [0, 0, 0.2, 1],
+    /** Soft start, fast exit — content leaving the screen. */
+    accelerate: [0.4, 0, 1, 1],
+} as const
+
+export type MotionEasing = keyof typeof MOTION_EASING
+
+/** Transform/opacity state at one end of a transition. */
+export type MotionFrame = {
+    opacity?: number
+    scale?: number
+    translateX?: number
+    translateY?: number
+}
+
+export type MotionPreset = {
+    from: MotionFrame
+    to: MotionFrame
+    duration: number
+    easing: MotionEasing
+    /** Exit timing — exits run faster than entrances by convention. */
+    exitDuration: number
+    exitEasing: MotionEasing
+}
+
+/**
+ * The presets the overlay components share.
+ *
+ * - `fade` — tooltips, backdrops.
+ * - `scaleFade` — menus, popovers, selects (anchored surfaces growing from
+ *   their anchor).
+ * - `slideUp` — toasts and sheets entering from the bottom edge (the
+ *   translate distance is a starting offset; sheets override it with their
+ *   own measured height).
+ * - `slideDown` — banners entering from the top edge.
+ */
+export const MOTION_PRESETS = {
+    fade: {
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+        duration: MOTION_DURATION.fast,
+        easing: 'decelerate',
+        exitDuration: MOTION_DURATION.fast,
+        exitEasing: 'accelerate',
+    },
+    scaleFade: {
+        from: { opacity: 0, scale: 0.95 },
+        to: { opacity: 1, scale: 1 },
+        duration: MOTION_DURATION.normal,
+        easing: 'decelerate',
+        exitDuration: MOTION_DURATION.fast,
+        exitEasing: 'accelerate',
+    },
+    slideUp: {
+        from: { opacity: 0, translateY: 16 },
+        to: { opacity: 1, translateY: 0 },
+        duration: MOTION_DURATION.normal,
+        easing: 'decelerate',
+        exitDuration: MOTION_DURATION.fast,
+        exitEasing: 'accelerate',
+    },
+    slideDown: {
+        from: { opacity: 0, translateY: -16 },
+        to: { opacity: 1, translateY: 0 },
+        duration: MOTION_DURATION.normal,
+        easing: 'decelerate',
+        exitDuration: MOTION_DURATION.fast,
+        exitEasing: 'accelerate',
+    },
+} as const satisfies Record<string, MotionPreset>
+
+export type MotionPresetName = keyof typeof MOTION_PRESETS
+
+/**
+ * A preset with motion removed — what every animation collapses to when the
+ * user has OS reduce-motion enabled (see `useReduceMotion`): a fast opacity
+ * change, no movement, no scaling.
+ */
+export function reducedMotionVariant(preset: MotionPreset): MotionPreset {
+    return {
+        from: { opacity: preset.from.opacity ?? 0 },
+        to: { opacity: preset.to.opacity ?? 1 },
+        duration: MOTION_DURATION.fast,
+        easing: 'standard',
+        exitDuration: MOTION_DURATION.fast,
+        exitEasing: 'standard',
+    }
+}

package/src/motion/useReduceMotion.ts

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+import { AccessibilityInfo } from 'react-native'
+
+/**
+ * Whether the OS reduce-motion accessibility setting is on.
+ *
+ * The native counterpart of web's `prefers-reduced-motion` media query.
+ * Overlay components pair this with `reducedMotionVariant` so every
+ * animation collapses to a quick fade when the user asked for less motion.
+ *
+ * Starts `false` and corrects itself once the async platform query
+ * resolves — the safe default, since acting on it only ever *removes*
+ * motion. Subscribes to changes for the lifetime of the component.
+ */
+export function useReduceMotion(): boolean {
+    const [reduceMotion, setReduceMotion] = useState(false)
+
+    useEffect(() => {
+        let mounted = true
+        AccessibilityInfo.isReduceMotionEnabled().then((enabled) => {
+            if (mounted) setReduceMotion(enabled)
+        })
+        const subscription = AccessibilityInfo.addEventListener(
+            'reduceMotionChanged',
+            setReduceMotion
+        )
+        return () => {
+            mounted = false
+            subscription.remove()
+        }
+    }, [])
+
+    return reduceMotion
+}
+
+export default useReduceMotion