flikkui 0.1.0-beta.11 → 0.1.0-beta.12

package/dist/components/core/Calendar/CalendarMini/CalendarMini.js

@@ -0,0 +1,269 @@
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
+import React__default, { useMemo, useState, useRef, useEffect, useCallback } from 'react';
+import { cn } from '../../../../utils/cn.js';
+import { isCurrentMonth, isDateDisabled, isSameDay } from '../calendar.utils.js';
+import { monthTransitionVariants, dateRowTransitionVariants } from './CalendarMini.animations.js';
+import { calendarMiniTheme } from './CalendarMini.theme.js';
+import { Button } from '../../Button/Button.js';
+
+/**
+ * Generate array of months centered around current month
+ */
+var generateMonths = function (centerMonth, count) {
+    var months = [];
+    var halfCount = Math.floor(count / 2);
+    for (var i = -halfCount; i <= halfCount; i++) {
+        var date = new Date(centerMonth);
+        date.setMonth(date.getMonth() + i);
+        months.push(date);
+    }
+    return months;
+};
+var CalendarMini = function (_a) {
+    var selectedDate = _a.selectedDate, currentMonth = _a.currentMonth, onDateSelect = _a.onDateSelect, onMonthChange = _a.onMonthChange, _b = _a.visibleMonths, visibleMonths = _b === void 0 ? 5 : _b, _c = _a.visibleDates, visibleDates = _c === void 0 ? 7 : _c, minDate = _a.minDate, maxDate = _a.maxDate, disabledDates = _a.disabledDates, _d = _a.startFrom, startFrom = _d === void 0 ? "today" : _d, _e = _a.shouldAnimate, shouldAnimate = _e === void 0 ? true : _e, _f = _a.showTodayButton, showTodayButton = _f === void 0 ? true : _f, className = _a.className, theme = _a.theme, rest = __rest(_a, ["selectedDate", "currentMonth", "onDateSelect", "onMonthChange", "visibleMonths", "visibleDates", "minDate", "maxDate", "disabledDates", "startFrom", "shouldAnimate", "showTodayButton", "className", "theme"]);
+    var shouldReduceMotion = useReducedMotion();
+    var enableAnimations = shouldAnimate && !shouldReduceMotion;
+    var today = useMemo(function () { return new Date(); }, []);
+    // Default to today's date if not provided
+    var defaultSelectedDate = selectedDate !== undefined ? selectedDate : today;
+    // Initialize startDate based on currentMonth and startFrom props
+    var _g = useState(function () {
+        var initial = currentMonth || new Date();
+        if (startFrom === "today" && isCurrentMonth(initial, new Date())) {
+            return new Date(); // Start from today
+        }
+        return new Date(initial.getFullYear(), initial.getMonth(), 1); // Start from month beginning
+    }), startDate = _g[0], setStartDate = _g[1];
+    var _h = useState(0), direction = _h[0], setDirection = _h[1];
+    var monthScrollRef = useRef(null);
+    // Guard visibleMonths to ensure it's an odd number
+    var normalizedVisibleMonths = useMemo(function () {
+        if (visibleMonths % 2 === 0) {
+            if (process.env.NODE_ENV !== "production") {
+                console.warn("[CalendarMini]: visibleMonths should be an odd number. Received ".concat(visibleMonths, ", using ").concat(visibleMonths + 1, " instead."));
+            }
+            return visibleMonths + 1;
+        }
+        return visibleMonths;
+    }, [visibleMonths]);
+    // Sync startDate when currentMonth prop changes externally
+    useEffect(function () {
+        if (currentMonth) {
+            var newMonth = new Date(currentMonth);
+            if (startFrom === "today" && isCurrentMonth(newMonth, new Date())) {
+                setStartDate(new Date()); // Start from today
+            }
+            else {
+                setStartDate(new Date(newMonth.getFullYear(), newMonth.getMonth(), 1));
+            }
+        }
+    }, [currentMonth, startFrom]);
+    // Auto-scroll to selectedDate if it's outside visible range
+    useEffect(function () {
+        if (defaultSelectedDate && defaultSelectedDate instanceof Date) {
+            var selectedYear = defaultSelectedDate.getFullYear();
+            var selectedMonth = defaultSelectedDate.getMonth();
+            // Check if selected date is within visible date range
+            var firstVisibleDate = dates[0];
+            var lastVisibleDate = dates[dates.length - 1];
+            if (firstVisibleDate && lastVisibleDate) {
+                var isBeforeRange = defaultSelectedDate < firstVisibleDate;
+                var isAfterRange = defaultSelectedDate > lastVisibleDate;
+                if (isBeforeRange || isAfterRange) {
+                    // Jump to the selected date's month
+                    var newStartDate = new Date(selectedYear, selectedMonth, defaultSelectedDate.getDate());
+                    setStartDate(newStartDate);
+                    setDirection(isAfterRange ? 1 : -1);
+                }
+            }
+        }
+    }, [defaultSelectedDate]); // Only watch defaultSelectedDate, not dates to avoid loops
+    // Generate dates sequentially from startDate
+    var dates = useMemo(function () {
+        var result = [];
+        var current = new Date(startDate);
+        for (var i = 0; i < visibleDates; i++) {
+            result.push(new Date(current));
+            current.setDate(current.getDate() + 1);
+        }
+        return result;
+    }, [startDate, visibleDates]);
+    // Derive activeMonth from the middle date of visible range
+    var activeMonth = useMemo(function () {
+        var middleIndex = Math.floor(dates.length / 2);
+        var middleDate = dates[middleIndex] || new Date();
+        return new Date(middleDate.getFullYear(), middleDate.getMonth(), 1);
+    }, [dates]);
+    // Generate months centered around activeMonth
+    var months = useMemo(function () { return generateMonths(activeMonth, normalizedVisibleMonths); }, [activeMonth, normalizedVisibleMonths]);
+    // Navigation handlers - slide by visibleDates count
+    var handlePrevMonth = useCallback(function () {
+        setDirection(-1);
+        setStartDate(function (prev) {
+            var newDate = new Date(prev);
+            newDate.setDate(newDate.getDate() - visibleDates);
+            // Calculate which month the new dates will be in
+            var newMonth = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+            onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newMonth);
+            return newDate;
+        });
+    }, [visibleDates, onMonthChange]);
+    var handleNextMonth = useCallback(function () {
+        setDirection(1);
+        setStartDate(function (prev) {
+            var newDate = new Date(prev);
+            newDate.setDate(newDate.getDate() + visibleDates);
+            // Calculate which month the new dates will be in
+            var newMonth = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+            onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newMonth);
+            return newDate;
+        });
+    }, [visibleDates, onMonthChange]);
+    var handleMonthClick = useCallback(function (month) {
+        var clickedMonth = new Date(month);
+        setDirection(clickedMonth > activeMonth ? 1 : -1);
+        // Set startDate to the beginning of the clicked month
+        var newStartDate = new Date(month.getFullYear(), month.getMonth(), 1);
+        setStartDate(newStartDate);
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(month);
+    }, [activeMonth, onMonthChange]);
+    var handleDateClick = useCallback(function (date) {
+        if (!isDateDisabled(date, minDate, maxDate, disabledDates) &&
+            onDateSelect) {
+            onDateSelect(date);
+        }
+    }, [minDate, maxDate, disabledDates, onDateSelect]);
+    var handleTodayClick = useCallback(function () {
+        var todayDate = new Date();
+        setDirection(todayDate > startDate ? 1 : -1);
+        setStartDate(todayDate);
+        var todayMonth = new Date(todayDate.getFullYear(), todayDate.getMonth(), 1);
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(todayMonth);
+        onDateSelect === null || onDateSelect === void 0 ? void 0 : onDateSelect(todayDate);
+    }, [startDate, onMonthChange, onDateSelect]);
+    // Check if today is in the visible date range
+    var isTodayVisible = useMemo(function () {
+        var todayDate = new Date();
+        return dates.some(function (date) { return isSameDay(date, todayDate); });
+    }, [dates]);
+    // Keyboard navigation
+    var handleKeyDown = useCallback(function (event, action) {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            action();
+        }
+    }, []);
+    // Scroll to center active month
+    useEffect(function () {
+        if (monthScrollRef.current) {
+            var container = monthScrollRef.current;
+            var activeIndex = Math.floor(normalizedVisibleMonths / 2);
+            var scrollLeft = activeIndex * (container.scrollWidth / normalizedVisibleMonths);
+            container.scrollLeft = scrollLeft;
+        }
+    }, [normalizedVisibleMonths]);
+    // Format month abbreviation
+    var formatMonth = function (date) {
+        return date.toLocaleDateString("en-US", { month: "short" });
+    };
+    // Format day name
+    var formatDayName = function (date) {
+        return date.toLocaleDateString("en-US", { weekday: "short" });
+    };
+    // Format date number
+    var formatDateNumber = function (date) {
+        return date.getDate().toString().padStart(2, "0");
+    };
+    // Check if month is active
+    var isMonthActive = useCallback(function (month) {
+        return (month.getFullYear() === activeMonth.getFullYear() &&
+            month.getMonth() === activeMonth.getMonth());
+    }, [activeMonth]);
+    // Check if date is selected
+    var isDateSelected = useCallback(function (date) {
+        return defaultSelectedDate ? isSameDay(date, defaultSelectedDate) : false;
+    }, [defaultSelectedDate]);
+    // Check if date is today
+    var isDateToday = useCallback(function (date) {
+        return isSameDay(date, today);
+    }, [today]);
+    // Merge theme
+    var mergedTheme = __assign(__assign({}, calendarMiniTheme), theme);
+    var MonthRow = enableAnimations ? motion.div : "div";
+    var DateItem = enableAnimations ? motion.button : "button";
+    return (React__default.createElement("div", __assign({ className: cn(mergedTheme.baseStyle, className), role: "region", "aria-label": "Mini calendar" }, rest),
+        React__default.createElement(Button, { iconOnly: true, color: "neutral", variant: "ghost", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handlePrevMonth, "aria-label": "Previous month" },
+            React__default.createElement(ChevronLeftIcon, { className: "size-5 text-[var(--color-text-primary)]" })),
+        React__default.createElement("div", { className: "flex flex-col gap-1 relative" },
+            React__default.createElement("div", { className: "flex items-center gap-1" },
+                React__default.createElement("div", { className: "flex flex-col relative overflow-hidden flex-1", style: {
+                        maskImage: "linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent)",
+                        WebkitMaskImage: "linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent)",
+                    } },
+                    React__default.createElement("div", { ref: monthScrollRef, className: cn(mergedTheme.monthRowStyle), role: "tablist", "aria-label": "Month selection" },
+                        React__default.createElement(AnimatePresence, { mode: "popLayout", initial: false, custom: direction },
+                            React__default.createElement(MonthRow, __assign({ key: "".concat(activeMonth.getFullYear(), "-").concat(activeMonth.getMonth()), custom: direction }, (enableAnimations && {
+                                variants: monthTransitionVariants,
+                                initial: "enter",
+                                animate: "center",
+                                exit: "exit",
+                                transition: { duration: 0.3 },
+                            }), { className: "flex gap-4" }), months.map(function (month, index) {
+                                var isActive = isMonthActive(month);
+                                return (React__default.createElement("button", { key: "".concat(month.getFullYear(), "-").concat(month.getMonth()), onClick: function () { return handleMonthClick(month); }, onKeyDown: function (e) {
+                                        return handleKeyDown(e, function () { return handleMonthClick(month); });
+                                    }, "data-state": isActive ? "active" : undefined, className: cn(mergedTheme.monthItemStyle, !isActive && "opacity-60"), role: "tab", "aria-selected": isActive, "aria-label": "".concat(formatMonth(month), " ").concat(month.getFullYear()), type: "button" }, formatMonth(month)));
+                            }))))),
+                showTodayButton && !isTodayVisible && (React__default.createElement(Button, { size: "sm", variant: "link", onClick: handleTodayClick, "aria-label": "Jump to today", className: "mr-7" }, "Today"))),
+            React__default.createElement("div", { className: "relative overflow-hidden", style: {
+                    maskImage: "linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent)",
+                    WebkitMaskImage: "linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent)",
+                } },
+                React__default.createElement("div", { className: cn(mergedTheme.dateRowStyle), role: "list", "aria-label": "Date selection" },
+                    React__default.createElement(AnimatePresence, { mode: "popLayout", initial: false, custom: direction },
+                        React__default.createElement(motion.div, __assign({ key: "".concat(startDate.getTime(), "-dates"), custom: direction }, (enableAnimations && {
+                            variants: dateRowTransitionVariants,
+                            initial: "enter",
+                            animate: "center",
+                            exit: "exit",
+                            transition: {
+                                type: "spring",
+                                stiffness: 350,
+                                damping: 30,
+                                mass: 0.6,
+                            },
+                        }), { role: "presentation", className: "flex gap-1" }), dates.map(function (date, index) {
+                            var isSelected = isDateSelected(date);
+                            var isToday = isDateToday(date);
+                            var isNextMonth = !isCurrentMonth(date, activeMonth);
+                            var disabled = isDateDisabled(date, minDate, maxDate, disabledDates);
+                            // Determine state for data attribute
+                            var state;
+                            if (isSelected) {
+                                state = "selected";
+                            }
+                            else if (isToday) {
+                                state = "today";
+                            }
+                            return (React__default.createElement(DateItem, __assign({ key: date.toISOString(), onClick: function () { return !disabled && handleDateClick(date); }, onKeyDown: function (e) {
+                                    return !disabled &&
+                                        handleKeyDown(e, function () { return handleDateClick(date); });
+                                }, disabled: disabled, "data-state": state, "data-disabled": disabled ? "" : undefined, className: cn(mergedTheme.dateItemStyle, isNextMonth && "opacity-60"), role: "listitem", "aria-label": date.toLocaleDateString("en-US", {
+                                    weekday: "long",
+                                    year: "numeric",
+                                    month: "long",
+                                    day: "numeric",
+                                }), "aria-selected": isSelected, "aria-current": isToday ? "date" : undefined, "aria-disabled": disabled, type: "button" }, (enableAnimations && {
+                                whileTap: !disabled ? { scale: 0.95 } : undefined,
+                            })),
+                                React__default.createElement("div", { className: "text-sm font-medium opacity-60" }, formatDayName(date)),
+                                React__default.createElement("time", { dateTime: date.toISOString(), className: cn("font-semibold") }, formatDateNumber(date))));
+                        })))))),
+        React__default.createElement(Button, { iconOnly: true, color: "neutral", variant: "ghost", className: "!flex-shrink !flex-grow-0 !w-fit self-stretch !h-auto !min-h-0 px-0.5", onClick: handleNextMonth, "aria-label": "Next month" },
+            React__default.createElement(ChevronRightIcon, { className: "size-5 text-[var(--color-text-primary)]" }))));
+};
+CalendarMini.displayName = "CalendarMini";
+
+export { CalendarMini };

