mtrl 0.3.8 → 0.4.0

package/src/core/composition/features/label.ts

@@ -1,155 +0,0 @@
-// src/core/composition/features/label.ts
-import { createElement } from '../../dom/create';
-
-/**
- * Configuration for label feature
- */
-export interface LabelConfig {
-  /**
-   * Label text content
-   */
-  label?: string;
-  
-  /**
-   * Position of the label ('start', 'end', 'top', or 'bottom')
-   */
-  labelPosition?: 'start' | 'end' | 'top' | 'bottom';
-  
-  /**
-   * CSS class prefix
-   */
-  prefix?: string;
-  
-  /**
-   * Component name for class generation
-   */
-  componentName?: string;
-  
-  /**
-   * ID for the input element this label is associated with
-   */
-  id?: string;
-  
-  /**
-   * Whether the labeled element is required
-   */
-  required?: boolean;
-  
-  [key: string]: any;
-}
-
-/**
- * Enhances component schema with a label element
- * Unlike the traditional withLabel, this modifies the schema
- * without creating actual DOM elements.
- * 
- * @param config Configuration containing label information
- * @returns Component enhancer that adds label to schema
- * 
- * @example
- * ```ts
- * // Add label to a component schema
- * const component = pipe(
- *   createBase,
- *   withLayout(config),
- *   withLabel(config)
- * )(config);
- * ```
- */
-export const withLabel = (config: LabelConfig) => component => {
-  // If no label or missing schema, return unmodified
-  if (!config.label || !component.schema) {
-    return component;
-  }
-  
-  try {
-    // Get class name generator
-    const getClass = (className) => {
-      if (typeof component.getClass === 'function') {
-        return component.getClass(className);
-      }
-      const prefix = config.prefix || 'mtrl';
-      return `${prefix}-${className}`;
-    };
-    
-    // Get component details
-    const prefix = config.prefix || component.config?.prefix || 'mtrl';
-    const componentName = config.componentName || component.componentName || 'component';
-    
-    // Clone the schema
-    const schema = JSON.parse(JSON.stringify(component.schema));
-    
-    // Determine position (default to 'start')
-    const position = config.labelPosition || 'start';
-    
-    // Create the label element definition
-    let labelContent = config.label;
-    let labelChildren = null;
-    
-    // Add required indicator if specified
-    if (config.required) {
-      // For schema we need to define a child element
-      labelChildren = {
-        requiredIndicator: {
-          name: 'requiredIndicator',
-          creator: createElement,
-          options: {
-            tag: 'span',
-            className: `${prefix}-${componentName}-label-required`,
-            text: '*',
-            attrs: {
-              'aria-hidden': 'true'
-            }
-          }
-        }
-      };
-      
-      // Clear the content since we'll use children instead
-      labelContent = config.label;
-    }
-    
-    // Create label element definition
-    const labelDef = {
-      name: 'label',
-      creator: createElement,
-      options: {
-        tag: 'label',
-        className: [
-          `${prefix}-${componentName}-label`,
-          `${prefix}-${componentName}-label--${position}`
-        ],
-        attrs: {
-          'for': config.id // Optional connection to input by ID
-        },
-        text: labelContent
-      }
-    };
-    
-    // Add children if we have them
-    if (labelChildren) {
-      labelDef.children = labelChildren;
-    }
-    
-    // Add label to root element's children
-    if (position === 'end' || position === 'bottom') {
-      // Add at end of root element
-      schema.element.children.label = labelDef;
-    } else {
-      // Add at beginning of root element (start/top)
-      const existingChildren = { ...schema.element.children };
-      schema.element.children = {
-        label: labelDef,
-        ...existingChildren
-      };
-    }
-    
-    // Return component with updated schema
-    return {
-      ...component,
-      schema
-    };
-  } catch (error) {
-    console.warn('Error enhancing schema with label:', error);
-    return component;
-  }
-};

package/src/core/config.ts

