jfs-components 0.0.72 → 0.0.74

package/lib/module/components/BrandChip/BrandChip.js

@@ -0,0 +1,143 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Pressable, 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 Avatar from '../Avatar/Avatar';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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;
+};
+function resolveBrandChipTokens(modes) {
+  const background = getVariableByName('brandChip/background', modes) ?? '#ffffff';
+  const foreground = getVariableByName('brandChip/foreground', modes) ?? '#0d0d0f';
+  const borderColor = getVariableByName('brandChip/border/color', modes) ?? '#e0e0e3';
+  const borderSize = toNumber(getVariableByName('brandChip/border/size', modes), 1);
+  const gap = toNumber(getVariableByName('brandChip/gap', modes), 8);
+  const paddingLeft = toNumber(getVariableByName('brandChip/padding/left', modes), 8);
+  const paddingRight = toNumber(getVariableByName('brandChip/padding/right', modes), 12);
+  const paddingVertical = toNumber(getVariableByName('brandChip/padding/vertical', modes), 5);
+  // The Figma token uses 25000 as a sentinel for "always pill-shaped".
+  // Cap it to a value React Native renders predictably.
+  const radiusRaw = toNumber(getVariableByName('brandChip/radius', modes), 9999);
+  const radius = radiusRaw >= 9999 ? 9999 : radiusRaw;
+  const fontFamily = getVariableByName('brandChip/label/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = toNumber(getVariableByName('brandChip/label/fontSize', modes), 16);
+  const lineHeight = toNumber(getVariableByName('brandChip/label/lineHeight', modes), 21);
+  const fontWeight = toFontWeight(getVariableByName('brandChip/label/fontWeight', modes), '500');
+  return {
+    containerStyle: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      backgroundColor: background,
+      borderColor,
+      borderWidth: borderSize,
+      borderStyle: 'solid',
+      borderRadius: radius,
+      paddingLeft,
+      paddingRight,
+      paddingTop: paddingVertical,
+      paddingBottom: paddingVertical,
+      gap
+    },
+    labelStyle: {
+      color: foreground,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
+    }
+  };
+}
+
+// The Figma reference renders the avatar at 29px which is the `S` size in
+// the Avatar Size collection. Callers can override via `modes`.
+const DEFAULT_AVATAR_SIZE_MODE = 'S';
+
+/**
+ * `BrandChip` renders a compact pill that pairs a small institution avatar
+ * with a short identifier label (e.g. `"Axis Bank • 0245"`). It's typically
+ * used to surface the currently-selected linked account in headers, sticky
+ * bars, or selectors.
+ *
+ * All visual values resolve through the `brandChip/*` design tokens with
+ * sensible Figma defaults so the chip renders correctly out of the box.
+ *
+ * @component
+ * @param {BrandChipProps} props
+ */
+function BrandChip({
+  label = 'Axis Bank • 0245',
+  imageSource,
+  avatarSlot,
+  onPress,
+  modes: propModes = EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const avatarModes = useMemo(() => ({
+    'Avatar Size': DEFAULT_AVATAR_SIZE_MODE,
+    ...modes
+  }), [modes]);
+  const tokens = useMemo(() => resolveBrandChipTokens(modes), [modes]);
+  const processedAvatarSlot = useMemo(() => {
+    if (!avatarSlot) return null;
+    const processed = cloneChildrenWithModes(avatarSlot, avatarModes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [avatarSlot, avatarModes]);
+  const avatarNode = processedAvatarSlot ?? (imageSource !== undefined ? /*#__PURE__*/_jsx(Avatar, {
+    style: "Image",
+    imageSource: imageSource,
+    modes: avatarModes
+  }) : /*#__PURE__*/_jsx(Avatar, {
+    style: "Image",
+    modes: avatarModes
+  }));
+  const a11yLabel = accessibilityLabel ?? label;
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [avatarNode, /*#__PURE__*/_jsx(Text, {
+      style: [tokens.labelStyle, labelStyle],
+      numberOfLines: 1,
+      ellipsizeMode: "tail",
+      children: label
+    })]
+  });
+  if (onPress) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: a11yLabel,
+      onPress: onPress,
+      style: [tokens.containerStyle, style],
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityLabel: a11yLabel,
+    style: [tokens.containerStyle, style],
+    children: content
+  });
+}
+export default /*#__PURE__*/React.memo(BrandChip);

package/lib/module/components/CardBankAccount/CardBankAccount.js

