"use client"; import * as React from "react"; import { Avatar, AvatarFallback, AvatarImage, } from "@/components/registry/primitives/core/avatar"; import { Button } from "@/components/registry/primitives/core/button"; import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, } from "@/components/registry/primitives/core/command"; import { LibraryIcon } from "@/components/registry/primitives/core/library-icon"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/registry/primitives/core/popover"; import { cn } from "@/lib/registry/cn"; function ComboboxContent({ className, ...props }: React.ComponentProps) { return ( ); } type Framework = { value: string; label: string; }; type FrameworkComboboxProps = { frameworks: Framework[]; }; type IconOption = { value: string; label: string; icon: React.ReactNode; }; type IconComboboxProps = { options: IconOption[]; placeholder?: string; }; type User = { id: string; username: string; avatar?: string; }; type UserComboboxProps = { users: User[]; selectedUserId: string; }; type Timezone = { label: string; timezones: readonly { value: string; label: string; }[]; }; type TimezoneComboboxProps = { timezones: readonly Timezone[]; selectedTimezone: Timezone["timezones"][number]; }; type ScrollableItem = { value: string; label: string; }; type ScrollableComboboxProps = { items: ScrollableItem[]; placeholder?: string; }; function FrameworkCombobox({ frameworks }: FrameworkComboboxProps) { const [open, setOpen] = React.useState(false); const [value, setValue] = React.useState(""); const contentId = React.useId(); return ( No framework found. {frameworks.map((framework) => ( { setValue(currentValue === value ? "" : currentValue); setOpen(false); }} > {framework.label} ))} ); } function IconCombobox({ options, placeholder = "Select option...", }: IconComboboxProps) { const [open, setOpen] = React.useState(false); const [value, setValue] = React.useState(""); const contentId = React.useId(); const selectedOption = React.useMemo( () => options.find((option) => option.value === value), [options, value], ); return ( No option found. {options.map((option) => ( { setValue(currentValue === value ? "" : currentValue); setOpen(false); }} > {option.icon} {option.label} ))} ); } function UserCombobox({ users, selectedUserId }: UserComboboxProps) { const [open, setOpen] = React.useState(false); const [value, setValue] = React.useState(selectedUserId); const contentId = React.useId(); const selectedUser = React.useMemo( () => users.find((user) => user.id === value), [value, users], ); return ( No user found. {users.map((user) => ( { const selected = users.find( (u) => u.username.toLowerCase() === currentValue.toLowerCase(), ); if (selected) { setValue(selected.id === value ? "" : selected.id); } setOpen(false); }} > {user.username[0]} {user.username} ))}

); } function ScrollableCombobox({ items, placeholder = "Select item...", }: ScrollableComboboxProps) { const [open, setOpen] = React.useState(false); const [value, setValue] = React.useState(""); const contentId = React.useId(); const selectedItem = React.useMemo( () => items.find((item) => item.value === value), [items, value], ); return ( No item found. {items.map((item) => ( { setValue(currentValue === value ? "" : currentValue); setOpen(false); }} > {item.label} ))} ); } function TimezoneCombobox({ timezones, selectedTimezone, }: TimezoneComboboxProps) { const [open, setOpen] = React.useState(false); const [value, setValue] = React.useState(selectedTimezone.value); const contentId = React.useId(); const selectedGroup = React.useMemo( () => timezones.find((group) => group.timezones.find((tz) => tz.value === value), ), [value, timezones], ); const selectedTimezoneLabel = React.useMemo( () => selectedGroup?.timezones.find((tz) => tz.value === value)?.label, [value, selectedGroup], ); return ( No timezone found. {timezones.map((region, index) => ( {index > 0 && } {region.timezones.map((timezone) => ( { setValue( currentValue as Timezone["timezones"][number]["value"], ); setOpen(false); }} > {timezone.label} ))} ))}

); } function ComboboxWithCheckbox({ frameworks }: FrameworkComboboxProps) { const [open, setOpen] = React.useState(false); const [selectedFrameworks, setSelectedFrameworks] = React.useState< Framework[] >([]); const contentId = React.useId(); return ( No framework found. {frameworks.map((framework) => ( { setSelectedFrameworks( selectedFrameworks.some((f) => f.value === currentValue) ? selectedFrameworks.filter( (f) => f.value !== currentValue, ) : [...selectedFrameworks, framework], ); }} >

f.value === framework.value, )} >

{framework.label} ))} ); } export { ComboboxWithCheckbox, FrameworkCombobox, IconCombobox, ScrollableCombobox, TimezoneCombobox, UserCombobox, };

Combobox

Showcase

Combobox