mtrl 0.0.0

package/src/components/textfield/styles/base.scss

@@ -0,0 +1,107 @@
+// src/components/textfield/styles/_base.scss
+@use 'sass:map';
+@use '../../../styles/abstract/config' as c;
+
+.#{c.$prefix}-textfield {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  min-width: 210px;
+  
+  &--small {
+    .#{c.$prefix}-textfield-input {
+      height: 48px;
+    }
+  }
+
+  &--large {
+    .#{c.$prefix}-textfield-input {
+      height: 64px;
+    }
+  }
+  
+  &-label {
+    @include c.typography('body-large');
+    user-select: none;
+    position: absolute;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    transform-origin: left top;
+    pointer-events: none;
+    border-radius: 2px;
+    color: var(--mtrl-sys-color-on-surface-variant);
+    transition: transform map.get(c.$motion, 'duration-short4') map.get(c.$motion, 'easing-emphasized'),
+                color map.get(c.$motion, 'duration-short2') map.get(c.$motion, 'easing-standard');
+  }
+  
+  &-input {
+    @include c.typography('body-large');
+    @include c.shape('extra-small');
+    padding: 13px 16px;
+    width: 100%;
+    color: var(--mtrl-sys-color-on-surface);
+    border: 0;
+    appearance: none;
+    outline: none;
+    &::placeholder {
+      color: transparent;
+    }
+
+    // Autofill styles
+    &:-webkit-autofill {
+      // font: inherit;
+      -webkit-text-fill-color: var(--mtrl-sys-color-on-surface);
+      transition: background-color 5000s ease-in-out 0s; // Long transition to keep the background
+      
+      & ~ .#{c.$prefix}-textfield-label {
+        transform: translateY(-95%) scale(0.75);
+        background-color: var(--mtrl-sys-color-surface);
+      }
+    }
+
+    // Firefox autofill
+    &:autofill {
+      color: var(--mtrl-sys-color-on-surface);
+      
+      & ~ .#{c.$prefix}-textfield-label {
+        transform: translateY(-95%) scale(0.75);
+        background-color: var(--mtrl-sys-color-surface);
+      }
+    }
+  }
+
+  &--error {
+    border-color: var(--mtrl-sys-color-error);
+    .#{c.$prefix}-textfield-label {
+      color: var(--mtrl-sys-color-error);
+    }
+  }
+  
+  &-input:disabled {
+    opacity: 0.38;
+    border-color: var(--mtrl-sys-color-on-surface);
+    background-color: rgba(var(--mtrl-sys-color-on-surface-rgb), 0.04);
+    pointer-events: none;
+    
+    & ~ .#{c.$prefix}-textfield-label {
+      color: var(--mtrl-sys-color-on-surface);
+      opacity: 0.38;
+    }
+  }
+  
+  &-helper {
+    @include c.typography('body-small');
+    margin-top: 4px;
+    color: var(--mtrl-sys-color-on-surface-variant);
+    
+    &--error {
+      color: var(--mtrl-sys-color-error);
+    }
+  }
+  
+  &-required {
+    color: var(--mtrl-sys-color-error);
+    margin-left: 4px;
+  }
+}

package/src/components/textfield/styles/filled.scss

