next: Date Field (#581)

package.json

@@ -26,7 +26,7 @@
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.2",
 		"prettier-plugin-tailwindcss": "0.5.13",
-		"svelte": "^5.0.0-next.157",
+		"svelte": "5.0.0-next.164",
 		"svelte-eslint-parser": "^0.34.1",
 		"wrangler": "^3.44.0"
 	},

packages/bits-ui/other/setupTest.ts

@@ -90,5 +90,10 @@ vi.mock("$app/stores", (): typeof stores => {
 // eslint-disable-next-line ts/no-require-imports
 globalThis.ResizeObserver = require("resize-observer-polyfill");
 Element.prototype.scrollIntoView = () => {};
-Element.prototype.hasPointerCapture = (() => {}) as any
+Element.prototype.hasPointerCapture = (() => {}) as any;
 
+// @ts-expect-error - shut it
+globalThis.window.CSS.supports = (property: string, value: string) => true;
+
+globalThis.document.elementsFromPoint = () => [];
+globalThis.document.elementFromPoint = () => null;

packages/bits-ui/package.json

@@ -45,7 +45,7 @@
 		"jsdom": "^24.0.0",
 		"publint": "^0.2.7",
 		"resize-observer-polyfill": "^1.5.1",
-		"svelte": "5.0.0-next.157",
+		"svelte": "5.0.0-next.164",
 		"svelte-check": "^3.6.9",
 		"tslib": "^2.6.2",
 		"typescript": "^5.3.3",

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

@@ -94,10 +94,6 @@ class CheckboxInputState {
 
 	constructor(root: CheckboxRootState) {
 		this.root = root;
-
-		$effect(() => {
-			console.log("shouldRender", this.shouldRender);
-		});
 	}
 
 	props = $derived.by(

packages/bits-ui/src/lib/bits/date-field/components/date-field-input.svelte

@@ -1,35 +1,34 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
+	import { useDateFieldInput } from "../date-field.svelte.js";
 	import type { InputProps } from "../index.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	type $$Props = InputProps;
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		asChild,
+		children,
+		child,
+		...restProps
+	}: InputProps = $props();
 
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-	export let el: $$Props["el"] = undefined;
+	const inputState = useDateFieldInput({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 
-	const {
-		elements: { field },
-		states: { segmentContents },
-		ids,
-		getAttrs,
-	} = getCtx();
-
-	$: if (id) {
-		ids.field.set(id);
-	}
-
-	const attrs = getAttrs("input");
-
-	$: builder = $field;
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(mergeProps(restProps, inputState.props));
 </script>
 
 {#if asChild}
-	<slot {builder} segments={$segmentContents} />
+	{@render child?.({ props: mergedProps, segments: inputState.root.segmentContents })}
 {:else}
-	<div bind:this={ref} use:melt={builder} {...$$restProps}>
-		<slot {builder} segments={$segmentContents} />
+	<div {...mergedProps}>
+		{@render children?.({ segments: inputState.root.segmentContents })}
 	</div>
 {/if}

packages/bits-ui/src/lib/bits/date-field/components/date-field-label.svelte

@@ -1,34 +1,34 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
+	import { useDateFieldLabel } from "../date-field.svelte.js";
 	import type { LabelProps } from "../index.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	type $$Props = LabelProps;
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		asChild,
+		children,
+		child,
+		...restProps
+	}: LabelProps = $props();
 
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-	export let el: $$Props["el"] = undefined;
+	const labelState = useDateFieldLabel({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 
-	const {
-		elements: { label },
-		ids,
-		getAttrs,
-	} = getCtx();
-
-	if (id) {
-		ids.label.set(id);
-	}
-
-	const attrs = getAttrs("label");
-
-	$: builder = $label;
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(mergeProps(restProps, labelState.props));
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<span bind:this={ref} use:melt={builder} {...$$restProps}>
-		<slot {builder} />
-	</span>
+	<div {...mergedProps}>
+		{@render children?.()}
+	</div>
 {/if}

packages/bits-ui/src/lib/bits/date-field/components/date-field-segment.svelte

@@ -1,45 +1,37 @@
 <script lang="ts">
-	import { melt } from "@melt-ui/svelte";
-	import { getCtx } from "../ctx.js";
-	import type { SegmentEvents, SegmentProps } from "../index.js";
-	import { createDispatcher } from "$lib/internal/events.js";
+	import { useId } from "$lib/internal/useId.svelte.js";
+	import { box } from "svelte-toolbelt";
+	import { useDateFieldSegment } from "../date-field.svelte.js";
+	import type { SegmentProps } from "../index.js";
+	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	type $$Props = SegmentProps;
-	type $$Events = SegmentEvents;
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		asChild,
+		children,
+		child,
+		part,
+		...restProps
+	}: SegmentProps = $props();
 
-	export let asChild: $$Props["asChild"] = false;
-	export let id: $$Props["id"] = undefined;
-	export let part: $$Props["part"];
-	export let el: $$Props["el"] = undefined;
+	const segmentState = useDateFieldSegment(part, {
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+	});
 
-	const {
-		elements: { segment },
-		ids,
-		getAttrs,
-	} = getCtx();
-
-	$: if (id && part !== "literal") {
-		ids[part].set(id);
-	}
-
-	const attrs = getAttrs("segment");
-	const dispatch = createDispatcher();
-
-	$: builder = $segment(part);
-	$: Object.assign(builder, attrs);
+	const mergedProps = $derived(
+		mergeProps(restProps, segmentState.props as Record<string, unknown>)
+	);
 </script>
 
 {#if asChild}
-	<slot {builder} />
+	{@render child?.({ props: mergedProps })}
 {:else}
-	<div
-		bind:this={ref}
-		use:melt={builder}
-		{...$$restProps}
-		on:m-click={dispatch}
-		on:m-focusout={dispatch}
-		on:m-keydown={dispatch}
-	>
-		<slot {builder} />
-	</div>
+	<span {...mergedProps}>
+		{@render children?.()}
+	</span>
 {/if}