mtrl 0.0.0

package/src/core/state/disabled.js

@@ -0,0 +1,14 @@
+// src/core/state/disabled.js
+export const createDisabled = (element) => {
+  return {
+    enable() {
+      element.disabled = false
+      return this
+    },
+    
+    disable() {
+      element.disabled = true
+      return this
+    }
+  }
+}

package/src/core/state/emitter.js

@@ -0,0 +1,63 @@
+// src/core/state/emitter.js
+/**
+ * @module core/state
+ */
+
+/**
+ * Creates an event emitter with subscription management
+ * @memberof module:core/state
+ * @function createEmitter
+ * @returns {Object} Event emitter interface
+ * @property {Function} on - Subscribe to an event
+ * @property {Function} off - Unsubscribe from an event
+ * @property {Function} emit - Emit an event
+ * @property {Function} clear - Clear all subscriptions
+ * @example
+ * const emitter = createEmitter()
+ * const unsubscribe = emitter.on('change', (data) => console.log(data))
+ * emitter.emit('change', { value: 42 })
+ * unsubscribe()
+ */
+export const createEmitter = () => {
+  const events = new Map()
+
+  return {
+    /**
+     * Subscribe to an event
+     * @param {string} event - Event name
+     * @param {Function} callback - Event handler
+     * @returns {Function} Unsubscribe function
+     */
+    on: (event, callback) => {
+      const callbacks = events.get(event) || []
+      events.set(event, [...callbacks, callback])
+
+      return () => {
+        const callbacks = events.get(event) || []
+        events.set(event, callbacks.filter(cb => cb !== callback))
+      }
+    },
+
+    off (event, callback) {
+      const callbacks = events.get(event) || []
+      events.set(event, callbacks.filter(cb => cb !== callback))
+    },
+
+    /**
+     * Emit an event
+     * @param {string} event - Event name
+     * @param {...any} args - Event arguments
+     */
+    emit: (event, ...args) => {
+      const callbacks = events.get(event) || []
+      callbacks.forEach(cb => cb(...args))
+    },
+
+    /**
+     * Clear all event listeners
+     */
+    clear: () => {
+      events.clear()
+    }
+  }
+}

package/src/core/state/events.js

@@ -0,0 +1,29 @@
+// src/core/state/events.js
+export const createEventManager = (element) => {
+  const handlers = new Map()
+
+  return {
+    on (event, handler) {
+      element.addEventListener(event, handler)
+      handlers.set(handler, event)
+      return this
+    },
+
+    off (event, handler) {
+      element.removeEventListener(event, handler)
+      handlers.delete(handler)
+      return this
+    },
+
+    destroy () {
+      handlers.forEach((event, handler) => {
+        element.removeEventListener(event, handler)
+      })
+      handlers.clear()
+    },
+
+    getHandlers () {
+      return handlers
+    }
+  }
+}

package/src/core/state/index.js

@@ -0,0 +1,6 @@
+// src/core/state/index.js
+export { createEmitter } from './state/emitter'
+export { createStore } from './store'
+export { createLifecycle } from './lifecycle'
+export { createDisabled } from './disabled'
+export { createEventManager } from './events'

package/src/core/state/lifecycle.js

@@ -0,0 +1,64 @@
+// src/core/state/lifecycle.js
+import { createEmitter } from './emitter'
+
+export const createLifecycle = (element, managers = {}) => {
+  let mounted = false
+  const emitter = createEmitter()
+
+  return {
+    // Mount/Unmount state management
+    onMount: (handler) => emitter.on('mount', handler),
+    onUnmount: (handler) => emitter.on('unmount', handler),
+    
+    mount: () => {
+      if (!mounted) {
+        mounted = true
+        emitter.emit('mount')
+      }
+    },
+
+    unmount: () => {
+      if (mounted) {
+        mounted = false
+        emitter.emit('unmount')
+        emitter.clear()
+      }
+    },
+
+    isMounted: () => mounted,
+
+    // Cleanup and destruction
+    destroy() {
+      // First trigger unmount
+      if (mounted) {
+        this.unmount()
+      }
+
+      // Clean up all event listeners
+      if (managers.events) {
+        managers.events.destroy()
+      }
+      
+      // Clean up text element
+      if (managers.text) {
+        const textElement = managers.text.getElement()
+        if (textElement) {
+          textElement.remove()
+        }
+      }
+      
+      // Clean up icon element
+      if (managers.icon) {
+        const iconElement = managers.icon.getElement()
+        if (iconElement) {
+          iconElement.remove()
+        }
+      }
+      
+      // Remove the main element
+      if (element) {
+        element.remove()
+      }
+    }
+  }
+}

