jfs-components 0.0.84 → 0.0.85

package/CHANGELOG.md

@@ -4,6 +4,35 @@ 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.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/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
+        })
       })
     })]
   });