import type { ColorSwatchBaseState } from '@fluentui/react-swatch-picker';
import { ColorSwatchBaseProps as ColorSwatchProps } from '@fluentui/react-swatch-picker';
import { ColorSwatchSlots } from '@fluentui/react-swatch-picker';
import type { EmptySwatchBaseState } from '@fluentui/react-swatch-picker';
import { EmptySwatchBaseProps as EmptySwatchProps } from '@fluentui/react-swatch-picker';
import { EmptySwatchSlots } from '@fluentui/react-swatch-picker';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { ImageSwatchBaseState } from '@fluentui/react-swatch-picker';
import { ImageSwatchBaseProps as ImageSwatchProps } from '@fluentui/react-swatch-picker';
import { ImageSwatchSlots } from '@fluentui/react-swatch-picker';
import type * as React_2 from 'react';
import { renderColorSwatch_unstable as renderColorSwatch } from '@fluentui/react-swatch-picker';
import { renderEmptySwatch_unstable as renderEmptySwatch } from '@fluentui/react-swatch-picker';
import { renderImageSwatch_unstable as renderImageSwatch } from '@fluentui/react-swatch-picker';
import { renderSwatchPicker_unstable as renderSwatchPicker } from '@fluentui/react-swatch-picker';
import { renderSwatchPickerRow_unstable as renderSwatchPickerRow } from '@fluentui/react-swatch-picker';
import type { SwatchPickerBaseState } from '@fluentui/react-swatch-picker';
import { SwatchPickerBaseProps as SwatchPickerProps } from '@fluentui/react-swatch-picker';
import type { SwatchPickerRowBaseState } from '@fluentui/react-swatch-picker';
import { SwatchPickerRowBaseProps as SwatchPickerRowProps } from '@fluentui/react-swatch-picker';
import { SwatchPickerRowSlots } from '@fluentui/react-swatch-picker';
import { SwatchPickerSlots } from '@fluentui/react-swatch-picker';
import { useSwatchPickerContextValue_unstable as useSwatchPickerContextValue } from '@fluentui/react-swatch-picker';
import { useSwatchPickerContextValues } from '@fluentui/react-swatch-picker';

export declare const ColorSwatch: ForwardRefComponent<ColorSwatchProps>;

export { ColorSwatchProps }

export { ColorSwatchSlots }

export declare type ColorSwatchState = ColorSwatchBaseState & {
    root: {
        /**
         * Whether ColorSwatch is selected
         */
        'data-selected'?: string;
        /**
         * Whether ColorSwatch is disabled
         */
        'data-disabled'?: string;
    };
};

export declare const EmptySwatch: ForwardRefComponent<EmptySwatchProps>;

export { EmptySwatchProps }

export { EmptySwatchSlots }

export declare type EmptySwatchState = EmptySwatchBaseState & {
    root: {
        /**
         * Whether EmptySwatch is selected
         */
        'data-selected'?: string;
        /**
         * Whether EmptySwatch is disabled
         */
        'data-disabled'?: string;
    };
};

export declare const ImageSwatch: ForwardRefComponent<ImageSwatchProps>;

export { ImageSwatchProps }

export { ImageSwatchSlots }

export declare type ImageSwatchState = ImageSwatchBaseState & {
    root: {
        /**
         * Whether ImageSwatch is selected
         */
        'data-selected'?: string;
    };
};

export { renderColorSwatch }

export { renderEmptySwatch }

export { renderImageSwatch }

export { renderSwatchPicker }

export { renderSwatchPickerRow }

/**
 * SwatchPicker represents a collection of swatches that can be selected. It is used
 * to display a set of colors or images for the user to choose from.
 */
export declare const SwatchPicker: ForwardRefComponent<SwatchPickerProps>;

export { SwatchPickerProps }

export declare const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps>;

export { SwatchPickerRowProps }

export { SwatchPickerRowSlots }

export declare type SwatchPickerRowState = SwatchPickerRowBaseState & {
    root: SwatchPickerRowBaseState['root'] & {
        /**
         * The `focusgrouprow` attribute is used to indicate that the row is part of a focus group for keyboard navigation.
         */
        focusgrouprow?: string;
    };
};

export { SwatchPickerSlots }

export declare type SwatchPickerState = SwatchPickerBaseState & {
    root: {
        /**
         * Whether SwatchPicker is row or grid
         */
        'data-layout'?: SwatchPickerBaseState['layout'];
        /**
         * Arrow navigation mode for SwatchPicker
         */
        focusgroup?: string;
    };
};

export declare const useColorSwatch: (props: ColorSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ColorSwatchState;

export declare const useEmptySwatch: (props: EmptySwatchProps, ref: React_2.Ref<HTMLButtonElement>) => EmptySwatchState;

export declare const useImageSwatch: (props: ImageSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ImageSwatchState;

export declare const useSwatchPicker: (props: SwatchPickerProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerState;

export { useSwatchPickerContextValue }

export { useSwatchPickerContextValues }

export declare const useSwatchPickerRow: (props: SwatchPickerRowProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerRowState;

export { }