@kobalte/core
Version:
Unstyled components and primitives for building accessible web apps and design systems with SolidJS.
99 lines (93 loc) • 5.99 kB
TypeScript
import { F as FormControlDescription } from '../form-control-description-b958eb98.js';
export { a as ColorSliderDescriptionCommonProps, b as ColorSliderDescriptionOptions, c as ColorSliderDescriptionProps, d as ColorSliderDescriptionRenderProps } from '../form-control-description-b958eb98.js';
import { F as FormControlErrorMessage } from '../form-control-error-message-d659c9d2.js';
export { a as ColorSliderErrorMessageCommonProps, b as ColorSliderErrorMessageOptions, c as ColorSliderErrorMessageProps, d as ColorSliderErrorMessageRenderProps } from '../form-control-error-message-d659c9d2.js';
import { F as FormControlLabel } from '../form-control-label-88bbac32.js';
export { a as ColorSliderLabelCommonProps, b as ColorSliderLabelOptions, c as ColorSliderLabelProps, d as ColorSliderLabelRenderProps } from '../form-control-label-88bbac32.js';
import { j as SliderRootRenderProps, l as SliderThumbOptions, n as SliderThumbRenderProps, p as SliderTrackOptions, r as SliderTrackRenderProps, b as SliderInput, e as SliderValueLabel } from '../slider-value-label-687b6b02.js';
export { f as ColorSliderInputProps, s as ColorSliderValueLabelCommonProps, t as ColorSliderValueLabelOptions, u as ColorSliderValueLabelProps, v as ColorSliderValueLabelRenderProps } from '../slider-value-label-687b6b02.js';
import * as solid_js from 'solid-js';
import { ValidComponent, JSX } from 'solid-js';
import { ValidationState } from '@kobalte/utils';
import { C as Color, b as ColorChannel, a as ColorSpace, d as ColorIntlTranslations } from '../types-877adc4a.js';
import { ElementOf, PolymorphicProps } from '../polymorphic/index.js';
interface ColorSliderRootOptions {
/** The controlled values of the slider. */
value?: Color;
/** The value of the slider when initially rendered. */
defaultValue?: Color;
/** Called when the value changes. */
onChange?: (value: Color) => void;
/** Called when the value changes at the end of an interaction. */
onChangeEnd?: (value: Color) => void;
/** The color channel that the slider manipulates. */
channel: ColorChannel;
/** The color space that the slider operates in. The `channel` must be in this color space.
*/
colorSpace?: ColorSpace;
/**
* The orientation of the slider.
* @default horizontal
*/
orientation?: "horizontal" | "vertical";
/**
* A function to get the accessible label text representing the current value in a human-readable format.
*/
getValueLabel?: (value: Color) => string;
/**
* A unique identifier for the component.
* The id is used to generate id attributes for nested components.
* If no id prop is provided, a generated id will be used.
*/
id?: string;
/**
* The name of the slider, used when submitting an HTML form.
* See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
*/
name?: string;
/** Whether the slider should display its "valid" or "invalid" visual styling. */
validationState?: ValidationState;
/** Whether the user must fill the slider before the owning form can be submitted. */
required?: boolean;
/** Whether the slider is disabled. */
disabled?: boolean;
/** Whether the slider is read only. */
readOnly?: boolean;
/** The localized strings of the component. */
translations?: ColorIntlTranslations;
}
interface ColorSliderRootCommonProps<T extends HTMLElement = HTMLElement> {
id: string;
}
interface ColorSliderRootRenderProps extends ColorSliderRootCommonProps, SliderRootRenderProps {
}
type ColorSliderRootProps<T extends ValidComponent | HTMLElement = HTMLElement> = ColorSliderRootOptions & Partial<ColorSliderRootCommonProps<ElementOf<T>>>;
declare function ColorSliderRoot<T extends ValidComponent = "div">(props: PolymorphicProps<T, ColorSliderRootProps<T>>): solid_js.JSX.Element;
interface ColorSliderThumbOptions extends SliderThumbOptions {
}
interface ColorSliderThumbCommonProps<T extends HTMLElement = HTMLElement> {
style?: JSX.CSSProperties | string;
}
interface ColorSliderThumbRenderProps extends ColorSliderThumbCommonProps, SliderThumbRenderProps {
}
type ColorSliderThumbProps<T extends ValidComponent | HTMLElement = HTMLElement> = ColorSliderThumbOptions & Partial<ColorSliderThumbCommonProps<ElementOf<T>>>;
declare function ColorSliderThumb<T extends ValidComponent = "span">(props: PolymorphicProps<T, ColorSliderThumbProps<T>>): JSX.Element;
interface ColorSliderTrackOptions extends SliderTrackOptions {
}
interface ColorSliderTrackCommonProps<T extends HTMLElement = HTMLElement> {
style?: JSX.CSSProperties | string;
}
interface ColorSliderTrackRenderProps extends ColorSliderTrackCommonProps, SliderTrackRenderProps {
}
type ColorSliderTrackProps<T extends ValidComponent | HTMLElement = HTMLElement> = ColorSliderTrackOptions & Partial<ColorSliderTrackCommonProps<ElementOf<T>>>;
declare function ColorSliderTrack<T extends ValidComponent = "div">(props: PolymorphicProps<T, ColorSliderTrackProps<T>>): JSX.Element;
declare const ColorSlider: typeof ColorSliderRoot & {
Description: typeof FormControlDescription;
ErrorMessage: typeof FormControlErrorMessage;
Input: typeof SliderInput;
Label: typeof FormControlLabel;
Thumb: typeof ColorSliderThumb;
Track: typeof ColorSliderTrack;
ValueLabel: typeof SliderValueLabel;
};
export { ColorSlider, ColorSliderRootCommonProps, ColorSliderRootOptions, ColorSliderRootProps, ColorSliderRootRenderProps, ColorSliderThumbCommonProps, ColorSliderThumbOptions, ColorSliderThumbProps, ColorSliderThumbRenderProps, ColorSliderTrackCommonProps, ColorSliderTrackOptions, ColorSliderTrackProps, ColorSliderTrackRenderProps, FormControlDescription as Description, FormControlErrorMessage as ErrorMessage, SliderInput as Input, FormControlLabel as Label, ColorSliderRoot as Root, ColorSliderThumb as Thumb, ColorSliderTrack as Track, SliderValueLabel as ValueLabel };