@webamoki/web-svelte 0.8.0 → 1.0.0

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

@@ -1,35 +1,44 @@
-import type { Component } from 'svelte';
-import type { FormPath } from 'sveltekit-superforms';
-import { type FieldWrapperProps } from '../FieldWrapper.svelte';
+export default MessageField;
+type MessageField<T extends Record<string, unknown>, U extends FormPath<T>, M> = SvelteComponent<Props, {}, {}> & {
+    $$bindings?: "value" | undefined;
+} & {};
+declare const MessageField: $$IsomorphicComponent;
+import { FormPath } from 'sveltekit-superforms';
+type Props = FieldWrapperProps<T, U, M> & {
+    class?: string | undefined;
+    defaultHeight?: number | undefined;
+    icon?: Component<any, any, string> | undefined;
+    placeholder?: string | undefined;
+    resize?: boolean | undefined;
+    value?: string | undefined;
+};
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import("svelte").ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U, M>["props"]>>): import("svelte").SvelteComponent<ReturnType<__sveltets_Render<T, U, M>["props"]>, ReturnType<__sveltets_Render<T, U, M>["events"]>, ReturnType<__sveltets_Render<T, U, M>["slots"]>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U, M>["bindings"]>;
+    } & ReturnType<__sveltets_Render<T, U, M>["exports"]>;
+    <T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, U, M>["props"]> & {}): ReturnType<__sveltets_Render<T, U, M>["exports"]>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>["bindings"]>;
+}
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    props(): ReturnType<typeof $$render<T, U, M>>["props"];
+    events(): ReturnType<typeof $$render<T, U, M>>["events"];
+    slots(): ReturnType<typeof $$render<T, U, M>>["slots"];
+    bindings(): "value";
+    exports(): {};
+}
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
     props: FieldWrapperProps<T, U, M> & {
-        value?: string;
         class?: string;
-        placeholder?: string;
         defaultHeight?: number;
-        showLock?: boolean;
-        defaultLocked?: boolean;
         icon?: Component;
+        placeholder?: string;
+        resize?: boolean;
+        value?: string;
     };
     exports: {};
     bindings: "value";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>, M> {
-    props(): ReturnType<typeof $$render<T, U, M>>['props'];
-    events(): ReturnType<typeof $$render<T, U, M>>['events'];
-    slots(): ReturnType<typeof $$render<T, U, M>>['slots'];
-    bindings(): "value";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U, M>['props']>, ReturnType<__sveltets_Render<T, U, M>['events']>, ReturnType<__sveltets_Render<T, U, M>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, U, M>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, U, M>['exports']>;
-    <T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, U, M>['props']> & {}): ReturnType<__sveltets_Render<T, U, M>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
-}
-declare const MessageField: $$IsomorphicComponent;
-type MessageField<T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof MessageField<T, U, M>>;
-export default MessageField;
+import { FieldWrapperProps } from '../FieldWrapper.svelte';
+import { Component } from 'svelte';

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

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

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

