mtrl 0.2.3 → 0.2.5

package/src/components/slider/index.ts

@@ -1,9 +1,19 @@
 // src/components/slider/index.ts
+
+// Export main component creator
 export { default } from './slider';
+
+// Export constants
 export { 
   SLIDER_COLORS, 
   SLIDER_SIZES, 
   SLIDER_ORIENTATIONS, 
   SLIDER_EVENTS 
 } from './constants';
-export { SliderConfig, SliderComponent, SliderEvent } from './types';
+
+// Export types for TypeScript users
+export type { 
+  SliderConfig, 
+  SliderComponent, 
+  SliderEvent 
+} from './types';

package/src/components/slider/slider.ts

@@ -1,5 +1,5 @@
 // src/components/slider/slider.ts
-import { pipe } from '../../core/compose';
+import { pipe } from '../../core/compose/pipe';
 import { createBase, withElement } from '../../core/compose/component';
 import { withEvents, withLifecycle } from '../../core/compose/features';
 import { 

package/src/components/slider/types.ts

@@ -1,5 +1,5 @@
 // src/components/slider/types.ts
-import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_ORIENTATIONS, SLIDER_EVENTS } from './constants';
+import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './constants';
 
 /**
  * Configuration interface for the Slider component
@@ -24,26 +24,20 @@ export interface SliderConfig {
   disabled?: boolean;
   
   /** Color variant of the slider */
-  color?: keyof typeof SLIDER_COLORS | SLIDER_COLORS;
+  color?: keyof typeof SLIDER_COLORS | typeof SLIDER_COLORS[keyof typeof SLIDER_COLORS];
   
   /** Size variant of the slider */
-  size?: keyof typeof SLIDER_SIZES | SLIDER_SIZES;
-  
-  /** Orientation of the slider */
-  orientation?: keyof typeof SLIDER_ORIENTATIONS | SLIDER_ORIENTATIONS;
+  size?: keyof typeof SLIDER_SIZES | typeof SLIDER_SIZES[keyof typeof SLIDER_SIZES];
   
   /** Whether to show tick marks */
   ticks?: boolean;
   
-  /** Whether to show tick labels */
-  tickLabels?: boolean | string[];
+  /** Format function for displayed values */
+  valueFormatter?: (value: number) => string;
   
   /** Whether to show the current value while dragging */
   showValue?: boolean;
   
-  /** Format function for displayed values */
-  valueFormatter?: (value: number) => string;
-  
   /** Whether to snap to steps while dragging (discrete slider) */
   snapToSteps?: boolean;
   
@@ -55,7 +49,7 @@ export interface SliderConfig {
   
   /** Event handlers for slider events */
   on?: {
-    [key in keyof typeof SLIDER_EVENTS]?: (event: SliderEvent) => void;
+    [key in keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS]]?: (event: SliderEvent) => void;
   };
 }
 
