mtrl 0.1.3 → 0.2.0

package/src/core/compose/features/position.js

@@ -1,60 +0,0 @@
-// src/core/compose/features/position.js
-
-/**
- * Available position values
- */
-export const POSITIONS = {
-  LEFT: 'left',
-  RIGHT: 'right',
-  TOP: 'top',
-  BOTTOM: 'bottom',
-  START: 'start',
-  END: 'end',
-  CENTER: 'center'
-}
-
-/**
- * Adds positioning functionality to a component
- * @param {Object} config - Component configuration
- * @param {string} config.position - Position value
- * @param {string} [config.prefix='mtrl'] - CSS class prefix
- * @param {string} [config.componentName] - Component name for class generation
- * @returns {Function} Component transformer
- */
-export const withPosition = (config) => (component) => {
-  if (!config.position || !component.element) return component
-
-  const position = POSITIONS[config.position.toUpperCase()] || config.position
-  const className = `${config.prefix}-${config.componentName}--${position}`
-
-  component.element.classList.add(className)
-
-  return {
-    ...component,
-    position: {
-      /**
-       * Sets the component's position
-       * @param {string} newPosition - New position value
-       * @returns {Object} Component instance
-       */
-      setPosition (newPosition) {
-        const oldPosition = position
-        const oldClassName = `${config.prefix}-${config.componentName}--${oldPosition}`
-        const newClassName = `${config.prefix}-${config.componentName}--${newPosition}`
-
-        component.element.classList.remove(oldClassName)
-        component.element.classList.add(newClassName)
-
-        return this
-      },
-
-      /**
-       * Gets the current position
-       * @returns {string} Current position
-       */
-      getPosition () {
-        return position
-      }
-    }
-  }
-}

package/src/core/compose/features/ripple.js

@@ -1,32 +0,0 @@
-// src/core/compose/features/with-ripple.js
-
-import { createRipple } from '../../build/ripple'
-
-/**
- * Higher-order function that adds ripple effect functionality
- * @param {Object} config - Feature configuration
- * @param {boolean} [config.ripple] - Enable/disable ripple effect
- * @param {Object} [config.rippleConfig] - Ripple animation configuration
- * @returns {Function} Component enhancer
- */
-export const withRipple = (config = {}) => (component) => {
-  if (!config.ripple) return component
-
-  const rippleInstance = createRipple(config.rippleConfig)
-
-  return {
-    ...component,
-    ripple: rippleInstance,
-    lifecycle: {
-      ...component.lifecycle,
-      mount: () => {
-        component.lifecycle.mount()
-        rippleInstance.mount(component.element)
-      },
-      destroy: () => {
-        rippleInstance.unmount(component.element)
-        component.lifecycle.destroy()
-      }
-    }
-  }
-}

package/src/core/compose/features/size.js

@@ -1,9 +0,0 @@
-// src/core/compose/features/variant.js
-export const withSize = config => component => {
-  if (config.size && component.element) {
-    // Use config.componentName since we know it's there
-    const className = `${config.prefix}-${config.componentName}--${config.size}`
-    component.element.classList.add(className)
-  }
-  return component
-}

package/src/core/compose/features/style.js

@@ -1,12 +0,0 @@
-// src/core/compose/features/style.js
-export const withStyle = (config = {}) => (layout) => {
-  if (config.variant) {
-    layout.element.classList.add(`${layout.getClass('button')}--${config.variant}`)
-  }
-
-  if (config.size) {
-    layout.element.classList.add(`${layout.getClass('button')}--${config.size}`)
-  }
-
-  return layout
-}

package/src/core/compose/features/text.js

@@ -1,17 +0,0 @@
-import { createText } from '../../../core/build/text'
-
-export const withText = (config = {}) => (component) => {
-  const text = createText(component.element, {
-    prefix: config.prefix,
-    type: 'button'
-  })
-
-  if (config.text) {
-    text.setText(config.text)
-  }
-
-  return {
-    ...component,
-    text
-  }
-}

package/src/core/compose/features/textinput.js

