import * as _redsift_design_system from '@redsift/design-system';
import { ContainerProps, ContainerTransientProps, Comp, ValueOf, TextProps, Theme, FlexboxProps, ListboxContextProps, PillProps, ItemProps, ButtonColor, ButtonVariant, TextFieldVariant } from '@redsift/design-system';
export { ItemProps } from '@redsift/design-system';
import React, { ComponentProps, RefObject, ReactElement, ReactNode } from 'react';
import { PopoverProps, PopoverContentProps, PopoverTriggerProps } from '@redsift/popovers';

/**
 * Component props.
 */
interface ComboboxContentFooterProps extends ComponentProps<'div'>, ContainerProps {
}
interface StyledComboboxContentFooterProps extends ComponentProps<'div'>, ContainerTransientProps {
}

/**
 * The ComboboxContentFooter component.
 */
declare const ComboboxContentFooter: Comp<ComboboxContentFooterProps, HTMLDivElement>;

/**
 * Component props.
 */
interface ComboboxContentHeaderProps extends ComponentProps<'div'>, ContainerProps {
}
interface StyledComboboxContentHeaderProps extends ComponentProps<'div'>, ContainerTransientProps {
}

/**
 * The ComboboxContentHeader component.
 */
declare const ComboboxContentHeader: Comp<ComboboxContentHeaderProps, HTMLDivElement>;

/**
 * Component variant.
 */
declare const ComboboxSelectionMode: {
    readonly single: "single";
    readonly multiple: "multiple";
};
type ComboboxSelectionMode = ValueOf<typeof ComboboxSelectionMode>;
declare const ComboboxVariant: {
    readonly options: "options";
    readonly suggestions: "suggestions";
};
type ComboboxVariant = ValueOf<typeof ComboboxVariant>;
type ComboboxValue = string | string[];
/**
 * Context props.
 */
type ComboboxState = {
    /** Filtering parameters. */
    readonly filter?: {
        type: 'startsWith' | 'contains' | 'endsWith';
        caseSensitive?: boolean;
    };
    /** Whether the combobox is disabled or not. */
    readonly isDisabled: boolean;
    /** Whether the combobox is invalid or not. */
    readonly isInvalid: boolean;
    /** Sets the selected value. */
    setValue(value: ComboboxValue): void;
    /** Current selected value. */
    readonly value: ComboboxValue;
    /** Sets the input value. */
    setInputValue(inputValue: string): void;
    /** Current input value. */
    readonly inputValue: string;
    /** Whether the Combobox allow multiple selection or not. */
    selectionMode?: ComboboxSelectionMode;
    /** If 'options', the input field cannot have free text, the selection has to be made within the options. If 'suggestions', then choosing from the list isn't mandatory and the user can write free text within the input. */
    variant?: ComboboxVariant;
    /** Ref to the first item used to create values. */
    freeTextItemRef?: RefObject<HTMLDivElement>;
    /** Id of the first item used to create values. */
    freeTextItemId?: string;
    /** Class name to append to the trigger. */
    readonly triggerClassName?: string;
    /** Ref to the form, if any. */
    formRef?: RefObject<HTMLFormElement>;
    /** Ref to the submit button, if any. */
    submitRef?: RefObject<HTMLButtonElement>;
};
/**
 * Component props.
 */
