@hitachivantara/uikit-react-core 5.44.1 → 5.44.3

package/dist/esm/Carousel/Carousel.js

@@ -0,0 +1,213 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useRef, useState, Children, useCallback, useEffect } from "react";
+import useCarousel from "embla-carousel-react";
+import { Close, Fullscreen, Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useTheme } from "../hooks/useTheme.js";
+import { HvCarouselControls } from "./CarouselControls.js";
+import { HvCarouselThumbnails } from "./CarouselThumbnails.js";
+import { useClasses } from "./Carousel.styles.js";
+import { staticClasses } from "./Carousel.styles.js";
+import { HvButton } from "../Button/Button.js";
+import { HvContainer } from "../Container/Container.js";
+import { HvTooltip } from "../Tooltip/Tooltip.js";
+import { HvTypography } from "../Typography/Typography.js";
+const clamp = (num, max, min = 0) => Math.min(Math.max(num, min), max);
+const HvCarousel = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    height: heightProp = "auto",
+    thumbnailWidth = 90,
+    title,
+    children,
+    actions: actionsProp,
+    xs,
+    showDots: showDotsProp,
+    showCounter: showCounterProp,
+    showSlideControls,
+    showFullscreen: showFullscreenProp,
+    hideThumbnails: hideThumbnailsProp,
+    controlsPosition: controlsPositionProp,
+    thumbnailsPosition: thumbnailsPositionProp,
+    carouselOptions,
+    renderThumbnail,
+    onChange,
+    ...others
+  } = useDefaultProps("HvCarousel", props);
+  const { activeTheme } = useTheme();
+  const { classes, css, cx } = useClasses(classesProp);
+  const thumbnailsRef = useRef(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const isDs3 = activeTheme?.name === "ds3";
+  const actionsPosition = isDs3 ? "header" : "controls";
+  const controlsPosition = controlsPositionProp ?? (isDs3 ? "bottom" : "top");
+  const thumbnailsPosition = thumbnailsPositionProp ?? "bottom";
+  const [containerRef, controller] = useCarousel({
+    align: "start",
+    loop: true,
+    ...carouselOptions
+  });
+  const [selectedIndex, setSelectedIndex] = useState(
+    carouselOptions?.startIndex ?? 0
+  );
+  const numSlides = Children.count(children);
+  const handlePrevious = useCallback(() => {
+    controller?.scrollPrev();
+  }, [controller]);
+  const handleNext = useCallback(() => {
+    controller?.scrollNext();
+  }, [controller]);
+  const handleScroll = (index) => {
+    controller?.scrollTo(index);
+  };
+  const handleSelect = useCallback(() => {
+    if (!controller)
+      return;
+    const slideIndex = controller.selectedScrollSnap();
+    setSelectedIndex(slideIndex);
+    thumbnailsRef.current?.querySelectorAll("button")?.[slideIndex]?.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    });
+    onChange?.(slideIndex);
+  }, [controller, onChange]);
+  useEffect(() => {
+    if (!controller)
+      return;
+    controller.on("select", handleSelect);
+    return () => {
+      controller.off("select", handleSelect);
+    };
+  }, [controller, handleSelect]);
+  useEffect(() => {
+    if (!controller)
+      return;
+    controller.reInit();
+    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));
+  }, [numSlides, controller]);
+  const canPrev = controller?.canScrollPrev() ?? false;
+  const canNext = controller?.canScrollNext() ?? false;
+  const showTitle = !!title && (!xs || isFullscreen);
+  const showFullscreen = showFullscreenProp ?? xs;
+  const height = isFullscreen ? "100%" : heightProp ?? "auto";
+  const showCounter = xs;
+  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);
+  const showThumbnails = !hideThumbnails && !!renderThumbnail;
+  const showDots = showDotsProp ?? numSlides <= 5;
+  const actions = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx(
+        classes.actions,
+        actionsPosition === "header" ? css({ position: "relative", top: -40, height: 0 }) : css({ position: "absolute" })
+      ),
+      children: [
+        actionsProp,
+        showFullscreen && /* @__PURE__ */ jsx(HvTooltip, { title: isFullscreen ? "Close" : "Fullscreen", children: /* @__PURE__ */ jsx(
+          HvButton,
+          {
+            icon: true,
+            onClick: () => setIsFullscreen((curr) => !curr),
+            className: classes.closeButton,
+            children: isFullscreen ? /* @__PURE__ */ jsx(Close, {}) : /* @__PURE__ */ jsx(Fullscreen, {})
+          }
+        ) })
+      ]
+    }
+  );
+  const controls = /* @__PURE__ */ jsx(
+    HvCarouselControls,
+    {
+      classes,
+      showDots,
+      page: selectedIndex,
+      pages: numSlides,
+      canPrevious: canPrev,
+      canNext,
+      onPreviousClick: handlePrevious,
+      onNextClick: handleNext,
+      actions: actionsPosition === "controls" && actions
+    }
+  );
+  const thumbnails = showThumbnails && /* @__PURE__ */ jsx(
+    HvCarouselThumbnails,
+    {
+      classes,
+      ref: thumbnailsRef,
+      page: selectedIndex,
+      pages: numSlides,
+      width: thumbnailWidth,
+      onThumbnailClick: (evt, i) => handleScroll(i),
+      renderThumbnail
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    HvContainer,
+    {
+      className: cx(classes.root, className, {
+        [classes.xs]: xs,
+        [classes.fullscreen]: isFullscreen
+      }),
+      ...others,
+      children: [
+        showTitle && /* @__PURE__ */ jsx(HvTypography, { variant: "title2", className: classes.title, children: title }),
+        actionsPosition === "header" && actions,
+        thumbnailsPosition === "top" && thumbnails,
+        controlsPosition === "top" && controls,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cx(classes.main, {
+              [classes.mainXs]: xs,
+              [classes.mainFullscreen]: isFullscreen
+            }),
+            children: [
+              showCounter && /* @__PURE__ */ jsx("div", { className: classes.counterContainer, children: /* @__PURE__ */ jsx("span", { className: classes.counter, children: `${selectedIndex + 1}/${numSlides}` }) }),
+              showSlideControls && /* @__PURE__ */ jsxs("div", { className: classes.slideControls, children: [
+                /* @__PURE__ */ jsx(
+                  HvButton,
+                  {
+                    icon: true,
+                    disabled: !canPrev,
+                    variant: "secondarySubtle",
+                    "aria-label": "Backwards",
+                    onClick: handlePrevious,
+                    children: /* @__PURE__ */ jsx(Backwards, { iconSize: "XS" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  HvButton,
+                  {
+                    icon: true,
+                    disabled: !canNext,
+                    variant: "secondarySubtle",
+                    "aria-label": "Forwards",
+                    onClick: handleNext,
+                    children: /* @__PURE__ */ jsx(Forwards, { iconSize: "XS" })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: containerRef,
+                  style: { height },
+                  className: classes.slidesViewport,
+                  children: /* @__PURE__ */ jsx("div", { className: classes.slidesContainer, children })
+                }
+              )
+            ]
+          }
+        ),
+        controlsPosition === "bottom" && controls,
+        thumbnailsPosition === "bottom" && thumbnails
+      ]
+    }
+  );
+};
+export {
+  HvCarousel,
+  staticClasses as carouselClasses
+};
+//# sourceMappingURL=Carousel.js.map

package/dist/esm/Carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sources":["../../../src/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n  CSSProperties,\n  Children,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\n\nimport {\n  Backwards,\n  Forwards,\n  Close,\n  Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton } from \"../Button\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { HvTypography } from \"../Typography\";\nimport { HvContainer } from \"../Container\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { HvCarouselControls } from \"./CarouselControls\";\nimport { HvCarouselThumbnails } from \"./CarouselThumbnails\";\nimport { staticClasses, useClasses } from \"./Carousel.styles\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n  Math.min(Math.max(num, min), max);\n\nexport { staticClasses as carouselClasses };\n\nexport type HvCarouselClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselProps\n  extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselClasses;\n  /** Height of the Slider container. If `undefined`, images will keep a 16/9 aspect-ratio */\n  height?: CSSProperties[\"height\"];\n  /** Width of the thumbnail. Height will try to maintain a 16/9 aspect-ratio */\n  thumbnailWidth?: CSSProperties[\"width\"];\n  /** Title of the carousel */\n  title?: React.ReactNode;\n  /** Content slides to be displayed. @see `<HvCarouselSlide />` */\n  children?: React.ReactNode;\n  /** Custom content to render in the actions area */\n  actions?: React.ReactNode;\n  /** Whether Carousel is in \"xs mode\" - to use in embedded contexts */\n  xs?: boolean;\n  /** Whether to show dots instead of arrow pagination. Defaults to true under 5 elements */\n  showDots?: boolean;\n  /** Whether to show the counter on the top-right corner of the active slide */\n  showCounter?: boolean;\n  /** Whether to show the back/forwards buttons over the active slide */\n  showSlideControls?: boolean;\n  /** Whether to enable the fullscreen toggle button */\n  showFullscreen?: boolean;\n  /** Whether to hide the thumbnails. Hidden by default in \"xs\" mode */\n  hideThumbnails?: boolean;\n  /** Controls position. */\n  controlsPosition?: \"top\" | \"bottom\";\n  /** Thumbnails position. */\n  thumbnailsPosition?: \"top\" | \"bottom\";\n  /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n  carouselOptions?: EmblaOptionsType;\n  /** Function that renders the thumbnail.  */\n  renderThumbnail?: (index: number) => React.ReactNode;\n  /** The callback fired when the active slide changes. */\n  onChange?: (index: number) => void;\n}\n\n/**\n * A Carousel is commonly used to browse images, it can also be used to browse any kind of content like text, video, or charts.\n * It allows you to focus on a particular content while having a notion of how many you have to explore.\n */\nexport const HvCarousel = (props: HvCarouselProps) => {\n  const {\n    className,\n    classes: classesProp,\n    height: heightProp = \"auto\",\n    thumbnailWidth = 90,\n    title,\n    children,\n    actions: actionsProp,\n    xs,\n    showDots: showDotsProp,\n    showCounter: showCounterProp,\n    showSlideControls,\n    showFullscreen: showFullscreenProp,\n    hideThumbnails: hideThumbnailsProp,\n    controlsPosition: controlsPositionProp,\n    thumbnailsPosition: thumbnailsPositionProp,\n    carouselOptions,\n    renderThumbnail,\n    onChange,\n    ...others\n  } = useDefaultProps(\"HvCarousel\", props);\n  const { activeTheme } = useTheme();\n  const { classes, css, cx } = useClasses(classesProp);\n  const thumbnailsRef = useRef<HTMLDivElement>(null);\n  const [isFullscreen, setIsFullscreen] = useState(false);\n\n  const isDs3 = activeTheme?.name === \"ds3\";\n  const actionsPosition = isDs3 ? \"header\" : \"controls\";\n  const controlsPosition = controlsPositionProp ?? (isDs3 ? \"bottom\" : \"top\");\n  const thumbnailsPosition = thumbnailsPositionProp ?? \"bottom\";\n\n  const [containerRef, controller] = useCarousel({\n    align: \"start\",\n    loop: true,\n    ...carouselOptions,\n  });\n\n  const [selectedIndex, setSelectedIndex] = useState(\n    carouselOptions?.startIndex ?? 0\n  );\n\n  const numSlides = Children.count(children);\n\n  const handlePrevious = useCallback(() => {\n    controller?.scrollPrev();\n  }, [controller]);\n\n  const handleNext = useCallback(() => {\n    controller?.scrollNext();\n  }, [controller]);\n\n  const handleScroll = (index: number) => {\n    controller?.scrollTo(index);\n  };\n\n  const handleSelect = useCallback(() => {\n    if (!controller) return;\n\n    const slideIndex = controller.selectedScrollSnap();\n    setSelectedIndex(slideIndex);\n\n    // scroll to thumbnail button\n    thumbnailsRef.current\n      ?.querySelectorAll(\"button\")\n      ?.[slideIndex]?.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n      });\n\n    onChange?.(slideIndex);\n  }, [controller, onChange]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.on(\"select\", handleSelect);\n\n    return () => {\n      controller.off(\"select\", handleSelect);\n    };\n  }, [controller, handleSelect]);\n\n  useEffect(() => {\n    if (!controller) return;\n\n    controller.reInit();\n    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n  }, [numSlides, controller]);\n\n  const canPrev = controller?.canScrollPrev() ?? false;\n  const canNext = controller?.canScrollNext() ?? false;\n  const showTitle = !!title && (!xs || isFullscreen);\n  const showFullscreen = showFullscreenProp ?? xs;\n  const height = isFullscreen ? \"100%\" : heightProp ?? \"auto\";\n  const showCounter = xs;\n  const hideThumbnails = hideThumbnailsProp ?? (xs && !isFullscreen);\n  const showThumbnails = !hideThumbnails && !!renderThumbnail;\n  const showDots = showDotsProp ?? numSlides <= 5;\n\n  const actions = (\n    <div\n      className={cx(\n        classes.actions,\n        actionsPosition === \"header\"\n          ? css({ position: \"relative\", top: -40, height: 0 })\n          : css({ position: \"absolute\" })\n      )}\n    >\n      {actionsProp}\n      {showFullscreen && (\n        <HvTooltip title={isFullscreen ? \"Close\" : \"Fullscreen\"}>\n          <HvButton\n            icon\n            onClick={() => setIsFullscreen((curr) => !curr)}\n            className={classes.closeButton}\n          >\n            {isFullscreen ? <Close /> : <Fullscreen />}\n          </HvButton>\n        </HvTooltip>\n      )}\n    </div>\n  );\n\n  const controls = (\n    <HvCarouselControls\n      classes={classes}\n      showDots={showDots}\n      page={selectedIndex}\n      pages={numSlides}\n      canPrevious={canPrev}\n      canNext={canNext}\n      onPreviousClick={handlePrevious}\n      onNextClick={handleNext}\n      actions={actionsPosition === \"controls\" && actions}\n    />\n  );\n\n  const thumbnails = showThumbnails && (\n    <HvCarouselThumbnails\n      classes={classes}\n      ref={thumbnailsRef}\n      page={selectedIndex}\n      pages={numSlides}\n      width={thumbnailWidth}\n      onThumbnailClick={(evt, i) => handleScroll(i)}\n      renderThumbnail={renderThumbnail}\n    />\n  );\n\n  return (\n    <HvContainer\n      className={cx(classes.root, className, {\n        [classes.xs]: xs,\n        [classes.fullscreen]: isFullscreen,\n      })}\n      {...others}\n    >\n      {showTitle && (\n        <HvTypography variant=\"title2\" className={classes.title}>\n          {title}\n        </HvTypography>\n      )}\n\n      {actionsPosition === \"header\" && actions}\n      {thumbnailsPosition === \"top\" && thumbnails}\n      {controlsPosition === \"top\" && controls}\n      <div\n        className={cx(classes.main, {\n          [classes.mainXs]: xs,\n          [classes.mainFullscreen]: isFullscreen,\n        })}\n      >\n        {showCounter && (\n          <div className={classes.counterContainer}>\n            <span className={classes.counter}>\n              {`${selectedIndex + 1}/${numSlides}`}\n            </span>\n          </div>\n        )}\n\n        {showSlideControls && (\n          <div className={classes.slideControls}>\n            <HvButton\n              icon\n              disabled={!canPrev}\n              variant=\"secondarySubtle\"\n              aria-label=\"Backwards\"\n              onClick={handlePrevious}\n            >\n              <Backwards iconSize=\"XS\" />\n            </HvButton>\n            <HvButton\n              icon\n              disabled={!canNext}\n              variant=\"secondarySubtle\"\n              aria-label=\"Forwards\"\n              onClick={handleNext}\n            >\n              <Forwards iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        )}\n\n        <div\n          ref={containerRef}\n          style={{ height }}\n          className={classes.slidesViewport}\n        >\n          <div className={classes.slidesContainer}>{children}</div>\n        </div>\n      </div>\n      {controlsPosition === \"bottom\" && controls}\n      {thumbnailsPosition === \"bottom\" && thumbnails}\n    </HvContainer>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Carousel/Carousel.styles.js

@@ -0,0 +1,169 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvCarousel", {
+  /** Styles applied to the component root class. */
+  root: {
+    display: "flex",
+    alignItems: "stretch",
+    flexDirection: "column",
+    backgroundColor: theme.colors.atmo1,
+    margin: 0,
+    paddingTop: theme.spacing(2),
+    paddingBottom: theme.spacing(2)
+  },
+  xs: {
+    "&:not(._)": {
+      padding: 0
+    },
+    // put dots on top of Slide
+    "& $dots": {
+      position: "relative",
+      top: "-40px"
+    },
+    "& $actions": {
+      top: 0
+    },
+    "& $controls": {
+      display: "flex"
+    }
+  },
+  fullscreen: {
+    width: "100vw",
+    height: "100vh",
+    position: "fixed",
+    inset: 0,
+    zIndex: theme.zIndices.modal,
+    "&:not(._)": {
+      padding: theme.spacing("xs", "xl")
+    }
+  },
+  title: {
+    display: "flex",
+    justifyContent: "flex-start",
+    marginBottom: theme.space.xs
+  },
+  actions: {
+    display: "flex",
+    justifyContent: "flex-end",
+    right: 0,
+    position: "relative"
+  },
+  closeButton: {},
+  mainContainer: {},
+  controls: {
+    display: "flex",
+    alignItems: "center",
+    position: "relative",
+    height: 32,
+    justifyContent: "center",
+    backgroundColor: theme.colors.atmo2,
+    border: `1px solid ${theme.colors.atmo4}`,
+    gap: theme.space.xs,
+    "&:has($dots)": {
+      justifyContent: "center"
+    }
+  },
+  pageCounter: {},
+  main: {
+    padding: 0,
+    display: "flex",
+    flexDirection: "column",
+    position: "relative",
+    "&:hover $slideControls": {
+      opacity: 1
+    }
+  },
+  mainXs: {},
+  mainFullscreen: {
+    maxHeight: "80vh"
+  },
+  counterContainer: {
+    position: "absolute",
+    top: theme.space.xs,
+    right: theme.space.md,
+    zIndex: 1,
+    display: "none"
+  },
+  counter: {
+    color: theme.colors.base_light,
+    backgroundColor: theme.colors.base_dark,
+    padding: theme.spacing(0, "sm")
+  },
+  slideControls: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    top: `calc(50% - (32px / 2))`,
+    padding: theme.spacing(0, "sm"),
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    opacity: 0,
+    "& button": {
+      zIndex: 1
+    },
+    "&:focus-within": {
+      opacity: 1
+    }
+  },
+  slidesViewport: {
+    overflow: "hidden"
+  },
+  slidesContainer: {
+    display: "flex",
+    flexDirection: "row",
+    height: "100%"
+  },
+  dots: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: theme.space.xs,
+    height: theme.space.md
+  },
+  dotsXs: {},
+  dot: {
+    width: 5,
+    height: 5,
+    margin: theme.space.xs,
+    borderRadius: "50%",
+    backgroundColor: theme.colors.atmo4
+  },
+  dotSelected: {
+    width: 10,
+    height: 10,
+    backgroundColor: theme.colors.secondary_80
+  },
+  panel: {
+    display: "flex",
+    width: "100%",
+    overflowX: "auto",
+    // "hidden",
+    overflowY: "hidden",
+    padding: theme.spacing("xs", "2px", "2px")
+  },
+  thumbnail: {
+    height: "unset",
+    padding: 0,
+    "& img": {
+      width: "100%",
+      height: "100%",
+      textAlign: "center",
+      aspectRatio: "16/9",
+      opacity: "50%",
+      borderRadius: theme.radii.round
+    }
+  },
+  thumbnailSelected: {
+    "& img": {
+      border: "none",
+      opacity: "100%"
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Carousel.styles.js.map

package/dist/esm/Carousel/Carousel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.styles.js","sources":["../../../src/Carousel/Carousel.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarousel\", {\n  /** Styles applied to the component root class. */\n  root: {\n    display: \"flex\",\n    alignItems: \"stretch\",\n    flexDirection: \"column\",\n    backgroundColor: theme.colors.atmo1,\n    margin: 0,\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  xs: {\n    \"&:not(._)\": {\n      padding: 0,\n    },\n    // put dots on top of Slide\n    \"& $dots\": {\n      position: \"relative\",\n      top: \"-40px\",\n    },\n    \"& $actions\": {\n      top: 0,\n    },\n    \"& $controls\": {\n      display: \"flex\",\n    },\n  },\n  fullscreen: {\n    width: \"100vw\",\n    height: \"100vh\",\n    position: \"fixed\",\n    inset: 0,\n    zIndex: theme.zIndices.modal,\n    \"&:not(._)\": {\n      padding: theme.spacing(\"xs\", \"xl\"),\n    },\n  },\n  title: {\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    marginBottom: theme.space.xs,\n  },\n  actions: {\n    display: \"flex\",\n    justifyContent: \"flex-end\",\n    right: 0,\n\n    position: \"relative\",\n  },\n  closeButton: {},\n\n  mainContainer: {},\n\n  controls: {\n    display: \"flex\",\n    alignItems: \"center\",\n    position: \"relative\",\n    height: 32,\n    justifyContent: \"center\",\n    backgroundColor: theme.colors.atmo2,\n    border: `1px solid ${theme.colors.atmo4}`,\n    gap: theme.space.xs,\n    \"&:has($dots)\": {\n      justifyContent: \"center\",\n    },\n  },\n  pageCounter: {},\n\n  main: {\n    padding: 0,\n    display: \"flex\",\n    flexDirection: \"column\",\n    position: \"relative\",\n    \"&:hover $slideControls\": {\n      opacity: 1,\n    },\n  },\n  mainXs: {},\n  mainFullscreen: {\n    maxHeight: \"80vh\",\n  },\n  counterContainer: {\n    position: \"absolute\",\n    top: theme.space.xs,\n    right: theme.space.md,\n    zIndex: 1,\n    display: \"none\",\n  },\n  counter: {\n    color: theme.colors.base_light,\n    backgroundColor: theme.colors.base_dark,\n    padding: theme.spacing(0, \"sm\"),\n  },\n  slideControls: {\n    position: \"absolute\",\n    left: 0,\n    right: 0,\n    top: `calc(50% - (32px / 2))`,\n    padding: theme.spacing(0, \"sm\"),\n    display: \"flex\",\n    flexDirection: \"row\",\n    alignItems: \"center\",\n    justifyContent: \"space-between\",\n    opacity: 0,\n    \"& button\": {\n      zIndex: 1,\n    },\n    \"&:focus-within\": {\n      opacity: 1,\n    },\n  },\n  slidesViewport: {\n    overflow: \"hidden\",\n  },\n  slidesContainer: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"100%\",\n  },\n\n  dots: {\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    gap: theme.space.xs,\n    height: theme.space.md,\n  },\n  dotsXs: {},\n  dot: {\n    width: 5,\n    height: 5,\n    margin: theme.space.xs,\n    borderRadius: \"50%\",\n    backgroundColor: theme.colors.atmo4,\n  },\n  dotSelected: {\n    width: 10,\n    height: 10,\n    backgroundColor: theme.colors.secondary_80,\n  },\n\n  panel: {\n    display: \"flex\",\n    width: \"100%\",\n    overflowX: \"auto\", // \"hidden\",\n    overflowY: \"hidden\",\n    padding: theme.spacing(\"xs\", \"2px\", \"2px\"),\n  },\n  thumbnail: {\n    height: \"unset\",\n    padding: 0,\n    \"& img\": {\n      width: \"100%\",\n      height: \"100%\",\n      textAlign: \"center\",\n      aspectRatio: \"16/9\",\n      opacity: \"50%\",\n      borderRadius: theme.radii.round,\n    },\n  },\n  thumbnailSelected: {\n    \"& img\": {\n      border: \"none\",\n      opacity: \"100%\",\n    },\n  },\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/Carousel/CarouselControls.js

@@ -0,0 +1,60 @@
+import { jsxs, jsx, Fragment } from "@emotion/react/jsx-runtime";
+import { Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./Carousel.styles.js";
+import { HvButton } from "../Button/Button.js";
+const HvCarouselControls = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    showDots,
+    page,
+    pages,
+    canPrevious,
+    canNext,
+    actions,
+    onPreviousClick,
+    onNextClick
+  } = useDefaultProps("HvCarouselControls", props);
+  const { classes, cx } = useClasses(classesProp, false);
+  const selectedIndex = page || 0;
+  const numSlides = pages;
+  return /* @__PURE__ */ jsxs("div", { className: cx(classes.controls, className), children: [
+    showDots ? /* @__PURE__ */ jsx("div", { className: classes.dots, children: Array.from(Array(numSlides)).map((el, index) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cx(classes.dot, {
+          [classes.dotSelected]: index === selectedIndex
+        })
+      },
+      `circle-${index}`
+    )) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        HvButton,
+        {
+          icon: true,
+          disabled: !canPrevious,
+          "aria-label": "Backwards",
+          onClick: onPreviousClick,
+          children: /* @__PURE__ */ jsx(Backwards, { iconSize: "XS" })
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: classes.pageCounter, children: `${selectedIndex + 1} / ${numSlides}` }),
+      /* @__PURE__ */ jsx(
+        HvButton,
+        {
+          icon: true,
+          disabled: !canNext,
+          "aria-label": "Forwards",
+          onClick: onNextClick,
+          children: /* @__PURE__ */ jsx(Forwards, { iconSize: "XS" })
+        }
+      )
+    ] }),
+    actions
+  ] });
+};
+export {
+  HvCarouselControls
+};
+//# sourceMappingURL=CarouselControls.js.map

