npm - @hitachivantara/uikit-react-core - Versions diffs - 5.7.5 → 5.8.1 - Mend

@hitachivantara/uikit-react-core 5.7.5 → 5.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/dist/esm/components/Carousel/Carousel.js ADDED Viewed

@@ -0,0 +1,228 @@
+import { useRef, useState, Children, useEffect } from "react";
+import useCarousel from "embla-carousel-react";
+import { ClassNames } from "@emotion/react";
+import { Close, Fullscreen, Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
+import newStyles, { carouselClasses } from "./Carousel.styles.js";
+import { makeClasses } from "./utils.js";
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { HvContainer } from "../Container/Container.js";
+import { HvStack } from "../Stack/Stack.js";
+import { HvTypography } from "../Typography/Typography.js";
+import { HvButton } from "../Button/Button.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,
+    xs,
+    showDots: showDotsProp,
+    showCounter: showCounterProp,
+    showSlideControls,
+    showFullscreen: showFullscreenProp,
+    hideThumbnails: hideThumbnailsProp,
+    carouselOptions,
+    renderThumbnail,
+    onChange,
+    ...others
+  } = props;
+  const thumbnailsRef = useRef(null);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [containerRef, controller] = useCarousel({
+    align: "start",
+    loop: true,
+    ...carouselOptions
+  });
+  const [selectedIndex, setSelectedIndex] = useState((carouselOptions == null ? void 0 : carouselOptions.startIndex) ?? 0);
+  const numSlides = Children.count(children);
+  const handlePrevious = () => {
+    controller == null ? void 0 : controller.scrollPrev();
+  };
+  const handleNext = () => {
+    controller == null ? void 0 : controller.scrollNext();
+  };
+  const handleScroll = (index) => {
+    controller == null ? void 0 : controller.scrollTo(index);
+  };
+  const handleSelect = () => {
+    var _a, _b, _c;
+    if (!controller)
+      return;
+    const slideIndex = controller.selectedScrollSnap();
+    setSelectedIndex(slideIndex);
+    (_c = (_b = (_a = thumbnailsRef.current) == null ? void 0 : _a.querySelectorAll("button")) == null ? void 0 : _b[slideIndex]) == null ? void 0 : _c.scrollIntoView({
+      behavior: "smooth",
+      block: "nearest"
+    });
+    onChange == null ? void 0 : onChange(slideIndex);
+  };
+  useEffect(() => {
+    if (!controller)
+      return;
+    controller.on("select", handleSelect);
+    return () => {
+      controller.off("select", handleSelect);
+    };
+  }, [controller]);
+  useEffect(() => {
+    if (!controller)
+      return;
+    controller.reInit();
+    setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));
+  }, [numSlides]);
+  const canPrev = (controller == null ? void 0 : controller.canScrollPrev()) ?? false;
+  const canNext = (controller == null ? void 0 : 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;
+  return /* @__PURE__ */ jsx(ClassNames, {
+    children: ({
+      css,
+      cx
+    }) => {
+      const classes = makeClasses({
+        css,
+        cx
+      }, {
+        cc: carouselClasses,
+        styles: newStyles,
+        classes: classesProp
+      });
+      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
+        }), /* @__PURE__ */ jsxs("div", {
+          className: classes.actions,
+          children: [showFullscreen && /* @__PURE__ */ jsx(HvButton, {
+            icon: true,
+            variant: "secondaryGhost",
+            onClick: () => setIsFullscreen((curr) => !curr),
+            className: classes.closeButton,
+            children: isFullscreen ? /* @__PURE__ */ jsx(Close, {
+              "aria-label": "Close"
+            }) : /* @__PURE__ */ jsx(Fullscreen, {
+              "aria-label": "Fullscreen"
+            })
+          }), actions]
+        }), /* @__PURE__ */ jsxs("div", {
+          className: classes.mainContainer,
+          children: [/* @__PURE__ */ jsx("div", {
+            className: classes.controls,
+            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: !canPrev,
+                variant: "secondaryGhost",
+                "aria-label": "Backwards",
+                onClick: handlePrevious,
+                children: /* @__PURE__ */ jsx(Backwards, {
+                  iconSize: "XS"
+                })
+              }), /* @__PURE__ */ jsx("div", {
+                className: classes.pageCounter,
+                children: `${selectedIndex + 1} / ${numSlides}`
+              }), /* @__PURE__ */ jsx(HvButton, {
+                icon: true,
+                disabled: !canNext,
+                variant: "secondaryGhost",
+                "aria-label": "Forwards",
+                onClick: handleNext,
+                children: /* @__PURE__ */ jsx(Forwards, {
+                  iconSize: "XS"
+                })
+              })]
+            })
+          }), /* @__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: "secondary",
+                "aria-label": "Backwards",
+                onClick: handlePrevious,
+                children: /* @__PURE__ */ jsx(Backwards, {
+                  iconSize: "XS"
+                })
+              }), /* @__PURE__ */ jsx(HvButton, {
+                icon: true,
+                disabled: !canNext,
+                variant: "secondary",
+                "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
+              })
+            })]
+          })]
+        }), showThumbnails && /* @__PURE__ */ jsx("div", {
+          ref: thumbnailsRef,
+          className: classes.panel,
+          children: /* @__PURE__ */ jsx(HvStack, {
+            direction: "row",
+            spacing: "xs",
+            children: Array.from(Array(numSlides)).map((doc, i) => /* @__PURE__ */ jsx(HvButton, {
+              icon: true,
+              variant: "secondaryGhost",
+              style: {
+                width: thumbnailWidth
+              },
+              className: cx(classes.thumbnail, {
+                [classes.thumbnailSelected]: i === selectedIndex
+              }),
+              onClick: () => handleScroll(i),
+              children: renderThumbnail(i)
+            }, `button-${i}`))
+          })
+        })]
+      });
+    }
+  });
+};
+export {
+  HvCarousel
+};
+//# sourceMappingURL=Carousel.js.map

