{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "progress-bar",
  "title": "progress-bar",
  "description": "progress-bar",
  "dependencies": [
    "react-aria-components",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://intentui.com/r/primitive"
  ],
  "files": [
    {
      "path": "src/components/ui/progress-bar.tsx",
      "content": "'use client'\n\nimport { createContext, use } from 'react'\nimport {\n  ProgressBar as ProgressBarPrimitive,\n  type ProgressBarProps,\n  type ProgressBarRenderProps,\n} from 'react-aria-components/ProgressBar'\nimport { twMerge } from 'tailwind-merge'\nimport { cx } from '@/lib/primitive'\n\nconst ProgressBarContext = createContext<ProgressBarRenderProps | null>(null)\n\nexport function ProgressBar({ className, children, ...props }: ProgressBarProps) {\n  return (\n    <ProgressBarPrimitive\n      data-slot=\"control\"\n      className={cx(\n        'w-full',\n        '[&>[data-slot=progress-bar-header]+[data-slot=progress-bar-track]]:mt-2',\n        '[&>[data-slot=progress-bar-header]+[data-slot=progress-bar-track]]:mt-2',\n        \"[&>[data-slot=progress-bar-header]+[slot='description']]:mt-1\",\n        \"[&>[slot='description']+[data-slot=progress-bar-track]]:mt-2\",\n        '[&>[data-slot=progress-bar-track]+[slot=description]]:mt-2',\n        '[&>[data-slot=progress-bar-track]+[slot=errorMessage]]:mt-2',\n        '*:data-[slot=progress-bar-header]:font-medium',\n        className\n      )}\n      {...props}\n    >\n      {(values) => (\n        <ProgressBarContext value={{ ...values }}>\n          {typeof children === 'function' ? children(values) : children}\n        </ProgressBarContext>\n      )}\n    </ProgressBarPrimitive>\n  )\n}\n\nexport function ProgressBarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"progress-bar-header\"\n      className={twMerge('flex items-center justify-between', className)}\n      {...props}\n    />\n  )\n}\n\nexport function ProgressBarValue({\n  className,\n  ...props\n}: Omit<React.ComponentProps<'span'>, 'children'>) {\n  const { valueText } = use(ProgressBarContext)!\n  return (\n    <span\n      data-slot=\"progress-bar-value\"\n      className={twMerge('text-base/6 sm:text-sm/6', className)}\n      {...props}\n    >\n      {valueText}\n    </span>\n  )\n}\n\nexport function ProgressBarTrack({ className, ref, ...props }: React.ComponentProps<'div'>) {\n  const { isIndeterminate, percentage } = use(ProgressBarContext)!\n  return (\n    <span data-slot=\"progress-bar-track\" className=\"relative block w-full\">\n      <style>{`\n        @keyframes progress-slide {\n          0% { inset-inline-start: 0% }\n          50% { inset-inline-start: 100% }\n          100% { inset-inline-start: 0% }\n        }\n      `}</style>\n      <div ref={ref} className=\"flex w-full items-center gap-x-2\" {...props}>\n        <div\n          data-slot=\"progress-container\"\n          className={twMerge(\n            '[--progress-content-bg:var(--color-primary)]',\n            'relative h-1.5 w-full min-w-52 overflow-hidden rounded-full bg-(--progress-container-bg,var(--color-secondary)) outline-1 outline-transparent -outline-offset-1 will-change-transform',\n            className\n          )}\n        >\n          {!isIndeterminate ? (\n            <div\n              data-slot=\"progress-content\"\n              className=\"absolute start-0 top-0 h-full rounded-full bg-(--progress-content-bg) transition-[width] duration-200 ease-linear will-change-[width] motion-reduce:transition-none forced-colors:bg-[Highlight]\"\n              style={{ width: `${percentage}%` }}\n            />\n          ) : (\n            <div\n              data-slot=\"progress-content\"\n              className=\"absolute top-0 h-full animate-[progress-slide_2000ms_ease-in-out_infinite] rounded-full bg-primary forced-colors:bg-[Highlight]\"\n              style={{ width: '40%' }}\n            />\n          )}\n        </div>\n      </div>\n    </span>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}