{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stepper-09",
  "title": "Progress stepper",
  "description": "A segmented bar that fills, with the step count under it.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/button.json",
    "https://ui.ndekocode.dev/r/motion-number.json",
    "https://ui.ndekocode.dev/r/stepper.json",
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/stepper/stepper-09.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { MotionNumber } from '@/components/core/motion-number';\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport { Button } from '@/registry/ndeko/ui/button';\nimport {\n  Stepper,\n  StepperIndicator,\n  StepperItem,\n} from '@/registry/ndeko/ui/stepper';\n\nconst STEPS = [1, 2, 3, 4];\nconst FIRST_STEP = 1;\n\nconst BAR = [\n  'bg-foreground/10 data-[state=active]:bg-foreground/10 data-[state=completed]:bg-foreground/10 w-full',\n  'after:bg-primary after:absolute after:inset-0 after:origin-left after:scale-x-0 after:rounded-[inherit] after:transition-[scale] after:duration-200 after:ease-out-strong rtl:after:origin-right',\n  'data-[state=active]:after:scale-x-100 data-[state=active]:after:duration-300 data-[state=completed]:after:scale-x-100 data-[state=completed]:after:duration-300',\n].join(' ');\n\nexport default function Stepper09() {\n  const [step, setStep] = useState(FIRST_STEP);\n  const isFirstStep = step === FIRST_STEP;\n  const isLastStep = step >= STEPS.length;\n\n  function moveBy(stepCount: number) {\n    setStep((previous) => previous + stepCount);\n  }\n\n  return (\n    <div className='mx-auto flex w-full max-w-xl flex-col gap-8 text-center'>\n      <div className='flex flex-col gap-3'>\n        <Stepper value={step} className='overflow-hidden rounded-full'>\n          {STEPS.map((item) => (\n            <StepperItem key={item} step={item} className='flex-1'>\n              <StepperIndicator className={cn(BAR, 'h-2 rounded-none')}>\n                <span className='sr-only'>{item}</span>\n              </StepperIndicator>\n            </StepperItem>\n          ))}\n        </Stepper>\n        <p\n          className='text-muted-foreground text-[13px] font-medium tabular-nums'\n          aria-live='polite'\n        >\n          <span className='sr-only'>\n            Step {step} of {STEPS.length}\n          </span>\n          <span className='inline-flex items-baseline' aria-hidden='true'>\n            Step&nbsp;\n            <MotionNumber value={step} />\n            &nbsp;of {STEPS.length}\n          </span>\n        </p>\n      </div>\n      <div className='flex justify-center gap-3'>\n        <Button\n          variant='outline'\n          className='w-32'\n          onClick={() => moveBy(-1)}\n          disabled={isFirstStep}\n          focusableWhenDisabled\n        >\n          Previous step\n        </Button>\n        <Button\n          variant='outline'\n          className='w-32'\n          onClick={() => moveBy(1)}\n          disabled={isLastStep}\n          focusableWhenDisabled\n        >\n          Next step\n        </Button>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "stepper"
  ],
  "type": "registry:component"
}