package/dist/esm/components/Carousel/Carousel.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Carousel.js","sources":["../../../../src/components/Carousel/Carousel.tsx"],"sourcesContent":["import React, {\n CSSProperties,\n Children,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport useCarousel, { EmblaOptionsType } from \"embla-carousel-react\";\nimport { ClassNames } from \"@emotion/react\";\nimport {\n Backwards,\n Forwards,\n Close,\n Fullscreen,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { HvButton, HvContainer, HvStack, HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\n\nimport styles, {\n HvCarouselClasses,\n carouselClasses as cc,\n} from \"./Carousel.styles\";\nimport { makeClasses } from \"./utils\";\n\nconst clamp = (num: number, max: number, min = 0) =>\n Math.min(Math.max(num, min), max);\n\nexport interface HvCarouselProps\n extends HvBaseProps<HTMLDivElement, \"title\" | \"onChange\"> {\n /** A Jss Object used to override or extend the styles applied. */\n classes?: Partial<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 /** Carousel configuration options. @see https://www.embla-carousel.com/api/options/ */\n carouselOptions?: EmblaOptionsType;\n /** */\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,\n xs,\n showDots: showDotsProp,\n showCounter: showCounterProp,\n showSlideControls,\n showFullscreen: showFullscreenProp,\n hideThumbnails: hideThumbnailsProp,\n carouselOptions,\n renderThumbnail,\n onChange,\n ...others\n } = props;\n const thumbnailsRef = useRef<HTMLDivElement>(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\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 = () => {\n controller?.scrollPrev();\n };\n\n const handleNext = () => {\n controller?.scrollNext();\n };\n\n const handleScroll = (index: number) => {\n controller?.scrollTo(index);\n };\n\n const handleSelect = () => {\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 };\n\n useEffect(() => {\n if (!controller) return;\n\n controller.on(\"select\", handleSelect);\n\n return () => {\n controller.off(\"select\", handleSelect);\n };\n }, [controller]);\n\n useEffect(() => {\n if (!controller) return;\n\n controller.reInit();\n setSelectedIndex((currentIndex) => clamp(currentIndex, numSlides, 0));\n }, [numSlides]);\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 return (\n <ClassNames>\n {({ css, cx }) => {\n const classes = makeClasses(\n { css, cx },\n { cc, styles, classes: classesProp }\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 <div className={classes.actions}>\n {showFullscreen && (\n <HvButton\n icon\n variant=\"secondaryGhost\"\n onClick={() => setIsFullscreen((curr) => !curr)}\n className={classes.closeButton}\n >\n {isFullscreen ? (\n <Close aria-label=\"Close\" />\n ) : (\n <Fullscreen aria-label=\"Fullscreen\" />\n )}\n </HvButton>\n )}\n {actions}\n </div>\n\n <div className={classes.mainContainer}>\n <div className={classes.controls}>\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={!canPrev}\n variant=\"secondaryGhost\"\n aria-label=\"Backwards\"\n onClick={handlePrevious}\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 variant=\"secondaryGhost\"\n aria-label=\"Forwards\"\n onClick={handleNext}\n >\n <Forwards iconSize=\"XS\" />\n </HvButton>\n </>\n )}\n </div>\n\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=\"secondary\"\n aria-label=\"Backwards\"\n onClick={handlePrevious}\n >\n <Backwards iconSize=\"XS\" />\n </HvButton>\n <HvButton\n icon\n disabled={!canNext}\n variant=\"secondary\"\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 </div>\n\n {showThumbnails && (\n <div ref={thumbnailsRef} className={classes.panel}>\n <HvStack direction=\"row\" spacing=\"xs\">\n {Array.from(Array(numSlides)).map((doc, i) => (\n <HvButton\n icon\n variant=\"secondaryGhost\"\n key={`button-${i}`}\n style={{ width: thumbnailWidth }}\n className={cx(classes.thumbnail, {\n [classes.thumbnailSelected]: i === selectedIndex,\n })}\n onClick={() => handleScroll(i)}\n >\n {renderThumbnail(i)}\n </HvButton>\n ))}\n </HvStack>\n </div>\n )}\n </HvContainer>\n );\n }}\n </ClassNames>\n );\n};\n"],"names":["clamp","num","max","min","Math","HvCarousel","props","className","classes","classesProp","height","heightProp","thumbnailWidth","title","children","actions","xs","showDots","showDotsProp","showCounter","showCounterProp","showSlideControls","showFullscreen","showFullscreenProp","hideThumbnails","hideThumbnailsProp","carouselOptions","renderThumbnail","onChange","others","thumbnailsRef","useRef","isFullscreen","setIsFullscreen","useState","containerRef","controller","useCarousel","align","loop","selectedIndex","setSelectedIndex","startIndex","numSlides","Children","count","handlePrevious","scrollPrev","handleNext","scrollNext","handleScroll","index","scrollTo","handleSelect","slideIndex","selectedScrollSnap","current","querySelectorAll","scrollIntoView","behavior","block","useEffect","on","off","reInit","currentIndex","canPrev","canScrollPrev","canNext","canScrollNext","showTitle","showThumbnails","ClassNames","css","cx","makeClasses","cc","styles","HvContainer","root","fullscreen","_jsx","HvTypography","variant","_jsxs","HvButton","icon","onClick","curr","closeButton","Close","Fullscreen","mainContainer","controls","dots","Array","from","map","el","dot","dotSelected","_Fragment","disabled","Backwards","iconSize","pageCounter","Forwards","main","mainXs","mainFullscreen","counterContainer","counter","slideControls","ref","style","slidesViewport","slidesContainer","panel","HvStack","direction","spacing","doc","i","width","thumbnail","thumbnailSelected"],"mappings":"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"}

