mtrl 0.2.6 → 0.2.7

package/src/components/divider/config.ts

@@ -0,0 +1,81 @@
+// src/components/divider/config.ts
+import { createComponentConfig } from '../../core/config/component-config';
+
+/**
+ * Configuration options for divider components
+ */
+export interface DividerConfig {
+  /**
+   * CSS class prefix (defaults to 'mtrl')
+   */
+  prefix?: string;
+  
+  /**
+   * CSS class to add to the divider
+   */
+  class?: string;
+  
+  /**
+   * Orientation of the divider ('horizontal' or 'vertical')
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical';
+  
+  /**
+   * Variant of the divider ('full-width' or 'inset')
+   * @default 'full-width'
+   */
+  variant?: 'full-width' | 'inset' | 'middle-inset';
+  
+  /**
+   * Custom inset value (left margin for horizontal, top margin for vertical)
+   * @default 16 for 'inset', undefined for 'full-width'
+   */
+  insetStart?: number;
+  
+  /**
+   * Custom inset end value (right margin for horizontal, bottom margin for vertical)
+   * @default 0 for 'inset', undefined for 'full-width'
+   */
+  insetEnd?: number;
+  
+  /**
+   * Color of the divider (uses 'outline-variant' from theme by default)
+   */
+  color?: string;
+  
+  /**
+   * Thickness of the divider in pixels
+   * @default 1
+   */
+  thickness?: number;
+  
+  /**
+   * Used internally for component composition
+   * @private
+   */
+  componentName?: string;
+}
+
+/**
+ * Default configuration for dividers
+ */
+export const defaultConfig: Partial<DividerConfig> = {
+  orientation: 'horizontal',
+  variant: 'full-width',
+  thickness: 1
+};
+
+/**
+ * Creates a base configuration object for divider
+ * 
+ * @param config - User provided configuration
+ * @returns Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: DividerConfig = {}): DividerConfig => {
+  return createComponentConfig(
+    defaultConfig as DividerConfig,
+    config,
+    'divider'
+  );
+};

package/src/components/divider/divider.ts

@@ -0,0 +1,37 @@
+// src/components/divider/divider.ts
+import {
+  createBase,
+  withElement,
+  pipe,
+  withVariant
+} from '../../core/compose';
+import { PREFIX } from '../../core/config';
+import { DividerConfig, createBaseConfig } from './config';
+import { withOrientation, withInset, withStyle } from './features';
+import { DividerComponent } from './types';
+
+/**
+ * Creates a divider component
+ * 
+ * @param config - Divider configuration options
+ * @returns Divider component instance
+ */
+export const createDivider = (config: DividerConfig = {}): DividerComponent => {
+  // Process configuration
+  const processedConfig = createBaseConfig(config);
+  
+  // Create component through composition
+  return pipe(
+    createBase,
+    withElement({
+      tag: 'hr',
+      componentName: 'divider',
+      prefix: processedConfig.prefix || PREFIX,
+      className: config.class
+    }),
+    withOrientation(processedConfig),
+    withVariant(processedConfig),
+    withInset(processedConfig),
+    withStyle(processedConfig)
+  )(processedConfig) as DividerComponent;
+};

package/src/components/divider/features.ts

@@ -0,0 +1,207 @@
+// src/components/divider/features.ts
+import { BaseComponent, ElementComponent } from '../../core/compose';
+import { DividerConfig } from './config';
+import { DividerComponent } from './types';
+
+/**
+ * Adds orientation functionality to divider
+ * 
+ * @param config - Divider configuration
+ * @returns Function that enhances a component with orientation capabilities
+ */
+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
+ * 
+ * @param config - Divider configuration
+ * @returns Function that enhances a component with inset capabilities
+ */
+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
+ * 
+ * @param config - Divider configuration
+ * @returns Function that enhances a component with style capabilities
+ */
+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/index.ts

@@ -0,0 +1,5 @@
+// src/components/divider/index.ts
+
+export { createDivider } from './divider';
+export type { DividerConfig } from './config';
+export type { DividerComponent } from './types';

package/src/components/divider/types.ts

@@ -0,0 +1,55 @@
+// src/components/divider/types.ts
+import { BaseComponent, ElementComponent } from '../../core/compose';
+
+/**
+ * Divider component interface
+ */
+export interface DividerComponent extends BaseComponent, ElementComponent {
+  /**
+   * Gets current orientation
+   * @returns Current orientation
+   */
+  getOrientation: () => 'horizontal' | 'vertical';
+  
+  /**
+   * Sets orientation of the divider
+   * @param orientation - New orientation
+   * @returns DividerComponent instance for chaining
+   */
+  setOrientation: (orientation: 'horizontal' | 'vertical') => DividerComponent;
+  
+  /**
+   * Gets current variant
+   * @returns Current variant
+   */
+  getVariant: () => 'full-width' | 'inset' | 'middle-inset';
+  
+  /**
+   * Sets variant of the divider
+   * @param variant - New variant
+   * @returns DividerComponent instance for chaining
+   */
+  setVariant: (variant: 'full-width' | 'inset' | 'middle-inset') => DividerComponent;
+  
+  /**
+   * Sets custom inset values
+   * @param insetStart - Start inset value
+   * @param insetEnd - End inset value
+   * @returns DividerComponent instance for chaining
+   */
+  setInset: (insetStart?: number, insetEnd?: number) => DividerComponent;
+  
+  /**
+   * Sets thickness of the divider
+   * @param thickness - Thickness in pixels
+   * @returns DividerComponent instance for chaining
+   */
+  setThickness: (thickness: number) => DividerComponent;
+  
+  /**
+   * Sets custom color for the divider
+   * @param color - CSS color value
+   * @returns DividerComponent instance for chaining
+   */
+  setColor: (color: string) => DividerComponent;
+}

