aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
96 lines • 2.92 kB
TypeScript
import React from "react";
export interface MetricValue {
current: number;
previous?: number;
target?: number;
unit?: string;
format?: "number" | "percentage" | "currency" | "bytes" | "time" | "custom";
customFormatter?: (value: number) => string;
}
export interface MetricTrend {
direction: "up" | "down" | "neutral";
percentage: number;
period?: string;
}
export interface MetricSpark {
data: number[];
color?: string;
showArea?: boolean;
}
export interface MetricConfig {
id: string;
title: string;
description?: string;
value: MetricValue;
trend?: MetricTrend;
spark?: MetricSpark;
icon?: React.ReactNode;
color?: string;
priority?: "low" | "medium" | "high" | "critical";
status?: "success" | "warning" | "error" | "info" | "neutral";
category?: string;
clickable?: boolean;
onClick?: () => void;
customContent?: React.ReactNode;
size?: "sm" | "md" | "lg" | "xl";
}
export interface MetricGridLayout {
columns: number;
gap: number;
responsive?: {
sm?: number;
md?: number;
lg?: number;
xl?: number;
};
}
export interface GlassMetricsGridProps extends React.HTMLAttributes<HTMLDivElement> {
/** Metrics configuration */
metrics?: MetricConfig[];
/** Grid layout */
layout?: MetricGridLayout;
/** Whether metrics are loading */
loading?: boolean;
/** Whether to show animations */
animated?: boolean;
/** Whether to show trends */
showTrends?: boolean;
/** Whether to show spark lines */
showSparks?: boolean;
/** Whether to enable auto-refresh */
autoRefresh?: boolean;
/** Auto-refresh interval in milliseconds */
refreshInterval?: number;
/** Refresh handler */
onRefresh?: () => void;
/** Metric click handler */
onMetricClick?: (metric: MetricConfig) => void;
/** Custom metric renderer */
renderMetric?: (metric: MetricConfig) => React.ReactNode;
/** Filter options */
filters?: {
categories?: string[];
priorities?: MetricConfig["priority"][];
statuses?: MetricConfig["status"][];
};
/** Sort options */
sort?: {
field: keyof MetricConfig;
direction: "asc" | "desc";
};
/** Whether to show search */
searchable?: boolean;
/** Search query */
searchQuery?: string;
/** Search change handler */
onSearchChange?: (query: string) => void;
/** Whether to show export options */
exportable?: boolean;
/** Export handler */
onExport?: (format: "csv" | "json" | "png") => void;
/** Respect motion preferences */
respectMotionPreference?: boolean;
}
export declare const GlassMetricsGrid: React.ForwardRefExoticComponent<GlassMetricsGridProps & React.RefAttributes<HTMLDivElement>>;
export default GlassMetricsGrid;
//# sourceMappingURL=GlassMetricsGrid.d.ts.map