interface ComboboxProps extends PopoverProps {
    /**
     * If 'options', the input field cannot have free text, the selection has to be made within the options. If 'suggestions', then choosing from the list isn't mandatory and the user can write free text within the input.
     * @default 'options'
     */
    variant?: ComboboxVariant;
    /**
     * Default selected value.
     * Used for uncontrolled version.
     */
    defaultValue?: ComboboxValue;
    /** Description of the combobox. */
    description?: string | ReactElement;
    /** Additional description properties. */
    descriptionProps?: Omit<TextProps, 'ref'>;
    /** Filtering parameters. */
    filter?: {
        type: 'startsWith' | 'contains' | 'endsWith';
        caseSensitive?: boolean;
    };
    /** Ref to the form, if any. */
    formRef?: RefObject<HTMLFormElement>;
    /** Ref to the submit button, if any. */
    submitRef?: RefObject<HTMLButtonElement>;
    /** Whether the component is disabled or not. */
    isDisabled?: boolean;
    /** Whether the component is invalid or not. */
    isInvalid?: boolean;
    /** Maximum number of options displayed. Useful when too many options are displayed. */
    maxOptionsLength?: number;
    /** Method to handle selection change. */
    onChange?(value: ComboboxValue): void;
    /** Method to handle input change. */
    onInputChange?(value: string): void;
    /**
     * Currently selected value.
     * Used for controlled version.
     */
    value?: ComboboxValue;
    /** Input value. */
    inputValue?: string;
    /** Whether the Combobox allow multiple selection or not. */
    selectionMode?: ComboboxSelectionMode;
    /** Theme. */
    theme?: Theme;
    /** Class name to append to the trigger. */
    triggerClassName?: string;
    /** Props to forward to the wrapper. */
    wrapperProps?: Omit<FlexboxProps, 'ref'>;
}
type StyledComboboxProps = ComboboxProps;

/**
 * Component props.
 */
interface ComboboxContentListboxProps extends FlexboxProps {
    renderFreeTextItem?: ReactNode | ((value?: string, comboboxState?: ComboboxState | null, listboxState?: ListboxContextProps) => ReactNode);
}

/**
 * The ComboboxContentListbox component.
 */
declare const ComboboxContentListbox: Comp<ComboboxContentListboxProps, HTMLDivElement>;

/**
 * Component props.
 */
interface ComboboxContentProps extends PopoverContentProps {
    /** Whether the popover should stay open even if there is no result after filter. */
    shouldStayOpenEvenIfEmpty?: boolean;
}

/**
 * The ComboboxContent component.
 */
declare const BaseComboboxContent: Comp<ComboboxContentProps, HTMLDivElement>;
declare const ComboboxContent: Comp<ComboboxContentProps, HTMLDivElement> & {
    Header: Comp<ComboboxContentHeaderProps, HTMLDivElement>;
    Listbox: Comp<ComboboxContentListboxProps, HTMLDivElement>;
    Footer: Comp<ComboboxContentFooterProps, HTMLDivElement>;
};

/**
 * Component props.
 */
interface ComboboxTriggerProps extends Omit<PopoverTriggerProps, 'children'> {
    /** Children */
    children: ReactElement | ((state: {
        value?: ComboboxValue;
        isOpen?: boolean;
    }) => ReactElement);
    /** Whether the clear button should be hiding (not recommended) */
    hideClearButton?: boolean;
    /** Whether or not the expand/collapse icon button should be displayed or not. */
    hideExpandButton?: boolean;
    /** Whether the popover should open on focus. */
    openOnFocus?: boolean;
    /** Props to forward to the Pills. */
    pillProps?: Omit<PillProps, 'ref' | 'children'>;
    /** Method used to customize the content of the Pills. */
    renderPillContent?: (value: string) => ReactNode;
}

/**
 * The ComboboxTrigger component.
 */
declare const ComboboxTrigger: Comp<ComboboxTriggerProps, HTMLButtonElement>;

