update InputField

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">
+<Story name="Labels">
-	<InputField name="text" color="secondary">
+	<div class="flex flex-col gap-2">
-		{#snippet start()}
+		<InputField name="text" start="Label" />
-			<User />
+		<InputField name="text">
-		{/snippet}
+			{#snippet start()}
-	</InputField>
+				<User />
+			{/snippet}
+		</InputField>
+		<InputField name="text">
+			{#snippet end()}
+				<User />
+			{/snippet}
+		</InputField>
+	</div>
 </Story>
 
-<Story name="Icon End">
+<Story name="Colors">
-	<InputField name="text" color="secondary">
+	<div class="flex flex-col gap-2">
-		{#snippet end()}
+		<InputField name="text" color="primary" placeholder="Primary" />
-			<User />
+		<InputField name="text" color="secondary" placeholder="Secondary" />
-		{/snippet}
+		<InputField name="text" color="accent" placeholder="Accent" />
-	</InputField>
+		<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 }} />

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
-	<div class="label">
+	class="input flex items-center gap-2 transition-[width] delay-150 duration-300 ease-in-out"
-		<span
+	class:w-full={block}
-			class="label-text flex items-center gap-2"
+	class:input-primary={color === 'primary'}
-			class:text-primary={color === 'primary'}
+	class:input-secondary={color === 'secondary'}
-			class:text-secondary={color === 'secondary'}
+	class:input-accent={color === 'accent'}
-			class:text-accent={color === 'accent'}
+	class:input-neutral={color === 'neutral'}
-			class:text-info={color === 'info'}
+	class:input-info={color === 'info'}
-			class:text-success={color === 'success'}
+	class:input-success={color === 'success'}
-			class:text-warning={color === 'warning'}
+	class:input-warning={color === 'warning'}
-			class:text-error={color === 'error' || error}
+	class:input-error={color === 'error'}
-		>
+	class:input-ghost={style === 'ghost'}
-			{#if typeof label === 'string'}
+	class:input-xs={size === 'xs'}
-				{label}
+	class:input-sm={size === 'sm'}
-			{:else if label}
+	class:input-md={size === 'md'}
-				{@render label()}
+	class:input-lg={size === 'lg'}
-			{/if}
+	class:input-xl={size === 'xl'}
-		</span>
+>
-		<span class="label-text-alt text-error font-semibold">
+	{#if typeof start === 'string'}
-			{#if typeof error === 'string'}
+		{start}
-				{error}
+	{:else}
-			{:else if error}
+		{@render start?.()}
-				{@render error()}
+	{/if}
-			{/if}
+	<input {...props} class={twMerge('grow', clsx(className))} />
-		</span>
+	{#if typeof end === 'string'}
-	</div>
+		{end}
-	<div
+	{:else}
-		class="input flex w-full items-center gap-2"
+		{@render end?.()}
-		class:input-primary={color === 'primary'}
+	{/if}
-		class:input-secondary={color === 'secondary'}
+</div>
-		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>