jfs-components 0.1.8 → 0.1.17

package/lib/module/components/CompareTable/CompareTable.js

@@ -3,8 +3,9 @@
 import React from 'react';
 import { View, Text, Pressable, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import Accordion from '../Accordion/Accordion';
+import Table from '../Table/Table';
 import Image from '../Image/Image';
 import IconButton from '../IconButton/IconButton';
 import Icon from '../../icons/Icon';
@@ -104,7 +105,8 @@ function CompareTable({
   addColumnLabel = 'Add a card',
   maxColumns = 4,
   modes = EMPTY_MODES,
-  style
+  style,
+  disableTruncation
 }) {
   // --- selection card tokens ------------------------------------------------
   const cardBg = getVariableByName('selectionCard/background/color', modes) ?? '#ffffff';
@@ -118,6 +120,11 @@ function CompareTable({
   const cardLabelFontFamily = getVariableByName('selectionCard/label/fontfamily', modes) ?? 'JioType Var';
   const cardLabelFontWeight = getVariableByName('selectionCard/label/fontweight', modes) ?? 700;
   const imageRadius = getVariableByName('image/radius', modes) ?? 8;
+  // `selectionCard/radius` (Figma node 5568:3487) rounds the card corners.
+  // The published token store is still out of sync (the variable resolves to
+  // `0` in the design), so the read falls back to `0` and will pick up a
+  // rounded value automatically once the store syncs.
+  const cardRadius = getVariableByName('selectionCard/radius', modes) ?? 0;
 
   // --- add-a-card icon button tokens ---------------------------------------
   // padding/size/border come from the shared iconButton tokens; the filled
@@ -127,30 +134,35 @@ function CompareTable({
   const addBorderSize = getVariableByName('iconButton/border/size', modes) ?? 1;
   const addPadding = getVariableByName('iconButton/padding', modes) ?? 11;
   const addIconSize = getVariableByName('iconButton/icon/size', modes) ?? 18;
+  // `iconButton/radius` is the design-token sentinel `9999` ("perfect
+  // circle"), mirroring IconButton's own resolution.
+  const addRadius = getVariableByName('iconButton/radius', modes) ?? 9999;
   const addBg = ADD_BUTTON_BG;
   const addIconColor = ADD_BUTTON_ICON_COLOR;
 
   // --- table header tokens --------------------------------------------------
-  const headerBg = getVariableByName('comparetableHeader/background/color', modes) ?? '#f5f5f5';
-  const headerLabelColor = getVariableByName('comparetableHeader/label/color', modes) ?? '#000000';
-  const headerFontSize = getVariableByName('comparetableHeader/label/fontsize', modes) ?? 14;
-  const headerFontFamily = getVariableByName('comparetableHeader/label/fontfamily', modes) ?? 'JioType Var';
-  const headerFontWeight = getVariableByName('comparetableHeader/label/fontweight', modes) ?? 600;
-  const headerPaddingH = getVariableByName('comparetableHeader/padding/horizontal', modes) ?? 12;
-  const headerPaddingV = getVariableByName('comparetableHeader/padding/vertical', modes) ?? 12;
+  const headerBg = getVariableByName('tableHeader/background/color', modes) ?? '#f5f5f5';
+  const headerLabelColor = getVariableByName('tableHeader/label/color', modes) ?? '#000000';
+  const headerFontSize = getVariableByName('tableHeader/label/fontsize', modes) ?? 14;
+  const headerFontFamily = getVariableByName('tableHeader/label/fontfamily', modes) ?? 'JioType Var';
+  const headerFontWeight = getVariableByName('tableHeader/label/fontweight', modes) ?? 600;
+  const headerPaddingH = getVariableByName('tableHeader/padding/horizontal', modes) ?? 12;
+  const headerPaddingV = getVariableByName('tableHeader/padding/vertical', modes) ?? 12;
 
   // --- table cell tokens ----------------------------------------------------
-  const cellBorderColor = getVariableByName('compareTableCell/border/color', modes) ?? '#eeeeee';
-  const cellBorderSize = getVariableByName('compareTableCell/border/size', modes) ?? 1;
-  const cellBg = getVariableByName('compareTableCell/background/color', modes) ?? '#ffffff';
-  const cellLabelColor = getVariableByName('compareTableCell/label/color', modes) ?? '#000000';
-  const cellFontSize = getVariableByName('compareTableCell/label/fontsize', modes) ?? 14;
-  const cellFontFamily = getVariableByName('compareTableCell/label/fontfamily', modes) ?? 'JioType Var';
-  const cellFontWeight = getVariableByName('compareTableCell/label/fontweight', modes) ?? 400;
-  const cellPaddingH = getVariableByName('compareTableCell/padding/horizontal', modes) ?? 12;
-  const cellPaddingV = getVariableByName('compareTableCell/padding/vertical', modes) ?? 12;
+  const cellBorderColor = getVariableByName('tableCell/border/color', modes) ?? '#eeeeee';
+  const cellBorderSize = getVariableByName('tableCell/border/size', modes) ?? 1;
+  const cellBg = getVariableByName('tableCell/background/color', modes) ?? '#ffffff';
+  const cellLabelColor = getVariableByName('tableCell/label/color', modes) ?? '#000000';
+  const cellFontSize = getVariableByName('tableCell/label/fontsize', modes) ?? 14;
+  const cellFontFamily = getVariableByName('tableCell/label/fontfamily', modes) ?? 'JioType Var';
+  const cellFontWeight = getVariableByName('tableCell/label/fontweight', modes) ?? 400;
+  const cellPaddingH = getVariableByName('tableCell/padding/horizontal', modes) ?? 12;
+  const cellPaddingV = getVariableByName('tableCell/padding/vertical', modes) ?? 12;
   const columnCount = columns.length;
   const showAddCard = onAddColumn != null && columnCount < maxColumns;
+  /** Grid columns shared by the selection-card row and every table row. */
+  const gridColumnCount = columnCount + (showAddCard ? 1 : 0);
   const cardLabelStyle = {
     ...NO_WRAP_TEXT,
     color: cardLabelColor,
@@ -185,6 +197,7 @@ function CompareTable({
     minWidth: 0,
     minHeight: 147,
     backgroundColor: cardBg,
+    borderRadius: cardRadius,
     alignItems: 'center',
     justifyContent: 'center',
     gap: cardGap,
@@ -209,7 +222,7 @@ function CompareTable({
         accessibilityLabel: column.label
       }), column.label != null && /*#__PURE__*/_jsx(Text, {
         style: cardLabelStyle,
-        numberOfLines: 2,
+        ...resolveTruncation(disableTruncation, 2),
         children: column.label
       }), column.actionLabel != null && /*#__PURE__*/_jsx(Pressable, {
         onPress: column.onActionPress,
@@ -246,7 +259,7 @@ function CompareTable({
       style: {
         width: addPadding * 2 + addIconSize,
         height: addPadding * 2 + addIconSize,
-        borderRadius: 9999,
+        borderRadius: addRadius,
         borderWidth: addBorderSize,
         borderColor: addBorderColor,
         backgroundColor: addBg,
@@ -262,7 +275,7 @@ function CompareTable({
       })
     }), /*#__PURE__*/_jsx(Text, {
       style: cardLabelStyle,
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       children: addColumnLabel
     })]
   }, "__add_card__");
@@ -285,53 +298,72 @@ function CompareTable({
     }
     return cloneChildrenWithModes(value, modes);
   };
-  const renderTable = section => /*#__PURE__*/_jsxs(View, {
+
+  // Renders a section's comparison grid using the shared `Table` component.
+  // CompareTable keeps ownership of token resolution and passes the resolved
+  // values as style overrides so the appearance is byte-identical to the
+  // previous hand-rolled grid (full outer border + suppressed last-edge
+  // dividers), while reusing Table's structure and `modes` cascade.
+  //
+  // When the "Add a card" tile is visible, each table row appends an empty
+  // trailing cell with the same flex weight so data columns stay 1:1 beneath
+  // their selection card.
+  const renderTableCell = (content, colIndex, isLastRow, key) => {
+    const isLastCol = colIndex === gridColumnCount - 1;
+    return /*#__PURE__*/_jsx(Table.Cell, {
+      modes: modes,
+      flex: 1,
+      align: "left",
+      isLastColumn: isLastCol,
+      isLastRow: isLastRow,
+      style: {
+        backgroundColor: cellBg,
+        borderColor: cellBorderColor,
+        borderRightWidth: isLastCol ? 0 : cellBorderSize,
+        borderBottomWidth: isLastRow ? 0 : cellBorderSize,
+        paddingHorizontal: cellPaddingH,
+        paddingVertical: cellPaddingV
+      },
+      children: content
+    }, key);
+  };
+  const renderTable = section => /*#__PURE__*/_jsxs(Table, {
+    modes: modes,
     style: {
       width: '100%',
       borderWidth: cellBorderSize,
-      borderColor: cellBorderColor,
-      overflow: 'hidden'
+      borderColor: cellBorderColor
     },
-    children: [section.header != null && /*#__PURE__*/_jsx(View, {
+    children: [section.header != null && /*#__PURE__*/_jsx(Table.Header, {
+      modes: modes,
       style: {
-        backgroundColor: headerBg,
-        paddingHorizontal: headerPaddingH,
-        paddingVertical: headerPaddingV,
         borderBottomWidth: cellBorderSize,
         borderBottomColor: cellBorderColor
       },
-      children: /*#__PURE__*/_jsx(Text, {
-        style: headerTextStyle,
-        children: section.header
-      })
-    }), section.rows.map((row, rowIndex) => {
-      const isLastRow = rowIndex === section.rows.length - 1;
-      return /*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsx(Table.HeaderCell, {
+        modes: modes,
+        flex: 1,
         style: {
-          flexDirection: 'row',
-          width: '100%'
+          backgroundColor: headerBg,
+          paddingHorizontal: headerPaddingH,
+          paddingVertical: headerPaddingV
         },
-        children: Array.from({
-          length: columnCount
-        }).map((_, colIndex) => {
-          const isLastCol = colIndex === columnCount - 1;
-          return /*#__PURE__*/_jsx(View, {
-            style: {
-              flex: 1,
-              minWidth: 0,
-              backgroundColor: cellBg,
-              justifyContent: 'center',
-              paddingHorizontal: cellPaddingH,
-              paddingVertical: cellPaddingV,
-              borderRightWidth: isLastCol ? 0 : cellBorderSize,
-              borderRightColor: cellBorderColor,
-              borderBottomWidth: isLastRow ? 0 : cellBorderSize,
-              borderBottomColor: cellBorderColor
-            },
-            children: renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
-          }, colIndex);
+        children: /*#__PURE__*/_jsx(Text, {
+          style: headerTextStyle,
+          children: section.header
         })
-      }, row.key ?? rowIndex);
+      })
+    }), /*#__PURE__*/_jsx(Table.Body, {
+      modes: modes,
+      children: section.rows.map((row, rowIndex) => {
+        const isLastRow = rowIndex === section.rows.length - 1;
+        return /*#__PURE__*/_jsxs(Table.Row, {
+          modes: modes,
+          children: [Array.from({
+            length: columnCount
+          }).map((_, colIndex) => renderTableCell(renderCellContent(row.values?.[colIndex], `${rowIndex}-${colIndex}`), colIndex, isLastRow, colIndex)), showAddCard && renderTableCell(null, gridColumnCount - 1, isLastRow, '__add_spacer__')]
+        }, row.key ?? rowIndex);
+      })
     })]
   });
   return /*#__PURE__*/_jsxs(View, {
@@ -356,9 +388,6 @@ function CompareTable({
         title: section.title,
         defaultExpanded: section.defaultExpanded ?? index === 0,
         modes: modes,
-        style: {
-          paddingHorizontal: headerPaddingH
-        },
         children: renderTable(section)
       }, section.key ?? section.title ?? index))
     })]

package/lib/module/components/CoverageBarComparison/CoverageBarComparison.js

@@ -5,7 +5,7 @@ import { View, Text } from 'react-native';
 import Svg, { Rect } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem';
 
 /**
@@ -136,7 +136,8 @@ function CoverageBarComparison({
   chartStyle,
   legendStyle,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -222,7 +223,7 @@ function CoverageBarComparison({
             minWidth: 1
           },
           children: [hasLabel ? /*#__PURE__*/_jsx(Text, {
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             style: [computedLabelStyle, labelStyle],
             children: original.label
           }) : null, /*#__PURE__*/_jsx(BarShape, {

package/lib/module/components/DebitCard/DebitCard.js

@@ -26,24 +26,24 @@ function DebitCard({
     ...globalModes,
     ...propModes
   };
-  const background = getVariableByName('debitCard/background', modes) || '#cea15a';
-  const radius = getVariableByName('debitCard/radius', modes) || 16;
-  const width = getVariableByName('debitCard/width', modes) || 328;
-  const height = getVariableByName('debitCard/height', modes) || 224;
-  const paddingBottom = getVariableByName('debitCard/padding/bottom', modes) || 24;
-  const headerPaddingH = getVariableByName('debitCard/header/padding/horizontal', modes) || 20;
-  const headerPaddingTop = getVariableByName('debitCard/header/padding/top', modes) || 16;
-  const headerPaddingBottom = getVariableByName('debitCard/header/padding/bottom', modes) || 28;
-  const cardArtHeight = getVariableByName('debitCard/cardArt/height', modes) || 50;
-  const cardArtRadius = getVariableByName('debitCard/cardArt/radius', modes) || 4;
-  const footerGap = getVariableByName('debitCard/footer/gap', modes) || 16;
-  const footerPaddingH = getVariableByName('debitCard/footer/padding/horizontal', modes) || 20;
-  const footerPaddingTop = getVariableByName('debitCard/footer/padding/top', modes) || 16;
-  const foreground = getVariableByName('debitCard/foreground', modes) || '#141414';
-  const fontSize = getVariableByName('debitCard/fontSize', modes) || 14;
-  const fontFamily = getVariableByName('debitCard/fontFamily', modes) || 'JioType Var';
-  const lineHeight = getVariableByName('debitCard/lineHeight', modes) || 17;
-  const fontWeightRaw = getVariableByName('debitCard/fontWeight', modes) || 500;
+  const background = getVariableByName('debitCard/background', modes);
+  const radius = getVariableByName('debitCard/radius', modes);
+  const width = getVariableByName('debitCard/width', modes);
+  const height = getVariableByName('debitCard/height', modes);
+  const paddingBottom = getVariableByName('debitCard/padding/bottom', modes);
+  const headerPaddingH = getVariableByName('debitCard/header/padding/horizontal', modes);
+  const headerPaddingTop = getVariableByName('debitCard/header/padding/top', modes);
+  const headerPaddingBottom = getVariableByName('debitCard/header/padding/bottom', modes);
+  const cardArtHeight = getVariableByName('debitCard/cardArt/height', modes);
+  const cardArtRadius = getVariableByName('debitCard/cardArt/radius', modes);
+  const footerGap = getVariableByName('debitCard/footer/gap', modes);
+  const footerPaddingH = getVariableByName('debitCard/footer/padding/horizontal', modes);
+  const footerPaddingTop = getVariableByName('debitCard/footer/padding/top', modes);
+  const foreground = getVariableByName('debitCard/foreground', modes);
+  const fontSize = getVariableByName('debitCard/fontSize', modes);
+  const fontFamily = getVariableByName('debitCard/fontFamily', modes);
+  const lineHeight = getVariableByName('debitCard/lineHeight', modes);
+  const fontWeightRaw = getVariableByName('debitCard/fontWeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   const containerStyle = {
     backgroundColor: background,

package/lib/module/components/Disclaimer/Disclaimer.js

@@ -44,11 +44,11 @@ function Disclaimer({
     ...propModes
   };
   // Resolve typography and color from Figma variables
-  const color = getVariableByName('disclaimer/color', modes) || '#24262b';
-  const fontSize = getVariableByName('disclaimer/label/fontSize', modes) || 10;
-  const lineHeight = getVariableByName('disclaimer/label/lineHeight', modes) || 12;
-  const fontFamily = getVariableByName('disclaimer/label/fontFamily', modes) || 'System';
-  const fontWeightRaw = getVariableByName('disclaimer/label/fontWeight', modes) || 500;
+  const color = getVariableByName('disclaimer/color', modes);
+  const fontSize = getVariableByName('disclaimer/label/fontSize', modes);
+  const lineHeight = getVariableByName('disclaimer/label/lineHeight', modes);
+  const fontFamily = getVariableByName('disclaimer/label/fontFamily', modes);
+  const fontWeightRaw = getVariableByName('disclaimer/label/fontWeight', modes);
   const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw;
   const baseTextStyle = {
     color,

package/lib/module/components/DonutChart/DonutChart.js

@@ -5,7 +5,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import Svg, { Circle } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, flattenChildren, resolveTruncation } from '../../utils/react-utils';
 
 /**
  * Per-segment data definition for the data-driven `segments` prop.
@@ -126,7 +126,8 @@ function DonutChart({
   style,
   valueStyle,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -163,17 +164,17 @@ function DonutChart({
   const hasChildrenSlot = customCenterChildren.length > 0;
   const showValueLabel = !hasChildrenSlot && shouldRenderText(value);
   const showLabel = !hasChildrenSlot && shouldRenderText(label);
-  const valueColor = getVariableByName('donutChart/value/color', modes) ?? getVariableByName('value/fg', modes) ?? '#000000';
-  const valueFontFamily = getVariableByName('donutChart/value/fontFamily', modes) ?? getVariableByName('value/fontFamily', modes) ?? 'JioType Var';
-  const valueFontSize = toNumber(getVariableByName('donutChart/value/fontSize', modes) ?? getVariableByName('value/fontSize', modes), 29);
-  const valueLineHeight = toNumber(getVariableByName('donutChart/value/lineHeight', modes) ?? getVariableByName('value/lineHeight', modes), 29);
-  const valueFontWeight = toFontWeight(getVariableByName('donutChart/value/fontWeight', modes) ?? getVariableByName('value/fontWeight', modes), '900');
-  const labelColor = getVariableByName('donutChart/label/color', modes) ?? getVariableByName('label/fg', modes) ?? '#000000';
-  const labelFontFamily = getVariableByName('donutChart/label/fontFamily', modes) ?? getVariableByName('label/fontFamily', modes) ?? 'JioType Var';
-  const labelFontSize = toNumber(getVariableByName('donutChart/label/fontSize', modes) ?? getVariableByName('label/fontSize', modes), 12);
-  const labelLineHeight = toNumber(getVariableByName('donutChart/label/lineHeight', modes) ?? getVariableByName('label/lineHeight', modes), 15.6);
-  const labelFontWeight = toFontWeight(getVariableByName('donutChart/label/fontWeight', modes) ?? getVariableByName('label/fontWeight', modes), '400');
-  const textWrapGap = toNumber(getVariableByName('donutChart/textWrap/gap', modes) ?? getVariableByName('textWrap/gap', modes), 7);
+  const valueColor = getVariableByName('value/fg', modes);
+  const valueFontFamily = getVariableByName('value/fontFamily', modes);
+  const valueFontSize = toNumber(getVariableByName('value/fontSize', modes), 29);
+  const valueLineHeight = toNumber(getVariableByName('value/lineHeight', modes), 29);
+  const valueFontWeight = toFontWeight(getVariableByName('value/fontWeight', modes), '900');
+  const labelColor = getVariableByName('label/fg', modes);
+  const labelFontFamily = getVariableByName('label/fontFamily', modes);
+  const labelFontSize = toNumber(getVariableByName('label/fontSize', modes), 12);
+  const labelLineHeight = toNumber(getVariableByName('label/lineHeight', modes), 15.6);
+  const labelFontWeight = toFontWeight(getVariableByName('label/fontWeight', modes), '400');
+  const textWrapGap = toNumber(getVariableByName('textWrap/gap', modes), 7);
   const containerStyle = {
     alignItems: 'center',
     height: size,
@@ -224,7 +225,7 @@ function DonutChart({
           fontWeight: valueFontWeight,
           textAlign: 'center'
         }, valueStyle],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: value
       }) : null, showLabel ? /*#__PURE__*/_jsx(Text, {
         style: [{
@@ -235,7 +236,7 @@ function DonutChart({
           fontWeight: labelFontWeight,
           textAlign: 'center'
         }, labelStyle],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: label
       }) : null]
     }) : null]

package/lib/module/components/Drawer/Drawer.js

@@ -6,6 +6,7 @@ import { Gesture, GestureDetector, ScrollView } from 'react-native-gesture-handl
 import Animated, { runOnJS, useAnimatedProps, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import { boxShadow } from '../../utils/shadow';
 import Overlay from '../Overlay/Overlay';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
@@ -303,28 +304,29 @@ function DrawerInner({
   });
 
   // Design Tokens
-  const backgroundColor = getVariableByName('drawer/background', modes) || '#f5f5f5';
-  const radius = getVariableByName('drawer/radius/top', modes) || 12;
+  const backgroundColor = getVariableByName('drawer/background', modes);
+  const radius = getVariableByName('drawer/radius/top', modes);
 
   // Handle
-  const handleColor = getVariableByName('drawer/handlebar/background', modes) || '#e0e0e3';
-  const handleWidth = getVariableByName('drawer/handlebar/width', modes) || 42;
-  const handleHeight = getVariableByName('drawer/handlebar/height', modes) || 6;
-  const handleRadius = getVariableByName('drawer/handlebar/radius', modes) || 999;
+  const handleColor = getVariableByName('drawer/handlebar/background', modes);
+  const handleWidth = getVariableByName('drawer/handlebar/width', modes);
+  const handleHeight = getVariableByName('drawer/handlebar/height', modes);
+  const handleRadius = getVariableByName('drawer/handlebar/radius', modes);
 
   // Padding
-  const paddingLeft = getVariableByName('drawer/padding/left', modes) || 8;
-  const paddingRight = getVariableByName('drawer/padding/right', modes) || 8;
-  const paddingBottom = getVariableByName('drawer/padding/bottom', modes) || 10;
-  const drawerGap = getVariableByName('drawer/gap', modes) || 8;
-  // Note: drawer/padding/top is 0 in tokens, but we keep the 8px visual spacing for the handle as requested.
+  const paddingLeft = getVariableByName('drawer/padding/left', modes);
+  const paddingRight = getVariableByName('drawer/padding/right', modes);
+  const paddingBottom = getVariableByName('drawer/padding/bottom', modes);
+  const drawerGap = getVariableByName('drawer/gap', modes);
 
   // Title
-  const titleColor = getVariableByName('drawer/title/color', modes) || '#0d0d0f';
-  const titleSize = getVariableByName('drawer/title/fontSize', modes) || 14;
-  const titleWeight = getVariableByName('drawer/title/fontWeight', modes) || '700';
-  const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes) || 17;
-  const titlePaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes) || 8;
+  const titleColor = getVariableByName('drawer/title/color', modes);
+  const titleSize = getVariableByName('drawer/title/fontSize', modes);
+  const titleWeight = getVariableByName('drawer/title/fontWeight', modes);
+  const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes);
+  const titleWrapPaddingTop = getVariableByName('drawer/titleWrap/padding/top', modes);
+  const titleWrapPaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes);
+  const titleWrapPaddingHorizontal = getVariableByName('drawer/titleWrap/padding/horizontal', modes);
 
   // Drop shadow — Figma layers two shadows (primary + secondary) sharing
   // the same offsetY/blur but with their own offsetX and color.
@@ -335,26 +337,12 @@ function DrawerInner({
   const shadowSecondaryOffsetX = getVariableByName('drawer/shadow/secondary/offsetX', modes) ?? 0;
   const shadowSecondaryColor = getVariableByName('drawer/shadow/secondary/color', modes) ?? 'rgba(12, 13, 16, 0.12)';
 
-  // Cross-platform shadow style. Web supports stacking two shadows via
-  // boxShadow. iOS only supports a single native shadow per view, so we
-  // apply the more prominent (primary) one. Android uses elevation.
-  const shadowStyle = Platform.select({
-    web: {
-      boxShadow: `${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` + `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`
-    },
-    ios: {
-      shadowColor: shadowPrimaryColor,
-      shadowOffset: {
-        width: shadowPrimaryOffsetX,
-        height: shadowPrimaryOffsetY
-      },
-      shadowOpacity: 1,
-      shadowRadius: shadowPrimaryBlur / 2
-    },
-    android: {
-      elevation: 16
-    },
-    default: {}
+  // Cross-platform shadow via the unified helper. Figma layers two shadows
+  // (secondary + primary) which stack natively as a single multi-layer
+  // boxShadow on web + RN 0.76+. On older RN the helper falls back to the most
+  // prominent layer (iOS shadow*) / a fixed elevation (Android).
+  const shadowStyle = boxShadow(`${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` + `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`, {
+    elevation: 16
   });
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer';
   return (
@@ -399,30 +387,42 @@ function DrawerInner({
               borderTopRightRadius: radius,
               paddingLeft,
               paddingRight,
-              paddingBottom,
-              rowGap: drawerGap
+              paddingBottom
             }],
-            children: [/*#__PURE__*/_jsx(View, {
-              style: [styles.handleArea, !title && !header && {
-                paddingBottom: 0
-              }],
-              children: /*#__PURE__*/_jsx(View, {
-                style: [{
-                  backgroundColor: handleColor,
-                  width: handleWidth,
-                  height: handleHeight,
-                  borderRadius: handleRadius
-                }]
-              })
-            }), header, title && /*#__PURE__*/_jsx(Text, {
-              style: [{
-                color: titleColor,
-                fontSize: titleSize,
-                fontWeight: titleWeight,
-                lineHeight: titleLineHeight,
-                marginBottom: titlePaddingBottom
-              }],
-              children: title
+            children: [/*#__PURE__*/_jsxs(View, {
+              style: {
+                marginBottom: drawerGap
+              },
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [styles.handleArea, !title && !header && {
+                  marginBottom: drawerGap
+                }],
+                children: /*#__PURE__*/_jsx(View, {
+                  style: [{
+                    backgroundColor: handleColor,
+                    width: handleWidth,
+                    height: handleHeight,
+                    borderRadius: handleRadius
+                  }]
+                })
+              }), header, title && /*#__PURE__*/_jsx(View, {
+                style: {
+                  paddingTop: titleWrapPaddingTop,
+                  paddingBottom: titleWrapPaddingBottom,
+                  paddingHorizontal: titleWrapPaddingHorizontal,
+                  alignItems: 'center'
+                },
+                children: /*#__PURE__*/_jsx(Text, {
+                  style: [{
+                    color: titleColor,
+                    fontSize: titleSize,
+                    fontWeight: titleWeight,
+                    lineHeight: titleLineHeight,
+                    textAlign: 'center'
+                  }],
+                  children: title
+                })
+              })]
             }), /*#__PURE__*/_jsx(AnimatedScrollView, {
               ref: scrollRef,
               style: [styles.content, contentStyle],
@@ -474,7 +474,7 @@ const styles = StyleSheet.create({
   },
   handleArea: {
     alignItems: 'center',
-    paddingVertical: 8,
+    marginTop: 8,
     width: '100%'
   },
   content: {