jfs-components 0.0.21 → 0.0.24

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/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,
@@ -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-10T13:33:16.682Z
  */
 
 // Icon name to SVG data mapping