mtrl 0.2.7 → 0.2.9

package/src/components/snackbar/types.ts

@@ -1,58 +1,134 @@
-// src/components/snackbar/constants.ts
+// src/components/snackbar/types.ts
 
 /**
- * Snackbar visual variants
+ * Available snackbar variants
  */
-export const SNACKBAR_VARIANTS = {
-  BASIC: 'basic',
-  ACTION: 'action' // With action button
-} as const;
+export type SnackbarVariant = 'basic' | 'action';
 
 /**
- * Snackbar display positions
+ * Available snackbar positions
  */
-export const SNACKBAR_POSITIONS = {
-  CENTER: 'center',
-  START: 'start',
-  END: 'end'
-} as const;
+export type SnackbarPosition = 'center' | 'start' | 'end';
 
 /**
- * Validation schema for snackbar configuration
+ * Snackbar visibility states
  */
-export const SNACKBAR_SCHEMA = {
-  variant: {
-    type: 'string',
-    enum: Object.values(SNACKBAR_VARIANTS),
-    required: false
-  },
-  position: {
-    type: 'string',
-    enum: Object.values(SNACKBAR_POSITIONS),
-    required: false
-  },
-  message: {
-    type: 'string',
-    required: true
-  },
-  action: {
-    type: 'string',
-    required: false
-  },
-  duration: {
-    type: 'number',
-    required: false
-  },
-  class: {
-    type: 'string',
-    required: false
-  }
-} as const;
+export type SnackbarState = 'visible' | 'hidden';
 
 /**
- * Snackbar state classes
+ * Available snackbar event types
  */
-export const SNACKBAR_STATES = {
-  VISIBLE: 'visible',
-  HIDDEN: 'hidden'
-} as const;
+export type SnackbarEventType = 'open' | 'close' | 'action';
+
+/**
+ * Snackbar event data
+ * @interface SnackbarEvent
+ */
+export interface SnackbarEvent {
+  /** The snackbar component that triggered the event */
+  snackbar: SnackbarComponent;
+  
+  /** Original DOM event if available */
+  originalEvent: Event | null;
+  
+  /** Function to prevent default behavior */
+  preventDefault: () => void;
+  
+  /** Whether default behavior was prevented */
+  defaultPrevented: boolean;
+}
+
+/**
+ * Configuration options for the snackbar component
+ * @interface SnackbarConfig
+ */
+export interface SnackbarConfig {
+  /** Visual variant of the snackbar */
+  variant?: SnackbarVariant;
+  
+  /** Position of the snackbar on screen */
+  position?: SnackbarPosition;
+  
+  /** Text message to display */
+  message: string;
+  
+  /** Action button text (for 'action' variant) */
+  action?: string;
+  
+  /** Duration in milliseconds to show the snackbar (0 for indefinite) */
+  duration?: number;
+  
+  /** Action button callback function */
+  onAction?: (event: SnackbarEvent) => void;
+  
+  /** Callback function when the snackbar opens */
+  onOpen?: (event: SnackbarEvent) => void;
+  
+  /** Callback function when the snackbar closes */
+  onClose?: (event: SnackbarEvent) => void;
+  
+  /** Additional CSS classes */
+  class?: string;
+  
+  /** Component prefix for CSS classes */
+  prefix?: string;
+  
+  /** Component name for CSS classes */
+  componentName?: string;
+  
+  /** Event handlers for snackbar events */
+  on?: {
+    [key in SnackbarEventType]?: (event: SnackbarEvent) => void;
+  };
+}
+
+/**
+ * Snackbar component public API interface
+ * @interface SnackbarComponent
+ */
+export interface SnackbarComponent {
+  /** The root element of the snackbar */
+  element: HTMLElement;
+  
+  /** Current state of the snackbar */
+  state: SnackbarState;
+  
+  /** Displays the snackbar */
+  show: () => SnackbarComponent;
+  
+  /** Hides the snackbar */
+  hide: () => SnackbarComponent;
+  
+  /** Sets the message text */
+  setMessage: (message: string) => SnackbarComponent;
+  
+  /** Gets the message text */
+  getMessage: () => string;
+  
+  /** Sets the action button text */
+  setAction: (text: string) => SnackbarComponent;
+  
+  /** Gets the action button text */
+  getAction: () => string;
+  
+  /** Sets the display duration */
+  setDuration: (duration: number) => SnackbarComponent;
+  
+  /** Gets the display duration */
+  getDuration: () => number;
+  
+  /** Sets the snackbar position */
+  setPosition: (position: SnackbarPosition) => SnackbarComponent;
+  
+  /** Gets the snackbar position */
+  getPosition: () => SnackbarPosition;
+  
+  /** Adds event listener */
+  on: (event: SnackbarEventType, handler: (event: SnackbarEvent) => void) => SnackbarComponent;
+  
+  /** Removes event listener */
+  off: (event: SnackbarEventType, handler: (event: SnackbarEvent) => void) => SnackbarComponent;
+  
+  /** Destroys the snackbar component and cleans up resources */
+  destroy: () => void;
+}

