jfs-components 0.0.71 → 0.0.73

package/lib/module/components/SavingsGoalSummary/SavingsGoalSummary.js

@@ -0,0 +1,175 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { formatIndianNumber } from '../../utils/number-utils';
+import Title from '../Title/Title';
+import LinearProgress from '../LinearProgress/LinearProgress';
+import MetricLegendItem from '../MetricLegendItem/MetricLegendItem';
+
+/**
+ * A single row in the savings-goal legend (current vs. target).
+ *
+ * `value` is a **numeric amount** (e.g. `240000`). It serves two purposes:
+ *
+ * 1. Display: rendered on the right side of the row using Indian numeric
+ *    notation via {@link formatIndianNumber} and prefixed with `currency`
+ *    (e.g. `240000` → `"₹2.4L"`).
+ * 2. Progress derivation: the bar fills to `current.value / target.value`
+ *    automatically. There is no separate `progress` prop.
+ *
+ * Pass `value: undefined` to render a label-only row (the underlying
+ * {@link MetricLegendItem} hides the right slot in that case).
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_LEGEND_PADDING = 8;
+const DEFAULT_MODES = Object.freeze({
+  'LinearProgress Size': 'L'
+});
+const DEFAULT_CURRENT = {
+  label: 'Current (4 months)',
+  value: 240000
+};
+const DEFAULT_TARGET = {
+  label: 'Recommended (8 months)',
+  value: 480000
+};
+
+/**
+ * `SavingsGoalSummary` visualises progress toward a savings goal as:
+ *
+ * 1. A `Title` showing the percentage — **computed automatically** from
+ *    `current.value / target.value`. There is no `progress` prop; the
+ *    component owns the calculation so the title, bar and legend are always
+ *    in sync.
+ * 2. A `LinearProgress` bar driven by the same derived ratio.
+ * 3. A two-row legend comparing **current** vs. **target**, where each numeric
+ *    `value` is auto-formatted with Indian notation
+ *    ({@link formatIndianNumber}) and prefixed with the `currency` symbol.
+ *
+ * The component is intentionally narrow in scope — it is the body of a savings
+ * insight card. Wrap it in `CardInsight` (or any container of your choice) to
+ * add a heading, badge or footer.
+ *
+ * @component
+ * @param {SavingsGoalSummaryProps} props
+ */
+function SavingsGoalSummary({
+  currency = '₹',
+  current = DEFAULT_CURRENT,
+  target = DEFAULT_TARGET,
+  children,
+  modes = EMPTY_MODES,
+  style,
+  titleStyle,
+  legendStyle
+}) {
+  // Merge caller modes on top of the defaults so callers can override
+  // (e.g. switch to `LinearProgress Size: M`) while still receiving the
+  // sensible component-level default.
+  const mergedModes = useMemo(() => modes === EMPTY_MODES ? DEFAULT_MODES : {
+    ...DEFAULT_MODES,
+    ...modes
+  }, [modes]);
+
+  // Resolve the `LinearProgress` track / indicator colours so the legend
+  // dots automatically stay in sync with the progress bar without callers
+  // needing to plumb through `indicatorColor`.
+  //
+  // The token names AND the merge strategy must match `LinearProgress.tsx`
+  // exactly, otherwise the dot colours can drift from the bar:
+  //   • Token aliases live in the `Emphasis` collection (modes High|Medium|Low),
+  //     NOT `Emphasis / DataViz` — passing the wrong mode key would collapse
+  //     both dots to the same default-mode colour.
+  //   • Defaults are placed *before* `mergedModes` is spread, so callers can
+  //     still override `Emphasis` via the `modes` prop (matches
+  //     `LinearProgress`'s philosophy).
+  const indicatorColorFromTokens = getVariableByName('linearProgress/indicator/background', {
+    Emphasis: 'High',
+    ...mergedModes
+  }) ?? '#5d00b5';
+  const trackColorFromTokens = getVariableByName('linearProgress/track/background', {
+    Emphasis: 'Low',
+    ...mergedModes
+  }) ?? '#ede7ff';
+
+  // Single source of truth for the bar fill, the title percentage and the
+  // formatted legend amounts. There is intentionally no consumer-facing
+  // `progress` prop — the only way to change the bar is to change the
+  // numeric `current` / `target` values. This keeps the three views (title,
+  // bar, legend) impossible to desynchronise.
+  const resolvedProgress = useMemo(() => {
+    const cv = current?.value;
+    const tv = target?.value;
+    if (typeof cv !== 'number' || typeof tv !== 'number' || tv <= 0) {
+      return 0;
+    }
+    return Math.min(Math.max(cv / tv, 0), 1);
+  }, [current, target]);
+  const percentageLabel = `${Math.round(resolvedProgress * 100)}%`;
+  const gap = getVariableByName('savingsGoalSummary/gap', mergedModes) ?? 23;
+  const legendGap = getVariableByName('savingsGoalSummary/legend/gap', mergedModes) ?? 16;
+  const customLegend = children ? cloneChildrenWithModes(children, mergedModes) : null;
+  const defaultLegend = !customLegend && (current || target) ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [current && /*#__PURE__*/_jsx(MetricLegendItem, {
+      modes: mergedModes,
+      label: current.label,
+      value: formatLegendValue(current.value, currency),
+      indicatorColor: current.indicatorColor ?? indicatorColorFromTokens
+    }), target && /*#__PURE__*/_jsx(MetricLegendItem, {
+      modes: mergedModes,
+      label: target.label,
+      value: formatLegendValue(target.value, currency),
+      indicatorColor: target.indicatorColor ?? trackColorFromTokens
+    })]
+  }) : null;
+  const legendNode = customLegend ?? defaultLegend;
+  const showLegend = legendNode != null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      width: '100%',
+      gap,
+      alignItems: 'stretch'
+    }, style],
+    accessibilityLabel: `Savings goal progress, ${percentageLabel}`,
+    children: [/*#__PURE__*/_jsx(Title, {
+      title: percentageLabel,
+      modes: mergedModes,
+      style: TITLE_CONTAINER_STYLE,
+      textStyle: titleStyle
+    }), /*#__PURE__*/_jsx(LinearProgress, {
+      value: resolvedProgress,
+      modes: mergedModes
+    }), showLegend && /*#__PURE__*/_jsx(View, {
+      style: [{
+        width: '100%',
+        padding: DEFAULT_LEGEND_PADDING,
+        gap: legendGap,
+        alignItems: 'stretch'
+      }, legendStyle],
+      children: legendNode
+    })]
+  });
+}
+
+/**
+ * Format a single legend `value` for display. Returns `undefined` when the
+ * value is missing so the underlying {@link MetricLegendItem} hides the right
+ * slot (matches the Figma `data` toggle = off).
+ */
+function formatLegendValue(value, currency) {
+  if (typeof value !== 'number') return undefined;
+  return formatIndianNumber(value, {
+    prefix: currency
+  });
+}
+
+// Neutralise the `Title` component's default page-level padding so it sits
+// flush inside the summary card (the parent container owns spacing via `gap`).
+const TITLE_CONTAINER_STYLE = {
+  paddingHorizontal: 0,
+  paddingVertical: 0
+};
+export default SavingsGoalSummary;

