mtrl 0.3.8 → 0.4.0

package/src/components/carousel/types.ts

@@ -1,327 +0,0 @@
-// src/components/carousel/types.ts
-
-/**
- * Material Design 3 Carousel Layout Types
- * @category Components
- */
-export type CarouselLayout = 
-  /** Best for browsing many visual items at once (photos, event feeds) */
-  | 'multi-browse'
-  /** For highly customized or text-heavy carousels (traditional behavior) */
-  | 'uncontained'
-  /** For spotlighting very large visual items (featured content) */
-  | 'hero'
-  /** For immersive vertical-scrolling experiences */
-  | 'full-screen';
-
-/**
- * Carousel Scrolling Behaviors
- * @category Components
- */
-export type CarouselScrollBehavior =
-  /** Standard scrolling without snapping, recommended for uncontained layouts */ 
-  | 'default'
-  /** Items snap to carousel layout, recommended for multi-browse, hero, and full-screen layouts */
-  | 'snap';
-
-/**
- * Slide data interface
- * @category Components
- */
-export interface CarouselSlide {
-  /** Image URL for the slide */
-  image: string;
-  
-  /** Optional title text for the slide */
-  title?: string;
-  
-  /** Optional accent color in hexadecimal or RGB format */
-  accent?: string;
-  
-  /** Optional description text */
-  description?: string;
-  
-  /** Optional action button text */
-  buttonText?: string;
-  
-  /** Optional action button URL */
-  buttonUrl?: string;
-  
-  /** Optional size designation for the item, will be auto-calculated if not provided */
-  size?: 'large' | 'medium' | 'small';
-}
-
-/**
- * Configuration interface for the Carousel component
- * @category Components
- */
-export interface CarouselConfig {
-  /** 
-   * Initial slide index to display
-   * @default 0
-   */
-  initialSlide?: number;
-  
-  /** 
-   * Whether to loop the carousel
-   * @default true
-   */
-  loop?: boolean;
-  
-  /** 
-   * Transition effect for slide changes
-   * @default 'slide'
-   */
-  transition?: 'slide' | 'fade' | 'none';
-  
-  /** 
-   * Transition duration in milliseconds
-   * @default 300
-   */
-  transitionDuration?: number;
-  
-  /** 
-   * Slides configuration for the carousel
-   * @example [{ image: 'image1.jpg', title: 'Title', accent: '#E6E1E5' }]
-   */
-  slides?: CarouselSlide[];
-  
-  /** 
-   * Border radius for slides in pixels
-   * @default 16
-   */
-  borderRadius?: number;
-  
-  /** 
-   * Gap between slides in pixels
-   * @default 8
-   */
-  gap?: number;
-  
-  /** 
-   * Additional CSS classes to add to the carousel
-   * @example 'hero-carousel featured-carousel'
-   */
-  class?: string;
-  
-  /**
-   * Component prefix for class names
-   * @default 'carousel'
-   */
-  prefix?: string;
-  
-  /**
-   * Component name used in class generation
-   * @default 'carousel'
-   */
-  componentName?: string;
-  
-  /**
-   * Callback for "Show all" action when present
-   */
-  onShowAll?: () => void;
-  
-  /**
-   * Whether to show a "Show all" link at the end
-   * MD3 recommends adding this for accessibility on vertical scrolling pages
-   * @default true
-   */
-  showAllLink?: boolean;
-  
-  /**
-   * MD3 carousel layout type
-   * @default 'multi-browse'
-   */
-  layout?: CarouselLayout;
-  
-  /**
-   * Scrolling behavior for the carousel
-   * @default depends on layout (snap for multi-browse, hero, full-screen; default for uncontained)
-   */
-  scrollBehavior?: CarouselScrollBehavior;
-  
-  /**
-   * Whether to center the carousel items (applies to hero layout)
-   * @default false
-   */
-  centered?: boolean;
-  
-  /**
-   * Maximum width of large items (affects how many items fit on screen)
-   * Large items should remain big enough to be easily recognizable
-   */
-  largeItemMaxWidth?: number;
-  
-  /**
-   * Width for small items in pixels
-   * @default 40-56dp range as per MD3 guidelines
-   */
-  smallItemWidth?: number;
-}
-
-/**
- * Slides API interface for carousel
- * @category Components
- */
-export interface SlidesAPI {
-  /**
-   * Adds a new slide to the carousel
-   * @param slide - CarouselSlide object with slide data
-   * @param index - Optional position to insert the slide
-   * @returns The slides API for chaining
-   */
-  addSlide: (slide: CarouselSlide, index?: number) => SlidesAPI;
-  
-  /**
-   * Removes a slide at the specified index
-   * @param index - Index of the slide to remove
-   * @returns The slides API for chaining
-   */
-  removeSlide: (index: number) => SlidesAPI;
-  
-  /**
-   * Updates an existing slide
-   * @param index - Index of the slide to update
-   * @param slide - Updated CarouselSlide object
-   * @returns The slides API for chaining
-   */
-  updateSlide: (index: number, slide: CarouselSlide) => SlidesAPI;
-  
-  /**
-   * Gets a slide at the specified index
-   * @param index - Index of the slide
-   * @returns CarouselSlide object or null if not found
-   */
-  getSlide: (index: number) => CarouselSlide | null;
-  
-  /**
-   * Gets the total number of slides
-   * @returns Number of slides
-   */
-  getCount: () => number;
-  
-  /**
-   * Gets all slide elements
-   * @returns Array of slide elements
-   */
-  getElements: () => HTMLElement[];
-}
-
-/**
- * Carousel component interface
- * @category Components
- */
-export interface CarouselComponent {
-  /** The carousel's root DOM element */
-  element: HTMLElement;
-  
-  /** API for managing carousel slides */
-  slides: SlidesAPI;
-  
-  /** API for managing component lifecycle */
-  lifecycle: {
-    /** Destroys the component and cleans up resources */
-    destroy: () => void;
-  };
-  
-  /**
-   * Gets a class name with the component's prefix
-   * @param name - Base class name
-   * @returns Prefixed class name
-   */
-  getClass: (name: string) => string;
-  
-  /**
-   * Goes to the next slide
-   * @returns The carousel component for chaining
-   */
-  next: () => CarouselComponent;
-  
-  /**
-   * Goes to the previous slide
-   * @returns The carousel component for chaining
-   */
-  prev: () => CarouselComponent;
-  
-  /**
-   * Goes to a specific slide
-   * @param index - Slide index
-   * @returns The carousel component for chaining
-   */
-  goTo: (index: number) => CarouselComponent;
-  
-  /**
-   * Gets the current slide index
-   * @returns Current slide index
-   */
-  getCurrentSlide: () => number;
-  
-  /**
-   * Adds a new slide
-   * @param slide - CarouselSlide object with slide data
-   * @param index - Optional position to insert the slide
-   * @returns The carousel component for chaining
-   */
-  addSlide: (slide: CarouselSlide, index?: number) => CarouselComponent;
-  
-  /**
-   * Removes a slide
-   * @param index - Index of the slide to remove
-   * @returns The carousel component for chaining
-   */
-  removeSlide: (index: number) => CarouselComponent;
-  
-  /**
-   * Enables the loop mode
-   * @returns The carousel component for chaining
-   */
-  enableLoop: () => CarouselComponent;
-  
-  /**
-   * Disables the loop mode
-   * @returns The carousel component for chaining
-   */
-  disableLoop: () => CarouselComponent;
-  
-  /**
-   * Sets the carousel border radius
-   * @param radius - Border radius in pixels
-   * @returns The carousel component for chaining
-   */
-  setBorderRadius: (radius: number) => CarouselComponent;
-  
-  /**
-   * Sets the gap between slides
-   * @param gap - Gap size in pixels
-   * @returns The carousel component for chaining
-   */
-  setGap: (gap: number) => CarouselComponent;
-  
-  /**
-   * Destroys the carousel component and cleans up resources
-   */
-  destroy: () => void;
-  
-  /**
-   * Adds an event listener to the carousel
-   * @param event - Event name
-   * @param handler - Event handler function
-   * @returns The carousel component for chaining
-   */
-  on: (event: string, handler: Function) => CarouselComponent;
-  
-  /**
-   * Removes an event listener from the carousel
-   * @param event - Event name
-   * @param handler - Event handler function
-   * @returns The carousel component for chaining
-   */
-  off: (event: string, handler: Function) => CarouselComponent;
-  
-  /**
-   * Adds CSS classes to the carousel element
-   * @param classes - One or more class names to add
-   * @returns The carousel component for chaining
-   */
-  addClass: (...classes: string[]) => CarouselComponent;
-}

