{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "autocomplete2",
  "title": "Autocomplete",
  "description": "A text field that allows users to select an option from a list.",
  "files": [
    {
      "path": "contents/components/autocomplete/2/index.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  Autocomplete,\n  AutocompleteContent,\n  AutocompleteEmpty,\n  AutocompleteInput,\n  AutocompleteItem,\n  AutocompleteList,\n} from \"@/components/ui/autocomplete\";\n\nexport default function AutocompleteComponent() {\n  const [value, setValue] = useState<string>(\"\");\n\n  const filteredItems = items.filter((item) =>\n    item.value.toLowerCase().includes(value.toLowerCase()),\n  );\n\n  return (\n    <div className=\"w-full max-w-xs\">\n      <Autocomplete\n        value={value}\n        onValueChange={setValue}\n        items={filteredItems}\n        itemToStringValue={(item: unknown) => (item as Item).value}\n      >\n        <AutocompleteInput placeholder=\"e.g. feature\" showClear />\n        <AutocompleteContent>\n          <AutocompleteEmpty>No items found.</AutocompleteEmpty>\n          <AutocompleteList>\n            {(item) => (\n              <AutocompleteItem key={item.id} value={item}>\n                {item.value}\n              </AutocompleteItem>\n            )}\n          </AutocompleteList>\n        </AutocompleteContent>\n      </Autocomplete>\n    </div>\n  );\n}\n\ninterface Item {\n  id: string;\n  value: string;\n}\n\nconst items: Item[] = [\n  { id: \"t1\", value: \"feature\" },\n  { id: \"t2\", value: \"fix\" },\n  { id: \"t3\", value: \"bug\" },\n  { id: \"t4\", value: \"docs\" },\n  { id: \"t5\", value: \"internal\" },\n  { id: \"t6\", value: \"mobile\" },\n  { id: \"c-accordion\", value: \"component: accordion\" },\n  { id: \"c-alert-dialog\", value: \"component: alert dialog\" },\n  { id: \"c-autocomplete\", value: \"component: autocomplete\" },\n  { id: \"c-avatar\", value: \"component: avatar\" },\n  { id: \"c-checkbox\", value: \"component: checkbox\" },\n  { id: \"c-checkbox-group\", value: \"component: checkbox group\" },\n  { id: \"c-collapsible\", value: \"component: collapsible\" },\n  { id: \"c-combobox\", value: \"component: combobox\" },\n  { id: \"c-context-menu\", value: \"component: context menu\" },\n  { id: \"c-dialog\", value: \"component: dialog\" },\n  { id: \"c-field\", value: \"component: field\" },\n  { id: \"c-fieldset\", value: \"component: fieldset\" },\n  { id: \"c-filterable-menu\", value: \"component: filterable menu\" },\n  { id: \"c-form\", value: \"component: form\" },\n  { id: \"c-input\", value: \"component: input\" },\n  { id: \"c-menu\", value: \"component: menu\" },\n  { id: \"c-menubar\", value: \"component: menubar\" },\n  { id: \"c-meter\", value: \"component: meter\" },\n  { id: \"c-navigation-menu\", value: \"component: navigation menu\" },\n  { id: \"c-number-field\", value: \"component: number field\" },\n  { id: \"c-popover\", value: \"component: popover\" },\n  { id: \"c-preview-card\", value: \"component: preview card\" },\n  { id: \"c-progress\", value: \"component: progress\" },\n  { id: \"c-radio\", value: \"component: radio\" },\n  { id: \"c-scroll-area\", value: \"component: scroll area\" },\n  { id: \"c-select\", value: \"component: select\" },\n  { id: \"c-separator\", value: \"component: separator\" },\n  { id: \"c-slider\", value: \"component: slider\" },\n  { id: \"c-switch\", value: \"component: switch\" },\n  { id: \"c-tabs\", value: \"component: tabs\" },\n  { id: \"c-toast\", value: \"component: toast\" },\n  { id: \"c-toggle\", value: \"component: toggle\" },\n  { id: \"c-toggle-group\", value: \"component: toggle group\" },\n  { id: \"c-toolbar\", value: \"component: toolbar\" },\n  { id: \"c-tooltip\", value: \"component: tooltip\" },\n];\n",
      "type": "registry:component",
      "target": "components/autocomplete2.tsx"
    }
  ],
  "type": "registry:component"
}