flikkui 0.1.0-beta.9 → 0.2.0-beta.2

package/dist/components/core/Card/CardFooter.js

@@ -0,0 +1,10 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { cardTheme } from './Card.theme.js';
+
+const CardFooter = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (React__default.createElement("div", { ref: ref, className: cn(cardTheme.footerStyle, className), ...props }, children));
+});
+CardFooter.displayName = 'CardFooter';
+
+export { CardFooter };

package/dist/components/core/Card/CardHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CardHeaderProps } from './Card.types';
+export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/Card/CardHeader.js

@@ -0,0 +1,10 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { cardTheme } from './Card.theme.js';
+
+const CardHeader = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (React__default.createElement("div", { ref: ref, className: cn(cardTheme.headerStyle, className), ...props }, children));
+});
+CardHeader.displayName = 'CardHeader';
+
+export { CardHeader };

package/dist/components/core/Card/CardTitle.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { CardTitleProps } from './Card.types';
+export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;

package/dist/components/core/Card/CardTitle.js

@@ -0,0 +1,10 @@
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { cardTheme } from './Card.theme.js';
+
+const CardTitle = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (React__default.createElement("div", { ref: ref, className: cn(cardTheme.titleStyle, className), ...props }, children));
+});
+CardTitle.displayName = 'CardTitle';
+
+export { CardTitle };

package/dist/components/core/CardStack/CardStack.animations.d.ts

