import "../button/btn.css";
import "../input-text-base/index.css";
import "./index.css";
import type { CombineAriaPropsWithCustomProps } from "../../utilities/reactAriaProps";
import React, { type ReactNode } from "react";
import type { ComboBoxProps as AriaComboBoxProps, Key, ListBoxItemProps, ListBoxProps as AriaListBoxProps, ListBoxSectionProps } from "react-aria-components";
export type ComboBoxSize = "md" | "lg";
export type ComboBoxLoadingState = "error" | "filtering" | "idle" | "loading" | "loadingMore" | "sorting";
type ComboBoxChildren<T extends object> = NonNullable<AriaListBoxProps<T>["children"]>;
export interface ComboBoxProps<T extends object = object> {
    /** The contents of the listbox. */
    children: ComboBoxChildren<T>;
    /** Helper text displayed below the component. Styled as error text when `invalid` is `true`. */
    description?: string;
    /** Disables the field and trigger button. */
    disabled?: boolean;
    /** Custom filter function for determining if an item should appear in the list. */
    filter?: (textValue: string, inputValue: string) => boolean;
    /** If `true`, the `label` text is rendered as an `aria-label` instead of a visible label element. */
    hideLabel?: boolean;
    /** Whether the input is in an invalid state. */
    invalid?: boolean;
    /** Accessible label for the field. */
    label: string;
    /**
     * Async loading state for the listbox.
     * - `"loading"`: while the collection is empty, replaces the empty state with a spinner.
     * - `"loadingMore"`: shows an inline spinner at the bottom of the listbox (use with `onLoadMore`).
     * - Other values render as `"idle"`.
     */
    loadingState?: ComboBoxLoadingState;
    /**
     * Called when the selected value(s) change.
     * Receives `Key[]` when `selectionMode` is `"multiple"`, otherwise `Key | null`.
     */
    onChange?: ((value: Key | null) => void) | ((value: Key[]) => void);
    /** Called when the user scrolls near the bottom of the listbox. Pair with `loadingState` for infinite scroll. */
    onLoadMore?: () => void;
    /** Placeholder text for the input. */
    placeholder?: string;
    /** If `true`, allows the value to be read but not changed. */
    readOnly?: boolean;
    /** Content to display when there are no items in the list. Defaults to "No results". */
    renderEmptyState?: ReactNode | (() => ReactNode);
    /** If `true`, appends an asterisk at the end of the label text. */
    required?: boolean;
    /** The size of the combo box. */
    size?: ComboBoxSize;
}
type AriaComboBoxPropsToOmit = "slot";
type AriaComboBoxPropsToInclude = "allowsEmptyCollection" | "defaultInputValue" | "defaultItems" | "defaultValue" | "disabledKeys" | "inputValue" | "items" | "menuTrigger" | "name" | "onInputChange" | "selectionMode" | "value";
export type ComboBoxElementProps<T extends object = object> = CombineAriaPropsWithCustomProps<AriaComboBoxProps<T, "single" | "multiple">, ComboBoxProps<T>, AriaComboBoxPropsToOmit, AriaComboBoxPropsToInclude>;
/**
 * A combo box combines a text input with a filterable popover
 * listbox, allowing users to type to search and select from a list of options.
 *
 * It supports both single and multiple selection (`selectionMode`), custom filtering,
 * and asynchronous data loading with infinite scroll capabilities (`loadingState` and `onLoadMore`).
 * Collections can be either static or dynamic, managed via the `children`, `items`,
 * or `defaultItems` props. To construct the dropdown list, compose this component
 * with `ComboBoxItem` for individual options and `ComboBoxSection` for grouping.
 *
 * @component
 * @see {@link https://planningcenter.github.io/tapestry/?path=/docs/components-combobox--docs | Storybook Documentation}
 */
export declare function ComboBox<T extends object>({ allowsEmptyCollection, children, className, description, disabled, filter, hideLabel, invalid, label, loadingState, menuTrigger, onChange, onLoadMore, placeholder, readOnly, renderEmptyState, required, size, ...restProps }: ComboBoxElementProps<T>): React.JSX.Element;
export interface ComboBoxItemProps {
    /** Disables the item. */
    disabled?: boolean;
}
type AriaListBoxItemPropsToOmit = "isDisabled";
type AriaListBoxItemPropsToInclude = "onAction" | "textValue" | "value";
export type ComboBoxItemElementProps<T extends object = object> = CombineAriaPropsWithCustomProps<ListBoxItemProps<T>, ComboBoxItemProps, AriaListBoxItemPropsToOmit, AriaListBoxItemPropsToInclude>;
/**
 * A selectable option within a {@link ComboBox}. Renders as a listbox item.
 *
 * Provide an `id` (or `key` when rendering from a collection) to identify the
 * option, and `textValue` when the visible children are not plain text so
 * type-ahead and screen readers have a stable label to use.
 *
 * @component
 */
export declare function ComboBoxItem<T extends object>({ className, disabled, ...restProps }: ComboBoxItemElementProps<T>): React.JSX.Element;
export interface ComboBoxSectionProps {
    /** The items rendered within the section. */
    children: ReactNode;
    /** Optional heading text rendered above the section's items. */
    title?: string;
}
type AriaListBoxSectionPropsToInclude = "dependencies";
export type ComboBoxSectionElementProps<T extends object = object> = CombineAriaPropsWithCustomProps<ListBoxSectionProps<T>, ComboBoxSectionProps, never, AriaListBoxSectionPropsToInclude>;
/**
 * A group of related {@link ComboBoxItem}s within a {@link ComboBox}. Renders
 * an optional `title` heading above its items.
 *
 * @component
 */
export declare function ComboBoxSection<T extends object>({ children, className, title, ...restProps }: ComboBoxSectionElementProps<T>): React.JSX.Element;
export {};
//# sourceMappingURL=ComboBox.d.ts.map