From 0004b81e40dc3643811aa70bdc63b780a4b2c18a Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 17 Apr 2026 13:20:47 +0300
Subject: [PATCH] chore(ComboControl): replace shadcn tooltip with the one from
 bits-ui

---
 src/shared/ui/ComboControl/ComboControl.svelte | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/shared/ui/ComboControl/ComboControl.svelte b/src/shared/ui/ComboControl/ComboControl.svelte
index 41142e7..b261147 100644
--- a/src/shared/ui/ComboControl/ComboControl.svelte
+++ b/src/shared/ui/ComboControl/ComboControl.svelte
@@ -5,16 +5,12 @@
 -->
 <script lang="ts">
 import type { TypographyControl } from '$shared/lib';
-import {
-    Content as PopoverContent,
-    Root as PopoverRoot,
-    Trigger as PopoverTrigger,
-} from '$shared/shadcn/ui/popover';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
 import { Slider } from '$shared/ui';
 import { Button } from '$shared/ui/Button';
 import MinusIcon from '@lucide/svelte/icons/minus';
 import PlusIcon from '@lucide/svelte/icons/plus';
+import { Popover } from 'bits-ui';
 import TechText from '../TechText/TechText.svelte';
 
 interface Props {
@@ -118,8 +114,8 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
 
         <!-- Trigger -->
         <div class="relative mx-1">
-            <PopoverRoot bind:open>
-                <PopoverTrigger>
+            <Popover.Root bind:open>
+                <Popover.Trigger>
                     {#snippet child({ props })}
                         <button
                             {...props}
@@ -153,10 +149,10 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
                             </TechText>
                         </button>
                     {/snippet}
-                </PopoverTrigger>
+                </Popover.Trigger>
 
                 <!-- Vertical slider popover -->
-                <PopoverContent
+                <Popover.Content
                     class="w-auto py-4 px-3 h-64 flex items-center justify-center rounded-none border border-subtle shadow-sm bg-paper dark:bg-dark-card"
                     align="center"
                     side="top"
@@ -169,8 +165,8 @@ const displayLabel = $derived(label ?? controlLabel ?? '');
                         step={control.step}
                         orientation="vertical"
                     />
-                </PopoverContent>
-            </PopoverRoot>
+                </Popover.Content>
+            </Popover.Root>
         </div>
 
         <!-- Increase button -->