{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats",
  "type": "registry:block",
  "title": "Stats",
  "description": "A row of key numbers or metrics as a description list. You can give a spoken form for abbreviated values.",
  "categories": [
    "section"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/container.json",
    "https://facadeui.dev/r/section.json",
    "https://facadeui.dev/r/section-header.json",
    "https://facadeui.dev/r/stat.json",
    "https://facadeui.dev/r/types.json",
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/sections/stats.tsx",
      "type": "registry:component",
      "target": "components/sections/stats.tsx",
      "content": "/**\n * Stats — a row of headline figures.\n *\n * a11y: the figures are a `<dl>`, with each `Stat` contributing a `dt`/`dd`\n * pair. A description list is the only markup that actually expresses \"this\n * number means this thing\"; a grid of `<div>`s leaves a screen-reader user with\n * a run of bare numbers. `Stat` puts the label before the value in the DOM for\n * the same reason, and `srValue` exists so \"1.2K\" is read as \"1200\".\n *\n * Dependencies: react, @/lib/types, @/lib/utils,\n * @/components/ui/container, @/components/ui/section, @/components/ui/section-header,\n * @/components/ui/stat.\n */\n\nimport type { ElementType } from \"react\"\n\nimport type { ListSlotProps, SectionBaseProps } from \"@/lib/types\"\nimport { cn, slugId } from \"@/lib/utils\"\nimport { Container } from \"@/components/ui/container\"\nimport { Section } from \"@/components/ui/section\"\nimport { SectionHeader } from \"@/components/ui/section-header\"\nimport { Stat, type StatItem } from \"@/components/ui/stat\"\n\nexport interface StatsProps extends SectionBaseProps, ListSlotProps {\n  items: StatItem[]\n  title?: string\n  eyebrow?: string\n  description?: string\n  size?: \"sm\" | \"md\" | \"lg\"\n  align?: \"start\" | \"center\"\n  /** `plain` has no background. `card` gives each number a border and background. */\n  variant?: \"plain\" | \"card\" | \"divided\"\n}\n\nexport function Stats({\n  items,\n  title,\n  eyebrow,\n  description,\n  size = \"md\",\n  align = \"center\",\n  variant = \"plain\",\n  listAs,\n  itemAs,\n  headingLevel = 2,\n  as,\n  spacing = \"md\",\n  className,\n  id,\n}: StatsProps) {\n  // The list slot must render a <dl>, not a <ul> — see the header.\n  const List = (listAs ?? \"dl\") as ElementType\n  const titleId = title ? (id ? `${id}-title` : slugId(title)) : undefined\n\n  const columns =\n    items.length <= 2\n      ? \"sm:grid-cols-2\"\n      : items.length === 3\n        ? \"sm:grid-cols-3\"\n        : \"sm:grid-cols-2 lg:grid-cols-4\"\n\n  return (\n    <Section\n      as={as ?? (title ? \"section\" : \"div\")}\n      spacing={spacing}\n      labelledBy={titleId}\n      id={id}\n      className={className}\n    >\n      <Container className=\"flex flex-col gap-12\">\n        {title ? (\n          <SectionHeader\n            align={align}\n            eyebrow={eyebrow}\n            title={title}\n            description={description}\n            headingLevel={headingLevel}\n            titleId={titleId}\n          />\n        ) : null}\n\n        <List\n          className={cn(\n            \"grid gap-8\",\n            columns,\n            variant === \"divided\" && \"sm:divide-border sm:gap-0 sm:divide-x\",\n          )}\n        >\n          {/*\n            `itemAs` becomes Stat's *own* wrapper rather than an element around\n            it. A <dl> permits at most one level of div between itself and a\n            dt/dd pair, so wrapping would produce invalid markup — which is\n            exactly what the axe run caught when it did.\n          */}\n          {items.map((item) => (\n            <Stat\n              key={item.label}\n              {...item}\n              as={itemAs}\n              size={size}\n              align={align}\n              className={cn(\n                variant === \"card\" &&\n                  \"bg-card text-card-foreground rounded-xl border p-6\",\n                variant === \"divided\" && \"sm:px-8\",\n              )}\n            />\n          ))}\n        </List>\n      </Container>\n    </Section>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Set headingLevel to fit the page outline (sections default to h2). Pass next/link and next/image through the link and image props. Docs: https://facadeui.dev/components/stats"
}