@crestbase/web-shared-ui 1.0.1 → 1.0.3

package/dist/components/core/Calendar.js

@@ -0,0 +1,440 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState, useId, useCallback } from "react";
+// Pure helper: parse a 24h time string "HH:MM" into minutes of day
+const parseTimeString = (value) => {
+    const parts = value.split(":");
+    if (parts.length !== 2)
+        return null;
+    const hh = Number(parts[0]);
+    const mm = Number(parts[1]);
+    if (Number.isNaN(hh) || Number.isNaN(mm) || hh < 0 || hh > 23 || mm < 0 || mm > 59) {
+        return null;
+    }
+    return hh * 60 + mm;
+};
+const Calendar = ({ selectedDates, onDateSelect, bookedDates = [], maxSelections, enableTimeSelection = false, allowPastDates = false, timeStepMinutes = 30, timeFormat = "12h", }) => {
+    const defaultPeriod = useMemo(() => (new Date().getHours() >= 12 ? "PM" : "AM"), []);
+    const [currentMonth, setCurrentMonth] = useState(new Date());
+    const [showTimePanel, setShowTimePanel] = useState(false);
+    const [tempDate, setTempDate] = useState(null);
+    // Redesigned time selection state
+    const [selectedHour, setSelectedHour] = useState(null);
+    const [selectedMinute, setSelectedMinute] = useState(null);
+    const [period, setPeriod] = useState(defaultPeriod);
+    const [editingPart, setEditingPart] = useState("hour");
+    const [minuteTens, setMinuteTens] = useState(null);
+    const [minuteOnes, setMinuteOnes] = useState(null);
+    // Derived minutes from current hour/minute/period selection
+    const minutesOfDayFromSelection = useMemo(() => {
+        if (selectedHour == null || selectedMinute == null)
+            return null;
+        const hours24 = timeFormat === "24h"
+            ? selectedHour
+            : (selectedHour % 12) + (period === "PM" ? 12 : 0);
+        return hours24 * 60 + selectedMinute;
+    }, [selectedHour, selectedMinute, period, timeFormat]);
+    // Derived minutes even when only hour or only minute is selected (for preview)
+    const minutesOfDayFromPartialSelection = useMemo(() => {
+        if (selectedHour == null && selectedMinute == null)
+            return null;
+        const minutes = selectedMinute ?? 0;
+        const hours24 = timeFormat === "24h"
+            ? selectedHour ?? 0
+            : ((selectedHour ?? 12) % 12) + (period === "PM" ? 12 : 0);
+        return hours24 * 60 + minutes;
+    }, [selectedHour, selectedMinute, period, timeFormat]);
+    const today = new Date();
+    const year = currentMonth.getFullYear();
+    const month = currentMonth.getMonth();
+    // Get first day of month and number of days
+    const firstDay = new Date(year, month, 1);
+    const lastDay = new Date(year, month + 1, 0);
+    const daysInMonth = lastDay.getDate();
+    const startingDayOfWeek = firstDay.getDay();
+    // Month names
+    const monthNames = [
+        "January",
+        "February",
+        "March",
+        "April",
+        "May",
+        "June",
+        "July",
+        "August",
+        "September",
+        "October",
+        "November",
+        "December",
+    ];
+    // Helper: date-only timestamp (moved earlier for predicate/useCallback ordering)
+    const toDateOnlyTs = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+    // Helper: two-digit pad
+    const pad2 = (n) => String(n).padStart(2, "0");
+    // Helper: format minutes-of-day to label respecting 12h/24h
+    const formatTimeLabel = (minutesOfDay, fmt) => {
+        const hh = Math.floor(minutesOfDay / 60);
+        const mm = minutesOfDay % 60;
+        if (fmt === "24h") {
+            return `${pad2(hh)}:${pad2(mm)}`;
+        }
+        const periodLabel = hh >= 12 ? "PM" : "AM";
+        const h12 = hh % 12 === 0 ? 12 : hh % 12;
+        return `${h12}:${pad2(mm)} ${periodLabel}`;
+    };
+    // Predicates defined before usage to avoid TDZ/lint issues
+    const isDateSelected = useCallback((day) => {
+        const date = new Date(year, month, day);
+        const currentDateOnlyTs = toDateOnlyTs(date);
+        return selectedDates.some((selectedDate) => toDateOnlyTs(selectedDate) === currentDateOnlyTs);
+    }, [year, month, selectedDates]);
+    const isDateBooked = useCallback((day) => {
+        const date = new Date(year, month, day);
+        const currentDateOnlyTs = toDateOnlyTs(date);
+        return bookedDates.some((bookedDate) => toDateOnlyTs(bookedDate) === currentDateOnlyTs);
+    }, [year, month, bookedDates]);
+    const todayOnlyTs = useMemo(() => toDateOnlyTs(today), [today]);
+    const isDateDisabled = useCallback((day) => {
+        const date = new Date(year, month, day);
+        const dateOnlyTs = toDateOnlyTs(date);
+        return (!allowPastDates && dateOnlyTs < todayOnlyTs) || isDateBooked(day);
+    }, [year, month, todayOnlyTs, allowPastDates, isDateBooked]);
+    const handleDateClick = useCallback((day) => {
+        const clickedDate = new Date(year, month, day);
+        const clickedDateOnlyTs = toDateOnlyTs(clickedDate);
+        // Don't allow past dates or booked dates
+        if ((!allowPastDates && clickedDateOnlyTs < todayOnlyTs) || isDateBooked(day))
+            return;
+        // Check if we've reached max selections and this date isn't already selected
+        if (maxSelections &&
+            selectedDates.length >= maxSelections &&
+            !isDateSelected(day)) {
+            // When only one selection is allowed, permit switching days (replace later)
+            if (maxSelections !== 1) {
+                return;
+            }
+        }
+        if (!enableTimeSelection) {
+            onDateSelect(clickedDate);
+            return;
+        }
+        // Time selection flow
+        setTempDate(clickedDate);
+        setShowTimePanel(true);
+        // Prefill time if this day is already selected; otherwise default to 00 minutes
+        const existingForDay = selectedDates.find((selectedDate) => toDateOnlyTs(selectedDate) === clickedDateOnlyTs);
+        if (existingForDay) {
+            const hours24 = existingForDay.getHours();
+            const minutes = existingForDay.getMinutes();
+            if (timeFormat === "24h") {
+                setSelectedHour(hours24);
+            }
+            else {
+                const newPeriod = hours24 >= 12 ? "PM" : "AM";
+                const hour12 = hours24 % 12 === 0 ? 12 : hours24 % 12;
+                setPeriod(newPeriod);
+                setSelectedHour(hour12);
+            }
+            setSelectedMinute(minutes);
+            setMinuteTens(Math.floor(minutes / 10));
+            setMinuteOnes(minutes % 10);
+        }
+        else {
+            // reset redesigned time selection state
+            setSelectedHour(null);
+            setSelectedMinute(0);
+            setMinuteTens(0);
+            setMinuteOnes(0);
+            setPeriod(defaultPeriod);
+        }
+        setEditingPart("hour");
+    }, [
+        year,
+        month,
+        todayOnlyTs,
+        allowPastDates,
+        isDateBooked,
+        maxSelections,
+        selectedDates,
+        isDateSelected,
+        enableTimeSelection,
+        onDateSelect,
+        timeFormat,
+        defaultPeriod,
+    ]);
+    const handlePrevMonth = useCallback(() => {
+        setCurrentMonth(new Date(year, month - 1, 1));
+    }, [year, month]);
+    const handleNextMonth = useCallback(() => {
+        setCurrentMonth(new Date(year, month + 1, 1));
+    }, [year, month]);
+    const isToday = useMemo(() => {
+        if (!tempDate)
+            return false;
+        const d = tempDate;
+        return (d.getFullYear() === today.getFullYear() &&
+            d.getMonth() === today.getMonth() &&
+            d.getDate() === today.getDate());
+    }, [tempDate, today]);
+    // Accessibility: dynamic regions for date/time views
+    const dateViewHeadingId = useId();
+    const timeViewHeadingId = useId();
+    // Memoized hour options to avoid recreating arrays per render
+    const hourOptions24 = useMemo(() => Array.from({ length: 24 }, (_, i) => i), []);
+    const hourOptions12 = useMemo(() => Array.from({ length: 12 }, (_, i) => i + 1), []);
+    // Suggested quick-pick times, driven by timeStepMinutes while preserving defaults
+    const suggestedTimes = useMemo(() => {
+        const step = Math.max(1, timeStepMinutes ?? 30);
+        // Base anchors; for step=30 these remain 10:00, 12:00, 14:00
+        const anchors = [10 * 60, 12 * 60, 14 * 60];
+        return anchors.map((base) => {
+            const m = Math.floor(base / step) * step;
+            const label = formatTimeLabel(m, timeFormat);
+            let disabled = false;
+            if (isToday) {
+                const nowMinutes = today.getHours() * 60 + today.getMinutes();
+                disabled = m < nowMinutes;
+            }
+            return { label, minutes: m, disabled };
+        });
+    }, [timeStepMinutes, timeFormat, isToday, today]);
+    // Manual time entry (input[type="time"]) state
+    const [manualTime, setManualTime] = useState("");
+    // Sync manual time display when selection changes
+    useEffect(() => {
+        const m = minutesOfDayFromPartialSelection;
+        if (m == null)
+            return;
+        const hh = Math.floor(m / 60);
+        const mm = m % 60;
+        const value = `${String(hh).padStart(2, "0")}:${String(mm).padStart(2, "0")}`;
+        setManualTime(value);
+    }, [/* sync with selection */ tempDate, minutesOfDayFromPartialSelection]);
+    const setSelectionFromMinutes = useCallback((minutesOfDay) => {
+        const hours24 = Math.floor(minutesOfDay / 60);
+        const minutes = minutesOfDay % 60;
+        if (timeFormat === "24h") {
+            setSelectedHour(hours24);
+            setSelectedMinute(minutes);
+        }
+        else {
+            const newPeriod = hours24 >= 12 ? "PM" : "AM";
+            const hour12 = hours24 % 12 === 0 ? 12 : hours24 % 12;
+            setPeriod(newPeriod);
+            setSelectedHour(hour12);
+            setSelectedMinute(minutes);
+        }
+    }, [timeFormat]);
+    const handleManualTimeChange = useCallback((value) => {
+        setManualTime(value);
+        const m = parseTimeString(value);
+        if (m != null) {
+            setSelectionFromMinutes(m);
+        }
+    }, [setSelectionFromMinutes]);
+    const handleTimeSelect = useCallback((minutesOfDay) => {
+        if (!tempDate)
+            return;
+        const d = new Date(tempDate);
+        const hours = Math.floor(minutesOfDay / 60);
+        const minutes = minutesOfDay % 60;
+        d.setHours(hours, minutes, 0, 0);
+        onDateSelect(d);
+        setShowTimePanel(false);
+        setTempDate(null);
+        // clear state
+        setSelectedHour(null);
+        setSelectedMinute(null);
+        setPeriod(defaultPeriod);
+    }, [tempDate, onDateSelect, defaultPeriod]);
+    // moved above to ensure availability for effects using it
+    const effectiveMinutesOfDay = useMemo(() => {
+        const manual = parseTimeString(manualTime);
+        return manual != null ? manual : minutesOfDayFromSelection;
+    }, [manualTime, minutesOfDayFromSelection]);
+    const isSelectedTimePast = useMemo(() => {
+        if (!isToday || effectiveMinutesOfDay == null)
+            return false;
+        const nowMinutes = today.getHours() * 60 + today.getMinutes();
+        return effectiveMinutesOfDay < nowMinutes;
+    }, [isToday, effectiveMinutesOfDay, today]);
+    // formatPreviewTime removed; use formatTimeLabel directly where needed
+    const handleConfirmSelection = useCallback(() => {
+        if (effectiveMinutesOfDay == null)
+            return;
+        if (isSelectedTimePast)
+            return;
+        handleTimeSelect(effectiveMinutesOfDay);
+    }, [effectiveMinutesOfDay, isSelectedTimePast, handleTimeSelect]);
+    // Generate calendar days (memoized)
+    const calendarDays = useMemo(() => {
+        const days = [];
+        // Add empty cells for days before the first day of the month
+        for (let i = 0; i < startingDayOfWeek; i++) {
+            days.push(_jsx("div", { className: "h-10" }, `empty-${i}`));
+        }
+        // Add days of the month
+        for (let day = 1; day <= daysInMonth; day++) {
+            const isDisabled = isDateDisabled(day);
+            const isSelected = isDateSelected(day);
+            const isBooked = isDateBooked(day);
+            const dateOnly = new Date(year, month, day);
+            const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+            const isPast = dateOnly < todayOnly;
+            const isCurrent = dateOnly.getTime() === todayOnly.getTime();
+            let buttonClass = "h-8 w-8 rounded-full flex items-center justify-center text-[11px] transition-all duration-200 ";
+            if (isDisabled) {
+                if (isBooked) {
+                    buttonClass +=
+                        "bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200";
+                }
+                else if (isPast) {
+                    buttonClass += "text-gray-300 cursor-not-allowed";
+                }
+            }
+            else if (isSelected) {
+                buttonClass +=
+                    "bg-blue-500 text-white shadow-md transform scale-105 cursor-pointer";
+            }
+            else {
+                buttonClass +=
+                    "text-gray-700 hover:bg-blue-50 hover:text-blue-600 cursor-pointer";
+            }
+            days.push(_jsx("button", { onClick: () => handleDateClick(day), disabled: isDisabled, className: buttonClass, "aria-selected": isSelected, "aria-current": isCurrent ? "date" : undefined, title: isBooked ? "This date is already booked" : isPast ? "Past date" : "", children: day }, day));
+        }
+        return days;
+    }, [
+        startingDayOfWeek,
+        daysInMonth,
+        year,
+        month,
+        today,
+        isDateDisabled,
+        isDateSelected,
+        isDateBooked,
+        handleDateClick,
+    ]);
+    return (_jsxs("div", { className: "calendar ", children: [!(enableTimeSelection && showTimePanel && tempDate) && (_jsxs("div", { role: "region", "aria-labelledby": dateViewHeadingId, "aria-hidden": enableTimeSelection && showTimePanel && !!tempDate, className: "transition-all duration-300 ease-out", children: [_jsxs("div", { className: "flex items-center justify-between mb-3", children: [_jsx("button", { onClick: handlePrevMonth, className: "p-2 rounded-full hover:bg-gray-100 transition-colors cursor-pointer", "aria-label": "Previous month", children: _jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsxs("h3", { id: dateViewHeadingId, className: "text-sm font-medium text-gray-800", children: [monthNames[month], " ", year] }), _jsx("button", { onClick: handleNextMonth, className: "p-2 rounded-full hover:bg-gray-100 transition-colors cursor-pointer", "aria-label": "Next month", children: _jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })] }), _jsx("div", { className: "grid grid-cols-7 gap-1 mb-2", children: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => (_jsx("div", { className: "h-8 flex items-center justify-center text-xs font-medium text-gray-500", children: day }, day))) }), _jsx("div", { className: "grid grid-cols-7 gap-1", children: calendarDays }), _jsx("div", { className: "mt-3", children: _jsxs("div", { className: "flex justify-center gap-4 text-xs", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-blue-500 rounded-full" }), _jsx("span", { className: "text-gray-600", children: "Selected" })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("div", { className: "w-3 h-3 bg-gray-100 border border-gray-200 rounded-full" }), _jsx("span", { className: "text-gray-600", children: "Booked" })] })] }) })] })), enableTimeSelection && showTimePanel && tempDate && (_jsx("div", { role: "region", "aria-labelledby": timeViewHeadingId, "aria-hidden": !(enableTimeSelection && showTimePanel && tempDate), className: "transition-all duration-300 ease-out", children: _jsxs("div", { className: "", children: [_jsxs("div", { className: "flex items-center justify-between mb-2", children: [_jsx("button", { onClick: () => {
+                                        setShowTimePanel(false);
+                                        setTempDate(null);
+                                        setSelectedHour(null);
+                                        setSelectedMinute(null);
+                                        setPeriod(defaultPeriod);
+                                    }, className: "p-2 rounded-full hover:bg-gray-100 transition-colors cursor-pointer", "aria-label": "Back to date selection", type: "button", children: _jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsx("h4", { id: timeViewHeadingId, className: "text-sm font-medium text-gray-800", children: "Choose time" }), _jsx("span", { className: "text-xs text-gray-600", children: tempDate.toLocaleDateString(undefined, {
+                                        weekday: "short",
+                                        day: "numeric",
+                                        month: "short",
+                                        year: "numeric",
+                                    }) })] }), _jsxs("div", { className: "mb-3", children: [_jsx("span", { className: "text-xs text-gray-600 mr-2", children: "Quick picks:" }), _jsx("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Quick time suggestions", children: suggestedTimes.map((t) => (_jsx("button", { type: "button", "aria-disabled": t.disabled, disabled: t.disabled, onClick: () => handleTimeSelect(t.minutes), className: `text-[11px] px-3 py-1 rounded-full border transition-colors ${t.disabled
+                                            ? "text-gray-400 bg-gray-100 cursor-not-allowed border-gray-200"
+                                            : "text-gray-700 hover:bg-blue-50 hover:text-blue-600 border-gray-300 cursor-pointer"}`, title: t.disabled ? "Unavailable in the past" : `Set ${t.label}`, children: t.label }, `suggest-${t.minutes}`))) })] }), timeFormat === "12h" && (_jsx("div", { className: "mb-3 flex items-center gap-2", role: "group", "aria-label": "AM/PM", children: ["AM", "PM"].map((p) => (_jsx("button", { type: "button", onClick: () => setPeriod(p), className: `text-[11px] px-3 py-1 rounded-full border ${period === p
+                                    ? "bg-blue-50 text-blue-700 border-blue-300 cursor-pointer"
+                                    : "text-gray-700 hover:bg-blue-50 hover:text-blue-600 border-gray-300 cursor-pointer"}`, "aria-pressed": period === p, children: p }, p))) })), _jsx("div", { className: "mb-3", role: "group", "aria-label": editingPart === "hour" ? "Select hour" : "Select minute", children: _jsx("div", { className: "flex flex-wrap gap-2", children: (editingPart === "hour"
+                                    ? timeFormat === "24h"
+                                        ? hourOptions24
+                                        : hourOptions12
+                                    : [
+                                        { label: "00", value: 0, type: "combo" },
+                                        { label: "30", value: 30, type: "combo" },
+                                        ...Array.from({ length: 10 }, (_, i) => ({
+                                            label: String(i),
+                                            value: i,
+                                            type: "digit",
+                                        })),
+                                    ]).map((item) => {
+                                    const val = typeof item === "number" ? item : item.value;
+                                    const isDigit = typeof item !== "number" && item.type === "digit";
+                                    const isCombo = typeof item !== "number" && item.type === "combo";
+                                    const isDisabled = editingPart === "minute" &&
+                                        isDigit &&
+                                        minuteTens == null &&
+                                        val > 5;
+                                    let btnClass = "h-8 w-8 rounded-full flex items-center justify-center text-[11px] transition-all duration-200 border ";
+                                    if (isDisabled) {
+                                        btnClass +=
+                                            "text-gray-400 bg-gray-100 cursor-not-allowed border-gray-200";
+                                    }
+                                    else {
+                                        btnClass +=
+                                            "text-gray-700 hover:bg-blue-50 hover:text-blue-600 cursor-pointer border-gray-300";
+                                    }
+                                    return (_jsx("button", { type: "button", onClick: () => {
+                                            if (editingPart === "hour") {
+                                                setSelectedHour(val);
+                                            }
+                                            else {
+                                                if (isDisabled)
+                                                    return;
+                                                if (isCombo) {
+                                                    const minute = val;
+                                                    setSelectedMinute(minute);
+                                                    setMinuteTens(Math.floor(minute / 10));
+                                                    setMinuteOnes(minute % 10);
+                                                    setEditingPart("hour");
+                                                }
+                                                else if (isDigit) {
+                                                    if (minuteTens == null ||
+                                                        (minuteTens != null && minuteOnes != null)) {
+                                                        setMinuteTens(val);
+                                                        setMinuteOnes(null);
+                                                        setSelectedMinute(null);
+                                                    }
+                                                    else {
+                                                        setMinuteOnes(val);
+                                                        const minute = (minuteTens ?? 0) * 10 + val;
+                                                        setSelectedMinute(minute);
+                                                        setEditingPart("hour");
+                                                    }
+                                                }
+                                            }
+                                        }, className: btnClass, children: editingPart === "hour"
+                                            ? String(val).padStart(2, "0")
+                                            : typeof item !== "number" &&
+                                                item.type === "combo"
+                                                ? item.label
+                                                : String(val) }, `${editingPart}-${typeof item === "number" ? val : item.label}`));
+                                }) }) }), _jsxs("div", { className: "flex items-center justify-between mt-4", children: [_jsxs("div", { className: "flex items-center justify-center gap-2 flex-1", children: [(() => {
+                                            const hourActive = editingPart === "hour";
+                                            const minuteActive = editingPart === "minute";
+                                            const hourVal = (() => {
+                                                if (selectedHour == null)
+                                                    return "--";
+                                                return String(selectedHour).padStart(2, "0");
+                                            })();
+                                            const minuteVal = (() => {
+                                                if (selectedMinute != null)
+                                                    return String(selectedMinute).padStart(2, "0");
+                                                if (minuteTens != null || minuteOnes != null) {
+                                                    const tens = minuteTens != null ? String(minuteTens) : "-";
+                                                    const ones = minuteOnes != null ? String(minuteOnes) : "-";
+                                                    return `${tens}${ones}`;
+                                                }
+                                                return "--";
+                                            })();
+                                            const baseCls = "h-8 w-8 rounded-full flex items-center justify-center text-[11px] transition-all duration-200 border ";
+                                            const hourCls = baseCls +
+                                                (hourActive
+                                                    ? "bg-blue-500 text-white shadow-md transform scale-105 cursor-pointer border-blue-600"
+                                                    : "text-gray-700 hover:bg-blue-50 hover:text-blue-600 cursor-pointer border-gray-300");
+                                            const minuteCls = baseCls +
+                                                (minuteActive
+                                                    ? "bg-blue-500 text-white shadow-md transform scale-105 cursor-pointer border-blue-600"
+                                                    : "text-gray-700 hover:bg-blue-50 hover:text-blue-600 cursor-pointer border-gray-300");
+                                            return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: hourCls, "aria-pressed": hourActive, onClick: () => setEditingPart("hour"), children: hourVal }), _jsx("span", { className: "text-gray-600", children: ":" }), _jsx("button", { type: "button", className: minuteCls, "aria-pressed": minuteActive, onClick: () => {
+                                                            setEditingPart("minute");
+                                                            setMinuteTens(null);
+                                                            setMinuteOnes(null);
+                                                            setSelectedMinute(null);
+                                                        }, children: minuteVal })] }));
+                                        })(), isSelectedTimePast && (_jsx("span", { className: "text-[11px] text-red-600", children: "Time must be in the future" }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", onClick: handleConfirmSelection, disabled: effectiveMinutesOfDay == null || isSelectedTimePast, className: `text-[11px] px-3 py-2 rounded-xl border transition-colors ${effectiveMinutesOfDay == null || isSelectedTimePast
+                                                ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                                                : "bg-blue-50 text-blue-700 hover:bg-blue-100 cursor-pointer"}`, "aria-label": "Confirm selected time", children: "Confirm" }), _jsx("button", { type: "button", onClick: () => {
+                                                setSelectedHour(null);
+                                                setSelectedMinute(null);
+                                                setPeriod(defaultPeriod);
+                                                setManualTime("");
+                                                setMinuteTens(null);
+                                                setMinuteOnes(null);
+                                            }, className: "text-[11px] px-3 py-2 rounded-xl border text-gray-700 hover:bg-gray-50 cursor-pointer", children: "Reset" })] })] })] }) }))] }));
+};
+export default Calendar;

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

@@ -0,0 +1,36 @@
+export type MonthSelection = {
+    year: number;
+    month: number;
+};
+export interface CalendarExtendedProps {
+    selectionGranularity?: "day" | "month";
+    allowRange?: boolean;
+    startYear?: number;
+    endYear?: number;
+    selectedMonths?: MonthSelection[];
+    onMonthSelectionChange?: (months: MonthSelection[]) => void;
+    onMonthRangeChange?: (range: {
+        start: MonthSelection;
+        end: MonthSelection;
+    }) => void;
+    /**
+     * When provided, highlights this range in the months grid.
+     * The component still manages internal clicks, but visual state
+     * uses this range preferentially if set.
+     */
+    selectedRange?: {
+        start: MonthSelection;
+        end: MonthSelection;
+    };
+    minSelectableMonth?: MonthSelection;
+    maxSelectableMonth?: MonthSelection;
+    /** Convenience flag: when true, disallow selecting months beyond the current month */
+    disableFutureMonths?: boolean;
+    containerHeight?: number;
+    enableYearTransition?: boolean;
+    selectedDates?: Date[];
+    onDateSelect?: (date: Date) => void;
+    bookedDates?: Date[];
+    maxSelections?: number;
+}
+export default function CalendarExtended({ selectionGranularity, allowRange, startYear, endYear, selectedMonths, onMonthSelectionChange, onMonthRangeChange, selectedRange, minSelectableMonth, maxSelectableMonth, disableFutureMonths, containerHeight, enableYearTransition: _enableYearTransition, selectedDates, onDateSelect, bookedDates, maxSelections, }: Readonly<CalendarExtendedProps>): import("react/jsx-runtime").JSX.Element;

package/dist/components/core/CalendarExtended.js

@@ -0,0 +1,154 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useRef } from "react";
+import Calendar from "./Calendar";
+const monthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+export default function CalendarExtended({ selectionGranularity = "day", allowRange = false, startYear, endYear, selectedMonths = [], onMonthSelectionChange, onMonthRangeChange, selectedRange, minSelectableMonth, maxSelectableMonth, disableFutureMonths, containerHeight = 560, enableYearTransition: _enableYearTransition = true, selectedDates = [], onDateSelect, bookedDates, maxSelections, }) {
+    // Derive year bounds
+    const currentYear = new Date().getFullYear();
+    const DEFAULT_START_YEAR = 1900;
+    const DEFAULT_END_YEAR = disableFutureMonths ? currentYear : currentYear + 50;
+    const fromYear = startYear ?? minSelectableMonth?.year ?? DEFAULT_START_YEAR;
+    const toYear = endYear ?? maxSelectableMonth?.year ?? DEFAULT_END_YEAR;
+    // Internal range state if consumer enables range
+    const [rangeStart, setRangeStart] = useState(null);
+    const [rangeEnd, setRangeEnd] = useState(null);
+    // Effective visual range: prefer controlled selectedRange if provided
+    const effectiveRangeStart = selectedRange?.start ?? rangeStart ?? null;
+    const effectiveRangeEnd = selectedRange?.end ?? rangeEnd ?? null;
+    // Accessibility: grid id for aria-controls
+    const gridIdRef = useRef(`calendar-extended-grid-${Math.random().toString(36).slice(2)}`);
+    const allMonths = useMemo(() => {
+        const list = [];
+        for (let y = fromYear; y <= toYear; y++) {
+            for (let m = 0; m < 12; m++) {
+                list.push({ year: y, month: m });
+            }
+        }
+        return list;
+    }, [fromYear, toYear]);
+    const yearsList = useMemo(() => {
+        return Array.from({ length: toYear - fromYear + 1 }, (_, i) => fromYear + i);
+    }, [fromYear, toYear]);
+    const isSelected = (y, m) => selectedMonths.some((sel) => sel.year === y && sel.month === m);
+    const isInRange = (y, m) => {
+        if (!effectiveRangeStart || !effectiveRangeEnd)
+            return false;
+        const startKey = effectiveRangeStart.year * 12 + effectiveRangeStart.month;
+        const endKey = effectiveRangeEnd.year * 12 + effectiveRangeEnd.month;
+        const currentKey = y * 12 + m;
+        const [minKey, maxKey] = startKey <= endKey ? [startKey, endKey] : [endKey, startKey];
+        return currentKey >= minKey && currentKey <= maxKey;
+    };
+    const isMonthDisabled = (y, m) => {
+        const key = y * 12 + m;
+        const minKey = minSelectableMonth
+            ? minSelectableMonth.year * 12 + minSelectableMonth.month
+            : null;
+        const maxKey = maxSelectableMonth
+            ? maxSelectableMonth.year * 12 + maxSelectableMonth.month
+            : null;
+        const today = new Date();
+        const currentKey = today.getFullYear() * 12 + today.getMonth();
+        const futureDisabled = disableFutureMonths ? key > currentKey : false;
+        return ((minKey !== null && key < minKey) ||
+            (maxKey !== null && key > maxKey) ||
+            futureDisabled);
+    };
+    const handleMonthClick = (y, m) => {
+        const clicked = { year: y, month: m };
+        // Respect disabled constraints
+        if (isMonthDisabled(y, m)) {
+            return;
+        }
+        if (allowRange) {
+            if (!rangeStart) {
+                setRangeStart(clicked);
+                setRangeEnd(null);
+                onMonthRangeChange?.({ start: clicked, end: clicked });
+                return;
+            }
+            // If start exists but end not set, set end
+            if (!rangeEnd) {
+                setRangeEnd(clicked);
+                onMonthRangeChange?.({ start: rangeStart, end: clicked });
+                return;
+            }
+            // Reset range on third click
+            setRangeStart(clicked);
+            setRangeEnd(null);
+            onMonthRangeChange?.({ start: clicked, end: clicked });
+            return;
+        }
+        // Single-month selection mode
+        const exists = isSelected(y, m);
+        let next = selectedMonths;
+        if (exists) {
+            next = selectedMonths.filter((sel) => !(sel.year === y && sel.month === m));
+        }
+        else {
+            next = [...selectedMonths, clicked];
+        }
+        onMonthSelectionChange?.(next);
+    };
+    // Show all years within computed bounds, even if all months are disabled
+    const visibleYears = yearsList;
+    const renderYearCard = (y) => {
+        const yearLabelId = `year-label-${y}-${gridIdRef.current}`;
+        return (_jsxs("div", { className: "p-4 transition-all duration-300 ease-out", "aria-labelledby": yearLabelId, children: [_jsx("div", { id: yearLabelId, className: "text-xs font-semibold mb-3", children: y }), _jsx("div", { role: "grid", "aria-label": `Months of ${y}`, className: "grid grid-cols-3 sm:grid-cols-4 gap-2", children: monthNames.map((name, m) => {
+                        const selected = isSelected(y, m);
+                        const inRange = isInRange(y, m);
+                        const disabled = isMonthDisabled(y, m);
+                        const isStart = !!effectiveRangeStart &&
+                            effectiveRangeStart.year === y &&
+                            effectiveRangeStart.month === m;
+                        const isEnd = !!effectiveRangeEnd &&
+                            effectiveRangeEnd.year === y &&
+                            effectiveRangeEnd.month === m;
+                        const isCurrent = (() => {
+                            const d = new Date();
+                            return d.getFullYear() === y && d.getMonth() === m;
+                        })();
+                        const isSinglePreRange = allowRange && !!rangeStart && !rangeEnd && isStart;
+                        const baseClasses = "text-[10px] p-2 cursor-pointer rounded-lg transition-all duration-200 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primaryblue/60";
+                        const stateClasses = disabled
+                            ? "opacity-50 cursor-not-allowed bg-gray-50 text-gray-400"
+                            : isStart && isEnd
+                                ? "bg-primaryblue text-white ring-2 ring-primaryblue"
+                                : isStart
+                                    ? "bg-primaryblue text-white ring-2 ring-primaryblue"
+                                    : isEnd
+                                        ? "bg-primaryblue text-white ring-2 ring-primaryblue"
+                                        : inRange
+                                            ? "bg-primaryblue/10 text-primaryblue ring-1 ring-primaryblue/30"
+                                            : isSinglePreRange || selected
+                                                ? "bg-primaryblue/5 text-primaryblue"
+                                                : "bg-gray-100 hover:bg-gray-50";
+                        const ariaSelected = selected || inRange || isStart || isEnd || isSinglePreRange;
+                        return (_jsx("button", { type: "button", role: "gridcell", "aria-pressed": ariaSelected, "aria-disabled": disabled, "aria-selected": ariaSelected, "aria-current": isCurrent ? "date" : undefined, disabled: disabled, tabIndex: disabled ? -1 : 0, onClick: () => handleMonthClick(y, m), className: `${baseClasses} ${stateClasses}`, "aria-label": `${name} ${y}`, children: name }, `${y}-${m}`));
+                    }) })] }, y));
+    };
+    if (selectionGranularity === "month") {
+        const containerStyle = {
+            maxHeight: containerHeight,
+            overflowY: "auto",
+        };
+        // Scroll mode only: show all years in a single-column, scrollable grid
+        return (_jsx("div", { id: gridIdRef.current, className: `grid grid-cols-1 md:grid-cols-1 xl:grid-cols-1`, style: containerStyle, role: "grid", "aria-label": "Years grid", children: visibleYears.map((y) => renderYearCard(y)) }));
+    }
+    // Default: day selection using existing Calendar (backward-compatible)
+    return (_jsx(Calendar, { selectedDates: selectedDates, onDateSelect: onDateSelect ?? (() => { }), bookedDates: bookedDates, maxSelections: maxSelections }));
+}

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

@@ -0,0 +1,13 @@
+import React from "react";
+export interface CheckboxProps {
+    checked: boolean;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    label?: string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    error?: string;
+    className?: string;
+}
+declare const _default: (props: CheckboxProps) => React.JSX.Element;
+export default _default;