Tabs

from starhtml import *

Tabs(
    TabsList(
        TabsTrigger("Overview", id="overview"),
        TabsTrigger("Specs", id="specs"),
    ),
    TabsContent(
        Div(
            Div(
                Badge("In Stock"),
                Badge("v4.2", variant="outline"),
                cls="flex gap-2",
            ),
            P(
                "Studio-grade condenser microphone with a wide frequency response "
                "and low self-noise floor, designed for vocal recording and live streaming.",
                cls="mt-3 text-sm text-muted-foreground",
            ),
        ),
        id="overview",
        cls="min-h-[120px]",
    ),
    TabsContent(
        Div(
            Div(
                Span("Type", cls="text-sm text-muted-foreground"),
                Span("Condenser", cls="text-sm font-medium"),
                cls="flex justify-between py-2",
            ),
            Separator(),
            Div(
                Span("Pattern", cls="text-sm text-muted-foreground"),
                Span("Cardioid", cls="text-sm font-medium"),
                cls="flex justify-between py-2",
            ),
            Separator(),
            Div(
                Span("Impedance", cls="text-sm text-muted-foreground"),
                Span("200\u2126", cls="text-sm font-medium"),
                cls="flex justify-between py-2",
            ),
        ),
        id="specs",
        cls="min-h-[120px]",
    ),
    value="overview",
    variant="line",
    cls="w-full max-w-sm",
)

from starhtml import *

Tabs(
    TabsList(
        TabsTrigger("Draft", id="draft"),
        TabsTrigger("Preview", id="preview"),
        TabsTrigger("Publish", id="publish", disabled=True),
    ),
    TabsContent(
        Div(
            Div(
                Label("Title", fr="tab_post_title"),
                Input(id="tab_post_title", placeholder="Post title"),
                cls="grid gap-1.5",
            ),
            Div(
                Label("Slug", fr="tab_post_slug"),
                Input(id="tab_post_slug", placeholder="/blog/my-post"),
                cls="grid gap-1.5",
            ),
            cls="space-y-4",
        ),
        id="draft",
        cls="min-h-[150px]",
    ),
    TabsContent(
        Div(
            "Post preview will render here once the draft is saved.",
            cls="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground",
        ),
        id="preview",
        cls="min-h-[150px]",
    ),
    TabsContent(
        P(
            "Save a draft first to unlock publishing.",
            cls="text-sm text-muted-foreground",
        ),
        id="publish",
        cls="min-h-[150px]",
    ),
    value="draft",
    cls="w-full max-w-sm",
)

from starhtml import *

Tabs(
    TabsList(
        TabsTrigger(Icon("lucide:user"), "Profile", id="profile"),
        TabsTrigger(Icon("lucide:settings"), "Settings", id="settings"),
        TabsTrigger(Icon("lucide:bell"), "Alerts", id="alerts"),
    ),
    TabsContent(
        Div(
            Div(
                Label("Display name", fr="tab_display"),
                Input(id="tab_display", value="Ada Lovelace"),
                cls="grid gap-1.5",
            ),
            Div(
                Label("Email", fr="tab_email"),
                Input(type="email", id="tab_email", value="[email protected]"),
                cls="grid gap-1.5",
            ),
            cls="space-y-4",
        ),
        id="profile",
        cls="min-h-[140px]",
    ),
    TabsContent(
        Div(
            SwitchWithLabel(
                label="Two-factor authentication",
                signal="sw_tab_2fa",
            ),
            SwitchWithLabel(
                label="Session timeout",
                signal="sw_tab_timeout",
                helper_text="Log out after 30 minutes of inactivity",
            ),
            cls="space-y-4",
        ),
        id="settings",
        cls="min-h-[140px]",
    ),
    TabsContent(
        Div(
            SwitchWithLabel(
                label="Email notifications",
                signal="sw_tab_email_notif",
                checked=True,
            ),
            SwitchWithLabel(
                label="Push notifications",
                signal="sw_tab_push_notif",
            ),
            cls="space-y-4",
        ),
        id="alerts",
        cls="min-h-[140px]",
    ),
    value="profile",
    cls="w-full max-w-sm",
)

from starhtml import *

Tabs(
    TabsList(
        TabsTrigger("RGB"),
        TabsTrigger("HSL"),
        TabsTrigger("HEX"),
    ),
    TabsContent(
        Div(
            Div(
                Label("R", fr="tab_r"),
                Input(type="number", id="tab_r", value="99", min=0, max=255),
                cls="grid gap-1.5",
            ),
            Div(
                Label("G", fr="tab_g"),
                Input(type="number", id="tab_g", value="102", min=0, max=255),
                cls="grid gap-1.5",
            ),
            Div(
                Label("B", fr="tab_b"),
                Input(type="number", id="tab_b", value="241", min=0, max=255),
                cls="grid gap-1.5",
            ),
            cls="grid grid-cols-3 gap-3",
        ),
        cls="min-h-[80px]",
    ),
    TabsContent(
        Div(
            Div(
                Label("H", fr="tab_h"),
                Input(type="number", id="tab_h", value="239", min=0, max=360),
                cls="grid gap-1.5",
            ),
            Div(
                Label("S", fr="tab_s"),
                Input(type="number", id="tab_s", value="84", min=0, max=100),
                cls="grid gap-1.5",
            ),
            Div(
                Label("L", fr="tab_l"),
                Input(type="number", id="tab_l", value="67", min=0, max=100),
                cls="grid gap-1.5",
            ),
            cls="grid grid-cols-3 gap-3",
        ),
        cls="min-h-[80px]",
    ),
    TabsContent(
        Div(
            Label("Hex", fr="tab_hex"),
            Input(id="tab_hex", value="#6366F1", cls="font-mono"),
            cls="grid gap-1.5",
        ),
        cls="min-h-[80px]",
    ),
    cls="w-full max-w-md",
)