@coinbase/cds-mobile 9.9.0 → 9.10.1

package/esm/__stories__/SizeComposition.stories.js

@@ -0,0 +1,237 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { useMemo, useState } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { sampleTabs } from '@coinbase/cds-common/internal/data/tabs';
+import { gutter } from '@coinbase/cds-common/tokens/sizing';
+import { Combobox } from '../alpha/combobox/Combobox';
+import { Select } from '../alpha/select/Select';
+import { SelectChip } from '../alpha/select-chip/SelectChip';
+import { TabbedChips } from '../alpha/tabbed-chips/TabbedChips';
+import { Button } from '../buttons/Button';
+import { IconButton } from '../buttons/IconButton';
+import { InputChip } from '../chips/InputChip';
+import { SearchInput } from '../controls/SearchInput';
+import { TextInput } from '../controls/TextInput';
+import { DatePicker } from '../dates/DatePicker';
+import { Example, ExampleScreen } from '../examples/ExampleScreen';
+import { useTheme } from '../hooks/useTheme';
+import { HStack } from '../layout/HStack';
+import { VStack } from '../layout/VStack';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const dateSharedProps = {
+  invalidDateError: 'Please enter a valid date',
+  disabledDateError: 'Date unavailable',
+  requiredError: 'This field is required'
+};
+const selectOptions = [{
+  value: '1',
+  label: 'Apple'
+}, {
+  value: '2',
+  label: 'Banana'
+}, {
+  value: '3',
+  label: 'Cherry'
+}];
+const chipSelectOptions = [{
+  value: 'usd',
+  label: 'USD'
+}, {
+  value: 'eur',
+  label: 'EUR'
+}, {
+  value: 'btc',
+  label: 'BTC'
+}];
+const tabbedChipTabs = sampleTabs.slice(0, 4);
+
+/** Spacing token used for the gap between every composed control. */
+const compositionGap = 1;
+
+/**
+ * Minimum controls per wrapped row, so each row always pairs at least two
+ * controls and their natural heights can be compared against each other.
+ */
+const controlsPerRow = 2;
+
+/**
+ * Derives control widths from the live screen width minus the horizontal
+ * padding `ExampleScreen` applies, so fixed-width controls always wrap into
+ * rows of `controlsPerRow` instead of overflowing narrow devices.
+ */
+const useCompositionWidths = () => {
+  const {
+    width: screenWidth
+  } = useWindowDimensions();
+  const theme = useTheme();
+  return useMemo(() => {
+    const contentWidth = screenWidth - theme.space[gutter] * 2;
+    const totalGap = theme.space[compositionGap] * (controlsPerRow - 1);
+    return {
+      contentWidth,
+      controlWidth: Math.floor((contentWidth - totalGap) / controlsPerRow)
+    };
+  }, [screenWidth, theme]);
+};
+const InputRow = _ref => {
+  let {
+    size
+  } = _ref;
+  const {
+    controlWidth
+  } = useCompositionWidths();
+  const [selectValue, setSelectValue] = useState('1');
+  const [comboboxValue, setComboboxValue] = useState('1');
+  const [text, setText] = useState('');
+  const [search, setSearch] = useState('');
+  const [pickerDate, setPickerDate] = useState(null);
+  const [pickerError, setPickerError] = useState(null);
+  const selectStyle = useMemo(() => ({
+    width: controlWidth
+  }), [controlWidth]);
+  return /*#__PURE__*/_jsxs(HStack, {
+    alignItems: "flex-end",
+    flexWrap: "wrap",
+    gap: compositionGap,
+    children: [/*#__PURE__*/_jsx(Select, {
+      label: "Select",
+      onChange: setSelectValue,
+      options: selectOptions,
+      placeholder: "Choose",
+      size: size,
+      style: selectStyle,
+      value: selectValue
+    }), /*#__PURE__*/_jsx(Combobox, {
+      label: "Combobox",
+      onChange: setComboboxValue,
+      options: selectOptions,
+      placeholder: "Search",
+      size: size,
+      style: selectStyle,
+      type: "single",
+      value: comboboxValue
+    }), /*#__PURE__*/_jsx(TextInput, {
+      label: "Text",
+      onChangeText: setText,
+      placeholder: "Name",
+      size: size,
+      value: text,
+      width: controlWidth
+    }), /*#__PURE__*/_jsx(DatePicker, _extends({}, dateSharedProps, {
+      date: pickerDate,
+      error: pickerError,
+      helperText: "",
+      label: "Date",
+      onChangeDate: setPickerDate,
+      onErrorDate: setPickerError,
+      openCalendarAccessibilityLabel: "Open date picker calendar",
+      size: size,
+      width: controlWidth
+    })), /*#__PURE__*/_jsx(SearchInput, {
+      accessibilityLabel: "Search",
+      onChangeText: setSearch,
+      onClear: () => setSearch(''),
+      placeholder: "Search",
+      size: size,
+      value: search,
+      width: controlWidth
+    })]
+  });
+};
+const ChipMixRow = _ref2 => {
+  let {
+    chipSize,
+    controlSize
+  } = _ref2;
+  const {
+    contentWidth,
+    controlWidth
+  } = useCompositionWidths();
+  const [activeTab, setActiveTab] = useState(tabbedChipTabs[0]);
+  const [chipSelectValue, setChipSelectValue] = useState('usd');
+  const [text, setText] = useState('');
+  const [search, setSearch] = useState('');
+  const includeTextInputs = chipSize === 's';
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: compositionGap,
+    children: [/*#__PURE__*/_jsx(TabbedChips, {
+      activeTab: activeTab,
+      onChange: setActiveTab,
+      size: chipSize,
+      tabs: tabbedChipTabs,
+      width: contentWidth
+    }), /*#__PURE__*/_jsxs(HStack, {
+      alignItems: "center",
+      flexWrap: "wrap",
+      gap: compositionGap,
+      children: [/*#__PURE__*/_jsx(InputChip, {
+        onPress: () => {},
+        size: chipSize,
+        children: "USD"
+      }), /*#__PURE__*/_jsx(SelectChip, {
+        onChange: setChipSelectValue,
+        options: chipSelectOptions,
+        placeholder: "Asset",
+        size: chipSize,
+        value: chipSelectValue
+      }), /*#__PURE__*/_jsx(Button, {
+        size: controlSize,
+        children: "Action"
+      }), /*#__PURE__*/_jsx(IconButton, {
+        accessibilityLabel: "Settings",
+        name: "gear",
+        size: controlSize
+      }), includeTextInputs && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(TextInput, {
+          accessibilityLabel: "Filter",
+          onChangeText: setText,
+          placeholder: "Filter",
+          size: "s",
+          value: text,
+          width: controlWidth
+        }), /*#__PURE__*/_jsx(SearchInput, {
+          accessibilityLabel: "Search",
+          onChangeText: setSearch,
+          onClear: () => setSearch(''),
+          placeholder: "Search",
+          size: "s",
+          value: search,
+          width: controlWidth
+        })]
+      })]
+    })]
+  });
+};
+
+/**
+ * Side-by-side composition of sized controls to verify natural height alignment in a row.
+ */
+const SizeCompositionScreen = () => /*#__PURE__*/_jsxs(ExampleScreen, {
+  children: [/*#__PURE__*/_jsx(Example, {
+    title: "Inputs \u2014 size=\"s\"",
+    children: /*#__PURE__*/_jsx(InputRow, {
+      size: "s"
+    })
+  }), /*#__PURE__*/_jsx(Example, {
+    title: "Inputs \u2014 size=\"m\"",
+    children: /*#__PURE__*/_jsx(InputRow, {
+      size: "m"
+    })
+  }), /*#__PURE__*/_jsx(Example, {
+    title: "Inputs \u2014 default (size l)",
+    children: /*#__PURE__*/_jsx(InputRow, {})
+  }), /*#__PURE__*/_jsx(Example, {
+    title: "Chips + small controls \u2014 size=\"s\"",
+    children: /*#__PURE__*/_jsx(ChipMixRow, {
+      chipSize: "s",
+      controlSize: "s"
+    })
+  }), /*#__PURE__*/_jsx(Example, {
+    title: "Chips + small controls \u2014 size=\"xs\"",
+    children: /*#__PURE__*/_jsx(ChipMixRow, {
+      chipSize: "xs",
+      controlSize: "xs"
+    })
+  })]
+});
+export default SizeCompositionScreen;

