@alto-avios/alto-ui 3.8.0 → 4.0.0

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

@@ -0,0 +1,44 @@
+export interface CarouselButtonProps {
+    /**
+     * Direction of the button (prev or next)
+     */
+    dir: 'prev' | 'next';
+    /**
+     * Button style variant
+     * @default 'neutral'
+     */
+    variant?: 'neutral' | 'white' | 'shapeFlat' | 'shapeElevated' | 'gradient';
+    /**
+     * Button size
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Focus style
+     * @default 'default'
+     */
+    focusStyle?: 'default' | 'white';
+    /**
+     * Whether to hide the button when disabled
+     * @default false
+     */
+    hideDisabledArrow?: boolean;
+    /**
+     * Additional CSS class name for the button container
+     */
+    className?: string;
+    /**
+     * Additional CSS class name for the button content
+     */
+    buttonClassName?: string;
+    /**
+     * Custom click handler for implementing custom navigation behavior
+     */
+    onClick?: () => void;
+    /**
+     * @private
+     */
+    iconType?: 'chevron';
+}
+export declare const CarouselButton: ({ dir, variant, size, focusStyle, hideDisabledArrow, iconType, className, buttonClassName, onClick, }: CarouselButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CarouselButton;

package/dist/components/Carousel/CarouselButton/CarouselButton.js

@@ -0,0 +1,195 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { e as CarouselButton$1, i as iconButtonStyles } from "../../../IconButton.module-4obqG6tY.js";
+import { useFocusRing } from "@react-aria/focus";
+import { focusStyleVariants } from "../../../utils/focus/focusStyles.js";
+import { Icon } from "../../Icon/Icon.js";
+import '../../../assets/CarouselButton.css';const arrowContainer = "_arrowContainer_f9nx_1";
+const iconButton = "_iconButton_f9nx_20";
+const hideDisabledArrow = "_hideDisabledArrow_f9nx_26";
+const neutral = "_neutral_f9nx_32";
+const white = "_white_f9nx_44";
+const shapeFlat = "_shapeFlat_f9nx_62";
+const shapeElevated = "_shapeElevated_f9nx_72";
+const gradient = "_gradient_f9nx_93";
+const next = "_next_f9nx_100";
+const fullHeight = "_fullHeight_f9nx_137";
+const prev = "_prev_f9nx_148";
+const styles = {
+  arrowContainer,
+  iconButton,
+  hideDisabledArrow,
+  neutral,
+  white,
+  shapeFlat,
+  shapeElevated,
+  gradient,
+  next,
+  fullHeight,
+  prev
+};
+const CarouselButton = ({
+  dir,
+  variant = "neutral",
+  size = "md",
+  focusStyle = "default",
+  hideDisabledArrow: hideDisabledArrow2 = false,
+  iconType = "chevron",
+  className = "",
+  buttonClassName = "",
+  onClick
+}) => {
+  const {
+    isFocusVisible,
+    focusProps,
+    isFocused
+  } = useFocusRing();
+  const directionClass = dir === "prev" ? styles.prev : styles.next;
+  const [isHovered, setIsHovered] = useState(false);
+  const [isPressed, setIsPressed] = useState(false);
+  const [isDisabled, setIsDisabled] = useState(false);
+  const [shouldShowFocusRing, setShouldShowFocusRing] = useState(false);
+  const variantStyleClass = variant ? styles[variant] : "";
+  const shouldBeFullHeight = variant === "gradient";
+  const buttonRef = useRef(null);
+  useEffect(() => {
+    const element = buttonRef.current;
+    if (!element) return;
+    setIsDisabled(element.getAttribute("aria-disabled") === "true");
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "attributes" && mutation.attributeName === "aria-disabled") {
+          const isCurrentlyDisabled = element.getAttribute("aria-disabled") === "true";
+          setIsDisabled(isCurrentlyDisabled);
+          if (isCurrentlyDisabled) {
+            setIsHovered(false);
+            setIsPressed(false);
+            setShouldShowFocusRing(false);
+          }
+        }
+      });
+    });
+    observer.observe(element, {
+      attributes: true,
+      attributeFilter: ["aria-disabled"]
+    });
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  useEffect(() => {
+    if (!buttonRef.current) return;
+    const element = buttonRef.current;
+    const handleFocus = (e) => {
+      if (e.target === element && isFocusVisible) {
+        setShouldShowFocusRing(true);
+        const carouselContainer = element.closest('[role="region"][aria-roledescription="carousel"], .carouselWrapper');
+        if (carouselContainer) {
+          const siblingButtons = carouselContainer.querySelectorAll('[dir="prev"], [dir="next"]');
+          siblingButtons.forEach((button) => {
+            if (button !== element && button instanceof HTMLElement) {
+              button.dispatchEvent(new CustomEvent("carousel:hideFocus"));
+            }
+          });
+        }
+      }
+    };
+    const handleBlur = () => {
+      setShouldShowFocusRing(false);
+    };
+    const handleHideFocus = () => {
+      setShouldShowFocusRing(false);
+    };
+    element.addEventListener("focus", handleFocus);
+    element.addEventListener("blur", handleBlur);
+    element.addEventListener("carousel:hideFocus", handleHideFocus);
+    return () => {
+      element.removeEventListener("focus", handleFocus);
+      element.removeEventListener("blur", handleBlur);
+      element.removeEventListener("carousel:hideFocus", handleHideFocus);
+    };
+  }, [isFocusVisible]);
+  useEffect(() => {
+    if (!isFocusVisible) {
+      setShouldShowFocusRing(false);
+    } else if (isFocused && isFocusVisible) {
+      setShouldShowFocusRing(true);
+    }
+  }, [isFocusVisible, isFocused]);
+  const getIconSize = () => {
+    if (size === "sm") return "0.75x";
+    if (size === "lg") return "2x";
+    if (size === "md") return "1.25x";
+    return "1x";
+  };
+  const getIconColor = () => {
+    switch (variant) {
+      case "white":
+        return "whitePrimary";
+      case "gradient":
+        return "accentPrimary";
+      default:
+        return "whiteOnVibrant";
+    }
+  };
+  const containerFocusClass = shouldBeFullHeight && shouldShowFocusRing ? focusStyleVariants({
+    focusStyle
+  }) : "";
+  const getButtonClasses = () => {
+    let styleVariant = "neutral";
+    let emphasis = "quaternary";
+    if (variant === "white") {
+      styleVariant = "white";
+      emphasis = "secondary";
+    }
+    const baseClass = iconButtonStyles.iconButton;
+    const sizeClass = iconButtonStyles[size] || "";
+    const emphasisClassKey = `${styleVariant}${emphasis.charAt(0).toUpperCase() + emphasis.slice(1)}`;
+    const emphasisClass = iconButtonStyles[emphasisClassKey] || "";
+    const focusClass = !shouldBeFullHeight && shouldShowFocusRing ? focusStyleVariants({
+      focusStyle
+    }) : "";
+    return `${baseClass} ${sizeClass} ${emphasisClass} ${focusClass} ${buttonClassName || ""}`;
+  };
+  const mouseEventHandlers = isDisabled ? {} : {
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
+    onMouseDown: () => setIsPressed(true),
+    onMouseUp: () => setIsPressed(false)
+  };
+  const handleClick = () => {
+    if (!isDisabled && onClick) {
+      onClick();
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === " " || e.key === "Enter") {
+      e.preventDefault();
+    }
+  };
+  const handleKeyUp = (e) => {
+    if ((e.key === " " || e.key === "Enter") && !isDisabled) {
+      handleClick();
+      if (buttonRef.current) {
+        buttonRef.current.click();
+      }
+    }
+  };
+  const getTabIndex = () => {
+    if (isDisabled) {
+      return -1;
+    }
+    return 0;
+  };
+  const getAriaLabel = () => {
+    const action = dir === "prev" ? "Previous" : "Next";
+    const state = isDisabled ? ", unavailable" : "";
+    return `${action} slide${state}`;
+  };
+  return /* @__PURE__ */ jsx(CarouselButton$1, { dir, className: `${styles.arrowContainer} ${directionClass} ${hideDisabledArrow2 ? styles.hideDisabledArrow : ""} ${variantStyleClass || ""} ${shouldBeFullHeight ? styles.fullHeight : ""} ${containerFocusClass} ${className || ""}`, ...focusProps, ...mouseEventHandlers, "data-hovered": !isDisabled && isHovered ? true : void 0, "data-pressed": !isDisabled && isPressed ? true : void 0, "data-disabled": isDisabled ? true : void 0, "data-focused": !isDisabled && isFocused ? true : void 0, "data-focus-visible": shouldShowFocusRing ? true : void 0, ref: buttonRef, tabIndex: getTabIndex(), onClick: handleClick, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp, "aria-label": getAriaLabel(), role: "button", children: /* @__PURE__ */ jsx("div", { className: `${getButtonClasses()} ${styles.iconButton}`, "data-focused": !shouldBeFullHeight && !isDisabled && isFocused && shouldShowFocusRing ? true : void 0, "data-focus-visible": !shouldBeFullHeight && !isDisabled && shouldShowFocusRing ? true : void 0, "data-parent-hovered": !isDisabled && isHovered ? true : void 0, "data-parent-pressed": !isDisabled && isPressed ? true : void 0, "data-parent-disabled": isDisabled ? true : void 0, "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { iconName: `${iconType}-${dir === "prev" ? "left" : "right"}`, color: getIconColor(), iconSize: getIconSize(), "aria-hidden": "true" }) }) });
+};
+export {
+  CarouselButton,
+  CarouselButton as default
+};
+//# sourceMappingURL=CarouselButton.js.map

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

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

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

@@ -0,0 +1,7 @@
+import { ArgTypes } from '@storybook/react';
+import { CarouselProps } from './Carousel';
+/**
+ * Shared argTypes configuration for all Carousel stories
+ * This ensures consistent controls across all story files
+ */
+export declare const carouselArgTypes: ArgTypes<CarouselProps>;

package/dist/components/Carousel/CarouselControls.js

@@ -0,0 +1,305 @@
+const carouselArgTypes = {
+  // Accessibility Controls
+  "aria-label": {
+    control: "text",
+    description: "Accessible name for the carousel - describes the purpose or content for screen readers",
+    table: {
+      category: "Accessibility",
+      type: { summary: "string" }
+    }
+  },
+  "aria-describedby": {
+    control: "text",
+    description: "ID of element that describes the carousel",
+    table: {
+      category: "Accessibility",
+      type: { summary: "string" }
+    }
+  },
+  // Core Configuration
+  looping: {
+    control: { type: "radio" },
+    options: ["off", "infinite", "backToStart"],
+    description: 'Looping behavior: "infinite" for continuous cycling, "backToStart" for jumping back to start, "off" to disable looping',
+    defaultValue: "off",
+    table: {
+      category: "Core Configuration",
+      type: { summary: '"infinite" | "backToStart" | "off"' },
+      defaultValue: { summary: '"off"' }
+    }
+  },
+  itemsPerPage: {
+    control: { type: "number", min: 1, max: 10, step: 0.25 },
+    description: "Number of items to display per page (minimum: 1). Decimal values (e.g., 2.25) can be used to show partial items for peek effects",
+    defaultValue: 1,
+    table: {
+      category: "Core Configuration",
+      type: { summary: "number | ResponsiveValue<number>" },
+      defaultValue: { summary: "1" }
+    }
+  },
+  spaceBetweenItems: {
+    control: { type: "number", min: 0, max: 100 },
+    description: "Space between carousel items in pixels. Works with both scroll padding and fractional items",
+    defaultValue: 0,
+    table: {
+      category: "Core Configuration",
+      type: { summary: "number | ResponsiveValue<number>" },
+      defaultValue: { summary: "0" }
+    }
+  },
+  scrollPadding: {
+    control: "text",
+    description: 'Amount of padding to add to create a "peek" effect. Accepts any valid CSS dimension (px, rem, em, %) - e.g., "15%", "20px", "2rem"',
+    table: {
+      category: "Core Configuration",
+      type: { summary: "string | ResponsiveValue<string>" },
+      defaultValue: { summary: "undefined" }
+    }
+  },
+  mouseDragging: {
+    control: "boolean",
+    description: "Whether to enable mouse dragging for the carousel",
+    defaultValue: true,
+    table: {
+      category: "Core Configuration",
+      type: { summary: "boolean" },
+      defaultValue: { summary: "true" }
+    }
+  },
+  // Button and Controls
+  iconType: {
+    table: {
+      disable: true
+    }
+  },
+  arrowStyleVariant: {
+    control: { type: "select" },
+    options: ["neutral", "white", "shapeFlat", "shapeElevated", "gradient"],
+    description: "Style variant for navigation arrow buttons",
+    defaultValue: "neutral",
+    table: {
+      category: "Button and Controls",
+      type: {
+        summary: '"neutral" | "white" | "shapeFlat" | "shapeElevated" | "gradient"'
+      },
+      defaultValue: { summary: '"neutral"' }
+    }
+  },
+  arrowSize: {
+    control: { type: "select" },
+    options: ["sm", "md", "lg"],
+    description: "Size of navigation buttons",
+    defaultValue: "md",
+    table: {
+      category: "Button and Controls",
+      type: {
+        summary: '"sm" | "md" | "lg" | ResponsiveValue<"sm" | "md" | "lg">'
+      },
+      defaultValue: { summary: '"md"' }
+    }
+  },
+  hideDisabledArrow: {
+    control: "boolean",
+    description: "Whether to hide navigation buttons when they are disabled (e.g., at first/last slide when looping is off)",
+    defaultValue: false,
+    table: {
+      category: "Button and Controls",
+      type: { summary: "boolean" },
+      defaultValue: { summary: "false" }
+    }
+  },
+  showArrowsOnHover: {
+    control: "boolean",
+    description: "Whether to show arrows only when hovering over the carousel or when it has focus",
+    defaultValue: false,
+    table: {
+      category: "Button and Controls",
+      type: { summary: "boolean | ResponsiveValue<boolean>" },
+      defaultValue: { summary: "false" }
+    }
+  },
+  focusStyle: {
+    control: { type: "radio" },
+    options: ["default", "white"],
+    description: 'Focus style for interactive elements - use "white" for dark backgrounds',
+    defaultValue: "default",
+    table: {
+      category: "Button and Controls",
+      type: { summary: '"default" | "white"' },
+      defaultValue: { summary: '"default"' }
+    }
+  },
+  // Dots/Pagination
+  hideDots: {
+    control: "boolean",
+    description: "Whether to hide pagination dots. Can be set responsively to show/hide dots at different breakpoints",
+    defaultValue: false,
+    table: {
+      category: "Dots/Pagination",
+      type: { summary: "boolean | ResponsiveValue<boolean>" },
+      defaultValue: { summary: "false" }
+    }
+  },
+  dotsSize: {
+    control: { type: "radio" },
+    options: ["md", "lg"],
+    description: "Size of pagination dots when visible",
+    defaultValue: "md",
+    table: {
+      category: "Dots/Pagination",
+      type: { summary: '"md" | "lg"' },
+      defaultValue: { summary: '"md"' }
+    }
+  },
+  dotsVariant: {
+    control: { type: "radio" },
+    options: ["standard", "transparent"],
+    description: "Visual style of pagination dots",
+    defaultValue: "standard",
+    table: {
+      category: "Dots/Pagination",
+      type: { summary: '"standard" | "transparent"' },
+      defaultValue: { summary: '"standard"' }
+    }
+  },
+  // Autoplay
+  autoPlay: {
+    control: "boolean",
+    description: "Whether the autoplay is enabled",
+    defaultValue: false,
+    table: {
+      category: "Autoplay",
+      type: { summary: "boolean" },
+      defaultValue: { summary: "false" }
+    }
+  },
+  autoPlayInterval: {
+    control: { type: "number", min: 1e3, max: 1e4, step: 500 },
+    description: "Interval in milliseconds between slides during autoplay",
+    defaultValue: 2e3,
+    table: {
+      category: "Autoplay",
+      type: { summary: "number" },
+      defaultValue: { summary: "2000" }
+    }
+  },
+  autoPlayStyleVariant: {
+    control: { type: "select" },
+    options: ["neutralVibrant", "neutralSubtle", "whiteVibrant", "whiteSubtle"],
+    description: "Style variant for autoplay control button",
+    defaultValue: "neutralVibrant",
+    table: {
+      category: "Autoplay",
+      type: {
+        summary: '"neutralVibrant" | "neutralSubtle" | "whiteVibrant" | "whiteSubtle"'
+      },
+      defaultValue: { summary: '"neutralVibrant"' }
+    }
+  },
+  autoPlayControlSize: {
+    control: { type: "radio" },
+    options: ["sm", "md"],
+    description: "Size of autoplay control button",
+    defaultValue: "md",
+    table: {
+      category: "Autoplay",
+      type: { summary: '"sm" | "md"' },
+      defaultValue: { summary: '"md"' }
+    }
+  },
+  // Custom Styling & Positioning
+  carouselWrapperClassName: {
+    control: "text",
+    description: 'Custom class name for the outermost wrapper to allow custom styles - use your preferred naming convention (helper: "defaultCarouselWrapper")',
+    table: {
+      category: "Custom Styling & Positioning",
+      type: { summary: "string" }
+    }
+  },
+  prevArrowClassName: {
+    control: "text",
+    description: 'Custom class name for the previous button to allow custom styles - use your preferred naming convention (helper: "defaultPrevButton")',
+    table: {
+      category: "Custom Styling & Positioning",
+      type: { summary: "string" }
+    }
+  },
+  nextArrowClassName: {
+    control: "text",
+    description: 'Custom class name for the next button to allow custom styles - use your preferred naming convention (helper: "defaultNextButton")',
+    table: {
+      category: "Custom Styling & Positioning",
+      type: { summary: "string" }
+    }
+  },
+  autoplayControlClassName: {
+    control: "text",
+    description: 'Custom class name for the autoplay control to allow custom styles - use your preferred naming convention (helper: "autoplayControl")',
+    table: {
+      category: "Custom Styling & Positioning",
+      type: { summary: "string" }
+    }
+  },
+  dotsContainerClassName: {
+    control: "text",
+    description: 'Custom class name for the dots container to allow custom styles - use your preferred naming convention (helper: "defaultDotsContainer")',
+    table: {
+      category: "Custom Styling & Positioning",
+      type: { summary: "string" }
+    }
+  },
+  dotsWrapperClassName: {
+    control: "text",
+    description: "Custom class name for the dots wrapper to allow custom styles - use your preferred naming convention",
+    table: {
+      category: "Custom Styling & Positioning",
+      type: { summary: "string" }
+    }
+  },
+  dotClassName: {
+    control: "text",
+    description: "Custom class name for individual dots to allow custom styles - use your preferred naming convention",
+    table: {
+      category: "Custom Styling & Positioning",
+      type: { summary: "string" }
+    }
+  },
+  activeDotClassName: {
+    control: "text",
+    description: "Custom class name for the active dot to allow custom styles - use your preferred naming convention",
+    table: {
+      category: "Custom Styling & Positioning",
+      type: { summary: "string" }
+    }
+  },
+  itemWrapperClassName: {
+    control: "text",
+    description: "Custom class name for individual carousel item wrappers to allow custom styles - use your preferred naming convention",
+    table: {
+      category: "Custom Styling & Positioning",
+      type: { summary: "string" }
+    }
+  },
+  activeItemClassName: {
+    control: "text",
+    description: "Custom class name for the currently active/visible carousel item to allow custom styles - use your preferred naming convention",
+    table: {
+      category: "Custom Styling & Positioning",
+      type: { summary: "string" }
+    }
+  },
+  // Content (disable control)
+  children: {
+    control: { type: "object" },
+    description: "Content to be displayed in the carousel",
+    table: {
+      category: "Content",
+      disable: true
+    }
+  }
+};
+export {
+  carouselArgTypes
+};
+//# sourceMappingURL=CarouselControls.js.map

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

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

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

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export interface CarouselDotsProps {
+    totalItems: number;
+    currentPage: number;
+    onDotClick: (index: number) => void;
+    dotsSize?: 'md' | 'lg';
+    variant?: 'standard' | 'transparent';
+    focusStyle?: 'default' | 'white';
+    className?: string;
+    dotsWrapperClassName?: string;
+    dotClassName?: string;
+    activeDotClassName?: string;
+    isTransitioning?: boolean;
+}
+export declare const CarouselDots: React.FC<CarouselDotsProps>;
+export default CarouselDots;