@crestbase/web-shared-ui 1.0.2 → 1.0.4

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

@@ -4,6 +4,14 @@ interface CalendarProps {
     onDateSelect: (date: Date) => void;
     bookedDates?: Date[];
     maxSelections?: number;
+    /** Enable time selection after clicking a date */
+    enableTimeSelection?: boolean;
+    /** Allow selecting past dates (default false) */
+    allowPastDates?: boolean;
+    /** Minute step for available times, default 30 */
+    timeStepMinutes?: number;
+    /** Display format for time options */
+    timeFormat?: "12h" | "24h";
 }
 declare const _default: (props: CalendarProps) => React.JSX.Element;
 export default _default;

package/dist/components/core/Calendar.js

@@ -1,8 +1,49 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-const Calendar = ({ selectedDates, onDateSelect, bookedDates = [], maxSelections, }) => {
+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();
@@ -26,73 +67,374 @@ const Calendar = ({ selectedDates, onDateSelect, bookedDates = [], maxSelections
         "November",
         "December",
     ];
-    const handleDateClick = (day) => {
+    // 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 (clickedDate < today || isDateBooked(day))
+        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;
         }
-        onDateSelect(clickedDate);
-    };
-    const handlePrevMonth = () => {
+        // 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));
-    };
-    const handleNextMonth = () => {
+    }, [year, month]);
+    const handleNextMonth = useCallback(() => {
         setCurrentMonth(new Date(year, month + 1, 1));
-    };
-    const isDateSelected = (day) => {
-        const date = new Date(year, month, day);
-        return selectedDates.some((selectedDate) => selectedDate.getTime() === date.getTime());
-    };
-    const isDateBooked = (day) => {
-        const date = new Date(year, month, day);
-        return bookedDates.some((bookedDate) => {
-            const bookedDateOnly = new Date(bookedDate.getFullYear(), bookedDate.getMonth(), bookedDate.getDate());
-            const currentDateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
-            return bookedDateOnly.getTime() === currentDateOnly.getTime();
+    }, [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 };
         });
-    };
-    const isDateDisabled = (day) => {
-        const date = new Date(year, month, day);
-        return date < today || isDateBooked(day);
-    };
-    // Generate calendar days
-    const calendarDays = [];
-    // Add empty cells for days before the first day of the month
-    for (let i = 0; i < startingDayOfWeek; i++) {
-        calendarDays.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 isPast = new Date(year, month, day) < today;
-        let buttonClass = "h-8 w-8 rounded-full flex items-center justify-center text-[11px] transition-all duration-200 ";
-        if (isDisabled) {
-            if (isBooked) {
+    }, [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-gray-100 text-gray-400 cursor-not-allowed border border-gray-200";
+                    "bg-blue-500 text-white shadow-md transform scale-105 cursor-pointer";
             }
-            else if (isPast) {
-                buttonClass += "text-gray-300 cursor-not-allowed";
+            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));
         }
-        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";
-        }
-        calendarDays.push(_jsx("button", { onClick: () => handleDateClick(day), disabled: isDisabled, className: buttonClass, title: isBooked ? "This date is already booked" : isPast ? "Past date" : "", children: day }, day));
-    }
-    return (_jsxs("div", { className: "calendar ", 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", children: _jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsxs("h3", { 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", children: _jsx("svg", { className: "w-5 h-5 text-gray-600", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", 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" })] })] }) })] }));
+        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

