Glass Combobox

1'use client'
2 
3import * as React from 'react'
4import { Check, ChevronsUpDown } from 'lucide-react'
5 
6import { cn } from '@/lib/utils'
7import { GlassPopover, GlassPopoverContent, GlassPopoverTrigger } from './glass-popover'
8import {
9  GlassCommand,
10  GlassCommandEmpty,
11  GlassCommandGroup,
12  GlassCommandInput,
13  GlassCommandItem,
14  GlassCommandList,
15} from './glass-command'
16 
17export interface GlassComboboxProps {
18  options: { value: string; label: string }[]
19  value?: string
20  onValueChange?: (value: string) => void
21  placeholder?: string
22  emptyText?: string
23  className?: string
24  /** Accessible name for the combobox trigger. Falls back to `placeholder`. */
25  ariaLabel?: string
26}
27 
28function GlassCombobox({
29  options,
30  value: controlledValue,
31  onValueChange,
32  placeholder = 'Select...',
33  emptyText = 'No results found.',
34  className,
35  ariaLabel,
36}: GlassComboboxProps) {
37  const [open, setOpen] = React.useState(false)
38  const [internalValue, setInternalValue] = React.useState('')
39 
40  const value = controlledValue !== undefined ? controlledValue : internalValue
41 
42  const selectedLabel = options.find((opt) => opt.value === value)?.label
43 
44  function handleSelect(currentValue: string) {
45    const newValue = currentValue === value ? '' : currentValue
46    if (controlledValue === undefined) {
47      setInternalValue(newValue)
48    }
49    onValueChange?.(newValue)
50    setOpen(false)
51  }
52 
53  return (
54    <GlassPopover open={open} onOpenChange={setOpen}>
55      <GlassPopoverTrigger asChild>
56        <button
57          role="combobox"
58          aria-expanded={open}
59          aria-label={ariaLabel ?? placeholder}
60          className={cn(
61            'flex h-10 w-full items-center justify-between rounded-xl border border-border bg-glass px-3.5 py-2.5 text-sm backdrop-blur-md transition-colors 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',
62            className,
63          )}
64        >
65          <span className={cn(!selectedLabel && 'text-muted-foreground')}>{selectedLabel ?? placeholder}</span>
66          <ChevronsUpDown className="size-4 shrink-0 text-faint" />
67        </button>
68      </GlassPopoverTrigger>
69      <GlassPopoverContent className="w-(--radix-popover-trigger-width) p-0">
70        <GlassCommand>
71          <GlassCommandInput placeholder={placeholder} />
72          <GlassCommandList>
73// … truncated