jfs-components 0.0.95 → 0.1.0

package/CHANGELOG.md

@@ -4,6 +4,16 @@ 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.0] - 2026-06-08
+
+- Added `TestimonialsCard` — compact avatar + title + body card for testimonial carousels.
+- `Drawer` — programmatic ref API (`expand` / `collapse` / `toggle` / `getState`), controlled `state` + `onStateChange`, touch-overlay and gesture-loop fixes.
+- `FullscreenModal` — safe-area-aware footer and close button; new `closeOffsetY` prop.
+- `Dropdown` — `boxShadow`-based popup shadow with inner clip view (fixes clipped shadow on native).
+- `Spinner` / `Skeleton` — shimmer overlay uses explicit absolute positioning instead of `absoluteFillObject`.
+
+---
+
 ## [0.0.95] - 2026-06-04
 
 - Added `Icon` — token-driven design-system icon primitive (`iconName`, `source`, `children` slot); exported from the package barrel.

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

@@ -45,11 +45,17 @@ function rubberBand(value, min, max, friction = 0.55) {
   }
   return value;
 }
+
+/**
+ * Imperative handle exposed via `ref` for programmatic control of the drawer.
+ * Each method animates using the same spring as gesture-driven transitions.
+ */
+
 /**
  * Drawer component with nested scrolling support.
  * Uses react-native-gesture-handler and react-native-reanimated.
  */