package/src/components/checkbox/api.ts

@@ -1,82 +0,0 @@
-// src/components/checkbox/api.ts
-import { BaseComponent, CheckboxComponent, ApiOptions } from './types';
-
-/**
- * Enhances checkbox component with API methods
- * @param {ApiOptions} options - API configuration
- * @returns {Function} Higher-order function that adds API methods to component
- */
-export const withAPI = ({ disabled, lifecycle, checkable }: ApiOptions) => 
-  (component: BaseComponent): CheckboxComponent => ({
-    ...component as any,
-    element: component.element,
-    input: component.input as HTMLInputElement,
-
-    // Value management
-    getValue: component.getValue || (() => ''),
-    setValue(value: string): CheckboxComponent {
-      component.setValue?.(value);
-      return this;
-    },
-
-    // State management
-    check(): CheckboxComponent {
-      checkable.check();
-      return this;
-    },
-    
-    uncheck(): CheckboxComponent {
-      checkable.uncheck();
-      return this;
-    },
-    
-    toggle(): CheckboxComponent {
-      checkable.toggle();
-      return this;
-    },
-    
-    isChecked(): boolean {
-      return checkable.isChecked();
-    },
-    
-    setIndeterminate(state: boolean): CheckboxComponent {
-      component.setIndeterminate?.(state);
-      return this;
-    },
-
-    // Label management
-    setLabel(text: string): CheckboxComponent {
-      component.text?.setText(text);
-      return this;
-    },
-    
-    getLabel(): string {
-      return component.text?.getText() || '';
-    },
-
-    // Event handling
-    on(event: string, handler: Function): CheckboxComponent {
-      component.on?.(event, handler);
-      return this;
-    },
-    
-    off(event: string, handler: Function): CheckboxComponent {
-      component.off?.(event, handler);
-      return this;
-    },
-
-    // State management
-    enable(): CheckboxComponent {
-      disabled.enable();
-      return this;
-    },
-    
-    disable(): CheckboxComponent {
-      disabled.disable();
-      return this;
-    },
-    
-    destroy(): void {
-      lifecycle.destroy();
-    }
-  });

