jfs-components 0.1.2 → 0.1.12

package/src/utils/react-utils.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
 import type { Modes } from '../design-tokens'
 
 /**
@@ -88,6 +89,89 @@ 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
+ * node while still honouring a ref forwarded by the consumer.
+ *
+ * @example
+ * const inputRef = useRef<RNTextInput>(null)
+ * <RNTextInput ref={mergeRefs(inputRef, forwardedRef)} />
+ */
+export function mergeRefs<T>(
+    ...refs: Array<React.Ref<T> | undefined | null>
+): React.RefCallback<T> {
+    return (value: T | null) => {
+        refs.forEach((ref) => {
+            if (typeof ref === 'function') {
+                ref(value);
+            } else if (ref != null) {
+                (ref as React.MutableRefObject<T | null>).current = value;
+            }
+        });
+    };
+}
+
+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 };
+}
+
 /**
  * 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/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;

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

@@ -1,48 +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 _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';
-
-/**
- * Web counterpart of `GlassFill`.
- *
- * `@react-native-community/blur` does not ship a web implementation, so for
- * the web bundle we render a translucent `View` with `backdrop-filter: blur()`
- * — which is exactly how 0.0.67 and earlier shipped the glass effect on web.
- * Native bundles pick up `GlassFill.tsx` instead via Metro's platform
- * resolver; the web bundle picks up this file.
- */
-function GlassFill({
-  tint = 'dark',
-  intensity = 50,
-  overlayColor,
-  style
-}) {
-  // Approximate mapping: intensity 0-100 -> ~0-30px CSS blur. Keeps parity
-  // with the native blur strength so the component looks roughly the same
-  // across platforms.
-  const blurPx = Math.max(0, Math.min(30, Math.round(intensity * 0.3)));
-  const tintColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [_reactNative.StyleSheet.absoluteFill, {
-      backgroundColor: tintColor
-    },
-    // backdrop-filter is a web-only CSS property; 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;

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

@@ -1,57 +0,0 @@
-"use strict";
-
-import React from 'react';
-import { View, StyleSheet, Platform } from 'react-native';
-import { BlurView } from '@react-native-community/blur';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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__*/_jsxs(View, {
-    style: [StyleSheet.absoluteFill, style],
-    pointerEvents: "none",
-    children: [/*#__PURE__*/_jsx(BlurView, {
-      style: StyleSheet.absoluteFill,
-      blurType: blurType,
-      blurAmount: blurAmount,
-      reducedTransparencyFallbackColor: fallbackColor
-    }), overlayColor != null ? /*#__PURE__*/_jsx(View, {
-      style: [StyleSheet.absoluteFill, {
-        backgroundColor: overlayColor
-      }]
-    }) : null, Platform.OS === 'android' ? /*#__PURE__*/_jsx(View, {
-      style: [StyleSheet.absoluteFill, {
-        backgroundColor: 'rgba(255,255,255,0.03)',
-        opacity: 0.6
-      }]
-    }) : null]
-  });
-}
-export default GlassFill;

package/lib/module/components/MediaCard/GlassFill.web.js

@@ -1,43 +0,0 @@
-"use strict";
-
-import React from 'react';
-import { View, StyleSheet } from 'react-native';
-import { jsx as _jsx } from "react/jsx-runtime";
-const DEFAULT_FALLBACK_DARK = '#1414174a';
-const DEFAULT_FALLBACK_LIGHT = '#ffffff66';
-
-/**
- * Web counterpart of `GlassFill`.
- *
- * `@react-native-community/blur` does not ship a web implementation, so for
- * the web bundle we render a translucent `View` with `backdrop-filter: blur()`
- * — which is exactly how 0.0.67 and earlier shipped the glass effect on web.
- * Native bundles pick up `GlassFill.tsx` instead via Metro's platform
- * resolver; the web bundle picks up this file.
- */
-function GlassFill({
-  tint = 'dark',
-  intensity = 50,
-  overlayColor,
-  style
-}) {
-  // Approximate mapping: intensity 0-100 -> ~0-30px CSS blur. Keeps parity
-  // with the native blur strength so the component looks roughly the same
-  // across platforms.
-  const blurPx = Math.max(0, Math.min(30, Math.round(intensity * 0.3)));
-  const tintColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK);
-  return /*#__PURE__*/_jsx(View, {
-    style: [StyleSheet.absoluteFill, {
-      backgroundColor: tintColor
-    },
-    // backdrop-filter is a web-only CSS property; 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"
-  });
-}
-export default GlassFill;

package/lib/typescript/scripts/extract-component-tokens.d.ts

@@ -1,9 +0,0 @@
-/**
- * Main extraction function
- */
-export function extractAllTokens(): {};
-/**
- * Backwards-compatible helper: just the token names for a file.
- */
-export function extractTokensFromFile(filePath: any): any[];
-//# sourceMappingURL=extract-component-tokens.d.ts.map

package/lib/typescript/scripts/generate-component-docs.d.ts

@@ -1,9 +0,0 @@
-/**
- * Main generation function
- */
-export function generateAllDocs(): void;
-/**
- * Generate MDX documentation for a component
- */
-export function generateMDX(componentName: any, metadata: any, componentPath: any): string;
-//# sourceMappingURL=generate-component-docs.d.ts.map

package/lib/typescript/scripts/generate-icon-registry.d.ts

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-export {};
-//# sourceMappingURL=generate-icon-registry.d.ts.map

package/lib/typescript/scripts/generate-mode-types.d.ts

@@ -1,2 +0,0 @@
-export function generate(): void;
-//# sourceMappingURL=generate-mode-types.d.ts.map

package/lib/typescript/scripts/retype-modes.d.cts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=retype-modes.d.cts.map

package/lib/typescript/src/components/MediaCard/GlassFill.d.ts

@@ -1,47 +0,0 @@
-import { type ViewStyle, type StyleProp } from 'react-native';
-export type GlassTint = 'dark' | 'light';
-export interface GlassFillProps {
-    /**
-     * Visual tint of the glass surface. Maps to `BlurView`'s `blurType`
-     * (`'dark'` | `'light'`). The library also drives the appropriate
-     * `reducedTransparencyFallbackColor` from this so iOS gracefully degrades
-     * when "Reduce Transparency" is enabled in system accessibility settings.
-     */
-    tint?: GlassTint;
-    /**
-     * Blur strength as a 0–100 "intensity" value (kept compatible with the
-     * previous `expo-blur` API so consumers don't need to relearn the scale).
-     * Internally mapped to `@react-native-community/blur`'s `blurAmount`,
-     * which is roughly 0–32 on iOS / Android.
-     */
-    intensity?: number;
-    /**
-     * Token-derived color tint laid OVER the live blur (Figma `blur/minimal/background`).
-     * Painted as a translucent overlay so the glass keeps the design system
-     * color signature even when the platform blur quality varies.
-     */
-    overlayColor?: string;
-    /** Container style overrides. Defaults to `StyleSheet.absoluteFill`. */
-    style?: StyleProp<ViewStyle>;
-}
-/**
- * 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.
- */
-declare function GlassFill({ tint, intensity, overlayColor, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
-export default GlassFill;
-//# sourceMappingURL=GlassFill.d.ts.map

package/lib/typescript/src/components/MediaCard/GlassFill.web.d.ts

@@ -1,20 +0,0 @@
-import { type ViewStyle, type StyleProp } from 'react-native';
-export type GlassTint = 'dark' | 'light';
-export interface GlassFillProps {
-    tint?: GlassTint;
-    intensity?: number;
-    overlayColor?: string;
-    style?: StyleProp<ViewStyle>;
-}
-/**
- * Web counterpart of `GlassFill`.
- *
- * `@react-native-community/blur` does not ship a web implementation, so for
- * the web bundle we render a translucent `View` with `backdrop-filter: blur()`
- * — which is exactly how 0.0.67 and earlier shipped the glass effect on web.
- * Native bundles pick up `GlassFill.tsx` instead via Metro's platform
- * resolver; the web bundle picks up this file.
- */
-declare function GlassFill({ tint, intensity, overlayColor, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
-export default GlassFill;
-//# sourceMappingURL=GlassFill.web.d.ts.map

package/src/components/MediaCard/GlassFill.tsx

@@ -1,89 +0,0 @@
-import React from 'react'
-import { View, StyleSheet, Platform, type ViewStyle, type StyleProp } from 'react-native'
-import { BlurView } from '@react-native-community/blur'
-
-export type GlassTint = 'dark' | 'light'
-
-export interface GlassFillProps {
-    /**
-     * Visual tint of the glass surface. Maps to `BlurView`'s `blurType`
-     * (`'dark'` | `'light'`). The library also drives the appropriate
-     * `reducedTransparencyFallbackColor` from this so iOS gracefully degrades
-     * when "Reduce Transparency" is enabled in system accessibility settings.
-     */
-    tint?: GlassTint
-    /**
-     * Blur strength as a 0–100 "intensity" value (kept compatible with the
-     * previous `expo-blur` API so consumers don't need to relearn the scale).
-     * Internally mapped to `@react-native-community/blur`'s `blurAmount`,
-     * which is roughly 0–32 on iOS / Android.
-     */
-    intensity?: number
-    /**
-     * Token-derived color tint laid OVER the live blur (Figma `blur/minimal/background`).
-     * Painted as a translucent overlay so the glass keeps the design system
-     * color signature even when the platform blur quality varies.
-     */
-    overlayColor?: string
-    /** Container style overrides. Defaults to `StyleSheet.absoluteFill`. */
-    style?: StyleProp<ViewStyle>
-}
-
-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,
-}: GlassFillProps) {
-    const blurType: 'light' | 'dark' = 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 (
-        <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
-            <BlurView
-                style={StyleSheet.absoluteFill}
-                blurType={blurType}
-                blurAmount={blurAmount}
-                reducedTransparencyFallbackColor={fallbackColor}
-            />
-            {overlayColor != null ? (
-                <View style={[StyleSheet.absoluteFill, { backgroundColor: overlayColor }]} />
-            ) : null}
-            {Platform.OS === 'android' ? (
-                <View
-                    style={[
-                        StyleSheet.absoluteFill,
-                        {
-                            backgroundColor: 'rgba(255,255,255,0.03)',
-                            opacity: 0.6,
-                        },
-                    ]}
-                />
-            ) : null}
-        </View>
-    )
-}
-
-export default GlassFill

package/src/components/MediaCard/GlassFill.web.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native'
-
-export type GlassTint = 'dark' | 'light'
-
-export interface GlassFillProps {
-    tint?: GlassTint
-    intensity?: number
-    overlayColor?: string
-    style?: StyleProp<ViewStyle>
-}
-
-const DEFAULT_FALLBACK_DARK = '#1414174a'
-const DEFAULT_FALLBACK_LIGHT = '#ffffff66'
-
-/**
- * Web counterpart of `GlassFill`.
- *
- * `@react-native-community/blur` does not ship a web implementation, so for
- * the web bundle we render a translucent `View` with `backdrop-filter: blur()`
- * — which is exactly how 0.0.67 and earlier shipped the glass effect on web.
- * Native bundles pick up `GlassFill.tsx` instead via Metro's platform
- * resolver; the web bundle picks up this file.
- */
-function GlassFill({
-    tint = 'dark',
-    intensity = 50,
-    overlayColor,
-    style,
-}: GlassFillProps) {
-    // Approximate mapping: intensity 0-100 -> ~0-30px CSS blur. Keeps parity
-    // with the native blur strength so the component looks roughly the same
-    // across platforms.
-    const blurPx = Math.max(0, Math.min(30, Math.round(intensity * 0.3)))
-    const tintColor = overlayColor ?? (tint === 'light' ? DEFAULT_FALLBACK_LIGHT : DEFAULT_FALLBACK_DARK)
-
-    return (
-        <View
-            style={[
-                StyleSheet.absoluteFill,
-                { backgroundColor: tintColor },
-                // backdrop-filter is a web-only CSS property; 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"
-        />
-    )
-}
-
-export default GlassFill