aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
92 lines • 2.17 kB
TypeScript
import React from "react";
export interface GlassMetricCardProps extends React.HTMLAttributes<HTMLDivElement> {
/**
* Metric title/label
*/
title: string;
/**
* Main metric value
*/
value: string | number;
/**
* Metric unit (e.g., '$', '%', 'users')
*/
unit?: string;
/**
* Metric description/subtitle
*/
description?: string;
/**
* Icon to display
*/
icon?: React.ReactNode;
/**
* Metric type for automatic icon
*/
type?: "revenue" | "users" | "conversion" | "performance" | "growth" | "target" | "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";
/**
* Show progress indicator
*/
showProgress?: boolean;
/**
* Progress value (0-100)
*/
progress?: number;
/**
* Progress label
*/
progressLabel?: string;
/**
* Trend information
*/
trend?: {
value: number;
label: string;
direction: "up" | "down" | "neutral";
};
/**
* Comparison value
*/
comparison?: {
value: string | number;
label: string;
};
/**
* Additional content to display
*/
children?: React.ReactNode;
/**
* Loading state
*/
loading?: boolean;
/**
* Click handler
*/
onClick?: () => void;
}
/**
* GlassMetricCard component
* A glassmorphism metric card for displaying various dashboard metrics
*/
export declare const GlassMetricCard: React.ForwardRefExoticComponent<GlassMetricCardProps & React.RefAttributes<HTMLDivElement>>;
export interface GlassMetricGridProps {
metrics: Array<Omit<GlassMetricCardProps, "size">>;
columns?: number;
size?: "sm" | "md" | "lg";
className?: string;
}
export declare const GlassMetricGrid: React.FC<GlassMetricGridProps>;
export default GlassMetricCard;
//# sourceMappingURL=GlassMetricCard.d.ts.map