mithril-materialized 2.0.0-beta.10 → 2.0.0-beta.11

package/dist/index.js

@@ -418,12 +418,18 @@ const ButtonFactory = (element, defaultClassNames, type = '') => {
     return () => {
         return {
             view: ({ attrs }) => {
-                const { modalId, tooltip, tooltipPostion, iconName, iconClass, label, className, attr } = attrs, params = __rest(attrs, ["modalId", "tooltip", "tooltipPostion", "iconName", "iconClass", "label", "className", "attr"]);
-                const cn = [modalId ? 'modal-trigger' : '', tooltip ? 'tooltipped' : '', defaultClassNames, className]
+                const { modalId, tooltip, tooltipPosition, tooltipPostion, // Keep for backwards compatibility
+                iconName, iconClass, label, className, attr, variant } = attrs, params = __rest(attrs, ["modalId", "tooltip", "tooltipPosition", "tooltipPostion", "iconName", "iconClass", "label", "className", "attr", "variant"]);
+                // Handle both new variant prop and legacy modalId/type
+                const buttonType = (variant === null || variant === void 0 ? void 0 : variant.type) || (modalId ? 'modal' : type || 'button');
+                const modalTarget = (variant === null || variant === void 0 ? void 0 : variant.type) === 'modal' ? variant.modalId : modalId;
+                const cn = [modalTarget ? 'modal-trigger' : '', tooltip ? 'tooltipped' : '', defaultClassNames, className]
                     .filter(Boolean)
                     .join(' ')
                     .trim();
-                return m(element, Object.assign(Object.assign(Object.assign({}, params), attr), { className: cn, href: modalId ? `#${modalId}` : undefined, 'data-position': tooltip ? tooltipPostion || 'top' : undefined, 'data-tooltip': tooltip || undefined, type }), 
+                // Use tooltipPosition if available, fallback to legacy tooltipPostion
+                const position = tooltipPosition || tooltipPostion || 'top';
+                return m(element, Object.assign(Object.assign(Object.assign({}, params), attr), { className: cn, href: modalTarget ? `#${modalTarget}` : undefined, 'data-position': tooltip ? position : undefined, 'data-tooltip': tooltip || undefined, type: buttonType === 'modal' ? 'button' : buttonType }), 
                 // `${dca}${modalId ? `.modal-trigger[href=#${modalId}]` : ''}${
                 //   tooltip ? `.tooltipped[data-position=${tooltipPostion || 'top'}][data-tooltip=${tooltip}]` : ''
                 // }${toAttributeString(attr)}`, {}
@@ -2037,248 +2043,6 @@ const DatePicker = () => {
     };
 };
 
-/** Pure TypeScript Dropdown component - no Materialize dependencies */
-const Dropdown = () => {
-    const state = {
-        isOpen: false,
-        initialValue: undefined,
-        id: '',
-        focusedIndex: -1,
-        inputRef: null,
-        dropdownRef: null,
-    };
-    const handleKeyDown = (e, items, onchange) => {
-        const availableItems = items.filter((item) => !item.divider && !item.disabled);
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                if (!state.isOpen) {
-                    state.isOpen = true;
-                    state.focusedIndex = 0;
-                }
-                else {
-                    state.focusedIndex = Math.min(state.focusedIndex + 1, availableItems.length - 1);
-                }
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                if (state.isOpen) {
-                    state.focusedIndex = Math.max(state.focusedIndex - 1, 0);
-                }
-                break;
-            case 'Enter':
-            case ' ':
-                e.preventDefault();
-                if (state.isOpen && state.focusedIndex >= 0 && state.focusedIndex < availableItems.length) {
-                    const selectedItem = availableItems[state.focusedIndex];
-                    const value = (selectedItem.id || selectedItem.label);
-                    state.initialValue = value;
-                    state.isOpen = false;
-                    state.focusedIndex = -1;
-                    if (onchange)
-                        onchange(value);
-                }
-                else if (!state.isOpen) {
-                    state.isOpen = true;
-                    state.focusedIndex = 0;
-                }
-                break;
-            case 'Escape':
-                e.preventDefault();
-                state.isOpen = false;
-                state.focusedIndex = -1;
-                break;
-        }
-    };
-    return {
-        oninit: ({ attrs: { id = uniqueId(), initialValue, checkedId } }) => {
-            state.id = id;
-            state.initialValue = initialValue || checkedId;
-            // Mithril will handle click events through the component structure
-        },
-        view: ({ attrs: { key, label, onchange, disabled = false, items, iconName, helperText, style, className = 'col s12' }, }) => {
-            const { initialValue } = state;
-            const selectedItem = initialValue
-                ? items.filter((i) => (i.id ? i.id === initialValue : i.label === initialValue)).shift()
-                : undefined;
-            const title = selectedItem ? selectedItem.label : label || 'Select';
-            const availableItems = items.filter((item) => !item.divider && !item.disabled);
-            return m('.dropdown-wrapper.input-field', { className, key, style }, [
-                iconName ? m('i.material-icons.prefix', iconName) : undefined,
-                m(HelperText, { helperText }),
-                m('.select-wrapper', {
-                    onclick: disabled
-                        ? undefined
-                        : () => {
-                            state.isOpen = !state.isOpen;
-                            state.focusedIndex = state.isOpen ? 0 : -1;
-                        },
-                    onkeydown: disabled ? undefined : (e) => handleKeyDown(e, items, onchange),
-                    tabindex: disabled ? -1 : 0,
-                    'aria-expanded': state.isOpen ? 'true' : 'false',
-                    'aria-haspopup': 'listbox',
-                    role: 'combobox',
-                }, [
-                    m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
-                        id: state.id,
-                        value: title,
-                        oncreate: ({ dom }) => {
-                            state.inputRef = dom;
-                        },
-                        onclick: (e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            if (!disabled) {
-                                state.isOpen = !state.isOpen;
-                                state.focusedIndex = state.isOpen ? 0 : -1;
-                            }
-                        },
-                    }),
-                    // Dropdown Menu using Select component's positioning logic
-                    state.isOpen &&
-                        m('ul.dropdown-content.select-dropdown', {
-                            tabindex: 0,
-                            role: 'listbox',
-                            'aria-labelledby': state.id,
-                            oncreate: ({ dom }) => {
-                                state.dropdownRef = dom;
-                            },
-                            onremove: () => {
-                                state.dropdownRef = null;
-                            },
-                            style: getDropdownStyles(state.inputRef, true, items.map((item) => (Object.assign(Object.assign({}, item), { 
-                                // Convert dropdown items to format expected by getDropdownStyles
-                                group: undefined }))), true),
-                        }, items.map((item, index) => {
-                            if (item.divider) {
-                                return m('li.divider', {
-                                    key: `divider-${index}`,
-                                });
-                            }
-                            const itemIndex = availableItems.indexOf(item);
-                            const isFocused = itemIndex === state.focusedIndex;
-                            return m('li', Object.assign({ key: item.id || `item-${index}`, class: [
-                                    item.disabled ? 'disabled' : '',
-                                    isFocused ? 'focused' : '',
-                                    (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label ? 'selected' : '',
-                                ]
-                                    .filter(Boolean)
-                                    .join(' ') }, (item.disabled
-                                ? {}
-                                : {
-                                    onclick: (e) => {
-                                        e.stopPropagation();
-                                        const value = (item.id || item.label);
-                                        state.initialValue = value;
-                                        state.isOpen = false;
-                                        state.focusedIndex = -1;
-                                        if (onchange)
-                                            onchange(value);
-                                    },
-                                })), m('span', {
-                                style: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    padding: '14px 16px',
-                                },
-                            }, [
-                                item.iconName
-                                    ? m('i.material-icons', {
-                                        style: { marginRight: '32px' },
-                                    }, item.iconName)
-                                    : undefined,
-                                item.label,
-                            ]));
-                        })),
-                    m(MaterialIcon, {
-                        name: 'caret',
-                        direction: 'down',
-                        class: 'caret',
-                    }),
-                ]),
-            ]);
-        },
-    };
-};
-
-/**
- * Floating Action Button
- */
-const FloatingActionButton = () => {
-    const state = {
-        isOpen: false,
-    };
-    const handleClickOutside = (e) => {
-        const target = e.target;
-        if (!target.closest('.fixed-action-btn')) {
-            state.isOpen = false;
-        }
-    };
-    return {
-        oncreate: () => {
-            document.addEventListener('click', handleClickOutside);
-        },
-        onremove: () => {
-            document.removeEventListener('click', handleClickOutside);
-        },
-        view: ({ attrs: { className, iconName, iconClass, position, style = position === 'left' || position === 'inline-left'
-            ? 'position: absolute; display: inline-block; left: 24px;'
-            : position === 'right' || position === 'inline-right'
-                ? 'position: absolute; display: inline-block; right: 24px;'
-                : undefined, buttons, direction = 'top', hoverEnabled = true, }, }) => {
-            const fabClasses = [
-                'fixed-action-btn',
-                direction ? `direction-${direction}` : '',
-                state.isOpen ? 'active' : '',
-                // hoverEnabled ? 'hover-enabled' : '',
-            ]
-                .filter(Boolean)
-                .join(' ');
-            return m('div', {
-                style: position === 'inline-right' || position === 'inline-left' ? 'position: relative; height: 70px;' : undefined,
-            }, m(`.${fabClasses}`, {
-                style,
-                onclick: (e) => {
-                    e.stopPropagation();
-                    if (buttons && buttons.length > 0) {
-                        state.isOpen = !state.isOpen;
-                    }
-                },
-                onmouseover: hoverEnabled
-                    ? () => {
-                        if (buttons && buttons.length > 0) {
-                            state.isOpen = true;
-                        }
-                    }
-                    : undefined,
-                onmouseleave: hoverEnabled
-                    ? () => {
-                        state.isOpen = false;
-                    }
-                    : undefined,
-            }, [
-                m('a.btn-floating.btn-large', {
-                    className,
-                }, m('i.material-icons', { className: iconClass }, iconName)),
-                buttons &&
-                    buttons.length > 0 &&
-                    m('ul', buttons.map((button, index) => m('li', m(`a.btn-floating.${button.className || 'red'}`, {
-                        style: {
-                            opacity: state.isOpen ? '1' : '0',
-                            transform: state.isOpen ? 'scale(1)' : 'scale(0.4)',
-                            transition: `all 0.3s ease ${index * 40}ms`,
-                        },
-                        onclick: (e) => {
-                            e.stopPropagation();
-                            if (button.onClick)
-                                button.onClick(e);
-                        },
-                    }, m('i.material-icons', { className: button.iconClass }, button.iconName))))),
-            ]));
-        },
-    };
-};
-
 /** Character counter component that tracks text length against maxLength */
 const CharacterCounter = () => {
     return {
@@ -2452,7 +2216,8 @@ const InputField = (type, defaultClass = '') => () => {
                 : false;
             return m('.input-field', { className: cn, style }, [
                 iconName ? m('i.material-icons.prefix', iconName) : undefined,
-                m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id, 
+                m('input.validate', Object.assign(Object.assign({}, params), { type, tabindex: 0, id,
+                    placeholder, 
                     // attributes,
                     oncreate: ({ dom }) => {
                         const input = (state.inputElement = dom);
@@ -2587,80 +2352,1007 @@ const InputField = (type, defaultClass = '') => () => {
             ]);
         },
     };
-};
-/** Component for entering some text */
-const TextInput = InputField('text');
-/** Component for entering a password */
-const PasswordInput = InputField('password');
-/** Component for entering a number */
-const NumberInput = InputField('number');
-/** Component for entering a URL */
-const UrlInput = InputField('url');
-/** Component for entering a color */
-const ColorInput = InputField('color');
-/** Component for entering a range */
-const RangeInput = InputField('range', '.range-field');
-/** Component for entering an email */
-const EmailInput = InputField('email');
-/** Component for uploading a file */
-const FileInput = () => {
-    let canClear = false;
-    let i;
+};
+/** Component for entering some text */
+const TextInput = InputField('text');
+/** Component for entering a password */
+const PasswordInput = InputField('password');
+/** Component for entering a number */
+const NumberInput = InputField('number');
+/** Component for entering a URL */
+const UrlInput = InputField('url');
+/** Component for entering a color */
+const ColorInput = InputField('color');
+/** Component for entering a range */
+const RangeInput = InputField('range', '.range-field');
+/** Component for entering an email */
+const EmailInput = InputField('email');
+/** Component for uploading a file */
+const FileInput = () => {
+    let canClear = false;
+    let i;
+    return {
+        view: ({ attrs }) => {
+            const { multiple, disabled, initialValue, placeholder, onchange, className = 'col s12', accept: acceptedFiles, label = 'File', } = attrs;
+            const accept = acceptedFiles
+                ? acceptedFiles instanceof Array
+                    ? acceptedFiles.join(', ')
+                    : acceptedFiles
+                : undefined;
+            return m('.file-field.input-field', {
+                className: attrs.class || className,
+            }, [
+                m('.btn', [
+                    m('span', label),
+                    m('input[type=file]', {
+                        title: label,
+                        accept,
+                        multiple,
+                        disabled,
+                        onchange: onchange
+                            ? (e) => {
+                                const i = e.target;
+                                if (i && i.files && onchange) {
+                                    canClear = true;
+                                    onchange(i.files);
+                                }
+                            }
+                            : undefined,
+                    }),
+                ]),
+                m('.file-path-wrapper', m('input.file-path.validate[type=text]', {
+                    placeholder,
+                    oncreate: ({ dom }) => {
+                        i = dom;
+                        if (initialValue)
+                            i.value = initialValue;
+                    },
+                })),
+                (canClear || (i === null || i === void 0 ? void 0 : i.value)) &&
+                    m('a.waves-effect.waves-teal.btn-flat', {
+                        style: {
+                            float: 'right',
+                            position: 'relative',
+                            top: '-3rem',
+                            padding: 0,
+                        },
+                        onclick: () => {
+                            canClear = false;
+                            i.value = '';
+                            onchange && onchange({});
+                        },
+                    }, m(MaterialIcon, {
+                        name: 'close',
+                        className: 'close',
+                    })),
+            ]);
+        },
+    };
+};
+
+/** Component to show a check box */
+const InputCheckbox = () => {
+    return {
+        view: ({ attrs: { className = 'col s12', onchange, label, checked, disabled, description, style, inputId } }) => {
+            const checkboxId = inputId || uniqueId();
+            return m(`p`, { className, style }, m('label', { for: checkboxId }, [
+                m('input[type=checkbox][tabindex=0]', {
+                    id: checkboxId,
+                    checked,
+                    disabled,
+                    onclick: onchange
+                        ? (e) => {
+                            if (e.target && typeof e.target.checked !== 'undefined') {
+                                onchange(e.target.checked);
+                            }
+                        }
+                        : undefined,
+                }),
+                label ? (typeof label === 'string' ? m('span', label) : label) : undefined,
+            ]), description && m(HelperText, { className: 'input-checkbox-desc', helperText: description }));
+        },
+    };
+};
+/** A list of checkboxes */
+const Options = () => {
+    const state = {};
+    const isChecked = (id) => state.checkedIds.indexOf(id) >= 0;
+    const selectAll = (options, callback) => {
+        const allIds = options.map((option) => option.id);
+        state.checkedIds = [...allIds];
+        if (callback)
+            callback(allIds);
+    };
+    const selectNone = (callback) => {
+        state.checkedIds = [];
+        if (callback)
+            callback([]);
+    };
+    return {
+        oninit: ({ attrs: { initialValue, checkedId, id } }) => {
+            const iv = checkedId || initialValue;
+            state.checkedId = checkedId;
+            state.checkedIds = iv ? (iv instanceof Array ? [...iv] : [iv]) : [];
+            state.componentId = id || uniqueId();
+        },
+        view: ({ attrs: { label, options, description, className = 'col s12', style, disabled, checkboxClass, newRow, isMandatory, layout = 'vertical', showSelectAll = false, onchange: callback, }, }) => {
+            const onchange = callback
+                ? (propId, checked) => {
+                    const checkedIds = state.checkedIds.filter((i) => i !== propId);
+                    if (checked) {
+                        checkedIds.push(propId);
+                    }
+                    state.checkedIds = checkedIds;
+                    callback(checkedIds);
+                }
+                : undefined;
+            const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
+            const optionsContent = layout === 'horizontal'
+                ? m('div.grid-container', options.map((option) => m(InputCheckbox, {
+                    disabled: disabled || option.disabled,
+                    label: option.label,
+                    onchange: onchange ? (v) => onchange(option.id, v) : undefined,
+                    className: option.className || checkboxClass,
+                    checked: isChecked(option.id),
+                    description: option.description,
+                    inputId: `${state.componentId}-${option.id}`,
+                })))
+                : options.map((option) => m(InputCheckbox, {
+                    disabled: disabled || option.disabled,
+                    label: option.label,
+                    onchange: onchange ? (v) => onchange(option.id, v) : undefined,
+                    className: option.className || checkboxClass,
+                    checked: isChecked(option.id),
+                    description: option.description,
+                    inputId: `${state.componentId}-${option.id}`,
+                }));
+            return m('div', { id: state.componentId, className: cn, style }, [
+                label && m('h5.form-group-label', label + (isMandatory ? ' *' : '')),
+                showSelectAll &&
+                    m('div.select-all-controls', { style: 'margin-bottom: 10px;' }, [
+                        m('a', {
+                            href: '#',
+                            onclick: (e) => {
+                                e.preventDefault();
+                                selectAll(options, callback);
+                            },
+                            style: 'margin-right: 15px;',
+                        }, 'Select All'),
+                        m('a', {
+                            href: '#',
+                            onclick: (e) => {
+                                e.preventDefault();
+                                selectNone(callback);
+                            },
+                        }, 'Select None'),
+                    ]),
+                description && m(HelperText, { helperText: description }),
+                m('form', { action: '#' }, optionsContent),
+            ]);
+        },
+    };
+};
+
+const GlobalSearch = () => {
+    return {
+        view: ({ attrs }) => {
+            const { searchPlaceholder, onSearch, i18n } = attrs;
+            return m('.datatable-global-search', m(TextInput, {
+                className: 'datatable-search',
+                label: (i18n === null || i18n === void 0 ? void 0 : i18n.search) || 'Search',
+                placeholder: searchPlaceholder || (i18n === null || i18n === void 0 ? void 0 : i18n.searchPlaceholder) || 'Search table...',
+                oninput: onSearch,
+            }));
+        },
+    };
+};
+const TableHeader = () => {
+    return {
+        view: ({ attrs }) => {
+            const { columns, selection, sort, allSelected, helpers } = attrs;
+            return m('thead', m('tr', [
+                // Selection column header
+                ...(selection && selection.mode !== 'none'
+                    ? [
+                        m('th.selection-checkbox', [
+                            selection.mode === 'multiple' &&
+                                m(InputCheckbox, {
+                                    checked: allSelected,
+                                    onchange: helpers.handleSelectAll,
+                                    className: '',
+                                }),
+                        ]),
+                    ]
+                    : []),
+                // Regular columns
+                ...columns.map((column) => {
+                    const isSorted = (sort === null || sort === void 0 ? void 0 : sort.column) === column.key;
+                    const sortDirection = isSorted ? sort.direction : null;
+                    return m('th', {
+                        class: [
+                            column.headerClassName,
+                            column.sortable ? 'sortable' : '',
+                            isSorted ? `sorted-${sortDirection}` : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' '),
+                        style: column.width ? { width: column.width } : undefined,
+                        onclick: column.sortable ? () => helpers.handleSort(column.key) : undefined,
+                    }, [
+                        column.title,
+                        column.sortable &&
+                            m('.sort-indicators', [
+                                m('span.sort-icon.sort-asc', {
+                                    className: isSorted && sortDirection === 'asc' ? 'active' : '',
+                                }, '▲'),
+                                m('span.sort-icon.sort-desc', {
+                                    className: isSorted && sortDirection === 'desc' ? 'active' : '',
+                                }, '▼'),
+                            ]),
+                    ]);
+                }),
+            ]));
+        },
+    };
+};
+const TableRow = () => {
+    return {
+        view: ({ attrs }) => {
+            const { row, index, columns, selection, onRowClick, onRowDoubleClick, getRowClassName, helpers, data } = attrs;
+            // Calculate the original data index for the row key
+            const originalIndex = data.findIndex((originalRow) => originalRow === row);
+            const rowKey = (selection === null || selection === void 0 ? void 0 : selection.getRowKey(row, originalIndex)) || String(originalIndex);
+            const isSelected = (selection === null || selection === void 0 ? void 0 : selection.selectedKeys.includes(rowKey)) || false;
+            return m('tr', {
+                class: [getRowClassName ? getRowClassName(row, index) : '', isSelected ? 'selected' : '']
+                    .filter(Boolean)
+                    .join(' ') || undefined,
+                onclick: onRowClick ? (e) => onRowClick(row, index, e) : undefined,
+                ondblclick: onRowDoubleClick ? (e) => onRowDoubleClick(row, index, e) : undefined,
+            }, [
+                // Selection column
+                selection &&
+                    selection.mode !== 'none' &&
+                    m('td.selection-checkbox', [
+                        m(InputCheckbox, {
+                            checked: isSelected,
+                            onchange: (checked) => helpers.handleSelectionChange(rowKey, checked),
+                            className: '',
+                        }),
+                    ]),
+                columns.map((column) => {
+                    const value = helpers.getCellValue(row, column);
+                    let cellContent;
+                    if (column.cellRenderer) {
+                        cellContent = m(column.cellRenderer, {
+                            value,
+                            row,
+                            index,
+                            column,
+                        });
+                    }
+                    else if (column.render) {
+                        // Backward compatibility with deprecated render function
+                        cellContent = column.render(value, row, index);
+                    }
+                    else {
+                        cellContent = String(value || '');
+                    }
+                    return m('td', {
+                        class: [column.className, column.align ? `align-${column.align}` : ''].filter(Boolean).join(' ') ||
+                            undefined,
+                    }, cellContent);
+                }),
+            ]);
+        },
+    };
+};
+/**
+ * Standalone Pagination Controls component
+ *
+ * Provides navigation controls for paginated data with customizable text labels.
+ * Includes first page, previous page, next page, last page buttons and page info display.
+ * Can be used independently of DataTable for any paginated content.
+ *
+ * @example
+ * ```typescript
+ * m(PaginationControls, {
+ *   pagination: { page: 0, pageSize: 10, total: 100 },
+ *   onPaginationChange: (newPagination) => console.log('Page changed:', newPagination),
+ *   i18n: { showing: 'Showing', to: 'to', of: 'of', entries: 'entries', page: 'Page' }
+ * })
+ * ```
+ */
+const PaginationControls = () => {
+    return {
+        view: ({ attrs }) => {
+            const { pagination, onPaginationChange, i18n } = attrs;
+            if (!pagination)
+                return null;
+            const { page, pageSize, total } = pagination;
+            const totalPages = Math.ceil(total / pageSize);
+            const startItem = page * pageSize + 1;
+            const endItem = Math.min((page + 1) * pageSize, total);
+            const showingText = (i18n === null || i18n === void 0 ? void 0 : i18n.showing) || 'Showing';
+            const toText = (i18n === null || i18n === void 0 ? void 0 : i18n.to) || 'to';
+            const ofText = (i18n === null || i18n === void 0 ? void 0 : i18n.of) || 'of';
+            const entriesText = (i18n === null || i18n === void 0 ? void 0 : i18n.entries) || 'entries';
+            const pageText = (i18n === null || i18n === void 0 ? void 0 : i18n.page) || 'Page';
+            return m('.datatable-pagination', [
+                m('.pagination-info', `${showingText} ${startItem} ${toText} ${endItem} ${ofText} ${total} ${entriesText}`),
+                m('.pagination-controls', [
+                    m('button.btn-flat', {
+                        disabled: page === 0,
+                        onclick: () => onPaginationChange(Object.assign(Object.assign({}, pagination), { page: 0 })),
+                    }, '⏮'),
+                    m('button.btn-flat', {
+                        disabled: page === 0,
+                        onclick: () => onPaginationChange(Object.assign(Object.assign({}, pagination), { page: page - 1 })),
+                    }, '◀'),
+                    m('span.page-info', `${pageText} ${page + 1} ${ofText} ${totalPages}`),
+                    m('button.btn-flat', {
+                        disabled: page >= totalPages - 1,
+                        onclick: () => onPaginationChange(Object.assign(Object.assign({}, pagination), { page: page + 1 })),
+                    }, '▶'),
+                    m('button.btn-flat', {
+                        disabled: page >= totalPages - 1,
+                        onclick: () => onPaginationChange(Object.assign(Object.assign({}, pagination), { page: totalPages - 1 })),
+                    }, '⏭'),
+                ]),
+            ]);
+        },
+    };
+};
+const TableContent = () => {
+    return {
+        view: ({ attrs: contentAttrs }) => {
+            const { processedData, tableClasses, columns, selection, internalSort, allSelected, someSelected, helpers, onRowClick, onRowDoubleClick, getRowClassName, data, } = contentAttrs;
+            return m('table', {
+                class: tableClasses,
+            }, m(TableHeader(), {
+                columns,
+                selection,
+                sort: internalSort,
+                allSelected,
+                someSelected,
+                helpers,
+            }), m('tbody', processedData.map((row, index) => m(TableRow(), {
+                key: (selection === null || selection === void 0 ? void 0 : selection.getRowKey(row, data.findIndex((originalRow) => originalRow === row))) || index,
+                row,
+                index,
+                columns,
+                selection,
+                onRowClick,
+                onRowDoubleClick,
+                getRowClassName,
+                helpers,
+                data,
+            }))));
+        },
+    };
+};
+/**
+ * A comprehensive data table component with sorting, filtering, pagination, and selection capabilities.
+ *
+ * @template T The type of data objects displayed in each row
+ *
+ * @description
+ * The DataTable component provides a feature-rich interface for displaying and interacting with tabular data.
+ * It supports both controlled and uncontrolled modes for all interactive features.
+ *
+ * **Key Features:**
+ * - Sorting: Click column headers to sort data ascending/descending
+ * - Filtering: Global search across filterable columns
+ * - Pagination: Navigate through large datasets with customizable page sizes
+ * - Selection: Single or multiple row selection with callbacks
+ * - Custom rendering: Use cellRenderer for complex cell content
+ * - Responsive: Adapts to different screen sizes
+ * - Internationalization: Customize all UI text
+ * - Accessibility: Proper ARIA attributes and keyboard navigation
+ *
+ * @example Basic usage
+ * ```typescript
+ * interface User { id: number; name: string; email: string; }
+ * const users: User[] = [...];
+ * const columns: DataTableColumn<User>[] = [
+ *   { key: 'name', title: 'Name', field: 'name', sortable: true, filterable: true },
+ *   { key: 'email', title: 'Email', field: 'email', sortable: true, filterable: true }
+ * ];
+ *
+ * return m(DataTable<User>, { data: users, columns });
+ * ```
+ *
+ * @example Advanced usage with all features
+ * ```typescript
+ * return m(DataTable<User>, {
+ *   data: users,
+ *   columns,
+ *   title: 'User Management',
+ *   striped: true,
+ *   hoverable: true,
+ *   height: 400,
+ *
+ *   // Pagination
+ *   pagination: { page: 0, pageSize: 10, total: users.length },
+ *   onPaginationChange: (pagination) => console.log('Page changed:', pagination),
+ *
+ *   // Selection
+ *   selection: {
+ *     mode: 'multiple',
+ *     selectedKeys: [],
+ *     getRowKey: (user) => String(user.id),
+ *     onSelectionChange: (keys, selectedUsers) => console.log('Selection:', selectedUsers)
+ *   },
+ *
+ *   // Search
+ *   enableGlobalSearch: true,
+ *   searchPlaceholder: 'Search users...',
+ *
+ *   // Events
+ *   onRowClick: (user, index, event) => console.log('Clicked:', user),
+ *   onRowDoubleClick: (user) => editUser(user),
+ *
+ *   // Styling
+ *   getRowClassName: (user) => user.active ? '' : 'inactive-row'
+ * });
+ * ```
+ *
+ * @returns A Mithril component that renders the data table
+ */
+const DataTable = () => {
+    const state = {
+        internalSort: undefined,
+        internalFilter: undefined,
+        internalPagination: undefined,
+        processedData: [],
+        tableId: '',
+        // Performance optimization caches
+        lastProcessedHash: ''};
+    // Helper functions
+    const quickDataHash = (data) => {
+        if (data.length === 0)
+            return '0';
+        if (data.length === 1)
+            return '1';
+        // Sample first, middle, and last items for quick hash
+        const first = JSON.stringify(data[0]);
+        const middle = data.length > 2 ? JSON.stringify(data[Math.floor(data.length / 2)]) : '';
+        const last = JSON.stringify(data[data.length - 1]);
+        return `${data.length}-${first.length}-${middle.length}-${last.length}`;
+    };
+    const getDataHash = (attrs) => {
+        const { data, sort, filter, pagination } = attrs;
+        const { internalSort, internalFilter, internalPagination } = state;
+        const hashInputs = {
+            dataLength: data.length,
+            dataHash: quickDataHash(data),
+            sort: sort || internalSort,
+            filter: filter || internalFilter,
+            pagination: pagination || internalPagination,
+        };
+        return JSON.stringify(hashInputs);
+    };
+    const getCellValue = (row, column) => {
+        if (column.field) {
+            return row[column.field];
+        }
+        return row;
+    };
+    const applyFiltering = (data, filter, columns) => {
+        var _a;
+        if (!filter.searchTerm && !filter.columnFilters)
+            return data;
+        const filterableColumns = columns.filter((col) => col.filterable);
+        if (filterableColumns.length === 0 && !filter.searchTerm)
+            return data;
+        const searchTerm = (_a = filter.searchTerm) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        const hasColumnFilters = filter.columnFilters &&
+            Object.keys(filter.columnFilters).some((key) => {
+                const value = filter.columnFilters[key];
+                return value !== null && value !== undefined && value !== '';
+            });
+        return data.filter((row) => {
+            // Global search
+            if (searchTerm) {
+                const matchesGlobal = filterableColumns.some((column) => {
+                    const value = getCellValue(row, column);
+                    if (value == null)
+                        return false;
+                    return String(value).toLowerCase().includes(searchTerm);
+                });
+                if (!matchesGlobal)
+                    return false;
+            }
+            // Column-specific filters
+            if (hasColumnFilters) {
+                const matchesColumnFilters = Object.entries(filter.columnFilters).every(([columnKey, filterValue]) => {
+                    if (filterValue === null || filterValue === undefined || filterValue === '')
+                        return true;
+                    const column = columns.find((col) => col.key === columnKey);
+                    if (!column)
+                        return true;
+                    const value = getCellValue(row, column);
+                    if (value == null)
+                        return false;
+                    return String(value).toLowerCase().includes(String(filterValue).toLowerCase());
+                });
+                if (!matchesColumnFilters)
+                    return false;
+            }
+            return true;
+        });
+    };
+    const applySorting = (data, sort, columns) => {
+        const column = columns.find((col) => col.key === sort.column);
+        if (!column || !column.sortable)
+            return data;
+        const multiplier = sort.direction === 'asc' ? 1 : -1;
+        return [...data].sort((a, b) => {
+            const aValue = getCellValue(a, column);
+            const bValue = getCellValue(b, column);
+            // Handle null/undefined values
+            if (aValue == null && bValue == null)
+                return 0;
+            if (aValue == null)
+                return -1 * multiplier;
+            if (bValue == null)
+                return 1 * multiplier;
+            // Type-specific comparisons
+            const aType = typeof aValue;
+            const bType = typeof bValue;
+            if (aType === bType) {
+                if (aType === 'number') {
+                    return (aValue - bValue) * multiplier;
+                }
+                if (aType === 'boolean') {
+                    return (aValue === bValue ? 0 : aValue ? 1 : -1) * multiplier;
+                }
+                if (aValue instanceof Date && bValue instanceof Date) {
+                    return (aValue.getTime() - bValue.getTime()) * multiplier;
+                }
+            }
+            // Fallback to string comparison
+            return String(aValue).localeCompare(String(bValue)) * multiplier;
+        });
+    };
+    const processData = (attrs) => {
+        const { data } = attrs;
+        const { internalSort, internalFilter, internalPagination } = state;
+        let processedData = [...data];
+        // Apply filtering
+        if (internalFilter) {
+            processedData = applyFiltering(processedData, internalFilter, attrs.columns);
+        }
+        // Apply sorting
+        if (internalSort) {
+            processedData = applySorting(processedData, internalSort, attrs.columns);
+        }
+        // Update total count for pagination
+        if (internalPagination) {
+            state.internalPagination = Object.assign(Object.assign({}, internalPagination), { total: processedData.length });
+        }
+        // Apply pagination
+        if (internalPagination) {
+            const { page, pageSize } = internalPagination;
+            const start = page * pageSize;
+            const end = start + pageSize;
+            processedData = processedData.slice(start, end);
+        }
+        state.processedData = processedData;
+    };
+    // Create stable helper functions that don't get recreated on every render
+    const createHelpers = (attrs) => ({
+        getCellValue,
+        handleSort: (columnKey) => {
+            var _a;
+            const column = attrs.columns.find((col) => col.key === columnKey);
+            if (!column || !column.sortable)
+                return;
+            const currentSort = state.internalSort;
+            let newSort;
+            if ((currentSort === null || currentSort === void 0 ? void 0 : currentSort.column) === columnKey) {
+                // Toggle direction
+                if (currentSort.direction === 'asc') {
+                    newSort = { column: columnKey, direction: 'desc' };
+                }
+                else {
+                    newSort = { column: columnKey, direction: 'asc' };
+                }
+            }
+            else {
+                // New column sort
+                newSort = { column: columnKey, direction: 'asc' };
+            }
+            state.internalSort = newSort;
+            (_a = attrs.onSortChange) === null || _a === void 0 ? void 0 : _a.call(attrs, newSort);
+        },
+        handleGlobalSearch: (searchTerm) => {
+            var _a;
+            const newFilter = Object.assign(Object.assign({}, state.internalFilter), { searchTerm });
+            state.internalFilter = newFilter;
+            // Reset pagination to first page when filtering
+            if (state.internalPagination) {
+                state.internalPagination = Object.assign(Object.assign({}, state.internalPagination), { page: 0 });
+            }
+            (_a = attrs.onFilterChange) === null || _a === void 0 ? void 0 : _a.call(attrs, newFilter);
+        },
+        handleSelectionChange: (rowKey, selected) => {
+            var _a, _b;
+            if (!attrs.selection)
+                return;
+            let newSelectedKeys;
+            if (attrs.selection.mode === 'single') {
+                newSelectedKeys = selected ? [rowKey] : [];
+            }
+            else if (attrs.selection.mode === 'multiple') {
+                if (selected) {
+                    newSelectedKeys = [...attrs.selection.selectedKeys, rowKey];
+                }
+                else {
+                    newSelectedKeys = attrs.selection.selectedKeys.filter((key) => key !== rowKey);
+                }
+            }
+            else {
+                return; // No selection mode
+            }
+            // Get selected rows
+            const selectedRows = attrs.data.filter((row, index) => {
+                const key = attrs.selection.getRowKey(row, index);
+                return newSelectedKeys.includes(key);
+            });
+            (_b = (_a = attrs.selection).onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(_a, newSelectedKeys, selectedRows);
+        },
+        handleSelectAll: (selected) => {
+            var _a, _b;
+            if (!attrs.selection || attrs.selection.mode !== 'multiple')
+                return;
+            let newSelectedKeys;
+            if (selected) {
+                // Select all visible rows
+                newSelectedKeys = state.processedData.map((row) => {
+                    const originalIndex = attrs.data.findIndex((originalRow) => originalRow === row);
+                    return attrs.selection.getRowKey(row, originalIndex);
+                });
+            }
+            else {
+                newSelectedKeys = [];
+            }
+            const selectedRows = attrs.data.filter((row, index) => {
+                const key = attrs.selection.getRowKey(row, index);
+                return newSelectedKeys.includes(key);
+            });
+            (_b = (_a = attrs.selection).onSelectionChange) === null || _b === void 0 ? void 0 : _b.call(_a, newSelectedKeys, selectedRows);
+        },
+    });
+    return {
+        oninit(vnodeInit) {
+            const { sort, filter, pagination } = vnodeInit.attrs;
+            state.tableId = uniqueId();
+            state.internalSort = sort || undefined;
+            state.internalFilter = filter || { searchTerm: '', columnFilters: {} };
+            state.internalPagination = pagination || undefined;
+            processData(vnodeInit.attrs);
+        },
+        onbeforeupdate(vnodeUpdate) {
+            // Only reprocess data if inputs have changed
+            const currentHash = getDataHash(vnodeUpdate.attrs);
+            if (currentHash !== state.lastProcessedHash) {
+                processData(vnodeUpdate.attrs);
+                state.lastProcessedHash = currentHash;
+            }
+        },
+        view(vnodeView) {
+            const attrs = vnodeView.attrs;
+            const { loading, emptyMessage, striped, hoverable, responsive, centered, className, id, title, height, enableGlobalSearch, searchPlaceholder, selection, columns, onRowClick, onRowDoubleClick, getRowClassName, data, onPaginationChange, i18n, } = attrs;
+            const { processedData, tableId, internalSort, internalPagination } = state;
+            if (loading) {
+                return m('.datatable-loading', [
+                    m('.preloader-wrapper.small.active', m('.spinner-layer.spinner-blue-only', m('.circle-clipper.left', m('.circle')))),
+                    m('p', (i18n === null || i18n === void 0 ? void 0 : i18n.loading) || 'Loading...'),
+                ]);
+            }
+            // Create stable helpers object using the factory function
+            const helpers = createHelpers(attrs);
+            // Calculate selection state for "select all" checkbox
+            let allSelected = false;
+            let someSelected = false;
+            if (selection && selection.mode === 'multiple') {
+                const visibleRowKeys = processedData.map((row) => {
+                    const originalIndex = data.findIndex((originalRow) => originalRow === row);
+                    return selection.getRowKey(row, originalIndex);
+                });
+                const selectedVisibleKeys = visibleRowKeys.filter((key) => selection.selectedKeys.includes(key));
+                allSelected = visibleRowKeys.length > 0 && selectedVisibleKeys.length === visibleRowKeys.length;
+                someSelected = selectedVisibleKeys.length > 0 && selectedVisibleKeys.length < visibleRowKeys.length;
+            }
+            const tableClasses = [
+                'datatable',
+                striped ? 'striped' : '',
+                hoverable ? 'highlight' : '',
+                responsive ? 'responsive-table' : '',
+                centered ? 'centered' : '',
+                className || '',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            return m('.datatable-container', {
+                id: id || tableId,
+            }, title && m('h5.datatable-title', title), enableGlobalSearch &&
+                m(GlobalSearch, {
+                    searchPlaceholder,
+                    onSearch: helpers.handleGlobalSearch,
+                    i18n,
+                }), m('.datatable-wrapper', {
+                style: {
+                    maxHeight: height ? `${height}px` : undefined,
+                    overflowY: height ? 'auto' : undefined,
+                },
+            }, processedData.length === 0
+                ? m('.datatable-empty', emptyMessage || (i18n === null || i18n === void 0 ? void 0 : i18n.noDataAvailable) || 'No data available')
+                : m(TableContent(), {
+                    processedData,
+                    height,
+                    tableClasses,
+                    columns,
+                    selection,
+                    internalSort,
+                    allSelected,
+                    someSelected,
+                    helpers,
+                    onRowClick,
+                    onRowDoubleClick,
+                    getRowClassName,
+                    data,
+                })), m(PaginationControls, {
+                pagination: internalPagination,
+                onPaginationChange: (pagination) => {
+                    state.internalPagination = pagination;
+                    onPaginationChange === null || onPaginationChange === void 0 ? void 0 : onPaginationChange(pagination);
+                },
+                i18n,
+            }));
+        },
+    };
+};
+
+/** Pure TypeScript Dropdown component - no Materialize dependencies */
+const Dropdown = () => {
+    const state = {
+        isOpen: false,
+        initialValue: undefined,
+        id: '',
+        focusedIndex: -1,
+        inputRef: null,
+        dropdownRef: null,
+    };
+    const handleKeyDown = (e, items, onchange) => {
+        const availableItems = items.filter((item) => !item.divider && !item.disabled);
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!state.isOpen) {
+                    state.isOpen = true;
+                    state.focusedIndex = 0;
+                }
+                else {
+                    state.focusedIndex = Math.min(state.focusedIndex + 1, availableItems.length - 1);
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                if (state.isOpen) {
+                    state.focusedIndex = Math.max(state.focusedIndex - 1, 0);
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (state.isOpen && state.focusedIndex >= 0 && state.focusedIndex < availableItems.length) {
+                    const selectedItem = availableItems[state.focusedIndex];
+                    const value = (selectedItem.id || selectedItem.label);
+                    state.initialValue = value;
+                    state.isOpen = false;
+                    state.focusedIndex = -1;
+                    if (onchange)
+                        onchange(value);
+                }
+                else if (!state.isOpen) {
+                    state.isOpen = true;
+                    state.focusedIndex = 0;
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                state.isOpen = false;
+                state.focusedIndex = -1;
+                break;
+        }
+    };
+    return {
+        oninit: ({ attrs: { id = uniqueId(), initialValue, checkedId } }) => {
+            state.id = id;
+            state.initialValue = initialValue || checkedId;
+            // Mithril will handle click events through the component structure
+        },
+        view: ({ attrs: { key, label, onchange, disabled = false, items, iconName, helperText, style, className = 'col s12' }, }) => {
+            const { initialValue } = state;
+            const selectedItem = initialValue
+                ? items.filter((i) => (i.id ? i.id === initialValue : i.label === initialValue)).shift()
+                : undefined;
+            const title = selectedItem ? selectedItem.label : label || 'Select';
+            const availableItems = items.filter((item) => !item.divider && !item.disabled);
+            return m('.dropdown-wrapper.input-field', { className, key, style }, [
+                iconName ? m('i.material-icons.prefix', iconName) : undefined,
+                m(HelperText, { helperText }),
+                m('.select-wrapper', {
+                    onclick: disabled
+                        ? undefined
+                        : () => {
+                            state.isOpen = !state.isOpen;
+                            state.focusedIndex = state.isOpen ? 0 : -1;
+                        },
+                    onkeydown: disabled ? undefined : (e) => handleKeyDown(e, items, onchange),
+                    tabindex: disabled ? -1 : 0,
+                    'aria-expanded': state.isOpen ? 'true' : 'false',
+                    'aria-haspopup': 'listbox',
+                    role: 'combobox',
+                }, [
+                    m('input[type=text][readonly=true].select-dropdown.dropdown-trigger', {
+                        id: state.id,
+                        value: title,
+                        oncreate: ({ dom }) => {
+                            state.inputRef = dom;
+                        },
+                        onclick: (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (!disabled) {
+                                state.isOpen = !state.isOpen;
+                                state.focusedIndex = state.isOpen ? 0 : -1;
+                            }
+                        },
+                    }),
+                    // Dropdown Menu using Select component's positioning logic
+                    state.isOpen &&
+                        m('ul.dropdown-content.select-dropdown', {
+                            tabindex: 0,
+                            role: 'listbox',
+                            'aria-labelledby': state.id,
+                            oncreate: ({ dom }) => {
+                                state.dropdownRef = dom;
+                            },
+                            onremove: () => {
+                                state.dropdownRef = null;
+                            },
+                            style: getDropdownStyles(state.inputRef, true, items.map((item) => (Object.assign(Object.assign({}, item), { 
+                                // Convert dropdown items to format expected by getDropdownStyles
+                                group: undefined }))), true),
+                        }, items.map((item, index) => {
+                            if (item.divider) {
+                                return m('li.divider', {
+                                    key: `divider-${index}`,
+                                });
+                            }
+                            const itemIndex = availableItems.indexOf(item);
+                            const isFocused = itemIndex === state.focusedIndex;
+                            return m('li', Object.assign({ key: item.id || `item-${index}`, class: [
+                                    item.disabled ? 'disabled' : '',
+                                    isFocused ? 'focused' : '',
+                                    (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.id) === item.id || (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) === item.label ? 'selected' : '',
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ') }, (item.disabled
+                                ? {}
+                                : {
+                                    onclick: (e) => {
+                                        e.stopPropagation();
+                                        const value = (item.id || item.label);
+                                        state.initialValue = value;
+                                        state.isOpen = false;
+                                        state.focusedIndex = -1;
+                                        if (onchange)
+                                            onchange(value);
+                                    },
+                                })), m('span', {
+                                style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    padding: '14px 16px',
+                                },
+                            }, [
+                                item.iconName
+                                    ? m('i.material-icons', {
+                                        style: { marginRight: '32px' },
+                                    }, item.iconName)
+                                    : undefined,
+                                item.label,
+                            ]));
+                        })),
+                    m(MaterialIcon, {
+                        name: 'caret',
+                        direction: 'down',
+                        class: 'caret',
+                    }),
+                ]),
+            ]);
+        },
+    };
+};
+
+/**
+ * Floating Action Button
+ */
+const FloatingActionButton = () => {
+    const state = {
+        isOpen: false,
+    };
+    const handleClickOutside = (e) => {
+        const target = e.target;
+        if (!target.closest('.fixed-action-btn')) {
+            state.isOpen = false;
+        }
+    };
     return {
-        view: ({ attrs }) => {
-            const { multiple, disabled, initialValue, placeholder, onchange, className = 'col s12', accept: acceptedFiles, label = 'File', } = attrs;
-            const accept = acceptedFiles
-                ? acceptedFiles instanceof Array
-                    ? acceptedFiles.join(', ')
-                    : acceptedFiles
-                : undefined;
-            return m('.file-field.input-field', {
-                className: attrs.class || className,
+        oncreate: () => {
+            document.addEventListener('click', handleClickOutside);
+        },
+        onremove: () => {
+            document.removeEventListener('click', handleClickOutside);
+        },
+        view: ({ attrs: { className, iconName, iconClass, position, style = position === 'left' || position === 'inline-left'
+            ? 'position: absolute; display: inline-block; left: 24px;'
+            : position === 'right' || position === 'inline-right'
+                ? 'position: absolute; display: inline-block; right: 24px;'
+                : undefined, buttons, direction = 'top', hoverEnabled = true, }, }) => {
+            const fabClasses = [
+                'fixed-action-btn',
+                direction ? `direction-${direction}` : '',
+                state.isOpen ? 'active' : '',
+                // hoverEnabled ? 'hover-enabled' : '',
+            ]
+                .filter(Boolean)
+                .join(' ');
+            return m('div', {
+                style: position === 'inline-right' || position === 'inline-left' ? 'position: relative; height: 70px;' : undefined,
+            }, m(`.${fabClasses}`, {
+                style,
+                onclick: (e) => {
+                    e.stopPropagation();
+                    if (buttons && buttons.length > 0) {
+                        state.isOpen = !state.isOpen;
+                    }
+                },
+                onmouseover: hoverEnabled
+                    ? () => {
+                        if (buttons && buttons.length > 0) {
+                            state.isOpen = true;
+                        }
+                    }
+                    : undefined,
+                onmouseleave: hoverEnabled
+                    ? () => {
+                        state.isOpen = false;
+                    }
+                    : undefined,
             }, [
-                m('.btn', [
-                    m('span', label),
-                    m('input[type=file]', {
-                        title: label,
-                        accept,
-                        multiple,
-                        disabled,
-                        onchange: onchange
-                            ? (e) => {
-                                const i = e.target;
-                                if (i && i.files && onchange) {
-                                    canClear = true;
-                                    onchange(i.files);
-                                }
-                            }
-                            : undefined,
-                    }),
-                ]),
-                m('.file-path-wrapper', m('input.file-path.validate[type=text]', {
-                    placeholder,
-                    oncreate: ({ dom }) => {
-                        i = dom;
-                        if (initialValue)
-                            i.value = initialValue;
-                    },
-                })),
-                (canClear || (i === null || i === void 0 ? void 0 : i.value)) &&
-                    m('a.waves-effect.waves-teal.btn-flat', {
+                m('a.btn-floating.btn-large', {
+                    className,
+                }, m('i.material-icons', { className: iconClass }, iconName)),
+                buttons &&
+                    buttons.length > 0 &&
+                    m('ul', buttons.map((button, index) => m('li', m(`a.btn-floating.${button.className || 'red'}`, {
                         style: {
-                            float: 'right',
-                            position: 'relative',
-                            top: '-3rem',
-                            padding: 0,
+                            opacity: state.isOpen ? '1' : '0',
+                            transform: state.isOpen ? 'scale(1)' : 'scale(0.4)',
+                            transition: `all 0.3s ease ${index * 40}ms`,
                         },
-                        onclick: () => {
-                            canClear = false;
-                            i.value = '';
-                            onchange && onchange({});
+                        onclick: (e) => {
+                            e.stopPropagation();
+                            if (button.onClick)
+                                button.onClick(e);
                         },
-                    }, m(MaterialIcon, {
-                        name: 'close',
-                        className: 'close',
-                    })),
-            ]);
+                    }, m('i.material-icons', { className: button.iconClass }, button.iconName))))),
+            ]));
         },
     };
 };
@@ -2946,21 +3638,23 @@ const ModalPanel = () => {
                     role: 'dialog',
                     'aria-labelledby': `${id}-title`,
                     'aria-describedby': description ? `${id}-desc` : undefined,
-                    style: {
-                        display: state.isOpen ? 'block' : 'none',
-                        position: 'fixed',
+                    style: Object.assign(Object.assign({ display: state.isOpen ? 'flex' : 'none', position: 'fixed' }, (bottomSheet ? {
+                        // Bottom sheet positioning
+                        top: 'auto',
+                        bottom: '0',
+                        left: '0',
+                        right: '0',
+                        transform: 'none',
+                        maxWidth: '100%',
+                        borderRadius: '8px 8px 0 0',
+                    } : {
+                        // Regular modal positioning
                         top: '50%',
                         left: '50%',
                         transform: 'translate(-50%, -50%)',
-                        backgroundColor: '#fff',
-                        borderRadius: '4px',
                         maxWidth: '75%',
-                        maxHeight: '85%',
-                        overflow: 'auto',
-                        zIndex: '1003',
-                        padding: '0',
-                        boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)',
-                    },
+                        borderRadius: '4px',
+                    })), { backgroundColor: 'var(--mm-modal-background, #fff)', maxHeight: '85%', overflow: 'auto', zIndex: '1003', padding: '0', flexDirection: 'column', boxShadow: '0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.20)' }),
                     onclick: (e) => e.stopPropagation(), // Prevent backdrop click when clicking inside modal
                 }, [
                     // Close button
@@ -2980,7 +3674,12 @@ const ModalPanel = () => {
                         }, '×'),
                     // Modal content
                     m('.modal-content', {
-                        style: { padding: '24px', paddingTop: showCloseButton ? '48px' : '24px' },
+                        style: {
+                            padding: '24px',
+                            paddingTop: showCloseButton ? '48px' : '24px',
+                            minHeight: 'auto',
+                            flex: '1 1 auto',
+                        },
                     }, [
                         m('h4', { id: `${id}-title`, style: { margin: '0 0 20px 0' } }, title),
                         description &&
@@ -2992,7 +3691,7 @@ const ModalPanel = () => {
                         m('.modal-footer', {
                             style: {
                                 padding: '4px 6px',
-                                borderTop: '1px solid rgba(160,160,160,0.2)',
+                                borderTop: '1px solid var(--mm-border-color, rgba(160,160,160,0.2))',
                                 textAlign: 'right',
                             },
                         }, buttons.map((buttonProps) => m(FlatButton, Object.assign(Object.assign({}, buttonProps), { className: `modal-close ${buttonProps.className || ''}`, onclick: (e) => {
@@ -3006,109 +3705,6 @@ const ModalPanel = () => {
     };
 };
 
-/** Component to show a check box */
-const InputCheckbox = () => {
-    return {
-        view: ({ attrs: { className = 'col s12', onchange, label, checked, disabled, description, style, inputId } }) => {
-            const checkboxId = inputId || uniqueId();
-            return m(`p`, { className, style }, m('label', { for: checkboxId }, [
-                m('input[type=checkbox][tabindex=0]', {
-                    id: checkboxId,
-                    checked,
-                    disabled,
-                    onclick: onchange
-                        ? (e) => {
-                            if (e.target && typeof e.target.checked !== 'undefined') {
-                                onchange(e.target.checked);
-                            }
-                        }
-                        : undefined,
-                }),
-                label ? (typeof label === 'string' ? m('span', label) : label) : undefined,
-            ]), description && m(HelperText, { className: 'input-checkbox-desc', helperText: description }));
-        },
-    };
-};
-/** A list of checkboxes */
-const Options = () => {
-    const state = {};
-    const isChecked = (id) => state.checkedIds.indexOf(id) >= 0;
-    const selectAll = (options, callback) => {
-        const allIds = options.map((option) => option.id);
-        state.checkedIds = [...allIds];
-        if (callback)
-            callback(allIds);
-    };
-    const selectNone = (callback) => {
-        state.checkedIds = [];
-        if (callback)
-            callback([]);
-    };
-    return {
-        oninit: ({ attrs: { initialValue, checkedId, id } }) => {
-            const iv = checkedId || initialValue;
-            state.checkedId = checkedId;
-            state.checkedIds = iv ? (iv instanceof Array ? [...iv] : [iv]) : [];
-            state.componentId = id || uniqueId();
-        },
-        view: ({ attrs: { label, options, description, className = 'col s12', style, disabled, checkboxClass, newRow, isMandatory, layout = 'vertical', showSelectAll = false, onchange: callback, }, }) => {
-            const onchange = callback
-                ? (propId, checked) => {
-                    const checkedIds = state.checkedIds.filter((i) => i !== propId);
-                    if (checked) {
-                        checkedIds.push(propId);
-                    }
-                    state.checkedIds = checkedIds;
-                    callback(checkedIds);
-                }
-                : undefined;
-            const cn = [newRow ? 'clear' : '', className].filter(Boolean).join(' ').trim();
-            const optionsContent = layout === 'horizontal'
-                ? m('div.grid-container', options.map((option) => m(InputCheckbox, {
-                    disabled: disabled || option.disabled,
-                    label: option.label,
-                    onchange: onchange ? (v) => onchange(option.id, v) : undefined,
-                    className: option.className || checkboxClass,
-                    checked: isChecked(option.id),
-                    description: option.description,
-                    inputId: `${state.componentId}-${option.id}`,
-                })))
-                : options.map((option) => m(InputCheckbox, {
-                    disabled: disabled || option.disabled,
-                    label: option.label,
-                    onchange: onchange ? (v) => onchange(option.id, v) : undefined,
-                    className: option.className || checkboxClass,
-                    checked: isChecked(option.id),
-                    description: option.description,
-                    inputId: `${state.componentId}-${option.id}`,
-                }));
-            return m('div', { id: state.componentId, className: cn, style }, [
-                label && m('h5.form-group-label', label + (isMandatory ? ' *' : '')),
-                showSelectAll &&
-                    m('div.select-all-controls', { style: 'margin-bottom: 10px;' }, [
-                        m('a', {
-                            href: '#',
-                            onclick: (e) => {
-                                e.preventDefault();
-                                selectAll(options, callback);
-                            },
-                            style: 'margin-right: 15px;',
-                        }, 'Select All'),
-                        m('a', {
-                            href: '#',
-                            onclick: (e) => {
-                                e.preventDefault();
-                                selectNone(callback);
-                            },
-                        }, 'Select None'),
-                    ]),
-                description && m(HelperText, { helperText: description }),
-                m('form', { action: '#' }, optionsContent),
-            ]);
-        },
-    };
-};
-
 const PaginationItem = () => ({
     view: ({ attrs: { title, href, active, disabled } }) => m('li', { className: active ? 'active' : disabled ? 'disabled' : 'waves-effect' }, typeof title === 'number' ? m(m.route.Link, { href }, title) : title),
 });
@@ -3373,12 +3969,15 @@ const TimePicker = () => {
     };
     const updateTimeFromInput = (inputValue) => {
         let value = ((inputValue || options.defaultTime || '') + '').split(':');
+        let amPmWasProvided = false;
         if (options.twelveHour && value.length > 1) {
             if (value[1].toUpperCase().indexOf('AM') > -1) {
                 state.amOrPm = 'AM';
+                amPmWasProvided = true;
             }
             else if (value[1].toUpperCase().indexOf('PM') > -1) {
                 state.amOrPm = 'PM';
+                amPmWasProvided = true;
             }
             value[1] = value[1].replace('AM', '').replace('PM', '').trim();
         }
@@ -3387,21 +3986,33 @@ const TimePicker = () => {
             value = [now.getHours().toString(), now.getMinutes().toString()];
             if (options.twelveHour) {
                 state.amOrPm = parseInt(value[0]) >= 12 ? 'PM' : 'AM';
+                amPmWasProvided = false; // For 'now', we need to do conversion
             }
         }
         let hours = +value[0] || 0;
         let minutes = +value[1] || 0;
-        // Handle 24-hour to 12-hour conversion if needed
-        if (options.twelveHour && hours >= 12) {
-            state.amOrPm = 'PM';
-            if (hours > 12) {
-                hours = hours - 12;
+        if (options.twelveHour) {
+            if (!amPmWasProvided) {
+                // No AM/PM was provided, assume this is 24-hour format input - convert it
+                if (hours >= 12) {
+                    state.amOrPm = 'PM';
+                    if (hours > 12) {
+                        hours = hours - 12;
+                    }
+                }
+                else {
+                    state.amOrPm = 'AM';
+                    if (hours === 0) {
+                        hours = 12;
+                    }
+                }
             }
-        }
-        else if (options.twelveHour && hours < 12) {
-            state.amOrPm = 'AM';
-            if (hours === 0) {
-                hours = 12;
+            else {
+                // AM/PM was provided, hours are already in 12-hour format
+                // Just handle midnight/noon edge cases
+                if (hours === 0 && state.amOrPm === 'AM') {
+                    hours = 12;
+                }
             }
         }
         state.hours = hours;
@@ -6187,6 +6798,27 @@ const Stepper = () => {
     };
 };
 
+/**
+ * @fileoverview Core TypeScript utility types for mithril-materialized library
+ * These types improve type safety and developer experience across all components
+ */
+/**
+ * Type guard to check if validation result indicates success
+ * @param result - The validation result to check
+ * @returns True if validation passed
+ */
+const isValidationSuccess = (result) => result === true || result === '';
+/**
+ * Type guard to check if validation result indicates an error
+ * @param result - The validation result to check
+ * @returns True if validation failed
+ */
+const isValidationError = (result) => !isValidationSuccess(result);
+// ============================================================================
+// EXPORTS
+// ============================================================================
+// All types are already exported via individual export declarations above
+
 exports.AnchorItem = AnchorItem;
 exports.Autocomplete = Autocomplete;
 exports.Breadcrumb = Breadcrumb;
@@ -6201,6 +6833,7 @@ exports.Collapsible = Collapsible;
 exports.CollapsibleItem = CollapsibleItem;
 exports.Collection = Collection;
 exports.ColorInput = ColorInput;
+exports.DataTable = DataTable;
 exports.DatePicker = DatePicker;
 exports.Dropdown = Dropdown;
 exports.EmailInput = EmailInput;
@@ -6220,6 +6853,7 @@ exports.ModalPanel = ModalPanel;
 exports.NumberInput = NumberInput;
 exports.Options = Options;
 exports.Pagination = Pagination;
+exports.PaginationControls = PaginationControls;
 exports.Parallax = Parallax;
 exports.PasswordInput = PasswordInput;
 exports.Pushpin = Pushpin;
@@ -6256,6 +6890,8 @@ exports.getDropdownStyles = getDropdownStyles;
 exports.initPushpins = initPushpins;
 exports.initTooltips = initTooltips;
 exports.isNumeric = isNumeric;
+exports.isValidationError = isValidationError;
+exports.isValidationSuccess = isValidationSuccess;
 exports.padLeft = padLeft;
 exports.range = range;
 exports.toast = toast;