feat(ComboControl): use IconButton component

src/shared/ui/ComboControl/ComboControl.svelte

@@ -24,6 +24,7 @@ import {
 import MinusIcon from '@lucide/svelte/icons/minus';
 import PlusIcon from '@lucide/svelte/icons/plus';
 import type { ChangeEventHandler } from 'svelte/elements';
+import IconButton from '../IconButton/IconButton.svelte';
 
 interface ComboControlProps {
     /**
@@ -79,34 +80,16 @@ const handleSliderChange = (newValue: number) => {
 <TooltipRoot>
     <ButtonGroupRoot class="bg-transparent border-none shadow-none">
         <TooltipTrigger class="flex items-center">
-            <Button
+            <IconButton
-                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}
+                rotation="counterclockwise"
             >
-                <MinusIcon
+                {#snippet icon({ className })}
-                    class="
+                    <MinusIcon class={className} />
-                        size-4 transition-all duration-200
+                {/snippet}
-                        stroke-slate-600/50
+            </IconButton>
-                        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 })}
@@ -144,33 +127,16 @@ const handleSliderChange = (newValue: number) => {
                 </PopoverContent>
             </PopoverRoot>
 
-            <Button
+            <IconButton
-                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}
+                rotation="clockwise"
             >
-                <PlusIcon
+                {#snippet icon({ className })}
-                    class="
+                    <PlusIcon class={className} />
-                        size-4 transition-all duration-200
+                {/snippet}
-                        stroke-slate-600/50
+            </IconButton>
-                        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}