mtrl 0.2.6 → 0.2.8

package/src/components/fab/config.ts

@@ -0,0 +1,93 @@
+// src/components/fab/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { FabConfig } from './types';
+
+/**
+ * Default configuration for the FAB component
+ */
+export const defaultConfig: FabConfig = {
+  variant: 'primary',
+  size: 'default',
+  type: 'button',
+  ripple: true
+};
+
+/**
+ * Creates the base configuration for FAB component
+ * @param {FabConfig} config - User provided configuration
+ * @returns {FabConfig} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: FabConfig = {}): FabConfig => 
+  createComponentConfig(defaultConfig, config, 'fab') as FabConfig;
+
+/**
+ * Generates element configuration for the FAB component
+ * @param {FabConfig} config - FAB configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: FabConfig) => {
+  // Create the attributes object
+  const attrs: Record<string, any> = {
+    type: config.type || 'button',
+    'aria-label': config.ariaLabel || (config.icon ? 'action' : undefined)
+  };
+  
+  // Add size class
+  const fabSizeClass = `${config.prefix}-fab--${config.size || 'default'}`;
+  let classNames = [fabSizeClass];
+  
+  // Add animation class if specified
+  if (config.animate) {
+    classNames.push(`${config.prefix}-fab--animate-enter`);
+  }
+  
+  // Add position class if specified
+  if (config.position) {
+    classNames.push(`${config.prefix}-fab--${config.position}`);
+  }
+  
+  // Add user classes
+  if (config.class) {
+    classNames.push(config.class);
+  }
+  
+  // Only add disabled attribute if it's explicitly true
+  if (config.disabled === true) {
+    attrs.disabled = true;
+    classNames.push(`${config.prefix}-fab--disabled`);
+  }
+  
+  return createElementConfig(config, {
+    tag: 'button',
+    attrs,
+    className: classNames,
+    forwardEvents: {
+      click: (component) => !component.element.disabled,
+      focus: true,
+      blur: true
+    },
+    interactive: true
+  });
+};
+
+/**
+ * Creates API configuration for the FAB component
+ * @param {Object} comp - Component with disabled and lifecycle features
+ * @returns {Object} API configuration object
+ */
+export const getApiConfig = (comp: any) => ({
+  disabled: {
+    enable: () => comp.disabled.enable(),
+    disable: () => comp.disabled.disable()
+  },
+  lifecycle: {
+    destroy: () => comp.lifecycle.destroy()
+  },
+  className: comp.getClass('fab')
+});
+
+export default defaultConfig;

package/src/components/fab/fab.ts

@@ -0,0 +1,67 @@
+// src/components/fab/fab.ts
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import {
+  withEvents,
+  withIcon,
+  withVariant,
+  withRipple,
+  withDisabled,
+  withLifecycle
+} from '../../core/compose/features';
+import { withAPI } from './api';
+import { FabConfig, FabComponent } from './types';
+import { createBaseConfig, getElementConfig, getApiConfig } from './config';
+
+/**
+ * Creates a new Floating Action Button (FAB) component
+ * 
+ * @param {FabConfig} config - FAB configuration object
+ * @returns {FabComponent} FAB component instance
+ * 
+ * @example
+ * ```typescript
+ * // Create a default FAB with a plus icon
+ * const fab = createFab({
+ *   icon: '<svg>...</svg>',
+ *   ariaLabel: 'Add new item'
+ * });
+ * 
+ * // Create a small FAB with a custom position
+ * const smallFab = createFab({
+ *   size: 'small',
+ *   icon: '<svg>...</svg>',
+ *   variant: 'secondary',
+ *   position: 'bottom-right'
+ * });
+ * 
+ * // Add click handler
+ * fab.on('click', () => {
+ *   console.log('FAB clicked');
+ * });
+ * ```
+ */
+const createFab = (config: FabConfig = {}): FabComponent => {
+  const fabConfig = createBaseConfig(config);
+
+  try {
+    const fab = pipe(
+      createBase,
+      withEvents(),
+      withElement(getElementConfig(fabConfig)),
+      withVariant(fabConfig),
+      withIcon(fabConfig),
+      withDisabled(fabConfig),
+      withRipple(fabConfig),
+      withLifecycle(),
+      comp => withAPI(getApiConfig(comp))(comp)
+    )(fabConfig);
+    
+    return fab;
+  } catch (error) {
+    console.error('FAB creation error:', error);
+    throw new Error(`Failed to create FAB: ${(error as Error).message}`);
+  }
+};
+
+export default createFab;

