jfs-components 0.1.0 → 0.1.8

package/src/components/ProjectionMarker/ProjectionMarker.tsx

@@ -0,0 +1,277 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+import Divider from '../Divider/Divider'
+
+/**
+ * A value rendered at either end of the marker. A `string`/`number` is rendered
+ * with the built-in title typography; any other `ReactNode` (e.g. a
+ * `MoneyValue`) is rendered as-is so consumers can fully control presentation.
+ */
+type ProjectionMarkerEndValue = React.ReactNode
+
+export type ProjectionMarkerProps = {
+  /**
+   * Value shown on the leading (left) end of the marker — typically the
+   * invested/starting amount. Accepts a string for the default styling or any
+   * `ReactNode` (e.g. `MoneyValue`) for custom rendering.
+   */
+  startValue?: ProjectionMarkerEndValue
+  /**
+   * Value shown on the trailing (right) end of the marker — typically the
+   * projected/ending amount.
+   */
+  endValue?: ProjectionMarkerEndValue
+  /**
+   * Primary line inside the center badge — typically the duration
+   * (e.g. `"1Y 10M"`).
+   */
+  duration?: React.ReactNode
+  /**
+   * Secondary line inside the center badge — typically the rate
+   * (e.g. `"@ 8.25 %"`).
+   */
+  rate?: React.ReactNode
+  /**
+   * Whether to render the connector lines between the end values and the
+   * center badge. Defaults to `true`.
+   */
+  showConnectors?: boolean
+  /** Design token modes for theming. */
+  modes?: Modes
+  /** Override the root container styles. */
+  style?: StyleProp<ViewStyle>
+  /** Override the leading value text styles (only applies to string values). */
+  startValueStyle?: StyleProp<TextStyle>
+  /** Override the trailing value text styles (only applies to string values). */
+  endValueStyle?: StyleProp<TextStyle>
+  /** Override the center badge container styles. */
+  badgeStyle?: StyleProp<ViewStyle>
+  /** Override the duration text styles. */
+  durationStyle?: StyleProp<TextStyle>
+  /** Override the rate text styles. */
+  rateStyle?: StyleProp<TextStyle>
+  /** Accessibility label for the whole marker. */
+  accessibilityLabel?: string
+}
+
+const isTextValue = (value: React.ReactNode): value is string | number =>
+  typeof value === 'string' || typeof value === 'number'
+
+/**
+ * ProjectionMarker renders a start value and an end value connected to a
+ * centered badge that summarizes the projection (e.g. a tenure and interest
+ * rate). It mirrors the Figma `projectionMarker` component and is commonly used
+ * inside "Potential returns" style cards.
+ *
+ * @example
+ * ```tsx
+ * <ProjectionMarker
+ *   startValue="₹1,00,000"
+ *   endValue="₹1,25,101"
+ *   duration="1Y 10M"
+ *   rate="@ 8.25 %"
+ * />
+ * ```
+ *
+ * @example Custom end values via MoneyValue
+ * ```tsx
+ * <ProjectionMarker
+ *   startValue={<MoneyValue value="1,00,000" />}
+ *   endValue={<MoneyValue value="1,25,101" />}
+ *   duration="1Y 10M"
+ *   rate="@ 8.25 %"
+ * />
+ * ```
+ */
+function ProjectionMarker({
+  startValue = '₹1,00,000',
+  endValue = '₹1,25,101',
+  duration = '1Y 10M',
+  rate = '@ 8.25 %',
+  showConnectors = true,
+  modes = EMPTY_MODES,
+  style,
+  startValueStyle,
+  endValueStyle,
+  badgeStyle,
+  durationStyle,
+  rateStyle,
+  accessibilityLabel,
+}: ProjectionMarkerProps) {
+  const titleColor =
+    (getVariableByName('projectionMarker/title/color', modes) as string | null) ?? '#000000'
+  const titleFontFamily =
+    (getVariableByName('projectionMarker/title/fontfamily', modes) as string | null) ??
+    'JioType Var'
+  const titleFontSize =
+    (getVariableByName('projectionMarker/title/fontsize', modes) as number | null) ?? 14
+  const titleFontWeight = String(
+    getVariableByName('projectionMarker/title/fontweight', modes) ?? 600
+  ) as TextStyle['fontWeight']
+
+  const durationColor =
+    (getVariableByName('projectionMarker/duration/color', modes) as string | null) ?? '#000000'
+  const durationFontFamily =
+    (getVariableByName('projectionMarker/duration/fontfamily', modes) as string | null) ??
+    'JioType Var'
+  const durationFontSize =
+    (getVariableByName('projectionMarker/duration/fontsize', modes) as number | null) ?? 12
+  const durationFontWeight = String(
+    getVariableByName('projectionMarker/duration/fontweight', modes) ?? 500
+  ) as TextStyle['fontWeight']
+
+  const rateColor =
+    (getVariableByName('projectionMarker/rate/color', modes) as string | null) ?? '#6b6b6b'
+  const rateFontFamily =
+    (getVariableByName('metricdata/rate/fontfamily', modes) as string | null) ?? 'JioType Var'
+  const rateFontSize =
+    (getVariableByName('metricdata/rate/fontsize', modes) as number | null) ?? 11
+  const rateFontWeight = String(
+    getVariableByName('metricdata/rate/fontweight', modes) ?? 400
+  ) as TextStyle['fontWeight']
+
+  const badgeBg =
+    (getVariableByName('projectionMarker/durationWrap/bg/color', modes) as string | null) ??
+    '#f5f5f5'
+  const badgeBorderColor =
+    (getVariableByName('projectionMarker/durationWrap/border/color', modes) as string | null) ??
+    '#ebebed'
+  const badgeBorderWidth =
+    (getVariableByName('metricdata/durationWrap/stroke', modes) as number | null) ?? 1
+  const badgeRadius =
+    (getVariableByName('metricdata/durationWrap/radius', modes) as number | null) ?? 8
+  const badgePaddingHorizontal =
+    (getVariableByName('metricdata/durationWrap/padding/horizontal', modes) as number | null) ?? 16
+  const badgePaddingVertical =
+    (getVariableByName('metricdata/durationWrap/padding/vertical', modes) as number | null) ?? 8
+
+  const titleTextStyle: TextStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleFontSize * 1.3,
+  }
+
+  const renderEndValue = (
+    value: React.ReactNode,
+    overrideStyle: StyleProp<TextStyle>
+  ): React.ReactNode => {
+    if (value === null || value === undefined) return null
+    if (isTextValue(value)) {
+      return (
+        <Text style={[titleTextStyle, overrideStyle]} numberOfLines={1}>
+          {value}
+        </Text>
+      )
+    }
+    return cloneChildrenWithModes(value, modes)
+  }
+
+  return (
+    <View
+      style={[styles.container, style]}
+      accessibilityRole="summary"
+      accessibilityLabel={accessibilityLabel}
+    >
+      {renderEndValue(startValue, startValueStyle)}
+
+      {showConnectors && (
+        <Divider direction="horizontal" modes={modes} style={styles.connector} />
+      )}
+
+      <View
+        style={[
+          styles.badge,
+          {
+            backgroundColor: badgeBg,
+            borderColor: badgeBorderColor,
+            borderWidth: badgeBorderWidth,
+            borderRadius: badgeRadius,
+            paddingHorizontal: badgePaddingHorizontal,
+            paddingVertical: badgePaddingVertical,
+          },
+          badgeStyle,
+        ]}
+      >
+        {duration !== null && duration !== undefined
+          ? isTextValue(duration)
+            ? (
+              <Text
+                style={[
+                  {
+                    color: durationColor,
+                    fontFamily: durationFontFamily,
+                    fontSize: durationFontSize,
+                    fontWeight: durationFontWeight,
+                    lineHeight: durationFontSize * 1.2,
+                    textAlign: 'center',
+                  },
+                  durationStyle,
+                ]}
+              >
+                {duration}
+              </Text>
+            )
+            : cloneChildrenWithModes(duration, modes)
+          : null}
+        {rate !== null && rate !== undefined
+          ? isTextValue(rate)
+            ? (
+              <Text
+                style={[
+                  {
+                    color: rateColor,
+                    fontFamily: rateFontFamily,
+                    fontSize: rateFontSize,
+                    fontWeight: rateFontWeight,
+                    lineHeight: rateFontSize * 1.3,
+                    textAlign: 'center',
+                  },
+                  rateStyle,
+                ]}
+              >
+                {rate}
+              </Text>
+            )
+            : cloneChildrenWithModes(rate, modes)
+          : null}
+      </View>
+
+      {showConnectors && (
+        <Divider direction="horizontal" modes={modes} style={styles.connector} />
+      )}
+
+      {renderEndValue(endValue, endValueStyle)}
+    </View>
+  )
+}
+
+const styles = {
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+  } as ViewStyle,
+  connector: {
+    flex: 1,
+    alignSelf: 'center',
+    marginHorizontal: 16,
+  } as ViewStyle,
+  badge: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+  } as ViewStyle,
+}
+
+export default ProjectionMarker

