jfs-components 0.1.2 → 0.1.12

package/lib/module/components/ProductMerchandisingCard/ProductMerchandisingCard.js

@@ -0,0 +1,421 @@
+"use strict";
+
+import React, { useId, useMemo } from 'react';
+import { View, Text, Pressable, StyleSheet, Platform, Image as RNImage } from 'react-native';
+import MaskedView from '@react-native-masked-view/masked-view';
+import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
+import Avatar from '../Avatar/Avatar';
+import Badge from '../Badge/Badge';
+import Button from '../Button/Button';
+import Image from '../Image/Image';
+import GlassFill from '../../utils/GlassFill/GlassFill';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function normalizeImageSource(src) {
+  if (src == null) return undefined;
+  return typeof src === 'string' ? {
+    uri: src
+  } : src;
+}
+/**
+ * ProductMerchandisingCard — a full-bleed image card (Figma node 5277:317)
+ * with a top header (avatar + badge) and a bottom **glass footer** that
+ * combines a real native background blur with a transparent→black gradient
+ * scrim for legible text over any image.
+ *
+ * Glass footer implementation (works on iOS, Android and Web):
+ *  - **iOS / Android:** `<GlassFill>` wraps `@react-native-community/blur`'s
+ *    `BlurView` — iOS gets a real `UIVisualEffectView` (live OS blur),
+ *    Android gets the community `RealtimeBlurView` with a tinted scrim
+ *    fallback. The native-only module is isolated in `GlassFill.tsx`.
+ *  - **Web:** the platform-extension `GlassFill.web.tsx` renders a translucent
+ *    `View` with `backdrop-filter: blur()` — Metro picks the right file so the
+ *    web bundle never imports the native blur module.
+ *  - The gradient scrim is drawn with `react-native-svg` (one renderer for all
+ *    platforms) so the fade is identical everywhere.
+ *
+ * The blur strength is driven by the Figma `blur/minimal` token, mapped to the
+ * `GlassFill` 0–100 intensity scale the same way `MediaCard` does.
+ */
+function ProductMerchandisingCard({
+  imageSource,
+  title = 'Title',
+  subtitle = 'Subtitle',
+  badgeLabel,
+  badge,
+  showAvatar = true,
+  avatarSource,
+  avatarMonogram,
+  avatar,
+  specialBadgeLabel,
+  specialBadgeIcon,
+  specialBadge,
+  ctaLabel = 'CTA',
+  onCtaPress,
+  cta,
+  onPress,
+  height = 223,
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  disableTruncation
+}) {
+  // Unique gradient ids so multiple cards on one (web) document never collide.
+  const rawId = useId();
+  const safeId = rawId.replace(/[^a-zA-Z0-9_-]/g, '');
+  const scrimId = `pmc-footer-scrim-${safeId}`;
+  const blurMaskId = `pmc-footer-blurmask-${safeId}`;
+  const normalizedImageSource = useMemo(() => normalizeImageSource(imageSource), [imageSource]);
+  const tokens = useMemo(() => resolveTokens(modes), [modes]);
+  const containerStyle = {
+    height,
+    borderRadius: tokens.radius,
+    overflow: 'hidden',
+    position: 'relative',
+    flexDirection: 'column',
+    justifyContent: 'space-between'
+  };
+
+  // Header avatar defaults to the design's 36px (Avatar Size = M). A
+  // consumer-supplied `modes['Avatar Size']` still wins via spread order.
+  const avatarModes = useMemo(() => ({
+    'Avatar Size': 'M',
+    ...modes
+  }), [modes]);
+
+  // The Figma node renders the header badge with the brand "Secondary"
+  // appearance at "Medium" emphasis (lilac fill + dark label). These are set
+  // as defaults so the card matches the design out of the box; a
+  // consumer-supplied `modes` value still wins via spread order.
+  const badgeModes = useMemo(() => ({
+    AppearanceBrand: 'Secondary',
+    Emphasis: 'Medium',
+    ...modes
+  }), [modes]);
+  const headerBadge = badge ?? (badgeLabel != null ? /*#__PURE__*/_jsx(Badge, {
+    label: badgeLabel,
+    modes: badgeModes
+  }) : null);
+  const headerAvatar = showAvatar ? avatar ?? /*#__PURE__*/_jsx(Avatar, {
+    style: avatarSource ? 'Image' : avatarMonogram ? 'Monogram' : 'Image',
+    imageSource: avatarSource,
+    monogram: avatarMonogram,
+    modes: avatarModes
+  }) : null;
+
+  // The footer "special badge" is now the shared <Badge type="glass">. The
+  // hardcoded literals that defined its look (warm frosted overlay, gentle
+  // 5px blur, 6/2 padding, 4px radius, weight-500 white label) are preserved
+  // 1:1 via the glass overrides + `style`/`labelStyle`, and the optional
+  // `specialBadgeIcon` maps to Badge's `leading` slot — so every existing
+  // instantiation renders byte-for-byte the same as before.
+  const footerSpecialBadge = specialBadge ?? (specialBadgeLabel != null ? /*#__PURE__*/_jsx(Badge, {
+    type: "glass",
+    label: specialBadgeLabel,
+    leading: specialBadgeIcon,
+    glassOverlayColor: SPECIAL_BADGE_BG,
+    glassIntensity: SPECIAL_BADGE_INTENSITY,
+    modes: modes,
+    style: styles.specialBadge,
+    labelStyle: tokens.specialBadgeText,
+    ...(disableTruncation != null ? {
+      disableTruncation
+    } : null)
+  }) : null);
+
+  // The Figma CTA uses the brand "Secondary" appearance (purple fill, white
+  // label) at the small size. Defaults match the design; consumer `modes`
+  // win via spread order.
+  const ctaModes = useMemo(() => ({
+    'Button / Size': 'S',
+    AppearanceBrand: 'Secondary',
+    ...modes
+  }), [modes]);
+  const footerCta = cta ?? /*#__PURE__*/_jsx(Button, {
+    label: ctaLabel,
+    modes: ctaModes,
+    onPress: onCtaPress
+  });
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [imageSource != null ? /*#__PURE__*/_jsx(Image, {
+      imageSource: imageSource,
+      style: StyleSheet.absoluteFillObject,
+      width: "100%",
+      height: height,
+      resizeMode: "cover",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    }) : null, /*#__PURE__*/_jsxs(View, {
+      style: tokens.header,
+      pointerEvents: "box-none",
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.avatarContainer,
+        children: headerAvatar
+      }), headerBadge]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: tokens.footer,
+      pointerEvents: "box-none",
+      children: [normalizedImageSource != null ? /*#__PURE__*/_jsx(View, {
+        style: StyleSheet.absoluteFill,
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(MaskedView, {
+          style: StyleSheet.absoluteFill,
+          maskElement: /*#__PURE__*/_jsxs(Svg, {
+            width: "100%",
+            height: "100%",
+            children: [/*#__PURE__*/_jsx(Defs, {
+              children: /*#__PURE__*/_jsxs(LinearGradient, {
+                id: blurMaskId,
+                x1: "0",
+                y1: "0",
+                x2: "0",
+                y2: "1",
+                children: [/*#__PURE__*/_jsx(Stop, {
+                  offset: "0",
+                  stopColor: "#000000",
+                  stopOpacity: 0
+                }), /*#__PURE__*/_jsx(Stop, {
+                  offset: "0.35",
+                  stopColor: "#000000",
+                  stopOpacity: 0.5
+                }), /*#__PURE__*/_jsx(Stop, {
+                  offset: "0.7",
+                  stopColor: "#000000",
+                  stopOpacity: 0.92
+                }), /*#__PURE__*/_jsx(Stop, {
+                  offset: "1",
+                  stopColor: "#000000",
+                  stopOpacity: 1
+                })]
+              })
+            }), /*#__PURE__*/_jsx(Rect, {
+              x: "0",
+              y: "0",
+              width: "100%",
+              height: "100%",
+              fill: `url(#${blurMaskId})`
+            })]
+          }),
+          children: /*#__PURE__*/_jsx(RNImage, {
+            source: normalizedImageSource,
+            blurRadius: tokens.imageBlurRadius,
+            resizeMode: "cover",
+            style: {
+              position: 'absolute',
+              left: 0,
+              right: 0,
+              bottom: 0,
+              width: '100%',
+              height
+            }
+          })
+        })
+      }) : /*#__PURE__*/_jsx(GlassFill, {
+        tint: "dark",
+        intensity: tokens.blurIntensity,
+        progressive: true
+      }), /*#__PURE__*/_jsx(View, {
+        style: [StyleSheet.absoluteFill, styles.scrim],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsxs(Svg, {
+          width: "100%",
+          height: "100%",
+          children: [/*#__PURE__*/_jsx(Defs, {
+            children: /*#__PURE__*/_jsxs(LinearGradient, {
+              id: scrimId,
+              x1: "0",
+              y1: "0",
+              x2: "0",
+              y2: "1",
+              children: [/*#__PURE__*/_jsx(Stop, {
+                offset: "0.018",
+                stopColor: "#000000",
+                stopOpacity: 0
+              }), /*#__PURE__*/_jsx(Stop, {
+                offset: "0.974",
+                stopColor: "#000000",
+                stopOpacity: 1
+              })]
+            })
+          }), /*#__PURE__*/_jsx(Rect, {
+            x: "0",
+            y: "0",
+            width: "100%",
+            height: "100%",
+            fill: `url(#${scrimId})`
+          })]
+        })
+      }), footerSpecialBadge, /*#__PURE__*/_jsxs(View, {
+        style: styles.footerRow,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: tokens.textWrap,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: tokens.title,
+            ...resolveTruncation(disableTruncation, 1),
+            children: title
+          }), subtitle != null ? /*#__PURE__*/_jsx(Text, {
+            style: tokens.subtitle,
+            ...resolveTruncation(disableTruncation, 1),
+            children: subtitle
+          }) : null]
+        }), footerCta]
+      })]
+    })]
+  });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: ({
+        pressed
+      }) => [containerStyle, pressed ? styles.pressed : null, style],
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      onPress: onPress,
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+// Figma footer backdrop-blur token (`blur/minimal`). The footer uses a
+// *progressive* blur, so this maps the token to the intensity at the BOTTOM of
+// the ramp (the strongest point); the upper part fades to fully clear. Kept
+// intentionally small to match the design's subtle "minimal" blur.
+const BLUR_INTENSITY_FACTOR = 1.0;
+
+// Special badge ("frosted" pill) — values are literals in the Figma node
+// (no dedicated tokens): bg rgba(255,245,229,0.15), 5px backdrop blur.
+const SPECIAL_BADGE_BG = 'rgba(255,245,229,0.15)';
+const SPECIAL_BADGE_INTENSITY = 17; // ~5px CSS blur / ~2 native blurAmount
+
+function asNum(raw, fallback) {
+  const n = typeof raw === 'number' ? raw : parseFloat(raw);
+  return Number.isFinite(n) ? n : fallback;
+}
+function asStr(raw, fallback) {
+  return raw != null ? String(raw) : fallback;
+}
+function resolveTokens(modes) {
+  // NOTE: token names are passed as string literals DIRECTLY to
+  // getVariableByName so the `extract-component-tokens` script can statically
+  // collect them for the generated docs. Do not refactor these into a helper
+  // that receives the name as a variable.
+  const radius = asNum(getVariableByName('productMerchandisingcard/radius', modes), 12);
+  const headerPadH = asNum(getVariableByName('productMerchandisingcard/header/padding/horizontal', modes), 12);
+  const headerPadV = asNum(getVariableByName('productMerchandisingcard/header/padding/vertical', modes), 12);
+  const footerGap = asNum(getVariableByName('productMerchandisingcard/footer/gap', modes), 8);
+  const footerPadH = asNum(getVariableByName('productMerchandisingcard/footer/padding/horizontal', modes), 16);
+  const footerPadV = asNum(getVariableByName('productMerchandisingcard/footer/padding/vertical', modes), 16);
+  const textGap = asNum(getVariableByName('productMerchandisingcard/footer/text/gap', modes), 2);
+  const blurRadius = asNum(getVariableByName('blur/minimal', modes), 29);
+  const titleColor = asStr(getVariableByName('productMerchandisingcard/footer/title/font/color', modes), '#ffffff');
+  const titleSize = asNum(getVariableByName('productMerchandisingcard/footer/title/fontsize', modes), 14);
+  const titleFamily = asStr(getVariableByName('productMerchandisingcard/footer/title/fontfamily', modes), 'JioType Var');
+  const titleWeight = asStr(getVariableByName('productMerchandisingcard/footer/title/fontweight', modes), '700');
+  const subtitleColor = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/font/color', modes), '#c5bcb5');
+  const subtitleSize = asNum(getVariableByName('productMerchandisingcard/footer/subtitle/fontsize', modes), 12);
+  const subtitleFamily = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/fontfamily', modes), 'JioType Var');
+  const subtitleWeight = asStr(getVariableByName('productMerchandisingcard/footer/subtitle/fontweight', modes), '400');
+  const sbSize = asNum(getVariableByName('productMerchandisingcard/specialbadge/text/fontsize', modes), 12);
+  const sbFamily = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var');
+  const sbWeight = asStr(getVariableByName('productMerchandisingcard/specialbadge/text/fontweight', modes), '500');
+
+  // `Image.blurRadius` is interpreted differently per platform — iOS applies a
+  // strong Gaussian while Android's IterativeBoxBlur is gentler at the same
+  // numeric radius — so we tune each platform to land on the same perceived
+  // "minimal" frosted strength as the Figma design.
+  const imageBlurRadius = Platform.select({
+    ios: Math.max(6, Math.round(blurRadius * 0.5)),
+    android: Math.max(12, Math.round(blurRadius * 0.95)),
+    default: Math.max(8, Math.round(blurRadius * 0.6))
+  });
+  return {
+    radius,
+    blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
+    imageBlurRadius,
+    header: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between',
+      paddingHorizontal: headerPadH,
+      paddingVertical: headerPadV,
+      zIndex: 1
+    },
+    footer: {
+      paddingHorizontal: footerPadH,
+      paddingVertical: footerPadV,
+      gap: footerGap,
+      overflow: 'hidden',
+      zIndex: 2
+    },
+    textWrap: {
+      flex: 1,
+      gap: textGap,
+      justifyContent: 'center'
+    },
+    title: {
+      color: titleColor,
+      fontSize: titleSize,
+      fontFamily: titleFamily,
+      fontWeight: titleWeight,
+      lineHeight: Math.round(titleSize * 1.2),
+      includeFontPadding: false
+    },
+    subtitle: {
+      color: subtitleColor,
+      fontSize: subtitleSize,
+      fontFamily: subtitleFamily,
+      fontWeight: subtitleWeight,
+      lineHeight: Math.round(subtitleSize * 1.2),
+      includeFontPadding: false
+    },
+    specialBadgeText: {
+      color: '#ffffff',
+      fontSize: sbSize,
+      fontFamily: sbFamily,
+      fontWeight: sbWeight,
+      lineHeight: Math.round(sbSize * 1.2),
+      includeFontPadding: false
+    }
+  };
+}
+const styles = StyleSheet.create({
+  avatarContainer: {
+    flexShrink: 1,
+    justifyContent: 'center'
+  },
+  footerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8
+  },
+  scrim: {
+    // The footer node sits at 90% opacity in Figma; applying it to the
+    // scrim (not the content) keeps the title/CTA crisp while preserving
+    // the intended fade strength.
+    opacity: 0.9
+  },
+  // Overrides layered on top of <Badge type="glass">. Badge already supplies
+  // the row layout + 4px gap (when a leading icon is present), `overflow:
+  // 'hidden'`, `alignSelf: 'flex-start'` and `alignItems: 'center'`; these
+  // pin the special badge's literal Figma box (6/2 padding, 4px radius)
+  // regardless of the badge size tokens resolved by the active modes.
+  specialBadge: {
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 4
+  },
+  pressed: {
+    opacity: 0.92
+  }
+});
+export default ProductMerchandisingCard;

