mtrl 0.1.3 → 0.2.1

package/src/components/card/{styles.scss → _styles.scss}

@@ -1,4 +1,4 @@
-// src/components/card/styles.scss
+// src/components/card/_card.scss
 @use '../../styles/abstract/base' as base;
 @use '../../styles/abstract/variables' as v;
 @use '../../styles/abstract/functions' as f;
@@ -17,9 +17,8 @@ $component: '#{base.$prefix}-card';
   background-color: t.color('surface');
   color: t.color('on-surface');
   overflow: hidden;
-  // width: v.card('width');
-  width: 340px;
-  --card-elevation: m.elevation(2);
+  width: 320px; // Fixed width since v.card() isn't available
+  --card-elevation: 1;
   
   // Typography
   @include m.typography('body-medium');
@@ -50,10 +49,10 @@ $component: '#{base.$prefix}-card';
   
   // Elevated variant
   &--elevated {
-    // @include m.elevation(m.elevation(2));
+    @include m.elevation(1);
     
-    &:hover {
-      --card-elevation: 2;
+    &:hover.#{$component}--interactive {
+      @include m.elevation(2);
     }
   }
   
@@ -284,4 +283,77 @@ $component: '#{base.$prefix}-card';
   &--state-loading {
     pointer-events: none;
   }
+  
+  &--dragging {
+    @include m.elevation(4);
+    opacity: 0.9;
+  }
+  
+  // Loading overlay
+  &-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(t.color('surface'), 0.7);
+    z-index: 1;
+  }
+  
+  &-loading-spinner {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: 3px solid rgba(t.color('primary'), 0.2);
+    border-top-color: t.color('primary');
+    animation: card-spinner 1s infinite linear;
+  }
+  
+  // Expandable content
+  &-expandable-content {
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+  }
+  
+  &-expand-button {
+    background: none;
+    border: none;
+    padding: 8px;
+    cursor: pointer;
+    color: t.color('primary');
+    
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-right: 2px solid currentColor;
+      border-bottom: 2px solid currentColor;
+      transform: rotate(45deg);
+      transition: transform 0.3s ease;
+    }
+    
+    &[aria-expanded="true"]::before {
+      transform: rotate(-135deg);
+    }
+  }
+  
+  // Swipeable card
+  &--swipeable {
+    touch-action: pan-y;
+    transition: transform 0.3s ease;
+  }
+}
+
+// Spinner animation
+@keyframes card-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }

package/src/components/card/{actions.js → actions.ts}

@@ -1,23 +1,20 @@
-// src/components/card/actions.js
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
+// src/components/card/actions.ts
+import { PREFIX } from '../../core/config';
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import { CardActionsConfig } from './types';
 
 /**
  * Creates a card actions component
- * @param {Object} config - Actions configuration
- * @param {Array<HTMLElement>} [config.actions] - Action elements to include
- * @param {boolean} [config.fullBleed=false] - Whether actions extend full width
- * @param {boolean} [config.vertical=false] - Whether to stack actions vertically
- * @param {string} [config.align='start'] - Horizontal alignment ('start', 'center', 'end', 'space-between')
+ * @param {CardActionsConfig} config - Actions configuration
  * @returns {HTMLElement} Card actions element
  */
-export const createCardActions = (config = {}) => {
+export const createCardActions = (config: CardActionsConfig = {}): HTMLElement => {
   const baseConfig = {
     ...config,
     componentName: 'card-actions',
     prefix: PREFIX
-  }
+  };
 
   try {
     const actions = pipe(
@@ -32,20 +29,20 @@ export const createCardActions = (config = {}) => {
           config.align ? `${PREFIX}-card-actions--${config.align}` : null
         ]
       })
-    )(baseConfig)
+    )(baseConfig);
 
     // Add action elements if provided
     if (Array.isArray(config.actions)) {
       config.actions.forEach(action => {
         if (action instanceof HTMLElement) {
-          actions.element.appendChild(action)
+          actions.element.appendChild(action);
         }
-      })
+      });
     }
 
-    return actions.element
+    return actions.element;
   } catch (error) {
-    console.error('Card actions creation error:', error)
-    throw new Error(`Failed to create card actions: ${error.message}`)
+    console.error('Card actions creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create card actions: ${error instanceof Error ? error.message : String(error)}`);
   }
-}
+};

