import * as React from 'react';
import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-DmVsuoHE.js';
import { A as ActionConfig } from './blocks-XLPGq8A5.js';
import 'react/jsx-runtime';
import 'class-variance-authority';
import './button-variants-CdNtNOuP.js';
import 'class-variance-authority/types';

interface ListMetricItem {
    /**
     * Unique identifier for the metric
     */
    id: string;
    /**
     * Icon name for the metric (e.g., "lucide/zap")
     */
    icon?: string;
    /**
     * Display name of the metric
     */
    name?: string;
    /**
     * Current value of the metric
     */
    value?: string;
    /**
     * Previous value for comparison
     */
    previousValue?: string;
    /**
     * Percentage change from previous value
     */
    changePercentage?: number;
    /**
     * Status indicator for styling
     */
    status?: "positive" | "negative" | "neutral" | "warning";
    /**
     * Category for filtering
     */
    category?: string;
    /**
     * Additional info tooltip text
     */
    info?: string;
}
interface ListMetricsDashboardProps {
    /**
     * Badge content displayed above the heading
     */
    badge?: React.ReactNode;
    /**
     * Custom slot for rendering badge (overrides badge)
     */
    badgeSlot?: React.ReactNode;
    /**
     * Additional CSS classes for the badge
     */
    badgeClassName?: string;
    /**
     * Main heading content
     */
    heading?: React.ReactNode;
    /**
     * Additional CSS classes for the heading
     */
    headingClassName?: string;
    /**
     * Description content below the heading
     */
    description?: React.ReactNode;
    /**
     * Additional CSS classes for the description
     */
    descriptionClassName?: string;
    /**
     * Array of metric items to display
     */
    metrics?: ListMetricItem[];
    /**
     * Custom slot for rendering metrics (overrides metrics array)
     */
    metricsSlot?: React.ReactNode;
    /**
     * Additional CSS classes for the metrics container
     */
    metricsClassName?: string;
    /**
     * Categories for tab filtering
     */
    categories?: {
        value: string;
        label: string;
    }[];
    /**
     * Last updated content
     */
    lastUpdated?: React.ReactNode;
    /**
     * Additional CSS classes for the last updated text
     */
    lastUpdatedClassName?: string;
    /**
     * Dashboard action configuration
     */
    dashboardAction?: ActionConfig;
    /**
     * Custom slot for rendering dashboard action (overrides dashboardAction)
     */
    dashboardActionSlot?: React.ReactNode;
    /**
     * Additional CSS classes for the dashboard action
     */
    dashboardActionClassName?: string;
    /**
     * Additional CSS classes for the card
     */
    cardClassName?: string;
    /**
     * Additional CSS classes for the tabs
     */
    tabsClassName?: string;
    /**
     * Additional CSS classes for the header section
     */
    headerClassName?: string;
    /**
     * Additional CSS classes for the footer section
     */
    footerClassName?: string;
    /**
     * Additional CSS classes for the section wrapper
     */
    className?: string;
    /**
     * Background style for the section
     */
    background?: SectionBackground;
    /**
     * Vertical spacing for the section
     */
    spacing?: SectionSpacing;
    /**
     * Optional background pattern name or URL
     */
    pattern?: PatternName | undefined;
    /**
     * Pattern overlay opacity (0-1)
     */
    patternOpacity?: number;
    /**
     * Controlled active tab value
     */
    activeCategory?: string;
    /**
     * Callback when active category changes
     */
    onActiveCategoryChange?: (category: string) => void;
}
/**
 * ListMetricsDashboard - A comprehensive metrics dashboard with tabbed category filtering,
 * status indicators, change percentages, and tooltips. Features a mobile-friendly dropdown
 * for category selection and a responsive grid layout for metric items.
 *
 * Perfect for admin dashboards, analytics pages, or status monitoring displays
 * showcasing KPIs across multiple categories like performance, security, users, and business.
 *
 * @example
 * ```tsx
 * <ListMetricsDashboard
 *   badge="System Metrics"
 *   heading="Platform Health & Performance"
 *   description="Key metrics across our infrastructure, security, and business operations."
 *   metrics={[
 *     {
 *       id: "uptime",
 *       icon: "lucide/server",
 *       name: "System Uptime",
 *       value: "99.99%",
 *       changePercentage: 0.02,
 *       status: "positive",
 *       category: "performance"
 *     }
 *   ]}
 *   dashboardAction={{ label: "View complete dashboard", href: "/dashboard" }}
 * />
 * ```
 */
declare function ListMetricsDashboard({ badge, badgeSlot, badgeClassName, heading, headingClassName, description, descriptionClassName, metrics, metricsSlot, metricsClassName, categories, lastUpdated, lastUpdatedClassName, dashboardAction, dashboardActionSlot, dashboardActionClassName, cardClassName, tabsClassName, headerClassName, footerClassName, className, background, spacing, pattern, patternOpacity, activeCategory: controlledActiveCategory, onActiveCategoryChange, }: ListMetricsDashboardProps): React.JSX.Element;

export { ListMetricsDashboard, type ListMetricsDashboardProps };
