aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/dashboard/GlassChartWidget.js

@@ -0,0 +1,317 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { RefreshCw, Download, Minimize2, Maximize2, MoreVertical, Settings, BarChart3, PieChart, TrendingUp, LineChart } from 'lucide-react';
+import { useState } from 'react';
+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';
+import { GlassButton } from '../button/GlassButton.js';
+import '../button/GlassFab.js';
+import '../button/GlassMagneticButton.js';
+import { CardHeader, CardTitle, CardContent } from '../card/index.js';
+import '../data-display/GlassAccordion.js';
+import '../data-display/GlassAlert.js';
+import '../data-display/GlassAvatar.js';
+import { GlassBadge } from '../data-display/GlassBadge.js';
+import '../data-display/GlassBadgeLine.js';
+import '../data-display/GlassDataGrid.js';
+import '../data-display/GlassDataTable.js';
+import '../data-display/GlassHeatmap.js';
+import '../data-display/GlassLoadingSkeleton.js';
+import '../data-display/GlassProgress.js';
+import '../data-display/GlassTimeline.js';
+import '../data-display/GlassSkeleton.js';
+import '../data-display/GlassNotificationCenter.js';
+import '../data-display/GlassAnimatedNumber.js';
+import { GlassCard } from '../card/GlassCard.js';
+
+/**
+ * GlassChartWidget component
+ * A glassmorphism chart container widget with header, actions, and fullscreen support
+ */
+const GlassChartWidget = ({
+  // TODO: Integrate ContrastGuard in chart labels, tooltips, and legends for WCAG AA compliance
+  title = "Analytics Overview",
+  subtitle,
+  children,
+  size = "md",
+  loading = false,
+  error,
+  emptyMessage,
+  showHeader = true,
+  showActions = true,
+  actions = [],
+  chartType,
+  showChartType = true,
+  timeRange,
+  lastUpdated,
+  showRefresh = true,
+  showDownload = true,
+  showFullscreen = true,
+  fullscreen = false,
+  onFullscreenChange,
+  onRefresh,
+  onDownload,
+  headerContent,
+  footerContent,
+  className,
+  ...props
+}) => {
+  const [isFullscreen, setIsFullscreen] = useState(fullscreen);
+  const [showActionMenu, setShowActionMenu] = useState(false);
+  // Size configurations
+  const sizeConfigs = {
+    sm: {
+      cardClass: "glass-p-4",
+      titleClass: "glass-text-lg font-semibold",
+      contentClass: "min-h-[200px]"
+    },
+    md: {
+      cardClass: "glass-p-6",
+      titleClass: "glass-text-xl font-semibold",
+      contentClass: "min-h-[300px]"
+    },
+    lg: {
+      cardClass: "p-8",
+      titleClass: "glass-text-2xl font-semibold",
+      contentClass: "min-h-[400px]"
+    },
+    xl: {
+      cardClass: "glass-p-10",
+      titleClass: "text-3xl font-semibold",
+      contentClass: "min-h-[500px]"
+    }
+  };
+  const config = sizeConfigs[size];
+  // Get chart type icon
+  const getChartTypeIcon = () => {
+    switch (chartType) {
+      case "line":
+        return jsx(LineChart, {
+          className: 'w-5 h-5'
+        });
+      case "bar":
+        return jsx(BarChart3, {
+          className: 'w-5 h-5'
+        });
+      case "area":
+        return jsx(TrendingUp, {
+          className: 'w-5 h-5'
+        });
+      case "pie":
+        return jsx(PieChart, {
+          className: 'w-5 h-5'
+        });
+      case "donut":
+        return jsx(PieChart, {
+          className: 'w-5 h-5'
+        });
+      default:
+        return jsx(BarChart3, {
+          className: 'w-5 h-5'
+        });
+    }
+  };
+  // Handle fullscreen toggle
+  const handleFullscreenToggle = () => {
+    const newFullscreen = !isFullscreen;
+    setIsFullscreen(newFullscreen);
+    onFullscreenChange?.(newFullscreen);
+  };
+  // Handle refresh
+  const handleRefresh = () => {
+    onRefresh?.();
+  };
+  // Handle download
+  const handleDownload = () => {
+    onDownload?.();
+  };
+  // Format last updated time
+  const formatLastUpdated = date => {
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    const days = Math.floor(diff / 86400000);
+    if (minutes < 1) return "Just now";
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    return `${days}d ago`;
+  };
+  return jsx(MotionFramer, {
+    "data-glass-component": true,
+    preset: "fadeIn",
+    className: "glass-w-full",
+    children: jsxs(GlassCard, {
+      variant: "elevated",
+      elevation: "level3",
+      className: cn(config.cardClass, isFullscreen && "fixed inset-4 z-50", className),
+      ...props,
+      children: [showHeader && jsx(CardHeader, {
+        className: 'pb-4',
+        children: jsxs("div", {
+          className: "glass-flex glass-items-start glass-justify-between",
+          children: [jsxs("div", {
+            className: "glass-flex-1 glass-min-w-0",
+            children: [jsxs("div", {
+              className: 'glass-flex glass-items-center glass-gap-3 mb-2',
+              children: [jsxs(CardTitle, {
+                className: cn(config.titleClass, "glass-text-primary flex items-center glass-gap-2"),
+                children: [showChartType && chartType && jsx("span", {
+                  className: 'text-primary/60',
+                  children: getChartTypeIcon()
+                }), title]
+              }), timeRange && jsx(GlassBadge, {
+                variant: "secondary",
+                size: "sm",
+                children: timeRange
+              })]
+            }), subtitle && jsx("p", {
+              className: 'glass-text-sm text-primary/60 mb-2',
+              children: subtitle
+            }), lastUpdated && jsxs("p", {
+              className: 'glass-text-xs text-primary/50',
+              children: ["Last updated: ", formatLastUpdated(lastUpdated)]
+            })]
+          }), jsxs("div", {
+            className: "glass-flex glass-items-center glass-gap-2",
+            children: [headerContent, jsxs("div", {
+              className: "glass-flex glass-items-center glass-gap-1",
+              children: [showRefresh && jsx(GlassButton, {
+                variant: "ghost",
+                size: "sm",
+                onClick: handleRefresh,
+                disabled: loading,
+                className: "glass-p-2",
+                "aria-label": "Refresh data",
+                children: jsx(RefreshCw, {
+                  className: cn("w-4 h-4", loading && "animate-spin")
+                })
+              }), showDownload && jsx(GlassButton, {
+                variant: "ghost",
+                size: "sm",
+                onClick: handleDownload,
+                className: "glass-p-2",
+                "aria-label": "Download data",
+                children: jsx(Download, {
+                  className: 'w-4 h-4'
+                })
+              }), showFullscreen && jsx(GlassButton, {
+                variant: "ghost",
+                size: "sm",
+                onClick: handleFullscreenToggle,
+                className: "glass-p-2",
+                "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
+                children: isFullscreen ? jsx(Minimize2, {
+                  className: 'w-4 h-4'
+                }) : jsx(Maximize2, {
+                  className: 'w-4 h-4'
+                })
+              })]
+            }), showActions && actions.length > 0 && jsxs("div", {
+              className: 'relative',
+              children: [jsx(GlassButton, {
+                variant: "ghost",
+                size: "sm",
+                onClick: e => setShowActionMenu(!showActionMenu),
+                className: "glass-p-2",
+                "aria-label": "Open widget actions",
+                "aria-expanded": showActionMenu,
+                "aria-haspopup": "menu",
+                children: jsx(MoreVertical, {
+                  className: 'w-4 h-4'
+                })
+              }), showActionMenu && jsx(MotionFramer, {
+                preset: "fadeIn",
+                className: 'absolute right-0 top-full glass-mt-2 z-10',
+                children: jsxs("div", {
+                  className: "glass-surface-dark/80 glass-glass-backdrop-blur-md glass-border glass-border-white/20 glass-radius-lg glass-shadow-xl glass-min-w-48 glass-contrast-guard",
+                  children: [actions.map((action, index) => jsxs("button", {
+                    onClick: e => {
+                      action.onClick();
+                      setShowActionMenu(false);
+                    },
+                    disabled: action.disabled,
+                    className: cn("w-full text-left glass-px-4 glass-py-2 glass-text-sm glass-text-primary/80 hover:bg-white/10", "first:rounded-t-lg last:rounded-b-lg", "disabled:opacity-50 disabled:cursor-not-allowed", "flex items-center glass-gap-2"),
+                    children: [action.icon && jsx("span", {
+                      className: 'w-4 h-4',
+                      children: action.icon
+                    }), action.label]
+                  }, index)), jsxs("div", {
+                    className: "glass-border-t glass-border-white/10",
+                    children: [jsxs("button", {
+                      onClick: e => {
+                        onRefresh?.();
+                        setShowActionMenu(false);
+                      },
+                      className: 'glass-w-full text-left glass-px-4 glass-py-2 glass-text-sm text-primary/80 hover:glass-surface-subtle/10 glass-flex glass-items-center glass-gap-2 glass-focus glass-touch-target glass-contrast-guard',
+                      children: [jsx(RefreshCw, {
+                        className: 'w-4 h-4'
+                      }), "Refresh Data"]
+                    }), jsxs("button", {
+                      onClick: e => {
+                        onDownload?.();
+                        setShowActionMenu(false);
+                      },
+                      className: 'glass-w-full text-left glass-px-4 glass-py-2 glass-text-sm text-primary/80 hover:glass-surface-subtle/10 glass-flex glass-items-center glass-gap-2 glass-radius-b-lg glass-focus glass-touch-target glass-contrast-guard',
+                      children: [jsx(Download, {
+                        className: 'w-4 h-4'
+                      }), "Export Data"]
+                    })]
+                  })]
+                })
+              })]
+            })]
+          })]
+        })
+      }), jsx(CardContent, {
+        className: 'pt-0',
+        children: error ? jsxs("div", {
+          className: cn("flex flex-col items-center justify-center", config.contentClass),
+          children: [jsx("div", {
+            className: 'text-primary mb-2',
+            children: jsx(Settings, {
+              className: 'w-8 h-8'
+            })
+          }), jsx("p", {
+            className: 'text-primary/80 text-center mb-4',
+            children: error
+          }), jsx(GlassButton, {
+            variant: "outline",
+            onClick: handleRefresh,
+            children: "Try Again"
+          })]
+        }) : !children && emptyMessage ? jsxs("div", {
+          className: cn("flex flex-col items-center justify-center", config.contentClass),
+          children: [jsx("div", {
+            className: 'text-primary/40 mb-2',
+            children: jsx(BarChart3, {
+              className: 'w-8 h-8'
+            })
+          }), jsx("p", {
+            className: 'text-primary/60 text-center',
+            children: emptyMessage
+          })]
+        }) : jsx("div", {
+          className: config.contentClass,
+          children: loading ? jsx("div", {
+            className: "glass-flex glass-items-center glass-justify-center glass-h-full",
+            children: jsx("div", {
+              className: 'animate-spin glass-radius-full h-8 w-8 glass-border-2 glass-border-white/20 glass-border-t-white/60'
+            })
+          }) : children
+        })
+      }), footerContent && jsx("div", {
+        className: 'glass-mt-4 pt-4 glass-border-t glass-border-white/10',
+        children: footerContent
+      })]
+    })
+  });
+};
+
+export { GlassChartWidget, GlassChartWidget as default };
+//# sourceMappingURL=GlassChartWidget.js.map