/**
 * Combobox combines a text input with a filterable dropdown list.
 * Supports single or multiple selection with type-ahead filtering.
 *
 * Variants:
 * - `options`: Shows predefined options only (default)
 * - `freeform`: Allows custom values not in the list
 *
 * Selection modes: `single`, `multiple`
 *
 * @example
 * // Basic single-select combobox
 * <Combobox label="Country" onChange={(value) => setCountry(value)}>
 *   <Combobox.Trigger placeholder="Search countries..." />
 *   <Combobox.Content>
 *     <Item value="us">United States</Item>
 *     <Item value="uk">United Kingdom</Item>
 *     <Item value="ca">Canada</Item>
 *   </Combobox.Content>
 * </Combobox>
 *
 * @example
 * // Multi-select combobox
 * <Combobox
 *   label="Tags"
 *   selectionMode="multiple"
 *   value={selectedTags}
 *   onChange={setSelectedTags}
 * >
 *   <Combobox.Trigger placeholder="Add tags..." />
 *   <Combobox.Content>
 *     <Item value="urgent">Urgent</Item>
 *     <Item value="bug">Bug</Item>
 *     <Item value="feature">Feature</Item>
 *   </Combobox.Content>
 * </Combobox>
 *
 * @example
 * // Open dropdown on focus (for autocomplete fields)
 * <Combobox label="Assignee">
 *   <Combobox.Trigger openOnFocus placeholder="Search users..." />
 *   <Combobox.Content>...</Combobox.Content>
 * </Combobox>
 *
 * @example
 * // With Header and Footer
 * <Combobox label="Recipients">
 *   <Combobox.Trigger />
 *   <Combobox.Content>
 *     <Combobox.Content.Header>
 *       <Text variant="small">Recent contacts</Text>
 *     </Combobox.Content.Header>
 *     <Combobox.Content.Listbox>
 *       <Item value="alice">Alice</Item>
 *       <Item value="bob">Bob</Item>
 *     </Combobox.Content.Listbox>
 *     <Combobox.Content.Footer>
 *       <Button variant="text">Add new contact</Button>
 *     </Combobox.Content.Footer>
 *   </Combobox.Content>
 * </Combobox>
 *
 * @example
 * // Freeform variant (allows custom entries)
 * <Combobox label="Email" variant="freeform">
 *   <Combobox.Trigger placeholder="Enter or select email" />
 *   <Combobox.Content>
 *     {suggestions.map(email => <Item key={email} value={email}>{email}</Item>)}
 *   </Combobox.Content>
 * </Combobox>
 *
 * @example
 * // Multi-select with custom pill content
 * <Combobox selectionMode="multiple" variant="options">
 *   <Combobox.Trigger
 *     renderPillContent={(value) => (
 *       <Flexbox alignItems="center" gap="4px">
 *         <Icon icon={icons[value]} size="small" />
 *         <Text color={colors[value]}>{value}</Text>
 *       </Flexbox>
 *     )}
 *   >
 *     <TextField label="Pick items" />
 *   </Combobox.Trigger>
 *   <Combobox.Content>
 *     <Item value="cat">Cat</Item>
 *     <Item value="dog">Dog</Item>
 *   </Combobox.Content>
 * </Combobox>
 */
declare const BaseCombobox: React.FC<ComboboxProps> & {
    displayName?: string;
    className?: string;
};
declare const Combobox: React.FC<ComboboxProps> & {
    displayName?: string;
    className?: string;
} & {
    Trigger: _redsift_design_system.Comp<ComboboxTriggerProps, HTMLButtonElement>;
    Content: _redsift_design_system.Comp<ComboboxContentProps, HTMLDivElement> & {
        Header: _redsift_design_system.Comp<ComboboxContentHeaderProps, HTMLDivElement>;
        Listbox: _redsift_design_system.Comp<ComboboxContentListboxProps, HTMLDivElement>;
        Footer: _redsift_design_system.Comp<ComboboxContentFooterProps, HTMLDivElement>;
    };
};

/**
 * The Item component.
 */
declare const Item: Comp<ItemProps, HTMLElement>;

/**
 * Component props.
 */
interface MenuButtonContentFooterProps extends ComponentProps<'div'>, ContainerProps {
}
interface StyledMenuButtonContentFooterProps extends ComponentProps<'div'>, ContainerTransientProps {
}

/**
 * The MenuButtonContentFooter component.
 */
declare const MenuButtonContentFooter: Comp<MenuButtonContentFooterProps, HTMLDivElement>;

/**
 * Component props.
 */
interface MenuButtonContentHeaderProps extends ComponentProps<'div'>, ContainerProps {
}
interface StyledMenuButtonContentHeaderProps extends ComponentProps<'div'>, ContainerTransientProps {
}

/**
 * The MenuButtonContentHeader component.
 */
declare const MenuButtonContentHeader: Comp<MenuButtonContentHeaderProps, HTMLDivElement>;

/**
 * Component props.
 */
interface MenuButtonContentMenuProps extends FlexboxProps {
}