package/src/components/checkbox/checkbox.ts

@@ -1,142 +0,0 @@
-// src/components/checkbox/checkbox.ts
-/**
- * Checkbox Component Implementation
- * 
- * This module implements a Material Design 3 checkbox component
- * with support for different visual variants, indeterminate state,
- * and configurable label positioning.
- * 
- * @module components/checkbox
- * @category Components
- */
-
-import { pipe } from '../../core/compose';
-import { createBase, withElement } from '../../core/compose/component';
-import {
-  withEvents,
-  withTextLabel,
-  withDisabled,
-  withLifecycle,
-  withInput,
-  withCheckable
-} from '../../core/compose/features';
-import { withAPI } from './api';
-import { CheckboxConfig, CheckboxComponent, BaseComponent } from './types';
-import { 
-  createBaseConfig, 
-  getElementConfig, 
-  withCheckIcon,
-  withLabelPosition,
-  getApiConfig
-} from './config';
-
-/**
- * Enhances a component with checkable features and indeterminate state support
- * 
- * The indeterminate state is a third visual state for checkboxes that represents
- * a mixed or partial selection (neither fully checked nor unchecked).
- * 
- * @param {BaseComponent} component - The component to enhance
- * @param {CheckboxConfig} config - Configuration options
- * @returns {BaseComponent} The enhanced component
- * @category Components
- * @internal
- */
-const enhanceWithCheckable = (component: BaseComponent, config: CheckboxConfig): BaseComponent => {
-  const enhanced = withCheckable(config)(component);
-
-  // Set initial indeterminate state if specified in config
-  if (config.indeterminate) {
-    enhanced.input.indeterminate = true;
-  }
-
-  // Add method to control indeterminate state
-  enhanced.setIndeterminate = (state: boolean) => {
-    enhanced.input.indeterminate = state;
-    enhanced.element.classList.toggle(`${config.prefix}-checkbox--indeterminate`, state);
-    return enhanced;
-  };
-
-  return enhanced;
-};
-
-/**
- * Creates a new Checkbox component with the specified configuration.
- * 
- * Checkboxes allow users to select one or more items from a set,
- * or to toggle a single option on or off. This implementation follows
- * Material Design 3 guidelines for accessible, customizable checkboxes.
- * 
- * @param {CheckboxConfig} config - Configuration options for the checkbox
- * @returns {CheckboxComponent} A fully configured checkbox component instance
- * @throws {Error} Throws an error if checkbox creation fails
- * 
- * @category Components
- * 
- * @example
- * // Create a basic checkbox
- * const checkbox = createCheckbox({
- *   label: 'Accept terms and conditions',
- *   name: 'accept-terms'
- * });
- * 
- * document.querySelector('.form').appendChild(checkbox.element);
- * 
- * @example
- * // Create a pre-checked checkbox with custom styling
- * const checkbox = createCheckbox({
- *   label: 'Remember me',
- *   checked: true,
- *   variant: 'outlined',
- *   labelPosition: 'start'
- * });
- * 
- * // Add event listener
- * checkbox.on('change', (e) => {
- *   console.log('Checkbox changed:', e.target.checked);
- * });
- * 
- * @example
- * // Create an indeterminate checkbox for "select all" functionality
- * const selectAll = createCheckbox({
- *   label: 'Select All',
- *   indeterminate: true
- * });
- * 
- * // Later, based on selections:
- * if (allSelected) {
- *   selectAll.check();
- * } else if (noneSelected) {
- *   selectAll.uncheck();
- * } else {
- *   selectAll.setIndeterminate(true);
- * }
- */
-const createCheckbox = (config: CheckboxConfig = {}): CheckboxComponent => {
-  const baseConfig = createBaseConfig(config);
-
-  try {
-    // Create the checkbox through functional composition
-    // Each function in the pipe adds specific features to the component
-    const checkbox = pipe(
-      createBase,                                            // Base component
-      withEvents(),                                          // Event handling
-      withElement(getElementConfig(baseConfig)),             // DOM element
-      withInput(baseConfig),                                 // Input element
-      withCheckIcon(baseConfig),                             // Checkbox icon
-      withTextLabel(baseConfig),                             // Text label
-      withLabelPosition(baseConfig),                         // Label positioning
-      component => enhanceWithCheckable(component, baseConfig), // Checkable state
-      withDisabled(baseConfig),                              // Disabled state
-      withLifecycle(),                                       // Lifecycle management
-      comp => withAPI(getApiConfig(comp))(comp)              // Public API
-    )(baseConfig);
-
-    return checkbox as CheckboxComponent;
-  } catch (error) {
-    console.error('Checkbox creation error:', error instanceof Error ? error.message : String(error));
-    throw new Error(`Failed to create checkbox: ${error instanceof Error ? error.message : String(error)}`);
-  }
-};
-
-export default createCheckbox;

