jfs-components 0.1.19 → 0.1.25

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.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`.
+- Added `HeroSection` — page-hero block with title/subtitle, search + filter row (`InputSearch` + tonal `IconButton`), and replaceable `titleSlot` / `searchSlot`; token-driven spacing and default modes for Page Hero context.
+- Added `ContentSheet` — bottom-anchored sheet surface with auto height, rounded top corners, `modes` cascade to slot children, optional keyboard avoidance via UI-thread `useAnimatedKeyboard`, and safe-area bottom inset support.
+- `CheckboxItem` — `children` is now the primary label slot (mirrors the Figma slot); legacy `label` prop kept for backward compatibility but deprecated.
+- `ListItem` — container surface tokens from the `List Item Style` collection (`backgroundColor`, `borderColor`, `borderWidth`, `borderRadius`); Default style remains visually unchanged; Boxed style paints a filled, rounded, bordered surface.
+- `Image` — new `cache` prop for iOS remote URL cache control (`default` / `reload` / `force-cache` / `only-if-cached`); `onLoad` and `onError` forwarded to RN `<Image>`.
+- Card-family components (`Card`, `CardInsight`, `CardProviderInfo`, `MediaCard`, `DebitCard`, `CardFeedback`, `RechargeCard`, `TestimonialsCard`) — removed ad-hoc pressed opacity; pressed feedback now comes from design tokens.
+- Library-wide Figma token sync and MDX token documentation refresh across 40+ components; updated `figma-modes.generated.ts`, `.token-metadata.json`, and Coin Variables tokens.
+
+---
+
 ## [0.1.19] - 2026-06-29
 
 - Card components — optional `onPress` handler added to `Card`, `CardInsight`, `CardProviderInfo`, `MediaCard`, `DebitCard`, `CardFeedback`, `RechargeCard`, and `TestimonialsCard`. When set, the card renders through a `Pressable` with `accessibilityRole="button"`, optional `disabled`, and a pressed-state opacity feedback; when omitted, behaviour is unchanged.

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

@@ -30,13 +30,18 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * ```tsx
  * const [checked, setChecked] = useState(false)
  *
+ * // Recommended: pass the label via the children slot.
  * <CheckboxItem
- *   label="Fixed deposit • 0245"
  *   checked={checked}
  *   onValueChange={setChecked}
  *   control="leading"
  *   modes={{ 'Color Mode': 'Light' }}
