{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "native-select",
  "title": "Native Select",
  "author": "Matthew Blode",
  "description": "A styled wrapper around the native HTML select element.",
  "files": [
    {
      "path": "ui/native-select.tsx",
      "content": "import { ChevronDownIcon } from \"blode-icons-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst NativeSelect = ({\n  className,\n  size = \"default\",\n  ...props\n}: Omit<React.ComponentProps<\"select\">, \"size\"> & { size?: \"sm\" | \"default\" }) => (\n  <div\n    className=\"group/native-select relative w-full has-[select:disabled]:opacity-50\"\n    data-slot=\"native-select-wrapper\"\n  >\n    <select\n      className={cn(\n        \"input flex h-[var(--field-height)] w-full min-w-0 appearance-none rounded-[var(--field-radius)] border border-input bg-card px-[var(--field-padding-x)] py-[var(--field-padding-y)] pr-10 font-normal font-sans text-base text-foreground leading-snug shadow-input transition-colors placeholder:text-placeholder-foreground hover:border-input-hover focus:border-ring focus:outline-hidden focus:ring-2 focus:ring-ring/15 focus:ring-offset-1 focus:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive-foreground aria-invalid:ring-destructive/20 data-[size=sm]:h-[var(--field-height-sm)] data-[size=sm]:py-[calc(var(--field-padding-y)-2px)] sm:data-[size=sm]:text-sm dark:aria-invalid:ring-destructive/40\",\n        className,\n      )}\n      data-size={size}\n      data-slot=\"native-select\"\n      {...props}\n    />\n    <ChevronDownIcon\n      aria-hidden=\"true\"\n      className=\"pointer-events-none absolute top-1/2 right-[var(--field-padding-x)] size-4 -translate-y-1/2 select-none text-muted-foreground opacity-50\"\n      data-slot=\"native-select-icon\"\n    />\n  </div>\n);\n\nconst NativeSelectOption = ({ ...props }: React.ComponentProps<\"option\">) => (\n  <option data-slot=\"native-select-option\" {...props} />\n);\n\nconst NativeSelectOptGroup = ({ className, ...props }: React.ComponentProps<\"optgroup\">) => (\n  <optgroup className={cn(className)} data-slot=\"native-select-optgroup\" {...props} />\n);\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption };\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}