| 25 | } |
| 26 | |
| 27 | function SelectTrigger({ |
| 28 | className, |
| 29 | size = "default", |
| 30 | children, |
| 31 | ...props |
| 32 | }: React.ComponentProps<typeof SelectPrimitive.Trigger> & { |
| 33 | size?: "sm" | "default" |
| 34 | }) { |
| 35 | return ( |
| 36 | <SelectPrimitive.Trigger |
| 37 | data-slot="select-trigger" |
| 38 | data-size={size} |
| 39 | className={cn( |
| 40 | "flex w-fit items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm whitespace-nowrap transition-all duration-150", |
| 41 | "border-[var(--color-border)] bg-[var(--color-bg)] text-[var(--color-text)]", |
| 42 | "placeholder:text-[var(--color-text-weak)]", |
| 43 | "focus-visible:border-[var(--color-bg-strong)] focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-[var(--color-bg-interactive)]", |
| 44 | "dark:focus-visible:border-[var(--color-bg-interactive)] dark:focus-visible:ring-0", |
| 45 | "disabled:cursor-not-allowed disabled:opacity-50", |
| 46 | "data-[size=default]:h-9 data-[size=sm]:h-8", |
| 47 | "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", |
| 48 | className |
| 49 | )} |
| 50 | {...props} |
| 51 | > |
| 52 | {children} |
| 53 | <SelectPrimitive.Icon asChild> |
| 54 | <ChevronDownIcon className="size-4 text-[var(--color-text-weak)]" /> |
| 55 | </SelectPrimitive.Icon> |
| 56 | </SelectPrimitive.Trigger> |
| 57 | ) |
| 58 | } |
| 59 | |
| 60 | function SelectContent({ |
| 61 | className, |