jfs-components 0.1.25 → 0.1.30

package/lib/module/components/ProfileCard/ProfileCard.js

@@ -0,0 +1,202 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { 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 Avatar from '../Avatar/Avatar';
+import Attached from '../Attached/Attached';
+import IconCapsule from '../IconCapsule/IconCapsule';
+import ListItem from '../ListItem/ListItem';
+import UpiHandle from '../UpiHandle/UpiHandle';
+import Divider from '../Divider/Divider';
+
+/**
+ * A single UPI handle pill rendered under the profile name.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Forced modes for everything rendered inside the card — the profile card is
+// an on-dark (jioPlus) surface, so child components (Avatar, UpiHandle,
+// ListItem, Divider, Text, Button, …) must resolve their tokens through the
+// `context 10: jioPlus` mode. Consumer modes are spread first so appearance
+// modes (e.g. `Profile Card Appearance: Premium`) still cascade through.
+const CARD_CONTEXT = Object.freeze({
+  'context 10': 'jioPlus'
+});
+const DEFAULT_UPI_HANDLES = [{
+  label: 'username@jio',
+  iconName: 'ic_copy'
+}, {
+  label: '9999999999',
+  iconName: 'ic_confirm'
+}];
+function resolveProfileCardTokens(modes) {
+  const backgroundColor = getVariableByName('profileCard/bg', modes) ?? '#00065a';
+  const gap = getVariableByName('profileCard/gap', modes) ?? 12;
+  const borderRadius = getVariableByName('profileCard/radius', modes) ?? 12;
+  const paddingHorizontal = getVariableByName('profileCard/padding/horizontal', modes) ?? 20;
+  const paddingVertical = getVariableByName('profileCard/padding/vertical', modes) ?? 20;
+  const childModes = {
+    ...modes,
+    ...CARD_CONTEXT
+  };
+
+  // The UPI handle pills sit in the header ListItem's support slot, whose row
+  // gap is the `slot/gap` token in the ListItem context.
+  const handlesGap = getVariableByName('slot/gap', {
+    ...childModes,
+    Context: 'ListItem'
+  }) ?? 2;
+
+  // The avatar badge is a white circle: the fill comes from the Attached
+  // slot's background token (the IconCapsule itself resolves transparent).
+  const badgeBackground = getVariableByName('attached/slot/background', childModes) ?? '#ffffff';
+  return {
+    containerStyle: {
+      backgroundColor,
+      borderRadius,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      flexDirection: 'column',
+      alignItems: 'stretch'
+    },
+    handlesRowStyle: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      gap: handlesGap
+    },
+    badgeBackground,
+    childModes,
+    // XS capsule per the Figma spec; consumers can still override the size
+    // through their own modes.
+    badgeModes: {
+      'Icon Capsule Size': 'XS',
+      ...modes,
+      ...CARD_CONTEXT
+    }
+  };
+}
+
+/**
+ * ProfileCard — Figma node 6914:38498 ("Profile Card").
+ *
+ * A dark, rounded profile summary card composed from the shared primitives:
+ *
+ *  - **Header** — a {@link ListItem} whose leading slot is an {@link Attached}
+ *    monogram {@link Avatar} with a small {@link IconCapsule} badge at its
+ *    bottom-right, the user's name as the title, and a row of
+ *    {@link UpiHandle} pills in the support slot.
+ *  - **Divider** — separates the header from the body.
+ *  - **Body slot** — arbitrary children (typically `ListItem`s separated by
+ *    `Divider`s). All profile-card context modes cascade into the slot, so
+ *    nested components automatically resolve their on-dark token values.
+ *
+ * The card supports the `Profile Card Appearance` collection
+ * (`Default` | `Premium`) via the `modes` prop, which recolors the container,
+ * avatar, pills and divider in one go.
+ *
+ * @example
+ * ```tsx
+ * <ProfileCard
+ *   name="Shruti Chandarshekhar Rai"
+ *   monogram="SR"
+ *   upiHandles={[
+ *     { label: 'shrutirai-1@jio', iconName: 'ic_copy', onPress: copyHandle },
+ *     { label: '9184844184', iconName: 'ic_confirm' },
+ *   ]}
+ * >
+ *   <ListItem layout="Horizontal" title="JioFinance+" navArrow={false} />
+ * </ProfileCard>
+ * ```
+ */
+function ProfileCard({
+  name = 'Name',
+  monogram = 'MS',
+  avatarSource,
+  badgeIcon = 'ic_qr_code',
+  upiHandles = DEFAULT_UPI_HANDLES,
+  header,
+  children,
+  showDivider = true,
+  width = 344,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = useMemo(() => resolveProfileCardTokens(modes), [modes]);
+
+  // ---- Header -------------------------------------------------------------
+  const headerNode = useMemo(() => {
+    if (header) return cloneChildrenWithModes(header, tokens.childModes);
+    const avatar = /*#__PURE__*/_jsx(Attached, {
+      position: "bottom-right",
+      modes: tokens.childModes,
+      badge: badgeIcon != null ? /*#__PURE__*/_jsx(IconCapsule, {
+        iconName: badgeIcon,
+        modes: tokens.badgeModes,
+        style: {
+          backgroundColor: tokens.badgeBackground
+        }
+      }) : null,
+      children: /*#__PURE__*/_jsx(Avatar, {
+        monogram: monogram,
+        style: avatarSource ? 'Image' : 'Monogram',
+        ...(avatarSource != null ? {
+          imageSource: avatarSource
+        } : {}),
+        modes: tokens.childModes
+      })
+    });
+    const handles = upiHandles.length > 0 ? /*#__PURE__*/_jsx(View, {
+      style: tokens.handlesRowStyle,
+      children: upiHandles.map((handle, index) => /*#__PURE__*/_jsx(UpiHandle, {
+        label: handle.label,
+        ...(handle.iconName != null ? {
+          iconName: handle.iconName
+        } : {}),
+        showIcon: handle.showIcon ?? true,
+        ...(handle.onPress != null ? {
+          onPress: handle.onPress
+        } : {}),
+        modes: tokens.childModes
+      }, `${handle.label}-${index}`))
+    }) : null;
+    return /*#__PURE__*/_jsx(ListItem, {
+      layout: "Horizontal",
+      title: name,
+      navArrow: false,
+      showSupportText: handles != null,
+      supportSlot: handles,
+      leading: avatar,
+      modes: tokens.childModes
+    });
+  }, [header, name, monogram, avatarSource, badgeIcon, upiHandles, tokens]);
+
+  // ---- Body slot ----------------------------------------------------------
+  const bodyChildren = useMemo(() => children != null ? cloneChildrenWithModes(children, tokens.childModes) : null, [children, tokens.childModes]);
+  const hasBody = bodyChildren != null && bodyChildren.length > 0;
+  const containerStyle = useMemo(() => ({
+    ...tokens.containerStyle,
+    width
+  }), [tokens.containerStyle, width]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: [headerNode, hasBody && showDivider ? /*#__PURE__*/_jsx(Divider, {
+      direction: "horizontal",
+      modes: tokens.childModes
+    }) : null, bodyChildren]
+  });
+}
+export default /*#__PURE__*/React.memo(ProfileCard);

package/lib/module/components/Table/Table.js

@@ -1,16 +1,26 @@
 "use strict";
 
-import React from 'react';
+import React, { createContext, useContext } from 'react';
 import { View, Text, Pressable, ScrollView, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Carries the root `Table`'s `columnWidth` down to every cell so that, when it
+ * is set, all columns (header + body, data-driven or composed) share the same
+ * fixed width without each cell having to repeat the prop. Cells still honour
+ * an explicit `width` prop over this context value. `undefined` (the default,
+ * when no `Table` ancestor is present, or `columnWidth` is unset) leaves cells
+ * to flex — preserving the original behaviour.
+ */
+const TableContext = /*#__PURE__*/createContext(undefined);
 
 /* -------------------------------------------------------------------------------------------------
  * Shared types & token resolution
  * -----------------------------------------------------------------------------------------------*/
 
 /** Resolved styling for a header cell and a body cell, derived from design tokens. */
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+
 const toWeight = w => typeof w === 'number' ? `${w}` : w;
 
 /**
@@ -88,6 +98,10 @@ function TableCell({
   style
 }) {
   const t = resolveTableTokens(modes);
+  // A cell's width resolves in priority order: an explicit `width` prop, then
+  // the root Table's `columnWidth` (via context), then fall back to flex.
+  const ctxColumnWidth = useContext(TableContext);
+  const effectiveWidth = width ?? ctxColumnWidth;
   return /*#__PURE__*/_jsx(View, {
     style: [{
       backgroundColor: t.cellBg,
@@ -99,8 +113,8 @@ function TableCell({
       borderColor: t.borderColor,
       borderBottomWidth: isLastRow ? 0 : t.borderSize,
       borderRightWidth: isLastColumn ? 0 : t.borderSize,
-      ...(width != null ? {
-        width
+      ...(effectiveWidth != null ? {
+        width: effectiveWidth
       } : {
         flex,
         minWidth: 0
@@ -128,6 +142,8 @@ function TableHeaderCell({
   style
 }) {
   const t = resolveTableTokens(modes);
+  const ctxColumnWidth = useContext(TableContext);
+  const effectiveWidth = width ?? ctxColumnWidth;
   return /*#__PURE__*/_jsx(View, {
     style: [{
       backgroundColor: t.headerBg,
@@ -136,8 +152,8 @@ function TableHeaderCell({
       justifyContent: alignToJustify(align),
       paddingHorizontal: t.headerPaddingH,
       paddingVertical: t.headerPaddingV,
-      ...(width != null ? {
-        width
+      ...(effectiveWidth != null ? {
+        width: effectiveWidth
       } : {
         flex,
         minWidth: 0
@@ -252,6 +268,7 @@ function Table({
   getRowKey,
   onRowPress,
   scrollable = false,
+  columnWidth,
   accessibilityLabel,
   modes = EMPTY_MODES,
   style
@@ -295,7 +312,10 @@ function Table({
     }, !scrollable && {
       width: '100%'
     }, style],
-    children: body
+    children: /*#__PURE__*/_jsx(TableContext.Provider, {
+      value: columnWidth,
+      children: body
+    })
   });
   if (scrollable) {
     return /*#__PURE__*/_jsx(ScrollView, {

package/lib/module/components/UpiHandle/UpiHandle.js

@@ -8,9 +8,6 @@ import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import MediaSource from '../../utils/MediaSource';
 import Icon from '../../icons/Icon';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// Default static asset from the component folder.
-// Consumers can override the image via the `source` prop if needed.
-const DEFAULT_AVATAR_IMAGE = require('./Image.png');
 const IS_WEB = Platform.OS === 'web';
 const IS_IOS = Platform.OS === 'ios';
 const PRESS_DELAY = IS_IOS ? 130 : 0;
@@ -83,7 +80,7 @@ function resolveUpiHandleTokens(modes) {
  * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
  * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
  * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set.
- * @param {UnifiedSource} [props.source] - Unified avatar source (URI, inline SVG XML, `require()` asset, SVG React component, or React element). Smart-detects raster vs SVG so the same prop works on iOS, Android and web.
+ * @param {UnifiedSource} [props.source] - Unified avatar source (URI, inline SVG XML, `require()` asset, SVG React component, or React element). Smart-detects raster vs SVG so the same prop works on iOS, Android and web. Providing a source force-sets `UPI Handle Image: True` (avatar shown); omitting it force-sets `False` (avatar hidden), overriding any `UPI Handle Image` value passed via `modes`.
  * @param {ImageSourcePropType|UnifiedSource} [props.avatarSource] - Deprecated alias for `source`; kept for back-compat.
  * @param {Function} [props.onClick] - Click/tap handler. Works as an alias for `onPress`.
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
@@ -118,10 +115,24 @@ function UpiHandle({
   const {
     modes: globalModes
   } = useTokens();
-  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
-    ...globalModes,
-    ...propModes
-  }, [globalModes, propModes]);
+
+  // The avatar is fully driven by the presence of a `source`. It force-sets the
+  // Figma "UPI Handle Image" collection to `True` when a source is provided and
+  // `False` otherwise. This is applied last so it overrides any consumer-passed
+  // `UPI Handle Image` mode, keeping the avatar visibility and the token layout
+  // (symmetric padding in the hidden-image state) in lockstep with the source.
+  const hasSource = source != null || avatarSource != null;
+  const modes = useMemo(() => {
+    const base = globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+      ...globalModes,
+      ...propModes
+    };
+    return {
+      ...base,
+      'UPI Handle Image': hasSource ? 'True' : 'False'
+    };
+  }, [globalModes, propModes, hasSource]);
+  const showImageResolved = hasSource;
   const tokens = useMemo(() => resolveUpiHandleTokens(modes), [modes]);
 
   // Focus is a sustained visible state (web-only). Setter is gated so it
@@ -155,11 +166,12 @@ function UpiHandle({
 
   // `source` wins; `avatarSource` is the legacy fallback. Both are accepted
   // as a UnifiedSource (string / number / {uri} / component / element), and
-  // the legacy `ImageSourcePropType` shapes naturally fit that union too.
-  const resolvedAvatarSource = source ?? avatarSource ?? DEFAULT_AVATAR_IMAGE;
+  // the legacy `ImageSourcePropType` shapes naturally fit that union too. This
+  // is only read when `showImageResolved` is true, which requires a source.
+  const resolvedAvatarSource = source ?? avatarSource;
   const avatarSize = tokens.avatarStyle.width ?? 23;
   const innerContent = /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(View, {
+    children: [showImageResolved && /*#__PURE__*/_jsx(View, {
       style: tokens.avatarStyle,
       children: /*#__PURE__*/_jsx(MediaSource, {
         source: resolvedAvatarSource,

package/lib/module/components/index.js

@@ -37,6 +37,9 @@ export { default as FullscreenModal } from './FullscreenModal/FullscreenModal';
 export { default as Form } from './Form/Form';
 export { useFormContext } from './Form/Form';
 export { default as FormField } from './FormField/FormField';
+export { default as Grid } from './Grid/Grid';
+export { default as FormUpload } from './FormUpload/FormUpload';
+export { default as Additem } from './FormUpload/Additem';
 export { default as ContentSheet } from './ContentSheet/ContentSheet';
 export { default as CircularProgressBar } from './CircularProgressBar/CircularProgressBar';
 export { default as CircularProgressBarDoted } from './CircularProgressBarDoted/CircularProgressBarDoted';
@@ -136,6 +139,7 @@ export { default as CompareTable } from './CompareTable/CompareTable';
 export { default as Table, TableHeader, TableHeaderCell, TableBody, TableRow, TableCell } from './Table/Table';
 export { default as PoweredByLabel } from './PoweredByLabel/PoweredByLabel';
 export { default as ProductLabel } from './ProductLabel/ProductLabel';
+export { default as ProfileCard } from './ProfileCard/ProfileCard';
 export { default as ProductMerchandisingCard } from './ProductMerchandisingCard/ProductMerchandisingCard';
 export { default as ProductOverview } from './ProductOverview/ProductOverview';
 export { default as ProjectionMarker } from './ProjectionMarker/ProjectionMarker';
@@ -151,4 +155,6 @@ export { default as TestimonialsCard } from './TestimonialsCard/TestimonialsCard
 export { default as Text } from './Text/Text';
 export { default as TextSegment } from './TextSegment/TextSegment';
 export { default as SegmentedControl } from './SegmentedControl/SegmentedControl';
-export { default as Toggle } from './Toggle/Toggle';
+export { default as Toggle } from './Toggle/Toggle';
+export { default as AutoplayControl } from './AutoplayControl/AutoplayControl';
+export { default as NumberPagination } from './NumberPagination/NumberPagination';