import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import type { ListboxProps as ListboxProps_2 } from '@fluentui/react-combobox';
import type { OptionGroupProps } from '@fluentui/react-combobox';
import type { OptionGroupSlots } from '@fluentui/react-combobox';
import type { OptionGroupState } from '@fluentui/react-combobox';
import type { OptionSlots as OptionSlots_2 } from '@fluentui/react-combobox';
import type { OptionState as OptionState_2 } from '@fluentui/react-combobox';
import { PositioningShorthand } from '@fluentui/react-positioning';
import type * as React_2 from 'react';
import { renderTagPickerButton_unstable as renderTagPickerButton } from '@fluentui/react-tag-picker';
import { renderTagPickerControl_unstable as renderTagPickerControl } from '@fluentui/react-tag-picker';
import { renderTagPickerGroup_unstable as renderTagPickerGroup } from '@fluentui/react-tag-picker';
import { renderTagPickerInput_unstable as renderTagPickerInput } from '@fluentui/react-tag-picker';
import { renderTagPickerList_unstable as renderTagPickerList } from '@fluentui/react-tag-picker';
import { renderTagPickerOption_unstable as renderTagPickerOption } from '@fluentui/react-tag-picker';
import { renderOptionGroup_unstable as renderTagPickerOptionGroup } from '@fluentui/react-combobox';
import type { Slot } from '@fluentui/react-utilities';
import type { TagGroupBaseProps } from '@fluentui/react-tags';
import type { TagGroupContextValue } from '@fluentui/react-tags';
import type { TagPickerBaseProps } from '@fluentui/react-tag-picker';
import type { TagPickerButtonBaseState } from '@fluentui/react-tag-picker';
import { TagPickerButtonBaseProps as TagPickerButtonProps } from '@fluentui/react-tag-picker';
import { TagPickerButtonSlots } from '@fluentui/react-tag-picker';
import { TagPickerContextValue } from '@fluentui/react-tag-picker';
import { TagPickerContextValues } from '@fluentui/react-tag-picker';
import type { TagPickerControlBaseState } from '@fluentui/react-tag-picker';
import { TagPickerControlInternalSlots } from '@fluentui/react-tag-picker';
import { TagPickerControlProps } from '@fluentui/react-tag-picker';
import { TagPickerControlSlots } from '@fluentui/react-tag-picker';
import type { TagPickerGroupBaseState } from '@fluentui/react-tag-picker';
import type { TagPickerGroupSlots } from '@fluentui/react-tag-picker';
import type { TagPickerInputBaseState } from '@fluentui/react-tag-picker';
import { TagPickerInputBaseProps as TagPickerInputProps } from '@fluentui/react-tag-picker';
import { TagPickerInputSlots } from '@fluentui/react-tag-picker';
import { TagPickerOnOpenChangeData } from '@fluentui/react-tag-picker';
import { TagPickerOnOptionSelectData } from '@fluentui/react-tag-picker';
import { TagPickerSize } from '@fluentui/react-tag-picker';
import { TagPickerSlots } from '@fluentui/react-tag-picker';
import { TagPickerState } from '@fluentui/react-tag-picker';
import { useTagPickerContext_unstable } from '@fluentui/react-tag-picker';
import { useTagPickerContextValues } from '@fluentui/react-tag-picker';

/**
 * Listbox component: a standalone selection control, or the popup in a Combobox.
 */
declare const Listbox: ForwardRefComponent<ListboxProps>;

/**
 * Listbox Props
 */
declare type ListboxProps = ListboxProps_2;

declare type OptionSlots = OptionSlots_2;

/**
 * State used in rendering Option
 */
declare type OptionState = OptionState_2 & {
    root: {
        /**
         * Whether the option is currently disabled.
         */
        'data-disabled'?: string;
        /**
         * Whether the option is currently selected.
         */
        'data-selected'?: string;
        /**
         * Whether the option belongs to a multiselect listbox.
         */
        'data-multiselect'?: string;
    };
};

/**
 * Render the final JSX of TagPicker
 */
export declare const renderTagPicker: (state: TagPickerState, contexts: TagPickerContextValues) => JSXElement;

export { renderTagPickerButton }

export { renderTagPickerControl }

export { renderTagPickerGroup }

export { renderTagPickerInput }

export { renderTagPickerList }

