aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
198 lines (195 loc) • 6.07 kB
JavaScript
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import React from 'react';
import { GlassButton } from '../button/GlassButton.js';
import { cn } from '../../lib/utilsComprehensive.js';
import { X, Info, AlertCircle, AlertTriangle, CheckCircle } from 'lucide-react';
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 { MotionFramer } from '../../primitives/motion/MotionFramer.js';
import { useA11yId } from '../../utils/a11y.js';
import { useMotionPreferenceContext } from '../../contexts/MotionPreferenceContext.js';
// Glass Alert text color variants
const alertTextVariants = {
default: "text-foreground [&>svg]:text-foreground",
success: "text-green-400 [&>svg]:text-green-400",
warning: "text-amber-400 [&>svg]:text-amber-400",
error: "text-red-400 [&>svg]:text-red-400",
info: "text-blue-400 [&>svg]:text-blue-400"
};
const GlassAlert = /*#__PURE__*/React.forwardRef(({
className,
variant = "default",
size = "md",
elevation = "level1",
showIcon = true,
icon,
dismissible = false,
onDismiss,
animate = true,
blur = "subtle",
animation = "none",
border = "subtle",
lighting = "ambient",
intensity = "medium",
performanceMode = "medium",
respectMotionPreference = true,
"aria-live": ariaLive = "polite",
children,
...props
}, ref) => {
const alertId = useA11yId("alert");
const {
prefersReducedMotion
} = useMotionPreferenceContext();
const [dismissed, setDismissed] = React.useState(false);
const shouldAnimate = animate && (!respectMotionPreference || !prefersReducedMotion);
const sizeStyles = {
sm: "glass-p-3 glass-text-sm",
md: "glass-p-4 glass-text-base",
lg: "glass-p-6 glass-text-lg"
};
// Get OptimizedGlass intent
const getGlassIntent = () => {
switch (variant) {
case "success":
return "success";
case "warning":
return "warning";
case "error":
case "destructive":
return "danger";
default:
return "neutral";
}
};
// Get default icon based on variant
const getDefaultIcon = () => {
switch (variant) {
case "success":
return jsx(CheckCircle, {
className: 'h-4 w-4'
});
case "warning":
return jsx(AlertTriangle, {
className: 'h-4 w-4'
});
case "error":
case "destructive":
return jsx(AlertCircle, {
className: 'h-4 w-4'
});
case "info":
return jsx(Info, {
className: 'h-4 w-4'
});
default:
return jsx(Info, {
className: 'h-4 w-4'
});
}
};
const handleDismiss = () => {
setDismissed(true);
onDismiss?.();
};
if (dismissed) {
return null;
}
const displayVariant = variant === "destructive" ? "error" : variant;
const alertContent = jsxs(OptimizedGlassCore, {
intent: getGlassIntent(),
elevation: elevation,
intensity: intensity,
depth: 2,
tint: "neutral",
border: border,
animation: animation,
performanceMode: performanceMode,
ref: ref,
className: cn("relative w-full transition-all duration-200", sizeStyles[size], alertTextVariants[displayVariant], "[&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px]", "[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-current", className),
role: "alert",
"aria-live": ariaLive,
"aria-atomic": "true",
id: alertId,
...props,
children: [showIcon && (icon || getDefaultIcon()), jsx("div", {
className: "glass-flex-1",
children: children
}), dismissible && jsx(GlassButton, {
onClick: handleDismiss,
className: cn("absolute right-4 top-4 glass-radius-md glass-p-1", "opacity-70 hover:opacity-100 transition-opacity", "focus:outline-none focus:ring-2 focus:ring-current focus:ring-offset-2"),
"aria-label": "Dismiss alert",
children: jsx(X, {
className: 'h-4 w-4'
})
})]
});
return shouldAnimate ? jsx(MotionFramer, {
preset: "slideUp",
children: alertContent
}) : alertContent;
});
GlassAlert.displayName = "GlassAlert";
const GlassAlertTitle = /*#__PURE__*/React.forwardRef(({
className,
size = "md",
...props
}, ref) => {
const sizeConfig = {
sm: "glass-text-sm",
md: "glass-text-base",
lg: "glass-text-lg"
};
return jsx("h5", {
ref: ref,
className: cn("glass-alert-title glass-mb-1 font-semibold leading-none tracking-tight", sizeConfig[size], className),
...props
});
});
GlassAlertTitle.displayName = "GlassAlertTitle";
const GlassAlertDescription = /*#__PURE__*/React.forwardRef(({
className,
size = "sm",
...props
}, ref) => {
const sizeConfig = {
xs: "glass-text-xs",
sm: "glass-text-sm",
md: "glass-text-base"
};
return jsx("div", {
ref: ref,
className: cn("glass-alert-description [&_p]:leading-relaxed opacity-90", sizeConfig[size], className),
...props
});
});
GlassAlertDescription.displayName = "GlassAlertDescription";
const GlassAlertActions = /*#__PURE__*/React.forwardRef(({
className,
align = "right",
spacing = "md",
...props
}, ref) => {
const alignConfig = {
left: "justify-start",
right: "justify-end",
center: "justify-center"
};
const spacingConfig = {
sm: "glass-gap-2 glass-mt-2",
md: "glass-gap-3 mt-3",
lg: "glass-gap-4 glass-mt-4"
};
return jsx("div", {
ref: ref,
className: cn("glass-alert-actions flex items-center", alignConfig[align], spacingConfig[spacing], className),
...props
});
});
GlassAlertActions.displayName = "GlassAlertActions";
export { GlassAlert as Alert, GlassAlertActions as AlertActions, GlassAlertDescription as AlertDescription, GlassAlertTitle as AlertTitle, GlassAlert, GlassAlertActions, GlassAlertDescription, GlassAlertTitle, GlassAlert as default };
//# sourceMappingURL=GlassAlert.js.map