@@ -1,33 +1,42 @@
-import type { Component } from 'svelte';
-import type { FormPath } from 'sveltekit-superforms';
-import { type FieldWrapperProps } from '../FieldWrapper.svelte';
+export default NumberField;
+type NumberField<V, T extends Record<string, unknown>, U extends FormPath<T>, M> = SvelteComponent<Props, {}, {}> & {
+    $$bindings?: "value" | undefined;
+} & {};
+declare const NumberField: $$IsomorphicComponent;
+import { FormPath } from 'sveltekit-superforms';
+type Props = FieldWrapperProps<T, U, M> & {
+    class?: string | undefined;
+    icon?: Component<any, any, string> | undefined;
+    placeholder?: string | undefined;
+    step?: string | undefined;
+    value?: V | undefined;
+};
+interface $$IsomorphicComponent {
+    new <V, T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import("svelte").ComponentConstructorOptions<ReturnType<__sveltets_Render<V, T, U, M>["props"]>>): import("svelte").SvelteComponent<ReturnType<__sveltets_Render<V, T, U, M>["props"]>, ReturnType<__sveltets_Render<V, T, U, M>["events"]>, ReturnType<__sveltets_Render<V, T, U, M>["slots"]>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, T, U, M>["bindings"]>;
+    } & ReturnType<__sveltets_Render<V, T, U, M>["exports"]>;
+    <V, T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<V, T, U, M>["props"]> & {}): ReturnType<__sveltets_Render<V, T, U, M>["exports"]>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any>["bindings"]>;
+}
+declare class __sveltets_Render<V, T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    props(): ReturnType<typeof $$render<V, T, U, M>>["props"];
+    events(): ReturnType<typeof $$render<V, T, U, M>>["events"];
+    slots(): ReturnType<typeof $$render<V, T, U, M>>["slots"];
+    bindings(): "value";
+    exports(): {};
+}
 declare function $$render<V, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
     props: FieldWrapperProps<T, U, M> & {
-        value?: V;
         class?: string;
-        step?: HTMLInputElement["step"];
-        placeholder?: string;
         icon?: Component;
+        placeholder?: string;
+        step?: HTMLInputElement["step"];
+        value?: V;
     };
     exports: {};
     bindings: "value";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<V, T extends Record<string, unknown>, U extends FormPath<T>, M> {
-    props(): ReturnType<typeof $$render<V, T, U, M>>['props'];
-    events(): ReturnType<typeof $$render<V, T, U, M>>['events'];
-    slots(): ReturnType<typeof $$render<V, T, U, M>>['slots'];
-    bindings(): "value";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <V, T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, T, U, M>['props']>, ReturnType<__sveltets_Render<V, T, U, M>['events']>, ReturnType<__sveltets_Render<V, T, U, M>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<V, T, U, M>['bindings']>;
-    } & ReturnType<__sveltets_Render<V, T, U, M>['exports']>;
-    <V, T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<V, T, U, M>['props']> & {}): ReturnType<__sveltets_Render<V, T, U, M>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any>['bindings']>;
-}
-declare const NumberField: $$IsomorphicComponent;
-type NumberField<V, T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof NumberField<V, T, U, M>>;
-export default NumberField;
+import { FieldWrapperProps } from '../FieldWrapper.svelte';
+import { Component } from 'svelte';

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

@@ -1,46 +1,52 @@
-<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 { Eye, EyeOff } from '@lucide/svelte';
-	import type { Component } from 'svelte';
-	import type { FormPath } from 'sveltekit-superforms';
-	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
+<script generics="T extends Record<string, unknown>, U extends FormPath<T>, M" lang="ts">
+  import type { Component } from 'svelte';
+  import type { FormPath } from 'sveltekit-superforms';
 
-	interface Props extends FieldWrapperProps<T, U, M> {
-		value?: string;
-		class?: string;
-		icon?: Component;
-	}
-	let { value = $bindable(), class: className, icon, ...fieldProps }: Props = $props();
+  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';
 
-	let show = $state(false);
-	let inputType = $derived(show ? 'text' : 'password');
+  import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
+
+  interface Props extends FieldWrapperProps<T, U, M> {
+    class?: string;
+    icon?: Component;
+    value?: string;
+  }
+  let { class: className, icon, value = $bindable(), ...fieldProps }: Props = $props();
+
+  let show = $state(false);
+  let inputType = $derived(show ? 'text' : 'password');
 </script>
 
 <FieldWrapper {...fieldProps}>
