next: Range Calendar (#597)

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

@@ -12,7 +12,7 @@ import type {
 	WithAsChild,
 	Without,
 } from "$lib/internal/types.js";
-import type { Matcher, Month } from "$lib/shared/date/types.js";
+import type { DateMatcher, Month } from "$lib/shared/date/types.js";
 import type { DateValue } from "@internationalized/date";
 import type { Snippet } from "svelte";
 
@@ -114,7 +114,7 @@ type CalendarBaseRootPropsWithoutHTML = Omit<
 			 * `[data-disabled]` - applied to disabled dates
 			 *
 			 */
-			isDateDisabled?: Matcher;
+			isDateDisabled?: DateMatcher;
 
 			/**
 			 * Dates matching the provided matchers are marked as "unavailable." Unlike disabled dates,
@@ -128,7 +128,7 @@ type CalendarBaseRootPropsWithoutHTML = Omit<
 			 * `[data-unavailable]` - applied to unavailable dates
 			 *
 			 */
-			isDateUnavailable?: Matcher;
+			isDateUnavailable?: DateMatcher;
 
 			/**
 			 * Display 6 weeks per month, regardless the month's number of weeks.

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

@@ -52,7 +52,7 @@ import { DATE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from "$lib/shared/date/field/p
 import { onDestroy, onMount, untrack } from "svelte";
 import { createContext } from "$lib/internal/createContext.js";
 import { useId } from "$lib/internal/useId.svelte.js";
-import type { Granularity, Matcher } from "$lib/shared/date/types.js";
+import type { Granularity, DateMatcher } from "$lib/shared/date/types.js";
 import type { DateRangeFieldRootState } from "../date-range-field/date-range-field.svelte.js";
 
 export type DateFieldRootStateProps = WritableBoxedValues<{
@@ -61,7 +61,7 @@ export type DateFieldRootStateProps = WritableBoxedValues<{
 }> &
 	ReadableBoxedValues<{
 		readonlySegments: SegmentPart[];
-		isDateUnavailable: Matcher | undefined;
+		isDateUnavailable: DateMatcher | undefined;
 		minValue: DateValue | undefined;
 		maxValue: DateValue | undefined;
 		disabled: boolean;

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

@@ -6,7 +6,7 @@ import type {
 	Without,
 } from "$lib/internal/types.js";
 import type { EditableSegmentPart } from "$lib/shared/date/field/types.js";
-import type { Granularity, Matcher } from "$lib/shared/date/types.js";
+import type { Granularity, DateMatcher } from "$lib/shared/date/types.js";
 import type { DateValue } from "@internationalized/date";
 import type { SegmentPart } from "@melt-ui/svelte";
 import type { Snippet } from "svelte";
@@ -42,7 +42,7 @@ export type DateFieldRootPropsWithoutHTML = {
 	 * A function that returns true if the given date is unavailable,
 	 * where if selected, the date field will be marked as invalid.
 	 */
-	isDateUnavailable?: Matcher;
+	isDateUnavailable?: DateMatcher;
 
 	/**
 	 * The minimum acceptable date. When provided, the date field

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

@@ -2,7 +2,7 @@ import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box
 import { useId } from "$lib/internal/useId.svelte.js";
 import { removeDescriptionElement } from "$lib/shared/date/field/helpers.js";
 import { createFormatter, type Formatter } from "$lib/shared/date/formatter.js";
-import type { Granularity, Matcher } from "$lib/shared/date/types.js";
+import type { Granularity, DateMatcher } from "$lib/shared/date/types.js";
 import type { DateRange, SegmentPart } from "$lib/shared/index.js";
 import type { DateValue } from "@internationalized/date";
 import { onDestroy, untrack } from "svelte";
@@ -21,7 +21,7 @@ type DateRangeFieldRootStateProps = WithRefProps<
 	}> &
 		ReadableBoxedValues<{
 			readonlySegments: SegmentPart[];
-			isDateUnavailable: Matcher | undefined;
+			isDateUnavailable: DateMatcher | undefined;
 			minValue: DateValue | undefined;
 			maxValue: DateValue | undefined;
 			disabled: boolean;

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

@@ -5,7 +5,7 @@ import type {
 	WithAsChild,
 	Without,
 } from "$lib/internal/types.js";
-import type { Granularity, Matcher } from "$lib/shared/date/types.js";
+import type { Granularity, DateMatcher } from "$lib/shared/date/types.js";
 import type { DateRange, EditableSegmentPart, SegmentPart } from "$lib/shared/index.js";
 import type { DateFieldSegmentProps, DateFieldSegmentPropsWithoutHTML } from "$lib/types.js";
 import type { DateValue } from "@internationalized/date";
@@ -41,7 +41,7 @@ export type DateRangeFieldRootPropsWithoutHTML = WithAsChild<{
 	 * A function that returns true if the given date is unavailable,
 	 * where if selected, the date field will be marked as invalid.
 	 */
-	isDateUnavailable?: Matcher;
+	isDateUnavailable?: DateMatcher;
 
 	/**
 	 * The minimum acceptable date. When provided, the date field

packages/bits-ui/src/lib/bits/range-calendar/components/range-calendar-cell.svelte

@@ -1,29 +1,38 @@
 <script lang="ts">
-	import { getCtx } from "../ctx.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
 	import type { CellProps } from "../index.js";
+	import { useRangeCalendarCell } from "../range-calendar.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	type $$Props = CellProps;
+	let {
+		asChild,
+		children,
+		child,
+		id = useId(),
+		ref = $bindable(null),
+		date,
+		month,
+		...restProps
+	}: CellProps = $props();
 
-	export let date: $$Props["date"];
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
+	const cellState = useRangeCalendarCell({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		date: box.with(() => date),
+		month: box.with(() => month),
+	});
 
-	const {
-		helpers: { isDateDisabled, isDateUnavailable },
-		getAttrs,
-	} = getCtx();
-
-	$: attrs = {
-		...getAttrs("cell"),
-		"aria-disabled": $isDateDisabled(date) || $isDateUnavailable(date),
-		role: "gridcell",
-	};
+	const mergedProps = $derived(mergeProps(restProps, cellState.props));
 </script>
 
 {#if asChild}
-	<slot {attrs} />
+	{@render child?.({ props: mergedProps, ...cellState.snippetProps })}
 {:else}
-	<td bind:this={ref} {...$$restProps} {...attrs}>
-		<slot {attrs} />
+	<td {...mergedProps}>
+		{@render children?.(cellState.snippetProps)}
 	</td>
 {/if}

packages/bits-ui/src/lib/bits/range-calendar/components/range-calendar-day.svelte

@@ -1,45 +1,34 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { DayEvents, DayProps } from "../index.js";
-	import { createDispatcher } from "$lib/internal/events.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
+	import type { DayProps } from "../index.js";
+	import { useRangeCalendarDay } from "../range-calendar.svelte.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	type $$Props = DayProps;
-	type $$Events = DayEvents;
+	let {
+		asChild,
+		children,
+		child,
+		id = useId(),
+		ref = $bindable(null),
+		...restProps
+	}: DayProps = $props();
 
-	export let date: $$Props["date"];
-	export let month: $$Props["month"];
-	export let asChild: $$Props["asChild"] = false;
-	export let el: $$Props["el"] = undefined;
+	const dayState = useRangeCalendarDay({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 
-	const {
-		elements: { cell },
-		helpers: { isDateDisabled, isDateUnavailable },
-		getAttrs,
-	} = getCtx();
-
-	const attrs = getAttrs("day");
-	const dispatch = createDispatcher();
-
-	$: builder = $cell(date, month);
-	$: Object.assign(builder, attrs);
-	$: disabled = $isDateDisabled(date);
-	$: unavailable = $isDateUnavailable(date);
+	const mergedProps = $derived(mergeProps(restProps, dayState.props));
 </script>
 
 {#if asChild}
-	<slot {builder} {disabled} {unavailable} />
+	{@render child?.({ props: mergedProps, ...dayState.snippetProps })}
 {:else}
-	<div
-		bind:this={ref}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-click={dispatch}
-		on:m-focusin={dispatch}
-		on:m-mouseenter={dispatch}
-	>
-		<slot {builder} {disabled} {unavailable}>
-			{date.day}
-		</slot>
+	<div {...mergedProps}>
+		{@render children?.(dayState.snippetProps)}
 	</div>
 {/if}