{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "progress",
"title": "Progress",
"description": "The bar fills on a spring, the percentage rolls and it turns green when complete.",
"dependencies": [
"@ui-sdk/core@0.1.0-beta.2",
"@ui-sdk/react@0.1.0-beta.2"
],
"registryDependencies": [
"@keyframery/motion"
],
"files": [
{
"path": "registry/components/keyframery/primitives/progress.tsx",
"content": "\"use client\"\n\n/* Animated drop-in for `@ui-sdk/react/progress`: same parts, same props. Swap the import and keep your code.\n This file adds motion only. Colours, radii, shadows and spacing stay yours. */\n\nimport {\n ProgressIndicator as ProgressIndicatorPart,\n ProgressTrack as ProgressTrackPart,\n ProgressValue as ProgressValuePart,\n} from \"@ui-sdk/react/progress\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport * from \"@ui-sdk/react/progress\"\n\n/* Roll: every digit is a column of 0 to 9 that slides to its value on a spring; other characters\n (%, spaces, units) stay put. Positions are keyed from the right, so 9% to 10% rolls the units\n digit and adds a tens digit instead of shifting everything. Exported for other numbers. */\nfunction Roll({ text, className }: { text: string; className?: string }) {\n const chars = text.split(\"\")\n /* Screen readers get the plain value; the digit columns are only for the eye. */\n return (\n <>\n {text}\n \n {chars.map((c, i) => {\n const key = chars.length - i\n return /\\d/.test(c) ? (\n \n {Array.from({ length: 10 }, (_, d) => (\n \n {d}\n \n ))}\n \n ) : (\n {c}\n )\n })}\n \n \n )\n}\n\n/* The value rolls to each new reading. Pass children to render your own. */\nfunction ProgressValue({ children, ...props }: React.ComponentProps) {\n return (\n \n {children ?? ((state) => )}\n \n )\n}\n\n/* The track clips the fill, so its spring overshoot never shows outside. */\nfunction ProgressTrack({ className, ...props }: React.ComponentProps) {\n return \n}\n\n/* The fill moves to each new width on a spring (it overshoots a little and settles). While the\n amount is unknown, a 40% bar slides through the track; with reduced motion it rests full width. */\nfunction ProgressIndicator({ className, ...props }: React.ComponentProps) {\n return (\n <>\n \n \n \n )\n}\n\nexport { ProgressIndicator, ProgressTrack, ProgressValue, Roll }\n",
"type": "registry:component",
"target": "components/keyframery/primitives/progress.tsx"
},
{
"path": "registry/components/keyframery/progress.tsx",
"content": "\"use client\"\n\n/* Styled progress: the animated primitive plus the Keyframery look. */\n\nimport {\n Progress as ProgressRoot,\n ProgressIndicator as ProgressIndicatorPart,\n ProgressLabel as ProgressLabelPart,\n ProgressTrack as ProgressTrackPart,\n ProgressValue as ProgressValuePart,\n} from \"@/components/keyframery/primitives/progress\"\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Label and value share the first row; the track spans the row below. */\nfunction Progress({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ProgressLabel({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction ProgressValue({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/* The track is a thin pill well. */\nfunction ProgressTrack({ className, ...props }: React.ComponentProps) {\n return (\n \n )\n}\n\n/* The fill springs to each new width and the indeterminate bar slides (from the primitive).\n When the task finishes it turns green once. */\nfunction ProgressIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport { Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue }\n",
"type": "registry:component",
"target": "components/keyframery/progress.tsx"
}
],
"type": "registry:component"
}