mtrl 0.2.8 → 0.2.9

package/demo/styles.css

@@ -1,239 +0,0 @@
-// demo/styles.scss
-
-// Import the main styles from the source code
-@use '../src/styles/main.scss';
-
-/* Base styles */
-:root {
-  --primary-color: #6750a4;
-  --on-primary-color: #ffffff;
-  --primary-container-color: #eaddff;
-  --on-primary-container-color: #21005d;
-  --secondary-color: #625b71;
-  --on-secondary-color: #ffffff;
-  --secondary-container-color: #e8def8;
-  --on-secondary-container-color: #1d192b;
-  --tertiary-color: #7d5260;
-  --surface-color: #fffbfe;
-  --on-surface-color: #1c1b1f;
-  --surface-variant-color: #e7e0ec;
-  --on-surface-variant-color: #49454f;
-  --outline-color: #79747e;
-  --background-color: #fffbfe;
-  --error-color: #b3261e;
-  
-  --elevation-1: 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
-  --elevation-2: 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
-  --elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
-  
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 24px;
-  --spacing-6: 32px;
-  
-  --border-radius-small: 4px;
-  --border-radius-medium: 8px;
-  --border-radius-large: 16px;
-  --border-radius-full: 9999px;
-}
-
-/* Dark theme support */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --primary-color: #d0bcff;
-    --on-primary-color: #381e72;
-    --primary-container-color: #4f378b;
-    --on-primary-container-color: #eaddff;
-    --secondary-color: #ccc2dc;
-    --on-secondary-color: #332d41;
-    --secondary-container-color: #4a4458;
-    --on-secondary-container-color: #e8def8;
-    --tertiary-color: #efb8c8;
-    --surface-color: #1c1b1f;
-    --on-surface-color: #e6e1e5;
-    --surface-variant-color: #49454f;
-    --on-surface-variant-color: #cac4d0;
-    --outline-color: #938f99;
-    --background-color: #1c1b1f;
-    --error-color: #f2b8b5;
-  }
-}
-
-/* Core styles */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: 'Roboto', sans-serif;
-  background-color: var(--background-color);
-  color: var(--on-surface-color);
-  line-height: 1.5;
-}
-
-/* Layout */
-.content {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: var(--spacing-5);
-  margin-bottom: 120px; /* For bottom app bar */
-}
-
-/* Component Sections */
-.component-section {
-  margin-bottom: var(--spacing-6);
-  padding: var(--spacing-4);
-  border-radius: var(--border-radius-medium);
-  background-color: var(--surface-color);
-  box-shadow: var(--elevation-1);
-}
-
-.component-section h2 {
-  color: var(--primary-color);
-  margin-bottom: var(--spacing-4);
-  font-size: 1.5rem;
-  border-bottom: 1px solid var(--outline-color);
-  padding-bottom: var(--spacing-2);
-}
-
-.component-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--spacing-5);
-  align-items: flex-start;
-}
-
-.align-top {
-  align-items: flex-start;
-}
-
-/* Demo Blocks */
-.demo-block {
-  flex: 1;
-  min-width: 300px;
-  margin-bottom: var(--spacing-4);
-}
-
-.demo-block h3 {
-  font-size: 1rem;
-  color: var(--on-surface-variant-color);
-  margin-bottom: var(--spacing-3);
-}
-
-.demo-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-3);
-}
-
-/* Intro section */
-#intro {
-  text-align: center;
-  margin-bottom: var(--spacing-6);
-  padding: var(--spacing-6) 0;
-}
-
-#intro h1 {
-  color: var(--primary-color);
-  font-size: 2.5rem;
-  margin-bottom: var(--spacing-3);
-}
-
-#intro p {
-  color: var(--on-surface-variant-color);
-  font-size: 1.2rem;
-  max-width: 600px;
-  margin: 0 auto;
-}
-
-/* App Bars */
-.top-app-bar {
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-}
-
-/* Carousel */
-.carousel-item {
-  height: 200px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--primary-container-color);
-  color: var(--on-primary-container-color);
-  font-weight: bold;
-  border-radius: var(--border-radius-medium);
-}
-
-/* Card Demo */
-.demo-card-media {
-  height: 140px;
-  background-color: var(--primary-container-color);
-  background-image: linear-gradient(45deg, var(--primary-color) 25%, transparent 25%, transparent 50%, var(--primary-color) 50%, var(--primary-color) 75%, transparent 75%, transparent);
-  background-size: 20px 20px;
-  border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
-}
-
-/* Hack to ensure components like dialog, sheet, tooltip are visible in the demo */
-.mtrl-dialog, .mtrl-sheet, .mtrl-tooltip {
-  position: absolute; /* Override fixed positioning for demo */
-  z-index: 2; /* Lower z-index for demo */
-}
-
-/* Display helpers */
-.demo-text {
-  margin: var(--spacing-2) 0;
-  color: var(--on-surface-variant-color);
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .component-row {
-    flex-direction: column;
-  }
-  
-  .demo-block {
-    width: 100%;
-  }
-}
-
-/* Component-specific styling overrides for demo purposes */
-.mtrl-button {
-  margin-right: var(--spacing-2);
-}
-
-.mtrl-textfield {
-  width: 100%;
-  max-width: 300px;
-}
-
-.mtrl-card {
-  max-width: 320px;
-}
-
-.mtrl-list {
-  max-width: 400px;
-  border: 1px solid var(--outline-color);
-  border-radius: var(--border-radius-medium);
-}
-
-.mtrl-slider {
-  width: 100%;
-  max-width: 300px;
-}
-
-.mtrl-navigation {
-  width: 300px;
-  border: 1px solid var(--outline-color);
-  border-radius: var(--border-radius-medium);
-}
-
-.mtrl-tabs {
-  width: 100%;
-  max-width: 400px;
-  border-bottom: 1px solid var(--outline-color);
-}