export { renderTagPickerOption }

export { renderTagPickerOptionGroup }

declare type TagGroupContextValues = {
    tagGroup: TagGroupContextValue;
};

/**
 * Headless TagPicker component.
 */
export declare const TagPicker: {
    (props: TagPickerProps): JSXElement;
    displayName: string;
};

/**
 * A button trigger for a TagPicker, used as an alternative to `TagPickerInput` when the
 * picker does not need free-text filtering.
 */
export declare const TagPickerButton: ForwardRefComponent<TagPickerButtonProps>;

export { TagPickerButtonProps }

export { TagPickerButtonSlots }

/**
 * State used in rendering the headless TagPickerButton.
 */
export declare type TagPickerButtonState = TagPickerButtonBaseState & {
    root: {
        /**
         * Data attribute set when the button is disabled.
         */
        'data-disabled'?: string;
    };
};

export { TagPickerContextValue }

export { TagPickerContextValues }

/**
 * The interactive area of a TagPicker: hosts the selected tags (`TagPickerGroup`) and
 * the trigger (`TagPickerInput` or `TagPickerButton`), plus an optional expand icon and
 * secondary action.
 */
export declare const TagPickerControl: ForwardRefComponent<TagPickerControlProps>;

export { TagPickerControlInternalSlots }

export { TagPickerControlProps }

export { TagPickerControlSlots }

/**
 * State used in rendering the headless TagPickerControl.
 */
export declare type TagPickerControlState = TagPickerControlBaseState & {
    root: {
        /**
         * Data attribute set when the control is disabled.
         */
        'data-disabled'?: string;
        /**
         * Data attribute set when the control is in an invalid (error) field state.
         */
        'data-invalid'?: string;
    };
};

/**
 * Displays the selected options of a TagPicker as a group of dismissible tags. Uses the
 * native `focusgroup` attribute for arrow-key navigation across the tags.
 */
export declare const TagPickerGroup: ForwardRefComponent<TagPickerGroupProps>;

/**
 * TagPickerGroup Props
 */
export declare type TagPickerGroupProps = ComponentProps<TagPickerGroupSlots> & Pick<TagGroupBaseProps, 'dismissible' | 'onDismiss'>;

export { TagPickerGroupSlots }

/**
 * State used in rendering the headless TagPickerGroup.
 */
export declare type TagPickerGroupState = TagPickerGroupBaseState & {
    root: {
        /**
         * Native WICG `focusgroup` attribute for arrow-key navigation across the selected tags.
         * Replaces the Tabster `useArrowNavigationGroup` used by the styled TagPickerGroup.
         */
        focusgroup?: string;
        /**
         * Data attribute set when the group is disabled.
         */
        'data-disabled'?: string;
    };
};

/**
 * The text input trigger of a TagPicker, used to filter options and open the popover.
 */
export declare const TagPickerInput: ForwardRefComponent<TagPickerInputProps>;

export { TagPickerInputProps }

export { TagPickerInputSlots }

/**
 * State used in rendering the headless TagPickerInput.
 */
export declare type TagPickerInputState = TagPickerInputBaseState & {
    root: {
        /**
         * Data attribute set when the input is disabled.
         */
        'data-disabled'?: string;
    };
};

/**
 * The popover list of selectable options for a TagPicker. Holds `Option` and `OptionGroup`
 * children.
 */
export declare const TagPickerList: ForwardRefComponent<TagPickerListProps>;

/**
 * TagPickerList Props
 */
export declare type TagPickerListProps = ComponentProps<TagPickerListSlots>;

export declare type TagPickerListSlots = {
    root: Slot<typeof Listbox>;
};

/**
 * State used in rendering the headless TagPickerList.
 */
export declare type TagPickerListState = ComponentState<TagPickerListSlots> & {
    /**
     * Whether the popover is currently open. Visibility is governed by the TagPicker root, which only
     * renders the popover while open or focused.
     */
    open: boolean;
};

export { TagPickerOnOpenChangeData }

export { TagPickerOnOptionSelectData }

/**
 * An option within a TagPickerList.
 */
export declare const TagPickerOption: ForwardRefComponent<TagPickerOptionProps>;

/**
 * OptionGroup component used inside Listbox.
 */
export declare const TagPickerOptionGroup: ForwardRefComponent<TagPickerOptionGroupProps>;