package/dist/esm/Carousel/CarouselControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselControls.js","sources":["../../../src/Carousel/CarouselControls.tsx"],"sourcesContent":["import { MouseEventHandler, ReactNode } from \"react\";\n\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton } from \"../Button\";\nimport { HvPaginationProps } from \"../Pagination\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselControlsProps\n  extends HvBaseProps<HTMLDivElement>,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n  showDots?: boolean;\n  classes?: ExtractNames<typeof useClasses>;\n  actions?: ReactNode;\n  onPreviousClick?: MouseEventHandler<HTMLButtonElement>;\n  onNextClick?: MouseEventHandler<HTMLButtonElement>;\n}\n\nexport const HvCarouselControls = (props: HvCarouselControlsProps) => {\n  const {\n    classes: classesProp,\n    className,\n    showDots,\n    page,\n    pages,\n    canPrevious,\n    canNext,\n    actions,\n    onPreviousClick,\n    onNextClick,\n  } = useDefaultProps(\"HvCarouselControls\", props);\n  const { classes, cx } = useClasses(classesProp, false);\n\n  const selectedIndex = page || 0;\n  const numSlides = pages;\n\n  return (\n    <div className={cx(classes.controls, className)}>\n      {showDots ? (\n        <div className={classes.dots}>\n          {Array.from(Array(numSlides)).map((el, index) => (\n            <span\n              key={`circle-${index}`}\n              className={cx(classes.dot, {\n                [classes.dotSelected]: index === selectedIndex,\n              })}\n            />\n          ))}\n        </div>\n      ) : (\n        <>\n          <HvButton\n            icon\n            disabled={!canPrevious}\n            aria-label=\"Backwards\"\n            onClick={onPreviousClick}\n          >\n            <Backwards iconSize=\"XS\" />\n          </HvButton>\n          <div className={classes.pageCounter}>\n            {`${selectedIndex + 1} / ${numSlides}`}\n          </div>\n          <HvButton\n            icon\n            disabled={!canNext}\n            aria-label=\"Forwards\"\n            onClick={onNextClick}\n          >\n            <Forwards iconSize=\"XS\" />\n          </HvButton>\n        </>\n      )}\n      {actions}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAuBa,MAAA,qBAAqB,CAAC,UAAmC;AAC9D,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,sBAAsB,KAAK;AAC/C,QAAM,EAAE,SAAS,GAAA,IAAO,WAAW,aAAa,KAAK;AAErD,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,YAAY;AAElB,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,UAAU,SAAS,GAC3C,UAAA;AAAA,IAAA,WACE,oBAAA,OAAA,EAAI,WAAW,QAAQ,MACrB,UAAM,MAAA,KAAK,MAAM,SAAS,CAAC,EAAE,IAAI,CAAC,IAAI,UACrC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,GAAG,QAAQ,KAAK;AAAA,UACzB,CAAC,QAAQ,WAAW,GAAG,UAAU;AAAA,QAAA,CAClC;AAAA,MAAA;AAAA,MAHI,UAAU,KAAK;AAAA,IAKvB,CAAA,EACH,CAAA,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,UAAU,CAAC;AAAA,UACX,cAAW;AAAA,UACX,SAAS;AAAA,UAET,UAAA,oBAAC,WAAU,EAAA,UAAS,KAAK,CAAA;AAAA,QAAA;AAAA,MAC3B;AAAA,MACA,oBAAC,OAAI,EAAA,WAAW,QAAQ,aACrB,aAAG,gBAAgB,CAAC,MAAM,SAAS,GACtC,CAAA;AAAA,MACA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAI;AAAA,UACJ,UAAU,CAAC;AAAA,UACX,cAAW;AAAA,UACX,SAAS;AAAA,UAET,UAAA,oBAAC,UAAS,EAAA,UAAS,KAAK,CAAA;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA,GACF;AAAA,IAED;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/Carousel/CarouselSlide/CarouselSlide.js

