claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
47 lines • 1.49 kB
TypeScript
interface SparklineDataPoint {
x: number | string | Date;
y: number;
}
interface ComparisonData {
value: number;
label: string;
change?: number;
changeLabel?: string;
}
interface Props {
value: string | number;
label: string;
description?: string;
sparklineData?: SparklineDataPoint[];
target?: ComparisonData;
previous?: ComparisonData;
variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
size?: 'sm' | 'md' | 'lg';
animated?: boolean;
isLoading?: boolean;
formatValue?: (value: number) => string;
onclick?: () => void;
class?: string;
'data-testid'?: string;
}
/**
* KpiCard
*
* Enhanced KPI card with sparklines, animations, and ADHD-optimized design.
*
* @prop {string|number} value - Current KPI value
* @prop {string} label - KPI label
* @prop {string} [description] - Optional description
* @prop {Array} [sparklineData] - Data for sparkline chart
* @prop {Object} [target] - Target comparison data
* @prop {Object} [previous] - Previous period comparison data
* @prop {string} [variant] - Visual variant
* @prop {string} [size] - Card size
* @prop {boolean} [animated] - Enable value animation
* @prop {boolean} [isLoading] - Loading state
* @prop {Function} [onclick] - Click handler
*/
declare const KpiCard: import("svelte").Component<Props, {}, "">;
type KpiCard = ReturnType<typeof KpiCard>;
export default KpiCard;
//# sourceMappingURL=KpiCard.svelte.d.ts.map