@alto-avios/alto-ui 3.3.0 → 3.4.0-alpha.2

package/dist/IconButton.module-DcfPVyUX.js

@@ -0,0 +1,48 @@
+import './assets/IconButton.css';const iconButton = "_iconButton_kb1oz_1";
+const sm = "_sm_kb1oz_24";
+const md = "_md_kb1oz_30";
+const lg = "_lg_kb1oz_36";
+const accentPrimary = "_accentPrimary_kb1oz_46";
+const accentSecondary = "_accentSecondary_kb1oz_69";
+const accentTertiary = "_accentTertiary_kb1oz_98";
+const accentQuaternary = "_accentQuaternary_kb1oz_127";
+const criticalPrimary = "_criticalPrimary_kb1oz_151";
+const criticalSecondary = "_criticalSecondary_kb1oz_175";
+const criticalTertiary = "_criticalTertiary_kb1oz_204";
+const criticalQuaternary = "_criticalQuaternary_kb1oz_229";
+const neutralPrimary = "_neutralPrimary_kb1oz_254";
+const neutralSecondary = "_neutralSecondary_kb1oz_278";
+const neutralTertiary = "_neutralTertiary_kb1oz_305";
+const neutralQuaternary = "_neutralQuaternary_kb1oz_330";
+const whitePrimary = "_whitePrimary_kb1oz_356";
+const whiteSecondary = "_whiteSecondary_kb1oz_385";
+const whiteTertiary = "_whiteTertiary_kb1oz_416";
+const whiteQuaternary = "_whiteQuaternary_kb1oz_445";
+const iconButtonStyles = {
+  iconButton,
+  sm,
+  md,
+  lg,
+  accentPrimary,
+  accentSecondary,
+  accentTertiary,
+  accentQuaternary,
+  criticalPrimary,
+  criticalSecondary,
+  criticalTertiary,
+  criticalQuaternary,
+  neutralPrimary,
+  neutralSecondary,
+  neutralTertiary,
+  neutralQuaternary,
+  whitePrimary,
+  whiteSecondary,
+  whiteTertiary,
+  whiteQuaternary,
+  "fa-spinner-third": "_fa-spinner-third_kb1oz_476",
+  "icon-wrapper": "_icon-wrapper_kb1oz_481"
+};
+export {
+  iconButtonStyles as i
+};
+//# sourceMappingURL=IconButton.module-DcfPVyUX.js.map

package/dist/IconButton.module-DcfPVyUX.js.map

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

package/dist/assets/AutoplayControl.css

