{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress",
  "type": "registry:ui",
  "description": "Visualize task completion progress with a percentage indicator.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "components/ui/progress.tsx",
      "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Progress as BaseProgress } from \"@base-ui/react/progress\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\ntype ProgressProps = React.ComponentPropsWithoutRef<typeof BaseProgress.Root> & {\r\n    showValue?: boolean\r\n}\r\n\r\nconst Progress = React.forwardRef<\r\n    React.ComponentRef<typeof BaseProgress.Root>,\r\n    ProgressProps\r\n>(({ className, value, showValue = true, ...props }, ref) => {\r\n    const percentage = value ?? 0\r\n\r\n    return (\r\n        <BaseProgress.Root\r\n            ref={ref}\r\n            value={value}\r\n            className={cn(\"relative w-full pt-10\", className)}\r\n            {...props}\r\n        >\r\n            {showValue && (\r\n                <div\r\n                    className=\"absolute top-0 -translate-x-1/2 transition-[left] duration-300 motion-reduce:transition-none\"\r\n                    style={{ left: `${percentage}%` }}\r\n                >\r\n                    <span className=\"relative inline-flex items-center rounded-base border-2 border-black bg-white px-2 py-0.5 text-xs font-medium text-black\">\r\n                        {percentage}%\r\n                        <svg\r\n                            className=\"absolute -bottom-2 left-1/2 -translate-x-1/2\"\r\n                            width=\"10\"\r\n                            height=\"8\"\r\n                            viewBox=\"0 0 10 8\"\r\n                            fill=\"none\"\r\n                            aria-hidden=\"true\"\r\n                        >\r\n                            <path d=\"M5 8L0 0H10L5 8Z\" className=\"fill-black\" />\r\n                            <path\r\n                                d=\"M0 0L5 8L10 0\"\r\n                                stroke=\"black\"\r\n                                strokeWidth=\"2\"\r\n                                strokeLinejoin=\"round\"\r\n                            />\r\n                        </svg>\r\n                    </span>\r\n                </div>\r\n            )}\r\n            <BaseProgress.Track className=\"relative h-3 w-full overflow-hidden rounded-base border-2 border-black bg-white\">\r\n                <BaseProgress.Indicator className=\"h-full bg-main transition-[width,transform] duration-300 motion-reduce:transition-none\" />\r\n            </BaseProgress.Track>\r\n        </BaseProgress.Root>\r\n    )\r\n})\r\nProgress.displayName = \"Progress\"\r\n\r\nconst ProgressLabel = React.forwardRef<\r\n    React.ComponentRef<typeof BaseProgress.Label>,\r\n    React.ComponentPropsWithoutRef<typeof BaseProgress.Label>\r\n>(({ className, ...props }, ref) => (\r\n    <BaseProgress.Label\r\n        ref={ref}\r\n        className={cn(\"text-sm font-bold text-black\", className)}\r\n        {...props}\r\n    />\r\n))\r\nProgressLabel.displayName = \"ProgressLabel\"\r\n\r\nexport { Progress, ProgressLabel }\r\n",
      "type": "registry:ui"
    }
  ]
}