package/server.ts

@@ -1,86 +0,0 @@
-// server.ts - TypeScript version of the Bun server for the component library demo
-import { serve, type ServeOptions } from "bun";
-import { join } from "path";
-import { readFileSync, existsSync } from "fs";
-
-// Content type mapping
-const contentTypes: Record<string, string> = {
-  ".html": "text/html",
-  ".js": "text/javascript",
-  ".mjs": "text/javascript", // Add this for ES modules
-  ".css": "text/css",
-  ".json": "application/json",
-  ".png": "image/png",
-  ".jpg": "image/jpeg",
-  ".svg": "image/svg+xml"
-};
-
-// Define the port (hardcoded instead of using environment variable)
-const PORT: number = 3301;
-
-// Define demo directory path
-const DEMO_DIR: string = "./demo";
-
-/**
- * Serves a file from the demo directory
- * @param path Path to the file relative to the demo directory
- * @returns Response object with the file content or error message
- */
-function serveFile(path: string): Response {
-  // Add demo directory to path
-  const filePath: string = join(DEMO_DIR, path);
-  
-  // Handle index.html for directory request
-  let resolvedPath: string = filePath;
-  if (filePath.endsWith('/') || !filePath.includes('.')) {
-    resolvedPath = join(filePath, 'index.html');
-  }
-  
-  // Check if file exists
-  if (!existsSync(resolvedPath)) {
-    return new Response("File not found", { status: 404 });
-  }
-  
-  // Get file extension for content type
-  const ext: string = resolvedPath.substring(resolvedPath.lastIndexOf('.'));
-  const contentType: string = contentTypes[ext] || "application/octet-stream";
-  
-  // Read and serve the file
-  try {
-    const content: Buffer = readFileSync(resolvedPath);
-    
-    // For JavaScript files, ensure they're served with the correct MIME type
-    // and additionally add proper headers for modules
-    if (ext === '.js') {
-      return new Response(content, {
-        headers: { 
-          "Content-Type": "text/javascript",
-          "Cache-Control": "no-cache"
-        }
-      });
-    }
-    
-    return new Response(content, {
-      headers: { "Content-Type": contentType }
-    });
-  } catch (error) {
-    console.error(`Error serving ${resolvedPath}:`, error);
-    return new Response("Server error", { status: 500 });
-  }
-}
-
-// Server options with typings
-const serverOptions: ServeOptions = {
-  port: PORT,
-  fetch(req: Request): Response | Promise<Response> {
-    const url = new URL(req.url);
-    const path = url.pathname === '/' ? '/' : url.pathname;
-    
-    return serveFile(path);
-  },
-};
-
-// Create and start the server
-const server = serve(serverOptions);
-
-console.log(`Server running at http://localhost:${PORT}`);

package/src/components/slider/features/slider.ts