package/dist/components/core/Calendar/CalendarMini/CalendarMini.theme.js

@@ -0,0 +1,9 @@
+var calendarMiniTheme = {
+    baseStyle: "flex items-center justify-center gap-1 transition-all duration-300",
+    monthRowStyle: "flex flex-1 gap-4 overflow-x-auto scrollbar-hide scroll-smooth snap-x snap-mandatory px-4 ml-3",
+    monthItemStyle: "font-semibold text-[var(--color-text-secondary)] cursor-pointer transition-colors hover:text-[var(--color-text-primary)] flex-shrink-0 snap-center data-[state=active]:text-[var(--color-text-primary)] data-[state=active]:opacity-100",
+    dateRowStyle: "relative overflow-hidden px-4 py-0.5",
+    dateItemStyle: "px-0 py-1.5 min-w-[50px] flex flex-col items-center rounded-[var(--form-rounded)] cursor-pointer transition-all text-[var(--color-text-primary)] hover:bg-[var(--color-background-tertiary)] flex-shrink-0 snap-center ring-1 ring-transparent data-[state=selected]:bg-[var(--color-background-secondary)] data-[state=selected]:ring-[var(--color-border)] data-[state=selected]:hover:bg-[var(--color-background-secondary)] data-[state=selected]:z-2 data-[disabled]:opacity-40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-[var(--color-background-secondary)]",
+};
+
+export { calendarMiniTheme };

