{
  "name": "tour-controlled-demo",
  "type": "registry:example",
  "dependencies": [
    "radix-ui"
  ],
  "registryDependencies": [
    "button",
    "tour"
  ],
  "files": [
    {
      "path": "examples/tour-controlled-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  Tour,\n  TourArrow,\n  TourClose,\n  TourDescription,\n  TourFooter,\n  TourHeader,\n  TourNext,\n  TourPrev,\n  TourSkip,\n  TourSpotlight,\n  TourSpotlightRing,\n  TourStep,\n  TourStepCounter,\n  TourTitle,\n} from \"@/registry/bases/radix/ui/tour\";\n\nexport default function TourControlledDemo() {\n  const [open, setOpen] = React.useState(false);\n  const [value, setValue] = React.useState(0);\n\n  const onStepChange = React.useCallback((step: number) => {\n    setValue(step);\n  }, []);\n\n  const onComplete = React.useCallback(() => {\n    setOpen(false);\n    setValue(0);\n  }, []);\n\n  const onSkip = React.useCallback(() => {\n    setOpen(false);\n    setValue(0);\n  }, []);\n\n  const onTourStart = React.useCallback(() => {\n    setValue(0);\n    setOpen(true);\n  }, []);\n\n  return (\n    <div className=\"flex min-h-[400px] flex-col items-center justify-center gap-8 p-8\">\n      <div className=\"flex flex-col items-center gap-4\">\n        <h1 id=\"controlled-title\" className=\"text-2xl font-bold\">\n          Controlled Tour\n        </h1>\n        <div className=\"flex items-center gap-2\">\n          <Button id=\"controlled-start-btn\" onClick={onTourStart}>\n            Start\n          </Button>\n          <Button\n            variant=\"outline\"\n            onClick={() => setValue(Math.max(0, value - 1))}\n            disabled={!open || value === 0}\n          >\n            Prev\n          </Button>\n          <Button\n            variant=\"outline\"\n            onClick={() => setValue(Math.min(3, value + 1))}\n            disabled={!open || value === 3}\n          >\n            Next\n          </Button>\n        </div>\n      </div>\n      <div className=\"flex w-full flex-col gap-6\">\n        <div className=\"grid grid-cols-2 gap-6\">\n          <div\n            id=\"controlled-step-1\"\n            className=\"rounded-lg border p-6 text-center\"\n          >\n            <h3 className=\"font-semibold\">Step 1</h3>\n            <p className=\"text-sm text-muted-foreground\">\n              First step in our controlled tour\n            </p>\n          </div>\n          <div\n            id=\"controlled-step-2\"\n            className=\"rounded-lg border p-6 text-center\"\n          >\n            <h3 className=\"font-semibold\">Step 2</h3>\n            <p className=\"text-sm text-muted-foreground\">\n              Second step with external controls\n            </p>\n          </div>\n        </div>\n        {open && value >= 2 && (\n          <div\n            id=\"controlled-step-3\"\n            className=\"animate-in rounded-lg border border-primary/50 bg-primary/5 p-6 text-center duration-300 fade-in slide-in-from-bottom-4\"\n          >\n            <h3 className=\"font-semibold\">Step 3</h3>\n            <p className=\"text-sm text-muted-foreground\">\n              Dynamic step that appears after step 2\n            </p>\n          </div>\n        )}\n      </div>\n      <Tour\n        open={open}\n        onOpenChange={setOpen}\n        value={value}\n        onValueChange={onStepChange}\n        onComplete={onComplete}\n        onSkip={onSkip}\n        stepFooter={\n          <TourFooter>\n            <div className=\"flex w-full items-center justify-between\">\n              <TourStepCounter />\n              <div className=\"flex gap-2\">\n                <TourPrev />\n                <TourNext />\n              </div>\n            </div>\n          </TourFooter>\n        }\n      >\n        <TourSpotlight />\n        <TourSpotlightRing />\n        <TourStep target=\"#controlled-title\" side=\"bottom\" align=\"center\">\n          <TourArrow />\n          <TourHeader>\n            <TourTitle>Controlled Tour</TourTitle>\n            <TourDescription>\n              This tour's state is controlled externally. Notice how the step\n              counter updates.\n            </TourDescription>\n          </TourHeader>\n          <TourClose />\n        </TourStep>\n        <TourStep target=\"#controlled-step-1\" side=\"top\" align=\"center\">\n          <TourArrow />\n          <TourHeader>\n            <TourTitle>External Controls</TourTitle>\n            <TourDescription>\n              You can control this tour using the external buttons above, or use\n              the built-in navigation.\n            </TourDescription>\n          </TourHeader>\n          <TourClose />\n        </TourStep>\n        <TourStep target=\"#controlled-step-2\" side=\"top\" align=\"center\">\n          <TourArrow />\n          <TourHeader>\n            <TourTitle>Second Feature</TourTitle>\n            <TourDescription>\n              The tour state is fully controlled by the parent component. Watch\n              what happens next!\n            </TourDescription>\n          </TourHeader>\n          <TourClose />\n        </TourStep>\n        <TourStep target=\"#controlled-step-3\" side=\"top\" align=\"center\">\n          <TourArrow />\n          <TourHeader>\n            <TourTitle>Dynamic Layout</TourTitle>\n            <TourDescription>\n              This element appeared when you reached this step, demonstrating\n              how the tour handles dynamic content and layout shifts.\n            </TourDescription>\n          </TourHeader>\n          <TourClose />\n        </TourStep>\n      </Tour>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}