mtrl 0.3.8 → 0.4.0

package/src/components/divider/config.ts

@@ -1,165 +0,0 @@
-// src/components/divider/config.ts
-import { createComponentConfig } from '../../core/config/component-config';
-
-/**
- * Configuration options for divider components
- * 
- * Controls the appearance, orientation, and behavior of Material Design 3 dividers.
- * 
- * @category Components
- */
-export interface DividerConfig {
-  /**
-   * CSS class prefix (defaults to 'mtrl')
-   * 
-   * Used for generating BEM-style class names for the component
-   */
-  prefix?: string;
-  
-  /**
-   * CSS class to add to the divider
-   * 
-   * Additional classes for custom styling needs
-   * 
-   * @example 'my-custom-divider'
-   */
-  class?: string;
-  
-  /**
-   * Orientation of the divider
-   * 
-   * - 'horizontal': Creates a horizontal line (default)
-   * - 'vertical': Creates a vertical line
-   * 
-   * @default 'horizontal'
-   * 
-   * @example
-   * ```typescript
-   * // Create a vertical divider
-   * createDivider({ orientation: 'vertical' })
-   * ```
-   */
-  orientation?: 'horizontal' | 'vertical';
-  
-  /**
-   * Variant of the divider
-   * 
-   * Controls how the divider is inset within its container:
-   * - 'full-width': Spans the entire width/height (default)
-   * - 'inset': Adds space at the start (left for horizontal, top for vertical)
-   * - 'middle-inset': Adds space at both start and end
-   * 
-   * Most commonly used in lists to align dividers with text content.
-   * 
-   * @default 'full-width'
-   * 
-   * @example
-   * ```typescript
-   * // Create a list divider with left inset
-   * createDivider({ variant: 'inset' })
-   * ```
-   */
-  variant?: 'full-width' | 'inset' | 'middle-inset';
-  
-  /**
-   * Custom inset value (left margin for horizontal, top margin for vertical)
-   * 
-   * Overrides the default inset spacing at the start of the divider.
-   * Only applies when variant is 'inset' or 'middle-inset'.
-   * 
-   * @default 16 for 'inset' and 'middle-inset' variants
-   * 
-   * @example
-   * ```typescript
-   * // Create a divider with 24px left inset
-   * createDivider({ variant: 'inset', insetStart: 24 })
-   * ```
-   */
-  insetStart?: number;
-  
-  /**
-   * Custom inset end value (right margin for horizontal, bottom margin for vertical)
-   * 
-   * Overrides the default inset spacing at the end of the divider.
-   * Only applies when variant is 'middle-inset'.
-   * 
-   * @default 0 for 'inset', 16 for 'middle-inset'
-   * 
-   * @example
-   * ```typescript
-   * // Create a divider with custom insets on both sides
-   * createDivider({ variant: 'middle-inset', insetStart: 16, insetEnd: 24 })
-   * ```
-   */
-  insetEnd?: number;
-  
-  /**
-   * Color of the divider
-   * 
-   * Sets a custom color for the divider. Accepts any valid CSS color value.
-   * By default, dividers use the 'outline-variant' color from the Material theme.
-   * 
-   * @example
-   * ```typescript
-   * // Create a blue divider
-   * createDivider({ color: '#2196F3' })
-   * 
-   * // Create a divider with a semi-transparent color
-   * createDivider({ color: 'rgba(0, 0, 0, 0.12)' })
-   * ```
-   */
-  color?: string;
-  
-  /**
-   * Thickness of the divider in pixels
-   * 
-   * Controls the thickness (height for horizontal, width for vertical) of the divider.
-   * Material Design 3 typically uses 1px thickness for dividers.
-   * 
-   * @default 1
-   * 
-   * @example
-   * ```typescript
-   * // Create a bold divider
-   * createDivider({ thickness: 2 })
-   * ```
-   */
-  thickness?: number;
-  
-  /**
-   * Used internally for component composition
-   * 
-   * @internal
-   */
-  componentName?: string;
-}
-
-/**
- * Default configuration for dividers
- * 
- * @internal
- */
-export const defaultConfig: Partial<DividerConfig> = {
-  orientation: 'horizontal',
-  variant: 'full-width',
-  thickness: 1
-};
-
-/**
- * Creates a base configuration object for divider
- * 
- * Merges user-provided configuration with default values and ensures
- * all required properties have values.
- * 
- * @param config - User provided configuration
- * @returns Complete configuration with defaults applied
- * 
- * @internal
- */
-export const createBaseConfig = (config: DividerConfig = {}): DividerConfig => {
-  return createComponentConfig(
-    defaultConfig as DividerConfig,
-    config,
-    'divider'
-  );
-};

