jfs-components 0.0.79 → 0.0.85

package/src/components/ClusterBubble/ClusterBubble.tsx

@@ -0,0 +1,359 @@
+import React, { useMemo, useState } from 'react'
+import {
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+    type LayoutChangeEvent,
+    type StyleProp,
+    type TextStyle,
+    type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+
+/** Where the value/label text sits relative to the circle. */
+export type ClusterBubbleLabelPlacement = 'inside' | 'outside' | 'auto'
+
+/** Which side of the circle an *outside* label is anchored to. */
+export type ClusterBubbleLabelDirection = 'top' | 'bottom' | 'left' | 'right'
+
+export type ClusterBubbleProps = {
+    /**
+     * The bold, primary content rendered in/under the bubble — e.g. `"40%"`,
+     * `"₹270K"`. Strings are auto-wrapped in a `<Text>`; pass a node for full
+     * control (e.g. a `MoneyValue`).
+     */
+    value?: React.ReactNode
+    /** The secondary caption shown beside the value — e.g. `"Recommended"`. */
+    label?: React.ReactNode
+    /** Diameter of the circle in px. Defaults to `120`. */
+    size?: number
+    /**
+     * `Appearance / DataViz` mode used to resolve the fill from the
+     * `dataViz/bg` token (e.g. `Primary`, `Secondary`, `Tertiary`).
+     * Defaults to `Primary`. The *emphasis* of the fill is taken from the
+     * `Emphasis / DataViz` mode in `modes`.
+     */
+    appearance?: string
+    /** Hard-override the circle fill color (bypasses token resolution). */
+    color?: string
+    /**
+     * Where the text sits. `inside` centers it within the circle, `outside`
+     * anchors it just beyond the circle's edge, and `auto` (default) picks
+     * `inside` when the bubble is at least `autoInsideMinSize` px, otherwise
+     * `outside`.
+     */
+    labelPlacement?: ClusterBubbleLabelPlacement
+    /**
+     * Which side an *outside* label is placed on. The label is positioned
+     * exactly `labelGap` px beyond the circle's radius in this direction.
+     * Defaults to `bottom`.
+     */
+    labelDirection?: ClusterBubbleLabelDirection
+    /** Gap in px between the circle's edge and an outside label. Defaults to `8`. */
+    labelGap?: number
+    /** Diameter (px) at/above which `auto` places the text inside. Defaults to `88`. */
+    autoInsideMinSize?: number
+    /**
+     * Text color when the label sits *inside*. Defaults to an automatic
+     * black/white choice based on the fill's luminance for legibility.
+     */
+    insideTextColor?: string
+    /** Press handler — wraps the bubble in a `Pressable` when provided. */
+    onPress?: () => void
+    /** Style override for the value text. */
+    valueStyle?: StyleProp<TextStyle>
+    /** Style override for the label text. */
+    labelStyle?: StyleProp<TextStyle>
+    /** Style override for the circle view. */
+    circleStyle?: StyleProp<ViewStyle>
+    /** Style override for the outer container. */
+    style?: StyleProp<ViewStyle>
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Accessibility label. Defaults to a `value + label` composite. */
+    accessibilityLabel?: string
+}
+
+const DEFAULT_FILL = '#5d00b5'
+
+/** Parse `#rgb`, `#rrggbb`, `rgb()` / `rgba()` into 0–255 channels. */
+function parseColor(input: string): { r: number; g: number; b: number } | null {
+    if (typeof input !== 'string') return null
+    const value = input.trim()
+
+    if (value[0] === '#') {
+        let hex = value.slice(1)
+        if (hex.length === 3) {
+            hex = hex
+                .split('')
+                .map((ch) => ch + ch)
+                .join('')
+        }
+        if (hex.length >= 6) {
+            const r = parseInt(hex.slice(0, 2), 16)
+            const g = parseInt(hex.slice(2, 4), 16)
+            const b = parseInt(hex.slice(4, 6), 16)
+            if ([r, g, b].every((n) => Number.isFinite(n))) return { r, g, b }
+        }
+        return null
+    }
+
+    const match = value.match(/rgba?\(([^)]+)\)/i)
+    if (match) {
+        const parts = match[1].split(',').map((p) => parseFloat(p))
+        if (parts.length >= 3 && parts.slice(0, 3).every((n) => Number.isFinite(n))) {
+            return { r: parts[0], g: parts[1], b: parts[2] }
+        }
+    }
+    return null
+}
+
+/** Pick a legible foreground (near-black or white) for a given background. */
+function readableTextColor(background: string): string {
+    const rgb = parseColor(background)
+    if (!rgb) return '#ffffff'
+    // Perceived luminance (ITU-R BT.601).
+    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255
+    return luminance > 0.6 ? '#0f0d0a' : '#ffffff'
+}
+
+/**
+ * `ClusterBubble` is the atomic circle that composes a `BubbleChart`. It renders
+ * a single token-colored disc with a bold `value` and a secondary `label`. The
+ * text can sit inside the circle or anchor just outside its edge on any side
+ * (`labelDirection`) at a precise `labelGap` distance — so consumers (or the
+ * chart) can steer labels toward free space. The inside text color adapts to
+ * the fill for legibility. It is fully usable standalone.
+ *
+ * @component
+ */
+function ClusterBubble({
+    value,
+    label,
+    size = 120,
+    appearance = 'Primary',
+    color,
+    labelPlacement = 'auto',
+    labelDirection = 'bottom',
+    labelGap = 8,
+    autoInsideMinSize = 88,
+    insideTextColor,
+    onPress,
+    valueStyle,
+    labelStyle,
+    circleStyle,
+    style,
+    modes: propModes = EMPTY_MODES,
+    accessibilityLabel,
+}: ClusterBubbleProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = useMemo(() => ({ ...globalModes, ...propModes }), [globalModes, propModes])
+
+    // Emphasis is read from the `Emphasis / DataViz` mode (defaulting to the
+    // token's own default) rather than a dedicated prop.
+    const fill = useMemo(() => {
+        if (color) return color
+        return (
+            (getVariableByName('dataViz/bg', {
+                ...modes,
+                'Appearance / DataViz': appearance,
+            }) as string | null) ?? DEFAULT_FILL
+        )
+    }, [color, modes, appearance])
+
+    const fontFamily =
+        (getVariableByName('text/fontFamily', modes) as string | null) ?? 'JioType'
+    const outsideTextColor =
+        (getVariableByName('text/foreground', modes) as string | null) ?? '#0f0d0a'
+
+    const placement: 'inside' | 'outside' =
+        labelPlacement === 'auto'
+            ? size >= autoInsideMinSize
+                ? 'inside'
+                : 'outside'
+            : labelPlacement
+
+    // Measure the outside label so it can be anchored precisely on any side
+    // without guessing its dimensions.
+    const [labelSize, setLabelSize] = useState<{ w: number; h: number } | null>(null)
+    const handleLabelLayout = (e: LayoutChangeEvent) => {
+        const { width, height } = e.nativeEvent.layout
+        setLabelSize((prev) =>
+            prev && Math.abs(prev.w - width) < 0.5 && Math.abs(prev.h - height) < 0.5
+                ? prev
+                : { w: width, h: height }
+        )
+    }
+
+    // Default typography scales with the bubble when inside (so it fits the
+    // disc); fixed comfortable sizes when anchored outside.
+    const valueFontSize =
+        placement === 'inside' ? Math.round(Math.min(48, Math.max(13, size * 0.17))) : 24
+    const labelFontSize =
+        placement === 'inside' ? Math.round(Math.min(18, Math.max(10, size * 0.085))) : 14
+
+    const textColor =
+        placement === 'inside' ? insideTextColor ?? readableTextColor(fill) : outsideTextColor
+
+    const renderText = (
+        node: React.ReactNode,
+        baseStyle: TextStyle,
+        override: StyleProp<TextStyle>
+    ) => {
+        if (node === undefined || node === null || node === false) return null
+        if (typeof node === 'string' || typeof node === 'number') {
+            return (
+                <Text style={[baseStyle, override]} numberOfLines={2}>
+                    {node}
+                </Text>
+            )
+        }
+        return node
+    }
+
+    const valueNode = renderText(
+        value,
+        {
+            color: textColor,
+            fontFamily,
+            fontSize: valueFontSize,
+            lineHeight: Math.round(valueFontSize * 1.15),
+            fontWeight: '700',
+            textAlign: 'center',
+            letterSpacing: -0.5,
+        },
+        valueStyle
+    )
+
+    const labelNode = renderText(
+        label,
+        {
+            color: textColor,
+            fontFamily,
+            fontSize: labelFontSize,
+            lineHeight: Math.round(labelFontSize * 1.3),
+            fontWeight: '400',
+            textAlign: 'center',
+            letterSpacing: -0.2,
+        },
+        labelStyle
+    )
+
+    const hasText = !!valueNode || !!labelNode
+
+    const textBlock = hasText ? (
+        <View style={styles.textBlock}>
+            {valueNode}
+            {labelNode}
+        </View>
+    ) : null
+
+    const derivedA11y = [value, label]
+        .filter((v) => typeof v === 'string' || typeof v === 'number')
+        .join(', ')
+    const a11yLabel = accessibilityLabel ?? (derivedA11y || undefined)
+
+    const circle = (
+        <View
+            style={[
+                styles.circle,
+                { width: size, height: size, borderRadius: size / 2, backgroundColor: fill },
+                circleStyle,
+            ]}
+        >
+            {placement === 'inside' ? textBlock : null}
+        </View>
+    )
+
+    let content: React.ReactNode
+    if (placement === 'inside' || !textBlock) {
+        content = <View style={[styles.inlineContainer, style]}>{circle}</View>
+    } else {
+        // Anchor the label exactly `labelGap` beyond the radius on the chosen
+        // side. Hidden until measured to avoid a positioning flash.
+        const offset = labelOffset(labelDirection, size, labelGap, labelSize)
+        content = (
+            <View style={[{ width: size, height: size }, style]}>
+                {circle}
+                <View
+                    onLayout={handleLabelLayout}
+                    style={[
+                        styles.outsideLabel,
+                        { left: offset.left, top: offset.top, opacity: labelSize ? 1 : 0 },
+                    ]}
+                    pointerEvents="none"
+                >
+                    {textBlock}
+                </View>
+            </View>
+        )
+    }
+
+    if (onPress) {
+        return (
+            <Pressable
+                onPress={onPress}
+                accessibilityRole="button"
+                accessibilityLabel={a11yLabel}
+                style={({ pressed }) => (pressed ? styles.pressed : undefined)}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View accessibilityRole="image" accessibilityLabel={a11yLabel}>
+            {content}
+        </View>
+    )
+}
+
+/** Compute the absolute `left/top` of the outside label box for a direction. */
+function labelOffset(
+    direction: ClusterBubbleLabelDirection,
+    size: number,
+    gap: number,
+    labelSize: { w: number; h: number } | null
+): { left: number; top: number } {
+    const center = size / 2
+    const w = labelSize?.w ?? 0
+    const h = labelSize?.h ?? 0
+    switch (direction) {
+        case 'top':
+            return { left: center - w / 2, top: -(gap + h) }
+        case 'bottom':
+            return { left: center - w / 2, top: size + gap }
+        case 'left':
+            return { left: -(gap + w), top: center - h / 2 }
+        case 'right':
+            return { left: size + gap, top: center - h / 2 }
+    }
+}
+
+const styles = StyleSheet.create({
+    inlineContainer: {
+        alignItems: 'center',
+    },
+    circle: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    textBlock: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 8,
+    },
+    outsideLabel: {
+        position: 'absolute',
+    },
+    pressed: {
+        opacity: 0.85,
+    },
+})
+
+export default ClusterBubble

