{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-13",
  "type": "registry:block",
  "title": "Stats with Segmented Progress",
  "description": "A stats with segmented progress block.",
  "author": "ephraim duncan <https://ephraimduncan.com>",
  "registryDependencies": [
    "card"
  ],
  "dependencies": [],
  "files": [
    {
      "path": "content/components/stats/stats-13.tsx",
      "type": "registry:component",
      "target": "components/stats-13.tsx",
      "content": "'use client';\n\nimport { Card, CardContent } from '@/components/ui/card';\nimport { cn } from '@/lib/utils';\n\ninterface Props {\n  title?: string;\n  used?: number;\n  total?: number;\n  usedLabel?: string;\n  totalLabel?: string;\n  segments?: {\n    label: string;\n    value: number;\n    color: string;\n  }[];\n  className?: string;\n}\n\nconst defaultSegments: NonNullable<Props['segments']> = [\n  { label: 'Documents', value: 2400, color: 'bg-blue-500' },\n  { label: 'Photos', value: 1800, color: 'bg-emerald-500' },\n  { label: 'Videos', value: 3200, color: 'bg-amber-500' },\n  { label: 'Music', value: 900, color: 'bg-purple-500' },\n];\n\nexport default function Stats13({\n  title = 'Using Storage',\n  used = 8300,\n  total = 15,\n  usedLabel = 'MB',\n  totalLabel = 'GB',\n  segments = defaultSegments,\n  className,\n}: Props) {\n  const totalValue = total * 1000;\n  const freeValue = totalValue - used;\n\n  return (\n    <Card className={cn('w-full max-w-4xl shadow-sm', className)}>\n      <CardContent className=\"py-0\">\n        <p className=\"mb-4 text-pretty text-base text-muted-foreground\">\n          {title}{' '}\n          <span className=\"font-semibold text-foreground tabular-nums\">\n            {used.toLocaleString(undefined, {\n              minimumFractionDigits: 0,\n              maximumFractionDigits: 2,\n            })}{' '}\n            {usedLabel}\n          </span>{' '}\n          of {total} {totalLabel}\n        </p>\n\n        <div className=\"mb-4 flex h-2.5 w-full overflow-hidden rounded-full bg-muted\">\n          {segments.map((segment) => {\n            const percentage = (segment.value / totalValue) * 100;\n            return (\n              <div\n                aria-label={segment.label}\n                aria-valuemax={totalValue}\n                aria-valuemin={0}\n                aria-valuenow={segment.value}\n                className={cn('h-full', segment.color)}\n                key={segment.label}\n                role=\"progressbar\"\n                style={{ width: `${percentage}%` }}\n              />\n            );\n          })}\n        </div>\n\n        <div className=\"flex flex-wrap items-center gap-x-8 gap-y-2\">\n          {segments.map((segment) => (\n            <div className=\"flex items-center gap-2\" key={segment.label}>\n              <span\n                aria-hidden=\"true\"\n                className={cn('size-3 shrink-0 rounded', segment.color)}\n              />\n              <span className=\"text-muted-foreground text-sm\">\n                {segment.label}\n              </span>\n              <span className=\"text-muted-foreground text-sm tabular-nums\">\n                {Math.round(segment.value)}\n                {usedLabel}\n              </span>\n            </div>\n          ))}\n          <div className=\"flex items-center gap-2\">\n            <span\n              aria-hidden=\"true\"\n              className=\"size-3 shrink-0 rounded-sm bg-muted\"\n            />\n            <span className=\"text-muted-foreground text-sm\">Free</span>\n            <span className=\"text-muted-foreground text-sm tabular-nums\">\n              {Math.round(freeValue)}\n              {usedLabel}\n            </span>\n          </div>\n        </div>\n      </CardContent>\n    </Card>\n  );\n}\n"
    }
  ],
  "categories": [
    "stats"
  ]
}