aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
236 lines (233 loc) • 7.25 kB
JavaScript
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { GlassButton } from '../button/GlassButton.js';
import React from 'react';
import { GlassCard, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardActions } from './GlassCard.js';
import { cn } from '../../lib/utilsComprehensive.js';
function BasicCard({
title,
description,
children,
actions,
className
}) {
return jsxs(GlassCard, {
"data-glass-component": true,
className: className,
children: [jsxs(CardHeader, {
children: [jsx(CardTitle, {
children: title
}), description && jsx(CardDescription, {
children: description
})]
}), jsx(CardContent, {
children: children
}), actions && jsx(CardFooter, {
children: jsx(CardActions, {
children: actions
})
})]
});
}
function FeatureCard({
title,
description,
icon,
image,
badge,
actions,
className,
onClick
}) {
return jsxs(GlassCard, {
variant: "feature",
hoverable: true,
clickable: !!onClick,
onClick: onClick,
className: cn("group", className),
children: [image && jsxs("div", {
className: 'relative -m-6 mb-4 overflow-hidden glass-radius-t-lg',
children: [jsx("img", {
src: image,
alt: title,
className: 'glass-w-full h-48 object-cover transition-transform duration-300 group-hover:scale-105'
}), badge && jsx("div", {
className: 'absolute top-3 right-3 glass-px-2 glass-py-1 glass-surface-primary text-primary-foreground glass-text-xs font-medium glass-radius-full',
children: badge
})]
}), jsx(CardHeader, {
children: jsxs("div", {
className: "glass-flex glass-items-start glass-gap-3",
children: [icon && jsx("div", {
className: 'glass-flex-shrink-0 w-8 h-8 glass-flex glass-items-center glass-justify-center text-primary',
children: icon
}), jsxs("div", {
className: "glass-flex-1 glass-min-w-0",
children: [jsx(CardTitle, {
size: "lg",
className: 'group-hover:text-primary transition-colors',
children: title
}), jsx(CardDescription, {
className: "glass-mt-1",
children: description
})]
})]
})
}), actions && jsx(CardFooter, {
children: jsx(CardActions, {
children: actions
})
})]
});
}
function StatCard({
title,
value,
change,
description,
icon,
className
}) {
const trendColors = {
up: "text-green-500",
down: "text-red-500",
neutral: "glass-text-secondary"
};
const trendIcons = {
up: "↗",
down: "↘",
neutral: "→"
};
return jsx(GlassCard, {
variant: "elevated",
className: className,
children: jsx(CardContent, {
children: jsxs("div", {
className: "glass-flex glass-items-start glass-justify-between",
children: [jsxs("div", {
className: "glass-flex-1",
children: [jsx("p", {
className: 'glass-text-sm font-medium glass-text-secondary',
children: title
}), jsxs("div", {
className: 'glass-flex items-baseline glass-gap-2 glass-mt-1',
children: [jsx("p", {
className: 'glass-text-2xl font-bold',
children: value
}), change && jsxs("span", {
className: cn("glass-text-sm font-medium flex items-center glass-gap-1", trendColors?.[change.trend]),
children: [trendIcons?.[change.trend], change.value]
})]
}), description && jsx("p", {
className: "glass-text-xs glass-text-secondary glass-mt-2",
children: description
})]
}), icon && jsx("div", {
className: 'glass-flex-shrink-0 w-8 h-8 glass-flex glass-items-center glass-justify-center glass-text-secondary',
children: icon
})]
})
})
});
}
function ActivityCard({
title,
items,
className
}) {
return jsxs(GlassCard, {
className: className,
children: [jsx(CardHeader, {
bordered: true,
children: jsx(CardTitle, {
children: title
})
}), jsx(CardContent, {
padding: "none",
children: jsx("div", {
className: 'divide-y divide-border/20',
children: items.map(item => jsx("div", {
className: 'glass-p-4 hover:glass-surface-subtle transition-colors',
children: jsxs("div", {
className: "glass-flex glass-justify-between glass-items-start",
children: [jsxs("div", {
className: "glass-flex-1 glass-min-w-0",
children: [jsx("p", {
className: 'glass-text-sm font-medium',
children: item?.action
}), item?.user && jsxs("p", {
className: "glass-text-xs glass-text-secondary",
children: ["by ", item?.user]
}), item?.details && jsx("p", {
className: "glass-text-xs glass-text-secondary glass-mt-1",
children: item?.details
})]
}), jsx("time", {
className: "glass-text-xs glass-text-secondary",
children: item?.timestamp
})]
})
}, item?.id))
})
})]
});
}
const CardPatterns = ({
className,
...rest
}) => {
const sampleActivities = React.useMemo(() => [{
id: "activity-1",
action: "New glass surface launched",
user: "Design Systems",
timestamp: "2m ago",
details: "Adaptive glass tokens propagated across dashboard."
}, {
id: "activity-2",
action: "Performance baseline updated",
user: "Observability",
timestamp: "15m ago",
details: "Frametime stabilized under 14ms for holographic charts."
}], []);
return jsxs("div", {
"data-glass-component": true,
className: cn("glass-card-patterns grid gap-6 lg:grid-cols-2", className),
...rest,
children: [jsx(BasicCard, {
title: "Adaptive Glass Overview",
description: "Starter layout demonstrating baseline glass primitives.",
actions: jsx(GlassButton, {
size: 'sm',
children: "Review"
}),
children: jsx("p", {
className: 'glass-text-sm glass-text-secondary',
children: "Use this baseline pattern for informational content with a single primary action. It balances readability with subtle translucency."
})
}), jsx(FeatureCard, {
title: "Hero Feature Spotlight",
description: "Highlight immersive glass experiences with contextual actions.",
badge: "New",
actions: jsx(GlassButton, {
size: 'sm',
children: "Explore"
}),
className: 'glass-h-full'
}), jsx(StatCard, {
title: "Engagement Uplift",
value: "92%",
change: {
value: "+12%",
trend: "up"
},
description: "Weekly delta across adaptive surfaces.",
className: 'glass-h-full'
}), jsx(ActivityCard, {
title: "Recent Activity",
items: sampleActivities,
className: 'glass-h-full'
})]
});
};
export { ActivityCard, BasicCard, CardPatterns, FeatureCard, StatCard };
//# sourceMappingURL=patterns.js.map