mtrl 0.3.8 → 0.4.0

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 { BaseComponent, ElementComponent } from '../../component';
+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 { BaseComponent, ElementComponent } from '../../component';
+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/dist/core/compose/features/gestures.d.ts

@@ -0,0 +1,86 @@
+/**
+ * @module core/compose/features
+ * @description Adds gesture recognition capabilities to components
+ */
+import { BaseComponent, ElementComponent } from '../component';
+import { GestureManager, GestureConfig, GestureHandler } from '../../gestures';
+/**
+ * Configuration for gestures feature
+ */
+export interface GesturesFeatureConfig extends GestureConfig {
+    /**
+     * Whether to enable gesture recognition immediately
+     * @default true
+     */
+    enableGestures?: boolean;
+    /**
+     * Initial gesture event handlers
+     */
+    gestureHandlers?: Record<string, GestureHandler>;
+    [key: string]: any;
+}
+/**
+ * Component with gesture recognition capabilities
+ */
+export interface GesturesComponent extends BaseComponent {
+    /**
+     * Gesture manager instance
+     */
+    gestures: GestureManager;
+    /**
+     * Add a gesture event handler
+     * @param eventType - Type of gesture event
+     * @param handler - Event handler function
+     * @returns GesturesComponent for chaining
+     */
+    onGesture: (eventType: string, handler: GestureHandler) => GesturesComponent;
+    /**
+     * Remove a gesture event handler
+     * @param eventType - Type of gesture event
+     * @param handler - Event handler function
+     * @returns GesturesComponent for chaining
+     */
+    offGesture: (eventType: string, handler: GestureHandler) => GesturesComponent;
+    /**
+     * Check if a gesture type is supported on the current device
+     * @param gestureType - Type of gesture to check
+     * @returns Whether the gesture is supported
+     */
+    isGestureSupported: (gestureType: string) => boolean;
+    /**
+     * Enable gesture recognition
+     * @returns GesturesComponent for chaining
+     */
+    enableGestures: () => GesturesComponent;
+    /**
+     * Disable gesture recognition
+     * @returns GesturesComponent for chaining
+     */
+    disableGestures: () => GesturesComponent;
+}
+/**
+ * Adds gesture recognition capabilities to a component.
+ * This is a comprehensive gesture feature that adds support for all gesture types.
+ * For more lightweight, specific gestures, use the individual gesture features.
+ *
+ * @param config - Configuration object containing gesture settings
+ * @returns Function that enhances a component with gesture capabilities
+ *
+ * @example
+ * ```ts
+ * // Add gesture recognition to a component
+ * const component = pipe(
+ *   createBase,
+ *   withElement(...),
+ *   withGestures({
+ *     swipeThreshold: 50,
+ *     gestureHandlers: {
+ *       'tap': (e) => handleTap(e),
+ *       'swipeleft': (e) => navigateForward(e),
+ *       'swiperight': (e) => navigateBack(e)
+ *     }
+ *   })
+ * )(config);
+ * ```
+ */
+export declare const withGestures: (config?: GesturesFeatureConfig) => <C extends ElementComponent>(component: C) => C & GesturesComponent;

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

@@ -0,0 +1,71 @@
+import { BaseComponent, ElementComponent } from '../component';
+/**
+ * Icon manager interface
+ */
+export interface IconManager {
+    /**
+     * Sets icon HTML content
+     * @param html - Icon HTML content
+     * @returns IconManager instance for chaining
+     */
+    setIcon: (html: string) => IconManager;
+    /**
+     * Gets current icon HTML content
+     * @returns Current icon HTML
+     */
+    getIcon: () => string;
+    /**
+     * Gets icon element
+     * @returns Icon element or null if not created
+     */
+    getElement: () => HTMLElement | null;
+}
+/**
+ * Configuration for icon feature
+ */
+export interface IconConfig {
+    /**
+     * Initial icon HTML content
+     */
+    icon?: string;
+    /**
+     * Icon position ('start' or 'end')
+     */
+    iconPosition?: 'start' | 'end';
+    /**
+     * Icon size variant
+     */
+    iconSize?: string;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name for class generation
+     */
+    componentName?: string;
+    /**
+     * Text content (for determining button styling)
+     */
+    text?: string;
+    /**
+     * Additional configuration options
+     */
+    [key: string]: any;
+}
+/**
+ * Component with icon capabilities
+ */
+export interface IconComponent extends BaseComponent {
+    /**
+     * Icon manager
+     */
+    icon: IconManager;
+}
+/**
+ * Adds icon management to a component
+ *
+ * @param config - Configuration object containing icon information
+ * @returns Function that enhances a component with icon capabilities
+ */
+export declare const withIcon: <T extends IconConfig>(config: T) => <C extends ElementComponent>(component: C) => C & IconComponent;

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

