@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,250 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 = React__default.forwardRef(({ selectedDate, currentMonth, onDateSelect, onMonthChange, visibleMonths = 5, visibleDates = 7, minDate, maxDate, disabledDates, startFrom = "today", shouldAnimate = true, showTodayButton = true, className, theme, ...rest }, ref) => {
+    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 (jsxs("div", { ref: ref, className: cn(mergedTheme.baseStyle, className), role: "region", "aria-label": "Mini calendar", ...rest, children: [jsx(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", children: jsx(ChevronLeftIcon, { className: "size-5 text-[var(--color-text-primary)]" }) }), jsxs("div", { className: "flex flex-col gap-1 relative", children: [jsxs("div", { className: "flex items-center gap-1", children: [jsx("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)",
+                                }, children: jsx("div", { ref: monthScrollRef, className: cn(mergedTheme.monthRowStyle), role: "tablist", "aria-label": "Month selection", children: jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: jsx(MonthRow, { custom: direction, ...(enableAnimations && {
+                                                variants: monthTransitionVariants,
+                                                initial: "enter",
+                                                animate: "center",
+                                                exit: "exit",
+                                                transition: { duration: 0.3 },
+                                            }), className: "flex gap-4", children: months.map((month, index) => {
+                                                const isActive = isMonthActive(month);
+                                                return (jsx("button", { 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", children: formatMonth(month) }, `${month.getFullYear()}-${month.getMonth()}`));
+                                            }) }, `${activeMonth.getFullYear()}-${activeMonth.getMonth()}`) }) }) }), showTodayButton && !isTodayVisible && (jsx(Button, { size: "sm", variant: "link", onClick: handleTodayClick, "aria-label": "Jump to today", className: "mr-7", children: "Today" }))] }), jsx("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)",
+                        }, children: jsx("div", { className: cn(mergedTheme.dateRowStyle), role: "list", "aria-label": "Date selection", children: jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: jsx(motion.div, { 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", children: 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 (jsxs(DateItem, { 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,
+                                            }), children: [jsx("div", { className: "text-sm font-medium opacity-60", children: formatDayName(date) }), jsx("time", { dateTime: date.toISOString(), className: cn("font-semibold"), children: formatDateNumber(date) })] }, date.toISOString()));
+                                    }) }, `${startDate.getTime()}-dates`) }) }) })] }), jsx(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", children: jsx(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-radius)] 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

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

@@ -0,0 +1,29 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default, { useMemo } 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';
+
+const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, title, description, footer, darkMode = false, ...props }, ref) => {
+    const theme = useMemo(() => ({
+        ...cardTheme,
+        ...customTheme,
+    }), [customTheme]);
+    const hasHeader = title || description;
+    return (jsxs("div", { ref: ref, className: cn(theme.baseStyle, darkMode && "dark", className), ...props, children: [hasHeader && (jsxs("div", { className: theme.headerStyle, children: [title && jsx("div", { className: theme.titleStyle, children: title }), description && jsx("div", { className: theme.descriptionStyle, children: description })] })), hasHeader ? (jsx("div", { className: theme.contentStyle, children: children })) : (children), footer && jsx("div", { className: theme.footerStyle, children: footer })] }));
+});
+CardRoot.displayName = 'Card';
+// Create compound component with proper typing
+const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Title: CardTitle,
+    Description: CardDescription,
+    Content: CardContent,
+    Footer: CardFooter,
+});
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

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

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

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

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

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

@@ -0,0 +1,81 @@
+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 Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /**
+     * The content to be displayed inside the card
+     */
+    children?: ReactNode;
+    /**
+     * Custom class name for the card
+     */
+    className?: string;
+    /**
+     * Component-level theme overrides
+     */
+    theme?: CardThemeOverrides;
+    /**
+     * Card title - auto-generates header when provided
+     * Use this for simple cards instead of Card.Header/Card.Title
+     */
+    title?: ReactNode;
+    /**
+     * Card description - displayed below title in auto-generated header
+     * Use this for simple cards instead of Card.Header/Card.Description
+     */
+    description?: ReactNode;
+    /**
+     * Card footer content - auto-generates footer when provided
+     * Use this for simple cards instead of Card.Footer
+     */
+    footer?: ReactNode;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode. This applies the
+     * 'dark' class to the container, making text, borders, and other elements
+     * use light colors for visibility.
+     * @default false
+     */
+    darkMode?: boolean;
+}
+export interface CardComponent extends ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>> {
+    Header: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
+    Title: ForwardRefExoticComponent<CardTitleProps & RefAttributes<HTMLHeadingElement>>;
+    Description: ForwardRefExoticComponent<CardDescriptionProps & RefAttributes<HTMLParagraphElement>>;
+    Content: ForwardRefExoticComponent<CardContentProps & RefAttributes<HTMLDivElement>>;
+    Footer: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
+}
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    children: ReactNode;
+    className?: string;
+}
+export interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+    className?: string;
+}

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,11 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { cardTheme } from './Card.theme.js';
+
+const CardContent = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: cn(cardTheme.contentStyle, className), ...props, children: 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,11 @@
+import { jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+import { cardTheme } from './Card.theme.js';
+
+const CardDescription = React__default.forwardRef(({ children, className, ...props }, ref) => {
+    return (jsx("div", { ref: ref, className: cn(cardTheme.descriptionStyle, className), ...props, children: 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>>;

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

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

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

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

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

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