mtrl 0.3.8 → 0.4.0

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

@@ -0,0 +1,63 @@
+import { BaseComponent, ElementComponent } from '../component';
+/**
+ * Text manager interface
+ */
+export interface TextManager {
+    /**
+     * Sets text content
+     * @param text - Text content to set
+     * @returns TextManager instance for chaining
+     */
+    setText: (text: string) => TextManager;
+    /**
+     * Gets current text content
+     * @returns Current text
+     */
+    getText: () => string;
+    /**
+     * Gets text element
+     * @returns Text element or null if not created
+     */
+    getElement: () => HTMLElement | null;
+}
+/**
+ * Configuration for text feature
+ */
+export interface TextConfig {
+    /**
+     * Initial text content
+     */
+    text?: string;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name for class generation
+     */
+    componentName?: string;
+    /**
+     * Element to insert text before (optional)
+     */
+    beforeElement?: HTMLElement;
+    /**
+     * Additional configuration options
+     */
+    [key: string]: any;
+}
+/**
+ * Component with text capabilities
+ */
+export interface TextComponent extends BaseComponent {
+    /**
+     * Text manager
+     */
+    text: TextManager;
+}
+/**
+ * Adds text management to a component
+ *
+ * @param config - Configuration object containing text information
+ * @returns Function that enhances a component with text capabilities
+ */
+export declare const withText: <T extends TextConfig>(config: T) => <C extends ElementComponent>(component: C) => C & TextComponent;

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

@@ -0,0 +1,93 @@
+import { ElementComponent } from '../component';
+/**
+ * Configuration for text input feature
+ */
+export interface TextInputConfig {
+    /**
+     * Input type (text, password, etc.)
+     */
+    type?: string;
+    /**
+     * Whether to use textarea instead of input
+     */
+    multiline?: boolean;
+    /**
+     * Input name attribute
+     */
+    name?: string;
+    /**
+     * Whether input is required
+     */
+    required?: boolean;
+    /**
+     * Whether input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Maximum allowed length
+     */
+    maxLength?: number;
+    /**
+     * Input validation pattern
+     */
+    pattern?: string;
+    /**
+     * Autocomplete setting
+     */
+    autocomplete?: string;
+    /**
+     * Initial input value
+     */
+    value?: string;
+    [key: string]: any;
+}
+/**
+ * Component with text input capabilities
+ */
+export interface TextInputComponent extends ElementComponent {
+    /**
+     * Input element
+     */
+    input: HTMLInputElement | HTMLTextAreaElement;
+    /**
+     * Sets the input value
+     * @param value - Value to set
+     * @returns Component instance for chaining
+     */
+    setValue: (value: string) => TextInputComponent;
+    /**
+     * Gets the current input value
+     * @returns Current value
+     */
+    getValue: () => string;
+    /**
+     * Sets an attribute on the input
+     * @param name - Attribute name
+     * @param value - Attribute value
+     * @returns Component instance for chaining
+     */
+    setAttribute: (name: string, value: string) => TextInputComponent;
+    /**
+     * Gets an attribute from the input
+     * @param name - Attribute name
+     * @returns Attribute value
+     */
+    getAttribute: (name: string) => string | null;
+    /**
+     * Removes an attribute from the input
+     * @param name - Attribute name
+     * @returns Component instance for chaining
+     */
+    removeAttribute: (name: string) => TextInputComponent;
+    /**
+     * Event emission method if available
+     */
+    emit?: (event: string, data: any) => TextInputComponent;
+}
+/**
+ * Enhances a component with text input functionality
+ *
+ * @param config - Text input configuration
+ * @returns Function that enhances a component with text input capabilities
+ */
+export declare const withTextInput: <T extends TextInputConfig>(config?: T) => <C extends ElementComponent>(component: C) => C & TextInputComponent;

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

