flikkui 0.1.0-beta.11

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

@@ -0,0 +1,478 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useState, useEffect, useMemo } from 'react';
+import { calendarTheme } from './Calendar.theme.js';
+import { calendarAnimations } from './Calendar.animations.js';
+import { cn } from '../../../utils/cn.js';
+import { Select } from '../../forms/Select/Select.js';
+import '../../forms/Select/Select.theme.js';
+import { Button } from '../Button/Button.js';
+import '../Badge/Badge.js';
+import '../Avatar/Avatar.js';
+import '../AvatarGroup/AvatarGroup.js';
+import '../Accordion/Accordion.js';
+import '../Segmented/Segmented.js';
+import '../Stepper/Stepper.js';
+import '../Tooltip/Tooltip.js';
+import '../Tooltip/Tooltip.animations.js';
+import '../Tree/Tree.js';
+import '../Pagination/Pagination.js';
+import '../Divider/Divider.js';
+import '../Card/Card.js';
+import '../Modal/Modal.js';
+import '../Drawer/Drawer.js';
+import '../Dropdown/Dropdown.js';
+import '../Dropdown/DropdownTrigger.js';
+import '../Dropdown/DropdownMenu.js';
+import '../Dropdown/DropdownItem.js';
+import '../Dropdown/DropdownSection.js';
+import '../Dropdown/DropdownSeparator.js';
+import '../Popover/Popover.js';
+import '../Popover/PopoverContext.js';
+import '../Tabs/Tabs.js';
+import '../Tabs/TabsList.js';
+import '../Tabs/TabsTrigger.js';
+import '../Tabs/TabsContent.js';
+import '../Tabs/TabsContext.js';
+import '../Breadcrumbs/Breadcrumbs.js';
+import '../Breadcrumbs/Breadcrumbs.theme.js';
+import '../Carousel/Carousel.js';
+import '../ProgressiveBlur/ProgressiveBlur.js';
+import { getMonthName, isDateDisabled as isDateDisabled$1, isSameDay } from './calendar.utils.js';
+import '../../effects/CustomCursor/CustomCursor.js';
+import '../Alert/Alert.js';
+import '../Toast/Toast.js';
+import '../Toast/ToastProvider.js';
+import '../Notification/Notification.js';
+import '../ChatMessage/ChatMessage.js';
+import '../Empty/Empty.js';
+import '../NavItem/NavItem.js';
+import '../Sidebar/Sidebar.js';
+import '../Sidebar/SidebarHeader.js';
+import '../Sidebar/SidebarContent.js';
+import '../Sidebar/SidebarFooter.js';
+import '../Sidebar/SidebarNav.js';
+import '../Sidebar/SidebarNavGroup.js';
+import '../Sidebar/SidebarToggle.js';
+import '../Sidebar/SidebarContext.js';
+import '../Table/index.js';
+import '../DragDrop/DragDrop.js';
+import '../Sortable/Sortable.js';
+import '../../forms/Input/Input.js';
+import '../../forms/Input/Input.theme.js';
+import '../../forms/Textarea/Textarea.js';
+import '../../forms/Textarea/Textarea.theme.js';
+import '../../forms/DatePicker/DatePicker.js';
+import '../../forms/DatePicker/DatePicker.theme.js';
+import '../../forms/TimePicker/TimePicker.js';
+import 'react-dom';
+import '../../forms/TimePicker/TimePicker.theme.js';
+import '../../forms/Slider/Slider.js';
+import '../../forms/Slider/Slider.theme.js';
+import '../../forms/Signature/Signature.js';
+import '../../forms/Signature/Signature.theme.js';
+import '../../forms/RichTextEditor/RichTextEditor.js';
+import '../../forms/RichTextEditor/RichTextEditor.theme.js';
+import '../../forms/InputOTP/InputOTP.js';
+import '../../forms/InputOTP/InputOTP.theme.js';
+import '../../forms/InputCreditCard/InputCreditCard.theme.js';
+import '../../forms/InputAddress/InputAddress.theme.js';
+import '../../forms/InputDate/InputDate.js';
+import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronLeftIcon.js';
+import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronRightIcon.js';
+import { useReducedMotion } from '../../../node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.js';
+import { motion } from '../../../node_modules/framer-motion/dist/es/render/components/motion/proxy.js';
+
+/**
+ * Constants for date utilities
+ */
+var DEFAULT_MONTHS = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+var ABBREVIATED_MONTHS = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+];
+/**
+ * Date range utility (specific to Calendar component)
+ */
+var isDateInRange = function (date, start, end) {
+    if (!start || !end)
+        return false;
+    var dateTime = date.getTime();
+    var startTime = start.getTime();
+    var endTime = end.getTime();
+    return dateTime > startTime && dateTime < endTime;
+};
+/**
+ * Wrapper for isDateDisabled to support custom disabled function
+ */
+var isDateDisabled = function (date, minDate, maxDate, customDisabled) {
+    // Use shared utility for min/max dates
+    if (isDateDisabled$1(date, minDate, maxDate))
+        return true;
+    // Add custom disabled function check
+    if (customDisabled && customDisabled(date))
+        return true;
+    return false;
+};
+/**
+ * Generate calendar days for a given month and year with range support
+ */
+var generateCalendarDays = function (year, month, selectedValue, mode, today, minDate, maxDate, customDisabled) {
+    if (mode === void 0) { mode = 'single'; }
+    var firstDayOfMonth = new Date(year, month, 1);
+    var lastDayOfMonth = new Date(year, month + 1, 0);
+    var startDate = new Date(firstDayOfMonth);
+    // Adjust to start from Monday (1) instead of Sunday (0)
+    var dayOfWeek = (firstDayOfMonth.getDay() + 6) % 7;
+    startDate.setDate(startDate.getDate() - dayOfWeek);
+    var days = [];
+    var currentDate = new Date(startDate);
+    // Calculate minimum weeks needed to show all days of the month
+    var endDate = new Date(lastDayOfMonth);
+    var endDayOfWeek = (endDate.getDay() + 6) % 7;
+    var daysAfterMonth = 6 - endDayOfWeek;
+    var totalDays = dayOfWeek + lastDayOfMonth.getDate() + daysAfterMonth;
+    var weeksNeeded = Math.ceil(totalDays / 7);
+    var daysToGenerate = weeksNeeded * 7;
+    // Determine selected date(s) based on mode
+    var selectedDate = mode === 'single' && selectedValue instanceof Date ? selectedValue : undefined;
+    var rangeStart = mode === 'range' && selectedValue && typeof selectedValue === 'object' && 'start' in selectedValue ? selectedValue.start : null;
+    var rangeEnd = mode === 'range' && selectedValue && typeof selectedValue === 'object' && 'end' in selectedValue ? selectedValue.end : null;
+    // Generate only the needed number of days to fill complete weeks
+    for (var i = 0; i < daysToGenerate; i++) {
+        var date = new Date(currentDate);
+        var isCurrentMonth = date.getMonth() === month;
+        var isToday = today ? isSameDay(date, today) : false;
+        var isSelected = mode === 'single' && selectedDate ? isSameDay(date, selectedDate) : false;
+        var disabled = isDateDisabled(date, minDate, maxDate, customDisabled);
+        // Range-specific properties
+        var isRangeStart = mode === 'range' && rangeStart ? isSameDay(date, rangeStart) : false;
+        var isRangeEnd = mode === 'range' && rangeEnd ? isSameDay(date, rangeEnd) : false;
+        var isInRange = mode === 'range' ? isDateInRange(date, rangeStart, rangeEnd) : false;
+        days.push({
+            date: date,
+            isCurrentMonth: isCurrentMonth,
+            isToday: isToday,
+            isSelected: isSelected,
+            isRangeStart: isRangeStart,
+            isRangeEnd: isRangeEnd,
+            isInRange: isInRange,
+            isDisabled: disabled,
+        });
+        currentDate.setDate(currentDate.getDate() + 1);
+    }
+    return days;
+};
+var Calendar = function (_a) {
+    var _b = _a.mode, mode = _b === void 0 ? 'single' : _b, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, minDate = _a.minDate, maxDate = _a.maxDate, customIsDateDisabled = _a.isDateDisabled, _c = _a.showToday, showToday = _c === void 0 ? true : _c, _d = _a.selectTodayByDefault, selectTodayByDefault = _d === void 0 ? false : _d, _e = _a.weekdays, weekdays = _e === void 0 ? ["M", "T", "W", "T", "F", "S", "S"] : _e, months = _a.months, _f = _a.size, size = _f === void 0 ? "md" : _f, headerMode = _a.headerMode, _g = _a.enableMonthDropdown, enableMonthDropdown = _g === void 0 ? true : _g, _h = _a.enableYearDropdown, enableYearDropdown = _h === void 0 ? true : _h, yearRange = _a.yearRange, externalViewDate = _a.viewDate, onViewDateChange = _a.onViewDateChange, onNavigatePrev = _a.onNavigatePrev, onNavigateNext = _a.onNavigateNext, className = _a.className, props = __rest(_a, ["mode", "value", "defaultValue", "onChange", "minDate", "maxDate", "isDateDisabled", "showToday", "selectTodayByDefault", "weekdays", "months", "size", "headerMode", "enableMonthDropdown", "enableYearDropdown", "yearRange", "viewDate", "onViewDateChange", "onNavigatePrev", "onNavigateNext", "className"]);
+    // Determine initial view date from value/defaultValue
+    var getInitialViewDate = function () {
+        if (value) {
+            if (value instanceof Date)
+                return value;
+            if (value.start)
+                return value.start;
+        }
+        if (defaultValue) {
+            if (defaultValue instanceof Date)
+                return defaultValue;
+            if (defaultValue.start)
+                return defaultValue.start;
+        }
+        return new Date();
+    };
+    // Internal state for current view (month/year) - use external if provided
+    var _j = useState(getInitialViewDate), internalViewDate = _j[0], setInternalViewDate = _j[1];
+    var viewDate = externalViewDate || internalViewDate;
+    // Internal state for selected value (uncontrolled mode)
+    var _k = useState(function () {
+        if (defaultValue)
+            return defaultValue;
+        if (selectTodayByDefault && !value && mode === 'single') {
+            var today = new Date();
+            if (!isDateDisabled(today, minDate, maxDate, customIsDateDisabled)) {
+                return today;
+            }
+        }
+        return undefined;
+    }), internalValue = _k[0], setInternalValue = _k[1];
+    // Track range selection state (for range mode)
+    var _l = useState('start'), rangeSelectionState = _l[0], setRangeSelectionState = _l[1];
+    // Determine the selected value (controlled vs uncontrolled)
+    var selectedValue = value !== undefined ? value : internalValue;
+    // Keep range selection state in sync with current selection to avoid misinterpreting clicks
+    useEffect(function () {
+        if (mode !== 'range')
+            return;
+        var currentRange = selectedValue && typeof selectedValue === 'object' && 'start' in selectedValue
+            ? selectedValue
+            : { start: null, end: null };
+        if (currentRange.start && !currentRange.end) {
+            setRangeSelectionState('end');
+        }
+        else {
+            setRangeSelectionState('start');
+        }
+    }, [mode, selectedValue]);
+    // Current month and year being displayed
+    var currentYear = viewDate.getFullYear();
+    var currentMonth = viewDate.getMonth();
+    // Reduced motion support
+    var shouldReduceMotion = useReducedMotion();
+    // Resolve header display mode with backward compatibility
+    var resolvedHeaderMode = useMemo(function () {
+        // If headerMode is explicitly set, use it
+        if (headerMode)
+            return headerMode;
+        // Backward compatibility: infer from enableMonthDropdown and enableYearDropdown
+        if (!enableMonthDropdown && !enableYearDropdown)
+            return 'static';
+        if (enableMonthDropdown && enableYearDropdown)
+            return 'dropdown';
+        return 'mixed';
+    }, [headerMode, enableMonthDropdown, enableYearDropdown]);
+    // Navigation boundary detection - disable arrows when at min/max limits
+    var canNavigateToPrev = useMemo(function () {
+        if (!minDate)
+            return true;
+        var prevMonth = new Date(currentYear, currentMonth - 1, 1);
+        var minMonth = new Date(minDate.getFullYear(), minDate.getMonth(), 1);
+        return prevMonth >= minMonth;
+    }, [minDate, currentYear, currentMonth]);
+    var canNavigateToNext = useMemo(function () {
+        if (!maxDate)
+            return true;
+        var nextMonth = new Date(currentYear, currentMonth + 1, 1);
+        var maxMonth = new Date(maxDate.getFullYear(), maxDate.getMonth(), 1);
+        return nextMonth <= maxMonth;
+    }, [maxDate, currentYear, currentMonth]);
+    // Generate month options - filter based on minDate/maxDate
+    var monthNames = months || DEFAULT_MONTHS;
+    var monthOptions = useMemo(function () {
+        return monthNames
+            .map(function (monthName, index) { return ({
+            id: index,
+            value: index.toString(),
+            label: monthName,
+        }); })
+            .filter(function (option) {
+            var monthIndex = parseInt(option.value, 10);
+            // Filter out months outside min/max range for the current year
+            if (minDate && currentYear === minDate.getFullYear()) {
+                var minMonth = minDate.getMonth();
+                if (monthIndex < minMonth) {
+                    return false;
+                }
+            }
+            if (maxDate && currentYear === maxDate.getFullYear()) {
+                var maxMonth = maxDate.getMonth();
+                if (monthIndex > maxMonth) {
+                    return false;
+                }
+            }
+            return true;
+        });
+    }, [monthNames, currentYear, minDate, maxDate]);
+    // Generate year options - filter based on minDate/maxDate
+    var currentDate = new Date();
+    var defaultYearRange = {
+        start: currentDate.getFullYear() - 50,
+        end: currentDate.getFullYear() + 50,
+    };
+    var actualYearRange = yearRange || defaultYearRange;
+    var yearOptions = useMemo(function () {
+        // Determine year range based on minDate/maxDate if provided
+        var startYear = actualYearRange.start;
+        var endYear = actualYearRange.end;
+        if (minDate) {
+            startYear = Math.max(startYear, minDate.getFullYear());
+        }
+        if (maxDate) {
+            endYear = Math.min(endYear, maxDate.getFullYear());
+        }
+        var options = [];
+        for (var year = startYear; year <= endYear; year++) {
+            options.push({
+                id: year,
+                value: year.toString(),
+                label: year.toString(),
+            });
+        }
+        return options;
+    }, [actualYearRange, minDate, maxDate]);
+    // Current abbreviated month for display
+    var currentAbbreviatedMonth = ABBREVIATED_MONTHS[currentMonth];
+    // Dropdown change handlers
+    var handleMonthChange = function (monthValue) {
+        var newMonth = parseInt(monthValue, 10);
+        var newDate = new Date(currentYear, newMonth, 1);
+        if (onViewDateChange) {
+            onViewDateChange(newDate);
+        }
+        else {
+            setInternalViewDate(newDate);
+        }
+    };
+    var handleYearChange = function (yearValue) {
+        var newYear = parseInt(yearValue, 10);
+        var newDate = new Date(newYear, currentMonth, 1);
+        if (onViewDateChange) {
+            onViewDateChange(newDate);
+        }
+        else {
+            setInternalViewDate(newDate);
+        }
+    };
+    // Generate calendar days
+    var calendarDays = useMemo(function () {
+        return generateCalendarDays(currentYear, currentMonth, selectedValue, mode, showToday ? new Date() : null, minDate, maxDate, customIsDateDisabled);
+    }, [
+        currentYear,
+        currentMonth,
+        selectedValue,
+        mode,
+        showToday,
+        minDate,
+        maxDate,
+        customIsDateDisabled,
+    ]);
+    // Navigation handlers
+    var navigateToPreviousMonth = function () {
+        if (onNavigatePrev === null)
+            return; // null means hide this button
+        if (onNavigatePrev) {
+            // Use custom handler
+            onNavigatePrev();
+        }
+        else {
+            // Use default behavior
+            var newDate = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1);
+            if (onViewDateChange) {
+                onViewDateChange(newDate);
+            }
+            else {
+                setInternalViewDate(newDate);
+            }
+        }
+    };
+    var navigateToNextMonth = function () {
+        if (onNavigateNext === null)
+            return; // null means hide this button
+        if (onNavigateNext) {
+            // Use custom handler
+            onNavigateNext();
+        }
+        else {
+            // Use default behavior
+            var newDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1);
+            if (onViewDateChange) {
+                onViewDateChange(newDate);
+            }
+            else {
+                setInternalViewDate(newDate);
+            }
+        }
+    };
+    // Date selection handler
+    var handleDateSelect = function (date) {
+        if (isDateDisabled(date, minDate, maxDate, customIsDateDisabled)) {
+            return;
+        }
+        // Auto-navigate to the selected date's month if it's different from current view
+        if (date.getMonth() !== currentMonth ||
+            date.getFullYear() !== currentYear) {
+            var newDate = new Date(date.getFullYear(), date.getMonth(), 1);
+            if (onViewDateChange) {
+                onViewDateChange(newDate);
+            }
+            else {
+                setInternalViewDate(newDate);
+            }
+        }
+        if (mode === 'single') {
+            // Single date selection
+            var newValue = date;
+            // Update internal state if uncontrolled
+            if (value === undefined) {
+                setInternalValue(newValue);
+            }
+            // Call onChange callback
+            onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+        }
+        else {
+            // Range selection
+            var currentRange = selectedValue && typeof selectedValue === 'object' && 'start' in selectedValue
+                ? selectedValue
+                : { start: null, end: null };
+            if (rangeSelectionState === 'start' || (currentRange.start && currentRange.end)) {
+                // Starting a new range selection
+                var newRange = { start: date, end: null };
+                if (value === undefined) {
+                    setInternalValue(newRange);
+                }
+                setRangeSelectionState('end');
+                onChange === null || onChange === void 0 ? void 0 : onChange(newRange);
+            }
+            else {
+                // Completing the range
+                var start = currentRange.start;
+                var end = date;
+                // Ensure start is before end
+                var newRange = start <= end
+                    ? { start: start, end: end }
+                    : { start: end, end: start };
+                if (value === undefined) {
+                    setInternalValue(newRange);
+                }
+                setRangeSelectionState('start');
+                onChange === null || onChange === void 0 ? void 0 : onChange(newRange);
+            }
+        }
+    };
+    return (React__default.createElement("div", __assign({ className: cn(calendarTheme.baseStyle, className) }, props),
+        React__default.createElement("div", { className: calendarTheme.headerStyle },
+            onNavigatePrev !== null && (React__default.createElement(Button, { onClick: navigateToPreviousMonth, "aria-label": "Previous month", disabled: !canNavigateToPrev, iconOnly: true, variant: "link", color: "neutral", size: "sm" },
+                React__default.createElement(ForwardRef, { className: "size-4", strokeWidth: 2 }))),
+            onNavigatePrev === null && React__default.createElement("div", { className: "w-8" }),
+            resolvedHeaderMode === 'static' ? (React__default.createElement("h2", { className: calendarTheme.titleStyle },
+                getMonthName(viewDate, months),
+                " ",
+                currentYear)) : (React__default.createElement("div", { className: calendarTheme.headerDropdownsStyle },
+                (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableMonthDropdown)) && (React__default.createElement(Select, { value: currentMonth.toString(), onChange: handleMonthChange, options: monthOptions, displayValue: currentAbbreviatedMonth, size: "sm", className: "text-sm font-medium" })),
+                (resolvedHeaderMode === 'dropdown' || (resolvedHeaderMode === 'mixed' && enableYearDropdown)) && (React__default.createElement(Select, { value: currentYear.toString(), onChange: handleYearChange, options: yearOptions, size: "sm", className: "text-sm font-medium" })))),
+            onNavigateNext !== null && (React__default.createElement(Button, { onClick: navigateToNextMonth, "aria-label": "Next month", disabled: !canNavigateToNext, iconOnly: true, variant: "link", color: "neutral", size: "sm" },
+                React__default.createElement(ForwardRef$1, { className: "size-4", strokeWidth: 2 }))),
+            onNavigateNext === null && React__default.createElement("div", { className: "w-8" })),
+        React__default.createElement("div", { className: calendarTheme.weekdaysStyle }, weekdays.map(function (day, index) { return (React__default.createElement("div", { key: index, className: calendarTheme.weekdayStyle }, day)); })),
+        React__default.createElement("div", { className: calendarTheme.daysGridStyle }, calendarDays.map(function (day) {
+            var _a;
+            var dayNumber = day.date.getDate();
+            return (React__default.createElement(motion.button, { key: day.date.toISOString(), type: "button", onClick: function () { return handleDateSelect(day.date); }, disabled: day.isDisabled, className: cn(calendarTheme.dayButtonStyle, (_a = calendarTheme.dayButtonSizes) === null || _a === void 0 ? void 0 : _a[size]), "data-selected": day.isSelected, "data-range-start": day.isRangeStart, "data-range-end": day.isRangeEnd, "data-in-range": day.isInRange, "data-today": day.isToday && !day.isSelected && !day.isRangeStart && !day.isRangeEnd, "data-disabled": day.isDisabled, "data-other-month": !day.isCurrentMonth, "aria-label": "Select ".concat(day.date.toLocaleDateString()), variants: shouldReduceMotion ? {} : calendarAnimations.dayButton, whileHover: shouldReduceMotion ? undefined : (!day.isDisabled ? "hover" : undefined), whileTap: shouldReduceMotion ? undefined : (!day.isDisabled ? "tap" : undefined) },
+                React__default.createElement("time", { dateTime: day.date.toISOString().split("T")[0] }, dayNumber),
+                day.isToday && (React__default.createElement(motion.span, { className: "absolute z-10 bottom-1 left-1/2 -translate-x-1/2 w-1 h-1 bg-[var(--color-primary)] rounded-full", variants: shouldReduceMotion ? {} : calendarAnimations.todayDot, initial: shouldReduceMotion ? undefined : "initial", animate: shouldReduceMotion ? undefined : "animate" }))));
+        }))));
+};
+
+export { Calendar };

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

