mithril-materialized 2.0.0-beta.2 → 2.0.0-beta.5

package/dist/index.esm.js

@@ -34,6 +34,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
+// Utility functions for the library
 /**
  * Create a unique ID
  * @see https://stackoverflow.com/a/2117523/319711
@@ -1340,6 +1341,709 @@ const Collection = () => {
     };
 };
 
+const defaultI18n = {
+    cancel: 'Cancel',
+    clear: 'Clear',
+    done: 'Ok',
+    previousMonth: '\u2039',
+    nextMonth: '\u203a',
+    months: [
+        'January',
+        'February',
+        'March',
+        'April',
+        'May',
+        'June',
+        'July',
+        'August',
+        'September',
+        'October',
+        'November',
+        'December',
+    ],
+    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+    weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
+    weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    weekdaysAbbrev: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
+};
+// Utility functions based on Materialize CSS implementation
+const isDate = (obj) => {
+    return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
+};
+const isWeekend = (date) => {
+    const day = date.getDay();
+    return day === 0 || day === 6;
+};
+const setToStartOfDay = (date) => {
+    if (isDate(date))
+        date.setHours(0, 0, 0, 0);
+};
+const getDaysInMonth = (year, month) => {
+    return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
+};
+const isLeapYear = (year) => {
+    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+};
+const compareDates = (a, b) => {
+    return a.getTime() === b.getTime();
+};
+// Week number calculation utilities
+const getWeekNumber = (date, weekNumbering, firstDay) => {
+    if (weekNumbering === 'iso') {
+        return getISOWeekNumber(date);
+    }
+    else {
+        return getLocalWeekNumber(date, firstDay);
+    }
+};
+const getISOWeekNumber = (date) => {
+    // ISO 8601 week numbering
+    const tempDate = new Date(date.getTime());
+    const dayNum = (date.getDay() + 6) % 7; // Make Monday = 0
+    tempDate.setDate(tempDate.getDate() - dayNum + 3); // Thursday in target week
+    const firstThursday = new Date(tempDate.getFullYear(), 0, 4); // First Thursday of year
+    const firstThursdayDayNum = (firstThursday.getDay() + 6) % 7; // Make Monday = 0
+    firstThursday.setDate(firstThursday.getDate() - firstThursdayDayNum + 3);
+    return Math.ceil((tempDate.getTime() - firstThursday.getTime()) / (7 * 24 * 60 * 60 * 1000)) + 1;
+};
+const getLocalWeekNumber = (date, firstDay) => {
+    // Local week numbering based on firstDay setting
+    const tempDate = new Date(date.getFullYear(), 0, 1);
+    const firstDayOfYear = tempDate.getDay();
+    // Calculate days from first day of year to the start of first week
+    let daysToFirstWeek = (firstDay - firstDayOfYear + 7) % 7;
+    if (daysToFirstWeek === 0 && firstDayOfYear !== firstDay) {
+        daysToFirstWeek = 7;
+    }
+    const firstWeekStart = new Date(tempDate.getTime());
+    firstWeekStart.setDate(1 + daysToFirstWeek);
+    if (date < firstWeekStart) {
+        // Date is in the last week of previous year
+        return getLocalWeekNumber(new Date(date.getFullYear() - 1, 11, 31), firstDay);
+    }
+    const daysDiff = Math.floor((date.getTime() - firstWeekStart.getTime()) / (24 * 60 * 60 * 1000));
+    return Math.floor(daysDiff / 7) + 1;
+};
+/**
+ * Enhanced DatePicker component based on Materialize CSS datepicker
+ */
+const DatePicker = () => {
+    let state;
+    const mergeOptions = (attrs) => {
+        // Handle HTML attributes
+        let yearRange = 10;
+        if (attrs.yearrange) {
+            const parts = attrs.yearrange.split(',');
+            if (parts.length === 2) {
+                yearRange = [parseInt(parts[0], 10), parseInt(parts[1], 10)];
+            }
+        }
+        else if (attrs.yearRange) {
+            yearRange = attrs.yearRange;
+        }
+        // Handle format - priority: format attribute > displayFormat > default
+        let finalFormat = 'mmm dd, yyyy';
+        if (attrs.format) {
+            finalFormat = attrs.format;
+        }
+        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, onSelect: null, onOpen: null, onClose: null }, attrs);
+        // Merge i18n properly
+        merged.i18n = Object.assign(Object.assign({}, defaultI18n), attrs.i18n);
+        return merged;
+    };
+    const toString = (date, format) => {
+        if (!date || !isDate(date)) {
+            return '';
+        }
+        // Split format into tokens - match longer patterns first
+        const formatTokens = /(dddd|ddd|dd|d|mmmm|mmm|mm|m|yyyy|yy)/g;
+        let result = format;
+        // Replace all format tokens with actual values
+        result = result.replace(formatTokens, (match) => {
+            if (state.formats[match]) {
+                return String(state.formats[match]());
+            }
+            return match;
+        });
+        return result;
+    };
+    const setDate = (date, preventOnSelect = false, options) => {
+        if (!date) {
+            state.date = null;
+            return;
+        }
+        if (typeof date === 'string') {
+            date = new Date(Date.parse(date));
+        }
+        if (!isDate(date)) {
+            return;
+        }
+        const min = options.minDate;
+        const max = options.maxDate;
+        if (isDate(min) && date < min) {
+            date = min;
+        }
+        else if (isDate(max) && date > max) {
+            date = max;
+        }
+        state.date = new Date(date.getTime());
+        setToStartOfDay(state.date);
+        gotoDate(state.date);
+        if (!preventOnSelect && options.onSelect) {
+            options.onSelect(state.date);
+        }
+    };
+    const gotoDate = (date) => {
+        if (!isDate(date)) {
+            return;
+        }
+        state.calendars = [
+            {
+                month: date.getMonth(),
+                year: date.getFullYear(),
+            },
+        ];
+    };
+    const nextMonth = () => {
+        state.calendars[0].month++;
+        adjustCalendars();
+    };
+    const prevMonth = () => {
+        state.calendars[0].month--;
+        adjustCalendars();
+    };
+    const adjustCalendars = () => {
+        state.calendars[0] = adjustCalendar(state.calendars[0]);
+    };
+    const adjustCalendar = (calendar) => {
+        if (calendar.month < 0) {
+            calendar.year -= Math.ceil(Math.abs(calendar.month) / 12);
+            calendar.month += 12;
+        }
+        if (calendar.month > 11) {
+            calendar.year += Math.floor(Math.abs(calendar.month) / 12);
+            calendar.month -= 12;
+        }
+        return calendar;
+    };
+    const Day = () => {
+        return {
+            view: ({ attrs }) => {
+                const { opts, options } = attrs;
+                const arr = [];
+                let ariaSelected = 'false';
+                if (opts.isEmpty) {
+                    if (opts.showDaysInNextAndPreviousMonths) {
+                        arr.push('is-outside-current-month');
+                        arr.push('is-selection-disabled');
+                    }
+                    else {
+                        return m('td.is-empty');
+                    }
+                }
+                if (opts.isDisabled) {
+                    arr.push('is-disabled');
+                }
+                if (opts.isToday) {
+                    arr.push('is-today');
+                }
+                if (opts.isSelected) {
+                    arr.push('is-selected');
+                    ariaSelected = 'true';
+                }
+                if (opts.hasEvent) {
+                    arr.push('has-event');
+                }
+                return m('td', {
+                    'data-day': opts.day,
+                    class: arr.join(' '),
+                    'aria-selected': ariaSelected,
+                }, [
+                    m('button.datepicker-day-button', {
+                        type: 'button',
+                        'data-year': opts.year,
+                        'data-month': opts.month,
+                        'data-day': opts.day,
+                        onclick: (e) => {
+                            const target = e.target;
+                            if (!opts.isDisabled) {
+                                const year = parseInt(target.getAttribute('data-year') || '0', 10);
+                                const month = parseInt(target.getAttribute('data-month') || '0', 10);
+                                const day = parseInt(target.getAttribute('data-day') || '0', 10);
+                                const selectedDate = new Date(year, month, day);
+                                setDate(selectedDate, false, options);
+                                if (options.autoClose) {
+                                    state.isOpen = false;
+                                }
+                            }
+                        },
+                    }, opts.day),
+                ]);
+            }
+        };
+    };
+    const Calendar = () => {
+        return {
+            view: ({ attrs }) => {
+                const { year, month, options, randId } = attrs;
+                const now = new Date();
+                const days = getDaysInMonth(year, month);
+                let before = new Date(year, month, 1).getDay();
+                const data = [];
+                let row = [];
+                setToStartOfDay(now);
+                if (options.firstDay > 0) {
+                    before -= options.firstDay;
+                    if (before < 0) {
+                        before += 7;
+                    }
+                }
+                const previousMonth = month === 0 ? 11 : month - 1;
+                const nextMonth = month === 11 ? 0 : month + 1;
+                const yearOfPreviousMonth = month === 0 ? year - 1 : year;
+                const yearOfNextMonth = month === 11 ? year + 1 : year;
+                const daysInPreviousMonth = getDaysInMonth(yearOfPreviousMonth, previousMonth);
+                let cells = days + before;
+                let after = cells;
+                while (after > 7) {
+                    after -= 7;
+                }
+                cells += 7 - after;
+                for (let i = 0, r = 0; i < cells; i++) {
+                    const day = new Date(year, month, 1 + (i - before));
+                    const isSelected = isDate(state.date) ? compareDates(day, state.date) : false;
+                    const isToday = compareDates(day, now);
+                    const isEmpty = i < before || i >= days + before;
+                    let dayNumber = 1 + (i - before);
+                    let monthNumber = month;
+                    let yearNumber = year;
+                    if (isEmpty) {
+                        if (i < before) {
+                            dayNumber = daysInPreviousMonth + dayNumber;
+                            monthNumber = previousMonth;
+                            yearNumber = yearOfPreviousMonth;
+                        }
+                        else {
+                            dayNumber = dayNumber - days;
+                            monthNumber = nextMonth;
+                            yearNumber = yearOfNextMonth;
+                        }
+                    }
+                    const isDisabled = (options.minDate && day < options.minDate) ||
+                        (options.maxDate && day > options.maxDate) ||
+                        (options.disableWeekends && isWeekend(day)) ||
+                        (options.disableDayFn && options.disableDayFn(day));
+                    const dayConfig = {
+                        day: dayNumber,
+                        month: monthNumber,
+                        year: yearNumber,
+                        hasEvent: false,
+                        isSelected: isSelected,
+                        isToday: isToday,
+                        isDisabled: isDisabled,
+                        isEmpty: isEmpty,
+                        showDaysInNextAndPreviousMonths: false,
+                    };
+                    // Add week number cell at the beginning of each row
+                    if (r === 0 && options.showWeekNumbers) {
+                        const weekDate = new Date(yearNumber, monthNumber, dayNumber);
+                        const weekNum = getWeekNumber(weekDate, options.weekNumbering, options.firstDay);
+                        row.push(m('td.datepicker-week-number', {
+                            title: `Week ${weekNum}`
+                        }, weekNum));
+                    }
+                    row.push(m(Day, { opts: dayConfig, options }));
+                    if (++r === 7) {
+                        data.push(m('tr.datepicker-row', row));
+                        row = [];
+                        r = 0;
+                    }
+                }
+                const weekdayHeaders = [];
+                // Add week number header if enabled
+                if (options.showWeekNumbers) {
+                    weekdayHeaders.push(m('th.datepicker-week-header', { scope: 'col', title: 'Week' }, 'Wk'));
+                }
+                for (let i = 0; i < 7; i++) {
+                    let day = i + options.firstDay;
+                    while (day >= 7) {
+                        day -= 7;
+                    }
+                    weekdayHeaders.push(m('th', { scope: 'col' }, [
+                        m('abbr', { title: options.i18n.weekdays[day] }, options.i18n.weekdaysAbbrev[day]),
+                    ]));
+                }
+                return m('.datepicker-table-wrapper', [
+                    m('table.datepicker-table', {
+                        cellpadding: '0',
+                        cellspacing: '0',
+                        role: 'grid',
+                        'aria-labelledby': randId || 'datepicker-controls',
+                        class: options.showWeekNumbers ? 'with-week-numbers' : '',
+                    }, [m('thead', [m('tr', weekdayHeaders)]), m('tbody', data)]),
+                ]);
+            }
+        };
+    };
+    const DateDisplay = () => {
+        return {
+            view: ({ attrs }) => {
+                const { options } = attrs;
+                const displayDate = isDate(state.date) ? state.date : new Date();
+                const day = options.i18n.weekdaysShort[displayDate.getDay()];
+                const month = options.i18n.monthsShort[displayDate.getMonth()];
+                const date = displayDate.getDate();
+                return m('.datepicker-date-display', [
+                    m('span.year-text', displayDate.getFullYear()),
+                    m('span.date-text', `${day}, ${month} ${date}`),
+                ]);
+            }
+        };
+    };
+    const DateControls = () => {
+        return {
+            view: ({ attrs }) => {
+                const { options, randId } = attrs;
+                const calendar = state.calendars[0];
+                const year = calendar.year;
+                const month = calendar.month;
+                // Year range calculation
+                let yearStart, yearEnd;
+                if (Array.isArray(options.yearRange)) {
+                    yearStart = options.yearRange[0];
+                    yearEnd = options.yearRange[1];
+                }
+                else {
+                    yearStart = year - options.yearRange;
+                    yearEnd = year + options.yearRange;
+                }
+                return m('.datepicker-controls', {
+                    id: randId,
+                    role: 'heading',
+                    'aria-live': 'assertive',
+                }, [
+                    m('button.month-prev', {
+                        type: 'button',
+                        onclick: (e) => {
+                            e.preventDefault();
+                            prevMonth();
+                        },
+                    }, m('svg', { fill: '#000000', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' }, [
+                        m('path', { d: 'M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z' }),
+                        m('path', { d: 'M0-.5h24v24H0z', fill: 'none' }),
+                    ])),
+                    m('.selects-container', [
+                        // Month select wrapper
+                        m('.select-wrapper.select-month', [
+                            m('input.select-dropdown.dropdown-trigger', {
+                                type: 'text',
+                                readonly: true,
+                                value: options.i18n.months[month],
+                                onclick: (e) => {
+                                    e.preventDefault();
+                                    state.monthDropdownOpen = !state.monthDropdownOpen;
+                                    state.yearDropdownOpen = false; // Close year dropdown
+                                },
+                            }),
+                            // Custom dropdown menu
+                            state.monthDropdownOpen &&
+                                m('.dropdown-content', options.i18n.months.map((monthName, index) => m('.dropdown-item', {
+                                    key: index,
+                                    class: index === month ? 'selected' : '',
+                                    onclick: (e) => {
+                                        e.stopPropagation();
+                                        gotoMonth(index);
+                                        state.monthDropdownOpen = false;
+                                    },
+                                }, monthName))),
+                        ]),
+                        // Year select wrapper
+                        m('.select-wrapper.select-year', [
+                            m('input.select-dropdown.dropdown-trigger', {
+                                type: 'text',
+                                readonly: true,
+                                value: year.toString(),
+                                onclick: (e) => {
+                                    e.preventDefault();
+                                    state.yearDropdownOpen = !state.yearDropdownOpen;
+                                    state.monthDropdownOpen = false; // Close month dropdown
+                                },
+                            }),
+                            // Custom dropdown menu
+                            state.yearDropdownOpen &&
+                                m('.dropdown-content', range(yearStart, yearEnd).map((i) => m('.dropdown-item', {
+                                    key: i,
+                                    class: i === year ? 'selected' : '',
+                                    onclick: (e) => {
+                                        e.stopPropagation();
+                                        gotoYear(i);
+                                        state.yearDropdownOpen = false;
+                                    },
+                                }, i))),
+                        ]),
+                    ]),
+                    m('button.month-next', {
+                        type: 'button',
+                        onclick: (e) => {
+                            e.preventDefault();
+                            nextMonth();
+                        },
+                    }, m('svg', { fill: '#000000', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' }, [
+                        m('path', { d: 'M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z' }),
+                        m('path', { d: 'M0-.25h24v24H0z', fill: 'none' }),
+                    ])),
+                ]);
+            }
+        };
+    };
+    const gotoMonth = (month) => {
+        if (!isNaN(month)) {
+            state.calendars[0].month = month;
+            adjustCalendars();
+            // Update selected date if one exists
+            if (state.date && isDate(state.date)) {
+                const currentDay = state.date.getDate();
+                const newYear = state.calendars[0].year;
+                const daysInNewMonth = getDaysInMonth(newYear, month);
+                // Adjust day if it doesn't exist in the new month (e.g., Jan 31 -> Feb 28)
+                const adjustedDay = Math.min(currentDay, daysInNewMonth);
+                const newDate = new Date(newYear, month, adjustedDay);
+                state.date = newDate;
+                setToStartOfDay(state.date);
+            }
+        }
+    };
+    const gotoYear = (year) => {
+        if (!isNaN(year)) {
+            state.calendars[0].year = year;
+            adjustCalendars();
+            // Update selected date if one exists
+            if (state.date && isDate(state.date)) {
+                const currentMonth = state.date.getMonth();
+                const currentDay = state.date.getDate();
+                const daysInNewMonth = getDaysInMonth(year, currentMonth);
+                // Adjust day if it doesn't exist in the new year/month (e.g., leap year changes)
+                const adjustedDay = Math.min(currentDay, daysInNewMonth);
+                const newDate = new Date(year, currentMonth, adjustedDay);
+                state.date = newDate;
+                setToStartOfDay(state.date);
+            }
+        }
+    };
+    const handleDocumentClick = (e) => {
+        const target = e.target;
+        if (!target.closest('.select-wrapper') && !target.closest('.dropdown-content')) {
+            state.monthDropdownOpen = false;
+            state.yearDropdownOpen = false;
+        }
+    };
+    return {
+        oninit: (vnode) => {
+            const attrs = vnode.attrs;
+            const options = mergeOptions(attrs);
+            state = {
+                id: uniqueId(),
+                isOpen: false,
+                date: null,
+                calendars: [{ month: 0, year: 0 }],
+                monthDropdownOpen: false,
+                yearDropdownOpen: false,
+                formats: {
+                    d: () => { var _a; return ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDate()) || 0; },
+                    dd: () => {
+                        var _a;
+                        const d = ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDate()) || 0;
+                        return (d < 10 ? '0' : '') + d;
+                    },
+                    ddd: () => { var _a; return options.i18n.weekdaysShort[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDay()) || 0]; },
+                    dddd: () => { var _a; return options.i18n.weekdays[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDay()) || 0]; },
+                    m: () => { var _a; return (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0) + 1; },
+                    mm: () => {
+                        var _a;
+                        const m = (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0) + 1;
+                        return (m < 10 ? '0' : '') + m;
+                    },
+                    mmm: () => { var _a; return options.i18n.monthsShort[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0]; },
+                    mmmm: () => { var _a; return options.i18n.months[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0]; },
+                    yy: () => { var _a; return ('' + (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getFullYear()) || 0)).slice(2); },
+                    yyyy: () => { var _a; return ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getFullYear()) || 0; },
+                },
+            };
+            // Initialize date
+            let defaultDate = attrs.defaultDate;
+            if (!defaultDate && attrs.initialValue) {
+                defaultDate = new Date(attrs.initialValue);
+            }
+            if (isDate(defaultDate)) {
+                // Always set the date if we have initialValue or defaultDate
+                setDate(defaultDate, true, options);
+            }
+            else {
+                gotoDate(new Date());
+            }
+            // Add document click listener to close dropdowns
+            document.addEventListener('click', handleDocumentClick);
+        },
+        onremove: () => {
+            // Clean up event listener
+            document.removeEventListener('click', handleDocumentClick);
+        },
+        view: (vnode) => {
+            const attrs = vnode.attrs;
+            const options = mergeOptions(attrs);
+            const { id = state.id, label, dateLabel, placeholder, disabled, readonly, required, iconName, helperText, onchange, oninput, className: cn1, class: cn2, } = attrs;
+            const className = cn1 || cn2 || 'col s12';
+            // Calculate display value for the input
+            let displayValue = '';
+            if (state.date) {
+                displayValue = toString(state.date, options.format);
+            }
+            // Custom date format handling
+            if (attrs.displayFormat) {
+                // const formatRegex = /(yyyy|mm|dd)/gi;
+                let customDisplayValue = attrs.displayFormat;
+                if (state.date) {
+                    customDisplayValue = customDisplayValue
+                        .replace(/yyyy/gi, state.date.getFullYear().toString())
+                        .replace(/mm/gi, (state.date.getMonth() + 1).toString().padStart(2, '0'))
+                        .replace(/dd/gi, state.date.getDate().toString().padStart(2, '0'));
+                    displayValue = customDisplayValue;
+                }
+            }
+            return m('.input-field', {
+                className,
+            }, [
+                // Icon prefix
+                iconName && m('i.material-icons.prefix', iconName),
+                // Date input field
+                m('input.datepicker', {
+                    id,
+                    type: 'text',
+                    value: displayValue,
+                    placeholder,
+                    disabled,
+                    readonly,
+                    required,
+                    onclick: () => {
+                        if (!disabled && !readonly) {
+                            state.isOpen = true;
+                            if (options.onOpen)
+                                options.onOpen();
+                        }
+                    },
+                    oninput: (e) => {
+                        if (oninput) {
+                            const target = e.target;
+                            oninput(target.value);
+                        }
+                    },
+                    onchange: (e) => {
+                        if (onchange) {
+                            const target = e.target;
+                            // Try to parse the input value
+                            const date = new Date(target.value);
+                            if (isDate(date)) {
+                                setDate(date, false, options);
+                                onchange(toString(date, 'yyyy-mm-dd')); // Always return ISO format
+                            }
+                            else {
+                                onchange(target.value);
+                            }
+                        }
+                    },
+                }),
+                // Label
+                (label || dateLabel) &&
+                    m('label', {
+                        for: id,
+                        class: displayValue || placeholder ? 'active' : '',
+                    }, label || dateLabel),
+                // Helper text
+                helperText && m('span.helper-text', helperText),
+                // Modal datepicker
+                state.isOpen && [
+                    m('.modal.datepicker-modal.open', {
+                        id: `modal-${state.id}`,
+                        tabindex: 0,
+                        style: {
+                            zIndex: 1003,
+                            display: 'block',
+                            opacity: 1,
+                            top: '10%',
+                            transform: 'scaleX(1) scaleY(1)',
+                        },
+                    }, [
+                        m('.modal-content.datepicker-container', {
+                            onclick: (e) => {
+                                // Close dropdowns when clicking anywhere in the modal content
+                                const target = e.target;
+                                if (!target.closest('.select-wrapper') && !target.closest('.dropdown-content')) {
+                                    state.monthDropdownOpen = false;
+                                    state.yearDropdownOpen = false;
+                                }
+                            },
+                        }, [
+                            m(DateDisplay, { options }),
+                            m('.datepicker-calendar-container', [
+                                m('.datepicker-calendar', [
+                                    m(DateControls, { options, randId: `datepicker-title-${Math.random().toString(36).slice(2)}` }),
+                                    m(Calendar, { year: state.calendars[0].year, month: state.calendars[0].month, options }),
+                                ]),
+                                m('.datepicker-footer', [
+                                    options.showClearBtn &&
+                                        m('button.btn-flat.datepicker-clear.waves-effect', {
+                                            type: 'button',
+                                            style: '',
+                                            onclick: () => {
+                                                setDate(null, false, options);
+                                                state.isOpen = false;
+                                            },
+                                        }, options.i18n.clear),
+                                    m('button.btn-flat.datepicker-cancel.waves-effect', {
+                                        type: 'button',
+                                        onclick: () => {
+                                            state.isOpen = false;
+                                            if (options.onClose)
+                                                options.onClose();
+                                        },
+                                    }, options.i18n.cancel),
+                                    m('button.btn-flat.datepicker-done.waves-effect', {
+                                        type: 'button',
+                                        onclick: () => {
+                                            state.isOpen = false;
+                                            if (state.date && onchange) {
+                                                onchange(toString(state.date, 'yyyy-mm-dd')); // Always return ISO format
+                                            }
+                                            if (options.onClose)
+                                                options.onClose();
+                                        },
+                                    }, options.i18n.done),
+                                ]),
+                            ]),
+                        ]),
+                    ]),
+                    // Modal overlay
+                    m('.modal-overlay', {
+                        style: {
+                            zIndex: 1002,
+                            display: 'block',
+                            opacity: 0.5,
+                        },
+                        onclick: () => {
+                            state.isOpen = false;
+                            if (options.onClose)
+                                options.onClose();
+                        },
+                    }),
+                ],
+            ]);
+        },
+    };
+};
+
 /** Pure TypeScript Dropdown component - no Materialize dependencies */
 const Dropdown = () => {
     const state = {
@@ -1496,6 +2200,7 @@ const Dropdown = () => {
                     m(MaterialIcon, {
                         name: 'caret',
                         direction: 'down',
+                        class: 'caret',
                     }),
                 ]),
             ]);
