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

package/src/components/Tag/TagGroup.tsx

@@ -0,0 +1,44 @@
+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 { TagNativeProps } from './tag.types'
+
+/**
+ * Container for a row of Tags — the native port of web's `TagGroupV2`.
+ *
+ * `stacked` joins members edge to edge and injects each child's
+ * `tagGroupPosition`; the Tag collapses its own radius from that prop.
+ * Like web, only corners collapse for tags — Tag has no border-collapsing
+ * path (web ships no `getTagBorderStyles`), so stacked bordered tags keep
+ * their shared edges. Non-stacked renders a spaced row and injects nothing.
+ */
+export type TagGroupNativeProps = {
+    /** Join members edge to edge, collapsing shared corners. */
+    stacked?: boolean
+    /** Space between members when not stacked. Defaults to the web gap. */
+    gap?: number | string
+    children: ReactElement<TagNativeProps> | ReactElement<TagNativeProps>[]
+    /** Container label; the members stay individually reachable. */
+    accessibilityLabel?: string
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}
+
+const TagGroup = forwardRef<RNView, TagGroupNativeProps>(function TagGroup(
+    { accessibilityLabel = 'Tag group', ...rest },
+    ref
+) {
+    return (
+        <GroupView
+            {...rest}
+            ref={ref}
+            positionProp="tagGroupPosition"
+            accessibilityLabel={accessibilityLabel}
+        />
+    )
+})
+
+TagGroup.displayName = 'TagGroup'
+
+export default TagGroup

package/src/components/Tag/index.ts

@@ -1,5 +1,7 @@
 export { default as Tag } from './Tag'
+export { default as TagGroup } from './TagGroup'
 export type { TagNativeProps, TagSlot } from './tag.types'
