@webamoki/web-svelte 0.5.19 → 0.5.21

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

@@ -1,17 +1,18 @@
 <script
 	lang="ts"
-	generics="V, K extends string | number | symbol,T extends Record<string, unknown>, U extends FormPath<T>, M"
+	generics="V,I, K extends string | number | symbol,T extends Record<string, unknown>, U extends FormPath<T>, M"
 >
+	import Choice, { type ChoiceProps } from '../../ui/choice/Choice.svelte';
 	import type { FormPath } from 'sveltekit-superforms';
 	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
-	import Choice, { type ChoiceProps } from '../../ui/choice/Choice.svelte';
 
-	type Props = FieldWrapperProps<T, U, M> & ChoiceProps<V, K>;
+	type Props = FieldWrapperProps<T, U, M> & ChoiceProps<V, I, K>;
 
 	let {
 		items,
 		getKey,
 		getLabel,
+		getValue,
 		onChange,
 		vertical,
 		value = $bindable(undefined),
@@ -33,6 +34,7 @@
 				{items}
 				{getKey}
 				{getLabel}
+				{getValue}
 				{onChange}
 				{buttonContent}
 				{vertical}

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

@@ -1,27 +1,27 @@
+import { type ChoiceProps } from '../../ui/choice/Choice.svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
-import { type ChoiceProps } from '../../ui/choice/Choice.svelte';
-declare function $$render<V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
-    props: FieldWrapperProps<T, U, M> & ChoiceProps<V, K>;
+declare function $$render<V, I, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
+    props: FieldWrapperProps<T, U, M> & ChoiceProps<V, I, K>;
     exports: {};
     bindings: "value";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M> {
-    props(): ReturnType<typeof $$render<V, K, T, U, M>>['props'];
-    events(): ReturnType<typeof $$render<V, K, T, U, M>>['events'];
-    slots(): ReturnType<typeof $$render<V, K, T, U, M>>['slots'];
+declare class __sveltets_Render<V, I, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    props(): ReturnType<typeof $$render<V, I, K, T, U, M>>['props'];
+    events(): ReturnType<typeof $$render<V, I, K, T, U, M>>['events'];
+    slots(): ReturnType<typeof $$render<V, I, K, T, U, M>>['slots'];
     bindings(): "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, K, T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, K, T, U, M>['props']>, ReturnType<__sveltets_Render<V, K, T, U, M>['events']>, ReturnType<__sveltets_Render<V, K, T, U, M>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<V, K, T, U, M>['bindings']>;
-    } & ReturnType<__sveltets_Render<V, K, T, U, M>['exports']>;
-    <V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<V, K, T, U, M>['props']> & {}): ReturnType<__sveltets_Render<V, K, T, U, M>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any, any>['bindings']>;
+    new <V, I, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, I, K, T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, I, K, T, U, M>['props']>, ReturnType<__sveltets_Render<V, I, K, T, U, M>['events']>, ReturnType<__sveltets_Render<V, I, K, T, U, M>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, I, K, T, U, M>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, I, K, T, U, M>['exports']>;
+    <V, I, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<V, I, K, T, U, M>['props']> & {}): ReturnType<__sveltets_Render<V, I, K, T, U, M>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any, any, any>['bindings']>;
 }
 declare const ChoiceField: $$IsomorphicComponent;
-type ChoiceField<V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof ChoiceField<V, K, T, U, M>>;
+type ChoiceField<V, I, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof ChoiceField<V, I, K, T, U, M>>;
 export default ChoiceField;

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

@@ -1,16 +1,17 @@
 <script
 	lang="ts"
-	generics="V, K extends string | number | symbol,T extends Record<string, unknown>, U extends FormPath<T>, M"
+	generics="V,I, K extends string | number | symbol,T extends Record<string, unknown>, U extends FormPath<T>, M"
 >
 	import ChoiceMulti, { type ChoiceMultiProps } from '../../ui/choice/ChoiceMulti.svelte';
 	import type { FormPath } from 'sveltekit-superforms';
 	import FieldWrapper, { type FieldWrapperProps } from '../FieldWrapper.svelte';
 