package/lib/module/components/SegmentedTrack/SegmentedTrack.js

@@ -0,0 +1,166 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
+
+/**
+ * Per-segment data definition for the data-driven `segments` prop.
+ *
+ * Use `value` for proportional widths (segments share width by their value
+ * relative to the sum). When `value` is omitted, segments share the row
+ * equally (`flex: 1`).
+ *
+ * Use `modes` to override the per-segment design-token mode — typically the
+ * `Appearance / DataViz` mode for color theming, or `Emphasis / DataViz` to
+ * change the emphasis level. The parent already injects per-index defaults
+ * (segment 0 = High, 1 = Medium, 2 = Low, then cycling) so callers only need
+ * to pass `modes` when they want a different result.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Default per-index Emphasis modes applied to every segment when the caller
+ * does not provide its own `Emphasis / DataViz` override. Cycles for >3
+ * segments so additional segments fall back to the same High/Medium/Low
+ * rotation.
+ */
+const DEFAULT_EMPHASIS_CYCLE = ['High', 'Medium', 'Low'];
+const DEFAULT_SEGMENTS = [{}, {}, {}];
+
+/**
+ * Compute the default `Emphasis / DataViz` mode for a segment at `index`.
+ * Cycles through {@link DEFAULT_EMPHASIS_CYCLE} so any number of segments
+ * gets a sensible default.
+ */
+function defaultEmphasisFor(index) {
+  return DEFAULT_EMPHASIS_CYCLE[index % DEFAULT_EMPHASIS_CYCLE.length];
+}
+function SegmentedTrackSegment({
+  value = 1,
+  color,
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const resolvedColor = color ?? getVariableByName('dataViz/bg', modes) ?? '#5d00b5';
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityLabel: accessibilityLabel,
+    style: [{
+      flex: value,
+      minWidth: 1,
+      height: '100%',
+      backgroundColor: resolvedColor
+    }, style]
+  });
+}
+
+/**
+ * `SegmentedTrack` renders a horizontal pill-shaped row of categorical
+ * segments. Use it for distribution / share-of breakdowns where each
+ * segment is a sibling category (not a directional or temporal progress).
+ *
+ * Defaults to three equal segments tinted at descending Emphasis levels
+ * (`High`, `Medium`, `Low`) so the shape reads as a single concept split
+ * three ways. Consumers can either pass the data-driven `segments` prop or
+ * a fully custom `children` slot of `SegmentedTrack.Segment`s.
+ *
+ * Each segment resolves its color through the `dataViz/bg` token, which
+ * cascades through `Emphasis / DataViz` and `Appearance / DataViz`. Pass
+ * `modes` per segment (or override `Appearance / DataViz` at the parent
+ * level via `modes`) to retheme the row without touching colors directly.
+ *
+ * @component
+ * @param {SegmentedTrackProps} props
+ */
+function SegmentedTrack({
+  segments,
+  children,
+  modes: propModes = EMPTY_MODES,
+  style,
+  segmentStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const trackHeight = getVariableByName('segmentedTrack/height', modes) ?? 24;
+  const trackRadius = getVariableByName('segmentedTrack/radius', modes) ?? 999;
+  const renderedSegments = renderSegments({
+    segments,
+    children,
+    modes,
+    segmentStyle
+  });
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityRole: "image",
+    accessibilityLabel: accessibilityLabel,
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'stretch',
+      height: trackHeight,
+      borderRadius: trackRadius,
+      overflow: 'hidden',
+      width: '100%',
+      backgroundColor: 'transparent'
+    }, style],
+    children: renderedSegments
+  });
+}
+
+/**
+ * Build the slot children. When the caller passes JSX `children`, every
+ * top-level element is treated as one segment and receives merged `modes`
+ * (parent + per-index Emphasis default + the child's own `modes` taking
+ * priority). Otherwise the data-driven `segments` array is rendered.
+ */
+function renderSegments({
+  segments,
+  children,
+  modes,
+  segmentStyle
+}) {
+  if (children !== undefined && children !== null) {
+    const flat = flattenChildren(children);
+    return flat.map((child, index) => {
+      if (! /*#__PURE__*/React.isValidElement(child)) {
+        return child;
+      }
+      const childProps = child.props ?? {};
+      const childModes = childProps.modes;
+      const mergedModes = {
+        ...modes,
+        'Emphasis / DataViz': defaultEmphasisFor(index),
+        ...(childModes || {})
+      };
+      return /*#__PURE__*/React.cloneElement(child, {
+        ...childProps,
+        modes: mergedModes,
+        key: child.key ?? `segment-${index}`
+      });
+    });
+  }
+  const list = segments && segments.length > 0 ? segments : DEFAULT_SEGMENTS;
+  return list.map((segment, index) => {
+    const segmentModes = {
+      ...modes,
+      'Emphasis / DataViz': defaultEmphasisFor(index),
+      ...(segment.modes || {})
+    };
+    return /*#__PURE__*/_jsx(SegmentedTrackSegment, {
+      value: segment.value ?? 1,
+      color: segment.color,
+      modes: segmentModes,
+      style: [segmentStyle, segment.style],
+      accessibilityLabel: segment.accessibilityLabel
+    }, segment.key ?? `segment-${index}`);
+  });
+}
+SegmentedTrack.Segment = SegmentedTrackSegment;
+export { SegmentedTrackSegment };
+export default SegmentedTrack;

