{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-select",
  "title": "Native Select",
  "description": "A styled native select: platform pickers, autofill, zero JavaScript.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/native-select.tsx",
      "content": "import * as React from \"react\";\nimport { ChevronDownIcon } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A styled native <select>: the platform picker on mobile, autofill and form submission for free, zero JavaScript.\n * Reach for it in long forms and on mobile-heavy pages; use Select when you need custom option content.\n */\nfunction NativeSelect({ className, size = \"md\", ...props }: Omit<React.ComponentProps<\"select\">, \"size\"> & { size?: \"sm\" | \"md\" | \"lg\" }) {\n  return (\n    <div data-slot=\"native-select\" className={cn(\"relative w-fit\", className)}>\n      <select\n        className={cn(\n          \"w-full min-w-40 appearance-none rounded-md border border-input bg-card ps-3 pe-9 text-sm shadow-control outline-none transition-[border-color,box-shadow] duration-150 ease-cue hover:border-ring/40 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive\",\n          { sm: \"h-ctl-sm text-[0.8125rem]\", md: \"h-ctl-md\", lg: \"h-ctl-lg\" }[size],\n        )}\n        {...props}\n      />\n      <ChevronDownIcon aria-hidden=\"true\" className=\"pointer-events-none absolute end-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground\" />\n    </div>\n  );\n}\n\nexport { NativeSelect };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/native-select",
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}