package/src/components/fab/index.ts

@@ -0,0 +1,9 @@
+// src/components/fab/index.ts
+export { default, default as createFab } from './fab';
+export {
+  FabConfig,
+  FabComponent,
+  FabVariant,
+  FabSize,
+  FabPosition
+} from './types';

package/src/components/fab/types.ts

@@ -0,0 +1,251 @@
+// src/components/fab/types.ts
+
+/**
+ * FAB variants for styling
+ * @category Components
+ */
+export type FabVariant = 'primary' | 'secondary' | 'tertiary' | 'surface';
+
+/**
+ * FAB size variants
+ * @category Components
+ */
+export type FabSize = 'small' | 'default' | 'large';
+
+/**
+ * FAB position options
+ * @category Components
+ */
+export type FabPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+/**
+ * Configuration interface for the FAB component
+ * @category Components
+ */
+export interface FabConfig {
+  /** 
+   * FAB variant that determines visual styling
+   * @default 'primary'
+   */
+  variant?: FabVariant | string;
+  
+  /** 
+   * FAB size variant
+   * @default 'default'
+   */
+  size?: FabSize | string;
+  
+  /** 
+   * Whether the FAB is initially disabled
+   * @default false
+   */
+  disabled?: boolean;
+  
+  /** 
+   * FAB icon HTML content
+   * @example '<svg>...</svg>'
+   */
+  icon?: string;
+  
+  /** 
+   * Icon size in pixels or other CSS units
+   * @example '24px'
+   */
+  iconSize?: string;
+  
+  /** 
+   * Additional CSS classes to add to the FAB
+   * @example 'home-fab bottom-right'
+   */
+  class?: string;
+  
+  /** 
+   * Button value attribute
+   */
+  value?: string;
+  
+  /**
+   * Position of the FAB on the screen
+   * @example 'bottom-right'
+   */
+  position?: FabPosition | string;
+  
+  /** 
+   * Button type attribute
+   * @default 'button'
+   */
+  type?: 'button' | 'submit' | 'reset';
+  
+  /**
+   * Accessible label for screen readers
+   */
+  ariaLabel?: string;
+  
+  /** 
+   * Whether to enable ripple effect
+   * @default true
+   */
+  ripple?: boolean;
+
+  /**
+   * Component prefix for class names
+   * @default 'mtrl'
+   */
+  prefix?: string;
+  
+  /**
+   * Component name used in class generation
+   */
+  componentName?: string;
+  
+  /** 
+   * Ripple effect configuration
+   */
+  rippleConfig?: {
+    /** Duration of the ripple animation in milliseconds */
+    duration?: number;
+    /** Timing function for the ripple animation */
+    timing?: string;
+    /** Opacity values for ripple start and end [start, end] */
+    opacity?: [string, string];
+  };
+
+  /**
+   * Whether to show the FAB with an entrance animation
+   * @default false
+   */
+  animate?: boolean;
+}
+
+/**
+ * FAB component interface
+ * @category Components
+ */
+export interface FabComponent {
+  /** The FAB's DOM element */
+  element: HTMLButtonElement;
+  
+  /** API for managing FAB icons */
+  icon: {
+    /** Sets the icon HTML content */
+    setIcon: (html: string) => any;
+    /** Gets the current icon HTML content */
+    getIcon: () => string;
+    /** Gets the icon DOM element */
+    getElement: () => HTMLElement | null;
+  };
+  
+  /** API for managing disabled state */
+  disabled: {
+    /** Enables the FAB */
+    enable: () => void;
+    /** Disables the FAB */
+    disable: () => void;
+    /** Checks if the FAB is disabled */
+    isDisabled: () => boolean;
+  };
+  
+  /** 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;
+  
+  /**
+   * Gets the FAB's value attribute
+   * @returns FAB value
+   */
+  getValue: () => string;
+  
+  /**
+   * Sets the FAB's value attribute
+   * @param value - New value
+   * @returns The FAB component for chaining
+   */
+  setValue: (value: string) => FabComponent;
+  
+  /**
+   * Enables the FAB (removes disabled attribute)
+   * @returns The FAB component for chaining
+   */
+  enable: () => FabComponent;
+  
+  /**
+   * Disables the FAB (adds disabled attribute)
+   * @returns The FAB component for chaining
+   */
+  disable: () => FabComponent;
+  
+  /**
+   * Sets the FAB's icon
+   * @param icon - Icon HTML content
+   * @returns The FAB component for chaining
+   */
+  setIcon: (icon: string) => FabComponent;
+  
+  /**
+   * Gets the FAB's icon HTML content
+   * @returns Icon HTML
+   */
+  getIcon: () => string;
+  
+  /**
+   * Sets the FAB's position
+   * @param position - Position value ('top-right', 'bottom-left', etc.)
+   * @returns The FAB component for chaining
+   */
+  setPosition: (position: string) => FabComponent;
+  
+  /**
+   * Gets the current position of the FAB
+   * @returns Current position
+   */
+  getPosition: () => string | null;
+
+  /**
+   * Lowers the FAB (useful for pressed state)
+   * @returns The FAB component for chaining
+   */
+  lower: () => FabComponent;
+  
+  /**
+   * Raises the FAB back to its default elevation
+   * @returns The FAB component for chaining
+   */
+  raise: () => FabComponent;
+  
+  /**
+   * Destroys the FAB component and cleans up resources
+   */
+  destroy: () => void;
+  
+  /**
+   * Adds an event listener to the FAB
+   * @param event - Event name ('click', 'focus', etc.)
+   * @param handler - Event handler function
+   * @returns The FAB component for chaining
+   */
+  on: (event: string, handler: Function) => FabComponent;
+  
+  /**
+   * Removes an event listener from the FAB
+   * @param event - Event name
+   * @param handler - Event handler function
+   * @returns The FAB component for chaining
+   */
+  off: (event: string, handler: Function) => FabComponent;
+  
+  /**
+   * Adds CSS classes to the FAB element
+   * @param classes - One or more class names to add
+   * @returns The FAB component for chaining
+   */
+  addClass: (...classes: string[]) => FabComponent;
+}

