{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"segmented-step-progress-bar","type":"registry:component","title":"Segmented Step Progress Bar","description":"","dependencies":[],"files":[{"path":"components/we-inc/segmented-step-progress-bar.tsx","type":"registry:component","content":"import { useState } from \"react\";\n\nconst STEPS = [\"Bag\", \"Delivery\", \"Payment\", \"Review\"];\n\nexport default function SegmentedStepProgressBar() {\n  const [step, setStep] = useState(2); // index of the current step\n\n  return (\n    <section className=\"bg-[#f6f7f2] px-4 py-16\">\n      <div className=\"mx-auto max-w-2xl\">\n        <p className=\"text-sm font-medium text-lime-900\">Checkout, Wildgrain Coffee</p>\n        <h2 className=\"mt-1 text-2xl font-semibold tracking-tight text-stone-900\">Step {step + 1} of {STEPS.length}: {STEPS[step]}</h2>\n\n        <nav aria-label=\"Checkout progress\" className=\"mt-6\">\n          <ol className=\"grid grid-cols-4 gap-2\">\n            {STEPS.map((s, i) => {\n              const state = i < step ? \"done\" : i === step ? \"now\" : \"next\";\n              return (\n                <li key={s} aria-current={state === \"now\" ? \"step\" : undefined}>\n                  <span className={`block h-2 rounded-full transition-colors duration-300 motion-reduce:transition-none ${state === \"done\" ? \"bg-lime-700\" : \"bg-stone-300\"}`}>\n                    {state === \"now\" && <span className=\"block h-full w-1/2 rounded-full bg-lime-500\" aria-hidden=\"true\" />}\n                  </span>\n                  <span className={`mt-2.5 flex items-center gap-1.5 text-xs font-medium sm:text-sm ${state === \"next\" ? \"text-stone-600\" : \"text-stone-900\"}`}>\n                    {state === \"done\" && (\n                      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" aria-hidden=\"true\" className=\"shrink-0\"><circle cx=\"8\" cy=\"8\" r=\"7\" fill=\"#4d7c0f\" /><path d=\"M5 8.3l2 2 4-4.3\" fill=\"none\" stroke=\"#fff\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" /></svg>\n                    )}\n                    {s}\n                    <span className=\"sr-only\">{state === \"done\" ? \", completed\" : state === \"now\" ? \", current step\" : \"\"}</span>\n                  </span>\n                </li>\n              );\n            })}\n          </ol>\n        </nav>\n\n        <div className=\"mt-8 rounded-xl border border-stone-200 bg-white p-5\">\n          <p className=\"text-sm text-stone-700\">{step === 2 ? \"Card ending 0042, billing address same as delivery.\" : `Details for ${STEPS[step].toLowerCase()} go here.`}</p>\n        </div>\n\n        <div className=\"mt-6 flex justify-between\">\n          <button type=\"button\" disabled={step === 0} onClick={() => setStep((s) => s - 1)} className=\"h-11 rounded-full border border-stone-300 bg-white px-5 text-sm font-medium text-stone-800 hover:bg-stone-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-700 disabled:text-stone-500\">Back</button>\n          <button type=\"button\" disabled={step === STEPS.length - 1} onClick={() => setStep((s) => s + 1)} className=\"h-11 rounded-full bg-lime-800 px-6 text-sm font-semibold text-white hover:bg-lime-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-lime-700 focus-visible:ring-offset-2 disabled:bg-stone-300 disabled:text-stone-700\">\n            {step === STEPS.length - 2 ? \"Review order\" : \"Continue\"}\n          </button>\n        </div>\n      </div>\n    </section>\n  );\n}\n"}]}