@@ -1,114 +0,0 @@
-// src/core/compose/features/textinput.js
-/**
- * Enhances a component with text input functionality
- * @param {Object} config - Text input configuration
- * @param {string} [config.type] - Input type (text, password, etc.)
- * @param {boolean} [config.multiline] - Whether to use textarea
- * @returns {Function} Component enhancer
- */
-export const withTextInput = (config = {}) => (component) => {
-  const input = document.createElement(config.type === 'multiline' ? 'textarea' : 'input')
-  input.className = `${component.getClass('textfield')}-input`
-
-  // Set input attributes
-  const attributes = {
-    type: config.type === 'multiline' ? null : (config.type || 'text'),
-    name: config.name,
-    required: config.required,
-    disabled: config.disabled,
-    maxLength: config.maxLength,
-    pattern: config.pattern,
-    autocomplete: config.autocomplete,
-    value: config.value || ''
-  }
-
-  Object.entries(attributes).forEach(([key, value]) => {
-    if (value !== null && value !== undefined) {
-      input.setAttribute(key, value)
-    }
-  })
-
-  // Handle input state changes
-  const updateInputState = () => {
-    const isEmpty = !input.value
-    component.element.classList.toggle(`${component.getClass('textfield')}--empty`, isEmpty)
-    return isEmpty
-  }
-
-  // Detect autofill using input events instead of animation
-  // This is more compatible with our testing environment
-  const handleAutofill = () => {
-    // Check for webkit autofill background
-    const isAutofilled =
-      input.matches(':-webkit-autofill') ||
-      // For Firefox and other browsers
-      (window.getComputedStyle(input).backgroundColor === 'rgb(250, 255, 189)' ||
-       window.getComputedStyle(input).backgroundColor === 'rgb(232, 240, 254)')
-
-    if (isAutofilled) {
-      component.element.classList.remove(`${component.getClass('textfield')}--empty`)
-      component.emit('input', { value: input.value, isEmpty: false, isAutofilled: true })
-    }
-  }
-
-  // Event listeners
-  input.addEventListener('focus', () => {
-    component.element.classList.add(`${component.getClass('textfield')}--focused`)
-    component.emit('focus', { isEmpty: updateInputState() })
-    // Also check for autofill on focus
-    setTimeout(handleAutofill, 100)
-  })
-
-  input.addEventListener('blur', () => {
-    component.element.classList.remove(`${component.getClass('textfield')}--focused`)
-    component.emit('blur', { isEmpty: updateInputState() })
-  })
-
-  input.addEventListener('input', () => {
-    component.emit('input', {
-      value: input.value,
-      isEmpty: updateInputState(),
-      isAutofilled: false
-    })
-  })
-
-  // Initial state
-  updateInputState()
-
-  component.element.appendChild(input)
-
-  // Cleanup
-  if (component.lifecycle) {
-    const originalDestroy = component.lifecycle.destroy
-    component.lifecycle.destroy = () => {
-      input.remove()
-      if (originalDestroy) {
-        originalDestroy.call(component.lifecycle)
-      }
-    }
-  }
-
-  return {
-    ...component,
-    input,
-    setValue (value) {
-      input.value = value || ''
-      updateInputState()
-      return this
-    },
-    getValue () {
-      return input.value
-    },
-    setAttribute (name, value) {
-      input.setAttribute(name, value)
-      return this
-    },
-    getAttribute (name) {
-      return input.getAttribute(name)
-    },
-    removeAttribute (name) {
-      input.removeAttribute(name)
-      return this
-    }
-  }
-}

package/src/core/compose/features/textlabel.js

@@ -1,28 +0,0 @@
-// src/core/compose/features/textlabel.js
-
-export const withTextLabel = (config = {}) => (component) => {
-  if (!config.label) return component
-
-  const labelElement = document.createElement('label')
-  labelElement.className = `${config.prefix}-${config.componentName}-label`
-  labelElement.textContent = config.label
-
-  // Insert label after input for proper z-index stacking
-  component.element.appendChild(labelElement)
-
-  return {
-    ...component,
-    label: {
-      setText (text) {
-        labelElement.textContent = text
-        return this
-      },
-      getText () {
-        return labelElement.textContent
-      },
-      getElement () {
-        return labelElement
-      }
-    }
-  }
-}

package/src/core/compose/features/track.js

@@ -1,49 +0,0 @@
-// src/core/compose/features/track.js
-/**
- * @module core/compose/features
- */
-
-/**
- * Default checkmark icon SVG
- * @memberof module:core/compose/features
- * @private
- */
-const DEFAULT_ICON = `
-<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-  <polyline points="20 6 9 17 4 12"></polyline>
-</svg>`
-
-/**
- * Adds track and thumb elements to a component
- * @memberof module:core/compose/features
- * @function withTrack
- * @param {Object} config - Track configuration
- * @param {string} config.prefix - Class prefix
- * @param {string} config.componentName - Component name
- * @param {string} [config.icon] - Custom icon HTML or 'none'
- * @returns {Function} Component transformer
- */
-export const withTrack = (config) => (component) => {
-  const track = document.createElement('span')
-  track.className = `${config.prefix}-${config.componentName}-track`
-
-  const thumb = document.createElement('span')
-  thumb.className = `${config.prefix}-${config.componentName}-thumb`
-  track.appendChild(thumb)
-
-  // Add icon inside thumb if provided or use default
-  if (config.icon !== 'none') {
-    const icon = document.createElement('span')
-    icon.className = `${config.prefix}-${config.componentName}-thumb-icon`
-    icon.innerHTML = config.icon || DEFAULT_ICON
-    thumb.appendChild(icon)
-  }
-
-  component.element.appendChild(track)
-
-  return {
-    ...component,
-    track,
-    thumb
-  }
-}

