mtrl 0.3.8 → 0.4.0

package/src/components/badge/index.ts

@@ -1,90 +0,0 @@
-// src/components/badge/index.ts
-
-/**
- * Badge component module
- * @module components/badge
- * @description A small element that communicates status, shows a count,
- * or highlights an element requiring attention.
- */
-
-export { default } from './badge';
-export type { BadgeConfig, BadgeComponent, BadgeVariant, BadgeColor, BadgePosition } from './types';
-
-/**
- * Badge size variant constants
- * Use these instead of string literals for better code completion and type safety.
- * 
- * @example
- * import { createBadge, BADGE_VARIANTS } from 'mtrl';
- * 
- * const badge = createBadge({ variant: BADGE_VARIANTS.SMALL });
- * 
- * @category Components
- */
-export const BADGE_VARIANTS = {
-  /** 6dp dot badge (no text content) */
-  SMALL: 'small',
-  /** 16dp height badge (can contain text) */
-  LARGE: 'large'
-} as const;
-
-/**
- * Badge color constants
- * Colors follow Material Design 3 color system.
- * 
- * @example
- * import { createBadge, BADGE_COLORS } from 'mtrl';
- * 
- * const badge = createBadge({ color: BADGE_COLORS.ERROR });
- * 
- * @category Components
- */
-export const BADGE_COLORS = {
-  /** Red color for error states */
-  ERROR: 'error',
-  /** Primary theme color */
-  PRIMARY: 'primary',
-  /** Secondary theme color */
-  SECONDARY: 'secondary',
-  /** Tertiary theme color */
-  TERTIARY: 'tertiary',
-  /** Green color for success states */
-  SUCCESS: 'success',
-  /** Orange/yellow color for warning states */
-  WARNING: 'warning',
-  /** Blue color for information states */
-  INFO: 'info'
-} as const;
-
-/**
- * Badge position constants
- * Defines where the badge appears relative to its target element.
- * 
- * @example
- * import { createBadge, BADGE_POSITIONS } from 'mtrl';
- * 
- * const badge = createBadge({ 
- *   position: BADGE_POSITIONS.BOTTOM_RIGHT,
- *   target: document.querySelector('#notification-bell')
- * });
- * 
- * @category Components
- */
-export const BADGE_POSITIONS = {
-  /** Position in the top-right corner (default) */
-  TOP_RIGHT: 'top-right',
-  /** Position in the top-left corner */
-  TOP_LEFT: 'top-left',
-  /** Position in the bottom-right corner */
-  BOTTOM_RIGHT: 'bottom-right',
-  /** Position in the bottom-left corner */
-  BOTTOM_LEFT: 'bottom-left'
-} as const;
-
-/**
- * Maximum number of characters to display in a badge
- * When label text exceeds this length, it will be truncated.
- * 
- * @category Components
- */
-export const BADGE_MAX_CHARACTERS = 4;

package/src/components/badge/types.ts

