mtrl 0.3.8 → 0.4.0

package/dist/components/slider/constants.d.ts

@@ -0,0 +1,138 @@
+/**
+ * Available slider color variants
+ * @category Components
+ */
+export declare const SLIDER_COLORS: {
+    /** Primary color variant */
+    readonly PRIMARY: "primary";
+    /** Secondary color variant */
+    readonly SECONDARY: "secondary";
+    /** Tertiary color variant */
+    readonly TERTIARY: "tertiary";
+    /** Error color variant */
+    readonly ERROR: "error";
+};
+/**
+ * Available slider size variants
+ * @category Components
+ */
+export declare const SLIDER_SIZES: {
+    /** Small size slider */
+    readonly SMALL: "small";
+    /** Medium size slider */
+    readonly MEDIUM: "medium";
+    /** Large size slider */
+    readonly LARGE: "large";
+};
+/**
+ * Available slider events
+ * @category Components
+ */
+export declare const SLIDER_EVENTS: {
+    /** Fired when slider value changes and interaction completes */
+    readonly CHANGE: "change";
+    /** Fired during dragging as value changes */
+    readonly INPUT: "input";
+    /** Fired when slider receives focus */
+    readonly FOCUS: "focus";
+    /** Fired when slider loses focus */
+    readonly BLUR: "blur";
+    /** Fired when interaction starts */
+    readonly START: "start";
+    /** Fired when interaction ends */
+    readonly END: "end";
+};
+/**
+ * Position options for slider label and icon
+ * @category Components
+ */
+export declare const SLIDER_POSITIONS: {
+    /** Position at the start */
+    readonly START: "start";
+    /** Position at the end */
+    readonly END: "end";
+};
+/**
+ * Default slider configuration values
+ * @category Components
+ */
+export declare const SLIDER_DEFAULTS: {
+    /** Minimum value */
+    readonly MIN: 0;
+    /** Maximum value */
+    readonly MAX: 100;
+    /** Starting value */
+    readonly VALUE: 0;
+    /** Step increment size */
+    readonly STEP: 1;
+    /** Whether slider is disabled */
+    readonly DISABLED: false;
+    /** Default color variant */
+    readonly COLOR: "primary";
+    /** Default size variant */
+    readonly SIZE: "medium";
+    /** Whether to show tick marks */
+    readonly TICKS: false;
+    /** Whether to show value while dragging */
+    readonly SHOW_VALUE: true;
+    /** Whether to snap to steps during dragging */
+    readonly SNAP_TO_STEPS: true;
+    /** Whether slider is a range slider (two handles) */
+    readonly RANGE: false;
+    /** Default icon position */
+    readonly ICON_POSITION: "start";
+    /** Default label position */
+    readonly LABEL_POSITION: "start";
+};
+/**
+ * CSS class names used by the slider component
+ * @category Components
+ */
+export declare const SLIDER_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "slider";
+    /** Container for slider track and handles */
+    readonly CONTAINER: "slider__container";
+    /** Track element class */
+    readonly TRACK: "slider__track";
+    /** Filled track portion class */
+    readonly FILL: "slider__fill";
+    /** Handle element class */
+    readonly HANDLE: "slider__handle";
+    /** Second handle element class (for range slider) */
+    readonly HANDLE_SECOND: "slider__handle--second";
+    /** Tick marks container class */
+    readonly TICKS: "slider__ticks";
+    /** Individual tick mark class */
+    readonly TICK: "slider__tick";
+    /** Active/selected tick mark class */
+    readonly TICK_ACTIVE: "slider__tick--active";
+    /** Label element class */
+    readonly LABEL: "slider__label";
+    /** Value display class */
+    readonly VALUE: "slider__value";
+    /** Icon container class */
+    readonly ICON: "slider__icon";
+    /** Disabled state class */
+    readonly DISABLED: "slider--disabled";
+    /** Focused state class */
+    readonly FOCUSED: "slider--focused";
+    /** Dragging state class */
+    readonly DRAGGING: "slider--dragging";
+    /** Range slider variant class */
+    readonly RANGE: "slider--range";
+    /** Small size variant class */
+    readonly SMALL: "slider--small";
+    /** Medium size variant class */
+    readonly MEDIUM: "slider--medium";
+    /** Large size variant class */
+    readonly LARGE: "slider--large";
+    /** Primary color variant class */
+    readonly PRIMARY: "slider--primary";
+    /** Secondary color variant class */
+    readonly SECONDARY: "slider--secondary";
+    /** Tertiary color variant class */
+    readonly TERTIARY: "slider--tertiary";
+    /** Error color variant class */
+    readonly ERROR: "slider--error";
+};

