jfs-components 0.1.23 → 0.1.28

package/CHANGELOG.md

@@ -4,6 +4,46 @@ 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.28] - 2026-07-07
+
+- Added `FormUpload` — token-driven attachment field with label, support text, `<Form>` validation integration, and a controlled `attachments` / `onAttachmentsChange` API. Renders a row of `Additem` cells (preview + empty upload trigger) with optional `maxCount` cap; accepts an injected `picker` callback so consumers wire their own image/document picker without adding native deps to the library.
+- Added `Additem` — single upload cell used by `FormUpload` and `Grid`; `'empty'` state opens the injected picker, `'preview'` shows the selected asset with remove affordance (`additem/*` tokens).
+- Added `Grid` — token-driven layout primitive with configurable `columns`, optional fixed `rows`, fractional `columnFrs` / `rowFrs` track weights, gap/padding tokens, and `justifyContent` / `alignItems`; each child becomes a cell with `modes` cascade.
+- `ContentSheet` — new optional `title` prop renders a centered sticky header using the same `drawer/title*` token family as `Drawer`, keeping bottom-sheet title styling consistent across surfaces.
+- Added `ic_broken_image`, `ic_image`, `ic_mic`, and `ic_mic_off` icons to the icon registry.
+- Regenerated component MDX token documentation and `.token-metadata.json` across the library.
+
+---
+
+## [0.1.27] - 2026-07-07
+
+- Added `ProfileCard` — dark rounded profile summary card with `Attached` monogram `Avatar`, optional badge, name + `UpiHandle` pill row, and a body slot; `Profile Card Appearance` mode (`Default` | `Premium`) recolors the whole card via `modes`.
+- `Carousel` — new `type="Numbered"` variant: full-bleed slides with floating `AutoplayControl` + `NumberPagination` overlay at the bottom center; interactive play/pause state wired to autoplay.
+- `Carousel` — **Fix:** autoplay pagination no longer flickers back to the previous active page during scroll animations; `activeIndex` is derived from settled offsets instead of intermediate scroll positions.
+- `UpiHandle` — **Fix:** avatar image visibility now follows the presence of `source` / `avatarSource` (`showImage` no longer renders an empty avatar slot when no source is provided); `UPI Handle Image` mode is force-set from the resolved source so token layout stays in sync.
+- Regenerated component MDX token documentation and `.token-metadata.json` across the library.
+
+---
+
+## [0.1.26] - 2026-07-07
+
+- Added `AutoplayControl` — token-driven play/pause toggle button for carousel autoplay (`autoplayControl/*` tokens; `ic_play` / `ic_pause` icons).
+- Added `NumberPagination` — frosted-glass page-number strip with active/inactive control states (`numberPagination/*`, `controlNumber/*`, `control/*` tokens); supports `children` slot override.
+- Added `ic_play` and `ic_pause` icons to the icon registry.
+- Regenerated component MDX token documentation and `.token-metadata.json` across the library.
+
+---
+
+## [0.1.25] - 2026-07-03
+
+- Added `MetricData` — compact centered metric block (`title`, `value`, optional `caption` and leading `icon`); typography, colours, gaps, and padding resolve from `metricdata/*` tokens; `value` accepts a string or custom node (e.g. `MoneyValue`).
+- Added `Rating` — token-driven star row (`rating/gap`, `ratingStar/*`); filled vs empty stars share one SVG glyph and differ by `Rating Star State`; optional `onChange` for interactive selection, `readOnly` for static display.
+- `CardCTA` — **Fix:** restore true 2fr right-column geometry on Android. Replaces the `flexBasis: 'auto'` workaround (which over-expanded the icon column and caused early body-text wrapping) with `flexBasis: 0` plus an explicit `minWidth` floor sized to the resolved `IconCapsule` + horizontal padding, so the column keeps the design ratio without collapsing when the left text is long.
+- `ChipSelect` — new `showCloseIcon` prop (default `true`); set `showCloseIcon={false}` to hide the close icon in the active state.
+- `ListItem` — vertical layout support text is hard-clamped to exactly two lines via `numberOfLines={2}` (spaces become line breaks, e.g. `"Split Payments"` → two lines). Fixes Bento grid labels wrapping onto a third line on native, where React Native has no `white-space: nowrap` equivalent. Horizontal layout support text uses the same two-line clamp.
+
+---
+
 ## [0.1.23] - 2026-07-01
 
 - Added `Link` — token-driven underlined text link mirroring the `Text` API (`text`/`children`, `autolayout`, `textAlign`, `disableTruncation`, `singleLine`); navigation-agnostic with consumer-provided `onPress`.