@@ -1,211 +0,0 @@
-// src/core/config.ts
-
-/**
- * Library prefix used for all components
- */
-export const PREFIX = 'mtrl';
-
-/**
- * Gets a prefixed component class name
- * @param type - Component type
- * @returns Prefixed class name
- */
-export const getComponentClass = (type: string): string => `${PREFIX}-${type}`;
-
-/**
- * Gets a BEM modifier class name
- * @param baseClass - Base class name
- * @param modifier - Modifier name
- * @returns Modifier class name
- */
-export const getModifierClass = (baseClass: string, modifier: string): string => `${baseClass}--${modifier}`;
-
-/**
- * Gets a BEM element class name
- * @param baseClass - Base class name
- * @param element - Element name
- * @returns Element class name
- */
-export const getElementClass = (baseClass: string, element: string): string => `${baseClass}-${element}`;
-
-/**
- * Component type identifiers
- */
-export enum COMPONENTS {
-  BUTTON = 'button',
-  TEXTFIELD = 'textfield',
-  CONTAINER = 'container',
-  SNACKBAR = 'snackbar',
-  SWITCH = 'switch'
-}
-
-/**
- * Theme configuration interface
- */
-export interface ThemeConfig {
-  /**
-   * Theme name
-   */
-  name: string;
-  
-  /**
-   * Theme CSS variables
-   */
-  variables: Record<string, string>;
-  
-  /**
-   * Theme variants
-   */
-  variants: Record<string, any>;
-}
-
-/**
- * Component configuration interface
- */
-export interface ComponentConfig {
-  prefix: string;
-  type: string;
-  baseClass: string;
-  getClass: () => string;
-  getModifierClass: (modifier: string) => string;
-  getElementClass: (element: string) => string;
-  withTheme: (theme: string) => ThemedComponentConfig;
-  withVariants: (...variants: string[]) => VariantComponentConfig;
-  withStates: (...states: string[]) => StateComponentConfig;
-}
-
-/**
- * Themed component configuration interface
- */
-export interface ThemedComponentConfig extends ComponentConfig {
-  theme: string;
-  getThemeClass: (variant: string) => string;
-}
-
-/**
- * Variant component configuration interface
- */
-export interface VariantComponentConfig extends ComponentConfig {
-  variants: string[];
-  hasVariant: (variant: string) => boolean;
-  getVariantClass: (variant: string) => string | null;
-}
-
-/**
- * State component configuration interface
- */
-export interface StateComponentConfig extends ComponentConfig {
-  states: string[];
-  getStateClass: (state: string) => string | null;
-}
-
-/**
- * Creates a component configuration object
- * @param type - Component type
- * @returns Component configuration interface
- */
-export const createComponentConfig = (type: string): ComponentConfig => {
-  const baseClass = `${PREFIX}-${type}`;
-
-  // Create the base config object
-  const config: ComponentConfig = {
-    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
- */
-export enum 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 block - Block name
-   * @param element - Element name
-   * @param modifier - Modifier name
-   * @returns BEM class name
-   */
-  bem: (block: string, element?: string, modifier?: string): string => {
-    let className = block;
-    if (element) className += `-${element}`;
-    if (modifier) className += `--${modifier}`;
-    return className;
-  },
-
-  /**
-   * Joins class names, filtering out falsy values
-   * @param classes - Class names to join
-   * @returns Joined class names
-   */
-  join: (...classes: (string | undefined | null | false)[]): string => 
-    classes.filter(Boolean).join(' ')
-};
-
-/**
- * Creates a themed component configuration
- * @param type - Component type
- * @param theme - Theme configuration
- * @returns Themed component configuration
- */
-export const createThemedComponent = (type: string, theme: ThemeConfig): ThemedComponentConfig => {
-  const config = createComponentConfig(type);
-
-  return {
-    ...config,
-    theme: theme.name,
-
-    // 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
-      }), {} as Record<string, string>)
-  };
-};

package/src/core/dom/attributes.ts

@@ -1,33 +0,0 @@
-// src/core/dom/attributes.ts
-/**
- * @module core/dom
- * @description DOM manipulation utilities
- */
-
-/**
- * Sets multiple attributes on an element
- * @memberof module:core/dom
- * @function setAttributes
- * @param {HTMLElement} element - Target element
- * @param {Record<string, any>} attrs - Attributes to set
- * @returns {HTMLElement} Modified element
- */
-export const setAttributes = (element: HTMLElement, attrs: Record<string, any> = {}): HTMLElement => {
-  Object.entries(attrs).forEach(([key, value]) => {
-    if (value != null) element.setAttribute(key, value.toString());
-  });
-  return element;
-};
-
-/**
- * Removes multiple attributes from an element
- * @memberof module:core/dom
- * @function removeAttributes
- * @param {HTMLElement} element - Target element
- * @param {string[]} attrs - Attributes to remove
- * @returns {HTMLElement} Modified element
- */
-export const removeAttributes = (element: HTMLElement, attrs: string[] = []): HTMLElement => {
-  attrs.forEach(attr => element.removeAttribute(attr));
-  return element;
-};

package/src/core/dom/classes.ts

