Progess component: Less abstraction and high reusability

[soham2k06]

Currently progress's indicator component seems abstracted and less reusable by default

Still, we can adjust the default added code by shadcn like below:

const Progress = React.forwardRef<
 React.ElementRef<typeof ProgressPrimitive.Root>,
 React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, children, ...props }, ref) => (
 <ProgressPrimitive.Root
  ref={ref}
  className={cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', className)}
  {...props}
 >
  {children}
 </ProgressPrimitive.Root>
));
Progress.displayName = ProgressPrimitive.Root.displayName;

const ProgressIndicator = React.forwardRef<
 React.ElementRef<typeof ProgressPrimitive.Indicator>,
 React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Indicator> & { value?: number }
>(({ className, value, ...props }, ref) => (
 <ProgressPrimitive.Indicator
  ref={ref}
  className={cn('h-full w-full flex-1 bg-primary transition-all', className)}
  style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
  {...props}
 />
));
ProgressIndicator.displayName = ProgressPrimitive.Indicator.displayName;

export { Progress, ProgressIndicator };

Use it like this:

<Progress value={progress} className="w-20 bg-primary-foreground">
  <ProgressIndicator value={progress} className="bg-primary/75" />
</Progress>

If you feel like there is no need to add extra component you can pass all props for indicator like this:
<Progress ... IndicatorProps={...} />
and spread it inside indicator primitive