@buddhacognitivelab/theme-glassmorphic
Version:
Enhanced glassmorphic theme package with dual-mode support, advanced glass effects, interactive UI components, and gesture-based interactions
89 lines (88 loc) • 3.42 kB
TypeScript
/**
* @fileoverview Enhanced Card Component - Phase 4
* Dual-mode glassmorphic card with advanced theme support
*/
import React from 'react';
import { MotionProps } from 'framer-motion';
export interface EnhancedCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, keyof MotionProps> {
/** Glass effect intensity */
glassIntensity?: 'subtle' | 'prominent' | 'frosted' | 'crystal' | 'ethereal';
/** Glass depth level */
glassDepth?: 'surface' | 'elevated' | 'floating' | 'modal';
/** Card variant */
variant?: 'default' | 'outlined' | 'elevated' | 'glass' | 'gradient' | 'minimal';
/** Card size */
size?: 'sm' | 'md' | 'lg' | 'xl';
/** Enable hover effects */
hoverable?: boolean;
/** Enable click interactions */
clickable?: boolean;
/** Custom padding */
padding?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
/** Custom border radius */
borderRadius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
/** Enable enhanced hover effects */
enhancedHover?: boolean;
/** Enable theme-adaptive styling */
themeAdaptive?: boolean;
/** Custom glass tint override */
glassTint?: string;
/** Enable gradient border */
gradientBorder?: boolean;
/** Animation preset */
animation?: 'none' | 'subtle' | 'smooth' | 'bounce' | 'elastic';
/** Enable backdrop blur */
backdropBlur?: boolean;
/** Card orientation */
orientation?: 'vertical' | 'horizontal';
/** Enable shadow effects */
shadowEffect?: 'none' | 'subtle' | 'medium' | 'strong' | 'glow';
/** Card content */
children?: React.ReactNode;
}
export interface EnhancedCardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
/** Header variant */
variant?: 'default' | 'minimal' | 'prominent';
/** Enable border bottom */
bordered?: boolean;
/** Custom padding */
padding?: 'sm' | 'md' | 'lg';
}
export interface EnhancedCardContentProps extends React.HTMLAttributes<HTMLDivElement> {
/** Content spacing */
spacing?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
/** Enable scrollable content */
scrollable?: boolean;
/** Maximum height for scrollable content */
maxHeight?: string;
}
export interface EnhancedCardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
/** Footer variant */
variant?: 'default' | 'minimal' | 'prominent';
/** Enable border top */
bordered?: boolean;
/** Footer alignment */
align?: 'left' | 'center' | 'right' | 'space-between';
/** Custom padding */
padding?: 'sm' | 'md' | 'lg';
}
/**
* Enhanced Card Component
*
* A sophisticated glassmorphic card with dual-mode theme support,
* advanced glass effects, and enhanced interactive states.
*/
export declare const EnhancedCard: React.ForwardRefExoticComponent<EnhancedCardProps & React.RefAttributes<HTMLDivElement>>;
/**
* Enhanced Card Header Component
*/
export declare const EnhancedCardHeader: React.ForwardRefExoticComponent<EnhancedCardHeaderProps & React.RefAttributes<HTMLDivElement>>;
/**
* Enhanced Card Content Component
*/
export declare const EnhancedCardContent: React.ForwardRefExoticComponent<EnhancedCardContentProps & React.RefAttributes<HTMLDivElement>>;
/**
* Enhanced Card Footer Component
*/
export declare const EnhancedCardFooter: React.ForwardRefExoticComponent<EnhancedCardFooterProps & React.RefAttributes<HTMLDivElement>>;
export default EnhancedCard;