{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "multiple-selector-commandprops",
  "title": "Multiple Selector Command Props",
  "description": "component for the Multiple Selector Command Props",
  "registryDependencies": [
    "@spectrumui/multiple-selector-dependencies",
    "@spectrumui/inline-code"
  ],
  "files": [
    {
      "path": "app/registry/multiple-selector/usage/multiple-selector-commandprops.tsx",
      "content": "\"use client\";\nimport React, { useState } from \"react\";\n\nimport MultipleSelector, {\n  Option,\n} from \"@/app/registry/spectrumui/multiple-selector-dependencies\";\n\nimport { InlineCode } from \"@/app/registry/spectrumui/inline-code\";\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 MultipleSelectorCommandProps = () => {\n  const [isFocus, setIsFocus] = useState(false);\n  return (\n    <div className=\"flex w-full flex-col gap-5 px-10\">\n      <p>\n        Is focus? <InlineCode>{String(isFocus)}</InlineCode>\n      </p>\n      <p>\n        You can open\n        <InlineCode>command description</InlineCode> and{\" \"}\n        <InlineCode>input description</InlineCode> to check the customization of{\" \"}\n        <InlineCode>aria-description</InlineCode>.\n      </p>\n      <MultipleSelector\n        defaultOptions={OPTIONS}\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        commandProps={{ \"aria-description\": \"command description\" }}\n        inputProps={{\n          onBlur: () => {\n            setIsFocus(false);\n          },\n          onFocus: () => {\n            setIsFocus(true);\n          },\n          \"aria-description\": \"input description\",\n        }}\n      />\n    </div>\n  );\n};\n\nexport default MultipleSelectorCommandProps;\n",
      "type": "registry:component",
      "target": "components/spectrumui/multiple-selector-commandprops.tsx"
    }
  ],
  "type": "registry:component"
}