mtrl 0.3.8 → 0.4.0

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

@@ -0,0 +1,139 @@
+/**
+ * Progress component variants
+ */
+export declare const PROGRESS_VARIANTS: {
+    /** Standard horizontal progress bar */
+    readonly LINEAR: "linear";
+    /** Circular spinner progress indicator */
+    readonly CIRCULAR: "circular";
+};
+/**
+ * Progress component shapes (linear only)
+ */
+export declare const PROGRESS_SHAPES: {
+    /** Standard straight line progress */
+    readonly LINE: "line";
+    /** Wavy animated progress */
+    readonly WAVY: "wavy";
+};
+/**
+ * Progress component events
+ */
+export declare const PROGRESS_EVENTS: {
+    /** Fired when progress value changes */
+    readonly CHANGE: "change";
+    /** Fired when progress reaches 100% */
+    readonly COMPLETE: "complete";
+};
+/**
+ * Default configuration values
+ */
+export declare const PROGRESS_DEFAULTS: {
+    /** Default progress variant */
+    readonly VARIANT: "linear";
+    /** Initial progress value */
+    readonly VALUE: 0;
+    /** Maximum progress value */
+    readonly MAX: 100;
+    /** Buffer value for linear progress with buffer */
+    readonly BUFFER: 0;
+    /** Default shape for linear indeterminate progress */
+    readonly SHAPE: "line";
+    /** Whether to show percentage label */
+    readonly SHOW_LABEL: false;
+    /** Whether progress is indeterminate */
+    readonly INDETERMINATE: false;
+};
+/**
+ * CSS classes for progress elements
+ */
+export declare const PROGRESS_CLASSES: {
+    /** Container element class */
+    readonly CONTAINER: "progress";
+    /** Linear variant class */
+    readonly LINEAR: "progress--linear";
+    /** Circular variant class */
+    readonly CIRCULAR: "progress--circular";
+    /** Track element (unfilled part) class */
+    readonly TRACK: "progress__track";
+    /** Indicator element (filled part) class */
+    readonly INDICATOR: "progress__indicator";
+    /** Buffer element class */
+    readonly BUFFER: "progress__buffer";
+    /** Label element class */
+    readonly LABEL: "progress__label";
+    /** Indeterminate state class */
+    readonly INDETERMINATE: "progress--indeterminate";
+    /** Disabled state class */
+    readonly DISABLED: "progress--disabled";
+    /** Test state class */
+    readonly TEST: "progress--test";
+    readonly TRANSITION: "progress--transition";
+};
+/**
+ * Progress component measurements
+ */
+export declare const PROGRESS_MEASUREMENTS: {
+    readonly LINEAR: {
+        readonly MIN_HEIGHT: 4;
+        readonly GAP: 4;
+        readonly STOP_INDICATOR: 4;
+        readonly HEIGHT: 4;
+    };
+    readonly CIRCULAR: {
+        readonly SIZE: 48;
+        readonly GAP: 8;
+    };
+    readonly COMMON: {
+        readonly STROKE_WIDTH: 4;
+    };
+};
+/**
+ * Thickness presets for progress component
+ * These are the standard thickness options following Material Design 3
+ */
+export declare const PROGRESS_THICKNESS: {
+    /** Thin stroke width (4px) - default */
+    readonly THIN: 4;
+    /** Thick stroke width (8px) */
+    readonly THICK: 8;
+};
+/**
+ * Wave animation parameters for progress components
+ */
+export declare const PROGRESS_WAVE: {
+    /** Linear progress wave parameters */
+    readonly LINEAR: {
+        /** Base amplitude of the wave in pixels */
+        readonly AMPLITUDE: 3;
+        /** Speed of the wave animation */
+        readonly SPEED: 0.008;
+        /** Frequency of the wave (affects wavelength) */
+        readonly FREQUENCY: 0.15;
+        /** Frequency for indeterminate animation */
+        readonly INDETERMINATE_FREQUENCY: 0.35;
+        /** Amplitude for indeterminate animation */
+        readonly INDETERMINATE_AMPLITUDE: 2;
+        /** Wave shape power (lower = rounder peaks, higher = sharper) */
+        readonly POWER: 0.8;
+    };
+    /** Circular progress wave parameters */
+    readonly CIRCULAR: {
+        /** Amplitude as percentage of stroke width */
+        readonly AMPLITUDE_RATIO: 1;
+        /** Maximum amplitude in pixels */
+        readonly AMPLITUDE_MAX: 5;
+        /** Speed of the wave rotation */
+        readonly SPEED: 0.008;
+        /** Number of complete waves around the circle */
+        readonly FREQUENCY: 12;
+        /** Number of complete waves for indeterminate animation */
+        readonly INDETERMINATE_FREQUENCY: 32;
+        /** Amplitude ratio for indeterminate animation */
+        readonly INDETERMINATE_AMPLITUDE_RATIO: 0.7;
+        /** Maximum amplitude for indeterminate animation */
+        readonly INDETERMINATE_AMPLITUDE_MAX: 3;
+        /** Wave shape power (lower = rounder peaks, higher = sharper) */
+        readonly POWER: 0.8;
+    };
+};

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

