Popover

from starhtml import *
from starui import *

placements = [
    ("Top", "top", "This popover appears above the trigger"),
    ("Right", "right", "This popover appears to the right"),
    ("Bottom", "bottom", "This popover appears below (default)"),
    ("Left", "left", "This popover appears to the left")
]

def create_placement_popover(label, side, description):
    return Popover(
        PopoverTrigger(label, variant="outline", cls="mr-2" if label != "Left" else ""),
        PopoverContent(
            P(description, cls="text-sm"),
            side=side,
            cls="w-56"
        )
    )

Div(
    *[create_placement_popover(label, side, description)
      for label, side, description in placements],
    cls="flex flex-wrap gap-2 justify-center"
)

from starhtml import *
from starui import *

Div(
    P("Click on the avatar to see profile details:", cls="text-sm text-muted-foreground mb-4"),
    Popover(
        PopoverTrigger(
            Avatar(
                Img(src="https://github.com/shadcn.png", alt="@shadcn"),
                size="sm",
                cls="mr-2"
            ),
            Span("@shadcn", cls="text-sm font-medium hover:underline"),
            variant="ghost",
            cls="flex items-center h-auto px-3 py-2 rounded-md hover:bg-accent"
        ),
        PopoverContent(
            Div(
                Div(
                    Avatar(
                        Img(src="https://github.com/shadcn.png", alt="@shadcn"),
                        size="md",
                        cls="mr-3"
                    ),
                    Div(
                        H3("shadcn", cls="font-semibold text-sm"),
                        P("@shadcn", cls="text-xs text-muted-foreground"),
                        Badge("Pro", variant="secondary", cls="mt-1")
                    ),
                    cls="flex items-start mb-3"
                ),
                P("Building beautiful and accessible UI components. Creator of ui/shadcn.", cls="text-sm text-muted-foreground mb-3"),
                Div(
                    *[Div(
                        Strong(value, cls="text-sm"),
                        P(label, cls="text-xs text-muted-foreground"),
                        cls="text-center"
                    ) for value, label in [("1.2k", "Following"), ("12.5k", "Followers"), ("342", "Repos")]],
                    cls="flex justify-around py-2 border-t border-b border-border my-3"
                ),
                Div(
                    Button("Follow", size="sm", cls="flex-1 mr-2"),
                    Button("Message", size="sm", variant="outline", cls="flex-1"),
                    cls="flex gap-2"
                )
            ),
            cls="w-80"
        )
    ),
    cls="flex flex-col items-center"
)

from starhtml import *
from starui import *

Div(
    (meeting_title := Signal("meeting_title", "")),
    (meeting_duration := Signal("meeting_duration", "30")),
    (meeting_notes := Signal("meeting_notes", "")),
    (popover_content := Signal("meeting_content", _ref_only=True)),
    Popover(
        PopoverTrigger(
            Icon("lucide:calendar", cls="h-4 w-4 mr-2"),
            "Schedule Meeting",
            variant="outline"
        ),
        PopoverContent(
            Div(
                H3("Schedule a Meeting", cls="font-semibold text-sm mb-4"),
                InputWithLabel(
                    label="Meeting Title",
                    placeholder="Weekly Standup",
                    signal=meeting_title,
                    required=True
                ),
                SelectWithLabel(
                    label="Duration",
                    options=[
                        ("15", "15 minutes"),
                        ("30", "30 minutes"),
                        ("60", "1 hour"),
                        ("120", "2 hours")
                    ],
                    value="30",
                    signal=meeting_duration
                ),
                Label("Date & Time", cls="text-sm font-medium mb-1 block"),
                (datetime_picker := DateTimePicker(
                    placeholder="Select date and time"
                )),
                TextareaWithLabel(
                    label="Notes (Optional)",
                    placeholder="Add meeting agenda or notes...",
                    rows=3,
                    signal=meeting_notes
                ),
                Div(
                    Button(
                        "Cancel",
                        type="button",
                        variant="outline",
                        size="sm",
                        data_on_click=[
                            meeting_title.set(""),
                            datetime_picker.datetime.set(""),
                            meeting_notes.set(""),
                            popover_content.hidePopover()
                        ]
                    ),
                    Button(
                        "Schedule",
                        type="button",
                        size="sm",
                        data_attr_disabled=~meeting_title | ~datetime_picker.datetime,
                        data_on_click=[
                            meeting_title.set(""),
                            datetime_picker.datetime.set(""),
                            meeting_notes.set(""),
                            popover_content.hidePopover()
                        ]
                    ),
                    cls="flex justify-end gap-2 pt-4"
                ),
                cls="space-y-4"
            ),
            cls="w-80"
        ),
        signal="meeting"
    )
)

