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

package/src/components/Badge/badge.utils.ts

@@ -0,0 +1,178 @@
+import type {
+    BadgePosition,
+    BadgeSize,
+    BadgeTokensType,
+} from '@juspay/blend-design-system/node'
+import { parseDimension } from '../../adapters/cssStringAdapter'
+
+/**
+ * Edge insets for the absolutely-positioned badge over its `children`.
+ *
+ * This is the native equivalent of web's `getPositionStyles`, and the
+ * documented divergence: web hangs the badge half its own size past the
+ * corner with CSS `transform: translate(±50%, ±50%)`. RN cannot translate
+ * by a percentage of the element's own size, so the same overhang is
+ * computed up front as a **negative inset** — the badge's rendered
+ * half-extent subtracted from the token offset, applied to the two edges
+ * of the chosen corner. The visual result (badge center sitting
+ * `offset` points inside the corner) matches web.
+ */
+export type BadgePositionInsets = {
+    top?: number
+    right?: number
+    bottom?: number
+    left?: number
+}
+
+export type ResolvePositionInsetsOptions = {
+    /** `[x, y]` shift from the corner, in points. */
+    customOffset?: [number, number]
+    /** Pill (count/text) vs dot — picks which token sizes apply. */
+    hasContent?: boolean
+    /** Position on a circular child's 45° circumference, web parity. */
+    isCircular?: boolean
+    /**
+     * Size of the wrapped child, for `isCircular` — web's `14%` inset is a
+     * percentage of the containing block, which native can only compute
+     * once the wrapper has laid out.
+     */
+    parentSize?: { width: number; height: number }
+}
+
+/**
+ * Web's circular inset: `(100% - 70.71%) / 2`, the offset along each axis
+ * that places the badge on the 45° circumference of a circle.
+ */
+const CIRCULAR_INSET_RATIO = 0.14
+
+export function resolvePositionInsets(
+    position: BadgePosition,
+    size: BadgeSize,
+    tokens: BadgeTokensType,
+    {
+        customOffset,
+        hasContent = false,
+        isCircular = false,
+        parentSize,
+    }: ResolvePositionInsetsOptions = {}
+): BadgePositionInsets {
+    // Half the badge's rendered extent. A dot is square; a pill's width
+    // depends on its text, which is not knowable without measuring, so the
+    // pill height stands in as the conservative half-extent on both axes.
+    const direction = directionFor(position)
+    const badgeExtent = hasContent
+        ? parseDimension(tokens.pill.height[size] as string | number)
+        : parseDimension(tokens.dot.width[size] as string | number)
+    const half = (badgeExtent ?? 0) / 2
+
+    // Web's circular branch uses `translate(..., -0.5*W)` — a centered
+    // coordinate, not an inset from the edge. With the wrapper's measured
+    // size we place the badge's circumference point exactly. Without it the
+    // badge falls back to the corner, `-half` outside it (first frame only).
+    if (isCircular) {
+        if (parentSize) {
+            // The offset always moves the badge outward (away from the
+            // child's center), which decreases whichever inset it's applied
+            // to — independent of which corner. Web parity.
+            const horizontal =
+                parentSize.width * CIRCULAR_INSET_RATIO -
+                Math.abs(customOffset?.[0] ?? 0) -
+                half
+            const vertical =
+                parentSize.height * CIRCULAR_INSET_RATIO -
+                Math.abs(customOffset?.[1] ?? 0) -
+                half
+            return direction.apply(vertical, horizontal)
+        }
+        return direction.apply(-half, -half)
+    }
+
+    // Web: a dot defaults to no offset, a pill to the token offset; a
+    // custom offset replaces both components. Then the `translate(±50%)`
+    // overhang converts to `-half` on the chosen corner's inset.
+    const tokenOffset = parseDimension(
+        tokens.position.offset[size] as string | number
+    )
+    const xBase = customOffset
+        ? customOffset[0]
+        : hasContent
+          ? (tokenOffset ?? 0)
+          : 0
+    const yBase = customOffset
+        ? customOffset[1]
+        : hasContent
+          ? (tokenOffset ?? 0)
+          : 0
+    return direction.apply(yBase - half, xBase - half)
+}
+
+/**
+ * Per-corner direction: how the vertical/horizontal values land on the
+ * inset keys for the chosen corner.
+ */
+function directionFor(position: BadgePosition): {
+    apply: (vertical: number, horizontal: number) => BadgePositionInsets
+} {
+    switch (position) {
+        case 'top-right':
+            return {
+                apply: (vertical, horizontal) => ({
+                    top: vertical,
+                    right: horizontal,
+                }),
+            }
+        case 'top-left':
+            return {
+                apply: (vertical, horizontal) => ({
+                    top: vertical,
+                    left: horizontal,
+                }),
+            }
+        case 'bottom-right':
+            return {
+                apply: (vertical, horizontal) => ({
+                    bottom: vertical,
+                    right: horizontal,
+                }),
+            }
+        case 'bottom-left':
+            return {
+                apply: (vertical, horizontal) => ({
+                    bottom: vertical,
+                    left: horizontal,
+                }),
+            }
+    }
+}
+
+/**
+ * Format the count to display, handling max overflow. Ported verbatim from
+ * web's `badge.utils.ts` — pure, no DOM.
+ */
+export const formatCount = (count: number, maxCount: number = 99): string => {
+    if (count > maxCount) {
+        return `${maxCount}+`
+    }
+    return count.toString()
+}
+
+/**
+ * Accessible label for the badge. Ported verbatim from web's
+ * `getAccessibleLabel`.
+ */
+export const getBadgeAccessibleLabel = (
+    count: number | undefined,
+    text: string | undefined,
+    maxCount: number,
+    showBadge: boolean
+): string | undefined => {
+    if (!showBadge) return undefined
+    if (text) return text
+    if (count !== undefined) {
+        if (count > maxCount) {
+            return `More than ${maxCount}`
+        }
+        return count.toString()
+    }
+    return 'Notification'
+}

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge'
+export type { BadgeNativeProps } from './badge.types'

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,310 @@
+import { forwardRef, useMemo, useState } from 'react'
+import { Pressable, ScrollView, View } from 'react-native'
+import type { ScrollView as RNScrollView } from 'react-native'
+import { Ellipsis } from 'lucide-react-native'
+import type { BreadcrumbV2TokensType } from '@juspay/blend-design-system/node'
+import { useNativeTokens } from '../../theme/useNativeTokens'
+import { parseDimension } from '../../adapters/cssStringAdapter'
+import Text from '../../primitives/Text'
+import Slot from '../../primitives/Slot'
+import { Menu } from '../Menu'
+import type { MenuGroupType } from '../Menu'
+import {
+    breadcrumbItemKey,
+    computeBreadcrumbOverflowLayout,
+    isCurrentCrumb,
+} from './breadcrumb.utils'
+import type {
+    BreadcrumbNativeItemType,
+    BreadcrumbNativeProps,
+} from './breadcrumb.types'
+
+/**
+ * One crumb: slots + label. The current page renders as plain text (web
+ * swaps the anchor for a `span` + `aria-current="page"`); RN's closest
+ * mapping is a `text` role carrying `selected` state. Every other crumb is
+ * a `link`-role pressable (the `LinkButton` convention).
+ */
+function Crumb({
+    item,
+    active,
+    tokens,
+    testID,
+}: {
+    item: BreadcrumbNativeItemType
+    active: boolean
+    tokens: BreadcrumbV2TokensType
+    testID?: string
+}) {
+    const [pressed, setPressed] = useState(false)
+    const color = active
+        ? tokens.item.text.color.active
+        : pressed
+          ? tokens.item.text.color.hover
+          : tokens.item.text.color.default
+    const resolvedColor = String(color)
+
+    const label = (
+        <Text
+            fontSize={tokens.item.text.fontSize as string | number}
+            fontWeight={tokens.item.text.fontWeight as string | number}
+            color={resolvedColor}
+            numberOfLines={1}
+        >
+            {item.label}
+        </Text>
+    )
+
+    const slots = (
+        <>
+            {item.leftSlot ? (
+                <Slot maxHeight={16} color={resolvedColor}>
+                    {item.leftSlot}
+                </Slot>
+            ) : null}
+            {label}
+            {item.rightSlot ? (
+                <Slot maxHeight={16} color={resolvedColor}>
+                    {item.rightSlot}
+                </Slot>
+            ) : null}
+        </>
+    )
+
+    if (active) {
+        return (
+            <View
+                style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: parseDimension(tokens.item.gap as string | number),
+                    paddingHorizontal: parseDimension(
+                        // The token padding is "Py Px"; horizontal is the
+                        // second value.
+                        String(tokens.item.padding).split(/\s+/)[1]
+                    ),
+                }}
+                testID={testID}
+            >
+                {slots}
+            </View>
+        )
+    }
+
+    return (
+        <Pressable
+            onPress={item.onPress}
+            onPressIn={() => setPressed(true)}
+            onPressOut={() => setPressed(false)}
+            accessibilityRole="link"
+            accessibilityLabel={`Navigate to ${item.label}`}
+            style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: parseDimension(tokens.item.gap as string | number),
+                paddingHorizontal: parseDimension(
+                    String(tokens.item.padding).split(/\s+/)[1]
+                ),
+            }}
+            testID={testID}
+        >
+            {slots}
+        </Pressable>
+    )
+}
+
+/** Decorative separator, hidden from assistive tech like web's `aria-hidden`. */
+function BreadcrumbSeparator({
+    children,
+    color,
+}: {
+    children?: React.ReactNode
+    color: string
+}) {
+    return (
+        <View
+            accessible={false}
+            accessibilityElementsHidden
+            importantForAccessibility="no-hide-descendants"
+        >
+            <Text color={color}>{children ?? '/'}</Text>
+        </View>
+    )
+}
+
+/**
+ * Breadcrumb — the native port of web's `BreadcrumbV2`.
+ *
+ * A horizontally scrollable row of crumbs with web's overflow policy: beyond
+ * `maxItems`, the trail collapses to first crumb + ellipsis + up to three
+ * trailing segments, with the hidden crumbs in an overflow `Menu` — unless
+ * that would leave fewer than `minVisibleItems` crumbs visible. The current
+ * page (last entry, or `isActive`) renders as text, everything else as a
+ * link-role pressable.
+ */
+const Breadcrumb = forwardRef<RNScrollView, BreadcrumbNativeProps>(
+    function Breadcrumb(
+        {
+            items = [],
+            maxItems = 4,
+            minVisibleItems,
+            separator,
+            accessibilityLabel = 'Breadcrumb navigation',
+            testID,
+            style,
+        },
+        ref
+    ) {
+        const tokens = useNativeTokens<BreadcrumbV2TokensType>('BREADCRUMBV2')
+
+        const layout = useMemo(
+            () =>
+                computeBreadcrumbOverflowLayout(
+                    items,
+                    maxItems,
+                    minVisibleItems
+                ),
+            [items, maxItems, minVisibleItems]
+        )
+
+        const total = items.length
+        const separatorColor = String(tokens.separator.color)
+
+        const overflowGroups: MenuGroupType[] = useMemo(() => {
+            if (!layout.shouldShowMenu || layout.menuItems.length === 0) {
+                return []
+            }
+            return [
+                {
+                    id: 'breadcrumb-overflow',
+                    items: layout.menuItems.map((item, i) => ({
+                        id: breadcrumbItemKey(item, i + 1),
+                        label: {
+                            text: item.label,
+                            // Menu's label slot is typed ReactElement,
+                            // narrower than the crumb's ReactNode.
+                            leftSlot: item.leftSlot as
+                                | React.ReactElement
+                                | undefined,
+                        },
+                        onClick: item.onPress,
+                    })),
+                },
+            ]
+        }, [layout.shouldShowMenu, layout.menuItems])
+
+        if (total === 0) return null
+
+        const renderCrumb = (
+            item: BreadcrumbNativeItemType,
+            index: number,
+            key: string
+        ) => {
+            const active = isCurrentCrumb(index, total, item.isActive)
+            return (
+                <View
+                    key={key}
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: parseDimension(tokens.gap as string | number),
+                    }}
+                >
+                    <Crumb
+                        item={item}
+                        active={active}
+                        tokens={tokens}
+                        testID={testID ? `${testID}-item-${index}` : undefined}
+                    />
+                    {!active ? (
+                        <BreadcrumbSeparator color={separatorColor}>
+                            {separator}
+                        </BreadcrumbSeparator>
+                    ) : null}
+                </View>
+            )
+        }
+
+        return (
+            <ScrollView
+                ref={ref}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                accessibilityRole="list"
+                accessibilityLabel={accessibilityLabel}
+                contentContainerStyle={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: parseDimension(tokens.gap as string | number),
+                }}
+                style={style}
+                testID={testID}
+            >
+                {layout.base
+                    ? renderCrumb(
+                          layout.base,
+                          0,
+                          breadcrumbItemKey(layout.base, 0)
+                      )
+                    : null}
+
+                {layout.shouldShowMenu && overflowGroups[0] ? (
+                    <View
+                        style={{
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            gap: parseDimension(tokens.gap as string | number),
+                        }}
+                    >
+                        <Menu
+                            trigger={
+                                <Pressable
+                                    accessibilityRole="button"
+                                    accessibilityLabel="Show hidden breadcrumb items"
+                                    hitSlop={8}
+                                    style={{
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                    }}
+                                    testID={
+                                        testID
+                                            ? `${testID}-overflow-trigger`
+                                            : undefined
+                                    }
+                                >
+                                    <Ellipsis
+                                        size={tokens.ellipsis.size}
+                                        color={String(tokens.ellipsis.color)}
+                                    />
+                                </Pressable>
+                            }
+                            items={overflowGroups}
+                            testID={testID ? `${testID}-overflow` : undefined}
+                        />
+                        {layout.rest.length > 0 ? (
+                            <BreadcrumbSeparator color={separatorColor}>
+                                {separator}
+                            </BreadcrumbSeparator>
+                        ) : null}
+                    </View>
+                ) : null}
+
+                {layout.rest.map((item, i) => {
+                    // `rest` is the trailing slice of the full list — index
+                    // it back into the original positions so `isCurrentCrumb`
+                    // still sees the true last entry.
+                    const index = total - layout.rest.length + i
+                    return renderCrumb(
+                        item,
+                        index,
+                        breadcrumbItemKey(item, index)
+                    )
+                })}
+            </ScrollView>
+        )
+    }
+)
+
+Breadcrumb.displayName = 'Breadcrumb'
+
+export default Breadcrumb

