mtrl 0.3.8 → 0.4.0

package/dist/core/gestures/longpress.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @module core/gestures
+ * @description Long press gesture detection
+ */
+import { LongPressEvent, GestureDetectionContext } from './types';
+/**
+ * Detect long press gesture
+ *
+ * This is slightly different from other gesture detectors as it sets up a timer
+ * and returns a callback function that will be triggered when the timer completes.
+ *
+ * @param context - Gesture detection context
+ * @param callback - Function to call when long press is detected
+ * @returns Cleanup function to cancel the long press detection
+ */
+export declare function detectLongPress(context: GestureDetectionContext, callback: (event: LongPressEvent) => void): () => void;
+/**
+ * Check if movement would cancel a long press
+ *
+ * @param context - Gesture detection context
+ * @returns Whether the long press should be canceled
+ */
+export declare function shouldCancelLongPress(context: GestureDetectionContext): boolean;

package/dist/core/gestures/manager.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @module core/gestures
+ * @description Gesture management system for handling touch and mouse interactions
+ */
+import { GestureConfig, GestureManager, GESTURE_TYPES, SWIPE_DIRECTIONS } from './types';
+export { GESTURE_TYPES, SWIPE_DIRECTIONS };
+/**
+ * Creates a gesture manager for handling touch and mouse interactions
+ *
+ * @param element - DOM element to attach gesture recognition to
+ * @param config - Configuration options
+ * @returns Gesture manager instance
+ */
+export declare const createGestureManager: (element: HTMLElement, config?: GestureConfig) => GestureManager;

package/dist/core/gestures/pan.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @module core/gestures
+ * @description Pan gesture detection
+ */
+import { PanEvent, GestureDetectionContext } from './types';
+/**
+ * Detect pan gesture
+ *
+ * @param context - Gesture detection context
+ * @returns Pan event or null if no significant movement
+ */
+export declare function detectPan(context: GestureDetectionContext): PanEvent | null;

package/dist/core/gestures/pinch.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @module core/gestures
+ * @description Pinch gesture detection
+ */
+import { PinchEvent, GestureDetectionContext } from './types';
+/**
+ * Detect pinch gesture
+ *
+ * @param context - Gesture detection context
+ * @param touch1 - First touch point
+ * @param touch2 - Second touch point
+ * @returns Pinch event or null if no pinch detected
+ */
+export declare function detectPinch(context: GestureDetectionContext, touch1: Touch, touch2: Touch): PinchEvent | null;

package/dist/core/gestures/rotate.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @module core/gestures
+ * @description Rotate gesture detection
+ */
+import { RotateEvent, GestureDetectionContext } from './types';
+/**
+ * Detect rotate gesture
+ *
+ * @param context - Gesture detection context
+ * @param touch1 - First touch point
+ * @param touch2 - Second touch point
+ * @returns Rotate event or null if no rotation detected
+ */
+export declare function detectRotate(context: GestureDetectionContext, touch1: Touch, touch2: Touch): RotateEvent | null;

package/dist/core/gestures/swipe.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @module core/gestures
+ * @description Swipe gesture detection
+ */
+import { SwipeEvent, GestureDetectionContext, SWIPE_DIRECTIONS } from './types';
+/**
+ * Determine swipe direction based on delta X and Y
+ *
+ * @param deltaX - Distance moved in X direction
+ * @param deltaY - Distance moved in Y direction
+ * @returns Direction of the swipe
+ */
+export declare function getSwipeDirection(deltaX: number, deltaY: number): SWIPE_DIRECTIONS;
+/**
+ * Detect swipe gesture
+ *
+ * @param context - Gesture detection context
+ * @returns Swipe event or null if no swipe detected
+ */
+export declare function detectSwipe(context: GestureDetectionContext): SwipeEvent | null;

package/dist/core/gestures/tap.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @module core/gestures
+ * @description Tap gesture detection
+ */
+import { TapEvent, GestureDetectionContext } from './types';
+/**
+ * Detect tap gesture
+ *
+ * @param context - Gesture detection context
+ * @returns Tap event or null if no tap detected
+ */
+export declare function detectTap(context: GestureDetectionContext): TapEvent | null;

package/dist/core/gestures/types.d.ts