@@ -1,279 +0,0 @@
-// src/components/badge/types.ts
-
-/**
- * Badge variant types - determines the badge size and appearance
- * @category Components
- * @remarks
- * - small: A 6dp circular dot badge without text (for notification indicators)
- * - large: A 16dp height badge that can contain text (for counts or short labels)
- */
-export type BadgeVariant = 'small' | 'large';
-
-/**
- * Badge color types - determines the badge's background color
- * @category Components
- * @remarks
- * Based on Material Design 3 color system:
- * - error: Red color for error states (default)
- * - primary: Primary theme color
- * - secondary: Secondary theme color
- * - tertiary: Tertiary theme color
- * - success: Green color for success states
- * - warning: Orange/yellow color for warning states
- * - info: Blue color for information states
- */
-export type BadgeColor = 'error' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'info';
-
-/**
- * Badge position types - determines where the badge appears relative to its target
- * @category Components
- * @remarks
- * - top-right: Position in the top-right corner (default)
- * - top-left: Position in the top-left corner
- * - bottom-right: Position in the bottom-right corner
- * - bottom-left: Position in the bottom-left corner
- */
-export type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-
-/**
- * Configuration interface for the Badge component
- * @category Components
- * @description
- * Defines the appearance and behavior of a badge component.
- * All properties are optional with sensible defaults.
- */
-export interface BadgeConfig {
-  /** 
-   * Badge variant (small dot or large numbered)
-   * Small badge (6dp) or Large badge (16dp height)
-   * @default 'large'
-   * @example 'small' | 'large'
-   */
-  variant?: BadgeVariant | string;
-  
-  /** 
-   * Badge color (follows Material Design 3 color system)
-   * @default 'error'
-   * @example 'error' | 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'info'
-   */
-  color?: BadgeColor | string;
-  
-  /** 
-   * Badge position relative to its container element
-   * @default 'top-right' 
-   * @example 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
-   */
-  position?: BadgePosition | string;
-  
-  /** 
-   * Text label inside the badge (for large badges)
-   * Up to 4 characters, numbers exceeding max will show "{max}+"
-   * @example "3" | "99+" | "New"
-   */
-  label?: string | number;
-  
-  /** 
-   * Maximum value to display (shows "{max}+" if label exceeds max)
-   * Usually 999+ for large numbers
-   * @example 99 | 999
-   */
-  max?: number;
-  
-  /** 
-   * Whether the badge should be initially visible
-   * @default true
-   */
-  visible?: boolean;
-  
-  /** 
-   * Target element to which badge will be attached
-   * When provided, the badge will be positioned relative to this element
-   */
-  target?: HTMLElement;
-  
-  /** 
-   * Additional CSS classes to apply to the badge element
-   * @example "custom-badge highlighted-badge"
-   */
-  class?: string;
-  
-  /** 
-   * CSS class prefix for all badge classes
-   * @default "mtrl"
-   */
-  prefix?: string;
-  
-  /** 
-   * Component name used in CSS class generation
-   * @default "badge"
-   * @internal
-   */
-  componentName?: string;
-}
-
-/**
- * Badge component interface
- * Provides methods for controlling a Material Design 3 badge
- * 
- * @category Components
- */
-export interface BadgeComponent {
-  /** 
-   * The badge's root DOM element
-   */
-  element: HTMLElement;
-  
-  /** 
-   * Badge wrapper element (if badge is attached to target)
-   * This is the parent element that contains both the target and the badge
-   */
-  wrapper?: HTMLElement;
-  
-  /**
-   * Sets the badge's text label
-   * @param label - Text or number to display in the badge
-   * @returns Badge component for method chaining
-   * @example
-   * badge.setLabel(5); // Shows "5"
-   * badge.setLabel("New"); // Shows "New"
-   * badge.setLabel(1250); // With max=999, shows "999+"
-   */
-  setLabel: (label: string | number) => BadgeComponent;
-  
-  /**
-   * Gets the badge's current text label
-   * @returns Current text content of the badge
-   */
-  getLabel: () => string;
-  
-  /**
-   * Shows the badge (makes it visible)
-   * @returns Badge component for method chaining
-   */
-  show: () => BadgeComponent;
-  
-  /**
-   * Hides the badge (makes it invisible)
-   * @returns Badge component for method chaining
-   */
-  hide: () => BadgeComponent;
-  
-  /**
-   * Toggles badge visibility
-   * @param visible - Optional explicit visibility state
-   * @returns Badge component for method chaining
-   * @example
-   * badge.toggle(); // Toggles current state
-   * badge.toggle(true); // Forces visible
-   */
-  toggle: (visible?: boolean) => BadgeComponent;
-  
-  /**
-   * Checks if the badge is currently visible
-   * @returns True if badge is visible, false otherwise
-   */
-  isVisible: () => boolean;
-  
-  /**
-   * Sets maximum value (after which badge shows max+)
-   * @param max - Maximum number to display before showing "+"
-   * @returns Badge component for method chaining
-   * @example
-   * badge.setMax(99); // Shows "99+" for values > 99
-   */
-  setMax: (max: number) => BadgeComponent;
-  
-  /**
-   * Sets badge color
-   * @param color - Badge color from Material Design 3 palette
-   * @returns Badge component for method chaining
-   * @example
-   * badge.setColor('primary');
-   * badge.setColor(BADGE_COLORS.SUCCESS);
-   */
-  setColor: (color: BadgeColor | string) => BadgeComponent;
-  
-  /**
-   * Sets badge variant (size style)
-   * @param variant - Badge variant ('small' or 'large')
-   * @returns Badge component for method chaining
-   * @example
-   * badge.setVariant('small'); // Dot indicator
-   * badge.setVariant(BADGE_VARIANTS.LARGE); // Numbered indicator
-   */
-  setVariant: (variant: BadgeVariant | string) => BadgeComponent;
-  
-  /**
-   * Sets badge position relative to target
-   * @param position - Badge position
-   * @returns Badge component for method chaining
-   * @example
-   * badge.setPosition('bottom-left');
-   */
-  setPosition: (position: BadgePosition | string) => BadgeComponent;
-  
-  /**
-   * Attaches badge to a target element
-   * @param target - Element to attach badge to
-   * @returns Badge component for method chaining
-   * @example
-   * badge.attachTo(document.querySelector('#notification-bell'));
-   */
-  attachTo: (target: HTMLElement) => BadgeComponent;
-  
-  /**
-   * Makes badge standalone (removes from wrapper)
-   * @returns Badge component for method chaining
-   */
-  detach: () => BadgeComponent;
-  
-  /**
-   * Destroys the badge component and cleans up resources
-   * Removes the badge from the DOM and clears event listeners
-   */
-  destroy: () => void;
-  
-  /**
-   * Gets a class name with the component's prefix
-   * @param name - Base class name
-   * @returns Prefixed class name
-   * @internal
-   */
-  getClass: (name: string) => string;
-  
-  /**
-   * Adds CSS classes to the badge element
-   * @param classes - One or more class names to add
-   * @returns Badge component for method chaining
-   * @example
-   * badge.addClass('highlighted', 'animated');
-   */
-  addClass: (...classes: string[]) => BadgeComponent;
-  
-  /**
-   * Removes CSS classes from the badge element
-   * @param classes - One or more class names to remove
-   * @returns Badge component for method chaining
-   * @example
-   * badge.removeClass('highlighted', 'animated');
-   */
-  removeClass: (...classes: string[]) => BadgeComponent;
-  
-  /**
-   * Adds an event listener to the badge
-   * @param event - Event name ('click', 'mouseover', etc.)
-   * @param handler - Event handler function
-   * @returns Badge component for method chaining
-   * @example
-   * badge.on('click', () => console.log('Badge clicked'));
-   */
-  on: (event: string, handler: Function) => BadgeComponent;
-  
-  /**
-   * Removes an event listener from the badge
-   * @param event - Event name
-   * @param handler - Event handler function
-   * @returns Badge component for method chaining
-   */
-  off: (event: string, handler: Function) => BadgeComponent;
-}

