jfs-components 0.0.44 → 0.0.47

package/src/components/ProgressBadge/ProgressBadge.tsx

@@ -0,0 +1,172 @@
+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 Icon from '../../icons/Icon'
+import { cloneChildrenWithModes } from '../../utils/react-utils'
+
+export type ProgressBadgeProps = {
+    /** The text displayed in the badge (e.g. "Live price...") */
+    taskName?: string
+    /** The icon name to display to the left of the text */
+    iconName?: string
+    /** The progress value between 0 and 100 */
+    value?: number
+    /** Modes object passed to `getVariableByName` for design token resolution */
+    modes?: Record<string, any>
+    /** Optional container style overrides */
+    style?: StyleProp<ViewStyle>
+    /** Optional text style overrides */
+    textStyle?: StyleProp<TextStyle>
+    /** Accessibility label for screen readers */
+    accessibilityLabel?: string
+} & React.ComponentProps<typeof View>
+
+/**
+ * ProgressBadge component that displays an icon, text, and an internal progress bar.
+ *
+ * All visual attributes resolve from Figma tokens via `getVariableByName` using the provided `modes`.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.taskName="Live price: [price] (00:43)"] - The text displayed.
+ * @param {string} [props.iconName="ic_live"] - Icon name from the registry.
+ * @param {number} [props.value=0] - The progress value between 0 and 100.
+ * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for design tokens.
+ * @param {Object} [props.style] - Optional container style overrides.
+ * @param {Object} [props.textStyle] - Optional text style overrides.
+ * @param {string} [props.accessibilityLabel] - Accessibility label.
+ */
+function ProgressBadge({
+    taskName = 'Live price: [price] (00:43)',
+    iconName = 'ic_live',
+    value = 0,
+    modes = {},
+    style,
+    textStyle: textStyleOverride,
+    accessibilityLabel,
+    ...rest
+}: ProgressBadgeProps) {
+    // Resolve layout tokens
+    const backgroundColor =
+        getVariableByName('progressBadge/background', modes) || '#ffffff'
+    const progressColor =
+        getVariableByName('progressBadge/progress/color', modes) || '#ebebed'
+    const gap = getVariableByName('progressBadge/gap', modes) ?? 12
+    const paddingHorizontal =
+        getVariableByName('progressBadge/padding/horizontal', modes) ?? 16
+    const paddingVertical =
+        getVariableByName('progressBadge/padding/vertical', modes) ?? 6
+    const borderRadius = getVariableByName('progressBadge/radius', modes) ?? 999
+    const descriptionGap =
+        getVariableByName('progressBadge/description/gap', modes) ?? 8
+
+    // Resolve typography tokens
+    const fontFamily =
+        getVariableByName('progressBadge/fontFamily', modes) || 'JioType_Var:Medium'
+    const fontWeightRaw = getVariableByName('progressBadge/fontWeight', modes) ?? 500
+    const fontWeight =
+        typeof fontWeightRaw === 'number'
+            ? fontWeightRaw.toString()
+            : fontWeightRaw
+    const fontSize = getVariableByName('progressBadge/fontSize', modes) ?? 14
+    const lineHeight = getVariableByName('progressBadge/lineHeight', modes) ?? 17
+    const textColor =
+        getVariableByName('progressBadge/foreground', modes) || '#000000'
+
+    // Resolve icon tokens
+    const iconColor =
+        getVariableByName('progressBadge/icon/color', modes) || '#f50030'
+    const iconSize = getVariableByName('progressBadge/icon/size', modes) ?? 18
+
+    const containerStyle: ViewStyle = {
+        backgroundColor,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap,
+        paddingHorizontal,
+        paddingVertical,
+        borderRadius,
+        overflow: 'hidden',
+        position: 'relative',
+        flexWrap: 'wrap',
+    }
+
+    const descriptionContainerStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: descriptionGap,
+        flex: 1,
+        paddingVertical: 0,
+        minHeight: 1,
+        minWidth: 1,
+        position: 'relative',
+    }
+
+    const textStyle: TextStyle = {
+        fontFamily,
+        fontWeight,
+        fontSize,
+        lineHeight,
+        color: textColor,
+        textAlign: 'center',
+        overflow: 'hidden',
+        flexShrink: 0,
+    }
+
+    // Ensure value is between 0 and 100
+    const clampedValue = Math.max(0, Math.min(100, value))
+
+    const progressStyle: ViewStyle = {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: `${clampedValue}%`,
+        backgroundColor: progressColor,
+    }
+
+    const defaultAccessibilityLabel = accessibilityLabel || taskName
+
+    return (
+        <View
+            style={[containerStyle, style]}
+            accessibilityRole="text"
+            accessibilityLabel={defaultAccessibilityLabel}
+            {...rest}
+        >
+            {/* Background Progress Bar */}
+            <View style={progressStyle} pointerEvents="none" />
+
+            {/* Description Header */}
+            <View style={descriptionContainerStyle}>
+                {iconName ? (
+                    <Icon
+                        name={iconName}
+                        size={iconSize}
+                        color={iconColor}
+                        accessibilityElementsHidden={true}
+                        importantForAccessibility="no"
+                    />
+                ) : null}
+                <Text
+                    style={[textStyle, textStyleOverride]}
+                    numberOfLines={1}
+                    ellipsizeMode="tail"
+                    accessibilityElementsHidden={true}
+                    importantForAccessibility="no"
+                >
+                    {taskName}
+                </Text>
+            </View>
+        </View>
+    )
+}
+
+export default ProgressBadge