@@ -0,0 +1,28 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useClasses } from "./CarouselSlide.styles.js";
+const HvCarouselSlide = ({
+  classes: classesProp,
+  className,
+  children,
+  size: flexBasis = "100%",
+  src,
+  alt,
+  ...props
+}) => {
+  const { classes, css, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        css({ flex: `0 0 ${flexBasis}` }),
+        classes.slide,
+        className
+      ),
+      children: children ?? /* @__PURE__ */ jsx("img", { className: classes.image, src, alt, ...props })
+    }
+  );
+};
+export {
+  HvCarouselSlide
+};
+//# sourceMappingURL=CarouselSlide.js.map

package/dist/esm/Carousel/CarouselSlide/CarouselSlide.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselSlide.js","sources":["../../../../src/Carousel/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import { ImgHTMLAttributes } from \"react\";\n\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { useClasses } from \"./CarouselSlide.styles\";\n\nexport type HvCarouselSlideClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvCarouselSlideProps\n  extends ImgHTMLAttributes<HTMLImageElement> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvCarouselSlideClasses;\n  /** The width of the Slide. Defaults to `100%` */\n  size?: string;\n  /** Content of a slide to be displayed */\n  children?: React.ReactNode;\n}\n\n/**\n * A container to use as `children` of `HvCarousel`.\n * Pass `img` props directly to it, or `children` for any custom content\n */\nexport const HvCarouselSlide = ({\n  classes: classesProp,\n  className,\n  children,\n  size: flexBasis = \"100%\",\n  src,\n  alt,\n  ...props\n}: HvCarouselSlideProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  return (\n    <div\n      className={cx(\n        css({ flex: `0 0 ${flexBasis}` }),\n        classes.slide,\n        className\n      )}\n    >\n      {children ?? (\n        <img className={classes.image} src={src} alt={alt} {...props} />\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;AAsBO,MAAM,kBAAkB,CAAC;AAAA,EAC9B,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA,MAAM,YAAY;AAAA,EAClB;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA4B;AAC1B,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAEjD,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,IAAI,EAAE,MAAM,OAAO,SAAS,IAAI;AAAA,QAChC,QAAQ;AAAA,QACR;AAAA,MACF;AAAA,MAEC,UAAA,gCACE,OAAI,EAAA,WAAW,QAAQ,OAAO,KAAU,KAAW,GAAG,MAAO,CAAA;AAAA,IAAA;AAAA,EAAA;AAItE;"}

