@webamoki/web-svelte 0.7.0 → 0.7.2

package/dist/components/form/IconInputWrapper.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+
+	interface Props {
+		icon?: Component;
+		/**
+		 * Position of the icon vertically.
+		 * - 'center': Centers vertically (for single-line inputs)
+		 * - 'top': Aligns to top with padding (for multi-line inputs like textarea)
+		 */
+		iconPosition?: 'center' | 'top';
+		/**
+		 * Whether this wrapper should grow to fill flex container (used in layouts with buttons)
+		 */
+		flex?: boolean;
+		children: Snippet<[{ class: string }]>;
+	}
+
+	let { icon, iconPosition = 'center', flex = false, children }: Props = $props();
+
+	const iconClass =
+		iconPosition === 'top'
+			? 'pointer-events-none absolute top-4 left-4 text-gray-500'
+			: 'pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-gray-500';
+
+	const wrapperClass = flex ? 'relative flex-1' : 'relative';
+</script>
+
+{#if icon}
+	{@const Icon = icon}
+	<div class={wrapperClass}>
+		<div class={iconClass}>
+			<Icon class="size-5" />
+		</div>
+		{@render children({ class: 'pl-12' })}
+	</div>
+{:else}
+	{@render children({ class: '' })}
+{/if}

package/dist/components/form/IconInputWrapper.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Component, Snippet } from 'svelte';
+interface Props {
+    icon?: Component;
+    /**
+     * Position of the icon vertically.
+     * - 'center': Centers vertically (for single-line inputs)
+     * - 'top': Aligns to top with padding (for multi-line inputs like textarea)
+     */
+    iconPosition?: 'center' | 'top';
+    /**
+     * Whether this wrapper should grow to fill flex container (used in layouts with buttons)
+     */
+    flex?: boolean;
+    children: Snippet<[{
+        class: string;
+    }]>;
+}
+declare const IconInputWrapper: Component<Props, {}, "">;
+type IconInputWrapper = ReturnType<typeof IconInputWrapper>;
+export default IconInputWrapper;

package/dist/components/form/fields/DateField.svelte

@@ -1,14 +1,18 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
-	import type { FormPath } from 'sveltekit-superforms';
-	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
+	import IconInputWrapper from '../IconInputWrapper.svelte';
 	import { Input } from '../../../shadcn/components/ui/input/index.js';
+	import { cn } from '../../../shadcn/utils.js';
 	import { CalendarDate } from '@internationalized/date';
+	import type { Component } from 'svelte';
+	import type { FormPath } from 'sveltekit-superforms';
+	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
 	interface Props extends FieldWrapperProps<T, U, M> {
 		value?: CalendarDate;
 		class?: string;
+		icon?: Component;
 	}