package/lib/commonjs/components/AutoplayControl/AutoplayControl.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AutoplayControl;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+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); }
+function resolveAutoplayControlTokens(modes, disabled) {
+  const width = (0, _figmaVariablesResolver.getVariableByName)('autoplayControl/width', modes) ?? 36;
+  const height = (0, _figmaVariablesResolver.getVariableByName)('autoplayControl/height', modes) ?? 36;
+  const radiusRaw = (0, _figmaVariablesResolver.getVariableByName)('autoplayControl/radius', modes) ?? 9999;
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('autoplayControl/background/color', modes) ?? '#ffffff';
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('autoplayControl/icon/color', modes) ?? '#000000';
+  const borderRadius = radiusRaw === 9999 ? width / 2 : radiusRaw;
+  return {
+    containerStyle: {
+      width,
+      height,
+      borderRadius,
+      backgroundColor,
+      alignItems: 'center',
+      justifyContent: 'center',
+      opacity: disabled ? 0.5 : 1
+    },
+    iconColor
+  };
+}
+
+/**
+ * AutoplayControl is a button component that toggles between play and pause states.
+ * All styling values are resolved from Figma design tokens.
+ */
+function AutoplayControl({
+  state = 'pause',
+  modes,
+  onPress,
+  disabled = false,
+  style
+}) {
+  const tokens = (0, _react.useMemo)(() => resolveAutoplayControlTokens(modes ?? {}, disabled), [modes, disabled]);
+  const iconName = state === 'play' ? 'ic_play' : 'ic_pause';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+    onPress: disabled ? undefined : onPress,
+    disabled: disabled,
+    style: ({
+      pressed
+    }) => [tokens.containerStyle, pressed && {
+      opacity: 0.7
+    }, style],
+    accessibilityRole: "button",
+    accessibilityState: {
+      disabled
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: iconName,
+      size: 24,
+      color: tokens.iconColor
+    })
+  });
+}

package/lib/commonjs/components/CardCTA/CardCTA.js

