Native Select

1import { ComponentProps } from "react";
2
3import { cn } from "@/lib/utils";
4import { ChevronDownIcon } from "lucide-react";
5
6type NativeSelectProps = Omit<ComponentProps<"select">, "size"> & {
7  size?: "sm" | "default";
8};
9
10function NativeSelect({
11  className,
12  size = "default",
13  ...props
14}: NativeSelectProps) {
15  return (
16    <div
17      className={cn(
18        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
19        className
20      )}
21      data-slot="native-select-wrapper"
22      data-size={size}
23    >
24      <select
25        data-slot="native-select"
26        data-size={size}
27        className="data-placeholder:text-[#bec8d0] appearance-none bg-input dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border py-[.8rem] pr-3 pl-3 text-base whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:bg-secondary-200/10 disabled:pointer-events-none disabled:opacity-50 aria-invalid:ring-3 data-[size=sm]:rounded-[min(var(--radius),6px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:outline-none focus:border-primary dark:focus:border-primary border-border"
28        {...props}
29      />
30      <ChevronDownIcon
31        className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
32        aria-hidden="true"
33        data-slot="native-select-icon"
34      />
35    </div>
36  );
37}
38
39function NativeSelectOption({ ...props }: ComponentProps<"option">) {
40  return <option data-slot="native-select-option" {...props} />;
41}
42
43function NativeSelectOptGroup({
44  className,
45  ...props
46}: ComponentProps<"optgroup">) {
47  return (
48    <optgroup
49      data-slot="native-select-optgroup"
50      className={cn(className)}
51      {...props}
52    />
53  );
54}
55
56export { NativeSelect, NativeSelectOptGroup, NativeSelectOption };