@@ -0,0 +1,47 @@
+import { Variants } from "motion/react";
+import { CardStackSwipeDirection } from "./CardStack.types";
+/**
+ * Animation variants for card stack positioning
+ * Cards animate from stacked position to active position and back
+ */
+export declare const cardStackAnimations: Variants;
+/**
+ * Drag constraints to keep card in place while allowing drag gesture
+ */
+export declare const dragConstraints: {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+/**
+ * Spring configuration for natural card movement
+ * Provides smooth, physics-based animations
+ */
+export declare const cardSpringConfig: {
+    type: "spring";
+    damping: number;
+    stiffness: number;
+    mass: number;
+};
+/**
+ * Calculate 3D rotation based on drag position
+ * Creates natural tilt effect during drag
+ *
+ * @param x - Horizontal drag offset
+ * @param y - Vertical drag offset
+ * @param rotationRange - Maximum rotation in degrees
+ * @returns Object with rotateX, rotateY, rotateZ values
+ */
+export declare const calculateRotation: (x: number, y: number, rotationRange: number) => {
+    rotateX: number;
+    rotateY: number;
+    rotateZ: number;
+};
+/**
+ * Generate exit animation based on swipe direction
+ *
+ * @param direction - Direction of swipe ('left' or 'right')
+ * @returns Variants object for exit animation
+ */
+export declare const cardSwipeAnimation: (direction: CardStackSwipeDirection) => Variants;

package/dist/components/core/CardStack/CardStack.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { CardStackProps } from "./CardStack.types";
+export declare const CardStack: React.ForwardRefExoticComponent<CardStackProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/core/CardStack/CardStack.js

@@ -0,0 +1,181 @@
+import React__default, { useMemo, Children, isValidElement, useState, useEffect, useRef, useCallback } from 'react';
+import { useReducedMotion, motion, useMotionValue, useTransform } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { cardStackTheme } from './CardStack.theme.js';
+
+function CardRotate({ children, onSendToBack, dragThreshold, disabled, shouldReduceMotion, }) {
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
+    const rotateX = useTransform(y, [-100, 100], [60, -60]);
+    const rotateY = useTransform(x, [-100, 100], [-60, 60]);
+    function handleDragEnd(_event, info) {
+        const sensitivity = dragThreshold * 300; // Convert to pixels
+        if (Math.abs(info.offset.x) > sensitivity ||
+            Math.abs(info.offset.y) > sensitivity) {
+            onSendToBack();
+        }
+        else {
+            x.set(0);
+            y.set(0);
+        }
+    }
+    if (disabled || shouldReduceMotion) {
+        return (React__default.createElement(motion.div, { className: "absolute inset-0 cursor-pointer", style: { x: 0, y: 0 } }, children));
+    }
+    return (React__default.createElement(motion.div, { className: "absolute inset-0 cursor-grab", style: { x, y, rotateX, rotateY }, drag: true, dragConstraints: { top: 0, right: 0, bottom: 0, left: 0 }, dragElastic: 0.6, whileTap: { cursor: "grabbing" }, onDragEnd: handleDragEnd }, children));
+}
+/**
+ * CardStack - Interactive card stack component with drag/swipe gestures
+ */
+const CardStackRoot = React__default.forwardRef(({ 
+// Behavior props
+draggable = true, dragThreshold = 0.3, loop = false, rotationRange = 5, autoPlay = false, autoPlayInterval = 3000, 
+// Callbacks
+onCardChange, onCardSwipe, 
+// Appearance
+perspective = "md", scaleStep = 0.06, 
+// Accessibility
+"aria-label": ariaLabel, disabled = false, 
+// Theme & Styling
+theme: themeOverrides, className, 
+// Children
+children, ...rest }, ref) => {
+    // Extract cards from children
+    const cardsArray = useMemo(() => {
+        return Children.toArray(children).filter((child) => isValidElement(child));
+    }, [children]);
+    const totalCards = cardsArray.length;
+    // Stack state: array of objects with id and content
+    // Last item in array is on TOP visually
+    const [stack, setStack] = useState(() => {
+        return cardsArray.map((content, index) => ({
+            id: index,
+            content,
+        }));
+    });
+    // Update stack when children change
+    useEffect(() => {
+        setStack(cardsArray.map((content, index) => ({
+            id: index,
+            content,
+        })));
+    }, [cardsArray]);
+    // Pause state for autoplay
+    const [isPaused, setIsPaused] = useState(false);
+    // Check for reduced motion
+    const shouldReduceMotion = useReducedMotion();
+    // Track if component is mounted
+    const isMounted = useRef(true);
+    useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+    // Merge theme with overrides
+    const theme = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f;
+        const baseTheme = cardStackTheme;
+        const overrides = themeOverrides || {};
+        return {
+            rootStyle: overrides.rootStyle || baseTheme.rootStyle,
+            containerStyle: overrides.containerStyle || baseTheme.containerStyle,
+            cardBaseStyle: overrides.cardBaseStyle || baseTheme.cardBaseStyle,
+            cardDisabledStyle: overrides.cardDisabledStyle || baseTheme.cardDisabledStyle,
+            perspective: {
+                sm: ((_a = overrides.perspective) === null || _a === void 0 ? void 0 : _a.sm) || baseTheme.perspective.sm,
+                md: ((_b = overrides.perspective) === null || _b === void 0 ? void 0 : _b.md) || baseTheme.perspective.md,
+                lg: ((_c = overrides.perspective) === null || _c === void 0 ? void 0 : _c.lg) || baseTheme.perspective.lg,
+            },
+            states: {
+                idle: ((_d = overrides.states) === null || _d === void 0 ? void 0 : _d.idle) || baseTheme.states.idle,
+                dragging: ((_e = overrides.states) === null || _e === void 0 ? void 0 : _e.dragging) || baseTheme.states.dragging,
+                exiting: ((_f = overrides.states) === null || _f === void 0 ? void 0 : _f.exiting) || baseTheme.states.exiting,
+            },
+        };
+    }, [themeOverrides]);
+    // Send card to back of stack (becomes bottom card)
+    const sendToBack = useCallback((id) => {
+        setStack((prev) => {
+            const newStack = [...prev];
+            const index = newStack.findIndex((card) => card.id === id);
+            const [card] = newStack.splice(index, 1);
+            newStack.unshift(card); // Add to beginning (bottom of visual stack)
+            return newStack;
+        });
+        onCardChange === null || onCardChange === void 0 ? void 0 : onCardChange(id);
+        onCardSwipe === null || onCardSwipe === void 0 ? void 0 : onCardSwipe(id, "left");
+    }, [onCardChange, onCardSwipe]);
+    // Autoplay logic
+    useEffect(() => {
+        if (!autoPlay || disabled || isPaused || stack.length <= 1)
+            return;
+        const timer = setInterval(() => {
+            if (isMounted.current) {
+                const topCardId = stack[stack.length - 1].id; // Last item is on top
+                sendToBack(topCardId);
+            }
+        }, autoPlayInterval);
+        return () => clearInterval(timer);
+    }, [autoPlay, disabled, isPaused, stack, autoPlayInterval, sendToBack]);
+    // Pause/resume handlers for autoplay
+    const handleMouseEnter = useCallback(() => {
+        if (autoPlay) {
+            setIsPaused(true);
+        }
+    }, [autoPlay]);
+    const handleMouseLeave = useCallback(() => {
+        if (autoPlay) {
+            setIsPaused(false);
+        }
+    }, [autoPlay]);
+    // Keyboard navigation
+    const handleKeyDown = useCallback((e) => {
+        if (disabled || stack.length === 0)
+            return;
+        switch (e.key) {
+            case "ArrowRight":
+            case " ":
+            case "Enter":
+                e.preventDefault();
+                const topCardId = stack[stack.length - 1].id;
+                sendToBack(topCardId);
+                break;
+        }
+    }, [disabled, stack, sendToBack]);
+    // Memoize theme classes
+    const themeClasses = useMemo(() => ({
+        root: cn(theme.rootStyle, theme.perspective[perspective], disabled && "opacity-50 pointer-events-none", className),
+        container: theme.containerStyle,
+    }), [theme, perspective, disabled, className]);
+    // Don't render if no cards
+    if (totalCards === 0) {
+        return null;
+    }
+    return (React__default.createElement("div", { ref: ref, role: "region", "aria-roledescription": "card stack", "aria-label": ariaLabel || "Interactive card stack", tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, "data-disabled": disabled, className: themeClasses.root, style: {
+            perspective: 600,
+        }, ...rest },
+        React__default.createElement("div", { className: themeClasses.container }, stack.map((card, index) => {
+            // Calculate random rotation if enabled
+            const randomRotate = rotationRange
+                ? Math.random() * rotationRange * 2 - rotationRange
+                : 0;
+            // Top card is last in array (stack.length - 1)
+            // index 0 = bottom card, index stack.length-1 = top card
+            const visualIndex = stack.length - index - 1;
+            const isTopCard = index === stack.length - 1;
+            return (React__default.createElement(CardRotate, { key: card.id, onSendToBack: () => sendToBack(card.id), dragThreshold: dragThreshold, disabled: !draggable || !isTopCard || disabled, shouldReduceMotion: !!shouldReduceMotion },
+                React__default.createElement(motion.div, { className: cn(theme.cardBaseStyle, disabled && theme.cardDisabledStyle), animate: {
+                        rotateZ: visualIndex * 4 + randomRotate,
+                        scale: 1 + index * scaleStep - stack.length * scaleStep,
+                        transformOrigin: "90% 90%",
+                    }, initial: false, transition: {
+                        type: "spring",
+                        stiffness: 260,
+                        damping: 20,
+                    } }, card.content)));
+        }))));
+});
+CardStackRoot.displayName = "CardStack";
+const CardStack = CardStackRoot;
+
+export { CardStack };

