@yamada-ui/react/dist/types/components/saturation-slider/use-saturation-slider.d.ts

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

import { HTMLProps, HTMLRefAttributes, PropGetter } from "../../core/components/index.types.js";
import "../../core/index.js";
import { FieldProps } from "../field/field.js";
import * as react2686 from "react";

//#region src/components/saturation-slider/use-saturation-slider.d.ts
interface UseSaturationSliderProps extends Omit<HTMLProps, "defaultValue" | "onChange" | "ref">, HTMLRefAttributes<"input">, FieldProps {
  /**
   * The base `id` to use for the slider.
   */
  id?: string;
  /**
   * The name attribute of the hidden `input` field.
   * This is particularly useful in forms.
   */
  name?: string;
  /**
   * The initial value of the saturation slider.
   *
   * @default [0, 0, 1]
   */
  defaultValue?: [number, number, number];
  /**
   * This is used to format the value so that screen readers
   * can speak out a more human-friendly value.
   *
   * It is used to set the `aria-valuetext` property of the input.
   */
  getAriaValueText?: (value: [number, number, number]) => string | undefined;
  /**
   * The step in which increments or decrements have to be made.
   *
   * @default 0.01
   */
  step?: number;
  /**
   * The value of the saturation slider.
   */
  value?: [number, number, number];
  /**
   * Function called whenever the saturation slider value changes.
   */
  onChange?: (value: [number, number, number]) => void;
  /**
   * Function called when the user is done selecting a new value.
   */
  onChangeEnd?: (value: [number, number, number]) => void;
  /**
   * Function called when the user starts selecting a new value.
   */
  onChangeStart?: (value: [number, number, number]) => void;
}
declare const useSaturationSlider: (props?: UseSaturationSliderProps) => {
  setValue: react2686.Dispatch<react2686.SetStateAction<[number, number, number]>>;
  value: [number, number, number];
  getInputProps: PropGetter<"input", undefined, undefined>;
  getRootProps: PropGetter<"div", undefined, undefined>;
  getThumbProps: PropGetter<"div", undefined, undefined>;
  getTrackProps: PropGetter<"div", undefined, undefined>;
  onChange: ([h, s, v]: [number, number, number]) => void;
};
type UseSaturationSliderReturn = ReturnType<typeof useSaturationSlider>;
//#endregion
export { UseSaturationSliderProps, UseSaturationSliderReturn, useSaturationSlider };
//# sourceMappingURL=use-saturation-slider.d.ts.map