{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress",
  "type": "registry:ui",
  "title": "Progress",
  "description": "A punch card that fills hole by hole.",
  "categories": [
    "core"
  ],
  "files": [
    {
      "path": "ui/progress.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Progress as ProgressPrimitive } from \"radix-ui\";\n\nexport interface ProgressProps extends React.ComponentProps<typeof ProgressPrimitive.Root> {\n  /** Number of holes on the card. */\n  holes?: number;\n}\n\n/** A punch card: each hole punched is a step closer to done. */\nexport function Progress({ value = 0, max = 100, holes = 20, className = \"\", ...props }: ProgressProps) {\n  const punched = Math.round(((value ?? 0) / max) * holes);\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      max={max}\n      className={`paper relative flex w-full items-center gap-[3px] rounded-[3px] border border-(--edge) bg-(--paper-raised) px-2.5 py-2 ${className}`}\n      style={{ clipPath: \"polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px)\" }}\n      {...props}\n    >\n      {Array.from({ length: holes }, (_, i) => (\n        <span\n          key={i}\n          className=\"aspect-square min-w-0 flex-1 rounded-full transition-[background-color,box-shadow] duration-200\"\n          style={\n            i < punched\n              ? { background: \"var(--ink)\", boxShadow: \"inset 0 1px 2px rgb(0 0 0 / .6)\", transitionDelay: `${i * 25}ms` }\n              : { boxShadow: \"inset 0 0 0 1px var(--edge)\" }\n          }\n        />\n      ))}\n      <ProgressPrimitive.Indicator className=\"sr-only\" />\n    </ProgressPrimitive.Root>\n  );\n}\n"
    }
  ],
  "dependencies": [
    "radix-ui"
  ]
}