@alto-avios/alto-ui 3.8.0 → 4.0.0

package/dist/components/Carousel/AutoplayControl/AutoplayControl.js

@@ -0,0 +1,115 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { f as CarouselAutoplayControl, i as iconButtonStyles } from "../../../IconButton.module-4obqG6tY.js";
+import { useFocusRing } from "@react-aria/focus";
+import { Icon } from "../../Icon/Icon.js";
+import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
+import '../../../assets/AutoplayControl.css';const autoplayControl = "_autoplayControl_kk1sb_1";
+const iconButton = "_iconButton_kk1sb_17";
+const sizeMd = "_sizeMd_kk1sb_25";
+const sizeSm = "_sizeSm_kk1sb_31";
+const neutralVibrant = "_neutralVibrant_kk1sb_38";
+const whiteVibrant = "_whiteVibrant_kk1sb_44";
+const neutralSubtle = "_neutralSubtle_kk1sb_55";
+const whiteSubtle = "_whiteSubtle_kk1sb_61";
+const styles = {
+  autoplayControl,
+  iconButton,
+  sizeMd,
+  sizeSm,
+  neutralVibrant,
+  whiteVibrant,
+  neutralSubtle,
+  whiteSubtle
+};
+const AutoplayControl = ({
+  variant = "neutralVibrant",
+  size = "md",
+  focusStyle = "default",
+  className = "",
+  buttonClassName = ""
+}) => {
+  const {
+    isFocusVisible,
+    focusProps,
+    isFocused
+  } = useFocusRing();
+  const [isHovered, setIsHovered] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
+  const variantClass = styles[variant] || "";
+  const iconSize = size === "md" ? "1.25x" : "1x";
+  const getIconColor = () => {
+    switch (variant) {
+      case "whiteVibrant":
+        return "whiteOnVibrant";
+      case "whiteSubtle":
+        return "whiteOnSubtle";
+      case "neutralVibrant":
+        return "inverseOnVibrant";
+      case "neutralSubtle":
+        return "inverseOnSubtle";
+      default:
+        return "whiteOnVibrant";
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      setIsPressed(true);
+    }
+  };
+  const handleKeyUp = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+      setIsPressed(false);
+    }
+  };
+  const getTitle = (autoplayUserPreference) => {
+    return autoplayUserPreference ? "Pause slideshow" : "Start slideshow";
+  };
+  return /* @__PURE__ */ jsx(
+    CarouselAutoplayControl,
+    {
+      className: `${styles.autoplayControl} ${styles[`size${size.toUpperCase()}`]} ${variantClass} ${className || ""}`,
+      ...focusProps,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => {
+        setIsHovered(false);
+        setIsPressed(false);
+      },
+      onMouseDown: () => setIsPressed(true),
+      onMouseUp: () => setIsPressed(false),
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp,
+      "data-hovered": isHovered ? true : void 0,
+      "data-pressed": isPressed ? true : void 0,
+      "data-focused": isFocused ? true : void 0,
+      "data-size": size,
+      tabIndex: 0,
+      role: "button",
+      children: ({
+        autoplayUserPreference
+      }) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `${styles.iconButton} ${iconButtonStyles.iconButton} ${iconButtonStyles[size] || ""} ${focusStyleVariants({
+            focusStyle
+          })} ${buttonClassName || ""}`,
+          "data-focused": isFocused ? true : void 0,
+          "data-focus-visible": isFocusVisible ? true : void 0,
+          "data-parent-hovered": isHovered ? true : void 0,
+          "data-parent-pressed": isPressed ? true : void 0,
+          "data-size": size,
+          "aria-hidden": "true",
+          title: getTitle(autoplayUserPreference),
+          children: /* @__PURE__ */ jsx(Icon, { iconPrefix: "fas", iconName: autoplayUserPreference ? "pause" : "play", color: getIconColor(), iconSize, "aria-hidden": "true" })
+        }
+      )
+    }
+  );
+};
+export {
+  AutoplayControl,
+  AutoplayControl as default
+};
+//# sourceMappingURL=AutoplayControl.js.map

package/dist/components/Carousel/AutoplayControl/AutoplayControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutoplayControl.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Carousel/Carousel.d.ts