- * />
+ * >
+ *   Fixed deposit • 0245
+ * </CheckboxItem>
+ *
+ * // Still supported (deprecated): the `label` prop.
+ * <CheckboxItem label="Fixed deposit • 0245" />
  * ```
  */
 const CheckboxItem = /*#__PURE__*/(0, _react.forwardRef)(function CheckboxItem({
@@ -44,7 +49,8 @@ const CheckboxItem = /*#__PURE__*/(0, _react.forwardRef)(function CheckboxItem({
   defaultChecked = false,
   onValueChange,
   disabled = false,
-  label = 'Fixed deposit • 0245',
+  children,
+  label,
   control = 'leading',
   endSlot,
   endSlotWidth = 80,
@@ -53,6 +59,16 @@ const CheckboxItem = /*#__PURE__*/(0, _react.forwardRef)(function CheckboxItem({
   labelStyle,
   accessibilityLabel
 }, ref) {
+  // Label slot resolution — the `children` slot is the primary API; the legacy
+  // `label` prop is a backward-compatible fallback. Precedence:
+  //   1. `children`, when provided (non-null / non-false).
+  //   2. otherwise the legacy `label` prop, whenever it was passed at all —
+  //      including an explicit `null`/`false`, which (as before) hides the
+  //      label entirely.
+  //   3. otherwise the Figma placeholder, so the default story still renders
+  //      something meaningful.
+  const hasChildren = children != null && children !== false;
+  const slotContent = hasChildren ? children : label !== undefined ? label : 'Fixed deposit • 0245';
   const isTrailing = control === 'trailing';
   const isControlled = controlledChecked !== undefined;
   const [internalChecked, setInternalChecked] = (0, _react.useState)(defaultChecked);
@@ -91,7 +107,7 @@ const CheckboxItem = /*#__PURE__*/(0, _react.forwardRef)(function CheckboxItem({
     lineHeight: labelLineHeight,
     fontWeight: labelFontWeight
   };
-  const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
+  const a11yLabel = accessibilityLabel ?? (typeof slotContent === 'string' ? slotContent : undefined);
   const checkboxNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
     checked: isChecked,
     disabled: disabled,
@@ -101,17 +117,24 @@ const CheckboxItem = /*#__PURE__*/(0, _react.forwardRef)(function CheckboxItem({
       accessibilityLabel: a11yLabel
     } : {})
   });
-  const labelNode = label != null && label !== false ? typeof label === 'string' || typeof label === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+
+  // A plain string/number renders with the token-driven label style. Any other
+  // node is treated as custom slot content: it fills the label region and
+  // receives the parent `modes` (so nested design-system components theme
+  // correctly). An explicit null/false hides the label entirely (legacy
+  // behaviour of the `label` prop).
+  const isTextSlot = typeof slotContent === 'string' || typeof slotContent === 'number';
+  const labelNode = slotContent == null || slotContent === false ? null : isTextSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
     style: [resolvedLabelStyle, labelStyle],
     selectable: false,
-    children: label
+    children: slotContent
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: {
       flex: 1,
       minWidth: 0
     },
-    children: label
-  }) : null;
+    children: (0, _reactUtils.cloneChildrenWithModes)(slotContent, modes)
+  });
   const endSlotNode = endSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: {
       width: endSlotWidth,

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

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const IS_WEB = _reactNative.Platform.OS === 'web';
+function resolveContentSheetStyle(modes) {
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('contentSheet/bg', modes);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('contentSheet/gap', modes);
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('contentSheet/padding/horizontal', modes);
+  const paddingTop = (0, _figmaVariablesResolver.getVariableByName)('contentSheet/padding/top', 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);
+  return {
+    container: {
+      backgroundColor,
+      gap,
+      paddingHorizontal,
+      paddingTop,
+      // paddingBottom is applied separately so the safe-area inset can be added.
+      borderTopLeftRadius: radiusTop,
+      borderTopRightRadius: radiusTop,
+      borderBottomLeftRadius: radiusBottom,
+      borderBottomRightRadius: radiusBottom,
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      overflow: 'hidden'
+    },
+    paddingBottom
+  };
+}
+const pinnedStyle = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  bottom: 0
+};
+
+/**
+ * ContentSheet — a bottom-anchored surface that is essentially one big slot
+ * with padding and rounded top corners, mirroring the Figma "Content Sheet".
+ *
+ * Behaviour highlights:
+ *  - **Auto height (free & automatic).** The sheet never sets an explicit
+ *    height. React Native's layout engine (Yoga) sizes it to its children on
+ *    the native thread, so when the slot content grows or shrinks the sheet
+ *    follows with zero JS measurement and zero extra re-renders — the most
+ *    performant option possible.
+ *  - **Keyboard avoidance** on iOS and Android via `avoidKeyboard` (UI-thread
+ *    `useAnimatedKeyboard`, no re-renders).
+ *  - **Bottom pinned** by default; opt out with `pinToBottom={false}`.
+ *  - **Token-driven** styling via `getVariableByName` + `modes`, with `modes`
+ *    cascaded to all slot children.
+ */
+function ContentSheet({
+  children,
+  modes = _reactUtils.EMPTY_MODES,
+  avoidKeyboard = true,
+  keyboardSpacing = 0,
+  safeAreaBottom = true,
+  pinToBottom = true,
+  style,
+  ...rest
+}) {
+  // Read the safe-area inset directly from context (rather than
+  // `useSafeAreaInsets`, which throws when no provider is mounted). This keeps
+  // the sheet usable without a `SafeAreaProvider` — it simply falls back to 0.
+  const safeAreaInsets = (0, _react.useContext)(_reactNativeSafeAreaContext.SafeAreaInsetsContext);
+  const bottomInset = safeAreaInsets?.bottom ?? 0;
+  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]);
+
+  // Switching between the keyboard-aware and plain implementation is keyed off
+  // `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.
+  if (avoidKeyboard && !IS_WEB) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(KeyboardAwareSheet, {
+      style: containerStyle,
+      spacing: keyboardSpacing,
+      ...rest,
+      children: processedChildren
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: containerStyle,
+    ...rest,
+    children: processedChildren
+  });
+}
+/**
+ * Native-only wrapper that lifts the sheet by the live keyboard height. The
+ * translation is computed on the UI thread from `useAnimatedKeyboard`, so the
+ * sheet tracks the keyboard frame-for-frame without any JS work.
+ */
+function KeyboardAwareSheet({
+  style,
+  spacing,
+  children,
+  ...rest
+}) {
+  const keyboard = (0, _reactNativeReanimated.useAnimatedKeyboard)();
+  const keyboardStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    const height = keyboard.height.value;
+    return {
+      transform: [{
+        translateY: height > 0 ? -(height + spacing) : 0
+      }]
+    };
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+    style: [style, keyboardStyle],
+    ...rest,
+    children: children
+  });
+}
+var _default = exports.default = ContentSheet;

