jfs-components 0.0.85 → 0.0.95

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

@@ -0,0 +1,118 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+/**
+ * One vertical pill in the {@link AllocationComparisonChartProps.data} array.
+ *
+ * Each segment renders a single bar whose **height encodes `value`** (the
+ * "current" reading) and, when supplied, a **`baseline`** overlay drawn from
+ * the bottom up with a dashed marker line (the "recommended" reading). Both
+ * are measured against the same shared scale so bars and baselines are
+ * directly comparable across segments.
+ */
+export type AllocationSegment = {
+    /** Stable React key (falls back to the array index). */
+    key?: React.Key;
+    /** Caption rendered under the bar — e.g. `"Small & Mid"`. */
+    label: React.ReactNode;
+    /**
+     * Primary value driving the bar's height (the "current" reading). Scaled
+     * against {@link AllocationComparisonChartProps.max}.
+     */
+    value: number;
+    /**
+     * Optional comparison value (the "recommended" reading). When provided, a
+     * filled overlay is drawn from the bottom of the bar up to this level.
+     * Omit to render a plain bar.
+     */
+    baseline?: number;
+    /**
+     * Whether to draw the dashed reference line + value label at the top of the
+     * `baseline` overlay. Defaults to `true` **only for the first segment that
+     * has a `baseline`** and `false` for the rest, so the marker stays a
+     * focused callout rather than repeating on every bar. Set explicitly to
+     * force it on/off per segment. Has no effect without a `baseline`.
+     */
+    showMarker?: boolean;
+    /**
+     * Text shown above the bar. Defaults to `formatValue(value)`. Pass `null`
+     * to hide it.
+     */
+    valueLabel?: React.ReactNode;
+    /**
+     * Text shown beside the dashed baseline marker. Defaults to
+     * `formatValue(baseline)`. Pass `null` to hide just the marker label while
+     * keeping the dashed line.
+     */
+    baselineLabel?: React.ReactNode;
+    /** Hard-override the bar (current) fill color. */
+    color?: string;
+    /** Hard-override the baseline (recommended) overlay color. */
+    baselineColor?: string;
+    /** Per-segment accessibility label. */
+    accessibilityLabel?: string;
+};
+export type AllocationComparisonChartProps = {
+    /**
+     * The segments to plot, left → right. Each carries its `value`, optional
+     * `baseline` and its `label`, so a bar can never drift from its caption.
+     */
+    data?: AllocationSegment[];
+    /**
+     * Maximum value used to scale every bar **and** baseline. Defaults to the
+     * largest `value`/`baseline` across `data`. Pass an explicit `max` (e.g.
+     * `100` for percentages) for a fixed scale.
+     */
+    max?: number;
+    /**
+     * Height in px of the bar area — i.e. the height of a bar whose value
+     * equals `max`. Excludes the value/caption label rows. Default: `154`.
+     */
+    height?: number;
+    /** Width of each pill bar in px. Default: the `segmentIndicator/track/width` token (`28`). */
+    barWidth?: number;
+    /** Show the legend row above the chart. Default: `true`. */
+    showLegend?: boolean;
+    /** Legend label for the bar (current) series. Default: `"Current"`. */
+    valueLegendLabel?: React.ReactNode;
+    /**
+     * Legend label for the baseline (recommended) series. Default:
+     * `"Recommended"`. The baseline legend item only appears when at least one
+     * segment defines a `baseline`.
+     */
+    baselineLegendLabel?: React.ReactNode;
+    /**
+     * Formats numeric `value`/`baseline` into the default labels. Default:
+     * `(v) => \`${v}%\``.
+     */
+    formatValue?: (value: number) => string;
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Style applied to the bars row. */
+    chartStyle?: StyleProp<ViewStyle>;
+    /** Style applied to the legend row. */
+    legendStyle?: StyleProp<ViewStyle>;
+    /** Accessibility label for the whole chart. */
+    accessibilityLabel?: string;
+};
+/**
+ * `AllocationComparisonChart` plots a row of vertical pill bars that compare a
+ * **current** reading (each bar's height) against an optional **recommended**
+ * baseline (a filled overlay drawn from the bottom up, marked with a dashed
+ * line). Every bar and baseline shares a single scale, so heights are directly
+ * comparable across segments — no axes required.
+ *
+ * The chart is driven entirely by the `data` array: each entry pairs a
+ * `value`, an optional `baseline` and its `label`, so a bar can never drift
+ * out of sync with its caption or its baseline marker.
+ *
+ * Colors, fonts, spacing and the pill radius resolve from the Figma
+ * `segmentIndicator/*`, `metricLegendItem/*` and `allocationComparisonChart/*`
+ * tokens via the `modes` prop.
+ *
+ * @component
+ */
+declare function AllocationComparisonChart({ data, max, height, barWidth, showLegend, valueLegendLabel, baselineLegendLabel, formatValue, modes: propModes, style, chartStyle, legendStyle, accessibilityLabel, }: AllocationComparisonChartProps): import("react/jsx-runtime").JSX.Element;
+export default AllocationComparisonChart;
+//# sourceMappingURL=AllocationComparisonChart.d.ts.map

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

