{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-select",
  "title": "Native Select",
  "description": "Styled wrapper around the native select element.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/native-select/native-select.tsx",
      "content": "import * as React from \"react\";\n\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Styled wrapper around the native `select` element with a chevron. */\nexport type NativeSelectProps = React.ComponentPropsWithoutRef<\"select\"> & {\n  rootClassName?: string;\n};\n\nconst NativeSelect = ({\n  children,\n  className,\n  ref,\n  rootClassName,\n  ...props\n}: NativeSelectProps & { ref?: React.Ref<HTMLSelectElement> }) => (\n  <div className={cn(\"relative w-full\", rootClassName)}>\n    <select\n      {...props}\n      className={cn(\n        \"h-10 w-full appearance-none rounded-md border border-input bg-background py-2 pl-3 pr-8 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className,\n      )}\n      ref={ref}\n    >\n      {children}\n    </select>\n    <ChevronDown className=\"pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 opacity-50\" />\n  </div>\n);\nNativeSelect.displayName = \"NativeSelect\";\n\nexport { NativeSelect };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}