aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
58 lines • 1.58 kB
TypeScript
import React from "react";
export interface MetricData {
value: string | number;
label: string;
change?: number;
changeLabel?: string;
icon?: React.ReactNode;
trend?: "up" | "down" | "neutral";
target?: number;
unit?: string;
description?: string;
}
export interface MetricWidgetProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Metric data
*/
data: MetricData;
/**
* Widget variant
*/
variant?: "default" | "minimal" | "featured" | "compact";
/**
* Size variant
*/
size?: "sm" | "md" | "lg";
/**
* Color scheme
*/
colorScheme?: "default" | "primary" | "success" | "warning" | "destructive";
/**
* Whether to show trend indicator
*/
showTrend?: boolean;
/**
* Whether to show target progress
*/
showTarget?: boolean;
/**
* Custom trend icons
*/
trendIcons?: {
up: React.ReactNode;
down: React.ReactNode;
neutral: React.ReactNode;
/** Glass surface intent */
intent?: "neutral" | "primary" | "success" | "warning" | "danger" | "info";
/** Glass surface elevation */
elevation?: "level1" | "level2" | "level3" | "level4";
/** Performance tier */
tier?: "low" | "medium" | "high";
};
}
/**
* MetricWidget component
* Display key metrics with trends and targets
*/
export declare const MetricWidget: React.ForwardRefExoticComponent<MetricWidgetProps & React.RefAttributes<HTMLDivElement>>;
//# sourceMappingURL=MetricWidget.d.ts.map