package/dist/esm/components/Carousel/Carousel.styles.js ADDED Viewed

@@ -0,0 +1,177 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { replace$ } from "./utils.js";
+import { getClasses } from "../../utils/classes.js";
+const styles = {
+  /** 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: theme.carousel.xsControlsDisplay
+    }
+  },
+  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",
+    height: 0,
+    zIndex: 1,
+    position: "relative",
+    top: theme.carousel.actionsOffsetTop
+  },
+  closeButton: {},
+  mainContainer: {
+    display: "flex",
+    flexDirection: theme.carousel.mainContainerFlexDirection
+  },
+  controls: {
+    display: "flex",
+    alignItems: "center",
+    height: 32,
+    justifyContent: theme.carousel.controlsJustifyContent,
+    backgroundColor: theme.carousel.controlsBackgroundColor,
+    border: theme.carousel.controlsBorder,
+    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: theme.carousel.counterContainerDisplay
+  },
+  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.carousel.thumbnailBorderRadius
+    }
+  },
+  thumbnailSelected: {
+    "& img": {
+      border: theme.carousel.thumbnailSelectedBorder,
+      opacity: "100%"
+    }
+  }
+};
+const name = "HvCarousel";
+const carouselClasses = getClasses(Object.keys(styles), name);
+const newStyles = replace$(styles, name);
+export {
+  carouselClasses,
+  newStyles as default
+};
+//# sourceMappingURL=Carousel.styles.js.map

package/dist/esm/components/Carousel/Carousel.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Carousel.styles.js","sources":["../../../../src/components/Carousel/Carousel.styles.ts"],"sourcesContent":["import { CSSProperties } from \"react\";\nimport { CSSInterpolation } from \"@emotion/css\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { getClasses } from \"@core/utils\";\nimport { replace$ } from \"./utils\";\n\nexport type HvCarouselClasses = Record<keyof typeof styles, string>;\n\nconst styles = {\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: theme.carousel.xsControlsDisplay,\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 height: 0,\n zIndex: 1,\n\n position: \"relative\",\n top: theme.carousel.actionsOffsetTop,\n },\n closeButton: {},\n\n mainContainer: {\n display: \"flex\",\n flexDirection: theme.carousel\n .mainContainerFlexDirection as CSSProperties[\"flexDirection\"],\n },\n\n controls: {\n display: \"flex\",\n alignItems: \"center\",\n height: 32,\n justifyContent: theme.carousel.controlsJustifyContent,\n backgroundColor: theme.carousel.controlsBackgroundColor,\n border: theme.carousel.controlsBorder,\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: theme.carousel.counterContainerDisplay,\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.carousel.thumbnailBorderRadius,\n },\n },\n thumbnailSelected: {\n \"& img\": {\n border: theme.carousel.thumbnailSelectedBorder,\n opacity: \"100%\",\n },\n },\n} satisfies Record<string, CSSInterpolation>;\n\nconst name = \"HvCarousel\";\n\nexport const carouselClasses = getClasses(\n Object.keys(styles) as (keyof HvCarouselClasses)[],\n name\n);\n\nconst newStyles = replace$(styles, name);\n\nexport default newStyles;\n"],"names":["styles","root","display","alignItems","flexDirection","backgroundColor","theme","colors","atmo1","margin","paddingTop","spacing","paddingBottom","xs","padding","position","top","carousel","xsControlsDisplay","fullscreen","width","height","inset","zIndex","zIndices","modal","title","justifyContent","marginBottom","space","actions","actionsOffsetTop","closeButton","mainContainer","mainContainerFlexDirection","controls","controlsJustifyContent","controlsBackgroundColor","border","controlsBorder","gap","pageCounter","main","opacity","mainXs","mainFullscreen","maxHeight","counterContainer","right","md","counterContainerDisplay","counter","color","base_light","base_dark","slideControls","left","slidesViewport","overflow","slidesContainer","dots","dotsXs","dot","borderRadius","atmo4","dotSelected","secondary_80","panel","overflowX","overflowY","thumbnail","textAlign","aspectRatio","thumbnailBorderRadius","thumbnailSelected","thumbnailSelectedBorder","name","carouselClasses","getClasses","Object","keys","newStyles","replace$"],"mappings":"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"}

package/dist/esm/components/Carousel/CarouselSlide/CarouselSlide.js ADDED Viewed

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

package/dist/esm/components/Carousel/CarouselSlide/CarouselSlide.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CarouselSlide.js","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.tsx"],"sourcesContent":["import { ImgHTMLAttributes } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\n\nimport styles, { HvCarouselSlideClasses, cc } from \"./CarouselSlide.styles\";\nimport { makeClasses } from \"../utils\";\n\nexport interface HvCarouselSlideProps\n extends ImgHTMLAttributes<HTMLImageElement> {\n /** A Jss Object used to override or extend the styles applied. */\n classes?: Partial<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 children,\n size: flexBasis = \"100%\",\n src,\n alt,\n ...props\n}: HvCarouselSlideProps) => {\n return (\n <ClassNames>\n {({ css, cx }) => {\n const classes = makeClasses(\n { css, cx },\n { cc, styles, classes: classesProp }\n );\n\n return (\n <div className={cx(css({ flex: `0 0 ${flexBasis}` }), classes.slide)}>\n {children ?? (\n <img className={classes.image} src={src} alt={alt} {...props} />\n )}\n </div>\n );\n }}\n </ClassNames>\n );\n};\n"],"names":["HvCarouselSlide","classes","classesProp","children","size","flexBasis","src","alt","props","ClassNames","css","cx","makeClasses","cc","styles","className","flex","slide","_jsx","image"],"mappings":";;;;AAoBO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAASC,cAAc,CAAC;AAAA,EACxBC;AAAAA,EACAC,MAAMC,YAAY;AAAA,EAClBC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACiB,MAAM;AAC1B,6BACGC,YAAU;AAAA,IAAAN,UACRA,CAAC;AAAA,MAAEO;AAAAA,MAAKC;AAAAA,IAAAA,MAAS;AAChB,YAAMV,UAAUW,YACd;AAAA,QAAEF;AAAAA,QAAKC;AAAAA,MAAAA,GACP;AAAA,QAAEE;AAAAA,QAAIC;AAAAA,QAAQb,SAASC;AAAAA,MAAAA,CAAa;AAGtC,iCACE,OAAA;AAAA,QAAKa,WAAWJ,GAAGD,IAAI;AAAA,UAAEM,MAAO,OAAMX;AAAAA,QAAAA,CAAa,GAAGJ,QAAQgB,KAAK;AAAA,QAAEd,UAClEA,YACCe,oBAAA,OAAA;AAAA,UAAKH,WAAWd,QAAQkB;AAAAA,UAAOb;AAAAA,UAAUC;AAAAA,UAAS,GAAKC;AAAAA,QAAAA,CAAK;AAAA,MAAA,CAE1D;AAAA,IAEV;AAAA,EAAA,CACW;AAEjB;"}