@@ -0,0 +1,58 @@
+// src/components/textfield/styles/_filled.scss
+@use 'sass:map';
+@use '../../../styles/abstract/config' as c;
+
+.#{c.$prefix}-textfield {
+  &--filled {
+    border-bottom: 1px solid var(--mtrl-sys-color-outline);
+    
+    .#{c.$prefix}-textfield-input {
+      background-color: var(--mtrl-sys-color-surface-container-highest);
+      padding: 20px 16px 7px;
+      border-radius: 4px 4px 0 0;
+      
+      &:focus {
+        padding-bottom: 6px;
+      }
+
+      // Autofill styles for filled variant
+      &:-webkit-autofill {
+        border-radius: 4px 4px 0 0;
+        
+        & ~ .#{c.$prefix}-textfield-label {
+          transform: translateY(-95%) scale(0.75);
+          color: var(--mtrl-sys-color-on-surface-variant);
+        }
+      }
+
+      &:autofill {
+        & ~ .#{c.$prefix}-textfield-label {
+          transform: translateY(-95%) scale(0.75);
+          color: var(--mtrl-sys-color-on-surface-variant);
+        }
+      }
+    }
+
+    &:not(.#{c.$prefix}-textfield--empty) .#{c.$prefix}-textfield-label,
+    &.#{c.$prefix}-textfield--focused .#{c.$prefix}-textfield-label {
+      transform: translateY(-95%) scale(0.75);
+    }
+
+    &.#{c.$prefix}-textfield--focused {
+      border-bottom: 2px solid var(--mtrl-sys-color-primary);
+      .#{c.$prefix}-textfield-label {
+        color: var(--mtrl-sys-color-primary);
+      }
+      &:hover {
+        border-bottom: 2px solid var(--mtrl-sys-color-primary);
+      }
+    }
+    
+    &:hover {
+      border-bottom: 1px solid var(--mtrl-sys-color-primary);
+      .#{c.$prefix}-textfield-label {
+        color: var(--mtrl-sys-color-primary);
+      }
+    }
+  }
+}

package/src/components/textfield/styles/outlined.scss

@@ -0,0 +1,66 @@
+// src/components/textfield/styles/_outlined.scss
+@use 'sass:map';
+@use '../../../styles/abstract/config' as c;
+
+.#{c.$prefix}-textfield {
+  &--outlined {
+    border: 1px solid var(--mtrl-sys-color-outline);
+    border-radius: 4px;
+    
+    .#{c.$prefix}-textfield-input {
+      background-color: transparent;
+      padding: 13px 16px 14px;
+
+      // Autofill styles for outlined variant
+      &:-webkit-autofill {
+        border-radius: 4px 4px 0 0;
+        
+        & ~ .#{c.$prefix}-textfield-label {
+          background-color: var(--mtrl-sys-color-surface);
+          transform: translateY(-145%) scale(0.75);
+          left: 13px;
+          padding: 0 4px;
+        }
+      }
+
+      &:autofill {
+        & ~ .#{c.$prefix}-textfield-label {
+          background-color: var(--mtrl-sys-color-surface);
+          transform: translateY(-145%) scale(0.75);
+          left: 13px;
+          padding: 0 4px;
+        }
+      }
+    }
+
+    &:not(.#{c.$prefix}-textfield--empty) .#{c.$prefix}-textfield-label,
+    &.#{c.$prefix}-textfield--focused .#{c.$prefix}-textfield-label {
+      background-color: var(--mtrl-sys-color-surface);
+      transform: translateY(-145%) scale(0.75);
+      left: 13px;
+      padding: 0 4px;
+    }
+
+    &.#{c.$prefix}-textfield--focused {
+      border: 2px solid var(--mtrl-sys-color-primary);
+      .#{c.$prefix}-textfield-label {
+        color: var(--mtrl-sys-color-primary);
+        border-radius: 2px;
+        left: 12px;
+      }
+      .#{c.$prefix}-textfield-input {
+        padding: 12px 15px 13px;
+      }
+      &:hover {
+        border: 2px solid var(--mtrl-sys-color-primary);
+      }
+    }
+    
+    &:hover {
+      border: 1px solid var(--mtrl-sys-color-primary);
+      .#{c.$prefix}-textfield-label {
+        color: var(--mtrl-sys-color-primary);
+      }
+    }
+  }
+}

package/src/components/textfield/styles.scss

@@ -0,0 +1,6 @@
+// src/components/textfield/styles.scss
+@use 'sass:map';
+@use '../../styles/abstract/config' as c;
+@use 'styles/base';
+@use 'styles/filled';
+@use 'styles/outlined';

package/src/components/textfield/textfield.js

