jfs-components 0.1.30 → 0.1.32

package/CHANGELOG.md

@@ -4,6 +4,19 @@ 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.31] - 2026-07-15
+
+- Added `CategoryCard` — compact category rail tile (`categoryCard/*` tokens) with image (or `imageSlot`), optional overlapping `Badge`, fixed 60dp width (overridable via `width`), and `active` / `disabled` press states. Label truncation mirrors `Text` via `disableTruncation` / `singleLine`.
+- Added `HelloJioInput` — pill-shaped HelloJio prompt field (`helloJioInput/*` tokens) with leading brand icon, single-line input, and send `IconButton`. Focus drives Idle → Active; `jioPlus` enables the frosted IdleJioPlus glass surface. Controlled/uncontrolled text with `onSubmit` from the send button and keyboard return key; `leading` / `trailing` slots for customization.
+- Added `CounterBadge` — small token-driven value pill (`counterBadge/*` tokens).
+- Added `FavoriteToggle` — glass circular favorite control (`favoriteToggle/*` tokens) with controlled `isActive` / uncontrolled `defaultActive`, `onChange`, and skeleton loading support.
+- Added `ValueBackMetric` — compact metric card (JioPoints-style) with header icon + title, value, caption, and optional bottom `Link`; colours/gaps/padding from `metricdata/*` tokens.
+- `CompareTable` — new `stickyHeaders` and `stickyHeaderLabel` props (default `true`) for sticky section headers in fixed-width scroll mode; horizontal scroll sync rewritten to track the actively dragged `ScrollView` and eliminate jitter from programmatic `scrollTo` echoes.
+- `ContentSheet` — new `maxHeightPercent` prop (default `0.7`) caps sheet height as a fraction of the window and scrolls overflow content.
+- Stories and MDX documentation updated for all new components and props.
+
+---
+
 ## [0.1.30] - 2026-07-10
 
 - `MoneyValue` — new `editable` prop (inline edit mode): tapping the value shows a numeric `TextInput` that accepts only digits + one decimal point; edit commits on blur/submit via new `onValueChange` callback; keyboard avoidance lifts the component above the keyboard using `Keyboard.addListener` + `measureInWindow` (same pattern as `ActionFooter`).

package/lib/commonjs/components/CategoryCard/CategoryCard.js

