mtrl 0.3.8 → 0.4.0

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

@@ -0,0 +1,64 @@
+import { FabComponent } from './types';
+/**
+ * API configuration options for the 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;
+    };
+    /**
+     * Base class name for the 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;
+    };
+    /** Gets a class name with component's prefix */
+    getClass: (name: string) => string;
+}
+/**
+ * Enhances a FAB component with public API methods
+ *
+ * Higher-order function that adds the full public API to the FAB component,
+ * exposing methods for changing appearance, handling state, and managing position.
+ *
+ * @param {ApiOptions} options - API configuration options
+ * @returns {Function} Higher-order function that adds API methods to component
+ *
+ * @category Components
+ * @internal
+ */
+export declare const withAPI: ({ disabled, lifecycle, className }: ApiOptions) => (component: ComponentWithElements) => FabComponent;
+export {};

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

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

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

@@ -0,0 +1,75 @@
+/**
+ * FAB variants following Material Design 3 guidelines
+ */
+export declare const 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";
+};
+/**
+ * FAB size variants
+ */
+export declare const FAB_SIZES: {
+    /** 40px diameter, for compact interfaces or secondary actions */
+    readonly SMALL: "small";
+    /** 56px diameter, for standard primary actions (default) */
+    readonly DEFAULT: "default";
+    /** 96px diameter, for emphasis or touch-focused interfaces */
+    readonly LARGE: "large";
+};
+/**
+ * FAB position options
+ */
+export declare const 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";
+};
+/**
+ * FAB CSS classes
+ */
+export declare const FAB_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "fab";
+    /** Class for the icon container */
+    readonly ICON: "fab-icon";
+    /** Applied when FAB is lowered (pressed state) */
+    readonly LOWERED: "fab--lowered";
+    /** Applied to small FABs */
+    readonly SMALL: "fab--small";
+    /** Applied to large FABs */
+    readonly LARGE: "fab--large";
+};
+/**
+ * Button types for FAB
+ */
+export declare const FAB_TYPES: {
+    readonly BUTTON: "button";
+    readonly SUBMIT: "submit";
+    readonly RESET: "reset";
+};
+/**
+ * Default icon sizes based on FAB size
+ */
+export declare const FAB_ICON_SIZES: {
+    readonly SMALL: "20px";
+    readonly DEFAULT: "24px";
+    readonly LARGE: "36px";
+};
+/**
+ * Default animations for FAB
+ */
+export declare const FAB_ANIMATIONS: {
+    /** Entrance animation duration in milliseconds */
+    readonly ENTRANCE_DURATION: 250;
+};

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

@@ -1,33 +1,19 @@
-// src/components/fab/fab.ts
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import {
-  withEvents,
-  withIcon,
-  withVariant,
-  withRipple,
-  withDisabled,
-  withLifecycle
-} from '../../core/compose/features';
-import { withAPI } from './api';
 import { FabConfig, FabComponent } from './types';
-import { createBaseConfig, getElementConfig, getApiConfig } from './config';
-
 /**
  * Creates a new Floating Action Button (FAB) component
- * 
+ *
  * Floating Action Buttons (FABs) represent the primary action in an application.
  * They're circular buttons that float above the UI, and typically contain an icon.
  * FABs follow Material Design 3 guidelines with support for multiple variants,
  * sizes, and positioning options.
- * 
+ *
  * @param {FabConfig} config - FAB configuration object
  * @returns {FabComponent} FAB component instance
- * 
+ *
  * @throws {Error} If the FAB cannot be created due to invalid configuration
- * 
+ *
  * @category Components
- * 
+ *
  * @example
  * ```typescript
  * // Create a default FAB with a plus icon
@@ -35,7 +21,7 @@ import { createBaseConfig, getElementConfig, getApiConfig } from './config';
  *   icon: '<svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>',
  *   ariaLabel: 'Add new item'
  * });
- * 
+ *
  * // Create a small FAB with a custom position
  * const smallFab = createFab({
  *   size: 'small',
@@ -43,39 +29,17 @@ import { createBaseConfig, getElementConfig, getApiConfig } from './config';
  *   variant: 'secondary',
  *   position: 'bottom-right'
  * });
- * 
+ *
  * // Add click handler and attach to DOM
  * fab.on('click', () => {
  *   console.log('FAB clicked');
  * });
  * document.body.appendChild(fab.element);
- * 
+ *
  * // Later, update the FAB's appearance
  * fab.setIcon('<span class="material-icons">edit</span>');
  * fab.setPosition('bottom-left');
  * ```
  */
-const createFab = (config: FabConfig = {}): FabComponent => {
-  const fabConfig = createBaseConfig(config);
-
-  try {
-    const fab = pipe(
-      createBase,
-      withEvents(),
-      withElement(getElementConfig(fabConfig)),
-      withVariant(fabConfig),
-      withIcon(fabConfig),
-      withDisabled(fabConfig),
-      withRipple(fabConfig),
-      withLifecycle(),
-      comp => withAPI(getApiConfig(comp))(comp)
-    )(fabConfig);
-    
-    return fab;
-  } catch (error) {
-    console.error('FAB creation error:', error);
-    throw new Error(`Failed to create FAB: ${(error as Error).message}`);
-  }
-};
-
-export default createFab;
+declare const createFab: (config?: FabConfig) => FabComponent;
+export default createFab;

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

@@ -1,12 +1,10 @@
-// src/components/fab/index.ts
-
 /**
  * @module Fab
- * 
+ *
  * Floating Action Button (FAB) component following Material Design 3 guidelines.
  * FABs are circular buttons that represent the primary action in an application.
  * They are prominently displayed, typically in a fixed position overlaid on the UI.
- * 
+ *
  * Features:
  * - Multiple variants (primary, secondary, tertiary, surface)
  * - Three size options (small, default, large)
@@ -14,7 +12,7 @@
  * - Icon support with customization
  * - Ripple effect on interaction
  * - Accessibility support
- * 
+ *
  * @example
  * ```typescript
  * // Create a primary FAB with a plus icon
@@ -23,22 +21,15 @@
  *   position: 'bottom-right',
  *   ariaLabel: 'Add new item'
  * });
- * 
+ *
  * // Attach to DOM and add click handler
  * container.appendChild(fab.element);
  * fab.on('click', () => {
  *   console.log('FAB clicked');
  * });
  * ```
- * 
+ *
  * @category Components
  */
-
 export { default, default as createFab } from './fab';
-export {
-  FabConfig,
-  FabComponent,
-  FabVariant,
-  FabSize,
-  FabPosition
-} from './types';
+export { FabConfig, FabComponent, FabVariant, FabSize, FabPosition } from './types';