-	{#snippet formElem(props)}
-		<div class="flex w-full items-stretch gap-2">
-			<!-- 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>
+  {#snippet formElem(props)}
+    <div class="flex h-fit w-full items-center gap-2">
+      <!-- Input itself with optional left icon -->
+      <IconInputWrapper flex {icon}>
+        {#snippet children({ class: iconClass })}
+          <Input class={cn(iconClass, className)} type={inputType} bind:value {...props} />
+        {/snippet}
+      </IconInputWrapper>
 
-			<!-- Show/hide button outside input -->
-			<button
-				type="button"
-				class="flex shrink-0 cursor-pointer items-center justify-center rounded-lg border border-gray-300 px-4 text-gray-500 transition-all hover:bg-gray-50 focus:border-transparent focus:ring-2 focus:ring-primary focus:outline-none"
-				onclick={() => (show = !show)}
-				aria-label={show ? 'Hide password' : 'Show password'}
-			>
-				{#if show}
-					<EyeOff class="size-5" />
-				{:else}
-					<Eye class="size-5" />
-				{/if}
-			</button>
-		</div>
-	{/snippet}
+      <!-- Show/hide button outside input -->
+      <button
+        class={cn(
+          'aspect-square h-full items-center justify-center p-3',
+          'rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50 focus:border-transparent',
+          'cursor-pointer transition-all focus:ring-2 focus:ring-primary focus:outline-none'
+        )}
+        aria-label={show ? 'Hide password' : 'Show password'}
+        onclick={() => (show = !show)}
+        type="button"
+      >
+        {#if show}
+          <EyeOff class="size-6" />
+        {:else}
+          <Eye class="size-6" />
+        {/if}
+      </button>
+    </div>
+  {/snippet}
 </FieldWrapper>

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

@@ -1,31 +1,38 @@
-import type { Component } from 'svelte';
-import type { FormPath } from 'sveltekit-superforms';
-import { type FieldWrapperProps } from '../FieldWrapper.svelte';
+export default PasswordField;
+type PasswordField<T extends Record<string, unknown>, U extends FormPath<T>, M> = SvelteComponent<Props, {}, {}> & {
+    $$bindings?: "value" | undefined;
+} & {};
+declare const PasswordField: $$IsomorphicComponent;
+import { FormPath } from 'sveltekit-superforms';
+type Props = FieldWrapperProps<T, U, M> & {
+    class?: string | undefined;
+    icon?: Component<any, any, string> | undefined;
+    value?: string | undefined;
+};
+interface $$IsomorphicComponent {
+    new <T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import("svelte").ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U, M>["props"]>>): import("svelte").SvelteComponent<ReturnType<__sveltets_Render<T, U, M>["props"]>, ReturnType<__sveltets_Render<T, U, M>["events"]>, ReturnType<__sveltets_Render<T, U, M>["slots"]>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, U, M>["bindings"]>;
+    } & ReturnType<__sveltets_Render<T, U, M>["exports"]>;
+    <T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, U, M>["props"]> & {}): ReturnType<__sveltets_Render<T, U, M>["exports"]>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>["bindings"]>;
+}
+declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    props(): ReturnType<typeof $$render<T, U, M>>["props"];
+    events(): ReturnType<typeof $$render<T, U, M>>["events"];
+    slots(): ReturnType<typeof $$render<T, U, M>>["slots"];
+    bindings(): "value";
+    exports(): {};
+}
 declare function $$render<T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
     props: FieldWrapperProps<T, U, M> & {
-        value?: string;
         class?: string;
         icon?: Component;
+        value?: string;
     };
     exports: {};
     bindings: "value";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends Record<string, unknown>, U extends FormPath<T>, M> {
-    props(): ReturnType<typeof $$render<T, U, M>>['props'];
-    events(): ReturnType<typeof $$render<T, U, M>>['events'];
-    slots(): ReturnType<typeof $$render<T, U, M>>['slots'];
-    bindings(): "value";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, U, M>['props']>, ReturnType<__sveltets_Render<T, U, M>['events']>, ReturnType<__sveltets_Render<T, U, M>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, U, M>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, U, M>['exports']>;
-    <T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<T, U, M>['props']> & {}): ReturnType<__sveltets_Render<T, U, M>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
-}
-declare const PasswordField: $$IsomorphicComponent;
-type PasswordField<T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof PasswordField<T, U, M>>;
-export default PasswordField;
+import { FieldWrapperProps } from '../FieldWrapper.svelte';
+import { Component } from 'svelte';

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

@@ -1,89 +1,94 @@
 <script
-	lang="ts"
-	generics="I,V, K extends string | number,T extends Record<string, unknown>, U extends FormPath<T>, M"
+  generics="I,V, K extends number | string,T extends Record<string, unknown>, U extends FormPath<T>, M"
+  lang="ts"
 >
