aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/templates/dashboard/widgets/TableWidget.js

@@ -0,0 +1,268 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { cn } from '../../../../lib/utilsComprehensive.js';
+import React, { forwardRef, useState } from 'react';
+import { GlassCore } from '../../../../primitives/GlassCore.js';
+import '../../../../primitives/glass/GlassAdvanced.js';
+import '../../../../primitives/OptimizedGlassCore.js';
+import '../../../../primitives/glass/OptimizedGlassAdvanced.js';
+import '../../../../primitives/MotionNative.js';
+import '../../../../primitives/motion/MotionFramer.js';
+import { GlassButton } from '../../../button/GlassButton.js';
+import { GlassBadge } from '../../../data-display/GlassBadge.js';
+import { VStack, HStack } from '../../../layout/GlassStack.js';
+
+/**
+ * TableWidget component
+ * Display tabular data with sorting and styling
+ */
+const TableWidget = /*#__PURE__*/forwardRef(({
+  data,
+  variant = "default",
+  size = "md",
+  maxRows = 5,
+  showHeader = true,
+  sortable = true,
+  showRowNumbers = false,
+  hoverable = true,
+  striped = false,
+  loading = false,
+  actions,
+  onRowClick,
+  onSort,
+  className,
+  ...props
+}, ref) => {
+  const [sortColumn, setSortColumn] = useState(null);
+  const [sortDirection, setSortDirection] = useState("asc");
+  const sizeClasses = {
+    sm: {
+      padding: "glass-p-3",
+      title: "glass-text-sm",
+      subtitle: "glass-text-xs",
+      cell: "glass-px-2 glass-py-1 glass-text-xs",
+      header: "glass-px-2 glass-py-2 glass-text-xs"
+    },
+    md: {
+      padding: "glass-p-4",
+      title: "glass-text-base",
+      subtitle: "glass-text-sm",
+      cell: "glass-px-3 glass-py-2 glass-text-sm",
+      header: "glass-px-3 glass-py-2 glass-text-sm"
+    },
+    lg: {
+      padding: "glass-p-6",
+      title: "glass-text-lg",
+      subtitle: "glass-text-base",
+      cell: "glass-px-4 glass-py-3 glass-text-base",
+      header: "glass-px-4 glass-py-3 glass-text-base"
+    }
+  };
+  const config = sizeClasses?.[size];
+  // Handle column sort
+  const handleSort = columnId => {
+    const column = data?.columns.find(col => col.id === columnId);
+    if (!column?.sortable && !sortable) return;
+    const newDirection = sortColumn === columnId && sortDirection === "asc" ? "desc" : "asc";
+    setSortColumn(columnId);
+    setSortDirection(newDirection);
+    onSort?.(columnId, newDirection);
+  };
+  // Sort data if local sorting
+  const sortedRows = React.useMemo(() => {
+    if (!sortColumn || onSort) return data?.rows || [];
+    const column = (data?.columns || []).find(col => col.id === sortColumn);
+    if (!column) return data?.rows || [];
+    return [...(data?.rows || [])].sort((a, b) => {
+      const aValue = a[column.accessor];
+      const bValue = b?.[column.accessor];
+      if (aValue < bValue) return sortDirection === "asc" ? -1 : 1;
+      if (aValue > bValue) return sortDirection === "asc" ? 1 : -1;
+      return 0;
+    });
+  }, [data?.rows, data?.columns, sortColumn, sortDirection, onSort]);
+  const displayRows = sortedRows.slice(0, maxRows);
+  const renderCellContent = (column, row) => {
+    const value = row?.[column.accessor];
+    if (column.render) {
+      return column.render(value, row);
+    }
+    // Default renderers for common data types
+    if (typeof value === "boolean") {
+      return jsx(GlassBadge, {
+        "data-glass-component": true,
+        variant: value ? "success" : "error",
+        size: "xs",
+        children: value ? "Yes" : "No"
+      });
+    }
+    if (typeof value === "number") {
+      return value.toLocaleString();
+    }
+    if (value === null || value === undefined) {
+      return jsx("span", {
+        className: "glass-text-secondary",
+        children: "\u2014"
+      });
+    }
+    return String(value);
+  };
+  const renderTable = () => {
+    if (loading) {
+      return jsx("div", {
+        className: "glass-flex glass-items-center glass-justify-center glass-py-8",
+        children: jsx("div", {
+          className: 'w-6 h-6 glass-border-2 glass-border-primary glass-border-t-transparent glass-radius-full animate-spin'
+        })
+      });
+    }
+    if ((displayRows?.length || 0) === 0) {
+      return jsx("div", {
+        className: "glass-flex glass-items-center glass-justify-center glass-py-8 glass-text-secondary",
+        children: "No data available"
+      });
+    }
+    return jsx("div", {
+      className: 'overflow-x-auto',
+      children: jsxs("table", {
+        className: "glass-w-full",
+        children: [showHeader && jsx("thead", {
+          children: jsxs("tr", {
+            className: "glass-border-b glass-border-glass-border/20",
+            children: [showRowNumbers && jsx("th", {
+              className: cn(config.header, "w-12 text-left font-medium glass-text-secondary"),
+              children: "#"
+            }), (data?.columns || []).map(column => jsx("th", {
+              className: cn(config.header, "font-medium glass-text-secondary", {
+                "text-left": column.align === "left" || !column.align,
+                "text-center": column.align === "center",
+                "text-right": column.align === "right",
+                "cursor-pointer hover:text-foreground": column.sortable || sortable
+              }),
+              style: {
+                width: column.width
+              },
+              onClick: e => handleSort(column.id),
+              children: jsxs(HStack, {
+                space: "xs",
+                align: "center",
+                className: "glass-justify-start",
+                children: [jsx("span", {
+                  children: column.header
+                }), (column.sortable || sortable) && jsxs("div", {
+                  className: "glass-flex glass-flex-col",
+                  children: [jsx("div", {
+                    className: cn("w-0 h-0 border-l-[3px] border-r-[3px] border-b-[4px] border-transparent", sortColumn === column.id && sortDirection === "asc" ? "border-b-primary" : "border-b-muted-foreground/30")
+                  }), jsx("div", {
+                    className: cn("w-0 h-0 border-l-[3px] border-r-[3px] border-t-[4px] border-transparent mt-0.5", sortColumn === column.id && sortDirection === "desc" ? "border-t-primary" : "border-t-muted-foreground/30")
+                  })]
+                })]
+              })
+            }, column.id))]
+          })
+        }), jsx("tbody", {
+          children: displayRows.map((row, index) => jsxs("tr", {
+            className: cn("transition-colors animate-fade-in", {
+              "bg-muted/20": striped && index % 2 === 1,
+              "hover:bg-muted/30": hoverable,
+              "cursor-pointer": onRowClick
+            }),
+            style: {
+              animationDelay: `${Math.min(index, 15) * 50}ms`,
+              animationFillMode: "both"
+            },
+            onClick: e => onRowClick?.(row),
+            children: [showRowNumbers && jsx("td", {
+              className: cn(config.cell, "glass-text-secondary"),
+              children: index + 1
+            }), (data?.columns || []).map(column => jsx("td", {
+              className: cn(config.cell, "text-foreground", {
+                "text-left": column.align === "left" || !column.align,
+                "text-center": column.align === "center",
+                "text-right": column.align === "right"
+              }),
+              children: renderCellContent(column, row)
+            }, column.id))]
+          }, row.id))
+        })]
+      })
+    });
+  };
+  const renderContent = () => {
+    switch (variant) {
+      case "minimal":
+        return renderTable();
+      case "compact":
+        return jsxs(VStack, {
+          space: "sm",
+          children: [jsxs(HStack, {
+            space: "sm",
+            align: "center",
+            justify: "between",
+            children: [jsx("h3", {
+              className: cn("font-medium text-foreground", config.title),
+              children: data?.title || "Table"
+            }), actions]
+          }), renderTable()]
+        });
+      default:
+        return jsxs(VStack, {
+          space: "md",
+          children: [jsxs(HStack, {
+            space: "sm",
+            align: "center",
+            justify: "between",
+            children: [jsxs(VStack, {
+              space: "xs",
+              children: [jsx("h3", {
+                className: cn("font-medium text-foreground", config.title),
+                children: data?.title || "Table"
+              }), data?.subtitle && jsx("p", {
+                className: cn("glass-text-secondary", config.subtitle),
+                children: data?.subtitle
+              })]
+            }), actions]
+          }), data?.summary && jsxs(HStack, {
+            space: "sm",
+            align: "center",
+            children: [data?.summary.total && jsxs("span", {
+              className: "glass-text-sm glass-text-secondary",
+              children: ["Total: ", data?.summary.total.toLocaleString()]
+            }), data?.summary.filtered && data?.summary.filtered !== data?.summary.total && jsxs("span", {
+              className: "glass-text-sm glass-text-secondary",
+              children: ["Showing: ", data?.summary.filtered.toLocaleString()]
+            }), data?.summary.message && jsx(GlassBadge, {
+              variant: "outline",
+              size: "xs",
+              children: data?.summary.message
+            })]
+          }), jsx("div", {
+            className: "glass-flex-1",
+            children: renderTable()
+          }), (data?.rows?.length || 0) > maxRows && jsxs(HStack, {
+            space: "sm",
+            align: "center",
+            justify: "center",
+            children: [jsxs("span", {
+              className: "glass-text-xs glass-text-secondary",
+              children: ["Showing ", maxRows, " of ", data?.rows?.length || 0, " rows"]
+            }), jsx(GlassButton, {
+              variant: "ghost",
+              size: "xs",
+              children: "View All"
+            })]
+          })]
+        });
+    }
+  };
+  return jsx(GlassCore, {
+    ref: ref,
+    className: cn("w-full h-full glass-radius-lg", config.padding, className),
+    ...props,
+    children: renderContent()
+  });
+});
+TableWidget.displayName = "TableWidget";
+
+export { TableWidget };
+//# sourceMappingURL=TableWidget.js.map

