Popover

from starhtml import *

positions = [
    ("Top", "top"),
    ("Right", "right"),
    ("Bottom", "bottom"),
    ("Left", "left"),
]

Div(
    *[
        Popover(
            PopoverTrigger(label, variant="outline", size="sm"),
            PopoverContent(
                P(f"Content positioned to the {side}.", cls="text-sm text-muted-foreground"),
                side=side,
                cls="w-48"
            )
        )
        for label, side in positions
    ],
    cls="flex flex-wrap justify-center gap-2"
)

from starhtml import *

Div(
    (width_val := Signal("pop_width", "")),
    (height_val := Signal("pop_height", "")),
    (content_ref := Signal("dims_content", _ref_only=True)),
    Popover(
        PopoverTrigger("Open popover", variant="outline"),
        PopoverContent(
            H3("Dimensions", cls="text-sm font-semibold"),
            P("Set the dimensions for the layer.", cls="text-sm text-muted-foreground"),
            Div(
                InputWithLabel(label="Width", placeholder="100%", signal=width_val),
                InputWithLabel(label="Height", placeholder="25px", signal=height_val),
                cls="grid gap-3"
            ),
            Div(
                Button(
                    "Cancel",
                    variant="outline",
                    size="sm",
                    data_on_click=content_ref.hidePopover()
                ),
                Button(
                    "Apply",
                    size="sm",
                    data_on_click=content_ref.hidePopover()
                ),
                cls="flex justify-end gap-2"
            ),
            cls="grid w-64 gap-3",
        ),
        signal="dims"
    )
)

from starhtml import *

Div(
    Div(
        Label(
            "API Key",
            Popover(
                PopoverTrigger(
                    Icon("lucide:help-circle", cls="size-3 text-muted-foreground"),
                    variant="ghost",
                    size="icon",
                    cls="size-5 p-0",
                    aria_label="API key help"
                ),
                PopoverContent(
                    H3("API Key", cls="text-sm font-semibold"),
                    P("Your API key authenticates requests to the service.", cls="text-sm text-muted-foreground"),
                    Ul(
                        Li("Keep it secret and secure"),
                        Li("Regenerate if compromised"),
                        cls="list-inside list-disc text-sm text-muted-foreground"
                    ),
                    cls="grid w-64 gap-2",
                    side="top"
                )
            ),
            fr="api-key-help",
        ),
        cls="grid w-full max-w-sm gap-1.5"
    ),
)

from starhtml import *

Popover(
    PopoverTrigger(
        Icon("lucide:info", cls="size-4"),
        "Notice",
        variant="outline"
    ),
    PopoverContent(
        PopoverClose(
            Icon("lucide:x", cls="size-3"),
            size="sm",
            variant="ghost"
        ),
        Div(
            Icon("lucide:alert-triangle", cls="size-5 shrink-0 text-amber-500"),
            Div(
                H3("System Maintenance", cls="text-sm font-semibold"),
                P("Scheduled maintenance tonight from 2:00 AM to 4:00 AM EST. Some features may be unavailable.",
                  cls="text-sm text-muted-foreground"),
                cls="grid gap-1"
            ),
            cls="flex gap-3"
        ),
        PopoverClose("Got it", size="sm", variant="default", cls="static ml-auto"),
        cls="grid gap-3"
    )
)