package/dist/esm/components/Carousel/CarouselSlide/CarouselSlide.styles.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { getClasses } from "../../../utils/classes.js";
+const styles = {
+  slide: {},
+  image: {
+    aspectRatio: "16/9",
+    width: "100%",
+    height: "100%"
+  }
+};
+const cc = getClasses(Object.keys(styles), "HvCarouselSlide");
+export {
+  cc,
+  styles as default
+};
+//# sourceMappingURL=CarouselSlide.styles.js.map

package/dist/esm/components/Carousel/CarouselSlide/CarouselSlide.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CarouselSlide.styles.js","sources":["../../../../../src/components/Carousel/CarouselSlide/CarouselSlide.styles.ts"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/css\";\nimport { getClasses } from \"@core/utils\";\n\nexport type HvCarouselSlideClasses = Record<keyof typeof styles, string>;\n\nconst styles = {\n slide: {},\n image: {\n aspectRatio: \"16/9\",\n width: \"100%\",\n height: \"100%\",\n },\n} satisfies Record<string, CSSInterpolation>;\n\nexport const cc = getClasses(\n Object.keys(styles) as (keyof HvCarouselSlideClasses)[],\n \"HvCarouselSlide\"\n);\n\nexport default styles;\n"],"names":["styles","slide","image","aspectRatio","width","height","cc","getClasses","Object","keys"],"mappings":";AAKA,MAAMA,SAAS;AAAA,EACbC,OAAO,CAAC;AAAA,EACRC,OAAO;AAAA,IACLC,aAAa;AAAA,IACbC,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AACF;AAEO,MAAMC,KAAKC,WAChBC,OAAOC,KAAKT,MAAM,GAClB,iBAAiB;"}

