jfs-components 0.1.51 → 0.1.54

package/lib/commonjs/components/TextInput/TextInput.js

@@ -168,16 +168,23 @@ const TextInputBase = /*#__PURE__*/(0, _react.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.
     ...(_reactNative.Platform.OS === 'ios' ? null : {
       lineHeight
     }),
@@ -185,13 +192,24 @@ const TextInputBase = /*#__PURE__*/(0, _react.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 = _reactNative.Platform.OS === 'ios' && inputStyle != null ? (() => {
+    const flat = _reactNative.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__*/(0, _jsxRuntime.jsx)(_Icon.default, {
     name: leadingIconName,
@@ -248,7 +266,7 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(function TextInput({
       placeholderTextColor: placeholderColor,
       onFocus: handleFocus,
       onBlur: handleBlur,
-      style: [textInputStyle, inputStyle],
+      style: [textInputStyle, resolvedInputStyle],
       ...rest
     }), processedTrailing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       accessibilityElementsHidden: true,

package/lib/commonjs/components/Tooltip/Tooltip.js

@@ -191,14 +191,12 @@ function TooltipContent({
     height: windowHeight
   } = _reactNative.Dimensions.get('window');
 
-  // Tokens
+  // Tokens — Figma binds Output/Tooltip `radius` + `maxWidth` (not tooltip/*).
   const bgColor = (0, _figmaVariablesResolver.getVariableByName)('tooltip/background', modes);
   const paddingH = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/horizontal', modes));
   const paddingV = Number((0, _figmaVariablesResolver.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((0, _figmaVariablesResolver.getVariableByName)('tooltip/radius', modes) ?? 8);
-  const maxWidthToken = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/maxWidth', modes) ?? 280);
+  const radius = Number((0, _figmaVariablesResolver.getVariableByName)('radius', modes));
+  const maxWidthToken = Number((0, _figmaVariablesResolver.getVariableByName)('maxWidth', modes));
   const arrowWidth = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/width', modes));
   const arrowHeight = Number((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/height', modes));
   const labelColor = (0, _figmaVariablesResolver.getVariableByName)('tooltip/label/color', modes);

package/lib/commonjs/components/index.js

@@ -141,6 +141,12 @@ Object.defineProperty(exports, "ButtonGroup", {
     return _ButtonGroup.default;
   }
 });
+Object.defineProperty(exports, "CARD_MEDIA_ASPECT_RATIO", {
+  enumerable: true,
+  get: function () {
+    return _Card.CARD_MEDIA_ASPECT_RATIO;
+  }
+});
 Object.defineProperty(exports, "CalendarGlyph", {
   enumerable: true,
   get: function () {
@@ -1077,7 +1083,7 @@ var _BottomNav = _interopRequireDefault(require("./BottomNav/BottomNav"));
 var _BottomNavItem = _interopRequireDefault(require("./BottomNavItem/BottomNavItem"));
 var _BrandChip = _interopRequireDefault(require("./BrandChip/BrandChip"));
 var _Button = _interopRequireDefault(require("./Button/Button"));
-var _Card = _interopRequireDefault(require("./Card/Card"));
+var _Card = _interopRequireWildcard(require("./Card/Card"));
 var _CardAdvisory = _interopRequireDefault(require("./CardAdvisory/CardAdvisory"));
 var _CardBankAccount = _interopRequireDefault(require("./CardBankAccount/CardBankAccount"));
 var _Carousel = _interopRequireDefault(require("./Carousel/Carousel"));