{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-3",
  "type": "registry:component",
  "title": "Select 3",
  "description": "Select 3. A versatile selection component that provides a sleek, accessible way to choose options from a list.",
  "dependencies": [
    "@tabler/icons-react"
  ],
  "registryDependencies": [
    "label",
    "native-select"
  ],
  "files": [
    {
      "path": "components/watermelon/select-3.tsx",
      "type": "registry:component",
      "content": "import { useId } from 'react';\nimport { IconDatabase } from '@tabler/icons-react';\n\nimport { Label } from '@/components/base-ui/label';\nimport { NativeSelect } from '@/components/base-ui/native-select';\n\nconst Select3 = () => {\n  const id = useId();\n\n  return (\n    <div className=\"w-full max-w-xs space-y-2\">\n      <Label htmlFor={id} className=\"text-zinc-600 dark:text-zinc-400\">\n        Metric Architecture\n      </Label>\n      <div className=\"group relative w-full\">\n        <NativeSelect \n          id={id} \n          className=\"w-full [&_select]:!pl-9 [&_select]:!rounded-xl [&_select]:!border-zinc-200 dark:[&_select]:!border-zinc-800 dark:[&_select]:!bg-zinc-950 transition-all [&_select]:focus-visible:ring-zinc-400/20 dark:[&_select]:focus-visible:ring-zinc-500/20 dark:[&_select]:[color-scheme:dark]\"\n          defaultValue=\"\"\n        >\n          <option value=\"\" disabled className=\"dark:bg-zinc-950 dark:text-zinc-500\">Identify stream type</option>\n          <option value=\"logs\" className=\"dark:bg-zinc-950 dark:text-zinc-100\">Unified System Logs</option>\n          <option value=\"events\" className=\"dark:bg-zinc-950 dark:text-zinc-100\">Transaction Events</option>\n          <option value=\"metrics\" className=\"dark:bg-zinc-950 dark:text-zinc-100\">Performance Metrics</option>\n          <option value=\"traces\" className=\"dark:bg-zinc-950 dark:text-zinc-100\">Distributed Traces</option>\n        </NativeSelect>\n        <div className=\"text-zinc-400 pointer-events-none absolute inset-y-0 left-0 flex items-center justify-center pl-3 group-has-[select:disabled]:opacity-50 dark:text-zinc-600\">\n          <IconDatabase size={16} stroke={1.5} aria-hidden=\"true\" />\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Select3;\n"
    }
  ]
}