jfs-components 0.0.69 → 0.0.71

package/src/components/CircularRating/CircularRating.tsx

@@ -0,0 +1,241 @@
+import React, { useMemo } from 'react'
+import {
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import Icon from '../../icons/Icon'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import CircularProgressBarDoted from '../CircularProgressBarDoted/CircularProgressBarDoted'
+import Nudge from '../Nudge/Nudge'
+
+type CircularRatingBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>
+
+export type CircularRatingProps = CircularRatingBaseProps & {
+  /** Rating value. Clamped by CircularProgressBarDoted between 0 and 100. */
+  value?: number
+  /** Number of dots rendered around the rating ring. */
+  dotCount?: number
+  /** Small label above the score. */
+  label?: string
+  /** Text below the score. */
+  tierLabel?: string
+  /** Footer timestamp/copy shown below the rating. */
+  footerText?: string
+  /** Show the footer info icon. */
+  showFooterIcon?: boolean
+  /** Show the bottom inline nudge. */
+  showNudge?: boolean
+  /** Body text for the default bottom nudge. */
+  nudgeBody?: string
+  /** Button label for the default bottom nudge. */
+  nudgeButtonLabel?: string
+  /** Called when the nudge button is pressed. */
+  onPressNudgeButton?: () => void
+  /** Called when the rating tier row is pressed. */
+  onTierPress?: () => void
+  /** Optional footer slot. Receives `modes` recursively. */
+  footerSlot?: React.ReactNode
+  /** Optional nudge slot. Receives `modes` recursively. */
+  nudgeSlot?: React.ReactNode
+  /** Design token modes forwarded to token lookups and child components. */
+  modes?: Record<string, any>
+  /** Optional container style overrides. */
+  style?: StyleProp<ViewStyle>
+  /** Optional rating ring wrapper style overrides. */
+  ratingStyle?: StyleProp<ViewStyle>
+  /** Optional footer row style overrides. */
+  footerStyle?: StyleProp<ViewStyle>
+  /** Optional footer text style overrides. */
+  footerTextStyle?: StyleProp<TextStyle>
+  /** Optional nudge style overrides. */
+  nudgeStyle?: StyleProp<ViewStyle>
+  /** Accessibility label for the whole component. */
+  accessibilityLabel?: string
+}
+
+interface CircularRatingTokens {
+  containerStyle: ViewStyle
+  ratingStyle: ViewStyle
+  footerStyle: ViewStyle
+  footerTextStyle: TextStyle
+  footerIconColor: string
+  footerIconSize: number
+}
+
+const toNumber = (value: unknown, fallback: number) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback
+  }
+
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    return Number.isFinite(parsed) ? parsed : fallback
+  }
+
+  return fallback
+}
+
+const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
+  if (typeof value === 'number') {
+    return String(value) as TextStyle['fontWeight']
+  }
+
+  if (typeof value === 'string') {
+    return value as TextStyle['fontWeight']
+  }
+
+  return fallback
+}
+
+function resolveCircularRatingTokens(modes: Record<string, any>): CircularRatingTokens {
+  const gap = toNumber(getVariableByName('circularRating/gap', modes), 32)
+  const padding = toNumber(getVariableByName('circularRating/padding', modes), 10)
+
+  const footerGap = toNumber(getVariableByName('circularRating/footer/gap', modes), 4)
+  const footerHeight = toNumber(getVariableByName('circularRating/footer/height', modes), 16)
+  const footerTextColor = getVariableByName('circularRating/footer/text/color', modes) || '#0d0d0f'
+  const footerTextFontSize = toNumber(getVariableByName('circularRating/footer/text/fontSize', modes), 12)
+  const footerTextFontFamily = getVariableByName('circularRating/footer/text/fontFamily', modes) || 'JioType Var'
+  const footerTextLineHeight = toNumber(getVariableByName('circularRating/footer/text/lineHeight', modes), 16)
+  const footerTextFontWeight = toFontWeight(
+    getVariableByName('circularRating/footer/text/fontWeight', modes),
+    '400'
+  )
+
+  return {
+    containerStyle: {
+      alignItems: 'flex-start',
+      gap,
+      justifyContent: 'center',
+      padding,
+    },
+    ratingStyle: {
+      height: 320,
+      width: 320,
+    },
+    footerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: footerGap,
+      height: footerHeight,
+      justifyContent: 'center',
+      width: '100%',
+    },
+    footerTextStyle: {
+      color: footerTextColor as string,
+      fontFamily: footerTextFontFamily as string,
+      fontSize: footerTextFontSize,
+      fontWeight: footerTextFontWeight,
+      lineHeight: footerTextLineHeight,
+      textAlign: 'center',
+    },
+    footerIconColor: (getVariableByName('circularRating/footer/icon/color', modes) || '#1a1c1f') as string,
+    footerIconSize: toNumber(getVariableByName('circularRating/footer/icon/size', modes), 16),
+  }
+}
+
+function CircularRating({
+  value = 72,
+  dotCount = 24,
+  label = 'Rating',
+  tierLabel = 'Doing great',
+  footerText = 'Updated on 1 March',
+  showFooterIcon = true,
+  showNudge = true,
+  nudgeBody = 'Split this transaction into installments',
+  nudgeButtonLabel = 'Button',
+  onPressNudgeButton,
+  onTierPress,
+  footerSlot,
+  nudgeSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ratingStyle,
+  footerStyle,
+  footerTextStyle,
+  nudgeStyle,
+  accessibilityLabel,
+  ...rest
+}: CircularRatingProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () => (globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+      ? EMPTY_MODES
+      : { ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
+  const tokens = useMemo(() => resolveCircularRatingTokens(modes), [modes])
+
+  const processedFooterSlot = useMemo(() => {
+    if (!footerSlot) return null
+    const processed = cloneChildrenWithModes(React.Children.toArray(footerSlot), modes)
+    return processed.length === 1 ? processed[0] : processed
+  }, [footerSlot, modes])
+
+  const processedNudgeSlot = useMemo(() => {
+    if (!nudgeSlot) return null
+    const processed = cloneChildrenWithModes(React.Children.toArray(nudgeSlot), modes)
+    return processed.length === 1 ? processed[0] : processed
+  }, [nudgeSlot, modes])
+
+  const defaultAccessibilityLabel =
+    accessibilityLabel ?? `${label}. ${Math.round(value)} out of 100. ${tierLabel}. ${footerText}`
+
+  return (
+    <View
+      accessibilityLabel={defaultAccessibilityLabel}
+      style={[tokens.containerStyle, style]}
+      {...rest}
+    >
+      <View style={[tokens.ratingStyle, ratingStyle]}>
+        <CircularProgressBarDoted
+          value={value}
+          dotCount={dotCount}
+          label={label}
+          tierLabel={tierLabel}
+          onTierPress={onTierPress}
+          modes={modes}
+        />
+      </View>
+
+      <View style={[tokens.footerStyle, footerStyle]}>
+        {processedFooterSlot || (
+          <>
+            <Text numberOfLines={1} style={[tokens.footerTextStyle, footerTextStyle]}>
+              {footerText}
+            </Text>
+            {showFooterIcon ? (
+              <Icon
+                name="ic_info"
+                size={tokens.footerIconSize}
+                color={tokens.footerIconColor}
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no"
+              />
+            ) : null}
+          </>
+        )}
+      </View>
+
+      {showNudge ? (
+        processedNudgeSlot || (
+          <Nudge
+            type="inline-compact"
+            body={nudgeBody}
+            buttonLabel={nudgeButtonLabel}
+            onPressButton={onPressNudgeButton}
+            modes={modes}
+            style={[{ width: 312 }, nudgeStyle]}
+          />
+        )
+      ) : null}
+    </View>
+  )
+}
+
+export default React.memo(CircularRating)

package/src/components/Gauge/Gauge.tsx

@@ -0,0 +1,303 @@
+import React from 'react'
+import { StyleSheet, View, Text, type StyleProp, type TextStyle, type ViewStyle } from 'react-native'
+import Svg, { Path } from 'react-native-svg'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import SupportText, { type SupportTextProps } from '../SupportText/SupportText'
+
+type GaugeBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>
+
+export type GaugeProps = GaugeBaseProps & {
+  /** Current gauge value. Interpreted against `min` and `max`. */
+  value?: number
+  /** Lower bound used to normalize progress. */
+  min?: number
+  /** Upper bound used to normalize progress. */
+  max?: number
+  /** Optional formatted value shown in the default readout. */
+  valueLabel?: string
+  /** Heading above the arc. */
+  title?: string
+  /** Caption below the arc. */
+  caption?: string
+  /** Support text shown in the default readout. */
+  supportText?: string
+  /** Status passed to the default SupportText component. */
+  supportTextStatus?: SupportTextProps['status']
+  /** Hides the heading while keeping the rest of the layout intact. */
+  showTitle?: boolean
+  /** Hides the caption while keeping the rest of the layout intact. */
+  showCaption?: boolean
+  /** Hides default support text when no custom readout slot is provided. */
+  showSupportText?: boolean
+  /** Design token modes forwarded to token lookups and slot children. */
+  modes?: Record<string, any>
+  /** Slot rendered in the center of the gauge arc. Receives `modes` recursively. */
+  children?: React.ReactNode
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>
+  /** Arc wrapper style override. */
+  arcStyle?: StyleProp<ViewStyle>
+  /** Readout container style override. */
+  readoutStyle?: StyleProp<ViewStyle>
+  /** Title text style override. */
+  titleStyle?: StyleProp<TextStyle>
+  /** Value text style override. */
+  valueStyle?: StyleProp<TextStyle>
+  /** Caption text style override. */
+  captionStyle?: StyleProp<TextStyle>
+  /** Track stroke style override. */
+  trackStyle?: StyleProp<ViewStyle>
+  /** Progress stroke style override. */
+  progressStyle?: StyleProp<ViewStyle>
+  /** Accessibility label for the whole gauge. */
+  accessibilityLabel?: string
+}
+
+const clamp = (value: number, min: number, max: number) => {
+  if (max <= min) {
+    return 0
+  }
+
+  return Math.min(1, Math.max(0, (value - min) / (max - min)))
+}
+
+const toNumber = (value: unknown, fallback: number) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback
+  }
+
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    return Number.isFinite(parsed) ? parsed : fallback
+  }
+
+  return fallback
+}
+
+const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
+  if (typeof value === 'number') {
+    return String(value) as TextStyle['fontWeight']
+  }
+
+  if (typeof value === 'string') {
+    return value as TextStyle['fontWeight']
+  }
+
+  return fallback
+}
+
+const getStrokeColor = (style: StyleProp<ViewStyle>, fallback: string) => {
+  const flattened = StyleSheet.flatten(style)
+  return typeof flattened.backgroundColor === 'string'
+    ? flattened.backgroundColor
+    : fallback
+}
+
+function Gauge({
+  value = 84,
+  min = 0,
+  max = 100,
+  valueLabel,
+  title = 'Your score is based on strong data',
+  caption = 'Add more details for even better accuracy',
+  supportText = 'Support Text',
+  supportTextStatus = 'Success',
+  showTitle = true,
+  showCaption = true,
+  showSupportText = true,
+  modes: propModes = EMPTY_MODES,
+  children,
+  style,
+  arcStyle,
+  readoutStyle,
+  titleStyle,
+  valueStyle,
+  captionStyle,
+  trackStyle,
+  progressStyle,
+  accessibilityLabel,
+  ...rest
+}: GaugeProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
+  const supportTextModes = { ...modes, Status: supportTextStatus }
+
+  const gap = toNumber(getVariableByName('gauge/gap', modes), 30)
+  const padding = toNumber(getVariableByName('gauge/padding', modes), 16)
+  const width = toNumber(getVariableByName('gauge/width', modes), 299)
+  const arcWidth = toNumber(getVariableByName('gauge/arc/width', modes), 267)
+  const arcHeight = arcWidth * (186 / 328)
+
+  const trackSize = toNumber(getVariableByName('gauge/track/size', modes), 244)
+  const trackInnerRadius = toNumber(getVariableByName('gauge/track/radius', modes), 99)
+  const progressInnerRadius = toNumber(getVariableByName('gauge/progress/radius', modes), 99)
+  const innerRadius = Math.min(trackInnerRadius, progressInnerRadius)
+  const strokeWidth = Math.max(1, trackSize / 2 - innerRadius)
+  const radius = innerRadius + strokeWidth / 2
+  const centerX = arcWidth / 2
+  const centerY = Math.min(arcHeight - strokeWidth / 2, radius + strokeWidth / 2)
+  const startX = centerX - radius
+  const endX = centerX + radius
+  const arcPath = `M ${startX} ${centerY} A ${radius} ${radius} 0 0 1 ${endX} ${centerY}`
+  const arcLength = Math.PI * radius
+  const progress = clamp(value, min, max)
+
+  const titleColor = getVariableByName('gauge/title/color', modes) || '#0c0d10'
+  const titleFontSize = toNumber(getVariableByName('gauge/title/fontSize', modes), 23)
+  const titleLineHeight = toNumber(getVariableByName('gauge/title/lineHeight', modes), 23)
+  const titleFontFamily = getVariableByName('gauge/title/fontFamily', modes) || 'JioType Var'
+  const titleFontWeight = toFontWeight(getVariableByName('gauge/title/fontWeight', modes), '900')
+  const titleHeight = toNumber(getVariableByName('gauge/title/height', modes), 46)
+
+  const readoutGap = toNumber(getVariableByName('gauge/readout/gap', modes), 8)
+  const readoutPadding = toNumber(getVariableByName('gauge/readout/padding', modes), 8)
+  const valueColor = getVariableByName('gauge/readout/value/color', modes) || '#0c0d10'
+  const valueFontSize = toNumber(getVariableByName('gauge/readout/value/fontSize', modes), 36)
+  const valueLineHeight = toNumber(getVariableByName('gauge/readout/value/lineHeight', modes), 36)
+  const valueFontFamily = getVariableByName('gauge/readout/value/fontFamily', modes) || 'JioType Var'
+  const valueFontWeight = toFontWeight(getVariableByName('gauge/readout/value/fontWeight', modes), '800')
+
+  const captionColor = getVariableByName('gauge/caption/color', modes) || '#0c0d10'
+  const captionFontSize = toNumber(getVariableByName('gauge/caption/fontSize', modes), 14)
+  const captionLineHeight = toNumber(getVariableByName('gauge/caption/lineHeight', modes), 18)
+  const captionFontFamily = getVariableByName('gauge/caption/fontFamily', modes) || 'JioType Var'
+  const captionFontWeight = toFontWeight(getVariableByName('gauge/caption/fontWeight', modes), '500')
+
+  const trackColor = getStrokeColor(
+    trackStyle,
+    getVariableByName('gauge/track/color', modes) || '#f5f5f6'
+  )
+  const progressColor = getStrokeColor(
+    progressStyle,
+    getVariableByName('gauge/progress/color', modes) || '#25ab21'
+  )
+
+  const containerStyle: ViewStyle = {
+    alignItems: 'center',
+    gap,
+    padding,
+    width,
+  }
+
+  const computedTitleStyle: TextStyle = {
+    color: titleColor as string,
+    fontFamily: titleFontFamily as string,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleLineHeight,
+    minHeight: titleHeight,
+    textAlign: 'center',
+    width: '100%',
+  }
+
+  const computedArcStyle: ViewStyle = {
+    height: arcHeight,
+    overflow: 'hidden',
+    position: 'relative',
+    width: '100%',
+  }
+
+  const computedReadoutStyle: ViewStyle = {
+    alignItems: 'center',
+    gap: readoutGap,
+    left: 0,
+    padding: readoutPadding,
+    position: 'absolute',
+    right: 0,
+    top: arcHeight * 0.42,
+  }
+
+  const computedValueStyle: TextStyle = {
+    color: valueColor as string,
+    fontFamily: valueFontFamily as string,
+    fontSize: valueFontSize,
+    fontWeight: valueFontWeight,
+    lineHeight: valueLineHeight,
+    textAlign: 'center',
+  }
+
+  const computedCaptionStyle: TextStyle = {
+    color: captionColor as string,
+    fontFamily: captionFontFamily as string,
+    fontSize: captionFontSize,
+    fontWeight: captionFontWeight,
+    lineHeight: captionLineHeight,
+    textAlign: 'center',
+    width: '100%',
+  }
+
+  const defaultValueLabel = valueLabel ?? String(Math.round(value))
+  const defaultAccessibilityLabel =
+    accessibilityLabel ??
+    `${title}. ${defaultValueLabel} out of ${max}. ${supportText}. ${caption}`
+
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityValue={{ min, max, now: value }}
+      style={[containerStyle, style]}
+      {...rest}
+    >
+      {showTitle ? (
+        <Text style={[computedTitleStyle, titleStyle]}>
+          {title}
+        </Text>
+      ) : null}
+
+      <View style={[computedArcStyle, arcStyle]}>
+        <Svg
+          width="100%"
+          height={arcHeight}
+          viewBox={`0 0 ${arcWidth} ${arcHeight}`}
+        >
+          <Path
+            d={arcPath}
+            stroke={trackColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="butt"
+            fill="none"
+          />
+          <Path
+            d={arcPath}
+            stroke={progressColor}
+            strokeWidth={strokeWidth}
+            strokeLinecap="butt"
+            fill="none"
+            strokeDasharray={`${arcLength} ${arcLength}`}
+            strokeDashoffset={arcLength * (1 - progress)}
+          />
+        </Svg>
+
+        <View style={[computedReadoutStyle, readoutStyle]}>
+          {children ? (
+            cloneChildrenWithModes(children, modes)
+          ) : (
+            <>
+              <Text style={[computedValueStyle, valueStyle]}>
+                {defaultValueLabel}
+              </Text>
+              {showSupportText ? (
+                <SupportText
+                  label={supportText}
+                  status={supportTextStatus}
+                  modes={supportTextModes}
+                />
+              ) : null}
+            </>
+          )}
+        </View>
+      </View>
+
+      {showCaption ? (
+        <Text style={[computedCaptionStyle, captionStyle]}>
+          {caption}
+        </Text>
+      ) : null}
+    </View>
+  )
+}
+
+export default Gauge

package/src/components/ListGroup/ListGroup.tsx

@@ -55,7 +55,9 @@ function ListGroup({
 }: ListGroupProps) {
   // Resolve container tokens
   const backgroundColor = getVariableByName('listGroup/background', modes) || 'rgba(255,255,255,0)'
-  const borderColor = getVariableByName('listGroup/border/color', modes) || 'rgba(255,255,255,0)'
+  // The current exported token aliases a missing Figma variable. Keep the
+  // transparent fallback without logging the missing alias on every render.
+  const borderColor = 'rgba(255,255,255,0)'
   const borderWidth = getVariableByName('listGroup/borderWidth', modes) || 0
   const gap = getVariableByName('listGroup/gap', modes) || 12
 

package/src/components/MediaCard/GlassFill.tsx

@@ -0,0 +1,89 @@
+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

@@ -0,0 +1,53 @@
+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