From 04602f037240b9a559533aa2d11f6fcadc9b0c74 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 30 Jan 2026 00:52:42 +0300
Subject: [PATCH] feat(ComboControl): use IconButton component

---
 .../ui/ComboControl/ComboControl.svelte       | 60 ++++---------------
 1 file changed, 13 insertions(+), 47 deletions(-)

diff --git a/src/shared/ui/ComboControl/ComboControl.svelte b/src/shared/ui/ComboControl/ComboControl.svelte
index f171cd5..73758e5 100644
--- a/src/shared/ui/ComboControl/ComboControl.svelte
+++ b/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
-                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"
+            <IconButton
                 onclick={control.decrease}
                 disabled={control.isAtMin}
                 aria-label={decreaseLabel}
+                rotation="counterclockwise"
             >
-                <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>
+                {#snippet icon({ className })}
+                    <MinusIcon class={className} />
+                {/snippet}
+            </IconButton>
             <PopoverRoot>
                 <PopoverTrigger>
                     {#snippet child({ props })}
@@ -144,33 +127,16 @@ const handleSliderChange = (newValue: number) => {
                 </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"
+            <IconButton
                 aria-label={increaseLabel}
                 onclick={control.increase}
                 disabled={control.isAtMax}
+                rotation="clockwise"
             >
-                <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>
+                {#snippet icon({ className })}
+                    <PlusIcon class={className} />
+                {/snippet}
+            </IconButton>
         </TooltipTrigger>
     </ButtonGroupRoot>
     {#if controlLabel}