{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "multiple-selector-with-sync-search",
  "title": "Multiple Selector With Sync Search And Creatable And Group",
  "description": "component for the Multiple Selector With Sync Search And Creatable And Group",
  "registryDependencies": [
    "@spectrumui/multiple-selector-dependencies",
    "@spectrumui/heading-with-anchor"
  ],
  "files": [
    {
      "path": "app/registry/multiple-selector/usage/multiple-selector-with-sync-search.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport MultipleSelector, {\n  Option,\n} from \"@/app/registry/spectrumui/multiple-selector-dependencies\";\nimport { H4 } from \"@/app/registry/spectrumui/heading-with-anchor\";\n\nconst OPTIONS: Option[] = [\n  { label: \"nextjs\", value: \"nextjs\" },\n  { label: \"React\", value: \"react\" },\n  { label: \"Remix\", value: \"remix\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Nuxt\", value: \"nuxt\" },\n  { label: \"Vue\", value: \"vue\" },\n  { label: \"Svelte\", value: \"svelte\" },\n  { label: \"Angular\", value: \"angular\" },\n  { label: \"Ember\", value: \"ember\" },\n  { label: \"Gatsby\", value: \"gatsby\" },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nconst GROUP_OPTIONS: Option[] = [\n  { label: \"nextjs\", value: \"nextjs\", group: \"React\" },\n  { label: \"React\", value: \"react\", group: \"React\" },\n  { label: \"Remix\", value: \"remix\", group: \"React\" },\n  { label: \"shadcn-ui\", value: \"shadcn-ui\", group: \"React\" },\n  { label: \"mui\", value: \"mui\", group: \"React\" },\n  { label: \"Vite\", value: \"vite\", group: \"Vue\" },\n  { label: \"Nuxt\", value: \"nuxt\", group: \"Vue\" },\n  { label: \"Vue\", value: \"vue\", group: \"Vue\" },\n  { label: \"Quasar\", value: \"quasar\", group: \"Vue\" },\n  { label: \"Angular\", value: \"angular\", group: \"Angular\" },\n  { label: \"Material UI\", value: \"material-ui\", group: \"Angular\" },\n  { label: \"Ng-zorro\", value: \"ng-zorro\", group: \"Angular\" },\n];\n\nconst mockSearch = (value: string): Option[] => {\n  return OPTIONS.filter((option) => option.value.includes(value));\n};\n\nconst mockSearchGroup = (value: string): Option[] => {\n  return GROUP_OPTIONS.filter((option) => option.value.includes(value));\n};\n\nconst MultipleSelectorWithSyncSearch = () => {\n  return (\n    <div className=\"flex w-full flex-col gap-5 px-10\">\n      <H4>Sync search</H4>\n      <MultipleSelector\n        onSearchSync={(value) => {\n          const res = mockSearch(value);\n          return res;\n        }}\n        placeholder=\"trying to search 'a' to get more options...\"\n        emptyIndicator={\n          <p className=\"w-full text-center text-lg leading-10 text-muted-foreground\">\n            no results found.\n          </p>\n        }\n      />\n      <H4>Creatable</H4>\n      <MultipleSelector\n        onSearchSync={(value) => {\n          const res = mockSearch(value);\n          return res;\n        }}\n        placeholder=\"trying to search 'a' to get more options...\"\n        creatable\n        emptyIndicator={\n          <p className=\"w-full text-center text-lg leading-10 text-muted-foreground\">\n            no results found.\n          </p>\n        }\n      />\n\n      <H4>GroupBy</H4>\n      <MultipleSelector\n        onSearchSync={(value) => {\n          const res = mockSearchGroup(value);\n          return res;\n        }}\n        placeholder=\"trying to search 'a' to get more options...\"\n        groupBy=\"group\"\n        creatable\n        emptyIndicator={\n          <p className=\"w-full text-center text-lg leading-10 text-muted-foreground\">\n            no results found.\n          </p>\n        }\n      />\n\n      <H4>Debounce</H4>\n      <MultipleSelector\n        onSearchSync={(value) => {\n          const res = mockSearch(value);\n          return res;\n        }}\n        placeholder=\"trying to search 'a' to get more options...\"\n        delay={1000}\n        emptyIndicator={\n          <p className=\"w-full text-center text-lg leading-10 text-muted-foreground\">\n            no results found.\n          </p>\n        }\n      />\n    </div>\n  );\n};\n\nexport default MultipleSelectorWithSyncSearch;\n",
      "type": "registry:component",
      "target": "components/spectrumui/multiple-selector-with-sync-search.tsx"
    }
  ],
  "type": "registry:component"
}