@webamoki/web-svelte 0.7.4 → 1.0.0

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

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

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

@@ -1,16 +1,16 @@
-export interface ChoiceProps<V, I, K extends string | number | symbol> extends ChoiceInternalProps<V, I, K> {
-    value?: V;
+export interface ChoiceProps<V, I, K extends number | string | symbol> extends ChoiceInternalProps<V, I, K> {
     onChange?: (value: V) => void;
+    value?: V;
 }
 import { type ChoiceInternalProps } from './ChoiceInternal.svelte';
-declare function $$render<V, I, K extends string | number | symbol>(): {
+declare function $$render<V, I, K extends number | string | symbol>(): {
     props: ChoiceProps<V, I, K>;
     exports: {};
     bindings: "value";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<V, I, K extends string | number | symbol> {
+declare class __sveltets_Render<V, I, K extends number | string | 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'];
@@ -18,12 +18,12 @@ declare class __sveltets_Render<V, I, K extends string | number | symbol> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    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']>> & {
+    new <V, I, K extends number | string | 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']>;
+    <V, I, K extends number | string | 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, I, K extends string | number | symbol> = InstanceType<typeof Choice<V, I, K>>;
+type Choice<V, I, K extends number | string | symbol> = InstanceType<typeof Choice<V, I, K>>;
 export default Choice;

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

@@ -1,79 +1,83 @@
 <script lang="ts" module>
-	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, item: I]>;
-		class?: string;
-	}
+  export interface ChoiceInternalProps<
+    V,
+    I,
+    K extends number | string | symbol
+  > extends Partial<FormAttrs> {
+    buttonContent?: Snippet<[label: string, item: I]>;
+    class?: string;
+    getKey: (item: I) => K;
+    getLabel: (item: I) => string;
+    getValue: (item: I) => V;
+    items: readonly I[];
+    vertical?: boolean;
+  }
 </script>
 
-<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';
+<script generics="V, I, K extends number | string | symbol" lang="ts">
+  import type { FormAttrs } from '../../form/FieldWrapper.svelte';
+  import type { Snippet } from 'svelte';
 
-	interface Props extends ChoiceInternalProps<V, I, K> {
-		handleItemClick: (item: I) => void;
-		isActive: (item: I) => boolean;
-	}
+  import { cn } from '../../../shadcn/utils.js';
 
-	let {
-		items = [],
-		getKey,
-		getLabel,
-		vertical,
-		handleItemClick,
-		isActive,
-		disabled,
-		readonly,
-		'aria-invalid': ariaInvalid,
-		buttonContent,
-		class: className,
-		...control
-	}: Props = $props();
+  interface Props extends ChoiceInternalProps<V, I, K> {
+    handleItemClick: (item: I) => void;
+    isActive: (item: I) => boolean;
+  }
+
+  let {
+    'aria-invalid': ariaInvalid,
+    buttonContent,
+    class: className,
+    disabled,
+    getKey,
+    getLabel,
+    handleItemClick,
+    isActive,
+    items = [],
+    readonly,
+    vertical,
+    ...control
+  }: Props = $props();
 </script>
 
 <div
-	{...control}
-	class={cn(
-		'w-fit rounded-lg border border-border bg-muted p-1 text-sm leading-[0.01em] font-semibold shadow-inner',
-		'grid gap-1',
-		vertical ? 'grid-flow-row auto-rows-fr' : 'auto-cols-fr grid-flow-col',
-		disabled || readonly ? 'pointer-events-none' : 'cursor-pointer',
-		disabled && 'opacity-50',
-		ariaInvalid && 'border-destructive',
-		className
-	)}
+  {...control}
+  class={cn(
+    'w-fit rounded-lg border border-border bg-muted p-1 text-sm leading-[0.01em] font-semibold shadow-inner',
+    'grid gap-1',
+    vertical ? 'grid-flow-row auto-rows-fr' : 'auto-cols-fr grid-flow-col',
+    disabled || readonly ? 'pointer-events-none' : 'cursor-pointer',
+    disabled && 'opacity-50',
+    ariaInvalid && 'border-destructive',
+    className
+  )}
 >
-	{#each items as item (getKey(item))}
-		{#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), item)}
-			</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)}
-			</button>
-		{/if}
-	{/each}
+  {#each items as item (getKey(item))}
+    {#if buttonContent}
+      <button
+        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"
+        data-state={isActive(item) ? 'active' : 'inactive'}
+        onclick={() => {
+          if (disabled || readonly) return;
+          handleItemClick(item);
+        }}
+        type="button"
+      >
+        {@render buttonContent(getLabel(item), item)}
+      </button>
+    {:else}
+      <button
+        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"
+        data-state={isActive(item) ? 'active' : 'inactive'}
+        onclick={() => {
+          if (disabled || readonly) return;
+          handleItemClick(item);
+        }}
+        type="button"
+      >
+        {getLabel(item)}
+      </button>
+    {/if}
+  {/each}
 </div>

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

@@ -1,15 +1,15 @@
-export interface ChoiceInternalProps<V, I, K extends string | number | symbol> extends Partial<FormAttrs> {
-    items: readonly I[];
+export interface ChoiceInternalProps<V, I, K extends number | string | symbol> extends Partial<FormAttrs> {
+    buttonContent?: Snippet<[label: string, item: I]>;
+    class?: string;
     getKey: (item: I) => K;
     getLabel: (item: I) => string;
     getValue: (item: I) => V;
+    items: readonly I[];
     vertical?: boolean;
-    buttonContent?: Snippet<[label: string, item: I]>;
-    class?: string;
 }
 import type { FormAttrs } from '../../form/FieldWrapper.svelte';
 import type { Snippet } from 'svelte';
-declare function $$render<V, I, K extends string | number | symbol>(): {
+declare function $$render<V, I, K extends number | string | symbol>(): {
     props: ChoiceInternalProps<V, I, K> & {
         handleItemClick: (item: I) => void;
         isActive: (item: I) => boolean;
@@ -19,7 +19,7 @@ declare function $$render<V, I, K extends string | number | symbol>(): {
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<V, I, K extends string | number | symbol> {
+declare class __sveltets_Render<V, I, K extends number | string | 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'];
@@ -27,12 +27,12 @@ declare class __sveltets_Render<V, I, K extends string | number | symbol> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    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']>> & {
+    new <V, I, K extends number | string | 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']>;
+    <V, I, K extends number | string | 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<V, I, K extends string | number | symbol> = InstanceType<typeof ChoiceInternal<V, I, K>>;
+type ChoiceInternal<V, I, K extends number | string | symbol> = InstanceType<typeof ChoiceInternal<V, I, K>>;
 export default ChoiceInternal;

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

@@ -1,58 +1,64 @@
 <script lang="ts" module>
-	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;
-	}
+  export interface ChoiceMultiProps<
+    V,
+    I,
+    K extends number | string | symbol
+  > extends ChoiceInternalProps<V, I, K> {
+    onAdd?: (value: V) => void;
+    onRemove?: (value: V) => void;
+    value: V[];
+  }
 </script>
 
-<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, I, K> = $props();
-
-	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);
-		if (index1 === undefined) return 1;
-		const index2 = valueIndex.get(b);
-		if (index2 === undefined) return -1;
-
-		return Math.sign(index1 - index2) as -1 | 0 | 1;
-	}
-
-	function contains(item: I) {
-		// Sorted contains function
-		return sorted.has(value, getValue(item), compareItems);
-	}
-
-	function handleItemClick(item: I) {
-		// Toggle add or remove
-		if (!contains(item)) {
-			sorted.add(value, getValue(item), compareItems);
-			// Trigger event
-			onAdd?.(getValue(item));
-		} else {
-			sorted.remove(value, getValue(item), compareItems);
-			// Trigger event
-			onRemove?.(getValue(item));
-		}
-
-		// Re-assign value to trigger state update
-		value = value;
-	}
+<script generics="V,I, K extends number | string | symbol" lang="ts">
+  import * as sorted from 'sorted-array-functions';
+
+  import ChoiceInternal, { type ChoiceInternalProps } from './ChoiceInternal.svelte';
+
+  let {
+    getValue,
+    items,
+    onAdd,
+    onRemove,
+    value = $bindable([]),
+    ...props
+  }: ChoiceMultiProps<V, I, K> = $props();
+
+  // Items property shouldn't be updated, ignore warning
+  // svelte-ignore state_referenced_locally
+  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);
+    if (index1 === undefined) return 1;
+    const index2 = valueIndex.get(b);
+    if (index2 === undefined) return -1;
+
+    return Math.sign(index1 - index2) as -1 | 0 | 1;
+  }
+
+  function contains(item: I) {
+    // Sorted contains function
+    return sorted.has(value, getValue(item), compareItems);
+  }
+
+  function handleItemClick(item: I) {
+    // Toggle add or remove
+    if (!contains(item)) {
+      sorted.add(value, getValue(item), compareItems);
+      // Trigger event
+      onAdd?.(getValue(item));
+    } else {
+      sorted.remove(value, getValue(item), compareItems);
+      // Trigger event
+      onRemove?.(getValue(item));
+    }
+
+    // Re-assign value to trigger state update
+    value = value;
+  }
 </script>
 
-<ChoiceInternal {handleItemClick} {getValue} isActive={contains} {items} {...props} />
+<ChoiceInternal {getValue} {handleItemClick} isActive={contains} {items} {...props} />

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

@@ -1,17 +1,17 @@
-export interface ChoiceMultiProps<V, I, K extends string | number | symbol> extends ChoiceInternalProps<V, I, K> {
-    value: V[];
+export interface ChoiceMultiProps<V, I, K extends number | string | symbol> extends ChoiceInternalProps<V, I, K> {
     onAdd?: (value: V) => void;
     onRemove?: (value: V) => void;
+    value: V[];
 }
 import { type ChoiceInternalProps } from './ChoiceInternal.svelte';
-declare function $$render<V, I, K extends string | number | symbol>(): {
+declare function $$render<V, I, K extends number | string | symbol>(): {
     props: ChoiceMultiProps<V, I, K>;
     exports: {};
     bindings: "value";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<V, I, K extends string | number | symbol> {
+declare class __sveltets_Render<V, I, K extends number | string | 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'];
@@ -19,12 +19,12 @@ declare class __sveltets_Render<V, I, K extends string | number | symbol> {
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    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']>> & {
+    new <V, I, K extends number | string | 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']>;
+    <V, I, K extends number | string | 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, I, K extends string | number | symbol> = InstanceType<typeof ChoiceMulti<V, I, K>>;
+type ChoiceMulti<V, I, K extends number | string | symbol> = InstanceType<typeof ChoiceMulti<V, I, K>>;
 export default ChoiceMulti;

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

@@ -1,30 +1,31 @@
 <script lang="ts" module>
-	export interface WeekdayChoiceProps {
-		value?: Day;
-		onChange?: (value: Day) => void;
-		vertical?: boolean;
-		longLabels?: boolean;
-		letterLabels?: boolean;
-		disabled?: boolean | null;
-		readonly?: boolean | null;
-		class?: string;
-	}
+  export interface WeekdayChoiceProps {
+    class?: string;
+    disabled?: boolean | null;
+    letterLabels?: boolean;
+    longLabels?: boolean;
+    onChange?: (value: Day) => void;
+    readonly?: boolean | null;
+    value?: Day;
+    vertical?: boolean;
+  }
 </script>
 
 <script lang="ts">
-	import { Days, formatDayLetter, formatDayShort } from '../../../utils/datetime/index.js';
-	import { identity } from 'ramda';
+  import type { Day } from '../../../utils/types/arktype.js';
 
-	import Choice from './Choice.svelte';
-	import type { Day } from '../../../utils/types/arktype.js';
+  import { Days, formatDayLetter, formatDayShort } from '../../../utils/datetime/index.js';
+  import { identity } from 'ramda';
 
-	let { value = $bindable(undefined), ...props }: WeekdayChoiceProps = $props();
+  import Choice from './Choice.svelte';
 
-	let getLabel = $derived.by(() => {
-		if (props.longLabels) return identity;
-		if (props.letterLabels) return formatDayLetter;
-		return formatDayShort;
-	});
+  let { value = $bindable(undefined), ...props }: WeekdayChoiceProps = $props();
+
+  let getLabel = $derived.by(() => {
+    if (props.longLabels) return identity;
+    if (props.letterLabels) return formatDayLetter;
+    return formatDayShort;
+  });
 </script>
 
-<Choice items={Days} bind:value {getLabel} getValue={identity} getKey={identity} {...props} />
+<Choice getKey={identity} {getLabel} getValue={identity} items={Days} bind:value {...props} />

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

@@ -1,12 +1,12 @@
 export interface WeekdayChoiceProps {
-    value?: Day;
-    onChange?: (value: Day) => void;
-    vertical?: boolean;
-    longLabels?: boolean;
-    letterLabels?: boolean;
+    class?: string;
     disabled?: boolean | null;
+    letterLabels?: boolean;
+    longLabels?: boolean;
+    onChange?: (value: Day) => void;
     readonly?: boolean | null;
-    class?: string;
+    value?: Day;
+    vertical?: boolean;
 }
 import type { Day } from '../../../utils/types/arktype.js';
 declare const WeekdayChoice: import("svelte").Component<WeekdayChoiceProps, {}, "value">;

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

@@ -1,31 +1,33 @@
 <script lang="ts" module>
-	import { identity } from 'ramda';
+  import { identity } from 'ramda';
 
-	export interface WeekdayChoiceMultiProps {
-		value: Day[];
-		onAdd?: (value: Day) => void;
-		onRemove?: (value: Day) => void;
-		vertical?: boolean;
-		longLabels?: boolean;
-		letterLabels?: boolean;
-		disabled?: boolean | null;
-		readonly?: boolean | null;
-		class?: string;
-	}
+  export interface WeekdayChoiceMultiProps {
+    class?: string;
+    disabled?: boolean | null;
+    letterLabels?: boolean;
+    longLabels?: boolean;
+    onAdd?: (value: Day) => void;
+    onRemove?: (value: Day) => void;
+    readonly?: boolean | null;
+    value: Day[];
+    vertical?: boolean;
+  }
 </script>
 
 <script lang="ts">
-	import ChoiceMulti from './ChoiceMulti.svelte';
-	import { Days, formatDayLetter, formatDayShort } from '../../../utils/datetime/index.js';
-	import type { Day } from '../../../utils/types/arktype.js';
+  import type { Day } from '../../../utils/types/arktype.js';
 
-	let { value = $bindable([]), ...props }: WeekdayChoiceMultiProps = $props();
+  import { Days, formatDayLetter, formatDayShort } from '../../../utils/datetime/index.js';
 
-	let getLabel = $derived.by(() => {
-		if (props.longLabels) return identity;
-		if (props.letterLabels) return formatDayLetter;
-		return formatDayShort;
-	});
+  import ChoiceMulti from './ChoiceMulti.svelte';
+
+  let { value = $bindable([]), ...props }: WeekdayChoiceMultiProps = $props();
+
+  let getLabel = $derived.by(() => {
+    if (props.longLabels) return identity;
+    if (props.letterLabels) return formatDayLetter;
+    return formatDayShort;
+  });
 </script>
 
-<ChoiceMulti items={Days} bind:value {getLabel} getKey={identity} getValue={identity} {...props} />
+<ChoiceMulti getKey={identity} {getLabel} getValue={identity} items={Days} bind:value {...props} />

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

@@ -1,13 +1,13 @@
 export interface WeekdayChoiceMultiProps {
-    value: Day[];
+    class?: string;
+    disabled?: boolean | null;
+    letterLabels?: boolean;
+    longLabels?: boolean;
     onAdd?: (value: Day) => void;
     onRemove?: (value: Day) => void;
-    vertical?: boolean;
-    longLabels?: boolean;
-    letterLabels?: boolean;
-    disabled?: boolean | null;
     readonly?: boolean | null;
-    class?: string;
+    value: Day[];
+    vertical?: boolean;
 }
 import type { Day } from '../../../utils/types/arktype.js';
 declare const WeekdayChoiceMulti: import("svelte").Component<WeekdayChoiceMultiProps, {}, "value">;