@undp/design-system-react/dist/Stepper.cjs.map

React based design system for UNDP

{"version":3,"file":"Stepper.cjs","names":[],"sources":["../src/components/ui/stepper.tsx"],"sourcesContent":["import { CheckIcon } from 'lucide-react';\nimport type React from 'react';\n\nimport { cn } from '@/lib/utils';\n\nfunction Stepper({\n  className,\n  steps,\n  currentStep = 0,\n  unfinishedStepsClassName,\n  finishedStepsClassName,\n  activeStepsClassName,\n  ...props\n}: React.HTMLAttributes<HTMLOListElement> & {\n  className?: string;\n  unfinishedStepsClassName?: string;\n  finishedStepsClassName?: string;\n  activeStepsClassName?: string;\n  steps: {\n    title: string;\n    description?: string;\n  }[];\n  currentStep?: number;\n}) {\n  return (\n    <ol\n      {...props}\n      className={cn(\n        'flex w-full list-none items-center justify-between gap-3 text-center text-base text-content-primary',\n        className,\n      )}\n    >\n      {steps.map((d, i) => (\n        <li\n          key={d.title}\n          className={cn(\n            'flex grow items-center',\n            i === steps.length - 1 ? 'grow-0' : 'grow',\n            i + 1 < currentStep\n              ? finishedStepsClassName\n              : i + 1 === currentStep\n                ? activeStepsClassName\n                : unfinishedStepsClassName,\n          )}\n        >\n          <div className='flex grow items-center gap-3'>\n            <div\n              className={cn(\n                'flex h-8 w-8 shrink-0 items-center justify-center rounded-full',\n                i + 1 < currentStep\n                  ? 'bg-info'\n                  : i + 1 === currentStep\n                    ? 'bg-foreground-soft'\n                    : 'bg-surface',\n              )}\n            >\n              {i + 1 < currentStep ? (\n                <CheckIcon className='h-4 w-4 shrink-0 stroke-background' />\n              ) : (\n                <div\n                  className={\n                    i + 1 === currentStep\n                      ? 'text-content-reverse text-sm'\n                      : 'text-content-primary text-sm'\n                  }\n                >\n                  {i + 1}\n                </div>\n              )}\n            </div>\n            <div className='flex shrink-0 flex-col'>\n              <div\n                className={cn(\n                  'text-left font-normal text-base rtl:text-right',\n                  i + 1 < currentStep ? 'text-info' : 'text-content-primary',\n                )}\n              >\n                {d.title}\n              </div>\n              {d.description ? (\n                <div className={cn('text-left text-content-tertiary text-sm rtl:text-right')}>\n                  {d.description}\n                </div>\n              ) : null}\n            </div>\n            {i === steps.length - 1 ? null : <div className='h-px w-full grow bg-surface' />}\n          </div>\n        </li>\n      ))}\n    </ol>\n  );\n}\n\nexport { Stepper };\n"],"mappings":"gLAKA,SAAS,EAAQ,CACf,YACA,QACA,cAAc,EACd,2BACA,yBACA,uBACA,GAAG,GAWF,CACD,OACE,EAAA,EAAA,IAAA,CAAC,KAAD,CACE,GAAI,EACJ,UAAW,EAAA,EACT,sGACA,CACF,WAEC,EAAM,KAAK,EAAG,KACb,EAAA,EAAA,IAAA,CAAC,KAAD,CAEE,UAAW,EAAA,EACT,yBACA,IAAM,EAAM,OAAS,EAAI,SAAW,OACpC,EAAI,EAAI,EACJ,EACA,EAAI,IAAM,EACR,EACA,CACR,YAEA,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,wCAAf,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,UAAW,EAAA,EACT,iEACA,EAAI,EAAI,EACJ,UACA,EAAI,IAAM,EACR,qBACA,YACR,WAEC,EAAI,EAAI,GACP,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAW,UAAU,oCAAsC,CAAA,GAE3D,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,UACE,EAAI,IAAM,EACN,+BACA,wCAGL,EAAI,CACF,CAAA,CAEJ,CAAA,GACL,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,kCAAf,EACE,EAAA,EAAA,IAAA,CAAC,MAAD,CACE,UAAW,EAAA,EACT,iDACA,EAAI,EAAI,EAAc,YAAc,sBACtC,WAEC,EAAE,KACA,CAAA,EACJ,EAAE,aACD,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,EAAG,wDAAwD,WACxE,EAAE,WACA,CAAA,EACH,IACD,IACJ,IAAM,EAAM,OAAS,EAAI,MAAO,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,6BAA+B,CAAA,CAC5E,GACH,EArDG,EAAE,KAqDL,CACL,CACC,CAAA,CAER"}