src/lib/components/Input.stories.svelte

@@ -1,43 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import Input from './Input.svelte';
-
-	const { Story } = defineMeta({
-		title: 'Input',
-		component: Input,
-		tags: ['autodocs'],
-		argTypes: {
-			type: {
-				control: 'select',
-				options: [
-					'number',
-					'button',
-					'checkbox',
-					'color',
-					'date',
-					'datetime-local',
-					'email',
-					'file',
-					'hidden',
-					'image',
-					'month',
-					'password',
-					'radio',
-					'range',
-					'reset',
-					'search',
-					'submit',
-					'tel',
-					'text',
-					'time',
-					'url',
-					'week'
-				]
-			}
-		}
-	});
-</script>
-
-<Story name="Text" args={{ label: 'Text', name: 'text', type: 'text' }} />
-<Story name="Password" args={{ label: 'Password', name: 'pass', type: 'password' }} />
-<Story name="Email" args={{ label: 'Email', name: 'email', type: 'email' }} />

src/lib/components/Input.svelte

@@ -1,36 +0,0 @@
-<script lang="ts">
-	import type { HTMLAttributes, HTMLInputTypeAttribute } from 'svelte/elements';
-	import { twMerge } from 'tailwind-merge';
-
-	type InputProps = {
-		label?: string;
-		name: string;
-		type?: HTMLInputTypeAttribute;
-	} & HTMLAttributes<HTMLDivElement>;
-
-	let { label, name, type = 'text', ...props }: InputProps = $props();
-</script>
-
-<div {...props} class={twMerge('hestia-input', props.class)}>
-	{#if label}
-		<label for={name}>{label}</label>
-		<div class="line"></div>
-	{/if}
-	<input {name} id={name} {type} />
-</div>
-
-<style>
-	.line {
-		@apply h-8 border border-l-slate-200;
-	}
-	.hestia-input {
-		@apply flex w-fit items-center gap-2 rounded-lg bg-slate-100 p-2 text-slate-700 outline-blue-400 focus-within:outline;
-	}
-	.hestia-input > label {
-		@apply font-display text-lg;
-	}
-	.hestia-input > input {
-		all: unset;
-		@apply text-lg;
-	}
-</style>

src/lib/components/TextInput.stories.svelte

@@ -0,0 +1,13 @@
+<script module lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import TextInput from './TextInput.svelte';
+
+	const { Story } = defineMeta({
+		title: 'TextInput',
+		component: TextInput,
+		tags: ['autodocs'],
+		argTypes: {}
+	});
+</script>
+
+<Story name="Text" args={{ label: 'Text', name: 'text' }} />

src/lib/components/TextInput.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import type { HTMLInputTypeAttribute } from 'svelte/elements';
+
+	type InputProps = {
+		label?: string;
+		placeholder?: string;
+		name: string;
+		type?: Extract<
+			HTMLInputTypeAttribute,
+			'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
+		>;
+	};
+
+	let { label, type = 'text', ...props }: InputProps = $props();
+</script>
+
+<label class="form-control w-full max-w-xs">
+	{#if label}
+		<div class="label">
+			<span class="label-text">{label}</span>
+		</div>
+	{/if}
+	<input {type} {...props} class="input input-bordered w-full max-w-xs" />
+</label>
+
+<style>
+</style>

src/routes/login/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Button from '$lib/components/Button.svelte';
-	import Input from '$lib/components/Input.svelte';
+	import TextInput from '$lib/components/TextInput.svelte';
 	import { fade, scale } from 'svelte/transition';
 
 	let mode: 'register' | 'login' = $state('login');
@@ -18,11 +18,11 @@
 			<h2 transition:fade>{mode === 'login' ? 'Login' : 'Register'}</h2>
 			{#if mode === 'register'}
 				<div transition:fade>
-					<Input label="Name" name="name" />
+					<TextInput label="Name" name="name" />
 				</div>
 			{/if}
-			<Input label="Email" name="email" type="email" />
-			<Input label="Password" name="password" type="password" />
+			<TextInput label="Email" name="email" type="email" />
+			<TextInput label="Password" name="password" type="password" />
 			<div class="flex gap-2">
 				<Button
 					onClick={onViewToggle}