jfs-components 0.0.70 → 0.0.72

package/lib/module/components/Nudge/Nudge.js

@@ -1,31 +1,19 @@
 "use strict";
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, Text } 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';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function Nudge({
-  variant = 'Default',
-  title = 'Split payment',
-  body = 'Split this transaction into installments',
-  buttonLabel = 'Button',
-  onPressButton,
-  buttonSlot,
-  startSlot,
-  children,
-  modes: propModes = EMPTY_MODES,
-  style
-}) {
-  const {
-    modes: globalModes
-  } = useTokens();
-  const modes = {
-    ...globalModes,
-    ...propModes
-  };
+function toFontWeight(value, fallback) {
+  if (typeof value === 'number') return value.toString();
+  if (typeof value === 'string') return value;
+  return fallback;
+}
+function resolveNudgeTokens(modes) {
   const background = getVariableByName('nudge/background', modes) || '#f5f5f5';
   const radius = getVariableByName('nudge/radius', modes) || 12;
   const paddingH = getVariableByName('nudge/padding/horizontal', modes) || 12;
@@ -33,106 +21,209 @@ function Nudge({
   const gap = getVariableByName('nudge/gap', modes) || 6;
   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 containerStyle = {
-    backgroundColor: background,
-    borderRadius: radius,
-    paddingHorizontal: paddingH,
-    paddingVertical: paddingV,
-    gap,
-    overflow: 'hidden',
-    ...(variant === 'Variant2' ? {
+  const startSlotGap = getVariableByName('nudge/startSlot/gap', modes) || 4;
+  return {
+    containerBaseStyle: {
+      backgroundColor: background,
+      borderRadius: radius,
+      paddingHorizontal: paddingH,
+      paddingVertical: paddingV,
+      gap: gap,
+      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,
+      justifyContent: 'center',
+      overflow: 'hidden'
+    },
+    compactOuterContentStyle: {
+      flex: 1,
+      minWidth: 1,
+      alignSelf: 'stretch',
+      justifyContent: 'center'
+    },
+    compactContentWrapStyle: {
       flexDirection: 'row',
+      alignItems: 'center',
+      gap: contentGap,
+      width: '100%'
+    },
+    textWrapStyle: {
+      gap: textGap,
+      alignItems: 'flex-start',
+      width: '100%'
+    },
+    compactTextWrapStyle: {
+      flex: 1,
+      minWidth: 1,
       alignItems: 'flex-start'
-    })
-  };
-  const titleStyle = {
-    color: titleColor,
-    fontSize: titleFontSize,
-    fontFamily: titleFontFamily,
-    lineHeight: titleLineHeight,
-    fontWeight: titleFontWeight
-  };
-  const bodyStyle = {
-    color: bodyColor,
-    fontSize: bodyFontSize,
-    fontFamily: bodyFontFamily,
-    lineHeight: bodyLineHeight,
-    fontWeight: bodyFontWeight
+    },
+    headerStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: gap,
+      width: '100%'
+    },
+    detailSlotStyle: {
+      gap: getVariableByName('slot/gap', modes) || 8,
+      width: '100%'
+    },
+    titleTextStyle: {
+      color: titleColor,
+      fontSize: titleFontSize,
+      fontFamily: titleFontFamily,
+      lineHeight: titleLineHeight,
+      fontWeight: titleFontWeight
+    },
+    bodyTextStyle: {
+      color: bodyColor,
+      fontSize: bodyFontSize,
+      fontFamily: bodyFontFamily,
+      lineHeight: bodyLineHeight,
+      fontWeight: bodyFontWeight
+    },
+    iconColor: getVariableByName('appearance/nudge/icon/color', modes) || '#5d00b5',
+    iconSize: getVariableByName('nudge/icon/size', modes) || 20,
+    startSlotGap: startSlotGap
   };
-  const processedStartSlot = startSlot ? cloneChildrenWithModes(React.Children.toArray(startSlot), modes) : null;
-  const startSlotElement = processedStartSlot && processedStartSlot.length > 0 ? processedStartSlot.length === 1 ? processedStartSlot[0] : processedStartSlot : null;
-  if (variant === 'Variant2') {
+}
+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
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  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 /*#__PURE__*/_jsx(Icon, {
+      name: "ic_ai_sparkle",
+      size: tokens.iconSize,
+      color: tokens.iconColor,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    });
+  }, [startSlot, modes, tokens.iconColor, tokens.iconSize]);
+  const startSlotWrapper = startSlotElement ? /*#__PURE__*/_jsx(View, {
+    style: {
+      gap: tokens.startSlotGap,
+      alignItems: 'center'
+    },
+    children: startSlotElement
+  }) : 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 buttonElement = buttonSlot ? cloneChildrenWithModes(React.Children.toArray(buttonSlot), modes) : /*#__PURE__*/_jsx(Button, {
+    label: buttonLabel,
+    modes: modes,
+    ...(onPressButton ? {
+      onPress: onPressButton
+    } : {})
+  });
+  if (type === 'stacked-detailed') {
     return /*#__PURE__*/_jsxs(View, {
-      style: [containerStyle, style],
+      style: [tokens.containerBaseStyle, tokens.detailedContainerStyle, style],
       children: [/*#__PURE__*/_jsxs(View, {
-        style: {
-          flexDirection: 'row',
-          alignItems: 'center',
-          gap: 6,
-          width: '100%'
-        },
-        children: [startSlotElement, /*#__PURE__*/_jsx(Text, {
-          style: [titleStyle, {
+        style: tokens.headerStyle,
+        children: [startSlotWrapper, /*#__PURE__*/_jsx(Text, {
+          style: [tokens.titleTextStyle, {
             flex: 1
           }],
           children: title
         })]
-      }), children ? cloneChildrenWithModes(React.Children.toArray(children), modes) : null]
+      }), processedChildren ? /*#__PURE__*/_jsx(View, {
+        style: tokens.detailSlotStyle,
+        children: processedChildren
+      }) : null]
+    });
+  }
+  if (type === 'inline-compact') {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [tokens.containerBaseStyle, tokens.compactContainerStyle, style],
+      children: [startSlotWrapper, /*#__PURE__*/_jsx(View, {
+        style: tokens.compactOuterContentStyle,
+        children: processedChildren || /*#__PURE__*/_jsxs(View, {
+          style: tokens.compactContentWrapStyle,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: tokens.compactTextWrapStyle,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: tokens.bodyTextStyle,
+              children: body
+            })
+          }), buttonElement]
+        })
+      })]
     });
   }
