import type * as React from 'react';
import { type CircularProgressOverflow, type CircularProgressVariant } from './circular-progress';
/**
 * How the percentage is rendered next to the value:
 * - `'auto'` (default): a colored `Tag` for `warning`/`error` variants, plain
 *   "(NN%)" text otherwise. Preserves the original coupling to `progressVariant`.
 * - `'plain'`: always plain "(NN%)" text, regardless of `progressVariant`. Use
 *   when you want a colored progress ring but a neutral percentage (Figma).
 * - `'tag'`: always a colored `Tag`.
 */
export type DashboardInfoCardPercentageDisplay = 'auto' | 'plain' | 'tag';
/**
 * Size of the progress ring in px. A single number sets the ring size from the
 * Tailwind `md` (800px) breakpoint up — on mobile the ring always shrinks to
 * the 24px Figma spec. The responsive form sets `base` (mobile) explicitly,
 * plus optional `md` / `lg` (1280px) overrides — e.g. `{ base: 24, lg: 56 }`
 * keeps the small ring through tablet, and `{ base: 40 }` pins 40px at every
 * breakpoint.
 */
export type DashboardInfoCardProgressSize = number | {
    base: number;
    md?: number;
    lg?: number;
};
export interface DashboardInfoCardProps {
    title?: string;
    /** Node rendered in place of the title text. Takes precedence over `title`. */
    titleSlot?: React.ReactNode;
    /**
     * Tag rendered in the title row, after the title (Figma "status" variant) —
     * e.g. `<Tag variant="outline" label="AI Handling" />` or a TicketStatusTag.
     * Works with or without a `title`.
     */
    titleTag?: React.ReactNode;
    /**
     * Icon or image shown in a bordered square slot on the left (Figma "icon"
     * variant): 32px box / 16px content on mobile, 56px box / 24px content from
     * `md` up. The passed node is stretched to fill the content area, so plain
     * icon components and `<img>` both work.
     */
    icon?: React.ReactNode;
    value: string | number;
    percentage?: number;
    showProgress?: boolean;
    progressVariant?: CircularProgressVariant;
    /**
     * Controls how `percentage` is rendered (Tag vs plain text) independently of
     * the progress-ring color. Default `'auto'`. See {@link DashboardInfoCardPercentageDisplay}.
     */
    percentageDisplay?: DashboardInfoCardPercentageDisplay;
    /**
     * How the progress ring treats values over 100. Forwarded to `CircularProgress`.
     * Default: `'clamp'` — existing behavior (clamped to 0–100).
     * Use `'wrap'` for overage/overflow semantics (excess rendered as a red arc).
     */
    progressOverflow?: CircularProgressOverflow;
    /**
     * Size of the circular progress ring. Defaults to the Figma spec
     * `{ base: 24, md: 56 }` — 24px on mobile, 56px on tablet and desktop. A
     * number changes only the tablet/desktop size (mobile stays 24px); use
     * `{ base, md?, lg? }` for full control. Stroke width scales proportionally
     * with the size.
     */
    progressSize?: DashboardInfoCardProgressSize;
    className?: string;
    /**
     * Navigation URL — renders the card as a Next.js Link
     * When provided, cursor becomes pointer and hover accent styles are applied
     */
    href?: string;
    /** Tooltip content shown on a question-mark icon next to the value */
    tooltip?: React.ReactNode;
    /** Override the value text className (default: `text-h3 md:text-h2` per Figma) */
    valueClassName?: string;
    /** Secondary text rendered beside the value (e.g. an entry/item count). */
    subValue?: React.ReactNode;
}
export declare function DashboardInfoCard({ title, titleSlot, titleTag, icon, value, percentage, showProgress, progressVariant, percentageDisplay, progressOverflow, progressSize, className, href, tooltip, valueClassName, subValue }: DashboardInfoCardProps): React.JSX.Element;
//# sourceMappingURL=dashboard-info-card.d.ts.map