jfs-components 0.0.74 → 0.0.78

package/lib/module/components/FullscreenModal/FullscreenModal.js

@@ -0,0 +1,350 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import Animated, { Extrapolation, interpolate, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Button from '../Button/Button';
+import Disclaimer from '../Disclaimer/Disclaimer';
+import IconButton from '../IconButton/IconButton';
+import ActionFooter from '../ActionFooter/ActionFooter';
+
+// ---------------------------------------------------------------------------
+// Forced modes
+//
+// `FullscreenModal` always themes itself with the `context5: 'Fullscreen Modal'`
+// collection mode. This is what flips the section / list-item / hero text
+// tokens to their white-on-dark values (see the Figma "Fullscreen Modal"
+// context). It is intentionally NON-overridable: callers can pass any other
+// modes (Color Mode, AppearanceBrand, …) but never context5. The frozen
+// object keeps its identity stable so the token resolver's per-modes cache
+// stays hot, and so `cloneChildrenWithModes` can use it as the
+// always-wins `forcedModes` argument.
+// ---------------------------------------------------------------------------
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FULLSCREEN_MODAL_FORCED_MODES = Object.freeze({
+  context5: 'Fullscreen Modal'
+});
+
+// Reanimated-driven ScrollView so the parallax handler runs on the UI thread.
+// Module scope so the wrapped component identity is stable across renders.
+const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
+
+// Parallax tuning. The hero collapses by HEIGHT only as the user scrolls up —
+// its full width is preserved and the media keeps a fixed aspect ratio (it is
+// cropped, never scaled or squished, like a `cover` background). When no
+// explicit `heroMinHeight` is given, the hero collapses to this fraction of
+// its resting height.
+const HERO_MIN_HEIGHT_RATIO = 0.45;
+
+// ---------------------------------------------------------------------------
+// Hero text — the eyebrow / headline / supporting / price block. Built inline
+// (rather than reusing <PageHero>) so we can render BOTH a supporting
+// paragraph AND a price line with the exact PageHero token gaps, and overlay
+// it on the parallax media without PageHero's media/button scaffolding.
+// ---------------------------------------------------------------------------
+
+function HeroText({
+  eyebrow,
+  headline,
+  supportingText,
+  priceText,
+  modes
+}) {
+  const styles = useMemo(() => {
+    const gap = Number(getVariableByName('PageHero/gap', modes)) || 16;
+    const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8;
+    const eyebrowStyle = {
+      color: getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff',
+      fontFamily: getVariableByName('PageHero/eyebrow/fontFamily', modes) || 'System',
+      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18,
+      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700),
+      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20,
+      textAlign: 'center'
+    };
+    const headlineStyle = {
+      color: getVariableByName('PageHero/headline/color', modes) || '#ffffff',
+      fontFamily: getVariableByName('PageHero/headline/fontFamily', modes) || 'System',
+      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29,
+      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes) || 900),
+      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29,
+      textAlign: 'center',
+      width: '100%'
+    };
+    const supportingTextStyle = {
+      color: getVariableByName('PageHero/supportingText/color', modes) || '#ffffff',
+      fontFamily: getVariableByName('PageHero/supportingText/fontFamily', modes) || 'System',
+      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)) || 12,
+      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes) || 500),
+      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16,
+      textAlign: 'center'
+    };
+    const priceTextStyle = {
+      color: getVariableByName('PageHero/body/color', modes) || '#ffffff',
+      fontFamily: getVariableByName('PageHero/body/fontFamily', modes) || 'System',
+      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)) || 12,
+      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes) || 500),
+      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)) || 16,
+      textAlign: 'center'
+    };
+    return {
+      container: {
+        width: '100%',
+        alignItems: 'center',
+        gap
+      },
+      textWrap: {
+        width: '100%',
+        alignItems: 'center',
+        gap: textWrapGap
+      },
+      eyebrowStyle,
+      headlineStyle,
+      supportingTextStyle,
+      priceTextStyle
+    };
+  }, [modes]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.textWrap,
+      children: [eyebrow ? /*#__PURE__*/_jsx(Text, {
+        style: styles.eyebrowStyle,
+        children: eyebrow
+      }) : null, headline ? /*#__PURE__*/_jsx(Text, {
+        style: styles.headlineStyle,
+        children: headline
+      }) : null]
+    }), supportingText ? /*#__PURE__*/_jsx(Text, {
+      style: styles.supportingTextStyle,
+      children: supportingText
+    }) : null, priceText ? /*#__PURE__*/_jsx(Text, {
+      style: styles.priceTextStyle,
+      children: priceText
+    }) : null]
+  });
+}
+
+/**
+ * FullscreenModal — a full-screen takeover surface with a parallax media hero,
+ * a scrollable body, a floating close button, and a sticky `ActionFooter`.
+ *
+ * The component always themes itself with `context5: 'Fullscreen Modal'`
+ * (non-overridable) so every nested component (Section, ListItem, Button,
+ * Disclaimer, …) resolves the white-on-dark "fullscreen modal" token values.
+ * That mode is cascaded into `children`, the footer, and the hero text via
+ * `cloneChildrenWithModes` / the merged `modes` object.
+ *
+ * ### Parallax
+ * As the user scrolls up, the hero collapses by **height only** (from
+ * `heroHeight` to `heroMinHeight`) — its **full width is always preserved**.
+ * The `heroMedia` is pinned to the top at a fixed size and `cover`-cropped by
+ * the collapsing clip, so it keeps a perfect aspect ratio the whole time
+ * (never scaled or squished). Because it collapses slower than the content
+ * scrolls, the media lags behind for the parallax depth cue. Disable with
+ * `parallax={false}`.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <FullscreenModal
+ *   eyebrow="Upgrade to JioFinance+"
+ *   headline="Get more from your money."
+ *   supportingText="JioFinance+ is your upgraded financial experience…"
+ *   priceText="₹999/year · ₹0 until 2027"
+ *   heroMedia={<LottiePlayer source={hero} size={{ width: 360, height: 420 }} />}
+ *   primaryActionLabel="Upgrade for free"
+ *   disclaimer="By upgrading, we'll check your eligibility with Experian."
+ *   onPrimaryAction={() => upgrade()}
+ *   onClose={() => navigation.goBack()}
+ * >
+ *   <Section title="Key Benefits" slotDirection="column" slot={…} />
+ *   <Section title="Compare plans" slotDirection="column" slot={…} />
+ * </FullscreenModal>
+ * ```
+ */
+function FullscreenModal({
+  eyebrow = 'Upgrade to JioFinance+',
+  headline = 'Get more from your money.',
+  supportingText = 'JioFinance+ is your upgraded financial experience, designed to work harder in the background so your money works smarter in real life.',
+  priceText = '₹999/year · ₹0 until 2027',
+  heroMedia,
+  heroHeight = 420,
+  heroMinHeight,
+  parallax = true,
+  showClose = true,
+  onClose,
+  closeAccessibilityLabel = 'Close',
+  footer,
+  primaryActionLabel = 'Upgrade for free',
+  onPrimaryAction,
+  disclaimer = "By upgrading, we'll check your eligibility with Experian.",
+  backgroundColor = '#0f0d0a',
+  children,
+  modes: propModes = EMPTY_MODES,
+  style,
+  contentContainerStyle,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+
+  // context5 is appended last so it always wins, regardless of what the
+  // caller (or the global theme) passes.
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes,
+    ...FULLSCREEN_MODAL_FORCED_MODES
+  }), [globalModes, propModes]);
+  const rootGap = Number(getVariableByName('fullScreenModal/gap', modes)) || 16;
+  const minHeight = heroMinHeight ?? Math.round(heroHeight * HERO_MIN_HEIGHT_RATIO);
+  const scrollY = useSharedValue(0);
+  const onScroll = useAnimatedScrollHandler(event => {
+    scrollY.value = event.contentOffset.y;
+  });
+
+  // Collapse the hero by HEIGHT only as the user scrolls up. The clip's width
+  // never changes and the media inside is pinned full-size at the top, so the
+  // art is cropped (cover) rather than scaled or narrowed — it keeps a perfect
+  // aspect ratio the whole time. Pull-down (negative offset) is clamped, so the
+  // hero never grows past its resting height.
+  const heroAnimatedStyle = useAnimatedStyle(() => {
+    const height = interpolate(scrollY.value, [0, heroHeight], [heroHeight, minHeight], Extrapolation.CLAMP);
+    return {
+      height
+    };
+  });
+  const processedHeroMedia = useMemo(() => heroMedia ? cloneChildrenWithModes(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [heroMedia, modes]);
+  const processedChildren = useMemo(() => children ? cloneChildrenWithModes(children, modes, FULLSCREEN_MODAL_FORCED_MODES) : null, [children, modes]);
+
+  // The clip is full-width and top-pinned; its height is what animates. Width
+  // is intentionally never animated.
+  const heroClipBaseStyle = useMemo(() => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    overflow: 'hidden'
+  }), []);
+
+  // The media sits at a fixed full-size box pinned to the top of the clip, so
+  // the collapsing clip crops it from the bottom (cover) instead of resizing
+  // it. Full width, fixed height — a perfect, constant aspect ratio.
+  const heroMediaWrapStyle = useMemo(() => ({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: heroHeight,
+    alignItems: 'stretch'
+  }), [heroHeight]);
+  const heroTextRegionStyle = useMemo(() => ({
+    height: heroHeight,
+    justifyContent: 'flex-end',
+    paddingHorizontal: 16,
+    paddingBottom: 16
+  }), [heroHeight]);
+  const bodyStyle = useMemo(() => [{
+    backgroundColor,
+    gap: rootGap,
+    paddingTop: rootGap,
+    paddingBottom: 24
+  }, contentContainerStyle], [backgroundColor, rootGap, contentContainerStyle]);
+  const heroClip = /*#__PURE__*/_jsx(Animated.View, {
+    style: [heroClipBaseStyle, parallax ? heroAnimatedStyle : {
+      height: heroHeight
+    }],
+    pointerEvents: "none",
+    children: /*#__PURE__*/_jsx(View, {
+      style: heroMediaWrapStyle,
+      children: processedHeroMedia
+    })
+  });
+
+  // Footer: a fully custom node, or the default Button + Disclaimer column.
+  let footerContent = null;
+  if (footer) {
+    footerContent = footer;
+  } else if (primaryActionLabel) {
+    footerContent = /*#__PURE__*/_jsxs(View, {
+      style: footerColumnStyle,
+      children: [/*#__PURE__*/_jsx(Button, {
+        label: primaryActionLabel,
+        modes: modes,
+        style: fullWidthStyle,
+        ...(onPrimaryAction ? {
+          onPress: onPrimaryAction
+        } : {})
+      }), disclaimer ? /*#__PURE__*/_jsx(Disclaimer, {
+        disclaimer: disclaimer,
+        modes: modes
+      }) : null]
+    });
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: [rootStyle, {
+      backgroundColor
+    }, style],
+    testID: testID,
+    children: [processedHeroMedia ? heroClip : null, /*#__PURE__*/_jsxs(AnimatedScrollView, {
+      style: scrollViewStyle,
+      contentContainerStyle: scrollContentStyle,
+      showsVerticalScrollIndicator: false,
+      onScroll: onScroll,
+      scrollEventThrottle: 16,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: heroTextRegionStyle,
+        children: /*#__PURE__*/_jsx(HeroText, {
+          eyebrow: eyebrow,
+          headline: headline,
+          supportingText: supportingText,
+          priceText: priceText,
+          modes: modes
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: bodyStyle,
+        children: processedChildren
+      })]
+    }), footerContent ? /*#__PURE__*/_jsx(ActionFooter, {
+      modes: modes,
+      children: footerContent
+    }) : null, showClose ? /*#__PURE__*/_jsx(IconButton, {
+      iconName: "ic_close",
+      modes: modes,
+      accessibilityLabel: closeAccessibilityLabel,
+      style: closeButtonStyle,
+      ...(onClose ? {
+        onPress: onClose
+      } : {})
+    }) : null]
+  });
+}
+
+// Module-scope style constants — never re-allocated per render.
+const rootStyle = {
+  flex: 1,
+  width: '100%',
+  position: 'relative'
+};
+const scrollViewStyle = {
+  flex: 1
+};
+const scrollContentStyle = {
+  flexGrow: 1
+};
+const footerColumnStyle = {
+  width: '100%',
+  gap: 8
+};
+const fullWidthStyle = {
+  width: '100%'
+};
+const closeButtonStyle = {
+  position: 'absolute',
+  top: 12,
+  right: 12
+};
+export default FullscreenModal;