package/src/components/Breadcrumb/breadcrumb.types.ts

@@ -0,0 +1,64 @@
+import type React from 'react'
+import type { StyleProp, ViewStyle } from 'react-native'
+import type { BreadcrumbBaseItemType } from '@juspay/blend-design-system/node'
+
+/**
+ * The native crumb — web's `BreadcrumbV2ItemType` with the platform pieces
+ * swapped:
+ *
+ * - `href` is omitted — RN apps own navigation; wire it through `onPress`
+ *   (the `LinkButton` precedent: `onPress`-only, navigation is the app's
+ *   job).
+ * - DOM `onClick` becomes `onPress` (no anchor, no MouseEvent shape).
+ * - `isActive` is additive, mirroring web's compound `Item` prop, for
+ *   callers whose "current page" is not the last entry.
+ *
+ * Everything else ports as-is, so a native item remains structurally
+ * assignable to the node-exported `BreadcrumbBaseItemType`.
+ */
+export type BreadcrumbNativeItemType = BreadcrumbBaseItemType & {
+    onPress?: () => void
+    /** Overrides the "last entry is current" default. */
+    isActive?: boolean
+}
+
+/**
+ * Props for the native `Breadcrumb` — the port of web's `BreadcrumbV2`.
+ *
+ * Web offers two APIs (the `items` array, or the `Item`/`Icon`/`Page`/
+ * `Separator` compound children); native takes the array alone — the
+ * compound statics are a DOM-API convenience with no RN counterpart.
+ * Overflow collapses to first crumb + ellipsis (a native `Menu`) +
+ * trailing segment(s). `maxItems` and `minVisibleItems` together control
+ * whether and how the trail truncates.
+ */
+export type BreadcrumbNativeProps = {
+    /** Flat crumb list, first-to-last; the last entry is the current page. */
+    items?: BreadcrumbNativeItemType[]
+    /**
+     * When the number of items is **greater than** this value, the bar
+     * collapses to first crumb + ellipsis + trailing segment(s). At least
+     * one trailing segment stays visible when overflow is active (so the
+     * current page is not menu-only). Use a finite integer ≥ 1; values
+     * below 1 or non-finite values disable overflow (all crumbs inline).
+     * Defaults to 4, like web.
+     */
+    maxItems?: number
+    /**
+     * A floor on how many crumbs must **remain visible** after a collapse.
+     * If collapsing would leave fewer than this many crumbs on the trail,
+     * the bar stays inline instead. Defaults to 1 (web parity — collapse
+     * is gated only by `maxItems`). Pass your `maxItems` value to mean
+     * "the collapsed trail must always earn its slots": this suppresses
+     * web's aggressive shapes, e.g. `maxItems: 2` collapsing 6 crumbs to
+     * just `Home … Current page` (2 visible, fewer than the 2 you asked
+     * for plus no more), or a single-crumb trail at `maxItems: 1`.
+     */
+    minVisibleItems?: number
+    /** Replaces "/" as the crumb separator. */
+    separator?: React.ReactNode
+    /** Announced by screen readers for the whole bar. */
+    accessibilityLabel?: string
+    testID?: string
+    style?: StyleProp<ViewStyle>
+}

