mtrl 0.3.8 → 0.4.0

package/{src/components/divider/divider.ts → dist/components/divider/divider.d.ts}

@@ -1,35 +1,25 @@
-// src/components/divider/divider.ts
-import {
-  createBase,
-  withElement,
-  pipe,
-  withVariant
-} from '../../core/compose';
-import { PREFIX } from '../../core/config';
-import { DividerConfig, createBaseConfig } from './config';
-import { withOrientation, withInset, withStyle } from './features';
+import { DividerConfig } from './config';
 import { DividerComponent } from './types';
-
 /**
  * Creates a new Divider component with the specified configuration.
- * 
+ *
  * Dividers are thin lines that separate content into distinct sections following
  * Material Design 3 guidelines. They can be horizontal or vertical, and offer
  * various customization options for inset, thickness, and color.
- * 
+ *
  * @param config - Divider configuration options
  * @returns Divider component instance with methods for managing appearance and behavior
- * 
+ *
  * @throws {Error} If divider creation fails due to invalid configuration
- * 
+ *
  * @category Components
- * 
+ *
  * @example
  * ```typescript
  * // Create a basic horizontal divider
  * const divider = createDivider();
  * container.appendChild(divider.element);
- * 
+ *
  * // Create a vertical divider with custom styling
  * const separator = createDivider({
  *   orientation: 'vertical',
@@ -39,29 +29,11 @@ import { DividerComponent } from './types';
  *   insetStart: 8,
  *   insetEnd: 8
  * });
- * 
+ *
  * // Later, change the divider's appearance
  * divider.setColor('var(--md-sys-color-outline)');
  * divider.setThickness(1);
  * divider.setVariant('inset');
  * ```
  */
-export const createDivider = (config: DividerConfig = {}): DividerComponent => {
-  // Process configuration
-  const processedConfig = createBaseConfig(config);
-  
-  // Create component through composition
-  return pipe(
-    createBase,
-    withElement({
-      tag: 'hr',
-      componentName: 'divider',
-      prefix: processedConfig.prefix || PREFIX,
-      className: config.class
-    }),
-    withOrientation(processedConfig),
-    withVariant(processedConfig),
-    withInset(processedConfig),
-    withStyle(processedConfig)
-  )(processedConfig) as DividerComponent;
-};
+export declare const createDivider: (config?: DividerConfig) => DividerComponent;

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

@@ -0,0 +1,50 @@
+import { BaseComponent, ElementComponent } from '../../core/compose';
+import { DividerConfig } from './config';
+import { DividerComponent } from './types';
+/**
+ * Adds orientation functionality to divider
+ *
+ * Higher-order function that enhances a component with the ability to be
+ * oriented horizontally (default) or vertically. Controls the appropriate
+ * CSS classes and dimensional styling based on orientation.
+ *
+ * @param config - Divider configuration
+ * @returns Function that enhances a component with orientation capabilities
+ *
+ * @internal
+ */
+export declare const withOrientation: (config: DividerConfig) => <C extends ElementComponent & BaseComponent>(component: C) => C & Partial<DividerComponent>;
+/**
+ * Adds inset functionality to divider
+ *
+ * Higher-order function that enhances a component with the ability to have
+ * customized inset spacing. Supports three variants (full-width, inset, middle-inset)
+ * and allows fine-grained control over start and end insets.
+ *
+ * Insets are applied as margins in the appropriate direction based on orientation:
+ * - For horizontal dividers: left/right margins
+ * - For vertical dividers: top/bottom margins
+ *
+ * @param config - Divider configuration
+ * @returns Function that enhances a component with inset capabilities
+ *
+ * @internal
+ */
+export declare const withInset: (config: DividerConfig) => <C extends ElementComponent & Partial<DividerComponent>>(component: C) => C & Partial<DividerComponent>;
+/**
+ * Adds style customization to divider
+ *
+ * Higher-order function that enhances a component with visual customization
+ * capabilities, including:
+ * - Custom thickness (height for horizontal, width for vertical dividers)
+ * - Custom colors (background-color CSS property)
+ *
+ * These styling options allow dividers to be visually adapted to different
+ * design requirements while maintaining Material Design principles.
+ *
+ * @param config - Divider configuration
+ * @returns Function that enhances a component with style capabilities
+ *
+ * @internal
+ */
+export declare const withStyle: (config: DividerConfig) => <C extends ElementComponent & Partial<DividerComponent>>(component: C) => C & Partial<DividerComponent>;