package/dist/components/slider/features/controller.d.ts

@@ -0,0 +1,9 @@
+import { SliderConfig } from '../types';
+/**
+ * Add controller functionality to slider component
+ * Manages state, events, user interactions, and UI rendering
+ *
+ * @param config Slider configuration
+ * @returns Component enhancer with slider controller functionality
+ */
+export declare const withController: (config: SliderConfig) => (component: any) => any;

package/dist/components/slider/features/handlers.d.ts

@@ -0,0 +1,25 @@
+import { SliderConfig } from '../types';
+/**
+ * Create consolidated event handlers for slider component (mouse, touch, keyboard)
+ *
+ * @param config Slider configuration
+ * @param state Slider state object
+ * @param uiRenderer UI renderer interface from controller
+ * @param eventHelpers Event helper methods
+ * @returns Event handlers for all slider interactions
+ */
+export declare const createHandlers: (config: SliderConfig, state: any, uiRenderer: any, eventHelpers: any) => {
+    handleHandleMouseDown: (e: any, isSecondHandle?: boolean) => void;
+    handleTrackMouseDown: (e: any) => void;
+    handleMouseMove: (e: any) => void;
+    handleMouseUp: (e: any) => void;
+    handleKeyDown: (e: any, isSecondHandle?: boolean) => void;
+    handleFocus: (e: any, isSecondHandle?: boolean) => void;
+    handleBlur: (e: any, isSecondHandle?: boolean) => void;
+    setupEventListeners: () => void;
+    cleanupEventListeners: () => void;
+    showActiveBubble: (bubble: any) => void;
+    hideActiveBubble: (bubble: any, delay?: number) => void;
+    hideAllBubbles: () => void;
+    clearKeyboardFocus: () => void;
+};

package/dist/components/slider/features/index.d.ts

@@ -0,0 +1,3 @@
+export { withRange } from './range';
+export { withStates } from './states';
+export { withController } from './controller';

package/dist/components/slider/features/range.d.ts

@@ -0,0 +1,8 @@
+import { SliderConfig } from '../types';
+/**
+ * Enhances structure definition with range slider elements
+ *
+ * @param config Slider configuration
+ * @returns Component enhancer that adds range slider to structure
+ */
+export declare const withRange: (config: SliderConfig) => (component: any) => any;

package/dist/components/slider/features/states.d.ts

@@ -0,0 +1,9 @@
+import { SliderConfig } from '../types';
+/**
+ * Add state management features to slider component
+ * Combines appearance and disabled functionality into a single feature
+ *
+ * @param config Slider configuration
+ * @returns Component enhancer with state management features
+ */
+export declare const withStates: (config: SliderConfig) => (component: any) => any;

package/dist/components/slider/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './slider';
+export { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS, SLIDER_POSITIONS, SLIDER_DEFAULTS, SLIDER_CLASSES } from './constants';
+export { type SliderConfig, type SliderComponent, type SliderEvent } from './types';

package/dist/components/slider/schema.d.ts

@@ -0,0 +1,108 @@
+import { SliderConfig } from './types';
+/**
+ * Creates the base slider structure definition
+ *
+ * @param component Component for class name generation
+ * @param config Slider configuration
+ * @returns Structure schema object
+ */
+export declare function createSliderSchema(component: any, config: SliderConfig): {
+    element: {
+        options: {
+            className: any[];
+            attributes: {
+                tabindex: string;
+                role: string;
+                'aria-disabled': string;
+            };
+        };
+        children: {
+            container: {
+                options: {
+                    className: any;
+                };
+                children: {
+                    track: {
+                        options: {
+                            className: any;
+                        };
+                        children: {
+                            activeTrack: {
+                                options: {
+                                    className: any;
+                                    style: {
+                                        width: string;
+                                    };
+                                };
+                            };
+                            startTrack: {
+                                options: {
+                                    className: any;
+                                    style: {
+                                        display: string;
+                                        width: string;
+                                    };
+                                };
+                            };
+                            remainingTrack: {
+                                options: {
+                                    className: any;
+                                    style: {
+                                        width: string;
+                                    };
+                                };
+                            };
+                        };
+                    };
+                    ticksContainer: {
+                        options: {
+                            className: any;
+                        };
+                    };
+                    startDot: {
+                        options: {
+                            className: any[];
+                        };
+                    };
+                    endDot: {
+                        options: {
+                            className: any[];
+                        };
+                    };
+                    handle: {
+                        options: {
+                            className: any;
+                            attributes: {
+                                role: string;
+                                'aria-valuemin': string;
+                                'aria-valuemax': string;
+                                'aria-valuenow': string;
+                                'aria-orientation': string;
+                                tabindex: string;
+                                'aria-disabled': string;
+                                'data-value': string;
+                                'data-handle-index': string;
+                            };
+                            style: {
+                                left: string;
+                            };
+                        };
+                    };
+                    valueBubble: {
+                        options: {
+                            className: any;
+                            attributes: {
+                                'aria-hidden': string;
+                                'data-handle-index': string;
+                            };
+                            text: string;
+                            style: {
+                                left: string;
+                            };
+                        };
+                    };
+                };
+            };
+        };
+    };
+};

