import { type HTMLAttributes, type ReactElement, type ReactNode, type Ref } from "react";
import { type TooltipProps } from "../tooltip/Tooltip.js";
import { type LabelRequiredForA11y, type PropsWithRef } from "../types.js";
import { type SliderAddonProps } from "./SliderContainer.js";
import { type SliderThumbPresentation } from "./SliderThumb.js";
import { type SliderMarksOptions } from "./SliderValueMarks.js";
import { type RangeSliderState } from "./useRangeSlider.js";
import { type SliderState, type SliderValueOptions } from "./useSlider.js";
declare module "react" {
    interface CSSProperties {
        "--rmd-slider-color"?: string;
        "--rmd-slider-active-color"?: string;
        "--rmd-slider-inactive-color"?: string;
        "--rmd-slider-size"?: string | number;
        "--rmd-slider-active-size"?: string | number;
        "--rmd-slider-inactive-size"?: string | number;
        "--rmd-slider-vertical-size"?: string | number;
        "--rmd-slider-offset-1"?: string;
        "--rmd-slider-offset-2"?: string;
        "--rmd-slider-tooltip-scale"?: string | number;
        "--rmd-slider-tooltip-translate"?: string | number;
        "--rmd-slider-mark-offset"?: string;
    }
}
/**
 * @remarks \@since 2.5.0
 */
export interface BaseSliderProps extends HTMLAttributes<HTMLDivElement>, SliderThumbPresentation, SliderValueOptions, SliderAddonProps, SliderMarksOptions {
    /**
     * This can be used to apply a ref to the container element since this
     * component does not use `forwardRef`.
     */
    containerRef?: Ref<HTMLDivElement>;
    /**
     * The amount to jump the slider's value when the `PageUp` or `PageDown`
     * key is pressed.
     *
     * The default value is 1/10th of the range.
     *
     * @defaultValue `(numberOfSteps / 10) * step`
     */
    jump?: number;
    /** @defaultValue `false` */
    disabled?: boolean;
    /** @defaultValue `false` */
    vertical?: boolean;
    /**
     * This can be used to apply custom styles or a `ref` to the track element if
     * needed.
     */
    trackProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;
    /**
     * This can be used to configure any additional tooltip props like the
     * CSS transition `classNames`, styles, etc.
     *
     * This will only be used when {@link discrete} is `true`.
     *
     * Note: The `position` will always be `"above"` for horizontal sliders and
     * `"left"` for vertical sliders.
     */
    tooltipProps?: Omit<Partial<TooltipProps>, "position">;
}
/**
 * @remarks
 * \@since 2.5.0
 * \@since 6.0.0 Only requires `value` and `setValue` props instead of all the
 * slider controls.
 * \@since 6.0.0 The `thumbLabel` and `thumbLabelledBy` props were removed. Use
 * the `aria-label` or `aria-labelledby` props instead.
 */
export interface SliderProps extends BaseSliderProps, SliderState {
    /**
     * Any additional props that should be provided to the thumb element. This can
     * be useful for applying additional styling.
     */
    thumbProps?: HTMLAttributes<HTMLSpanElement>;
    /**
     * This can be used to update the discrete slider's tooltip props.
     *
     * @example
     * Custom Styles
     * ```tsx
     * <Slider
     *   {...slider}
     *   discrete
     *   getTooltipProps={(value) => ({
     *     className: cssUtils({
     *       backgroundColor: value < 30 ? "warning" : undefined,
     *     }),
     *   })}
     * />
     * ```
     */
    getTooltipProps?(value: number): Partial<TooltipProps>;
    /**
     * This can be used to update the discrete slider's value tooltip.
     *
     * @example
     * More Value Information
     * ```tsx
     * <Slider
     *   {...slider}
     *   discrete
     *   getTooltipChildren={(value) => (
     *     <TextIconSpacing icon={<FavoriteIcon />}>
     *       {value}
     *     </TextIconSpacing>
     *   )}
     * />
     * ```
     *
     * This will only be used when {@link discrete} is `true`.
     *
     * @defaultValue `(value) => value`
     */
    getTooltipChildren?(value: number): ReactNode;
}
/**
 * @remarks
 * \@since 2.5.0
 * \@since 6.0.0 Only requires `rangeValue` and `setRangeValue` props instead of
 * all the slider controls.
 * \@since 6.0.0 The `thumb1Label`, `thumb1LabelledBy`, `thumb1Props`,
 * `thumb2Label`, `thumb2LabelledBy` and `thumb2Props` were renamed to
 * `minThumbLabel`, `minThumbLabelledBy`, `minThumbProps`, `maxThumbLabel`,
 * `maxThumbLabelledBy`, and `maxThumbProps` respectively.
 */
