jfs-components 0.0.72 → 0.0.73

package/lib/commonjs/components/CardInsight/CardInsight.js

@@ -0,0 +1,166 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Badge = _interopRequireDefault(require("../Badge/Badge"));
+var _Divider = _interopRequireDefault(require("../Divider/Divider"));
+var _Nudge = _interopRequireDefault(require("../Nudge/Nudge"));
+var _SavingsGoalSummary = _interopRequireDefault(require("../SavingsGoalSummary/SavingsGoalSummary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * `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 = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  const background = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/background', modes) ?? '#ffffff';
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/radius', modes) ?? 16;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/padding/horizontal', modes) ?? 12;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/padding/vertical', modes) ?? 16;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/gap', modes) ?? 12;
+  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/contentGap', modes) ?? 8;
+  const width = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/width', modes) ?? 356;
+  const slotBackground = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/slot/background', modes) ?? '#ffffff';
+  const headerGap = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/header/gap', modes) ?? 8;
+  const textGap = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/text/gap', modes) ?? 4;
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/title/color', modes) ?? '#0d0d0f';
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/title/fontSize', modes) ?? 16;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/title/lineHeight', modes) ?? 17.6;
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/title/fontWeight', modes) ?? 700;
+  const titleFontWeight = String(titleFontWeightRaw);
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/body/color', modes) ?? '#0d0d0f';
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/body/fontFamily', modes) ?? 'JioType Var';
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/body/fontSize', modes) ?? 12;
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/body/lineHeight', modes) ?? 15.6;
+  const bodyFontWeightRaw = (0, _figmaVariablesResolver.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__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+        label: badge,
+        modes: modes
+      });
+    }
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(badge, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const renderSlot = () => {
+    if (!children) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SavingsGoalSummary.default, {
+        modes: modes
+      });
+    }
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(children, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const renderFooter = () => {
+    if (footer === false || footer === null) return null;
+    if (footer === undefined) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Nudge.default, {
+        type: "inline-compact",
+        modes: {
+          AppearanceBrand: 'Neutral',
+          Context: 'Nudge&Alert',
+          ...modes
+        }
+      });
+    }
+    const processed = (0, _reactUtils.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__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+        modes: modes
+      });
+    }
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(divider, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const footerNode = renderFooter();
+  const showDivider = footerNode !== null && divider !== false && divider !== null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      width,
+      backgroundColor: background,
+      borderRadius: radius,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      overflow: 'hidden',
+      alignItems: 'stretch'
+    }, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: headerGap,
+        width: '100%'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          gap: textGap,
+          alignItems: 'flex-start'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: {
+            color: titleColor,
+            fontFamily: titleFontFamily,
+            fontSize: titleFontSize,
+            lineHeight: titleLineHeight,
+            fontWeight: titleFontWeight,
+            width: '100%'
+          },
+          children: title
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: {
+            color: bodyColor,
+            fontFamily: bodyFontFamily,
+            fontSize: bodyFontSize,
+            lineHeight: bodyLineHeight,
+            fontWeight: bodyFontWeight,
+            width: '100%'
+          },
+          children: subtitle
+        })]
+      }), renderBadge()]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: '100%',
+        backgroundColor: slotBackground,
+        gap: contentGap,
+        overflow: 'hidden',
+        alignItems: 'stretch'
+      },
+      children: renderSlot()
+    }), showDivider ? renderDivider() : null, footerNode]
+  });
+}
+var _default = exports.default = CardInsight;

