jfs-components 0.1.25 → 0.1.30

package/lib/module/components/Grid/Grid.js

@@ -0,0 +1,201 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function toNumber(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+function resolveGridTokens(modes) {
+  const gapFallback = toNumber(getVariableByName('Grid/gap', modes), 8);
+  const columnGap = toNumber(getVariableByName('Grid/column/gap', modes), gapFallback);
+  const rowGap = toNumber(getVariableByName('Grid/row/gap', modes), gapFallback);
+  const paddingHorizontal = toNumber(getVariableByName('Grid/padding/horizontal', modes), 8);
+  const paddingVertical = toNumber(getVariableByName('Grid/padding/vertical', modes), 8);
+  const paddingTop = toNumber(getVariableByName('Grid/padding/top', modes), paddingVertical);
+  const paddingBottom = toNumber(getVariableByName('Grid/padding/bottom', modes), paddingVertical);
+  const paddingLeft = toNumber(getVariableByName('Grid/padding/left', modes), paddingHorizontal);
+  const paddingRight = toNumber(getVariableByName('Grid/padding/right', modes), paddingHorizontal);
+  const backgroundColor = getVariableByName('Grid/background/color', modes) ?? 'transparent';
+  return {
+    backgroundColor,
+    columnGap,
+    rowGap,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight
+  };
+}
+function normalizeFrs(frs, count) {
+  if (!frs || frs.length === 0) {
+    return Array.from({
+      length: count
+    }, () => 1);
+  }
+  return Array.from({
+    length: count
+  }, (_, index) => {
+    const value = frs[index] ?? frs[frs.length - 1] ?? 1;
+    return value > 0 ? value : 1;
+  });
+}
+function resolveAlignSelf(alignItems) {
+  if (alignItems === 'center') return 'center';
+  if (alignItems === 'start') return 'flex-start';
+  return 'stretch';
+}
+function resolveRowJustifyContent(justifyContent) {
+  if (justifyContent === 'space-between') return 'space-between';
+  if (justifyContent === 'start') return 'flex-start';
+  return 'flex-start';
+}
+function buildCellStyle(columnFr, justifyContent, alignItems) {
+  const alignSelf = resolveAlignSelf(alignItems);
+  if (justifyContent === 'space-between' || justifyContent === 'start') {
+    return {
+      flexGrow: 0,
+      flexShrink: 1,
+      flexBasis: 'auto',
+      minWidth: 0,
+      alignSelf
+    };
+  }
+  return {
+    flex: columnFr,
+    minWidth: 0,
+    alignSelf
+  };
+}
+
+/**
+ * `Grid` — a token-driven layout grid for React Native.
+ *
+ * Mirrors the Figma "Grid" component: a padded container with configurable
+ * columns, rows, fractional column tracks (`columnFrs`), and gap tokens.
+ * Each slot child maps to one cell — no separate `GridItem` wrapper is needed.
+ *
+ * @component
+ */
+function Grid({
+  columns = 1,
+  rows,
+  columnFrs,
+  rowFrs,
+  columnGap: columnGapProp,
+  rowGap: rowGapProp,
+  gap: gapProp,
+  padding: paddingProp,
+  paddingHorizontal: paddingHorizontalProp,
+  paddingVertical: paddingVerticalProp,
+  paddingTop: paddingTopProp,
+  paddingBottom: paddingBottomProp,
+  paddingLeft: paddingLeftProp,
+  paddingRight: paddingRightProp,
+  justifyContent = 'stretch',
+  alignItems = 'stretch',
+  children,
+  modes: propModes = EMPTY_MODES,
+  style,
+  contentStyle,
+  cellStyle,
+  accessibilityLabel,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = useMemo(() => resolveGridTokens(modes), [modes]);
+  const resolvedColumnGap = columnGapProp ?? gapProp ?? tokens.columnGap;
+  const resolvedRowGap = rowGapProp ?? gapProp ?? tokens.rowGap;
+  const resolvedPadding = useMemo(() => ({
+    paddingTop: paddingTopProp ?? paddingVerticalProp ?? paddingProp ?? tokens.paddingTop,
+    paddingBottom: paddingBottomProp ?? paddingVerticalProp ?? paddingProp ?? tokens.paddingBottom,
+    paddingLeft: paddingLeftProp ?? paddingHorizontalProp ?? paddingProp ?? tokens.paddingLeft,
+    paddingRight: paddingRightProp ?? paddingHorizontalProp ?? paddingProp ?? tokens.paddingRight
+  }), [paddingTopProp, paddingBottomProp, paddingLeftProp, paddingRightProp, paddingHorizontalProp, paddingVerticalProp, paddingProp, tokens]);
+  const safeColumns = Math.max(1, Math.floor(columns));
+  const processedChildren = useMemo(() => cloneChildrenWithModes(flattenChildren(children), modes), [children, modes]);
+  const cellNodes = useMemo(() => {
+    const nodes = [...processedChildren];
+    if (rows != null) {
+      const targetCount = safeColumns * Math.max(1, Math.floor(rows));
+      while (nodes.length < targetCount) {
+        nodes.push(null);
+      }
+      if (nodes.length > targetCount) {
+        nodes.length = targetCount;
+      }
+    }
+    return nodes;
+  }, [processedChildren, rows, safeColumns]);
+  const gridRows = useMemo(() => {
+    const result = [];
+    for (let index = 0; index < cellNodes.length; index += safeColumns) {
+      result.push(cellNodes.slice(index, index + safeColumns));
+    }
+    return result;
+  }, [cellNodes, safeColumns]);
+  const normalizedColumnFrs = useMemo(() => normalizeFrs(columnFrs, safeColumns), [columnFrs, safeColumns]);
+  const normalizedRowFrs = useMemo(() => rowFrs ? normalizeFrs(rowFrs, gridRows.length) : null, [rowFrs, gridRows.length]);
+  const containerStyle = useMemo(() => ({
+    backgroundColor: tokens.backgroundColor,
+    ...resolvedPadding,
+    width: '100%'
+  }), [tokens.backgroundColor, resolvedPadding]);
+  const rowsContainerStyle = useMemo(() => ({
+    gap: resolvedRowGap,
+    width: '100%'
+  }), [resolvedRowGap]);
+  const rowStyle = useMemo(() => ({
+    flexDirection: 'row',
+    columnGap: resolvedColumnGap,
+    justifyContent: resolveRowJustifyContent(justifyContent),
+    alignItems: alignItems === 'stretch' ? 'stretch' : alignItems === 'center' ? 'center' : 'flex-start',
+    width: '100%'
+  }), [resolvedColumnGap, justifyContent, alignItems]);
+  const defaultAccessibilityLabel = accessibilityLabel ?? `Grid, ${safeColumns} column${safeColumns === 1 ? '' : 's'}, ${gridRows.length} row${gridRows.length === 1 ? '' : 's'}`;
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "none",
+    accessibilityLabel: defaultAccessibilityLabel,
+    testID: testID,
+    children: /*#__PURE__*/_jsx(View, {
+      style: [rowsContainerStyle, contentStyle],
+      children: gridRows.map((row, rowIndex) => {
+        const rowFr = normalizedRowFrs?.[rowIndex];
+        const spacersNeeded = justifyContent === 'space-between' && row.length < safeColumns ? safeColumns - row.length : 0;
+        return /*#__PURE__*/_jsxs(View, {
+          style: rowFr != null ? [rowStyle, {
+            flexGrow: rowFr
+          }] : rowStyle,
+          children: [row.map((cell, columnIndex) => {
+            const absoluteIndex = rowIndex * safeColumns + columnIndex;
+            const cellFlexStyle = buildCellStyle(normalizedColumnFrs[columnIndex] ?? 1, justifyContent, alignItems);
+            return /*#__PURE__*/_jsx(View, {
+              style: [cellFlexStyle, cellStyle],
+              children: cell
+            }, `grid-cell-${absoluteIndex}`);
+          }), spacersNeeded > 0 && Array.from({
+            length: spacersNeeded
+          }, (_, spacerIndex) => /*#__PURE__*/_jsx(View, {
+            style: buildCellStyle(normalizedColumnFrs[row.length + spacerIndex] ?? 1, justifyContent, alignItems)
+          }, `grid-spacer-${rowIndex}-${spacerIndex}`))]
+        }, `grid-row-${rowIndex}`);
+      })
+    })
+  });
+}
+export default /*#__PURE__*/React.memo(Grid);