package/src/core/state/store.js

@@ -0,0 +1,112 @@
+// src/core/state/store.js
+import { createEmitter } from './emitter'
+
+/**
+ * Creates a state store with support for derived state and middleware
+ * @template T
+ * @param {T} initialState - Initial state object
+ * @param {Object} [options] - Store options
+ * @param {Function[]} [options.middleware] - Middleware functions
+ * @returns {Object} State store interface
+ */
+export const createStore = (initialState = {}, options = {}) => {
+  let state = { ...initialState }
+  const emitter = createEmitter()
+  const derivedStates = new Map()
+  const middleware = options.middleware || []
+
+  const notifyListeners = (newState, oldState) => {
+    emitter.emit('change', newState, oldState)
+  }
+
+  const applyMiddleware = (newState, oldState) => {
+    return middleware.reduce((state, fn) => fn(state, oldState), newState)
+  }
+
+  return {
+    /**
+     * Get current state including derived values
+     * @returns {T} Current state
+     */
+    getState: () => {
+      const derivedValues = {}
+      derivedStates.forEach((compute, key) => {
+        derivedValues[key] = compute(state)
+      })
+      return { ...state, ...derivedValues }
+    },
+
+    /**
+     * Update state
+     * @param {Object|Function} update - State update or updater function
+     */
+    setState: (update) => {
+      const oldState = { ...state }
+      const newState = typeof update === 'function' 
+        ? update(state)
+        : { ...state, ...update }
+
+      state = applyMiddleware(newState, oldState)
+      notifyListeners(state, oldState)
+    },
+
+    /**
+     * Subscribe to state changes
+     * @param {Function} listener - Change listener
+     * @returns {Function} Unsubscribe function
+     */
+    subscribe: (listener) => emitter.on('change', listener),
+
+    /**
+     * Create a derived state value
+     * @param {string} key - Derived state key
+     * @param {Function} computation - Function to compute derived value
+     * @returns {Function} Function to remove derived state
+     */
+    derive: (key, computation) => {
+      derivedStates.set(key, computation)
+      return () => {
+        derivedStates.delete(key)
+      }
+    },
+
+    /**
+     * Select a specific slice of state
+     * @param {Function} selector - State selector function
+     * @returns {any} Selected state
+     */
+    select: (selector) => selector(state),
+
+    /**
+     * Reset state to initial values
+     */
+    reset: () => {
+      state = { ...initialState }
+      notifyListeners(state, null)
+    }
+  }
+}
+
+// Example middleware
+export const loggingMiddleware = (newState, oldState) => {
+  console.log('State change:', { 
+    old: oldState, 
+    new: newState, 
+    diff: Object.keys(newState).reduce((acc, key) => {
+      if (newState[key] !== oldState[key]) {
+        acc[key] = { from: oldState[key], to: newState[key] }
+      }
+      return acc
+    }, {})
+  })
+  return newState
+}
+
+// Example derived state
+export const deriveFiltered = (predicate) => (state) => 
+  Object.keys(state).reduce((acc, key) => {
+    if (predicate(state[key], key)) {
+      acc[key] = state[key]
+    }
+    return acc
+  }, {})

package/src/core/utils/index.js

@@ -0,0 +1,39 @@
+// src/core/utils/index.js
+
+export { isObject, byString } from './object'
+
+/**
+ * Normalizes class names by handling various input formats
+ * @param {...(string|string[])} classes - Classes to normalize
+ * @returns {string[]} Array of unique, non-empty class names
+ */
+export const normalizeClasses = (...classes) => {
+  return [...new Set(
+    classes
+      .flat()
+      .reduce((acc, cls) => {
+        if (typeof cls === 'string') {
+          // Split space-separated classes and add them individually
+          acc.push(...cls.split(/\s+/))
+        }
+        return acc
+      }, [])
+      .filter(Boolean) // Remove empty strings
+  )]
+}
+
+/**
+ * Creates a transformer that only runs if a condition is met
+ * @param {Function} predicate - Condition to check
+ * @param {Function} transformer - Transformer to run if condition is true
+ * @returns {Function} Conditional transformer
+ */
+export const when = (predicate, transformer) => (obj, context) =>
+  predicate(obj, context) ? transformer(obj, context) : obj
+
+/**
+ * Joins class names, filtering out falsy values
+ * @param {...string} classes - Class names to join
+ * @returns {string} Joined class names
+ */
+export const classNames = (...classes) => classes.filter(Boolean).join(' ')

