jfs-components 0.1.28 → 0.1.30

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

@@ -1,7 +1,7 @@
 "use strict";
 
-import React from 'react';
-import { View, Text, Pressable, Platform } from 'react-native';
+import React, { useCallback, useRef } from 'react';
+import { View, Text, Pressable, Platform, ScrollView } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import Accordion from '../Accordion/Accordion';
@@ -106,7 +106,8 @@ function CompareTable({
   maxColumns = 4,
   modes = EMPTY_MODES,
   style,
-  disableTruncation
+  disableTruncation,
+  columnWidth
 }) {
   // --- selection card tokens ------------------------------------------------
   const cardBg = getVariableByName('selectionCard/background/color', modes) ?? '#ffffff';
@@ -163,6 +164,70 @@ 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 : 0;
+  const cardsScrollRef = useRef(null);
+  const bodyScrollRefs = useRef(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(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, source) => {
+    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 => {
+    applySync(e.nativeEvent.contentOffset.x, 'cards');
+  }, [applySync]);
+  const onBodyScroll = useCallback(idx => e => {
+    applySync(e.nativeEvent.contentOffset.x, idx);
+  }, [applySync]);
+  const getBodyRefCallback = useCallback(idx => {
+    let cb = bodyRefCallbacks.current.get(idx);
+    if (!cb) {
+      cb = ref => {
+        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 = {
     ...NO_WRAP_TEXT,
     color: cardLabelColor,
@@ -193,8 +258,12 @@ function CompareTable({
     fontWeight: toWeight(cellFontWeight)
   };
   const cardStyle = {
-    flex: 1,
-    minWidth: 0,
+    ...(useFixedWidth ? {
+      width: columnWidth
+    } : {
+      flex: 1,
+      minWidth: 0
+    }),
     minHeight: 147,
     backgroundColor: cardBg,
     borderRadius: cardRadius,
@@ -313,6 +382,7 @@ function CompareTable({
     return /*#__PURE__*/_jsx(Table.Cell, {
       modes: modes,
       flex: 1,
+      width: useFixedWidth ? columnWidth : undefined,
       align: "left",
       isLastColumn: isLastCol,
       isLastRow: isLastRow,
@@ -366,31 +436,126 @@ function CompareTable({
       })
     })]
   });
-  return /*#__PURE__*/_jsxs(View, {
-    style: [{
-      width: '100%',
-      backgroundColor: cardBg,
-      borderWidth: 1,
-      borderColor: '#e8e8e8',
-      overflow: 'hidden'
-    }, style],
-    children: [(columnCount > 0 || showAddCard) && /*#__PURE__*/_jsxs(View, {
+
+  // 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, index) => /*#__PURE__*/_jsxs(Accordion, {
+    title: section.title,
+    defaultExpanded: section.defaultExpanded ?? index === 0,
+    modes: modes,
+    children: [section.header != null && /*#__PURE__*/_jsx(View, {
       style: {
-        flexDirection: 'row',
-        width: '100%'
+        width: '100%',
+        backgroundColor: headerBg,
+        paddingHorizontal: headerPaddingH,
+        paddingVertical: headerPaddingV,
+        borderBottomWidth: cellBorderSize,
+        borderBottomColor: cellBorderColor
       },
-      children: [columns.map(renderCard), showAddCard && renderAddCard()]
-    }), /*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsx(Text, {
+        style: headerTextStyle,
+        children: section.header
+      })
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      ref: getBodyRefCallback(index),
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      scrollEventThrottle: 16,
+      onScroll: onBodyScroll(index),
+      children: /*#__PURE__*/_jsx(View, {
+        style: {
+          width: contentWidth
+        },
+        children: section.rows.map((row, rowIndex) => {
+          const isLastRow = rowIndex === section.rows.length - 1;
+          return /*#__PURE__*/_jsxs(View, {
+            style: {
+              flexDirection: 'row',
+              width: '100%'
+            },
+            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);
+        })
+      })
+    })]
+  }, section.key ?? section.title ?? index);
+  const outerStyle = {
+    width: '100%',
+    backgroundColor: cardBg,
+    borderWidth: 1,
+    borderColor: '#e8e8e8',
+    overflow: 'hidden'
+  };
+
+  // --- flex mode (columnWidth omitted): original behaviour, unchanged -------
+  if (!useFixedWidth) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: [outerStyle, style],
+      children: [showCardsRow && /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          width: '100%'
+        },
+        children: [columns.map(renderCard), showAddCard && renderAddCard()]
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          width: '100%'
+        },
+        children: sections.map((section, index) => /*#__PURE__*/_jsx(Accordion, {
+          title: section.title,
+          defaultExpanded: section.defaultExpanded ?? index === 0,
+          modes: modes,
+          children: renderTable(section)
+        }, section.key ?? section.title ?? index))
+      })]
+    });
+  }
+
+  // --- 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 /*#__PURE__*/_jsx(View, {
+    style: [outerStyle, style, {
+      flexDirection: 'column',
+      flex: 1
+    }],
+    children: /*#__PURE__*/_jsxs(ScrollView, {
       style: {
-        width: '100%'
+        width: '100%',
+        flex: 1
       },
-      children: sections.map((section, index) => /*#__PURE__*/_jsx(Accordion, {
-        title: section.title,
-        defaultExpanded: section.defaultExpanded ?? index === 0,
-        modes: modes,
-        children: renderTable(section)
-      }, section.key ?? section.title ?? index))
-    })]
+      stickyHeaderIndices: showCardsRow ? [0] : [],
+      showsVerticalScrollIndicator: false,
+      directionalLockEnabled: true,
+      children: [showCardsRow && /*#__PURE__*/_jsx(ScrollView, {
+        ref: cardsScrollRef,
+        horizontal: true,
+        showsHorizontalScrollIndicator: false,
+        scrollEventThrottle: 16,
+        onScroll: onCardsScroll,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: {
+            flexDirection: 'row',
+            width: contentWidth
+          },
+          children: [columns.map(renderCard), showAddCard && renderAddCard()]
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          width: '100%'
+        },
+        children: sections.map(renderSection)
+      })]
+    })
   });
 }
 export default CompareTable;