-	let { value = $bindable(), class: className, ...fieldProps }: Props = $props();
+	let { value = $bindable(), class: className, icon, ...fieldProps }: Props = $props();
 
 	// Getter: format CalendarDate → string (YYYY-MM-DD)
 	function get(): string {
@@ -34,6 +38,10 @@
 
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
-		<Input type="date" bind:value={get, set} class={className} {...props} />
+		<IconInputWrapper {icon}>
+			{#snippet children({ class: iconClass })}
+				<Input type="date" bind:value={get, set} class={cn(iconClass, className)} {...props} />
+			{/snippet}
+		</IconInputWrapper>
 	{/snippet}
 </FieldWrapper>

package/dist/components/form/fields/DateField.svelte.d.ts

@@ -1,10 +1,12 @@
+import { CalendarDate } from '@internationalized/date';
+import type { Component } from 'svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
-import { CalendarDate } from '@internationalized/date';
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
     props: FieldWrapperProps<T, U, M> & {
         value?: CalendarDate;
         class?: string;
+        icon?: Component;
     };
     exports: {};
     bindings: "value";

package/dist/components/form/fields/MessageField.svelte

@@ -1,8 +1,11 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
-	import type { FormPath } from 'sveltekit-superforms';
-	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
+	import IconInputWrapper from '../IconInputWrapper.svelte';
 	import { Textarea } from '../../../shadcn/components/ui/textarea/index.js';
+	import { cn } from '../../../shadcn/utils.js';
 	import { Lock, LockOpen } from '@lucide/svelte';
+	import type { Component } from 'svelte';
+	import type { FormPath } from 'sveltekit-superforms';
+	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
 	interface Props extends FieldWrapperProps<T, U, M> {
 		value?: string;
@@ -11,6 +14,7 @@
 		defaultHeight?: number;
 		showLock?: boolean;
 		defaultLocked?: boolean;
+		icon?: Component;
 	}
 	let {
 		value = $bindable(),
@@ -19,6 +23,7 @@
 		defaultHeight = 100,
 		showLock = true,
 		defaultLocked = false,
+		icon,
 		...fieldProps
 	}: Props = $props();
 
@@ -28,14 +33,18 @@
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
 		<div class="flex w-full items-start gap-2">
-			<!-- Textarea itself -->
-			<Textarea
-				bind:value
-				class={`${className || ''} ${locked ? 'resize-none' : 'resize-y'}`}
-				{placeholder}
-				style={defaultHeight ? `height: ${defaultHeight}px` : undefined}
-				{...props}
-			/>
+			<!-- Textarea itself with optional left icon -->
+			<IconInputWrapper {icon} iconPosition="top" flex>
+				{#snippet children({ class: iconClass })}
+					<Textarea
+						bind:value
+						class={cn(iconClass, className || '', locked ? 'resize-none' : 'resize-y')}
+						{placeholder}
+						style={defaultHeight ? `height: ${defaultHeight}px` : undefined}
+						{...props}
+					/>
+				{/snippet}
+			</IconInputWrapper>
 
 			<!-- Lock/unlock button -->
 			{#if showLock}

package/dist/components/form/fields/MessageField.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Component } from 'svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
@@ -8,6 +9,7 @@ declare function $$render<T extends Record<string, unknown>, U extends FormPath<
         defaultHeight?: number;
         showLock?: boolean;
         defaultLocked?: boolean;
+        icon?: Component;
     };
     exports: {};
     bindings: "value";

package/dist/components/form/fields/NumberField.svelte

@@ -1,18 +1,41 @@
 <script lang="ts" generics="V,T extends Record<string, unknown>, U extends FormPath<T>, M">
+	import IconInputWrapper from '../IconInputWrapper.svelte';
+	import { Input } from '../../../shadcn/components/ui/input/index.js';
+	import { cn } from '../../../shadcn/utils.js';
+	import type { Component } from 'svelte';
 	import type { FormPath } from 'sveltekit-superforms';
 	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
-	import { Input } from '../../../shadcn/components/ui/input/index.js';
 
 	interface Props extends FieldWrapperProps<T, U, M> {
 		value?: V;
 		class?: string;
 		step?: HTMLInputElement['step'];
+		placeholder?: string;
+		icon?: Component;
 	}
-	let { value = $bindable(), class: className, step, ...fieldProps }: Props = $props();
+	let {
+		value = $bindable(),
+		class: className,
+		step,
+		placeholder,
+		icon,
+		...fieldProps
+	}: Props = $props();
 </script>
 
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
-		<Input type="number" bind:value class={className} {step} {...props} />
+		<IconInputWrapper {icon}>
+			{#snippet children({ class: iconClass })}
+				<Input
+					type="number"
+					bind:value
+					class={cn(iconClass, className)}
+					{placeholder}
+					{step}
+					{...props}
+				/>
+			{/snippet}
+		</IconInputWrapper>
 	{/snippet}
 </FieldWrapper>

package/dist/components/form/fields/NumberField.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Component } from 'svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
 declare function $$render<V, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
@@ -5,6 +6,8 @@ declare function $$render<V, T extends Record<string, unknown>, U extends FormPa
         value?: V;
         class?: string;
         step?: HTMLInputElement["step"];
+        placeholder?: string;
+        icon?: Component;
     };
     exports: {};
     bindings: "value";

package/dist/components/form/fields/PasswordField.svelte

@@ -1,13 +1,18 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
-	import type { FormPath } from 'sveltekit-superforms';
-	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
+	import IconInputWrapper from '../IconInputWrapper.svelte';
 	import { Input } from '../../../shadcn/components/ui/input/index.js';
+	import { cn } from '../../../shadcn/utils.js';
 	import { Eye, EyeOff } from '@lucide/svelte';
+	import type { Component } from 'svelte';
+	import type { FormPath } from 'sveltekit-superforms';
+	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
 	interface Props extends FieldWrapperProps<T, U, M> {
 		value?: string;
+		class?: string;
+		icon?: Component;
 	}
-	let { value = $bindable(), ...fieldProps }: Props = $props();
+	let { value = $bindable(), class: className, icon, ...fieldProps }: Props = $props();
 
 	let show = $state(false);
 	let inputType = $derived(show ? 'text' : 'password');
@@ -16,8 +21,12 @@
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
 		<div class="flex w-full items-stretch gap-2">
-			<!-- Input itself -->
-			<Input type={inputType} bind:value {...props} />
+			<!-- Input itself with optional left icon -->
+			<IconInputWrapper {icon} flex>
+				{#snippet children({ class: iconClass })}
+					<Input type={inputType} bind:value class={cn(iconClass, className)} {...props} />
+				{/snippet}
+			</IconInputWrapper>
 
 			<!-- Show/hide button outside input -->
 			<button

package/dist/components/form/fields/PasswordField.svelte.d.ts

@@ -1,8 +1,11 @@
+import type { Component } from 'svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
     props: FieldWrapperProps<T, U, M> & {
         value?: string;
+        class?: string;
+        icon?: Component;
     };
     exports: {};
     bindings: "value";

package/dist/components/form/fields/SelectField.svelte

@@ -2,6 +2,7 @@
 	lang="ts"
 	generics="I,V, K extends string | number,T extends Record<string, unknown>, U extends FormPath<T>, M"
 >
+	import IconInputWrapper from '../IconInputWrapper.svelte';
 	import {
 		Select,
 		SelectContent,
@@ -11,6 +12,7 @@
 		SelectTrigger
 	} from '../../../shadcn/components/ui/select/index.js';
 	import { cn } from '../../../shadcn/utils.js';
+	import type { Component } from 'svelte';
 	import type { FormPath } from 'sveltekit-superforms';
 	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
@@ -23,6 +25,7 @@
 		onchange?: (value: V | undefined) => void;
 		class?: string;
 		placeholder: string;
+		icon?: Component;
 	}
 	let {
 		value = $bindable(undefined),
@@ -33,6 +36,7 @@
 		onchange,
 		placeholder,
 		items,
+		icon,
 		...fieldProps
 	}: Props = $props();
 	let valueToItem: Map<V, I> = new Map(items.map((item) => [getValue(item), item] as const));
@@ -63,11 +67,15 @@
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
 		<Select type="single" {...props} bind:value={getKeyFromValue, setValueFromKey}>
-			<SelectTrigger class={cn('w-full cursor-pointer truncate', className)}>
-				<span class="block truncate">
-					{value ? getLabel(valueToItem.get(value)!) : placeholder}
-				</span>
-			</SelectTrigger>
+			<IconInputWrapper {icon}>
+				{#snippet children({ class: iconClass })}
+					<SelectTrigger class={cn('w-full cursor-pointer truncate', iconClass, className)}>
+						<span class="block truncate">
+							{value ? getLabel(valueToItem.get(value)!) : placeholder}
+						</span>
+					</SelectTrigger>
+				{/snippet}
+			</IconInputWrapper>
 			<SelectContent>
 				<SelectGroup>
 					<SelectLabel>{fieldProps.label}</SelectLabel>

package/dist/components/form/fields/SelectField.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Component } from 'svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
 declare function $$render<I, V, K extends string | number, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
@@ -10,6 +11,7 @@ declare function $$render<I, V, K extends string | number, T extends Record<stri
         onchange?: (value: V | undefined) => void;
         class?: string;
         placeholder: string;
+        icon?: Component;
     };
     exports: {};
     bindings: "value";

