jfs-components 0.0.73 → 0.0.77

package/lib/module/components/PoweredByLabel/PoweredByLabel.js

@@ -0,0 +1,130 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import MediaSource from '../../utils/MediaSource';
+
+// Default bundled FINVU brand logo, matching the Figma reference so the
+// component renders correctly out of the box without any image prop.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_LOGO = require('./finvu.png');
+const DEFAULT_LABEL = 'Powered by RBI-regulated account aggregator';
+const DEFAULT_IMAGE_WIDTH = 33;
+const DEFAULT_IMAGE_HEIGHT = 12;
+const toNumber = (value, fallback) => {
+  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, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+
+/**
+ * `PoweredByLabel` renders the small "Powered by RBI-regulated account
+ * aggregator" badge with a trailing brand logo, used to attribute the
+ * underlying account-aggregator partner in flows such as bank-account
+ * linking and consent screens.
+ *
+ * The component is composed of:
+ *
+ * 1. A token-styled pill container (`poweredByLabel/background`,
+ *    `poweredByLabel/padding/*`).
+ * 2. The disclosure copy rendered through the `poweredByLabel/*` typography
+ *    tokens.
+ * 3. A configurable brand logo slot. Defaults to the bundled FINVU mark, but
+ *    callers can pass any image via `imageSource` or fully replace the slot
+ *    via `imageSlot`.
+ *
+ * @component
+ * @param {PoweredByLabelProps} props
+ */
+function PoweredByLabel({
+  label = DEFAULT_LABEL,
+  imageSource,
+  imageWidth = DEFAULT_IMAGE_WIDTH,
+  imageHeight = DEFAULT_IMAGE_HEIGHT,
+  imageSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  textStyle,
+  imageStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const background = getVariableByName('poweredByLabel/background', modes) ?? '#f5f5f5';
+  const foreground = getVariableByName('poweredByLabel/foreground', modes) ?? '#191b1e';
+  const fontFamily = getVariableByName('poweredByLabel/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = toNumber(getVariableByName('poweredByLabel/fontSize', modes), 10);
+  const lineHeight = toNumber(getVariableByName('poweredByLabel/lineHeight', modes), 12);
+  const fontWeight = toFontWeight(getVariableByName('poweredByLabel/fontWeight', modes), '400');
+  const gap = toNumber(getVariableByName('poweredByLabel/gap', modes), 10);
+  const paddingHorizontal = toNumber(getVariableByName('poweredByLabel/padding/horizontal', modes), 16);
+  const paddingVertical = toNumber(getVariableByName('poweredByLabel/padding/vertical', modes), 6);
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: background,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    // Hug content horizontally so the pill does not stretch to fill the
+    // parent (matches Badge, BrandChip, etc.). Override via `style` if
+    // you want it full-width (e.g. inside a card footer).
+    alignSelf: 'flex-start'
+  };
+  const labelTextStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    textAlign: 'center',
+    flexShrink: 1
+  };
+  const renderImage = () => {
+    if (imageSlot !== undefined && imageSlot !== null) {
+      const processed = cloneChildrenWithModes(imageSlot, modes);
+      if (processed.length === 0) return null;
+      return processed.length === 1 ? processed[0] : processed;
+    }
+    const resolvedSource = imageSource ?? DEFAULT_LOGO;
+    return /*#__PURE__*/_jsx(MediaSource, {
+      source: resolvedSource,
+      width: imageWidth,
+      height: imageHeight,
+      resizeMode: "contain",
+      style: imageStyle,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no"
+    });
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityRole: "text",
+    accessibilityLabel: accessibilityLabel ?? label,
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: [labelTextStyle, textStyle],
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      numberOfLines: 1,
+      children: label
+    }), renderImage()]
+  });
+}
+export default PoweredByLabel;

package/lib/module/components/RechargeCard/RechargeCard.js

