{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress",
  "type": "registry:ui",
  "title": "Progress",
  "description": "Accessible capsule progress bar with labeled percentage states.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/ui/progress.tsx",
      "content": "import * as React from 'react'\nimport { cn } from '@/lib/utils'\n\nexport interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {\n  value?: number\n  max?: number\n  label?: React.ReactNode\n  description?: React.ReactNode\n  showValue?: boolean\n  showPin?: boolean\n  striped?: boolean\n  animated?: boolean\n  indeterminate?: boolean\n  segments?: number\n  size?: 'sm' | 'md' | 'lg' | 'xl'\n  variant?: 'yellow' | 'orange' | 'mint' | 'violet' | 'pink' | 'sky' | 'lime' | 'gradient' | 'sunset' | 'neon'\n  shape?: 'pill' | 'rounded'\n}\n\nconst fills = {\n  yellow: 'bg-rk-primary text-rk-ink',\n  orange: 'bg-rk-secondary text-rk-ink',\n  mint: 'bg-rk-success text-rk-ink',\n  violet: 'bg-rk-accent text-rk-ink',\n  pink: 'bg-rk-pink text-rk-ink',\n  sky: 'bg-rk-sky text-rk-ink',\n  lime: 'bg-[#A3E635] text-rk-ink',\n  gradient: 'bg-gradient-to-r from-[#FB923C] via-[#F87171] to-[#DC2626] text-white',\n  sunset: 'bg-gradient-to-r from-rk-primary via-rk-secondary to-[#F87171] text-rk-ink',\n  neon: 'bg-gradient-to-r from-[#A3E635] via-[#34D399] to-[#38BDF8] text-rk-ink',\n}\n\nconst sizeTrackClasses = {\n  sm: 'h-5',\n  md: 'h-7',\n  lg: 'h-9',\n  xl: 'h-11',\n}\n\nexport function Progress({\n  value = 0,\n  max = 100,\n  label,\n  description,\n  showValue = false,\n  showPin = false,\n  striped = false,\n  animated = false,\n  indeterminate = false,\n  segments,\n  size = 'md',\n  variant = 'yellow',\n  shape = 'pill',\n  className,\n  ...props\n}: ProgressProps) {\n  const safeMax = max > 0 ? max : 100\n  const percentage = indeterminate ? 100 : Math.min(100, Math.max(0, (value / safeMax) * 100))\n  const isStriped = striped || indeterminate\n  const isAnimated = animated || indeterminate\n\n  return (\n    <div className={cn('w-full space-y-2.5 font-sans', className)} {...props}>\n      {/* Header with Label, Subtitle & Percentage Badge */}\n      {(label || description || showValue) && (\n        <div className=\"flex items-center justify-between gap-3\">\n          <div>\n            {label && (\n              <span className=\"font-display text-sm font-extrabold text-rk-ink tracking-tight\">\n                {label}\n              </span>\n            )}\n            {description && (\n              <p className=\"text-xs font-semibold text-rk-ink/60 leading-none mt-0.5\">\n                {description}\n              </p>\n            )}\n          </div>\n          {showValue && !indeterminate && (\n            <span className=\"inline-flex items-center justify-center rounded-full border-2 border-rk-ink bg-rk-primary px-2.5 py-0.5 font-mono text-xs font-black text-rk-ink rk-shadow-xs\">\n              {Math.round(percentage)}%\n            </span>\n          )}\n        </div>\n      )}\n\n      {/* Progress Track Container */}\n      <div className=\"relative pt-6\">\n        {/* Floating Percentage Pin Tag */}\n        {showPin && !indeterminate && (\n          <div\n            className=\"absolute top-0 -translate-y-1.5 transition-all duration-500 ease-out pointer-events-none z-10\"\n            style={{ left: `calc(${percentage}% - 18px)` }}\n          >\n            <div className=\"relative rounded-md border-2 border-rk-ink bg-rk-ink px-2 py-0.5 font-mono text-[11px] font-black text-rk-primary rk-shadow-xs\">\n              {Math.round(percentage)}%\n              <div className=\"absolute -bottom-1 left-1/2 -translate-x-1/2 h-2 w-2 rotate-45 border-b-2 border-r-2 border-rk-ink bg-rk-ink\" />\n            </div>\n          </div>\n        )}\n\n        <div\n          aria-label={typeof label === 'string' ? label : 'Progress'}\n          aria-valuemax={safeMax}\n          aria-valuemin={0}\n          aria-valuenow={indeterminate ? undefined : value}\n          aria-valuetext={indeterminate ? 'indeterminate' : `${Math.round(percentage)}%`}\n          role=\"progressbar\"\n          className={cn(\n            'relative w-full overflow-hidden bg-white p-1 rk-border rk-shadow-sm',\n            shape === 'pill' ? 'rounded-full' : 'rounded-xl',\n            sizeTrackClasses[size]\n          )}\n        >\n          {/* Track Fill */}\n          {indeterminate ? (\n            <div\n              className={cn(\n                'absolute top-1 bottom-1 transition-all duration-300',\n                shape === 'pill' ? 'rounded-full' : 'rounded-lg',\n                fills[variant],\n                'bg-[linear-gradient(45deg,rgba(0,0,0,0.18)_25%,transparent_25%,transparent_50%,rgba(0,0,0,0.18)_50%,rgba(0,0,0,0.18)_75%,transparent_75%,transparent)] bg-[length:1rem_1rem]',\n                'animate-[progress-indeterminate_1.8s_ease-in-out_infinite]'\n              )}\n            />\n          ) : (\n            <div\n              className={cn(\n                'relative h-full transition-all duration-500 ease-out',\n                shape === 'pill' ? 'rounded-full' : 'rounded-lg',\n                fills[variant],\n                striped &&\n                  'bg-[linear-gradient(45deg,rgba(0,0,0,0.18)_25%,transparent_25%,transparent_50%,rgba(0,0,0,0.18)_50%,rgba(0,0,0,0.18)_75%,transparent_75%,transparent)] bg-[length:1.25rem_1.25rem]',\n                striped && animated && 'animate-[progress-stripes_0.8s_linear_infinite]'\n              )}\n              style={{ width: `${percentage}%` }}\n            >\n              {/* Inner Text for Large Size */}\n              {size === 'xl' && !showPin && showValue && (\n                <span className=\"absolute inset-0 flex items-center justify-end pr-3 font-mono text-xs font-black text-rk-ink\">\n                  {Math.round(percentage)}%\n                </span>\n              )}\n            </div>\n          )}\n\n          {/* Optional Segment Dividers */}\n          {segments && segments > 1 && (\n            <div className=\"absolute inset-0 flex w-full pointer-events-none px-1\">\n              {Array.from({ length: segments - 1 }).map((_, i) => (\n                <div\n                  key={i}\n                  className=\"h-full border-r-2 border-rk-ink/40\"\n                  style={{ width: `${100 / segments}%` }}\n                />\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  )\n}\n\n",
      "type": "registry:ui",
      "target": "components/ui/progress.tsx"
    }
  ]
}