{
  "title": "Progress",
  "description": "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar with spring motion animations.",
  "name": "motion-progress",
  "dependencies": [
    "motion",
    "@base-ui/react"
  ],
  "registryDependencies": [],
  "type": "registry:ui",
  "files": [
    {
      "path": "components/paceui/motion/progress.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\n\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\";\nimport { type Transition, motion } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface ProgressContextValue {\n    transition?: Transition;\n}\n\nconst ProgressContext = React.createContext<ProgressContextValue>({\n    transition: undefined,\n});\n\nexport interface ProgressProps extends ProgressPrimitive.Root.Props {\n    transition?: Transition;\n}\n\nexport interface ProgressTrackProps extends ProgressPrimitive.Track.Props {}\n\nexport interface ProgressIndicatorProps extends ProgressPrimitive.Indicator.Props {\n    transition?: Transition;\n}\n\nexport interface ProgressLabelProps extends ProgressPrimitive.Label.Props {}\n\nexport interface ProgressValueProps extends ProgressPrimitive.Value.Props {}\n\nfunction Progress({ className, children, value, transition, ...props }: ProgressProps) {\n    const hasTrack = React.Children.toArray(children).some(\n        (child) =>\n            React.isValidElement(child) &&\n            (child.type === ProgressTrack ||\n                (child.props as { \"data-slot\"?: string })?.[\"data-slot\"] === \"progress-track\"),\n    );\n\n    return (\n        <ProgressContext.Provider value={{ transition }}>\n            <ProgressPrimitive.Root\n                value={value}\n                data-slot=\"progress\"\n                className={cn(\"flex flex-wrap gap-3\", className)}\n                {...props}>\n                {children}\n                {!hasTrack && (\n                    <ProgressTrack>\n                        <ProgressIndicator transition={transition} />\n                    </ProgressTrack>\n                )}\n            </ProgressPrimitive.Root>\n        </ProgressContext.Provider>\n    );\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressTrackProps) {\n    return (\n        <ProgressPrimitive.Track\n            className={cn(\"bg-muted relative flex h-1.5 w-full items-center overflow-x-hidden rounded-full\", className)}\n            data-slot=\"progress-track\"\n            {...props}\n        />\n    );\n}\n\nfunction ProgressIndicator({ className, transition: explicitTransition, ...props }: ProgressIndicatorProps) {\n    const context = React.useContext(ProgressContext);\n    const transition = explicitTransition ??\n        context.transition ?? {\n            type: \"spring\",\n            stiffness: 120,\n            damping: 18,\n        };\n\n    return (\n        <ProgressPrimitive.Indicator\n            data-slot=\"progress-indicator\"\n            className={cn(\"bg-primary h-full\", className)}\n            render={(indicatorProps, state) => {\n                const isIndeterminate = state.status === \"indeterminate\";\n\n                if (isIndeterminate) {\n                    return (\n                        <motion.div\n                            {...indicatorProps}\n                            initial={{ x: \"-100%\", width: \"45%\" }}\n                            animate={{ x: \"280%\", width: \"45%\" }}\n                            transition={{\n                                repeat: Infinity,\n                                duration: 1.4,\n                                ease: [0.4, 0, 0.2, 1],\n                            }}\n                            style={{\n                                ...indicatorProps.style,\n                                width: \"45%\",\n                                insetInlineStart: 0,\n                                position: \"absolute\",\n                            }}\n                            className={cn(\"bg-primary h-full rounded-full\", className)}\n                        />\n                    );\n                }\n\n                const targetWidth = indicatorProps.style?.width ?? \"0%\";\n\n                return (\n                    <motion.div\n                        {...indicatorProps}\n                        initial={{ width: 0 }}\n                        whileInView={{ width: targetWidth }}\n                        viewport={{ once: true }}\n                        animate={{ width: targetWidth }}\n                        transition={transition}\n                        style={{\n                            ...indicatorProps.style,\n                            insetInlineStart: 0,\n                            height: \"inherit\",\n                        }}\n                        className={cn(\"bg-primary h-full\", className)}\n                    />\n                );\n            }}\n            {...props}\n        />\n    );\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressLabelProps) {\n    return (\n        <ProgressPrimitive.Label\n            className={cn(\"text-sm font-medium\", className)}\n            data-slot=\"progress-label\"\n            {...props}\n        />\n    );\n}\n\nfunction ProgressValue({ className, ...props }: ProgressValueProps) {\n    return (\n        <ProgressPrimitive.Value\n            className={cn(\"text-muted-foreground ml-auto text-sm tabular-nums\", className)}\n            data-slot=\"progress-value\"\n            {...props}\n        />\n    );\n}\n\nexport { Progress, ProgressTrack, ProgressIndicator, ProgressLabel, ProgressValue };\n"
    }
  ],
  "mcp": {
    "description": "Displays an indicator showing the completion progress of a task. Provides smooth spring width interpolation, viewport reveals, and indeterminate sweeping wave animations.",
    "tags": [
      "component",
      "progress",
      "paceui",
      "animation",
      "loading",
      "bar"
    ]
  }
}