mtrl 0.3.8 → 0.4.0

package/dist/components/card/features.d.ts

@@ -0,0 +1,131 @@
+import { BaseComponent, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature } from './types';
+interface LoadingConfig {
+    initialState?: boolean;
+}
+interface ExpandableConfig {
+    initialExpanded?: boolean;
+    expandableContent?: HTMLElement;
+}
+interface SwipeableConfig {
+    onSwipeLeft?: (component: CardComponent) => void;
+    onSwipeRight?: (component: CardComponent) => void;
+    threshold?: number;
+}
+/**
+ * Higher-order function to add loading state to a card.
+ * Adds a loading overlay with spinner and proper ARIA attributes
+ * for accessibility during asynchronous operations.
+ *
+ * @param {LoadingConfig} config - Loading state configuration
+ * @returns {Function} Card component enhancer
+ * @category Components
+ * @example
+ * ```typescript
+ * // Create a card with loading state
+ * const card = pipe(
+ *   createCard,
+ *   withLoading({ initialState: true })
+ * )();
+ *
+ * // Toggle loading state
+ * setTimeout(() => card.loading.setLoading(false), 2000);
+ *
+ * // Check loading state
+ * console.log(card.loading.isLoading()); // false after timeout
+ * ```
+ */
+export declare const withLoading: (config?: LoadingConfig) => (component: BaseComponent) => BaseComponent & {
+    loading: LoadingFeature;
+};
+/**
+ * Higher-order function to add elevation to a card based on its variant.
+ *
+ * Sets the initial elevation CSS variable according to Material Design 3 guidelines:
+ * - Elevated variant: 1dp elevation
+ * - Filled and outlined variants: 0dp elevation
+ *
+ * These elevation values affect shadows and surface appearance of the card
+ * to create appropriate visual hierarchy.
+ *
+ * @param {BaseComponent} component - Card component
+ * @returns {BaseComponent} Card component with elevation applied
+ * @category Components
+ * @example
+ * ```typescript
+ * // Apply elevation in the composition chain
+ * const card = pipe(
+ *   createBase,
+ *   withElement(config),
+ *   withElevation
+ * )(baseConfig);
+ * ```
+ */
+export declare const withElevation: (component: BaseComponent) => BaseComponent;
+/**
+ * Higher-order function to add expandable behavior to a card.
+ * Creates a collapsible section with proper accessibility attributes and
+ * toggle controls. Supports keyboard interaction and screen readers.
+ *
+ * @param {ExpandableConfig} config - Expandable configuration
+ * @returns {Function} Card component enhancer
+ * @category Components
+ * @example
+ * ```typescript
+ * // Create a card with expandable content
+ * const expandableContent = document.createElement('div');
+ * expandableContent.textContent = 'Additional content that can be expanded';
+ *
+ * const card = pipe(
+ *   createCard,
+ *   withExpandable({
+ *     initialExpanded: false,
+ *     expandableContent
+ *   })
+ * )();
+ *
+ * // Later toggle the expanded state
+ * card.expandable.toggleExpanded();
+ *
+ * // Or check current state
+ * if (card.expandable.isExpanded()) {
+ *   console.log('Card is expanded');
+ * }
+ * ```
+ */
+export declare const withExpandable: (config?: ExpandableConfig) => (component: BaseComponent) => BaseComponent & {
+    expandable: ExpandableFeature;
+};
+/**
+ * Higher-order function to add swipeable behavior to a card.
+ * Implements touch-based swipe gestures with customizable threshold and callbacks.
+ * Includes keyboard accessibility support and visual feedback during swipe.
+ *
+ * @param {SwipeableConfig} config - Swipeable configuration
+ * @returns {Function} Card component enhancer
+ * @category Components
+ * @example
+ * ```typescript
+ * // Create a swipeable card with custom actions
+ * const card = pipe(
+ *   createCard,
+ *   withSwipeable({
+ *     threshold: 100, // Swipe sensitivity in pixels
+ *     onSwipeLeft: (card) => {
+ *       console.log('Swiped left');
+ *       // For example: Delete or archive action
+ *     },
+ *     onSwipeRight: (card) => {
+ *       console.log('Swiped right');
+ *       // For example: Save or favorite action
+ *     }
+ *   })
+ * )({ variant: 'elevated' });
+ *
+ * // Reset card position programmatically
+ * card.swipeable.reset();
+ * ```
+ */
+export declare const withSwipeable: (config?: SwipeableConfig) => (component: BaseComponent) => BaseComponent & {
+    swipeable: SwipeableFeature;
+};
+export {};

