{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"labelled-linear-progress-bar-with-value","type":"registry:component","title":"Labelled Linear Progress Bar With Value","description":"Free Tailwind progress bar with a label, percentage and role progressbar, filled with a scaleX transform, in React and plain HTML, CSS and JavaScript.","dependencies":[],"files":[{"path":"components/we-inc/labelled-linear-progress-bar-with-value.tsx","type":"registry:component","content":"import { useState } from \"react\";\n\n// Setup steps: the bar shows the share that is done.\nconst STEPS = [\"Add your logo\", \"Pick a colour theme\", \"Write the About page\", \"Connect a domain\", \"Publish\"];\n\nexport default function LabelledLinearProgressBar() {\n  const [done, setDone] = useState(3);\n  const pct = Math.round((done / STEPS.length) * 100);\n\n  return (\n    <section className=\"bg-white px-4 py-16\">\n      <div className=\"mx-auto max-w-lg rounded-2xl border border-slate-200 p-6 sm:p-8\">\n        <div className=\"flex items-baseline justify-between gap-4\">\n          <h2 id=\"lpb-label\" className=\"text-base font-semibold text-slate-900\">Site setup</h2>\n          <span className=\"text-sm font-semibold tabular-nums text-slate-900\" aria-hidden=\"true\">{pct}%</span>\n        </div>\n        <p className=\"mt-1 text-sm text-slate-600\">{done} of {STEPS.length} steps done for Bramble &amp; Oak Florists</p>\n\n        <div\n          role=\"progressbar\"\n          aria-labelledby=\"lpb-label\"\n          aria-valuemin={0}\n          aria-valuemax={100}\n          aria-valuenow={pct}\n          aria-valuetext={`${pct} percent, ${done} of ${STEPS.length} steps`}\n          className=\"mt-4 h-2.5 overflow-hidden rounded-full bg-slate-100\"\n        >\n          <div\n            className=\"h-full w-full origin-left rounded-full bg-blue-600 transition-transform duration-500 ease-out motion-reduce:transition-none\"\n            style={{ transform: `scaleX(${done / STEPS.length})` }}\n          />\n        </div>\n\n        <ol className=\"mt-6 space-y-1\">\n          {STEPS.map((s, i) => (\n            <li key={s} className=\"flex h-9 items-center gap-3 text-sm\">\n              <span className={`grid h-5 w-5 shrink-0 place-items-center rounded-full ${i < done ? \"bg-blue-600\" : \"border-2 border-slate-300\"}`} aria-hidden=\"true\">\n                {i < done && <svg viewBox=\"0 0 12 12\" width=\"10\" height=\"10\"><path d=\"M2.5 6.2l2.2 2.2 4.8-4.9\" fill=\"none\" stroke=\"#fff\" strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg>}\n              </span>\n              <span className={i < done ? \"text-slate-500 line-through decoration-slate-400\" : i === done ? \"font-medium text-slate-900\" : \"text-slate-700\"}>{s}</span>\n              <span className=\"sr-only\">{i < done ? \"done\" : \"to do\"}</span>\n            </li>\n          ))}\n        </ol>\n\n        <div className=\"mt-6 flex gap-2\">\n          <button type=\"button\" disabled={done >= STEPS.length} onClick={() => setDone((d) => d + 1)} className=\"h-10 rounded-lg bg-slate-900 px-4 text-sm font-medium text-white hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 disabled:bg-slate-200 disabled:text-slate-700\">Mark next step done</button>\n          <button type=\"button\" disabled={done === 0} onClick={() => setDone((d) => d - 1)} className=\"h-10 rounded-lg border border-slate-300 px-4 text-sm font-medium text-slate-800 hover:bg-slate-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 disabled:text-slate-500\">Undo</button>\n        </div>\n      </div>\n    </section>\n  );\n}\n"}]}