@buun_group/brutalist-ui/dist/react/combobox/Combobox.d.ts

A brutalist-styled component library

/**
 * @module Combobox
 * @description A searchable dropdown component that combines a text input with a select menu. Supports keyboard navigation, search filtering, and customizable options.
 */
import React, { CSSProperties } from 'react';
/**
 * Structure for combobox options
 */
interface ComboboxOption {
    /**
     * The value to be submitted when the option is selected
     */
    value: string;
    /**
     * The display label for the option
     */
    label: string;
    /**
     * Whether the option is disabled and cannot be selected
     * @default false
     */
    disabled?: boolean;
}
/**
 * Props for the Combobox component
 */
interface ComboboxProps {
    /**
     * Array of options to display in the combobox
     */
    options: ComboboxOption[];
    /**
     * The controlled value of the combobox
     */
    value?: string;
    /**
     * The default value when uncontrolled
     */
    defaultValue?: string;
    /**
     * Callback fired when the selected value changes
     */
    onValueChange?: (value: string) => void;
    /**
     * Placeholder text for the trigger button
     */
    placeholder?: string;
    /**
     * Message to show when no options match the search
     */
    emptyMessage?: string;
    /**
     * Placeholder text for the search input
     */
    searchPlaceholder?: string;
    /**
     * Whether the combobox is disabled
     * @default false
     */
    disabled?: boolean;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
    /**
     * Custom content for the combobox (overrides default rendering)
     */
    children?: React.ReactNode;
    /**
     * The size variant of the combobox
     * @default 'md'
     */
    size?: 'sm' | 'md' | 'lg';
    /**
     * The visual style variant of the combobox
     * @default 'default'
     */
    variant?: 'default' | 'brutal' | 'outline' | 'info' | 'system' | 'destructive' | 'success' | 'warning' | 'ghost' | 'neon' | 'retro';
}
/**
 * Props for the Combobox.Trigger component
 */
interface ComboboxTriggerProps {
    /**
     * Custom content for the trigger (overrides default display)
     */
    children?: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Custom inline styles (supports utility classes)
     */
    style?: CSSProperties;
    /**
     * Placeholder text when no option is selected
     */
    placeholder?: string;
    /**
     * Icon to display in the trigger button
     */
    icon?: React.ReactNode;
}
/**
 * Trigger button for opening the combobox dropdown.
 * Displays the selected value or placeholder text.
 */
declare const ComboboxTrigger: React.ForwardRefExoticComponent<ComboboxTriggerProps & React.RefAttributes<HTMLButtonElement>>;
/**
 * Props for the Combobox.Content component
 */
interface ComboboxContentProps {
    /**
     * Custom option elements (overrides automatic rendering)
     */
    children?: React.ReactNode;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
    /**
     * Placeholder text for the search input
     */
    searchPlaceholder?: string;
    /**
     * Message to display when no options match the search
     */
    emptyMessage?: string;
}
/**
 * Dropdown content containing the search input and option list.
 * Rendered in a portal for proper positioning and z-index handling.
 */
declare const ComboboxContent: React.ForwardRefExoticComponent<ComboboxContentProps & React.RefAttributes<HTMLDivElement>>;
/**
 * Props for the Combobox.Option component
 */
interface ComboboxOptionProps {
    /**
     * The value to be selected when this option is chosen
     */
    value: string;
    /**
     * The content to display for this option
     */
    children: React.ReactNode;
    /**
     * Whether this option is disabled and cannot be selected
     * @default false
     */
    disabled?: boolean;
    /**
     * Additional CSS class name for styling
     */
    className?: string;
}
/**
 * Individual option within the combobox dropdown.
 * Shows selection state and responds to clicks and keyboard navigation.
 */
declare const ComboboxOption: React.ForwardRefExoticComponent<ComboboxOptionProps & React.RefAttributes<HTMLDivElement>>;
interface ComboboxCompound extends React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLDivElement>> {
    Trigger: typeof ComboboxTrigger;
    Content: typeof ComboboxContent;
    Option: typeof ComboboxOption;
}
declare const ComboboxWithSubComponents: ComboboxCompound;
export { ComboboxWithSubComponents as Combobox };
export type { ComboboxProps, ComboboxOption, ComboboxTriggerProps, ComboboxContentProps, ComboboxOptionProps };