package/src/components/divider/features.ts

@@ -1,233 +0,0 @@
-// src/components/divider/features.ts
-import { BaseComponent, ElementComponent } from '../../core/compose';
-import { DividerConfig } from './config';
-import { DividerComponent } from './types';
-
-/**
- * Adds orientation functionality to divider
- * 
- * Higher-order function that enhances a component with the ability to be
- * oriented horizontally (default) or vertically. Controls the appropriate
- * CSS classes and dimensional styling based on orientation.
- * 
- * @param config - Divider configuration
- * @returns Function that enhances a component with orientation capabilities
- * 
- * @internal
- */
-export const withOrientation = (config: DividerConfig) => 
-  <C extends ElementComponent & BaseComponent>(component: C): C & Partial<DividerComponent> => {
-    const orientation = config.orientation || 'horizontal';
-    
-    // Apply the orientation class
-    component.element.classList.add(`${component.getClass('divider')}--${orientation}`);
-    
-    // Set styles based on orientation and thickness
-    const thickness = config.thickness || 1;
-    
-    if (orientation === 'horizontal') {
-      component.element.style.height = `${thickness}px`;
-      component.element.style.width = '100%';
-    } else {
-      component.element.style.width = `${thickness}px`;
-      component.element.style.height = '100%';
-    }
-    
-    return {
-      ...component,
-      
-      getOrientation() {
-        return orientation;
-      },
-      
-      setOrientation(newOrientation: 'horizontal' | 'vertical') {
-        // Remove existing orientation class
-        component.element.classList.remove(`${component.getClass('divider')}--${orientation}`);
-        
-        // Add new orientation class
-        component.element.classList.add(`${component.getClass('divider')}--${newOrientation}`);
-        
-        // Update styles
-        if (newOrientation === 'horizontal') {
-          component.element.style.height = `${thickness}px`;
-          component.element.style.width = '100%';
-          
-          // Reset vertical styles
-          component.element.style.marginTop = '';
-          component.element.style.marginBottom = '';
-        } else {
-          component.element.style.width = `${thickness}px`;
-          component.element.style.height = '100%';
-          
-          // Reset horizontal styles
-          component.element.style.marginLeft = '';
-          component.element.style.marginRight = '';
-        }
-        
-        return this as unknown as DividerComponent;
-      }
-    };
-  };
-
-/**
- * Adds inset functionality to divider
- * 
- * Higher-order function that enhances a component with the ability to have
- * customized inset spacing. Supports three variants (full-width, inset, middle-inset)
- * and allows fine-grained control over start and end insets.
- * 
- * Insets are applied as margins in the appropriate direction based on orientation:
- * - For horizontal dividers: left/right margins
- * - For vertical dividers: top/bottom margins
- * 
- * @param config - Divider configuration
- * @returns Function that enhances a component with inset capabilities
- * 
- * @internal
- */
-export const withInset = (config: DividerConfig) => 
-  <C extends ElementComponent & Partial<DividerComponent>>(component: C): C & Partial<DividerComponent> => {
-    const variant = config.variant || 'full-width';
-    const orientation = config.orientation || 'horizontal';
-    
-    // Apply inset styles based on variant
-    if (variant === 'inset' || variant === 'middle-inset') {
-      if (orientation === 'horizontal') {
-        const insetStart = config.insetStart !== undefined ? config.insetStart : 16;
-        const insetEnd = config.insetEnd !== undefined ? config.insetEnd : (variant === 'middle-inset' ? 16 : 0);
-        
-        component.element.style.marginLeft = `${insetStart}px`;
-        component.element.style.marginRight = `${insetEnd}px`;
-      } else {
-        const insetStart = config.insetStart !== undefined ? config.insetStart : 16;
-        const insetEnd = config.insetEnd !== undefined ? config.insetEnd : (variant === 'middle-inset' ? 16 : 0);
-        
-        component.element.style.marginTop = `${insetStart}px`;
-        component.element.style.marginBottom = `${insetEnd}px`;
-      }
-    }
-    
-    return {
-      ...component,
-      
-      getVariant() {
-        return variant as 'full-width' | 'inset' | 'middle-inset';
-      },
-      
-      setVariant(newVariant: 'full-width' | 'inset' | 'middle-inset') {
-        // Remove existing variant class
-        component.element.classList.remove(`${component.getClass('divider')}--${variant}`);
-        
-        // Add new variant class
-        component.element.classList.add(`${component.getClass('divider')}--${newVariant}`);
-        
-        // Update styles
-        const currentOrientation = component.getOrientation ? component.getOrientation() : orientation;
-        
-        if (newVariant === 'full-width') {
-          if (currentOrientation === 'horizontal') {
-            component.element.style.marginLeft = '';
-            component.element.style.marginRight = '';
-          } else {
-            component.element.style.marginTop = '';
-            component.element.style.marginBottom = '';
-          }
-        } else {
-          const insetStart = config.insetStart !== undefined ? config.insetStart : 16;
-          const insetEnd = config.insetEnd !== undefined ? config.insetEnd : (newVariant === 'middle-inset' ? 16 : 0);
-          
-          if (currentOrientation === 'horizontal') {
-            component.element.style.marginLeft = `${insetStart}px`;
-            component.element.style.marginRight = `${insetEnd}px`;
-          } else {
-            component.element.style.marginTop = `${insetStart}px`;
-            component.element.style.marginBottom = `${insetEnd}px`;
-          }
-        }
-        
-        return this as unknown as DividerComponent;
-      },
-      
-      setInset(insetStart?: number, insetEnd?: number) {
-        const currentOrientation = component.getOrientation ? component.getOrientation() : orientation;
-        const currentVariant = component.getVariant ? component.getVariant() : variant;
-        
-        if (currentVariant !== 'full-width') {
-          if (currentOrientation === 'horizontal') {
-            if (insetStart !== undefined) {
-              component.element.style.marginLeft = `${insetStart}px`;
-            }
-            
-            if (insetEnd !== undefined) {
-              component.element.style.marginRight = `${insetEnd}px`;
-            }
-          } else {
-            if (insetStart !== undefined) {
-              component.element.style.marginTop = `${insetStart}px`;
-            }
-            
-            if (insetEnd !== undefined) {
-              component.element.style.marginBottom = `${insetEnd}px`;
-            }
-          }
-        }
-        
-        return this as unknown as DividerComponent;
-      }
-    };
-  };
-
-/**
- * Adds style customization to divider
- * 
- * Higher-order function that enhances a component with visual customization
- * capabilities, including:
- * - Custom thickness (height for horizontal, width for vertical dividers)
- * - Custom colors (background-color CSS property)
- * 
- * These styling options allow dividers to be visually adapted to different
- * design requirements while maintaining Material Design principles.
- * 
- * @param config - Divider configuration
- * @returns Function that enhances a component with style capabilities
- * 
- * @internal
- */
-export const withStyle = (config: DividerConfig) => 
-  <C extends ElementComponent & Partial<DividerComponent>>(component: C): C & Partial<DividerComponent> => {
-    // Apply custom color if provided
-    if (config.color) {
-      component.element.style.backgroundColor = config.color;
-    }
-    
-    // Apply thickness
-    const thickness = config.thickness || 1;
-    const orientation = config.orientation || 'horizontal';
-    
-    if (orientation === 'horizontal') {
-      component.element.style.height = `${thickness}px`;
-    } else {
-      component.element.style.width = `${thickness}px`;
-    }
-    
-    return {
-      ...component,
-      
-      setThickness(newThickness: number) {
-        const currentOrientation = component.getOrientation ? component.getOrientation() : orientation;
-        
-        if (currentOrientation === 'horizontal') {
-          component.element.style.height = `${newThickness}px`;
-        } else {
-          component.element.style.width = `${newThickness}px`;
-        }
-        
-        return this as unknown as DividerComponent;
-      },
-      
-      setColor(color: string) {
-        component.element.style.backgroundColor = color;
-        return this as unknown as DividerComponent;
-      }
-    };
-  };

