{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "usage-line",
  "title": "Usage line",
  "description": "Today's quotas in one quiet row, each a figure and a small meter that turns amber near its limit, with the plan and reset time at the end.",
  "registryDependencies": [
    "https://sproutboat.com/ikada/r/theme.json",
    "https://sproutboat.com/ikada/r/cn.json",
    "https://sproutboat.com/ikada/r/format.json",
    "https://sproutboat.com/ikada/r/icons.json",
    "https://sproutboat.com/ikada/r/meter.json",
    "https://sproutboat.com/ikada/r/skeleton.json"
  ],
  "files": [
    {
      "path": "registry/ikada/blocks/usage-line/usage-line.tsx",
      "content": "\"use client\";\n\n/**\n * Today's quotas in one quiet row, each a figure and a small meter that turns amber\n * near its limit, with the plan and reset time at the end. The whole row links to a usage page.\n */\nimport { Meter, usageState } from \"@/components/ikada/meter\";\nimport type { MeterTone } from \"@/components/ikada/meter\";\nimport { Skeleton } from \"@/components/ikada/skeleton\";\nimport { cn, focusRing } from \"@/components/ikada/lib/cn\";\nimport { formatBytes, formatCompact } from \"@/components/ikada/lib/format\";\nimport { ChevronRightIcon, GaugeIcon } from \"@/components/ikada/lib/icons\";\n\nexport interface UsageQuota {\n  id: string;\n  label: string;\n  used: number;\n  limit: number;\n  /** How the figure reads: a count (\"1.2M / 3M\"), bytes (\"640 MB / 1 GB\") or a share of the limit (\"68%\"). */\n  unit: \"count\" | \"bytes\" | \"percent\";\n}\n\nexport interface UsageLineProps {\n  quotas?: UsageQuota[];\n  /** Shown at the end of the row, such as the plan and when the quotas reset. */\n  note?: string;\n  /** Where the row links to. */\n  href?: string;\n  /** Draws placeholders while usage loads. */\n  loading?: boolean;\n  className?: string;\n}\n\n/** Sample data: a Free plan account two thirds through its day, storage nearly full. */\nexport const sampleQuotas: UsageQuota[] = [\n  { id: \"requests\", label: \"Requests\", used: 61_400, limit: 100_000, unit: \"count\" },\n  { id: \"cpu\", label: \"CPU time\", used: 0.42, limit: 1, unit: \"percent\" },\n  { id: \"storage\", label: \"Storage\", used: 912_000_000, limit: 1_000_000_000, unit: \"bytes\" },\n];\n\nfunction figure(q: UsageQuota): string {\n  if (q.unit === \"percent\") return `${Math.round((q.used / q.limit) * 100)}%`;\n  if (q.unit === \"bytes\") return `${formatBytes(q.used)} / ${formatBytes(q.limit)}`;\n  return `${formatCompact(q.used)} / ${formatCompact(q.limit)}`;\n}\n\nfunction tone(q: UsageQuota): MeterTone {\n  const state = usageState(q.used, q.limit);\n  return state === \"near\" || state === \"at\" ? \"warning\" : \"normal\";\n}\n\nfunction Quota({ quota }: { quota: UsageQuota }) {\n  const value = figure(quota);\n  const t = tone(quota);\n  return (\n    <span className=\"inline-flex max-w-full items-center gap-2 whitespace-nowrap\">\n      <span className=\"min-w-0 truncate text-fg-muted\" title={quota.label}>\n        {quota.label}\n      </span>\n      <span className={cn(\"shrink-0 font-semibold tabular-nums\", t === \"warning\" && \"text-warn-fg\")}>{value}</span>\n      <Meter\n        aria-label={`${quota.label}: ${value}`}\n        value={Math.min(quota.used, quota.limit)}\n        max={quota.limit}\n        tone={t}\n        valueLabel={null}\n        className=\"w-14 shrink-0\"\n      />\n    </span>\n  );\n}\n\nexport function UsageLine({\n  quotas = sampleQuotas,\n  note = \"Free plan · resets 00:00 UTC\",\n  href = \"#usage\",\n  loading = false,\n  className,\n}: UsageLineProps) {\n  return (\n    <a\n      href={href}\n      className={cn(\n        \"group @container block rounded-xl bg-surface px-4 py-3 text-sb-sm text-fg shadow-card\",\n        \"transition-shadow duration-(--sb-duration-hover) ease-hover hover:shadow-float\",\n        focusRing,\n        className,\n      )}\n    >\n      {/* Container queries, not breakpoints: the row wraps to fit wherever it is placed. */}\n      <span className=\"flex flex-wrap items-center gap-x-6 gap-y-2.5\">\n        <span className=\"inline-flex items-center gap-2 font-semibold\">\n          <GaugeIcon className=\"text-fg-muted\" />\n          Today\n        </span>\n        {loading ? <Skeleton className=\"h-4 w-[min(28rem,60%)]\" /> : quotas.map((q) => <Quota key={q.id} quota={q} />)}\n        <span className=\"inline-flex items-center gap-1 text-fg-muted @max-3xl:basis-full @3xl:ms-auto\">\n          {note}\n          <ChevronRightIcon className=\"transition-transform duration-(--sb-duration-hover) group-hover:translate-x-0.5\" />\n          <span className=\"sr-only\">. Open the usage page</span>\n        </span>\n      </span>\n    </a>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/ikada/blocks/usage-line/usage-line.tsx"
    }
  ],
  "categories": [
    "dashboard"
  ],
  "type": "registry:block"
}