jfs-components 0.1.50 → 0.1.54

package/lib/module/components/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { forwardRef, useRef, useState } from 'react';
-import { Platform, Pressable, View, TextInput as RNTextInput } from 'react-native';
+import { Platform, Pressable, StyleSheet, View, TextInput as RNTextInput } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
 import { EMPTY_MODES, cloneChildrenWithModes, mergeRefs } from '../../utils/react-utils';
@@ -162,16 +162,23 @@ const TextInputBase = /*#__PURE__*/forwardRef(function TextInput({
     borderColor: '#222',
     borderWidth: 1
   } : {};
+
+  // ⚠️ DO NOT change to an unconditional `lineHeight`, and do NOT put
+  // `minHeight: lineHeight` on this single-line input on iOS. Same contract as
+  // FormField / SuggestiveSearch — read before "simplifying".
+  //
+  // facebook/react-native#39145 / #28012: on iOS, a single-line RN TextInput
+  // (UITextField) with `lineHeight` > font metrics puts ALL the extra space
+  // ABOVE the glyphs, so placeholder/value sink. Android/Web distribute evenly.
+  // RN's documented workaround (#39145) and #56774: omit `lineHeight` on
+  // single-line iOS inputs — UITextField centers natively — and let the
+  // wrapper (`alignItems: 'center'` + padding/icon) own vertical layout.
+  // Pinning `lineHeight` to `fontSize` is NOT a substitute; it clips custom
+  // font metrics and floats typed text above center.
   const textInputStyle = {
     flex: 1,
     color: textColor,
     fontSize,
-    // iOS-only quirk: a single-line RNTextInput with an explicit `lineHeight`
-    // larger than `fontSize` puts all the extra space ABOVE the glyphs, so the
-    // text/placeholder sits below center (iOS native font-metrics bug — see
-    // facebook/react-native#39145 / #28012). The container centers via
-    // `alignItems: 'center'` + `minHeight`, so omit lineHeight on iOS
-    // (UITextField centers natively) and keep it on Android/Web where it's fine.
     ...(Platform.OS === 'ios' ? null : {
       lineHeight
     }),
@@ -179,13 +186,24 @@ const TextInputBase = /*#__PURE__*/forwardRef(function TextInput({
     fontWeight,
     padding: 0,
     margin: 0,
-    minHeight: lineHeight,
     // Remove focus outline for React Native Web
     outlineStyle: 'none',
     outlineWidth: 0,
     outlineColor: 'transparent'
   };
 
+  // On iOS, strip any consumer `inputStyle.lineHeight` so it can't re-break
+  // the native centering contract above.
+  const resolvedInputStyle = Platform.OS === 'ios' && inputStyle != null ? (() => {
+    const flat = StyleSheet.flatten(inputStyle);
+    if (!flat || flat.lineHeight == null) return inputStyle;
+    const {
+      lineHeight: _ignoredLineHeight,
+      ...restStyle
+    } = flat;
+    return restStyle;
+  })() : inputStyle;
+
   // Determine leading element: use provided leading, or default to icon from leadingIconName
   const leadingElement = leading || /*#__PURE__*/_jsx(Icon, {
     name: leadingIconName,
@@ -242,7 +260,7 @@ const TextInputBase = /*#__PURE__*/forwardRef(function TextInput({
       placeholderTextColor: placeholderColor,
       onFocus: handleFocus,
       onBlur: handleBlur,
-      style: [textInputStyle, inputStyle],
+      style: [textInputStyle, resolvedInputStyle],
       ...rest
     }), processedTrailing && /*#__PURE__*/_jsx(View, {
       accessibilityElementsHidden: true,

package/lib/module/components/Tooltip/Tooltip.js

@@ -184,14 +184,12 @@ export function TooltipContent({
     height: windowHeight
   } = Dimensions.get('window');
 
-  // Tokens
+  // Tokens — Figma binds Output/Tooltip `radius` + `maxWidth` (not tooltip/*).
   const bgColor = getVariableByName('tooltip/background', modes);
   const paddingH = Number(getVariableByName('tooltip/padding/horizontal', modes));
   const paddingV = Number(getVariableByName('tooltip/padding/vertical', modes));
-  // Figma still binds bare local radius/maxWidth; published names are tooltip/*.
-  // Not yet in Coin Variables export — fall back to Figma values (8 / 280).
-  const radius = Number(getVariableByName('tooltip/radius', modes) ?? 8);
-  const maxWidthToken = Number(getVariableByName('tooltip/maxWidth', modes) ?? 280);
+  const radius = Number(getVariableByName('radius', modes));
+  const maxWidthToken = Number(getVariableByName('maxWidth', modes));
   const arrowWidth = Number(getVariableByName('tooltip/tipItem/width', modes));
   const arrowHeight = Number(getVariableByName('tooltip/tipItem/height', modes));
   const labelColor = getVariableByName('tooltip/label/color', modes);

package/lib/module/components/index.js

@@ -12,7 +12,7 @@ export { default as BottomNav } from './BottomNav/BottomNav';
 export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
 export { default as BrandChip } from './BrandChip/BrandChip';
 export { default as Button } from './Button/Button';
-export { default as Card } from './Card/Card';
+export { default as Card, CARD_MEDIA_ASPECT_RATIO } from './Card/Card';
 export { default as CardAdvisory } from './CardAdvisory/CardAdvisory';
 export { default as CardBankAccount } from './CardBankAccount/CardBankAccount';
 export { default as Carousel } from './Carousel/Carousel';