jfs-components 0.1.19 → 0.1.23

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/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/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);

package/lib/commonjs/components/Link/Link.js

@@ -0,0 +1,115 @@
+"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 _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 TEXT_ALIGN_MAP = {
+  Left: 'left',
+  Center: 'center'
+};
+const DISABLED_OPACITY = 0.4;
+
+/**
+ * Link — an underlined, pressable text primitive.
+ *
+ * It renders a single React Native `<Text>` (not a `Pressable`), so it flows
+ * inline and can be nested inside {@link TextSegment} exactly like a `Text`
+ * run — the React Native equivalent of an `<a>` inside a `<p>`. Font family,
+ * size, weight, line-height and letter-spacing come from the dedicated `link/*`
+ * tokens, while the colour resolves from `text/foreground` (so a link sits on
+ * the same colour as the surrounding copy). The label is always underlined.
+ *
+ * @example Standalone
+ * ```tsx
+ * <Link text="Forgot PIN?" onPress={() => navigation.navigate('ResetPin')} />
+ * ```
+ *
+ * @example Inline inside TextSegment
+ * ```tsx
+ * <TextSegment>
+ *   <Text>By continuing you agree to our </Text>
+ *   <Link onPress={openTerms}>Terms</Link>
+ *   <Text>.</Text>
+ * </TextSegment>
+ * ```
+ */
+function Link({
+  text,
+  children,
+  onPress,
+  disabled = false,
+  autolayout = 'Fill',
+  textAlign = 'Left',
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  numberOfLines,
+  disableTruncation,
+  singleLine,
+  accessibilityLabel,
+  accessibilityHint
+}) {
+  // Bindings mirror the Figma `Link` node exactly: colour from `text/foreground`
+  // (so the link matches the surrounding copy), everything else from the
+  // dedicated `link/*` tokens.
+  const foreground = (0, _figmaVariablesResolver.getVariableByName)('text/foreground', modes) ?? '#000000';
+  const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('link/fontFamily', modes) ?? 'JioType Var';
+  const fontSize = (0, _figmaVariablesResolver.getVariableByName)('link/fontSize', modes) ?? 12;
+  const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('link/fontWeight', modes) ?? 400;
+  const lineHeight = (0, _figmaVariablesResolver.getVariableByName)('link/lineHeight', modes) ?? 16;
+  const letterSpacing = (0, _figmaVariablesResolver.getVariableByName)('link/letterSpacing', modes) ?? -0.5;
+  const linkStyle = {
+    color: foreground,
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    fontWeight: String(fontWeight),
+    lineHeight: lineHeight,
+    letterSpacing: letterSpacing,
+    textAlign: TEXT_ALIGN_MAP[textAlign],
+    textDecorationLine: 'underline',
+    alignSelf: autolayout === 'Fill' ? 'stretch' : 'flex-start',
+    ...(disabled ? {
+      opacity: DISABLED_OPACITY
+    } : null)
+  };
+  const content = children !== undefined && children !== null && children !== false ? children : text !== undefined ? text : 'Link';
+  const handlePress = (0, _react.useCallback)(event => {
+    if (disabled) return;
+    onPress?.(event);
+  }, [disabled, onPress]);
+  const {
+    style: layoutStyle,
+    ...truncation
+  } = (0, _reactUtils.resolveTextLayout)({
+    disableTruncation,
+    singleLine,
+    numberOfLines
+  });
+  const resolvedLabel = accessibilityLabel ?? (typeof content === 'string' ? content : undefined);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    accessibilityRole: "link",
+    accessibilityState: {
+      disabled
+    },
+    ...(resolvedLabel !== undefined ? {
+      accessibilityLabel: resolvedLabel
+    } : null),
+    ...(accessibilityHint !== undefined ? {
+      accessibilityHint
+    } : null),
+    ...(onPress !== undefined ? {
+      onPress: handlePress
+    } : null),
+    disabled: disabled,
+    style: [linkStyle, style, layoutStyle],
+    ...truncation,
+    children: content
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Link);

package/lib/commonjs/components/ListItem/ListItem.js