@@ -0,0 +1,6 @@
+import { CalendarTheme } from './Calendar.types';
+/**
+ * Calendar component theme following flat structure pattern
+ * Uses design tokens and data-[state=*] selectors
+ */
+export declare const calendarTheme: CalendarTheme;

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

@@ -0,0 +1,21 @@
+/**
+ * Calendar component theme following flat structure pattern
+ * Uses design tokens and data-[state=*] selectors
+ */
+var calendarTheme = {
+    baseStyle: "select-none w-full max-w-fit bg-white",
+    headerStyle: "flex items-center justify-between mb-4",
+    titleStyle: "text-base font-semibold text-[var(--color-text-primary)] cursor-pointer hover:text-[var(--color-primary)] transition-colors",
+    headerDropdownsStyle: "grid grid-cols-2 items-center gap-2 flex-1 justify-center mx-3",
+    weekdaysStyle: "grid grid-cols-7 mb-2",
+    weekdayStyle: "flex items-center justify-center h-8 text-xs font-medium text-[var(--color-text-muted)]",
+    daysGridStyle: "grid grid-cols-7 gap-0.5",
+    dayButtonStyle: "relative flex items-center justify-center rounded-full border-0 bg-transparent font-medium cursor-pointer transition-all duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 text-[var(--color-text-primary)] hover:bg-[var(--color-primary-50)] data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:text-white  data-[selected=true]:bg-[var(--color-primary)] data-[selected=true]:hover:bg-[var(--color-primary-600)] data-[selected=true]:border-t data-[selected=true]:border-white/30 data-[today=true]:text-[var(--color-primary)] data-[disabled=true]:text-[var(--color-text-muted)] data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:hover:bg-transparent data-[other-month=true]:text-[var(--color-text-muted)] data-[other-month=true]:opacity-60 data-[range-start=true]:bg-[var(--color-primary)] data-[range-start=true]:text-white data-[range-end=true]:bg-[var(--color-primary)] data-[range-end=true]:text-white data-[in-range=true]:bg-[var(--color-primary-50)]/70 data-[in-range=true]:text-[var(--color-text-primary)]",
+    dayButtonSizes: {
+        sm: "size-8 text-sm",
+        md: "size-10 text-sm",
+        lg: "size-12 text-base",
+    },
+};
+
+export { calendarTheme };

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

