mtrl 0.2.7 → 0.2.9

package/src/components/navigation/constants.ts

@@ -1,200 +0,0 @@
-// src/components/navigation/constants.ts
-
-/**
- * Navigation variants following Material Design 3
- */
-export const NAV_VARIANTS = {
-  RAIL: 'rail', // Vertical slim navigation
-  DRAWER: 'drawer', // Expandable side navigation
-  BAR: 'bar', // Bottom or top navigation bar
-  DRAWER_MODAL: 'modal', // Modal drawer overlay
-  DRAWER_STANDARD: 'standard' // Standard permanent drawer
-} as const;
-
-/**
- * Navigation positions
- */
-export const NAV_POSITIONS = {
-  LEFT: 'left',
-  RIGHT: 'right',
-  TOP: 'top',
-  BOTTOM: 'bottom'
-} as const;
-
-/**
- * Navigation behaviors
- */
-export const NAV_BEHAVIORS = {
-  FIXED: 'fixed', // Always visible
-  DISMISSIBLE: 'dismissible', // Can be dismissed/hidden
-  MODAL: 'modal' // Overlays content with scrim
-} as const;
-
-/**
- * Navigation state classes
- */
-export const NAV_STATES = {
-  ACTIVE: 'active', // Currently selected item
-  DISABLED: 'disabled', // Disabled state
-  EXPANDED: 'expanded', // Drawer expanded state
-  COLLAPSED: 'collapsed', // Drawer collapsed state
-  HOVERED: 'hovered', // Hover state
-  FOCUSED: 'focused', // Keyboard focus state
-  PRESSED: 'pressed' // Press/click state
-} as const;
-
-/**
- * Navigation element classes
- */
-export const NAV_CLASSES = {
-  ROOT: 'nav',
-  ITEM: 'nav-item',
-  ITEM_CONTAINER: 'nav-item-container',
-  ICON: 'nav-item-icon',
-  LABEL: 'nav-item-label',
-  BADGE: 'nav-item-badge',
-  DIVIDER: 'nav-divider',
-  SCRIM: 'nav-scrim',
-  GROUP: 'nav-group',
-  GROUP_TITLE: 'nav-group-title',
-  SUBTITLE: 'nav-subtitle',
-  NESTED_CONTAINER: 'nav-nested-container',
-  NESTED_ITEM: 'nav-nested-item',
-  EXPAND_ICON: 'nav-expand-icon'
-} as const;
-
-/**
- * Validation schema for navigation configuration
- */
-export const NAV_SCHEMA = {
-  type: 'object',
-  properties: {
-    variant: {
-      type: 'string',
-      enum: Object.values(NAV_VARIANTS),
-      optional: true,
-      default: NAV_VARIANTS.RAIL
-    },
-    position: {
-      type: 'string',
-      enum: Object.values(NAV_POSITIONS),
-      optional: true,
-      default: NAV_POSITIONS.LEFT
-    },
-    behavior: {
-      type: 'string',
-      enum: Object.values(NAV_BEHAVIORS),
-      optional: true,
-      default: NAV_BEHAVIORS.FIXED
-    },
-    items: {
-      type: 'array',
-      optional: true,
-      default: []
-    },
-    groups: {
-      type: 'array',
-      optional: true
-    },
-    disabled: {
-      type: 'boolean',
-      optional: true
-    },
-    expanded: {
-      type: 'boolean',
-      optional: true
-    },
-    showLabels: {
-      type: 'boolean',
-      optional: true,
-      default: true
-    },
-    scrimEnabled: {
-      type: 'boolean',
-      optional: true,
-      default: false
-    },
-    class: {
-      type: 'string',
-      optional: true
-    }
-  }
-} as const;
-
-/**
- * Navigation item states
- */
-export const NAV_ITEM_STATES = {
-  EXPANDED: 'expanded',
-  COLLAPSED: 'collapsed'
-} as const;
-
-/**
- * Navigation item schema
- * Enhanced with support for nested items
- */
-export const NAV_ITEM_SCHEMA = {
-  type: 'object',
-  properties: {
-    id: {
-      type: 'string',
-      required: true
-    },
-    icon: {
-      type: 'string',
-      required: true
-    },
-    label: {
-      type: 'string',
-      required: true
-    },
-    badge: {
-      type: 'string',
-      optional: true
-    },
-    disabled: {
-      type: 'boolean',
-      optional: true
-    },
-    subtitle: {
-      type: 'string',
-      optional: true
-    },
-    groupId: {
-      type: 'string',
-      optional: true
-    },
-    items: {
-      type: 'array',
-      optional: true,
-      description: 'Nested navigation items'
-    },
-    expanded: {
-      type: 'boolean',
-      optional: true,
-      default: false
-    }
-  }
-} as const;
-
-/**
- * Navigation group schema
- */
-export const NAV_GROUP_SCHEMA = {
-  type: 'object',
-  properties: {
-    id: {
-      type: 'string',
-      required: true
-    },
-    title: {
-      type: 'string',
-      required: true
-    },
-    expanded: {
-      type: 'boolean',
-      optional: true,
-      default: true
-    }
-  }
-} as const;

package/src/components/progress/constants.ts

@@ -1,29 +0,0 @@
-// src/components/progress/constants.ts
-
-/**
- * Progress component variants
- */
-export const PROGRESS_VARIANTS = {
-  /** Standard linear progress bar */
-  LINEAR: 'linear',
-  
-  /** Circular progress indicator */
-  CIRCULAR: 'circular',
-  
-  /** Progress with known value */
-  DETERMINATE: 'determinate',
-  
-  /** Indeterminate progress animation */
-  INDETERMINATE: 'indeterminate'
-} as const;
-
-/**
- * Progress component events
- */
-export const PROGRESS_EVENTS = {
-  /** Fired when value changes */
-  VALUE_CHANGE: 'valueChange',
-  
-  /** Fired when component becomes determinate/indeterminate */
-  STATE_CHANGE: 'stateChange'
-} as const;

package/src/components/search/constants.ts

@@ -1,21 +0,0 @@
-// src/components/search/constants.ts
-
-/**
- * Available search component variants
- */
-export const SEARCH_VARIANTS = {
-  BAR: 'bar',
-  VIEW: 'view'
-} as const;
-
-/**
- * Available search component events
- */
-export const SEARCH_EVENTS = {
-  FOCUS: 'focus',
-  BLUR: 'blur',
-  INPUT: 'input',
-  SUBMIT: 'submit',
-  CLEAR: 'clear',
-  ICON_CLICK: 'iconClick'
-} as const;

package/src/components/segmented-button/constants.ts

@@ -1,42 +0,0 @@
-// src/components/segmented-button/constants.ts
-import { SelectionMode } from './types';
-
-/**
- * Default checkbox icon SVG used for selected state
- * @internal
- */
-export const DEFAULT_CHECKMARK_ICON = `
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" 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>`;
-
-/**
- * Default configuration values for segmented buttons
- * @internal
- */
-export const DEFAULT_CONFIG = {
-  mode: SelectionMode.SINGLE,
-  ripple: true
-};
-
-/**
- * Event names used by the segmented button component
- * @internal
- */
-export const EVENTS = {
-  CHANGE: 'change'
-};
-
-/**
- * CSS classes used by the segmented button component
- * @internal
- */
-export const CLASSES = {
-  CONTAINER: 'segmented-button',
-  SEGMENT: 'segmented-button-segment',
-  SELECTED: 'selected',
-  DISABLED: 'disabled',
-  ICON: 'icon',
-  CHECKMARK: 'checkmark',
-  TEXT: 'text'
-};

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;
-      }
-    }
-  };
-};