package/src/components/divider/types.ts

@@ -1,132 +0,0 @@
-// src/components/divider/types.ts
-import { BaseComponent, ElementComponent } from '../../core/compose';
-
-/**
- * Divider component interface
- * 
- * Represents a Material Design 3 divider that separates content into distinct sections.
- * Provides methods for configuring the appearance, orientation, and inset behavior.
- * 
- * @category Components
- */
-export interface DividerComponent extends BaseComponent, ElementComponent {
-  /**
-   * Gets current orientation of the divider
-   * 
-   * @returns Current orientation ('horizontal' or 'vertical')
-   * 
-   * @example
-   * ```typescript
-   * const divider = createDivider();
-   * const orientation = divider.getOrientation(); // Returns 'horizontal' by default
-   * ```
-   */
-  getOrientation: () => 'horizontal' | 'vertical';
-  
-  /**
-   * Sets orientation of the divider
-   * 
-   * Changes the divider's orientation between horizontal (default) and vertical.
-   * This affects the divider's positioning, dimension constraints, and how insets are applied.
-   * 
-   * @param orientation - New orientation ('horizontal' or 'vertical')
-   * @returns DividerComponent instance for chaining
-   * 
-   * @example
-   * ```typescript
-   * // Change a divider from horizontal to vertical
-   * divider.setOrientation('vertical');
-   * ```
-   */
-  setOrientation: (orientation: 'horizontal' | 'vertical') => DividerComponent;
-  
-  /**
-   * Gets current variant of the divider
-   * 
-   * @returns Current variant ('full-width', 'inset', or 'middle-inset')
-   * 
-   * @example
-   * ```typescript
-   * const variant = divider.getVariant(); // Returns 'full-width' by default
-   * ```
-   */
-  getVariant: () => 'full-width' | 'inset' | 'middle-inset';
-  
-  /**
-   * Sets variant of the divider
-   * 
-   * Changes how the divider is inset within its container:
-   * - 'full-width': Spans the entire width/height of the container (default)
-   * - 'inset': Adds space at the start (left for horizontal, top for vertical)
-   * - 'middle-inset': Adds space at both start and end
-   * 
-   * @param variant - New variant
-   * @returns DividerComponent instance for chaining
-   * 
-   * @example
-   * ```typescript
-   * // Create a list divider with left inset
-   * divider.setVariant('inset');
-   * 
-   * // Create a divider with space on both sides
-   * divider.setVariant('middle-inset');
-   * ```
-   */
-  setVariant: (variant: 'full-width' | 'inset' | 'middle-inset') => DividerComponent;
-  
-  /**
-   * Sets custom inset values for the divider
-   * 
-   * Allows fine-grained control over inset spacing, overriding the default values
-   * applied by the variant. Only applies if variant is 'inset' or 'middle-inset'.
-   * 
-   * @param insetStart - Start inset value in pixels (left for horizontal, top for vertical)
-   * @param insetEnd - End inset value in pixels (right for horizontal, bottom for vertical)
-   * @returns DividerComponent instance for chaining
-   * 
-   * @example
-   * ```typescript
-   * // Create a divider with custom insets
-   * const divider = createDivider({ variant: 'inset' });
-   * divider.setInset(24, 8); // 24px from start, 8px from end
-   * ```
-   */
-  setInset: (insetStart?: number, insetEnd?: number) => DividerComponent;
-  
-  /**
-   * Sets thickness of the divider
-   * 
-   * Changes the divider's thickness (height for horizontal, width for vertical).
-   * The default thickness is 1px, following Material Design 3 guidelines.
-   * 
-   * @param thickness - Thickness in pixels
-   * @returns DividerComponent instance for chaining
-   * 
-   * @example
-   * ```typescript
-   * // Create a bold divider
-   * divider.setThickness(2);
-   * ```
-   */
-  setThickness: (thickness: number) => DividerComponent;
-  
-  /**
-   * Sets custom color for the divider
-   * 
-   * By default, dividers use the 'outline-variant' color from the theme.
-   * This method allows setting a custom color via any valid CSS color value.
-   * 
-   * @param color - CSS color value (hex, rgb, rgba, hsl, etc.)
-   * @returns DividerComponent instance for chaining
-   * 
-   * @example
-   * ```typescript
-   * // Create a blue divider
-   * divider.setColor('#2196F3');
-   * 
-   * // Create a semi-transparent divider
-   * divider.setColor('rgba(0, 0, 0, 0.12)');
-   * ```
-   */
-  setColor: (color: string) => DividerComponent;
-}