mtrl 0.3.7 → 0.3.9

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;
+    attrs: 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';

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

@@ -0,0 +1,15 @@
+import { BaseComponent, SnackbarPosition } from './types';
+/**
+ * Position configuration for the withPosition function
+ */
+interface PositionConfig {
+    prefix?: string;
+    position?: SnackbarPosition;
+}
+/**
+ * Adds position handling to snackbar
+ * @param {PositionConfig} config - Position configuration
+ * @returns {Function} Higher-order function that adds position features
+ */
+export declare const withPosition: (config: PositionConfig) => (component: BaseComponent) => BaseComponent;
+export {};

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

@@ -0,0 +1,7 @@
+import { SnackbarQueue } from './types';
+/**
+ * Creates a queue manager for snackbars
+ * Ensures only one snackbar is visible at a time
+ * @returns {SnackbarQueue} Queue manager with add/clear methods
+ */
+export declare const createSnackbarQueue: () => SnackbarQueue;

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

@@ -0,0 +1,8 @@
+import { SnackbarConfig, SnackbarComponent } from './types';
+/**
+ * Creates a new Snackbar component
+ * @param {SnackbarConfig} config - Snackbar configuration
+ * @returns {SnackbarComponent} Snackbar component instance
+ */
+declare const createSnackbar: (config: SnackbarConfig) => SnackbarComponent;
+export default createSnackbar;

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