package/dist/components/core/CardStack/CardStack.theme.d.ts

@@ -0,0 +1,6 @@
+import { CardStackTheme } from "./CardStack.types";
+/**
+ * Default theme for CardStack component
+ * Uses CSS variables for theming and follows shadcn override pattern
+ */
+export declare const cardStackTheme: CardStackTheme;

package/dist/components/core/CardStack/CardStack.theme.js

@@ -0,0 +1,33 @@
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * Default theme for CardStack component
+ * Uses CSS variables for theming and follows shadcn override pattern
+ */
+const cardStackTheme = {
+    // Container styles
+    rootStyle: "relative w-full flex items-center justify-center",
+    containerStyle: cn("relative w-full h-full", "touch-none select-none", // Prevent default touch behaviors
+    "[transform-style:preserve-3d]" // Enable 3D transforms
+    ),
+    // Card base styles
+    cardBaseStyle: cn("absolute inset-0 w-full h-full", "rounded-[var(--card-rounded,0.5rem)] bg-white", "border border-[var(--color-border)]", "shadow-lg", "cursor-grab active:cursor-grabbing", "transition-shadow duration-200", "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2", "[transform-style:preserve-3d]", // Enable 3D transforms on card
+    "[backface-visibility:hidden]" // Prevent rendering artifacts during transforms
+    ),
+    // Disabled card styles
+    cardDisabledStyle: "opacity-50 cursor-not-allowed pointer-events-none",
+    // Perspective variants for 3D depth effect
+    perspective: {
+        sm: "[perspective:800px]",
+        md: "[perspective:1000px]",
+        lg: "[perspective:1200px]",
+    },
+    // State-based styles using data-[state=*] attributes
+    states: {
+        idle: "shadow-lg cursor-grab",
+        dragging: "shadow-2xl z-50 cursor-grabbing",
+        exiting: "pointer-events-none",
+    },
+};
+
+export { cardStackTheme };