package/{src/components/divider/index.ts → dist/components/divider/index.d.ts}

@@ -1,23 +1,21 @@
-// src/components/divider/index.ts
-
 /**
  * @module Divider
- * 
+ *
  * The Divider component provides horizontal or vertical lines that separate content into distinct sections.
  * Dividers follow Material Design 3 guidelines for separating content in lists, layouts, and other UI containers.
- * 
+ *
  * Features:
  * - Horizontal and vertical orientations
  * - Multiple inset variants (full-width, inset, middle-inset)
  * - Customizable thickness and color
  * - Responsive to parent container
- * 
+ *
  * @example
  * ```typescript
  * // Create a standard horizontal divider
  * const divider = createDivider();
  * document.body.appendChild(divider.element);
- * 
+ *
  * // Create a vertical divider with custom styles
  * const verticalDivider = createDivider({
  *   orientation: 'vertical',
@@ -26,14 +24,10 @@
  *   variant: 'middle-inset'
  * });
  * ```
- * 
+ *
  * @category Components
  */
-
-// Use a more explicit export to avoid bundler confusion
 import { createDivider } from './divider';
 export { createDivider };
-
-// Export types
 export type { DividerConfig } from './config';
-export type { DividerComponent } from './types';
+export type { DividerComponent } from './types';

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

@@ -0,0 +1,124 @@
+import { BaseComponent, ElementComponent } from '../../core/compose';
+/**
+ * Divider component interface
+ *
+ * Represents a Material Design 3 divider that separates content into distinct sections.
+ * Provides methods for configuring the appearance, orientation, and inset behavior.
+ *
+ * @category Components
+ */
+export interface DividerComponent extends BaseComponent, ElementComponent {
+    /**
+     * Gets current orientation of the divider
+     *
+     * @returns Current orientation ('horizontal' or 'vertical')
+     *
+     * @example
+     * ```typescript
+     * const divider = createDivider();
+     * const orientation = divider.getOrientation(); // Returns 'horizontal' by default
+     * ```
+     */
+    getOrientation: () => 'horizontal' | 'vertical';
+    /**
+     * Sets orientation of the divider
+     *
+     * Changes the divider's orientation between horizontal (default) and vertical.
+     * This affects the divider's positioning, dimension constraints, and how insets are applied.
+     *
+     * @param orientation - New orientation ('horizontal' or 'vertical')
+     * @returns DividerComponent instance for chaining
+     *
+     * @example
+     * ```typescript
+     * // Change a divider from horizontal to vertical
+     * divider.setOrientation('vertical');
+     * ```
+     */
+    setOrientation: (orientation: 'horizontal' | 'vertical') => DividerComponent;
+    /**
+     * Gets current variant of the divider
+     *
+     * @returns Current variant ('full-width', 'inset', or 'middle-inset')
+     *
+     * @example
+     * ```typescript
+     * const variant = divider.getVariant(); // Returns 'full-width' by default
+     * ```
+     */
+    getVariant: () => 'full-width' | 'inset' | 'middle-inset';
+    /**
+     * Sets variant of the divider
+     *
+     * Changes how the divider is inset within its container:
+     * - 'full-width': Spans the entire width/height of the container (default)
+     * - 'inset': Adds space at the start (left for horizontal, top for vertical)
+     * - 'middle-inset': Adds space at both start and end
+     *
+     * @param variant - New variant
+     * @returns DividerComponent instance for chaining
+     *
+     * @example
+     * ```typescript
+     * // Create a list divider with left inset
+     * divider.setVariant('inset');
+     *
+     * // Create a divider with space on both sides
+     * divider.setVariant('middle-inset');
+     * ```
+     */
+    setVariant: (variant: 'full-width' | 'inset' | 'middle-inset') => DividerComponent;
+    /**
+     * Sets custom inset values for the divider
+     *
+     * Allows fine-grained control over inset spacing, overriding the default values
+     * applied by the variant. Only applies if variant is 'inset' or 'middle-inset'.
+     *
+     * @param insetStart - Start inset value in pixels (left for horizontal, top for vertical)
+     * @param insetEnd - End inset value in pixels (right for horizontal, bottom for vertical)
+     * @returns DividerComponent instance for chaining
+     *
+     * @example
+     * ```typescript
+     * // Create a divider with custom insets
+     * const divider = createDivider({ variant: 'inset' });
+     * divider.setInset(24, 8); // 24px from start, 8px from end
+     * ```
+     */
+    setInset: (insetStart?: number, insetEnd?: number) => DividerComponent;
+    /**
+     * Sets thickness of the divider
+     *
+     * Changes the divider's thickness (height for horizontal, width for vertical).
+     * The default thickness is 1px, following Material Design 3 guidelines.
+     *
+     * @param thickness - Thickness in pixels
+     * @returns DividerComponent instance for chaining
+     *
+     * @example
+     * ```typescript
+     * // Create a bold divider
+     * divider.setThickness(2);
+     * ```
+     */
+    setThickness: (thickness: number) => DividerComponent;
+    /**
+     * Sets custom color for the divider
+     *
+     * By default, dividers use the 'outline-variant' color from the theme.
+     * This method allows setting a custom color via any valid CSS color value.
+     *
+     * @param color - CSS color value (hex, rgb, rgba, hsl, etc.)
+     * @returns DividerComponent instance for chaining
+     *
+     * @example
+     * ```typescript
+     * // Create a blue divider
+     * divider.setColor('#2196F3');
+     *
+     * // Create a semi-transparent divider
+     * divider.setColor('rgba(0, 0, 0, 0.12)');
+     * ```
+     */
+    setColor: (color: string) => DividerComponent;
+}

