{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete-disabled-item-demo",
  "type": "registry:component",
  "title": "Autocomplete Disabled Item Demo",
  "description": "A demo of the autocomplete disabled item",
  "registryDependencies": [
    "https://ui.ednesdayw.com/r/autocomplete.json"
  ],
  "files": [
    {
      "path": "src/registry/example/autocomplete/disabled-item.tsx",
      "content": "\"use client\";\n\nimport {\n  Autocomplete,\n  AutocompleteContent,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n} from \"@/components/ui/autocomplete\";\nimport Image from \"next/image\";\nimport { useState } from \"react\";\n\nconst TOKENS = [\n  {\n    value: \"USDT\",\n    disabled: false,\n  },\n  {\n    value: \"USDC\",\n    disabled: true,\n  },\n  {\n    value: \"USDe\",\n    disabled: false,\n  },\n  {\n    value: \"USDS\",\n    disabled: false,\n  },\n];\n\nexport const AutocompleteDisabledItemExample = () => {\n  const inputVariants = [\"default\", \"faded\", \"bordered\", \"underline\"] as const;\n\n  return (\n    <div className=\"flex flex-col gap-4 w-full max-w-72\">\n      {inputVariants.map((variant) => (\n        <TokenAutocomplete key={variant} variant={variant} />\n      ))}\n    </div>\n  );\n};\n\nconst TokenAutocomplete = ({\n  variant,\n}: {\n  variant: \"default\" | \"faded\" | \"bordered\" | \"underline\";\n}) => {\n  const [token, setToken] = useState(\"\");\n  return (\n    <Autocomplete\n      key={variant}\n      value={token}\n      onChange={setToken}\n      size=\"md\"\n      variant={variant}\n    >\n      <AutocompleteInput\n        placeholder=\"Select a token\"\n        className={variant !== \"underline\" ? \"rounded-2xl\" : \"\"}\n        startContent={\n          token && (\n            <Image\n              src={`/tokens/${token}.svg`}\n              alt={token}\n              width={24}\n              height={24}\n              className=\"rounded-full\"\n            />\n          )\n        }\n      />\n      <AutocompleteContent>\n        {TOKENS.map(({ value, disabled }) => (\n          <AutocompleteItem\n            key={value}\n            value={value}\n            label={value}\n            disabled={disabled}\n          >\n            <div className=\"flex items-center gap-1.5\">\n              <Image\n                src={`/tokens/${value}.svg`}\n                alt={value}\n                width={24}\n                height={24}\n                className=\"rounded-full\"\n              />\n              <span>{value}</span>\n            </div>\n          </AutocompleteItem>\n        ))}\n        <AutocompleteEmpty>No results.</AutocompleteEmpty>\n      </AutocompleteContent>\n    </Autocomplete>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/autocomplete-disabled-item-demo.tsx"
    }
  ]
}