@@ -0,0 +1,223 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Badge from '../Badge/Badge';
+import Button from '../Button/Button';
+import InstitutionBadge from '../InstitutionBadge/InstitutionBadge';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_ITEMS = [{
+  label: 'Account type',
+  value: 'Korem ipsum'
+}, {
+  label: 'Account number',
+  value: 'Korem ipsum'
+}, {
+  label: 'Last updated',
+  value: 'Korem ipsum'
+}];
+
+// Component-level defaults that match the Figma reference. Caller-provided
+// `modes` are merged on top so every key here can be overridden per-instance.
+const DEFAULT_MODES = Object.freeze({
+  'Button / Size': 'S',
+  AppearanceBrand: 'Secondary',
+  Emphasis: 'Medium'
+});
+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;
+};
+
+/**
+ * `CardBankAccount` renders a bank account summary card composed of:
+ *
+ * 1. A header with an `InstitutionBadge` (avatar + bank name) and an
+ *    optional trailing `Badge`.
+ * 2. A configurable list of label/value rows describing the account.
+ * 3. A footer `Button` for the primary action.
+ *
+ * All values resolve through the `bankAccountCard/*` design tokens with
+ * sensible Figma defaults so the card renders correctly out of the box.
+ *
+ * @component
+ * @param {CardBankAccountProps} props
+ */
+function CardBankAccount({
+  institutionName = 'State Bank of India',
+  institutionAvatar,
+  badge,
+  headerSlot,
+  items = DEFAULT_ITEMS,
+  children,
+  buttonLabel = 'Button',
+  onButtonPress,
+  footer,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  // Merge caller modes on top of `DEFAULT_MODES` so every default key
+  // (e.g. `Button / Size`, `AppearanceBrand`, `Emphasis`) can be overridden
+  // per-instance while still applying out of the box.
+  const modes = useMemo(() => propModes === EMPTY_MODES ? DEFAULT_MODES : {
+    ...DEFAULT_MODES,
+    ...propModes
+  }, [propModes]);
+  const background = getVariableByName('bankAccountCard/background', modes) ?? '#ffffff';
+  const radius = toNumber(getVariableByName('bankAccountCard/radius', modes), 16);
+  const paddingHorizontal = toNumber(getVariableByName('bankAccountCard/padding/horizontal', modes), 12);
+  const paddingVertical = toNumber(getVariableByName('bankAccountCard/padding/vertical', modes), 16);
+  const gap = toNumber(getVariableByName('bankAccountCard/gap', modes), 16);
+  const headerGap = toNumber(getVariableByName('bankAccountCard/header/gap', modes), 8);
+  const listGroupGap = toNumber(getVariableByName('listGroup/gap', modes), 12);
+  const rowGap = toNumber(getVariableByName('listItem/gap', modes), 8);
+  const titleColor = getVariableByName('listItem/title/color', modes) ?? '#0f0d0a';
+  const titleFontFamily = getVariableByName('listItem/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontSize = toNumber(getVariableByName('listItem/title/fontSize', modes), 14);
+  const titleLineHeight = toNumber(getVariableByName('listItem/title/lineHeight', modes), 16);
+  const titleFontWeight = toFontWeight(getVariableByName('listItem/title/fontWeight', modes), '700');
+  const valueColor = getVariableByName('text/foreground', modes) ?? '#000000';
+  const valueFontFamily = getVariableByName('text/fontFamily', modes) ?? 'JioType Var';
+  const valueFontSize = toNumber(getVariableByName('text/fontSize', modes), 14);
+  const valueLineHeight = toNumber(getVariableByName('text/lineHeight', modes), 20);
+  const valueLetterSpacing = toNumber(getVariableByName('text/letterSpacing', modes), -0.5);
+  const valueFontWeight = toFontWeight(getVariableByName('text/fontWeight', modes), '500');
+  const labelStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontWeight: titleFontWeight
+  };
+  const valueTextStyle = {
+    color: valueColor,
+    fontFamily: valueFontFamily,
+    fontSize: valueFontSize,
+    lineHeight: valueLineHeight,
+    letterSpacing: valueLetterSpacing,
+    fontWeight: valueFontWeight
+  };
+  const renderBadge = () => {
+    if (badge === false || badge === null || badge === undefined) return null;
+    if (typeof badge === 'string') {
+      return /*#__PURE__*/_jsx(Badge, {
+        label: badge,
+        modes: modes
+      });
+    }
+    const processed = cloneChildrenWithModes(badge, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const renderHeader = () => {
+    if (headerSlot !== undefined) {
+      const processed = cloneChildrenWithModes(headerSlot, modes);
+      return processed.length === 1 ? processed[0] : processed;
+    }
+    return /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: headerGap,
+        width: '100%'
+      },
+      children: [/*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1,
+          minWidth: 0
+        },
+        children: /*#__PURE__*/_jsx(InstitutionBadge, {
+          label: institutionName,
+          ...(institutionAvatar !== undefined ? {
+            source: institutionAvatar
+          } : {}),
+          modes: modes
+        })
+      }), renderBadge()]
+    });
+  };
+  const renderItems = () => {
+    if (children !== undefined && children !== null) {
+      const processed = cloneChildrenWithModes(children, modes);
+      if (processed.length === 0) return null;
+      return /*#__PURE__*/_jsx(View, {
+        style: {
+          width: '100%',
+          gap: listGroupGap
+        },
+        children: processed.length === 1 ? processed[0] : processed
+      });
+    }
+    if (!items || items.length === 0) return null;
+    return /*#__PURE__*/_jsx(View, {
+      style: {
+        width: '100%',
+        gap: listGroupGap
+      },
+      children: items.map((item, index) => /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: rowGap,
+          width: '100%'
+        },
+        children: [/*#__PURE__*/_jsx(View, {
+          style: {
+            flex: 1,
+            minWidth: 0
+          },
+          children: /*#__PURE__*/_jsx(Text, {
+            style: labelStyle,
+            children: item.label
+          })
+        }), typeof item.value === 'string' || typeof item.value === 'number' ? /*#__PURE__*/_jsx(Text, {
+          style: valueTextStyle,
+          numberOfLines: 1,
+          children: item.value
+        }) : cloneChildrenWithModes(item.value, modes)]
+      }, `${item.label}-${index}`))
+    });
+  };
+  const renderFooter = () => {
+    if (footer === false || footer === null) return null;
+    if (footer === undefined) {
+      return /*#__PURE__*/_jsx(Button, {
+        label: buttonLabel,
+        ...(onButtonPress ? {
+          onPress: onButtonPress
+        } : {}),
+        modes: modes,
+        style: {
+          width: '100%'
+        }
+      });
+    }
+    const processed = cloneChildrenWithModes(footer, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityLabel: accessibilityLabel ?? institutionName,
+    style: [{
+      backgroundColor: background,
+      borderRadius: radius,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      alignItems: 'flex-start',
+      width: '100%'
+    }, style],
+    children: [renderHeader(), renderItems(), renderFooter()]
+  });
+}
+export default CardBankAccount;