@@ -0,0 +1,320 @@
+/**
+ * @module core/gestures
+ * @description Type definitions for the gesture system
+ */
+/**
+ * Types of gestures supported by the system
+ */
+export declare enum GESTURE_TYPES {
+    TAP = "tap",
+    SWIPE = "swipe",
+    SWIPE_LEFT = "swipeleft",
+    SWIPE_RIGHT = "swiperight",
+    SWIPE_UP = "swipeup",
+    SWIPE_DOWN = "swipedown",
+    PINCH = "pinch",
+    ROTATE = "rotate",
+    LONG_PRESS = "longpress",
+    PAN = "pan"
+}
+/**
+ * Direction of swipe gestures
+ */
+export declare enum SWIPE_DIRECTIONS {
+    UP = "up",
+    DOWN = "down",
+    LEFT = "left",
+    RIGHT = "right"
+}
+/**
+ * Configuration options for gesture recognition
+ */
+export interface GestureConfig {
+    /**
+     * Minimum distance (in pixels) to recognize a swipe
+     * @default 30
+     */
+    swipeThreshold?: number;
+    /**
+     * Maximum time (in ms) in which a swipe must be completed
+     * @default 300
+     */
+    swipeTimeThreshold?: number;
+    /**
+     * Time (in ms) to recognize a long press
+     * @default 500
+     */
+    longPressTime?: number;
+    /**
+     * Distance threshold (in pixels) for tap recognition
+     * @default 10
+     */
+    tapDistanceThreshold?: number;
+    /**
+     * Whether to prevent default behaviors on touch events
+     * @default true
+     */
+    preventDefault?: boolean;
+    /**
+     * Whether to stop event propagation
+     * @default false
+     */
+    stopPropagation?: boolean;
+    [key: string]: any;
+}
+/**
+ * Base gesture event data
+ */
+export interface GestureEvent {
+    /**
+     * Type of the gesture
+     */
+    type: string;
+    /**
+     * Original DOM event
+     */
+    originalEvent: Event;
+    /**
+     * Element the gesture was triggered on
+     */
+    target: EventTarget;
+    /**
+     * Timestamp when the gesture started
+     */
+    startTime: number;
+    /**
+     * Timestamp when the gesture ended
+     */
+    endTime: number;
+    /**
+     * Gesture duration in milliseconds
+     */
+    duration: number;
+    /**
+     * Whether default behavior was prevented
+     */
+    defaultPrevented: boolean;
+    /**
+     * Prevent default behavior
+     */
+    preventDefault: () => void;
+    /**
+     * Stop event propagation
+     */
+    stopPropagation: () => void;
+}
+/**
+ * Tap gesture event data
+ */
+export interface TapEvent extends GestureEvent {
+    type: 'tap';
+    /**
+     * Number of taps (for double tap detection)
+     */
+    count: number;
+    /**
+     * X position of the tap
+     */
+    x: number;
+    /**
+     * Y position of the tap
+     */
+    y: number;
+}
+/**
+ * Swipe gesture event data
+ */
+export interface SwipeEvent extends GestureEvent {
+    type: 'swipe' | 'swipeleft' | 'swiperight' | 'swipeup' | 'swipedown';
+    /**
+     * Direction of the swipe
+     */
+    direction: 'up' | 'down' | 'left' | 'right';
+    /**
+     * Distance swiped in the X direction
+     */
+    deltaX: number;
+    /**
+     * Distance swiped in the Y direction
+     */
+    deltaY: number;
+    /**
+     * Total distance swiped
+     */
+    distance: number;
+    /**
+     * Velocity of the swipe in pixels per millisecond
+     */
+    velocity: number;
+    /**
+     * Start X position
+     */
+    startX: number;
+    /**
+     * Start Y position
+     */
+    startY: number;
+    /**
+     * End X position
+     */
+    endX: number;
+    /**
+     * End Y position
+     */
+    endY: number;
+}
+/**
+ * Long press gesture event data
+ */
+export interface LongPressEvent extends GestureEvent {
+    type: 'longpress';
+    /**
+     * X position of the long press
+     */
+    x: number;
+    /**
+     * Y position of the long press
+     */
+    y: number;
+}
+/**
+ * Pinch gesture event data
+ */
+export interface PinchEvent extends GestureEvent {
+    type: 'pinch';
+    /**
+     * Scale factor of the pinch (>1 for zoom in, <1 for zoom out)
+     */
+    scale: number;
+    /**
+     * Center X position of the pinch
+     */
+    centerX: number;
+    /**
+     * Center Y position of the pinch
+     */
+    centerY: number;
+}
+/**
+ * Rotate gesture event data
+ */
+export interface RotateEvent extends GestureEvent {
+    type: 'rotate';
+    /**
+     * Rotation angle in degrees
+     */
+    rotation: number;
+    /**
+     * Center X position of the rotation
+     */
+    centerX: number;
+    /**
+     * Center Y position of the rotation
+     */
+    centerY: number;
+}
+/**
+ * Pan gesture event data
+ */
+export interface PanEvent extends GestureEvent {
+    type: 'pan';
+    /**
+     * Distance panned in the X direction
+     */
+    deltaX: number;
+    /**
+     * Distance panned in the Y direction
+     */
+    deltaY: number;
+    /**
+     * Start X position
+     */
+    startX: number;
+    /**
+     * Start Y position
+     */
+    startY: number;
+    /**
+     * Current X position
+     */
+    currentX: number;
+    /**
+     * Current Y position
+     */
+    currentY: number;
+}
+/**
+ * Union type of all gesture events
+ */
+export type AnyGestureEvent = TapEvent | SwipeEvent | LongPressEvent | PinchEvent | RotateEvent | PanEvent;
+/**
+ * Handler for gesture events
+ */
+export type GestureHandler = (event: AnyGestureEvent) => void;
+/**
+ * Gesture state for tracking touch interactions
+ */
+export interface GestureState {
+    active: boolean;
+    startTime: number;
+    startX: number;
+    startY: number;
+    lastX: number;
+    lastY: number;
+    currentX: number;
+    currentY: number;
+    touchCount: number;
+    longPressTimer: number | null;
+    startDistance: number;
+    startAngle: number;
+    lastTapTime: number;
+    tapCount: number;
+    target: EventTarget | null;
+}
+/**
+ * Context for gesture detection
+ */
+export interface GestureDetectionContext {
+    state: GestureState;
+    options: Required<GestureConfig>;
+    originalEvent: Event;
+}
+/**
+ * Gesture manager interface
+ */
+export interface GestureManager {
+    /**
+     * Add an event listener for a gesture
+     * @param eventType - Gesture type
+     * @param handler - Event handler
+     * @returns Gesture manager for chaining
+     */
+    on: (eventType: string, handler: GestureHandler) => GestureManager;
+    /**
+     * Remove an event listener for a gesture
+     * @param eventType - Gesture type
+     * @param handler - Event handler
+     * @returns Gesture manager for chaining
+     */
+    off: (eventType: string, handler: GestureHandler) => GestureManager;
+    /**
+     * Check if a gesture is supported on the current device
+     * @param gestureType - Type of gesture to check
+     * @returns Whether the gesture is supported
+     */
+    isSupported: (gestureType: string) => boolean;
+    /**
+     * Enable gesture recognition
+     * @returns Gesture manager for chaining
+     */
+    enable: () => GestureManager;
+    /**
+     * Disable gesture recognition
+     * @returns Gesture manager for chaining
+     */
+    disable: () => GestureManager;
+    /**
+     * Clean up event listeners
+     */
+    destroy: () => void;
+}