@@ -230,22 +230,39 @@ function CardCTA({
     zIndex: 1
   };
 
-  // NOTE: rightWrap must NOT shrink on native. On Android (Yoga), the default
-  // `flex: 2` shorthand expands to `{ flexGrow: 2, flexShrink: 1, flexBasis: 0 }`,
-  // which — combined with `minWidth: 0` — lets Yoga shrink this wrapper below
-  // its own padding+IconCapsule width when leftWrap's text is long. Once that
-  // happens the horizontal padding collapses, `alignItems: 'flex-end'` pins
-  // the IconCapsule against the inner edge, and the icon ends up visually
-  // touching the body text (the wrapper "appears not to exist"). Web hides
-  // this because browsers honor `min-width: auto` on flex items. Use
-  // explicit `flexGrow`/`flexShrink: 0`/`flexBasis: 'auto'` so the wrapper
-  // is sized to its content as a floor and only grows for the design's
-  // 3:2 ratio when extra space is available. leftWrap already absorbs tight
-  // space via `flexShrink: 1` + `minWidth: 0`.
+  // NOTE: rightWrap must implement the design's TRUE `2fr` column.
+  //
+  // History of this style — two Yoga pitfalls pull in opposite directions:
+  //
+  //  1. `flex: 2` (=> flexBasis: 0, flexShrink: 1): on Android, Yoga could
+  //     shrink the wrapper below its padding+IconCapsule width when the left
+  //     text was long, collapsing the padding and gluing the icon to the
+  //     text. Browsers hide this because they honor `min-width: auto`; Yoga
+  //     always treats min-width as 0 unless told otherwise.
+  //  2. The previous workaround, `flexBasis: 'auto'` + `flexGrow: 2`, fixed
+  //     #1 but broke the column ratio: Yoga then sizes the wrapper to its
+  //     content FIRST (icon + padding) and distributes only the leftover
+  //     space 3:2. The icon width gets baked in on top of the 2fr share, so
+  //     the right column ends up much wider than the design's 2fr and the
+  //     body text wraps early with dead space to its right.
+  //
+  // Fundamental fix: keep the genuine fr-unit geometry (`flexBasis: 0`,
+  // grow 3:2, no shrink) and replace Yoga's missing `min-width: auto` with
+  // an explicit computed floor — the resolved IconCapsule size plus the
+  // wrapper's own horizontal padding. The column is exactly 2fr whenever
+  // space allows and can never collapse below its content.
+  const iconCapsuleModes = {
+    ...modes,
+    'IconCapsule / Size': 'M',
+    Emphasis: 'Medium',
+    AppearanceBrand: 'Secondary'
+  };
+  const rightWrapMinWidth = ((0, _figmaVariablesResolver.getVariableByName)('iconCapsule/size', iconCapsuleModes) || 0) + (rightPaddingH || 0) * 2;
   const rightWrapStyle = {
     flexGrow: 2,
     flexShrink: 0,
-    flexBasis: 'auto',
+    flexBasis: 0,
+    minWidth: rightWrapMinWidth,
     paddingHorizontal: rightPaddingH,
     paddingVertical: rightPaddingV,
     alignItems: 'flex-end',
@@ -499,19 +516,9 @@ function CardCTA({
       })]
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: rightWrapStyle,
-      children: iconSlot ? (0, _reactUtils.cloneChildrenWithModes)(iconSlot, {
-        ...modes,
-        'IconCapsule / Size': 'M',
-        Emphasis: 'Medium',
-        AppearanceBrand: 'Secondary'
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+      children: iconSlot ? (0, _reactUtils.cloneChildrenWithModes)(iconSlot, iconCapsuleModes) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
         iconName: iconName,
-        modes: {
-          ...modes,
-          'IconCapsule / Size': 'M',
-          Emphasis: 'Medium',
-          AppearanceBrand: 'Secondary'
-        }
+        modes: iconCapsuleModes
       })
     })]
   });

package/lib/commonjs/components/Carousel/Carousel.js

@@ -11,7 +11,10 @@ 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 _AutoplayControl = _interopRequireDefault(require("../AutoplayControl/AutoplayControl"));
+var _NumberPagination = _interopRequireDefault(require("../NumberPagination/NumberPagination"));
 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); }
 // ---------------------------------------------------------------------------
 // Context
