{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress",
  "title": "Progress",
  "description": "A progress bar for tasks with a known amount, or an indeterminate one when the amount is unknown.",
  "dependencies": [
    "@radix-ui/react-progress"
  ],
  "registryDependencies": [
    "@corsair-ui/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/progress.tsx",
      "content": "\"use client\";\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\ninterface ProgressProps extends ComponentProps<typeof ProgressPrimitive.Root> {\n  /** How far along the task is, from 0 to `max`. `null` (the default) means the amount is unknown. */\n  value?: number | null;\n  /** The value that means done. */\n  max?: number;\n}\n/**\n * A bar that shows how far a task has got: uploads, installs, multi-step\n * forms. It is a `progressbar` with `aria-valuenow` / `aria-valuemax`, and\n * `getValueLabel` sets the text screen readers read out (a percentage by\n * default). Give it a name with `aria-label` or `aria-labelledby` pointing\n * at a visible label. Pass `value={null}` when the amount is unknown: the\n * bar becomes indeterminate (`data-state=\"indeterminate\"`) and a short\n * segment slides across it; with reduced motion it shows a still,\n * half-opacity bar instead. Values outside 0 to `max` are clamped.\n *\n * @example\n * <Progress value={uploaded} max={total} aria-label=\"Uploading photos\" />\n * <Progress value={null} aria-label=\"Loading results\" />\n */\nfunction Progress({ className, value = null, max = 100, ...props }: ProgressProps) {\n  const limit = max > 0 ? max : 100;\n  const clamped = value === null ? null : Math.min(limit, Math.max(0, value));\n  const percent = clamped === null ? 0 : (clamped / limit) * 100;\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      value={clamped}\n      max={limit}\n      className={cn(\"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full\", className)}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className={cn(\n          \"bg-primary h-full w-full flex-1 transition-transform motion-reduce:transition-none\",\n          // Unknown amount: a 40% segment slides across. With reduced motion the\n          // whole bar stays put at half opacity instead.\n          \"motion-safe:data-[state=indeterminate]:animate-progress-indeterminate motion-safe:data-[state=indeterminate]:w-2/5\",\n          \"motion-reduce:data-[state=indeterminate]:opacity-50\"\n        )}\n        style={clamped === null ? undefined : { transform: `translateX(-${100 - percent}%)` }}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\nexport { Progress, type ProgressProps };\n",
      "type": "registry:ui"
    }
  ],
  "tailwind": {
    "config": {
      "theme": {
        "extend": {
          "keyframes": {
            "progress-indeterminate": {
              "from": {
                "transform": "translateX(-100%)"
              },
              "to": {
                "transform": "translateX(250%)"
              }
            }
          },
          "animation": {
            "progress-indeterminate": "progress-indeterminate 1.5s ease-in-out infinite"
          }
        }
      }
    }
  },
  "cssVars": {
    "theme": {
      "animate-progress-indeterminate": "progress-indeterminate 1.5s ease-in-out infinite"
    }
  },
  "css": {
    "@keyframes progress-indeterminate": {
      "from": {
        "transform": "translateX(-100%)"
      },
      "to": {
        "transform": "translateX(250%)"
      }
    }
  },
  "type": "registry:ui"
}