{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-select3",
  "title": "Native select",
  "description": "A native select element styled with shadcn/ui. Each variant is equally at home in Radix UI and Base UI projects.",
  "files": [
    {
      "path": "contents/components/native-select/3/index.tsx",
      "content": "import { ClockIcon } from \"lucide-react\";\n\nimport { NativeSelect, NativeSelectOption } from \"@/components/ui/native-select\";\n\nexport default function NativeSelectComponent() {\n  return (\n    <div className=\"group relative w-full max-w-xs *:data-[slot=native-select-wrapper]:w-full\">\n      <NativeSelect className=\"ps-9\">\n        <NativeSelectOption value=\"1\">00:00 AM - 11:59 PM</NativeSelectOption>\n        <NativeSelectOption value=\"2\">01:00 AM - 12:59 PM</NativeSelectOption>\n        <NativeSelectOption value=\"3\">02:00 AM - 01:59 PM</NativeSelectOption>\n        <NativeSelectOption value=\"4\">03:00 AM - 02:59 PM</NativeSelectOption>\n      </NativeSelect>\n      <div className=\"text-muted-foreground/80 pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 group-has-[select[disabled]]:opacity-50\">\n        <ClockIcon aria-hidden=\"true\" size={16} />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/native-select3.tsx"
    }
  ],
  "type": "registry:component"
}