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

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

@@ -4,11 +4,6 @@ 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
@@ -54,6 +49,11 @@ export interface CarouselProps {
      * @default 'md'
      */
     buttonSize?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether to hide navigation buttons when disabled
+     * @default false
+     */
+    hideWhenDisabled?: boolean;
     /**
      * Focus style for interactive elements
      * @default 'default'
@@ -146,5 +146,5 @@ export interface CarouselProps {
      */
     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 declare const Carousel: ({ children, looping, className, itemsPerPage, spaceBetweenItems, hasScrollPeek, iconType, carouselArrow, buttonSize, hideWhenDisabled, 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

@@ -61,6 +61,7 @@ const Carousel = ({
   iconType = "chevron",
   carouselArrow = "neutral",
   buttonSize = "md",
+  hideWhenDisabled = false,
   focusStyle = "default",
   // Dots/Tabs Props
   dotSize = "md",
@@ -223,8 +224,8 @@ const Carousel = ({
     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(CarouselButton, { dir: "prev", variant: carouselArrow, size: buttonSize, focusStyle, iconType, hideWhenDisabled, className: prevButtonClassName }),
+      /* @__PURE__ */ jsx(CarouselButton, { dir: "next", variant: carouselArrow, size: buttonSize, focusStyle, iconType, hideWhenDisabled, 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) => {
@@ -235,7 +236,7 @@ const Carousel = ({
       } else {
         navigateToSlide(index);
       }
-    }, tabSize: dotSize, dotSize, variant: dotsVariant, className: `${dotsContainerClassName} ${enableTapCycling ? styles.tapEnabled : ""}`, dotsWrapperClassName, dotClassName, activeDotClassName })
+    }, focusStyle, dotSize, variant: dotsVariant, className: `${dotsContainerClassName} ${enableTapCycling ? styles.tapEnabled : ""}`, dotsWrapperClassName, dotClassName, activeDotClassName })
   ] }) });
 };
 export {

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

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

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

@@ -23,11 +23,6 @@ export interface CarouselButtonProps {
      * @default false
      */
     hideWhenDisabled?: boolean;
-    /**
-     * Icon type to use
-     * @default 'chevron'
-     */
-    iconType?: 'chevron';
     /**
      * Additional CSS class name for the button container
      */
@@ -36,6 +31,10 @@ export interface CarouselButtonProps {
      * Additional CSS class name for the button content
      */
     buttonClassName?: string;
+    /**
+     * @private
+     */
+    iconType?: 'chevron';
 }
 export declare const CarouselButton: ({ dir, variant, size, focusStyle, hideWhenDisabled, iconType, className, buttonClassName, }: CarouselButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default CarouselButton;

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

@@ -4,7 +4,7 @@ export interface CarouselDotsProps {
     currentPage: number;
     onDotClick: (index: number) => void;
     dotSize?: 'md' | 'lg';
-    tabSize?: 'md' | 'lg';
+    focusStyle?: 'default' | 'white';
     variant?: 'standard' | 'transparent';
     className?: string;
     dotsWrapperClassName?: string;

package/dist/components/Carousel/CarouselDots/CarouselDots.js

@@ -2,6 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useCallback } from "react";
 import { useFocusRing } from "@react-aria/focus";
 import { useHover } from "@react-aria/interactions";
+import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
 import '../../../assets/CarouselDots.css';const tabsContainer = "_tabsContainer_1yet6_1";
 const tabs = "_tabs_1yet6_1";
 const transparent = "_transparent_1yet6_28";
@@ -29,9 +30,8 @@ const CarouselDots = ({
   currentPage,
   onDotClick,
   dotSize = "md",
-  tabSize,
-  // For backward compatibility
   variant = "standard",
+  focusStyle = "default",
   className = "",
   dotsWrapperClassName = "",
   dotClassName = "",
@@ -39,7 +39,7 @@ const CarouselDots = ({
 }) => {
   const tabsRef = useRef(null);
   const wrapperRef = useRef(null);
-  const effectiveDotSize = dotSize || tabSize || "md";
+  const effectiveDotSize = dotSize || "md";
   const {
     isFocusVisible,
     focusProps
@@ -51,6 +51,9 @@ const CarouselDots = ({
   const [isAnimating, setIsAnimating] = useState(false);
   const [prevPage, setPrevPage] = useState(currentPage);
   const [offsetPercentage, setOffsetPercentage] = useState(0);
+  const focusClass = focusStyleVariants({
+    focusStyle
+  });
   const handleKeyDown = (e) => {
     if (e.key === "ArrowRight" || e.key === "ArrowDown") {
       e.preventDefault();
@@ -93,6 +96,7 @@ const CarouselDots = ({
   const getDotsWrapperClasses = () => {
     const classes = [styles.tabs];
     if (variant === "transparent") classes.push(styles.transparent);
+    classes.push(focusClass);
     if (dotsWrapperClassName) classes.push(dotsWrapperClassName);
     return classes.join(" ");
   };

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

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

package/dist/components/index.d.ts

@@ -7,6 +7,7 @@ export { default as Button } from './Button';
 export { default as ButtonGroup } from './ButtonGroup';
 export { default as CalloutBanner } from './CalloutBanner';
 export { default as CardSection } from './CardSection';
+export { default as Carousel } from './Carousel';
 export { default as Checkbox } from './Checkbox';
 export { default as CheckboxGroup } from './CheckboxGroup';
 export { default as CreditCardNumberField } from './CreditCardNumberField';
@@ -47,6 +48,7 @@ export { default as Section } from './Section';
 export { default as Select } from './SelectNative';
 export { default as SelectCard } from './SelectCard';
 export { default as SelectNative } from './SelectNative';
+export { default as Slider } from './Slider';
 export { default as SubHeading } from './SubHeading';
 export { default as Switch } from './Switch';
 export { default as Tag } from './Tag';

package/dist/components/index.js

@@ -8,6 +8,7 @@ import { Button } from "./Button/Button.js";
 import { ButtonGroup } from "./ButtonGroup/ButtonGroup.js";
 import { CalloutBanner } from "./CalloutBanner/CalloutBanner.js";
 import { default as default2 } from "./CardSection/CardSection.js";
+import { Carousel } from "./Carousel/Carousel.js";
 import { Checkbox } from "./Checkbox/Checkbox.js";
 import { CheckboxGroup } from "./CheckboxGroup/CheckboxGroup.js";
 import { CreditCardNumberField } from "./CreditCardNumberField/CreditCardNumberField.js";
@@ -47,6 +48,7 @@ import { SearchField } from "./SearchField/SearchField.js";
 import { default as default8 } from "./Section/Section.js";
 import { SelectNative, SelectNative as SelectNative2 } from "./SelectNative/SelectNative.js";
 import { default as default9 } from "./SelectCard/SelectCard.js";
+import { Slider } from "./Slider/Slider.js";
 import { SubHeading } from "./SubHeading/SubHeading.js";
 import { Switch } from "./Switch/Switch.js";
 import { Tag } from "./Tag/Tag.js";
@@ -66,6 +68,7 @@ export {
   ButtonGroup,
   CalloutBanner,
   default2 as CardSection,
+  Carousel,
   Checkbox,
   CheckboxGroup,
   CreditCardNumberField,
@@ -106,6 +109,7 @@ export {
   SelectNative as Select,
   default9 as SelectCard,
   SelectNative2 as SelectNative,
+  Slider,
   SubHeading,
   Switch,
   Tag,

package/dist/components/index.js.map

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

package/dist/index.js

@@ -8,6 +8,7 @@ import { Button } from "./components/Button/Button.js";
 import { ButtonGroup } from "./components/ButtonGroup/ButtonGroup.js";
 import { CalloutBanner } from "./components/CalloutBanner/CalloutBanner.js";
 import { default as default2 } from "./components/CardSection/CardSection.js";
+import { Carousel } from "./components/Carousel/Carousel.js";
 import { Checkbox } from "./components/Checkbox/Checkbox.js";
 import { CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup.js";
 import { CreditCardNumberField } from "./components/CreditCardNumberField/CreditCardNumberField.js";
@@ -47,6 +48,7 @@ import { SearchField } from "./components/SearchField/SearchField.js";
 import { default as default8 } from "./components/Section/Section.js";
 import { SelectNative, SelectNative as SelectNative2 } from "./components/SelectNative/SelectNative.js";
 import { default as default9 } from "./components/SelectCard/SelectCard.js";
+import { Slider } from "./components/Slider/Slider.js";
 import { SubHeading } from "./components/SubHeading/SubHeading.js";
 import { Switch } from "./components/Switch/Switch.js";
 import { Tag } from "./components/Tag/Tag.js";
@@ -66,6 +68,7 @@ export {
   ButtonGroup,
   CalloutBanner,
   default2 as CardSection,
+  Carousel,
   Checkbox,
   CheckboxGroup,
   CreditCardNumberField,
@@ -106,6 +109,7 @@ export {
   SelectNative as Select,
   default9 as SelectCard,
   SelectNative2 as SelectNative,
+  Slider,
   SubHeading,
   Switch,
   Tag,

package/dist/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alto-avios/alto-ui",
-  "version": "3.4.0-alpha.2",
+  "version": "3.4.0-alpha.4",
   "description": "A react component library for Alto Design System",
   "author": {
     "name": "Ian Caldwell IAGL",