package/src/components/extended-fab/_styles.scss

@@ -0,0 +1,267 @@
+// src/components/extended-fab/_styles.scss
+@use '../../styles/abstract/base' as base;
+@use '../../styles/abstract/variables' as v;
+@use '../../styles/abstract/functions' as f;
+@use '../../styles/abstract/mixins' as m;
+@use '../../styles/abstract/theme' as t;
+
+$component: '#{base.$prefix}-extended-fab';
+
+.#{$component} {
+  // Base styles
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background-color: t.color('primary-container');
+  color: t.color('on-primary-container');
+  font: inherit;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  appearance: none;
+  overflow: hidden;
+  
+  // Extended FAB uses elevation in all variants
+  @include m.elevation(3);
+  
+  // Transitions for all property changes including collapse/expand
+  @include m.motion-transition(
+    transform,
+    box-shadow,
+    background-color,
+    color,
+    width,
+    border-radius,
+    padding
+  );
+  
+  // Focus styles
+  &:focus {
+    outline: none;
+  }
+  
+  &:focus-visible {
+    outline: 2px solid t.color('outline');
+    outline-offset: 2px;
+  }
+  
+  // Extended FAB dimensions (56dp height, min-width 80dp)
+  height: 56px;
+  min-width: 80px;
+  padding: 0 16px;
+  border-radius: f.get-shape('large'); // 16px corners
+  
+  // Flexbox layout for icon and text
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  
+  // Text styles
+  &-text {
+    @include m.typography('label-large');
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  // Icon sizing and positioning
+  &-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    
+    svg {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  
+  // Width variants
+  &--fixed {
+    // Default behavior (width based on content)
+  }
+  
+  &--fluid {
+    width: 100%;
+    justify-content: center;
+  }
+  
+  // RTL support for icon positioning
+  html[dir="rtl"] & {
+    .#{$component}-icon {
+      order: 1;
+    }
+    
+    .#{$component}-text {
+      order: 0;
+    }
+  }
+  
+  // Color variants - primary is the default
+  
+  // Primary variant (default)
+  &--primary {
+    background-color: t.color('primary-container');
+    color: t.color('on-primary-container');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-primary-container'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-primary-container'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+
+  // Secondary variant
+  &--secondary {
+    background-color: t.color('secondary-container');
+    color: t.color('on-secondary-container');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-secondary-container'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-secondary-container'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+  
+  // Tertiary variant
+  &--tertiary {
+    background-color: t.color('tertiary-container');
+    color: t.color('on-tertiary-container');
+    
+    &:hover {
+      @include m.state-layer(t.color('on-tertiary-container'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('on-tertiary-container'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+  
+  // Surface variant
+  &--surface {
+    background-color: t.color('surface');
+    color: t.color('primary');
+    
+    &:hover {
+      @include m.state-layer(t.color('primary'), 'hover');
+    }
+    
+    &:active {
+      @include m.state-layer(t.color('primary'), 'pressed');
+      @include m.elevation(1);
+    }
+  }
+  
+  // Collapsed state (transforms into regular FAB)
+  &--collapsed {
+    width: 56px;
+    min-width: 56px;
+    border-radius: 50%;
+    padding: 0;
+
+    .#{$component}-text {
+      // Hide text but keep it accessible to screen readers
+
+      display: none;
+      opacity: 0;
+      width: 0;
+      overflow: hidden;
+    }
+    
+    .#{$component}-icon {
+      margin: 0;
+    }
+  }
+  
+  // Lowered state (when pressed)
+  &--lowered {
+    @include m.elevation(1);
+    transform: translateY(1px);
+  }
+  
+  // Disabled state
+  &--disabled,
+  &:disabled {
+    pointer-events: none;
+    @include m.elevation(0);
+    background-color: t.alpha('on-surface', 0.12);
+    color: t.alpha('on-surface', 0.38);
+  }
+  
+  // Positioning utilities
+  &--top-right {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  &--top-left {
+    position: fixed;
+    top: 16px;
+    left: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  &--bottom-right {
+    position: fixed;
+    bottom: 16px;
+    right: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  &--bottom-left {
+    position: fixed;
+    bottom: 16px;
+    left: 16px;
+    z-index: v.z-index('dropdown');
+  }
+  
+  // Optional animations
+  @keyframes extended-fab-enter {
+    from {
+      transform: scale(0);
+      opacity: 0;
+    }
+    to {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+  
+  &--animate-enter {
+    animation: extended-fab-enter 0.3s f.get-motion-easing('emphasized-decelerate') forwards;
+  }
+  
+  // Responsive behavior for different screen sizes
+  @media (max-width: v.breakpoint('sm')) {
+    // Center alignment option for mobile
+    &--center-mobile {
+      left: 50%;
+      transform: translateX(-50%);
+      
+      &.#{$component}--lowered {
+        transform: translateX(-50%) translateY(1px);
+      }
+    }
+  }
+  
+  // Collapsible behavior on scroll
+  &--collapsible {
+    transition-duration: 0.2s;
+  }
+}