{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-bar",
  "type": "registry:ui",
  "title": "Progress Bar",
  "description": "A progress bar component that can be used to display the progress of a task.",
  "files": [
    {
      "path": "registry/tra-kit/components/progress-bar.tsx",
      "content": "import { cva } from 'class-variance-authority';\r\nimport { memo } from 'react';\r\nimport { cn } from '@/lib/utils';\r\n\r\ninterface IProgressBar {\r\n  currentStep: number;\r\n  totalStepSize: number;\r\n  progressTitle?: string;\r\n  progressTitleClassName?: string;\r\n  stepTextClassName?: string;\r\n  containerClassName?: string;\r\n  headerContainerClassName?: string;\r\n  linearContainerClassName?: string;\r\n  linearProgressClassName?: string;\r\n  stepTextPosition?: 'top' | 'bottom';\r\n  valueType?: 'percentage' | 'number';\r\n}\r\n\r\nconst linearContainerVariants = cva(\r\n  'TraProgressBar-linearContainer bg-primary-15 relative h-1 w-full overflow-hidden rounded-2xl',\r\n);\r\n\r\nconst linearVariants = cva(\r\n  'TraProgressBar-linearProgress bg-primary absolute left-0 top-0 size-full transition-transform duration-300',\r\n);\r\n\r\ninterface StepTextProps {\r\n  className?: string;\r\n  children: React.ReactNode;\r\n}\r\n\r\nconst StepText = ({ className, children }: StepTextProps) => (\r\n  <p className={cn('TraProgressBar-stepText self-end text-sm text-neutral-light-black', className)}>\r\n    {children}\r\n  </p>\r\n);\r\n\r\nconst ProgressBar = memo(\r\n  ({\r\n    progressTitle,\r\n    progressTitleClassName,\r\n    stepTextClassName,\r\n    currentStep = 0,\r\n    totalStepSize = 0,\r\n    containerClassName,\r\n    headerContainerClassName,\r\n    linearContainerClassName,\r\n    linearProgressClassName,\r\n    valueType = 'number',\r\n    stepTextPosition = 'top',\r\n    ...otherProps\r\n  }: IProgressBar) => {\r\n    if (currentStep > totalStepSize) {\r\n      throw new Error('Current step cannot be greater than total step size');\r\n    }\r\n\r\n    const progress = Math.min(Math.max((currentStep / Math.max(totalStepSize, 1)) * 100, 0), 100);\r\n    const stepText =\r\n      valueType === 'number' ? `${currentStep}/${totalStepSize}` : `${Math.round(progress)}%`;\r\n\r\n    return (\r\n      <div className={cn(containerClassName, 'TraProgressBar-container flex flex-col gap-1')}>\r\n        <div\r\n          className={cn(\r\n            headerContainerClassName,\r\n            `TraProgressBar-headerContainer flex ${progressTitle ? 'justify-between' : 'justify-end'}`,\r\n          )}\r\n        >\r\n          {progressTitle && (\r\n            <p\r\n              className={cn(\r\n                progressTitleClassName,\r\n                'TraProgressBar-title text-neutral-light-black',\r\n              )}\r\n            >\r\n              {progressTitle}\r\n            </p>\r\n          )}\r\n          {stepTextPosition === 'top' && (\r\n            <StepText className={cn(stepTextClassName)}>{stepText}</StepText>\r\n          )}\r\n        </div>\r\n        <div\r\n          className={cn(linearContainerVariants(), linearContainerClassName)}\r\n          {...otherProps}\r\n        >\r\n          <div\r\n            className={cn(linearVariants(), linearProgressClassName)}\r\n            style={{ transform: `translateX(-${100 - progress}%)` }}\r\n          />\r\n        </div>\r\n        {stepTextPosition === 'bottom' && (\r\n          <StepText className={cn(stepTextClassName)}>{stepText}</StepText>\r\n        )}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nProgressBar.displayName = 'ProgressBar';\r\n\r\nexport default ProgressBar;\r\n",
      "type": "registry:ui"
    }
  ]
}