bits-ui 1.7.0 → 2.1.0

package/dist/bits/aspect-ratio/components/aspect-ratio.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AspectRatioRootProps } from "../types.js";
 	import { useAspectRatioRoot } from "../aspect-ratio.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		ratio = 1,
 		children,
 		child,

package/dist/bits/avatar/avatar.svelte.js

@@ -1,5 +1,5 @@
 import { untrack } from "svelte";
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 const AVATAR_ROOT_ATTR = "data-avatar-root";
 const AVATAR_IMAGE_ATTR = "data-avatar-image";
@@ -9,7 +9,6 @@ class AvatarRootState {
     constructor(opts) {
         this.opts = opts;
         this.loadImage = this.loadImage.bind(this);
-        useRefById(opts);
     }
     loadImage(src, crossorigin, referrerPolicy) {
         if (this.opts.loadingStatus.current === "loaded")
@@ -38,6 +37,7 @@ class AvatarRootState {
         id: this.opts.id.current,
         [AVATAR_ROOT_ATTR]: "",
         "data-status": this.opts.loadingStatus.current,
+        ...attachRef(this.opts.ref),
     }));
 }
 class AvatarImageState {
@@ -46,7 +46,6 @@ class AvatarImageState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         $effect.pre(() => {
             if (!this.opts.src.current) {
                 this.root.opts.loadingStatus.current = "error";
@@ -67,6 +66,7 @@ class AvatarImageState {
         src: this.opts.src.current,
         crossorigin: this.opts.crossOrigin.current,
         referrerpolicy: this.opts.referrerPolicy.current,
+        ...attachRef(this.opts.ref),
     }));
 }
 class AvatarFallbackState {
@@ -75,13 +75,13 @@ class AvatarFallbackState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     style = $derived.by(() => this.root.opts.loadingStatus.current === "loaded" ? { display: "none" } : undefined);
     props = $derived.by(() => ({
         style: this.style,
         "data-status": this.root.opts.loadingStatus.current,
         [AVATAR_FALLBACK_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 const AvatarRootContext = new Context("Avatar.Root");

package/dist/bits/avatar/components/avatar-fallback.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AvatarFallbackProps } from "../types.js";
 	import { useAvatarFallback } from "../avatar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: AvatarFallbackProps = $props();

package/dist/bits/avatar/components/avatar-image.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AvatarImageProps } from "../types.js";
 	import { useAvatarImage } from "../avatar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		src,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		crossorigin = undefined,
 		referrerpolicy = undefined,

package/dist/bits/avatar/components/avatar.svelte

@@ -2,7 +2,9 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AvatarRootProps } from "../types.js";
 	import { useAvatarRoot } from "../avatar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		delayMs = 0,
@@ -10,7 +12,7 @@
 		onLoadingStatusChange,
 		child,
 		children,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: AvatarRootProps = $props();

package/dist/bits/button/components/button.svelte

@@ -6,7 +6,7 @@
 		type,
 		children,
 		disabled = false,
-		ref = $bindable(),
+		ref = $bindable(null),
 		...restProps
 	}: ButtonRootProps = $props();
 </script>

package/dist/bits/calendar/calendar.svelte.d.ts

@@ -38,6 +38,7 @@ type CalendarRootStateProps = WithRefProps<WritableBoxedValues<{
     defaultPlaceholder: DateValue;
 }>;
 export declare class CalendarRootState {
+    #private;
     readonly opts: CalendarRootStateProps;
     months: Month<DateValue>[];
     visibleMonths: DateValue[];
@@ -101,7 +102,6 @@ export declare class CalendarHeadingState {
     headingValue: string;
     constructor(opts: CalendarHeadingStateProps, root: CalendarRootState | RangeCalendarRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly "aria-hidden": "true" | undefined;
         readonly "data-disabled": "" | undefined;
@@ -198,7 +198,6 @@ export declare class CalendarNextButtonState {
     constructor(opts: CalendarNextButtonStateProps, root: CalendarRootState | RangeCalendarRootState);
     onclick(_: BitsMouseEvent): void;
     props: {
-        readonly [x: string]: string | boolean | ((_: BitsMouseEvent) => void) | undefined;
         readonly id: string;
         readonly role: "button";
         readonly type: "button";
@@ -217,7 +216,6 @@ export declare class CalendarPrevButtonState {
     constructor(opts: CalendarPrevButtonStateProps, root: CalendarRootState | RangeCalendarRootState);
     onclick(_: BitsMouseEvent): void;
     props: {
-        readonly [x: string]: string | boolean | ((_: BitsMouseEvent) => void) | undefined;
         readonly id: string;
         readonly role: "button";
         readonly type: "button";
@@ -234,7 +232,6 @@ export declare class CalendarGridState {
     readonly root: CalendarRootState | RangeCalendarRootState;
     constructor(opts: CalendarGridStateProps, root: CalendarRootState | RangeCalendarRootState);
     props: {
-        readonly [x: string]: string | -1 | undefined;
         readonly id: string;
         readonly tabindex: -1;
         readonly role: "grid";
@@ -250,7 +247,6 @@ export declare class CalendarGridBodyState {
     readonly root: CalendarRootState | RangeCalendarRootState;
     constructor(opts: CalendarGridBodyStateProps, root: CalendarRootState | RangeCalendarRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
@@ -262,7 +258,6 @@ export declare class CalendarGridHeadState {
     readonly root: CalendarRootState | RangeCalendarRootState;
     constructor(opts: CalendarGridHeadStateProps, root: CalendarRootState | RangeCalendarRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
@@ -274,7 +269,6 @@ export declare class CalendarGridRowState {
     readonly root: CalendarRootState | RangeCalendarRootState;
     constructor(opts: CalendarGridRowStateProps, root: CalendarRootState | RangeCalendarRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
@@ -286,7 +280,6 @@ export declare class CalendarHeadCellState {
     readonly root: CalendarRootState | RangeCalendarRootState;
     constructor(opts: CalendarHeadCellStateProps, root: CalendarRootState | RangeCalendarRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;
@@ -298,7 +291,6 @@ export declare class CalendarHeaderState {
     readonly root: CalendarRootState | RangeCalendarRootState;
     constructor(opts: CalendarHeaderStateProps, root: CalendarRootState | RangeCalendarRootState);
     props: {
-        readonly [x: string]: string | undefined;
         readonly id: string;
         readonly "data-disabled": "" | undefined;
         readonly "data-readonly": "" | undefined;

package/dist/bits/calendar/calendar.svelte.js

@@ -1,7 +1,7 @@
 import { getLocalTimeZone, isSameDay, isSameMonth, isToday, } from "@internationalized/date";
 import { DEV } from "esm-env";
 import { untrack } from "svelte";
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { getAriaDisabled, getAriaHidden, getAriaReadonly, getAriaSelected, getDataDisabled, getDataReadonly, getDataSelected, getDataUnavailable, } from "../../internal/attrs.js";
 import { useId } from "../../internal/use-id.js";
@@ -36,7 +36,6 @@ export class CalendarRootState {
         this.handleSingleUpdate = this.handleSingleUpdate.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
         this.getBitsAttr = this.getBitsAttr.bind(this);
-        useRefById(opts);
         this.months = createMonths({
             dateObj: this.opts.placeholder.current,
             weekStartsOn: this.opts.weekStartsOn.current,
@@ -44,31 +43,9 @@ export class CalendarRootState {
             fixedWeeks: this.opts.fixedWeeks.current,
             numberOfMonths: this.opts.numberOfMonths.current,
         });
-        $effect(() => {
-            const initialFocus = untrack(() => this.opts.initialFocus.current);
-            if (initialFocus) {
-                // focus the first `data-focused` day node
-                const firstFocusedDay = this.opts.ref.current?.querySelector(`[data-focused]`);
-                if (firstFocusedDay) {
-                    firstFocusedDay.focus();
-                }
-            }
-        });
-        $effect(() => {
-            if (!this.opts.ref.current)
-                return;
-            const removeHeading = createAccessibleHeading({
-                calendarNode: this.opts.ref.current,
-                label: this.fullCalendarLabel,
-                accessibleHeadingId: this.accessibleHeadingId,
-            });
-            return removeHeading;
-        });
-        $effect(() => {
-            if (this.formatter.getLocale() === this.opts.locale.current)
-                return;
-            this.formatter.setLocale(this.opts.locale.current);
-        });
+        this.#setupInitialFocusEffect();
+        this.#setupAccessibleHeadingEffect();
+        this.#setupFormatterEffect();
         /**
          * Updates the displayed months based on changes in the placeholder value.
          */
@@ -146,6 +123,37 @@ export class CalendarRootState {
             weekdayFormat: this.opts.weekdayFormat.current,
         });
     });
+    #setupInitialFocusEffect() {
+        $effect(() => {
+            const initialFocus = untrack(() => this.opts.initialFocus.current);
+            if (initialFocus) {
+                // focus the first `data-focused` day node
+                const firstFocusedDay = this.opts.ref.current?.querySelector(`[data-focused]`);
+                if (firstFocusedDay) {
+                    firstFocusedDay.focus();
+                }
+            }
+        });
+    }
+    #setupAccessibleHeadingEffect() {
+        $effect(() => {
+            if (!this.opts.ref.current)
+                return;
+            const removeHeading = createAccessibleHeading({
+                calendarNode: this.opts.ref.current,
+                label: this.fullCalendarLabel,
+                accessibleHeadingId: this.accessibleHeadingId,
+            });
+            return removeHeading;
+        });
+    }
+    #setupFormatterEffect() {
+        $effect(() => {
+            if (this.formatter.getLocale() === this.opts.locale.current)
+                return;
+            this.formatter.setLocale(this.opts.locale.current);
+        });
+    }
     /**
      * Navigates to the next page of the calendar.
      */
@@ -365,6 +373,7 @@ export class CalendarRootState {
         [this.getBitsAttr("root")]: "",
         //
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarHeadingState {
@@ -374,7 +383,6 @@ export class CalendarHeadingState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -382,6 +390,7 @@ export class CalendarHeadingState {
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("heading")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class CalendarCellState {
@@ -404,7 +413,6 @@ class CalendarCellState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     snippetProps = $derived.by(() => ({
         disabled: this.isDisabled,
@@ -435,6 +443,7 @@ class CalendarCellState {
         "aria-disabled": getAriaDisabled(this.ariaDisabled),
         ...this.sharedDataAttrs,
         [this.root.getBitsAttr("cell")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class CalendarDayState {
@@ -444,7 +453,6 @@ class CalendarDayState {
         this.opts = opts;
         this.cell = cell;
         this.onclick = this.onclick.bind(this);
-        useRefById(opts);
     }
     #tabindex = $derived.by(() => (this.cell.isOutsideMonth && this.cell.root.opts.disableDaysOutsideMonth.current) ||
         this.cell.isDisabled
@@ -475,6 +483,7 @@ class CalendarDayState {
         "data-bits-day": "",
         //
         onclick: this.onclick,
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarNextButtonState {
@@ -485,7 +494,6 @@ export class CalendarNextButtonState {
         this.opts = opts;
         this.root = root;
         this.onclick = this.onclick.bind(this);
-        useRefById(opts);
     }
     onclick(_) {
         if (this.isDisabled)
@@ -503,6 +511,7 @@ export class CalendarNextButtonState {
         [this.root.getBitsAttr("next-button")]: "",
         //
         onclick: this.onclick,
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarPrevButtonState {
@@ -513,7 +522,6 @@ export class CalendarPrevButtonState {
         this.opts = opts;
         this.root = root;
         this.onclick = this.onclick.bind(this);
-        useRefById(opts);
     }
     onclick(_) {
         if (this.isDisabled)
@@ -531,6 +539,7 @@ export class CalendarPrevButtonState {
         [this.root.getBitsAttr("prev-button")]: "",
         //
         onclick: this.onclick,
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarGridState {
@@ -539,7 +548,6 @@ export class CalendarGridState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -550,6 +558,7 @@ export class CalendarGridState {
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         [this.root.getBitsAttr("grid")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarGridBodyState {
@@ -558,13 +567,13 @@ export class CalendarGridBodyState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-body")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarGridHeadState {
@@ -573,13 +582,13 @@ export class CalendarGridHeadState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-head")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarGridRowState {
@@ -588,13 +597,13 @@ export class CalendarGridRowState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-row")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarHeadCellState {
@@ -603,13 +612,13 @@ export class CalendarHeadCellState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("head-cell")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export class CalendarHeaderState {
@@ -618,13 +627,13 @@ export class CalendarHeaderState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("header")]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export const CalendarRootContext = new Context("Calendar.Root | RangeCalender.Root");

package/dist/bits/calendar/components/calendar-cell.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useCalendarCell } from "../calendar.svelte.js";
 	import type { CalendarCellProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		date,
 		month,
 		...restProps

package/dist/bits/calendar/components/calendar-day.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useCalendarDay } from "../calendar.svelte.js";
 	import type { CalendarDayProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: CalendarDayProps = $props();
 

package/dist/bits/calendar/components/calendar-grid-body.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CalendarGridBodyProps } from "../types.js";
 	import { useCalendarGridBody } from "../calendar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: CalendarGridBodyProps = $props();
 

package/dist/bits/calendar/components/calendar-grid-head.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useCalendarGridHead } from "../calendar.svelte.js";
 	import type { CalendarGridHeadProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: CalendarGridHeadProps = $props();
 

package/dist/bits/calendar/components/calendar-grid-row.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useCalendarGridRow } from "../calendar.svelte.js";
 	import type { CalendarGridRowProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: CalendarGridRowProps = $props();
 

package/dist/bits/calendar/components/calendar-grid.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useCalendarGrid } from "../calendar.svelte.js";
 	import type { CalendarGridProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: CalendarGridProps = $props();
 

package/dist/bits/calendar/components/calendar-head-cell.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useCalendarHeadCell } from "../calendar.svelte.js";
 	import type { CalendarHeadCellProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: CalendarHeadCellProps = $props();
 

package/dist/bits/calendar/components/calendar-header.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useCalendarHeader } from "../calendar.svelte.js";
 	import type { CalendarHeaderProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: CalendarHeaderProps = $props();
 

package/dist/bits/calendar/components/calendar-heading.svelte

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { CalendarHeadingProps } from "../types.js";
 	import { useCalendarHeading } from "../calendar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		...restProps
 	}: CalendarHeadingProps = $props();
 

package/dist/bits/calendar/components/calendar-next-button.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useCalendarNextButton } from "../calendar.svelte.js";
 	import type { CalendarNextButtonProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: CalendarNextButtonProps = $props();