src/lib/components/DataInput/TextInput.stories.svelte

@@ -6,27 +6,36 @@
 		title: 'Data Input/Text Input',
 		component: TextInput,
 		argTypes: {
+			bordered: {
+				control: 'boolean',
+			},
 			color: {
 				control: 'select',
 				options: [
+					'ghost',
 					'primary',
 					'secondary',
 					'accent',
-					'ghost',
-					'link',
 					'info',
 					'success',
 					'warning',
 					'error',
 				],
 			},
-			bordered: {
+			disabled: {
 				control: 'boolean',
 			},
+			error: {
+				control: 'text',
+			},
+			fade: { control: 'boolean' },
+			start: { control: 'text' },
+			end: { control: 'text' },
+			label: { control: 'text' },
+			placeholder: { control: 'text' },
 			size: {
 				control: 'select',
-				options: ['Default', 'xs', 'sm', 'lg'],
+				options: ['xs', 'sm', '-', 'lg'],
-				defaultValue: 'Default',
 			},
 			type: {
 				control: 'select',

src/lib/components/DataInput/TextInput.svelte

@@ -8,9 +8,11 @@
 		bordered?: boolean;
 		color?: Exclude<DaisyColor, 'neutral'>;
 		disabled?: boolean;
+		error?: string | Snippet;
 		fade?: boolean;
-		start?: Snippet | string;
+		start?: string | Snippet;
-		end?: Snippet | string;
+		end?: string | Snippet;
+		label?: string | Snippet;
 		name: string;
 		placeholder?: string;
 		size?: DaisySize;
@@ -24,9 +26,11 @@
 		bordered = false,
 		color,
 		disabled,
+		error,
 		fade,
 		start,
 		end,
+		label,
 		name,
 		placeholder,
 		size,
@@ -34,34 +38,61 @@
 	}: Props = $props();
 </script>
 
-<label
+<label class="form-control w-full">
-	transition:fadeTransition={{ duration: fade ? 200 : 0 }}
+	<div class="label">
-	class="input flex w-full items-center gap-2"
+		<span
-	class:input-bordered={bordered}
+			class="label-text"
-	class:input-xs={size === 'xs'}
+			class:text-primary={color === 'primary'}
-	class:input-sm={size === 'sm'}
+			class:text-secondary={color === 'secondary'}
-	class:input-lg={size === 'lg'}
+			class:text-accent={color === 'accent'}
-	class:input-primary={color === 'primary'}
+			class:text-info={color === 'info'}
-	class:input-secondary={color === 'secondary'}
+			class:text-success={color === 'success'}
-	class:input-accent={color === 'accent'}
+			class:text-warning={color === 'warning'}
-	class:input-ghost={color === 'ghost'}
+			class:text-error={color === 'error' || error}
-	class:input-link={color === 'link'}
+		>
-	class:input-info={color === 'info'}
+			{#if typeof label === 'string'}
-	class:input-success={color === 'success'}
+				{label}
-	class:input-warning={color === 'warning'}
+			{:else if label}
-	class:input-error={color === 'error'}
+				{@render label()}
->
+			{/if}
-	{#if typeof start === 'string'}
+		</span>
-		{start}
+		<span class="label-text-alt font-semibold text-error">
-	{:else}
+			{#if typeof error === 'string'}
-		{@render start?.()}
+				{error}
-	{/if}
+			{:else if error}
-	<input {disabled} {name} {placeholder} {type} class="grow" />
+				{@render error()}
-	{#if typeof end === 'string'}
+			{/if}
-		{end}
+		</span>
-	{:else}
+	</div>
-		{@render end?.()}
+	<div
-	{/if}
+		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' || 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}
+	</div>
 </label>
 
 <style>