| 1 | "use client"; |
| 2 | |
| 3 | import { Select as SelectPrimitive |
| 4 | import { cn } |
| 5 | import { CheckIcon, ChevronDownIcon |
| 6 | |
| 7 | function Select<TValue |
| 8 | ...props |
| 9 | }: SelectPrimitive. |
| 10 | return <SelectPrimitive.Root data-slot |
| 11 | } |
| 12 | |
| 13 | function SelectTrigger({ className |
| 14 | return ( |
| 15 | <SelectPrimitive.Trigger |
| 16 | data-slot="select-trigger" |
| 17 | className={cn( |
| 18 | "flex h-8 w-full items-center justify-between gap-2 rounded-lg border border-border bg-background px-3 py-1.5 text-xs text-foreground outline-none transition-colors hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring data-[popup-open]:border-ring disabled:cursor-not-allowed disabled:opacity-50", |
| 19 | className, |
| 20 | )} |
| 21 | {...props} |
| 22 | > |
| 23 | {children} |
| 24 | <SelectPrimitive.Icon> |
| 25 | <ChevronDownIcon className=" |
| 26 | </SelectPrimitive.Icon> |
| 27 | </SelectPrimitive.Trigger> |
| 28 | ); |
| 29 | } |
| 30 | |
| 31 | function SelectValue({ className |
| 32 | return ( |
| 33 | <SelectPrimitive.Value |
| 34 | data-slot="select-value" |
| 35 | className={cn(" |
| 36 | {...props} |
| 37 | /> |
| 38 | ); |
| 39 | } |
| 40 | |
| 41 | function SelectContent({ |
| 42 | className, |
| 43 | align = "start" |
| 44 | sideOffset = 4, |
| 45 | ...props |
| 46 | }: SelectPrimitive. |
| 47 | return ( |
| 48 | <SelectPrimitive.Portal> |
| 49 | <SelectPrimitive.Positioner |
| 50 | className="isolate z-50 outline-none" |
| 51 | align={align} |
| 52 | sideOffset={sideOffset} |
| 53 | > |
| 54 | <SelectPrimitive.Popup |
| 55 | data-slot="select-content" |
| 56 | className={cn( |
| 57 | "z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-xl border border-border bg-card p-1 text-popover-foreground shadow-lg outline-none duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", |
| 58 | className, |
| 59 | )} |
| 60 | {...props} |
| 61 | /> |
| 62 | </SelectPrimitive.Positioner> |
| 63 | </SelectPrimitive.Portal> |
| 64 | ); |
| 65 | } |
| 66 | |
| 67 | function SelectItem({ className |
| 68 | return ( |
| 69 | <SelectPrimitive.Item |
| 70 | data-slot="select-item" |
| 71 | className={cn( |
| 72 | "relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-8 pl-2 text-xs outline-none select-none focus:bg-muted focus:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-selected:text-foreground", |
| 73 | className, |
| 74 | )} |
| 75 | {...props} |
| 76 | > |
| 77 | <span className="pointer-events-none absolute right-2 flex items-center justify-center |
| 78 | <SelectPrimitive.ItemIndicator> |
| 79 | <CheckIcon className=" |
| 80 | </SelectPrimitive.ItemIndicator> |
| 81 | </span> |
| 82 | <SelectPrimitive.ItemText>{children} |
| 83 | </SelectPrimitive.Item> |
| 84 | ); |
| 85 | } |
| 86 | |
| 87 | function SelectSeparator({ className |
| 88 | return ( |
| 89 | <SelectPrimitive.Separator |
| 90 | data-slot="select-separator" |
| 91 | className={cn(" |
| 92 | {...props} |
| 93 | /> |
| 94 | ); |
| 95 | } |
| 96 | |
| 97 | export { Select, SelectTrigger |