@@ -7,7 +7,23 @@ import AvatarGroup from '../AvatarGroup/AvatarGroup';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import MoneyValue from '../MoneyValue/MoneyValue';
+
+// Defaults applied to the inner ButtonGroup so the card matches Figma out of
+// the box. They are spread *before* the caller's `modes` so any consumer can
+// override an individual key (e.g. swap the size to "M").
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_BUTTON_GROUP_MODES = {
+  AppearanceBrand: 'Secondary',
+  'Button / Size': 'S',
+  Emphasis: 'High'
+};
+
+// Defaults applied to the inner MoneyValue so the price renders at the
+// 36 px / 900-weight scale defined for cards in Figma. Same merge rule as
+// the button group — consumer `modes` override these.
+const DEFAULT_MONEY_VALUE_MODES = {
+  Context3: 'Balance & Cards'
+};
 /**
  * RechargeCard component implementation from Figma node 2235:937.
  * Displays a recharge plan with price, validity, data, and subscription details.
@@ -23,17 +39,19 @@ export default function RechargeCard({
   modes = EMPTY_MODES,
   style
 }) {
-  // Container Tokens
-  const backgroundColor = getVariableByName('rechargeCard/background', modes) || '#f6f3ff';
+  // Container Tokens (defaults mirror Figma node 2235:937).
+  const backgroundColor = getVariableByName('rechargeCard/background', modes) || '#ffffff';
   const paddingHorizontal = parseInt(getVariableByName('rechargeCard/padding/horizontal', modes) || 16, 10);
   const paddingVertical = parseInt(getVariableByName('rechargeCard/padding/vertical', modes) || 20, 10);
   const gap = parseInt(getVariableByName('rechargeCard/gap', modes) || 20, 10);
   const radius = parseInt(getVariableByName('rechargeCard/radius', modes) || 20, 10);
-  const minWidth = parseInt(getVariableByName('rechargeCard/minWidth', modes) || 328, 10);
+  const minWidth = parseInt(getVariableByName('rechargeCard/minWidth', modes) || 312, 10);
+  const strokeWidth = parseInt(getVariableByName('rechargeCard/strokeWidth', modes) || 1, 10);
+  const strokeColor = getVariableByName('rechargeCard/stroke/color', modes) || '#ebebed';
 
   // Header Tokens
   const headerGap = parseInt(getVariableByName('rechargeCard/header/gap', modes) || 4, 10);
-  const titleColor = getVariableByName('rechargeCard/title/color', modes) || '#13002d';
+  const titleColor = getVariableByName('rechargeCard/title/color', modes) || '#000000';
   const titleFontSize = parseInt(getVariableByName('rechargeCard/title/fontSize', modes) || 12, 10);
   const titleFontFamily = getVariableByName('rechargeCard/title/fontFamily', modes) || 'JioType Var';
   const titleLineHeight = parseInt(getVariableByName('rechargeCard/title/lineHeight', modes) || 14, 10);
@@ -44,30 +62,25 @@ export default function RechargeCard({
   const specItemGap = parseInt(getVariableByName('rechargeCard/specItem/gap', modes) || 4, 10);
 
   // Spec Label Tokens
-  const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes) || '#13002d';
+  const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes) || '#000000';
   const specLabelFontSize = parseInt(getVariableByName('rechargeCard/specItem/label/fontSize', modes) || 12, 10);
   const specLabelFontFamily = getVariableByName('rechargeCard/specItem/label/fontFamily', modes) || 'JioType Var';
   const specLabelLineHeight = parseInt(getVariableByName('rechargeCard/specItem/label/lineHeight', modes) || 14, 10);
   const specLabelFontWeight = getVariableByName('rechargeCard/specItem/label/fontWeight', modes) || '500';
 
   // Spec Value Tokens
-  const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes) || '#310064';
+  const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes) || '#000000';
   const specValueFontSize = parseInt(getVariableByName('rechargeCard/specItem/value/fontSize', modes) || 14, 10);
   const specValueFontFamily = getVariableByName('rechargeCard/specItem/value/fontFamily', modes) || 'JioType Var';
   const specValueLineHeight = parseInt(getVariableByName('rechargeCard/specItem/value/lineHeight', modes) || 17, 10);
   const specValueFontWeight = getVariableByName('rechargeCard/specItem/value/fontWeight', modes) || '500';
 
   // Disclaimer Tokens
-  const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes) || '#22004a';
+  const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes) || '#000000';
   const disclaimerFontSize = parseInt(getVariableByName('rechargeCard/disclaimer/fontSize', modes) || 10, 10);
   const disclaimerFontFamily = getVariableByName('rechargeCard/disclaimer/fontFamily', modes) || 'JioType Var';
   const disclaimerLineHeight = parseInt(getVariableByName('rechargeCard/disclaimer/lineHeight', modes) || 13, 10);
   const disclaimerFontWeight = getVariableByName('rechargeCard/disclaimer/fontWeight', modes) || '400';
-
-  // Button Group Tokens
-  // Handled by ButtonGroup component directly
-
-  // Helpers
   const resolveFontWeight = weight => typeof weight === 'number' ? weight.toString() : weight;
 
   // Pass modes to subscription children (e.g. AvatarGroup)
@@ -80,6 +93,8 @@ export default function RechargeCard({
       paddingVertical,
       gap,
       borderRadius: radius,
+      borderWidth: strokeWidth,
+      borderColor: strokeColor,
       minWidth,
       alignItems: 'flex-start'
     }, style],
@@ -100,7 +115,10 @@ export default function RechargeCard({
       }), /*#__PURE__*/_jsx(MoneyValue, {
         value: price,
         currency: "\u20B9",
-        modes: modes
+        modes: {
+          ...DEFAULT_MONEY_VALUE_MODES,
+          ...modes
+        }
       })]
     }), /*#__PURE__*/_jsxs(View, {
       style: {
@@ -189,10 +207,8 @@ export default function RechargeCard({
       children: disclaimer
     }), /*#__PURE__*/_jsx(ButtonGroup, {
       modes: {
-        ...modes,
-        "Appearance.Brand": "Secondary",
-        "Button / Size": "S",
-        "Emphasis": "High"
+        ...DEFAULT_BUTTON_GROUP_MODES,
+        ...modes
       },
       children: actions
     })]

package/lib/module/components/Text/Text.js

@@ -4,17 +4,23 @@ import React from 'react';
 import { Text as RNText } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import Skeleton from '../../skeleton/Skeleton';
+import { useSkeleton } from '../../skeleton/SkeletonGroup';
 import { jsx as _jsx } from "react/jsx-runtime";
 const TEXT_ALIGN_MAP = {
   Left: 'left',
   Center: 'center'
 };
 function Text({
-  text = 'Korem ipsum ',
+  text,
+  children,
   textAlign = 'Left',
   modes = EMPTY_MODES,
   style,
-  numberOfLines
+  numberOfLines,
+  loading,
+  skeletonWidth,
+  skeletonLines
 }) {
   const foreground = getVariableByName('text/foreground', modes) ?? '#000000';
   const fontFamily = getVariableByName('text/fontFamily', modes) ?? 'JioType';
@@ -22,6 +28,31 @@ function Text({
   const fontWeight = getVariableByName('text/fontWeight', modes) ?? '500';
   const lineHeight = getVariableByName('text/lineHeight', modes) ?? 20;
   const letterSpacing = getVariableByName('text/letterSpacing', modes) ?? -0.5;
+
+  // Skeleton short-circuit. The hook is always called (stable order); the
+  // surrounding group's `active` flag is the default, but an explicit
+  // `loading` prop overrides both directions.
+  const {
+    active: groupActive
+  } = useSkeleton();
+  const isLoading = loading ?? groupActive;
+  if (isLoading) {
+    const resolvedFontSize = fontSize;
+    const resolvedLineHeight = lineHeight;
+    const lines = Math.max(1, skeletonLines ?? numberOfLines ?? 1);
+    // Heuristic width based on the actual content length so the placeholder
+    // visually matches what's about to load. Capped to a reasonable lower
+    // bound so very short labels still produce a visible block.
+    const contentLength = typeof children === 'string' ? children.length : typeof text === 'string' ? text.length : 12;
+    const charWidth = resolvedFontSize * 0.55;
+    const computedWidth = Math.max(charWidth * 4, contentLength * charWidth);
+    return /*#__PURE__*/_jsx(Skeleton, {
+      kind: "text",
+      width: skeletonWidth ?? computedWidth,
+      height: resolvedLineHeight * lines,
+      modes: modes
+    });
+  }
   const textStyle = {
     color: foreground,
     fontFamily: fontFamily,
@@ -31,10 +62,16 @@ function Text({
     letterSpacing: letterSpacing,
     textAlign: TEXT_ALIGN_MAP[textAlign]
   };
+
+  // Prefer JSX children when present, otherwise fall back to the `text` prop.
+  // Keep the storybook placeholder as a last resort so the Default story
+  // still renders something visible when no content is supplied via either
+  // route.
+  const content = children !== undefined && children !== null && children !== false ? children : text !== undefined ? text : 'Korem ipsum ';
   return /*#__PURE__*/_jsx(RNText, {
     style: [textStyle, style],
     numberOfLines: numberOfLines,
-    children: text
+    children: content
   });
 }
 export default Text;

package/lib/module/components/Tooltip/Tooltip.js

@@ -165,7 +165,9 @@ export function TooltipTrigger({
 }
 export function TooltipContent({
   children,
-  sideOffset = 4
+  sideOffset = 4,
+  gap = 4,
+  alignItems = 'flex-start'
 }) {
   const {
     isVisible,
@@ -390,6 +392,35 @@ export function TooltipContent({
     paddingHorizontal: paddingH,
     paddingVertical: paddingV
   };
+
+  // Vertical slot wrapper: stack arbitrary children top-to-bottom with a gap.
+  // Raw <Text> children still get auto-styled with the tooltip label tokens
+  // so the simple <TooltipContent><Text>label</Text></TooltipContent> usage
+  // keeps working without any changes.
+  const slotStyle = {
+    flexDirection: 'column',
+    alignItems,
+    gap
+  };
+  const renderSlotChildren = () => {
+    if (typeof children === 'string') {
+      return /*#__PURE__*/_jsx(Text, {
+        style: textStyle,
+        children: children
+      });
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: slotStyle,
+      children: React.Children.map(children, child => {
+        if (/*#__PURE__*/React.isValidElement(child) && (child.type === Text || child.type.displayName === 'Text')) {
+          return /*#__PURE__*/React.cloneElement(child, {
+            style: [textStyle, child.props.style]
+          });
+        }
+        return child;
+      })
+    });
+  };
   if (!hasMeasured) {
     return /*#__PURE__*/_jsx(Modal, {
       transparent: true,
@@ -401,19 +432,7 @@ export function TooltipContent({
         children: /*#__PURE__*/_jsx(View, {
           style: measureStyle,
           onLayout: e => setContentSize(e.nativeEvent.layout),
-          children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-            style: textStyle,
-            children: children
-          }) : /*#__PURE__*/_jsx(View, {
-            children: React.Children.map(children, child => {
-              if (/*#__PURE__*/React.isValidElement(child) && (child.type === Text || child.type.displayName === 'Text')) {
-                return /*#__PURE__*/React.cloneElement(child, {
-                  style: [textStyle, child.props.style]
-                });
-              }
-              return child;
-            })
-          })
+          children: renderSlotChildren()
         })
       })
     });
@@ -444,19 +463,7 @@ export function TooltipContent({
             shadowRadius: 3.84,
             elevation: 5
           }],
-          children: [typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-            style: textStyle,
-            children: children
-          }) : /*#__PURE__*/_jsx(View, {
-            children: React.Children.map(children, child => {
-              if (/*#__PURE__*/React.isValidElement(child) && (child.type === Text || child.type.displayName === 'Text')) {
-                return /*#__PURE__*/React.cloneElement(child, {
-                  style: [textStyle, child.props.style]
-                });
-              }
-              return child;
-            })
-          }), /*#__PURE__*/_jsx(View, {
+          children: [renderSlotChildren(), /*#__PURE__*/_jsx(View, {
             style: {
               position: 'absolute',
               left: arrowX,

package/lib/module/components/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+export { default as AccountCard } from './AccountCard/AccountCard';
 export { default as ActionFooter } from './ActionFooter/ActionFooter';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar } from './Avatar/Avatar';
@@ -22,6 +23,8 @@ export { default as CardInsight } from './CardInsight/CardInsight';
 export { default as Disclaimer } from './Disclaimer/Disclaimer';
 export { default as Divider } from './Divider/Divider';
 export { default as Drawer } from './Drawer/Drawer';
+export { default as Dropdown, DropdownItem } from './Dropdown/Dropdown';
+export { default as DropdownInput } from './DropdownInput/DropdownInput';
 export { default as CardCTA } from './CardCTA/CardCTA';
 export { default as DebitCard } from './DebitCard/DebitCard';
 export { default as FilterBar } from './FilterBar/FilterBar';
@@ -44,6 +47,8 @@ export { default as LazyList } from './LazyList/LazyList';
 export { default as LinearMeter } from './LinearMeter/LinearMeter';
 export { default as LinearProgress } from './LinearProgress/LinearProgress';
 export { default as ListGroup } from './ListGroup/ListGroup';
+export { default as LottieIntroBlock } from './LottieIntroBlock/LottieIntroBlock';
+export { default as LottiePlayer } from './LottiePlayer/LottiePlayer';
 export { default as ListItem } from './ListItem/ListItem';
 export { default as MediaCard } from './MediaCard/MediaCard';
 export { default as MerchantProfile } from './MerchantProfile/MerchantProfile';
@@ -62,7 +67,7 @@ export { StepLabel } from './Stepper/StepLabel';
 export { default as TextInput } from './TextInput/TextInput';
 export { default as StatusHero } from './StatusHero/StatusHero';
 export { default as ThreadHero } from './ThreadHero/ThreadHero';
-export { Tooltip } from './Tooltip/Tooltip';
+export { Tooltip, TooltipTrigger, TooltipContent } from './Tooltip/Tooltip';
 export { default as TransactionDetails } from './TransactionDetails/TransactionDetails';
 export { default as TransactionStatus } from './TransactionStatus/TransactionStatus';
 export { default as TransactionBubble } from './TransactionBubble/TransactionBubble';
@@ -99,8 +104,10 @@ export { default as Toast } from './Toast/Toast';
 export { default as ToastProvider } from './Toast/ToastProvider';
 export { useToast, addToast, closeToast, closeAll } from './Toast/useToast';
 export { default as AmountInput } from './AmountInput/AmountInput';
+export { default as PageHero } from './PageHero/PageHero';
 export { default as Popup } from './Popup/Popup';
 export { default as PortfolioHero } from './PortfolioHero/PortfolioHero';
+export { default as PoweredByLabel } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel } from './ProductLabel/ProductLabel';
 export { default as ProductOverview } from './ProductOverview/ProductOverview';
 export { default as ProgressBadge } from './ProgressBadge/ProgressBadge';