-	type Props = FieldWrapperProps<T, U, M> & ChoiceMultiProps<V, K>;
+	type Props = FieldWrapperProps<T, U, M> & ChoiceMultiProps<V, I, K>;
 	let {
 		items,
 		getKey,
 		getLabel,
+		getValue,
 		onAdd,
 		onRemove,
 		vertical,
@@ -33,6 +34,7 @@
 				{items}
 				{getKey}
 				{getLabel}
+				{getValue}
 				{onAdd}
 				{onRemove}
 				{buttonContent}

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

@@ -1,27 +1,27 @@
 import { type ChoiceMultiProps } from '../../ui/choice/ChoiceMulti.svelte';
 import type { FormPath } from 'sveltekit-superforms';
 import { type FieldWrapperProps } from '../FieldWrapper.svelte';
-declare function $$render<V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
-    props: FieldWrapperProps<T, U, M> & ChoiceMultiProps<V, K>;
+declare function $$render<V, I, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(): {
+    props: FieldWrapperProps<T, U, M> & ChoiceMultiProps<V, I, K>;
     exports: {};
     bindings: "value";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M> {
-    props(): ReturnType<typeof $$render<V, K, T, U, M>>['props'];
-    events(): ReturnType<typeof $$render<V, K, T, U, M>>['events'];
-    slots(): ReturnType<typeof $$render<V, K, T, U, M>>['slots'];
+declare class __sveltets_Render<V, I, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M> {
+    props(): ReturnType<typeof $$render<V, I, K, T, U, M>>['props'];
+    events(): ReturnType<typeof $$render<V, I, K, T, U, M>>['events'];
+    slots(): ReturnType<typeof $$render<V, I, K, T, U, M>>['slots'];
     bindings(): "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, K, T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, K, T, U, M>['props']>, ReturnType<__sveltets_Render<V, K, T, U, M>['events']>, ReturnType<__sveltets_Render<V, K, T, U, M>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<V, K, T, U, M>['bindings']>;
-    } & ReturnType<__sveltets_Render<V, K, T, U, M>['exports']>;
-    <V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<V, K, T, U, M>['props']> & {}): ReturnType<__sveltets_Render<V, K, T, U, M>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any, any>['bindings']>;
+    new <V, I, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, I, K, T, U, M>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, I, K, T, U, M>['props']>, ReturnType<__sveltets_Render<V, I, K, T, U, M>['events']>, ReturnType<__sveltets_Render<V, I, K, T, U, M>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, I, K, T, U, M>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, I, K, T, U, M>['exports']>;
+    <V, I, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M>(internal: unknown, props: ReturnType<__sveltets_Render<V, I, K, T, U, M>['props']> & {}): ReturnType<__sveltets_Render<V, I, K, T, U, M>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any, any, any, any>['bindings']>;
 }
 declare const ChoiceMultiField: $$IsomorphicComponent;
-type ChoiceMultiField<V, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof ChoiceMultiField<V, K, T, U, M>>;
+type ChoiceMultiField<V, I, K extends string | number | symbol, T extends Record<string, unknown>, U extends FormPath<T>, M> = InstanceType<typeof ChoiceMultiField<V, I, K, T, U, M>>;
 export default ChoiceMultiField;

package/dist/components/ui/choice/Choice.svelte

@@ -1,27 +1,30 @@
 <script lang="ts" module>
-	export interface ChoiceProps<V, K extends string | number | symbol>
-		extends ChoiceInternalProps<V, K> {
+	export interface ChoiceProps<V, I, K extends string | number | symbol>
+		extends ChoiceInternalProps<V, I, K> {
 		value?: V;
 		onChange?: (value: V) => void;
 	}
 </script>
 
-<script lang="ts" generics="V, K extends string | number | symbol">
-	import ChoiceInternal, {
-		type ChoiceInternalProps as ChoiceInternalProps
-	} from './ChoiceInternal.svelte';
+<script lang="ts" generics="V, I,  K extends string | number | symbol">
+	import ChoiceInternal, { type ChoiceInternalProps } from './ChoiceInternal.svelte';
 
-	let { value = $bindable(undefined), onChange, ...props }: ChoiceProps<V, K> = $props();
+	let {
+		value = $bindable(undefined),
+		getValue,
+		onChange,
+		...props
+	}: ChoiceProps<V, I, K> = $props();
 
-	function handleItemClick(item: V) {
-		value = item;
+	function handleItemClick(item: I) {
+		value = getValue(item);
 		// Trigger event
-		onChange?.(item);
+		onChange?.(value);
 	}
 
-	function isActive(item: V) {
-		return value === item;
+	function isActive(item: I) {
+		return value === getValue(item);
 	}
 </script>
 
-<ChoiceInternal {handleItemClick} {isActive} {...props} />
+<ChoiceInternal {handleItemClick} {isActive} {getValue} {...props} />

package/dist/components/ui/choice/Choice.svelte.d.ts

@@ -1,29 +1,29 @@
-export interface ChoiceProps<V, K extends string | number | symbol> extends ChoiceInternalProps<V, K> {
+export interface ChoiceProps<V, I, K extends string | number | symbol> extends ChoiceInternalProps<V, I, K> {
     value?: V;
     onChange?: (value: V) => void;
 }
-import { type ChoiceInternalProps as ChoiceInternalProps } from './ChoiceInternal.svelte';
-declare function $$render<V, K extends string | number | symbol>(): {
-    props: ChoiceProps<V, K>;
+import { type ChoiceInternalProps } from './ChoiceInternal.svelte';
+declare function $$render<V, I, K extends string | number | symbol>(): {
+    props: ChoiceProps<V, I, K>;
     exports: {};
     bindings: "value";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<V, K extends string | number | symbol> {
-    props(): ReturnType<typeof $$render<V, K>>['props'];
-    events(): ReturnType<typeof $$render<V, K>>['events'];
-    slots(): ReturnType<typeof $$render<V, K>>['slots'];
+declare class __sveltets_Render<V, I, K extends string | number | symbol> {
+    props(): ReturnType<typeof $$render<V, I, K>>['props'];
+    events(): ReturnType<typeof $$render<V, I, K>>['events'];
+    slots(): ReturnType<typeof $$render<V, I, K>>['slots'];
     bindings(): "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <V, K extends string | number | symbol>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, K>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, K>['props']>, ReturnType<__sveltets_Render<V, K>['events']>, ReturnType<__sveltets_Render<V, K>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<V, K>['bindings']>;
-    } & ReturnType<__sveltets_Render<V, K>['exports']>;
-    <V, K extends string | number | symbol>(internal: unknown, props: ReturnType<__sveltets_Render<V, K>['props']> & {}): ReturnType<__sveltets_Render<V, K>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <V, I, K extends string | number | symbol>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, I, K>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, I, K>['props']>, ReturnType<__sveltets_Render<V, I, K>['events']>, ReturnType<__sveltets_Render<V, I, K>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, I, K>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, I, K>['exports']>;
+    <V, I, K extends string | number | symbol>(internal: unknown, props: ReturnType<__sveltets_Render<V, I, K>['props']> & {}): ReturnType<__sveltets_Render<V, I, K>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
 declare const Choice: $$IsomorphicComponent;
-type Choice<V, K extends string | number | symbol> = InstanceType<typeof Choice<V, K>>;
+type Choice<V, I, K extends string | number | symbol> = InstanceType<typeof Choice<V, I, K>>;
 export default Choice;

package/dist/components/ui/choice/ChoiceInternal.svelte

@@ -1,22 +1,23 @@
 <script lang="ts" module>
-	export interface ChoiceInternalProps<T, K extends string | number | symbol>
+	export interface ChoiceInternalProps<V, I, K extends string | number | symbol>
 		extends Partial<FormAttrs> {
-		items: readonly T[];
-		getKey: (item: T) => K;
-		getLabel: (item: T) => string;
+		items: readonly I[];
+		getKey: (item: I) => K;
+		getLabel: (item: I) => string;
+		getValue: (item: I) => V;
 		vertical?: boolean;
 		buttonContent?: Snippet<[label: string]>;
 	}
 </script>
 
-<script lang="ts" generics="T, K extends string | number | symbol">
+<script lang="ts" generics="V, I, K extends string | number | symbol">
 	import type { FormAttrs } from '../../form/FieldWrapper.svelte';
 	import { cn } from '../../../shadcn/utils.js';
 	import type { Snippet } from 'svelte';
 
-	interface Props extends ChoiceInternalProps<T, K> {
-		handleItemClick: (item: T) => void;
-		isActive: (item: T) => boolean;
+	interface Props extends ChoiceInternalProps<V, I, K> {
+		handleItemClick: (item: I) => void;
+		isActive: (item: I) => boolean;
 	}
 
 	let {
@@ -46,20 +47,30 @@
 	)}
 >
 	{#each items as item (getKey(item))}
-		<button
-			type="button"
-			onclick={() => {
-				if (disabled || readonly) return;
-				handleItemClick(item);
-			}}
-			data-state={isActive(item) ? 'active' : 'inactive'}
-			class="h-8 cursor-pointer rounded-lg bg-transparent p-2 text-muted-foreground hover:text-foreground hover:outline-2 focus-visible:outline-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
-		>
-			{#if buttonContent}
+		{#if buttonContent}
+			<button
+				type="button"
+				onclick={() => {
+					if (disabled || readonly) return;
+					handleItemClick(item);
+				}}
+				data-state={isActive(item) ? 'active' : 'inactive'}
+				class="cursor-pointer rounded-lg bg-transparent text-muted-foreground hover:text-foreground hover:outline-2 focus-visible:outline-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+			>
 				{@render buttonContent(getLabel(item))}
-			{:else}
+			</button>
+		{:else}
+			<button
+				type="button"
+				onclick={() => {
+					if (disabled || readonly) return;
+					handleItemClick(item);
+				}}
+				data-state={isActive(item) ? 'active' : 'inactive'}
+				class="h-8 cursor-pointer rounded-lg bg-transparent p-2 text-muted-foreground hover:text-foreground hover:outline-2 focus-visible:outline-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
+			>
 				{getLabel(item)}
-			{/if}
-		</button>
+			</button>
+		{/if}
 	{/each}
 </div>

package/dist/components/ui/choice/ChoiceInternal.svelte.d.ts

@@ -1,36 +1,37 @@
-export interface ChoiceInternalProps<T, K extends string | number | symbol> extends Partial<FormAttrs> {
-    items: readonly T[];
-    getKey: (item: T) => K;
-    getLabel: (item: T) => string;
+export interface ChoiceInternalProps<V, I, K extends string | number | symbol> extends Partial<FormAttrs> {
+    items: readonly I[];
+    getKey: (item: I) => K;
+    getLabel: (item: I) => string;
+    getValue: (item: I) => V;
     vertical?: boolean;
     buttonContent?: Snippet<[label: string]>;
 }
 import type { FormAttrs } from '../../form/FieldWrapper.svelte';
 import type { Snippet } from 'svelte';
-declare function $$render<T, K extends string | number | symbol>(): {
-    props: ChoiceInternalProps<T, K> & {
-        handleItemClick: (item: T) => void;
-        isActive: (item: T) => boolean;
+declare function $$render<V, I, K extends string | number | symbol>(): {
+    props: ChoiceInternalProps<V, I, K> & {
+        handleItemClick: (item: I) => void;
+        isActive: (item: I) => boolean;
     };
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T, K extends string | number | symbol> {
-    props(): ReturnType<typeof $$render<T, K>>['props'];
-    events(): ReturnType<typeof $$render<T, K>>['events'];
-    slots(): ReturnType<typeof $$render<T, K>>['slots'];
+declare class __sveltets_Render<V, I, K extends string | number | symbol> {
+    props(): ReturnType<typeof $$render<V, I, K>>['props'];
+    events(): ReturnType<typeof $$render<V, I, K>>['events'];
+    slots(): ReturnType<typeof $$render<V, I, K>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T, K extends string | number | symbol>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, K>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, K>['props']>, ReturnType<__sveltets_Render<T, K>['events']>, ReturnType<__sveltets_Render<T, K>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, K>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, K>['exports']>;
-    <T, K extends string | number | symbol>(internal: unknown, props: ReturnType<__sveltets_Render<T, K>['props']> & {}): ReturnType<__sveltets_Render<T, K>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <V, I, K extends string | number | symbol>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, I, K>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, I, K>['props']>, ReturnType<__sveltets_Render<V, I, K>['events']>, ReturnType<__sveltets_Render<V, I, K>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, I, K>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, I, K>['exports']>;
+    <V, I, K extends string | number | symbol>(internal: unknown, props: ReturnType<__sveltets_Render<V, I, K>['props']> & {}): ReturnType<__sveltets_Render<V, I, K>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
 declare const ChoiceInternal: $$IsomorphicComponent;
-type ChoiceInternal<T, K extends string | number | symbol> = InstanceType<typeof ChoiceInternal<T, K>>;
+type ChoiceInternal<V, I, K extends string | number | symbol> = InstanceType<typeof ChoiceInternal<V, I, K>>;
 export default ChoiceInternal;

package/dist/components/ui/choice/ChoiceMulti.svelte

@@ -1,25 +1,28 @@
 <script lang="ts" module>
-	export interface ChoiceMultiProps<V, K extends string | number | symbol>
-		extends ChoiceInternalProps<V, K> {
+	export interface ChoiceMultiProps<V, I, K extends string | number | symbol>
+		extends ChoiceInternalProps<V, I, K> {
 		value: V[];
 		onAdd?: (value: V) => void;
 		onRemove?: (value: V) => void;
 	}
 </script>
 
-<script lang="ts" generics="V, K extends string | number | symbol">
-	import ChoiceInternal, { type ChoiceInternalProps } from './ChoiceInternal.svelte';
+<script lang="ts" generics="V,I, K extends string | number | symbol">
 	import * as sorted from 'sorted-array-functions';
+	import ChoiceInternal, { type ChoiceInternalProps } from './ChoiceInternal.svelte';
 
 	let {
 		value = $bindable([]),
 		onAdd,
 		onRemove,
+		getValue,
 		items,
 		...props
-	}: ChoiceMultiProps<V, K> = $props();
+	}: ChoiceMultiProps<V, I, K> = $props();
 
-	const valueIndex = new Map<V, number>(items.map((item, index) => [item, index] as const));
+	const valueIndex = new Map<V, number>(
+		items.map((item, index) => [getValue(item), index] as const)
+	);
 
 	function compareItems(a: V, b: V) {
 		const index1 = valueIndex.get(a);
@@ -30,21 +33,21 @@
 		return Math.sign(index1 - index2) as -1 | 0 | 1;
 	}
 
-	function contains(item: V) {
+	function contains(item: I) {
 		// Sorted contains function
-		return sorted.has(value, item, compareItems);
+		return sorted.has(value, getValue(item), compareItems);
 	}
 
-	function handleItemClick(item: V) {
+	function handleItemClick(item: I) {
 		// Toggle add or remove
 		if (!contains(item)) {
-			sorted.add(value, item, compareItems);
+			sorted.add(value, getValue(item), compareItems);
 			// Trigger event
-			onAdd?.(item);
+			onAdd?.(getValue(item));
 		} else {
-			sorted.remove(value, item, compareItems);
+			sorted.remove(value, getValue(item), compareItems);
 			// Trigger event
-			onRemove?.(item);
+			onRemove?.(getValue(item));
 		}
 
 		// Re-assign value to trigger state update
@@ -52,4 +55,4 @@
 	}
 </script>
 
-<ChoiceInternal {handleItemClick} isActive={contains} {items} {...props} />
+<ChoiceInternal {handleItemClick} {getValue} isActive={contains} {items} {...props} />

package/dist/components/ui/choice/ChoiceMulti.svelte.d.ts

@@ -1,30 +1,30 @@
-export interface ChoiceMultiProps<V, K extends string | number | symbol> extends ChoiceInternalProps<V, K> {
+export interface ChoiceMultiProps<V, I, K extends string | number | symbol> extends ChoiceInternalProps<V, I, K> {
     value: V[];
     onAdd?: (value: V) => void;
     onRemove?: (value: V) => void;
 }
 import { type ChoiceInternalProps } from './ChoiceInternal.svelte';
-declare function $$render<V, K extends string | number | symbol>(): {
-    props: ChoiceMultiProps<V, K>;
+declare function $$render<V, I, K extends string | number | symbol>(): {
+    props: ChoiceMultiProps<V, I, K>;
     exports: {};
     bindings: "value";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<V, K extends string | number | symbol> {
-    props(): ReturnType<typeof $$render<V, K>>['props'];
-    events(): ReturnType<typeof $$render<V, K>>['events'];
-    slots(): ReturnType<typeof $$render<V, K>>['slots'];
+declare class __sveltets_Render<V, I, K extends string | number | symbol> {
+    props(): ReturnType<typeof $$render<V, I, K>>['props'];
+    events(): ReturnType<typeof $$render<V, I, K>>['events'];
+    slots(): ReturnType<typeof $$render<V, I, K>>['slots'];
     bindings(): "value";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <V, K extends string | number | symbol>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, K>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, K>['props']>, ReturnType<__sveltets_Render<V, K>['events']>, ReturnType<__sveltets_Render<V, K>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<V, K>['bindings']>;
-    } & ReturnType<__sveltets_Render<V, K>['exports']>;
-    <V, K extends string | number | symbol>(internal: unknown, props: ReturnType<__sveltets_Render<V, K>['props']> & {}): ReturnType<__sveltets_Render<V, K>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <V, I, K extends string | number | symbol>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<V, I, K>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<V, I, K>['props']>, ReturnType<__sveltets_Render<V, I, K>['events']>, ReturnType<__sveltets_Render<V, I, K>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<V, I, K>['bindings']>;
+    } & ReturnType<__sveltets_Render<V, I, K>['exports']>;
+    <V, I, K extends string | number | symbol>(internal: unknown, props: ReturnType<__sveltets_Render<V, I, K>['props']> & {}): ReturnType<__sveltets_Render<V, I, K>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
 declare const ChoiceMulti: $$IsomorphicComponent;
-type ChoiceMulti<V, K extends string | number | symbol> = InstanceType<typeof ChoiceMulti<V, K>>;
+type ChoiceMulti<V, I, K extends string | number | symbol> = InstanceType<typeof ChoiceMulti<V, I, K>>;
 export default ChoiceMulti;

package/dist/components/ui/choice/WeekdayChoice.svelte

@@ -25,4 +25,4 @@
 	});
 </script>
 
-<Choice items={Days} bind:value {getLabel} getKey={identity} {...props} />
+<Choice items={Days} bind:value {getLabel} getValue={identity} getKey={identity} {...props} />

package/dist/components/ui/choice/WeekdayChoiceMulti.svelte

@@ -14,8 +14,8 @@
 </script>
 
 <script lang="ts">
-	import ChoiceMulti from './ChoiceMulti.svelte';
 	import { Days, formatDayLetter, formatDayShort, type Day } from '../../../utils/index.js';
+	import ChoiceMulti from './ChoiceMulti.svelte';
 
 	let { value = $bindable([]), ...props }: WeekdayChoiceMultiProps = $props();
 
@@ -26,4 +26,4 @@
 	});
 </script>
 
-<ChoiceMulti items={Days} bind:value {getLabel} getKey={identity} {...props} />
+<ChoiceMulti items={Days} bind:value {getLabel} getKey={identity} getValue={identity} {...props} />

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

@@ -2,4 +2,5 @@ import Choice from './choice/Choice.svelte';
 import ChoiceMulti from './choice/ChoiceMulti.svelte';
 import WeekdayChoice from './choice/WeekdayChoice.svelte';
 import WeekdayChoiceMulti from './choice/WeekdayChoiceMulti.svelte';
-export { Choice, ChoiceMulti, WeekdayChoice, WeekdayChoiceMulti };
+import SearchBar from './search/SearchBar.svelte';
+export { Choice, ChoiceMulti, SearchBar, WeekdayChoice, WeekdayChoiceMulti };

package/dist/components/ui/index.js

@@ -2,4 +2,5 @@ import Choice from './choice/Choice.svelte';
 import ChoiceMulti from './choice/ChoiceMulti.svelte';
 import WeekdayChoice from './choice/WeekdayChoice.svelte';
 import WeekdayChoiceMulti from './choice/WeekdayChoiceMulti.svelte';
-export { Choice, ChoiceMulti, WeekdayChoice, WeekdayChoiceMulti };
+import SearchBar from './search/SearchBar.svelte';
+export { Choice, ChoiceMulti, SearchBar, WeekdayChoice, WeekdayChoiceMulti };

package/dist/components/ui/search/SearchBar.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import Input from '../../../shadcn/components/ui/input/input.svelte';
+	import { cn } from '../../../shadcn/utils.js';
+	import { Search } from '@lucide/svelte';
+
+	interface Props {
+		defaultValue?: string;
+		placeholder?: string;
+		onChange: (value: string) => void;
+		class?: string;
+	}
+	let { defaultValue, placeholder, onChange, class: className }: Props = $props();
+</script>
+
+<div class="relative w-full max-w-sm">
+	<Search class="absolute top-2.5 left-2.5 h-4 w-4 text-muted-foreground" />
+	<Input
+		type="search"
+		{placeholder}
+		value={defaultValue}
+		oninput={(e: Event & { currentTarget: HTMLInputElement }) => onChange(e.currentTarget.value)}
+		class={cn('w-full pl-9', className)}
+	/>
+</div>

package/dist/components/ui/search/SearchBar.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    defaultValue?: string;
+    placeholder?: string;
+    onChange: (value: string) => void;
+    class?: string;
+}
+declare const SearchBar: import("svelte").Component<Props, {}, "">;
+type SearchBar = ReturnType<typeof SearchBar>;
+export default SearchBar;

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.5.19",
+  "version": "0.5.21",
   "license": "MIT",
   "files": [
     "dist",