Input

from starhtml import *

icon_cls = "pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"
Div(
    Div(
        Icon("lucide:mail", cls=icon_cls),
        Input(type="email", placeholder="[email protected]", cls="pl-9"),
        cls="relative"
    ),
    Div(
        Icon("lucide:search", cls=icon_cls),
        Input(placeholder="Search...", cls="pl-9"),
        cls="relative"
    ),
    cls="grid w-full max-w-sm gap-3"
)

from starhtml import *

Div(
    (email := Signal("sub_email", "")),
    Input(type="email", placeholder="Enter your email", signal=email),
    Button("Subscribe", data_attr_disabled=~email),
    cls="flex w-full max-w-sm gap-2"
)

from starhtml import *

Div(
    (username := Signal("username", "")),
    (username_valid := Signal("username_valid", False)),
    UILabel(
        "Username",
        Span(" *", cls="text-destructive"),
        fr="username-reactive"
    ),
    Input(
        id="username-reactive",
        placeholder="Enter username",
        signal=username,
        data_on_input=username_valid.set(username.match(regex(r"^[a-zA-Z0-9_]{3,}$"))),
    ),
    P(
        "Must be at least 3 characters, letters/numbers/underscores only",
        data_show=~username_valid & (username.length > 0),
        cls="text-xs text-destructive"
    ),
    P(
        "Username is available",
        data_show=username_valid & (username.length > 0),
        cls="text-xs text-muted-foreground"
    ),
    cls="grid w-full max-w-sm gap-1.5"
)

from starhtml import *

Div(
    Div(
        UILabel("Disabled", fr="disabled"),
        Input(id="disabled", placeholder="This field is disabled", disabled=True),
        cls="grid gap-1.5"
    ),
    Div(
        UILabel("Read-only", fr="readonly"),
        Input(id="readonly", value="This value cannot be changed", readonly=True),
        cls="grid gap-1.5"
    ),
    Div(
        UILabel(
            "Required",
            Span(" *", cls="text-destructive"),
            fr="required"
        ),
        Input(id="required", placeholder="This field is required", required=True),
        P("This field is required", cls="text-xs text-muted-foreground"),
        cls="grid gap-1.5"
    ),
    cls="grid w-full max-w-sm gap-4"
)

from starhtml import *

Div(
    (avatar_input := Signal("avatar_input", _ref_only=True)),
    (file_name := Signal("file_name", "")),
    UILabel("Profile Picture"),
    Div(
        Input(
            type="file",
            accept=".png,.jpg,.jpeg",
            data_ref=avatar_input,
            data_on_change=file_name.set(js("evt.target.files[0]?.name || ''")),
            cls="hidden"
        ),
        Button(
            Icon("lucide:upload"),
            "Choose File",
            variant="outline",
            data_on_click=avatar_input.click(),
            type="button"
        ),
        Span(
            data_text=file_name | "No file chosen",
            cls="text-sm text-muted-foreground"
        ),
        cls="flex items-center gap-3"
    ),
    P("PNG, JPG up to 2MB", cls="text-xs text-muted-foreground"),
    cls="grid w-full max-w-sm gap-1.5"
)

from starhtml import *

query = Signal("search_q", "")
active = Signal("search_active", "")

packages = [
    ("starhtml", "Modern web framework for Python"),
    ("starui", "Accessible UI component library"),
    ("datastar", "Reactive frontend via HTML attributes"),
    ("fastcore", "Core utilities and functional tools"),
    ("starlette", "Lightweight ASGI framework"),
]

Div(
    query, active,
    Div(
        Icon("lucide:search", cls="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground"),
        Input(
            placeholder="Search packages...",
            signal=query,
            data_on_input=(active.set(query), dict(debounce=300)),
            cls="pl-9",
        ),
        cls="relative",
    ),
    Div(
        *[
            Div(
                Span(name, cls="text-sm font-medium"),
                Span(desc, cls="text-xs text-muted-foreground"),
                data_show=~active | js(f"'{name.lower()}'.includes($search_active.toLowerCase())"),
                cls="grid gap-0.5 border-b py-2 last:border-0",
            )
            for name, desc in packages
        ],
        cls="mt-2",
    ),
    cls="grid w-full max-w-sm",
)