jfs-components 0.1.2 → 0.1.12

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

@@ -5,7 +5,7 @@ import { StyleSheet, Text, View } from 'react-native';
 import Svg, { Circle } from 'react-native-svg';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, flattenChildren, resolveTruncation } from '../../utils/react-utils';
 
 /**
  * Per-segment data definition for the data-driven `segments` prop.
@@ -126,7 +126,8 @@ function DonutChart({
   style,
   valueStyle,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -224,7 +225,7 @@ function DonutChart({
           fontWeight: valueFontWeight,
           textAlign: 'center'
         }, valueStyle],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: value
       }) : null, showLabel ? /*#__PURE__*/_jsx(Text, {
         style: [{
@@ -235,7 +236,7 @@ function DonutChart({
           fontWeight: labelFontWeight,
           textAlign: 'center'
         }, labelStyle],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: label
       }) : null]
     }) : null]

package/lib/module/components/Dropdown/Dropdown.js

@@ -4,7 +4,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { Platform, Pressable, ScrollView, Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const IS_WEB = Platform.OS === 'web';
@@ -61,7 +61,8 @@ export function DropdownItem({
   style,
   labelStyle,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -130,7 +131,7 @@ export function DropdownItem({
     ...a11yProps,
     children: [processedLeading, children != null ? children : /*#__PURE__*/_jsx(Text, {
       style: [textStyle, labelStyle],
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       children: label
     }), customTrailing, showDefaultCheck && /*#__PURE__*/_jsx(Icon, {
       name: "ic_confirm",

package/lib/module/components/DropdownInput/DropdownInput.js

@@ -1,11 +1,11 @@
 "use strict";
 
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Dimensions, Modal, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, flattenChildren, resolveTruncation } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 import SupportText from '../SupportText/SupportText';
 import Dropdown, { DropdownItem } from '../Dropdown/Dropdown';
@@ -16,6 +16,12 @@ const IS_WEB = Platform.OS === 'web';
 // Types
 // ---------------------------------------------------------------------------
 
+/**
+ * Imperative handle exposed via `ref`. Lets the consumer drive the dropdown
+ * from outside — e.g. close it when an Android hardware/system button is
+ * pressed, or open it programmatically from a sibling control.
+ */
+
 // ---------------------------------------------------------------------------
 // Token resolution
 // ---------------------------------------------------------------------------
@@ -119,7 +125,7 @@ function collectOptionsFromChildren(children) {
 // Component
 // ---------------------------------------------------------------------------
 
-function DropdownInput({
+const DropdownInput = /*#__PURE__*/forwardRef(function DropdownInput({
   label,
   placeholder = 'Select an option',
   items,
@@ -149,8 +155,9 @@ function DropdownInput({
   accessibilityLabel,
   accessibilityHint,
   onFocus,
-  onBlur
-}) {
+  onBlur,
+  disableTruncation
+}, ref) {
   // ---------------- Modes ----------------
   const {
     modes: globalModes
@@ -264,6 +271,32 @@ function DropdownInput({
     measure();
   }, [measure]);
 
+  // ---------------- Imperative handle ----------------
+  useImperativeHandle(ref, () => ({
+    open: () => {
+      if (isDisabled || isReadOnly) return;
+      measure();
+      setOpenState(true);
+    },
+    close: closeMenu,
+    toggle: () => {
+      if (isDisabled || isReadOnly) return;
+      measure();
+      toggleMenu();
+    },
+    focus: () => {
+      ;
+      triggerRef.current?.focus?.();
+    },
+    blur: () => {
+      ;
+      triggerRef.current?.blur?.();
+    },
+    measureInWindow: callback => {
+      triggerRef.current?.measureInWindow(callback);
+    }
+  }), [isDisabled, isReadOnly, measure, setOpenState, closeMenu, toggleMenu]);
+
   // ---------------- Popup positioning ----------------
   const [menuSize, setMenuSize] = useState(null);
   const handleMenuLayout = useCallback(e => {
@@ -510,7 +543,7 @@ function DropdownInput({
         style: [valueTextStyle, !hasValue && {
           color: placeholderColor
         }],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: displayLabel
       }), /*#__PURE__*/_jsx(View, {
         accessibilityElementsHidden: true,
@@ -558,7 +591,7 @@ function DropdownInput({
       })
     })]
   });
-}
+});
 const webNoOutline = {
   outlineStyle: 'none',
   outlineWidth: 0,

package/lib/module/components/ExpandableCheckbox/ExpandableCheckbox.js

@@ -58,6 +58,7 @@ function ExpandableCheckbox({
   readMoreLabel = 'Read more',
   readLessLabel = 'Read less',
   collapsedLines = 1,
+  disableTruncation = false,
   modes = EMPTY_MODES,
   style,
   labelStyle,
@@ -130,7 +131,7 @@ function ExpandableCheckbox({
   }), [modes]);
   const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
   const buttonLabel = isExpanded ? readLessLabel : readMoreLabel;
-  const labelNumberOfLinesProps = !isExpanded && collapsedLines > 0 ? {
+  const labelNumberOfLinesProps = !disableTruncation && !isExpanded && collapsedLines > 0 ? {
     numberOfLines: collapsedLines,
     ellipsizeMode: 'tail'
   } : null;

package/lib/module/components/FormField/FormField.js

@@ -1,10 +1,11 @@
 "use strict";
 
-import React, { useCallback, useMemo, useState } from 'react';
-import { View, Text, TextInput as RNTextInput } from 'react-native';
+import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
+import { Platform, View, Text, TextInput as RNTextInput } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, mergeRefs } from '../../utils/react-utils';
+import { useWebOutsidePress } from '../../utils/web-platform-utils';
 import SupportText from '../SupportText/SupportText';
 import Icon from '../../icons/Icon';
 import { useFormContext } from '../Form/Form';
@@ -156,7 +157,7 @@ function firstError(error) {
 // Component
 // ---------------------------------------------------------------------------
 
-function FormField({
+const FormField = /*#__PURE__*/forwardRef(function FormField({
   label,
   placeholder,
   value,
@@ -184,7 +185,7 @@ function FormField({
   accessibilityLabel,
   accessibilityHint,
   testID
-}) {
+}, ref) {
   // -- Form context integration -------------------------------------------
   const formCtx = useFormContext();
   const formError = name && formCtx ? firstError(formCtx.validationErrors[name]) : undefined;
@@ -202,6 +203,21 @@ function FormField({
   const [isFocused, setIsFocused] = useState(false);
   const interactive = !isDisabled && !isReadOnly;
 
+  // Internal handles so we can (a) imperatively blur the input and (b) detect
+  // outside presses. The forwarded `ref` is merged in below, so the public
+  // ref API (focus/blur/clear/isFocused) is unchanged for consumers.
+  const inputRef = useRef(null);
+  const rootRef = useRef(null);
+  // Stable merged ref so React doesn't detach/reattach (and momentarily null
+  // `inputRef.current`) on every render.
+  const mergedInputRef = useMemo(() => mergeRefs(inputRef, ref), [ref]);
+
+  // Web: pressing an INTERACTIVE element outside the field (Button, link,
+  // another pressable) often does not move DOM focus, so the native `blur`
+  // never fires and the field stays visually "Active". Force a blur on any
+  // outside pointer press while focused. No-op on native.
+  useWebOutsidePress(rootRef, useCallback(() => inputRef.current?.blur(), []), isFocused);
+
   // FormField States cascade — error > read only/disabled > active (focused) > idle.
   // Disabled maps to "Read Only" since there is no dedicated disabled mode and
   // the visual treatment is closest. This is only the DEFAULT — an explicit
@@ -284,7 +300,30 @@ function FormField({
     color: tokens.inputTextColor,
     fontFamily: tokens.inputFontFamily,
     fontSize: tokens.inputFontSize,
-    lineHeight: tokens.inputLineHeight,
+    // ⚠️ DO NOT change to an unconditional `lineHeight: tokens.inputLineHeight`.
+    // This has regressed twice — read this before "simplifying" it.
+    //
+    // `inputLineHeight` comes from the Figma token `formField/input/label`
+    // ("16/45"), which is a 16px font inside a 45px ROW, i.e. it is the row
+    // HEIGHT, not the text leading. The row height is already applied via
+    // `inputRowStyle.minHeight` + `alignItems: 'center'`, so the text never
+    // needs this value as its own `lineHeight`.
+    //
+    // Passing a `lineHeight` (45) that is much larger than `fontSize` (16)
+    // onto a single-line RNTextInput breaks ONLY iOS: iOS puts ALL the extra
+    // vertical space ABOVE the glyphs, so the text/placeholder sinks to the
+    // bottom of the box instead of centering. Android and Web distribute the
+    // space evenly and look correct. This is a long-standing iOS native
+    // font-metrics bug in UITextField — see facebook/react-native#39145 and
+    // #28012; the documented workaround is exactly "drop lineHeight on the
+    // single-line input and let a wrapper center it". A single-line UITextField
+    // with no lineHeight centers its text natively (see react-native#56774).
+    //
+    // So: omit lineHeight on iOS (native centering via the row), and keep the
+    // token value on Android/Web where it already renders correctly.
+    ...(Platform.OS === 'ios' ? null : {
+      lineHeight: tokens.inputLineHeight
+    }),
     fontWeight: tokens.inputFontWeight,
     padding: 0,
     margin: 0,
@@ -321,6 +360,7 @@ function FormField({
   // -- Accessibility ------------------------------------------------------
   const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Form field';
   return /*#__PURE__*/_jsxs(View, {
+    ref: rootRef,
     style: [wrapperStyle, style],
     pointerEvents: isDisabled ? 'none' : 'auto',
     testID: testID,
@@ -341,6 +381,7 @@ function FormField({
         importantForAccessibility: "no",
         children: processedLeading
       }), /*#__PURE__*/_jsx(RNTextInput, {
+        ref: mergedInputRef,
         style: [inputTextStyles, inputTextStyle],
         value: value ?? '',
         onChangeText: handleChangeText,
@@ -370,5 +411,5 @@ function FormField({
       modes: modes
     })]
   });
-}
+});
 export default FormField;

package/lib/module/components/Gauge/Gauge.js

@@ -35,7 +35,7 @@ const toFontWeight = (value, fallback) => {
 };
 const getStrokeColor = (style, fallback) => {
   const flattened = StyleSheet.flatten(style);
-  return typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
+  return flattened && typeof flattened.backgroundColor === 'string' ? flattened.backgroundColor : fallback;
 };
 function Gauge({
   value = 84,

package/lib/module/components/HoldingsCard/HoldingsCard.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text, Pressable, Image } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Radio from '../Radio/Radio';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GRID_COLUMNS = 3;
 const GRID_COLUMN_GAP = 12;
@@ -34,7 +34,8 @@ export default function HoldingsCard({
   onPress,
   modes = EMPTY_MODES,
   style,
-  testID
+  testID,
+  disableTruncation
 }) {
   // ---- Container tokens ----
   const containerFill = getVariableByName('holdingsCard/container/fill', modes) || '#fef4e5';
@@ -186,7 +187,7 @@ export default function HoldingsCard({
               lineHeight: detailValueLineHeight,
               fontWeight: detailValueFontWeight
             },
-            numberOfLines: 1,
+            ...resolveTruncation(disableTruncation, 1),
             children: item.value
           })]
         }, `${rowIndex}-${colIndex}`)), row.length < GRID_COLUMNS && Array.from({

package/lib/module/components/InputSearch/InputSearch.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
@@ -48,7 +48,7 @@ function SupportText({
     })]
   });
 }
-export default function InputSearch({
+const InputSearch = /*#__PURE__*/forwardRef(function InputSearch({
   supportText = true,
   supportTextLabel = "Support Text",
   supportTextIcon = "ic_info",
@@ -63,7 +63,7 @@ export default function InputSearch({
   trailing,
   inputStyle,
   ...rest
-}) {
+}, ref) {
   const [isFocused, setIsFocused] = useState(false);
 
   // Hardcode InputState based on the state prop, ignoring any external InputState passed in modes
@@ -118,6 +118,7 @@ export default function InputSearch({
       gap: formFieldGap
     }, containerStyle],
     children: [/*#__PURE__*/_jsx(TextInput, {
+      ref: ref,
       placeholder: placeholder,
       value: value || '',
       onChangeText: onChangeText || (() => {}),
@@ -137,4 +138,5 @@ export default function InputSearch({
       modes: componentModes
     })]
   });
-}
+});
+export default InputSearch;

package/lib/module/components/InstitutionBadge/InstitutionBadge.js

@@ -4,7 +4,7 @@ import React, { useMemo } from 'react';
 import { Text, View } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import MediaSource from '../../utils/MediaSource';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Default avatar asset (shared with the Avatar component) so that
@@ -82,6 +82,7 @@ function InstitutionBadge({
   style,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
   ...rest
 }) {
   const {
@@ -118,7 +119,7 @@ function InstitutionBadge({
       })
     }), /*#__PURE__*/_jsx(Text, {
       style: [tokens.labelStyle, labelStyle],
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       children: label
     })]
   });

package/lib/module/components/ListGroup/ListGroup.js

@@ -8,7 +8,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
  * Helper function to recursively clone children and pass modes prop to components that accept it.
  * This ensures that all child components in slots receive the modes prop from the parent.
  */
-import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ListGroup component that mirrors the Figma "List Group" component.
@@ -43,6 +43,7 @@ function ListGroup({
   style,
   accessibilityLabel,
   accessibilityHint,
+  disableTruncation,
   ...rest
 }) {
   // Resolve container tokens
@@ -95,7 +96,7 @@ function ListGroup({
       style: [labelStyle, processedSlot && {
         marginBottom: gap
       }],
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
       children: label

package/lib/module/components/ListItem/ListItem.js

@@ -5,7 +5,7 @@ import { View, Text, Pressable, Platform } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import NavArrow from '../NavArrow/NavArrow';
 import { usePressableWebSupport } from '../../utils/web-platform-utils';
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // ---------------------------------------------------------------------------
 // Module-scope constants — never re-allocated per render.
@@ -185,6 +185,7 @@ function ListItemImpl({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }) {
   const tokens = useMemo(() => resolveListItemTokens(modes), [modes]);
@@ -239,7 +240,7 @@ function ListItemImpl({
     const displayText = layout === 'Vertical' ? supportText.replace(/ /g, '\n') : supportText;
     return /*#__PURE__*/_jsx(Text, {
       style: layout === 'Vertical' ? [tokens.supportTextStyle, verticalSupportTextOverride] : tokens.supportTextStyle,
-      numberOfLines: layout === 'Horizontal' ? 2 : undefined,
+      ...resolveTruncation(disableTruncation, layout === 'Horizontal' ? 2 : undefined),
       children: displayText
     });
   };
@@ -272,7 +273,7 @@ function ListItemImpl({
         },
         children: [/*#__PURE__*/_jsx(Text, {
           style: tokens.titleTextStyle,
-          numberOfLines: 1,
+          ...resolveTruncation(disableTruncation, 1),
           children: title
         }), showSupportText && renderSupportContent()]
       }), processedTrailing ? /*#__PURE__*/_jsx(View, {

package/lib/module/components/MediaCard/MediaCard.js

@@ -4,7 +4,7 @@ import React, { createContext, useContext } from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Image from '../Image/Image';
-import GlassFill from './GlassFill';
+import GlassFill from '../../utils/GlassFill/GlassFill';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const MediaCardContext = /*#__PURE__*/createContext({});
@@ -186,7 +186,9 @@ export function Footer({
     children: [/*#__PURE__*/_jsx(GlassFill, {
       tint: tint,
       intensity: intensity,
-      overlayColor: glassBgColor
+      overlayColor: glassBgColor,
+      webBlurScale: 0.3,
+      webBlurMaxPx: 30
     }), /*#__PURE__*/_jsx(View, {
       style: {
         flexDirection: 'row',

package/lib/module/components/MetricLegendItem/MetricLegendItem.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * MetricLegendItem renders a horizontal row consisting of a small colored
@@ -22,7 +22,8 @@ function MetricLegendItem({
   style,
   indicatorStyle,
   labelStyle,
-  valueStyle
+  valueStyle,
+  disableTruncation
 }) {
   const gap = getVariableByName('metricLegendItem/gap', modes) ?? 4;
   const textWrapGap = getVariableByName('metricLegendItem/textWrap/gap', modes) ?? 4;
@@ -87,7 +88,7 @@ function MetricLegendItem({
           lineHeight: valueLineHeight,
           fontWeight: valueFontWeight
         }, valueStyle],
-        numberOfLines: 1,
+        ...resolveTruncation(disableTruncation, 1),
         children: value
       })]
     })]

package/lib/module/components/MonthlyStatusGrid/MonthlyStatusGrid.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils';
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem';
 
 /**
@@ -75,7 +75,8 @@ function CalendarGlyph({
   modes: propModes = EMPTY_MODES,
   style,
   labelStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -120,7 +121,7 @@ function CalendarGlyph({
       gap
     }, style],
     children: /*#__PURE__*/_jsx(Text, {
-      numberOfLines: 1,
+      ...resolveTruncation(disableTruncation, 1),
       style: [{
         color: foreground,
         fontFamily,
@@ -182,7 +183,8 @@ function MonthlyStatusGrid({
   glyphStyle,
   labelStyle,
   legendStyle,
-  accessibilityLabel
+  accessibilityLabel,
+  disableTruncation
 }) {
   const {
     modes: globalModes
@@ -239,6 +241,7 @@ function MonthlyStatusGrid({
             label: label,
             status: month.status,
             modes: glyphModes,
+            disableTruncation: disableTruncation,
             ...(glyphStyle !== undefined ? {
               style: glyphStyle
             } : {}),

package/lib/module/components/NoteInput/NoteInput.js

@@ -1,15 +1,15 @@
 "use strict";
 
-import React, { useState, useRef } from 'react';
+import React, { forwardRef, useState, useRef } from 'react';
 import { View, TextInput as RNTextInput, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
+import { EMPTY_MODES, mergeRefs } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * NoteInput component representing an interactive "Add note" badge style field.
  * Allows the user to click, clears the placeholder text, and shows a blinking cursor when focused.
  */
-export default function NoteInput({
+const NoteInput = /*#__PURE__*/forwardRef(function NoteInput({
   value = '',
   placeholder = 'Add note',
   onChangeText,
@@ -20,7 +20,7 @@ export default function NoteInput({
   onFocus,
   onBlur,
   ...rest
-}) {
+}, ref) {
   const [internalFocused, setInternalFocused] = useState(false);
   const inputRef = useRef(null);
 
@@ -92,7 +92,7 @@ export default function NoteInput({
         importantForAccessibility: "no",
         children: internalFocused ? value || ' ' : value || placeholder
       }), /*#__PURE__*/_jsx(RNTextInput, {
-        ref: inputRef,
+        ref: mergeRefs(inputRef, ref),
         value: value,
         onChangeText: onChangeText,
         placeholder: internalFocused ? '' : placeholder,
@@ -112,4 +112,5 @@ export default function NoteInput({
       })]
     })
   });
-}
+});
+export default NoteInput;