flikkui 0.1.0-beta.8 → 0.2.0-beta.1

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

@@ -0,0 +1,27 @@
+const monthTransitionVariants = {
+    enter: (direction) => ({
+        x: direction > 0 ? 20 : -20,
+        opacity: 0,
+    }),
+    center: {
+        x: 0,
+        opacity: 1,
+    },
+    exit: (direction) => ({
+        x: direction < 0 ? 20 : -20,
+        opacity: 0,
+    }),
+};
+const dateRowTransitionVariants = {
+    enter: (direction) => ({
+        x: direction > 0 ? '100%' : '-100%',
+    }),
+    center: {
+        x: 0,
+    },
+    exit: (direction) => ({
+        x: direction < 0 ? '100%' : '-100%',
+    }),
+};
+
+export { dateRowTransitionVariants, monthTransitionVariants };

package/dist/components/core/Calendar/CalendarMini/CalendarMini.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { CalendarMiniProps } from "./CalendarMini.types";
+export declare const CalendarMini: React.FC<CalendarMiniProps>;

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

@@ -0,0 +1,266 @@
+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
+ */
+const generateMonths = (centerMonth, count) => {
+    const months = [];
+    const halfCount = Math.floor(count / 2);
+    for (let i = -halfCount; i <= halfCount; i++) {
+        const date = new Date(centerMonth);
+        date.setMonth(date.getMonth() + i);
+        months.push(date);
+    }
+    return months;
+};
+const CalendarMini = ({ selectedDate, currentMonth, onDateSelect, onMonthChange, visibleMonths = 5, visibleDates = 7, minDate, maxDate, disabledDates, startFrom = "today", shouldAnimate = true, showTodayButton = true, className, theme, ...rest }) => {
+    const shouldReduceMotion = useReducedMotion();
+    const enableAnimations = shouldAnimate && !shouldReduceMotion;
+    const today = useMemo(() => new Date(), []);
+    // Default to today's date if not provided
+    const defaultSelectedDate = selectedDate !== undefined ? selectedDate : today;
+    // Initialize startDate based on currentMonth and startFrom props
+    const [startDate, setStartDate] = useState(() => {
+        const 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
+    });
+    const [direction, setDirection] = useState(0);
+    const monthScrollRef = useRef(null);
+    // Guard visibleMonths to ensure it's an odd number
+    const normalizedVisibleMonths = useMemo(() => {
+        if (visibleMonths % 2 === 0) {
+            if (process.env.NODE_ENV !== "production") {
+                console.warn(`[CalendarMini]: visibleMonths should be an odd number. Received ${visibleMonths}, using ${visibleMonths + 1} instead.`);
+            }
+            return visibleMonths + 1;
+        }
+        return visibleMonths;
+    }, [visibleMonths]);
+    // Sync startDate when currentMonth prop changes externally
+    useEffect(() => {
+        if (currentMonth) {
+            const 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(() => {
+        if (defaultSelectedDate && defaultSelectedDate instanceof Date) {
+            const selectedYear = defaultSelectedDate.getFullYear();
+            const selectedMonth = defaultSelectedDate.getMonth();
+            // Check if selected date is within visible date range
+            const firstVisibleDate = dates[0];
+            const lastVisibleDate = dates[dates.length - 1];
+            if (firstVisibleDate && lastVisibleDate) {
+                const isBeforeRange = defaultSelectedDate < firstVisibleDate;
+                const isAfterRange = defaultSelectedDate > lastVisibleDate;
+                if (isBeforeRange || isAfterRange) {
+                    // Jump to the selected date's month
+                    const 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
+    const dates = useMemo(() => {
+        const result = [];
+        const current = new Date(startDate);
+        for (let 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
+    const activeMonth = useMemo(() => {
+        const middleIndex = Math.floor(dates.length / 2);
+        const middleDate = dates[middleIndex] || new Date();
+        return new Date(middleDate.getFullYear(), middleDate.getMonth(), 1);
+    }, [dates]);
+    // Generate months centered around activeMonth
+    const months = useMemo(() => generateMonths(activeMonth, normalizedVisibleMonths), [activeMonth, normalizedVisibleMonths]);
+    // Navigation handlers - slide by visibleDates count
+    const handlePrevMonth = useCallback(() => {
+        setDirection(-1);
+        setStartDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setDate(newDate.getDate() - visibleDates);
+            // Calculate which month the new dates will be in
+            const newMonth = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+            onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newMonth);
+            return newDate;
+        });
+    }, [visibleDates, onMonthChange]);
+    const handleNextMonth = useCallback(() => {
+        setDirection(1);
+        setStartDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setDate(newDate.getDate() + visibleDates);
+            // Calculate which month the new dates will be in
+            const newMonth = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
+            onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newMonth);
+            return newDate;
+        });
+    }, [visibleDates, onMonthChange]);
+    const handleMonthClick = useCallback((month) => {
+        const clickedMonth = new Date(month);
+        setDirection(clickedMonth > activeMonth ? 1 : -1);
+        // Set startDate to the beginning of the clicked month
+        const newStartDate = new Date(month.getFullYear(), month.getMonth(), 1);
+        setStartDate(newStartDate);
+        onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(month);
+    }, [activeMonth, onMonthChange]);
+    const handleDateClick = useCallback((date) => {
+        if (!isDateDisabled(date, minDate, maxDate, disabledDates) &&
+            onDateSelect) {
+            onDateSelect(date);
+        }
+    }, [minDate, maxDate, disabledDates, onDateSelect]);
+    const handleTodayClick = useCallback(() => {
+        const todayDate = new Date();
+        setDirection(todayDate > startDate ? 1 : -1);
+        setStartDate(todayDate);
+        const 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
+    const isTodayVisible = useMemo(() => {
+        const todayDate = new Date();
+        return dates.some((date) => isSameDay(date, todayDate));
+    }, [dates]);
+    // Keyboard navigation
+    const handleKeyDown = useCallback((event, action) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            action();
+        }
+    }, []);
+    // Scroll to center active month
+    useEffect(() => {
+        if (monthScrollRef.current) {
+            const container = monthScrollRef.current;
+            const activeIndex = Math.floor(normalizedVisibleMonths / 2);
+            const scrollLeft = activeIndex * (container.scrollWidth / normalizedVisibleMonths);
+            container.scrollLeft = scrollLeft;
+        }
+    }, [normalizedVisibleMonths]);
+    // Format month abbreviation
+    const formatMonth = (date) => {
+        return date.toLocaleDateString("en-US", { month: "short" });
+    };
+    // Format day name
+    const formatDayName = (date) => {
+        return date.toLocaleDateString("en-US", { weekday: "short" });
+    };
+    // Format date number
+    const formatDateNumber = (date) => {
+        return date.getDate().toString().padStart(2, "0");
+    };
+    // Check if month is active
+    const isMonthActive = useCallback((month) => {
+        return (month.getFullYear() === activeMonth.getFullYear() &&
+            month.getMonth() === activeMonth.getMonth());
+    }, [activeMonth]);
+    // Check if date is selected
+    const isDateSelected = useCallback((date) => {
+        return defaultSelectedDate ? isSameDay(date, defaultSelectedDate) : false;
+    }, [defaultSelectedDate]);
+    // Check if date is today
+    const isDateToday = useCallback((date) => {
+        return isSameDay(date, today);
+    }, [today]);
+    // Merge theme
+    const mergedTheme = {
+        ...calendarMiniTheme,
+        ...theme,
+    };
+    const MonthRow = enableAnimations ? motion.div : "div";
+    const DateItem = enableAnimations ? motion.button : "button";
+    return (React__default.createElement("div", { 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, { key: `${activeMonth.getFullYear()}-${activeMonth.getMonth()}`, custom: direction, ...(enableAnimations && {
+                                    variants: monthTransitionVariants,
+                                    initial: "enter",
+                                    animate: "center",
+                                    exit: "exit",
+                                    transition: { duration: 0.3 },
+                                }), className: "flex gap-4" }, months.map((month, index) => {
+                                const isActive = isMonthActive(month);
+                                return (React__default.createElement("button", { key: `${month.getFullYear()}-${month.getMonth()}`, onClick: () => handleMonthClick(month), onKeyDown: (e) => handleKeyDown(e, () => handleMonthClick(month)), "data-state": isActive ? "active" : undefined, className: cn(mergedTheme.monthItemStyle, !isActive && "opacity-60"), role: "tab", "aria-selected": isActive, "aria-label": `${formatMonth(month)} ${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, { key: `${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((date, index) => {
+                            const isSelected = isDateSelected(date);
+                            const isToday = isDateToday(date);
+                            const isNextMonth = !isCurrentMonth(date, activeMonth);
+                            const disabled = isDateDisabled(date, minDate, maxDate, disabledDates);
+                            // Determine state for data attribute
+                            let state;
+                            if (isSelected) {
+                                state = "selected";
+                            }
+                            else if (isToday) {
+                                state = "today";
+                            }
+                            return (React__default.createElement(DateItem, { key: date.toISOString(), onClick: () => !disabled && handleDateClick(date), onKeyDown: (e) => !disabled &&
+                                    handleKeyDown(e, () => 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.d.ts

@@ -0,0 +1,2 @@
+import { CalendarMiniTheme } from "./CalendarMini.types";
+export declare const calendarMiniTheme: CalendarMiniTheme;

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

@@ -0,0 +1,9 @@
+const 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/CalendarMini/CalendarMini.types.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+export interface CalendarMiniProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    /**
+     * Currently selected date
+     */
+    selectedDate?: Date | null;
+    /**
+     * Initial month to display (defaults to current month)
+     */
+    currentMonth?: Date;
+    /**
+     * Callback fired when a date is selected
+     */
+    onDateSelect?: (date: Date) => void;
+    /**
+     * Callback fired when the visible month changes
+     */
+    onMonthChange?: (month: Date) => void;
+    /**
+     * Number of months to show in the month selection row
+     * @default 7
+     */
+    visibleMonths?: number;
+    /**
+     * Number of dates to show in the date selection row
+     * @default 7
+     */
+    visibleDates?: number;
+    /**
+     * Minimum selectable date
+     */
+    minDate?: Date;
+    /**
+     * Maximum selectable date
+     */
+    maxDate?: Date;
+    /**
+     * Array of dates that should be disabled
+     */
+    disabledDates?: Date[];
+    /**
+     * Whether to start from today or from the beginning of the month when viewing current month
+     * @default 'today'
+     */
+    startFrom?: 'today' | 'monthStart';
+    /**
+     * Whether to show animations
+     * @default true
+     */
+    shouldAnimate?: boolean;
+    /**
+     * Whether to show the "Today" quick-jump button
+     * @default true
+     */
+    showTodayButton?: boolean;
+    /**
+     * Custom className for container
+     */
+    className?: string;
+    /**
+     * Theme overrides
+     */
+    theme?: CalendarMiniThemeOverrides;
+}
+export interface CalendarMiniThemeOverrides {
+    /**
+     * Base container style
+     */
+    baseStyle?: string;
+    /**
+     * Month row container style
+     */
+    monthRowStyle?: string;
+    /**
+     * Individual month item style (includes data-[state=active] styles)
+     */
+    monthItemStyle?: string;
+    /**
+     * Date row container style
+     */
+    dateRowStyle?: string;
+    /**
+     * Individual date item style (includes data-[state=selected], data-[state=today], data-[disabled] styles)
+     */
+    dateItemStyle?: string;
+}
+export interface CalendarMiniTheme {
+    baseStyle: string;
+    monthRowStyle: string;
+    monthItemStyle: string;
+    dateRowStyle: string;
+    dateItemStyle: string;
+}

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

@@ -0,0 +1,2 @@
+export { CalendarMini } from './CalendarMini';
+export type { CalendarMiniProps, CalendarMiniTheme, CalendarMiniThemeOverrides, } from './CalendarMini.types';

package/dist/components/core/Calendar/calendar.utils.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared utility functions for Calendar components
+ */
+/**
+ * Check if two dates are the same day
+ */
+export declare const isSameDay: (date1: Date, date2: Date) => boolean;
+/**
+ * Check if a date is disabled based on min/max dates and custom disabled dates
+ */
+export declare const isDateDisabled: (date: Date, minDate?: Date, maxDate?: Date, disabledDates?: Date[]) => boolean;
+/**
+ * Check if a date belongs to the specified month
+ */
+export declare const isCurrentMonth: (date: Date, referenceMonth: Date) => boolean;
+/**
+ * Get the full month name for a date
+ */
+export declare const getMonthName: (date: Date, customMonths?: string[]) => string;

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

@@ -0,0 +1,53 @@
+/**
+ * Shared utility functions for Calendar components
+ */
+/**
+ * Check if two dates are the same day
+ */
+const isSameDay = (date1, date2) => {
+    return (date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate());
+};
+/**
+ * Check if a date is disabled based on min/max dates and custom disabled dates
+ */
+const isDateDisabled = (date, minDate, maxDate, disabledDates) => {
+    if (minDate && date < minDate)
+        return true;
+    if (maxDate && date > maxDate)
+        return true;
+    if (disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.some((disabledDate) => isSameDay(disabledDate, date)))
+        return true;
+    return false;
+};
+/**
+ * Check if a date belongs to the specified month
+ */
+const isCurrentMonth = (date, referenceMonth) => {
+    return (date.getMonth() === referenceMonth.getMonth() &&
+        date.getFullYear() === referenceMonth.getFullYear());
+};
+/**
+ * Get the full month name for a date
+ */
+const getMonthName = (date, customMonths) => {
+    const DEFAULT_MONTHS = [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ];
+    const months = customMonths || DEFAULT_MONTHS;
+    return months[date.getMonth()];
+};
+
+export { getMonthName, isCurrentMonth, isDateDisabled, isSameDay };

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

@@ -0,0 +1,5 @@
+export { Calendar } from './Calendar';
+export type { CalendarProps, CalendarDay, CalendarSize, CalendarMode, CalendarTheme, DateRange } from './Calendar.types';
+export { calendarTheme } from './Calendar.theme';
+export { calendarAnimations } from './Calendar.animations';
+export { CalendarMini } from './CalendarMini';

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

@@ -1,8 +1,8 @@
-import React from 'react';
-import { CardHeaderProps, CardContentProps, CardFooterProps, CardTitleProps, CardDescriptionProps, CardComponent } from './Card.types';
-export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
-export declare const CardTitle: React.ForwardRefExoticComponent<CardTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-export declare const CardDescription: React.ForwardRefExoticComponent<CardDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
-export declare const CardContent: React.ForwardRefExoticComponent<CardContentProps & React.RefAttributes<HTMLDivElement>>;
-export declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+import { CardComponent } from './Card.types';
+import { CardHeader } from './CardHeader';
+import { CardTitle } from './CardTitle';
+import { CardDescription } from './CardDescription';
+import { CardContent } from './CardContent';
+import { CardFooter } from './CardFooter';
+export { CardHeader, CardTitle, CardDescription, CardContent, CardFooter };
 export declare const Card: CardComponent;

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

@@ -1,41 +1,22 @@
-import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default from 'react';
 import { cn } from '../../../utils/cn.js';
 import { cardTheme } from './Card.theme.js';
+import { CardHeader } from './CardHeader.js';
+import { CardTitle } from './CardTitle.js';
+import { CardDescription } from './CardDescription.js';
+import { CardContent } from './CardContent.js';
+import { CardFooter } from './CardFooter.js';
 
-var CardRoot = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, _b = _a.theme, customTheme = _b === void 0 ? {} : _b, props = __rest(_a, ["children", "className", "theme"]);
-    var theme = __assign(__assign({}, cardTheme), customTheme);
-    return (React__default.createElement("div", __assign({ ref: ref, className: cn(theme.baseStyle, className) }, props), children));
-});
-var CardHeader = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ ref: ref, className: cn('flex flex-col space-y-1.5 p-6', className) }, props), children));
-});
-var CardTitle = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("h3", __assign({ ref: ref, className: cn('text-2xl font-semibold leading-none tracking-tight', className) }, props), children));
-});
-var CardDescription = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("p", __assign({ ref: ref, className: cn('text-sm text-gray-600', className) }, props), children));
-});
-var CardContent = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ ref: ref, className: cn('p-6 pt-0', className) }, props), children));
-});
-var CardFooter = React__default.forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
-    return (React__default.createElement("div", __assign({ ref: ref, className: cn('flex items-center p-6 pt-0', className) }, props), children));
+const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, ...props }, ref) => {
+    const theme = {
+        ...cardTheme,
+        ...customTheme,
+    };
+    return (React__default.createElement("div", { ref: ref, className: cn(theme.baseStyle, className), ...props }, children));
 });
 CardRoot.displayName = 'Card';
