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

package/src/components/Checkbox/checkbox.types.ts

@@ -0,0 +1,26 @@
+import type React from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import type { CheckboxBaseProps } from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native `Checkbox` — the port of web's `CheckboxV2`.
+ *
+ * Derives from `CheckboxBaseProps` (checked / onCheckedChange incl.
+ * `'indeterminate'`, required, error, label, subLabel, size), so a web-side
+ * rename or addition reaches this type. Controlled-only, matching web —
+ * there is no `defaultChecked` on either platform.
+ *
+ * Deliberately omitted rather than accepted-and-ignored (compile errors):
+ *
+ * - `maxLength` label truncation — needs the native Tooltip (Wave C);
+ *   RN text can wrap instead.
+ * - The error shake animation — a decorative web-ism.
+ */
+export type CheckboxNativeProps = CheckboxBaseProps & {
+    disabled?: boolean
+    /** Extra content after the label, tinted like web's selector slot. */
+    slot?: React.ReactNode
+    accessibilityLabel?: string
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}

package/src/components/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { default as Checkbox } from './Checkbox'
+export type { CheckboxNativeProps } from './checkbox.types'

package/src/components/KeyValuePair/KeyValuePair.tsx

@@ -0,0 +1,121 @@
+import { forwardRef } from 'react'
+import { View } from 'react-native'
+import type { View as RNView } from 'react-native'
+import { KeyValuePairV2Size } from '@juspay/blend-design-system/node'
+import type { KeyValuePairV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { parseDimension, parseSize } from '../../adapters/cssStringAdapter'
+import Text from '../../primitives/Text'
+import Slot from '../../primitives/Slot'
+import type { KeyValuePairNativeProps } from './keyValuePair.types'
+
+/**
+ * Key/value display — the native port of web's `KeyValuePairV2`.
+ *
+ * Pure layout: key text (with an optional slot) above or beside the value
+ * row. Web's DOM truncation machinery (ResizeObserver + scrollHeight)
+ * becomes RN's `numberOfLines`.
+ */
+const KeyValuePair = forwardRef<RNView, KeyValuePairNativeProps>(
+    function KeyValuePair(
+        {
+            keyString,
+            value,
+            size = KeyValuePairV2Size.SM,
+            orientation = 'vertical',
+            slots,
+            maxWidth,
+            textOverflow = 'truncate',
+            maxLines = 2,
+            testID,
+            style,
+        },
+        ref
+    ) {
+        const tokens =
+            useNativeTokens<KeyValuePairV2TokensType>('KEYVALUEPAIRV2')
+
+        const numberOfLines =
+            textOverflow === 'truncate'
+                ? 1
+                : textOverflow === 'wrap-clamp'
+                  ? maxLines
+                  : undefined
+
+        const horizontal = orientation === 'horizontal'
+
+        return (
+            <View
+                ref={ref}
+                testID={testID}
+                style={[
+                    {
+                        flexDirection: horizontal ? 'row' : 'column',
+                        alignItems: horizontal ? 'center' : 'flex-start',
+                        gap:
+                            parseDimension(
+                                tokens.gap[orientation] as string | number
+                            ) ?? 4,
+                        maxWidth: parseSize(maxWidth) ?? 220,
+                    },
+                    style,
+                ]}
+            >
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap:
+                            parseDimension(tokens.key.gap as string | number) ??
+                            4,
+                    }}
+                >
+                    <Text
+                        fontSize={tokens.key.fontSize as string | number}
+                        fontWeight={tokens.key.fontWeight as string | number}
+                        color={String(tokens.key.color)}
+                        numberOfLines={numberOfLines}
+                        testID={testID ? `${testID}-key` : undefined}
+                    >
+                        {keyString}
+                    </Text>
+                    {slots?.key && <Slot>{slots.key}</Slot>}
+                </View>
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        flexShrink: 1,
+                        gap:
+                            parseDimension(
+                                tokens.value.gap as string | number
+                            ) ?? 4,
+                    }}
+                >
+                    {slots?.valueLeft && <Slot>{slots.valueLeft}</Slot>}
+                    {value !== undefined && (
+                        <Text
+                            fontSize={
+                                tokens.value.fontSize[size] as string | number
+                            }
+                            fontWeight={
+                                tokens.value.fontWeight as string | number
+                            }
+                            color={String(tokens.value.color)}
+                            numberOfLines={numberOfLines}
+                            style={{ flexShrink: 1 }}
+                            testID={testID ? `${testID}-value` : undefined}
+                        >
+                            {value}
+                        </Text>
+                    )}
+                    {slots?.valueRight && <Slot>{slots.valueRight}</Slot>}
+                </View>
+            </View>
+        )
+    }
+)
+
+KeyValuePair.displayName = 'KeyValuePair'
+
+export default KeyValuePair