package/src/core/compose/features/variant.js

@@ -1,9 +0,0 @@
-// src/core/compose/features/variant.js
-export const withVariant = config => component => {
-  if (config.variant && component.element) {
-    // Use config.componentName since we know it's there
-    const className = `${config.prefix}-${config.componentName}--${config.variant}`
-    component.element.classList.add(className)
-  }
-  return component
-}

package/src/core/compose/features/withEvents.js

@@ -1,67 +0,0 @@
-// src/core/compose/features/withEvents.js
-import { createEventManager } from '../../state/events'
-
-/**
- * Adds event handling capabilities to a component
- * @param {HTMLElement} [target] - Optional custom event target
- * @returns {Function} Component enhancer
- */
-export const withEvents = (target) => (component) => {
-  const events = createEventManager(target || component.element)
-
-  // Enhanced event methods
-  const enhancedEvents = {
-    /**
-     * Add multiple event listeners at once
-     * @param {Object} listeners - Map of event types to handlers
-     */
-    addListeners (listeners) {
-      Object.entries(listeners).forEach(([event, handler]) => {
-        events.on(event, handler)
-      })
-      return this
-    },
-
-    /**
-     * Remove multiple event listeners at once
-     * @param {Object} listeners - Map of event types to handlers
-     */
-    removeListeners (listeners) {
-      Object.entries(listeners).forEach(([event, handler]) => {
-        events.off(event, handler)
-      })
-      return this
-    },
-
-    /**
-     * One-time event handler
-     * @param {string} event - Event name
-     * @param {Function} handler - Event handler
-     */
-    once (event, handler) {
-      const wrappedHandler = (e) => {
-        handler(e)
-        events.off(event, wrappedHandler)
-      }
-      events.on(event, wrappedHandler)
-      return this
-    }
-  }
-
-  // Add lifecycle integration
-  if (component.lifecycle) {
-    const originalDestroy = component.lifecycle.destroy
-    component.lifecycle.destroy = () => {
-      events.destroy()
-      originalDestroy?.call(component.lifecycle)
-    }
-  }
-
-  return {
-    ...component,
-    events,
-    on: events.on.bind(events),
-    off: events.off.bind(events),
-    ...enhancedEvents
-  }
-}

package/src/core/compose/index.js

@@ -1,16 +0,0 @@
-// src/core/compose/index.js
-/**
- * @module core/compose
- * @description Core composition utilities for creating and combining components
- */
-export { pipe, compose, transform } from './pipe'
-export {
-  withEvents,
-  withIcon,
-  withSize,
-  withPosition,
-  withText,
-  withVariant,
-  withTextInput
-} from './features'
-export { createBase, withElement } from './component' // Add this line

package/src/core/config.js