package/dist/core/gestures/utils.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @module core/gestures
+ * @description Utility functions for gesture detection
+ */
+import { GestureEvent, GestureState } from './types';
+/**
+ * Calculate distance between two points
+ *
+ * @param x1 - X coordinate of first point
+ * @param y1 - Y coordinate of first point
+ * @param x2 - X coordinate of second point
+ * @param y2 - Y coordinate of second point
+ * @returns Distance between the points
+ */
+export declare function getDistance(x1: number, y1: number, x2: number, y2: number): number;
+/**
+ * Calculate angle between two points in degrees (0-360)
+ *
+ * @param x1 - X coordinate of first point
+ * @param y1 - Y coordinate of first point
+ * @param x2 - X coordinate of second point
+ * @param y2 - Y coordinate of second point
+ * @returns Angle in degrees
+ */
+export declare function getAngle(x1: number, y1: number, x2: number, y2: number): number;
+/**
+ * Create a base gesture event
+ *
+ * @param type - Type of gesture
+ * @param originalEvent - Original DOM event
+ * @param state - Current gesture state
+ * @returns Base gesture event object
+ */
+export declare function createGestureEvent(type: string, originalEvent: Event, state: GestureState): GestureEvent;
+/**
+ * Detect if the device supports touch events
+ *
+ * @returns Whether touch is supported
+ */
+export declare function hasTouchSupport(): boolean;
+/**
+ * Detect if the device supports pointer events
+ *
+ * @returns Whether pointer events are supported
+ */
+export declare function hasPointerSupport(): boolean;
+/**
+ * Extract normalized touch coordinates from an event
+ * Works with mouse events, touch events and pointer events
+ *
+ * @param e - DOM event
+ * @returns Object with clientX and clientY coordinates
+ */
+export declare function getTouchCoordinates(e: MouseEvent | TouchEvent | PointerEvent): {
+    clientX: number;
+    clientY: number;
+};

