@lumx/react 4.17.1-alpha.2 → 4.17.1-alpha.3

package/_internal/components/skeleton/SkeletonTypography.js

@@ -0,0 +1,31 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { CLASSNAME, COMPONENT_NAME, SkeletonTypography as SkeletonTypography$1 } from "../../packages/lumx-core/src/js/components/Skeleton/SkeletonTypography.js";
+import { src_exports } from "../../../index.js";
+//#region src/components/skeleton/SkeletonTypography.tsx
+var DEFAULT_PROPS = {};
+/**
+* SkeletonTypography component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var SkeletonTypography = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { className, theme = defaultTheme, typography, width, color, ...forwardedProps } = props;
+	return SkeletonTypography$1({
+		ref,
+		className,
+		theme,
+		typography,
+		width,
+		color,
+		...forwardedProps
+	});
+});
+SkeletonTypography.displayName = COMPONENT_NAME;
+SkeletonTypography.defaultProps = DEFAULT_PROPS;
+SkeletonTypography.className = CLASSNAME;
+//#endregion
+export { SkeletonTypography };

package/_internal/components/skeleton/index.d.ts

@@ -0,0 +1,4 @@
+import { SkeletonRectangleVariant } from "../../packages/lumx-core/src/js/components/Skeleton/SkeletonRectangle.js";
+import { SkeletonCircle, SkeletonCircleProps } from "./SkeletonCircle.js";
+import { SkeletonRectangle, SkeletonRectangleProps } from "./SkeletonRectangle.js";
+import { SkeletonTypography, SkeletonTypographyProps } from "./SkeletonTypography.js";

package/_internal/components/slider/Slider.d.ts

@@ -0,0 +1,44 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { SyntheticEvent } from "react";
+
+//#region src/components/slider/Slider.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SliderProps extends index_d_exports.GenericProps, index_d_exports.HasTheme {
+  /** Helper text. */
+  helper?: string;
+  /** Whether the min and max labels should be hidden or not. */
+  hideMinMaxLabel?: boolean;
+  /** Whether the component is disabled or not. */
+  isDisabled?: boolean;
+  /** Label text. */
+  label?: string;
+  /** Maximum value on the range. */
+  max: number;
+  /** Minimum value of the range. */
+  min: number;
+  /** Native input name property. */
+  name?: string;
+  /** Number of digits in the fractional part of the selected value. */
+  precision?: number;
+  /** Range step value. */
+  steps?: number;
+  /** Selected ranged value. */
+  value: number;
+  /** On change callback. */
+  onChange(value: number, name?: string, event?: SyntheticEvent): void;
+  /** On click callback. */
+  onMouseDown?(event: React.SyntheticEvent): void;
+}
+/**
+ * Slider component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Slider: Comp<SliderProps, HTMLDivElement>;
+//#endregion
+export { Slider, SliderProps };

package/_internal/components/slider/Slider.js

@@ -0,0 +1,232 @@
+import { useId } from "../../hooks/useId.js";
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { useDisableStateProps } from "../../utils/disabled/useDisableStateProps.js";
+import { useEventCallback } from "../../hooks/useEventCallback.js";
+import { InputHelper } from "../input-helper/InputHelper.js";
+import { InputLabel } from "../input-label/InputLabel.js";
+import { clamp } from "../../utils/number/clamp.js";
+import { src_exports } from "../../../index.js";
+import { useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+//#region src/components/slider/Slider.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Slider";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-slider";
+var { block, element } = classNames.bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	precision: 0,
+	steps: 0
+};
+/**
+* Convert a percent value to a value in range min - max.
+*
+* @param percent   Value to convert.
+* @param min       Minimum value.
+* @param max       Maximum value.
+* @param precision Precision.
+* @return Value in range min - max
+*/
+var computeValueFromPercent = (percent, min, max, precision = 0) => Number((min + percent * (max - min)).toFixed(precision));
+/**
+* Convert a value in range min - max to a percent value.
+*
+* @param value Value to convert.
+* @param min   Minimum value.
+* @param max   Maximum value.
+* @return Value in percent
+*/
+var computePercentFromValue = (value, min, max) => Number((value - min) / (max - min));
+/**
+* Slider component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Slider = forwardRef((props, ref) => {
+	const { isAnyDisabled, disabledStateProps, otherProps } = useDisableStateProps(props);
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { className, helper, hideMinMaxLabel, id, label, max, min, name, onChange, onMouseDown, precision = DEFAULT_PROPS.precision, steps = DEFAULT_PROPS.steps, theme = defaultTheme, value, ...forwardedProps } = otherProps;
+	const generatedId = useId();
+	const sliderId = id || generatedId;
+	const sliderLabelId = useMemo(() => `label-${sliderId}`, [sliderId]);
+	const sliderRef = useRef(null);
+	const availableSteps = useMemo(() => {
+		if (!steps) return [];
+		const available = [0];
+		const percentStep = 1 / ((max - min) / steps);
+		let ptr = 0;
+		while (ptr + percentStep <= 1) {
+			ptr += percentStep;
+			available.push(ptr);
+		}
+		return available;
+	}, [
+		steps,
+		min,
+		max
+	]);
+	/**
+	* Try to find the closest step to the current slider position.
+	*
+	* @param percentValue Reference value
+	* @return The closest step value
+	*/
+	const findClosestStep = (percentValue) => {
+		return availableSteps.reduce((acc, step) => {
+			const aDst = Math.abs(percentValue - step);
+			if (aDst < acc.dst) return {
+				dst: aDst,
+				val: step
+			};
+			return acc;
+		}, {
+			dst: Infinity,
+			val: -1
+		}).val;
+	};
+	/**
+	* Convert slider's handle position to percent.
+	*
+	* @param event The interaction event
+	* @param slider the slider element
+	* @return The computed percent value
+	*/
+	const getPercentValue = (event, slider) => {
+		const { width, left } = slider.getBoundingClientRect();
+		let percent = (event.pageX - left - window.pageXOffset) / width;
+		percent = clamp(percent, 0, 1);
+		if (steps) percent = findClosestStep(percent);
+		return percent;
+	};
+	/**
+	* Register a handler for the mouse move event.
+	*/
+	const handleMove = useEventCallback((event) => {
+		const { current: slider } = sliderRef;
+		if (!slider || !onChange) return;
+		onChange(computeValueFromPercent(getPercentValue(event, slider), min, max, precision), name, event);
+	});
+	/**
+	* Register a handler for the mouse up event.
+	* Clean a all listeners.
+	*/
+	const handleEnd = useEventCallback(() => {
+		document.body.removeEventListener("mousemove", handleMove);
+		document.body.removeEventListener("mouseup", handleEnd);
+		document.body.removeEventListener("touchmove", handleMove);
+		document.body.removeEventListener("touchend", handleEnd);
+	});
+	/**
+	* Move to the next or previous value (i.e. + or - 10%) or next step
+	* @param previous Should seek the previous value.
+	*/
+	const hopToValue = (previous = false) => {
+		const oldPercent = computePercentFromValue(value, min, max);
+		let percent = clamp(oldPercent + (previous ? -.1 : .1), 0, 1);
+		if (steps) {
+			percent = oldPercent + availableSteps[1] * (previous ? -1 : 1);
+			percent = findClosestStep(percent);
+		}
+		if (onChange) onChange(computeValueFromPercent(percent, min, max, precision), name);
+	};
+	/**
+	* Register a handler for keyboard interactions
+	*/
+	const handleKeyDown = useEventCallback((event) => {
+		if (event.key === "ArrowRight") hopToValue();
+		else if (event.key === "ArrowLeft") hopToValue(true);
+	});
+	/**
+	* Register a handler for the mouseDown event.
+	*/
+	const handleMouseDown = useEventCallback((event) => {
+		onMouseDown?.(event);
+		const { current: slider } = sliderRef;
+		if (isAnyDisabled || !slider) return;
+		const newValue = getPercentValue(event, slider);
+		if (onChange) onChange(computeValueFromPercent(newValue, min, max, precision), name, event);
+		document.body.addEventListener("mousemove", handleMove);
+		document.body.addEventListener("mouseup", handleEnd);
+	});
+	const percentString = `${computePercentFromValue(value, min, max) * 100}%`;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		...forwardedProps,
+		className: classNames.join(className, block({
+			[`theme-${theme}`]: Boolean(theme),
+			"has-label": Boolean(label)
+		})),
+		onMouseDown: handleMouseDown,
+		children: [
+			label && /* @__PURE__ */ jsx(InputLabel, {
+				id: sliderLabelId,
+				htmlFor: sliderId,
+				className: element("label"),
+				theme,
+				children: label
+			}),
+			helper && /* @__PURE__ */ jsx(InputHelper, {
+				className: element("helper"),
+				theme,
+				children: helper
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: element("ui-wrapper"),
+				children: [
+					!hideMinMaxLabel && /* @__PURE__ */ jsx("span", {
+						className: element("value-label", { min: true }),
+						children: min
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: element("wrapper"),
+						ref: sliderRef,
+						children: [
+							/* @__PURE__ */ jsx("div", { className: element("track", { background: true }) }),
+							/* @__PURE__ */ jsx("div", {
+								className: element("track", { active: true }),
+								style: { width: percentString }
+							}),
+							steps ? /* @__PURE__ */ jsx("div", {
+								className: element("ticks"),
+								children: availableSteps.map((step, idx) => /* @__PURE__ */ jsx("div", {
+									className: element("tick"),
+									style: { left: `${step * 100}%` }
+								}, `tick_${idx}`))
+							}) : null,
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								"aria-labelledby": sliderLabelId,
+								name,
+								id: sliderId,
+								className: element("handle"),
+								style: { left: percentString },
+								onKeyDown: isAnyDisabled ? void 0 : handleKeyDown,
+								...disabledStateProps
+							})
+						]
+					}),
+					!hideMinMaxLabel && /* @__PURE__ */ jsx("span", {
+						className: element("value-label", { max: true }),
+						children: max
+					})
+				]
+			})
+		]
+	});
+});
+Slider.displayName = COMPONENT_NAME;
+Slider.className = CLASSNAME;
+Slider.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Slider };