@@ -0,0 +1,172 @@
+/**
+ * Available snackbar variants
+ */
+export type SnackbarVariant = 'basic' | 'action';
+/**
+ * Snackbar visual variants
+ */
+export declare const SNACKBAR_VARIANTS: {
+    readonly BASIC: "basic";
+    readonly ACTION: "action";
+};
+/**
+ * Available snackbar positions
+ */
+export type SnackbarPosition = 'center' | 'start' | 'end';
+/**
+ * Snackbar display positions
+ */
+export declare const SNACKBAR_POSITIONS: {
+    readonly CENTER: "center";
+    readonly START: "start";
+    readonly END: "end";
+};
+/**
+ * Snackbar visibility states
+ */
+export type SnackbarState = 'visible' | 'hidden';
+/**
+ * Snackbar state classes
+ */
+export declare const SNACKBAR_STATES: {
+    readonly VISIBLE: "visible";
+    readonly HIDDEN: "hidden";
+};
+/**
+ * Available snackbar event types
+ */
+export type SnackbarEventType = 'open' | 'close' | 'action';
+/**
+ * Snackbar event data
+ * @interface SnackbarEvent
+ */
+export interface SnackbarEvent {
+    /** The snackbar component that triggered the event */
+    snackbar: SnackbarComponent;
+    /** Original DOM event if available */
+    originalEvent: Event | null;
+    /** Function to prevent default behavior */
+    preventDefault: () => void;
+    /** Whether default behavior was prevented */
+    defaultPrevented: boolean;
+}
+/**
+ * Configuration options for the snackbar component
+ * @interface SnackbarConfig
+ */
+export interface SnackbarConfig {
+    /** Visual variant of the snackbar */
+    variant?: SnackbarVariant;
+    /** Position of the snackbar on screen */
+    position?: SnackbarPosition;
+    /** Text message to display */
+    message: string;
+    /** Action button text (for 'action' variant) */
+    action?: string;
+    /** Duration in milliseconds to show the snackbar (0 for indefinite) */
+    duration?: number;
+    /** Action button callback function */
+    onAction?: (event: SnackbarEvent) => void;
+    /** Callback function when the snackbar opens */
+    onOpen?: (event: SnackbarEvent) => void;
+    /** Callback function when the snackbar closes */
+    onClose?: (event: SnackbarEvent) => void;
+    /** Additional CSS classes */
+    class?: string;
+    /** Component prefix for CSS classes */
+    prefix?: string;
+    /** Component name for CSS classes */
+    componentName?: string;
+    /** Event handlers for snackbar events */
+    on?: {
+        [key in SnackbarEventType]?: (event: SnackbarEvent) => void;
+    };
+}
+/**
+ * Snackbar component public API interface
+ * @interface SnackbarComponent
+ */
+export interface SnackbarComponent {
+    /** The root element of the snackbar */
+    element: HTMLElement;
+    /** Current state of the snackbar */
+    state: SnackbarState;
+    /** The action button element (if present) */
+    actionButton?: HTMLElement;
+    /** Timer for auto-dismissal */
+    timer?: SnackbarTimer;
+    /** Position management functions */
+    position?: {
+        getPosition: () => SnackbarPosition;
+        setPosition: (position: SnackbarPosition) => BaseComponent;
+    };
+    /** Displays the snackbar */
+    show: () => SnackbarComponent;
+    /** Hides the snackbar */
+    hide: () => SnackbarComponent;
+    /** Sets the message text */
+    setMessage: (message: string) => SnackbarComponent;
+    /** Gets the message text */
+    getMessage: () => string;
+    /** Sets the action button text */
+    setAction: (text: string) => SnackbarComponent;
+    /** Gets the action button text */
+    getAction: () => string;
+    /** Sets the display duration */
+    setDuration: (duration: number) => SnackbarComponent;
+    /** Gets the display duration */
+    getDuration: () => number;
+    /** Sets the snackbar position */
+    setPosition: (position: SnackbarPosition) => SnackbarComponent;
+    /** Gets the snackbar position */
+    getPosition: () => SnackbarPosition;
+    /** Adds event listener */
+    on: (event: SnackbarEventType, handler: (event: SnackbarEvent) => void) => SnackbarComponent;
+    /** Removes event listener */
+    off: (event: SnackbarEventType, handler: (event: SnackbarEvent) => void) => SnackbarComponent;
+    /** Destroys the snackbar component and cleans up resources */
+    destroy: () => void;
+}
+/**
+ * Basic component with element property
+ */
+export interface BaseComponent {
+    element: HTMLElement;
+    emit?: (event: string, data?: any) => void;
+    lifecycle?: {
+        destroy?: () => void;
+    };
+    [key: string]: any;
+}
+/**
+ * Timer interface for snackbar auto-dismissal
+ */
+export interface SnackbarTimer {
+    start: () => void;
+    stop: () => void;
+}
+/**
+ * Interface for snackbars managed by the queue
+ */
+export interface QueuedSnackbar {
+    _show: () => void;
+    on: (event: string, handler: () => void) => void;
+    off: (event: string, handler: () => void) => void;
+}
+/**
+ * Interface for the snackbar queue manager
+ */
+export interface SnackbarQueue {
+    add: (snackbar: QueuedSnackbar) => void;
+    clear: () => void;
+    getLength: () => number;
+}
+/**
+ * API options for enhancing a snackbar with API methods
+ */
+export interface ApiOptions {
+    lifecycle: {
+        destroy: () => void;
+    };
+    queue: SnackbarQueue;
+}

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

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

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

@@ -0,0 +1,34 @@
+import { SwitchConfig, BaseComponent, ApiOptions } from './types';
+/**
+ * Default configuration for the Switch component
+ */
+export declare const defaultConfig: SwitchConfig;
+/**
+ * Creates the base configuration for Switch component
+ * @param {SwitchConfig} config - User provided configuration
+ * @returns {SwitchConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config?: SwitchConfig) => SwitchConfig;
+/**
+ * Generates element configuration for the Switch component
+ * @param {SwitchConfig} config - Switch configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: SwitchConfig) => {
+    tag: string;
+    componentName: string;
+    attrs: Record<string, any>;
+    className: string[];
+    rawClass: string | string[];
+    html: string;
+    text: string;
+    forwardEvents: Record<string, boolean | ((component: any, event: Event) => boolean)>;
+    interactive: boolean;
+};
+/**
+ * Creates API configuration for the Switch component
+ * @param {BaseComponent} comp - Component with disabled, lifecycle, and checkable features
+ * @returns {ApiOptions} API configuration object
+ */
+export declare const getApiConfig: (comp: BaseComponent) => ApiOptions;
+export default defaultConfig;