{
  "generatedFrom": "steps.contract.json",
  "component": "Steps",
  "slug": "steps",
  "group": "Navigation",
  "tier": "composite-antd",
  "summary": "Show progress through a sequence of ordered stages — wizards, onboarding, checkouts — rendered through the shared Steps.",
  "install": {
    "package": "@ahaslides-product/design",
    "registry": "https://npm.pkg.github.com",
    "scope": "@ahaslides-product",
    "auth": "Published to GitHub Packages — needs a GitHub token with read:packages. Configure the @ahaslides-product scope in .npmrc before installing.",
    "npmrc": "@ahaslides-product:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages",
    "command": "npm i @ahaslides-product/design",
    "tokenLayer": "import '@ahaslides-product/design/tokens.css';",
    "import": "import '@ahaslides-product/design/steps-theme';",
    "element": null,
    "registers": null
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/steps/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/steps/steps.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/steps.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/steps.llms.txt",
    "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt"
  },
  "recommendedSnippet": "html",
  "vibeCode": "Emit the HTML snippet by default — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler. Paste into an .html file and it renders with no build step.",
  "frameworks": {
    "react": {
      "package": "antd",
      "major": 6
    },
    "vue": {
      "package": "ant-design-vue",
      "major": 4
    },
    "html": {
      "via": "cdn-react",
      "runnable": "paste-and-run — React + antd loaded from a CDN, no build step"
    }
  },
  "props": [
    {
      "name": "current",
      "type": "number",
      "default": "0",
      "desc": "Zero-based index of the active step"
    },
    {
      "name": "items",
      "type": "{ title, description?, icon? }[]",
      "default": "[]",
      "desc": "The ordered stages"
    },
    {
      "name": "direction",
      "type": "horizontal | vertical",
      "default": "horizontal",
      "desc": "Layout axis"
    },
    {
      "name": "size",
      "type": "default | small",
      "default": "default",
      "desc": "Step scale"
    },
    {
      "name": "progressDot",
      "type": "boolean",
      "default": "false",
      "desc": "Render a compact dot rail instead of numbered icons"
    },
    {
      "name": "status",
      "type": "wait | process | finish | error",
      "default": "process",
      "desc": "State of the current step — error paints it red"
    },
    {
      "name": "onChange",
      "type": "(current) => void",
      "default": "—",
      "desc": "Fires when a step is clicked (if navigable)"
    }
  ],
  "tokens": [
    "colorPrimary",
    "colorText",
    "Steps.colorPrimary",
    "Steps.iconSize",
    "Steps.iconFontSize",
    "Steps.titleLineHeight"
  ],
  "spec": [
    {
      "label": "Icon",
      "value": "32px circle · brand #6A1EBB for current/finished"
    },
    {
      "label": "Current",
      "value": "filled brand icon + brand title"
    },
    {
      "label": "Finished",
      "value": "brand ring + check"
    },
    {
      "label": "Waiting",
      "value": "muted ring + grey title"
    },
    {
      "label": "Layout",
      "value": "horizontal (default) or direction=vertical"
    },
    {
      "label": "Size",
      "value": "default (32 icon) or size=small (24 icon)"
    },
    {
      "label": "Style",
      "value": "numbered icon (default) or progressDot for a compact dot rail"
    },
    {
      "label": "Error",
      "value": "status=error paints the current step red (colorError)"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "Steps",
        "when": "a linear sequence of stages where the user should see where they are and what's left"
      },
      {
        "what": "Tabs",
        "when": "peer views the user switches between freely — no order, no progress"
      },
      {
        "what": "Progress",
        "when": "a single continuous completion metric, not discrete named stages"
      }
    ],
    "note": "Keep titles to a short noun phrase per stage. Reserve Steps for genuinely ordered flows — if the sections have no order, use Tabs. Show a description only when the title alone is ambiguous.",
    "dsv3": "COVERED — antd v6 Steps themed to DS V3 (32px brand icon, colorPrimary #6A1EBB, radius 8). Matrix demonstrated interactively: direction horizontal/vertical, size default/small, numbered vs progressDot rail, per-step wait/process/finish/error status, optional descriptions, and clickable navigation. Verified via Figma search_design_system against the DS V3 Steps set."
  },
  "surfaces": [
    "editor",
    "dashboard",
    "settings"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step, no bundler.\n     Steps is a COMPOSITE (antd, no framework-free element), so its HTML form is a CDN-React\n     page — React + antd load from a CDN (esm.sh) and mount on open. It consumes the SAME shared\n     `stepsTheme` the React/Vue wrappers use, so it renders the DS V3 look (brand current/finished\n     step, 32px icon, brand titles).\n     No JSX here (JSX needs a compiler) — we use React.createElement via the `h` alias. -->\n<div id=\"root\"></div>\n<script type=\"module\">\n  import React from 'https://esm.sh/react@18';\n  import { createRoot } from 'https://esm.sh/react-dom@18/client';\n  import { ConfigProvider, Steps } from 'https://esm.sh/antd@6?deps=react@18,react-dom@18';\n  import { stepsTheme } from 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/steps-theme.js';\n\n  const h = React.createElement;\n  const items = [{ title: 'Details' }, { title: 'Content' }, { title: 'Publish' }];\n\n  createRoot(document.getElementById('root')).render(\n    h(ConfigProvider, { theme: stepsTheme },\n      h('div', { style: { width: 480 } },\n        h(Steps, { current: 1, items })\n      )\n    )\n  );\n</script>\n",
    "react": "import { ConfigProvider, Steps } from 'antd';   // antd v6\nimport { stepsTheme } from '@ahaslides-product/design/steps-theme';\n\nconst items = [\n  { title: 'Details' },\n  { title: 'Content' },\n  { title: 'Publish' },\n];\n\n<ConfigProvider theme={stepsTheme}>\n  <Steps current={current} items={items} onChange={setCurrent} />\n</ConfigProvider>\n// One shared stepsTheme → the DS V3 look; reserve Steps for genuinely ordered flows, use Tabs for peers.\n",
    "vue": "<script setup>\nimport { ref } from 'vue';\nimport { ConfigProvider, Steps } from 'ant-design-vue';   // ant-design-vue v4\nimport { stepsTheme } from '@ahaslides-product/design/steps-theme';\n\nconst current = ref(1);\nconst items = [\n  { title: 'Details' },\n  { title: 'Content' },\n  { title: 'Publish' },\n];\n</script>\n\n<template>\n  <a-config-provider :theme=\"stepsTheme\">\n    <a-steps v-model:current=\"current\" :items=\"items\" />\n  </a-config-provider>\n</template>\n<!-- The SAME stepsTheme as React → one DS V3 look across both vendor libraries. -->\n",
    "theme": "// @ahaslides-product/design/steps-theme — declared ONCE, consumed by both tiers.\nimport { stepsTheme } from '@ahaslides-product/design/steps-theme';\n\nexport const stepsTheme = {\n  token: {\n    colorPrimary: '#6A1EBB',\n    colorText: '#1A1A1A',\n    borderRadius: 8,\n    fontFamily: 'var(--aha-font-product, \"Plus Jakarta Sans\", sans-serif)',\n  },\n  components: {\n    Steps: {\n      colorPrimary: '#6A1EBB',   // current/finished accent\n      iconSize: 32,\n      iconFontSize: 14,\n      titleLineHeight: 32,\n    },\n  },\n};\n"
  }
}