import { useState, type ReactNode } from "react"; import { Check, X, type LucideIcon } from "lucide-react"; import { Button } from "@/registry/dgit/ui/button"; import { cn } from "@/lib/utils"; /** First-run tip: a dark card (preview, title, body, button) joined by a line to the toolbar below. Step dots show progress. */ export type TourStep = { title: string; body: string; preview: ReactNode }; export function TourTip({ steps, toolbar, onDone, nextLabel = "Next", doneLabel = "Got it", replayLabel = "Show the tour again", label = "Tool tour" }: { steps: TourStep[]; toolbar: LucideIcon[]; onDone?: () => void; nextLabel?: string; doneLabel?: string; replayLabel?: string; label?: string }) { const [i, setI] = useState(0); const [gone, setGone] = useState(false); if (gone) return ; const s = steps[i], last = i === steps.length - 1; return (

{toolbar.map((Ic, k) => )}

); } /** Get-started checklist: one item open at a time (preview + body), checkbox on the right, close button. */ export type CheckItem = { id: string; title: string; body: string; preview: ReactNode }; export function Checklist({ title, items, openLabel = "Open checklist", closeLabel = "Close checklist" }: { title: string; items: CheckItem[]; openLabel?: string; closeLabel?: string }) { const [open, setOpen] = useState(items[0]?.id ?? ""); const [done, setDone] = useState>({}); const [shown, setShown] = useState(true); if (!shown) return ; const n = items.filter((x) => done[x.id]).length; return (

{title} · {n}/{items.length}

{items.map((it) => { const on = open === it.id; return (

{it.preview}

{it.body}

); })}

); }