feat: compatibility with exactOptionalPropertyTypes

.changeset/weak-dingos-help.md

@@ -0,0 +1,5 @@
+---
+"bits-ui": patch
+---
+
+fix: compatibility with `exactOptionalPropertyTypes`

packages/bits-ui/src/lib/bits/accordion/types.ts

@@ -23,12 +23,12 @@ export type AccordionPropsWithoutHTML<Multiple extends boolean> = Expand<
 		 * The value of the accordion.
 		 * You can bind this to a value to programmatically control the open state.
 		 */
-		value?: MeltAccordionProps<Multiple>["defaultValue"];
+		value?: MeltAccordionProps<Multiple>["defaultValue"] | undefined;
 
 		/**
 		 * A callback function called when the value changes.
 		 */
-		onValueChange?: OnChangeFn<MeltAccordionProps<Multiple>["defaultValue"]>;
+		onValueChange?: OnChangeFn<MeltAccordionProps<Multiple>["defaultValue"]> | undefined;
 	} & DOMElement
 >;
 
@@ -41,7 +41,7 @@ export type AccordionHeaderPropsWithoutHTML = Expand<
 		/**
 		 * The heading level of the accordion header.
 		 */
-		level?: ObjectVariation<MeltAccordionHeadingProps>["level"];
+		level?: ObjectVariation<MeltAccordionHeadingProps>["level"] | undefined;
 	} & DOMElement
 >;
 

packages/bits-ui/src/lib/bits/alert-dialog/types.ts

@@ -21,12 +21,12 @@ export type AlertDialogPropsWithoutHTML = Expand<
 		 *
 		 * @defaultValue false
 		 */
-		open?: boolean;
+		open?: boolean | undefined;
 
 		/**
 		 * A callback function called when the open state changes.
 		 */
-		onOpenChange?: OnChangeFn<boolean>;
+		onOpenChange?: OnChangeFn<boolean> | undefined;
 	}
 >;
 
@@ -54,7 +54,7 @@ export type AlertDialogPortalPropsWithoutHTML = DOMElement;
 
 export type AlertDialogTitlePropsWithoutHTML = Expand<
 	{
-		level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+		level?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | undefined;
 	} & DOMElement<HTMLHeadingElement>
 >;
 

packages/bits-ui/src/lib/bits/aspect-ratio/types.ts

@@ -1,8 +1,8 @@
-import type { DOMEl, HTMLDivAttributes } from "$lib/internal/index.js";
+import type { DOMEl, Expand, HTMLDivAttributes } from "$lib/internal/index.js";
 
 export type AspectRatioPropsWithoutHTML = Expand<
 	{
-		ratio?: number;
+		ratio?: number | undefined;
 	} & DOMEl
 >;
 

packages/bits-ui/src/lib/bits/avatar/types.ts

@@ -14,12 +14,12 @@ export type AvatarPropsWithoutHTML = Expand<
 		 * The loading state of the image.
 		 * You can bind this to a boolean value to programmatically control the loading state.
 		 */
-		loadingStatus?: "loading" | "loaded" | "error";
+		loadingStatus?: "loading" | "loaded" | "error" | undefined;
 
 		/**
 		 * A callback function called when the loading state changes.
 		 */
-		onLoadingStatusChange?: OnChangeFn<"loading" | "loaded" | "error">;
+		onLoadingStatusChange?: OnChangeFn<"loading" | "loaded" | "error"> | undefined;
 	} & DOMElement
 >;
 

packages/bits-ui/src/lib/bits/button/types.ts

@@ -6,19 +6,19 @@ export type ButtonPropsWithoutHTML = {
 	/**
 	 * Melt UI builders to apply to the button component.
 	 */
-	builders?: Builder[];
+	builders?: Builder[] | undefined;
 };
 
 type AnchorElement = ButtonPropsWithoutHTML &
 	HTMLAnchorAttributes & {
-		href?: HTMLAnchorAttributes["href"];
-		type?: never;
+		href?: HTMLAnchorAttributes["href"] | undefined;
+		type?: never | undefined;
 	} & DOMEl<HTMLAnchorElement>;
 
 type ButtonElement = ButtonPropsWithoutHTML &
 	HTMLButtonAttributes & {
-		type?: HTMLButtonAttributes["type"];
-		href?: never;
+		type?: HTMLButtonAttributes["type"] | undefined;
+		href?: never | undefined;
 	} & DOMEl<HTMLButtonElement>;
 
 export type ButtonProps = AnchorElement | ButtonElement;

packages/bits-ui/src/lib/bits/calendar/types.ts

@@ -7,7 +7,7 @@ import type {
 } from "svelte/elements";
 import type { DateValue } from "@internationalized/date";
 import type { CreateCalendarProps as MeltCalendarProps } from "@melt-ui/svelte";
