jfs-components 0.1.0 → 0.1.8

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export interface MediaCardProps {
     /**
      * Image source for the background media. Same shape as the rest of the
@@ -27,7 +28,7 @@ export interface MediaCardProps {
     /**
      * Modes object for token resolution.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Style overrides for the card container.
      */
@@ -77,7 +78,7 @@ export declare function Header({ children, style }: {
 export declare function Title({ children, style, modes: propModes }: {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Glass Footer — pinned to the bottom of the card, **always** on top of the
@@ -105,7 +106,7 @@ export declare function Title({ children, style, modes: propModes }: {
 export declare function Footer({ children, style, modes: propModes }: {
     children?: React.ReactNode;
     style?: StyleProp<ViewStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Footer Title
@@ -114,7 +115,7 @@ export declare function Footer({ children, style, modes: propModes }: {
 export declare function FooterTitle({ children, style, modes: propModes }: {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }): import("react/jsx-runtime").JSX.Element;
 /**
  * Footer Subtitle
@@ -123,7 +124,7 @@ export declare function FooterTitle({ children, style, modes: propModes }: {
 export declare function FooterSubtitle({ children, style, modes: propModes }: {
     children?: React.ReactNode;
     style?: StyleProp<TextStyle>;
-    modes?: Record<string, any>;
+    modes?: Modes;
 }): import("react/jsx-runtime").JSX.Element;
 export default MediaCard;
 //# sourceMappingURL=MediaCard.d.ts.map

package/lib/typescript/src/components/MerchantProfile/MerchantProfile.d.ts

@@ -1,5 +1,6 @@
 import { type ViewStyle, type StyleProp } from 'react-native';
 import { type AvatarProps } from '../Avatar/Avatar';
+import type { Modes } from '../../design-tokens';
 export type MerchantProfileProps = {
     /**
      * The merchant's display name or title
@@ -13,7 +14,7 @@ export type MerchantProfileProps = {
      * Mode configuration passed to the token resolver.
      * Also passed to the Avatar child component for consistent theming.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /**
      * Optional style overrides for the container
      */

package/lib/typescript/src/components/MessageField/MessageField.d.ts

@@ -1,4 +1,5 @@
 import { type StyleProp, type TextInputProps as RNTextInputProps, type TextStyle, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * Visual state of the textarea. Mirrors the `FormField States` collection so
  * MessageField slots into the same theming pipeline as FormField. The state
@@ -58,7 +59,7 @@ export type MessageFieldProps = {
     /** Auto-focus the textarea on mount. */
     autoFocus?: boolean;
     /** Modes for design token resolution (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Style overrides for the outermost wrapper. */
     style?: StyleProp<ViewStyle>;
     /** Style overrides for the textarea container (border/padding/etc). */

package/lib/typescript/src/components/MetricLegendItem/MetricLegendItem.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type MetricLegendItemProps = {
     /** The label text on the left (after the indicator). */
     label?: React.ReactNode;
@@ -20,7 +21,7 @@ export type MetricLegendItemProps = {
      */
     indicatorShape?: 'dot' | 'line';
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override container styles. */
     style?: StyleProp<ViewStyle>;
     /** Override the indicator (dot) styles. */

package/lib/typescript/src/components/MoneyValue/MoneyValue.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Pressable, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type MoneyValueProps = {
     /** Monetary value to display. */
     value?: string | number;
@@ -12,7 +13,7 @@ export type MoneyValueProps = {
     /** When true, a blinking vertical cursor is shown at the end of the value text. */
     focused?: boolean;
     /** Modes configuration mapped to Figma tokens. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     valueStyle?: StyleProp<TextStyle>;
     currencyStyle?: StyleProp<TextStyle>;

package/lib/typescript/src/components/MonthlyStatusGrid/MonthlyStatusGrid.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * The three semantic states a calendar glyph can be in. Maps 1:1 to the
  * Figma `Calendar Glyph State` collection modes (`Idle`, `notSaved`,
@@ -25,7 +26,7 @@ export type MonthlyStatusGridMonth = {
      * Per-month design token mode overrides. Merged on top of the parent
      * `modes` and the per-month `Calendar Glyph State` derived from `status`.
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Per-month accessibility label. */
     accessibilityLabel?: string;
 };
@@ -54,7 +55,7 @@ export type MonthlyStatusGridProps = {
      */
     legendStatuses?: MonthlyStatus[];
     /** Design token modes (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /** Style applied to the months section (the rows wrapper). */
@@ -79,7 +80,7 @@ export type CalendarGlyphProps = {
      */
     status?: MonthlyStatus;
     /** Design token mode overrides. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /** Label text style override. */

package/lib/typescript/src/components/NavArrow/NavArrow.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import { type SafePressableProps } from '../../utils/web-platform-utils';
+import type { Modes } from '../../design-tokens';
 type NavArrowDirection = 'Back' | 'Forward' | 'Down';
 type NavArrowProps = SafePressableProps & {
     /** Direction of the arrow: 'Back' (left chevron), 'Forward' (right chevron), or 'Down' */
     direction?: NavArrowDirection;
     /** Modes used to resolve design tokens */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Optional additional container style */
     style?: StyleProp<ViewStyle>;
     /** Accessibility label for the arrow */

package/lib/typescript/src/components/NoteInput/NoteInput.d.ts

@@ -1,4 +1,6 @@
-import { type StyleProp, type ViewStyle, type TextStyle, type TextInputProps } from 'react-native';
+import React from 'react';
+import { TextInput as RNTextInput, type StyleProp, type ViewStyle, type TextStyle, type TextInputProps } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type NoteInputProps = {
     /** The value of the text input */
     value?: string;
@@ -7,7 +9,7 @@ export type NoteInputProps = {
     /** Callback when text changes */
     onChangeText?: (text: string) => void;
     /** Design token modes (e.g., {'InputState': 'Idle', 'Color Mode': 'Light'}) */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Custom container style */
     style?: StyleProp<ViewStyle>;
     /** Custom text input style */
@@ -19,5 +21,21 @@ export type NoteInputProps = {
  * NoteInput component representing an interactive "Add note" badge style field.
  * Allows the user to click, clears the placeholder text, and shows a blinking cursor when focused.
  */
-export default function NoteInput({ value, placeholder, onChangeText, modes, style, textStyle, state: explicitState, onFocus, onBlur, ...rest }: NoteInputProps): import("react/jsx-runtime").JSX.Element;
+declare const NoteInput: React.ForwardRefExoticComponent<{
+    /** The value of the text input */
+    value?: string;
+    /** The placeholder when empty ("Add note" by default) */
+    placeholder?: string;
+    /** Callback when text changes */
+    onChangeText?: (text: string) => void;
+    /** Design token modes (e.g., {'InputState': 'Idle', 'Color Mode': 'Light'}) */
+    modes?: Modes;
+    /** Custom container style */
+    style?: StyleProp<ViewStyle>;
+    /** Custom text input style */
+    textStyle?: StyleProp<TextStyle>;
+    /** State of the component */
+    state?: "Editing" | "Idle";
+} & Omit<TextInputProps, "style" | "value" | "placeholder" | "onChangeText"> & React.RefAttributes<RNTextInput>>;
+export default NoteInput;
 //# sourceMappingURL=NoteInput.d.ts.map

package/lib/typescript/src/components/Nudge/Nudge.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewStyle, type StyleProp } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type NudgeType = 'stacked-prominent' | 'stacked-detailed' | 'inline-compact';
 export type NudgeProps = {
     /**
@@ -24,7 +25,7 @@ export type NudgeProps = {
     /** Content slot — overrides default content, or provides detailed list content */
     children?: React.ReactNode;
     /** Mode configuration for design token resolution */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Optional container style overrides */
     style?: StyleProp<ViewStyle>;
 };

package/lib/typescript/src/components/Numpad/Numpad.d.ts

@@ -1,8 +1,9 @@
 import { type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type NumpadKeyValue = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '.' | 'backspace';
 export interface NumpadProps {
     /** Design token modes for theming (e.g., {"Color Mode": "Light"}) */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Callback fired when any key is pressed */
     onKeyPress?: (key: NumpadKeyValue) => void;
     /** Whether to show the decimal point key (default: true) */

package/lib/typescript/src/components/OTP/OTP.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type ViewStyle, type StyleProp } from 'react-native';
 import { type SupportTextProps } from '../SupportText/SupportText';
+import type { Modes } from '../../design-tokens';
 export type OtpResendState = 'counting' | 'ready' | 'sending';
 export type UseOtpResendOptions = {
     /** Countdown length in seconds. Defaults to 30. */
@@ -62,7 +63,7 @@ export type OTPResendConfig = {
     resendButtonModes?: Record<string, any>;
 };
 export type OTPResendProps = OTPResendConfig & {
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
 };
 export declare function OTPResend({ durationSeconds, onResend, autoStart, formatCountdown, sendingLabel, resendLabel, countdownStatus, resendButtonModes, modes: propModes, style, }: OTPResendProps): import("react/jsx-runtime").JSX.Element;
@@ -88,7 +89,7 @@ export type OTPProps = {
     /** Auto-focus the input on mount. */
     autoFocus?: boolean;
     /** Design token modes for Figma token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /** Optional SupportText rendered below the slots. Pass a string for the label or a ReactNode for full control. */

package/lib/typescript/src/components/Overlay/Overlay.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
+export type OverlayProps = Omit<ViewProps, 'children' | 'style'> & {
+    /**
+     * Content rendered on top of the scrim. `modes` are cascaded to every child
+     * via {@link cloneChildrenWithModes}. When omitted the overlay renders as a
+     * bare backdrop.
+     */
+    children?: React.ReactNode;
+    /**
+     * How `children` are positioned within the overlay.
+     * - `center` (default): centers content both axes
+     * - `top` / `bottom`: pins content to the top/bottom edge
+     * - `stretch`: stretches content to fill the overlay
+     */
+    contentPlacement?: 'center' | 'top' | 'bottom' | 'stretch';
+    /**
+     * Called when the scrim (the area outside `children`) is pressed. Typically
+     * used to dismiss the overlaid surface. When omitted the backdrop is inert.
+     */
+    onPress?: () => void;
+    /**
+     * When `true` (default) the overlay covers its parent via `StyleSheet.absoluteFill`.
+     * Set to `false` to lay it out in normal flow (driven by `style`).
+     */
+    fill?: boolean;
+    /**
+     * Mode configuration passed to the token resolver and cascaded to children.
+     */
+    modes?: Modes;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Overlay — a token-driven scrim that dims content behind an overlaid surface.
+ *
+ * Renders a semi-transparent backdrop using the `overlay/background` design
+ * token and optionally hosts content (e.g. a modal, sheet or dialog) on top.
+ * Pair it with a `Modal` for true full-screen overlays, or drop it inside any
+ * relatively-positioned container to dim just that region.
+ *
+ * @example
+ * ```tsx
+ * <Overlay modes={modes} onPress={close}>
+ *   <Card>Dialog content</Card>
+ * </Overlay>
+ * ```
+ */
+declare function Overlay({ children, contentPlacement, onPress, fill, modes: propModes, style, ...rest }: OverlayProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Overlay>;
+export default _default;
+//# sourceMappingURL=Overlay.d.ts.map

package/lib/typescript/src/components/PageHero/PageHero.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type PageHeroProps = {
     /** Small eyebrow text shown above the headline. */
     eyebrow?: string;
@@ -39,7 +40,7 @@ export type PageHeroProps = {
      */
     media?: React.ReactNode;
     /** Mode configuration for design-token theming. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Style overrides applied to the outer container. */
     style?: StyleProp<ViewStyle>;
     testID?: string;

package/lib/typescript/src/components/PaymentFeedback/PaymentFeedback.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type PaymentFeedbackProps = {
     /** Large heading text, typically a monetary value (e.g. "₹50,000") */
     title?: string;
@@ -20,7 +21,7 @@ export type PaymentFeedbackProps = {
      * IconCapsule's color — pass `AppearanceSystem: 'positive' | 'warning' |
      * 'negative'` to render a green/orange/red capsule (defaults to `positive`).
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: ViewStyle;
 };
 export default function PaymentFeedback({ title, subtitle, body, details, showDetails, iconName, renderMedia, modes: propModes, style, }: PaymentFeedbackProps): import("react/jsx-runtime").JSX.Element;

package/lib/typescript/src/components/PdpCcCard/PdpCcCard.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
+/**
+ * A single metric column inside the card's stats row: a small title, a bold
+ * value and an optional muted caption.
+ */
+export interface PdpCcCardMetric {
+    /** Small label rendered above the value (e.g. `"Weight"`). */
+    title?: string;
+    /** The prominent value (e.g. `"24K"`). */
+    value?: string;
+    /** Optional muted caption rendered below the value. */
+    caption?: string;
+}
+export interface PdpCcCardProps {
+    /**
+     * Image source for the default media slot. Accepts a URL string or any RN
+     * `ImageSourcePropType`. Ignored when `media` is provided.
+     */
+    imageSource?: ImageSourcePropType | string;
+    /** Default media image width. Defaults to the Figma spec (`100`). */
+    imageWidth?: number;
+    /** Default media image height. Defaults to the Figma spec (`60`). */
+    imageHeight?: number;
+    /**
+     * Full override for the media slot (top of the card). Takes precedence over
+     * `imageSource`. `modes` cascade into it automatically.
+     */
+    media?: React.ReactNode;
+    /** Headline title (26px black). */
+    title?: string;
+    /** Subtitle rendered below the title (14px medium). */
+    subtitle?: string;
+    /**
+     * The metric columns rendered in the stats row. Vertical dividers are
+     * inserted automatically between adjacent metrics. Defaults to two sample
+     * metrics.
+     */
+    metrics?: PdpCcCardMetric[];
+    /** CTA button label. Defaults to `"button"`. */
+    buttonLabel?: string;
+    /**
+     * Registry icon name for the button's leading glyph. Defaults to
+     * `'ic_add_circle'`. Pass `null` to hide the leading icon.
+     */
+    buttonIcon?: string | null;
+    /** CTA press handler. */
+    onButtonPress?: () => void;
+    /** Full override for the CTA. Takes precedence over `buttonLabel`. */
+    button?: React.ReactNode;
+    /** Toggles the CTA button. Defaults to `true`. */
+    showButton?: boolean;
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void;
+    /** Card width. Defaults to the Figma spec (`344`). Pass `'100%'` to fill the parent. */
+    width?: number | `${number}%`;
+    /** Modes object for design-token resolution. Cascaded to all children. */
+    modes?: Modes;
+    /** Style overrides for the card container. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string;
+}
+/**
+ * PdpCcCard — Figma node 5352:935 ("PDP cc card").
+ *
+ * A centered white product/PDP card composed from the shared design-system
+ * primitives so it stays in sync with the rest of the library:
+ *
+ *  - **Media** — a top image slot (`Image`, rounded via `image/radius`). Pass
+ *    `imageSource` for the default image or `media` for a full slot override.
+ *  - **Title** — a centered headline + subtitle rendered through the shared
+ *    {@link Title} component (`title/*`, `pageSubtitle/*` tokens).
+ *  - **Metrics** — a row of {@link PdpCcCardMetric} columns (title / value /
+ *    caption) separated by vertical `Divider`s (`metricdata/*` tokens).
+ *  - **CTA** — a small tonal {@link Button} (`Button / Size: S`,
+ *    `AppearanceBrand: Secondary`, `Emphasis: Medium`) with a leading icon.
+ *
+ * All defaults can be overridden via `modes`.
+ */
+declare function PdpCcCard({ imageSource, imageWidth, imageHeight, media, title, subtitle, metrics, buttonLabel, buttonIcon, onButtonPress, button, showButton, onPress, width, modes, style, accessibilityLabel, }: PdpCcCardProps): import("react/jsx-runtime").JSX.Element;
+export default PdpCcCard;
+//# sourceMappingURL=PdpCcCard.d.ts.map

package/lib/typescript/src/components/PlanComparisonCard/PlanComparisonCard.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 /**
  * A single plan column header (the label column has no header of its own).
  */
@@ -48,7 +49,7 @@ export type PlanComparisonCardProps = {
     /** Feature rows compared across the plan columns. */
     rows?: PlanComparisonRow[];
     /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Override the outer container style. */
     style?: StyleProp<ViewStyle>;
 };

package/lib/typescript/src/components/Popup/Popup.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type PopupRef = {
     open: () => void;
     close: () => void;
@@ -16,7 +17,7 @@ export type PopupProps = {
     /** Slot content displayed inside the popup. */
     children?: React.ReactNode;
     /** Mode configuration for design token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Whether pressing the backdrop closes the popup. */
     closeOnBackdropPress?: boolean;
     /** Backdrop overlay color. */

package/lib/typescript/src/components/PortfolioHero/PortfolioHero.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { type ViewStyle, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type PortfolioHeroProps = {
     /** Product label text displayed next to the avatar. */
     label?: string;
@@ -10,7 +11,7 @@ export type PortfolioHeroProps = {
     /** Currency symbol or ISO code. */
     currency?: string;
     /** Modes configuration mapped to Figma tokens. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Slot content rendered below the money value (e.g. Badge, subtitle). */
     children?: React.ReactNode;
     /** Container style override. */

package/lib/typescript/src/components/PoweredByLabel/PoweredByLabel.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { type ImageStyle, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
 import { type UnifiedSource } from '../../utils/MediaSource';
+import type { Modes } from '../../design-tokens';
 export type PoweredByLabelProps = {
     /**
      * Label copy. Defaults to "Powered by RBI-regulated account aggregator"
@@ -33,7 +34,7 @@ export type PoweredByLabelProps = {
     /**
      * Design token modes for theming (e.g. `{ 'Color Mode': 'Dark' }`).
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: StyleProp<ViewStyle>;
     /** Label text style override. */

package/lib/typescript/src/components/ProductLabel/ProductLabel.d.ts

@@ -1,11 +1,12 @@
 import { type ViewStyle, type ImageSourcePropType } from 'react-native';
+import type { Modes } from '../../design-tokens';
 export type ProductLabelProps = {
     /** The product name label text. */
     label?: string;
     /** Image source for the product avatar. */
     imageSource?: ImageSourcePropType | string;
     /** Modes configuration for design token resolution. */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style override. */
     style?: ViewStyle;
 };

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

@@ -0,0 +1,56 @@
+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'`) 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;
+    /** 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 (mirrors `MediaCard/GlassFill`):
+ *   - `@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.
+ */
+declare function GlassFill({ tint, intensity, overlayColor, progressive, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
+export default GlassFill;
+//# sourceMappingURL=GlassFill.d.ts.map

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

@@ -0,0 +1,27 @@
+import { 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;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Web counterpart of `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.
+ */
+declare function GlassFill({ tint, intensity, overlayColor, progressive, style, }: GlassFillProps): import("react/jsx-runtime").JSX.Element;
+export default GlassFill;
+//# sourceMappingURL=GlassFill.web.d.ts.map