jfs-components 0.1.18 → 0.1.23

package/CHANGELOG.md

@@ -4,6 +4,25 @@ 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.
+
+---
+
 ## [0.1.18] - 2026-06-29
 
 - **Fix:** Remove `@react-native-masked-view/masked-view` — fixes `Element type is invalid` crash on New Architecture (`ProductMerchandisingCard` image cards, `AvatarGroup`, `GlassFill` progressive blur). All masking now uses `react-native-svg` (no new peer deps; consumers can drop `masked-view` if added as a workaround).

package/lib/commonjs/components/Card/Card.js

@@ -38,7 +38,10 @@ function Card({
   children,
   modes = _reactUtils.EMPTY_MODES,
   mediaAspectRatio = 154 / 116,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   // Resolve Card Container Tokens
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('card/background/color', modes);
@@ -102,22 +105,36 @@ function Card({
     paddingHorizontal: contentPaddingHorizontal,
     paddingVertical: contentPaddingVertical
   };
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: headerWrapperStyle,
+      children: headerWithModes
+    }), media && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: mediaWrapperStyle,
+      children: mediaWithModes
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: contentWrapperStyle,
+      children: children
+    })]
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(CardContext.Provider, {
     value: {
       modes
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    children: onPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [containerStyle, style],
-      children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: headerWrapperStyle,
-        children: headerWithModes
-      }), media && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: mediaWrapperStyle,
-        children: mediaWithModes
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: contentWrapperStyle,
-        children: children
-      })]
+      accessibilityLabel: accessibilityLabel,
+      children: content
     })
   });
 }

package/lib/commonjs/components/CardFeedback/CardFeedback.js

@@ -29,7 +29,10 @@ const CardFeedbackContext = /*#__PURE__*/(0, _react.createContext)({});
 function CardFeedback({
   children,
   modes: propModes,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const modes = {
     'Appearance.System': 'positive',
@@ -58,8 +61,19 @@ function CardFeedback({
     value: {
       modes
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    children: onPress ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: children
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [containerStyle, style],
+      accessibilityLabel: accessibilityLabel,
       children: children
     })
   });

package/lib/commonjs/components/CardInsight/CardInsight.js

@@ -33,7 +33,10 @@ function CardInsight({
   footer,
   divider,
   modes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const background = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/background', modes) ?? '#ffffff';
   const radius = (0, _figmaVariablesResolver.getVariableByName)('cardInsight/radius', modes) ?? 12;
@@ -106,18 +109,18 @@ function CardInsight({
   };
   const footerNode = renderFooter();
   const showDivider = footerNode !== null && divider !== false && divider !== null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [{
-      backgroundColor: background,
-      borderRadius: radius,
-      borderWidth,
-      borderColor,
-      paddingHorizontal,
-      paddingVertical,
-      gap,
-      overflow: 'hidden',
-      alignItems: 'stretch'
-    }, style],
+  const containerStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    borderWidth,
+    borderColor,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    overflow: 'hidden',
+    alignItems: 'stretch'
+  };
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: {
         flexDirection: 'row',
@@ -165,5 +168,23 @@ function CardInsight({
       children: renderSlot()
     }), showDivider ? renderDivider() : null, footerNode]
   });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? title,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }
 var _default = exports.default = CardInsight;

package/lib/commonjs/components/CardProviderInfo/CardProviderInfo.js

@@ -23,7 +23,10 @@ function CardProviderInfo({
   imageSource,
   children,
   modes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const background = (0, _figmaVariablesResolver.getVariableByName)('card/providerInfo/background', modes) ?? '#fef4e5';
   const border = (0, _figmaVariablesResolver.getVariableByName)('card/providerInfo/border', modes) ?? '#fef4e5';
@@ -48,8 +51,7 @@ function CardProviderInfo({
   for (let i = 0; i < childArray.length; i += 2) {
     rows.push(childArray.slice(i, i + 2));
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [containerStyle, style],
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductLabel.default, {
       label: label,
       imageSource: imageSource,
@@ -72,5 +74,23 @@ function CardProviderInfo({
       }, i))
     })]
   });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? label,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }
 var _default = exports.default = CardProviderInfo;

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

@@ -22,7 +22,10 @@ function DebitCard({
   bankLogoSlot,
   providerLogoSlot,
   modes: propModes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const {
     modes: globalModes
@@ -121,8 +124,7 @@ function DebitCard({
     };
     return cardArtSource;
   }, [cardArtSource]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [containerStyle, style],
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: headerStyle,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -162,5 +164,23 @@ function DebitCard({
       })]
     })]
   });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: accessibilityLabel ?? `${bankName} ${cardType} ${cardNumber}`,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityLabel: accessibilityLabel,
+    children: content
+  });
 }
 var _default = exports.default = DebitCard;

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;