@@ -0,0 +1,264 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _webPlatformUtils = require("../../utils/web-platform-utils");
+var _Badge = _interopRequireDefault(require("../Badge/Badge"));
+var _Image = _interopRequireDefault(require("../Image/Image"));
+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 CATEGORY_CARD_STATE = 'Category Card State';
+const BADGE_OVERLAP = 11;
+const DEFAULT_CARD_WIDTH = 60;
+
+// Default modes from the Figma CategoryCard component. Overridable via `modes`.
+const CATEGORY_CARD_DEFAULT_MODES = Object.freeze({
+  AppearanceBrand: 'Tertiary',
+  'Badge Size': 'Small',
+  Context4: 'Badge',
+  "Radius": "None"
+});
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+function resolveCategoryCardTokens(modes, active) {
+  const idleModes = {
+    ...modes,
+    [CATEGORY_CARD_STATE]: 'Idle'
+  };
+  const activeModes = {
+    ...modes,
+    [CATEGORY_CARD_STATE]: 'Active'
+  };
+  const resolvedModes = active ? activeModes : idleModes;
+  const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/gap', resolvedModes), 6);
+  const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/padding/horizontal', resolvedModes), 8);
+  const paddingVertical = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/padding/vertical', resolvedModes), 8);
+  const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/radius', resolvedModes), 8);
+  const strokeWidth = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/strokeWidth', resolvedModes), 1);
+  const strokeColor = (0, _figmaVariablesResolver.getVariableByName)('cardTab/stroke/color', resolvedModes) ?? '#f5f5f5';
+  const idleBackground = (0, _figmaVariablesResolver.getVariableByName)('cardTab/background/color', idleModes) ?? '#ffffff';
+  const activeBackground = (0, _figmaVariablesResolver.getVariableByName)('cardTab/background/color', activeModes) ?? '#f5f5f5';
+  const backgroundColor = active ? activeBackground : idleBackground;
+  const imageSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/image/width', resolvedModes), 36);
+  const imageRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('image/radius', resolvedModes), 0);
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('cardTab/label/fontFamily', resolvedModes) ?? 'JioType Var';
+  const fontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/label/fontSize', resolvedModes), 12);
+  const lineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('cardTab/label/lineHeight', resolvedModes), Math.round(fontSize * 1.3));
+  const fontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('cardTab/label/fontWeight', resolvedModes), '500');
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('cardTab/label/color', resolvedModes) ?? '#000000';
+  return {
+    containerStyle: {
+      position: 'relative',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor,
+      borderColor: strokeColor,
+      borderWidth: strokeWidth,
+      borderStyle: 'solid',
+      borderRadius: radius,
+      paddingHorizontal,
+      paddingTop: paddingVertical,
+      paddingBottom: paddingVertical,
+      gap
+    },
+    labelStyle: {
+      color: labelColor,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      textAlign: 'center'
+    },
+    imageSize,
+    imageRadius
+  };
+}
+const pressedOverlayStyle = {
+  opacity: 0.85
+};
+const disabledOverlayStyle = {
+  opacity: 0.5
+};
+
+/**
+ * `CategoryCard` is a compact, tappable tile for category pickers and
+ * merchandising rails. It stacks a square image above a short label and can
+ * optionally show an overlapping badge at the top edge. Cards are typically
+ * laid out in a horizontal `ScrollView` or `HStack`.
+ *
+ * All visual values resolve through the `cardTab/*` design tokens with
+ * sensible Figma defaults so the card renders correctly out of the box.
+ *
+ * @component
+ * @param {CategoryCardProps} props
+ */
+function CategoryCard({
+  label = 'Popular',
+  imageSource,
+  imageSlot,
+  badge,
+  active = false,
+  width = DEFAULT_CARD_WIDTH,
+  disableTruncation,
+  singleLine,
+  onPress,
+  disabled = false,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  accessibilityHint,
+  accessibilityState,
+  webAccessibilityProps,
+  testID,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...CATEGORY_CARD_DEFAULT_MODES,
+    ...propModes
+  }), [globalModes, propModes]);
+  const resolvedModes = (0, _react.useMemo)(() => ({
+    ...modes,
+    [CATEGORY_CARD_STATE]: active ? 'Active' : 'Idle'
+  }), [modes, active]);
+  const tokens = (0, _react.useMemo)(() => resolveCategoryCardTokens(resolvedModes, active), [resolvedModes, active]);
+  const {
+    style: labelLayoutStyle,
+    ...labelTruncation
+  } = (0, _react.useMemo)(() => (0, _reactUtils.resolveTextLayout)({
+    disableTruncation,
+    singleLine,
+    numberOfLines: 1,
+    ellipsizeMode: 'tail'
+  }), [disableTruncation, singleLine]);
+  const processedImageSlot = (0, _react.useMemo)(() => {
+    if (!imageSlot) return null;
+    const processed = (0, _reactUtils.cloneChildrenWithModes)(imageSlot, resolvedModes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [imageSlot, resolvedModes]);
+  const imageNode = processedImageSlot ?? (imageSource !== undefined ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+    imageSource: imageSource,
+    width: tokens.imageSize,
+    height: tokens.imageSize,
+    ratio: 1,
+    resizeMode: "cover",
+    borderRadius: tokens.imageRadius,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no"
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+    imageSource: "https://www.figma.com/api/mcp/asset/0ee34871-646f-4736-be06-22fb6c0a4eed",
+    width: tokens.imageSize,
+    height: tokens.imageSize,
+    ratio: 1,
+    resizeMode: "cover",
+    borderRadius: tokens.imageRadius,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no"
+  }));
+  const a11yLabel = accessibilityLabel ?? (badge ? `${label}, ${badge}` : label);
+  const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
+    restProps: rest,
+    onPress: disabled ? undefined : onPress,
+    disabled,
+    accessibilityLabel: a11yLabel,
+    webAccessibilityProps
+  });
+  const badgeNode = badge ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: BADGE_ANCHOR,
+    pointerEvents: "none",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+      label: badge,
+      modes: resolvedModes,
+      style: BADGE_CENTER_STYLE
+    })
+  }) : null;
+
+  // Truncation needs a width bound so the ellipsis engages. `singleLine`
+  // must NOT fill the content box — otherwise the text is pinned to the left
+  // padding edge and only grows rightward. Intrinsic width + centered
+  // alignment lets overflow expand equally on both sides.
+  const labelWidthStyle = singleLine ? LABEL_OVERFLOW_CENTER_STYLE : LABEL_FILL_STYLE;
+  const pressableStyle = (0, _react.useCallback)(({
+    pressed
+  }) => [tokens.containerStyle, {
+    width
+  }, badge ? {
+    marginTop: BADGE_OVERLAP
+  } : null, disabled ? disabledOverlayStyle : null, pressed && !disabled ? pressedOverlayStyle : null, style], [tokens.containerStyle, width, badge, disabled, style]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    accessibilityRole: "button",
+    accessibilityLabel: a11yLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: {
+      disabled,
+      selected: active,
+      ...accessibilityState
+    },
+    onPress: onPress,
+    disabled: disabled,
+    style: pressableStyle,
+    testID: testID,
+    ...webProps,
+    children: [badgeNode, imageNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [tokens.labelStyle, labelWidthStyle, labelLayoutStyle, labelStyle],
+      ...labelTruncation,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no",
+      children: label
+    })]
+  });
+}
+const BADGE_ANCHOR = {
+  position: 'absolute',
+  top: -BADGE_OVERLAP,
+  left: 0,
+  right: 0,
+  alignItems: 'center',
+  justifyContent: 'center',
+  zIndex: 1
+};
+const BADGE_CENTER_STYLE = {
+  alignSelf: 'center'
+};
+
+/** Lets the label fill the card width so the one-line ellipsis has a bound. */
+const LABEL_FILL_STYLE = {
+  width: '100%',
+  alignSelf: 'stretch'
+};
+
+/**
+ * Intrinsic width, horizontally centred. When the label is wider than the
+ * card it overflows left and right equally instead of growing only rightward
+ * from the padded content edge.
+ */
+const LABEL_OVERFLOW_CENTER_STYLE = {
+  alignSelf: 'center',
+  textAlign: 'center'
+};
+var _default = exports.default = /*#__PURE__*/_react.default.memo(CategoryCard);

