mtrl 0.3.1 → 0.3.3

package/src/components/sheet/types.ts

@@ -1,5 +1,33 @@
 // src/components/sheet/types.ts
-import { SHEET_VARIANTS, SHEET_POSITIONS } from './constants';
+
+/**
+ * Sheet variants
+ */
+export const SHEET_VARIANTS = {
+  STANDARD: 'standard',
+  MODAL: 'modal',
+  EXPANDED: 'expanded'
+} as const;
+
+/**
+ * Sheet positions
+ */
+export const SHEET_POSITIONS = {
+  BOTTOM: 'bottom',
+  TOP: 'top',
+  LEFT: 'left',
+  RIGHT: 'right'
+} as const;
+
+/**
+ * Sheet events
+ */
+export const SHEET_EVENTS = {
+  OPEN: 'open',
+  CLOSE: 'close',
+  DRAG_START: 'dragstart',
+  DRAG_END: 'dragend'
+} as const;
 
 /**
  * Configuration interface for the Sheet component

package/src/components/slider/api.ts

@@ -1,6 +1,6 @@
 // src/components/slider/api.ts
 import { SliderComponent, SliderEvent } from './types';
-import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './constants';
+import { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './types';
 
 /**
  * API options interface - structured by feature area

package/src/components/slider/config.ts

@@ -4,7 +4,7 @@ import {
   createElementConfig
 } from '../../core/config/component-config';
 import { SliderConfig } from './types';
-import { SLIDER_COLORS, SLIDER_SIZES } from './constants';
+import { SLIDER_COLORS, SLIDER_SIZES } from './types';
 import { createSliderSchema } from './schema';
 
 /**

package/src/components/slider/features/controller.ts

@@ -1,5 +1,5 @@
 // src/components/slider/features/controller.ts
-import { SLIDER_EVENTS } from '../constants';
+import { SLIDER_EVENTS } from '../types';
 import { SliderConfig } from '../types';
 import { createHandlers } from './handlers';
 

package/src/components/slider/features/handlers.ts

@@ -1,5 +1,5 @@
 // src/components/slider/features/handlers.ts
-import { SLIDER_EVENTS } from '../constants';
+import { SLIDER_EVENTS } from '../types';
 import { SliderConfig, SliderEvent } from '../types';
 
 /**

package/src/components/slider/features/states.ts

@@ -1,5 +1,5 @@
 // src/components/slider/features/states.ts
-import { SLIDER_COLORS, SLIDER_SIZES } from '../constants';
+import { SLIDER_COLORS, SLIDER_SIZES } from '../types';
 import { SliderConfig } from '../types';
 
 /**

package/src/components/slider/index.ts

@@ -3,8 +3,15 @@
 // Export main component creator
 export { default } from './slider';
 
-// Export constants
-export { SLIDER_COLORS, SLIDER_SIZES, SLIDER_EVENTS } from './constants';
-
-// Export types for TypeScript users
-export type { SliderConfig, SliderComponent, SliderEvent } from './types';
+// Export constants and types 
+export { 
+  // Constants
+  SLIDER_COLORS,
+  SLIDER_SIZES,
+  SLIDER_EVENTS,
+  
+  // Types
+  type SliderConfig, 
+  type SliderComponent, 
+  type SliderEvent 
+} from './types';

package/src/components/slider/schema.ts

@@ -22,7 +22,7 @@ export function createSliderSchema(component, config: SliderConfig) {
   // Calculate initial position
   const valuePercent = ((value - min) / (max - min)) * 100;
   
-  // Return base structure definition formatted for createStructure
+  // Return base structure definition formatted for createLayout
   return {
     element: {
       options: {

package/src/components/slider/types.ts

@@ -1,5 +1,36 @@
 // src/components/slider/types.ts
 
+/**
+ * Available slider color variants
+ */
+export const SLIDER_COLORS = {
+  PRIMARY: 'primary',
+  SECONDARY: 'secondary',
+  TERTIARY: 'tertiary',
+  ERROR: 'error'
+} as const;
+
+/**
+ * Available slider size variants
+ */
+export const SLIDER_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+} as const;
+
+/**
+ * Available slider events
+ */
+export const SLIDER_EVENTS = {
+  CHANGE: 'change',
+  INPUT: 'input',
+  FOCUS: 'focus',
+  BLUR: 'blur',
+  START: 'start',
+  END: 'end'
+} as const;
+
 /**
  * Available slider color variants
  */