package/esm/alpha/combobox/Combobox.js

@@ -154,8 +154,8 @@ const ComboboxBase = /*#__PURE__*/memo(_ref2 => {
               paddingBottom: safeBottomPadding
             },
             children: /*#__PURE__*/_jsx(Button, {
-              compact: true,
               onPress: handleClose,
+              size: "s",
               children: closeButtonLabel
             })
           })

package/esm/alpha/combobox/__stories__/Combobox.stories.js

@@ -592,6 +592,37 @@ const DisabledExample = () => {
     value: value
   });
 };
+const SizesExample = () => {
+  const [value, setValue] = useState('1');
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 4,
+    children: [/*#__PURE__*/_jsx(Combobox, {
+      label: "Small (s)",
+      onChange: setValue,
+      options: singleSelectOptions,
+      placeholder: "Search fruits...",
+      size: "s",
+      type: "single",
+      value: value
+    }), /*#__PURE__*/_jsx(Combobox, {
+      label: "Medium (m)",
+      onChange: setValue,
+      options: singleSelectOptions,
+      placeholder: "Search fruits...",
+      size: "m",
+      type: "single",
+      value: value
+    }), /*#__PURE__*/_jsx(Combobox, {
+      label: "Large (l) - default",
+      onChange: setValue,
+      options: singleSelectOptions,
+      placeholder: "Search fruits...",
+      size: "l",
+      type: "single",
+      value: value
+    })]
+  });
+};
 const CompactExample = () => {
   const {
     value,
@@ -1232,6 +1263,9 @@ const Default = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Disabled state",
       children: /*#__PURE__*/_jsx(DisabledExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Sizes",
+      children: /*#__PURE__*/_jsx(SizesExample, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Compact size",
       children: /*#__PURE__*/_jsx(CompactExample, {})

package/esm/alpha/select/DefaultSelectControl.js

@@ -1,4 +1,4 @@
-const _excluded = ["ref", "type", "options", "value", "onChange", "open", "placeholder", "disabled", "readOnly", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "align", "font", "labelColor", "labelFont", "bordered", "borderWidth", "focusedBorderWidth", "inputBackground", "borderRadius", "maxSelectedOptionsToShow", "accessibilityHint", "accessibilityLabel", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "style", "styles", "onBlur", "onFocus"];
+const _excluded = ["ref", "type", "options", "value", "onChange", "open", "placeholder", "disabled", "readOnly", "setOpen", "variant", "helperText", "label", "labelVariant", "contentNode", "startNode", "endNode", "compact", "size", "align", "font", "labelColor", "labelFont", "bordered", "borderWidth", "focusedBorderWidth", "inputBackground", "borderRadius", "maxSelectedOptionsToShow", "accessibilityHint", "accessibilityLabel", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "style", "styles", "onBlur", "onFocus"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import { memo, useCallback, useMemo } from 'react';
@@ -15,7 +15,25 @@ import { VStack } from '../../layout/VStack';
 import { AnimatedCaret } from '../../motion/AnimatedCaret';
 import { Text } from '../../typography/Text';
 import { isSelectOptionGroup } from './Select';
+import { defaultSelectSize } from './types';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const selectSizeVerticalSpace = {
+  s: 1,
+  m: 1.5,
+  l: 2
+};
+
+// A multi-select's selected-value chips add their own height, so the vertical space is
+// tightened per size to keep the overall field height aligned with the single-select scale.
+const multiSelectVerticalSpace = {
+  s: 0.5,
+  m: 1,
+  l: 1.5
+};
+
+// Multi-select value chips always use the compact `xs` size (even at size `l`) so several chips —
+// and a stacked inside label — stay within the field's natural height.
+const multiSelectValueChipSize = 'xs';
 const variantColor = {
   foreground: 'fg',
   positive: 'fgPositive',
@@ -44,6 +62,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(_ref => {
       startNode,
       endNode: customEndNode,
       compact,
+      size,
       align = 'start',
       font = 'body',
       labelColor = 'fg',
@@ -70,11 +89,24 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(_ref => {
     setOpen(currentOpen => !currentOpen);
   }, [isInteractionBlocked, setOpen]);
   const theme = useTheme();
-  // When compact, labelVariant is ignored
-  const labelVariant = compact ? undefined : labelVariantProp;
   const isMultiSelect = type === 'multi';
-  const shouldShowCompactLabel = compact && label && !isMultiSelect;
-  const shouldShowInsideLabel = labelVariant === 'inside' && !compact && label;
+  // `size` wins over the deprecated `compact` for geometry.
+  const resolvedSize = size != null ? size : compact ? 's' : defaultSelectSize;
+  // The deprecated `compact` only forces label placement when the caller did NOT set an explicit
+  // `size`; once `size` is provided, placement follows the normal `labelVariant` rules.
+  const useLegacyCompact = Boolean(compact) && size === undefined;
+  const labelVariant = useLegacyCompact ? undefined : labelVariantProp;
+  const hasLabel = !!label;
+
+  // Label placement mirrors TextInput: `compact` (set alone) forces an inside label; otherwise
+  // placement follows `labelVariant`. An inside label sits horizontally in the start slot at every
+  // size EXCEPT `l`, where it stacks vertically above the value. Multi-select is the one exception:
+  // its value chips can't share a row with an inline label, so legacy compact multi-select keeps
+  // its label outside (only an explicit `inside` labelVariant places a multi-select's label inside).
+  const isCompactLabel = useLegacyCompact && !isMultiSelect;
+  const wantsInsideLabel = hasLabel && (isCompactLabel || labelVariant === 'inside');
+  const insideVerticalLabel = wantsInsideLabel && !isCompactLabel && resolvedSize === 'l';
+  const insideHorizontalLabel = wantsInsideLabel && !insideVerticalLabel;
   const hasValue = value !== null && !(Array.isArray(value) && value.length === 0);
 
   // Map of options to their values
@@ -149,7 +181,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(_ref => {
     children: helperText
   }) : helperText, [helperText, variant, styles == null ? void 0 : styles.controlHelperTextNode]);
   const labelNode = useMemo(() => {
-    if (shouldShowInsideLabel || shouldShowCompactLabel) return null;
+    if (insideVerticalLabel || insideHorizontalLabel) return null;
     if (typeof label === 'string') {
       return /*#__PURE__*/_jsx(InputLabel, {
         color: labelColor,
@@ -160,20 +192,24 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(_ref => {
       });
     }
     return label;
-  }, [shouldShowInsideLabel, shouldShowCompactLabel, label, labelColor, labelFont, styles == null ? void 0 : styles.controlLabelNode]);
+  }, [insideVerticalLabel, insideHorizontalLabel, label, labelColor, labelFont, styles == null ? void 0 : styles.controlLabelNode]);
   const inlineLabelNode = useMemo(() => {
-    if (!shouldShowInsideLabel && !shouldShowCompactLabel) return null;
+    if (!insideVerticalLabel && !insideHorizontalLabel) return null;
     if (typeof label === 'string') {
       return /*#__PURE__*/_jsx(InputLabel, {
         color: labelColor,
-        font: labelFont,
+        font: labelFont
+        // An inside label — horizontal or vertically stacked — is kept to a single line so a
+        // long label can't wrap and stretch the field past the height its size defines.
+        ,
+        numberOfLines: 1,
         paddingY: 0,
         style: styles == null ? void 0 : styles.controlLabelNode,
         children: label
       });
     }
     return label;
-  }, [shouldShowInsideLabel, shouldShowCompactLabel, label, labelColor, labelFont, styles == null ? void 0 : styles.controlLabelNode]);
+  }, [insideVerticalLabel, insideHorizontalLabel, label, labelColor, labelFont, styles == null ? void 0 : styles.controlLabelNode]);
   const valueAlignment = useMemo(() => align === 'end' ? 'flex-end' : align === 'center' ? 'center' : 'flex-start', [align]);
   const valueNode = useMemo(() => {
     if (hasValue && isMultiSelect) {
@@ -190,7 +226,6 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(_ref => {
           var _option$value, _ref6, _ref7, _option$label2;
           const accessibilityLabel = typeof option.label === 'string' ? option.label : typeof option.description === 'string' ? option.description : (_option$value = option.value) != null ? _option$value : '';
           return /*#__PURE__*/_jsx(InputChip, {
-            compact: true,
             accessibilityLabel: removeSelectedOptionAccessibilityLabel + " " + accessibilityLabel,
             borderWidth: 0,
             disabled: disabled || option.disabled,
@@ -200,13 +235,14 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(_ref => {
               event == null || event.stopPropagation();
               onChange == null || onChange(option.value);
             },
+            size: multiSelectValueChipSize,
             children: (_ref6 = (_ref7 = (_option$label2 = option.label) != null ? _option$label2 : option.description) != null ? _ref7 : option.value) != null ? _ref6 : ''
           }, option.value);
         }), value.length - maxSelectedOptionsToShow > 0 && /*#__PURE__*/_jsx(InputChip, {
-          compact: true,
           borderWidth: 0,
           end: null,
           invertColorScheme: false,
+          size: multiSelectValueChipSize,
           children: "+" + (value.length - maxSelectedOptionsToShow) + " " + hiddenSelectedOptionsLabel
         })]
       });
@@ -251,12 +287,12 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(_ref => {
           paddingEnd: 2,
           style: styles == null ? void 0 : styles.controlStartNode,
           children: startNode
-        }), shouldShowCompactLabel ? /*#__PURE__*/_jsx(HStack, {
+        }), insideHorizontalLabel ? /*#__PURE__*/_jsx(HStack, {
           alignItems: "center",
           maxWidth: "40%",
           paddingEnd: 1,
           children: inlineLabelNode
-        }) : null, shouldShowInsideLabel ? /*#__PURE__*/_jsxs(VStack, {
+        }) : null, insideVerticalLabel ? /*#__PURE__*/_jsxs(VStack, {
           flexGrow: 1,
           minWidth: 0,
           width: "100%",
@@ -278,7 +314,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(_ref => {
         })]
       })
     })
-  }), [ref, accessibilityHint, computedControlAccessibilityLabel, disabled, onBlur, onFocus, styles == null ? void 0 : styles.controlInputNode, styles == null ? void 0 : styles.controlStartNode, styles == null ? void 0 : styles.controlValueNode, startNode, shouldShowCompactLabel, shouldShowInsideLabel, inlineLabelNode, valueAlignment, valueNode, contentNode, handleToggleOpen]);
+  }), [ref, accessibilityHint, computedControlAccessibilityLabel, disabled, onBlur, onFocus, styles == null ? void 0 : styles.controlInputNode, styles == null ? void 0 : styles.controlStartNode, styles == null ? void 0 : styles.controlValueNode, startNode, insideHorizontalLabel, insideVerticalLabel, inlineLabelNode, valueAlignment, valueNode, contentNode, handleToggleOpen]);
   const endNode = useMemo(() => /*#__PURE__*/_jsx(Pressable, {
     accessible: customEndNode ? true : false,
     disabled: disabled,
@@ -294,12 +330,25 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(_ref => {
       })
     })
   }), [styles == null ? void 0 : styles.controlEndNode, disabled, customEndNode, open, handleToggleOpen]);
