jfs-components 0.0.21 → 0.0.25

package/src/components/PageTitle/PageTitle.tsx

@@ -86,7 +86,7 @@ function PageTitle({
     <View
       style={[containerStyle, style]}
       accessibilityRole="header"
-      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
       {...rest}
     >

package/src/components/RadioButton/RadioButton.mdx

@@ -0,0 +1,92 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as RadioButtonStories from './RadioButton.stories';
+import { RadioButton } from './RadioButton';
+
+<Meta of={RadioButtonStories} />
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+
+### Colors Router
+- **Modes:** POC | Old
+- **Default:** POC
+
+## Usage
+
+# RadioButton
+
+A standard RadioButton component. This component is used to select a single option from a set of options.
+
+## Default
+
+<Canvas of={RadioButtonStories.Default} />
+
+<Controls of={RadioButtonStories.Default} />
+
+## States
+
+<Canvas of={RadioButtonStories.AllStates} />
+
+
+```tsx
+import React, { useState } from 'react';
+import { RadioButton } from 'jfs-components';
+import { View, Text } from 'react-native';
+
+export default function App() {
+  const [selected, setSelected] = useState(false);
+
+  return (
+    <RadioButton 
+      selected={selected} 
+      onPress={() => setSelected(!selected)} 
+    />
+  );
+}
+```
+
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`radio/background/color`**
+- **`radio/disabled/background/color`**
+- **`radio/disabled/border/color`**
+- **`radio/disabled/radio/disabled/border/size`**
+- **`radio/disabledSelected/background`**
+- **`radio/disabledSelected/border/color`**
+- **`radio/disabledSelected/selector/background/color`**
+- **`radio/focus/background/color`**
+- **`radio/focus/border/color`**
+- **`radio/focus/border/size`**
+- **`radio/focus/boxShadow/size`**
+- **`radio/focus/shadow/color`**
+- **`radio/focusSelected/background/color`**
+- **`radio/focusSelected/border/size`**
+- **`radio/focusSelected/selector/background/color`**
+- **`radio/height`**
+- **`radio/hover/background/color`**
+- **`radio/hover/border/color`**
+- **`radio/hover/boxShadow/size`**
+- **`radio/hover/shadow/color`**
+- **`radio/hoverSelected/background/color`**
+- **`radio/hoverSelected/border/color`**
+- **`radio/hoverSelected/boxShadow/size`**
+- **`radio/hoverSelected/selector/background/color`**
+- **`radio/hoverSelected/shadow/color`**
+- **`radio/idle/background/color`**
+- **`radio/idle/border/color`**
+- **`radio/selected/background/color`**
+- **`radio/selected/border/color`**
+- **`radio/selected/selector/background/color`**
+- **`radio/selector/size`**
+- **`radio/width`**
+
+All tokens support mode-based theming through the `modes` prop.
+

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,226 @@
+import React, { useMemo, useState } from 'react'
+import {
+    Pressable,
+    View,
+    StyleSheet,
+    Platform,
+    ViewStyle,
+    DimensionValue,
+    StyleProp,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface RadioButtonProps {
+    /**
+     * Whether the radio button is selected.
+     */
+    selected?: boolean
+    /**
+     * Whether the radio button is disabled.
+     */
+    disabled?: boolean
+    /**
+     * Function to call when the radio button is pressed.
+     */
+    onPress?: () => void
+    /**
+     * Modes object for design-token resolution.
+     */
+    modes?: Record<string, any>
+    /**
+     * Custom style for the radio button container.
+     */
+    style?: StyleProp<ViewStyle>
+    /**
+     * Test ID for testing.
+     */
+    testID?: string
+}
+
+// ---------------------------------------------------------------------------
+// RadioButton
+// ---------------------------------------------------------------------------
+
+export function RadioButton({
+    selected = false,
+    disabled = false,
+    onPress,
+    modes = {},
+    style,
+    testID,
+}: RadioButtonProps) {
+    // ---- Refs & State ----
+    const [hovered, setHovered] = useState(false)
+    const [focused, setFocused] = useState(false)
+    const [pressed, setPressed] = useState(false)
+
+    // ---- Dimensions ----
+    const widthStr = getVariableByName('radio/width', modes) || '18'
+    const heightStr = getVariableByName('radio/height', modes) || '18'
+    const selectorSizeStr = getVariableByName('radio/selector/size', modes) || '10'
+
+    const width = parseFloat(widthStr?.toString() || '18')
+    const height = parseFloat(heightStr?.toString() || '18')
+    const selectorSize = parseFloat(selectorSizeStr?.toString() || '10')
+
+    // ---- State Logic ----
+    // Priority: Disabled -> Focused -> Hover/Pressed -> Idle
+    // Note: Design treats Active (Pressed) similar to Selected for some styles, 
+    // but usually in Radio Buttons, Pressed is a transient state.
+    // We will map:
+    // - Disabled -> 'disabled'
+    // - Focused -> 'focus'
+    // - Hovered -> 'hover'
+    // - Idle -> 'idle'
+
+    // We handle `selected` as a separate dimension derived from state.
+
+    let visualState = 'idle'
+    if (disabled) {
+        visualState = 'disabled'
+    } else if (focused) {
+        visualState = 'focus'
+    } else if (hovered || pressed) {
+        visualState = 'hover'
+    }
+
+    // Construct token paths based on state + selected
+    let prefix = `radio/${visualState}`
+    if (visualState === 'idle' && selected) {
+        prefix = `radio/selected`
+    } else if (selected) {
+        prefix = `radio/${visualState}Selected`
+    }
+
+    // ---- Colors & Border ----
+
+    const resolveColor = (path: string, fallback: string) => {
+        return getVariableByName(path, modes) || fallback
+    }
+
+    // Background Color
+    let bgColorVar = `${prefix}/background/color`
+    // Fix for disabledSelected weirdness if needed
+    if (visualState === 'disabled' && selected) {
+        // Check specific path from dump: `radio/disabledSelected/background`
+        if (!getVariableByName(`${prefix}/background/color`, modes)) {
+            bgColorVar = `${prefix}/background`
+        }
+    }
+
+    // Border Color
+    let borderColorVar = `${prefix}/border/color`
+
+    // Border Width
+    let borderWidthVar = `${prefix}/border/size`
+    // Fix for huge path: `radio/disabled/radio/disabled/border/size`
+    if (visualState === 'disabled' && !selected) {
+        if (getVariableByName('radio/disabled/radio/disabled/border/size', modes)) {
+            borderWidthVar = 'radio/disabled/radio/disabled/border/size'
+        }
+    }
+
+    // Selector Color
+    let selectorBgVar = `${prefix}/selector/background/color`
+    if (!selected) {
+        selectorBgVar = 'transparent'
+    }
+
+    // Shadows (Glow)
+    let shadowSizeVar = `${prefix}/boxShadow/size`
+    let shadowColorVar = `${prefix}/shadow/color`
+
+    // Resolve Values
+    const backgroundColor = resolveColor(bgColorVar, 'transparent')
+    const borderColor = resolveColor(borderColorVar, 'transparent')
+    const borderWidth = parseFloat(getVariableByName(borderWidthVar, modes)?.toString() || '1')
+    const selectorColor = resolveColor(selectorBgVar, 'transparent')
+
+    const shadowSize = parseFloat(getVariableByName(shadowSizeVar, modes)?.toString() || '0')
+    const shadowColor = resolveColor(shadowColorVar, 'transparent')
+
+    // Styles
+    const containerStyle: any = {
+        width,
+        height,
+        borderRadius: width / 2, // 9999px -> circle
+        borderWidth,
+        borderColor,
+        backgroundColor,
+        justifyContent: 'center',
+        alignItems: 'center',
+        // Web shadow (ring)
+        ...(Platform.OS === 'web' && shadowSize > 0 ? {
+            boxShadow: `0px 0px 0px ${shadowSize}px ${shadowColor}`,
+        } : {}),
+    }
+
+    const selectorStyle: ViewStyle = {
+        width: selectorSize,
+        height: selectorSize,
+        borderRadius: selectorSize / 2,
+        backgroundColor: selectorColor,
+    }
+
+    // Dummy block for token extraction (static analysis)
+    if (false as boolean) {
+        getVariableByName('radio/idle/background/color')
+        getVariableByName('radio/idle/border/color')
+        getVariableByName('radio/selector/size')
+        getVariableByName('radio/width')
+        getVariableByName('radio/height')
+        getVariableByName('radio/background/color')
+        getVariableByName('radio/hover/background/color')
+        getVariableByName('radio/hover/border/color')
+        getVariableByName('radio/hover/boxShadow/size')
+        getVariableByName('radio/hover/shadow/color')
+        getVariableByName('radio/selected/background/color')
+        getVariableByName('radio/selected/border/color')
+        getVariableByName('radio/selected/selector/background/color')
+        getVariableByName('radio/hoverSelected/background/color')
+        getVariableByName('radio/hoverSelected/border/color')
+        getVariableByName('radio/hoverSelected/boxShadow/size')
+        getVariableByName('radio/hoverSelected/shadow/color')
+        getVariableByName('radio/hoverSelected/selector/background/color')
+        getVariableByName('radio/focus/background/color')
+        getVariableByName('radio/focus/border/color')
+        getVariableByName('radio/focus/border/size')
+        getVariableByName('radio/focus/boxShadow/size')
+        getVariableByName('radio/focus/shadow/color')
+        getVariableByName('radio/focusSelected/background/color')
+        getVariableByName('radio/focusSelected/selector/background/color')
+        getVariableByName('radio/focusSelected/border/size')
+        getVariableByName('radio/disabled/radio/disabled/border/size')
+        getVariableByName('radio/disabled/background/color')
+        getVariableByName('radio/disabled/border/color')
+        getVariableByName('radio/disabledSelected/selector/background/color')
+        getVariableByName('radio/disabledSelected/background')
+        getVariableByName('radio/disabledSelected/border/color')
+    }
+
+    return (
+        <Pressable
+            testID={testID}
+            disabled={disabled}
+            onPress={onPress}
+            onHoverIn={() => setHovered(true)}
+            onHoverOut={() => setHovered(false)}
+            onFocus={() => setFocused(true)}
+            onBlur={() => setFocused(false)}
+            onPressIn={() => setPressed(true)}
+            onPressOut={() => setPressed(false)}
+            style={({ pressed: isPressed }) => [
+                containerStyle,
+                style,
+            ]}
+        >
+            <View style={selectorStyle} />
+        </Pressable>
+    )
+}
+
+export default RadioButton

package/src/components/Section/Section.tsx

@@ -189,14 +189,14 @@ function Section({
     <View
       style={[containerStyle, style]}
       accessibilityRole={'region' as any}
-      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
       {...rest}
     >
       {onPress ? (
         <Pressable
           accessibilityRole="button"
-          accessibilityLabel={title}
+          accessibilityLabel={undefined}
           accessibilityHint={accessibilityHint || "Opens section details"}
           onPress={onPress}
           onPressIn={(e: any) => {
@@ -287,7 +287,7 @@ function SectionBento({
   upiSlot,
   modes = {},
   style,
-  accessibilityLabel = "Bento section",
+  accessibilityLabel = undefined,
   accessibilityHint,
   ...rest
 }: SectionBentoProps) {
@@ -321,7 +321,7 @@ function SectionBento({
     <View
       style={[containerStyle, style]}
       accessibilityRole={'region' as any}
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
       {...rest}
     >

package/src/components/TextInput/TextInput.tsx

@@ -280,7 +280,7 @@ function TextInput({
         </View>
       )}
       <RNTextInput
-        accessibilityLabel={defaultAccessibilityLabel}
+        accessibilityLabel={undefined}
         accessibilityHint={accessibilityHint}
         placeholder={displayPlaceholder}
         value={value}

package/src/components/TransactionDetails/TransactionDetails.tsx

@@ -99,7 +99,7 @@ function Item({
     <View
       style={[containerStyle, style]}
       accessibilityRole="text"
-      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityLabel={undefined}
       {...rest}
     >
       <Text
@@ -185,7 +185,7 @@ function TransactionDetails({
     <View
       style={[containerStyle, style]}
       accessibilityRole="summary"
-      accessibilityLabel={accessibilityLabel || 'Transaction details'}
+      accessibilityLabel={undefined}
       {...rest}
     >
       {processedChildren}

package/src/components/UpiHandle/UpiHandle.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Pressable, View, Text, Image, type ViewStyle, type TextStyle, type ImageStyle } from 'react-native'
+import { Pressable, View, Text, Image, type ViewStyle, type TextStyle, type ImageStyle, type ImageSourcePropType } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import Icon from '../../icons/Icon'
@@ -13,6 +13,7 @@ type UpiHandleProps = {
   modes?: Record<string, any>;
   showIcon?: boolean;
   iconName?: string;
+  avatarSource?: ImageSourcePropType;
   accessibilityLabel?: string;
   accessibilityHint?: string;
   onPress?: () => void;
@@ -36,6 +37,7 @@ type UpiHandleProps = {
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
  * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set (e.g. 'ic_qr_code', 'ic_scan_qr_code').
+ * @param {ImageSourcePropType} [props.avatarSource] - Optional custom image source for the avatar.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
@@ -44,6 +46,7 @@ function UpiHandle({
   modes: propModes = {},
   showIcon = true,
   iconName = 'ic_scan_qr_code',
+  avatarSource,
   onPress,
   disabled,
   accessibilityLabel,
@@ -137,7 +140,7 @@ function UpiHandle({
     <Wrapper
       style={[containerStyle, pressedStyle, focusStyle]}
       accessibilityRole="text"
-      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityLabel={undefined}
       {...(accessibilityHint !== undefined ? { accessibilityHint } : {})}
       onPress={onPress}
       disabled={(rest as any)?.disabled ?? disabled}
@@ -160,7 +163,7 @@ function UpiHandle({
       {...rest}
     >
       <Image
-        source={DEFAULT_AVATAR_IMAGE}
+        source={avatarSource || DEFAULT_AVATAR_IMAGE}
         style={avatarBaseStyle}
         resizeMode="cover"
         accessibilityElementsHidden={true}

package/src/components/index.ts

@@ -47,4 +47,5 @@ export { default as ChipSelect, type ChipSelectProps } from './ChipSelect/ChipSe
 export { default as InputSearch, type InputSearchProps } from './InputSearch/InputSearch';
 export { default as SupportText, type SupportTextProps } from './SupportText/SupportText';
 export { default as SupportTextIcon, type SupportTextIconProps } from './SupportText/SupportTextIcon';
+export { default as RadioButton, type RadioButtonProps } from './RadioButton/RadioButton';
 

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-02-06T15:39:03.973Z
+ * Generated: 2026-02-10T14:09:41.694Z
  */
 
 // Icon name to SVG data mapping