jfs-components 0.0.69 → 0.0.71

package/src/components/MediaCard/MediaCard.tsx

@@ -1,8 +1,8 @@
 import React, { createContext, useContext } from 'react'
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType, Platform } from 'react-native'
-import { BlurView, type BlurTint } from 'expo-blur'
+import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Image from '../Image/Image'
+import GlassFill, { type GlassTint } from './GlassFill'
 import { EMPTY_MODES } from '../../utils/react-utils'
 
 const MediaCardContext = createContext<{ modes?: Record<string, any> }>({})
@@ -162,20 +162,24 @@ export function Title({ children, style, modes: propModes }: { children?: React.
  * Glass Footer — pinned to the bottom of the card, **always** on top of the
  * Header (`zIndex: 2`).
  *
- * Glass implementation (April 2026 best practice for RN/Expo):
- *  - **iOS:** `expo-blur`'s `BlurView` renders a native `UIVisualEffectView`,
- *    so this is a real OS-level live blur of whatever's underneath. We pick
- *    `tint` from the Figma "Contrast Context" mode (`'dark'` / `'light'`)
- *    and a moderate intensity that matches the Figma `blur/minimal` token.
- *  - **Android:** the same `BlurView` with `experimentalBlurMethod="dimezisBlurView"`
- *    enables the hardware-accelerated `RenderEffect` blur on Android 12+.
- *    On older Android, expo-blur cleanly degrades to a tinted scrim — we
- *    layer a subtle noise/grain overlay on top so the surface still reads
- *    as "frosted glass" instead of a flat color.
- *  - **Web:** `BlurView` on web is implemented as `backdrop-filter: blur()`,
- *    which already worked in the previous version. Same component, same API.
+ * Glass implementation:
+ *  - **iOS / Android:** `<GlassFill>` (this folder) wraps
+ *    `@react-native-community/blur`'s `BlurView`. iOS gets a real
+ *    `UIVisualEffectView` (live OS blur); Android gets the community
+ *    `RealtimeBlurView` with a token-driven tinted scrim fallback for
+ *    devices where realtime blur is unavailable.
+ *  - **Web:** the platform-extension file `GlassFill.web.tsx` renders a
+ *    translucent View with `backdrop-filter: blur()` — Metro picks the
+ *    correct file automatically, so the web bundle never imports the
+ *    native-only blur module.
  *
- * Tokens still drive the tint color, blur radius and inner spacing.
+ * Why we don't use `expo-blur`: it requires Expo Modules autolinking on the
+ * consumer side (`use_expo_modules!` / `ExpoModulesPackage`), which silently
+ * breaks bare React Native apps that just install this library and run
+ * `pod install`. `@react-native-community/blur` is a regular RN native
+ * module — autolinking handles it with no additional setup.
+ *
+ * Tokens still drive the tint color, blur intensity and inner spacing.
  */
 export function Footer({ children, style, modes: propModes }: { children?: React.ReactNode; style?: StyleProp<ViewStyle>; modes?: Record<string, any> }) {
     const context = useContext(MediaCardContext)
@@ -186,10 +190,14 @@ export function Footer({ children, style, modes: propModes }: { children?: React
     const paddingVertical = parseFloat(getVariableByName('cardMedia/footer/padding/vertical', modes) || '12')
 
     // Figma tokens:
-    //   blur/minimal/background -> tint laid over the native blur
-    //   blur/minimal            -> blur radius (px). expo-blur takes a 0-100
-    //                              "intensity" instead of px; we map roughly:
-    //                              intensity ≈ clamp(radius * 1.7, 0, 100).
+    //   blur/minimal/background -> tint laid over the live blur, also used
+    //                              as the iOS reduced-transparency fallback.
+    //   blur/minimal            -> blur radius (px). The community BlurView
+    //                              uses `blurAmount` (~0-32). `GlassFill`
+    //                              accepts a 0-100 "intensity" (kept compat
+    //                              with the previous expo-blur scale) and
+    //                              maps it internally — here we convert the
+    //                              token's radius to that intensity scale.
     const glassBgColor = getVariableByName('blur/minimal/background', modes) || '#1414174a'
     const blurRadius = parseFloat(getVariableByName('blur/minimal', modes) || '29')
     const intensity = Math.max(0, Math.min(100, Math.round(blurRadius * 1.7)))
@@ -197,7 +205,7 @@ export function Footer({ children, style, modes: propModes }: { children?: React
     // Pick the iOS/Android material tint from "Contrast Context" mode so the
     // glass adapts to dark/light backgrounds the same way the Figma tokens do.
     const contrast = (modes['Contrast Context'] || 'on dark') as string
-    const tint: BlurTint = contrast === 'on light' ? 'light' : 'dark'
+    const tint: GlassTint = contrast === 'on light' ? 'light' : 'dark'
 
     return (
         <View
@@ -216,34 +224,7 @@ export function Footer({ children, style, modes: propModes }: { children?: React
             ]}
             pointerEvents="box-none"
         >
-            {/* Native live blur. On Android pre-12 expo-blur falls back to a
-                tinted scrim automatically; on web it's a backdrop-filter. */}
-            <BlurView
-                style={StyleSheet.absoluteFill}
-                tint={tint}
-                intensity={intensity}
-                experimentalBlurMethod="dimezisBlurView"
-            />
-
-            {/* Token-driven tint laid on top of the live blur — keeps the
-                Figma color signature regardless of platform blur quality. */}
-            <View style={[StyleSheet.absoluteFill, { backgroundColor: glassBgColor }]} />
-
-            {/* Subtle noise/grain on Android only, to compensate for the
-                lower-fidelity blur — purely additive, no behavior change.
-                On iOS/web the native blur already has natural texture. */}
-            {Platform.OS === 'android' ? (
-                <View
-                    style={[
-                        StyleSheet.absoluteFill,
-                        {
-                            backgroundColor: 'rgba(255,255,255,0.03)',
-                            opacity: 0.6,
-                        },
-                    ]}
-                    pointerEvents="none"
-                />
-            ) : null}
+            <GlassFill tint={tint} intensity={intensity} overlayColor={glassBgColor} />
 
             <View
                 style={{

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/index.ts

@@ -7,6 +7,7 @@ export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
 export { default as Button, type ButtonProps } from './Button/Button';
 export { default as Card } from './Card/Card';
+export { default as CardAdvisory, type CardAdvisoryProps } from './CardAdvisory/CardAdvisory'
 export { default as Carousel } from './Carousel/Carousel';
 export type { CarouselProps, CarouselItemProps, PaginationProps } from './Carousel/Carousel';
 export { default as Checkbox, type CheckboxProps } from './Checkbox/Checkbox';
@@ -14,12 +15,16 @@ export { default as CardFeedback, type CardFeedbackProps } from './CardFeedback/
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
-export { default as CardCTA, type CardCTAProps } from './CardCTA/CardCTA';
+export { default as CardCTA, type CardCTAProps, type CardCTAType } from './CardCTA/CardCTA'
 export { default as DebitCard, type DebitCardProps } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
 export { default as Form, type FormProps } from './Form/Form';
 export { useFormContext } from './Form/Form';
 export { default as FormField, type FormFieldProps, type FormFieldType } from './FormField/FormField';
+export { default as CircularProgressBar, type CircularProgressBarProps } from './CircularProgressBar/CircularProgressBar'
+export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps } from './CircularProgressBarDoted/CircularProgressBarDoted'
+export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating'
+export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
 export { default as HStack, type HStackProps } from './HStack/HStack';
 export { default as IconButton } from './IconButton/IconButton';