openstatus.dev
Openstatus
www.openstatus.dev
1"use client";
2
3import * as SelectPrimitive from "@radix-ui/react-select";
4import { Check, ChevronDown } from "lucide-react";
5import * as React from "react";
6
7import { cn } from "../lib/utils";
8import { cva, VariantProps } from "class-variance-authority";
9
10const Select = SelectPrimitive.Root;
11
12const SelectGroup = SelectPrimitive.Group;
13
14const SelectValue = SelectPrimitive.Value;
15
16const selectVariants = cva(
17 "flex w-full h-10 items-center justify-between px-3 rounded-md border border-input ring-offset-background py-2 text-sm placeholder:text-muted-foreground focus:ring-ring focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
18 {
19 variants: {
20 variant: {
21 default: "bg-transparent",
22
23 ghost: "border-none space-x-2",
24 },
25 },
26 defaultVariants: {
27 variant: "default",
28 },
29 }
30);
31export interface SelectTriggerProps
32 extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>,
33 VariantProps<typeof selectVariants> {}
34
35const SelectTrigger = React.forwardRef<
36 React.ElementRef<typeof SelectPrimitive.Trigger>,
37 SelectTriggerProps
38>(({ className, children, ...props }, ref) => (
39 <SelectPrimitive.Trigger
40 ref={ref}
41 className={cn(selectVariants({ variant: props.variant }), className)}
42 {...props}
43 >
44 {children}
45 <SelectPrimitive.Icon asChild>
46 <ChevronDown className="h-4 w-4 opacity-50" />
47 </SelectPrimitive.Icon>
48 </SelectPrimitive.Trigger>
49));
50SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
51
52const SelectContent = React.forwardRef<
53 React.ElementRef<typeof SelectPrimitive.Content>,
54 React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
55>(({ className, children, position = "popper", ...props }, ref) => (
56 <SelectPrimitive.Portal>
57 <SelectPrimitive.Content
58 ref={ref}
59 className={cn(
60 "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 min-w-32 overflow-hidden rounded-md border shadow-md",
61 position === "popper" &&
62 "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
63 className
64 )}
65 position={position}
66 {...props}
67 >
68 <SelectPrimitive.Viewport
69 className={cn(
70 "p-1",
71 position === "popper" &&
72 "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
73 )}
74 >
75 {children}
76 </SelectPrimitive.Viewport>
77 </SelectPrimitive.Content>
78 </SelectPrimitive.Portal>
79));
80SelectContent.displayName = SelectPrimitive.Content.displayName;
81
82const SelectLabel = React.forwardRef<
83 React.ElementRef<typeof SelectPrimitive.Label>,
84 React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
85>(({ className, ...props }, ref) => (
86 <SelectPrimitive.Label
87 ref={ref}
88 className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
89 {...props}
90 />
91));
92SelectLabel.displayName = SelectPrimitive.Label.displayName;
93
94const SelectItem = React.forwardRef<
95 React.ElementRef<typeof SelectPrimitive.Item>,
96 React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
97>(({ className, children, ...props }, ref) => (
98 <SelectPrimitive.Item
99 ref={ref}
100 className={cn(
101 "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
102 className
103 )}
104 {...props}
105 >
106 <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
107 <SelectPrimitive.ItemIndicator>
108 <Check className="h-4 w-4" />
109 </SelectPrimitive.ItemIndicator>
110 </span>
111
112 <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
113 </SelectPrimitive.Item>
114));
115SelectItem.displayName = SelectPrimitive.Item.displayName;
116
117const SelectSeparator = React.forwardRef<
118 React.ElementRef<typeof SelectPrimitive.Separator>,
119 React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
120>(({ className, ...props }, ref) => (
121 <SelectPrimitive.Separator
122 ref={ref}
123 className={cn("bg-muted -mx-1 my-1 h-px", className)}
124 {...props}
125 />
126));
127SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
128
129export {
130 Select,
131 SelectGroup,
132 SelectValue,
133 SelectTrigger,
134 SelectContent,
135 SelectLabel,
136 SelectItem,
137 SelectSeparator,
138};