package/src/components/KeyValuePair/index.ts

@@ -0,0 +1,6 @@
+export { default as KeyValuePair } from './KeyValuePair'
+export type {
+    KeyValuePairNativeProps,
+    KeyValuePairOrientation,
+    KeyValuePairTextOverflow,
+} from './keyValuePair.types'

package/src/components/KeyValuePair/keyValuePair.types.ts

@@ -0,0 +1,39 @@
+import type React from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import type { KeyValuePairV2Size } from '@juspay/blend-design-system/node'
+
+/**
+ * Props for the native `KeyValuePair` — the port of web's `KeyValuePairV2`.
+ *
+ * Web's numeric `KeyValuePairV2StateType` enum (vertical = 0) is
+ * deliberately not mirrored — orientation is the `'vertical' |
+ * 'horizontal'` string union the gap tokens already key on. Truncation maps
+ * to RN's `numberOfLines` (`truncate` → 1, `wrap-clamp` → `maxLines`,
+ * `wrap` → unlimited).
+ *
+ * Deliberately omitted rather than accepted-and-ignored (compile errors):
+ *
+ * - `showTooltipOnTruncate` — needs the native Tooltip (Wave C).
+ */
+export type KeyValuePairOrientation = 'vertical' | 'horizontal'
+
+export type KeyValuePairTextOverflow = 'truncate' | 'wrap' | 'wrap-clamp'
+
+export type KeyValuePairNativeProps = {
+    keyString: string
+    value?: string
+    /** Affects the value's font size only, like web. */
+    size?: KeyValuePairV2Size
+    orientation?: KeyValuePairOrientation
+    slots?: {
+        key?: React.ReactNode
+        valueLeft?: React.ReactNode
+        valueRight?: React.ReactNode
+    }
+    maxWidth?: string | number
+    textOverflow?: KeyValuePairTextOverflow
+    /** Line cap for `wrap-clamp`. Web default: 2. */
+    maxLines?: number
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}

package/src/components/Menu/Menu.tsx

