jfs-components 0.0.79 → 0.0.85

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

@@ -13,6 +13,12 @@ export type MetricLegendItemProps = {
      * `metricLegendItem/indicator/bg` design token.
      */
     indicatorColor?: string;
+    /**
+     * Shape of the leading indicator. `'dot'` (default) renders the small
+     * circle used in categorical legends; `'line'` renders a short
+     * horizontal bar, matching the legend of a line chart.
+     */
+    indicatorShape?: 'dot' | 'line';
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
     modes?: Record<string, any>;
     /** Override container styles. */
@@ -32,6 +38,6 @@ export type MetricLegendItemProps = {
  * @component
  * @param {MetricLegendItemProps} props
  */
-declare function MetricLegendItem({ label, value, indicatorColor, modes, style, indicatorStyle, labelStyle, valueStyle, }: MetricLegendItemProps): import("react/jsx-runtime").JSX.Element;
+declare function MetricLegendItem({ label, value, indicatorColor, indicatorShape, modes, style, indicatorStyle, labelStyle, valueStyle, }: MetricLegendItemProps): import("react/jsx-runtime").JSX.Element;
 export default MetricLegendItem;
 //# sourceMappingURL=MetricLegendItem.d.ts.map

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

@@ -15,7 +15,11 @@ export type PaymentFeedbackProps = {
     iconName?: string;
     /** Optional custom media slot that replaces the default IconCapsule */
     renderMedia?: ReactNode;
-    /** Mode configuration for design tokens */
+    /**
+     * Mode configuration for design tokens. Also drives the default
+     * IconCapsule's color — pass `AppearanceSystem: 'positive' | 'warning' |
+     * 'negative'` to render a green/orange/red capsule (defaults to `positive`).
+     */
     modes?: Record<string, any>;
     style?: ViewStyle;
 };

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

@@ -47,18 +47,20 @@ export type PlanComparisonCardProps = {
     columns?: PlanComparisonColumn[];
     /** Feature rows compared across the plan columns. */
     rows?: PlanComparisonRow[];
-    /**
-     * Minimum flex-grow on the label column when the table is given extra
-     * horizontal space. Plan columns always size to their content and never
-     * shrink below it.
-     * @default 0
-     */
-    labelColumnFlex?: number;
     /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
     modes?: Record<string, any>;
     /** Override the outer container style. */
     style?: StyleProp<ViewStyle>;
 };
-declare function PlanComparisonCard({ columns, rows, labelColumnFlex, modes, style, }: PlanComparisonCardProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * PlanComparisonCard renders a compact comparison table that pits the user's
+ * current plan against one or more alternative plans across a set of feature
+ * rows. Implementation of Figma node `4498:2968` (`PlanComparisonCard`).
+ *
+ * Columns use a 1.8fr / 1fr flex ratio (label vs plan), matching the Figma grid.
+ *
+ * @component
+ */
+declare function PlanComparisonCard({ columns, rows, modes, style, }: PlanComparisonCardProps): import("react/jsx-runtime").JSX.Element;
 export default PlanComparisonCard;
 //# sourceMappingURL=PlanComparisonCard.d.ts.map

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

@@ -0,0 +1,45 @@
+import { type StyleProp, type ViewProps, type ViewStyle } from 'react-native';
+/**
+ * Per-segment colours, resolved from the Figma `spiner/*` tokens. Consumers can
+ * override any subset via the `colors` prop.
+ */
+export type SpinnerColors = {
+    /** Leading segment (front of the falling chain). */
+    primary?: string;
+    /** Middle segment. */
+    secondary?: string;
+    /** Trailing segment (tail of the chain). */
+    tertiary?: string;
+};
+type SpinnerBaseProps = Omit<ViewProps, 'children' | 'style'>;
+export type SpinnerProps = SpinnerBaseProps & {
+    /**
+     * Diameter in px. The spinner is always rendered at a 1:1 ratio, so a single
+     * size controls both width and height. Defaults to the Figma size (72).
+     */
+    size?: number;
+    /**
+     * Duration of one full clockwise revolution of the leading segment, in ms.
+     * Lower = faster. Defaults to 2400.
+     */
+    durationMs?: number;
+    /**
+     * "Weightiness" of the fall, in `[0, 0.9]`. 0 = perfectly constant speed;
+     * higher values make segments whip faster over the top and ease through the
+     * bottom. Kept below 1 so the motion never reverses. Defaults to 0.45.
+     */
+    gravity?: number;
+    /** Override any subset of the token-driven segment colours. */
+    colors?: SpinnerColors;
+    /** When false, renders a static resting spinner (also honoured for reduced motion). Defaults to true. */
+    animating?: boolean;
+    /** Design token modes forwarded to token lookups. */
+    modes?: Record<string, any>;
+    /** Container style override. */
+    style?: StyleProp<ViewStyle>;
+    /** Accessibility label announced to assistive tech. Defaults to "Loading". */
+    accessibilityLabel?: string;
+};
+declare function Spinner({ size, durationMs, gravity, colors, animating, modes: propModes, style, accessibilityLabel, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export default Spinner;
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -65,6 +65,7 @@ export { default as Title, type TitleProps } from './Title/Title';
 export { default as Screen, type ScreenProps } from './Screen/Screen';
 export { default as Section } from './Section/Section';
 export { default as Slot, type SlotProps, type SlotLayoutDirection } from './Slot/Slot';
+export { default as Spinner, type SpinnerProps, type SpinnerColors } from './Spinner/Spinner';
 export { default as Stepper, type StepperProps } from './Stepper/Stepper';
 export { Step, type StepProps, type StepStatus } from './Stepper/Step';
 export { StepLabel, type StepLabelProps } from './Stepper/StepLabel';
@@ -100,6 +101,9 @@ export { default as RadioButton, type RadioButtonProps } from './RadioButton/Rad
 export { default as RechargeCard, type RechargeCardProps } from './RechargeCard/RechargeCard';
 export { default as SavingsGoalSummary, type SavingsGoalSummaryProps, type SavingsGoalSummaryItem } from './SavingsGoalSummary/SavingsGoalSummary';
 export { default as DonutChart, type DonutChartProps, type DonutChartSegmentData, type DonutChartSegmentProps, DonutChartSegment } from './DonutChart/DonutChart';
+export { default as AreaLineChart, useChart, type AreaLineChartProps, type ChartSeries, type ChartPoint, type ChartInset, type GoalPinConfig, type ChartGridProps, type ChartXAxisProps, type ChartYAxisProps, type ChartGoalPinProps } from './AreaLineChart/AreaLineChart';
+export { default as ClusterBubble, type ClusterBubbleProps, type ClusterBubbleLabelPlacement, type ClusterBubbleLabelDirection } from './ClusterBubble/ClusterBubble';
+export { default as BubbleChart, type BubbleChartProps, type BubbleDatum } from './BubbleChart/BubbleChart';
 export { default as DonutChartSummary, type DonutChartSummaryProps, type DonutChartSummaryItem } from './DonutChartSummary/DonutChartSummary';
 export { default as RangeTrack, type RangeTrackProps, type RangeTrackTab, type RangeTrackItem } from './RangeTrack/RangeTrack';
 export { default as SegmentedTrack, type SegmentedTrackProps, type SegmentedTrackSegmentData, type SegmentedTrackSegmentProps, SegmentedTrackSegment } from './SegmentedTrack/SegmentedTrack';

package/lib/typescript/src/icons/components/IconArrowdown.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconArrowdown: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconArrowdown.d.ts.map

package/lib/typescript/src/icons/components/IconArrowup.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconArrowup: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconArrowup.d.ts.map

package/lib/typescript/src/icons/components/IconChevrondowncircle.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconChevrondowncircle: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconChevrondowncircle.d.ts.map

package/lib/typescript/src/icons/components/IconChevronleftcircle.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconChevronleftcircle: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconChevronleftcircle.d.ts.map

package/lib/typescript/src/icons/components/IconChevronrightcircle.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconChevronrightcircle: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconChevronrightcircle.d.ts.map

package/lib/typescript/src/icons/components/IconChevronupcircle.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconChevronupcircle: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconChevronupcircle.d.ts.map

package/lib/typescript/src/icons/components/IconOsnavback.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconOsnavback: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconOsnavback.d.ts.map

package/lib/typescript/src/icons/components/IconOsnavcenter.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconOsnavcenter: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconOsnavcenter.d.ts.map

package/lib/typescript/src/icons/components/IconOsnavhome.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconOsnavhome: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconOsnavhome.d.ts.map

package/lib/typescript/src/icons/components/IconOsnavtask.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconOsnavtask: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconOsnavtask.d.ts.map

package/lib/typescript/src/icons/components/IconSignin.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconSignin: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconSignin.d.ts.map

package/lib/typescript/src/icons/components/IconSignout.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconSignout: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconSignout.d.ts.map

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

@@ -63,10 +63,12 @@ export * from './IconArmed';
 export * from './IconArmedoff';
 export * from './IconArmedpartially';
 export * from './IconArrowback';
+export * from './IconArrowdown';
 export * from './IconArrowline';
 export * from './IconArrowlinediagonal';
 export * from './IconArrowlinedot';
 export * from './IconArrownext';
+export * from './IconArrowup';
 export * from './IconArtificialinsemination';
 export * from './IconAssistivegrid';
 export * from './IconAstrology';
@@ -236,9 +238,13 @@ export * from './IconChemistry';
 export * from './IconCherry';
 export * from './IconChestpain';
 export * from './IconChevrondown';
+export * from './IconChevrondowncircle';
 export * from './IconChevronleft';
+export * from './IconChevronleftcircle';
 export * from './IconChevronright';
+export * from './IconChevronrightcircle';
 export * from './IconChevronup';
+export * from './IconChevronupcircle';
 export * from './IconChildrengame';
 export * from './IconCholesterol';
 export * from './IconCleaning';
@@ -757,6 +763,10 @@ export * from './IconOperatingtable';
 export * from './IconOperator';
 export * from './IconOrder';
 export * from './IconOrders';
+export * from './IconOsnavback';
+export * from './IconOsnavcenter';
+export * from './IconOsnavhome';
+export * from './IconOsnavtask';
 export * from './IconOtp';
 export * from './IconOutofstock';
 export * from './IconOutgoing';
@@ -953,6 +963,8 @@ export * from './IconShutter10s';
 export * from './IconShutter3s';
 export * from './IconShutter5s';
 export * from './IconSign';
+export * from './IconSignin';
+export * from './IconSignout';
 export * from './IconSim';
 export * from './IconSim1';
 export * from './IconSim2';

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-05-29T17:01:15.629Z
+ * Generated: 2026-06-02T15:42:11.888Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.79",
+  "version": "0.0.85",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",
@@ -40,7 +40,8 @@
     "icons:generate": "node scripts/generate-icon-registry.js",
     "prepare": "bob build",
     "build": "bob build",
-    "prepack": "yarn icons:generate && bob build"
+    "prepack": "yarn icons:generate && bob build",
+    "push:xpaydemo": "bash scripts/push-to-xpaydemo.sh"
   },
   "react-native-builder-bob": {
     "source": "src",

package/src/components/AppBar/AppBar.tsx

@@ -8,6 +8,14 @@ import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
 
 type AppBarType = 'MainPage' | 'SubPage'
 
+// SubPage "slot wrap" geometry, taken directly from the Figma design
+// (node 449:7876). The middle slot is an absolutely-centered box of a fixed
+// size; its inner content (node 3991:4125) is a `flex: 1 0 0; min-width: 1px`
+// item so it fills / shrinks responsively within that box.
+const SUBPAGE_MIDDLE_DEFAULT_WIDTH = 192
+const SUBPAGE_MIDDLE_HEIGHT = 32
+const SUBPAGE_MIDDLE_PADDING_HORIZONTAL = 21
+
 export type AppBarProps = {
   /**
    * Type of the App Bar.
@@ -26,8 +34,19 @@ export type AppBarProps = {
   /**
    * Slot for the middle content.
    * Often used for "Page Title" in SubPage.
+   *
+   * On `SubPage` this is rendered as an absolutely-centered box (matching the
+   * Figma "slot wrap"): it stays centered in the bar regardless of how wide
+   * the leading/actions slots are, and its content fills/shrinks responsively
+   * within {@link middleSlotWidth}.
    */
   middleSlot?: React.ReactNode;
+  /**
+   * Width of the centered `SubPage` middle slot, in px.
+   * Defaults to the Figma value (192). Has no effect on `MainPage`.
+   * @default 192
+   */
+  middleSlotWidth?: number;
   /**
    * Slot for the actions on the right.
    */
@@ -52,6 +71,7 @@ export default function AppBar({
   type = 'MainPage',
   leadingSlot,
   middleSlot,
+  middleSlotWidth = SUBPAGE_MIDDLE_DEFAULT_WIDTH,
   actionsSlot,
   modes: propModes = EMPTY_MODES,
   onLeadingPress,
@@ -160,13 +180,50 @@ export default function AppBar({
     ? <View style={actionsStyle}>{cloneChildrenWithModes(React.Children.toArray(actionsSlot), modes)}</View>
     : null
 
-  // When there is no middleSlot we want leading & actions pinned to the
-  // outer edges, so we apply `space-between` at the wrapper. With a middle
-  // slot present, the middle (flex: 1) absorbs the remaining space, so
-  // `space-between` is a no-op.
+  // SubPage centers its middle slot via absolute positioning (see Figma
+  // "slot wrap"), so it never participates in the row flow. Only MainPage
+  // keeps the legacy in-flow middle slot.
+  const hasInFlowMiddle = isMain && !!processedMiddle
+
+  // With an in-flow middle (MainPage) the middle (flex: 1) absorbs the
+  // remaining space, so leading & actions sit at the edges naturally. In all
+  // other cases we pin leading & actions to the outer edges with
+  // `space-between`; the SubPage middle floats above, centered.
   const wrapperStyle: ViewStyle = {
     ...containerStyle,
-    justifyContent: processedMiddle ? 'flex-start' : 'space-between',
+    justifyContent: hasInFlowMiddle ? 'flex-start' : 'space-between',
+  }
+
+  // Absolutely-positioned overlay for the SubPage middle slot. Instead of
+  // centering a fixed-height box with `top/left: 50%` + transform (which on
+  // Android resolves the percentage against an intermediate, content-driven
+  // parent height and lands a few px too high), the overlay STRETCHES to fill
+  // the whole bar (`top/bottom/left/right: 0`) and centers its content with
+  // flexbox. This uses the exact same full-height vertical reference as the
+  // leading/actions row (`alignItems: 'center'`), so the middle content always
+  // sits on the same line as the back arrow and end slot on every platform.
+  const subPageMiddleOverlayStyle: ViewStyle = {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }
+
+  // Fixed-width clipping box (mirrors the Figma "slot wrap" geometry): keeps the
+  // middle content from bleeding under the leading/actions slots while staying
+  // centered within the overlay above.
+  const subPageMiddleBoxStyle: ViewStyle = {
+    width: middleSlotWidth,
+    height: SUBPAGE_MIDDLE_HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: SUBPAGE_MIDDLE_PADDING_HORIZONTAL,
+    overflow: 'hidden',
   }
 
   return (
@@ -183,14 +240,12 @@ export default function AppBar({
       </View>
 
       {/*
-       * Middle Section — rendered as an in-flow flex item (`flex: 1`) so it
-       * occupies the space between leading and actions but never overflows
-       * past them. This fixes wide children (e.g. <LinearProgress /> with
-       * width: '100%') stretching edge-to-edge under the leading/actions.
-       * `minWidth: 0` is required so the flex item can shrink below its
-       * content's intrinsic width on platforms that respect it (web).
+       * MainPage in-flow middle — occupies the space between leading and
+       * actions (`flex: 1`) without overflowing. `minWidth: 0` lets the flex
+       * item shrink below its content's intrinsic width on platforms that
+       * respect it (web).
        */}
-      {processedMiddle && (
+      {hasInFlowMiddle && (
         <View
           style={{
             flex: 1,
@@ -209,6 +264,31 @@ export default function AppBar({
       <View style={actionsStyle}>
         {processedActions}
       </View>
+
+      {/*
+       * SubPage middle — absolutely centered "slot wrap". The inner wrapper is
+       * a responsive `flex: 1` item (matching Figma's `flex-[1_0_0] min-w-px`)
+       * so its content fills / shrinks within the fixed-width box.
+       */}
+      {isSub && processedMiddle && (
+        <View style={subPageMiddleOverlayStyle} pointerEvents="box-none">
+          <View style={subPageMiddleBoxStyle} pointerEvents="box-none">
+            <View
+              style={{
+                flex: 1,
+                minWidth: 1,
+                height: '100%',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+              pointerEvents="box-none"
+            >
+              {processedMiddle}
+            </View>
+          </View>
+        </View>
+      )}
     </View>
   )
 }