package/src/components/Drawer/Drawer.tsx

@@ -439,6 +439,10 @@ function Drawer({
               style={[styles.content, contentStyle]}
               contentContainerStyle={[{ paddingBottom: paddingBottom + bottomInset, gap: drawerGap, flexDirection: 'column', alignItems: 'stretch' }, contentContainerStyle]}
               showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+              // Let a tap on an input inside the sheet focus it on the FIRST tap
+              // even while the keyboard is already open (default 'never' would
+              // eat that tap just to dismiss the keyboard).
+              keyboardShouldPersistTaps="handled"
               animatedProps={animatedScrollProps}
               alwaysBounceVertical={false}
               overScrollMode="always"

package/src/components/DropdownInput/DropdownInput.tsx

@@ -117,8 +117,9 @@ export type DropdownInputProps = {
      */
     menuMaxHeight?: number
     /**
-     * Pixel offset between the trigger and the popup. Defaults to 4 so the
-     * popup visually peeks below the input.
+     * Pixel gap between the trigger and the popup. When omitted, it defaults
+     * to the `formField/gap` design token so the menu sits the same distance
+     * below the input as the rest of the field's internal spacing.
      */
     menuOffset?: number
     /**
@@ -325,7 +326,7 @@ function DropdownInput({
     supportText,
     errorMessage,
     menuMaxHeight = 240,
-    menuOffset = 6,
+    menuOffset,
     matchTriggerWidth = true,
     closeOnBackdropPress = true,
     modes: propModes = EMPTY_MODES,
@@ -422,11 +423,30 @@ function DropdownInput({
     const tokens = useFormFieldTokens(modes)
     const chevron = useChevronTokens(modes)
 
+    // Gap between the input and the popup. Falls back to the `formField/gap`
+    // token so the menu's offset matches the field's own internal spacing.
+    const effectiveMenuOffset = menuOffset ?? tokens.gap
+
     // ---------------- Layout / measurement ----------------
     const triggerRef = useRef<View>(null)
     const [triggerRect, setTriggerRect] = useState<Rect | null>(null)
     const insets = useSafeAreaInsets()
 
+    // Android coordinate-space bridge.
+    //
+    // The popup lives inside a `statusBarTranslucent` Modal, whose window is
+    // laid out from the PHYSICAL top of the screen (behind the status bar).
+    // The trigger, however, is rendered inside the app's content area (Expo
+    // Router / react-native-screens under edge-to-edge), so its
+    // `measureInWindow` Y is relative to the content area — it does NOT include
+    // the status bar height. Feeding that Y straight into the Modal would place
+    // the popup one status-bar-height too high, landing it on top of the input.
+    //
+    // Adding `insets.top` converts the trigger's content-relative Y into the
+    // Modal's full-screen coordinate space. iOS/web share a single coordinate
+    // space for the Modal and the trigger, so no shift is needed there.
+    const windowTopOffset = Platform.OS === 'android' ? insets.top : 0
+
     const measure = useCallback(() => {
         if (!triggerRef.current) return
         triggerRef.current.measureInWindow((x, y, width, height) => {
@@ -503,7 +523,7 @@ function DropdownInput({
             menuSize?.height ?? menuMaxHeight,
             menuMaxHeight
         )
-        const needed = desiredHeight + menuOffset + 8
+        const needed = desiredHeight + effectiveMenuOffset + 8
         if (placement === 'top') {
             return spaceAbove >= needed || spaceAbove >= spaceBelow
                 ? 'top'
@@ -523,7 +543,7 @@ function DropdownInput({
         windowHeight,
         menuSize?.height,
         menuMaxHeight,
-        menuOffset,
+        effectiveMenuOffset,
         insets.top,
         insets.bottom,
     ])
@@ -544,15 +564,18 @@ function DropdownInput({
         if (leftPos > maxLeft) leftPos = maxLeft
         if (leftPos < minLeft) leftPos = minLeft
 
+        // Trigger top expressed in the Modal's (full-screen) coordinate space.
+        const triggerTop = triggerRect.y + windowTopOffset
+
         let topPos: number
         if (computedPlacement === 'top') {
             const desiredHeight = menuSize?.height ?? menuMaxHeight
-            topPos = triggerRect.y - desiredHeight - menuOffset
+            topPos = triggerTop - desiredHeight - effectiveMenuOffset
             if (topPos < insets.top + screenPadding) {
                 topPos = insets.top + screenPadding
             }
         } else {
-            topPos = triggerRect.y + triggerRect.height + menuOffset
+            topPos = triggerTop + triggerRect.height + effectiveMenuOffset
         }
 
         const style: ViewStyle = {
@@ -569,7 +592,8 @@ function DropdownInput({
         triggerRect,
         computedPlacement,
         menuSize,
-        menuOffset,
+        effectiveMenuOffset,
+        windowTopOffset,
         menuMaxHeight,
         matchTriggerWidth,
         windowWidth,
@@ -779,22 +803,32 @@ function DropdownInput({
             )}
 
             {/*
-              IMPORTANT: do NOT pass `statusBarTranslucent` to this Modal.
-              On Android, a `statusBarTranslucent` Modal opens its own window
-              that spans the entire screen (origin at screen-top, including
-              the status bar), but `measureInWindow` on the trigger returns
-              coordinates relative to the *activity* window — which on a
-              default Android setup starts BELOW the status bar. The two
-              coordinate spaces then differ by `StatusBar.currentHeight`, so
-              `triggerRect.y + triggerRect.height + menuOffset` lands roughly
-              one status-bar-height ABOVE the visible input, making the
-              popup overlap the input row. Leaving `statusBarTranslucent`
-              off keeps the Modal's window aligned with the activity
-              window, which is what every measurement here assumes.
+              IMPORTANT: this Modal MUST be `statusBarTranslucent` (and
+              `navigationBarTranslucent`) on Android.
+
+              The app runs edge-to-edge (Expo SDK 54+ / Android 15 enforce it
+              and it cannot be disabled). That means the activity window spans
+              the entire physical screen, so `measureInWindow` on the trigger
+              returns a `y` measured from the very TOP of the screen — the
+              status bar height is INCLUDED.
+
+              A non-translucent Modal, however, opens a window whose content
+              area starts BELOW the status bar, so `top: 0` inside it maps to
+              screen-Y = statusBarHeight. Every `top` we compute is then
+              shifted UP by one status-bar-height relative to the trigger,
+              which (because the input row height is roughly a status bar tall)
+              drops the popup right on top of the input.
+
+              Making the Modal translucent gives it a full-screen window whose
+              origin matches the edge-to-edge activity window, so the
+              `measureInWindow` coordinates and the popup's absolute `top`/
+              `left` finally live in the same coordinate space.
             */}
             <Modal
                 visible={isOpen}
                 transparent
+                statusBarTranslucent
+                navigationBarTranslucent
                 animationType="fade"
                 onRequestClose={closeMenu}
             >

package/src/components/ExpandableCheckbox/ExpandableCheckbox.tsx

@@ -129,10 +129,6 @@ function ExpandableCheckbox({
 
   const rowGap =
     (getVariableByName('checkboxItem/gap', modes) as number | null) ?? 8
-  const rowPaddingHorizontal =
-    (getVariableByName('checkboxItem/padding/horizontal', modes) as number | null) ?? 0
-  const rowPaddingVertical =
-    (getVariableByName('checkboxItem/padding/vertical', modes) as number | null) ?? 0
 
   const labelColor =
     (getVariableByName('checkboxItem/foreground', modes) as string | null) ?? '#1a1c1f'
@@ -163,12 +159,10 @@ function ExpandableCheckbox({
       alignSelf: isExpanded ? 'stretch' : 'auto',
       minWidth: 0,
       flexDirection: 'row',
-      alignItems: 'flex-start',
+      alignItems: isExpanded ? 'flex-start' : 'center',
       gap: rowGap,
-      paddingHorizontal: rowPaddingHorizontal,
-      paddingVertical: rowPaddingVertical,
     }),
-    [isExpanded, rowGap, rowPaddingHorizontal, rowPaddingVertical]
+    [isExpanded, rowGap]
   )
 
   const resolvedLabelStyle: TextStyle = useMemo(
@@ -180,6 +174,13 @@ function ExpandableCheckbox({
       fontSize: labelFontSize,
       lineHeight: labelLineHeight,
       fontWeight: labelFontWeight,
+      // Android adds asymmetric font padding and top-aligns the glyph inside
+      // an inflated line box when `lineHeight` is set. That makes the centered
+      // checkbox look like it drops below the text. Disabling the extra
+      // padding + centering the glyph keeps the single-line label optically
+      // aligned with the checkbox. No-op on iOS / web.
+      includeFontPadding: false,
+      textAlignVertical: isExpanded ? 'top' : 'center',
     }),
     [
       labelColor,
@@ -187,11 +188,14 @@ function ExpandableCheckbox({
       labelFontSize,
       labelLineHeight,
       labelFontWeight,
+      isExpanded,
     ]
   )
 
+  // Layer component modes first (e.g. Color Mode), then button defaults so
+  // Secondary / XS / Low always win unless a dedicated override prop is added.
   const buttonModes = useMemo(
-    () => ({ ...BUTTON_DEFAULT_MODES, ...modes }),
+    () => ({ ...modes, ...BUTTON_DEFAULT_MODES }),
     [modes]
   )
 

package/src/components/FormField/FormField.tsx

@@ -1,8 +1,7 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import {
   View,
   Text,
-  Pressable,
   TextInput as RNTextInput,
   type StyleProp,
   type TextInputProps as RNTextInputProps,
@@ -347,16 +346,6 @@ function FormField({
   const [isFocused, setIsFocused] = useState(false)
   const interactive = !isDisabled && !isReadOnly
 
-  // Ref to the native input so tapping anywhere in the input row (padding,
-  // leading/trailing gutters) focuses it on the FIRST tap — fixing the Android
-  // "two taps to open the keyboard" issue caused by the row intercepting the
-  // initial touch.
-  const inputRef = useRef<RNTextInput>(null)
-  const focusInput = useCallback(() => {
-    if (!interactive) return
-    inputRef.current?.focus()
-  }, [interactive])
-
   // FormField States cascade — error > read only/disabled > active (focused) > idle.
   // Disabled maps to "Read Only" since there is no dedicated disabled mode and
   // the visual treatment is closest. This is only the DEFAULT — an explicit
@@ -552,11 +541,7 @@ function FormField({
         </View>
       )}
 
-      <Pressable
-        style={[inputRowStyle, inputStyle]}
-        onPress={focusInput}
-        accessible={false}
-      >
+      <View style={[inputRowStyle, inputStyle]}>
         {processedLeading != null && (
           <View
             accessibilityElementsHidden
@@ -566,7 +551,6 @@ function FormField({
           </View>
         )}
         <RNTextInput
-          ref={inputRef}
           style={[inputTextStyles, inputTextStyle]}
           value={value ?? ''}
           onChangeText={handleChangeText}
@@ -594,7 +578,7 @@ function FormField({
             {processedTrailing}
           </View>
         )}
-      </Pressable>
+      </View>
 
       {supportLabel != null && supportLabel !== '' && (
         <SupportText

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -374,6 +374,9 @@ function FullscreenModal({
         showsVerticalScrollIndicator={false}
         onScroll={onScroll}
         scrollEventThrottle={16}
+        // Tap an input in the body and it focuses on the FIRST tap, even when
+        // the keyboard is already open (default 'never' eats that tap).
+        keyboardShouldPersistTaps="handled"
       >
         <View style={heroTextRegionStyle}>
           <HeroText