{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-combobox-10",
  "description": "Combobox with input inside popup",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@coss/button",
    "@coss/combobox"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-combobox-10.tsx",
      "content": "\"use client\";\n\nimport { ChevronsUpDownIcon, SearchIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Combobox,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxPopup,\n  ComboboxTrigger,\n  ComboboxValue,\n} from \"@/registry/default/ui/combobox\";\n\ninterface Country {\n  code: string;\n  value: string | null;\n  continent: string;\n  label: string;\n}\n\nconst countries: Country[] = [\n  { code: \"\", continent: \"\", label: \"Select country\", value: null },\n  { code: \"af\", continent: \"Asia\", label: \"Afghanistan\", value: \"afghanistan\" },\n  { code: \"al\", continent: \"Europe\", label: \"Albania\", value: \"albania\" },\n  { code: \"dz\", continent: \"Africa\", label: \"Algeria\", value: \"algeria\" },\n  { code: \"ad\", continent: \"Europe\", label: \"Andorra\", value: \"andorra\" },\n  { code: \"ao\", continent: \"Africa\", label: \"Angola\", value: \"angola\" },\n  {\n    code: \"ar\",\n    continent: \"South America\",\n    label: \"Argentina\",\n    value: \"argentina\",\n  },\n  { code: \"am\", continent: \"Asia\", label: \"Armenia\", value: \"armenia\" },\n  { code: \"au\", continent: \"Oceania\", label: \"Australia\", value: \"australia\" },\n  { code: \"at\", continent: \"Europe\", label: \"Austria\", value: \"austria\" },\n  { code: \"az\", continent: \"Asia\", label: \"Azerbaijan\", value: \"azerbaijan\" },\n  {\n    code: \"bs\",\n    continent: \"North America\",\n    label: \"Bahamas\",\n    value: \"bahamas\",\n  },\n  { code: \"bh\", continent: \"Asia\", label: \"Bahrain\", value: \"bahrain\" },\n  { code: \"bd\", continent: \"Asia\", label: \"Bangladesh\", value: \"bangladesh\" },\n  {\n    code: \"bb\",\n    continent: \"North America\",\n    label: \"Barbados\",\n    value: \"barbados\",\n  },\n  { code: \"by\", continent: \"Europe\", label: \"Belarus\", value: \"belarus\" },\n  { code: \"be\", continent: \"Europe\", label: \"Belgium\", value: \"belgium\" },\n  { code: \"bz\", continent: \"North America\", label: \"Belize\", value: \"belize\" },\n  { code: \"bj\", continent: \"Africa\", label: \"Benin\", value: \"benin\" },\n  { code: \"bt\", continent: \"Asia\", label: \"Bhutan\", value: \"bhutan\" },\n  {\n    code: \"bo\",\n    continent: \"South America\",\n    label: \"Bolivia\",\n    value: \"bolivia\",\n  },\n  {\n    code: \"ba\",\n    continent: \"Europe\",\n    label: \"Bosnia and Herzegovina\",\n    value: \"bosnia-and-herzegovina\",\n  },\n  { code: \"bw\", continent: \"Africa\", label: \"Botswana\", value: \"botswana\" },\n  { code: \"br\", continent: \"South America\", label: \"Brazil\", value: \"brazil\" },\n  { code: \"bn\", continent: \"Asia\", label: \"Brunei\", value: \"brunei\" },\n  { code: \"bg\", continent: \"Europe\", label: \"Bulgaria\", value: \"bulgaria\" },\n  {\n    code: \"bf\",\n    continent: \"Africa\",\n    label: \"Burkina Faso\",\n    value: \"burkina-faso\",\n  },\n  { code: \"bi\", continent: \"Africa\", label: \"Burundi\", value: \"burundi\" },\n  { code: \"kh\", continent: \"Asia\", label: \"Cambodia\", value: \"cambodia\" },\n  { code: \"cm\", continent: \"Africa\", label: \"Cameroon\", value: \"cameroon\" },\n  { code: \"ca\", continent: \"North America\", label: \"Canada\", value: \"canada\" },\n  { code: \"cv\", continent: \"Africa\", label: \"Cape Verde\", value: \"cape-verde\" },\n  {\n    code: \"cf\",\n    continent: \"Africa\",\n    label: \"Central African Republic\",\n    value: \"central-african-republic\",\n  },\n  { code: \"td\", continent: \"Africa\", label: \"Chad\", value: \"chad\" },\n  { code: \"cl\", continent: \"South America\", label: \"Chile\", value: \"chile\" },\n  { code: \"cn\", continent: \"Asia\", label: \"China\", value: \"china\" },\n  {\n    code: \"co\",\n    continent: \"South America\",\n    label: \"Colombia\",\n    value: \"colombia\",\n  },\n  { code: \"km\", continent: \"Africa\", label: \"Comoros\", value: \"comoros\" },\n  { code: \"cg\", continent: \"Africa\", label: \"Congo\", value: \"congo\" },\n  {\n    code: \"cr\",\n    continent: \"North America\",\n    label: \"Costa Rica\",\n    value: \"costa-rica\",\n  },\n  { code: \"hr\", continent: \"Europe\", label: \"Croatia\", value: \"croatia\" },\n  { code: \"cu\", continent: \"North America\", label: \"Cuba\", value: \"cuba\" },\n  { code: \"cy\", continent: \"Asia\", label: \"Cyprus\", value: \"cyprus\" },\n  {\n    code: \"cz\",\n    continent: \"Europe\",\n    label: \"Czech Republic\",\n    value: \"czech-republic\",\n  },\n  { code: \"dk\", continent: \"Europe\", label: \"Denmark\", value: \"denmark\" },\n  { code: \"dj\", continent: \"Africa\", label: \"Djibouti\", value: \"djibouti\" },\n  {\n    code: \"dm\",\n    continent: \"North America\",\n    label: \"Dominica\",\n    value: \"dominica\",\n  },\n  {\n    code: \"do\",\n    continent: \"North America\",\n    label: \"Dominican Republic\",\n    value: \"dominican-republic\",\n  },\n  {\n    code: \"ec\",\n    continent: \"South America\",\n    label: \"Ecuador\",\n    value: \"ecuador\",\n  },\n  { code: \"eg\", continent: \"Africa\", label: \"Egypt\", value: \"egypt\" },\n  {\n    code: \"sv\",\n    continent: \"North America\",\n    label: \"El Salvador\",\n    value: \"el-salvador\",\n  },\n  {\n    code: \"gq\",\n    continent: \"Africa\",\n    label: \"Equatorial Guinea\",\n    value: \"equatorial-guinea\",\n  },\n  { code: \"er\", continent: \"Africa\", label: \"Eritrea\", value: \"eritrea\" },\n  { code: \"ee\", continent: \"Europe\", label: \"Estonia\", value: \"estonia\" },\n  { code: \"et\", continent: \"Africa\", label: \"Ethiopia\", value: \"ethiopia\" },\n  { code: \"fj\", continent: \"Oceania\", label: \"Fiji\", value: \"fiji\" },\n  { code: \"fi\", continent: \"Europe\", label: \"Finland\", value: \"finland\" },\n  { code: \"fr\", continent: \"Europe\", label: \"France\", value: \"france\" },\n  { code: \"ga\", continent: \"Africa\", label: \"Gabon\", value: \"gabon\" },\n  { code: \"gm\", continent: \"Africa\", label: \"Gambia\", value: \"gambia\" },\n  { code: \"ge\", continent: \"Asia\", label: \"Georgia\", value: \"georgia\" },\n  { code: \"de\", continent: \"Europe\", label: \"Germany\", value: \"germany\" },\n  { code: \"gh\", continent: \"Africa\", label: \"Ghana\", value: \"ghana\" },\n  { code: \"gr\", continent: \"Europe\", label: \"Greece\", value: \"greece\" },\n  {\n    code: \"gd\",\n    continent: \"North America\",\n    label: \"Grenada\",\n    value: \"grenada\",\n  },\n  {\n    code: \"gt\",\n    continent: \"North America\",\n    label: \"Guatemala\",\n    value: \"guatemala\",\n  },\n  { code: \"gn\", continent: \"Africa\", label: \"Guinea\", value: \"guinea\" },\n  {\n    code: \"gw\",\n    continent: \"Africa\",\n    label: \"Guinea-Bissau\",\n    value: \"guinea-bissau\",\n  },\n  { code: \"gy\", continent: \"South America\", label: \"Guyana\", value: \"guyana\" },\n  { code: \"ht\", continent: \"North America\", label: \"Haiti\", value: \"haiti\" },\n  {\n    code: \"hn\",\n    continent: \"North America\",\n    label: \"Honduras\",\n    value: \"honduras\",\n  },\n  { code: \"hu\", continent: \"Europe\", label: \"Hungary\", value: \"hungary\" },\n  { code: \"is\", continent: \"Europe\", label: \"Iceland\", value: \"iceland\" },\n  { code: \"in\", continent: \"Asia\", label: \"India\", value: \"india\" },\n  { code: \"id\", continent: \"Asia\", label: \"Indonesia\", value: \"indonesia\" },\n  { code: \"ir\", continent: \"Asia\", label: \"Iran\", value: \"iran\" },\n  { code: \"iq\", continent: \"Asia\", label: \"Iraq\", value: \"iraq\" },\n  { code: \"ie\", continent: \"Europe\", label: \"Ireland\", value: \"ireland\" },\n  { code: \"il\", continent: \"Asia\", label: \"Israel\", value: \"israel\" },\n  { code: \"it\", continent: \"Europe\", label: \"Italy\", value: \"italy\" },\n  {\n    code: \"jm\",\n    continent: \"North America\",\n    label: \"Jamaica\",\n    value: \"jamaica\",\n  },\n  { code: \"jp\", continent: \"Asia\", label: \"Japan\", value: \"japan\" },\n  { code: \"jo\", continent: \"Asia\", label: \"Jordan\", value: \"jordan\" },\n  { code: \"kz\", continent: \"Asia\", label: \"Kazakhstan\", value: \"kazakhstan\" },\n  { code: \"ke\", continent: \"Africa\", label: \"Kenya\", value: \"kenya\" },\n  { code: \"kw\", continent: \"Asia\", label: \"Kuwait\", value: \"kuwait\" },\n  { code: \"kg\", continent: \"Asia\", label: \"Kyrgyzstan\", value: \"kyrgyzstan\" },\n  { code: \"la\", continent: \"Asia\", label: \"Laos\", value: \"laos\" },\n  { code: \"lv\", continent: \"Europe\", label: \"Latvia\", value: \"latvia\" },\n  { code: \"lb\", continent: \"Asia\", label: \"Lebanon\", value: \"lebanon\" },\n  { code: \"ls\", continent: \"Africa\", label: \"Lesotho\", value: \"lesotho\" },\n  { code: \"lr\", continent: \"Africa\", label: \"Liberia\", value: \"liberia\" },\n  { code: \"ly\", continent: \"Africa\", label: \"Libya\", value: \"libya\" },\n  {\n    code: \"li\",\n    continent: \"Europe\",\n    label: \"Liechtenstein\",\n    value: \"liechtenstein\",\n  },\n  { code: \"lt\", continent: \"Europe\", label: \"Lithuania\", value: \"lithuania\" },\n  { code: \"lu\", continent: \"Europe\", label: \"Luxembourg\", value: \"luxembourg\" },\n  { code: \"mg\", continent: \"Africa\", label: \"Madagascar\", value: \"madagascar\" },\n  { code: \"mw\", continent: \"Africa\", label: \"Malawi\", value: \"malawi\" },\n  { code: \"my\", continent: \"Asia\", label: \"Malaysia\", value: \"malaysia\" },\n  { code: \"mv\", continent: \"Asia\", label: \"Maldives\", value: \"maldives\" },\n  { code: \"ml\", continent: \"Africa\", label: \"Mali\", value: \"mali\" },\n  { code: \"mt\", continent: \"Europe\", label: \"Malta\", value: \"malta\" },\n  {\n    code: \"mh\",\n    continent: \"Oceania\",\n    label: \"Marshall Islands\",\n    value: \"marshall-islands\",\n  },\n  { code: \"mr\", continent: \"Africa\", label: \"Mauritania\", value: \"mauritania\" },\n  { code: \"mu\", continent: \"Africa\", label: \"Mauritius\", value: \"mauritius\" },\n  { code: \"mx\", continent: \"North America\", label: \"Mexico\", value: \"mexico\" },\n  {\n    code: \"fm\",\n    continent: \"Oceania\",\n    label: \"Micronesia\",\n    value: \"micronesia\",\n  },\n  { code: \"md\", continent: \"Europe\", label: \"Moldova\", value: \"moldova\" },\n  { code: \"mc\", continent: \"Europe\", label: \"Monaco\", value: \"monaco\" },\n  { code: \"mn\", continent: \"Asia\", label: \"Mongolia\", value: \"mongolia\" },\n  { code: \"me\", continent: \"Europe\", label: \"Montenegro\", value: \"montenegro\" },\n  { code: \"ma\", continent: \"Africa\", label: \"Morocco\", value: \"morocco\" },\n  { code: \"mz\", continent: \"Africa\", label: \"Mozambique\", value: \"mozambique\" },\n  { code: \"mm\", continent: \"Asia\", label: \"Myanmar\", value: \"myanmar\" },\n  { code: \"na\", continent: \"Africa\", label: \"Namibia\", value: \"namibia\" },\n  { code: \"nr\", continent: \"Oceania\", label: \"Nauru\", value: \"nauru\" },\n  { code: \"np\", continent: \"Asia\", label: \"Nepal\", value: \"nepal\" },\n  {\n    code: \"nl\",\n    continent: \"Europe\",\n    label: \"Netherlands\",\n    value: \"netherlands\",\n  },\n  {\n    code: \"nz\",\n    continent: \"Oceania\",\n    label: \"New Zealand\",\n    value: \"new-zealand\",\n  },\n  {\n    code: \"ni\",\n    continent: \"North America\",\n    label: \"Nicaragua\",\n    value: \"nicaragua\",\n  },\n  { code: \"ne\", continent: \"Africa\", label: \"Niger\", value: \"niger\" },\n  { code: \"ng\", continent: \"Africa\", label: \"Nigeria\", value: \"nigeria\" },\n  { code: \"kp\", continent: \"Asia\", label: \"North Korea\", value: \"north-korea\" },\n  {\n    code: \"mk\",\n    continent: \"Europe\",\n    label: \"North Macedonia\",\n    value: \"north-macedonia\",\n  },\n  { code: \"no\", continent: \"Europe\", label: \"Norway\", value: \"norway\" },\n  { code: \"om\", continent: \"Asia\", label: \"Oman\", value: \"oman\" },\n  { code: \"pk\", continent: \"Asia\", label: \"Pakistan\", value: \"pakistan\" },\n  { code: \"pw\", continent: \"Oceania\", label: \"Palau\", value: \"palau\" },\n  { code: \"ps\", continent: \"Asia\", label: \"Palestine\", value: \"palestine\" },\n  { code: \"pa\", continent: \"North America\", label: \"Panama\", value: \"panama\" },\n  {\n    code: \"pg\",\n    continent: \"Oceania\",\n    label: \"Papua New Guinea\",\n    value: \"papua-new-guinea\",\n  },\n  {\n    code: \"py\",\n    continent: \"South America\",\n    label: \"Paraguay\",\n    value: \"paraguay\",\n  },\n  { code: \"pe\", continent: \"South America\", label: \"Peru\", value: \"peru\" },\n  { code: \"ph\", continent: \"Asia\", label: \"Philippines\", value: \"philippines\" },\n  { code: \"pl\", continent: \"Europe\", label: \"Poland\", value: \"poland\" },\n  { code: \"pt\", continent: \"Europe\", label: \"Portugal\", value: \"portugal\" },\n  { code: \"qa\", continent: \"Asia\", label: \"Qatar\", value: \"qatar\" },\n  { code: \"ro\", continent: \"Europe\", label: \"Romania\", value: \"romania\" },\n  { code: \"ru\", continent: \"Europe\", label: \"Russia\", value: \"russia\" },\n  { code: \"rw\", continent: \"Africa\", label: \"Rwanda\", value: \"rwanda\" },\n  { code: \"ws\", continent: \"Oceania\", label: \"Samoa\", value: \"samoa\" },\n  { code: \"sm\", continent: \"Europe\", label: \"San Marino\", value: \"san-marino\" },\n  {\n    code: \"sa\",\n    continent: \"Asia\",\n    label: \"Saudi Arabia\",\n    value: \"saudi-arabia\",\n  },\n  { code: \"sn\", continent: \"Africa\", label: \"Senegal\", value: \"senegal\" },\n  { code: \"rs\", continent: \"Europe\", label: \"Serbia\", value: \"serbia\" },\n  { code: \"sc\", continent: \"Africa\", label: \"Seychelles\", value: \"seychelles\" },\n  {\n    code: \"sl\",\n    continent: \"Africa\",\n    label: \"Sierra Leone\",\n    value: \"sierra-leone\",\n  },\n  { code: \"sg\", continent: \"Asia\", label: \"Singapore\", value: \"singapore\" },\n  { code: \"sk\", continent: \"Europe\", label: \"Slovakia\", value: \"slovakia\" },\n  { code: \"si\", continent: \"Europe\", label: \"Slovenia\", value: \"slovenia\" },\n  {\n    code: \"sb\",\n    continent: \"Oceania\",\n    label: \"Solomon Islands\",\n    value: \"solomon-islands\",\n  },\n  { code: \"so\", continent: \"Africa\", label: \"Somalia\", value: \"somalia\" },\n  {\n    code: \"za\",\n    continent: \"Africa\",\n    label: \"South Africa\",\n    value: \"south-africa\",\n  },\n  { code: \"kr\", continent: \"Asia\", label: \"South Korea\", value: \"south-korea\" },\n  {\n    code: \"ss\",\n    continent: \"Africa\",\n    label: \"South Sudan\",\n    value: \"south-sudan\",\n  },\n  { code: \"es\", continent: \"Europe\", label: \"Spain\", value: \"spain\" },\n  { code: \"lk\", continent: \"Asia\", label: \"Sri Lanka\", value: \"sri-lanka\" },\n  { code: \"sd\", continent: \"Africa\", label: \"Sudan\", value: \"sudan\" },\n  {\n    code: \"sr\",\n    continent: \"South America\",\n    label: \"Suriname\",\n    value: \"suriname\",\n  },\n  { code: \"se\", continent: \"Europe\", label: \"Sweden\", value: \"sweden\" },\n  {\n    code: \"ch\",\n    continent: \"Europe\",\n    label: \"Switzerland\",\n    value: \"switzerland\",\n  },\n  { code: \"sy\", continent: \"Asia\", label: \"Syria\", value: \"syria\" },\n  { code: \"tw\", continent: \"Asia\", label: \"Taiwan\", value: \"taiwan\" },\n  { code: \"tj\", continent: \"Asia\", label: \"Tajikistan\", value: \"tajikistan\" },\n  { code: \"tz\", continent: \"Africa\", label: \"Tanzania\", value: \"tanzania\" },\n  { code: \"th\", continent: \"Asia\", label: \"Thailand\", value: \"thailand\" },\n  { code: \"tl\", continent: \"Asia\", label: \"Timor-Leste\", value: \"timor-leste\" },\n  { code: \"tg\", continent: \"Africa\", label: \"Togo\", value: \"togo\" },\n  { code: \"to\", continent: \"Oceania\", label: \"Tonga\", value: \"tonga\" },\n  {\n    code: \"tt\",\n    continent: \"North America\",\n    label: \"Trinidad and Tobago\",\n    value: \"trinidad-and-tobago\",\n  },\n  { code: \"tn\", continent: \"Africa\", label: \"Tunisia\", value: \"tunisia\" },\n  { code: \"tr\", continent: \"Asia\", label: \"Turkey\", value: \"turkey\" },\n  {\n    code: \"tm\",\n    continent: \"Asia\",\n    label: \"Turkmenistan\",\n    value: \"turkmenistan\",\n  },\n  { code: \"tv\", continent: \"Oceania\", label: \"Tuvalu\", value: \"tuvalu\" },\n  { code: \"ug\", continent: \"Africa\", label: \"Uganda\", value: \"uganda\" },\n  { code: \"ua\", continent: \"Europe\", label: \"Ukraine\", value: \"ukraine\" },\n  {\n    code: \"ae\",\n    continent: \"Asia\",\n    label: \"United Arab Emirates\",\n    value: \"united-arab-emirates\",\n  },\n  {\n    code: \"gb\",\n    continent: \"Europe\",\n    label: \"United Kingdom\",\n    value: \"united-kingdom\",\n  },\n  {\n    code: \"us\",\n    continent: \"North America\",\n    label: \"United States\",\n    value: \"united-states\",\n  },\n  {\n    code: \"uy\",\n    continent: \"South America\",\n    label: \"Uruguay\",\n    value: \"uruguay\",\n  },\n  { code: \"uz\", continent: \"Asia\", label: \"Uzbekistan\", value: \"uzbekistan\" },\n  { code: \"vu\", continent: \"Oceania\", label: \"Vanuatu\", value: \"vanuatu\" },\n  {\n    code: \"va\",\n    continent: \"Europe\",\n    label: \"Vatican City\",\n    value: \"vatican-city\",\n  },\n  {\n    code: \"ve\",\n    continent: \"South America\",\n    label: \"Venezuela\",\n    value: \"venezuela\",\n  },\n  { code: \"vn\", continent: \"Asia\", label: \"Vietnam\", value: \"vietnam\" },\n  { code: \"ye\", continent: \"Asia\", label: \"Yemen\", value: \"yemen\" },\n  { code: \"zm\", continent: \"Africa\", label: \"Zambia\", value: \"zambia\" },\n  { code: \"zw\", continent: \"Africa\", label: \"Zimbabwe\", value: \"zimbabwe\" },\n];\n\nexport default function Particle() {\n  return (\n    <Combobox defaultValue={countries[0]} items={countries}>\n      <ComboboxTrigger\n        render={\n          <Button\n            className=\"w-full justify-between font-normal\"\n            variant=\"outline\"\n          />\n        }\n      >\n        <ComboboxValue />\n        <ChevronsUpDownIcon className=\"-me-1!\" />\n      </ComboboxTrigger>\n      <ComboboxPopup aria-label=\"Select country\">\n        <div className=\"border-b p-2\">\n          <ComboboxInput\n            className=\"rounded-md before:rounded-[calc(var(--radius-md)-1px)]\"\n            placeholder=\"e.g. United Kingdom\"\n            showTrigger={false}\n            startAddon={<SearchIcon />}\n          />\n        </div>\n        <ComboboxEmpty>No countries found.</ComboboxEmpty>\n        <ComboboxList>\n          {(country: Country) => (\n            <ComboboxItem key={country.code} value={country}>\n              {country.label}\n            </ComboboxItem>\n          )}\n        </ComboboxList>\n      </ComboboxPopup>\n    </Combobox>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "meta": {
    "className": "**:data-[slot=preview]:w-full **:data-[slot=preview]:max-w-64"
  },
  "categories": [
    "combobox",
    "input"
  ],
  "type": "registry:block"
}