@@ -1,6 +1,3 @@
-// src/core/compose/features/index.ts
-
-// Core features
 export { withEvents } from './events';
 export { withText } from './text';
 export { withIcon } from './icon';
@@ -16,12 +13,11 @@ export { withTextLabel } from './textlabel';
 export { withTrack } from './track';
 export { withEvents as withEnhancedEvents } from './withEvents';
 export { withBadge } from './badge';
-
-// State management features
+export { withThrottle } from './throttle';
+export { withDebounce } from './debounce';
+export { withGestures } from './gestures';
 export { withDisabled } from './disabled';
 export { withLifecycle } from './lifecycle';
-
-// Re-export interfaces for better developer experience
 export type { EventComponent } from './events';
 export type { TextComponent } from './text';
 export type { IconComponent } from './icon';
@@ -34,4 +30,7 @@ export type { TextInputComponent } from './textinput';
 export type { LabelComponent, LabelManager } from './textlabel';
 export type { TrackComponent } from './track';
 export type { EnhancedEventComponent } from './withEvents';
-export type { BadgeComponent, BadgeConfig } from './badge';
+export type { BadgeComponent, BadgeConfig } from './badge';
+export type { ThrottleComponent, ThrottleConfig } from './throttle';
+export type { DebounceComponent, DebounceConfig } from './debounce';
+export type { GesturesComponent, GesturesFeatureConfig } from './gestures';

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

