mtrl 0.3.8 → 0.4.0

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

@@ -0,0 +1,116 @@
+/**
+ * Dialog sizes
+ */
+export declare const DIALOG_SIZES: {
+    /** 320px width, for simple messages or choices */
+    readonly SMALL: "small";
+    /** 560px width, for standard forms or content (default) */
+    readonly MEDIUM: "medium";
+    /** 800px width, for complex forms or rich content */
+    readonly LARGE: "large";
+    /** Spans the full width of the viewport with margins */
+    readonly FULLWIDTH: "fullwidth";
+    /** Takes up the entire viewport (similar to a new page) */
+    readonly FULLSCREEN: "fullscreen";
+};
+/**
+ * Dialog animation types
+ */
+export declare const DIALOG_ANIMATIONS: {
+    /** Scale up/down animation from center (default) */
+    readonly SCALE: "scale";
+    /** Slide in from bottom, slide out to bottom */
+    readonly SLIDE_UP: "slide-up";
+    /** Slide in from top, slide out to top */
+    readonly SLIDE_DOWN: "slide-down";
+    /** Simple fade in/out animation */
+    readonly FADE: "fade";
+};
+/**
+ * Footer alignment options
+ */
+export declare const DIALOG_FOOTER_ALIGNMENTS: {
+    /** Align buttons to the right (default, follows Material Design guidelines) */
+    readonly RIGHT: "right";
+    /** Align buttons to the left */
+    readonly LEFT: "left";
+    /** Center buttons in footer */
+    readonly CENTER: "center";
+    /** Space buttons evenly, with first button at left, last at right */
+    readonly SPACE_BETWEEN: "space-between";
+};
+/**
+ * Dialog events
+ */
+export declare const DIALOG_EVENTS: {
+    /** Fired when the dialog begins opening */
+    readonly OPEN: "open";
+    /** Fired when the dialog begins closing */
+    readonly CLOSE: "close";
+    /** Fired before the dialog starts opening (can be prevented) */
+    readonly BEFORE_OPEN: "beforeopen";
+    /** Fired before the dialog starts closing (can be prevented) */
+    readonly BEFORE_CLOSE: "beforeclose";
+    /** Fired after the dialog has fully opened (animation complete) */
+    readonly AFTER_OPEN: "afteropen";
+    /** Fired after the dialog has fully closed (animation complete) */
+    readonly AFTER_CLOSE: "afterclose";
+};
+/**
+ * Dialog CSS classes
+ */
+export declare const DIALOG_CLASSES: {
+    /** Root dialog element */
+    readonly ROOT: "dialog";
+    /** Overlay background */
+    readonly OVERLAY: "dialog-overlay";
+    /** Dialog container */
+    readonly CONTAINER: "dialog-container";
+    /** Dialog header */
+    readonly HEADER: "dialog-header";
+    /** Dialog title */
+    readonly TITLE: "dialog-title";
+    /** Dialog subtitle */
+    readonly SUBTITLE: "dialog-subtitle";
+    /** Close button */
+    readonly CLOSE_BUTTON: "dialog-close-button";
+    /** Dialog content */
+    readonly CONTENT: "dialog-content";
+    /** Dialog footer */
+    readonly FOOTER: "dialog-footer";
+    /** Dialog divider */
+    readonly DIVIDER: "dialog-divider";
+    /** Added when dialog is open */
+    readonly OPEN: "dialog--open";
+    /** Added when dialog is animating */
+    readonly ANIMATING: "dialog--animating";
+};
+/**
+ * Default animation duration in milliseconds
+ */
+export declare const DEFAULT_ANIMATION_DURATION = 300;
+/**
+ * Default z-index for dialogs
+ */
+export declare const DEFAULT_Z_INDEX = 1000;
+/**
+ * Button variants for dialog buttons following Material Design 3
+ */
+export declare const DIALOG_BUTTON_VARIANTS: {
+    /** Text button (low emphasis) */
+    readonly TEXT: "text";
+    /** Filled button (high emphasis) */
+    readonly FILLED: "filled";
+    /** Outlined button (medium emphasis) */
+    readonly OUTLINED: "outlined";
+    /** Tonal button (medium emphasis) */
+    readonly TONAL: "tonal";
+};
+/**
+ * Default button text for confirmation dialogs
+ */
+export declare const DEFAULT_CONFIRM_BUTTON_TEXT = "Yes";
+/**
+ * Default button text for cancellation in dialogs
+ */
+export declare const DEFAULT_CANCEL_BUTTON_TEXT = "No";

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

@@ -1,10 +1,9 @@
-// src/components/dialog/dialog.ts
 /**
  * Dialog Component Implementation
- * 
+ *
  * This module implements a Material Design 3 dialog component that can be
  * used for alerts, confirmations, form submissions, and complex interactions.
- * 
+ *
  * The implementation supports various features including:
  * - Multiple size variants (small, medium, large, fullwidth, fullscreen)
  * - Multiple animation styles
@@ -12,41 +11,25 @@
  * - Dividers for visual separation
  * - Confirmation dialog patterns
  * - Event handling for dialog lifecycle
- * 
+ *
  * @module components/dialog
  * @category Components
  */
-
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import { withEvents, withLifecycle } from '../../core/compose/features';
-import { 
-  withStructure, 
-  withVisibility, 
-  withContent, 
-  withButtons, 
-  withSize,
-  withConfirm,
-  withDivider // Simplified to single divider feature
-} from './features';
-import { withAPI } from './api';
 import { DialogConfig, DialogComponent } from './types';
