jfs-components 0.1.0 → 0.1.8

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

@@ -0,0 +1,372 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Accordion = _interopRequireDefault(require("../Accordion/Accordion"));
+var _Image = _interopRequireDefault(require("../Image/Image"));
+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 }; }
+/**
+ * Brand link colour used by the selection-card CTA. The Figma node resolves
+ * `button/foreground` to this value, but no reproducible token mode currently
+ * produces it (the published token store is out of sync), so it is pinned here
+ * to stay faithful to the design.
+ */
+const BRAND_LINK_COLOR = '#5d00b5';
+
+/**
+ * Selection-card close control (Figma node 5568:3492). It is an `IconButton`
+ * pinned to the card's top-right corner. The Figma node resolves its
+ * `iconButton/background` and border to fully transparent (`#ebebed00` /
+ * `#ffffff00`) — values no token mode reproduces — so they are overridden here.
+ * Size (40px) and icon are left to the `IconButton`'s own token resolution
+ * (padding 11 · 2 + icon 18).
+ */
+/** Add-a-card icon button fill + icon (Figma node 5568:3494 direct overrides). */
+const ADD_BUTTON_BG = '#545961';
+const ADD_BUTTON_ICON_COLOR = '#ffffff';
+const closeButtonStyle = {
+  position: 'absolute',
+  top: 1,
+  right: 0,
+  backgroundColor: 'transparent',
+  borderColor: 'transparent'
+};
+
+/** Keeps every text layer on a single line on web. */
+const NO_WRAP_TEXT = {
+  flexShrink: 0,
+  ...(_reactNative.Platform.OS === 'web' ? {
+    whiteSpace: 'nowrap'
+  } : {})
+};
+const toWeight = w => typeof w === 'number' ? `${w}` : w;
+
+/**
+ * A single product/plan column rendered as a selection card at the top of the
+ * table. The card order maps 1:1 to each {@link CompareTableRow}'s `values`.
+ */
+
+/**
+ * Value rendered inside a comparison cell.
+ * - `string` / `number` → rendered as value text.
+ * - `false` → renders the muted "not available" cross icon.
+ * - any React element → rendered as-is (e.g. a `Badge`, `MoneyValue`, icon…).
+ * - `null` / `undefined` / `true` → empty cell.
+ */
+
+/**
+ * A collapsible section. Each section renders as an `Accordion` whose body is a
+ * comparison table that spans the same columns as the selection cards.
+ */
+
+const DEFAULT_COLUMNS = [{
+  label: 'Plan A',
+  actionLabel: 'View details',
+  onRemove: () => {}
+}, {
+  label: 'Plan B',
+  actionLabel: 'View details',
+  onRemove: () => {}
+}];
+const DEFAULT_SECTIONS = [{
+  title: 'Fees & charges',
+  header: 'Annual fees',
+  defaultExpanded: true,
+  rows: [{
+    values: ['₹0', '₹499']
+  }, {
+    values: ['Free', 'Up to ₹1,300']
+  }, {
+    values: ['1x', '1.25x']
+  }]
+}];
+
+/**
+ * CompareTable renders a product comparison surface: a row of selection cards
+ * (one per column) followed by one or more collapsible sections, each holding a
+ * comparison table whose cells line up beneath their column.
+ *
+ * The selection card is an internal sub-component and is intentionally not
+ * exported — it should only be used through `CompareTable`. Implementation of
+ * Figma node `5568:3496` (`Compare table`) with sub-component `5568:3487`
+ * (`selectioncard`).
+ *
+ * @component
+ */
+function CompareTable({
+  columns = DEFAULT_COLUMNS,
+  sections = DEFAULT_SECTIONS,
+  onAddColumn,
+  addColumnLabel = 'Add a card',
+  maxColumns = 4,
+  modes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  // --- selection card tokens ------------------------------------------------
+  const cardBg = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/background/color', modes) ?? '#ffffff';
+  const cardBorderColor = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/border/color', modes) ?? '#eeeeee';
+  const cardBorderSize = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/border/size', modes) ?? 1;
+  const cardGap = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/gap', modes) ?? 12;
+  const cardPaddingH = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/padding/horizontal', modes) ?? 20;
+  const cardPaddingV = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/padding/vertical', modes) ?? 20;
+  const cardLabelColor = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/label/color', modes) ?? '#000000';
+  const cardLabelFontSize = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/label/fontsize', modes) ?? 14;
+  const cardLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/label/fontfamily', modes) ?? 'JioType Var';
+  const cardLabelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/label/fontweight', modes) ?? 700;
+  const imageRadius = (0, _figmaVariablesResolver.getVariableByName)('image/radius', modes) ?? 8;
+
+  // --- add-a-card icon button tokens ---------------------------------------
+  // padding/size/border come from the shared iconButton tokens; the filled
+  // background (#545961) and white icon are the Figma node's direct overrides
+  // (no token mode reproduces them), so they are pinned to match the design.
+  const addBorderColor = (0, _figmaVariablesResolver.getVariableByName)('iconButton/border/color', modes) ?? 'rgba(255,255,255,0)';
+  const addBorderSize = (0, _figmaVariablesResolver.getVariableByName)('iconButton/border/size', modes) ?? 1;
+  const addPadding = (0, _figmaVariablesResolver.getVariableByName)('iconButton/padding', modes) ?? 11;
+  const addIconSize = (0, _figmaVariablesResolver.getVariableByName)('iconButton/icon/size', modes) ?? 18;
+  const addBg = ADD_BUTTON_BG;
+  const addIconColor = ADD_BUTTON_ICON_COLOR;
+
+  // --- table header tokens --------------------------------------------------
+  const headerBg = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/background/color', modes) ?? '#f5f5f5';
+  const headerLabelColor = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/label/color', modes) ?? '#000000';
+  const headerFontSize = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/label/fontsize', modes) ?? 14;
+  const headerFontFamily = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/label/fontfamily', modes) ?? 'JioType Var';
+  const headerFontWeight = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/label/fontweight', modes) ?? 600;
+  const headerPaddingH = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/padding/horizontal', modes) ?? 12;
+  const headerPaddingV = (0, _figmaVariablesResolver.getVariableByName)('comparetableHeader/padding/vertical', modes) ?? 12;
+
+  // --- table cell tokens ----------------------------------------------------
+  const cellBorderColor = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/border/color', modes) ?? '#eeeeee';
+  const cellBorderSize = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/border/size', modes) ?? 1;
+  const cellBg = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/background/color', modes) ?? '#ffffff';
+  const cellLabelColor = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/label/color', modes) ?? '#000000';
+  const cellFontSize = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/label/fontsize', modes) ?? 14;
+  const cellFontFamily = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/label/fontfamily', modes) ?? 'JioType Var';
+  const cellFontWeight = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/label/fontweight', modes) ?? 400;
+  const cellPaddingH = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/padding/horizontal', modes) ?? 12;
+  const cellPaddingV = (0, _figmaVariablesResolver.getVariableByName)('compareTableCell/padding/vertical', modes) ?? 12;
+  const columnCount = columns.length;
+  const showAddCard = onAddColumn != null && columnCount < maxColumns;
+  const cardLabelStyle = {
+    ...NO_WRAP_TEXT,
+    color: cardLabelColor,
+    fontSize: cardLabelFontSize,
+    fontFamily: cardLabelFontFamily,
+    fontWeight: toWeight(cardLabelFontWeight),
+    lineHeight: cardLabelFontSize * 1.1,
+    textAlign: 'center'
+  };
+  const linkStyle = {
+    ...NO_WRAP_TEXT,
+    color: BRAND_LINK_COLOR,
+    fontFamily: cardLabelFontFamily,
+    fontSize: 14,
+    fontWeight: '700',
+    lineHeight: 22
+  };
+  const headerTextStyle = {
+    color: headerLabelColor,
+    fontSize: headerFontSize,
+    fontFamily: headerFontFamily,
+    fontWeight: toWeight(headerFontWeight)
+  };
+  const cellTextStyle = {
+    color: cellLabelColor,
+    fontSize: cellFontSize,
+    fontFamily: cellFontFamily,
+    fontWeight: toWeight(cellFontWeight)
+  };
+  const cardStyle = {
+    flex: 1,
+    minWidth: 0,
+    minHeight: 147,
+    backgroundColor: cardBg,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: cardGap,
+    paddingHorizontal: cardPaddingH,
+    paddingVertical: cardPaddingV
+  };
+  const renderCard = (column, index) => {
+    const isLast = index === columnCount - 1 && !showAddCard;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [cardStyle, {
+        borderBottomWidth: cardBorderSize,
+        borderBottomColor: cardBorderColor,
+        borderRightWidth: isLast ? 0 : cardBorderSize,
+        borderRightColor: cardBorderColor
+      }],
+      children: [column.imageSource != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        imageSource: column.imageSource,
+        width: 66,
+        height: 44,
+        borderRadius: imageRadius,
+        resizeMode: "cover",
+        accessibilityLabel: column.label
+      }), column.label != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: cardLabelStyle,
+        numberOfLines: 2,
+        children: column.label
+      }), column.actionLabel != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: column.onActionPress,
+        accessibilityRole: "button",
+        accessibilityLabel: column.actionLabel,
+        hitSlop: 6,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: linkStyle,
+          children: column.actionLabel
+        })
+      }), column.onRemove != null &&
+      /*#__PURE__*/
+      // Figma node 5568:3492 — an Icon Button (not a capsule):
+      // padding 11 + icon 18 → 40px circle, transparent background,
+      // absolutely pinned to the card's top-right (right:0, top:1).
+      (0, _jsxRuntime.jsx)(_IconButton.default, {
+        iconName: "ic_close",
+        onPress: column.onRemove,
+        modes: modes,
+        accessibilityLabel: `Remove ${column.label ?? 'column'}`,
+        style: closeButtonStyle
+      })]
+    }, column.key ?? column.label ?? index);
+  };
+  const renderAddCard = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    onPress: onAddColumn,
+    accessibilityRole: "button",
+    accessibilityLabel: addColumnLabel,
+    style: [cardStyle, {
+      borderBottomWidth: cardBorderSize,
+      borderBottomColor: cardBorderColor
+    }],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: addPadding * 2 + addIconSize,
+        height: addPadding * 2 + addIconSize,
+        borderRadius: 9999,
+        borderWidth: addBorderSize,
+        borderColor: addBorderColor,
+        backgroundColor: addBg,
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: "ic_add",
+        size: addIconSize,
+        color: addIconColor,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: cardLabelStyle,
+      numberOfLines: 1,
+      children: addColumnLabel
+    })]
+  }, "__add_card__");
+  const renderCellContent = (value, cellKey) => {
+    if (value === false) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+        name: "ic_close",
+        size: cellFontSize + 2,
+        color: cellBorderColor
+      }, cellKey);
+    }
+    if (value === null || value === undefined || value === true) {
+      return null;
+    }
+    if (typeof value === 'string' || typeof value === 'number') {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: cellTextStyle,
+        children: value
+      }, cellKey);
+    }
+    return (0, _reactUtils.cloneChildrenWithModes)(value, modes);
+  };
+  const renderTable = section => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: {
+      width: '100%',
+      borderWidth: cellBorderSize,
+      borderColor: cellBorderColor,
+      overflow: 'hidden'
+    },
+    children: [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
+      })
+    }), section.rows.map((row, rowIndex) => {
+      const isLastRow = rowIndex === section.rows.length - 1;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          flexDirection: 'row',
+          width: '100%'
+        },
+        children: Array.from({
+          length: columnCount
+        }).map((_, colIndex) => {
+          const isLastCol = colIndex === columnCount - 1;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: {
+              flex: 1,
+              minWidth: 0,
+              backgroundColor: cellBg,
+              justifyContent: 'center',
+              paddingHorizontal: cellPaddingH,
+              paddingVertical: cellPaddingV,
+              borderRightWidth: isLastCol ? 0 : cellBorderSize,
+              borderRightColor: cellBorderColor,
+              borderBottomWidth: isLastRow ? 0 : cellBorderSize,
+              borderBottomColor: cellBorderColor
+            },
+            children: renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
+          }, colIndex);
+        })
+      }, row.key ?? rowIndex);
+    })]
+  });
+  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, {
+      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,
+        style: {
+          paddingHorizontal: headerPaddingH
+        },
+        children: renderTable(section)
+      }, section.key ?? section.title ?? index))
+    })]
+  });
+}
+var _default = exports.default = CompareTable;