-import type { DOMElement, HTMLDivAttributes, OnChangeFn } from "$lib/internal/index.js";
+import type { DOMElement, Expand, HTMLDivAttributes, OnChangeFn } from "$lib/internal/index.js";
 import type { CustomEventHandler } from "$lib/index.js";
 
 type OmitCalendarProps<T> = Omit<
@@ -30,12 +30,12 @@ export type CalendarPropsWithoutHTML<Multiple extends boolean = false> = Expand<
 		 * You can bind this to a value to programmatically control the
 		 * value state.
 		 */
-		value?: MeltCalendarProps<Multiple>["defaultValue"];
+		value?: MeltCalendarProps<Multiple>["defaultValue"] | undefined;
 
 		/**
 		 * A callback function called when the value changes.
 		 */
-		onValueChange?: OnChangeFn<MeltCalendarProps<Multiple>["defaultValue"]>;
+		onValueChange?: OnChangeFn<MeltCalendarProps<Multiple>["defaultValue"]> | undefined;
 
 		/**
 		 * The placeholder date, used to display the calendar when no
@@ -45,12 +45,12 @@ export type CalendarPropsWithoutHTML<Multiple extends boolean = false> = Expand<
 		 * You can bind this to a value to programmatically control the
 		 * placeholder state.
 		 */
-		placeholder?: DateValue;
+		placeholder?: DateValue | undefined;
 
 		/**
 		 * A callback function called when the placeholder changes.
 		 */
-		onPlaceholderChange?: OnChangeFn<DateValue>;
+		onPlaceholderChange?: OnChangeFn<DateValue> | undefined;
 
 		/**
 		 * If `true`, the calendar will focus the selected day,
@@ -59,7 +59,7 @@ export type CalendarPropsWithoutHTML<Multiple extends boolean = false> = Expand<
 		 *
 		 * @default false
 		 */
-		initialFocus?: boolean;
+		initialFocus?: boolean | undefined;
 	} & DOMElement
 >;
 

packages/bits-ui/src/lib/bits/checkbox/types.ts

@@ -18,12 +18,12 @@ export type CheckboxPropsWithoutHTML = Expand<
 		 *
 		 * @defaultValue false
 		 */
-		checked?: boolean | "indeterminate";
+		checked?: boolean | "indeterminate" | undefined;
 
 		/**
 		 * A callback function called when the checked state changes.
 		 */
-		onCheckedChange?: OnChangeFn<boolean | "indeterminate">;
+		onCheckedChange?: OnChangeFn<boolean | "indeterminate"> | undefined;
 	} & DOMElement<HTMLButtonElement>
 >;
 

packages/bits-ui/src/lib/bits/collapsible/types.ts

@@ -20,12 +20,12 @@ export type CollapsiblePropsWithoutHTML = Expand<
 		 *
 		 * @defaultValue false
 		 */
-		open?: boolean;
+		open?: boolean | undefined;
 
 		/**
 		 * A callback function called when the open state changes.
 		 */
-		onOpenChange?: OnChangeFn<boolean>;
+		onOpenChange?: OnChangeFn<boolean> | undefined;
 	} & DOMElement
 >;
 

packages/bits-ui/src/lib/bits/combobox/ctx.ts

@@ -46,11 +46,11 @@ export function getCtx() {
 
 type Items<T> = {
 	value: T;
-	label?: string;
+	label?: string | undefined;
 };
 
 type Props<T = unknown, M extends boolean = false> = CreateComboboxProps<T, M> & {
-	items?: Items<T>[];
+	items?: Items<T>[] | undefined;
 };
 
 export function setCtx<T = unknown, M extends boolean = false>(props: Props<T, M>) {

packages/bits-ui/src/lib/bits/combobox/types.ts

@@ -43,47 +43,47 @@ export type ComboboxPropsWithoutHTML<T = unknown, Multiple extends boolean = fal
 		/**
 		 * A callback function called when the selected value changes.
 		 */
-		onSelectedChange?: OnChangeFn<SelectValue<Selected<T>, Multiple>>;
+		onSelectedChange?: OnChangeFn<SelectValue<Selected<T>, Multiple>> | undefined;
 
 		/**
 		 * The open state of the combobox menu.
 		 * You can bind this to a boolean value to programmatically control the open state.
 		 *
 		 * @defaultValue false
 		 */
-		open?: boolean;
+		open?: boolean | undefined;
 
 		/**
 		 * A callback function called when the open state changes.
 		 */
-		onOpenChange?: OnChangeFn<boolean>;
+		onOpenChange?: OnChangeFn<boolean> | undefined;
 
 		/**
 		 * Whether or not multiple values can be selected.
 		 */
-		multiple?: Multiple;
+		multiple?: Multiple | undefined;
 
 		/**
 		 * The value of the input.
 		 * You can bind this to a value to programmatically control the input value.
 		 *
 		 * @defaultValue ""
 		 */
-		inputValue?: string;
+		inputValue?: string | undefined;
 
 		/**
 		 * Optionally provide an array of `Selected<T>` objects to
 		 * type the `selected` and `onSelectedChange` props.
 		 */
-		items?: Selected<T>[];
+		items?: Selected<T>[] | undefined;
 
 		/**
 		 * Whether the input has been touched or not. You can bind to this to
 		 * handle filtering the items only when the input has been touched.
 		 *
 		 * @defaultValue false
 		 */
-		touchedInput?: boolean;
+		touchedInput?: boolean | undefined;
 	}
 >;
 

packages/bits-ui/src/lib/bits/date-field/types.ts

@@ -17,34 +17,34 @@ export type DateFieldPropsWithoutHTML = Expand<
 		 * The value of the date field.
 		 * You can bind this to a `DateValue` object to programmatically control the value.
 		 */
-		value?: DateValue;
+		value?: DateValue | undefined;
 
 		/**
 		 * A callback function called when the value changes.
 		 */
-		onValueChange?: OnChangeFn<DateValue | undefined>;
+		onValueChange?: OnChangeFn<DateValue | undefined> | undefined;
 
 		/**
 		 * The placeholder date used to start the field.
 		 */
-		placeholder?: DateValue;
+		placeholder?: DateValue | undefined;
 
 		/**
 		 * A callback function called when the placeholder changes.
 		 */
-		onPlaceholderChange?: OnChangeFn<DateValue>;
+		onPlaceholderChange?: OnChangeFn<DateValue> | undefined;
 
 		/**
 		 * The id of the validation message element which is used to apply the
 		 * appropriate `aria-describedby` attribute to the input.
 		 */
-		validationId?: string;
+		validationId?: string | undefined;
 
 		/**
 		 * The id of the description element which is used to describe the input.
 		 * This is used to apply the appropriate `aria-describedby` attribute to the input.
 		 */
-		descriptionId?: string;
+		descriptionId?: string | undefined;
 	}
 >;
 

