{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progress-bar",
  "type": "registry:ui",
  "title": "Progress Bar",
  "description": "React progress bar for uploads and background tasks, with measured value/max progress, an indeterminate mode, a visible label, and optional percentage text.",
  "author": "Skrewww",
  "dependencies": [],
  "registryDependencies": [
    "@skrewww/foundation"
  ],
  "docs": "Host requirements (assumed already present, not installed by this command): react, react-dom.",
  "files": [
    {
      "path": "components/ui/ProgressBar.tsx",
      "content": "/** @skrewww-component progress-bar */\nimport { cn } from \"@/lib/cn\";\nimport styles from \"@/components/ui/progress-bar.module.css\";\n\nexport type ProgressBarVariant = \"default\" | \"success\" | \"warning\" | \"danger\";\n\nexport type ProgressBarProps = {\n  value?: number;\n  max?: number;\n  label: string;\n  showValue?: boolean;\n  indeterminate?: boolean;\n  variant?: ProgressBarVariant;\n  className?: string;\n};\n\nexport function ProgressBar({\n  value = 0,\n  max = 100,\n  label,\n  showValue = false,\n  indeterminate = false,\n  variant = \"default\",\n  className,\n}: ProgressBarProps) {\n  const safeMax = max > 0 ? max : 100;\n  const safeValue = Math.min(Math.max(value, 0), safeMax);\n  const percentage = Math.round((safeValue / safeMax) * 100);\n\n  return (\n    <div className={cn(styles[variant], className)}>\n      <div className={styles.labelRow}>\n        <span className={styles.label}>{label}</span>\n        {showValue && !indeterminate ? (\n          <span className={styles.valueText} aria-hidden=\"true\">\n            {percentage}%\n          </span>\n        ) : null}\n      </div>\n\n      {indeterminate ? (\n        <div\n          className={styles.indeterminate}\n          role=\"progressbar\"\n          aria-label={label}\n          aria-busy=\"true\"\n        >\n          <span className={styles.indeterminateBar} aria-hidden=\"true\" />\n        </div>\n      ) : (\n        <progress\n          className={styles.track}\n          value={safeValue}\n          max={safeMax}\n          aria-label={label}\n        />\n      )}\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "~/components/ui/ProgressBar.tsx"
    },
    {
      "path": "components/ui/progress-bar.module.css",
      "content": ".track {\n  width: 100%;\n  height: var(--progress-track-height);\n  overflow: hidden;\n  border: none;\n  border-radius: min(var(--shape-radius-control), 9999px);\n  background: var(--semantic-border-default);\n  appearance: none;\n}\n\n.track::-webkit-progress-bar {\n  background: var(--semantic-border-default);\n  border-radius: inherit;\n}\n\n.track::-webkit-progress-value {\n  background: var(--progress-indicator);\n  border-radius: inherit;\n  transition: width 0.2s ease;\n}\n\n.track::-moz-progress-bar {\n  background: var(--progress-indicator);\n  border-radius: inherit;\n}\n\n.indeterminate {\n  position: relative;\n  width: 100%;\n  height: var(--progress-track-height);\n  overflow: hidden;\n  border-radius: min(var(--shape-radius-control), 9999px);\n  background: var(--semantic-border-default);\n}\n\n.indeterminateBar {\n  position: absolute;\n  inset: 0;\n  width: 40%;\n  background: var(--progress-indicator);\n  border-radius: inherit;\n  animation: progress-indeterminate var(--progress-animation-duration) ease-in-out infinite;\n}\n\n.labelRow {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 0.75rem;\n  margin-bottom: 0.5rem;\n}\n\n.label {\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--semantic-text-primary);\n}\n\n.valueText {\n  font-size: 0.75rem;\n  font-variant-numeric: tabular-nums;\n  color: var(--semantic-text-secondary);\n}\n\n.default {\n  --progress-indicator: var(--semantic-action-primary);\n}\n\n.success {\n  --progress-indicator: var(--semantic-feedback-success);\n}\n\n.warning {\n  --progress-indicator: var(--semantic-feedback-warning);\n}\n\n.danger {\n  --progress-indicator: var(--semantic-action-danger);\n}\n\n@keyframes progress-indeterminate {\n  0% {\n    transform: translateX(-100%);\n  }\n  100% {\n    transform: translateX(250%);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .track::-webkit-progress-value {\n    transition: none;\n  }\n\n  .indeterminateBar {\n    animation: none;\n    width: 100%;\n    opacity: 0.55;\n  }\n}\n",
      "type": "registry:ui",
      "target": "~/components/ui/progress-bar.module.css"
    },
    {
      "path": "lib/cn.ts",
      "content": "export function cn(...classes: Array<string | false | null | undefined>): string {\n  return classes.filter(Boolean).join(\" \");\n}\n",
      "type": "registry:lib",
      "target": "~/lib/cn.ts"
    }
  ]
}