/**
 * The MenuButtonContentMenu component.
 */
declare const MenuButtonContentMenu: Comp<MenuButtonContentMenuProps, HTMLDivElement>;

/**
 * Component props.
 */
interface MenuButtonContentProps extends PopoverContentProps {
}

/**
 * The MenuButtonContent component.
 */
declare const BaseMenuButtonContent: Comp<MenuButtonContentProps, HTMLDivElement>;
declare const MenuButtonContent: Comp<MenuButtonContentProps, HTMLDivElement> & {
    Header: Comp<MenuButtonContentHeaderProps, HTMLDivElement>;
    Menu: Comp<MenuButtonContentMenuProps, HTMLDivElement>;
    Footer: Comp<MenuButtonContentFooterProps, HTMLDivElement>;
};

/**
 * Component props.
 */
interface MenuButtonTriggerProps extends Omit<PopoverTriggerProps, 'children'> {
    /** Children */
    children: ReactElement | ((state: {
        value?: string;
        isOpen?: boolean;
    }) => ReactElement);
}

/**
 * The MenuButtonTrigger component.
 */
declare const MenuButtonTrigger: Comp<MenuButtonTriggerProps, HTMLButtonElement>;

/**
 * Context props.
 */
type MenuButtonState = {
    /** Button color that will be forward to the trigger. */
    readonly color?: ButtonColor;
    /** Whether the trigger is disabled or not. */
    readonly isDisabled: boolean;
    /** Class name to append to the trigger. */
    readonly triggerClassName?: string;
    /** Button variant that will be forward to the trigger. */
    readonly variant?: ButtonVariant;
};
/**
 * Component props.
 */
interface MenuButtonProps extends PopoverProps {
    /** Button color that will be forward to the trigger. */
    color?: ButtonColor;
    /** Description of the menu button. */
    description?: string | ReactElement;
    /** Additional description properties. */
    descriptionProps?: Omit<TextProps, 'ref'>;
    /** Whether the component is disabled or not. */
    isDisabled?: boolean;
    /** Label of the menu button. */
    label?: string | ReactElement;
    /** Additional label properties. */
    labelProps?: Omit<TextProps, 'ref'>;
    /** Class name to append to the trigger. */
    triggerClassName?: string;
    /** Button variant that will be forward to the trigger. */
    variant?: ButtonVariant;
    /** Theme. */
    theme?: Theme;
    /** Props to forward to the wrapper. */
    wrapperProps?: Omit<FlexboxProps, 'ref'>;
}
type StyledMenuButtonProps = MenuButtonProps;

/**
 * MenuButton displays a button that opens a menu of actions.
 * Unlike Select (for choosing values), MenuButton triggers actions.
 *
 * Built on Popover with keyboard navigation and proper ARIA roles.
 *
 * @example
 * // Basic menu button
 * <MenuButton label="Actions">
 *   <MenuButton.Trigger>Options</MenuButton.Trigger>
 *   <MenuButton.Content>
 *     <Item onAction={() => handleEdit()}>Edit</Item>
 *     <Item onAction={() => handleDuplicate()}>Duplicate</Item>
 *     <Item onAction={() => handleDelete()}>Delete</Item>
 *   </MenuButton.Content>
 * </MenuButton>
 *
 * @example
 * // Three-dot icon menu (common pattern)
 * <MenuButton>
 *   <MenuButton.Trigger>
 *     <IconButton icon={mdiDotsVertical} aria-label="More options" />
 *   </MenuButton.Trigger>
 *   <MenuButton.Content>
 *     <Item onAction={handleShare}>Share</Item>
 *     <Item onAction={handleExport}>Export</Item>
 *   </MenuButton.Content>
 * </MenuButton>
 *
 * @example
 * // Button with dynamic chevron indicator
 * <MenuButton>
 *   <MenuButton.Trigger>
 *     {({ isOpen }) => (
 *       <Button rightIcon={isOpen ? mdiChevronUp : mdiChevronDown}>
 *         Sort by
 *       </Button>
 *     )}
 *   </MenuButton.Trigger>
 *   <MenuButton.Content>...</MenuButton.Content>
 * </MenuButton>
 *
 * @example
 * // Items with icons
 * <MenuButton>
 *   <MenuButton.Trigger>Actions</MenuButton.Trigger>
 *   <MenuButton.Content>
 *     <Item onAction={handleEdit}>
 *       <Icon icon={mdiPencil} />
 *       Edit
 *     </Item>
 *     <Item onAction={handleDelete}>
 *       <Icon icon={mdiDelete} color="danger" />
 *       Delete
 *     </Item>
 *   </MenuButton.Content>
 * </MenuButton>
 *
 * @example
 * // With links instead of actions
 * <MenuButton>
 *   <MenuButton.Trigger>Navigate</MenuButton.Trigger>
 *   <MenuButton.Content>
 *     <Item><Link href="/dashboard">Dashboard</Link></Item>
 *     <Item><Link href="/settings">Settings</Link></Item>
 *   </MenuButton.Content>
 * </MenuButton>
 */
