wip select multiple

src/components/demos/select-demo.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Select } from "$lib";
+	import { Select, type Selected } from "$lib";
 	import { flyAndScale } from "@/utils";
 	import { Check, Palette, CaretUpDown } from "phosphor-svelte";
 
@@ -11,7 +11,7 @@
 	];
 </script>
 
-<Select.Root>
+<Select.Root multiple onSelectedChange={() => console.log("selectedChange")}>
 	<Select.Trigger
 		class="inline-flex h-input w-[296px] items-center rounded-9px border border-border-input bg-background px-[11px] text-sm transition-colors placeholder:text-foreground-alt/50  focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background "
 		aria-label="Select a theme"

src/lib/bits/select/_types.ts

@@ -7,20 +7,20 @@ import type { CreateSelectProps, SelectOptionProps } from "@melt-ui/svelte";
 import type { AsChild, Expand, OmitFloating, OnChangeFn } from "$lib/internal/index.js";
 import type { ContentProps, ArrowProps } from "$lib/bits/floating/_types.js";
 
-type Props<T = unknown> = Expand<
+type Props<T, Multiple extends boolean> = Expand<
 	OmitFloating<Omit<CreateSelectProps, "selected" | "defaultSelected" | "onSelectedChange">> & {
 		/**
 		 * The selected value of the select.
 		 * You can bind this to a value to programmatically control the selected value.
 		 *
 		 * @defaultValue undefined
 		 */
-		selected?: CreateSelectProps["defaultSelected"] & {};
+		selected?: CreateSelectProps<T, Multiple>["defaultSelected"] & {};
 
 		/**
 		 * A callback function called when the selected value changes.
 		 */
-		onSelectedChange?: OnChangeFn<T>;
+		onSelectedChange?: OnChangeFn<CreateSelectProps<T, Multiple>["defaultSelected"]>;
 
 		/**
 		 * The open state of the select menu.
@@ -34,6 +34,11 @@ type Props<T = unknown> = Expand<
 		 * A callback function called when the open state changes.
 		 */
 		onOpenChange?: OnChangeFn<boolean>;
+
+		/**
+		 *
+		 */
+		multiple?: Multiple;
 	}
 >;
 

src/lib/bits/select/components/select.svelte

@@ -3,7 +3,18 @@
 	import { setCtx } from "../ctx.js";
 	import type { SelectProps } from "../types.js";
 
-	type $$Props = SelectProps;
+	type T = $$Generic<unknown>;
+	type Multiple = $$Generic<boolean>;
+
+	type $$Props = Omit<SelectProps<T, Multiple>, "multiple"> & {
+		items?: Items<T>;
+		multiple?: Multiple;
+	};
+
+	type Items<T> = {
+		value: T;
+		label?: string;
+	}[];
 
 	export let required: $$Props["required"] = undefined;
 	export let disabled: $$Props["disabled"] = undefined;
@@ -13,11 +24,13 @@
 	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = undefined;
 	export let portal: $$Props["portal"] = undefined;
 	export let name: $$Props["name"] = undefined;
-	export let multiple: $$Props["multiple"] = undefined;
+	export let multiple: $$Props["multiple"] = false as Multiple;
 	export let selected: $$Props["selected"] = undefined;
 	export let onSelectedChange: $$Props["onSelectedChange"] = undefined;
 	export let open: $$Props["open"] = undefined;
 	export let onOpenChange: $$Props["onOpenChange"] = undefined;
+	// eslint-disable-next-line svelte/valid-compile
+	export let items: $$Props["items"] = [];
 
 	const {
 		states: { open: localOpen, selected: localSelected },
@@ -32,11 +45,17 @@
 		closeOnOutsideClick,
 		portal,
 		name,
-		multiple,
+		multiple: multiple as Multiple,
 		forceVisible: true,
 		defaultSelected: selected,
 		defaultOpen: open,
 		onSelectedChange: ({ next }) => {
+			if (Array.isArray(next)) {
+				onSelectedChange?.(next);
+				selected = next;
+				return next;
+			}
+
 			if (selected !== next) {
 				onSelectedChange?.(next);
 				selected = next;
@@ -49,7 +68,8 @@
 				open = next;
 			}
 			return next;
-		}
+		},
+		items
 	});
 
 	const idValues = derived(

src/lib/bits/select/ctx.ts

@@ -34,8 +34,20 @@ export function getCtx() {
 	return getContext<GetReturn>(NAME);
 }
 
-export function setCtx(props: CreateSelectProps) {
-	const select = createSelect(removeUndefined(props));
+type Items<T> = {
+	value: T;
+	label?: string;
+};
+
+type Props<T = unknown, M extends boolean = false> = CreateSelectProps<T, M> & {
+	items?: Items<T>[];
+};
+
+export function setCtx<T = unknown, M extends boolean = false>(
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	props: Props<T, M>
+) {
+	const select = createSelect<T, M>(removeUndefined(props));
 	setContext(NAME, select);
 	return {
 		...select,

src/lib/bits/select/types.ts

@@ -8,7 +8,7 @@ import type {
 import type { CustomEventHandler } from "$lib/index.js";
 import type * as I from "./_types.js";
 
-type Props<T = unknown> = I.Props<T>;
+type Props<T, Multiple extends boolean> = I.Props<T, Multiple>;
 
 type ContentProps<
 	T extends Transition = Transition,

src/lib/shared/index.ts

@@ -1,6 +1,11 @@
 import type { DateValue } from "@internationalized/date";
 import type { Month } from "@melt-ui/svelte";
 
+export type Selected<Value> = {
+	value: Value;
+	label?: string;
+};
+
 export type DateRange = {
 	start: DateValue | undefined;
 	end: DateValue | undefined;