@@ -45,9 +48,11 @@ function Carousel({
   itemWidth: itemWidthProp,
   paddingHorizontal: paddingHorizontalProp,
   paddingVertical: paddingVerticalProp,
+  type = 'Default',
   onIndexChange,
   style
 }) {
+  const isNumbered = type === 'Numbered';
   // ---- Token resolution ----
   const tokenGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/gap', modes));
   const gap = gapProp ?? tokenGap;
@@ -55,27 +60,43 @@ function Carousel({
   const containerPaddingV = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/padding/vertical', modes));
   // Outer container max height per Figma (`carousel/maxHeight`).
   const maxHeight = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carousel/maxHeight', modes));
+  // Gap between AutoplayControl and NumberPagination in the Numbered overlay.
+  const controlGap = parseFloat((0, _figmaVariablesResolver.getVariableByName)('carouselControl/gap', modes));
+
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap;
 
   // ---- Refs & state ----
   const scrollRef = (0, _react.useRef)(null);
   const [activeIndex, setActiveIndex] = (0, _react.useState)(0);
+  const activeIndexRef = (0, _react.useRef)(0);
   const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
   const autoPlayTimer = (0, _react.useRef)(null);
   const userInteracting = (0, _react.useRef)(false);
+  // Guard: suppress handleScroll index updates during programmatic scrollTo
+  // animations so intermediate offsets don't flicker activeIndex back.
+  const programmaticScroll = (0, _react.useRef)(false);
+  const programmaticTimer = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    activeIndexRef.current = activeIndex;
+  }, [activeIndex]);
+
+  // Interactive play/pause state for the Numbered variant.
+  const [isPlaying, setIsPlaying] = (0, _react.useState)(autoPlay);
 
   // Flatten children so we can count items
   const items = (0, _react.useMemo)(() => _react.default.Children.toArray(children).filter(_react.default.isValidElement), [children]);
   const totalItems = items.length;
 
-  // Effective item width: provided prop, or full container width minus peek offsets
+  // Effective item width: provided prop, or full container width minus peek offsets.
+  // For the Numbered variant the items are full-bleed (no peek padding).
   const effectiveItemWidth = (0, _react.useMemo)(() => {
     if (itemWidthProp != null) return itemWidthProp;
     if (containerWidth === 0) return 0;
+    if (isNumbered) return containerWidth;
     // Full-width minus peekOffset on each side
     return containerWidth - containerPaddingH * 4;
-  }, [itemWidthProp, containerWidth, containerPaddingH]);
+  }, [itemWidthProp, containerWidth, containerPaddingH, isNumbered]);
 
   // Snap interval = item width + gap
   const snapInterval = effectiveItemWidth + gap;