@@ -0,0 +1,171 @@
+import { default as React } from 'react';
+import { WithResponsive } from '../../utils/breakpoint/responsive';
+export interface CarouselBaseProps {
+    /**
+     * Content to be displayed in the carousel
+     */
+    children?: React.ReactNode | React.ReactNode[];
+    /**
+     * Accessible name for the carousel
+     * Describes the purpose or content of the carousel for screen readers
+     * @example "Featured products" or "Customer testimonials"
+     */
+    'aria-label'?: string;
+    /**
+     * ID of an element that provides additional description for the carousel
+     * Can reference an element that gives more context about the carousel's content
+     * @example "carousel-description"
+     */
+    'aria-describedby'?: string;
+    /**
+     * Looping behavior
+     * - 'infinite': Carousel loops continuously
+     * - 'backToStart': Carousel loops back to start after reaching end
+     * - 'off': Looping is disabled
+     * @default 'off'
+     */
+    looping?: 'infinite' | 'backToStart' | 'off';
+    /**
+     * Number of items to display per page (minimum: 1)
+     * Decimal values (e.g., 2.25) can be used to show partial items
+     * @default 1
+     * @min 1
+     */
+    itemsPerPage?: number;
+    /**
+     * Space between carousel items in pixels
+     * @default 0
+     */
+    spaceBetweenItems?: number;
+    /**
+     * Amount of padding added to the scroll container to create a "peek" effect.
+     * This shows a portion of the adjacent items.
+     * Accepts any valid CSS dimension (px, rem, em, %) - e.g., "15%", "20px", "2rem"
+     * @example "15%" or "20px" or "2rem"
+     * @default undefined
+     */
+    scrollPadding?: string;
+    /**
+     * Icon type for navigation buttons
+     * @default 'chevron'
+     */
+    iconType?: 'chevron';
+    /**
+     * Style of carousel arrow buttons
+     * @default 'neutral'
+     */
+    arrowStyleVariant?: 'neutral' | 'white' | 'shapeFlat' | 'shapeElevated' | 'gradient';
+    /**
+     * Size of navigation buttons
+     * @default 'md'
+     */
+    arrowSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether to hide navigation buttons when disabled
+     * Note: Navigation buttons are automatically hidden when all items fit on one page
+     * @default false
+     */
+    hideDisabledArrow?: boolean;
+    /**
+     * Whether to show arrows only when hovering over the carousel or when it has focus
+     * @default false
+     */
+    showArrowsOnHover?: boolean;
+    /**
+     * Focus style for interactive elements
+     * @default 'default'
+     */
+    focusStyle?: 'default' | 'white';
+    /**
+     * Size of pagination dots
+     * @default 'md'
+     */
+    dotsSize?: 'md' | 'lg';
+    /**
+     * Visual style of pagination dots
+     * @default 'standard'
+     */
+    dotsVariant?: 'standard' | 'transparent';
+    /**
+     * Whether to hide pagination dots
+     * Note: Dots are automatically hidden when there's only one page
+     * @default false
+     */
+    hideDots?: boolean;
+    /**
+     * Whether the autoplay is enabled
+     * @default false
+     */
+    autoPlay?: boolean;
+    /**
+     * Interval in milliseconds between slides during autoplay
+     * @default 2000
+     */
+    autoPlayInterval?: number;
+    /**
+     * Style variant for autoplay control button
+     * @default 'neutralVibrant'
+     */
+    autoPlayStyleVariant?: 'neutralVibrant' | 'neutralSubtle' | 'whiteVibrant' | 'whiteSubtle';
+    /**
+     * Size of autoplay control button
+     * @default 'md'
+     */
+    autoPlayControlSize?: 'sm' | 'md';
+    /**
+     * Whether to enable mouse dragging for the carousel
+     * @default true
+     */
+    mouseDragging?: boolean;
+    /**
+     * Class name for the outermost wrapper of the carousel
+     */
+    carouselWrapperClassName?: string;
+    /**
+     * Class name for the previous button
+     * Use this to position the previous button
+     */
+    prevArrowClassName?: string;
+    /**
+     * Class name for the next button
+     * Use this to position the next button
+     */
+    nextArrowClassName?: string;
+    /**
+     * Class name for the autoplay control
+     * Use this to position the autoplay button
+     */
+    autoplayControlClassName?: string;
+    /**
+     * Class name for the dots container
+     * Use this to position the pagination dots
+     */
+    dotsContainerClassName?: string;
+    /**
+     * Class name for the dots wrapper
+     * Use this to style the dots wrapper
+     */
+    dotsWrapperClassName?: string;
+    /**
+     * Class name for individual dots
+     */
+    dotClassName?: string;
+    /**
+     * Class name for the active dot
+     */
+    activeDotClassName?: string;
+    /**
+     * Class name for individual carousel item wrappers
+     * Use this to style the wrapper div around each carousel item
+     */
+    itemWrapperClassName?: string;
+    /**
+     * Class name for the currently active/visible carousel item
+     * This class is applied to the item that corresponds to the current page
+     */
+    activeItemClassName?: string;
+}
+type ResponsiveKeys = 'itemsPerPage' | 'spaceBetweenItems' | 'scrollPadding' | 'showArrowsOnHover' | 'arrowSize' | 'hideDots';
+export type CarouselProps = WithResponsive<CarouselBaseProps, ResponsiveKeys>;
+export declare const Carousel: ({ children, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, looping, itemsPerPage, spaceBetweenItems, scrollPadding, iconType, arrowStyleVariant, arrowSize, hideDisabledArrow, showArrowsOnHover, focusStyle, dotsSize, dotsVariant, hideDots, autoPlay, autoPlayInterval, autoPlayStyleVariant, autoPlayControlSize, mouseDragging, carouselWrapperClassName, prevArrowClassName, nextArrowClassName, autoplayControlClassName, dotsContainerClassName, dotsWrapperClassName, dotClassName, activeDotClassName, itemWrapperClassName, activeItemClassName, }: CarouselProps) => import("react/jsx-runtime").JSX.Element;
+export default Carousel;

