mtrl 0.3.8 → 0.4.0

package/dist/core/compose/features/debounce.d.ts

@@ -0,0 +1,84 @@
+/**
+ * @module core/compose/features
+ * @description Adds debounced event handling capabilities to components
+ */
+import { BaseComponent, ElementComponent } from '../component';
+/**
+ * Interface for components with lifecycle
+ */
+export interface ComponentWithLifecycle extends ElementComponent {
+    lifecycle: {
+        destroy: () => void;
+        [key: string]: any;
+    };
+}
+/**
+ * Configuration for debounced event handlers
+ */
+export interface DebounceConfig {
+    /**
+     * Event handlers with debounce settings
+     */
+    debouncedEvents?: Record<string, {
+        handler: (event: Event) => void;
+        wait: number;
+        options?: {
+            leading?: boolean;
+            maxWait?: number;
+        };
+    }>;
+    [key: string]: any;
+}
+/**
+ * Component with debounced event capabilities
+ */
+export interface DebounceComponent extends BaseComponent {
+    /**
+     * Adds a debounced event listener
+     * @param event - Event name
+     * @param handler - Event handler
+     * @param wait - Debounce delay in milliseconds
+     * @param options - Debounce options
+     * @returns DebounceComponent for chaining
+     */
+    addDebouncedEvent: (event: string, handler: (event: Event) => void, wait: number, options?: {
+        leading?: boolean;
+        maxWait?: number;
+    }) => DebounceComponent;
+    /**
+     * Removes a debounced event listener
+     * @param event - Event name
+     * @returns DebounceComponent for chaining
+     */
+    removeDebouncedEvent: (event: string) => DebounceComponent;
+}
+/**
+ * Adds debounced event handling capabilities to a component
+ *
+ * @param config - Configuration object containing debounced event settings
+ * @returns Function that enhances a component with debounced event handling
+ *
+ * @example
+ * ```ts
+ * // Add debounced events to a component
+ * const component = pipe(
+ *   createBase,
+ *   withElement(...),
+ *   withDebounce({
+ *     debouncedEvents: {
+ *       'input': {
+ *         handler: handleInput,
+ *         wait: 300
+ *       },
+ *       'resize': {
+ *         handler: handleResize,
+ *         wait: 200,
+ *         options: { maxWait: 1000 }
+ *       }
+ *     }
+ *   })
+ * )(config);
+ * ```
+ */
+export declare const withDebounce: (config?: DebounceConfig) => <C extends ElementComponent>(component: C) => C & DebounceComponent;
+export default withDebounce;

package/dist/core/compose/features/disabled.d.ts

