aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/card/GlowingCard.js

@@ -0,0 +1,202 @@
+'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

package/dist/esm/components/card/GlowingCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GlowingCard.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/card/div.js

@@ -0,0 +1,55 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+import { cn } from '../../lib/utilsComprehensive.js';
+import './GlassCard.js';
+
+// Standard card sub-components that work with glass styling
+const CardHeader = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => jsx("div", {
+  ref: ref,
+  className: cn("flex flex-col glass-gap-1.5 glass-p-6", className),
+  ...props
+}));
+CardHeader.displayName = "CardHeader";
+const CardTitle = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => jsx("h3", {
+  ref: ref,
+  className: cn("glass-text-2xl font-semibold leading-none tracking-tight glass-text-primary", className),
+  ...props
+}));
+CardTitle.displayName = "CardTitle";
+const CardDescription = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => jsx("p", {
+  ref: ref,
+  className: cn("glass-text-sm glass-text-primary/70", className),
+  ...props
+}));
+CardDescription.displayName = "CardDescription";
+const CardContent = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => jsx("div", {
+  ref: ref,
+  className: cn("glass-p-6 pt-0", className),
+  ...props
+}));
+CardContent.displayName = "CardContent";
+const CardFooter = /*#__PURE__*/React.forwardRef(({
+  className,
+  ...props
+}, ref) => jsx("div", {
+  ref: ref,
+  className: cn("flex items-center glass-p-6 pt-0", className),
+  ...props
+}));
+CardFooter.displayName = "CardFooter";
+
+export { CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+//# sourceMappingURL=div.js.map

package/dist/esm/components/card/div.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"div.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/card/glass-card-link.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { cn } from '../../lib/utilsComprehensive.js';
+import '../../primitives/GlassCore.js';
+import '../../primitives/glass/GlassAdvanced.js';
+import '../../primitives/OptimizedGlassCore.js';
+import '../../primitives/glass/OptimizedGlassAdvanced.js';
+import '../../primitives/MotionNative.js';
+import { MotionFramer } from '../../primitives/motion/MotionFramer.js';
+
+const GlassCardLink = ({
+  href,
+  children,
+  className,
+  ...props
+}) => {
+  useReducedMotion();
+  return jsx(MotionFramer, {
+    "data-glass-component": true,
+    className: 'inline-block',
+    children: jsx("a", {
+      href: href,
+      className: cn("relative inline-block overflow-hidden glass-radius-xl", "transition-all duration-300 ease-in-out", "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2", "glass-focus glass-touch-target glass-contrast-guard", className),
+      ...props,
+      children: children
+    })
+  });
+};
+
+export { GlassCardLink, GlassCardLink as default };
+//# sourceMappingURL=glass-card-link.js.map

package/dist/esm/components/card/glass-card-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"glass-card-link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/card/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+export { GlassCard } from './GlassCard.js';
+
+// Basic card sub-components for compatibility
+const CardHeader = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement('div', {
+    className: `card-header ${className || ''}`,
+    ...props
+  }, children);
+};
+const CardTitle = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement('h3', {
+    className: `card-title ${className || ''}`,
+    ...props
+  }, children);
+};
+const CardContent = ({
+  children,
+  className,
+  ...props
+}) => {
+  return /*#__PURE__*/React.createElement('div', {
+    className: `card-content ${className || ''}`,
+    ...props
+  }, children);
+};
+
+export { CardContent, CardHeader, CardTitle };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/card/patterns.js

@@ -0,0 +1,235 @@
+'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

package/dist/esm/components/card/patterns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"patterns.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}