packages/bits-ui/src/lib/bits/date-picker/types.ts

@@ -51,45 +51,45 @@ export type DatePickerPropsWithoutHTML = Expand<
 		 *
 		 * @default false
 		 */
-		open?: boolean;
+		open?: boolean | undefined;
 
 		/**
 		 * A callback function called when the open state changes.
 		 */
-		onOpenChange?: OnChangeFn<boolean>;
+		onOpenChange?: OnChangeFn<boolean> | undefined;
 
 		/**
 		 * The value of the date field.
 		 * You can bind this to a `DateValue` object to programmatically control the value.
 		 */
-		value?: DateValue;
+		value?: DateValue | undefined;
 
 		/**
 		 * A callback function called when the value changes.
 		 */
-		onValueChange?: OnChangeFn<DateValue | undefined>;
+		onValueChange?: OnChangeFn<DateValue | undefined> | undefined;
 
 		/**
 		 * The placeholder date used to start the field.
 		 */
-		placeholder?: DateValue;
+		placeholder?: DateValue | undefined;
 
 		/**
 		 * A callback function called when the placeholder changes.
 		 */
-		onPlaceholderChange?: OnChangeFn<DateValue>;
+		onPlaceholderChange?: OnChangeFn<DateValue> | undefined;
 
 		/**
 		 * The id of the validation message element which is used to apply the
 		 * appropriate `aria-describedby` attribute to the input.
 		 */
-		validationId?: string;
+		validationId?: string | undefined;
 
 		/**
 		 * The id of the description element which is used to describe the input.
 		 * This is used to apply the appropriate `aria-describedby` attribute to the input.
 		 */
-		descriptionId?: string;
+		descriptionId?: string | undefined;
 	}
 >;
 

packages/bits-ui/src/lib/bits/date-range-field/types.ts

@@ -27,34 +27,34 @@ export type DateRangeFieldPropsWithoutHTML = Expand<
 		 * The value of the date field.
 		 * You can bind this to a `DateValue` object to programmatically control the value.
 		 */
-		value?: DateRange;
+		value?: DateRange | undefined;
 
 		/**
 		 * A callback function called when the value changes.
 		 */
-		onValueChange?: OnChangeFn<DateRange | undefined>;
+		onValueChange?: OnChangeFn<DateRange | undefined> | undefined;
 
 		/**
 		 * The placeholder date used to start the field.
 		 */
-		placeholder?: DateValue;
+		placeholder?: DateValue | undefined;
 
 		/**
 		 * A callback function called when the placeholder changes.
 		 */
-		onPlaceholderChange?: OnChangeFn<DateValue>;
+		onPlaceholderChange?: OnChangeFn<DateValue> | undefined;
 
 		/**
 		 * The id of the validation message element which is used to apply the
 		 * appropriate `aria-describedby` attribute to the input.
 		 */
-		validationId?: string;
+		validationId?: string | undefined;
 
 		/**
 		 * The id of the description element which is used to describe the input.
 		 * This is used to apply the appropriate `aria-describedby` attribute to the input.
 		 */
-		descriptionId?: string;
+		descriptionId?: string | undefined;
 	}
 >;