from starhtml import *
from starui import *

Div(
    (selected_color := Signal("selected_color", "#3b82f6")),
    P("Choose a color:", cls="text-sm mb-4"),
    Popover(
        PopoverTrigger(
            Div(
                Div(
                    data_style_background_color=selected_color,
                    cls="w-6 h-6 rounded border border-border mr-2"
                ),
                Span(data_text=selected_color, cls="text-sm font-mono"),
                Icon("lucide:chevron-down", cls="h-4 w-4 ml-2"),
                cls="flex items-center"
            ),
            variant="outline",
            cls="h-auto px-3 py-2"
        ),
        PopoverContent(
            Div(
                H3("Choose Color", cls="font-semibold text-sm mb-3"),
                Div(
                    *[
                        Button(
                            data_on_click=selected_color.set(color),
                            style=f"background-color: {color}; width: 32px; height: 32px; border-radius: 6px;",
                            variant="ghost",
                            cls="p-0 hover:scale-110 transition-transform"
                        )
                        for color in [
                            "#0d2b45", "#203c56", "#544e68", "#8d697a",
                            "#d08159", "#ffaa5e", "#ffd4a3", "#ffecd6"
                        ]
                    ],
                    cls="grid grid-cols-4 gap-2 mb-4"
                ),
                Hr(cls="my-4"),
                Div(
                    Label("Custom Color:", cls="text-xs font-medium mb-2 block"),
                    Input(
                        type="color",
                        signal=selected_color,
                        cls="w-full h-10 rounded border cursor-pointer"
                    )
                )
            ),
            cls="w-64"
        )
    ),
    Div(
        P("Preview:", cls="text-sm font-medium mb-2"),
        Div(
            P("This text uses your selected color", data_style_color=selected_color, cls="font-medium"),
            Div(data_style_background_color=selected_color, cls="w-full h-16 rounded border mt-2")
        ),
        cls="mt-6 p-4 border rounded-lg"
    ),
    cls="max-w-sm"
)

from starhtml import *
from starui import *

Div(
    (theme_setting := Signal("theme_setting", "system")),
    (notifications_enabled := Signal("notifications_enabled", True)),
    (autosave_enabled := Signal("autosave_enabled", True)),
    Div(
        Div(
            Span("Dashboard", cls="text-lg font-semibold"),
            Div(
                Span("Projects", cls="text-sm text-muted-foreground"),
                Span("Team", cls="text-sm text-muted-foreground"),
                Span("Analytics", cls="text-sm text-muted-foreground"),
                cls="flex gap-6"
            ),
            cls="flex items-center gap-8"
        ),
        Popover(
            PopoverTrigger(
                Icon("lucide:settings", cls="h-4 w-4"),
                variant="ghost",
                size="icon"
            ),
            PopoverContent(
                Div(
                    Div(
                        Icon("lucide:settings", cls="h-4 w-4 mr-2"),
                        H3("Settings", cls="font-semibold text-base"),
                        cls="flex items-center mb-4"
                    ),
                    Div(
                        P("APPEARANCE", cls="text-xs font-medium text-muted-foreground mb-3"),
                        Div(
                            Label("Theme", cls="text-sm font-medium mb-2 block"),
                            ToggleGroup(
                                ("light", Div(Icon("lucide:sun", cls="h-4 w-4"), Span("Light", cls="ml-2 text-sm"), cls="flex items-center")),
                                ("dark", Div(Icon("lucide:moon", cls="h-4 w-4"), Span("Dark", cls="ml-2 text-sm"), cls="flex items-center")),
                                ("system", Div(Icon("lucide:laptop", cls="h-4 w-4"), Span("System", cls="ml-2 text-sm"), cls="flex items-center")),
                                signal=theme_setting,
                                variant="outline",
                                cls="grid grid-cols-3 w-full"
                            )
                        )
                    ),
                    Separator(cls="my-4"),
                    Div(
                        P("PREFERENCES", cls="text-xs font-medium text-muted-foreground mb-3"),
                        Div(
                            Label("Notifications", cls="text-sm font-medium"),
                            Switch(signal=notifications_enabled, checked=True),
                            cls="flex items-center justify-between mb-3"
                        ),
                        Div(
                            Label("Auto-save", cls="text-sm font-medium"),
                            Switch(signal=autosave_enabled, checked=True),
                            cls="flex items-center justify-between"
                        )
                    ),
                    Separator(cls="my-4"),
                    Button("Manage Account", variant="outline", size="sm", cls="w-full")
                ),
                cls="w-96",
                side="bottom",
                align="end"
            )
        ),
        cls="flex items-center justify-between p-4 border rounded-lg bg-card"
    ),
    cls="w-full max-w-md mx-auto"
)

