Popover

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open</Button>
  </PopoverTrigger>
  <PopoverContent>Content</PopoverContent>
</Popover>

function TutorialPopover() {
  const [step, setStep] = React.useState(1);
  const total = 3;
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Show tutorial</Button>
      </PopoverTrigger>
      {/* The card brings its own surface; the popover only places it. */}
      <PopoverContent align="start" className="w-92 border-0 bg-transparent p-0 shadow-none">
        <TourCard
          title="Tutorial title"
          body="Say what the new feature does in one sentence."
          step={step}
          total={total}
          onNext={() => setStep((s) => s + 1)}
          onBack={() => setStep((s) => s - 1)}
          onDismiss={close}
        />
      </PopoverContent>
    </Popover>
  );
}

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Show tip</Button>
  </PopoverTrigger>
  <PopoverContent align="start" className="w-92 border-0 bg-transparent p-0 shadow-none">
    <TourCard
      title="Customize your table"
      body="Now you can rearrange, hide and resize the columns."
      onNext={close}
      onDismiss={close}
    />
  </PopoverContent>
</Popover>

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Dimensions</Button>
  </PopoverTrigger>
  <PopoverContent align="start" className="w-80">
    <div className="grid gap-3">
      <div className="grid gap-1">
        <div className="text-base font-medium text-foreground">Dimensions</div>
        <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
      </div>
      <div className="grid grid-cols-3 items-center gap-3">
        <Label htmlFor="width" className="text-right">Width</Label>
        <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
      </div>
      <div className="grid grid-cols-3 items-center gap-3">
        <Label htmlFor="maxWidth" className="text-right">Max. width</Label>
        <Input id="maxWidth" defaultValue="300px" className="col-span-2 h-8" />
      </div>
    </div>
  </PopoverContent>
</Popover>

<Popover>
  <PopoverTrigger asChild>
    <Button variant="ghost" size="icon" aria-label="Notifications">
      <BellSimple weight="light" />
    </Button>
  </PopoverTrigger>
  <PopoverContent align="end" className="w-80 p-0">
    <div className="border-b px-4 py-3 text-sm font-medium">Notifications</div>
    <ul className="grid gap-0.5 p-2">
      {items.map(n => (
        <li key={n.id} className="rounded-sm p-3 text-sm hover:bg-accent">
          <div className="text-foreground">{n.title}</div>
          <div className="text-xs text-muted-foreground">{n.time}</div>
        </li>
      ))}
    </ul>
  </PopoverContent>
</Popover>

function InsideSheetRecipe() {
  const triggerRef = React.useRef<HTMLButtonElement>(null);
  const [popoverOpen, setPopoverOpen] = React.useState(false);
  const [container, setContainer] = React.useState<HTMLElement | null>(null);

  // On open, resolve the closest modal ancestor as the portal container.
  React.useEffect(() => {
    if (!popoverOpen) return;
    setContainer(
      triggerRef.current?.closest<HTMLElement>('[role="dialog"]') ?? null,
    );
  }, [popoverOpen]);

  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open Sheet with Popover inside</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader><SheetTitle>Container prop demo</SheetTitle></SheetHeader>
        <div className="p-6">
          <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
            <PopoverTrigger asChild>
              <Button ref={triggerRef} variant="outline">
                Open popover with 30 rows
              </Button>
            </PopoverTrigger>
            <PopoverContent
              container={container}
              align="start"
              className="p-0"
            >
              <div className="max-h-40 overflow-y-auto p-3">
                {Array.from({ length: 30 }).map((_, i) => (
                  <p key={i} className="py-1 text-sm text-foreground">
                    Row {i + 1} — try the wheel here
                  </p>
                ))}
              </div>
            </PopoverContent>
          </Popover>
        </div>
      </SheetContent>
    </Sheet>
  );
}

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";