refactor(ui): update shared components and add ControlGroup, SidebarContainer

src/shared/ui/Input/Input.svelte

@@ -15,29 +15,53 @@ import type {
 } from './types';
 
 interface Props extends Omit<HTMLInputAttributes, 'size'> {
+    /**
+     * Visual style variant
+     * @default 'default'
+     */
     variant?: InputVariant;
+    /**
+     * Input size
+     * @default 'md'
+     */
     size?: InputSize;
-    /** Marks the input as invalid — red border + ring, red helper text. */
+    /**
+     * Invalid state
+     */
     error?: boolean;
-    /** Helper / error message rendered below the input. */
+    /**
+     * Helper text
+     */
     helperText?: string;
-    /** Show an animated × button when the input has a value. */
+    /**
+     * Show clear button
+     * @default false
+     */
     showClearButton?: boolean;
-    /** Called when the clear button is clicked. */
+    /**
+     * Clear button callback
+     */
     onclear?: () => void;
     /**
-     * Snippet for the left icon slot.
-     * Receives `size` as an argument for convenient icon sizing.
-     * @example {#snippet leftIcon(size)}<SearchIcon size={inputIconSize[size]} />{/snippet}
+     * Left icon snippet
      */
     leftIcon?: Snippet<[InputSize]>;
     /**
-     * Snippet for the right icon slot (rendered after the clear button).
-     * Receives `size` as an argument.
+     * Right icon snippet
      */
     rightIcon?: Snippet<[InputSize]>;
+    /**
+     * Full width
+     * @default false
+     */
     fullWidth?: boolean;
+    /**
+     * Input value
+     */
     value?: string | number | readonly string[];
+    /**
+     * CSS classes
+     */
     class?: string;
 }
 
@@ -56,15 +80,13 @@ let {
     ...rest
 }: Props = $props();
 
-// ── Size config ──────────────────────────────────────────────────────────────
 const sizeConfig: Record<InputSize, { input: string; text: string; height: string; clearIcon: number }> = {
     sm: { input: 'px-3 py-1.5', text: 'text-sm', height: 'h-8', clearIcon: 12 },
     md: { input: 'px-4 py-2', text: 'text-base', height: 'h-10', clearIcon: 14 },
-    lg: { input: 'px-4 py-3', text: 'text-lg', height: 'h-12', clearIcon: 16 },
-    xl: { input: 'px-4 py-3', text: 'text-xl', height: 'h-14', clearIcon: 18 },
+    lg: { input: 'px-4 py-3', text: 'text-lg md:text-xl', height: 'h-12', clearIcon: 16 },
+    xl: { input: 'px-4 py-3', text: 'text-xl md:text-2xl', height: 'h-14', clearIcon: 18 },
 };
 
-// ── Variant config ───────────────────────────────────────────────────────────
 const variantConfig: Record<InputVariant, { base: string; focus: string; error: string }> = {
     default: {
         base: 'bg-paper dark:bg-paper border border-black/5 dark:border-white/10',