mtrl 0.2.7 → 0.2.8

package/src/components/card/config.ts

@@ -1,10 +1,8 @@
 // src/components/card/config.ts
-
 import { 
   createComponentConfig, 
   createElementConfig
 } from '../../core/config/component-config';
-import { CARD_VARIANTS, CARD_ELEVATIONS } from './constants';
 import { 
   createCardHeader, 
   createCardContent, 
@@ -18,7 +16,7 @@ import { CardComponent, CardSchema, ButtonConfig, BaseComponent } from './types'
  * @const {CardSchema}
  */
 export const defaultConfig: CardSchema = {
-  variant: CARD_VARIANTS.ELEVATED,
+  variant: 'elevated',
   interactive: false,
   fullWidth: false,
   clickable: false,
@@ -191,6 +189,16 @@ export const getApiConfig = (comp: any) => ({
   }
 });
 
+/**
+ * Card elevation levels
+ */
+export const CARD_ELEVATION_LEVELS = {
+  LEVEL0: 0,
+  LEVEL1: 1,
+  LEVEL2: 2,
+  LEVEL4: 4
+};
+
 /**
  * Adds interactive behavior to card component
  * Uses the MTRL elevation system for proper elevation levels
@@ -206,14 +214,14 @@ export const withInteractiveBehavior = (comp: BaseComponent): BaseComponent => {
   if (isInteractive) {
     // Mouse interactions
     comp.element.addEventListener('mouseenter', () => {
-      if (config.variant === CARD_VARIANTS.ELEVATED) {
-        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.LEVEL2));
+      if (config.variant === 'elevated') {
+        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL2));
       }
     });
 
     comp.element.addEventListener('mouseleave', () => {
-      if (config.variant === CARD_VARIANTS.ELEVATED) {
-        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.LEVEL1));
+      if (config.variant === 'elevated') {
+        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL1));
       }
     });
     
@@ -241,7 +249,7 @@ export const withInteractiveBehavior = (comp: BaseComponent): BaseComponent => {
     comp.element.setAttribute('draggable', 'true');
     
     comp.element.addEventListener('dragstart', (e: DragEvent) => {
-      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.LEVEL4));
+      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL4));
       comp.element.classList.add(`${comp.getClass('card')}--dragging`);
       comp.emit?.('dragstart', { event: e });
       
@@ -254,7 +262,7 @@ export const withInteractiveBehavior = (comp: BaseComponent): BaseComponent => {
     });
 
     comp.element.addEventListener('dragend', (e: DragEvent) => {
-      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.LEVEL1));
+      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL1));
       comp.element.classList.remove(`${comp.getClass('card')}--dragging`);
       comp.emit?.('dragend', { event: e });
     });

package/src/components/card/content.ts

@@ -2,8 +2,11 @@
 import { PREFIX } from '../../core/config';
 import { pipe } from '../../core/compose';
 import { createBase, withElement } from '../../core/compose/component';
-import { CardContentConfig } from './types';
-import { CARD_CONTENT_PADDING } from './constants';
+import { createElement } from '../../core/dom/create';
+import { CardContentConfig, CardHeaderConfig, CardMediaConfig, CardActionsConfig } from './types';
+
+// Constants for content padding
+export const CARD_CONTENT_PADDING = true;
 
 /**
  * Creates a card content component
@@ -78,9 +81,6 @@ export const createCardContent = (config: CardContentConfig = {}): HTMLElement =
   }
 };
 
-// src/components/card/header.ts
-import { createElement } from '../../core/dom/create';
-
 /**
  * Creates a card header component
  * 
@@ -103,7 +103,7 @@ import { createElement } from '../../core/dom/create';
  * });
  * ```
  */
-export const createCardHeader = (config: any = {}): HTMLElement => {
+export const createCardHeader = (config: CardHeaderConfig = {}): HTMLElement => {
   const baseConfig = {
     ...config,
     componentName: 'card-header',
@@ -200,7 +200,6 @@ export const createCardHeader = (config: any = {}): HTMLElement => {
   }
 };
 
-// src/components/card/actions.ts
 /**
  * Creates a card actions component
  * 
@@ -225,7 +224,7 @@ export const createCardHeader = (config: any = {}): HTMLElement => {
  * });
  * ```
  */
-export const createCardActions = (config: any = {}): HTMLElement => {
+export const createCardActions = (config: CardActionsConfig = {}): HTMLElement => {
   const baseConfig = {
     ...config,
     componentName: 'card-actions',
@@ -273,7 +272,6 @@ export const createCardActions = (config: any = {}): HTMLElement => {
   }
 };
 
-// src/components/card/media.ts
 /**
  * Creates a card media component
  * 
@@ -296,7 +294,7 @@ export const createCardActions = (config: any = {}): HTMLElement => {
  * });
  * ```
  */
-export const createCardMedia = (config: any = {}): HTMLElement => {
+export const createCardMedia = (config: CardMediaConfig = {}): HTMLElement => {
   const baseConfig = {
     ...config,
     componentName: 'card-media',

package/src/components/card/features.ts

@@ -2,9 +2,7 @@
 import { PREFIX } from '../../core/config';
 import { createElement } from '../../core/dom/create';
 import { BaseComponent, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature } from './types';
-
-import { createCardHeader, createCardContent, createCardMedia, createCardActions } from './content';
-import { BaseComponent, CardComponent, CardHeaderConfig, CardContentConfig, CardMediaConfig, CardActionsConfig, CardSchema, ButtonConfig } from './types';
+import { CARD_ELEVATION_LEVELS } from './config';
 
 interface LoadingConfig {
   initialState?: boolean;
@@ -115,9 +113,9 @@ export const withElevation = (component: BaseComponent): BaseComponent => {
   
   // Set initial elevation based on variant
   if (config.variant === 'elevated') {
-    component.element.style.setProperty('--card-elevation', '1');
+    component.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL1));
   } else {
-    component.element.style.setProperty('--card-elevation', '0');
+    component.element.style.setProperty('--card-elevation', String(CARD_ELEVATION_LEVELS.LEVEL0));
   }
   
   return component;
@@ -266,7 +264,7 @@ export const withExpandable = (config: ExpandableConfig = {}) => (component: Bas
  *     onSwipeLeft: (card) => console.log('Swiped left'),
  *     onSwipeRight: (card) => console.log('Swiped right')
  *   })
- * )({ variant: CardVariant.ELEVATED });
+ * )({ variant: 'elevated' });
  * ```
  */
 export const withSwipeable = (config: SwipeableConfig = {}) => (component: BaseComponent): BaseComponent & { swipeable: SwipeableFeature } => {

package/src/components/card/index.ts

@@ -29,7 +29,7 @@ export {
 
 export {
   CardVariant,
-  CardElevation,
+  CardElevationLevel,
   CardSchema,
   CardHeaderConfig,
   CardContentConfig,
@@ -38,4 +38,31 @@ export {
   CardAriaAttributes,
   CardComponent
 } from './types';
-export { CARD_VARIANTS, CARD_ELEVATIONS, CARD_WIDTHS, CARD_CORNER_RADIUS } from './constants';
+
+// Export card constants for backward compatibility
+export const CARD_VARIANTS = {
+  ELEVATED: 'elevated',
+  FILLED: 'filled',
+  OUTLINED: 'outlined'
+} as const;
+
+export const CARD_ELEVATIONS = {
+  LEVEL0: 0,
+  LEVEL1: 1,
+  LEVEL2: 2,
+  LEVEL4: 4
+} as const;
+
+// Additional constants
+export const CARD_WIDTHS = {
+  SMALL: '344px',
+  MEDIUM: '480px',
+  LARGE: '624px',
+  FULL: '100%'
+} as const;
+
+export const CARD_CORNER_RADIUS = {
+  SMALL: '8px',
+  MEDIUM: '12px',
+  LARGE: '16px'
+} as const;

package/src/components/card/types.ts

@@ -1,31 +1,14 @@
 // src/components/card/types.ts
+
 /**
- * Card variant types following Material Design 3 specifications
- * @enum {string}
+ * Card variant types
  */
-export enum CardVariant {
-  /** Elevated card with shadow */
-  ELEVATED = 'elevated',
-  /** Filled card with higher surface container color */
-  FILLED = 'filled',
-  /** Outlined card with border */
-  OUTLINED = 'outlined'
-}
+export type CardVariant = 'elevated' | 'filled' | 'outlined';
 
 /**
- * Card elevation levels based on MD3 guidelines
- * @enum {number}
+ * Card elevation levels
  */
-export enum CardElevation {
-  /** No elevation (for filled and outlined variants) */
-  LEVEL0 = 0,
-  /** Default elevation for elevated cards */
-  LEVEL1 = 1,
-  /** Elevation for hovered state */
-  LEVEL2 = 2,
-  /** Elevation for dragged state */
-  LEVEL4 = 4
-}
+export type CardElevationLevel = 0 | 1 | 2 | 4;
 
 /**
  * Button configuration interface for buttons shorthand
@@ -48,7 +31,7 @@ export interface ButtonConfig {
  */
 export interface CardSchema {
   /** Card variant type (elevated, filled, outlined) */
-  variant?: CardVariant;
+  variant?: CardVariant | string;
   /** Whether the card is interactive */
   interactive?: boolean;
   /** Whether the card should take full width */

package/src/components/checkbox/config.ts

@@ -5,14 +5,13 @@ import {
   BaseComponentConfig 
 } from '../../core/config/component-config';
 import { CheckboxConfig, BaseComponent, ApiOptions } from './types';
-import { CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION } from './constants';
 
 /**
  * Default configuration for the Checkbox component
  */
 export const defaultConfig: CheckboxConfig = {
-  variant: CHECKBOX_VARIANTS.FILLED,
-  labelPosition: CHECKBOX_LABEL_POSITION.END
+  variant: 'filled',
+  labelPosition: 'end'
 };
 
 /**
@@ -58,7 +57,7 @@ export const withCheckIcon = (config: CheckboxConfig) => (component: BaseCompone
  * @param {CheckboxConfig} config - Component configuration
  */
 export const withLabelPosition = (config: CheckboxConfig) => (component: BaseComponent): BaseComponent => {
-  const position = config.labelPosition || CHECKBOX_LABEL_POSITION.END;
+  const position = config.labelPosition || 'end';
   const positionClass = `${config.prefix}-checkbox--label-${position}`;
 
   component.element.classList.add(positionClass);

package/src/components/checkbox/index.ts

@@ -1,4 +1,3 @@
 // src/components/checkbox/index.ts
 export { default } from './checkbox';
-export { CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION } from './constants';
-export { CheckboxConfig, CheckboxComponent } from './types';
+export { CheckboxConfig, CheckboxComponent, CheckboxVariant, CheckboxLabelPosition } from './types';

package/src/components/checkbox/types.ts

@@ -1,5 +1,14 @@
 // src/components/checkbox/types.ts
-import { CHECKBOX_VARIANTS, CHECKBOX_LABEL_POSITION } from './constants';
+
+/**
+ * Checkbox variant types
+ */
+export type CheckboxVariant = 'filled' | 'outlined';
+
+/**
+ * Checkbox label position types
+ */
+export type CheckboxLabelPosition = 'start' | 'end';
 
 /**
  * Configuration interface for the Checkbox component
@@ -27,10 +36,10 @@ export interface CheckboxConfig {
   label?: string;
   
   /** Label position (start/end) */
-  labelPosition?: keyof typeof CHECKBOX_LABEL_POSITION | string;
+  labelPosition?: CheckboxLabelPosition | string;
   
   /** Visual variant */
-  variant?: keyof typeof CHECKBOX_VARIANTS | string;
+  variant?: CheckboxVariant | string;
   
   /** Additional CSS classes */
   class?: string;