package/lib/module/components/StatGroup/StatGroup.js

@@ -0,0 +1,123 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
+import StatItem from '../StatItem/StatItem';
+import Divider from '../Divider/Divider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const DEFAULT_ITEMS = [{
+  label: 'Updates',
+  value: 'Daily'
+}, {
+  label: 'Data range',
+  value: '24 months'
+}, {
+  label: 'Validity',
+  value: '24 months'
+}, {
+  label: 'Stored for',
+  value: '1 month'
+}];
+
+/**
+ * StatGroup renders a card-style container holding a horizontal row of
+ * `StatItem`s separated by vertical dividers. It is typically used to surface
+ * 3–5 short metrics (e.g. validity, data range, storage) at a glance.
+ *
+ * Pass `items` for the simple data-driven case, or use the `children` slot
+ * for full control over the row contents (the component still auto-inserts
+ * vertical dividers between top-level children).
+ *
+ * @component
+ * @param {StatGroupProps} props
+ */
+function StatGroup({
+  items,
+  children,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const background = getVariableByName('statGroup/background', modes) ?? '#ffffff';
+  const strokeColor = getVariableByName('statGroup/stroke/color', modes) ?? '#ebebed';
+  const strokeSize = getVariableByName('statGroup/stroke/size', modes) ?? 1;
+  const radius = getVariableByName('statGroup/radius', modes) ?? 12;
+  const paddingTop = getVariableByName('statGroup/padding/top', modes) ?? 16;
+  const paddingRight = getVariableByName('statGroup/padding/right', modes) ?? 0;
+  const paddingBottom = getVariableByName('statGroup/padding/bottom', modes) ?? 12;
+  const paddingLeft = getVariableByName('statGroup/padding/left', modes) ?? 0;
+  const containerStyle = {
+    backgroundColor: background,
+    borderColor: strokeColor,
+    borderWidth: strokeSize,
+    borderStyle: 'solid',
+    borderRadius: radius,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    overflow: 'hidden'
+  };
+  const slotChildren = renderSlotChildren({
+    items,
+    children,
+    modes
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "summary",
+    children: /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'stretch',
+        width: '100%'
+      },
+      children: slotChildren
+    })
+  });
+}
+
+/**
+ * Build the row of items: render either the supplied children or the
+ * `items` array, wrap each entry so it grows equally, and inject a vertical
+ * `Divider` between siblings.
+ */
+function renderSlotChildren({
+  items,
+  children,
+  modes
+}) {
+  let nodes;
+  if (children !== undefined && children !== null) {
+    const cloned = cloneChildrenWithModes(children, modes);
+    nodes = flattenChildren(cloned);
+  } else {
+    const list = items && items.length > 0 ? items : DEFAULT_ITEMS;
+    nodes = list.map((item, index) => /*#__PURE__*/_jsx(StatItem, {
+      label: item.label,
+      value: item.value,
+      labelPosition: "Bottom",
+      modes: modes
+    }, item.key ?? `${item.label ?? 'item'}-${index}`));
+  }
+  const result = [];
+  nodes.forEach((node, index) => {
+    if (index > 0) {
+      result.push(/*#__PURE__*/_jsx(Divider, {
+        direction: "vertical",
+        modes: modes
+      }, `divider-${index}`));
+    }
+    result.push(/*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1,
+        minWidth: 0,
+        alignSelf: 'center'
+      },
+      children: node
+    }, `slot-${index}`));
+  });
+  return result;
+}
+export default StatGroup;

package/lib/module/components/StatItem/StatItem.js

@@ -4,10 +4,14 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * StatItem displays a label/value pair with the value in a large, bold style.
- * Useful for metrics, product stats, or KPI callouts.
+ * StatItem displays a label/value pair, useful for product stats, metrics
+ * or KPI callouts.
+ *
+ * Supports two layouts via the `labelPosition` variant:
+ *  - `'Top'`    — Small label above a large prominent value (default).
+ *  - `'Bottom'` — Value above a smaller label, content centered.
  *
  * @component
  * @param {StatItemProps} props
@@ -15,43 +19,69 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function StatItem({
   label = 'Purity verified by NABL',
   value = '99.99%',
+  labelPosition = 'Top',
   modes = EMPTY_MODES,
-  style
+  style,
+  labelStyle,
+  valueStyle
 }) {
-  const gap = getVariableByName('statItem/gap', modes) ?? 2;
-  const labelForeground = getVariableByName('statItem/label/foreground', modes) ?? '#1a1c1f';
+  const isBottom = labelPosition === 'Bottom';
+
+  // The Figma `Bottom` variant overrides token values locally inside the
+  // component (it is not exposed in the design-tokens JSON), so the resolved
+  // token values reflect only the `Top` variant. For the `Bottom` variant we
+  // therefore use hardcoded literals that match the Figma design, while still
+  // allowing the resolver to surface any future mode-based overrides for the
+  // `Top` variant.
+  const gap = isBottom ? 6 : getVariableByName('statItem/gap', modes) ?? 2;
+  const labelForeground = isBottom ? '#24262b' : getVariableByName('statItem/label/foreground', modes) ?? '#1a1c1f';
   const labelFontFamily = getVariableByName('statItem/label/fontFamily', modes) ?? 'JioType Var';
-  const labelFontSize = getVariableByName('statItem/label/fontSize', modes) ?? 12;
-  const labelFontWeight = getVariableByName('statItem/label/fontWeight', modes) ?? '500';
-  const labelLineHeight = getVariableByName('statItem/label/lineHeight', modes) ?? 16;
-  const valueForeground = getVariableByName('statItem/value/foreground', modes) ?? '#0d0d0f';
+  const labelFontSize = isBottom ? 10 : getVariableByName('statItem/label/fontSize', modes) ?? 12;
+  const labelFontWeightRaw = isBottom ? 400 : getVariableByName('statItem/label/fontWeight', modes) ?? 500;
+  const labelFontWeight = String(labelFontWeightRaw);
+  const labelLineHeight = isBottom ? 13 : getVariableByName('statItem/label/lineHeight', modes) ?? 16;
+  const valueForeground = isBottom ? '#141414' : getVariableByName('statItem/value/foreground', modes) ?? '#0d0d0f';
   const valueFontFamily = getVariableByName('statItem/value/fontFamily', modes) ?? 'JioType Var';
-  const valueFontSize = getVariableByName('statItem/value/fontSize', modes) ?? 26;
-  const valueFontWeight = getVariableByName('statItem/value/fontWeight', modes) ?? '900';
-  const valueLineHeight = getVariableByName('statItem/value/lineHeight', modes) ?? 26;
-  return /*#__PURE__*/_jsxs(View, {
-    style: [{
-      gap: gap
-    }, style],
-    children: [/*#__PURE__*/_jsx(Text, {
-      style: {
-        color: labelForeground,
-        fontFamily: labelFontFamily,
-        fontSize: labelFontSize,
-        fontWeight: String(labelFontWeight),
-        lineHeight: labelLineHeight
-      },
-      children: label
-    }), /*#__PURE__*/_jsx(Text, {
-      style: {
-        color: valueForeground,
-        fontFamily: valueFontFamily,
-        fontSize: valueFontSize,
-        fontWeight: String(valueFontWeight),
-        lineHeight: valueLineHeight
-      },
-      children: value
-    })]
+  const valueFontSize = isBottom ? 12 : getVariableByName('statItem/value/fontSize', modes) ?? 26;
+  const valueFontWeightRaw = isBottom ? 500 : getVariableByName('statItem/value/fontWeight', modes) ?? 900;
+  const valueFontWeight = String(valueFontWeightRaw);
+  const valueLineHeight = isBottom ? 16 : getVariableByName('statItem/value/lineHeight', modes) ?? 26;
+  const containerStyle = {
+    gap,
+    alignItems: isBottom ? 'center' : 'flex-start',
+    justifyContent: isBottom ? 'center' : 'flex-start'
+  };
+  const labelTextStyle = {
+    color: labelForeground,
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    fontWeight: labelFontWeight,
+    lineHeight: labelLineHeight,
+    textAlign: isBottom ? 'center' : 'left'
+  };
+  const valueTextStyle = {
+    color: valueForeground,
+    fontFamily: valueFontFamily,
+    fontSize: valueFontSize,
+    fontWeight: valueFontWeight,
+    lineHeight: valueLineHeight,
+    textAlign: isBottom ? 'center' : 'left'
+  };
+  const labelNode = /*#__PURE__*/_jsx(Text, {
+    style: [labelTextStyle, labelStyle],
+    children: label
+  });
+  const valueNode = /*#__PURE__*/_jsx(Text, {
+    style: [valueTextStyle, valueStyle],
+    children: value
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    children: isBottom ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [valueNode, labelNode]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [labelNode, valueNode]
+    })
   });
 }
 export default StatItem;