mtrl 0.4.0 → 0.4.4

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

@@ -1,4 +1,4 @@
-import { BadgeComponent } from './types';
+import { BadgeComponent } from "./types";
 /**
  * API configuration options for badge component
  * @category Components
@@ -29,10 +29,10 @@ interface ComponentWithElements {
         variant?: string;
     };
     getClass: (name: string) => string;
-    addClass: (...classes: string[]) => any;
-    removeClass: (...classes: string[]) => any;
-    on: (event: string, handler: Function) => any;
-    off: (event: string, handler: Function) => any;
+    addClass: (...classes: string[]) => ComponentWithElements;
+    removeClass: (...classes: string[]) => ComponentWithElements;
+    on: (event: string, handler: Function) => ComponentWithElements;
+    off: (event: string, handler: Function) => ComponentWithElements;
 }
 /**
  * Enhances a badge component with API methods.

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

@@ -1,4 +1,4 @@
-import { BadgeConfig } from './types';
+import { BadgeConfig } from "./types";
 /**
  * Default configuration for the Badge component
  * These values will be used when not explicitly specified by the user.
@@ -47,15 +47,25 @@ export declare const getElementConfig: (config: BadgeConfig) => {
  * @category Components
  * @internal
  */
-export declare const getApiConfig: (comp: any) => {
+export declare const getApiConfig: (comp: {
     visibility: {
-        show: () => any;
-        hide: () => any;
-        toggle: (visible?: boolean) => any;
-        isVisible: () => any;
+        show: () => void;
+        hide: () => void;
+        toggle: (visible?: boolean) => void;
+        isVisible: () => boolean;
     };
     lifecycle: {
-        destroy: () => any;
+        destroy: () => void;
+    };
+}) => {
+    visibility: {
+        show: () => void;
+        hide: () => void;
+        toggle: (visible?: boolean) => void;
+        isVisible: () => boolean;
+    };
+    lifecycle: {
+        destroy: () => void;
     };
 };
 /**

package/dist/components/bottom-app-bar/bottom-app-bar.d.ts

@@ -2,7 +2,7 @@
  * @module components/bottom-app-bar
  * @description Bottom app bar implementation
  */
-import { BottomAppBar, BottomAppBarConfig } from './types';
+import { BottomAppBar, BottomAppBarConfig } from "./types";
 /**
  * Creates a bottom app bar component
  *

package/dist/components/bottom-app-bar/config.d.ts

@@ -2,7 +2,7 @@
  * @module components/bottom-app-bar
  * @description Configuration for bottom app bar component
  */
-import { BottomAppBarConfig } from './types';
+import { BottomAppBarConfig } from "./types";
 /**
  * Default configuration for bottom app bar
  */

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

@@ -1,4 +1,5 @@
-import { ButtonComponent } from './types';
+import { ButtonComponent } from "./types";
+import { ProgressComponent } from "../progress/types";
 /**
  * API configuration options for button component
  * @category Components
@@ -8,6 +9,7 @@ interface ApiOptions {
     disabled: {
         enable: () => void;
         disable: () => void;
+        isDisabled: () => boolean;
     };
     lifecycle: {
         destroy: () => void;
@@ -21,17 +23,31 @@ interface ApiOptions {
 interface ComponentWithElements {
     element: HTMLElement;
     text: {
-        setText: (content: string) => any;
+        setText: (content: string) => void;
         getText: () => string;
         getElement: () => HTMLElement | null;
     };
     icon: {
-        setIcon: (html: string) => any;
+        setIcon: (html: string) => void;
         getIcon: () => string;
         getElement: () => HTMLElement | null;
     };
     getClass: (name: string) => string;
     componentName?: string;
+    on?: (event: string, handler: Function) => ComponentWithElements;
+    off?: (event: string, handler: Function) => ComponentWithElements;
+    addClass?: (...classes: string[]) => ComponentWithElements;
+    progress?: ProgressComponent;
+    showProgress?: () => Promise<ComponentWithElements>;
+    showProgressSync?: () => ComponentWithElements;
+    hideProgress?: () => Promise<ComponentWithElements>;
+    hideProgressSync?: () => ComponentWithElements;
+    setProgress?: (value: number) => Promise<ComponentWithElements>;
+    setProgressSync?: (value: number) => ComponentWithElements;
+    setIndeterminate?: (indeterminate: boolean) => Promise<ComponentWithElements>;
+    setIndeterminateSync?: (indeterminate: boolean) => ComponentWithElements;
+    setLoading?: (loading: boolean, text?: string) => Promise<ComponentWithElements>;
+    setLoadingSync?: (loading: boolean, text?: string) => ComponentWithElements;
 }
 /**
  * Enhances a button component with API methods.

package/dist/components/button/button.d.ts

@@ -1,4 +1,4 @@
-import { ButtonConfig } from './types';
+import { ButtonConfig } from "./types";
 /**
  * Creates a new Button component with the specified configuration.
  *
@@ -19,6 +19,46 @@ import { ButtonConfig } from './types';
  *
  * @throws {Error} Throws an error if button creation fails for any reason
  *
+ * @example
+ * ```ts
+ * // Create a button with integrated progress
+ * const submitButton = createButton({
+ *   text: 'Submit',
+ *   variant: 'filled',
+ *   progress: {
+ *     variant: 'circular',
+ *     size: 18,
+ *     indeterminate: true
+ *   }
+ * });
+ *
+ * // Create a square button with different sizes
+ * const squareButton = createButton({
+ *   text: 'Square Button',
+ *   variant: 'tonal',
+ *   shape: 'square',
+ *   size: 'm'  // Square buttons have size-specific corner radius
+ * });
+ *
+ * // Synchronous usage (common for UI interactions)
+ * submitButton.on('click', () => {
+ *   submitButton.setLoadingSync(true, 'Submitting...');
+ *
+ *   // Simulate async work
+ *   setTimeout(() => {
+ *     submitButton.setLoadingSync(false, 'Submit');
+ *   }, 2000);
+ * });
+ *
+ * // Asynchronous usage (when you need to ensure progress is loaded)
+ * submitButton.on('click', async () => {
+ *   await submitButton.setLoading(true, 'Processing...');
+ *   await submitButton.setProgress(50);
+ *   // ... more async operations
+ *   await submitButton.setLoading(false, 'Done');
+ * });
+ * ```
+ *
  * @category Components
  */
 declare const createButton: (config?: ButtonConfig) => any;

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

@@ -1,4 +1,4 @@
-import { ButtonConfig } from './types';
+import { ButtonConfig } from "./types";
 /**
  * Default configuration for the Button component.
  * These values will be used when not explicitly specified by the user.
@@ -8,7 +8,8 @@ import { ButtonConfig } from './types';
 export declare const defaultConfig: ButtonConfig;
 /**
  * Creates the base configuration for Button component by merging user-provided
- * config with default values.
+ * config with default values. Global configuration is automatically applied
+ * by createComponentConfig.
  *
  * @param {ButtonConfig} config - User provided configuration
  * @returns {ButtonConfig} Complete configuration with defaults applied
@@ -47,13 +48,23 @@ export declare const getElementConfig: (config: ButtonConfig) => {
  * @category Components
  * @internal
  */
-export declare const getApiConfig: (comp: any) => {
+export declare const getApiConfig: (comp: {
     disabled: {
-        enable: () => any;
-        disable: () => any;
+        enable: () => void;
+        disable: () => void;
+        isDisabled: () => boolean;
     };
     lifecycle: {
-        destroy: () => any;
+        destroy: () => void;
+    };
+}) => {
+    disabled: {
+        enable: () => void;
+        disable: () => void;
+        isDisabled: () => boolean;
+    };
+    lifecycle: {
+        destroy: () => void;
     };
 };
 export default defaultConfig;

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

@@ -13,6 +13,42 @@ export declare const BUTTON_VARIANTS: {
     /** Button that appears as text without background or border (low emphasis) */
     readonly TEXT: "text";
 };
+/**
+ * Available button size variants matching MD3 specifications
+ * @category Components
+ */
+export declare const BUTTON_SIZES: {
+    /** Extra small size - 32px height */
+    readonly XS: "xs";
+    /** Small size - 40px height (default) */
+    readonly S: "s";
+    /** Medium size - 56px height */
+    readonly M: "m";
+    /** Large size - 96px height */
+    readonly L: "l";
+    /** Extra large size - 136px height */
+    readonly XL: "xl";
+};
+/**
+ * Button size type
+ * @category Components
+ */
+export type ButtonSize = keyof typeof BUTTON_SIZES;
+/**
+ * Available button shape variants
+ * @category Components
+ */
+export declare const BUTTON_SHAPES: {
+    /** Round shape - pill-shaped buttons (default) */
+    readonly ROUND: "round";
+    /** Square shape - buttons with size-specific corner radius */
+    readonly SQUARE: "square";
+};
+/**
+ * Button shape type
+ * @category Components
+ */
+export type ButtonShape = keyof typeof BUTTON_SHAPES;
 /**
  * Default button types
  */

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

@@ -0,0 +1,26 @@
+import type { ProgressComponent } from "../../progress/types";
+import { ButtonConfig } from "../types";
+/**
+ * Component with progress capabilities
+ */
+interface ProgressEnhancedComponent {
+    element: HTMLElement;
+    icon?: any;
+    getClass: (name: string) => string;
+    progress?: ProgressComponent;
+    disabled?: {
+        enable: () => void;
+        disable: () => void;
+    };
+    setText?: (text: string) => any;
+    getText?: () => string;
+    [key: string]: any;
+}
+/**
+ * Adds progress functionality to a button component
+ *
+ * @param config - Button configuration with progress options
+ * @returns Component enhancer function
+ */
+export declare const withProgress: (config: ButtonConfig) => (component: ProgressEnhancedComponent) => ProgressEnhancedComponent;
+export {};

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

@@ -1,3 +1,6 @@
+import { BaseComponentConfig } from '../../core/config/component';
+import { ProgressConfig, ProgressComponent } from '../progress/types';
+import { ButtonSize, ButtonShape } from './constants';
 /**
  * Button variant types - controls the visual style of the button
  * @category Components
@@ -13,12 +16,22 @@ export type ButtonVariant = 'filled' | 'tonal' | 'outlined' | 'elevated' | 'text
  * Configuration interface for the Button component
  * @category Components
  */
-export interface ButtonConfig {
+export interface ButtonConfig extends BaseComponentConfig {
     /**
      * Button variant that determines visual styling
      * @default 'filled'
      */
     variant?: ButtonVariant | string;
+    /**
+     * Button size variant
+     * @default 's'
+     */
+    size?: ButtonSize | string;
+    /**
+     * Button shape variant
+     * @default 'round'
+     */
+    shape?: ButtonShape | string;
     /**
      * Whether the button is initially disabled
      * @default false
@@ -83,6 +96,16 @@ export interface ButtonConfig {
      * Required for icon-only buttons without text
      */
     ariaLabel?: string;
+    /**
+     * Progress indicator configuration
+     * When provided, integrates a progress component as the button's icon
+     */
+    progress?: ProgressConfig | boolean;
+    /**
+     * Whether to show progress initially
+     * @default false
+     */
+    showProgress?: boolean;
 }
 /**
  * Icon API interface for managing button icons
@@ -181,6 +204,28 @@ export interface ButtonComponent {
      * @returns The button component for chaining
      */
     setVariant: (variant: ButtonVariant | string) => ButtonComponent;
+    /**
+     * Gets the button's current size
+     * @returns Current size name ('xs', 's', 'm', 'l', 'xl')
+     */
+    getSize: () => ButtonSize | string;
+    /**
+     * Sets the button's size
+     * @param size - New size to apply ('xs', 's', 'm', 'l', 'xl')
+     * @returns The button component for chaining
+     */
+    setSize: (size: ButtonSize | string) => ButtonComponent;
+    /**
+     * Gets the button's current shape
+     * @returns Current shape name ('round', 'square')
+     */
+    getShape: () => ButtonShape | string;
+    /**
+     * Sets the button's shape
+     * @param shape - New shape to apply ('round', 'square')
+     * @returns The button component for chaining
+     */
+    setShape: (shape: ButtonShape | string) => ButtonComponent;
     /**
      * Enables the button (removes disabled attribute)
      * @returns The button component for chaining
@@ -262,4 +307,66 @@ export interface ButtonComponent {
      * @returns The button component for chaining
      */
     setAriaLabel: (label: string) => ButtonComponent;
+    /**
+     * Progress component instance (if progress is enabled)
+     */
+    progress?: ProgressComponent;
+    /**
+     * Shows the progress indicator (if progress is enabled)
+     * @returns The button component for chaining
+     */
+    showProgress?: () => Promise<ButtonComponent>;
+    /**
+     * Shows the progress indicator synchronously (if progress is enabled)
+     * @returns The button component for chaining
+     */
+    showProgressSync?: () => ButtonComponent;
+    /**
+     * Hides the progress indicator (if progress is enabled)
+     * @returns The button component for chaining
+     */
+    hideProgress?: () => Promise<ButtonComponent>;
+    /**
+     * Hides the progress indicator synchronously (if progress is enabled)
+     * @returns The button component for chaining
+     */
+    hideProgressSync?: () => ButtonComponent;
+    /**
+     * Sets the progress value (0-100) (if progress is enabled)
+     * @param value - Progress value
+     * @returns The button component for chaining
+     */
+    setProgress?: (value: number) => Promise<ButtonComponent>;
+    /**
+     * Sets the progress value synchronously (0-100) (if progress is enabled)
+     * @param value - Progress value
+     * @returns The button component for chaining
+     */
+    setProgressSync?: (value: number) => ButtonComponent;
+    /**
+     * Sets the progress to indeterminate mode (if progress is enabled)
+     * @param indeterminate - Whether progress should be indeterminate
+     * @returns The button component for chaining
+     */
+    setIndeterminate?: (indeterminate: boolean) => Promise<ButtonComponent>;
+    /**
+     * Sets the progress to indeterminate mode synchronously (if progress is enabled)
+     * @param indeterminate - Whether progress should be indeterminate
+     * @returns The button component for chaining
+     */
+    setIndeterminateSync?: (indeterminate: boolean) => ButtonComponent;
+    /**
+     * Updates both button text and progress for loading states (if progress is enabled)
+     * @param loading - Whether to show loading state
+     * @param text - Optional text to display while loading
+     * @returns The button component for chaining
+     */
+    setLoading?: (loading: boolean, text?: string) => Promise<ButtonComponent>;
+    /**
+     * Updates both button text and progress for loading states synchronously (if progress is enabled)
+     * @param loading - Whether to show loading state
+     * @param text - Optional text to display while loading
+     * @returns The button component for chaining
+     */
+    setLoadingSync?: (loading: boolean, text?: string) => ButtonComponent;
 }

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

@@ -1,4 +1,4 @@
-import { CardComponent, CardSchema, BaseComponent } from './types';
+import { CardComponent, CardSchema, BaseComponent } from "./types";
 /**
  * Default configuration for the Card component.
  * These values are used when no configuration is provided.

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

@@ -1,4 +1,4 @@
-import { BaseComponent, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature } from './types';
+import { BaseComponent, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature } from "./types";
 interface LoadingConfig {
     initialState?: boolean;
 }
@@ -11,6 +11,19 @@ interface SwipeableConfig {
     onSwipeRight?: (component: CardComponent) => void;
     threshold?: number;
 }
+export type JSONValue = string | number | boolean | null | JSONObject | JSONArray;
+export type JSONObject = {
+    [key: string]: JSONValue;
+};
+export type JSONArray = JSONValue[];
+export type UnknownObject = Record<string, unknown>;
+export type UnknownArray = unknown[];
+export type UnknownFunction = (...args: unknown[]) => unknown;
+export type APIResponse<T = unknown> = {
+    data: T;
+    meta?: Record<string, unknown>;
+    error?: string;
+};
 /**
  * Higher-order function to add loading state to a card.
  * Adds a loading overlay with spinner and proper ARIA attributes

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

@@ -59,14 +59,14 @@
  * Factory function to create a new Card component.
  * @see CardComponent for the full API reference
  */
-export { default } from './card';
+export { default } from "./card";
 /**
  * Card component types and interfaces
  *
  * These types define the structure and behavior of the Card component.
  */
-export { CardVariant, CardElevationLevel, CardSchema, CardHeaderConfig, CardContentConfig, CardActionsConfig, CardMediaConfig, CardAriaAttributes, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature } from './types';
-export { createCardContent, createCardHeader, createCardActions, createCardMedia } from './content';
-export { withAPI } from './api';
-export { withLoading, withExpandable, withSwipeable, withElevation } from './features';
-export { CARD_VARIANTS, CARD_ELEVATIONS, CARD_WIDTHS, CARD_CORNER_RADIUS, CARD_ASPECT_RATIOS, CARD_ACTION_ALIGNMENT, CARD_MEDIA_POSITION, CARD_CLASSES } from './constants';
+export { CardVariant, CardElevationLevel, CardSchema, CardHeaderConfig, CardContentConfig, CardActionsConfig, CardMediaConfig, CardAriaAttributes, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature, } from "./types";
+export { createCardContent, createCardHeader, createCardActions, createCardMedia, } from "./content";
+export { withAPI } from "./api";
+export { withLoading, withExpandable, withSwipeable, withElevation, } from "./features";
+export { CARD_VARIANTS, CARD_ELEVATIONS, CARD_WIDTHS, CARD_CORNER_RADIUS, CARD_ASPECT_RATIOS, CARD_ACTION_ALIGNMENT, CARD_MEDIA_POSITION, CARD_CLASSES, } from "./constants";

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

@@ -1,9 +1,9 @@
-import { CarouselComponent, CarouselSlide } from './types';
+import { CarouselComponent, CarouselSlide } from "./types";
 interface ApiOptions {
     slides: {
-        addSlide: (slide: CarouselSlide, index?: number) => any;
-        removeSlide: (index: number) => any;
-        updateSlide: (index: number, slide: CarouselSlide) => any;
+        addSlide: (slide: CarouselSlide, index?: number) => void;
+        removeSlide: (index: number) => void;
+        updateSlide: (index: number, slide: CarouselSlide) => void;
         getCount: () => number;
         getElements: () => HTMLElement[];
     };
@@ -15,13 +15,17 @@ interface ComponentWithElements {
     element: HTMLElement;
     getClass: (name: string) => string;
     getCurrentSlide: () => number;
-    goTo: (index: number) => any;
-    next: () => any;
-    prev: () => any;
-    enableLoop: () => any;
-    disableLoop: () => any;
-    setBorderRadius?: (radius: number) => any;
-    setGap?: (gap: number) => any;
+    goTo: (index: number) => void;
+    next: () => void;
+    prev: () => void;
+    enableLoop: () => void;
+    disableLoop: () => void;
+    setBorderRadius?: (radius: number) => void;
+    setGap?: (gap: number) => void;
+    on?: (event: string, handler: Function) => void;
+    off?: (event: string, handler: Function) => void;
+    addClass?: (...classes: string[]) => void;
+    slideData?: CarouselSlide[];
 }
 /**
  * Enhances a carousel component with API methods

package/dist/components/carousel/carousel.d.ts

@@ -13,7 +13,7 @@
  * @module components/carousel
  * @category Components
  */
-import { CarouselConfig, CarouselComponent } from './types';
+import { CarouselConfig, CarouselComponent } from "./types";
 /**
  * Creates a new carousel component with the specified configuration.
  *

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

@@ -1,4 +1,4 @@
-import { CarouselConfig } from './types';
+import { CarouselConfig } from "./types";
 /**
  * Default configuration for the Carousel component
  */

package/dist/components/carousel/features/drag.d.ts

@@ -1,4 +1,4 @@
-import { CarouselConfig } from '../types';
+import { CarouselConfig } from "../types";
 /**
  * Adds drag functionality to the carousel component with Material Design 3 scroll behavior support
  *

package/dist/components/carousel/features/slides.d.ts

@@ -1,4 +1,4 @@
-import { CarouselConfig } from '../types';
+import { CarouselConfig } from "../types";
 /**
  * Adds slide functionality to the carousel component with Material Design 3 layout types support
  *

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

@@ -1,4 +1,4 @@
-import { CheckboxConfig, BaseComponent, ApiOptions } from './types';
+import { CheckboxConfig, BaseComponent, ApiOptions } from "./types";
 /**
  * Default configuration for the Checkbox component
  */

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

@@ -6,7 +6,7 @@
  * - filled: Checkbox with filled background when checked (default)
  * - outlined: Checkbox with outline only, for less visual emphasis
  */
-export type CheckboxVariant = 'filled' | 'outlined';
+export type CheckboxVariant = "filled" | "outlined";
 /**
  * Checkbox label position types - controls where the label appears
  *
@@ -15,7 +15,7 @@ export type CheckboxVariant = 'filled' | 'outlined';
  * - start: Label appears before (to the left of) the checkbox
  * - end: Label appears after (to the right of) the checkbox (default)
  */
-export type CheckboxLabelPosition = 'start' | 'end';
+export type CheckboxLabelPosition = "start" | "end";
 /**
  * Configuration interface for the Checkbox component
  *

package/dist/components/chips/chip/chip.d.ts

@@ -1,4 +1,4 @@
-import { ChipConfig, ChipComponent } from '../types';
+import { ChipConfig, ChipComponent } from "../types";
 /**
  * Creates a new Chip component
  * @param {ChipConfig} config - Chip configuration

package/dist/components/chips/chip/config.d.ts

@@ -1,4 +1,4 @@
-import { ChipConfig } from '../types';
+import { ChipConfig } from "../types";
 /**
  * Component with required elements and methods
  * @internal

package/dist/components/chips/chips.d.ts

@@ -1,4 +1,4 @@
-import { ChipsConfig, ChipsComponent } from './types';
+import { ChipsConfig, ChipsComponent } from "./types";
 /**
  * Creates a chips container for grouping related chips
  *

package/dist/components/chips/features/chip-items.d.ts

@@ -1,4 +1,4 @@
-import { ChipsConfig } from '../types';
+import { ChipsConfig } from "../types";
 /**
  * Adds chip item management to chips component
  *

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

@@ -11,7 +11,6 @@ export declare function createChipsSchema(component: any, config: ChipsConfig):
         options: {
             className: any[];
             attributes: {
-                tabindex: string;
                 role: string;
                 'aria-multiselectable': string;
             };

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

@@ -1,4 +1,4 @@
-import { DatePickerComponent, ApiOptions } from './types';
+import { DatePickerComponent, ApiOptions } from "./types";
 /**
  * Enhances a datepicker component with API methods
  * @param {object} state - Current state of the datepicker

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

@@ -1,4 +1,4 @@
-import { DatePickerConfig } from './types';
+import { DatePickerConfig } from "./types";
 /**
  * Default configuration for the DatePicker component
  */

package/dist/components/datepicker/datepicker.d.ts

@@ -1,4 +1,4 @@
-import { DatePickerConfig, DatePickerComponent } from './types';
+import { DatePickerConfig, DatePickerComponent } from "./types";
 /**
  * Creates a new DatePicker component
  * @param {DatePickerConfig} config - DatePicker configuration object