-	import IconInputWrapper from '../IconInputWrapper.svelte';
-	import {
-		Select,
-		SelectContent,
-		SelectGroup,
-		SelectItem,
-		SelectLabel,
-		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';
+  import type { Component } from 'svelte';
+  import type { FormPath } from 'sveltekit-superforms';
 
-	interface Props extends FieldWrapperProps<T, U, M> {
-		value?: V;
-		items: readonly I[];
-		getKey: (item: I) => K;
-		getLabel: (item: I) => string;
-		getValue: (item: I) => V;
-		onchange?: (value: V | undefined) => void;
-		class?: string;
-		placeholder: string;
-		icon?: Component;
-	}
-	let {
-		value = $bindable(undefined),
-		class: className,
-		getKey: _getKey,
-		getLabel,
-		getValue,
-		onchange,
-		placeholder,
-		items,
-		icon,
-		...fieldProps
-	}: Props = $props();
-	let valueToItem: Map<V, I> = new Map(items.map((item) => [getValue(item), item] as const));
-	let keyToItem: Map<string, I> = new Map(items.map((item) => [getKey(item), item] as const));
+  import IconInputWrapper from '../IconInputWrapper.svelte';
+  import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectTrigger
+  } from '../../../shadcn/components/ui/select/index.js';
+  import { cn } from '../../../shadcn/utils.js';
 
-	// Enforce string key function
-	function getKey(item: I) {
-		const key = _getKey(item);
-		return key.toString();
-	}
+  import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
-	function getKeyFromValue(): string {
-		if (value === undefined) return '';
-		const item = valueToItem.get(value);
-		if (item === undefined) return '';
-		return getKey(item);
-	}
+  interface Props extends FieldWrapperProps<T, U, M> {
+    class?: string;
+    getKey: (item: I) => K;
+    getLabel: (item: I) => string;
+    getValue: (item: I) => V;
+    icon?: Component;
+    items: readonly I[];
+    onchange?: (value: undefined | V) => void;
+    placeholder: string;
+    value?: V;
+  }
+  let {
+    class: className,
+    getKey: _getKey,
+    getLabel,
+    getValue,
+    icon,
+    items,
+    onchange,
+    placeholder,
+    value = $bindable(undefined),
+    ...fieldProps
+  }: Props = $props();
+  // Items property shouldn't be updated, ignore warning
+  // svelte-ignore state_referenced_locally
+  let valueToItem: Map<V, I> = new Map(items.map((item) => [getValue(item), item] as const));
+  // svelte-ignore state_referenced_locally
+  let keyToItem: Map<string, I> = new Map(items.map((item) => [getKey(item), item] as const));
 
-	function setValueFromKey(key: string) {
-		const item = keyToItem.get(key);
-		if (item === undefined) return;
-		const newValue = getValue(item);
-		value = newValue;
-		onchange?.(newValue);
-	}
+  // Enforce string key function
+  function getKey(item: I) {
+    const key = _getKey(item);
+    return key.toString();
+  }
+
+  function getKeyFromValue(): string {
+    if (value === undefined) return '';
+    const item = valueToItem.get(value);
+    if (item === undefined) return '';
+    return getKey(item);
+  }
+
+  function setValueFromKey(key: string) {
+    const item = keyToItem.get(key);
+    if (item === undefined) return;
+    const newValue = getValue(item);
+    value = newValue;
+    onchange?.(newValue);
+  }
 </script>
 
 <FieldWrapper {...fieldProps}>
