mtrl 0.3.8 → 0.4.0

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;
+    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 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;

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

@@ -0,0 +1,88 @@
+/**
+ * Switch label position options
+ * @category Components
+ */
+export declare const SWITCH_LABEL_POSITIONS: {
+    /** Label positioned before the switch (left in LTR layouts) */
+    readonly START: "start";
+    /** Label positioned after the switch (right in LTR layouts) */
+    readonly END: "end";
+};
+/**
+ * Switch states
+ * @category Components
+ */
+export declare const SWITCH_STATES: {
+    /** Switch is checked/on */
+    readonly CHECKED: "checked";
+    /** Switch is unchecked/off */
+    readonly UNCHECKED: "unchecked";
+    /** Switch is disabled */
+    readonly DISABLED: "disabled";
+    /** Switch is enabled */
+    readonly ENABLED: "enabled";
+};
+/**
+ * Switch events
+ * @category Components
+ */
+export declare const SWITCH_EVENTS: {
+    /** Fired when switch is checked */
+    readonly CHANGE: "change";
+    /** Fired when switch receives focus */
+    readonly FOCUS: "focus";
+    /** Fired when switch loses focus */
+    readonly BLUR: "blur";
+};
+/**
+ * Default configuration values for switch
+ * @category Components
+ */
+export declare const SWITCH_DEFAULTS: {
+    /** Default checked state */
+    readonly CHECKED: false;
+    /** Default disabled state */
+    readonly DISABLED: false;
+    /** Default required state */
+    readonly REQUIRED: false;
+    /** Default label position */
+    readonly LABEL_POSITION: "end";
+    /** Default input value */
+    readonly VALUE: "on";
+};
+/**
+ * CSS class names used by the switch component
+ * @category Components
+ */
+export declare const SWITCH_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "switch";
+    /** Container element class */
+    readonly CONTAINER: "switch-container";
+    /** Content wrapper class */
+    readonly CONTENT: "switch-content";
+    /** Label element class */
+    readonly LABEL: "switch-label";
+    /** Input element class */
+    readonly INPUT: "switch-input";
+    /** Track element class */
+    readonly TRACK: "switch-track";
+    /** Thumb element class */
+    readonly THUMB: "switch-thumb";
+    /** Label at start position class */
+    readonly LABEL_START: "switch--label-start";
+    /** Label at end position class */
+    readonly LABEL_END: "switch--label-end";
+    /** Checked state class */
+    readonly CHECKED: "switch--checked";
+    /** Disabled state class */
+    readonly DISABLED: "switch--disabled";
+    /** Error state class */
+    readonly ERROR: "switch--error";
+    /** Helper/supporting text class */
+    readonly HELPER: "switch-helper";
+    /** Error helper text class */
+    readonly HELPER_ERROR: "switch-helper--error";
+    /** Focus state class */
+    readonly FOCUSED: "switch--focused";
+};

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