package/dist/components/core/CardStack/CardStack.types.d.ts

@@ -0,0 +1,139 @@
+import { HTMLAttributes, ReactNode } from "react";
+/**
+ * Size of the 3D perspective effect
+ */
+export type CardStackPerspective = "sm" | "md" | "lg";
+/**
+ * Direction of card swipe
+ */
+export type CardStackSwipeDirection = "left" | "right";
+/**
+ * Card state for styling
+ */
+export type CardStackCardState = "idle" | "dragging" | "exiting";
+/**
+ * Props for the CardStack root component
+ */
+export interface CardStackProps extends Omit<HTMLAttributes<HTMLDivElement>, "onError"> {
+    /** Enable drag interaction @default true */
+    draggable?: boolean;
+    /** Enable swipe on mobile @default true */
+    swipeable?: boolean;
+    /** Drag sensitivity threshold (0-1) @default 0.3 */
+    dragThreshold?: number;
+    /** Enable infinite loop of cards @default false */
+    loop?: boolean;
+    /** Random rotation range in degrees @default 3 */
+    rotationRange?: number;
+    /** Enable autoplay @default false */
+    autoPlay?: boolean;
+    /** Autoplay interval in milliseconds @default 5000 */
+    autoPlayInterval?: number;
+    /** Called when active card changes */
+    onCardChange?: (index: number) => void;
+    /** Called when card is swiped */
+    onCardSwipe?: (index: number, direction: CardStackSwipeDirection) => void;
+    /** Called when all cards are exhausted */
+    onStackEmpty?: () => void;
+    /** Current active card index (controlled) */
+    currentIndex?: number;
+    /** Initial card index (uncontrolled) @default 0 */
+    defaultIndex?: number;
+    /** Stack perspective depth @default 'md' */
+    perspective?: CardStackPerspective;
+    /** Maximum visible cards in stack @default 3 */
+    stackDepth?: number;
+    /** Scale reduction per stacked card @default 0.05 */
+    scaleStep?: number;
+    /** Vertical offset per stacked card in pixels @default 10 */
+    offsetStep?: number;
+    /** Accessible label for the card stack */
+    "aria-label"?: string;
+    /** Disable all interactions @default false */
+    disabled?: boolean;
+    /** Custom theme overrides */
+    theme?: CardStackThemeOverrides;
+    /** Custom class name */
+    className?: string;
+    /** Children (CardStack.Card components) */
+    children?: ReactNode;
+}
+/**
+ * Props for CardStack.Card component
+ */
+export interface CardStackCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Unique identifier for the card (required) */
+    value: string;
+    /** Card content */
+    children?: ReactNode;
+    /** Custom class name for card styling */
+    className?: string;
+    /** Disable interaction for this specific card @default false */
+    disabled?: boolean;
+    /** Override rotation for this card (in degrees) */
+    rotation?: number;
+    /** Custom data attached to card for callbacks */
+    data?: any;
+    /** Called when this card is focused */
+    onFocus?: () => void;
+    /** Called when this card is removed from stack */
+    onRemove?: () => void;
+}
+/**
+ * Context value shared between CardStack components
+ */
+export interface CardStackContextValue {
+    currentIndex: number;
+    totalCards: number;
+    stackOrder: number[];
+    sendToBack: (index: number) => void;
+    goToNext: () => void;
+    goToPrevious: () => void;
+    goToCard: (index: number) => void;
+    reset: () => void;
+    draggable: boolean;
+    swipeable: boolean;
+    dragThreshold: number;
+    rotationRange: number;
+    disabled: boolean;
+    perspective: CardStackPerspective;
+    stackDepth: number;
+    scaleStep: number;
+    offsetStep: number;
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+    isStackEmpty: boolean;
+    onCardSwipe?: (index: number, direction: CardStackSwipeDirection) => void;
+    theme: CardStackTheme;
+}
+/**
+ * Theme configuration for CardStack
+ */
+export interface CardStackTheme {
+    rootStyle: string;
+    containerStyle: string;
+    cardBaseStyle: string;
+    cardDisabledStyle: string;
+    perspective: Record<CardStackPerspective, string>;
+    states: Record<CardStackCardState, string>;
+}
+/**
+ * Theme overrides for CardStack
+ */
+export interface CardStackThemeOverrides {
+    rootStyle?: string;
+    containerStyle?: string;
+    cardBaseStyle?: string;
+    cardDisabledStyle?: string;
+    perspective?: Partial<Record<CardStackPerspective, string>>;
+    states?: Partial<Record<CardStackCardState, string>>;
+}
+/**
+ * Animation custom values for card positioning
+ */
+export interface CardStackAnimationCustom {
+    index: number;
+    stackDepth: number;
+    scaleStep: number;
+    offsetStep: number;
+}

