multiple calendar types

src/lib/bits/calendar/_types.ts

@@ -8,21 +8,47 @@ import type { AsChild, OnChangeFn } from "$lib/internal";
 import type { DateValue } from "@internationalized/date";
 import type { CreateCalendarProps } from "@melt-ui/svelte";
 
-type Props = Expand<
-	Omit<
-		CreateCalendarProps,
-		| "placeholder"
-		| "defaultPlaceholder"
-		| "value"
-		| "defaultValue"
-		| "onPlaceholderChange"
-		| "onValueChange"
-		| "ids"
-	> & {
+type OmitCalendarProps<T> = Omit<
+	T,
+	| "placeholder"
+	| "defaultPlaceholder"
+	| "value"
+	| "defaultValue"
+	| "onPlaceholderChange"
+	| "onValueChange"
+	| "ids"
+>;
+
+type Props<Multiple extends boolean> = Expand<
+	OmitCalendarProps<CreateCalendarProps<Multiple>> & {
+		/**
+		 * The selected date value. This updates as the user selects
+		 * date(s) in the calendar.
+		 *
+		 * You can bind this to a value to programmatically control the
+		 * value state.
+		 */
+		value?: CreateCalendarProps<Multiple>["defaultValue"];
+
+		/**
+		 * A callback function called when the value changes.
+		 */
+		onValueChange?: OnChangeFn<CreateCalendarProps<Multiple>["defaultValue"]>;
+
+		/**
+		 * The placeholder date, used to display the calendar when no
+		 * date is selected. This updates as the user navigates
+		 * the calendar.
+		 *
+		 * You can bind this to a value to programmatically control the
+		 * placeholder state.
+		 */
 		placeholder?: DateValue;
-		value?: DateValue;
+
+		/**
+		 * A callback function called when the placeholder changes.
+		 */
 		onPlaceholderChange?: OnChangeFn<DateValue>;
-		onValueChange?: OnChangeFn<DateValue | undefined>;
 	} & AsChild
 >;
 

src/lib/bits/calendar/components/calendar.svelte

@@ -3,7 +3,8 @@
 	import { setCtx, getAttrs } from "../ctx.js";
 	import type { Props } from "../types.js";
 
-	type $$Props = Props;
+	type Multiple = $$Generic<boolean>;
+	type $$Props = Props<Multiple>;
 
 	export let placeholder: $$Props["placeholder"] = undefined;
 	export let onPlaceholderChange: $$Props["onPlaceholderChange"] = undefined;
@@ -22,6 +23,7 @@
 	export let fixedWeeks: $$Props["fixedWeeks"] = undefined;
 	export let calendarLabel: $$Props["calendarLabel"] = undefined;
 	export let weekdayFormat: $$Props["weekdayFormat"] = undefined;
+	export let multiple: $$Props["multiple"] = false as Multiple;
 	export let asChild: $$Props["asChild"] = false;
 	export let id: $$Props["id"] = undefined;
 
@@ -51,14 +53,15 @@
 		fixedWeeks,
 		calendarLabel,
 		weekdayFormat,
+		multiple,
 		onPlaceholderChange: ({ next }) => {
 			if (placeholder !== next) {
 				onPlaceholderChange?.(next);
 				placeholder = next;
 			}
 			return next;
 		},
-		onValueChange: ({ next }) => {
+		onValueChange: ({ next }: { next: $$Props["value"] }) => {
 			if (value !== next) {
 				onValueChange?.(next);
 				value = next;

src/lib/bits/calendar/ctx.ts

@@ -26,7 +26,7 @@ export const getAttrs = createBitAttrs(NAME, PARTS);
 
 type GetReturn = CalendarReturn;
 
-export function setCtx(props: CreateCalendarProps) {
+export function setCtx<Multiple extends boolean>(props: CreateCalendarProps<Multiple>) {
 	const calendar = createCalendar(removeUndefined(props));
 	setContext(NAME, calendar);
 	return {

src/lib/bits/calendar/types.ts

@@ -8,7 +8,8 @@ import type {
 } from "svelte/elements";
 import type * as I from "./_types.js";
 
-type Props = I.Props & Omit<HTMLDivAttributes, "placeholder">;
+type Props<Multiple extends boolean = false> = I.Props<Multiple> &
+	Omit<HTMLDivAttributes, "placeholder">;
 
 type PrevButtonProps = I.PrevButtonProps & HTMLButtonAttributes;