/**
 * OptionGroup Props
 */
export declare type TagPickerOptionGroupProps = OptionGroupProps;

export declare type TagPickerOptionGroupSlots = OptionGroupSlots;

/**
 * State used in rendering OptionGroup
 */
export declare type TagPickerOptionGroupState = OptionGroupState;

/**
 * TagPickerOption Props
 *
 * Uses ComponentProps<TagPickerOptionSlots> so all public slots and root attributes are
 * represented by the component's own slot contract.
 */
export declare type TagPickerOptionProps = ComponentProps<TagPickerOptionSlots> & {
    /**
     * Unique string value for this option, used to track selection state.
     */
    value: string;
    /**
     * Sets an option to the `disabled` state.
     * Disabled options cannot be selected, but are still keyboard navigable.
     */
    disabled?: boolean;
} & ({
    /**
     * An optional override for the string value of the option's display text,
     * defaulting to the option's child content.
     */
    text?: string;
    children: string;
} | {
    /**
     * The string value of the option's display text when its children are not a string.
     */
    text: string;
    children?: React_2.ReactNode;
});

export declare type TagPickerOptionSlots = Pick<OptionSlots, 'root'> & {
    /**
     * Media rendered before the option's text content (e.g. an avatar or icon).
     */
    media?: Slot<'div'>;
    /**
     * Secondary text rendered after the option's text content.
     */
    secondaryContent?: Slot<'span'>;
};

/**
 * State used in rendering the headless TagPickerOption.
 * OptionState is retained (rather than the narrower upstream state) so that
 * disabled/selected/checkIcon rendering from useOption is available at render time.
 */
export declare type TagPickerOptionState = OptionState & ComponentState<TagPickerOptionSlots>;

export declare type TagPickerProps = TagPickerBaseProps & {
    positioning?: PositioningShorthand;
};

export { TagPickerSize }

export { TagPickerSlots }

export { TagPickerState }

/**
 * Returns the state for a headless TagPicker.
 */
export declare const useTagPicker: (props: TagPickerProps) => TagPickerState;

/**
 * Returns the state for a headless TagPickerButton.
 */
export declare const useTagPickerButton: (props: TagPickerButtonProps, ref: React_2.Ref<HTMLButtonElement>) => TagPickerButtonState;

export { useTagPickerContext_unstable }

export { useTagPickerContextValues }

/**
 * Returns the state for a headless TagPickerControl.
 *
 * Wraps {@link useTagPickerControlBase_unstable} (which omits `size`/`appearance`) and
 * exposes the disabled/invalid state as `data-*` attributes for styling hooks.
 */
export declare const useTagPickerControl: (props: TagPickerControlProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerControlState;

export declare function useTagPickerFilter({ filter: filterOverride, noOptionsElement, renderOption, query, options, }: UseTagPickerFilterConfig): JSXElement[];

declare type UseTagPickerFilterConfig = {
    query: string;
    options: string[];
    filter?: (option: string, index: number) => boolean;
    noOptionsElement: JSXElement;
    renderOption?: (option: string) => JSXElement;
};

/**
 * Returns the state for a headless TagPickerGroup.
 */
export declare const useTagPickerGroup: (props: TagPickerGroupProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerGroupState;

export declare function useTagPickerGroupContextValues(state: TagPickerGroupState): TagGroupContextValues;

/**
 * Returns the state for a headless TagPickerInput.
 */
export declare const useTagPickerInput: (props: TagPickerInputProps, ref: React_2.Ref<HTMLInputElement>) => TagPickerInputState;

/**
 * Returns the state for a headless TagPickerList.
 */
export declare const useTagPickerList: (props: TagPickerListProps, ref: React_2.Ref<HTMLDivElement>) => TagPickerListState;

/**
 * Returns the state for a headless TagPickerOption.
 *
 */
export declare const useTagPickerOption: (props: TagPickerOptionProps, ref: React_2.Ref<HTMLElement>) => TagPickerOptionState;

/**
 * Returns the state for an OptionGroup component, given its props and ref.
 * The returned state can be modified with hooks before being passed to `renderOptionGroup`.
 */
export declare const useTagPickerOptionGroup: (props: TagPickerOptionGroupProps, ref: React_2.Ref<HTMLElement>) => TagPickerOptionGroupState;

export { }