@@ -0,0 +1,228 @@
+import React, { forwardRef, memo, useCallback, useMemo, useState } from 'react'
+import { View } from 'react-native'
+import {
+    MenuV2Alignment,
+    MenuV2Side,
+    type MenuV2TokensType,
+} from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { BottomSheet } from '../../overlay/sheet/BottomSheet'
+import { Block } from '../../primitives/Block'
+import {
+    DropdownContent,
+    DropdownList,
+    DropdownSearch,
+    useDropdown,
+} from '../shared/dropdown'
+import { filterGroups } from '../shared/dropdown/dropdownFilter'
+import { flattenGroups } from '../shared/dropdown/dropdownFlatten'
+import {
+    getMenuContentTokens,
+    getMenuItemTokens,
+    flattenMenuGroups,
+    toFilterableItem,
+} from './menu.utils'
+import type { MenuNativeProps, MenuRef } from './menu.types'
+
+const DEFAULT_PLACEMENT_MAP: Record<
+    MenuV2Side,
+    'top' | 'bottom' | 'left' | 'right'
+> = {
+    [MenuV2Side.TOP]: 'top',
+    [MenuV2Side.BOTTOM]: 'bottom',
+    [MenuV2Side.LEFT]: 'left',
+    [MenuV2Side.RIGHT]: 'right',
+}
+
+const DEFAULT_ALIGNMENT_MAP: Record<
+    MenuV2Alignment,
+    'start' | 'center' | 'end'
+> = {
+    [MenuV2Alignment.START]: 'start',
+    [MenuV2Alignment.CENTER]: 'center',
+    [MenuV2Alignment.END]: 'end',
+}
+
+/**
+ * Menu — React Native implementation of web's `MenuV2`.
+ *
+ * Renders a trigger; on press, a floating panel (or bottom sheet on mobile)
+ * opens with the items. Selection is per-item controlled (`item.selected`);
+ * Menu manages no selection state. Sub-menus render trailing chevrons.
+ */
+const Menu = forwardRef<MenuRef, MenuNativeProps>(function Menu(
+    {
+        trigger,
+        items = [],
+        open: openProp,
+        onOpenChange,
+        closeOnSelect = true,
+        enableSearch = false,
+        searchPlaceholder = 'Search...',
+        alignment = MenuV2Alignment.START,
+        side = MenuV2Side.BOTTOM,
+        sideOffset = 8,
+        usePanelOnMobile = false,
+        enableVirtualization = false,
+        menuFooter,
+        testID,
+        accessibilityLabel,
+    },
+    ref
+) {
+    const tokens = useNativeTokens<MenuV2TokensType>('MENUV2')
+    const [searchText, setSearchText] = useState('')
+
+    const dropdown = useDropdown({
+        open: openProp,
+        onOpenChange,
+        placement: DEFAULT_PLACEMENT_MAP[side],
+        alignment: DEFAULT_ALIGNMENT_MAP[alignment],
+        offset: sideOffset,
+        usePanelOnMobile,
+    })
+
+    const contentTokens = useMemo(() => getMenuContentTokens(tokens), [tokens])
+
+    const filteredGroups = useMemo(() => {
+        if (!enableSearch || !searchText) return items
+        const filterable = items.map((g) => ({
+            label: g.label,
+            items: g.items.map(toFilterableItem),
+            showSeparator: g.showSeparator,
+        }))
+        const filtered = filterGroups(filterable, searchText)
+        // Re-attach original items by index
+        return items
+            .map((originalGroup) => {
+                const match = filtered.find(
+                    (fg) => fg.label === originalGroup.label
+                )
+                if (!match) return null
+                // For each surviving filterable item, find the original
+                const survivingOriginals = match.items
+                    .map((fi) =>
+                        originalGroup.items.find(
+                            (oi) => oi.label.text === fi.primaryText
+                        )
+                    )
+                    .filter(Boolean)
+                if (!survivingOriginals.length) return null
+                return {
+                    ...originalGroup,
+                    items: survivingOriginals as typeof originalGroup.items,
+                }
+            })
+            .filter(Boolean) as typeof items
+    }, [items, enableSearch, searchText])
+
+    const adapterGroups = useMemo(
+        () => flattenMenuGroups(filteredGroups),
+        [filteredGroups]
+    )
+
+    const flatRows = useMemo(
+        () => flattenGroups(adapterGroups),
+        [adapterGroups]
+    )
+
+    const itemTokens = useMemo(() => getMenuItemTokens(tokens), [tokens])
+
+    const handleItemPress = useCallback(
+        (item: unknown) => {
+            const menuItem = item as { onClick?: () => void }
+            menuItem?.onClick?.()
+            if (closeOnSelect) {
+                dropdown.setOpen(false)
+            }
+        },
+        [closeOnSelect, dropdown]
+    )
+
+    // Reset search when the menu closes
+    React.useEffect(() => {
+        if (!dropdown.open) setSearchText('')
+    }, [dropdown.open])
+
+    const triggerElement = React.cloneElement(trigger, {
+        ref: dropdown.anchorRef,
+        onPress: dropdown.handleOpen,
+    } as React.Attributes)
+
+    const content = (
+        <>
+            {enableSearch ? (
+                <Block paddingBottom={8} paddingLeft={8} paddingRight={8}>
+                    <DropdownSearch
+                        value={searchText}
+                        onChange={setSearchText}
+                        placeholder={searchPlaceholder}
+                        testID={testID}
+                    />
+                </Block>
+            ) : null}
+            <DropdownList
+                rows={flatRows}
+                itemTokens={itemTokens}
+                separatorColor={String(tokens.separator.color)}
+                separatorHeight={tokens.separator.height}
+                separatorMargin={tokens.separator.marginTop}
+                labelColor={String(tokens.group.label.color)}
+                labelFontSize={tokens.group.label.fontSize ?? 14}
+                labelFontWeight={tokens.group.label.fontWeight ?? '500'}
+                labelPaddingTop={tokens.group.label.paddingTop}
+                labelPaddingBottom={tokens.group.label.paddingBottom}
+                labelPaddingHorizontal={tokens.group.label.paddingLeft}
+                onItemPress={handleItemPress}
+                enableVirtualization={enableVirtualization}
+                testID={testID ? `${testID}-list` : undefined}
+            />
+            {menuFooter ? <Block paddingTop={4}>{menuFooter}</Block> : null}
+        </>
+    )
+
+    if (dropdown.shouldUseSheet) {
+        return (
+            <View ref={ref} testID={testID}>
+                {triggerElement}
+                <BottomSheet
+                    open={dropdown.open}
+                    onClose={() => dropdown.setOpen(false)}
+                    backgroundColor={contentTokens.backgroundColor}
+                    topRadius={16}
+                    accessibilityLabel={accessibilityLabel ?? 'Menu'}
+                    testID={testID ? `${testID}-sheet` : undefined}
+                >
+                    <Block
+                        paddingTop={contentTokens.paddingTop}
+                        paddingRight={contentTokens.paddingRight}
+                        paddingBottom={contentTokens.paddingBottom}
+                        paddingLeft={contentTokens.paddingLeft}
+                    >
+                        {content}
+                    </Block>
+                </BottomSheet>
+            </View>
+        )
+    }
+
+    return (
+        <View ref={ref} testID={testID}>
+            {triggerElement}
+            <DropdownContent
+                open={dropdown.open}
+                onClose={() => dropdown.setOpen(false)}
+                position={dropdown.position}
+                onContentLayout={dropdown.onContentLayout}
+                tokens={contentTokens}
+                accessibilityLabel={accessibilityLabel ?? 'Menu'}
+                testID={testID ? `${testID}-content` : undefined}
+            >
+                {content}
+            </DropdownContent>
+        </View>
+    )
+})
+
+export default memo(Menu)
+Menu.displayName = 'Menu'

