{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "how-it-works-tabbed-steps",
  "title": "How It Works — Tabbed Steps",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/how-it-works-tabbed-steps/HowItWorksTabbedSteps.vue",
      "content": "<script setup lang=\"ts\">\nimport { Check } from 'lucide-vue-next'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\nconst steps = [\n  {\n    id: 'connect',\n    label: 'Connect',\n    action: 'Point us at the warehouse with a read-only role.',\n    result: 'Schema mirrored, 412 tables catalogued, nothing copied out.',\n    rows: [\n      { name: 'warehouse.orders', detail: '2.4M rows' },\n      { name: 'warehouse.refunds', detail: '88k rows' },\n      { name: 'warehouse.fx_rates', detail: 'daily' },\n    ],\n  },\n  {\n    id: 'define',\n    label: 'Define',\n    action: 'Author the metric as a file and open a pull request.',\n    result: 'Reviewed by its owner, with a diff and a revert path.',\n    rows: [\n      { name: 'revenue_net', detail: 'finance-analytics' },\n      { name: 'margin_by_channel', detail: 'finance-analytics' },\n      { name: 'pipeline_weighted', detail: 'revops' },\n    ],\n  },\n  {\n    id: 'certify',\n    label: 'Certify',\n    action: 'Reconcile the definition against the prior four quarters.',\n    result: 'Sign-off recorded; the metric can now be published.',\n    rows: [\n      { name: 'Q4 2025', detail: 'matched' },\n      { name: 'Q3 2025', detail: 'matched' },\n      { name: 'Q2 2025', detail: 'matched' },\n    ],\n  },\n  {\n    id: 'publish',\n    label: 'Publish',\n    action: 'Release to every consumer at once.',\n    result: 'Dashboards, exports, and the API resolve the same number.',\n    rows: [\n      { name: 'Exec summary', detail: 'live' },\n      { name: 'Finance close pack', detail: 'live' },\n      { name: 'Partner API', detail: 'live' },\n    ],\n  },\n]\n</script>\n\n<template>\n  <section data-slot=\"how-it-works-tabbed-steps\" class=\"bg-background\">\n    <div class=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n      <div class=\"max-w-2xl\">\n        <Badge variant=\"secondary\">How it works</Badge>\n        <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Pick a stage to see what it produces</h2>\n      </div>\n\n      <Tabs default-value=\"connect\" orientation=\"vertical\" class=\"mt-10\">\n        <div class=\"grid gap-8 lg:grid-cols-[16rem_1fr] lg:gap-12\">\n          <!-- Vertical tab rail: orientation is set on both list and triggers so\n               arrow keys move up and down rather than left and right. -->\n          <TabsList variant=\"underline\" orientation=\"vertical\" class=\"h-auto w-full flex-col items-stretch\">\n            <TabsTrigger\n              v-for=\"(step, index) in steps\"\n              :key=\"step.id\"\n              :value=\"step.id\"\n              variant=\"underline\"\n              orientation=\"vertical\"\n              class=\"justify-start gap-3\"\n            >\n              <span class=\"text-muted-foreground font-mono text-xs\">{{ String(index + 1).padStart(2, '0') }}</span>\n              {{ step.label }}\n            </TabsTrigger>\n          </TabsList>\n\n          <TabsContent v-for=\"step in steps\" :key=\"step.id\" :value=\"step.id\" class=\"mt-0\">\n            <!-- min-h keeps the panel from collapsing between stages. -->\n            <div class=\"grid min-h-[20rem] gap-6 sm:grid-cols-2\">\n              <div>\n                <p class=\"text-muted-foreground text-sm\">You do</p>\n                <p class=\"mt-1.5 text-lg leading-snug font-medium text-balance\">{{ step.action }}</p>\n\n                <Separator class=\"my-5\" />\n\n                <p class=\"text-muted-foreground text-sm\">You get</p>\n                <p class=\"mt-1.5 flex items-start gap-2 text-sm leading-relaxed\">\n                  <Check class=\"text-primary mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                  <span>{{ step.result }}</span>\n                </p>\n\n                <Button variant=\"link\" class=\"mt-5 h-auto p-0\">Read this step in the docs</Button>\n              </div>\n\n              <Card class=\"self-start\">\n                <CardContent class=\"p-0\">\n                  <div class=\"border-border text-muted-foreground border-b px-4 py-2.5 font-mono text-xs\">\n                    {{ step.label }}\n                  </div>\n                  <ul class=\"divide-border divide-y\">\n                    <li\n                      v-for=\"row in step.rows\"\n                      :key=\"row.name\"\n                      class=\"flex items-center justify-between gap-4 px-4 py-2.5\"\n                    >\n                      <span class=\"min-w-0 truncate font-mono text-xs\">{{ row.name }}</span>\n                      <span class=\"text-muted-foreground shrink-0 text-xs\">{{ row.detail }}</span>\n                    </li>\n                  </ul>\n                </CardContent>\n              </Card>\n            </div>\n          </TabsContent>\n        </div>\n      </Tabs>\n    </div>\n  </section>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/HowItWorksTabbedSteps.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/tabs.json"
  ],
  "description": "Step explainer where a vertical tab list of stages swaps a paired detail panel showing the action, the expected result, and a primitive-built screen for that step.",
  "categories": [
    "marketing"
  ]
}