jfs-components 0.0.73 → 0.0.74

package/lib/module/components/AccountCard/AccountCard.js

@@ -0,0 +1,241 @@
+"use strict";
+
+import React, { useCallback, useMemo, useRef } from 'react';
+import { Image as RNImage, Platform, Pressable, Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Icon from '../../icons/Icon';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const IS_IOS = Platform.OS === 'ios';
+const PRESS_DELAY = IS_IOS ? 130 : 0;
+const DEFAULT_IMAGE_RATIO = 125 / 82;
+const pressedOverlayStyle = {
+  opacity: 0.7
+};
+
+// Default modes for the "Add" placeholder icon (`iconButton/*` tokens).
+// Caller-supplied `modes` are merged on top so every key here can be overridden.
+const ADD_ICON_DEFAULT_MODES = Object.freeze({
+  AppearanceBrand: 'Secondary',
+  Emphasis: 'Low',
+  "Button / Size": "M"
+});
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') return Number.isFinite(value) ? value : fallback;
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') return String(value);
+  if (typeof value === 'string') return value;
+  return fallback;
+};
+const normalizeImageSource = src => {
+  if (src == null) return undefined;
+  if (typeof src === 'string') return {
+    uri: src
+  };
+  return src;
+};
+
+/**
+ * `AccountCard` — a compact card preview used to represent a linked
+ * financial account in lists / grids.
+ *
+ * Two visual states are supported via the `state` prop:
+ *
+ *  1. `'connected'` (default): renders a small card-art preview, a bold
+ *     `title` and a regular-weight `subtitle` (e.g. masked account number).
+ *  2. `'add'`: renders a soft-tinted placeholder field with a centred `+`
+ *     icon and the `title` underneath, intended as the "add new account"
+ *     entry-point at the end of a list of connected accounts.
+ *
+ * All values resolve through the `accountCard/*` design tokens with
+ * sensible Figma defaults so the card renders correctly out of the box.
+ *
+ * @component
+ * @param {AccountCardProps} props
+ */
+function AccountCard({
+  state = 'connected',
+  title = 'Personal account',
+  subtitle = '**** 5651',
+  imageSource,
+  imageRatio = DEFAULT_IMAGE_RATIO,
+  cardSlot,
+  addIcon = 'ic_add',
+  onPress,
+  disabled = false,
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+  accessibilityHint
+}) {
+  const iconModes = useMemo(() => modes === EMPTY_MODES ? ADD_ICON_DEFAULT_MODES : {
+    ...ADD_ICON_DEFAULT_MODES,
+    ...modes
+  }, [modes]);
+
+  // ---- Tokens ---------------------------------------------------------
+  const gap = toNumber(getVariableByName('accountCard/gap', modes), 8);
+  const textWrapGap = toNumber(getVariableByName('accountCard/textWrap/gap', modes), 0);
+  const titleColor = getVariableByName('accountCard/title/foreground', modes) ?? '#0d0d0f';
+  const titleFontFamily = getVariableByName('accountCard/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontSize = toNumber(getVariableByName('accountCard/title/fontSize', modes), 12);
+  const titleLineHeight = toNumber(getVariableByName('accountCard/title/lineHeight', modes), 16);
+  const titleFontWeight = toFontWeight(getVariableByName('accountCard/title/fontWeight', modes), '700');
+  const subtitleColor = getVariableByName('accountCard/subtitle/foreground', modes) ?? '#24262b';
+  const subtitleFontFamily = getVariableByName('accountCard/subtitle/fontFamily', modes) ?? 'JioType Var';
+  const subtitleFontSize = toNumber(getVariableByName('accountCard/subtitle/fontSize', modes), 12);
+  const subtitleLineHeight = toNumber(getVariableByName('accountCard/subtitle/lineHeight', modes), 16);
+  const subtitleFontWeight = toFontWeight(getVariableByName('accountCard/subtitle/fontWeight', modes), '400');
+  const addFieldRadius = toNumber(getVariableByName('accountCard/addItemField/radius', modes), 8);
+  const addFieldBg = getVariableByName('accountCard/addItemField/bg', modes) ?? '#ede8ff';
+  const addIconColor = getVariableByName('iconButton/icon/color', iconModes) ?? '#5d00b5';
+  const addIconSize = toNumber(getVariableByName('iconButton/icon/size', iconModes), 16);
+
+  // ---- Styles ---------------------------------------------------------
+  const titleStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    lineHeight: titleLineHeight,
+    fontWeight: titleFontWeight,
+    width: '100%'
+  };
+  const subtitleStyle = {
+    color: subtitleColor,
+    fontFamily: subtitleFontFamily,
+    fontSize: subtitleFontSize,
+    lineHeight: subtitleLineHeight,
+    fontWeight: subtitleFontWeight,
+    width: '100%'
+  };
+  const imageBoxStyle = {
+    width: '100%',
+    aspectRatio: imageRatio,
+    overflow: 'hidden'
+  };
+
+  // RN's `<Image>` accepts `ImageStyle`, which has a narrower `overflow`
+  // union than `ViewStyle`. Build the image-only style separately so the
+  // shared box dimensions can be reused without a cast.
+  const imageStyle = {
+    width: '100%',
+    aspectRatio: imageRatio
+  };
+  const addFieldStyle = {
+    ...imageBoxStyle,
+    backgroundColor: addFieldBg,
+    borderRadius: addFieldRadius,
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+
+  // ---- Image / placeholder area --------------------------------------
+  const renderCardArea = () => {
+    if (cardSlot !== undefined && cardSlot !== null) {
+      const processed = cloneChildrenWithModes(cardSlot, modes);
+      return /*#__PURE__*/_jsx(View, {
+        style: imageBoxStyle,
+        pointerEvents: "box-none",
+        children: processed.length === 1 ? processed[0] : processed
+      });
+    }
+    if (state === 'add') {
+      return /*#__PURE__*/_jsx(View, {
+        style: addFieldStyle,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: addIcon,
+          size: addIconSize,
+          color: addIconColor
+        })
+      });
+    }
+    const normalized = normalizeImageSource(imageSource);
+    if (normalized) {
+      return /*#__PURE__*/_jsx(RNImage, {
+        source: normalized,
+        style: imageStyle,
+        resizeMode: "cover",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      });
+    }
+    return /*#__PURE__*/_jsx(View, {
+      style: imageBoxStyle
+    });
+  };
+
+  // ---- Pressable wiring ----------------------------------------------
+  // Keep React state out of the press path. `Pressable`'s style callback
+  // applies the pressed visual without a re-render.
+  const userHandlersRef = useRef({});
+  const handlePressIn = useCallback(e => {
+    userHandlersRef.current.onPressIn?.(e);
+  }, []);
+  const handlePressOut = useCallback(e => {
+    userHandlersRef.current.onPressOut?.(e);
+  }, []);
+  const containerStyle = useMemo(() => ({
+    width: '100%',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    gap,
+    opacity: disabled ? 0.5 : 1
+  }), [gap, disabled]);
+  const pressableStyle = useCallback(({
+    pressed
+  }) => [containerStyle, style, pressed && !disabled && onPress ? pressedOverlayStyle : null], [containerStyle, style, disabled, onPress]);
+  const showSubtitle = state === 'connected' && subtitle != null && subtitle !== '';
+  const a11yRole = onPress ? 'button' : undefined;
+  const a11yLabel = accessibilityLabel ?? title;
+  const content = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [renderCardArea(), title != null && title !== '' || showSubtitle ? /*#__PURE__*/_jsxs(View, {
+      style: {
+        width: '100%',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+        gap: textWrapGap
+      },
+      children: [title != null && title !== '' ? /*#__PURE__*/_jsx(Text, {
+        style: titleStyle,
+        numberOfLines: 1,
+        children: title
+      }) : null, showSubtitle ? /*#__PURE__*/_jsx(Text, {
+        style: subtitleStyle,
+        numberOfLines: 1,
+        children: subtitle
+      }) : null]
+    }) : null]
+  });
+  if (!onPress) {
+    return /*#__PURE__*/_jsx(View, {
+      accessibilityLabel: a11yLabel,
+      accessibilityHint: accessibilityHint,
+      style: [containerStyle, style],
+      children: content
+    });
+  }
+  return /*#__PURE__*/_jsx(Pressable, {
+    accessibilityRole: a11yRole,
+    accessibilityLabel: a11yLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityState: {
+      disabled
+    },
+    onPress: disabled ? undefined : onPress,
+    disabled: disabled,
+    onPressIn: handlePressIn,
+    onPressOut: handlePressOut,
+    unstable_pressDelay: PRESS_DELAY,
+    style: pressableStyle,
+    children: content
+  });
+}
+export default /*#__PURE__*/React.memo(AccountCard);