package/dist/components/form/fields/SelectMultiField.svelte

@@ -2,6 +2,7 @@
 	lang="ts"
 	generics="I,V, K extends string | number,T extends Record<string, unknown>, U extends FormPath<T>, M"
 >
+	import IconInputWrapper from '../IconInputWrapper.svelte';
 	import {
 		Select,
 		SelectContent,
@@ -11,6 +12,7 @@
 		SelectTrigger
 	} from '../../../shadcn/components/ui/select/index.js';
 	import { cn } from '../../../shadcn/utils.js';
+	import type { Component } from 'svelte';
 	import type { FormPath } from 'sveltekit-superforms';
 	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
@@ -23,6 +25,7 @@
 		onchange?: (value: V[]) => void;
 		class?: string;
 		placeholder: string;
+		icon?: Component;
 	}
 	let {
 		values = $bindable([]),
@@ -33,6 +36,7 @@
 		onchange,
 		placeholder,
 		items,
+		icon,
 		...fieldProps
 	}: Props = $props();
 	let valueToItem: Map<V, I> = new Map(items.map((item) => [getValue(item), item] as const));
@@ -70,11 +74,15 @@
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
 		<Select type="multiple" {...props} bind:value={getKeyFromValue, setValueFromKey}>
-			<SelectTrigger class={cn('w-full cursor-pointer truncate', className)}>
-				<span class="block truncate">
-					{getPreview()}
-				</span>
-			</SelectTrigger>
+			<IconInputWrapper {icon}>
+				{#snippet children({ class: iconClass })}
+					<SelectTrigger class={cn('w-full cursor-pointer truncate', iconClass, className)}>
+						<span class="block truncate">
+							{getPreview()}
+						</span>
+					</SelectTrigger>
+				{/snippet}
+			</IconInputWrapper>
 			<SelectContent>
 				<SelectGroup>
 					<SelectLabel>{fieldProps.label}</SelectLabel>

package/dist/components/form/fields/SelectMultiField.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Component } from 'svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
 declare function $$render<I, V, K extends string | number, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
