/*
Copyright (C) 2023-2026 QuantumNous
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with this program. If not, see .
For commercial licensing, please contact support@quantumnous.com
*/
import * as React from 'react'
import { Combobox as ComboboxPrimitive } from '@base-ui/react'
import {
ArrowDown01Icon,
Cancel01Icon,
Tick02Icon,
} from '@hugeicons/core-free-icons'
import { HugeiconsIcon } from '@hugeicons/react'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import {
ComboboxInput as LegacyComboboxInput,
type ComboboxInputOption,
} from '@/components/ui/combobox-input'
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
} from '@/components/ui/input-group'
type LegacyComboboxProps = {
options: ComboboxInputOption[]
value?: string
onValueChange?: (value: string | null) => void
placeholder?: string
searchPlaceholder?: string
emptyText?: string
allowCustomValue?: boolean
className?: string
id?: string
}
function Combobox(props: LegacyComboboxProps): React.ReactElement
function Combobox(
props: ComboboxPrimitive.Root.Props
): React.ReactElement
function Combobox(
props:
| ComboboxPrimitive.Root.Props
| LegacyComboboxProps
) {
if ('options' in props) {
return (
props.onValueChange?.(value)}
placeholder={props.searchPlaceholder ?? props.placeholder}
emptyText={props.emptyText}
className={props.className}
allowCustomValue={props.allowCustomValue}
/>
)
}
return
}
function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
return
}
function ComboboxTrigger({
className,
children,
...props
}: ComboboxPrimitive.Trigger.Props) {
return (
{children}
)
}
function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
return (
}
className={cn(className)}
{...props}
>
)
}
function ComboboxInput({
className,
children,
disabled = false,
showTrigger = true,
showClear = false,
...props
}: ComboboxPrimitive.Input.Props & {
showTrigger?: boolean
showClear?: boolean
}) {
return (
}
{...props}
/>
{showTrigger && (
}
data-slot='input-group-button'
className='group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent'
disabled={disabled}
/>
)}
{showClear && }
{children}
)
}
function ComboboxContent({
className,
side = 'bottom',
sideOffset = 6,
align = 'start',
alignOffset = 0,
anchor,
...props
}: ComboboxPrimitive.Popup.Props &
Pick<
ComboboxPrimitive.Positioner.Props,
'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'
>) {
return (
)
}
function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
return (
)
}
function ComboboxItem({
className,
children,
...props
}: ComboboxPrimitive.Item.Props) {
return (
{children}
}
>
)
}
function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
return (
)
}
function ComboboxLabel({
className,
...props
}: ComboboxPrimitive.GroupLabel.Props) {
return (
)
}
function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
return (
)
}
function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
return (
)
}
function ComboboxSeparator({
className,
...props
}: ComboboxPrimitive.Separator.Props) {
return (
)
}
function ComboboxChips({
className,
...props
}: React.ComponentPropsWithRef &
ComboboxPrimitive.Chips.Props) {
return (
)
}
function ComboboxChip({
className,
children,
showRemove = true,
...props
}: ComboboxPrimitive.Chip.Props & {
showRemove?: boolean
}) {
return (
{children}
{showRemove && (
}
className='-ml-1 opacity-50 hover:opacity-100'
data-slot='combobox-chip-remove'
>
)}
)
}
function ComboboxChipsInput({
className,
...props
}: ComboboxPrimitive.Input.Props) {
return (
)
}
function useComboboxAnchor() {
return React.useRef(null)
}
export {
Combobox,
ComboboxInput,
ComboboxContent,
ComboboxList,
ComboboxItem,
ComboboxGroup,
ComboboxLabel,
ComboboxCollection,
ComboboxEmpty,
ComboboxSeparator,
ComboboxChips,
ComboboxChip,
ComboboxChipsInput,
ComboboxTrigger,
ComboboxValue,
useComboboxAnchor,
}