import { useEffect, type ReactNode } from "react";
import { Button } from "@/components/ui/button";
import { createPortal } from "react-dom";
import { useSetupWizardSidebar } from "@/context/SetupWizardSidebarContext";
import { useSidebar } from "@/context/SidebarContext";
import { cn } from "@/lib/utils";
export function SetupWizardSidebar() {
const sidebar = useSetupWizardSidebar();
return (
);
}
export function SetupWizardNavigation({
labels,
ariaLabel = "Setup progress",
takeover = false,
inline = false,
step,
availableStep,
disabled = false,
onSelect,
}: {
labels: string[];
ariaLabel?: string;
takeover?: boolean;
inline?: boolean;
step: number;
availableStep: number;
disabled?: boolean;
onSelect: (step: number) => void;
}) {
const sidebar = useSetupWizardSidebar();
const { isMobile, setSidebarOpen } = useSidebar();
const setActive = sidebar?.setActive;
useEffect(() => {
if (!takeover || !setActive) return;
setActive(true);
return () => setActive(false);
}, [takeover, setActive]);
const navigation = (
);
// Standalone renders (including component previews) retain usable navigation.
if (!sidebar || inline) return navigation;
return sidebar.target ? createPortal(navigation, sidebar.target) : navigation;
}
/** Lets a form temporarily replace the section menu, without replacing global navigation. */
export function SetupWizardSidebarOutlet({ children }: { children: ReactNode }) {
const sidebar = useSetupWizardSidebar();
return sidebar?.active ? : children;
}
/** Each step owns one footer row; secondary actions stay with the primary action. */
export function SetupWizardFooter({ onSaveExit, children, disabled = false }: { onSaveExit: () => void; children: ReactNode; disabled?: boolean }) {
return ;
}