aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
224 lines (221 loc) • 7.66 kB
JavaScript
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { cn } from '../../lib/utilsComprehensive.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 { useA11yId } from '../../utils/a11y.js';
/**
* GlassTimeline component
* A timeline component with glassmorphism styling for displaying chronological events
*/
const GlassTimeline = /*#__PURE__*/forwardRef(({
// TODO: Integrate ContrastGuard for table cells, list items, badges, card titles, and other text content for WCAG AA compliance
items,
variant = "default",
size = "md",
orientation = "vertical",
showLine = true,
timePosition = "right",
lineColor,
dotColor,
"aria-label": ariaLabel,
className,
...props
}, ref) => {
const timelineId = useA11yId("timeline");
const sizeClasses = {
sm: {
container: "pl-4",
dot: "w-2 h-2 -glass-ml-1",
line: "left-1.5 w-px",
content: "glass-p-2 glass-text-sm",
title: "glass-text-sm",
subtitle: "glass-text-xs",
time: "glass-text-xs",
gap: "glass-gap-3"
},
md: {
container: "pl-6",
dot: "w-3 h-3 -glass-ml-1.5",
line: "left-2 w-px",
content: "glass-p-3 glass-text-base",
title: "glass-text-base",
subtitle: "glass-text-sm",
time: "glass-text-xs",
gap: "glass-gap-4"
},
lg: {
container: "pl-8",
dot: "w-4 h-4 -glass-ml-2",
line: "left-3 w-px",
content: "glass-p-4 glass-text-lg",
title: "glass-text-lg",
subtitle: "glass-text-base",
time: "glass-text-sm",
gap: "space-y-6"
}
};
const variantClasses = {
default: "border-0",
bordered: "border border-border/20",
compact: "border-0"
};
const config = sizeClasses[size];
if (orientation === "horizontal") {
return jsxs("div", {
"data-glass-component": true,
ref: ref,
id: timelineId,
className: cn("flex items-start glass-gap-4 overflow-x-auto", className),
role: "list",
"aria-label": ariaLabel || "Timeline",
...props,
children: [showLine && jsx("div", {
className: 'absolute top-8 left-0 right-0 h-px bg-border/20',
style: {
backgroundColor: lineColor
}
}), items.map((item, index) => jsxs("div", {
className: 'relative glass-flex-shrink-0 glass-min-w-0',
role: "listitem",
children: [jsx("div", {
className: cn("absolute top-6 left-1/2 -translate-x-1/2 glass-radius-full bg-primary shadow-lg", config.dot),
style: {
backgroundColor: dotColor
}
}), jsx("div", {
className: 'pt-12',
children: jsx(OptimizedGlassCore, {
elevation: "level1",
intensity: "medium",
depth: 2,
tint: "neutral",
border: "subtle",
animation: "none",
performanceMode: "medium",
className: cn("glass-radius-lg max-w-xs", config.content, variantClasses[variant]),
children: jsxs("div", {
className: "glass-min-w-0",
children: [jsx("div", {
className: cn("font-medium text-foreground truncate", config.title),
children: item.title
}), item.subtitle && jsx("div", {
className: cn("glass-text-secondary truncate glass-mt-1", config.subtitle),
children: item.subtitle
}), item.time && jsx("div", {
className: cn("glass-text-secondary glass-mt-2", config.time),
children: item.time
})]
})
})
})]
}, item.id))]
});
}
return jsxs("div", {
ref: ref,
id: timelineId,
className: cn("relative", config.container, className),
role: "list",
"aria-label": ariaLabel || "Timeline",
...props,
children: [showLine && jsx("div", {
className: cn("absolute top-0 bottom-0", config.line, "bg-border/20"),
style: {
backgroundColor: lineColor
}
}), jsx("ul", {
className: cn("relative", config.gap),
role: "list",
children: items.map((item, index) => {
index === items.length - 1;
return jsxs("li", {
className: 'relative',
role: "listitem",
children: [jsx("span", {
className: cn("absolute top-2 glass-radius-full bg-primary shadow-lg", config.dot),
style: {
backgroundColor: dotColor
}
}), jsxs(OptimizedGlassCore, {
elevation: "level1",
intensity: "medium",
depth: 2,
tint: "neutral",
border: "subtle",
animation: "none",
performanceMode: "medium",
className: cn("glass-radius-lg", config.content, variantClasses[variant]),
children: [jsxs("div", {
className: "glass-flex glass-items-start glass-justify-between glass-gap-4",
children: [jsxs("div", {
className: "glass-flex glass-items-start glass-gap-3 glass-min-w-0 glass-flex-1",
children: [item.icon && jsx("div", {
className: "glass-flex-shrink-0 glass-text-secondary glass-mt-0-5",
children: item.icon
}), jsxs("div", {
className: "glass-min-w-0 glass-flex-1",
children: [jsx("div", {
className: cn("font-medium text-foreground", config.title),
children: item.title
}), item.subtitle && jsx("div", {
className: cn("glass-text-secondary glass-mt-1", config.subtitle),
children: item.subtitle
})]
})]
}), item.time && timePosition === "right" && jsx("div", {
className: cn("glass-text-secondary whitespace-nowrap", config.time),
children: item.time
})]
}), item.time && timePosition === "inline" && jsx("div", {
className: cn("glass-text-secondary glass-mt-2", config.time),
children: item.time
})]
})]
}, item.id);
})
})]
});
});
GlassTimeline.displayName = "GlassTimeline";
const TimelineItemComponent = /*#__PURE__*/forwardRef(({
item,
isLast = false,
size = "md",
className,
...props
}, ref) => {
return jsx("div", {
ref: ref,
className: cn("timeline-item", className),
...props,
children: jsxs(OptimizedGlassCore, {
elevation: "level1",
intensity: "medium",
depth: 2,
tint: "neutral",
border: "subtle",
animation: "none",
performanceMode: "medium",
className: "glass-radius-lg glass-p-3",
children: [jsx("div", {
className: 'font-medium text-primary',
children: item.title
}), item.subtitle && jsx("div", {
className: "glass-text-sm glass-text-secondary glass-mt-1",
children: item.subtitle
}), item.time && jsx("div", {
className: "glass-text-xs glass-text-secondary glass-mt-2",
children: item.time
})]
})
});
});
TimelineItemComponent.displayName = "TimelineItemComponent";
export { GlassTimeline, TimelineItemComponent, GlassTimeline as default };
//# sourceMappingURL=GlassTimeline.js.map