src/lib/components/TextInput.stories.svelte

@@ -6,8 +6,41 @@
 		title: 'TextInput',
 		component: TextInput,
 		tags: ['autodocs'],
-		argTypes: {}
+		argTypes: {
+			color: {
+				control: 'select',
+				options: [
+					'primary',
+					'secondary',
+					'accent',
+					'ghost',
+					'link',
+					'info',
+					'success',
+					'warning',
+					'error'
+				]
+			},
+			bordered: {
+				control: 'boolean'
+			},
+			size: {
+				control: 'select',
+				options: ['Default', 'xs', 'sm', 'lg'],
+				defaultValue: 'Default'
+			},
+			type: {
+				control: 'select',
+				options: ['email', 'password', 'search', 'tel', 'text', 'url']
+			}
+		}
 	});
 </script>
 
-<Story name="Text" args={{ label: 'Text', name: 'text' }} />
+{#snippet icon()}
+	<i class="fi fi-rr-user"></i>
+{/snippet}
+
+<Story name="Text Label" args={{ color: 'primary', name: 'text', start: 'Text' }} />
+<Story name="Icon Start" args={{ color: 'secondary', name: 'text', start: icon }} />
+<Story name="Icon End" args={{ color: 'secondary', name: 'text', end: icon }} />

src/lib/components/TextInput.svelte

@@ -1,26 +1,67 @@
 <script lang="ts">
+	import type { DaisyColor, DaisySize } from '$lib/types';
+	import type { Snippet } from 'svelte';
 	import type { HTMLInputTypeAttribute } from 'svelte/elements';
+	import { fade as fadeTransition } from 'svelte/transition';
 
-	type InputProps = {
-		label?: string;
-		placeholder?: string;
+	type Props = {
+		bordered?: boolean;
+		color?: Exclude<DaisyColor, 'neutral'>;
+		disabled?: boolean;
+		fade?: boolean;
+		start?: Snippet | string;
+		end?: Snippet | string;
 		name: string;
+		placeholder?: string;
+		size?: DaisySize;
 		type?: Extract<
 			HTMLInputTypeAttribute,
 			'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
 		>;
 	};
 
-	let { label, type = 'text', ...props }: InputProps = $props();
+	let {
+		bordered = false,
+		color,
+		disabled,
+		fade,
+		start,
+		end,
+		name,
+		placeholder,
+		size,
+		type = 'text'
+	}: Props = $props();
 </script>
 
-<label class="form-control w-full max-w-xs">
-	{#if label}
-		<div class="label">
-			<span class="label-text">{label}</span>
-		</div>
+<label
+	transition:fadeTransition={{ duration: fade ? 200 : 0 }}
+	class="input flex w-full items-center gap-2"
+	class:input-bordered={bordered}
+	class:input-xs={size === 'xs'}
+	class:input-sm={size === 'sm'}
+	class:input-lg={size === 'lg'}
+	class:input-primary={color === 'primary'}
+	class:input-secondary={color === 'secondary'}
+	class:input-accent={color === 'accent'}
+	class:input-ghost={color === 'ghost'}
+	class:input-link={color === 'link'}
+	class:input-info={color === 'info'}
+	class:input-success={color === 'success'}
+	class:input-warning={color === 'warning'}
+	class:input-error={color === 'error'}
+>
+	{#if typeof start === 'string'}
+		{start}
+	{:else}
+		{@render start?.()}
+	{/if}
+	<input {disabled} {name} {placeholder} {type} class="grow" />
+	{#if typeof end === 'string'}
+		{end}
+	{:else}
+		{@render end?.()}
 	{/if}
-	<input {type} {...props} class="input input-bordered w-full max-w-xs" />
 </label>
 
 <style>

src/routes/login/+page.svelte

@@ -11,18 +11,28 @@
 	}
 </script>
 
+{#snippet userIcon()}
+	<i class="fi fi-br-envelope"></i>
+{/snippet}
+
+{#snippet passwordIcon()}
+	<i class="fi fi-br-key"></i>
+{/snippet}
+
+{#snippet nameIcon()}
+	<i class="fi fi-rr-user"></i>
+{/snippet}
+
 <div class="page">
 	<h1 class="underline">Hestia</h1>
 	<div class="login">
 		<form method="POST" {action} transition:scale>
 			<h2 transition:fade>{mode === 'login' ? 'Login' : 'Register'}</h2>
+			<TextInput start={userIcon} placeholder="Email" name="email" type="email" />
+			<TextInput start={passwordIcon} placeholder="Password" name="password" type="password" />
 			{#if mode === 'register'}
-				<div transition:fade>
-					<TextInput label="Name" name="name" />
-				</div>
+				<TextInput start={nameIcon} placeholder="Name" name="name" fade />
 			{/if}
-			<TextInput label="Email" name="email" type="email" />
-			<TextInput label="Password" name="password" type="password" />
 			<div class="flex gap-2">
 				<Button onClick={onViewToggle} label={mode === 'login' ? 'Register' : 'Login'} />
 				<Button type="submit" label="Submit" />