{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bento-metrics-mixed",
  "title": "Bento — Mixed Metrics",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/bento-metrics-mixed/BentoMetricsMixed.tsx",
      "content": "'use client'\n\nimport { ArrowUpRight, CircleCheck } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\n\nconst series = [4, 9, 7, 14, 11, 18, 16, 23, 21, 28, 26, 33]\n\nconst definitions = [\n  { name: 'revenue_net', owner: 'finance' },\n  { name: 'margin_by_channel', owner: 'finance' },\n  { name: 'pipeline_weighted', owner: 'revops' },\n]\n// Inline SVG polyline: a sparkline does not justify a charting dependency.\nfunction points(values: number[]) {\n  const min = Math.min(...values)\n  const max = Math.max(...values)\n  const span = max - min || 1\n  return values\n    .map((value, index) => {\n      const x = (index / (values.length - 1)) * 100\n      const y = 30 - ((value - min) / span) * 26\n      return `${x.toFixed(1)},${y.toFixed(1)}`\n    })\n    .join(' ')\n}\n\nexport function BentoMetricsMixed() {\n  return (\n    <section data-slot=\"bento-metrics-mixed\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-16\">\n        <Badge variant=\"secondary\">At a glance</Badge>\n\n        <div className=\"mt-6 grid gap-3 sm:grid-cols-2 lg:grid-cols-4\">\n          <Card>\n            <CardContent className=\"p-5\">\n              <p className=\"text-muted-foreground text-xs tracking-wide uppercase\">Days to close</p>\n              <p className=\"font-display mt-2 text-3xl font-bold tracking-tight\">4.2</p>\n              <p className=\"text-success mt-1 text-xs\">down from 9.4</p>\n            </CardContent>\n          </Card>\n\n          <Card className=\"sm:col-span-2\">\n            <CardContent className=\"p-5\">\n              <div className=\"flex items-baseline justify-between gap-3\">\n                <p className=\"text-muted-foreground text-xs tracking-wide uppercase\">Certified metrics published</p>\n                <p className=\"font-mono text-xs\">12 months</p>\n              </div>\n              <p className=\"font-display mt-2 text-3xl font-bold tracking-tight\">340</p>\n              <svg\n                className=\"text-primary/70 mt-2 h-8 w-full\"\n                viewBox=\"0 0 100 32\"\n                preserveAspectRatio=\"none\"\n                aria-hidden=\"true\"\n              >\n                <polyline points={points(series)} fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n              </svg>\n            </CardContent>\n          </Card>\n\n          <Card>\n            <CardContent className=\"flex h-full flex-col p-5\">\n              <p className=\"text-muted-foreground text-xs tracking-wide uppercase\">Status</p>\n              <div className=\"mt-3 flex items-center gap-2\">\n                <CircleCheck className=\"text-success size-4\" aria-hidden=\"true\" />\n                <p className=\"text-sm font-medium\">All systems operational</p>\n              </div>\n              <p className=\"text-muted-foreground mt-auto pt-3 font-mono text-xs\">99.98% · rolling 90 days</p>\n            </CardContent>\n          </Card>\n\n          <Card className=\"sm:col-span-2\">\n            <CardContent className=\"p-5\">\n              <p className=\"text-muted-foreground text-xs tracking-wide uppercase\">Most-read definitions</p>\n              <ul className=\"mt-3 space-y-2\">\n                {definitions.map((definition) => (\n                  <li key={definition.name} className=\"flex items-center justify-between gap-3\">\n                    <span className=\"min-w-0 truncate font-mono text-xs\">{definition.name}</span>\n                    <span className=\"text-muted-foreground shrink-0 text-xs\">{definition.owner}</span>\n                  </li>\n                ))}\n              </ul>\n            </CardContent>\n          </Card>\n\n          <Card className=\"sm:col-span-2\">\n            <CardContent className=\"flex h-full flex-col justify-between gap-4 p-5 sm:flex-row sm:items-center\">\n              <div className=\"min-w-0\">\n                <p className=\"text-sm font-medium\">See the whole workspace</p>\n                <p className=\"text-muted-foreground mt-1 text-xs\">Live demo, no signup, real definitions.</p>\n              </div>\n              <Button variant=\"outline\" size=\"sm\" className=\"shrink-0\">\n                Open the demo\n                <ArrowUpRight className=\"ml-1.5 size-3.5\" aria-hidden=\"true\" />\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n\n        <Separator className=\"mt-6\" />\n        <p className=\"text-muted-foreground mt-4 text-xs\">Figures from the Northwind workspace, refreshed hourly.</p>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/BentoMetricsMixed.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Five-tile bento mixing headline numbers, an inline sparkline, a short list, and a status tile, for the summary band beneath a hero.",
  "categories": [
    "marketing"
  ]
}