@@ -10,6 +11,7 @@ declare function $$render<I, V, K extends string | number, T extends Record<stri
         onchange?: (value: V[]) => void;
         class?: string;
         placeholder: string;
+        icon?: Component;
     };
     exports: {};
     bindings: "values";

package/dist/components/form/fields/TextField.svelte

@@ -1,25 +1,34 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
+	import IconInputWrapper from '../IconInputWrapper.svelte';
+	import { Input } from '../../../shadcn/components/ui/input/index.js';
+	import { cn } from '../../../shadcn/utils.js';
+	import type { Component } from 'svelte';
 	import type { FormPath } from 'sveltekit-superforms';
 	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
-	import { Input } from '../../../shadcn/components/ui/input/index.js';
 
 	interface Props extends FieldWrapperProps<T, U, M> {
 		value?: string;
 		type?: HTMLInputElement['type'];
 		class?: string;
 		placeholder?: string;
+		icon?: Component;
 	}
 	let {
 		value = $bindable(),
 		type = 'text',
 		class: className,
 		placeholder,
+		icon,
 		...fieldProps
 	}: Props = $props();
 </script>
 
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
-		<Input {type} bind:value class={className} {placeholder} {...props} />
+		<IconInputWrapper {icon}>
+			{#snippet children({ class: iconClass })}
+				<Input {type} bind:value class={cn(iconClass, className)} {placeholder} {...props} />
+			{/snippet}
+		</IconInputWrapper>
 	{/snippet}
 </FieldWrapper>

package/dist/components/form/fields/TextField.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Component } from 'svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
@@ -6,6 +7,7 @@ declare function $$render<T extends Record<string, unknown>, U extends FormPath<
         type?: HTMLInputElement["type"];
         class?: string;
         placeholder?: string;
+        icon?: Component;
     };
     exports: {};
     bindings: "value";

package/dist/components/form/fields/TextFieldNullable.svelte

@@ -1,19 +1,23 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
+	import { Input } from '../../../shadcn/components/ui/input/index.js';
+	import { cn } from '../../../shadcn/utils.js';
+	import type { Component } from 'svelte';
 	import type { FormPath } from 'sveltekit-superforms';
 	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
-	import { Input } from '../../../shadcn/components/ui/input/index.js';
 
 	interface Props extends FieldWrapperProps<T, U, M> {
 		value?: string | null;
 		type?: HTMLInputElement['type'];
 		class?: string;
 		placeholder?: string;
+		icon?: Component;
 	}
 	let {
 		value = $bindable(),
 		type = 'text',
 		class: className,
 		placeholder,
+		icon,
 		...fieldProps
 	}: Props = $props();
 
