jfs-components 0.1.8 → 0.1.17

package/CHANGELOG.md

@@ -4,6 +4,37 @@ 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.16] - 2026-06-26
+
+- Added `CarouselCardAccounts` — horizontally scrollable account-card strip built on `Carousel` with token-driven gap and snap-aligned card slots.
+- Added `ScrollArea` — token-aware scroll container with `direction` (`vertical` / `horizontal` / `both`), padding props, and hidden scroll indicators by default.
+- Shared `boxShadow` utility — cross-platform drop-shadow helper (`boxShadow`, `parseBoxShadow`, `supportsNativeBoxShadow`) with legacy iOS/Android fallback for pre–RN 0.76; exported from the package barrel. Adopted by `Drawer`, `Dropdown`, `Checkbox`, `Radio`, `Toggle`, and `ActionFooter`.
+- Library-wide token audit — removed hardcoded `|| fallback` defaults from component token resolution so missing tokens are visible at runtime; added `npm run audit:tokens` (`scripts/audit-tokens.js`) to verify every referenced Figma variable exists and resolves before publish.
+- `Text` / `Title` — new `singleLine` prop to force single-line layout (web uses `whiteSpace: nowrap` so text overflows instead of wrapping inside constrained parents).
+- `Button` — web label no-wrap fix for pill buttons in tight flex layouts.
+- `Drawer` — title-wrap padding driven by `drawer/titleWrap/padding/*` tokens; layered shadow routed through shared `boxShadow`.
+- `SavingsGoalSummary` — optional `label` caption above the percentage value with dedicated `savingsGoalSummary/label/*` and `savingsGoalSummary/value/*` typography tokens.
+- Icons — 73 new icons (analytics, documents, network/connectivity, folders, and related glyphs); refreshed icon registry.
+- Figma/token sync pass; refreshed `.token-metadata.json`, `figma-modes.generated.ts`, and Coin Variables tokens.
+
+---
+
+## [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/ActionFooter/ActionFooter.js

@@ -8,12 +8,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
+var _shadow = require("../../utils/shadow");
 var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
-const IS_WEB = _reactNative.Platform.OS === 'web';
-
 // ---------------------------------------------------------------------------
 // Yoga-safe stretch
 // ---------------------------------------------------------------------------
@@ -42,27 +41,11 @@ const STRETCH_STYLE = {
   minWidth: 0
 };
 