package/lib/commonjs/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _CheckboxItem = _interopRequireDefault(require("../CheckboxItem/CheckboxItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 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 = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('checkboxGroup/gap', modes) ?? 12;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('checkboxGroup/padding/horizontal', modes) ?? 0;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('checkboxGroup/padding/vertical', modes) ?? 0;
+  const containerStyle = {
+    width: '100%',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap,
+    paddingHorizontal,
+    paddingVertical
+  };
+  const items = children ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxItem.default, {
+      modes: modes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxItem.default, {
+      modes: modes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxItem.default, {
+      modes: modes
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "list",
+    accessibilityLabel: accessibilityLabel,
+    children: items
+  });
+}
+var _default = exports.default = CheckboxGroup;

package/lib/commonjs/components/CheckboxItem/CheckboxItem.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Checkbox = _interopRequireDefault(require("../Checkbox/Checkbox"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * CheckboxItem composes a `Checkbox`, a label and an optional `endSlot` into a
+ * single horizontal pressable row. Pressing anywhere on the row (outside of the
+ * `endSlot`) toggles the checkbox, mirroring the typical native form pattern.
+ *
+ * Mirrors the Figma "Checkbox Item" component and uses the `checkboxItem/*`
+ * design tokens for typography and spacing.
+ *
+ * @component
+ * @param {CheckboxItemProps} props
+ *
+ * @example
+ * ```tsx
+ * const [checked, setChecked] = useState(false)
+ *
+ * <CheckboxItem
+ *   label="Fixed deposit • 0245"
+ *   checked={checked}
+ *   onValueChange={setChecked}
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+function CheckboxItem({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onValueChange,
+  disabled = false,
+  label = 'Fixed deposit • 0245',
+  endSlot,
+  endSlotWidth = 80,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel
+}) {
+  const isControlled = controlledChecked !== undefined;
+  const [internalChecked, setInternalChecked] = (0, _react.useState)(defaultChecked);
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+  const handleToggle = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    const next = !isChecked;
+    if (!isControlled) {
+      setInternalChecked(next);
+    }
+    onValueChange?.(next);
+  }, [disabled, isChecked, isControlled, onValueChange]);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/gap', modes) ?? 8;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/padding/horizontal', modes) ?? 0;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/padding/vertical', modes) ?? 0;
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/foreground', modes) ?? '#1a1c1f';
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/fontFamily', modes) ?? 'JioType Var';
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/fontSize', modes) ?? 14;
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/lineHeight', modes) ?? 19;
+  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/fontWeight', modes) ?? 400;
+  const labelFontWeight = String(labelFontWeightRaw);
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    width: '100%'
+  };
+  const resolvedLabelStyle = {
+    flex: 1,
+    minWidth: 0,
+    color: labelColor,
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight
+  };
+  const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    style: [containerStyle, style],
+    onPress: handleToggle,
+    disabled: disabled,
+    accessibilityRole: "checkbox",
+    accessibilityState: {
+      checked: isChecked,
+      disabled
+    },
+    accessibilityLabel: a11yLabel,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+      checked: isChecked,
+      disabled: disabled,
+      onValueChange: handleToggle,
+      modes: modes,
+      accessibilityLabel: a11yLabel
+    }), label != null && label !== false ? typeof label === 'string' || typeof label === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [resolvedLabelStyle, labelStyle],
+      selectable: false,
+      children: label
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        flex: 1,
+        minWidth: 0
+      },
+      children: label
+    }) : null, endSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: endSlotWidth,
+        flexShrink: 0,
+        alignItems: 'stretch'
+      },
+      children: (0, _reactUtils.cloneChildrenWithModes)(endSlot, modes)
+    }) : null]
+  });
+}
+var _default = exports.default = CheckboxItem;

package/lib/commonjs/components/CircularProgressBar/CircularProgressBar.js

@@ -43,11 +43,13 @@ function CircularProgressBar({
   value = 70,
   state = 'Inactive',
   valueLabel,
+  supportText,
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   trackStyle,
   progressStyle,
   valueStyle,
+  supportTextStyle,
   accessibilityLabel,
   ...rest
 }) {
@@ -58,6 +60,17 @@ function CircularProgressBar({
     ...globalModes,
     ...propModes
   };
+  // The Figma `circularProgressBar/track/color` variable aliases to the same
+  // chain as `progress/color`, so user-selected Brand modes collapse the
+  // track and progress to a single hue. The Figma source of truth always
+  // renders the track as a neutral gray, so we force Neutral/Medium when
+  // resolving the track color while keeping the user modes for everything
+  // else.
+  const trackModes = {
+    ...modes,
+    'AppearanceBrand': 'Neutral',
+    'Emphasis': 'Medium'
+  };
   const isActive = state === true || state === 'Active';
   const normalizedValue = clamp(value, 0, 100);
   const size = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/size', modes), 60);
@@ -65,15 +78,18 @@ function CircularProgressBar({
   const radius = Math.max(0, (size - strokeWidth) / 2);
   const center = size / 2;
   const circumference = 2 * Math.PI * radius;
-  const trackColor = getStrokeColor(trackStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/track/color', modes) || '#ebebed');
+  const trackColor = getStrokeColor(trackStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/track/color', trackModes) || '#ebebed');
   const progressColor = getStrokeColor(progressStyle, (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/progress/color', modes) || '#25ab21');
   const iconColor = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/icon/color', modes) || '#666666';
   const iconSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/icon/size', modes), 24);
   const foreground = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/foreground', modes) || '#0d0d0f';
-  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/fontSize', modes), 18);
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/value/fontSize', modes), 18);
   const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/fontFamily', modes) || 'JioType Var';
-  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/lineHeight', modes), 21);
-  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/fontWeight', modes), '700');
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/value/lineHeight', modes), 21);
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/value/fontWeight', modes), '700');
+  const supportFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/supportText/fontSize', modes), 11);
+  const supportLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/supportText/lineHeight', modes), 13);
+  const supportFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('circularProgressBar/supportText/fontWeight', modes), '500');
   const computedContainerStyle = {
     alignItems: 'center',
     height: size,
@@ -81,13 +97,34 @@ function CircularProgressBar({
     position: 'relative',
     width: size
   };
+
+  // The text stack (support text + value) is centered inside the ring using
+  // an absolutely-positioned column. Keeping the wrapper absolute (rather
+  // than the individual texts, as in earlier versions) lets multi-line stacks
+  // render correctly without sub-pixel misalignment.
+  const textStackStyle = {
+    alignItems: 'center',
+    justifyContent: 'center',
+    left: 0,
+    position: 'absolute',
+    right: 0,
+    top: 0,
+    bottom: 0
+  };
   const computedValueStyle = {
     color: foreground,
     fontFamily,
     fontSize,
     fontWeight,
     lineHeight,
-    position: 'absolute',
+    textAlign: 'center'
+  };
+  const computedSupportTextStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize: supportFontSize,
+    fontWeight: supportFontWeight,
+    lineHeight: supportLineHeight,
     textAlign: 'center'
   };
   const iconStyle = {
@@ -96,7 +133,8 @@ function CircularProgressBar({
     top: (size - iconSize) / 2
   };
   const displayValue = valueLabel ?? String(Math.round(normalizedValue));
-  const defaultAccessibilityLabel = accessibilityLabel ?? (isActive ? `${displayValue} out of 100` : 'Inactive progress');
+  const hasSupportText = typeof supportText === 'string' && supportText.length > 0;
+  const defaultAccessibilityLabel = accessibilityLabel ?? (isActive ? hasSupportText ? `${supportText}, ${displayValue} out of 100` : `${displayValue} out of 100` : 'Inactive progress');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     accessibilityRole: "progressbar",
     accessibilityLabel: defaultAccessibilityLabel,
@@ -132,9 +170,18 @@ function CircularProgressBar({
         originX: center,
         originY: center
       }) : null]
-    }), isActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [computedValueStyle, valueStyle],
-      children: displayValue
+    }), isActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: textStackStyle,
+      pointerEvents: "none",
+      children: [hasSupportText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [computedSupportTextStyle, supportTextStyle],
+        numberOfLines: 1,
+        children: supportText
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [computedValueStyle, valueStyle],
+        numberOfLines: 1,
+        children: displayValue
+      })]
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconMinus.IconMinus, {
       width: iconSize,
       height: iconSize,