package/dist/core/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @module core
+ * @description Core utilities and building blocks for the component system
+ *
+ * This module provides the foundational elements used to build components
+ * in a functional, composable way.
+ *
+ * @packageDocumentation
+ */
+export * from './compose';
+export * from './dom';
+export { createEmitter } from './state/emitter';
+export type { Emitter, EventCallback } from './state/emitter';
+export { createStore, loggingMiddleware, deriveFiltered } from './state/store';
+export type { Store, StoreOptions, Selector, Computation, Updater } from './state/store';
+export { createLifecycle } from './state/lifecycle';
+export type { LifecycleManager, LifecycleManagers } from './state/lifecycle';
+export { createDisabled } from './state/disabled';
+export type { DisabledState } from './state/disabled';
+export { createEventManager as createStateEventManager } from './state/events';
+export type { EventManagerState } from './state/events';
+export * from './layout';
+export * from './collection';
+export { PREFIX, COMPONENTS, STATES, classNames, getComponentClass, getModifierClass, getElementClass } from './config';
+export { when, classNames as joinClasses, isObject, byString, hasTouchSupport, normalizeEvent, throttle, debounce, once, getInheritedBackground } from './utils';
+export { createGestureManager } from './gestures';
+export type { GestureManager, GestureConfig, GestureEvent, TapEvent, SwipeEvent, LongPressEvent, PinchEvent, RotateEvent, PanEvent, AnyGestureEvent, GestureHandler } from './gestures';
+export type { ThemeConfig, ComponentConfig, ThemedComponentConfig, VariantComponentConfig, StateComponentConfig } from './config';
+export type { NormalizedEvent } from './utils/mobile';

package/dist/core/layout/array.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @module core/layout
+ * @description Processor for array-based layout schemas
+ */
+import { LayoutResult, LayoutOptions } from './types';
+/**
+ * Processes an array-based layout definition
+ *
+ * @param schema - Array-based layout definition
+ * @param parentElement - Optional parent element to attach layout to
+ * @param level - Current recursion level
+ * @param options - Layout creation options
+ * @returns Layout result object
+ */
+export declare function processArraySchema(schema: any[], parentElement?: HTMLElement | null, level?: number, options?: LayoutOptions): LayoutResult;

package/dist/core/layout/config.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @module core/layout
+ * @description Layout configuration utilities
+ */
+/**
+ * Helper function to clean up previous layout classes from an element
+ *
+ * @param element - Element to clean layout classes from
+ */
+export declare function cleanupLayoutClasses(element: HTMLElement): void;
+/**
+ * Helper function to get the layout type from element classes
+ *
+ * @param element - Element to check
+ * @returns Layout type if found, empty string otherwise
+ */
+export declare function getLayoutType(element: HTMLElement): string;
+/**
+ * Applies layout classes based on the layout configuration
+ *
+ * @param element - Element to apply layout classes to
+ * @param layoutConfig - Layout configuration
+ * @param cleanupFirst - Whether to clean up previous layout classes first
+ */
+export declare function applyLayoutClasses(element: HTMLElement, layoutConfig: any, cleanupFirst?: boolean): void;
+/**
+ * Applies layout item classes based on the configuration
+ *
+ * @param element - Element to apply layout item classes to
+ * @param itemConfig - Layout item configuration
+ */
+export declare function applyLayoutItemClasses(element: HTMLElement, itemConfig: any): void;