package/src/components/ProgressBadge/index.ts

@@ -0,0 +1,2 @@
+export { default } from './ProgressBadge'
+export * from './ProgressBadge'

package/src/components/RechargeCard/RechargeCard.tsx

@@ -7,7 +7,7 @@ import MoneyValue from '../MoneyValue/MoneyValue';
 import Button from '../Button/Button';
 
 
-type RechargeCardProps = {
+export type RechargeCardProps = {
     /**
      * Title of the card.
      * Default: "Unlimited 5G"

package/src/components/SegmentedControl/SegmentedControl.tsx

@@ -0,0 +1,168 @@
+import React, { useState, useCallback } from 'react'
+import {
+  View,
+  Pressable,
+  Text,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export type SegmentedControlItem = {
+  key: React.Key
+  label: string
+}
+
+export type SegmentedControlProps = {
+  /** The items to display as segments */
+  items: SegmentedControlItem[]
+  /** The currently selected key (controlled) */
+  selectedKey?: React.Key
+  /** The initially selected key (uncontrolled). Defaults to the first item's key. */
+  defaultSelectedKey?: React.Key
+  /** Callback fired when the selected segment changes */
+  onSelectionChange?: (key: React.Key) => void
+  /** Design token modes for theming */
+  modes?: Record<string, any>
+  /** Override container styles */
+  style?: StyleProp<ViewStyle>
+}
+
+function SegmentedControlSegment({
+  label,
+  active,
+  onPress,
+  modes = {},
+}: {
+  label: string
+  active: boolean
+  onPress: () => void
+  modes: Record<string, any>
+}) {
+  const resolvedModes = {
+    ...modes,
+    'SegmentedControl/Segment': active ? 'Active' : 'Idle',
+  }
+
+  const paddingHorizontal = (getVariableByName('segment/padding/horizontal', resolvedModes) ?? 16) as number
+  const paddingVertical = (getVariableByName('segment/padding/vertical', resolvedModes) ?? 12) as number
+  const radius = (getVariableByName('segment/radius', resolvedModes) ?? 20) as number
+  const background = (getVariableByName('segment/background', resolvedModes) ?? (active ? '#5d00b5' : 'transparent')) as string
+  const foreground = (getVariableByName('segment/foreground', resolvedModes) ?? (active ? '#ffffff' : '#0c0d10')) as string
+  const fontSize = (getVariableByName('segment/fontSize', resolvedModes) ?? 16) as number
+  const fontFamily = (getVariableByName('segment/fontFamily', resolvedModes) ?? 'JioType Var') as string
+  const lineHeight = (getVariableByName('segment/lineHeight', resolvedModes) ?? 19) as number
+  const fontWeight = (getVariableByName('segment/fontWeight', resolvedModes) ?? '500') as string
+
+  const segmentStyle: ViewStyle = {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius: radius,
+    backgroundColor: background,
+  }
+
+  const textStyle: TextStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight: fontWeight as TextStyle['fontWeight'],
+  }
+
+  return (
+    <Pressable
+      style={({ pressed }) => [segmentStyle, pressed && { opacity: 0.8 }]}
+      onPress={onPress}
+      accessibilityRole="tab"
+      accessibilityState={{ selected: active }}
+      accessibilityLabel={label}
+    >
+      <Text style={textStyle}>{label}</Text>
+    </Pressable>
+  )
+}
+
+/**
+ * SegmentedControl component backed by Figma design tokens.
+ *
+ * Provides a horizontal row of mutually exclusive segments.
+ * Supports controlled (`selectedKey` + `onSelectionChange`) and
+ * uncontrolled (`defaultSelectedKey`) usage patterns.
+ *
+ * @component
+ * @param {SegmentedControlProps} props
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = useState<React.Key>('daily');
+ *
+ * <SegmentedControl
+ *   items={[
+ *     { key: 'daily', label: 'Daily' },
+ *     { key: 'weekly', label: 'Weekly' },
+ *     { key: 'monthly', label: 'Monthly' },
+ *   ]}
+ *   selectedKey={selected}
+ *   onSelectionChange={setSelected}
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+function SegmentedControl({
+  items,
+  selectedKey: controlledSelectedKey,
+  defaultSelectedKey,
+  onSelectionChange,
+  modes = {},
+  style,
+}: SegmentedControlProps) {
+  const isControlled = controlledSelectedKey !== undefined
+  const [internalSelectedKey, setInternalSelectedKey] = useState<React.Key | undefined>(
+    defaultSelectedKey ?? items[0]?.key
+  )
+
+  const currentSelectedKey = isControlled ? controlledSelectedKey : internalSelectedKey
+
+  const handlePress = useCallback(
+    (key: React.Key) => {
+      if (!isControlled) {
+        setInternalSelectedKey(key)
+      }
+      onSelectionChange?.(key)
+    },
+    [isControlled, onSelectionChange]
+  )
+
+  const gap = (getVariableByName('segmentedControl/gap', modes) ?? 8) as number
+  const background = (getVariableByName('segmentedControl/background', modes) ?? '#f6f3ff') as string
+  const radius = (getVariableByName('segmentedControl/radius', modes) ?? 24) as number
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: background,
+    borderRadius: radius,
+    gap,
+    overflow: 'hidden',
+  }
+
+  return (
+    <View style={[containerStyle, style]} accessibilityRole="tablist">
+      {items.map((item) => (
+        <SegmentedControlSegment
+          key={String(item.key)}
+          label={item.label}
+          active={item.key === currentSelectedKey}
+          onPress={() => handlePress(item.key)}
+          modes={modes}
+        />
+      ))}
+    </View>
+  )
+}
+
+export default SegmentedControl

package/src/components/StatItem/StatItem.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { View, Text, type StyleProp, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export type StatItemProps = {
+  /** The small descriptive label above the value. */
+  label?: string
+  /** The large prominent value to display. */
+  value?: string
+  /** Design token modes for theming. */
+  modes?: Record<string, any>
+  /** Override container styles. */
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * StatItem displays a label/value pair with the value in a large, bold style.
+ * Useful for metrics, product stats, or KPI callouts.
+ *
+ * @component
+ * @param {StatItemProps} props
+ */
+function StatItem({
+  label = 'Purity verified by NABL',
+  value = '99.99%',
+  modes = {},
+  style,
+}: StatItemProps) {
+  const gap = getVariableByName('statItem/gap', modes) ?? 2
+
+  const labelForeground = getVariableByName('statItem/label/foreground', modes) ?? '#1a1c1f'
+  const labelFontFamily = getVariableByName('statItem/label/fontFamily', modes) ?? 'JioType Var'
+  const labelFontSize = getVariableByName('statItem/label/fontSize', modes) ?? 12
+  const labelFontWeight = getVariableByName('statItem/label/fontWeight', modes) ?? '500'
+  const labelLineHeight = getVariableByName('statItem/label/lineHeight', modes) ?? 16
+
+  const valueForeground = getVariableByName('statItem/value/foreground', modes) ?? '#0d0d0f'
+  const valueFontFamily = getVariableByName('statItem/value/fontFamily', modes) ?? 'JioType Var'
+  const valueFontSize = getVariableByName('statItem/value/fontSize', modes) ?? 26
+  const valueFontWeight = getVariableByName('statItem/value/fontWeight', modes) ?? '900'
+  const valueLineHeight = getVariableByName('statItem/value/lineHeight', modes) ?? 26
+
+  return (
+    <View style={[{ gap: gap as number }, style]}>
+      <Text
+        style={{
+          color: labelForeground as string,
+          fontFamily: labelFontFamily as string,
+          fontSize: labelFontSize as number,
+          fontWeight: String(labelFontWeight) as any,
+          lineHeight: labelLineHeight as number,
+        }}
+      >
+        {label}
+      </Text>
+      <Text
+        style={{
+          color: valueForeground as string,
+          fontFamily: valueFontFamily as string,
+          fontSize: valueFontSize as number,
+          fontWeight: String(valueFontWeight) as any,
+          lineHeight: valueLineHeight as number,
+        }}
+      >
+        {value}
+      </Text>
+    </View>
+  )
+}
+
+export default StatItem