package/src/components/bottom-app-bar/bottom-app-bar.ts

@@ -1,154 +0,0 @@
-// src/components/bottom-app-bar/bottom-app-bar.ts
-/**
- * @module components/bottom-app-bar
- * @description Bottom app bar implementation
- */
-
-import { 
-  createBase, 
-  withElement, 
-  withEvents, 
-  withLifecycle,
-  ElementComponent, 
-  BaseComponent 
-} from '../../core/compose';
-
-import { createConfig } from './config';
-import { BottomAppBar, BottomAppBarConfig } from './types';
-
-/**
- * Creates a bottom app bar component
- * 
- * @param {BottomAppBarConfig} config - Configuration options
- * @returns {BottomAppBar} Bottom app bar component instance
- */
-export const createBottomAppBar = (config: BottomAppBarConfig = {}): BottomAppBar => {
-  // Process configuration with defaults
-  const componentConfig = createConfig(config);
-  
-  // Create base component
-  const component = createBase(componentConfig);
-  
-  // Create actions container 
-  const actionsContainer = document.createElement('div');
-  actionsContainer.className = `${component.getClass('bottom-app-bar')}-actions`;
-  
-  // FAB container for proper positioning
-  const fabContainer = document.createElement('div');
-  fabContainer.className = `${component.getClass('bottom-app-bar')}-fab-container`;
-  
-  // Apply Element enhancer
-  const enhancedComponent = withElement({
-    tag: componentConfig.tag,
-    componentName: 'bottom-app-bar',
-    className: [
-      componentConfig.hasFab ? `${component.getClass('bottom-app-bar')}--with-fab` : '',
-      componentConfig.fabPosition === 'center' ? `${component.getClass('bottom-app-bar')}--fab-center` : '',
-      componentConfig.class
-    ],
-    attrs: {
-      role: 'toolbar',
-      'aria-label': 'Bottom app bar'
-    },
-    interactive: true
-  })(component);
-  
-  // Apply events enhancer for component events
-  const withEventsComponent = withEvents()(enhancedComponent);
-  
-  // Apply lifecycle enhancer for cleanup
-  const withLifecycleComponent = withLifecycle()(withEventsComponent);
-  
-  // Append actions and FAB containers to the main element
-  withLifecycleComponent.element.appendChild(actionsContainer);
-  withLifecycleComponent.element.appendChild(fabContainer);
-  
-  // Flag to track visibility
-  let isVisible = true;
-  
-  // Previous scroll position for determining scroll direction
-  let prevScrollY = window.scrollY;
-  
-  // Handle scrolling behavior if autoHide is enabled
-  if (componentConfig.autoHide) {
-    const handleScroll = () => {
-      const currentScrollY = window.scrollY;
-      
-      // Determine scroll direction
-      if (currentScrollY > prevScrollY + 10) {
-        // Scrolling down - hide the bottom bar
-        if (isVisible) {
-          bottomBar.hide();
-          componentConfig.onVisibilityChange?.(false);
-        }
-      } else if (currentScrollY < prevScrollY - 10) {
-        // Scrolling up - show the bottom bar
-        if (!isVisible) {
-          bottomBar.show();
-          componentConfig.onVisibilityChange?.(true);
-        }
-      }
-      
-      prevScrollY = currentScrollY;
-    };
-    
-    // Add scroll event listener
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    
-    // Clean up event listener on destroy
-    const originalDestroy = withLifecycleComponent.lifecycle.destroy;
-    withLifecycleComponent.lifecycle.destroy = () => {
-      window.removeEventListener('scroll', handleScroll);
-      originalDestroy();
-    };
-  }
-  
-  const bottomBar: BottomAppBar = {
-    ...withLifecycleComponent,
-    
-    addAction(button: HTMLElement) {
-      actionsContainer.appendChild(button);
-      return this;
-    },
-    
-    addFab(fab: HTMLElement) {
-      // Clear existing FAB if any
-      fabContainer.innerHTML = '';
-      
-      // Add the new FAB
-      fabContainer.appendChild(fab);
-      
-      // Update component class to indicate it has a FAB
-      this.element.classList.add(`${component.getClass('bottom-app-bar')}--with-fab`);
-      
-      return this;
-    },
-    
-    show() {
-      this.element.classList.remove(`${component.getClass('bottom-app-bar')}--hidden`);
-      isVisible = true;
-      return this;
-    },
-    
-    hide() {
-      this.element.classList.add(`${component.getClass('bottom-app-bar')}--hidden`);
-      isVisible = false;
-      return this;
-    },
-    
-    isVisible() {
-      return isVisible;
-    },
-
-    getActionsContainer() {
-      return actionsContainer;
-    }
-  };
-  
-  // Set the appropriate styles for transitions if needed
-  if (componentConfig.autoHide && componentConfig.transitionDuration) {
-    bottomBar.element.style.transition = `transform ${componentConfig.transitionDuration}ms ease-in-out`;
-  }
-  
-  return bottomBar;
-};

