{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "steps",
  "type": "registry:block",
  "title": "Steps",
  "description": "A \"how it works\" sequence as an ordered list, so the order is in the markup and not only in the visible numbers.",
  "categories": [
    "section"
  ],
  "registryDependencies": [
    "https://facadeui.dev/r/container.json",
    "https://facadeui.dev/r/feature-icon.json",
    "https://facadeui.dev/r/heading.json",
    "https://facadeui.dev/r/section.json",
    "https://facadeui.dev/r/section-header.json",
    "https://facadeui.dev/r/types.json",
    "https://facadeui.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "src/sections/steps.tsx",
      "type": "registry:component",
      "target": "components/sections/steps.tsx",
      "content": "/**\n * Steps — a numbered sequence: how it works, onboarding, a process.\n *\n * a11y: an ordered list, because the order is the information. That also means\n * the step numbers do not need to be announced separately — a screen reader\n * already says \"1 of 4\" for an `<ol>` item — so the large numeral shown beside\n * each step is `aria-hidden`. Announcing it as well would read \"one, one,\n * connect your repository\".\n *\n * `orientation=\"horizontal\"` draws a connector between steps. It is a\n * background decoration on the list, never an element of its own, so it adds\n * nothing to the accessibility tree.\n *\n * Dependencies: react, @/lib/types, @/lib/utils,\n * @/components/ui/container, @/components/ui/feature-icon, @/components/ui/heading,\n * @/components/ui/section, @/components/ui/section-header.\n */\n\nimport type { ElementType } from \"react\"\n\nimport type {\n  HeadingLevel,\n  IconComponent,\n  ListSlotProps,\n  SectionBaseProps,\n} from \"@/lib/types\"\nimport { cn, slugId } from \"@/lib/utils\"\nimport { Container } from \"@/components/ui/container\"\nimport { FeatureIcon } from \"@/components/ui/feature-icon\"\nimport { Heading } from \"@/components/ui/heading\"\nimport { Section } from \"@/components/ui/section\"\nimport { SectionHeader } from \"@/components/ui/section-header\"\n\nexport interface StepItem {\n  title: string\n  description: string\n  /** Replaces the numeral with an icon. */\n  icon?: IconComponent\n}\n\nexport interface StepsProps extends SectionBaseProps, ListSlotProps {\n  items: StepItem[]\n  title?: string\n  eyebrow?: string\n  description?: string\n  itemHeadingLevel?: HeadingLevel\n  orientation?: \"horizontal\" | \"vertical\"\n  align?: \"start\" | \"center\"\n}\n\nexport function Steps({\n  items,\n  title,\n  eyebrow,\n  description,\n  itemHeadingLevel,\n  orientation = \"horizontal\",\n  align = \"center\",\n  listAs,\n  itemAs,\n  headingLevel = 2,\n  as,\n  spacing = \"md\",\n  className,\n  id,\n}: StepsProps) {\n  // Ordered, because the order is the content.\n  const List = (listAs ?? \"ol\") as ElementType\n  const Item = (itemAs ?? \"li\") as ElementType\n  const titleId = title ? (id ? `${id}-title` : slugId(title)) : undefined\n  const itemLevel = itemHeadingLevel ?? (Math.min(headingLevel + 1, 6) as HeadingLevel)\n  const horizontal = orientation === \"horizontal\"\n\n  return (\n    <Section\n      as={as ?? (title ? \"section\" : \"div\")}\n      spacing={spacing}\n      labelledBy={titleId}\n      id={id}\n      className={className}\n    >\n      <Container className=\"flex flex-col gap-14\">\n        {title ? (\n          <SectionHeader\n            align={align}\n            eyebrow={eyebrow}\n            title={title}\n            description={description}\n            headingLevel={headingLevel}\n            titleId={titleId}\n          />\n        ) : null}\n\n        <List\n          className={cn(\n            horizontal\n              ? cn(\n                  \"grid gap-10 sm:gap-8\",\n                  items.length === 4 ? \"sm:grid-cols-2 lg:grid-cols-4\" : \"sm:grid-cols-3\",\n                )\n              : \"flex flex-col gap-10\",\n          )}\n        >\n          {items.map((item, index) => (\n            <Item\n              key={item.title}\n              className={cn(\n                \"relative flex gap-5\",\n                horizontal ? \"flex-col\" : \"flex-row\",\n                horizontal && align === \"center\" && \"items-center text-center\",\n              )}\n            >\n              <span className=\"relative flex shrink-0 items-center\">\n                {item.icon ? (\n                  <FeatureIcon icon={item.icon} shape=\"circle\" />\n                ) : (\n                  <span\n                    aria-hidden\n                    className=\"bg-primary text-primary-foreground flex size-11 items-center justify-center rounded-full text-base font-semibold\"\n                  >\n                    {index + 1}\n                  </span>\n                )}\n                {/* Decoration only: the sequence is carried by the <ol>. */}\n                {index < items.length - 1 ? (\n                  <span\n                    aria-hidden\n                    className={cn(\n                      \"bg-border absolute\",\n                      horizontal\n                        ? \"left-full ml-3 hidden h-px w-[calc(100%+1rem)] sm:block\"\n                        : \"left-1/2 top-full mt-3 h-[calc(100%+0.5rem)] w-px -translate-x-1/2\",\n                    )}\n                  />\n                ) : null}\n              </span>\n\n              <div className=\"flex flex-col gap-1.5\">\n                <Heading level={itemLevel} className=\"text-foreground font-semibold\">\n                  {item.title}\n                </Heading>\n                <p className=\"text-muted-foreground text-pretty text-sm\">\n                  {item.description}\n                </p>\n              </div>\n            </Item>\n          ))}\n        </List>\n      </Container>\n    </Section>\n  )\n}\n"
    }
  ],
  "docs": "Import styles/facade-tokens.css in your global stylesheet, after @import \"tailwindcss\". Set headingLevel to fit the page outline (sections default to h2). Pass next/link and next/image through the link and image props. Docs: https://facadeui.dev/components/steps"
}