feat(ComboControlV2): add orientation prop and remove unused code

src/shared/ui/ComboControlV2/ComboControlV2.svelte

@@ -7,23 +7,29 @@ import type { TypographyControl } from '$shared/lib';
 import { Input } from '$shared/shadcn/ui/input';
 import { Slider } from '$shared/shadcn/ui/slider';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import type { Snippet } from 'svelte';
+import type { Orientation } from 'bits-ui';
 import type { ChangeEventHandler } from 'svelte/elements';
 
 interface Props {
+    /**
+     *  Typography control instance
+     */
     control: TypographyControl;
-    ref?: Snippet;
+    /**
+     * Orientation of the component
+     */
+    orientation?: Orientation;
 }
 
 let {
     control,
-    ref = $bindable(),
+    orientation = 'vertical',
 }: Props = $props();
 
 let sliderValue = $state(Number(control.value));
 
 $effect(() => {
-    sliderValue = Number(control.value);
+    sliderValue = Number(control?.value);
 });
 
 const handleInputChange: ChangeEventHandler<HTMLInputElement> = event => {
@@ -36,22 +42,9 @@ const handleInputChange: ChangeEventHandler<HTMLInputElement> = event => {
 const handleSliderChange = (newValue: number) => {
     control.value = newValue;
 };
-
-// Shared glass button class for consistency
-// const glassBtnClass = cn(
-//     'border-none transition-all duration-200',
-//     'bg-white/10 hover:bg-white/40 active:scale-90',
-//     'text-slate-900 font-medium',
-// );
-
-// const ghostStyle = cn(
-//     'flex items-center justify-center transition-all duration-300 ease-out',
-//     'text-slate-900/40 hover:text-slate-950 hover:bg-white/20 active:scale-90',
-//     'disabled:opacity-10 disabled:pointer-events-none',
-// );
 </script>
 
-<div class="flex flex-col items-center gap-4">
+<div class={cn('flex flex-col items-center gap-4 w-full', orientation === 'vertical' ? 'flex-col' : 'flex-row')}>
     <Input
         value={control.value}
         onchange={handleInputChange}
@@ -66,7 +59,7 @@ const handleSliderChange = (newValue: number) => {
         value={sliderValue}
         onValueChange={handleSliderChange}
         type="single"
-        orientation="vertical"
-        class="h-30"
+        orientation={orientation}
+        class={cn(orientation === 'vertical' ? 'h-30' : 'w-full')}
     />
 </div>