jfs-components 0.0.79 → 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

@@ -12,10 +12,18 @@ var _NavArrow = _interopRequireDefault(require("../NavArrow/NavArrow"));
 var _reactUtils = require("../../utils/react-utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// SubPage "slot wrap" geometry, taken directly from the Figma design
+// (node 449:7876). The middle slot is an absolutely-centered box of a fixed
+// size; its inner content (node 3991:4125) is a `flex: 1 0 0; min-width: 1px`
+// item so it fills / shrinks responsively within that box.
+const SUBPAGE_MIDDLE_DEFAULT_WIDTH = 192;
+const SUBPAGE_MIDDLE_HEIGHT = 32;
+const SUBPAGE_MIDDLE_PADDING_HORIZONTAL = 21;
 function AppBar({
   type = 'MainPage',
   leadingSlot,
   middleSlot,
+  middleSlotWidth = SUBPAGE_MIDDLE_DEFAULT_WIDTH,
   actionsSlot,
   modes: propModes = _reactUtils.EMPTY_MODES,
   onLeadingPress,
@@ -117,13 +125,50 @@ function AppBar({
     children: (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(actionsSlot), modes)
   }) : null;
 
-  // When there is no middleSlot we want leading & actions pinned to the
-  // outer edges, so we apply `space-between` at the wrapper. With a middle
-  // slot present, the middle (flex: 1) absorbs the remaining space, so
-  // `space-between` is a no-op.
+  // SubPage centers its middle slot via absolute positioning (see Figma
+  // "slot wrap"), so it never participates in the row flow. Only MainPage
+  // keeps the legacy in-flow middle slot.
+  const hasInFlowMiddle = isMain && !!processedMiddle;
+
+  // With an in-flow middle (MainPage) the middle (flex: 1) absorbs the
+  // remaining space, so leading & actions sit at the edges naturally. In all
+  // other cases we pin leading & actions to the outer edges with
+  // `space-between`; the SubPage middle floats above, centered.
   const wrapperStyle = {
     ...containerStyle,
-    justifyContent: processedMiddle ? 'flex-start' : 'space-between'
+    justifyContent: hasInFlowMiddle ? 'flex-start' : 'space-between'
+  };
+
+  // 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: 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,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: SUBPAGE_MIDDLE_PADDING_HORIZONTAL,
+    overflow: 'hidden'
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [wrapperStyle, style],
@@ -139,7 +184,7 @@ function AppBar({
         alignItems: 'center'
       },
       children: processedLeading
-    }), processedMiddle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    }), hasInFlowMiddle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         flex: 1,
         minWidth: 0,
@@ -152,6 +197,25 @@ function AppBar({
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: actionsStyle,
       children: processedActions
+    }), isSub && processedMiddle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: subPageMiddleOverlayStyle,
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: subPageMiddleBoxStyle,
+        pointerEvents: "box-none",
+        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
+        })
+      })
     })]
   });
 }