{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"progress","title":"Progress","description":"Displays a bar or circular ring that shows how far a task or quota has progressed toward completion, with optional label and value text.","dependencies":["cn","@base-ui/react"],"files":[{"path":"components/ui/progress.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Progress as ProgressPrimitive } from \"@base-ui/react/progress\"\nimport { cn } from \"cn\"\n\nfunction Progress({\n  className,\n  children,\n  value,\n  min = 0,\n  max = 100,\n  variant = \"default\",\n  segments = 10,\n  ...props\n}: ProgressPrimitive.Root.Props & {\n  variant?: \"default\" | \"dashed\"\n  /** Pieces of a dashed track. */\n  segments?: number\n}) {\n  const filled =\n    typeof value === \"number\" && max > min\n      ? Math.min(\n          segments,\n          Math.max(0, Math.round(((value - min) / (max - min)) * segments))\n        )\n      : 0\n\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      min={min}\n      max={max}\n      data-slot=\"progress\"\n      data-variant={variant}\n      className={cn(\"flex flex-wrap gap-3\", className)}\n      {...props}\n    >\n      {children}\n      {variant === \"dashed\" ? (\n        <ProgressTrack className=\"flex gap-1 bg-transparent\">\n          {Array.from({ length: segments }, (_, index) => (\n            <span\n              key={index}\n              data-slot=\"progress-segment\"\n              data-filled={index < filled || undefined}\n              className=\"h-full flex-1 rounded-2xl bg-fill-2 transition-colors data-filled:bg-primary\"\n            />\n          ))}\n        </ProgressTrack>\n      ) : (\n        <ProgressTrack>\n          <ProgressIndicator />\n        </ProgressTrack>\n      )}\n    </ProgressPrimitive.Root>\n  )\n}\n\nfunction ProgressTrack({ className, ...props }: ProgressPrimitive.Track.Props) {\n  return (\n    <ProgressPrimitive.Track\n      className={cn(\n        \"relative flex h-1 w-full items-center overflow-x-hidden rounded-2xl bg-fill-2\",\n        className\n      )}\n      data-slot=\"progress-track\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressIndicator({\n  className,\n  ...props\n}: ProgressPrimitive.Indicator.Props) {\n  return (\n    <ProgressPrimitive.Indicator\n      data-slot=\"progress-indicator\"\n      className={cn(\"h-full bg-primary transition-all\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressCircle({\n  className,\n  children,\n  value,\n  min = 0,\n  max = 100,\n  thickness = 0.2,\n  ...props\n}: ProgressPrimitive.Root.Props & {\n  /** Ring width as a fraction of the radius. */\n  thickness?: number\n}) {\n  const percent =\n    typeof value === \"number\" && max > min\n      ? Math.min(100, Math.max(0, ((value - min) / (max - min)) * 100))\n      : null\n  const strokeWidth = 16 * thickness\n  const radius = 16 - strokeWidth / 2\n  const circumference = 2 * Math.PI * radius\n\n  return (\n    <ProgressPrimitive.Root\n      value={value}\n      min={min}\n      max={max}\n      data-slot=\"progress-circle\"\n      className={cn(\n        \"relative inline-flex size-10 shrink-0 items-center justify-center text-fill-2\",\n        className\n      )}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 32 32\"\n        className=\"absolute inset-0 size-full\"\n        aria-hidden=\"true\"\n      >\n        <circle\n          data-slot=\"progress-circle-track\"\n          cx=\"16\"\n          cy=\"16\"\n          r={radius}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          strokeWidth={strokeWidth}\n        />\n        {percent !== null && percent > 0 && (\n          <circle\n            data-slot=\"progress-circle-indicator\"\n            cx=\"16\"\n            cy=\"16\"\n            r={radius}\n            fill=\"none\"\n            strokeWidth={strokeWidth}\n            strokeDasharray={circumference}\n            strokeDashoffset={circumference * (1 - percent / 100)}\n            transform=\"rotate(-90 16 16)\"\n            className=\"stroke-primary transition-[stroke-dashoffset]\"\n          />\n        )}\n      </svg>\n      {children != null && (\n        <span\n          data-slot=\"progress-circle-label\"\n          className=\"relative text-foreground\"\n        >\n          {children}\n        </span>\n      )}\n    </ProgressPrimitive.Root>\n  )\n}\n\nfunction ProgressLabel({ className, ...props }: ProgressPrimitive.Label.Props) {\n  return (\n    <ProgressPrimitive.Label\n      className={cn(\"text-sm font-medium\", className)}\n      data-slot=\"progress-label\"\n      {...props}\n    />\n  )\n}\n\nfunction ProgressFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"progress-footer\"\n      className={cn(\n        \"order-last flex w-full items-center justify-between gap-3 text-sm text-muted-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ProgressValue({ className, ...props }: ProgressPrimitive.Value.Props) {\n  return (\n    <ProgressPrimitive.Value\n      className={cn(\n        \"ml-auto text-sm text-muted-foreground tabular-nums\",\n        className\n      )}\n      data-slot=\"progress-value\"\n      {...props}\n    />\n  )\n}\n\nexport {\n  Progress,\n  ProgressCircle,\n  ProgressFooter,\n  ProgressTrack,\n  ProgressIndicator,\n  ProgressLabel,\n  ProgressValue,\n}\n","type":"registry:ui"}],"cssVars":{"theme":{"color-fill-2":"var(--fill-2)","text-sm--letter-spacing":"-0.005em"},"light":{"fill-2":"oklch(0.556 0 0 / 8%)"},"dark":{"fill-2":"oklch(1 0 0 / 10%)"}},"categories":["feedback"],"type":"registry:ui"}