Progress

pnpm dlx shadcn@latest add @whereui/progress

import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress"<Progress value={65}>  <ProgressLabel>อัปโหลดเอกสาร</ProgressLabel>  <ProgressValue /></Progress>

"use client"import { Progress as ProgressPrimitive } from "@base-ui/react/progress"import { cn } from "cn"function Progress({  className,  children,  value,  ...props}: ProgressPrimitive.Root.Props) {  return (    <ProgressPrimitive.Root      value={value}      data-slot="progress"      className={cn("flex flex-wrap gap-3", className)}      {...props}    >      {children}      <ProgressTrack>        <ProgressIndicator />      </ProgressTrack>    </ProgressPrimitive.Root>  )}function ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {  return (    <ProgressPrimitive.Track      className={cn(        "relative flex h-1 w-full items-center overflow-x-hidden rounded-full bg-muted",        className      )}      data-slot="progress-track"      {...props}    />  )}function ProgressIndicator({  className,  ...props}: ProgressPrimitive.Indicator.Props) {  return (    <ProgressPrimitive.Indicator      data-slot="progress-indicator"      className={cn("h-full bg-primary transition-all", className)}      {...props}    />  )}function ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {  return (    <ProgressPrimitive.Label      className={cn("text-sm font-medium", className)}      data-slot="progress-label"      {...props}    />  )}function ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {  return (    <ProgressPrimitive.Value      className={cn(        "ml-auto text-sm text-muted-foreground tabular-nums",        className      )}      data-slot="progress-value"      {...props}    />  )}export {  Progress,  ProgressTrack,  ProgressIndicator,  ProgressLabel,  ProgressValue,}