package/src/components/switch/config.ts

@@ -5,13 +5,12 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { SwitchConfig, BaseComponent, ApiOptions } from './types';
-import { SWITCH_LABEL_POSITION } from './constants';
 
 /**
  * Default configuration for the Switch component
  */
 export const defaultConfig: SwitchConfig = {
-  labelPosition: SWITCH_LABEL_POSITION.END
+  labelPosition: 'end'
 };
 
 /**
@@ -42,7 +41,7 @@ export const getElementConfig = (config: SwitchConfig) =>
 export const withLabelPosition = (config: SwitchConfig) => (component: BaseComponent): BaseComponent => {
   if (!config.label) return component;
 
-  const position = config.labelPosition || SWITCH_LABEL_POSITION.END;
+  const position = config.labelPosition || 'end';
   const positionClass = `${config.prefix}-switch--label-${position}`;
 
   component.element.classList.add(positionClass);

package/src/components/switch/index.ts

@@ -1,4 +1,3 @@
 // src/components/switch/index.ts
 export { default } from './switch'
-export { SWITCH_LABEL_POSITION } from './constants'
 export { SwitchConfig, SwitchComponent } from './types'

package/src/components/switch/types.ts

@@ -1,5 +1,6 @@
 // src/components/switch/types.ts
-import { SWITCH_LABEL_POSITION } from './constants';
+
+export type SwitchPosition = 'center' | 'start' | 'end';
 
 /**
  * Configuration interface for the Switch component
@@ -24,7 +25,7 @@ export interface SwitchConfig {
   label?: string;
   
   /** Label position (start/end) */
-  labelPosition?: keyof typeof SWITCH_LABEL_POSITION | string;
+  labelPosition?: SwitchPosition | string;
   
   /** Additional CSS classes */
   class?: string;

package/src/components/tabs/config.ts

@@ -6,13 +6,12 @@ import {
 } from '../../core/config/component-config';
 import { withElement } from '../../core/compose/component';
 import { TabConfig } from './types';
-import { TABS_VARIANTS, TAB_STATES } from './constants';
 
 /**
  * Default configuration for a Tab
  */
 export const defaultTabConfig: TabConfig = {
-  state: TAB_STATES.INACTIVE,
+  state: 'inactive',
   componentName: 'tab',
   ripple: true
 };
