Switch

from starhtml import *
from starui import *

Div(
    (notifications := Signal("notifications", True)),
    SwitchWithLabel(
        label="Enable notifications",
        helper_text="Receive email and push notifications",
        signal=notifications,
        checked=True
    ),
    P(
        data_text=notifications.if_("Notifications are enabled", "Notifications are disabled"),
        cls="text-sm text-muted-foreground mt-3"
    ),
    cls="max-w-sm"
)

from starhtml import *
from starui import *

Card(
    CardHeader(
        CardTitle("Document Settings"),
        CardDescription("Configure how your document is saved")
    ),
    CardContent(
        Div(
            (auto_save := Signal("auto_save", True)),
            SwitchWithLabel(
                label="Auto-save",
                helper_text="Automatically save changes as you type",
                signal=auto_save,
                checked=True
            ),
            Div(
                Badge(
                    Icon("lucide:check-circle", cls="h-3 w-3 mr-1"),
                    data_text=auto_save.if_("Changes saved automatically", "Remember to save manually"),
                    data_attr_variant=auto_save.if_("default", "secondary"),
                    cls="w-full justify-center"
                ),
                cls="mt-4"
            )
        )
    ),
    cls="max-w-md"
)

from starhtml import *
from starui import *

Card(
    CardHeader(
        CardTitle("Email Preferences"),
        CardDescription("Manage your email subscriptions")
    ),
    CardContent(
        Form(
            (marketing_emails := Signal("marketing_emails", False)),
            (newsletter := Signal("newsletter", False)),
            SwitchWithLabel(
                label="Marketing emails",
                helper_text="Product updates, feature announcements, and tips",
                signal=marketing_emails,
                checked=False
            ),
            Div(
                Div(
                    Label(
                        "Weekly newsletter",
                        fr="newsletter_switch",
                        cls="text-sm font-medium cursor-pointer"
                    ),
                    Switch(
                        data_attr_disabled=~marketing_emails,
                        signal=newsletter,
                        checked=False,
                        id="newsletter_switch"
                    ),
                    cls="flex items-center gap-3"
                ),
                P("Our weekly roundup of news and insights", cls="text-sm text-muted-foreground mt-1.5"),
                cls="space-y-1.5"
            ),
            Div(
                Div(
                    Icon("lucide:info", cls="h-4 w-4 text-muted-foreground flex-shrink-0 mt-0.5"),
                    P(
                        "Newsletter requires marketing emails to be enabled",
                        cls="text-sm text-muted-foreground break-words"
                    ),
                    cls="flex items-start gap-2"
                ),
                data_show=~marketing_emails,
                cls="mt-3"
            ),
            Button(
                "Update Preferences",
                type="submit",
                cls="w-full mt-4"
            ),
            data_effect=(~marketing_emails).then(newsletter.set(False)),
            cls="space-y-4"
        )
    ),
    cls="w-full max-w-md"
)