package/dist/components/extended-fab/api.d.ts

@@ -0,0 +1,83 @@
+import { ExtendedFabComponent } from './types';
+/**
+ * API configuration options for the Extended FAB component
+ *
+ * @category Components
+ * @internal
+ */
+interface ApiOptions {
+    /**
+     * Disabled state management API
+     */
+    disabled: {
+        /** Enables the component */
+        enable: () => void;
+        /** Disables the component */
+        disable: () => void;
+    };
+    /**
+     * Lifecycle management API
+     */
+    lifecycle: {
+        /** Destroys the component */
+        destroy: () => void;
+    };
+    /**
+     * Text content management API
+     */
+    text: {
+        /** Sets text content */
+        setText: (text: string) => any;
+        /** Gets text content */
+        getText: () => string;
+    };
+    /**
+     * Base class name for the Extended FAB
+     */
+    className: string;
+}
+/**
+ * Base component with element properties
+ *
+ * @category Components
+ * @internal
+ */
+interface ComponentWithElements {
+    /** The DOM element */
+    element: HTMLElement;
+    /** Icon management */
+    icon: {
+        /** Sets icon HTML content */
+        setIcon: (html: string) => any;
+        /** Gets icon HTML content */
+        getIcon: () => string;
+        /** Gets icon DOM element */
+        getElement: () => HTMLElement | null;
+    };
+    /** Text management */
+    text: {
+        /** Sets text content */
+        setText: (text: string) => any;
+        /** Gets text content */
+        getText: () => string;
+        /** Gets text DOM element */
+        getElement: () => HTMLElement | null;
+    };
+    /** Gets a class name with component's prefix */
+    getClass: (name: string) => string;
+}
+/**
+ * Enhances an Extended FAB component with public API methods
+ *
+ * Higher-order function that adds the full public API to the Extended FAB component,
+ * exposing methods for changing appearance, handling state, managing position,
+ * and controlling the collapse/expand behavior.
+ *
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ *
+ * @category Components
+ * @internal This is an internal utility for the Extended FAB component
+ */
+export declare const withAPI: ({ disabled, lifecycle, text, className }: ApiOptions) => (component: ComponentWithElements) => ExtendedFabComponent;
+export {};

package/dist/components/extended-fab/config.d.ts

