mithril-materialized 3.6.0 → 3.8.0

package/dist/index.umd.js

@@ -1610,7 +1610,7 @@
         };
     };
 
-    const defaultI18n$3 = {
+    const defaultI18n$4 = {
         cancel: 'Cancel',
         clear: 'Clear',
         done: 'Ok',
@@ -1718,9 +1718,9 @@
             else if (attrs.displayFormat) {
                 finalFormat = attrs.displayFormat;
             }
-            const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n$3, onSelect: null, onOpen: null, onClose: null }, attrs);
+            const merged = Object.assign({ autoClose: false, format: finalFormat, parse: null, defaultDate: null, setDefaultDate: false, disableWeekends: false, disableDayFn: null, firstDay: 0, minDate: null, maxDate: null, yearRange, showClearBtn: false, showWeekNumbers: false, weekNumbering: 'iso', i18n: defaultI18n$4, onSelect: null, onOpen: null, onClose: null }, attrs);
             // Merge i18n properly
-            merged.i18n = Object.assign(Object.assign({}, defaultI18n$3), attrs.i18n);
+            merged.i18n = Object.assign(Object.assign({}, defaultI18n$4), attrs.i18n);
             return merged;
         };
         const toString = (date, format) => {
@@ -4521,7 +4521,7 @@
                 opacity: 1,
             };
         };
-        const updatePortalDropdown = (items, selectedLabel, onSelectItem) => {
+        const updatePortalDropdown = (items, selectedLabel, onSelectItem, maxHeight) => {
             if (!state.isInsideModal)
                 return;
             // Clean up existing portal
@@ -4565,7 +4565,7 @@
             // Create dropdown with proper positioning
             const dropdownVnode = m('ul.dropdown-content.select-dropdown', {
                 tabindex: 0,
-                style: Object.assign(Object.assign({}, getPortalStyles(state.inputRef)), (attrs.maxHeight ? { maxHeight: attrs.maxHeight } : {})),
+                style: Object.assign(Object.assign({}, getPortalStyles(state.inputRef)), (maxHeight ? { maxHeight } : {})),
                 oncreate: ({ dom }) => {
                     state.dropdownRef = dom;
                 },
@@ -4629,7 +4629,7 @@
                             state.focusedIndex = -1;
                             handleSelection(item.id);
                         }
-                    });
+                    }, attrs.maxHeight);
                 }
                 return m('.dropdown-wrapper.input-field', { className, key, style }, [
                     iconName ? m('i.material-icons.prefix', iconName) : undefined,
@@ -5298,45 +5298,417 @@
         };
     };
 
