"use client";
import {
Content,
Icon,
Item,
ItemIndicator,
ItemText,
Portal,
Root,
ScrollDownButton,
ScrollUpButton,
Trigger,
Value,
Viewport,
} from "@radix-ui/react-select";
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
import type { ComponentProps } from "react";
import { getRadius } from "@/lib/radius";
import { cn } from "@/lib/utils";
function Select({ ...props }: ComponentProps<typeof Root>) {
return <Root data-slot="select" {...props} />;
}
function SelectValue({ ...props }: ComponentProps<typeof Value>) {
return <Value data-slot="select-value" {...props} />;
}
function SelectTrigger({
className,
size = "default",
children,
...props
}: ComponentProps<typeof Trigger> & {
size?: "sm" | "default";
}) {
return (
<Trigger
className={cn(
`flex w-fit items-center justify-between gap-2 whitespace-nowrap ${getRadius("select")} border border-input bg-transparent px-3 py-2 text-sm shadow-xs outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[size=default]:h-9 data-[size=sm]:h-8 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0`,
className,
)}
data-size={size}
data-slot="select-trigger"
{...props}
>
{children}
<Icon asChild>
<ChevronDownIcon className="size-4 opacity-50" />
</Icon>
</Trigger>
);
}
function SelectContent({
className,
children,
position = "popper",
...props
}: ComponentProps<typeof Content>) {
return (
<Portal>
<Content
className={cn(
`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-hidden ${getRadius("popover")} border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in`,
position === "popper" &&
"data-[side=left]:-translate-x-1 data-[side=top]:-translate-y-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1",
className,
)}
data-slot="select-content"
position={position}
{...props}
>
<SelectScrollUpButton />
<Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
)}
>
{children}
</Viewport>
<SelectScrollDownButton />
</Content>
</Portal>
);
}
function SelectItem({
className,
children,
...props
}: ComponentProps<typeof Item>) {
return (
<Item
className={cn(
`relative flex w-full cursor-default select-none items-center gap-2 ${getRadius("small")} py-1.5 pr-8 pl-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2`,
className,
)}
data-slot="select-item"
{...props}
>
<span className="absolute right-2 flex size-3.5 items-center justify-center">
<ItemIndicator>
<CheckIcon className="size-4" />
</ItemIndicator>
</span>
<ItemText>{children}</ItemText>
</Item>
);
}
function SelectScrollUpButton({
className,
...props
}: ComponentProps<typeof ScrollUpButton>) {
return (
<ScrollUpButton
className={cn(
"flex cursor-default items-center justify-center py-1",
className,
)}
data-slot="select-scroll-up-button"
{...props}
>
<ChevronUpIcon className="size-4" />
</ScrollUpButton>
);
}
function SelectScrollDownButton({
className,
...props
}: ComponentProps<typeof ScrollDownButton>) {
return (
<ScrollDownButton
className={cn(
"flex cursor-default items-center justify-center py-1",
className,
)}
data-slot="select-scroll-down-button"
{...props}
>
<ChevronDownIcon className="size-4" />
</ScrollDownButton>
);
}
export { Select, SelectContent, SelectItem, SelectTrigger, SelectValue };
