mtrl 0.3.8 → 0.3.9

package/dist/components/progress/progress.d.ts

@@ -0,0 +1,24 @@
+import { ProgressConfig, ProgressComponent } from './types';
+/**
+ * Creates a new Progress component
+ * @param {ProgressConfig} config - Progress configuration object
+ * @returns {ProgressComponent} Progress component instance
+ *
+ * @example
+ * ```ts
+ * // Create a linear determinate progress bar
+ * const progress = createProgress({
+ *   variant: 'linear',
+ *   value: 42,
+ *   showLabel: true
+ * });
+ *
+ * // Create an indeterminate circular progress
+ * const loader = createProgress({
+ *   variant: 'circular',
+ *   indeterminate: true
+ * });
+ * ```
+ */
+declare const createProgress: (config?: ProgressConfig) => ProgressComponent;
+export default createProgress;

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

@@ -0,0 +1,199 @@
+/**
+ * Progress variant types
+ * @category Components
+ */
+export type ProgressVariant = 'linear' | 'circular';
+/**
+ * Progress component event types
+ * @category Components
+ */
+export type ProgressEvent = 'change' | 'complete';
+/**
+ * Configuration interface for the Progress component
+ * @category Components
+ */
+export interface ProgressConfig {
+    /**
+     * Progress variant that determines visual style
+     * @default 'linear'
+     */
+    variant?: ProgressVariant | string;
+    /**
+     * Initial progress value (0-100)
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Whether the progress indicator is initially disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Maximum value
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Buffer value for linear progress with buffer (like video loading)
+     * @default 0
+     */
+    buffer?: number;
+    /**
+     * Additional CSS classes to add to the progress component
+     * @example 'page-loader main-progress'
+     */
+    class?: string;
+    /**
+     * Whether to show text label with percentage
+     * @default false
+     */
+    showLabel?: boolean;
+    /**
+     * Whether progress is indeterminate (shows animation without specific value)
+     * @default false
+     */
+    indeterminate?: boolean;
+    /**
+     * Custom label formatter function
+     * @example (value, max) => `${Math.round((value/max) * 100)}%`
+     */
+    labelFormatter?: (value: number, max: number) => string;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     * @default 'progress'
+     */
+    componentName?: string;
+}
+/**
+ * Progress component interface
+ * @category Components
+ */
+export interface ProgressComponent {
+    /** The component's root DOM element */
+    element: HTMLElement;
+    /** The track element (background) */
+    trackElement: HTMLElement;
+    /** The indicator element (filled part) */
+    indicatorElement: HTMLElement;
+    /** The buffer element for linear variant (pre-loaded state) */
+    bufferElement?: HTMLElement;
+    /** The label element if showLabel is enabled */
+    labelElement?: HTMLElement;
+    /**
+     * Gets a class name with the component's prefix
+     * @param name - Base class name
+     * @returns Prefixed class name
+     */
+    getClass: (name: string) => string;
+    /**
+     * Sets the current progress value
+     * @param value - Progress value (between 0 and max)
+     * @returns The progress component for chaining
+     */
+    setValue: (value: number) => ProgressComponent;
+    /**
+     * Gets the current progress value
+     * @returns Current progress value
+     */
+    getValue: () => number;
+    /**
+     * Sets the buffer value (for linear variant with buffer indicators)
+     * @param value - Buffer value (between 0 and max)
+     * @returns The progress component for chaining
+     */
+    setBuffer: (value: number) => ProgressComponent;
+    /**
+     * Gets the current buffer value
+     * @returns Current buffer value
+     */
+    getBuffer: () => number;
+    /**
+     * Enables the progress component
+     * @returns The progress component for chaining
+     */
+    enable: () => ProgressComponent;
+    /**
+     * Disables the progress component
+     * @returns The progress component for chaining
+     */
+    disable: () => ProgressComponent;
+    /**
+     * Checks if the component is disabled
+     * @returns Whether the component is disabled
+     */
+    isDisabled: () => boolean;
+    /**
+     * Shows the label element
+     * @returns The progress component for chaining
+     */
+    showLabel: () => ProgressComponent;
+    /**
+     * Hides the label element
+     * @returns The progress component for chaining
+     */
+    hideLabel: () => ProgressComponent;
+    /**
+     * Sets a custom formatter for the label
+     * @param formatter - Function that formats the label text
+     * @returns The progress component for chaining
+     */
+    setLabelFormatter: (formatter: (value: number, max: number) => string) => ProgressComponent;
+    /**
+     * Sets the indeterminate state
+     * @param indeterminate - Whether progress is indeterminate
+     * @returns The progress component for chaining
+     */
+    setIndeterminate: (indeterminate: boolean) => ProgressComponent;
+    /**
+     * Checks if the component is in indeterminate state
+     * @returns Whether the component is indeterminate
+     */
+    isIndeterminate: () => boolean;
+    /**
+     * Adds an event listener to the progress
+     * @param event - Event name ('change', 'complete')
+     * @param handler - Event handler function
+     * @returns The progress component for chaining
+     */
+    on: (event: string, handler: Function) => ProgressComponent;
+    /**
+     * Removes an event listener from the progress
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns The progress component for chaining
+     */
+    off: (event: string, handler: Function) => ProgressComponent;
+    /**
+     * Destroys the progress component and cleans up resources
+     */
+    destroy: () => void;
+    /**
+     * Adds CSS classes to the progress element
+     * @param classes - One or more class names to add
+     * @returns The progress component for chaining
+     */
+    addClass: (...classes: string[]) => ProgressComponent;
+    /**
+     * API for managing disabled state
+     */
+    disabled: {
+        /** Enables the progress */
+        enable: () => void;
+        /** Disables the progress */
+        disable: () => void;
+        /** Checks if the progress is disabled */
+        isDisabled: () => boolean;
+    };
+    /**
+     * API for managing component lifecycle
+     */
+    lifecycle: {
+        /** Destroys the component and cleans up resources */
+        destroy: () => void;
+    };
+}

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

