mtrl 0.2.8 → 0.2.9

package/src/styles/components/_textfield.scss

@@ -28,7 +28,8 @@ $component: '#{base.$prefix}-textfield';
     border-radius: 2px;
     color: t.color('on-surface-variant');
     transition: transform v.motion('duration-short4') v.motion('easing-emphasized'),
-                color v.motion('duration-short2') v.motion('easing-standard');
+                color v.motion('duration-short2') v.motion('easing-standard'),
+                left v.motion('duration-short4') v.motion('easing-emphasized');
   }
   
   // Input element
@@ -68,6 +69,65 @@ $component: '#{base.$prefix}-textfield';
       }
     }
   }
+  
+  // Leading icon
+  &-leading-icon {
+    position: absolute;
+    left: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    pointer-events: none;
+    color: t.color('on-surface-variant');
+    z-index: 1;
+    
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  
+  // Trailing icon
+  &-trailing-icon {
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: t.color('on-surface-variant');
+    z-index: 1;
+    cursor: pointer;
+    
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  
+  // Adjustments when icons are present
+  &--with-leading-icon {
+    .#{$component}-label {
+      left: 44px;
+    }
+    
+    .#{$component}-input {
+      padding-left: 44px;
+    }
+  }
+  
+  &--with-trailing-icon {
+    .#{$component}-input {
+      padding-right: 44px;
+    }
+  }
 
   // Error state
   &--error {
@@ -76,6 +136,11 @@ $component: '#{base.$prefix}-textfield';
     .#{$component}-label {
       color: t.color('error');
     }
+    
+    .#{$component}-leading-icon,
+    .#{$component}-trailing-icon {
+      color: t.color('error');
+    }
   }
   
   // Disabled state
@@ -85,15 +150,20 @@ $component: '#{base.$prefix}-textfield';
     background-color: t.alpha('on-surface', 0.04);
     pointer-events: none;
     
-    & ~ .#{$component}-label {
+    & ~ .#{$component}-label,
+    & ~ .#{$component}-leading-icon,
+    & ~ .#{$component}-trailing-icon {
       color: t.color('on-surface');
       opacity: 0.38;
     }
   }
   
-  // Helper text
+  // Helper text / Supporting text
   &-helper {
     @include m.typography('body-small');
+    position: absolute;
+    bottom: -18px;
+    left: 16px;
     margin-top: 4px;
     color: t.color('on-surface-variant');
     
@@ -127,6 +197,35 @@ $component: '#{base.$prefix}-textfield';
       margin-left: 0;
       margin-right: 4px;
     }
+    
+    &-leading-icon {
+      left: auto;
+      right: 12px;
+    }
+    
+    &-trailing-icon {
+      right: auto;
+      left: 12px;
+    }
+    
+    &--with-leading-icon {
+      .#{$component}-label {
+        left: auto;
+        right: 44px;
+      }
+      
+      .#{$component}-input {
+        padding-left: 16px;
+        padding-right: 44px;
+      }
+    }
+    
+    &--with-trailing-icon {
+      .#{$component}-input {
+        padding-right: 16px;
+        padding-left: 44px;
+      }
+    }
   }
   
   // ===== FILLED VARIANT =====
@@ -139,10 +238,6 @@ $component: '#{base.$prefix}-textfield';
       @include m.motion-transition(background-color, border-color);
 
 
-      &:focus {
-        padding-bottom: 6px;
-      }
-
       // Autofill styles for filled variant
       &:-webkit-autofill {
         border-radius: f.get-shape('extra-small') f.get-shape('extra-small') 0 0;
@@ -171,7 +266,7 @@ $component: '#{base.$prefix}-textfield';
       background-color: t.color('primary');
       border-radius: 0;
       pointer-events: none;
-      transition: 0.3s opacity ease;
+      transition: 0.2s opacity ease;
     }
 
     // Populated field (not empty) or focused field label position
@@ -220,12 +315,68 @@ $component: '#{base.$prefix}-textfield';
       }
     }
     