package/dist/esm/components/dashboard/GlassChartWidget.js.map

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

package/dist/esm/components/dashboard/GlassKPICard.js

@@ -0,0 +1,268 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { Minus, ArrowDownIcon, ArrowUpIcon } from 'lucide-react';
+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';
+import { CardHeader, CardTitle, CardContent } from '../card/index.js';
+import { GlassCard } from '../card/GlassCard.js';
+
+/**
+ * GlassKPICard component
+ * A glassmorphism KPI card for displaying key performance indicators
+ */
+const GlassKPICard = ({
+  // TODO: Integrate ContrastGuard for table cells, list items, badges, card titles, and other text content for WCAG AA compliance
+  title = "KPI",
+  value = "--",
+  unit = "",
+  previousValue,
+  trend = "none",
+  trendPercentage,
+  description,
+  icon,
+  variant = "default",
+  size = "md",
+  showTrend = true,
+  trendLabel,
+  formatValue,
+  children,
+  loading = false,
+  onClick,
+  className,
+  ...props
+}) => {
+  // Size configurations
+  const sizeConfigs = {
+    sm: {
+      cardClass: "glass-p-4",
+      titleClass: "glass-text-sm font-medium",
+      valueClass: "glass-text-2xl font-bold",
+      iconSize: "w-6 h-6",
+      trendIconSize: "w-4 h-4",
+      trendTextSize: "glass-text-xs"
+    },
+    md: {
+      cardClass: "glass-p-6",
+      titleClass: "glass-text-base font-medium",
+      valueClass: "text-3xl font-bold",
+      iconSize: "w-8 h-8",
+      trendIconSize: "w-5 h-5",
+      trendTextSize: "glass-text-sm"
+    },
+    lg: {
+      cardClass: "p-8",
+      titleClass: "glass-text-lg font-semibold",
+      valueClass: "text-4xl font-bold",
+      iconSize: "w-10 h-10",
+      trendIconSize: "w-6 h-6",
+      trendTextSize: "glass-text-base"
+    },
+    xl: {
+      cardClass: "glass-p-10",
+      titleClass: "glass-text-xl font-semibold",
+      valueClass: "text-5xl font-bold",
+      iconSize: "w-12 h-12",
+      trendIconSize: "w-7 h-7",
+      trendTextSize: "glass-text-lg"
+    }
+  };
+  const config = sizeConfigs[size] ?? sizeConfigs.md;
+  // Variant color configurations
+  const variantConfigs = {
+    default: {
+      iconColor: "glass-text-primary/70",
+      trendUpColor: "text-green-400",
+      trendDownColor: "text-red-400",
+      trendNeutralColor: "text-yellow-400",
+      valueColor: "glass-text-primary"
+    },
+    success: {
+      iconColor: "text-green-400",
+      trendUpColor: "text-green-300",
+      trendDownColor: "text-red-400",
+      trendNeutralColor: "text-yellow-400",
+      valueColor: "text-green-200"
+    },
+    warning: {
+      iconColor: "text-yellow-400",
+      trendUpColor: "text-green-400",
+      trendDownColor: "text-red-400",
+      trendNeutralColor: "text-yellow-300",
+      valueColor: "text-yellow-200"
+    },
+    error: {
+      iconColor: "text-red-400",
+      trendUpColor: "text-red-400",
+      trendDownColor: "text-red-300",
+      trendNeutralColor: "text-yellow-400",
+      valueColor: "text-red-200"
+    },
+    info: {
+      iconColor: "text-blue-400",
+      trendUpColor: "text-green-400",
+      trendDownColor: "text-red-400",
+      trendNeutralColor: "text-yellow-400",
+      valueColor: "text-blue-200"
+    },
+    primary: {
+      iconColor: "text-primary",
+      trendUpColor: "text-green-400",
+      trendDownColor: "text-red-400",
+      trendNeutralColor: "text-yellow-400",
+      valueColor: "text-primary-foreground"
+    }
+  };
+  const variantConfig = variantConfigs[variant] ?? variantConfigs.default;
+  // Format the display value
+  const displayValue = formatValue ? formatValue(value ?? "--") : String(value ?? "--");
+  // Calculate trend information
+  const getTrendInfo = () => {
+    if (trend === "none" || !showTrend) return null;
+    let trendIcon;
+    let trendColor;
+    let trendText = "";
+    switch (trend) {
+      case "up":
+        trendIcon = jsx(ArrowUpIcon, {
+          className: cn(config.trendIconSize, variantConfig.trendUpColor)
+        });
+        trendColor = variantConfig.trendUpColor;
+        break;
+      case "down":
+        trendIcon = jsx(ArrowDownIcon, {
+          className: cn(config.trendIconSize, variantConfig.trendDownColor)
+        });
+        trendColor = variantConfig.trendDownColor;
+        break;
+      case "neutral":
+        trendIcon = jsx(Minus, {
+          className: cn(config.trendIconSize, variantConfig.trendNeutralColor)
+        });
+        trendColor = variantConfig.trendNeutralColor;
+        break;
+    }
+    if (trendPercentage !== undefined) {
+      trendText = `${trend === "up" ? "+" : trend === "down" ? "-" : ""}${Math.abs(trendPercentage)}%`;
+    } else if (trendLabel) {
+      trendText = trendLabel;
+    }
+    return {
+      trendIcon,
+      trendColor,
+      trendText
+    };
+  };
+  const trendInfo = getTrendInfo();
+  // Loading skeleton
+  if (loading) {
+    return jsx(GlassCard, {
+      "data-glass-component": true,
+      className: cn("animate-pulse", config.cardClass, className),
+      children: jsxs("div", {
+        className: "glass-gap-4",
+        children: [jsxs("div", {
+          className: "glass-flex glass-items-center glass-justify-between",
+          children: [jsx("div", {
+            className: 'h-4 glass-surface-subtle/20 glass-radius-md w-24'
+          }), jsx("div", {
+            className: 'w-8 h-8 glass-surface-subtle/20 glass-radius-md'
+          })]
+        }), jsxs("div", {
+          className: "glass-gap-2",
+          children: [jsx("div", {
+            className: 'h-8 glass-surface-subtle/20 glass-radius-md w-32'
+          }), jsx("div", {
+            className: 'h-4 glass-surface-subtle/20 glass-radius-md w-20'
+          })]
+        })]
+      })
+    });
+  }
+  return jsx(MotionFramer, {
+    preset: "fadeIn",
+    className: "glass-w-full glass-kpi-card",
+    children: jsxs(GlassCard, {
+      elevation: "level2",
+      intensity: "medium",
+      depth: 2,
+      tint: "neutral",
+      border: "subtle",
+      animation: "none",
+      performanceMode: "medium",
+      hoverable: !!onClick,
+      clickable: !!onClick,
+      onClick: onClick,
+      className: cn(config.cardClass, "group relative overflow-hidden", onClick && ["cursor-pointer", "hover:shadow-2xl hover:shadow-purple-500/20", "transition-all duration-500 ease-out"], className),
+      ...props,
+      children: [jsxs(CardHeader, {
+        className: 'pb-2',
+        children: [jsxs("div", {
+          className: "glass-flex glass-items-center glass-justify-between",
+          children: [jsxs(CardTitle, {
+            className: cn(config.titleClass, "glass-text-primary/90 flex items-center glass-gap-2"),
+            children: [icon && jsxs("div", {
+              className: cn("inline-flex items-center justify-center glass-radius-lg glass-p-2 mr-3", "bg-gradient-to-br from-white/10 to-white/5 border border-white/20", "group-hover:from-white/15 group-hover:to-white/8", "group-hover:border-white/30 group-hover:shadow-lg", "group-hover:scale-110 group-hover:rotate-2", "transition-all duration-300 ease-out", variantConfig.iconColor),
+              children: [jsx("div", {
+                className: 'absolute inset-0 glass-gradient-primary glass-gradient-primary glass-gradient-primary glass-radius-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300'
+              }), jsx("span", {
+                className: cn(config.iconSize, "relative z-10 transition-transform duration-300 group-hover:scale-110"),
+                children: icon
+              })]
+            }), title]
+          }), trendInfo && trendInfo.trendIcon && jsxs("div", {
+            className: 'glass-flex glass-items-center glass-gap-1 trend-indicator',
+            children: [jsx("div", {
+              className: 'glass-p-1 glass-radius-md glass-surface-subtle/10 group-hover:glass-surface-subtle/20 transition-colors duration-300',
+              children: jsx("span", {
+                "data-icon": true,
+                className: 'transition-all duration-300',
+                children: trendInfo.trendIcon
+              })
+            }), trendInfo.trendText && jsx("span", {
+              className: cn(config.trendTextSize, trendInfo.trendColor, "font-medium transition-all duration-300", "group-hover:scale-105 group-hover:brightness-110"),
+              children: trendInfo.trendText
+            })]
+          })]
+        }), description && jsx("p", {
+          className: 'glass-text-sm text-primary/60 glass-mt-1',
+          children: description
+        })]
+      }), jsxs(CardContent, {
+        className: 'pt-0',
+        children: [jsxs("div", {
+          className: 'glass-flex items-baseline glass-gap-2 relative',
+          children: [jsxs("div", {
+            className: 'relative premium-glow',
+            children: [jsx("div", {
+              className: 'absolute inset-0 glass-gradient-primary glass-gradient-primary via-purple-400/30 glass-gradient-primary glass-blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500 -z-10 scale-150'
+            }), jsx("span", {
+              "data-value": true,
+              className: cn(config.valueClass, variantConfig.valueColor, "relative z-10 font-bold tracking-tight", "group-hover:glass-text-primary transition-all duration-300", "drop-shadow-sm group-hover:drop-shadow-lg"),
+              children: displayValue
+            })]
+          }), unit && jsx("span", {
+            className: cn("glass-text-lg glass-text-primary/70 font-medium", "group-hover:glass-text-primary/90 transition-colors duration-300"),
+            children: unit
+          })]
+        }), previousValue && jsx("div", {
+          className: "glass-mt-2",
+          children: jsxs("span", {
+            className: 'glass-text-sm text-primary/50',
+            children: ["Previous:", " ", formatValue ? formatValue(previousValue) : String(previousValue), unit]
+          })
+        }), children && jsx("div", {
+          className: "glass-mt-4",
+          children: children
+        })]
+      })]
+    })
+  });
+};
+
+export { GlassKPICard, GlassKPICard as default };
+//# sourceMappingURL=GlassKPICard.js.map

package/dist/esm/components/dashboard/GlassKPICard.js.map

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