package/lib/module/components/ProductOverview/ProductOverview.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import Image from '../Image/Image';
 import ProductLabel from '../ProductLabel/ProductLabel';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
@@ -24,7 +24,8 @@ const ProductOverview = ({
   stats = DEFAULT_STATS,
   modes = EMPTY_MODES,
   style,
-  children
+  children,
+  disableTruncation
 }) => {
   const padding = getVariableByName('productOverview/padding', modes) ?? 24;
   const gap = getVariableByName('productOverview/gap', modes) ?? 12;
@@ -128,11 +129,11 @@ const ProductOverview = ({
         },
         children: [/*#__PURE__*/_jsx(Text, {
           style: statValueStyle,
-          numberOfLines: 1,
+          ...resolveTruncation(disableTruncation, 1),
           children: stat.value
         }), /*#__PURE__*/_jsx(Text, {
           style: statLabelStyle,
-          numberOfLines: 1,
+          ...resolveTruncation(disableTruncation, 1),
           children: stat.label
         })]
       }, `${stat.label}-${index}`))

package/lib/module/components/ProgressBadge/ProgressBadge.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ProgressBadge component that displays an icon, text, and an internal progress bar.
@@ -29,6 +29,7 @@ function ProgressBadge({
   style,
   textStyle: textStyleOverride,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   // Resolve layout tokens
@@ -114,8 +115,7 @@ function ProgressBadge({
         importantForAccessibility: "no"
       }) : null, /*#__PURE__*/_jsx(Text, {
         style: [textStyle, textStyleOverride],
-        numberOfLines: 1,
-        ellipsizeMode: "tail",
+        ...resolveTruncation(disableTruncation, 1, 'tail'),
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
         children: taskName

package/lib/module/components/ProjectionMarker/ProjectionMarker.js

@@ -0,0 +1,157 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
+import Divider from '../Divider/Divider';
+
+/**
+ * A value rendered at either end of the marker. A `string`/`number` is rendered
+ * with the built-in title typography; any other `ReactNode` (e.g. a
+ * `MoneyValue`) is rendered as-is so consumers can fully control presentation.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const isTextValue = value => typeof value === 'string' || typeof value === 'number';
+
+/**
+ * ProjectionMarker renders a start value and an end value connected to a
+ * centered badge that summarizes the projection (e.g. a tenure and interest
+ * rate). It mirrors the Figma `projectionMarker` component and is commonly used
+ * inside "Potential returns" style cards.
+ *
+ * @example
+ * ```tsx
+ * <ProjectionMarker
+ *   startValue="₹1,00,000"
+ *   endValue="₹1,25,101"
+ *   duration="1Y 10M"
+ *   rate="@ 8.25 %"
+ * />
+ * ```
+ *
+ * @example Custom end values via MoneyValue
+ * ```tsx
+ * <ProjectionMarker
+ *   startValue={<MoneyValue value="1,00,000" />}
+ *   endValue={<MoneyValue value="1,25,101" />}
+ *   duration="1Y 10M"
+ *   rate="@ 8.25 %"
+ * />
+ * ```
+ */
+function ProjectionMarker({
+  startValue = '₹1,00,000',
+  endValue = '₹1,25,101',
+  duration = '1Y 10M',
+  rate = '@ 8.25 %',
+  showConnectors = true,
+  modes = EMPTY_MODES,
+  style,
+  startValueStyle,
+  endValueStyle,
+  badgeStyle,
+  durationStyle,
+  rateStyle,
+  accessibilityLabel,
+  disableTruncation
+}) {
+  const titleColor = getVariableByName('projectionMarker/title/color', modes) ?? '#000000';
+  const titleFontFamily = getVariableByName('projectionMarker/title/fontfamily', modes) ?? 'JioType Var';
+  const titleFontSize = getVariableByName('projectionMarker/title/fontsize', modes) ?? 14;
+  const titleFontWeight = String(getVariableByName('projectionMarker/title/fontweight', modes) ?? 600);
+  const durationColor = getVariableByName('projectionMarker/duration/color', modes) ?? '#000000';
+  const durationFontFamily = getVariableByName('projectionMarker/duration/fontfamily', modes) ?? 'JioType Var';
+  const durationFontSize = getVariableByName('projectionMarker/duration/fontsize', modes) ?? 12;
+  const durationFontWeight = String(getVariableByName('projectionMarker/duration/fontweight', modes) ?? 500);
+  const rateColor = getVariableByName('projectionMarker/rate/color', modes) ?? '#6b6b6b';
+  const rateFontFamily = getVariableByName('metricdata/rate/fontfamily', modes) ?? 'JioType Var';
+  const rateFontSize = getVariableByName('metricdata/rate/fontsize', modes) ?? 11;
+  const rateFontWeight = String(getVariableByName('metricdata/rate/fontweight', modes) ?? 400);
+  const badgeBg = getVariableByName('projectionMarker/durationWrap/bg/color', modes) ?? '#f5f5f5';
+  const badgeBorderColor = getVariableByName('projectionMarker/durationWrap/border/color', modes) ?? '#ebebed';
+  const badgeBorderWidth = getVariableByName('metricdata/durationWrap/stroke', modes) ?? 1;
+  const badgeRadius = getVariableByName('metricdata/durationWrap/radius', modes) ?? 8;
+  const badgePaddingHorizontal = getVariableByName('metricdata/durationWrap/padding/horizontal', modes) ?? 16;
+  const badgePaddingVertical = getVariableByName('metricdata/durationWrap/padding/vertical', modes) ?? 8;
+  const titleTextStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleFontSize * 1.3
+  };
+  const renderEndValue = (value, overrideStyle) => {
+    if (value === null || value === undefined) return null;
+    if (isTextValue(value)) {
+      return /*#__PURE__*/_jsx(Text, {
+        style: [titleTextStyle, overrideStyle],
+        ...resolveTruncation(disableTruncation, 1),
+        children: value
+      });
+    }
+    return cloneChildrenWithModes(value, modes);
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, style],
+    accessibilityRole: "summary",
+    accessibilityLabel: accessibilityLabel,
+    children: [renderEndValue(startValue, startValueStyle), showConnectors && /*#__PURE__*/_jsx(Divider, {
+      direction: "horizontal",
+      modes: modes,
+      style: styles.connector
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [styles.badge, {
+        backgroundColor: badgeBg,
+        borderColor: badgeBorderColor,
+        borderWidth: badgeBorderWidth,
+        borderRadius: badgeRadius,
+        paddingHorizontal: badgePaddingHorizontal,
+        paddingVertical: badgePaddingVertical
+      }, badgeStyle],
+      children: [duration !== null && duration !== undefined ? isTextValue(duration) ? /*#__PURE__*/_jsx(Text, {
+        style: [{
+          color: durationColor,
+          fontFamily: durationFontFamily,
+          fontSize: durationFontSize,
+          fontWeight: durationFontWeight,
+          lineHeight: durationFontSize * 1.2,
+          textAlign: 'center'
+        }, durationStyle],
+        children: duration
+      }) : cloneChildrenWithModes(duration, modes) : null, rate !== null && rate !== undefined ? isTextValue(rate) ? /*#__PURE__*/_jsx(Text, {
+        style: [{
+          color: rateColor,
+          fontFamily: rateFontFamily,
+          fontSize: rateFontSize,
+          fontWeight: rateFontWeight,
+          lineHeight: rateFontSize * 1.3,
+          textAlign: 'center'
+        }, rateStyle],
+        children: rate
+      }) : cloneChildrenWithModes(rate, modes) : null]
+    }), showConnectors && /*#__PURE__*/_jsx(Divider, {
+      direction: "horizontal",
+      modes: modes,
+      style: styles.connector
+    }), renderEndValue(endValue, endValueStyle)]
+  });
+}
+const styles = {
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%'
+  },
+  connector: {
+    flex: 1,
+    alignSelf: 'center',
+    marginHorizontal: 16
+  },
+  badge: {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+};
+export default ProjectionMarker;

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

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useState } from 'react';
+import React, { forwardRef, 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';
@@ -13,14 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // Radio
 // ---------------------------------------------------------------------------
 
-export function Radio({
+export const Radio = /*#__PURE__*/forwardRef(function Radio({
   selected = false,
   disabled = false,
   onPress,
   modes = EMPTY_MODES,
   style,
   testID
-}) {
+}, ref) {
   // ---- Refs & State ----
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
@@ -168,6 +168,7 @@ export function Radio({
     getVariableByName('radio/disabledSelected/border/color');
   }
   return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
     testID: testID,
     disabled: disabled,
     onPress: onPress,
@@ -184,5 +185,5 @@ export function Radio({
       style: selectorStyle
     })
   });
-}
+});
 export default Radio;