@@ -28,6 +32,22 @@
 
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
-		<Input {type} bind:value={get, set} class={className} {placeholder} {...props} />
+		{#if icon}
+			{@const Icon = icon}
+			<div class="relative">
+				<div class="pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-gray-500">
+					<Icon class="size-5" />
+				</div>
+				<Input
+					{type}
+					bind:value={get, set}
+					class={cn('pl-12', className)}
+					{placeholder}
+					{...props}
+				/>
+			</div>
+		{:else}
+			<Input {type} bind:value={get, set} class={className} {placeholder} {...props} />
+		{/if}
 	{/snippet}
 </FieldWrapper>

package/dist/components/form/fields/TextFieldNullable.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Component } from 'svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
@@ -6,6 +7,7 @@ declare function $$render<T extends Record<string, unknown>, U extends FormPath<
         type?: HTMLInputElement["type"];
         class?: string;
         placeholder?: string;
+        icon?: Component;
     };
     exports: {};
     bindings: "value";

package/dist/components/form/fields/TimeField.svelte

@@ -1,15 +1,27 @@
 <script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>, M">
-	import type { FormPath } from 'sveltekit-superforms';
-	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
+	import IconInputWrapper from '../IconInputWrapper.svelte';
 	import { Input } from '../../../shadcn/components/ui/input/index.js';
+	import { cn } from '../../../shadcn/utils.js';
 	import { Time } from '@internationalized/date';
+	import type { Component } from 'svelte';
+	import type { FormPath } from 'sveltekit-superforms';
+	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
 	interface Props extends FieldWrapperProps<T, U, M> {
 		value?: Time;
 		class?: string;
 		step?: HTMLInputElement['step'];
+		placeholder?: string;
+		icon?: Component;
 	}
-	let { value = $bindable(), class: className, step, ...fieldProps }: Props = $props();
+	let {
+		value = $bindable(),
+		class: className,
+		step,
+		placeholder,
+		icon,
+		...fieldProps
+	}: Props = $props();
 	// Getter: format Time as string depending on step
 	function get(): string {
 		if (!value) return '00:00:00';
@@ -44,6 +56,17 @@
 
 <FieldWrapper {...fieldProps}>
 	{#snippet formElem(props)}
-		<Input type="time" bind:value={get, set} class={className} {step} {...props} />
+		<IconInputWrapper {icon}>
+			{#snippet children({ class: iconClass })}
+				<Input
+					type="time"
+					bind:value={get, set}
+					class={cn(iconClass, className)}
+					{placeholder}
+					{step}
+					{...props}
+				/>
+			{/snippet}
+		</IconInputWrapper>
 	{/snippet}
 </FieldWrapper>

package/dist/components/form/fields/TimeField.svelte.d.ts

@@ -1,11 +1,14 @@
+import { Time } from '@internationalized/date';
+import type { Component } from 'svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
-import { Time } from '@internationalized/date';
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
     props: FieldWrapperProps<T, U, M> & {
         value?: Time;
         class?: string;
         step?: HTMLInputElement["step"];
+        placeholder?: string;
+        icon?: Component;
     };
     exports: {};
     bindings: "value";

package/dist/components/form/index.d.ts

@@ -3,15 +3,16 @@ import ChoiceField from './fields/ChoiceField.svelte';
 import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
 import DateField from './fields/DateField.svelte';
 import HexColorField from './fields/HexColorField.svelte';
+import MessageField from './fields/MessageField.svelte';
 import NumberField from './fields/NumberField.svelte';
 import PasswordField from './fields/PasswordField.svelte';
 import SelectField from './fields/SelectField.svelte';
 import SelectMultiField from './fields/SelectMultiField.svelte';
 import TextField from './fields/TextField.svelte';
 import TextFieldNullable from './fields/TextFieldNullable.svelte';
-import MessageField from './fields/MessageField.svelte';
 import TimeField from './fields/TimeField.svelte';
 import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
 import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
 import Form from './Form.svelte';
-export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, MessageField, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };
+import IconInputWrapper from './IconInputWrapper.svelte';
+export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, IconInputWrapper, MessageField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };

package/dist/components/form/index.js

@@ -3,15 +3,16 @@ import ChoiceField from './fields/ChoiceField.svelte';
 import ChoiceMultiField from './fields/ChoiceMultiField.svelte';
 import DateField from './fields/DateField.svelte';
 import HexColorField from './fields/HexColorField.svelte';
+import MessageField from './fields/MessageField.svelte';
 import NumberField from './fields/NumberField.svelte';
 import PasswordField from './fields/PasswordField.svelte';
 import SelectField from './fields/SelectField.svelte';
 import SelectMultiField from './fields/SelectMultiField.svelte';
 import TextField from './fields/TextField.svelte';
 import TextFieldNullable from './fields/TextFieldNullable.svelte';
-import MessageField from './fields/MessageField.svelte';
 import TimeField from './fields/TimeField.svelte';
 import WeekdayChoiceField from './fields/WeekdayChoiceField.svelte';
 import WeekdayChoiceMultiField from './fields/WeekdayChoiceMultiField.svelte';
 import Form from './Form.svelte';
-export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, MessageField, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };
+import IconInputWrapper from './IconInputWrapper.svelte';
+export { Button, ChoiceField, ChoiceMultiField, DateField, Form, HexColorField, IconInputWrapper, MessageField, NumberField, PasswordField, SelectField, SelectMultiField, TextField, TextFieldNullable, TimeField, WeekdayChoiceField, WeekdayChoiceMultiField };

