jfs-components 0.1.8 → 0.1.12

package/CHANGELOG.md

@@ -4,6 +4,22 @@ 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.1.12] - 2026-06-22
+
+- Added `Stack` — token-driven vertical/horizontal layout container with `equalHeight` / `fullWidth` stretch enforcement, mode cascade to children, and `injectChildStyle` for cross-axis alignment that children cannot override.
+- Added `Table` — compound data table (`TableHeader`, `TableHeaderCell`, `TableBody`, `TableRow`, `TableCell`) with token-driven header/body styling and horizontal scroll support.
+- `CardCTA` — new `sip` variant (avatar-led card with headline / description / subtitle footer); accepts PascalCase Figma variant names (`CTA` / `Rating` / `Sip`) via `CardCTATypeInput`; body typography defaults aligned to Figma.
+- `Badge` — new `glass` type (frosted pill via shared `GlassFill`); optional `leading` slot; `glassOverlayColor` / `glassIntensity` overrides; exported `BadgeProps` and `BadgeType`.
+- `CompareTable` — feature rows now render through the shared `Table` primitive; selection cards pick up `selectionCard/radius`; `disableTruncation` support.
+- `ProductMerchandisingCard` — footer special badge now uses `<Badge type="glass">`; progressive footer blur via `MaskedView` + gradient mask on native; `disableTruncation` support.
+- `GlassFill` — consolidated into shared `src/utils/GlassFill/` (native blur + web `backdrop-filter`); removed per-component copies under `MediaCard` and `ProductMerchandisingCard`.
+- `FormField` — iOS single-line input no longer applies row-height token as `lineHeight` (fixes vertically sunk text on iOS); web blur-on-outside-press via `useWebOutsidePress` so fields exit Active state when tapping buttons/links outside.
+- Shared utilities — `injectChildStyle`, `resolveTruncation`, and `useWebOutsidePress` in `react-utils` / `web-platform-utils`.
+- `disableTruncation` — opt-out of ellipsis / `numberOfLines` clamps rolled out across interactive and data-display components (e.g. `ListItem`, `Button`, `CompareTable`, charts, form controls).
+- Figma/token sync pass; refreshed `.token-metadata.json`, `figma-modes.generated.ts`, icons registry, and Coin Variables tokens.
+
+---
+
 ## [0.1.8] - 2026-06-12
 
 - Added `BenefitCard` — header highlight + body benefit rows with icon/title/trailing value and optional CTA.

package/lib/commonjs/components/Accordion/Accordion.js

@@ -67,6 +67,7 @@ function Accordion({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const [internalExpanded, setInternalExpanded] = (0, _react.useState)(defaultExpanded);
@@ -166,7 +167,7 @@ function Accordion({
       ...webProps,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: titleStyle,
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: title
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: isExpanded ? 'ic_minus' : 'ic_add',

package/lib/commonjs/components/AccordionCheckbox/AccordionCheckbox.js

@@ -64,7 +64,8 @@ function AccordionCheckbox({
   children,
   modes = _reactUtils.EMPTY_MODES,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const isExpandedControlled = controlledExpanded !== undefined;
   const [internalExpanded, setInternalExpanded] = (0, _react.useState)(defaultExpanded);
@@ -209,12 +210,12 @@ function AccordionCheckbox({
           style: textWrapStyle,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: titleStyle,
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             selectable: false,
             children: title
           }), subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: subtitleStyle,
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             selectable: false,
             children: subtitle
           }) : null]

package/lib/commonjs/components/AccountCard/AccountCard.js

@@ -78,7 +78,8 @@ function AccountCard({
   modes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  disableTruncation
 }) {
   const iconModes = (0, _react.useMemo)(() => modes === _reactUtils.EMPTY_MODES ? ADD_ICON_DEFAULT_MODES : {
     ...ADD_ICON_DEFAULT_MODES,
@@ -211,11 +212,11 @@ function AccountCard({
       },
       children: [title != null && title !== '' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: titleStyle,
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: title
       }) : null, showSubtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: subtitleStyle,
-        numberOfLines: 1,
+        ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
         children: subtitle
       }) : null]
     }) : null]

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

