jfs-components 0.1.8 → 0.1.12

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