mtrl-addons 0.2.1 → 0.2.3

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 type { BaseComponent, ElementComponent } from "mtrl";
+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 type { BaseComponent, ElementComponent } from "mtrl";
+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 type { BaseComponent, ElementComponent } from "mtrl";
+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 type { BaseComponent, ElementComponent } from "mtrl";
+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;

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

@@ -0,0 +1,149 @@
+/**
+ * @module core/compose/features/gestures
+ * @description Adds swipe gesture recognition to components
+ */
+import type { BaseComponent, ElementComponent } from "mtrl";
+import { SwipeEvent, GestureHandler } from "../../../gestures";
+/**
+ * Configuration for swipe gesture feature
+ */
+export interface SwipeGestureConfig {
+    /**
+     * 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;
+    /**
+     * Whether to prevent default behaviors on touch events
+     * @default true
+     */
+    preventDefault?: boolean;
+    /**
+     * Handler for any swipe direction
+     */
+    onSwipe?: GestureHandler;
+    /**
+     * Handler specifically for left swipes
+     */
+    onSwipeLeft?: GestureHandler;
+    /**
+     * Handler specifically for right swipes
+     */
+    onSwipeRight?: GestureHandler;
+    /**
+     * Handler specifically for up swipes
+     */
+    onSwipeUp?: GestureHandler;
+    /**
+     * Handler specifically for down swipes
+     */
+    onSwipeDown?: GestureHandler;
+    /**
+     * Whether to enable swipe recognition immediately
+     * @default true
+     */
+    enabled?: boolean;
+    [key: string]: any;
+}
+/**
+ * Component with swipe gesture recognition capabilities
+ */
+export interface SwipeGestureComponent extends BaseComponent {
+    /**
+     * Add a handler for any swipe direction
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onSwipe: (handler: (event: SwipeEvent) => void) => SwipeGestureComponent;
+    /**
+     * Add a handler specifically for left swipes
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onSwipeLeft: (handler: (event: SwipeEvent) => void) => SwipeGestureComponent;
+    /**
+     * Add a handler specifically for right swipes
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onSwipeRight: (handler: (event: SwipeEvent) => void) => SwipeGestureComponent;
+    /**
+     * Add a handler specifically for up swipes
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onSwipeUp: (handler: (event: SwipeEvent) => void) => SwipeGestureComponent;
+    /**
+     * Add a handler specifically for down swipes
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onSwipeDown: (handler: (event: SwipeEvent) => void) => SwipeGestureComponent;
+    /**
+     * Remove a swipe event handler for any direction
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offSwipe: (handler: (event: SwipeEvent) => void) => SwipeGestureComponent;
+    /**
+     * Remove a left swipe event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offSwipeLeft: (handler: (event: SwipeEvent) => void) => SwipeGestureComponent;
+    /**
+     * Remove a right swipe event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offSwipeRight: (handler: (event: SwipeEvent) => void) => SwipeGestureComponent;
+    /**
+     * Remove an up swipe event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offSwipeUp: (handler: (event: SwipeEvent) => void) => SwipeGestureComponent;
+    /**
+     * Remove a down swipe event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offSwipeDown: (handler: (event: SwipeEvent) => void) => SwipeGestureComponent;
+    /**
+     * Enable swipe recognition
+     * @returns Component for chaining
+     */
+    enableSwipe: () => SwipeGestureComponent;
+    /**
+     * Disable swipe recognition
+     * @returns Component for chaining
+     */
+    disableSwipe: () => SwipeGestureComponent;
+}
+/**
+ * Adds swipe gesture recognition to a component.
+ * This is a lightweight alternative to the full gesture system,
+ * focused only on swipe detection.
+ *
+ * @param config - Configuration object containing swipe settings
+ * @returns Function that enhances a component with swipe capabilities
+ *
+ * @example
+ * ```ts
+ * // Add swipe gesture recognition to a component
+ * const component = pipe(
+ *   createBase,
+ *   withElement(...),
+ *   withSwipeGesture({
+ *     onSwipeLeft: () => showNextPage(),
+ *     onSwipeRight: () => showPreviousPage()
+ *   })
+ * )(config);
+ * ```
+ */
+export declare const withSwipeGesture: (config?: SwipeGestureConfig) => <C extends ElementComponent>(component: C) => C & SwipeGestureComponent;

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

