Combobox

from starhtml import *

Combobox(
    ComboboxTrigger(placeholder="Set status...", cls="w-[200px]"),
    ComboboxContent(
        ComboboxEmpty("No status found."),
        ComboboxItem(
            Icon("lucide:circle", cls="!size-3.5 fill-muted-foreground/30 text-muted-foreground"),
            "Backlog", value="backlog",
        ),
        ComboboxItem(
            Icon("lucide:circle-dashed", cls="!size-3.5 text-blue-500"),
            "Todo", value="todo",
        ),
        ComboboxItem(
            Icon("lucide:timer", cls="!size-3.5 text-yellow-500"),
            "In Progress", value="in-progress",
        ),
        ComboboxItem(
            Icon("lucide:check-circle-2", cls="!size-3.5 text-green-500"),
            "Done", value="done",
        ),
        ComboboxItem(
            Icon("lucide:x-circle", cls="!size-3.5 text-red-500"),
            "Cancelled", value="cancelled",
        ),
    ),
    signal="cb_status",
)

from starhtml import *

    ComboboxTrigger(placeholder="Add genres...", cls="w-[300px]"),
    ComboboxContent(
        ComboboxEmpty("No genres found."),
        ComboboxItem("Jazz", value="jazz"),
        ComboboxItem("Electronic", value="electronic"),
        ComboboxItem("Classical", value="classical"),
        ComboboxItem("Hip Hop", value="hiphop"),
        ComboboxItem("Rock", value="rock"),
        ComboboxItem("Folk", value="folk"),
    ),
    signal="cb_genres",
    multiple=True,
    value=["jazz", "electronic"],
    label=["Jazz", "Electronic"],
Div(
    cb,
    P(
        "Selected: ",
        cls="mt-3 text-sm text-muted-foreground"
    ),
    cls="max-w-sm"
)

from starhtml import *

Combobox(
    ComboboxTrigger(placeholder="Search timezone...", cls="w-[280px]"),
    ComboboxContent(
        ComboboxEmpty("No timezone found."),
        ComboboxGroup(
            "North America",
            ComboboxItem("Eastern Time (EST)", value="est"),
            ComboboxItem("Central Time (CST)", value="cst"),
            ComboboxItem("Mountain Time (MST)", value="mst"),
            ComboboxItem("Pacific Time (PST)", value="pst"),
        ),
        ComboboxSeparator(),
        ComboboxGroup(
            "Europe",
            ComboboxItem("Greenwich Mean Time (GMT)", value="gmt"),
            ComboboxItem("Central European Time (CET)", value="cet"),
            ComboboxItem("Eastern European Time (EET)", value="eet"),
        ),
        ComboboxSeparator(),
        ComboboxGroup(
            "Asia",
            ComboboxItem("Japan Standard Time (JST)", value="jst"),
            ComboboxItem("China Standard Time (CST)", value="cst_cn"),
            ComboboxItem("India Standard Time (IST)", value="ist"),
        ),
    ),
    signal="cb_tz",
)

from starhtml import *

Combobox(
    ComboboxTrigger(placeholder="Search countries...", cls="w-[240px]"),
    ComboboxContent(
        ComboboxEmpty("No country found."),
        ComboboxItem("United States", value="us", keywords="america usa"),
        ComboboxItem("United Kingdom", value="uk", keywords="britain england gb"),
        ComboboxItem("Deutschland", value="de", keywords="germany"),
        ComboboxItem("Nihon", value="jp", keywords="japan nippon"),
        ComboboxItem("Brasil", value="br", keywords="brazil"),
        ComboboxItem("Schweiz", value="ch", keywords="switzerland suisse"),
    ),
    signal="cb_country",
)

from starhtml import *

Combobox(
    ComboboxTrigger(placeholder="Select plan...", cls="w-[220px]"),
    ComboboxContent(
        ComboboxEmpty("No plan found."),
        ComboboxItem("Free", value="free"),
        ComboboxItem("Starter", value="starter"),
        ComboboxItem("Pro", value="pro"),
        ComboboxItem("Enterprise", value="enterprise", disabled=True),
    ),
    signal="cb_plan",
)

from starhtml import *

Div(
    ComboboxWithLabel(
        label="Placeholder",
        options=["Email", "Slack", "Webhook", "SMS"],
        placeholder="Select channel...",
    ),
    ComboboxWithLabel(
        label="Disabled",
        options=["Email", "Slack", "Webhook", "SMS"],
        value="Slack",
        disabled=True,
    ),
    ComboboxWithLabel(
        label="Required",
        options=["Email", "Slack", "Webhook", "SMS"],
        placeholder="Select channel...",
        required=True,
    ),
    ComboboxWithLabel(
        label="Error",
        options=["Email", "Slack", "Webhook", "SMS"],
        placeholder="Select channel...",
        error_text="A notification channel is required",
    ),
    cls="grid w-full max-w-sm gap-6"
)

from starhtml import *

Card(
    CardHeader(
        CardTitle("Invite Member"),
        CardDescription("Add someone to the project")
    ),
    CardContent(
        Form(
            ComboboxWithLabel(
                label="Role",
                options=[
                    ("viewer", "Viewer"),
                    ("editor", "Editor"),
                    ("admin", "Admin"),
                    ("owner", "Owner"),
                ],
                placeholder="Search roles...",
                required=True,
                signal="cb_role",
                helper_text="Select the permission level for the new member",
                trigger_cls="w-full",
            ),
            Button(
                "Send Invite",
                type="submit",
                cls="mt-4 w-full",
                data_attr_disabled=~role_value,
            ),
            cls="space-y-4"
        )
    ),
    cls="max-w-md"
)