mtrl-addons 0.2.2 → 0.2.4

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,13 @@
+/**
+ * Core Module Exports
+ *
+ * Central export point for all core functionality
+ */
+export * from "./compose";
+export { createLayout, applyLayoutClasses, cleanupLayoutClasses, } from "./layout";
+export type { LayoutConfig } from "./layout/types";
+export { createViewport } from "./viewport";
+export type { ViewportConfig, ViewportComponent, ViewportContext, ItemRange, ViewportInfo, } from "./viewport/types";
+export { createGestureManager } from "./gestures";
+export type { GestureManager, GestureConfig, GestureEvent, TapEvent, SwipeEvent, LongPressEvent, PinchEvent, RotateEvent, PanEvent, AnyGestureEvent, GestureHandler, } from "./gestures";
+export * from "./compose";

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

@@ -0,0 +1,33 @@
+/**
+ * @module core/layout/config
+ * @description Essential layout configuration utilities
+ * Core functionality is integrated into schema.ts for better performance
+ */
+/**
+ * Helper function to clean up previous layout classes from an element
+ * Useful for dynamic class management
+ *
+ * @param element - Element to clean layout classes from
+ */
+export declare function cleanupLayoutClasses(element: any): 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: any): string;
+/**
+ * Gets the configured prefix for the layout system
+ * @returns Current prefix with dash
+ */
+export declare function getLayoutPrefix(): string;
+/**
+ * Sets layout classes on an element dynamically
+ * Useful for programmatic layout updates
+ *
+ * @param element - Target element
+ * @param layoutType - Layout type to apply
+ * @param classes - Additional classes to apply
+ */
+export declare function setLayoutClasses(element: any, layoutType: string, classes?: string[]): void;

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

@@ -0,0 +1,51 @@
+/**
+ * @module core/layout
+ * @description Unified layout system for mtrl-addons
+ * Provides array, object, and JSX-based layout creation with integrated optimizations
+ */
+import { clearClassCache, clearFragmentPool } from "./schema";
+export { createLayout, processClassNames, isComponent, flattenLayout, applyLayoutClasses, applyLayoutItemClasses, createLayoutResult, clearClassCache, clearFragmentPool, } from "./schema";
+export type { LayoutConfig, LayoutItemConfig, LayoutOptions, LayoutResult, ComponentLike, ElementOptions, ElementDefinition, Schema, } from "./types";
+export { cleanupLayoutClasses, getLayoutType, getLayoutPrefix, setLayoutClasses, } from "./config";
+export { h, Fragment, createJsxLayout, component, renderElements, jsx, } from "./jsx";
+export { createLayout as default } from "./schema";
+/**
+ * Convenience function to create a layout with common patterns
+ * Provides a simpler API for common use cases
+ */
+export declare function layout(type?: "stack" | "row" | "grid" | "flex", options?: Record<string, any>): any;
+/**
+ * Creates a responsive grid layout
+ * Automatically handles responsive breakpoints
+ */
+export declare function grid(columns?: number | "auto-fit" | "auto-fill", options?: Record<string, any>): any;
+/**
+ * Creates a flexible row layout
+ * Automatically handles mobile stacking
+ */
+export declare function row(options?: Record<string, any>): any;
+/**
+ * Creates a vertical stack layout
+ * Default layout type with consistent spacing
+ */
+export declare function stack(options?: Record<string, any>): any;
+/**
+ * Creates a layout from a template function
+ * Useful for dynamic layouts
+ */
+export declare function template(fn: (props: Record<string, any>) => any, props?: Record<string, any>): any;
+/**
+ * Performance utilities for layout management
+ */
+export declare const performance: {
+    clearCache: typeof clearClassCache;
+    clearFragmentPool: typeof clearFragmentPool;
+    /**
+     * Clears all cached resources
+     */
+    clearAll(): void;
+    /**
+     * Gets current cache stats
+     */
+    getStats(): Record<string, any>;
+};

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

@@ -0,0 +1,65 @@
+/**
+ * @module core/layout/jsx
+ * @description JSX-like syntax support for layout creation
+ * Provides a simple h() function for creating elements without React dependency
+ */
+import type { LayoutResult } from "./types";
+/**
+ * Fragment symbol for JSX fragments
+ */
+export declare const Fragment: unique symbol;
+/**
+ * JSX-like hyperscript function
+ * Creates elements in a React-like syntax without React dependency
+ *
+ * @param tag - HTML tag name, component function, or Fragment
+ * @param props - Element properties and attributes
+ * @param children - Child elements
+ * @returns DOM element or component
+ */
+export declare function h(tag: string | Function | typeof Fragment, props?: Record<string, any> | null, ...children: any[]): any;
+/**
+ * Creates a layout using JSX-like syntax
+ * Provides a bridge between JSX and the layout system
+ *
+ * @param jsxElement - JSX element created with h()
+ * @param parentElement - Parent element to attach to
+ * @returns Layout result
+ */
+export declare function createJsxLayout(jsxElement: any, parentElement?: any): LayoutResult;
+/**
+ * Utility to create a simple component from a function
+ * Useful for creating reusable JSX components
+ *
+ * @param fn - Component function
+ * @returns Component that can be used in JSX
+ */
+export declare function component(fn: (props: Record<string, any>) => any): Function;
+/**
+ * Utility to render multiple JSX elements
+ * Useful for creating lists or collections
+ *
+ * @param elements - Array of JSX elements
+ * @param parentElement - Parent element to attach to
+ * @returns Array of layout results
+ */
+export declare function renderElements(elements: any[], parentElement?: any): LayoutResult[];
+/**
+ * Common JSX element creators for convenience
+ */
+export declare const jsx: {
+    div: (props?: Record<string, any>, ...children: any[]) => any;
+    span: (props?: Record<string, any>, ...children: any[]) => any;
+    p: (props?: Record<string, any>, ...children: any[]) => any;
+    button: (props?: Record<string, any>, ...children: any[]) => any;
+    input: (props?: Record<string, any>) => any;
+    img: (props?: Record<string, any>) => any;
+    a: (props?: Record<string, any>, ...children: any[]) => any;
+    ul: (props?: Record<string, any>, ...children: any[]) => any;
+    li: (props?: Record<string, any>, ...children: any[]) => any;
+    section: (props?: Record<string, any>, ...children: any[]) => any;
+    header: (props?: Record<string, any>, ...children: any[]) => any;
+    footer: (props?: Record<string, any>, ...children: any[]) => any;
+    main: (props?: Record<string, any>, ...children: any[]) => any;
+    article: (props?: Record<string, any>, ...children: any[]) => any;
+};