@@ -0,0 +1,68 @@
+// src/components/textfield/textfield.js
+import { PREFIX } from '../../core/config'
+import { pipe } from '../../core/compose'
+import { createBase, withElement } from '../../core/compose/component'
+import {
+  withEvents,
+  withDisabled,
+  withLifecycle,
+  withVariant,
+  withSize,
+  withTextInput,
+  withTextLabel
+} from '../../core/compose/features'
+import { withAPI } from './api'
+import { TEXTFIELD_VARIANTS } from './constants'
+
+/**
+ * Creates a new Textfield component
+ * @param {Object} config - Textfield configuration
+ * @param {string} [config.type] - Input type (text, password, email, etc.)
+ * @param {string} [config.variant] - Visual variant (filled, outlined)
+ * @param {string} [config.size] - Size variant (small, medium, large)
+ * @param {string} [config.name] - Input name attribute
+ * @param {string} [config.label] - Label text
+ * @param {string} [config.placeholder] - Placeholder text
+ * @param {string} [config.value] - Initial value
+ * @param {boolean} [config.required] - Whether the input is required
+ * @param {boolean} [config.disabled] - Whether the input is disabled
+ * @param {number} [config.maxLength] - Maximum input length
+ * @param {string} [config.pattern] - Input pattern for validation
+ * @param {string} [config.autocomplete] - Autocomplete attribute
+ * @param {string} [config.class] - Additional CSS classes
+ * @returns {Object} Textfield component instance
+ */
+const createTextfield = (config = {}) => {
+  const baseConfig = {
+    ...config,
+    componentName: 'textfield',
+    prefix: PREFIX,
+    variant: config.variant || TEXTFIELD_VARIANTS.FILLED
+  }
+
+  try {
+    return pipe(
+      createBase,
+      withEvents(),
+      withElement({
+        tag: 'div',
+        componentName: 'textfield',
+        className: config.class
+      }),
+      withVariant(baseConfig),
+      withSize(baseConfig),
+      withTextInput(baseConfig),
+      withTextLabel(baseConfig),
+      withDisabled(baseConfig),
+      withLifecycle(),
+      comp => withAPI({
+        disabled: comp.disabled,
+        lifecycle: comp.lifecycle
+      })(comp)
+    )(baseConfig)
+  } catch (error) {
+    throw new Error(`Failed to create textfield: ${error.message}`)
+  }
+}
+
+export default createTextfield

package/src/core/build/constants.js

@@ -0,0 +1,51 @@
+// src/core/build/constants.js
+
+/**
+ * Animation timing functions for ripple effect
+ * @enum {string}
+ */
+export const 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
+ * @type {Object}
+ */
+export const RIPPLE_CONFIG = {
+  duration: 375,
+  timing: RIPPLE_TIMING.LINEAR,
+  opacity: ['1', '0.3']
+}
+
+/**
+ * Validation schema for ripple configuration
+ * @type {Object}
+ */
+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.js