@@ -0,0 +1,75 @@
+import { ExtendedFabConfig } from './types';
+/**
+ * Default configuration for the Extended FAB component
+ *
+ * Provides reasonable defaults for creating Extended FABs
+ * according to Material Design 3 guidelines.
+ *
+ * @category Components
+ * @internal
+ */
+export declare const defaultConfig: ExtendedFabConfig;
+/**
+ * Creates the base configuration for Extended FAB component
+ *
+ * Merges user-provided configuration with default values and validates
+ * the configuration to ensure all required properties have values.
+ *
+ * @param {ExtendedFabConfig} config - User provided configuration
+ * @returns {ExtendedFabConfig} Complete configuration with defaults applied
+ *
+ * @category Components
+ * @internal
+ */
+export declare const createBaseConfig: (config?: ExtendedFabConfig) => ExtendedFabConfig;
+/**
+ * Generates element configuration for the Extended FAB component
+ *
+ * Transforms the user-friendly ExtendedFabConfig into the internal format required
+ * by the withElement function. Creates all the appropriate CSS classes and attributes
+ * needed to properly render the Extended FAB in the DOM.
+ *
+ * @param {ExtendedFabConfig} config - Extended FAB configuration
+ * @returns {Object} Element configuration object for withElement
+ *
+ * @category Components
+ * @internal
+ */
+export declare const getElementConfig: (config: ExtendedFabConfig) => {
+    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 Extended FAB component
+ *
+ * Provides access to various component sub-features like disabled state,
+ * lifecycle management, and text content.
+ *
+ * @param {Object} comp - Component with disabled and lifecycle features
+ * @returns {Object} API configuration object for withAPI
+ *
+ * @category Components
+ * @internal
+ */
+export declare const getApiConfig: (comp: any) => {
+    disabled: {
+        enable: () => any;
+        disable: () => any;
+    };
+    lifecycle: {
+        destroy: () => any;
+    };
+    className: any;
+    text: {
+        setText: (text: string) => any;
+        getText: () => any;
+    };
+};
+export default defaultConfig;

package/dist/components/extended-fab/constants.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Extended FAB variants following Material Design 3 guidelines
+ */
+export declare const EXTENDED_FAB_VARIANTS: {
+    /** Uses the primary color, highest emphasis (default) */
+    readonly PRIMARY: "primary";
+    /** Uses the secondary color, medium emphasis */
+    readonly SECONDARY: "secondary";
+    /** Uses the tertiary color, lower emphasis */
+    readonly TERTIARY: "tertiary";
+    /** Uses the surface color with an outline, lowest emphasis */
+    readonly SURFACE: "surface";
+};
+/**
+ * Extended FAB width behavior
+ */
+export declare const EXTENDED_FAB_WIDTH: {
+    /** Maintains a constant width regardless of content (default) */
+    readonly FIXED: "fixed";
+    /** Adjusts width based on content length */
+    readonly FLUID: "fluid";
+};
+/**
+ * Extended FAB position on the screen
+ */
+export declare const EXTENDED_FAB_POSITIONS: {
+    /** Position in the top-right corner */
+    readonly TOP_RIGHT: "top-right";
+    /** Position in the top-left corner */
+    readonly TOP_LEFT: "top-left";
+    /** Position in the bottom-right corner (most common for primary actions) */
+    readonly BOTTOM_RIGHT: "bottom-right";
+    /** Position in the bottom-left corner */
+    readonly BOTTOM_LEFT: "bottom-left";
+};
+/**
+ * Icon position options
+ */
+export declare const EXTENDED_FAB_ICON_POSITIONS: {
+    /** Icon appears before the text (default) */
+    readonly START: "start";
+    /** Icon appears after the text */
+    readonly END: "end";
+};
+/**
+ * Extended FAB CSS classes
+ */
+export declare const EXTENDED_FAB_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "extended-fab";
+    /** Class for the icon container */
+    readonly ICON: "extended-fab-icon";
+    /** Class for the text container */
+    readonly TEXT: "extended-fab-text";
+    /** Applied to fixed width FABs */
+    readonly FIXED: "extended-fab--fixed";
+    /** Applied to fluid width FABs */
+    readonly FLUID: "extended-fab--fluid";
+    /** Applied when FAB is lowered (pressed state) */
+    readonly LOWERED: "extended-fab--lowered";
+    /** Applied when FAB is collapsed to a regular FAB */
+    readonly COLLAPSED: "extended-fab--collapsed";
+    /** Applied when icon is positioned at the end */
+    readonly ICON_END: "extended-fab--icon-end";
+};
+/**
+ * Button types for Extended FAB
+ */
+export declare const EXTENDED_FAB_TYPES: {
+    readonly BUTTON: "button";
+    readonly SUBMIT: "submit";
+    readonly RESET: "reset";
+};
+/**
+ * Default animations for Extended FAB
+ */
+export declare const EXTENDED_FAB_ANIMATIONS: {
+    /** Entrance animation duration in milliseconds */
+    readonly ENTRANCE_DURATION: 250;
+    /** Collapse/expand animation duration in milliseconds */
+    readonly COLLAPSE_DURATION: 200;
+};