@@ -0,0 +1,79 @@
+/**
+ * @module core/compose/features/gestures
+ * @description Adds tap gesture recognition to components
+ */
+import type { BaseComponent, ElementComponent } from "mtrl";
+import { TapEvent, GestureHandler } from "../../../gestures";
+/**
+ * Configuration for tap gesture feature
+ */
+export interface TapGestureConfig {
+    /**
+     * Distance threshold (in pixels) for tap recognition
+     * @default 10
+     */
+    tapDistanceThreshold?: number;
+    /**
+     * Whether to prevent default behaviors on touch events
+     * @default true
+     */
+    preventDefault?: boolean;
+    /**
+     * Handler for tap gesture
+     */
+    onTap?: GestureHandler;
+    /**
+     * Whether to enable tap recognition immediately
+     * @default true
+     */
+    enabled?: boolean;
+    [key: string]: any;
+}
+/**
+ * Component with tap gesture recognition capabilities
+ */
+export interface TapGestureComponent extends BaseComponent {
+    /**
+     * Add a tap event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    onTap: (handler: (event: TapEvent) => void) => TapGestureComponent;
+    /**
+     * Remove a tap event handler
+     * @param handler - Event handler function
+     * @returns Component for chaining
+     */
+    offTap: (handler: (event: TapEvent) => void) => TapGestureComponent;
+    /**
+     * Enable tap recognition
+     * @returns Component for chaining
+     */
+    enableTap: () => TapGestureComponent;
+    /**
+     * Disable tap recognition
+     * @returns Component for chaining
+     */
+    disableTap: () => TapGestureComponent;
+}
+/**
+ * Adds tap gesture recognition to a component.
+ * This is a lightweight alternative to the full gesture system,
+ * focused only on tap detection.
+ *
+ * @param config - Configuration object containing tap settings
+ * @returns Function that enhances a component with tap capabilities
+ *
+ * @example
+ * ```ts
+ * // Add tap gesture recognition to a component
+ * const component = pipe(
+ *   createBase,
+ *   withElement(...),
+ *   withTapGesture({
+ *     onTap: (e) => console.log('Tapped at', e.x, e.y)
+ *   })
+ * )(config);
+ * ```
+ */
+export declare const withTapGesture: (config?: TapGestureConfig) => <C extends ElementComponent>(component: C) => C & TapGestureComponent;

package/{src/core/compose/features/index.ts → dist/core/compose/features/index.d.ts}

@@ -1,3 +1,2 @@
 export { withGestures } from './gestures';
-
-export type { GesturesComponent, GesturesFeatureConfig } from './gestures';
+export type { GesturesComponent, GesturesFeatureConfig } from './gestures';

package/{src/core/compose/index.ts → dist/core/compose/index.d.ts}

@@ -1,15 +1,6 @@
-export {
-  withGestures
-} from './features/gestures';
-
-// Gesture features
+export { withGestures } from './features/gestures';
 export { withTapGesture } from './features/gestures/tap';
 export { withSwipeGesture } from './features/gestures/swipe';
 export { withLongPressGesture } from './features/gestures/longpress';
 export { withPanGesture } from './features/gestures/pan';
-
-
-export type {
-  GesturesComponent,
-  GesturesFeatureConfig
-} from './features';
+export type { GesturesComponent, GesturesFeatureConfig } from './features';

package/{src/core/gestures/index.ts → dist/core/gestures/index.d.ts}

@@ -1,10 +1,7 @@
-// src/core/gestures/index.ts
 /**
  * @module core/gestures
  * @description Modular gesture recognition system for touch and mouse interactions
  */
-
-// Export core gesture utilities and types
 export { createGestureManager, GESTURE_TYPES, SWIPE_DIRECTIONS } from './manager';
 export { detectTap } from './tap';
 export { detectSwipe } from './swipe';
@@ -12,20 +9,4 @@ export { detectLongPress } from './longpress';
 export { detectPinch } from './pinch';
 export { detectRotate } from './rotate';
 export { detectPan } from './pan';
-
-// Export types
-export type { 
-  GestureManager,
-  GestureConfig,
-  GestureEvent,
-  TapEvent,
-  SwipeEvent,
-  LongPressEvent,
-  PinchEvent,
-  RotateEvent,
-  PanEvent,
-  AnyGestureEvent,
-  GestureHandler,
-  GestureState,
-  GestureDetectionContext
-} from './types';
+export type { GestureManager, GestureConfig, GestureEvent, TapEvent, SwipeEvent, LongPressEvent, PinchEvent, RotateEvent, PanEvent, AnyGestureEvent, GestureHandler, GestureState, GestureDetectionContext } from './types';