frontend-svelte/src/shared/ui/ComboControl/ComboControl.svelte

<!--
    Component: ComboControl
    Provides multiple ways to change certain value
    - via Increase/Decrease buttons
    - via Slider
    - via Input
-->
<script lang="ts">
import type { TypographyControl } from '$shared/lib';
import { Button } from '$shared/shadcn/ui/button';
import { Root as ButtonGroupRoot } from '$shared/shadcn/ui/button-group';
import { Input } from '$shared/shadcn/ui/input';
import {
    Content as PopoverContent,
    Root as PopoverRoot,
    Trigger as PopoverTrigger,
} from '$shared/shadcn/ui/popover';
import { Slider } from '$shared/shadcn/ui/slider';
import {
    Content as TooltipContent,
    Root as TooltipRoot,
    Trigger as TooltipTrigger,
} from '$shared/shadcn/ui/tooltip';
import MinusIcon from '@lucide/svelte/icons/minus';
import PlusIcon from '@lucide/svelte/icons/plus';
import type { ChangeEventHandler } from 'svelte/elements';

interface ComboControlProps {
    /**
     * Text for increase button aria-label
     */
    increaseLabel?: string;
    /**
     * Text for decrease button aria-label
     */
    decreaseLabel?: string;
    /**
     * Text for control button aria-label
     */
    controlLabel?: string;
    /**
     * Control instance
     */
    control: TypographyControl;
}

const {
    control,
    decreaseLabel,
    increaseLabel,
    controlLabel,
}: ComboControlProps = $props();

// Local state for the slider to prevent infinite loops
// svelte-ignore state_referenced_locally - $state captures initial value, $effect syncs updates
let sliderValue = $state(Number(control.value));

// Sync sliderValue when external value changes
$effect(() => {
    sliderValue = Number(control.value);
});

const handleInputChange: ChangeEventHandler<HTMLInputElement> = event => {
    const parsedValue = parseFloat(event.currentTarget.value);
    if (!isNaN(parsedValue)) {
        control.value = parsedValue;
    }
};

/**
 * Handle slider value change.
 * The Slider component passes the value as a number directly.
 */
const handleSliderChange = (newValue: number) => {
    control.value = newValue;
};
</script>

<TooltipRoot>
    <ButtonGroupRoot class="bg-transparent border-none shadow-none">
        <TooltipTrigger class="flex items-center">
            <Button
                variant="ghost"
                class="
                    group relative border-none size-9
                    bg-white/20 hover:bg-white/60
                    backdrop-blur-3xl
                    transition-all duration-200 ease-out
                    will-change-transform
                    hover:-translate-y-0.5
                    active:translate-y-0 active:scale-95 active:shadow-none
                    cursor-pointer
                    disabled:opacity-50 disabled:pointer-events-none
                "
                size="icon"
                onclick={control.decrease}
                disabled={control.isAtMin}
                aria-label={decreaseLabel}
            >
                <MinusIcon
                    class="
                        size-4 transition-all duration-200
                        stroke-slate-600/50
                        group-hover:stroke-indigo-500 group-hover:scale-110 group-hover:stroke-3
                        group-active:scale-90 group-active:-rotate-6
                        group-disabled:stroke-transparent
                    "
                />
            </Button>
            <PopoverRoot>
                <PopoverTrigger>
                    {#snippet child({ props })}
                        <Button
                            {...props}
                            variant="ghost"
                            class="hover:bg-white/50 hover:font-bold bg-white/20 border-none duration-150 will-change-transform active:scale-95 cursor-pointer"
                            size="icon"
                            aria-label={controlLabel}
                        >
                            {control.value}
                        </Button>
                    {/snippet}
                </PopoverTrigger>
                <PopoverContent class="w-auto p-4">
                    <div class="flex flex-col items-center gap-3">
                        <Slider
                            min={control.min}
                            max={control.max}
                            step={control.step}
                            value={sliderValue}
                            onValueChange={handleSliderChange}
                            type="single"
                            orientation="vertical"
                            class="h-48"
                        />
                        <Input
                            value={control.value}
                            onchange={handleInputChange}
                            min={control.min}
                            max={control.max}
                            class="w-16 text-center"
                        />
                    </div>
                </PopoverContent>
            </PopoverRoot>

            <Button
                variant="ghost"
                class="
                    group relative border-none size-9
                    bg-white/20 hover:bg-white/60
                    transition-all duration-200 ease-out
                    will-change-transform
                    hover:-translate-y-0.5
                    active:translate-y-0 active:scale-95 active:shadow-none
                    disabled:opacity-50 disabled:pointer-events-none
                    cursor-pointer
                "
                size="icon"
                aria-label={increaseLabel}
                onclick={control.increase}
                disabled={control.isAtMax}
            >
                <PlusIcon
                    class="
                        size-4 transition-all duration-200
                        stroke-slate-600/50
                        group-hover:stroke-indigo-500 group-hover:scale-110 group-hover:stroke-3
                        group-active:scale-90 group-active:rotate-6
                        group-disabled:stroke-transparent
                    "
                />
            </Button>
        </TooltipTrigger>
    </ButtonGroupRoot>
    {#if controlLabel}
        <TooltipContent>
            {controlLabel}
        </TooltipContent>
    {/if}
</TooltipRoot>