Select

from starhtml import *

SelectWithLabel(
    label="Timezone",
    options=[
        {"group": "North America", "items": [
            ("est", "Eastern Time (EST)"),
            ("cst", "Central Time (CST)"),
            ("mst", "Mountain Time (MST)"),
            ("pst", "Pacific Time (PST)")
        ]},
        {"group": "Europe", "items": [
            ("gmt", "Greenwich Mean Time (GMT)"),
            ("cet", "Central European Time (CET)"),
            ("eet", "Eastern European Time (EET)")
        ]},
        {"group": "Asia", "items": [
            ("jst", "Japan Standard Time (JST)"),
            ("cst_china", "China Standard Time (CST)"),
            ("ist", "India Standard Time (IST)")
        ]}
    ],
    value="pst",
    placeholder="Select a timezone",
    select_cls="w-[240px]"
)

from starhtml import *

Div(
    SelectWithLabel(
        label="Placeholder",
        options=["Option A", "Option B", "Option C"],
        placeholder="Pick one...",
    ),
    SelectWithLabel(
        label="Disabled",
        options=["Option A", "Option B", "Option C"],
        value="Option B",
        disabled=True,
    ),
    SelectWithLabel(
        label="Required",
        options=["Option A", "Option B", "Option C"],
        placeholder="Pick one...",
        required=True,
    ),
    SelectWithLabel(
        label="Error",
        options=["Option A", "Option B", "Option C"],
        error_text="Please select an option",
        disabled=True,
    ),
    cls="grid w-full max-w-sm gap-6"
)

from starhtml import *

template_value = Signal("project_template_value", "")
Card(
    CardHeader(
        CardTitle("New Project"),
        CardDescription("Choose a starting template and visibility")
    ),
    CardContent(
        Form(
            template_value,
            SelectWithLabel(
                label="Template",
                options=[
                    ("blank", "Blank"),
                    ("blog", "Blog"),
                    ("dashboard", "Dashboard"),
                    ("api", "API"),
                ],
                placeholder="Select a template",
                required=True,
                signal="project_template",
                select_cls="w-full"
            ),
            SelectWithLabel(
                label="Visibility",
                options=[
                    ("public", "Public"),
                    ("private", "Private"),
                    ("team", "Team"),
                ],
                value="private",
                helper_text="Controls who can see this project",
                select_cls="w-full"
            ),
            Button(
                "Create Project",
                type="submit",
                cls="mt-4 w-full",
                data_attr_disabled=~template_value,
                data_on_click=(js("alert(`Template: ${$project_template_label}`)"), dict(prevent=True))
            ),
            cls="space-y-4"
        )
    ),
    cls="max-w-md"
)

from starhtml import *

make_value = Signal("vehicle_make_value", "")
make_label = Signal("vehicle_make_label", "")
model_value = Signal("vehicle_model_value", "")
model_label = Signal("vehicle_model_label", "")

invalid_toyota = (make_value == "toyota") & ~((model_value == "camry") | (model_value == "corolla") | (model_value == "rav4"))
invalid_honda = (make_value == "honda") & ~((model_value == "civic") | (model_value == "accord") | (model_value == "crv"))
invalid_ford = (make_value == "ford") & ~((model_value == "mustang") | (model_value == "f150") | (model_value == "explorer"))
should_clear = ~make_value | invalid_toyota | invalid_honda | invalid_ford

Card(
    CardHeader(
        CardTitle("Vehicle Selection"),
        CardDescription("Choose a make and model")
    ),
    CardContent(
        Div(
            make_value, make_label, model_value, model_label,
            SelectWithLabel(
                label="Make",
                options=[
                    ("toyota", "Toyota"),
                    ("honda", "Honda"),
                    ("ford", "Ford"),
                ],
                placeholder="Select make",
                signal="vehicle_make",
                select_cls="w-full"
            ),
            Div(
                Label("Model", fr="vehicle_model_trigger", cls="mb-1.5 block text-sm font-medium"),
                Select(
                    SelectTrigger(
                        SelectValue(placeholder="Select model"),
                        data_attr_disabled=~make_value,
                        cls="w-full",
                        id="vehicle_model_trigger",
                    ),
                    SelectContent(
                        Div(
                            SelectItem("Camry", value="camry"),
                            SelectItem("Corolla", value="corolla"),
                            SelectItem("RAV4", value="rav4"),
                            data_show=make_value == "toyota"
                        ),
                        Div(
                            SelectItem("Civic", value="civic"),
                            SelectItem("Accord", value="accord"),
                            SelectItem("CR-V", value="crv"),
                            data_show=make_value == "honda"
                        ),
                        Div(
                            SelectItem("Mustang", value="mustang"),
                            SelectItem("F-150", value="f150"),
                            SelectItem("Explorer", value="explorer"),
                            data_show=make_value == "ford"
                        ),
                    ),
                    signal="vehicle_model"
                ),
                cls="space-y-1.5"
            ),
            P(
                "Selected: ",
                Code(data_text=make_label + " " + model_label),
                cls="mt-2 text-sm text-muted-foreground",
                data_show=make_value & model_value
            ),
            data_effect=[
                model_value.set(should_clear.if_("", model_value)),
                model_label.set(should_clear.if_("", model_label))
            ],
            cls="space-y-4"
        )
    ),
    cls="w-full max-w-md"
)

from starhtml import *

font_value = Signal("inline_font_value", "sans")
size_value = Signal("inline_size_value", "medium")
Div(
    font_value, size_value,
    Div(
        SelectWithLabel(
            label="Font",
            options=[
                ("sans", "Sans"),
                ("serif", "Serif"),
                ("mono", "Mono"),
            ],
            value="sans",
            signal="inline_font",
            select_cls="w-[120px]"
        ),
        SelectWithLabel(
            label="Size",
            options=[
                ("small", "Small"),
                ("medium", "Medium"),
                ("large", "Large"),
            ],
            value="medium",
            signal="inline_size",
            select_cls="w-[120px]"
        ),
        cls="flex gap-4"
    ),
    P(
        Code(data_text=font_value),
        " / ",
        Code(data_text=size_value),
        cls="mt-3 text-sm text-muted-foreground"
    ),
)