package/dist/esm/components/Carousel/utils.js ADDED Viewed

@@ -0,0 +1,36 @@
+const makeClasses = ({
+  css,
+  cx
+}, {
+  cc,
+  classes,
+  styles
+}) => Object.keys(cc).reduce((acc, key) => {
+  acc[key] = cx(cc == null ? void 0 : cc[key], css(styles == null ? void 0 : styles[key]), classes == null ? void 0 : classes[key]);
+  return acc;
+}, {});
+const deepRename = (obj, mapFn) => {
+  const result = {};
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      const newKey = mapFn(key);
+      const value = obj[key];
+      result[newKey] = typeof value === "object" ? deepRename(value, mapFn) : value;
+    }
+  }
+  return result;
+};
+const replace$ = (stylesObj, name) => {
+  return deepRename(stylesObj, (key) => {
+    const matches = key.match(/\$\w+/g);
+    if (!(matches == null ? void 0 : matches.length))
+      return key;
+    const newKey = matches.reduce((acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`), key);
+    return newKey ?? key;
+  });
+};
+export {
+  makeClasses,
+  replace$
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/Carousel/utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"utils.js","sources":["../../../../src/components/Carousel/utils.ts"],"sourcesContent":["import type { CSSInterpolation } from \"@emotion/css\";\nimport type { ClassNamesContent } from \"@emotion/react\";\n\ntype ClassObject<T extends string> = {\n cc: Record<T, string>;\n classes: Partial<Record<T, string>>;\n styles: Record<T, CSSInterpolation>;\n};\n\nexport const makeClasses = <T extends string>(\n { css, cx }: Pick<ClassNamesContent, \"css\" | \"cx\">,\n { cc, classes, styles }: ClassObject<T>\n) =>\n Object.keys(cc).reduce((acc, key) => {\n acc[key] = cx(cc?.[key], css(styles?.[key]), classes?.[key]);\n return acc;\n }, {} as { [P in T]: string });\n\nconst deepRename = <T extends object>(\n obj: T,\n mapFn: (key: string) => string\n): T => {\n const result: any = {};\n for (const key in obj) {\n if (obj.hasOwnProperty(key)) {\n const newKey = mapFn(key);\n const value = obj[key];\n result[newKey] =\n typeof value === \"object\" ? deepRename(value as any, mapFn) : value;\n }\n }\n return result;\n};\n\n/** Given a `stylesObj`, replaces its keys' `$myClass` with `.{name}-myClass` */\nexport const replace$ = <T extends object>(stylesObj: T, name: string): T => {\n return deepRename(stylesObj, (key) => {\n const matches = key.match(/\\$\\w+/g);\n if (!matches?.length) return key;\n const newKey = matches.reduce(\n (acc, match) => acc.replace(match, `.${name}-${match.slice(1)}`),\n key\n );\n return newKey ?? key;\n });\n};\n"],"names":["makeClasses","css","cx","cc","classes","styles","Object","keys","reduce","acc","key","deepRename","obj","mapFn","result","hasOwnProperty","newKey","value","replace$","stylesObj","name","matches","match","length","replace","slice"],"mappings":"AASO,MAAMA,cAAc,CACzB;AAAA,EAAEC;AAAAA,EAAKC;AAA0C,GACjD;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAASC;AAAuB,MAEtCC,OAAOC,KAAKJ,EAAE,EAAEK,OAAO,CAACC,KAAKC,QAAQ;AACnCD,MAAIC,GAAG,IAAIR,GAAGC,yBAAKO,MAAMT,IAAII,iCAASK,IAAI,GAAGN,mCAAUM,IAAI;AACpDD,SAAAA;AACT,GAAG,EAA2B;AAEhC,MAAME,aAAa,CACjBC,KACAC,UACM;AACN,QAAMC,SAAc,CAAA;AACpB,aAAWJ,OAAOE,KAAK;AACjBA,QAAAA,IAAIG,eAAeL,GAAG,GAAG;AACrBM,YAAAA,SAASH,MAAMH,GAAG;AAClBO,YAAAA,QAAQL,IAAIF,GAAG;AACdM,aAAAA,MAAM,IACX,OAAOC,UAAU,WAAWN,WAAWM,OAAcJ,KAAK,IAAII;AAAAA,IAClE;AAAA,EACF;AACOH,SAAAA;AACT;AAGaI,MAAAA,WAAW,CAAmBC,WAAcC,SAAoB;AACpET,SAAAA,WAAWQ,WAAYT,CAAQ,QAAA;AAC9BW,UAAAA,UAAUX,IAAIY,MAAM,QAAQ;AAClC,QAAI,EAACD,mCAASE;AAAeb,aAAAA;AAC7B,UAAMM,SAASK,QAAQb,OACrB,CAACC,KAAKa,UAAUb,IAAIe,QAAQF,OAAQ,IAAGF,QAAQE,MAAMG,MAAM,CAAC,GAAG,GAC/Df,GAAG;AAEL,WAAOM,UAAUN;AAAAA,EAAAA,CAClB;AACH;"}