jfs-components 0.1.18 → 0.1.23

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

@@ -44,7 +44,10 @@ function MediaCard({
   media,
   children,
   modes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   const radius = parseFloat((0, _figmaVariablesResolver.getVariableByName)('cardMedia/radius', modes));
   const containerStyle = {
@@ -59,17 +62,31 @@ function MediaCard({
     accessibilityElementsHidden: true,
     importantForAccessibility: "no"
   }) : null);
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [background, children != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: _reactNative.StyleSheet.absoluteFill,
+      pointerEvents: "box-none",
+      children: children
+    }) : null]
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(MediaCardContext.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: [background, children != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: _reactNative.StyleSheet.absoluteFill,
-        pointerEvents: "box-none",
-        children: children
-      }) : null]
+      accessibilityLabel: accessibilityLabel,
+      children: content
     })
   });
 }

package/lib/commonjs/components/RechargeCard/RechargeCard.js

@@ -41,7 +41,10 @@ function RechargeCard({
   subscriptionContent,
   actions,
   modes = _reactUtils.EMPTY_MODES,
-  style
+  style,
+  onPress,
+  disabled,
+  accessibilityLabel
 }) {
   // Container Tokens (defaults mirror Figma node 2235:937).
   const backgroundColor = (0, _figmaVariablesResolver.getVariableByName)('rechargeCard/background', modes);
@@ -90,18 +93,18 @@ function RechargeCard({
   // Pass modes to subscription children (e.g. AvatarGroup)
   // Now encapsulated, so we just pass children to AvatarGroup
   const hasSubscriptions = _react.default.Children.count(subscriptionContent) > 0;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [{
-      backgroundColor,
-      paddingHorizontal,
-      paddingVertical,
-      gap,
-      borderRadius: radius,
-      borderWidth: strokeWidth,
-      borderColor: strokeColor,
-      minWidth,
-      alignItems: 'flex-start'
-    }, style],
+  const containerStyle = {
+    backgroundColor,
+    paddingHorizontal,
+    paddingVertical,
+    gap,
+    borderRadius: radius,
+    borderWidth: strokeWidth,
+    borderColor: strokeColor,
+    minWidth,
+    alignItems: 'flex-start'
+  };
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: {
         gap: headerGap,
@@ -217,4 +220,22 @@ function RechargeCard({
       children: actions
     })]
   });
+  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
+  });
 }

package/lib/commonjs/components/TestimonialsCard/TestimonialsCard.js

@@ -33,7 +33,9 @@ function TestimonialsCard({
   modes = _reactUtils.EMPTY_MODES,
   style,
   avatarProps,
-  accessibilityLabel
+  accessibilityLabel,
+  onPress,
+  disabled
 }) {
   // Container tokens
   const background = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/background', modes) ?? '#ffffff';
@@ -89,10 +91,7 @@ function TestimonialsCard({
     ...(avatarProps?.modes || {})
   };
   const resolvedAccessibilityLabel = accessibilityLabel ?? `Testimonial${title ? ` from ${title}` : ''}${body ? `: ${body}` : ''}`;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [containerStyle, style],
-    accessibilityRole: "text",
-    accessibilityLabel: resolvedAccessibilityLabel,
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
       style: "Image",
       modes: avatarModes,
@@ -112,6 +111,25 @@ function TestimonialsCard({
       })]
     })]
   });
+  if (onPress) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: [containerStyle, style],
+      onPress: onPress,
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: resolvedAccessibilityLabel,
+      accessibilityState: {
+        disabled: !!disabled
+      },
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "text",
+    accessibilityLabel: resolvedAccessibilityLabel,
+    children: content
+  });
 }
 const textContainerStyle = {
   width: '100%',

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