@@ -0,0 +1,124 @@
+import React from 'react';
+/**
+ * Size variants for the Calendar component
+ */
+export type CalendarSize = 'sm' | 'md' | 'lg';
+/**
+ * Selection mode for Calendar
+ */
+export type CalendarMode = 'single' | 'range';
+/**
+ * Header display mode for Calendar
+ * - 'dropdown': Show month and year as dropdowns (interactive)
+ * - 'static': Show month and year as static text (e.g., "October 2025")
+ * - 'mixed': Use enableMonthDropdown and enableYearDropdown for custom control
+ */
+export type CalendarHeaderMode = 'dropdown' | 'static' | 'mixed';
+/**
+ * Date range type for range selection
+ */
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+/**
+ * Calendar component props
+ * @property {Date | DateRange} value - The selected date or range (controlled mode)
+ * @property {Date | DateRange} defaultValue - Default selected date or range (uncontrolled mode)
+ * @property {function} onChange - Callback when date/range is selected
+ * @property {CalendarMode} mode - Selection mode (single or range)
+ * @property {Date} minDate - Minimum selectable date
+ * @property {Date} maxDate - Maximum selectable date
+ * @property {function} isDateDisabled - Function to determine if a date should be disabled
+ * @property {boolean} showToday - Whether to highlight today's date
+ * @property {boolean} selectTodayByDefault - Auto-select today's date when no value is provided (default: false)
+ * @property {string[]} weekdays - Custom weekday labels
+ * @property {string[]} months - Custom month names
+ * @property {CalendarSize} size - Size variant
+ * @property {boolean} enableMonthDropdown - Whether to show month dropdown (default: true)
+ * @property {boolean} enableYearDropdown - Whether to show year dropdown (default: true)
+ * @property {object} yearRange - Range of years to show in dropdown
+ */
+export interface CalendarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'defaultValue'> {
+    /** Selection mode - single date or date range */
+    mode?: CalendarMode;
+    /** The selected date or range (controlled mode) */
+    value?: Date | DateRange;
+    /** Default selected date or range (uncontrolled mode) */
+    defaultValue?: Date | DateRange;
+    /** Callback fired when a date or range is selected */
+    onChange?: (value: Date | DateRange) => void;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Function to determine if a specific date should be disabled */
+    isDateDisabled?: (date: Date) => boolean;
+    /** Whether to highlight today's date (default: true) */
+    showToday?: boolean;
+    /** Auto-select today's date when calendar opens without a value (default: false) */
+    selectTodayByDefault?: boolean;
+    /** Custom weekday labels (default: ['M', 'T', 'W', 'T', 'F', 'S', 'S']) */
+    weekdays?: string[];
+    /** Custom month names */
+    months?: string[];
+    /** Size variant */
+    size?: CalendarSize;
+    /** Header display mode - dropdown (default), static text, or mixed (default: 'dropdown') */
+    headerMode?: CalendarHeaderMode;
+    /** Whether to enable month dropdown instead of navigation arrows (default: true) */
+    enableMonthDropdown?: boolean;
+    /** Whether to enable year dropdown instead of navigation arrows (default: true) */
+    enableYearDropdown?: boolean;
+    /** Year range for dropdown selection (default: ±50 years from current) */
+    yearRange?: {
+        start: number;
+        end: number;
+    };
+    /** External control of displayed month/year (for dual calendar mode) */
+    viewDate?: Date;
+    /** Callback when view date changes (from dropdowns or navigation) */
+    onViewDateChange?: (date: Date) => void;
+    /** Custom prev navigation handler (null to hide left arrow) */
+    onNavigatePrev?: (() => void) | null;
+    /** Custom next navigation handler (null to hide right arrow) */
+    onNavigateNext?: (() => void) | null;
+    /** Additional class name for the container */
+    className?: string;
+}
+/**
+ * Internal day object used by the Calendar
+ */
+export interface CalendarDay {
+    /** The date object */
+    date: Date;
+    /** Whether this day belongs to the current month */
+    isCurrentMonth: boolean;
+    /** Whether this day is today */
+    isToday: boolean;
+    /** Whether this day is selected */
+    isSelected: boolean;
+    /** Whether this day is the range start */
+    isRangeStart?: boolean;
+    /** Whether this day is the range end */
+    isRangeEnd?: boolean;
+    /** Whether this day is within a selected range */
+    isInRange?: boolean;
+    /** Whether this day is disabled */
+    isDisabled: boolean;
+}
+/**
+ * Theme interface for Calendar component (flat structure)
+ */
+export interface CalendarTheme {
+    baseStyle: string;
+    headerStyle: string;
+    titleStyle: string;
+    headerDropdownsStyle: string;
+    navButtonStyle: string;
+    weekdaysStyle: string;
+    weekdayStyle: string;
+    daysGridStyle: string;
+    dayButtonStyle: string;
+    dayButtonSizes?: Record<CalendarSize, string>;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CalendarEventProps } from './CalendarEvent.types';
+declare const CalendarEvent: React.ForwardRefExoticComponent<CalendarEventProps & React.RefAttributes<HTMLDivElement>>;
+export { CalendarEvent };

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

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