{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-9",
  "type": "registry:component",
  "title": "Select 9",
  "description": "Select 9. A versatile selection component that provides a sleek, accessible way to choose options from a list.",
  "dependencies": [],
  "registryDependencies": [
    "native-select"
  ],
  "files": [
    {
      "path": "components/watermelon/select-9.tsx",
      "type": "registry:component",
      "content": "import { useId } from 'react';\n\nimport { NativeSelect } from '@/components/base-ui/native-select';\n\nconst Select9 = () => {\n  const id = useId();\n\n  return (\n    <div className='border-input bg-background focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive relative w-full max-w-xs rounded-xl border shadow-xs transition-[color,box-shadow] outline-none focus-within:ring-[3px] has-[select:disabled]:cursor-not-allowed has-[select:disabled]:opacity-50 has-[select:is(:disabled)_*]:pointer-events-none dark:border-zinc-800 dark:bg-zinc-950'>\n      <label htmlFor={id} className='text-zinc-500 block px-3 pt-2 text-[10px] font-bold uppercase tracking-wider dark:text-zinc-500'>\n        Security clearance\n      </label>\n      <NativeSelect \n        id={id} \n        defaultValue=\"\"\n        className=\"!w-full [&_select]:!w-full [&_select]:!h-9 [&_select]:!border-none [&_select]:!bg-transparent [&_select]:!px-3 [&_select]:!shadow-none [&_select]:!ring-0 [&_select]:!ring-offset-0 [&_select]:!focus:ring-0 [&_select]:!focus-visible:ring-0 [&_select]:!focus-visible:outline-none [&_select]:!outline-none [&_select]:text-zinc-900 dark:[&_select]:text-zinc-100 dark:[&_select]:[color-scheme:dark]\"\n      >\n        <option value=\"\" disabled className=\"dark:bg-zinc-950 dark:text-zinc-500\">Pick status level</option>\n        <option value=\"level1\" className=\"dark:bg-zinc-950 dark:text-zinc-100\">Public Access (Level 1)</option>\n        <option value=\"level2\" className=\"dark:bg-zinc-950 dark:text-zinc-100\">Confidential Internal (Level 2)</option>\n        <option value=\"level3\" className=\"dark:bg-zinc-950 dark:text-zinc-100\">Restricted Sensitive (Level 3)</option>\n        <option value=\"level4\" className=\"dark:bg-zinc-950 dark:text-zinc-100\">Top Secret Core (Level 4)</option>\n      </NativeSelect>\n    </div>\n  );\n};\n\nexport default Select9;\n"
    }
  ]
}