jfs-components 0.1.0 → 0.1.8

package/lib/commonjs/components/PdpCcCard/PdpCcCard.js

@@ -0,0 +1,273 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Title = _interopRequireDefault(require("../Title/Title"));
+var _Divider = _interopRequireDefault(require("../Divider/Divider"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+var _Image = _interopRequireDefault(require("../Image/Image"));
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * A single metric column inside the card's stats row: a small title, a bold
+ * value and an optional muted caption.
+ */
+
+/**
+ * PdpCcCard — Figma node 5352:935 ("PDP cc card").
+ *
+ * A centered white product/PDP card composed from the shared design-system
+ * primitives so it stays in sync with the rest of the library:
+ *
+ *  - **Media** — a top image slot (`Image`, rounded via `image/radius`). Pass
+ *    `imageSource` for the default image or `media` for a full slot override.
+ *  - **Title** — a centered headline + subtitle rendered through the shared
+ *    {@link Title} component (`title/*`, `pageSubtitle/*` tokens).
+ *  - **Metrics** — a row of {@link PdpCcCardMetric} columns (title / value /
+ *    caption) separated by vertical `Divider`s (`metricdata/*` tokens).
+ *  - **CTA** — a small tonal {@link Button} (`Button / Size: S`,
+ *    `AppearanceBrand: Secondary`, `Emphasis: Medium`) with a leading icon.
+ *
+ * All defaults can be overridden via `modes`.
+ */
+function PdpCcCard({
+  imageSource,
+  imageWidth = 100,
+  imageHeight = 60,
+  media,
+  title = 'Title',
+  subtitle = 'Subtitle',
+  metrics = DEFAULT_METRICS,
+  buttonLabel = 'button',
+  buttonIcon = 'ic_add_circle',
+  onButtonPress,
+  button,
+  showButton = true,
+  onPress,
+  width = 344,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
+
+  // The CTA uses the brand "Secondary" appearance at "Medium" emphasis (lilac
+  // fill + purple label) and the small size — matching the design. A
+  // consumer-supplied `modes` value still wins via spread order.
+  const ctaModes = (0, _react.useMemo)(() => ({
+    AppearanceBrand: 'Secondary',
+    Emphasis: 'Medium',
+    'Button / Size': 'S',
+    ...modes
+  }), [modes]);
+  const buttonForeground = (0, _react.useMemo)(() => asStr((0, _figmaVariablesResolver.getVariableByName)('button/foreground', ctaModes), '#5d00b5'), [ctaModes]);
+  const mediaNode = media ? (0, _reactUtils.cloneChildrenWithModes)(media, modes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+    imageSource: imageSource,
+    width: imageWidth,
+    height: imageHeight,
+    borderRadius: tokens.imageRadius,
+    resizeMode: "cover",
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no"
+  });
+  const ctaNode = button ? (0, _reactUtils.cloneChildrenWithModes)(button, ctaModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+    label: buttonLabel,
+    modes: ctaModes,
+    onPress: onButtonPress,
+    leading: buttonIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      iconName: buttonIcon,
+      size: tokens.buttonIconSize,
+      color: buttonForeground
+    }) : undefined
+  });
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.mediaSlot,
+      children: mediaNode
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Title.default, {
+      title: title,
+      subtitle: subtitle,
+      textAlign: "Center",
+      modes: modes
+    }), metrics.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.metricsRow,
+      children: metrics.map((metric, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+        children: [index > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+          direction: "vertical",
+          modes: modes,
+          style: styles.metricDivider
+        }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(Metricdata, {
+          metric: metric,
+          tokens: tokens
+        })]
+      }, index))
+    }) : null, showButton ? ctaNode : null]
+  });
+  const containerStyle = (0, _react.useMemo)(() => ({
+    ...tokens.container,
+    width
+  }), [tokens.container, width]);
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: ({
+        pressed
+      }) => [containerStyle, pressed ? styles.pressed : null, style],
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      onPress: onPress,
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Metricdata — internal metric column (Figma node 5352:256)
+// ---------------------------------------------------------------------------
+
+function Metricdata({
+  metric,
+  tokens
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: tokens.metric,
+    children: [metric.title != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: tokens.metricTitle,
+      children: metric.title
+    }) : null, metric.value != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: tokens.metricValue,
+      children: metric.value
+    }) : null, metric.caption != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: tokens.metricCaption,
+      children: metric.caption
+    }) : null]
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+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 background = asStr((0, _figmaVariablesResolver.getVariableByName)('PDPcccard/bg/color', modes), '#ffffff');
+  const paddingHorizontal = asNum((0, _figmaVariablesResolver.getVariableByName)('PDPcccard/padding/horizontal', modes), 16);
+  const paddingVertical = asNum((0, _figmaVariablesResolver.getVariableByName)('PDPcccard/padding/vertical', modes), 20);
+  const gap = asNum((0, _figmaVariablesResolver.getVariableByName)('PDPcccard/gap', modes), 12);
+  const imageRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('image/radius', modes), 8);
+  const buttonIconSize = asNum((0, _figmaVariablesResolver.getVariableByName)('button/iconSize', modes), 16);
+  const metricGap = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/gap', modes), 4);
+  const metricPadH = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/horizontal', modes), 10);
+  const metricPadV = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/padding/vertical', modes), 10);
+  const titleColor = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/color', modes), '#000000');
+  const titleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontsize', modes), 12);
+  const titleFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontfamily', modes), 'JioType Var');
+  const titleWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/title/fontweight', modes), '400');
+  const valueColor = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/value/color', modes), '#000000');
+  const valueSize = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/value/fontsize', modes), 20);
+  const valueFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/value/fontfamily', modes), 'JioType Var');
+  const valueWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/value/fontweight', modes), '700');
+  const captionColor = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/color', modes), '#777777');
+  const captionSize = asNum((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontsize', modes), 12);
+  const captionFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontfamily', modes), 'JioType Var');
+  const captionWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('metricdata/caption/fontweight', modes), '500');
+  return {
+    container: {
+      backgroundColor: background,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    imageRadius,
+    buttonIconSize,
+    metric: {
+      flex: 1,
+      gap: metricGap,
+      paddingHorizontal: metricPadH,
+      paddingVertical: metricPadV,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    metricTitle: {
+      color: titleColor,
+      fontSize: titleSize,
+      fontFamily: titleFamily,
+      fontWeight: titleWeight,
+      lineHeight: Math.round(titleSize * 1.2),
+      textAlign: 'center',
+      includeFontPadding: false
+    },
+    metricValue: {
+      color: valueColor,
+      fontSize: valueSize,
+      fontFamily: valueFamily,
+      fontWeight: valueWeight,
+      lineHeight: Math.round(valueSize * 1.2),
+      textAlign: 'center',
+      includeFontPadding: false
+    },
+    metricCaption: {
+      color: captionColor,
+      fontSize: captionSize,
+      fontFamily: captionFamily,
+      fontWeight: captionWeight,
+      lineHeight: Math.round(captionSize * 1.2),
+      textAlign: 'center',
+      includeFontPadding: false
+    }
+  };
+}
+const DEFAULT_METRICS = [{
+  title: 'Title',
+  value: 'Value',
+  caption: 'caption'
+}, {
+  title: 'Title',
+  value: 'Value',
+  caption: 'caption'
+}];
+const styles = _reactNative.StyleSheet.create({
+  mediaSlot: {
+    alignSelf: 'stretch',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  metricsRow: {
+    alignSelf: 'stretch',
+    flexDirection: 'row',
+    alignItems: 'stretch'
+  },
+  metricDivider: {
+    alignSelf: 'center',
+    height: '70%'
+  },
+  pressed: {
+    opacity: 0.92
+  }
+});
+var _default = exports.default = PdpCcCard;

package/lib/commonjs/components/PlanComparisonCard/PlanComparisonCard.js

@@ -11,7 +11,8 @@ var _reactUtils = require("../../utils/react-utils");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/** Figma grid: label column 1.8fr, each plan column 1fr. */const LABEL_COLUMN_FR = 1.8;
+/** Figma grid: label column 1.8fr, each plan column 1fr. */
+const LABEL_COLUMN_FR = 1.8;
 const PLAN_COLUMN_FR = 1;
 
 /**

package/lib/commonjs/components/ProductMerchandisingCard/GlassFill.js

@@ -0,0 +1,263 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _blur = require("@react-native-community/blur");
+var _maskedView = _interopRequireDefault(require("@react-native-masked-view/masked-view"));
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const DEFAULT_FALLBACK_DARK = '#1414174a';
+const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
+
+// The native view-manager name registered by `@react-native-community/blur`
+// (`AndroidBlurView` on Android, `BlurView` on iOS).
+const NATIVE_BLUR_NAME = _reactNative.Platform.OS === 'android' ? 'AndroidBlurView' : 'BlurView';
+
+/**
+ * Alpha stop on a layer's vertical reveal mask. `offset` is the vertical
+ * position (0 = top of the surface, 1 = bottom); `opacity` is the mask alpha
+ * there (0 = layer hidden / fully clear, 1 = layer fully applied).
+ *
+ * Using several stops (rather than a single linear 0 → 1 ramp) lets each layer
+ * EASE in, so the blur swells smoothly toward the bottom instead of appearing
+ * along a hard horizontal seam. That soft S-curve is what gives the surface its
+ * "glass" feel rather than a flat translucent panel.
+ */
+
+/**
+ * A single layer of the progressive ramp.
+ *  - `stops` describe how this layer is revealed from top to bottom.
+ *  - `amount` is this layer's share (0–1) of the max `blurAmount`.
+ *
+ * We stack just TWO layers on both platforms: a faint base blur that covers
+ * most of the footer and a slightly stronger accent concentrated near the
+ * bottom. Keeping the overlap shallow avoids compounding the dark tint of
+ * multiple `BlurView`s (which is what made the earlier 3-layer ramp read as a
+ * heavy block), while still giving a genuine variable-radius result — the blur
+ * radius grows toward the bottom where the two layers overlap.
+ */
+
+// Base reveal: a faint trace of blur begins near the very top and grows
+// steadily downward, so the upper half still carries visible glass rather than
+// snapping clear. Also reused for the no-native-blur fallback scrim.
+const BASE_MASK_STOPS = [{
+  offset: 0.0,
+  opacity: 0
+}, {
+  offset: 0.08,
+  opacity: 0.12
+}, {
+  offset: 0.35,
+  opacity: 0.4
+}, {
+  offset: 0.65,
+  opacity: 0.8
+}, {
+  offset: 1.0,
+  opacity: 1
+}];
+const PROGRESSIVE_LAYERS = [{
+  amount: 0.65,
+  stops: BASE_MASK_STOPS
+},
+// Accent: the strongest blur, gathering over the lower portion for depth.
+{
+  amount: 1.0,
+  stops: [{
+    offset: 0.0,
+    opacity: 0
+  }, {
+    offset: 0.3,
+    opacity: 0.15
+  }, {
+    offset: 0.65,
+    opacity: 0.65
+  }, {
+    offset: 1.0,
+    opacity: 1
+  }]
+}];
+
+/**
+ * Probe ONCE whether the native blur view is actually present in this binary.
+ *
+ * `@react-native-community/blur` is a peer dependency so its JS always imports,
+ * but on a build where the native module was never linked (e.g. `pod install`
+ * wasn't run on iOS) rendering `<BlurView>` shows React Native's red
+ * "Unimplemented component <BlurView>" placeholder. Detecting availability up
+ * front lets us fall back to a tinted scrim instead of crashing the surface.
+ *
+ *   - New architecture (bridgeless): `getViewManagerConfig` raises a soft error,
+ *     so we MUST use `hasViewManagerConfig` -> Fabric component registry.
+ *   - Old architecture (Paper): `getViewManagerConfig` returns null when the
+ *     view manager isn't registered.
+ */
+const NATIVE_BLUR_SUPPORTED = (() => {
+  try {
+    const um = _reactNative.UIManager;
+    if (typeof um.hasViewManagerConfig === 'function') {
+      return um.hasViewManagerConfig(NATIVE_BLUR_NAME) === true;
+    }
+    if (typeof um.getViewManagerConfig === 'function') {
+      return um.getViewManagerConfig(NATIVE_BLUR_NAME) != null;
+    }
+  } catch {
+    // Any probe failure -> treat blur as unavailable and use the fallback.
+  }
+  return false;
+})();
+
+/**
+ * Vertical alpha-gradient mask drawn with `react-native-svg`. `MaskedView`
+ * reveals its child in proportion to this mask's alpha, so feeding it an eased
+ * multi-stop gradient makes the layer's blur swell in smoothly from top to
+ * bottom instead of along a hard seam.
+ */
+function GradientMask({
+  id,
+  stops
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeSvg.default, {
+    width: "100%",
+    height: "100%",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Defs, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.LinearGradient, {
+        id: id,
+        x1: "0",
+        y1: "0",
+        x2: "0",
+        y2: "1",
+        children: stops.map((s, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Stop, {
+          offset: s.offset,
+          stopColor: "#000000",
+          stopOpacity: s.opacity
+        }, i))
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Rect, {
+      x: "0",
+      y: "0",
+      width: "100%",
+      height: "100%",
+      fill: `url(#${id})`
+    })]
+  });
+}
+
+/**
+ * Glass / frosted surface for native (iOS + Android).
+ *
+ * Why this lives in its own platform-split file (mirrors `MediaCard/GlassFill`):
+ *   - `@react-native-community/blur` is a native-only module; importing it on
+ *     web throws because it references native components not registered there.
+ *     Metro's platform-extension resolution picks `GlassFill.tsx` for native
+ *     and `GlassFill.web.tsx` for web, keeping the web bundle native-free.
+ *   - Centralizes the `intensity` (0–100) -> `blurAmount` (0–32) mapping so the
+ *     Figma `blur/minimal` token semantics survive across platforms.
+ *
+ * On iOS (with the pod installed) this is a real `UIVisualEffectView` (true
+ * OS-level live blur). On Android it uses the community blur view. When the
+ * native module isn't linked in the running binary, the component degrades to
+ * a translucent tinted scrim (`reducedTransparencyFallbackColor` / fallback
+ * color) instead of rendering the "Unimplemented component" placeholder.
+ */
+function GlassFill({
+  tint = 'dark',
+  intensity = 50,
+  overlayColor,
+  progressive = false,
+  style
+}) {
+  const rawId = (0, _react.useId)();
+  const maskId = `glass-mask-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+  const blurType = tint === 'light' ? 'light' : 'dark';
+  const uniformBlurAmount = Math.max(0, Math.min(32, Math.round(intensity * 0.32)));
+  const fallbackColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK);
+
+  // ----- Progressive (variable) blur -------------------------------------
+  if (progressive) {
+    // Peak blur radius (at the bottom). Full strength so the frosted glass
+    // is clearly engaged where the layers overlap, while the eased masks
+    // keep the top of the surface fully clear.
+    const peakBlur = Math.max(1, Math.min(32, Math.round(intensity * 0.32)));
+
+    // Native blur not linked -> tint eases from transparent (top) to a soft
+    // fallback color (bottom) so the surface still reads as gentle glass.
+    if (!NATIVE_BLUR_SUPPORTED) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [_reactNative.StyleSheet.absoluteFill, style],
+        pointerEvents: "none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_maskedView.default, {
+          style: _reactNative.StyleSheet.absoluteFill,
+          maskElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(GradientMask, {
+            id: `${maskId}-fb`,
+            stops: BASE_MASK_STOPS
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [_reactNative.StyleSheet.absoluteFill, {
+              backgroundColor: fallbackColor
+            }]
+          })
+        })
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, style],
+      pointerEvents: "none",
+      children: PROGRESSIVE_LAYERS.map((layer, i) => {
+        const amount = Math.max(1, Math.round(peakBlur * layer.amount));
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_maskedView.default, {
+          style: _reactNative.StyleSheet.absoluteFill,
+          maskElement: /*#__PURE__*/(0, _jsxRuntime.jsx)(GradientMask, {
+            id: `${maskId}-${i}`,
+            stops: layer.stops
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_blur.BlurView, {
+            style: _reactNative.StyleSheet.absoluteFill,
+            blurType: blurType,
+            blurAmount: amount,
+            reducedTransparencyFallbackColor: fallbackColor
+          })
+        }, i);
+      })
+    });
+  }
+
+  // ----- Uniform blur (default) ------------------------------------------
+  // Native blur not linked in this build -> render a translucent tinted scrim
+  // so the surface still reads as frosted glass and never shows RN's
+  // "Unimplemented component <BlurView>" box.
+  if (!NATIVE_BLUR_SUPPORTED) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        backgroundColor: fallbackColor
+      }, style],
+      pointerEvents: "none"
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [_reactNative.StyleSheet.absoluteFill, style],
+    pointerEvents: "none",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_blur.BlurView, {
+      style: _reactNative.StyleSheet.absoluteFill,
+      blurType: blurType,
+      blurAmount: uniformBlurAmount,
+      reducedTransparencyFallbackColor: fallbackColor
+    }), overlayColor != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        backgroundColor: overlayColor
+      }]
+    }) : null, _reactNative.Platform.OS === 'android' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        backgroundColor: 'rgba(255,255,255,0.03)',
+        opacity: 0.6
+      }]
+    }) : null]
+  });
+}
+var _default = exports.default = GlassFill;

package/lib/commonjs/components/ProductMerchandisingCard/GlassFill.web.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEFAULT_FALLBACK_DARK = '#1414174a';
+const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
+
+// Mirror of the native ramp (see GlassFill.tsx). Each layer is a `mask-image`
+// gradient whose alpha stops (0 = top, 1 = bottom) ease the blur in; `amount`
+// is the layer's share of the max blur. Two gently-overlapping layers (faint
+// base + bottom accent) keep the surface subtle and glass-like rather than a
+// heavy frosted block.
+
+const PROGRESSIVE_LAYERS = [{
+  amount: 0.65,
+  stops: [{
+    offset: 0.0,
+    opacity: 0
+  }, {
+    offset: 0.08,
+    opacity: 0.12
+  }, {
+    offset: 0.35,
+    opacity: 0.4
+  }, {
+    offset: 0.65,
+    opacity: 0.8
+  }, {
+    offset: 1.0,
+    opacity: 1
+  }]
+}, {
+  amount: 1.0,
+  stops: [{
+    offset: 0.0,
+    opacity: 0
+  }, {
+    offset: 0.3,
+    opacity: 0.15
+  }, {
+    offset: 0.65,
+    opacity: 0.65
+  }, {
+    offset: 1.0,
+    opacity: 1
+  }]
+}];
+function toGradient(stops) {
+  const parts = stops.map(s => `rgba(0,0,0,${s.opacity}) ${Math.round(s.offset * 100)}%`).join(', ');
+  return `linear-gradient(to bottom, ${parts})`;
+}
+
+/**
+ * Web counterpart of `GlassFill`.
+ *
+ * `@react-native-community/blur` ships no web implementation, so on web we
+ * render a translucent `View` with `backdrop-filter: blur()`. Native bundles
+ * pick up `GlassFill.tsx` instead via Metro's platform resolver; the web
+ * bundle picks up this file, so the native-only module is never imported here.
+ */
+function GlassFill({
+  tint = 'dark',
+  intensity = 50,
+  overlayColor,
+  progressive = false,
+  style
+}) {
+  // intensity 0-100 -> ~0-32px CSS blur, kept in parity with the native scale.
+  const blurPx = Math.max(0, Math.min(32, Math.round(intensity * 0.32)));
+  const tintColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK);
+  if (progressive) {
+    // Full peak blur (parity with native) so the frosted glass is clearly
+    // engaged at the bottom; the eased masks keep the top fully clear.
+    const peakPx = Math.max(1, Math.min(32, Math.round(intensity * 0.32)));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [_reactNative.StyleSheet.absoluteFill, style],
+      pointerEvents: "none",
+      children: PROGRESSIVE_LAYERS.map((layer, i) => {
+        const px = Math.max(1, Math.round(peakPx * layer.amount));
+        const gradient = toGradient(layer.stops);
+        // web-only CSS (backdrop-filter / mask-image); cast because
+        // these keys aren't in RN's ViewStyle.
+        const webStyle = {
+          backdropFilter: `blur(${px}px)`,
+          WebkitBackdropFilter: `blur(${px}px)`,
+          maskImage: gradient,
+          WebkitMaskImage: gradient
+        };
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: [_reactNative.StyleSheet.absoluteFill, webStyle],
+          pointerEvents: "none"
+        }, i);
+      })
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [_reactNative.StyleSheet.absoluteFill, {
+      backgroundColor: tintColor
+    },
+    // backdrop-filter is web-only CSS; ignored by RN on native
+    // (we never bundle this file there anyway).
+    // @ts-ignore web-only style
+    {
+      backdropFilter: `blur(${blurPx}px)`,
+      WebkitBackdropFilter: `blur(${blurPx}px)`
+    }, style],
+    pointerEvents: "none"
+  });
+}
+var _default = exports.default = GlassFill;