Glass Select

1'use client'
2 
3import * as React from 'react'
4import { Select as SelectPrimitive } from 'radix-ui'
5import { Check, ChevronDown, ChevronUp } from 'lucide-react'
6 
7import { cn } from '@/lib/utils'
8 
9const GlassSelect = SelectPrimitive.Root
10 
11const GlassSelectGroup = SelectPrimitive.Group
12 
13const GlassSelectValue = SelectPrimitive.Value
14 
15const GlassSelectTrigger = React.forwardRef<
16  React.ComponentRef<typeof SelectPrimitive.Trigger>,
17  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
18>(({ className, children, ...props }, ref) => (
19  <SelectPrimitive.Trigger
20    ref={ref}
21    className={cn(
22      'flex h-10 w-full items-center justify-between gap-2 rounded-xl border border-border bg-glass px-3.5 py-2.5 text-sm text-foreground backdrop-blur-md placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
23      className,
24    )}
25    {...props}
26  >
27    {children}
28    <SelectPrimitive.Icon asChild>
29      <ChevronDown className="size-4 opacity-50" />
30    </SelectPrimitive.Icon>
31  </SelectPrimitive.Trigger>
32))
33GlassSelectTrigger.displayName = SelectPrimitive.Trigger.displayName
34 
35const GlassSelectScrollUpButton = React.forwardRef<
36  React.ComponentRef<typeof SelectPrimitive.ScrollUpButton>,
37  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
38>(({ className, ...props }, ref) => (
39  <SelectPrimitive.ScrollUpButton
40    ref={ref}
41    className={cn('flex cursor-default items-center justify-center py-1', className)}
42    {...props}
43  >
44    <ChevronUp className="size-4" />
45  </SelectPrimitive.ScrollUpButton>
46))
47GlassSelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
48 
49const GlassSelectScrollDownButton = React.forwardRef<
50  React.ComponentRef<typeof SelectPrimitive.ScrollDownButton>,
51  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
52>(({ className, ...props }, ref) => (
53  <SelectPrimitive.ScrollDownButton
54    ref={ref}
55    className={cn('flex cursor-default items-center justify-center py-1', className)}
56    {...props}
57  >
58    <ChevronDown className="size-4" />
59  </SelectPrimitive.ScrollDownButton>
60))
61GlassSelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
62 
63const GlassSelectContent = React.forwardRef<
64  React.ComponentRef<typeof SelectPrimitive.Content>,
65// … truncated