select

1"use client"
2
3import * as React from "react"
4import { Select as BaseSelect } from "@base-ui/react/select"
5import { Check, ChevronDown, ChevronUp } from "lucide-react"
6import { cn } from "@/lib/utils"
7
8const Select = BaseSelect.Root
9
10const SelectGroup = BaseSelect.Group
11
12type SelectValueProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Value> & {
13    placeholder?: string
14}
15
16const SelectValue = React.forwardRef<
17    React.ComponentRef<typeof BaseSelect.Value>,
18    SelectValueProps
19>(({ placeholder, ...props }, ref) => (
20    <BaseSelect.Value ref={ref} {...props}>
21        {(value) => value ?? placeholder}
22    </BaseSelect.Value>
23))
24SelectValue.displayName = "SelectValue"
25
26type SelectTriggerProps = React.ComponentPropsWithoutRef<typeof BaseSelect.Trigger>
27
28const SelectTrigger = React.forwardRef<
29    React.ComponentRef<typeof BaseSelect.Trigger>,
30    SelectTriggerProps
31>(({ className, children, ...props }, ref) => (
32    <BaseSelect.Trigger
33        ref={ref}
34        className={cn(
35            "flex h-10 w-full items-center justify-between rounded-base border-2 border-black bg-white px-3 py-2 text-sm placeholder:text-black focus-brutal disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
36            className
37        )}
38        {...props}
39    >
40        {children}
41        <BaseSelect.Icon>
42            <ChevronDown
43                aria-hidden="true"
44                className="h-4 w-4 opacity-50"
45            />
46        </BaseSelect.Icon>
47
48    </BaseSelect.Trigger>
49))
50SelectTrigger.displayName = "SelectTrigger"
51
52type SelectScrollUpButtonProps = React.ComponentPropsWithoutRef<typeof BaseSelect.ScrollUpArrow>
53
54const SelectScrollUpButton = React.forwardRef<
55    React.ComponentRef<typeof BaseSelect.ScrollUpArrow>,
56    SelectScrollUpButtonProps
57>(({ className, ...props }, ref) => (
58    <BaseSelect.ScrollUpArrow
59        ref={ref}
60        className={cn(
61            "flex cursor-default items-center justify-center py-1",
62            className
63        )}
64        {...props}
65    >
66        <ChevronUp aria-hidden="true" className="h-4 w-4" />
67
68    </BaseSelect.ScrollUpArrow>
69))
70SelectScrollUpButton.displayName = "SelectScrollUpButton"
71
72type SelectScrollDownButtonProps = React.ComponentPropsWithoutRef<typeof BaseSelect.ScrollDownArrow>
73
74const SelectScrollDownButton = React.forwardRef<
75    React.ComponentRef<typeof BaseSelect.ScrollDownArrow>,
76    SelectScrollDownButtonProps
77// … truncated