{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "table-with-autocomplete-example",
  "title": "Table With Autocomplete",
  "description": "table-with-autocomplete-example",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/card",
    "https://intentui.com/r/menu",
    "https://intentui.com/r/search-field",
    "https://intentui.com/r/table",
    "https://intentui.com/r/button"
  ],
  "files": [
    {
      "path": "src/components/examples/collections/table/table-with-autocomplete-example.tsx",
      "content": "'use client'\nimport { EllipsisVerticalIcon } from '@heroicons/react/16/solid'\nimport { use, useMemo } from 'react'\nimport {\n  Autocomplete,\n  AutocompleteStateContext,\n  useFilter,\n} from 'react-aria-components/Autocomplete'\nimport { CardAction, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Menu, MenuContent, MenuItem, MenuSeparator } from '@/components/ui/menu'\nimport { SearchField, SearchInput } from '@/components/ui/search-field'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableColumn,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table'\nimport { Button } from '@/components/ui/button'\n\nexport default function TableDemo() {\n  const { contains } = useFilter({\n    sensitivity: 'base',\n  })\n  return (\n    <div className=\"rounded-lg border p-4\">\n      <Autocomplete filter={contains}>\n        <CardHeader>\n          <CardTitle>Users</CardTitle>\n          <CardDescription>A list of users with search functionality.</CardDescription>\n          <CardAction>\n            <SearchField aria-label=\"Search\">\n              <SearchInput placeholder=\"Search\" />\n            </SearchField>\n          </CardAction>\n        </CardHeader>\n        <Table className=\"mt-4\" aria-label=\"Users\">\n          <TableHeader>\n            <TableColumn className=\"w-0\">#</TableColumn>\n            <TableColumn isRowHeader>Name</TableColumn>\n            <TableColumn>Email</TableColumn>\n            <TableColumn>Role</TableColumn>\n            <TableColumn>Status</TableColumn>\n            <TableColumn>Joined</TableColumn>\n            <TableColumn />\n          </TableHeader>\n          <TableBody items={users}>\n            {(item) => (\n              <TableRow id={item.id}>\n                <TableCell>{item.id}</TableCell>\n                <TableCell textValue={item.name}>\n                  <AutocompleteHighlight>{item.name}</AutocompleteHighlight>\n                </TableCell>\n                <TableCell textValue={item.email}>\n                  <AutocompleteHighlight>{item.email}</AutocompleteHighlight>\n                </TableCell>\n                <TableCell textValue={item.role}>\n                  <AutocompleteHighlight>{item.role}</AutocompleteHighlight>\n                </TableCell>\n                <TableCell textValue={item.status}>\n                  <AutocompleteHighlight>{item.status}</AutocompleteHighlight>\n                </TableCell>\n                <TableCell>{item.joined}</TableCell>\n                <TableCell>\n                  <div className=\"flex justify-end\">\n                    <Menu>\n                      <Button intent=\"plain\" size=\"sq-sm\" className=\"sm:w-6\">\n                        <EllipsisVerticalIcon />\n                      </Button>\n                      <MenuContent aria-label=\"Actions\" placement=\"left top\">\n                        <MenuItem>View</MenuItem>\n                        <MenuItem>Edit</MenuItem>\n                        <MenuSeparator />\n                        <MenuItem intent=\"danger\">Delete</MenuItem>\n                      </MenuContent>\n                    </Menu>\n                  </div>\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n      </Autocomplete>\n    </div>\n  )\n}\n\nconst users = [\n  {\n    id: '1',\n    name: 'Justice Larkin',\n    email: 'justice.larkin@example.com',\n    role: 'Admin',\n    status: 'Active',\n    joined: '2022-01-15',\n  },\n  {\n    id: '2',\n    name: 'Megan Smith',\n    email: 'megan.smith@example.com',\n    role: 'Editor',\n    status: 'Active',\n    joined: '2022-03-12',\n  },\n  {\n    id: '3',\n    name: 'Daniel Wu',\n    email: 'daniel.wu@example.com',\n    role: 'Viewer',\n    status: 'Inactive',\n    joined: '2022-04-08',\n  },\n  {\n    id: '4',\n    name: 'Sophia Hernandez',\n    email: 'sophia.hernandez@example.com',\n    role: 'Admin',\n    status: 'Active',\n    joined: '2022-05-25',\n  },\n  {\n    id: '5',\n    name: 'Liam Johnson',\n    email: 'liam.johnson@example.com',\n    role: 'Editor',\n    status: 'Suspended',\n    joined: '2022-06-14',\n  },\n  {\n    id: '6',\n    name: 'Emily Brown',\n    email: 'emily.brown@example.com',\n    role: 'Viewer',\n    status: 'Active',\n    joined: '2022-07-09',\n  },\n  {\n    id: '7',\n    name: 'Noah Miller',\n    email: 'noah.miller@example.com',\n    role: 'Admin',\n    status: 'Active',\n    joined: '2022-08-02',\n  },\n  {\n    id: '8',\n    name: 'Ava Wilson',\n    email: 'ava.wilson@example.com',\n    role: 'Editor',\n    status: 'Inactive',\n    joined: '2022-09-19',\n  },\n  {\n    id: '9',\n    name: 'Ethan Davis',\n    email: 'ethan.davis@example.com',\n    role: 'Viewer',\n    status: 'Active',\n    joined: '2022-10-21',\n  },\n  {\n    id: '10',\n    name: 'Olivia Martinez',\n    email: 'olivia.martinez@example.com',\n    role: 'Editor',\n    status: 'Active',\n    joined: '2022-11-30',\n  },\n]\n\nfunction AutocompleteHighlight({ children }: { children: string }) {\n  const state = use(AutocompleteStateContext)!\n  const index = useMemo(() => {\n    // TODO: use a better case-insensitive matching algorithm\n    return children.toLowerCase().indexOf(state.inputValue.toLowerCase())\n  }, [children, state.inputValue])\n\n  if (index >= 0) {\n    return (\n      <>\n        {children.slice(0, index)}\n        <mark className=\"bg-primary text-primary-fg\">\n          {children.slice(index, index + state.inputValue.length)}\n        </mark>\n        {children.slice(index + state.inputValue.length)}\n      </>\n    )\n  }\n\n  return children\n}\n",
      "type": "registry:page",
      "target": "app/table-with-autocomplete-example/page.tsx"
    }
  ],
  "type": "registry:page"
}