import { AcceptedMode, ColorFormat, Direction, Orientation, RGB, SliderColorSelected } from '../../../shared';
import { ComputedRef, Ref } from 'vue';
import { PrimitiveProps } from 'radix-vue';

export type SliderUiRootProps = PrimitiveProps & {
    /**
     * The reading direction of Slider UI when applicable. <br> If omitted assumes LTR (left-to-right) reading mode.
     * @defaultValue "ltr"
     */
    dir?: Direction;
    /**
     * The orientation of the Slider UI.
     */
    orientation?: Orientation;
    /** The accepted color mode
     * @defaultValue ["rgb", "hsl", "hex"]
     * */
    acceptedMode?: AcceptedMode[];
    /** Format modelValue
     * @defaultValue "rgb"
     */
    colorFormat?: ColorFormat;
    /** The default value of the slider picker
     * @defaultValue { r: 255, g: 0, b: 0 }
     */
    defaultValue?: SliderColorSelected;
    /**
     * The model value of the slider picker.
     * Check [useFormatColor](https://color-ui-vue.vercel.app/docs/utilities/use-format-color.html) for type declarations.
     */
    modelValue?: SliderColorSelected;
    /**
     * Array of lightness values for the swatches.
     * Note the number of swatches is determined by the length of this array.
     * Max value number is 100 and min value number is 0.
     * @defaultValue [80, 65, 50, 35, 20]
     */
    swatches?: number[];
    /**
     * The default saturation.
     * @defaultValue 50
     */
    defaultSaturation?: number;
};
export type SliderUiRootEmits = {
    /**
     * Event handler called when the color selected change
     */
    "update:modelValue": [payload: SliderColorSelected];
};
export type SliderUiRootProvider = {
    containerId: string;
    dir: Ref<Direction>;
    orientation: Ref<Orientation | undefined>;
    acceptedMode: Ref<AcceptedMode[]>;
    positionColor: Ref<number>;
    color: Ref<number[]>;
    updateColorSelected: () => void;
    updateColor: () => void;
    colorSelected: Ref<number[]>;
    colorFormat: Ref<ColorFormat>;
    setColor: (color: RGB) => void;
    swatches: ComputedRef<number[][]>;
};
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
    modelValue: import('vue').PropType<SliderColorSelected>;
    defaultValue: {
        type: import('vue').PropType<SliderColorSelected>;
        default: () => {
            r: number;
            g: number;
            b: number;
        };
    };
    dir: {
        type: import('vue').PropType<Direction>;
        default: string;
    };
    asChild: {
        type: import('vue').PropType<boolean>;
    };
    as: {
        type: import('vue').PropType<import('radix-vue').AsTag | import('vue').Component>;
        default: string;
    };
    orientation: {
        type: import('vue').PropType<Orientation>;
    };
    colorFormat: {
        type: import('vue').PropType<ColorFormat>;
        default: string;
    };
    acceptedMode: {
        type: import('vue').PropType<AcceptedMode[]>;
        default: () => string[];
    };
    swatches: {
        type: import('vue').PropType<number[]>;
        default: () => number[];
    };
    defaultSaturation: {
        type: import('vue').PropType<number>;
        default: number;
    };
}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
    "update:modelValue": (payload: SliderColorSelected) => void;
}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
    modelValue: import('vue').PropType<SliderColorSelected>;
    defaultValue: {
        type: import('vue').PropType<SliderColorSelected>;
        default: () => {
            r: number;
            g: number;
            b: number;
        };
    };
    dir: {
        type: import('vue').PropType<Direction>;
        default: string;
    };
    asChild: {
        type: import('vue').PropType<boolean>;
    };
    as: {
        type: import('vue').PropType<import('radix-vue').AsTag | import('vue').Component>;
        default: string;
    };
    orientation: {
        type: import('vue').PropType<Orientation>;
    };
    colorFormat: {
        type: import('vue').PropType<ColorFormat>;
        default: string;
    };
    acceptedMode: {
        type: import('vue').PropType<AcceptedMode[]>;
        default: () => string[];
    };
    swatches: {
        type: import('vue').PropType<number[]>;
        default: () => number[];
    };
    defaultSaturation: {
        type: import('vue').PropType<number>;
        default: number;
    };
}>> & {
    "onUpdate:modelValue"?: ((payload: SliderColorSelected) => any) | undefined;
}, {
    defaultValue: SliderColorSelected;
    dir: Direction;
    as: import('radix-vue').AsTag | import('vue').Component;
    colorFormat: ColorFormat;
    acceptedMode: AcceptedMode[];
    swatches: number[];
    defaultSaturation: number;
}, {}>, {
    default?(_: {}): any;
}>;
export default _default;
type __VLS_WithTemplateSlots<T, S> = T & {
    new (): {
        $slots: S;
    };
};