feat(SearchBar): component redesign

src/shared/ui/SearchBar/SearchBar.stories.svelte

@@ -9,8 +9,7 @@ const { Story } = defineMeta({
     parameters: {
         docs: {
             description: {
-                component:
+                component: 'Wrapper around Input with a search icon',
-                    'Search input with popover dropdown for results/suggestions. Features keyboard navigation (ArrowDown/Up/Enter) and auto-focus prevention on popover open. The input field serves as the popover trigger.',
             },
             story: { inline: false }, // Render stories in iframe for state isolation
         },
@@ -40,6 +39,6 @@ let defaultSearchValue = $state('');
     }}
 >
     {#snippet template(args)}
-        <SearchBar bind:value={defaultSearchValue} placeholder="Type here..." {...args} />
+        <SearchBar variant="filled" {...args} />
     {/snippet}
 </Story>

src/shared/ui/SearchBar/SearchBar.svelte

@@ -1,44 +1,27 @@
-<!-- Component: SearchBar -->
+<!--
-<script lang="ts">
+    Component: SearchInput
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
+    Convenience wrapper around Input that pre-fills the leftIcon slot with
-import { Input } from '$shared/ui';
+    a Search icon sized to match the current `size` prop.
-import AsteriskIcon from '@lucide/svelte/icons/asterisk';
 
-interface Props {
+    The consumer can still override rightIcon, add a clear button, etc.
-    /**
+    They cannot pass leftIcon — it's owned by this wrapper.
-     * Unique identifier for the input element
+-->
-     */
+<script lang="ts">
-    id?: string;
+import { Input } from '$shared/ui/Input';
-    /**
+import { inputIconSize } from '$shared/ui/Input/types';
-     * Current search value (bindable)
+import SearchIcon from '@lucide/svelte/icons/search';
-     */
+import type { ComponentProps } from 'svelte';
-    value: string;
+
-    /**
+type Props = Exclude<ComponentProps<typeof Input>, 'leftIcon'>;
-     * Additional CSS classes for the container
-     */
-    class?: string;
-    /**
-     * Placeholder text for the input
-     */
-    placeholder?: string;
-}
 
 let {
-    id = 'search-bar',
     value = $bindable(''),
-    class: className,
+    ...rest
-    placeholder,
 }: Props = $props();
 </script>
 
-<div class="relative w-full">
+<Input bind:value {...rest}>
-    <div class="absolute left-4 sm:left-5 top-1/2 -translate-y-1/2 pointer-events-none z-10">
+    {#snippet leftIcon(size)}
-        <AsteriskIcon class="size-3 sm:size-4 stroke-gray-400 stroke-[1.5]" />
+        <SearchIcon size={inputIconSize[size]} />
-    </div>
+    {/snippet}
-    <Input
+</Input>
-        {id}
-        class={cn('pl-11 sm:pl-14 md:pl-14 lg:pl-14', className)}
-        bind:value
-        {placeholder}
-    />
-</div>