Sheet

from starhtml import *

sides = ["top", "right", "bottom", "left"]

def create_side_demo(side):
    return Sheet(
        SheetTrigger(side.capitalize(), variant="outline"),
        SheetContent(
            SheetHeader(
                SheetTitle(f"{side.capitalize()} sheet"),
                SheetDescription(f"This sheet slides in from the {side} edge.")
            ),
            SheetFooter(
                SheetClose("Close", variant="outline")
            ),
            side=side,
        ),
    )

Div(
    *[create_side_demo(s) for s in sides],
    cls="flex flex-wrap justify-center gap-2"
)

from starhtml import *

sheet_configs = [
    {"button": "Small", "size": "sm", "title": "Small Sheet", "description": "Compact size for simple content",
     "content": "This is a small sheet (max-w-sm) — perfect for simple forms and quick actions."},
    {"button": "Medium", "size": "md", "title": "Medium Sheet", "description": "Standard size for most content",
     "content": "This is a medium sheet (max-w-md) — the default size for forms and settings."},
    {"button": "Large", "size": "lg", "title": "Large Sheet", "description": "More space for complex content",
     "content": "This is a large sheet (max-w-lg) — great for detailed forms and data views."},
    {"button": "Extra Large", "size": "xl", "title": "Extra Large Sheet", "description": "Maximum width for extensive content",
     "content": "This is an extra large sheet (max-w-xl) — ideal for dashboards and data tables."},
]

def create_size_demo(config):
    return Sheet(
        SheetTrigger(config["button"], variant="outline", size="sm"),
        SheetContent(
            SheetHeader(
                SheetTitle(config["title"]),
                SheetDescription(config["description"])
            ),
            Div(P(config["content"], cls="text-sm"), cls="px-4"),
            side="right",
            size=config["size"]
        ),
    )

Div(
    *[create_size_demo(config) for config in sheet_configs],
    cls="flex flex-wrap justify-center gap-2"
)

from starhtml import *

Sheet(
    SheetTrigger("Open Sheet", variant="outline"),
    SheetContent(
        SheetHeader(
            SheetTitle("Custom close"),
            SheetDescription("This sheet hides the default close button. Use the button below to dismiss.")
        ),
        SheetFooter(
            SheetClose("Done", variant="default")
        ),
        show_close=False,
    ),
)

from starhtml import *

notifications = [
    {"title": "Deployment complete", "desc": "v2.4.1 deployed to production", "icon": "lucide:rocket",
     "sig": Signal("notif_deploy", True)},
    {"title": "New comment", "desc": "Priya commented on PR #417", "icon": "lucide:message-circle",
     "sig": Signal("notif_comment", True)},
    {"title": "Build failed", "desc": "CI pipeline timed out on staging", "icon": "lucide:alert-triangle",
     "sig": Signal("notif_build", True)},
]

sigs = [n["sig"] for n in notifications]
count = sum(sigs)

Div(
    sigs,
    Sheet(
        SheetTrigger(
            Icon("lucide:bell", cls="h-4 w-4"),
            Span(data_text=count, cls="text-xs"),
            variant="outline",
        ),
        SheetContent(
            SheetHeader(
                SheetTitle("Notifications"),
                SheetDescription(
                    Span(data_text=count),
                    " unread",
                ),
            ),
            Div(
                *[
                    Div(
                        Icon(n["icon"], cls="mt-0.5 h-4 w-4 shrink-0"),
                        Div(
                            P(n["title"], cls="text-sm font-medium"),
                            P(n["desc"], cls="text-xs text-muted-foreground"),
                        ),
                        Button(
                            Icon("lucide:x", cls="h-3 w-3"),
                            size="icon", variant="ghost", cls="ml-auto h-6 w-6 shrink-0",
                            data_on_click=n["sig"].set(False),
                            aria_label="Dismiss",
                        ),
                        data_show=n["sig"],
                        cls="flex items-start gap-3 rounded-md border p-3",
                    )
                    for n in notifications
                ],
                cls="space-y-2 px-4",
            ),
            SheetFooter(
                Button(
                    "Clear all", variant="outline", size="sm",
                    data_on_click=[s.set(False) for s in sigs],
                    data_attr_disabled=count.eq(0),
                ),
            ),
        ),
    ),
)