-	{#snippet formElem(props)}
-		<Select type="single" {...props} bind:value={getKeyFromValue, setValueFromKey}>
-			<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>
-					{#each items as item (getKey(item))}
-						<SelectItem class="cursor-pointer" value={getKey(item)} label={getLabel(item)} />
-					{/each}
-				</SelectGroup>
-			</SelectContent>
-		</Select>
-	{/snippet}
+  {#snippet formElem(props)}
+    <Select type="single" {...props} bind:value={getKeyFromValue, setValueFromKey}>
+      <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>
+          {#each items as item (getKey(item))}
+            <SelectItem class="cursor-pointer" label={getLabel(item)} value={getKey(item)} />
+          {/each}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  {/snippet}
 </FieldWrapper>

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

@@ -1,37 +1,50 @@
-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>(): {
+export default SelectField;
+type SelectField<I, V, K extends number | string, T extends Record<string, unknown>, U extends FormPath<T>, M> = SvelteComponent<Props, {}, {}> & {
+    $$bindings?: "value" | undefined;
+} & {};
+declare const SelectField: $$IsomorphicComponent;
+import { FormPath } from 'sveltekit-superforms';
+type Props = FieldWrapperProps<T, U, M> & {
+    class?: string | undefined;
+    getKey: (item: I) => K;
+    getLabel: (item: I) => string;
+    getValue: (item: I) => V;
+    icon?: Component<any, any, string> | undefined;
+    items: readonly I[];
+    onchange?: ((value: V | undefined) => void) | undefined;
+    placeholder: string;
+    value?: V | undefined;
+};
+interface $$IsomorphicComponent {
+    new <I, V, K extends number | string, T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import("svelte").ComponentConstructorOptions<ReturnType<__sveltets_Render<I, V, K, T, U, M>["props"]>>): import("svelte").SvelteComponent<ReturnType<__sveltets_Render<I, V, K, T, U, M>["props"]>, ReturnType<__sveltets_Render<I, V, K, T, U, M>["events"]>, ReturnType<__sveltets_Render<I, V, K, T, U, M>["slots"]>> & {
+        $$bindings?: ReturnType<__sveltets_Render<I, V, K, T, U, M>["bindings"]>;
+    } & ReturnType<__sveltets_Render<I, V, K, T, U, M>["exports"]>;
+    <I, V, K extends number | string, T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<I, V, K, T, U, M>["props"]> & {}): ReturnType<__sveltets_Render<I, V, K, T, U, M>["exports"]>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any, any, any>["bindings"]>;
+}
+declare class __sveltets_Render<I, V, K extends number | string, T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    props(): ReturnType<typeof $$render<I, V, K, T, U, M>>["props"];
+    events(): ReturnType<typeof $$render<I, V, K, T, U, M>>["events"];
+    slots(): ReturnType<typeof $$render<I, V, K, T, U, M>>["slots"];
+    bindings(): "value";
+    exports(): {};
+}
+declare function $$render<I, V, K extends number | string, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
     props: FieldWrapperProps<T, U, M> & {
-        value?: V;
-        items: readonly I[];
+        class?: string;
         getKey: (item: I) => K;
         getLabel: (item: I) => string;
         getValue: (item: I) => V;
-        onchange?: (value: V | undefined) => void;
-        class?: string;
-        placeholder: string;
         icon?: Component;
+        items: readonly I[];
+        onchange?: (value: undefined | V) => void;
+        placeholder: string;
+        value?: V;
     };
     exports: {};
     bindings: "value";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<I, V, K extends string | number, T extends Record<string, unknown>, U extends FormPath<T>, M> {
-    props(): ReturnType<typeof $$render<I, V, K, T, U, M>>['props'];
-    events(): ReturnType<typeof $$render<I, V, K, T, U, M>>['events'];
-    slots(): ReturnType<typeof $$render<I, V, K, T, U, M>>['slots'];
-    bindings(): "value";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <I, V, K extends string | number, T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<I, V, K, T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<I, V, K, T, U, M>['props']>, ReturnType<__sveltets_Render<I, V, K, T, U, M>['events']>, ReturnType<__sveltets_Render<I, V, K, T, U, M>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<I, V, K, T, U, M>['bindings']>;
-    } & ReturnType<__sveltets_Render<I, V, K, T, U, M>['exports']>;
-    <I, V, K extends string | number, T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<I, V, K, T, U, M>['props']> & {}): ReturnType<__sveltets_Render<I, V, K, T, U, M>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any, any, any>['bindings']>;
-}
-declare const SelectField: $$IsomorphicComponent;
-type SelectField<I, V, K extends string | number, T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof SelectField<I, V, K, T, U, M>>;
-export default SelectField;
+import { FieldWrapperProps } from '../FieldWrapper.svelte';
+import { Component } from 'svelte';