package/src/core/utils/mobile.js

@@ -0,0 +1,74 @@
+// src/core/utils/mobile.js
+
+/**
+ * Mobile device detection and capability checks
+ * This provides a centralized way to handle mobile-specific features and behaviors
+ */
+
+/**
+ * Detects if the current device is likely a mobile device
+ * Uses a combination of user agent and screen size checks for reliability
+ */
+export const isMobileDevice = () => {
+  const userAgent = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  )
+  const screenSize = window.innerWidth <= 768
+  return userAgent || screenSize
+}
+
+export const PASSIVE_EVENTS = { passive: true }
+
+/**
+ * Configuration constants for mobile interactions
+ * Following WCAG guidelines and touch interaction best practices
+ */
+export const TOUCH_CONFIG = {
+  TARGET_SIZE: 44, // Minimum touch target size in pixels (WCAG standard)
+  FEEDBACK_DURATION: 200, // Duration of touch feedback animation in ms
+  TAP_THRESHOLD: 250, // Maximum duration for a touch to be considered a tap
+  SWIPE_THRESHOLD: 50 // Minimum distance for a touch to be considered a swipe
+}
+
+/**
+ * Accessibility-minded touch target sizes
+ * Based on WCAG guidelines for touch targets
+ */
+export const TOUCH_TARGETS = {
+  MINIMUM: 44, // Minimum recommended size in pixels
+  COMFORTABLE: 48, // Comfortable touch target size
+  LARGE: 56 // Large touch target for primary actions
+}
+
+/**
+ * Default passive event configuration for touch events
+ * Improves scroll performance on mobile devices
+ */
+
+/**
+ * Detects if the current device supports touch events
+ */
+export const hasTouchSupport = () => {
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0
+}
+
+/**
+ * Normalizes both mouse and touch events into a consistent format
+ * This allows components to handle interactions uniformly
+ */
+export const normalizeEvent = (event) => {
+  if (event.touches) {
+    const touch = event.touches[0]
+    return {
+      clientX: touch.clientX,
+      clientY: touch.clientY,
+      pageX: touch.pageX,
+      pageY: touch.pageY,
+      target: event.target,
+      preventDefault: () => event.preventDefault(),
+      stopPropagation: () => event.stopPropagation(),
+      type: event.type
+    }
+  }
+  return event
+}

package/src/core/utils/object.js

@@ -0,0 +1,22 @@
+const isObject = (object) => {
+  return object &&
+    typeof object === 'object' &&
+    Object.getPrototypeOf(object) === Object.getPrototypeOf({})
+}
+
+const byString = (o, s) => {
+  s = s.replace(/\[(\w+)\]/g, '.$1') // convert indexes to properties
+  s = s.replace(/^\./, '') // strip a leading dot
+  const a = s.split('.')
+  for (let i = 0, n = a.length; i < n; ++i) {
+    const k = a[i]
+    if (k in o) {
+      o = o[k]
+    } else {
+      return
+    }
+  }
+  return o
+}
+
+export { isObject, byString }

package/src/core/utils/validate.js

@@ -0,0 +1,37 @@
+// src/core/utils/validate.js
+
+/**
+ * Validates configuration object against schema
+ * @param {Object} config - Configuration to validate
+ * @param {Object} schema - Validation schema
+ * @throws {Error} If validation fails
+ */
+export const validateConfig = (config, schema) => {
+  const errors = []
+
+  Object.entries(schema).forEach(([key, rule]) => {
+    // Check required fields
+    if (rule.required && !config[key]) {
+      errors.push(`Missing required field: ${key}`)
+    }
+
+    // Check type if value exists
+    if (config[key] !== undefined && rule.type) {
+      const type = typeof config[key]
+      if (type !== rule.type) {
+        errors.push(`Invalid type for ${key}: expected ${rule.type}, got ${type}`)
+      }
+    }
+
+    // Check allowed values if specified
+    if (config[key] !== undefined && rule.enum) {
+      if (!rule.enum.includes(config[key])) {
+        errors.push(`Invalid value for ${key}. Must be one of: ${rule.enum.join(', ')}`)
+      }
+    }
+  })
+
+  if (errors.length > 0) {
+    throw new Error(`Configuration validation failed:\n${errors.join('\n')}`)
+  }
+}

package/src/index.js