-CardHeader.displayName = 'CardHeader';
-CardTitle.displayName = 'CardTitle';
-CardDescription.displayName = 'CardDescription';
-CardContent.displayName = 'CardContent';
-CardFooter.displayName = 'CardFooter';
 // Create compound component with proper typing
-var Card = Object.assign(CardRoot, {
+const Card = Object.assign(CardRoot, {
     Header: CardHeader,
     Title: CardTitle,
     Description: CardDescription,

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,5 +1,10 @@
-var cardTheme = {
-    baseStyle: 'rounded-xl overflow-hidden bg-white border border-border',
+const cardTheme = {
+    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,15 +1,25 @@
-import { HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from 'react';
+import { HTMLAttributes, ReactNode, ForwardRefExoticComponent, RefAttributes } from "react";
 export interface CardTheme {
     baseStyle: string;
+    headerStyle: string;
+    titleStyle: string;
+    descriptionStyle: string;
+    contentStyle: string;
+    footerStyle: string;
 }
 export interface CardThemeOverrides {
     baseStyle?: string;
+    headerStyle?: string;
+    titleStyle?: string;
+    descriptionStyle?: string;
+    contentStyle?: string;
+    footerStyle?: string;
 }
 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.d.ts

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

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

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

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

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

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

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

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

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