@@ -0,0 +1 @@
+._autoplayControl_jeo17_1{background:none;border:none;min-height:40px;min-width:40px;padding:0;pointer-events:auto;position:relative;z-index:10}._autoplayControl_jeo17_1,._iconButton_jeo17_17{align-items:center;display:flex;justify-content:center}._iconButton_jeo17_17{box-shadow:0 2px 8px #0003}._sizeMd_jeo17_25,._sizeMd_jeo17_25 ._iconButton_jeo17_17{height:48px;width:48px}._sizeSm_jeo17_31,._sizeSm_jeo17_31 ._iconButton_jeo17_17{height:36px;width:36px}._neutralVibrant_jeo17_38 ._iconButton_jeo17_17{background-color:var(--alto-sem-color-fg-inverse-on-subtle);border-radius:var(--alto-sem-radius-circle,50%);color:var(--alto-sem-color-fg-inverse-on-vibrant)}._whiteVibrant_jeo17_44 ._iconButton_jeo17_17{background-color:var(--alto-sem-color-fg-white-primary);border-radius:var(--alto-sem-radius-circle,50%);color:var(--alto-sem-color-fg-white-on-vibrant)}._whiteVibrant_jeo17_44 ._iconButton_jeo17_17[data-focused]{outline-color:var(--alto-sem-color-border-white)}._neutralSubtle_jeo17_55 ._iconButton_jeo17_17{background-color:var(--alto-sem-color-fg-inverse-primary);border-radius:var(--alto-sem-radius-circle,50%);color:var(--alto-sem-color-fg-inverse-on-subtle)}._whiteSubtle_jeo17_61 ._iconButton_jeo17_17{background-color:#00000080;border-radius:var(--alto-sem-radius-circle,50%);color:var(--alto-sem-color-fg-white-on-subtle)}._whiteSubtle_jeo17_61 ._iconButton_jeo17_17[data-focused]{outline-color:var(--alto-sem-color-border-white)}

package/dist/assets/Carousel.css

@@ -0,0 +1 @@
+._carouselWrapper_mtbhv_1{max-width:100%;overflow:hidden;position:relative;width:100%}._showPartialItems_mtbhv_9,._showPartialItems_mtbhv_9 ._carousel_mtbhv_1{overflow:visible}._carousel_mtbhv_1{overflow:hidden;position:relative;width:100%}._scroller_mtbhv_23{display:flex;overflow-x:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;transition:all .3s ease}[data-dragging=true] ._scroller_mtbhv_23{cursor:grabbing;scroll-behavior:auto}._scroller_mtbhv_23:hover{cursor:grab}._item_mtbhv_43{box-sizing:border-box;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always}div[style*=--items-per-page] ._item_mtbhv_43{flex:0 0 auto;flex-basis:calc(100%/var(--items-per-page))}div[style*=--space-between-items] ._item_mtbhv_43{margin-right:var(--space-between-items)}div[style*=--space-between-items] ._item_mtbhv_43:last-child{margin-right:0}div[style*=--scroll-padding] ._scroller_mtbhv_23{padding-left:var(--scroll-padding);padding-right:var(--scroll-padding);scroll-padding-left:var(--scroll-padding);scroll-padding-right:var(--scroll-padding)}._slideLeft_mtbhv_73{animation:_slideLeftAnimation_mtbhv_1 .4s ease-out}._slideRight_mtbhv_77{animation:_slideRightAnimation_mtbhv_1 .4s ease-out}@keyframes _slideLeftAnimation_mtbhv_1{0%{transform:translate(5%)}to{transform:translate(0)}}@keyframes _slideRightAnimation_mtbhv_1{0%{transform:translate(-5%)}to{transform:translate(0)}}._controls_mtbhv_100{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}._dotsContainerWrapper_mtbhv_111{pointer-events:auto;z-index:2}._dotsContainer_mtbhv_111{position:relative}@media (max-width:768px){._dotsContainerWrapper_mtbhv_111{cursor:pointer}._dotsContainerWrapper_mtbhv_111:active{opacity:.8}}._hiddenTabs_mtbhv_133{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}._tapEnabled_mtbhv_146{cursor:pointer;touch-action:manipulation}._autoplayControlWrapper_mtbhv_161{align-items:center;display:flex;justify-content:center;pointer-events:auto;position:absolute;right:16px;top:16px;z-index:10}

package/dist/assets/CarouselButton.css

@@ -0,0 +1 @@
+._arrowContainer_ny9r1_1{background:none;border:none;padding:0;pointer-events:auto;position:relative;z-index:2}._iconButton_ny9r1_10{align-items:center;display:flex;justify-content:center}._hideWhenDisabled_ny9r1_16[aria-disabled=true]{display:none}._neutral_ny9r1_22 ._iconButton_ny9r1_10[data-focused=true],._neutral_ny9r1_22 ._iconButton_ny9r1_10[data-parent-hovered=true]{background-color:var(--alto-sem-color-overlay-state-darken-invert-hover)}:not([aria-disabled]) ._neutral_ny9r1_22 ._iconButton_ny9r1_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-darken-invert-active)}._white_ny9r1_32 ._iconButton_ny9r1_10{background-color:transparent;border:none;border-radius:0}._white_ny9r1_32:not([aria-disabled]) ._iconButton_ny9r1_10[data-focused=true],._white_ny9r1_32:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-hovered=true]{background-color:var(--alto-sem-color-overlay-state-lighten-hover)}._white_ny9r1_32:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-lighten-active)}._shapeFlat_ny9r1_48:not([aria-disabled]) ._iconButton_ny9r1_10{background-color:var(--alto-sem-color-bg-white-vibrant-default)}._shapeFlat_ny9r1_48:not([aria-disabled]) ._iconButton_ny9r1_10[data-focused=true],._shapeFlat_ny9r1_48:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-hovered=true]{background-color:var(--alto-sem-color-bg-white-vibrant-hover)}._shapeFlat_ny9r1_48:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-bg-white-vibrant-active)}._shapeElevated_ny9r1_62:not([aria-disabled]) ._iconButton_ny9r1_10{background-color:var(--alto-sem-color-bg-white-vibrant-default);box-shadow:0 11.4px 9.12px #2f2a850d,0 2.59px 4.4px #2f2a850d,0 6.99px 18.18px #2f2a8514}._shapeElevated_ny9r1_62:not([aria-disabled]) ._iconButton_ny9r1_10[data-focused=true],._shapeElevated_ny9r1_62:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-hovered=true]{background-color:var(--alto-sem-color-bg-white-vibrant-hover)}._shapeElevated_ny9r1_62:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-bg-white-vibrant-active)}._gradient_ny9r1_80:not([aria-disabled]) ._iconButton_ny9r1_10{background:linear-gradient(90deg,#fefefe 50%,#fff0);border:none;border-radius:0}._gradient_ny9r1_80._next_ny9r1_86:not([aria-disabled]) ._iconButton_ny9r1_10{background:linear-gradient(90deg,#fff0,#fefefe 50%)}._gradient_ny9r1_80:not([aria-disabled]) ._iconButton_ny9r1_10[data-focused=true],._gradient_ny9r1_80:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-hovered=true]{background:linear-gradient(90deg,#fefefe 50%,#fff0);color:var(--alto-sem-color-fg-accent-primary)}._gradient_ny9r1_80._next_ny9r1_86:not([aria-disabled]) ._iconButton_ny9r1_10[data-focused=true],._gradient_ny9r1_80._next_ny9r1_86:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-hovered=true]{background:linear-gradient(90deg,#fff0,#fefefe 50%);color:var(--alto-sem-color-fg-accent-primary)}._gradient_ny9r1_80:not([aria-disabled]) ._iconButton_ny9r1_10[data-parent-pressed=true]{background-color:var(--alto-sem-color-overlay-state-lighten-active)}._gradient_ny9r1_80:not([aria-disabled]) ._iconButton_ny9r1_10[data-focused],._white_ny9r1_32:not([aria-disabled]) ._iconButton_ny9r1_10{outline-offset:var(--alto-sem-border-width-none)}[aria-disabled] ._iconButton_ny9r1_10{background-color:var(--alto-sem-color-fg-disabled-primary);cursor:not-allowed;opacity:var(--alto-sem-opacity-30)}

package/dist/assets/CarouselDots.css

@@ -0,0 +1 @@
+._tabsContainer_1yet6_1{margin:0 auto;min-height:30px;width:240px}._tabsContainer_1yet6_1,._tabs_1yet6_1{align-items:center;display:flex;justify-content:center;overflow:hidden;position:relative}._tabs_1yet6_1{background-color:var(--alto-sem-color-bg-white-vibrant-default);border-radius:var(--alto-sem-radius-circle);padding:var(--alto-sem-space-2xs) var(--alto-sem-space-xs)}._tabs_1yet6_1[data-focused=true]{outline:2px solid var(--alto-sem-color-border-accent);outline-offset:1px}._tabs_1yet6_1._transparent_1yet6_28{background-color:transparent}._dotsScroller_1yet6_32{align-items:center;display:flex;gap:var(--alto-sem-space-2xs);justify-content:center;position:relative;white-space:nowrap;will-change:transform}._tab_1yet6_1{background-color:#0000004d;border:none;border-radius:var(--alto-sem-radius-circle);cursor:pointer;display:block;flex-shrink:0;margin:0;padding:0;transition:background-color .6s ease,width .6s ease,height .6s ease,opacity .6s ease}._tab_1yet6_1:hover,._tab_1yet6_1[data-hovered=true]{transform:scale(1.1)}._tab_1yet6_1._activeTab_1yet6_65{background-color:var(--alto-sem-color-fg-primary)}._tabs_1yet6_1[data-focused=true] ._tab_1yet6_1._activeTab_1yet6_65{background-color:var(--alto-sem-color-border-accent)}._tabMd_1yet6_74{height:8px;width:8px}._tabLg_1yet6_79{height:12px;width:12px}._tabSizeMedium_1yet6_85{height:6px;opacity:.8;width:6px}._tabSizeSmall_1yet6_92{height:4px;opacity:.6;width:4px}[data-dot-size=lg] ._tabSizeMedium_1yet6_85{height:9px;width:9px}[data-dot-size=lg] ._tabSizeSmall_1yet6_92{height:6px;width:6px}

package/dist/components/Accordion/Accordion.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import { Disclosure, DisclosureGroup, Button, DisclosurePanel } from "react-aria-components";
 import { Icon } from "../Icon/Icon.js";
 import '../../assets/Accordion.css';const accordion = "_accordion_1i793_1";
@@ -58,8 +58,8 @@ const AccordionPanel = ({
   children,
   ...props
 }) => {
-  const contentRef = React.useRef(null);
-  React.useEffect(() => {
+  const contentRef = React__default.useRef(null);
+  React__default.useEffect(() => {
     const content = contentRef.current;
     if (!content) return;
     const group = content.closest('[role="group"]');
@@ -110,8 +110,8 @@ const AccordionGroup = ({
   allowsMultipleExpanded = true
 }) => {
   const groupClasses = [styles.accordionGroup, className].filter(Boolean).join(" ");
-  const defaultExpandedKeys = React.Children.toArray(children).map((child, index) => {
-    if (React.isValidElement(child) && child.props.defaultExpanded) {
+  const defaultExpandedKeys = React__default.Children.toArray(children).map((child, index) => {
+    if (React__default.isValidElement(child) && child.props.defaultExpanded) {
       return `accordion-${index}`;
     }
     return null;
@@ -121,9 +121,9 @@ const AccordionGroup = ({
       title,
       description
     ] }),
-    /* @__PURE__ */ jsx(DisclosureGroup, { className: styles.accordionStack, allowsMultipleExpanded, defaultExpandedKeys, children: React.Children.map(children, (child, index) => {
-      if (React.isValidElement(child)) {
-        return React.cloneElement(child, {
+    /* @__PURE__ */ jsx(DisclosureGroup, { className: styles.accordionStack, allowsMultipleExpanded, defaultExpandedKeys, children: React__default.Children.map(children, (child, index) => {
+      if (React__default.isValidElement(child)) {
+        return React__default.cloneElement(child, {
           key: `accordion-${index}`,
           id: `accordion-${index}`
         });

package/dist/components/AviosCurrencySymbol/AviosCurrencySymbol.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import '../../assets/AviosCurrencySymbol.css';const styles = {
   "aviosCurrencySymbol-primary": "_aviosCurrencySymbol-primary_q5gfd_1",
@@ -43,7 +43,7 @@ const AviosCurrencySymbol = ({
   "aria-label": ariaLabel,
   ...props
 }) => {
-  const dimensions = React.useMemo(() => {
+  const dimensions = React__default.useMemo(() => {
     if (width && height) {
       return {
         width,

package/dist/components/ButtonGroup/ButtonGroup.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import '../../assets/ButtonGroup.css';const buttonGroup = "_buttonGroup_zcnod_2";
 const alignStart = "_alignStart_zcnod_10";
@@ -41,7 +41,7 @@ const ButtonGroup = ({
 }) => {
   return /* @__PURE__ */ jsx("div", { className: `${buttonGroupStyles({
     align
-  })}`, role: "group", "aria-label": "Button Group", children: React.Children.map(children, (child) => child) });
+  })}`, role: "group", "aria-label": "Button Group", children: React__default.Children.map(children, (child) => child) });
 };
 export {
   ButtonGroup,

package/dist/components/CalloutBanner/CalloutBanner.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import React from "react";
+import React__default from "react";
 import { Icon } from "../Icon/Icon.js";
 import { c as cva } from "../../index-Bi3v_EjJ.js";
 import { IconButton } from "../IconButton/IconButton.js";
@@ -55,7 +55,7 @@ const CalloutBanner = ({
   emphasis = "primary",
   onDismiss
 }) => {
-  const iconName = React.useMemo(() => {
+  const iconName = React__default.useMemo(() => {
     switch (styleVariant) {
       case "critical":
         return "circle-exclamation";

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

@@ -0,0 +1,27 @@
+export interface AutoplayControlProps {
+    /**
+     * Focus style
+     * @default 'default'
+     */
+    focusStyle?: 'default' | 'white';
+    /**
+     * Style variant of the button
+     * @default 'neutralVibrant'
+     */
+    variant?: 'neutralVibrant' | 'neutralSubtle' | 'whiteVibrant' | 'whiteSubtle';
+    /**
+     * Size of the button
+     * @default 'md'
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Additional CSS class name for the container
+     */
+    className?: string;
+    /**
+     * Additional CSS class name for the button
+     */
+    buttonClassName?: string;
+}
+export declare const AutoplayControl: ({ variant, size, focusStyle, className, buttonClassName, }: AutoplayControlProps) => import("react/jsx-runtime").JSX.Element;
+export default AutoplayControl;

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

@@ -0,0 +1,65 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { f as CarouselAutoplayControl } from "../../../index-uZFEbUWx.js";
+import { useFocusRing } from "@react-aria/focus";
+import { i as iconButtonStyles } from "../../../IconButton.module-DcfPVyUX.js";
+import { Icon } from "../../Icon/Icon.js";
+import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
+import '../../../assets/AutoplayControl.css';const autoplayControl = "_autoplayControl_jeo17_1";
+const iconButton = "_iconButton_jeo17_17";
+const sizeMd = "_sizeMd_jeo17_25";
+const sizeSm = "_sizeSm_jeo17_31";
+const neutralVibrant = "_neutralVibrant_jeo17_38";
+const whiteVibrant = "_whiteVibrant_jeo17_44";
+const neutralSubtle = "_neutralSubtle_jeo17_55";
+const whiteSubtle = "_whiteSubtle_jeo17_61";
+const styles = {
+  autoplayControl,
+  iconButton,
+  sizeMd,
+  sizeSm,
+  neutralVibrant,
+  whiteVibrant,
+  neutralSubtle,
+  whiteSubtle
+};
+const AutoplayControl = ({
+  variant = "neutralVibrant",
+  size = "md",
+  focusStyle = "default",
+  className = "",
+  buttonClassName = ""
+}) => {
+  const {
+    isFocusVisible,
+    focusProps
+  } = 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";
+    }
+  };
+  return /* @__PURE__ */ jsx(CarouselAutoplayControl, { className: `${styles.autoplayControl} ${variantClass} ${className || ""}`, ...focusProps, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), onMouseDown: () => setIsPressed(true), onMouseUp: () => setIsPressed(false), "data-hovered": isHovered ? true : void 0, "data-pressed": isPressed ? true : void 0, "data-size": size, children: ({
+    autoplayUserPreference
+  }) => /* @__PURE__ */ jsx("div", { className: `${styles.iconButton} ${iconButtonStyles.iconButton} ${iconButtonStyles[size] || ""} ${focusStyleVariants({
+    focusStyle
+  })} ${buttonClassName || ""}`, "data-focused": isFocusVisible ? true : void 0, "data-parent-hovered": isHovered ? true : void 0, "data-parent-pressed": isPressed ? true : void 0, "data-size": size, 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,150 @@
+import { default as React } from 'react';
+export interface CarouselProps {
+    /**
+     * Content to be displayed in the carousel
+     */
+    children?: React.ReactNode | React.ReactNode[];
+    /**
+     * Carousel variant
+     * @default 'default'
+     */
+    variant?: 'default' | 'minimal';
+    /**
+     * 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;
+    /**
+     * Whether to show a peek of the next/previous slides when in
+     * overflow mode
+     * @default false
+     */
+    hasScrollPeek?: boolean;
+    /**
+     * Additional CSS class for the carousel container
+     */
+    className?: string;
+    /**
+     * Icon type for navigation buttons
+     * @default 'chevron'
+     */
+    iconType?: 'chevron';
+    /**
+     * Style of carousel arrow buttons
+     * @default 'neutral'
+     */
+    carouselArrow?: 'neutral' | 'white' | 'shapeFlat' | 'shapeElevated' | 'gradient';
+    /**
+     * Size of navigation buttons
+     * @default 'md'
+     */
+    buttonSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Focus style for interactive elements
+     * @default 'default'
+     */
+    focusStyle?: 'default' | 'white';
+    /**
+     * Size of pagination dots
+     * @default 'md'
+     */
+    dotSize?: 'md' | 'lg';
+    /**
+     * Visual style of pagination dots
+     * @default 'standard'
+     */
+    dotsVariant?: 'standard' | 'transparent';
+    /**
+     * Whether to hide pagination dots
+     * @default false
+     */
+    hideDots?: boolean;
+    /**
+     * Whether to enable cycle behavior on dots container tap for mobile
+     * @default true
+     */
+    enableTapCycling?: boolean;
+    /**
+     * Whether the autoplay is enabled
+     * @default false
+     */
+    isPaused?: boolean;
+    /**
+     * Interval in milliseconds between slides during autoplay
+     * @default 2000
+     */
+    autoPlayInterval?: number;
+    /**
+     * Style variant for autoplay control button
+     * @default 'neutralVibrant'
+     */
+    autoPlayControlVariant?: '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 controls container
+     */
+    controlsClassName?: string;
+    /**
+     * Class name for the previous button
+     * Use this to position the previous button
+     */
+    prevButtonClassName?: string;
+    /**
+     * Class name for the next button
+     * Use this to position the next button
+     */
+    nextButtonClassName?: 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;
+}
+export declare const Carousel: ({ children, looping, className, itemsPerPage, spaceBetweenItems, hasScrollPeek, iconType, carouselArrow, buttonSize, focusStyle, dotSize, dotsVariant, hideDots, enableTapCycling, isPaused, autoPlayInterval, autoPlayControlVariant, autoPlayControlSize, mouseDragging, carouselWrapperClassName, controlsClassName, prevButtonClassName, nextButtonClassName, autoplayControlClassName, dotsContainerClassName, dotsWrapperClassName, dotClassName, activeDotClassName, }: CarouselProps) => import("react/jsx-runtime").JSX.Element;
+export default Carousel;

package/dist/components/Carousel/Carousel.js

@@ -0,0 +1,245 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default, { useRef, useState, useEffect } from "react";
+import { c as cva } from "../../index-Bi3v_EjJ.js";
+import { C as Carousel$1, a as CarouselScroller, b as CarouselItem, c as CarouselTabs, d as CarouselTab } from "../../index-uZFEbUWx.js";
+import { CarouselButton } from "./CarouselButton/CarouselButton.js";
+import { CarouselDots } from "./CarouselDots/CarouselDots.js";
+import { AutoplayControl } from "./AutoplayControl/AutoplayControl.js";
+import '../../assets/Carousel.css';const carouselWrapper = "_carouselWrapper_mtbhv_1";
+const showPartialItems = "_showPartialItems_mtbhv_9";
+const carousel$1 = "_carousel_mtbhv_1";
+const scroller = "_scroller_mtbhv_23";
+const item = "_item_mtbhv_43";
+const slideLeft = "_slideLeft_mtbhv_73";
+const slideLeftAnimation = "_slideLeftAnimation_mtbhv_1";
+const slideRight = "_slideRight_mtbhv_77";
+const slideRightAnimation = "_slideRightAnimation_mtbhv_1";
+const controls = "_controls_mtbhv_100";
+const dotsContainerWrapper = "_dotsContainerWrapper_mtbhv_111";
+const dotsContainer = "_dotsContainer_mtbhv_111";
+const hiddenTabs = "_hiddenTabs_mtbhv_133";
+const tapEnabled = "_tapEnabled_mtbhv_146";
+const infinite = "_infinite_mtbhv_152";
+const native = "_native_mtbhv_157";
+const autoplayControlWrapper = "_autoplayControlWrapper_mtbhv_161";
+const styles = {
+  carouselWrapper,
+  showPartialItems,
+  carousel: carousel$1,
+  scroller,
+  item,
+  slideLeft,
+  slideLeftAnimation,
+  slideRight,
+  slideRightAnimation,
+  controls,
+  dotsContainerWrapper,
+  dotsContainer,
+  hiddenTabs,
+  tapEnabled,
+  infinite,
+  native,
+  autoplayControlWrapper
+};
+const carousel = cva(styles.carousel, {
+  variants: {
+    looping: {
+      infinite: styles.infinite,
+      backToStart: styles.native,
+      off: void 0
+    }
+  }
+});
+const Carousel = ({
+  children = [],
+  looping = "off",
+  className = "",
+  itemsPerPage = 1,
+  spaceBetweenItems = 0,
+  hasScrollPeek = false,
+  // Button and Controls Props
+  iconType = "chevron",
+  carouselArrow = "neutral",
+  buttonSize = "md",
+  focusStyle = "default",
+  // Dots/Tabs Props
+  dotSize = "md",
+  dotsVariant = "standard",
+  hideDots = false,
+  // Mobile Props
+  enableTapCycling = true,
+  // Autoplay Props
+  isPaused = false,
+  autoPlayInterval = 2e3,
+  autoPlayControlVariant = "neutralVibrant",
+  autoPlayControlSize = "md",
+  // Mouse Dragging
+  mouseDragging = true,
+  // Custom Class Names
+  carouselWrapperClassName = "",
+  controlsClassName = "",
+  prevButtonClassName = "",
+  nextButtonClassName = "",
+  autoplayControlClassName = "",
+  dotsContainerClassName = "",
+  dotsWrapperClassName = "",
+  dotClassName = "",
+  activeDotClassName = ""
+}) => {
+  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 safeItemsPerPage = Math.max(1, itemsPerPage);
+  const totalPages = Math.ceil(totalItems / safeItemsPerPage);
+  const carouselRef = useRef(null);
+  const ariaCarouselRef = useRef(null);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [prevPage, setPrevPage] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const getCarouselWrapperClasses = () => {
+    const classes = [styles.carouselWrapper];
+    if (!Number.isInteger(safeItemsPerPage)) {
+      classes.push(styles.showPartialItems);
+    }
+    if (carouselWrapperClassName) {
+      classes.push(carouselWrapperClassName);
+    }
+    return classes.join(" ");
+  };
+  const getCssVariables = () => {
+    const cssVars2 = {};
+    if (itemsPerPage !== 1) {
+      cssVars2["--items-per-page"] = String(safeItemsPerPage);
+    }
+    if (spaceBetweenItems > 0) {
+      cssVars2["--space-between-items"] = `${spaceBetweenItems}px`;
+    }
+    if (hasScrollPeek) {
+      cssVars2["--scroll-padding"] = "16px";
+    }
+    return Object.keys(cssVars2).length > 0 ? cssVars2 : void 0;
+  };
+  const navigateToSlide = (index) => {
+    if (index === currentPage) return;
+    setPrevPage(currentPage);
+    setCurrentPage(index);
+    if (carouselRef.current) {
+      const nativeTab = carouselRef.current.querySelector(`[data-index="${index}"]`);
+      if (nativeTab && nativeTab instanceof HTMLElement) {
+        nativeTab.click();
+      }
+    }
+  };
+  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 updateCurrentPage = () => {
+      if (!carouselRef.current) return;
+      const selectedTab = carouselRef.current.querySelector('[aria-selected="true"]');
+      if (selectedTab && selectedTab.hasAttribute("data-index")) {
+        const index = parseInt(selectedTab.getAttribute("data-index") || "0", 10);
+        if (!isNaN(index) && index !== currentPage) {
+          setPrevPage(currentPage);
+          setCurrentPage(index);
+        }
+      } else {
+        const visibleSlide = carouselRef.current.querySelector('[role="tabpanel"]:not([aria-hidden="true"])');
+        if (visibleSlide && visibleSlide.hasAttribute("data-index")) {
+          const index = parseInt(visibleSlide.getAttribute("data-index") || "0", 10);
+          if (!isNaN(index) && index !== currentPage) {
+            setPrevPage(currentPage);
+            setCurrentPage(index);
+          }
+        }
+      }
+    };
+    const prevButton = carouselRef.current.querySelector('[dir="prev"]');
+    const nextButton = carouselRef.current.querySelector('[dir="next"]');
+    const handleButtonClick = () => {
+      setTimeout(updateCurrentPage, 50);
+    };
+    prevButton == null ? void 0 : prevButton.addEventListener("click", handleButtonClick);
+    nextButton == null ? void 0 : nextButton.addEventListener("click", handleButtonClick);
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes" && (mutation.attributeName === "aria-selected" || mutation.attributeName === "aria-current")) {
+          updateCurrentPage();
+        }
+      }
+    });
+    const tabs = carouselRef.current.querySelectorAll('[role="tab"]');
+    tabs.forEach((tab) => {
+      observer.observe(tab, {
+        attributes: true
+      });
+    });
+    const scroller2 = carouselRef.current.querySelector(".scroller");
+    if (scroller2) {
+      observer.observe(scroller2, {
+        attributes: true
+      });
+    }
+    const handleSlideTransition = () => {
+      updateCurrentPage();
+    };
+    const scrollerElement = carouselRef.current.querySelector(`.${styles.scroller}`);
+    if (scrollerElement) {
+      scrollerElement.addEventListener("transitionend", handleSlideTransition);
+    }
+    updateCurrentPage();
+    const checkInterval = setInterval(updateCurrentPage, 300);
+    return () => {
+      observer.disconnect();
+      prevButton == null ? void 0 : prevButton.removeEventListener("click", handleButtonClick);
+      nextButton == null ? void 0 : nextButton.removeEventListener("click", handleButtonClick);
+      if (scrollerElement) {
+        scrollerElement.removeEventListener("transitionend", handleSlideTransition);
+      }
+      clearInterval(checkInterval);
+    };
+  }, [currentPage]);
+  const cssVars = getCssVariables();
+  return /* @__PURE__ */ jsx("div", { className: getCarouselWrapperClasses(), ref: carouselRef, style: cssVars, "data-dots-size": dotSize, children: /* @__PURE__ */ jsxs(Carousel$1, { className: `${carousel({
+    looping
+  })} ${className}`, loop: getLoopValue(), ref: ariaCarouselRef, autoplay: isPaused, autoplayInterval: autoPlayInterval, mouseDragging, onDragStart: () => setIsDragging(true), onDragEnd: () => setIsDragging(false), "data-dragging": isDragging ? "true" : "false", itemsPerPage: safeItemsPerPage, spaceBetweenItems: spaceBetweenItems > 0 ? `${spaceBetweenItems}px` : void 0, scrollPadding: hasScrollPeek ? "16px" : void 0, "data-has-scroll-peek": hasScrollPeek ? "true" : void 0, "data-has-space-between": spaceBetweenItems > 0 ? "true" : void 0, "data-items-per-page": itemsPerPage !== 1 ? safeItemsPerPage.toString() : void 0, children: [
+    isPaused && /* @__PURE__ */ jsx("div", { className: `${styles.autoplayControlWrapper} ${autoplayControlClassName || ""}`, children: /* @__PURE__ */ jsx(AutoplayControl, { variant: autoPlayControlVariant, size: autoPlayControlSize, className: "" }) }),
+    /* @__PURE__ */ jsx(CarouselScroller, { className: styles.scroller, children: items.map((child, index) => /* @__PURE__ */ jsx(CarouselItem, { className: styles.item, children: child }, index)) }),
+    /* @__PURE__ */ jsxs("div", { className: `${styles.controls} ${controlsClassName}`, children: [
+      /* @__PURE__ */ jsx(CarouselButton, { dir: "prev", variant: carouselArrow, size: buttonSize, focusStyle, iconType, className: prevButtonClassName }),
+      /* @__PURE__ */ jsx(CarouselButton, { dir: "next", variant: carouselArrow, size: buttonSize, focusStyle, iconType, className: nextButtonClassName })
+    ] }),
+    /* @__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" }, page.index) }) }),
+    !hideDots && /* @__PURE__ */ jsx(CarouselDots, { totalItems: totalPages, currentPage, onDotClick: (index) => {
+      const isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+      if (isMobileDevice && enableTapCycling) {
+        const nextPage = (currentPage + 1) % totalPages;
+        navigateToSlide(nextPage);
+      } else {
+        navigateToSlide(index);
+      }
+    }, tabSize: dotSize, dotSize, variant: dotsVariant, className: `${dotsContainerClassName} ${enableTapCycling ? styles.tapEnabled : ""}`, dotsWrapperClassName, dotClassName, activeDotClassName })
+  ] }) });
+};
+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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}