etudes 12.0.0 → 13.0.0

package/build/components/Accordion.d.ts

@@ -200,18 +200,31 @@ export type AccordionProps<I, S extends AccordionSection<I> = AccordionSection<I
  * A collection of selectable items laid out in sections in an accordion. Items
  * are generated based on the provided `ItemComponent` while each section header
  * is optionally provided by `HeaderComponent` or generated automatically.
+ *
+ * @exports AccordionHeader Component for each section header.
+ * @exports AccordionExpandIcon Component for the expand icon of each section.
+ * @exports AccordionCollapseIcon Component for the collapse icon of each
  */
 export declare const Accordion: <I, S extends AccordionSection<I> = AccordionSection<I>>(props: Readonly<AccordionProps<I, S> & {
     ref?: Ref<HTMLDivElement>;
 }>) => ReactElement;
+/**
+ * Component for each section header of an {@link Accordion}.
+ */
 export declare const AccordionHeader: {
     ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & DropdownToggleProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+/**
+ * Component for the expand icon of each section of an {@link Accordion}.
+ */
 export declare const AccordionExpandIcon: {
     ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+/**
+ * Component for the collapse icon of each section of an {@link Accordion}.
+ */
 export declare const AccordionCollapseIcon: {
     ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/build/components/Burger.d.ts

@@ -1,8 +1,24 @@
 import { HTMLAttributes } from 'react';
+/**
+ * Type describing the props of {@link Burger}.
+ */
 export type BurgerProps = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Specifies if the burger is in its activated state.
+     */
     isActive?: boolean;
+    /**
+     * Specifies if the bars are horizontally split to allow for an alternate
+     * transition.
+     */
     isSplit?: boolean;
+    /**
+     * Specifies if the tail of the bottom bar is hidden.
+     */
     isTailHidden?: boolean;
+    /**
+     * Specifies the number of bars to display.
+     */
     numberOfBars?: 2 | 3;
 };
 /**
@@ -11,6 +27,9 @@ export type BurgerProps = HTMLAttributes<HTMLDivElement> & {
  * @exports BurgerBar Component for each bar in the burger.
  */
 export declare const Burger: import('react').ForwardRefExoticComponent<Readonly<BurgerProps> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Component for each bar in a {@link Burger}.
+ */
 export declare const BurgerBar: {
     ({ ...props }: HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/build/components/BurgerButton.d.ts

@@ -1,8 +1,22 @@
 import { ButtonHTMLAttributes } from 'react';
 import { BurgerProps } from './Burger.js';
+/**
+ * Type describing the props of {@link BurgerButton}.
+ */
 export type BurgerButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement> & BurgerProps, 'onToggle'> & {
+    /**
+     * Handler invoked when the button is activated.
+     */
     onActivate?: () => void;
+    /**
+     * Handler invoked when the button is deactivated.
+     */
     onDeactivate?: () => void;
+    /**
+     * Handler invoked when the button's active state is toggled.
+     *
+     * @param isActive The new active state of the button.
+     */
     onToggle?: (isActive: boolean) => void;
 };
 /**
@@ -12,6 +26,9 @@ export type BurgerButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement> & B
  * @exports BurgerButtonBar Component for each bar in the burger button.
  */
 export declare const BurgerButton: import('react').ForwardRefExoticComponent<Readonly<BurgerButtonProps> & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * Component for each bar in a {@link BurgerButton}.
+ */
 export declare const BurgerButtonBar: {
     ({ ...props }: import('react').HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/build/components/Button.d.ts

@@ -23,7 +23,15 @@ type AnchorVariantProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'aria-di
     label?: string;
     opensInNewTab?: boolean;
 };
+/**
+ * Type describing the props of {@link Button}.
+ */
 export type ButtonProps = AnchorVariantProps | LinkVariantProps | NavLinkVariantProps | ButtonVariantProps;
+/**
+ * A button component that can be used as a {@link Link}, {@link NavLink},
+ * {@link HTMLAnchorElement}, or {@link HTMLButtonElement} depending on the
+ * structure of its props.
+ */
 export declare function Button(props: Readonly<ButtonProps>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Button {
     var displayName: string;

package/build/components/Carousel.d.ts

@@ -1,5 +1,11 @@
 import { ComponentType, ForwardedRef, HTMLAttributes, ReactElement } from 'react';
+/**
+ * Type describing the orientation of {@link Carousel}.
+ */
 export type CarouselOrientation = 'horizontal' | 'vertical';
+/**
+ * Type describing the props of {@link Carousel}.
+ */
 export type CarouselProps<I> = Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'onClick' | 'onPointerCancel' | 'onPointerDown' | 'onPointerLeave' | 'onPointerUp'> & {
     /**
      * Current item index.
@@ -48,6 +54,16 @@ export type CarouselProps<I> = Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'on
      */
     ItemComponent: ComponentType<I>;
 };
+/**
+ * A carousel component that displays a list of items in a scrollable view.
+ *
+ * Notable features:
+ *   - Supports horizontal and vertical orientations.
+ *   - Supports auto-advancing to the next item after a specified interval.
+ *   - Supports auto-snapping to each item when scrolling.
+ *   - Supports tracking item exposure (0-1) to determine how much of the
+ *     current item is visible in the viewport.
+ */
 export declare const Carousel: <I extends HTMLAttributes<HTMLElement>>(props: Readonly<CarouselProps<I> & {
     ref?: ForwardedRef<HTMLDivElement>;
 }>) => ReactElement;

package/build/components/Counter.d.ts

@@ -1,5 +1,8 @@
 import { HTMLAttributes } from 'react';
 import { TextFieldProps } from './TextField.js';
+/**
+ * Type describing the props of {@link Counter}.
+ */
 export type CounterProps = Omit<HTMLAttributes<HTMLElement>, 'onChange'> & {
     min?: number;
     max?: number;
@@ -7,15 +10,32 @@ export type CounterProps = Omit<HTMLAttributes<HTMLElement>, 'onChange'> & {
     allowsInput?: boolean;
     onChange?: (quantity: number) => void;
 };
+/**
+ * A component that allows the user to increment or decrement a quantity
+ * using buttons or by typing in a text field.
+ *
+ * @exports CounterTextField Component for the text field.
+ * @exports CounterAddButton Component for the add button.
+ * @exports CounterSubtractButton Component for the subtract button.
+ */
 export declare const Counter: import('react').ForwardRefExoticComponent<Readonly<CounterProps> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Component for the text field in a {@link Counter}.
+ */
 export declare const CounterTextField: {
     ({ ...props }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+/**
+ * Component for the add button in a {@link Counter}.
+ */
 export declare const CounterAddButton: {
     ({ children, ...props }: HTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+/**
+ * Component for the subtract button in a {@link Counter}.
+ */
 export declare const CounterSubtractButton: {
     ({ children, ...props }: HTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/build/components/CoverImage.d.ts

@@ -1,5 +1,8 @@
 import { HTMLAttributes } from 'react';
 import { ImageProps } from './Image.js';
+/**
+ * Type describing the props of {@link CoverImage}.
+ */
 export type CoverImageProps = Omit<HTMLAttributes<HTMLDivElement>, 'onLoadStart'> & Pick<ImageProps, 'alt' | 'loadingMode' | 'sizes' | 'src' | 'srcSet' | 'onLoadStart' | 'onLoadComplete' | 'onLoadError'> & {
     /**
      * The known aspect ratio of the image, expressed by width / height. If
@@ -7,12 +10,25 @@ export type CoverImageProps = Omit<HTMLAttributes<HTMLDivElement>, 'onLoadStart'
      */
     aspectRatio?: number;
 };
+/**
+ * A component that displays an image with a fixed aspect ratio. The image is
+ * centered and cropped to fit the container (a.k.a. viewport).
+ *
+ * @exports CoverImageContent Component for optional content inside the image.
+ * @exports CoverImageViewport Component for the viewport.
+ */
 export declare const CoverImage: import('react').ForwardRefExoticComponent<Readonly<CoverImageProps> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const CoverImageViewport: {
+/**
+ * Component for optional content inside a {@link CoverImage}.
+ */
+export declare const CoverImageContent: {
     ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export declare const CoverImageContent: {
+/**
+ * Component for the viewport of a {@link CoverImage}.
+ */
+export declare const CoverImageViewport: {
     ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/build/components/CoverVideo.d.ts

@@ -1,5 +1,8 @@
 import { HTMLAttributes } from 'react';
 import { VideoProps } from './Video.js';
+/**
+ * Type describing the props of {@link CoverVideo}.
+ */
 export type CoverVideoProps = Omit<HTMLAttributes<HTMLDivElement>, 'onCanPlay' | 'onPause' | 'onPlay'> & Pick<VideoProps, 'autoLoop' | 'autoPlay' | 'hasControls' | 'isMuted' | 'playsInline' | 'posterSrc' | 'src' | 'onPause' | 'onPlay' | 'onCanPlay' | 'onEnd' | 'onFullscreenChange' | 'onLoadMetadata' | 'onLoadMetadataComplete' | 'onLoadMetadataError' | 'onSizeChange'> & {
     /**
      * The known aspect ratio of the video, expressed by width / height. If
@@ -7,12 +10,25 @@ export type CoverVideoProps = Omit<HTMLAttributes<HTMLDivElement>, 'onCanPlay' |
      */
     aspectRatio?: number;
 };
+/**
+ * A component that displays a video with a fixed aspect ratio. The video is
+ * centered and cropped to fit the container (a.k.a. viewport).
+ *
+ * @exports CoverVideoContent Component for optional content inside the video.
+ * @exports CoverVideoViewport Component for the viewport.
+ */
 export declare const CoverVideo: import('react').ForwardRefExoticComponent<Readonly<CoverVideoProps> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const CoverVideoViewport: {
+/**
+ * Component for optional content inside a {@link CoverVideo}.
+ */
+export declare const CoverVideoContent: {
     ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export declare const CoverVideoContent: {
+/**
+ * Component for the viewport of a {@link CoverVideo}.
+ */
+export declare const CoverVideoViewport: {
     ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/build/components/Dial.d.ts

@@ -1,4 +1,7 @@
 import { HTMLAttributes, SVGAttributes } from 'react';
+/**
+ * Type describing the props of {@link Dial}.
+ */
 export type DialProps = HTMLAttributes<HTMLDivElement> & {
     /**
      * Current angle reading of the compass, between 0.0 - 360.0 degrees,
@@ -36,14 +39,20 @@ export type DialProps = HTMLAttributes<HTMLDivElement> & {
 /**
  * A circular dial with a knob and a track.
  *
- * @exports DialKnob
- * @exports DialTrack
+ * @exports DialKnob Component for the knob.
+ * @exports DialTrack Component for the track.
  */
 export declare const Dial: import('react').ForwardRefExoticComponent<Readonly<DialProps> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Component for the track of a {@link Dial}.
+ */
 export declare const DialTrack: {
     ({ ...props }: SVGAttributes<SVGCircleElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+/**
+ * Component for the knob of a {@link Dial}.
+ */
 export declare const DialKnob: {
     ({ ...props }: SVGAttributes<SVGPathElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/build/components/Dropdown.d.ts

@@ -93,19 +93,32 @@ export type DropdownProps<T extends DropdownItemData = DropdownItemData> = HTMLA
  * A dropdown component that is invertible (i.e. can "dropup" instead) and
  * supports both horizontal and vertical orientations. Provide `items` and
  * `ItemComponent` props to populate.
+ *
+ * @exports DropdownToggle Component for the toggle button.
+ * @exports DropdownExpandIcon Component for the expand icon.
+ * @exports DropdownCollapseIcon Component for the collapse icon.
  */
 export declare const Dropdown: <T extends DropdownItemData = DropdownItemData>(props: Readonly<DropdownProps<T> & {
     ref?: Ref<HTMLDivElement>;
 }>) => ReactElement;
+/**
+ * Component for the toggle button of a {@link Dropdown}.
+ */
 export declare const DropdownToggle: {
     ({ children, ...props }: HTMLAttributes<HTMLButtonElement> & DropdownToggleProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+/**
+ * Component for the expand icon of a {@link Dropdown}.
+ */
 export declare const DropdownExpandIcon: {
-    ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+/**
+ * Component for the collapse icon of a {@link Dropdown}.
+ */
 export declare const DropdownCollapseIcon: {
-    ({ children, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    ({ children, style, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/build/components/FlatSVG.d.ts

@@ -1,4 +1,7 @@
 import { HTMLAttributes } from 'react';
+/**
+ * Type describing the props of {@link FlatSVG}.
+ */
 export type FlatSVGProps = Omit<HTMLAttributes<HTMLElement>, 'role'> & {
     /**
      * Specifies how the SVG should be resized:

package/build/components/Image.d.ts

@@ -1,5 +1,8 @@
 import { HTMLAttributes } from 'react';
 import { Size } from 'spase';
+/**
+ * Type describing the props of {@link Image}.
+ */
 export type ImageProps = Omit<HTMLAttributes<HTMLImageElement>, 'alt' | 'loading' | 'sizes' | 'src' | 'srcSet' | 'onLoadStart'> & {
     /**
      * Optional alt text.
@@ -71,4 +74,8 @@ export type ImageProps = Omit<HTMLAttributes<HTMLImageElement>, 'alt' | 'loading
      */
     onSizeChange?: (size?: Size) => void;
 };
+/**
+ * A component that renders an image with support for lazy loading, `srcset`,
+ * and `sizes` attributes.
+ */
 export declare const Image: import('react').ForwardRefExoticComponent<Readonly<ImageProps> & import('react').RefAttributes<HTMLImageElement>>;

package/build/components/MasonryGrid.d.ts

@@ -1,5 +1,11 @@
 import { HTMLAttributes } from 'react';
+/**
+ * Type describing the orientation of {@link MasonryGrid}.
+ */
 export type MasonryGridOrientation = 'horizontal' | 'vertical';
+/**
+ * Type describing the props of {@link MasonryGrid}.
+ */
 export type MasonryGridProps = Omit<HTMLAttributes<HTMLDivElement>, 'role'> & {
     alignSections?: boolean;
     horizontalSpacing?: number;
@@ -9,20 +15,19 @@ export type MasonryGridProps = Omit<HTMLAttributes<HTMLDivElement>, 'role'> & {
     verticalSpacing?: number;
 };
 /**
- * This is a React component that arranges all of its immediate children in a
- * masonry grid. Refrain from assigning CSS styles to it via `className` or
- * `style` property, though they are still handled if absolutely necessary.
- * Customize the grid via its supported properties. The grid can be in either
- * vertical or horizontal orientation. The length of every child element
- * *parallel to the direction of the orientation* is automatically set according
- * to the number of sections specified for the grid. This means that in an
- * horizontally oriented grid, the *width* of each child element is
- * automatically set, whereas in a vertically oriented grid the *height* of each
- * child element is automatically set. Additionally, the *number of sections*
- * corresponds to the maximum the number of child elements present in the
- * direction that is parallel to the orientation of the grid. Hence, in a
- * vertically oriented grid, *number of sections* refers to the *number of
- * rows*, whereas in a horizontally oriented grid, *number of sections* refers
- * to the *number of columns*.
+ * A component that arranges all of its immediate children in a masonry grid.
+ * Refrain from assigning CSS styles to it via `className` or `style` property,
+ * though they are still handled if absolutely necessary. Customize the grid via
+ * its supported properties. The grid can be in either vertical or horizontal
+ * orientation. The length of every child element *parallel to the direction of
+ * the orientation* is automatically set according to the number of sections
+ * specified for the grid. This means that in an horizontally oriented grid, the
+ * *width* of each child element is automatically set, whereas in a vertically
+ * oriented grid the *height* of each child element is automatically set.
+ * Additionally, the *number of sections* corresponds to the maximum the number
+ * of child elements present in the direction that is parallel to the
+ * orientation of the grid. Hence, in a vertically oriented grid, *number of
+ * sections* refers to the *number of rows*, whereas in a horizontally oriented
+ * grid, *number of sections* refers to the *number of columns*.
  */
 export declare const MasonryGrid: import('react').ForwardRefExoticComponent<Readonly<MasonryGridProps> & import('react').RefAttributes<HTMLDivElement>>;

package/build/components/OptionButton.d.ts

@@ -1,11 +1,32 @@
 import { ButtonHTMLAttributes } from 'react';
-export type CycleButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-disabled' | 'aria-label' | 'disabled' | 'onChange'> & {
+/**
+ * Type describing the props of {@link OptionButton}.
+ */
+export type OptionButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'aria-disabled' | 'aria-label' | 'disabled' | 'onChange'> & {
+    /**
+     * The current index of the option.
+     */
     index?: number;
+    /**
+     * Specifies if the button is disabled.
+     */
     isDisabled?: boolean;
+    /**
+     * The list of options to cycle through.
+     */
     options: string[] | {
         label: string;
         value: string;
     }[];
+    /**
+     * Handler invoked when the button is clicked.
+     *
+     * @param value The value of the next option.
+     * @param index The index of the next option.
+     */
     onChange?: (value: string, index: number) => void;
 };
-export declare const OptionButton: import('react').ForwardRefExoticComponent<Readonly<CycleButtonProps> & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * A button component that cycles through a list of options when clicked.
+ */
+export declare const OptionButton: import('react').ForwardRefExoticComponent<Readonly<OptionButtonProps> & import('react').RefAttributes<HTMLButtonElement>>;

package/build/components/Panorama.d.ts

@@ -1,5 +1,8 @@
 import { HTMLAttributes } from 'react';
 import { Size } from 'spase';
+/**
+ * Type describing the props of {@link Panorama}.
+ */
 export type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'aria-valuenow' | 'role'> & {
     /**
      * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or
@@ -71,6 +74,7 @@ export type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'aria-valuenow'
     onImageSizeChange?: (size?: Size) => void;
 };
 /**
- * A component containing a pannable 360° panorama image. The angle supports two-way binding.
+ * A component containing a pannable 360° panorama image. The angle supports
+ * two-way binding.
  */
 export declare const Panorama: import('react').ForwardRefExoticComponent<Readonly<PanoramaProps> & import('react').RefAttributes<HTMLDivElement>>;

package/build/components/PanoramaSlider.d.ts

@@ -1,6 +1,9 @@
 import { HTMLAttributes } from 'react';
 import { Size } from 'spase';
 import { PanoramaProps } from './Panorama.js';
+/**
+ * Type describing the props of {@link PanoramaSlider}.
+ */
 export type PanoramaSliderProps = PanoramaProps & {
     /**
      * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of
@@ -25,15 +28,33 @@ export type PanoramaSliderProps = PanoramaProps & {
     viewportSize?: Size;
 };
 /**
- * A slider for a {@link Panorama} component.
+ * A slider for a {@link Panorama}.
  *
- * @exports PanoramaSliderIndicator The indicator that appears when the slider
- *                                  is being dragged.
- * @exports PanoramaSliderReticle The reticle that indicates the FOV of the
- *                                backing {@link Panorama}.
- * @exports PanoramaSliderTrack The slide track.
+ * @exports PanoramaSliderIndicator Component for the active indicator that
+ *                                  appears when the slider is dragged.
+ * @exports PanoramaSliderReticle Component for the reticle that indicates the
+ *                                FOV of the backing {@link Panorama}.
+ * @exports PanoramaSliderTrack Component for the slide track.
  */
 export declare const PanoramaSlider: import('react').ForwardRefExoticComponent<Readonly<PanoramaSliderProps> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const PanoramaSliderTrack: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const PanoramaSliderReticle: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const PanoramaSliderIndicator: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Component for the active indicator of a {@link PanoramaSlider}.
+ */
+export declare const PanoramaSliderIndicator: {
+    ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Component for the active reticle of a {@link PanoramaSlider}.
+ */
+export declare const PanoramaSliderReticle: {
+    ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Component for the slide track of a {@link PanoramaSlider}.
+ */
+export declare const PanoramaSliderTrack: {
+    ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/build/components/RangeSlider.d.ts

@@ -1,22 +1,103 @@
 import { HTMLAttributes } from 'react';
-type Orientation = 'horizontal' | 'vertical';
-type Range = [number, number];
-export type RangeSliderProps = Omit<HTMLAttributes<HTMLDivElement>, 'aria-valuemax' | 'aria-valuemin' | 'role'> & {
+/**
+ * Type describing the orientation of {@link RangeSlider}.
+ */
+export type RangeSliderOrientation = 'horizontal' | 'vertical';
+/**
+ * Type describing the range of values of {@link RangeSlider}.
+ */
+export type RangeSliderRange = [number, number];
+/**
+ * Type describing the props of {@link RangeSlider}.
+ */
+export type RangeSliderProps = Omit<HTMLAttributes<HTMLDivElement>, 'aria-valuemax' | 'aria-valuemin' | 'role' | 'onChange'> & {
+    /**
+     * Number of decimal places to display.
+     */
     decimalPlaces?: number;
+    /**
+     * Specifies if the knobs are clipped to the track.
+     */
     isClipped?: boolean;
+    /**
+     * Height of the knobs in pixels.
+     */
     knobHeight?: number;
+    /**
+     * Invisible padding around the knobs in pixels, helps expand their hit boxes.
+     */
     knobPadding?: number;
+    /**
+     * Width of the knobs in pixels.
+     */
     knobWidth?: number;
+    /**
+     * Maximum value to clamp to.
+     */
     max: number;
+    /**
+     * Minimum value to clamp to.
+     */
     min: number;
-    orientation?: Orientation;
-    range?: Range;
+    /**
+     * Orientation of the slider.
+     */
+    orientation?: RangeSliderOrientation;
+    /**
+     * Range of values.
+     */
+    range?: RangeSliderRange;
+    /**
+     * Number of intervals between the minimum and maximum values to snap to when
+     * either knob releases. If set to `-1`, the knobs will not snap to any value.
+     */
     steps?: number;
-    onRangeChange?: (range: Range) => void;
+    /**
+     * Handler invoked when the range of values changes.
+     *
+     * @param range The current range of values.
+     */
+    onChange?: (range: RangeSliderRange) => void;
 };
+/**
+ * A slider component that allows the user to select a range of values.
+ *
+ * @exports RangeSliderGutter Component for the gutter.
+ * @exports RangeSliderHighlight Component for the highlight.
+ * @exports RangeSliderKnob Component for the knob.
+ * @exports RangeSliderKnobContainer Component for the container of the knob.
+ * @exports RangeSliderLabel Component for the label.
+ */
 export declare const RangeSlider: import('react').ForwardRefExoticComponent<Readonly<RangeSliderProps> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const RangeSliderGutter: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const RangeSliderLabel: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const RangeSliderHighlight: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const RangeSliderKnob: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
-export {};
+/**
+ * Component for the gutter of a {@link RangeSlider}.
+ */
+export declare const RangeSliderGutter: {
+    ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Component for the label of a {@link RangeSlider}.
+ */
+export declare const RangeSliderLabel: {
+    ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Component for the highlight of a {@link RangeSlider}.
+ */
+export declare const RangeSliderHighlight: {
+    ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Component for the knob of a {@link RangeSlider}.
+ */
+export declare const RangeSliderKnob: {
+    ({ ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Component for the container of the knob of a {@link RangeSlider}.
+ */
+export declare const RangeSliderKnobContainer: ({ ...props }: HTMLAttributes<HTMLButtonElement>) => import("react/jsx-runtime").JSX.Element;