{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "modern-progress",
  "type": "registry:ui",
  "title": "Modern Progress",
  "description": "A modern progress component for Next.js apps with next-themes and Tailwind CSS, supporting system, light, and dark modes.",
  "dependencies": [
    "class-variance-authority"
  ],
  "files": [
    {
      "path": "registry/bucharitesh/modern-progress.tsx",
      "content": "import { cn } from '@/lib/utils';\nimport { type VariantProps, cva } from 'class-variance-authority';\nimport * as React from 'react';\n\nconst progressVariants = cva(\n  'relative flex w-full items-center justify-center overflow-hidden',\n  {\n    variants: {\n      variant: {\n        default: 'border-4 border-primary bg-neutral-950',\n        secondary: 'border-4 border-secondary bg-neutral-900',\n        destructive: 'border-4 border-destructive bg-neutral-950',\n      },\n      radius: {\n        default: 'rounded-3xl',\n        full: 'rounded-full',\n        none: 'rounded-none',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      radius: 'default',\n    },\n  }\n);\n\nconst indicatorVariants = cva(\n  'absolute bottom-0 left-0 z-20 w-full transition-[height,background-color] duration-300',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary',\n        secondary: 'bg-secondary',\n        destructive: 'bg-destructive',\n      },\n      striped: {\n        true: '[&>div]:bg-[linear-gradient(45deg,rgba(255,255,255,.15)_25%,transparent_25%,transparent_50%,rgba(255,255,255,.15)_50%,rgba(255,255,255,.15)_75%,transparent_75%,transparent)] [&>div]:bg-size-1',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      striped: true,\n    },\n  }\n);\n\nexport interface ProgressProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof progressVariants> {\n  value?: number;\n  max?: number;\n  striped?: boolean;\n  indicatorClassName?: string;\n  showText?: boolean;\n}\n\nconst Progress = React.forwardRef<HTMLDivElement, ProgressProps>(\n  (\n    {\n      className,\n      value = 0,\n      max = 100,\n      variant,\n      radius,\n      striped = true,\n      indicatorClassName,\n      showText,\n      ...props\n    },\n    ref\n  ) => {\n    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);\n\n    return (\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        className={cn(progressVariants({ variant, radius }), className)}\n        {...props}\n      >\n        <div className=\"relative aspect-video w-full\">\n          <div\n            className={cn(\n              indicatorVariants({ variant, striped }),\n              indicatorClassName\n            )}\n            style={{\n              height: `${percentage}%`,\n            }}\n          >\n            <div\n              data-pattern=\"stripes\"\n              className=\"relative z-10 h-full w-full transition-colors duration-300\"\n            />\n          </div>\n          {showText && (\n            <div className=\"-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 z-20 flex h-full w-full items-center justify-center\">\n              <span className=\"font-bold text-5xl text-white\">\n                {percentage.toFixed(0)}\n                <span className=\"font-medium text-base text-white\">%</span>\n              </span>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\nProgress.displayName = 'Progress';\n\nexport { Progress };\n",
      "type": "registry:ui"
    }
  ],
  "css": {
    "body[data-pattern=\"stripes\"],body [data-pattern=\"stripes\"]": {
      "--rgb": "255 255 255",
      "--opacity": "0.1",
      "--size": "6px 6px",
      "background-image": "linear-gradient(-45deg,rgb(var(--rgb) / var(--opacity)) 25%,transparent 25%,transparent 50%,rgb(var(--rgb) / var(--opacity)) 50%,rgb(var(--rgb) / var(--opacity)) 75%,transparent 75%,transparent 100%)",
      "background-size": "var(--size)"
    }
  }
}