feat(Input): add tailwind variants with sizes, update stories

src/shared/ui/Input/Input.stories.svelte

@@ -8,10 +8,11 @@ const { Story } = defineMeta({
     parameters: {
         docs: {
             description: {
-                component: 'Styles Input component',
+                component: 'Styled input component with size and variant options',
             },
             story: { inline: false }, // Render stories in iframe for state isolation
         },
+        layout: 'centered',
     },
     argTypes: {
         placeholder: {
@@ -22,21 +23,76 @@ const { Story } = defineMeta({
             control: 'text',
             description: "input's value",
         },
+        variant: {
+            control: 'select',
+            options: ['default', 'ghost'],
+            description: 'Visual style variant',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'Size variant',
+        },
     },
 });
 </script>
 
 <script lang="ts">
-let value = $state('Initial value');
+let valueDefault = $state('Initial value');
+let valueSm = $state('');
+let valueMd = $state('');
+let valueLg = $state('');
+let valueGhostSm = $state('');
+let valueGhostMd = $state('');
+let valueGhostLg = $state('');
 const placeholder = 'Enter text';
 </script>
 
-<Story
+<!-- Default Story -->
-    name="Default"
+<Story name="Default" args={{ placeholder }}>
-    args={{
+    <Input bind:value={valueDefault} {placeholder} />
-        placeholder,
+</Story>
-        value,
+
-    }}
+<!-- Size Variants -->
->
+<Story name="Small" args={{ placeholder }}>
-    <Input value={value} placeholder={placeholder} />
+    <Input bind:value={valueSm} {placeholder} size="sm" />
+</Story>
+
+<Story name="Medium" args={{ placeholder }}>
+    <Input bind:value={valueMd} {placeholder} size="md" />
+</Story>
+
+<Story name="Large" args={{ placeholder }}>
+    <Input bind:value={valueLg} {placeholder} size="lg" />
+</Story>
+
+<!-- Ghost Variant with Sizes -->
+<Story name="Ghost Small" args={{ placeholder }}>
+    <Input bind:value={valueGhostSm} {placeholder} variant="ghost" size="sm" />
+</Story>
+
+<Story name="Ghost Medium" args={{ placeholder }}>
+    <Input bind:value={valueGhostMd} {placeholder} variant="ghost" size="md" />
+</Story>
+
+<Story name="Ghost Large" args={{ placeholder }}>
+    <Input bind:value={valueGhostLg} {placeholder} variant="ghost" size="lg" />
+</Story>
+
+<!-- Size Comparison -->
+<Story name="All Sizes" tags={['!autodocs']}>
+    <div class="flex flex-col gap-4 w-full max-w-md p-8">
+        <div class="flex flex-col gap-2">
+            <span class="text-sm font-medium text-text-muted">Small</span>
+            <Input placeholder="Small input" size="sm" />
+        </div>
+        <div class="flex flex-col gap-2">
+            <span class="text-sm font-medium text-text-muted">Medium</span>
+            <Input placeholder="Medium input" size="md" />
+        </div>
+        <div class="flex flex-col gap-2">
+            <span class="text-sm font-medium text-text-muted">Large</span>
+            <Input placeholder="Large input" size="lg" />
+        </div>
+    </div>
 </Story>

src/shared/ui/Input/Input.svelte

@@ -2,60 +2,89 @@
     Component: Input
     Provides styled input component with all the shadcn input props
 -->
-<script lang="ts">
+<script lang="ts" module>
-import { Input } from '$shared/shadcn/ui/input';
+import { Input as BaseInput } from '$shared/shadcn/ui/input';
 import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import type { ComponentProps } from 'svelte';
+import {
+    type VariantProps,
+    tv,
+} from 'tailwind-variants';
 
-type Props = ComponentProps<typeof Input> & {
+export const inputVariants = tv({
+    base: [
+        'w-full backdrop-blur-md border font-medium transition-all duration-200',
+        'focus-visible:border-border-soft focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border-muted/30 focus-visible:bg-background-95',
+        'hover:bg-background-95 hover:border-border-soft',
+        'text-foreground placeholder:text-text-muted placeholder:font-mono placeholder:tracking-wide',
+    ],
+    variants: {
+        variant: {
+            default: 'bg-background-80 border-border-muted shadow-[0_1px_3px_rgba(0,0,0,0.04)]',
+            ghost: 'bg-transparent border-transparent shadow-none',
+        },
+        size: {
+            sm: [
+                'h-9 sm:h-10 md:h-11 rounded-lg',
+                'px-3 sm:px-3.5 md:px-4',
+                'text-xs sm:text-sm md:text-base',
+                'placeholder:text-xs sm:placeholder:text-sm md:placeholder:text-base',
+            ],
+            md: [
+                'h-10 sm:h-12 md:h-14 rounded-xl',
+                'px-3.5 sm:px-4 md:px-5',
+                'text-sm sm:text-base md:text-lg',
+                'placeholder:text-xs sm:placeholder:text-sm md:placeholder:text-base',
+            ],
+            lg: [
+                'h-12 sm:h-14 md:h-16 rounded-2xl',
+                'px-4 sm:px-5 md:px-6',
+                'text-sm sm:text-base md:text-lg',
+                'placeholder:text-xs sm:placeholder:text-sm md:placeholder:text-base',
+            ],
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'lg',
+    },
+});
+
+export type InputVariant = VariantProps<typeof inputVariants>['variant'];
+export type InputSize = VariantProps<typeof inputVariants>['size'];
+
+export type InputProps = {
     /**
      * Current search value (bindable)
      */
-    value: string;
+    value?: string;
     /**
      * Additional CSS classes for the container
      */
     class?: string;
-
+    /**
-    variant?: 'default' | 'ghost';
+     * Visual style variant
+     */
+    variant?: InputVariant;
+    /**
+     * Size variant
+     */
+    size?: InputSize;
+    [key: string]: any;
 };
+</script>
 
+<script lang="ts">
 let {
     value = $bindable(''),
     class: className,
     variant = 'default',
+    size = 'lg',
     ...rest
-}: Props = $props();
+}: InputProps = $props();
-
-const isGhost = $derived(variant === 'ghost');
 </script>
 
-<Input
+<BaseInput
     bind:value={value}
-    class={cn(
+    class={cn(inputVariants({ variant, size }), className)}
-        'h-12 sm:h-14 md:h-16 w-full text-sm sm:text-base',
-        'backdrop-blur-md',
-        isGhost ? 'bg-transparent' : 'bg-background-80',
-        'border border-border-muted',
-        isGhost ? 'border-transparent' : 'border-border-muted',
-        isGhost ? 'shadow-none' : 'shadow-[0_1px_3px_rgba(0,0,0,0.04)]',
-        'focus-visible:border-border-soft',
-        'focus-visible:outline-none',
-        'focus-visible:ring-1',
-        'focus-visible:ring-border-muted/30',
-        'focus-visible:bg-background-95',
-        'hover:bg-background-95',
-        'hover:border-border-soft',
-        'text-foreground',
-        'placeholder:text-text-muted',
-        'placeholder:font-mono',
-        'placeholder:text-xs sm:placeholder:text-sm',
-        'placeholder:tracking-wide',
-        'pl-4 sm:pl-6 pr-4 sm:pr-6',
-        'rounded-xl',
-        'transition-all duration-200',
-        'font-medium',
-        className,
-    )}
     {...rest}
 />