package/lib/commonjs/components/ComparisonBar/ComparisonBar.js

@@ -0,0 +1,266 @@
+"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 _Button = _interopRequireDefault(require("../Button/Button"));
+var _Image = _interopRequireDefault(require("../Image/Image"));
+var _IconCapsule = _interopRequireDefault(require("../IconCapsule/IconCapsule"));
+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); }
+/**
+ * A single slot in the {@link ComparisonBar}. Each item is either empty (the
+ * "Add" state — a tappable `+` capsule) or filled with an image (the
+ * "Image Added" state — the image plus a dismiss capsule in the corner).
+ *
+ * The presence of {@link ComparisonBarItem.imageSource} is what toggles the
+ * state: provide a source to show the image, leave it `undefined`/`null` to
+ * show the empty add slot. This keeps the component fully controlled — the
+ * `ComparisonBar` never owns the image state itself, so the consumer decides
+ * (e.g. after opening a file/asset picker) when and how an item flips between
+ * the two states.
+ */
+
+const ITEM_WIDTH = 45;
+const ITEM_HEIGHT = 44;
+function resolveTokens(modes) {
+  const cardGap = (0, _figmaVariablesResolver.getVariableByName)('compareFloatCard/gap', modes) ?? 12;
+  const cardPadH = (0, _figmaVariablesResolver.getVariableByName)('compareFloatCard/padding/horizontal', modes) ?? 12;
+  const cardPadV = (0, _figmaVariablesResolver.getVariableByName)('compareFloatCard/padding/vertical', modes) ?? 10;
+  const cardRadius = (0, _figmaVariablesResolver.getVariableByName)('compareFloatCard/radius', modes) ?? 12;
+  const cardBackground = (0, _figmaVariablesResolver.getVariableByName)('compareFloatCard/background', modes) ?? '#ffffff';
+  const cardBorderColor = (0, _figmaVariablesResolver.getVariableByName)('compareFloatCard/border/color', modes) ?? '#f5f5f5';
+  const itemPadH = (0, _figmaVariablesResolver.getVariableByName)('compareCardItem/padding/horizontal', modes) ?? 6;
+  const itemPadV = (0, _figmaVariablesResolver.getVariableByName)('compareCardItem/padding/vertical', modes) ?? 8;
+  const itemRadius = (0, _figmaVariablesResolver.getVariableByName)('compareCardItem/radius', modes) ?? 8;
+  const itemBackground = (0, _figmaVariablesResolver.getVariableByName)('compareCardItem/background', modes) ?? '#ebebed';
+  const imageRadius = (0, _figmaVariablesResolver.getVariableByName)('image/radius', modes) ?? 8;
+  return {
+    card: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: cardGap,
+      paddingHorizontal: cardPadH,
+      paddingVertical: cardPadV,
+      borderRadius: cardRadius,
+      borderWidth: 1,
+      borderColor: cardBorderColor,
+      backgroundColor: cardBackground,
+      alignSelf: 'flex-start'
+    },
+    item: {
+      width: ITEM_WIDTH,
+      height: ITEM_HEIGHT,
+      borderRadius: itemRadius,
+      backgroundColor: itemBackground,
+      paddingHorizontal: itemPadH,
+      paddingVertical: itemPadV,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    itemImageState: {
+      paddingHorizontal: itemPadH,
+      paddingVertical: itemPadV
+    },
+    imageRadius
+  };
+}
+/**
+ * Internal slot renderer for {@link ComparisonBar}. Intentionally NOT exported
+ * — it is meaningless outside of a `ComparisonBar` (its layout, sizing and
+ * remove affordance all assume the surrounding card) and is kept private so
+ * the public surface stays a single, cohesive component.
+ */
+function Additem({
+  item,
+  index,
+  tokens,
+  addCapsuleModes,
+  closeCapsuleModes,
+  onPress,
+  onRemove
+}) {
+  const hasImage = item.imageSource != null && item.imageSource !== '';
+  const id = item.id ?? index;
+  const addWebProps = (0, _webPlatformUtils.usePressableWebSupport)({
+    restProps: {},
+    onPress: () => onPress?.(id, index),
+    disabled: false,
+    accessibilityLabel: item.accessibilityLabel ?? 'Add item to comparison'
+  });
+  const removeWebProps = (0, _webPlatformUtils.usePressableWebSupport)({
+    restProps: {},
+    onPress: () => onRemove?.(id, index),
+    disabled: false,
+    accessibilityLabel: item.accessibilityLabel ?? 'Remove item from comparison'
+  });
+  if (!hasImage) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: tokens.item,
+      accessibilityRole: "button",
+      accessibilityLabel: item.accessibilityLabel ?? 'Add item to comparison',
+      onPress: () => onPress?.(id, index),
+      ...addWebProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+        iconName: "ic_add",
+        modes: addCapsuleModes,
+        style: ADD_CAPSULE_STYLE
+      })
+    });
+  }
+
+  // Mobile-first: the entire filled slot is the remove target, not just the
+  // tiny close capsule (which a fingertip struggles to hit). The capsule stays
+  // purely as a visual affordance and is marked non-interactive so it never
+  // intercepts the press from the surrounding Pressable.
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    style: [tokens.item, tokens.itemImageState],
+    accessibilityRole: "button",
+    accessibilityLabel: item.accessibilityLabel ?? 'Remove item from comparison',
+    onPress: () => onRemove?.(id, index),
+    ...removeWebProps,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+      imageSource: item.imageSource,
+      width: "100%",
+      height: "100%",
+      borderRadius: tokens.imageRadius,
+      resizeMode: "cover",
+      accessibilityLabel: item.accessibilityLabel ?? 'Comparison item image'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: CLOSE_CAPSULE_WRAPPER_STYLE,
+      pointerEvents: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconCapsule.default, {
+        iconName: "ic_close",
+        modes: closeCapsuleModes
+      })
+    })]
+  });
+}
+
+// The Add capsule is the transparent IconCapsule variant from Figma (the gray
+// item box is the visible surface); its size/icon come from the resolved
+// `Icon Capsule Size: S` tokens, we only flatten the background/border here.
+const ADD_CAPSULE_STYLE = {
+  backgroundColor: 'transparent',
+  borderColor: 'transparent'
+};
+
+// Positions the dismiss IconCapsule in the slot's top-right corner. The capsule
+// itself (size/background/icon) is fully token-driven via `closeCapsuleModes`.
+const CLOSE_CAPSULE_WRAPPER_STYLE = {
+  position: 'absolute',
+  top: 1,
+  right: 1
+};
+
+// Mode overrides applied on top of the consumer's `modes` for each capsule.
+// These mirror the Figma component's IconCapsule variant selections so the
+// sizing and colours come from design tokens instead of magic numbers.
+const ADD_CAPSULE_MODE_OVERRIDES = {
+  'Icon Capsule Size': 'XS'
+};
+const CLOSE_CAPSULE_MODE_OVERRIDES = {
+  AppearanceBrand: 'Neutral',
+  Emphasis: 'Medium',
+  'Icon Capsule Size': 'XS'
+};
+
+/**
+ * ComparisonBar — a floating card that lets a user assemble a set of items to
+ * compare, then trigger the comparison.
+ *
+ * Each slot is fully controlled via its `imageSource`: an empty slot shows a
+ * tappable `+` (the "Add" state) and a filled slot shows the image with a
+ * dismiss capsule (the "Image Added" state). The component never sources or
+ * stores images itself — when an empty slot is pressed it fires `onItemPress`
+ * with the item's id/index so the consumer can open whatever picker is
+ * appropriate and then update that item's `imageSource` to flip its state.
+ * Tapping a filled slot (anywhere on it — a mobile-friendly hit target, with
+ * the dismiss capsule as a visual affordance) fires `onItemRemove` so the
+ * consumer can clear the source again.
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState<ComparisonBarItem[]>([
+ *   { id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' },
+ * ])
+ *
+ * <ComparisonBar
+ *   items={items}
+ *   onItemPress={async (id) => {
+ *     const uri = await openImagePicker()
+ *     setItems(prev => prev.map(it => it.id === id ? { ...it, imageSource: uri } : it))
+ *   }}
+ *   onItemRemove={(id) =>
+ *     setItems(prev => prev.map(it => it.id === id ? { ...it, imageSource: null } : it))
+ *   }
+ *   onCompare={runComparison}
+ * />
+ * ```
+ */
+function ComparisonBar({
+  items,
+  onItemPress,
+  onItemRemove,
+  onCompare,
+  compareLabel = 'Compare',
+  compareDisabled,
+  disableCompareWhenEmpty = true,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
+
+  // Capsule modes = consumer modes + this component's fixed IconCapsule variant
+  // selections. Memoized so each `Additem`'s `IconCapsule` keeps a stable
+  // `modes` identity and hits the resolver cache.
+  const addCapsuleModes = (0, _react.useMemo)(() => ({
+    ...modes,
+    ...ADD_CAPSULE_MODE_OVERRIDES
+  }), [modes]);
+  const closeCapsuleModes = (0, _react.useMemo)(() => ({
+    ...modes,
+    ...CLOSE_CAPSULE_MODE_OVERRIDES
+  }), [modes]);
+
+  // An explicit `compareDisabled` always wins (functional disable — the tap is
+  // truly blocked, not merely dimmed). Otherwise auto-disable while no slot has
+  // an image, since there is nothing to compare yet.
+  const hasAnyImage = (0, _react.useMemo)(() => items.some(it => it.imageSource != null && it.imageSource !== ''), [items]);
+  const isCompareDisabled = compareDisabled ?? (disableCompareWhenEmpty && !hasAnyImage);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [tokens.card, style],
+    children: [items.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Additem, {
+      item: item,
+      index: index,
+      tokens: tokens,
+      addCapsuleModes: addCapsuleModes,
+      closeCapsuleModes: closeCapsuleModes,
+      onPress: onItemPress,
+      onRemove: onItemRemove
+    }, item.id ?? index)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      label: compareLabel,
+      modes: modes,
+      disabled: isCompareDisabled,
+      ...(onCompare !== undefined ? {
+        onPress: onCompare
+      } : {})
+    })]
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(ComparisonBar);

