jfs-components 0.0.99 → 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/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

@@ -189,6 +189,7 @@ function FullscreenModal({
   heroMedia,
   heroHeight = 420,
   showClose = true,
+  closeOffsetY = 0,
   onClose,
   closeAccessibilityLabel = 'Close',
   footer,
@@ -225,8 +226,8 @@ function FullscreenModal({
   // SafeAreaProvider — every inset is 0, so the layout is unchanged.
   const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const closeButtonInsetStyle = (0, _react.useMemo)(() => ({
-    top: 12 + insets.top
-  }), [insets.top]);
+    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)(() => {

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