{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "metrics-grid-glass",
  "type": "registry:block",
  "title": "Metrics Grid Glass",
  "description": "Responsive grid layout for displaying multiple MetricCardGlass components.\n * Extracted from TrustScoreCardGlass for reusable metric dashboard layouts.\n *\n * ## Features",
  "dependencies": [
    "react"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/composite/metrics-grid-glass.tsx",
      "type": "registry:component",
      "content": "// ========================================\n// METRICS GRID GLASS - COMPOSITE COMPONENT\n// Responsive grid of metric cards\n// Level 3: Composite (extracted from TrustScoreCardGlass)\n// ========================================\n\nimport { forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '@/lib/utils';\nimport { MetricCardGlass, type MetricVariant } from './metric-card-glass';\nimport '@/glass-theme.css';\n\n/**\n * Metric data structure for MetricsGridGlass.\n *\n * Defines a single metric to be displayed in the grid.\n *\n * @example\n * ```tsx\n * const metric: MetricData = {\n *   title: 'Total Repositories',\n *   value: 42,\n *   variant: 'default',\n * };\n * ```\n */\nexport interface MetricData {\n  /** Metric title/label */\n  readonly title: string;\n  /** Metric value (number or string) */\n  readonly value: string | number;\n  /** Visual variant (default, success, warning, destructive) */\n  readonly variant: MetricVariant;\n}\n\n/**\n * Props for MetricsGridGlass 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: MetricsGridGlassProps = {\n *   metrics: [\n *     { title: 'Total Repos', value: 42, variant: 'default' },\n *     { title: 'Stars', value: '1.2k', variant: 'success' },\n *   ],\n *   columns: 4,\n *   gap: 'md',\n * };\n * ```\n */\nexport interface MetricsGridGlassProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Array of metrics to display in the grid.\n   *\n   * Each metric requires title, value, and variant.\n   * Returns null if array is empty.\n   *\n   * @example\n   * ```tsx\n   * const metrics = [\n   *   { title: 'Commits', value: 1234, variant: 'default' },\n   *   { title: 'Stars', value: '2.5k', variant: 'success' },\n   *   { title: 'Issues', value: 8, variant: 'warning' },\n   *   { title: 'Forks', value: 156, variant: 'default' },\n   * ];\n   * <MetricsGridGlass metrics={metrics} />\n   * ```\n   */\n  readonly metrics: readonly MetricData[];\n\n  /**\n   * Number of columns on desktop breakpoint (1-6).\n   *\n   * Automatically responsive:\n   * - 1: Single column (all breakpoints)\n   * - 2: 1 col mobile, 2 cols sm+\n   * - 3: 1 col mobile, 2 cols sm+, 3 cols md+\n   * - 4: 2 cols mobile, 3 cols sm+, 4 cols md+\n   * - 5: 2 cols mobile, 3 cols sm+, 5 cols md+\n   * - 6: 2 cols mobile, 3 cols sm+, 6 cols md+\n   *\n   * @default 4\n   */\n  readonly columns?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * Gap size between metric cards.\n   *\n   * - `sm`: 0.5rem (8px)\n   * - `md`: 1rem (16px)\n   * - `lg`: 1.5rem (24px)\n   *\n   * @default 'md'\n   */\n  readonly gap?: 'sm' | 'md' | 'lg';\n}\n\n/**\n * MetricsGridGlass Component\n *\n * Responsive grid layout for displaying multiple MetricCardGlass components.\n * Extracted from TrustScoreCardGlass for reusable metric dashboard layouts.\n *\n * ## Features\n * - 6 responsive column configurations (1-6 columns)\n * - Automatic mobile/tablet/desktop breakpoints\n * - 3 gap size variants (sm, md, lg)\n * - Empty array handling (returns null)\n * - Automatic key generation from metric titles\n * - MetricCardGlass integration with variant support\n * - Flexible metric data structure (number or string values)\n * - Theme-aware styling via MetricCardGlass\n * - Customizable via className for grid modifications\n * - Type-safe metric data with readonly arrays\n *\n * ## Responsive Behavior\n * - **1-3 columns:** Start with 1 column on mobile\n * - **4-6 columns:** Start with 2 columns on mobile (more efficient)\n * - **sm breakpoint:** Increase to 2-3 columns\n * - **md breakpoint:** Full column count (1-6)\n *\n * ## CSS Variables\n * Inherits all MetricCardGlass CSS variables:\n * - `--metric-success-*` - Success variant colors\n * - `--metric-warning-*` - Warning variant colors\n * - `--metric-default-*` - Default variant colors\n * - `--metric-destructive-*` - Destructive variant colors\n *\n * @example\n * // Basic 4-column grid with default gap\n * <MetricsGridGlass\n *   metrics={[\n *     { title: 'Commits', value: 1234, variant: 'default' },\n *     { title: 'Stars', value: '2.5k', variant: 'success' },\n *     { title: 'Issues', value: 8, variant: 'warning' },\n *     { title: 'Forks', value: 156, variant: 'default' },\n *   ]}\n * />\n *\n * @example\n * // 3-column grid with large gaps\n * <MetricsGridGlass\n *   metrics={trustScoreMetrics}\n *   columns={3}\n *   gap=\"lg\"\n * />\n *\n * @example\n * // Single column for mobile-only views\n * <MetricsGridGlass\n *   metrics={dashboardMetrics}\n *   columns={1}\n *   gap=\"sm\"\n * />\n *\n * @example\n * // 6-column grid for wide dashboards\n * <MetricsGridGlass\n *   metrics={[\n *     { title: 'Metric 1', value: 100, variant: 'success' },\n *     { title: 'Metric 2', value: 200, variant: 'default' },\n *     { title: 'Metric 3', value: 50, variant: 'warning' },\n *     { title: 'Metric 4', value: 75, variant: 'default' },\n *     { title: 'Metric 5', value: 150, variant: 'success' },\n *     { title: 'Metric 6', value: 10, variant: 'destructive' },\n *   ]}\n *   columns={6}\n * />\n *\n * @accessibility\n * - Semantic HTML grid layout\n * - Inherits MetricCardGlass accessibility features\n * - Responsive breakpoints for mobile/tablet/desktop\n * - Sufficient spacing via gap variants\n * - Color-coded variants with semantic meaning\n * - Non-interactive display (no keyboard requirements)\n *\n * @since v1.0.0\n */\nexport const MetricsGridGlass = forwardRef<HTMLDivElement, MetricsGridGlassProps>(\n  ({ metrics, columns = 4, gap = 'md', className, ...props }, ref) => {\n    const gapClasses = {\n      sm: 'gap-2',\n      md: 'gap-4',\n      lg: 'gap-6',\n    };\n\n    const columnClasses = {\n      1: 'grid-cols-1',\n      2: 'grid-cols-1 sm:grid-cols-2',\n      3: 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3',\n      4: 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4',\n      5: 'grid-cols-2 sm:grid-cols-3 md:grid-cols-5',\n      6: 'grid-cols-2 sm:grid-cols-3 md:grid-cols-6',\n    };\n\n    if (metrics.length === 0) {\n      return null;\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn('grid', columnClasses[columns], gapClasses[gap], className)}\n        {...props}\n      >\n        {metrics.map((metric) => (\n          <MetricCardGlass\n            key={metric.title}\n            title={metric.title}\n            value={metric.value}\n            variant={metric.variant}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nMetricsGridGlass.displayName = 'MetricsGridGlass';\n"
    }
  ],
  "categories": [
    "composite"
  ]
}