declare const BaseMenuButton: React.FC<MenuButtonProps> & {
    displayName?: string;
    className?: string;
};
declare const MenuButton: React.FC<MenuButtonProps> & {
    displayName?: string;
    className?: string;
} & {
    Trigger: _redsift_design_system.Comp<MenuButtonTriggerProps, HTMLButtonElement>;
    Content: _redsift_design_system.Comp<MenuButtonContentProps, HTMLDivElement> & {
        Header: _redsift_design_system.Comp<MenuButtonContentHeaderProps, HTMLDivElement>;
        Menu: _redsift_design_system.Comp<MenuButtonContentMenuProps, HTMLDivElement>;
        Footer: _redsift_design_system.Comp<MenuButtonContentFooterProps, HTMLDivElement>;
    };
};

/**
 * Component props.
 */
interface SelectContentProps extends PopoverContentProps {
}

/**
 * The SelectContent component.
 */
declare const SelectContent: Comp<SelectContentProps, HTMLDivElement>;

/**
 * Component props.
 */
interface SelectTriggerProps extends Omit<PopoverTriggerProps, 'children'> {
    /** Children */
    children: ReactElement | ((state: {
        value?: string;
        isOpen?: boolean;
    }) => ReactElement);
    /** Whether or not the expand/collapse icon button should be displayed or not. */
    hideExpandButton?: boolean;
}

/**
 * The SelectTrigger component.
 */
declare const SelectTrigger: Comp<SelectTriggerProps, HTMLButtonElement>;

/**
 * Context props.
 */
type SelectState = {
    /** Button color that will be forward to the trigger. */
    readonly color?: ButtonColor;
    /** Whether the select is disabled or not. */
    readonly isDisabled: boolean;
    /** Whether the select is invalid or not. */
    readonly isInvalid: boolean;
    /** Sets the selected value. */
    setValue(value: string): void;
    /** Current selected value. */
    readonly value: string;
    /** Class name to append to the trigger. */
    readonly triggerClassName?: string;
    /** Button variant that will be forward to the trigger. */
    readonly variant?: ButtonVariant | TextFieldVariant;
};
/**
 * Component props.
 */
interface SelectProps extends PopoverProps {
    /** Button color that will be forward to the trigger. */
    color?: ButtonColor;
    /**
     * Default selected value.
     * Used for uncontrolled version.
     */
    defaultValue?: string;
    /** Description of the select. */
    description?: string | ReactElement;
    /** Additional description properties. */
    descriptionProps?: Omit<TextProps, 'ref'>;
    /** Whether the component is disabled or not. */
    isDisabled?: boolean;
    /** Whether the component is invalid or not. */
    isInvalid?: boolean;
    /** Method to handle component change. */
    onChange?(value: string): void;
    /**
     * Currently selected value.
     * Used for controlled version.
     */
    value?: string;
    /**
     * Button variant that will be forward to the trigger.
     * @default 'secondary'
     */
    variant?: ButtonVariant | TextFieldVariant;
    /** Theme. */
    theme?: Theme;
    /** Class name to append to the trigger. */
    triggerClassName?: string;
    /** Props to forward to the wrapper. */
    wrapperProps?: Omit<FlexboxProps, 'ref'>;
}
type StyledSelectProps = SelectProps;