package/dist/esm/components/templates/dashboard/widgets/TableWidget.js.map

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

package/dist/esm/components/templates/detail/GlassDetailView.js

@@ -0,0 +1,347 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { GlassButton, IconButton } from '../../button/GlassButton.js';
+import '../../button/GlassFab.js';
+import '../../button/GlassMagneticButton.js';
+import { cn } from '../../../lib/utilsComprehensive.js';
+import { GlassCard } from '../../card/GlassCard.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 '../../../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 '../../data-display/GlassHeatmap.js';
+import '../../data-display/GlassLoadingSkeleton.js';
+import '../../data-display/GlassProgress.js';
+import '../../data-display/GlassTimeline.js';
+import 'lucide-react';
+import '../../data-display/GlassSkeleton.js';
+import '../../data-display/GlassNotificationCenter.js';
+import '../../data-display/GlassAnimatedNumber.js';
+import '../../layout/GlassBox.js';
+import '../../layout/GlassContainer.js';
+import '../../layout/GlassFlex.js';
+import { GlassGrid, GlassGridItem } from '../../layout/GlassGrid.js';
+import '../../layout/GlassMasonry.js';
+import '../../layout/GlassScrollArea.js';
+import '../../layout/GlassSplitPane.js';
+import { VStack, HStack } from '../../layout/GlassStack.js';
+import '../../layout/OptimizedGlassContainer.js';
+import '../../layout/Box.js';
+
+/**
+ * GlassDetailView component
+ * Comprehensive detail view with multiple layout options
+ */
+const GlassDetailView = /*#__PURE__*/forwardRef(({
+  title,
+  subtitle,
+  status,
+  breadcrumb,
+  actions = [],
+  sections = [],
+  tabs = [],
+  activeTab,
+  onTabChange,
+  layout = "default",
+  sidebar,
+  loading = false,
+  error,
+  onBack,
+  onShare,
+  onPrint,
+  className,
+  children,
+  ...props
+}, ref) => {
+  const [expandedSections, setExpandedSections] = useState(new Set(sections.filter(s => s.defaultExpanded !== false).map(s => s.id)));
+  const [currentTab, setCurrentTab] = useState(activeTab || tabs[0]?.id);
+  // Toggle section expansion
+  const toggleSection = sectionId => {
+    const newExpanded = new Set(expandedSections);
+    if (newExpanded.has(sectionId)) {
+      newExpanded.delete(sectionId);
+    } else {
+      newExpanded.add(sectionId);
+    }
+    setExpandedSections(newExpanded);
+  };
+  // Handle tab change
+  const handleTabChange = tabId => {
+    setCurrentTab(tabId);
+    onTabChange?.(tabId);
+  };
+  // Render field value
+  const renderFieldValue = field => {
+    if (field.render) {
+      return field.render(field.value);
+    }
+    switch (field.type) {
+      case "boolean":
+        return jsx(GlassBadge, {
+          "data-glass-component": true,
+          variant: field.value ? "success" : "error",
+          size: "xs",
+          children: field.value ? "Yes" : "No"
+        });
+      case "badge":
+        return jsx(GlassBadge, {
+          variant: "outline",
+          size: "xs",
+          children: field.value
+        });
+      case "link":
+        return jsx("a", {
+          href: field.value,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: 'text-primary hover:underline glass-focus glass-touch-target glass-contrast-guard',
+          children: field.value
+        });
+      case "date":
+        return new Date(field.value).toLocaleDateString();
+      case "number":
+        return typeof field.value === "number" ? field.value.toLocaleString() : field.value;
+      default:
+        return field.value;
+    }
+  };
+  // Render field
+  const renderField = field => {
+    const widthClasses = {
+      auto: "w-auto",
+      full: "w-full",
+      half: "w-1/2",
+      third: "w-1/3",
+      quarter: "w-1/4"
+    };
+    return jsxs("div", {
+      className: cn("glass-auto-gap glass-auto-gap-xs", widthClasses[field.width || "auto"]),
+      children: [jsx("label", {
+        className: 'glass-text-sm font-medium glass-text-secondary',
+        children: field.label
+      }), jsxs(HStack, {
+        space: "sm",
+        align: "center",
+        children: [jsx("div", {
+          className: 'glass-text-sm text-primary',
+          children: renderFieldValue(field)
+        }), field.copyable && jsx(IconButton, {
+          icon: "\uD83D\uDCCB",
+          variant: "ghost",
+          size: "xs",
+          onClick: e => navigator.clipboard?.writeText(String(field.value)),
+          "aria-label": "Copy to clipboard",
+          className: "glass-focus glass-touch-target"
+        })]
+      })]
+    }, field.id);
+  };
+  // Render section
+  const renderSection = section => {
+    const isExpanded = expandedSections.has(section.id);
+    return jsx(MotionFramer, {
+      type: "slide",
+      direction: "down",
+      children: jsxs(GlassCard, {
+        variant: "default",
+        children: [jsxs("div", {
+          className: cn("flex items-center justify-between", section.collapsible && "cursor-pointer glass-focus glass-touch-target"),
+          onClick: section.collapsible ? () => toggleSection(section.id) : undefined,
+          children: [jsxs(VStack, {
+            space: "xs",
+            children: [jsx("h3", {
+              className: 'glass-text-lg font-semibold text-primary',
+              children: section.title
+            }), section.description && jsx("p", {
+              className: "glass-text-sm glass-text-secondary",
+              children: section.description
+            })]
+          }), section.collapsible && jsx(GlassButton, {
+            leftIcon: isExpanded ? "−" : "+",
+            variant: "ghost",
+            size: "sm",
+            "aria-label": isExpanded ? "Collapse section" : "Expand section"
+          })]
+        }), (!section.collapsible || isExpanded) && jsx(MotionFramer, {
+          type: "slide",
+          direction: "down",
+          className: 'mt-6',
+          children: section.component ? section.component : section.fields ? jsx("div", {
+            className: 'glass-grid glass-grid-cols-1 md:grid-cols-2 lg:grid-cols-3 glass-gap-6',
+            children: section.fields.map(renderField)
+          }) : null
+        })]
+      })
+    }, section.id);
+  };
+  // Render tabs
+  const renderTabs = () => {
+    if (tabs.length === 0) return null;
+    return jsxs(VStack, {
+      space: "md",
+      children: [jsx("div", {
+        className: "glass-border-b glass-border-glass-border/20",
+        children: jsx("nav", {
+          className: 'glass-flex space-x-8',
+          children: tabs.map(tab => jsxs(GlassButton, {
+            onClick: e => handleTabChange(tab.id),
+            className: cn("flex items-center glass-gap-2 glass-py-2 glass-px-1 border-b-2 transition-colors glass-focus glass-touch-target", currentTab === tab.id ? "border-primary text-primary font-medium" : "border-transparent glass-text-secondary hover:text-foreground"),
+            children: [tab.icon, jsx("span", {
+              children: tab.label
+            }), tab.badge && jsx(GlassBadge, {
+              variant: "outline",
+              size: "xs",
+              children: tab.badge
+            })]
+          }, tab.id))
+        })
+      }), jsx("div", {
+        children: tabs.find(tab => tab.id === currentTab)?.content
+      })]
+    });
+  };
+  // Render header
+  const renderHeader = () => jsxs(VStack, {
+    space: "md",
+    children: [breadcrumb && jsx("div", {
+      className: "glass-text-sm glass-text-secondary",
+      children: breadcrumb
+    }), jsxs(HStack, {
+      space: "md",
+      align: "center",
+      justify: "between",
+      children: [jsxs(HStack, {
+        space: "md",
+        align: "center",
+        children: [onBack && jsx(GlassButton, {
+          leftIcon: "\u2190",
+          variant: "ghost",
+          size: "sm",
+          onClick: onBack,
+          "aria-label": "Go back",
+          className: "glass-focus glass-touch-target"
+        }), jsxs(VStack, {
+          space: "xs",
+          children: [jsxs(HStack, {
+            space: "sm",
+            align: "center",
+            children: [jsx("h1", {
+              className: 'glass-text-2xl font-bold text-primary',
+              children: title
+            }), status && jsx(GlassBadge, {
+              variant: status.variant,
+              size: "sm",
+              children: status.label
+            })]
+          }), subtitle && jsx("p", {
+            className: "glass-text-lg glass-text-secondary",
+            children: subtitle
+          })]
+        })]
+      }), jsxs(HStack, {
+        space: "sm",
+        align: "center",
+        children: [onShare && jsx(GlassButton, {
+          leftIcon: "\uD83D\uDCE4",
+          variant: "ghost",
+          size: "sm",
+          onClick: onShare,
+          "aria-label": "Share",
+          className: "glass-focus glass-touch-target"
+        }), onPrint && jsx(GlassButton, {
+          leftIcon: "\uD83D\uDDA8\uFE0F",
+          variant: "ghost",
+          size: "sm",
+          onClick: onPrint,
+          "aria-label": "Print",
+          className: "glass-focus glass-touch-target"
+        }), actions.map(action => jsx(GlassButton, {
+          variant: action.variant,
+          size: "sm",
+          leftIcon: action.icon,
+          onClick: action.onClick,
+          disabled: action.disabled,
+          loading: action.loading,
+          className: "glass-focus glass-touch-target",
+          children: action.label
+        }, action.id))]
+      })]
+    })]
+  });
+  // Render content based on layout
+  const renderContent = () => {
+    if (loading) {
+      return jsx("div", {
+        className: 'glass-flex glass-items-center glass-justify-center h-64',
+        children: jsx("div", {
+          className: 'w-8 h-8 glass-border-2 glass-border-primary glass-border-t-transparent glass-radius-full animate-spin'
+        })
+      });
+    }
+    if (error) {
+      return jsxs(GlassCard, {
+        variant: "default",
+        className: 'glass-p-8 text-center',
+        children: [jsx("div", {
+          className: 'text-destructive font-medium mb-2',
+          children: "Error"
+        }), jsx("div", {
+          className: "glass-text-secondary",
+          children: error
+        })]
+      });
+    }
+    switch (layout) {
+      case "sidebar":
+        return jsxs(GlassGrid, {
+          cols: 12,
+          gap: "lg",
+          children: [jsx(GlassGridItem, {
+            colSpan: 8,
+            children: jsxs(VStack, {
+              space: "lg",
+              children: [tabs.length > 0 ? renderTabs() : sections.map(renderSection), children]
+            })
+          }), jsx(GlassGridItem, {
+            colSpan: 4,
+            children: sidebar
+          })]
+        });
+      case "tabs":
+        return renderTabs();
+      case "accordion":
+        return jsxs(VStack, {
+          space: "md",
+          children: [sections.map(section => ({
+            ...section,
+            collapsible: true
+          })).map(renderSection), children]
+        });
+      default:
+        return jsxs(VStack, {
+          space: "lg",
+          children: [sections.map(renderSection), tabs.length > 0 && renderTabs(), children]
+        });
+    }
+  };
+  return jsxs("div", {
+    ref: ref,
+    className: cn("w-full glass-auto-gap glass-auto-gap-3xl", className),
+    ...props,
+    children: [renderHeader(), renderContent()]
+  });
+});
+GlassDetailView.displayName = "GlassDetailView";
+
+export { GlassDetailView };
+//# sourceMappingURL=GlassDetailView.js.map

package/dist/esm/components/templates/detail/GlassDetailView.js.map

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