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

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const Carousel_styles = require("./Carousel.styles.cjs");
const Stack = require("../Stack/Stack.cjs");
const Button = require("../Button/Button.cjs");
const HvCarouselThumbnails = React.forwardRef(function HvCarouselThumbnails2(props, ref) {
  const {
    classes: classesProp,
    className,
    page,
    pages,
    width,
    renderThumbnail,
    onThumbnailClick,
    thumbnailProps,
    ...others
  } = props;
  const { classes, cx } = Carousel_styles.useClasses(classesProp);
  const selectedIndex = page || 0;
  const numSlides = pages;
  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.panel, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsx(Stack.HvStack, { direction: "row", spacing: "xs", children: Array.from(Array(numSlides)).map((doc, i) => /* @__PURE__ */ jsxRuntime.jsx(
    Button.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}`
  )) }) });
});
exports.HvCarouselThumbnails = HvCarouselThumbnails;