+export type { TagGroupNativeProps } from './TagGroup'
 export {
     getTagBorderRadius,
     getAccessibleName,

package/src/components/Tag/tag.types.ts

@@ -1,24 +1,22 @@
 import type React from 'react'
-import type { GestureResponderEvent, ViewStyle } from 'react-native'
-import type {
-    TagV2Color,
-    TagV2Size,
-    TagV2SubType,
-    TagV2Type,
-} from '@juspay/blend-design-system/node'
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'
+import type { TagBaseProps } from '@juspay/blend-design-system/node'
 import type { GroupPosition } from '../shared/group'
 
 /**
  * Props for the native `Tag`.
  *
- * Mirrors web `TagV2Props` (`packages/blend/lib/components/TagV2/
- * TagV2.types.ts`) with DOM-specific pieces replaced by RN equivalents:
+ * Derives from web's platform-neutral `TagBaseProps` (the `ButtonBaseProps`
+ * pattern), so a web-side rename or addition reaches this type instead of
+ * drifting silently. DOM-specific pieces are replaced by RN equivalents:
  *
  * - `onClick` → `onPress`, carrying a `GestureResponderEvent`.
  * - `aria-pressed` → `pressed`, surfaced as `accessibilityState.selected`.
  * - `HTMLAttributes` passthrough → RN `View`/`Pressable` props via `...rest`.
+ * - Web's `ReactElement` slots → native `TagSlot` (`ReactNode`, plain
+ *   `string | number` max height).
  *
- * `skeleton` is deliberately **absent** rather than accepted-and-ignored.
+ * `skeleton` is deliberately **omitted** rather than accepted-and-ignored.
  * Web's `TagV2` renders a `TagSkeleton`, which has no native counterpart yet;
  * omitting the prop from the type keeps it a compile error instead of a
  * silent no-op. Same decision as `Button`.
@@ -30,17 +28,16 @@ export type TagSlot = {
     maxHeight?: string | number
 }
 
-export type TagNativeProps = {
-    text: string
-    size?: TagV2Size
-    type?: TagV2Type
-    subType?: TagV2SubType
-    color?: TagV2Color
+export type TagNativeProps = Omit<
+    TagBaseProps,
+    'skeleton' | 'tagGroupPosition'
+> & {
     leftSlot?: TagSlot
     rightSlot?: TagSlot
     /**
      * Position within a tag group. Collapses the border radius on the joined
-     * edges, matching web's `getTagBorderRadius`.
+     * edges, matching web's `getTagBorderRadius`. Redeclared from the base
+     * (same union) to tie it to the shared `GroupPosition` type.
      */
     tagGroupPosition?: GroupPosition
     /**
@@ -59,5 +56,5 @@ export type TagNativeProps = {
     accessibilityLabel?: string
     testID?: string
     /** Escape hatch for RN styles the token props do not cover. */
-    style?: ViewStyle
+    style?: StyleProp<ViewStyle>
 }

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,149 @@
+import { forwardRef, useState } from 'react'
+import type {
+    TextInputProps as RNTextInputProps,
+    View as RNView,
+} from 'react-native'
+import { InputSizeV2 } from '@juspay/blend-design-system/node'
+import type { TextAreaV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { useControllableState } from '../../hooks/useControllableState'
+import Block from '../../primitives/Block'
+import PrimitiveInput from '../../primitives/PrimitiveInput'
+import { FieldLabels } from '../shared/field/FieldLabels'
+import { FieldFooter } from '../shared/field/FieldFooter'
+import { getFieldState, getFieldVisualState } from '../shared/field/fieldState'
+import { parseDimension } from '../../adapters/cssStringAdapter'
+import type { TextAreaNativeProps } from './textArea.types'
+
+/**
+ * Multi-line text field — the native port of web's `TextAreaV2`.
+ *
+ * The TextInput anatomy with a multiline `PrimitiveInput`: the minimum
+ * height is web's formula (`rows × lineHeight + vertical padding`), text
+ * grows past it, and `textAlignVertical="top"` keeps the first line at the
+ * top on Android.
+ */
+const TextArea = forwardRef<RNView, TextAreaNativeProps>(function TextArea(
+    {
+        value,
+        defaultValue,
+        onChangeText,
+        label,
+        subLabel,
+        size = InputSizeV2.MD,
+        error,
+        hintText,
+        placeholder,
+        required = false,
+        disabled = false,
+        rows = 3,
+        testID,
+        accessibilityLabel,
+        style,
+        inputRef,
+        onFocus,
+        onBlur,
+        ...rest
+    },
+    ref
+) {
+    const tokens = useNativeTokens<TextAreaV2TokensType>('TEXT_AREA_V2')
+    const [focused, setFocused] = useState(false)
+    const [currentValue, setCurrentValue] = useControllableState<string>(
+        value,
+        defaultValue ?? '',
+        onChangeText
+    )
+
+    const fieldState = getFieldState(error, disabled)
+    const visualState = getFieldVisualState(error, disabled, focused)
+    const container = tokens.inputContainer
+
+    const lineHeight =
+        parseDimension(container.lineHeight[size] as string | number) ?? 20
+    const paddingTop =
+        parseDimension(container.padding.top[size] as string | number) ?? 10
+    const paddingBottom =
+        parseDimension(container.padding.bottom[size] as string | number) ?? 10
+    // Web's `getTextAreaV2MinHeightFromRows`.
+    const minHeight = rows * lineHeight + paddingTop + paddingBottom
+
+    const handleFocus: NonNullable<RNTextInputProps['onFocus']> = (event) => {
+        setFocused(true)
+        onFocus?.(event)
+    }
+    const handleBlur: NonNullable<RNTextInputProps['onBlur']> = (event) => {
+        setFocused(false)
+        onBlur?.(event)
+    }
+
+    return (
+        <Block
+            ref={ref}
+            gap={tokens.gap as string | number}
+            style={style}
+            testID={testID}
+        >
+            <FieldLabels
+                label={label}
+                sublabel={subLabel}
+                required={required}
+                size={size}
+                state={fieldState}
+                tokens={tokens.topContainer}
+                testID={testID ? `${testID}-labels` : undefined}
+            />
+            <Block
+                border={String(container.border[visualState] ?? 'none')}
+                backgroundColor={String(
+                    container.backgroundColor[visualState] ?? 'transparent'
+                )}
+                borderRadius={container.borderRadius as string | number}
+                paddingTop={paddingTop}
+                paddingBottom={paddingBottom}
+                paddingLeft={container.padding.left[size] as string | number}
+                paddingRight={container.padding.right[size] as string | number}
+                minHeight={minHeight}
+                testID={testID ? `${testID}-container` : undefined}
+            >
+                <PrimitiveInput
+                    ref={inputRef}
+                    value={currentValue}
+                    onChangeText={setCurrentValue}
+                    multiline
+                    textAlignVertical="top"
+                    placeholder={placeholder}
+                    placeholderColor={String(
+                        container.placeholder.color[visualState] ?? undefined
+                    )}
+                    fontSize={container.fontSize as string | number}
+                    fontWeight={container.fontWeight as string | number}
+                    lineHeight={lineHeight}
+                    color={String(container.color[visualState] ?? '#000000')}
+                    editable={!disabled}
+                    accessibilityLabel={accessibilityLabel ?? label}
+                    accessibilityState={{ disabled }}
+                    onFocus={handleFocus}
+                    onBlur={handleBlur}
+                    testID={testID ? `${testID}-input` : undefined}
+                    style={{
+                        flex: 0,
+                        minHeight: minHeight - paddingTop - paddingBottom,
+                    }}
+                    {...rest}
+                />
+            </Block>
+            <FieldFooter
+                error={error}
+                hintText={hintText}
+                size={size}
+                tokens={tokens.bottomContainer}
+                testID={testID ? `${testID}-footer` : undefined}
+            />
+        </Block>
+    )
+})
+
+TextArea.displayName = 'TextArea'
+
+export default TextArea

package/src/components/TextArea/index.ts

@@ -0,0 +1,2 @@
+export { default as TextArea } from './TextArea'
+export type { TextAreaNativeProps } from './textArea.types'

package/src/components/TextArea/textArea.types.ts

@@ -0,0 +1,46 @@
+import type React from 'react'
+import type {
+    StyleProp,
+    TextInput as RNTextInput,
+    TextInputProps as RNTextInputProps,
+    ViewStyle,
+} from 'react-native'
+import type { TextAreaBaseProps } from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native `TextArea` — the port of web's `TextAreaV2`.
+ *
+ * Derives from `TextAreaBaseProps` with the web-only pieces swapped:
+ * `onChange` → `onChangeText`, web's lowercase `sublabel` normalized to
+ * `subLabel` (cross-input consistency, docblocked divergence), and `value`
+ * optional with a live `defaultValue` (uncontrolled support from day one).
+ *
+ * Deliberately omitted rather than accepted-and-ignored (compile errors):
+ *
+ * - `resize` — no RN equivalent; height comes from `rows`.
+ * - `helpIconText` — needs the native Tooltip.
+ * - The floating-label mode — deferred with TextInput's.
+ */
+export type TextAreaNativeProps = Omit<
+    TextAreaBaseProps,
+    'value' | 'sublabel' | 'resize' | 'helpIconText'
+> & {
+    value?: string
+    defaultValue?: string
+    onChangeText?: (text: string) => void
+    subLabel?: string
+    testID?: string
+    accessibilityLabel?: string
+    style?: StyleProp<ViewStyle>
+    inputRef?: React.Ref<RNTextInput>
+} & Omit<
+        RNTextInputProps,
+        | 'value'
+        | 'defaultValue'
+        | 'onChangeText'
+        | 'style'
+        | 'editable'
+        | 'placeholderTextColor'
+        | 'multiline'
+        | 'numberOfLines'
+    >

package/src/components/TextInput/TextInput.tsx

@@ -1,4 +1,5 @@
 import { forwardRef, useCallback, useMemo, useState } from 'react'
+import { useControllableState } from '../../hooks/useControllableState'
 import type {
     TextInputProps as RNTextInputProps,
     View as RNView,
@@ -32,6 +33,7 @@ import type { TextInputNativeProps } from './textInput.types'
 const TextInput = forwardRef<RNView, TextInputNativeProps>(function TextInput(
     {
         value,
+        defaultValue,
         onChangeText,
         label,
         subLabel,
@@ -54,6 +56,13 @@ const TextInput = forwardRef<RNView, TextInputNativeProps>(function TextInput(
 ) {
     const tokens = useNativeTokens<TextInputV2TokensType>('TEXT_INPUTV2')
     const [focused, setFocused] = useState(false)
+    // Controlled when `value` is supplied; otherwise the field owns its
+    // text, seeded by `defaultValue` (the audit's uncontrolled fix).
+    const [currentValue, setCurrentValue] = useControllableState<string>(
+        value,
+        defaultValue ?? '',
+        onChangeText
+    )
 
     // Labels/footer track error+disabled; the container also tracks focus.
     const fieldState = getFieldState(error, disabled)
@@ -122,8 +131,8 @@ const TextInput = forwardRef<RNView, TextInputNativeProps>(function TextInput(
 
                 <PrimitiveInput
                     ref={inputRef}
-                    value={value}
-                    onChangeText={onChangeText}
+                    value={currentValue}
+                    onChangeText={setCurrentValue}
                     editable={!disabled}
                     fontSize={styles.text.fontSize}
                     fontWeight={styles.text.fontWeight}

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

@@ -2,24 +2,29 @@ import type React from 'react'
 import type {
     TextInput as RNTextInput,
     TextInputProps as RNTextInputProps,
+    StyleProp,
     ViewStyle,
 } from 'react-native'
-import type { InputSizeV2 } from '@juspay/blend-design-system/node'
-import type { FieldError } from '../shared/field/fieldState'
+import type { TextInputBaseProps } from '@juspay/blend-design-system/node'
 
 /**
  * Props for the native `TextInput` — the port of web's `TextInputV2`.
  *
- * Web pieces swapped for RN ones: `onChange` on a DOM input becomes RN's
- * `onChangeText`, `data-testid` becomes `testID`, and the HTML-attribute
- * passthrough becomes RN `TextInputProps` (which supplies `placeholder`,
- * `keyboardType`, `autoCapitalize`, `secureTextEntry`, ... for free).
+ * Derives from web's platform-neutral `TextInputBaseProps` (the
+ * `ButtonBaseProps` pattern), so a web-side rename or addition reaches this
+ * type instead of drifting silently. Web pieces swapped for RN ones:
+ * `onChange` on a DOM input becomes RN's `onChangeText`, `data-testid`
+ * becomes `testID`, and the HTML-attribute passthrough becomes RN
+ * `TextInputProps` (which supplies `placeholder`, `keyboardType`,
+ * `autoCapitalize`, `secureTextEntry`, ... for free). The base's `error`
+ * shape is exactly `FieldError` (`../shared/field/fieldState`).
  *
  * Deliberately omitted rather than accepted-and-ignored (the `skeleton`
  * precedent — passing them should be a compile error, not a no-op):
  *
  * - `dropdown` — the embedded SingleSelect needs the native Select family.
- * - `helpIconText` — needs a native Tooltip.
+ *   (Web keeps it out of the base type for the same reason.)
+ * - `helpIconText` — needs a native Tooltip; `Omit`-ed from the base.
  * - The floating-label mode (web floats the label into `lg` inputs on
  *   phones) — deferred until the field pattern settles on native.
  */
@@ -29,14 +34,18 @@ export type TextInputSlot = {
     maxHeight?: string | number
 }
 
-export type TextInputNativeProps = {
-    value: string
+export type TextInputNativeProps = Omit<
+    TextInputBaseProps,
+    'helpIconText' | 'value'
+> & {
+    /**
+     * Controlled value. Optional since the uncontrolled fix: omit it (with
+     * an optional `defaultValue`) and the field manages its own text.
+     */
+    value?: string
+    /** Initial value for uncontrolled usage. Mount-only, like React's. */
+    defaultValue?: string
     onChangeText?: (text: string) => void
-    label?: string
-    subLabel?: string
-    size?: InputSizeV2
-    error?: FieldError
-    hintText?: string
     required?: boolean
     disabled?: boolean
     leftSlot?: TextInputSlot
@@ -45,10 +54,15 @@ export type TextInputNativeProps = {
     /** Screen-reader name; defaults to `label`. */
     accessibilityLabel?: string
     /** Escape hatch for the outer column (label + field + footer). */
-    style?: ViewStyle
+    style?: StyleProp<ViewStyle>
     /** Ref to the underlying RN TextInput (focus/blur/clear). */
     inputRef?: React.Ref<RNTextInput>
 } & Omit<
-    RNTextInputProps,
-    'value' | 'onChangeText' | 'style' | 'editable' | 'placeholderTextColor'
->
+        RNTextInputProps,
+        | 'value'
+        | 'defaultValue'
+        | 'onChangeText'
+        | 'style'
+        | 'editable'
+        | 'placeholderTextColor'
+    >

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,140 @@
+import { Pressable, View } from 'react-native'
+import {
+    TooltipV2Align,
+    TooltipV2Side,
+    TooltipV2Size,
+    TooltipV2SlotDirection,
+} from '@juspay/blend-design-system/node'
+import type { TooltipV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { useControllableState } from '../../hooks/useControllableState'
+import { useLiveRegionAnnounce } from '../../a11y/useLiveRegion'
+import { AnchoredOverlay } from '../../overlay/anchored/AnchoredOverlay'
+import { parseDimension } from '../../adapters/cssStringAdapter'
+import Text from '../../primitives/Text'
+import type { TooltipNativeProps } from './tooltip.types'
+
+/**
+ * Tooltip — the native port of web's `TooltipV2`.
+ *
+ * Anchored at every size (web parity — TooltipV2 has no mobile branch).
+ * Long-press shows it; a tap anywhere (the transparent backdrop) or the
+ * Android back button dismisses. String content doubles as the trigger's
+ * `accessibilityHint` and is announced when shown.
+ */
+
+/** `"4px 6px"` → vertical/horizontal points. */
+function splitPadding(shorthand: unknown): { y: number; x: number } {
+    const parts = String(shorthand ?? '')
+        .trim()
+        .split(/\s+/)
+        .map((part) => parseDimension(part) ?? 0)
+    const y = parts[0] ?? 0
+    return { y, x: parts[1] ?? y }
+}
+
+const ARROW_SIZE = 7
+
+export function Tooltip({
+    children,
+    content,
+    slot,
+    open,
+    onOpenChange,
+    side = TooltipV2Side.TOP,
+    align = TooltipV2Align.CENTER,
+    showArrow = true,
+    size = TooltipV2Size.SM,
+    slotDirection = TooltipV2SlotDirection.LEFT,
+    delayDuration = 300,
+    offset = 5,
+    fullWidth = false,
+    maxWidth,
+    testID,
+    style,
+}: TooltipNativeProps) {
+    const tokens = useNativeTokens<TooltipV2TokensType>('TOOLTIPV2')
+    const [isOpen, setOpen] = useControllableState<boolean>(
+        open,
+        false,
+        onOpenChange
+    )
+
+    const stringContent = typeof content === 'string' ? content : undefined
+    useLiveRegionAnnounce(stringContent, isOpen)
+
+    const padding = splitPadding(tokens.padding[size])
+    const resolvedMaxWidth =
+        maxWidth ?? parseDimension(tokens.maxWidth[size] as string | number)
+
+    return (
+        <AnchoredOverlay
+            open={isOpen}
+            onRequestClose={() => setOpen(false)}
+            placement={side}
+            alignment={align}
+            offset={offset}
+            arrowSize={ARROW_SIZE}
+            arrowAligned
+            arrowColor={
+                showArrow
+                    ? String(tokens.background ?? '#181B25')
+                    : 'transparent'
+            }
+            backdrop="transparent"
+            testID={testID}
+            contentStyle={[
+                {
+                    backgroundColor: String(tokens.background ?? '#181B25'),
+                    borderRadius:
+                        parseDimension(
+                            tokens.borderRadius[size] as string | number
+                        ) ?? 6,
+                    paddingVertical: padding.y,
+                    paddingHorizontal: padding.x,
+                    maxWidth: resolvedMaxWidth,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap:
+                        parseDimension(tokens.gap[size] as string | number) ??
+                        4,
+                },
+                style,
+            ]}
+            trigger={
+                <Pressable
+                    onLongPress={() => setOpen(true)}
+                    delayLongPress={delayDuration}
+                    accessibilityHint={stringContent}
+                    style={fullWidth ? { alignSelf: 'stretch' } : undefined}
+                    testID={testID ? `${testID}-trigger` : undefined}
+                >
+                    {children}
+                </Pressable>
+            }
+        >
+            {slot && slotDirection === TooltipV2SlotDirection.LEFT ? (
+                <View>{slot}</View>
+            ) : null}
+            {typeof content === 'string' ? (
+                <Text
+                    color={String(tokens.text.color ?? '#FFFFFF')}
+                    fontSize={tokens.text.fontSize[size] as string | number}
+                    fontWeight={tokens.text.fontWeight[size] as string | number}
+                    lineHeight={tokens.text.lineHeight[size] as string | number}
+                >
+                    {content}
+                </Text>
+            ) : (
+                content
+            )}
+            {slot && slotDirection === TooltipV2SlotDirection.RIGHT ? (
+                <View>{slot}</View>
+            ) : null}
+        </AnchoredOverlay>
+    )
+}
+
+Tooltip.displayName = 'Tooltip'
+
+export default Tooltip

package/src/components/Tooltip/index.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip'
+export type { TooltipNativeProps } from './tooltip.types'

package/src/components/Tooltip/tooltip.types.ts

@@ -0,0 +1,30 @@
+import type React from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import type { TooltipBaseProps } from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native `Tooltip` — the port of web's `TooltipV2`.
+ *
+ * Derives from `TooltipBaseProps` with the pointer-era pieces swapped:
+ *
+ * - The trigger opens on **long-press** (there is no hover); web's
+ *   `delayDuration` hover delay is repurposed as `delayLongPress`.
+ * - `disableInteractive` is omitted — it exists to keep a *hovered* tooltip
+ *   open while the pointer crosses onto it, a concept with no touch
+ *   counterpart. Any outside tap dismisses.
+ * - `maxWidth` is a number (web types it as a CSS string); the token
+ *   per-size max width applies when unset.
+ */
+export type TooltipNativeProps = Omit<
+    TooltipBaseProps,
+    'disableInteractive'
+> & {
+    /** The anchor. Long-press shows the tooltip. */
+    children: React.ReactNode
+    content: React.ReactNode | string
+    slot?: React.ReactNode
+    maxWidth?: number
+    testID?: string
+    /** Styles the tooltip surface. */
+    style?: StyleProp<ViewStyle>
+}