{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "multiple-selector-ref",
  "title": "Multiple Selector Ref",
  "description": "component for the Multiple Selector Ref",
  "registryDependencies": [
    "@spectrumui/multiple-selector-dependencies",
    "@spectrumui/use-toast",
    "@spectrumui/loading-button-dependencies"
  ],
  "files": [
    {
      "path": "app/registry/multiple-selector/usage/multiple-selector-ref.tsx",
      "content": "\"use client\";\nimport React from \"react\";\nimport MultipleSelector, {\n  type MultipleSelectorRef,\n  Option,\n} from \"@/app/registry/spectrumui/multiple-selector-dependencies\";\nimport { LoadingButton } from \"@/app/registry/spectrumui/loading-button-dependencies\";\nimport { toast } from \"@/app/registry/spectrumui/use-toast\";\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\", disable: true },\n  { label: \"Gatsby\", value: \"gatsby\", disable: true },\n  { label: \"Astro\", value: \"astro\" },\n];\n\nconst MultipleSelectorRef = () => {\n  const ref = React.useRef<MultipleSelectorRef>(null);\n\n  /**\n   * An example for focus on input when component mounted.\n   * I commented it out because it will affect the demo page.\n   **/\n  // useEffect(() => {\n  //   if (ref.current) {\n  //     ref.current.input.focus();\n  //   }\n  // }, []);\n\n  return (\n    <div className=\"w-full px-10\">\n      <MultipleSelector\n        defaultOptions={OPTIONS}\n        ref={ref}\n        placeholder=\"Select frameworks you like...\"\n        emptyIndicator={\n          <p className=\"text-center text-lg leading-10 text-gray-600 dark:text-gray-400\">\n            no results found.\n          </p>\n        }\n      />\n      <div className=\"flex gap-3\">\n        <LoadingButton\n          onClick={() => {\n            toast({\n              title: \"Your ref data\",\n              description: (\n                <pre className=\"mt-2 w-[340px] rounded-md bg-slate-950 p-4\">\n                  <code className=\"text-white\">\n                    {JSON.stringify(ref.current?.selectedValue, null, 2)}\n                  </code>\n                </pre>\n              ),\n            });\n          }}\n        >\n          get value from ref\n        </LoadingButton>\n        <LoadingButton\n          onClick={() => {\n            ref.current?.input.focus();\n          }}\n        >\n          focus on multiple selector\n        </LoadingButton>\n      </div>\n    </div>\n  );\n};\n\nexport default MultipleSelectorRef;\n",
      "type": "registry:component",
      "target": "components/spectrumui/multiple-selector-ref.tsx"
    }
  ],
  "type": "registry:component"
}