{
  "$schema": "https://abackui.com/schema/registry-item.json",
  "name": "progress",
  "type": "registry:ui",
  "title": "Progress",
  "description": "A determinate or indeterminate bar for work that takes time.",
  "dependencies": [
    "radix-ui"
  ],
  "registryDependencies": [
    "https://abackui.com/r/utils.json"
  ],
  "categories": [
    "Feedback"
  ],
  "docs": "https://abackui.com/docs/components/progress",
  "meta": {
    "status": "beta"
  },
  "files": [
    {
      "path": "components/ui/progress.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Progress as ProgressPrimitive } from \"radix-ui\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport interface ProgressProps extends React.ComponentProps<typeof ProgressPrimitive.Root> {\n  /** Accessible name. A progress bar without a name is not usable. */\n  label?: string;\n  /** Optional visible value, for example `64%`. Enable when the number matters. */\n  showValue?: boolean;\n  indicatorClassName?: string;\n}\n\nfunction Progress({\n  className,\n  value,\n  max = 100,\n  label,\n  showValue = false,\n  indicatorClassName,\n  ...props\n}: ProgressProps) {\n  const bounded = value === null || value === undefined ? null : Math.min(Math.max(value, 0), max);\n  const percent = bounded === null ? 0 : max > 0 ? (bounded / max) * 100 : 0;\n\n  return (\n    <div data-slot=\"progress\" className=\"flex w-full flex-col gap-1.5\">\n      {label || showValue ? (\n        <div className=\"flex items-baseline justify-between gap-3\">\n          {label ? <span className=\"text-sm font-medium text-foreground\">{label}</span> : <span />}\n          {showValue ? (\n            <span className=\"text-xs tabular-nums text-muted-foreground\">\n              {bounded === null ? \"Working\" : `${Math.round(percent)}%`}\n            </span>\n          ) : null}\n        </div>\n      ) : null}\n      <ProgressPrimitive.Root\n        data-slot=\"progress-root\"\n        {...props}\n        value={bounded}\n        max={max}\n        aria-label={label ?? props[\"aria-label\"]}\n        className={cn(\"relative h-1.5 w-full overflow-hidden bg-muted\", className)}\n      >\n        <ProgressPrimitive.Indicator\n          data-slot=\"progress-indicator\"\n          className={cn(\n            \"h-full w-full flex-1 bg-primary-500 transition-transform duration-300 motion-reduce:transition-none\",\n            bounded === null ? \"animate-pulse\" : \"\",\n            indicatorClassName,\n          )}\n          style={{ transform: `translateX(-${100 - percent}%)` }}\n        />\n      </ProgressPrimitive.Root>\n    </div>\n  );\n}\n\nexport { Progress };\n",
      "type": "registry:ui",
      "target": "components/ui/progress.tsx"
    }
  ]
}