From 0497ed71b68f1bef99df9ee15862a459163af99f Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Thu, 27 Mar 2025 13:13:59 -0400
Subject: [PATCH] update InputField

---
 .../DataInput/InputField.stories.svelte       | 63 +++++++++----
 .../components/DataInput/InputField.svelte    | 92 +++++++------------
 2 files changed, 76 insertions(+), 79 deletions(-)

diff --git a/packages/svelte/src/lib/components/DataInput/InputField.stories.svelte b/packages/svelte/src/lib/components/DataInput/InputField.stories.svelte
index e40e021..7d63433 100644
--- a/packages/svelte/src/lib/components/DataInput/InputField.stories.svelte
+++ b/packages/svelte/src/lib/components/DataInput/InputField.stories.svelte
@@ -4,9 +4,12 @@
 	import InputField from './InputField.svelte';
 
 	const { Story } = defineMeta({
-		title: 'Data Input/Text Input',
+		title: 'Data Input/Input Field',
 		component: InputField,
 		argTypes: {
+			block: {
+				control: 'boolean',
+			},
 			color: {
 				control: 'select',
 				options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'],
@@ -14,13 +17,8 @@
 			disabled: {
 				control: 'boolean',
 			},
-			error: {
-				control: 'text',
-			},
-			fade: { control: 'boolean' },
 			start: { control: 'text' },
 			end: { control: 'text' },
-			label: { control: 'text' },
 			placeholder: { control: 'text' },
 			size: {
 				control: 'select',
@@ -38,20 +36,45 @@
 	});
 </script>
 
-<Story name="Default" args={{ color: 'primary', name: 'text', start: 'Text' }} />
+<Story name="Default" args={{ name: 'text' }} />
 
-<Story name="Icon Start">
-	<InputField name="text" color="secondary">
-		{#snippet start()}
-			<User />
-		{/snippet}
-	</InputField>
+<Story name="Labels">
+	<div class="flex flex-col gap-2">
+		<InputField name="text" start="Label" />
+		<InputField name="text">
+			{#snippet start()}
+				<User />
+			{/snippet}
+		</InputField>
+		<InputField name="text">
+			{#snippet end()}
+				<User />
+			{/snippet}
+		</InputField>
+	</div>
 </Story>
 
-<Story name="Icon End">
-	<InputField name="text" color="secondary">
-		{#snippet end()}
-			<User />
-		{/snippet}
-	</InputField>
-</Story>
\ No newline at end of file
+<Story name="Colors">
+	<div class="flex flex-col gap-2">
+		<InputField name="text" color="primary" placeholder="Primary" />
+		<InputField name="text" color="secondary" placeholder="Secondary" />
+		<InputField name="text" color="accent" placeholder="Accent" />
+		<InputField name="text" color="neutral" placeholder="Neutral" />
+		<InputField name="text" color="info" placeholder="Info" />
+		<InputField name="text" color="success" placeholder="Success" />
+		<InputField name="text" color="warning" placeholder="Warning" />
+		<InputField name="text" color="error" placeholder="Error" />
+	</div>
+</Story>
+
+<Story name="Sizes">
+	<div class="flex flex-col gap-2">
+		<InputField name="text" size="xs" placeholder="XS" />
+		<InputField name="text" size="sm" placeholder="SM" />
+		<InputField name="text" size="md" placeholder="MD" />
+		<InputField name="text" size="lg" placeholder="LG" />
+		<InputField name="text" size="xl" placeholder="XL" />
+	</div>
+</Story>
+
+<Story name="Disabled" args={{ name: 'text', placeholder: 'Disabled', disabled: true }} />
\ No newline at end of file
diff --git a/packages/svelte/src/lib/components/DataInput/InputField.svelte b/packages/svelte/src/lib/components/DataInput/InputField.svelte
index 6e909a7..064fc8c 100644
--- a/packages/svelte/src/lib/components/DataInput/InputField.svelte
+++ b/packages/svelte/src/lib/components/DataInput/InputField.svelte
@@ -7,11 +7,11 @@
 	import clsx from 'clsx';
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputTypeAttribute, SvelteHTMLElements } from 'svelte/elements';
-	import { fade as fadeTransition } from 'svelte/transition';
 	import { twMerge } from 'tailwind-merge';
 
 	type Props = {
-		color?: Exclude<DaisyColor, 'neutral'>;
+		block?: boolean;
+		color?: DaisyColor;
 		error?: string | Snippet;
 		fade?: boolean;
 		start?: string | Snippet;
@@ -26,70 +26,44 @@
 	} & Omit<SvelteHTMLElements['input'], 'type' | 'size'>;
 
 	let {
+		block,
 		class: className,
 		color,
-		error,
-		fade,
 		start,
 		end,
-		label,
 		size = 'md',
 		style,
 		...props
 	}: Props = $props();
 </script>
 
-<label class="form-control w-full" transition:fadeTransition={{ duration: fade ? 200 : 0 }}>
-	<div class="label">
-		<span
-			class="label-text flex items-center gap-2"
-			class:text-primary={color === 'primary'}
-			class:text-secondary={color === 'secondary'}
-			class:text-accent={color === 'accent'}
-			class:text-info={color === 'info'}
-			class:text-success={color === 'success'}
-			class:text-warning={color === 'warning'}
-			class:text-error={color === 'error' || error}
-		>
-			{#if typeof label === 'string'}
-				{label}
-			{:else if label}
-				{@render label()}
-			{/if}
-		</span>
-		<span class="label-text-alt text-error font-semibold">
-			{#if typeof error === 'string'}
-				{error}
-			{:else if error}
-				{@render error()}
-			{/if}
-		</span>
-	</div>
-	<div
-		class="input flex w-full items-center gap-2"
-		class:input-primary={color === 'primary'}
-		class:input-secondary={color === 'secondary'}
-		class:input-accent={color === 'accent'}
-		class:input-info={color === 'info'}
-		class:input-success={color === 'success'}
-		class:input-warning={color === 'warning'}
-		class:input-error={color === 'error' || error}
-		class:input-ghost={style === 'ghost'}
-		class:input-xs={size === 'xs'}
-		class:input-sm={size === 'sm'}
-		class:input-lg={size === 'lg'}
-		class:input-xl={size === 'xl'}
-	>
-		{#if typeof start === 'string'}
-			{start}
-		{:else}
-			{@render start?.()}
-		{/if}
-		<input {...props} class={twMerge('grow', clsx(className))} />
-		{#if typeof end === 'string'}
-			{end}
-		{:else}
-			{@render end?.()}
-		{/if}
-	</div>
-</label>
\ No newline at end of file
+<div
+	class="input flex items-center gap-2 transition-[width] delay-150 duration-300 ease-in-out"
+	class:w-full={block}
+	class:input-primary={color === 'primary'}
+	class:input-secondary={color === 'secondary'}
+	class:input-accent={color === 'accent'}
+	class:input-neutral={color === 'neutral'}
+	class:input-info={color === 'info'}
+	class:input-success={color === 'success'}
+	class:input-warning={color === 'warning'}
+	class:input-error={color === 'error'}
+	class:input-ghost={style === 'ghost'}
+	class:input-xs={size === 'xs'}
+	class:input-sm={size === 'sm'}
+	class:input-md={size === 'md'}
+	class:input-lg={size === 'lg'}
+	class:input-xl={size === 'xl'}
+>
+	{#if typeof start === 'string'}
+		{start}
+	{:else}
+		{@render start?.()}
+	{/if}
+	<input {...props} class={twMerge('grow', clsx(className))} />
+	{#if typeof end === 'string'}
+		{end}
+	{:else}
+		{@render end?.()}
+	{/if}
+</div>
\ No newline at end of file