package/src/components/list/config.ts

@@ -5,14 +5,13 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { ListConfig, BaseComponent } from './types';
-import { LIST_TYPES, LIST_LAYOUTS } from './constants';
 
 /**
  * Default configuration for the List component
  */
 export const defaultConfig: ListConfig = {
-  type: LIST_TYPES.DEFAULT,
-  layout: LIST_LAYOUTS.HORIZONTAL,
+  type: 'default',
+  layout: 'horizontal',
   items: []
 };
 
@@ -32,9 +31,9 @@ export const createBaseConfig = (config: ListConfig = {}): ListConfig =>
 export const getElementConfig = (config: ListConfig) => 
   createElementConfig(config, {
     tag: 'div',
-    role: config.type === LIST_TYPES.DEFAULT ? 'list' : 'listbox',
+    role: config.type === 'default' ? 'list' : 'listbox',
     attrs: {
-      'aria-multiselectable': config.type === LIST_TYPES.MULTI_SELECT ? 'true' : undefined
+      'aria-multiselectable': config.type === 'multi' ? 'true' : undefined
     },
     componentName: 'list',
     className: config.class

package/src/components/list/features.ts

@@ -6,7 +6,6 @@ import {
   BaseComponent,
   SelectionChangeEvent
 } from './types';
-import { LIST_TYPES, LIST_LAYOUTS } from './constants';
 import { createDivider, createSectionTitle } from './utils';
 import createListItem from './list-item';
 
@@ -23,7 +22,7 @@ export const withListContent = (config: ListConfig) =>
     const selectedItems = new Set<string>();
 
     // Set list type
-    element.setAttribute('data-type', config.type || LIST_TYPES.DEFAULT);
+    element.setAttribute('data-type', config.type || 'default');
 
     // Handle keyboard navigation
     const handleKeyDown = (event: KeyboardEvent): void => {
@@ -71,7 +70,7 @@ export const withListContent = (config: ListConfig) =>
       if (!itemData || itemData.disabled) return;
 
       switch (config.type) {
-        case LIST_TYPES.SINGLE_SELECT:
+        case 'single':
           // Deselect previously selected item
           selectedItems.forEach(selectedId => {
             const selected = items.get(selectedId);
@@ -88,7 +87,7 @@ export const withListContent = (config: ListConfig) =>
           selectedItems.add(id);
           break;
 
-        case LIST_TYPES.MULTI_SELECT:
+        case 'multi':
           const isSelected = selectedItems.has(id);
           if (isSelected) {
             itemElement.classList.remove(`${prefix}-list-item--selected`);
@@ -119,8 +118,8 @@ export const withListContent = (config: ListConfig) =>
 
         const item = createListItem({
           ...itemConfig,
-          layout: config.layout || LIST_LAYOUTS.HORIZONTAL,
-          role: config.type === LIST_TYPES.RADIO ? 'radio' : 'option'
+          layout: config.layout || 'horizontal',
+          role: config.type === 'radio' ? 'radio' : 'option'
         });
 
         item.element.dataset.id = itemConfig.id;
@@ -200,7 +199,7 @@ export const withListContent = (config: ListConfig) =>
 
         const item = createListItem({
           ...itemConfig,
-          layout: config.layout || LIST_LAYOUTS.HORIZONTAL
+          layout: config.layout || 'horizontal'
         });
 
         item.element.dataset.id = itemConfig.id;

package/src/components/list/index.ts

@@ -1,14 +1,12 @@
 // src/components/list/index.ts
-export { default } from './list'
-export { default as createListItem } from './list-item'
-export {
-  LIST_TYPES,
-  LIST_LAYOUTS,
-  LIST_ITEM_LAYOUTS
-} from './constants'
+export { default } from './list';
+export { default as createListItem } from './list-item';
 export {
   ListConfig,
   ListComponent,
   ListItemConfig,
-  ListSectionConfig
-} from './types'
+  ListSectionConfig,
+  ListType,
+  ListLayout,
+  ListItemLayout
+} from './types';

package/src/components/list/list-item.ts

@@ -4,8 +4,7 @@ import { pipe } from '../../core/compose';
 import { createBase, withElement } from '../../core/compose/component';
 import { withEvents, withDisabled } from '../../core/compose/features';
 import { ListItemConfig } from './types';
-import { LIST_ITEM_LAYOUTS, LIST_CLASSES } from './constants';
-import { createElement } from './utils';
+import { createElement, getListClass } from './utils';
 
 /**
  * Creates list item content based on configuration
@@ -16,14 +15,14 @@ import { createElement } from './utils';
 const withItemContent = (config: ListItemConfig) => (component: any): any => {
   const { element } = component;
   const prefix = config.prefix || PREFIX;
-  const isVertical = config.layout === LIST_ITEM_LAYOUTS.VERTICAL;
+  const isVertical = config.layout === 'vertical';
 
   // Create content container
-  const content = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_CONTENT}`);
+  const content = createElement('div', `${prefix}-${getListClass('ITEM_CONTENT')}`);
 
   // Add leading content (icon/avatar)
   if (config.leading) {
-    const leading = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_LEADING}`);
+    const leading = createElement('div', `${prefix}-${getListClass('ITEM_LEADING')}`);
     if (typeof config.leading === 'string') {
       leading.innerHTML = config.leading;
     } else {
@@ -33,23 +32,23 @@ const withItemContent = (config: ListItemConfig) => (component: any): any => {
   }
 
   // Text wrapper for proper alignment
-  const textWrapper = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_TEXT}`);
+  const textWrapper = createElement('div', `${prefix}-${getListClass('ITEM_TEXT')}`);
 
   // Add overline text (vertical only)
   if (isVertical && config.overline) {
-    const overline = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_OVERLINE}`, config.overline);
+    const overline = createElement('div', `${prefix}-${getListClass('ITEM_OVERLINE')}`, config.overline);
     textWrapper.appendChild(overline);
   }
 
   // Add headline (primary text)
   if (config.headline) {
-    const headline = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_HEADLINE}`, config.headline);
+    const headline = createElement('div', `${prefix}-${getListClass('ITEM_HEADLINE')}`, config.headline);
     textWrapper.appendChild(headline);
   }
 
   // Add supporting text (secondary text)
   if (config.supportingText) {
-    const supporting = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_SUPPORTING}`, config.supportingText);
+    const supporting = createElement('div', `${prefix}-${getListClass('ITEM_SUPPORTING')}`, config.supportingText);
     textWrapper.appendChild(supporting);
   }
 
@@ -57,7 +56,7 @@ const withItemContent = (config: ListItemConfig) => (component: any): any => {
 
   // Add meta information (vertical only)
   if (isVertical && config.meta) {
-    const meta = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_META}`);
+    const meta = createElement('div', `${prefix}-${getListClass('ITEM_META')}`);
     if (typeof config.meta === 'string') {
       meta.textContent = config.meta;
     } else {
@@ -70,7 +69,7 @@ const withItemContent = (config: ListItemConfig) => (component: any): any => {
 
   // Add trailing content (icon/meta)
   if (config.trailing) {
-    const trailing = createElement('div', `${prefix}-${LIST_CLASSES.ITEM_TRAILING}`);
+    const trailing = createElement('div', `${prefix}-${getListClass('ITEM_TRAILING')}`);
     if (typeof config.trailing === 'string') {
       trailing.innerHTML = config.trailing;
     } else {
@@ -82,7 +81,7 @@ const withItemContent = (config: ListItemConfig) => (component: any): any => {
   // Handle selected state
   if (config.selected) {
     element.setAttribute('aria-selected', 'true');
-    element.classList.add(`${prefix}-${LIST_CLASSES.ITEM}--selected`);
+    element.classList.add(`${prefix}-${getListClass('ITEM')}--selected`);
   }
 
   return component;
@@ -100,7 +99,7 @@ const createListItem = (config: ListItemConfig): any => {
     prefix: PREFIX
   };
 
-  const layoutClass = config.layout === LIST_ITEM_LAYOUTS.VERTICAL ? 'vertical' : '';
+  const layoutClass = config.layout === 'vertical' ? 'vertical' : '';
   const combinedClass = `${layoutClass} ${config.class || ''}`.trim();
 
   return pipe(

package/src/components/list/types.ts

@@ -1,5 +1,50 @@
 // src/components/list/types.ts
-import { LIST_TYPES, LIST_LAYOUTS } from './constants';
+
+/**
+ * List type variants
+ * @category Components
+ */
+export type ListType = 'default' | 'single' | 'multi' | 'radio';
+
+/**
+ * List layout variants
+ * @category Components
+ */
+export type ListLayout = 'horizontal' | 'vertical';
+
+/**
+ * List item layout variants
+ * @category Components
+ */
+export type ListItemLayout = 'horizontal' | 'vertical';
+
+/**
+ * List element class names
+ * @internal
+ */
+export interface ListClasses {
+  ROOT: string;
+  GROUP: string;
+  GROUP_TITLE: string;
+  DIVIDER: string;
+  SECTION: string;
+  SECTION_TITLE: string;
+  ITEM: string;
+  ITEM_CONTENT: string;
+  ITEM_LEADING: string;
+  ITEM_TEXT: string;
+  ITEM_OVERLINE: string;
+  ITEM_HEADLINE: string;
+  ITEM_SUPPORTING: string;
+  ITEM_META: string;
+  ITEM_TRAILING: string;
+}
+
+/**
+ * List item states
+ * @internal
+ */
+export type ListItemState = 'selected' | 'disabled' | 'focused' | 'hovered';
 
 /**
  * List item configuration
@@ -9,7 +54,7 @@ export interface ListItemConfig {
   id: string;
   
   /** Item layout (horizontal/vertical) */
-  layout?: keyof typeof LIST_LAYOUTS | string;
+  layout?: ListLayout | string;
   
   /** Leading content (icon/avatar) */
   leading?: string | HTMLElement;
@@ -70,7 +115,7 @@ export interface SelectionChangeEvent {
   item?: ListItemData;
   
   /** List selection type */
-  type: keyof typeof LIST_TYPES | string;
+  type: ListType | string;
 }
 
 /**
@@ -92,10 +137,10 @@ export interface ListItemData {
  */
 export interface ListConfig {
   /** List selection type */
-  type?: keyof typeof LIST_TYPES | string;
+  type?: ListType | string;
   
   /** List layout */
-  layout?: keyof typeof LIST_LAYOUTS | string;
+  layout?: ListLayout | string;
   
   /** List items */
   items?: ListItemConfig[];