-import { createBaseConfig, getElementConfig, getApiConfig } from './config';
-
 /**
  * Creates a new Dialog component with the specified configuration.
- * 
+ *
  * Dialogs are modal windows that appear in front of app content to
  * provide critical information or ask for decisions. They inform
  * users about specific tasks and may contain critical information,
  * require decisions, or involve multiple tasks.
- * 
+ *
  * @param {DialogConfig} config - Configuration options for the dialog
  * @returns {DialogComponent} A fully configured dialog component instance
  * @throws {Error} Throws an error if dialog creation fails
- * 
+ *
  * @category Components
- * 
+ *
  * @example
  * // Create a basic dialog with title and content
  * const infoDialog = createDialog({
@@ -57,10 +40,10 @@ import { createBaseConfig, getElementConfig, getApiConfig } from './config';
  *     { text: 'OK', variant: 'text', closeDialog: true }
  *   ]
  * });
- * 
+ *
  * document.body.appendChild(infoDialog.element);
  * infoDialog.open();
- * 
+ *
  * @example
  * // Create a form dialog with multiple buttons
  * const formDialog = createDialog({
@@ -70,9 +53,9 @@ import { createBaseConfig, getElementConfig, getApiConfig } from './config';
  *   closeOnEscape: true,
  *   closeOnOverlayClick: false,
  *   buttons: [
- *     { 
- *       text: 'Save', 
- *       variant: 'filled', 
+ *     {
+ *       text: 'Save',
+ *       variant: 'filled',
  *       onClick: (event, dialog) => {
  *         const form = document.getElementById('profile-form');
  *         if(form.checkValidity()) {
@@ -84,7 +67,7 @@ import { createBaseConfig, getElementConfig, getApiConfig } from './config';
  *     { text: 'Cancel', variant: 'text', closeDialog: true }
  *   ]
  * });
- * 
+ *
  * @example
  * // Create a confirmation dialog using the Promise-based API
  * async function confirmAction() {
@@ -95,48 +78,12 @@ import { createBaseConfig, getElementConfig, getApiConfig } from './config';
  *     confirmText: 'Yes, proceed',
  *     cancelText: 'No, cancel'
  *   });
- *   
+ *
  *   if (confirmed) {
  *     // User clicked the confirm button
  *     performAction();
  *   }
  * }
  */
-const createDialog = (config: DialogConfig = {}): DialogComponent => {
-  const baseConfig = createBaseConfig(config);
-
-  try {
-    // Create the dialog through functional composition
-    // Each function in the pipe adds specific features to the component
-    const dialog = pipe(
-      createBase,                                  // Base component
-      withEvents(),                                // Event handling
-      withElement(getElementConfig(baseConfig)),   // DOM element
-      withStructure(baseConfig),                   // Dialog structure (overlay, header, content, footer)
-      withVisibility(),                            // Open/close functionality
-      withContent(),                               // Content management
-      withButtons(),                               // Footer buttons
-      withSize(),                                  // Size variants
-      withDivider(),                               // Header/content divider
-      withConfirm(),                               // Confirmation dialog helpers
-      withLifecycle(),                             // Lifecycle management
-      comp => withAPI(getApiConfig(comp))(comp)    // Public API
-    )(baseConfig);
-
-    // Register event handlers from config
-    if (baseConfig.on) {
-      Object.entries(baseConfig.on).forEach(([event, handler]) => {
-        if (typeof handler === 'function') {
-          dialog.on(event, handler);
-        }
-      });
-    }
-
-    return dialog;
-  } catch (error) {
-    console.error('Dialog creation error:', error);
-    throw new Error(`Failed to create dialog: ${(error as Error).message}`);
-  }
-};
-
-export default createDialog;
+declare const createDialog: (config?: DialogConfig) => DialogComponent;
+export default createDialog;

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

@@ -0,0 +1,37 @@
+import { DialogConfig } from './types';
+/**
+ * Creates the dialog DOM structure with proper divider handling
+ * @param config Dialog configuration
+ * @returns Component enhancer with DOM structure
+ */
+export declare const withStructure: (config: DialogConfig) => (component: any) => any;
+/**
+ * Add methods to manage dividers
+ * @returns Component enhancer with divider management features
+ */
+export declare const withDivider: () => (component: any) => any;
+/**
+ * Add visibility control to dialog
+ * @returns Component enhancer with visibility features
+ */
+export declare const withVisibility: () => (component: any) => any;
+/**
+ * Adds content management features to dialog
+ * @returns Component enhancer with content features
+ */
+export declare const withContent: () => (component: any) => any;
+/**
+ * Adds button management features to dialog
+ * @returns Component enhancer with button features
+ */
+export declare const withButtons: () => (component: any) => any;
+/**
+ * Adds size management features to dialog
+ * @returns Component enhancer with size features
+ */
+export declare const withSize: () => (component: any) => any;
+/**
+ * Adds confirmation dialog features
+ * @returns Component enhancer with confirm feature
+ */
+export declare const withConfirm: () => (component: any) => any;

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

@@ -0,0 +1,14 @@
+/**
+ * Dialog Component Module
+ *
+ * A Material Design 3 dialog implementation with support for multiple sizes,
+ * animations, content types, and interactive features like confirmation.
+ *
+ * Dialogs inform users about critical information, require decisions,
+ * or involve multiple tasks.
+ *
+ * @module components/dialog
+ * @category Components
+ */
+export { default } from './dialog';
+export { DialogConfig, DialogComponent, DialogButton, DialogEvent, DialogConfirmOptions, DialogSize, DialogAnimation, DialogFooterAlignment, DialogEventType } from './types';