package/src/components/tabs/tab-api.ts

@@ -1,6 +1,6 @@
 // src/components/tabs/tab-api.ts
 import { TabComponent } from './types';
-import { BadgeComponent } from '../badge/types';
+import type { BadgeComponent } from '../badge';
 import createBadge from '../badge';
 
 const TAB_LAYOUT = {

package/src/components/tabs/types.ts

@@ -1,5 +1,5 @@
 // src/components/tabs/types.ts
-import { BadgeComponent } from '../badge/types';
+import type { BadgeComponent } from '../badge';
 import { TabIndicator } from './indicator';
 
 /**

package/src/components/tooltip/api.ts

@@ -1,6 +1,10 @@
 // src/components/tooltip/api.ts
-import { TooltipComponent } from './types';
-import { TOOLTIP_POSITIONS, DEFAULT_OFFSET, DEFAULT_ARROW_SIZE } from './config';
+import { 
+  TooltipComponent, 
+  TOOLTIP_POSITIONS, 
+  DEFAULT_OFFSET, 
+  DEFAULT_ARROW_SIZE 
+} from './types';
 
 interface ApiOptions {
   lifecycle: {

package/src/components/tooltip/config.ts

@@ -3,34 +3,15 @@ import {
   createComponentConfig, 
   createElementConfig
 } from '../../core/config/component-config';
-import { TooltipConfig } from './types';
-
-
-export const TOOLTIP_POSITIONS = {
-  TOP: 'top',
-  RIGHT: 'right',
-  BOTTOM: 'bottom',
-  LEFT: 'left',
-  TOP_START: 'top-start',
-  TOP_END: 'top-end',
-  RIGHT_START: 'right-start',
-  RIGHT_END: 'right-end',
-  BOTTOM_START: 'bottom-start',
-  BOTTOM_END: 'bottom-end',
-  LEFT_START: 'left-start',
-  LEFT_END: 'left-end'
-}
-
-export const TOOLTIP_VARIANTS = {
-  DEFAULT: 'default',
-  RICH: 'rich',
-  PLAIN: 'plain'
-}
-
-export const DEFAULT_SHOW_DELAY = 300
-export const DEFAULT_HIDE_DELAY = 100
-export const DEFAULT_OFFSET = 8
-export const DEFAULT_ARROW_SIZE = 8
+import { 
+  TooltipConfig, 
+  TOOLTIP_POSITIONS,
+  TOOLTIP_VARIANTS,
+  DEFAULT_SHOW_DELAY,
+  DEFAULT_HIDE_DELAY,
+  DEFAULT_OFFSET,
+  DEFAULT_ARROW_SIZE
+} from './types';
 
 /**
  * Default configuration for the Tooltip component

package/src/components/tooltip/index.ts

@@ -1,3 +1,12 @@
 // src/components/tooltip/index.ts
 export { default } from './tooltip';
-export { TooltipConfig, TooltipComponent } from './types';
+export { 
+  TooltipConfig, 
+  TooltipComponent, 
+  TOOLTIP_POSITIONS, 
+  TOOLTIP_VARIANTS,
+  DEFAULT_SHOW_DELAY,
+  DEFAULT_HIDE_DELAY,
+  DEFAULT_OFFSET,
+  DEFAULT_ARROW_SIZE
+} from './types';

package/src/components/tooltip/types.ts

@@ -1,12 +1,47 @@
 // src/components/tooltip/types.ts
 
 /**
- * Available Textfield variants
+ * Tooltip positions
+ */
+export const TOOLTIP_POSITIONS = {
+  TOP: 'top',
+  RIGHT: 'right',
+  BOTTOM: 'bottom',
+  LEFT: 'left',
+  TOP_START: 'top-start',
+  TOP_END: 'top-end',
+  RIGHT_START: 'right-start',
+  RIGHT_END: 'right-end',
+  BOTTOM_START: 'bottom-start',
+  BOTTOM_END: 'bottom-end',
+  LEFT_START: 'left-start',
+  LEFT_END: 'left-end'
+} as const;
+
+/**
+ * Tooltip variants
+ */
+export const TOOLTIP_VARIANTS = {
+  DEFAULT: 'default',
+  RICH: 'rich',
+  PLAIN: 'plain'
+} as const;
+
+/**
+ * Default values
+ */
+export const DEFAULT_SHOW_DELAY = 300;
+export const DEFAULT_HIDE_DELAY = 100;
+export const DEFAULT_OFFSET = 8;
+export const DEFAULT_ARROW_SIZE = 8;
+
+/**
+ * Available Tooltip variants
  */
 export type TooltipVariant = 'default' | 'rich' | 'plain';
 
 /**
- * Available Textfield states
+ * Available Tooltip positions
  */
 export type TooltipPosition = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end';
 
@@ -38,7 +73,7 @@ export interface TooltipConfig {
    * Tooltip variant that determines visual styling
    * @default 'default'
    */
-  variant?: TooltipVariants | string;
+  variant?: TooltipVariant | string;
   
   /** 
    * Whether the tooltip is initially visible

package/src/core/dom/create.ts

@@ -6,6 +6,17 @@
 
 import { setAttributes } from './attributes';
 import { normalizeClasses } from '../utils';
+import { PREFIX } from '../config';
+
+/**
+ * Event handler function type
+ */
+export type EventHandler = (event: Event) => void;
+
+/**
+ * Event condition type - either a boolean or a function that returns a boolean
+ */
+export type EventCondition = boolean | ((context: any, event: Event) => boolean);
 
 /**
  * Options for element creation
@@ -59,7 +70,7 @@ export interface CreateElementOptions {
   /**
    * Events to forward when component has emit method
    */
-  forwardEvents?: Record<string, boolean | ((context: any, event: Event) => boolean)>;
+  forwardEvents?: Record<string, EventCondition>;
   
   /**
    * Callback after element creation
@@ -81,9 +92,12 @@ export interface CreateElementOptions {
  * Event handler storage to facilitate cleanup
  */
 export interface EventHandlerStorage {
-  [eventName: string]: EventListener;
+  [eventName: string]: EventHandler;
 }
 
+// Constant for prefix with dash
+const PREFIX_WITH_DASH = `${PREFIX}-`;
+
 /**
  * Creates a DOM element with the specified options
  *
@@ -108,89 +122,78 @@ export const createElement = (options: CreateElementOptions = {}): HTMLElement =
 
   const element = document.createElement(tag);
 
-  // Handle content
+  // Apply basic properties
   if (html) element.innerHTML = html;
   if (text) element.textContent = text;
   if (id) element.id = id;
 
   // Handle classes
   if (className) {
-    const normalizedClasses = normalizeClasses(className);
-    if (normalizedClasses.length) {
-      element.classList.add(...normalizedClasses);
+    const classes = normalizeClasses(className);
+    if (classes.length) {
+      // Apply prefix to classes in a single operation
+      element.classList.add(...classes.map(cls => 
+        cls && !cls.startsWith(PREFIX_WITH_DASH) ? PREFIX_WITH_DASH + cls : cls
+      ).filter(Boolean));
     }
   }
 
-  // Handle data attributes
-  Object.entries(data).forEach(([key, value]) => {
-    element.dataset[key] = value;
-  });
+  // Handle data attributes directly
+  for (const key in data) {
+    element.dataset[key] = data[key];
+  }
 
-  // Handle all other attributes
+  // Handle regular attributes
   const allAttrs = { ...attrs, ...rest };
-  Object.entries(allAttrs).forEach(([key, value]) => {
+  for (const key in allAttrs) {
+    const value = allAttrs[key];
     if (value != null) element.setAttribute(key, String(value));
-  });
-
-  // Initialize event handler storage if not present
-  if (!element.__eventHandlers) {
-    element.__eventHandlers = {};
   }
 
-  // Handle event forwarding if context has emit method or is a component with on method
+  // Handle event forwarding
   if (forwardEvents && (context?.emit || context?.on)) {
-    Object.entries(forwardEvents).forEach(([nativeEvent, eventConfig]) => {
-      // Create a wrapper handler function to evaluate condition and forward event
+    element.__eventHandlers = {};
+    
+    for (const nativeEvent in forwardEvents) {
+      const eventConfig = forwardEvents[nativeEvent];
+      
       const handler = (event: Event) => {
-        // Determine if the event should be forwarded
         let shouldForward = true;
         
         if (typeof eventConfig === 'function') {
           try {
-            // If it's a function, call with component context and event
-            shouldForward = eventConfig({ ...context, element }, event);
+            // Create a lightweight context clone
+            const ctxWithElement = { ...context, element };
+            shouldForward = eventConfig(ctxWithElement, event);
           } catch (error) {
             console.warn(`Error in event condition for ${nativeEvent}:`, error);
             shouldForward = false;
           }
         } else {
-          // If it's a boolean, use directly
           shouldForward = Boolean(eventConfig);
         }
         
-        // Forward the event if condition passes
         if (shouldForward) {
           if (context.emit) {
             context.emit(nativeEvent, { event, element, originalEvent: event });
           } else if (context.on) {
-            // This is a component with on method but no emit method
-            // Dispatch a custom event that can be listened to
-            const customEvent = new CustomEvent(nativeEvent, {
+            element.dispatchEvent(new CustomEvent(nativeEvent, {
               detail: { event, element, originalEvent: event },
               bubbles: true,
               cancelable: true
-            });
-            element.dispatchEvent(customEvent);
+            }));
           }
         }
       };
       
-      // Store the handler for future removal
       element.__eventHandlers[nativeEvent] = handler;
-      
-      // Add the actual event listener
       element.addEventListener(nativeEvent, handler);
-    });
+    }
   }
 
   // Append to container if provided
-  if (container) {
-    container.appendChild(element);
-  }
-
-  if (typeof onCreate === 'function') {
-    onCreate(element, context);
-  }
+  if (container) container.appendChild(element);
+  if (onCreate) onCreate(element, context);
 
   return element;
 };
@@ -200,10 +203,11 @@ export const createElement = (options: CreateElementOptions = {}): HTMLElement =
  * @param element - Element to cleanup
  */
 export const removeEventHandlers = (element: HTMLElement): void => {
-  if (element.__eventHandlers) {
-    Object.entries(element.__eventHandlers).forEach(([eventName, handler]) => {
-      element.removeEventListener(eventName, handler);
-    });
+  const handlers = element.__eventHandlers;
+  if (handlers) {
+    for (const event in handlers) {
+      element.removeEventListener(event, handlers[event]);
+    }
     delete element.__eventHandlers;
   }
 };
@@ -228,7 +232,9 @@ export const withClasses = (...classes: (string | string[])[]) =>
   (element: HTMLElement): HTMLElement => {
     const normalizedClasses = normalizeClasses(...classes);
     if (normalizedClasses.length) {
-      element.classList.add(...normalizedClasses);
+      element.classList.add(...normalizedClasses.map(cls => 
+        cls && !cls.startsWith(PREFIX_WITH_DASH) ? PREFIX_WITH_DASH + cls : cls
+      ).filter(Boolean));
     }
     return element;
   };
@@ -240,17 +246,17 @@ export const withClasses = (...classes: (string | string[])[]) =>
  */
 export const withContent = (content: Node | string) => 
   (element: HTMLElement): HTMLElement => {
-    if (content instanceof Node) {
-      element.appendChild(content);
-    } else {
-      element.textContent = content;
-    }
+    if (content instanceof Node) element.appendChild(content);
+    else element.textContent = content;
     return element;
   };
 
 // Extend HTMLElement interface to add eventHandlers property
 declare global {
   interface HTMLElement {
+    /**
+     * Storage for event handlers to enable cleanup
+     */
     __eventHandlers?: EventHandlerStorage;
   }
 }

package/src/index.ts

@@ -1,32 +1,130 @@
 // src/index.ts
-export { createElement } from './core/dom/create'
-export { default as createLayout } from './core/layout'
-export { default as createButton } from './components/button'
-export { default as createFab } from './components/fab'
-export { default as createExtendedFab } from './components/extended-fab'
-export { default as createSegmentedButton } from './components/segmented-button'
-export { default as createBottomAppBar } from './components/bottom-app-bar'
-export { default as createBadge } from './components/badge'
-export { default as createCard } from './components/card'
-export { default as createCarousel } from './components/carousel'
-export { default as createCheckbox } from './components/checkbox'
-export { default as createChip } from './components/chip'
-export { default as createDatePicker } from './components/datepicker'
-export { default as createDialog } from './components/dialog'
-export { default as createDivider } from './components/divider'
-export { default as createMenu } from './components/menu'
-export { default as createNavigation } from './components/navigation'
-export { default as createNavigationSystem } from './components/navigation'
-export { default as createProgress } from './components/progress'
-export { default as createRadios } from './components/radios'
-export { default as createSearch } from './components/search'
-export { default as createSheet } from './components/sheet'
-export { default as createSlider } from './components/slider'
-export { default as createSnackbar } from './components/snackbar'
-export { default as createSwitch } from './components/switch'
-export { default as createTabs } from './components/tabs'
-export { default as createTextfield } from './components/textfield'
-export { default as createTimePicker } from './components/timepicker'
-export { default as createTopAppBar } from './components/top-app-bar'
-export { default as createTooltip } from './components/tooltip'
-export { default as createList } from './components/list'
+/**
+ * Main mtrl library exports
+ * 
+ * @packageDocumentation
+ */
+
+// Direct component imports
+import { createElement } from './core/dom/create';
+import createLayout from './core/layout';
+import createBadge from './components/badge';
+import createBottomAppBar from './components/bottom-app-bar';
+import createButton from './components/button';
+import createCard from './components/card';
+import { 
+  createCardContent, 
+  createCardHeader, 
+  createCardActions, 
+  createCardMedia 
+} from './components/card/content';
+import createCarousel from './components/carousel';
+import createCheckbox from './components/checkbox';
+import { createChip, createChips } from './components/chips';
+import createDatePicker from './components/datepicker';
+import createDialog from './components/dialog';
+import { createDivider } from './components/divider';
+import createFab from './components/fab';
+import createExtendedFab from './components/extended-fab';
+import createList, { createListItem } from './components/list';
+import createMenu from './components/menu';
+import createNavigation, { createNavigationSystem } from './components/navigation';
+import createProgress from './components/progress';
+import createRadios from './components/radios';
+import createSearch from './components/search';
+import createSegmentedButton, { createSegment } from './components/segmented-button';
+import createSheet from './components/sheet';
+import createSlider from './components/slider';
+import createSnackbar from './components/snackbar';
+import createSwitch from './components/switch';
+import createTabs, { createTab } from './components/tabs';
+import createTextfield from './components/textfield';
+import createTimePicker from './components/timepicker';
+import createTopAppBar from './components/top-app-bar';
+import createTooltip from './components/tooltip';
+
+// Export all "create*" functions
+export {
+  createElement,
+  createLayout,
+  createBadge,
+  createBottomAppBar,
+  createButton,
+  createCard,
+  createCardContent, 
+  createCardHeader, 
+  createCardActions, 
+  createCardMedia,
+  createCarousel,
+  createCheckbox,
+  createChip,
+  createChipSet,
+  createDatePicker,
+  createDialog,
+  createDivider,
+  createFab,
+  createExtendedFab,
+  createList,
+  createListItem,
+  createMenu,
+  createNavigation,
+  createNavigationSystem,
+  createProgress,
+  createRadios,
+  createSearch,
+  createSegmentedButton,
+  createSegment,
+  createSheet,
+  createSlider,
+  createSnackbar,
+  createSwitch,
+  createTabs,
+  createTab,
+  createTextfield,
+  createTimePicker,
+  createTopAppBar,
+  createTooltip
+};
+
+// Export all "f*" aliases
+export {
+  createElement as fElement,
+  createLayout as fLayout,
+  createBadge as fBadge,
+  createBottomAppBar as fBottomAppBar,
+  createButton as fButton,
+  createCard as fCard,
+  createCardContent as fCardContent, 
+  createCardHeader as fCardHeader, 
+  createCardActions as fCardActions, 
+  createCardMedia as fCardMedia,
+  createCarousel as fCarousel,
+  createCheckbox as fCheckbox,
+  createChip as fChip,
+  createChips as fChips,
+  createDatePicker as fDatePicker,
+  createDialog as fDialog,
+  createDivider as fDivider,
+  createFab as fFab,
+  createExtendedFab as fExtendedFab,
+  createList as fList,
+  createListItem as fListItem,
+  createMenu as fMenu,
+  createNavigation as fNavigation,
+  createNavigationSystem as fNavigationSystem,
+  createProgress as fProgress,
+  createRadios as fRadios,
+  createSearch as fSearch,
+  createSegmentedButton as fSegmentedButton,
+  createSegment as fSegment,
+  createSheet as fSheet,
+  createSlider as fSlider,
+  createSnackbar as fSnackbar,
+  createSwitch as fSwitch,
+  createTabs as fTabs,
+  createTab as fTab,
+  createTextfield as fTextfield,
+  createTimePicker as fTimePicker,
+  createTopAppBar as fTopAppBar,
+  createTooltip as fTooltip
+};