-    const defaultI18n$2 = {
-        cancel: 'Cancel',
-        clear: 'Clear',
-        done: 'Ok',
+    /**
+     * Shared utility functions for TimePicker and TimeRangePicker components
+     */
+    const addLeadingZero = (num) => {
+        return (num < 10 ? '0' : '') + num;
     };
-    const defaultOptions = {
-        dialRadius: 135,
-        outerRadius: 105,
-        innerRadius: 70,
-        tickRadius: 20,
-        duration: 350,
-        container: null,
-        defaultTime: 'now',
-        fromNow: 0,
-        showClearBtn: false,
-        i18n: defaultI18n$2,
-        autoClose: false,
-        twelveHour: true,
-        vibrate: true,
-        roundBy5: false,
-        onOpen: () => { },
-        onOpenStart: () => { },
-        onOpenEnd: () => { },
-        onCloseStart: () => { },
-        onCloseEnd: () => { },
-        onSelect: () => { },
+    const parseTime = (timeStr, twelveHour) => {
+        if (!timeStr) {
+            return { hours: twelveHour ? 12 : 0, minutes: 0, amOrPm: 'AM' };
+        }
+        const parts = timeStr.trim().split(/[:\s]+/);
+        if (parts.length < 2) {
+            return { hours: twelveHour ? 12 : 0, minutes: 0, amOrPm: 'AM' };
+        }
+        let hours = parseInt(parts[0]) || 0;
+        const minutes = parseInt(parts[1]) || 0;
+        let amOrPm = 'AM';
+        const upperStr = timeStr.toUpperCase();
+        if (upperStr.includes('PM')) {
+            amOrPm = 'PM';
+        }
+        else if (upperStr.includes('AM')) {
+            amOrPm = 'AM';
+        }
+        if (twelveHour) {
+            if (hours >= 12) {
+                amOrPm = 'PM';
+                if (hours > 12)
+                    hours -= 12;
+            }
+            else if (hours === 0) {
+                hours = 12;
+            }
+        }
+        return { hours, minutes, amOrPm };
+    };
+    const formatTime = (time, twelveHour) => {
+        if (!time)
+            return '';
+        const { hours, minutes, amOrPm } = time;
+        const hoursStr = addLeadingZero(hours);
+        const minutesStr = addLeadingZero(minutes);
+        if (twelveHour) {
+            return `${hoursStr}:${minutesStr} ${amOrPm}`;
+        }
+        let hours24 = hours;
+        if (amOrPm === 'PM' && hours !== 12) {
+            hours24 = hours + 12;
+        }
+        else if (amOrPm === 'AM' && hours === 12) {
+            hours24 = 0;
+        }
+        return `${addLeadingZero(hours24)}:${minutesStr}`;
+    };
+    const timeToMinutes = (time, twelveHour) => {
+        let h = time.hours;
+        if (twelveHour) {
+            if (time.amOrPm === 'PM' && h !== 12)
+                h += 12;
+            if (time.amOrPm === 'AM' && h === 12)
+                h = 0;
+        }
+        return h * 60 + time.minutes;
+    };
+    const generateHourOptions = (twelveHour, hourStep) => {
+        const start = twelveHour ? 1 : 0;
+        const end = twelveHour ? 12 : 23;
+        const hours = [];
+        for (let i = start; i <= end; i += hourStep) {
+            hours.push(i);
+        }
+        // Special case for 12-hour: include 12 first
+        if (twelveHour && hourStep === 1) {
+            return [12, ...hours.filter((h) => h !== 12)];
+        }
+        return hours;
+    };
+    const generateMinuteOptions = (minuteStep) => {
+        const minutes = [];
+        for (let i = 0; i < 60; i += minuteStep) {
+            minutes.push(i);
+        }
+        return minutes;
+    };
+    const isTimeDisabled = (hours, minutes, amOrPm, minTime, maxTime, twelveHour) => {
+        if (!minTime && !maxTime)
+            return false;
+        const currentMins = timeToMinutes({ hours, minutes, amOrPm }, twelveHour || false);
+        if (minTime) {
+            const minParsed = parseTime(minTime, twelveHour || false);
+            const minMins = timeToMinutes(minParsed, twelveHour || false);
+            if (currentMins < minMins)
+                return true;
+        }
+        if (maxTime) {
+            const maxParsed = parseTime(maxTime, twelveHour || false);
+            const maxMins = timeToMinutes(maxParsed, twelveHour || false);
+            if (currentMins > maxMins)
+                return true;
+        }
+        return false;
+    };
+    const scrollToValue = (container, index, itemHeight, animated = true) => {
+        const scrollTop = index * itemHeight - (container.clientHeight / 2 - itemHeight / 2);
+        if (animated) {
+            container.scrollTo({ top: scrollTop, behavior: 'smooth' });
+        }
+        else {
+            container.scrollTop = scrollTop;
+        }
+    };
+    const snapToNearestItem = (container, itemHeight, onSnap) => {
+        const scrollTop = container.scrollTop;
+        const centerOffset = container.clientHeight / 2;
+        const nearestIndex = Math.round((scrollTop + centerOffset - itemHeight / 2) / itemHeight);
+        scrollToValue(container, nearestIndex, itemHeight, true);
+        onSnap(nearestIndex);
     };
+
     /**
-     * TimePicker component based on original Materialize CSS timepicker
+     * DigitalClock component - A scrollable digital time picker
+     *
+     * @example
+     * ```typescript
+     * m(DigitalClock, {
+     *   hours: 10,
+     *   minutes: 30,
+     *   amOrPm: 'AM',
+     *   twelveHour: true,
+     *   minuteStep: 5,
+     *   onTimeChange: (hours, minutes, amOrPm) => {
+     *     console.log(`Time changed to ${hours}:${minutes} ${amOrPm}`);
+     *   }
+     * })
+     * ```
      */
-    const TimePicker = () => {
-        let state;
-        let options;
-        const addLeadingZero = (num) => {
-            return (num < 10 ? '0' : '') + num;
+    const DigitalClock = () => {
+        const ITEM_HEIGHT = 48;
+        const state = {};
+        return {
+            view: ({ attrs }) => {
+                const { hours, minutes, amOrPm, twelveHour, minuteStep = 5, hourStep = 1, minTime, maxTime, onTimeChange, spanHours, spanMinutes, spanAmPm, } = attrs;
+                const hourOptions = generateHourOptions(twelveHour, hourStep);
+                const minuteOptions = generateMinuteOptions(minuteStep);
+                return m('.timepicker-digital-clock', [
+                    // Hours column
+                    m('.digital-clock-column', {
+                        oncreate: (vnode) => {
+                            state.hourScrollContainer = vnode.dom;
+                            const currentIndex = hourOptions.indexOf(hours);
+                            if (currentIndex >= 0) {
+                                scrollToValue(state.hourScrollContainer, currentIndex + 2, ITEM_HEIGHT, false);
+                            }
+                        },
+                        onwheel: (e) => {
+                            e.preventDefault();
+                            if (!state.hourScrollContainer)
+                                return;
+                            const delta = Math.sign(e.deltaY);
+                            const currentIndex = hourOptions.indexOf(hours);
+                            const newIndex = Math.max(0, Math.min(hourOptions.length - 1, currentIndex + delta));
+                            const newHour = hourOptions[newIndex];
+                            if (!isTimeDisabled(newHour, minutes, amOrPm, minTime, maxTime, twelveHour)) {
+                                onTimeChange(newHour, minutes, amOrPm);
+                                if (spanHours) {
+                                    spanHours.innerHTML = addLeadingZero(newHour);
+                                }
+                                scrollToValue(state.hourScrollContainer, newIndex + 2, ITEM_HEIGHT, true);
+                                m.redraw();
+                            }
+                        },
+                        onscroll: () => {
+                            if (state.hourScrollTimeout) {
+                                clearTimeout(state.hourScrollTimeout);
+                            }
+                            state.hourScrollTimeout = window.setTimeout(() => {
+                                if (!state.hourScrollContainer)
+                                    return;
+                                snapToNearestItem(state.hourScrollContainer, ITEM_HEIGHT, (index) => {
+                                    const actualIndex = index - 2; // Account for padding
+                                    if (actualIndex >= 0 && actualIndex < hourOptions.length) {
+                                        const newHour = hourOptions[actualIndex];
+                                        if (!isTimeDisabled(newHour, minutes, amOrPm, minTime, maxTime, twelveHour)) {
+                                            onTimeChange(newHour, minutes, amOrPm);
+                                            if (spanHours) {
+                                                spanHours.innerHTML = addLeadingZero(newHour);
+                                            }
+                                            m.redraw();
+                                        }
+                                    }
+                                });
+                            }, 150);
+                        },
+                    }, [
+                        // Padding items for centering
+                        m('.digital-clock-item.padding'),
+                        m('.digital-clock-item.padding'),
+                        // Hour items
+                        ...hourOptions.map((hour) => {
+                            const disabled = isTimeDisabled(hour, minutes, amOrPm, minTime, maxTime, twelveHour);
+                            return m('.digital-clock-item', {
+                                class: `${hour === hours ? 'selected' : ''} ${disabled ? 'disabled' : ''}`,
+                                onclick: () => {
+                                    if (disabled)
+                                        return;
+                                    onTimeChange(hour, minutes, amOrPm);
+                                    if (spanHours) {
+                                        spanHours.innerHTML = addLeadingZero(hour);
+                                    }
+                                    if (state.hourScrollContainer) {
+                                        const index = hourOptions.indexOf(hour);
+                                        scrollToValue(state.hourScrollContainer, index + 2, ITEM_HEIGHT, true);
+                                    }
+                                    m.redraw();
+                                },
+                            }, addLeadingZero(hour));
+                        }),
+                        // Padding items for centering
+                        m('.digital-clock-item.padding'),
+                        m('.digital-clock-item.padding'),
+                    ]),
+                    // Separator
+                    m('.digital-clock-separator', ':'),
+                    // Minutes column
+                    m('.digital-clock-column', {
+                        oncreate: (vnode) => {
+                            state.minuteScrollContainer = vnode.dom;
+                            const currentIndex = minuteOptions.indexOf(minutes);
+                            if (currentIndex >= 0) {
+                                scrollToValue(state.minuteScrollContainer, currentIndex + 2, ITEM_HEIGHT, false);
+                            }
+                        },
+                        onwheel: (e) => {
+                            e.preventDefault();
+                            if (!state.minuteScrollContainer)
+                                return;
+                            const delta = Math.sign(e.deltaY);
+                            const currentIndex = minuteOptions.indexOf(minutes);
+                            const newIndex = Math.max(0, Math.min(minuteOptions.length - 1, currentIndex + delta));
+                            const newMinute = minuteOptions[newIndex];
+                            if (!isTimeDisabled(hours, newMinute, amOrPm, minTime, maxTime, twelveHour)) {
+                                onTimeChange(hours, newMinute, amOrPm);
+                                if (spanMinutes) {
+                                    spanMinutes.innerHTML = addLeadingZero(newMinute);
+                                }
+                                scrollToValue(state.minuteScrollContainer, newIndex + 2, ITEM_HEIGHT, true);
+                                m.redraw();
+                            }
+                        },
+                        onscroll: () => {
+                            if (state.minuteScrollTimeout) {
+                                clearTimeout(state.minuteScrollTimeout);
+                            }
+                            state.minuteScrollTimeout = window.setTimeout(() => {
+                                if (!state.minuteScrollContainer)
+                                    return;
+                                snapToNearestItem(state.minuteScrollContainer, ITEM_HEIGHT, (index) => {
+                                    const actualIndex = index - 2; // Account for padding
+                                    if (actualIndex >= 0 && actualIndex < minuteOptions.length) {
+                                        const newMinute = minuteOptions[actualIndex];
+                                        if (!isTimeDisabled(hours, newMinute, amOrPm, minTime, maxTime, twelveHour)) {
+                                            onTimeChange(hours, newMinute, amOrPm);
+                                            if (spanMinutes) {
+                                                spanMinutes.innerHTML = addLeadingZero(newMinute);
+                                            }
+                                            m.redraw();
+                                        }
+                                    }
+                                });
+                            }, 150);
+                        },
+                    }, [
+                        // Padding items for centering
+                        m('.digital-clock-item.padding'),
+                        m('.digital-clock-item.padding'),
+                        // Minute items
+                        ...minuteOptions.map((minute) => {
+                            const disabled = isTimeDisabled(hours, minute, amOrPm, minTime, maxTime, twelveHour);
+                            return m('.digital-clock-item', {
+                                class: `${minute === minutes ? 'selected' : ''} ${disabled ? 'disabled' : ''}`,
+                                onclick: () => {
+                                    if (disabled)
+                                        return;
+                                    onTimeChange(hours, minute, amOrPm);
+                                    if (spanMinutes) {
+                                        spanMinutes.innerHTML = addLeadingZero(minute);
+                                    }
+                                    if (state.minuteScrollContainer) {
+                                        const index = minuteOptions.indexOf(minute);
+                                        scrollToValue(state.minuteScrollContainer, index + 2, ITEM_HEIGHT, true);
+                                    }
+                                    m.redraw();
+                                },
+                            }, addLeadingZero(minute));
+                        }),
+                        // Padding items for centering
+                        m('.digital-clock-item.padding'),
+                        m('.digital-clock-item.padding'),
+                    ]),
+                    // AM/PM column (if twelveHour)
+                    twelveHour &&
+                        m('.digital-clock-column.ampm-column', {
+                            oncreate: (vnode) => {
+                                state.amPmScrollContainer = vnode.dom;
+                                const amPmOptions = ['AM', 'PM'];
+                                const currentIndex = amPmOptions.indexOf(amOrPm);
+                                if (currentIndex >= 0) {
+                                    scrollToValue(state.amPmScrollContainer, currentIndex + 2, ITEM_HEIGHT, false);
+                                }
+                            },
+                            onwheel: (e) => {
+                                e.preventDefault();
+                                const delta = Math.sign(e.deltaY);
+                                const newAmPm = delta > 0 ? 'PM' : 'AM';
+                                if (newAmPm !== amOrPm && !isTimeDisabled(hours, minutes, newAmPm, minTime, maxTime, twelveHour)) {
+                                    onTimeChange(hours, minutes, newAmPm);
+                                    if (spanAmPm) {
+                                        spanAmPm.innerHTML = newAmPm;
+                                    }
+                                    const amPmOptions = ['AM', 'PM'];
+                                    const newIndex = amPmOptions.indexOf(newAmPm);
+                                    if (state.amPmScrollContainer) {
+                                        scrollToValue(state.amPmScrollContainer, newIndex + 2, ITEM_HEIGHT, true);
+                                    }
+                                    m.redraw();
+                                }
+                            },
+                            onscroll: () => {
+                                if (state.amPmScrollTimeout) {
+                                    clearTimeout(state.amPmScrollTimeout);
+                                }
+                                state.amPmScrollTimeout = window.setTimeout(() => {
+                                    if (!state.amPmScrollContainer)
+                                        return;
+                                    snapToNearestItem(state.amPmScrollContainer, ITEM_HEIGHT, (index) => {
+                                        const actualIndex = index - 2;
+                                        const amPmOptions = ['AM', 'PM'];
+                                        if (actualIndex >= 0 && actualIndex < amPmOptions.length) {
+                                            const newAmPm = amPmOptions[actualIndex];
+                                            if (!isTimeDisabled(hours, minutes, newAmPm, minTime, maxTime, twelveHour)) {
+                                                onTimeChange(hours, minutes, newAmPm);
+                                                if (spanAmPm) {
+                                                    spanAmPm.innerHTML = newAmPm;
+                                                }
+                                                m.redraw();
+                                            }
+                                        }
+                                    });
+                                }, 150);
+                            },
+                        }, [
+                            // Padding items
+                            m('.digital-clock-item.padding'),
+                            m('.digital-clock-item.padding'),
+                            // AM/PM items
+                            ['AM', 'PM'].map((ampm) => {
+                                const disabled = isTimeDisabled(hours, minutes, ampm, minTime, maxTime, twelveHour);
+                                return m('.digital-clock-item', {
+                                    class: `${ampm === amOrPm ? 'selected' : ''} ${disabled ? 'disabled' : ''}`,
+                                    onclick: () => {
+                                        if (disabled)
+                                            return;
+                                        onTimeChange(hours, minutes, ampm);
+                                        if (spanAmPm) {
+                                            spanAmPm.innerHTML = ampm;
+                                        }
+                                        if (state.amPmScrollContainer) {
+                                            const amPmOptions = ['AM', 'PM'];
+                                            const index = amPmOptions.indexOf(ampm);
+                                            scrollToValue(state.amPmScrollContainer, index + 2, ITEM_HEIGHT, true);
+                                        }
+                                        m.redraw();
+                                    },
+                                }, ampm);
+                            }),
+                            // Padding items
+                            m('.digital-clock-item.padding'),
+                            m('.digital-clock-item.padding'),
+                        ]),
+                ]);
+            },
         };
-        const createSVGEl = (name) => {
-            const svgNS = 'http://www.w3.org/2000/svg';
-            return document.createElementNS(svgNS, name);
+    };
+
+    /**
+     * AnalogClock component - A draggable analog clock face for time selection
+     *
+     * @example
+     * ```typescript
+     * m(AnalogClock, {
+     *   hours: 10,
+     *   minutes: 30,
+     *   amOrPm: 'AM',
+     *   currentView: 'hours',
+     *   twelveHour: true,
+     *   onTimeChange: (hours, minutes) => {
+     *     console.log(`Time changed to ${hours}:${minutes}`);
+     *   },
+     *   onViewChange: (view) => {
+     *     console.log(`View changed to ${view}`);
+     *   }
+     * })
+     * ```
+     */
+    const AnalogClock = () => {
+        const state = {
+            moved: false,
+            x0: 0,
+            y0: 0,
+            dx: 0,
+            dy: 0,
         };
         const getPos = (e) => {
             const touchEvent = e;
@@ -5346,202 +5718,36 @@
             }
             return { x: mouseEvent.clientX, y: mouseEvent.clientY };
         };
-        const vibrate = () => {
+        const vibrate = (attrs) => {
             if (state.vibrateTimer) {
                 clearTimeout(state.vibrateTimer);
             }
-            if (options.vibrate && navigator.vibrate) {
+            if (attrs.vibrate && navigator.vibrate) {
                 navigator.vibrate(10);
                 state.vibrateTimer = window.setTimeout(() => {
                     state.vibrateTimer = undefined;
                 }, 100);
             }
         };
-        const handleClockClickStart = (e) => {
-            e.preventDefault();
-            if (!state.plate)
-                return;
-            const clockPlateBR = state.plate.getBoundingClientRect();
-            const offset = { x: clockPlateBR.left, y: clockPlateBR.top };
-            state.x0 = offset.x + options.dialRadius;
-            state.y0 = offset.y + options.dialRadius;
-            state.moved = false;
-            const clickPos = getPos(e);
-            state.dx = clickPos.x - state.x0;
-            state.dy = clickPos.y - state.y0;
-            setHand(state.dx, state.dy, options.roundBy5);
-            document.addEventListener('mousemove', handleDocumentClickMove);
-            document.addEventListener('touchmove', handleDocumentClickMove);
-            document.addEventListener('mouseup', handleDocumentClickEnd);
-            document.addEventListener('touchend', handleDocumentClickEnd);
-        };
-        const handleDocumentClickMove = (e) => {
-            e.preventDefault();
-            const clickPos = getPos(e);
-            const x = clickPos.x - state.x0;
-            const y = clickPos.y - state.y0;
-            state.moved = true;
-            setHand(x, y, options.roundBy5);
-            m.redraw();
-        };
-        const handleDocumentClickEnd = (e) => {
-            e.preventDefault();
-            document.removeEventListener('mouseup', handleDocumentClickEnd);
-            document.removeEventListener('touchend', handleDocumentClickEnd);
-            document.removeEventListener('mousemove', handleDocumentClickMove);
-            document.removeEventListener('touchmove', handleDocumentClickMove);
-            const clickPos = getPos(e);
-            const x = clickPos.x - state.x0;
-            const y = clickPos.y - state.y0;
-            if (state.moved && x === state.dx && y === state.dy) {
-                setHand(x, y);
-            }
-            if (state.currentView === 'hours') {
-                showView('minutes', options.duration / 2);
-            }
-            else if (options.autoClose) {
-                if (state.minutesView) {
-                    state.minutesView.classList.add('timepicker-dial-out');
-                }
-                setTimeout(() => {
-                    done();
-                }, options.duration / 2);
-            }
-            if (options.onSelect) {
-                options.onSelect(state.hours, state.minutes);
-            }
-            m.redraw();
-        };
-        const updateTimeFromInput = (inputValue) => {
-            let value = ((inputValue || options.defaultTime || '') + '').split(':');
-            let amPmWasProvided = false;
-            if (options.twelveHour && value.length > 1) {
-                if (value[1].toUpperCase().indexOf('AM') > -1) {
-                    state.amOrPm = 'AM';
-                    amPmWasProvided = true;
-                }
-                else if (value[1].toUpperCase().indexOf('PM') > -1) {
-                    state.amOrPm = 'PM';
-                    amPmWasProvided = true;
-                }
-                value[1] = value[1].replace('AM', '').replace('PM', '').trim();
-            }
-            if (value[0] === 'now') {
-                const now = new Date(+new Date() + options.fromNow);
-                value = [now.getHours().toString(), now.getMinutes().toString()];
-                if (options.twelveHour) {
-                    state.amOrPm = parseInt(value[0]) >= 12 ? 'PM' : 'AM';
-                    amPmWasProvided = false; // For 'now', we need to do conversion
-                }
-            }
-            let hours = +value[0] || 0;
-            let minutes = +value[1] || 0;
-            if (options.twelveHour) {
-                if (!amPmWasProvided) {
-                    // No AM/PM was provided, assume this is 24-hour format input - convert it
-                    if (hours >= 12) {
-                        state.amOrPm = 'PM';
-                        if (hours > 12) {
-                            hours = hours - 12;
-                        }
-                    }
-                    else {
-                        state.amOrPm = 'AM';
-                        if (hours === 0) {
-                            hours = 12;
-                        }
-                    }
-                }
-                else {
-                    // AM/PM was provided, hours are already in 12-hour format
-                    // Just handle midnight/noon edge cases
-                    if (hours === 0 && state.amOrPm === 'AM') {
-                        hours = 12;
-                    }
-                }
-            }
-            state.hours = hours;
-            state.minutes = minutes;
-            if (state.spanHours) {
-                state.spanHours.innerHTML = addLeadingZero(state.hours);
-            }
-            if (state.spanMinutes) {
-                state.spanMinutes.innerHTML = addLeadingZero(state.minutes);
-            }
-            updateAmPmView();
-        };
-        const updateAmPmView = () => {
-            if (options.twelveHour && state.amBtn && state.pmBtn) {
-                state.amBtn.classList.toggle('text-primary', state.amOrPm === 'AM');
-                state.pmBtn.classList.toggle('text-primary', state.amOrPm === 'PM');
-            }
-        };
-        const showView = (view, delay) => {
-            const isHours = view === 'hours';
-            const nextView = isHours ? state.hoursView : state.minutesView;
-            const hideView = isHours ? state.minutesView : state.hoursView;
-            state.currentView = view;
-            if (state.spanHours) {
-                state.spanHours.classList.toggle('text-primary', isHours);
-            }
-            if (state.spanMinutes) {
-                state.spanMinutes.classList.toggle('text-primary', !isHours);
-            }
-            if (hideView) {
-                hideView.classList.add('timepicker-dial-out');
-            }
-            if (nextView) {
-                nextView.style.visibility = 'visible';
-                nextView.classList.remove('timepicker-dial-out');
-            }
-            resetClock(delay);
-            if (state.toggleViewTimer) {
-                clearTimeout(state.toggleViewTimer);
-            }
-            state.toggleViewTimer = window.setTimeout(() => {
-                if (hideView) {
-                    hideView.style.visibility = 'hidden';
-                }
-            }, options.duration);
-        };
-        const resetClock = (delay) => {
-            const view = state.currentView;
-            const value = state[view];
-            const isHours = view === 'hours';
-            const unit = Math.PI / (isHours ? 6 : 30);
-            const radian = value * unit;
-            const radius = isHours && value > 0 && value < 13 ? options.innerRadius : options.outerRadius;
-            const x = Math.sin(radian) * radius;
-            const y = -Math.cos(radian) * radius;
-            if (delay && state.canvas) {
-                state.canvas.classList.add('timepicker-canvas-out');
-                setTimeout(() => {
-                    if (state.canvas) {
-                        state.canvas.classList.remove('timepicker-canvas-out');
-                    }
-                    setHand(x, y);
-                }, delay);
-            }
-            else {
-                setHand(x, y);
-            }
-        };
-        const setHand = (x, y, roundBy5, _dragging) => {
+        const setHand = (x, y, attrs, roundBy5, _dragging) => {
+            const outerRadius = attrs.outerRadius || 105;
+            const innerRadius = attrs.innerRadius || 70;
+            const tickRadius = attrs.tickRadius || 20;
             let radian = Math.atan2(x, -y);
-            const isHours = state.currentView === 'hours';
+            const isHours = attrs.currentView === 'hours';
             const unit = Math.PI / (isHours || roundBy5 ? 6 : 30);
             const z = Math.sqrt(x * x + y * y);
-            const inner = isHours && z < (options.outerRadius + options.innerRadius) / 2;
-            let radius = inner ? options.innerRadius : options.outerRadius;
-            if (options.twelveHour) {
-                radius = options.outerRadius;
+            const inner = isHours && z < (outerRadius + innerRadius) / 2;
+            let radius = inner ? innerRadius : outerRadius;
+            if (attrs.twelveHour) {
+                radius = outerRadius;
             }
             if (radian < 0) {
                 radian = Math.PI * 2 + radian;
             }
             let value = Math.round(radian / unit);
             radian = value * unit;
-            if (options.twelveHour) {
+            if (attrs.twelveHour) {
                 if (isHours) {
                     if (value === 0)
                         value = 12;
@@ -5566,20 +5772,27 @@
                         value = 0;
                 }
             }
-            if (state[state.currentView] !== value) {
-                vibrate();
+            const currentValue = isHours ? attrs.hours : attrs.minutes;
+            if (currentValue !== value) {
+                vibrate(attrs);
             }
-            state[state.currentView] = value;
-            if (isHours && state.spanHours) {
-                state.spanHours.innerHTML = addLeadingZero(value);
-            }
-            else if (!isHours && state.spanMinutes) {
-                state.spanMinutes.innerHTML = addLeadingZero(value);
+            // Update the value
+            if (isHours) {
+                attrs.onTimeChange(value, attrs.minutes);
+                if (attrs.spanHours) {
+                    attrs.spanHours.innerHTML = addLeadingZero(value);
+                }
+            }
+            else {
+                attrs.onTimeChange(attrs.hours, value);
+                if (attrs.spanMinutes) {
+                    attrs.spanMinutes.innerHTML = addLeadingZero(value);
+                }
             }
             // Set clock hand position
             if (state.hand && state.bg) {
-                const cx1 = Math.sin(radian) * (radius - options.tickRadius);
-                const cy1 = -Math.cos(radian) * (radius - options.tickRadius);
+                const cx1 = Math.sin(radian) * (radius - tickRadius);
+                const cy1 = -Math.cos(radian) * (radius - tickRadius);
                 const cx2 = Math.sin(radian) * radius;
                 const cy2 = -Math.cos(radian) * radius;
                 state.hand.setAttribute('x2', cx1.toString());
@@ -5588,79 +5801,339 @@
                 state.bg.setAttribute('cy', cy2.toString());
             }
         };
-        const buildSVGClock = () => {
-            if (!state.canvas)
-                return;
-            const dialRadius = options.dialRadius;
-            const tickRadius = options.tickRadius;
-            const diameter = dialRadius * 2;
-            const svg = createSVGEl('svg');
-            svg.setAttribute('class', 'timepicker-svg');
-            svg.setAttribute('width', diameter.toString());
-            svg.setAttribute('height', diameter.toString());
-            const g = createSVGEl('g');
-            g.setAttribute('transform', `translate(${dialRadius},${dialRadius})`);
-            const bearing = createSVGEl('circle');
-            bearing.setAttribute('class', 'timepicker-canvas-bearing');
-            bearing.setAttribute('cx', '0');
-            bearing.setAttribute('cy', '0');
-            bearing.setAttribute('r', '4');
-            const hand = createSVGEl('line');
-            hand.setAttribute('x1', '0');
-            hand.setAttribute('y1', '0');
-            const bg = createSVGEl('circle');
-            bg.setAttribute('class', 'timepicker-canvas-bg');
-            bg.setAttribute('r', tickRadius.toString());
-            g.appendChild(hand);
-            g.appendChild(bg);
-            g.appendChild(bearing);
-            svg.appendChild(g);
-            state.canvas.appendChild(svg);
-            state.hand = hand;
-            state.bg = bg;
-            state.bearing = bearing;
-            state.g = g;
-        };
-        const buildHoursView = () => {
-            if (!state.hoursView)
+        const resetClock = (attrs) => {
+            const view = attrs.currentView;
+            const value = view === 'hours' ? attrs.hours : attrs.minutes;
+            const isHours = view === 'hours';
+            const unit = Math.PI / (isHours ? 6 : 30);
+            const radian = value * unit;
+            const outerRadius = attrs.outerRadius || 105;
+            const innerRadius = attrs.innerRadius || 70;
+            // In 12-hour mode, always use outer radius
+            // In 24-hour mode, use inner radius for hours 1-12, outer for 0 and 13-23
+            let radius = outerRadius;
+            if (!attrs.twelveHour && isHours && value > 0 && value < 13) {
+                radius = innerRadius;
+            }
+            const x = Math.sin(radian) * radius;
+            const y = -Math.cos(radian) * radius;
+            setHand(x, y, attrs);
+        };
+        const handleClockClickStart = (e, attrs) => {
+            e.preventDefault();
+            if (!state.plate)
                 return;
-            if (options.twelveHour) {
-                for (let i = 1; i < 13; i++) {
-                    const tick = document.createElement('div');
-                    tick.className = 'timepicker-tick';
-                    const radian = (i / 6) * Math.PI;
-                    const radius = options.outerRadius;
-                    tick.style.left = options.dialRadius + Math.sin(radian) * radius - options.tickRadius + 'px';
-                    tick.style.top = options.dialRadius - Math.cos(radian) * radius - options.tickRadius + 'px';
-                    tick.innerHTML = i === 0 ? '00' : i.toString();
-                    state.hoursView.appendChild(tick);
+            const _dialRadius = attrs.dialRadius || 135;
+            const clockPlateBR = state.plate.getBoundingClientRect();
+            const offset = { x: clockPlateBR.left, y: clockPlateBR.top };
+            state.x0 = offset.x + _dialRadius;
+            state.y0 = offset.y + _dialRadius;
+            state.moved = false;
+            const clickPos = getPos(e);
+            state.dx = clickPos.x - state.x0;
+            state.dy = clickPos.y - state.y0;
+            const startX = clickPos.x;
+            const startY = clickPos.y;
+            setHand(state.dx, state.dy, attrs, attrs.roundBy5);
+            m.redraw();
+            // Add document-level listeners to track dragging
+            const moveHandler = (e) => {
+                e.preventDefault();
+                const clickPos = getPos(e);
+                const x = clickPos.x - state.x0;
+                const y = clickPos.y - state.y0;
+                // Only consider it "moved" if dragged more than 5 pixels
+                const distance = Math.sqrt(Math.pow(clickPos.x - startX, 2) + Math.pow(clickPos.y - startY, 2));
+                if (distance > 5) {
+                    state.moved = true;
+                }
+                setHand(x, y, attrs, attrs.roundBy5);
+            };
+            const endHandler = () => {
+                document.removeEventListener('mousemove', moveHandler);
+                document.removeEventListener('touchmove', moveHandler);
+                // After setting hour (either by click or drag), switch to minutes view
+                if (attrs.currentView === 'hours' && attrs.onViewChange) {
+                    attrs.onViewChange('minutes');
+                }
+                state.moved = false;
+                m.redraw();
+            };
+            document.addEventListener('mousemove', moveHandler);
+            document.addEventListener('touchmove', moveHandler);
+            document.addEventListener('mouseup', endHandler, { once: true });
+            document.addEventListener('touchend', endHandler, { once: true });
+        };
+        const HourTicks = () => {
+            return {
+                view: ({ attrs }) => {
+                    const dialRadius = attrs.dialRadius || 135;
+                    const outerRadius = attrs.outerRadius || 105;
+                    const innerRadius = attrs.innerRadius || 70;
+                    const tickRadius = attrs.tickRadius || 20;
+                    const ticks = [];
+                    if (attrs.twelveHour) {
+                        for (let i = 1; i < 13; i++) {
+                            const radian = (i / 6) * Math.PI;
+                            const radius = outerRadius;
+                            const left = dialRadius + Math.sin(radian) * radius - tickRadius;
+                            const top = dialRadius - Math.cos(radian) * radius - tickRadius;
+                            ticks.push(m('.timepicker-tick', {
+                                style: {
+                                    left: `${left}px`,
+                                    top: `${top}px`,
+                                },
+                            }, i === 0 ? '00' : i.toString()));
+                        }
+                    }
+                    else {
+                        for (let i = 0; i < 24; i++) {
+                            const radian = (i / 6) * Math.PI;
+                            const inner = i > 0 && i < 13;
+                            const radius = inner ? innerRadius : outerRadius;
+                            const left = dialRadius + Math.sin(radian) * radius - tickRadius;
+                            const top = dialRadius - Math.cos(radian) * radius - tickRadius;
+                            ticks.push(m('.timepicker-tick', {
+                                style: {
+                                    left: `${left}px`,
+                                    top: `${top}px`,
+                                },
+                            }, i === 0 ? '00' : i.toString()));
+                        }
+                    }
+                    return ticks;
+                },
+            };
+        };
+        const MinuteTicks = () => {
+            return {
+                view: ({ attrs }) => {
+                    const dialRadius = attrs.dialRadius || 135;
+                    const outerRadius = attrs.outerRadius || 105;
+                    const tickRadius = attrs.tickRadius || 20;
+                    const ticks = [];
+                    for (let i = 0; i < 60; i += 5) {
+                        const radian = (i / 30) * Math.PI;
+                        const left = dialRadius + Math.sin(radian) * outerRadius - tickRadius;
+                        const top = dialRadius - Math.cos(radian) * outerRadius - tickRadius;
+                        ticks.push(m('.timepicker-tick', {
+                            style: {
+                                left: `${left}px`,
+                                top: `${top}px`,
+                            },
+                        }, addLeadingZero(i)));
+                    }
+                    return ticks;
+                },
+            };
+        };
+        return {
+            oncreate: ({ attrs }) => {
+                resetClock(attrs);
+            },
+            view: ({ attrs }) => {
+                // Handle view transitions
+                const isHours = attrs.currentView === 'hours';
+                const dialRadius = attrs.dialRadius || 135;
+                const tickRadius = attrs.tickRadius || 20;
+                const diameter = dialRadius * 2;
+                // Calculate hand and background positions
+                const view = attrs.currentView;
+                const value = view === 'hours' ? attrs.hours : attrs.minutes;
+                const unit = Math.PI / (view === 'hours' ? 6 : 30);
+                const radian = value * unit;
+                const outerRadius = attrs.outerRadius || 105;
+                const innerRadius = attrs.innerRadius || 70;
+                // In 12-hour mode, always use outer radius
+                // In 24-hour mode, use inner radius for hours 1-12, outer for 0 and 13-23
+                let radius = outerRadius;
+                if (!attrs.twelveHour && view === 'hours' && value > 0 && value < 13) {
+                    radius = innerRadius;
+                }
+                const cx1 = Math.sin(radian) * (radius - tickRadius);
+                const cy1 = -Math.cos(radian) * (radius - tickRadius);
+                const cx2 = Math.sin(radian) * radius;
+                const cy2 = -Math.cos(radian) * radius;
+                return [
+                    m('.timepicker-canvas', {
+                        oncreate: (vnode) => {
+                            state.canvas = vnode.dom;
+                            state.plate = vnode.dom.parentElement;
+                        },
+                        onmousedown: (e) => handleClockClickStart(e, attrs),
+                        ontouchstart: (e) => handleClockClickStart(e, attrs),
+                    }, [
+                        m('svg.timepicker-svg', {
+                            width: diameter,
+                            height: diameter,
+                            xmlns: 'http://www.w3.org/2000/svg',
+                        }, [
+                            m('g', {
+                                transform: `translate(${dialRadius},${dialRadius})`,
+                                oncreate: (vnode) => {
+                                    state.g = vnode.dom;
+                                },
+                            }, [
+                                m('line', {
+                                    x1: '0',
+                                    y1: '0',
+                                    x2: cx1,
+                                    y2: cy1,
+                                    oncreate: (vnode) => {
+                                        state.hand = vnode.dom;
+                                    },
+                                }),
+                                m('circle.timepicker-canvas-bg', {
+                                    cx: cx2,
+                                    cy: cy2,
+                                    r: tickRadius,
+                                    oncreate: (vnode) => {
+                                        state.bg = vnode.dom;
+                                    },
+                                }),
+                                m('circle.timepicker-canvas-bearing', {
+                                    cx: '0',
+                                    cy: '0',
+                                    r: '4',
+                                    oncreate: (vnode) => {
+                                        state.bearing = vnode.dom;
+                                    },
+                                }),
+                            ]),
+                        ]),
+                    ]),
+                    m(`.timepicker-dial.timepicker-hours${isHours ? '' : '.timepicker-dial-out'}`, {
+                        oncreate: (vnode) => {
+                            state.hoursView = vnode.dom;
+                        },
+                        style: {
+                            visibility: isHours ? 'visible' : 'hidden',
+                        },
+                    }, m(HourTicks, attrs)),
+                    m(`.timepicker-dial.timepicker-minutes${!isHours ? '' : '.timepicker-dial-out'}`, {
+                        oncreate: (vnode) => {
+                            state.minutesView = vnode.dom;
+                        },
+                        style: {
+                            visibility: !isHours ? 'visible' : 'hidden',
+                        },
+                    }, m(MinuteTicks, attrs)),
+                ];
+            },
+            onupdate: ({ attrs }) => {
+                // Update clock hand when time or view changes
+                resetClock(attrs);
+            },
+        };
+    };
+
+    const defaultI18n$3 = {
+        cancel: 'Cancel',
+        clear: 'Clear',
+        done: 'Ok',
+        next: 'Next',
+    };
+    const defaultOptions = {
+        dialRadius: 135,
+        outerRadius: 105,
+        innerRadius: 70,
+        tickRadius: 20,
+        duration: 350,
+        container: null,
+        defaultTime: 'now',
+        fromNow: 0,
+        showClearBtn: false,
+        i18n: defaultI18n$3,
+        autoClose: false,
+        twelveHour: true,
+        vibrate: true,
+        roundBy5: false,
+        displayMode: 'analog',
+        minuteStep: 5,
+        hourStep: 1,
+        minTime: undefined,
+        maxTime: undefined,
+        onOpen: () => { },
+        onOpenStart: () => { },
+        onOpenEnd: () => { },
+        onCloseStart: () => { },
+        onCloseEnd: () => { },
+        onSelect: () => { },
+    };
+    /**
+     * TimePicker component based on original Materialize CSS timepicker
+     */
+    const TimePicker = () => {
+        let state;
+        let options;
+        // Use shared utilities from time-utils
+        // const addLeadingZero = sharedAddLeadingZero;
+        // const generateHourOptions = sharedGenerateHourOptions;
+        // const generateMinuteOptions = sharedGenerateMinuteOptions;
+        // const scrollToValue = sharedScrollToValue;
+        // const snapToNearestItem = sharedSnapToNearestItem;
+        const updateTimeFromInput = (inputValue) => {
+            let value = ((inputValue || options.defaultTime || '') + '').split(':');
+            let amPmWasProvided = false;
+            if (options.twelveHour && value.length > 1) {
+                if (value[1].toUpperCase().indexOf('AM') > -1) {
+                    state.amOrPm = 'AM';
+                    amPmWasProvided = true;
                 }
+                else if (value[1].toUpperCase().indexOf('PM') > -1) {
+                    state.amOrPm = 'PM';
+                    amPmWasProvided = true;
+                }
+                value[1] = value[1].replace('AM', '').replace('PM', '').trim();
             }
-            else {
-                for (let i = 0; i < 24; i++) {
-                    const tick = document.createElement('div');
-                    tick.className = 'timepicker-tick';
-                    const radian = (i / 6) * Math.PI;
-                    const inner = i > 0 && i < 13;
-                    const radius = inner ? options.innerRadius : options.outerRadius;
-                    tick.style.left = options.dialRadius + Math.sin(radian) * radius - options.tickRadius + 'px';
-                    tick.style.top = options.dialRadius - Math.cos(radian) * radius - options.tickRadius + 'px';
-                    tick.innerHTML = i === 0 ? '00' : i.toString();
-                    state.hoursView.appendChild(tick);
+            if (value[0] === 'now') {
+                const now = new Date(+new Date() + options.fromNow);
+                value = [now.getHours().toString(), now.getMinutes().toString()];
+                if (options.twelveHour) {
+                    state.amOrPm = parseInt(value[0]) >= 12 ? 'PM' : 'AM';
+                    amPmWasProvided = false; // For 'now', we need to do conversion
+                }
+            }
+            let hours = +value[0] || 0;
+            let minutes = +value[1] || 0;
+            if (options.twelveHour) {
+                if (!amPmWasProvided) {
+                    // No AM/PM was provided, assume this is 24-hour format input - convert it
+                    if (hours >= 12) {
+                        state.amOrPm = 'PM';
+                        if (hours > 12) {
+                            hours = hours - 12;
+                        }
+                    }
+                    else {
+                        state.amOrPm = 'AM';
+                        if (hours === 0) {
+                            hours = 12;
+                        }
+                    }
                 }
+                else {
+                    // AM/PM was provided, hours are already in 12-hour format
+                    // Just handle midnight/noon edge cases
+                    if (hours === 0 && state.amOrPm === 'AM') {
+                        hours = 12;
+                    }
+                }
+            }
+            state.hours = hours;
+            state.minutes = minutes;
+            if (state.spanHours) {
+                state.spanHours.innerHTML = addLeadingZero(state.hours);
+            }
+            if (state.spanMinutes) {
+                state.spanMinutes.innerHTML = addLeadingZero(state.minutes);
             }
+            updateAmPmView();
         };
-        const buildMinutesView = () => {
-            if (!state.minutesView)
-                return;
-            for (let i = 0; i < 60; i += 5) {
-                const tick = document.createElement('div');
-                tick.className = 'timepicker-tick';
-                const radian = (i / 30) * Math.PI;
-                tick.style.left = options.dialRadius + Math.sin(radian) * options.outerRadius - options.tickRadius + 'px';
-                tick.style.top = options.dialRadius - Math.cos(radian) * options.outerRadius - options.tickRadius + 'px';
-                tick.innerHTML = addLeadingZero(i);
-                state.minutesView.appendChild(tick);
+        const updateAmPmView = () => {
+            if (options.twelveHour && state.amBtn && state.pmBtn) {
+                state.amBtn.classList.toggle('text-primary', state.amOrPm === 'AM');
+                state.pmBtn.classList.toggle('text-primary', state.amOrPm === 'PM');
             }
         };
         const handleAmPmClick = (ampm) => {
@@ -5672,7 +6145,7 @@
                 return;
             state.isOpen = true;
             updateTimeFromInput(inputValue);
-            showView('hours');
+            state.currentView = 'hours';
             if (options.onOpen)
                 options.onOpen();
             if (options.onOpenStart)
@@ -5706,6 +6179,7 @@
             return {
                 view: ({ attrs }) => {
                     const { i18n, showClearBtn } = attrs;
+                    const isDigitalMode = options.displayMode === 'digital';
                     return [
                         m('.modal-content.timepicker-container', [
                             m('.timepicker-digital-display', [
@@ -5713,7 +6187,12 @@
                                     m('.timepicker-display-column', [
                                         m('span.timepicker-span-hours', {
                                             class: state.currentView === 'hours' ? 'text-primary' : '',
-                                            onclick: () => showView('hours'),
+                                            onclick: () => {
+                                                if (!isDigitalMode) {
+                                                    state.currentView = 'hours';
+                                                    m.redraw();
+                                                }
+                                            },
                                             oncreate: (vnode) => {
                                                 state.spanHours = vnode.dom;
                                             },
@@ -5721,7 +6200,12 @@
                                         ':',
                                         m('span.timepicker-span-minutes', {
                                             class: state.currentView === 'minutes' ? 'text-primary' : '',
-                                            onclick: () => showView('minutes'),
+                                            onclick: () => {
+                                                if (!isDigitalMode) {
+                                                    state.currentView = 'minutes';
+                                                    m.redraw();
+                                                }
+                                            },
                                             oncreate: (vnode) => {
                                                 state.spanMinutes = vnode.dom;
                                             },
@@ -5752,66 +6236,108 @@
                                         ]),
                                 ]),
                             ]),
-                            m('.timepicker-analog-display', [
-                                m('.timepicker-plate', {
-                                    oncreate: (vnode) => {
-                                        state.plate = vnode.dom;
-                                        state.plate.addEventListener('mousedown', handleClockClickStart);
-                                        state.plate.addEventListener('touchstart', handleClockClickStart);
-                                    },
-                                    onremove: () => {
-                                        if (state.plate) {
-                                            state.plate.removeEventListener('mousedown', handleClockClickStart);
-                                            state.plate.removeEventListener('touchstart', handleClockClickStart);
-                                        }
-                                    },
-                                }, [
-                                    m('.timepicker-canvas', {
-                                        oncreate: (vnode) => {
-                                            state.canvas = vnode.dom;
-                                            buildSVGClock();
-                                            // Position the hand after SVG is built
-                                            setTimeout(() => resetClock(), 10);
-                                        },
-                                    }),
-                                    m('.timepicker-dial.timepicker-hours', {
-                                        oncreate: (vnode) => {
-                                            state.hoursView = vnode.dom;
-                                            buildHoursView();
+                            // Conditional rendering: digital or analog mode
+                            isDigitalMode
+                                ? m('.timepicker-digital-mode', [
+                                    m(DigitalClock, {
+                                        hours: state.hours,
+                                        minutes: state.minutes,
+                                        amOrPm: state.amOrPm,
+                                        twelveHour: options.twelveHour,
+                                        minuteStep: options.minuteStep,
+                                        hourStep: options.hourStep,
+                                        minTime: options.minTime,
+                                        maxTime: options.maxTime,
+                                        onTimeChange: (hours, minutes, amOrPm) => {
+                                            state.hours = hours;
+                                            state.minutes = minutes;
+                                            state.amOrPm = amOrPm;
+                                            updateAmPmView();
+                                            if (options.onSelect)
+                                                options.onSelect(hours, minutes);
                                         },
+                                        spanHours: state.spanHours,
+                                        spanMinutes: state.spanMinutes,
+                                        spanAmPm: state.spanAmPm,
                                     }),
-                                    m('.timepicker-dial.timepicker-minutes.timepicker-dial-out', {
+                                    m('.timepicker-footer', {
                                         oncreate: (vnode) => {
-                                            state.minutesView = vnode.dom;
-                                            buildMinutesView();
+                                            state.footer = vnode.dom;
                                         },
-                                    }),
-                                ]),
-                                m('.timepicker-footer', {
-                                    oncreate: (vnode) => {
-                                        state.footer = vnode.dom;
-                                    },
-                                }, [
-                                    m('button.btn-flat.timepicker-clear.waves-effect', {
-                                        type: 'button',
-                                        tabindex: options.twelveHour ? '3' : '1',
-                                        style: showClearBtn ? '' : 'visibility: hidden;',
-                                        onclick: () => clear(),
-                                    }, i18n.clear),
-                                    m('.confirmation-btns', [
-                                        m('button.btn-flat.timepicker-close.waves-effect', {
+                                    }, [
+                                        m('button.btn-flat.timepicker-clear.waves-effect', {
                                             type: 'button',
                                             tabindex: options.twelveHour ? '3' : '1',
-                                            onclick: () => close(),
-                                        }, i18n.cancel),
-                                        m('button.btn-flat.timepicker-close.waves-effect', {
+                                            style: showClearBtn ? '' : 'visibility: hidden;',
+                                            onclick: () => clear(),
+                                        }, i18n.clear),
+                                        m('.confirmation-btns', [
+                                            m('button.btn-flat.timepicker-close.waves-effect', {
+                                                type: 'button',
+                                                tabindex: options.twelveHour ? '3' : '1',
+                                                onclick: () => close(),
+                                            }, i18n.cancel),
+                                            m('button.btn-flat.timepicker-close.waves-effect', {
+                                                type: 'button',
+                                                tabindex: options.twelveHour ? '3' : '1',
+                                                onclick: () => done(),
+                                            }, i18n.done),
+                                        ]),
+                                    ]),
+                                ])
+                                : m('.timepicker-analog-display', [
+                                    m('.timepicker-plate', m(AnalogClock, {
+                                        hours: state.hours,
+                                        minutes: state.minutes,
+                                        amOrPm: state.amOrPm,
+                                        currentView: state.currentView,
+                                        twelveHour: options.twelveHour,
+                                        dialRadius: options.dialRadius,
+                                        outerRadius: options.outerRadius,
+                                        innerRadius: options.innerRadius,
+                                        tickRadius: options.tickRadius,
+                                        roundBy5: options.roundBy5,
+                                        vibrate: options.vibrate,
+                                        onTimeChange: (hours, minutes) => {
+                                            state.hours = hours;
+                                            state.minutes = minutes;
+                                            if (options.onSelect)
+                                                options.onSelect(hours, minutes);
+                                        },
+                                        onViewChange: (view) => {
+                                            state.currentView = view;
+                                            if (view === 'minutes' && options.autoClose) {
+                                                setTimeout(() => done(), options.duration / 2);
+                                            }
+                                        },
+                                        spanHours: state.spanHours,
+                                        spanMinutes: state.spanMinutes,
+                                    })),
+                                    m('.timepicker-footer', {
+                                        oncreate: (vnode) => {
+                                            state.footer = vnode.dom;
+                                        },
+                                    }, [
+                                        m('button.btn-flat.timepicker-clear.waves-effect', {
                                             type: 'button',
                                             tabindex: options.twelveHour ? '3' : '1',
-                                            onclick: () => done(),
-                                        }, i18n.done),
+                                            style: showClearBtn ? '' : 'visibility: hidden;',
+                                            onclick: () => clear(),
+                                        }, i18n.clear),
+                                        m('.confirmation-btns', [
+                                            m('button.btn-flat.timepicker-close.waves-effect', {
+                                                type: 'button',
+                                                tabindex: options.twelveHour ? '3' : '1',
+                                                onclick: () => close(),
+                                            }, i18n.cancel),
+                                            m('button.btn-flat.timepicker-close.waves-effect', {
+                                                type: 'button',
+                                                tabindex: options.twelveHour ? '3' : '1',
+                                                onclick: () => done(),
+                                            }, i18n.done),
+                                        ]),
                                     ]),
                                 ]),
-                            ]),
                         ]),
                     ];
                 },
@@ -5824,7 +6350,7 @@
                 m.redraw();
             }
         };
-        const renderPickerToPortal = (attrs) => {
+        const renderPickerToPortal = () => {
             const pickerModal = m('.timepicker-modal-wrapper', {
                 style: {
                     position: 'fixed',
@@ -5885,11 +6411,6 @@
                     minutes: 0,
                     amOrPm: 'AM',
                     currentView: 'hours',
-                    moved: false,
-                    x0: 0,
-                    y0: 0,
-                    dx: 0,
-                    dy: 0,
                     portalContainerId: `timepicker-portal-${uniqueId()}`,
                 };
                 // Handle value after options are set
@@ -5901,27 +6422,17 @@
             },
             onremove: () => {
                 // Cleanup
-                if (state.toggleViewTimer) {
-                    clearTimeout(state.toggleViewTimer);
-                }
-                if (state.vibrateTimer) {
-                    clearTimeout(state.vibrateTimer);
-                }
-                document.removeEventListener('mousemove', handleDocumentClickMove);
-                document.removeEventListener('touchmove', handleDocumentClickMove);
-                document.removeEventListener('mouseup', handleDocumentClickEnd);
-                document.removeEventListener('touchend', handleDocumentClickEnd);
                 document.removeEventListener('keydown', handleKeyDown);
                 // Clean up portal if picker was open
                 if (state.isOpen) {
                     clearPortal(state.portalContainerId);
                 }
             },
-            onupdate: (vnode) => {
-                const { useModal = true } = vnode.attrs;
+            onupdate: ({ attrs }) => {
+                const { useModal = true } = attrs;
                 // Only render to portal when using modal mode
                 if (useModal && state.isOpen) {
-                    renderPickerToPortal(vnode.attrs);
+                    renderPickerToPortal();
                 }
                 else {
                     clearPortal(state.portalContainerId);
@@ -6802,46 +7313,50 @@
     };
 
     // Proper components to avoid anonymous closures
-    const SelectedChip = {
-        view: ({ attrs: { option, onRemove } }) => m('.chip', [
-            option.label || option.id.toString(),
-            m(MaterialIcon, {
-                name: 'close',
-                className: 'close',
-                onclick: (e) => {
-                    e.stopPropagation();
-                    onRemove(option.id);
-                },
-            }),
-        ]),
-    };
-    const DropdownOption = {
-        view: ({ attrs: { option, index, selectedIds, isFocused, onToggle, onMouseOver, showCheckbox } }) => {
-            const checkboxId = `search-select-option-${option.id}`;
-            const optionLabel = option.label || option.id.toString();
-            return m('li', {
-                key: option.id,
-                onclick: (e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onToggle(option);
-                },
-                class: `${option.disabled ? 'disabled' : ''} ${isFocused ? 'active' : ''}`.trim(),
-                onmouseover: () => {
-                    if (!option.disabled) {
-                        onMouseOver(index);
-                    }
-                },
-            }, m('label', { for: checkboxId, class: 'search-select-option-label' }, [
-                showCheckbox &&
-                    m('input', {
-                        type: 'checkbox',
-                        id: checkboxId,
-                        checked: selectedIds.includes(option.id),
-                    }),
-                m('span', optionLabel),
-            ]));
-        },
+    const SelectedChip = () => {
+        return {
+            view: ({ attrs: { option, onRemove } }) => m('.chip', [
+                option.label || option.id.toString(),
+                m(MaterialIcon, {
+                    name: 'close',
+                    className: 'close',
+                    onclick: (e) => {
+                        e.stopPropagation();
+                        onRemove(option.id);
+                    },
+                }),
+            ]),
+        };
+    };
+    const DropdownOption = () => {
+        return {
+            view: ({ attrs: { option, index, selectedIds, isFocused, onToggle, onMouseOver, showCheckbox } }) => {
+                const checkboxId = `search-select-option-${option.id}`;
+                const optionLabel = option.label || option.id.toString();
+                return m('li', {
+                    key: option.id,
+                    onclick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onToggle(option);
+                    },
+                    class: `${option.disabled ? 'disabled' : ''} ${isFocused ? 'active' : ''}`.trim(),
+                    onmouseover: () => {
+                        if (!option.disabled) {
+                            onMouseOver(index);
+                        }
+                    },
+                }, m('label', { for: checkboxId, class: 'search-select-option-label' }, [
+                    showCheckbox &&
+                        m('input', {
+                            type: 'checkbox',
+                            id: checkboxId,
+                            checked: selectedIds.includes(option.id),
+                        }),
+                    m('span', optionLabel),
+                ]));
+            },
+        };
     };
     /**
      * Mithril Factory Component for Multi-Select Dropdown with search
@@ -7080,8 +7595,7 @@
                             style: { position: 'absolute', left: '-9999px', opacity: 0 },
                         }),
                         // Selected Options (chips)
-                        ...selectedOptions.map((option) => m(SelectedChip, {
-                            // key: option.id,
+                        ...selectedOptions.map((option) => m(SelectedChip(), {
                             option,
                             onRemove: (id) => removeOption(id, attrs),
                         })),
@@ -7197,8 +7711,7 @@
                                 ]
                                 : []),
                             // List of filtered options
-                            ...displayedOptions.map((option, index) => m(DropdownOption, {
-                                // key: option.id,
+                            ...displayedOptions.map((option, index) => m(DropdownOption(), {
                                 option,
                                 index,
                                 selectedIds,
@@ -7215,6 +7728,411 @@
         };
     };
 
+    const defaultI18n$2 = {
+        cancel: 'Cancel',
+        clear: 'Clear',
+        done: 'Ok',
+        next: 'Next',
+    };
+    /**
+     * TimeRangePicker component for selecting time ranges
+     * Custom implementation with embedded digital clock picker
+     */
+    const TimeRangePicker = () => {
+        let state;
+        const calculateMinTime = (startTime, twelveHour) => {
+            if (!startTime)
+                return undefined;
+            let hours = startTime.hours;
+            let minutes = startTime.minutes + 1;
+            let amOrPm = startTime.amOrPm;
+            if (minutes >= 60) {
+                minutes = 0;
+                hours++;
+                if (twelveHour) {
+                    if (hours > 12) {
+                        hours = 1;
+                        amOrPm = amOrPm === 'AM' ? 'PM' : 'AM';
+                    }
+                    else if (hours === 12) {
+                        amOrPm = amOrPm === 'AM' ? 'PM' : 'AM';
+                    }
+                }
+                else {
+                    if (hours >= 24)
+                        hours = 0;
+                }
+            }
+            return formatTime({ hours, minutes, amOrPm }, twelveHour);
+        };
+        const handleNextOrDone = (validateRange, twelveHour, onchange) => {
+            if (state.currentSelection === 'start') {
+                // Move to end time selection
+                state.currentSelection = 'end';
+                state.currentView = 'hours'; // Reset to hours view for end time
+                // If validation is enabled and end time is before or equal to start time, reset end time
+                if (validateRange) {
+                    const startMins = timeToMinutes(state.tempStartTime, twelveHour);
+                    const endMins = timeToMinutes(state.tempEndTime, twelveHour);
+                    if (endMins <= startMins) {
+                        // Reset end time to start time
+                        state.tempEndTime = Object.assign({}, state.tempStartTime);
+                    }
+                }
+            }
+            else {
+                // Finalize selection
+                state.startTime = Object.assign({}, state.tempStartTime);
+                state.endTime = Object.assign({}, state.tempEndTime);
+                state.isPickerOpen = false;
+                state.currentSelection = 'start';
+                // Call onchange callback
+                if (onchange && state.startTime && state.endTime) {
+                    const startTimeStr = formatTime(state.startTime, twelveHour);
+                    const endTimeStr = formatTime(state.endTime, twelveHour);
+                    onchange(startTimeStr, endTimeStr);
+                }
+            }
+        };
+        const TimeRangePickerModal = () => {
+            return {
+                view: ({ attrs }) => {
+                    const { i18n, showClearBtn, twelveHour, minuteStep, hourStep, minTime, maxTime, validateRange, displayMode = 'digital', dialRadius = 135, outerRadius = 105, innerRadius = 70, tickRadius = 20, roundBy5 = false, vibrate = true, } = attrs;
+                    const isAnalogMode = displayMode === 'analog';
+                    // Calculate effective minTime for end time selection
+                    const effectiveMinTime = state.currentSelection === 'end' && validateRange
+                        ? calculateMinTime(state.tempStartTime, twelveHour)
+                        : minTime;
+                    return m('.modal-content.timepicker-container', [
+                        // Vertical time range display on the left
+                        m('.timerange-display-vertical', [
+                            m('.timerange-time-section', { class: state.currentSelection === 'start' ? 'active' : '' }, [
+                                m('.timerange-label', 'Start'),
+                                m('.timerange-time', [
+                                    m('span.timerange-hours', {
+                                        oncreate: (vnode) => {
+                                            state.spanStartHours = vnode.dom;
+                                            state.spanStartHours.innerHTML = addLeadingZero(state.tempStartTime.hours);
+                                        },
+                                    }, addLeadingZero(state.tempStartTime.hours)),
+                                    ':',
+                                    m('span.timerange-minutes', {
+                                        oncreate: (vnode) => {
+                                            state.spanStartMinutes = vnode.dom;
+                                            state.spanStartMinutes.innerHTML = addLeadingZero(state.tempStartTime.minutes);
+                                        },
+                                    }, addLeadingZero(state.tempStartTime.minutes)),
+                                    twelveHour &&
+                                        m('span.timerange-ampm', {
+                                            oncreate: (vnode) => {
+                                                state.spanStartAmPm = vnode.dom;
+                                                state.spanStartAmPm.innerHTML = ` ${state.tempStartTime.amOrPm}`;
+                                            },
+                                        }, ` ${state.tempStartTime.amOrPm}`),
+                                ]),
+                            ]),
+                            m('.timerange-time-section', { class: state.currentSelection === 'end' ? 'active' : '' }, [
+                                m('.timerange-label', 'End'),
+                                m('.timerange-time', [
+                                    m('span.timerange-hours', {
+                                        oncreate: (vnode) => {
+                                            state.spanEndHours = vnode.dom;
+                                            state.spanEndHours.innerHTML = addLeadingZero(state.tempEndTime.hours);
+                                        },
+                                    }, addLeadingZero(state.tempEndTime.hours)),
+                                    ':',
+                                    m('span.timerange-minutes', {
+                                        oncreate: (vnode) => {
+                                            state.spanEndMinutes = vnode.dom;
+                                            state.spanEndMinutes.innerHTML = addLeadingZero(state.tempEndTime.minutes);
+                                        },
+                                    }, addLeadingZero(state.tempEndTime.minutes)),
+                                    twelveHour &&
+                                        m('span.timerange-ampm', {
+                                            oncreate: (vnode) => {
+                                                state.spanEndAmPm = vnode.dom;
+                                                state.spanEndAmPm.innerHTML = ` ${state.tempEndTime.amOrPm}`;
+                                            },
+                                        }, ` ${state.tempEndTime.amOrPm}`),
+                                ]),
+                            ]),
+                        ]),
+                        // Clock picker (analog or digital mode)
+                        isAnalogMode
+                            ? m('.timepicker-analog-display', [
+                                m('.timepicker-plate', m(AnalogClock, {
+                                    key: state.currentSelection, // Force component recreation when switching between start/end
+                                    hours: state.currentSelection === 'start' ? state.tempStartTime.hours : state.tempEndTime.hours,
+                                    minutes: state.currentSelection === 'start' ? state.tempStartTime.minutes : state.tempEndTime.minutes,
+                                    amOrPm: state.currentSelection === 'start' ? state.tempStartTime.amOrPm : state.tempEndTime.amOrPm,
+                                    currentView: state.currentView,
+                                    twelveHour,
+                                    dialRadius,
+                                    outerRadius,
+                                    innerRadius,
+                                    tickRadius,
+                                    roundBy5,
+                                    vibrate,
+                                    onTimeChange: (hours, minutes) => {
+                                        if (state.currentSelection === 'start') {
+                                            state.tempStartTime = Object.assign(Object.assign({}, state.tempStartTime), { hours, minutes });
+                                            if (state.spanStartHours)
+                                                state.spanStartHours.innerHTML = addLeadingZero(hours);
+                                            if (state.spanStartMinutes)
+                                                state.spanStartMinutes.innerHTML = addLeadingZero(minutes);
+                                        }
+                                        else {
+                                            state.tempEndTime = Object.assign(Object.assign({}, state.tempEndTime), { hours, minutes });
+                                            if (state.spanEndHours)
+                                                state.spanEndHours.innerHTML = addLeadingZero(hours);
+                                            if (state.spanEndMinutes)
+                                                state.spanEndMinutes.innerHTML = addLeadingZero(minutes);
+                                        }
+                                    },
+                                    onViewChange: (view) => {
+                                        state.currentView = view;
+                                    },
+                                    spanHours: state.currentSelection === 'start' ? state.spanStartHours : state.spanEndHours,
+                                    spanMinutes: state.currentSelection === 'start' ? state.spanStartMinutes : state.spanEndMinutes,
+                                })),
+                                // Footer (inside analog display)
+                                m('.timepicker-footer', [
+                                    m('button.btn-flat.timepicker-clear.waves-effect', {
+                                        type: 'button',
+                                        style: showClearBtn ? '' : 'visibility: hidden;',
+                                        onclick: () => {
+                                            state.isPickerOpen = false;
+                                        },
+                                    }, i18n.clear),
+                                    m('.confirmation-btns', [
+                                        m('button.btn-flat.timepicker-close.waves-effect', {
+                                            type: 'button',
+                                            onclick: () => {
+                                                state.isPickerOpen = false;
+                                                state.currentSelection = 'start';
+                                                state.currentView = 'hours'; // Reset to hours view
+                                            },
+                                        }, i18n.cancel),
+                                        m('button.btn-flat.timepicker-close.waves-effect', {
+                                            type: 'button',
+                                            onclick: () => {
+                                                handleNextOrDone(validateRange, twelveHour, attrs.onchange);
+                                            },
+                                        }, state.currentSelection === 'start' ? i18n.next : i18n.done),
+                                    ]),
+                                ]),
+                            ])
+                            : m('.timepicker-digital-mode', [
+                                m(DigitalClock, {
+                                    key: state.currentSelection, // Force component recreation when switching between start/end
+                                    hours: state.currentSelection === 'start' ? state.tempStartTime.hours : state.tempEndTime.hours,
+                                    minutes: state.currentSelection === 'start' ? state.tempStartTime.minutes : state.tempEndTime.minutes,
+                                    amOrPm: state.currentSelection === 'start' ? state.tempStartTime.amOrPm : state.tempEndTime.amOrPm,
+                                    twelveHour,
+                                    minuteStep,
+                                    hourStep,
+                                    minTime: effectiveMinTime,
+                                    maxTime,
+                                    onTimeChange: (hours, minutes, amOrPm) => {
+                                        if (state.currentSelection === 'start') {
+                                            state.tempStartTime = { hours, minutes, amOrPm };
+                                            if (state.spanStartHours)
+                                                state.spanStartHours.innerHTML = addLeadingZero(hours);
+                                            if (state.spanStartMinutes)
+                                                state.spanStartMinutes.innerHTML = addLeadingZero(minutes);
+                                            if (state.spanStartAmPm)
+                                                state.spanStartAmPm.innerHTML = ` ${amOrPm}`;
+                                        }
+                                        else {
+                                            state.tempEndTime = { hours, minutes, amOrPm };
+                                            if (state.spanEndHours)
+                                                state.spanEndHours.innerHTML = addLeadingZero(hours);
+                                            if (state.spanEndMinutes)
+                                                state.spanEndMinutes.innerHTML = addLeadingZero(minutes);
+                                            if (state.spanEndAmPm)
+                                                state.spanEndAmPm.innerHTML = ` ${amOrPm}`;
+                                        }
+                                    },
+                                    spanHours: state.currentSelection === 'start' ? state.spanStartHours : state.spanEndHours,
+                                    spanMinutes: state.currentSelection === 'start' ? state.spanStartMinutes : state.spanEndMinutes,
+                                    spanAmPm: state.currentSelection === 'start' ? state.spanStartAmPm : state.spanEndAmPm,
+                                }),
+                                // Footer (inside digital mode)
+                                m('.timepicker-footer', { key: 'timepicker-footer' }, [
+                                    m('button.btn-flat.timepicker-clear.waves-effect', {
+                                        type: 'button',
+                                        style: showClearBtn ? '' : 'visibility: hidden;',
+                                        onclick: () => {
+                                            state.isPickerOpen = false;
+                                        },
+                                    }, i18n.clear),
+                                    m('.confirmation-btns', [
+                                        m('button.btn-flat.timepicker-close.waves-effect', {
+                                            type: 'button',
+                                            onclick: () => {
+                                                state.isPickerOpen = false;
+                                                state.currentSelection = 'start';
+                                                state.currentView = 'hours'; // Reset to hours view
+                                            },
+                                        }, i18n.cancel),
+                                        m('button.btn-flat.timepicker-close.waves-effect', {
+                                            type: 'button',
+                                            onclick: () => {
+                                                handleNextOrDone(validateRange, twelveHour, attrs.onchange);
+                                            },
+                                        }, state.currentSelection === 'start' ? i18n.next : i18n.done),
+                                    ]),
+                                ]),
+                            ]),
+                    ]);
+                },
+            };
+        };
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape' && state.isPickerOpen) {
+                state.isPickerOpen = false;
+                clearPortal(state.portalContainerId);
+            }
+        };
+        const renderPickerToPortal = (attrs) => {
+            const mergedI18n = Object.assign(Object.assign({}, defaultI18n$2), attrs.i18n);
+            const pickerModal = m('.timepicker-modal-wrapper', {
+                style: {
+                    position: 'fixed',
+                    top: '0',
+                    left: '0',
+                    width: '100%',
+                    height: '100%',
+                    pointerEvents: 'auto',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                },
+            }, [
+                // Modal overlay
+                m('.modal-overlay', {
+                    style: {
+                        position: 'absolute',
+                        top: '0',
+                        left: '0',
+                        width: '100%',
+                        height: '100%',
+                        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                        zIndex: '1002',
+                    },
+                    onclick: () => {
+                        state.isPickerOpen = false;
+                        state.currentSelection = 'start';
+                        state.currentView = 'hours'; // Reset to hours view
+                    },
+                }),
+                // Modal content
+                m('.modal.timepicker-modal.open.timerange-modal', {
+                    style: {
+                        position: 'relative',
+                        zIndex: '1003',
+                        display: 'block',
+                        opacity: 1,
+                        top: 'auto',
+                        transform: 'scaleX(1) scaleY(1)',
+                        margin: '0 auto',
+                    },
+                }, [
+                    m(TimeRangePickerModal, {
+                        i18n: mergedI18n,
+                        showClearBtn: attrs.showClearBtn || false,
+                        twelveHour: attrs.twelveHour !== undefined ? attrs.twelveHour : true,
+                        minuteStep: attrs.minuteStep || 5,
+                        hourStep: attrs.hourStep || 1,
+                        minTime: attrs.minTime,
+                        maxTime: attrs.maxTime,
+                        validateRange: attrs.validateRange || false,
+                        onchange: attrs.onchange,
+                        displayMode: attrs.displayMode,
+                        dialRadius: attrs.dialRadius,
+                        outerRadius: attrs.outerRadius,
+                        innerRadius: attrs.innerRadius,
+                        tickRadius: attrs.tickRadius,
+                        roundBy5: attrs.roundBy5,
+                        vibrate: attrs.vibrate,
+                    }),
+                ]),
+            ]);
+            renderToPortal(state.portalContainerId, pickerModal, 1004);
+        };
+        return {
+            oninit: (vnode) => {
+                const attrs = vnode.attrs;
+                const twelveHour = attrs.twelveHour !== undefined ? attrs.twelveHour : true;
+                const startTime = parseTime(attrs.startValue || '', twelveHour);
+                const endTime = parseTime(attrs.endValue || '', twelveHour);
+                state = {
+                    id: uniqueId(),
+                    currentSelection: 'start',
+                    startTime,
+                    endTime,
+                    tempStartTime: Object.assign({}, startTime),
+                    tempEndTime: Object.assign({}, endTime),
+                    isPickerOpen: false,
+                    portalContainerId: `timerange-portal-${uniqueId()}`,
+                    currentView: 'hours',
+                };
+                document.addEventListener('keydown', handleKeyDown);
+            },
+            onremove: () => {
+                document.removeEventListener('keydown', handleKeyDown);
+                if (state.isPickerOpen) {
+                    clearPortal(state.portalContainerId);
+                }
+            },
+            onupdate: ({ attrs }) => {
+                if (state.isPickerOpen) {
+                    renderPickerToPortal(attrs);
+                }
+                else {
+                    clearPortal(state.portalContainerId);
+                }
+            },
+            view: ({ attrs }) => {
+                const { id = state.id, label, placeholder = 'Select time range', disabled, readonly, required, iconName, helperText, className: cn1, class: cn2, twelveHour = true, } = attrs;
+                const className = cn1 || cn2 || 'col s12';
+                const displayValue = state.startTime && state.endTime
+                    ? `${formatTime(state.startTime, twelveHour)} - ${formatTime(state.endTime, twelveHour)}`
+                    : state.startTime
+                        ? `${formatTime(state.startTime, twelveHour)} - ...`
+                        : '';
+                return m('.input-field', { className }, [
+                    iconName && m('i.material-icons.prefix', iconName),
+                    // Display input
+                    m('input.timerangepicker', {
+                        id,
+                        type: 'text',
+                        value: displayValue,
+                        placeholder,
+                        readonly: true,
+                        disabled,
+                        required,
+                        onclick: () => {
+                            if (!disabled && !readonly) {
+                                state.isPickerOpen = true;
+                                state.currentSelection = 'start';
+                                state.currentView = 'hours'; // Reset to hours view when opening
+                                state.tempStartTime = Object.assign({}, state.startTime);
+                                state.tempEndTime = Object.assign({}, state.endTime);
+                            }
+                        },
+                    }),
+                    label &&
+                        m('label', {
+                            for: id,
+                            class: displayValue || placeholder ? 'active' : '',
+                        }, label),
+                    helperText && m('span.helper-text', helperText),
+                ]);
+            },
+        };
+    };
+
     class Toast {
         constructor(options = {}) {
             this.options = Object.assign(Object.assign({}, Toast.defaults), options);
@@ -9797,6 +10715,126 @@
         };
     };
 
+    /**
+     * ToggleButton component.
+     *
+     * A button that can be toggled on/off. Typically used within a ToggleGroup
+     * to create grouped button controls where one or more buttons can be selected.
+     *
+     * @example
+     * ```typescript
+     * m(ToggleButton, {
+     *   value: 'bold',
+     *   iconName: 'format_bold',
+     *   checked: true,
+     *   tooltip: 'Bold',
+     *   onchange: () => console.log('Toggled')
+     * })
+     * ```
+     */
+    const ToggleButton = () => {
+        return {
+            view: ({ attrs }) => {
+                const { checked, iconName, icon, label, onchange, className, tooltip } = attrs, rest = __rest(attrs, ["checked", "iconName", "icon", "label", "onchange", "className", "tooltip"]);
+                const classes = [className, checked ? 'checked' : ''].filter(Boolean).join(' ');
+                return m('button.btn-flat.waves-effect.toggle-button', Object.assign(Object.assign({}, rest), { className: classes, title: tooltip, onclick: () => {
+                        if (onchange) {
+                            onchange();
+                        }
+                    }, onmousedown: WavesEffect.onMouseDown, onmouseup: WavesEffect.onMouseUp, onmouseleave: WavesEffect.onMouseLeave, ontouchstart: WavesEffect.onTouchStart, ontouchend: WavesEffect.onTouchEnd }), [icon, iconName && m(Icon, { iconName, className: attrs.iconClass }), label]);
+            },
+        };
+    };
+
+    /**
+     * ToggleGroup component.
+     *
+     * A group of toggle buttons that can operate in single-select or multi-select mode.
+     * The component supports both controlled and uncontrolled modes.
+     *
+     * **Controlled mode**: Manage the state externally using the `value` prop.
+     * **Uncontrolled mode**: Let the component manage its own state using `defaultValue`.
+     *
+     * @example
+     * ```typescript
+     * // Single-select, controlled mode
+     * let selected = 'left';
+     * m(ToggleGroup, {
+     *   value: selected,
+     *   onchange: (v) => selected = v,
+     *   items: [
+     *     { value: 'left', iconName: 'format_align_left', tooltip: 'Align Left' },
+     *     { value: 'center', iconName: 'format_align_center', tooltip: 'Align Center' },
+     *     { value: 'right', iconName: 'format_align_right', tooltip: 'Align Right' }
+     *   ]
+     * });
+     *
+     * // Multi-select, controlled mode
+     * let selected = ['bold', 'italic'];
+     * m(ToggleGroup, {
+     *   multiple: true,
+     *   value: selected,
+     *   onchange: (v) => selected = v,
+     *   items: [
+     *     { value: 'bold', iconName: 'format_bold', tooltip: 'Bold' },
+     *     { value: 'italic', iconName: 'format_italic', tooltip: 'Italic' },
+     *     { value: 'underline', iconName: 'format_underlined', tooltip: 'Underline' }
+     *   ]
+     * });
+     *
+     * // Uncontrolled mode
+     * m(ToggleGroup, {
+     *   defaultValue: 'left',
+     *   onchange: (v) => console.log('Changed to:', v),
+     *   items: [...]
+     * });
+     * ```
+     */
+    const ToggleGroup = () => {
+        let internalValue;
+        const handleSelect = (attrs, item, currentValue) => {
+            if (attrs.disabled || item.disabled) {
+                return;
+            }
+            const { value, multiple, onchange } = attrs;
+            const isControlled = value !== undefined;
+            if (multiple) {
+                const currentValues = (Array.isArray(currentValue) ? currentValue : currentValue !== undefined ? [currentValue] : []);
+                const newValues = currentValues.includes(item.value)
+                    ? currentValues.filter((v) => v !== item.value)
+                    : [...currentValues, item.value];
+                if (!isControlled) {
+                    internalValue = newValues;
+                }
+                if (onchange) {
+                    onchange(newValues);
+                }
+            }
+            else {
+                const newValue = item.value;
+                if (!isControlled) {
+                    internalValue = newValue;
+                }
+                if (onchange) {
+                    onchange(newValue);
+                }
+            }
+        };
+        return {
+            oninit: ({ attrs }) => {
+                internalValue = attrs.defaultValue;
+            },
+            view: ({ attrs }) => {
+                const { value, items, multiple } = attrs;
+                const isControlled = value !== undefined;
+                const currentValue = isControlled ? value : internalValue;
+                return m('.toggle-group', items.map((item) => m(ToggleButton, Object.assign(Object.assign({}, item), { checked: multiple && Array.isArray(currentValue)
+                        ? currentValue.includes(item.value)
+                        : currentValue === item.value, onchange: () => handleSelect(attrs, item, currentValue) }))));
+            },
+        };
+    };
+
     /**
      * @fileoverview Core TypeScript utility types for mithril-materialized library
      * These types improve type safety and developer experience across all components
@@ -9818,6 +10856,7 @@
     // ============================================================================
     // All types are already exported via individual export declarations above
 
+    exports.AnalogClock = AnalogClock;
     exports.AnchorItem = AnchorItem;
     exports.Autocomplete = Autocomplete;
     exports.Breadcrumb = Breadcrumb;
@@ -9834,6 +10873,7 @@
     exports.ColorInput = ColorInput;
     exports.DataTable = DataTable;
     exports.DatePicker = DatePicker;
+    exports.DigitalClock = DigitalClock;
     exports.DoubleRangeSlider = DoubleRangeSlider;
     exports.Dropdown = Dropdown;
     exports.EmailInput = EmailInput;
@@ -9886,28 +10926,39 @@
     exports.ThemeSwitcher = ThemeSwitcher;
     exports.ThemeToggle = ThemeToggle;
     exports.TimePicker = TimePicker;
+    exports.TimeRangePicker = TimeRangePicker;
     exports.Timeline = Timeline;
     exports.Toast = Toast;
     exports.ToastComponent = ToastComponent;
+    exports.ToggleGroup = ToggleGroup;
     exports.Tooltip = Tooltip;
     exports.TooltipComponent = TooltipComponent;
     exports.TreeView = TreeView;
     exports.UrlInput = UrlInput;
     exports.Wizard = Wizard;
+    exports.addLeadingZero = addLeadingZero;
     exports.clearPortal = clearPortal;
     exports.createBreadcrumb = createBreadcrumb;
+    exports.formatTime = formatTime;
+    exports.generateHourOptions = generateHourOptions;
+    exports.generateMinuteOptions = generateMinuteOptions;
     exports.getDropdownStyles = getDropdownStyles;
     exports.getPortalContainer = getPortalContainer;
     exports.initPushpins = initPushpins;
     exports.initTooltips = initTooltips;
     exports.isNumeric = isNumeric;
+    exports.isTimeDisabled = isTimeDisabled;
     exports.isValidationError = isValidationError;
     exports.isValidationSuccess = isValidationSuccess;
     exports.padLeft = padLeft;
+    exports.parseTime = parseTime;
     exports.range = range;
     exports.releasePortalContainer = releasePortalContainer;
     exports.renderToPortal = renderToPortal;
+    exports.scrollToValue = scrollToValue;
+    exports.snapToNearestItem = snapToNearestItem;
     exports.sortOptions = sortOptions;
+    exports.timeToMinutes = timeToMinutes;
     exports.toast = toast;
     exports.uniqueId = uniqueId;
     exports.uuid4 = uuid4;