jfs-components 0.1.8 → 0.1.17

package/src/{components/ProductMerchandisingCard → utils/GlassFill}/GlassFill.tsx

@@ -37,6 +37,27 @@ export interface GlassFillProps {
      * along a hard seam. Works on iOS and Android with no extra native module.
      */
     progressive?: boolean
+    /**
+     * Android-only: paint a barely-there white wash (`rgba(255,255,255,0.03)`)
+     * over the uniform blur to lift the community `RealtimeBlurView`, which
+     * otherwise reads slightly muddy. Defaults to `true` to match the
+     * media/merchandising card surfaces. Smaller surfaces (e.g. a Badge pill)
+     * pass `false` to keep the glass perfectly clear. No effect on iOS/web or
+     * on the progressive path.
+     */
+    androidTintWash?: boolean
+    /**
+     * Web-only: multiplier converting the 0–100 `intensity` to CSS blur px (see
+     * `GlassFill.web.tsx`). Declared here purely for prop-type parity across the
+     * platform split — native always uses the fixed `blurAmount` scale and
+     * ignores this value.
+     */
+    webBlurScale?: number
+    /**
+     * Web-only: upper clamp (px) on the resolved CSS blur. Declared here for
+     * parity with the web build; ignored on native.
+     */
+    webBlurMaxPx?: number
     /** Container style overrides. Defaults to `StyleSheet.absoluteFill`. */
     style?: StyleProp<ViewStyle>
 }
