aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
97 lines • 2.23 kB
TypeScript
import React from "react";
export interface GlassStatCardProps {
/**
* Statistic title/label
*/
title: string;
/**
* Main statistic value
*/
value: string | number;
/**
* Statistic unit (e.g., '$', '%', 'users')
*/
unit?: string;
/**
* Statistic description/subtitle
*/
description?: string;
/**
* Icon to display
*/
icon?: React.ReactNode;
/**
* Statistic type for automatic icon
*/
type?: "revenue" | "users" | "conversion" | "performance" | "growth" | "target" | "activity" | "analytics" | "custom";
/**
* Color variant for the card
*/
variant?: "default" | "success" | "warning" | "error" | "info" | "primary";
/**
* Size variant
*/
size?: "sm" | "md" | "lg" | "xl";
/**
* Layout variant
*/
layout?: "horizontal" | "vertical" | "compact";
/**
* Trend information
*/
trend?: {
value: number;
label: string;
direction: "up" | "down" | "neutral";
};
/**
* Previous period value for comparison
*/
previousValue?: string | number;
/**
* Additional stats to display
*/
additionalStats?: Array<{
label: string;
value: string | number;
change?: number;
}>;
/**
* Show sparkline or mini chart
*/
showSparkline?: boolean;
/**
* Sparkline data (simplified)
*/
sparklineData?: number[];
/**
* Progress value (0-100)
*/
progress?: number;
/**
* Loading state
*/
loading?: boolean;
/**
* Click handler
*/
onClick?: () => void;
/**
* Custom className
*/
className?: string;
}
/**
* GlassStatCard component
* A glassmorphism statistics card with trend indicators and additional metrics
*/
export declare const GlassStatCard: React.FC<GlassStatCardProps>;
export interface GlassStatGridProps {
stats: Array<Omit<GlassStatCardProps, "size">>;
columns?: number;
size?: "sm" | "md" | "lg";
className?: string;
}
export declare const GlassStatGrid: React.FC<GlassStatGridProps>;
export default GlassStatCard;
//# sourceMappingURL=GlassStatCard.d.ts.map