-function Drawer({
+function DrawerInner({
   modes = _reactUtils.EMPTY_MODES,
   style,
   title,
@@ -58,6 +64,7 @@ function Drawer({
   collapsedHeight = 200,
   expandedRatio = 0.90,
   initialState = 'collapsed',
+  state,
   contentStyle,
   sheetStyle,
   accessibilityLabel,
@@ -66,7 +73,7 @@ function Drawer({
   showsVerticalScrollIndicator = false,
   bottomInset = 80,
   onStateChange
-}) {
+}, ref) {
   const {
     height: screenHeight
   } = (0, _reactNative.useWindowDimensions)();
@@ -128,15 +135,58 @@ function Drawer({
     translateY.value = (0, _reactNativeReanimated.withSpring)(destination, SPRING_CONFIG);
   }, [translateY]);
 
-  // Update JS state for accessibility/logic if needed
+  // Update the JS-side mode. Pure: only schedules the state update. Side
+  // effects (notifying the parent via onStateChange) MUST NOT live inside the
+  // setState updater — doing so calls the parent's setState during React's
+  // render phase, which throws "Cannot update a component while rendering a
+  // different component" and causes an infinite update loop. We report changes
+  // from a dedicated effect below instead.
   const updateMode = (0, _react.useCallback)(newMode => {
-    setMode(prev => {
-      if (prev !== newMode) {
-        onStateChange?.(newMode);
-      }
-      return newMode;
-    });
-  }, [onStateChange]);
+    setMode(newMode);
+  }, []);
+
+  // Notify the parent exactly once per settled mode change, after commit.
+  const reportedModeRef = (0, _react.useRef)(mode);
+  (0, _react.useEffect)(() => {
+    if (reportedModeRef.current !== mode) {
+      reportedModeRef.current = mode;
+      onStateChange?.(mode);
+    }
+  }, [mode, onStateChange]);
+
+  // Programmatic transition (JS thread). Reuses the same spring as gestures:
+  // animates `translateY`, keeps the scroll-gate (`isFullyExpanded`) in sync,
+  // and updates `mode` (which notifies via the onStateChange effect above).
+  const applyMode = (0, _react.useCallback)(newMode => {
+    const target = newMode === 'expanded' ? minTranslateY : maxTranslateY;
+    translateY.value = (0, _reactNativeReanimated.withSpring)(target, SPRING_CONFIG);
+    isFullyExpanded.value = newMode === 'expanded';
+    setMode(newMode);
+  }, [minTranslateY, maxTranslateY, translateY, isFullyExpanded]);
+
+  // Controlled mode: react ONLY to genuine changes of the `state` prop, tracked
+  // against its previous value. We must NOT reconcile `state` against the
+  // internal `mode` on every render: a gesture updates `mode` optimistically
+  // one render before the parent echoes it back through `onStateChange` into
+  // `state`, so a `state !== mode` check would "correct" the gesture and fight
+  // the echo, ping-ponging forever (Maximum update depth exceeded).
+  // `applyMode` is idempotent, so re-applying the already-current mode is a
+  // no-op when the parent simply mirrors our own change back.
+  const prevStateProp = (0, _react.useRef)(state);
+  (0, _react.useEffect)(() => {
+    if (state === undefined) return;
+    if (state === prevStateProp.current) return;
+    prevStateProp.current = state;
+    applyMode(state);
+  }, [state, applyMode]);
+
+  // Imperative API for parents holding a ref.
+  (0, _react.useImperativeHandle)(ref, () => ({
+    expand: () => applyMode('expanded'),
+    collapse: () => applyMode('collapsed'),
+    toggle: () => applyMode(mode === 'expanded' ? 'collapsed' : 'expanded'),
+    getState: () => mode
+  }), [applyMode, mode]);
 
   // Gesture policy:
   //  • activeOffsetY: require a clear *vertical* drag (10px) before this
@@ -309,84 +359,96 @@ function Drawer({
     default: {}
   });
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer';
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
-    style: [styles.host, style],
-    pointerEvents: "box-none",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
-      gesture: gesture,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-        style: [styles.sheet, {
-          // Constraint the height strictly to the expanded height
-          // This ensures the ScrollView has a finite frame to scroll within
-          height: expandedHeight,
-          backgroundColor,
-          borderTopLeftRadius: radius,
-          borderTopRightRadius: radius
-        }, shadowStyle, sheetStyle, animatedStyle],
-        accessible: true,
-        ...(_reactNative.Platform.OS === 'web' ? {
-          accessibilityRole: 'dialog'
-        } : undefined),
-        accessibilityLabel: undefined,
-        accessibilityHint: accessibilityHint || 'Swipe up to expand, swipe down to collapse',
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-          style: [styles.sheetInner, {
+  return (
+    /*#__PURE__*/
+    // IMPORTANT: the host is a plain box-none View, NOT a GestureHandlerRootView.
+    // On Android, GestureHandlerRootView renders a *native* root view that
+    // intercepts every touch within its bounds (to feed the gesture system) and
+    // does NOT honor pointerEvents="box-none". Because this host fills the whole
+    // screen as an overlay, using GestureHandlerRootView here swallowed all
+    // touches to content rendered behind the drawer (buttons, page content).
+    // Per the standard react-native-gesture-handler architecture, a single
+    // GestureHandlerRootView must wrap the app root; this overlay only needs to
+    // let touches fall through where the sheet isn't.
+    (0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.host, style],
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureDetector, {
+        gesture: gesture,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+          style: [styles.sheet, {
+            // Constraint the height strictly to the expanded height
+            // This ensures the ScrollView has a finite frame to scroll within
+            height: expandedHeight,
+            backgroundColor,
             borderTopLeftRadius: radius,
-            borderTopRightRadius: radius,
-            paddingLeft,
-            paddingRight,
-            paddingBottom,
-            rowGap: drawerGap
-          }],
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-            style: [styles.handleArea, !title && !header && {
-              paddingBottom: 0
+            borderTopRightRadius: radius
+          }, shadowStyle, sheetStyle, animatedStyle],
+          accessible: true,
+          ...(_reactNative.Platform.OS === 'web' ? {
+            accessibilityRole: 'dialog'
+          } : undefined),
+          accessibilityLabel: undefined,
+          accessibilityHint: accessibilityHint || 'Swipe up to expand, swipe down to collapse',
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: [styles.sheetInner, {
+              borderTopLeftRadius: radius,
+              borderTopRightRadius: radius,
+              paddingLeft,
+              paddingRight,
+              paddingBottom,
+              rowGap: drawerGap
             }],
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+              style: [styles.handleArea, !title && !header && {
+                paddingBottom: 0
+              }],
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                style: [{
+                  backgroundColor: handleColor,
+                  width: handleWidth,
+                  height: handleHeight,
+                  borderRadius: handleRadius
+                }]
+              })
+            }), header, title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: [{
-                backgroundColor: handleColor,
-                width: handleWidth,
-                height: handleHeight,
-                borderRadius: handleRadius
-              }]
-            })
-          }), header, title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [{
-              color: titleColor,
-              fontSize: titleSize,
-              fontWeight: titleWeight,
-              lineHeight: titleLineHeight,
-              marginBottom: titlePaddingBottom
-            }],
-            children: title
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedScrollView, {
-            ref: scrollRef,
-            style: [styles.content, contentStyle],
-            contentContainerStyle: [{
-              paddingBottom: paddingBottom + bottomInset,
-              gap: drawerGap,
-              flexDirection: 'column',
-              alignItems: 'stretch'
-            }, contentContainerStyle],
-            showsVerticalScrollIndicator: showsVerticalScrollIndicator
-            // Let a tap on an input inside the sheet focus it on the FIRST tap
-            // even while the keyboard is already open (default 'never' would
-            // eat that tap just to dismiss the keyboard).
-            ,
-            keyboardShouldPersistTaps: "handled",
-            animatedProps: animatedScrollProps,
-            alwaysBounceVertical: false,
-            overScrollMode: "always",
-            onScroll: (0, _reactNativeReanimated.useAnimatedScrollHandler)(event => {
-              scrollY.value = event.contentOffset.y;
-            }),
-            scrollEventThrottle: 16,
-            children: children
-          })]
+                color: titleColor,
+                fontSize: titleSize,
+                fontWeight: titleWeight,
+                lineHeight: titleLineHeight,
+                marginBottom: titlePaddingBottom
+              }],
+              children: title
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(AnimatedScrollView, {
+              ref: scrollRef,
+              style: [styles.content, contentStyle],
+              contentContainerStyle: [{
+                paddingBottom: paddingBottom + bottomInset,
+                gap: drawerGap,
+                flexDirection: 'column',
+                alignItems: 'stretch'
+              }, contentContainerStyle],
+              showsVerticalScrollIndicator: showsVerticalScrollIndicator
+              // Let a tap on an input inside the sheet focus it on the FIRST tap
+              // even while the keyboard is already open (default 'never' would
+              // eat that tap just to dismiss the keyboard).
+              ,
+              keyboardShouldPersistTaps: "handled",
+              animatedProps: animatedScrollProps,
+              alwaysBounceVertical: false,
+              overScrollMode: "always",
+              onScroll: (0, _reactNativeReanimated.useAnimatedScrollHandler)(event => {
+                scrollY.value = event.contentOffset.y;
+              }),
+              scrollEventThrottle: 16,
+              children: children
+            })]
+          })
         })
       })
     })