package/dist/utils/email/README.md

@@ -0,0 +1,209 @@
+# Email Utility Package
+
+This package provides utilities for sending emails using AWS Simple Email Service (SES).
+
+## Installation
+
+The AWS SES SDK is already included as a dependency. You'll need to configure your AWS credentials and region.
+
+## Configuration
+
+### Environment Variables
+
+The email utility requires the following environment variables:
+
+- `AWS_REGION` - AWS region where SES is configured (e.g., `us-east-1`)
+- `AWS_ACCESS_KEY_ID` - AWS access key ID
+- `AWS_SECRET_ACCESS_KEY` - AWS secret access key
+
+### SES Setup
+
+Before using this utility, ensure:
+
+1. Your AWS account has SES enabled in your chosen region
+2. Your sender email address(es) are verified in SES
+3. If in SES sandbox mode, recipient addresses must also be verified
+4. Your account has the necessary IAM permissions to send emails via SES
+
+## Usage
+
+### Basic Example
+
+```typescript
+import { sendEmail } from '@webamoki/web-svelte/utils/email';
+
+// Send a simple text email
+const messageId = await sendEmail({
+	to: 'recipient@example.com',
+	subject: 'Hello from SES',
+	text: 'This is a plain text email.',
+	from: 'sender@example.com'
+});
+
+console.log('Email sent with message ID:', messageId);
+```
+
+### HTML Email
+
+```typescript
+await sendEmail({
+	to: 'recipient@example.com',
+	subject: 'Welcome!',
+	html: '<h1>Welcome to our service!</h1><p>Thanks for signing up.</p>',
+	text: 'Welcome to our service! Thanks for signing up.', // Fallback for email clients that don't support HTML
+	from: 'noreply@example.com',
+	fromName: 'My Application'
+});
+```
+
+### Multiple Recipients
+
+```typescript
+await sendEmail({
+	to: ['user1@example.com', 'user2@example.com'],
+	cc: 'manager@example.com',
+	bcc: ['archive@example.com', 'backup@example.com'],
+	subject: 'Team Update',
+	text: 'This is a team-wide announcement.',
+	from: 'team@example.com'
+});
+```
+
+### With Reply-To
+
+```typescript
+await sendEmail({
+	to: 'customer@example.com',
+	subject: 'Your order confirmation',
+	html: '<p>Your order has been confirmed!</p>',
+	from: 'noreply@example.com',
+	fromName: 'Order System',
+	replyTo: 'support@example.com'
+});
+```
+
+## API Reference
+
+### `sendEmail(options: SendEmailOptions): Promise<string>`
+
+Sends an email via AWS SES.
+
+**Returns:** Promise that resolves to the SES message ID (string) on success.
+
+**Throws:** Error with descriptive message if:
+
+- Validation fails (missing required fields, invalid recipients, etc.)
+- AWS SES returns an error (credentials, permissions, service issues)
+- SES response does not contain a MessageId (unlikely but handled explicitly)
+
+### `SendEmailOptions`
+
+```typescript
+interface SendEmailOptions {
+	to: string | string[]; // Required: recipient email address(es)
+	cc?: string | string[]; // Optional: CC recipients
+	bcc?: string | string[]; // Optional: BCC recipients
+	subject: string; // Required: email subject
+	text?: string; // Optional: plain text body
+	html?: string; // Optional: HTML body
+	from: string; // Required: sender email
+	fromName?: string; // Optional: sender display name
+	replyTo?: string | string[]; // Optional: reply-to address(es)
+}
+```
+
+## Error Handling
+
+The `sendEmail` function validates inputs and will throw errors for:
+
+- Missing required fields (`to`, `from`, `subject`, at least one of `text` or `html`)
+- Empty recipient list (no valid email addresses after filtering)
+- AWS SES errors (credentials, permissions, service issues)
+
+**Note:** The function automatically filters out empty strings and whitespace-only values from recipient arrays (`to`, `cc`, `bcc`, `replyTo`). For example, `['', 'valid@example.com', '  ']` will be processed as `['valid@example.com']`.
+
+Always wrap calls in try-catch:
+
+```typescript
+try {
+	const messageId = await sendEmail({
+		to: 'user@example.com',
+		subject: 'Test',
+		text: 'Hello!',
+		from: 'sender@example.com'
+	});
+	console.log('Success:', messageId);
+} catch (error) {
+	console.error('Failed to send email:', error.message);
+	// Handle error appropriately
+}
+```
+
+## SvelteKit Integration
+
+### Server-Only Usage
+
+⚠️ **Important:** This utility should only be used in server-side code (e.g., `+page.server.ts`, `+server.ts`, or server-side functions) as it requires AWS credentials.
+
+### Example: Contact Form Handler
+
+```typescript
+// src/routes/contact/+page.server.ts
+import { sendEmail } from '@webamoki/web-svelte/utils/email';
+import type { Actions } from './$types';
+
+export const actions: Actions = {
+	default: async ({ request }) => {
+		const formData = await request.formData();
+		const email = formData.get('email') as string;
+		const message = formData.get('message') as string;
+
+		try {
+			await sendEmail({
+				to: 'admin@example.com',
+				subject: `Contact form submission from ${email}`,
+				text: message,
+				from: 'noreply@example.com',
+				replyTo: email
+			});
+
+			return { success: true };
+		} catch (error) {
+			console.error('Email error:', error);
+			return { success: false, error: 'Failed to send message' };
+		}
+	}
+};
+```
+
+## Best Practices
+
+1. **Never expose AWS credentials in client-side code**
+2. **Use environment variables for configuration**
+3. **Verify sender addresses in SES before deploying**
+4. **Always provide both `text` and `html` versions when sending HTML emails**
+5. **Handle errors gracefully and log failures for monitoring**
+6. **Consider rate limits** - SES has sending limits based on your account status
+7. **Use BCC for bulk emails** to avoid exposing all recipients
+8. **Set appropriate Reply-To addresses** for better user experience
+
+## Troubleshooting
+
+### "Sender not verified" error
+
+Verify your sender email address in the AWS SES console for your region.
+
+### "Access Denied" error
+
+Ensure your AWS credentials have the `ses:SendEmail` permission.
+
+### Emails not arriving
+
+- Check SES sending statistics in AWS console
+- Verify you're not in sandbox mode (or that recipients are verified)
+- Check spam folders
+- Review bounce and complaint notifications in SES
+
+## License
+
+MIT

