bits-ui 1.7.0 → 2.1.0

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

@@ -7,51 +7,72 @@ type AccordionBaseStateProps = WithRefProps<ReadableBoxedValues<{
     orientation: Orientation;
     loop: boolean;
 }>>;
-declare class AccordionBaseState {
+type AccordionSingleStateProps = AccordionBaseStateProps & WritableBoxedValues<{
+    value: string;
+}>;
+type AccordionMultiStateProps = AccordionBaseStateProps & WritableBoxedValues<{
+    value: string[];
+}>;
+type AccordionState = AccordionSingleState | AccordionMultiState;
+type AccordionItemStateProps = WithRefProps<ReadableBoxedValues<{
+    value: string;
+    disabled: boolean;
+}> & {
+    rootState: AccordionState;
+}>;
+type AccordionTriggerStateProps = WithRefProps<ReadableBoxedValues<{
+    disabled: boolean | null | undefined;
+}>>;
+type AccordionContentStateProps = WithRefProps<ReadableBoxedValues<{
+    forceMount: boolean;
+}>>;
+type AccordionHeaderStateProps = WithRefProps<ReadableBoxedValues<{
+    level: 1 | 2 | 3 | 4 | 5 | 6;
+}>>;
+type InitAccordionProps = WithRefProps<{
+    type: "single" | "multiple";
+    value: Box<string> | Box<string[]>;
+} & ReadableBoxedValues<{
+    disabled: boolean;
+    orientation: Orientation;
+    loop: boolean;
+}>>;
+declare abstract class AccordionBaseState {
     readonly opts: AccordionBaseStateProps;
-    rovingFocusGroup: UseRovingFocusReturn;
+    readonly rovingFocusGroup: UseRovingFocusReturn;
+    abstract readonly isMulti: boolean;
     constructor(opts: AccordionBaseStateProps);
-    props: {
+    abstract includesItem(item: string): boolean;
+    abstract toggleItem(item: string): void;
+    readonly props: {
         readonly id: string;
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-disabled": "" | undefined;
         readonly "data-accordion-root": "";
     };
 }
-type AccordionSingleStateProps = AccordionBaseStateProps & WritableBoxedValues<{
-    value: string;
-}>;
 export declare class AccordionSingleState extends AccordionBaseState {
     readonly opts: AccordionSingleStateProps;
-    isMulti: false;
+    readonly isMulti: false;
     constructor(opts: AccordionSingleStateProps);
-    includesItem(item: string): boolean;
-    toggleItem(item: string): void;
+    includesItem: (item: string) => boolean;
+    toggleItem: (item: string) => void;
 }
-type AccordionMultiStateProps = AccordionBaseStateProps & WritableBoxedValues<{
-    value: string[];
-}>;
 export declare class AccordionMultiState extends AccordionBaseState {
     #private;
-    isMulti: true;
+    readonly isMulti: true;
     constructor(props: AccordionMultiStateProps);
-    includesItem(item: string): boolean;
-    toggleItem(item: string): void;
+    includesItem: (item: string) => boolean;
+    toggleItem: (item: string) => void;
 }
-type AccordionItemStateProps = WithRefProps<ReadableBoxedValues<{
-    value: string;
-    disabled: boolean;
-}> & {
-    rootState: AccordionState;
-}>;
 export declare class AccordionItemState {
     readonly opts: AccordionItemStateProps;
-    root: AccordionState;
-    isActive: boolean;
-    isDisabled: boolean;
+    readonly root: AccordionState;
+    readonly isActive: boolean;
+    readonly isDisabled: boolean;
     constructor(opts: AccordionItemStateProps);
-    updateValue(): void;
-    props: {
+    updateValue: () => void;
+    readonly props: {
         readonly id: string;
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
@@ -59,17 +80,14 @@ export declare class AccordionItemState {
         readonly "data-accordion-item": "";
     };
 }
-type AccordionTriggerStateProps = WithRefProps<ReadableBoxedValues<{
-    disabled: boolean | null | undefined;
-}>>;
 declare class AccordionTriggerState {
     #private;
     readonly opts: AccordionTriggerStateProps;
     readonly itemState: AccordionItemState;
     constructor(opts: AccordionTriggerStateProps, itemState: AccordionItemState);
-    onclick(e: BitsMouseEvent): void;
-    onkeydown(e: BitsKeyboardEvent): void;
-    props: {
+    onclick: (e: BitsMouseEvent) => void;
+    onkeydown: (e: BitsKeyboardEvent) => void;
+    readonly props: {
         readonly id: string;
         readonly disabled: boolean;
         readonly "aria-expanded": "true" | "false";
@@ -83,19 +101,16 @@ declare class AccordionTriggerState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
-type AccordionContentStateProps = WithRefProps<ReadableBoxedValues<{
-    forceMount: boolean;
-}>>;
 declare class AccordionContentState {
     #private;
     readonly opts: AccordionContentStateProps;
     readonly item: AccordionItemState;
-    present: boolean;
+    readonly present: boolean;
     constructor(opts: AccordionContentStateProps, item: AccordionItemState);
-    snippetProps: {
+    readonly snippetProps: {
         open: boolean;
     };
-    props: {
+    readonly props: {
         readonly id: string;
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
@@ -107,32 +122,20 @@ declare class AccordionContentState {
         };
     };
 }
-type AccordionHeaderStateProps = WithRefProps<ReadableBoxedValues<{
-    level: 1 | 2 | 3 | 4 | 5 | 6;
-}>>;
 declare class AccordionHeaderState {
     readonly opts: AccordionHeaderStateProps;
     readonly item: AccordionItemState;
     constructor(opts: AccordionHeaderStateProps, item: AccordionItemState);
-    props: {
+    readonly props: {
         readonly id: string;
         readonly role: "heading";
-        readonly "aria-level": 1 | 2 | 3 | 4 | 5 | 6;
-        readonly "data-heading-level": 1 | 2 | 3 | 4 | 5 | 6;
+        readonly "aria-level": 1 | 2 | 3 | 4 | 6 | 5;
+        readonly "data-heading-level": 1 | 2 | 3 | 4 | 6 | 5;
         readonly "data-state": "open" | "closed";
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-accordion-header": "";
     };
 }
-type AccordionState = AccordionSingleState | AccordionMultiState;
-type InitAccordionProps = WithRefProps<{
-    type: "single" | "multiple";
-    value: Box<string> | Box<string[]>;
-} & ReadableBoxedValues<{
-    disabled: boolean;
-    orientation: Orientation;
-    loop: boolean;
-}>>;
 export declare function useAccordionRoot(props: InitAccordionProps): AccordionState;
 export declare function useAccordionItem(props: Omit<AccordionItemStateProps, "rootState">): AccordionItemState;
 export declare function useAccordionTrigger(props: AccordionTriggerStateProps): AccordionTriggerState;

package/dist/bits/accordion/accordion.svelte.js

@@ -1,22 +1,25 @@
-import { afterTick, useRefById } from "svelte-toolbelt";
+import { afterTick, attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { getAriaDisabled, getAriaExpanded, getDataDisabled, getDataOpenClosed, getDataOrientation, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
-const ACCORDION_ROOT_ATTR = "data-accordion-root";
-const ACCORDION_TRIGGER_ATTR = "data-accordion-trigger";
-const ACCORDION_CONTENT_ATTR = "data-accordion-content";
-const ACCORDION_ITEM_ATTR = "data-accordion-item";
-const ACCORDION_HEADER_ATTR = "data-accordion-header";
+// Constants
+const ACCORDION_ATTRS = {
+    ROOT: "data-accordion-root",
+    TRIGGER: "data-accordion-trigger",
+    CONTENT: "data-accordion-content",
+    ITEM: "data-accordion-item",
+    HEADER: "data-accordion-header",
+};
+// Base class
 class AccordionBaseState {
     opts;
     rovingFocusGroup;
     constructor(opts) {
         this.opts = opts;
-        useRefById(this.opts);
         this.rovingFocusGroup = useRovingFocus({
-            rootNodeId: this.opts.id,
-            candidateAttr: ACCORDION_TRIGGER_ATTR,
+            rootNode: this.opts.ref,
+            candidateAttr: ACCORDION_ATTRS.TRIGGER,
             loop: this.opts.loop,
             orientation: this.opts.orientation,
         });
@@ -25,46 +28,39 @@ class AccordionBaseState {
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
-        [ACCORDION_ROOT_ATTR]: "",
+        [ACCORDION_ATTRS.ROOT]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
+// Single accordion
 export class AccordionSingleState extends AccordionBaseState {
     opts;
     isMulti = false;
     constructor(opts) {
         super(opts);
         this.opts = opts;
-        this.includesItem = this.includesItem.bind(this);
-        this.toggleItem = this.toggleItem.bind(this);
     }
-    includesItem(item) {
-        return this.opts.value.current === item;
-    }
-    toggleItem(item) {
+    includesItem = (item) => this.opts.value.current === item;
+    toggleItem = (item) => {
         this.opts.value.current = this.includesItem(item) ? "" : item;
-    }
+    };
 }
+// Multiple accordion
 export class AccordionMultiState extends AccordionBaseState {
     #value;
     isMulti = true;
     constructor(props) {
         super(props);
         this.#value = props.value;
-        this.includesItem = this.includesItem.bind(this);
-        this.toggleItem = this.toggleItem.bind(this);
-    }
-    includesItem(item) {
-        return this.#value.current.includes(item);
-    }
-    toggleItem(item) {
-        if (this.includesItem(item)) {
-            this.#value.current = this.#value.current.filter((v) => v !== item);
-        }
-        else {
-            this.#value.current = [...this.#value.current, item];
-        }
     }
+    includesItem = (item) => this.#value.current.includes(item);
+    toggleItem = (item) => {
+        this.#value.current = this.includesItem(item)
+            ? this.#value.current.filter((v) => v !== item)
+            : [...this.#value.current, item];
+    };
 }
+// Item state
 export class AccordionItemState {
     opts;
     root;
@@ -73,23 +69,20 @@ export class AccordionItemState {
     constructor(opts) {
         this.opts = opts;
         this.root = opts.rootState;
-        this.updateValue = this.updateValue.bind(this);
-        useRefById({
-            ...opts,
-            deps: () => this.isActive,
-        });
     }
-    updateValue() {
+    updateValue = () => {
         this.root.toggleItem(this.opts.value.current);
-    }
+    };
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-state": getDataOpenClosed(this.isActive),
         "data-disabled": getDataDisabled(this.isDisabled),
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
-        [ACCORDION_ITEM_ATTR]: "",
+        [ACCORDION_ATTRS.ITEM]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
+// Trigger state
 class AccordionTriggerState {
     opts;
     itemState;
@@ -101,18 +94,15 @@ class AccordionTriggerState {
         this.opts = opts;
         this.itemState = itemState;
         this.#root = itemState.root;
-        this.onkeydown = this.onkeydown.bind(this);
-        this.onclick = this.onclick.bind(this);
-        useRefById(opts);
     }
-    onclick(e) {
-        if (this.#isDisabled)
+    onclick = (e) => {
+        if (this.#isDisabled || e.button !== 0) {
+            e.preventDefault();
             return;
-        if (e.button !== 0)
-            return e.preventDefault();
+        }
         this.itemState.updateValue();
-    }
-    onkeydown(e) {
+    };
+    onkeydown = (e) => {
         if (this.#isDisabled)
             return;
         if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
@@ -121,7 +111,7 @@ class AccordionTriggerState {
             return;
         }
         this.#root.rovingFocusGroup.handleKeydown(this.opts.ref.current, e);
-    }
+    };
     props = $derived.by(() => ({
         id: this.opts.id.current,
         disabled: this.#isDisabled,
@@ -130,82 +120,80 @@ class AccordionTriggerState {
         "data-disabled": getDataDisabled(this.#isDisabled),
         "data-state": getDataOpenClosed(this.itemState.isActive),
         "data-orientation": getDataOrientation(this.#root.opts.orientation.current),
-        [ACCORDION_TRIGGER_ATTR]: "",
+        [ACCORDION_ATTRS.TRIGGER]: "",
         tabindex: 0,
-        //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
+// Content state with improved animation handling
 class AccordionContentState {
     opts;
     item;
     #originalStyles = undefined;
     #isMountAnimationPrevented = false;
-    #width = $state(0);
-    #height = $state(0);
+    #dimensions = $state({ width: 0, height: 0 });
     present = $derived.by(() => this.opts.forceMount.current || this.item.isActive);
     constructor(opts, item) {
         this.opts = opts;
         this.item = item;
         this.#isMountAnimationPrevented = this.item.isActive;
-        useRefById(opts);
-        $effect.pre(() => {
+        // Prevent mount animations on initial render
+        $effect(() => {
             const rAF = requestAnimationFrame(() => {
                 this.#isMountAnimationPrevented = false;
             });
-            return () => {
-                cancelAnimationFrame(rAF);
-            };
+            return () => cancelAnimationFrame(rAF);
         });
-        watch([() => this.present, () => this.opts.ref.current], ([_, node]) => {
-            if (!node)
+        // Handle dimension updates
+        watch([() => this.present, () => this.opts.ref.current], this.#updateDimensions);
+    }
+    #updateDimensions = ([_, node]) => {
+        if (!node)
+            return;
+        afterTick(() => {
+            const element = this.opts.ref.current;
+            if (!element)
                 return;
-            afterTick(() => {
-                if (!this.opts.ref.current)
-                    return;
-                // get the dimensions of the element
-                this.#originalStyles = this.#originalStyles || {
-                    transitionDuration: node.style.transitionDuration,
-                    animationName: node.style.animationName,
-                };
-                // block any animations/transitions so the element renders at full dimensions
-                node.style.transitionDuration = "0s";
-                node.style.animationName = "none";
-                const rect = node.getBoundingClientRect();
-                this.#height = rect.height;
-                this.#width = rect.width;
-                // unblock any animations/transitions that were originally set if not the initial render
-                if (!this.#isMountAnimationPrevented) {
-                    const { animationName, transitionDuration } = this.#originalStyles;
-                    node.style.transitionDuration = transitionDuration;
-                    node.style.animationName = animationName;
-                }
-            });
+            // store original styles on first run
+            this.#originalStyles ??= {
+                transitionDuration: element.style.transitionDuration,
+                animationName: element.style.animationName,
+            };
+            // temporarily disable animations for measurement
+            element.style.transitionDuration = "0s";
+            element.style.animationName = "none";
+            const rect = element.getBoundingClientRect();
+            this.#dimensions = { width: rect.width, height: rect.height };
+            // restore animations if not initial mount
+            if (!this.#isMountAnimationPrevented && this.#originalStyles) {
+                element.style.transitionDuration = this.#originalStyles.transitionDuration;
+                element.style.animationName = this.#originalStyles.animationName;
+            }
         });
-    }
-    snippetProps = $derived.by(() => ({
-        open: this.item.isActive,
-    }));
+    };
+    snippetProps = $derived.by(() => ({ open: this.item.isActive }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-state": getDataOpenClosed(this.item.isActive),
         "data-disabled": getDataDisabled(this.item.isDisabled),
         "data-orientation": getDataOrientation(this.item.root.opts.orientation.current),
-        [ACCORDION_CONTENT_ATTR]: "",
+        [ACCORDION_ATTRS.CONTENT]: "",
         style: {
-            "--bits-accordion-content-height": `${this.#height}px`,
-            "--bits-accordion-content-width": `${this.#width}px`,
+            "--bits-accordion-content-height": `${this.#dimensions.height}px`,
+            "--bits-accordion-content-width": `${this.#dimensions.width}px`,
         },
+        ...attachRef(this.opts.ref),
     }));
 }
+// Header state
 class AccordionHeaderState {
     opts;
     item;
     constructor(opts, item) {
         this.opts = opts;
         this.item = item;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -214,7 +202,8 @@ class AccordionHeaderState {
         "data-heading-level": this.opts.level.current,
         "data-state": getDataOpenClosed(this.item.isActive),
         "data-orientation": getDataOrientation(this.item.root.opts.orientation.current),
-        [ACCORDION_HEADER_ATTR]: "",
+        [ACCORDION_ATTRS.HEADER]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 const AccordionRootContext = new Context("Accordion.Root");

package/dist/bits/accordion/components/accordion-content.svelte

@@ -3,12 +3,14 @@
 	import { useAccordionContent } from "../accordion.svelte.js";
 	import type { AccordionContentProps } from "../types.js";
 	import { PresenceLayer } from "../../utilities/presence-layer/index.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		child,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		forceMount = false,
 		children,
 		...restProps
@@ -24,7 +26,7 @@
 	});
 </script>
 
-<PresenceLayer forceMount={true} present={contentState.present} {id}>
+<PresenceLayer forceMount={true} present={contentState.present} ref={contentState.opts.ref}>
 	{#snippet presence({ present })}
 		{@const mergedProps = mergeProps(restProps, contentState.props, {
 			hidden: forceMount ? undefined : !present.current,

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

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AccordionHeaderProps } from "../types.js";
 	import { useAccordionHeader } from "../accordion.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		level = 2,
 		children,
 		child,

package/dist/bits/accordion/components/accordion-item.svelte

@@ -2,12 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AccordionItemProps } from "../types.js";
 	import { useAccordionItem } from "../accordion.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
+	const defaultId = createId(uid);
 
 	let {
-		id = useId(),
+		id = defaultId,
 		disabled = false,
-		value = useId(),
+		value = defaultId,
 		children,
 		child,
 		ref = $bindable(null),

package/dist/bits/accordion/components/accordion-trigger.svelte

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

package/dist/bits/accordion/components/accordion.svelte

@@ -2,9 +2,11 @@
 	import { type WritableBox, box, mergeProps } from "svelte-toolbelt";
 	import { useAccordionRoot } from "../accordion.svelte.js";
 	import type { AccordionRootProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import { watch } from "runed";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		disabled = false,
@@ -13,7 +15,7 @@
 		type,
 		value = $bindable(),
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		onValueChange = noop,
 		loop = true,
 		orientation = "vertical",

package/dist/bits/alert-dialog/components/alert-dialog-action.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AlertDialogActionProps } from "../types.js";
-	import { useId } from "../../../internal/use-id.js";
 	import { useAlertDialogAction } from "../../dialog/dialog.svelte.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: AlertDialogActionProps = $props();

package/dist/bits/alert-dialog/components/alert-dialog-cancel.svelte

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

package/dist/bits/alert-dialog/components/alert-dialog-content.svelte

@@ -6,14 +6,16 @@
 	import FocusScope from "../../utilities/focus-scope/focus-scope.svelte";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import TextSelectionLayer from "../../utilities/text-selection-layer/text-selection-layer.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
 	import { useDialogContent } from "../../dialog/dialog.svelte.js";
 	import { shouldTrapFocus } from "../../../internal/should-trap-focus.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
+		id = createId(uid),
 		children,
 		child,
 		ref = $bindable(null),
@@ -41,12 +43,13 @@
 </script>
 
 <PresenceLayer
-	{...mergedProps}
 	{forceMount}
 	present={contentState.root.opts.open.current || forceMount}
+	ref={contentState.opts.ref}
 >
 	{#snippet presence()}
 		<FocusScope
+			ref={contentState.opts.ref}
 			loop
 			trapFocus={shouldTrapFocus({
 				forceMount,
@@ -81,6 +84,7 @@
 				>
 					<DismissibleLayer
 						{...mergedProps}
+						ref={contentState.opts.ref}
 						enabled={contentState.root.opts.open.current}
 						{interactOutsideBehavior}
 						onInteractOutside={(e) => {
@@ -91,6 +95,7 @@
 					>
 						<TextSelectionLayer
 							{...mergedProps}
+							ref={contentState.opts.ref}
 							enabled={contentState.root.opts.open.current}
 						>
 							{#if child}

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

@@ -1,10 +1,9 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 const ASPECT_RATIO_ROOT_ATTR = "data-aspect-ratio-root";
 class AspectRatioRootState {
     opts;
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
     }
     wrapperProps = $derived.by(() => ({
         style: {
@@ -23,6 +22,7 @@ class AspectRatioRootState {
             left: 0,
         },
         [ASPECT_RATIO_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 export function useAspectRatioRoot(props) {