@hitachivantara/uikit-react-core/dist/Carousel/CarouselThumbnails.js

UI Kit Core React components.

import { HvButton } from "../Button/Button.js";
import { useClasses } from "./Carousel.styles.js";
import { HvStack } from "../Stack/Stack.js";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/Carousel/CarouselThumbnails.tsx
var HvCarouselThumbnails = forwardRef(function HvCarouselThumbnails(props, ref) {
	const { classes: classesProp, className, page, pages, width, renderThumbnail, onThumbnailClick, thumbnailProps, ...others } = props;
	const { classes, cx } = useClasses(classesProp);
	const selectedIndex = page || 0;
	const numSlides = pages;
	return /* @__PURE__ */ jsx("div", {
		ref,
		className: cx(classes.panel, className),
		...others,
		children: /* @__PURE__ */ jsx(HvStack, {
			direction: "row",
			spacing: "xs",
			children: Array.from(Array(numSlides)).map((doc, i) => /* @__PURE__ */ jsx(HvButton, {
				icon: true,
				style: { width },
				variant: "secondaryGhost",
				className: cx(classes.thumbnail, { [classes.thumbnailSelected]: i === selectedIndex }),
				onClick: (event) => onThumbnailClick?.(event, i),
				...thumbnailProps,
				children: renderThumbnail?.(i)
			}, `thumbnail-${i}`))
		})
	});
});
//#endregion
export { HvCarouselThumbnails };