@coinbase/cds-mobile 8.28.2 → 8.30.0

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

@@ -0,0 +1,1019 @@
+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 { useRef, useState } from 'react';
+import { useMultiSelect } from '@coinbase/cds-common/select/useMultiSelect';
+import { Button } from '../../../buttons';
+import { Example, ExampleScreen } from '../../../examples/ExampleScreen';
+import { Icon } from '../../../icons/Icon';
+import { VStack } from '../../../layout';
+import { Text } from '../../../typography/Text';
+import { Combobox } from '../Combobox';
+import { DefaultComboboxControl } from '../DefaultComboboxControl';
+
+// Basic option sets
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const multiSelectOptions = [{
+  value: '1',
+  label: 'Option 1'
+}, {
+  value: '2',
+  label: 'Option 2'
+}, {
+  value: '3',
+  label: 'Option 3'
+}, {
+  value: '4',
+  label: 'Option 4'
+}, {
+  value: '5',
+  label: 'Option 5'
+}, {
+  value: '6',
+  label: 'Option 6'
+}, {
+  value: '7',
+  label: 'Option 7'
+}, {
+  value: '8',
+  label: 'Option 8'
+}, {
+  value: '9',
+  label: 'Option 9'
+}, {
+  value: '10',
+  label: 'Option 10'
+}, {
+  value: '11',
+  label: 'Option 11'
+}, {
+  value: '12',
+  label: 'Option 12'
+}, {
+  value: '13',
+  label: 'Option 13'
+}, {
+  value: '14',
+  label: 'Option 14'
+}, {
+  value: '15',
+  label: 'Option 15'
+}, {
+  value: '16',
+  label: 'Option 16'
+}, {
+  value: '17',
+  label: 'Option 17'
+}, {
+  value: '18',
+  label: 'Option 18'
+}, {
+  value: '19',
+  label: 'Option 19'
+}, {
+  value: '20',
+  label: 'Option 20'
+}];
+const singleSelectOptions = [{
+  value: null,
+  label: 'Remove selection'
+}, {
+  value: '1',
+  label: 'Option 1'
+}, {
+  value: '2',
+  label: 'Option 2'
+}, {
+  value: '3',
+  label: 'Option 3'
+}];
+
+// Rich option sets for various examples
+const fruitOptions = [{
+  value: 'apple',
+  label: 'Apple'
+}, {
+  value: 'banana',
+  label: 'Banana'
+}, {
+  value: 'cherry',
+  label: 'Cherry'
+}, {
+  value: 'date',
+  label: 'Date'
+}, {
+  value: 'elderberry',
+  label: 'Elderberry'
+}, {
+  value: 'fig',
+  label: 'Fig'
+}, {
+  value: 'grape',
+  label: 'Grape'
+}, {
+  value: 'honeydew',
+  label: 'Honeydew'
+}, {
+  value: 'kiwi',
+  label: 'Kiwi'
+}, {
+  value: 'lemon',
+  label: 'Lemon'
+}];
+const countryOptions = [{
+  value: 'us',
+  label: 'United States',
+  description: 'North America'
+}, {
+  value: 'ca',
+  label: 'Canada',
+  description: 'North America'
+}, {
+  value: 'mx',
+  label: 'Mexico',
+  description: 'North America'
+}, {
+  value: 'uk',
+  label: 'United Kingdom',
+  description: 'Europe'
+}, {
+  value: 'fr',
+  label: 'France',
+  description: 'Europe'
+}, {
+  value: 'de',
+  label: 'Germany',
+  description: 'Europe'
+}, {
+  value: 'jp',
+  label: 'Japan',
+  description: 'Asia'
+}, {
+  value: 'cn',
+  label: 'China',
+  description: 'Asia'
+}];
+const cryptoOptions = [{
+  value: 'btc',
+  label: 'Bitcoin',
+  description: 'BTC • Digital Gold'
+}, {
+  value: 'eth',
+  label: 'Ethereum',
+  description: 'ETH • Smart Contracts'
+}, {
+  value: 'usdc',
+  label: 'USD Coin',
+  description: 'USDC • Stablecoin'
+}, {
+  value: 'usdt',
+  label: 'Tether',
+  description: 'USDT • Stablecoin'
+}, {
+  value: 'sol',
+  label: 'Solana',
+  description: 'SOL • High Performance'
+}, {
+  value: 'ada',
+  label: 'Cardano',
+  description: 'ADA • Academic Approach'
+}];
+const teamOptions = [{
+  value: 'john',
+  label: 'John Smith',
+  description: 'Engineering'
+}, {
+  value: 'jane',
+  label: 'Jane Doe',
+  description: 'Design'
+}, {
+  value: 'bob',
+  label: 'Bob Johnson',
+  description: 'Product'
+}, {
+  value: 'alice',
+  label: 'Alice Williams',
+  description: 'Engineering'
+}, {
+  value: 'charlie',
+  label: 'Charlie Brown',
+  description: 'Marketing'
+}];
+
+// Example Components
+const DefaultExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: ['1']
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Multi Select",
+    onChange: onChange,
+    options: multiSelectOptions,
+    placeholder: "Search...",
+    type: "multi",
+    value: value
+  });
+};
+const SingleSelectExample = () => {
+  const [singleValue, setSingleValue] = useState(null);
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Single Select",
+    onChange: setSingleValue,
+    options: singleSelectOptions,
+    placeholder: "Search...",
+    value: singleValue
+  });
+};
+const NoLabelExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    onChange: onChange,
+    options: multiSelectOptions,
+    placeholder: "Search...",
+    type: "multi",
+    value: value
+  });
+};
+const InitialValuesExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: ['apple', 'banana', 'cherry']
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Pre-selected fruits",
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Search fruits...",
+    type: "multi",
+    value: value
+  });
+};
+const ControlledSearchExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  const [searchText, setSearchText] = useState('');
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsxs(Text, {
+      color: "fgMuted",
+      children: ["Current search: \"", searchText, "\""]
+    }), /*#__PURE__*/_jsx(Combobox, {
+      label: "Controlled search",
+      onChange: onChange,
+      onSearch: setSearchText,
+      options: fruitOptions,
+      placeholder: "Type to search...",
+      searchText: searchText,
+      type: "multi",
+      value: value
+    }), /*#__PURE__*/_jsx(Button, {
+      compact: true,
+      onPress: () => setSearchText('apple'),
+      children: "Set search to \"apple\""
+    })]
+  });
+};
+const WithDescriptionsExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Select countries",
+    onChange: onChange,
+    options: countryOptions,
+    placeholder: "Search countries...",
+    type: "multi",
+    value: value
+  });
+};
+const HideSearchInputExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: ['apple', 'banana', 'cherry']
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    hideSearchInput: true,
+    label: "Hide search input",
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Search...",
+    type: "multi",
+    value: value
+  });
+};
+const CryptoAssetsExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Select assets",
+    onChange: onChange,
+    options: cryptoOptions,
+    placeholder: "Search crypto...",
+    type: "multi",
+    value: value
+  });
+};
+const CustomFilterExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  const customFilterFunction = (options, searchText) => {
+    const search = searchText.toLowerCase();
+    return options.filter(option => {
+      const label = typeof option.label === 'string' ? option.label.toLowerCase() : '';
+      const description = typeof option.description === 'string' ? option.description.toLowerCase() : '';
+      return label.startsWith(search) || description.startsWith(search);
+    });
+  };
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsx(Text, {
+      color: "fgMuted",
+      fontSize: "caption",
+      children: "Only matches start of words"
+    }), /*#__PURE__*/_jsx(Combobox, {
+      filterFunction: customFilterFunction,
+      label: "Custom filter",
+      onChange: onChange,
+      options: cryptoOptions,
+      placeholder: "Type to filter...",
+      type: "multi",
+      value: value
+    })]
+  });
+};
+const DisabledExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: ['apple', 'banana']
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    disabled: true,
+    label: "Disabled combobox",
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Cannot interact...",
+    type: "multi",
+    value: value
+  });
+};
+const CompactExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    compact: true,
+    label: "Compact size",
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Compact combobox...",
+    type: "multi",
+    value: value
+  });
+};
+export const CompactSingleSelect = () => {
+  const [value, setValue] = useState(null);
+  return /*#__PURE__*/_jsx(VStack, {
+    gap: 4,
+    children: /*#__PURE__*/_jsx(Combobox, {
+      compact: true,
+      label: "Compact size",
+      onChange: setValue,
+      options: singleSelectOptions,
+      placeholder: "Compact combobox...",
+      type: "single",
+      value: value
+    })
+  });
+};
+const RegularSizeExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Regular size",
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Regular combobox...",
+    type: "multi",
+    value: value
+  });
+};
+const HelperTextExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    helperText: "Select up to 5 team members for this project",
+    label: "Team members",
+    onChange: onChange,
+    options: teamOptions,
+    placeholder: "Search team members...",
+    type: "multi",
+    value: value
+  });
+};
+const DefaultVariantExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Default",
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Default style...",
+    type: "multi",
+    value: value
+  });
+};
+const PositiveVariantExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Positive",
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Success style...",
+    type: "multi",
+    value: value,
+    variant: "positive"
+  });
+};
+const NegativeVariantExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Negative",
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Error style...",
+    type: "multi",
+    value: value,
+    variant: "negative"
+  });
+};
+const PrimaryVariantExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Primary",
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Primary style...",
+    type: "multi",
+    value: value,
+    variant: "primary"
+  });
+};
+const WithStartIconExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "With icon",
+    onChange: onChange,
+    options: cryptoOptions,
+    placeholder: "Search crypto...",
+    startNode: /*#__PURE__*/_jsx(Icon, {
+      name: "search",
+      size: "s"
+    }),
+    type: "multi",
+    value: value
+  });
+};
+const WithEndIconExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    endNode: /*#__PURE__*/_jsx(Icon, {
+      name: "filter",
+      size: "s"
+    }),
+    label: "Custom end icon",
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Custom icon...",
+    type: "multi",
+    value: value
+  });
+};
+const MaxSelectedDisplayExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig', 'grape']
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Limited display",
+    maxSelectedOptionsToShow: 3,
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Shows max 3 selections...",
+    type: "multi",
+    value: value
+  });
+};
+const HiddenOptionsLabelExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: ['us', 'ca', 'mx', 'uk', 'fr', 'de']
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    hiddenSelectedOptionsLabel: "countries",
+    label: "Countries",
+    maxSelectedOptionsToShow: 3,
+    onChange: onChange,
+    options: countryOptions,
+    placeholder: "Select countries...",
+    type: "multi",
+    value: value
+  });
+};
+const SelectAllExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "With select all",
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Can select all...",
+    selectAllLabel: "Select all fruits",
+    type: "multi",
+    value: value
+  });
+};
+const ClearAllExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: ['apple', 'banana', 'cherry']
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    clearAllLabel: "Clear selection",
+    label: "With clear all",
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Can clear all...",
+    type: "multi",
+    value: value
+  });
+};
+const EmptyOptionsExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    emptyOptionsLabel: "No matching fruits found",
+    label: "Empty state",
+    onChange: onChange,
+    options: [],
+    placeholder: "No options available...",
+    type: "multi",
+    value: value
+  });
+};
+const DisabledOptionsExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  const mixedOptions = fruitOptions.map((option, index) => _extends({}, option, {
+    disabled: index % 3 === 0
+  }));
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Mixed enabled/disabled",
+    onChange: onChange,
+    options: mixedOptions,
+    placeholder: "Some options disabled...",
+    type: "multi",
+    value: value
+  });
+};
+const LongListExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  const longOptions = Array.from({
+    length: 50
+  }, (_, i) => ({
+    value: "option" + i,
+    label: "Option " + (i + 1),
+    description: "Description for option " + (i + 1)
+  }));
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Many options",
+    onChange: onChange,
+    options: longOptions,
+    placeholder: "Search from 50 options...",
+    type: "multi",
+    value: value
+  });
+};
+const ValueMonitoringExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 3,
+    children: [/*#__PURE__*/_jsx(Combobox, {
+      label: "Monitor selections",
+      onChange: onChange,
+      options: fruitOptions,
+      placeholder: "Select to see values...",
+      type: "multi",
+      value: value
+    }), /*#__PURE__*/_jsxs(VStack, {
+      background: "bgSecondary",
+      borderRadius: 400,
+      gap: 2,
+      padding: 3,
+      children: [/*#__PURE__*/_jsx(Text, {
+        fontSize: "label1",
+        fontWeight: "label1",
+        children: "Selected values:"
+      }), /*#__PURE__*/_jsx(Text, {
+        color: "fgMuted",
+        fontSize: "caption",
+        children: value.length > 0 ? value.join(', ') : 'None selected'
+      })]
+    })]
+  });
+};
+const MultipleInstancesExample = () => {
+  const fruits = useMultiSelect({
+    initialValue: []
+  });
+  const countries = useMultiSelect({
+    initialValue: []
+  });
+  const crypto = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 3,
+    children: [/*#__PURE__*/_jsx(Combobox, {
+      label: "Fruits",
+      onChange: fruits.onChange,
+      options: fruitOptions,
+      placeholder: "Select fruits...",
+      type: "multi",
+      value: fruits.value
+    }), /*#__PURE__*/_jsx(Combobox, {
+      label: "Countries",
+      onChange: countries.onChange,
+      options: countryOptions,
+      placeholder: "Select countries...",
+      type: "multi",
+      value: countries.value
+    }), /*#__PURE__*/_jsx(Combobox, {
+      label: "Cryptocurrencies",
+      onChange: crypto.onChange,
+      options: cryptoOptions,
+      placeholder: "Select crypto...",
+      type: "multi",
+      value: crypto.value
+    })]
+  });
+};
+const ImperativeRefExample = () => {
+  var _comboboxRef$current3;
+  const comboboxRef = useRef(null);
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 3,
+    children: [/*#__PURE__*/_jsx(Button, {
+      compact: true,
+      onPress: () => {
+        var _comboboxRef$current;
+        return (_comboboxRef$current = comboboxRef.current) == null || _comboboxRef$current.setOpen == null ? void 0 : _comboboxRef$current.setOpen(true);
+      },
+      children: "Open"
+    }), /*#__PURE__*/_jsx(Button, {
+      compact: true,
+      onPress: () => {
+        var _comboboxRef$current2;
+        return (_comboboxRef$current2 = comboboxRef.current) == null || _comboboxRef$current2.setOpen == null ? void 0 : _comboboxRef$current2.setOpen(false);
+      },
+      children: "Close"
+    }), /*#__PURE__*/_jsx(Text, {
+      color: "fg",
+      children: (_comboboxRef$current3 = comboboxRef.current) != null && _comboboxRef$current3.open ? 'Open' : 'Closed'
+    }), /*#__PURE__*/_jsx(Combobox, {
+      ref: comboboxRef,
+      label: "Imperative ref",
+      onChange: onChange,
+      options: fruitOptions,
+      placeholder: "Select fruits...",
+      type: "multi",
+      value: value
+    })]
+  });
+};
+const OptionsWithAccessoryExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  const optionsWithAccessory = fruitOptions.slice(0, 5).map(option => _extends({}, option, {
+    accessory: /*#__PURE__*/_jsx(Icon, {
+      color: "fg",
+      name: "star"
+    })
+  }));
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Options with accessory",
+    onChange: onChange,
+    options: optionsWithAccessory,
+    placeholder: "Select fruits...",
+    type: "multi",
+    value: value
+  });
+};
+const OptionsWithMediaExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  const optionsWithMedia = fruitOptions.slice(0, 5).map(option => _extends({}, option, {
+    media: /*#__PURE__*/_jsx(Icon, {
+      color: "fg",
+      name: "star"
+    })
+  }));
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "Options with media",
+    onChange: onChange,
+    options: optionsWithMedia,
+    placeholder: "Select fruits...",
+    type: "multi",
+    value: value
+  });
+};
+const DynamicOptionsExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  const [options, setOptions] = useState(fruitOptions.slice(0, 5));
+  const addOption = () => {
+    const remaining = fruitOptions.filter(fruit => !options.some(opt => opt.value === fruit.value));
+    if (remaining.length > 0) {
+      setOptions([...options, remaining[0]]);
+    }
+  };
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 3,
+    children: [/*#__PURE__*/_jsx(Combobox, {
+      label: "Dynamic options",
+      onChange: onChange,
+      options: options,
+      placeholder: "Options can change...",
+      type: "multi",
+      value: value
+    }), /*#__PURE__*/_jsx(Button, {
+      compact: true,
+      onPress: addOption,
+      children: "Add more options"
+    })]
+  });
+};
+const CustomComponent = props => {
+  var _props$value$length, _props$value;
+  return /*#__PURE__*/_jsx(DefaultComboboxControl, _extends({}, props, {
+    searchText: "" + ((_props$value$length = (_props$value = props.value) == null ? void 0 : _props$value.length) != null ? _props$value$length : 0)
+  }));
+};
+const CustomControlExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    ComboboxControlComponent: CustomComponent,
+    label: "Custom control - search field always shows the number of selected options",
+    onChange: onChange,
+    options: fruitOptions,
+    type: "multi",
+    value: value
+  });
+};
+const TestIdentifierExample = () => {
+  const {
+    value,
+    onChange
+  } = useMultiSelect({
+    initialValue: []
+  });
+  return /*#__PURE__*/_jsx(Combobox, {
+    label: "With test ID",
+    onChange: onChange,
+    options: fruitOptions,
+    placeholder: "Has test ID...",
+    testID: "fruit-combobox",
+    type: "multi",
+    value: value
+  });
+};
+
+// Main component with all examples
+const Default = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Default",
+      children: /*#__PURE__*/_jsx(DefaultExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Single Select",
+      children: /*#__PURE__*/_jsx(SingleSelectExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "No Label",
+      children: /*#__PURE__*/_jsx(NoLabelExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Pre-selected values",
+      children: /*#__PURE__*/_jsx(InitialValuesExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Controlled search",
+      children: /*#__PURE__*/_jsx(ControlledSearchExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Options with descriptions",
+      children: /*#__PURE__*/_jsx(WithDescriptionsExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Hide search input",
+      children: /*#__PURE__*/_jsx(HideSearchInputExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Crypto assets",
+      children: /*#__PURE__*/_jsx(CryptoAssetsExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom filter logic",
+      children: /*#__PURE__*/_jsx(CustomFilterExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Disabled state",
+      children: /*#__PURE__*/_jsx(DisabledExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Compact size",
+      children: /*#__PURE__*/_jsx(CompactExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Compact single select",
+      children: /*#__PURE__*/_jsx(CompactSingleSelect, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Regular size (for comparison)",
+      children: /*#__PURE__*/_jsx(RegularSizeExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With helper text",
+      children: /*#__PURE__*/_jsx(HelperTextExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Default variant",
+      children: /*#__PURE__*/_jsx(DefaultVariantExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Positive variant",
+      children: /*#__PURE__*/_jsx(PositiveVariantExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Negative variant",
+      children: /*#__PURE__*/_jsx(NegativeVariantExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Primary variant",
+      children: /*#__PURE__*/_jsx(PrimaryVariantExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With start icon",
+      children: /*#__PURE__*/_jsx(WithStartIconExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With end icon",
+      children: /*#__PURE__*/_jsx(WithEndIconExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Limited display (max 3)",
+      children: /*#__PURE__*/_jsx(MaxSelectedDisplayExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom hidden label",
+      children: /*#__PURE__*/_jsx(HiddenOptionsLabelExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With select all option",
+      children: /*#__PURE__*/_jsx(SelectAllExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With clear all option",
+      children: /*#__PURE__*/_jsx(ClearAllExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "No options available",
+      children: /*#__PURE__*/_jsx(EmptyOptionsExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Some disabled options",
+      children: /*#__PURE__*/_jsx(DisabledOptionsExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Large dataset",
+      children: /*#__PURE__*/_jsx(LongListExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Monitor selections",
+      children: /*#__PURE__*/_jsx(ValueMonitoringExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Multiple comboboxes",
+      children: /*#__PURE__*/_jsx(MultipleInstancesExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Imperative ref",
+      children: /*#__PURE__*/_jsx(ImperativeRefExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Options with accessory",
+      children: /*#__PURE__*/_jsx(OptionsWithAccessoryExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Options with media",
+      children: /*#__PURE__*/_jsx(OptionsWithMediaExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Dynamic options",
+      children: /*#__PURE__*/_jsx(DynamicOptionsExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Custom control",
+      children: /*#__PURE__*/_jsx(CustomControlExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "With test ID",
+      children: /*#__PURE__*/_jsx(TestIdentifierExample, {})
+    })]
+  });
+};
+export default Default;