{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress",
  "title": "Progress",
  "description": "A thin bar for work with a known or unknown length.",
  "registryDependencies": [
    "https://spotcheckui.com/r/spotcheck-base.json"
  ],
  "files": [
    {
      "path": "registry/spotcheck/components/spotcheck/progress.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype ProgressProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** Names the bar for screen readers and prints above it. */\n  label: string\n  /** How far along it is. Leave it out when the amount of work is unknown. */\n  value?: number\n  max?: number\n}\n\nexport function Progress({ label, value, max = 100, className, ...props }: ProgressProps) {\n  const percent = value === undefined ? null : Math.round((Math.min(max, Math.max(0, value)) / max) * 100)\n\n  return (\n    <div className={cn(\"flex flex-col gap-1 font-(family-name:--f-body)\", className)} {...props}>\n      <div className=\"flex justify-between\">\n        <span className=\"spotcheck-label\">{label}</span>\n        {percent !== null && <span className=\"spotcheck-label tabular-nums\">{percent}%</span>}\n      </div>\n      <div\n        role=\"progressbar\"\n        aria-label={label}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        className=\"bg-wash h-1.5\"\n      >\n        <div\n          className={cn(\n            \"bg-accent-ink h-full transition-[width] duration-300 motion-reduce:transition-none\",\n            percent === null && \"animate-pulse motion-reduce:animate-none\",\n          )}\n          style={{ width: `${percent ?? 100}%` }}\n        />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "core"
  ],
  "type": "registry:component"
}