{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-progressbar",
  "type": "registry:ui",
  "title": "ProgressBar",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-field.json",
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/ProgressBar.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {\n  ProgressBar as AriaProgressBar,\n  type ProgressBarProps as AriaProgressBarProps\n} from 'react-aria-components/ProgressBar';\nimport {Label} from '@/registry/react-aria/ui/Field';\nimport {composeTailwindRenderProps} from '@/registry/react-aria/lib/react-aria-utils';\n\nexport interface ProgressBarProps extends AriaProgressBarProps {\n  label?: string;\n}\n\nexport function ProgressBar({label, ...props}: ProgressBarProps) {\n  return (\n    <AriaProgressBar\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'flex flex-col gap-2 font-sans w-64 max-w-full'\n      )}>\n      {({percentage, valueText, isIndeterminate}) => (\n        <>\n          <div className=\"flex justify-between gap-2\">\n            <Label>{label}</Label>\n            <span className=\"text-sm text-neutral-600 dark:text-neutral-400\">{valueText}</span>\n          </div>\n          <div className=\"max-w-full h-2 rounded-full bg-neutral-300 dark:bg-neutral-700 outline outline-1 -outline-offset-1 outline-transparent relative overflow-hidden\">\n            <div\n              className={`absolute top-0 h-full rounded-full bg-blue-500 forced-colors:bg-[Highlight] ${isIndeterminate ? 'left-full animate-in duration-1000 slide-in-from-left-[20rem] repeat-infinite ease-out' : 'left-0'}`}\n              style={{width: (isIndeterminate ? 40 : percentage) + '%'}}\n            />\n          </div>\n        </>\n      )}\n    </AriaProgressBar>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}