package/_internal/components/slider/index.d.ts

@@ -0,0 +1,2 @@
+import { Slider, SliderProps } from "./Slider.js";
+import { clamp } from "../../utils/number/clamp.js";

package/_internal/components/slideshow/Slides.d.ts

@@ -0,0 +1,49 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { SlideMode } from "./constants.js";
+import React from "react";
+
+//#region src/components/slideshow/Slides.d.ts
+interface SlidesProps extends index_d_exports.GenericProps, index_d_exports.HasTheme {
+  /** current slide active */
+  activeIndex: number;
+  /** slides id to be added to the wrapper */
+  id?: string;
+  /** Whether the automatic rotation of the slideshow is enabled or not. */
+  autoPlay?: boolean;
+  /** Whether the image has to fill its container height or not. */
+  fillHeight?: boolean;
+  /** Number of slides to group together. */
+  groupBy?: number;
+  /** whether the slides are currently playing or not */
+  isAutoPlaying?: boolean;
+  /** id to be passed in into the slides */
+  slidesId?: string;
+  /** callback to change whether the slideshow is playing or not */
+  toggleAutoPlay: () => void;
+  /** component to be rendered after the slides */
+  afterSlides?: React.ReactNode;
+  /** Whether the slides have controls linked */
+  hasControls?: boolean;
+  /**
+   * Accessible label to set on a slide group.
+   * Receives the group position starting from 1 and the total number of groups.
+   * */
+  slideGroupLabel?: (groupPosition: number, groupTotal: number) => string;
+  /** Whether to use CSS transform translate or native scroll snap. */
+  slideMode?: SlideMode;
+  /** On slide change (only triggered on scroll when slideMode=scroll-snap) */
+  onChange?(index: number): void;
+  /** Children */
+  children?: React.ReactNode;
+}
+/**
+ * Slides component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Slides: Comp<SlidesProps, HTMLDivElement>;
+//#endregion
+export { Slides, SlidesProps };

package/_internal/components/slideshow/Slides.js

@@ -0,0 +1,86 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { SlideMode } from "./constants.js";
+import { isScrollSnapSupported } from "../../utils/browser/isScrollSnapSupported.js";
+import { SlideshowItemGroup, buildSlideShowGroupId } from "./SlideshowItemGroup.js";
+import { useSlideScroll } from "./useSlideScroll.js";
+import React, { Children } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { classNames } from "@lumx/core/js/utils";
+import chunk from "lodash/chunk.js";
+//#region src/components/slideshow/Slides.tsx
+/**
+* Component display name.
+*/
+var COMPONENT_NAME = "Slideshow";
+/**
+* Component default class name and class prefix.
+*/
+var CLASSNAME = "lumx-slideshow";
+var { block, element } = classNames.bem(CLASSNAME);
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = { slideMode: SlideMode.transformTranslate };
+/**
+* Slides component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Slides = forwardRef((props, ref) => {
+	const defaultTheme = useTheme();
+	const { activeIndex, id, className, theme = defaultTheme, fillHeight, groupBy, isAutoPlaying, toggleAutoPlay, slidesId, children, afterSlides, hasControls, slideGroupLabel, slideMode = DEFAULT_PROPS.slideMode, onChange, ...forwardedProps } = props;
+	const wrapperRef = React.useRef(null);
+	const startIndexVisible = activeIndex;
+	const endIndexVisible = startIndexVisible + 1;
+	const isScrollSnapEnabled = slideMode === SlideMode.scrollSnap && isScrollSnapSupported();
+	useSlideScroll({
+		activeIndex,
+		enabled: isScrollSnapEnabled,
+		wrapperRef,
+		onChange
+	});
+	let wrapperProps;
+	if (isScrollSnapEnabled) wrapperProps = { tabIndex: 0 };
+	else wrapperProps = { style: { transform: `translateX(-${100 * activeIndex}%)` } };
+	const groups = React.useMemo(() => {
+		const childrenArray = Children.toArray(children);
+		return groupBy && groupBy > 1 ? chunk(childrenArray, groupBy) : childrenArray;
+	}, [children, groupBy]);
+	return /* @__PURE__ */ jsxs("section", {
+		id,
+		ref,
+		...forwardedProps,
+		className: classNames.join(className, block({
+			[`theme-${theme}`]: Boolean(theme),
+			"fill-height": fillHeight,
+			[`group-by-${groupBy}`]: Boolean(groupBy)
+		})),
+		"aria-roledescription": "carousel",
+		children: [/* @__PURE__ */ jsx("div", {
+			id: slidesId,
+			className: element("slides"),
+			onMouseEnter: toggleAutoPlay,
+			onMouseLeave: toggleAutoPlay,
+			"aria-live": isAutoPlaying ? "off" : "polite",
+			children: /* @__PURE__ */ jsx("div", {
+				ref: wrapperRef,
+				className: element("wrapper", { [`${slideMode}`]: isScrollSnapEnabled }),
+				...wrapperProps,
+				children: groups.map((group, index) => /* @__PURE__ */ jsx(SlideshowItemGroup, {
+					id: slidesId && buildSlideShowGroupId(slidesId, index),
+					role: hasControls ? "tabpanel" : "group",
+					label: slideGroupLabel ? slideGroupLabel(index + 1, groups.length) : void 0,
+					isDisplayed: index >= startIndexVisible && index < endIndexVisible,
+					children: group
+				}, index))
+			})
+		}), afterSlides]
+	});
+});
+Slides.displayName = COMPONENT_NAME;
+Slides.className = CLASSNAME;
+//#endregion
+export { Slides };