@@ -1,132 +0,0 @@
-// src/core/dom/classes.ts
-/**
- * @module core/dom
- * @description DOM manipulation utilities optimized for performance
- */
-
-import { normalizeClasses } from '../utils';
-import { PREFIX } from '../config';
-
-// Constant for prefix with dash for better performance
-const PREFIX_WITH_DASH = `${PREFIX}-`;
-
-/**
- * Adds multiple classes to an element
- * Automatically adds prefix to classes that don't already have it
- * Optimized for minimal array operations and DOM interactions
- * 
- * @param {HTMLElement} element - Target element
- * @param {...(string | string[])} classes - Classes to add
- * @returns {HTMLElement} Modified element
- */
-export const addClass = (element: HTMLElement, ...classes: (string | string[])[]): HTMLElement => {
-  const normalizedClasses = normalizeClasses(...classes);
-  
-  // Early return for empty classes
-  if (!normalizedClasses.length) return element;
-  
-  // Using DOMTokenList's add() with multiple arguments is faster than multiple add() calls
-  // But we need to handle prefixing first
-  const prefixedClasses: string[] = [];
-  
-  for (let i = 0; i < normalizedClasses.length; i++) {
-    const cls = normalizedClasses[i];
-    if (!cls) continue;
-    
-    prefixedClasses.push(
-      cls.startsWith(PREFIX_WITH_DASH) ? cls : PREFIX_WITH_DASH + cls
-    );
-  }
-  
-  // Add all classes in a single operation if possible
-  if (prefixedClasses.length) {
-    element.classList.add(...prefixedClasses);
-  }
-  
-  return element;
-};
-
-/**
- * Removes multiple classes from an element
- * Handles only exact class names as specified (no automatic prefixing)
- * For better performance, clients should know exactly which classes to remove
- * 
- * @param {HTMLElement} element - Target element
- * @param {...(string | string[])} classes - Classes to remove
- * @returns {HTMLElement} Modified element
- */
-export const removeClass = (element: HTMLElement, ...classes: (string | string[])[]): HTMLElement => {
-  const normalizedClasses = normalizeClasses(...classes);
-  
-  // Early return for empty classes
-  if (!normalizedClasses.length) return element;
-  
-  // Prepare prefixed class names
-  const prefixedClasses: string[] = [];
-  
-  for (let i = 0; i < normalizedClasses.length; i++) {
-    const cls = normalizedClasses[i];
-    if (!cls) continue;
-    
-    // Only add the prefixed version
-    prefixedClasses.push(
-      cls.startsWith(PREFIX_WITH_DASH) ? cls : PREFIX_WITH_DASH + cls
-    );
-  }
-  
-  // Remove all classes in a single operation if possible
-  if (prefixedClasses.length) {
-    element.classList.remove(...prefixedClasses);
-  }
-  
-  return element;
-};
-
-/**
- * Toggles multiple classes on an element
- * Automatically adds prefix to classes that don't already have it
- * 
- * @param {HTMLElement} element - Target element
- * @param {...(string | string[])} classes - Classes to toggle
- * @returns {HTMLElement} Modified element
- */
-export const toggleClass = (element: HTMLElement, ...classes: (string | string[])[]): HTMLElement => {
-  const normalizedClasses = normalizeClasses(...classes);
-  
-  for (let i = 0; i < normalizedClasses.length; i++) {
-    const cls = normalizedClasses[i];
-    if (!cls) continue;
-    
-    const prefixedClass = cls.startsWith(PREFIX_WITH_DASH) ? cls : PREFIX_WITH_DASH + cls;
-    element.classList.toggle(prefixedClass);
-  }
-  
-  return element;
-};
-
-/**
- * Checks if an element has all specified classes
- * Automatically adds prefix to classes that don't already have it
- * 
- * @param {HTMLElement} element - Target element
- * @param {...(string | string[])} classes - Classes to check
- * @returns {boolean} True if element has all specified classes
- */
-export const hasClass = (element: HTMLElement, ...classes: (string | string[])[]): boolean => {
-  const normalizedClasses = normalizeClasses(...classes);
-  
-  // Early return for empty classes (technically all are present)
-  if (!normalizedClasses.length) return true;
-  
-  for (let i = 0; i < normalizedClasses.length; i++) {
-    const cls = normalizedClasses[i];
-    if (!cls) continue;
-    
-    const prefixedClass = cls.startsWith(PREFIX_WITH_DASH) ? cls : PREFIX_WITH_DASH + cls;
-    if (!element.classList.contains(prefixedClass)) {
-      return false;
-    }
-  }
-  
-  return true;
-};