Native Select

1import { forwardRef } from "react";
2import { cn } from "@/lib/utils";
3import { focusRing, glass } from "@/lib/glass";
4 
5export interface NativeSelectProps extends React.ComponentProps<"select"> {}
6 
7export const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
8  ({ className, children, ...props }, ref) => (
9    <select
10      ref={ref}
11      data-slot="native-select"
12      className={cn(
13        glass,
14        focusRing,
15        "h-10 w-full appearance-none rounded-xl bg-transparent px-4 py-2 pr-10 text-base",
16        "bg-[length:1rem] bg-[right_0.75rem_center] bg-no-repeat",
17        "[background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\")]",
18        "dark:[background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E\")]",
19        className,
20      )}
21      {...props}
22    >
23      {children}
24    </select>
25  ),
26);
27NativeSelect.displayName = "NativeSelect";