@@ -21,7 +20,7 @@ export const defaultTabConfig: TabConfig = {
  * Default configuration for the Tabs component
  */
 export const defaultTabsConfig = {
-  variant: TABS_VARIANTS.PRIMARY,
+  variant: 'primary',
   scrollable: true,
   showDivider: true,
   componentName: 'tabs'
@@ -48,7 +47,7 @@ export const getTabsElementConfig = (config) => {
     },
     className: [
       `${config.prefix}-tabs`,
-      `${config.prefix}-tabs--${config.variant || TABS_VARIANTS.PRIMARY}`,
+      `${config.prefix}-tabs--${config.variant || 'primary'}`,
       config.class
     ]
   };

package/src/components/tabs/index.ts

@@ -7,21 +7,6 @@ import { createTabsState } from './state';
 import { createTabIndicator } from './indicator';
 import { updateTabPanels, setupKeyboardNavigation } from './utils';
 
-export { 
-  // Main component creators
-  createTabs,
-  createTab,
-  
-  // Constants
-  TABS_VARIANTS, 
-  TAB_STATES, 
-  TAB_LAYOUT,
-  TAB_INTERACTION_STATES,
-  TAB_ANIMATION,
-  TAB_A11Y,
-  TAB_COLORS
-} from './constants';
-
 export { 
   // Types
   TabsConfig, 

package/src/components/tabs/tab-api.ts

@@ -1,9 +1,17 @@
 // src/components/tabs/tab-api.ts
 import { TabComponent } from './types';
-import { TAB_STATES, TAB_LAYOUT } from './constants';
 import { BadgeComponent } from '../badge/types';
 import createBadge from '../badge';
 
+const TAB_LAYOUT = {
+  /** Icon-only tab layout */
+  ICON_ONLY: 'icon-only',
+  /** Text-only tab layout */
+  TEXT_ONLY: 'text-only',
+  /** Icon and text layout */
+  ICON_AND_TEXT: 'icon-and-text'
+}
+
 /**
  * API options for a Tab component
  */
@@ -82,7 +90,7 @@ export const withTabAPI = ({ disabled, lifecycle, button }: ApiOptions) =>
        * Activates the tab
        */
       activate() {
-        component.element.classList.add(`${component.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        component.element.classList.add(`${component.getClass('tab')}--active`);
         component.element.setAttribute('aria-selected', 'true');
         return this;
       },
@@ -91,7 +99,7 @@ export const withTabAPI = ({ disabled, lifecycle, button }: ApiOptions) =>
        * Deactivates the tab
        */
       deactivate() {
-        component.element.classList.remove(`${component.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        component.element.classList.remove(`${component.getClass('tab')}--active`);
         component.element.setAttribute('aria-selected', 'false');
         return this;
       },
@@ -100,7 +108,7 @@ export const withTabAPI = ({ disabled, lifecycle, button }: ApiOptions) =>
        * Checks if the tab is active
        */
       isActive() {
-        return component.element.classList.contains(`${component.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        return component.element.classList.contains(`${component.getClass('tab')}--active`);
       },
       
       /**

package/src/components/tabs/tab.ts

@@ -8,6 +8,18 @@ import { createTabConfig } from './config';
 import createButton from '../button';
 import createBadge from '../badge';
 
+/**
+ * Tab layout types
+ */
+export const TAB_LAYOUT = {
+  /** Icon-only tab layout */
+  ICON_ONLY: 'icon-only',
+  /** Text-only tab layout */
+  TEXT_ONLY: 'text-only',
+  /** Icon and text layout */
+  ICON_AND_TEXT: 'icon-and-text'
+};
+
 /**
  * Creates a new Tab component following MD3 guidelines
  * @param {TabConfig} config - Tab configuration object
@@ -49,7 +61,7 @@ export const createTab = (config: TabConfig = {}): TabComponent => {
     // Set up tab accessibility attributes
     baseComponent.element.setAttribute('role', 'tab');
     baseComponent.element.setAttribute('aria-selected', 
-      baseConfig.state === TAB_STATES.ACTIVE ? 'true' : 'false');
+      baseConfig.state === 'active' ? 'true' : 'false');
     
     // For better accessibility
     if (baseConfig.value) {
@@ -58,8 +70,8 @@ export const createTab = (config: TabConfig = {}): TabComponent => {
     }
     
     // Add active state if specified in config
-    if (baseConfig.state === TAB_STATES.ACTIVE) {
-      baseComponent.element.classList.add(`${baseComponent.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+    if (baseConfig.state === 'active') {
+      baseComponent.element.classList.add(`${baseComponent.getClass('tab')}--active`);
     }
     
     // Forward button events to our component
@@ -95,7 +107,7 @@ export const createTab = (config: TabConfig = {}): TabComponent => {
       },
       
       activate() {
-        this.element.classList.add(`${this.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        this.element.classList.add(`${this.getClass('tab')}--active`);
         this.element.setAttribute('aria-selected', 'true');
         
         // Dispatch event for screen readers
@@ -109,13 +121,13 @@ export const createTab = (config: TabConfig = {}): TabComponent => {
       },
       
       deactivate() {
-        this.element.classList.remove(`${this.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        this.element.classList.remove(`${this.getClass('tab')}--active`);
         this.element.setAttribute('aria-selected', 'false');
         return this;
       },
       
       isActive() {
-        return this.element.classList.contains(`${this.getClass('tab')}--${TAB_STATES.ACTIVE}`);
+        return this.element.classList.contains(`${this.getClass('tab')}--active`);
       },
       
       enable() {

package/src/components/tabs/types.ts

@@ -1,8 +1,18 @@
 // src/components/tabs/types.ts
-import { TABS_VARIANTS, TAB_STATES, TAB_LAYOUT } from './constants';
 import { BadgeComponent } from '../badge/types';
 import { TabIndicator } from './indicator';
 
+/**
+ * Available tabs variants
+ */
+export type TabsVariant = 'primary' | 'secondary';
+
+/**
+ * Available tabs states
+ */
+
+export type TabStates = 'active' | 'inactive' | 'disabled';
+
 /**
  * Configuration for the tab indicator
  * @category Components
@@ -55,7 +65,7 @@ export interface TabConfig {
    * Tab state that determines if it's the active destination
    * @default 'inactive'
    */
-  state?: keyof typeof TAB_STATES | string;
+  state?: TabStates | string;
   
   /** 
    * Whether the tab is initially disabled
@@ -154,7 +164,7 @@ export interface TabsConfig {
    * Tabs variant (primary or secondary)
    * @default 'primary'
    */
-  variant?: keyof typeof TABS_VARIANTS | string;
+  variant?: TabsVariant | string;
   
   /**
    * Initial tabs to create

package/src/components/textfield/api.ts

@@ -1,6 +1,11 @@
 // src/components/textfield/api.ts
 import { BaseComponent, TextfieldComponent, ApiOptions } from './types';
 
+/**
+ * Enhances textfield component with API methods
+ * @param {ApiOptions} options - API configuration
+ * @returns {Function} Higher-order function that adds API methods to component
+ */
 /**
  * Enhances textfield component with API methods
  * @param {ApiOptions} options - API configuration
@@ -43,6 +48,54 @@ export const withAPI = ({ disabled, lifecycle }: ApiOptions) =>
     getLabel(): string {
       return component.label?.getText() || '';
     },
+    
+    // Leading icon management (if present)
+    leadingIcon: component.leadingIcon || null,
+    setLeadingIcon(html: string): TextfieldComponent {
+      if (component.setLeadingIcon) {
+        component.setLeadingIcon(html);
+      }
+      return this;
+    },
+    
+    removeLeadingIcon(): TextfieldComponent {
+      if (component.removeLeadingIcon) {
+        component.removeLeadingIcon();
+      }
+      return this;
+    },
+    
+    // Trailing icon management (if present)
+    trailingIcon: component.trailingIcon || null,
+    setTrailingIcon(html: string): TextfieldComponent {
+      if (component.setTrailingIcon) {
+        component.setTrailingIcon(html);
+      }
+      return this;
+    },
+    
+    removeTrailingIcon(): TextfieldComponent {
+      if (component.removeTrailingIcon) {
+        component.removeTrailingIcon();
+      }
+      return this;
+    },
+    
+    // Supporting text management (if present)
+    supportingTextElement: component.supportingTextElement || null,
+    setSupportingText(text: string, isError?: boolean): TextfieldComponent {
+      if (component.setSupportingText) {
+        component.setSupportingText(text, isError);
+      }
+      return this;
+    },
+    
+    removeSupportingText(): TextfieldComponent {
+      if (component.removeSupportingText) {
+        component.removeSupportingText();
+      }
+      return this;
+    },
 
     // Event handling
     on(event: string, handler: Function): TextfieldComponent {

package/src/components/textfield/config.ts

@@ -5,14 +5,13 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { TextfieldConfig, BaseComponent, ApiOptions } from './types';
-import { TEXTFIELD_VARIANTS, TEXTFIELD_TYPES } from './constants';
 
 /**
  * Default configuration for the Textfield component
  */
 export const defaultConfig: TextfieldConfig = {
-  type: TEXTFIELD_TYPES.TEXT,
-  variant: TEXTFIELD_VARIANTS.FILLED
+  type: 'text',
+  variant: 'filled'
 };
 
 /**