@@ -0,0 +1,37 @@
+import { RadiosComponent } from './types';
+interface ApiOptions {
+    disabled: {
+        enable: () => void;
+        disable: () => void;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+interface ComponentWithRadio {
+    element: HTMLElement;
+    radios: any[];
+    getValue: () => string;
+    setValue: (value: string) => any;
+    getSelected: () => any;
+    addOption: (option: any) => any;
+    removeOption: (value: string) => any;
+    enable: () => any;
+    disable: () => any;
+    enableOption: (value: string) => any;
+    disableOption: (value: string) => any;
+    getClass: (name: string) => string;
+    events: {
+        on: (event: string, handler: Function) => void;
+        off: (event: string, handler: Function) => void;
+        emit?: (event: string, data: any) => void;
+    };
+}
+/**
+ * Enhances a radios component with API methods
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ * @internal This is an internal utility for the Radios component
+ */
+export declare const withAPI: ({ disabled, lifecycle }: ApiOptions) => (component: ComponentWithRadio) => RadiosComponent;
+export {};

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

@@ -0,0 +1,42 @@
+import { RadiosConfig } from './types';
+/**
+ * Default configuration for the Radios component
+ */
+export declare const defaultConfig: RadiosConfig;
+/**
+ * Creates the base configuration for Radios component
+ * @param {RadiosConfig} config - User provided configuration
+ * @returns {RadiosConfig} Complete configuration with defaults applied
+ */
+export declare const createBaseConfig: (config: RadiosConfig) => RadiosConfig;
+/**
+ * Generates element configuration for the Radios container
+ * @param {RadiosConfig} config - Radios configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export declare const getElementConfig: (config: RadiosConfig) => {
+    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 Radios component
+ * @param {Object} comp - Component with disabled and lifecycle features
+ * @returns {Object} API configuration object
+ */
+export declare const getApiConfig: (comp: any) => {
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+};
+export default defaultConfig;

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

@@ -0,0 +1,114 @@
+/**
+ * Radio states for styling and behavior
+ */
+export declare const RADIO_STATES: {
+    /** Radio is selected */
+    readonly CHECKED: "checked";
+    /** Radio is not selected */
+    readonly UNCHECKED: "unchecked";
+    /** Radio is disabled */
+    readonly DISABLED: "disabled";
+    /** Radio has keyboard focus */
+    readonly FOCUSED: "focused";
+};
+/**
+ * Radio layout directions
+ */
+export declare const RADIO_DIRECTIONS: {
+    /** Radios stacked vertically */
+    readonly VERTICAL: "vertical";
+    /** Radios arranged horizontally */
+    readonly HORIZONTAL: "horizontal";
+};
+/**
+ * Radio variants
+ */
+export declare const RADIO_VARIANTS: {
+    /** Standard radio button */
+    readonly STANDARD: "standard";
+    /** Filled radio button */
+    readonly FILLED: "filled";
+    /** Outlined radio button */
+    readonly OUTLINED: "outlined";
+};
+/**
+ * Radio label positions
+ */
+export declare const RADIO_LABEL_POSITIONS: {
+    /** Label to the right of the radio (default) */
+    readonly RIGHT: "right";
+    /** Label to the left of the radio */
+    readonly LEFT: "left";
+};
+/**
+ * Radio size options
+ */
+export declare const RADIO_SIZES: {
+    /** Small radio button */
+    readonly SMALL: "small";
+    /** Standard radio button */
+    readonly MEDIUM: "medium";
+    /** Large radio button */
+    readonly LARGE: "large";
+};
+/**
+ * Radio events
+ */
+export declare const RADIO_EVENTS: {
+    /** Fired when a radio button is selected */
+    readonly CHANGE: "change";
+    /** Fired when a radio is focused */
+    readonly FOCUS: "focus";
+    /** Fired when a radio loses focus */
+    readonly BLUR: "blur";
+};
+/**
+ * Default configuration values
+ */
+export declare const RADIO_DEFAULTS: {
+    /** Default radio variant */
+    readonly VARIANT: "standard";
+    /** Default radio direction */
+    readonly DIRECTION: "vertical";
+    /** Default label position */
+    readonly LABEL_POSITION: "right";
+    /** Default radio size */
+    readonly SIZE: "medium";
+};
+/**
+ * CSS classes for radio elements
+ */
+export declare const RADIO_CLASSES: {
+    /** Container for radio group */
+    readonly GROUP: "radio-group";
+    /** Individual radio button */
+    readonly RADIO: "radio";
+    /** Radio input element */
+    readonly INPUT: "radio__input";
+    /** Radio label */
+    readonly LABEL: "radio__label";
+    /** Radio control (the circular part) */
+    readonly CONTROL: "radio__control";
+    /** The inner dot of the radio */
+    readonly DOT: "radio__dot";
+    /** Radio focus ring */
+    readonly FOCUS_RING: "radio__focus-ring";
+    /** Radio ripple effect */
+    readonly RIPPLE: "radio__ripple";
+    /** Checked state */
+    readonly CHECKED: "radio--checked";
+    /** Disabled state */
+    readonly DISABLED: "radio--disabled";
+    /** Focus state */
+    readonly FOCUSED: "radio--focused";
+    /** Label right position */
+    readonly LABEL_RIGHT: "radio--label-right";
+    /** Label left position */
+    readonly LABEL_LEFT: "radio--label-left";
+    /** Small size */
+    readonly SMALL: "radio--small";
+    /** Medium size */
+    readonly MEDIUM: "radio--medium";
+    /** Large size */
+    readonly LARGE: "radio--large";
+};

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

@@ -0,0 +1,3 @@
+export { default } from './radios';
+export { RadiosConfig, RadiosComponent, RadioOptionConfig } from './types';
+export { RADIO_STATES, RADIO_DIRECTIONS, RADIO_VARIANTS, RADIO_LABEL_POSITIONS, RADIO_SIZES, RADIO_EVENTS, RADIO_DEFAULTS, RADIO_CLASSES } from './constants';

package/dist/components/radios/radio.d.ts

@@ -0,0 +1,8 @@
+import { RadiosConfig } from './types';
+/**
+ * Creates a feature that adds radio functionality to a component
+ * @param {RadiosConfig} config - Configuration with radio options
+ * @returns {Function} Higher-order function that adds radio to component
+ */
+export declare const withRadio: (config: RadiosConfig) => (component: any) => any;
+export default withRadio;

package/dist/components/radios/radios.d.ts

@@ -0,0 +1,8 @@
+import { RadiosConfig, RadiosComponent } from './types';
+/**
+ * Creates a new Radios component
+ * @param {RadiosConfig} config - Radios configuration object
+ * @returns {RadiosComponent} Radios component instance
+ */
+declare const createRadios: (config: RadiosConfig) => RadiosComponent;
+export default createRadios;

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

@@ -0,0 +1,189 @@
+/**
+ * Configuration for a radio option in the Radios component
+ * @category Components
+ */
+export interface RadioOptionConfig {
+    /**
+     * Radio input value attribute
+     * @example 'option1'
+     */
+    value: string;
+    /**
+     * Radio label text content
+     * @example 'Option 1'
+     */
+    label: string;
+    /**
+     * Whether the radio is initially disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to position the label before the radio
+     * @default false
+     */
+    labelBefore?: boolean;
+}
+/**
+ * Configuration interface for the Radios component
+ * @category Components
+ */
+export interface RadiosConfig {
+    /**
+     * Radio input name attribute used for grouping radios
+     * @example 'options'
+     */
+    name: string;
+    /**
+     * Array of radio option configurations
+     */
+    options?: RadioOptionConfig[];
+    /**
+     * Initial selected value
+     */
+    value?: string;
+    /**
+     * Layout direction for radio buttons
+     * @default 'vertical'
+     */
+    direction?: 'vertical' | 'horizontal';
+    /**
+     * Whether the entire group is initially disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to enable ripple effect
+     * @default true
+     */
+    ripple?: boolean;
+    /**
+     * Additional CSS classes to add to the radios component
+     */
+    class?: string;
+    /**
+     * Component prefix for class names
+     * @default 'mtrl'
+     */
+    prefix?: string;
+    /**
+     * Component name used in class generation
+     */
+    componentName?: string;
+    /**
+     * Ripple effect configuration
+     */
+    rippleConfig?: {
+        /** Duration of the ripple animation in milliseconds */
+        duration?: number;
+        /** Timing function for the ripple animation */
+        timing?: string;
+        /** Opacity values for ripple start and end [start, end] */
+        opacity?: [string, string];
+    };
+}
+/**
+ * Interface for a single radio in the Radios component
+ * @category Components
+ */
+export interface RadioItem {
+    /** The radio container element */
+    element: HTMLElement;
+    /** The actual radio input element */
+    input: HTMLInputElement;
+    /** The label element */
+    label: HTMLLabelElement;
+    /** The radio option configuration */
+    config: RadioOptionConfig;
+    /** Destroys the radio and removes event listeners */
+    destroy: () => void;
+}
+/**
+ * Radios component interface
+ * @category Components
+ */
+export interface RadiosComponent {
+    /** The radios container DOM element */
+    element: HTMLElement;
+    /** Array of radio items in the group */
+    radios: RadioItem[];
+    /** API for managing component lifecycle */
+    lifecycle: {
+        /** Destroys the component and cleans up resources */
+        destroy: () => void;
+    };
+    /**
+     * Gets a class name with the component's prefix
+     * @param name - Base class name
+     * @returns Prefixed class name
+     */
+    getClass: (name: string) => string;
+    /**
+     * Gets the radios component name
+     * @returns Selected radio value or empty string if none selected
+     */
+    getValue: () => string;
+    /**
+     * Sets the radios component value (selects a radio)
+     * @param value - Value to select
+     * @returns The radios component for chaining
+     */
+    setValue: (value: string) => RadiosComponent;
+    /**
+     * Gets the selected radio option's configuration
+     * @returns The selected radio option config or null
+     */
+    getSelected: () => RadioOptionConfig | null;
+    /**
+     * Adds a radio option to the radios component
+     * @param option - Radio option configuration
+     * @returns The radios component for chaining
+     */
+    addOption: (option: RadioOptionConfig) => RadiosComponent;
+    /**
+     * Removes a radio option from the radios component
+     * @param value - Value of the radio to remove
+     * @returns The radios component for chaining
+     */
+    removeOption: (value: string) => RadiosComponent;
+    /**
+     * Enables the radios component
+     * @returns The radios component for chaining
+     */
+    enable: () => RadiosComponent;
+    /**
+     * Disables the radios component
+     * @returns The radios component for chaining
+     */
+    disable: () => RadiosComponent;
+    /**
+     * Enables a specific radio option
+     * @param value - Value of the radio to enable
+     * @returns The radios component for chaining
+     */
+    enableOption: (value: string) => RadiosComponent;
+    /**
+     * Disables a specific radio option
+     * @param value - Value of the radio to disable
+     * @returns The radios component for chaining
+     */
+    disableOption: (value: string) => RadiosComponent;
+    /**
+     * Destroys the radios component and all radio items
+     */
+    destroy: () => void;
+    /**
+     * Adds an event listener to the radios component
+     * @param event - Event name ('change')
+     * @param handler - Event handler function
+     * @returns The radios component for chaining
+     */
+    on: (event: string, handler: Function) => RadiosComponent;
+    /**
+     * Removes an event listener from the radios component
+     * @param event - Event name
+     * @param handler - Event handler function
+     * @returns The radios component for chaining
+     */
+    off: (event: string, handler: Function) => RadiosComponent;
+}

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

@@ -0,0 +1,55 @@
+import { SearchComponent } from './types';
+/**
+ * API options interface - structured by feature area
+ */
+interface ApiOptions {
+    search: {
+        setValue: (value: string, triggerEvent?: boolean) => any;
+        getValue: () => string;
+        setPlaceholder: (text: string) => any;
+        getPlaceholder: () => string;
+        focus: () => any;
+        blur: () => any;
+        expand: () => any;
+        collapse: () => any;
+        clear: () => any;
+        submit: () => any;
+        setSuggestions: (suggestions: any[]) => any;
+        showSuggestions: (show: boolean) => any;
+    };
+    disabled: {
+        enable: () => void;
+        disable: () => void;
+        isDisabled: () => boolean;
+    };
+    appearance: {
+        setColor: (color: string) => void;
+        getColor: () => string;
+        setSize: (size: string) => void;
+        getSize: () => string;
+    };
+    icons: {
+        setLeadingIcon: (iconHtml: string) => void;
+        setTrailingIcon: (iconHtml: string) => void;
+        setTrailingIcon2: (iconHtml: string) => void;
+        setAvatar: (avatarHtml: string) => void;
+        showClearButton: (show: boolean) => void;
+    };
+    events: {
+        on: (event: string, handler: Function) => void;
+        off: (event: string, handler: Function) => void;
+    };
+    lifecycle: {
+        destroy: () => void;
+    };
+}
+/**
+ * Enhances a search component with a streamlined API
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ * @internal This is an internal utility for the Search component
+ */
+export declare const withAPI: (options: ApiOptions) => (component: {
+    element: HTMLElement;
+}) => SearchComponent;
+export {};