jfs-components 0.1.2 → 0.1.12

package/src/design-tokens/figma-modes.generated.ts

@@ -39,11 +39,12 @@ export const FIGMA_MODES = {
   "Attached / Output": ["Default"],
   "Avatar / Output": ["Default"],
   "Avatar Group / Output": ["Default"],
-  "Avatar Size": ["L", "M", "S"],
+  "Avatar Size": ["L", "M", "S", "XS"],
   "Avatar Type": ["Avatar", "Icon", "Text"],
   "Axis / Output": ["Default"],
   "Background": ["False", "True"],
   "Badge / Output": ["Default"],
+  "Badge Size": ["Medium", "Small"],
   "Balance / Output": ["Default"],
   "BankAccountCard / Output": ["Default"],
   "Benefit Card": ["Default"],
@@ -69,6 +70,7 @@ export const FIGMA_MODES = {
   "cardsShared": ["Default"],
   "Carousel / Output": ["Default"],
   "CarouselCardAccounts / Output": ["Default"],
+  "ccCard / Output": ["Default"],
   "checkbox / Output": ["Default"],
   "Checkbox / Output": ["Default"],
   "Checkbox states": ["Idle", "Hover", "Focus", "Focus Selected", "Selected Hover", "Disabled/Active", "Disabled", "Selected"],
@@ -84,7 +86,12 @@ export const FIGMA_MODES = {
   "circularProgressBar / Output": ["Default"],
   "circularProgressBar Size": ["S", "M"],
   "clusterBubble / Output": ["Default"],
+  "coincard": ["Mode 1"],
   "Color Mode": ["Light", "Dark"],
+  "comparetablecell": ["Mode 1"],
+  "comparetableheader": ["Mode 1"],
+  "Comparison Floating card": ["Default"],
+  "ComparisonCardItem": ["Default"],
   "Confidence": ["High", "Medium", "Low", "None"],
   "ContentSheet / Output": ["Default"],
   "Context": ["Default", "Nudge&Alert", "CTACard", "ListItem"],
@@ -95,6 +102,7 @@ export const FIGMA_MODES = {
   "context7": ["Default", "Card"],
   "Contrast Context": ["on dark", "on light"],
   "Conversation Feed / Output": ["Default"],
+  "Counter Badge / Output": ["Mode 1"],
   "Coverage Bar Comparison / Output": ["Default"],
   "CoverageRing / Output": ["Mode 1"],
   "CTACard / Output": ["Default"],
@@ -123,6 +131,7 @@ export const FIGMA_MODES = {
   "FullScreenModal": ["Default"],
   "Gap": ["S", "M", "L", "None"],
   "Gauge / Output": ["Default"],
+  "Handle Boolean": ["False", "True"],
   "Heading / Output": ["Default"],
   "Heading text": ["Default", "Slot"],
   "Holdings card / Output": ["Default"],
@@ -130,7 +139,7 @@ export const FIGMA_MODES = {
   "Icon / Output": ["Default"],
   "Icon Button / Output": ["Default"],
   "Icon Capsule / Output": ["Default"],
-  "Icon Capsule Size": ["M", "L", "S"],
+  "Icon Capsule Size": ["M", "L", "S", "XS"],
   "Image / Output": ["Default"],
   "Input / Output": ["Default"],
   "Input/PINSlot  States": ["Idle", "Active", "Error"],
@@ -155,6 +164,7 @@ export const FIGMA_MODES = {
   "Message Direction": ["Incoming (Left)", "Outgoing (Right)"],
   "Message Row / Output": ["Default"],
   "MessageField / Output": ["Default"],
+  "metricdata": ["Mode 1"],
   "MetricLegendItem / Output": ["Default"],
   "Money Value / Output": ["Default"],
   "MonthlyStatusGrid / Output": ["Default"],
@@ -172,15 +182,18 @@ export const FIGMA_MODES = {
   "Page type": ["MainPage", "SubPage", "JioPlus"],
   "PageHero / Output": ["Default"],
   "PaymnetFeedback / Output": ["Default"],
+  "PDP cc card": ["Mode 1"],
   "peekOffset": ["Medium", "Small", "Large", "None"],
   "Placement": ["Prefix", "Suffix"],
   "PlanComparisonCard / Output": ["Default"],
   "Popup / Output": ["Default"],
   "PortfolioHero / Output": ["Default"],
   "PoweredByLabel": ["Default"],
+  "Product Merchandising card": ["Mode 1"],
   "ProductLabel / Output": ["Default"],
   "ProductOverview / Output": ["Default"],
   "ProgressBadge / Output": ["Default"],
+  "ProjectionMarker": ["Mode 1"],
   "QR code / Output": ["Idle"],
   "Radio / Output": ["Default"],
   "Radius": ["S", "M", "L", "None"],
@@ -198,8 +211,10 @@ export const FIGMA_MODES = {
   "SegmentedControl/Segment / Output": ["Default"],
   "SegmentedTrack / Output": ["Default"],
   "Selectable": ["False", "True"],
+  "selectioncard": ["Mode 1"],
   "Semantic Intent": ["Brand", "System"],
   "Skeleton": ["Mode 1"],
+  "Slider / Output": ["Default"],
   "Slot gap": ["S", "M", "L", "XL"],
   "special button": ["Default"],
   "Spinner / Output": ["Default"],
@@ -220,14 +235,19 @@ export const FIGMA_MODES = {
   "SwappableAmount / Output": ["Default"],
   "tabItem / Output": ["Default"],
   "Tabs / Output": ["Default"],
+  "TestimonialsCard": ["Default"],
   "Text / Output": ["Default"],
+  "Text Appearance": ["Neutral", "Primary", "Secondary", "Tertiary"],
+  "Text Sizes": ["Medium", "Small"],
   "textInput / Output": ["Default"],
+  "TextSegment / Output": ["Default"],
   "Thread Hero / Output": ["Default"],
   "Title / Output": ["Default"],
   "Title Level": ["Default", "Bold"],
   "Toggle / Output": ["Default"],
   "Toggle States": ["Off", "On", "Disabled Off", "Disabled On"],
   "ToggleIconButton / Output": ["Default"],
+  "Tooltip": ["True", "False"],
   "tooltip / Output": ["Default"],
   "Tost Output": ["Default"],
   "Transaction Status": ["Request", "Paid", "Declined", "Expired"],
@@ -258,29 +278,33 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "Attached": ["Color Mode"],
   "Avatar": ["Avatar Size", "Color Mode", "Context4"],
   "AvatarGroup": ["Avatar Size", "Context4"],
-  "Badge": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Emphasis", "Semantic Intent"],
+  "Badge": ["AppearanceBrand", "Badge Size", "Color Mode", "Emphasis"],
   "Balance": ["Color Mode", "Context3"],
+  "BenefitCard": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Context2", "context5", "Emphasis", "List Item Style", "NavArrow Direction", "Page type", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
   "BottomNav": ["Color Mode"],
   "BottomNavItem": ["BottomNavItem / State", "Color Mode"],
   "BrandChip": ["Avatar Size", "Color Mode", "Context4"],
-  "BubbleChart": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
+  "BubbleChart": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz", "Text Appearance"],
   "Button": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Semantic Intent"],
   "Card": ["Color Mode", "Gap", "Page type"],
   "CardAdvisory": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "circularProgressBar Size", "Color Mode", "Context", "Emphasis", "Nudge padding", "Semantic Intent", "Slot gap"],
-  "CardBankAccount": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Button / Size", "Button / State", "Color Mode", "Context", "Context4", "context5", "Emphasis", "List Item Style", "Semantic Intent", "Weight"],
-  "CardCTA": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "MediaBlock", "Semantic Intent"],
+  "CardBankAccount": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "Context4", "context5", "Emphasis", "List Item Style", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
+  "CardCTA": ["AppearanceBrand", "AppearanceSystem", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "MediaBlock", "Semantic Intent"],
   "CardFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode"],
   "CardFinancialCondition": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "circularProgressBar Size", "Color Mode", "Context", "Emphasis", "Nudge padding", "Semantic Intent", "Slot gap"],
-  "CardInsight": ["Appearance / DataViz", "AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context7", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Nudge padding", "Page type", "Semantic Intent", "Slot gap"],
+  "CardInsight": ["Appearance / DataViz", "AppearanceBrand", "AppearanceSystem", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context7", "Emphasis", "Emphasis / DataViz", "LinearProgress Size", "Nudge padding", "Page type", "Semantic Intent", "Slot gap"],
   "CardProviderInfo": ["AppearanceBrand", "Avatar Size", "Color Mode", "Context4"],
   "Carousel": ["peekOffset"],
+  "CcCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "Context2", "Context4", "context5", "context7", "Emphasis", "List Item Style", "NavArrow Direction", "Page type", "Radius", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
   "Checkbox": ["Color Mode"],
   "CheckboxGroup": ["Color Mode"],
   "CheckboxItem": ["Color Mode"],
   "ChipSelect": ["ChipSelect State", "Color Mode"],
   "CircularProgressBar": ["AppearanceBrand", "AppearanceSystem", "circularProgressBar Size", "Color Mode", "Emphasis", "Semantic Intent"],
   "CircularRating": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Nudge padding", "Semantic Intent", "Slot gap"],
-  "ClusterBubble": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
+  "ClusterBubble": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz", "Text Appearance"],
+  "CompareTable": ["Accordion States", "AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis", "Radius"],
+  "ComparisonBar": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Radius", "Semantic Intent"],
   "CoverageBarComparison": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
   "CoverageRing": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "circularProgressBar Size", "Color Mode", "Context", "Emphasis", "Semantic Intent"],
   "DebitCard": ["DebitCard brand"],
@@ -321,11 +345,14 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "OTP": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "FormField States", "Input/PINSlot  States", "Semantic Intent", "Status"],
   "PageHero": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Media / Output", "Semantic Intent"],
   "PaymentFeedback": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Emphasis", "Icon Capsule Size", "Semantic Intent"],
+  "PdpCcCard": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context7", "Emphasis", "Page type", "Radius", "Semantic Intent"],
   "PlanComparisonCard": ["Color Mode"],
   "Popup": ["Color Mode", "Context", "Padding", "Page type", "Slot gap"],
   "PortfolioHero": ["Avatar Size", "Color Mode", "Context3", "Context4"],
   "ProductLabel": ["Avatar Size", "Color Mode", "Context4"],
+  "ProductMerchandisingCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "Context4", "Emphasis", "Semantic Intent"],
   "ProductOverview": ["Avatar Size", "Color Mode", "Context4"],
+  "ProjectionMarker": ["Color Mode"],
   "Radio": ["Color Mode"],
   "RangeTrack": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
   "RechargeCard": ["Avatar Size", "Color Mode", "Context3", "Context4"],
@@ -334,7 +361,9 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "Section": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Context2", "context5", "Emphasis", "Icon Capsule Size", "List Item Style", "NavArrow Direction", "Padding", "Page type", "Semantic Intent", "Slot gap"],
   "SegmentedControl": ["SegmentedControl/Segment"],
   "SegmentedTrack": ["Appearance / DataViz", "Color Mode", "Emphasis / DataViz"],
+  "Slider": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Emphasis", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
   "Slot": ["Context", "Slot gap"],
+  "Stack": ["Context", "Slot gap"],
   "StatGroup": ["Color Mode", "StatItem Label Position "],
   "StatItem": ["StatItem Label Position "],
   "StatusHero": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "Context", "Context3", "Emphasis", "Icon Capsule Size", "Semantic Intent"],
@@ -347,8 +376,9 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "SwappableAmount": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "Emphasis", "Semantic Intent"],
   "TabItem": ["Color Mode"],
   "TestimonialsCard": ["Avatar Size", "Color Mode", "Context4"],
-  "Text": ["Weight"],
+  "Text": ["Color Mode", "Text Appearance", "Text Sizes", "Weight"],
   "TextInput": ["Color Mode", "InputState"],
+  "TextSegment": ["Color Mode", "Text Appearance", "Text Sizes", "Weight"],
   "Title": ["Color Mode", "context7", "Page type"],
   "Toggle": ["Color Mode", "Toggle States"],
   "Tooltip": ["Color Mode"],

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-06-10T14:28:21.260Z
+ * Generated: 2026-06-22T15:37:25.988Z
  */
 
 // Icon name to SVG data mapping

package/src/utils/GlassFill/GlassFill.tsx

@@ -0,0 +1,305 @@
+import React, { useId } from 'react'
+import { View, StyleSheet, Platform, UIManager, type ViewStyle, type StyleProp } from 'react-native'
+import { BlurView } from '@react-native-community/blur'
+import MaskedView from '@react-native-masked-view/masked-view'
+import Svg, { Defs, LinearGradient, Stop, Rect } from 'react-native-svg'
+
+export type GlassTint = 'dark' | 'light'
+
+export interface GlassFillProps {
+    /**
+     * Visual tint of the glass surface. Maps to `BlurView`'s `blurType`
+     * (`'dark'` | `'light'`) and drives the iOS
+     * `reducedTransparencyFallbackColor` so the surface degrades gracefully
+     * when "Reduce Transparency" is enabled in system accessibility settings.
+     */
+    tint?: GlassTint
+    /**
+     * Blur strength as a 0–100 "intensity" value. Internally mapped to
+     * `@react-native-community/blur`'s `blurAmount`. When `progressive` is set,
+     * this is the strength at the BOTTOM of the ramp (the strongest point); the
+     * ramp is kept intentionally gentle so the surface reads as subtle glass
+     * rather than a heavy frosted block.
+     */
+    intensity?: number
+    /**
+     * Token-derived color tint laid OVER the live blur. Painted as a
+     * translucent overlay so the glass keeps its color signature even when the
+     * platform blur quality varies (or realtime blur is unavailable).
+     */
+    overlayColor?: string
+    /**
+     * Render a *progressive* (variable) blur instead of a uniform one: fully
+     * clear at the top, easing into a soft blur toward the bottom. Implemented
+     * by stacking two `MaskedView` + `BlurView` layers (a faint base + a
+     * slightly stronger accent near the bottom), each revealed via an eased
+     * multi-stop SVG gradient mask so the blur swells smoothly rather than
+     * 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>
+}
+
+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 = 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.
+ */
+interface MaskStop {
+    offset: number
+    opacity: number
+}
+
+/**
+ * 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.
+ */
+interface ProgressiveLayer {
+    stops: MaskStop[]
+    amount: number
+}
+
+// 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: MaskStop[] = [
+    { 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: ProgressiveLayer[] = [
+    { 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: boolean = (() => {
+    try {
+        const um = UIManager as unknown as {
+            hasViewManagerConfig?: (name: string) => boolean
+            getViewManagerConfig?: (name: string) => unknown
+        }
+        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 }: { id: string; stops: MaskStop[] }) {
+    return (
+        <Svg width="100%" height="100%">
+            <Defs>
+                <LinearGradient id={id} x1="0" y1="0" x2="0" y2="1">
+                    {stops.map((s, i) => (
+                        <Stop key={i} offset={s.offset} stopColor="#000000" stopOpacity={s.opacity} />
+                    ))}
+                </LinearGradient>
+            </Defs>
+            <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${id})`} />
+        </Svg>
+    )
+}
+
+/**
+ * Shared glass / frosted surface for native (iOS + Android).
+ *
+ * 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
+ *     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.
+ *
+ * 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()
+    const maskId = `glass-mask-${rawId.replace(/[^a-zA-Z0-9_-]/g, '')}`
+
+    const blurType: 'light' | 'dark' = 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 (
+                <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
+                    <MaskedView
+                        style={StyleSheet.absoluteFill}
+                        maskElement={<GradientMask id={`${maskId}-fb`} stops={BASE_MASK_STOPS} />}
+                    >
+                        <View style={[StyleSheet.absoluteFill, { backgroundColor: fallbackColor }]} />
+                    </MaskedView>
+                </View>
+            )
+        }
+
+        return (
+            <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
+                {PROGRESSIVE_LAYERS.map((layer, i) => {
+                    const amount = Math.max(1, Math.round(peakBlur * layer.amount))
+                    return (
+                        <MaskedView
+                            key={i}
+                            style={StyleSheet.absoluteFill}
+                            maskElement={<GradientMask id={`${maskId}-${i}`} stops={layer.stops} />}
+                        >
+                            <BlurView
+                                style={StyleSheet.absoluteFill}
+                                blurType={blurType}
+                                blurAmount={amount}
+                                reducedTransparencyFallbackColor={fallbackColor}
+                            />
+                        </MaskedView>
+                    )
+                })}
+            </View>
+        )
+    }
+
+    // ----- 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 (
+            <View
+                style={[StyleSheet.absoluteFill, { backgroundColor: fallbackColor }, style]}
+                pointerEvents="none"
+            />
+        )
+    }
+
+    return (
+        <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
+            <BlurView
+                style={StyleSheet.absoluteFill}
+                blurType={blurType}
+                blurAmount={uniformBlurAmount}
+                reducedTransparencyFallbackColor={fallbackColor}
+            />
+            {overlayColor != null ? (
+                <View style={[StyleSheet.absoluteFill, { backgroundColor: overlayColor }]} />
+            ) : null}
+            {Platform.OS === 'android' && androidTintWash ? (
+                <View
+                    style={[
+                        StyleSheet.absoluteFill,
+                        {
+                            backgroundColor: 'rgba(255,255,255,0.03)',
+                            opacity: 0.6,
+                        },
+                    ]}
+                />
+            ) : null}
+        </View>
+    )
+}
+
+export default GlassFill

package/src/utils/GlassFill/GlassFill.web.tsx

@@ -0,0 +1,148 @@
+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
+    /**
+     * Render a *progressive* (variable) blur: fully clear at the top, easing
+     * into a soft blur toward the bottom. On web this mirrors the native
+     * technique — two `backdrop-filter` layers, each clipped with an eased
+     * multi-stop `mask-image` linear-gradient so the effective blur swells
+     * 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
+// base + bottom accent) keep the surface subtle and glass-like rather than a
+// heavy frosted block.
+interface WebLayer {
+    amount: number
+    stops: { offset: number; opacity: number }[]
+}
+
+const PROGRESSIVE_LAYERS: WebLayer[] = [
+    {
+        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: WebLayer['stops']): string {
+    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 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
+ * 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,
+    webBlurScale = DEFAULT_WEB_BLUR_SCALE,
+    webBlurMaxPx = DEFAULT_WEB_BLUR_MAX_PX,
+    style,
+}: GlassFillProps) {
+    // 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(webBlurMaxPx, Math.round(intensity * webBlurScale)))
+        return (
+            <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
+                {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,
+                    } as unknown as ViewStyle
+                    return (
+                        <View
+                            key={i}
+                            style={[StyleSheet.absoluteFill, webStyle]}
+                            pointerEvents="none"
+                        />
+                    )
+                })}
+            </View>
+        )
+    }
+
+    return (
+        <View
+            style={[
+                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"
+        />
+    )
+}
+
+export default GlassFill