export interface RangeSliderProps extends BaseSliderProps, RangeSliderState {
    /**
     * Any additional props that should be provided to the min value thumb
     * element. This can be useful for applying additional styling.
     */
    minThumbProps?: HTMLAttributes<HTMLSpanElement>;
    /**
     * Any additional props that should be provided to the max value thumb
     * element. This can be useful for applying additional styling.
     */
    maxThumbProps?: HTMLAttributes<HTMLSpanElement>;
    /**
     * The `aria-label` to apply to the min value.
     *
     * Note: Either this prop or the {@link minThumbLabelledBy} are required for
     * accessibility.
     *
     * @defaultValue `"Min"`
     */
    minThumbLabel?: string;
    /**
     * Set this to an element's id that labels the min value.
     *
     * Note: Either this prop or the {@link minThumbLabel} are required for
     * accessibility.
     */
    minThumbLabelledBy?: string;
    /**
     * The `aria-label` to apply to the max value.
     *
     * Note: Either this prop or the {@link maxThumbLabelledBy} are required for
     * accessibility.
     *
     * @defaultValue `"Max"`
     */
    maxThumbLabel?: string;
    /**
     * Set this to an element's id that labels the max value.
     *
     * Note: Either this prop or the {@link maxThumbLabel} are required for
     * accessibility.
     */
    maxThumbLabelledBy?: string;
    /**
     * This can be used to update the discrete slider's tooltip props.
     *
     * @example
     * Custom Styles
     * ```tsx
     * <Slider
     *   {...slider}
     *   discrete
     *   getTooltipProps={(value, isFirstThumb) => ({
     *     className: cssUtils({
     *       backgroundColor: value < 30 && isFirstThumb ? "warning" : undefined,
     *     }),
     *   })}
     * />
     * ```
     */
    getTooltipProps?(value: number, isFirstThumb: boolean): Partial<TooltipProps>;
    /**
     * This can be used to update the discrete slider's value tooltip.
     *
     * @example
     * More Value Information
     * ```tsx
     * <Slider
     *   {...rangeSlider}
     *   discrete
     *   getTooltipChildren={(value, isFirstThumb) => (
     *     <TextIconSpacing
     *       icon={isFirstThumb ? <FavoriteIcon /> : <CloseIcon /}
     *       iconAfter={!isFirstValue}
     *     >
     *       {value}
     *     </TextIconSpacing>
     *   )}
     * />
     * ```
     *
     * This will only be used when {@link discrete} is `true`.
     *
     * @defaultValue `(value) => value`
     */
    getTooltipChildren?(value: number, isFirstThumb: boolean): ReactNode;
}
/**
 * **Client Component**
 *
 * @example
 * Simple Example
 * ```tsx
 * import { Form, Slider, useSlider } from "@react-md/core";
 * import type { ReactElement } from "react";
 *
 * function Example(): ReactElement {
 *   const slider = useSlider({
 *     // these are the defaults and can be changed
 *     min: 0,
 *     max: 100,
 *     step: 1,
 *     defaultValue: 50,
 *   });
 *
 *   // if you need access to the current value or manually change the value
 *   // yourself.
 *   const { value, setValue } = slider;
 *
 *   return (
 *     <Form>
 *       <Slider {...slider} aria-label="Volume" />
 *     </Form>
 *   );
 * }
 * ```
 *
 * @example
 * Range Slider Example
 * ```tsx
 * import { Fieldset, Form, Legend, Slider, useRangeSlider } from "@react-md/core";
 * import type { ReactElement } from "react";
 * import { useId } from "react";
 *
 * function Example(): ReactElement {
 *   const slider = useRangeSlider({
 *     // these are the defaults and can be changed
 *     min: 0,
 *     max: 100,
 *     step: 1,
 *     defaultValue: [0, 100],
 *   });
 *
 *   // if you need access to the current value or manually change the value
 *   // yourself.
 *   const { rangeValue, setRangeValue } = slider;
 *   const [minPrice, maxPrice] = rangeValue;
 *
 *   return (
 *     <Form>
 *       <Fieldset>
 *         <Legend>Price Range</Legend>
 *         <Slider {...slider} />
 *       </Fieldset>
 *     </Form>
 *   );
 * }
 * ```
 *
 * @remarks
 * \@since 2.5.0
 * \@since 6.0.0 The `Slider` and `RangeSlider` have been combined into the
 * single `Slider` component and removed the `label` support.
 * \@since 6.0.0 Each thumb includes an invisible `<input type="range">` instead
 * of an `<input type="hidden">`.
 */
export declare function Slider(props: LabelRequiredForA11y<SliderProps>): ReactElement;
export declare function Slider(props: RangeSliderProps): ReactElement;
