aura-glass/dist/esm/components/card/GlowingCard.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { GlassCard } from './GlassCard.js';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';

/**
 * Glowing Card Component
 */
const GlowingCard = /*#__PURE__*/forwardRef(({
  // TODO: Integrate ContrastGuard for table cells, list items, badges, card titles, and other text content for WCAG AA compliance
  children,
  className = "",
  style = {},
  glowColor = "#00d4ff",
  glowIntensity = 0.8,
  animationDuration = 3000,
  variant = "default",
  onClick,
  interactive = true,
  disabled = false
}, ref) => {
  const prefersReducedMotion = useReducedMotion();
  /**
   * Get glow styles based on variant
   */
  const getGlowStyles = () => {
    const baseGlow = {
      "--glow-color": glowColor,
      "--glow-intensity": glowIntensity,
      "--animation-duration": `${animationDuration}ms`
    };
    switch (variant) {
      case "neon":
        return {
          ...baseGlow,
          "--glow-color": glowColor,
          "--glow-spread": "8px",
          "--glow-blur": "20px"
        };
      case "subtle":
        return {
          ...baseGlow,
          "--glow-spread": "2px",
          "--glow-blur": "10px",
          "--glow-intensity": glowIntensity * 0.5
        };
      case "rainbow":
        return {
          ...baseGlow,
          "--glow-color-1": "#ff006e",
          "--glow-color-2": "#00d4ff",
          "--glow-color-3": "#00ff88",
          "--glow-spread": "4px",
          "--glow-blur": "16px"
        };
      default:
        return {
          ...baseGlow,
          "--glow-spread": "4px",
          "--glow-blur": "16px"
        };
    }
  };
  /**
   * Get animation classes
   */
  const getAnimationClass = () => {
    if (prefersReducedMotion || disabled) {
      return "";
    }
    return "glowing-card-animated";
  };
  const containerStyles = {
    ...getGlowStyles(),
    ...style,
    position: "relative",
    overflow: "hidden",
    cursor: interactive && !disabled ? "pointer" : "default",
    transition: prefersReducedMotion ? "none" : "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
    opacity: disabled ? 0.6 : 1,
    pointerEvents: disabled ? "none" : "auto"
  };
  return jsxs("div", {
    ref: ref,
    className: `glowing-card ${variant} ${getAnimationClass()} ${className}`,
    style: containerStyles,
    onClick: !disabled ? onClick : undefined,
    role: onClick ? "button" : undefined,
    tabIndex: onClick && !disabled ? 0 : undefined,
    onKeyDown: onClick && !disabled ? e => {
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        onClick();
      }
    } : undefined,
    children: [!prefersReducedMotion && jsx("div", {
      className: 'glowing-card-glow',
      "aria-hidden": "true"
    }), jsx(GlassCard, {
      className: 'glowing-card-content',
      style: {
        position: "relative",
        zIndex: 1
      },
      children: children
    }), jsx("style", {
      children: `
          .glowing-card {
            border-radius: 12px;
          }

          .glowing-card-glow {
            position: absolute;
            inset: -2px;
            border-radius: inherit;
            background: linear-gradient(
              90deg,
              var(--glow-color, #00d4ff),
              var(--glow-color, #00d4ff)
            );
            opacity: var(--glow-intensity, 0.8);
            filter: blur(var(--glow-blur, 16px));
            z-index: 0;
            pointer-events: none;
          }

          .glowing-card.rainbow .glowing-card-glow {
            background: linear-gradient(
              90deg,
              var(--glow-color-1, #ff006e),
              var(--glow-color-2, #00d4ff),
              var(--glow-color-3, #00ff88),
              var(--glow-color-1, #ff006e)
            );
            background-size: 200% 100%;
          }

          .glowing-card-animated .glowing-card-glow {
            animation: glowPulse var(--animation-duration, 3000ms) ease-in-out
              infinite;
          }

          .glowing-card-animated.rainbow .glowing-card-glow {
            animation: glowPulse var(--animation-duration, 3000ms) ease-in-out
                infinite,
              rainbowShift calc(var(--animation-duration, 3000ms) * 2) linear
                infinite;
          }

          .glowing-card.neon .glowing-card-glow {
            box-shadow: 0 0 var(--glow-spread, 8px) var(--glow-blur, 20px)
              var(--glow-color, #00d4ff);
          }

          .glowing-card:hover .glowing-card-glow {
            opacity: calc(var(--glow-intensity, 0.8) * 1.3);
            filter: blur(calc(var(--glow-blur, 16px) * 1.2));
          }

          .glowing-card-content {
            position: relative;
            width: 100%;
            height: 100%;
            background: inherit;
          }

          @keyframes glowPulse {
            0%,
            100% {
              opacity: var(--glow-intensity, 0.8);
            }
            50% {
              opacity: calc(var(--glow-intensity, 0.8) * 1.5);
            }
          }

          @keyframes rainbowShift {
            0% {
              background-position: 0% 50%;
            }
            100% {
              background-position: 200% 50%;
            }
          }

          @media (prefers-reduced-motion: reduce) {
            .glowing-card-glow {
              animation: none !important;
            }
            .glowing-card {
              transition: none !important;
            }
          }
        `
    })]
  });
});
GlowingCard.displayName = "GlowingCard";

export { GlowingCard };
//# sourceMappingURL=GlowingCard.js.map