package/lib/commonjs/components/CompareTable/CompareTable.js

@@ -113,7 +113,9 @@ function CompareTable({
   modes = _reactUtils.EMPTY_MODES,
   style,
   disableTruncation,
-  columnWidth
+  columnWidth,
+  stickyHeaders = true,
+  stickyHeaderLabel = true
 }) {
   // --- selection card tokens ------------------------------------------------
   const cardBg = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/background/color', modes) ?? '#ffffff';
@@ -185,12 +187,12 @@ function CompareTable({
   // Stable per-section ref-callback instances so React doesn't detach/reattach
   // on every render (which would churn the map and re-fire scrollTo).
   const bodyRefCallbacks = (0, _react.useRef)(new Map());
-  /** Last offset we synced everyone to. Echoed onScroll events reporting this
-   *  same value are ignored — this is what prevents feedback loops. */
+  /** Tracks which ScrollView the user is currently dragging. Only the
+   *  actively-dragged ScrollView drives horizontal sync — programmatic
+   *  scrollTo echoes from synced peers are ignored, eliminating jitter. */
+  const draggingSource = (0, _react.useRef)(null);
   const lastSyncX = (0, _react.useRef)(0);
-  const applySync = (0, _react.useCallback)((x, source) => {
-    if (Math.abs(x - lastSyncX.current) < 0.5) return;
-    lastSyncX.current = x;
+  const syncOthers = (0, _react.useCallback)((source, x) => {
     if (source !== 'cards' && cardsScrollRef.current) {
       cardsScrollRef.current.scrollTo({
         x,
@@ -206,12 +208,37 @@ function CompareTable({
       }
     });
   }, []);
-  const onCardsScroll = (0, _react.useCallback)(e => {
-    applySync(e.nativeEvent.contentOffset.x, 'cards');
-  }, [applySync]);
-  const onBodyScroll = (0, _react.useCallback)(idx => e => {
-    applySync(e.nativeEvent.contentOffset.x, idx);
-  }, [applySync]);
+  const onScrollBeginDrag = (0, _react.useCallback)(source => () => {
+    draggingSource.current = source;
+  }, []);
+  const onScrollEndDrag = (0, _react.useCallback)(source => e => {
+    const x = Math.round(e.nativeEvent.contentOffset.x);
+    if (x === lastSyncX.current) return;
+    lastSyncX.current = x;
+    syncOthers(source, x);
+  }, [syncOthers]);
+  const onMomentumScrollEnd = (0, _react.useCallback)(source => e => {
+    if (draggingSource.current === source) {
+      draggingSource.current = null;
+    }
+    const x = Math.round(e.nativeEvent.contentOffset.x);
+    if (x === lastSyncX.current) return;
+    lastSyncX.current = x;
+    syncOthers(source, x);
+  }, [syncOthers]);
+
+  /** Real-time scroll sync: only the actively-dragged ScrollView drives
+   *  sync on native — echoed onScroll events from programmatic scrollTo
+   *  on other ScrollViews are ignored because draggingSource won't match.
+   *  On web, onScrollBeginDrag never fires for mouse/trackpad, so skip
+   *  the guard and rely on the lastSyncX rounded-value check instead. */
+  const onScroll = (0, _react.useCallback)(source => e => {
+    if (_reactNative.Platform.OS !== 'web' && draggingSource.current !== source) return;
+    const x = Math.round(e.nativeEvent.contentOffset.x);
+    if (x === lastSyncX.current) return;
+    lastSyncX.current = x;
+    syncOthers(source, x);
+  }, [syncOthers]);
   const getBodyRefCallback = (0, _react.useCallback)(idx => {
     let cb = bodyRefCallbacks.current.get(idx);
     if (!cb) {
@@ -442,55 +469,45 @@ function CompareTable({
       })
     })]
   });
-
-  // Render a single section in fixed-width scroll mode. Unlike `renderTable`
-  // (used in flex mode), the gray header row is rendered full-width OUTSIDE
-  // the body's horizontal ScrollView so it stays put horizontally (it does
-  // not slide with the cells) while still scrolling vertically with the table.
-  // The body rows live inside a horizontal ScrollView that is scroll-synced
-  // with the cards row and every other section's body.
-  const renderSection = (section, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Accordion.default, {
-    title: section.title,
-    defaultExpanded: section.defaultExpanded ?? index === 0,
-    modes: modes,
-    children: [section.header != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  const renderHeaderContent = section => section.header != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      backgroundColor: headerBg,
+      paddingHorizontal: headerPaddingH,
+      paddingVertical: headerPaddingV,
+      borderBottomWidth: cellBorderSize,
+      borderBottomColor: cellBorderColor
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: headerTextStyle,
+      children: section.header
+    })
+  }) : null;
+  const renderBodyContent = (section, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    ref: getBodyRefCallback(index),
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    onScroll: onScroll(index),
+    onScrollBeginDrag: onScrollBeginDrag(index),
+    onScrollEndDrag: onScrollEndDrag(index),
+    onMomentumScrollEnd: onMomentumScrollEnd(index),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
-        width: '100%',
-        backgroundColor: headerBg,
-        paddingHorizontal: headerPaddingH,
-        paddingVertical: headerPaddingV,
-        borderBottomWidth: cellBorderSize,
-        borderBottomColor: cellBorderColor
+        width: contentWidth
       },
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: headerTextStyle,
-        children: section.header
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-      ref: getBodyRefCallback(index),
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      scrollEventThrottle: 16,
-      onScroll: onBodyScroll(index),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          width: contentWidth
-        },
-        children: section.rows.map((row, rowIndex) => {
-          const isLastRow = rowIndex === section.rows.length - 1;
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-            style: {
-              flexDirection: 'row',
-              width: '100%'
-            },
-            children: [Array.from({
-              length: columnCount
-            }).map((_, colIndex) => renderTableCell(renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`), colIndex, isLastRow, colIndex)), showAddCard && renderTableCell(null, gridColumnCount - 1, isLastRow, '__add_spacer__')]
-          }, row.key ?? rowIndex);
-        })
+      children: section.rows.map((row, rowIndex) => {
+        const isLastRow = rowIndex === section.rows.length - 1;
+        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: {
+            flexDirection: 'row',
+            width: '100%'
+          },
+          children: [Array.from({
+            length: columnCount
+          }).map((_, colIndex) => renderTableCell(renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`), colIndex, isLastRow, colIndex)), showAddCard && renderTableCell(null, gridColumnCount - 1, isLastRow, '__add_spacer__')]
+        }, row.key ?? rowIndex);
       })
