jfs-components 0.0.84 → 0.0.86

package/CHANGELOG.md

@@ -4,6 +4,42 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.0.86] - 2026-06-04
+
+- Added `AllocationComparisonChart` — vertical pill bars comparing current vs recommended allocation with optional baseline overlay and dashed marker.
+- `FullscreenModal` — removed parallax; hero media scrolls with content and height follows media aspect ratio.
+
+---
+
+## [0.0.85] - 2026-06-03
+
+- Added `AreaLineChart` — multi-series area/line chart with grid, axes, legend, goal pin, and interactive tooltip; exports `useChart` and compound `ChartGrid` / `ChartXAxis` / `ChartYAxis` / `GoalPin` parts.
+- Added `BubbleChart` — packed bubble cluster layout with sqrt-scaled sizes and collision-aware label placement.
+- Added `ClusterBubble` — single data-viz bubble with inside/outside/auto label placement.
+- `AppBar` — SubPage middle slot uses full-height flex overlay (fixes Android vertical misalignment).
+- `Attached` — token-driven outside border ring on the badge slot.
+- `MetricLegendItem` — new `indicatorShape` prop (`dot` | `line`).
+
+---
+
+## [0.0.84] - 2026-06-02
+
+- Added `Spinner` — animated three-segment loading indicator with gravity-based motion and reduced-motion support.
+- Added 12 icons: `ArrowUp`/`ArrowDown`, chevron-in-circle variants, OS nav icons, `SignIn`/`SignOut`.
+- `AppBar` — SubPage middle slot absolutely centered; new `middleSlotWidth` prop.
+- `Attached` — `badgeSize` / `badgeRadius` to enforce a fixed badge box and clip content.
+- `Checkbox` — 44 pt touch target via `hitSlop` instead of oversized visual box.
+- `Drawer` / `FullscreenModal` — `keyboardShouldPersistTaps="handled"` on scroll content.
+- `DropdownInput` — Android popup positioning fix; `menuOffset` defaults to `formField/gap`.
+- `ExpandableCheckbox` — single-line label/checkbox vertical alignment on Android.
+- `FormField` / `MessageField` — input wrapper reverted to `View`.
+- `TextInput` — native uses `View` wrapper for reliable Android focus; web keeps Pressable tap-to-focus.
+- `PaymentFeedback` — `AppearanceSystem` via `modes` drives default capsule color.
+- `PlanComparisonCard` — 1.8fr/1fr flex grid; removed `labelColumnFlex`.
+- `ListItem` — `leading` no longer defaults to `IconCapsule`; omit/`null` renders nothing.
+
+---
+
 ## [0.0.79] - 2026-05-30
 
 - Added `Attached` — positions a badge over main content at nine anchor points (corners, edges, center).

package/lib/commonjs/components/AllocationComparisonChart/AllocationComparisonChart.js

