jfs-components 0.0.77 → 0.0.79

package/CHANGELOG.md

@@ -4,6 +4,34 @@ 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.0.79] - 2026-05-30
+
+- Added `Attached` — positions a badge over main content at nine anchor points (corners, edges, center).
+- Added `PlanComparisonCard` — plan comparison table with column headers, feature rows, brand highlight, and cell values (text / cross / custom node).
+- Added `Slot` — token-driven vertical/horizontal layout container with `modes` cascade to children.
+- `Card` — new `header` slot above media (e.g. brand logo).
+- `ListItem` — new `trailing` slot; `endSlot` deprecated (still honored).
+- `FullscreenModal` — footer action stack now uses `Slot` instead of a raw `View`.
+
+---
+
+## [0.0.78] - 2026-05-29
+
+- Added `ExpandableCheckbox` — checkbox row with collapsible long label and Read more / Read less toggle.
+- Added `FullscreenModal` — full-screen modal with parallax hero, close button, disclaimer, and action footer slots.
+- Added `MessageField` — multi-line textarea with FormField States (Idle / Active / Read Only / Error / Disabled) and Form context integration.
+- Added `SuggestiveSearch` — search input with inline suggestion dropdown.
+- `Accordion` — new `contained` variant and hover state handling.
+- `NavArrow` — pressable when `onPress` is provided; 44 pt touch target.
+- `Checkbox` — 44 pt touch target; checkmark rendered inside the box view.
+- `FormField` / `TextInput` — tap anywhere in the input row to focus on first tap (Android double-tap fix).
+- `ActionFooter` — Android keyboard counter-shift so the footer stays behind the keyboard instead of jumping up.
+- `ListItem` — title/support text use `AppearanceBrand: 'Neutral'` without forcing it onto slot children.
+- `Stepper` / `Step` / `StepLabel` — `showLine`, `metaText`, `meta` props; larger indicator sizing; public type exports.
+- `Title` — line-height clamp to prevent descender clipping on Android.
+
+---
+
 ## [0.0.77] - 2026-05-25
 
 ### Added

package/lib/commonjs/components/Accordion/Accordion.js

@@ -17,34 +17,45 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 if (_reactNative.Platform.OS === 'android' && _reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
   _reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
 }