package/dist/components/slider/slider.d.ts

@@ -0,0 +1,18 @@
+import { SliderConfig, SliderComponent } from './types';
+/**
+ * Creates a new Slider component
+ *
+ * Slider follows a clear architectural pattern:
+ * 1. Structure definition - Describes the DOM structure declaratively
+ * 2. Feature enhancement - Adds specific capabilities (range, icons, labels)
+ * 3. DOM creation - Turns the structure into actual DOM elements
+ * 4. State management - Handles visual states and appearance
+ * 5. Controller - Manages behavior, events, and UI rendering
+ * 6. Lifecycle - Handles component lifecycle events
+ * 7. Public API - Exposes a clean, consistent API
+ *
+ * @param {SliderConfig} config - Slider configuration object
+ * @returns {SliderComponent} Slider component instance
+ */
+declare const createSlider: (config?: SliderConfig) => SliderComponent;
+export default createSlider;

package/dist/components/slider/types.d.ts

@@ -0,0 +1,170 @@
+/**
+ * Available slider color variants
+ */
+export declare const SLIDER_COLORS: {
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly TERTIARY: "tertiary";
+    readonly ERROR: "error";
+};
+/**
+ * Available slider size variants
+ */
+export declare const SLIDER_SIZES: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+/**
+ * Available slider events
+ */
+export declare const SLIDER_EVENTS: {
+    readonly CHANGE: "change";
+    readonly INPUT: "input";
+    readonly FOCUS: "focus";
+    readonly BLUR: "blur";
+    readonly START: "start";
+    readonly END: "end";
+};
+/**
+ * Available slider color variants
+ */
+export type SliderColor = 'primary' | 'secondary' | 'tertiary' | 'error';
+/**
+ * Available slider size variants
+ */
+export type SliderSize = 'small' | 'medium' | 'large';
+/**
+ * Available slider event types
+ */
+export type SliderEventType = 'change' | 'input' | 'focus' | 'blur' | 'start' | 'end';
+/**
+ * Configuration options for the slider component
+ * @interface SliderConfig
+ */
+export interface SliderConfig {
+    /** Minimum value of the slider */
+    min?: number;
+    /** Maximum value of the slider */
+    max?: number;
+    /** Current value of the slider */
+    value?: number;
+    /** Secondary value for range slider (when using two handles) */
+    secondValue?: number;
+    /** Step size for discrete slider */
+    step?: number;
+    /** Whether the slider is disabled */
+    disabled?: boolean;
+    /** Color variant of the slider */
+    color?: SliderColor;
+    /** Size variant of the slider */
+    size?: SliderSize;
+    /** Whether to show tick marks */
+    ticks?: boolean;
+    /** Custom labels for ticks, if provided */
+    tickLabels?: string[] | Record<number, string>;
+    /** Format function for displayed values */
+    valueFormatter?: (value: number) => string;
+    /** Whether to show the current value while dragging */
+    showValue?: boolean;
+    /** Whether to snap to steps while dragging (discrete slider) */
+    snapToSteps?: boolean;
+    /** Whether the slider is a range slider (two handles) */
+    range?: boolean;
+    /** Label text for the slider */
+    label?: string;
+    /** Position of the label (start or end) - defaults to 'start' */
+    labelPosition?: 'start' | 'end';
+    /** Icon to display with the slider */
+    icon?: string;
+    /** Position of the icon (start or end) */
+    iconPosition?: 'start' | 'end';
+    /** Additional CSS classes */
+    class?: string;
+    /** Event handlers for slider events */
+    on?: {
+        [key in SliderEventType]?: (event: SliderEvent) => void;
+    };
+    /** CSS class prefix */
+    prefix?: string;
+    /** Component schema */
+    schema?: any;
+}
+/**
+ * Slider event data
+ * @interface SliderEvent
+ */
+export interface SliderEvent {
+    /** The slider component that triggered the event */
+    slider: any;
+    /** Current slider value */
+    value: number;
+    /** Secondary value (for range sliders) */
+    secondValue: number | null;
+    /** Original DOM event if available */
+    originalEvent: Event | null;
+    /** Function to prevent default behavior */
+    preventDefault: () => void;
+    /** Whether default behavior was prevented */
+    defaultPrevented: boolean;
+}
+/**
+ * Slider component public API interface
+ * @interface SliderComponent
+ */
+export interface SliderComponent {
+    /** The root element of the slider */
+    element: HTMLElement;
+    /** Sets slider value */
+    setValue: (value: number, triggerEvent?: boolean) => SliderComponent;
+    /** Gets slider value */
+    getValue: () => number;
+    /** Sets secondary slider value (for range slider) */
+    setSecondValue: (value: number, triggerEvent?: boolean) => SliderComponent;
+    /** Gets secondary slider value */
+    getSecondValue: () => number | null;
+    /** Sets slider minimum value */
+    setMin: (min: number) => SliderComponent;
+    /** Gets slider minimum value */
+    getMin: () => number;
+    /** Sets slider maximum value */
+    setMax: (max: number) => SliderComponent;
+    /** Gets slider maximum value */
+    getMax: () => number;
+    /** Sets slider step size */
+    setStep: (step: number) => SliderComponent;
+    /** Gets slider step size */
+    getStep: () => number;
+    /** Enables the slider */
+    enable: () => SliderComponent;
+    /** Disables the slider */
+    disable: () => SliderComponent;
+    /** Checks if slider is disabled */
+    isDisabled: () => boolean;
+    /** Sets slider color */
+    setColor: (color: SliderColor) => SliderComponent;
+    /** Gets slider color */
+    getColor: () => string;
+    /** Sets slider size */
+    setSize: (size: SliderSize) => SliderComponent;
+    /** Gets slider size */
+    getSize: () => string;
+    /** Shows or hides tick marks */
+    showTicks: (show: boolean) => SliderComponent;
+    /** Shows or hides current value while dragging */
+    showCurrentValue: (show: boolean) => SliderComponent;
+    /** Sets label text */
+    setLabel: (text: string) => SliderComponent;
+    /** Gets label text */
+    getLabel: () => string;
+    /** Sets icon HTML */
+    setIcon: (iconHtml: string) => SliderComponent;
+    /** Gets icon HTML */
+    getIcon: () => string;
+    /** Adds event listener */
+    on: (event: SliderEventType, handler: (event: SliderEvent) => void) => SliderComponent;
+    /** Removes event listener */
+    off: (event: SliderEventType, handler: (event: SliderEvent) => void) => SliderComponent;
+    /** Destroys the slider component and cleans up resources */
+    destroy: () => void;
+}