@@ -0,0 +1,299 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _MetricLegendItem = _interopRequireDefault(require("../MetricLegendItem/MetricLegendItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * One vertical pill in the {@link AllocationComparisonChartProps.data} array.
+ *
+ * Each segment renders a single bar whose **height encodes `value`** (the
+ * "current" reading) and, when supplied, a **`baseline`** overlay drawn from
+ * the bottom up with a dashed marker line (the "recommended" reading). Both
+ * are measured against the same shared scale so bars and baselines are
+ * directly comparable across segments.
+ */
+
+const DEFAULT_DATA = [{
+  label: 'Small & Mid',
+  value: 65,
+  baseline: 35
+}, {
+  label: 'Large',
+  value: 25
+}, {
+  label: 'Others',
+  value: 10
+}];
+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;
+};
+const isShown = node => node !== undefined && node !== null && node !== false;
+/**
+ * Internal: one vertical pill column (the Figma "Segment Indicator"). Not
+ * exported — the ergonomic public unit is the chart driven by `data`. The
+ * `segmentIndicator/*` token names are mirrored here so design ↔ code token
+ * alignment is preserved.
+ */
+function SegmentBar({
+  segment,
+  barHeightPx,
+  baselineHeightPx,
+  baselineLabel,
+  showMarker,
+  theme
+}) {
+  const {
+    barWidth,
+    pillRadius,
+    gap,
+    currentColor,
+    baselineColor,
+    lineColor,
+    lineSize,
+    labelStyle
+  } = theme;
+  const fillColor = segment.color ?? currentColor;
+  const overlayColor = segment.baselineColor ?? baselineColor;
+  const showValueLabel = isShown(segment.valueLabel);
+  const hasBaseline = baselineHeightPx !== null && baselineHeightPx > 0;
+  const overlayHeight = hasBaseline ? Math.min(baselineHeightPx, barHeightPx) : 0;
+  const overlayRadius = Math.min(pillRadius, barWidth / 2, overlayHeight / 2);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      flex: 1,
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap
+    },
+    accessibilityLabel: segment.accessibilityLabel,
+    children: [showValueLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      numberOfLines: 1,
+      style: labelStyle,
+      children: segment.valueLabel
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: barWidth,
+        height: Math.max(barHeightPx, 1),
+        borderRadius: pillRadius,
+        backgroundColor: fillColor,
+        position: 'relative'
+      },
+      children: hasBaseline ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            height: overlayHeight,
+            backgroundColor: overlayColor,
+            borderBottomLeftRadius: overlayRadius,
+            borderBottomRightRadius: overlayRadius
+          }
+        }), showMarker ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            position: 'absolute',
+            left: 0,
+            bottom: overlayHeight,
+            height: 0,
+            flexDirection: 'row',
+            alignItems: 'center'
+          },
+          pointerEvents: "none",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+            width: barWidth,
+            height: Math.max(lineSize, 1),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Line, {
+              x1: 0,
+              y1: Math.max(lineSize, 1) / 2,
+              x2: barWidth,
+              y2: Math.max(lineSize, 1) / 2,
+              stroke: lineColor,
+              strokeWidth: lineSize,
+              strokeDasharray: "2 2"
+            })
+          }), isShown(baselineLabel) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+            numberOfLines: 1,
+            style: [labelStyle, {
+              marginLeft: 6
+            }],
+            children: baselineLabel
+          }) : null]
+        }) : null]
+      }) : null
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      numberOfLines: 1,
+      style: labelStyle,
+      children: segment.label
+    })]
+  });
+}
+
+/**
+ * `AllocationComparisonChart` plots a row of vertical pill bars that compare a
+ * **current** reading (each bar's height) against an optional **recommended**
+ * baseline (a filled overlay drawn from the bottom up, marked with a dashed
+ * line). Every bar and baseline shares a single scale, so heights are directly
+ * comparable across segments — no axes required.
+ *
+ * The chart is driven entirely by the `data` array: each entry pairs a
+ * `value`, an optional `baseline` and its `label`, so a bar can never drift
+ * out of sync with its caption or its baseline marker.
+ *
+ * Colors, fonts, spacing and the pill radius resolve from the Figma
+ * `segmentIndicator/*`, `metricLegendItem/*` and `allocationComparisonChart/*`
+ * tokens via the `modes` prop.
+ *
+ * @component
+ */
+function AllocationComparisonChart({
+  data = DEFAULT_DATA,
+  max,
+  height = 154,
+  barWidth,
+  showLegend = true,
+  valueLegendLabel = 'Current',
+  baselineLegendLabel = 'Recommended',
+  formatValue = value => `${value}%`,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  chartStyle,
+  legendStyle,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = _react.default.useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const trackWidth = toNumber((0, _figmaVariablesResolver.getVariableByName)('segmentIndicator/track/width', modes), 28);
+  const resolvedBarWidth = barWidth ?? trackWidth;
+  const radiusToken = toNumber((0, _figmaVariablesResolver.getVariableByName)('segmentIndicator/indicator/radius', modes), 99999);
+  const pillRadius = Math.min(radiusToken, resolvedBarWidth / 2);
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('segmentIndicator/gap', modes), 4);
+  const chartGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('allocationComparisonChart/gap', modes), 8);
+  const currentColor = (0, _figmaVariablesResolver.getVariableByName)('segmentIndicator/indicator/background', modes) ?? '#5d00b5';
+  const baselineColor = (0, _figmaVariablesResolver.getVariableByName)('segmentIndicator/indicator/foreground', modes) ?? '#b84fbd';
+  const lineColor = (0, _figmaVariablesResolver.getVariableByName)('segmentIndicator/indicator/line/color', modes) ?? '#ffffff';
+  const lineSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('segmentIndicator/indicator/line/size', modes), 1);
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('segmentIndicator/foreground', modes) ?? '#0c0d10';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('segmentIndicator/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('segmentIndicator/fontSize', modes), 12);
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('segmentIndicator/lineHeight', modes), 12);
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('segmentIndicator/fontWeight', modes), '400');
+  const labelStyle = {
+    color: foreground,
+    fontFamily,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    textAlign: 'center'
+  };
+  const computedMax = max ?? data.reduce((acc, seg) => Math.max(acc, seg.value, seg.baseline ?? 0), 0);
+  const safeMax = computedMax > 0 ? computedMax : 1;
+  const firstBaselineIndex = data.findIndex(seg => typeof seg.baseline === 'number');
+  const hasAnyBaseline = firstBaselineIndex !== -1;
+  const theme = {
+    barWidth: resolvedBarWidth,
+    pillRadius,
+    gap,
+    currentColor,
+    baselineColor,
+    lineColor,
+    lineSize,
+    labelStyle
+  };
+  const defaultAccessibilityLabel = accessibilityLabel ?? `Allocation comparison of ${data.length} segment${data.length === 1 ? '' : 's'}: ` + data.map(seg => {
+    const label = typeof seg.label === 'string' ? seg.label : 'segment';
+    const base = typeof seg.baseline === 'number' ? `, recommended ${seg.baseline}` : '';
+    return `${label} ${seg.value}${base}`;
+  }).join('; ');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      width: '100%'
+    }, style],
+    accessibilityLabel: defaultAccessibilityLabel,
+    children: [showLegend ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        marginBottom: chartGap
+      }, legendStyle],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricLegendItem.default, {
+        label: valueLegendLabel,
+        indicatorColor: currentColor,
+        modes: modes,
+        style: {
+          flexGrow: 0,
+          flexShrink: 1
+        }
+      }), hasAnyBaseline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_MetricLegendItem.default, {
+        label: baselineLegendLabel,
+        indicatorColor: baselineColor,
+        modes: modes,
+        style: {
+          flexGrow: 0,
+          flexShrink: 1
+        }
+      }) : null]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      accessibilityRole: "image",
+      style: [{
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        gap: 8,
+        width: '100%'
+      }, chartStyle],
+      children: data.map((segment, index) => {
+        const ratio = Math.max(0, Math.min(1, segment.value / safeMax));
+        const barHeightPx = Math.max(0, height * ratio);
+        const baselineHeightPx = typeof segment.baseline === 'number' ? Math.max(0, Math.min(1, segment.baseline / safeMax)) * height : null;
+        const baselineLabel = segment.baselineLabel === undefined ? typeof segment.baseline === 'number' ? formatValue(segment.baseline) : undefined : segment.baselineLabel;
+        const resolvedSegment = {
+          ...segment,
+          valueLabel: segment.valueLabel === undefined ? formatValue(segment.value) : segment.valueLabel
+        };
+        const showMarker = segment.showMarker ?? index === firstBaselineIndex;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(SegmentBar, {
+          segment: resolvedSegment,
+          barHeightPx: barHeightPx,
+          baselineHeightPx: baselineHeightPx,
+          baselineLabel: baselineLabel,
+          showMarker: showMarker,
+          theme: theme
+        }, segment.key ?? `segment-${index}`);
+      })
+    })]
+  });
+}
+var _default = exports.default = AllocationComparisonChart;