+function resolveAccordionStateMode(disabled, isExpanded, isHovered, contained) {
+  if (disabled) return 'Disabled';
+  if (contained) {
+    return isExpanded ? 'Open Hover' : 'Hover';
+  }
+  if (isExpanded) {
+    return isHovered ? 'Open Hover' : 'Open';
+  }
+  return isHovered ? 'Hover' : 'Idle';
+}
+function toFontWeight(value, fallback) {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') {
+    const normalized = value.trim().toLowerCase();
+    if (normalized === 'bold') return '700';
+    if (normalized === 'medium') return '500';
+    if (normalized === 'regular' || normalized === 'normal') return '400';
+    if (/^\d+$/.test(normalized)) return normalized;
+    return value;
+  }
+  return fallback;
+}
 /**
  * Accordion component that mirrors the Figma "Accordion" component.
  *
- * This component supports:
- *  - **Expandable/collapsible content** with smooth animation
- *  - **States**: Idle, Hover, Open, Disabled
- *  - **Slot** for custom content
- *  - **Design-token driven styling** via `getVariableByName` and `modes`
+ * Supports two visual treatments via the `contained` prop:
+ *  - **`contained={false}`** (default) — transparent header at rest; filled
+ *    background on hover / press.
+ *  - **`contained={true}`** — header always uses the filled background.
  *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "content" → `children`
+ * Interaction states (Idle, Hover, Open, Disabled) are resolved automatically
+ * from `expanded`, `disabled`, hover, and `contained` — consumers should not
+ * pass `'Accordion States'` in `modes`.
  *
  * @component
- * @param {Object} props
- * @param {string} [props.title='Accordion title'] - The accordion header title
- * @param {boolean} [props.defaultExpanded=false] - Initial expanded state
- * @param {boolean} [props.expanded] - Controlled expanded state
- * @param {Function} [props.onExpandedChange] - Callback fired when expanded state changes
- * @param {boolean} [props.disabled=false] - Whether the accordion is disabled
- * @param {React.ReactNode} [props.children] - Content to display when expanded
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
- * @param {Object} [props.style] - Optional container style overrides
- * @param {string} [props.accessibilityLabel] - Accessibility label for the accordion. If not provided, uses title
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
 function Accordion({
   title = 'Accordion title',
+  contained = false,
   defaultExpanded = false,
   expanded: controlledExpanded,
   onExpandedChange,
@@ -58,21 +69,19 @@ function Accordion({
   webAccessibilityProps,
   ...rest
 }) {
-  // Internal state for uncontrolled mode
   const [internalExpanded, setInternalExpanded] = (0, _react.useState)(defaultExpanded);
-
-  // Determine if controlled or uncontrolled
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
   const isControlled = controlledExpanded !== undefined;
   const isExpanded = isControlled ? controlledExpanded : internalExpanded;
-
-  // Hover state for web
-  const [isHovered, setIsHovered] = (0, _react.useState)(false);
-
-  // Handle toggle
+  const resolvedModes = (0, _react.useMemo)(() => {
+    const accordionState = resolveAccordionStateMode(disabled, isExpanded, isHovered, contained);
+    return {
+      ...modes,
+      'Accordion States': accordionState
+    };
+  }, [contained, disabled, isExpanded, isHovered, modes]);
   const handleToggle = () => {
     if (disabled) return;
-
-    // Animate the layout change
     _reactNative.LayoutAnimation.configureNext(_reactNative.LayoutAnimation.Presets.easeInEaseOut);
     if (isControlled) {
       onExpandedChange?.(!isExpanded);
@@ -81,23 +90,20 @@ function Accordion({
       onExpandedChange?.(!isExpanded);
     }
   };
-
-  // Resolve design tokens
-  const titleColor = disabled ? '#999999' : (0, _figmaVariablesResolver.getVariableByName)('accordion/title/color', modes) || '#0d0d0d';
-  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('accordion/title/fontSize', modes) || 18;
-  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('accordion/title/lineHeight', modes) || 20;
-  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('accordion/title/fontFamily', modes) || 'System';
-  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('accordion/icon/color', modes) || '#141414';
-  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('accordion/icon/size', modes) || 24;
-  const headerGap = (0, _figmaVariablesResolver.getVariableByName)('accordion/header/gap', modes) || 12;
-  const headerPaddingVertical = (0, _figmaVariablesResolver.getVariableByName)('accordion/header/padding/vertical', modes) || 24;
-  const headerBackground = isHovered && !disabled ? '#f2f2f2' : (0, _figmaVariablesResolver.getVariableByName)('accordion/header/background', modes) || 'transparent';
-  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('accordion/content/gap', modes) || 12;
-  const contentPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('accordion/content/padding/top', modes) || 8;
-  const contentPaddingBottom = isExpanded ? (0, _figmaVariablesResolver.getVariableByName)('accordion/content/padding/bottom', modes) ?? 24 : 8;
-  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('accordion/border/color', modes) || '#e6e6e6';
-
-  // Styles
+  const titleColor = (0, _figmaVariablesResolver.getVariableByName)('accordion/title/color', resolvedModes) ?? '#0d0d0d';
+  const titleFontSize = (0, _figmaVariablesResolver.getVariableByName)('accordion/title/fontSize', resolvedModes) ?? 14;
+  const titleLineHeight = (0, _figmaVariablesResolver.getVariableByName)('accordion/title/lineHeight', resolvedModes) ?? 20;
+  const titleFontFamily = (0, _figmaVariablesResolver.getVariableByName)('accordion/title/fontFamily', resolvedModes) ?? 'System';
+  const titleFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('accordion/title/fontWeight', resolvedModes), '700');
+  const iconColor = (0, _figmaVariablesResolver.getVariableByName)('accordion/icon/color', resolvedModes) ?? '#141414';
+  const iconSize = (0, _figmaVariablesResolver.getVariableByName)('accordion/icon/size', resolvedModes) ?? 24;
+  const headerGap = (0, _figmaVariablesResolver.getVariableByName)('accordion/header/gap', resolvedModes) ?? 12;
+  const headerPaddingVertical = (0, _figmaVariablesResolver.getVariableByName)('accordion/header/padding/vertical', resolvedModes) ?? 8;
+  const headerBackground = (0, _figmaVariablesResolver.getVariableByName)('accordion/header/background', resolvedModes) ?? 'transparent';
+  const contentGap = (0, _figmaVariablesResolver.getVariableByName)('accordion/content/gap', resolvedModes) ?? 12;
+  const contentPaddingTop = (0, _figmaVariablesResolver.getVariableByName)('accordion/content/padding/top', resolvedModes) ?? 8;
+  const contentPaddingBottom = (0, _figmaVariablesResolver.getVariableByName)('accordion/content/padding/bottom', resolvedModes) ?? 8;
+  const borderColor = (0, _figmaVariablesResolver.getVariableByName)('accordion/border/color', resolvedModes) ?? '#e6e6e6';
   const containerStyle = {
     borderBottomWidth: 1,
     borderBottomColor: borderColor
@@ -117,7 +123,7 @@ function Accordion({
     fontSize: titleFontSize,
     lineHeight: titleLineHeight,
     fontFamily: titleFontFamily,
-    fontWeight: '700'
+    fontWeight: titleFontWeight
   };
   const contentStyle = {
     backgroundColor: 'transparent',
@@ -127,11 +133,7 @@ function Accordion({
     paddingHorizontal: 0,
     overflow: 'hidden'
   };
-
-  // Generate default accessibility label
   const defaultAccessibilityLabel = accessibilityLabel || title;
-
-  // Web platform support
   const webProps = (0, _webPlatformUtils.usePressableWebSupport)({
     restProps: {},
     onPress: handleToggle,
@@ -139,9 +141,7 @@ function Accordion({
     accessibilityLabel: defaultAccessibilityLabel,
     webAccessibilityProps
   });
-
-  // Process children to pass modes
-  const processedChildren = children ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children), modes) : null;
+  const processedChildren = children ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(children), resolvedModes) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [containerStyle, style],
     ...rest,
@@ -171,7 +171,7 @@ function Accordion({
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: isExpanded ? 'ic_minus' : 'ic_add',
         size: iconSize,
-        color: disabled ? '#999999' : iconColor,
+        color: iconColor,
         accessibilityElementsHidden: true,
         importantForAccessibility: "no"
       })]

package/lib/commonjs/components/ActionFooter/ActionFooter.js

@@ -111,6 +111,44 @@ function ActionFooter({
   style,
   accessibilityLabel
 }) {
+  // -------------------------------------------------------------------------
+  // Keep the footer locked in place behind the software keyboard (Android).
+  // -------------------------------------------------------------------------
+  //
+  // The Android activity is configured with `windowSoftInputMode="adjustResize"`,
+  // which shrinks the app window by the keyboard height when the keyboard
+  // opens. A bottom-anchored footer therefore gets lifted UP by the keyboard
+  // height — exactly the jump the design does not want.
+  //
+  // To counteract that, we translate the footer back DOWN by the same keyboard
+  // height so it visually stays exactly where it was (now sitting behind the
+  // keyboard). iOS does not resize the window for the keyboard, so the footer
+  // already stays put there; we only run this on Android to avoid pushing the
+  // footer off-screen on platforms that don't lift it in the first place.
+  const keyboardOffset = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  (0, _react.useEffect)(() => {
+    if (_reactNative.Platform.OS !== 'android') return undefined;
+    const animateTo = (toValue, duration) => {
+      _reactNative.Animated.timing(keyboardOffset, {
+        toValue,
+        // Match the OS keyboard animation so the resize and our counter-shift
+        // cancel out smoothly with no visible footer movement.
+        duration: typeof duration === 'number' && duration > 0 ? duration : 150,
+        useNativeDriver: true
+      }).start();
+    };
+    const showSub = _reactNative.Keyboard.addListener('keyboardDidShow', e => {
+      animateTo(e?.endCoordinates?.height ?? 0, e?.duration);
+    });
+    const hideSub = _reactNative.Keyboard.addListener('keyboardDidHide', e => {
+      animateTo(0, e?.duration);
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [keyboardOffset]);
+
   // All token reads collapsed into a single useMemo keyed on `modes`. With
   // the shared `EMPTY_MODES` default this resolves once for the common path
   // and never re-allocates the container/slot style objects between renders.
@@ -169,8 +207,16 @@ function ActionFooter({
       });
     });
   }, [children, modes]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [containerStyle, WEB_SHADOW, style],
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+    style: [containerStyle, WEB_SHADOW, style,
+    // Counter-translate by the keyboard height on Android so `adjustResize`
+    // can't lift the footer above the keyboard (no-op on iOS/web where the
+    // value stays at 0).
+    {
+      transform: [{
+        translateY: keyboardOffset
+      }]
+    }],
     accessibilityRole: "toolbar",
     accessibilityLabel: accessibilityLabel,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/Attached/Attached.js

@@ -0,0 +1,144 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _jsxRuntime = require("react/jsx-runtime");
+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); }
+/**
+ * Anchor point on the main content where the attached `badge` is centered.
+ * Mirrors the nine Figma `position` variants (corners, edge midpoints, center).
+ */
+
+const ZERO_SIZE = {
+  width: 0,
+  height: 0
+};
+
+/**
+ * Fraction (0 | 0.5 | 1) of the main content's width/height at which the badge
+ * center should sit, derived from the `position` anchor.
+ */
+function resolveAnchorFractions(position) {
+  const fx = position.includes('left') ? 0 : position.includes('right') ? 1 : 0.5;
+  const fy = position.startsWith('top') ? 0 : position.startsWith('bottom') ? 1 : 0.5;
+  return {
+    fx,
+    fy
+  };
+}
+
+/**
+ * Attached — overlays a small `badge` on top of arbitrary main content,
+ * centered on one of nine anchor points (corners, edge midpoints, or center).
+ *
+ * The badge straddles the chosen anchor regardless of either element's size:
+ * both the main content and the badge are measured via `onLayout`, then the
+ * badge is absolutely positioned so its center lands exactly on the anchor.
+ *
+ * @example
+ * ```tsx
+ * <Attached position="bottom-right" badge={<InstitutionBadge modes={modes} />} modes={modes}>
+ *   <IconCapsule iconName="ic_card" modes={modes} />
+ * </Attached>
+ * ```
+ */
+function Attached({
+  children,
+  badge,
+  position = 'bottom-right',
+  circular = true,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => globalModes === _reactUtils.EMPTY_MODES && propModes === _reactUtils.EMPTY_MODES ? _reactUtils.EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const [mainSize, setMainSize] = (0, _react.useState)(ZERO_SIZE);
+  const [badgeSize, setBadgeSize] = (0, _react.useState)(ZERO_SIZE);
+  const onMainLayout = (0, _react.useCallback)(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setMainSize(prev => prev.width === width && prev.height === height ? prev : {
+      width,
+      height
+    });
+  }, []);
+  const onBadgeLayout = (0, _react.useCallback)(e => {
+    const {
+      width,
+      height
+    } = e.nativeEvent.layout;
+    setBadgeSize(prev => prev.width === width && prev.height === height ? prev : {
+      width,
+      height
+    });
+  }, []);
+  const mainChildren = (0, _react.useMemo)(() => children != null ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : null, [children, modes]);
+  const badgeChildren = (0, _react.useMemo)(() => badge != null ? (0, _reactUtils.cloneChildrenWithModes)(badge, modes) : null, [badge, modes]);
+  const badgePlacement = (0, _react.useMemo)(() => {
+    const {
+      fx,
+      fy
+    } = resolveAnchorFractions(position);
+    const measured = mainSize.width > 0 && badgeSize.width > 0;
+    let anchorX;
+    let anchorY;
+    if (circular) {
+      // Project the anchor onto the circle inscribed in the bounding box, so
+      // corner badges land on the circumference (45°) instead of the box corner.
+      const cx = mainSize.width / 2;
+      const cy = mainSize.height / 2;
+      const radius = Math.min(mainSize.width, mainSize.height) / 2;
+      const dx = (fx - 0.5) * 2; // -1 | 0 | 1
+      const dy = (fy - 0.5) * 2; // -1 | 0 | 1
+      const len = Math.hypot(dx, dy) || 1; // 'center' → 0, guard against /0
+      anchorX = cx + dx / len * radius;
+      anchorY = cy + dy / len * radius;
+    } else {
+      anchorX = mainSize.width * fx;
+      anchorY = mainSize.height * fy;
+    }
+    return {
+      position: 'absolute',
+      left: anchorX - badgeSize.width / 2,
+      top: anchorY - badgeSize.height / 2,
+      // Hide until both elements are measured to avoid a one-frame flash at (0,0).
+      opacity: measured ? 1 : 0
+    };
+  }, [position, circular, mainSize, badgeSize]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, style],
+    ...rest,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      onLayout: onMainLayout,
+      children: mainChildren
+    }), badgeChildren != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: badgePlacement,
+      onLayout: onBadgeLayout,
+      pointerEvents: "box-none",
+      children: badgeChildren
+    })]
+  });
+}
+const styles = {
+  // alignSelf flex-start so the wrapper hugs the main content; anchors are then
+  // computed relative to the content size rather than a stretched parent.
+  container: {
+    position: 'relative',
+    alignSelf: 'flex-start'
+  }
+};
+var _default = exports.default = /*#__PURE__*/_react.default.memo(Attached);

