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

package/dist/search-select.d.ts

@@ -4,7 +4,7 @@ export interface Option<T extends string | number> {
     label?: string;
     disabled?: boolean;
 }
-export interface SearchSelectAttributes<T extends string | number> extends Attributes {
+export interface SearchSelectAttrs<T extends string | number> extends Attributes {
     /** Options to display in the select */
     options?: Option<T>[];
     /** Initial value */
@@ -37,5 +37,5 @@ interface SearchSelectState<T extends string | number> {
 /**
  * Mithril Factory Component for Multi-Select Dropdown with search
  */
-export declare const SearchSelect: <T extends string | number>() => Component<SearchSelectAttributes<T>, SearchSelectState<T>>;
+export declare const SearchSelect: <T extends string | number>() => Component<SearchSelectAttrs<T>, SearchSelectState<T>>;
 export {};

package/dist/select.d.ts

@@ -1,6 +1,6 @@
 import { Attributes, Component } from 'mithril';
 import { InputOption } from './option';
-export interface SelectAttributes<T extends string | number> extends Attributes {
+export interface SelectAttrs<T extends string | number> extends Attributes {
     /** Options to select from */
     options: InputOption<T>[];
     /** Called when the value is changed, either contains a single or all selected (checked) ids */
@@ -43,4 +43,4 @@ export interface SelectAttributes<T extends string | number> extends Attributes
     showClearButton?: boolean;
 }
 /** Select component */
-export declare const Select: <T extends string | number>() => Component<SelectAttributes<T>>;
+export declare const Select: <T extends string | number>() => Component<SelectAttrs<T>>;

package/dist/sidenav.d.ts

@@ -0,0 +1,76 @@
+import { FactoryComponent, Attributes } from 'mithril';
+export interface SidenavAttrs extends Attributes {
+    /** Unique ID for the sidenav */
+    id?: string;
+    /** Whether the sidenav is open */
+    isOpen?: boolean;
+    /** Callback when sidenav open state changes */
+    onToggle?: (isOpen: boolean) => void;
+    /** Position of the sidenav */
+    position?: 'left' | 'right';
+    /** Whether sidenav should overlay content or push it */
+    mode?: 'overlay' | 'push';
+    /** Width of the sidenav in pixels */
+    width?: number;
+    /** Custom class for the sidenav */
+    className?: string;
+    /** Whether to show backdrop overlay */
+    showBackdrop?: boolean;
+    /** Close sidenav when backdrop is clicked */
+    closeOnBackdropClick?: boolean;
+    /** Close sidenav when escape key is pressed */
+    closeOnEscape?: boolean;
+    /** Animation duration in milliseconds */
+    animationDuration?: number;
+    /** Fixed sidenav (always visible on larger screens) */
+    fixed?: boolean;
+    /** Breakpoint for responsive behavior (in pixels) */
+    breakpoint?: number;
+}
+export interface SidenavItemAttrs {
+    /** Text content of the item */
+    text?: string;
+    /** Icon name (material icons) */
+    icon?: string;
+    /** Whether this item is active */
+    active?: boolean;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Click handler */
+    onclick?: (e: Event) => void;
+    /** Href for link items */
+    href?: string;
+    /** Custom class */
+    className?: string;
+    /** Whether this is a divider */
+    divider?: boolean;
+    /** Whether this is a subheader */
+    subheader?: boolean;
+}
+/**
+ * Sidenav Component
+ * A responsive navigation drawer that slides in from the side
+ */
+export declare const Sidenav: FactoryComponent<SidenavAttrs>;
+/**
+ * Sidenav Item Component
+ * Individual items for the sidenav menu
+ */
+export declare const SidenavItem: FactoryComponent<SidenavItemAttrs>;
+/**
+ * Sidenav utilities for programmatic control
+ */
+export declare class SidenavManager {
+    /**
+     * Open a sidenav by ID
+     */
+    static open(id: string): void;
+    /**
+     * Close a sidenav by ID
+     */
+    static close(id: string): void;
+    /**
+     * Toggle a sidenav by ID
+     */
+    static toggle(id: string): void;
+}

package/dist/switch.d.ts

@@ -1,6 +1,6 @@
 import { FactoryComponent } from 'mithril';
-import { InputAttributes } from './input-options';
-export interface SwitchOptions extends Partial<InputAttributes<boolean>> {
+import { InputAttrs } from './input-options';
+export interface SwitchOptions extends Partial<InputAttrs<boolean>> {
     /** Left text label */
     left?: string;
     /** Right text label */

package/dist/tabs.d.ts

@@ -14,8 +14,6 @@ export interface TabItem {
     vnode?: Vnode<any, any>;
     /** ID of the tab element. Default the title in lowercase */
     id?: string;
-    /** If the tab should be active */
-    active?: boolean;
     /** If the tab should be disabled */
     disabled?: boolean;
     /** CSS class for the tab (li), default `.tab.col.s3` */
@@ -40,7 +38,7 @@ export interface TabsOptions {
     /** Enable swiping between tabs on mobile */
     swipeable?: boolean;
 }
-export interface TabsAttributes extends TabsOptions, Attributes {
+export interface TabsAttrs extends TabsOptions, Attributes {
     /** Selected tab id, takes precedence over tab.active property */
     selectedTabId?: string;
     /**
@@ -54,4 +52,4 @@ export interface TabsAttributes extends TabsOptions, Attributes {
     onTabChange?: (tabId: string) => void;
 }
 /** CSS-only Tabs component - no MaterializeCSS dependencies */
-export declare const Tabs: FactoryComponent<TabsAttributes>;
+export declare const Tabs: FactoryComponent<TabsAttrs>;

package/dist/theme-switcher.d.ts

@@ -0,0 +1,49 @@
+import { FactoryComponent } from 'mithril';
+export type Theme = 'light' | 'dark' | 'auto';
+export interface ThemeSwitcherAttrs {
+    /** Current theme selection */
+    theme?: Theme;
+    /** Callback when theme changes */
+    onThemeChange?: (theme: Theme) => void;
+    /** Show labels on the toggle buttons */
+    showLabels?: boolean;
+    /** Custom class for the container */
+    className?: string;
+}
+/**
+ * Theme switching utilities and component
+ */
+export declare class ThemeManager {
+    private static currentTheme;
+    /**
+     * Set the theme for the entire application
+     */
+    static setTheme(theme: Theme): void;
+    /**
+     * Get the current theme
+     */
+    static getTheme(): Theme;
+    /**
+     * Get the effective theme (resolves 'auto' to actual theme)
+     */
+    static getEffectiveTheme(): 'light' | 'dark';
+    /**
+     * Initialize theme from localStorage or system preference
+     */
+    static initialize(): void;
+    /**
+     * Toggle between light and dark themes
+     */
+    static toggle(): void;
+}
+/**
+ * Theme Switcher Component
+ * Provides UI controls for changing themes
+ */
+export declare const ThemeSwitcher: FactoryComponent<ThemeSwitcherAttrs>;
+/**
+ * Simple theme toggle button (just switches between light/dark)
+ */
+export declare const ThemeToggle: FactoryComponent<{
+    className?: string;
+}>;

package/dist/timepicker.d.ts

@@ -0,0 +1,42 @@
+import { FactoryComponent } from 'mithril';
+import { InputAttrs } from './input-options';
+export interface TimepickerI18n {
+    cancel?: string;
+    clear?: string;
+    done?: string;
+}
+export interface TimepickerOptions {
+    dialRadius?: number;
+    outerRadius?: number;
+    innerRadius?: number;
+    tickRadius?: number;
+    duration?: number;
+    container?: string | null;
+    defaultTime?: string;
+    fromNow?: number;
+    showClearBtn?: boolean;
+    i18n?: TimepickerI18n;
+    autoClose?: boolean;
+    twelveHour?: boolean;
+    vibrate?: boolean;
+    onOpen?: () => void;
+    onOpenStart?: () => void;
+    onOpenEnd?: () => void;
+    onCloseStart?: () => void;
+    onCloseEnd?: () => void;
+    onSelect?: (hour: number, minute: number) => void;
+}
+export interface TimePickerAttrs extends InputAttrs<string>, TimepickerOptions {
+    /** Use inline mode (HTML5 time input) instead of modal, default true */
+    useModal?: boolean;
+    /** Allow format toggle between 12h/24h (for inline mode) */
+    allowFormatToggle?: boolean;
+    /** Clear button label */
+    clearLabel?: string;
+    /** Close button label */
+    closeLabel?: string;
+}
+/**
+ * TimePicker component based on original Materialize CSS timepicker
+ */
+export declare const TimePicker: FactoryComponent<TimePickerAttrs>;

package/dist/toast.d.ts

@@ -0,0 +1,45 @@
+import { FactoryComponent } from 'mithril';
+export interface ToastOptions {
+    /** HTML content for the toast */
+    html?: string;
+    /** Display length in milliseconds */
+    displayLength?: number;
+    /** Animation in duration in milliseconds */
+    inDuration?: number;
+    /** Animation out duration in milliseconds */
+    outDuration?: number;
+    /** Additional CSS classes */
+    classes?: string;
+    /** Callback function called when toast is dismissed */
+    completeCallback?: () => void;
+    /** Activation percentage for swipe dismissal */
+    activationPercent?: number;
+}
+export declare class Toast {
+    el: HTMLElement;
+    options: Required<ToastOptions>;
+    private state;
+    private static _toasts;
+    private static _container;
+    private static _draggedToast;
+    private static defaults;
+    constructor(options?: ToastOptions);
+    static getInstance(el: HTMLElement): Toast | undefined;
+    static _createContainer(): void;
+    static _removeContainer(): void;
+    static _onDragStart: (e: Event) => void;
+    static _onDragMove: (e: Event) => void;
+    static _onDragEnd: () => void;
+    static _xPos(e: Event): number;
+    static dismissAll(): void;
+    _createToast(): HTMLElement;
+    _animateIn(): void;
+    _setTimer(): void;
+    dismiss(): void;
+}
+export declare const toast: (options: ToastOptions) => Toast;
+export interface ToastComponentAttrs extends ToastOptions {
+    /** Whether to show the toast */
+    show?: boolean;
+}
+export declare const ToastComponent: FactoryComponent<ToastComponentAttrs>;

package/dist/tooltip.d.ts

@@ -0,0 +1,59 @@
+import { FactoryComponent, Attributes } from 'mithril';
+export interface TooltipOptions {
+    /** Delay before tooltip appears on hover */
+    enterDelay?: number;
+    /** Delay before tooltip disappears after hover ends */
+    exitDelay?: number;
+    /** HTML content for the tooltip */
+    html?: string | null;
+    /** Margin from element */
+    margin?: number;
+    /** Animation in duration */
+    inDuration?: number;
+    /** Animation out duration */
+    outDuration?: number;
+    /** Position of tooltip */
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    /** Movement during transition */
+    transitionMovement?: number;
+}
+export declare class Tooltip {
+    el: HTMLElement;
+    tooltipEl: HTMLElement;
+    options: Required<TooltipOptions>;
+    private state;
+    private static defaults;
+    private _handleMouseEnterBound;
+    private _handleMouseLeaveBound;
+    private _handleFocusBound;
+    private _handleBlurBound;
+    constructor(el: HTMLElement, options?: TooltipOptions);
+    static getInstance(el: HTMLElement): Tooltip | undefined;
+    destroy(): void;
+    _appendTooltipEl(): void;
+    _updateTooltipContent(): void;
+    _setupEventHandlers(): void;
+    _removeEventHandlers(): void;
+    open(isManual?: boolean): void;
+    close(): void;
+    _setExitDelayTimeout(): void;
+    _setEnterDelayTimeout(isManual: boolean): void;
+    _positionTooltip(): void;
+    _repositionWithinScreen(x: number, y: number, width: number, height: number): {
+        x: number;
+        y: number;
+    };
+    _animateIn(): void;
+    _animateOut(): void;
+    _handleMouseEnter(): void;
+    _handleMouseLeave(): void;
+    _handleFocus(): void;
+    _handleBlur(): void;
+    _getAttributeOptions(): Partial<TooltipOptions>;
+}
+export interface TooltipComponentAttrs extends Attributes, TooltipOptions {
+    /** Element selector or reference to attach tooltip to */
+    targetSelector?: string;
+}
+export declare const TooltipComponent: FactoryComponent<TooltipComponentAttrs>;
+export declare const initTooltips: (selector?: string, options?: TooltipOptions) => Tooltip[];