{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-1",
  "title": "Stats 1: headline metrics with trends",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Four large numbers in a hairline grid that count up on scroll, each with a change badge, a small trend line and one line of context. Heading and copy sit above.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/number-ticker.json",
    "https://ui.ballmac.com/r/sparkline.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/blocks/stats-1/stats-1.tsx",
      "content": "// Ballmac UI: Stats 1. https://ui.ballmac.com/blocks/stats-1\nimport * as React from \"react\"\nimport { ArrowUpRight } from \"lucide-react\"\n\nimport { NumberTicker } from \"@/components/ballmac/number-ticker\"\nimport { Sparkline } from \"@/components/ballmac/sparkline\"\nimport { cn } from \"@/lib/utils\"\n\ntype Stats1Item = {\n  /** What is being measured. */\n  label: string\n  /** The number to count up to. */\n  value: number\n  /** Text before the number, e.g. \"$\". */\n  prefix?: string\n  /** Text after the number, e.g. \"k\", \"%\" or \"M+\". */\n  suffix?: string\n  /** Digits after the decimal point. */\n  decimals?: number\n  /** Change since the last period, e.g. \"+18.2%\". */\n  delta?: string\n  /** Samples for the small trend line. */\n  trend?: number[]\n  /** Accessible description of the trend line. */\n  trendLabel?: string\n  /** One short sentence of context. */\n  note?: string\n}\n\ntype Stats1Props = Omit<React.ComponentProps<\"section\">, \"title\"> & {\n  /** Label above the heading. */\n  eyebrow?: string\n  /** Section heading. */\n  title?: string\n  /** One or two sentences beside the heading. */\n  description?: string\n  /** The headline numbers. Four fit best. */\n  stats?: Stats1Item[]\n  /** Link under the description. Pass null to hide it. */\n  link?: { label: string; href: string } | null\n}\n\nconst defaults: Stats1Item[] = [\n  { label: \"Teams on Acme\", value: 12480, suffix: \"+\", delta: \"+18%\", trend: [4, 6, 5, 8, 9, 12, 11, 15, 18], trendLabel: \"Teams, last 9 months\", note: \"Up from 10,570 a year ago.\" },\n  { label: \"Invoices paid each month\", value: 3.2, suffix: \"M\", decimals: 1, delta: \"+24%\", trend: [3, 4, 4, 6, 7, 7, 9, 11, 13], trendLabel: \"Invoices, last 9 months\", note: \"Across 41 countries.\" },\n  { label: \"Median payout time\", value: 1.8, suffix: \" days\", decimals: 1, delta: \"−0.6 days\", trend: [9, 8, 8, 6, 5, 5, 4, 3, 3], trendLabel: \"Payout time, last 9 months\", note: \"Down from 2.4 days last quarter.\" },\n  { label: \"Uptime, last 12 months\", value: 99.99, suffix: \"%\", decimals: 2, trend: [99, 99.5, 99.9, 99.9, 99.95, 99.99, 99.99, 99.99, 99.99], trendLabel: \"Uptime, last 9 months\", note: \"Verified by our public status page.\" },\n]\n\nfunction Stats1({\n  eyebrow = \"By the numbers\",\n  title = \"Trusted with real money, every day.\",\n  description = \"Thousands of finance teams use Acme to get paid faster and close the books without the spreadsheet scramble.\",\n  stats = defaults,\n  link = { label: \"Read the customer stories\", href: \"#\" },\n  className,\n  ...props\n}: Stats1Props) {\n  return (\n    <section data-slot=\"stats-1\" className={cn(\"mx-auto max-w-6xl px-4 py-20 sm:px-6 md:py-28\", className)} {...props}>\n      <div className=\"grid gap-6 lg:grid-cols-[1.1fr_1fr] lg:items-end lg:gap-16\">\n        <div>\n          <p className=\"text-muted-foreground text-sm font-medium\">{eyebrow}</p>\n          <h2 className=\"mt-3 text-3xl font-semibold tracking-[-0.035em] text-balance sm:text-4xl lg:text-5xl\">{title}</h2>\n        </div>\n        <div>\n          <p className=\"text-muted-foreground text-lg text-pretty\">{description}</p>\n          {link && (\n            <a href={link.href} className=\"group/link focus-visible:ring-ring/50 mt-4 inline-flex items-center gap-1 rounded-md text-sm font-medium outline-none focus-visible:ring-[3px]\">\n              {link.label}\n              <ArrowUpRight className=\"size-4 transition-transform group-hover/link:translate-x-0.5 group-hover/link:-translate-y-0.5 motion-reduce:transition-none rtl:-scale-x-100 rtl:group-hover/link:-translate-x-0.5\" aria-hidden=\"true\" />\n            </a>\n          )}\n        </div>\n      </div>\n\n      <dl className=\"bg-border mt-12 grid gap-px overflow-hidden rounded-3xl border sm:grid-cols-2 lg:mt-16 lg:grid-cols-4\">\n        {stats.map((s, i) => (\n          <div key={s.label} className=\"bg-card group/stat relative flex flex-col p-6 sm:p-8\">\n            <dt className=\"text-muted-foreground text-sm\">{s.label}</dt>\n            <dd className=\"mt-4 flex flex-col\">\n              <span className=\"flex items-baseline gap-2\">\n                <span className=\"text-5xl font-semibold tracking-[-0.045em] tabular-nums\">\n                  {s.prefix}\n                  <NumberTicker value={s.value} delay={i * 0.08} format={{ minimumFractionDigits: s.decimals ?? 0, maximumFractionDigits: s.decimals ?? 0 }} />\n                  <span className=\"text-3xl\">{s.suffix}</span>\n                </span>\n              </span>\n              <span className=\"mt-2 inline-flex h-5 w-fit items-center gap-1 text-sm font-medium\">\n                {s.delta && (\n                  <>\n                    <ArrowUpRight className=\"text-chart-2 size-3.5 rtl:-scale-x-100\" aria-hidden=\"true\" />\n                    {s.delta}\n                  </>\n                )}\n              </span>\n              {s.trend && (\n                <Sparkline values={s.trend} label={s.trendLabel ?? s.label} height={44} className=\"text-chart-1 mt-6 w-full opacity-80 transition-opacity group-hover/stat:opacity-100\" />\n              )}\n              {s.note && <span className=\"text-muted-foreground mt-4 text-sm text-pretty\">{s.note}</span>}\n            </dd>\n          </div>\n        ))}\n      </dl>\n    </section>\n  )\n}\n\nexport { Stats1, type Stats1Props, type Stats1Item }\n",
      "type": "registry:component",
      "target": "@components/ballmac/blocks/stats-1/stats-1.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "stats",
      "metrics",
      "numbers",
      "social proof",
      "sparkline"
    ],
    "version": "1.0.0",
    "updated": "2026-10-01",
    "ai": {
      "summary": "Social proof as numbers. Pass stats=[{ label, value, prefix?, suffix?, decimals?, delta?, trend?, trendLabel?, note? }].",
      "whenToUse": [
        "Under a hero or logo cloud as proof",
        "Company and about pages"
      ],
      "whenNotToUse": [
        "Live product dashboards (use stat-card or kpi-row)",
        "Numbers you cannot back up"
      ],
      "composesWith": [
        "hero-7",
        "logo-cloud-1",
        "testimonials-2",
        "cta-1"
      ],
      "a11y": [],
      "customization": [
        "stats: omit trend and delta for a plain numbers layout",
        "decimals controls the digits after the point; suffix can be %, k, M+ and so on"
      ]
    },
    "examples": [
      "stats-1-demo",
      "stats-1-simple"
    ],
    "url": "https://ui.ballmac.com/components/stats-1"
  },
  "categories": [
    "blocks",
    "stats"
  ],
  "type": "registry:block"
}