{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "usage-meter",
  "type": "registry:block",
  "title": "Usage meter",
  "description": "Track usage limits for checkout sessions, webhooks, payouts, or subscriptions.",
  "files": [
    {
      "path": "components/lomi-ui/usage-meter.tsx",
      "target": "components/lomi-ui/usage-meter.tsx",
      "type": "registry:component",
      "content": "import * as React from 'react';\n\nexport interface UsageMeterItem {\n  label: string;\n  used: number;\n  limit: number;\n  unit?: string;\n}\n\nexport interface UsageMeterProps {\n  items: UsageMeterItem[];\n  title?: string;\n  description?: string;\n  className?: string;\n}\n\nfunction cn(...classes: Array<string | false | null | undefined>) {\n  return classes.filter(Boolean).join(' ');\n}\n\nfunction usageTone(percent: number) {\n  if (percent >= 90) return 'bg-destructive';\n  if (percent >= 75) return 'bg-amber-500';\n  return 'bg-primary';\n}\n\nexport function UsageMeter({\n  items,\n  title = 'Usage',\n  description = 'Track payment and billing limits before customers hit them.',\n  className,\n}: UsageMeterProps) {\n  return (\n    <section\n      className={cn(\n        'w-full max-w-xl rounded-sm border bg-card p-5 text-card-foreground shadow-sm',\n        className,\n      )}\n    >\n      <h3 className=\"text-base font-semibold\">{title}</h3>\n      <p className=\"mt-1 text-sm text-muted-foreground\">{description}</p>\n      <div className=\"mt-5 space-y-4\">\n        {items.map((item) => {\n          const percent = Math.min(\n            Math.round((item.used / item.limit) * 100),\n            100,\n          );\n          return (\n            <div key={item.label} className=\"space-y-2\">\n              <div className=\"flex items-center justify-between gap-4 text-sm\">\n                <span className=\"font-medium\">{item.label}</span>\n                <span className=\"text-muted-foreground\">\n                  {item.used.toLocaleString()} / {item.limit.toLocaleString()}\n                  {item.unit ? ` ${item.unit}` : ''}\n                </span>\n              </div>\n              <div className=\"h-2 overflow-hidden rounded-full bg-secondary\">\n                <div\n                  className={cn(\n                    'h-full rounded-full transition-all',\n                    usageTone(percent),\n                  )}\n                  style={{ width: `${percent}%` }}\n                />\n              </div>\n            </div>\n          );\n        })}\n      </div>\n    </section>\n  );\n}\n"
    },
    {
      "path": "components/lomi-ui/demo/usage-meter-demo.tsx",
      "target": "components/lomi-ui/demo/usage-meter-demo.tsx",
      "type": "registry:component",
      "content": "import { LomiUiPreview } from '@/components/preview/lomi-ui-preview';\nimport { UsageMeter } from '@/components/lomi-ui/usage-meter';\n\nexport function UsageMeterDemo() {\n  return (\n    <LomiUiPreview variant=\"theme\">\n      <UsageMeter\n        items={[\n          { label: 'Checkout sessions', used: 820, limit: 1000 },\n          { label: 'Payouts', used: 89, limit: 100 },\n        ]}\n      />\n    </LomiUiPreview>\n  );\n}\n"
    }
  ]
}