MetricRow

El componente, montado

Cargando el chunk del paquete instalado…

De dónde se importa

import { MetricRow } from '@solu30/ui-kit/display'

Props

Ejemplo del paquete

import { resolveLucideIcon } from '@solu30/ui-kit/dynamic-icon'
<EmptyState iconName="package" resolveIcon={resolveLucideIcon} title="No packages" />
/
resolveIcon?: (name: string) => IconComponent$1 | undefined;
/** Main title text */
title: string;
/** Description text below title */
message?: string;
/** Secondary description */
description?: string;
/** Single action button (legacy, use actions for multi-button) */
action?: EmptyStateAction;
/** Multiple action buttons rendered in a row */
actions?: EmptyStateAction[];
/** Visual variant */
variant?: "default" | "dashed" | "inline";
/** Additional CSS classes */
className?: string;
}
declare const emptyStateVariants: tailwind_variants.TVReturnType<{
variant: {
default: string;
dashed: string;
inline: string;
};
}, undefined, "flex flex-col items-center justify-center text-center", {
variant: {
default: string;
dashed: string;
inline: string;
};
}, undefined, tailwind_variants.TVReturnType<{
variant: {
default: string;
dashed: string;
inline: string;
};
}, undefined, "flex flex-col items-center justify-center text-center", unknown, unknown, undefined>>;
type EmptyStateVariantProps = VariantProps<typeof emptyStateVariants>;
declare function EmptyState({ icon: Icon, iconName, resolveIcon, title, message, description, action, actions, variant, className, }: EmptyStateProps): react_jsx_runtime.JSX.Element;
interface StatCardProps {
/** Icon component */
icon: React.ComponentType<{
className?: string;
}>;
/** Icon CSS color */
iconColor?: string;
/** Icon background CSS color/class */
iconBg?: string;
/** Card title */
title: string;
/** Main value (number or string) */
value: ReactNode;
/** Description text below value */
description?: string;
/** Trend indicator */
trend?: {
value: number;
label?: string;
direction: "up" | "down";
};
className?: string;
}
declare function StatCard({ icon: Icon, iconColor, iconBg, title, value, description, trend, className, }: StatCardProps): react_jsx_runtime.JSX.Element;
declare const COLOR_TOKENS: {
readonly default: {
readonly ring: "ring-ui-border";
readonly iconBg: "bg-inner";
readonly iconText: "text-content/60";
readonly trend: "bg-inner text-content/60";
};
readonly success: {
readonly ring: "ring-ui-success-border";
readonly iconBg: "bg-ui-success-bg";
readonly iconText: "text-ui-success";
readonly trend: "bg-ui-success-bg text-ui-success";
};
readonly warning: {
readonly ring: "ring-ui-warning-border";
readonly iconBg: "bg-ui-warning-bg";
readonly iconText: "text-ui-warning";
readonly trend: "bg-ui-warning-bg text-ui-warning";
};
readonly error: {
readonly ring: "ring-ui-error-border";
readonly iconBg: "bg-ui-error-bg";
readonly iconText: "text-ui-error";
readonly trend: "bg-ui-error-bg text-ui-error";
};
readonly info: {
readonly ring: "ring-ui-info-border";
readonly iconBg: "bg-ui-info-bg";
readonly iconText: "text-ui-info";
readonly trend: "bg-ui-info-bg text-ui-info";
};
readonly accent: {
readonly ring: "ring-ui-accent";
readonly iconBg: "bg-primary-muted";
readonly iconText: "text-ui-accent";
readonly trend: "bg-primary-muted text-ui-accent";
};
};
declare const metricCardVariants: tailwind_variants.TVReturnType<{
size: {
sm: {
root: string;
iconWrap: string;
icon: string;
value: string;
};
md: {
root: string;
iconWrap: string;
icon: string;
value: string;
};
};
}, {
root: string[];
iconWrap: string;
icon: string;
body: string;
label: string;
valueRow: string;
value: string;
trendBadge: string;
sub: string;
}, undefined, {
size: {
sm: {
root: string;
iconWrap: string;
icon: string;
value: string;
};
md: {
root: string;
iconWrap: string;
icon: string;
value: string;
};
};
}, {
root: string[];
iconWrap: string;
icon: string;
body: string;
label: string;
valueRow: string;
value: string;
trendBadge: string;
sub: string;
}, tailwind_variants.TVReturnType<{
size: {
sm: {
root: string;
iconWrap: string;
icon: string;
value: string;
};
md: {
root: string;
iconWrap: string;
icon: string;
value: string;
};
};
}, {
root: string[];
iconWrap: string;
icon: string;
body: string;
label: string;
valueRow: string;
value: string;
trendBadge: string;
sub: string;
}, undefined, unknown, unknown, undefined>>;
type MetricCardVariantProps = VariantProps<typeof metricCardVariants>;
type MetricCardColor = keyof typeof COLOR_TOKENS;
interface MetricCardProps {
/** Metric label — shown above the value in uppercase */
label: string;
/** Main value — already-formatted string or raw number */
value: string | number;
/** Secondary text shown below the value (e.g. "vs. mes anterior") */
sub?: string;
/** Optional lucide-compatible icon component */
icon?: React.ComponentType<{
className?: string;
}>;
/** Semantic color — drives icon bg, icon text, and trend badge */
color?: MetricCardColor;
/** Trend direction — renders a directional glyph before trendValue */
trend?: "up" | "down" | "neutral";
/** Pre-formatted trend label — e.g. "+12%" or "3 productos" */
trendValue?: string;
/** Card size — sm for dense grids, md for standalone cards */
size?: "sm" | "md";
className?: string;
}
declare function MetricCard({ label, value, sub, icon: Icon, color, trend, trendValue, size, className, }: MetricCardProps): react_jsx_runtime.JSX.Element;
interface MetricRowProps {
label: string;
value: string | number;
trend?: number;
trendPositiveIsGood?: boolean;
icon?: ReactNode;
className?: string;
}
/**
Fila de métrica de ancho completo: label pegado a un borde, valor al otro.
Para cifras que tienen que entrar en el MISMO renglón que otro contenido
(chips de un header, por ejemplo) usar `InlineStat` — ADR-253.

Del @example del JSDoc de @solu30/ui-kit, sin editar. Cuatro de los 69 ejemplos del paquete traen pegada la firma cruda del .d.ts —el mismo defecto del extractor que se come las descripciones—, y por eso la caja tiene tope de alto: el ejemplo de verdad suele estar al final.