package/dist/esm/Carousel/CarouselSlide/CarouselSlide.styles.js

@@ -0,0 +1,14 @@
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvCarouselSlide", {
+  slide: {},
+  image: {
+    aspectRatio: "16/9",
+    width: "100%",
+    height: "100%"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=CarouselSlide.styles.js.map

package/dist/esm/Carousel/CarouselSlide/CarouselSlide.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselSlide.styles.js","sources":["../../../../src/Carousel/CarouselSlide/CarouselSlide.styles.ts"],"sourcesContent":["import { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCarouselSlide\", {\n  slide: {},\n  image: {\n    aspectRatio: \"16/9\",\n    width: \"100%\",\n    height: \"100%\",\n  },\n});\n"],"names":[],"mappings":";AAEO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,OAAO,CAAC;AAAA,EACR,OAAO;AAAA,IACL,aAAa;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AACF,CAAC;"}

package/dist/esm/Carousel/CarouselThumbnails.js

@@ -0,0 +1,40 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { useClasses } from "./Carousel.styles.js";
+import { HvStack } from "../Stack/Stack.js";
+import { HvButton } from "../Button/Button.js";
+const HvCarouselThumbnails = forwardRef((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}`
+  )) }) });
+});
+export {
+  HvCarouselThumbnails
+};
+//# sourceMappingURL=CarouselThumbnails.js.map

package/dist/esm/Carousel/CarouselThumbnails.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselThumbnails.js","sources":["../../../src/Carousel/CarouselThumbnails.tsx"],"sourcesContent":["import { CSSProperties, MouseEvent, forwardRef } from \"react\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvPaginationProps } from \"../Pagination\";\nimport { HvStack } from \"../Stack\";\nimport { HvButton, HvButtonProps } from \"../Button\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { useClasses } from \"./Carousel.styles\";\n\ninterface HvCarouselThumbnailsProps\n  extends HvBaseProps<HTMLDivElement, \"children\">,\n    Pick<HvPaginationProps, \"page\" | \"pages\" | \"canPrevious\" | \"canNext\"> {\n  width?: CSSProperties[\"width\"];\n  classes?: ExtractNames<typeof useClasses>;\n  onThumbnailClick?: (\n    event: MouseEvent<HTMLButtonElement>,\n    index: number\n  ) => void;\n  thumbnailProps?: Partial<HvButtonProps>;\n  showDots?: boolean;\n  renderThumbnail?: (index: number) => React.ReactNode;\n}\n\nexport const HvCarouselThumbnails = forwardRef<\n  HTMLDivElement,\n  HvCarouselThumbnailsProps\n>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    page,\n    pages,\n    width,\n    renderThumbnail,\n    onThumbnailClick,\n    thumbnailProps,\n    ...others\n  } = props;\n  const { classes, cx } = useClasses(classesProp);\n\n  const selectedIndex = page || 0;\n  const numSlides = pages;\n\n  return (\n    <div ref={ref} className={cx(classes.panel, className)} {...others}>\n      <HvStack direction=\"row\" spacing=\"xs\">\n        {Array.from(Array(numSlides)).map((doc, i) => (\n          <HvButton\n            icon\n            key={`thumbnail-${i}`}\n            style={{ width }}\n            variant=\"secondaryGhost\"\n            className={cx(classes.thumbnail, {\n              [classes.thumbnailSelected]: i === selectedIndex,\n            })}\n            onClick={(event) => onThumbnailClick?.(event, i)}\n            {...thumbnailProps}\n          >\n            {renderThumbnail?.(i)}\n          </HvButton>\n        ))}\n      </HvStack>\n    </div>\n  );\n});\n"],"names":[],"mappings":";;;;;AAwBO,MAAM,uBAAuB,WAGlC,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACD,IAAA;AACJ,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,gBAAgB,QAAQ;AAC9B,QAAM,YAAY;AAGhB,SAAA,oBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,OAAO,SAAS,GAAI,GAAG,QAC1D,UAAC,oBAAA,SAAA,EAAQ,WAAU,OAAM,SAAQ,MAC9B,UAAA,MAAM,KAAK,MAAM,SAAS,CAAC,EAAE,IAAI,CAAC,KAAK,MACtC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAI;AAAA,MAEJ,OAAO,EAAE,MAAM;AAAA,MACf,SAAQ;AAAA,MACR,WAAW,GAAG,QAAQ,WAAW;AAAA,QAC/B,CAAC,QAAQ,iBAAiB,GAAG,MAAM;AAAA,MAAA,CACpC;AAAA,MACD,SAAS,CAAC,UAAU,mBAAmB,OAAO,CAAC;AAAA,MAC9C,GAAG;AAAA,MAEH,4BAAkB,CAAC;AAAA,IAAA;AAAA,IATf,aAAa,CAAC;AAAA,EAAA,CAWtB,GACH,EACF,CAAA;AAEJ,CAAC;"}