19 lines
1.6 KiB
JSON
19 lines
1.6 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "radix-progress",
|
|
"type": "registry:ui",
|
|
"title": "Progress",
|
|
"description": "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
|
|
"dependencies": [
|
|
"motion",
|
|
"radix-ui"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "registry/radix/progress/index.tsx",
|
|
"content": "'use client';\n\nimport * as React from 'react';\nimport { Progress as ProgressPrimitive } from 'radix-ui';\nimport { motion, type Transition } from 'motion/react';\n\nimport { cn } from '@/lib/utils';\n\nconst MotionProgressIndicator = motion.create(ProgressPrimitive.Indicator);\n\ntype ProgressProps = React.ComponentProps<typeof ProgressPrimitive.Root> & {\n transition?: Transition;\n};\n\nfunction Progress({\n className,\n value,\n transition = { type: 'spring', stiffness: 100, damping: 30 },\n ...props\n}: ProgressProps) {\n return (\n <ProgressPrimitive.Root\n data-slot=\"progress\"\n className={cn(\n 'relative h-2 w-full overflow-hidden rounded-full bg-secondary',\n className,\n )}\n value={value}\n {...props}\n >\n <MotionProgressIndicator\n data-slot=\"progress-indicator\"\n className=\"h-full w-full flex-1 bg-primary rounded-full\"\n animate={{ x: `-${100 - (value || 0)}%` }}\n transition={transition}\n />\n </ProgressPrimitive.Root>\n );\n}\n\nexport { Progress, type ProgressProps };\n",
|
|
"type": "registry:ui",
|
|
"target": "components/animate-ui/radix/progress.tsx"
|
|
}
|
|
]
|
|
} |