package/src/components/Radio/Radio.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react'
+import React, { forwardRef, useState } from 'react'
 import {
     Pressable,
     View,
@@ -10,6 +10,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 // ---------------------------------------------------------------------------
 // Props
@@ -31,7 +32,7 @@ export interface RadioProps {
     /**
      * Modes object for design-token resolution.
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /**
      * Custom style for the radio container.
      */
@@ -46,14 +47,14 @@ export interface RadioProps {
 // Radio
 // ---------------------------------------------------------------------------
 
-export function Radio({
+export const Radio = forwardRef<View, RadioProps>(function Radio({
     selected = false,
     disabled = false,
     onPress,
     modes = EMPTY_MODES,
     style,
     testID,
-}: RadioProps) {
+}: RadioProps, ref: React.Ref<View>) {
     // ---- Refs & State ----
     const [hovered, setHovered] = useState(false)
     const [focused, setFocused] = useState(false)
@@ -205,6 +206,7 @@ export function Radio({
 
     return (
         <Pressable
+            ref={ref}
             testID={testID}
             disabled={disabled}
             onPress={onPress}
@@ -222,6 +224,6 @@ export function Radio({
             <View style={selectorStyle} />
         </Pressable>
     )
-}
+})
 
 export default Radio

package/src/components/RangeTrack/RangeTrack.tsx

@@ -9,6 +9,7 @@ import SegmentedTrack, {
 } from '../SegmentedTrack/SegmentedTrack'
 import Tabs from '../Tabs/Tabs'
 import TabItem from '../Tabs/TabItem'
+import type { Modes } from '../../design-tokens'
 
 /**
  * One row of data inside a `RangeTrack` tab.
@@ -48,7 +49,7 @@ export type RangeTrackItem = {
      * `modes` and the per-index `Emphasis / DataViz` defaults
      * (`High`, `Medium`, `Low`, then cycles).
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Accessibility label for the segment + legend row pairing. */
     accessibilityLabel?: string
 }
@@ -119,7 +120,7 @@ export type RangeTrackProps = {
      */
     scrollableTabs?: boolean
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override the outer container styles. */
     style?: StyleProp<ViewStyle>
     /** Override the tab row styles. */

package/src/components/RechargeCard/RechargeCard.tsx

@@ -5,6 +5,7 @@ import AvatarGroup from '../AvatarGroup/AvatarGroup';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import MoneyValue from '../MoneyValue/MoneyValue';
+import type { Modes } from '../../design-tokens'
 
 // Defaults applied to the inner ButtonGroup so the card matches Figma out of
 // the box. They are spread *before* the caller's `modes` so any consumer can
@@ -62,7 +63,7 @@ export type RechargeCardProps = {
     /**
      * Mode configuration for design tokens.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 

package/src/components/SavingsGoalSummary/SavingsGoalSummary.tsx

@@ -11,6 +11,7 @@ import { formatIndianNumber } from '../../utils/number-utils'
 import Title from '../Title/Title'
 import LinearProgress from '../LinearProgress/LinearProgress'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
+import type { Modes } from '../../design-tokens'
 
 /**
  * A single row in the savings-goal legend (current vs. target).
@@ -72,7 +73,7 @@ export type SavingsGoalSummaryProps = {
      * which renders the thicker progress bar from the Figma reference. Caller
      * modes are merged on top and can override every default key.
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override container styles. */
     style?: StyleProp<ViewStyle>
     /**

package/src/components/Screen/Screen.tsx

@@ -8,6 +8,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export interface ScreenProps {
     /**
@@ -17,7 +18,7 @@ export interface ScreenProps {
     /**
      * Modes object to override default variable values.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Optional style overrides for the container.
      */

package/src/components/Section/Section.tsx

@@ -15,6 +15,7 @@ import IconCapsule from '../IconCapsule/IconCapsule'
 import ListItem from '../ListItem/ListItem'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 // Match Button: delay the press visual on iOS so a scroll-cancelled touch
 // never applies the "pressed" style. See Button.tsx for the rationale.
@@ -356,7 +357,7 @@ type SectionProps = {
   slot?: React.ReactNode;
   /** Layout direction of the slot's children. Defaults to 'row' (horizontal). */
   slotDirection?: 'row' | 'column';
-  modes?: Record<string, any>;
+  modes?: Modes;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
@@ -400,7 +401,7 @@ interface SectionTokens {
   slotGap: number;
 }
 
-function resolveSectionTokens(modes: Record<string, any>): SectionTokens {
+function resolveSectionTokens(modes: Modes): SectionTokens {
   const backgroundColor = getVariableByName('section/background/color', modes) || '#ffffff'
   const sectionGap = (getVariableByName('section/gap', modes) || 12) as number
   const slotGap = (getVariableByName('slot/gap', modes) || 12) as number
@@ -630,7 +631,7 @@ function Section({
 
 type SectionSlotProps = {
   slot: React.ReactNode;
-  modes: Record<string, any>;
+  modes: Modes;
   direction: 'row' | 'column';
   rowGap: number;
   columnGap: number;
@@ -667,7 +668,7 @@ type BentoToggleRenderState = {
 type SectionBentoProps = {
   navSlot?: React.ReactNode;
   upiSlot?: React.ReactNode;
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;
@@ -891,7 +892,7 @@ function SectionBento({
 type DefaultBentoToggleProps = {
   expanded: boolean;
   onPress: () => void;
-  modes: Record<string, any>;
+  modes: Modes;
   moreLabel: string;
   lessLabel: string;
   moreIcon: string;

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type SegmentedControlItem = {
   key: React.Key
@@ -25,7 +26,7 @@ export type SegmentedControlProps = {
   /** Callback fired when the selected segment changes */
   onSelectionChange?: (key: React.Key) => void
   /** Design token modes for theming */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Override container styles */
   style?: StyleProp<ViewStyle>
 }
@@ -39,7 +40,7 @@ function SegmentedControlSegment({
   label: string
   active: boolean
   onPress: () => void
-  modes: Record<string, any>
+  modes: Modes
 }) {
   const resolvedModes = {
     ...modes,

package/src/components/SegmentedTrack/SegmentedTrack.tsx

@@ -7,6 +7,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 /**
  * Per-segment data definition for the data-driven `segments` prop.
@@ -39,7 +40,7 @@ export type SegmentedTrackSegmentData = {
      * Per-segment design token mode overrides. Merged on top of the parent
      * `modes` and the per-index Emphasis defaults.
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override individual segment styles. */
     style?: StyleProp<ViewStyle>
     /** Per-segment accessibility label. */
@@ -60,7 +61,7 @@ export type SegmentedTrackProps = {
      */
     children?: React.ReactNode
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override the container styles. */
     style?: StyleProp<ViewStyle>
     /** Style applied to every segment (data-driven mode only). */
@@ -83,7 +84,7 @@ type SegmentedTrackSegmentProps = {
      * Design token modes for the segment. Merged with parent `modes` and the
      * per-index Emphasis defaults injected by the parent `SegmentedTrack`.
      */
-    modes?: Record<string, any> | undefined
+    modes?: Modes | undefined
     /** Override the segment styles. */
     style?: StyleProp<ViewStyle> | undefined
     /** Per-segment accessibility label. */
@@ -216,7 +217,7 @@ function renderSegments({
 }: {
     segments: SegmentedTrackSegmentData[] | undefined
     children: React.ReactNode | undefined
-    modes: Record<string, any>
+    modes: Modes
     segmentStyle: StyleProp<ViewStyle> | undefined
 }): React.ReactNode[] {
     if (children !== undefined && children !== null) {