@@ -0,0 +1,32 @@
+import { ProgressConfig } from '../types';
+/**
+ * Canvas dimensions and drawing context
+ */
+export interface CanvasContext {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    width: number;
+    height: number;
+    pixelRatio: number;
+}
+/**
+ * Component with canvas capabilities
+ */
+interface CanvasComponent {
+    element: HTMLElement;
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    getClass: (name: string) => string;
+    draw: () => void;
+    resize: () => void;
+    [key: string]: any;
+}
+/**
+ * Gets the stroke width value from the thickness config
+ */
+export declare const getStrokeWidth: (thickness?: string | number) => number;
+/**
+ * Adds canvas functionality to replace complex DOM structure
+ */
+export declare const withCanvas: (config: ProgressConfig) => (component: any) => CanvasComponent;
+export {};

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

@@ -0,0 +1,9 @@
+/**
+ * Circular progress drawing functionality
+ */
+import { ProgressConfig, ProgressShape } from '../types';
+import { CanvasContext } from './canvas';
+/**
+ * Draws circular progress on canvas
+ */
+export declare const drawCircularProgress: (context: CanvasContext, config: ProgressConfig, value: number, max: number, isIndeterminate: boolean, animationTime?: number, currentShape?: ProgressShape) => void;

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

@@ -0,0 +1,8 @@
+/**
+ * Progress component features
+ * Exports all features used by the progress component
+ */
+export { withCanvas } from './canvas';
+export { withState } from './state';
+export { drawCircularProgress } from './circular';
+export { drawLinearProgress } from './linear';

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

@@ -0,0 +1,9 @@
+/**
+ * Linear progress drawing functionality
+ */
+import { ProgressConfig, ProgressShape } from '../types';
+import { CanvasContext } from './canvas';
+/**
+ * Draws linear progress on canvas with shape support
+ */
+export declare const drawLinearProgress: (context: CanvasContext, config: ProgressConfig, value: number, max: number, buffer: number, isIndeterminate: boolean, animationTime?: number, showStopIndicator?: boolean, currentShape?: ProgressShape) => void;

package/dist/components/progress/features/resize-observer.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Creates a ResizeObserver to handle canvas dimension changes
+ * This ensures the canvas always matches its container size
+ */
+export declare const createCanvasResizeObserver: (element: HTMLElement, canvas: HTMLCanvasElement, onResize: () => void) => (() => void);

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

@@ -0,0 +1,38 @@
+import { ProgressConfig, ProgressShape } from '../types';
+/**
+ * Progress component state
+ */
+interface ProgressState {
+    value: number;
+    max: number;
+    buffer: number;
+    indeterminate: boolean;
+    thickness: number | string;
+    shape: ProgressShape;
+    labelFormatter: (value: number, max: number) => string;
+    label?: HTMLElement;
+}
+/**
+ * Component with lifecycle methods and canvas drawing
+ */
+interface ComponentWithLifecycle {
+    element: HTMLElement;
+    canvas?: HTMLCanvasElement;
+    draw?: () => void;
+    lifecycle?: {
+        init?: () => void;
+        destroy?: () => void;
+    };
+    getClass?: (name: string) => string;
+    [key: string]: any;
+}
+/**
+ * Adds state management for canvas-based progress component
+ *
+ * @param config Progress configuration
+ * @returns Component enhancer with state management
+ */
+export declare const withState: (config: ProgressConfig) => (component: ComponentWithLifecycle) => ComponentWithLifecycle & {
+    state: ProgressState;
+};
+export {};

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

@@ -0,0 +1,40 @@
+import { ProgressConfig, ProgressShape } from './types';
+/**
+ * Progress component state
+ */
+interface ProgressState {
+    value: number;
+    max: number;
+    buffer: number;
+    indeterminate: boolean;
+    shape: ProgressShape;
+    labelFormatter: (value: number, max: number) => string;
+    label?: HTMLElement;
+}
+/**
+ * Component with lifecycle methods
+ */
+interface ComponentWithLifecycle {
+    element: HTMLElement;
+    lifecycle?: {
+        init?: () => void;
+        destroy?: () => void;
+    };
+    setIndeterminate?: (state: boolean) => unknown;
+    setValue?: (value: number) => unknown;
+    setBuffer?: (value: number) => unknown;
+    setShape?: (shape: ProgressShape) => unknown;
+    showLabel?: () => unknown;
+    getClass?: (name: string) => string;
+    [key: string]: any;
+}
+/**
+ * Adds state management and initialization to the progress component
+ *
+ * @param config Progress configuration
+ * @returns Component enhancer with state management
+ */
+export declare const withState: (config: ProgressConfig) => (component: ComponentWithLifecycle) => ComponentWithLifecycle & {
+    state: ProgressState;
+};
+export {};

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

