{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "circular-metric-glass",
  "type": "registry:block",
  "title": "Circular Metric Glass",
  "description": "Compact circular progress metric display optimized for mobile layouts.\n * Combines CircularProgressGlass with a label for space-efficient metric visualization.\n *\n * ## Features",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/composite/circular-metric-glass.tsx",
      "type": "registry:component",
      "content": "// ========================================\n// CIRCULAR METRIC GLASS COMPONENT\n// Compact circular metric display for mobile\n// ========================================\n\nimport { forwardRef } from 'react';\nimport { cn } from '@/lib/utils';\nimport {\n  CircularProgressGlass,\n  type CircularProgressGradient,\n} from '../ui/circular-progress-glass';\nimport '@/glass-theme.css';\n\n// ========================================\n// TYPES\n// ========================================\n\nexport type CircularMetricColor = 'emerald' | 'amber' | 'blue' | 'red';\n\n/**\n * Props for CircularMetricGlass component.\n *\n * Extends standard div attributes for maximum flexibility.\n * All props are readonly to ensure immutability.\n *\n * @example\n * ```tsx\n * const props: CircularMetricGlassProps = {\n *   label: 'Reg',\n *   value: 84,\n *   color: 'emerald',\n *   size: 'sm',\n * };\n * ```\n */\nexport interface CircularMetricGlassProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Metric label displayed below the circular progress indicator.\n   *\n   * Typically a short abbreviation (2-6 characters) for mobile-friendly display.\n   * Examples: \"Reg\" (Regression), \"Imp\" (Impact), \"Div\" (Diversity), \"Collab\" (Collaboration).\n   */\n  readonly label: string;\n\n  /**\n   * Metric value as a percentage (0-100).\n   *\n   * Controls the circular progress fill amount.\n   * Displayed as percentage text inside the circle.\n   *\n   * @example\n   * ```tsx\n   * <CircularMetricGlass value={84} /> // Shows \"84%\" at center\n   * ```\n   */\n  readonly value: number;\n\n  /**\n   * Color theme for the metric.\n   *\n   * Maps to semantic color variants:\n   * - `emerald`: Success/positive metrics (--metric-success-*)\n   * - `amber`: Warning/moderate metrics (--metric-warning-*)\n   * - `blue`: Default/neutral metrics (--metric-default-*)\n   * - `red`: Destructive/negative metrics (--metric-destructive-*)\n   *\n   * @default 'blue'\n   */\n  readonly color?: CircularMetricColor;\n\n  /**\n   * Size variant of the circular progress indicator.\n   *\n   * - `sm`: 80px diameter, 6px thickness (mobile-optimized)\n   * - `md`: 112px diameter, 8px thickness (desktop/tablet)\n   *\n   * @default 'sm'\n   */\n  readonly size?: 'sm' | 'md';\n}\n\n// ========================================\n// HELPERS\n// ========================================\n\n// Map CircularMetricColor to CircularProgressGlass gradient and CSS variable\nconst colorMap: Record<\n  CircularMetricColor,\n  { gradient: CircularProgressGradient; textVar: string }\n> = {\n  emerald: { gradient: 'emerald', textVar: 'var(--metric-success-text)' },\n  amber: { gradient: 'amber', textVar: 'var(--metric-warning-text)' },\n  blue: { gradient: 'blue', textVar: 'var(--metric-default-text)' },\n  red: { gradient: 'rose', textVar: 'var(--metric-destructive-text)' },\n};\n\n// ========================================\n// COMPONENT\n// ========================================\n\n/**\n * CircularMetricGlass Component\n *\n * Compact circular progress metric display optimized for mobile layouts.\n * Combines CircularProgressGlass with a label for space-efficient metric visualization.\n *\n * ## Features\n * - Mobile-optimized circular design (80px-112px diameter)\n * - 4 semantic color variants (emerald, amber, blue, red)\n * - Percentage display inside circular progress ring\n * - Label positioned below for clear identification\n * - Glow effects on progress ring (medium intensity)\n * - 2 size variants (sm: 80px, md: 112px)\n * - Grid-friendly layout (2x2 mobile grids)\n * - Automatic color mapping to semantic CSS variables\n * - Customizable via className for additional styling\n * - Full accessibility support via CircularProgressGlass\n *\n * ## CSS Variables\n * Inherits color variables from semantic token system:\n * - `--metric-success-text` - Emerald variant text color\n * - `--metric-warning-text` - Amber variant text color\n * - `--metric-default-text` - Blue variant text color\n * - `--metric-destructive-text` - Red variant text color\n *\n * @example\n * // Basic usage with default settings\n * <CircularMetricGlass label=\"Reg\" value={84} color=\"emerald\" />\n *\n * @example\n * // Larger size for desktop/tablet\n * <CircularMetricGlass\n *   label=\"Impact\"\n *   value={65}\n *   color=\"amber\"\n *   size=\"md\"\n * />\n *\n * @example\n * // Mobile grid layout (2x2)\n * <div className=\"grid grid-cols-2 gap-4\">\n *   <CircularMetricGlass label=\"Reg\" value={84} color=\"emerald\" />\n *   <CircularMetricGlass label=\"Imp\" value={45} color=\"amber\" />\n *   <CircularMetricGlass label=\"Div\" value={78} color=\"blue\" />\n *   <CircularMetricGlass label=\"Collab\" value={12} color=\"red\" />\n * </div>\n *\n * @example\n * // Custom styling with className\n * <CircularMetricGlass\n *   label=\"Score\"\n *   value={92}\n *   color=\"blue\"\n *   className=\"opacity-90 hover:scale-105 transition-transform\"\n * />\n *\n * @accessibility\n * - Inherits CircularProgressGlass accessibility features (aria-valuenow, aria-valuemin, aria-valuemax)\n * - Label text uses semantic color variables for sufficient contrast\n * - Small text size (12px) with medium font weight for readability\n * - Non-interactive display (no keyboard/focus requirements)\n * - Respects user color preferences via CSS variables\n *\n * @since v1.0.0\n */\nexport const CircularMetricGlass = forwardRef<HTMLDivElement, CircularMetricGlassProps>(\n  ({ label, value, color = 'blue', size = 'sm', className, ...props }, ref) => {\n    const { gradient, textVar } = colorMap[color];\n\n    return (\n      <div ref={ref} className={cn('flex flex-col items-center gap-1', className)} {...props}>\n        <CircularProgressGlass\n          value={value}\n          size={size}\n          color={gradient}\n          labelColor={textVar}\n          thickness={size === 'sm' ? 6 : 8}\n          showGlow\n          glowIntensity=\"medium\"\n        />\n        <span className=\"text-xs font-medium\" style={{ color: textVar }}>\n          {label}\n        </span>\n      </div>\n    );\n  }\n);\n\nCircularMetricGlass.displayName = 'CircularMetricGlass';\n"
    }
  ],
  "categories": [
    "composite"
  ]
}