goobs-frontend/dist/components/Metric/Card/index.d.ts

A comprehensive React-based libary for building modern web applications

import { default as React } from 'react';
export interface MetricCardProps {
    /** Card title/label - displayed below the value */
    title: string;
    /** Main value to display prominently */
    value: string | number;
    /** When set, replaces `title` as the displayed label and in the aria-label. */
    subtitle?: string;
    /** Optional icon displayed above the value */
    icon?: React.ReactNode;
    /**
     * Optional trend indicator showing change direction.
     * - value: Percentage change (e.g., 12.5 for 12.5%)
     * - isPositive: true shows green up arrow, false shows red down arrow
     */
    trend?: {
        value: number;
        isPositive: boolean;
    };
    /**
     * Stable identifier surfaced as `data-metric-field` on the card. Tests +
     * the harvest target the card via this attribute rather than its visible
     * title, so renaming the title doesn't break selectors.
     */
    dataField?: string;
    /**
     * Style configuration. `theme: 'sacred'` switches to the dark/gold
     * palette via a CSS-module class; other knobs (color, width, padding,
     * radius) are applied as CSS custom-property overrides via inline-style
     * so they don't grow the bundle's class surface for every variant.
     */
    styles?: {
        theme?: string;
        color?: string;
        width?: string;
        height?: string;
        padding?: string;
        borderRadius?: string;
    };
}
/**
 * Compact card for a single KPI / metric value: an optional icon above a
 * prominent value, a label below it, and an optional trend row (green up /
 * red down arrow with percentage). Used standalone in workspaces and as the
 * cell renderer inside `<MetricsAccordion metrics={…}>`. `styles.theme`
 * renders `'sacred'` and `'dark'` verbatim; anything else (including
 * undefined) resolves to the light palette, and the scalar knobs
 * (color/width/height/padding/borderRadius) ride in as CSS custom-property
 * overrides so the CSS-module defaults stay authoritative. The wrapper is a
 * `role="group"` labelled `"<label>: <value>"` and exposes
 * `data-metric-card`, `data-metric-field`, `data-metric-label`,
 * `data-metric-value`, and `data-metric-trend` test selectors.
 */
declare const MetricCard: React.MemoExoticComponent<({ title, value, subtitle, icon, trend, dataField, styles: propStyles, }: MetricCardProps) => React.JSX.Element>;
export default MetricCard;
//# sourceMappingURL=index.d.ts.map