aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
323 lines (320 loc) • 10.6 kB
JavaScript
'use client';
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
import { cn } from '../../lib/utilsComprehensive.js';
import { forwardRef } from 'react';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';
import { LiquidGlassMaterial } from '../../primitives/LiquidGlassMaterial.js';
/**
* GlassCard component
* A versatile card component with glassmorphism styling
*/
const GlassCard = /*#__PURE__*/forwardRef(({
// TODO: Integrate ContrastGuard for table cells, list items, badges, card titles, and other text content for WCAG AA compliance
variant = "default",
size = "md",
elevation = "level2",
hoverable = false,
clickable = false,
loading = false,
disabled = false,
material = "glass",
materialProps,
tint,
interactive,
className,
children,
...props
}, ref) => {
useReducedMotion();
const sizeClasses = {
sm: "glass-p-3",
md: "glass-p-4",
lg: "glass-p-6",
xl: "glass-p-8"
};
const variantClasses = {
default: "",
outlined: "glass-focus glass-border-subtle",
elevated: "",
interactive: "transition-all duration-200 hover:scale-[1.02] active:scale-[0.98]",
feature: "relative overflow-hidden",
minimal: "glass-glass-backdrop-blur-md bg-transparent border-0",
primary: "",
outline: "glass-focus glass-border-subtle"
};
const getElevation = () => {
if (variant === "elevated") return "level2";
if (variant === "feature") return "level3";
if (variant === "minimal") return "level1";
return elevation || "level1";
};
const isInteractive = interactive || hoverable || clickable;
return material === "liquid" ? jsxs(LiquidGlassMaterial, {
ref: ref,
ior: materialProps?.ior || (variant === "elevated" ? 1.48 : variant === "feature" ? 1.5 : 1.45),
thickness: materialProps?.thickness || (size === "sm" ? 8 : size === "md" ? 12 : size === "lg" ? 16 : 20),
tint: materialProps?.tint && typeof materialProps.tint === "object" && "r" in materialProps.tint ? materialProps.tint : tint && typeof tint === "object" && "r" in tint ? tint : variant === "primary" ? {
r: 59,
g: 130,
b: 246,
a: 0.08
} : {
r: 0,
g: 0,
b: 0,
a: 0.06
},
variant: materialProps?.variant || "regular",
quality: materialProps?.quality || (variant === "feature" ? "ultra" : "high"),
environmentAdaptation: true,
motionResponsive: true,
interactive: isInteractive,
className: cn("liquid-glass-card-surface relative glass-radius-xl overflow-hidden", "transition-all duration-300 ease-out", hoverable && ["group"], sizeClasses[size], variantClasses[variant], {
"opacity-50 pointer-events-none": disabled,
"cursor-pointer": clickable && !disabled,
"hover:scale-105 active:scale-95": hoverable && !disabled,
"animate-pulse": loading
}, className),
style: {
"--liquid-glass-card-density": variant === "minimal" ? "0.8" : "0.92",
"--liquid-glass-hover-lift": hoverable ? "8px" : "0px",
"--liquid-glass-interaction-depth": isInteractive ? "1.05" : "1.0"
},
"data-liquid-glass-card": "true",
"data-card-variant": variant,
"data-card-size": size,
...props,
children: [loading && jsx("div", {
className: 'absolute inset-0 glass-gradient-primary glass-gradient-primary via-white/10 glass-gradient-primary animate-shimmer'
}), children]
}) : jsxs(OptimizedGlassCore, {
ref: ref,
elevation: getElevation(),
intensity: "medium",
depth: variant === "elevated" ? "deep" : "medium",
border: variant === "outlined" ? "glow" : "subtle",
interactive: isInteractive,
tier: "high",
className: cn("glass-foundation-complete relative glass-radius-xl overflow-hidden glass-overlay-noise glass-edge glass-overlay-specular glass-typography-reset", "transition-all duration-300 ease-out",
// Advanced hover effects with glass enhancement
hoverable && ["group"], sizeClasses[size], variantClasses[variant], {
// Sophisticated micro-interactions
"hover:scale-[1.008] hover:-translate-y-1": hoverable && !disabled,
"hover:shadow-2xl hover:shadow-blue-500/10": hoverable && !disabled,
// Enhanced click feedback
"cursor-pointer": clickable && !disabled,
"active:scale-[0.995] active:translate-y-0": clickable && !disabled,
"": clickable && !disabled,
// Remove broken CSS class
// Disabled state
"opacity-50 pointer-events-none": disabled,
// Loading state
"animate-pulse": loading
}, className),
...props,
children: [hoverable && jsxs(Fragment, {
children: [jsx("div", {
className: 'absolute inset-0 glass-gradient-primary glass-gradient-primary via-transparent glass-gradient-primary opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none glass-radius-lg'
}), jsx("div", {
className: 'absolute inset-0 glass-gradient-primary glass-gradient-primary via-white/10 glass-gradient-primary -translate-x-full group-hover:translate-x-full transition-transform duration-1000 pointer-events-none glass-radius-lg'
}), jsx("div", {
className: 'absolute inset-0 glass-radius-lg glass-border glass-border-white/0 group-hover:border-white/20 transition-colors duration-300 pointer-events-none'
})]
}), variant === "feature" && jsx("div", {
className: 'absolute inset-0 glass-gradient-primary glass-gradient-primary via-secondary/4 glass-gradient-primary glass-radius-lg'
}), jsx("div", {
className: 'relative z-10',
children: loading ? jsxs("div", {
className: "glass-auto-gap glass-auto-gap-md",
children: [jsx("div", {
className: 'h-4 glass-surface-subtle/20 animate-pulse glass-radius-sm shimmer glass-contrast-guard'
}), jsx("div", {
className: 'h-4 glass-surface-subtle/15 animate-pulse glass-radius-sm w-3-4 shimmer glass-contrast-guard'
}), jsx("div", {
className: 'h-4 glass-surface-subtle/10 animate-pulse glass-radius-sm w-1-2 shimmer glass-contrast-guard'
})]
}) : children
})]
});
});
GlassCard.displayName = "GlassCard";
const CardHeader = /*#__PURE__*/forwardRef(({
size = "md",
bordered = false,
className,
children,
...props
}, ref) => {
const sizeClasses = {
sm: "glass-pb-2",
md: "glass-pb-3",
lg: "glass-pb-4"
};
return jsx("div", {
"data-glass-component": true,
ref: ref,
className: cn("flex flex-col glass-gap-1-5", sizeClasses[size], {
"border-b glass-border-subtle": bordered
}, className),
...props,
children: children
});
});
CardHeader.displayName = "CardHeader";
const CardTitle = /*#__PURE__*/forwardRef(({
size = "md",
level = 3,
className,
children,
...props
}, ref) => {
const sizeClasses = {
sm: "glass-text-base font-medium",
md: "glass-text-lg font-semibold",
lg: "glass-text-xl font-semibold",
xl: "glass-text-2xl font-bold"
};
const headingProps = {
ref,
className: cn("glass-text-primary leading-none tracking-tight", sizeClasses[size], className),
...props,
children
};
switch (level) {
case 1:
return jsx("h1", {
...headingProps
});
case 2:
return jsx("h2", {
...headingProps
});
case 3:
return jsx("h3", {
...headingProps
});
case 4:
return jsx("h4", {
...headingProps
});
case 5:
return jsx("h5", {
...headingProps
});
case 6:
return jsx("h6", {
...headingProps
});
default:
return jsx("h3", {
...headingProps
});
}
});
CardTitle.displayName = "CardTitle";
const CardDescription = /*#__PURE__*/forwardRef(({
size = "md",
className,
children,
...props
}, ref) => {
const sizeClasses = {
sm: "glass-text-xs",
md: "glass-text-sm",
lg: "glass-text-base"
};
return jsx("p", {
ref: ref,
className: cn("glass-text-secondary", sizeClasses[size], className),
...props,
children: children
});
});
CardDescription.displayName = "CardDescription";
const CardContent = /*#__PURE__*/forwardRef(({
padding = "none",
autoSpacing = true,
spacing = "md",
className,
children,
...props
}, ref) => {
const paddingClasses = {
none: "",
sm: "glass-p-2",
md: "glass-p-4",
lg: "glass-p-6"
};
const spacingClass = autoSpacing ? spacing === "sm" ? "glass-auto-gap glass-auto-gap-sm" : spacing === "lg" ? "glass-auto-gap glass-auto-gap-lg" : "glass-auto-gap glass-auto-gap-md" : "";
return jsx("div", {
ref: ref,
className: cn("glass-text-primary", paddingClasses[padding], spacingClass, className),
...props,
children: children
});
});
CardContent.displayName = "CardContent";
const CardFooter = /*#__PURE__*/forwardRef(({
align = "left",
bordered = false,
padding = "md",
className,
children,
...props
}, ref) => {
const alignClasses = {
left: "justify-start",
center: "justify-center",
right: "justify-end",
between: "justify-between",
around: "justify-around"
};
const paddingClasses = {
none: "",
sm: "glass-pt-2",
md: "glass-pt-3",
lg: "glass-pt-4"
};
return jsx("div", {
ref: ref,
className: cn("flex items-center", alignClasses[align], paddingClasses[padding], {
"border-t glass-border-subtle": bordered
}, className),
...props,
children: children
});
});
CardFooter.displayName = "CardFooter";
const CardActions = /*#__PURE__*/forwardRef(({
align = "right",
spacing = "md",
className,
children,
...props
}, ref) => {
const alignClasses = {
left: "justify-start",
center: "justify-center",
right: "justify-end"
};
const spacingClasses = {
sm: "glass-gap-1",
md: "glass-gap-2",
lg: "glass-gap-3"
};
return jsx("div", {
ref: ref,
className: cn("flex items-center", alignClasses[align], spacingClasses[spacing], className),
...props,
children: children
});
});
CardActions.displayName = "CardActions";
export { CardActions, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, GlassCard };
//# sourceMappingURL=GlassCard.js.map