From b1728db7a0b2dd39c5d1866d384118fecc4e2adc Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Tue, 3 Sep 2024 23:08:52 +0000
Subject: [PATCH 01/11] Add generics to Select component

---
 src/lib/forms/select/Select.svelte | 4 ++--
 src/lib/forms/select/index.ts      | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/lib/forms/select/Select.svelte b/src/lib/forms/select/Select.svelte
index da4419f4..3cf7dd05 100644
--- a/src/lib/forms/select/Select.svelte
+++ b/src/lib/forms/select/Select.svelte
@@ -1,7 +1,7 @@
-<script lang="ts">
+<script lang="ts" generics="T">
   import { type SelectProps as Props, select as selectCls } from '.';
 
-  let { children, items, value = $bindable(), underline, size = 'md', class: className, placeholder = 'Choose option ...', ...restProps }: Props = $props();
+  let { children, items, value = $bindable(), underline, size = 'md', class: className, placeholder = 'Choose option ...', ...restProps }: Props<T> = $props();
 
   const selectStyle = $derived(selectCls({ underline, size, className }));
 </script>
diff --git a/src/lib/forms/select/index.ts b/src/lib/forms/select/index.ts
index 04f551ea..1a8ce232 100644
--- a/src/lib/forms/select/index.ts
+++ b/src/lib/forms/select/index.ts
@@ -8,10 +8,10 @@ type SelectOptionType<T> = {
   value: T;
 };
 
