@opensite/ui 1.3.2 → 1.3.4

package/dist/list-metrics-dashboard.d.cts

@@ -0,0 +1,191 @@
+import * as React from 'react';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bz_A5vLU.cjs';
+import { A as ActionConfig } from './blocks-Cohq4eio.cjs';
+import 'react/jsx-runtime';
+import 'class-variance-authority';
+import './button-variants-lRElsmTc.cjs';
+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 };

package/dist/list-metrics-dashboard.d.ts

@@ -0,0 +1,191 @@
+import * as React from 'react';
+import { f as SectionBackground, g as SectionSpacing, t as PatternName } from './community-initiatives-Bi_ClKrO.js';
+import { A as ActionConfig } from './blocks-k17uluAz.js';
+import 'react/jsx-runtime';
+import 'class-variance-authority';
+import './button-variants-lRElsmTc.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 };