@@ -63,6 +63,17 @@ function resolveListItemTokens(modes) {
   const paddingLeft = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/left', resolvedModes) ?? 0;
   const paddingRight = (0, _figmaVariablesResolver.getVariableByName)('listItem/padding/right', resolvedModes) ?? 0;
   const textWrapGap = (0, _figmaVariablesResolver.getVariableByName)('listItem/text wrap', resolvedModes) ?? 0;
+
+  // Container surface — driven by the `List Item Style` collection
+  // (Default | Boxed | Minimal) plus `ListItem State`, `Selectable`,
+  // `Page type` and `Color Mode`. In the default style these all resolve to a
+  // transparent background / no border / 0 radius, so existing usages are
+  // visually unchanged; the "Boxed" style paints a filled, rounded, bordered
+  // surface.
+  const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/background/color', resolvedModes);
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/border/color', resolvedModes);
+  const borderWidth = (0, _figmaVariablesResolver.getVariableByName)('listItem/borderWidth', resolvedModes) ?? 0;
+  const borderRadius = (0, _figmaVariablesResolver.getVariableByName)('listItem/radius', resolvedModes) ?? 0;
   const titleColor = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/color', textModes);
   const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/fontSize', textModes);
   const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('listItem/title/lineHeight', textModes);
@@ -80,7 +91,11 @@ function resolveListItemTokens(modes) {
       paddingTop: paddingTop,
       paddingBottom: paddingBottom,
       paddingLeft: paddingLeft,
-      paddingRight: paddingRight
+      paddingRight: paddingRight,
+      backgroundColor: backgroundColor,
+      borderColor: borderColor,
+      borderWidth,
+      borderRadius
     },
     horizontalLayoutStyle: {
       flexDirection: 'row',

package/lib/commonjs/components/index.js

@@ -267,6 +267,12 @@ Object.defineProperty(exports, "ComparisonBar", {
     return _ComparisonBar.default;
   }
 });
+Object.defineProperty(exports, "ContentSheet", {
+  enumerable: true,
+  get: function () {
+    return _ContentSheet.default;
+  }
+});
 Object.defineProperty(exports, "CoverageBarComparison", {
   enumerable: true,
   get: function () {
@@ -387,6 +393,12 @@ Object.defineProperty(exports, "HStack", {
     return _HStack.default;
   }
 });
+Object.defineProperty(exports, "HeroSection", {
+  enumerable: true,
+  get: function () {
+    return _HeroSection.default;
+  }
+});
 Object.defineProperty(exports, "HoldingsCard", {
   enumerable: true,
   get: function () {
@@ -447,6 +459,12 @@ Object.defineProperty(exports, "LinearProgress", {
     return _LinearProgress.default;
   }
 });
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function () {
+    return _Link.default;
+  }
+});
 Object.defineProperty(exports, "ListGroup", {
   enumerable: true,
   get: function () {
@@ -1011,6 +1029,7 @@ var _FilterBar = _interopRequireDefault(require("./FilterBar/FilterBar"));
 var _FullscreenModal = _interopRequireDefault(require("./FullscreenModal/FullscreenModal"));
 var _Form = _interopRequireWildcard(require("./Form/Form"));
 var _FormField = _interopRequireDefault(require("./FormField/FormField"));
+var _ContentSheet = _interopRequireDefault(require("./ContentSheet/ContentSheet"));
 var _CircularProgressBar = _interopRequireDefault(require("./CircularProgressBar/CircularProgressBar"));
 var _CircularProgressBarDoted = _interopRequireDefault(require("./CircularProgressBarDoted/CircularProgressBarDoted"));
 var _CircularRating = _interopRequireDefault(require("./CircularRating/CircularRating"));
@@ -1020,6 +1039,7 @@ var _ComparisonBar = _interopRequireDefault(require("./ComparisonBar/ComparisonB
 var _AllocationComparisonChart = _interopRequireDefault(require("./AllocationComparisonChart/AllocationComparisonChart"));
 var _MonthlyStatusGrid = _interopRequireWildcard(require("./MonthlyStatusGrid/MonthlyStatusGrid"));
 var _Gauge = _interopRequireDefault(require("./Gauge/Gauge"));
+var _HeroSection = _interopRequireDefault(require("./HeroSection/HeroSection"));
 var _HoldingsCard = _interopRequireDefault(require("./HoldingsCard/HoldingsCard"));
 var _HStack = _interopRequireDefault(require("./HStack/HStack"));
 var _Icon = _interopRequireDefault(require("./Icon/Icon"));
@@ -1027,6 +1047,7 @@ var _IconButton = _interopRequireDefault(require("./IconButton/IconButton"));
 var _IconCapsule = _interopRequireDefault(require("./IconCapsule/IconCapsule"));
 var _Image = _interopRequireDefault(require("./Image/Image"));
 var _LazyList = _interopRequireDefault(require("./LazyList/LazyList"));
+var _Link = _interopRequireDefault(require("./Link/Link"));
 var _LinearMeter = _interopRequireDefault(require("./LinearMeter/LinearMeter"));
 var _LinearProgress = _interopRequireDefault(require("./LinearProgress/LinearProgress"));
 var _ListGroup = _interopRequireDefault(require("./ListGroup/ListGroup"));