+    // Icon adjustments for filled variant
+    &.#{$component}--with-leading-icon {
+      .#{$component}-input {
+        padding: 20px 16px 7px 44px;
+      }
+      
+      .#{$component}-label {
+        left: 44px;
+      }
+      
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        transform: translateY(-95%) scale(0.75);
+        // Keep the label aligned with input text when focused/filled
+        left: 44px;
+      }
+      
+      .#{$component}-leading-icon {
+        top: 28px;
+      }
+    }
+    
+    &.#{$component}--with-trailing-icon {
+      .#{$component}-input {
+        padding-right: 44px;
+      }
+      
+      .#{$component}-trailing-icon {
+        top: 28px;
+      }
+    }
+    
     // RTL support
     @include m.rtl {
       .#{$component}-label {
         left: auto;
         right: 16px;
       }
+      
+      &.#{$component}--with-leading-icon {
+        .#{$component}-input {
+          padding: 20px 44px 7px 16px;
+        }
+        
+        .#{$component}-label {
+          left: auto;
+          right: 44px;
+        }
+        
+        &:not(.#{$component}--empty) .#{$component}-label,
+        &.#{$component}--focused .#{$component}-label {
+          // Keep the label aligned with input text when focused/filled in RTL
+          right: 44px;
+        }
+      }
+      
+      &.#{$component}--with-trailing-icon {
+        .#{$component}-input {
+          padding-right: 16px;
+          padding-left: 44px;
+        }
+      }
     }
   }
   
@@ -270,10 +421,10 @@ $component: '#{base.$prefix}-textfield';
       opacity: 0;
       width: 100%;
       height: 100%;
-      border: 2px solid t.color('primary');
+      border: 1.5px solid t.color('primary');
       border-radius: f.get-shape('extra-small');
       pointer-events: none;
-      transition: 0.2s opacity ease;
+      transition: 0.1s opacity ease;
     }
 
     // Populated field (not empty) or focused field label position
@@ -282,7 +433,6 @@ $component: '#{base.$prefix}-textfield';
       padding: 0 4px;
       background-color: t.color('surface');
       transform: translateY(-147%) scale(0.75);
-      
     }
 
     // Focus state
@@ -330,6 +480,29 @@ $component: '#{base.$prefix}-textfield';
       }
     }
     
+    // Icon adjustments for outlined variant
+    &.#{$component}--with-leading-icon {
+      .#{$component}-input {
+        padding-left: 44px;
+      }
+      
+      .#{$component}-label {
+        left: 44px;
+      }
+      
+      &:not(.#{$component}--empty) .#{$component}-label,
+      &.#{$component}--focused .#{$component}-label {
+        // For outlined variant, move label to default position
+        left: 13px;
+      }
+    }
+    
+    &.#{$component}--with-trailing-icon {
+      .#{$component}-input {
+        padding-right: 44px;
+      }
+    }
+    
     // RTL support
     @include m.rtl {
       &:not(.#{$component}--empty) .#{$component}-label,
@@ -345,6 +518,72 @@ $component: '#{base.$prefix}-textfield';
       &.#{$component}--error .#{$component}-label {
         right: 12px;
       }
+      
+      &.#{$component}--with-leading-icon {
+        .#{$component}-input {
+          padding-left: 16px;
+          padding-right: 44px;
+        }
+        
+        .#{$component}-label {
+          left: auto;
+          right: 44px;
+        }
+        
+        &:not(.#{$component}--empty) .#{$component}-label,
+        &.#{$component}--focused .#{$component}-label {
+          // For outlined variant in RTL, move label to default position
+          right: 13px;
+          left: auto;
+        }
+      }
+      
+      &.#{$component}--with-trailing-icon {
+        .#{$component}-input {
+          padding-right: 16px;
+          padding-left: 44px;
+        }
+      }
+    }
+  }
+  
+   // Multiline styles
+  &--multiline {
+    .#{$component}-input {
+      min-height: 100px;
+      height: auto;
+      resize: vertical;
+      padding-top: 12px;
+    }
+    
+    &--filled {
+      .#{$component}-input {
+
+      }
+    }
+
+    &--outlined {
+      .#{$component}-input {
+
+      }
+    }
+
+
+    .#{$component}-label {
+      top: 24px;
+    }
+  }
+
+
+  // Support for multiline inputs
+  &-input[type="multiline"] {
+    min-height: 100px;
+    resize: vertical;
+    
+    & ~ .#{$component}-leading-icon,
+    & ~ .#{$component}-trailing-icon {
+      top: 20px;
+      transform: none;
     }
   }
 }

