aura-glass/dist/esm/components/data-display/GlassMetricChip.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';
import { cn } from '../../lib/utilsComprehensive.js';

function GlassMetricChip({
  label = "Metric",
  value = "--",
  delta,
  intent = "default",
  icon,
  className
}) {
  // TODO: Integrate ContrastGuard for table cells, list items, badges, card titles, and other text content for WCAG AA compliance
  const intentColor = intent === "success" ? "text-emerald-300" : intent === "warning" ? "text-amber-300" : intent === "danger" ? "text-red-300" : "glass-text-primary";
  return jsxs(OptimizedGlassCore, {
    "data-glass-component": true,
    elevation: "level1",
    className: cn("inline-flex items-center glass-gap-2 glass-px-3 glass-py-1.5 glass-radius-xl border border-white/15", className),
    children: [icon && jsx("span", {
      className: 'opacity-80',
      children: icon
    }), jsx("span", {
      className: 'glass-text-xs text-primary/70',
      children: label
    }), jsx("span", {
      className: cn("font-semibold", intentColor),
      children: value
    }), delta && jsx("span", {
      className: 'glass-text-xs text-primary/60',
      children: delta
    })]
  });
}

export { GlassMetricChip, GlassMetricChip as default };
//# sourceMappingURL=GlassMetricChip.js.map