jfs-components 0.1.28 → 0.1.30

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

@@ -76,6 +76,26 @@ export type CompareTableProps = {
      * lines as it needs even when horizontal space is tight.
      */
     disableTruncation?: boolean;
+    /**
+     * Fixed width (px) for every selection card and every table cell — all
+     * columns share this width. When set, the component enters **scroll mode**:
+     *
+     *  - The cards row and each section's table body become independent
+     *    horizontal `ScrollView`s whose scroll events are **chained** — moving
+     *    one moves every other in lockstep (the cards always stay aligned with
+     *    the cells beneath them).
+     *  - The cards row becomes a **sticky header** at the top: it pins in place
+     *    on the vertical axis (does not scroll away) while the sections scroll
+     *    beneath it. Requires the host to give `CompareTable` a bounded height.
+     *  - The gray table-header rows (each section's `header`) are rendered
+     *    full-width **outside** the horizontal scroll, so they stay put
+     *    horizontally (they don't slide with the cells) while still scrolling
+     *    vertically with the table.
+     *
+     * Omit to keep the original flex layout (columns share the available width,
+     * no scrolling). @default undefined
+     */
+    columnWidth?: number;
 };
 /**
  * CompareTable renders a product comparison surface: a row of selection cards
@@ -89,6 +109,6 @@ export type CompareTableProps = {
  *
  * @component
  */
-declare function CompareTable({ columns, sections, onAddColumn, addColumnLabel, maxColumns, modes, style, disableTruncation, }: CompareTableProps): import("react/jsx-runtime").JSX.Element;
+declare function CompareTable({ columns, sections, onAddColumn, addColumnLabel, maxColumns, modes, style, disableTruncation, columnWidth, }: CompareTableProps): import("react/jsx-runtime").JSX.Element;
 export default CompareTable;
 //# sourceMappingURL=CompareTable.d.ts.map

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

@@ -53,6 +53,19 @@ export type ContentSheetProps = {
      * works in both modes.
      */
     pinToBottom?: boolean;
+    /**
+     * Controls whether the sheet is on-screen. When this becomes `true` the sheet
+     * springs up from the bottom edge (off-screen → on-screen) using the same
+     * spring as the {@link Drawer} (`damping: 32`, `stiffness: 300`); when it
+     * becomes `false` it springs back down below the bottom edge. The sheet pops
+     * up on mount by default.
+     *
+     * The animation runs entirely on the UI thread via `react-native-reanimated`
+     * (no re-renders) and composes with keyboard avoidance — the entrance
+     * `translateY` and the keyboard `translateY` are summed in a single
+     * `useAnimatedStyle`. Default `true`.
+     */
+    visible?: boolean;
     /** Optional style override applied to the sheet container. */
     style?: StyleProp<ViewStyle>;
 } & Omit<ViewProps, 'style' | 'children'>;
