claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
48 lines • 1.57 kB
TypeScript
interface Comparison {
label: string;
value: number | string;
change?: number;
changeType?: 'percentage' | 'absolute';
variant?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
icon?: string;
}
interface IconConfig {
name: string;
color?: string;
background?: string;
}
interface Props {
value: string | number;
label: string;
subtitle?: string;
comparisons?: Comparison[];
format?: 'number' | 'currency' | 'percentage' | 'bytes' | 'custom';
customFormatter?: (value: number) => string;
variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
size?: 'sm' | 'md' | 'lg';
icon?: IconConfig;
isLoading?: boolean;
onclick?: () => void;
class?: string;
'data-testid'?: string;
}
/**
* StatCard
*
* Statistical display card with comparison metrics and ADHD-friendly visual hierarchy.
*
* @prop {string|number} value - Primary statistic value
* @prop {string} label - Statistic label
* @prop {string} [subtitle] - Optional subtitle
* @prop {Array} [comparisons] - Array of comparison metrics
* @prop {string} [format] - Value formatting type
* @prop {string} [variant] - Visual variant
* @prop {string} [size] - Card size
* @prop {Object} [icon] - Icon configuration
* @prop {boolean} [isLoading] - Loading state
* @prop {Function} [onclick] - Click handler
*/
declare const StatCard: import("svelte").Component<Props, {}, "">;
type StatCard = ReturnType<typeof StatCard>;
export default StatCard;
//# sourceMappingURL=StatCard.svelte.d.ts.map