personal website
nekomimi.pet
1"use client";
2
3import * as SelectPrimitive from "@radix-ui/react-select";
4import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
5import * as React from "react";
6
7import { cn } from "@/lib/utils";
8
9function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
10 return <SelectPrimitive.Root data-slot="select" {...props} />;
11}
12
13function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
14 return <SelectPrimitive.Group data-slot="select-group" {...props} />;
15}
16
17function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
18 return <SelectPrimitive.Value data-slot="select-value" {...props} />;
19}
20
21function SelectTrigger({
22 className,
23 size = "default",
24 children,
25 ...props
26}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
27 size?: "sm" | "default";
28}) {
29 return (
30 <SelectPrimitive.Trigger
31 data-slot="select-trigger"
32 data-size={size}
33 className={cn(
34 "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground 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:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
35 className,
36 )}
37 {...props}
38 >
39 {children}
40 <SelectPrimitive.Icon asChild>
41 <ChevronDownIcon className="size-4 opacity-50" />
42 </SelectPrimitive.Icon>
43 </SelectPrimitive.Trigger>
44 );
45}
46
47function SelectContent({
48 className,
49 children,
50 position = "popper",
51 align = "center",
52 ...props
53}: React.ComponentProps<typeof SelectPrimitive.Content>) {
54 return (
55 <SelectPrimitive.Portal>
56 <SelectPrimitive.Content
57 data-slot="select-content"
58 className={cn(
59 "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 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
60 position === "popper" &&
61 "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
62 className,
63 )}
64 position={position}
65 align={align}
66 {...props}
67 >
68 <SelectScrollUpButton />
69 <SelectPrimitive.Viewport
70 className={cn(
71 "p-1",
72 position === "popper" &&
73 "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
74 )}
75 >
76 {children}
77 </SelectPrimitive.Viewport>
78 <SelectScrollDownButton />
79 </SelectPrimitive.Content>
80 </SelectPrimitive.Portal>
81 );
82}
83
84function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
85 return (
86 <SelectPrimitive.Label
87 data-slot="select-label"
88 className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
89 {...props}
90 />
91 );
92}
93
94function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
95 return (
96 <SelectPrimitive.Item
97 data-slot="select-item"
98 className={cn(
99 "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
100 className,
101 )}
102 {...props}
103 >
104 <span className="absolute right-2 flex size-3.5 items-center justify-center">
105 <SelectPrimitive.ItemIndicator>
106 <CheckIcon className="size-4" />
107 </SelectPrimitive.ItemIndicator>
108 </span>
109 <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
110 </SelectPrimitive.Item>
111 );
112}
113
114function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
115 return (
116 <SelectPrimitive.Separator
117 data-slot="select-separator"
118 className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
119 {...props}
120 />
121 );
122}
123
124function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
125 return (
126 <SelectPrimitive.ScrollUpButton
127 data-slot="select-scroll-up-button"
128 className={cn("flex cursor-default items-center justify-center py-1", className)}
129 {...props}
130 >
131 <ChevronUpIcon className="size-4" />
132 </SelectPrimitive.ScrollUpButton>
133 );
134}
135
136function SelectScrollDownButton({
137 className,
138 ...props
139}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
140 return (
141 <SelectPrimitive.ScrollDownButton
142 data-slot="select-scroll-down-button"
143 className={cn("flex cursor-default items-center justify-center py-1", className)}
144 {...props}
145 >
146 <ChevronDownIcon className="size-4" />
147 </SelectPrimitive.ScrollDownButton>
148 );
149}
150
151export {
152 Select,
153 SelectContent,
154 SelectGroup,
155 SelectItem,
156 SelectLabel,
157 SelectScrollDownButton,
158 SelectScrollUpButton,
159 SelectSeparator,
160 SelectTrigger,
161 SelectValue,
162};