jfs-components 0.0.73 → 0.0.77

package/lib/commonjs/components/AppBar/AppBar.js

@@ -47,12 +47,13 @@ function AppBar({
   const containerStyle = {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
+    // No `justifyContent` here: with the inline middle slot using `flex: 1`
+    // the three sections lay out naturally (leading | middle | actions).
+    // When middleSlot is absent we fall back to `space-between` at the wrapper
+    // level so leading & actions still anchor to the edges.
     paddingHorizontal: paddingHorizontal ?? 16,
     paddingVertical: paddingVertical ?? (isMain ? 16 : 10),
     backgroundColor: backgroundColor ?? '#FFFFFF'
-    // We can set minHeight if we want to enforce consistency, but padding should dictate it mostly.
-    // Figma shows specific heights implicitly via padding + content.
     // MainPage: h=68 (16 top/bot padding? 36 height content?)
     // SubPage: h=52
   };
@@ -115,8 +116,17 @@ function AppBar({
     style: actionsStyle,
     children: (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(actionsSlot), modes)
   }) : null;
+
+  // When there is no middleSlot we want leading & actions pinned to the
+  // outer edges, so we apply `space-between` at the wrapper. With a middle
+  // slot present, the middle (flex: 1) absorbs the remaining space, so
+  // `space-between` is a no-op.
+  const wrapperStyle = {
+    ...containerStyle,
+    justifyContent: processedMiddle ? 'flex-start' : 'space-between'
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: [containerStyle, style],
+    style: [wrapperStyle, style],
     accessibilityRole: "header",
     accessibilityLabel: undefined,
     ...(accessibilityHint ? {
@@ -131,15 +141,11 @@ function AppBar({
       children: processedLeading
     }), processedMiddle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
-        position: 'absolute',
-        left: 0,
-        right: 0,
-        top: 0,
-        bottom: 0,
+        flex: 1,
+        minWidth: 0,
         alignItems: 'center',
         justifyContent: 'center',
-        zIndex: -1 // Behind actions if overlap? Or should be on top? 
-        // Usually middle title shouldn't block actions. `pointerEvents="box-none"` is safer.
+        paddingHorizontal: 8
       },
       pointerEvents: "box-none",
       children: processedMiddle

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/CardBankAccount/CardBankAccount.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
@@ -13,6 +13,7 @@ var _Button = _interopRequireDefault(require("../Button/Button"));
 var _InstitutionBadge = _interopRequireDefault(require("../InstitutionBadge/InstitutionBadge"));
 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 DEFAULT_ITEMS = [{
   label: 'Account type',
   value: 'Korem ipsum'
@@ -23,6 +24,14 @@ const DEFAULT_ITEMS = [{
   label: 'Last updated',
   value: 'Korem ipsum'
 }];
+
+// Component-level defaults that match the Figma reference. Caller-provided
+// `modes` are merged on top so every key here can be overridden per-instance.
+const DEFAULT_MODES = Object.freeze({
+  'Button / Size': 'S',
+  AppearanceBrand: 'Secondary',
+  Emphasis: 'Medium'
+});
 const toNumber = (value, fallback) => {
   if (typeof value === 'number') return Number.isFinite(value) ? value : fallback;
   if (typeof value === 'string') {
@@ -61,10 +70,17 @@ function CardBankAccount({
   buttonLabel = 'Button',
   onButtonPress,
   footer,
-  modes = _reactUtils.EMPTY_MODES,
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style,
   accessibilityLabel
 }) {
+  // Merge caller modes on top of `DEFAULT_MODES` so every default key
+  // (e.g. `Button / Size`, `AppearanceBrand`, `Emphasis`) can be overridden
+  // per-instance while still applying out of the box.
+  const modes = (0, _react.useMemo)(() => propModes === _reactUtils.EMPTY_MODES ? DEFAULT_MODES : {
+    ...DEFAULT_MODES,
+    ...propModes
+  }, [propModes]);
   const background = (0, _figmaVariablesResolver.getVariableByName)('bankAccountCard/background', modes) ?? '#ffffff';
   const radius = toNumber((0, _figmaVariablesResolver.getVariableByName)('bankAccountCard/radius', modes), 16);
   const paddingHorizontal = toNumber((0, _figmaVariablesResolver.getVariableByName)('bankAccountCard/padding/horizontal', modes), 12);

package/lib/commonjs/components/CheckboxItem/CheckboxItem.js

@@ -17,6 +17,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  * single horizontal pressable row. Pressing anywhere on the row (outside of the
  * `endSlot`) toggles the checkbox, mirroring the typical native form pattern.
  *
+ * Use the `control` prop to swap the checkbox between the leading (left, default)
+ * and trailing (right) edge of the row. The `endSlot` flips to the opposite edge.
+ *
  * Mirrors the Figma "Checkbox Item" component and uses the `checkboxItem/*`
  * design tokens for typography and spacing.
  *
@@ -31,6 +34,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *   label="Fixed deposit • 0245"
  *   checked={checked}
  *   onValueChange={setChecked}
+ *   control="leading"
  *   modes={{ 'Color Mode': 'Light' }}
  * />
  * ```
@@ -41,6 +45,7 @@ function CheckboxItem({
   onValueChange,
   disabled = false,
   label = 'Fixed deposit • 0245',
+  control = 'leading',
   endSlot,
   endSlotWidth = 80,
   modes = _reactUtils.EMPTY_MODES,
@@ -48,6 +53,7 @@ function CheckboxItem({
   labelStyle,
   accessibilityLabel
 }) {
+  const isTrailing = control === 'trailing';
   const isControlled = controlledChecked !== undefined;
   const [internalChecked, setInternalChecked] = (0, _react.useState)(defaultChecked);
   const isChecked = isControlled ? controlledChecked : internalChecked;
@@ -86,7 +92,35 @@ function CheckboxItem({
     fontWeight: labelFontWeight
   };
   const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+  const checkboxNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+    checked: isChecked,
+    disabled: disabled,
+    onValueChange: handleToggle,
+    modes: modes,
+    ...(a11yLabel !== undefined ? {
+      accessibilityLabel: a11yLabel
+    } : {})
+  });
+  const labelNode = label != null && label !== false ? typeof label === 'string' || typeof label === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [resolvedLabelStyle, labelStyle],
+    selectable: false,
+    children: label
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      flex: 1,
+      minWidth: 0
+    },
+    children: label
+  }) : null;
+  const endSlotNode = endSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      width: endSlotWidth,
+      flexShrink: 0,
+      alignItems: 'stretch'
+    },
+    children: (0, _reactUtils.cloneChildrenWithModes)(endSlot, modes)
+  }) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
     style: [containerStyle, style],
     onPress: handleToggle,
     disabled: disabled,
@@ -96,30 +130,11 @@ function CheckboxItem({
       disabled
     },
     accessibilityLabel: a11yLabel,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
-      checked: isChecked,
-      disabled: disabled,
-      onValueChange: handleToggle,
-      modes: modes,
-      accessibilityLabel: a11yLabel
-    }), label != null && label !== false ? typeof label === 'string' || typeof label === 'number' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: [resolvedLabelStyle, labelStyle],
-      selectable: false,
-      children: label
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        flex: 1,
-        minWidth: 0
-      },
-      children: label
-    }) : null, endSlot ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: {
-        width: endSlotWidth,
-        flexShrink: 0,
-        alignItems: 'stretch'
-      },
-      children: (0, _reactUtils.cloneChildrenWithModes)(endSlot, modes)
-    }) : null]
+    children: isTrailing ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [endSlotNode, labelNode, checkboxNode]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [checkboxNode, labelNode, endSlotNode]
+    })
   });
 }
 var _default = exports.default = CheckboxItem;

package/lib/commonjs/components/Dropdown/Dropdown.js

@@ -0,0 +1,214 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = Dropdown;
+exports.DropdownItem = DropdownItem;
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+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 IS_WEB = _reactNative.Platform.OS === 'web';
+
+// ---------------------------------------------------------------------------
+// DropdownItem
+// ---------------------------------------------------------------------------
+
+function useDropdownItemTokens(modes) {
+  return (0, _react.useMemo)(() => {
+    // The `dropdownItem/background` token aliases through the
+    // `Dropdown Item State` collection (Idle | Selected), so we resolve
+    // both possibilities up-front and pick at render time.
+    const idleBackground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/background', {
+      ...modes,
+      'Dropdown Item State': 'Idle'
+    }) || '#ffffff';
+    const selectedBackground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/background', {
+      ...modes,
+      'Dropdown Item State': 'Selected'
+    }) || '#f5f5f5';
+    const foreground = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/foreground', modes) || '#000000';
+    const fontFamily = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontFamily', modes) || 'JioType Var';
+    const fontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontSize', modes), 10) || 16;
+    const fontWeight = (0, _figmaVariablesResolver.getVariableByName)('dropdownItem/fontWeight', modes) || '400';
+    const lineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/lineHeight', modes), 10) || 19;
+    const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/gap', modes), 10) || 8;
+    const paddingHorizontal = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/padding/horizontal', modes), 10) || 12;
+    const paddingVertical = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdownItem/padding/vertical', modes), 10) || 12;
+    return {
+      idleBackground,
+      selectedBackground,
+      foreground,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      gap,
+      paddingHorizontal,
+      paddingVertical
+    };
+  }, [modes]);
+}
+function DropdownItem({
+  label,
+  value = null,
+  selected = false,
+  disabled = false,
+  leading,
+  trailing,
+  onPress,
+  children,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  accessibilityHint
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const tokens = useDropdownItemTokens(modes);
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const handlePress = (0, _react.useCallback)(() => {
+    if (disabled) return;
+    onPress?.(value);
+  }, [disabled, onPress, value]);
+  const containerStyle = (0, _react.useCallback)(({
+    pressed
+  }) => {
+    const showSelected = pressed || isHovered && IS_WEB || selected;
+    const base = {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: tokens.gap,
+      paddingHorizontal: tokens.paddingHorizontal,
+      paddingVertical: tokens.paddingVertical,
+      backgroundColor: showSelected ? tokens.selectedBackground : tokens.idleBackground,
+      opacity: disabled ? 0.4 : 1,
+      width: '100%'
+    };
+    return [base, style];
+  }, [tokens.gap, tokens.paddingHorizontal, tokens.paddingVertical, tokens.idleBackground, tokens.selectedBackground, isHovered, selected, disabled, style]);
+  const textStyle = {
+    color: tokens.foreground,
+    fontFamily: tokens.fontFamily,
+    fontSize: tokens.fontSize,
+    fontWeight: tokens.fontWeight,
+    lineHeight: tokens.lineHeight,
+    flexShrink: 1
+  };
+  const processedLeading = leading ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leading), modes) : null;
+  const customTrailing = trailing ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(trailing), modes) : null;
+  const showDefaultCheck = !trailing && selected;
+  const fallbackA11yLabel = accessibilityLabel || (typeof label === 'string' ? label : 'Dropdown item');
+  const a11yProps = {
+    accessibilityRole: 'menuitem',
+    accessibilityLabel: fallbackA11yLabel,
+    accessibilityState: {
+      selected,
+      disabled
+    }
+  };
+  if (accessibilityHint) {
+    a11yProps.accessibilityHint = accessibilityHint;
+  }
+  const handleHoverIn = (0, _react.useCallback)(() => {
+    if (IS_WEB && !disabled) setIsHovered(true);
+  }, [disabled]);
+  const handleHoverOut = (0, _react.useCallback)(() => {
+    if (IS_WEB) setIsHovered(false);
+  }, []);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    onPress: handlePress,
+    disabled: disabled,
+    onHoverIn: handleHoverIn,
+    onHoverOut: handleHoverOut,
+    style: containerStyle,
+    ...a11yProps,
+    children: [processedLeading, children != null ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [textStyle, labelStyle],
+      numberOfLines: 1,
+      children: label
+    }), customTrailing, showDefaultCheck && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      name: "ic_confirm",
+      size: 16,
+      color: tokens.foreground
+    })]
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Dropdown (popup surface)
+// ---------------------------------------------------------------------------
+
+/**
+ * `Dropdown` is the visual surface (popup) that contains a list of
+ * `DropdownItem`s. It is responsible for the background, rounded corners,
+ * elevation/shadow, and clipping. Use it standalone for menu UIs, or rely on
+ * `DropdownInput` which composes it into a form-field experience.
+ */
+function Dropdown({
+  children,
+  maxHeight,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const radius = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/radius', modes), 10) || 8;
+  const background = (0, _figmaVariablesResolver.getVariableByName)('dropdown/background', modes) || '#ffffff';
+  const shadowColor = (0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/color', modes) || 'rgba(0, 0, 0, 0.08)';
+  const shadowOffsetX = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetX', modes), 10) || 0;
+  const shadowOffsetY = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/offsetY', modes), 10) || 4;
+  const shadowBlur = parseInt((0, _figmaVariablesResolver.getVariableByName)('dropdown/shadow/blur', modes), 10) || 16;
+  const containerStyle = {
+    backgroundColor: background,
+    borderRadius: radius,
+    overflow: 'hidden',
+    shadowColor,
+    shadowOffset: {
+      width: shadowOffsetX,
+      height: shadowOffsetY
+    },
+    shadowOpacity: 1,
+    shadowRadius: shadowBlur / 2,
+    elevation: 4
+  };
+  const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      flexDirection: 'column'
+    },
+    children: (0, _reactUtils.cloneChildrenWithModes)(children, modes)
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [containerStyle, style],
+    accessibilityRole: "menu",
+    accessibilityLabel: accessibilityLabel || 'Dropdown menu',
+    children: maxHeight != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      style: {
+        maxHeight
+      },
+      showsVerticalScrollIndicator: true,
+      keyboardShouldPersistTaps: "handled",
+      children: content
+    }) : content
+  });
+}
+var _default = exports.default = Dropdown;