feat(Input): component redesign with complete storybook coverage

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

@@ -8,13 +8,39 @@ const { Story } = defineMeta({
     parameters: {
         docs: {
             description: {
-                component: 'Styled input component with size and variant options',
+                component: 'Input component',
             },
-            story: { inline: false }, // Render stories in iframe for state isolation
+            story: { inline: false },
         },
         layout: 'centered',
     },
     argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'underline', 'filled'],
+            description: 'Input variant',
+            defaultValue: 'default',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg', 'xl'],
+            description: 'Input size',
+            defaultValue: 'md',
+        },
+        error: {
+            control: 'boolean',
+            description: 'Input error state',
+            defaultValue: false,
+        },
+        helperText: {
+            control: 'text',
+            description: 'Input helper text',
+        },
+        showClearButton: {
+            control: 'boolean',
+            description: 'Show clear button',
+            defaultValue: false,
+        },
         placeholder: {
             control: 'text',
             description: "input's placeholder",
@@ -23,90 +49,78 @@ const { Story } = defineMeta({
             control: 'text',
             description: "input's value",
         },
-        variant: {
+        fullWidth: {
-            control: 'select',
+            control: 'boolean',
-            options: ['default', 'ghost'],
+            description: 'Input fullWidth',
-            description: 'Visual style variant',
+            defaultValue: false,
-        },
-        size: {
-            control: 'select',
-            options: ['sm', 'md', 'lg'],
-            description: 'Size variant',
         },
     },
 });
 </script>
 
 <script lang="ts">
-let valueDefault = $state('Initial value');
+import SearchIcon from '@lucide/svelte/icons/search';
-let valueSm = $state('');
+import ClearIcon from '@lucide/svelte/icons/x';
-let valueMd = $state('');
+let value = $state('');
-let valueLg = $state('');
-let valueGhostSm = $state('');
-let valueGhostMd = $state('');
-let valueGhostLg = $state('');
 const placeholder = 'Enter text';
 </script>
 