package/src/components/SupportText/SupportText.tsx

@@ -10,7 +10,7 @@ export type SupportTextProps = {
      */
     label?: string;
     /**
-     * Status of the support text (Neutral, Warning, Error, Success)
+     * Status of the support text (Neutral, Warning, Error, Success, Loading)
      */
     status?: SupportTextStatus;
     /**

package/src/components/SupportText/SupportTextIcon.tsx

@@ -3,7 +3,7 @@ import { View, type ViewStyle } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
 
-export type SupportTextStatus = 'Neutral' | 'Warning' | 'Error' | 'Success';
+export type SupportTextStatus = 'Neutral' | 'Warning' | 'Error' | 'Success' | 'Loading';
 
 export type SupportTextIconProps = {
     status?: SupportTextStatus;
@@ -13,9 +13,10 @@ export type SupportTextIconProps = {
 
 const STATUS_ICON_MAP: Record<SupportTextStatus, string> = {
     Neutral: 'ic_info',
-    Warning: 'ic_warning', // Using ic_warning for Warning
-    Error: 'ic_warning',   // Using ic_warning for Error
+    Warning: 'ic_warning',
+    Error: 'ic_warning',
     Success: 'ic_status_successful',
+    Loading: 'ic_time',
 };
 
 function SupportTextIcon({

package/src/components/SwappableAmount/SwappableAmount.tsx

@@ -0,0 +1,92 @@
+import React from 'react'
+import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Button from '../Button/Button'
+
+export type SwappableAmountProps = {
+  /** Large display value (e.g. "49g"). */
+  value?: string
+  /** Whether to show the schedule button above the value. */
+  schedule?: boolean
+  /** Label text for the schedule button (e.g. "Weekly on Mondays"). */
+  scheduleLabel?: string
+  /** Label text for the amount/swap button (e.g. "₹5100"). */
+  amountLabel?: string
+  /** Callback when the schedule button is pressed. */
+  onSchedulePress?: () => void
+  /** Callback when the amount/swap button is pressed. */
+  onAmountPress?: () => void
+  /** Modes configuration for design token resolution. */
+  modes?: Record<string, any>
+  /** Container style override. */
+  style?: ViewStyle
+}
+
+function SwappableAmount({
+  value = '49g',
+  schedule = false,
+  scheduleLabel = 'Weekly on Mondays',
+  amountLabel = '₹5100',
+  onSchedulePress,
+  onAmountPress,
+  modes = {},
+  style,
+}: SwappableAmountProps) {
+  const gap = getVariableByName('swappableAmount/gap', modes) ?? 24
+  const padding = getVariableByName('swappableAmount/padding', modes) ?? 8
+
+  const foreground = getVariableByName('swappableAmount/foreground', modes) ?? '#0d0d0f'
+  const fontSize = getVariableByName('swappableAmount/fontSize', modes) ?? 56
+  const fontFamily = getVariableByName('swappableAmount/fontFamily', modes) ?? 'System'
+  const fontWeight = getVariableByName('swappableAmount/fontWeight', modes) ?? 900
+  const lineHeight = getVariableByName('swappableAmount/lineHeight', modes) ?? 56
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: gap as number,
+    padding: padding as number,
+  }
+
+  const valueTextStyle: TextStyle = {
+    color: foreground as string,
+    fontSize: fontSize as number,
+    fontFamily: fontFamily as string,
+    fontWeight: String(fontWeight) as TextStyle['fontWeight'],
+    lineHeight: lineHeight as number,
+  }
+
+  return (
+    <View style={[containerStyle, style]}>
+      {schedule && (
+        <Button
+          label={scheduleLabel}
+          icon="ic_calendar_week"
+          onPress={onSchedulePress}
+          modes={{
+            ...modes,
+            AppearanceBrand: 'Neutral',
+            Emphasis: 'Low',
+            'Button / Size': 'S',
+          }}
+        />
+      )}
+
+      <Text style={valueTextStyle}>{value}</Text>
+
+      <Button
+        label={amountLabel}
+        icon="ic_data_in_out"
+        onPress={onAmountPress}
+        modes={{
+          ...modes,
+          Emphasis: 'Medium',
+          AppearanceBrand: 'Secondary',
+        }}
+      />
+    </View>
+  )
+}
+
+export default SwappableAmount