@@ -0,0 +1,3 @@
+export { default } from './progress';
+export { ProgressConfig, ProgressComponent, ProgressShape } from './types';
+export { PROGRESS_VARIANTS, PROGRESS_SHAPES, PROGRESS_EVENTS, PROGRESS_DEFAULTS, PROGRESS_CLASSES, PROGRESS_MEASUREMENTS, PROGRESS_THICKNESS } from './constants';

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

@@ -0,0 +1,24 @@
+import { ProgressConfig, ProgressComponent } from './types';
+/**
+ * Creates a new Progress component using canvas rendering
+ * @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,272 @@
+/**
+ * Progress variant types
+ * @category Components
+ */
+export type ProgressVariant = 'linear' | 'circular';
+/**
+ * Progress thickness options
+ * @category Components
+ */
+export type ProgressThickness = 'thin' | 'thick' | number;
+/**
+ * Progress shape options (linear only)
+ * @category Components
+ */
+export type ProgressShape = 'line' | 'wavy';
+/**
+ * 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;
+    /**
+     * 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
+     */
+    class?: string;
+    /**
+     * Thickness of the progress track and indicator
+     * Can be a named preset ('thin', 'default', 'thick') or a specific number in pixels
+     * @default 'default'
+     */
+    thickness?: ProgressThickness;
+    /**
+     * Shape of the linear indeterminate progress animation
+     * Only affects linear variant in indeterminate state
+     * @default 'line'
+     */
+    shape?: ProgressShape;
+    /**
+     * 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
+     */
+    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;
+    /**
+     * DOM structure schema
+     * @internal
+     */
+    schema?: any;
+    /**
+     * Size of the circular progress indicator in dp (only for circular variant)
+     * Clamped between 24 and 240
+     * @default 50
+     */
+    size?: number;
+}
+/**
+ * Progress component interface
+ * @category Components
+ */
+export interface ProgressComponent {
+    /** The component's root DOM element */
+    element: HTMLElement;
+    /** The track element (unfilled part) - always an SVG element */
+    track: SVGElement;
+    /** The indicator element (filled part) - always an SVG element */
+    indicator: SVGElement;
+    /** The buffer element for linear variant (pre-loaded state) - always an SVG element */
+    buffer?: SVGElement;
+    /**
+     * Gets a class name with the component's prefix
+     * @param name - Base class name
+     * @returns Prefixed class name
+     */
+    getClass: (name: string) => string;
+    /**
+     * Sets the progress value
+     * @param value - Progress value between 0 and max
+     * @param animate - Whether to animate the value change (default: true)
+     * @returns The component instance for chaining
+     */
+    setValue: (value: number, animate?: boolean) => ProgressComponent;
+    /**
+     * Gets the current progress value
+     * @returns Current progress value
+     */
+    getValue: () => number;
+    /**
+     * Gets the maximum progress value
+     * @returns Maximum progress value
+     */
+    getMax: () => 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;
+    /**
+     * Hides the progress component
+     * @returns The progress component for chaining
+     */
+    hide: () => ProgressComponent;
+    /**
+     * Shows the progress component
+     * @returns The progress component for chaining
+     */
+    show: () => ProgressComponent;
+    /**
+     * Checks if the progress component is visible
+     * @returns Whether the component is visible
+     */
+    isVisible: () => 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 thickness of the progress track and indicator
+     * @param thickness - Thickness value ('thin', 'default', 'thick' or number in pixels)
+     * @returns The progress component for chaining
+     */
+    setThickness: (thickness: ProgressThickness) => ProgressComponent;
+    /**
+     * Gets the current thickness value in pixels
+     * @returns Current thickness in pixels
+     */
+    getThickness: () => number;
+    /**
+     * Sets the shape of the linear indeterminate progress animation
+     * Only affects linear variant in indeterminate state
+     * @param shape - Shape value ('line' or 'wavy')
+     * @returns The progress component for chaining
+     */
+    setShape: (shape: ProgressShape) => ProgressComponent;
+    /**
+     * Gets the current shape value
+     * @returns Current shape
+     */
+    getShape: () => ProgressShape;
+    /**
+     * 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;
+    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 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;