@@ -0,0 +1,47 @@
+import { BaseComponent, ElementComponent } from '../component';
+/**
+ * Configuration for disabled feature
+ */
+export interface DisabledConfig {
+    disabled?: boolean;
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Disabled state manager interface
+ */
+export interface DisabledManager {
+    /**
+     * Enables the component
+     * @returns DisabledManager instance for chaining
+     */
+    enable(): DisabledManager;
+    /**
+     * Disables the component
+     * @returns DisabledManager instance for chaining
+     */
+    disable(): DisabledManager;
+    /**
+     * Toggles the disabled state
+     * @returns DisabledManager instance for chaining
+     */
+    toggle(): DisabledManager;
+    /**
+     * Checks if the component is disabled
+     * @returns true if disabled
+     */
+    isDisabled(): boolean;
+}
+/**
+ * Component with disabled state capabilities
+ */
+export interface DisabledComponent extends BaseComponent {
+    disabled: DisabledManager;
+}
+/**
+ * Adds disabled state management to a component
+ *
+ * @param config - Configuration object
+ * @returns Function that enhances a component with disabled state management
+ */
+export declare const withDisabled: <T extends DisabledConfig>(config: T) => <C extends ElementComponent>(component: C) => C & DisabledComponent;

package/dist/core/compose/features/events.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @module core/compose/features
+ */
+import { BaseComponent } from '../component';
+/**
+ * Component with event capabilities
+ */
+export interface EventComponent extends BaseComponent {
+    /**
+     * Subscribe to an event
+     * @param event - Event name
+     * @param handler - Event handler
+     * @returns Component instance for chaining
+     */
+    on(event: string, handler: (...args: any[]) => void): EventComponent;
+    /**
+     * Unsubscribe from an event
+     * @param event - Event name
+     * @param handler - Event handler
+     * @returns Component instance for chaining
+     */
+    off(event: string, handler: (...args: any[]) => void): EventComponent;
+    /**
+     * Emit an event
+     * @param event - Event name
+     * @param data - Event data
+     * @returns Component instance for chaining
+     */
+    emit(event: string, data?: any): EventComponent;
+}
+/**
+ * Adds event handling capabilities to a component
+ * Returns event system ready to use immediately
+ *
+ * @returns Function that enhances a component with event capabilities
+ */
+export declare const withEvents: () => <T extends BaseComponent>(component: T) => T & EventComponent;

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

@@ -0,0 +1,85 @@
+/**
+ * @module core/compose/features/gestures
+ * @description Adds long press gesture recognition to components
+ */
+import { BaseComponent, ElementComponent } from '../../component';
+import { LongPressEvent, GestureHandler } from '../../../gestures';
+/**
+ * Configuration for long press gesture feature
+ */
+export interface LongPressGestureConfig {
+    /**
+     * Time (in ms) to recognize a long press
+     * @default 500
+     */
+    longPressTime?: number;
+    /**
+     * Distance threshold (in pixels) for movement that cancels long press
+     * @default 10
+     */
+    moveThreshold?: number;
+    /**
+     * Whether to prevent default behaviors on touch events
+     * @default true
+     */
+    preventDefault?: boolean;
+    /**
+     * Handler for long press gesture
+     */
+    onLongPress?: GestureHandler;
+    /**
+     * Whether to enable long press recognition immediately
+     * @default true
+     */
+    enabled?: boolean;
+    [key: string]: any;
+}
+/**
+ * Component with long press gesture recognition capabilities
+ */
+export interface LongPressGestureComponent extends BaseComponent {
+    /**
+     * Add a long press event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onLongPress: (handler: (event: LongPressEvent) => void) => LongPressGestureComponent;
+    /**
+     * Remove a long press event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offLongPress: (handler: (event: LongPressEvent) => void) => LongPressGestureComponent;
+    /**
+     * Enable long press recognition
+     * @returns Component for chaining
+     */
+    enableLongPress: () => LongPressGestureComponent;
+    /**
+     * Disable long press recognition
+     * @returns Component for chaining
+     */
+    disableLongPress: () => LongPressGestureComponent;
+}
+/**
+ * Adds long press gesture recognition to a component.
+ * This is a lightweight alternative to the full gesture system,
+ * focused only on long press detection.
+ *
+ * @param config - Configuration object containing long press settings
+ * @returns Function that enhances a component with long press capabilities
+ *
+ * @example
+ * ```ts
+ * // Add long press gesture recognition to a component
+ * const component = pipe(
+ *   createBase,
+ *   withElement(...),
+ *   withLongPressGesture({
+ *     longPressTime: 800,
+ *     onLongPress: (e) => showContextMenu(e.x, e.y)
+ *   })
+ * )(config);
+ * ```
+ */
+export declare const withLongPressGesture: (config?: LongPressGestureConfig) => <C extends ElementComponent>(component: C) => C & LongPressGestureComponent;

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

@@ -0,0 +1,108 @@
+/**
+ * @module core/compose/features/gestures
+ * @description Adds pan gesture recognition to components
+ */
+import { BaseComponent, ElementComponent } from '../../component';
+import { PanEvent, GestureHandler } from '../../../gestures';
+/**
+ * Configuration for pan gesture feature
+ */
+export interface PanGestureConfig {
+    /**
+     * Whether to prevent default behaviors on touch events
+     * @default true
+     */
+    preventDefault?: boolean;
+    /**
+     * Handler for pan start (first movement)
+     */
+    onPanStart?: GestureHandler;
+    /**
+     * Handler for pan move (continuous updates during pan)
+     */
+    onPan?: GestureHandler;
+    /**
+     * Handler for pan end (touch/mouse release)
+     */
+    onPanEnd?: GestureHandler;
+    /**
+     * Whether to enable pan recognition immediately
+     * @default true
+     */
+    enabled?: boolean;
+    [key: string]: any;
+}
+/**
+ * Component with pan gesture recognition capabilities
+ */
+export interface PanGestureComponent extends BaseComponent {
+    /**
+     * Add a handler for pan start
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onPanStart: (handler: (event: PanEvent) => void) => PanGestureComponent;
+    /**
+     * Add a handler for pan move (continuous updates)
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onPan: (handler: (event: PanEvent) => void) => PanGestureComponent;
+    /**
+     * Add a handler for pan end
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onPanEnd: (handler: (event: PanEvent) => void) => PanGestureComponent;
+    /**
+     * Remove a pan start handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offPanStart: (handler: (event: PanEvent) => void) => PanGestureComponent;
+    /**
+     * Remove a pan move handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offPan: (handler: (event: PanEvent) => void) => PanGestureComponent;
+    /**
+     * Remove a pan end handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offPanEnd: (handler: (event: PanEvent) => void) => PanGestureComponent;
+    /**
+     * Enable pan recognition
+     * @returns Component for chaining
+     */
+    enablePan: () => PanGestureComponent;
+    /**
+     * Disable pan recognition
+     * @returns Component for chaining
+     */
+    disablePan: () => PanGestureComponent;
+}
+/**
+ * Adds pan gesture recognition to a component.
+ * This is a lightweight alternative to the full gesture system,
+ * focused only on pan detection.
+ *
+ * @param config - Configuration object containing pan settings
+ * @returns Function that enhances a component with pan capabilities
+ *
+ * @example
+ * ```ts
+ * // Add pan gesture recognition to a component
+ * const component = pipe(
+ *   createBase,
+ *   withElement(...),
+ *   withPanGesture({
+ *     onPanStart: (e) => startDrag(e),
+ *     onPan: (e) => updateDragPosition(e),
+ *     onPanEnd: (e) => endDrag(e)
+ *   })
+ * )(config);
+ * ```
+ */
+export declare const withPanGesture: (config?: PanGestureConfig) => <C extends ElementComponent>(component: C) => C & PanGestureComponent;

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

@@ -0,0 +1,111 @@
+/**
+ * @module core/compose/features/gestures
+ * @description Adds pinch gesture recognition to components
+ */
+import { BaseComponent, ElementComponent } from '../../component';
+import { PinchEvent, GestureHandler } from '../../../gestures';
+/**
+ * Configuration for pinch gesture feature
+ */
+export interface PinchGestureConfig {
+    /**
+     * Whether to prevent default behaviors on touch events
+     * @default true
+     */
+    preventDefault?: boolean;
+    /**
+     * Handler for pinch gesture
+     */
+    onPinch?: GestureHandler;
+    /**
+     * Handler for pinch start
+     */
+    onPinchStart?: GestureHandler;
+    /**
+     * Handler for pinch end
+     */
+    onPinchEnd?: GestureHandler;
+    /**
+     * Whether to enable pinch recognition immediately
+     * @default true
+     */
+    enabled?: boolean;
+    [key: string]: any;
+}
+/**
+ * Component with pinch gesture recognition capabilities
+ */
+export interface PinchGestureComponent extends BaseComponent {
+    /**
+     * Add a pinch event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onPinch: (handler: (event: PinchEvent) => void) => PinchGestureComponent;
+    /**
+     * Add a pinch start event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onPinchStart: (handler: (event: PinchEvent) => void) => PinchGestureComponent;
+    /**
+     * Add a pinch end event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onPinchEnd: (handler: (event: PinchEvent) => void) => PinchGestureComponent;
+    /**
+     * Remove a pinch event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offPinch: (handler: (event: PinchEvent) => void) => PinchGestureComponent;
+    /**
+     * Remove a pinch start event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offPinchStart: (handler: (event: PinchEvent) => void) => PinchGestureComponent;
+    /**
+     * Remove a pinch end event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offPinchEnd: (handler: (event: PinchEvent) => void) => PinchGestureComponent;
+    /**
+     * Enable pinch recognition
+     * @returns Component for chaining
+     */
+    enablePinch: () => PinchGestureComponent;
+    /**
+     * Disable pinch recognition
+     * @returns Component for chaining
+     */
+    disablePinch: () => PinchGestureComponent;
+    /**
+     * Check if pinch gestures are supported on the current device
+     * @returns Whether pinch gestures are supported
+     */
+    isPinchSupported: () => boolean;
+}
+/**
+ * Adds pinch gesture recognition to a component.
+ * This is a lightweight alternative to the full gesture system,
+ * focused only on pinch detection.
+ *
+ * @param config - Configuration object containing pinch settings
+ * @returns Function that enhances a component with pinch capabilities
+ *
+ * @example
+ * ```ts
+ * // Add pinch gesture recognition to a component
+ * const component = pipe(
+ *   createBase,
+ *   withElement(...),
+ *   withPinchGesture({
+ *     onPinch: (e) => updateZoom(e.scale)
+ *   })
+ * )(config);
+ * ```
+ */
+export declare const withPinchGesture: (config?: PinchGestureConfig) => <C extends ElementComponent>(component: C) => C & PinchGestureComponent;

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

@@ -0,0 +1,111 @@
+/**
+ * @module core/compose/features/gestures
+ * @description Adds rotate gesture recognition to components
+ */
+import { BaseComponent, ElementComponent } from '../../component';
+import { RotateEvent, GestureHandler } from '../../../gestures';
+/**
+ * Configuration for rotate gesture feature
+ */
+export interface RotateGestureConfig {
+    /**
+     * Whether to prevent default behaviors on touch events
+     * @default true
+     */
+    preventDefault?: boolean;
+    /**
+     * Handler for rotate gesture
+     */
+    onRotate?: GestureHandler;
+    /**
+     * Handler for rotate start
+     */
+    onRotateStart?: GestureHandler;
+    /**
+     * Handler for rotate end
+     */
+    onRotateEnd?: GestureHandler;
+    /**
+     * Whether to enable rotate recognition immediately
+     * @default true
+     */
+    enabled?: boolean;
+    [key: string]: any;
+}
+/**
+ * Component with rotate gesture recognition capabilities
+ */
+export interface RotateGestureComponent extends BaseComponent {
+    /**
+     * Add a rotate event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onRotate: (handler: (event: RotateEvent) => void) => RotateGestureComponent;
+    /**
+     * Add a rotate start event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onRotateStart: (handler: (event: RotateEvent) => void) => RotateGestureComponent;
+    /**
+     * Add a rotate end event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onRotateEnd: (handler: (event: RotateEvent) => void) => RotateGestureComponent;
+    /**
+     * Remove a rotate event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offRotate: (handler: (event: RotateEvent) => void) => RotateGestureComponent;
+    /**
+     * Remove a rotate start event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offRotateStart: (handler: (event: RotateEvent) => void) => RotateGestureComponent;
+    /**
+     * Remove a rotate end event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offRotateEnd: (handler: (event: RotateEvent) => void) => RotateGestureComponent;
+    /**
+     * Enable rotate recognition
+     * @returns Component for chaining
+     */
+    enableRotate: () => RotateGestureComponent;
+    /**
+     * Disable rotate recognition
+     * @returns Component for chaining
+     */
+    disableRotate: () => RotateGestureComponent;
+    /**
+     * Check if rotate gestures are supported on the current device
+     * @returns Whether rotate gestures are supported
+     */
+    isRotateSupported: () => boolean;
+}
+/**
+ * Adds rotate gesture recognition to a component.
+ * This is a lightweight alternative to the full gesture system,
+ * focused only on rotate detection.
+ *
+ * @param config - Configuration object containing rotate settings
+ * @returns Function that enhances a component with rotate capabilities
+ *
+ * @example
+ * ```ts
+ * // Add rotate gesture recognition to a component
+ * const component = pipe(
+ *   createBase,
+ *   withElement(...),
+ *   withRotateGesture({
+ *     onRotate: (e) => updateRotation(e.rotation)
+ *   })
+ * )(config);
+ * ```
+ */
+export declare const withRotateGesture: (config?: RotateGestureConfig) => <C extends ElementComponent>(component: C) => C & RotateGestureComponent;