@@ -67,7 +67,8 @@ function SegmentBar({
   baselineHeightPx,
   baselineLabel,
   showMarker,
-  theme
+  theme,
+  disableTruncation
 }) {
   const {
     barWidth,
@@ -94,7 +95,7 @@ function SegmentBar({
     },
     accessibilityLabel: segment.accessibilityLabel,
     children: [showValueLabel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       style: labelStyle,
       children: segment.valueLabel
     }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -140,7 +141,7 @@ function SegmentBar({
               strokeDasharray: "2 2"
             })
           }), isShown(baselineLabel) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             style: [labelStyle, {
               marginLeft: 6
             }],
@@ -149,7 +150,7 @@ function SegmentBar({
         }) : null]
       }) : null
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       style: labelStyle,
       children: segment.label
     })]
@@ -186,7 +187,8 @@ function AllocationComparisonChart({
   style,
   chartStyle,
   legendStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -290,7 +292,8 @@ function AllocationComparisonChart({
           baselineHeightPx: baselineHeightPx,
           baselineLabel: baselineLabel,
           showMarker: showMarker,
-          theme: theme
+          theme: theme,
+          disableTruncation: disableTruncation
         }, segment.key ?? `segment-${index}`);
       })
     })]

package/lib/commonjs/components/AreaLineChart/AreaLineChart.js

@@ -123,7 +123,8 @@ function AreaLineChart({
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   children,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -243,8 +244,9 @@ function AreaLineChart({
     formatX,
     formatY,
     showDots,
-    modes
-  }), [plotWidth, height, inset, xScale, yScale, yTicks, indexXs, count, resolvedSeries, curve, activeIndex, setActiveIndex, xLabels, formatX, formatY, showDots, modes]);
+    modes,
+    disableTruncation
+  }), [plotWidth, height, inset, xScale, yScale, yTicks, indexXs, count, resolvedSeries, curve, activeIndex, setActiveIndex, xLabels, formatX, formatY, showDots, modes, disableTruncation]);
   const isMultiSeries = resolvedSeries.length > 1;
   const resolvedFormatValue = formatValue ?? (v => formatY(v));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(ChartContext.Provider, {
@@ -385,7 +387,8 @@ function ChartYAxis({
     yScale,
     yTicks,
     formatY,
-    modes
+    modes,
+    disableTruncation
   } = useChart();
   const typo = useAxisTypography(modes);
   const format = formatLabel ?? formatY;
@@ -413,7 +416,7 @@ function ChartYAxis({
           },
           children: showLabels ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
             style: typo.style,
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             children: format(t)
           }) : null
         }, `yl-${t}`);
@@ -464,7 +467,8 @@ function ChartXAxis({
     formatX,
     modes,
     activeIndex,
-    setActiveIndex
+    setActiveIndex,
+    disableTruncation
   } = useChart();
   const typo = useAxisTypography(modes);
   const format = formatLabel ?? formatX;
@@ -510,7 +514,7 @@ function ChartXAxis({
             color: activeColor,
             fontWeight: '700'
           } : null],
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           children: format(label, i)
         });
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/Badge/Badge.js

@@ -10,21 +10,34 @@ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resol
 var _reactUtils = require("../../utils/react-utils");
 var _Skeleton = _interopRequireDefault(require("../../skeleton/Skeleton"));
 var _SkeletonGroup = require("../../skeleton/SkeletonGroup");