@@ -159,9 +180,13 @@ function GradientMask({ id, stops }: { id: string; stops: MaskStop[] }) {
 }
 
 /**
- * Glass / frosted surface for native (iOS + Android).
+ * Shared glass / frosted surface for native (iOS + Android).
  *
- * Why this lives in its own platform-split file (mirrors `MediaCard/GlassFill`):
+ * This is the single source of truth for the glass effect used by `MediaCard`,
+ * `ProductMerchandisingCard`, `Badge`, and any future consumer. It supersedes
+ * the per-component `GlassFill` copies that previously drifted apart.
+ *
+ * Why this lives in its own platform-split file:
  *   - `@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
@@ -174,12 +199,16 @@ function GradientMask({ id, stops }: { id: string; stops: MaskStop[] }) {
  * 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.
+ *
+ * NOTE: the consumer MUST clip this with `overflow: 'hidden'` on a rounded
+ * parent — the native blur view does not honor `borderRadius` itself.
  */
 function GlassFill({
     tint = 'dark',
     intensity = 50,
     overlayColor,
     progressive = false,
+    androidTintWash = true,
     style,
 }: GlassFillProps) {
     const rawId = useId()
@@ -258,7 +287,7 @@ function GlassFill({
             {overlayColor != null ? (
                 <View style={[StyleSheet.absoluteFill, { backgroundColor: overlayColor }]} />
             ) : null}
-            {Platform.OS === 'android' ? (
+            {Platform.OS === 'android' && androidTintWash ? (
                 <View
                     style={[
                         StyleSheet.absoluteFill,

package/src/{components/ProductMerchandisingCard → utils/GlassFill}/GlassFill.web.tsx

@@ -15,12 +15,31 @@ export interface GlassFillProps {
      * smoothly toward the bottom.
      */
     progressive?: boolean
+    /**
+     * Android-only knob on native; accepted on web for prop parity but unused
+     * (web has no equivalent realtime-blur muddiness to lift).
+     */
+    androidTintWash?: boolean
+    /**
+     * Multiplier converting the 0–100 `intensity` to CSS blur px. Defaults to
+     * `0.32` to mirror the native `blurAmount` scale. Exposed so a consumer can
+     * preserve a legacy mapping (e.g. `MediaCard` uses `0.3`).
+     */
+    webBlurScale?: number
+    /**
+     * Upper clamp (px) on the resolved CSS blur. Defaults to `32` to mirror the
+     * native cap. `MediaCard` passes `30` to preserve its historical value.
+     */
+    webBlurMaxPx?: number
     style?: StyleProp<ViewStyle>
 }
 
 const DEFAULT_FALLBACK_DARK = '#1414174a'
 const DEFAULT_FALLBACK_LIGHT = '#ffffff66'
 
+const DEFAULT_WEB_BLUR_SCALE = 0.32
+const DEFAULT_WEB_BLUR_MAX_PX = 32
+
 // 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
@@ -61,7 +80,7 @@ function toGradient(stops: WebLayer['stops']): string {
 }
 
 /**
- * Web counterpart of `GlassFill`.
+ * Web counterpart of the shared `GlassFill`.
  *
  * `@react-native-community/blur` ships no web implementation, so on web we
  * render a translucent `View` with `backdrop-filter: blur()`. Native bundles
@@ -73,16 +92,18 @@ function GlassFill({
     intensity = 50,
     overlayColor,
     progressive = false,
+    webBlurScale = DEFAULT_WEB_BLUR_SCALE,
+    webBlurMaxPx = DEFAULT_WEB_BLUR_MAX_PX,
     style,
 }: GlassFillProps) {
-    // 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)))
+    // intensity 0-100 -> ~0-maxPx CSS blur, kept in parity with the native scale.
+    const blurPx = Math.max(0, Math.min(webBlurMaxPx, Math.round(intensity * webBlurScale)))
     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)))
+        const peakPx = Math.max(1, Math.min(webBlurMaxPx, Math.round(intensity * webBlurScale)))
         return (
             <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
                 {PROGRESSIVE_LAYERS.map((layer, i) => {

package/src/utils/index.ts

@@ -2,3 +2,5 @@ export { cloneChildrenWithModes, flattenChildren } from './react-utils'
 export { default as MediaSource } from './MediaSource'
 export type { UnifiedSource, MediaSourceProps } from './MediaSource'
 export { formatIndianNumber } from './number-utils'
+export { boxShadow, supportsNativeBoxShadow, parseBoxShadow, parseSingleShadow } from './shadow'
+export type { BoxShadowOptions, ParsedShadow } from './shadow'

package/src/utils/react-utils.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Platform, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
 import type { Modes } from '../design-tokens'
 
 /**
@@ -88,6 +89,45 @@ export function cloneChildrenWithModes(
     return React.Children.toArray(result);
 }
 
+/**
+ * Merges a style onto each direct (top-level) child element, with the injected
+ * style taking precedence over the child's own style.
+ *
+ * Used by the Stack family to *enforce* cross-axis stretching from the container
+ * itself: a child can set its own `alignSelf` (which, per the flexbox spec,
+ * overrides the parent's `alignItems`), so to guarantee equal heights / full
+ * width regardless of what individual children declare, we append
+ * `{ alignSelf: 'stretch' }` to every direct child.
+ *
+ * @remarks
+ * - Only top-level children are touched. Grandchildren are intentionally left
+ *   alone — we never want to leak layout styles deeper into the tree.
+ * - Non-element children (strings, numbers) are passed through untouched.
+ * - This relies on the child forwarding `style` to its outer/root view. Built-in
+ *   RN primitives and components that spread `style` onto their root honour it;
+ *   a child that fully ignores `style` cannot be forced (this is a hard React
+ *   Native limitation, not something this helper can work around).
+ * - Per Yoga, stretch has no effect on an axis where the child has a *fixed*
+ *   dimension (e.g. an explicit `height` for a row). Such children opt out by
+ *   design; this helper does not strip explicit dimensions.
+ */
+export function injectChildStyle(
+    children: React.ReactNode,
+    style: StyleProp<ViewStyle>
+): React.ReactNode {
+    return React.Children.map(children, (child) => {
+        if (!React.isValidElement(child)) {
+            return child;
+        }
+
+        const existingStyle = (child.props as { style?: StyleProp<ViewStyle> })?.style;
+
+        return React.cloneElement(child as React.ReactElement<{ style?: StyleProp<ViewStyle> }>, {
+            style: existingStyle != null ? [existingStyle, style] : style,
+        });
+    });
+}
+
 /**
  * Combines several refs (object refs and/or callback refs) into a single
  * callback ref. Useful when a component needs to keep its own internal ref to a
@@ -111,6 +151,98 @@ export function mergeRefs<T>(
     };
 }
 
+export type EllipsizeMode = 'head' | 'middle' | 'tail' | 'clip';
+
+/**
+ * Resolves the `numberOfLines` / `ellipsizeMode` pair for a `<Text>` based on a
+ * `disableTruncation` flag.
+ *
+ * When `disableTruncation` is `true`, both values are returned as `undefined`
+ * so the text wraps to as many lines as it needs and never shows the trailing
+ * ellipsis. Otherwise the provided values are passed through unchanged.
+ */
+export function resolveTruncation(
+    disableTruncation: boolean | undefined,
+    numberOfLines?: number,
+    ellipsizeMode?: EllipsizeMode
+): { numberOfLines?: number; ellipsizeMode?: EllipsizeMode } {
+    if (disableTruncation) {
+        return { numberOfLines: undefined, ellipsizeMode: undefined };
+    }
+    return { numberOfLines, ellipsizeMode };
+}
+
+export type TextLayoutResult = {
+    numberOfLines?: number | undefined;
+    ellipsizeMode?: EllipsizeMode | undefined;
+    /**
+     * Style fragment that MUST be merged onto the target `<Text>` (after the
+     * component's own style and any consumer `style` override) so the escape
+     * hatches can win. `undefined` when neither flag is set.
+     */
+    style?: TextStyle | undefined;
+};
+
+/**
+ * Resolves the `<Text>` props + style for the two truncation escape hatches.
+ * This supersedes {@link resolveTruncation} for components that want the
+ * "brutal" overflow behaviour rather than just dropping the line clamp.
+ *
+ * - `disableTruncation`: never truncate. Drops `numberOfLines`/`ellipsizeMode`
+ *   AND sets `flexShrink: 0`, so a tight flex parent can no longer squeeze the
+ *   text into an ellipsis — instead the text keeps its intrinsic size and
+ *   overflows, even if that means blowing past (and visually breaking) the
+ *   parent layout. The text still wraps onto multiple lines.
+ * - `singleLine`: force everything onto one line with no wrapping. Implies
+ *   `disableTruncation` (the ellipsis is never shown). On web this adds
+ *   `whiteSpace: 'nowrap'` so the single line overflows horizontally instead of
+ *   wrapping. The text is never shrunk.
+ *
+ * Note (native): React Native's `<Text>` has no `white-space: nowrap`
+ * equivalent, so on iOS/Android `singleLine` cannot force a hard non-wrapping
+ * overflow — it behaves like `disableTruncation` (no ellipsis, no shrink). The
+ * hard single-line overflow is honoured on web (Storybook / react-native-web).
+ *
+ * When neither flag is set, the supplied `numberOfLines`/`ellipsizeMode` pass
+ * through unchanged and no extra style is returned.
+ */
+export function resolveTextLayout({
+    disableTruncation,
+    singleLine,
+    numberOfLines,
+    ellipsizeMode,
+}: {
+    disableTruncation?: boolean | undefined;
+    singleLine?: boolean | undefined;
+    numberOfLines?: number | undefined;
+    ellipsizeMode?: EllipsizeMode | undefined;
+}): TextLayoutResult {
+    if (singleLine) {
+        return {
+            numberOfLines: undefined,
+            ellipsizeMode: undefined,
+            style: {
+                flexShrink: 0,
+                flexGrow: 0,
+                ...(Platform.OS === 'web'
+                    ? { whiteSpace: 'nowrap' as const, overflow: 'visible' as const }
+                    : {}),
+            },
+        }
+    }
+    if (disableTruncation) {
+        return {
+            numberOfLines: undefined,
+            ellipsizeMode: undefined,
+            style: {
+                flexShrink: 0,
+                ...(Platform.OS === 'web' ? { overflow: 'visible' as const } : {}),
+            },
+        }
+    }
+    return { numberOfLines, ellipsizeMode }
+}
+
 /**
  * Flattens React children, extracting them from Fragments.
  * Useful for Group components that need to process individual items (e.g., for layout or styling)

package/src/utils/shadow.ts

@@ -0,0 +1,219 @@
+import { Platform } from 'react-native'
+import type { ViewStyle } from 'react-native'
+
+/**
+ * Cross-platform drop-shadow helper with a backward-compatibility layer.
+ *
+ * Why this exists
+ * ----------------
+ * The spec-compliant `boxShadow` style prop only landed in React Native 0.76
+ * (and only on the New Architecture / Fabric). Older apps that consume this
+ * library are still on pre-0.76 React Native where `boxShadow` is silently
+ * ignored on native, so their shadows simply disappear.
+ *
+ * Rather than hand-rolling a `Platform.select` block in every component, route
+ * ALL drop shadows through this single helper. When `boxShadow` is natively
+ * supported it is used verbatim (web + RN 0.76+ Fabric). When it is NOT
+ * supported, the CSS-style shadow string is parsed and translated into the
+ * legacy native shadow API:
+ *   - iOS:     `shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius`
+ *   - Android: `elevation`
+ *
+ * @example
+ * ```tsx
+ * const style = boxShadow('0px 2px 4px 0px rgba(0,0,0,0.18)')
+ * <View style={[base, style]} />
+ * ```
+ */
+
+export interface ParsedShadow {
+  offsetX: number
+  offsetY: number
+  blur: number
+  spread: number
+  color: string
+  inset: boolean
+}
+
+export interface BoxShadowOptions {
+  /**
+   * Explicit Android `elevation` for the legacy fallback. When omitted it is
+   * derived from the most prominent shadow's blur radius. Android elevation
+   * cannot reproduce colored/ring shadows, so provide this when the default
+   * heuristic doesn't match the design.
+   */
+  elevation?: number
+}
+
+// `boxShadow` is intentionally absent from the @types/react-native surface in
+// this repo (pinned to 0.73), so we widen ViewStyle locally for the cases
+// where we DO emit the native/web boxShadow string.
+type ShadowViewStyle = ViewStyle & { boxShadow?: string }
+
+/**
+ * Whether the spec-compliant `boxShadow` style prop is honored at runtime.
+ * - Web (react-native-web) always supports it.
+ * - Native supports it from RN 0.76+ AND only on the New Architecture (Fabric).
+ */
+export function supportsNativeBoxShadow(): boolean {
+  if (Platform.OS === 'web') {
+    return true
+  }
+
+  const version = (Platform.constants as { reactNativeVersion?: { major: number; minor: number } } | undefined)
+    ?.reactNativeVersion
+
+  const isVersionSupported = version
+    ? version.major > 0 || (version.major === 0 && version.minor >= 76)
+    : false
+
+  // Even on 0.76+, boxShadow is a New Architecture feature. Fabric exposes a
+  // global UI manager; its presence is the most reliable runtime signal.
+  const isFabric =
+    typeof globalThis !== 'undefined' &&
+    (globalThis as { nativeFabricUIManager?: unknown }).nativeFabricUIManager != null
+
+  return isVersionSupported && isFabric
+}
+
+/**
+ * Splits a (potentially multi-) box-shadow string on top-level commas, i.e.
+ * commas that are NOT inside a color function such as `rgba(12, 13, 16, 0.12)`.
+ */
+function splitShadows(value: string): string[] {
+  const out: string[] = []
+  let depth = 0
+  let current = ''
+
+  for (const ch of value) {
+    if (ch === '(') depth++
+    else if (ch === ')') depth--
+
+    if (ch === ',' && depth === 0) {
+      if (current.trim()) out.push(current.trim())
+      current = ''
+    } else {
+      current += ch
+    }
+  }
+
+  if (current.trim()) out.push(current.trim())
+  return out
+}
+
+/**
+ * Parses a single CSS box-shadow layer into its primitive parts.
+ * Supports: `[inset] offsetX offsetY [blur] [spread] color` in any sensible
+ * ordering of the keyword/color, with `rgb()/rgba()/hsl()/hsla()`, hex, or
+ * named colors.
+ */
+export function parseSingleShadow(input: string): ParsedShadow {
+  let s = input.trim()
+
+  let inset = false
+  if (/(^|\s)inset(\s|$)/i.test(s)) {
+    inset = true
+    s = s.replace(/(^|\s)inset(\s|$)/i, ' ').trim()
+  }
+
+  let color = 'rgba(0,0,0,1)'
+  const fnColor = s.match(/(?:rgba?|hsla?)\([^)]*\)/i)
+  if (fnColor) {
+    color = fnColor[0]
+    s = s.replace(fnColor[0], ' ').trim()
+  } else {
+    const hex = s.match(/#[0-9a-fA-F]{3,8}\b/)
+    if (hex) {
+      color = hex[0]
+      s = s.replace(hex[0], ' ').trim()
+    } else {
+      // Fall back to a trailing named color token (e.g. "red", "black").
+      const tokens = s.split(/\s+/).filter(Boolean)
+      const last = tokens[tokens.length - 1]
+      if (last && Number.isNaN(parseFloat(last))) {
+        color = last
+        tokens.pop()
+        s = tokens.join(' ')
+      }
+    }
+  }
+
+  const nums = s.split(/\s+/).filter(Boolean).map((t) => parseFloat(t) || 0)
+  const [offsetX = 0, offsetY = 0, blur = 0, spread = 0] = nums
+
+  return { offsetX, offsetY, blur, spread, color, inset }
+}
+
+/**
+ * Parses a full box-shadow string (one or more comma-separated layers).
+ */
+export function parseBoxShadow(value: string): ParsedShadow[] {
+  return splitShadows(value).map(parseSingleShadow)
+}
+
+/**
+ * Picks the visually dominant shadow layer (largest blur, then largest spread).
+ * iOS' legacy shadow API can only render a single shadow per view.
+ */
+function pickPrimary(shadows: ParsedShadow[]): ParsedShadow | undefined {
+  if (shadows.length === 0) return undefined
+  return shadows.reduce((best, s) => {
+    if (s.blur > best.blur) return s
+    if (s.blur === best.blur && s.spread > best.spread) return s
+    return best
+  })
+}
+
+/**
+ * Translates the parsed shadow into the legacy native shadow style used by
+ * pre-0.76 React Native.
+ */
+function legacyShadowStyle(value: string, options?: BoxShadowOptions): ViewStyle {
+  const shadows = parseBoxShadow(value)
+  const primary = pickPrimary(shadows)
+
+  if (!primary) {
+    return {}
+  }
+
+  if (Platform.OS === 'android') {
+    const elevation = options?.elevation ?? Math.max(0, Math.round(primary.blur / 2))
+    if (elevation <= 0) {
+      return {}
+    }
+    return { elevation }
+  }
+
+  // iOS: shadowOpacity defaults to 0 (invisible), so it MUST be set. We keep
+  // the full color (its own alpha is respected) and use opacity 1 as the
+  // multiplier so rgba() alpha is honored end-to-end.
+  return {
+    shadowColor: primary.color,
+    shadowOffset: { width: primary.offsetX, height: primary.offsetY },
+    shadowOpacity: 1,
+    shadowRadius: primary.blur,
+  }
+}
+
+/**
+ * Returns a style object that renders the given CSS-style box-shadow on every
+ * platform. Uses the native `boxShadow` prop when supported, otherwise falls
+ * back to the legacy `shadow*` (iOS) / `elevation` (Android) API.
+ *
+ * @param value   A CSS box-shadow string, e.g. `'0px 2px 4px 0px rgba(0,0,0,0.2)'`.
+ *                Multiple comma-separated layers are supported; on the legacy
+ *                fallback iOS uses the most prominent layer and Android uses a
+ *                single elevation.
+ * @param options Optional overrides (e.g. explicit Android `elevation`).
+ */
+export function boxShadow(value: string, options?: BoxShadowOptions): ViewStyle {
+  if (!value) {
+    return {}
+  }
+
+  if (supportsNativeBoxShadow()) {
+    return { boxShadow: value } as ShadowViewStyle
+  }
+
+  return legacyShadowStyle(value, options)
+}

package/src/utils/web-platform-utils.ts

@@ -1,3 +1,5 @@
+import { useEffect, useRef } from 'react'
+import type { RefObject } from 'react'
 import { Platform } from 'react-native'
 import type { PressableProps } from 'react-native'
 
@@ -272,6 +274,72 @@ export function usePressableWebSupport({
   }
 }
 
+/**
+ * Detects pointer presses (mouse / touch) that land OUTSIDE the node held by
+ * `containerRef` and invokes `onOutsidePress`.
+ *
+ * Why this exists:
+ * On web, React Native pressables (`Pressable`, `Button`, links, etc.) do not
+ * always claim DOM focus the way a native `<button>`/`<input>` does. As a
+ * result, tapping an *interactive* element outside a focused `<input>` may
+ * never trigger the input's native `blur` event, leaving a field stuck in its
+ * "Active" visual state. Listening for document-level pointer-down in the
+ * capture phase lets a component force a blur (or close a popover, etc.)
+ * regardless of whether the outside target takes focus.
+ *
+ * Behavior & safety:
+ *  - **Web only.** On native (or when `document` is unavailable) this is a
+ *    no-op, so it is safe to call unconditionally.
+ *  - Listeners are attached only while `enabled` is `true`, and are removed on
+ *    cleanup / when disabled — there is no standing global listener.
+ *  - Uses the **capture** phase so it runs before element-level handlers, and
+ *    listens to both `mousedown` and `touchstart` for parity across devices.
+ *  - The latest `onOutsidePress` is read through a ref, so passing a fresh
+ *    inline closure every render does NOT re-subscribe the listener.
+ *
+ * @param containerRef - Ref to the root host node to treat as "inside".
+ * @param onOutsidePress - Called when a pointer press occurs outside the node.
+ * @param enabled - When `false`, no listener is attached. Defaults to `true`.
+ *
+ * @example
+ * ```tsx
+ * const rootRef = useRef<View>(null)
+ * const inputRef = useRef<RNTextInput>(null)
+ * useWebOutsidePress(rootRef, () => inputRef.current?.blur(), isFocused)
+ * ```
+ */
+export function useWebOutsidePress(
+  containerRef: RefObject<any>,
+  onOutsidePress: () => void,
+  enabled: boolean = true
+): void {
+  const callbackRef = useRef(onOutsidePress)
+  callbackRef.current = onOutsidePress
+
+  useEffect(() => {
+    if (Platform.OS !== 'web' || typeof document === 'undefined' || !enabled) {
+      return
+    }
+
+    const handlePointerDown = (event: Event) => {
+      const node = containerRef.current as unknown as {
+        contains?: (target: EventTarget | null) => boolean
+      } | null
+      const target = (event as unknown as { target: EventTarget | null }).target
+      if (node?.contains && !node.contains(target)) {
+        callbackRef.current()
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown, true)
+    document.addEventListener('touchstart', handlePointerDown, true)
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown, true)
+      document.removeEventListener('touchstart', handlePointerDown, true)
+    }
+  }, [containerRef, enabled])
+}
+
 /**
  * Type guard to check if running on web platform
  */

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

@@ -1,62 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _reactNative = require("react-native");
-var _blur = require("@react-native-community/blur");
-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';
-
-/**
- * Glass / frosted surface for native (iOS + Android).
- *
- * Why this lives in its own platform-split file:
- *   - `@react-native-community/blur` is a native-only module. Importing it on
- *     web throws because the JS shim references native components that aren't
- *     registered there. By using Metro's platform-extension resolution
- *     (`GlassFill.tsx` for native, `GlassFill.web.tsx` for web), we keep the
- *     web bundle free of any native-only imports.
- *   - Centralizes the `intensity` (0–100) -> `blurAmount` (0–32) mapping so
- *     callers can keep the Figma token semantics they already know.
- *
- * On iOS this is a real `UIVisualEffectView` (true OS-level live blur).
- * On Android this uses the community blur view (RealtimeBlurView). On devices
- * where realtime blur is unavailable, `reducedTransparencyFallbackColor` (and
- * the explicit `overlayColor`) ensure the surface still renders as a
- * translucent tinted scrim instead of disappearing.
- */
-function GlassFill({
-  tint = 'dark',
-  intensity = 50,
-  overlayColor,
-  style
-}) {
-  const blurType = tint === 'light' ? 'light' : 'dark';
-  const blurAmount = Math.max(0, Math.min(32, Math.round(intensity * 0.32)));
-  const fallbackColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK);
-  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: blurAmount,
-      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;