{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"progress","type":"registry:component","title":"Progress","description":"Progress bar that fills with scale instead of width, plus an indeterminate state for unknown durations.","author":"Ryan","dependencies":["clsx","tailwind-merge"],"registryDependencies":[],"files":[{"path":"components/motion/progress.tsx","type":"registry:component","target":"@components/motion/progress.tsx","content":"// easeui.dev/components/motion/progress\nimport { cn } from \"@/lib/utils\";\n\nexport interface ProgressProps {\n  /** 0 to 100. Omitted, the bar runs indeterminate. */\n  value?: number;\n  /** Shows the percentage above the bar. Ignored when indeterminate. Default false. */\n  showValue?: boolean;\n  className?: string;\n}\n\n/** A progress bar that fills with scale, not width, so it stays cheap to animate. */\nexport function Progress({ value, showValue = false, className }: ProgressProps) {\n  const clamped = value === undefined ? undefined : Math.min(100, Math.max(0, value));\n\n  return (\n    <div className={cn(\"flex flex-col gap-1.5\", className)}>\n      {showValue && clamped !== undefined ? (\n        <span className=\"text-right text-xs tabular-nums text-muted-foreground\">\n          {Math.round(clamped)}%\n        </span>\n      ) : null}\n      <div\n        role=\"progressbar\"\n        aria-valuenow={clamped}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        className=\"h-2 w-full overflow-hidden rounded-full bg-muted shadow-[0_0_0_1px_var(--border)]\"\n      >\n        <div\n          className={cn(\n            \"h-full w-full origin-left rounded-full bg-foreground\",\n            clamped === undefined\n              ? \"scale-x-[0.4] animate-progress-indeterminate motion-reduce:animate-none\"\n              : \"transition-transform duration-300 ease-out motion-reduce:transition-none\",\n          )}\n          style={clamped === undefined ? undefined : { transform: `scaleX(${clamped / 100})` }}\n        />\n      </div>\n    </div>\n  );\n}\n"},{"path":"lib/utils.ts","type":"registry:lib","target":"@lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n"}]}