-// Platform-specific drop shadow. Web boxShadow can't go through
-// Platform.select (RN's typed surface doesn't include it) so we keep it as a
-// separate constant and append it below.
-const NATIVE_SHADOW = _reactNative.Platform.select({
-  ios: {
-    shadowColor: '#0c0d10',
-    shadowOffset: {
-      width: 0,
-      height: -12
-    },
-    shadowOpacity: 0.16,
-    shadowRadius: 24
-  },
-  android: {
-    elevation: 16
-  },
-  default: {}
+// Upward drop shadow routed through the unified helper: native `boxShadow` on
+// web + RN 0.76+, legacy `shadow*` (iOS) / `elevation` (Android) on older RN.
+const SHADOW = (0, _shadow.boxShadow)('0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)', {
+  elevation: 16
 });
-const WEB_SHADOW = IS_WEB ? {
-  boxShadow: '0px -12px 24px 0px rgba(12, 13, 16, 0.12), 0px -16px 48px 0px rgba(12, 13, 16, 0.16)'
-} : null;
 
 // The runtime token a slot child must equal (by reference) to be treated as
 // an IconButton. `IconButton` is exported wrapped in `React.memo`, so the
@@ -171,7 +154,7 @@ function ActionFooter({
       paddingRight: paddingHorizontal,
       paddingTop,
       paddingBottom,
-      ...NATIVE_SHADOW
+      ...SHADOW
     };
     const slot = {
       flexDirection: 'row',
@@ -208,7 +191,7 @@ function ActionFooter({
     });
   }, [children, modes]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
-    style: [containerStyle, WEB_SHADOW, style,
+    style: [containerStyle, style,
     // Counter-translate by the keyboard height on Android so `adjustResize`
     // can't lift the footer above the keyboard (no-op on iOS/web where the
     // value stays at 0).

package/lib/commonjs/components/ActionTile/ActionTile.js

@@ -34,18 +34,18 @@ function ActionTile({
   };
 
   // Resolve tokens
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('actionTile/background', modes) || '#ffffff';
-  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/gap', modes)) || 8;
-  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/padding/horizontal', modes)) || 12;
-  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/padding/vertical', modes)) || 16;
-  const radius = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/radius', modes)) || 16;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('actionTile/background', modes);
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/gap', modes));
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/padding/horizontal', modes));
+  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/padding/vertical', modes));
+  const radius = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/radius', modes));
 
   // Text tokens
-  const textColor = (0, _figmaVariablesResolver.getVariableByName)('actionTile/foreground', modes) || '#0d0d0f';
-  const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/fontSize', modes)) || 14;
-  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('actionTile/fontFamily', modes) || 'JioType Var';
-  const fontWeightStr = (0, _figmaVariablesResolver.getVariableByName)('actionTile/fontWeight', modes) || '500';
-  const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/lineHeight', modes)) || 17;
+  const textColor = (0, _figmaVariablesResolver.getVariableByName)('actionTile/foreground', modes);
+  const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/fontSize', modes));
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('actionTile/fontFamily', modes);
+  const fontWeightStr = (0, _figmaVariablesResolver.getVariableByName)('actionTile/fontWeight', modes);
+  const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('actionTile/lineHeight', modes));
   const containerStyle = {
     backgroundColor,
     borderRadius: radius,

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/AmountInput/AmountInput.js

@@ -34,9 +34,9 @@ const AmountInput = /*#__PURE__*/(0, _react.forwardRef)(function AmountInput({
   };
 
   // Resolve tokens
-  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('amountInput/gap', modes)) || 16;
-  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('amountInput/padding/horizontal', modes)) || 0;
-  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('amountInput/padding/vertical', modes)) || 0;
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('amountInput/gap', modes));
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('amountInput/padding/horizontal', modes));
+  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('amountInput/padding/vertical', modes));
   const containerStyle = {
     flexDirection: 'column',
     alignItems: 'center',

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, {
@@ -723,7 +727,7 @@ function ChartTooltip({
   const bg = (0, _figmaVariablesResolver.getVariableByName)('tooltip/background', modes) ?? '#0f0d0a';
   const paddingH = toNumber((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/horizontal', modes), 12);
   const paddingV = toNumber((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/vertical', modes), 8);
-  const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('radius', modes), 8);
+  const radius = 8;
   const labelColor = (0, _figmaVariablesResolver.getVariableByName)('tooltip/label/color', modes) ?? '#ffffff';
   if (items.length === 0) return null;
 
@@ -801,7 +805,7 @@ function ChartLegend() {
 /** Resolve `axisItem/*` typography tokens into a memoized text style. */
 function useAxisTypography(modes) {
   return (0, _react.useMemo)(() => {
-    const color = (0, _figmaVariablesResolver.getVariableByName)('axisItem/color', modes) ?? '#000000';
+    const color = (0, _figmaVariablesResolver.getVariableByName)('axisItem/fg', modes) ?? '#000000';
     const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('axisItem/fontFamily', modes) ?? 'JioType Var';
     const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('axisItem/fontSize', modes), 12);
     const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('axisItem/lineHeight', modes), 16);

package/lib/commonjs/components/Attached/Attached.js

@@ -129,7 +129,7 @@ function Attached({
   // anchor centering intact).
   const slotBorderStyle = (0, _react.useMemo)(() => {
     const borderColor = (0, _figmaVariablesResolver.getVariableByName)('attached/slot/border', modes);
-    const borderWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)('attached/slot/borderWidth', modes) || '0');
+    const borderWidth = parseFloat((0, _figmaVariablesResolver.getVariableByName)('attached/slot/borderWidth', modes));
     if (!borderColor || !(borderWidth > 0)) return null;
 
     // Match the inner clip radius so the ring stays concentric. The outer edge

package/lib/commonjs/components/Avatar/Avatar.js

@@ -57,17 +57,17 @@ const monogramContainerStyle = {
 // ---------------------------------------------------------------------------
 
 function resolveAvatarTokens(modes, isMonogram) {
-  const size = (0, _figmaVariablesResolver.getVariableByName)('avatar/size', modes) || 29;
-  const radiusRaw = (0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes) || 9999;
-  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/background', modes) || '#dbcfff';
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes) || 'rgba(255,255,255,0)';
-  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes) || 1;
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/color', modes) || '#5c00b5';
-  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontSize', modes) || 12;
-  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/lineHeight', modes) || 14;
-  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontWeight', modes) || 500;
+  const size = (0, _figmaVariablesResolver.getVariableByName)('avatar/size', modes);
+  const radiusRaw = (0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes);
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/background', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes);
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes);
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/color', modes);
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontSize', modes);
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/lineHeight', modes);
+  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontWeight', modes);
   const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw;
-  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontFamily', modes) || 'Inter';
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('avatar/label/fontFamily', modes);
 
   // 9999 is the design-token sentinel for "perfect circle"
   const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw;

package/lib/commonjs/components/AvatarGroup/AvatarGroup.js

@@ -19,15 +19,15 @@ function AvatarGroup({
   style,
   ...rest
 }) {
-  const gap = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/gap', modes) || 0;
-  const avatarSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/size', modes) || 29;
-  const avatarRadius = (0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes) || 9999;
-  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes) || 1;
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes) || 'rgba(255,255,255,0)';
-  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/left', modes) || 0;
-  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/right', modes) || 0;
-  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/top', modes) || 0;
-  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/bottom', modes) || 0;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/gap', modes);
+  const avatarSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/size', modes);
+  const avatarRadius = (0, _figmaVariablesResolver.getVariableByName)('avatar/radius', modes);
+  const borderSize = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/size', modes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('avatar/border/color', modes);
+  const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/left', modes);
+  const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/right', modes);
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/top', modes);
+  const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('avatarGroup/padding/bottom', modes);
   const validChildren = (0, _reactUtils.flattenChildren)(children);
   const totalChildren = validChildren.length;
 

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

@@ -10,28 +10,44 @@ 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 backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('badge/color/background', modes) || '#d8effe';
-  const labelColor = (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';
-  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('badge/padding/horizontal', modes)) || 6;
-  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);
+  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);
+  const glassBackground = (0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/background', modes);
+  const glassLabelColor = (0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/label', modes);
+  const labelColor = isGlass ? glassLabelColor : (0, _figmaVariablesResolver.getVariableByName)('badge/color/label', modes);
+  const fontSize = Number((0, _figmaVariablesResolver.getVariableByName)('badge/label/fontSize', modes));
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('badge/fontFamily', modes);
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('badge/label/fontWeight', modes);
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('badge/padding/horizontal', modes));
+  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('badge/padding/vertical', modes));
+  const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('badge/radius', modes));
+  const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('badge/label/lineHeight', modes));
+  // 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)))));
 
   // 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;