package/lib/module/components/ContentSheet/ContentSheet.js

@@ -1,13 +1,25 @@
 "use strict";
 
-import React, { useContext, useMemo } from 'react';
-import { Platform, Text, View } from 'react-native';
-import Animated, { useAnimatedKeyboard, useAnimatedStyle } from 'react-native-reanimated';
+import React, { useContext, useEffect, useMemo } from 'react';
+import { Platform, Text, View, useWindowDimensions } from 'react-native';
+import Animated, { useAnimatedKeyboard, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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
+};
 function resolveContentSheetStyle(modes) {
   const backgroundColor = getVariableByName('contentSheet/bg', modes);
   const gap = getVariableByName('contentSheet/gap', modes);
@@ -91,6 +103,7 @@ function ContentSheet({
   keyboardSpacing = 0,
   safeAreaBottom = true,
   pinToBottom = true,
+  visible = true,
   style,
   ...rest
 }) {
@@ -106,10 +119,25 @@ function ContentSheet({
     paddingBottom
   }, style], [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 ? /*#__PURE__*/_jsx(View, {
     style: resolved.headerStyle,
     children: /*#__PURE__*/_jsx(Text, {
@@ -121,12 +149,14 @@ function ContentSheet({
     return /*#__PURE__*/_jsxs(KeyboardAwareSheet, {
       style: containerStyle,
       spacing: keyboardSpacing,
+      entrance: entrance,
       ...rest,
       children: [header, processedChildren]
     });
   }
-  return /*#__PURE__*/_jsxs(View, {
+  return /*#__PURE__*/_jsxs(AnimatedSheet, {
     style: containerStyle,
+    entrance: entrance,
     ...rest,
     children: [header, processedChildren]
   });
@@ -134,25 +164,55 @@ function ContentSheet({
 /**
  * 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
 }) {
   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 /*#__PURE__*/_jsx(Animated.View, {
+    style: [style, animatedStyle],
+    ...rest,
+    children: children
+  });
+}
+
+/**
+ * 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
+}) {
+  const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{
-        translateY: height > 0 ? -(height + spacing) : 0
+        translateY: entrance.value
       }]
     };
   });
   return /*#__PURE__*/_jsx(Animated.View, {
-    style: [style, keyboardStyle],
+    style: [style, animatedStyle],
     ...rest,
     children: children
   });

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

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