-    })]
-  }, section.key ?? section.title ?? index);
+    })
+  });
   const outerStyle = {
     width: '100%',
     backgroundColor: cardBg,
@@ -524,43 +541,82 @@ function CompareTable({
   }
 
   // --- fixed-width scroll mode: chained horizontal sync + sticky cards -----
-  // The cards row (index 0) is a sticky header of the vertical ScrollView so
-  // it pins to the top while the sections scroll beneath. The cards row is
-  // itself a horizontal ScrollView, synced with every section body. For the
-  // vertical scroll (and thus the sticky behaviour) to engage, the host must
-  // give CompareTable a bounded height (e.g. a sized container or flex:1).
+  // Build children and stickyHeaderIndices for the vertical ScrollView.
+  // When stickyHeaders is on, section headers are injected as direct children
+  // so React Native's stickyHeaderIndices can pin them with stacking.
+  const scrollChildren = [];
+  const stickyIndices = [];
+  if (showCardsRow) {
+    stickyIndices.push(scrollChildren.length);
+    scrollChildren.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      ref: cardsScrollRef,
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      scrollEventThrottle: 16,
+      onScroll: onScroll('cards'),
+      onScrollBeginDrag: onScrollBeginDrag('cards'),
+      onScrollEndDrag: onScrollEndDrag('cards'),
+      onMomentumScrollEnd: onMomentumScrollEnd('cards'),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          width: contentWidth
+        },
+        children: [columns.map(renderCard), showAddCard && renderAddCard()]
+      })
+    }, "cards-row"));
+  }
+  sections.forEach((section, index) => {
+    const sectionKey = section.key ?? section.title ?? index;
+    const headerContent = renderHeaderContent(section);
+    if (stickyHeaders && headerContent != null) {
+      stickyIndices.push(scrollChildren.length);
+      scrollChildren.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: '100%'
+        },
+        children: stickyHeaderLabel ? headerContent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+          horizontal: true,
+          showsHorizontalScrollIndicator: false,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: {
+              width: contentWidth
+            },
+            children: headerContent
+          })
+        })
+      }, `sticky-header-${sectionKey}`));
+    }
+    scrollChildren.push(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Accordion.default, {
+      title: section.title,
+      defaultExpanded: section.defaultExpanded ?? index === 0,
+      modes: modes,
+      children: [!stickyHeaders && headerContent != null && (stickyHeaderLabel ? headerContent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            width: contentWidth
+          },
+          children: headerContent
+        })
+      })), renderBodyContent(section, index)]
+    }, sectionKey));
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: [outerStyle, style, {
       flexDirection: 'column',
       flex: 1
     }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
       style: {
         width: '100%',
         flex: 1
       },
-      stickyHeaderIndices: showCardsRow ? [0] : [],
+      stickyHeaderIndices: stickyIndices,
       showsVerticalScrollIndicator: false,
       directionalLockEnabled: true,
-      children: [showCardsRow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-        ref: cardsScrollRef,
-        horizontal: true,
-        showsHorizontalScrollIndicator: false,
-        scrollEventThrottle: 16,
-        onScroll: onCardsScroll,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: {
-            flexDirection: 'row',
-            width: contentWidth
-          },
-          children: [columns.map(renderCard), showAddCard && renderAddCard()]
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: {
-          width: '100%'
-        },
-        children: sections.map(renderSection)
-      })]
+      children: scrollChildren
     })
   });
 }

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

