@webamoki/web-svelte 0.7.1 → 0.7.3

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/server/form-handler.js

@@ -1,14 +1,13 @@
-import { DatabaseError } from 'pg';
 import { fail, message as superFormMessage } from 'sveltekit-superforms';
 /**
  * automatically handle database errors from catch.
  * used in form/action handling in page.server.ts
  */
 export function handleDbErrorForm(form, message, err) {
-    if (err instanceof DatabaseError) {
-        console.error(`Database Error ${message}:`, err);
-        return fail(500, { form });
-    }
+    // if (err instanceof DatabaseError) {
+    // 	console.error(`Database Error ${message}:`, err);
+    // 	return fail(500, { form });
+    // }
     console.error(`Unexpected Error ${message}:`, err);
     return fail(500, { form });
 }
@@ -16,7 +15,9 @@ export function handleDbErrorForm(form, message, err) {
  * check if an error returned by a try catch is a duplicate value error in postgre
  */
 export function isDuplicateDbError(err) {
-    return err instanceof DatabaseError && err.code === '23505';
+    console.error('Checking for duplicate error:', err);
+    console.error('Error type:', err instanceof Error ? err.name : typeof err);
+    return false;
 }
 export function successMessage(form, options) {
     const message = {

package/dist/utils/email/README.md

@@ -1,10 +1,20 @@
 # Email Utility Package
 
-This package provides utilities for sending emails using AWS Simple Email Service (SES).
+This package provides utilities for sending emails using AWS Simple Email Service (SES) API.
+
+## Key Features
+
+- **Cloudflare Workers Compatible**: Uses direct AWS SES API calls with fetch instead of AWS SDK
+- **AWS Signature V4**: Implements proper AWS authentication for secure API requests
+- **Zero Heavy Dependencies**: No AWS SDK required, works in any JavaScript runtime with fetch support
 
 ## Installation
 
-The AWS SES SDK is already included as a dependency. You'll need to configure your AWS credentials and region.
+No additional dependencies required beyond the standard JavaScript runtime. The implementation uses:
+
+- Native `fetch` API for HTTP requests
+- Web Crypto API for AWS Signature V4 signing
+- Native `DOMParser` for XML response parsing
 
 ## Configuration
 

package/dist/utils/email/aws-signer.d.ts

@@ -0,0 +1,17 @@
+/**
+ * AWS Signature Version 4 signing utilities for SES API
+ * Compatible with Cloudflare Workers and other edge runtimes
+ */
+interface AwsCredentials {
+    accessKeyId: string;
+    secretAccessKey: string;
+    region: string;
+}
+/**
+ * Create AWS Signature V4 authorization header
+ */
+export declare function signRequest(method: string, host: string, path: string, body: string, credentials: AwsCredentials, service?: string): Promise<{
+    headers: Record<string, string>;
+    signedHeaders: string;
+}>;
+export {};

package/dist/utils/email/aws-signer.js

@@ -0,0 +1,86 @@
+/**
+ * AWS Signature Version 4 signing utilities for SES API
+ * Compatible with Cloudflare Workers and other edge runtimes
+ */
+/**
+ * Create a SHA-256 hash
+ */
+async function sha256(message) {
+    const encoder = new TextEncoder();
+    const data = encoder.encode(message);
+    return await crypto.subtle.digest('SHA-256', data);
+}
+/**
+ * Create a SHA-256 HMAC
+ */
+async function hmacSha256(key, message) {
+    const encoder = new TextEncoder();
+    const keyData = key instanceof ArrayBuffer ? new Uint8Array(key) : key;
+    const cryptoKey = await crypto.subtle.importKey('raw', keyData, { name: 'HMAC', hash: 'SHA-256' }, false, ['sign']);
+    return await crypto.subtle.sign('HMAC', cryptoKey, encoder.encode(message));
+}
+/**
+ * Convert ArrayBuffer to hex string
+ */
+function bufferToHex(buffer) {
+    return Array.from(new Uint8Array(buffer))
+        .map((b) => b.toString(16).padStart(2, '0'))
+        .join('');
+}
+/**
+ * Get signing key for AWS Signature V4
+ */
+async function getSignatureKey(key, dateStamp, regionName, serviceName) {
+    const encoder = new TextEncoder();
+    const kDate = await hmacSha256(encoder.encode('AWS4' + key), dateStamp);
+    const kRegion = await hmacSha256(kDate, regionName);
+    const kService = await hmacSha256(kRegion, serviceName);
+    const kSigning = await hmacSha256(kService, 'aws4_request');
+    return kSigning;
+}
+/**
+ * Create AWS Signature V4 authorization header
+ */
+export async function signRequest(method, host, path, body, credentials, service = 'ses') {
+    const { accessKeyId, secretAccessKey, region } = credentials;
+    // Create timestamp
+    const now = new Date();
+    const amzDate = now
+        .toISOString()
+        .replace(/[:-]|\.\d{3}/g, '')
+        .slice(0, -1); // Format: YYYYMMDD'T'HHMMSS'Z'
+    const dateStamp = amzDate.slice(0, 8); // Format: YYYYMMDD
+    // Hash the request body
+    const payloadHash = bufferToHex(await sha256(body));
+    // Create canonical headers
+    const canonicalHeaders = `host:${host}\n` + `x-amz-date:${amzDate}\n`;
+    const signedHeaders = 'host;x-amz-date';
+    // Create canonical request
+    const canonicalRequest = `${method}\n` +
+        `${path}\n` +
+        `\n` + // Empty query string
+        `${canonicalHeaders}\n` +
+        `${signedHeaders}\n` +
+        `${payloadHash}`;
+    // Create string to sign
+    const algorithm = 'AWS4-HMAC-SHA256';
+    const credentialScope = `${dateStamp}/${region}/${service}/aws4_request`;
+    const canonicalRequestHash = bufferToHex(await sha256(canonicalRequest));
+    const stringToSign = `${algorithm}\n` + `${amzDate}\n` + `${credentialScope}\n` + `${canonicalRequestHash}`;
+    // Calculate signature
+    const signingKey = await getSignatureKey(secretAccessKey, dateStamp, region, service);
+    const signature = bufferToHex(await hmacSha256(signingKey, stringToSign));
+    // Create authorization header
+    const authorizationHeader = `${algorithm} ` +
+        `Credential=${accessKeyId}/${credentialScope}, ` +
+        `SignedHeaders=${signedHeaders}, ` +
+        `Signature=${signature}`;
+    return {
+        headers: {
+            Authorization: authorizationHeader,
+            'X-Amz-Date': amzDate,
+            'Content-Type': 'application/x-www-form-urlencoded'
+        },
+        signedHeaders
+    };
+}

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

@@ -10,7 +10,8 @@ export interface SendEmailOptions {
     replyTo?: string | string[];
 }
 /**
- * Send an email using AWS SES.
+ * Send an email using AWS SES API.
+ * Uses AWS Signature V4 signing and fetch API for Cloudflare Workers compatibility.
  *
  * Environment variables required:
  * - AWS_REGION

package/dist/utils/email/ses.js

@@ -1,8 +1,7 @@
-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 });
+import { signRequest } from './aws-signer.js';
 /**
- * Send an email using AWS SES.
+ * Send an email using AWS SES API.
+ * Uses AWS Signature V4 signing and fetch API for Cloudflare Workers compatibility.
  *
  * Environment variables required:
  * - AWS_REGION
@@ -39,48 +38,105 @@ export async function sendEmail(options) {
     if (!toAddresses || toAddresses.length === 0) {
         throw new Error('sendEmail: at least one valid recipient is required (to)');
     }
+    // Get AWS credentials from environment
+    const region = process.env.AWS_REGION;
+    const accessKeyId = process.env.AWS_ACCESS_KEY_ID;
+    const secretAccessKey = process.env.AWS_SECRET_ACCESS_KEY;
+    if (!region || !accessKeyId || !secretAccessKey) {
+        throw new Error('sendEmail: missing required environment variables (AWS_REGION, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY)');
+    }
     // Format source with optional fromName
     const source = fromName ? `${fromName} <${from}>` : from;
-    // Build message body
-    const Message = {
-        Subject: {
-            Charset: 'UTF-8',
-            Data: subject
-        },
-        Body: {}
-    };
+    // Build form-encoded request body for SES API
+    const params = new URLSearchParams();
+    params.append('Action', 'SendEmail');
+    params.append('Source', source);
+    // Add destination addresses
+    toAddresses.forEach((addr, i) => params.append(`Destination.ToAddresses.member.${i + 1}`, addr));
+    if (ccAddresses) {
+        ccAddresses.forEach((addr, i) => params.append(`Destination.CcAddresses.member.${i + 1}`, addr));
+    }
+    if (bccAddresses) {
+        bccAddresses.forEach((addr, i) => params.append(`Destination.BccAddresses.member.${i + 1}`, addr));
+    }
+    // Add reply-to addresses
+    if (replyToAddresses) {
+        replyToAddresses.forEach((addr, i) => params.append(`ReplyToAddresses.member.${i + 1}`, addr));
+    }
+    // Add message subject
+    params.append('Message.Subject.Data', subject);
+    params.append('Message.Subject.Charset', 'UTF-8');
+    // Add message body
     if (html) {
-        Message.Body.Html = {
-            Charset: 'UTF-8',
-            Data: html
-        };
+        params.append('Message.Body.Html.Data', html);
+        params.append('Message.Body.Html.Charset', 'UTF-8');
     }
     if (text) {
-        Message.Body.Text = {
-            Charset: 'UTF-8',
-            Data: text
-        };
+        params.append('Message.Body.Text.Data', text);
+        params.append('Message.Body.Text.Charset', 'UTF-8');
     }
-    const params = {
-        Source: source,
-        Destination: {
-            ToAddresses: toAddresses,
-            CcAddresses: ccAddresses,
-            BccAddresses: bccAddresses
-        },
-        Message,
-        ReplyToAddresses: replyToAddresses
-    };
+    const body = params.toString();
+    const host = `email.${region}.amazonaws.com`;
+    const path = '/';
     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');
+        // Sign the request
+        const { headers } = await signRequest('POST', host, path, body, {
+            accessKeyId,
+            secretAccessKey,
+            region
+        });
+        // Make the API request
+        const response = await fetch(`https://${host}${path}`, {
+            method: 'POST',
+            headers: {
+                ...headers,
+                Host: host,
+                'Content-Length': body.length.toString()
+            },
+            body
+        });
+        const responseText = await response.text();
+        if (!response.ok) {
+            // Parse error response
+            let errorMessage = 'Unknown error';
+            let errorCode;
+            try {
+                const parser = new DOMParser();
+                const xmlDoc = parser.parseFromString(responseText, 'text/xml');
+                const errorNode = xmlDoc.querySelector('Error');
+                if (errorNode) {
+                    errorCode = errorNode.querySelector('Code')?.textContent || undefined;
+                    errorMessage = errorNode.querySelector('Message')?.textContent || errorMessage;
+                }
+            }
+            catch {
+                errorMessage = responseText || `HTTP ${response.status} ${response.statusText}`;
+            }
+            throw new Error(`sendEmail: failed to send email: ${JSON.stringify({ message: errorMessage, code: errorCode })}`);
+        }
+        // Parse success response for MessageId
+        try {
+            const parser = new DOMParser();
+            const xmlDoc = parser.parseFromString(responseText, 'text/xml');
+            const messageId = xmlDoc.querySelector('MessageId')?.textContent;
+            if (!messageId) {
+                throw new Error('sendEmail: SES response did not contain a MessageId');
+            }
+            return messageId;
+        }
+        catch (err) {
+            if (err instanceof Error && err.message.includes('MessageId')) {
+                throw err;
+            }
+            throw new Error(`sendEmail: failed to parse SES response: ${err instanceof Error ? err.message : String(err)}`);
         }
-        return res.MessageId;
     }
     catch (err) {
-        // Normalize error for callers
+        // Re-throw if already formatted
+        if (err instanceof Error && err.message.startsWith('sendEmail:')) {
+            throw err;
+        }
+        // Normalize other errors
         const message = err instanceof Error ? err.message : String(err);
         let code;
         if (err && typeof err === 'object') {
@@ -89,7 +145,6 @@ export async function sendEmail(options) {
                 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.1",
+  "version": "0.7.3",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Webamoki/Web-svelte"
+  },
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -71,6 +75,7 @@
     "@changesets/cli": "^2.29.7",
     "@eslint/compat": "^1.4.1",
     "@eslint/js": "^9.39.1",
+    "@sveltejs/adapter-cloudflare": "^7.2.8",
     "@sveltejs/kit": "^2.48.4",
     "@sveltejs/package": "^2.5.4",
     "@sveltejs/vite-plugin-svelte": "^6.2.1",
@@ -78,7 +83,6 @@
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.17",
     "@types/node": "^22.19.1",
-    "@types/pg": "^8.15.6",
     "@types/ramda": "^0.31.1",
     "@types/sorted-array-functions": "^1.3.3",
     "clsx": "^2.1.1",
@@ -106,7 +110,6 @@
     "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",
@@ -115,7 +118,6 @@
     "devalue": "^5.5.0",
     "drizzle-orm": "^0.44.7",
     "formsnap": "^2.0.1",
-    "pg": "^8.16.3",
     "ramda": "^0.31.3",
     "sorted-array-functions": "^1.3.0",
     "svelte-awesome-color-picker": "^4.1.0",