{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "how-it-works-tabbed-steps",
  "title": "How It Works — Tabbed Steps",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/how-it-works-tabbed-steps/HowItWorksTabbedSteps.tsx",
      "content": "'use client'\n\nimport { Check } from 'lucide-react'\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\nexport function HowItWorksTabbedSteps() {\n  return (\n    <section data-slot=\"how-it-works-tabbed-steps\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div className=\"max-w-2xl\">\n          <Badge variant=\"secondary\">How it works</Badge>\n          <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">\n            Pick a stage to see what it produces\n          </h2>\n        </div>\n\n        <Tabs defaultValue=\"connect\" orientation=\"vertical\" className=\"mt-10\">\n          <div className=\"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\" className=\"h-auto w-full flex-col items-stretch\">\n              {steps.map((step, index) => (\n                <TabsTrigger\n                  key={step.id}\n                  value={step.id}\n                  variant=\"underline\"\n                  orientation=\"vertical\"\n                  className=\"justify-start gap-3\"\n                >\n                  <span className=\"text-muted-foreground font-mono text-xs\">{String(index + 1).padStart(2, '0')}</span>\n                  {step.label}\n                </TabsTrigger>\n              ))}\n            </TabsList>\n\n            {steps.map((step) => (\n              <TabsContent key={step.id} value={step.id} className=\"mt-0\">\n                {/* min-h keeps the panel from collapsing between stages. */}\n                <div className=\"grid min-h-[20rem] gap-6 sm:grid-cols-2\">\n                  <div>\n                    <p className=\"text-muted-foreground text-sm\">You do</p>\n                    <p className=\"mt-1.5 text-lg leading-snug font-medium text-balance\">{step.action}</p>\n\n                    <Separator className=\"my-5\" />\n\n                    <p className=\"text-muted-foreground text-sm\">You get</p>\n                    <p className=\"mt-1.5 flex items-start gap-2 text-sm leading-relaxed\">\n                      <Check className=\"text-primary mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                      <span>{step.result}</span>\n                    </p>\n\n                    <Button variant=\"link\" className=\"mt-5 h-auto p-0\">\n                      Read this step in the docs\n                    </Button>\n                  </div>\n\n                  <Card className=\"self-start\">\n                    <CardContent className=\"p-0\">\n                      <div className=\"border-border text-muted-foreground border-b px-4 py-2.5 font-mono text-xs\">\n                        {step.label}\n                      </div>\n                      <ul className=\"divide-border divide-y\">\n                        {step.rows.map((row) => (\n                          <li key={row.name} className=\"flex items-center justify-between gap-4 px-4 py-2.5\">\n                            <span className=\"min-w-0 truncate font-mono text-xs\">{row.name}</span>\n                            <span className=\"text-muted-foreground shrink-0 text-xs\">{row.detail}</span>\n                          </li>\n                        ))}\n                      </ul>\n                    </CardContent>\n                  </Card>\n                </div>\n              </TabsContent>\n            ))}\n          </div>\n        </Tabs>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/HowItWorksTabbedSteps.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/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"
  ]
}