package/lib/commonjs/components/Card/Card.js

@@ -20,9 +20,11 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * Card component implementation from Figma node 765:6186.
  * 
  * Supports a `media` slot (with aspect ratio) and a content area.
+ * Supports an optional `header` slot (e.g. a brand logo), a `media` slot
+ * (with aspect ratio) and a content area.
  * Usage:
  * ```tsx
- * <Card media={<Image source={...} />} modes={modes}>
+ * <Card header={<GoldLogo />} media={<Image source={...} />} modes={modes}>
  *   <Card.SupportText>Support text</Card.SupportText>
  *   <Card.Title>Title</Card.Title>
  *   <Card.SupportText>Support text</Card.SupportText>
@@ -30,6 +32,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * ```
  */
 function Card({
+  header,
   media,
   children,
   modes = _reactUtils.EMPTY_MODES,
@@ -57,6 +60,14 @@ function Card({
       ...modes
     }
   }) : media;
+
+  // Clone header to pass modes if it's a valid element
+  const headerWithModes = /*#__PURE__*/(0, _react.isValidElement)(header) ? /*#__PURE__*/(0, _react.cloneElement)(header, {
+    modes: {
+      ...header.props.modes,
+      ...modes
+    }
+  }) : header;
   const containerStyle = {
     backgroundColor,
     borderColor,
@@ -67,6 +78,15 @@ function Card({
     paddingVertical,
     overflow: 'hidden' // Ensure border radius clips content
   };
+
+  // Header wrap uses fixed padding from Figma (no dedicated tokens defined).
+  const headerWrapperStyle = {
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    paddingHorizontal: 12,
+    paddingVertical: 16
+  };
   const mediaWrapperStyle = {
     width: '100%',
     aspectRatio: mediaAspectRatio,
@@ -87,7 +107,10 @@ function Card({
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
       style: [containerStyle, style],
-      children: [media && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      children: [header && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: headerWrapperStyle,
+        children: headerWithModes
+      }), media && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         style: mediaWrapperStyle,
         children: mediaWithModes
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -49,6 +49,15 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
     }
   };
 }
+
+/** Minimum touch target per iOS HIG / Material accessibility guidance. */
+const MIN_TOUCH_TARGET = 44;
+const touchTargetStyle = {
+  minWidth: MIN_TOUCH_TARGET,
+  minHeight: MIN_TOUCH_TARGET,
+  alignItems: 'center',
+  justifyContent: 'center'
+};
 /**
  * Checkbox component that maps directly to the Figma design using design tokens.
  *
@@ -174,7 +183,7 @@ function Checkbox({
   };
   const markColor = disabled && isChecked ? disabledActiveMark : selectedMarkColor;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
-    style: [resolveStyle(), style],
+    style: [touchTargetStyle, style],
     onPress: handlePress,
     disabled: disabled,
     onHoverIn: () => setIsHovered(true),
@@ -186,14 +195,17 @@ function Checkbox({
       disabled
     },
     accessibilityLabel: accessibilityLabel,
-    children: isChecked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
-      width: 12,
-      height: 9,
-      viewBox: "0 0 12 9",
-      fill: "none",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
-        d: "M4.00091 8.66939C3.91321 8.6699 3.82628 8.65309 3.74509 8.61991C3.6639 8.58673 3.59006 8.53785 3.52779 8.47606L0.195972 5.14273C0.0704931 5.01719 -1.86978e-09 4.84693 0 4.66939C1.86978e-09 4.49186 0.0704931 4.3216 0.195972 4.19606C0.321451 4.07053 0.491636 4 0.66909 4C0.846544 4 1.01673 4.07053 1.14221 4.19606L4.00091 7.06273L10.8578 0.196061C10.9833 0.0705253 11.1535 0 11.3309 0C11.5084 0 11.6785 0.0705253 11.804 0.196061C11.9295 0.321597 12 0.49186 12 0.669394C12 0.846929 11.9295 1.01719 11.804 1.14273L4.47403 8.47606C4.41176 8.53785 4.33792 8.58673 4.25673 8.61991C4.17554 8.65309 4.08861 8.6699 4.00091 8.66939Z",
-        fill: markColor
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: resolveStyle(),
+      children: isChecked && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+        width: 12,
+        height: 9,
+        viewBox: "0 0 12 9",
+        fill: "none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+          d: "M4.00091 8.66939C3.91321 8.6699 3.82628 8.65309 3.74509 8.61991C3.6639 8.58673 3.59006 8.53785 3.52779 8.47606L0.195972 5.14273C0.0704931 5.01719 -1.86978e-09 4.84693 0 4.66939C1.86978e-09 4.49186 0.0704931 4.3216 0.195972 4.19606C0.321451 4.07053 0.491636 4 0.66909 4C0.846544 4 1.01673 4.07053 1.14221 4.19606L4.00091 7.06273L10.8578 0.196061C10.9833 0.0705253 11.1535 0 11.3309 0C11.5084 0 11.6785 0.0705253 11.804 0.196061C11.9295 0.321597 12 0.49186 12 0.669394C12 0.846929 11.9295 1.01719 11.804 1.14273L4.47403 8.47606C4.41176 8.53785 4.33792 8.58673 4.25673 8.61991C4.17554 8.65309 4.08861 8.6699 4.00091 8.66939Z",
+          fill: markColor
+        })
       })
     })
   });

package/lib/commonjs/components/DropdownInput/DropdownInput.js

@@ -36,25 +36,36 @@ function useChevronTokens(modes) {
     };
   }, [modes]);
 }
+function toNumber(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
 function useFormFieldTokens(modes) {
   return (0, _react.useMemo)(() => {
-    const labelColor = (0, _figmaVariablesResolver.getVariableByName)('formField/label/color', modes) || '#0c0d10';
+    const labelColor = (0, _figmaVariablesResolver.getVariableByName)('formField/label/color', modes) || '#000000';
     const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontFamily', modes) || 'JioType Var';
-    const labelFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontSize', modes), 10) || 14;
-    const labelLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/label/lineHeight', modes), 10) || 17;
+    const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontSize', modes), 14);
+    const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/lineHeight', modes), 17);
     const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontWeight', modes) || '500';
-    const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/gap', modes), 10) || 8;
-    const inputPaddingH = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/padding/horizontal', modes), 10) || 12;
-    const inputGap = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/gap', modes), 10) || 8;
-    const inputRadius = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/radius', modes), 10) || 8;
+    const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/gap', modes), 8);
+    const inputPaddingH = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/padding/horizontal', modes), 12);
+    const inputGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/gap', modes), 8);
+    const inputRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/radius', modes), 8);
     const inputBackground = (0, _figmaVariablesResolver.getVariableByName)('formField/input/background', modes) || '#ffffff';
-    const inputFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontSize', modes), 10) || 16;
-    const inputLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/lineHeight', modes), 10) || 45;
+    const inputFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontSize', modes), 16);
+    const inputLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/lineHeight', modes), 45);
     const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontFamily', modes) || 'JioType Var';
     const inputFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontWeight', modes) || '400';
     const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('states/formField/input/label/color', modes) || (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/color', modes) || '#24262b';
     const inputBorderColor = (0, _figmaVariablesResolver.getVariableByName)('states/formField/input/border/color', modes) || (0, _figmaVariablesResolver.getVariableByName)('formField/input/border/color', modes) || '#b5b6b7';
-    const inputBorderSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/border/size', modes), 10) || 1;
+    // Figma spec: 1.5px. Using parseFloat (via toNumber) preserves the
+    // fractional value — parseInt was truncating it to 1, leaving the
+    // resolved row height ~1px shorter than the Figma reference.
+    const inputBorderSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/border/size', modes), 1.5);
     return {
       labelColor,
       labelFontFamily,
@@ -134,7 +145,7 @@ function DropdownInput({
   supportText,
   errorMessage,
   menuMaxHeight = 240,
-  menuOffset = 4,
+  menuOffset = 6,
   matchTriggerWidth = true,
   closeOnBackdropPress = true,
   modes: propModes = _reactUtils.EMPTY_MODES,
@@ -340,19 +351,23 @@ function DropdownInput({
   };
 
   // Focus ring uses the resolved input border color from FormField States so
-  // active/error look consistent with TextInput-based FormField. We also lift
-  // border weight to 2 when "Active" to read as a focus ring.
+  // active/error look consistent with TextInput-based FormField. Only the
+  // color changes between states — width stays constant to avoid layout
+  // shift when opening the menu (a shift would invalidate the measured
+  // trigger rect and visually shove the popup).
   const inputRowStyle = {
     flexDirection: 'row',
     alignItems: 'center',
     backgroundColor: tokens.inputBackground,
     borderColor: tokens.inputBorderColor,
-    borderWidth: isOpen ? Math.max(tokens.inputBorderSize, 1) : tokens.inputBorderSize,
+    borderWidth: tokens.inputBorderSize,
+    borderStyle: 'solid',
     borderRadius: tokens.inputRadius,
     paddingHorizontal: tokens.inputPaddingH,
     paddingVertical: 0,
     gap: tokens.inputGap,
-    minHeight: tokens.inputLineHeight
+    minHeight: tokens.inputLineHeight,
+    width: '100%'
   };
   const valueTextStyle = {
     flex: 1,
@@ -500,7 +515,6 @@ function DropdownInput({
       transparent: true,
       animationType: "fade",
       onRequestClose: closeMenu,
-      statusBarTranslucent: true,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         style: _reactNative.StyleSheet.absoluteFill,
         onPress: closeOnBackdropPress ? closeMenu : undefined,