aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
91 lines • 1.95 kB
TypeScript
import React from "react";
export interface GlassKPICardProps {
/**
* KPI title/label
*/
title: string;
/**
* Main KPI value
*/
value: string | number;
/**
* KPI unit (e.g., '$', '%', 'users')
*/
unit?: string;
/**
* Previous value for comparison
*/
previousValue?: string | number;
/**
* Trend direction
*/
trend?: "up" | "down" | "neutral" | "none";
/**
* Trend percentage change
*/
trendPercentage?: number;
/**
* KPI description/subtitle
*/
description?: string;
/**
* Icon to display
*/
icon?: React.ReactNode;
/**
* Color variant for the card
*/
variant?: "default" | "success" | "warning" | "error" | "info" | "primary";
/**
* Size variant
*/
size?: "sm" | "md" | "lg" | "xl";
/**
* Show trend indicator
*/
showTrend?: boolean;
/**
* Custom trend label
*/
trendLabel?: string;
/**
* Format function for the value
*/
formatValue?: (value: string | number) => string;
/**
* Additional content to display
*/
children?: React.ReactNode;
/**
* Loading state
*/
loading?: boolean;
/**
* Click handler
*/
onClick?: () => void;
/**
* Custom className
*/
className?: string;
}
/**
* GlassKPICard component
* A glassmorphism KPI card for displaying key performance indicators
*/
export declare const GlassKPICard: React.FC<GlassKPICardProps>;
export interface KPIStat {
label: string;
value: number;
unit?: string;
trend?: "up" | "down" | "neutral";
trendPercentage?: number;
}
export interface GlassKPIGridProps {
kpis: KPIStat[];
columns?: number;
className?: string;
}
export declare const GlassKPIGrid: React.FC<GlassKPIGridProps>;
export default GlassKPICard;
//# sourceMappingURL=GlassKPICard.d.ts.map