package/dist/utils/email/index.d.ts

@@ -0,0 +1 @@
+export { sendEmail, type SendEmailOptions } from './ses.js';

package/dist/utils/email/index.js

@@ -0,0 +1 @@
+export { sendEmail } from './ses.js';

package/dist/utils/email/ses.d.ts

@@ -0,0 +1,22 @@
+export interface SendEmailOptions {
+    to: string | string[];
+    cc?: string | string[];
+    bcc?: string | string[];
+    subject: string;
+    text?: string;
+    html?: string;
+    from: string;
+    fromName?: string;
+    replyTo?: string | string[];
+}
+/**
+ * Send an email using AWS SES.
+ *
+ * Environment variables required:
+ * - AWS_REGION
+ * - AWS_ACCESS_KEY_ID
+ * - AWS_SECRET_ACCESS_KEY
+ *
+ * @returns messageId returned by SES
+ */
+export declare function sendEmail(options: SendEmailOptions): Promise<string>;

package/dist/utils/email/ses.js

@@ -0,0 +1,95 @@
+import { SESClient, SendEmailCommand } from '@aws-sdk/client-ses';
+// Create SES client once at module level for reuse across function calls
+const sesClient = new SESClient({ region: process.env.AWS_REGION });
+/**
+ * Send an email using AWS SES.
+ *
+ * Environment variables required:
+ * - AWS_REGION
+ * - AWS_ACCESS_KEY_ID
+ * - AWS_SECRET_ACCESS_KEY
+ *
+ * @returns messageId returned by SES
+ */
+export async function sendEmail(options) {
+    if (!options)
+        throw new Error('sendEmail: options is required');
+    const { to, cc, bcc, subject, text, html, from, fromName, replyTo } = options;
+    if (!subject) {
+        throw new Error('sendEmail: subject is required');
+    }
+    if (!text && !html) {
+        throw new Error('sendEmail: at least one of text or html body must be provided');
+    }
+    if (!from) {
+        throw new Error('sendEmail: sender `from` is required');
+    }
+    // Normalize and validate addresses: convert to array and filter out empty/whitespace strings
+    const normalizeAddresses = (addr) => {
+        if (addr === undefined)
+            return undefined;
+        const addresses = Array.isArray(addr) ? addr : [addr];
+        const filtered = addresses.filter((a) => a && a.trim() !== '');
+        return filtered.length > 0 ? filtered : undefined;
+    };
+    const toAddresses = normalizeAddresses(to);
+    const ccAddresses = normalizeAddresses(cc);
+    const bccAddresses = normalizeAddresses(bcc);
+    const replyToAddresses = normalizeAddresses(replyTo);
+    if (!toAddresses || toAddresses.length === 0) {
+        throw new Error('sendEmail: at least one valid recipient is required (to)');
+    }
+    // Format source with optional fromName
+    const source = fromName ? `${fromName} <${from}>` : from;
+    // Build message body
+    const Message = {
+        Subject: {
+            Charset: 'UTF-8',
+            Data: subject
+        },
+        Body: {}
+    };
+    if (html) {
+        Message.Body.Html = {
+            Charset: 'UTF-8',
+            Data: html
+        };
+    }
+    if (text) {
+        Message.Body.Text = {
+            Charset: 'UTF-8',
+            Data: text
+        };
+    }
+    const params = {
+        Source: source,
+        Destination: {
+            ToAddresses: toAddresses,
+            CcAddresses: ccAddresses,
+            BccAddresses: bccAddresses
+        },
+        Message,
+        ReplyToAddresses: replyToAddresses
+    };
+    try {
+        const command = new SendEmailCommand(params);
+        const res = await sesClient.send(command);
+        if (!res.MessageId) {
+            throw new Error('sendEmail: SES response did not contain a MessageId');
+        }
+        return res.MessageId;
+    }
+    catch (err) {
+        // Normalize error for callers
+        const message = err instanceof Error ? err.message : String(err);
+        let code;
+        if (err && typeof err === 'object') {
+            const e = err;
+            if (typeof e['name'] === 'string')
+                code = e['name'];
+        }
+        const details = { message, code };
+        // Re-throw a clear error for the caller to handle
+        throw new Error(`sendEmail: failed to send email: ${JSON.stringify(details)}`);
+    }
+}

package/package.json

@@ -3,8 +3,12 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.7.0",
+  "version": "0.7.2",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Webamoki/Web-svelte"
+  },
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -43,6 +47,10 @@
       "types": "./dist/utils/form/index.d.ts",
       "import": "./dist/utils/form/index.js"
     },
+    "./utils/email": {
+      "types": "./dist/utils/email/index.d.ts",
+      "import": "./dist/utils/email/index.js"
+    },
     "./server/form-handler": {
       "types": "./dist/server/form-handler.d.ts",
       "import": "./dist/server/form-handler.js"
@@ -102,6 +110,7 @@
     "svelte"
   ],
   "dependencies": {
+    "@aws-sdk/client-ses": "^3.948.0",
     "@internationalized/date": "^3.10.0",
     "@lucide/svelte": "^0.553.0",
     "@sveltejs/adapter-auto": "^7.0.0",