+var _GlassFill = _interopRequireDefault(require("../../utils/GlassFill/GlassFill"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Badge({
   label = 'Label',
+  type = 'default',
   modes = _reactUtils.EMPTY_MODES,
   onPress,
   accessibilityLabel,
   style,
   labelStyle,
   loading,
+  disableTruncation,
+  leading,
+  glassOverlayColor,
+  glassIntensity,
   ...rest
 }) {
-  // Resolve token values (fall back to sensible defaults)
+  const isGlass = type === 'glass';
+  const hasLeading = leading != null;
+
+  // Resolve token values (fall back to sensible defaults). The glass type
+  // swaps the solid fill for a translucent overlay + white label, matching the
+  // Figma `badge/glass/*` tokens.
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('badge/color/background', modes) || '#d8effe';
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('badge/color/label', modes) || '#000000';
+  const glassBackground = (0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/background', modes) || '#ffffff26';
+  const glassLabelColor = (0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/label', modes) || '#ffffff';
+  const labelColor = isGlass ? glassLabelColor : (0, _figmaVariablesResolver.getVariableByName)('badge/color/label', modes) || '#000000';
   const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('badge/label/fontSize', modes)) || 12;
   const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('badge/fontFamily', modes) || undefined;
   const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('badge/label/fontWeight', modes) || '600';
@@ -32,6 +45,9 @@ function Badge({
   const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('badge/padding/vertical', modes)) || 4;
   const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('badge/radius', modes)) || 4;
   const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('badge/label/lineHeight', modes)) || Math.round(fontSize * 1.2);
+  // Figma `blur/minimal` (px radius) -> GlassFill's 0–100 intensity scale, the
+  // same 1:1 mapping the merchandising card footer uses.
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(Number((0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes)) || 29)));
 
   // Skeleton short-circuit. Size derived from the same tokens the loaded
   // badge would use so the placeholder occupies the same box.
@@ -54,13 +70,25 @@ function Badge({
   }
   const Container = onPress ? _reactNative.Pressable : _reactNative.View;
   const containerStyle = {
-    backgroundColor,
+    // Glass keeps the container transparent so the GlassFill blur shows through;
+    // `overflow: 'hidden'` clips the native blur view to the rounded pill (the
+    // blur view does not honor borderRadius itself).
+    backgroundColor: isGlass ? 'transparent' : backgroundColor,
     paddingHorizontal,
     paddingVertical,
     borderRadius,
     alignSelf: 'flex-start',
     alignItems: 'center',
     justifyContent: 'center',
+    // A leading node sits in-line before the label, so switch to a row with a
+    // small gap. Consumer `style` (spread last) can still override either.
+    ...(hasLeading ? {
+      flexDirection: 'row',
+      gap: 4
+    } : null),
+    ...(isGlass ? {
+      overflow: 'hidden'
+    } : null),
     ...(style || {})
   };
   const textStyle = {
@@ -73,19 +101,30 @@ function Badge({
     ...(labelStyle || {})
   };
   const defaultAccessibilityLabel = accessibilityLabel || label;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
     style: containerStyle,
     accessibilityRole: onPress ? 'button' : 'text',
     accessibilityLabel: undefined,
     onPress: onPress,
     ...rest,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    children: [isGlass ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_GlassFill.default, {
+      tint: "light",
+      intensity: glassIntensity ?? blurIntensity,
+      overlayColor: glassOverlayColor ?? glassBackground,
+      androidTintWash: false
+    }) : null, hasLeading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: LEADING_WRAP,
+      children: leading
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: textStyle,
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1, 'tail'),
       accessibilityElementsHidden: false,
       children: label
-    })
+    })]
   });
 }
+const LEADING_WRAP = {
+  justifyContent: 'center',
+  alignItems: 'center'
+};
 var _default = exports.default = Badge;

package/lib/commonjs/components/BrandChip/BrandChip.js

@@ -95,7 +95,8 @@ function BrandChip({
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -126,8 +127,7 @@ function BrandChip({
   const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [avatarNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [tokens.labelStyle, labelStyle],
-      numberOfLines: 1,
-      ellipsizeMode: "tail",
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1, 'tail'),
       children: label
     })]
   });

package/lib/commonjs/components/Button/Button.js

@@ -176,6 +176,7 @@ function ButtonImpl({
   accessibilityState,
   webAccessibilityProps,
   loading,
+  disableTruncation,
   ...rest
 }) {
   // Hover state is web-only in practice; the setter is gated so native taps
@@ -220,7 +221,7 @@ function ButtonImpl({
   } else {
     content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: activeLabelStyle,
-      numberOfLines: 1,
+      ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
       children: label
     });
   }

package/lib/commonjs/components/CardAdvisory/CardAdvisory.js

@@ -126,6 +126,7 @@ function CardAdvisory({
   progressStyle,
   nudgeStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -163,7 +164,7 @@ function CardAdvisory({
         children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
           style: tokens.headerStyle,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            numberOfLines: 1,
+            ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
             style: [tokens.titleStyle, titleStyle],
             children: title
           }), processedTitleEndSlot || (showInfoIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {

package/lib/commonjs/components/CardBankAccount/CardBankAccount.js

@@ -72,7 +72,8 @@ function CardBankAccount({
   footer,
   modes: propModes = _reactUtils.EMPTY_MODES,
   style,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   // Merge caller modes on top of `DEFAULT_MODES` so every default key
   // (e.g. `Button / Size`, `AppearanceBrand`, `Emphasis`) can be overridden
@@ -189,7 +190,7 @@ function CardBankAccount({
           })
         }), typeof item.value === 'string' || typeof item.value === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
           style: valueTextStyle,
-          numberOfLines: 1,
+          ...(0, _reactUtils.resolveTruncation)(disableTruncation, 1),
           children: item.value
         }) : (0, _reactUtils.cloneChildrenWithModes)(item.value, modes)]
       }, `${item.label}-${index}`))