{"$schema":"https:\/\/ui.particle.academy\/schema\/registry-item.json","name":"progress","type":"registry:ui","title":"Progress","description":"Progress from react-fancy","package":"react-fancy","dependencies":[],"registryDependencies":[],"files":[{"path":"components\/fancy\/progress\/Progress.colors.ts","content":"\/\/ AUTO-GENERATED by scripts\/gen-progress-colors \u2014 do not edit by hand.\r\n\/\/ Literal Tailwind class strings for every color in the v4 palette so the\r\n\/\/ scanner can detect them in the published dist (template-built names are\r\n\/\/ invisible to Tailwind's JIT). Regenerate after changing the palette.\r\nimport type { Color } from \"..\/..\/utils\/types\";\r\n\r\nexport const progressFill: Record<Color, string> = {\r\n  slate: \"bg-slate-500 dark:bg-slate-400\",\r\n  gray: \"bg-gray-500 dark:bg-gray-400\",\r\n  zinc: \"bg-zinc-500 dark:bg-zinc-400\",\r\n  neutral: \"bg-neutral-500 dark:bg-neutral-400\",\r\n  stone: \"bg-stone-500 dark:bg-stone-400\",\r\n  red: \"bg-red-500 dark:bg-red-400\",\r\n  orange: \"bg-orange-500 dark:bg-orange-400\",\r\n  amber: \"bg-amber-500 dark:bg-amber-400\",\r\n  yellow: \"bg-yellow-500 dark:bg-yellow-400\",\r\n  lime: \"bg-lime-500 dark:bg-lime-400\",\r\n  green: \"bg-green-500 dark:bg-green-400\",\r\n  emerald: \"bg-emerald-500 dark:bg-emerald-400\",\r\n  teal: \"bg-teal-500 dark:bg-teal-400\",\r\n  cyan: \"bg-cyan-500 dark:bg-cyan-400\",\r\n  sky: \"bg-sky-500 dark:bg-sky-400\",\r\n  blue: \"bg-blue-500 dark:bg-blue-400\",\r\n  indigo: \"bg-indigo-500 dark:bg-indigo-400\",\r\n  violet: \"bg-violet-500 dark:bg-violet-400\",\r\n  purple: \"bg-purple-500 dark:bg-purple-400\",\r\n  fuchsia: \"bg-fuchsia-500 dark:bg-fuchsia-400\",\r\n  pink: \"bg-pink-500 dark:bg-pink-400\",\r\n  rose: \"bg-rose-500 dark:bg-rose-400\",\r\n};\r\n\r\nexport const progressStroke: Record<Color, string> = {\r\n  slate: \"stroke-slate-500 dark:stroke-slate-400\",\r\n  gray: \"stroke-gray-500 dark:stroke-gray-400\",\r\n  zinc: \"stroke-zinc-500 dark:stroke-zinc-400\",\r\n  neutral: \"stroke-neutral-500 dark:stroke-neutral-400\",\r\n  stone: \"stroke-stone-500 dark:stroke-stone-400\",\r\n  red: \"stroke-red-500 dark:stroke-red-400\",\r\n  orange: \"stroke-orange-500 dark:stroke-orange-400\",\r\n  amber: \"stroke-amber-500 dark:stroke-amber-400\",\r\n  yellow: \"stroke-yellow-500 dark:stroke-yellow-400\",\r\n  lime: \"stroke-lime-500 dark:stroke-lime-400\",\r\n  green: \"stroke-green-500 dark:stroke-green-400\",\r\n  emerald: \"stroke-emerald-500 dark:stroke-emerald-400\",\r\n  teal: \"stroke-teal-500 dark:stroke-teal-400\",\r\n  cyan: \"stroke-cyan-500 dark:stroke-cyan-400\",\r\n  sky: \"stroke-sky-500 dark:stroke-sky-400\",\r\n  blue: \"stroke-blue-500 dark:stroke-blue-400\",\r\n  indigo: \"stroke-indigo-500 dark:stroke-indigo-400\",\r\n  violet: \"stroke-violet-500 dark:stroke-violet-400\",\r\n  purple: \"stroke-purple-500 dark:stroke-purple-400\",\r\n  fuchsia: \"stroke-fuchsia-500 dark:stroke-fuchsia-400\",\r\n  pink: \"stroke-pink-500 dark:stroke-pink-400\",\r\n  rose: \"stroke-rose-500 dark:stroke-rose-400\",\r\n};\r\n\r\nexport const progressText: Record<Color, string> = {\r\n  slate: \"text-slate-600 dark:text-slate-400\",\r\n  gray: \"text-gray-600 dark:text-gray-400\",\r\n  zinc: \"text-zinc-600 dark:text-zinc-400\",\r\n  neutral: \"text-neutral-600 dark:text-neutral-400\",\r\n  stone: \"text-stone-600 dark:text-stone-400\",\r\n  red: \"text-red-600 dark:text-red-400\",\r\n  orange: \"text-orange-600 dark:text-orange-400\",\r\n  amber: \"text-amber-600 dark:text-amber-400\",\r\n  yellow: \"text-yellow-600 dark:text-yellow-400\",\r\n  lime: \"text-lime-600 dark:text-lime-400\",\r\n  green: \"text-green-600 dark:text-green-400\",\r\n  emerald: \"text-emerald-600 dark:text-emerald-400\",\r\n  teal: \"text-teal-600 dark:text-teal-400\",\r\n  cyan: \"text-cyan-600 dark:text-cyan-400\",\r\n  sky: \"text-sky-600 dark:text-sky-400\",\r\n  blue: \"text-blue-600 dark:text-blue-400\",\r\n  indigo: \"text-indigo-600 dark:text-indigo-400\",\r\n  violet: \"text-violet-600 dark:text-violet-400\",\r\n  purple: \"text-purple-600 dark:text-purple-400\",\r\n  fuchsia: \"text-fuchsia-600 dark:text-fuchsia-400\",\r\n  pink: \"text-pink-600 dark:text-pink-400\",\r\n  rose: \"text-rose-600 dark:text-rose-400\",\r\n};\r\n","type":"registry:ui","target":"components\/fancy\/progress\/Progress.colors.ts"},{"path":"components\/fancy\/progress\/Progress.tsx","content":"import { forwardRef } from \"react\";\r\nimport { cn } from \"..\/..\/utils\/cn\";\r\nimport type { ProgressProps } from \".\/Progress.types\";\r\nimport { progressFill, progressStroke, progressText } from \".\/Progress.colors\";\r\n\r\nconst barHeightClasses: Record<NonNullable<ProgressProps[\"size\"]>, string> = {\r\n  sm: \"h-1.5\",\r\n  md: \"h-2.5\",\r\n  lg: \"h-4\",\r\n};\r\n\r\nconst circularSizeMap: Record<NonNullable<ProgressProps[\"size\"]>, number> = {\r\n  sm: 32,\r\n  md: 48,\r\n  lg: 64,\r\n};\r\n\r\nconst textSizeClasses: Record<NonNullable<ProgressProps[\"size\"]>, string> = {\r\n  sm: \"text-[8px]\",\r\n  md: \"text-[10px]\",\r\n  lg: \"text-xs\",\r\n};\r\n\r\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(\r\n  (\r\n    {\r\n      value = 0,\r\n      max = 100,\r\n      variant = \"bar\",\r\n      size = \"md\",\r\n      color = \"blue\",\r\n      indeterminate = false,\r\n      showValue = false,\r\n      className,\r\n    },\r\n    ref,\r\n  ) => {\r\n    const percentage = Math.min(100, Math.max(0, (value \/ max) * 100));\r\n\r\n    if (variant === \"circular\") {\r\n      const diameter = circularSizeMap[size];\r\n      const strokeWidth = size === \"sm\" ? 3 : size === \"md\" ? 4 : 5;\r\n      const radius = (diameter - strokeWidth) \/ 2;\r\n      const circumference = 2 * Math.PI * radius;\r\n      const offset = indeterminate ? circumference * 0.75 : circumference - (percentage \/ 100) * circumference;\r\n\r\n      return (\r\n        <div\r\n          ref={ref}\r\n          role=\"progressbar\"\r\n          aria-valuenow={indeterminate ? undefined : value}\r\n          aria-valuemin={0}\r\n          aria-valuemax={max}\r\n          data-react-fancy-progress=\"\"\r\n          className={cn(\"relative inline-flex items-center justify-center\", className)}\r\n          style={{ width: diameter, height: diameter }}\r\n        >\r\n          <svg\r\n            width={diameter}\r\n            height={diameter}\r\n            className={cn(indeterminate && \"animate-spin\")}\r\n          >\r\n            <circle\r\n              cx={diameter \/ 2}\r\n              cy={diameter \/ 2}\r\n              r={radius}\r\n              fill=\"none\"\r\n              strokeWidth={strokeWidth}\r\n              className=\"stroke-zinc-200 dark:stroke-zinc-700\"\r\n            \/>\r\n            <circle\r\n              cx={diameter \/ 2}\r\n              cy={diameter \/ 2}\r\n              r={radius}\r\n              fill=\"none\"\r\n              strokeWidth={strokeWidth}\r\n              strokeLinecap=\"round\"\r\n              strokeDasharray={circumference}\r\n              strokeDashoffset={offset}\r\n              className={cn(progressStroke[color], \"transition-[stroke-dashoffset] duration-300\")}\r\n              style={{ transform: \"rotate(-90deg)\", transformOrigin: \"center\" }}\r\n            \/>\r\n          <\/svg>\r\n          {showValue && !indeterminate && (\r\n            <span\r\n              className={cn(\r\n                \"absolute font-medium\",\r\n                progressText[color],\r\n                textSizeClasses[size],\r\n              )}\r\n            >\r\n              {Math.round(percentage)}%\r\n            <\/span>\r\n          )}\r\n        <\/div>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        role=\"progressbar\"\r\n        aria-valuenow={indeterminate ? undefined : value}\r\n        aria-valuemin={0}\r\n        aria-valuemax={max}\r\n        data-react-fancy-progress=\"\"\r\n        className={cn(\"relative w-full\", className)}\r\n      >\r\n        <div\r\n          className={cn(\r\n            \"w-full overflow-hidden rounded-full bg-zinc-200 dark:bg-zinc-700\",\r\n            barHeightClasses[size],\r\n          )}\r\n        >\r\n          <div\r\n            className={cn(\r\n              \"h-full rounded-full transition-[width] duration-300\",\r\n              progressFill[color],\r\n              indeterminate && \"animate-pulse w-full\",\r\n            )}\r\n            style={indeterminate ? undefined : { width: `${percentage}%` }}\r\n          \/>\r\n        <\/div>\r\n        {showValue && !indeterminate && (\r\n          <span\r\n            className={cn(\r\n              \"mt-1 block text-right text-xs font-medium\",\r\n              progressText[color],\r\n            )}\r\n          >\r\n            {Math.round(percentage)}%\r\n          <\/span>\r\n        )}\r\n      <\/div>\r\n    );\r\n  },\r\n);\r\n\r\nProgress.displayName = \"Progress\";\r\n","type":"registry:ui","target":"components\/fancy\/progress\/Progress.tsx"},{"path":"components\/fancy\/progress\/Progress.types.ts","content":"import type { Color } from \"..\/..\/utils\/types\";\r\n\r\nexport interface ProgressProps {\r\n  value?: number;\r\n  max?: number;\r\n  variant?: \"bar\" | \"circular\";\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n  color?: Color;\r\n  indeterminate?: boolean;\r\n  showValue?: boolean;\r\n  className?: string;\r\n}\r\n","type":"registry:ui","target":"components\/fancy\/progress\/Progress.types.ts"},{"path":"components\/fancy\/progress\/index.ts","content":"export { Progress } from \".\/Progress\";\r\nexport type { ProgressProps } from \".\/Progress.types\";\r\n","type":"registry:ui","target":"components\/fancy\/progress\/index.ts"}]}