package/lib/module/components/CardInsight/CardInsight.js

@@ -0,0 +1,161 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Badge from '../Badge/Badge';
+import Divider from '../Divider/Divider';
+import Nudge from '../Nudge/Nudge';
+import SavingsGoalSummary from '../SavingsGoalSummary/SavingsGoalSummary';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `CardInsight` renders a single insight card composed of:
+ *
+ * 1. A header with a title, subtitle and a trailing `Badge`.
+ * 2. A flexible content slot — defaults to `SavingsGoalSummary`.
+ * 3. A `Divider` separating the slot from the footer.
+ * 4. A footer slot — defaults to an inline-compact `Nudge`.
+ *
+ * @component
+ * @param {CardInsightProps} props
+ */
+function CardInsight({
+  title = 'Emergency savings',
+  subtitle = 'One line explanation here.',
+  badge = 'Label',
+  children,
+  footer,
+  divider,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const background = getVariableByName('cardInsight/background', modes) ?? '#ffffff';
+  const radius = getVariableByName('cardInsight/radius', modes) ?? 16;
+  const paddingHorizontal = getVariableByName('cardInsight/padding/horizontal', modes) ?? 12;
+  const paddingVertical = getVariableByName('cardInsight/padding/vertical', modes) ?? 16;
+  const gap = getVariableByName('cardInsight/gap', modes) ?? 12;
+  const contentGap = getVariableByName('cardInsight/contentGap', modes) ?? 8;
+  const width = getVariableByName('cardInsight/width', modes) ?? 356;
+  const slotBackground = getVariableByName('cardInsight/slot/background', modes) ?? '#ffffff';
+  const headerGap = getVariableByName('cardInsight/header/gap', modes) ?? 8;
+  const textGap = getVariableByName('cardInsight/text/gap', modes) ?? 4;
+  const titleColor = getVariableByName('cardInsight/title/color', modes) ?? '#0d0d0f';
+  const titleFontFamily = getVariableByName('cardInsight/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontSize = getVariableByName('cardInsight/title/fontSize', modes) ?? 16;
+  const titleLineHeight = getVariableByName('cardInsight/title/lineHeight', modes) ?? 17.6;
+  const titleFontWeightRaw = getVariableByName('cardInsight/title/fontWeight', modes) ?? 700;
+  const titleFontWeight = String(titleFontWeightRaw);
+  const bodyColor = getVariableByName('cardInsight/body/color', modes) ?? '#0d0d0f';
+  const bodyFontFamily = getVariableByName('cardInsight/body/fontFamily', modes) ?? 'JioType Var';
+  const bodyFontSize = getVariableByName('cardInsight/body/fontSize', modes) ?? 12;
+  const bodyLineHeight = getVariableByName('cardInsight/body/lineHeight', modes) ?? 15.6;
+  const bodyFontWeightRaw = getVariableByName('cardInsight/body/fontWeight', modes) ?? 400;
+  const bodyFontWeight = String(bodyFontWeightRaw);
+  const renderBadge = () => {
+    if (badge === false || badge === null || badge === undefined) return null;
+    if (typeof badge === 'string') {
+      return /*#__PURE__*/_jsx(Badge, {
+        label: badge,
+        modes: modes
+      });
+    }
+    const processed = cloneChildrenWithModes(badge, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const renderSlot = () => {
+    if (!children) {
+      return /*#__PURE__*/_jsx(SavingsGoalSummary, {
+        modes: modes
+      });
+    }
+    const processed = cloneChildrenWithModes(children, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const renderFooter = () => {
+    if (footer === false || footer === null) return null;
+    if (footer === undefined) {
+      return /*#__PURE__*/_jsx(Nudge, {
+        type: "inline-compact",
+        modes: {
+          AppearanceBrand: 'Neutral',
+          Context: 'Nudge&Alert',
+          ...modes
+        }
+      });
+    }
+    const processed = cloneChildrenWithModes(footer, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const renderDivider = () => {
+    if (divider === false || divider === null) return null;
+    if (divider === undefined || divider === true) {
+      return /*#__PURE__*/_jsx(Divider, {
+        modes: modes
+      });
+    }
+    const processed = cloneChildrenWithModes(divider, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const footerNode = renderFooter();
+  const showDivider = footerNode !== null && divider !== false && divider !== null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      width,
+      backgroundColor: background,
+      borderRadius: radius,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      overflow: 'hidden',
+      alignItems: 'stretch'
+    }, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: headerGap,
+        width: '100%'
+      },
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          gap: textGap,
+          alignItems: 'flex-start'
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: {
+            color: titleColor,
+            fontFamily: titleFontFamily,
+            fontSize: titleFontSize,
+            lineHeight: titleLineHeight,
+            fontWeight: titleFontWeight,
+            width: '100%'
+          },
+          children: title
+        }), /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: bodyColor,
+            fontFamily: bodyFontFamily,
+            fontSize: bodyFontSize,
+            lineHeight: bodyLineHeight,
+            fontWeight: bodyFontWeight,
+            width: '100%'
+          },
+          children: subtitle
+        })]
+      }), renderBadge()]
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        width: '100%',
+        backgroundColor: slotBackground,
+        gap: contentGap,
+        overflow: 'hidden',
+        alignItems: 'stretch'
+      },
+      children: renderSlot()
+    }), showDivider ? renderDivider() : null, footerNode]
+  });
+}
+export default CardInsight;