package/lib/module/components/AppBar/AppBar.js

@@ -42,12 +42,13 @@ export default 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
   };
@@ -110,8 +111,17 @@ export default function AppBar({
     style: actionsStyle,
     children: cloneChildrenWithModes(React.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__*/_jsxs(View, {
-    style: [containerStyle, style],
+    style: [wrapperStyle, style],
     accessibilityRole: "header",
     accessibilityLabel: undefined,
     ...(accessibilityHint ? {
@@ -126,15 +136,11 @@ export default function AppBar({
       children: processedLeading
     }), processedMiddle && /*#__PURE__*/_jsx(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/module/components/CardBankAccount/CardBankAccount.js

@@ -1,6 +1,6 @@
 "use strict";
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
@@ -18,6 +18,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') {
@@ -56,10 +64,17 @@ function CardBankAccount({
   buttonLabel = 'Button',
   onButtonPress,
   footer,
-  modes = EMPTY_MODES,
+  modes: propModes = 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 = useMemo(() => propModes === EMPTY_MODES ? DEFAULT_MODES : {
+    ...DEFAULT_MODES,
+    ...propModes
+  }, [propModes]);
   const background = getVariableByName('bankAccountCard/background', modes) ?? '#ffffff';
   const radius = toNumber(getVariableByName('bankAccountCard/radius', modes), 16);
   const paddingHorizontal = toNumber(getVariableByName('bankAccountCard/padding/horizontal', modes), 12);

package/lib/module/components/CheckboxItem/CheckboxItem.js

@@ -5,12 +5,15 @@ import { View, Text, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import Checkbox from '../Checkbox/Checkbox';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * CheckboxItem composes a `Checkbox`, a label and an optional `endSlot` into a
  * 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.
  *
@@ -25,6 +28,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *   label="Fixed deposit • 0245"
  *   checked={checked}
  *   onValueChange={setChecked}
+ *   control="leading"
  *   modes={{ 'Color Mode': 'Light' }}
  * />
  * ```
@@ -35,6 +39,7 @@ function CheckboxItem({
   onValueChange,
   disabled = false,
   label = 'Fixed deposit • 0245',
+  control = 'leading',
   endSlot,
   endSlotWidth = 80,
   modes = EMPTY_MODES,
@@ -42,6 +47,7 @@ function CheckboxItem({
   labelStyle,
   accessibilityLabel
 }) {
+  const isTrailing = control === 'trailing';
   const isControlled = controlledChecked !== undefined;
   const [internalChecked, setInternalChecked] = useState(defaultChecked);
   const isChecked = isControlled ? controlledChecked : internalChecked;
@@ -80,7 +86,35 @@ function CheckboxItem({
     fontWeight: labelFontWeight
   };
   const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
-  return /*#__PURE__*/_jsxs(Pressable, {
+  const checkboxNode = /*#__PURE__*/_jsx(Checkbox, {
+    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__*/_jsx(Text, {
+    style: [resolvedLabelStyle, labelStyle],
+    selectable: false,
+    children: label
+  }) : /*#__PURE__*/_jsx(View, {
+    style: {
+      flex: 1,
+      minWidth: 0
+    },
+    children: label
+  }) : null;
+  const endSlotNode = endSlot ? /*#__PURE__*/_jsx(View, {
+    style: {
+      width: endSlotWidth,
+      flexShrink: 0,
+      alignItems: 'stretch'
+    },
+    children: cloneChildrenWithModes(endSlot, modes)
+  }) : null;
+  return /*#__PURE__*/_jsx(Pressable, {
     style: [containerStyle, style],
     onPress: handleToggle,
     disabled: disabled,
@@ -90,30 +124,11 @@ function CheckboxItem({
       disabled
     },
     accessibilityLabel: a11yLabel,
-    children: [/*#__PURE__*/_jsx(Checkbox, {
-      checked: isChecked,
-      disabled: disabled,
-      onValueChange: handleToggle,
-      modes: modes,
-      accessibilityLabel: a11yLabel
-    }), label != null && label !== false ? typeof label === 'string' || typeof label === 'number' ? /*#__PURE__*/_jsx(Text, {
-      style: [resolvedLabelStyle, labelStyle],
-      selectable: false,
-      children: label
-    }) : /*#__PURE__*/_jsx(View, {
-      style: {
-        flex: 1,
-        minWidth: 0
-      },
-      children: label
-    }) : null, endSlot ? /*#__PURE__*/_jsx(View, {
-      style: {
-        width: endSlotWidth,
-        flexShrink: 0,
-        alignItems: 'stretch'
-      },
-      children: cloneChildrenWithModes(endSlot, modes)
-    }) : null]
+    children: isTrailing ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [endSlotNode, labelNode, checkboxNode]
+    }) : /*#__PURE__*/_jsxs(_Fragment, {
+      children: [checkboxNode, labelNode, endSlotNode]
+    })
   });
 }
 export default CheckboxItem;

package/lib/module/components/Dropdown/Dropdown.js

@@ -0,0 +1,206 @@
+"use strict";
+
+import React, { useCallback, useMemo, useState } from 'react';
+import { Platform, Pressable, ScrollView, Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Icon from '../../icons/Icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const IS_WEB = Platform.OS === 'web';
+
+// ---------------------------------------------------------------------------
+// DropdownItem
+// ---------------------------------------------------------------------------
+
+function useDropdownItemTokens(modes) {
+  return 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 = getVariableByName('dropdownItem/background', {
+      ...modes,
+      'Dropdown Item State': 'Idle'
+    }) || '#ffffff';
+    const selectedBackground = getVariableByName('dropdownItem/background', {
+      ...modes,
+      'Dropdown Item State': 'Selected'
+    }) || '#f5f5f5';
+    const foreground = getVariableByName('dropdownItem/foreground', modes) || '#000000';
+    const fontFamily = getVariableByName('dropdownItem/fontFamily', modes) || 'JioType Var';
+    const fontSize = parseInt(getVariableByName('dropdownItem/fontSize', modes), 10) || 16;
+    const fontWeight = getVariableByName('dropdownItem/fontWeight', modes) || '400';
+    const lineHeight = parseInt(getVariableByName('dropdownItem/lineHeight', modes), 10) || 19;
+    const gap = parseInt(getVariableByName('dropdownItem/gap', modes), 10) || 8;
+    const paddingHorizontal = parseInt(getVariableByName('dropdownItem/padding/horizontal', modes), 10) || 12;
+    const paddingVertical = parseInt(getVariableByName('dropdownItem/padding/vertical', modes), 10) || 12;
+    return {
+      idleBackground,
+      selectedBackground,
+      foreground,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      gap,
+      paddingHorizontal,
+      paddingVertical
+    };
+  }, [modes]);
+}
+export function DropdownItem({
+  label,
+  value = null,
+  selected = false,
+  disabled = false,
+  leading,
+  trailing,
+  onPress,
+  children,
+  modes: propModes = EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  accessibilityHint
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const tokens = useDropdownItemTokens(modes);
+  const [isHovered, setIsHovered] = useState(false);
+  const handlePress = useCallback(() => {
+    if (disabled) return;
+    onPress?.(value);
+  }, [disabled, onPress, value]);
+  const containerStyle = 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 ? cloneChildrenWithModes(React.Children.toArray(leading), modes) : null;
+  const customTrailing = trailing ? cloneChildrenWithModes(React.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 = useCallback(() => {
+    if (IS_WEB && !disabled) setIsHovered(true);
+  }, [disabled]);
+  const handleHoverOut = useCallback(() => {
+    if (IS_WEB) setIsHovered(false);
+  }, []);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    onPress: handlePress,
+    disabled: disabled,
+    onHoverIn: handleHoverIn,
+    onHoverOut: handleHoverOut,
+    style: containerStyle,
+    ...a11yProps,
+    children: [processedLeading, children != null ? children : /*#__PURE__*/_jsx(Text, {
+      style: [textStyle, labelStyle],
+      numberOfLines: 1,
+      children: label
+    }), customTrailing, showDefaultCheck && /*#__PURE__*/_jsx(Icon, {
+      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.
+ */
+export function Dropdown({
+  children,
+  maxHeight,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const radius = parseInt(getVariableByName('dropdown/radius', modes), 10) || 8;
+  const background = getVariableByName('dropdown/background', modes) || '#ffffff';
+  const shadowColor = getVariableByName('dropdown/shadow/color', modes) || 'rgba(0, 0, 0, 0.08)';
+  const shadowOffsetX = parseInt(getVariableByName('dropdown/shadow/offsetX', modes), 10) || 0;
+  const shadowOffsetY = parseInt(getVariableByName('dropdown/shadow/offsetY', modes), 10) || 4;
+  const shadowBlur = parseInt(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__*/_jsx(View, {
+    style: {
+      flexDirection: 'column'
+    },
+    children: cloneChildrenWithModes(children, modes)
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "menu",
+    accessibilityLabel: accessibilityLabel || 'Dropdown menu',
+    children: maxHeight != null ? /*#__PURE__*/_jsx(ScrollView, {
+      style: {
+        maxHeight
+      },
+      showsVerticalScrollIndicator: true,
+      keyboardShouldPersistTaps: "handled",
+      children: content
+    }) : content
+  });
+}
+export default Dropdown;