jfs-components 0.0.74 → 0.0.78

package/lib/commonjs/components/Avatar/Avatar.js

@@ -8,7 +8,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
+var _Skeleton = _interopRequireDefault(require("../../skeleton/Skeleton"));
+var _SkeletonGroup = require("../../skeleton/SkeletonGroup");
 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); }
 const avatarImage = require('./31595e70c4181263f9971590224b12934b280c9b.png');
 
@@ -128,11 +131,19 @@ function Avatar({
   // component intentionally renders `accessibilityLabel={undefined}` on the
   // wrapper (the inner Text/Image carry the label instead).
   accessibilityLabel: _accessibilityLabel,
+  loading,
   ...rest
 }) {
   const isMonogram = style === 'Monogram';
   const tokens = (0, _react.useMemo)(() => resolveAvatarTokens(modes, isMonogram), [modes, isMonogram]);
 
+  // Skeleton context — read unconditionally; the actual short-circuit
+  // happens AFTER all remaining hooks below.
+  const {
+    active: groupActive
+  } = (0, _SkeletonGroup.useSkeleton)();
+  const isLoading = loading ?? groupActive;
+
   // Focus is a sustained visible state — keep mirroring on web; gate the
   // setter so it never fires on native (where focus events don't fire on
   // these elements anyway).
@@ -163,6 +174,15 @@ function Avatar({
     pressed
   }) => [tokens.containerStyle, pressed ? pressedOverlayStyle : null, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
   const staticContainerStyle = (0, _react.useMemo)(() => [tokens.containerStyle, isFocused ? focusOverlayStyle : null], [tokens.containerStyle, isFocused]);
+  if (isLoading) {
+    const size = tokens.containerStyle.width;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+      kind: "other",
+      width: size,
+      height: size,
+      modes: modes
+    });
+  }
 
   // The inner content varies; everything else (wrapper, handlers, style) is shared.
   const innerContent = isMonogram ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {

package/lib/commonjs/components/Badge/Badge.js

@@ -8,6 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
+var _Skeleton = _interopRequireDefault(require("../../skeleton/Skeleton"));
+var _SkeletonGroup = require("../../skeleton/SkeletonGroup");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function Badge({
@@ -17,6 +19,7 @@ function Badge({
   accessibilityLabel,
   style,
   labelStyle,
+  loading,
   ...rest
 }) {
   // Resolve token values (fall back to sensible defaults)
@@ -29,6 +32,26 @@ function Badge({
   const paddingVertical = Number((0, _figmaVariablesResolver.getVariableByName)('badge/padding/vertical', modes)) || 4;
   const borderRadius = Number((0, _figmaVariablesResolver.getVariableByName)('badge/radius', modes)) || 4;
   const lineHeight = Number((0, _figmaVariablesResolver.getVariableByName)('badge/label/lineHeight', modes)) || Math.round(fontSize * 1.2);
+
+  // Skeleton short-circuit. Size derived from the same tokens the loaded
+  // badge would use so the placeholder occupies the same box.
+  const {
+    active: groupActive
+  } = (0, _SkeletonGroup.useSkeleton)();
+  const isLoading = loading ?? groupActive;
+  if (isLoading) {
+    const charWidth = fontSize * 0.55;
+    const labelWidth = Math.max(label.length, 3) * charWidth;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+      kind: "badge",
+      width: paddingHorizontal * 2 + labelWidth,
+      height: paddingVertical * 2 + lineHeight,
+      style: {
+        alignSelf: 'flex-start'
+      },
+      modes: modes
+    });
+  }
   const Container = onPress ? _reactNative.Pressable : _reactNative.View;
   const containerStyle = {
     backgroundColor,

package/lib/commonjs/components/Button/Button.js

@@ -10,6 +10,8 @@ var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resol
 var _webPlatformUtils = require("../../utils/web-platform-utils");
 var _reactUtils = require("../../utils/react-utils");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _Skeleton = _interopRequireDefault(require("../../skeleton/Skeleton"));
+var _SkeletonGroup = require("../../skeleton/SkeletonGroup");
 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); }
@@ -173,6 +175,7 @@ function ButtonImpl({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  loading,
   ...rest
 }) {
   // Hover state is web-only in practice; the setter is gated so native taps
@@ -188,6 +191,14 @@ function ButtonImpl({
   userHandlersRef.current.onHoverOut = rest?.onHoverOut;
   const tokens = (0, _react.useMemo)(() => resolveButtonTokens(modes, disabled), [modes, disabled]);
 
+  // Skeleton context — read unconditionally so React's hook order stays
+  // stable. The actual short-circuit return happens AFTER all remaining
+  // hooks have been called below.
+  const {
+    active: groupActive
+  } = (0, _SkeletonGroup.useSkeleton)();
+  const isLoading = loading ?? groupActive;
+
   // Active label color: base by default; hover override (web-only) when hovered.
   // Press color is intentionally NOT applied to the label on native — applying
   // it would require a React render per touch and re-introduce the flicker.
@@ -265,6 +276,32 @@ function ButtonImpl({
       console.warn('[Button] Custom content is used without an explicit `accessibilityLabel` or string `label`. ' + 'Screen readers may not announce this button correctly.');
     }
   }
+  if (isLoading) {
+    const {
+      container,
+      baseLabel,
+      iconSize,
+      accessoryOffset
+    } = tokens;
+    const paddingHorizontal = container.paddingHorizontal ?? 20;
+    const paddingVertical = container.paddingVertical ?? 12;
+    const lineHeight = baseLabel.lineHeight ?? 19;
+    const fontSize = baseLabel.fontSize ?? 16;
+    const labelText = typeof label === 'string' ? label : 'Button';
+    const charWidth = fontSize * 0.55;
+    const labelWidth = Math.max(labelText.length, 4) * charWidth;
+    const hasAccessory = !!(leading || trailing || icon);
+    const accessoryWidth = hasAccessory ? iconSize + accessoryOffset * 2 : 0;
+    const skeletonWidth = paddingHorizontal * 2 + labelWidth + accessoryWidth;
+    const skeletonHeight = paddingVertical * 2 + lineHeight;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Skeleton.default, {
+      kind: "other",
+      width: skeletonWidth,
+      height: skeletonHeight,
+      style: style,
+      modes: modes
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
     accessibilityRole: "button",
     accessibilityLabel: undefined,

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,

package/lib/commonjs/components/ExpandableCheckbox/ExpandableCheckbox.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+var _Checkbox = _interopRequireDefault(require("../Checkbox/Checkbox"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+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); }
+/**
+ * Default modes applied to the inner toggle `Button`. These resolve the
+ * tertiary-style pill in the Figma reference (small, transparent background,
+ * brand purple foreground). Any value supplied via the consumer `modes` prop
+ * takes precedence over these defaults.
+ */
+const BUTTON_DEFAULT_MODES = {
+  'Button / Size': 'XS',
+  AppearanceBrand: 'Secondary',
+  Emphasis: 'Low'
+};
+
+/**
+ * ExpandableCheckbox composes a `Checkbox`, a long-form label and a
+ * "Read more" / "Read less" toggle. Mirrors the Figma "Expandable Checkbox"
+ * component with two states:
+ *
+ *  - **Idle (collapsed)** — checkbox + truncated label + toggle button arranged
+ *    in a horizontal row (cross-axis centered).
+ *  - **Open (expanded)** — checkbox + full multi-line label, with the toggle
+ *    button right-aligned beneath the row.
+ *
+ * The checkbox and the toggle button have independent press handlers — pressing
+ * the toggle does not affect the checked state, and toggling the checkbox does
+ * not collapse / expand the row.
+ *
+ * @component
+ * @param {ExpandableCheckboxProps} props
+ *
+ * @example
+ * ```tsx
+ * <ExpandableCheckbox
+ *   label="By checking this box, I (a) acknowledge and (b) agree to the full terms…"
+ *   defaultChecked
+ *   onValueChange={setAccepted}
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+function ExpandableCheckbox({
+  label = '',
+  checked: controlledChecked,
+  defaultChecked = false,
+  onValueChange,
+  expanded: controlledExpanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  disabled = false,
+  readMoreLabel = 'Read more',
+  readLessLabel = 'Read less',
+  collapsedLines = 1,
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel
+}) {
+  const isCheckedControlled = controlledChecked !== undefined;
+  const [internalChecked, setInternalChecked] = (0, _react.useState)(defaultChecked);
+  const isChecked = isCheckedControlled ? controlledChecked : internalChecked;
+  const isExpandedControlled = controlledExpanded !== undefined;
+  const [internalExpanded, setInternalExpanded] = (0, _react.useState)(defaultExpanded);
+  const isExpanded = isExpandedControlled ? controlledExpanded : internalExpanded;
+  const handleToggleChecked = (0, _react.useCallback)(next => {
+    if (disabled) return;
+    if (!isCheckedControlled) setInternalChecked(next);
+    onValueChange?.(next);
+  }, [disabled, isCheckedControlled, onValueChange]);
+  const handleToggleExpanded = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    const next = !isExpanded;
+    if (!isExpandedControlled) setInternalExpanded(next);
+    onExpandedChange?.(next);
+  }, [disabled, isExpanded, isExpandedControlled, onExpandedChange]);
+  const gap = (0, _figmaVariablesResolver.getVariableByName)('expandableCheckbox/gap', modes) ?? 8;
+  const rowGap = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/gap', modes) ?? 8;
+  const rowPaddingHorizontal = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/padding/horizontal', modes) ?? 0;
+  const rowPaddingVertical = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/padding/vertical', modes) ?? 0;
+  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/foreground', modes) ?? '#1a1c1f';
+  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/fontFamily', modes) ?? 'JioType Var';
+  const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/fontSize', modes) ?? 14;
+  const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/lineHeight', modes) ?? 19;
+  const labelFontWeightRaw = (0, _figmaVariablesResolver.getVariableByName)('checkboxItem/label/fontWeight', modes) ?? 400;
+  const labelFontWeight = String(labelFontWeightRaw);
+  const containerStyle = (0, _react.useMemo)(() => ({
+    flexDirection: isExpanded ? 'column' : 'row',
+    alignItems: isExpanded ? 'flex-end' : 'center',
+    gap,
+    width: '100%',
+    ...(disabled ? {
+      opacity: 0.6
+    } : null)
+  }), [isExpanded, gap, disabled]);
+  const rowStyle = (0, _react.useMemo)(() => ({
+    flex: isExpanded ? undefined : 1,
+    alignSelf: isExpanded ? 'stretch' : 'auto',
+    minWidth: 0,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: rowGap,
+    paddingHorizontal: rowPaddingHorizontal,
+    paddingVertical: rowPaddingVertical
+  }), [isExpanded, rowGap, rowPaddingHorizontal, rowPaddingVertical]);
+  const resolvedLabelStyle = (0, _react.useMemo)(() => ({
+    flex: 1,
+    minWidth: 0,
+    color: labelColor,
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight
+  }), [labelColor, labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight]);
+  const buttonModes = (0, _react.useMemo)(() => ({
+    ...BUTTON_DEFAULT_MODES,
+    ...modes
+  }), [modes]);
+  const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
+  const buttonLabel = isExpanded ? readLessLabel : readMoreLabel;
+  const labelNumberOfLinesProps = !isExpanded && collapsedLines > 0 ? {
+    numberOfLines: collapsedLines,
+    ellipsizeMode: 'tail'
+  } : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [containerStyle, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: rowStyle,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+        checked: isChecked,
+        disabled: disabled,
+        onValueChange: handleToggleChecked,
+        modes: modes,
+        ...(a11yLabel !== undefined ? {
+          accessibilityLabel: a11yLabel
+        } : {})
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [resolvedLabelStyle, labelStyle],
+        selectable: false,
+        ...(labelNumberOfLinesProps ?? {}),
+        children: label
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+      label: buttonLabel,
+      onPress: handleToggleExpanded,
+      disabled: disabled,
+      modes: buttonModes,
+      accessibilityLabel: buttonLabel,
+      accessibilityState: {
+        expanded: isExpanded
+      }
+    })]
+  });
+}
+var _default = exports.default = ExpandableCheckbox;

package/lib/commonjs/components/FormField/FormField.js

@@ -208,6 +208,16 @@ function FormField({
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const interactive = !isDisabled && !isReadOnly;
 
+  // Ref to the native input so tapping anywhere in the input row (padding,
+  // leading/trailing gutters) focuses it on the FIRST tap — fixing the Android
+  // "two taps to open the keyboard" issue caused by the row intercepting the
+  // initial touch.
+  const inputRef = (0, _react.useRef)(null);
+  const focusInput = (0, _react.useCallback)(() => {
+    if (!interactive) return;
+    inputRef.current?.focus();
+  }, [interactive]);
+
   // 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
@@ -340,13 +350,16 @@ function FormField({
         style: requiredIndicatorStyle,
         children: " *"
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
       style: [inputRowStyle, inputStyle],
+      onPress: focusInput,
+      accessible: false,
       children: [processedLeading != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
         accessibilityElementsHidden: true,
         importantForAccessibility: "no",
         children: processedLeading
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        ref: inputRef,
         style: [inputTextStyles, inputTextStyle],
         value: value ?? '',
         onChangeText: handleChangeText,