package/dist/core/layout/create.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @module core/layout
+ * @description Main layout creation functionality
+ */
+import { Schema, LayoutResult, LayoutOptions } from './types';
+/**
+ * Creates a DOM or component layout based on a layout definition
+ *
+ * @param schema - Layout definition (array-based, object-based, or HTML string)
+ * @param parentElement - Optional parent element to attach layout to
+ * @param options - Additional options for layout creation
+ * @returns Object containing the layout and utility functions
+ */
+export declare function createLayout(schema: Schema | any[] | string | Function, parentElement?: HTMLElement | null, options?: LayoutOptions): LayoutResult;

package/dist/core/layout/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @module core/layout
+ * @description Layout creation system with simplified API
+ */
+export type { ComponentLike, ElementDefinition, Schema, LayoutResult, LayoutOptions, LayoutConfig, LayoutItemConfig } from './types';
+export { isComponent, processClassNames, flattenLayout } from './utils';
+export { createLayout } from './create';
+export { createLayoutResult } from './result';
+export { processSchema, createComponentInstance, isJsxSchema } from './processor';
+export { applyLayoutClasses, applyLayoutItemClasses, getLayoutType, cleanupLayoutClasses } from './config';
+export { h, Fragment, createJsxLayout } from './jsx';
+import { createLayout } from './create';
+export default createLayout;

package/dist/core/layout/jsx.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @module core/layout/jsx
+ * @description Lightweight JSX implementation for the layout system
+ */
+export declare const Fragment: unique symbol;
+/**
+ * Convert JSX to our layout array schema
+ */
+export declare function h(type: string | Function | symbol, props: Record<string, any> | null, ...children: any[]): any;
+/**
+ * Create a layout from JSX
+ */
+export declare function createJsxLayout(jsxElement: any, parentElement?: HTMLElement | null): import("./types").LayoutResult;

package/dist/core/layout/object.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @module core/layout
+ * @description Processor for object-based layout schemas
+ */
+import { Schema, LayoutResult, LayoutOptions } from './types';
+/**
+ * Processes an object-based layout definition
+ *
+ * @param schema - Object-based layout definition
+ * @param parentElement - Optional parent element to attach layout to
+ * @param options - Layout creation options
+ * @returns Layout result object
+ */
+export declare function processObjectSchema(schema: Schema, parentElement?: HTMLElement | SVGElement | DocumentFragment | null, options?: LayoutOptions): LayoutResult;

package/dist/core/layout/processor.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @module core/layout
+ * @description Processor for layout creation
+ */
+import { LayoutResult, LayoutOptions } from './types';
+/**
+ * Creates a component from a constructor or factory function
+ *
+ * @param Component - Component constructor or factory function
+ * @param options - Component creation options
+ * @param layoutOptions - Global layout options
+ * @returns Created component instance
+ */
+export declare function createComponentInstance(Component: any, options?: Record<string, any>, layoutOptions?: LayoutOptions): any;
+/**
+ * Determines if a schema is in JSX format (transformed by h function)
+ */
+export declare function isJsxSchema(schema: any): boolean;
+/**
+ * Processes any type of layout definition (array or object)
+ *
+ * @param schema - Layout schema to process
+ * @param parentElement - Parent element to attach to
+ * @param level - Current nesting level
+ * @param options - Layout creation options
+ * @returns Layout result object
+ */
+export declare function processSchema(schema: any, parentElement?: HTMLElement | null, level?: number, options?: LayoutOptions): LayoutResult;

package/dist/core/layout/result.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @module core/layout
+ * @description Layout result creation and management
+ */
+import { LayoutResult } from './types';
+/**
+ * Creates a result object with the layout and utility functions
+ *
+ * @param layout - The raw layout object
+ * @returns Result object with layout and utility functions
+ */
+export declare function createLayoutResult(layout: Record<string, any>): LayoutResult;