package/demo/build.ts

@@ -1,349 +0,0 @@
-// src/demo/build.ts
-import { mkdir } from 'fs/promises'
-import { existsSync, watch } from 'fs'
-import { join, dirname } from 'path'
-import { fileURLToPath } from 'url'
-import * as sass from 'sass'
-
-const __dirname = dirname(fileURLToPath(import.meta.url))
-const isWatch = process.argv.includes('--watch')
-const isProduction = process.argv.includes('--production') || process.env.NODE_ENV === 'production'
-
-// Define consistent output paths
-const DIST_DIR = join(__dirname, 'dist')
-const STYLES_DIR = join(DIST_DIR, 'styles')
-const JS_OUTPUT = join(DIST_DIR, 'bundle.js')
-const CSS_OUTPUT = join(STYLES_DIR, 'main.css')
-const HTML_SOURCE = join(__dirname, 'index.html')
-const HTML_OUTPUT = join(DIST_DIR, 'index.html')
-
-// Log build mode
-console.log(`Building in ${isProduction ? 'PRODUCTION' : 'DEVELOPMENT'} mode`)
-
-const compileSass = async () => {
-  try {
-    const inputFile = join(__dirname, '../src/styles/main.scss')
-    const outputFile = CSS_OUTPUT
-
-    console.log('┌─────────────────────────────────────────')
-    console.log('│ SASS Compilation')
-    console.log('│ Mode:', isProduction ? 'PRODUCTION' : 'DEVELOPMENT')
-    console.log('│ Input:', inputFile)
-    console.log('│ Output:', outputFile)
-    console.log('│ Minify:', isProduction ? 'Yes' : 'No')
-    console.log('└─────────────────────────────────────────')
-
-    const result = await sass.compileAsync(inputFile, {
-      loadPaths: [
-        join(__dirname, '../node_modules'),
-        join(__dirname, '../src/styles'),
-        join(__dirname, '..') // Add root directory to help resolve paths
-      ],
-      style: isProduction ? 'compressed' : 'expanded',
-      sourceMap: !isProduction
-    })
-
-    await mkdir(dirname(outputFile), { recursive: true })
-    await Bun.write(outputFile, result.css)
-
-    if (result.sourceMap && !isProduction) {
-      await Bun.write(`${outputFile}.map`, JSON.stringify(result.sourceMap))
-    }
-
-    console.log('✓ SASS compilation successful')
-    console.log(`  Size: ${(result.css.length / 1024).toFixed(2)} KB`)
-  } catch (error) {
-    console.error('❌ SASS compilation failed:', error)
-    if (error.span) {
-      console.error(`  Error in ${error.span.url}:${error.span.start.line}:${error.span.start.column}`)
-    }
-  }
-}
-
-const buildApp = async () => {
-  try {
-    console.log('┌─────────────────────────────────────────')
-    console.log('│ JavaScript Build')
-    console.log('│ Mode:', isProduction ? 'PRODUCTION' : 'DEVELOPMENT')
-    console.log('│ Minify:', isProduction ? 'Yes' : 'No')
-    console.log('│ Sourcemaps:', isProduction ? 'No' : 'Yes (inline)')
-    console.log('└─────────────────────────────────────────')
-
-    const jsResult = await Bun.build({
-      entrypoints: [join(__dirname, 'main.js')],
-      outdir: DIST_DIR,
-      minify: isProduction, // Only minify in production
-      sourcemap: isProduction ? 'none' : 'inline', // No sourcemaps in production
-      format: 'esm',
-      target: 'browser',
-      naming: {
-        entry: 'bundle.js'
-      },
-      // Add tree shaking in production
-      tree: isProduction ? true : undefined,
-      // Define production/development environment
-      define: {
-        'process.env.NODE_ENV': isProduction ? '"production"' : '"development"'
-      }
-    })
-
-    if (!jsResult.success) {
-      console.error('❌ JavaScript build failed')
-      console.error(jsResult.logs)
-      return false
-    }
-
-    const jsSize = (await Bun.file(JS_OUTPUT).size) / 1024
-    console.log('✓ JavaScript build successful')
-    console.log(`  Size: ${jsSize.toFixed(2)} KB`)
-
-    return true
-  } catch (error) {
-    console.error('❌ JavaScript build error:', error)
-    return false
-  }
-}
-
-const copyStaticFiles = async () => {
-  try {
-    console.log('┌─────────────────────────────────────────')
-    console.log('│ Copying Static Files')
-    console.log('└─────────────────────────────────────────')
-
-    // Copy HTML template
-    await Bun.write(HTML_OUTPUT, await Bun.file(HTML_SOURCE).text())
-    console.log('✓ Copied HTML template')
-
-    // Add other static files here if needed
-    // For example, copy images, fonts, etc.
-
-    return true
-  } catch (error) {
-    console.error('❌ Error copying static files:', error)
-    return false
-  }
-}
-
-// Update timestamp file to trigger live reload when needed
-const updateReloadTimestamp = async () => {
-  if (!isProduction) {
-    const reloadDir = join(DIST_DIR)
-    const reloadFile = join(reloadDir, 'reload')
-    await mkdir(reloadDir, { recursive: true })
-    await Bun.write(reloadFile, Date.now().toString())
-    console.log('🔄 Browser reload triggered')
-  }
-}
-
-const setupWatchers = () => {
-  if (isProduction) {
-    console.log('Watch mode not available in production build')
-    return { watchJsFiles: () => {}, watchScssFiles: () => {}, watchHtmlFiles: () => {} }
-  }
-
-  const jsWatchPaths = [
-    join(__dirname, 'main.js'),
-    join(__dirname, '../src') // Watch the entire src directory for changes
-  ]
-
-  const scssWatchPaths = [
-    join(__dirname, '../src/styles')
-  ]
-
-  const htmlWatchPaths = [
-    join(__dirname, 'index.html')
-  ]
-
-  const watchJsFiles = () => {
-    // Use a debounce mechanism to prevent duplicate builds
-    let buildTimeout = null
-    const debouncedBuild = (filename) => {
-      if (buildTimeout) {
-        clearTimeout(buildTimeout)
-      }
-      buildTimeout = setTimeout(async () => {
-        console.log('\n📁 JavaScript file changed:', filename)
-        const success = await buildApp()
-        if (success) await updateReloadTimestamp()
-        buildTimeout = null
-      }, 100) // 100ms debounce time
-    }
-
-    jsWatchPaths.forEach(path => {
-      if (existsSync(path)) {
-        watch(path, { recursive: true }, (_, filename) => {
-          if (filename?.endsWith('.js') || filename?.endsWith('.ts')) {
-            debouncedBuild(filename)
-          }
-        })
-      } else {
-        console.warn(`⚠️ Watch path does not exist: ${path}`)
-      }
-    })
-  }
-
-  const watchScssFiles = () => {
-    // Use a debounce mechanism to prevent duplicate compilations
-    let compileTimeout = null
-    const debouncedCompile = (filename) => {
-      if (compileTimeout) {
-        clearTimeout(compileTimeout)
-      }
-      compileTimeout = setTimeout(async () => {
-        console.log('\n📁 SCSS file changed:', filename)
-        await compileSass()
-        await updateReloadTimestamp()
-        compileTimeout = null
-      }, 100) // 100ms debounce time
-    }
-
-    scssWatchPaths.forEach(path => {
-      if (existsSync(path)) {
-        watch(path, { recursive: true }, (_, filename) => {
-          if (filename?.endsWith('.scss')) {
-            debouncedCompile(filename)
-          }
-        })
-      } else {
-        console.warn(`⚠️ Watch path does not exist: ${path}`)
-      }
-    })
-  }
-
-  const watchHtmlFiles = () => {
-    // Watch HTML files and copy them when changed
-    let copyTimeout = null
-    const debouncedCopy = (filename) => {
-      if (copyTimeout) {
-        clearTimeout(copyTimeout)
-      }
-      copyTimeout = setTimeout(async () => {
-        console.log('\n📁 HTML file changed:', filename)
-        await copyStaticFiles()
-        await updateReloadTimestamp()
-        copyTimeout = null
-      }, 100) // 100ms debounce time
-    }
-
-    htmlWatchPaths.forEach(path => {
-      if (existsSync(path)) {
-        watch(path, { recursive: false }, (_, filename) => {
-          if (filename?.endsWith('.html')) {
-            debouncedCopy(filename)
-          }
-        })
-      } else {
-        console.warn(`⚠️ Watch path does not exist: ${path}`)
-      }
-    })
-  }
-
-  return {
-    watchJsFiles,
-    watchScssFiles,
-    watchHtmlFiles
-  }
-}
-
-const verifyOutput = async () => {
-  // Check if output files exist
-  const jsExists = existsSync(JS_OUTPUT)
-  const cssExists = existsSync(CSS_OUTPUT)
-  const htmlExists = existsSync(HTML_OUTPUT)
-
-  console.log('┌─────────────────────────────────────────')
-  console.log('│ Build Verification')
-  console.log('│ JavaScript:', jsExists ? '✓ OK' : '❌ Missing')
-  console.log('│ CSS:', cssExists ? '✓ OK' : '❌ Missing')
-  console.log('│ HTML:', htmlExists ? '✓ OK' : '❌ Missing')
-  console.log('└─────────────────────────────────────────')
-
-  // For production builds, check file sizes
-  if (isProduction && jsExists && cssExists) {
-    const jsStats = await Bun.file(JS_OUTPUT).size
-    const cssStats = await Bun.file(CSS_OUTPUT).size
-    const totalSize = jsStats + cssStats
-
-    console.log('┌─────────────────────────────────────────')
-    console.log('│ Production Build Stats')
-    console.log('│ JavaScript:', (jsStats / 1024).toFixed(2), 'KB')
-    console.log('│ CSS:', (cssStats / 1024).toFixed(2), 'KB')
-    console.log('│ Total Size:', (totalSize / 1024).toFixed(2), 'KB')
-    console.log('└─────────────────────────────────────────')
-  }
-
-  return jsExists && cssExists && htmlExists
-}
-
-const cleanDist = async () => {
-  try {
-    console.log('🧹 Cleaning dist directory...')
-    
-    // Recreate the directories
-    await mkdir(DIST_DIR, { recursive: true })
-    await mkdir(STYLES_DIR, { recursive: true })
-
-    console.log('✓ Dist directory cleaned')
-  } catch (error) {
-    console.error('❌ Error cleaning dist directory:', error)
-  }
-}
-
-const build = async () => {
-  try {
-    const startTime = Date.now()
-
-    console.log('┌───────────────────────────────────────────────')
-    console.log('│ 🚀 MTRL Demo Build Process')
-    console.log('│ Mode:', isProduction ? '🏭 PRODUCTION' : '🔧 DEVELOPMENT')
-    console.log('│ Watch:', isWatch ? '✓ Enabled' : '✗ Disabled')
-    console.log('└───────────────────────────────────────────────')
-    console.log('')
-
-    // Clean dist directory
-    await cleanDist()
-
-    // Create output directories
-    await mkdir(DIST_DIR, { recursive: true })
-    await mkdir(STYLES_DIR, { recursive: true })
-
-    // Build JavaScript
-    await buildApp()
-
-    // Compile SASS to CSS
-    await compileSass()
-
-    // Copy static files
-    await copyStaticFiles()
-
-    // Verify output
-    await verifyOutput()
-
-    // Update reload timestamp
-    await updateReloadTimestamp()
-
-    const buildTime = ((Date.now() - startTime) / 1000).toFixed(2)
-
-    if (isWatch && !isProduction) {
-      console.log('')
-      console.log('┌───────────────────────────────────────────────')
-      console.log('│ 👀 Watching for changes...')
-      console.log('└───────────────────────────────────────────────')
-
-      const { watchJsFiles, watchScssFiles, watchHtmlFiles } = setupWatchers()
-      watchJsFiles()
-      watchScssFiles()
-      watchHtmlFiles()
-    } else {
-      console.log('')
-      console.log('┌───────────────────────────────────────────────')
-      console.log(`│ ✅ Build completed in ${buildTime}s`)
-      console.log('└───────────────────────────────────────────────')
-    }
-  } catch (error) {
-    console.error('❌ Build failed with error:', error)
-    process.exit(1)
-  }
-}
-
-build()