package/dist/components/core/Calendar/calendar.utils.js

@@ -17,8 +17,17 @@ var isDateDisabled = function (date, minDate, maxDate, disabledDates) {
         return true;
     if (maxDate && date > maxDate)
         return true;
+    if (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.some(function (disabledDate) { return isSameDay(disabledDate, date); }))
+        return true;
     return false;
 };
+/**
+ * Check if a date belongs to the specified month
+ */
+var isCurrentMonth = function (date, referenceMonth) {
+    return (date.getMonth() === referenceMonth.getMonth() &&
+        date.getFullYear() === referenceMonth.getFullYear());
+};
 /**
  * Get the full month name for a date
  */
@@ -41,4 +50,4 @@ var getMonthName = function (date, customMonths) {
     return months[date.getMonth()];
 };
 
-export { getMonthName, isDateDisabled, isSameDay };
+export { getMonthName, isCurrentMonth, isDateDisabled, isSameDay };

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';

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

@@ -1,2 +1,2 @@
-import { CardTheme } from './Card.types';
+import { CardTheme } from "./Card.types";
 export declare const cardTheme: CardTheme;

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

@@ -1,10 +1,10 @@
 var cardTheme = {
-    baseStyle: 'rounded-xl overflow-hidden bg-white border border-[var(--color-border)] shadow-xs ',
-    headerStyle: 'flex flex-col space-y-1.5 p-4',
-    titleStyle: 'text-base font-semibold leading-none text-[var(--color-text-primary)]',
-    descriptionStyle: 'text-sm text-[var(--color-text-muted)]',
-    contentStyle: 'p-4 pt-0',
-    footerStyle: 'flex items-center p-4 pt-0',
+    baseStyle: "rounded-xl overflow-hidden bg-[var(--color-background)] border border-[var(--color-border)] shadow-xs ",
+    headerStyle: "flex flex-col space-y-1.5 p-4",
+    titleStyle: "text-base font-semibold leading-none text-[var(--color-text-primary)]",
+    descriptionStyle: "text-sm text-[var(--color-text-muted)]",
+    contentStyle: "p-4 pt-0",
+    footerStyle: "flex items-center p-4 pt-0",
 };
 
 export { cardTheme };

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

