{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "progress",
    "type": "registry:component",
    "title": "Progress",
    "description": "Horizontal progress bar with tone variants and an indeterminate mode for unknown durations. Set the fill width inline.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Feedback",
        "layout": "stack"
    },
    "files": [
        {
            "path": "components/progress.html",
            "type": "registry:file",
            "target": "components/progress.html",
            "content": "<!-- Progress\n     Set the fill width inline and mirror it on aria-valuenow.\n     Tone: default, success, warning, danger. Add data-indeterminate for an\n     unknown-duration bar. -->\n\n<div class=\"dp-progress\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"35\">\n  <div class=\"dp-progress-bar\" style=\"width: 35%;\"></div>\n</div>\n\n<div class=\"dp-progress\" data-tone=\"success\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"100\">\n  <div class=\"dp-progress-bar\" style=\"width: 100%;\"></div>\n</div>\n\n<div class=\"dp-progress\" data-tone=\"warning\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"70\">\n  <div class=\"dp-progress-bar\" style=\"width: 70%;\"></div>\n</div>\n\n<div class=\"dp-progress\" data-indeterminate role=\"progressbar\" aria-label=\"Loading\">\n  <div class=\"dp-progress-bar\"></div>\n</div>\n"
        },
        {
            "path": "components/progress.css",
            "type": "registry:file",
            "target": "components/progress.css",
            "content": "/* Progress\n   A horizontal progress bar. Set the fill width inline (or from JS) and mirror\n   it on the aria-valuenow attribute. Tone is set with data-tone on the track.\n   Add data-indeterminate for an unknown-duration bar. Colour from tokens.css. */\n\n.dp-progress {\n  width: 100%;\n  height: 0.5rem;\n  background: var(--dp-blue-200);\n  border-radius: var(--dp-radius-full);\n  overflow: hidden;\n}\n\n.dp-progress-bar {\n  height: 100%;\n  width: 0;\n  background: var(--dp-primary-bg);\n  border-radius: inherit;\n  transition: width var(--dp-transition);\n}\n\n.dp-progress[data-tone=\"success\"] .dp-progress-bar { background: var(--dp-success); }\n.dp-progress[data-tone=\"warning\"] .dp-progress-bar { background: var(--dp-warning); }\n.dp-progress[data-tone=\"danger\"] .dp-progress-bar { background: var(--dp-danger); }\n\n/* Indeterminate: a sliding sliver for unknown duration */\n.dp-progress[data-indeterminate] .dp-progress-bar {\n  width: 40%;\n  animation: dp-progress-slide 1.2s ease-in-out infinite;\n}\n\n@keyframes dp-progress-slide {\n  0% { transform: translateX(-100%); }\n  100% { transform: translateX(250%); }\n}\n"
        }
    ]
}