@@ -2566,698 +3271,624 @@ const Parallax = () => {
     };
 };
 
-const defaultI18n = {
-    cancel: 'Cancel',
-    clear: 'Clear',
-    done: 'Ok',
-    previousMonth: '\u2039',
-    nextMonth: '\u203a',
-    months: [
-        'January',
-        'February',
-        'March',
-        'April',
-        'May',
-        'June',
-        'July',
-        'August',
-        'September',
-        'October',
-        'November',
-        'December',
-    ],
-    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
-    weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
-    weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
-    weekdaysAbbrev: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
-};
-// Utility functions based on Materialize CSS implementation
-const isDate = (obj) => {
-    return /Date/.test(Object.prototype.toString.call(obj)) && !isNaN(obj.getTime());
-};
-const isWeekend = (date) => {
-    const day = date.getDay();
-    return day === 0 || day === 6;
-};
-const setToStartOfDay = (date) => {
-    if (isDate(date))
-        date.setHours(0, 0, 0, 0);
-};
-const getDaysInMonth = (year, month) => {
-    return [31, isLeapYear(year) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31][month];
-};
-const isLeapYear = (year) => {
-    return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
-};
-const compareDates = (a, b) => {
-    return a.getTime() === b.getTime();
+const defaultOptions = {
+    dialRadius: 135,
+    outerRadius: 105,
+    innerRadius: 70,
+    tickRadius: 20,
+    duration: 350,
+    container: null,
+    defaultTime: 'now',
+    fromNow: 0,
+    showClearBtn: false,
+    i18n: {
+        cancel: 'Cancel',
+        clear: 'Clear',
+        done: 'Ok',
+    },
+    autoClose: false,
+    twelveHour: true,
+    vibrate: true,
+    onOpen: () => { },
+    onOpenStart: () => { },
+    onOpenEnd: () => { },
+    onCloseStart: () => { },
+    onCloseEnd: () => { },
+    onSelect: () => { },
 };
 /**
- * Enhanced DatePicker component based on Materialize CSS datepicker
+ * TimePicker component based on original Materialize CSS timepicker
  */
-const DatePicker = () => {
+const TimePicker = () => {
     let state;
-    const mergeOptions = (attrs) => {
-        // Handle HTML attributes
-        let yearRange = 10;
-        if (attrs.yearrange) {
-            const parts = attrs.yearrange.split(',');
-            if (parts.length === 2) {
-                yearRange = [parseInt(parts[0], 10), parseInt(parts[1], 10)];
-            }
-        }
-        else if (attrs.yearRange) {
-            yearRange = attrs.yearRange;
-        }
-        // Handle format - priority: format attribute > displayFormat > default
-        let finalFormat = 'mmm dd, yyyy';
-        if (attrs.format) {
-            finalFormat = attrs.format;
-        }
-        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, i18n: defaultI18n, onSelect: null, onOpen: null, onClose: null }, attrs);
-        // Merge i18n properly
-        merged.i18n = Object.assign(Object.assign({}, defaultI18n), attrs.i18n);
-        return merged;
+    let options;
+    const addLeadingZero = (num) => {
+        return (num < 10 ? '0' : '') + num;
     };
-    const toString = (date, format) => {
-        if (!date || !isDate(date)) {
-            return '';
-        }
-        // Split format into tokens - match longer patterns first
-        const formatTokens = /(dddd|ddd|dd|d|mmmm|mmm|mm|m|yyyy|yy)/g;
-        let result = format;
-        // Replace all format tokens with actual values
-        result = result.replace(formatTokens, (match) => {
-            if (state.formats[match]) {
-                return String(state.formats[match]());
-            }
-            return match;
-        });
-        return result;
+    const createSVGEl = (name) => {
+        const svgNS = 'http://www.w3.org/2000/svg';
+        return document.createElementNS(svgNS, name);
     };
-    const setDate = (date, preventOnSelect = false, options) => {
-        if (!date) {
-            state.date = null;
-            return;
-        }
-        if (typeof date === 'string') {
-            date = new Date(Date.parse(date));
-        }
-        if (!isDate(date)) {
-            return;
-        }
-        const min = options.minDate;
-        const max = options.maxDate;
-        if (isDate(min) && date < min) {
-            date = min;
+    const getPos = (e) => {
+        const touchEvent = e;
+        const mouseEvent = e;
+        if (touchEvent.targetTouches && touchEvent.targetTouches.length >= 1) {
+            return { x: touchEvent.targetTouches[0].clientX, y: touchEvent.targetTouches[0].clientY };
         }
-        else if (isDate(max) && date > max) {
-            date = max;
+        return { x: mouseEvent.clientX, y: mouseEvent.clientY };
+    };
+    const vibrate = () => {
+        if (state.vibrateTimer) {
+            clearTimeout(state.vibrateTimer);
         }
-        state.date = new Date(date.getTime());
-        setToStartOfDay(state.date);
-        gotoDate(state.date);
-        if (!preventOnSelect && options.onSelect) {
-            options.onSelect(state.date);
+        if (options.vibrate && navigator.vibrate) {
+            navigator.vibrate(10);
+            state.vibrateTimer = window.setTimeout(() => {
+                state.vibrateTimer = undefined;
+            }, 100);
         }
     };
-    const gotoDate = (date) => {
-        if (!isDate(date)) {
+    const handleClockClickStart = (e) => {
+        e.preventDefault();
+        if (!state.plate)
             return;
-        }
-        state.calendars = [
-            {
-                month: date.getMonth(),
-                year: date.getFullYear(),
-            },
-        ];
-    };
-    const nextMonth = () => {
-        state.calendars[0].month++;
-        adjustCalendars();
-    };
-    const prevMonth = () => {
-        state.calendars[0].month--;
-        adjustCalendars();
-    };
-    const adjustCalendars = () => {
-        state.calendars[0] = adjustCalendar(state.calendars[0]);
+        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, false);
+        document.addEventListener('mousemove', handleDocumentClickMove);
+        document.addEventListener('touchmove', handleDocumentClickMove);
+        document.addEventListener('mouseup', handleDocumentClickEnd);
+        document.addEventListener('touchend', handleDocumentClickEnd);
     };
-    const adjustCalendar = (calendar) => {
-        if (calendar.month < 0) {
-            calendar.year -= Math.ceil(Math.abs(calendar.month) / 12);
-            calendar.month += 12;
-        }
-        if (calendar.month > 11) {
-            calendar.year += Math.floor(Math.abs(calendar.month) / 12);
-            calendar.month -= 12;
-        }
-        return calendar;
+    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, false);
     };
-    const renderDay = (opts, options) => {
-        const arr = [];
-        let ariaSelected = 'false';
-        if (opts.isEmpty) {
-            {
-                return m('td.is-empty');
+    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);
         }
-        if (opts.isDisabled) {
-            arr.push('is-disabled');
-        }
-        if (opts.isToday) {
-            arr.push('is-today');
-        }
-        if (opts.isSelected) {
-            arr.push('is-selected');
-            ariaSelected = 'true';
-        }
-        return m('td', {
-            'data-day': opts.day,
-            class: arr.join(' '),
-            'aria-selected': ariaSelected,
-        }, [
-            m('button.datepicker-day-button', {
-                type: 'button',
-                'data-year': opts.year,
-                'data-month': opts.month,
-                'data-day': opts.day,
-                onclick: (e) => {
-                    const target = e.target;
-                    if (!opts.isDisabled) {
-                        const year = parseInt(target.getAttribute('data-year') || '0', 10);
-                        const month = parseInt(target.getAttribute('data-month') || '0', 10);
-                        const day = parseInt(target.getAttribute('data-day') || '0', 10);
-                        const selectedDate = new Date(year, month, day);
-                        setDate(selectedDate, false, options);
-                        if (options.autoClose) {
-                            state.isOpen = false;
-                        }
-                    }
-                },
-            }, opts.day),
-        ]);
     };
-    const renderCalendar = (year, month, options, randId) => {
-        const now = new Date();
-        const days = getDaysInMonth(year, month);
-        let before = new Date(year, month, 1).getDay();
-        const data = [];
-        let row = [];
-        setToStartOfDay(now);
-        if (options.firstDay > 0) {
-            before -= options.firstDay;
-            if (before < 0) {
-                before += 7;
+    const updateTimeFromInput = (inputValue) => {
+        let value = ((inputValue || options.defaultTime || '') + '').split(':');
+        if (options.twelveHour && value.length > 1) {
+            if (value[1].toUpperCase().indexOf('AM') > -1) {
+                state.amOrPm = 'AM';
+            }
+            else if (value[1].toUpperCase().indexOf('PM') > -1) {
+                state.amOrPm = 'PM';
             }
+            value[1] = value[1].replace('AM', '').replace('PM', '').trim();
         }
-        const previousMonth = month === 0 ? 11 : month - 1;
-        const nextMonth = month === 11 ? 0 : month + 1;
-        const yearOfPreviousMonth = month === 0 ? year - 1 : year;
-        const yearOfNextMonth = month === 11 ? year + 1 : year;
-        const daysInPreviousMonth = getDaysInMonth(yearOfPreviousMonth, previousMonth);
-        let cells = days + before;
-        let after = cells;
-        while (after > 7) {
-            after -= 7;
-        }
-        cells += 7 - after;
-        for (let i = 0, r = 0; i < cells; i++) {
-            const day = new Date(year, month, 1 + (i - before));
-            const isSelected = isDate(state.date) ? compareDates(day, state.date) : false;
-            const isToday = compareDates(day, now);
-            const isEmpty = i < before || i >= days + before;
-            let dayNumber = 1 + (i - before);
-            let monthNumber = month;
-            let yearNumber = year;
-            if (isEmpty) {
-                if (i < before) {
-                    dayNumber = daysInPreviousMonth + dayNumber;
-                    monthNumber = previousMonth;
-                    yearNumber = yearOfPreviousMonth;
-                }
-                else {
-                    dayNumber = dayNumber - days;
-                    monthNumber = nextMonth;
-                    yearNumber = yearOfNextMonth;
-                }
+        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';
             }
-            const isDisabled = (options.minDate && day < options.minDate) ||
-                (options.maxDate && day > options.maxDate) ||
-                (options.disableWeekends && isWeekend(day)) ||
-                (options.disableDayFn && options.disableDayFn(day));
-            const dayConfig = {
-                day: dayNumber,
-                month: monthNumber,
-                year: yearNumber,
-                isSelected: isSelected,
-                isToday: isToday,
-                isDisabled: isDisabled,
-                isEmpty: isEmpty};
-            row.push(renderDay(dayConfig, options));
-            if (++r === 7) {
-                data.push(m('tr.datepicker-row', row));
-                row = [];
-                r = 0;
+        }
+        let hours = +value[0] || 0;
+        let minutes = +value[1] || 0;
+        // Handle 24-hour to 12-hour conversion if needed
+        if (options.twelveHour && hours >= 12) {
+            state.amOrPm = 'PM';
+            if (hours > 12) {
+                hours = hours - 12;
             }
         }
-        const weekdayHeaders = [];
-        for (let i = 0; i < 7; i++) {
-            let day = i + options.firstDay;
-            while (day >= 7) {
-                day -= 7;
+        else if (options.twelveHour && hours < 12) {
+            state.amOrPm = 'AM';
+            if (hours === 0) {
+                hours = 12;
             }
-            weekdayHeaders.push(m('th', { scope: 'col' }, [
-                m('abbr', { title: options.i18n.weekdays[day] }, options.i18n.weekdaysAbbrev[day]),
-            ]));
         }
-        return m('.datepicker-table-wrapper', [
-            m('table.datepicker-table', {
-                cellpadding: '0',
-                cellspacing: '0',
-                role: 'grid',
-                'aria-labelledby': 'datepicker-controls',
-            }, [m('thead', [m('tr', weekdayHeaders)]), m('tbody', data)]),
-        ]);
-    };
-    const renderDateDisplay = (options) => {
-        const displayDate = isDate(state.date) ? state.date : new Date();
-        const day = options.i18n.weekdaysShort[displayDate.getDay()];
-        const month = options.i18n.monthsShort[displayDate.getMonth()];
-        const date = displayDate.getDate();
-        return m('.datepicker-date-display', [
-            m('span.year-text', displayDate.getFullYear()),
-            m('span.date-text', `${day}, ${month} ${date}`),
-        ]);
-    };
-    const renderControls = (options, randId) => {
-        const calendar = state.calendars[0];
-        const year = calendar.year;
-        const month = calendar.month;
-        // Month options
-        const monthOptions = [];
-        for (let i = 0; i < 12; i++) {
-            monthOptions.push(m('option', {
-                value: i,
-                selected: i === month ? 'selected' : undefined,
-            }, options.i18n.months[i]));
-        }
-        // Year options
-        const yearOptions = [];
-        let yearStart, yearEnd;
-        if (Array.isArray(options.yearRange)) {
-            yearStart = options.yearRange[0];
-            yearEnd = options.yearRange[1];
+        state.hours = hours;
+        state.minutes = minutes;
+        if (state.spanHours) {
+            state.spanHours.innerHTML = state.hours.toString();
         }
-        else {
-            yearStart = year - options.yearRange;
-            yearEnd = year + options.yearRange;
-        }
-        for (let i = yearStart; i <= yearEnd; i++) {
-            yearOptions.push(m('option', {
-                value: i,
-                selected: i === year ? 'selected' : undefined,
-            }, i));
-        }
-        return m('.datepicker-controls', {
-            id: randId,
-            role: 'heading',
-            'aria-live': 'assertive',
-        }, [
-            m('button.month-prev', {
-                type: 'button',
-                onclick: (e) => {
-                    e.preventDefault();
-                    prevMonth();
-                },
-            }, m('svg', { fill: '#000000', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' }, [
-                m('path', { d: 'M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z' }),
-                m('path', { d: 'M0-.5h24v24H0z', fill: 'none' }),
-            ])),
-            m('.selects-container', [
-                // Month select wrapper
-                m('.select-wrapper.select-month', [
-                    m('input.select-dropdown.dropdown-trigger', {
-                        type: 'text',
-                        readonly: true,
-                        value: options.i18n.months[month],
-                        onclick: (e) => {
-                            e.preventDefault();
-                            state.monthDropdownOpen = !state.monthDropdownOpen;
-                            state.yearDropdownOpen = false; // Close year dropdown
-                        },
-                    }),
-                    // Custom dropdown menu
-                    state.monthDropdownOpen &&
-                        m('.dropdown-content', options.i18n.months.map((monthName, index) => m('.dropdown-item', {
-                            key: index,
-                            class: index === month ? 'selected' : '',
-                            onclick: (e) => {
-                                e.stopPropagation();
-                                gotoMonth(index);
-                                state.monthDropdownOpen = false;
-                            },
-                        }, monthName))),
-                ]),
-                // Year select wrapper
-                m('.select-wrapper.select-year', [
-                    m('input.select-dropdown.dropdown-trigger', {
-                        type: 'text',
-                        readonly: true,
-                        value: year.toString(),
-                        onclick: (e) => {
-                            e.preventDefault();
-                            state.yearDropdownOpen = !state.yearDropdownOpen;
-                            state.monthDropdownOpen = false; // Close month dropdown
-                        },
-                    }),
-                    // Custom dropdown menu
-                    state.yearDropdownOpen &&
-                        m('.dropdown-content', range(yearStart, yearEnd).map((i) => m('.dropdown-item', {
-                            key: i,
-                            class: i === year ? 'selected' : '',
-                            onclick: (e) => {
-                                e.stopPropagation();
-                                gotoYear(i);
-                                state.yearDropdownOpen = false;
-                            },
-                        }, i))),
-                ]),
-            ]),
-            m('button.month-next', {
-                type: 'button',
-                onclick: (e) => {
-                    e.preventDefault();
-                    nextMonth();
-                },
-            }, m('svg', { fill: '#000000', height: '24', viewBox: '0 0 24 24', width: '24', xmlns: 'http://www.w3.org/2000/svg' }, [
-                m('path', { d: 'M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z' }),
-                m('path', { d: 'M0-.25h24v24H0z', fill: 'none' }),
-            ])),
-        ]);
+        if (state.spanMinutes) {
+            state.spanMinutes.innerHTML = addLeadingZero(state.minutes);
+        }
+        updateAmPmView();
     };
-    const gotoMonth = (month) => {
-        if (!isNaN(month)) {
-            state.calendars[0].month = month;
-            adjustCalendars();
+    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 gotoYear = (year) => {
-        if (!isNaN(year)) {
-            state.calendars[0].year = year;
-            adjustCalendars();
+    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 handleDocumentClick = (e) => {
-        const target = e.target;
-        if (!target.closest('.select-wrapper') && !target.closest('.dropdown-content')) {
-            state.monthDropdownOpen = false;
-            state.yearDropdownOpen = false;
+    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);
         }
     };
-    return {
-        oninit: (vnode) => {
-            const attrs = vnode.attrs;
-            const options = mergeOptions(attrs);
-            state = {
-                id: uniqueId(),
-                isOpen: false,
-                date: null,
-                calendars: [{ month: 0, year: 0 }],
-                monthDropdownOpen: false,
-                yearDropdownOpen: false,
-                formats: {
-                    d: () => { var _a; return ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDate()) || 0; },
-                    dd: () => {
-                        var _a;
-                        const d = ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDate()) || 0;
-                        return (d < 10 ? '0' : '') + d;
-                    },
-                    ddd: () => { var _a; return options.i18n.weekdaysShort[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDay()) || 0]; },
-                    dddd: () => { var _a; return options.i18n.weekdays[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getDay()) || 0]; },
-                    m: () => { var _a; return (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0) + 1; },
-                    mm: () => {
-                        var _a;
-                        const m = (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0) + 1;
-                        return (m < 10 ? '0' : '') + m;
-                    },
-                    mmm: () => { var _a; return options.i18n.monthsShort[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0]; },
-                    mmmm: () => { var _a; return options.i18n.months[((_a = state.date) === null || _a === void 0 ? void 0 : _a.getMonth()) || 0]; },
-                    yy: () => { var _a; return ('' + (((_a = state.date) === null || _a === void 0 ? void 0 : _a.getFullYear()) || 0)).slice(2); },
-                    yyyy: () => { var _a; return ((_a = state.date) === null || _a === void 0 ? void 0 : _a.getFullYear()) || 0; },
-                },
-            };
-            // Initialize date
-            let defaultDate = attrs.defaultDate;
-            if (!defaultDate && attrs.initialValue) {
-                defaultDate = new Date(attrs.initialValue);
-            }
-            if (isDate(defaultDate)) {
-                // Always set the date if we have initialValue or defaultDate
-                setDate(defaultDate, true, options);
+    const setHand = (x, y, roundBy5, _dragging) => {
+        let radian = Math.atan2(x, -y);
+        const isHours = state.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;
+        }
+        if (radian < 0) {
+            radian = Math.PI * 2 + radian;
+        }
+        let value = Math.round(radian / unit);
+        radian = value * unit;
+        if (options.twelveHour) {
+            if (isHours) {
+                if (value === 0)
+                    value = 12;
             }
             else {
-                gotoDate(new Date());
+                if (roundBy5)
+                    value *= 5;
+                if (value === 60)
+                    value = 0;
             }
-            // Add document click listener to close dropdowns
-            document.addEventListener('click', handleDocumentClick);
-        },
-        onremove: () => {
-            // Clean up event listener
-            document.removeEventListener('click', handleDocumentClick);
-        },
-        view: (vnode) => {
-            const attrs = vnode.attrs;
-            const options = mergeOptions(attrs);
-            const { id = state.id, label, dateLabel, placeholder, disabled, required, className, style, helperText, iconName, newRow, } = attrs;
-            // Use dateLabel if label is not provided (backward compatibility)
-            const finalLabel = label || dateLabel;
-            const finalClassName = newRow ? `${className || ''} clear` : className;
-            return m('.input-field', {
-                className: finalClassName,
-                style,
-            }, [
-                // Icon prefix
-                iconName && m('i.material-icons.prefix', iconName),
-                // Main date input
-                m('input.datepicker', {
-                    id,
-                    type: 'text',
-                    value: toString(state.date, options.format),
-                    placeholder,
-                    disabled,
-                    required,
-                    readonly: true,
-                    format: attrs.format,
-                    yearrange: attrs.yearrange,
-                    tabindex: '0',
-                    onclick: () => {
-                        if (!disabled) {
-                            state.isOpen = true;
-                            if (options.onOpen)
-                                options.onOpen();
-                        }
-                    },
-                }),
-                // Label
-                finalLabel &&
-                    m('label', {
-                        for: id,
-                        class: state.date || placeholder ? 'active' : '',
-                    }, finalLabel),
-                // Helper text
-                helperText && m('span.helper-text', helperText),
-                // Modal datepicker
-                state.isOpen && [
-                    m('.modal.datepicker-modal.open', {
-                        id: `modal-${state.id}`,
-                        tabindex: 0,
-                        style: {
-                            zIndex: 1003,
-                            display: 'block',
-                            opacity: 1,
-                            top: '10%',
-                            transform: 'scaleX(1) scaleY(1)',
-                        },
-                    }, [
-                        m('.modal-content.datepicker-container', {
-                            onclick: (e) => {
-                                // Close dropdowns when clicking anywhere in the modal content
-                                const target = e.target;
-                                if (!target.closest('.select-wrapper') && !target.closest('.dropdown-content')) {
-                                    state.monthDropdownOpen = false;
-                                    state.yearDropdownOpen = false;
-                                }
-                            },
-                        }, [
-                            renderDateDisplay(options),
-                            m('.datepicker-calendar-container', [
-                                m('.datepicker-calendar', [
-                                    renderControls(options, `datepicker-title-${Math.random().toString(36).slice(2)}`),
-                                    renderCalendar(state.calendars[0].year, state.calendars[0].month, options),
-                                ]),
-                                m('.datepicker-footer', [
-                                    options.showClearBtn &&
-                                        m('button.btn-flat.datepicker-clear.waves-effect', {
-                                            type: 'button',
-                                            style: '',
-                                            onclick: () => {
-                                                setDate(null, false, options);
-                                                state.isOpen = false;
-                                            },
-                                        }, options.i18n.clear),
-                                    m('.confirmation-btns', [
-                                        m('button.btn-flat.datepicker-cancel.waves-effect', {
-                                            type: 'button',
-                                            onclick: () => {
-                                                state.isOpen = false;
-                                                if (options.onClose)
-                                                    options.onClose();
-                                            },
-                                        }, options.i18n.cancel),
-                                        m('button.btn-flat.datepicker-done.waves-effect', {
-                                            type: 'button',
-                                            onclick: () => {
-                                                if (attrs.onchange && state.date) {
-                                                    attrs.onchange(state.date.toISOString().split('T')[0]);
-                                                }
-                                                state.isOpen = false;
-                                                if (options.onClose)
-                                                    options.onClose();
-                                            },
-                                        }, options.i18n.done),
-                                    ]),
-                                ]),
-                            ]),
-                        ]),
-                    ]),
-                    // Modal overlay
-                    m('.modal-overlay', {
-                        style: {
-                            zIndex: 1002,
-                            display: 'block',
-                            opacity: 0.5,
-                        },
-                        onclick: () => {
-                            state.isOpen = false;
-                            if (options.onClose)
-                                options.onClose();
-                        },
-                    }),
-                ],
-            ]);
-        },
-    };
-};
-/**
- * Enhanced TimePicker component with i18n support and improved functionality.
- *
- * Usage:
- * - Use `initialValue` to set the current/initial time value (24h format: "HH:MM")
- * - Use `defaultTime` only if you need a fallback when the field is cleared
- * - The component accepts and outputs 24-hour format strings ("HH:MM")
- * - Display format (12h/24h) is controlled by the `twelveHour` property
- */
-const TimePicker = () => {
-    const state = {
-        id: uniqueId(),
-        isOpen: false,
-        hours: 12,
-        minutes: 0,
-        ampm: 'AM',
-        use12Hour: false,
-        time: ''};
-    const parseTime = (timeString) => {
-        if (!timeString)
-            return { hours: 12, minutes: 0, ampm: 'AM' };
-        const [time, ampm] = timeString.split(' ');
-        const [hoursStr, minutesStr] = time.split(':');
-        let hours = parseInt(hoursStr, 10) || 0;
-        const minutes = parseInt(minutesStr, 10) || 0;
-        if (ampm) {
-            // 12-hour format
-            if (ampm.toUpperCase() === 'PM' && hours !== 12)
-                hours += 12;
-            if (ampm.toUpperCase() === 'AM' && hours === 12)
-                hours = 0;
-            return { hours, minutes, ampm: ampm.toUpperCase() };
         }
         else {
-            // 24-hour format
-            const displayAmpm = hours >= 12 ? 'PM' : 'AM';
-            return { hours, minutes, ampm: displayAmpm };
+            if (isHours) {
+                if (value === 12)
+                    value = 0;
+                value = inner ? (value === 0 ? 12 : value) : value === 0 ? 0 : value + 12;
+            }
+            else {
+                if (roundBy5)
+                    value *= 5;
+                if (value === 60)
+                    value = 0;
+            }
+        }
+        if (state[state.currentView] !== value) {
+            vibrate();
         }
+        state[state.currentView] = value;
+        if (isHours && state.spanHours) {
+            state.spanHours.innerHTML = value.toString();
+        }
+        else if (!isHours && state.spanMinutes) {
+            state.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 cx2 = Math.sin(radian) * radius;
+            const cy2 = -Math.cos(radian) * radius;
+            state.hand.setAttribute('x2', cx1.toString());
+            state.hand.setAttribute('y2', cy1.toString());
+            state.bg.setAttribute('cx', cx2.toString());
+            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 formatTime = (hours, minutes, use12Hour) => {
-        if (use12Hour) {
-            const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
-            const ampm = hours >= 12 ? 'PM' : 'AM';
-            return `${displayHours}:${minutes.toString().padStart(2, '0')} ${ampm}`;
+    const buildHoursView = () => {
+        if (!state.hoursView)
+            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);
+            }
         }
         else {
-            return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+            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);
+            }
         }
     };
-    const setTime = (timeString, attrs) => {
-        const parsed = parseTime(timeString);
-        state.hours = parsed.hours;
-        state.minutes = parsed.minutes;
-        state.ampm = parsed.ampm;
-        state.time = timeString;
-        if (attrs.onchange) {
-            // Always output 24-hour format for consistency
-            const output24h = `${state.hours.toString().padStart(2, '0')}:${state.minutes.toString().padStart(2, '0')}`;
-            attrs.onchange(output24h);
-        }
-        if (attrs.oninput) {
-            attrs.oninput(timeString);
+    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);
         }
-        if (attrs.onSelect) {
-            attrs.onSelect(state.hours, state.minutes);
+    };
+    const handleAmPmClick = (ampm) => {
+        state.amOrPm = ampm;
+        updateAmPmView();
+    };
+    const open = (inputValue) => {
+        if (state.isOpen)
+            return;
+        state.isOpen = true;
+        updateTimeFromInput(inputValue);
+        showView('hours');
+        if (options.onOpen)
+            options.onOpen();
+        if (options.onOpenStart)
+            options.onOpenStart();
+        if (options.onOpenEnd)
+            options.onOpenEnd();
+    };
+    const close = () => {
+        if (!state.isOpen)
+            return;
+        state.isOpen = false;
+        if (options.onCloseStart)
+            options.onCloseStart();
+        if (options.onCloseEnd)
+            options.onCloseEnd();
+    };
+    const done = (clearValue) => {
+        // const last = ''; // We'll get this from the actual input
+        let value = clearValue ? '' : addLeadingZero(state.hours) + ':' + addLeadingZero(state.minutes);
+        if (!clearValue && options.twelveHour) {
+            value = `${value} ${state.amOrPm}`;
         }
+        close();
+        return value;
+    };
+    const clear = () => {
+        return done(true);
+    };
+    const TimepickerModal = () => {
+        return {
+            view: ({ attrs }) => {
+                const { showClearBtn, clearLabel, closeLabel, doneLabel } = attrs;
+                return [
+                    m('.modal-content.timepicker-container', [
+                        m('.timepicker-digital-display', [
+                            m('.timepicker-text-container', [
+                                m('.timepicker-display-column', [
+                                    m('span.timepicker-span-hours', {
+                                        class: state.currentView === 'hours' ? 'text-primary' : '',
+                                        onclick: () => showView('hours'),
+                                        oncreate: (vnode) => {
+                                            state.spanHours = vnode.dom;
+                                        },
+                                    }, state.hours.toString()),
+                                    ':',
+                                    m('span.timepicker-span-minutes', {
+                                        class: state.currentView === 'minutes' ? 'text-primary' : '',
+                                        onclick: () => showView('minutes'),
+                                        oncreate: (vnode) => {
+                                            state.spanMinutes = vnode.dom;
+                                        },
+                                    }, addLeadingZero(state.minutes)),
+                                ]),
+                                options.twelveHour &&
+                                    m('.timepicker-display-column.timepicker-display-am-pm', [
+                                        m('.timepicker-span-am-pm', {
+                                            oncreate: (vnode) => {
+                                                state.spanAmPm = vnode.dom;
+                                            },
+                                        }, [
+                                            m('.am-btn', {
+                                                class: state.amOrPm === 'AM' ? 'text-primary' : '',
+                                                onclick: () => handleAmPmClick('AM'),
+                                                oncreate: (vnode) => {
+                                                    state.amBtn = vnode.dom;
+                                                },
+                                            }, 'AM'),
+                                            m('.pm-btn', {
+                                                class: state.amOrPm === 'PM' ? 'text-primary' : '',
+                                                onclick: () => handleAmPmClick('PM'),
+                                                oncreate: (vnode) => {
+                                                    state.pmBtn = vnode.dom;
+                                                },
+                                            }, 'PM'),
+                                        ]),
+                                    ]),
+                            ]),
+                        ]),
+                        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();
+                                    },
+                                }),
+                                m('.timepicker-dial.timepicker-minutes.timepicker-dial-out', {
+                                    oncreate: (vnode) => {
+                                        state.minutesView = vnode.dom;
+                                        buildMinutesView();
+                                    },
+                                }),
+                            ]),
+                            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(),
+                                }, clearLabel),
+                                m('.confirmation-btns', [
+                                    m('button.btn-flat.timepicker-close.waves-effect', {
+                                        type: 'button',
+                                        tabindex: options.twelveHour ? '3' : '1',
+                                        onclick: () => close(),
+                                    }, closeLabel),
+                                    m('button.btn-flat.timepicker-close.waves-effect', {
+                                        type: 'button',
+                                        tabindex: options.twelveHour ? '3' : '1',
+                                        onclick: () => done(),
+                                    }, doneLabel),
+                                ]),
+                            ]),
+                        ]),
+                    ]),
+                ];
+            },
+        };
     };
     return {
         oninit: (vnode) => {
-            const { initialValue, defaultTime, twelveHour = false } = vnode.attrs;
-            state.use12Hour = twelveHour;
-            const timeValue = initialValue || defaultTime || '';
-            if (timeValue) {
-                const parsed = parseTime(timeValue);
-                state.hours = parsed.hours;
-                state.minutes = parsed.minutes;
-                state.ampm = parsed.ampm;
-                state.time = formatTime(state.hours, state.minutes, state.use12Hour);
+            const attrs = vnode.attrs;
+            options = Object.assign(Object.assign({}, defaultOptions), attrs);
+            state = {
+                id: uniqueId(),
+                isOpen: false,
+                hours: 12,
+                minutes: 0,
+                amOrPm: 'AM',
+                currentView: 'hours',
+                moved: false,
+                x0: 0,
+                y0: 0,
+                dx: 0,
+                dy: 0,
+            };
+            // Handle initial value after options are set
+            if (attrs.initialValue) {
+                updateTimeFromInput(attrs.initialValue);
             }
         },
-        view: (vnode) => {
-            const attrs = vnode.attrs;
-            const { id = state.id, label = 'Time', placeholder = 'Select time', disabled, readonly, required, className, style, helperText, iconName = 'access_time', newRow, twelveHour = false, timeLabel = 'Time', nowLabel = 'Now', clearLabel = 'Clear', closeLabel = 'Close', amLabel = 'AM', pmLabel = 'PM', showClearBtn = false, showNowBtn = false, useModal = true, } = attrs;
-            state.use12Hour = twelveHour;
-            const finalClassName = newRow ? `${className || ''} clear` : className;
-            const displayValue = state.time ? formatTime(state.hours, state.minutes, state.use12Hour) : '';
-            return m('.input-field', {
-                className: finalClassName,
-                style,
-            }, [
+        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);
+        },
+        view: ({ attrs }) => {
+            const { id = state.id, label, placeholder, disabled, readonly, required, iconName, helperText, onchange, oninput, useModal = true, showClearBtn = false, clearLabel = 'Clear', closeLabel = 'Cancel', twelveHour, className: cn1, class: cn2, } = attrs;
+            const className = cn1 || cn2 || 'col s12';
+            // Format time value for display
+            const formatTime = (hours, minutes, use12Hour) => {
+                if (use12Hour) {
+                    const displayHours = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours;
+                    const ampm = hours >= 12 ? 'PM' : 'AM';
+                    return `${displayHours}:${minutes.toString().padStart(2, '0')} ${ampm}`;
+                }
+                else {
+                    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+                }
+            };
+            const setTime = (timeValue) => {
+                if (onchange) {
+                    onchange(timeValue);
+                }
+            };
+            // Calculate display hours based on format
+            let hoursForDisplay = state.hours;
+            if (twelveHour) {
+                // For 12-hour display format, use the original 24-hour value so formatTime can properly determine AM/PM
+                if (options.twelveHour) {
+                    // Convert from internal 12-hour back to 24-hour for proper AM/PM calculation
+                    if (state.amOrPm === 'PM' && state.hours !== 12) {
+                        hoursForDisplay = state.hours + 12;
+                    }
+                    else if (state.amOrPm === 'AM' && state.hours === 12) {
+                        hoursForDisplay = 0;
+                    }
+                }
+            }
+            else {
+                // For 24-hour display format
+                if (options.twelveHour) {
+                    // Convert from internal 12-hour to 24-hour for display
+                    if (state.amOrPm === 'PM' && state.hours !== 12) {
+                        hoursForDisplay = state.hours + 12;
+                    }
+                    else if (state.amOrPm === 'AM' && state.hours === 12) {
+                        hoursForDisplay = 0;
+                    }
+                }
+            }
+            const displayValue = state.hours !== undefined && state.minutes !== undefined
+                ? formatTime(hoursForDisplay, state.minutes, twelveHour || false)
+                : '';
+            return m('.input-field', { className }, [
                 // Icon prefix
                 iconName && m('i.material-icons.prefix', iconName),
-                // Time input field
+                // Time input field - use HTML5 time input for inline mode
                 m('input.timepicker', {
                     id,
-                    type: 'text',
-                    value: displayValue,
-                    placeholder,
+                    type: useModal ? 'text' : 'time',
+                    value: useModal
+                        ? displayValue
+                        : state.hours !== undefined && state.minutes !== undefined
+                            ? `${state.hours.toString().padStart(2, '0')}:${state.minutes.toString().padStart(2, '0')}`
+                            : '',
+                    placeholder: useModal ? placeholder : undefined,
                     disabled,
                     readonly,
                     required,
                     onclick: () => {
                         if (!disabled && !readonly && useModal) {
-                            state.isOpen = true;
-                            if (attrs.onOpen)
-                                attrs.onOpen();
+                            open(displayValue);
+                        }
+                    },
+                    onchange: (e) => {
+                        if (!useModal) {
+                            // For inline mode, handle HTML5 time input changes directly
+                            const target = e.target;
+                            const timeValue = target.value; // Already in HH:MM format
+                            const [hours, minutes] = timeValue.split(':').map(Number);
+                            state.hours = hours;
+                            state.minutes = minutes;
+                            setTime(timeValue);
+                        }
+                    },
+                    oninput: (e) => {
+                        if (!useModal && oninput) {
+                            const target = e.target;
+                            oninput(target.value);
                         }
                     },
                 }),
@@ -3269,150 +3900,161 @@ const TimePicker = () => {
                     }, label),
                 // Helper text
                 helperText && m('span.helper-text', helperText),
-                // Time picker modal (simplified version)
+                // Modal timepicker
                 useModal &&
-                    state.isOpen &&
-                    m('.timepicker-modal', {
+                    state.isOpen && [
+                    // Modal overlay
+                    m('.modal-overlay', {
                         style: {
-                            position: 'fixed',
-                            top: '50%',
-                            left: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            backgroundColor: 'white',
-                            padding: '20px',
-                            borderRadius: '4px',
-                            boxShadow: '0 4px 20px rgba(0,0,0,0.3)',
-                            zIndex: 1000,
+                            zIndex: 1002,
+                            display: 'block',
+                            opacity: 0.5,
                         },
-                    }, [
-                        m('h4', timeLabel),
-                        m('.time-inputs', {
-                            style: { display: 'flex', alignItems: 'center', gap: '10px', margin: '20px 0' },
-                        }, [
-                            // Hours input
-                            m('input', {
-                                type: 'number',
-                                min: state.use12Hour ? 1 : 0,
-                                max: state.use12Hour ? 12 : 23,
-                                value: state.use12Hour
-                                    ? state.hours === 0
-                                        ? 12
-                                        : state.hours > 12
-                                            ? state.hours - 12
-                                            : state.hours
-                                    : state.hours,
-                                style: { width: '60px', textAlign: 'center', padding: '8px' },
-                                onchange: (e) => {
-                                    const target = e.target;
-                                    let hours = parseInt(target.value) || 0;
-                                    if (state.use12Hour) {
-                                        if (state.ampm === 'PM' && hours !== 12)
-                                            hours += 12;
-                                        if (state.ampm === 'AM' && hours === 12)
-                                            hours = 0;
-                                    }
-                                    state.hours = hours;
-                                    state.time = formatTime(state.hours, state.minutes, state.use12Hour);
-                                },
-                            }),
-                            m('span', ':'),
-                            // Minutes input
-                            m('input', {
-                                type: 'number',
-                                min: 0,
-                                max: 59,
-                                value: state.minutes,
-                                style: { width: '60px', textAlign: 'center', padding: '8px' },
-                                onchange: (e) => {
-                                    const target = e.target;
-                                    state.minutes = parseInt(target.value) || 0;
-                                    state.time = formatTime(state.hours, state.minutes, state.use12Hour);
-                                },
-                            }),
-                            // AM/PM toggle for 12-hour format
-                            state.use12Hour &&
-                                m('select', {
-                                    value: state.ampm,
-                                    style: { padding: '8px' },
-                                    onchange: (e) => {
-                                        const target = e.target;
-                                        const oldAmpm = state.ampm;
-                                        state.ampm = target.value;
-                                        // Adjust hours when switching AM/PM
-                                        if (oldAmpm !== state.ampm) {
-                                            if (state.ampm === 'PM' && state.hours < 12) {
-                                                state.hours += 12;
-                                            }
-                                            else if (state.ampm === 'AM' && state.hours >= 12) {
-                                                state.hours -= 12;
-                                            }
-                                        }
-                                        state.time = formatTime(state.hours, state.minutes, state.use12Hour);
-                                    },
-                                }, [m('option', { value: 'AM' }, amLabel), m('option', { value: 'PM' }, pmLabel)]),
-                        ]),
-                        // Action buttons
-                        m('.timepicker-actions', {
-                            style: { display: 'flex', justifyContent: 'flex-end', gap: '10px' },
-                        }, [
-                            showClearBtn &&
-                                m('button.btn-flat', {
-                                    onclick: () => {
-                                        setTime('', attrs);
-                                        state.isOpen = false;
-                                    },
-                                }, clearLabel),
-                            showNowBtn &&
-                                m('button.btn-flat', {
-                                    onclick: () => {
-                                        const now = new Date();
-                                        state.hours = now.getHours();
-                                        state.minutes = now.getMinutes();
-                                        state.ampm = state.hours >= 12 ? 'PM' : 'AM';
-                                        state.time = formatTime(state.hours, state.minutes, state.use12Hour);
-                                    },
-                                }, nowLabel),
-                            m('button.btn-flat', {
-                                onclick: () => {
-                                    state.isOpen = false;
-                                    if (attrs.onClose)
-                                        attrs.onClose();
-                                },
-                            }, closeLabel),
-                            m('button.btn-flat', {
-                                onclick: () => {
-                                    setTime(state.time, attrs);
-                                    state.isOpen = false;
-                                    if (attrs.onClose)
-                                        attrs.onClose();
-                                },
-                            }, 'OK'),
-                        ]),
-                    ]),
-                // Modal backdrop
-                useModal &&
-                    state.isOpen &&
-                    m('.modal-backdrop', {
+                        onclick: () => close(),
+                    }),
+                    // Modal content
+                    m('.modal.timepicker-modal.open', {
                         style: {
-                            position: 'fixed',
-                            top: 0,
-                            left: 0,
-                            width: '100%',
-                            height: '100%',
-                            backgroundColor: 'rgba(0,0,0,0.5)',
-                            zIndex: 999,
-                        },
-                        onclick: () => {
-                            state.isOpen = false;
-                            if (attrs.onClose)
-                                attrs.onClose();
+                            zIndex: 1003,
+                            display: 'block',
+                            opacity: 1,
+                            top: '10%',
+                            transform: 'scaleX(1) scaleY(1)',
                         },
-                    }),
+                    }, m(TimepickerModal, { showClearBtn, clearLabel, closeLabel, doneLabel: 'OK' })),
+                ],
             ]);
         },
     };
 };
 
+class Pushpin {
+    constructor(el, options = {}) {
+        this.el = el;
+        this.options = Object.assign(Object.assign({}, Pushpin.defaults), options);
+        this.state = {
+            originalOffset: this.el.getBoundingClientRect().top + window.pageYOffset,
+        };
+        this.el.M_Pushpin = this;
+        this._setupEventHandlers();
+        this._updateElementPosition();
+    }
+    static getInstance(el) {
+        return el.M_Pushpin;
+    }
+    destroy() {
+        this.el.style.position = '';
+        this.el.style.top = '';
+        this.el.style.left = '';
+        this._removeEventHandlers();
+        this.el.M_Pushpin = undefined;
+    }
+    _setupEventHandlers() {
+        this._updateElementPositionBound = this._updateElementPosition.bind(this);
+        window.addEventListener('scroll', this._updateElementPositionBound);
+        window.addEventListener('resize', this._updateElementPositionBound);
+    }
+    _removeEventHandlers() {
+        window.removeEventListener('scroll', this._updateElementPositionBound);
+        window.removeEventListener('resize', this._updateElementPositionBound);
+    }
+    _updateElementPosition() {
+        const scrolled = window.pageYOffset;
+        const elementTop = this.state.originalOffset - this.options.offset;
+        // const elementBottom = elementTop + this.el.offsetHeight;
+        // Check if element should be pinned
+        if (scrolled > elementTop) {
+            // Check if element is past bottom
+            if (this.options.bottom !== Infinity && scrolled > this.options.bottom) {
+                this._removePinClasses();
+                this.el.classList.add('pin-bottom');
+                this.el.style.position = 'absolute';
+                this.el.style.top = this.options.bottom - this.el.offsetHeight + 'px';
+                this.el.style.left = '';
+                if (this.options.onPositionChange) {
+                    this.options.onPositionChange('pin-bottom');
+                }
+            }
+            else {
+                // Pin element
+                this._removePinClasses();
+                this.el.classList.add('pinned');
+                this.el.style.position = 'fixed';
+                this.el.style.top = this.options.top + 'px';
+                this.el.style.left = this.el.getBoundingClientRect().left + 'px';
+                if (this.options.onPositionChange) {
+                    this.options.onPositionChange('pinned');
+                }
+            }
+        }
+        else {
+            // Unpin element
+            this._removePinClasses();
+            this.el.classList.add('pin-top');
+            this.el.style.position = '';
+            this.el.style.top = '';
+            this.el.style.left = '';
+            if (this.options.onPositionChange) {
+                this.options.onPositionChange('pin-top');
+            }
+        }
+    }
+    _removePinClasses() {
+        this.el.classList.remove('pin-top');
+        this.el.classList.remove('pinned');
+        this.el.classList.remove('pin-bottom');
+    }
+    _updatePosition() {
+        // Recalculate original offset in case element moved
+        this.state.originalOffset = this.el.getBoundingClientRect().top + window.pageYOffset;
+        this._updateElementPosition();
+    }
+}
+Pushpin.defaults = {
+    top: 0,
+    bottom: Infinity,
+    offset: 0,
+    onPositionChange: undefined,
+};
+const PushpinComponent = () => {
+    let pushpinInstance = null;
+    return {
+        oncreate: ({ attrs }) => {
+            if (attrs.targetSelector) {
+                const targetEl = document.querySelector(attrs.targetSelector);
+                if (targetEl) {
+                    pushpinInstance = new Pushpin(targetEl, attrs);
+                }
+            }
+        },
+        onupdate: ({ attrs }) => {
+            if (pushpinInstance) {
+                // Update options and recalculate position
+                pushpinInstance.options = Object.assign(Object.assign({}, pushpinInstance.options), attrs);
+                pushpinInstance._updatePosition();
+            }
+        },
+        onremove: () => {
+            if (pushpinInstance) {
+                pushpinInstance.destroy();
+                pushpinInstance = null;
+            }
+        },
+        view: () => null, // This component doesn't render anything itself
+    };
+};
+// Helper function to initialize pushpins on elements
+const initPushpins = (selector = '.pushpin', options = {}) => {
+    const elements = document.querySelectorAll(selector);
+    const pushpins = [];
+    elements.forEach((el) => {
+        if (!el.M_Pushpin) {
+            pushpins.push(new Pushpin(el, options));
+        }
+    });
+    return pushpins;
+};
+
 const RadioButton = () => ({
     view: ({ attrs: { id, groupId, label, onchange, className = 'col s12', checked, disabled, inputId } }) => {
         const radioId = inputId || `${groupId}-${id}`;
@@ -3695,6 +4337,7 @@ const Select = () => {
                     m(MaterialIcon, {
                         name: 'caret',
                         direction: 'down',
+                        class: 'caret',
                     }),
                 ]),
                 // Label
@@ -4102,6 +4745,7 @@ const SearchSelect = () => {
                     m(MaterialIcon, {
                         name: 'caret',
                         direction: state.isOpen ? 'up' : 'down',
+                        class: 'caret',
                         style: { marginLeft: 'auto', cursor: 'pointer' },
                     }),
                 ]),
@@ -4208,4 +4852,491 @@ const SearchSelect = () => {
     };
 };
 
-export { AnchorItem, Autocomplete, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DatePicker, Dropdown, EmailInput, FileInput, FlatButton, FloatingActionButton, HelperText, Icon, InputCheckbox, Label, LargeButton, ListItem, Mandatory, MaterialBox, ModalPanel, NumberInput, Options, Pagination, Parallax, PasswordInput, RadioButton, RadioButtons, RangeInput, RoundIconButton, SearchSelect, SecondaryContent, Select, SmallButton, SubmitButton, Switch, Tabs, TextArea, TextInput, TimePicker, UrlInput, getDropdownStyles, isNumeric, padLeft, range, uniqueId, uuid4 };
+class Toast {
+    constructor(options = {}) {
+        this.options = Object.assign(Object.assign({}, Toast.defaults), options);
+        this.state = {
+            panning: false,
+            timeRemaining: this.options.displayLength,
+            startingXPos: 0,
+            xPos: 0,
+            velocityX: 0,
+            time: 0,
+            deltaX: 0,
+            wasSwiped: false,
+        };
+        if (Toast._toasts.length === 0) {
+            Toast._createContainer();
+        }
+        // Create new toast
+        Toast._toasts.push(this);
+        this.el = this._createToast();
+        this._animateIn();
+        this._setTimer();
+    }
+    static getInstance(el) {
+        return el.M_Toast;
+    }
+    static _createContainer() {
+        const container = document.createElement('div');
+        container.setAttribute('id', 'toast-container');
+        // Add event handlers
+        container.addEventListener('touchstart', Toast._onDragStart);
+        container.addEventListener('touchmove', Toast._onDragMove);
+        container.addEventListener('touchend', Toast._onDragEnd);
+        container.addEventListener('mousedown', Toast._onDragStart);
+        document.addEventListener('mousemove', Toast._onDragMove);
+        document.addEventListener('mouseup', Toast._onDragEnd);
+        document.body.appendChild(container);
+        Toast._container = container;
+    }
+    static _removeContainer() {
+        document.removeEventListener('mousemove', Toast._onDragMove);
+        document.removeEventListener('mouseup', Toast._onDragEnd);
+        if (Toast._container) {
+            Toast._container.remove();
+            Toast._container = null;
+        }
+    }
+    static _xPos(e) {
+        const touchEvent = e;
+        const mouseEvent = e;
+        if (touchEvent.targetTouches && touchEvent.targetTouches.length >= 1) {
+            return touchEvent.targetTouches[0].clientX;
+        }
+        return mouseEvent.clientX;
+    }
+    static dismissAll() {
+        Toast._toasts.forEach((toast) => toast.dismiss());
+    }
+    _createToast() {
+        const toast = document.createElement('div');
+        toast.classList.add('toast');
+        // Add custom classes
+        if (this.options.classes) {
+            toast.classList.add(...this.options.classes.split(' '));
+        }
+        // Set content
+        const message = this.options.html;
+        if (typeof message === 'object' && message && 'nodeType' in message) {
+            toast.appendChild(message);
+        }
+        else {
+            toast.innerHTML = message;
+        }
+        // Store reference
+        toast.M_Toast = this;
+        // Append to container
+        Toast._container.appendChild(toast);
+        return toast;
+    }
+    _animateIn() {
+        // Simple CSS animation since we don't have anime.js
+        this.el.style.cssText = `
+      transform: translateY(35px);
+      opacity: 0;
+      transition: transform ${this.options.inDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1),
+                  opacity ${this.options.inDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1);
+    `;
+        // Trigger animation
+        setTimeout(() => {
+            this.el.style.transform = 'translateY(0)';
+            this.el.style.opacity = '1';
+        }, 10);
+    }
+    _setTimer() {
+        if (this.state.timeRemaining !== Infinity) {
+            this.state.counterInterval = window.setInterval(() => {
+                if (!this.state.panning) {
+                    this.state.timeRemaining -= 20;
+                }
+                if (this.state.timeRemaining <= 0) {
+                    this.dismiss();
+                }
+            }, 20);
+        }
+    }
+    dismiss() {
+        if (this.state.counterInterval) {
+            window.clearInterval(this.state.counterInterval);
+        }
+        const activationDistance = this.el.offsetWidth * this.options.activationPercent;
+        if (this.state.wasSwiped) {
+            this.el.style.transition = 'transform .05s, opacity .05s';
+            this.el.style.transform = `translateX(${activationDistance}px)`;
+            this.el.style.opacity = '0';
+        }
+        // Animate out
+        this.el.style.cssText += `
+      transition: opacity ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1),
+                  margin-top ${this.options.outDuration}ms cubic-bezier(0.165, 0.84, 0.44, 1);
+      opacity: 0;
+      margin-top: -40px;
+    `;
+        setTimeout(() => {
+            // Call completion callback
+            if (this.options.completeCallback) {
+                this.options.completeCallback();
+            }
+            // Remove toast from DOM
+            this.el.remove();
+            // Remove from toasts array
+            const index = Toast._toasts.indexOf(this);
+            if (index > -1) {
+                Toast._toasts.splice(index, 1);
+            }
+            // Remove container if no more toasts
+            if (Toast._toasts.length === 0) {
+                Toast._removeContainer();
+            }
+        }, this.options.outDuration);
+    }
+}
+Toast._toasts = [];
+Toast._container = null;
+Toast._draggedToast = null;
+Toast.defaults = {
+    html: '',
+    displayLength: 4000,
+    inDuration: 300,
+    outDuration: 375,
+    classes: '',
+    completeCallback: undefined,
+    activationPercent: 0.8,
+};
+Toast._onDragStart = (e) => {
+    const target = e.target;
+    const toastEl = target.closest('.toast');
+    if (toastEl) {
+        const toast = toastEl.M_Toast;
+        if (toast) {
+            toast.state.panning = true;
+            Toast._draggedToast = toast;
+            toast.el.classList.add('panning');
+            toast.el.style.transition = '';
+            toast.state.startingXPos = Toast._xPos(e);
+            toast.state.time = Date.now();
+            toast.state.xPos = Toast._xPos(e);
+        }
+    }
+};
+Toast._onDragMove = (e) => {
+    if (Toast._draggedToast) {
+        e.preventDefault();
+        const toast = Toast._draggedToast;
+        toast.state.deltaX = Math.abs(toast.state.xPos - Toast._xPos(e));
+        toast.state.xPos = Toast._xPos(e);
+        toast.state.velocityX = toast.state.deltaX / (Date.now() - toast.state.time);
+        toast.state.time = Date.now();
+        const totalDeltaX = toast.state.xPos - toast.state.startingXPos;
+        const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+        toast.el.style.transform = `translateX(${totalDeltaX}px)`;
+        toast.el.style.opacity = String(1 - Math.abs(totalDeltaX / activationDistance));
+    }
+};
+Toast._onDragEnd = () => {
+    if (Toast._draggedToast) {
+        const toast = Toast._draggedToast;
+        toast.state.panning = false;
+        toast.el.classList.remove('panning');
+        const totalDeltaX = toast.state.xPos - toast.state.startingXPos;
+        const activationDistance = toast.el.offsetWidth * toast.options.activationPercent;
+        const shouldBeDismissed = Math.abs(totalDeltaX) > activationDistance || toast.state.velocityX > 1;
+        if (shouldBeDismissed) {
+            toast.state.wasSwiped = true;
+            toast.dismiss();
+        }
+        else {
+            toast.el.style.transition = 'transform .2s, opacity .2s';
+            toast.el.style.transform = '';
+            toast.el.style.opacity = '';
+        }
+        Toast._draggedToast = null;
+    }
+};
+// Factory function for creating toasts
+const toast = (options) => {
+    return new Toast(options);
+};
+const ToastComponent = () => {
+    let toastInstance = null;
+    return {
+        view: ({ attrs }) => {
+            if (attrs.show && !toastInstance) {
+                toastInstance = new Toast(attrs);
+            }
+            else if (!attrs.show && toastInstance) {
+                toastInstance.dismiss();
+                toastInstance = null;
+            }
+            return null; // This component doesn't render anything itself
+        },
+        onremove: () => {
+            if (toastInstance) {
+                toastInstance.dismiss();
+                toastInstance = null;
+            }
+        },
+    };
+};
+
+class Tooltip {
+    constructor(el, options = {}) {
+        this.el = el;
+        this.options = Object.assign(Object.assign({}, Tooltip.defaults), options);
+        this.state = {
+            isOpen: false,
+            isHovered: false,
+            isFocused: false,
+            xMovement: 0,
+            yMovement: 0,
+        };
+        this.el.M_Tooltip = this;
+        this._appendTooltipEl();
+        this._setupEventHandlers();
+    }
+    static getInstance(el) {
+        return el.M_Tooltip;
+    }
+    destroy() {
+        this.tooltipEl.remove();
+        this._removeEventHandlers();
+        this.el.M_Tooltip = undefined;
+    }
+    _appendTooltipEl() {
+        const tooltipEl = document.createElement('div');
+        tooltipEl.classList.add('material-tooltip');
+        this.tooltipEl = tooltipEl;
+        const tooltipContentEl = document.createElement('div');
+        tooltipContentEl.classList.add('tooltip-content');
+        tooltipContentEl.innerHTML = this.options.html || '';
+        tooltipEl.appendChild(tooltipContentEl);
+        document.body.appendChild(tooltipEl);
+    }
+    _updateTooltipContent() {
+        const contentEl = this.tooltipEl.querySelector('.tooltip-content');
+        if (contentEl) {
+            contentEl.innerHTML = this.options.html || '';
+        }
+    }
+    _setupEventHandlers() {
+        this._handleMouseEnterBound = this._handleMouseEnter.bind(this);
+        this._handleMouseLeaveBound = this._handleMouseLeave.bind(this);
+        this._handleFocusBound = this._handleFocus.bind(this);
+        this._handleBlurBound = this._handleBlur.bind(this);
+        this.el.addEventListener('mouseenter', this._handleMouseEnterBound);
+        this.el.addEventListener('mouseleave', this._handleMouseLeaveBound);
+        this.el.addEventListener('focus', this._handleFocusBound, true);
+        this.el.addEventListener('blur', this._handleBlurBound, true);
+    }
+    _removeEventHandlers() {
+        this.el.removeEventListener('mouseenter', this._handleMouseEnterBound);
+        this.el.removeEventListener('mouseleave', this._handleMouseLeaveBound);
+        this.el.removeEventListener('focus', this._handleFocusBound, true);
+        this.el.removeEventListener('blur', this._handleBlurBound, true);
+    }
+    open(isManual = true) {
+        if (this.state.isOpen) {
+            return;
+        }
+        this.state.isOpen = true;
+        // Update tooltip content with data attributes
+        this.options = Object.assign(Object.assign({}, this.options), this._getAttributeOptions());
+        this._updateTooltipContent();
+        this._setEnterDelayTimeout(isManual);
+    }
+    close() {
+        if (!this.state.isOpen) {
+            return;
+        }
+        this.state.isHovered = false;
+        this.state.isFocused = false;
+        this.state.isOpen = false;
+        this._setExitDelayTimeout();
+    }
+    _setExitDelayTimeout() {
+        if (this.state.exitDelayTimeout) {
+            clearTimeout(this.state.exitDelayTimeout);
+        }
+        this.state.exitDelayTimeout = window.setTimeout(() => {
+            if (this.state.isHovered || this.state.isFocused) {
+                return;
+            }
+            this._animateOut();
+        }, this.options.exitDelay);
+    }
+    _setEnterDelayTimeout(isManual) {
+        if (this.state.enterDelayTimeout) {
+            clearTimeout(this.state.enterDelayTimeout);
+        }
+        this.state.enterDelayTimeout = window.setTimeout(() => {
+            if (!this.state.isHovered && !this.state.isFocused && !isManual) {
+                return;
+            }
+            this._animateIn();
+        }, this.options.enterDelay);
+    }
+    _positionTooltip() {
+        const origin = this.el;
+        const tooltip = this.tooltipEl;
+        const originHeight = origin.offsetHeight;
+        const originWidth = origin.offsetWidth;
+        const tooltipHeight = tooltip.offsetHeight;
+        const tooltipWidth = tooltip.offsetWidth;
+        const margin = this.options.margin;
+        this.state.xMovement = 0;
+        this.state.yMovement = 0;
+        const originRect = origin.getBoundingClientRect();
+        let targetTop = originRect.top + window.pageYOffset;
+        let targetLeft = originRect.left + window.pageXOffset;
+        switch (this.options.position) {
+            case 'top':
+                targetTop += -tooltipHeight - margin;
+                targetLeft += originWidth / 2 - tooltipWidth / 2;
+                this.state.yMovement = -this.options.transitionMovement;
+                break;
+            case 'right':
+                targetTop += originHeight / 2 - tooltipHeight / 2;
+                targetLeft += originWidth + margin;
+                this.state.xMovement = this.options.transitionMovement;
+                break;
+            case 'left':
+                targetTop += originHeight / 2 - tooltipHeight / 2;
+                targetLeft += -tooltipWidth - margin;
+                this.state.xMovement = -this.options.transitionMovement;
+                break;
+            case 'bottom':
+            default:
+                targetTop += originHeight + margin;
+                targetLeft += originWidth / 2 - tooltipWidth / 2;
+                this.state.yMovement = this.options.transitionMovement;
+                break;
+        }
+        const repositioned = this._repositionWithinScreen(targetLeft, targetTop, tooltipWidth, tooltipHeight);
+        this.tooltipEl.style.top = repositioned.y + 'px';
+        this.tooltipEl.style.left = repositioned.x + 'px';
+    }
+    _repositionWithinScreen(x, y, width, height) {
+        const scrollLeft = window.pageXOffset;
+        const scrollTop = window.pageYOffset;
+        let newX = x - scrollLeft;
+        let newY = y - scrollTop;
+        const offset = this.options.margin + this.options.transitionMovement;
+        // Check boundaries
+        if (newX < offset) {
+            newX = offset;
+        }
+        else if (newX + width > window.innerWidth - offset) {
+            newX = window.innerWidth - width - offset;
+        }
+        if (newY < offset) {
+            newY = offset;
+        }
+        else if (newY + height > window.innerHeight - offset) {
+            newY = window.innerHeight - height - offset;
+        }
+        return {
+            x: newX + scrollLeft,
+            y: newY + scrollTop,
+        };
+    }
+    _animateIn() {
+        this._positionTooltip();
+        this.tooltipEl.style.visibility = 'visible';
+        // CSS animation
+        this.tooltipEl.style.cssText += `
+      opacity: 0;
+      transform: translate(0, 0);
+      transition: opacity ${this.options.inDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1),
+                  transform ${this.options.inDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1);
+    `;
+        setTimeout(() => {
+            this.tooltipEl.style.opacity = '1';
+            this.tooltipEl.style.transform = `translate(${this.state.xMovement}px, ${this.state.yMovement}px)`;
+        }, 10);
+    }
+    _animateOut() {
+        this.tooltipEl.style.cssText += `
+      transition: opacity ${this.options.outDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1),
+                  transform ${this.options.outDuration}ms cubic-bezier(0.215, 0.61, 0.355, 1);
+      opacity: 0;
+      transform: translate(0, 0);
+    `;
+        setTimeout(() => {
+            this.tooltipEl.style.visibility = 'hidden';
+        }, this.options.outDuration);
+    }
+    _handleMouseEnter() {
+        this.state.isHovered = true;
+        this.state.isFocused = false;
+        this.open(false);
+    }
+    _handleMouseLeave() {
+        this.state.isHovered = false;
+        this.state.isFocused = false;
+        this.close();
+    }
+    _handleFocus() {
+        this.state.isFocused = true;
+        this.open(false);
+    }
+    _handleBlur() {
+        this.state.isFocused = false;
+        this.close();
+    }
+    _getAttributeOptions() {
+        const attributeOptions = {};
+        const tooltipText = this.el.getAttribute('data-tooltip');
+        const position = this.el.getAttribute('data-position');
+        if (tooltipText) {
+            attributeOptions.html = tooltipText;
+        }
+        if (position && ['top', 'bottom', 'left', 'right'].includes(position)) {
+            attributeOptions.position = position;
+        }
+        return attributeOptions;
+    }
+}
+Tooltip.defaults = {
+    exitDelay: 200,
+    enterDelay: 0,
+    html: null,
+    margin: 5,
+    inDuration: 250,
+    outDuration: 200,
+    position: 'bottom',
+    transitionMovement: 10,
+};
+const TooltipComponent = () => {
+    let tooltipInstance = null;
+    return {
+        oncreate: ({ attrs }) => {
+            if (attrs.targetSelector) {
+                const targetEl = document.querySelector(attrs.targetSelector);
+                if (targetEl) {
+                    tooltipInstance = new Tooltip(targetEl, attrs);
+                }
+            }
+        },
+        onremove: () => {
+            if (tooltipInstance) {
+                tooltipInstance.destroy();
+                tooltipInstance = null;
+            }
+        },
+        view: () => null, // This component doesn't render anything itself
+    };
+};
+// Helper function to initialize tooltips on elements
+const initTooltips = (selector = '[data-tooltip]', options = {}) => {
+    const elements = document.querySelectorAll(selector);
+    const tooltips = [];
+    elements.forEach((el) => {
+        if (!el.M_Tooltip) {
+            tooltips.push(new Tooltip(el, options));
+        }
+    });
+    return tooltips;
+};
+
+export { AnchorItem, Autocomplete, Button, ButtonFactory, Carousel, CharacterCounter, Chips, CodeBlock, Collapsible, CollapsibleItem, Collection, CollectionMode, ColorInput, DatePicker, Dropdown, EmailInput, FileInput, FlatButton, FloatingActionButton, HelperText, Icon, InputCheckbox, Label, LargeButton, ListItem, Mandatory, MaterialBox, ModalPanel, NumberInput, Options, Pagination, Parallax, PasswordInput, Pushpin, PushpinComponent, RadioButton, RadioButtons, RangeInput, RoundIconButton, SearchSelect, SecondaryContent, Select, SmallButton, SubmitButton, Switch, Tabs, TextArea, TextInput, TimePicker, Toast, ToastComponent, Tooltip, TooltipComponent, UrlInput, getDropdownStyles, initPushpins, initTooltips, isNumeric, padLeft, range, toast, uniqueId, uuid4 };