mtrl 0.2.6 → 0.2.8

package/src/components/slider/types.ts

@@ -1,8 +1,23 @@
 // src/components/slider/types.ts
-import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './constants';
 
 /**
- * Configuration interface for the Slider component
+ * Available slider color variants
+ */
+export type SliderColor = 'primary' | 'secondary' | 'tertiary' | 'error';
+
+/**
+ * Available slider size variants
+ */
+export type SliderSize = 'small' | 'medium' | 'large';
+
+/**
+ * Available slider event types
+ */
+export type SliderEventType = 'change' | 'input' | 'focus' | 'blur' | 'start' | 'end';
+
+/**
+ * Configuration options for the slider component
+ * @interface SliderConfig
  */
 export interface SliderConfig {
   /** Minimum value of the slider */
@@ -14,7 +29,7 @@ export interface SliderConfig {
   /** Current value of the slider */
   value?: number;
   
-  /** Secondary value for range slider (when using two thumbs) */
+  /** Secondary value for range slider (when using two handles) */
   secondValue?: number;
   
   /** Step size for discrete slider */
@@ -24,10 +39,10 @@ export interface SliderConfig {
   disabled?: boolean;
   
   /** Color variant of the slider */
-  color?: keyof typeof SLIDER_COLORS | typeof SLIDER_COLORS[keyof typeof SLIDER_COLORS];
+  color?: SliderColor;
   
   /** Size variant of the slider */
-  size?: keyof typeof SLIDER_SIZES | typeof SLIDER_SIZES[keyof typeof SLIDER_SIZES];
+  size?: SliderSize;
   
   /** Whether to show tick marks */
   ticks?: boolean;
@@ -41,46 +56,60 @@ export interface SliderConfig {
   /** Whether to snap to steps while dragging (discrete slider) */
   snapToSteps?: boolean;
   
-  /** Whether the slider is a range slider (two thumbs) */
+  /** Whether the slider is a range slider (two handles) */
   range?: boolean;
   
+  /** Label text for the slider */
+  label?: string;
+  
+  /** Position of the label (start or end) - defaults to 'start' */
+  labelPosition?: 'start' | 'end';
+  
+  /** Icon to display with the slider */
+  icon?: string;
+  
+  /** Position of the icon (start or end) */
+  iconPosition?: 'start' | 'end';
+  
   /** Additional CSS classes */
   class?: string;
   
   /** Event handlers for slider events */
   on?: {
-    [key in keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS]]?: (event: SliderEvent) => void;
+    [key in SliderEventType]?: (event: SliderEvent) => void;
   };
 }
 
 /**
- * Slider event object
+ * Slider event data
+ * @interface SliderEvent
  */
 export interface SliderEvent {
-  /** Slider component instance */
-  slider: SliderComponent;
+  /** The slider component that triggered the event */
+  slider: any;
   
   /** Current slider value */
   value: number;
   
-  /** Secondary slider value (for range slider) */
-  secondValue?: number;
+  /** Secondary value (for range sliders) */
+  secondValue: number | null;
   
-  /** Original event if applicable */
-  originalEvent?: Event;
+  /** Original DOM event if available */
+  originalEvent: Event | null;
   
-  /** Whether to prevent the default action */
+  /** Function to prevent default behavior */
   preventDefault: () => void;
   
-  /** Whether default action was prevented */
+  /** Whether default behavior was prevented */
   defaultPrevented: boolean;
 }
 
 /**
- * Slider component interface
+ * Slider component public API interface
+ * @interface SliderComponent
  */
 export interface SliderComponent {
-  /** Slider element */
+  /** The root element of the slider */
   element: HTMLElement;
   
   /** Sets slider value */
@@ -95,16 +124,16 @@ export interface SliderComponent {
   /** Gets secondary slider value */
   getSecondValue: () => number | null;
   
-  /** Sets slider minimum */
+  /** Sets slider minimum value */
   setMin: (min: number) => SliderComponent;
   
-  /** Gets slider minimum */
+  /** Gets slider minimum value */
   getMin: () => number;
   
-  /** Sets slider maximum */
+  /** Sets slider maximum value */
   setMax: (max: number) => SliderComponent;
   
-  /** Gets slider maximum */
+  /** Gets slider maximum value */
   getMax: () => number;
   
   /** Sets slider step size */
@@ -123,13 +152,13 @@ export interface SliderComponent {
   isDisabled: () => boolean;
   
   /** Sets slider color */
-  setColor: (color: keyof typeof SLIDER_COLORS | typeof SLIDER_COLORS[keyof typeof SLIDER_COLORS]) => SliderComponent;
+  setColor: (color: SliderColor) => SliderComponent;
   
   /** Gets slider color */
   getColor: () => string;
   
   /** Sets slider size */
-  setSize: (size: keyof typeof SLIDER_SIZES | typeof SLIDER_SIZES[keyof typeof SLIDER_SIZES]) => SliderComponent;
+  setSize: (size: SliderSize) => SliderComponent;
   
   /** Gets slider size */
   getSize: () => string;
@@ -140,11 +169,23 @@ export interface SliderComponent {
   /** Shows or hides current value while dragging */
   showCurrentValue: (show: boolean) => SliderComponent;
   
+  /** Sets label text */
+  setLabel: (text: string) => SliderComponent;
+  
+  /** Gets label text */
+  getLabel: () => string;
+  
+  /** Sets icon HTML */
+  setIcon: (iconHtml: string) => SliderComponent;
+  
+  /** Gets icon HTML */
+  getIcon: () => string;
+  
   /** Adds event listener */
-  on: (event: keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) => SliderComponent;
+  on: (event: SliderEventType, handler: (event: SliderEvent) => void) => SliderComponent;
   
   /** Removes event listener */
-  off: (event: keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) => SliderComponent;
+  off: (event: SliderEventType, handler: (event: SliderEvent) => void) => SliderComponent;
   
   /** Destroys the slider component and cleans up resources */
   destroy: () => void;

package/src/components/snackbar/config.ts

@@ -5,14 +5,13 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { SnackbarConfig, BaseComponent, ApiOptions } from './types';
-import { SNACKBAR_VARIANTS, SNACKBAR_POSITIONS } from './constants';
 
 /**
  * Default configuration for the Snackbar component
  */
 export const defaultConfig: SnackbarConfig = {
-  variant: SNACKBAR_VARIANTS.BASIC,
-  position: SNACKBAR_POSITIONS.CENTER,
+  variant: 'basic',
+  position: 'center',
   duration: 4000
 };
 

package/src/components/snackbar/constants.ts

@@ -17,38 +17,6 @@ export const SNACKBAR_POSITIONS = {
   END: 'end'
 } as const;
 
-/**
- * Validation schema for snackbar configuration
- */
-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;
-
 /**
  * Snackbar state classes
  */

package/src/components/snackbar/index.ts

@@ -1,4 +1,3 @@
 // src/components/snackbar/index.ts
 export { default } from './snackbar'
-export { SNACKBAR_VARIANTS, SNACKBAR_POSITIONS } from './constants'
 export { SnackbarConfig, SnackbarComponent } from './types'

package/src/components/snackbar/position.ts

@@ -1,7 +1,15 @@
 // src/components/snackbar/position.ts
-import { SNACKBAR_POSITIONS } from './constants';
 import { BaseComponent } from './types';
 
+/**
+ * Snackbar display positions
+ */
+const SNACKBAR_POSITIONS = {
+  CENTER: 'center',
+  START: 'start',
+  END: 'end'
+}
+
 /**
  * Position configuration for the withPosition function
  */

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/features.ts

@@ -282,12 +282,14 @@ export const withIndicator = <T extends IndicatorFeatureConfig>(config: T) =>
     const indicator: TabIndicator = createTabIndicator({
       prefix: config.prefix,
       // Support both new and legacy config
-      widthStrategy: indicatorConfig.widthStrategy || config.indicatorWidthStrategy || 'fixed',
+      widthStrategy: indicatorConfig.widthStrategy || config.indicatorWidthStrategy || 'auto', // Changed default to 'auto'
       height: indicatorConfig.height || config.indicatorHeight || 3,
       fixedWidth: indicatorConfig.fixedWidth || 40,
       animationDuration: indicatorConfig.animationDuration || 250,
       animationTiming: indicatorConfig.animationTiming || 'cubic-bezier(0.4, 0, 0.2, 1)',
-      color: indicatorConfig.color
+      color: indicatorConfig.color,
+      // Pass the tabs variant to the indicator
+      variant: config.variant || 'primary'
     });
     
     // Find the scroll container and add the indicator to it

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,