package/lib/commonjs/components/AppBar/AppBar.js

@@ -139,21 +139,31 @@ function AppBar({
     justifyContent: hasInFlowMiddle ? 'flex-start' : 'space-between'
   };
 
-  // Absolutely-centered middle box for SubPage, mirroring the Figma geometry.
-  // `left/top: 50%` + a negative translate keeps it centered regardless of the
-  // bar width, while the fixed width clips overly-wide content (overflow:
-  // hidden) instead of letting it bleed under the leading/actions slots.
-  const subPageMiddleStyle = {
+  // Absolutely-positioned overlay for the SubPage middle slot. Instead of
+  // centering a fixed-height box with `top/left: 50%` + transform (which on
+  // Android resolves the percentage against an intermediate, content-driven
+  // parent height and lands a few px too high), the overlay STRETCHES to fill
+  // the whole bar (`top/bottom/left/right: 0`) and centers its content with
+  // flexbox. This uses the exact same full-height vertical reference as the
+  // leading/actions row (`alignItems: 'center'`), so the middle content always
+  // sits on the same line as the back arrow and end slot on every platform.
+  const subPageMiddleOverlayStyle = {
     position: 'absolute',
-    top: '50%',
-    left: '50%',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
+  // Fixed-width clipping box (mirrors the Figma "slot wrap" geometry): keeps the
+  // middle content from bleeding under the leading/actions slots while staying
+  // centered within the overlay above.
+  const subPageMiddleBoxStyle = {
     width: middleSlotWidth,
     height: SUBPAGE_MIDDLE_HEIGHT,
-    transform: [{
-      translateX: -middleSlotWidth / 2
-    }, {
-      translateY: -SUBPAGE_MIDDLE_HEIGHT / 2
-    }],
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
@@ -188,19 +198,23 @@ function AppBar({
       style: actionsStyle,
       children: processedActions
     }), isSub && processedMiddle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: subPageMiddleStyle,
+      style: subPageMiddleOverlayStyle,
       pointerEvents: "box-none",
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          flex: 1,
-          minWidth: 1,
-          height: '100%',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'center'
-        },
+        style: subPageMiddleBoxStyle,
         pointerEvents: "box-none",
-        children: processedMiddle
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            flex: 1,
+            minWidth: 1,
+            height: '100%',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          pointerEvents: "box-none",
+          children: processedMiddle
+        })
       })
     })]
   });