fix: exported select prop type (#214)

Author: huntabyte

.changeset/new-pianos-compete.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: exported `SelectProps` type

src/components/demos/select-demo.svelte

@@ -11,7 +11,7 @@
 	];
 </script>
 
-<Select.Root>
+<Select.Root items={themes}>
 	<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/content/api-reference/select.ts

@@ -102,6 +102,13 @@ export const root: APISchema<Select.Props> = {
 			default: C.TRUE,
 			description:
 				"Whether or not to enable typeahead functionality. When enabled, the user can type to navigate to menu items."
+		},
+		items: {
+			type: {
+				type: "Selected[]",
+				definition: "Array<{ value: T; label?: string }>"
+			},
+			description: "An array of items to add type-safety to the `onSelectedChange` callback."
 		}
 	},
 	slotProps: { ids: idsSlotProp }

src/lib/bits/select/_types.ts

@@ -7,6 +7,11 @@ 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 Items<T> = {
+	value: T;
+	label?: string;
+}[];
+
 type Props<T = unknown, Multiple extends boolean = false> = Expand<
 	OmitFloating<Omit<CreateSelectProps, "selected" | "defaultSelected" | "onSelectedChange">> & {
 		/**
@@ -36,9 +41,15 @@ type Props<T = unknown, Multiple extends boolean = false> = Expand<
 		onOpenChange?: OnChangeFn<boolean>;
 
 		/**
-		 *
+		 * Whether or not multiple values can be selected.
 		 */
 		multiple?: Multiple;
+
+		/**
+		 * Optional array of items to add type-safety to the
+		 * `onSelectedChange` callback and `selected` prop.
+		 */
+		items?: Items<T>;
 	}
 >;