mithril-materialized 3.6.0 → 3.8.0

package/dist/index.esm.js

@@ -1606,7 +1606,7 @@ const Collection = () => {
     };
 };
 
-const defaultI18n$3 = {
+const defaultI18n$4 = {
     cancel: 'Cancel',
     clear: 'Clear',
     done: 'Ok',
@@ -1714,9 +1714,9 @@ const DatePicker = () => {
         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) => {
@@ -4517,7 +4517,7 @@ const Dropdown = () => {
             opacity: 1,
         };
     };
-    const updatePortalDropdown = (items, selectedLabel, onSelectItem) => {
+    const updatePortalDropdown = (items, selectedLabel, onSelectItem, maxHeight) => {
         if (!state.isInsideModal)
             return;
         // Clean up existing portal
@@ -4561,7 +4561,7 @@ const Dropdown = () => {
         // 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;
             },
@@ -4625,7 +4625,7 @@ const Dropdown = () => {
                         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,
@@ -5294,45 +5294,417 @@ const Parallax = () => {
     };
 };
 
-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;
@@ -5342,202 +5714,36 @@ const TimePicker = () => {
         }
         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;
@@ -5562,20 +5768,27 @@ const TimePicker = () => {
                     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());
@@ -5584,79 +5797,339 @@ const TimePicker = () => {
             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) => {
@@ -5668,7 +6141,7 @@ const TimePicker = () => {
             return;
         state.isOpen = true;
         updateTimeFromInput(inputValue);
-        showView('hours');
+        state.currentView = 'hours';
         if (options.onOpen)
             options.onOpen();
         if (options.onOpenStart)
@@ -5702,6 +6175,7 @@ const TimePicker = () => {
         return {
             view: ({ attrs }) => {
                 const { i18n, showClearBtn } = attrs;
+                const isDigitalMode = options.displayMode === 'digital';
                 return [
                     m('.modal-content.timepicker-container', [
                         m('.timepicker-digital-display', [
@@ -5709,7 +6183,12 @@ const TimePicker = () => {
                                 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;
                                         },
@@ -5717,7 +6196,12 @@ const TimePicker = () => {
                                     ':',
                                     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;
                                         },
@@ -5748,66 +6232,108 @@ const TimePicker = () => {
                                     ]),
                             ]),
                         ]),
-                        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),
+                                    ]),
                                 ]),
                             ]),
-                        ]),
                     ]),
                 ];
             },
@@ -5820,7 +6346,7 @@ const TimePicker = () => {
             m.redraw();
         }
     };
-    const renderPickerToPortal = (attrs) => {
+    const renderPickerToPortal = () => {
         const pickerModal = m('.timepicker-modal-wrapper', {
             style: {
                 position: 'fixed',
@@ -5881,11 +6407,6 @@ const TimePicker = () => {
                 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
@@ -5897,27 +6418,17 @@ const TimePicker = () => {
         },
         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);
@@ -6798,46 +7309,50 @@ const Tabs = () => {
 };
 
 // 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
@@ -7076,8 +7591,7 @@ const SearchSelect = () => {
                         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),
                     })),
@@ -7193,8 +7707,7 @@ const SearchSelect = () => {
                             ]
                             : []),
                         // List of filtered options
-                        ...displayedOptions.map((option, index) => m(DropdownOption, {
-                            // key: option.id,
+                        ...displayedOptions.map((option, index) => m(DropdownOption(), {
                             option,
                             index,
                             selectedIds,
@@ -7211,6 +7724,411 @@ const SearchSelect = () => {
     };
 };
 
+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);
@@ -9793,6 +10711,126 @@ const Rating = () => {
     };
 };
 
+/**
+ * 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
@@ -9814,4 +10852,4 @@ const isValidationError = (result) => !isValidationSuccess(result);
 // ============================================================================
 // All types are already exported via individual export declarations above
 
-export { AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, Timeline, Toast, ToastComponent, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, clearPortal, createBreadcrumb, getDropdownStyles, getPortalContainer, initPushpins, initTooltips, isNumeric, isValidationError, isValidationSuccess, padLeft, range, releasePortalContainer, renderToPortal, sortOptions, toast, uniqueId, uuid4 };
+export { AnalogClock, AnchorItem, Autocomplete, Breadcrumb, BreadcrumbManager, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DataTable, DatePicker, DigitalClock, DoubleRangeSlider, Dropdown, EmailInput, FileInput, FileUpload, FlatButton, FloatingActionButton, HelperText, Icon, IconButton, ImageList, InputCheckbox, Label, LargeButton, ListItem, Mandatory, Masonry, MaterialBox, MaterialIcon, ModalPanel, NumberInput, Options, OptionsList, Pagination, PaginationControls, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, Rating, RoundIconButton, SearchSelect, SecondaryContent, Select, Sidenav, SidenavItem, SidenavManager, SingleRangeSlider, SmallButton, Stepper, SubmitButton, Switch, Tabs, TextArea, TextInput, ThemeManager, ThemeSwitcher, ThemeToggle, TimePicker, TimeRangePicker, Timeline, Toast, ToastComponent, ToggleGroup, Tooltip, TooltipComponent, TreeView, UrlInput, Wizard, addLeadingZero, clearPortal, createBreadcrumb, formatTime, generateHourOptions, generateMinuteOptions, getDropdownStyles, getPortalContainer, initPushpins, initTooltips, isNumeric, isTimeDisabled, isValidationError, isValidationSuccess, padLeft, parseTime, range, releasePortalContainer, renderToPortal, scrollToValue, snapToNearestItem, sortOptions, timeToMinutes, toast, uniqueId, uuid4 };