Dialog

from starhtml import *

Dialog(
    DialogTrigger(
        Icon("lucide:trash-2", cls="mr-2 h-4 w-4"),
        "Delete Account",
        variant="destructive"
    ),
    DialogContent(
        DialogHeader(
            DialogTitle("Are you absolutely sure?"),
            DialogDescription(
                "This action cannot be undone. This will permanently delete your "
                "account and remove your data from our servers."
            )
        ),
        Div(
            Icon("lucide:alert-triangle", cls="mt-0.5 h-5 w-5 shrink-0 text-destructive"),
            P(
                "All projects, files, and collaborator access will be permanently removed.",
                cls="text-sm text-muted-foreground"
            ),
            cls="flex gap-3 py-4"
        ),
        DialogFooter(
            DialogClose("Cancel", variant="outline"),
            DialogClose("Delete Account", variant="destructive", value="delete")
        )
    )
)

from starhtml import *

sections = [
    ("1. Acceptance of Terms", "By accessing and using this service, you accept and agree to be bound by these terms."),
    ("2. Use License", "Permission is granted to temporarily download one copy of the materials for personal, non-commercial viewing only."),
    ("3. Disclaimer", "Materials are provided on an 'as is' basis with no warranties, expressed or implied."),
    ("4. Limitations", "In no event shall we be liable for any damages arising from the use or inability to use our service."),
    ("5. Privacy", "Our privacy policy explains how we collect, use, and protect your data."),
    ("6. Termination", "We reserve the right to terminate accounts that violate these terms."),
]

Dialog(
    DialogTrigger("View Terms", variant="outline"),
    DialogContent(
        terms_accepted := Signal("terms_accepted", False),
        DialogHeader(
            DialogTitle("Terms of Service"),
            DialogDescription("Please review our terms before continuing")
        ),
        Div(
            *[Div(H3(title, cls="mb-1 font-semibold"), P(body, cls="mb-4 text-sm text-muted-foreground")) for title, body in sections],
            cls="my-4 max-h-[300px] overflow-y-auto rounded-md border px-4 py-4"
        ),
        CheckboxWithLabel(label="I have read and agree to the terms", signal=terms_accepted),
        DialogFooter(
            DialogClose("Decline", variant="outline"),
            DialogClose("Accept", data_attr_disabled=~terms_accepted)
        )
    ),
    size="lg"
)

from starhtml import *

sizes = [
    ("sm", "Small", "Compact confirmations and brief messages."),
    ("md", "Medium", "Standard forms and notifications."),
    ("lg", "Large", "Multi-section forms and detailed content."),
    ("xl", "Extra Large", "Data tables, comparisons, or complex layouts."),
]
Div(
    *[
        Dialog(
            DialogTrigger(label, variant="outline", size="sm"),
            DialogContent(
                DialogHeader(
                    DialogTitle(label),
                    DialogDescription(desc)
                ),
                DialogFooter(DialogClose("Close"))
            ),
            size=size
        )
        for size, label, desc in sizes
    ],
    cls="flex flex-wrap gap-2"
)

from starhtml import *

Dialog(
    DialogTrigger("Open Non-Modal", variant="outline"),
    DialogContent(
        DialogHeader(
            DialogTitle("Non-Modal Dialog"),
            DialogDescription(
                "No backdrop, no focus trap — the page behind stays fully interactive."
            )
        ),
        P(
            "Try clicking outside this dialog. It stays open without blocking the page.",
            cls="py-4 text-sm text-muted-foreground"
        ),
        DialogFooter(DialogClose("Dismiss"))
    ),
    modal=False
)

from starhtml import *

dialog_ref = Signal("prog_dialog", _ref_only=True)
is_open = Signal("prog_dialog_open", False)

Div(
    is_open,
    Button(
        "Open via Signal",
        variant="outline",
        data_on_click=[dialog_ref.showModal(), is_open.set(True)]
    ),
    P(
        data_text=is_open.if_("Dialog is open", "Dialog is closed"),
        cls="mt-2 text-sm text-muted-foreground"
    ),
    Dialog(
        DialogContent(
            DialogHeader(
                DialogTitle("Signal-Controlled"),
                DialogDescription("Opened programmatically without a DialogTrigger.")
            ),
            DialogFooter(DialogClose("Done")),
            show_close_button=False
        ),
        signal="prog_dialog"
    )
)