package/lib/commonjs/components/HeroSection/HeroSection.js

@@ -0,0 +1,165 @@
+"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 _Title = _interopRequireDefault(require("../Title/Title"));
+var _InputSearch = _interopRequireDefault(require("../InputSearch/InputSearch"));
+var _IconButton = _interopRequireDefault(require("../IconButton/IconButton"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// The filter button in the design is a tonal "secondary" variant (light-purple
+// fill, purple icon). These modes reproduce `iconButton/background = #dbcfff`
+// and `iconButton/icon/color = #5d00b5`. Applied as defaults so the button
+// matches the Figma design out of the box; consumer-provided `modes` still win.
+const FILTER_BUTTON_MODES = {
+  AppearanceBrand: 'Secondary',
+  Emphasis: 'Medium'
+};
+
+// Inside a Hero Section the Title is flush with the section padding — the
+// `title/padding/*` tokens default to 16 but resolve to 0 in the `Page Hero`
+// context (matching the Figma design). Cascaded so the title lines up with the
+// search row instead of getting a double 16px inset.
+const TITLE_MODES = {
+  context7: 'Page Hero'
+};
+/**
+ * HeroSection is a page-level header block: a title (with optional subtitle),
+ * an optional search row (a flexible search input plus a trailing filter
+ * button), and a free-form content slot below.
+ *
+ * All spacing/background values resolve from the `HeroSection / Output` design
+ * token collection via `getVariableByName`. `modes` cascade to every slot and
+ * child component so downstream tokens stay in sync.
+ *
+ * @example
+ * ```tsx
+ * <HeroSection
+ *   title="Transactions"
+ *   subtitle="Last 30 days"
+ *   searchValue={query}
+ *   onSearchChange={setQuery}
+ *   onFilterPress={openFilters}
+ * >
+ *   <TransactionList data={items} />
+ * </HeroSection>
+ * ```
+ */
+function HeroSection({
+  title = 'Page Title',
+  subtitle = 'Subtitle',
+  titleTextAlign = 'Left',
+  showTitle = true,
+  titleSlot,
+  showSearch = true,
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = 'Search',
+  searchSlot,
+  showFilter = true,
+  filterIcon = 'ic_filter',
+  onFilterPress,
+  filterAccessibilityLabel = 'Filter',
+  filterSlot,
+  children,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const gap = Number((0, _figmaVariablesResolver.getVariableByName)('heroSection/gap', modes));
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('heroSection/padding/horizontal', modes));
+  const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('heroSection/padding/vertical', modes));
+  const containerStyle = {
+    backgroundColor: '#ffffff',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    width: '100%'
+  };
+  const titleContent = (0, _react.useMemo)(() => {
+    if (titleSlot !== undefined && titleSlot !== null) {
+      return (0, _reactUtils.cloneChildrenWithModes)(titleSlot, modes);
+    }
+    if (!showTitle) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Title.default, {
+      title: title,
+      subtitle: subtitle,
+      textAlign: titleTextAlign,
+      modes: {
+        ...TITLE_MODES,
+        ...modes
+      }
+    });
+  }, [titleSlot, showTitle, title, subtitle, titleTextAlign, modes]);
+  const searchInput = (0, _react.useMemo)(() => {
+    if (searchSlot !== undefined && searchSlot !== null) {
+      return (0, _reactUtils.cloneChildrenWithModes)(searchSlot, modes);
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSearch.default, {
+      supportText: false,
+      placeholder: searchPlaceholder,
+      value: searchValue,
+      onChangeText: onSearchChange,
+      containerStyle: {
+        flex: 1
+      },
+      modes: modes
+    });
+  }, [searchSlot, searchPlaceholder, searchValue, onSearchChange, modes]);
+  const filterControl = (0, _react.useMemo)(() => {
+    if (filterSlot !== undefined && filterSlot !== null) {
+      return (0, _reactUtils.cloneChildrenWithModes)(filterSlot, modes);
+    }
+    if (!showFilter) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+      iconName: filterIcon,
+      onPress: onFilterPress,
+      accessibilityLabel: filterAccessibilityLabel,
+      modes: {
+        ...FILTER_BUTTON_MODES,
+        ...modes
+      }
+    });
+  }, [filterSlot, showFilter, filterIcon, onFilterPress, filterAccessibilityLabel, modes]);
+  const searchRow = searchSlot !== undefined && searchSlot !== null ? true : showSearch;
+  const bodyContent = (0, _react.useMemo)(() => {
+    if (children === undefined || children === null) return null;
+    return (0, _reactUtils.cloneChildrenWithModes)(children, modes);
+  }, [children, modes]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    testID: testID,
+    children: [titleContent, searchRow ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap,
+        width: '100%'
+      },
+      children: [searchInput, filterControl]
+    }) : null, bodyContent != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: '100%'
+      },
+      children: bodyContent
+    }) : null]
+  });
+}
+var _default = exports.default = HeroSection;

