move to InputField

packages/svelte/src/lib/components/DataInput/InputField.stories.svelte

@@ -1,27 +1,15 @@
 <script module lang="ts">
 	import { defineMeta } from '@storybook/addon-svelte-csf';
-	import TextInput from './TextInput.svelte';
 	import { User } from 'lucide-svelte';
+	import InputField from './InputField.svelte';
 
 	const { Story } = defineMeta({
 		title: 'Data Input/Text Input',
-		component: TextInput,
+		component: InputField,
 		argTypes: {
-			bordered: {
-				control: 'boolean',
-			},
 			color: {
 				control: 'select',
-				options: [
-					'ghost',
-					'primary',
-					'secondary',
-					'accent',
-					'info',
-					'success',
-					'warning',
-					'error',
-				],
+				options: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'],
 			},
 			disabled: {
 				control: 'boolean',
@@ -36,7 +24,11 @@
 			placeholder: { control: 'text' },
 			size: {
 				control: 'select',
-				options: ['xs', 'sm', '-', 'lg'],
+				options: ['xs', 'sm', 'md', 'lg', 'xl'],
+			},
+			style: {
+				control: 'radio',
+				options: [undefined, 'ghost'],
 			},
 			type: {
 				control: 'select',
@@ -46,18 +38,20 @@
 	});
 </script>
 
-<Story name="Text Label" args={{ color: 'primary', name: 'text', start: 'Text' }} />
+<Story name="Default" args={{ color: 'primary', name: 'text', start: 'Text' }} />
+
 <Story name="Icon Start">
-	<TextInput name="text" color="secondary">
+	<InputField name="text" color="secondary">
 		{#snippet start()}
 			<User />
 		{/snippet}
-	</TextInput>
+	</InputField>
 </Story>
+
 <Story name="Icon End">
-	<TextInput name="text" color="secondary">
+	<InputField name="text" color="secondary">
 		{#snippet end()}
 			<User />
 		{/snippet}
-	</TextInput>
-</Story>
+	</InputField>
+</Story>

packages/svelte/src/lib/components/DataInput/InputField.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" module>
+	export type InputFieldStyle = 'ghost';
+</script>
+
 <script lang="ts">
 	import type { DaisyColor, DaisySize } from '$lib/types';
 	import clsx from 'clsx';
@@ -7,7 +11,6 @@
 	import { twMerge } from 'tailwind-merge';
 
 	type Props = {
-		bordered?: boolean;
 		color?: Exclude<DaisyColor, 'neutral'>;
 		error?: string | Snippet;
 		fade?: boolean;
@@ -15,14 +18,14 @@
 		end?: string | Snippet;
 		label?: string | Snippet;
 		size?: DaisySize;
+		style?: InputFieldStyle;
 		type?: Extract<
 			HTMLInputTypeAttribute,
 			'email' | 'password' | 'search' | 'tel' | 'text' | 'url'
 		>;
-	} & Omit<SvelteHTMLElements['input'], 'type'>;
+	} & Omit<SvelteHTMLElements['input'], 'type' | 'size'>;
 
 	let {
-		bordered = false,
 		class: className,
 		color,
 		error,
@@ -30,7 +33,8 @@
 		start,
 		end,
 		label,
-		size,
+		size = 'md',
+		style,
 		...props
 	}: Props = $props();
 </script>
@@ -63,18 +67,18 @@
 	</div>
 	<div
 		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-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}
@@ -88,4 +92,4 @@
 			{@render end?.()}
 		{/if}
 	</div>
-</label>
+</label>