Slider

from starhtml import *

Div(
    SliderWithLabel(
        label="Opacity",
        default_value=100,
        min=0,
        max=100,
        value_text="%",
    ),
    SliderWithLabel(
        label="Master Scale",
        default_value=100,
        min=25,
        max=400,
        value_text="%",
        disabled=True,
    ),
    SliderWithLabel(
        label="Blur Radius",
        default_value=48,
        min=0,
        max=100,
        value_text="px",
        error_text="Blur above 40px degrades export quality",
    ),
    SliderWithLabel(
        label="Feather",
        default_value=4,
        min=0,
        max=20,
        value_text="px",
        helper_text="Soft edge width for selection masks",
    ),
    cls="grid w-full max-w-sm gap-6",
)

from starhtml import *

Card(
    CardHeader(
        CardTitle("Type Settings"),
        CardDescription("Adjust font size and preview live"),
    ),
    CardContent(
        Div(
            Div(
                Span("Font size", cls="text-sm font-medium"),
                Span(
                    data_text=font_size,
                    cls="font-mono text-sm text-muted-foreground",
                ),
                cls="mb-2 flex justify-between",
            ),
            Slider(
                signal=font_size,
                default_value=18,
                min=12,
                max=48,
                aria_label="Font size",
            ),
            P(
                "The quick brown fox jumps over the lazy dog",
                data_style_font_size=font_size + "px",
                cls="mt-6 leading-snug text-foreground transition-none",
                style="font-size: 18px",
            ),
            cls="space-y-1",
        ),
    ),
    cls="w-full max-w-md",
)

from starhtml import *

Card(
    CardHeader(
        CardTitle("Image Adjustments"),
        CardDescription(
            Span("Filter preview", cls="mr-2"),
            Badge(
                data_text=all_default.if_("Default", "Modified"),
                variant="secondary",
            ),
        ),
    ),
    CardContent(
        Div(
            Div(
                cls="h-24 rounded-lg bg-gradient-to-br from-blue-400 via-purple-500 to-pink-500",
                data_style_filter="brightness("
                + brightness / 100
                + ") contrast("
                + contrast / 100
                + ") saturate("
                + saturation / 100
                + ")",
                style="filter: brightness(1) contrast(1) saturate(1)",
            ),
            SliderWithLabel(
                label="Brightness",
                signal=brightness,
                default_value=100,
                min=0,
                max=200,
                value_text="%",
                cls="mt-4",
            ),
            SliderWithLabel(
                label="Contrast",
                signal=contrast,
                default_value=100,
                min=0,
                max=200,
                value_text="%",
            ),
            SliderWithLabel(
                label="Saturation",
                signal=saturation,
                default_value=100,
                min=0,
                max=200,
                value_text="%",
            ),
            Button(
                "Reset",
                variant="outline",
                size="sm",
                cls="mt-2",
                data_on_click=[
                    brightness.set(100),
                    contrast.set(100),
                    saturation.set(100),
                ],
                data_attr_disabled=all_default,
            ),
            cls="space-y-3",
        ),
    ),
    cls="w-full max-w-md",
)

from starhtml import *


def channel_row(label, sig, aria):
    return Div(
        Span(label, cls="w-8 text-sm font-medium"),
        Button(
            Icon("lucide:minus", cls="size-3"),
            data_on_click=sig.set((sig - 1).max(0)),
            variant="outline",
            size="icon",
            cls="size-7",
            aria_label=f"Decrease {aria}",
        ),
        Slider(
            signal=sig,
            min=0,
            max=255,
            aria_label=aria,
            cls="flex-1",
        ),
        Button(
            Icon("lucide:plus", cls="size-3"),
            data_on_click=sig.set((sig + 1).min(255)),
            variant="outline",
            size="icon",
            cls="size-7",
            aria_label=f"Increase {aria}",
        ),
        cls="flex items-center gap-2",
    )

Card(
    CardHeader(
        CardTitle("Color Mixer"),
        CardDescription("Blend RGB channels to pick a color"),
    ),
    CardContent(
        Div(
            Div(
                cls="h-20 rounded-lg border",
                data_style_background_color="rgb("
                + red
                + ","
                + green
                + ","
                + blue
                + ")",
                style="background-color: rgb(99, 102, 204)",
            ),
            channel_row("R", red, "Red channel"),
            channel_row("G", green, "Green channel"),
            channel_row("B", blue, "Blue channel"),
            Span(
                data_text="rgb(" + red + ", " + green + ", " + blue + ")",
                cls="mt-1 block text-center font-mono text-xs text-muted-foreground",
            ),
            cls="space-y-3",
        ),
    ),
    cls="w-full max-w-md",
)

from starhtml import *


layers = [
    ("Background", bg_opacity, "bg-blue-500/80", 100),
    ("Artwork", art_opacity, "bg-purple-500/80", 75),
    ("Text", text_opacity, "bg-amber-500/80", 90),
]

Card(
    CardHeader(
        CardTitle("Layer Opacity"),
        CardDescription("Control transparency per layer"),
    ),
    CardContent(
        Div(
            *[
                Div(
                    Span(label, cls="text-xs font-medium text-muted-foreground"),
                    Div(
                        cls=f"h-12 w-full rounded {color}",
                        data_style_opacity=sig / 100,
                        style=f"opacity: {default / 100}",
                    ),
                    Slider(
                        signal=sig,
                        default_value=default,
                        min=0,
                        max=100,
                        orientation="vertical",
                        aria_label=f"{label} opacity",
                    ),
                    Span(
                        data_text=sig + "%",
                        cls="font-mono text-xs text-muted-foreground",
                    ),
                    cls="flex flex-col items-center gap-2",
                )
                for label, sig, color, default in layers
            ],
            cls="grid grid-cols-3 gap-4",
        ),
    ),
    cls="w-full max-w-md",
)

from starhtml import *

Card(
    CardHeader(
        CardTitle("Export Settings"),
        CardDescription("Configure output quality and resolution"),
    ),
    CardContent(
        Form(
            SliderWithLabel(
                label="JPEG Quality",
                signal=quality,
                default_value=85,
                min=1,
                max=100,
                value_text="%",
            ),
            SliderWithLabel(
                label="DPI",
                signal=dpi,
                default_value=150,
                min=72,
                max=600,
                helper_text="72 for screen, 300+ for print",
            ),
            SliderWithLabel(
                label="Width Range",
                default_value=[1024, 1920],
                min=320,
                max=3840,
                step=10,
                value_text=["px", "px"],
            ),
            Div(
                Span("Est. size: ", cls="text-sm text-muted-foreground"),
                Span(
                    data_text=est_size,
                    cls="font-mono text-sm font-medium",
                ),
                Span(" KB", cls="text-sm text-muted-foreground"),
                cls="mt-2 flex items-center gap-1",
            ),
            Button(
                Icon("lucide:download", cls="size-4"),
                "Export",
                type="submit",
                cls="mt-4 w-full",
            ),
            cls="space-y-4",
        ),
    ),
    cls="w-full max-w-md",
)