jfs-components 0.0.99 → 0.1.0

package/lib/typescript/src/components/FullscreenModal/FullscreenModal.d.ts

@@ -29,6 +29,12 @@ export type FullscreenModalProps = {
     heroHeight?: number;
     /** Whether to render the floating close button (top-right). Defaults to true. */
     showClose?: boolean;
+    /**
+     * Additional vertical offset (in px) applied to the floating close button's
+     * top position, on top of the base inset (`12 + safe-area top`). Positive
+     * values push it further down. Defaults to 0.
+     */
+    closeOffsetY?: number;
     /** Press handler for the close button. */
     onClose?: () => void;
     /** Accessibility label for the close button. */
@@ -104,6 +110,6 @@ export type FullscreenModalProps = {
  * </FullscreenModal>
  * ```
  */
-declare function FullscreenModal({ eyebrow, headline, supportingText, priceText, heroMedia, heroHeight, showClose, onClose, closeAccessibilityLabel, footer, primaryActionLabel, onPrimaryAction, disclaimer, children, modes: propModes, style, contentContainerStyle, testID, }: FullscreenModalProps): import("react/jsx-runtime").JSX.Element;
+declare function FullscreenModal({ eyebrow, headline, supportingText, priceText, heroMedia, heroHeight, showClose, closeOffsetY, onClose, closeAccessibilityLabel, footer, primaryActionLabel, onPrimaryAction, disclaimer, children, modes: propModes, style, contentContainerStyle, testID, }: FullscreenModalProps): import("react/jsx-runtime").JSX.Element;
 export default FullscreenModal;
 //# sourceMappingURL=FullscreenModal.d.ts.map

package/lib/typescript/src/components/TestimonialsCard/TestimonialsCard.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+import { type AvatarProps } from '../Avatar/Avatar';
+export type TestimonialsCardProps = {
+    /**
+     * The testimonial heading, typically the author's name.
+     */
+    title?: string;
+    /**
+     * The testimonial body copy.
+     */
+    body?: string;
+    /**
+     * Mode configuration passed to the token resolver. Also forwarded to the
+     * Avatar child for consistent theming.
+     */
+    modes?: Record<string, any>;
+    /**
+     * Optional style overrides for the card container.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Props forwarded to the Avatar component (e.g. a custom `imageSource`).
+     */
+    avatarProps?: Partial<AvatarProps>;
+    /**
+     * Accessibility label for the card region. Falls back to a label generated
+     * from the title and body.
+     */
+    accessibilityLabel?: string;
+};
+/**
+ * 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."
+ * />
+ * ```
+ */
+declare function TestimonialsCard({ title, body, modes, style, avatarProps, accessibilityLabel, }: TestimonialsCardProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TestimonialsCard>;
+export default _default;
+//# sourceMappingURL=TestimonialsCard.d.ts.map

package/lib/typescript/src/components/index.d.ts

@@ -130,6 +130,7 @@ export { default as StatItem, type StatItemProps, type StatItemLabelPosition } f
 export { default as StatGroup, type StatGroupProps, type StatGroupItem } from './StatGroup/StatGroup';
 export { default as StrengthIndicator, type StrengthIndicatorProps, type StrengthIndicatorConfidence, type StrengthIndicatorConfidenceValue } from './StrengthIndicator/StrengthIndicator';
 export { default as SummaryTile, type SummaryTileProps } from './SummaryTile/SummaryTile';
+export { default as TestimonialsCard, type TestimonialsCardProps } from './TestimonialsCard/TestimonialsCard';
 export { default as Text, type TextProps } from './Text/Text';
 export { default as SegmentedControl, type SegmentedControlProps, type SegmentedControlItem } from './SegmentedControl/SegmentedControl';
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle';

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-06-08T14:11:35.036Z
+ * Generated: 2026-06-09T13:55:40.250Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.99",
+  "version": "0.1.0",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

package/src/components/Dropdown/Dropdown.tsx

@@ -290,15 +290,33 @@ export function Dropdown({
     const shadowBlur =
         parseInt(getVariableByName('dropdown/shadow/blur', modes), 10) || 16
 
-    const containerStyle: ViewStyle = {
+    // 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: ViewStyle & { boxShadow?: string } = {
         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: ViewStyle = {
         borderRadius: radius,
         overflow: 'hidden',
-        shadowColor,
-        shadowOffset: { width: shadowOffsetX, height: shadowOffsetY },
-        shadowOpacity: 1,
-        shadowRadius: shadowBlur / 2,
-        elevation: 4,
+        backgroundColor: background,
     }
 
     const content = (
@@ -309,21 +327,23 @@ export function Dropdown({
 
     return (
         <View
-            style={[containerStyle, style]}
+            style={[shadowStyle, style]}
             accessibilityRole="menu"
             accessibilityLabel={accessibilityLabel || 'Dropdown menu'}
         >
-            {maxHeight != null ? (
-                <ScrollView
-                    style={{ maxHeight }}
-                    showsVerticalScrollIndicator={true}
-                    keyboardShouldPersistTaps="handled"
-                >
-                    {content}
-                </ScrollView>
-            ) : (
-                content
-            )}
+            <View style={clipStyle}>
+                {maxHeight != null ? (
+                    <ScrollView
+                        style={{ maxHeight }}
+                        showsVerticalScrollIndicator={true}
+                        keyboardShouldPersistTaps="handled"
+                    >
+                        {content}
+                    </ScrollView>
+                ) : (
+                    content
+                )}
+            </View>
         </View>
     )
 }

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -71,6 +71,12 @@ export type FullscreenModalProps = {
   heroHeight?: number
   /** Whether to render the floating close button (top-right). Defaults to true. */
   showClose?: boolean
+  /**
+   * Additional vertical offset (in px) applied to the floating close button's
+   * top position, on top of the base inset (`12 + safe-area top`). Positive
+   * values push it further down. Defaults to 0.
+   */
+  closeOffsetY?: number
   /** Press handler for the close button. */
   onClose?: () => void
   /** Accessibility label for the close button. */
@@ -230,6 +236,7 @@ function FullscreenModal({
   heroMedia,
   heroHeight = 420,
   showClose = true,
+  closeOffsetY = 0,
   onClose,
   closeAccessibilityLabel = 'Close',
   footer,
@@ -268,8 +275,8 @@ function FullscreenModal({
   // SafeAreaProvider — every inset is 0, so the layout is unchanged.
   const insets = useSafeAreaInsets()
   const closeButtonInsetStyle = useMemo<ViewStyle>(
-    () => ({ 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.

package/src/components/TestimonialsCard/TestimonialsCard.tsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  type ViewStyle,
+  type TextStyle,
+  type StyleProp,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import Avatar, { type AvatarProps } from '../Avatar/Avatar'
+
+export type TestimonialsCardProps = {
+  /**
+   * The testimonial heading, typically the author's name.
+   */
+  title?: string
+  /**
+   * The testimonial body copy.
+   */
+  body?: string
+  /**
+   * Mode configuration passed to the token resolver. Also forwarded to the
+   * Avatar child for consistent theming.
+   */
+  modes?: Record<string, any>
+  /**
+   * Optional style overrides for the card container.
+   */
+  style?: StyleProp<ViewStyle>
+  /**
+   * Props forwarded to the Avatar component (e.g. a custom `imageSource`).
+   */
+  avatarProps?: Partial<AvatarProps>
+  /**
+   * Accessibility label for the card region. Falls back to a label generated
+   * from the title and body.
+   */
+  accessibilityLabel?: string
+}
+
+/**
+ * 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 = EMPTY_MODES,
+  style,
+  avatarProps,
+  accessibilityLabel,
+}: TestimonialsCardProps) {
+  // Container tokens
+  const background = getVariableByName('testimonialsCard/background', modes) ?? '#ffffff'
+  const borderColor = getVariableByName('testimonialsCard/border/color', modes) ?? '#e8e8e8'
+  const radius = getVariableByName('testimonialsCard/radius', modes) ?? 8
+  const gap = getVariableByName('testimonialsCard/gap', modes) ?? 8
+  const paddingHorizontal = getVariableByName('testimonialsCard/padding/horizontal', modes) ?? 12
+  const paddingVertical = getVariableByName('testimonialsCard/padding/vertical', modes) ?? 12
+
+  // Title typography tokens
+  const titleColor = getVariableByName('testimonialsCard/subtitle/color', modes) ?? '#1a1c1f'
+  const titleFontSize = getVariableByName('testimonialsCard/title/fontSize', modes) ?? 14
+  const titleFontFamily = getVariableByName('testimonialsCard/title/fontFamily', modes) ?? 'JioType Var'
+  const titleFontWeightRaw = getVariableByName('testimonialsCard/title/fontWeight', modes) ?? 700
+  const titleFontWeight =
+    typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
+
+  // Body typography tokens
+  const bodyColor = getVariableByName('testimonialsCard/title/color', modes) ?? '#010101'
+  const bodyFontSize = getVariableByName('testimonialsCard/subtitle/fontSize', modes) ?? 12
+  const bodyLineHeight = getVariableByName('testimonialsCard/subtitle/lineHeight', modes) ?? 16
+  const bodyFontFamily = getVariableByName('testimonialsCard/subtitle/fontFamily', modes) ?? 'JioType Var'
+  const bodyFontWeightRaw = getVariableByName('testimonialsCard/subtitle/fontWeight', modes) ?? 400
+  const bodyFontWeight =
+    typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw
+
+  const containerStyle: ViewStyle = {
+    width: 180,
+    backgroundColor: background as string,
+    borderColor: borderColor as string,
+    borderWidth: 1,
+    borderRadius: radius as number,
+    paddingHorizontal: paddingHorizontal as number,
+    paddingVertical: paddingVertical as number,
+    alignItems: 'flex-start',
+    gap: gap as number,
+  }
+
+  const titleTextStyle: TextStyle = {
+    color: titleColor as string,
+    fontSize: titleFontSize as number,
+    lineHeight: bodyLineHeight as number,
+    fontFamily: titleFontFamily as string,
+    fontWeight: titleFontWeight as TextStyle['fontWeight'],
+    width: '100%',
+  }
+
+  const bodyTextStyle: TextStyle = {
+    color: bodyColor as string,
+    fontSize: bodyFontSize as number,
+    lineHeight: bodyLineHeight as number,
+    fontFamily: bodyFontFamily as string,
+    fontWeight: bodyFontWeight as TextStyle['fontWeight'],
+    width: '100%',
+  }
+
+  const avatarModes = {
+    ...modes,
+    ...(avatarProps?.modes || {}),
+  }
+
+  const resolvedAccessibilityLabel =
+    accessibilityLabel ?? `Testimonial${title ? ` from ${title}` : ''}${body ? `: ${body}` : ''}`
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessibilityRole="text"
+      accessibilityLabel={resolvedAccessibilityLabel}
+    >
+      <Avatar
+        style="Image"
+        modes={avatarModes}
+        {...avatarProps}
+      />
+      <View style={textContainerStyle}>
+        {!!title && (
+          <Text style={titleTextStyle} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+            {title}
+          </Text>
+        )}
+        {!!body && (
+          <Text style={bodyTextStyle} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
+            {body}
+          </Text>
+        )}
+      </View>
+    </View>
+  )
+}
+
+const textContainerStyle: ViewStyle = {
+  width: '100%',
+  alignItems: 'flex-start',
+  gap: 4,
+}
+
+export default React.memo(TestimonialsCard)

package/src/components/index.ts

@@ -149,6 +149,7 @@ export { default as StatItem, type StatItemProps, type StatItemLabelPosition } f
 export { default as StatGroup, type StatGroupProps, type StatGroupItem } from './StatGroup/StatGroup';
 export { default as StrengthIndicator, type StrengthIndicatorProps, type StrengthIndicatorConfidence, type StrengthIndicatorConfidenceValue } from './StrengthIndicator/StrengthIndicator';
 export { default as SummaryTile, type SummaryTileProps } from './SummaryTile/SummaryTile';
+export { default as TestimonialsCard, type TestimonialsCardProps } from './TestimonialsCard/TestimonialsCard';
 export { default as Text, type TextProps } from './Text/Text';
 export { default as SegmentedControl, type SegmentedControlProps, type SegmentedControlItem } from './SegmentedControl/SegmentedControl';
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle';

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-06-08T14:11:35.036Z
+ * Generated: 2026-06-09T13:55:40.250Z
  */
 
 // Icon name to SVG data mapping