@@ -0,0 +1,71 @@
+import { ElementComponent } from '../component';
+/**
+ * Input configuration options
+ */
+export interface InputConfig {
+    /**
+     * Input name attribute
+     */
+    name?: string;
+    /**
+     * Initial checked state
+     */
+    checked?: boolean;
+    /**
+     * Whether input is required
+     */
+    required?: boolean;
+    /**
+     * Whether input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Input value attribute
+     */
+    value?: string;
+    /**
+     * Accessibility label text
+     */
+    label?: string;
+    /**
+     * Alternative accessibility label
+     */
+    ariaLabel?: string;
+    /**
+     * Component name for classes
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Component with input element and related methods
+ */
+export interface InputComponent extends ElementComponent {
+    /**
+     * Input element
+     */
+    input: HTMLInputElement;
+    /**
+     * Gets the current input value
+     * @returns Current value
+     */
+    getValue: () => string;
+    /**
+     * Sets the input value and emits a value event
+     * @param value - New value to set
+     * @returns Component instance for chaining
+     */
+    setValue: (value: string) => InputComponent;
+    /**
+     * Event emission method if available
+     */
+    emit?: (event: string, data: any) => InputComponent;
+}
+/**
+ * Creates an input element and adds it to a component
+ * Handles both input creation and event emission for state changes
+ *
+ * @param config - Input configuration
+ * @returns Function that enhances a component with input functionality
+ */
+export declare const withInput: <T extends InputConfig>(config?: T) => <C extends ElementComponent>(component: C) => C & InputComponent;

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

@@ -0,0 +1,61 @@
+import { BaseComponent, ElementComponent } from '../component';
+/**
+ * Component managers that can be passed to lifecycle
+ */
+export interface ComponentManagers {
+    events?: {
+        destroy: () => void;
+    };
+    text?: {
+        getElement: () => HTMLElement | null;
+    };
+    icon?: {
+        getElement: () => HTMLElement | null;
+    };
+    [key: string]: any;
+}
+/**
+ * Lifecycle methods interface
+ */
+export interface Lifecycle {
+    /**
+     * Registers a handler for mount event
+     * @param handler - Function to call when component is mounted
+     * @returns Unsubscribe function
+     */
+    onMount: (handler: () => void) => () => void;
+    /**
+     * Registers a handler for unmount event
+     * @param handler - Function to call when component is unmounted
+     * @returns Unsubscribe function
+     */
+    onUnmount: (handler: () => void) => () => void;
+    /**
+     * Mounts the component
+     */
+    mount: () => void;
+    /**
+     * Unmounts the component
+     */
+    unmount: () => void;
+    /**
+     * Checks if component is mounted
+     */
+    isMounted: () => boolean;
+    /**
+     * Destroys the component
+     */
+    destroy: () => void;
+}
+/**
+ * Component with lifecycle capabilities
+ */
+export interface LifecycleComponent extends BaseComponent {
+    lifecycle: Lifecycle;
+}
+/**
+ * Adds lifecycle management to a component
+ *
+ * @returns Function that enhances a component with lifecycle management
+ */
+export declare const withLifecycle: () => <T extends ElementComponent>(component: T) => T & LifecycleComponent;

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

@@ -0,0 +1,51 @@
+import { BaseComponent, ElementComponent } from '../component';
+/**
+ * Available position values
+ */
+export declare enum POSITIONS {
+    LEFT = "left",
+    RIGHT = "right",
+    TOP = "top",
+    BOTTOM = "bottom",
+    START = "start",
+    END = "end",
+    CENTER = "center"
+}
+/**
+ * Configuration for position feature
+ */
+export interface PositionConfig {
+    position?: string;
+    prefix?: string;
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Position manager interface
+ */
+export interface PositionManager {
+    /**
+     * Sets the component's position
+     * @param newPosition - New position value
+     * @returns Position manager for chaining
+     */
+    setPosition: (newPosition: string) => PositionManager;
+    /**
+     * Gets the current position
+     * @returns Current position
+     */
+    getPosition: () => string;
+}
+/**
+ * Component with position capabilities
+ */
+export interface PositionComponent extends BaseComponent {
+    position: PositionManager;
+}
+/**
+ * Adds positioning functionality to a component
+ *
+ * @param config - Configuration object containing position information
+ * @returns Function that enhances a component with position capabilities
+ */
+export declare const withPosition: <T extends PositionConfig>(config: T) => <C extends ElementComponent>(component: C) => C & PositionComponent;

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

@@ -0,0 +1,61 @@
+import { BaseComponent, ElementComponent } from '../component';
+import { LifecycleComponent } from './lifecycle';
+/**
+ * Ripple configuration interface
+ */
+export interface RippleConfig {
+    /**
+     * Animation duration in milliseconds
+     */
+    duration?: number;
+    /**
+     * Animation timing function
+     */
+    timing?: string;
+    /**
+     * Opacity values for start and end [start, end]
+     */
+    opacity?: [string, string];
+}
+/**
+ * Ripple controller interface
+ */
+export interface RippleController {
+    /**
+     * Mounts ripple effect to an element
+     * @param element - Target element
+     */
+    mount: (element: HTMLElement) => void;
+    /**
+     * Unmounts ripple effect from an element
+     * @param element - Target element
+     */
+    unmount: (element: HTMLElement) => void;
+}
+/**
+ * Configuration for ripple feature
+ */
+export interface RippleFeatureConfig {
+    ripple?: boolean;
+    rippleConfig?: RippleConfig;
+    [key: string]: any;
+}
+/**
+ * Component with ripple capabilities
+ */
+export interface RippleComponent extends BaseComponent {
+    ripple: RippleController;
+}
+declare global {
+    interface HTMLElement {
+        __rippleHandlers?: Array<(e: MouseEvent) => void>;
+        __rippleContainer?: HTMLElement;
+    }
+}
+/**
+ * Adds ripple effect functionality to a component
+ *
+ * @param config - Configuration object
+ * @returns Function that enhances a component with ripple effect
+ */
+export declare const withRipple: <T extends RippleFeatureConfig>(config: T) => <C extends ElementComponent & Partial<LifecycleComponent>>(component: C) => C & RippleComponent;

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

@@ -0,0 +1,17 @@
+import { ElementComponent } from '../component';
+/**
+ * Configuration for size feature
+ */
+export interface SizeConfig {
+    size?: string;
+    prefix?: string;
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Adds a size class to a component
+ *
+ * @param config - Configuration object containing size information
+ * @returns Function that enhances a component with the size class
+ */
+export declare const withSize: <T extends SizeConfig>(config: T) => <C extends ElementComponent>(component: C) => C;

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

@@ -0,0 +1,16 @@
+import { ElementComponent } from '../component';
+/**
+ * Configuration for style feature
+ */
+export interface StyleConfig {
+    variant?: string;
+    size?: string;
+    [key: string]: any;
+}
+/**
+ * Adds style classes to a component based on configuration
+ *
+ * @param config - Configuration object containing style information
+ * @returns Function that enhances a component with style classes
+ */
+export declare const withStyle: <T extends StyleConfig>(config?: T) => <C extends ElementComponent>(component: C) => C;