@@ -1,318 +0,0 @@
-// src/components/slider/features/slider.ts
-import { SLIDER_EVENTS } from '../constants';
-import { SliderConfig } from '../types';
-import { createUiHelpers } from './ui';
-import { createHandlers } from './handlers';
-
-/**
- * Add main slider functionality to component
- * @param config Slider configuration
- * @returns Component enhancer with slider functionality
- */
-export const withSlider = (config: SliderConfig) => component => {
-  // Ensure component has events
-  if (!component.events) {
-    component.events = {
-      listeners: {},
-      on(event, handler) {
-        if (!this.listeners[event]) this.listeners[event] = [];
-        this.listeners[event].push(handler);
-        return this;
-      },
-      off(event, handler) {
-        if (this.listeners[event]) {
-          this.listeners[event] = this.listeners[event].filter(h => h !== handler);
-        }
-        return this;
-      },
-      trigger(event, data) {
-        if (this.listeners[event]) {
-          this.listeners[event].forEach(handler => handler(data));
-        }
-        return this;
-      }
-    };
-  }
-  
-  // Initialize state
-  const state = {
-    value: config.value !== undefined ? config.value : 0,
-    secondValue: config.secondValue !== undefined ? config.secondValue : null,
-    min: config.min !== undefined ? config.min : 0,
-    max: config.max !== undefined ? config.max : 100,
-    step: config.step !== undefined ? config.step : 1,
-    dragging: false,
-    activeBubble: null,
-    activeHandle: null,
-    ticks: [],
-    valueHideTimer: null,
-    component
-  };
-  
-  // Create event helpers
-  const eventHelpers = {
-    triggerEvent(eventName, originalEvent = null) {
-      const eventData = {
-        slider: state.component,
-        value: state.value,
-        secondValue: state.secondValue,
-        originalEvent,
-        preventDefault: () => { eventData.defaultPrevented = true; },
-        defaultPrevented: false
-      };
-      
-      state.component.events.trigger(eventName, eventData);
-      return eventData;
-    }
-  };
-  
-  // Create UI helpers and handlers
-  const uiHelpers = createUiHelpers(config, state);
-  const handlers = createHandlers(config, state, uiHelpers, eventHelpers);
-  
-  // Initialize slider
-  const initSlider = () => {
-    // Set ARIA attributes
-    component.element.setAttribute('aria-valuemin', String(state.min));
-    component.element.setAttribute('aria-valuemax', String(state.max));
-    component.element.setAttribute('aria-valuenow', String(state.value));
-    
-    if (!component.structure) {
-      console.warn('Cannot initialize slider: missing structure');
-      return;
-    }
-    
-    const { handle, secondHandle } = component.structure;
-    
-    if (handle) {
-      handle.setAttribute('aria-valuemin', String(state.min));
-      handle.setAttribute('aria-valuemax', String(state.max));
-      handle.setAttribute('aria-valuenow', String(state.value));
-      
-      if (config.range && secondHandle && state.secondValue !== null) {
-        secondHandle.setAttribute('aria-valuemin', String(state.min));
-        secondHandle.setAttribute('aria-valuemax', String(state.max));
-        secondHandle.setAttribute('aria-valuenow', String(state.secondValue));
-      }
-    }
-    
-    // Initial UI update
-    uiHelpers.updateUi();
-    
-    // Generate ticks if needed
-    if (config.ticks || config.tickLabels) {
-      uiHelpers.generateTicks();
-    }
-    
-    // Setup event listeners
-    handlers.setupEventListeners();
-    
-    // Force one more UI update after a delay to ensure proper positioning
-    setTimeout(() => {
-      uiHelpers.updateUi();
-    }, 50);
-  };
-  
-  // Register with lifecycle if available
-  if (component.lifecycle) {
-    const originalDestroy = component.lifecycle.destroy || (() => {});
-    component.lifecycle.destroy = () => {
-      handlers.cleanupEventListeners();
-      originalDestroy();
-    };
-  }
-  
-  // Initialize slider
-  initSlider();
-  
-  // Return enhanced component
-  return {
-    ...component,
-    slider: {
-      /**
-       * Sets slider value
-       * @param value New value
-       * @param triggerEvent Whether to trigger change event
-       * @returns Slider controller for chaining
-       */
-      setValue(value, triggerEvent = true) {
-        const newValue = uiHelpers.clamp(value, state.min, state.max);
-        state.value = newValue;
-        uiHelpers.updateUi();
-        
-        if (triggerEvent) {
-          eventHelpers.triggerEvent(SLIDER_EVENTS.CHANGE);
-        }
-        
-        return this;
-      },
-      
-      /**
-       * Gets slider value
-       * @returns Current value
-       */
-      getValue() {
-        return state.value;
-      },
-      
-      /**
-       * Sets secondary slider value (for range slider)
-       * @param value New secondary value
-       * @param triggerEvent Whether to trigger change event
-       * @returns Slider controller for chaining
-       */
-      setSecondValue(value, triggerEvent = true) {
-        if (!config.range) return this;
-        
-        const newValue = uiHelpers.clamp(value, state.min, state.max);
-        state.secondValue = newValue;
-        uiHelpers.updateUi();
-        
-        if (triggerEvent) {
-          eventHelpers.triggerEvent(SLIDER_EVENTS.CHANGE);
-        }
-        
-        return this;
-      },
-      
-      /**
-       * Gets secondary slider value
-       * @returns Current secondary value or null
-       */
-      getSecondValue() {
-        return config.range ? state.secondValue : null;
-      },
-      
-      /**
-       * Sets slider minimum value
-       * @param min New minimum value
-       * @returns Slider controller for chaining
-       */
-      setMin(min) {
-        state.min = min;
-        
-        // Update ARIA attributes
-        component.element.setAttribute('aria-valuemin', String(min));
-        if (component.structure.handle) {
-          component.structure.handle.setAttribute('aria-valuemin', String(min));
-        }
-        
-        if (config.range && component.structure.secondHandle) {
-          component.structure.secondHandle.setAttribute('aria-valuemin', String(min));
-        }
-        
-        // Clamp values to new min
-        if (state.value < min) state.value = min;
-        if (config.range && state.secondValue !== null && state.secondValue < min) {
-          state.secondValue = min;
-        }
-        
-        // Regenerate ticks if needed
-        if (config.ticks || config.tickLabels) {
-          uiHelpers.generateTicks();
-        }
-        
-        uiHelpers.updateUi();
-        return this;
-      },
-      
-      /**
-       * Gets slider minimum value
-       * @returns Current minimum value
-       */
-      getMin() {
-        return state.min;
-      },
-      
-      /**
-       * Sets slider maximum value
-       * @param max New maximum value
-       * @returns Slider controller for chaining
-       */
-      setMax(max) {
-        state.max = max;
-        
-        // Update ARIA attributes
-        component.element.setAttribute('aria-valuemax', String(max));
-        if (component.structure.handle) {
-          component.structure.handle.setAttribute('aria-valuemax', String(max));
-        }
-        
-        if (config.range && component.structure.secondHandle) {
-          component.structure.secondHandle.setAttribute('aria-valuemax', String(max));
-        }
-        
-        // Clamp values to new max
-        if (state.value > max) state.value = max;
-        if (config.range && state.secondValue !== null && state.secondValue > max) {
-          state.secondValue = max;
-        }
-        
-        // Regenerate ticks if needed
-        if (config.ticks || config.tickLabels) {
-          uiHelpers.generateTicks();
-        }
-        
-        uiHelpers.updateUi();
-        return this;
-      },
-      
-      /**
-       * Gets slider maximum value
-       * @returns Current maximum value
-       */
-      getMax() {
-        return state.max;
-      },
-      
-      /**
-       * Sets slider step size
-       * @param step New step size
-       * @returns Slider controller for chaining
-       */
-      setStep(step) {
-        state.step = step;
-        
-        // Add or remove discrete class
-        component.element.classList[step > 0 ? 'add' : 'remove'](
-          `${component.getClass('slider')}--discrete`
-        );
-        
-        // Regenerate ticks if needed
-        if (config.ticks || config.tickLabels) {
-          uiHelpers.generateTicks();
-          uiHelpers.updateTicks();
-        }
-        
-        return this;
-      },
-      
-      /**
-       * Gets slider step size
-       * @returns Current step size
-       */
-      getStep() {
-        return state.step;
-      },
-      
-      /**
-       * Regenerate tick marks and labels
-       * @returns Slider controller for chaining
-       */
-      regenerateTicks() {
-        uiHelpers.generateTicks();
-        uiHelpers.updateTicks();
-        return this;
-      },
-      
-      /**
-       * Update all UI elements
-       * @returns Slider controller for chaining
-       */
-      updateUi() {
-        uiHelpers.updateUi();
-        return this;
-      }
-    }
-  };
-};