package/_internal/components/slideshow/Slideshow.d.ts

@@ -0,0 +1,35 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { SlideMode } from "./constants.js";
+import { SlideshowControlsProps } from "./SlideshowControls.js";
+import { SlidesProps } from "./Slides.js";
+import React from "react";
+
+//#region src/components/slideshow/Slideshow.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SlideshowProps extends index_d_exports.GenericProps, Pick<SlidesProps, 'autoPlay' | 'slidesId' | 'id' | 'theme' | 'fillHeight' | 'groupBy' | 'slideGroupLabel'> {
+  /** Whether to use CSS transform translate or native scroll snap. */
+  slideMode?: SlideMode;
+  /** current slide active */
+  activeIndex?: SlidesProps['activeIndex'];
+  /** Interval between each slide when automatic rotation is enabled. */
+  interval?: number;
+  /** Props to pass to the slideshow controls (minus those already set by the Slideshow props). */
+  slideshowControlsProps?: Pick<SlideshowControlsProps, 'nextButtonProps' | 'previousButtonProps' | 'paginationItemProps'> & Omit<SlideshowControlsProps, 'activeIndex' | 'onPaginationClick' | 'onNextClick' | 'onPreviousClick' | 'slidesCount' | 'parentRef' | 'theme'>;
+  /** Callback when slide changes */
+  onChange?(index: number): void;
+  /** Children */
+  children?: React.ReactNode;
+}
+/**
+ * Slideshow component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+declare const Slideshow: Comp<SlideshowProps, HTMLDivElement>;
+//#endregion
+export { Slideshow, SlideshowProps };

package/_internal/components/slideshow/Slideshow.js

@@ -0,0 +1,104 @@
+import { forwardRef } from "../../utils/react/forwardRef.js";
+import { mergeRefs } from "../../utils/react/mergeRefs.js";
+import { useTheme } from "../../utils/theme/ThemeContext.js";
+import { SlideMode } from "./constants.js";
+import { DEFAULT_OPTIONS } from "../../hooks/useSlideshowControls.js";
+import { useFocusWithin } from "../../hooks/useFocusWithin.js";
+import { isScrollSnapSupported } from "../../utils/browser/isScrollSnapSupported.js";
+import { buildSlideShowGroupId } from "./SlideshowItemGroup.js";
+import { SlideshowControls } from "./SlideshowControls.js";
+import { Slides } from "./Slides.js";
+import { src_exports } from "../../../index.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/slideshow/Slideshow.tsx
+/**
+* Component default props.
+*/
+var DEFAULT_PROPS = {
+	...DEFAULT_OPTIONS,
+	slideMode: SlideMode.transformTranslate
+};
+/**
+* Slideshow component.
+*
+* @param  props Component props.
+* @param  ref   Component ref.
+* @return React element.
+*/
+var Slideshow = forwardRef((props, ref) => {
+	const defaultTheme = useTheme() || src_exports.Theme.light;
+	const { activeIndex, autoPlay = DEFAULT_PROPS.autoPlay, children, className, fillHeight, groupBy = DEFAULT_OPTIONS.groupBy, interval = DEFAULT_PROPS.interval, onChange, slideshowControlsProps, theme = defaultTheme, id, slidesId, slideGroupLabel, slideMode = DEFAULT_PROPS.slideMode, ...forwardedProps } = props;
+	const itemsCount = React.Children.count(children);
+	const { activeIndex: currentIndex, slideshowId, setSlideshow, isAutoPlaying, slideshowSlidesId, slidesCount, onNextClick, onPaginationClick, onPreviousClick, slideshow, stopAutoPlay, startAutoPlay, toggleAutoPlay, toggleForcePause } = SlideshowControls.useSlideshowControls({
+		activeIndex,
+		defaultActiveIndex: DEFAULT_PROPS.activeIndex,
+		autoPlay: Boolean(autoPlay),
+		itemsCount,
+		groupBy,
+		id,
+		interval,
+		onChange,
+		slidesId
+	});
+	useFocusWithin({
+		element: slideshow,
+		onFocusIn: stopAutoPlay,
+		onFocusOut: startAutoPlay
+	});
+	const showControls = slideshowControlsProps && slidesCount > 1;
+	return /* @__PURE__ */ jsx(Slides, {
+		slideMode,
+		onChange: slideMode === SlideMode.scrollSnap && isScrollSnapSupported() ? onPaginationClick : void 0,
+		activeIndex: currentIndex,
+		id: slideshowId,
+		className,
+		theme,
+		fillHeight,
+		groupBy,
+		isAutoPlaying,
+		autoPlay,
+		slidesId: slideshowSlidesId,
+		toggleAutoPlay,
+		ref: mergeRefs(ref, setSlideshow),
+		hasControls: showControls,
+		slideGroupLabel,
+		afterSlides: slideshowControlsProps && slidesCount > 1 ? /* @__PURE__ */ jsx("div", {
+			className: `${Slides.className}__controls`,
+			children: /* @__PURE__ */ jsx(SlideshowControls, {
+				...slideshowControlsProps,
+				activeIndex: currentIndex,
+				onPaginationClick,
+				onNextClick,
+				onPreviousClick,
+				slidesCount,
+				parentRef: slideshow,
+				theme,
+				isAutoPlaying,
+				nextButtonProps: {
+					"aria-controls": slideshowSlidesId,
+					...slideshowControlsProps.nextButtonProps
+				},
+				previousButtonProps: {
+					"aria-controls": slideshowSlidesId,
+					...slideshowControlsProps.previousButtonProps
+				},
+				playButtonProps: autoPlay ? {
+					"aria-controls": slideshowSlidesId,
+					onClick: toggleForcePause,
+					...slideshowControlsProps.playButtonProps
+				} : void 0,
+				paginationItemProps: (index) => ({
+					"aria-controls": buildSlideShowGroupId(slideshowSlidesId, index),
+					...slideshowControlsProps.paginationItemProps?.(index)
+				})
+			})
+		}) : void 0,
+		...forwardedProps,
+		children
+	});
+});
+Slideshow.displayName = "Slideshow";
+Slideshow.defaultProps = DEFAULT_PROPS;
+//#endregion
+export { Slideshow };