-  const inputStackStyles = useMemo(() => ({
-    paddingTop: compact || labelVariant === 'inside' ? theme.space[1] : theme.space[2],
-    paddingBottom: compact || labelVariant === 'inside' ? theme.space[1] : theme.space[2],
-    paddingLeft: theme.space[2],
-    paddingRight: theme.space[2]
-  }), [compact, labelVariant, theme.space]);
+  const inputStackStyles = useMemo(() => {
+    let verticalSpace;
+    if (insideVerticalLabel) {
+      // A vertically-stacked inside label (size `l`) tightens the padding so the stacked label +
+      // value fit the same field height an outside label produces. A multi-select with chips
+      // (taller than a single text line) tightens further.
+      verticalSpace = isMultiSelect && hasValue ? 0.25 : 0.75;
+    } else if (isMultiSelect && hasValue) {
+      verticalSpace = multiSelectVerticalSpace[resolvedSize];
+    } else {
+      verticalSpace = selectSizeVerticalSpace[resolvedSize];
+    }
+    return {
+      paddingTop: theme.space[verticalSpace],
+      paddingBottom: theme.space[verticalSpace],
+      paddingLeft: theme.space[2],
+      paddingRight: theme.space[2]
+    };
+  }, [insideVerticalLabel, resolvedSize, isMultiSelect, hasValue, theme.space]);
   return /*#__PURE__*/_jsx(InputStack, _extends({
     borderFocusedStyle: borderFocusedStyle,
     borderRadius: borderRadius,
@@ -313,7 +362,7 @@ export const DefaultSelectControlComponent = /*#__PURE__*/memo(_ref => {
     inputBackground: inputBackground,
     inputNode: inputNode,
     labelNode: labelNode,
-    labelVariant: labelVariant,
+    labelVariant: insideVerticalLabel ? 'inside' : 'outside',
     onBlur: onBlur,
     onFocus: onFocus,
     style: style,

package/esm/alpha/select/DefaultSelectDropdown.js

@@ -121,7 +121,6 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(_ref => {
     compact: compact,
     disabled: disabled,
     end: end != null ? end : /*#__PURE__*/_jsx(Button, {
-      compact: true,
       transparent: true
       // This button is not accessible to users using screen readers since it's
       // the child of a button. Clearing the a11y label ensures it isn't announced
@@ -130,7 +129,11 @@ const DefaultSelectDropdownComponent = /*#__PURE__*/memo(_ref => {
       accessibilityLabel: "",
       accessible: false,
       flush: "end",
-      onPress: handleClearAll,
+      onPress: handleClearAll
+      // Intentionally always the densest size: the dropdown's inline affordances stay
+      // compact regardless of the control's size.
+      ,
+      size: "s",
       children: clearAllLabel
     }),
     indeterminate: indeterminate,

package/esm/alpha/select/Select.js

@@ -1,5 +1,5 @@
 const _excluded = ["ref"],
-  _excluded2 = ["value", "type", "options", "onChange", "open", "setOpen", "disabled", "readOnly", "disableClickOutsideClose", "placeholder", "helperText", "compact", "label", "labelVariant", "accessibilityLabel", "accessibilityHint", "accessibilityRoles", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "defaultOpen", "startNode", "endNode", "variant", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessory", "media", "end", "align", "font", "bordered", "borderWidth", "focusedBorderWidth", "inputBackground", "labelColor", "labelFont", "borderRadius", "SelectOptionComponent", "SelectAllOptionComponent", "SelectDropdownComponent", "SelectControlComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "style", "styles", "testID"];
+  _excluded2 = ["value", "type", "options", "onChange", "open", "setOpen", "disabled", "readOnly", "disableClickOutsideClose", "placeholder", "helperText", "compact", "size", "label", "labelVariant", "accessibilityLabel", "accessibilityHint", "accessibilityRoles", "selectAllLabel", "emptyOptionsLabel", "clearAllLabel", "hideSelectAll", "defaultOpen", "startNode", "endNode", "variant", "maxSelectedOptionsToShow", "hiddenSelectedOptionsLabel", "removeSelectedOptionAccessibilityLabel", "accessory", "media", "end", "align", "font", "bordered", "borderWidth", "focusedBorderWidth", "inputBackground", "labelColor", "labelFont", "borderRadius", "SelectOptionComponent", "SelectAllOptionComponent", "SelectDropdownComponent", "SelectControlComponent", "SelectEmptyDropdownContentsComponent", "SelectOptionGroupComponent", "style", "styles", "testID"];
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { memo, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { View } from 'react-native';
@@ -10,7 +10,7 @@ import { DefaultSelectDropdown } from './DefaultSelectDropdown';
 import { DefaultSelectEmptyDropdownContents } from './DefaultSelectEmptyDropdownContents';
 import { DefaultSelectOption } from './DefaultSelectOption';
 import { DefaultSelectOptionGroup } from './DefaultSelectOptionGroup';
-import { isSelectOptionGroup } from './types';
+import { defaultSelectSize, isSelectOptionGroup } from './types';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const defaultAccessibilityRoles = {
   option: 'menuitem'
@@ -37,6 +37,7 @@ const SelectBase = /*#__PURE__*/memo(_ref => {
       placeholder,
       helperText,
       compact,
+      size,
       label,
       labelVariant,
       accessibilityLabel = typeof label === 'string' ? label : 'Select control',
@@ -76,6 +77,10 @@ const SelectBase = /*#__PURE__*/memo(_ref => {
       testID
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
+  // The dropdown keeps a binary density toggle instead of the t-shirt scale, so Select owns the
+  // translation: only the smallest control size renders a compact dropdown. The control still
+  // receives the raw `compact` because it needs it for legacy label placement.
+  const dropdownCompact = (size != null ? size : compact ? 's' : defaultSelectSize) === 's';
   const [openInternal, setOpenInternal] = useState(defaultOpen != null ? defaultOpen : false);
   const open = openProp != null ? openProp : openInternal;
   const setOpen = setOpenProp != null ? setOpenProp : setOpenInternal;
@@ -145,6 +150,7 @@ const SelectBase = /*#__PURE__*/memo(_ref => {
       readOnly: readOnly,
       removeSelectedOptionAccessibilityLabel: removeSelectedOptionAccessibilityLabel,
       setOpen: setOpen,
+      size: size,
       startNode: startNode,
       style: styles == null ? void 0 : styles.control,
       styles: controlStyles,
@@ -159,7 +165,7 @@ const SelectBase = /*#__PURE__*/memo(_ref => {
       accessibilityRoles: accessibilityRoles,
       accessory: accessory,
       clearAllLabel: clearAllLabel,
-      compact: compact,
+      compact: dropdownCompact,
       controlRef: containerRef,
       disabled: disabled,
       emptyOptionsLabel: emptyOptionsLabel,

package/esm/alpha/select/__stories__/AlphaSelect.stories.js

@@ -350,6 +350,34 @@ const CompactExample = () => {
     value: value
   });
 };
+const SizesExample = () => {
+  const [value, setValue] = useState('1');
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Select, {
+      label: "Small (s)",
+      onChange: setValue,
+      options: exampleOptions,
+      placeholder: "Empty value",
+      size: "s",
+      value: value
+    }), /*#__PURE__*/_jsx(Select, {
+      label: "Medium (m)",
+      onChange: setValue,
+      options: exampleOptions,
+      placeholder: "Empty value",
+      size: "m",
+      value: value
+    }), /*#__PURE__*/_jsx(Select, {
+      label: "Large (l) - default",
+      onChange: setValue,
+      options: exampleOptions,
+      placeholder: "Empty value",
+      size: "l",
+      value: value
+    })]
+  });
+};
 const InsideLabelVariantExample = () => {
   const [value, setValue] = useState('1');
   return /*#__PURE__*/_jsx(Select, {
@@ -1391,6 +1419,9 @@ const SelectV3Screen = () => {
     }), /*#__PURE__*/_jsx(Example, {
       title: "Compact",
       children: /*#__PURE__*/_jsx(CompactExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Sizes",
+      children: /*#__PURE__*/_jsx(SizesExample, {})
     }), /*#__PURE__*/_jsx(Example, {
       title: "Inside label variant",
       children: /*#__PURE__*/_jsx(InsideLabelVariantExample, {})

package/esm/alpha/select/types.js

@@ -1,3 +1,11 @@
+/**
+ * T-shirt size scale for the Select control. The Figma Select component set exposes
+ * three sizes (`s | m | l`); there is intentionally no `xs`.
+ */
+
+/** Size the Select control resolves to when neither `size` nor the deprecated `compact` is set. */
+export const defaultSelectSize = 'l';
+
 /**
  * Configuration for a single option in the Select component
  */

package/esm/alpha/select-chip/SelectChip.js

@@ -1,5 +1,5 @@
 const _excluded = ["ref"],
-  _excluded2 = ["invertColorScheme", "numberOfLines", "maxWidth", "displayValue"];
+  _excluded2 = ["invertColorScheme", "numberOfLines", "maxWidth", "displayValue", "size", "compact"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 import React, { memo, useCallback } from 'react';
@@ -21,17 +21,24 @@ const SelectChipComponent = /*#__PURE__*/memo(_ref => {
       invertColorScheme,
       numberOfLines,
       maxWidth,
-      displayValue
+      displayValue,
+      size,
+      compact
     } = mergedProps,
     props = _objectWithoutPropertiesLoose(mergedProps, _excluded2);
-  const SelectChipControlComponent = useCallback(props => {
-    return /*#__PURE__*/_jsx(SelectChipControl, _extends({
+  // Select doesn't pass the chip-specific props (size/compact/displayValue/etc.) down to the
+  // control, so they're injected here. They're listed AFTER the `controlProps` spread so the
+  // chip-level values win — matching the web SelectChip wrapper.
+  const SelectChipControlComponent = useCallback(controlProps => {
+    return /*#__PURE__*/_jsx(SelectChipControl, _extends({}, controlProps, {
+      compact: compact,
       displayValue: displayValue,
       invertColorScheme: invertColorScheme,
       maxWidth: maxWidth,
-      numberOfLines: numberOfLines
-    }, props));
-  }, [displayValue, invertColorScheme, maxWidth, numberOfLines]);
+      numberOfLines: numberOfLines,
+      size: size
+    }));
+  }, [displayValue, invertColorScheme, maxWidth, numberOfLines, size, compact]);
   return /*#__PURE__*/_jsx(Select, _extends({
     ref: ref,
     SelectControlComponent: SelectChipControlComponent