package/src/components/card/{api.js → api.ts}

@@ -1,102 +1,102 @@
-// src/components/card/api.js
+// src/components/card/api.ts
+import { BaseComponent, CardComponent, ApiOptions } from './types';
 
 /**
  * Enhances a card component with API methods
- * @param {Object} options - API configuration options
- * @param {Object} options.lifecycle - Object containing lifecycle methods
+ * @param {ApiOptions} options - API configuration options
  * @returns {Function} Higher-order function that adds API methods to component
  * @internal This is an internal utility for the Card component
  */
-export const withAPI = ({ lifecycle }) => (component) => ({
+export const withAPI = ({ lifecycle }: ApiOptions) => (component: BaseComponent): CardComponent => ({
   ...component,
   element: component.element,
 
   /**
    * Adds content to the card
    * @param {HTMLElement} contentElement - The content element to add
-   * @returns {Object} The card instance for chaining
+   * @returns {CardComponent} The card instance for chaining
    */
-  addContent (contentElement) {
+  addContent(contentElement: HTMLElement): CardComponent {
     if (contentElement && contentElement.classList.contains(`${component.getClass('card')}-content`)) {
-      component.element.appendChild(contentElement)
+      component.element.appendChild(contentElement);
     }
-    return this
+    return this;
   },
 
   /**
    * Sets the card header
    * @param {HTMLElement} headerElement - The header element to add
-   * @returns {Object} The card instance for chaining
+   * @returns {CardComponent} The card instance for chaining
    */
-  setHeader (headerElement) {
+  setHeader(headerElement: HTMLElement): CardComponent {
     if (headerElement && headerElement.classList.contains(`${component.getClass('card')}-header`)) {
       // Remove existing header if present
-      const existingHeader = component.element.querySelector(`.${component.getClass('card')}-header`)
+      const existingHeader = component.element.querySelector(`.${component.getClass('card')}-header`);
       if (existingHeader) {
-        existingHeader.remove()
+        existingHeader.remove();
       }
 
       // Insert at the beginning of the card
-      component.element.insertBefore(headerElement, component.element.firstChild)
+      component.element.insertBefore(headerElement, component.element.firstChild);
     }
-    return this
+    return this;
   },
 
   /**
    * Adds media to the card
    * @param {HTMLElement} mediaElement - The media element to add
    * @param {string} [position='top'] - Position to place media ('top', 'bottom')
-   * @returns {Object} The card instance for chaining
+   * @returns {CardComponent} The card instance for chaining
    */
-  addMedia (mediaElement, position = 'top') {
+  addMedia(mediaElement: HTMLElement, position: 'top' | 'bottom' = 'top'): CardComponent {
     if (mediaElement && mediaElement.classList.contains(`${component.getClass('card')}-media`)) {
       if (position === 'top') {
-        component.element.insertBefore(mediaElement, component.element.firstChild)
+        component.element.insertBefore(mediaElement, component.element.firstChild);
       } else {
-        component.element.appendChild(mediaElement)
+        component.element.appendChild(mediaElement);
       }
     }
-    return this
+    return this;
   },
 
   /**
    * Sets the card actions section
    * @param {HTMLElement} actionsElement - The actions element to add
-   * @returns {Object} The card instance for chaining
+   * @returns {CardComponent} The card instance for chaining
    */
-  setActions (actionsElement) {
+  setActions(actionsElement: HTMLElement): CardComponent {
     if (actionsElement && actionsElement.classList.contains(`${component.getClass('card')}-actions`)) {
       // Remove existing actions if present
-      const existingActions = component.element.querySelector(`.${component.getClass('card')}-actions`)
+      const existingActions = component.element.querySelector(`.${component.getClass('card')}-actions`);
       if (existingActions) {
-        existingActions.remove()
+        existingActions.remove();
       }
 
       // Add actions at the end
-      component.element.appendChild(actionsElement)
+      component.element.appendChild(actionsElement);
     }
-    return this
+    return this;
   },
 
   /**
    * Makes the card draggable
    * @param {Function} [dragStartCallback] - Callback for drag start event
-   * @returns {Object} The card instance for chaining
+   * @returns {CardComponent} The card instance for chaining
    */
-  makeDraggable (dragStartCallback) {
-    component.element.setAttribute('draggable', 'true')
+  makeDraggable(dragStartCallback?: (event: DragEvent) => void): CardComponent {
+    component.element.setAttribute('draggable', 'true');
 
     if (typeof dragStartCallback === 'function') {
-      component.element.addEventListener('dragstart', dragStartCallback)
+      component.element.addEventListener('dragstart', dragStartCallback as EventListener);
     }
 
-    return this
+    return this;
   },
 
   /**
    * Destroys the card component and removes event listeners
    */
-  destroy () {
-    lifecycle.destroy()
+  destroy(): void {
+    lifecycle.destroy();
   }
-})
+});

package/src/components/card/card.ts

@@ -0,0 +1,41 @@
+// src/components/card/card.ts
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import {
+  withEvents,
+  withVariant,
+  withRipple,
+  withLifecycle
+} from '../../core/compose/features';
+import { withAPI } from './api';
+import { CardComponent, BaseComponent, CardSchema } from './types';
+import { createBaseConfig, getElementConfig, getApiConfig, withInteractiveBehavior } from './config';
+
+/**
+ * Creates a new Card component following Material Design 3 principles
+ * @param {CardSchema} config - Card configuration object
+ * @returns {CardComponent} Card component instance
+ */
+const createCard = (config: CardSchema = {}): CardComponent => {
+  const baseConfig = createBaseConfig(config);
+
+  try {
+    const card = pipe(
+      createBase,
+      withEvents(),
+      withElement(getElementConfig(baseConfig)),
+      withVariant(baseConfig),
+      config.clickable ? withRipple(baseConfig) : (c: BaseComponent) => c,
+      withLifecycle(),
+      withInteractiveBehavior,
+      comp => withAPI(getApiConfig(comp))(comp)
+    )(baseConfig);
+
+    return card as CardComponent;
+  } catch (error) {
+    console.error('Card creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create card: ${error instanceof Error ? error.message : String(error)}`);
+  }
+};
+
+export default createCard;

package/src/components/card/config.ts

@@ -0,0 +1,99 @@
+// src/components/card/config.ts
+import { 
+  createComponentConfig, 
+  createElementConfig,
+  BaseComponentConfig 
+} from '../../core/config/component-config';
+import { BaseComponent, CardSchema } from './types';
+import { CARD_VARIANTS, CARD_ELEVATIONS } from './constants';
+
+/**
+ * Default configuration for the Card component
+ */
+export const defaultConfig: CardSchema = {
+  variant: CARD_VARIANTS.ELEVATED,
+  interactive: false,
+  fullWidth: false,
+  clickable: false,
+  draggable: false
+};
+
+/**
+ * Creates the base configuration for Card component
+ * @param {CardSchema} config - User provided configuration
+ * @returns {CardSchema} Complete configuration with defaults applied
+ */
+export const createBaseConfig = (config: CardSchema = {}): CardSchema => 
+  createComponentConfig(defaultConfig, config, 'card') as CardSchema;
+
+/**
+ * Generates element configuration for the Card component
+ * @param {CardSchema} config - Card configuration
+ * @returns {Object} Element configuration object for withElement
+ */
+export const getElementConfig = (config: CardSchema) =>
+  createElementConfig(config, {
+    tag: 'div',
+    className: [
+      config.class,
+      config.fullWidth ? `${config.prefix}-card--full-width` : null,
+      config.interactive ? `${config.prefix}-card--interactive` : null
+    ],
+    forwardEvents: {
+      click: (component: BaseComponent) => !!config.clickable,
+      mouseenter: (component: BaseComponent) => !!config.interactive,
+      mouseleave: (component: BaseComponent) => !!config.interactive
+    },
+    interactive: config.interactive || config.clickable
+  });
+
+/**
+ * Creates API configuration for the Card component
+ * @param {Object} comp - Component with lifecycle feature
+ * @returns {Object} API configuration object
+ */
+export const getApiConfig = (comp) => ({
+  lifecycle: {
+    destroy: () => comp.lifecycle?.destroy?.()
+  }
+});
+
+/**
+ * Adds interactive behavior to card component
+ * @param {BaseComponent} comp - Card component
+ * @returns {BaseComponent} Enhanced card component
+ */
+export const withInteractiveBehavior = (comp: BaseComponent): BaseComponent => {
+  // Implement hover state elevation changes for interactive cards
+  if (comp.config.interactive) {
+    comp.element.addEventListener('mouseenter', () => {
+      if (comp.config.variant === CARD_VARIANTS.ELEVATED) {
+        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.HOVERED));
+      }
+    });
+
+    comp.element.addEventListener('mouseleave', () => {
+      if (comp.config.variant === CARD_VARIANTS.ELEVATED) {
+        comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.RESTING));
+      }
+    });
+  }
+
+  // Set up draggable
+  if (comp.config.draggable) {
+    comp.element.setAttribute('draggable', 'true');
+    comp.element.addEventListener('dragstart', (e) => {
+      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.DRAGGED));
+      comp.emit?.('dragstart', { event: e });
+    });
+
+    comp.element.addEventListener('dragend', (e) => {
+      comp.element.style.setProperty('--card-elevation', String(CARD_ELEVATIONS.RESTING));
+      comp.emit?.('dragend', { event: e });
+    });
+  }
+
+  return comp;
+};
+
+export default defaultConfig;

package/src/components/card/{constants.js → constants.ts}

@@ -1,24 +1,25 @@
-// src/components/card/constants.js
+// src/components/card/constants.ts
+import { CardVariant, CardElevation } from './types';
 
 /**
  * Card variant types following Material Design 3
  * @enum {string}
  */
 export const CARD_VARIANTS = {
-  ELEVATED: 'elevated',
-  FILLED: 'filled',
-  OUTLINED: 'outlined'
-}
+  ELEVATED: CardVariant.ELEVATED,
+  FILLED: CardVariant.FILLED,
+  OUTLINED: CardVariant.OUTLINED
+};
 
 /**
  * Card elevation levels
  * @enum {number}
  */
 export const CARD_ELEVATIONS = {
-  RESTING: 1,
-  HOVERED: 2,
-  DRAGGED: 4
-}
+  RESTING: CardElevation.RESTING,
+  HOVERED: CardElevation.HOVERED,
+  DRAGGED: CardElevation.DRAGGED
+};
 
 /**
  * Validation schema for card configuration
@@ -65,4 +66,4 @@ export const CARD_SCHEMA = {
     type: 'object',
     required: false
   }
-}
+};

package/src/components/card/{content.js → content.ts}

@@ -1,23 +1,20 @@
-// src/components/card/content.js
-import { PREFIX } from '../../core/config'
-import { pipe } from '../../core/compose'
-import { createBase, withElement } from '../../core/compose/component'
+// src/components/card/content.ts
+import { PREFIX } from '../../core/config';
+import { pipe } from '../../core/compose';
+import { createBase, withElement } from '../../core/compose/component';
+import { CardContentConfig } from './types';
 
 /**
  * Creates a card content component
- * @param {Object} config - Content configuration
- * @param {string} [config.text] - Text content
- * @param {string} [config.html] - HTML content
- * @param {Array<HTMLElement>} [config.children] - Child elements to append
- * @param {boolean} [config.padding=true] - Whether to apply default padding
+ * @param {CardContentConfig} config - Content configuration
  * @returns {HTMLElement} Card content element
  */
-export const createCardContent = (config = {}) => {
+export const createCardContent = (config: CardContentConfig = {}): HTMLElement => {
   const baseConfig = {
     ...config,
     componentName: 'card-content',
     prefix: PREFIX
-  }
+  };
 
   try {
     const content = pipe(
@@ -32,20 +29,20 @@ export const createCardContent = (config = {}) => {
         html: config.html,
         text: config.text
       })
-    )(baseConfig)
+    )(baseConfig);
 
     // Add children if provided
     if (Array.isArray(config.children)) {
       config.children.forEach(child => {
         if (child instanceof HTMLElement) {
-          content.element.appendChild(child)
+          content.element.appendChild(child);
         }
-      })
+      });
     }
 
-    return content.element
+    return content.element;
   } catch (error) {
-    console.error('Card content creation error:', error)
-    throw new Error(`Failed to create card content: ${error.message}`)
+    console.error('Card content creation error:', error instanceof Error ? error.message : String(error));
+    throw new Error(`Failed to create card content: ${error instanceof Error ? error.message : String(error)}`);
   }
-}
+};