{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "retro-progress", "title": "RetroProgress", "description": "A Mac OS 9 styled progress bar with inset bevel track and candy-stripe azul fill pattern.", "registryDependencies": [ "https://nostalgia-ui.com/r/nostalgia-theme.json" ], "files": [ { "path": "registry/new-york/ui/retro-progress.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface RetroProgressProps extends React.ComponentProps<\"div\"> {\n /** Progress value from 0 to 100. Clamped to [0, 100]. */\n value?: number\n /** If true, shows an animated indeterminate state. */\n indeterminate?: boolean\n}\n\nfunction RetroProgress(\n { className, value = 0, indeterminate = false, ...props }: RetroProgressProps,\n ref: React.ForwardedRef\n) {\n const clampedValue = Math.min(100, Math.max(0, value))\n\n return (\n \n {/* Fill bar */}\n 0 || indeterminate\n ? \"inset 0 1px 0 rgba(255,255,255,0.15), inset 0 -1px 0 rgba(0,0,0,0.25)\"\n : \"none\",\n }}\n />\n {/*\n Keyframe animation for the indeterminate stripe movement (kept inline\n so the component stays self-contained). React 19 hoists this \n )}\n \n )\n}\n\nconst ForwardedRetroProgress = React.forwardRef(RetroProgress)\nForwardedRetroProgress.displayName = \"RetroProgress\"\n\nexport { ForwardedRetroProgress as RetroProgress }\nexport type { RetroProgressProps }\n", "type": "registry:ui" } ], "type": "registry:ui" }