jfs-components 0.1.12 → 0.1.18

package/src/utils/GlassFill/GlassFill.tsx

@@ -1,7 +1,6 @@
 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'
@@ -31,10 +30,17 @@ export interface GlassFillProps {
     /**
      * 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.
+     * mask-free by stacking several bottom-anchored `BlurView` "bands": each
+     * band is clipped to start a little lower than the last, and because a
+     * `BlurView` blurs whatever is rendered behind it, the bands COMPOUND toward
+     * the bottom (a lower band re-blurs the already-blurred output above it) so
+     * the effective radius swells smoothly downward. This deliberately avoids
+     * masking a native view — the old implementation wrapped each `BlurView` in
+     * `@react-native-masked-view/masked-view`, a legacy Paper component that
+     * resolves to a plain object (crashing "Element type is invalid") under the
+     * New Architecture interop. Works on iOS and Android with no extra native
+     * module. When the native blur isn't linked at all, falls back to a pure
+     * `react-native-svg` gradient scrim (see below).
      */
     progressive?: boolean
     /**
@@ -70,14 +76,13 @@ const DEFAULT_FALLBACK_LIGHT = '#ffffff66'
 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).
+ * Alpha stop on the no-native-blur fallback gradient. `offset` is the vertical
+ * position (0 = top of the surface, 1 = bottom); `opacity` is the tint alpha
+ * there (0 = fully clear, 1 = full fallback color).
  *
- * 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.
+ * Using several stops (rather than a single linear 0 → 1 ramp) eases the tint
+ * in, so it swells smoothly toward the bottom instead of along a hard seam —
+ * the soft S-curve that gives the surface its "glass" feel.
  */
 interface MaskStop {
     offset: number
@@ -85,25 +90,24 @@ interface MaskStop {
 }
 
 /**
- * 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`.
+ * A single bottom-anchored band of the progressive blur stack.
+ *  - `start` is where the band begins, as a fraction from the top (0 = covers
+ *    the whole surface, 0.8 = only the bottom 20%). Each band runs from `start`
+ *    to the bottom.
+ *  - `amount` is the band's own blur strength as a share (0–1) of the peak.
  *
- * 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.
+ * Because each `BlurView` re-blurs everything rendered behind it, the bands
+ * COMPOUND where they overlap (toward the bottom), so the effective radius grows
+ * downward without any masking. The top region is covered only by the first,
+ * faint band; the bottom is covered by all of them.
  */
-interface ProgressiveLayer {
-    stops: MaskStop[]
+interface ProgressiveBand {
+    start: number
     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.
+// Eased tint ramp for the no-native-blur fallback scrim. A faint trace begins
+// near the very top and grows steadily downward.
 const BASE_MASK_STOPS: MaskStop[] = [
     { offset: 0.0, opacity: 0 },
     { offset: 0.08, opacity: 0.12 },
@@ -112,18 +116,16 @@ const BASE_MASK_STOPS: MaskStop[] = [
     { 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 },
-        ],
-    },
+// Bottom-anchored blur bands (top → bottom). The first band is faint and covers
+// the whole surface so the top reads as barely-there glass; each subsequent band
+// starts lower and adds strength, compounding toward the bottom for a smooth
+// variable-radius result. Quadrature of these shares lands the bottom at ~peak.
+const PROGRESSIVE_BANDS: ProgressiveBand[] = [
+    { start: 0.0, amount: 0.18 },
+    { start: 0.3, amount: 0.28 },
+    { start: 0.52, amount: 0.38 },
+    { start: 0.7, amount: 0.5 },
+    { start: 0.84, amount: 0.6 },
 ]
 
 /**
@@ -159,18 +161,18 @@ const NATIVE_BLUR_SUPPORTED: boolean = (() => {
 })()
 
 /**
- * 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.
+ * Vertical color-gradient scrim drawn with `react-native-svg` — used as the
+ * no-native-blur fallback. Paints `color` at the eased per-stop alpha so the
+ * tint swells smoothly from clear (top) to full (bottom), exactly mirroring the
+ * old `MaskedView`-over-solid-color fallback but with no native-view masking.
  */
-function GradientMask({ id, stops }: { id: string; stops: MaskStop[] }) {
+function GradientScrim({ id, color, stops }: { id: string; color: 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} />
+                        <Stop key={i} offset={s.offset} stopColor={color} stopOpacity={s.opacity} />
                     ))}
                 </LinearGradient>
             </Defs>
@@ -230,25 +232,26 @@ function GlassFill({
         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>
+                    <GradientScrim id={`${maskId}-fb`} color={fallbackColor} stops={BASE_MASK_STOPS} />
                 </View>
             )
         }
 
         return (
             <View style={[StyleSheet.absoluteFill, style]} pointerEvents="none">
-                {PROGRESSIVE_LAYERS.map((layer, i) => {
-                    const amount = Math.max(1, Math.round(peakBlur * layer.amount))
+                {PROGRESSIVE_BANDS.map((band, i) => {
+                    const amount = Math.max(1, Math.round(peakBlur * band.amount))
                     return (
-                        <MaskedView
+                        // Each band is clipped to start at `band.start` and run to
+                        // the bottom; its `BlurView` blurs the content (and any
+                        // lower bands) behind it, so the radius compounds downward.
+                        <View
                             key={i}
-                            style={StyleSheet.absoluteFill}
-                            maskElement={<GradientMask id={`${maskId}-${i}`} stops={layer.stops} />}
+                            style={[
+                                StyleSheet.absoluteFill,
+                                { top: `${band.start * 100}%`, overflow: 'hidden' },
+                            ]}
+                            pointerEvents="none"
                         >
                             <BlurView
                                 style={StyleSheet.absoluteFill}
@@ -256,7 +259,7 @@ function GlassFill({
                                 blurAmount={amount}
                                 reducedTransparencyFallbackColor={fallbackColor}
                             />
-                        </MaskedView>
+                        </View>
                     )
                 })}
             </View>

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,5 +1,5 @@
 import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { Platform, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
 import type { Modes } from '../design-tokens'
 
 /**
@@ -172,6 +172,77 @@ export function resolveTruncation(
     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)
+}