jfs-components 0.1.8 → 0.1.17

package/src/components/Radio/Radio.tsx

@@ -3,13 +3,13 @@ import {
     Pressable,
     View,
     StyleSheet,
-    Platform,
     ViewStyle,
     DimensionValue,
     StyleProp,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import { boxShadow } from '../../utils/shadow'
 import type { Modes } from '../../design-tokens'
 
 // ---------------------------------------------------------------------------
@@ -61,9 +61,9 @@ export const Radio = forwardRef<View, RadioProps>(function Radio({
     const [pressed, setPressed] = useState(false)
 
     // ---- Dimensions ----
-    const widthStr = getVariableByName('radio/width', modes) || '18'
-    const heightStr = getVariableByName('radio/height', modes) || '18'
-    const selectorSizeStr = getVariableByName('radio/selector/size', modes) || '10'
+    const widthStr = getVariableByName('radio/width', modes)
+    const heightStr = getVariableByName('radio/height', modes)
+    const selectorSizeStr = getVariableByName('radio/selector/size', modes)
 
     const width = parseFloat(widthStr?.toString() || '18')
     const height = parseFloat(heightStr?.toString() || '18')
@@ -101,7 +101,7 @@ export const Radio = forwardRef<View, RadioProps>(function Radio({
     // ---- Colors & Border ----
 
     const resolveColor = (path: string, fallback: string) => {
-        return getVariableByName(path, modes) || fallback
+        return getVariableByName(path, modes)
     }
 
     // Background Color
@@ -155,10 +155,9 @@ export const Radio = forwardRef<View, RadioProps>(function Radio({
         backgroundColor,
         justifyContent: 'center',
         alignItems: 'center',
-        // Web shadow (ring)
-        ...(Platform.OS === 'web' && shadowSize > 0 ? {
-            boxShadow: `0px 0px 0px ${shadowSize}px ${shadowColor}`,
-        } : {}),
+        // Focus/selected glow ring. Rendered via the unified boxShadow helper
+        // so it works on web + RN 0.76+ and degrades gracefully on older RN.
+        ...(shadowSize > 0 ? boxShadow(`0px 0px 0px ${shadowSize}px ${shadowColor}`) : {}),
     }
 
     const selectorStyle: ViewStyle = {

package/src/components/RechargeCard/RechargeCard.tsx

@@ -83,47 +83,47 @@ export default function RechargeCard({
     style,
 }: RechargeCardProps) {
     // Container Tokens (defaults mirror Figma node 2235:937).
-    const backgroundColor = getVariableByName('rechargeCard/background', modes) || '#ffffff';
-    const paddingHorizontal = parseInt(getVariableByName('rechargeCard/padding/horizontal', modes) || 16, 10);
-    const paddingVertical = parseInt(getVariableByName('rechargeCard/padding/vertical', modes) || 20, 10);
-    const gap = parseInt(getVariableByName('rechargeCard/gap', modes) || 20, 10);
-    const radius = parseInt(getVariableByName('rechargeCard/radius', modes) || 20, 10);
-    const minWidth = parseInt(getVariableByName('rechargeCard/minWidth', modes) || 312, 10);
-    const strokeWidth = parseInt(getVariableByName('rechargeCard/strokeWidth', modes) || 1, 10);
-    const strokeColor = getVariableByName('rechargeCard/stroke/color', modes) || '#ebebed';
+    const backgroundColor = getVariableByName('rechargeCard/background', modes);
+    const paddingHorizontal = parseInt(getVariableByName('rechargeCard/padding/horizontal', modes), 10);
+    const paddingVertical = parseInt(getVariableByName('rechargeCard/padding/vertical', modes), 10);
+    const gap = parseInt(getVariableByName('rechargeCard/gap', modes), 10);
+    const radius = parseInt(getVariableByName('rechargeCard/radius', modes), 10);
+    const minWidth = parseInt(getVariableByName('rechargeCard/minWidth', modes), 10);
+    const strokeWidth = parseInt(getVariableByName('rechargeCard/strokeWidth', modes), 10);
+    const strokeColor = getVariableByName('rechargeCard/stroke/color', modes);
 
     // Header Tokens
-    const headerGap = parseInt(getVariableByName('rechargeCard/header/gap', modes) || 4, 10);
-    const titleColor = getVariableByName('rechargeCard/title/color', modes) || '#000000';
-    const titleFontSize = parseInt(getVariableByName('rechargeCard/title/fontSize', modes) || 12, 10);
-    const titleFontFamily = getVariableByName('rechargeCard/title/fontFamily', modes) || 'JioType Var';
-    const titleLineHeight = parseInt(getVariableByName('rechargeCard/title/lineHeight', modes) || 14, 10);
-    const titleFontWeight = getVariableByName('rechargeCard/title/fontWeight', modes) || '700';
+    const headerGap = parseInt(getVariableByName('rechargeCard/header/gap', modes), 10);
+    const titleColor = getVariableByName('rechargeCard/title/color', modes);
+    const titleFontSize = parseInt(getVariableByName('rechargeCard/title/fontSize', modes), 10);
+    const titleFontFamily = getVariableByName('rechargeCard/title/fontFamily', modes);
+    const titleLineHeight = parseInt(getVariableByName('rechargeCard/title/lineHeight', modes), 10);
+    const titleFontWeight = getVariableByName('rechargeCard/title/fontWeight', modes);
 
     // Specs Tokens
-    const specsGap = parseInt(getVariableByName('rechargeCard/specs/gap', modes) || 0, 10);
-    const specItemGap = parseInt(getVariableByName('rechargeCard/specItem/gap', modes) || 4, 10);
+    const specsGap = parseInt(getVariableByName('rechargeCard/specs/gap', modes), 10);
+    const specItemGap = parseInt(getVariableByName('rechargeCard/specItem/gap', modes), 10);
 
     // Spec Label Tokens
-    const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes) || '#000000';
-    const specLabelFontSize = parseInt(getVariableByName('rechargeCard/specItem/label/fontSize', modes) || 12, 10);
-    const specLabelFontFamily = getVariableByName('rechargeCard/specItem/label/fontFamily', modes) || 'JioType Var';
-    const specLabelLineHeight = parseInt(getVariableByName('rechargeCard/specItem/label/lineHeight', modes) || 14, 10);
-    const specLabelFontWeight = getVariableByName('rechargeCard/specItem/label/fontWeight', modes) || '500';
+    const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes);
+    const specLabelFontSize = parseInt(getVariableByName('rechargeCard/specItem/label/fontSize', modes), 10);
+    const specLabelFontFamily = getVariableByName('rechargeCard/specItem/label/fontFamily', modes);
+    const specLabelLineHeight = parseInt(getVariableByName('rechargeCard/specItem/label/lineHeight', modes), 10);
+    const specLabelFontWeight = getVariableByName('rechargeCard/specItem/label/fontWeight', modes);
 
     // Spec Value Tokens
-    const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes) || '#000000';
-    const specValueFontSize = parseInt(getVariableByName('rechargeCard/specItem/value/fontSize', modes) || 14, 10);
-    const specValueFontFamily = getVariableByName('rechargeCard/specItem/value/fontFamily', modes) || 'JioType Var';
-    const specValueLineHeight = parseInt(getVariableByName('rechargeCard/specItem/value/lineHeight', modes) || 17, 10);
-    const specValueFontWeight = getVariableByName('rechargeCard/specItem/value/fontWeight', modes) || '500';
+    const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes);
+    const specValueFontSize = parseInt(getVariableByName('rechargeCard/specItem/value/fontSize', modes), 10);
+    const specValueFontFamily = getVariableByName('rechargeCard/specItem/value/fontFamily', modes);
+    const specValueLineHeight = parseInt(getVariableByName('rechargeCard/specItem/value/lineHeight', modes), 10);
+    const specValueFontWeight = getVariableByName('rechargeCard/specItem/value/fontWeight', modes);
 
     // Disclaimer Tokens
-    const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes) || '#000000';
-    const disclaimerFontSize = parseInt(getVariableByName('rechargeCard/disclaimer/fontSize', modes) || 10, 10);
-    const disclaimerFontFamily = getVariableByName('rechargeCard/disclaimer/fontFamily', modes) || 'JioType Var';
-    const disclaimerLineHeight = parseInt(getVariableByName('rechargeCard/disclaimer/lineHeight', modes) || 13, 10);
-    const disclaimerFontWeight = getVariableByName('rechargeCard/disclaimer/fontWeight', modes) || '400';
+    const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes);
+    const disclaimerFontSize = parseInt(getVariableByName('rechargeCard/disclaimer/fontSize', modes), 10);
+    const disclaimerFontFamily = getVariableByName('rechargeCard/disclaimer/fontFamily', modes);
+    const disclaimerLineHeight = parseInt(getVariableByName('rechargeCard/disclaimer/lineHeight', modes), 10);
+    const disclaimerFontWeight = getVariableByName('rechargeCard/disclaimer/fontWeight', modes);
 
     const resolveFontWeight = (weight: string | number) => typeof weight === 'number' ? weight.toString() : weight;
 

package/src/components/SavingsGoalSummary/SavingsGoalSummary.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react'
 import {
     View,
+    Text,
     type StyleProp,
     type ViewStyle,
     type TextStyle,
@@ -8,7 +9,6 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import { formatIndianNumber } from '../../utils/number-utils'
-import Title from '../Title/Title'
 import LinearProgress from '../LinearProgress/LinearProgress'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
 import type { Modes } from '../../design-tokens'
@@ -40,6 +40,14 @@ export type SavingsGoalSummaryItem = {
 }
 
 export type SavingsGoalSummaryProps = {
+    /**
+     * Optional caption rendered directly above the percentage value
+     * (e.g. `"Credit usage"`), matching the Figma `savingsGoalSummary/label`
+     * slot. Pass a string for token-styled text, or any `ReactNode` for full
+     * control. Omit (the default) to hide it — preserving the original
+     * value-only layout for existing callers.
+     */
+    label?: React.ReactNode
     /**
      * Currency symbol (e.g. `'₹'`, `'$'`) prefixed to every legend value.
      * Defaults to `'₹'`. The symbol is rendered as part of the formatted
@@ -82,6 +90,8 @@ export type SavingsGoalSummaryProps = {
      * computed from `current` / `target` and cannot be replaced.
      */
     titleStyle?: StyleProp<TextStyle>
+    /** Override styles for the `label` caption text (string labels only). */
+    labelStyle?: StyleProp<TextStyle>
     /** Override the inner legend container styles. */
     legendStyle?: StyleProp<ViewStyle>
 }
@@ -122,6 +132,7 @@ const DEFAULT_TARGET: SavingsGoalSummaryItem = {
  * @param {SavingsGoalSummaryProps} props
  */
 function SavingsGoalSummary({
+    label,
     currency = '₹',
     current = DEFAULT_CURRENT,
     target = DEFAULT_TARGET,
@@ -129,6 +140,7 @@ function SavingsGoalSummary({
     modes = EMPTY_MODES,
     style,
     titleStyle,
+    labelStyle,
     legendStyle,
 }: SavingsGoalSummaryProps) {
     // Merge caller modes on top of the defaults so callers can override
@@ -182,6 +194,66 @@ function SavingsGoalSummary({
     const legendGap =
         (getVariableByName('savingsGoalSummary/legend/gap', mergedModes) as number | null) ?? 16
 
+    // Percentage value typography — driven by the dedicated
+    // `savingsGoalSummary/value/*` tokens (Figma 29 / 900) rather than the
+    // generic `Title` tokens, so the value matches the design exactly.
+    const valueFontSize =
+        (getVariableByName('savingsGoalSummary/value/fontSize', mergedModes) as number | null) ?? 29
+    const valueFontFamily =
+        (getVariableByName('savingsGoalSummary/value/fontFamily', mergedModes) as string | null) ??
+        'JioType Var'
+    const valueRawLineHeight =
+        (getVariableByName('savingsGoalSummary/value/lineHeight', mergedModes) as number | null) ?? 29
+    // The value tokens ship with `lineHeight === fontSize` (29/29); clamp to
+    // ~1.2x so descenders never clip on native (same guard `Title` uses).
+    const valueLineHeight = Math.max(valueRawLineHeight, Math.ceil(valueFontSize * 1.2))
+    const valueFontWeight = String(
+        getVariableByName('savingsGoalSummary/value/fontWeight', mergedModes) ?? 900,
+    ) as TextStyle['fontWeight']
+    const valueColor =
+        (getVariableByName('savingsGoalSummary/value/color', mergedModes) as string | null) ??
+        '#0d0d0f'
+
+    // Caption ("Credit usage") typography — `savingsGoalSummary/label/*`
+    // (Figma 12 / 400). Only rendered when a `label` is supplied.
+    const labelFontSize =
+        (getVariableByName('savingsGoalSummary/label/fontSize', mergedModes) as number | null) ?? 12
+    const labelFontFamily =
+        (getVariableByName('savingsGoalSummary/label/fontFamily', mergedModes) as string | null) ??
+        'JioType Var'
+    const labelLineHeight =
+        (getVariableByName('savingsGoalSummary/label/lineHeight', mergedModes) as number | null) ?? 16
+    const labelFontWeight = String(
+        getVariableByName('savingsGoalSummary/label/fontWeight', mergedModes) ?? 400,
+    ) as TextStyle['fontWeight']
+    const labelColor =
+        (getVariableByName('savingsGoalSummary/label/color', mergedModes) as string | null) ??
+        '#0d0d0f'
+
+    const labelNode =
+        label == null || label === false ? null : typeof label === 'string' ? (
+            <Text
+                style={[
+                    {
+                        color: labelColor,
+                        fontFamily: labelFontFamily,
+                        fontSize: labelFontSize,
+                        lineHeight: labelLineHeight,
+                        fontWeight: labelFontWeight,
+                        width: '100%',
+                    },
+                    labelStyle,
+                ]}
+            >
+                {label}
+            </Text>
+        ) : (
+            (() => {
+                const processed = cloneChildrenWithModes(label, mergedModes)
+                return processed.length === 1 ? processed[0] : processed
+            })()
+        )
+
     const customLegend = children
         ? cloneChildrenWithModes(children, mergedModes)
         : null
@@ -220,14 +292,32 @@ function SavingsGoalSummary({
                 },
                 style,
             ]}
-            accessibilityLabel={`Savings goal progress, ${percentageLabel}`}
+            accessibilityLabel={
+                typeof label === 'string'
+                    ? `${label}, ${percentageLabel}`
+                    : `Savings goal progress, ${percentageLabel}`
+            }
         >
-            <Title
-                title={percentageLabel}
-                modes={mergedModes}
-                style={TITLE_CONTAINER_STYLE}
-                textStyle={titleStyle}
-            />
+            <View style={HEADER_GROUP_STYLE}>
+                {labelNode}
+                <Text
+                    style={[
+                        {
+                            color: valueColor,
+                            fontFamily: valueFontFamily,
+                            fontSize: valueFontSize,
+                            lineHeight: valueLineHeight,
+                            fontWeight: valueFontWeight,
+                            width: '100%',
+                        },
+                        titleStyle,
+                    ]}
+                    accessibilityElementsHidden={true}
+                    importantForAccessibility="no"
+                >
+                    {percentageLabel}
+                </Text>
+            </View>
 
             <LinearProgress value={resolvedProgress} modes={mergedModes} />
 
@@ -260,11 +350,13 @@ function formatLegendValue(value: number | undefined, currency: string): string
     return formatIndianNumber(value, { prefix: currency })
 }
 
-// Neutralise the `Title` component's default page-level padding so it sits
-// flush inside the summary card (the parent container owns spacing via `gap`).
-const TITLE_CONTAINER_STYLE: ViewStyle = {
-    paddingHorizontal: 0,
-    paddingVertical: 0,
+// Groups the optional caption ("Credit usage") tightly above the percentage
+// value. The parent container owns the larger spacing to the bar via `gap`,
+// so this only needs the small label→value gap.
+const HEADER_GROUP_STYLE: ViewStyle = {
+    width: '100%',
+    gap: 2,
+    alignItems: 'flex-start',
 }
 
 export default SavingsGoalSummary

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,200 @@
+import React, { forwardRef } from 'react'
+import {
+  ScrollView,
+  type ScrollViewProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * Axis (or axes) along which the content can be scrolled.
+ *
+ * - `vertical` (default) — content taller than the viewport scrolls up/down.
+ * - `horizontal` — content wider than the viewport scrolls left/right.
+ * - `both` — content larger on either axis scrolls in both directions
+ *   (implemented as a horizontal `ScrollView` nested in a vertical one).
+ */
+export type ScrollDirection = 'vertical' | 'horizontal' | 'both'
+
+export interface ScrollAreaProps
+  extends Omit<
+    ScrollViewProps,
+    'horizontal' | 'contentContainerStyle' | 'children'
+  > {
+  /** Content that may be larger than the viewport. */
+  children?: React.ReactNode
+  /**
+   * Scroll axis. Defaults to `vertical`.
+   * @default 'vertical'
+   */
+  direction?: ScrollDirection
+  /**
+   * Whether to show the native scroll indicator (scrollbar). Mirrors the Figma
+   * design, which has no visible scrollbar, so this defaults to `false`.
+   * @default false
+   */
+  showScrollIndicator?: boolean
+  /**
+   * Padding applied to all sides of the scrollable content. Individual sides
+   * (`paddingHorizontal`, `paddingTop`, …) take precedence when provided.
+   * @default 0
+   */
+  padding?: number
+  /** Left + right padding of the scrollable content. */
+  paddingHorizontal?: number
+  /** Top + bottom padding of the scrollable content. */
+  paddingVertical?: number
+  /** Top padding of the scrollable content. */
+  paddingTop?: number
+  /** Right padding of the scrollable content. */
+  paddingRight?: number
+  /** Bottom padding of the scrollable content. */
+  paddingBottom?: number
+  /** Left padding of the scrollable content. */
+  paddingLeft?: number
+  /**
+   * Style for the viewport (the visible, clipping window). Constrain the
+   * scroll area's size here, e.g. `{ height: 240 }` or `{ flex: 1 }`. The
+   * component intentionally has no background of its own.
+   */
+  style?: StyleProp<ViewStyle>
+  /** Style for the scrollable content wrapper (sits inside the viewport). */
+  contentContainerStyle?: StyleProp<ViewStyle>
+  /** Modes object for design-token resolution, cascaded to all children. */
+  modes?: Modes
+}
+
+/**
+ * Build a padding style fragment, letting the more specific props win over the
+ * broader ones (`paddingTop` > `paddingVertical` > `padding`). Only defined
+ * values are emitted so consumer `contentContainerStyle` overrides survive.
+ */
+function resolvePadding({
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft,
+}: Pick<
+  ScrollAreaProps,
+  | 'padding'
+  | 'paddingHorizontal'
+  | 'paddingVertical'
+  | 'paddingTop'
+  | 'paddingRight'
+  | 'paddingBottom'
+  | 'paddingLeft'
+>): ViewStyle {
+  const top = paddingTop ?? paddingVertical ?? padding
+  const right = paddingRight ?? paddingHorizontal ?? padding
+  const bottom = paddingBottom ?? paddingVertical ?? padding
+  const left = paddingLeft ?? paddingHorizontal ?? padding
+
+  const style: ViewStyle = {}
+  if (top != null) style.paddingTop = top
+  if (right != null) style.paddingRight = right
+  if (bottom != null) style.paddingBottom = bottom
+  if (left != null) style.paddingLeft = left
+  return style
+}
+
+/**
+ * ScrollArea — a transparent, size-constrained viewport that makes content
+ * larger than itself smoothly scrollable (Figma node 6319:46886).
+ *
+ * It has no background of its own; constrain its size through `style`
+ * (`height`, `maxHeight`, or `flex`) and drop any over-sized content inside.
+ *
+ * @example
+ * // Vertical (default): a tall column inside a fixed-height window.
+ * <ScrollArea style={{ height: 240 }}>
+ *   <LongContent />
+ * </ScrollArea>
+ *
+ * @example
+ * // Horizontal: a wide row of cards inside a full-width window.
+ * <ScrollArea direction="horizontal">
+ *   <Card /> <Card /> <Card />
+ * </ScrollArea>
+ */
+export const ScrollArea = forwardRef<ScrollView, ScrollAreaProps>(
+  function ScrollArea(
+    {
+      children,
+      direction = 'vertical',
+      showScrollIndicator = false,
+      padding,
+      paddingHorizontal,
+      paddingVertical,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft,
+      style,
+      contentContainerStyle,
+      modes = EMPTY_MODES,
+      scrollEventThrottle = 16,
+      ...rest
+    },
+    ref,
+  ) {
+    const paddingStyle = resolvePadding({
+      padding,
+      paddingHorizontal,
+      paddingVertical,
+      paddingTop,
+      paddingRight,
+      paddingBottom,
+      paddingLeft,
+    })
+
+    // Cascade modes into every child so slotted tokens resolve correctly.
+    const content = cloneChildrenWithModes(children, modes)
+
+    if (direction === 'both') {
+      // Outer vertical scroll, inner horizontal scroll. Padding lives on the
+      // inner content container so it scrolls with the content on both axes.
+      return (
+        <ScrollView
+          ref={ref}
+          style={style}
+          showsVerticalScrollIndicator={showScrollIndicator}
+          scrollEventThrottle={scrollEventThrottle}
+          {...rest}
+        >
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={showScrollIndicator}
+            scrollEventThrottle={scrollEventThrottle}
+            contentContainerStyle={[paddingStyle, contentContainerStyle]}
+          >
+            {content}
+          </ScrollView>
+        </ScrollView>
+      )
+    }
+
+    const isHorizontal = direction === 'horizontal'
+
+    return (
+      <ScrollView
+        ref={ref}
+        horizontal={isHorizontal}
+        style={style}
+        showsVerticalScrollIndicator={isHorizontal ? undefined : showScrollIndicator}
+        showsHorizontalScrollIndicator={isHorizontal ? showScrollIndicator : undefined}
+        scrollEventThrottle={scrollEventThrottle}
+        contentContainerStyle={[paddingStyle, contentContainerStyle]}
+        {...rest}
+      >
+        {content}
+      </ScrollView>
+    )
+  },
+)
+
+export default ScrollArea

package/src/components/Section/Section.tsx

@@ -14,7 +14,7 @@ import NavArrow from '../NavArrow/NavArrow'
 import IconCapsule from '../IconCapsule/IconCapsule'
 import ListItem from '../ListItem/ListItem'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
-import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 // Match Button: delay the press visual on iOS so a scroll-cancelled touch
@@ -366,6 +366,12 @@ type SectionProps = {
    * Web-specific accessibility props (only used on web platform)
    */
   webAccessibilityProps?: WebAccessibilityProps;
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean;
 } & React.ComponentProps<typeof View>;
 
 /**
@@ -402,32 +408,32 @@ interface SectionTokens {
 }
 
 function resolveSectionTokens(modes: Modes): SectionTokens {
-  const backgroundColor = getVariableByName('section/background/color', modes) || '#ffffff'
-  const sectionGap = (getVariableByName('section/gap', modes) || 12) as number
-  const slotGap = (getVariableByName('slot/gap', modes) || 12) as number
-  const paddingHorizontal = getVariableByName('section/padding/horizontal', modes) || 12
-  const paddingVertical = getVariableByName('section/padding/vertical', modes) || 16
-  const radius = getVariableByName('section/radius', modes) || 12
-
-  const headerGap = getVariableByName('section/header/gap', modes) || 8
-  const headerPaddingHorizontal = getVariableByName('section/header/padding/horizontal', modes) || 0
-  const headerPaddingVertical = getVariableByName('section/header/padding/vertical', modes) || 0
-
-  const titleColor = getVariableByName('section/title/color', modes) || '#0f0d0a'
-  const titleFontSize = getVariableByName('section/title/fontSize', modes) || 18
-  const titleLineHeight = getVariableByName('section/title/lineHeight', modes) || 20
-  const titleFontFamily = getVariableByName('section/title/fontFamily', modes) || 'System'
-  const titleFontWeightRaw = getVariableByName('section/title/fontWeight', modes) || 800
+  const backgroundColor = getVariableByName('section/background/color', modes)
+  const sectionGap = (getVariableByName('section/gap', modes)) as number
+  const slotGap = (getVariableByName('slot/gap', modes)) as number
+  const paddingHorizontal = getVariableByName('section/padding/horizontal', modes)
+  const paddingVertical = getVariableByName('section/padding/vertical', modes)
+  const radius = getVariableByName('section/radius', modes)
+
+  const headerGap = getVariableByName('section/header/gap', modes)
+  const headerPaddingHorizontal = getVariableByName('section/header/padding/horizontal', modes)
+  const headerPaddingVertical = getVariableByName('section/header/padding/vertical', modes)
+
+  const titleColor = getVariableByName('section/title/color', modes)
+  const titleFontSize = getVariableByName('section/title/fontSize', modes)
+  const titleLineHeight = getVariableByName('section/title/lineHeight', modes)
+  const titleFontFamily = getVariableByName('section/title/fontFamily', modes)
+  const titleFontWeightRaw = getVariableByName('section/title/fontWeight', modes)
   const titleFontWeight =
     typeof titleFontWeightRaw === 'number'
       ? titleFontWeightRaw.toString()
       : titleFontWeightRaw
 
-  const supportTextColor = getVariableByName('section/supportText/color', modes) || '#1f1a14'
-  const supportTextFontSize = getVariableByName('section/supportText/fontSize', modes) || 14
-  const supportTextLineHeight = getVariableByName('section/supportText/lineHeight', modes) || 18
-  const supportTextFontFamily = getVariableByName('section/supportText/fontFamily', modes) || 'System'
-  const supportTextFontWeightRaw = getVariableByName('section/supportText/fontWeight', modes) || 500
+  const supportTextColor = getVariableByName('section/supportText/color', modes)
+  const supportTextFontSize = getVariableByName('section/supportText/fontSize', modes)
+  const supportTextLineHeight = getVariableByName('section/supportText/lineHeight', modes)
+  const supportTextFontFamily = getVariableByName('section/supportText/fontFamily', modes)
+  const supportTextFontWeightRaw = getVariableByName('section/supportText/fontWeight', modes)
   const supportTextFontWeight =
     typeof supportTextFontWeightRaw === 'number'
       ? supportTextFontWeightRaw.toString()
@@ -483,6 +489,7 @@ function Section({
   accessibilityLabel: _accessibilityLabel,
   accessibilityHint,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }: SectionProps) {
   // Focus and hover are still mirrored in React because they are visible,
@@ -527,7 +534,7 @@ function Section({
       <View style={headerWrapStyle}>
         <Text
           style={tokens.titleStyle}
-          numberOfLines={1}
+          {...resolveTruncation(disableTruncation, 1)}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
         >
@@ -540,7 +547,7 @@ function Section({
       {showSupportText && (
         <Text
           style={tokens.supportTextStyle}
-          numberOfLines={2}
+          {...resolveTruncation(disableTruncation, 2)}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
         >
@@ -758,11 +765,11 @@ function SectionBento({
   renderToggle,
   ...rest
 }: SectionBentoProps) {
-  const backgroundColor = getVariableByName('section/background/color', modes) || '#ffffff'
-  const gap = getVariableByName('section/gap', modes) || 12
-  const paddingHorizontal = getVariableByName('section/padding/horizontal', modes) || 12
-  const paddingVertical = getVariableByName('section/padding/vertical', modes) || 16
-  const radius = getVariableByName('section/radius', modes) || 12
+  const backgroundColor = getVariableByName('section/background/color', modes)
+  const gap = getVariableByName('section/gap', modes)
+  const paddingHorizontal = getVariableByName('section/padding/horizontal', modes)
+  const paddingVertical = getVariableByName('section/padding/vertical', modes)
+  const radius = getVariableByName('section/radius', modes)
 
   const containerStyle = useMemo<ViewStyle>(
     () => ({