package/lib/module/components/IconButton/IconButton.js

@@ -6,6 +6,8 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import Skeleton from '../../skeleton/Skeleton';
+import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
 // ---------------------------------------------------------------------------
 // Module-scope constants
@@ -93,6 +95,7 @@ function IconButton({
   inactiveIcon,
   inactiveSource,
   isActive = false,
+  loading,
   ...rest
 }) {
   // Merge explicit props with modes for token resolution. Memoize the merged
@@ -104,6 +107,13 @@ function IconButton({
     isActive
   }), [modes, isToggle, isActive]);
   const tokens = useMemo(() => resolveIconButtonTokens(componentModes, disabled), [componentModes, disabled]);
+
+  // Hook called unconditionally — short-circuit below comes AFTER all hooks
+  // to keep React's hook order stable across renders.
+  const {
+    active: groupActive
+  } = useSkeleton();
+  const isLoading = loading ?? groupActive;
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
   const userHandlersRef = useRef({});
@@ -175,6 +185,16 @@ function IconButton({
   const styleCallback = useCallback(({
     pressed
   }) => [tokens.baseContainerStyle, style, pressed && !disabled ? pressedOverlayStyle : null, isHovered && !disabled ? hoverOverlayStyle : null, isFocused && !disabled ? focusOverlayStyle : null], [tokens.baseContainerStyle, style, isHovered, isFocused, disabled]);
+  if (isLoading) {
+    const size = tokens.baseContainerStyle.width;
+    return /*#__PURE__*/_jsx(Skeleton, {
+      kind: "other",
+      width: size,
+      height: size,
+      style: style,
+      modes: componentModes
+    });
+  }
   return /*#__PURE__*/_jsx(Pressable, {
     accessibilityRole: "button",
     accessibilityLabel: undefined,

package/lib/module/components/Image/Image.js

@@ -2,6 +2,8 @@
 
 import React, { useMemo } from 'react';
 import { Image as RNImage, View } from 'react-native';
+import Skeleton from '../../skeleton/Skeleton';
+import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
 function normalizeSource(imageSource) {
   if (imageSource == null) return undefined;
@@ -41,7 +43,8 @@ function Image({
   style,
   accessibilityLabel,
   accessibilityElementsHidden,
-  importantForAccessibility
+  importantForAccessibility,
+  loading
 }) {
   const source = useMemo(() => normalizeSource(imageSource), [imageSource]);
   const layoutStyle = useMemo(() => {
@@ -63,6 +66,27 @@ function Image({
     if (borderRadius != null) s.borderRadius = borderRadius;
     return s;
   }, [ratio, width, height, borderRadius]);
+  const {
+    active: groupActive
+  } = useSkeleton();
+  const isLoading = loading ?? groupActive;
+  if (isLoading) {
+    // Match the loaded image's exact box. If height is unknown but a ratio
+    // is set, the skeleton uses `aspectRatio` the same way the loaded image
+    // would, so layout never jumps when the load resolves.
+    const skeletonStyle = {
+      width: width ?? '100%',
+      ...(height != null ? {
+        height: height
+      } : {
+        aspectRatio: ratio
+      })
+    };
+    return /*#__PURE__*/_jsx(Skeleton, {
+      kind: "image",
+      style: skeletonStyle
+    });
+  }
   if (!source) {
     return /*#__PURE__*/_jsx(View, {
       style: [layoutStyle, style]

package/lib/module/components/ListItem/ListItem.js

@@ -32,27 +32,42 @@ const pressedOverlayStyle = {
 // ---------------------------------------------------------------------------
 
 function resolveListItemTokens(modes) {
+  // Modes used to cascade into slot children (leading / supportSlot / endSlot).
+  // We do NOT inject an `AppearanceBrand` default here: slot content such as
+  // Buttons or Badges carry their own intended appearance, so forcing one onto
+  // them would be surprising.
   const resolvedModes = {
     ...modes,
     Context: 'ListItem'
   };
+
+  // Modes used to resolve the ListItem's OWN title + support text. Within this
+  // component, `AppearanceBrand` only affects `listItem/title/color` and
+  // `listItem/supportText/color`, so the text defaults to the "Neutral"
+  // appearance (in both Vertical and Horizontal layouts). A caller-supplied
+  // `AppearanceBrand` still wins; `Context` is always forced to 'ListItem'.
+  const textModes = {
+    AppearanceBrand: 'Neutral',
+    ...modes,
+    Context: 'ListItem'
+  };
   const gap = getVariableByName('listItem/gap', resolvedModes) ?? 8;
   const paddingTop = getVariableByName('listItem/padding/top', resolvedModes) ?? 0;
   const paddingBottom = getVariableByName('listItem/padding/bottom', resolvedModes) ?? 0;
   const paddingLeft = getVariableByName('listItem/padding/left', resolvedModes) ?? 0;
   const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0;
   const textWrapGap = getVariableByName('listItem/text wrap', resolvedModes) ?? 0;
-  const titleColor = getVariableByName('listItem/title/color', resolvedModes) || '#0f0d0a';
-  const titleFontSize = getVariableByName('listItem/title/fontSize', resolvedModes) || 14;
-  const titleLineHeight = getVariableByName('listItem/title/lineHeight', resolvedModes) || 16;
-  const titleFontFamily = getVariableByName('listItem/title/fontFamily', resolvedModes) || 'System';
-  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', resolvedModes) || 700;
+  const titleColor = getVariableByName('listItem/title/color', textModes) || '#0f0d0a';
+  const titleFontSize = getVariableByName('listItem/title/fontSize', textModes) || 14;
+  const titleLineHeight = getVariableByName('listItem/title/lineHeight', textModes) || 16;
+  const titleFontFamily = getVariableByName('listItem/title/fontFamily', textModes) || 'System';
+  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', textModes) || 700;
   const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
-  const supportColor = getVariableByName('listItem/supportText/color', resolvedModes) || '#1f1a14';
-  const supportFontSize = getVariableByName('listItem/supportText/fontSize', resolvedModes) || 12;
-  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', resolvedModes) || 14;
-  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', resolvedModes) || 'System';
-  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', resolvedModes) || 500;
+  const supportColor = getVariableByName('listItem/supportText/color', textModes) || '#1f1a14';
+  const supportFontSize = getVariableByName('listItem/supportText/fontSize', textModes) || 12;
+  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', textModes) || 14;
+  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', textModes) || 'System';
+  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', textModes) || 500;
   const supportFontWeight = typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw;
   return {
     baseContainerStyle: {

package/lib/module/components/LottiePlayer/LottiePlayer.js

@@ -0,0 +1,111 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import { getNativeLottieView } from './loadNativeLottieView';
+
+/**
+ * A parsed Lottie animation. The JSON object you get from
+ * `require('./animation.json')` or `fetch().then(r => r.json())`. We keep the
+ * type intentionally loose because both `lottie-react-native` and `lottie-react`
+ * accept slightly different shapes — `LottiePlayer` narrows back to the
+ * platform-specific type internally.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_SIZE = 117;
+function resolveSize(size, modes) {
+  if (typeof size === 'number') return {
+    width: size,
+    height: size
+  };
+  if (size && typeof size === 'object') return size;
+  const width = Number(getVariableByName('media/width', modes)) || DEFAULT_SIZE;
+  const height = Number(getVariableByName('media/height', modes)) || DEFAULT_SIZE;
+  return {
+    width,
+    height
+  };
+}
+
+/**
+ * Renders a Lottie animation using the consumer's installed
+ * `lottie-react-native` (native) or `lottie-react` (web) — both are declared
+ * as **optional peer dependencies** of `jfs-components`, so installing the
+ * library does not pull them in. Add the relevant package to your app only
+ * if you actually use `LottiePlayer`:
+ *
+ * ```sh
+ * # React Native (iOS / Android)
+ * npm install lottie-react-native
+ * cd ios && pod install
+ *
+ * # Web (or react-native-web)
+ * npm install lottie-react
+ * ```
+ *
+ * The web build (`LottiePlayer.web.tsx`) is picked automatically by Metro /
+ * webpack via platform extensions — same pattern as `MediaCard/GlassFill`.
+ *
+ * Token-driven sizing: when `size` is omitted, `LottiePlayer` reads
+ * `media/width` and `media/height` from the Figma variables resolver, so the
+ * animation matches the surrounding component's `Media / Output` mode
+ * automatically. This is the same sizing contract `PageHero` and
+ * `LottieIntroBlock` use for their `media` slots.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * import animation from './assets/loader.json';
+ *
+ * <LottiePlayer source={animation} />                    // 117 × 117 (default)
+ * <LottiePlayer source={animation} size={70} />          // 70 × 70
+ * <LottiePlayer source={animation} modes={{ 'Media / Output': 'S' }} />  // 20 × 20
+ * <PageHero media={<LottiePlayer source={animation} />} />
+ * ```
+ */
+function LottiePlayer({
+  source,
+  size,
+  autoPlay = true,
+  loop = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const {
+    width,
+    height
+  } = useMemo(() => resolveSize(size, modes), [size, modes]);
+  const NativeLottieView = useMemo(() => getNativeLottieView(), []);
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      width,
+      height
+    }, style],
+    testID: testID,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityElementsHidden: accessibilityLabel ? undefined : true,
+    importantForAccessibility: accessibilityLabel ? 'auto' : 'no',
+    children: /*#__PURE__*/_jsx(NativeLottieView, {
+      source: source,
+      autoPlay: autoPlay,
+      loop: loop,
+      style: {
+        width: '100%',
+        height: '100%'
+      }
+    })
+  });
+}
+export default /*#__PURE__*/React.memo(LottiePlayer);

package/lib/module/components/LottiePlayer/LottiePlayer.web.js

@@ -0,0 +1,77 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import { getWebLottieView } from './loadWebLottieView';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_SIZE = 117;
+function resolveSize(size, modes) {
+  if (typeof size === 'number') return {
+    width: size,
+    height: size
+  };
+  if (size && typeof size === 'object') return size;
+  const width = Number(getVariableByName('media/width', modes)) || DEFAULT_SIZE;
+  const height = Number(getVariableByName('media/height', modes)) || DEFAULT_SIZE;
+  return {
+    width,
+    height
+  };
+}
+
+/**
+ * Web build of `LottiePlayer` — picked automatically by webpack /
+ * Metro-for-web via the `.web.tsx` platform extension. Uses `lottie-react`
+ * (which wraps `lottie-web`) and renders a plain DOM container.
+ *
+ * Public API mirrors `LottiePlayer.tsx` (native). See that file for the
+ * documented prop reference and usage patterns.
+ */
+function LottiePlayer({
+  source,
+  size,
+  autoPlay = true,
+  loop = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const {
+    width,
+    height
+  } = useMemo(() => resolveSize(size, modes), [size, modes]);
+  const WebLottieView = useMemo(() => getWebLottieView(), []);
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      width,
+      height,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      ...style
+    },
+    "data-testid": testID,
+    "aria-label": accessibilityLabel,
+    "aria-hidden": accessibilityLabel ? undefined : true,
+    children: /*#__PURE__*/_jsx(WebLottieView, {
+      animationData: source,
+      autoplay: autoPlay,
+      loop: loop,
+      style: {
+        width: '100%',
+        height: '100%'
+      }
+    })
+  });
+}
+export default /*#__PURE__*/React.memo(LottiePlayer);