native-select

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5import { Icon } from "@/components/ui/icon"
6 
7type Props = Omit<HTMLAttributes<"select">, "size"> & {
8  size?: "sm" | "default"
9}
10 
11const { class: className, size = "default", ...props } = Astro.props
12---
13 
14<div
15  class={cn(
16    "group/native-select relative w-fit has-[select:disabled]:opacity-50",
17    className
18  )}
19  data-slot="native-select-wrapper"
20  data-size={size}
21>
22  <select
23    data-slot="native-select"
24    data-size={size}
25    class="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 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 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-8"
26    {...props}
27  >
28    <slot />
29  </select>
30  <Icon
31    name="chevron-down"
32    class="text-muted-foreground pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 select-none"
33    aria-hidden="true"
34    data-slot="native-select-icon"
35  />
36</div>