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

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,178 @@
+import { Pressable, View } from 'react-native'
+import {
+    PopoverV2Align,
+    PopoverV2Side,
+    PopoverV2Size,
+} from '@juspay/blend-design-system/node'
+import type { PopoverV2TokenType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { useNativeBreakpoint } from '../../theme/useNativeBreakpoint'
+import { useControllableState } from '../../hooks/useControllableState'
+import { AnchoredOverlay } from '../../overlay/anchored/AnchoredOverlay'
+import { BottomSheet } from '../../overlay/sheet/BottomSheet'
+import { parseDimension } from '../../adapters/cssStringAdapter'
+import { PopoverHeader } from './PopoverHeader'
+import { PopoverFooter } from './PopoverFooter'
+import type { PopoverNativeProps } from './popover.types'
+
+/**
+ * Popover — the native port of web's `PopoverV2`.
+ *
+ * Phones (`sm`) present a bottom sheet, exactly what web's
+ * `useDrawerOnMobile` does with the V1 Drawer; tablets (`lg`) get an
+ * anchored surface via `AnchoredOverlay`. Chrome comes from POPOVERV2
+ * tokens. Web's `border` token holds `"8px"` — an invalid CSS shorthand
+ * browsers silently drop — so no border is drawn (flagged upstream).
+ */
+export function Popover({
+    trigger,
+    children,
+    heading,
+    description,
+    showCloseButton = true,
+    open,
+    onOpenChange,
+    onClose,
+    side = PopoverV2Side.BOTTOM,
+    align = PopoverV2Align.CENTER,
+    sideOffset = 8,
+    size = PopoverV2Size.MD,
+    primaryAction,
+    secondaryAction,
+    maxHeightFraction,
+    width,
+    minWidth = 300,
+    maxWidth = 400,
+    height,
+    minHeight,
+    maxHeight,
+    testID,
+    style,
+}: PopoverNativeProps) {
+    const tokens = useNativeTokens<PopoverV2TokenType>('POPOVERV2')
+    const breakpoint = useNativeBreakpoint()
+    const [isOpen, setOpen] = useControllableState<boolean>(
+        open,
+        false,
+        onOpenChange
+    )
+
+    const close = () => {
+        setOpen(false)
+        onClose?.()
+    }
+
+    const gap = parseDimension(tokens.gap[size] as string | number) ?? 12
+    const padding = {
+        paddingTop:
+            parseDimension(tokens.padding.top[size] as string | number) ?? 12,
+        paddingBottom:
+            parseDimension(tokens.padding.bottom[size] as string | number) ??
+            16,
+        paddingLeft:
+            parseDimension(tokens.padding.left[size] as string | number) ?? 16,
+        paddingRight:
+            parseDimension(tokens.padding.right[size] as string | number) ?? 16,
+    }
+
+    const header = (
+        <PopoverHeader
+            heading={heading}
+            description={description}
+            showCloseButton={showCloseButton}
+            onClose={close}
+            size={size}
+            tokens={tokens}
+            testID={testID ? `${testID}-header` : undefined}
+        />
+    )
+    const footer = (
+        <PopoverFooter
+            primaryAction={primaryAction}
+            secondaryAction={secondaryAction}
+            size={size}
+            tokens={tokens}
+            testID={testID ? `${testID}-footer` : undefined}
+        />
+    )
+
+    if (breakpoint === 'sm') {
+        return (
+            <>
+                <Pressable
+                    onPress={() => setOpen(true)}
+                    testID={testID ? `${testID}-trigger` : undefined}
+                >
+                    {trigger}
+                </Pressable>
+                <BottomSheet
+                    open={isOpen}
+                    onClose={close}
+                    backgroundColor={String(tokens.background ?? '#FFFFFF')}
+                    topRadius={
+                        parseDimension(
+                            tokens.borderRadius[size] as string | number
+                        ) ?? 8
+                    }
+                    maxHeightFraction={maxHeightFraction}
+                    accessibilityLabel={heading}
+                    testID={testID}
+                >
+                    <View style={[padding, { gap }, style]}>
+                        {header}
+                        {children}
+                        {footer}
+                    </View>
+                </BottomSheet>
+            </>
+        )
+    }
+
+    return (
+        <AnchoredOverlay
+            open={isOpen}
+            onRequestClose={close}
+            placement={side}
+            alignment={align}
+            offset={sideOffset}
+            backdrop="transparent"
+            modal
+            accessibilityLabel={heading}
+            testID={testID}
+            trigger={
+                <Pressable
+                    onPress={() => setOpen(true)}
+                    testID={testID ? `${testID}-trigger` : undefined}
+                >
+                    {trigger}
+                </Pressable>
+            }
+            contentStyle={[
+                {
+                    backgroundColor: String(tokens.background ?? '#FFFFFF'),
+                    borderRadius:
+                        parseDimension(
+                            tokens.borderRadius[size] as string | number
+                        ) ?? 8,
+                    ...padding,
+                    gap,
+                    width,
+                    minWidth,
+                    maxWidth,
+                    height,
+                    minHeight,
+                    maxHeight,
+                },
+                style,
+            ]}
+        >
+            {header}
+            {children}
+            {footer}
+        </AnchoredOverlay>
+    )
+}
+
+Popover.displayName = 'Popover'
+
+export default Popover

package/src/components/Popover/PopoverFooter.tsx

@@ -0,0 +1,68 @@
+import { View } from 'react-native'
+import {
+    ButtonV2Size,
+    ButtonV2Type,
+    PopoverV2Size,
+} from '@juspay/blend-design-system/node'
+import type { PopoverV2TokenType } from '@juspay/blend-design-system/node'
+import { parseDimension } from '../../adapters/cssStringAdapter'
+import { Button } from '../Button'
+import type { PopoverAction } from './popover.types'
+
+/** Secondary/primary action row — the Alert pattern, rendered with Button. */
+export function PopoverFooter({
+    primaryAction,
+    secondaryAction,
+    size,
+    tokens,
+    testID,
+}: {
+    primaryAction?: PopoverAction
+    secondaryAction?: PopoverAction
+    size: PopoverV2Size
+    tokens: PopoverV2TokenType
+    testID?: string
+}) {
+    if (!primaryAction && !secondaryAction) return null
+
+    return (
+        <View
+            style={{
+                flexDirection: 'row',
+                justifyContent: 'flex-end',
+                gap:
+                    parseDimension(
+                        tokens.bottomContainer.gap[size] as string | number
+                    ) ?? 12,
+            }}
+            testID={testID}
+        >
+            {secondaryAction ? (
+                <Button
+                    text={secondaryAction.text}
+                    buttonType={ButtonV2Type.SECONDARY}
+                    size={ButtonV2Size.SMALL}
+                    onPress={secondaryAction.onPress}
+                    disabled={secondaryAction.disabled}
+                    loading={secondaryAction.loading}
+                    accessibilityLabel={secondaryAction.accessibilityLabel}
+                    testID={testID ? `${testID}-secondary` : undefined}
+                />
+            ) : null}
+            {primaryAction ? (
+                <Button
+                    text={primaryAction.text}
+                    buttonType={ButtonV2Type.PRIMARY}
+                    size={ButtonV2Size.SMALL}
+                    onPress={primaryAction.onPress}
+                    disabled={primaryAction.disabled}
+                    loading={primaryAction.loading}
+                    accessibilityLabel={primaryAction.accessibilityLabel}
+                    testID={testID ? `${testID}-primary` : undefined}
+                />
+            ) : null}
+        </View>
+    )
+}
+
+export default PopoverFooter

package/src/components/Popover/PopoverHeader.tsx

@@ -0,0 +1,102 @@
+import { Pressable, View } from 'react-native'
+import { X } from 'lucide-react-native'
+import { PopoverV2Size } from '@juspay/blend-design-system/node'
+import type { PopoverV2TokenType } from '@juspay/blend-design-system/node'
+import { parseDimension } from '../../adapters/cssStringAdapter'
+import Text from '../../primitives/Text'
+
+/**
+ * Heading/description block with the optional close button — shared by the
+ * sheet and anchored presentations. Renders nothing when there is nothing
+ * to show.
+ */
+export function PopoverHeader({
+    heading,
+    description,
+    showCloseButton,
+    onClose,
+    size,
+    tokens,
+    testID,
+}: {
+    heading?: string
+    description?: string
+    showCloseButton: boolean
+    onClose: () => void
+    size: PopoverV2Size
+    tokens: PopoverV2TokenType
+    testID?: string
+}) {
+    if (!heading && !description && !showCloseButton) return null
+    const top = tokens.TopContainer
+
+    return (
+        <View
+            style={{
+                flexDirection: 'row',
+                alignItems: 'flex-start',
+                gap: 8,
+            }}
+            testID={testID}
+        >
+            <View
+                style={{
+                    flex: 1,
+                    gap: parseDimension(top.gap[size] as string | number) ?? 8,
+                }}
+            >
+                {heading ? (
+                    <Text
+                        color={String(top.heading.color ?? '#181B25')}
+                        fontSize={top.heading.fontSize[size] as string | number}
+                        fontWeight={
+                            top.heading.fontWeight[size] as string | number
+                        }
+                        lineHeight={
+                            top.heading.lineHeight[size] as string | number
+                        }
+                        accessibilityRole="header"
+                    >
+                        {heading}
+                    </Text>
+                ) : null}
+                {description ? (
+                    <Text
+                        color={String(top.description.color ?? '#717784')}
+                        fontSize={
+                            top.description.fontSize[size] as string | number
+                        }
+                        fontWeight={
+                            top.description.fontWeight[size] as string | number
+                        }
+                        lineHeight={
+                            top.description.lineHeight[size] as string | number
+                        }
+                    >
+                        {description}
+                    </Text>
+                ) : null}
+            </View>
+            {showCloseButton ? (
+                <Pressable
+                    onPress={onClose}
+                    accessibilityRole="button"
+                    accessibilityLabel="Close"
+                    hitSlop={8}
+                    testID={testID ? `${testID}-close` : undefined}
+                >
+                    <X
+                        size={
+                            parseDimension(
+                                top.heading.IconSize[size] as string | number
+                            ) ?? 18
+                        }
+                        color={String(top.description.color ?? '#717784')}
+                    />
+                </Pressable>
+            ) : null}
+        </View>
+    )
+}
+
+export default PopoverHeader

package/src/components/Popover/index.ts

@@ -0,0 +1,2 @@
+export { default as Popover } from './Popover'
+export type { PopoverNativeProps, PopoverAction } from './popover.types'

package/src/components/Popover/popover.types.ts

@@ -0,0 +1,56 @@
+import type React from 'react'
+import type { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native'
+import type { PopoverBaseProps } from '@juspay/blend-design-system/node'
+
+/**
+ * A footer action — the Alert pattern. Web types these as V1 `ButtonProps`
+ * (DOM-bound); native takes the plain fields and renders its own `Button`.
+ */
+export type PopoverAction = {
+    text: string
+    onPress?: (event: GestureResponderEvent) => void
+    disabled?: boolean
+    loading?: boolean
+    accessibilityLabel?: string
+}
+
+/**
+ * Props for the native `Popover` — the port of web's `PopoverV2`.
+ *
+ * Derives from `PopoverBaseProps`. Presentation follows the breakpoint:
+ * phones (`sm`) get a bottom sheet — web's `useDrawerOnMobile` behaviour,
+ * with the prop itself omitted since the breakpoint decides — and tablets
+ * (`lg`) get an anchored surface.
+ *
+ * Deliberately omitted rather than accepted-and-ignored (compile errors):
+ *
+ * - `alignOffset` — the positioning engine aligns and clamps; a fixed
+ *   cross-axis nudge has no place to act once clamping runs.
+ * - `asModal` — the anchored surface always captures outside taps.
+ * - `shadow` — elevation is a token concern, not a prop.
+ * - `avoidCollisions` — the engine always flips and clamps.
+ * - `skeleton` — deferred Wave-C-wide with the loading-state policy.
+ * - The DOM attribute spread.
+ *
+ * `width`/`minWidth`/`maxWidth`/`height`/`minHeight`/`maxHeight` are
+ * numbers and apply to the anchored (`lg`) surface only; the sheet sizes
+ * itself, capped by `maxHeightFraction`.
+ */
+export type PopoverNativeProps = Omit<PopoverBaseProps, 'alignOffset'> & {
+    /** The anchor. Press opens the popover. */
+    trigger: React.ReactNode
+    children?: React.ReactNode
+    primaryAction?: PopoverAction
+    secondaryAction?: PopoverAction
+    /** Sheet-mode height cap as a window fraction. Default 0.9. */
+    maxHeightFraction?: number
+    width?: number
+    minWidth?: number
+    maxWidth?: number
+    height?: number
+    minHeight?: number
+    maxHeight?: number
+    testID?: string
+    /** Styles the popover surface (both presentations). */
+    style?: StyleProp<ViewStyle>
+}