@flikk/ui 1.0.0-beta.1

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,11 @@
+import { jsx } from 'react/jsx-runtime';
+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 (jsx("div", { ref: ref, className: cn(cardTheme.titleStyle, className), ...props, children: children }));
+});
+CardTitle.displayName = 'CardTitle';
+
+export { CardTitle };

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

@@ -0,0 +1,2 @@
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
+export type { CardProps, CardHeaderProps, CardTitleProps, CardDescriptionProps, CardContentProps, CardFooterProps, CardTheme, CardThemeOverrides } from './Card.types';

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,186 @@
+import { jsx } from 'react/jsx-runtime';
+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 (jsx(motion.div, { className: "absolute inset-0 cursor-pointer", style: { x: 0, y: 0 }, children: children }));
+    }
+    return (jsx(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: children }));
+}
+const CARD_SPRING_TRANSITION = {
+    type: "spring",
+    stiffness: 260,
+    damping: 20,
+};
+/**
+ * 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]);
+    // Generate stable random rotations per card
+    const randomRotations = useRef(new Map());
+    const getRandomRotation = useCallback((cardId) => {
+        if (!randomRotations.current.has(cardId)) {
+            randomRotations.current.set(cardId, rotationRange ? Math.random() * rotationRange * 2 - rotationRange : 0);
+        }
+        return randomRotations.current.get(cardId);
+    }, [rotationRange]);
+    // 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 (jsx("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, children: jsx("div", { className: themeClasses.container, children: stack.map((card, index) => {
+                const randomRotate = getRandomRotation(card.id);
+                // 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 (jsx(CardRotate, { onSendToBack: () => sendToBack(card.id), dragThreshold: dragThreshold, disabled: !draggable || !isTopCard || disabled, shouldReduceMotion: !!shouldReduceMotion, children: jsx(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: CARD_SPRING_TRANSITION, children: card.content }) }, card.id));
+            }) }) }));
+});
+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-radius,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?: Record<string, unknown>;
+    /** 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

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

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

@@ -0,0 +1,82 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useState, useEffect, useCallback, useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { carouselTheme } from './Carousel.theme.js';
+import { CarouselContext } from './CarouselContext.js';
+import { CarouselContent } from './CarouselContent.js';
+import { CarouselItem } from './CarouselItem.js';
+import { CarouselPrevious } from './CarouselPrevious.js';
+import { CarouselNext } from './CarouselNext.js';
+
+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);
+            }
+        });
+        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);
+        }
+    }, [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);
+        }
+        else {
+            // Clamp to valid range in non-loop mode
+            const clampedIndex = Math.max(0, Math.min(index, totalSlides - 1));
+            setCurrentIndex(clampedIndex);
+        }
+    }, [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 memoizedOpts = useMemo(() => ({ align, loop, slidesToScroll, draggable, dragThreshold }), [align, loop, slidesToScroll, draggable, dragThreshold]);
+    const contextValue = useMemo(() => ({
+        currentIndex,
+        totalSlides,
+        scrollTo,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+        orientation,
+        opts: memoizedOpts,
+    }), [currentIndex, totalSlides, scrollTo, scrollPrev, scrollNext, canScrollPrev, canScrollNext, orientation, memoizedOpts]);
+    return (jsx(CarouselContext.Provider, { value: contextValue, children: jsxs("div", { ref: ref, role: "region", "aria-roledescription": "carousel", "aria-label": "Carousel", className: cn(carouselTheme.root, className), ...rest, children: [children, showControls && totalSlides > 1 && (jsxs("div", { className: carouselTheme.controls, children: [jsx(CarouselPrevious, {}), jsx(CarouselNext, {})] }))] }) }));
+});
+CarouselRoot.displayName = 'Carousel';
+// Create compound component with sub-components
+const Carousel = Object.assign(CarouselRoot, {
+    Content: CarouselContent,
+    Item: CarouselItem,
+    Previous: CarouselPrevious,
+    Next: CarouselNext,
+});
+
+export { Carousel };

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

@@ -0,0 +1,10 @@
+export interface CarouselTheme {
+    root: string;
+    viewport: string;
+    container: string;
+    item: string;
+    controls: string;
+    button: string;
+    buttonIcon: string;
+}
+export declare const carouselTheme: CarouselTheme;

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

@@ -0,0 +1,20 @@
+const carouselTheme = {
+    root: 'relative w-full flex flex-col',
+    viewport: 'overflow-hidden',
+    container: 'flex',
+    item: 'min-w-0 shrink-0 grow-0 basis-full',
+    controls: 'flex items-center justify-center gap-2',
+    button: `
+    inline-flex items-center justify-center -mt-5 z-10 cursor-pointer
+    size-10 rounded-full
+    bg-white/50 backdrop-blur-md border-t border-[var(--color-border)]
+    text-[var(--color-text-primary)]
+    transition-all duration-200
+    hover:bg-white/80 hover:shadow-lg
+    focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2
+    disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-white disabled:hover:border-[var(--color-border)]
+  `,
+    buttonIcon: 'size-5',
+};
+
+export { carouselTheme };