@@ -0,0 +1,11 @@
+// src/index.js
+export { createElement } from './core/dom/create'
+export { default as createLayout } from './core/layout'
+export { default as createButton } from './components/button'
+export { default as createCheckbox } from './components/checkbox'
+export { default as createTextfield } from './components/textfield'
+export { default as createSwitch } from './components/switch'
+export { default as createContainer } from './components/container'
+export { default as createSnackbar } from './components/snackbar'
+export { default as createNavigation } from './components/navigation'
+export { default as createList } from './components/list'

package/src/styles/abstract/_base.scss

@@ -0,0 +1,2 @@
+// src/styles/abstract/_base.scss
+$prefix: 'mtrl';

package/src/styles/abstract/_config.scss

@@ -0,0 +1,28 @@
+// src/styles/abstract/_config.scss
+@use 'variables' as *;
+@forward 'variables';
+@forward 'functions';
+@forward 'mixins' show 
+  typography,
+  state-layer,
+  elevation,
+  motion-transition,
+  motion-exit,
+  motion-enter,
+  focus-ring,
+  interactive-states,
+  flex-center,
+  center-content,
+  container,
+  truncate,
+  shape,
+  breakpoint-up,
+  breakpoint-down,
+  breakpoint-between,
+  visually-hidden,
+  reduced-motion,
+  high-contrast,
+  rtl,
+  touch-target,
+  custom-scrollbar,
+  print;

package/src/styles/abstract/_functions.scss

@@ -0,0 +1,124 @@
+// src/styles/abstract/_functions.scss
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:color';
+@use 'variables' as v;
+
+// Get nested map value
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map.get($map, $key);
+  }
+  @return $map;
+}
+
+// Get value from design tokens
+@function get-token($category, $token) {
+  $token-map: null;
+  
+  @if $category == 'state' {
+    $token-map: v.$state;
+  } @else if $category == 'motion' {
+    $token-map: v.$motion;
+  } @else if $category == 'elevation' {
+    $token-map: v.$elevation;
+  } @else if $category == 'typescale' {
+    $token-map: v.$typescale;
+  } @else if $category == 'shape' {
+    $token-map: v.$shape;
+  } @else if $category == 'z-index' {
+    $token-map: v.$z-index;
+  }
+  
+  @if not $token-map {
+    @error 'Unknown token category: #{$category}';
+  }
+  
+  $value: map.get($token-map, $token);
+  
+  @if not $value {
+    @error 'Unknown token: #{$token} in category #{$category}';
+  }
+  
+  @return $value;
+}
+
+// State Layer
+@function get-state-opacity($state) {
+  @return get-token('state', '#{$state}-state-layer-opacity');
+}
+
+// Motion
+@function get-motion-duration($duration) {
+  @return get-token('motion', 'duration-#{$duration}');
+}
+
+@function get-motion-easing($easing) {
+  @return get-token('motion', 'easing-#{$easing}');
+}
+
+// Elevation
+@function get-elevation($level) {
+  @return get-token('elevation', 'level-#{$level}');
+}
+
+// Typography
+@function get-typography($scale) {
+  @return get-token('typescale', $scale);
+}
+
+// Shape
+@function get-shape($size) {
+  @return get-token('shape', $size);
+}
+
+// Z-index
+@function get-z-index($layer) {
+  @return get-token('z-index', $layer);
+}
+
+// Breakpoints
+@function get-breakpoint($size) {
+  @return map.get(v.$breakpoints, $size);
+}
+
+// Color utilities
+@function get-luminance($color) {
+  $red: color.red($color);
+  $green: color.green($color);
+  $blue: color.blue($color);
+  
+  $luminance: ($red * 0.299 + $green * 0.587 + $blue * 0.114) / 255;
+  @return $luminance;
+}
+
+@function is-light-color($color) {
+  @return get-luminance($color) > 0.6;
+}
+
+@function get-contrast-color($color, $light: #fff, $dark: #000) {
+  @return if(is-light-color($color), $dark, $light);
+}
+
+// Unit conversion utilities
+@function strip-unit($number) {
+  @if type-of($number) == 'number' and not unitless($number) {
+    @return math.div($number, ($number * 0 + 1));
+  }
+  @return $number;
+}
+
+@function to-rem($size, $base-size: 16px) {
+  $rem-size: math.div(strip-unit($size), strip-unit($base-size));
+  @return #{$rem-size}rem;
+}
+
+@function to-em($size, $base-size: 16px) {
+  $em-size: math.div(strip-unit($size), strip-unit($base-size));
+  @return #{$em-size}em;
+}
+
+// Value constraint utility
+@function constrain($min, $value, $max) {
+  @return max($min, min($value, $max));
+}