from starhtml import *
from starui import *

Div(
    P("Form fields with help information:", cls="text-sm font-medium mb-4"),
    Div(
            Div(
                Label(
                    "API Key ",
                    Popover(
                        PopoverTrigger(
                            Icon("lucide:help-circle", cls="h-3 w-3 text-muted-foreground"),
                            variant="ghost",
                            size="icon",
                            cls="h-4 w-4 p-0 ml-1"
                        ),
                        PopoverContent(
                            Div(
                                H3("API Key Help", cls="font-semibold text-sm mb-2"),
                                P("Your API key is used to authenticate requests to our service.", cls="text-sm mb-2"),
                                Ul(
                                    Li("Keep it secret and secure", cls="text-sm"),
                                    Li("Don't share it publicly", cls="text-sm"),
                                    Li("Regenerate if compromised", cls="text-sm"),
                                    cls="list-disc list-inside space-y-1 text-muted-foreground"
                                ),
                                Hr(cls="my-3"),
                                A(
                                    Icon("lucide:external-link", cls="h-3 w-3 mr-2"),
                                    "Learn more in docs",
                                    href="#",
                                    cls="text-xs text-blue-600 hover:text-blue-800 flex items-center"
                                )
                            ),
                            cls="w-64",
                            side="top"
                        )
                    ),
                    cls="text-sm font-medium flex items-center"
                ),
                Input(type="password", placeholder="sk-1234567890abcdef", cls="w-full mt-1"),
                cls="mb-4"
            ),
            Div(
                Label(
                    "Webhook URL ",
                    Popover(
                        PopoverTrigger(
                            Icon("lucide:help-circle", cls="h-3 w-3 text-muted-foreground"),
                            variant="ghost",
                            size="icon",
                            cls="h-4 w-4 p-0 ml-1"
                        ),
                        PopoverContent(
                            Div(
                                H3("Webhook Configuration", cls="font-semibold text-sm mb-2"),
                                P("The webhook URL will receive POST requests when events occur.", cls="text-sm mb-3"),
                                Div(
                                    H3("Requirements:", cls="text-xs font-semibold mb-1"),
                                    Ul(
                                        Li("Must be HTTPS", cls="text-xs"),
                                        Li("Must respond with 200 OK", cls="text-xs"),
                                        Li("Should handle JSON payload", cls="text-xs"),
                                        cls="list-disc list-inside space-y-1 text-muted-foreground mb-3"
                                    )
                                ),
                                Div(
                                    H3("Example:", cls="text-xs font-semibold mb-1"),
                                    Code("https://api.example.com/webhooks", cls="text-xs bg-muted px-2 py-1 rounded block")
                                )
                            ),
                            cls="w-72",
                            side="top"
                        )
                    ),
                    cls="text-sm font-medium flex items-center"
                ),
                Input(type="url", placeholder="https://api.example.com/webhook", cls="w-full mt-1")
            )
        ),
        cls="max-w-md"
    )

from starhtml import *
from starui import *

Popover(
    PopoverTrigger(
        Icon("lucide:info", cls="h-4 w-4 mr-2"),
        "Important Notice",
        variant="outline"
    ),
    PopoverContent(
        Div(
            PopoverClose(
                Icon("lucide:x", cls="h-3 w-3"),
                size="sm",
                variant="ghost"
            ),
            Div(
                Icon("lucide:alert-triangle", cls="h-5 w-5 text-amber-500 mr-3"),
                Div(
                    H3("System Maintenance", cls="font-semibold text-sm mb-1"),
                    P("Scheduled maintenance will occur tonight from 2:00 AM to 4:00 AM EST.",
                      cls="text-sm text-muted-foreground mb-3"),
                    P("During this time, some features may be unavailable.",
                      cls="text-sm text-muted-foreground mb-3")
                ),
                cls="flex items-start"
            ),
            Div(
                Button("Got it", size="sm", variant="outline"),
                Button("Learn more", size="sm", cls="ml-2"),
                cls="flex justify-end"
            ),
            cls="space-y-3"
        )
    )
)