package/lib/commonjs/components/Drawer/Drawer.js

@@ -10,7 +10,9 @@ var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
+var _Overlay = _interopRequireDefault(require("../Overlay/Overlay"));
 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 AnimatedScrollView = _reactNativeReanimated.default.createAnimatedComponent(_reactNativeGestureHandler.ScrollView);
 
@@ -72,7 +74,9 @@ function DrawerInner({
   contentContainerStyle,
   showsVerticalScrollIndicator = false,
   bottomInset = 80,
-  onStateChange
+  onStateChange,
+  showOverlay = false,
+  onOverlayPress
 }, ref) {
   const {
     height: screenHeight
@@ -370,10 +374,15 @@ function DrawerInner({
     // Per the standard react-native-gesture-handler architecture, a single
     // GestureHandlerRootView must wrap the app root; this overlay only needs to
     // let touches fall through where the sheet isn't.
-    (0, _jsxRuntime.jsx)(_reactNative.View, {
+    (0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [styles.host, style],
       pointerEvents: "box-none",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+      children: [showOverlay ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.default, {
+        modes: modes,
+        ...(onOverlayPress ? {
+          onPress: onOverlayPress
+        } : {})
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
         gesture: gesture,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
           style: [styles.sheet, {
@@ -446,7 +455,7 @@ function DrawerInner({
             })]
           })
         })
-      })
+      })]
     })
   );
 }