package/dist/components/snackbar/api.d.ts

@@ -0,0 +1,7 @@
+import { BaseComponent, SnackbarComponent, ApiOptions } from './types';
+/**
+ * Enhances snackbar component with API methods
+ * @param {ApiOptions} options - API configuration
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
+export declare const withAPI: ({ lifecycle, queue }: ApiOptions) => (component: BaseComponent) => SnackbarComponent;

package/dist/components/snackbar/config.d.ts

@@ -0,0 +1,55 @@
+import { SnackbarConfig, BaseComponent, ApiOptions } from './types';
+/**
+ * Default configuration for the Snackbar component
+ */
+export declare const defaultConfig: SnackbarConfig;
+/**
+ * Creates the base configuration for Snackbar component
+ * @param {SnackbarConfig} config - User provided configuration
+ * @returns {SnackbarConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config: SnackbarConfig) => SnackbarConfig;
+/**
+ * Generates element configuration for the Snackbar component
+ * @param {SnackbarConfig} config - Snackbar configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: SnackbarConfig) => {
+    tag: string;
+    componentName: string;
+    attributes: Record<string, any>;
+    className: string[];
+    rawClass: string | string[];
+    html: string;
+    text: string;
+    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    interactive: boolean;
+};
+/**
+ * Creates text configuration for the Snackbar component
+ * @param {SnackbarConfig} config - Snackbar configuration
+ * @returns {Object} Text configuration object
+ */
+export declare const getTextConfig: (config: SnackbarConfig) => {
+    text: string;
+    variant?: import("./types").SnackbarVariant;
+    position?: import("./types").SnackbarPosition;
+    message: string;
+    action?: string;
+    duration?: number;
+    onAction?: (event: import("./types").SnackbarEvent) => void;
+    onOpen?: (event: import("./types").SnackbarEvent) => void;
+    onClose?: (event: import("./types").SnackbarEvent) => void;
+    class?: string;
+    prefix?: string;
+    componentName?: string;
+    on?: { [key in import("./types").SnackbarEventType]?: (event: import("./types").SnackbarEvent) => void; };
+};
+/**
+ * Creates API configuration for the Snackbar component
+ * @param {BaseComponent} comp - Component with lifecycle feature
+ * @param {SnackbarQueue} queue - Snackbar queue manager
+ * @returns {ApiOptions} API configuration object
+ */
+export declare const getApiConfig: (comp: BaseComponent, queue: any) => ApiOptions;
+export default defaultConfig;