@@ -0,0 +1,78 @@
+// src/core/build/icon.js
+/**
+ * @module core/build
+ */
+
+/**
+ * Creates an icon DOM element
+ * @memberof module:core/build
+ * @private
+ * @param {string} html - Icon HTML content
+ * @param {Object} [options] - Icon options
+ * @param {string} [options.prefix='mtrl'] - Class prefix
+ * @param {string} [options.class] - Additional CSS class
+ * @param {string} [options.size] - Icon size variant
+ * @returns {HTMLElement} Icon element
+ */
+const createIconElement = (html, options = {}) => {
+  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
+ * @memberof module:core/build
+ * @function createIcon
+ * @param {HTMLElement} element - Parent element
+ * @param {Object} [config] - Icon configuration
+ * @param {string} [config.prefix='mtrl'] - Class prefix
+ * @param {string} [config.type='component'] - Component type
+ * @param {string} [config.position] - Icon position ('start' or 'end')
+ * @returns {Object} Icon manager interface
+ * @property {Function} setIcon - Sets icon content
+ * @property {Function} getIcon - Gets current icon content
+ * @property {Function} getElement - Gets icon element
+ */
+export const createIcon = (element, config = {}) => {
+  let iconElement = null
+  const PREFIX = config.prefix || 'mtrl'
+
+  return {
+    setIcon (html) {
+      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 () {
+      return iconElement ? iconElement.innerHTML : ''
+    },
+
+    getElement () {
+      return iconElement
+    }
+  }
+}

package/src/core/build/ripple.js

@@ -0,0 +1,92 @@
+// src/core/build/ripple.js
+
+import { RIPPLE_CONFIG } from './constants'
+
+const DEFAULT_CONFIG = RIPPLE_CONFIG
+
+/**
+ * Creates a ripple effect instance
+ * @param {Object} [config] - Ripple configuration
+ * @param {number} [config.duration] - Animation duration in ms
+ * @param {string} [config.timing] - Animation timing function
+ * @param {string[]} [config.opacity] - Start and end opacity values
+ * @returns {Object} Ripple controller instance
+ */
+export const createRipple = (config = {}) => {
+  const options = { ...DEFAULT_CONFIG, ...config }
+
+  const getEndCoordinates = (bounds) => {
+    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 = () => {
+    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
+  }
+
+  const animate = (event, container) => {
+    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)
+    ripple.offsetHeight // Force reflow
+
+    // 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'
+      setTimeout(() => ripple.remove(), options.duration)
+      document.removeEventListener('mouseup', cleanup)
+      document.removeEventListener('mouseleave', cleanup)
+    }
+
+    document.addEventListener('mouseup', cleanup)
+    document.addEventListener('mouseleave', cleanup)
+  }
+
+  return {
+    mount: (element) => {
+      if (!element) return
+
+      // Ensure proper positioning context
+      const currentPosition = window.getComputedStyle(element).position
+      if (currentPosition === 'static') {
+        element.style.position = 'relative'
+      }
+      element.style.overflow = 'hidden'
+
+      element.addEventListener('mousedown', (e) => animate(e, element))
+    },
+
+    unmount: (element) => {
+      if (!element) return
+      element.querySelectorAll('.ripple').forEach(ripple => ripple.remove())
+    }
+  }
+}

package/src/core/build/text.js

@@ -0,0 +1,54 @@
+// src/core/build/text.js
+/**
+ * @module core/build
+ */
+
+/**
+ * Creates a text manager for a component
+ * @memberof module:core/build
+ * @function createText
+ * @param {HTMLElement} element - Parent element
+ * @param {Object} [config] - Text configuration
+ * @param {string} [config.prefix='mtrl'] - Class prefix
+ * @param {string} [config.type='component'] - Component type
+ * @param {HTMLElement} [config.beforeElement] - Element to insert before
+ * @returns {Object} Text manager interface
+ * @property {Function} setText - Sets text content
+ * @property {Function} getText - Gets current text
+ * @property {Function} getElement - Gets text element
+ */
+export const createText = (element, config = {}) => {
+  let textElement = null
+  const PREFIX = config.prefix || 'mtrl'
+
+  const createElement = (content) => {
+    const span = document.createElement('span')
+    span.className = `${PREFIX}-${config.type || 'component'}-text`
+    span.textContent = content
+    return span
+  }
+
+  return {
+    setText (text) {
+      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 () {
+      return textElement ? textElement.textContent : ''
+    },
+
+    getElement () {
+      return textElement
+    }
+  }
+}

package/src/core/collection/adapters/base.js

@@ -0,0 +1,26 @@
+// src/core/collection/adapters/base.js
+
+export const OPERATORS = {
+  EQ: 'eq',
+  NE: 'ne',
+  GT: 'gt',
+  GTE: 'gte',
+  LT: 'lt',
+  LTE: 'lte',
+  IN: 'in',
+  NIN: 'nin',
+  CONTAINS: 'contains',
+  STARTS_WITH: 'startsWith',
+  ENDS_WITH: 'endsWith'
+}
+
+export const createBaseAdapter = ({ onError } = {}) => {
+  const handleError = (error, context) => {
+    onError?.(error, context)
+    throw error
+  }
+
+  return {
+    handleError
+  }
+}