/**
 * Select allows users to choose a single option from a dropdown list.
 * Built on Floating UI with keyboard navigation and screen reader support.
 *
 * Composed of `Select.Trigger` and `Select.Content` sub-components.
 * Use the `Item` component for options.
 *
 * For searchable/filterable lists, use Combobox instead.
 *
 * @example
 * // Basic select with TextField trigger (default)
 * <Select label="Country" onChange={(value) => setCountry(value)}>
 *   <Select.Trigger placeholder="Select a country" />
 *   <Select.Content>
 *     <Item value="us">United States</Item>
 *     <Item value="uk">United Kingdom</Item>
 *     <Item value="ca">Canada</Item>
 *   </Select.Content>
 * </Select>
 *
 * @example
 * // Button trigger variant
 * <Select label="Actions">
 *   <Select.Trigger variant="button">Choose action</Select.Trigger>
 *   <Select.Content>
 *     <Item value="edit">Edit</Item>
 *     <Item value="delete">Delete</Item>
 *   </Select.Content>
 * </Select>
 *
 * @example
 * // Controlled select with default value
 * <Select
 *   label="Status"
 *   value={status}
 *   defaultValue="active"
 *   onChange={setStatus}
 * >
 *   <Select.Trigger />
 *   <Select.Content>
 *     <Item value="active">Active</Item>
 *     <Item value="inactive">Inactive</Item>
 *     <Item value="pending">Pending</Item>
 *   </Select.Content>
 * </Select>
 *
 * @example
 * // Render function for custom trigger content
 * <Select label="Sort by">
 *   <Select.Trigger>
 *     {({ selected }) => (
 *       <Button rightIcon={mdiChevronDown}>
 *         {selected?.label || 'Select'}
 *       </Button>
 *     )}
 *   </Select.Trigger>
 *   <Select.Content>...</Select.Content>
 * </Select>
 *
 * @example
 * // With validation
 * <Select label="Priority" isRequired isInvalid={!priority}>
 *   <Select.Trigger placeholder="Choose priority" />
 *   <Select.Content>
 *     <Item value="low">Low</Item>
 *     <Item value="medium">Medium</Item>
 *     <Item value="high">High</Item>
 *   </Select.Content>
 * </Select>
 */
declare const BaseSelect: React.FC<SelectProps> & {
    displayName?: string;
    className?: string;
};
declare const Select: React.FC<SelectProps> & {
    displayName?: string;
    className?: string;
} & {
    Trigger: _redsift_design_system.Comp<SelectTriggerProps, HTMLButtonElement>;
    Content: _redsift_design_system.Comp<SelectContentProps, HTMLDivElement>;
};

export { BaseCombobox, BaseComboboxContent, BaseMenuButton, BaseMenuButtonContent, BaseSelect, Combobox, ComboboxContent, ComboboxContentFooter, ComboboxContentFooterProps, ComboboxContentHeader, ComboboxContentHeaderProps, ComboboxContentListbox, ComboboxContentListboxProps, ComboboxContentProps, ComboboxProps, ComboboxSelectionMode, ComboboxState, ComboboxTrigger, ComboboxTriggerProps, ComboboxValue, ComboboxVariant, Item, MenuButton, MenuButtonContent, MenuButtonContentFooter, MenuButtonContentFooterProps, MenuButtonContentHeader, MenuButtonContentHeaderProps, MenuButtonContentMenu, MenuButtonContentMenuProps, MenuButtonContentProps, MenuButtonProps, MenuButtonState, MenuButtonTrigger, MenuButtonTriggerProps, Select, SelectContent, SelectContentProps, SelectProps, SelectState, SelectTrigger, SelectTriggerProps, StyledComboboxContentFooterProps, StyledComboboxContentHeaderProps, StyledComboboxProps, StyledMenuButtonContentFooterProps, StyledMenuButtonContentHeaderProps, StyledMenuButtonProps, StyledSelectProps };