package/src/components/Breadcrumb/breadcrumb.utils.ts

@@ -0,0 +1,117 @@
+import type { BreadcrumbNativeItemType } from './breadcrumb.types'
+
+/**
+ * Overflow arithmetic, adapted from web's
+ * `BreadcrumbV2/utils.ts#computeBreadcrumbOverflowLayout` — but over the
+ * plain item model instead of React elements, so it is testable with no
+ * React runtime.
+ *
+ * The collapse trigger and the tail arithmetic are web-parity by default:
+ * collapse when `items.length > maxItems`, and the tail keeps `maxItems - 1`
+ * crumbs after the ellipsis. `minVisibleItems` (default 1) is a floor on
+ * how many crumbs must REMAIN VISIBLE after a collapse: if collapsing
+ * would leave fewer than `minVisibleItems` crumbs on the trail, stay
+ * inline instead. Pass 3 (or your `maxItems` value) to mean "the trail
+ * must always earn its `maxItems` slots" — this suppresses web's two
+ * degenerate shapes:
+ *   - `maxItems: 2` collapsing to just 2 visible crumbs (`Home … Last`)
+ *     — fewer than you asked for;
+ *   - an ellipsis hiding a single crumb where the "collapsed" trail is
+ *     no shorter than the plain one.
+ * (The one shape it cannot change is `maxItems: 1` — the current page is
+ * never menu-only, so a single-crumb trail is legal by definition there.)
+ */
+export function computeBreadcrumbOverflowLayout(
+    items: BreadcrumbNativeItemType[],
+    maxItems: number,
+    minVisibleItems = 1
+): {
+    shouldShowMenu: boolean
+    base: BreadcrumbNativeItemType | undefined
+    rest: BreadcrumbNativeItemType[]
+    menuItems: BreadcrumbNativeItemType[]
+} {
+    const base = items[0]
+
+    if (items.length === 0 || !Number.isFinite(maxItems) || maxItems < 1) {
+        return {
+            shouldShowMenu: false,
+            base,
+            rest: items.slice(1),
+            menuItems: [],
+        }
+    }
+
+    const limit = Math.floor(maxItems)
+
+    if (items.length <= limit) {
+        return {
+            shouldShowMenu: false,
+            base,
+            rest: items.slice(1),
+            menuItems: [],
+        }
+    }
+
+    // Collapsed shape (web parity): first crumb + up to three trailing
+    // crumbs. The tail shares the visible budget with the first crumb, but
+    // always reserves at least one slot so the current page never becomes
+    // menu-only.
+    const desiredTailSize = 3
+    // First crumb + tail share the visible "budget" (limit). `limit - 1` would be 0 when
+    // maxItems is 1; still reserve at least one tail slot so the current/last segment stays
+    // on the trail and is not only reachable via the overflow menu.
+    const maxTailSlots = Math.max(1, limit - 1)
+    const tailCount = Math.min(desiredTailSize, items.length - 1, maxTailSlots)
+    // The collapsed trail is first crumb + tail. If that is fewer crumbs
+    // than `minVisibleItems`, collapsing would leave a fainter trail than
+    // the caller is willing to accept — stay inline instead.
+    const visibleAfterCollapse = 1 + tailCount
+    if (visibleAfterCollapse < Math.floor(minVisibleItems)) {
+        return {
+            shouldShowMenu: false,
+            base,
+            rest: items.slice(1),
+            menuItems: [],
+        }
+    }
+    const rest = items.slice(-tailCount)
+    const menuItems = items.slice(1, items.length - tailCount)
+
+    return { shouldShowMenu: true, base, rest, menuItems }
+}
+
+/**
+ * A crumb key for React lists — same rule as web's
+ * `item.id ?? \`${item.href}-${i}\``: a stable `id` when the caller
+ * supplies one, position otherwise (crumb lists are append-stable by
+ * nature — a mid-list insert re-keys the suffix, which is correct).
+ */
+export function breadcrumbItemKey(
+    item: BreadcrumbNativeItemType,
+    index: number
+): string {
+    return item.id != null ? String(item.id) : `breadcrumb-item-${index}`
+}
+
+/**
+ * `accessibilityRole` for a crumb. RN has no `nav`→`ol`→`li` hierarchy;
+ * the bar is announced as a group of buttons and the last crumb carries
+ * `selected` state (the closest RN mapping of web's `aria-current="page"`).
+ */
+export function isCurrentCrumb(
+    index: number,
+    total: number,
+    isActive?: boolean
+): boolean {
+    if (typeof isActive === 'boolean') return isActive
+    return index === total - 1
+}
+
+/**
+ * The overflow trigger's accessible name — web parity:
+ * "Show N more breadcrumb items" (singular at exactly one).
+ */
+export function overflowMenuLabel(count: number): string {
+    return `Show ${count} more breadcrumb ${count === 1 ? 'item' : 'items'}`
+}

package/src/components/Breadcrumb/index.ts

@@ -0,0 +1,11 @@
+export { default as Breadcrumb } from './Breadcrumb'
+export type {
+    BreadcrumbNativeProps,
+    BreadcrumbNativeItemType,
+} from './breadcrumb.types'
+export {
+    computeBreadcrumbOverflowLayout,
+    breadcrumbItemKey,
+    isCurrentCrumb,
+    overflowMenuLabel,
+} from './breadcrumb.utils'

package/src/components/Button/Button.tsx

@@ -167,7 +167,7 @@ const Button = forwardRef<RNView, ButtonNativeProps>(function Button(
             accessibilityRole="button"
             // Grouped members drop their shared edges; spread after the
             // resolved surface so `borderWidth` still covers the other sides.
-            style={{ ...styles.groupBorderWidths, ...style }}
+            style={[styles.groupBorderWidths, style]}
             {...rest}
         >
             {content}