package/lib/commonjs/components/Image/Image.js

@@ -11,11 +11,32 @@ var _SkeletonGroup = require("../../skeleton/SkeletonGroup");
 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 normalizeSource(imageSource) {
+/**
+ * iOS URL cache control (maps to RN's `source.cache`, no-op on Android/web):
+ *  - `'default'`        — use the native platform's default caching.
+ *  - `'reload'`         — ignore any cache, always fetch from the network.
+ *  - `'force-cache'`    — use the cached response regardless of age; fetch
+ *                          only if absent.
+ *  - `'only-if-cached'` — use the cache only; never hit the network.
+ */
+
+function normalizeSource(imageSource, cache) {
   if (imageSource == null) return undefined;
-  if (typeof imageSource === 'string') return {
-    uri: imageSource
-  };
+  if (typeof imageSource === 'string') {
+    return cache ? {
+      uri: imageSource,
+      cache
+    } : {
+      uri: imageSource
+    };
+  }
+  // Only remote sources (single object with a `uri`) can carry a cache policy.
+  if (cache && !Array.isArray(imageSource) && typeof imageSource === 'object' && 'uri' in imageSource) {
+    return {
+      ...imageSource,
+      cache
+    };
+  }
   return imageSource;
 }
 
@@ -51,9 +72,12 @@ function Image({
   accessibilityLabel,
   accessibilityElementsHidden,
   importantForAccessibility,
-  loading
+  loading,
+  cache,
+  onLoad,
+  onError
 }) {
-  const source = (0, _react.useMemo)(() => normalizeSource(imageSource), [imageSource]);
+  const source = (0, _react.useMemo)(() => normalizeSource(imageSource, cache), [imageSource, cache]);
 
   // Explicit { width, height } means a "fill an exact box" layout — typically a
   // full-bleed hero/background where the asset is high-res and sharpness
@@ -110,7 +134,9 @@ function Image({
     resizeMethod: effectiveResizeMethod,
     accessibilityLabel: accessibilityLabel,
     accessibilityElementsHidden: accessibilityElementsHidden,
-    importantForAccessibility: importantForAccessibility
+    importantForAccessibility: importantForAccessibility,
+    onLoad: onLoad,
+    onError: onError
   });
 }
 var _default = exports.default = /*#__PURE__*/_react.default.memo(Image);