glide-react 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,651 @@
+import React$1, { ReactNode, ReactElement, RefObject, CSSProperties } from 'react';
+
+interface TouchObject {
+    startX: number;
+    startY: number;
+    curX: number;
+    curY: number;
+    swipeLength?: number;
+}
+type SwipeDirection = 'left' | 'right' | 'up' | 'down' | 'vertical';
+interface ResponsiveSettings {
+    breakpoint: number;
+    settings: Partial<GlideSettings> | 'disabled';
+}
+interface GlideSettings {
+    /** Enable keyboard navigation */
+    accessibility: boolean;
+    /** Adjust height to current slide */
+    adaptiveHeight: boolean;
+    /** Show prev/next arrows */
+    arrows: boolean;
+    /** Auto-advance slides */
+    autoplay: boolean;
+    /** Auto-advance interval in ms */
+    autoplaySpeed: number;
+    /** Center the active slide */
+    centerMode: boolean;
+    /** Side padding in center mode (e.g., "50px" or "10%") */
+    centerPadding: string;
+    /** Additional CSS class */
+    className: string;
+    /** CSS easing function */
+    cssEase: string;
+    /** Show dot indicators */
+    dots: boolean;
+    /** Dots container class */
+    dotsClass: string;
+    /** Enable mouse dragging */
+    draggable: boolean;
+    /** JS animation easing */
+    easing: string;
+    /** Resistance at edges (0-1) */
+    edgeFriction: number;
+    /** Use fade instead of slide */
+    fade: boolean;
+    /** Click slide to navigate */
+    focusOnSelect: boolean;
+    /** Infinite loop scrolling */
+    infinite: boolean;
+    /** Starting slide index */
+    initialSlide: number;
+    /** Lazy load mode: "ondemand" | "progressive" | null */
+    lazyLoad: 'ondemand' | 'progressive' | null;
+    /** Pause autoplay on dot hover */
+    pauseOnDotsHover: boolean;
+    /** Pause autoplay on focus */
+    pauseOnFocus: boolean;
+    /** Pause autoplay on hover */
+    pauseOnHover: boolean;
+    /** Responsive breakpoint settings */
+    responsive: ResponsiveSettings[] | null;
+    /** Grid rows per slide */
+    rows: number;
+    /** Right-to-left mode */
+    rtl: boolean;
+    /** Slide element tag */
+    slide: string;
+    /** Grid columns per row */
+    slidesPerRow: number;
+    /** Slides per navigation */
+    slidesToScroll: number;
+    /** Visible slides */
+    slidesToShow: number;
+    /** Transition duration in ms */
+    speed: number;
+    /** Enable touch swiping */
+    swipe: boolean;
+    /** Swipe to any slide position */
+    swipeToSlide: boolean;
+    /** Enable touch drag */
+    touchMove: boolean;
+    /** Swipe threshold divisor */
+    touchThreshold: number;
+    /** Use CSS transitions */
+    useCSS: boolean;
+    /** Use CSS transforms */
+    useTransform: boolean;
+    /** Variable slide widths */
+    variableWidth: boolean;
+    /** Vertical slide mode */
+    vertical: boolean;
+    /** Enable vertical swiping */
+    verticalSwiping: boolean;
+    /** Block nav during animation */
+    waitForAnimate: boolean;
+    /** Disable slider behavior */
+    disabled: boolean;
+}
+interface GlideCallbacks {
+    /** Callback after slide change */
+    afterChange?: (currentSlide: number) => void;
+    /** Callback before slide change */
+    beforeChange?: (currentSlide: number, nextSlide: number) => void;
+    /** Custom dots container */
+    appendDots?: (dots: ReactNode) => ReactElement;
+    /** Custom dot renderer */
+    customPaging?: (index: number) => ReactElement;
+    /** Callback at edge swipe */
+    onEdge?: (direction: SwipeDirection) => void;
+    /** Callback on init */
+    onInit?: () => void;
+    /** Lazy load error callback */
+    onLazyLoadError?: (index: number) => void;
+    /** Callback on re-init */
+    onReInit?: () => void;
+    /** Swipe direction callback */
+    swipeEvent?: (direction: SwipeDirection) => void;
+    /** Callback on swipe end */
+    onSwipe?: (direction: SwipeDirection) => void;
+}
+interface GlideCustomElements {
+    /** Custom next arrow element */
+    nextArrow?: ReactElement;
+    /** Custom prev arrow element */
+    prevArrow?: ReactElement;
+}
+interface GlideProps extends Partial<GlideSettings>, GlideCallbacks, GlideCustomElements {
+    /** Slider content (slides) */
+    children?: ReactNode;
+    /** Sync with another slider */
+    asNavFor?: RefObject<GlideRef>;
+}
+interface GlideState {
+    /** Currently animating */
+    animating: boolean;
+    /** Autoplay state: "playing" | "paused" | "hovered" | "focused" | null */
+    autoplaying: 'playing' | 'paused' | 'hovered' | 'focused' | null;
+    /** Movement direction: 0 = forward, 1 = backward */
+    currentDirection: number;
+    /** Current transform position */
+    currentLeft: number | null;
+    /** Active slide index */
+    currentSlide: number;
+    /** Direction multiplier */
+    direction: number;
+    /** Mouse/touch drag active */
+    dragging: boolean;
+    /** Dragged past edge */
+    edgeDragged: boolean;
+    /** Component initialized */
+    initialized: boolean;
+    /** Indices of lazy loaded slides */
+    lazyLoadedList: number[];
+    /** Container height */
+    listHeight: number | null;
+    /** Container width */
+    listWidth: number | null;
+    /** Native scroll in progress */
+    scrolling: boolean;
+    /** Total slide count */
+    slideCount: number;
+    /** Single slide height */
+    slideHeight: number | null;
+    /** Single slide width */
+    slideWidth: number | null;
+    /** Current swipe position */
+    swipeLeft: number | null;
+    /** Swipe event fired */
+    swiped: boolean;
+    /** Swipe in progress */
+    swiping: boolean;
+    /** Touch tracking object */
+    touchObject: TouchObject;
+    /** Track inline styles */
+    trackStyle: CSSProperties;
+    /** Track element width */
+    trackWidth: number;
+    /** Destination slide index */
+    targetSlide: number;
+}
+interface GlideRef {
+    /** Go to previous slide */
+    prev: () => void;
+    /** Go to next slide */
+    next: () => void;
+    /** Go to specific slide index */
+    goTo: (index: number, dontAnimate?: boolean) => void;
+    /** Pause autoplay */
+    pause: () => void;
+    /** Start autoplay */
+    play: () => void;
+    /** Get current slide index */
+    innerSlider: {
+        state: {
+            currentSlide: number;
+        };
+    } | null;
+}
+interface SlideSpec extends GlideSettings {
+    slideIndex: number;
+    currentSlide: number;
+    slideCount: number;
+    slideWidth: number;
+    slideHeight: number;
+    listWidth: number;
+    listHeight: number;
+    trackRef?: HTMLDivElement | null;
+    lazyLoadedList: number[];
+    targetSlide: number;
+}
+
+interface UseTrackOptions {
+    /** Current slide index */
+    currentSlide: number;
+    /** Total number of actual slides (not including clones) */
+    slideCount: number;
+    /** Number of slides to show at once */
+    slidesToShow: number;
+    /** Number of slides to scroll per navigation */
+    slidesToScroll: number;
+    /** Enable infinite looping */
+    infinite: boolean;
+    /** Enable center mode */
+    centerMode: boolean;
+    /** Padding for center mode (e.g., "50px" or "10%") */
+    centerPadding: string;
+    /** Width of the slider container */
+    listWidth: number;
+    /** Height of the slider container */
+    listHeight: number;
+    /** Width of a single slide (will be calculated if not provided) */
+    slideWidth?: number;
+    /** Height of a single slide */
+    slideHeight?: number;
+    /** Use fade effect instead of sliding */
+    fade: boolean;
+    /** Vertical slide mode */
+    vertical: boolean;
+    /** Variable width slides */
+    variableWidth: boolean;
+    /** Use CSS transforms */
+    useTransform: boolean;
+    /** Whether slider is disabled */
+    disabled: boolean;
+    /** Animation speed in ms */
+    speed: number;
+    /** CSS easing function */
+    cssEase: string;
+    /** Right-to-left mode */
+    rtl: boolean;
+    /** Whether currently animating */
+    animating: boolean;
+    /** Current swipe left position (during drag) */
+    swipeLeft: number | null;
+}
+interface UseTrackResult {
+    /** Calculated width for each slide */
+    slideWidth: number;
+    /** Style object for the track element */
+    trackStyle: CSSProperties;
+    /** Number of pre-clone slides needed */
+    preCloneCount: number;
+    /** Number of post-clone slides needed */
+    postCloneCount: number;
+    /** Total slides including clones */
+    totalSlides: number;
+    /** Get track style for a specific slide index (for goToSlide) */
+    getTrackStyleForSlide: (slideIndex: number, animate?: boolean) => CSSProperties;
+    /** Track width in pixels */
+    trackWidth: number;
+}
+declare function useTrack(options: UseTrackOptions): UseTrackResult;
+
+interface TrackProps {
+    /** Track inline styles (transform, width, transition) */
+    trackStyle: CSSProperties;
+    /** Width of each slide */
+    slideWidth: number;
+    /** Height of each slide (for vertical mode) */
+    slideHeight?: number;
+    /** Total number of actual slides */
+    slideCount: number;
+    /** Current active slide index */
+    currentSlide: number;
+    /** Target slide during animation */
+    targetSlide: number;
+    /** Number of slides to show */
+    slidesToShow: number;
+    /** Number of slides to scroll */
+    slidesToScroll: number;
+    /** Enable infinite looping */
+    infinite: boolean;
+    /** Enable center mode */
+    centerMode: boolean;
+    /** Center mode padding */
+    centerPadding: string;
+    /** Use fade effect */
+    fade: boolean;
+    /** Vertical mode */
+    vertical: boolean;
+    /** Variable width mode */
+    variableWidth: boolean;
+    /** Right-to-left mode */
+    rtl: boolean;
+    /** Whether slider is disabled */
+    disabled: boolean;
+    /** Lazy load mode */
+    lazyLoad: 'ondemand' | 'progressive' | null;
+    /** List of lazy loaded slide indices */
+    lazyLoadedList: number[];
+    /** Animation speed */
+    speed: number;
+    /** CSS easing function */
+    cssEase: string;
+    /** Use CSS transforms */
+    useCSS: boolean;
+    /** Children (slides) */
+    children: ReactNode;
+    /** Click handler for focusOnSelect */
+    onSlideClick?: (index: number) => void;
+    /** Enable focus on select */
+    focusOnSelect: boolean;
+    /** Mouse enter handler (for pause on hover) */
+    onMouseEnter?: React$1.MouseEventHandler<HTMLDivElement>;
+    /** Mouse over handler */
+    onMouseOver?: React$1.MouseEventHandler<HTMLDivElement>;
+    /** Mouse leave handler (for resume autoplay) */
+    onMouseLeave?: React$1.MouseEventHandler<HTMLDivElement>;
+}
+declare const Track: React$1.ForwardRefExoticComponent<TrackProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ArrowProps {
+    /** Current slide index */
+    currentSlide: number;
+    /** Total slide count */
+    slideCount: number;
+    /** Number of slides to show */
+    slidesToShow: number;
+    /** Enable infinite looping */
+    infinite: boolean;
+    /** Center mode enabled */
+    centerMode: boolean;
+    /** Click handler */
+    onClick: () => void;
+    /** Custom arrow element */
+    customArrow?: ReactElement | null;
+    /** Direction: 'prev' or 'next' */
+    direction: 'prev' | 'next';
+}
+declare const PrevArrow: React$1.FC<Omit<ArrowProps, 'direction'>>;
+declare const NextArrow: React$1.FC<Omit<ArrowProps, 'direction'>>;
+
+interface DotsProps {
+    /** Total number of slides */
+    slideCount: number;
+    /** Number of slides to scroll per navigation */
+    slidesToScroll: number;
+    /** Number of slides to show */
+    slidesToShow: number;
+    /** Current slide index */
+    currentSlide: number;
+    /** Enable infinite looping */
+    infinite: boolean;
+    /** Click handler */
+    onDotClick: (index: number) => void;
+    /** Custom dot renderer */
+    customPaging?: (index: number) => ReactElement;
+    /** Custom dots container */
+    appendDots?: (dots: ReactNode) => ReactElement;
+    /** Dots container class */
+    dotsClass: string;
+    /** Pause on dots hover handler */
+    onMouseEnter?: () => void;
+    /** Resume on dots leave handler */
+    onMouseLeave?: () => void;
+}
+declare const Dots: React$1.FC<DotsProps>;
+
+/**
+ * Check if we're running in a browser environment
+ */
+declare const canUseDOM: () => boolean;
+/**
+ * Get the width of an element
+ */
+declare const getWidth: (elem: HTMLElement | null) => number;
+/**
+ * Get the height of an element
+ */
+declare const getHeight: (elem: HTMLElement | null) => number;
+/**
+ * Clamp a number between lower and upper bounds
+ */
+declare function clamp(number: number, lowerBound: number, upperBound: number): number;
+/**
+ * Get the number of pre-clones needed for infinite scrolling
+ * Pre-clones are placed BEFORE original slides (last N slides cloned at beginning)
+ */
+declare const getPreClones: (spec: Partial<SlideSpec>) => number;
+/**
+ * Get the number of post-clones needed for infinite scrolling
+ * Post-clones are placed AFTER original slides (first N slides cloned at end)
+ */
+declare const getPostClones: (spec: Partial<SlideSpec>) => number;
+/**
+ * Get total number of slides including clones
+ */
+declare const getTotalSlides: (spec: Partial<SlideSpec>) => number;
+/**
+ * Check if we can navigate to the next slide
+ */
+declare const canGoNext: (spec: Partial<SlideSpec>) => boolean;
+/**
+ * Check if we can navigate to the previous slide
+ */
+declare const canGoPrev: (spec: Partial<SlideSpec>) => boolean;
+/**
+ * Get the swipe direction based on touch coordinates
+ */
+declare const getSwipeDirection: (touchObject: TouchObject, verticalSwiping?: boolean) => SwipeDirection;
+/**
+ * Safely prevent default on events (respects passive event listeners)
+ */
+declare const safePreventDefault: (event: Event | React.SyntheticEvent) => void;
+interface SwipeStartResult {
+    dragging: boolean;
+    touchObject: TouchObject;
+}
+/**
+ * Handle swipe/drag start
+ */
+declare const swipeStart: (e: React.MouseEvent | React.TouchEvent, swipe: boolean, draggable: boolean) => SwipeStartResult | null;
+interface SwipeMoveResult {
+    touchObject: TouchObject;
+    swipeLeft: number;
+    trackStyle: CSSProperties;
+    swiping?: boolean;
+    scrolling?: boolean;
+    edgeDragged?: boolean;
+    swiped?: boolean;
+}
+/**
+ * Handle swipe/drag move
+ */
+declare const swipeMove: (e: React.MouseEvent | React.TouchEvent, spec: {
+    scrolling: boolean;
+    animating: boolean;
+    vertical: boolean;
+    swipeToSlide: boolean;
+    verticalSwiping: boolean;
+    rtl: boolean;
+    currentSlide: number;
+    edgeFriction: number;
+    edgeDragged: boolean;
+    onEdge?: (direction: SwipeDirection) => void;
+    swiped: boolean;
+    swiping: boolean;
+    slideCount: number;
+    slidesToScroll: number;
+    infinite: boolean;
+    touchObject: TouchObject;
+    swipeEvent?: (direction: SwipeDirection) => void;
+    listHeight: number;
+    listWidth: number;
+    slideWidth: number;
+    slideHeight: number;
+    centerMode: boolean;
+    slidesToShow: number;
+    fade: boolean;
+    disabled: boolean;
+    variableWidth: boolean;
+    useTransform: boolean;
+}) => SwipeMoveResult | {
+    scrolling: true;
+} | null;
+interface SwipeEndResult {
+    dragging: boolean;
+    edgeDragged: boolean;
+    scrolling: boolean;
+    swiping: boolean;
+    swiped: boolean;
+    swipeLeft: null;
+    touchObject: TouchObject;
+    trackStyle?: CSSProperties;
+    triggerSlideHandler?: number;
+    currentDirection?: number;
+}
+/**
+ * Handle swipe/drag end
+ */
+declare const swipeEnd: (e: React.MouseEvent | React.TouchEvent, spec: {
+    dragging: boolean;
+    swipe: boolean;
+    touchObject: TouchObject;
+    listWidth: number;
+    touchThreshold: number;
+    verticalSwiping: boolean;
+    listHeight: number;
+    swipeToSlide: boolean;
+    scrolling: boolean;
+    onSwipe?: (direction: SwipeDirection) => void;
+    targetSlide: number;
+    currentSlide: number;
+    infinite: boolean;
+    slideCount: number;
+    slidesToScroll: number;
+    slidesToShow: number;
+    slideWidth: number;
+    slideHeight: number;
+    centerMode: boolean;
+    fade: boolean;
+    disabled: boolean;
+    variableWidth: boolean;
+    useTransform: boolean;
+    speed: number;
+    cssEase: string;
+    rtl: boolean;
+    vertical: boolean;
+}) => SwipeEndResult;
+/**
+ * Calculate the track's left/top offset for a given slide index
+ */
+declare const getTrackLeft: (spec: {
+    slideIndex: number;
+    infinite: boolean;
+    centerMode: boolean;
+    slideCount: number;
+    slidesToShow: number;
+    slidesToScroll: number;
+    slideWidth: number;
+    slideHeight: number;
+    fade: boolean;
+    vertical: boolean;
+    variableWidth: boolean;
+    disabled: boolean;
+    trackRef?: HTMLDivElement | null;
+    listWidth?: number;
+    centerPadding?: string;
+}) => number;
+/**
+ * Generate track CSS styles (non-animated)
+ */
+declare const getTrackCSS: (spec: {
+    left: number;
+    variableWidth: boolean;
+    slideCount: number;
+    slidesToShow: number;
+    slideWidth: number;
+    slideHeight?: number;
+    vertical: boolean;
+    fade: boolean;
+    useTransform: boolean;
+    infinite: boolean;
+    centerMode: boolean;
+    disabled: boolean;
+}) => CSSProperties;
+/**
+ * Generate track CSS styles (animated)
+ */
+declare const getTrackAnimateCSS: (spec: {
+    left: number;
+    variableWidth: boolean;
+    slideCount: number;
+    slidesToShow: number;
+    slideWidth: number;
+    slideHeight?: number;
+    vertical: boolean;
+    fade: boolean;
+    useTransform: boolean;
+    infinite: boolean;
+    centerMode: boolean;
+    disabled: boolean;
+    speed: number;
+    cssEase: string;
+}) => CSSProperties;
+/**
+ * Calculate slide width based on container and settings
+ */
+declare const calculateSlideWidth: (listWidth: number, slidesToShow: number, centerMode: boolean, centerPadding: string, vertical: boolean) => number;
+/**
+ * Handle keyboard input for slide navigation
+ */
+declare const keyHandler: (e: React.KeyboardEvent, accessibility: boolean, rtl: boolean) => "next" | "previous" | "";
+/**
+ * Calculate start index for lazy loading
+ */
+declare const lazyStartIndex: (spec: {
+    currentSlide: number;
+    centerMode: boolean;
+    slidesToShow: number;
+    centerPadding?: string;
+}) => number;
+/**
+ * Calculate end index for lazy loading
+ */
+declare const lazyEndIndex: (spec: {
+    currentSlide: number;
+    centerMode: boolean;
+    slidesToShow: number;
+    centerPadding?: string;
+}) => number;
+/**
+ * Calculate slides to load on left of current slide
+ */
+declare const lazySlidesOnLeft: (spec: {
+    centerMode: boolean;
+    slidesToShow: number;
+    centerPadding?: string;
+}) => number;
+/**
+ * Calculate slides to load on right of current slide
+ */
+declare const lazySlidesOnRight: (spec: {
+    centerMode: boolean;
+    slidesToShow: number;
+    centerPadding?: string;
+}) => number;
+/**
+ * Get on-demand lazy load slides
+ */
+declare const getOnDemandLazySlides: (spec: {
+    currentSlide: number;
+    centerMode: boolean;
+    slidesToShow: number;
+    centerPadding?: string;
+    lazyLoadedList: number[];
+}) => number[];
+interface SlideClasses {
+    'glide-slide': boolean;
+    'glide-active': boolean;
+    'glide-center': boolean;
+    'glide-cloned': boolean;
+    'glide-current': boolean;
+    [key: string]: boolean;
+}
+/**
+ * Get CSS classes for a slide
+ */
+declare const getSlideClasses: (spec: {
+    index: number;
+    currentSlide: number;
+    slideCount: number;
+    slidesToShow: number;
+    centerMode: boolean;
+    targetSlide: number;
+    rtl: boolean;
+}) => SlideClasses;
+
+declare const Glide: React$1.ForwardRefExoticComponent<GlideProps & React$1.RefAttributes<GlideRef>>;
+
+export { Dots, Glide, type GlideProps, type GlideRef, type GlideSettings, type GlideState, NextArrow, PrevArrow, type ResponsiveSettings, type SlideClasses, type SwipeEndResult, type SwipeMoveResult, type SwipeStartResult, Track, calculateSlideWidth, canGoNext, canGoPrev, canUseDOM, clamp, Glide as default, getHeight, getOnDemandLazySlides, getPostClones, getPreClones, getSlideClasses, getSwipeDirection, getTotalSlides, getTrackAnimateCSS, getTrackCSS, getTrackLeft, getWidth, keyHandler, lazyEndIndex, lazySlidesOnLeft, lazySlidesOnRight, lazyStartIndex, safePreventDefault, swipeEnd, swipeMove, swipeStart, useTrack };