-  });
+  );
 }
 const styles = _reactNative.StyleSheet.create({
   host: {
@@ -416,4 +478,6 @@ const styles = _reactNative.StyleSheet.create({
     flex: 1
   }
 });
+const Drawer = /*#__PURE__*/(0, _react.forwardRef)(DrawerInner);
+Drawer.displayName = 'Drawer';
 var _default = exports.default = Drawer;

package/lib/commonjs/components/Dropdown/Dropdown.js

@@ -178,18 +178,34 @@ function Dropdown({
   const shadowOffsetX = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetX', modes), 10) || 0;
   const shadowOffsetY = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetY', modes), 10) || 4;
   const shadowBlur = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/blur', modes), 10) || 16;
-  const containerStyle = {
+
+  // Shadow lives on the OUTER view, which must NOT set `overflow: 'hidden'`.
+  // On native, clipping a view also clips its shadow (iOS clips the layer
+  // shadow; Android clips the elevation shadow), so the soft popup shadow
+  // that renders fine on web (CSS box-shadow paints outside the box) would
+  // get cut off. The rounded-corner clipping is moved to a separate inner
+  // view below.
+  //
+  // The `boxShadow` style prop (RN 0.76+ / react-native-web) is used as the
+  // single source of truth so the designed color/offset/blur are honored on
+  // iOS, Android AND web. We intentionally do NOT also set the legacy
+  // `shadow*` / `elevation` props: on the new architecture (and web) those
+  // are translated into a box-shadow internally, so combining them with an
+  // explicit `boxShadow` would stack two shadows. Android's legacy
+  // `elevation` is also undesirable here because it ignores the shadow color
+  // and only paints a generic gray shadow.
+  const shadowStyle = {
     backgroundColor: background,
+    borderRadius: radius,
+    boxShadow: `${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`
+  };
+
+  // Inner view carries the rounded corners + clipping so list/scroll content
+  // stays inside the radius without affecting the outer view's shadow.
+  const clipStyle = {
     borderRadius: radius,
     overflow: 'hidden',
-    shadowColor,
-    shadowOffset: {
-      width: shadowOffsetX,
-      height: shadowOffsetY
-    },
-    shadowOpacity: 1,
-    shadowRadius: shadowBlur / 2,
-    elevation: 4
+    backgroundColor: background
   };
   const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     style: {
@@ -198,17 +214,20 @@ function Dropdown({
     children: (0, _reactUtils.cloneChildrenWithModes)(children, modes)
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [containerStyle, style],
+    style: [shadowStyle, style],
     accessibilityRole: "menu",
     accessibilityLabel: accessibilityLabel || 'Dropdown menu',
-    children: maxHeight != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-      style: {
-        maxHeight
-      },
-      showsVerticalScrollIndicator: true,
-      keyboardShouldPersistTaps: "handled",
-      children: content
-    }) : content
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: clipStyle,
+      children: maxHeight != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+        style: {
+          maxHeight
+        },
+        showsVerticalScrollIndicator: true,
+        keyboardShouldPersistTaps: "handled",
+        children: content
+      }) : content
+    })
   });
 }
 var _default = exports.default = Dropdown;

