combobox-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox-example",
  "title": "Combobox",
  "registryDependencies": [
    "button",
    "card",
    "combobox",
    "dialog",
    "field",
    "input",
    "input-group",
    "item",
    "select",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-maia/examples/combobox-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { toast } from \"sonner\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-maia/ui/card\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxCollection,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxGroup,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxLabel,\n  ComboboxList,\n  ComboboxSeparator,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-maia/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function ComboboxExample() {\n  return (\n    <ExampleWrapper>\n      <ComboboxBasic />\n      <ComboboxDisabled />\n      <ComboboxSides />\n      <ComboboxInvalid />\n      <ComboboxWithClear />\n      <ComboboxAutoHighlight />\n      <ComboboxWithGroups />\n      <ComboboxWithGroupsAndSeparator />\n      <ComboboxLargeList />\n      <ComboxboxInputAddon />\n      <ComboboxInPopup />\n      <ComboboxWithForm />\n      <ComboboxMultiple />\n      <ComboboxMultipleDisabled />\n      <ComboboxMultipleInvalid />\n      <ComboboxMultipleNoRemove />\n      <ComboboxWithCustomItems />\n      <ComboboxInDialog />\n      <ComboboxWithOtherInputs />\n      <ComboboxDisabledItems />\n    </ExampleWrapper>\n  )\n}\n\nconst frameworks = [\n  \"Next.js\",\n  \"SvelteKit\",\n  \"Nuxt.js\",\n  \"Remix\",\n  \"Astro\",\n] as const\n\nconst countries = [\n  { code: \"\", value: \"\", continent: \"\", label: \"Select country\" },\n  { code: \"af\", value: \"afghanistan\", label: \"Afghanistan\", continent: \"Asia\" },\n  { code: \"al\", value: \"albania\", label: \"Albania\", continent: \"Europe\" },\n  { code: \"dz\", value: \"algeria\", label: \"Algeria\", continent: \"Africa\" },\n  { code: \"ad\", value: \"andorra\", label: \"Andorra\", continent: \"Europe\" },\n  { code: \"ao\", value: \"angola\", label: \"Angola\", continent: \"Africa\" },\n  {\n    code: \"ar\",\n    value: \"argentina\",\n    label: \"Argentina\",\n    continent: \"South America\",\n  },\n  { code: \"am\", value: \"armenia\", label: \"Armenia\", continent: \"Asia\" },\n  { code: \"au\", value: \"australia\", label: \"Australia\", continent: \"Oceania\" },\n  { code: \"at\", value: \"austria\", label: \"Austria\", continent: \"Europe\" },\n  { code: \"az\", value: \"azerbaijan\", label: \"Azerbaijan\", continent: \"Asia\" },\n  {\n    code: \"bs\",\n    value: \"bahamas\",\n    label: \"Bahamas\",\n    continent: \"North America\",\n  },\n  { code: \"bh\", value: \"bahrain\", label: \"Bahrain\", continent: \"Asia\" },\n  { code: \"bd\", value: \"bangladesh\", label: \"Bangladesh\", continent: \"Asia\" },\n  {\n    code: \"bb\",\n    value: \"barbados\",\n    label: \"Barbados\",\n    continent: \"North America\",\n  },\n  { code: \"by\", value: \"belarus\", label: \"Belarus\", continent: \"Europe\" },\n  { code: \"be\", value: \"belgium\", label: \"Belgium\", continent: \"Europe\" },\n  { code: \"bz\", value: \"belize\", label: \"Belize\", continent: \"North America\" },\n  { code: \"bj\", value: \"benin\", label: \"Benin\", continent: \"Africa\" },\n  { code: \"bt\", value: \"bhutan\", label: \"Bhutan\", continent: \"Asia\" },\n  {\n    code: \"bo\",\n    value: \"bolivia\",\n    label: \"Bolivia\",\n    continent: \"South America\",\n  },\n  {\n    code: \"ba\",\n    value: \"bosnia-and-herzegovina\",\n    label: \"Bosnia and Herzegovina\",\n    continent: \"Europe\",\n  },\n  { code: \"bw\", value: \"botswana\", label: \"Botswana\", continent: \"Africa\" },\n  { code: \"br\", value: \"brazil\", label: \"Brazil\", continent: \"South America\" },\n  { code: \"bn\", value: \"brunei\", label: \"Brunei\", continent: \"Asia\" },\n  { code: \"bg\", value: \"bulgaria\", label: \"Bulgaria\", continent: \"Europe\" },\n  {\n    code: \"bf\",\n    value: \"burkina-faso\",\n    label: \"Burkina Faso\",\n    continent: \"Africa\",\n  },\n  { code: \"bi\", value: \"burundi\", label: \"Burundi\", continent: \"Africa\" },\n  { code: \"kh\", value: \"cambodia\", label: \"Cambodia\", continent: \"Asia\" },\n  { code: \"cm\", value: \"cameroon\", label: \"Cameroon\", continent: \"Africa\" },\n  { code: \"ca\", value: \"canada\", label: \"Canada\", continent: \"North America\" },\n  { code: \"cv\", value: \"cape-verde\", label: \"Cape Verde\", continent: \"Africa\" },\n  {\n    code: \"cf\",\n    value: \"central-african-republic\",\n    label: \"Central African Republic\",\n    continent: \"Africa\",\n  },\n  { code: \"td\", value: \"chad\", label: \"Chad\", continent: \"Africa\" },\n  { code: \"cl\", value: \"chile\", label: \"Chile\", continent: \"South America\" },\n  { code: \"cn\", value: \"china\", label: \"China\", continent: \"Asia\" },\n  {\n    code: \"co\",\n    value: \"colombia\",\n    label: \"Colombia\",\n    continent: \"South America\",\n  },\n  { code: \"km\", value: \"comoros\", label: \"Comoros\", continent: \"Africa\" },\n  { code: \"cg\", value: \"congo\", label: \"Congo\", continent: \"Africa\" },\n  {\n    code: \"cr\",\n    value: \"costa-rica\",\n    label: \"Costa Rica\",\n    continent: \"North America\",\n  },\n  { code: \"hr\", value: \"croatia\", label: \"Croatia\", continent: \"Europe\" },\n  { code: \"cu\", value: \"cuba\", label: \"Cuba\", continent: \"North America\" },\n  { code: \"cy\", value: \"cyprus\", label: \"Cyprus\", continent: \"Asia\" },\n  {\n    code: \"cz\",\n    value: \"czech-republic\",\n    label: \"Czech Republic\",\n    continent: \"Europe\",\n  },\n  { code: \"dk\", value: \"denmark\", label: \"Denmark\", continent: \"Europe\" },\n  { code: \"dj\", value: \"djibouti\", label: \"Djibouti\", continent: \"Africa\" },\n  {\n    code: \"dm\",\n    value: \"dominica\",\n    label: \"Dominica\",\n    continent: \"North America\",\n  },\n  {\n    code: \"do\",\n    value: \"dominican-republic\",\n    label: \"Dominican Republic\",\n    continent: \"North America\",\n  },\n  {\n    code: \"ec\",\n    value: \"ecuador\",\n    label: \"Ecuador\",\n    continent: \"South America\",\n  },\n  { code: \"eg\", value: \"egypt\", label: \"Egypt\", continent: \"Africa\" },\n  {\n    code: \"sv\",\n    value: \"el-salvador\",\n    label: \"El Salvador\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gq\",\n    value: \"equatorial-guinea\",\n    label: \"Equatorial Guinea\",\n    continent: \"Africa\",\n  },\n  { code: \"er\", value: \"eritrea\", label: \"Eritrea\", continent: \"Africa\" },\n  { code: \"ee\", value: \"estonia\", label: \"Estonia\", continent: \"Europe\" },\n  { code: \"et\", value: \"ethiopia\", label: \"Ethiopia\", continent: \"Africa\" },\n  { code: \"fj\", value: \"fiji\", label: \"Fiji\", continent: \"Oceania\" },\n  { code: \"fi\", value: \"finland\", label: \"Finland\", continent: \"Europe\" },\n  { code: \"fr\", value: \"france\", label: \"France\", continent: \"Europe\" },\n  { code: \"ga\", value: \"gabon\", label: \"Gabon\", continent: \"Africa\" },\n  { code: \"gm\", value: \"gambia\", label: \"Gambia\", continent: \"Africa\" },\n  { code: \"ge\", value: \"georgia\", label: \"Georgia\", continent: \"Asia\" },\n  { code: \"de\", value: \"germany\", label: \"Germany\", continent: \"Europe\" },\n  { code: \"gh\", value: \"ghana\", label: \"Ghana\", continent: \"Africa\" },\n  { code: \"gr\", value: \"greece\", label: \"Greece\", continent: \"Europe\" },\n  {\n    code: \"gd\",\n    value: \"grenada\",\n    label: \"Grenada\",\n    continent: \"North America\",\n  },\n  {\n    code: \"gt\",\n    value: \"guatemala\",\n    label: \"Guatemala\",\n    continent: \"North America\",\n  },\n  { code: \"gn\", value: \"guinea\", label: \"Guinea\", continent: \"Africa\" },\n  {\n    code: \"gw\",\n    value: \"guinea-bissau\",\n    label: \"Guinea-Bissau\",\n    continent: \"Africa\",\n  },\n  { code: \"gy\", value: \"guyana\", label: \"Guyana\", continent: \"South America\" },\n  { code: \"ht\", value: \"haiti\", label: \"Haiti\", continent: \"North America\" },\n  {\n    code: \"hn\",\n    value: \"honduras\",\n    label: \"Honduras\",\n    continent: \"North America\",\n  },\n  { code: \"hu\", value: \"hungary\", label: \"Hungary\", continent: \"Europe\" },\n  { code: \"is\", value: \"iceland\", label: \"Iceland\", continent: \"Europe\" },\n  { code: \"in\", value: \"india\", label: \"India\", continent: \"Asia\" },\n  { code: \"id\", value: \"indonesia\", label: \"Indonesia\", continent: \"Asia\" },\n  { code: \"ir\", value: \"iran\", label: \"Iran\", continent: \"Asia\" },\n  { code: \"iq\", value: \"iraq\", label: \"Iraq\", continent: \"Asia\" },\n  { code: \"ie\", value: \"ireland\", label: \"Ireland\", continent: \"Europe\" },\n  { code: \"il\", value: \"israel\", label: \"Israel\", continent: \"Asia\" },\n  { code: \"it\", value: \"italy\", label: \"Italy\", continent: \"Europe\" },\n  {\n    code: \"jm\",\n    value: \"jamaica\",\n    label: \"Jamaica\",\n    continent: \"North America\",\n  },\n  { code: \"jp\", value: \"japan\", label: \"Japan\", continent: \"Asia\" },\n  { code: \"jo\", value: \"jordan\", label: \"Jordan\", continent: \"Asia\" },\n  { code: \"kz\", value: \"kazakhstan\", label: \"Kazakhstan\", continent: \"Asia\" },\n  { code: \"ke\", value: \"kenya\", label: \"Kenya\", continent: \"Africa\" },\n  { code: \"kw\", value: \"kuwait\", label: \"Kuwait\", continent: \"Asia\" },\n  { code: \"kg\", value: \"kyrgyzstan\", label: \"Kyrgyzstan\", continent: \"Asia\" },\n  { code: \"la\", value: \"laos\", label: \"Laos\", continent: \"Asia\" },\n  { code: \"lv\", value: \"latvia\", label: \"Latvia\", continent: \"Europe\" },\n  { code: \"lb\", value: \"lebanon\", label: \"Lebanon\", continent: \"Asia\" },\n  { code: \"ls\", value: \"lesotho\", label: \"Lesotho\", continent: \"Africa\" },\n  { code: \"lr\", value: \"liberia\", label: \"Liberia\", continent: \"Africa\" },\n  { code: \"ly\", value: \"libya\", label: \"Libya\", continent: \"Africa\" },\n  {\n    code: \"li\",\n    value: \"liechtenstein\",\n    label: \"Liechtenstein\",\n    continent: \"Europe\",\n  },\n  { code: \"lt\", value: \"lithuania\", label: \"Lithuania\", continent: \"Europe\" },\n  { code: \"lu\", value: \"luxembourg\", label: \"Luxembourg\", continent: \"Europe\" },\n  { code: \"mg\", value: \"madagascar\", label: \"Madagascar\", continent: \"Africa\" },\n  { code: \"mw\", value: \"malawi\", label: \"Malawi\", continent: \"Africa\" },\n  { code: \"my\", value: \"malaysia\", label: \"Malaysia\", continent: \"Asia\" },\n  { code: \"mv\", value: \"maldives\", label: \"Maldives\", continent: \"Asia\" },\n  { code: \"ml\", value: \"mali\", label: \"Mali\", continent: \"Africa\" },\n  { code: \"mt\", value: \"malta\", label: \"Malta\", continent: \"Europe\" },\n  {\n    code: \"mh\",\n    value: \"marshall-islands\",\n    label: \"Marshall Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"mr\", value: \"mauritania\", label: \"Mauritania\", continent: \"Africa\" },\n  { code: \"mu\", value: \"mauritius\", label: \"Mauritius\", continent: \"Africa\" },\n  { code: \"mx\", value: \"mexico\", label: \"Mexico\", continent: \"North America\" },\n  {\n    code: \"fm\",\n    value: \"micronesia\",\n    label: \"Micronesia\",\n    continent: \"Oceania\",\n  },\n  { code: \"md\", value: \"moldova\", label: \"Moldova\", continent: \"Europe\" },\n  { code: \"mc\", value: \"monaco\", label: \"Monaco\", continent: \"Europe\" },\n  { code: \"mn\", value: \"mongolia\", label: \"Mongolia\", continent: \"Asia\" },\n  { code: \"me\", value: \"montenegro\", label: \"Montenegro\", continent: \"Europe\" },\n  { code: \"ma\", value: \"morocco\", label: \"Morocco\", continent: \"Africa\" },\n  { code: \"mz\", value: \"mozambique\", label: \"Mozambique\", continent: \"Africa\" },\n  { code: \"mm\", value: \"myanmar\", label: \"Myanmar\", continent: \"Asia\" },\n  { code: \"na\", value: \"namibia\", label: \"Namibia\", continent: \"Africa\" },\n  { code: \"nr\", value: \"nauru\", label: \"Nauru\", continent: \"Oceania\" },\n  { code: \"np\", value: \"nepal\", label: \"Nepal\", continent: \"Asia\" },\n  {\n    code: \"nl\",\n    value: \"netherlands\",\n    label: \"Netherlands\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"nz\",\n    value: \"new-zealand\",\n    label: \"New Zealand\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"ni\",\n    value: \"nicaragua\",\n    label: \"Nicaragua\",\n    continent: \"North America\",\n  },\n  { code: \"ne\", value: \"niger\", label: \"Niger\", continent: \"Africa\" },\n  { code: \"ng\", value: \"nigeria\", label: \"Nigeria\", continent: \"Africa\" },\n  { code: \"kp\", value: \"north-korea\", label: \"North Korea\", continent: \"Asia\" },\n  {\n    code: \"mk\",\n    value: \"north-macedonia\",\n    label: \"North Macedonia\",\n    continent: \"Europe\",\n  },\n  { code: \"no\", value: \"norway\", label: \"Norway\", continent: \"Europe\" },\n  { code: \"om\", value: \"oman\", label: \"Oman\", continent: \"Asia\" },\n  { code: \"pk\", value: \"pakistan\", label: \"Pakistan\", continent: \"Asia\" },\n  { code: \"pw\", value: \"palau\", label: \"Palau\", continent: \"Oceania\" },\n  { code: \"ps\", value: \"palestine\", label: \"Palestine\", continent: \"Asia\" },\n  { code: \"pa\", value: \"panama\", label: \"Panama\", continent: \"North America\" },\n  {\n    code: \"pg\",\n    value: \"papua-new-guinea\",\n    label: \"Papua New Guinea\",\n    continent: \"Oceania\",\n  },\n  {\n    code: \"py\",\n    value: \"paraguay\",\n    label: \"Paraguay\",\n    continent: \"South America\",\n  },\n  { code: \"pe\", value: \"peru\", label: \"Peru\", continent: \"South America\" },\n  { code: \"ph\", value: \"philippines\", label: \"Philippines\", continent: \"Asia\" },\n  { code: \"pl\", value: \"poland\", label: \"Poland\", continent: \"Europe\" },\n  { code: \"pt\", value: \"portugal\", label: \"Portugal\", continent: \"Europe\" },\n  { code: \"qa\", value: \"qatar\", label: \"Qatar\", continent: \"Asia\" },\n  { code: \"ro\", value: \"romania\", label: \"Romania\", continent: \"Europe\" },\n  { code: \"ru\", value: \"russia\", label: \"Russia\", continent: \"Europe\" },\n  { code: \"rw\", value: \"rwanda\", label: \"Rwanda\", continent: \"Africa\" },\n  { code: \"ws\", value: \"samoa\", label: \"Samoa\", continent: \"Oceania\" },\n  { code: \"sm\", value: \"san-marino\", label: \"San Marino\", continent: \"Europe\" },\n  {\n    code: \"sa\",\n    value: \"saudi-arabia\",\n    label: \"Saudi Arabia\",\n    continent: \"Asia\",\n  },\n  { code: \"sn\", value: \"senegal\", label: \"Senegal\", continent: \"Africa\" },\n  { code: \"rs\", value: \"serbia\", label: \"Serbia\", continent: \"Europe\" },\n  { code: \"sc\", value: \"seychelles\", label: \"Seychelles\", continent: \"Africa\" },\n  {\n    code: \"sl\",\n    value: \"sierra-leone\",\n    label: \"Sierra Leone\",\n    continent: \"Africa\",\n  },\n  { code: \"sg\", value: \"singapore\", label: \"Singapore\", continent: \"Asia\" },\n  { code: \"sk\", value: \"slovakia\", label: \"Slovakia\", continent: \"Europe\" },\n  { code: \"si\", value: \"slovenia\", label: \"Slovenia\", continent: \"Europe\" },\n  {\n    code: \"sb\",\n    value: \"solomon-islands\",\n    label: \"Solomon Islands\",\n    continent: \"Oceania\",\n  },\n  { code: \"so\", value: \"somalia\", label: \"Somalia\", continent: \"Africa\" },\n  {\n    code: \"za\",\n    value: \"south-africa\",\n    label: \"South Africa\",\n    continent: \"Africa\",\n  },\n  { code: \"kr\", value: \"south-korea\", label: \"South Korea\", continent: \"Asia\" },\n  {\n    code: \"ss\",\n    value: \"south-sudan\",\n    label: \"South Sudan\",\n    continent: \"Africa\",\n  },\n  { code: \"es\", value: \"spain\", label: \"Spain\", continent: \"Europe\" },\n  { code: \"lk\", value: \"sri-lanka\", label: \"Sri Lanka\", continent: \"Asia\" },\n  { code: \"sd\", value: \"sudan\", label: \"Sudan\", continent: \"Africa\" },\n  {\n    code: \"sr\",\n    value: \"suriname\",\n    label: \"Suriname\",\n    continent: \"South America\",\n  },\n  { code: \"se\", value: \"sweden\", label: \"Sweden\", continent: \"Europe\" },\n  {\n    code: \"ch\",\n    value: \"switzerland\",\n    label: \"Switzerland\",\n    continent: \"Europe\",\n  },\n  { code: \"sy\", value: \"syria\", label: \"Syria\", continent: \"Asia\" },\n  { code: \"tw\", value: \"taiwan\", label: \"Taiwan\", continent: \"Asia\" },\n  { code: \"tj\", value: \"tajikistan\", label: \"Tajikistan\", continent: \"Asia\" },\n  { code: \"tz\", value: \"tanzania\", label: \"Tanzania\", continent: \"Africa\" },\n  { code: \"th\", value: \"thailand\", label: \"Thailand\", continent: \"Asia\" },\n  { code: \"tl\", value: \"timor-leste\", label: \"Timor-Leste\", continent: \"Asia\" },\n  { code: \"tg\", value: \"togo\", label: \"Togo\", continent: \"Africa\" },\n  { code: \"to\", value: \"tonga\", label: \"Tonga\", continent: \"Oceania\" },\n  {\n    code: \"tt\",\n    value: \"trinidad-and-tobago\",\n    label: \"Trinidad and Tobago\",\n    continent: \"North America\",\n  },\n  { code: \"tn\", value: \"tunisia\", label: \"Tunisia\", continent: \"Africa\" },\n  { code: \"tr\", value: \"turkey\", label: \"Turkey\", continent: \"Asia\" },\n  {\n    code: \"tm\",\n    value: \"turkmenistan\",\n    label: \"Turkmenistan\",\n    continent: \"Asia\",\n  },\n  { code: \"tv\", value: \"tuvalu\", label: \"Tuvalu\", continent: \"Oceania\" },\n  { code: \"ug\", value: \"uganda\", label: \"Uganda\", continent: \"Africa\" },\n  { code: \"ua\", value: \"ukraine\", label: \"Ukraine\", continent: \"Europe\" },\n  {\n    code: \"ae\",\n    value: \"united-arab-emirates\",\n    label: \"United Arab Emirates\",\n    continent: \"Asia\",\n  },\n  {\n    code: \"gb\",\n    value: \"united-kingdom\",\n    label: \"United Kingdom\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"us\",\n    value: \"united-states\",\n    label: \"United States\",\n    continent: \"North America\",\n  },\n  {\n    code: \"uy\",\n    value: \"uruguay\",\n    label: \"Uruguay\",\n    continent: \"South America\",\n  },\n  { code: \"uz\", value: \"uzbekistan\", label: \"Uzbekistan\", continent: \"Asia\" },\n  { code: \"vu\", value: \"vanuatu\", label: \"Vanuatu\", continent: \"Oceania\" },\n  {\n    code: \"va\",\n    value: \"vatican-city\",\n    label: \"Vatican City\",\n    continent: \"Europe\",\n  },\n  {\n    code: \"ve\",\n    value: \"venezuela\",\n    label: \"Venezuela\",\n    continent: \"South America\",\n  },\n  { code: \"vn\", value: \"vietnam\", label: \"Vietnam\", continent: \"Asia\" },\n  { code: \"ye\", value: \"yemen\", label: \"Yemen\", continent: \"Asia\" },\n  { code: \"zm\", value: \"zambia\", label: \"Zambia\", continent: \"Africa\" },\n  { code: \"zw\", value: \"zimbabwe\", label: \"Zimbabwe\", continent: \"Africa\" },\n]\n\nconst timezones = [\n  {\n    value: \"Americas\",\n    items: [\n      \"(GMT-5) New York\",\n      \"(GMT-8) Los Angeles\",\n      \"(GMT-6) Chicago\",\n      \"(GMT-5) Toronto\",\n      \"(GMT-8) Vancouver\",\n      \"(GMT-3) São Paulo\",\n    ],\n  },\n  {\n    value: \"Europe\",\n    items: [\n      \"(GMT+0) London\",\n      \"(GMT+1) Paris\",\n      \"(GMT+1) Berlin\",\n      \"(GMT+1) Rome\",\n      \"(GMT+1) Madrid\",\n      \"(GMT+1) Amsterdam\",\n    ],\n  },\n  {\n    value: \"Asia/Pacific\",\n    items: [\n      \"(GMT+9) Tokyo\",\n      \"(GMT+8) Shanghai\",\n      \"(GMT+8) Singapore\",\n      \"(GMT+4) Dubai\",\n      \"(GMT+11) Sydney\",\n      \"(GMT+9) Seoul\",\n    ],\n  },\n] as const\n\nfunction ComboboxBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Combobox key={side} items={frameworks}>\n            <ComboboxInput\n              placeholder={side.replace(\"-\", \" \")}\n              className=\"w-32 **:data-[slot=input-group-control]:capitalize\"\n            />\n            <ComboboxContent side={side}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" disabled />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nconst disabledFrameworks = [\"Nuxt.js\", \"Remix\"]\n\nfunction ComboboxDisabledItems() {\n  return (\n    <Example title=\"Disabled Items\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem\n                key={item}\n                value={item}\n                disabled={disabledFrameworks.includes(item)}\n              >\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox items={frameworks}>\n          <ComboboxInput placeholder=\"Select a framework\" aria-invalid=\"true\" />\n          <ComboboxContent>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-framework-invalid\">\n            Framework\n          </FieldLabel>\n          <Combobox items={frameworks}>\n            <ComboboxInput\n              id=\"combobox-framework-invalid\"\n              placeholder=\"Select a framework\"\n              aria-invalid\n            />\n            <ComboboxContent>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>Please select a valid framework.</FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxWithClear() {\n  return (\n    <Example title=\"With Clear Button\">\n      <Combobox items={frameworks} defaultValue={frameworks[0]}>\n        <ComboboxInput placeholder=\"Select a framework\" showClear />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithGroupsAndSeparator() {\n  return (\n    <Example title=\"With Groups and Separator\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n                <ComboboxSeparator />\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithForm() {\n  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {\n    event.preventDefault()\n    const formData = new FormData(event.target as HTMLFormElement)\n    const framework = formData.get(\"framework\") as string\n    toast(`You selected ${framework} as your framework.`)\n  }\n\n  return (\n    <Example title=\"Form with Combobox\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <form\n            id=\"form-with-combobox\"\n            className=\"w-full\"\n            onSubmit={handleSubmit}\n          >\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"framework\">Framework</FieldLabel>\n                <Combobox items={frameworks}>\n                  <ComboboxInput\n                    id=\"framework\"\n                    name=\"framework\"\n                    placeholder=\"Select a framework\"\n                    required\n                  />\n                  <ComboboxContent>\n                    <ComboboxEmpty>No items found.</ComboboxEmpty>\n                    <ComboboxList>\n                      {(item) => (\n                        <ComboboxItem key={item} value={item}>\n                          {item}\n                        </ComboboxItem>\n                      )}\n                    </ComboboxList>\n                  </ComboboxContent>\n                </Combobox>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button type=\"submit\" form=\"form-with-combobox\">\n            Submit\n          </Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\n\nconst largeListItems = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`)\n\nfunction ComboboxLargeList() {\n  return (\n    <Example title=\"Large List (100 items)\">\n      <Combobox items={largeListItems}>\n        <ComboboxInput placeholder=\"Search from 100 items\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxAutoHighlight() {\n  return (\n    <Example title=\"With Auto Highlight\">\n      <Combobox items={frameworks} autoHighlight>\n        <ComboboxInput placeholder=\"Select a framework\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboxboxInputAddon() {\n  return (\n    <Example title=\"With Icon Addon\">\n      <Combobox items={timezones}>\n        <ComboboxInput placeholder=\"Select a timezone\">\n          <InputGroupAddon>\n            <IconPlaceholder\n              lucide=\"GlobeIcon\"\n              tabler=\"IconGlobe\"\n              hugeicons=\"Globe02Icon\"\n              phosphor=\"GlobeIcon\"\n              remixicon=\"RiGlobeLine\"\n            />\n          </InputGroupAddon>\n        </ComboboxInput>\n        <ComboboxContent alignOffset={-28} className=\"w-60\">\n          <ComboboxEmpty>No timezones found.</ComboboxEmpty>\n          <ComboboxList>\n            {(group) => (\n              <ComboboxGroup key={group.value} items={group.items}>\n                <ComboboxLabel>{group.value}</ComboboxLabel>\n                <ComboboxCollection>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxCollection>\n              </ComboboxGroup>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInPopup() {\n  return (\n    <Example title=\"Combobox in Popup\">\n      <Combobox items={countries} defaultValue={countries[0]}>\n        <ComboboxTrigger\n          render={\n            <Button\n              variant=\"outline\"\n              className=\"w-64 justify-between font-normal\"\n            />\n          }\n        >\n          <ComboboxValue />\n        </ComboboxTrigger>\n        <ComboboxContent>\n          <ComboboxInput showTrigger={false} placeholder=\"Search\" />\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item.code} value={item}>\n                {item.label}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultiple() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleDisabled() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Disabled\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n        disabled\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value}>{value}</ComboboxChip>\n                ))}\n                <ComboboxChipsInput disabled />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleInvalid() {\n  const anchor1 = useComboboxAnchor()\n  const anchor2 = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Combobox\n          multiple\n          autoHighlight\n          items={frameworks}\n          defaultValue={[frameworks[0], frameworks[1]]}\n        >\n          <ComboboxChips ref={anchor1}>\n            <ComboboxValue>\n              {(values) => (\n                <React.Fragment>\n                  {values.map((value: string) => (\n                    <ComboboxChip key={value}>{value}</ComboboxChip>\n                  ))}\n                  <ComboboxChipsInput aria-invalid=\"true\" />\n                </React.Fragment>\n              )}\n            </ComboboxValue>\n          </ComboboxChips>\n          <ComboboxContent anchor={anchor1}>\n            <ComboboxEmpty>No items found.</ComboboxEmpty>\n            <ComboboxList>\n              {(item) => (\n                <ComboboxItem key={item} value={item}>\n                  {item}\n                </ComboboxItem>\n              )}\n            </ComboboxList>\n          </ComboboxContent>\n        </Combobox>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"combobox-multiple-invalid\">\n            Frameworks\n          </FieldLabel>\n          <Combobox\n            multiple\n            autoHighlight\n            items={frameworks}\n            defaultValue={[frameworks[0], frameworks[1], frameworks[2]]}\n          >\n            <ComboboxChips ref={anchor2}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((value: string) => (\n                      <ComboboxChip key={value}>{value}</ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      id=\"combobox-multiple-invalid\"\n                      aria-invalid\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor2}>\n              <ComboboxEmpty>No items found.</ComboboxEmpty>\n              <ComboboxList>\n                {(item) => (\n                  <ComboboxItem key={item} value={item}>\n                    {item}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n          <FieldDescription>\n            Please select at least one framework.\n          </FieldDescription>\n          <FieldError errors={[{ message: \"This field is required.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction ComboboxMultipleNoRemove() {\n  const anchor = useComboboxAnchor()\n\n  return (\n    <Example title=\"Combobox Multiple (No Remove)\">\n      <Combobox\n        multiple\n        autoHighlight\n        items={frameworks}\n        defaultValue={[frameworks[0], frameworks[1]]}\n      >\n        <ComboboxChips ref={anchor}>\n          <ComboboxValue>\n            {(values) => (\n              <React.Fragment>\n                {values.map((value: string) => (\n                  <ComboboxChip key={value} showRemove={false}>\n                    {value}\n                  </ComboboxChip>\n                ))}\n                <ComboboxChipsInput />\n              </React.Fragment>\n            )}\n          </ComboboxValue>\n        </ComboboxChips>\n        <ComboboxContent anchor={anchor}>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxWithCustomItems() {\n  return (\n    <Example title=\"With Custom Item Rendering\">\n      <Combobox\n        items={countries.filter((country) => country.code !== \"\")}\n        itemToStringValue={(country: (typeof countries)[number]) =>\n          country.label\n        }\n      >\n        <ComboboxInput placeholder=\"Search countries...\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No countries found.</ComboboxEmpty>\n          <ComboboxList>\n            {(country) => (\n              <ComboboxItem key={country.code} value={country}>\n                <Item size=\"xs\" className=\"p-0\">\n                  <ItemContent>\n                    <ItemTitle className=\"whitespace-nowrap\">\n                      {country.label}\n                    </ItemTitle>\n                    <ItemDescription>\n                      {country.continent} ({country.code})\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n    </Example>\n  )\n}\n\nfunction ComboboxInDialog() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Combobox in Dialog\">\n      <Dialog open={open} onOpenChange={setOpen}>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent className=\"sm:max-w-[425px]\">\n          <DialogHeader>\n            <DialogTitle>Select Framework</DialogTitle>\n            <DialogDescription>\n              Choose your preferred framework from the list below.\n            </DialogDescription>\n          </DialogHeader>\n          <Field>\n            <FieldLabel htmlFor=\"framework-dialog\" className=\"sr-only\">\n              Framework\n            </FieldLabel>\n            <Combobox items={frameworks}>\n              <ComboboxInput\n                id=\"framework-dialog\"\n                placeholder=\"Select a framework\"\n              />\n              <ComboboxContent>\n                <ComboboxEmpty>No items found.</ComboboxEmpty>\n                <ComboboxList>\n                  {(item) => (\n                    <ComboboxItem key={item} value={item}>\n                      {item}\n                    </ComboboxItem>\n                  )}\n                </ComboboxList>\n              </ComboboxContent>\n            </Combobox>\n          </Field>\n          <DialogFooter>\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              onClick={() => setOpen(false)}\n            >\n              Cancel\n            </Button>\n            <Button\n              type=\"button\"\n              onClick={() => {\n                toast(\"Framework selected.\")\n                setOpen(false)\n              }}\n            >\n              Confirm\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nconst items = [\n  {\n    label: \"Select a framework\",\n    value: null,\n  },\n  {\n    label: \"React\",\n    value: \"react\",\n  },\n  {\n    label: \"Vue\",\n    value: \"vue\",\n  },\n  {\n    label: \"Angular\",\n    value: \"angular\",\n  },\n  {\n    label: \"Svelte\",\n    value: \"svelte\",\n  },\n  {\n    label: \"Solid\",\n    value: \"solid\",\n  },\n  {\n    label: \"Preact\",\n    value: \"preact\",\n  },\n  {\n    label: \"Next.js\",\n    value: \"next.js\",\n  },\n]\n\nfunction ComboboxWithOtherInputs() {\n  return (\n    <Example title=\"With Other Inputs\">\n      <Combobox items={frameworks}>\n        <ComboboxInput placeholder=\"Select a framework\" className=\"w-52\" />\n        <ComboboxContent>\n          <ComboboxEmpty>No items found.</ComboboxEmpty>\n          <ComboboxList>\n            {(item) => (\n              <ComboboxItem key={item} value={item}>\n                {item}\n              </ComboboxItem>\n            )}\n          </ComboboxList>\n        </ComboboxContent>\n      </Combobox>\n      <Select items={items}>\n        <SelectTrigger className=\"w-52\">\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n      <Button\n        variant=\"outline\"\n        className=\"text-muted-foreground w-52 justify-between font-normal\"\n      >\n        Select a framework\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n        />\n      </Button>\n      <Input placeholder=\"Select a framework\" className=\"w-52\" />\n      <InputGroup className=\"w-52\">\n        <InputGroupInput placeholder=\"Select a framework\" />\n        <InputGroupAddon align=\"inline-end\">\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}