package/lib/module/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,62 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import CheckboxItem from '../CheckboxItem/CheckboxItem';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CheckboxGroup composes a vertical stack of `CheckboxItem`s. Spacing and
+ * padding are driven by the `checkboxGroup/*` design tokens so groups stay
+ * visually consistent across screens.
+ *
+ * The `modes` prop is forwarded recursively to all children — including
+ * `CheckboxItem`s and any element rendered inside their `endSlot`.
+ *
+ * @component
+ * @param {CheckboxGroupProps} props
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroup modes={{ 'Color Mode': 'Light' }}>
+ *   <CheckboxItem label="Fixed deposit • 0245" />
+ *   <CheckboxItem label="Recurring deposit • 1182" />
+ *   <CheckboxItem label="Mutual fund • Equity" />
+ * </CheckboxGroup>
+ * ```
+ */
+function CheckboxGroup({
+  children,
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const gap = getVariableByName('checkboxGroup/gap', modes) ?? 12;
+  const paddingHorizontal = getVariableByName('checkboxGroup/padding/horizontal', modes) ?? 0;
+  const paddingVertical = getVariableByName('checkboxGroup/padding/vertical', modes) ?? 0;
+  const containerStyle = {
+    width: '100%',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap,
+    paddingHorizontal,
+    paddingVertical
+  };
+  const items = children ? cloneChildrenWithModes(children, modes) : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(CheckboxItem, {
+      modes: modes
+    }), /*#__PURE__*/_jsx(CheckboxItem, {
+      modes: modes
+    }), /*#__PURE__*/_jsx(CheckboxItem, {
+      modes: modes
+    })]
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "list",
+    accessibilityLabel: accessibilityLabel,
+    children: items
+  });
+}
+export default CheckboxGroup;