package/_internal/components/slideshow/SlideshowControls.d.ts

@@ -0,0 +1,65 @@
+import { Comp } from "../../utils/type/Comp.js";
+import { index_d_exports } from "../../utils/type/index.js";
+import { IconButtonProps } from "../button/IconButton.js";
+import { UseSlideshowControls, UseSlideshowControlsOptions } from "../../hooks/useSlideshowControls.js";
+import React, { RefObject } from "react";
+
+//#region src/components/slideshow/SlideshowControls.d.ts
+/**
+ * Defines the props of the component.
+ */
+interface SlideshowControlsProps extends index_d_exports.GenericProps, index_d_exports.HasTheme {
+  /** Index of the current slide. */
+  activeIndex?: number;
+  /** Props to pass to the next button (minus those already set by the SlideshowControls props). */
+  nextButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
+  /** Reference to the parent element on which we want to listen touch swipe. */
+  parentRef?: RefObject<HTMLDivElement> | HTMLDivElement | null;
+  /** Props to pass to the previous button (minus those already set by the SlideshowControls props). */
+  previousButtonProps: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
+  /** Props to pass to the pagination wrapper */
+  paginationProps?: Omit<React.HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'role'>;
+  /** Number of slides. */
+  slidesCount: number;
+  /** On next button click callback. */
+  onNextClick?(loopback?: boolean): void;
+  /** On pagination change callback. */
+  onPaginationClick?(index: number): void;
+  /** On previous button click callback. */
+  onPreviousClick?(loopback?: boolean): void;
+  /** whether the slideshow is currently playing */
+  isAutoPlaying?: boolean;
+  /**
+   * function to be executed in order to retrieve the label for the pagination item
+   * @deprecated Use paginationItemProps instead.
+   * */
+  paginationItemLabel?: (index: number) => string;
+  /**
+   * function to be executed in order to retrieve the props for a pagination item.
+   */
+  paginationItemProps?: (itemIndex: number) => React.HTMLAttributes<HTMLButtonElement> & {
+    label?: string;
+  };
+  /** Props to pass to the lay button (minus those already set by the SlideshowControls props). */
+  playButtonProps?: Pick<IconButtonProps, 'label'> & Omit<IconButtonProps, 'label' | 'onClick' | 'icon' | 'emphasis' | 'color'>;
+}
+declare const SlideshowControls: Comp<SlideshowControlsProps, HTMLDivElement> & {
+  useSlideshowControls: ({
+    activeIndex,
+    groupBy,
+    interval,
+    autoPlay,
+    defaultActiveIndex,
+    onChange,
+    itemsCount,
+    id,
+    slidesId
+  }: UseSlideshowControlsOptions) => UseSlideshowControls;
+  useSlideshowControlsDefaultOptions: {
+    readonly activeIndex: 0;
+    readonly groupBy: 1;
+    readonly interval: 5000;
+  };
+};
+//#endregion
+export { SlideshowControls, SlideshowControlsProps };