package/lib/commonjs/components/FullscreenModal/FullscreenModal.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
 var _reactUtils = require("../../utils/react-utils");
@@ -188,6 +189,7 @@ function FullscreenModal({
   heroMedia,
   heroHeight = 420,
   showClose = true,
+  closeOffsetY = 0,
   onClose,
   closeAccessibilityLabel = 'Close',
   footer,
@@ -217,6 +219,24 @@ function FullscreenModal({
   }), [globalModes, propModes]);
   const rootGap = Number((0, _figmaVariablesResolver.getVariableByName)('fullScreenModal/gap', modes)) || 16;
 
+  // Safe-area insets so the floating chrome clears the system bars: the close
+  // button drops below the status bar / notch, and the sticky footer keeps its
+  // designed bottom padding ON TOP of the bottom inset (home indicator /
+  // Android gesture or nav bar). On web — and anywhere without a
+  // SafeAreaProvider — every inset is 0, so the layout is unchanged.
+  const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const closeButtonInsetStyle = (0, _react.useMemo)(() => ({
+    top: 12 + insets.top + closeOffsetY
+  }), [insets.top, closeOffsetY]);
+  // Extend (not replace) the footer's token bottom padding by the bottom inset
+  // so the action button never sits under the system navigation area.
+  const footerInsetStyle = (0, _react.useMemo)(() => {
+    const base = Number((0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/bottom', modes)) || 41;
+    return {
+      paddingBottom: base + insets.bottom
+    };
+  }, [modes, insets.bottom]);
+
   // Drives the background's parallax-free sync with the scroll. The hero media
   // lives at the ROOT (so it is never clipped to the content height and sits
   // behind the transparent footer), but we translate it up by the exact scroll
@@ -316,12 +336,13 @@ function FullscreenModal({
       })
     }), footerContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionFooter.default, {
       modes: modes,
+      style: footerInsetStyle,
       children: footerContent
     }) : null, showClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
       iconName: "ic_close",
       modes: modes,
       accessibilityLabel: closeAccessibilityLabel,
-      style: closeButtonStyle,
+      style: [closeButtonStyle, closeButtonInsetStyle],
       ...(onClose ? {
         onPress: onClose
       } : {})

package/lib/commonjs/components/Spinner/Spinner.js

