aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
68 lines (65 loc) • 3.27 kB
JavaScript
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import { createGlassStyle } from '../../utils/createGlassStyle.js';
const GlassLinkButton = /*#__PURE__*/forwardRef(({
className,
variant = "primary",
size = "md",
intent = "primary",
noise = false,
children,
...props
}, ref) => {
return jsxs("a", {
"data-glass-component": true,
ref: ref,
className: cn("group relative inline-flex items-center justify-center rounded-glass font-semibold transition-all duration-200 ease-out hover:glass-text-primary", "focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/60 focus-visible:ring-offset-2", "active:translate-y-px disabled:opacity-50 disabled:pointer-events-none isolate", {
"h-8 px-3 text-sm touch-target": size === "sm",
"h-10 px-4 text-sm touch-target": size === "md",
"h-12 px-6 text-base touch-target": size === "lg"
}, {
"glass-text-primary bg-gradient-to-r from-blue-500/80 to-purple-500/80 border border-white/20 glass-backdrop-blur-md-medium shadow-glass": variant === "primary",
"hover:shadow-glass-strong sm:hover:-translate-y-0.5": variant === "primary",
"glass-foundation-complete glass-text-primary border border-white/14 glass-backdrop-blur-md-subtle": variant === "secondary",
"hover:bg-white/10 hover:border-white/25": variant === "secondary",
"bg-transparent glass-text-primary/88 border border-white/10": variant === "ghost",
"hover:bg-white/5 hover:glass-text-primary hover:border-white/20": variant === "ghost"
}, variant !== "primary" && intent === "primary" && "bg-gradient-to-r from-cyan-400/15 to-purple-500/15", variant !== "primary" && intent === "success" && "bg-gradient-to-r from-emerald-400/10 to-cyan-400/10", variant !== "primary" && intent === "warning" && "bg-gradient-to-r from-amber-400/10 to-orange-500/10", className),
...props,
children: [(variant === "primary" || variant === "secondary") && jsx("div", {
"aria-hidden": true,
className: 'pointer-events-none absolute inset-0',
style: {
borderRadius: "inherit",
padding: "1px",
...createGlassStyle({
variant: "default",
elev: 3
}),
mask: "linear-gradient(var(--glass-black) 0 0) content-box, linear-gradient(var(--glass-black) 0 0)",
WebkitMask: "linear-gradient(var(--glass-black) 0 0) content-box, linear-gradient(var(--glass-black) 0 0)",
WebkitMaskComposite: "xor",
maskComposite: "exclude",
opacity: 0.8
}
}), variant === "primary" && jsx("div", {
"aria-hidden": true,
className: 'pointer-events-none absolute inset-0 opacity-0 hover:opacity-100 transition-opacity duration-200',
style: {
borderRadius: "inherit",
...createGlassStyle({
variant: "default",
elev: 3
})
}
}), jsx("span", {
className: 'relative z-10 glass-flex glass-items-center glass-gap-2 text-primary group-hover:text-indigo-50',
children: children
})]
});
});
GlassLinkButton.displayName = "GlassLinkButton";
export { GlassLinkButton };
//# sourceMappingURL=GlassLinkButton.js.map