package/src/components/checkbox/config.ts

@@ -1,89 +0,0 @@
-// src/components/checkbox/config.ts
-import { 
-  createComponentConfig, 
-  createElementConfig,
-  BaseComponentConfig 
-} from '../../core/config/component-config';
-import { CheckboxConfig, BaseComponent, ApiOptions } from './types';
-
-/**
- * Default configuration for the Checkbox component
- */
-export const defaultConfig: CheckboxConfig = {
-  variant: 'filled',
-  labelPosition: 'end'
-};
-
-/**
- * Creates the base configuration for Checkbox component
- * @param {CheckboxConfig} config - User provided configuration
- * @returns {CheckboxConfig} Complete configuration with defaults applied
- */
-export const createBaseConfig = (config: CheckboxConfig = {}): CheckboxConfig => 
-  createComponentConfig(defaultConfig, config, 'checkbox') as CheckboxConfig;
-
-/**
- * Generates element configuration for the Checkbox component
- * @param {CheckboxConfig} config - Checkbox configuration
- * @returns {Object} Element configuration object for withElement
- */
-export const getElementConfig = (config: CheckboxConfig) => 
-  createElementConfig(config, {
-    tag: 'div',
-    componentName: 'checkbox',
-    className: config.class,
-    interactive: true
-  });
-
-/**
- * Adds check icon to checkbox
- * @param {CheckboxConfig} config - Component configuration
- */
-export const withCheckIcon = (config: CheckboxConfig) => (component: BaseComponent): BaseComponent => {
-  const icon = document.createElement('span');
-  icon.className = `${config.prefix}-checkbox-icon`;
-  icon.innerHTML = `
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
-      <path d="M9.55 14.6L6.35 11.4l-1.9 1.9L9.55 18.4l10.9-10.9-1.9-1.9z"/>
-    </svg>
-  `;
-
-  component.element.appendChild(icon);
-  return component;
-};
-
-/**
- * Applies label position class to the component
- * @param {CheckboxConfig} config - Component configuration
- */
-export const withLabelPosition = (config: CheckboxConfig) => (component: BaseComponent): BaseComponent => {
-  const position = config.labelPosition || 'end';
-  const positionClass = `${config.prefix}-checkbox--label-${position}`;
-
-  component.element.classList.add(positionClass);
-
-  return component;
-};
-
-/**
- * Creates API configuration for the Checkbox component
- * @param {BaseComponent} comp - Component with disabled, lifecycle, and checkable features
- * @returns {ApiOptions} API configuration object
- */
-export const getApiConfig = (comp: BaseComponent): ApiOptions => ({
-  disabled: {
-    enable: comp.disabled?.enable,
-    disable: comp.disabled?.disable
-  },
-  lifecycle: {
-    destroy: comp.lifecycle?.destroy
-  },
-  checkable: {
-    check: comp.checkable?.check,
-    uncheck: comp.checkable?.uncheck,
-    toggle: comp.checkable?.toggle,
-    isChecked: comp.checkable?.isChecked
-  }
-});
-
-export default defaultConfig;