sprint/packages/frontend/src/components/ui/select.tsx

import * as SelectPrimitive from "@radix-ui/react-select";
import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
import type * as React from "react";

import { cn } from "@/lib/utils";

function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>) {
    return <SelectPrimitive.Root data-slot="select" {...props} />;
}

function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>) {
    return <SelectPrimitive.Group data-slot="select-group" {...props} />;
}

function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>) {
    return <SelectPrimitive.Value data-slot="select-value" {...props} />;
}

function SelectTrigger({
    className,
    size = "default",
    variant = "default",
    children,
    isOpen,
    label,
    hasValue,
    labelPosition = "top",
    chevronClassName,
    ...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
    isOpen?: boolean;
    size?: "sm" | "default";
    variant?: "default" | "unstyled";
    label?: string;
    hasValue?: boolean;
    labelPosition?: "top" | "bottom";
    chevronClassName?: string;
}) {
    return (
        <SelectPrimitive.Trigger
            data-slot="select-trigger"
            data-size={size}
            className={cn(
                variant === "unstyled"
                    ? "cursor-pointer bg-transparent shadow-none outline-none"
                    : [
                          "cursor-pointer border data-[placeholder]:text-muted-foreground",
                          "[&_svg:not([class*='text-'])]:text-muted-foreground",
                          "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
                          "aria-invalid:border-destructive dark:hover:bg-muted/40",
                          "relative flex w-fit items-center justify-between gap-2 border",
                          "bg-transparent px-3 py-2 text-sm whitespace-nowrap",
                          "shadow-xs outline-none 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",
                      ],
                className,
            )}
            {...props}
        >
            {label && hasValue && (
                <span
                    className={cn(
                        "text-muted-foreground bg-background absolute left-1 text-[12px] leading-none font-700",
                        labelPosition === "top" ? "-top-1" : "-bottom-1",
                    )}
                >
                    {label}
                </span>
            )}
            {children}
            <SelectPrimitive.Icon asChild>
                <ChevronDownIcon
                    className={cn("size-4 opacity-50", chevronClassName)}
                    style={{ rotate: isOpen ? "180deg" : "0deg" }}
                />
            </SelectPrimitive.Icon>
        </SelectPrimitive.Trigger>
    );
}

function SelectContent({
    className,
    children,
    position = "item-aligned",
    align = "center",
    ...props
}: React.ComponentProps<typeof SelectPrimitive.Content>) {
    return (
        <SelectPrimitive.Portal>
            <SelectPrimitive.Content
                data-slot="select-content"
                data-align={align}
                className={cn(
                    "bg-popover text-popover-foreground",
                    "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 border shadow-md",
                    position === "popper" &&
                        "data-[side=bottom]:translate-y-1 data-[side=bottom]:-translate-x-1.5 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 data-[side=top]:-translate-x-0.5",
                    position === "popper" && align === "start" && "data-[side=bottom]:-translate-x-0",
                    className,
                )}
                position={position}
                align={align}
                {...props}
            >
                <SelectScrollUpButton />
                <SelectPrimitive.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}
                </SelectPrimitive.Viewport>
                <SelectScrollDownButton />
            </SelectPrimitive.Content>
        </SelectPrimitive.Portal>
    );
}

function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>) {
    return (
        <SelectPrimitive.Label
            data-slot="select-label"
            className={cn("text-muted-foreground px-2 py-1.5 text-xs font-700", className)}
            {...props}
        />
    );
}

function SelectItem({
    className,
    textClassName,
    children,
    ...props
}: React.ComponentProps<typeof SelectPrimitive.Item> & {
    textClassName?: string;
}) {
    return (
        <SelectPrimitive.Item
            data-slot="select-item"
            className={cn(
                "focus:bg-accent/40 focus:text-accent-foreground",
                "[&_svg:not([class*='text-'])]:text-muted-foreground relative",
                "flex w-full cursor-pointer items-center gap-2 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",
                className,
            )}
            {...props}
        >
            <span
                data-slot="select-item-indicator"
                className="absolute right-2 flex size-3.5 items-center justify-center"
            >
                <SelectPrimitive.ItemIndicator>
                    <CheckIcon className="size-4" />
                </SelectPrimitive.ItemIndicator>
            </span>
            {textClassName ? (
                <span className={cn(textClassName)}>{children}</span>
            ) : (
                <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
            )}
        </SelectPrimitive.Item>
    );
}

function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>) {
    return (
        <SelectPrimitive.Separator
            data-slot="select-separator"
            className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
            {...props}
        />
    );
}

function SelectScrollUpButton({
    className,
    ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
    return (
        <SelectPrimitive.ScrollUpButton
            data-slot="select-scroll-up-button"
            className={cn("flex cursor-default items-center justify-center py-1", className)}
            {...props}
        >
            <ChevronUpIcon className="size-4" />
        </SelectPrimitive.ScrollUpButton>
    );
}

function SelectScrollDownButton({
    className,
    ...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
    return (
        <SelectPrimitive.ScrollDownButton
            data-slot="select-scroll-down-button"
            className={cn("flex cursor-default items-center justify-center py-1", className)}
            {...props}
        >
            <ChevronDownIcon className="size-4" />
        </SelectPrimitive.ScrollDownButton>
    );
}

export {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectLabel,
    SelectScrollDownButton,
    SelectScrollUpButton,
    SelectSeparator,
    SelectTrigger,
    SelectValue,
};