@@ -0,0 +1,59 @@
+import { BaseComponent, ElementComponent } from '../../core/compose/component';
+import { TrackComponent } from '../../core/compose/features';
+import { SwitchConfig } from './types';
+/**
+ * Configuration for supporting text feature
+ */
+export interface SupportingTextConfig {
+    /**
+     * Supporting text content
+     */
+    supportingText?: string;
+    /**
+     * Whether supporting text indicates an error
+     */
+    error?: boolean;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Component with supporting text capabilities
+ */
+export interface SupportingTextComponent extends BaseComponent {
+    /**
+     * Supporting text element
+     */
+    supportingTextElement: HTMLElement | null;
+    /**
+     * Sets supporting text content
+     * @param text - Text content
+     * @param isError - Whether text represents an error
+     * @returns Component instance for chaining
+     */
+    setSupportingText: (text: string, isError?: boolean) => SupportingTextComponent;
+    /**
+     * Removes supporting text
+     * @returns Component instance for chaining
+     */
+    removeSupportingText: () => SupportingTextComponent;
+}
+/**
+ * Creates and manages supporting text for a component
+ * @param config - Configuration object with supporting text settings
+ * @returns Function that enhances a component with supporting text functionality
+ */
+export declare const withSupportingText: <T extends SupportingTextConfig>(config: T) => <C extends ElementComponent>(component: C) => C & SupportingTextComponent;
+/**
+ * Wrapper for the core withTrack function that works with SwitchConfig
+ *
+ * @param config - Switch configuration
+ * @returns Function that enhances a component with track and thumb elements
+ */
+export declare const withTrack: (config: SwitchConfig) => <C extends ElementComponent>(component: C) => C & TrackComponent;

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

@@ -0,0 +1,4 @@
+export { default } from './switch';
+export { SWITCH_LABEL_POSITIONS, SWITCH_STATES, SWITCH_EVENTS, SWITCH_DEFAULTS, SWITCH_CLASSES } from './constants';
+export { SwitchConfig, SwitchComponent } from './types';
+export { withSupportingText, SupportingTextComponent } from './features';

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

@@ -0,0 +1,8 @@
+import { SwitchConfig, SwitchComponent } from './types';
+/**
+ * Creates a new Switch component
+ * @param {SwitchConfig} config - Switch configuration
+ * @returns {SwitchComponent} Switch component instance
+ */
+declare const createSwitch: (config?: SwitchConfig) => SwitchComponent;
+export default createSwitch;

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

@@ -0,0 +1,131 @@
+export type SwitchPosition = 'center' | 'start' | 'end';
+/**
+ * Switch label position types
+ */
+export type SwitchLabelPosition = 'start' | 'end';
+/**
+ * Switch label positions
+ */
+export declare const SWITCH_LABEL_POSITION: {
+    readonly START: "start";
+    readonly END: "end";
+};
+/**
+ * Configuration interface for the Switch component
+ */
+export interface SwitchConfig {
+    /** Input name attribute */
+    name?: string;
+    /** Initial checked state */
+    checked?: boolean;
+    /** Whether input is required */
+    required?: boolean;
+    /** Whether switch is disabled */
+    disabled?: boolean;
+    /** Input value attribute */
+    value?: string;
+    /** Label text */
+    label?: string;
+    /** Supporting text content */
+    supportingText?: string;
+    /** Whether supporting text indicates an error */
+    error?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+    /** ARIA label for accessibility */
+    ariaLabel?: string;
+    /** Prefix for class names */
+    prefix?: string;
+    /** Component name */
+    componentName?: string;
+    /** Icon HTML content */
+    icon?: string;
+}
+/**
+ * Switch component interface
+ */
+export interface SwitchComponent {
+    /** The root element of the switch */
+    element: HTMLElement;
+    /** The input element */
+    input: HTMLInputElement;
+    /** Gets the switch's value */
+    getValue: () => string;
+    /** Sets the switch's value */
+    setValue: (value: string) => SwitchComponent;
+    /** Checks/activates the switch */
+    check: () => SwitchComponent;
+    /** Unchecks/deactivates the switch */
+    uncheck: () => SwitchComponent;
+    /** Toggles the switch's checked state */
+    toggle: () => SwitchComponent;
+    /** Returns whether the switch is checked */
+    isChecked: () => boolean;
+    /** Sets the switch's label text */
+    setLabel: (text: string) => SwitchComponent;
+    /** Gets the switch's label text */
+    getLabel: () => string;
+    /** Supporting text element */
+    supportingTextElement: HTMLElement | null;
+    /** Sets supporting text content */
+    setSupportingText: (text: string, isError?: boolean) => SwitchComponent;
+    /** Removes supporting text */
+    removeSupportingText: () => SwitchComponent;
+    /** Adds event listener */
+    on: (event: string, handler: Function) => SwitchComponent;
+    /** Removes event listener */
+    off: (event: string, handler: Function) => SwitchComponent;
+    /** Enables the switch */
+    enable: () => SwitchComponent;
+    /** Disables the switch */
+    disable: () => SwitchComponent;
+    /** Destroys the switch component and cleans up resources */
+    destroy: () => void;
+}
+/**
+ * API options interface
+ */
+export interface ApiOptions {
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+    checkable: {
+        check: () => any;
+        uncheck: () => any;
+        toggle: () => any;
+        isChecked: () => boolean;
+    };
+}
+/**
+ * Base component interface
+ */
+export interface BaseComponent {
+    element: HTMLElement;
+    input?: HTMLInputElement;
+    getValue?: () => string;
+    setValue?: (value: string) => any;
+    text?: {
+        setText: (content: string) => any;
+        getText: () => string;
+    };
+    on?: (event: string, handler: Function) => any;
+    off?: (event: string, handler: Function) => any;
+    disabled?: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle?: {
+        destroy: () => void;
+    };
+    checkable?: {
+        check: () => any;
+        uncheck: () => any;
+        toggle: () => any;
+        isChecked: () => boolean;
+    };
+    [key: string]: any;
+}

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

@@ -0,0 +1,52 @@
+import { TabsComponent, TabComponent } from './types';
+/**
+ * API options for a Tabs component
+ */
+interface ApiOptions {
+    /** The component's lifecycle API */
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Component with required elements and methods
+ */
+interface ComponentWithElements {
+    /** The DOM element */
+    element: HTMLElement;
+    /** Array of tab components */
+    tabs: TabComponent[];
+    /** Container for tabs */
+    tabsContainer: HTMLElement;
+    /** Tab click handler */
+    handleTabClick: (event: Event, tab: TabComponent) => void;
+    /** Scroll container (optional) */
+    scrollContainer?: HTMLElement;
+    /** Class name helper */
+    getClass: (name: string) => string;
+    /** Event subscription (optional) */
+    on?: (event: string, handler: Function) => any;
+    /** Event unsubscription (optional) */
+    off?: (event: string, handler: Function) => any;
+    /** Event emission (optional) */
+    emit?: (event: string, data: any) => any;
+    /** Component configuration */
+    config: Record<string, any>;
+}
+/**
+ * Enhances a tabs component with API methods
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
+export declare const withAPI: ({ lifecycle }: ApiOptions) => (component: ComponentWithElements) => TabsComponent;
+/**
+ * Creates API configuration for the Tabs component
+ * @param {Object} comp - Component with lifecycle feature
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    lifecycle: {
+        destroy: () => any;
+    };
+};
+export {};

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

@@ -0,0 +1,39 @@
+import { BaseComponentConfig } from '../../core/config/component';
+import { TabConfig } from './types';
+/**
+ * Default configuration for a Tab
+ */
+export declare const defaultTabConfig: TabConfig;
+/**
+ * Default configuration for the Tabs component
+ */
+export declare const defaultTabsConfig: {
+    variant: "primary";
+    scrollable: true;
+    showDivider: true;
+    componentName: string;
+};
+export declare const createTabsConfig: (config?: {}) => BaseComponentConfig;
+/**
+ * Creates the base configuration for a Tab
+ * @param {TabConfig} config - User provided configuration
+ * @returns {TabConfig} Complete configuration with defaults applied
+ */
+export declare const createTabConfig: (config?: TabConfig) => TabConfig;
+export declare const getTabsElementConfig: (config: any) => (component: any) => any;
+/**
+ * Creates API configuration for the Tab component
+ * @param {Object} comp - Component with disabled and lifecycle features
+ * @returns {Object} API configuration object
+ */
+export declare const getTabApiConfig: (comp: any) => {
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+        isDisabled: () => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+    button: any;
+};