jfs-components 0.1.28 → 0.1.32

package/CHANGELOG.md

@@ -4,6 +4,30 @@ 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`).
+- `ContentSheet` — new `visible` prop controls a bottom pop-up / exit animation driven by Reanimated's `withSpring` (same spring config as `Drawer`: damping 32, stiffness 300). Sheet springs up from below the bottom edge on mount / `visible=true` and springs back down on `visible=false`. Animation composes with keyboard avoidance so both `translateY` offsets are summed in a single `useAnimatedStyle`.
+- `CompareTable` — new `columnWidth` prop enables fixed-width scroll mode: each selection card and table cell gets this exact width; the cards row and every section body become independent horizontal `ScrollView`s whose scroll events are chained so they stay aligned in lockstep; the cards row pins to the top as a sticky header on the vertical axis; gray section-header rows render full-width outside the horizontal scroll so they don't slide with the cells.
+- `PdpCcCard` — new `numberOfLines`, `disableTruncation`, and `singleLine` props passed through to the `Title` component for precise control over title truncation and wrapping.
+- `Table` — new `columnWidth` prop applies a fixed width to every column (header + body) for uniform column sizing in scrollable layouts; new `scrollable` prop wraps the table in a horizontal `ScrollView`.
+- Stories and MDX documentation updated for all new features.
+
+---
+
 ## [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.
@@ -17,10 +41,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [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`.
+- Added `ProfileCard` — dark rounded profile summary card (`profileCard/*` tokens) with an `Attached` monogram `Avatar` (optional `IconCapsule` badge), declarative header props (`name`, `monogram`, `avatarSource`, `upiHandles`) or a full `header` slot override, and a body slot below a `Divider`. Forces `context 10: jioPlus` so nested children (`ListItem`, `UpiHandle`, `Text`, `Button`, …) resolve on-dark profile-card tokens automatically; `Profile Card Appearance` mode (`Default` | `Premium`) recolors the whole card via `modes`.
+- `UpiHandle` — avatar visibility is now **source-driven**: the leading image renders only when `source` / `avatarSource` is provided; omitting it hides the avatar and force-sets `UPI Handle Image: False` so left padding stays symmetric (imageless layout used by `ProfileCard` handle pills). Removed the bundled default `Image.png` placeholder. Consumer `UPI Handle Image` mode values are overridden by source presence so avatar visibility and token layout stay in lockstep. New `WithoutImage` story and MDX usage docs.
+- `Section` — `Section.Bento` stories updated with `UpiHandle` pills that pass explicit avatar `source` values, matching the Figma Bento nav/upi layout (node 216-13845).
+- Figma token sync — `context 10` mode renamed `Profile card` → `jioPlus`; `Profile Card Appearance` collection wired for `ProfileCard` / `UpiHandle`.
 - `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.
 
 ---

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
@@ -15,6 +15,7 @@ var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
 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); }
 /**
  * Brand link colour used by the selection-card CTA. The Figma node resolves
  * `button/foreground` to this value, but no reproducible token mode currently
@@ -111,7 +112,10 @@ function CompareTable({
   maxColumns = 4,
   modes = _reactUtils.EMPTY_MODES,
   style,
-  disableTruncation
+  disableTruncation,
+  columnWidth,
+  stickyHeaders = true,
+  stickyHeaderLabel = true
 }) {
   // --- selection card tokens ------------------------------------------------
   const cardBg = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/background/color', modes) ?? '#ffffff';
@@ -168,6 +172,95 @@ function CompareTable({
   const showAddCard = onAddColumn != null && columnCount < maxColumns;
   /** Grid columns shared by the selection-card row and every table row. */
   const gridColumnCount = columnCount + (showAddCard ? 1 : 0);
+  const showCardsRow = columnCount > 0 || showAddCard;
+
+  // --- fixed-width scroll mode -------------------------------------------
+  // `columnWidth` opts the component into scroll mode (see prop doc). In that
+  // mode the cards row and each section's table body are independent
+  // horizontal ScrollViews; their scroll events are chained so they move in
+  // lockstep, and the cards row pins to the top on the vertical axis.
+  const useFixedWidth = columnWidth != null;
+  /** Total scrollable content width shared by every horizontal surface. */
+  const contentWidth = useFixedWidth ? gridColumnCount * columnWidth : 0;
+  const cardsScrollRef = (0, _react.useRef)(null);
+  const bodyScrollRefs = (0, _react.useRef)(new Map());
+  // 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());
+  /** 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 syncOthers = (0, _react.useCallback)((source, x) => {
+    if (source !== 'cards' && cardsScrollRef.current) {
+      cardsScrollRef.current.scrollTo({
+        x,
+        animated: false
+      });
+    }
+    bodyScrollRefs.current.forEach((ref, idx) => {
+      if (source === 'cards' || idx !== source) {
+        ref.scrollTo({
+          x,
+          animated: false
+        });
+      }
+    });
+  }, []);
+  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) {
+      cb = ref => {
+        if (ref) {
+          bodyScrollRefs.current.set(idx, ref);
+          // Bring a freshly-expanded section's body into sync with
+          // the rest of the surfaces.
+          if (lastSyncX.current > 0) {
+            ref.scrollTo({
+              x: lastSyncX.current,
+              animated: false
+            });
+          }
+        } else {
+          bodyScrollRefs.current.delete(idx);
+        }
+      };
+      bodyRefCallbacks.current.set(idx, cb);
+    }
+    return cb;
+  }, []);
   const cardLabelStyle = {
     ...NO_WRAP_TEXT,
     color: cardLabelColor,
@@ -198,8 +291,12 @@ function CompareTable({
     fontWeight: toWeight(cellFontWeight)
   };
   const cardStyle = {
-    flex: 1,
-    minWidth: 0,
+    ...(useFixedWidth ? {
+      width: columnWidth
+    } : {
+      flex: 1,
+      minWidth: 0
+    }),
     minHeight: 147,
     backgroundColor: cardBg,
     borderRadius: cardRadius,
@@ -318,6 +415,7 @@ function CompareTable({
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default.Cell, {
       modes: modes,
       flex: 1,
+      width: useFixedWidth ? columnWidth : undefined,
       align: "left",
       isLastColumn: isLastCol,
       isLastRow: isLastRow,
@@ -371,31 +469,155 @@ function CompareTable({
       })
     })]
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [{
-      width: '100%',
-      backgroundColor: cardBg,
-      borderWidth: 1,
-      borderColor: '#e8e8e8',
-      overflow: 'hidden'
-    }, style],
-    children: [(columnCount > 0 || showAddCard) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_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: {
-        flexDirection: 'row',
-        width: '100%'
+        width: contentWidth
       },
-      children: [columns.map(renderCard), showAddCard && renderAddCard()]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      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);
+      })
+    })
+  });
+  const outerStyle = {
+    width: '100%',
+    backgroundColor: cardBg,
+    borderWidth: 1,
+    borderColor: '#e8e8e8',
+    overflow: 'hidden'
+  };
+
+  // --- flex mode (columnWidth omitted): original behaviour, unchanged -------
+  if (!useFixedWidth) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [outerStyle, style],
+      children: [showCardsRow && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          width: '100%'
+        },
+        children: [columns.map(renderCard), showAddCard && renderAddCard()]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: '100%'
+        },
+        children: sections.map((section, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+          title: section.title,
+          defaultExpanded: section.defaultExpanded ?? index === 0,
+          modes: modes,
+          children: renderTable(section)
+        }, section.key ?? section.title ?? index))
+      })]
+    });
+  }
+
+  // --- fixed-width scroll mode: chained horizontal sync + sticky cards -----
+  // 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.jsx)(_reactNative.ScrollView, {
       style: {
-        width: '100%'
+        width: '100%',
+        flex: 1
       },
-      children: sections.map((section, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
-        title: section.title,
-        defaultExpanded: section.defaultExpanded ?? index === 0,
-        modes: modes,
-        children: renderTable(section)
-      }, section.key ?? section.title ?? index))
-    })]
+      stickyHeaderIndices: stickyIndices,
+      showsVerticalScrollIndicator: false,
+      directionalLockEnabled: true,
+      children: scrollChildren
+    })
   });
 }
 var _default = exports.default = CompareTable;