package/dist/components/snackbar/constants.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Snackbar visual variants
+ * @category Components
+ */
+export declare const SNACKBAR_VARIANTS: {
+    /** Basic snackbar with just text */
+    readonly BASIC: "basic";
+    /** Snackbar with an action button */
+    readonly ACTION: "action";
+};
+/**
+ * Snackbar display positions
+ * @category Components
+ */
+export declare const SNACKBAR_POSITIONS: {
+    /** Centered position (default) */
+    readonly CENTER: "center";
+    /** Start-aligned position */
+    readonly START: "start";
+    /** End-aligned position */
+    readonly END: "end";
+};
+/**
+ * Snackbar visibility states
+ * @category Components
+ */
+export declare const SNACKBAR_STATES: {
+    /** Snackbar is visible */
+    readonly VISIBLE: "visible";
+    /** Snackbar is hidden */
+    readonly HIDDEN: "hidden";
+};
+/**
+ * Snackbar event types
+ * @category Components
+ */
+export declare const SNACKBAR_EVENTS: {
+    /** Fired when snackbar opens */
+    readonly OPEN: "open";
+    /** Fired when snackbar closes */
+    readonly CLOSE: "close";
+    /** Fired when action button is clicked */
+    readonly ACTION: "action";
+    /** Fired when auto-dismiss timer completes */
+    readonly DISMISS: "dismiss";
+};
+/**
+ * Default configuration values for snackbar
+ * @category Components
+ */
+export declare const SNACKBAR_DEFAULTS: {
+    /** Default visual variant */
+    readonly VARIANT: "basic";
+    /** Default display position */
+    readonly POSITION: "center";
+    /** Default display duration in milliseconds (4 seconds) */
+    readonly DURATION: 4000;
+    /** Default z-index for snackbars */
+    readonly Z_INDEX: 1000;
+    /** Default animation duration in milliseconds */
+    readonly ANIMATION_DURATION: 300;
+};
+/**
+ * CSS class names used by the snackbar component
+ * @category Components
+ */
+export declare const SNACKBAR_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "snackbar";
+    /** Basic variant class */
+    readonly BASIC: "snackbar--basic";
+    /** Action variant class */
+    readonly ACTION: "snackbar--action";
+    /** Center position class */
+    readonly CENTER: "snackbar--center";
+    /** Start position class */
+    readonly START: "snackbar--start";
+    /** End position class */
+    readonly END: "snackbar--end";
+    /** Visible state class */
+    readonly VISIBLE: "snackbar--visible";
+    /** Hidden state class */
+    readonly HIDDEN: "snackbar--hidden";
+    /** Message text class */
+    readonly MESSAGE: "snackbar__message";
+    /** Action button class */
+    readonly ACTION_BUTTON: "snackbar__action";
+};

package/dist/components/snackbar/features.d.ts

@@ -0,0 +1,13 @@
+import { BaseComponent, SnackbarConfig } from './types';
+/**
+ * Adds action button to snackbar
+ * @param {SnackbarConfig} config - Component configuration
+ * @returns {Function} Higher-order function that adds action button
+ */
+export declare const withActionButton: (config: SnackbarConfig) => (component: BaseComponent) => BaseComponent;
+/**
+ * Adds auto-dismiss timer functionality
+ * @param {SnackbarConfig} config - Component configuration
+ * @returns {Function} Higher-order function that adds timer features
+ */
+export declare const withDismissTimer: (config: SnackbarConfig) => (component: BaseComponent) => BaseComponent;

package/dist/components/snackbar/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './snackbar';
+export { SNACKBAR_VARIANTS, SNACKBAR_POSITIONS, SNACKBAR_STATES, SNACKBAR_EVENTS, SNACKBAR_DEFAULTS, SNACKBAR_CLASSES } from './constants';
+export { SnackbarConfig, SnackbarComponent } from './types';