src/lib/components/Input.stories.svelte

@@ -0,0 +1,43 @@
+<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

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { HTMLInputTypeAttribute } from 'svelte/elements';
+
+	let {
+		label,
+		name,
+		type = 'text'
+	}: { label?: string; name: string; type?: HTMLInputTypeAttribute } = $props();
+</script>
+
+<div class="hestia-input">
+	{#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>