package/dist/components/extended-fab/extended-fab.d.ts

@@ -0,0 +1,61 @@
+import { ExtendedFabConfig, ExtendedFabComponent } from './types';
+/**
+ * Creates a new Extended Floating Action Button (Extended FAB) component
+ *
+ * Extended FABs are a variant of the standard Floating Action Button that include
+ * both an icon and text label. They're designed for primary actions that need
+ * more description than just an icon, and can be positioned in various corners
+ * of the interface.
+ *
+ * Extended FABs follow Material Design 3 guidelines with support for:
+ * - Multiple color variants (primary, secondary, tertiary, surface)
+ * - Icon and text label configuration
+ * - Fixed or fluid width
+ * - Automatic collapse on scroll
+ * - Various positioning options
+ *
+ * @param {ExtendedFabConfig} config - Extended FAB configuration object
+ * @returns {ExtendedFabComponent} Extended FAB component instance
+ *
+ * @throws {Error} If the Extended FAB cannot be created due to invalid configuration
+ *
+ * @category Components
+ *
+ * @example
+ * ```typescript
+ * // Create a basic Extended FAB with icon and text
+ * const extendedFab = createExtendedFab({
+ *   icon: '<svg>...</svg>',
+ *   text: 'Create',
+ *   ariaLabel: 'Create new item'
+ * });
+ *
+ * // Create a tertiary Extended FAB with a custom position
+ * const customExtendedFab = createExtendedFab({
+ *   text: 'Add to cart',
+ *   icon: '<svg>...</svg>',
+ *   variant: 'tertiary',
+ *   position: 'bottom-right',
+ *   collapseOnScroll: true
+ * });
+ *
+ * // Add click handler
+ * extendedFab.on('click', () => {
+ *   console.log('Extended FAB clicked');
+ * });
+ *
+ * // Attach to DOM
+ * document.body.appendChild(extendedFab.element);
+ *
+ * // Programmatically collapse and expand
+ * document.querySelector('#collapseBtn').addEventListener('click', () => {
+ *   extendedFab.collapse();
+ * });
+ *
+ * document.querySelector('#expandBtn').addEventListener('click', () => {
+ *   extendedFab.expand();
+ * });
+ * ```
+ */
+declare const createExtendedFab: (config?: ExtendedFabConfig) => ExtendedFabComponent;
+export default createExtendedFab;

package/{src/components/extended-fab/index.ts → dist/components/extended-fab/index.d.ts}

@@ -1,12 +1,10 @@
-// src/components/extended-fab/index.ts
-
 /**
  * @module ExtendedFab
- * 
+ *
  * Extended Floating Action Button (Extended FAB) component following Material Design 3 guidelines.
  * Extended FABs are wider than standard FABs, containing both an icon and a text label.
  * They provide a primary action that's prominently displayed and easily accessible.
- * 
+ *
  * Features:
  * - Multiple variants (primary, secondary, tertiary, surface)
  * - Icon and text label combination
@@ -14,7 +12,7 @@
  * - Collapsible behavior on scroll
  * - Ripple effect on interaction
  * - Accessibility support
- * 
+ *
  * @example
  * ```typescript
  * // Create a primary Extended FAB with icon and text
@@ -24,22 +22,15 @@
  *   position: 'bottom-right',
  *   collapseOnScroll: true
  * });
- * 
+ *
  * // Attach to DOM and add click handler
  * container.appendChild(extendedFab.element);
  * extendedFab.on('click', () => {
  *   console.log('Extended FAB clicked');
  * });
  * ```
- * 
+ *
  * @category Components
  */
-
 export { default, default as createExtendedFab } from './extended-fab';
-export {
-  ExtendedFabConfig,
-  ExtendedFabComponent,
-  ExtendedFabVariant,
-  ExtendedFabWidth,
-  ExtendedFabPosition
-} from './types';
+export { ExtendedFabConfig, ExtendedFabComponent, ExtendedFabVariant, ExtendedFabWidth, ExtendedFabPosition } from './types';