-  const defaultContent = /*#__PURE__*/_jsxs(View, {
+  const prominentContent = /*#__PURE__*/_jsxs(View, {
     style: {
-      gap: contentGap,
+      gap: tokens.compactContentWrapStyle.gap,
       alignItems: 'flex-start',
       width: '100%'
     },
     children: [/*#__PURE__*/_jsxs(View, {
-      style: {
-        gap: textGap,
-        alignItems: 'flex-start',
-        width: '100%'
-      },
+      style: tokens.textWrapStyle,
       children: [/*#__PURE__*/_jsx(Text, {
-        style: titleStyle,
+        style: tokens.titleTextStyle,
         children: title
       }), /*#__PURE__*/_jsx(Text, {
-        style: bodyStyle,
+        style: tokens.bodyTextStyle,
         children: body
       })]
-    }), buttonSlot ? cloneChildrenWithModes(React.Children.toArray(buttonSlot), modes) : /*#__PURE__*/_jsx(Button, {
-      label: buttonLabel,
-      onPress: onPressButton,
-      modes: modes
-    })]
+    }), buttonElement]
   });
   return /*#__PURE__*/_jsxs(View, {
-    style: [containerStyle, style],
-    children: [startSlotElement, /*#__PURE__*/_jsx(View, {
-      style: {
-        flex: 1,
-        minWidth: 1,
-        minHeight: contentMinHeight,
-        justifyContent: 'center',
-        overflow: 'hidden'
-      },
-      children: children ? cloneChildrenWithModes(React.Children.toArray(children), modes) : defaultContent
+    style: [tokens.containerBaseStyle, tokens.prominentContainerStyle, style],
+    children: [startSlotWrapper, /*#__PURE__*/_jsx(View, {
+      style: tokens.contentStyle,
+      children: processedChildren || prominentContent
     })]
   });
 }
+const Nudge = /*#__PURE__*/React.memo(NudgeImpl);
 export default Nudge;

package/lib/module/components/Radio/Radio.js

@@ -0,0 +1,188 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { Pressable, View, Platform } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+import { jsx as _jsx } from "react/jsx-runtime";
+// ---------------------------------------------------------------------------
+// Radio
+// ---------------------------------------------------------------------------
+
+export function Radio({
+  selected = false,
+  disabled = false,
+  onPress,
+  modes = EMPTY_MODES,
+  style,
+  testID
+}) {
+  // ---- 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, fallback) => {
+    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 = {
+    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 = {
+    width: selectorSize,
+    height: selectorSize,
+    borderRadius: selectorSize / 2,
+    backgroundColor: selectorColor
+  };
+
+  // Dummy block for token extraction (static analysis)
+  if (false) {
+    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 /*#__PURE__*/_jsx(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],
+    children: /*#__PURE__*/_jsx(View, {
+      style: selectorStyle
+    })
+  });
+}
+export default Radio;