jfs-components 0.0.70 → 0.0.72

package/src/components/Nudge/Nudge.tsx

@@ -1,30 +1,34 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { View, Text, type ViewStyle, type TextStyle, type StyleProp } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
 import Button from '../Button/Button'
+import Icon from '../../icons/Icon'
+
+export type NudgeType = 'stacked-prominent' | 'stacked-detailed' | 'inline-compact'
 
 export type NudgeProps = {
   /**
-   * Controls the layout variant.
-   * - "Default": horizontal layout with optional start icon and content (title/body/button or children slot)
-   * - "Variant2": vertical layout with header (icon + title) and children slot below
+   * Controls the layout type.
+   * - "stacked-prominent": icon + title/body/button content
+   * - "inline-compact": icon + body/button in one row
+   * - "stacked-detailed": header + children detail slot
    */
-  variant?: 'Default' | 'Variant2';
+  type?: NudgeType;
   /** Title text displayed in the nudge */
   title?: string;
-  /** Body text displayed below the title (Default variant only, when no children are provided) */
+  /** Body text displayed in prominent and compact types when no children are provided */
   body?: string;
-  /** Label for the default button (Default variant only, when no children are provided) */
+  /** Label for the default button when no buttonSlot is provided */
   buttonLabel?: string;
   /** Callback for the default button press */
   onPressButton?: () => void;
-  /** Custom button slot (Default variant only, overrides buttonLabel/onPressButton) */
+  /** Custom button slot, overrides buttonLabel/onPressButton */
   buttonSlot?: React.ReactNode;
-  /** Optional leading slot for an icon/element. Pass null or omit to hide. */
-  startSlot?: React.ReactNode;
-  /** Content slot — overrides the default title/body/button content */
+  /** Optional leading slot. Omit for the token-driven sparkle icon, pass null/false to hide. */
+  startSlot?: React.ReactNode | false;
+  /** Content slot — overrides default content, or provides detailed list content */
   children?: React.ReactNode;
   /** Mode configuration for design token resolution */
   modes?: Record<string, any>;
@@ -32,21 +36,32 @@ export type NudgeProps = {
   style?: StyleProp<ViewStyle>;
 };
 
-function Nudge({
-  variant = 'Default',
-  title = 'Split payment',
-  body = 'Split this transaction into installments',
-  buttonLabel = 'Button',
-  onPressButton,
-  buttonSlot,
-  startSlot,
-  children,
-  modes: propModes = EMPTY_MODES,
-  style,
-}: NudgeProps) {
-  const { modes: globalModes } = useTokens()
-  const modes = { ...globalModes, ...propModes }
+interface NudgeTokens {
+  containerBaseStyle: ViewStyle;
+  prominentContainerStyle: ViewStyle;
+  compactContainerStyle: ViewStyle;
+  detailedContainerStyle: ViewStyle;
+  contentStyle: ViewStyle;
+  compactOuterContentStyle: ViewStyle;
+  compactContentWrapStyle: ViewStyle;
+  textWrapStyle: ViewStyle;
+  compactTextWrapStyle: ViewStyle;
+  headerStyle: ViewStyle;
+  detailSlotStyle: ViewStyle;
+  titleTextStyle: TextStyle;
+  bodyTextStyle: TextStyle;
+  iconColor: string;
+  iconSize: number;
+  startSlotGap: number;
+}
+
+function toFontWeight(value: unknown, fallback: TextStyle['fontWeight']): TextStyle['fontWeight'] {
+  if (typeof value === 'number') return value.toString() as TextStyle['fontWeight']
+  if (typeof value === 'string') return value as TextStyle['fontWeight']
+  return fallback
+}
 
+function resolveNudgeTokens(modes: Record<string, any>): NudgeTokens {
   const background = getVariableByName('nudge/background', modes) || '#f5f5f5'
   const radius = getVariableByName('nudge/radius', modes) || 12
   const paddingH = getVariableByName('nudge/padding/horizontal', modes) || 12
@@ -55,96 +70,221 @@ function Nudge({
 
   const titleColor = getVariableByName('nudge/title/color', modes) || '#0d0d0f'
   const titleFontSize = getVariableByName('nudge/title/fontSize', modes) || 14
-  const titleFontFamily = getVariableByName('nudge/title/fontFamily', modes) || 'JioType Var'
+  const titleFontFamily = getVariableByName('nudge/title/fontFamily', modes) || 'System'
   const titleLineHeight = getVariableByName('nudge/title/lineHeight', modes) || 15
-  const titleFontWeightRaw = getVariableByName('nudge/title/fontWeight', modes) || 700
-  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
+  const titleFontWeight = toFontWeight(getVariableByName('nudge/title/fontWeight', modes), '700')
 
   const bodyColor = getVariableByName('nudge/body/color', modes) || '#1a1c1f'
   const bodyFontSize = getVariableByName('nudge/body/fontSize', modes) || 12
-  const bodyFontFamily = getVariableByName('nudge/body/fontFamily', modes) || 'JioType Var'
+  const bodyFontFamily = getVariableByName('nudge/body/fontFamily', modes) || 'System'
   const bodyLineHeight = getVariableByName('nudge/body/lineHeight', modes) || 16
-  const bodyFontWeightRaw = getVariableByName('nudge/body/fontWeight', modes) || 500
-  const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw
+  const bodyFontWeight = toFontWeight(getVariableByName('nudge/body/fontWeight', modes), '500')
 
   const textGap = getVariableByName('nudge/text/gap', modes) || 4
   const contentGap = getVariableByName('nudge/content/gap', modes) || 8
   const contentMinHeight = getVariableByName('nudge/content/minHeight', modes) || 20
+  const startSlotGap = getVariableByName('nudge/startSlot/gap', modes) || 4
 
-  const containerStyle: ViewStyle = {
-    backgroundColor: background,
-    borderRadius: radius,
-    paddingHorizontal: paddingH,
-    paddingVertical: paddingV,
-    gap,
-    overflow: 'hidden',
-    ...(variant === 'Variant2'
-      ? { flexDirection: 'column', alignItems: 'flex-start' }
-      : { flexDirection: 'row', alignItems: 'flex-start' }),
+  return {
+    containerBaseStyle: {
+      backgroundColor: background as string,
+      borderRadius: radius as number,
+      paddingHorizontal: paddingH as number,
+      paddingVertical: paddingV as number,
+      gap: gap as number,
+      overflow: 'hidden',
+    },
+    prominentContainerStyle: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+    },
+    compactContainerStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    detailedContainerStyle: {
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+    },
+    contentStyle: {
+      flex: 1,
+      minWidth: 1,
+      minHeight: contentMinHeight as number,
+      justifyContent: 'center',
+      overflow: 'hidden',
+    },
+    compactOuterContentStyle: {
+      flex: 1,
+      minWidth: 1,
+      alignSelf: 'stretch',
+      justifyContent: 'center',
+    },
+    compactContentWrapStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: contentGap as number,
+      width: '100%',
+    },
+    textWrapStyle: {
+      gap: textGap as number,
+      alignItems: 'flex-start',
+      width: '100%',
+    },
+    compactTextWrapStyle: {
+      flex: 1,
+      minWidth: 1,
+      alignItems: 'flex-start',
+    },
+    headerStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: gap as number,
+      width: '100%',
+    },
+    detailSlotStyle: {
+      gap: getVariableByName('slot/gap', modes) || 8,
+      width: '100%',
+    },
+    titleTextStyle: {
+      color: titleColor as string,
+      fontSize: titleFontSize as number,
+      fontFamily: titleFontFamily as string,
+      lineHeight: titleLineHeight as number,
+      fontWeight: titleFontWeight,
+    },
+    bodyTextStyle: {
+      color: bodyColor as string,
+      fontSize: bodyFontSize as number,
+      fontFamily: bodyFontFamily as string,
+      lineHeight: bodyLineHeight as number,
+      fontWeight: bodyFontWeight,
+    },
+    iconColor: (getVariableByName('appearance/nudge/icon/color', modes) || '#5d00b5') as string,
+    iconSize: (getVariableByName('nudge/icon/size', modes) || 20) as number,
+    startSlotGap: startSlotGap as number,
   }
+}
 
-  const titleStyle: TextStyle = {
-    color: titleColor,
-    fontSize: titleFontSize,
-    fontFamily: titleFontFamily,
-    lineHeight: titleLineHeight,
-    fontWeight: titleFontWeight,
-  }
+function NudgeImpl({
+  type = 'stacked-prominent',
+  title = 'Split payment',
+  body = 'Split this transaction into installments',
+  buttonLabel = 'Button',
+  onPressButton,
+  buttonSlot,
+  startSlot,
+  children,
+  modes: propModes = EMPTY_MODES,
+  style,
+}: NudgeProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () => (globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+      ? EMPTY_MODES
+      : { ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
 
-  const bodyStyle: TextStyle = {
-    color: bodyColor,
-    fontSize: bodyFontSize,
-    fontFamily: bodyFontFamily,
-    lineHeight: bodyLineHeight,
-    fontWeight: bodyFontWeight,
-  }
+  const tokens = useMemo(() => resolveNudgeTokens(modes), [modes])
+
+  const startSlotElement = useMemo(() => {
+    if (startSlot === null || startSlot === false) return null
+
+    if (startSlot !== undefined) {
+      const processed = cloneChildrenWithModes(React.Children.toArray(startSlot), modes)
+      return processed.length === 1 ? processed[0] : processed
+    }
+
+    return (
+      <Icon
+        name="ic_ai_sparkle"
+        size={tokens.iconSize}
+        color={tokens.iconColor}
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
+      />
+    )
+  }, [startSlot, modes, tokens.iconColor, tokens.iconSize])
+
+  const startSlotWrapper = startSlotElement ? (
+    <View style={{ gap: tokens.startSlotGap, alignItems: 'center' }}>
+      {startSlotElement}
+    </View>
+  ) : null
 
-  const processedStartSlot = startSlot
-    ? cloneChildrenWithModes(React.Children.toArray(startSlot), modes)
-    : null
+  const processedChildren = useMemo(() => {
+    if (!children) return null
+    const processed = cloneChildrenWithModes(React.Children.toArray(children), modes)
+    return processed.length === 1 ? processed[0] : processed
+  }, [children, modes])
 
-  const startSlotElement = processedStartSlot && processedStartSlot.length > 0
-    ? (processedStartSlot.length === 1 ? processedStartSlot[0] : processedStartSlot)
-    : null
+  const buttonElement = buttonSlot
+    ? cloneChildrenWithModes(React.Children.toArray(buttonSlot), modes)
+    : (
+      <Button
+        label={buttonLabel}
+        modes={modes}
+        {...(onPressButton ? { onPress: onPressButton } : {})}
+      />
+    )
 
-  if (variant === 'Variant2') {
+  if (type === 'stacked-detailed') {
     return (
-      <View style={[containerStyle, style]}>
-        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, width: '100%' }}>
-          {startSlotElement}
-          <Text style={[titleStyle, { flex: 1 }]}>{title}</Text>
+      <View style={[tokens.containerBaseStyle, tokens.detailedContainerStyle, style]}>
+        <View style={tokens.headerStyle}>
+          {startSlotWrapper}
+          <Text style={[tokens.titleTextStyle, { flex: 1 }]}>{title}</Text>
         </View>
 
-        {children ? (
-          cloneChildrenWithModes(React.Children.toArray(children), modes)
+        {processedChildren ? (
+          <View style={tokens.detailSlotStyle}>
+            {processedChildren}
+          </View>
         ) : null}
       </View>
     )
   }
 
-  const defaultContent = (
-    <View style={{ gap: contentGap, alignItems: 'flex-start', width: '100%' }}>
-      <View style={{ gap: textGap, alignItems: 'flex-start', width: '100%' }}>
-        <Text style={titleStyle}>{title}</Text>
-        <Text style={bodyStyle}>{body}</Text>
+  if (type === 'inline-compact') {
+    return (
+      <View style={[tokens.containerBaseStyle, tokens.compactContainerStyle, style]}>
+        {startSlotWrapper}
+
+        <View style={tokens.compactOuterContentStyle}>
+          {processedChildren || (
+            <View style={tokens.compactContentWrapStyle}>
+              <View style={tokens.compactTextWrapStyle}>
+                <Text style={tokens.bodyTextStyle}>{body}</Text>
+              </View>
+              {buttonElement}
+            </View>
+          )}
+        </View>
+      </View>
+    )
+  }
+
+  const prominentContent = (
+    <View style={{ gap: tokens.compactContentWrapStyle.gap as number, alignItems: 'flex-start', width: '100%' }}>
+      <View style={tokens.textWrapStyle}>
+        <Text style={tokens.titleTextStyle}>{title}</Text>
+        <Text style={tokens.bodyTextStyle}>{body}</Text>
       </View>
-      {buttonSlot
-        ? cloneChildrenWithModes(React.Children.toArray(buttonSlot), modes)
-        : <Button label={buttonLabel} onPress={onPressButton} modes={modes} />}
+      {buttonElement}
     </View>
   )
 
   return (
-    <View style={[containerStyle, style]}>
-      {startSlotElement}
+    <View style={[tokens.containerBaseStyle, tokens.prominentContainerStyle, style]}>
+      {startSlotWrapper}
 
-      <View style={{ flex: 1, minWidth: 1, minHeight: contentMinHeight, justifyContent: 'center', overflow: 'hidden' }}>
-        {children
-          ? cloneChildrenWithModes(React.Children.toArray(children), modes)
-          : defaultContent}
+      <View style={tokens.contentStyle}>
+        {processedChildren || prominentContent}
       </View>
     </View>
   )
 }
 
+const Nudge = React.memo(NudgeImpl)
+
 export default Nudge

package/src/components/Radio/Radio.tsx

@@ -0,0 +1,227 @@
+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'
+import { EMPTY_MODES } from '../../utils/react-utils'
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+export interface RadioProps {
+    /**
+     * Whether the radio is selected.
+     */
+    selected?: boolean
+    /**
+     * Whether the radio is disabled.
+     */
+    disabled?: boolean
+    /**
+     * Function to call when the radio is pressed.
+     */
+    onPress?: () => void
+    /**
+     * Modes object for design-token resolution.
+     */
+    modes?: Record<string, any>
+    /**
+     * Custom style for the radio container.
+     */
+    style?: StyleProp<ViewStyle>
+    /**
+     * Test ID for testing.
+     */
+    testID?: string
+}
+
+// ---------------------------------------------------------------------------
+// Radio
+// ---------------------------------------------------------------------------
+
+export function Radio({
+    selected = false,
+    disabled = false,
+    onPress,
+    modes = EMPTY_MODES,
+    style,
+    testID,
+}: RadioProps) {
+    // ---- 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 Radios, 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 Radio