jfs-components 0.1.25 → 0.1.28

package/lib/typescript/src/design-tokens/figma-modes.generated.d.ts

@@ -20,6 +20,7 @@ export declare const FIGMA_MODES: {
     readonly AppearanceBrand: readonly ["Primary", "Secondary", "Neutral", "Tertiary"];
     readonly AppearanceSystem: readonly ["positive", "warning", "negative"];
     readonly "Attached / Output": readonly ["Default"];
+    readonly "Autoplay Control": readonly ["Default"];
     readonly "Avatar / Output": readonly ["Default"];
     readonly "Avatar Group / Output": readonly ["Default"];
     readonly "Avatar Size": readonly ["L", "M", "S", "XS"];
@@ -44,6 +45,7 @@ export declare const FIGMA_MODES: {
     readonly "Calendar Glyph / Output": readonly ["Default"];
     readonly "Calendar Glyph State": readonly ["Idle", "notSaved", "saved"];
     readonly "Card / Output": readonly ["Default"];
+    readonly "Card Apperance": readonly ["Default", "Plain"];
     readonly "Card Feedback / Output": readonly ["Default"];
     readonly "Card.Media": readonly ["Default"];
     readonly "Card/CTA / Output": readonly ["Default"];
@@ -52,6 +54,7 @@ export declare const FIGMA_MODES: {
     readonly "CardAdvisory / Output": readonly ["Default"];
     readonly cardsShared: readonly ["Default"];
     readonly "Carousel / Output": readonly ["Default"];
+    readonly "Carousel Control Gap": readonly ["Default"];
     readonly "CarouselCardAccounts / Output": readonly ["Default"];
     readonly "ccCard / Output": readonly ["Default"];
     readonly "checkbox / Output": readonly ["Default"];
@@ -78,7 +81,7 @@ export declare const FIGMA_MODES: {
     readonly "contentInset/Right": readonly ["Default", "S", "M", "L"];
     readonly "ContentSheet / Output": readonly ["Default"];
     readonly Context: readonly ["Default", "Nudge&Alert", "CTACard", "ListItem"];
-    readonly "context 10": readonly ["Default", "Profile card"];
+    readonly "context 10": readonly ["Default", "jioPlus"];
     readonly "context 8": readonly ["Default", "Section"];
     readonly "context 9": readonly ["Default", "Stack"];
     readonly Context2: readonly ["Default", "AppBar"];
@@ -87,6 +90,7 @@ export declare const FIGMA_MODES: {
     readonly context5: readonly ["Default", "Fullscreen Modal"];
     readonly context7: readonly ["Default", "Card", "Page Hero"];
     readonly "Contrast Context": readonly ["on dark", "on light"];
+    readonly "Control Toggle ": readonly ["Default"];
     readonly "Conversation Feed / Output": readonly ["Default"];
     readonly "Counter Badge / Output": readonly ["Default"];
     readonly "Coverage Bar Comparison / Output": readonly ["Default"];
@@ -118,7 +122,7 @@ export declare const FIGMA_MODES: {
     readonly Gap: readonly ["S", "M", "L", "None"];
     readonly "Gauge / Output": readonly ["Default"];
     readonly "Grid / Output": readonly ["Default"];
-    readonly "Handle Boolean": readonly ["False", "True"];
+    readonly "Handle Boolean": readonly ["True", "False"];
     readonly "Heading / Output": readonly ["Default"];
     readonly "Heading text": readonly ["Default", "Slot"];
     readonly "HeroSection / Output": readonly ["Default"];
@@ -139,7 +143,7 @@ export declare const FIGMA_MODES: {
     readonly "lazyList / Output": readonly ["Default"];
     readonly "LinearMeter / Output": readonly ["Default"];
     readonly "LinearProgress / Output": readonly ["Default"];
-    readonly "LinearProgress Size": readonly ["M", "L"];
+    readonly "LinearProgress Size": readonly ["S", "M", "L"];
     readonly "Link / Output": readonly ["Default"];
     readonly "Link Apperances": readonly ["Neutral", "Primary", "Secondary", "Tertiary"];
     readonly "List Item / Output": readonly ["Default"];
@@ -160,10 +164,10 @@ export declare const FIGMA_MODES: {
     readonly NavArrow: readonly ["Default"];
     readonly "NavArrow / Output": readonly ["Default"];
     readonly "NavArrow Direction": readonly ["Left&Right", "Top&Bottom"];
-    readonly "New Collection": readonly ["Default"];
     readonly "NoteInput / Output": readonly ["Default"];
     readonly "Nudge / Output": readonly ["Default"];
     readonly "Nudge padding": readonly ["Default", "None"];
+    readonly "number pagination": readonly ["Default"];
     readonly "Numpad / Output": readonly ["Default"];
     readonly "OTP / Output": readonly ["Mode 1"];
     readonly "Overlay / Output": readonly ["Mode 1"];
@@ -182,6 +186,7 @@ export declare const FIGMA_MODES: {
     readonly "Product Merchandising card": readonly ["Default"];
     readonly "ProductLabel / Output": readonly ["Default"];
     readonly "ProductOverview / Output": readonly ["Default"];
+    readonly "Profile Card / Output": readonly ["Default"];
     readonly "Profile Card Appearance": readonly ["Default", "Premium"];
     readonly "ProgressBadge / Output": readonly ["Default"];
     readonly ProjectionMarker: readonly ["Default"];
@@ -253,6 +258,7 @@ export declare const FIGMA_MODES: {
     readonly "TransactionBubble / Output": readonly ["Default"];
     readonly "TransationDetails / Output": readonly ["Default"];
     readonly "UPI Handle / Output": readonly ["Default"];
+    readonly "UPI Handle Image": readonly ["True", "False"];
     readonly "ValueBar / Output": readonly ["Default"];
     readonly "Video / Output": readonly ["L", "M", "S"];
     readonly "VStack / Output": readonly ["Default"];

package/lib/typescript/src/icons/components/IconBrokenimage.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconBrokenimage: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconBrokenimage.d.ts.map

package/lib/typescript/src/icons/components/IconImage.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconImage: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconImage.d.ts.map

package/lib/typescript/src/icons/components/IconMic.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconMic: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconMic.d.ts.map

package/lib/typescript/src/icons/components/IconMicoff.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconMicoff: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconMicoff.d.ts.map

package/lib/typescript/src/icons/components/IconPause.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconPause: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconPause.d.ts.map

package/lib/typescript/src/icons/components/IconPlay.d.ts

@@ -0,0 +1,3 @@
+import { SvgProps } from 'react-native-svg';
+export declare const IconPlay: (props: SvgProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconPlay.d.ts.map

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

@@ -170,6 +170,7 @@ export * from './IconBrightnessdisplay';
 export * from './IconBrightnessfull';
 export * from './IconBrightnesshalf';
 export * from './IconBroadcast';
+export * from './IconBrokenimage';
 export * from './IconBroom';
 export * from './IconBrush';
 export * from './IconBuffer';
@@ -626,6 +627,7 @@ export * from './IconIce';
 export * from './IconIceskating';
 export * from './IconId';
 export * from './IconIdcheck';
+export * from './IconImage';
 export * from './IconImagemask';
 export * from './IconImport';
 export * from './IconIncognito';
@@ -724,7 +726,9 @@ export * from './IconMerge';
 export * from './IconMergeoff';
 export * from './IconMesh';
 export * from './IconMessagesend';
+export * from './IconMic';
 export * from './IconMicmuteforced';
+export * from './IconMicoff';
 export * from './IconMicroscope';
 export * from './IconMilk';
 export * from './IconMilklow';
@@ -846,6 +850,7 @@ export * from './IconPasses';
 export * from './IconPaste';
 export * from './IconPastedocument';
 export * from './IconPatient';
+export * from './IconPause';
 export * from './IconPausecircle';
 export * from './IconPaybill';
 export * from './IconPayemiinstall';
@@ -887,6 +892,7 @@ export * from './IconPlank';
 export * from './IconPlans';
 export * from './IconPlantgrowth';
 export * from './IconPlanting';
+export * from './IconPlay';
 export * from './IconPlaycircle';
 export * from './IconPlaypause';
 export * from './IconPlaybox';

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-07-03T01:43:10.333Z
+ * Generated: 2026-07-07T17:35:34.036Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/AutoplayControl/AutoplayControl.tsx

@@ -0,0 +1,77 @@
+import React, { useMemo } from 'react'
+import {
+  Pressable,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Icon from '../../icons/Icon'
+import type { Modes } from '../../design-tokens'
+
+export type AutoplayControlProps = {
+  state?: 'pause' | 'play';
+  modes?: Modes;
+  onPress?: () => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+interface AutoplayControlTokens {
+  containerStyle: ViewStyle;
+  iconColor: string;
+}
+
+function resolveAutoplayControlTokens(modes: Modes, disabled: boolean): AutoplayControlTokens {
+  const width = (getVariableByName('autoplayControl/width', modes) ?? 36) as number
+  const height = (getVariableByName('autoplayControl/height', modes) ?? 36) as number
+  const radiusRaw = (getVariableByName('autoplayControl/radius', modes) ?? 9999) as number
+  const backgroundColor = (getVariableByName('autoplayControl/background/color', modes) ?? '#ffffff') as string
+  const iconColor = (getVariableByName('autoplayControl/icon/color', modes) ?? '#000000') as string
+
+  const borderRadius = radiusRaw === 9999 ? width / 2 : radiusRaw
+
+  return {
+    containerStyle: {
+      width,
+      height,
+      borderRadius,
+      backgroundColor,
+      alignItems: 'center',
+      justifyContent: 'center',
+      opacity: disabled ? 0.5 : 1,
+    },
+    iconColor,
+  }
+}
+
+/**
+ * AutoplayControl is a button component that toggles between play and pause states.
+ * All styling values are resolved from Figma design tokens.
+ */
+export default function AutoplayControl({
+  state = 'pause',
+  modes,
+  onPress,
+  disabled = false,
+  style,
+}: AutoplayControlProps) {
+  const tokens = useMemo(() => resolveAutoplayControlTokens(modes ?? {}, disabled), [modes, disabled])
+
+  const iconName = state === 'play' ? 'ic_play' : 'ic_pause'
+
+  return (
+    <Pressable
+      onPress={disabled ? undefined : onPress}
+      disabled={disabled}
+      style={({ pressed }) => [
+        tokens.containerStyle,
+        pressed && { opacity: 0.7 },
+        style,
+      ]}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+    >
+      <Icon name={iconName} size={24} color={tokens.iconColor} />
+    </Pressable>
+  )
+}

package/src/components/Carousel/Carousel.tsx

@@ -21,6 +21,8 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
+import AutoplayControl from '../AutoplayControl/AutoplayControl'
+import NumberPagination from '../NumberPagination/NumberPagination'
 
 // ---------------------------------------------------------------------------
 // Context
@@ -75,6 +77,13 @@ export interface CarouselProps {
   paddingHorizontal?: number
   /** Explicit vertical padding (px) for the outer container. Overrides `carousel/padding/vertical`. */
   paddingVertical?: number
+  /**
+   * Carousel visual type.
+   * - `'Default'` — standard carousel with dot pagination below.
+   * - `'Numbered'` — full-bleed carousel with floating AutoplayControl and
+   *   NumberPagination overlaid at the bottom center.
+   */
+  type?: 'Default' | 'Numbered'
 
   /** Called when the active index changes. */
   onIndexChange?: (index: number) => void
@@ -97,10 +106,12 @@ export function Carousel({
   itemWidth: itemWidthProp,
   paddingHorizontal: paddingHorizontalProp,
   paddingVertical: paddingVerticalProp,
+  type = 'Default',
 
   onIndexChange,
   style,
 }: CarouselProps) {
+  const isNumbered = type === 'Numbered'
   // ---- Token resolution ----
   const tokenGap = parseFloat(
     getVariableByName('carousel/gap', modes),
@@ -119,15 +130,32 @@ export function Carousel({
   const maxHeight = parseFloat(
     getVariableByName('carousel/maxHeight', modes),
   )
+  // Gap between AutoplayControl and NumberPagination in the Numbered overlay.
+  const controlGap = parseFloat(
+    getVariableByName('carouselControl/gap', modes),
+  )
+
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap
 
   // ---- Refs & state ----
   const scrollRef = useRef<ScrollView>(null)
   const [activeIndex, setActiveIndex] = useState(0)
+  const activeIndexRef = useRef(0)
   const [containerWidth, setContainerWidth] = useState(0)
   const autoPlayTimer = useRef<ReturnType<typeof setInterval> | null>(null)
   const userInteracting = useRef(false)
+  // Guard: suppress handleScroll index updates during programmatic scrollTo
+  // animations so intermediate offsets don't flicker activeIndex back.
+  const programmaticScroll = useRef(false)
+  const programmaticTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    activeIndexRef.current = activeIndex
+  }, [activeIndex])
+
+  // Interactive play/pause state for the Numbered variant.
+  const [isPlaying, setIsPlaying] = useState(autoPlay)
 
   // Flatten children so we can count items
   const items = useMemo(
@@ -137,13 +165,15 @@ export function Carousel({
 
   const totalItems = items.length
 
-  // Effective item width: provided prop, or full container width minus peek offsets
+  // Effective item width: provided prop, or full container width minus peek offsets.
+  // For the Numbered variant the items are full-bleed (no peek padding).
   const effectiveItemWidth = useMemo(() => {
     if (itemWidthProp != null) return itemWidthProp
     if (containerWidth === 0) return 0
+    if (isNumbered) return containerWidth
     // Full-width minus peekOffset on each side
     return containerWidth - containerPaddingH * 4
-  }, [itemWidthProp, containerWidth, containerPaddingH])
+  }, [itemWidthProp, containerWidth, containerPaddingH, isNumbered])
 
   // Snap interval = item width + gap
   const snapInterval = effectiveItemWidth + gap
@@ -158,6 +188,17 @@ export function Carousel({
       } else {
         targetIndex = Math.max(0, Math.min(index, totalItems - 1))
       }
+      // Lock out handleScroll during the animated scroll so intermediate
+      // offsets don't flicker activeIndex back to the old value.
+      if (animated) {
+        programmaticScroll.current = true
+        if (programmaticTimer.current != null) {
+          clearTimeout(programmaticTimer.current)
+        }
+        programmaticTimer.current = setTimeout(() => {
+          programmaticScroll.current = false
+        }, 500)
+      }
       scrollRef.current?.scrollTo({
         x: targetIndex * snapInterval,
         animated,
@@ -185,6 +226,9 @@ export function Carousel({
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       if (snapInterval === 0) return
+      // Skip index recalculation during programmatic scrollTo animations
+      // to prevent the active indicator from flickering back to the old page.
+      if (programmaticScroll.current) return
       const offsetX = event.nativeEvent.contentOffset.x
       const newIndex = Math.round(offsetX / snapInterval)
       const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1))
@@ -205,31 +249,28 @@ export function Carousel({
   }, [])
 
   const startAutoPlay = useCallback(() => {
-    if (!autoPlay || totalItems <= 1) return
+    if ((!autoPlay && !isPlaying) || totalItems <= 1) return
+    if (!isPlaying) return
     clearAutoPlay()
     autoPlayTimer.current = setInterval(() => {
       if (!userInteracting.current) {
-        setActiveIndex((prev) => {
-          const next = loop
-            ? (prev + 1) % totalItems
-            : Math.min(prev + 1, totalItems - 1)
-          scrollRef.current?.scrollTo({
-            x: next * snapInterval,
-            animated: true,
-          })
-          onIndexChange?.(next)
-          return next
-        })
+        const prev = activeIndexRef.current
+        const next = loop
+          ? (prev + 1) % totalItems
+          : Math.min(prev + 1, totalItems - 1)
+        // Route through scrollToIndex so the programmaticScroll guard
+        // suppresses intermediate handleScroll offsets during the animation.
+        scrollToIndex(next, true)
       }
     }, autoPlayInterval)
   }, [
     autoPlay,
+    isPlaying,
     totalItems,
     loop,
-    snapInterval,
     autoPlayInterval,
     clearAutoPlay,
-    onIndexChange,
+    scrollToIndex,
   ])
 
   useEffect(() => {
@@ -244,8 +285,27 @@ export function Carousel({
   const handleScrollEndDrag = useCallback(() => {
     userInteracting.current = false
     // Reset autoplay timer after interaction
-    if (autoPlay) startAutoPlay()
-  }, [autoPlay, startAutoPlay])
+    if (autoPlay || isPlaying) startAutoPlay()
+  }, [autoPlay, isPlaying, startAutoPlay])
+
+  const finishProgrammaticScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      programmaticScroll.current = false
+      if (programmaticTimer.current != null) {
+        clearTimeout(programmaticTimer.current)
+        programmaticTimer.current = null
+      }
+      if (snapInterval === 0) return
+      const offsetX = event.nativeEvent.contentOffset.x
+      const newIndex = Math.round(offsetX / snapInterval)
+      const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1))
+      if (clampedIndex !== activeIndexRef.current) {
+        setActiveIndex(clampedIndex)
+        onIndexChange?.(clampedIndex)
+      }
+    },
+    [snapInterval, totalItems, onIndexChange],
+  )
 
   // ---- Layout ----
   const handleLayout = useCallback((e: LayoutChangeEvent) => {
@@ -265,15 +325,37 @@ export function Carousel({
     [modes, activeIndex, totalItems, goTo, goNext, goPrev],
   )
 
+  // ---- Toggle handler for Numbered variant ----
+  const handleToggleAutoplay = useCallback(() => {
+    setIsPlaying((prev) => {
+      if (prev) {
+        // Pausing
+        clearAutoPlay()
+        return false
+      }
+      // Resuming — autoplay will restart via the effect
+      return true
+    })
+  }, [clearAutoPlay])
+
+  // Restart autoplay whenever isPlaying flips to true
+  useEffect(() => {
+    if (isPlaying) startAutoPlay()
+    else clearAutoPlay()
+  }, [isPlaying, startAutoPlay, clearAutoPlay])
+
   // ---- Render ----
   // Explicit padding props win verbatim; otherwise fall back to the
   // token-derived values (horizontal keeps its legacy ×2 "peek" multiplier).
-  const effectivePaddingH = paddingHorizontalProp ?? containerPaddingH 
-  const effectivePaddingV = paddingVerticalProp ?? containerPaddingV
+  // Numbered variant is full-bleed: zero padding.
+  const effectivePaddingH = isNumbered ? 0 : (paddingHorizontalProp ?? containerPaddingH)
+  const effectivePaddingV = isNumbered ? 0 : (paddingVerticalProp ?? containerPaddingV)
 
   const outerStyle: ViewStyle = {
     paddingVertical: effectivePaddingV,
-    maxHeight,
+    maxHeight: isNumbered ? undefined : maxHeight,
+    // Numbered needs relative positioning for the floating controls overlay.
+    ...(isNumbered ? { overflow: 'hidden' as const } : {}),
   }
 
   const contentContainerStyle: ViewStyle = {
@@ -299,7 +381,7 @@ export function Carousel({
           scrollEventThrottle={16}
           onScrollBeginDrag={handleScrollBeginDrag}
           onScrollEndDrag={handleScrollEndDrag}
-
+          onMomentumScrollEnd={finishProgrammaticScroll}
         >
           {items.map((child, index) => {
             // Strict slot box: width must be honored; never grow or shrink with
@@ -343,12 +425,40 @@ export function Carousel({
           })}
         </ScrollView>
 
-        {showPagination && totalItems > 1 && (
+        {!isNumbered && showPagination && totalItems > 1 && (
           <Pagination
             modes={modes}
             style={{ marginTop: paginationOffset }}
           />
         )}
+
+        {isNumbered && showPagination && totalItems > 1 && (
+          <View
+            style={{
+              position: 'absolute',
+              bottom: 12,
+              left: 0,
+              right: 0,
+              flexDirection: 'row',
+              justifyContent: 'center',
+              alignItems: 'center',
+              gap: controlGap,
+            }}
+            pointerEvents="box-none"
+          >
+            <AutoplayControl
+              state={isPlaying ? 'pause' : 'play'}
+              onPress={handleToggleAutoplay}
+              modes={modes}
+            />
+            <NumberPagination
+              activePage={activeIndex + 1}
+              totalPages={totalItems}
+              onPageChange={(page) => goTo(page - 1)}
+              modes={modes}
+            />
+          </View>
+        )}
       </View>
     </CarouselContext.Provider>
   )

package/src/components/ContentSheet/ContentSheet.tsx

@@ -1,8 +1,10 @@
 import React, { useContext, useMemo } from 'react'
 import {
   Platform,
+  Text,
   View,
   type StyleProp,
+  type TextStyle,
   type ViewProps,
   type ViewStyle,
 } from 'react-native'
@@ -31,6 +33,12 @@ export type ContentSheetProps = {
    * the same theme without you wiring `modes` onto each one.
    */
   modes?: Modes
+  /**
+   * Optional title rendered in a centered, sticky header at the top of the
+   * sheet. Uses the same `drawer/title*` token family as the `Drawer` title so
+   * the two surfaces stay visually consistent.
+   */
+  title?: string
   /**
    * Keep the sheet above the on-screen keyboard. When the keyboard opens the
    * sheet rises by exactly the keyboard height; when it closes the sheet drops
@@ -70,6 +78,8 @@ export type ContentSheetProps = {
 interface ContentSheetStyle {
   container: ViewStyle
   paddingBottom: number
+  headerStyle: ViewStyle
+  titleStyle: TextStyle
 }
 
 function resolveContentSheetStyle(modes: Modes): ContentSheetStyle {
@@ -81,6 +91,23 @@ function resolveContentSheetStyle(modes: Modes): ContentSheetStyle {
   const radiusTop = getVariableByName('contentSheet/padding/radius/top', modes) as number
   const radiusBottom = getVariableByName('contentSheet/padding/radius/bottom', modes) as number
 
+  // Title tokens mirror the Drawer title so the two bottom-sheet surfaces stay
+  // visually aligned.
+  const titleColor = getVariableByName('drawer/title/color', modes) as string
+  const titleSize = getVariableByName('drawer/title/fontSize', modes) as number
+  const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes) as number
+  const titleFontFamily = getVariableByName('drawer/title/fontFamily', modes) as string
+  const titleFontWeightRaw = getVariableByName('drawer/title/fontWeight', modes)
+  const titleFontWeight =
+    typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
+
+  const titleWrapPaddingTop = getVariableByName('drawer/titleWrap/padding/top', modes) as number
+  const titleWrapPaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes) as number
+  const titleWrapPaddingHorizontal = getVariableByName(
+    'drawer/titleWrap/padding/horizontal',
+    modes
+  ) as number
+
   return {
     container: {
       backgroundColor,
@@ -97,6 +124,20 @@ function resolveContentSheetStyle(modes: Modes): ContentSheetStyle {
       overflow: 'hidden',
     },
     paddingBottom,
+    headerStyle: {
+      paddingTop: titleWrapPaddingTop,
+      paddingBottom: titleWrapPaddingBottom,
+      paddingHorizontal: titleWrapPaddingHorizontal,
+      alignItems: 'center',
+    },
+    titleStyle: {
+      color: titleColor,
+      fontSize: titleSize,
+      lineHeight: titleLineHeight,
+      fontFamily: titleFontFamily,
+      fontWeight: titleFontWeight as TextStyle['fontWeight'],
+      textAlign: 'center',
+    },
   }
 }
 
@@ -126,6 +167,7 @@ const pinnedStyle: ViewStyle = {
 function ContentSheet({
   children,
   modes = EMPTY_MODES,
+  title,
   avoidKeyboard = true,
   keyboardSpacing = 0,
   safeAreaBottom = true,
@@ -162,6 +204,12 @@ function ContentSheet({
   // `avoidKeyboard` (and platform). Because they are distinct component types,
   // React remounts on toggle, so the conditional `useAnimatedKeyboard` hook
   // inside `KeyboardAwareSheet` always runs in a stable hook order.
+  const header = title ? (
+    <View style={resolved.headerStyle}>
+      <Text style={resolved.titleStyle}>{title}</Text>
+    </View>
+  ) : null
+
   if (avoidKeyboard && !IS_WEB) {
     return (
       <KeyboardAwareSheet
@@ -169,6 +217,7 @@ function ContentSheet({
         spacing={keyboardSpacing}
         {...rest}
       >
+        {header}
         {processedChildren}
       </KeyboardAwareSheet>
     )
@@ -176,6 +225,7 @@ function ContentSheet({
 
   return (
     <View style={containerStyle} {...rest}>
+      {header}
       {processedChildren}
     </View>
   )