@@ -89,6 +110,17 @@ function Carousel({
     } else {
       targetIndex = Math.max(0, Math.min(index, totalItems - 1));
     }
+    // Lock out handleScroll during the animated scroll so intermediate
+    // offsets don't flicker activeIndex back to the old value.
+    if (animated) {
+      programmaticScroll.current = true;
+      if (programmaticTimer.current != null) {
+        clearTimeout(programmaticTimer.current);
+      }
+      programmaticTimer.current = setTimeout(() => {
+        programmaticScroll.current = false;
+      }, 500);
+    }
     scrollRef.current?.scrollTo({
       x: targetIndex * snapInterval,
       animated
@@ -103,6 +135,9 @@ function Carousel({
   // ---- Scroll event handler ----
   const handleScroll = (0, _react.useCallback)(event => {
     if (snapInterval === 0) return;
+    // Skip index recalculation during programmatic scrollTo animations
+    // to prevent the active indicator from flickering back to the old page.
+    if (programmaticScroll.current) return;
     const offsetX = event.nativeEvent.contentOffset.x;
     const newIndex = Math.round(offsetX / snapInterval);
     const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1));
@@ -120,22 +155,19 @@ function Carousel({
     }
   }, []);
   const startAutoPlay = (0, _react.useCallback)(() => {
-    if (!autoPlay || totalItems <= 1) return;
+    if (!autoPlay && !isPlaying || totalItems <= 1) return;
+    if (!isPlaying) return;
     clearAutoPlay();
     autoPlayTimer.current = setInterval(() => {
       if (!userInteracting.current) {
-        setActiveIndex(prev => {
-          const next = loop ? (prev + 1) % totalItems : Math.min(prev + 1, totalItems - 1);
-          scrollRef.current?.scrollTo({
-            x: next * snapInterval,
-            animated: true
-          });
-          onIndexChange?.(next);
-          return next;
-        });
+        const prev = activeIndexRef.current;
+        const next = loop ? (prev + 1) % totalItems : Math.min(prev + 1, totalItems - 1);
+        // Route through scrollToIndex so the programmaticScroll guard
+        // suppresses intermediate handleScroll offsets during the animation.
+        scrollToIndex(next, true);
       }
     }, autoPlayInterval);
-  }, [autoPlay, totalItems, loop, snapInterval, autoPlayInterval, clearAutoPlay, onIndexChange]);
+  }, [autoPlay, isPlaying, totalItems, loop, autoPlayInterval, clearAutoPlay, scrollToIndex]);
   (0, _react.useEffect)(() => {
     startAutoPlay();
     return clearAutoPlay;
@@ -146,8 +178,23 @@ function Carousel({
   const handleScrollEndDrag = (0, _react.useCallback)(() => {
     userInteracting.current = false;
     // Reset autoplay timer after interaction
-    if (autoPlay) startAutoPlay();
-  }, [autoPlay, startAutoPlay]);
+    if (autoPlay || isPlaying) startAutoPlay();
+  }, [autoPlay, isPlaying, startAutoPlay]);
+  const finishProgrammaticScroll = (0, _react.useCallback)(event => {
+    programmaticScroll.current = false;
+    if (programmaticTimer.current != null) {
+      clearTimeout(programmaticTimer.current);
+      programmaticTimer.current = null;
+    }
+    if (snapInterval === 0) return;
+    const offsetX = event.nativeEvent.contentOffset.x;
+    const newIndex = Math.round(offsetX / snapInterval);
+    const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1));
+    if (clampedIndex !== activeIndexRef.current) {
+      setActiveIndex(clampedIndex);
+      onIndexChange?.(clampedIndex);
+    }
+  }, [snapInterval, totalItems, onIndexChange]);
 
   // ---- Layout ----
   const handleLayout = (0, _react.useCallback)(e => {
@@ -164,14 +211,37 @@ function Carousel({
     goPrev
   }), [modes, activeIndex, totalItems, goTo, goNext, goPrev]);
 
+  // ---- Toggle handler for Numbered variant ----
+  const handleToggleAutoplay = (0, _react.useCallback)(() => {
+    setIsPlaying(prev => {
+      if (prev) {
+        // Pausing
+        clearAutoPlay();
+        return false;
+      }
+      // Resuming — autoplay will restart via the effect
+      return true;
+    });
+  }, [clearAutoPlay]);
+
+  // Restart autoplay whenever isPlaying flips to true
+  (0, _react.useEffect)(() => {
+    if (isPlaying) startAutoPlay();else clearAutoPlay();
+  }, [isPlaying, startAutoPlay, clearAutoPlay]);
+
   // ---- Render ----
   // Explicit padding props win verbatim; otherwise fall back to the
   // token-derived values (horizontal keeps its legacy ×2 "peek" multiplier).
-  const effectivePaddingH = paddingHorizontalProp ?? containerPaddingH;
-  const effectivePaddingV = paddingVerticalProp ?? containerPaddingV;
+  // Numbered variant is full-bleed: zero padding.
+  const effectivePaddingH = isNumbered ? 0 : paddingHorizontalProp ?? containerPaddingH;
+  const effectivePaddingV = isNumbered ? 0 : paddingVerticalProp ?? containerPaddingV;
   const outerStyle = {
     paddingVertical: effectivePaddingV,
-    maxHeight
+    maxHeight: isNumbered ? undefined : maxHeight,
+    // Numbered needs relative positioning for the floating controls overlay.
+    ...(isNumbered ? {
+      overflow: 'hidden'
+    } : {})
   };
   const contentContainerStyle = {
     paddingHorizontal: effectivePaddingH,
@@ -197,6 +267,7 @@ function Carousel({
         scrollEventThrottle: 16,
         onScrollBeginDrag: handleScrollBeginDrag,
         onScrollEndDrag: handleScrollEndDrag,
+        onMomentumScrollEnd: finishProgrammaticScroll,
         children: items.map((child, index) => {
           // Strict slot box: width must be honored; never grow or shrink with
           // content, and clip anything that misbehaves (e.g. a child whose
@@ -233,11 +304,33 @@ function Carousel({
             children: childWithModes
           }, index);
         })
-      }), showPagination && totalItems > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Pagination, {
+      }), !isNumbered && showPagination && totalItems > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(Pagination, {
         modes: modes,
         style: {
           marginTop: paginationOffset
         }
+      }), isNumbered && showPagination && totalItems > 1 && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          position: 'absolute',
+          bottom: 12,
+          left: 0,
+          right: 0,
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: controlGap
+        },
+        pointerEvents: "box-none",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoplayControl.default, {
+          state: isPlaying ? 'pause' : 'play',
+          onPress: handleToggleAutoplay,
+          modes: modes
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NumberPagination.default, {
+          activePage: activeIndex + 1,
+          totalPages: totalItems,
+          onPageChange: page => goTo(page - 1),
+          modes: modes
+        })]
       })]
     })
   });

