jfs-components 0.1.57 → 0.1.59

package/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this project are documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
+## [0.1.59] - 2026-07-28
+
+- `CardFinancialCondition` — ship Figma source defaults for `AppearanceBrand: Neutral`, `Context: Nudge&Alert`, and `Nudge padding: None` (merge order: component defaults → global theme → caller `modes`). Stories aligned to the same defaults.
+
+## [0.1.58] - 2026-07-27
+
+- `TextInput` / `InputSearch` — restore iOS single-line vertical centering (FormField pattern): row owns height via `minHeight` + `paddingVertical: 0`; omit `lineHeight` on the field on iOS so placeholder and typed text stay centered (RN #39145 / #56774).
+
 ## [0.1.57] - 2026-07-27
 
 - `Carousel` — fix infinite-tall slides: equal-height no longer uses unbounded `alignItems:'stretch'` / `height:'100%'` in a horizontal ScrollView; it measures intrinsic slide heights then locks slots to the tallest.

package/lib/commonjs/components/CardFinancialCondition/CardFinancialCondition.js

@@ -16,6 +16,14 @@ var _Nudge = _interopRequireDefault(require("../Nudge/Nudge"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Match the Figma source defaults: Neutral brand, Nudge&Alert context, and
+// no nudge padding. Caller / global modes merge on top so any key can still
+// be overridden per-instance.
+const COMPONENT_DEFAULT_MODES = Object.freeze({
+  AppearanceBrand: 'Neutral',
+  Context: 'Nudge&Alert',
+  'Nudge padding': 'None'
+});
 const toNumber = (value, fallback) => {
   if (typeof value === 'number') {
     return Number.isFinite(value) ? value : fallback;
@@ -134,7 +142,9 @@ function CardFinancialCondition({
   const {
     modes: globalModes
   } = (0, _JFSThemeProvider.useTokens)();
-  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+  // Merge order: component defaults → global theme → caller props.
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? COMPONENT_DEFAULT_MODES : {
+    ...COMPONENT_DEFAULT_MODES,
     ...globalModes,
     ...propModes
   }, [globalModes, propModes]);

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

@@ -149,6 +149,14 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(function TextInput({
 
   // Convert radius to React Native format (if 99999, use a large value for fully rounded)
   const borderRadius = radius === 99999 ? 99999 : radius;
+
+  // Row height from tokens: vertical padding above/below the text line.
+  // Applied as container `minHeight` (FormField pattern) — NOT as TextInput
+  // `lineHeight` / `minHeight`, which breaks iOS vertical centering.
+  const padV = typeof paddingVertical === 'number' ? paddingVertical : 0;
+  const textLine = typeof lineHeight === 'number' ? lineHeight : 0;
+  const iconH = typeof iconSize === 'number' ? iconSize : 0;
+  const rowMinHeight = padV * 2 + Math.max(textLine, iconH);
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',
@@ -158,7 +166,10 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(function TextInput({
     borderStyle: 'solid',
     borderRadius,
     paddingHorizontal,
-    paddingVertical,
+    // Same as FormField / SuggestiveSearch: the ROW owns height via minHeight;
+    // paddingVertical on the row would fight that and let the field stretch.
+    paddingVertical: 0,
+    minHeight: rowMinHeight > 0 ? rowMinHeight : undefined,
     gap: 8
   };
   const hoverStyle = isHovered ? {
@@ -169,18 +180,15 @@ const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(function TextInput({
     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".
+  // ⚠️ Same contract as FormField / SuggestiveSearch — do not "simplify".
   //
-  // 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.
+  // facebook/react-native#39145 / #28012 / #56774:
+  // Single-line iOS UITextField + `lineHeight` (or a tall field box) puts ALL
+  // extra space ABOVE the glyphs → placeholder/value sink. Documented fix:
+  // omit `lineHeight` on the single-line input; let the wrapper
+  // (`alignItems: 'center'` + `minHeight`) center it. UITextField centers
+  // natively when it is only as tall as its font. Do NOT pin lineHeight to
+  // fontSize (clips custom fonts / floats typed text).
   const textInputStyle = {
     flex: 1,
     color: textColor,