-interface SelectProps extends Omit<HTMLSelectAttributes, 'size'> {
+interface SelectProps<T> extends Omit<HTMLSelectAttributes, 'size'> {
   children?: Snippet;
-  items?: SelectOptionType<any>[];
-  value?: any;
+  items?: SelectOptionType<T>[];
+  value?: T;
   underline?: boolean;
   size?: 'sm' | 'md' | 'lg';
   placeholder?: string;

From a8111f7cafb7a42dde9c0df5dfea75a4cb2afb6f Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Tue, 3 Sep 2024 23:10:50 +0000
Subject: [PATCH 02/11] Restrict generic type

---
 src/lib/forms/select/index.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/forms/select/index.ts b/src/lib/forms/select/index.ts
index 1a8ce232..a8b7fdbf 100644
--- a/src/lib/forms/select/index.ts
+++ b/src/lib/forms/select/index.ts
@@ -8,7 +8,7 @@ type SelectOptionType<T> = {
   value: T;
 };
 
-interface SelectProps<T> extends Omit<HTMLSelectAttributes, 'size'> {
+interface SelectProps<T extends string | number> extends Omit<HTMLSelectAttributes, 'size'> {
   children?: Snippet;
   items?: SelectOptionType<T>[];
   value?: T;
@@ -17,10 +17,10 @@ interface SelectProps<T> extends Omit<HTMLSelectAttributes, 'size'> {
   placeholder?: string;
 }
 
-interface MultiSelectProps<T> extends HTMLAttributes<HTMLDivElement> {
+interface MultiSelectProps<T extends string | number> extends HTMLAttributes<HTMLDivElement> {
   children?: Snippet;
   items?: SelectOptionType<T>[];
-  value?: (string | number)[];
+  value?: T[];
   size?: 'sm' | 'md' | 'lg';
   dropdownClass?: string;
   placeholder?: string;

From 1aba285e5f60fbdce86a73cbd31d015ffb2f4e44 Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Wed, 4 Sep 2024 00:36:27 +0000
Subject: [PATCH 03/11] Implement MultiSelect component

---
 src/lib/forms/select/MultiSelect.svelte | 123 ++++++++++++++++++++++++
 src/lib/forms/select/index.ts           |  11 ++-
 src/lib/forms/select/theme.ts           |  13 +++
 3 files changed, 142 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/forms/select/MultiSelect.svelte

diff --git a/src/lib/forms/select/MultiSelect.svelte b/src/lib/forms/select/MultiSelect.svelte
new file mode 100644
index 00000000..211b9aed
--- /dev/null
+++ b/src/lib/forms/select/MultiSelect.svelte
@@ -0,0 +1,123 @@
+<script lang="ts" generics="T extends string | number">
+  import { twMerge } from "tailwind-merge";
+  import { multiSelect as selectCls, type MultiSelectProps as Props, type SelectOptionType } from ".";
+  import { createEventDispatcher } from "svelte";
+  import Badge from "$lib/badge/Badge.svelte";
+  import CloseButton from "$lib/utils/CloseButton.svelte";
+
+  let { children = defaultChildren, items, value = $bindable([]), size = 'md', dropdownClass, placeholder, oninput, onclick, class: className, ...restProps }: Props<T> = $props();
+	let show = $state(false);
+	let activeIndex: number | null = $state(null);
+	let activeItem = $derived(activeIndex !== null ? items[((activeIndex % items?.length) + items.length) % items.length] : null)
+	let selectedItems = $derived(items.filter(i => value.includes(i.value)));
+
+	const dispatcher = createEventDispatcher();
+
+	const multiSelectClass = 'relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 focus-within:ring-1 focus-within:border-primary-500 ring-primary-500 dark:focus-within:border-primary-500 dark:ring-primary-500 focus-visible:outline-none';
+	let multiSelectDropdown = $derived(twMerge('absolute z-50 p-3 flex flex-col gap-1 max-h-64 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 start-0 top-[calc(100%+1rem)] rounded-lg cursor-pointer overflow-y-scroll w-full', dropdownClass));
+	const itemsClass = 'py-2 px-3 rounded-lg text-gray-600 hover:text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-600';
+	const itemsSelectedClass = 'bg-gray-100 text-black font-semibold hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white';
+	const activeItemClass = 'bg-primary-100 text-primary-500 dark:bg-primary-500 dark:text-primary-100 hover:bg-primary-100 dark:hover:bg-primary-500 hover:text-primary-600 dark:hover:text-primary-100';
+	
+	function selectOption(select: SelectOptionType<T>) {
+		if(value.includes(select.value)) {
+			value = value.filter(v => v !== select.value);
+		} else {
+			value = [...value, select.value];
+		}
+		dispatcher('change');
+	}
+	function clearOption(select: SelectOptionType<T>) {
+		if(value.includes(select.value)) {
+			value = value.filter(v => v !== select.value);
+			dispatcher('change');
+		}
+	}
+	function clearAll() {
+		if(value.length > 0) {
+			value = [];
+			dispatcher('change');
+		}
+	}
+	
+	// keyboard navigation
+	function onkeydown(e: KeyboardEvent) {
+		switch (e.key) {
+			case 'Escape': {
+				show = false;
+				break;
+			}
+			case 'Enter':
+			case ' ': {
+				if(!show) {
+					show = true;
+					activeIndex = 0;
+				} else if(activeItem !== null) {
+					selectOption(activeItem);
+				}
+				break;
+			}
+			case 'ArrowDown': {
+				handleArrowKey(1);
+				break;
+			}
+			case 'ArrowUp': {
+				handleArrowKey(-1);
+				break;
+			}
+		}
+		e.stopPropagation();
+		e.preventDefault();
+	}
+	function handleArrowKey(offset: number) {
+		if(!show || activeIndex === null) {
+			show = true;
+			activeIndex = 0;
+		} else {
+			activeIndex += offset;
+		}
+	}
+</script>
+
+<!-- hidden select for form submission -->
+<select {value} hidden multiple {...restProps}>
+	{#each items as { value, name }}
+		<option {value}>{name}</option>
+	{/each}
+</select>
+
+{#snippet defaultChildren({ item, clear }: { item: SelectOptionType<T>, clear: () => void })}
+	<Badge color='gray' large={size === 'lg'} dismissable params={{ duration: 100 }} onclick={clear}>
+		{item.name}
+	</Badge>
+{/snippet}
+
+<div onclick={() => show = !show} onfocusout={() => show = false} {onkeydown} tabindex="0" role="listbox" class={twMerge(multiSelectClass, selectCls({ size }), className)}>
+	{#if !selectedItems.length}
+		<span class='text-gray-400'>{placeholder}</span>
+	{/if}
+	<span class='flex gap-2 flex-wrap'>
+		{#each selectedItems as item (item.value)}
+			{@render children({ item, clear: () => clearOption(item) })}
+		{/each}
+	</span>
+	<div class='flex ms-auto gap-2 items-center'>
+		{#if selectedItems.length}
+			<CloseButton onclick={clearAll} class='p-0 focus:ring-gray-400 dark:text-white' />
+		{/if}
+		<div class="w-[1px] bg-gray-300 dark:bg-gray-600"></div>
+		<svg class="cursor-pointer h-3 w-3 ms-1 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+      <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={show ? 'm1 5 4-4 4 4' : 'm9 1-4 4-4-4'} />
+    </svg>
+	</div>
+	
+	{#if show}
+		<div onclick={e => (e.stopPropagation(), onclick?.(e))} role="presentation" class={multiSelectDropdown}>
+			{#each items as item (item.value)}
+				<div onclick={() => selectOption(item)} role="presentation" class={twMerge(itemsClass, selectedItems.includes(item) && itemsSelectedClass, activeItem === item && activeItemClass)}>
+					{item.name}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/src/lib/forms/select/index.ts b/src/lib/forms/select/index.ts
index a8b7fdbf..e15ea8ff 100644
--- a/src/lib/forms/select/index.ts
+++ b/src/lib/forms/select/index.ts
@@ -1,7 +1,7 @@
 import Select from './Select.svelte';
 import type { Snippet } from 'svelte';
 import type { HTMLSelectAttributes, HTMLAttributes } from 'svelte/elements';
-import { select } from './theme';
+import { select, multiSelect } from './theme';
 
 type SelectOptionType<T> = {
   name: string | number;
@@ -17,14 +17,15 @@ interface SelectProps<T extends string | number> extends Omit<HTMLSelectAttribut
   placeholder?: string;
 }
 
-interface MultiSelectProps<T extends string | number> extends HTMLAttributes<HTMLDivElement> {
-  children?: Snippet;
-  items?: SelectOptionType<T>[];
+interface MultiSelectProps<T extends string | number> extends Omit<HTMLAttributes<HTMLSelectElement>, "children" | "onclick"> {
+  children?: Snippet<[{ item: SelectOptionType<T>, clear: () => void }]>;
+  items: SelectOptionType<T>[];
   value?: T[];
   size?: 'sm' | 'md' | 'lg';
   dropdownClass?: string;
   placeholder?: string;
   change?: (event: Event) => void;
+  onclick?: (event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement }) => void;
 }
 
-export { Select, select, type SelectProps, type SelectOptionType, type MultiSelectProps };
+export { Select, select, multiSelect, type SelectProps, type SelectOptionType, type MultiSelectProps };
diff --git a/src/lib/forms/select/theme.ts b/src/lib/forms/select/theme.ts
index a987f3f0..b5369000 100644
--- a/src/lib/forms/select/theme.ts
+++ b/src/lib/forms/select/theme.ts
@@ -18,3 +18,16 @@ export const select = tv({
     size: 'md'
   }
 });
+
+export const multiSelect = tv({
+  variants: {
+    size: {
+      sm: 'px-2 py-1 min-h-[2.4rem]',
+      md: 'px-3 py-1 min-h-[2.7rem]',
+      lg: 'px-4 py-2 min-h-[3.2rem]'
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+});

From 9cd83157f9eba875dbd9be781f2b80d9b623d0cb Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Wed, 4 Sep 2024 01:03:35 +0000
Subject: [PATCH 04/11] Fix MultiSelect types

---
 src/lib/forms/select/MultiSelect.svelte | 10 +++++-----
 src/lib/forms/select/index.ts           |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/lib/forms/select/MultiSelect.svelte b/src/lib/forms/select/MultiSelect.svelte
index 211b9aed..04e41fbc 100644
--- a/src/lib/forms/select/MultiSelect.svelte
+++ b/src/lib/forms/select/MultiSelect.svelte
@@ -1,11 +1,11 @@
-<script lang="ts" generics="T extends string | number">
+<script lang="ts" generics="V extends string | number, T extends SelectOptionType<V>">
   import { twMerge } from "tailwind-merge";
   import { multiSelect as selectCls, type MultiSelectProps as Props, type SelectOptionType } from ".";
   import { createEventDispatcher } from "svelte";
   import Badge from "$lib/badge/Badge.svelte";
   import CloseButton from "$lib/utils/CloseButton.svelte";
 
-  let { children = defaultChildren, items, value = $bindable([]), size = 'md', dropdownClass, placeholder, oninput, onclick, class: className, ...restProps }: Props<T> = $props();
+  let { children = defaultChildren, items, value = $bindable([]), size = 'md', dropdownClass, placeholder, oninput, onclick, class: className, ...restProps }: Props<V, T> = $props();
 	let show = $state(false);
 	let activeIndex: number | null = $state(null);
 	let activeItem = $derived(activeIndex !== null ? items[((activeIndex % items?.length) + items.length) % items.length] : null)
@@ -19,7 +19,7 @@
 	const itemsSelectedClass = 'bg-gray-100 text-black font-semibold hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white';
 	const activeItemClass = 'bg-primary-100 text-primary-500 dark:bg-primary-500 dark:text-primary-100 hover:bg-primary-100 dark:hover:bg-primary-500 hover:text-primary-600 dark:hover:text-primary-100';
 	
-	function selectOption(select: SelectOptionType<T>) {
+	function selectOption(select: T) {
 		if(value.includes(select.value)) {
 			value = value.filter(v => v !== select.value);
 		} else {
@@ -27,7 +27,7 @@
 		}
 		dispatcher('change');
 	}
-	function clearOption(select: SelectOptionType<T>) {
+	function clearOption(select: T) {
 		if(value.includes(select.value)) {
 			value = value.filter(v => v !== select.value);
 			dispatcher('change');
@@ -86,7 +86,7 @@
 	{/each}
 </select>
 
-{#snippet defaultChildren({ item, clear }: { item: SelectOptionType<T>, clear: () => void })}
+{#snippet defaultChildren({ item, clear }: { item: T, clear: () => void })}
 	<Badge color='gray' large={size === 'lg'} dismissable params={{ duration: 100 }} onclick={clear}>
 		{item.name}
 	</Badge>
diff --git a/src/lib/forms/select/index.ts b/src/lib/forms/select/index.ts
index e15ea8ff..d34a1a95 100644
--- a/src/lib/forms/select/index.ts
+++ b/src/lib/forms/select/index.ts
@@ -17,10 +17,10 @@ interface SelectProps<T extends string | number> extends Omit<HTMLSelectAttribut
   placeholder?: string;
 }
 
-interface MultiSelectProps<T extends string | number> extends Omit<HTMLAttributes<HTMLSelectElement>, "children" | "onclick"> {
-  children?: Snippet<[{ item: SelectOptionType<T>, clear: () => void }]>;
-  items: SelectOptionType<T>[];
-  value?: T[];
+interface MultiSelectProps<V extends string | number, T extends SelectOptionType<V>> extends Omit<HTMLAttributes<HTMLSelectElement>, "children" | "onclick"> {
+  children?: Snippet<[{ item: T, clear: () => void }]>;
+  items: T[];
+  value?: V[];
   size?: 'sm' | 'md' | 'lg';
   dropdownClass?: string;
   placeholder?: string;

From a90e652dee9374085ebcbf653010e836a56d0c87 Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Wed, 4 Sep 2024 01:05:09 +0000
Subject: [PATCH 05/11] Rename children snippet

---
 src/lib/forms/select/MultiSelect.svelte | 6 +++---
 src/lib/forms/select/index.ts           | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/forms/select/MultiSelect.svelte b/src/lib/forms/select/MultiSelect.svelte
index 04e41fbc..453c41af 100644
--- a/src/lib/forms/select/MultiSelect.svelte
+++ b/src/lib/forms/select/MultiSelect.svelte
@@ -5,7 +5,7 @@
   import Badge from "$lib/badge/Badge.svelte";
   import CloseButton from "$lib/utils/CloseButton.svelte";
 
-  let { children = defaultChildren, items, value = $bindable([]), size = 'md', dropdownClass, placeholder, oninput, onclick, class: className, ...restProps }: Props<V, T> = $props();
+  let { badge = defaultBadge, items, value = $bindable([]), size = 'md', dropdownClass, placeholder, oninput, onclick, class: className, ...restProps }: Props<V, T> = $props();
 	let show = $state(false);
 	let activeIndex: number | null = $state(null);
 	let activeItem = $derived(activeIndex !== null ? items[((activeIndex % items?.length) + items.length) % items.length] : null)
@@ -86,7 +86,7 @@
 	{/each}
 </select>
 
-{#snippet defaultChildren({ item, clear }: { item: T, clear: () => void })}
+{#snippet defaultBadge({ item, clear }: { item: T, clear: () => void })}
 	<Badge color='gray' large={size === 'lg'} dismissable params={{ duration: 100 }} onclick={clear}>
 		{item.name}
 	</Badge>
@@ -98,7 +98,7 @@
 	{/if}
 	<span class='flex gap-2 flex-wrap'>
 		{#each selectedItems as item (item.value)}
-			{@render children({ item, clear: () => clearOption(item) })}
+			{@render badge({ item, clear: () => clearOption(item) })}
 		{/each}
 	</span>
 	<div class='flex ms-auto gap-2 items-center'>
diff --git a/src/lib/forms/select/index.ts b/src/lib/forms/select/index.ts
index d34a1a95..133d0d2b 100644
--- a/src/lib/forms/select/index.ts
+++ b/src/lib/forms/select/index.ts
@@ -18,7 +18,7 @@ interface SelectProps<T extends string | number> extends Omit<HTMLSelectAttribut
 }
 
 interface MultiSelectProps<V extends string | number, T extends SelectOptionType<V>> extends Omit<HTMLAttributes<HTMLSelectElement>, "children" | "onclick"> {
-  children?: Snippet<[{ item: T, clear: () => void }]>;
+  badge?: Snippet<[{ item: T, clear: () => void }]>;
   items: T[];
   value?: V[];
   size?: 'sm' | 'md' | 'lg';

From 578cdabb7ec4d10ae8917edef92be9402b5284bd Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Wed, 4 Sep 2024 01:07:08 +0000
Subject: [PATCH 06/11] Add MultiSelect examples to docs

---
 src/routes/forms/select/+page.svelte          | 53 ++++++++++++++++++-
 .../forms/select/md/custom-multiselect.md     | 17 ++++++
 src/routes/forms/select/md/setup.md           |  4 +-
 3 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 src/routes/forms/select/md/custom-multiselect.md

diff --git a/src/routes/forms/select/+page.svelte b/src/routes/forms/select/+page.svelte
index 20e0e3f2..2b85433a 100644
--- a/src/routes/forms/select/+page.svelte
+++ b/src/routes/forms/select/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Select, Label, Radio, Helper, Dropdown, DropdownUl, DropdownLi, uiHelpers, ButtonGroup, Button } from '$lib';
-  import { ChevronDownOutline } from 'flowbite-svelte-icons';
+  import { CaretDownSolid, CaretUpSolid, ChevronDownOutline } from 'flowbite-svelte-icons';
   import HighlightCompo from '../../utils/HighlightCompo.svelte';
   import CodeWrapper from '../../utils/CodeWrapper.svelte';
   import H1 from '../../utils/H1.svelte';
@@ -10,6 +10,11 @@
   import Germany from '../../utils/icons/Germany.svelte';
   import Italy from '../../utils/icons/Italy.svelte';
   import China from '../../utils/icons/China.svelte';
+  import { H3 } from '../../utils/heading';
+  import MultiSelect from '$lib/forms/select/MultiSelect.svelte';
+  import P from '$lib/typography/paragraph/P.svelte';
+  import Kbd from '$lib/kbd/Kbd.svelte';
+  import Badge from '$lib/badge/Badge.svelte';
 
   const modules = import.meta.glob('./md/*.md', {
     query: '?raw',
@@ -180,3 +185,49 @@
     <HighlightCompo code={modules['./md/custom-options.md'] as string} />
   {/snippet}
 </CodeWrapper>
+
+<H2>MultiSelect</H2>
+
+<H3>Basic example</H3>
+<CodeWrapper>
+  <MultiSelect items={states} placeholder="Placeholder text" />
+  {#snippet codeblock()}
+    <HighlightCompo code={modules['./md/default-multiselect.md'] as string} />
+  {/snippet}
+</CodeWrapper>
+
+<H3>Preselect values</H3>
+<CodeWrapper>
+  <MultiSelect items={states} value={['CA', 'FL']} />
+  {#snippet codeblock()}
+    <HighlightCompo code={modules['./md/multiselect-preselect.md'] as string} />
+  {/snippet}
+</CodeWrapper>
+
+<H3>Keyboard Usage</H3>
+<P>
+  Some keyboard interaction was implemented. Use <Kbd class="inline-flex items-center px-2 py-1.5"><CaretUpSolid size="xs" /><span class="sr-only">Arrow key up</span></Kbd>/<Kbd class="inline-flex items-center px-2 py-1.5"><CaretDownSolid size="xs" /><span class="sr-only">Arrow key down</span></Kbd>
+  to highlight an item, then press <Kbd class="inline-flex items-center px-2 py-1.5">Enter</Kbd> or
+  <Kbd class="inline-flex items-center px-2 py-1.5">SpaceBar</Kbd> to toggle the selected item. Press
+  <Kbd class="inline-flex items-center px-2 py-1.5">Esc</Kbd> to close the selection pop-up.
+</P>
+
+<H3>Customization</H3>
+<CodeWrapper>
+  <MultiSelect items={[
+    { value: 'us', name: 'United States', color: 'indigo' },
+    { value: 'ca', name: 'Canada', color: 'green' },
+    { value: 'fr', name: 'France', color: 'blue' },
+    { value: 'jp', name: 'Japan', color: 'red' },
+    { value: 'en', name: 'England', color: 'yellow' }
+  ] as const}>
+    {#snippet badge({ item, clear })}
+      <Badge color={item.color} large dismissable params={{ duration: 100 }} onclick={clear}>
+        {item.name}
+      </Badge>
+    {/snippet}
+  </MultiSelect>
+  {#snippet codeblock()}
+    <HighlightCompo code={modules['./md/custom-multiselect.md'] as string} />
+  {/snippet}
+</CodeWrapper>
diff --git a/src/routes/forms/select/md/custom-multiselect.md b/src/routes/forms/select/md/custom-multiselect.md
new file mode 100644
index 00000000..d5aa35ee
--- /dev/null
+++ b/src/routes/forms/select/md/custom-multiselect.md
@@ -0,0 +1,17 @@
+<script>
+  const items = [
+    { value: 'us', name: 'United States', color: 'indigo' },
+    { value: 'ca', name: 'Canada', color: 'green' },
+    { value: 'fr', name: 'France', color: 'blue' },
+    { value: 'jp', name: 'Japan', color: 'red' },
+    { value: 'en', name: 'England', color: 'yellow' }
+  ] as const;
+</script>
+
+<MultiSelect {items}>
+  {#snippet badge({ item, clear })}
+    <Badge color={item.color} large dismissable params={{ duration: 100 }} onclick={clear}>
+      {item.name}
+    </Badge>
+  {/snippet}
+</MultiSelect>
\ No newline at end of file
diff --git a/src/routes/forms/select/md/setup.md b/src/routes/forms/select/md/setup.md
index 92284d8c..19b06755 100644
--- a/src/routes/forms/select/md/setup.md
+++ b/src/routes/forms/select/md/setup.md
@@ -1,6 +1,6 @@
 <script>
-  import { Select } from 'svelte-5-ui-lib';
-  let selected: any =$state();
+  import { Select, MultiSelect } from 'svelte-5-ui-lib';
+  let selected: any = $state();
   let countries = [
     { value: 'us', name: 'United States' },
     { value: 'ca', name: 'Canada' },

From c82d2ee385f82de20b3c402d9551b6686049c99c Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Wed, 4 Sep 2024 01:48:22 +0000
Subject: [PATCH 07/11] Add disabled state to MultiSelect

---
 src/lib/forms/select/MultiSelect.svelte       | 20 ++++++++++------
 src/lib/forms/select/index.ts                 |  4 +++-
 src/lib/forms/select/theme.ts                 |  7 +++++-
 src/routes/forms/select/+page.svelte          | 24 ++++++++++++++++++-
 .../forms/select/md/default-multiselect.md    | 14 +++++++++++
 .../forms/select/md/disabled-multiselect.md   | 12 ++++++++++
 .../select/md/disabled-options-multiselect.md | 10 ++++++++
 .../forms/select/md/multiselect-preselect.md  | 14 +++++++++++
 8 files changed, 95 insertions(+), 10 deletions(-)
 create mode 100644 src/routes/forms/select/md/default-multiselect.md
 create mode 100644 src/routes/forms/select/md/disabled-multiselect.md
 create mode 100644 src/routes/forms/select/md/disabled-options-multiselect.md
 create mode 100644 src/routes/forms/select/md/multiselect-preselect.md

diff --git a/src/lib/forms/select/MultiSelect.svelte b/src/lib/forms/select/MultiSelect.svelte
index 453c41af..bde343fc 100644
--- a/src/lib/forms/select/MultiSelect.svelte
+++ b/src/lib/forms/select/MultiSelect.svelte
@@ -5,7 +5,7 @@
   import Badge from "$lib/badge/Badge.svelte";
   import CloseButton from "$lib/utils/CloseButton.svelte";
 
-  let { badge = defaultBadge, items, value = $bindable([]), size = 'md', dropdownClass, placeholder, oninput, onclick, class: className, ...restProps }: Props<V, T> = $props();
+  let { badge = defaultBadge, items, value = $bindable([]), size = 'md', dropdownClass, placeholder, disabled = false, oninput, onclick, class: className, ...restProps }: Props<V, T> = $props();
 	let show = $state(false);
 	let activeIndex: number | null = $state(null);
 	let activeItem = $derived(activeIndex !== null ? items[((activeIndex % items?.length) + items.length) % items.length] : null)
@@ -13,13 +13,15 @@
 
 	const dispatcher = createEventDispatcher();
 
-	const multiSelectClass = 'relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 focus-within:ring-1 focus-within:border-primary-500 ring-primary-500 dark:focus-within:border-primary-500 dark:ring-primary-500 focus-visible:outline-none';
+	const multiSelectClass = $derived(twMerge('relative border border-gray-300 flex items-center rounded-lg gap-2 dark:border-gray-600 ring-primary-500 dark:focus-within:border-primary-500 dark:ring-primary-500 focus-visible:outline-none', selectCls({ size, disabled }), className));
 	let multiSelectDropdown = $derived(twMerge('absolute z-50 p-3 flex flex-col gap-1 max-h-64 bg-white border border-gray-300 dark:bg-gray-700 dark:border-gray-600 start-0 top-[calc(100%+1rem)] rounded-lg cursor-pointer overflow-y-scroll w-full', dropdownClass));
 	const itemsClass = 'py-2 px-3 rounded-lg text-gray-600 hover:text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:text-gray-300 dark:hover:bg-gray-600';
 	const itemsSelectedClass = 'bg-gray-100 text-black font-semibold hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white';
 	const activeItemClass = 'bg-primary-100 text-primary-500 dark:bg-primary-500 dark:text-primary-100 hover:bg-primary-100 dark:hover:bg-primary-500 hover:text-primary-600 dark:hover:text-primary-100';
+	const disabledItemClass = 'text-gray-400 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600 cursor-not-allowed';
 	
 	function selectOption(select: T) {
+		if(disabled || select.disabled) return;
 		if(value.includes(select.value)) {
 			value = value.filter(v => v !== select.value);
 		} else {
@@ -28,14 +30,16 @@
 		dispatcher('change');
 	}
 	function clearOption(select: T) {
+		if(disabled || select.disabled) return;
 		if(value.includes(select.value)) {
 			value = value.filter(v => v !== select.value);
 			dispatcher('change');
 		}
 	}
 	function clearAll() {
+		if(disabled) return;
 		if(value.length > 0) {
-			value = [];
+			value = selectedItems.filter(i => i.disabled).map(i => i.value);
 			dispatcher('change');
 		}
 	}
@@ -49,6 +53,7 @@
 			}
 			case 'Enter':
 			case ' ': {
+				if(disabled) break;
 				if(!show) {
 					show = true;
 					activeIndex = 0;
@@ -70,6 +75,7 @@
 		e.preventDefault();
 	}
 	function handleArrowKey(offset: number) {
+		if(disabled) return;
 		if(!show || activeIndex === null) {
 			show = true;
 			activeIndex = 0;
@@ -86,19 +92,19 @@
 	{/each}
 </select>
 
-{#snippet defaultBadge({ item, clear }: { item: T, clear: () => void })}
+{#snippet defaultBadge({ item, clear, disabled }: { item: T, clear: () => void, disabled: boolean })}
 	<Badge color='gray' large={size === 'lg'} dismissable params={{ duration: 100 }} onclick={clear}>
 		{item.name}
 	</Badge>
 {/snippet}
 
-<div onclick={() => show = !show} onfocusout={() => show = false} {onkeydown} tabindex="0" role="listbox" class={twMerge(multiSelectClass, selectCls({ size }), className)}>
+<div onclick={() => show = !disabled && !show} onfocusout={() => show = false} {onkeydown} tabindex="0" role="listbox" class={multiSelectClass}>
 	{#if !selectedItems.length}
 		<span class='text-gray-400'>{placeholder}</span>
 	{/if}
 	<span class='flex gap-2 flex-wrap'>
 		{#each selectedItems as item (item.value)}
-			{@render badge({ item, clear: () => clearOption(item) })}
+			{@render badge({ item, clear: () => clearOption(item), disabled: item.disabled || disabled })}
 		{/each}
 	</span>
 	<div class='flex ms-auto gap-2 items-center'>
@@ -114,7 +120,7 @@
 	{#if show}
 		<div onclick={e => (e.stopPropagation(), onclick?.(e))} role="presentation" class={multiSelectDropdown}>
 			{#each items as item (item.value)}
-				<div onclick={() => selectOption(item)} role="presentation" class={twMerge(itemsClass, selectedItems.includes(item) && itemsSelectedClass, activeItem === item && activeItemClass)}>
+				<div onclick={() => selectOption(item)} role="presentation" class={twMerge(itemsClass, selectedItems.includes(item) && itemsSelectedClass, activeItem === item && activeItemClass, item.disabled && disabledItemClass)}>
 					{item.name}
 				</div>
 			{/each}
diff --git a/src/lib/forms/select/index.ts b/src/lib/forms/select/index.ts
index 133d0d2b..b7048659 100644
--- a/src/lib/forms/select/index.ts
+++ b/src/lib/forms/select/index.ts
@@ -6,6 +6,7 @@ import { select, multiSelect } from './theme';
 type SelectOptionType<T> = {
   name: string | number;
   value: T;
+  disabled?: boolean;
 };
 
 interface SelectProps<T extends string | number> extends Omit<HTMLSelectAttributes, 'size'> {
@@ -18,10 +19,11 @@ interface SelectProps<T extends string | number> extends Omit<HTMLSelectAttribut
 }
 
 interface MultiSelectProps<V extends string | number, T extends SelectOptionType<V>> extends Omit<HTMLAttributes<HTMLSelectElement>, "children" | "onclick"> {
-  badge?: Snippet<[{ item: T, clear: () => void }]>;
+  badge?: Snippet<[{ item: T, clear: () => void, disabled: boolean }]>;
   items: T[];
   value?: V[];
   size?: 'sm' | 'md' | 'lg';
+  disabled?: boolean;
   dropdownClass?: string;
   placeholder?: string;
   change?: (event: Event) => void;
diff --git a/src/lib/forms/select/theme.ts b/src/lib/forms/select/theme.ts
index b5369000..19372579 100644
--- a/src/lib/forms/select/theme.ts
+++ b/src/lib/forms/select/theme.ts
@@ -25,9 +25,14 @@ export const multiSelect = tv({
       sm: 'px-2 py-1 min-h-[2.4rem]',
       md: 'px-3 py-1 min-h-[2.7rem]',
       lg: 'px-4 py-2 min-h-[3.2rem]'
+    },
+    disabled: {
+      true: 'opacity-50 cursor-not-allowed',
+      false: 'focus-within:ring-1 focus-within:border-primary-500 dark:focus-within:border-primary-500'
     }
   },
   defaultVariants: {
-    size: 'md'
+    size: 'md',
+    disabled: false
   }
 });
diff --git a/src/routes/forms/select/+page.svelte b/src/routes/forms/select/+page.svelte
index 2b85433a..4555bcda 100644
--- a/src/routes/forms/select/+page.svelte
+++ b/src/routes/forms/select/+page.svelte
@@ -198,12 +198,34 @@
 
 <H3>Preselect values</H3>
 <CodeWrapper>
-  <MultiSelect items={states} value={['CA', 'FL']} />
+  <MultiSelect items={states} value={['CA', 'FL'] as string[]} />
   {#snippet codeblock()}
     <HighlightCompo code={modules['./md/multiselect-preselect.md'] as string} />
   {/snippet}
 </CodeWrapper>
 
+<H3>Disabled MultiSelect</H3>
+<CodeWrapper>
+  <MultiSelect items={states} value={['CA', 'FL'] as string[]} disabled />
+  {#snippet codeblock()}
+    <HighlightCompo code={modules['./md/disabled-multiselect.md'] as string} />
+  {/snippet}
+</CodeWrapper>
+
+<H3>Disabled options</H3>
+<CodeWrapper>
+  <MultiSelect items={[
+    { value: 'us', name: 'United States', disabled: true },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France', disabled: true },
+    { value: 'jp', name: 'Japan' },
+    { value: 'en', name: 'England' }
+  ]} value={['fr', 'en'] as string[]} />
+  {#snippet codeblock()}
+    <HighlightCompo code={modules['./md/disabled-options-multiselect.md'] as string} />
+  {/snippet}
+</CodeWrapper>
+
 <H3>Keyboard Usage</H3>
 <P>
   Some keyboard interaction was implemented. Use <Kbd class="inline-flex items-center px-2 py-1.5"><CaretUpSolid size="xs" /><span class="sr-only">Arrow key up</span></Kbd>/<Kbd class="inline-flex items-center px-2 py-1.5"><CaretDownSolid size="xs" /><span class="sr-only">Arrow key down</span></Kbd>
diff --git a/src/routes/forms/select/md/default-multiselect.md b/src/routes/forms/select/md/default-multiselect.md
new file mode 100644
index 00000000..f0037295
--- /dev/null
+++ b/src/routes/forms/select/md/default-multiselect.md
@@ -0,0 +1,14 @@
+<script>
+  let placeholder = 'Placeholder text';
+  let selected = [];
+  let states = [
+    { value: 'CA', name: 'California' },
+    { value: 'TX', name: 'Texas' },
+    { value: 'WH', name: 'Washinghton' },
+    { value: 'FL', name: 'Florida' },
+    { value: 'VG', name: 'Virginia' },
+    { value: 'GE', name: 'Georgia' },
+    { value: 'MI', name: 'Michigan' }
+  ];
+</script>
+<MultiSelect items={states} {placeholder} bind:value={selected} />
\ No newline at end of file
diff --git a/src/routes/forms/select/md/disabled-multiselect.md b/src/routes/forms/select/md/disabled-multiselect.md
new file mode 100644
index 00000000..a6312377
--- /dev/null
+++ b/src/routes/forms/select/md/disabled-multiselect.md
@@ -0,0 +1,12 @@
+<script>
+  let states = [
+    { value: 'CA', name: 'California' },
+    { value: 'TX', name: 'Texas' },
+    { value: 'WH', name: 'Washinghton' },
+    { value: 'FL', name: 'Florida' },
+    { value: 'VG', name: 'Virginia' },
+    { value: 'GE', name: 'Georgia' },
+    { value: 'MI', name: 'Michigan' }
+  ];
+</script>
+<MultiSelect items={states} value={['CA', 'FL']} disabled />
\ No newline at end of file
diff --git a/src/routes/forms/select/md/disabled-options-multiselect.md b/src/routes/forms/select/md/disabled-options-multiselect.md
new file mode 100644
index 00000000..bae1bd11
--- /dev/null
+++ b/src/routes/forms/select/md/disabled-options-multiselect.md
@@ -0,0 +1,10 @@
+<script>
+  let countries = [
+    { value: 'us', name: 'United States', disabled: true },
+    { value: 'ca', name: 'Canada' },
+    { value: 'fr', name: 'France', disabled: true },
+    { value: 'jp', name: 'Japan' },
+    { value: 'en', name: 'England' }
+  ];
+</script>
+<MultiSelect items={countries} value={['fr', 'en']} />
\ No newline at end of file
diff --git a/src/routes/forms/select/md/multiselect-preselect.md b/src/routes/forms/select/md/multiselect-preselect.md
new file mode 100644
index 00000000..135554c3
--- /dev/null
+++ b/src/routes/forms/select/md/multiselect-preselect.md
@@ -0,0 +1,14 @@
+<script>
+  let placeholder = 'Placeholder text';
+  let selected = ['CA', 'FL'];
+  let states = [
+    { value: 'CA', name: 'California' },
+    { value: 'TX', name: 'Texas' },
+    { value: 'WH', name: 'Washinghton' },
+    { value: 'FL', name: 'Florida' },
+    { value: 'VG', name: 'Virginia' },
+    { value: 'GE', name: 'Georgia' },
+    { value: 'MI', name: 'Michigan' }
+  ];
+</script>
+<MultiSelect items={states} {placeholder} bind:value={selected} />
\ No newline at end of file

From 981aabd13b4ea52c84d4cd9408c9b649a462cc7b Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Wed, 4 Sep 2024 01:59:17 +0000
Subject: [PATCH 08/11] Add disabled property to Select items

---
 src/lib/forms/select/Select.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/forms/select/Select.svelte b/src/lib/forms/select/Select.svelte
index 3cf7dd05..06a617ef 100644
--- a/src/lib/forms/select/Select.svelte
+++ b/src/lib/forms/select/Select.svelte
@@ -12,8 +12,8 @@
   {/if}
 
   {#if items}
-    {#each items as { value, name }}
-      <option {value}>{name}</option>
+    {#each items as { value, name, disabled }}
+      <option {value} {disabled}>{name}</option>
     {/each}
   {/if}
 

From e8cda77d64c1f0df2b6fe0c75cd723b1275cbbea Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Wed, 4 Sep 2024 02:08:28 +0000
Subject: [PATCH 09/11] Remove over-restrictive typing

---
 src/lib/forms/select/MultiSelect.svelte |  6 +++---
 src/lib/forms/select/Select.svelte      |  2 +-
 src/lib/forms/select/index.ts           |  4 ++--
 src/routes/forms/select/+page.svelte    | 10 +++++-----
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/lib/forms/select/MultiSelect.svelte b/src/lib/forms/select/MultiSelect.svelte
index bde343fc..fb71f527 100644
--- a/src/lib/forms/select/MultiSelect.svelte
+++ b/src/lib/forms/select/MultiSelect.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" generics="V extends string | number, T extends SelectOptionType<V>">
+<script lang="ts" generics="V, T extends SelectOptionType<V>">
   import { twMerge } from "tailwind-merge";
   import { multiSelect as selectCls, type MultiSelectProps as Props, type SelectOptionType } from ".";
   import { createEventDispatcher } from "svelte";
@@ -19,7 +19,7 @@
 	const itemsSelectedClass = 'bg-gray-100 text-black font-semibold hover:text-black dark:text-white dark:bg-gray-600 dark:hover:text-white';
 	const activeItemClass = 'bg-primary-100 text-primary-500 dark:bg-primary-500 dark:text-primary-100 hover:bg-primary-100 dark:hover:bg-primary-500 hover:text-primary-600 dark:hover:text-primary-100';
 	const disabledItemClass = 'text-gray-400 dark:text-gray-500 hover:bg-gray-200 dark:hover:bg-gray-600 cursor-not-allowed';
-	
+
 	function selectOption(select: T) {
 		if(disabled || select.disabled) return;
 		if(value.includes(select.value)) {
@@ -43,7 +43,7 @@
 			dispatcher('change');
 		}
 	}
-	
+
 	// keyboard navigation
 	function onkeydown(e: KeyboardEvent) {
 		switch (e.key) {
diff --git a/src/lib/forms/select/Select.svelte b/src/lib/forms/select/Select.svelte
index 06a617ef..da4a57e3 100644
--- a/src/lib/forms/select/Select.svelte
+++ b/src/lib/forms/select/Select.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" generics="T">
-  import { type SelectProps as Props, select as selectCls } from '.';
+  import { type SelectProps as Props, select as selectCls, type SelectOptionType } from '.';
 
   let { children, items, value = $bindable(), underline, size = 'md', class: className, placeholder = 'Choose option ...', ...restProps }: Props<T> = $props();
 
diff --git a/src/lib/forms/select/index.ts b/src/lib/forms/select/index.ts
index b7048659..437b6053 100644
--- a/src/lib/forms/select/index.ts
+++ b/src/lib/forms/select/index.ts
@@ -9,7 +9,7 @@ type SelectOptionType<T> = {
   disabled?: boolean;
 };
 
-interface SelectProps<T extends string | number> extends Omit<HTMLSelectAttributes, 'size'> {
+interface SelectProps<T> extends Omit<HTMLSelectAttributes, 'size'> {
   children?: Snippet;
   items?: SelectOptionType<T>[];
   value?: T;
@@ -18,7 +18,7 @@ interface SelectProps<T extends string | number> extends Omit<HTMLSelectAttribut
   placeholder?: string;
 }
 
-interface MultiSelectProps<V extends string | number, T extends SelectOptionType<V>> extends Omit<HTMLAttributes<HTMLSelectElement>, "children" | "onclick"> {
+interface MultiSelectProps<V, T extends SelectOptionType<V>> extends Omit<HTMLAttributes<HTMLSelectElement>, "children" | "onclick"> {
   badge?: Snippet<[{ item: T, clear: () => void, disabled: boolean }]>;
   items: T[];
   value?: V[];
diff --git a/src/routes/forms/select/+page.svelte b/src/routes/forms/select/+page.svelte
index 4555bcda..b89e90db 100644
--- a/src/routes/forms/select/+page.svelte
+++ b/src/routes/forms/select/+page.svelte
@@ -65,8 +65,8 @@
   });
 
   const sizes = ['sm', 'md', 'lg'];
-  let selectSize: Select['size'] = $state('md');
-  const sizeDisplay: Record<Select['size'], string> = {
+  let selectSize: Select<any>['size'] = $state('md');
+  const sizeDisplay: Record<Select<any>['size'], string> = {
     sm: 'Small',
     md: 'Medium',
     lg: 'Large'
@@ -198,7 +198,7 @@
 
 <H3>Preselect values</H3>
 <CodeWrapper>
-  <MultiSelect items={states} value={['CA', 'FL'] as string[]} />
+  <MultiSelect items={states} value={['CA', 'FL']} />
   {#snippet codeblock()}
     <HighlightCompo code={modules['./md/multiselect-preselect.md'] as string} />
   {/snippet}
@@ -206,7 +206,7 @@
 
 <H3>Disabled MultiSelect</H3>
 <CodeWrapper>
-  <MultiSelect items={states} value={['CA', 'FL'] as string[]} disabled />
+  <MultiSelect items={states} value={['CA', 'FL']} disabled />
   {#snippet codeblock()}
     <HighlightCompo code={modules['./md/disabled-multiselect.md'] as string} />
   {/snippet}
@@ -220,7 +220,7 @@
     { value: 'fr', name: 'France', disabled: true },
     { value: 'jp', name: 'Japan' },
     { value: 'en', name: 'England' }
-  ]} value={['fr', 'en'] as string[]} />
+  ]} value={['fr', 'en']} />
   {#snippet codeblock()}
     <HighlightCompo code={modules['./md/disabled-options-multiselect.md'] as string} />
   {/snippet}

From 222277c324144a15c1c006b27b3aaed489557b54 Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Wed, 4 Sep 2024 02:10:16 +0000
Subject: [PATCH 10/11] Remove unused import

---
 src/lib/forms/select/Select.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/forms/select/Select.svelte b/src/lib/forms/select/Select.svelte
index da4a57e3..06a617ef 100644
--- a/src/lib/forms/select/Select.svelte
+++ b/src/lib/forms/select/Select.svelte
@@ -1,5 +1,5 @@
 <script lang="ts" generics="T">
-  import { type SelectProps as Props, select as selectCls, type SelectOptionType } from '.';
+  import { type SelectProps as Props, select as selectCls } from '.';
 
   let { children, items, value = $bindable(), underline, size = 'md', class: className, placeholder = 'Choose option ...', ...restProps }: Props<T> = $props();
 

From 661ab9ac79fe9e1b5a5909a77432a2f61b34584b Mon Sep 17 00:00:00 2001
From: aarondoet <42084688+aarondoet@users.noreply.github.com>
Date: Wed, 4 Sep 2024 02:18:29 +0000
Subject: [PATCH 11/11] Add MultiSelect export to package.json

---
 package.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/package.json b/package.json
index 5504f708..57b3a145 100644
--- a/package.json
+++ b/package.json
@@ -306,6 +306,10 @@
       "types": "./dist/forms/search/Search.svelte.d.ts",
       "svelte": "./dist/forms/search/Search.svelte"
     },
+    "./MultiSelect.svelte": {
+      "types": "./dist/forms/select/MultiSelect.svelte.d.ts",
+      "svelte": "./dist/forms/select/MultiSelect.svelte"
+    },
     "./Select.svelte": {
       "types": "./dist/forms/select/Select.svelte.d.ts",
       "svelte": "./dist/forms/select/Select.svelte"