package/dist/components/core/CardStack/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * CardStack - Interactive card stack component with drag/swipe gestures
+ *
+ * @module CardStack
+ */
+export { CardStack } from "./CardStack";
+export type { CardStackProps, CardStackTheme, CardStackThemeOverrides, CardStackPerspective, CardStackSwipeDirection, } from "./CardStack.types";

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

@@ -1,3 +1,3 @@
 import { CarouselComponent } from './Carousel.types';
 declare const Carousel: CarouselComponent;
-export default Carousel;
+export { Carousel };

package/dist/components/core/Carousel/Carousel.js

@@ -1,94 +1,85 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
-import React__default, { useState, useRef, useEffect } from 'react';
+import React__default, { useState, useEffect, useCallback } from 'react';
 import { cn } from '../../../utils/cn.js';
 import { carouselTheme } from './Carousel.theme.js';
 import { CarouselContext } from './CarouselContext.js';
-import CarouselSlide from './components/CarouselSlide.js';
-import CarouselControls from './components/CarouselControls.js';
-import CarouselControlButton from './components/CarouselControlButton.js';
-import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+import { CarouselContent } from './CarouselContent.js';
+import { CarouselItem } from './CarouselItem.js';
+import { CarouselPrevious } from './CarouselPrevious.js';
+import { CarouselNext } from './CarouselNext.js';
 
