import * as React from "react";
interface ComboboxProps {
/**
* The controlled selected value.
* @default undefined
*/
value?: string;
/**
* The default value when uncontrolled.
* @default ""
*/
defaultValue?: string;
/**
* Callback fired when the selected value changes.
* @default undefined
*/
onValueChange?: (value: string) => void;
/**
* Whether the popover is controlled open state.
* @default undefined
*/
open?: boolean;
/**
* Whether the popover is open by default (uncontrolled).
* @default false
*/
defaultOpen?: boolean;
/**
* Callback fired when the open state changes.
* @default undefined
*/
onOpenChange?: (open: boolean) => void;
/**
* Placeholder text shown when no value is selected.
* @default "Select an item..."
*/
placeholder?: string;
/**
* Placeholder text shown in the search input.
* @default "Search..."
*/
searchPlaceholder?: string;
/**
* Message shown when no items match the search.
* @default "No items found."
*/
emptyMessage?: string;
/**
* Whether the combobox is disabled.
* @default false
*/
disabled?: boolean;
/**
* Additional CSS classes merged with the combobox styles.
* @default undefined
*/
className?: string;
/**
* Combobox content and items.
* @default undefined
*/
children?: React.ReactNode;
}
interface ComboboxTriggerProps {
/**
* Additional CSS classes merged with the trigger styles.
* @default undefined
*/
className?: string;
/**
* Trigger content. If not provided, shows selected item label or placeholder.
* @default undefined
*/
children?: React.ReactNode;
}
interface ComboboxContentProps {
/**
* Additional CSS classes merged with the content styles.
* @default undefined
*/
className?: string;
/**
* Content children (typically ComboboxItem components).
* @default undefined
*/
children?: React.ReactNode;
}
interface ComboboxItemProps {
/**
* The value associated with this item.
*/
value: string;
/**
* Additional CSS classes merged with the item styles.
* @default undefined
*/
className?: string;
/**
* Item content (label).
* @default undefined
*/
children?: React.ReactNode;
/**
* Whether the item is disabled.
* @default false
*/
disabled?: boolean;
/**
* Callback fired when the item is selected.
* @default undefined
*/
onSelect?: (value: string) => void;
/**
* Additional search keywords for filtering.
* @default []
*/
keywords?: string[];
}
interface ComboboxEmptyProps {
/**
* Additional CSS classes merged with the empty state styles.
* @default undefined
*/
className?: string;
/**
* Content shown when no items match. Defaults to context emptyMessage.
* @default undefined
*/
children?: React.ReactNode;
}
interface ComboboxGroupProps {
/**
* Group heading text.
* @default undefined
*/
heading?: string;
/**
* Additional CSS classes merged with the group styles.
* @default undefined
*/
className?: string;
/**
* Group items.
* @default undefined
*/
children?: React.ReactNode;
}
interface ComboboxSeparatorProps {
/**
* Additional CSS classes merged with the separator styles.
* @default undefined
*/
className?: string;
}
/**
* A searchable select component combining Command, Popover, and Button.
*
* @remarks
* - Composes Command (search), Popover (positioning), and Button (trigger)
* - Supports both controlled and uncontrolled modes
* - Provides keyboard navigation and filtering
* - Built with Base UI primitives and CSS Modules
*
* @example Basic usage
* ```tsx
*
*
*
* Apple
* Banana
*
*
* ```
*
* @example With groups
* ```tsx
*
*
*
*
* Apple
*
*
*
* Carrot
*
*
*
* ```
*/
declare function Combobox(props: Readonly): React.ReactElement;
declare namespace Combobox {
var displayName: string;
}
/**
* Button that opens and closes the combobox popover.
*
* @remarks
* - Renders as a Button with trigger behavior
* - Shows selected item label or placeholder
* - Supports custom children or auto-display
*
* @example Basic usage
* ```tsx
*
* ```
*
* @example Custom content
* ```tsx
*
* {selectedLabel || "Choose..."}
*
* ```
*/
declare const ComboboxTrigger: React.ForwardRefExoticComponent>;
/**
* The popover content containing the searchable command list.
*
* @remarks
* - Wraps Command with Popover positioning
* - Includes search input and items list
* - Automatically closes on item selection
*
* @example Basic usage
* ```tsx
*
* Item 1
*
* ```
*/
declare const ComboboxContent: React.ForwardRefExoticComponent>;
/**
* A selectable item within the combobox.
*
* @remarks
* - Uses CommandItem internally
* - Shows check icon when selected
* - Closes popover on selection
*
* @example Basic usage
* ```tsx
* Apple
* ```
*
* @example With custom select handler
* ```tsx
* console.log("Selected:", value)}
* >
* Apple
*
* ```
*/
declare function ComboboxItem(props: Readonly): React.ReactElement;
declare namespace ComboboxItem {
var displayName: string;
}
/**
* Message shown when search returns no results.
*
* @remarks
* - Uses CommandEmpty internally
* - Defaults to context emptyMessage
*
* @example Basic usage
* ```tsx
*
* ```
*
* @example Custom message
* ```tsx
* Nothing found
* ```
*/
declare function ComboboxEmpty(props: Readonly): React.ReactElement;
declare namespace ComboboxEmpty {
var displayName: string;
}
/**
* Groups related combobox items with an optional heading.
*
* @remarks
* - Uses CommandGroup internally
* - Supports visual grouping with headings
*
* @example Basic usage
* ```tsx
*
* Apple
*
* ```
*/
declare function ComboboxGroup(props: Readonly): React.ReactElement;
declare namespace ComboboxGroup {
var displayName: string;
}
/**
* Visual separator between combobox groups.
*
* @remarks
* - Uses CommandSeparator internally
*
* @example Basic usage
* ```tsx
*
* ```
*/
declare function ComboboxSeparator(props: Readonly): React.ReactElement;
declare namespace ComboboxSeparator {
var displayName: string;
}
declare namespace Combobox {
type Props = ComboboxProps;
}
declare namespace ComboboxTrigger {
type Props = ComboboxTriggerProps;
}
declare namespace ComboboxContent {
type Props = ComboboxContentProps;
}
declare namespace ComboboxItem {
type Props = ComboboxItemProps;
}
declare namespace ComboboxEmpty {
type Props = ComboboxEmptyProps;
}
declare namespace ComboboxGroup {
type Props = ComboboxGroupProps;
}
declare namespace ComboboxSeparator {
type Props = ComboboxSeparatorProps;
}
export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxSeparator, ComboboxTrigger };
//# sourceMappingURL=combobox.d.ts.map