{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "progress-item",
  "title": "Progress Item",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/progress-item/ProgressItem.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface ProgressItemProps extends HTMLAttributes<HTMLDivElement> {\n    label: string\n    value: number\n    secondaryLabel?: string\n    barClass?: string\n    colorIndex?: number\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { Progress } from '$lib/components/ui/progress'\n\n  let {\n    class: className,\n    label,\n    value,\n    secondaryLabel,\n    barClass,\n    colorIndex,\n    ref = $bindable(null),\n    ...restProps\n  }: ProgressItemProps = $props()\n\n  // Maps to canonical shadcn chart tokens (chart-1..5). Cycles through 5 hues.\n  const barColors = [\n    '[&_[data-slot=progress-indicator]]:bg-primary',\n    '[&_[data-slot=progress-indicator]]:bg-[var(--chart-1)]',\n    '[&_[data-slot=progress-indicator]]:bg-[var(--chart-2)]',\n    '[&_[data-slot=progress-indicator]]:bg-[var(--chart-3)]',\n    '[&_[data-slot=progress-indicator]]:bg-[var(--chart-4)]',\n    '[&_[data-slot=progress-indicator]]:bg-[var(--chart-5)]',\n  ]\n\n  const colorClass = $derived(colorIndex !== undefined ? barColors[colorIndex % barColors.length] : '')\n</script>\n\n<div {...restProps} bind:this={ref} data-uipkge=\"\" data-slot=\"progress-item\" class={cn('group/progress space-y-1.5', className)}>\n  <div class=\"flex items-center justify-between text-sm\">\n    <span class=\"font-medium\">{label}</span>\n    <span class=\"text-muted-foreground text-xs tabular-nums\">{secondaryLabel ?? `${value}%`}</span>\n  </div>\n  <Progress {value} class={cn('h-2 transition-colors duration-200', colorClass, barClass)} />\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/progress-item/ProgressItem.svelte"
    },
    {
      "path": "packages/registry-svelte/components/progress-item/index.ts",
      "content": "export { default as ProgressItem, type ProgressItemProps } from './ProgressItem.svelte'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/progress-item/index.ts"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/progress.json"
  ],
  "description": "Labeled progress row — item name on the left, progress bar in the middle, percent or count on the right. Use for batched task lists, file upload queues, or onboarding checklists.",
  "categories": [
    "feedback"
  ]
}