{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete-disabled-demo",
  "type": "registry:component",
  "title": "Autocomplete Disabled Demo",
  "description": "A demo of the autocomplete disabled",
  "registryDependencies": [
    "https://ui.ednesdayw.com/r/autocomplete.json"
  ],
  "files": [
    {
      "path": "src/registry/example/autocomplete/disabled.tsx",
      "content": "import { Label } from \"@/components/ui/label\";\nimport { Switch } from \"@/components/ui/switch\";\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  \"USDT\",\n  \"USDC\",\n  \"USDe\",\n  \"USDS\",\n  \"DAI\",\n  \"USD1\",\n  \"FDUSD\",\n  \"USDY\",\n  \"FRAX\",\n];\n\nexport const AutocompleteDisabledExample = () => {\n  const inputVariants = [\"default\", \"faded\", \"bordered\", \"underline\"] as const;\n  const [disabled, setDisabled] = useState(false);\n\n  return (\n    <div className=\"flex flex-col gap-4 w-full max-w-72\">\n      <div className=\"flex gap-2\">\n        <Switch\n          id=\"autocomplete-disabled\"\n          checked={disabled}\n          onCheckedChange={setDisabled}\n        />\n        <Label htmlFor=\"autocomplete-disabled\">Disabled</Label>\n      </div>\n      {inputVariants.map((variant) => (\n        <TokenAutocomplete\n          key={variant}\n          variant={variant}\n          disabled={disabled}\n        />\n      ))}\n    </div>\n  );\n};\n\nconst TokenAutocomplete = ({\n  disabled,\n  variant,\n}: {\n  disabled: boolean;\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        disabled={disabled}\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((token) => (\n          <AutocompleteItem key={token} value={token} label={token}>\n            <div className=\"flex items-center gap-1.5\">\n              <Image\n                src={`/tokens/${token}.svg`}\n                alt={token}\n                width={24}\n                height={24}\n                className=\"rounded-full\"\n              />\n              <span>{token}</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-demo.tsx"
    }
  ]
}