@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
335 lines • 8.39 kB
TypeScript
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
* <Combobox value={value} onValueChange={setValue}>
* <ComboboxTrigger />
* <ComboboxContent>
* <ComboboxItem value="apple">Apple</ComboboxItem>
* <ComboboxItem value="banana">Banana</ComboboxItem>
* </ComboboxContent>
* </Combobox>
* ```
*
* @example With groups
* ```tsx
* <Combobox>
* <ComboboxTrigger />
* <ComboboxContent>
* <ComboboxGroup heading="Fruits">
* <ComboboxItem value="apple">Apple</ComboboxItem>
* </ComboboxGroup>
* <ComboboxSeparator />
* <ComboboxGroup heading="Vegetables">
* <ComboboxItem value="carrot">Carrot</ComboboxItem>
* </ComboboxGroup>
* </ComboboxContent>
* </Combobox>
* ```
*/
declare function Combobox(props: Readonly<Combobox.Props>): 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
* <ComboboxTrigger />
* ```
*
* @example Custom content
* ```tsx
* <ComboboxTrigger>
* {selectedLabel || "Choose..."}
* </ComboboxTrigger>
* ```
*/
declare const ComboboxTrigger: React.ForwardRefExoticComponent<ComboboxTriggerProps & React.RefAttributes<HTMLButtonElement>>;
/**
* 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
* <ComboboxContent>
* <ComboboxItem value="item1">Item 1</ComboboxItem>
* </ComboboxContent>
* ```
*/
declare const ComboboxContent: React.ForwardRefExoticComponent<ComboboxContentProps & React.RefAttributes<HTMLDivElement>>;
/**
* A selectable item within the combobox.
*
* @remarks
* - Uses CommandItem internally
* - Shows check icon when selected
* - Closes popover on selection
*
* @example Basic usage
* ```tsx
* <ComboboxItem value="apple">Apple</ComboboxItem>
* ```
*
* @example With custom select handler
* ```tsx
* <ComboboxItem
* value="apple"
* onSelect={(value) => console.log("Selected:", value)}
* >
* Apple
* </ComboboxItem>
* ```
*/
declare function ComboboxItem(props: Readonly<ComboboxItem.Props>): 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
* <ComboboxEmpty />
* ```
*
* @example Custom message
* ```tsx
* <ComboboxEmpty>Nothing found</ComboboxEmpty>
* ```
*/
declare function ComboboxEmpty(props: Readonly<ComboboxEmpty.Props>): 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
* <ComboboxGroup heading="Fruits">
* <ComboboxItem value="apple">Apple</ComboboxItem>
* </ComboboxGroup>
* ```
*/
declare function ComboboxGroup(props: Readonly<ComboboxGroup.Props>): React.ReactElement;
declare namespace ComboboxGroup {
var displayName: string;
}
/**
* Visual separator between combobox groups.
*
* @remarks
* - Uses CommandSeparator internally
*
* @example Basic usage
* ```tsx
* <ComboboxSeparator />
* ```
*/
declare function ComboboxSeparator(props: Readonly<ComboboxSeparator.Props>): 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