import { ButtonProps } from '@fluentui/react-components';
import { ComponentProps } from '@fluentui/react-components';
import type { ComponentProps as ComponentProps_2 } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import { GriffelStyle } from '@fluentui/react-components';
import type { JSXElement } from '@fluentui/react-utilities';
import type { JSXIntrinsicElement } from '@fluentui/react-utilities';
import type { JSXIntrinsicElementKeys } from '@fluentui/react-utilities';
import type { ObjectShorthandValue } from '@fluentui/react-northstar';
import * as React_2 from 'react';
import { SelectionHookParams } from '@fluentui/react-utilities';
import { SelectionItemId } from '@fluentui/react-utilities';
import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
import { Slot } from '@fluentui/react-components';
import { Slot as Slot_2 } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';

export declare const Attachment: React_2.ForwardRefExoticComponent<AttachmentProps & React_2.RefAttributes<HTMLDivElement>>;

export declare const AttachmentAction: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<HTMLButtonElement>>;

export declare const attachmentActionClassName = "fui-AttachmentAction";

export declare type AttachmentActionProps = ButtonProps;

export declare const AttachmentBody: React_2.FC<AttachmentBodyProps>;

export declare const attachmentBodyClassName = "fui-AttachmentBody";

export declare interface AttachmentBodyProps extends React_2.HTMLAttributes<HTMLDivElement> {
}

export declare const attachmentClassName = "fui-Attachment";

export declare const AttachmentDescription: React_2.FC<AttachmentDescriptionProps>;

export declare const attachmentDescriptionClassName = "fui-AttachmentDescription";

export declare interface AttachmentDescriptionProps extends React_2.HTMLAttributes<HTMLSpanElement> {
}

export declare const AttachmentHeader: React_2.FC<AttachmentHeaderProps>;

export declare const attachmentHeaderClassName = "fui-AttachmentHeader";

export declare interface AttachmentHeaderProps extends React_2.HTMLAttributes<HTMLSpanElement> {
}

export declare const AttachmentIcon: React_2.FC<AttachmentIconProps>;

export declare const attachmentIconClassName = "fui-AttachmentIcon";

export declare interface AttachmentIconProps extends React_2.HTMLAttributes<HTMLSpanElement> {
}

export declare const attachmentProgressBarClassName = "fui-Attachment__progress";

export declare const attachmentProgressContainerClassName = "fui-Attachment__progress-container";

