@spark-ui/components
Version:
Spark (Leboncoin design system) components.
98 lines (91 loc) • 3.45 kB
TypeScript
import * as react_jsx_runtime from 'react/jsx-runtime';
import { Slider as Slider$2 } from 'radix-ui';
import { PropsWithChildren, Ref } from 'react';
import * as class_variance_authority_types from 'class-variance-authority/types';
import { VariantProps } from 'class-variance-authority';
declare const rangeVariants: (props?: ({
intent?: "main" | "alert" | "support" | "accent" | "basic" | "info" | "neutral" | "success" | "error" | null | undefined;
shape?: "rounded" | "square" | null | undefined;
} & class_variance_authority_types.ClassProp) | undefined) => string;
type SliderRangeVariantsProps = VariantProps<typeof rangeVariants>;
interface SliderProps extends Omit<Slider$2.SliderProps, 'dir' | 'orientation' | 'inverted' | 'minStepsBetweenThumbs'>, PropsWithChildren<SliderRangeVariantsProps> {
/**
* Change the default rendered element for the one passed as a child, merging their props and behavior.
* @default false
*/
asChild?: boolean;
/**
* The value of the slider when initially rendered. Use when you do not need to control the state of the slider.
*/
defaultValue?: number[];
/**
* The controlled value of the slider. Must be used in conjunction with `onValueChange`.
*/
value?: number[];
/**
* Event handler called when the value changes.
*/
onValueChange?: (value: number[]) => void;
/**
* Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.
*/
onValueCommit?: (value: number[]) => void;
/**
* The name of the slider. Submitted with its owning form as part of a name/value pair.
*/
name?: string;
/**
* When `true`, prevents the user from interacting with the slider.
* @default false
*/
disabled?: boolean;
/**
* The minimum value for the range.
* @default 0
*/
min?: number;
/**
* The maximum value for the range.
* @default 100
*/
max?: number;
/**
* The stepping interval.
* @default 1
*/
step?: number;
ref?: Ref<HTMLDivElement>;
}
declare const Slider$1: {
({ asChild, intent, shape, children, className, ref, ...rest }: SliderProps): react_jsx_runtime.JSX.Element;
displayName: string;
};
interface SliderThumbProps extends Slider$2.SliderThumbProps {
/**
* Change the default rendered element for the one passed as a child, merging their props and behavior.
* @default false
*/
asChild?: boolean;
ref?: Ref<HTMLSpanElement>;
}
declare const SliderThumb: {
({ asChild, className, onPointerDown, onKeyDown, onBlur, ref: forwardedRef, ...rest }: SliderThumbProps): react_jsx_runtime.JSX.Element;
displayName: string;
};
interface SliderTrackProps extends Slider$2.SliderTrackProps, Slider$2.SliderRangeProps {
/**
* Change the default rendered element for the one passed as a child, merging their props and behavior.
* @default false
*/
asChild?: boolean;
ref?: Ref<HTMLDivElement>;
}
declare const SliderTrack: {
({ asChild, className, ref, ...rest }: SliderTrackProps): react_jsx_runtime.JSX.Element;
displayName: string;
};
declare const Slider: typeof Slider$1 & {
Thumb: typeof SliderThumb;
Track: typeof SliderTrack;
};
export { Slider, type SliderProps, type SliderThumbProps, type SliderTrackProps };