package/dist/components/Carousel/Carousel.js

@@ -0,0 +1,373 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useRef, useState, useEffect } from "react";
+import { c as cva } from "../../index-DdUYounA.js";
+import { C as Carousel$1, a as CarouselScroller, b as CarouselItem, c as CarouselTabs, d as CarouselTab } from "../../IconButton.module-4obqG6tY.js";
+import { CarouselButton } from "./CarouselButton/CarouselButton.js";
+import { CarouselDots } from "./CarouselDots/CarouselDots.js";
+import { AutoplayControl } from "./AutoplayControl/AutoplayControl.js";
+import { focusStyleVariants } from "../../utils/focus/focusStyles.js";
+import { useFocusRing } from "@react-aria/focus";
+import { resolveResponsiveProp } from "../../utils/breakpoint/responsive.js";
+import { useBreakpoint } from "../../utils/breakpoint/hooks/useBreakpoint.js";
+import '../../assets/Carousel.css';const carouselWrapper = "_carouselWrapper_53fml_2";
+const showPartialItems = "_showPartialItems_53fml_14";
+const carousel$1 = "_carousel_53fml_2";
+const hasScrollPadding = "_hasScrollPadding_53fml_25";
+const scroller = "_scroller_53fml_43";
+const item = "_item_53fml_85";
+const slideLeft = "_slideLeft_53fml_123";
+const slideRight = "_slideRight_53fml_127";
+const controls = "_controls_53fml_150";
+const defaultPrevButton = "_defaultPrevButton_53fml_161";
+const defaultNextButton = "_defaultNextButton_53fml_169";
+const defaultDotsContainer = "_defaultDotsContainer_53fml_178";
+const defaultCarouselWrapper = "_defaultCarouselWrapper_53fml_189";
+const autoplayControlWrapper = "_autoplayControlWrapper_53fml_196";
+const defaultAutoplayControl = "_defaultAutoplayControl_53fml_196";
+const showOnHover = "_showOnHover_53fml_205";
+const hidden = "_hidden_53fml_215";
+const hiddenTabs = "_hiddenTabs_53fml_246";
+const infinite = "_infinite_53fml_265";
+const native = "_native_53fml_270";
+const styles = {
+  carouselWrapper,
+  showPartialItems,
+  carousel: carousel$1,
+  hasScrollPadding,
+  scroller,
+  item,
+  slideLeft,
+  slideRight,
+  controls,
+  defaultPrevButton,
+  defaultNextButton,
+  defaultDotsContainer,
+  defaultCarouselWrapper,
+  autoplayControlWrapper,
+  defaultAutoplayControl,
+  showOnHover,
+  hidden,
+  hiddenTabs,
+  infinite,
+  native
+};
+const carousel = cva(styles.carousel, {
+  variants: {
+    looping: {
+      infinite: styles.infinite,
+      backToStart: styles.native,
+      off: void 0
+    }
+  }
+});
+const Carousel = ({
+  children = [],
+  "aria-label": ariaLabel,
+  "aria-describedby": ariaDescribedby,
+  looping = "off",
+  itemsPerPage = 1,
+  spaceBetweenItems = 0,
+  scrollPadding,
+  // Button and Controls Props
+  iconType = "chevron",
+  arrowStyleVariant = "neutral",
+  arrowSize = "md",
+  hideDisabledArrow = false,
+  showArrowsOnHover = false,
+  focusStyle = "default",
+  // Dots/Tabs Props
+  dotsSize = "md",
+  dotsVariant = "standard",
+  hideDots = false,
+  // Autoplay Props
+  autoPlay = false,
+  autoPlayInterval = 2e3,
+  autoPlayStyleVariant = "neutralVibrant",
+  autoPlayControlSize = "md",
+  // Mouse Dragging
+  mouseDragging = true,
+  // Custom Class Names
+  carouselWrapperClassName = "",
+  prevArrowClassName = "",
+  nextArrowClassName = "",
+  autoplayControlClassName = "",
+  dotsContainerClassName = "",
+  dotsWrapperClassName = "",
+  dotClassName = "",
+  activeDotClassName = "",
+  itemWrapperClassName = "",
+  activeItemClassName = ""
+}) => {
+  const getLoopValue = () => {
+    if (looping === "infinite") return "infinite";
+    if (looping === "backToStart") return "native";
+    if (looping === "off") return void 0;
+    return looping;
+  };
+  const items = React__default.Children.toArray(children);
+  const totalItems = items.length;
+  const breakpoint = useBreakpoint();
+  const resolvedItemsPerPage = resolveResponsiveProp(itemsPerPage, breakpoint) ?? 1;
+  const resolvedSpaceBetweenItems = resolveResponsiveProp(spaceBetweenItems, breakpoint) ?? 0;
+  const resolvedScrollPadding = resolveResponsiveProp(scrollPadding, breakpoint) ?? void 0;
+  const resolvedArrowSize = resolveResponsiveProp(arrowSize, breakpoint) ?? "md";
+  const resolvedHideDots = resolveResponsiveProp(hideDots, breakpoint) ?? false;
+  const safeItemsPerPage = Math.max(1, resolvedItemsPerPage);
+  const totalPages = Math.ceil(totalItems / safeItemsPerPage);
+  const shouldShowDots = !resolvedHideDots && totalPages > 1;
+  const carouselRef = useRef(null);
+  const ariaCarouselRef = useRef(null);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [prevPage, setPrevPage] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isTransitioning] = useState(false);
+  const [dragStartPosition, setDragStartPosition] = useState(null);
+  const dragThreshold = 5;
+  const getClassNameWithDefault = (customClassName, defaultClassName) => {
+    return customClassName || defaultClassName;
+  };
+  const getCarouselWrapperClasses = () => {
+    const classes = [styles.carouselWrapper];
+    if (!Number.isInteger(safeItemsPerPage)) {
+      classes.push(styles.showPartialItems);
+    }
+    if (resolvedScrollPadding) {
+      classes.push(styles.hasScrollPadding);
+    }
+    if (carouselWrapperClassName && carouselWrapperClassName.trim()) {
+      classes.push(carouselWrapperClassName);
+    } else {
+      classes.push(styles.defaultCarouselWrapper);
+    }
+    return classes.join(" ");
+  };
+  const getCssVariables = () => {
+    const cssVars2 = {};
+    if (resolvedItemsPerPage !== 1) {
+      cssVars2["--items-per-page"] = String(safeItemsPerPage);
+    }
+    if (resolvedSpaceBetweenItems > 0) {
+      cssVars2["--space-between-items"] = `${resolvedSpaceBetweenItems}px`;
+    }
+    if (resolvedScrollPadding) {
+      cssVars2["--scroll-padding"] = resolvedScrollPadding;
+    }
+    return Object.keys(cssVars2).length > 0 ? cssVars2 : void 0;
+  };
+  const getActiveItemIndices = () => {
+    const startIndex = currentPage * Math.floor(safeItemsPerPage);
+    const endIndex = Math.min(startIndex + Math.ceil(safeItemsPerPage), totalItems);
+    const activeIndices = [];
+    for (let i = startIndex; i < endIndex; i++) {
+      activeIndices.push(i);
+    }
+    return activeIndices;
+  };
+  const navigateToSlide = (index) => {
+    if (index === currentPage || index < 0 || index >= totalPages) {
+      return;
+    }
+    if (carouselRef.current) {
+      const targetTab = carouselRef.current.querySelector(`[data-slide-tab="true"][data-index="${index}"]`);
+      if (targetTab) {
+        targetTab.click();
+      }
+    }
+  };
+  useEffect(() => {
+    if (!carouselRef.current || !mouseDragging) return;
+    const preventLinkActivation = (e) => {
+      if (isDragging) {
+        e.preventDefault();
+        e.stopPropagation();
+        setTimeout(() => {
+          setIsDragging(false);
+        }, 0);
+      }
+    };
+    const handleMouseDown = (e) => {
+      setDragStartPosition({
+        x: e.clientX,
+        y: e.clientY
+      });
+    };
+    const handleMouseMove = (e) => {
+      if (dragStartPosition === null) return;
+      const dx = Math.abs(e.clientX - dragStartPosition.x);
+      const dy = Math.abs(e.clientY - dragStartPosition.y);
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      if (distance > dragThreshold) {
+        setIsDragging(true);
+      }
+    };
+    const handleMouseUp = () => {
+      if (!isDragging) {
+        setDragStartPosition(null);
+        return;
+      }
+      setTimeout(() => {
+        setIsDragging(false);
+        setDragStartPosition(null);
+      }, 50);
+    };
+    const carouselElement = carouselRef.current;
+    carouselElement.addEventListener("mousedown", handleMouseDown, true);
+    carouselElement.addEventListener("mousemove", handleMouseMove, true);
+    carouselElement.addEventListener("mouseup", handleMouseUp, true);
+    carouselElement.addEventListener("click", preventLinkActivation, true);
+    return () => {
+      carouselElement.removeEventListener("mousedown", handleMouseDown, true);
+      carouselElement.removeEventListener("mousemove", handleMouseMove, true);
+      carouselElement.removeEventListener("mouseup", handleMouseUp, true);
+      carouselElement.removeEventListener("click", preventLinkActivation, true);
+    };
+  }, [mouseDragging, isDragging, dragStartPosition, dragThreshold]);
+  useEffect(() => {
+    if (carouselRef.current) {
+      const scroller2 = carouselRef.current.querySelector(`.${styles.scroller}`);
+      if (scroller2 && scroller2 instanceof HTMLElement) {
+        if (prevPage < currentPage) {
+          scroller2.classList.remove(styles.slideLeft);
+          scroller2.classList.add(styles.slideRight);
+        } else if (prevPage > currentPage) {
+          scroller2.classList.remove(styles.slideRight);
+          scroller2.classList.add(styles.slideLeft);
+        }
+      }
+    }
+  }, [currentPage, prevPage]);
+  useEffect(() => {
+    if (!carouselRef.current) return;
+    const checkCurrentPage = () => {
+      if (!carouselRef.current) return;
+      const selectedTab = carouselRef.current.querySelector('[data-slide-tab="true"][aria-selected="true"]');
+      if (selectedTab) {
+        const indexStr = selectedTab.getAttribute("data-index");
+        if (indexStr) {
+          const newIndex = parseInt(indexStr, 10);
+          if (!isNaN(newIndex) && newIndex !== currentPage && newIndex >= 0 && newIndex < totalPages) {
+            setPrevPage(currentPage);
+            setCurrentPage(newIndex);
+          }
+        }
+      }
+    };
+    const observer = new MutationObserver((mutations) => {
+      let shouldCheck = false;
+      mutations.forEach((mutation) => {
+        if (mutation.type === "attributes" && mutation.attributeName === "aria-selected") {
+          shouldCheck = true;
+        }
+      });
+      if (shouldCheck) {
+        setTimeout(checkCurrentPage, 10);
+      }
+    });
+    const hiddenTabs2 = carouselRef.current.querySelectorAll('[data-slide-tab="true"]');
+    hiddenTabs2.forEach((tab) => {
+      observer.observe(tab, {
+        attributes: true,
+        attributeFilter: ["aria-selected"]
+      });
+    });
+    checkCurrentPage();
+    const interval = setInterval(checkCurrentPage, 500);
+    return () => {
+      observer.disconnect();
+      clearInterval(interval);
+    };
+  }, [currentPage, totalPages]);
+  const interactionHandlers = showArrowsOnHover ? {
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    onFocus: () => setIsFocused(true),
+    onBlur: (e) => {
+      if (!e.currentTarget.contains(e.relatedTarget)) {
+        setIsFocused(false);
+      }
+    }
+  } : {};
+  const shouldShowArrows = totalPages > 1;
+  const arrowsVisible = shouldShowArrows && (!showArrowsOnHover || isHovered || isFocused);
+  const cssVars = getCssVariables();
+  const {
+    focusProps,
+    isFocusVisible
+  } = useFocusRing();
+  const getScrollerStyles = () => {
+    if (resolvedItemsPerPage <= 1 || !resolvedSpaceBetweenItems) {
+      return {};
+    }
+    const gapSpacePerItem = resolvedSpaceBetweenItems * (safeItemsPerPage - 1) / safeItemsPerPage;
+    return {
+      gridAutoColumns: `calc(${100 / safeItemsPerPage}% - ${gapSpacePerItem}px)`,
+      gap: `${resolvedSpaceBetweenItems}px`
+    };
+  };
+  const activeItemIndices = getActiveItemIndices();
+  const handleCarouselKeyDown = (e) => {
+    var _a, _b;
+    if (e.key === "ArrowLeft") {
+      e.preventDefault();
+      const prevButton = (_a = carouselRef.current) == null ? void 0 : _a.querySelector('[dir="prev"]');
+      if (prevButton && !prevButton.disabled) {
+        prevButton.click();
+      }
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault();
+      const nextButton = (_b = carouselRef.current) == null ? void 0 : _b.querySelector('[dir="next"]');
+      if (nextButton && !nextButton.disabled) {
+        nextButton.click();
+      }
+    } else if (e.key === "Home") {
+      e.preventDefault();
+      navigateToSlide(0);
+    } else if (e.key === "End") {
+      e.preventDefault();
+      navigateToSlide(totalPages - 1);
+    }
+  };
+  const getDefaultAriaLabel = () => {
+    if (ariaLabel) return ariaLabel;
+    const currentSlideNumber = currentPage + 1;
+    const autoplayStatus = autoPlay ? ", autoplay enabled" : "";
+    return `Carousel with ${totalItems} items, currently showing slide ${currentSlideNumber} of ${totalPages}${autoplayStatus}`;
+  };
+  return /* @__PURE__ */ jsx("div", { className: getCarouselWrapperClasses(), ref: carouselRef, style: cssVars, "data-dots-size": dotsSize, ...interactionHandlers, "data-arrows-visible": arrowsVisible ? "true" : "false", "data-transitioning": isTransitioning ? "true" : void 0, "data-scroll-padding": resolvedScrollPadding, role: "region", "aria-label": getDefaultAriaLabel(), "aria-describedby": ariaDescribedby, "aria-roledescription": "carousel", children: /* @__PURE__ */ jsxs(Carousel$1, { className: `${carousel({
+    looping
+  })}`, loop: getLoopValue(), ref: ariaCarouselRef, autoplay: autoPlay, autoplayInterval: autoPlayInterval, mouseDragging: mouseDragging && !isTransitioning, onDragStart: (e) => {
+    setIsDragging(true);
+    if (e && e.nativeEvent) {
+      setDragStartPosition({
+        x: e.nativeEvent.clientX,
+        y: e.nativeEvent.clientY
+      });
+    }
+  }, onDragEnd: () => {
+    setTimeout(() => {
+      setIsDragging(false);
+    }, 50);
+  }, "data-dragging": isDragging ? "true" : "false", itemsPerPage: safeItemsPerPage, spaceBetweenItems: resolvedSpaceBetweenItems > 0 ? `${resolvedSpaceBetweenItems}px` : void 0, scrollPadding: resolvedScrollPadding, "data-has-space-between": resolvedSpaceBetweenItems > 0 ? "true" : void 0, "data-items-per-page": resolvedItemsPerPage !== 1 ? safeItemsPerPage.toString() : void 0, children: [
+    /* @__PURE__ */ jsx(CarouselScroller, { className: `${styles.scroller} ${focusStyleVariants({
+      focusStyle
+    })}`, ...focusProps, "data-focused": isFocusVisible ? true : void 0, "data-focus-visible": isFocusVisible ? true : void 0, "data-transitioning": isTransitioning ? "true" : void 0, style: getScrollerStyles(), tabIndex: 0, role: "region", "aria-label": "Carousel content", onKeyDown: handleCarouselKeyDown, children: items.map((child, index) => {
+      const isActiveItem = activeItemIndices.includes(index);
+      const itemClasses = [styles.item, itemWrapperClassName || "", isActiveItem && activeItemClassName ? activeItemClassName : ""].filter(Boolean).join(" ");
+      return /* @__PURE__ */ jsx(CarouselItem, { className: itemClasses, "data-is-active": isActiveItem ? "true" : void 0, "data-item-index": index, "aria-label": `Slide ${index + 1} of ${totalItems}`, children: child }, index);
+    }) }),
+    /* @__PURE__ */ jsxs("div", { className: `${styles.controls} ${showArrowsOnHover ? styles.showOnHover : ""}`, children: [
+      /* @__PURE__ */ jsx(CarouselButton, { dir: "prev", variant: arrowStyleVariant, size: resolvedArrowSize, focusStyle, iconType, hideDisabledArrow, className: `${getClassNameWithDefault(prevArrowClassName, styles.defaultPrevButton)} ${!arrowsVisible ? styles.hidden : ""}` }),
+      /* @__PURE__ */ jsx(CarouselButton, { dir: "next", variant: arrowStyleVariant, size: resolvedArrowSize, focusStyle, iconType, hideDisabledArrow, className: `${getClassNameWithDefault(nextArrowClassName, styles.defaultNextButton)} ${!arrowsVisible ? styles.hidden : ""}` })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.hiddenTabs, children: /* @__PURE__ */ jsx(CarouselTabs, { children: (page) => /* @__PURE__ */ jsx(CarouselTab, { index: page.index, "data-index": page.index, "data-slide-tab": "true", tabIndex: -1 }, page.index) }) }),
+    autoPlay && /* @__PURE__ */ jsx("div", { className: `${styles.autoplayControlWrapper} ${getClassNameWithDefault(autoplayControlClassName, styles.defaultAutoplayControl)}`, children: /* @__PURE__ */ jsx(AutoplayControl, { variant: autoPlayStyleVariant, size: autoPlayControlSize, className: "" }) }),
+    shouldShowDots && /* @__PURE__ */ jsx(CarouselDots, { totalItems: totalPages, currentPage, onDotClick: (index) => navigateToSlide(index), focusStyle, dotsSize, variant: dotsVariant, className: getClassNameWithDefault(dotsContainerClassName, styles.defaultDotsContainer), dotsWrapperClassName, dotClassName, activeDotClassName, isTransitioning })
+  ] }) });
+};
+export {
+  Carousel,
+  Carousel as default
+};
+//# sourceMappingURL=Carousel.js.map

package/dist/components/Carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}