aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
60 lines • 1.98 kB
TypeScript
import React from "react";
export interface GlassAnimatedNumberProps {
/** The target number to animate to */
value: number;
/** Starting value for animation */
from?: number;
/** Animation duration in milliseconds */
duration?: number;
/** Animation easing function */
easing?: "linear" | "easeIn" | "easeOut" | "easeInOut";
/** Number of decimal places to show */
decimals?: number;
/** Whether to use comma separators */
separator?: boolean;
/** Prefix to show before the number */
prefix?: string;
/** Suffix to show after the number */
suffix?: string;
/** Custom formatter function */
formatter?: (value: number) => string;
/** Whether to animate on value change */
animateOnChange?: boolean;
/** Custom className */
className?: string;
/** Font size */
size?: "sm" | "md" | "lg" | "xl";
/** Animation variant */
variant?: "count" | "scale" | "glow";
/** Respect user's motion preferences */
respectMotionPreference?: boolean;
/** ARIA label for the animated number */
"aria-label"?: string;
}
export declare const GlassAnimatedNumber: React.ForwardRefExoticComponent<GlassAnimatedNumberProps & React.RefAttributes<HTMLDivElement>>;
export declare const GlassAnimatedCounter: React.FC<{
value: number;
label?: string;
from?: number;
duration?: number;
size?: "sm" | "md" | "lg" | "xl";
className?: string;
}>;
export declare const GlassAnimatedStat: React.FC<{
value: number;
total?: number;
label?: string;
showPercentage?: boolean;
duration?: number;
className?: string;
}>;
export declare const useAnimatedNumber: (targetValue: number, options?: {
duration?: number;
easing?: "linear" | "easeIn" | "easeOut" | "easeInOut";
decimals?: number;
}) => {
value: number;
isAnimating: boolean;
animateTo: (newValue: number) => void;
};
//# sourceMappingURL=GlassAnimatedNumber.d.ts.map