@@ -10,23 +10,23 @@ export type FullscreenModalProps = {
     /** Secondary line below the supporting paragraph (e.g. a price / timeline). */
     priceText?: string;
     /**
-     * Media rendered full-bleed behind the hero text and driven by the parallax
-     * scroll effect. Bring any renderer — most commonly a `LottiePlayer`, but an
-     * `Image`, `Video`, or `SvgXml` works too. Size it to fill the hero box
-     * (`heroHeight` tall, full modal width) and let it `cover` so that as the
-     * hero collapses in height the art is cropped, never distorted. `modes` are
-     * cascaded into it.
+     * Full-bleed background media for the whole modal. It is pinned to the top
+     * and laid out at the full modal width; size it with an aspect ratio
+     * (e.g. `<Image ratio={1080 / 4140} />`) so its height follows the width
+     * naturally. It renders as a single continuous background BEHIND both the
+     * hero text and the body content — there is no separate body box stacked on
+     * top of it. Bring any renderer — most commonly an `Image`, but a
+     * `LottiePlayer`, `Video`, or `SvgXml` works too. It never intercepts
+     * touches and the foreground content scrolls over it (no parallax).
+     * `modes` are cascaded into it.
      */
     heroMedia?: React.ReactNode;
-    /** Resting height of the hero region. Defaults to 420. */
-    heroHeight?: number;
     /**
-     * Collapsed height the hero shrinks to at full scroll. Defaults to
-     * `heroHeight * 0.45`. Only the height changes — the width is always full.
+     * Height reserved for the hero text region (eyebrow / headline / supporting
+     * / price), whose content is anchored to the bottom. Applies whether or not
+     * `heroMedia` is present. Defaults to 420.
      */
-    heroMinHeight?: number;
-    /** Enable the scroll-driven hero collapse. Defaults to true. */
-    parallax?: boolean;
+    heroHeight?: number;
     /** Whether to render the floating close button (top-right). Defaults to true. */
     showClose?: boolean;
     /** Press handler for the close button. */
@@ -44,21 +44,24 @@ export type FullscreenModalProps = {
     onPrimaryAction?: () => void;
     /** Disclaimer text shown below the default primary action button. */
     disclaimer?: string;
-    /** Solid backdrop color for the scrollable body. Defaults to a near-black. */
-    backgroundColor?: string;
     /** Body content (typically `Section`s). `modes` are cascaded automatically. */
     children?: React.ReactNode;
-    /** Mode configuration. `context5` is always forced to `'Fullscreen Modal'`. */
+    /**
+     * Mode configuration. `Page type` defaults to `'JioPlus'` (overridable here),
+     * and `context5` is always forced to `'Fullscreen Modal'` (non-overridable).
+     * The resolved modes cascade to the body, hero media, and the `ActionFooter`.
+     */
     modes?: Record<string, any>;
     /** Style overrides for the outer container. */
     style?: StyleProp<ViewStyle>;
-    /** Style overrides for the scroll body wrapper (the dark content area). */
+    /** Style overrides for the transparent body wrapper. */
     contentContainerStyle?: StyleProp<ViewStyle>;
     testID?: string;
 };
 /**
- * FullscreenModal — a full-screen takeover surface with a parallax media hero,
- * a scrollable body, a floating close button, and a sticky `ActionFooter`.
+ * FullscreenModal — a full-screen takeover surface with a full-bleed media
+ * hero, a scrollable body, a floating close button, and a sticky
+ * `ActionFooter`.
  *
  * The component always themes itself with `context5: 'Fullscreen Modal'`
  * (non-overridable) so every nested component (Section, ListItem, Button,
@@ -66,14 +69,21 @@ export type FullscreenModalProps = {
  * That mode is cascaded into `children`, the footer, and the hero text via
  * `cloneChildrenWithModes` / the merged `modes` object.
  *
- * ### Parallax
- * As the user scrolls up, the hero collapses by **height only** (from
- * `heroHeight` to `heroMinHeight`) — its **full width is always preserved**.
- * The `heroMedia` is pinned to the top at a fixed size and `cover`-cropped by
- * the collapsing clip, so it keeps a perfect aspect ratio the whole time
- * (never scaled or squished). Because it collapses slower than the content
- * scrolls, the media lags behind for the parallax depth cue. Disable with
- * `parallax={false}`.
+ * ### Background media
+ * The `heroMedia` is a single full-bleed background pinned to the top of the
+ * modal at the full width and its own natural aspect ratio. It lives at the
+ * ROOT — behind both the scrolling content and the (transparent) footer — so
+ * it fills the whole surface and is NEVER clipped to the content height. It
+ * also contributes ZERO scroll height: the scroll extent is driven purely by
+ * the in-flow foreground (hero text + `children`), so the number of body
+ * elements dictates how far the surface scrolls. It still scrolls in lockstep
+ * WITH the content (the background is translated by the scroll offset), so the
+ * content reads as sitting ON one continuous image that moves with it — there
+ * is no parallax and no separate solid body box.
+ *
+ * Pass a background sized to the full width at its natural ratio
+ * (e.g. `<Image imageSource={bg} ratio={1080 / 4140} />`). Use an asset at
+ * least as tall as the surface so it covers the full modal.
  *
  * @component
  * @example
@@ -83,7 +93,7 @@ export type FullscreenModalProps = {
  *   headline="Get more from your money."
  *   supportingText="JioFinance+ is your upgraded financial experience…"
  *   priceText="₹999/year · ₹0 until 2027"
- *   heroMedia={<LottiePlayer source={hero} size={{ width: 360, height: 420 }} />}
+ *   heroMedia={<Image imageSource={hero} ratio={1080 / 4140} />}
  *   primaryActionLabel="Upgrade for free"
  *   disclaimer="By upgrading, we'll check your eligibility with Experian."
  *   onPrimaryAction={() => upgrade()}
@@ -94,6 +104,6 @@ export type FullscreenModalProps = {
  * </FullscreenModal>
  * ```
  */
-declare function FullscreenModal({ eyebrow, headline, supportingText, priceText, heroMedia, heroHeight, heroMinHeight, parallax, showClose, onClose, closeAccessibilityLabel, footer, primaryActionLabel, onPrimaryAction, disclaimer, backgroundColor, children, modes: propModes, style, contentContainerStyle, testID, }: FullscreenModalProps): import("react/jsx-runtime").JSX.Element;
+declare function FullscreenModal({ eyebrow, headline, supportingText, priceText, heroMedia, heroHeight, showClose, onClose, closeAccessibilityLabel, footer, primaryActionLabel, onPrimaryAction, disclaimer, children, modes: propModes, style, contentContainerStyle, testID, }: FullscreenModalProps): import("react/jsx-runtime").JSX.Element;
 export default FullscreenModal;
 //# sourceMappingURL=FullscreenModal.d.ts.map

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

@@ -0,0 +1,75 @@
+import React from 'react';
+import { type AccessibilityProps, type StyleProp, type ViewStyle } from 'react-native';
+import type { UnifiedSource } from '../../utils/MediaSource';
+type IconProps = AccessibilityProps & {
+    /**
+     * Built-in icon name from the registry, in the `ic_something` format
+     * (e.g. `'ic_card'`, `'ic_scan_qr_code'`). When omitted and no `source` or
+     * `children` slot is supplied, defaults to `'ic_card'` to match the Figma
+     * design's default glyph.
+     */
+    iconName?: string;
+    /**
+     * Unified fallback source rendered when `iconName` is missing or not in the
+     * registry. Accepts a remote URI, an inline SVG XML string, a `require()`
+     * asset, an SVG React component, or an already-rendered element. The media
+     * is tinted with the mode-resolved icon color so it follows design tokens
+     * just like a built-in icon. See {@link UnifiedSource}.
+     */
+    source?: UnifiedSource;
+    /**
+     * Icon slot. Render any node here (another `Icon`, a custom SVG component,
+     * etc.) and it takes precedence over `iconName`/`source`. `modes` cascade
+     * into the slotted children automatically.
+     */
+    children?: React.ReactNode;
+    /**
+     * Override the mode-resolved icon color. When omitted the value comes from
+     * the `icon/color` design token.
+     */
+    color?: string;
+    /**
+     * Override the mode-resolved icon size (in px). When omitted the value comes
+     * from the `icon/size` design token.
+     */
+    size?: number;
+    modes?: Record<string, any>;
+    style?: StyleProp<ViewStyle>;
+};
+/**
+ * Icon component — a design-token-driven wrapper around a single glyph.
+ *
+ * It mirrors the Figma "Icon" component: a padded, centered container whose
+ * color and size are resolved from the `icon/*` design tokens via `modes`.
+ * The glyph itself can be supplied three ways, in order of precedence:
+ *
+ *  1. `children` — a real slot for any node (custom SVG component, nested
+ *     `Icon`, etc.). `modes` cascade into the slot automatically.
+ *  2. `iconName` — a registry icon in the `ic_something` format.
+ *  3. `source` — a {@link UnifiedSource} fallback (remote URI, inline SVG XML,
+ *     `require()` asset, SVG component, or React element), tinted with the
+ *     mode-resolved icon color.
+ *
+ * `color` and `size` props let consumers override the token values per
+ * instance without touching `modes`.
+ *
+ * @example
+ * ```tsx
+ * // Built-in registry icon (default path).
+ * <Icon iconName="ic_card" modes={{ 'Color Mode': 'Light' }} />
+ *
+ * // Per-instance overrides.
+ * <Icon iconName="ic_ccv" color="#5c00b5" size={24} />
+ *
+ * // Fallback to an external source when the name isn't in the registry.
+ * <Icon source="https://cdn.example.com/glyph.svg" />
+ *
+ * // Slot: render any node as the icon.
+ * <Icon><BrandLogo /></Icon>
+ * ```
+ */
+declare function Icon({ iconName, source, children, color, size, modes: propModes, style: styleProp, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Icon>;
+export default _default;
+export type { IconProps };
+//# sourceMappingURL=Icon.d.ts.map

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

@@ -38,10 +38,12 @@ export { default as CircularProgressBarDoted, type CircularProgressBarDotedProps
 export { default as CircularRating, type CircularRatingProps } from './CircularRating/CircularRating';
 export { default as CoverageRing, type CoverageRingProps } from './CoverageRing/CoverageRing';
 export { default as CoverageBarComparison, type CoverageBarComparisonProps, type CoverageBarComparisonItem } from './CoverageBarComparison/CoverageBarComparison';
+export { default as AllocationComparisonChart, type AllocationComparisonChartProps, type AllocationSegment } from './AllocationComparisonChart/AllocationComparisonChart';
 export { default as MonthlyStatusGrid, CalendarGlyph, type MonthlyStatusGridProps, type MonthlyStatusGridMonth, type MonthlyStatus, type CalendarGlyphProps } from './MonthlyStatusGrid/MonthlyStatusGrid';
 export { default as Gauge, type GaugeProps } from './Gauge/Gauge';
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard';
 export { default as HStack, type HStackProps } from './HStack/HStack';
+export { default as Icon, type IconProps } from './Icon/Icon';
 export { default as IconButton } from './IconButton/IconButton';
 export { default as IconCapsule } from './IconCapsule/IconCapsule';
 export { default as Image, type ImageProps } from './Image/Image';

package/lib/typescript/src/icons/registry.d.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-02T15:42:11.888Z
+ * Generated: 2026-06-04T14:40:09.533Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.85",
+  "version": "0.0.95",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/assets.d.ts

@@ -0,0 +1,24 @@
+declare module '*.png' {
+  const value: string
+  export default value
+}
+
+declare module '*.jpg' {
+  const value: string
+  export default value
+}
+
+declare module '*.jpeg' {
+  const value: string
+  export default value
+}
+
+declare module '*.gif' {
+  const value: string
+  export default value
+}
+
+declare module '*.webp' {
+  const value: string
+  export default value
+}