@@ -109,6 +109,7 @@ function ContentSheet({
   safeAreaBottom = true,
   pinToBottom = true,
   visible = true,
+  maxHeightPercent = 0.7,
   style,
   ...rest
 }) {
@@ -120,9 +121,6 @@ function ContentSheet({
   const resolved = (0, _react.useMemo)(() => resolveContentSheetStyle(modes), [modes]);
   const processedChildren = (0, _react.useMemo)(() => (0, _reactUtils.cloneChildrenWithModes)((0, _reactUtils.flattenChildren)(children), modes), [children, modes]);
   const paddingBottom = resolved.paddingBottom + (safeAreaBottom ? bottomInset : 0);
-  const containerStyle = (0, _react.useMemo)(() => [pinToBottom ? pinnedStyle : null, resolved.container, {
-    paddingBottom
-  }, style], [pinToBottom, resolved.container, paddingBottom, style]);
 
   // Entrance / exit "pop up from bottom" animation — mirrors the Drawer. The
   // sheet is bottom-anchored, so a positive `translateY` equal to the window
@@ -132,6 +130,11 @@ function ContentSheet({
   const {
     height: windowHeight
   } = (0, _reactNative.useWindowDimensions)();
+  const maxHeight = windowHeight * maxHeightPercent;
+  const containerStyle = (0, _react.useMemo)(() => [pinToBottom ? pinnedStyle : null, resolved.container, {
+    maxHeight,
+    paddingBottom
+  }, style], [pinToBottom, resolved.container, maxHeight, paddingBottom, style]);
   const entrance = (0, _reactNativeReanimated.useSharedValue)(windowHeight);
   (0, _react.useEffect)(() => {
     entrance.value = (0, _reactNativeReanimated.withSpring)(visible ? 0 : windowHeight, SPRING_CONFIG);
@@ -155,6 +158,7 @@ function ContentSheet({
       style: containerStyle,
       spacing: keyboardSpacing,
       entrance: entrance,
+      maxHeight: maxHeight,
       ...rest,
       children: [header, processedChildren]
     });
@@ -162,6 +166,7 @@ function ContentSheet({
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AnimatedSheet, {
     style: containerStyle,
     entrance: entrance,
+    maxHeight: maxHeight,
     ...rest,
     children: [header, processedChildren]
   });
@@ -178,6 +183,7 @@ function KeyboardAwareSheet({
   style,
   spacing,
   entrance,
+  maxHeight,
   children,
   ...rest
 }) {
@@ -194,7 +200,15 @@ function KeyboardAwareSheet({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
     style: [style, animatedStyle],
     ...rest,
-    children: children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: {
+        maxHeight
+      },
+      bounces: false,
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      children: children
+    })
   });
 }
 
@@ -206,6 +220,7 @@ function KeyboardAwareSheet({
 function AnimatedSheet({
   style,
   entrance,
+  maxHeight,
   children,
   ...rest
 }) {
@@ -219,7 +234,15 @@ function AnimatedSheet({
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
     style: [style, animatedStyle],
     ...rest,
-    children: children
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: {
+        maxHeight
+      },
+      bounces: false,
+      showsVerticalScrollIndicator: false,
+      keyboardShouldPersistTaps: "handled",
+      children: children
+    })
   });
 }
 var _default = exports.default = ContentSheet;