@flikk/ui 1.0.0-beta.30 → 1.0.0-beta.32

package/dist/components/core/Calendar/CalendarEvent/CalendarEvent.theme.d.ts

@@ -1,12 +0,0 @@
-export interface CalendarEventThemeOverrides {
-    monthly?: string;
-    weekly?: string;
-    daily?: {
-        container?: string;
-        accent?: string;
-        time?: string;
-        title?: string;
-        description?: string;
-    };
-}
-export declare const calendarEventTheme: CalendarEventThemeOverrides;

package/dist/components/core/Calendar/CalendarEvent/CalendarEvent.types.d.ts

@@ -1,23 +0,0 @@
-import { HTMLAttributes } from "react";
-import { CalendarEventThemeOverrides } from "./CalendarEvent.theme";
-import { CalendarEvent as CalendarEventType, GridConfig, EventPosition } from "../../../../utils";
-export type CalendarEventVariant = "daily" | "weekly" | "monthly";
-export interface CalendarEventProps extends HTMLAttributes<HTMLDivElement> {
-    variant?: CalendarEventVariant;
-    event: CalendarEventType & {
-        description?: string;
-        attendees?: Array<{
-            name: string;
-            src: string;
-            showTooltip?: boolean;
-        }>;
-    };
-    gridConfig?: GridConfig;
-    position?: EventPosition;
-    containerWidth?: number;
-    cellHeight?: number;
-    gridInterval?: number;
-    startOffset?: number;
-    theme?: CalendarEventThemeOverrides;
-    onEventClick?: (eventData: CalendarEventProps["event"]) => void;
-}

package/dist/components/core/Calendar/CalendarEvent/index.d.ts

@@ -1,2 +0,0 @@
-export { CalendarEvent } from './CalendarEvent';
-export type { CalendarEventProps } from './CalendarEvent.types';

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

@@ -1,47 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,187 +0,0 @@
-"use client";
-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

@@ -1,6 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,139 +0,0 @@
-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

@@ -1,7 +0,0 @@
-/**
- * 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 +0,0 @@
-import { CarouselComponent } from './Carousel.types';
-declare const Carousel: CarouselComponent;
-export { Carousel };

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

@@ -1,83 +0,0 @@
-"use client";
-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 { CarouselBody } from './CarouselBody.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 CarouselBody 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 === CarouselBody) {
-                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, {
-    Body: CarouselBody,
-    Item: CarouselItem,
-    Previous: CarouselPrevious,
-    Next: CarouselNext,
-});
-
-export { Carousel };

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

@@ -1,10 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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 };