-// Main Carousel component
-var CarouselRoot = React__default.forwardRef(function (_a, ref) {
-    var slides = _a.slides, _b = _a.defaultSlide, defaultSlide = _b === void 0 ? 0 : _b, _c = _a.autoPlay, autoPlay = _c === void 0 ? false : _c, _d = _a.autoPlayInterval, autoPlayInterval = _d === void 0 ? 5000 : _d, _e = _a.pauseOnHover, pauseOnHover = _e === void 0 ? true : _e, _f = _a.showControls, showControls = _f === void 0 ? true : _f, _g = _a.enableMouseTracking, enableMouseTracking = _g === void 0 ? true : _g, _h = _a.animation, animation = _h === void 0 ? 'slide' : _h, _j = _a.slideWidth, slideWidth = _j === void 0 ? '33vw' : _j, children = _a.children, className = _a.className, _k = _a.theme, customTheme = _k === void 0 ? {} : _k, onSlideChange = _a.onSlideChange, onSlideClick = _a.onSlideClick, props = __rest(_a, ["slides", "defaultSlide", "autoPlay", "autoPlayInterval", "pauseOnHover", "showControls", "enableMouseTracking", "animation", "slideWidth", "children", "className", "theme", "onSlideChange", "onSlideClick"]);
-    var _l = useState(defaultSlide), currentSlide = _l[0], setCurrentSlide = _l[1];
-    var _m = useState(false), isHovered = _m[0], setIsHovered = _m[1];
-    var intervalRef = useRef(undefined);
-    var idRef = useRef(Math.random().toString(36).substring(2, 9));
-    var theme = __assign(__assign({}, carouselTheme), customTheme);
-    // Auto-play functionality
-    useEffect(function () {
-        if (autoPlay && !isHovered) {
-            intervalRef.current = setInterval(function () {
-                setCurrentSlide(function (prev) { return (prev + 1) % slides.length; });
-            }, autoPlayInterval);
-        }
-        else {
-            if (intervalRef.current) {
-                clearInterval(intervalRef.current);
-            }
-        }
-        return function () {
-            if (intervalRef.current) {
-                clearInterval(intervalRef.current);
+const CarouselRoot = React__default.forwardRef(({ orientation = 'horizontal', opts = {}, showControls = false, defaultIndex = 0, onSlideChange, className, children, ...rest }, ref) => {
+    const { align = 'start', loop = false, slidesToScroll = 1, draggable = true, dragThreshold = 0.1, } = opts;
+    // Count total slides by looking for CarouselContent and its CarouselItem children
+    const totalSlides = React__default.useMemo(() => {
+        let count = 0;
+        React__default.Children.forEach(children, (child) => {
+            if (React__default.isValidElement(child) && child.type === CarouselContent) {
+                const contentProps = child.props;
+                count = React__default.Children.count(contentProps.children);
             }
-        };
-    }, [autoPlay, autoPlayInterval, isHovered, slides.length]);
-    // Handle slide change
-    var handleSlideChange = function (index) {
-        if (index !== currentSlide) {
-            setCurrentSlide(index);
-            onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(index);
+        });
+        return count;
+    }, [children]);
+    const [currentIndex, setCurrentIndex] = useState(() => {
+        return Math.max(0, Math.min(defaultIndex, totalSlides - 1));
+    });
+    // Ensure current index stays in range when total slides change
+    useEffect(() => {
+        if (currentIndex >= totalSlides && totalSlides > 0) {
+            setCurrentIndex(totalSlides - 1);
         }
-    };
-    // Handle mouse events for auto-play pause
-    var handleMouseEnter = function () {
-        if (pauseOnHover) {
-            setIsHovered(true);
+    }, [totalSlides, currentIndex]);
+    // Call onSlideChange when index changes
+    useEffect(() => {
+        onSlideChange === null || onSlideChange === void 0 ? void 0 : onSlideChange(currentIndex);
+    }, [currentIndex, onSlideChange]);
+    const scrollTo = useCallback((index) => {
+        if (totalSlides === 0)
+            return;
+        if (loop) {
+            // Handle loop mode with wrapping
+            const normalizedIndex = ((index % totalSlides) + totalSlides) % totalSlides;
+            setCurrentIndex(normalizedIndex);
         }
-    };
-    var handleMouseLeave = function () {
-        if (pauseOnHover) {
-            setIsHovered(false);
+        else {
+            // Clamp to valid range in non-loop mode
+            const clampedIndex = Math.max(0, Math.min(index, totalSlides - 1));
+            setCurrentIndex(clampedIndex);
         }
-    };
-    var contextValue = {
-        theme: theme,
-        currentSlide: currentSlide,
-        setCurrentSlide: handleSlideChange,
-        slides: slides,
-        autoPlay: autoPlay,
-        autoPlayInterval: autoPlayInterval,
-        pauseOnHover: pauseOnHover,
-        showControls: showControls,
-        enableMouseTracking: enableMouseTracking,
-        animation: animation,
-        slideWidth: slideWidth,
+    }, [totalSlides, loop]);
+    const scrollPrev = useCallback(() => {
+        scrollTo(currentIndex - slidesToScroll);
+    }, [currentIndex, slidesToScroll, scrollTo]);
+    const scrollNext = useCallback(() => {
+        scrollTo(currentIndex + slidesToScroll);
+    }, [currentIndex, slidesToScroll, scrollTo]);
+    const canScrollPrev = loop || currentIndex > 0;
+    const canScrollNext = loop || currentIndex < totalSlides - 1;
+    const contextValue = {
+        currentIndex,
+        totalSlides,
+        scrollTo,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+        orientation,
+        opts: { align, loop, slidesToScroll, draggable, dragThreshold },
     };
     return (React__default.createElement(CarouselContext.Provider, { value: contextValue },
-        React__default.createElement("div", __assign({ ref: ref, className: cn(theme.baseStyle, className), "aria-labelledby": "carousel-heading-".concat(idRef.current), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, props), children || (React__default.createElement(React__default.Fragment, null,
-            React__default.createElement(motion.ul, { className: cn(theme.slideContainer, animation === 'slide' && 'flex', animation === 'fade' && 'relative', animation === 'card-stack' && 'relative'), animate: animation === 'slide' ? {
-                    x: "calc(-".concat(currentSlide, " * (").concat(slideWidth, " + var(--carousel-slide-gap)) + 50vw - ").concat(slideWidth, "/2)"),
-                } : {}, transition: animation === 'slide' ? {
-                    duration: 0.3,
-                    ease: "easeInOut",
-                } : {}, style: {
-                    width: animation === 'slide' ? "calc(".concat(slides.length, " * (").concat(slideWidth, " + var(--carousel-slide-gap)))") : '100%',
-                    height: '100%',
-                    '--carousel-slide-width': slideWidth,
-                } }, slides.map(function (slide, index) { return (React__default.createElement(CarouselSlide, { key: slide.id || index, slide: slide, index: index, onClick: function () {
-                    handleSlideChange(index);
-                    onSlideClick === null || onSlideClick === void 0 ? void 0 : onSlideClick(slide, index);
-                } })); })),
-            showControls && React__default.createElement(CarouselControls, null))))));
+        React__default.createElement("div", { ref: ref, role: "region", "aria-roledescription": "carousel", "aria-label": "Carousel", className: cn(carouselTheme.root, className), ...rest },
+            children,
+            showControls && totalSlides > 1 && (React__default.createElement("div", { className: carouselTheme.controls },
+                React__default.createElement(CarouselPrevious, null),
+                React__default.createElement(CarouselNext, null))))));
 });
-// Set display names for debugging
 CarouselRoot.displayName = 'Carousel';
-// Create compound component
-var Carousel = Object.assign(CarouselRoot, {
-    Slide: CarouselSlide,
-    Controls: CarouselControls,
-    ControlButton: CarouselControlButton,
+// Create compound component with sub-components
+const Carousel = Object.assign(CarouselRoot, {
+    Content: CarouselContent,
+    Item: CarouselItem,
+    Previous: CarouselPrevious,
+    Next: CarouselNext,
 });
 
-export { Carousel as default };
+export { Carousel };

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

@@ -1,2 +1,10 @@
-import { CarouselTheme } from './Carousel.types';
+export interface CarouselTheme {
+    root: string;
+    viewport: string;
+    container: string;
+    item: string;
+    controls: string;
+    button: string;
+    buttonIcon: string;
+}
 export declare const carouselTheme: CarouselTheme;