@@ -1,140 +0,0 @@
-// src/core/config.js
-
-/**
- * Library prefix used for all components
- */
-export const PREFIX = 'mtrl'
-
-export const getComponentClass = (type) => `${PREFIX}-${type}`
-export const getModifierClass = (baseClass, modifier) => `${baseClass}--${modifier}`
-export const getElementClass = (baseClass, element) => `${baseClass}-${element}`
-
-/**
- * Component type identifiers
- * @enum {string}
- */
-export const COMPONENTS = {
-  BUTTON: 'button',
-  TEXTFIELD: 'textfield',
-  CONTAINER: 'container',
-  SNACKBAR: 'snackbar',
-  SWITCH: 'switch'
-}
-
-/**
- * Theme configuration
- * @typedef {Object} ThemeConfig
- * @property {string} name - Theme name
- * @property {Object} variables - Theme CSS variables
- * @property {Object} variants - Theme variants
- */
-
-/**
- * Creates a component configuration object
- * @param {string} type - Component type from COMPONENT_TYPES
- * @returns {Object} Component configuration interface
- */
-export const createComponentConfig = (type) => {
-  const baseClass = `${PREFIX}-${type}`
-
-  // Create the base config object
-  const config = {
-    prefix: PREFIX,
-    type,
-    baseClass,
-
-    // Class name generators
-    getClass: () => baseClass,
-    getModifierClass: (modifier) => `${baseClass}--${modifier}`,
-    getElementClass: (element) => `${baseClass}-${element}`,
-
-    // Theme support
-    withTheme: (theme) => ({
-      ...config,
-      theme,
-      getThemeClass: (variant) => `${baseClass}--theme-${theme}-${variant}`
-    }),
-
-    // Variant support
-    withVariants: (...variants) => ({
-      ...config,
-      variants,
-      hasVariant: (variant) => variants.includes(variant),
-      getVariantClass: (variant) =>
-        variants.includes(variant) ? `${baseClass}--${variant}` : null
-    }),
-
-    // State support
-    withStates: (...states) => ({
-      ...config,
-      states,
-      getStateClass: (state) =>
-        states.includes(state) ? `${baseClass}--state-${state}` : null
-    })
-  }
-
-  return config
-}
-
-/**
- * Common component states
- * @enum {string}
- */
-export const STATES = {
-  DISABLED: 'disabled',
-  FOCUSED: 'focused',
-  ACTIVE: 'active',
-  LOADING: 'loading',
-  ERROR: 'error'
-}
-
-/**
- * CSS class generation utilities
- */
-export const classNames = {
-  /**
-   * Creates a BEM-style class name
-   * @param {string} block - Block name
-   * @param {string} [element] - Element name
-   * @param {string} [modifier] - Modifier name
-   * @returns {string} BEM class name
-   */
-  bem: (block, element, modifier) => {
-    let className = block
-    if (element) className += `-${element}`
-    if (modifier) className += `--${modifier}`
-    return className
-  },
-
-  /**
-   * Joins class names, filtering out falsy values
-   * @param {...string} classes - Class names to join
-   * @returns {string} Joined class names
-   */
-  join: (...classes) => classes.filter(Boolean).join(' ')
-}
-
-/**
- * Creates a themed component configuration
- * @param {string} type - Component type
- * @param {ThemeConfig} theme - Theme configuration
- */
-export const createThemedComponent = (type, theme) => {
-  const config = createComponentConfig(type)
-
-  return {
-    ...config,
-    theme,
-
-    // Theme-specific class generators
-    getThemeClass: (variant) =>
-      `${config.getClass()}--theme-${theme.name}${variant ? `-${variant}` : ''}`,
-
-    // Theme CSS variables
-    getCssVariables: () =>
-      Object.entries(theme.variables).reduce((acc, [key, value]) => ({
-        ...acc,
-        [`--${PREFIX}-${type}-${key}`]: value
-      }), {})
-  }
-}

package/src/core/dom/classes.js

@@ -1,70 +0,0 @@
-// src/core/dom/classes.js
-/**
- * @module core/dom
- * @description DOM manipulation utilities
- */
-
-import { normalizeClasses } from '../utils'
-/**
- * Adds multiple classes to an element
- * @memberof module:core/dom
- * @function addClass
- * @param {HTMLElement} element - Target element
- * @param {...string} classes - Classes to add
- * @returns {HTMLElement} Modified element
- */
-
-/**
- * Adds multiple classes to an element
- * @param {HTMLElement} element - Target element
- * @param {...string} classes - Classes to add
- * @returns {HTMLElement} Modified element
- */
-export const addClass = (element, ...classes) => {
-  const normalizedClasses = normalizeClasses(...classes)
-  if (normalizedClasses.length) {
-    element.classList.add(...normalizedClasses)
-  }
-  return element
-}
-
-/**
- * Removes multiple classes from an element
- * @memberof module:core/dom
- * @function removeClass
- * @param {HTMLElement} element - Target element
- * @param {...string} classes - Classes to remove
- * @returns {HTMLElement} Modified element
- */
-export const removeClass = (element, ...classes) => {
-  const normalizedClasses = normalizeClasses(...classes)
-  if (normalizedClasses.length) {
-    element.classList.remove(...normalizedClasses)
-  }
-  return element
-}
-
-/**
- * Toggles multiple classes on an element
- * @param {HTMLElement} element - Target element
- * @param {...string} classes - Classes to toggle
- * @returns {HTMLElement} Modified element
- */
-export const toggleClass = (element, ...classes) => {
-  const normalizedClasses = normalizeClasses(...classes)
-  normalizedClasses.forEach(cls => {
-    element.classList.toggle(cls)
-  })
-  return element
-}
-
-/**
- * Checks if an element has all specified classes
- * @param {HTMLElement} element - Target element
- * @param {...string} classes - Classes to check
- * @returns {boolean} True if element has all specified classes
- */
-export const hasClass = (element, ...classes) => {
-  const normalizedClasses = normalizeClasses(...classes)
-  return normalizedClasses.every(cls => element.classList.contains(cls))
-}