package/lib/commonjs/components/ChipSelect/ChipSelect.js

@@ -19,6 +19,7 @@ function ChipSelect({
   label = 'Date',
   active = false,
   icon = 'ic_calendar_week',
+  showCloseIcon = true,
   modes = _reactUtils.EMPTY_MODES,
   style,
   labelSlot,
@@ -92,7 +93,7 @@ function ChipSelect({
       name: icon,
       size: iconSize,
       color: textColor
-    }), renderLabel(), active && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    }), renderLabel(), active && showCloseIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       name: "ic_close",
       size: iconSize,
       color: textColor

package/lib/commonjs/components/ContentSheet/ContentSheet.js

@@ -21,6 +21,18 @@ function resolveContentSheetStyle(modes) {
   const paddingBottom = (0, _figmaVariablesResolver.getVariableByName)('contentSheet/padding/bottom', modes);
   const radiusTop = (0, _figmaVariablesResolver.getVariableByName)('contentSheet/padding/radius/top', modes);
   const radiusBottom = (0, _figmaVariablesResolver.getVariableByName)('contentSheet/padding/radius/bottom', modes);
+
+  // Title tokens mirror the Drawer title so the two bottom-sheet surfaces stay
+  // visually aligned.
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/color', modes);
+  const titleSize = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontSize', modes);
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/lineHeight', modes);
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontFamily', modes);
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('drawer/title/fontWeight', modes);
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+  const titleWrapPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/top', modes);
+  const titleWrapPaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/bottom', modes);
+  const titleWrapPaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('drawer/titleWrap/padding/horizontal', modes);
   return {
     container: {
       backgroundColor,
@@ -36,7 +48,21 @@ function resolveContentSheetStyle(modes) {
       alignItems: 'stretch',
       overflow: 'hidden'
     },
-    paddingBottom
+    paddingBottom,
+    headerStyle: {
+      paddingTop: titleWrapPaddingTop,
+      paddingBottom: titleWrapPaddingBottom,
+      paddingHorizontal: titleWrapPaddingHorizontal,
+      alignItems: 'center'
+    },
+    titleStyle: {
+      color: titleColor,
+      fontSize: titleSize,
+      lineHeight: titleLineHeight,
+      fontFamily: titleFontFamily,
+      fontWeight: titleFontWeight,
+      textAlign: 'center'
+    }
   };
 }
 const pinnedStyle = {
@@ -65,6 +91,7 @@ const pinnedStyle = {
 function ContentSheet({
   children,
   modes = _reactUtils.EMPTY_MODES,
+  title,
   avoidKeyboard = true,
   keyboardSpacing = 0,
   safeAreaBottom = true,
@@ -88,18 +115,25 @@ function ContentSheet({
   // `avoidKeyboard` (and platform). Because they are distinct component types,
   // React remounts on toggle, so the conditional `useAnimatedKeyboard` hook
   // inside `KeyboardAwareSheet` always runs in a stable hook order.
+  const header = title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: resolved.headerStyle,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: resolved.titleStyle,
+      children: title
+    })
+  }) : null;
   if (avoidKeyboard && !IS_WEB) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(KeyboardAwareSheet, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(KeyboardAwareSheet, {
       style: containerStyle,
       spacing: keyboardSpacing,
       ...rest,
-      children: processedChildren
+      children: [header, processedChildren]
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: containerStyle,
     ...rest,
-    children: processedChildren
+    children: [header, processedChildren]
   });
 }
 /**