export declare interface AttachmentProps extends React_2.HTMLAttributes<HTMLElement> {
    actionable?: boolean;
    disabled?: boolean;
    progress?: string | number;
    onClick?: (event: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
}

export declare const Flex: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLElement> & FlexProps & React_2.RefAttributes<HTMLDivElement>>;

export declare const flexClassName = "fui-Flex";

export declare const flexItem: {
    align: (value: "auto" | "start" | "end" | "center" | "baseline" | "stretch") => GriffelStyle;
    size: (value: "half" | "quarter" | "small" | "medium" | "large") => GriffelStyle;
    grow: (flexGrow: boolean | number) => GriffelStyle | undefined;
    shrink: (flexShrink: boolean | number) => GriffelStyle | undefined;
    pushRow: () => GriffelStyle;
    pushColumn: () => GriffelStyle;
};

declare interface FlexProps {
    /** Defines if container should be inline element. */
    inline?: boolean;
    /** Sets vertical flow direction. */
    column?: boolean;
    /** Allows overflow items to wrap on the next container's line. */
    wrap?: boolean;
    /** Controls items alignment in horizontal direction. */
    hAlign?: 'start' | 'center' | 'end' | 'stretch';
    /** Controls items alignment in vertical direction. */
    vAlign?: 'start' | 'center' | 'end' | 'stretch';
    /** Defines strategy for distributing remaining space between items. */
    space?: 'around' | 'between' | 'evenly';
    /** Defines gap between each two adjacent child items. */
    gap?: 'gap.smaller' | 'gap.small' | 'gap.medium' | 'gap.large';
    /** Defines container's padding. */
    padding?: 'padding.medium';
    /** Orders container to fill all parent's space available. */
    fill?: boolean;
}

export declare const FormFieldShim: React_2.ForwardRefExoticComponent<{
    /**
     * Message to be shown when error state is true
     */
    errorMessage?: WithContent;
    /**
     * Whether the field label should be marked as required.
     */
    required?: boolean;
    /**
     * Control to be rendered
     */
    control?: ObjectShorthandValue<{
        /**
         * Control content
         */
        content?: React_2.ReactNode;
    }> & {
        /**
         * Error state
         */
        error?: "true" | "false";
    };
    /**
     * Label to be rendered
     */
    label?: WithContent;
} & {
    children?: React_2.ReactNode | undefined;
} & React_2.RefAttributes<HTMLInputElement>>;

export declare const grid: {
    columns: (template: string) => GriffelStyle;
    rows: (template: string) => GriffelStyle;
};

export declare const gridClassName = "fui-Grid";

export declare const GridShim: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLElement> & GridShimProps & React_2.RefAttributes<HTMLDivElement>>;

export declare interface GridShimProps {
    /**
     * The columns of the grid with a space-separated list of values.
     * The values represent the track size, and the space between them represents the grid line.
     */
    columns?: 1 | 2 | 3;
    /**
     * The rows of the grid with a space-separated list of values.
     * The values represent the track size, and the space between them represents the grid line.
     */
    rows?: 1 | 2 | 3;
}

export declare const input: {
    error: () => GriffelStyle;
    errorIndicator: () => GriffelStyle;
    fluid: () => GriffelStyle;
    successIndicator: () => GriffelStyle;
};

export declare const ItemLayout: React_2.ForwardRefExoticComponent<Omit<ItemLayoutSlots, "root"> & Omit<{
    as?: "div" | undefined;
} & Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "children"> & {
    children?: any;
}, "ref"> & React_2.RefAttributes<HTMLDivElement>>;

export declare const itemLayoutClassName = "fui-ItemLayout";

declare type ItemLayoutSlots = {
    root: Slot_2<'div'>;
    contentMedia?: Slot_2<'div'>;
    contentWrapper?: Slot_2<'div'>;
    header?: Slot_2<'div'>;
    headerMedia?: Slot_2<'div'>;
    startMedia?: Slot_2<'div'>;
    endMedia?: Slot_2<'div'>;
};

export declare const List: ForwardRefComponent<ListProps>;

export declare const listClassNames: SlotClassNames<ListSlots>;

declare type ListContextValue = {
    navigable: boolean;
    selection?: ListSelectionState;
    as?: 'div' | 'ol' | 'ul';
    truncateHeader?: ListProps['truncateHeader'];
    truncateContent?: ListProps['truncateContent'];
};

declare type ListContextValues = {
    listContext: ListContextValue;
};

export declare const ListItem: ForwardRefComponent<ListItemProps>;

export declare const listItemClassNames: SlotClassNames<ListItemSlots>;

/**
 * ListItem Props
 */
export declare type ListItemProps = ComponentProps_2<ListItemSlots> & {
    value?: string | number;
    truncateHeader?: boolean;
    truncateContent?: boolean;
};

export declare type ListItemSlots = {
    root: NonNullable<Slot_2<'li', 'div'>>;
    media?: React_2.ComponentProps<typeof ItemLayout>['startMedia'];
    header?: React_2.ComponentProps<typeof ItemLayout>['header'];
    contentWrapper?: React_2.ComponentProps<typeof ItemLayout>['contentWrapper'];
    headerMedia?: React_2.ComponentProps<typeof ItemLayout>['headerMedia'];
    contentMedia?: React_2.ComponentProps<typeof ItemLayout>['contentMedia'];
    endMedia?: React_2.ComponentProps<typeof ItemLayout>['endMedia'];
};

/**
 * State used in rendering ListItem
 */
export declare type ListItemState = ComponentState<ListItemSlots> & {
    selectable?: boolean;
    selected?: boolean;
    navigable?: boolean;
    truncateHeader?: boolean;
    truncateContent?: boolean;
};

declare type ListLayout = 'horizontal' | 'vertical' | 'grid';

/**
 * List Props
 */
export declare type ListProps = ComponentProps_2<ListSlots> & {
    /**
     * Defines the layout orientation.
     *
     * @default vertical
     */
    layout?: ListLayout;
    /**
     * Defines if the list should be navigable. Set this to true when adding an `onClick` handler.
     *
     * @default false
     */
    navigable?: boolean;
    /**
     * Defines if the List items should be selectable.
     *
     * @default false
     */
    selectable?: boolean;
    /**
     * Defines selection mode for the List.
     *
     * @default single
     */
    selectionMode?: SelectionMode_2;
    /**
     * For controlled selection - defines selected items
     */
    selectedItems?: SelectionItemId[];
    /**
     * For uncontrolled selection - defines default selected items
     */
    defaultSelectedItems?: SelectionItemId[];
    /**
     * Callback for selection change events, used for both controlled and uncontrolled (as notification)
     */
    onSelectionChange?: (event: React_2.SyntheticEvent, data: {
        selectedItems: SelectionItemId[];
    }) => void;
    /**
     * Truncates header
     *
     * @default false
     */
    truncateHeader?: boolean;
    /**
     * Truncates content
     *
     * @default false
     */
    truncateContent?: boolean;
};

declare type ListSelectionState = {
    isSelected: (item: string | number) => boolean;
    toggleItem: (e: React_2.SyntheticEvent, id: string | number) => void;
    deselectItem: (e: React_2.SyntheticEvent, id: string | number) => void;
    selectItem: (e: React_2.SyntheticEvent, id: string | number) => void;
    clearSelection: (e: React_2.SyntheticEvent) => void;
    toggleAllItems: (e: React_2.SyntheticEvent, itemIds: string[] | number[]) => void;
    setSelectedItems: React_2.Dispatch<React_2.SetStateAction<Iterable<SelectionItemId>>>;
    selectedItems: SelectionItemId[];
};

export declare type ListSlots = {
    root: NonNullable<Slot_2<'ul', 'div' | 'ol'>>;
};

/**
 * State used in rendering List
 */
export declare type ListState = ComponentState<ListSlots> & Required<Pick<ListProps, 'layout'>> & ListContextValue;

export declare const Primitive: PrimitiveComponent;

export declare const primitiveClassName = "fui-Primitive";

declare interface PrimitiveComponent {
    /**
     * Infers props from JSX.IntrinsicElements based on "as" value. Explicitly avoids `React.ElementType` and manually
     * narrow the prop types so that events are typed when using JSX.IntrinsicElements.
     */
    <As extends JSXIntrinsicElementKeys>(props: {
        as?: As;
    } & JSXIntrinsicElement<As>): React_2.ReactElement | null;
    displayName: string;
}

/**
 * Render the final JSX of List
 */
export declare const renderList_unstable: (state: ListState, contextValues: ListContextValues) => JSXElement;

/**
 * Render the final JSX of ListItem
 */
export declare const renderListItem_unstable: (state: ListItemState) => JSXElement;

export declare const Segment: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLElement> & React_2.RefAttributes<HTMLDivElement>>;

export declare const slider: {
    fluid: () => GriffelStyle;
};

export declare const spinner: {
    v0Inline: () => GriffelStyle;
    v0SpinnerLabelStyle: () => GriffelStyle;
};

export declare const StyledText: React_2.ForwardRefExoticComponent<StyledTextProps & React_2.RefAttributes<HTMLSpanElement>>;

export declare const styledTextClassName = "fui-StyledText";

export declare type StyledTextProps = ComponentProps<StyledTextSlots> & {
    /**
     * Aligns text based on the parent container.
     */
    align?: 'start' | 'center' | 'end' | 'justify';
    /**
     * At mentions can be formatted to draw users' attention.
     * Mentions for "me" can be formatted to appear differently.
     */
    atMention?: 'me' | boolean;
    /**
     * Set as disabled StyledText component
     */
    disabled?: boolean;
    /**
     * Set as error StyledText component
     */
    error?: boolean;
    /**
     * The StyledText can appear more important and draw user's attention
     */
    important?: boolean;
    /**
     * Applies font size and line height based on the theme tokens.
     */
    size?: 'smaller' | 'small' | 'medium' | 'large' | 'large500' | 'larger' | 'largest' | 100 | 200 | 300 | 400 | 500 | 600 | 700;
    /**
     * Set as success StyledText component
     */
    success?: boolean;
    /**
     * The text can signify a temporary state
     */
    temporary?: boolean;
    /**
     * Set as timestamp StyledText component
     */
    timestamp?: boolean;
    /**
     * Truncate overflowing text for block displays.
     */
    truncate?: boolean;
    /**
     * Applies font weight to the content.
     */
    weight?: 'light' | 'semilight' | 'regular' | 'medium' | 'semibold' | 'bold';
    /**
     * Wraps the text content on white spaces.
     *
     * @default true
     */
    wrap?: boolean;
};

export declare type StyledTextSlots = {
    root: Slot<'span', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'pre' | 'time'>;
};

export declare const useFlexStyles: () => Record<"flex" | "fill" | "inline" | "column" | "wrap" | "alignItemsFlexStart" | "alignItemsCenter" | "alignItemsFlexEnd" | "alignItemsStretch" | "justifyContentFlexStart" | "justifyContentCenter" | "justifyContentFlexEnd" | "justifyContentStretch" | "justifyContentSpaceAround" | "justifyContentSpaceBetween" | "justifyContentSpaceEvenly" | "gapForColumnFlexSmall" | "gapForColumnFlexSmaller" | "gapForColumnFlexMedium" | "gapForColumnFlexLarge" | "gapForRowFlexSmall" | "gapForRowFlexSmaller" | "gapForRowFlexMedium" | "gapForRowFlexLarge" | "paddingMedium", string>;

export declare const useGridStyles: () => Record<"grid" | "onlyRows" | "rows1" | "rows2" | "rows3" | "columns1" | "columns2" | "columns3" | "columnsDefault", string>;

export declare const useItemLayoutStyles: () => Record<"root" | "header" | "contentMedia" | "contentWrapper" | "headerMedia" | "startMedia" | "endMedia", string>;

/**
 * Create the state required to render List.
 *
 * The returned state can be modified with hooks such as useListStyles_unstable,
 * before being passed to renderList_unstable.
 *
 * @param props - props from this instance of List
 * @param ref - reference to root HTMLElement of List
 */
export declare const useList_unstable: (props: ListProps, ref: React_2.Ref<HTMLDivElement | HTMLUListElement>) => ListState;

/**
 * Create the state required to render ListItem.
 *
 * The returned state can be modified with hooks such as useListItemStyles_unstable,
 * before being passed to renderListItem_unstable.
 *
 * @param props - props from this instance of ListItem
 * @param ref - reference to root HTMLLIElement | HTMLDivElementof ListItem
 */
export declare const useListItem_unstable: (props: ListItemProps, ref: React_2.Ref<HTMLLIElement | HTMLDivElement>) => ListItemState;

/**
 * Apply styling to the ListItem slots based on the state
 */
export declare const useListItemStyles_unstable: (state: ListItemState) => ListItemState;

export declare function useListSelection(options?: SelectionHookParams): ListSelectionState;

/**
 * Apply styling to the List slots based on the state
 */
export declare const useListStyles_unstable: (state: ListState) => ListState;

export declare const v0Icon: () => GriffelStyle;

export declare const v9CustomSizeIcon: () => GriffelStyle;

export declare const v9DisabledCursor: () => GriffelStyle;

export declare const v9HoverClasses: () => GriffelStyle;

export declare const v9Icon: () => GriffelStyle;

export declare const Video: React_2.ForwardRefExoticComponent<VideoProps & React_2.RefAttributes<HTMLVideoElement>>;

export declare const videoClassName = "fui-Video";

/**
 * Video component props
 */
export declare interface VideoProps extends React_2.VideoHTMLAttributes<HTMLVideoElement> {
    /**
     * The source URL of the video
     */
    src: string;
    /**
     * Whether the video should start playing automatically
     * @default false
     */
    autoPlay?: boolean;
    /**
     * Whether the video should display controls
     * @default true
     */
    controls?: boolean;
    /**
     * Whether the video should loop
     */
    loop?: boolean;
    /**
     * Whether the video should be muted
     */
    muted?: boolean;
    /**
     * The URL of an image to display while the video is loading
     */
    poster?: string;
}

declare type WithContent = ObjectShorthandValue<React_2.HTMLAttributes<HTMLDivElement>> | string;

export { }