package/src/components/bottom-app-bar/config.ts

@@ -1,29 +0,0 @@
-// src/components/bottom-app-bar/config.ts
-/**
- * @module components/bottom-app-bar
- * @description Configuration for bottom app bar component
- */
-
-import { createComponentConfig, BaseComponentConfig } from '../../core/config/component-config';
-import { PREFIX } from '../../core/config';
-import { BottomAppBarConfig } from './types';
-
-/**
- * Default configuration for bottom app bar
- */
-export const defaultConfig: Partial<BottomAppBarConfig> = {
-  tag: 'div',
-  hasFab: false,
-  fabPosition: 'end',
-  autoHide: false,
-  transitionDuration: 300
-};
-
-/**
- * Creates the configuration for a bottom app bar component
- * 
- * @param {BottomAppBarConfig} config - User provided configuration
- * @returns {BottomAppBarConfig} Complete configuration with defaults applied
- */
-export const createConfig = (config: BottomAppBarConfig = {} as BottomAppBarConfig): BottomAppBarConfig => 
-  createComponentConfig(defaultConfig, config, 'bottom-app-bar') as BottomAppBarConfig;

package/src/components/bottom-app-bar/types.ts

@@ -1,114 +0,0 @@
-// src/components/bottom-app-bar/types.ts
-/**
- * @module components/bottom-app-bar
- * @description Type definitions for Bottom App Bar component
- */
-
-import { ElementComponent } from '../../core/compose';
-
-/**
- * FAB position type for Bottom App Bar
- * @category Components
- */
-export type FabPosition = 'center' | 'end';
-
-/**
- * Configuration options for Bottom App Bar component
- * @category Components
- */
-export interface BottomAppBarConfig {
-  /**
-   * Element to use for the container
-   * @default 'div'
-   */
-  tag?: string;
-  
-  /**
-   * Whether to show FAB in the bottom bar
-   * @default false
-   */
-  hasFab?: boolean;
-  
-  /**
-   * FAB position in bottom bar
-   * @default 'end'
-   */
-  fabPosition?: FabPosition;
-  
-  /**
-   * Additional CSS classes to apply
-   */
-  class?: string;
-  
-  /**
-   * Whether to enable auto-hide on scroll
-   * @default false
-   */
-  autoHide?: boolean;
-
-  /**
-   * Transition duration for show/hide in ms
-   * @default 300
-   */
-  transitionDuration?: number;
-
-  /**
-   * Optional callback when scrolling shows/hides the bar
-   */
-  onVisibilityChange?: (visible: boolean) => void;
-
-  /**
-   * Component prefix for class names
-   * @default 'mtrl'
-   */
-  prefix?: string;
-
-  /**
-   * Component name for class generation
-   */
-  componentName?: string;
-}
-
-/**
- * Bottom App Bar component interface
- * @category Components
- */
-export interface BottomAppBar extends ElementComponent {
-  /**
-   * Adds an action button to the bottom bar
-   * @param {HTMLElement} button - Button element to add
-   * @returns {BottomAppBar} BottomAppBar instance for chaining
-   */
-  addAction: (button: HTMLElement) => BottomAppBar;
-  
-  /**
-   * Adds a floating action button to the bottom bar
-   * @param {HTMLElement} fab - FAB element to add
-   * @returns {BottomAppBar} BottomAppBar instance for chaining
-   */
-  addFab: (fab: HTMLElement) => BottomAppBar;
-  
-  /**
-   * Shows the bottom bar
-   * @returns {BottomAppBar} BottomAppBar instance for chaining
-   */
-  show: () => BottomAppBar;
-  
-  /**
-   * Hides the bottom bar
-   * @returns {BottomAppBar} BottomAppBar instance for chaining
-   */
-  hide: () => BottomAppBar;
-  
-  /**
-   * Checks if the bottom bar is visible
-   * @returns {boolean} Whether the bottom bar is visible
-   */
-  isVisible: () => boolean;
-
-  /**
-   * Get the actions container element
-   * @returns {HTMLElement} Actions container element
-   */
-  getActionsContainer: () => HTMLElement;
-}