@@ -1,4 +1,4 @@
-import { HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from "react";
 export interface CardTheme {
     baseStyle: string;
     headerStyle: string;
@@ -19,7 +19,7 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * The content to be displayed inside the card
      */
-    children: ReactNode;
+    children?: ReactNode;
     /**
      * Custom class name for the card
      */

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';

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

@@ -1,4 +1,4 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import { __rest, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';

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,189 @@
+import { __rest, __spreadArray, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+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(_a) {
+    var children = _a.children, onSendToBack = _a.onSendToBack, dragThreshold = _a.dragThreshold, disabled = _a.disabled, shouldReduceMotion = _a.shouldReduceMotion;
+    var x = useMotionValue(0);
+    var y = useMotionValue(0);
+    var rotateX = useTransform(y, [-100, 100], [60, -60]);
+    var rotateY = useTransform(x, [-100, 100], [-60, 60]);
+    function handleDragEnd(_event, info) {
+        var 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: x, y: y, rotateX: rotateX, rotateY: 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
+ */
+var CardStackRoot = React__default.forwardRef(function (_a, ref) {
+    var // Behavior props
+    _b = _a.draggable, 
+    // Behavior props
+    draggable = _b === void 0 ? true : _b, _c = _a.dragThreshold, dragThreshold = _c === void 0 ? 0.3 : _c; _a.loop; var _e = _a.rotationRange, rotationRange = _e === void 0 ? 5 : _e, _f = _a.autoPlay, autoPlay = _f === void 0 ? false : _f, _g = _a.autoPlayInterval, autoPlayInterval = _g === void 0 ? 3000 : _g, 
+    // Callbacks
+    onCardChange = _a.onCardChange, onCardSwipe = _a.onCardSwipe, 
+    // Appearance
+    _h = _a.perspective, 
+    // Appearance
+    perspective = _h === void 0 ? "md" : _h, _j = _a.scaleStep, scaleStep = _j === void 0 ? 0.06 : _j, 
+    // Accessibility
+    ariaLabel = _a["aria-label"], _k = _a.disabled, disabled = _k === void 0 ? false : _k, 
+    // Theme & Styling
+    themeOverrides = _a.theme, className = _a.className, 
+    // Children
+    children = _a.children, rest = __rest(_a, ["draggable", "dragThreshold", "loop", "rotationRange", "autoPlay", "autoPlayInterval", "onCardChange", "onCardSwipe", "perspective", "scaleStep", "aria-label", "disabled", "theme", "className", "children"]);
+    // Extract cards from children
+    var cardsArray = useMemo(function () {
+        return Children.toArray(children).filter(function (child) {
+            return isValidElement(child);
+        });
+    }, [children]);
+    var totalCards = cardsArray.length;
+    // Stack state: array of objects with id and content
+    // Last item in array is on TOP visually
+    var _l = useState(function () {
+        return cardsArray.map(function (content, index) { return ({
+            id: index,
+            content: content,
+        }); });
+    }), stack = _l[0], setStack = _l[1];
+    // Update stack when children change
+    useEffect(function () {
+        setStack(cardsArray.map(function (content, index) { return ({
+            id: index,
+            content: content,
+        }); }));
+    }, [cardsArray]);
+    // Pause state for autoplay
+    var _m = useState(false), isPaused = _m[0], setIsPaused = _m[1];
+    // Check for reduced motion
+    var shouldReduceMotion = useReducedMotion();
+    // Track if component is mounted
+    var isMounted = useRef(true);
+    useEffect(function () {
+        return function () {
+            isMounted.current = false;
+        };
+    }, []);
+    // Merge theme with overrides
+    var theme = useMemo(function () {
+        var _a, _b, _c, _d, _e, _f;
+        var baseTheme = cardStackTheme;
+        var 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)
+    var sendToBack = useCallback(function (id) {
+        setStack(function (prev) {
+            var newStack = __spreadArray([], prev, true);
+            var index = newStack.findIndex(function (card) { return card.id === id; });
+            var card = newStack.splice(index, 1)[0];
+            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(function () {
+        if (!autoPlay || disabled || isPaused || stack.length <= 1)
+            return;
+        var timer = setInterval(function () {
+            if (isMounted.current) {
+                var topCardId = stack[stack.length - 1].id; // Last item is on top
+                sendToBack(topCardId);
+            }
+        }, autoPlayInterval);
+        return function () { return clearInterval(timer); };
+    }, [autoPlay, disabled, isPaused, stack, autoPlayInterval, sendToBack]);
+    // Pause/resume handlers for autoplay
+    var handleMouseEnter = useCallback(function () {
+        if (autoPlay) {
+            setIsPaused(true);
+        }
+    }, [autoPlay]);
+    var handleMouseLeave = useCallback(function () {
+        if (autoPlay) {
+            setIsPaused(false);
+        }
+    }, [autoPlay]);
+    // Keyboard navigation
+    var handleKeyDown = useCallback(function (e) {
+        if (disabled || stack.length === 0)
+            return;
+        switch (e.key) {
+            case "ArrowRight":
+            case " ":
+            case "Enter":
+                e.preventDefault();
+                var topCardId = stack[stack.length - 1].id;
+                sendToBack(topCardId);
+                break;
+        }
+    }, [disabled, stack, sendToBack]);
+    // Memoize theme classes
+    var themeClasses = useMemo(function () { return ({
+        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", __assign({ 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(function (card, index) {
+            // Calculate random rotation if enabled
+            var 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
+            var visualIndex = stack.length - index - 1;
+            var isTopCard = index === stack.length - 1;
+            return (React__default.createElement(CardRotate, { key: card.id, onSendToBack: function () { return 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";
+var 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;