@@ -0,0 +1,57 @@
+import { BaseComponent, ElementComponent } from '../component';
+/**
+ * Configuration for text label feature
+ */
+export interface TextLabelConfig {
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Label position ('start' or 'end')
+     */
+    labelPosition?: 'start' | 'end';
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name for class generation
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Label manager interface
+ */
+export interface LabelManager {
+    /**
+     * Sets the label text
+     * @param text - Text to set
+     * @returns LabelManager instance for chaining
+     */
+    setText: (text: string) => LabelManager;
+    /**
+     * Gets the current label text
+     * @returns Current text
+     */
+    getText: () => string;
+    /**
+     * Gets the label element
+     * @returns Label element
+     */
+    getElement: () => HTMLElement;
+}
+/**
+ * Component with label capabilities
+ */
+export interface LabelComponent extends BaseComponent {
+    label: LabelManager;
+}
+/**
+ * Adds a text label to a component
+ *
+ * @param config - Configuration object containing label information
+ * @returns Function that enhances a component with a label
+ */
+export declare const withTextLabel: <T extends TextLabelConfig>(config?: T) => <C extends ElementComponent>(component: C) => C & LabelComponent;

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

@@ -0,0 +1,75 @@
+/**
+ * @module core/compose/features
+ * @description Adds throttled event handling capabilities to components
+ */
+import { BaseComponent, ElementComponent } from '../component';
+/**
+ * Configuration for throttled event handlers
+ */
+export interface ThrottleConfig {
+    /**
+     * Event handlers with throttle settings
+     */
+    throttledEvents?: Record<string, {
+        handler: (event: Event) => void;
+        wait: number;
+        options?: {
+            leading?: boolean;
+            trailing?: boolean;
+        };
+    }>;
+    [key: string]: any;
+}
+/**
+ * Component with throttled event capabilities
+ */
+export interface ThrottleComponent extends BaseComponent {
+    /**
+     * Adds a throttled event listener
+     * @param event - Event name
+     * @param handler - Event handler
+     * @param wait - Throttle interval in milliseconds
+     * @param options - Throttle options
+     * @returns ThrottleComponent for chaining
+     */
+    addThrottledEvent: (event: string, handler: (event: Event) => void, wait: number, options?: {
+        leading?: boolean;
+        trailing?: boolean;
+    }) => ThrottleComponent;
+    /**
+     * Removes a throttled event listener
+     * @param event - Event name
+     * @returns ThrottleComponent for chaining
+     */
+    removeThrottledEvent: (event: string) => ThrottleComponent;
+}
+/**
+ * Adds throttled event handling capabilities to a component
+ *
+ * @param config - Configuration object containing throttled event settings
+ * @returns Function that enhances a component with throttled event handling
+ *
+ * @example
+ * ```ts
+ * // Add throttled events to a component
+ * const component = pipe(
+ *   createBase,
+ *   withElement(...),
+ *   withThrottle({
+ *     throttledEvents: {
+ *       'scroll': {
+ *         handler: (e) => updateScrollPosition(e),
+ *         wait: 100
+ *       },
+ *       'mousemove': {
+ *         handler: handleMouseMove,
+ *         wait: 50,
+ *         options: { leading: true, trailing: false }
+ *       }
+ *     }
+ *   })
+ * )(config);
+ * ```
+ */
+export declare const withThrottle: (config?: ThrottleConfig) => <C extends ElementComponent>(component: C) => C & ThrottleComponent;
+export default withThrottle;

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

@@ -0,0 +1,42 @@
+/**
+ * @module core/compose/features
+ */
+import { BaseComponent, ElementComponent } from '../component';
+/**
+ * Configuration for track feature
+ */
+export interface TrackConfig {
+    /**
+     * CSS class prefix
+     */
+    prefix: string;
+    /**
+     * Component name for class generation
+     */
+    componentName: string;
+    /**
+     * Custom icon HTML or 'none'
+     */
+    icon?: string;
+    [key: string]: any;
+}
+/**
+ * Component with track and thumb elements
+ */
+export interface TrackComponent extends BaseComponent {
+    /**
+     * Track element
+     */
+    track: HTMLElement;
+    /**
+     * Thumb element
+     */
+    thumb: HTMLElement;
+}
+/**
+ * Adds track and thumb elements to a component
+ *
+ * @param config - Track configuration
+ * @returns Function that enhances a component with track and thumb elements
+ */
+export declare const withTrack: <T extends TrackConfig>(config: T) => <C extends ElementComponent>(component: C) => C & TrackComponent;

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

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

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

@@ -0,0 +1,45 @@
+import { BaseComponent, ElementComponent } from '../component';
+/**
+ * Event manager interface
+ */
+export interface EnhancedEventManager {
+    /**
+     * Add an event listener
+     */
+    on: (event: string, handler: Function) => EnhancedEventManager;
+    /**
+     * Remove an event listener
+     */
+    off: (event: string, handler: Function) => EnhancedEventManager;
+    /**
+     * Add multiple event listeners at once
+     */
+    addListeners: (listeners: Record<string, Function>) => EnhancedEventManager;
+    /**
+     * Remove multiple event listeners at once
+     */
+    removeListeners: (listeners: Record<string, Function>) => EnhancedEventManager;
+    /**
+     * One-time event handler
+     */
+    once: (event: string, handler: Function) => EnhancedEventManager;
+    /**
+     * Clean up all event listeners
+     */
+    destroy: () => void;
+}
+/**
+ * Component with enhanced event capabilities
+ */
+export interface EnhancedEventComponent extends BaseComponent {
+    events: EnhancedEventManager;
+    on: (event: string, handler: Function) => EnhancedEventComponent;
+    off: (event: string, handler: Function) => EnhancedEventComponent;
+}
+/**
+ * Adds enhanced event handling capabilities to a component
+ *
+ * @param target - Optional custom event target
+ * @returns Function that enhances a component with event capabilities
+ */
+export declare const withEvents: (target?: HTMLElement) => <C extends ElementComponent>(component: C) => C & EnhancedEventComponent;

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

@@ -0,0 +1,17 @@
+/**
+ * @module core/compose
+ * @description Core composition utilities for creating and combining components
+ */
+export { pipe, compose, transform } from './pipe';
+export { createComponent } from './base';
+export { createBase, withElement } from './component';
+export { withEvents, withIcon, withSize, withPosition, withText, withVariant, withDisabled, withLifecycle, withRipple, withInput, withCheckable, withStyle, withTextInput, withTextLabel, withTrack, withEnhancedEvents, withThrottle, withDebounce, withGestures } from './features';
+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 { Component } from './base';
+export type { BaseComponent, ElementComponent, TouchState, WithElementOptions } from './component';
+export type { EventComponent, TextComponent, IconComponent, LifecycleComponent, Lifecycle, DisabledComponent, DisabledManager, RippleComponent, InputComponent, CheckableComponent, CheckableManager, TextInputComponent, LabelComponent, TrackComponent, EnhancedEventComponent, ThrottleComponent, ThrottleConfig, DebounceComponent, DebounceConfig, GesturesComponent, GesturesFeatureConfig } from './features';
+export { hasLifecycle, hasEmit } from './utils/type-guards';
+export type { ComponentWithLifecycle, ComponentWithEmit } from './utils/type-guards';

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

@@ -1,9 +1,7 @@
-// src/core/compose/pipe.ts
 /**
  * @namespace compose
  * @description Core composition utilities for creating and combining components
  */
-
 /**
  * Performs left-to-right function composition.
  * Each function takes the return value of the previous function as its input.
@@ -19,9 +17,7 @@
  * const addOneThenDouble = pipe(addOne, double);
  * console.log(addOneThenDouble(3)); // Output: 8
  */
-export const pipe = <T>(...fns: Array<(arg: any) => any>) => 
-  (x: T): any => fns.reduce((v, f) => f(v), x);
-
+export declare const pipe: <T>(...fns: Array<(arg: any) => any>) => (x: T) => any;
 /**
  * Performs right-to-left function composition.
  * This is the mathematical composition order: (f ∘ g)(x) = f(g(x))
@@ -37,9 +33,7 @@ export const pipe = <T>(...fns: Array<(arg: any) => any>) =>
  * const doubleTheAddOne = compose(addOne, double);
  * console.log(doubleTheAddOne(3)); // Output: 7
  */
-export const compose = <T>(...fns: Array<(arg: any) => any>) => 
-  (x: T): any => fns.reduceRight((v, f) => f(v), x);
-
+export declare const compose: <T>(...fns: Array<(arg: any) => any>) => (x: T) => any;
 /**
  * Creates a function that applies transformations to an object with shared context.
  * Useful for applying multiple transformations while maintaining a shared state.
@@ -57,18 +51,8 @@ export const compose = <T>(...fns: Array<(arg: any) => any>) =>
  * const person = createPerson({}, { name: 'John', age: 30 });
  * // Result: { name: 'John', age: 30 }
  */
-export const transform = <T, C = Record<string, any>>(
-  ...transformers: Array<(obj: T, context: C) => Partial<T>>
-) => (obj: T, context: C = {} as C): T => 
-  transformers.reduce(
-    (acc, transformer) => ({
-      ...acc,
-      ...transformer(acc, context)
-    }), 
-    obj
-  );
-
+export declare const transform: <T, C = Record<string, any>>(...transformers: Array<(obj: T, context: C) => Partial<T>>) => (obj: T, context?: C) => T;
 /**
  * @typedef {Object} TransformContext
  * @property {any} [key] - Any contextual data needed by transformers
- */
+ */ 

package/dist/core/compose/utils/type-guards.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Utility functions for type checking component capabilities
+ */
+import { ElementComponent } from '../component';
+/**
+ * Interface for components with lifecycle
+ */
+export interface ComponentWithLifecycle extends ElementComponent {
+    lifecycle: {
+        destroy: () => void;
+        [key: string]: any;
+    };
+}
+/**
+ * Interface for components with emit method
+ */
+export interface ComponentWithEmit extends ElementComponent {
+    emit: (event: string, data: any) => any;
+}
+/**
+ * Type guard to check if component has lifecycle
+ */
+export declare function hasLifecycle(component: any): component is ComponentWithLifecycle;
+/**
+ * Type guard to check if component has emit method
+ */
+export declare function hasEmit(component: any): component is ComponentWithEmit;

package/dist/core/composition/features/dom.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Creates DOM elements from component schema using the core createLayout utility
+ * This is a key feature that bridges the gap between declarative schema and actual DOM
+ *
+ * @returns Component enhancer that creates DOM structure from schema
+ *
+ * @example
+ * ```ts
+ * // Materialize component schema into DOM
+ * const component = pipe(
+ *   createBase,
+ *   withLayout(config),
+ *   withIcon(config),
+ *   withLabel(config),
+ *   withDom()
+ * )(config);
+ * ```
+ */
+export declare const withDom: () => (component: any) => any;

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

@@ -0,0 +1,45 @@
+/**
+ * Configuration for icon feature
+ */
+export interface IconConfig {
+    /**
+     * Icon HTML content
+     */
+    icon?: string;
+    /**
+     * Position of the icon ('start' or 'end')
+     */
+    iconPosition?: 'start' | 'end';
+    /**
+     * Size variant for the icon
+     */
+    iconSize?: string;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name for class generation
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Enhances component schema with an icon element
+ * Unlike the traditional withIcon, this modifies the schema
+ * without creating actual DOM elements.
+ *
+ * @param config Configuration containing icon information
+ * @returns Component enhancer that adds icon to schema
+ *
+ * @example
+ * ```ts
+ * // Add icon to a component schema
+ * const component = pipe(
+ *   createBase,
+ *   withLayout(config),
+ *   withIcon(config)
+ * )(config);
+ * ```
+ */
+export declare const withIcon: (config: IconConfig) => (component: any) => any;

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

@@ -1,12 +1,7 @@
-// src/core/composition/features/index.ts
-
-// Export composition features
 export { withLayout } from './layout';
 export { withIcon } from './icon';
 export { withLabel } from './label';
 export { withDom } from './dom';
-
-// Re-export interface types for better developer experience
 export type { IconConfig } from './icon';
 export type { LabelConfig } from './label';
-export type { LayoutConfig } from './layout';
+export type { LayoutConfig } from './layout';

package/dist/core/composition/features/label.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Configuration for label feature
+ */
+export interface LabelConfig {
+    /**
+     * Label text content
+     */
+    label?: string;
+    /**
+     * Position of the label ('start', 'end', 'top', or 'bottom')
+     */
+    labelPosition?: 'start' | 'end' | 'top' | 'bottom';
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name for class generation
+     */
+    componentName?: string;
+    /**
+     * ID for the input element this label is associated with
+     */
+    id?: string;
+    /**
+     * Whether the labeled element is required
+     */
+    required?: boolean;
+    [key: string]: any;
+}
+/**
+ * Enhances component schema with a label element
+ * Unlike the traditional withLabel, this modifies the schema
+ * without creating actual DOM elements.
+ *
+ * @param config Configuration containing label information
+ * @returns Component enhancer that adds label to schema
+ *
+ * @example
+ * ```ts
+ * // Add label to a component schema
+ * const component = pipe(
+ *   createBase,
+ *   withLayout(config),
+ *   withLabel(config)
+ * )(config);
+ * ```
+ */
+export declare const withLabel: (config: LabelConfig) => (component: any) => any;

package/{src/core/composition/features/layout.ts → dist/core/composition/features/layout.d.ts}

@@ -1,25 +1,21 @@
-// src/core/composition/features/layout.ts
-
 /**
  * Configuration that includes a component schema
  */
 export interface LayoutConfig {
-  /**
-   * Component schema definition
-   */
-  schema?: any;
-  
-  [key: string]: any;
+    /**
+     * Component schema definition
+     */
+    schema?: any;
+    [key: string]: any;
 }
-
 /**
  * Adds schema definition to component without creating DOM
  * This establishes the blueprint for the component's layout
  * before materializing it with withDom
- * 
+ *
  * @param config Configuration containing schema definition
  * @returns Component enhancer with schema definition
- * 
+ *
  * @example
  * ```ts
  * // Add layout to a component
@@ -32,16 +28,4 @@ export interface LayoutConfig {
  * )(config);
  * ```
  */
-export const withLayout = (config: LayoutConfig) => component => {
-  // Use the schema definition from the config
-  if (!config.schema) {
-    console.warn('No schema definition found in component config');
-    return component;
-  }
-  
-  // Return enhanced component with schema definition
-  return {
-    ...component,
-    schema: config.schema
-  };
-};
+export declare const withLayout: (config: LayoutConfig) => (component: any) => any;