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

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[];

package/dist/types.d.ts

@@ -0,0 +1,226 @@
+/**
+ * @fileoverview Core TypeScript utility types for mithril-materialized library
+ * These types improve type safety and developer experience across all components
+ */
+/**
+ * Component size variants used throughout the library
+ * @example
+ * ```typescript
+ * const buttonSize: ComponentSize = 'medium';
+ * const iconSize: ComponentSize = 'small';
+ * ```
+ */
+export type ComponentSize = 'tiny' | 'small' | 'medium' | 'large';
+/**
+ * Material Design positioning options
+ * @example
+ * ```typescript
+ * const tooltipPosition: MaterialPosition = 'top';
+ * const dropdownPosition: MaterialPosition = 'bottom';
+ * ```
+ */
+export type MaterialPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Extended positioning including corners and center
+ */
+export type ExtendedPosition = MaterialPosition | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
+/**
+ * Validation result - either success (true/empty string) or error (false/error message)
+ * @example
+ * ```typescript
+ * const validator = (value: string): ValidationResult => {
+ *   return value.length >= 3 || 'Must be at least 3 characters';
+ * };
+ * ```
+ */
+export type ValidationSuccess = true | '';
+export type ValidationError = false | string;
+export type ValidationResult = ValidationSuccess | ValidationError;
+/**
+ * Generic event handler type with proper typing for value and optional event
+ * @template T - The type of the value being handled
+ */
+export interface EventHandler<T = any> {
+    (value: T, event?: Event): void;
+}
+/**
+ * Keyboard event handler with proper typing
+ * @template T - The type of the associated value
+ */
+export interface KeyboardEventHandler<T = string> {
+    (event: KeyboardEvent, value?: T): void;
+}
+/**
+ * Valid ID types for components - allows strings and numbers
+ */
+export type ValidId = string | number;
+/**
+ * Component ID type - string branded for type safety
+ */
+export type ComponentId = string & {
+    readonly __componentId: unique symbol;
+};
+/**
+ * Conditional type to make ID required or optional
+ * @template T - The base type
+ * @template Required - Whether ID should be required
+ */
+export type WithId<T, Required extends boolean = false> = Required extends true ? T & {
+    id: ComponentId;
+} : T & {
+    id?: ComponentId;
+};
+/**
+ * Validation function interface
+ * @template T - The type of value being validated
+ */
+export interface ValidatorFunction<T> {
+    /**
+     * Validates a value
+     * @param value - The value to validate
+     * @param element - Optional HTML element for context
+     * @returns True/empty string for success, false/error message for failure
+     */
+    (value: T, element?: HTMLInputElement): ValidationResult;
+}
+/**
+ * Type guard to check if validation result indicates success
+ * @param result - The validation result to check
+ * @returns True if validation passed
+ */
+export declare const isValidationSuccess: (result: ValidationResult) => result is ValidationSuccess;
+/**
+ * Type guard to check if validation result indicates an error
+ * @param result - The validation result to check
+ * @returns True if validation failed
+ */
+export declare const isValidationError: (result: ValidationResult) => result is ValidationError;
+/**
+ * Button variant discriminated union for type-safe button configurations
+ */
+export type ButtonVariant = {
+    type: 'button';
+    submit?: never;
+    modalId?: never;
+} | {
+    type: 'submit';
+    modalId?: never;
+} | {
+    type: 'modal';
+    modalId: string;
+    submit?: never;
+} | {
+    type: 'reset';
+    modalId?: never;
+    submit?: never;
+};
+/**
+ * Input type union with proper HTML input types
+ */
+export type InputType = 'text' | 'email' | 'password' | 'tel' | 'url' | 'search' | 'number' | 'range' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' | 'color' | 'file' | 'hidden';
+/**
+ * Input value type based on input type
+ * @template T - The input type
+ */
+export type InputValue<T extends InputType> = T extends 'number' | 'range' ? number : T extends 'date' | 'datetime-local' | 'month' | 'time' | 'week' ? Date | string : T extends 'file' ? FileList | File[] : string;
+/**
+ * Icon class using template literal types for better IntelliSense
+ */
+export type IconClass = ComponentSize | MaterialPosition | `${ComponentSize} ${MaterialPosition}`;
+/**
+ * Modal type discriminated union
+ */
+export type ModalType = {
+    type: 'standard';
+    fixedFooter?: never;
+    bottomSheet?: never;
+} | {
+    type: 'fixed-footer';
+    fixedFooter: true;
+    bottomSheet?: never;
+} | {
+    type: 'bottom-sheet';
+    bottomSheet: true;
+    fixedFooter?: never;
+};
+/**
+ * Selection mode for components that support item selection
+ */
+export type SelectionMode = 'none' | 'single' | 'multiple';
+/**
+ * Sort direction for sortable components
+ */
+export type SortDirection = 'asc' | 'desc';
+/**
+ * Theme variant for components that support theming
+ */
+export type ThemeVariant = 'light' | 'dark' | 'auto';
+/**
+ * Color palette based on Material Design
+ */
+export type MaterialColor = 'red' | 'pink' | 'purple' | 'deep-purple' | 'indigo' | 'blue' | 'light-blue' | 'cyan' | 'teal' | 'green' | 'light-green' | 'lime' | 'yellow' | 'amber' | 'orange' | 'deep-orange' | 'brown' | 'grey' | 'blue-grey';
+/**
+ * Color intensity levels
+ */
+export type ColorIntensity = 'lighten-5' | 'lighten-4' | 'lighten-3' | 'lighten-2' | 'lighten-1' | 'base' | 'darken-1' | 'darken-2' | 'darken-3' | 'darken-4' | 'accent-1' | 'accent-2' | 'accent-3' | 'accent-4';
+/**
+ * Full color specification with intensity
+ */
+export type MaterialColorSpec = MaterialColor | `${MaterialColor} ${ColorIntensity}`;
+/**
+ * Makes specified keys required while keeping others optional
+ * @template T - The base type
+ * @template K - Keys to make required
+ */
+export type RequiredKeys<T, K extends keyof T> = T & Required<Pick<T, K>>;
+/**
+ * Makes specified keys optional while keeping others as-is
+ * @template T - The base type
+ * @template K - Keys to make optional
+ */
+export type OptionalKeys<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+/**
+ * Extracts function parameter types
+ * @template T - The function type
+ */
+export type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;
+/**
+ * Creates a deep readonly version of a type
+ * @template T - The type to make readonly
+ */
+export type DeepReadonly<T> = {
+    readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
+};
+/**
+ * Represents a component that can be focused
+ */
+export interface Focusable {
+    focus(): void;
+    blur(): void;
+}
+/**
+ * Represents a component that can be validated
+ */
+export interface Validatable<T = any> {
+    validate(): ValidationResult;
+    readonly isValid: boolean;
+    readonly value: T;
+}
+/**
+ * Configuration for components with validation
+ * @template T - The type of value being validated
+ */
+export interface ValidationConfig<T = any> {
+    /** Whether the field is required */
+    required?: boolean;
+    /** Minimum length for string values */
+    minLength?: number;
+    /** Maximum length for string values */
+    maxLength?: number;
+    /** Pattern to match for validation */
+    pattern?: RegExp;
+    /** Custom validation function */
+    validator?: ValidatorFunction<T>;
+    /** Whether to show validation messages inline */
+    showValidationMessage?: boolean;
+}