@@ -13,6 +13,15 @@ export interface CalendarExtendedProps {
         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 */
@@ -24,4 +33,4 @@ export interface CalendarExtendedProps {
     bookedDates?: Date[];
     maxSelections?: number;
 }
-export default function CalendarExtended({ selectionGranularity, allowRange, startYear, endYear, selectedMonths, onMonthSelectionChange, onMonthRangeChange, minSelectableMonth, maxSelectableMonth, disableFutureMonths, containerHeight, enableYearTransition: _enableYearTransition, selectedDates, onDateSelect, bookedDates, maxSelections, }: Readonly<CalendarExtendedProps>): import("react/jsx-runtime").JSX.Element;
+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

@@ -16,7 +16,7 @@ const monthNames = [
     "November",
     "December",
 ];
-export default function CalendarExtended({ selectionGranularity = "day", allowRange = false, startYear, endYear, selectedMonths = [], onMonthSelectionChange, onMonthRangeChange, minSelectableMonth, maxSelectableMonth, disableFutureMonths, containerHeight = 560, enableYearTransition: _enableYearTransition = true, selectedDates = [], onDateSelect, bookedDates, maxSelections, }) {
+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;
@@ -26,6 +26,9 @@ export default function CalendarExtended({ selectionGranularity = "day", allowRa
     // 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(() => {
@@ -42,10 +45,10 @@ export default function CalendarExtended({ selectionGranularity = "day", allowRa
     }, [fromYear, toYear]);
     const isSelected = (y, m) => selectedMonths.some((sel) => sel.year === y && sel.month === m);
     const isInRange = (y, m) => {
-        if (!rangeStart || !rangeEnd)
+        if (!effectiveRangeStart || !effectiveRangeEnd)
             return false;
-        const startKey = rangeStart.year * 12 + rangeStart.month;
-        const endKey = rangeEnd.year * 12 + rangeEnd.month;
+        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;
@@ -109,8 +112,12 @@ export default function CalendarExtended({ selectionGranularity = "day", allowRa
                         const selected = isSelected(y, m);
                         const inRange = isInRange(y, m);
                         const disabled = isMonthDisabled(y, m);
-                        const isStart = !!rangeStart && rangeStart.year === y && rangeStart.month === m;
-                        const isEnd = !!rangeEnd && rangeEnd.year === y && rangeEnd.month === 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;
@@ -120,13 +127,13 @@ export default function CalendarExtended({ selectionGranularity = "day", allowRa
                         const stateClasses = disabled
                             ? "opacity-50 cursor-not-allowed bg-gray-50 text-gray-400"
                             : isStart && isEnd
-                                ? "bg-primaryblue/20 border-primaryblue text-white"
+                                ? "bg-primaryblue text-white ring-2 ring-primaryblue"
                                 : isStart
-                                    ? "bg-primaryblue/20 text-primaryblue ring-2 ring-primaryblue"
+                                    ? "bg-primaryblue text-white ring-2 ring-primaryblue"
                                     : isEnd
-                                        ? "bg-primaryblue/20 text-primaryblue ring-2 ring-primaryblue/70"
+                                        ? "bg-primaryblue text-white ring-2 ring-primaryblue"
                                         : inRange
-                                            ? "bg-primaryblue/10 text-primaryblue"
+                                            ? "bg-primaryblue/10 text-primaryblue ring-1 ring-primaryblue/30"
                                             : isSinglePreRange || selected
                                                 ? "bg-primaryblue/5 text-primaryblue"
                                                 : "bg-gray-100 hover:bg-gray-50";

package/dist/components/core/CustomDropdown.js

@@ -31,9 +31,9 @@ const CustomDropdown = ({ label, placeholder = "Select an option", options, valu
         onChange("");
         setIsOpen(false);
     };
-    return (_jsxs("div", { className: `w-full ${minimal ? "text-[11px]" : "text-base sm:text-xs"} ${className}`, ref: dropdownRef, children: [label && (_jsx("label", { className: `${labelClass} block mb-2 text-[10px] text-gray-500`, children: label })), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `${minimal
+    return (_jsxs("div", { className: `w-full ${minimal ? "text-[11px]" : "text-base sm:text-xs"}`, ref: dropdownRef, children: [label && (_jsx("label", { className: `${labelClass} block mb-2 text-[10px] text-gray-500`, children: label })), _jsxs("div", { className: "relative", children: [_jsxs("button", { type: "button", onClick: () => !disabled && setIsOpen(!isOpen), disabled: disabled, className: `${minimal
                             ? "flex gap-1 items-center"
-                            : "w-full p-0 px-4 sm:p-4 rounded-xl bg-gray-50 border outline-none text-left flex items-center justify-between h-13.5 sm:h-auto"} ${error ? "border-red-500" : "border-gray-200"} ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`, children: [_jsx("span", { className: `${selectedOption ? "text-gray-900" : "text-gray-400"}`, children: selectedOption ? selectedOption.label : placeholder }), !disabled && (_jsx(ChevronDownIcon, { className: `w-4 h-4 text-gray-800 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` }))] }), isOpen && !disabled && (_jsx("div", { className: "absolute z-50 min-w-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg max-h-60 overflow-y-auto", children: options.map((option) => (_jsxs("div", { className: `flex items-center justify-between hover:bg-gray-50 transition-colors ${value === option.value
+                            : "w-full p-0 px-4 sm:p-4 rounded-xl bg-gray-50 border outline-none text-left flex items-center justify-between h-13.5 sm:h-auto"} ${error ? "border-red-500" : "border-gray-200"} ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${className}`, children: [_jsx("span", { className: `${selectedOption ? "text-gray-900" : "text-gray-400"}`, children: selectedOption ? selectedOption.label : placeholder }), !disabled && (_jsx(ChevronDownIcon, { className: `w-4 h-4 text-gray-800 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` }))] }), isOpen && !disabled && (_jsx("div", { className: "absolute z-50 min-w-full mt-1 bg-white border border-gray-200 rounded-xl shadow-lg max-h-60 overflow-y-auto", children: options.map((option) => (_jsxs("div", { className: `flex items-center justify-between hover:bg-gray-50 transition-colors ${value === option.value
                                 ? "bg-blue-50 text-blue-600"
                                 : "text-gray-900"} first:rounded-t-xl last:rounded-b-xl`, children: [_jsx("button", { type: "button", onClick: () => handleOptionClick(option.value), className: "flex-1 text-left text-nowrap px-4 py-3", children: option.label }), value === option.value && (_jsx("button", { type: "button", onClick: handleClear, className: "p-0.5 hover:bg-gray-100 rounded-full transition-colors ml-2", children: _jsx(X, { className: "w-3 h-3 text-gray-400 hover:text-gray-600" }) }))] }, option.value))) }))] }), error && _jsx("p", { className: "mt-1 text-red-500", children: error })] }));
 };