-<!-- Default Story -->
+<!-- Default Story (Left Aligned) -->
-<Story name="Default" args={{ placeholder }}>
+<Story name="Default" args={{ placeholder, value }}>
     {#snippet template(args)}
-        <Input bind:value={valueDefault} {placeholder} {...args} />
+        <Input {...args} />
     {/snippet}
 </Story>
 
-<!-- Size Variants -->
+<Story name="All sizes" args={{ value }}>
-<Story name="Small" args={{ placeholder }}>
     {#snippet template(args)}
-        <Input bind:value={valueSm} {placeholder} size="sm" {...args} />
+        <div class="flex flex-col gap-4">
-    {/snippet}
+            <Input size="sm" placeholder="Size sm" {...args} />
-</Story>
+            <Input size="md" placeholder="Size md" {...args} />
-
+            <Input size="lg" placeholder="Size lg" {...args} />
-<Story name="Medium" args={{ placeholder }}>
+            <Input size="xl" placeholder="Size xl" {...args} />
-    {#snippet template(args)}
-        <Input bind:value={valueMd} {placeholder} size="md" {...args} />
-    {/snippet}
-</Story>
-
-<Story name="Large" args={{ placeholder }}>
-    {#snippet template(args)}
-        <Input bind:value={valueLg} {placeholder} size="lg" {...args} />
-    {/snippet}
-</Story>
-
-<!-- Ghost Variant with Sizes -->
-<Story name="Ghost Small" args={{ placeholder }}>
-    {#snippet template(args)}
-        <Input bind:value={valueGhostSm} {placeholder} variant="ghost" size="sm" {...args} />
-    {/snippet}
-</Story>
-
-<Story name="Ghost Medium" args={{ placeholder }}>
-    {#snippet template(args)}
-        <Input bind:value={valueGhostMd} {placeholder} variant="ghost" size="md" {...args} />
-    {/snippet}
-</Story>
-
-<Story name="Ghost Large" args={{ placeholder }}>
-    {#snippet template(args)}
-        <Input bind:value={valueGhostLg} {placeholder} variant="ghost" size="lg" {...args} />
-    {/snippet}
-</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">
+    {/snippet}
-            <span class="text-sm font-medium text-text-muted">Medium</span>
+</Story>
-            <Input placeholder="Medium input" size="md" />
+
-        </div>
+<Story name="Underlined" args={{ placeholder, value }}>
-        <div class="flex flex-col gap-2">
+    {#snippet template(args)}
-            <span class="text-sm font-medium text-text-muted">Large</span>
+        <Input variant="underline" {...args} />
-            <Input placeholder="Large input" size="lg" />
+    {/snippet}
-        </div>
+</Story>
-    </div>
+
+<Story name="Filled" args={{ placeholder, value }}>
+    {#snippet template(args)}
+        <Input variant="filled" {...args} />
+    {/snippet}
+</Story>
+
+<Story name="With icon on the right" args={{ placeholder, value }}>
+    {#snippet template(args)}
+        <Input {...args}>
+            {#snippet rightIcon()}
+                <SearchIcon />
+            {/snippet}
+        </Input>
+    {/snippet}
+</Story>
+
+<Story name="With icon on the left" args={{ placeholder, value }}>
+    {#snippet template(args)}
+        <Input {...args}>
+            {#snippet leftIcon()}
+                <SearchIcon />
+            {/snippet}
+        </Input>
+    {/snippet}
+</Story>
+
+<Story name="With clear button" args={{ placeholder, value }}>
+    {#snippet template(args)}
+        <Input showClearButton {...args}>
+            {#snippet rightIcon()}
+                <ClearIcon />
+            {/snippet}
+        </Input>
+    {/snippet}
 </Story>

src/shared/ui/Input/Input.svelte

@@ -1,90 +1,157 @@
 <!--
     Component: Input
-    Provides styled input component with all the shadcn input props
+    design-system input. Zero border-radius, Space Grotesk, precise states.
 -->
-<script lang="ts" module>
-import { Input as BaseInput } from '$shared/shadcn/ui/input';
-import { cn } from '$shared/shadcn/utils/shadcn-utils';
-import {
-    type VariantProps,
-    tv,
-} from 'tailwind-variants';
-
-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-[0.75rem] 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-[0.75rem] 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-[0.75rem] sm:placeholder:text-sm md:placeholder:text-base',
-            ],
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'lg',
-    },
-});
-
-type InputVariant = VariantProps<typeof inputVariants>['variant'];
-type InputSize = VariantProps<typeof inputVariants>['size'];
-
-export type InputProps = {
-    /**
-     * Current search value (bindable)
-     */
-    value?: string;
-    /**
-     * Additional CSS classes for the container
-     */
-    class?: string;
-    /**
-     * Visual style variant
-     */
-    variant?: InputVariant;
-    /**
-     * Size variant
-     */
-    size?: InputSize;
-    [key: string]: any;
-};
-</script>
-
 <script lang="ts">
+import { cn } from '$shared/shadcn/utils/shadcn-utils';
+import XIcon from '@lucide/svelte/icons/x';
+import type { Snippet } from 'svelte';
+import { cubicOut } from 'svelte/easing';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { scale } from 'svelte/transition';
+import type {
+    InputSize,
+    InputVariant,
+} from './types';
+
+interface Props extends Omit<HTMLInputAttributes, 'size'> {
+    variant?: InputVariant;
+    size?: InputSize;
+    /** Marks the input as invalid — red border + ring, red helper text. */
+    error?: boolean;
+    /** Helper / error message rendered below the input. */
+    helperText?: string;
+    /** Show an animated × button when the input has a value. */
+    showClearButton?: boolean;
+    /** Called when the clear button is clicked. */
+    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}
+     */
+    leftIcon?: Snippet<[InputSize]>;
+    /**
+     * Snippet for the right icon slot (rendered after the clear button).
+     * Receives `size` as an argument.
+     */
+    rightIcon?: Snippet<[InputSize]>;
+    fullWidth?: boolean;
+    value?: string | number | readonly string[];
+    class?: string;
+}
+
 let {
+    variant = 'default',
+    size = 'md',
+    error = false,
+    helperText,
+    showClearButton = false,
+    onclear,
+    leftIcon,
+    rightIcon,
+    fullWidth = false,
     value = $bindable(''),
     class: className,
-    variant = 'default',
-    size = 'lg',
     ...rest
-}: InputProps = $props();
+}: 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 },
+};
+
+// ── 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',
+        focus: 'focus:border-brand focus:ring-1 focus:ring-brand/20',
+        error: 'border-brand ring-1 ring-brand/20',
+    },
+    underline: {
+        base: 'bg-transparent border-0 border-b border-neutral-300 dark:border-neutral-700',
+        focus: 'focus:border-brand',
+        error: 'border-brand',
+    },
+    filled: {
+        base: 'bg-surface dark:bg-paper border border-transparent',
+        focus: 'focus:border-brand focus:ring-1 focus:ring-brand/20',
+        error: 'border-brand ring-1 ring-brand/20',
+    },
+};
+
+const hasValue = $derived(value !== undefined && value !== '');
+const showClear = $derived(showClearButton && hasValue && !!onclear);
+const hasRightSlot = $derived(!!rightIcon || showClearButton);
+const cfg = $derived(sizeConfig[size]);
+const styles = $derived(variantConfig[variant]);
+
+const inputClasses = $derived(cn(
+    "font-['Space_Grotesk'] rounded-none outline-none transition-all duration-200",
+    'text-neutral-900 dark:text-neutral-100',
+    'placeholder:text-neutral-400 dark:placeholder:text-neutral-600',
+    'disabled:opacity-50 disabled:cursor-not-allowed',
+    cfg.input,
+    cfg.text,
+    cfg.height,
+    styles.base,
+    error ? styles.error : styles.focus,
+    !!leftIcon && 'pl-10',
+    hasRightSlot && 'pr-10',
+    fullWidth && 'w-full',
+    className,
+));
 </script>
 
-<BaseInput
+<div class={cn('flex flex-col gap-1', fullWidth && 'w-full')}>
-    bind:value
+    <div class={cn('relative group', fullWidth && 'w-full')}>
-    class={cn(inputVariants({ variant, size }), className)}
+        <!-- Left icon slot -->
-    {...rest}
+        {#if leftIcon}
-/>
+            <div class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400 dark:text-neutral-600 pointer-events-none z-10 flex items-center">
+                {@render leftIcon(size)}
+            </div>
+        {/if}
+
+        <!-- Input -->
+        <input class={inputClasses} bind:value {...rest} />
+
+        <!-- Right slot: clear button + rightIcon -->
+        {#if hasRightSlot}
+            <div class="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-2 z-10">
+                {#if showClear}
+                    <button
+                        type="button"
+                        tabindex={-1}
+                        onclick={onclear}
+                        class="text-neutral-400 hover:text-brand transition-colors p-0.5 flex items-center"
+                        in:scale={{ duration: 150, start: 0.8, easing: cubicOut }}
+                        out:scale={{ duration: 100, start: 0.8, easing: cubicOut }}
+                    >
+                        <XIcon size={cfg.clearIcon} />
+                    </button>
+                {/if}
+
+                {#if rightIcon}
+                    <div class="text-neutral-400 dark:text-neutral-600 flex items-center">
+                        {@render rightIcon(size)}
+                    </div>
+                {/if}
+            </div>
+        {/if}
+    </div>
+
+    <!-- Helper / error text -->
+    {#if helperText}
+        <span
+            class={cn(
+                "text-[0.625rem] font-['Space_Mono'] tracking-wide px-1",
+                error ? 'text-brand ' : 'text-neutral-500 dark:text-neutral-400',
+            )}
+        >
+            {helperText}
+        </span>
+    {/if}
+</div>