package/src/components/Menu/index.ts

@@ -0,0 +1,10 @@
+export { default as Menu } from './Menu'
+export type { MenuNativeProps, MenuRef } from './menu.types'
+export type {
+    MenuItemType,
+    MenuGroupType,
+    MenuV2Alignment,
+    MenuV2Side,
+    MenuV2ItemVariant,
+    MenuV2ItemActionType,
+} from './menu.types'

package/src/components/Menu/menu.types.ts

@@ -0,0 +1,60 @@
+import type { ReactElement, ReactNode } from 'react'
+import type { View as RNView } from 'react-native'
+import type {
+    MenuV2Alignment,
+    MenuV2Side,
+    MenuV2ItemType,
+    MenuV2GroupType,
+    MenuV2ItemVariant,
+    MenuV2ItemActionType,
+} from '@juspay/blend-design-system/node'
+
+/**
+ * Menu — React Native implementation of web's `MenuV2`.
+ *
+ * Selection is fully controlled per-item (`item.selected`); Menu manages no
+ * selection state internally. Sub-menus render trailing chevrons and open
+ * a nested panel positioned to the right of the item row.
+ */
+export type MenuNativeProps = {
+    /** The element that opens the menu when pressed. */
+    trigger: ReactElement
+    /** Grouped items to render in the menu. */
+    items?: MenuV2GroupType[]
+    /** Whether the menu is open (controlled). */
+    open?: boolean
+    /** Called when the open state changes. */
+    onOpenChange?: (open: boolean) => void
+    /** Close the menu after an item is selected. Defaults to `true`. */
+    closeOnSelect?: boolean
+    /** Enable search filtering. */
+    enableSearch?: boolean
+    /** Placeholder for the search input. */
+    searchPlaceholder?: string
+    /** Alignment of the dropdown relative to the trigger. */
+    alignment?: MenuV2Alignment
+    /** Side of the trigger the dropdown appears on. */
+    side?: MenuV2Side
+    /** Gap between trigger and dropdown, in points. */
+    sideOffset?: number
+    /** Use a bottom sheet on small screens instead of a floating panel. */
+    usePanelOnMobile?: boolean
+    /** Enable virtualization for long lists. */
+    enableVirtualization?: boolean
+    /** Extra content rendered below the item list. */
+    menuFooter?: ReactNode
+    testID?: string
+    accessibilityLabel?: string
+    style?: import('react-native').StyleProp<import('react-native').ViewStyle>
+}
+
+export type { MenuV2ItemType as MenuItemType }
+export type { MenuV2GroupType as MenuGroupType }
+export type {
+    MenuV2Alignment,
+    MenuV2Side,
+    MenuV2ItemVariant,
+    MenuV2ItemActionType,
+}
+
+export type MenuRef = RNView