@@ -120,7 +120,11 @@ const useSegmentRotation = (clock, index, gravity, spreadMinRad, spreadMaxRad, s
   };
 }, [gravity, index, spreadMinRad, spreadMaxRad, spreadOutFrac]);
 const fullSize = {
-  ..._reactNative.StyleSheet.absoluteFillObject
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0
 };
 function Spinner({
   size = DEFAULT_SIZE,

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

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Avatar = _interopRequireDefault(require("../Avatar/Avatar"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * TestimonialsCard renders a compact, fixed-width card with a circular avatar,
+ * a bold title, and a body paragraph. It is typically used inside a horizontal
+ * carousel of customer testimonials.
+ *
+ * All styling values are resolved from Figma design tokens using the provided
+ * `modes`.
+ *
+ * @example
+ * ```tsx
+ * <TestimonialsCard
+ *   title="Aarav S."
+ *   body="I was dreading renewing my car insurance, but JioFinance made it a breeze."
+ * />
+ * ```
+ */
+function TestimonialsCard({
+  title = 'Title',
+  body = 'I was dreading renewing my car insurance, but JioFinance made it a breeze.',
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  avatarProps,
+  accessibilityLabel
+}) {
+  // Container tokens
+  const background = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/background', modes) ?? '#ffffff';
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/border/color', modes) ?? '#e8e8e8';
+  const radius = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/radius', modes) ?? 8;
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/gap', modes) ?? 8;
+  const paddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/padding/horizontal', modes) ?? 12;
+  const paddingVertical = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/padding/vertical', modes) ?? 12;
+
+  // Title typography tokens
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/subtitle/color', modes) ?? '#1a1c1f';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/title/fontSize', modes) ?? 14;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/title/fontWeight', modes) ?? 700;
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+
+  // Body typography tokens
+  const bodyColor = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/title/color', modes) ?? '#010101';
+  const bodyFontSize = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/subtitle/fontSize', modes) ?? 12;
+  const bodyLineHeight = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/subtitle/lineHeight', modes) ?? 16;
+  const bodyFontFamily = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/subtitle/fontFamily', modes) ?? 'JioType Var';
+  const bodyFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('testimonialsCard/subtitle/fontWeight', modes) ?? 400;
+  const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw;
+  const containerStyle = {
+    width: 180,
+    backgroundColor: background,
+    borderColor: borderColor,
+    borderWidth: 1,
+    borderRadius: radius,
+    paddingHorizontal: paddingHorizontal,
+    paddingVertical: paddingVertical,
+    alignItems: 'flex-start',
+    gap: gap
+  };
+  const titleTextStyle = {
+    color: titleColor,
+    fontSize: titleFontSize,
+    lineHeight: bodyLineHeight,
+    fontFamily: titleFontFamily,
+    fontWeight: titleFontWeight,
+    width: '100%'
+  };
+  const bodyTextStyle = {
+    color: bodyColor,
+    fontSize: bodyFontSize,
+    lineHeight: bodyLineHeight,
+    fontFamily: bodyFontFamily,
+    fontWeight: bodyFontWeight,
+    width: '100%'
+  };
+  const avatarModes = {
+    ...modes,
+    ...(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,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
+      style: "Image",
+      modes: avatarModes,
+      ...avatarProps
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: textContainerStyle,
+      children: [!!title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: titleTextStyle,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: title
+      }), !!body && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: bodyTextStyle,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        children: body
+      })]
+    })]
+  });
+}
+const textContainerStyle = {
+  width: '100%',
+  alignItems: 'flex-start',
+  gap: 4
+};
+var _default = exports.default = /*#__PURE__*/_react.default.memo(TestimonialsCard);

package/lib/commonjs/components/index.js

@@ -723,6 +723,12 @@ Object.defineProperty(exports, "Tabs", {
     return _Tabs.default;
   }
 });
+Object.defineProperty(exports, "TestimonialsCard", {
+  enumerable: true,
+  get: function () {
+    return _TestimonialsCard.default;
+  }
+});
 Object.defineProperty(exports, "Text", {
   enumerable: true,
   get: function () {
@@ -981,6 +987,7 @@ var _StatItem = _interopRequireDefault(require("./StatItem/StatItem"));
 var _StatGroup = _interopRequireDefault(require("./StatGroup/StatGroup"));
 var _StrengthIndicator = _interopRequireDefault(require("./StrengthIndicator/StrengthIndicator"));
 var _SummaryTile = _interopRequireDefault(require("./SummaryTile/SummaryTile"));
+var _TestimonialsCard = _interopRequireDefault(require("./TestimonialsCard/TestimonialsCard"));
 var _Text = _interopRequireDefault(require("./Text/Text"));
 var _SegmentedControl = _interopRequireDefault(require("./SegmentedControl/SegmentedControl"));
 var _Toggle = _interopRequireDefault(require("./Toggle/Toggle"));