| 115 | } |
| 116 | |
| 117 | function SelectItem({ |
| 118 | className, |
| 119 | children, |
| 120 | ...props |
| 121 | }: React.ComponentProps<typeof SelectPrimitive.Item>) { |
| 122 | return ( |
| 123 | <SelectPrimitive.Item |
| 124 | data-slot="select-item" |
| 125 | className={cn( |
| 126 | "relative flex w-full cursor-pointer select-none items-center gap-2 rounded-sm py-2 pl-2 pr-8 text-sm outline-none transition-colors", |
| 127 | "text-[var(--color-text)] hover:bg-[var(--color-bg-weak)]", |
| 128 | "focus:bg-[var(--color-bg-weak)]", |
| 129 | "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", |
| 130 | "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", |
| 131 | className |
| 132 | )} |
| 133 | {...props} |
| 134 | > |
| 135 | <span |
| 136 | data-slot="select-item-indicator" |
| 137 | className="absolute right-2 flex size-3.5 items-center justify-center" |
| 138 | > |
| 139 | <SelectPrimitive.ItemIndicator> |
| 140 | <CheckIcon className="size-4" /> |
| 141 | </SelectPrimitive.ItemIndicator> |
| 142 | </span> |
| 143 | <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText> |
| 144 | </SelectPrimitive.Item> |
| 145 | ) |
| 146 | } |
| 147 | |
| 148 | function SelectSeparator({ |
| 149 | className, |