Tour

import { Button, Tour } from "@flinbu/seed";
import { Download, Map, Sun } from "lucide-react";

const [open, setOpen] = React.useState(false);

<div className="flex w-full max-w-lg flex-col gap-base">
  <div className="flex items-center justify-between rounded-lg border border-secondary p-xs">
    <div className="flex gap-xs"><Button id="tour-import" variant="secondary" size="sm" leftIcon={<Download />}>Import</Button><Button id="tour-theme" variant="ghost" size="sm" icon={<Sun />} aria-label="Theme" /></div>
    <Button id="tour-publish" size="sm">Publish</Button>
  </div>
  <Button variant="tertiary" size="sm" leftIcon={<Map />} className="self-start" onClick={() => setOpen(true)}>Start tour</Button>
  <Tour open={open} onOpenChange={setOpen} steps={[
    { target: "#tour-import", title: "Bring your tokens in", body: "Import from Figma or a JSON file. Nothing changes until you review it." },
    { target: "#tour-theme", title: "Check both modes", body: "Switch between Light and Dark to see every token in context." },
    { target: "#tour-publish", title: "Publish when ready", body: "Publishing creates a version your team can install.", align: "end" },
  ]} />
</div>