package/src/components/Text/Text.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { Text as RNText, type TextStyle, type StyleProp } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+export type TextProps = {
+  /** The text content to display. */
+  text?: string
+  /** Horizontal alignment of the text. */
+  textAlign?: 'Left' | 'Center'
+  /** Modes configuration for design token resolution. */
+  modes?: Record<string, any>
+  /** Style override for the text. */
+  style?: StyleProp<TextStyle>
+  /** Number of lines to limit the text to. */
+  numberOfLines?: number
+}
+
+const TEXT_ALIGN_MAP: Record<NonNullable<TextProps['textAlign']>, TextStyle['textAlign']> = {
+  Left: 'left',
+  Center: 'center',
+}
+
+function Text({
+  text = 'Korem ipsum ',
+  textAlign = 'Left',
+  modes = {},
+  style,
+  numberOfLines,
+}: TextProps) {
+  const foreground = getVariableByName('text/foreground', modes) ?? '#000000'
+  const fontFamily = getVariableByName('text/fontFamily', modes) ?? 'JioType'
+  const fontSize = getVariableByName('text/fontSize', modes) ?? 14
+  const fontWeight = getVariableByName('text/fontWeight', modes) ?? '500'
+  const lineHeight = getVariableByName('text/lineHeight', modes) ?? 20
+  const letterSpacing = getVariableByName('text/letterSpacing', modes) ?? -0.5
+
+  const textStyle: TextStyle = {
+    color: foreground as string,
+    fontFamily: fontFamily as string,
+    fontSize: fontSize as number,
+    fontWeight: String(fontWeight) as TextStyle['fontWeight'],
+    lineHeight: lineHeight as number,
+    letterSpacing: letterSpacing as number,
+    textAlign: TEXT_ALIGN_MAP[textAlign],
+  }
+
+  return (
+    <RNText
+      style={[textStyle, style]}
+      numberOfLines={numberOfLines}
+    >
+      {text}
+    </RNText>
+  )
+}
+
+export default Text