package/{src/components/card/index.ts → dist/components/card/index.d.ts}

@@ -1,16 +1,13 @@
-// src/components/card/index.ts
-import defaultCreateCard from './card';
-
 /**
  * @module Card
- * 
+ *
  * Card component following Material Design 3 guidelines.
  * Cards are surfaces that display content and actions about a single topic.
  * They should be easy to scan for relevant and actionable information.
- * 
+ *
  * The main export is the {@link default | createCard} factory function that creates
  * a {@link CardComponent} instance with the provided configuration.
- * 
+ *
  * Features:
  * - Multiple variants: elevated, filled, and outlined
  * - Support for header, content, media, and actions sections
@@ -19,7 +16,7 @@ import defaultCreateCard from './card';
  * - Expandable content support
  * - Loading state indication
  * - Swipe gestures with custom actions
- * 
+ *
  * The API includes methods for:
  * - {@link CardComponent.addContent | Adding content}
  * - {@link CardComponent.setHeader | Setting header}
@@ -27,7 +24,7 @@ import defaultCreateCard from './card';
  * - {@link CardComponent.setActions | Setting actions}
  * - {@link CardComponent.makeDraggable | Making cards draggable}
  * - {@link CardComponent.focus | Managing focus}
- * 
+ *
  * @example
  * ```typescript
  * // Create a basic card
@@ -44,90 +41,32 @@ import defaultCreateCard from './card';
  *     { text: 'Action', variant: 'text' }
  *   ]
  * });
- * 
+ *
  * // Modify card programmatically using API methods
  * const image = document.createElement('div');
  * image.className = 'mtrl-card-media';
  * image.style.backgroundImage = 'url(path/to/image.jpg)';
- * 
+ *
  * card.addMedia(image, 'top')
  *     .makeDraggable((event) => {
  *       console.log('Card drag started');
  *     });
  * ```
- * 
+ *
  * @category Components
  */
-
 /**
  * Factory function to create a new Card component.
  * @see CardComponent for the full API reference
  */
 export { default } from './card';
-
 /**
  * Card component types and interfaces
- * 
+ *
  * These types define the structure and behavior of the Card component.
  */
-export {
-  CardVariant,
-  CardElevationLevel,
-  CardSchema,
-  CardHeaderConfig,
-  CardContentConfig,
-  CardActionsConfig,
-  CardMediaConfig,
-  CardAriaAttributes,
-  CardComponent,
-  LoadingFeature,
-  ExpandableFeature,
-  SwipeableFeature
-} from './types';
-
-// Export card content helper functions
-export { 
-  createCardContent,
-  createCardHeader, 
-  createCardActions,
-  createCardMedia
-} from './content';
-
-// Export API methods
+export { CardVariant, CardElevationLevel, CardSchema, CardHeaderConfig, CardContentConfig, CardActionsConfig, CardMediaConfig, CardAriaAttributes, CardComponent, LoadingFeature, ExpandableFeature, SwipeableFeature } from './types';
+export { createCardContent, createCardHeader, createCardActions, createCardMedia } from './content';
 export { withAPI } from './api';
-
-// Export feature enhancers
-export { 
-  withLoading, 
-  withExpandable, 
-  withSwipeable, 
-  withElevation 
-} from './features';
-
-// 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;
+export { withLoading, withExpandable, withSwipeable, withElevation } from './features';
+export { CARD_VARIANTS, CARD_ELEVATIONS, CARD_WIDTHS, CARD_CORNER_RADIUS, CARD_ASPECT_RATIOS, CARD_ACTION_ALIGNMENT, CARD_MEDIA_POSITION, CARD_CLASSES } from './constants';