package/lib/module/components/MoneyValue/MoneyValue.js

@@ -1,10 +1,10 @@
 "use strict";
 
-import React, { useMemo, useEffect, useRef } from 'react';
-import { View, Text, Pressable, Animated } from 'react-native';
+import React, { useMemo, useEffect, useRef, useState, useCallback } from 'react';
+import { View, Text, TextInput, Pressable, Animated, Platform, Keyboard } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // Map of common ISO 4217 currency codes to display symbols
 const CURRENCY_SYMBOLS = {
   INR: '₹',
@@ -56,6 +56,8 @@ function MoneyValue({
   negative,
   focused = false,
   hidden = false,
+  editable = false,
+  onValueChange,
   modes = EMPTY_MODES,
   style,
   valueStyle,
@@ -67,24 +69,51 @@ function MoneyValue({
   ...rest
 }) {
   // Auto-detect negative from value and compute display value
-  const {
-    isNegative,
-    displayValue
-  } = useMemo(() => {
-    const stringValue = String(value);
-    const trimmed = stringValue.trim();
-    const valueIsNegative = trimmed.startsWith('-') || typeof value === 'number' && value < 0;
+  const stringValue = String(value);
+  const trimmed = stringValue.trim();
+  const valueIsNegative = trimmed.startsWith('-') || typeof value === 'number' && value < 0;
 
-    // Strip leading minus sign for display (we show it separately)
-    const absoluteValue = trimmed.startsWith('-') ? trimmed.slice(1) : trimmed;
+  // Strip leading minus sign for display (we show it separately)
+  const absoluteValue = trimmed.startsWith('-') ? trimmed.slice(1) : trimmed;
 
-    // Use explicit negative prop if provided, otherwise use auto-detected
-    const showNegative = negative !== undefined ? negative : valueIsNegative;
-    return {
-      isNegative: hidden ? false : showNegative,
-      displayValue: hidden ? '•••' : absoluteValue
-    };
-  }, [value, negative, hidden]);
+  // Use explicit negative prop if provided, otherwise use auto-detected
+  const showNegative = negative !== undefined ? negative : valueIsNegative;
+  const isNegative = hidden ? false : showNegative;
+  const displayValue = hidden ? '•••' : absoluteValue;
+
+  // Inline editing state
+  const [isEditing, setIsEditing] = useState(false);
+  const [editBuffer, setEditBuffer] = useState('');
+  const inputRef = useRef(null);
+  // Always-current snapshot of the display value for callbacks to reference.
+  const displayValueRef = useRef(displayValue);
+  displayValueRef.current = displayValue;
+  const enterEditMode = useCallback(() => {
+    setIsEditing(true);
+    setEditBuffer(displayValueRef.current);
+    // Focus the input on next frame so the keyboard opens
+    setTimeout(() => inputRef.current?.focus(), 0);
+  }, []);
+  const commitEdit = useCallback(() => {
+    setIsEditing(false);
+    const resolved = editBuffer || '0';
+    if (resolved !== displayValueRef.current) {
+      onValueChange?.(resolved);
+    }
+  }, [editBuffer, onValueChange]);
+  const handleChangeText = useCallback(text => {
+    // Allow only digits and at most one decimal point
+    const filtered = text.replace(/[^0-9.]/g, '');
+    const parts = filtered.split('.');
+    const clean = parts.length > 2 ? parts[0] + '.' + parts.slice(1).join('') : filtered;
+    setEditBuffer(clean);
+  }, []);
+  const handlePress = useCallback(event => {
+    if (editable) {
+      enterEditMode();
+    }
+    onPress?.(event);
+  }, [editable, enterEditMode, onPress]);
 
   // Resolve typography and layout tokens from Figma
   const textColor = getVariableByName('moneyValue/text/color', modes);
@@ -145,44 +174,140 @@ function MoneyValue({
       cursorOpacity.setValue(0);
     }
   }, [focused, cursorOpacity]);
-  return /*#__PURE__*/_jsxs(Pressable, {
-    style: [containerStyle, style],
-    accessibilityRole: "text",
-    accessibilityLabel: undefined,
-    accessibilityHint: accessibilityHint,
-    onPress: onPress,
-    disabled: !onPress,
-    ...rest,
-    children: [isNegative && /*#__PURE__*/_jsx(Text, {
-      style: [currencyTextStyle, negativeSignStyle],
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no",
-      children: "-"
-    }), /*#__PURE__*/_jsx(Text, {
-      style: [currencyTextStyle, currencyStyle],
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no",
-      children: resolvedCurrency
-    }), /*#__PURE__*/_jsxs(View, {
-      style: {
-        flexDirection: 'row',
-        alignItems: 'center'
-      },
-      children: [/*#__PURE__*/_jsx(Text, {
-        style: [valueTextStyle, valueStyle],
-        accessibilityElementsHidden: true,
-        importantForAccessibility: "no",
-        children: displayValue
-      }), focused && /*#__PURE__*/_jsx(Animated.View, {
-        style: {
-          opacity: cursorOpacity,
-          width: 2,
-          height: valueFontSize * 1.1,
-          backgroundColor: textColor,
-          marginLeft: 2
-        }
-      })]
-    })]
+
+  // Keyboard avoidance — lift the component when the keyboard would cover it.
+  // Follows the same pattern as ActionFooter (uses Keyboard.addListener).
+  // Resets when editing ends or the keyboard hides.
+  const rootRef = useRef(null);
+  const keyboardLift = useRef(new Animated.Value(0)).current;
+  const rootWindowYRef = useRef(0);
+  const rootMeasuredHeightRef = useRef(0);
+  const measureRoot = useCallback(() => {
+    rootRef.current?.measureInWindow((_x, y, _w, h) => {
+      rootWindowYRef.current = y;
+      rootMeasuredHeightRef.current = h;
+    });
+  }, []);
+  const handleRootLayout = useCallback(_e => {
+    // measureInWindow gives the component's position relative to the window,
+    // which is what we need for keyboard overlap calculation. onLayout fires
+    // after the component mounts and whenever its size changes.
+    measureRoot();
+  }, [measureRoot]);
+  useEffect(() => {
+    if (!editable) return;
+    const showSub = Keyboard.addListener('keyboardDidShow', e => {
+      measureRoot();
+      if (!isEditing) return;
+      const kbHeight = e.endCoordinates.height;
+      const {
+        height: screenH
+      } = require('react-native').Dimensions.get('window');
+      const componentBottom = rootWindowYRef.current + rootMeasuredHeightRef.current;
+      const visibleBottom = screenH - kbHeight;
+      const overlap = componentBottom - visibleBottom + 12;
+      if (overlap > 0) {
+        Animated.timing(keyboardLift, {
+          toValue: -overlap,
+          duration: e.duration ?? 250,
+          useNativeDriver: true
+        }).start();
+      }
+    });
+    const hideSub = Keyboard.addListener('keyboardDidHide', () => {
+      Animated.timing(keyboardLift, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true
+      }).start();
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [editable, isEditing, keyboardLift, measureRoot]);
+
+  // Reset lift when editing ends
+  useEffect(() => {
+    if (!isEditing) {
+      keyboardLift.setValue(0);
+    }
+  }, [isEditing, keyboardLift]);
+  const handleBlur = useCallback(() => {
+    commitEdit();
+  }, [commitEdit]);
+  const handleSubmitEditing = useCallback(() => {
+    commitEdit();
+  }, [commitEdit]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: {
+      transform: [{
+        translateY: keyboardLift
+      }]
+    },
+    children: /*#__PURE__*/_jsx(View, {
+      ref: rootRef,
+      onLayout: handleRootLayout,
+      children: /*#__PURE__*/_jsxs(Pressable, {
+        style: [containerStyle, style],
+        accessibilityRole: "text",
+        accessibilityLabel: undefined,
+        accessibilityHint: accessibilityHint,
+        onPress: handlePress,
+        disabled: !onPress && !editable,
+        ...rest,
+        children: [isNegative && /*#__PURE__*/_jsx(Text, {
+          style: [currencyTextStyle, negativeSignStyle],
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no",
+          children: "-"
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [currencyTextStyle, currencyStyle],
+          accessibilityElementsHidden: true,
+          importantForAccessibility: "no",
+          children: resolvedCurrency
+        }), /*#__PURE__*/_jsx(View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center'
+          },
+          children: isEditing ? /*#__PURE__*/_jsx(TextInput, {
+            ref: inputRef,
+            value: editBuffer,
+            onChangeText: handleChangeText,
+            onBlur: handleBlur,
+            onSubmitEditing: handleSubmitEditing,
+            keyboardType: "decimal-pad",
+            returnKeyType: "done",
+            selectTextOnFocus: true,
+            style: [valueTextStyle, valueStyle, {
+              padding: 0,
+              margin: 0,
+              // On web a thin border helps the cursor appear precisely
+              ...(Platform.OS === 'web' ? {
+                outlineStyle: 'none'
+              } : {})
+            }],
+            accessibilityLabel: accessibilityLabel || 'Edit value'
+          }) : /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: [valueTextStyle, valueStyle],
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no",
+              children: displayValue
+            }), focused && /*#__PURE__*/_jsx(Animated.View, {
+              style: {
+                opacity: cursorOpacity,
+                width: 2,
+                height: valueFontSize * 1.1,
+                backgroundColor: textColor,
+                marginLeft: 2
+              }
+            })]
+          })
+        })]
+      })
+    })
   });
 }
 export default MoneyValue;