@@ -129,37 +123,28 @@ export interface SliderComponent {
   isDisabled: () => boolean;
   
   /** Sets slider color */
-  setColor: (color: keyof typeof SLIDER_COLORS | SLIDER_COLORS) => SliderComponent;
+  setColor: (color: keyof typeof SLIDER_COLORS | typeof SLIDER_COLORS[keyof typeof SLIDER_COLORS]) => SliderComponent;
   
   /** Gets slider color */
   getColor: () => string;
   
   /** Sets slider size */
-  setSize: (size: keyof typeof SLIDER_SIZES | SLIDER_SIZES) => SliderComponent;
+  setSize: (size: keyof typeof SLIDER_SIZES | typeof SLIDER_SIZES[keyof typeof SLIDER_SIZES]) => SliderComponent;
   
   /** Gets slider size */
   getSize: () => string;
   
-  /** Sets slider orientation */
-  setOrientation: (orientation: keyof typeof SLIDER_ORIENTATIONS | SLIDER_ORIENTATIONS) => SliderComponent;
-  
-  /** Gets slider orientation */
-  getOrientation: () => string;
-  
   /** Shows or hides tick marks */
   showTicks: (show: boolean) => SliderComponent;
   
-  /** Shows or hides tick labels */
-  showTickLabels: (show: boolean | string[]) => SliderComponent;
-  
   /** Shows or hides current value while dragging */
   showCurrentValue: (show: boolean) => SliderComponent;
   
   /** Adds event listener */
-  on: (event: keyof typeof SLIDER_EVENTS | SLIDER_EVENTS, handler: (event: SliderEvent) => void) => SliderComponent;
+  on: (event: keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) => SliderComponent;
   
   /** Removes event listener */
-  off: (event: keyof typeof SLIDER_EVENTS | SLIDER_EVENTS, handler: (event: SliderEvent) => void) => SliderComponent;
+  off: (event: keyof typeof SLIDER_EVENTS | typeof SLIDER_EVENTS[keyof typeof SLIDER_EVENTS], handler: (event: SliderEvent) => void) => SliderComponent;
   
   /** Destroys the slider component and cleans up resources */
   destroy: () => void;

package/src/core/build/_ripple.scss

@@ -0,0 +1,79 @@
+// src/components/ripple/_ripple.scss
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-ripple';
+
+.#{$component} {
+  // Ripple container
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 0;
+  
+  // Ripple element
+  &-wave {
+    position: absolute;
+    border-radius: 50%;
+    background-color: currentColor;
+    transform: scale(0);
+    opacity: 0;
+    pointer-events: none;
+    will-change: transform, opacity;
+    
+    // Animation
+    transition-property: transform, opacity;
+    transition-duration: v.motion('duration-short4');
+    transition-timing-function: v.motion('easing-standard');
+    
+    // Active ripple
+    &.active {
+      transform: scale(1);
+      opacity: v.state('hover-state-layer-opacity');
+    }
+    
+    &.fade-out {
+      opacity: 0;
+    }
+  }
+}
+
+// Standalone utility for adding ripple to any element
+[data-ripple] {
+  position: relative;
+  overflow: hidden;
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+    pointer-events: none;
+  }
+  
+  // Handle ripple color based on data attribute
+  &[data-ripple="light"]::after {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+  
+  &[data-ripple="dark"]::after {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  
+  // Make content appear above ripple
+  > * {
+    position: relative;
+    z-index: 1;
+  }
+}

package/src/core/build/constants.ts

@@ -0,0 +1,48 @@
+// src/core/build/constants.ts
+
+/**
+ * Animation timing functions for ripple effect
+ */
+export enum RIPPLE_TIMING {
+  LINEAR = 'linear',
+  EASE = 'ease',
+  EASE_IN = 'ease-in',
+  EASE_OUT = 'ease-out',
+  EASE_IN_OUT = 'ease-in-out',
+  MATERIAL = 'cubic-bezier(0.4, 0.0, 0.2, 1)'
+}
+
+/**
+ * Default configuration for ripple effect
+ */
+export const RIPPLE_CONFIG = {
+  duration: 375,
+  timing: RIPPLE_TIMING.LINEAR,
+  opacity: ['1', '0.3'] as [string, string]
+};
+
+/**
+ * Validation schema for ripple configuration
+ */
+export const RIPPLE_SCHEMA = {
+  duration: {
+    type: 'number',
+    minimum: 0,
+    default: RIPPLE_CONFIG.duration
+  },
+  timing: {
+    type: 'string',
+    enum: Object.values(RIPPLE_TIMING),
+    default: RIPPLE_CONFIG.timing
+  },
+  opacity: {
+    type: 'array',
+    items: {
+      type: 'string',
+      pattern: '^[0-1](\\.\\d+)?$'
+    },
+    minItems: 2,
+    maxItems: 2,
+    default: RIPPLE_CONFIG.opacity
+  }
+};

package/src/core/build/icon.ts

@@ -0,0 +1,137 @@
+// src/core/build/icon.ts
+/**
+ * @module core/build
+ */
+
+/**
+ * Options for creating an icon element
+ */
+export interface IconElementOptions {
+  /**
+   * CSS class prefix
+   */
+  prefix?: string;
+  
+  /**
+   * Additional CSS class
+   */
+  class?: string;
+  
+  /**
+   * Icon size variant
+   */
+  size?: string;
+}
+
+/**
+ * Configuration for icon manager
+ */
+export interface IconConfig {
+  /**
+   * CSS class prefix
+   */
+  prefix?: string;
+  
+  /**
+   * Component type
+   */
+  type?: string;
+  
+  /**
+   * Icon position ('start' or 'end')
+   */
+  position?: 'start' | 'end';
+  
+  /**
+   * Icon size
+   */
+  iconSize?: string;
+}
+
+/**
+ * Icon manager interface
+ */
+export interface IconManager {
+  /**
+   * Sets icon HTML content
+   * @param html - Icon HTML content
+   * @returns IconManager instance for chaining
+   */
+  setIcon: (html: string) => IconManager;
+  
+  /**
+   * Gets current icon HTML content
+   * @returns Current icon HTML
+   */
+  getIcon: () => string;
+  
+  /**
+   * Gets icon element
+   * @returns Icon element or null if not created
+   */
+  getElement: () => HTMLElement | null;
+}
+
+/**
+ * Creates an icon DOM element
+ * 
+ * @param html - Icon HTML content
+ * @param options - Icon options
+ * @returns Icon element
+ * @private
+ */
+const createIconElement = (html: string, options: IconElementOptions = {}): HTMLElement => {
+  const PREFIX = options.prefix || 'mtrl';
+  const element = document.createElement('span');
+  element.className = `${PREFIX}-icon`;
+
+  if (options.class) {
+    element.classList.add(options.class);
+  }
+  if (options.size) {
+    element.classList.add(`${PREFIX}-icon--${options.size}`);
+  }
+
+  element.innerHTML = html;
+  return element;
+};
+
+/**
+ * Creates an icon manager for a component
+ * 
+ * @param element - Parent element
+ * @param config - Icon configuration
+ * @returns Icon manager interface
+ */
+export const createIcon = (element: HTMLElement, config: IconConfig = {}): IconManager => {
+  let iconElement: HTMLElement | null = null;
+  const PREFIX = config.prefix || 'mtrl';
+
+  return {
+    setIcon(html: string): IconManager {
+      if (!iconElement && html) {
+        iconElement = createIconElement(html, {
+          prefix: PREFIX,
+          class: `${PREFIX}-${config.type || 'component'}-icon`,
+          size: config.iconSize
+        });
+        if (config.position === 'end') {
+          element.appendChild(iconElement);
+        } else {
+          element.insertBefore(iconElement, element.firstChild);
+        }
+      } else if (iconElement && html) {
+        iconElement.innerHTML = html;
+      }
+      return this;
+    },
+
+    getIcon(): string {
+      return iconElement ? iconElement.innerHTML : '';
+    },
+
+    getElement(): HTMLElement | null {
+      return iconElement;
+    }
+  };
+};

package/src/core/build/ripple.ts

@@ -0,0 +1,216 @@
+// src/core/build/ripple.ts
+
+import { RIPPLE_CONFIG, RIPPLE_TIMING } from './constants';
+
+/**
+ * Ripple animation configuration
+ */
+export interface RippleConfig {
+  /**
+   * Animation duration in milliseconds
+   */
+  duration?: number;
+  
+  /**
+   * Animation timing function
+   */
+  timing?: string;
+  
+  /**
+   * Opacity start and end values
+   */
+  opacity?: [string, string];
+}
+
+/**
+ * End coordinates for ripple animation
+ */
+interface EndCoordinates {
+  size: string;
+  top: string;
+  left: string;
+}
+
+/**
+ * Document event listener
+ */
+interface DocumentListener {
+  event: string;
+  handler: EventListener;
+}
+
+/**
+ * Ripple controller interface
+ */
+export interface RippleController {
+  /**
+   * Attaches ripple effect to an element
+   * @param element - Target element
+   */
+  mount: (element: HTMLElement) => void;
+  
+  /**
+   * Removes ripple effect from an element
+   * @param element - Target element
+   */
+  unmount: (element: HTMLElement) => void;
+}
+
+/**
+ * Creates a ripple effect instance
+ * 
+ * @param config - Ripple configuration
+ * @returns Ripple controller instance
+ */
+export const createRipple = (config: RippleConfig = {}): RippleController => {
+  // Make sure we fully merge the config options
+  const options = {
+    ...RIPPLE_CONFIG,
+    ...config,
+    // Handle nested objects like opacity array
+    opacity: config.opacity || RIPPLE_CONFIG.opacity
+  };
+
+  const getEndCoordinates = (bounds: DOMRect): EndCoordinates => {
+    const size = Math.max(bounds.width, bounds.height);
+    const top = bounds.height > bounds.width
+      ? -bounds.height / 2
+      : -(bounds.width - bounds.height / 2);
+
+    return {
+      size: `${size * 2}px`,
+      top: `${top}px`,
+      left: `${size / -2}px`
+    };
+  };
+
+  const createRippleElement = (): HTMLDivElement => {
+    const ripple = document.createElement('div');
+    ripple.className = 'ripple';
+    // Initial styles already set in CSS
+    ripple.style.transition = `all ${options.duration}ms ${options.timing}`;
+    return ripple;
+  };
+
+  // Store document event listeners for cleanup
+  let documentListeners: DocumentListener[] = [];
+
+  // Safe document event handling
+  const addDocumentListener = (event: string, handler: EventListener): void => {
+    if (typeof document.addEventListener === 'function') {
+      document.addEventListener(event, handler);
+      documentListeners.push({ event, handler });
+    }
+  };
+
+  const removeDocumentListener = (event: string, handler: EventListener): void => {
+    if (typeof document.removeEventListener === 'function') {
+      document.removeEventListener(event, handler);
+      documentListeners = documentListeners.filter(
+        listener => !(listener.event === event && listener.handler === handler)
+      );
+    }
+  };
+
+  const animate = (event: MouseEvent, container: HTMLElement): void => {
+    if (!container) return;
+
+    const bounds = container.getBoundingClientRect();
+    const ripple = createRippleElement();
+
+    // Set initial position and state
+    Object.assign(ripple.style, {
+      left: `${event.offsetX || bounds.width / 2}px`,
+      top: `${event.offsetY || bounds.height / 2}px`,
+      transform: 'scale(0)',
+      opacity: options.opacity[0]
+    });
+
+    container.appendChild(ripple);
+
+    // Force reflow
+    // eslint-disable-next-line no-unused-expressions
+    ripple.offsetHeight;
+
+    // Animate to end position
+    const end = getEndCoordinates(bounds);
+    Object.assign(ripple.style, {
+      ...end,
+      transform: 'scale(1)',
+      opacity: options.opacity[1]
+    });
+
+    const cleanup = () => {
+      ripple.style.opacity = '0';
+
+      // Use setTimeout to remove element after animation
+      setTimeout(() => {
+        if (ripple.parentNode) {
+          ripple.parentNode.removeChild(ripple);
+        }
+      }, options.duration);
+
+      removeDocumentListener('mouseup', cleanup);
+      removeDocumentListener('mouseleave', cleanup);
+    };
+
+    addDocumentListener('mouseup', cleanup);
+    addDocumentListener('mouseleave', cleanup);
+  };
+
+  return {
+    mount: (element: HTMLElement): void => {
+      if (!element) return;
+
+      // Ensure proper positioning context
+      const currentPosition = window.getComputedStyle(element).position;
+      if (currentPosition === 'static') {
+        element.style.position = 'relative';
+      }
+      element.style.overflow = 'hidden';
+
+      // Store the mousedown handler to be able to remove it later
+      const mousedownHandler = (e: MouseEvent) => animate(e, element);
+
+      // Store handler reference on the element
+      if (!element.__rippleHandlers) {
+        element.__rippleHandlers = [];
+      }
+      element.__rippleHandlers.push(mousedownHandler);
+
+      element.addEventListener('mousedown', mousedownHandler);
+    },
+
+    unmount: (element: HTMLElement): void => {
+      if (!element) return;
+
+      // Clear document event listeners
+      documentListeners.forEach(({ event, handler }) => {
+        removeDocumentListener(event, handler);
+      });
+      documentListeners = [];
+
+      // Remove event listeners
+      if (element.__rippleHandlers) {
+        element.__rippleHandlers.forEach(handler => {
+          element.removeEventListener('mousedown', handler);
+        });
+        element.__rippleHandlers = [];
+      }
+
+      // Remove all ripple elements
+      const ripples = element.querySelectorAll('.ripple');
+      ripples.forEach(ripple => {
+        // Call remove directly to match the test expectation
+        ripple.remove();
+      });
+    }
+  };
+};
+
+// Extend the HTMLElement interface to add rippleHandlers property
+declare global {
+  interface HTMLElement {
+    __rippleHandlers?: Array<(e: MouseEvent) => void>;
+  }
+}

package/src/core/build/text.ts

@@ -0,0 +1,91 @@
+// src/core/build/text.ts
+/**
+ * @module core/build
+ */
+
+/**
+ * Configuration for text manager
+ */
+export interface TextConfig {
+  /**
+   * CSS class prefix
+   */
+  prefix?: string;
+  
+  /**
+   * Component type
+   */
+  type?: string;
+  
+  /**
+   * Element to insert before
+   */
+  beforeElement?: HTMLElement;
+}
+
+/**
+ * Text manager interface
+ */
+export interface TextManager {
+  /**
+   * Sets text content
+   * @param text - Text content to set
+   * @returns TextManager instance for chaining
+   */
+  setText: (text: string) => TextManager;
+  
+  /**
+   * Gets current text content
+   * @returns Current text
+   */
+  getText: () => string;
+  
+  /**
+   * Gets text element
+   * @returns Text element or null if not created
+   */
+  getElement: () => HTMLElement | null;
+}
+
+/**
+ * Creates a text manager for a component
+ * 
+ * @param element - Parent element
+ * @param config - Text configuration
+ * @returns Text manager interface
+ */
+export const createText = (element: HTMLElement, config: TextConfig = {}): TextManager => {
+  let textElement: HTMLElement | null = null;
+  const PREFIX = config.prefix || 'mtrl';
+
+  const createElement = (content: string): HTMLElement => {
+    const span = document.createElement('span');
+    span.className = `${PREFIX}-${config.type || 'component'}-text`;
+    span.textContent = content;
+    return span;
+  };
+
+  return {
+    setText(text: string): TextManager {
+      if (!textElement && text) {
+        textElement = createElement(text);
+        if (config.beforeElement) {
+          element.insertBefore(textElement, config.beforeElement);
+        } else {
+          element.appendChild(textElement);
+        }
+      } else if (textElement) {
+        textElement.textContent = text;
+      }
+      return this;
+    },
+
+    getText(): string {
+      return textElement ? textElement.textContent || '' : '';
+    },
+
+    getElement(): HTMLElement | null {
+      return textElement;
+    }
+  };
+};