@@ -72,6 +85,6 @@ export type ContentSheetProps = {
  *  - **Token-driven** styling via `getVariableByName` + `modes`, with `modes`
  *    cascaded to all slot children.
  */
-declare function ContentSheet({ children, modes, title, avoidKeyboard, keyboardSpacing, safeAreaBottom, pinToBottom, style, ...rest }: ContentSheetProps): import("react/jsx-runtime").JSX.Element;
+declare function ContentSheet({ children, modes, title, avoidKeyboard, keyboardSpacing, safeAreaBottom, pinToBottom, visible, style, ...rest }: ContentSheetProps): import("react/jsx-runtime").JSX.Element;
 export default ContentSheet;
 //# sourceMappingURL=ContentSheet.d.ts.map

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

@@ -12,6 +12,15 @@ export type MoneyValueProps = {
     hidden?: boolean;
     /** When true, a blinking vertical cursor is shown at the end of the value text. */
     focused?: boolean;
+    /**
+     * When true, tapping the component enters an inline edit mode where the value
+     * becomes a numeric TextInput. The user can type digits or delete the existing
+     * amount. Only numeric characters (including one decimal point) are accepted.
+     * On blur or submit the edit is committed and the display restores.
+     */
+    editable?: boolean;
+    /** Called when the value changes during editing (after commit on blur). */
+    onValueChange?: (newValue: string | number) => void;
     /** Modes configuration mapped to Figma tokens. */
     modes?: Modes;
     style?: StyleProp<ViewStyle>;
@@ -32,6 +41,6 @@ export type MoneyValueProps = {
  * the `focused` prop is provided to this component, it will display a natural
  * blinking text cursor.
  */
-declare function MoneyValue({ value, currency, negative, focused, hidden, modes, style, valueStyle, currencyStyle, negativeSignStyle, accessibilityLabel, accessibilityHint, onPress, ...rest }: MoneyValueProps): import("react/jsx-runtime").JSX.Element;
+declare function MoneyValue({ value, currency, negative, focused, hidden, editable, onValueChange, modes, style, valueStyle, currencyStyle, negativeSignStyle, accessibilityLabel, accessibilityHint, onPress, ...rest }: MoneyValueProps): import("react/jsx-runtime").JSX.Element;
 export default MoneyValue;
 //# sourceMappingURL=MoneyValue.d.ts.map

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

@@ -32,6 +32,30 @@ export interface PdpCcCardProps {
     title?: string;
     /** Subtitle rendered below the title (14px medium). */
     subtitle?: string;
+    /**
+     * Number of lines to limit the title to. The `Title` component defaults to
+     * `1` when this is unset, so the headline is a single line with an ellipsis
+     * by default. Pass a larger value (e.g. `2`) to allow the title to wrap onto
+     * that many lines before truncating, or set {@link disableTruncation} to
+     * remove the clamp entirely. The subtitle is never line-clamped.
+     */
+    numberOfLines?: number;
+    /**
+     * When `true`, disables truncation for both the title and subtitle: the
+     * trailing ellipsis (`…`) is never shown and the `numberOfLines` clamp is
+     * ignored. The text is also never shrunk by a tight parent — it keeps its
+     * full intrinsic size and overflows (even breaking the parent layout) rather
+     * than ever clipping into an ellipsis. The text still wraps onto multiple
+     * lines.
+     */
+    disableTruncation?: boolean;
+    /**
+     * When `true`, forces both the title and subtitle onto a single line with no
+     * wrapping (implies {@link disableTruncation}). On web the line overflows
+     * horizontally — brutally breaking the parent layout if it has to — instead
+     * of wrapping or truncating.
+     */
+    singleLine?: boolean;
     /**
      * The metric columns rendered in the stats row. Vertical dividers are
      * inserted automatically between adjacent metrics. Defaults to two sample
@@ -79,6 +103,6 @@ export interface PdpCcCardProps {
  *
  * All defaults can be overridden via `modes`.
  */
-declare function PdpCcCard({ imageSource, imageWidth, imageHeight, media, title, subtitle, metrics, buttonLabel, buttonIcon, onButtonPress, button, showButton, onPress, width, modes, style, accessibilityLabel, }: PdpCcCardProps): import("react/jsx-runtime").JSX.Element;
+declare function PdpCcCard({ imageSource, imageWidth, imageHeight, media, title, subtitle, numberOfLines, disableTruncation, singleLine, metrics, buttonLabel, buttonIcon, onButtonPress, button, showButton, onPress, width, modes, style, accessibilityLabel, }: PdpCcCardProps): import("react/jsx-runtime").JSX.Element;
 export default PdpCcCard;
 //# sourceMappingURL=PdpCcCard.d.ts.map

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

@@ -102,6 +102,14 @@ export type TableProps<T = Record<string, unknown>> = {
      * for wide tables that exceed the viewport on mobile. @default false
      */
     scrollable?: boolean;
+    /**
+     * Fixed width (px) applied to every column — header and body alike — so
+     * all columns share the same width. An explicit per-column `width` (on
+     * `TableColumn`, or on an individual `Table.Cell`/`Table.HeaderCell`) still
+     * takes precedence when set. Omit to let columns flex to share the
+     * available space.
+     */
+    columnWidth?: number;
     /** Accessibility label for the table container. */
     accessibilityLabel?: string;
     /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
@@ -126,7 +134,7 @@ export type TableProps<T = Record<string, unknown>> = {
  *
  * @component
  */
-declare function Table<T = Record<string, unknown>>({ columns, data, children, showHeader, getRowKey, onRowPress, scrollable, accessibilityLabel, modes, style, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Table<T = Record<string, unknown>>({ columns, data, children, showHeader, getRowKey, onRowPress, scrollable, columnWidth, accessibilityLabel, modes, style, }: TableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Table {
     var Header: typeof TableHeader;
     var HeaderCell: typeof TableHeaderCell;

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-07T17:35:34.036Z
+ * Generated: 2026-07-10T20:55:36.505Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/CompareTable/CompareTable.tsx

@@ -1,10 +1,13 @@
-import React from 'react'
+import React, { useCallback, useRef } from 'react'
 import {
     View,
     Text,
     Pressable,
     Platform,
+    ScrollView,
     type ImageSourcePropType,
+    type NativeScrollEvent,
+    type NativeSyntheticEvent,
     type StyleProp,
     type ViewStyle,
     type TextStyle,
@@ -140,6 +143,26 @@ export type CompareTableProps = {
      * lines as it needs even when horizontal space is tight.
      */
     disableTruncation?: boolean;
+    /**
+     * Fixed width (px) for every selection card and every table cell — all
+     * columns share this width. When set, the component enters **scroll mode**:
+     *
+     *  - The cards row and each section's table body become independent
+     *    horizontal `ScrollView`s whose scroll events are **chained** — moving
+     *    one moves every other in lockstep (the cards always stay aligned with
+     *    the cells beneath them).
+     *  - The cards row becomes a **sticky header** at the top: it pins in place
+     *    on the vertical axis (does not scroll away) while the sections scroll
+     *    beneath it. Requires the host to give `CompareTable` a bounded height.
+     *  - The gray table-header rows (each section's `header`) are rendered
+     *    full-width **outside** the horizontal scroll, so they stay put
+     *    horizontally (they don't slide with the cells) while still scrolling
+     *    vertically with the table.
+     *
+     * Omit to keep the original flex layout (columns share the available width,
+     * no scrolling). @default undefined
+     */
+    columnWidth?: number;
 };
 
 const DEFAULT_COLUMNS: CompareTableColumn[] = [
@@ -181,6 +204,7 @@ function CompareTable({
     modes = EMPTY_MODES,
     style,
     disableTruncation,
+    columnWidth,
 }: CompareTableProps) {
     // --- selection card tokens ------------------------------------------------
     const cardBg = (getVariableByName('selectionCard/background/color', modes) as string) ?? '#ffffff'
@@ -238,6 +262,72 @@ function CompareTable({
     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 showCardsRow = columnCount > 0 || showAddCard
+
+    // --- fixed-width scroll mode -------------------------------------------
+    // `columnWidth` opts the component into scroll mode (see prop doc). In that
+    // mode the cards row and each section's table body are independent
+    // horizontal ScrollViews; their scroll events are chained so they move in
+    // lockstep, and the cards row pins to the top on the vertical axis.
+    const useFixedWidth = columnWidth != null
+    /** Total scrollable content width shared by every horizontal surface. */
+    const contentWidth = useFixedWidth ? gridColumnCount * (columnWidth as number) : 0
+
+    const cardsScrollRef = useRef<ScrollView>(null)
+    const bodyScrollRefs = useRef<Map<number, ScrollView>>(new Map())
+    // Stable per-section ref-callback instances so React doesn't detach/reattach
+    // on every render (which would churn the map and re-fire scrollTo).
+    const bodyRefCallbacks = useRef<Map<number, (r: ScrollView | null) => void>>(new Map())
+    /** Last offset we synced everyone to. Echoed onScroll events reporting this
+     *  same value are ignored — this is what prevents feedback loops. */
+    const lastSyncX = useRef(0)
+
+    const applySync = useCallback((x: number, source: 'cards' | number) => {
+        if (Math.abs(x - lastSyncX.current) < 0.5) return
+        lastSyncX.current = x
+        if (source !== 'cards' && cardsScrollRef.current) {
+            cardsScrollRef.current.scrollTo({ x, animated: false })
+        }
+        bodyScrollRefs.current.forEach((ref, idx) => {
+            if (source === 'cards' || idx !== source) {
+                ref.scrollTo({ x, animated: false })
+            }
+        })
+    }, [])
+
+    const onCardsScroll = useCallback(
+        (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+            applySync(e.nativeEvent.contentOffset.x, 'cards')
+        },
+        [applySync],
+    )
+
+    const onBodyScroll = useCallback(
+        (idx: number) => (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+            applySync(e.nativeEvent.contentOffset.x, idx)
+        },
+        [applySync],
+    )
+
+    const getBodyRefCallback = useCallback((idx: number) => {
+        let cb = bodyRefCallbacks.current.get(idx)
+        if (!cb) {
+            cb = (ref: ScrollView | null) => {
+                if (ref) {
+                    bodyScrollRefs.current.set(idx, ref)
+                    // Bring a freshly-expanded section's body into sync with
+                    // the rest of the surfaces.
+                    if (lastSyncX.current > 0) {
+                        ref.scrollTo({ x: lastSyncX.current, animated: false })
+                    }
+                } else {
+                    bodyScrollRefs.current.delete(idx)
+                }
+            }
+            bodyRefCallbacks.current.set(idx, cb)
+        }
+        return cb
+    }, [])
 
     const cardLabelStyle: TextStyle = {
         ...NO_WRAP_TEXT,
@@ -273,8 +363,7 @@ function CompareTable({
     }
 
     const cardStyle: ViewStyle = {
-        flex: 1,
-        minWidth: 0,
+        ...(useFixedWidth ? { width: columnWidth as number } : { flex: 1, minWidth: 0 }),
         minHeight: 147,
         backgroundColor: cardBg,
         borderRadius: cardRadius,
@@ -420,6 +509,7 @@ function CompareTable({
                 key={key}
                 modes={modes}
                 flex={1}
+                width={useFixedWidth ? columnWidth : undefined}
                 align="left"
                 isLastColumn={isLastCol}
                 isLastRow={isLastRow}
@@ -486,38 +576,142 @@ function CompareTable({
         </Table>
     )
 
-    return (
-        <View
-            style={[
-                {
-                    width: '100%',
-                    backgroundColor: cardBg,
-                    borderWidth: 1,
-                    borderColor: '#e8e8e8',
-                    overflow: 'hidden',
-                },
-                style,
-            ]}
+    // Render a single section in fixed-width scroll mode. Unlike `renderTable`
+    // (used in flex mode), the gray header row is rendered full-width OUTSIDE
+    // the body's horizontal ScrollView so it stays put horizontally (it does
+    // not slide with the cells) while still scrolling vertically with the table.
+    // The body rows live inside a horizontal ScrollView that is scroll-synced
+    // with the cards row and every other section's body.
+    const renderSection = (section: CompareTableSection, index: number) => (
+        <Accordion
+            key={section.key ?? section.title ?? index}
+            title={section.title}
+            defaultExpanded={section.defaultExpanded ?? index === 0}
+            modes={modes}
         >
-            {(columnCount > 0 || showAddCard) && (
-                <View style={{ flexDirection: 'row', width: '100%' }}>
-                    {columns.map(renderCard)}
-                    {showAddCard && renderAddCard()}
+            {section.header != null && (
+                <View
+                    style={{
+                        width: '100%',
+                        backgroundColor: headerBg,
+                        paddingHorizontal: headerPaddingH,
+                        paddingVertical: headerPaddingV,
+                        borderBottomWidth: cellBorderSize,
+                        borderBottomColor: cellBorderColor,
+                    }}
+                >
+                    <Text style={headerTextStyle}>{section.header}</Text>
                 </View>
             )}
+            <ScrollView
+                ref={getBodyRefCallback(index)}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                scrollEventThrottle={16}
+                onScroll={onBodyScroll(index)}
+            >
+                <View style={{ width: contentWidth }}>
+                    {section.rows.map((row, rowIndex) => {
+                        const isLastRow = rowIndex === section.rows.length - 1
+                        return (
+                            <View
+                                key={row.key ?? rowIndex}
+                                style={{ flexDirection: 'row', width: '100%' }}
+                            >
+                                {Array.from({ length: columnCount }).map((_, colIndex) =>
+                                    renderTableCell(
+                                        renderCellContent(
+                                            row.values?.[colIndex],
+                                            `${rowIndex}-${colIndex}`,
+                                        ),
+                                        colIndex,
+                                        isLastRow,
+                                        colIndex,
+                                    ),
+                                )}
+                                {showAddCard &&
+                                    renderTableCell(
+                                        null,
+                                        gridColumnCount - 1,
+                                        isLastRow,
+                                        '__add_spacer__',
+                                    )}
+                            </View>
+                        )
+                    })}
+                </View>
+            </ScrollView>
+        </Accordion>
+    )
 
-            <View style={{ width: '100%' }}>
-                {sections.map((section, index) => (
-                    <Accordion
-                        key={section.key ?? section.title ?? index}
-                        title={section.title}
-                        defaultExpanded={section.defaultExpanded ?? index === 0}
-                        modes={modes}
-                    >
-                        {renderTable(section)}
-                    </Accordion>
-                ))}
+    const outerStyle: ViewStyle = {
+        width: '100%',
+        backgroundColor: cardBg,
+        borderWidth: 1,
+        borderColor: '#e8e8e8',
+        overflow: 'hidden',
+    }
+
+    // --- flex mode (columnWidth omitted): original behaviour, unchanged -------
+    if (!useFixedWidth) {
+        return (
+            <View style={[outerStyle, style]}>
+                {showCardsRow && (
+                    <View style={{ flexDirection: 'row', width: '100%' }}>
+                        {columns.map(renderCard)}
+                        {showAddCard && renderAddCard()}
+                    </View>
+                )}
+
+                <View style={{ width: '100%' }}>
+                    {sections.map((section, index) => (
+                        <Accordion
+                            key={section.key ?? section.title ?? index}
+                            title={section.title}
+                            defaultExpanded={section.defaultExpanded ?? index === 0}
+                            modes={modes}
+                        >
+                            {renderTable(section)}
+                        </Accordion>
+                    ))}
+                </View>
             </View>
+        )
+    }
+
+    // --- fixed-width scroll mode: chained horizontal sync + sticky cards -----
+    // The cards row (index 0) is a sticky header of the vertical ScrollView so
+    // it pins to the top while the sections scroll beneath. The cards row is
+    // itself a horizontal ScrollView, synced with every section body. For the
+    // vertical scroll (and thus the sticky behaviour) to engage, the host must
+    // give CompareTable a bounded height (e.g. a sized container or flex:1).
+    return (
+        <View style={[outerStyle, style, { flexDirection: 'column', flex: 1 }]}>
+            <ScrollView
+                style={{ width: '100%', flex: 1 }}
+                stickyHeaderIndices={showCardsRow ? [0] : []}
+                showsVerticalScrollIndicator={false}
+                directionalLockEnabled
+            >
+                {showCardsRow && (
+                    <ScrollView
+                        ref={cardsScrollRef}
+                        horizontal
+                        showsHorizontalScrollIndicator={false}
+                        scrollEventThrottle={16}
+                        onScroll={onCardsScroll}
+                    >
+                        <View style={{ flexDirection: 'row', width: contentWidth }}>
+                            {columns.map(renderCard)}
+                            {showAddCard && renderAddCard()}
+                        </View>
+                    </ScrollView>
+                )}
+
+                <View style={{ width: '100%' }}>
+                    {sections.map(renderSection)}
+                </View>
+            </ScrollView>
         </View>
     )
 }

package/src/components/ContentSheet/ContentSheet.tsx

@@ -1,8 +1,9 @@
-import React, { useContext, useMemo } from 'react'
+import React, { useContext, useEffect, useMemo } from 'react'
 import {
   Platform,
   Text,
   View,
+  useWindowDimensions,
   type StyleProp,
   type TextStyle,
   type ViewProps,
@@ -11,6 +12,9 @@ import {
 import Animated, {
   useAnimatedKeyboard,
   useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  type SharedValue,
 } from 'react-native-reanimated'
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
@@ -19,6 +23,18 @@ import type { Modes } from '../../design-tokens'
 
 const IS_WEB = Platform.OS === 'web'
 
+// Spring config — mirrors the Drawer's bottom pop-up spring so the two
+// bottom-sheet surfaces share the exact same entrance feel (slight bounce,
+// snappy). Keep in sync with `Drawer.tsx` SPRING_CONFIG.
+const SPRING_CONFIG = {
+  damping: 32,
+  stiffness: 300,
+  mass: 1,
+  overshootClamping: false,
+  restDisplacementThreshold: 0.1,
+  restSpeedThreshold: 0.1,
+}
+
 export type ContentSheetProps = {
   /**
    * Sheet content. The sheet is one big slot: whatever you place here is
@@ -71,6 +87,19 @@ export type ContentSheetProps = {
    * works in both modes.
    */
   pinToBottom?: boolean
+  /**
+   * Controls whether the sheet is on-screen. When this becomes `true` the sheet
+   * springs up from the bottom edge (off-screen → on-screen) using the same
+   * spring as the {@link Drawer} (`damping: 32`, `stiffness: 300`); when it
+   * becomes `false` it springs back down below the bottom edge. The sheet pops
+   * up on mount by default.
+   *
+   * The animation runs entirely on the UI thread via `react-native-reanimated`
+   * (no re-renders) and composes with keyboard avoidance — the entrance
+   * `translateY` and the keyboard `translateY` are summed in a single
+   * `useAnimatedStyle`. Default `true`.
+   */
+  visible?: boolean
   /** Optional style override applied to the sheet container. */
   style?: StyleProp<ViewStyle>
 } & Omit<ViewProps, 'style' | 'children'>
@@ -172,6 +201,7 @@ function ContentSheet({
   keyboardSpacing = 0,
   safeAreaBottom = true,
   pinToBottom = true,
+  visible = true,
   style,
   ...rest
 }: ContentSheetProps) {
@@ -200,10 +230,23 @@ function ContentSheet({
     [pinToBottom, resolved.container, paddingBottom, style]
   )
 
+  // Entrance / exit "pop up from bottom" animation — mirrors the Drawer. The
+  // sheet is bottom-anchored, so a positive `translateY` equal to the window
+  // height parks it fully below the bottom edge. Springing it back to `0`
+  // produces the same bottom pop-up the Drawer uses. The shared value is
+  // initialised off-screen so the very first mount pops in (no flash).
+  const { height: windowHeight } = useWindowDimensions()
+  const entrance = useSharedValue(windowHeight)
+  useEffect(() => {
+    entrance.value = withSpring(visible ? 0 : windowHeight, SPRING_CONFIG)
+  }, [visible, windowHeight, entrance])
+
   // Switching between the keyboard-aware and plain implementation is keyed off
   // `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.
+  // inside `KeyboardAwareSheet` always runs in a stable hook order. Both
+  // branches receive the `entrance` shared value so the bottom pop-up plays in
+  // every configuration.
   const header = title ? (
     <View style={resolved.headerStyle}>
       <Text style={resolved.titleStyle}>{title}</Text>
@@ -215,6 +258,7 @@ function ContentSheet({
       <KeyboardAwareSheet
         style={containerStyle}
         spacing={keyboardSpacing}
+        entrance={entrance}
         {...rest}
       >
         {header}
@@ -224,41 +268,77 @@ function ContentSheet({
   }
 
   return (
-    <View style={containerStyle} {...rest}>
+    <AnimatedSheet style={containerStyle} entrance={entrance} {...rest}>
       {header}
       {processedChildren}
-    </View>
+    </AnimatedSheet>
   )
 }
 
 type KeyboardAwareSheetProps = {
   style: StyleProp<ViewStyle>
   spacing: number
+  entrance: SharedValue<number>
+  children: React.ReactNode
+} & Omit<ViewProps, 'style' | 'children'>
+
+type AnimatedSheetProps = {
+  style: StyleProp<ViewStyle>
+  entrance: SharedValue<number>
   children: React.ReactNode
 } & Omit<ViewProps, 'style' | 'children'>
 
 /**
  * Native-only wrapper that lifts the sheet by the live keyboard height. The
  * translation is computed on the UI thread from `useAnimatedKeyboard`, so the
- * sheet tracks the keyboard frame-for-frame without any JS work.
+ * sheet tracks the keyboard frame-for-frame without any JS work. The keyboard
+ * offset is summed with the entrance `translateY` (the bottom pop-up) inside a
+ * single `useAnimatedStyle` so both motions stay on the UI thread and never
+ * fight each other.
  */
 function KeyboardAwareSheet({
   style,
   spacing,
+  entrance,
   children,
   ...rest
 }: KeyboardAwareSheetProps) {
   const keyboard = useAnimatedKeyboard()
 
-  const keyboardStyle = useAnimatedStyle(() => {
+  const animatedStyle = useAnimatedStyle(() => {
     const height = keyboard.height.value
+    const keyboardOffset = height > 0 ? -(height + spacing) : 0
+    return {
+      transform: [{ translateY: entrance.value + keyboardOffset }],
+    }
+  })
+
+  return (
+    <Animated.View style={[style, animatedStyle]} {...rest}>
+      {children}
+    </Animated.View>
+  )
+}
+
+/**
+ * Entrance-only animated sheet (web, or when keyboard avoidance is disabled).
+ * Applies the same bottom pop-up `translateY` as `KeyboardAwareSheet`, minus
+ * the keyboard offset.
+ */
+function AnimatedSheet({
+  style,
+  entrance,
+  children,
+  ...rest
+}: AnimatedSheetProps) {
+  const animatedStyle = useAnimatedStyle(() => {
     return {
-      transform: [{ translateY: height > 0 ? -(height + spacing) : 0 }],
+      transform: [{ translateY: entrance.value }],
     }
   })
 
   return (
-    <Animated.View style={[style, keyboardStyle]} {...rest}>
+    <Animated.View style={[style, animatedStyle]} {...rest}>
       {children}
     </Animated.View>
   )