mithril-materialized 1.4.2 → 2.0.0-beta.10

package/dist/tabs.d.ts

@@ -7,15 +7,13 @@ import { Vnode, FactoryComponent, Attributes } from 'mithril';
  * - _top: Opens the linked document in the full body of the window
  */
 export type AnchorTarget = '_blank' | '_self' | '_parent' | '_top';
-export interface ITabItem {
+export interface TabItem {
     /** Title of the tab */
     title: string;
     /** Vnode to render: may be empty in case of a using the tab as a hyperlink. */
     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` */
@@ -30,8 +28,18 @@ export interface ITabItem {
     /** Only used in combination with a set target to make the tab act as a regular hyperlink. */
     href?: string;
 }
-export interface ITabs extends Partial<M.TabsOptions>, Attributes {
-    /** Selected tab id */
+export interface TabsOptions {
+    /** Duration of tab change animation in ms */
+    duration?: number;
+    /** Called when a tab is shown */
+    onShow?: (tab: HTMLElement) => void;
+    /** The maximum width at which tabs switch to swipeable mode */
+    responsiveThreshold?: number;
+    /** Enable swiping between tabs on mobile */
+    swipeable?: boolean;
+}
+export interface TabsAttrs extends TabsOptions, Attributes {
+    /** Selected tab id, takes precedence over tab.active property */
     selectedTabId?: string;
     /**
      * Tab width, can be `auto` to use the width of the title,
@@ -39,6 +47,9 @@ export interface ITabs extends Partial<M.TabsOptions>, Attributes {
      */
     tabWidth?: 'auto' | 'fixed' | 'fill';
     /** List of tab items */
-    tabs: ITabItem[];
+    tabs: TabItem[];
+    /** Callback when tab changes */
+    onTabChange?: (tabId: string) => void;
 }
-export declare const Tabs: FactoryComponent<ITabs>;
+/** CSS-only Tabs component - no MaterializeCSS dependencies */
+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[];