package/lib/module/components/NumberPagination/NumberPagination.js

@@ -0,0 +1,138 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import GlassFill from '../../utils/GlassFill/GlassFill';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function resolveNumberPaginationTokens(modes) {
+  const horizontalPadding = getVariableByName('numberPagination/padding/horizontal', modes) ?? 4;
+  const verticalPadding = getVariableByName('numberPagination/padding/vertical', modes) ?? 4;
+  const radiusRaw = getVariableByName('numberPagination/radius', modes) ?? 9999;
+  const backgroundColor = getVariableByName('numberPagination/background/color', modes) ?? 'rgba(141, 141, 141, 0.4)';
+  const borderColor = getVariableByName('numberPagination/border/color', modes) ?? 'rgba(255, 255, 255, 0.15)';
+
+  // control number variables
+  const itemWidth = getVariableByName('controlNumber/width', modes) ?? 32;
+  const itemHeight = getVariableByName('controlNumber/height', modes) ?? 32;
+  const itemRadiusRaw = getVariableByName('controlNumber/radius', modes) ?? 9999;
+  const activeBgColor = getVariableByName('control/active/background/color', modes) ?? '#ffffff';
+  const activeTextColor = getVariableByName('control/active/text/color', modes) ?? '#000000';
+  const inactiveTextColor = getVariableByName('control/text/default', modes) ?? '#ffffff';
+
+  // typography variables
+  const fontFamily = getVariableByName('numberPagination/fontFamily', modes) ?? 'JioType';
+  const fontSize = getVariableByName('numberPagination/fontSize', modes) ?? 16;
+  const fontWeight = String(getVariableByName('numberPagination/fontWeight', modes) ?? '500');
+  const lineHeight = getVariableByName('numberPagination/lineHeight', modes) ?? 18;
+  const blurMinimal = getVariableByName('blur/minimal', modes) ?? 29;
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(Number(blurMinimal))));
+  const borderRadius = radiusRaw === 9999 ? 39 / 2 : radiusRaw;
+  const itemRadius = itemRadiusRaw === 9999 ? itemWidth / 2 : itemRadiusRaw;
+  return {
+    containerStyle: {
+      height: 39,
+      borderRadius,
+      borderWidth: 1,
+      borderColor,
+      backgroundColor: 'transparent',
+      overflow: 'hidden',
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: horizontalPadding,
+      paddingVertical: verticalPadding
+    },
+    activeItemStyle: {
+      width: itemWidth,
+      height: itemHeight,
+      borderRadius: itemRadius,
+      backgroundColor: activeBgColor,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    inactiveItemStyle: {
+      width: itemWidth,
+      height: itemHeight,
+      borderRadius: itemRadius,
+      backgroundColor: 'transparent',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    activeTextStyle: {
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      color: activeTextColor,
+      textAlign: 'center'
+    },
+    inactiveTextStyle: {
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      color: inactiveTextColor,
+      textAlign: 'center'
+    },
+    blurIntensity,
+    backgroundColor
+  };
+}
+
+/**
+ * NumberPagination component displays a horizontal list of page numbers on a frosted glass surface.
+ * All styling is driven by Figma design tokens with support for custom children slot.
+ */
+export default function NumberPagination({
+  activePage = 1,
+  totalPages = 1,
+  onPageChange,
+  children,
+  modes,
+  style
+}) {
+  const tokens = useMemo(() => resolveNumberPaginationTokens(modes ?? {}), [modes]);
+  const renderPages = () => {
+    if (children) {
+      return children;
+    }
+    const pages = [];
+    for (let i = 1; i <= totalPages; i++) {
+      const active = i === activePage;
+      pages.push(/*#__PURE__*/_jsx(Pressable, {
+        onPress: () => onPageChange?.(i),
+        style: ({
+          pressed
+        }) => [active ? tokens.activeItemStyle : tokens.inactiveItemStyle, pressed && {
+          opacity: 0.7
+        }],
+        accessibilityRole: "button",
+        accessibilityState: {
+          selected: active
+        },
+        accessibilityLabel: `Page ${i}`,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: active ? tokens.activeTextStyle : tokens.inactiveTextStyle,
+          children: i
+        })
+      }, i));
+    }
+    return pages;
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: [tokens.containerStyle, style],
+    children: [/*#__PURE__*/_jsx(GlassFill, {
+      tint: "light",
+      intensity: tokens.blurIntensity,
+      overlayColor: tokens.backgroundColor,
+      androidTintWash: false
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: '100%'
+      },
+      children: renderPages()
+    })]
+  });
+}

package/lib/module/components/PdpCcCard/PdpCcCard.js

@@ -39,6 +39,9 @@ function PdpCcCard({
   media,
   title = 'Title',
   subtitle = 'Subtitle',
+  numberOfLines,
+  disableTruncation,
+  singleLine,
   metrics = DEFAULT_METRICS,
   buttonLabel = 'button',
   buttonIcon = 'ic_add_circle',
@@ -90,7 +93,10 @@ function PdpCcCard({
       title: title,
       subtitle: subtitle,
       textAlign: "Center",
-      modes: modes
+      modes: modes,
+      numberOfLines: numberOfLines,
+      disableTruncation: disableTruncation,
+      singleLine: singleLine
     }), metrics.length > 0 ? /*#__PURE__*/_jsx(View, {
       style: styles.metricsRow,
       children: metrics.map((metric, index) => /*#__PURE__*/_jsxs(React.Fragment, {