@svelte-thing/primitives 0.0.0 → 0.0.2

package/dist/field/root/index.mjs

@@ -1,79 +1,3 @@
-import { n as setRoot, t as getRoot } from "../../context-D77KIx26.mjs";
-import { uid } from "uid";
-//#region src/field/root/createRoot.svelte.ts
-function createRoot(props) {
-	const id = $derived(props.id ?? uid());
-	const labelId = $derived(`${id}-label`);
-	const controlId = $derived(`${id}-control`);
-	const errorId = $derived(`${id}-error`);
-	let isDirty = $derived(props.isDirty ?? false);
-	let isDisabled = $derived(props.isDisabled ?? false);
-	let isFilled = $derived(props.isFilled ?? false);
-	let isFocused = $derived(props.isFocused ?? false);
-	let isInvalid = $derived(props.isInvalid ?? false);
-	let isTouched = $derived(props.isTouched ?? false);
-	let isValid = $derived(props.isValid ?? false);
-	const root = {
-		get id() {
-			return id;
-		},
-		get labelId() {
-			return labelId;
-		},
-		get controlId() {
-			return controlId;
-		},
-		get errorId() {
-			return errorId;
-		},
-		get isDirty() {
-			return isDirty;
-		},
-		set isDirty(value) {
-			isDirty = value;
-		},
-		get isDisabled() {
-			return isDisabled;
-		},
-		set isDisabled(value) {
-			isDisabled = value;
-		},
-		get isFilled() {
-			return isFilled;
-		},
-		set isFilled(value) {
-			isFilled = value;
-		},
-		get isFocused() {
-			return isFocused;
-		},
-		set isFocused(value) {
-			isFocused = value;
-		},
-		get isInvalid() {
-			return isInvalid;
-		},
-		set isInvalid(value) {
-			isInvalid = value;
-		},
-		get isTouched() {
-			return isTouched;
-		},
-		set isTouched(value) {
-			isTouched = value;
-		},
-		get isValid() {
-			return isValid;
-		},
-		set isValid(value) {
-			isValid = value;
-		},
-		props: { get id() {
-			return id;
-		} }
-	};
-	setRoot(root);
-	return root;
-}
-//#endregion
+import { getRoot, setRoot } from "./context.mjs";
+import { createRoot } from "./createRoot.svelte.mjs";
 export { createRoot, getRoot, setRoot };

package/dist/index.d.mts

@@ -1,3 +1,3 @@
-import { t as index_d_exports } from "./field/index.mjs";
-import { t as index_d_exports$1 } from "./tab/index.mjs";
+import { index_d_exports } from "./field/index.mjs";
+import { index_d_exports as index_d_exports$1 } from "./tab/index.mjs";
 export { index_d_exports as Field, index_d_exports$1 as Tab };

package/dist/index.mjs

@@ -1,3 +1,3 @@
-import { t as field_exports } from "./field/index.mjs";
-import { t as tab_exports } from "./tab/index.mjs";
+import { field_exports } from "./field/index.mjs";
+import { tab_exports } from "./tab/index.mjs";
 export { field_exports as Field, tab_exports as Tab };

package/dist/menu/index.d.mts

@@ -1,5 +1,6 @@
-import { CreateItemProps, ItemState, createItem } from "./item/index.mjs";
-import { CreatePopupProps, PopupState, createPopup } from "./popup/index.mjs";
-import { CreateRootProps, Orientation, RootState, createRoot, getRoot, setRoot } from "./root/index.mjs";
-import { CreateTriggerProps, TriggerState, createTrigger } from "./trigger/index.mjs";
+import { CreateItemProps, ItemState, createItem } from "./item/createItem.svelte.mjs";
+import { CreatePopupProps, PopupState, createPopup } from "./popup/createPopup.svelte.mjs";
+import { CreateRootProps, Orientation, RootState, createRoot } from "./root/createRoot.svelte.mjs";
+import { getRoot, setRoot } from "./root/context.mjs";
+import { CreateTriggerProps, TriggerState, createTrigger } from "./trigger/createTrigger.svelte.mjs";
 export { CreateItemProps, CreatePopupProps, CreateRootProps, CreateTriggerProps, ItemState, Orientation, PopupState, RootState, TriggerState, createItem, createPopup, createRoot, createTrigger, getRoot, setRoot };

package/dist/menu/index.mjs

@@ -1,6 +1,10 @@
-import { n as setRoot, t as getRoot } from "../context-BJAwVB1S.mjs";
-import { createItem } from "./item/index.mjs";
-import { createPopup } from "./popup/index.mjs";
-import { createRoot } from "./root/index.mjs";
-import { createTrigger } from "./trigger/index.mjs";
+import { getRoot, setRoot } from "./root/context.mjs";
+import { createItem } from "./item/createItem.svelte.mjs";
+import "./item/index.mjs";
+import { createPopup } from "./popup/createPopup.svelte.mjs";
+import "./popup/index.mjs";
+import { createRoot } from "./root/createRoot.svelte.mjs";
+import "./root/index.mjs";
+import { createTrigger } from "./trigger/createTrigger.svelte.mjs";
+import "./trigger/index.mjs";
 export { createItem, createPopup, createRoot, createTrigger, getRoot, setRoot };

package/dist/menu/item/createItem.svelte.d.mts

@@ -0,0 +1,14 @@
+import { Exact } from "@svelte-thing/type-utils";
+import { HTMLAttributes } from "svelte/elements";
+
+//#region src/menu/item/createItem.svelte.d.ts
+interface CreateItemProps {
+  disabled: boolean | null | undefined;
+  id: string | null | undefined;
+}
+interface ItemState {
+  props: HTMLAttributes<HTMLElement>;
+}
+declare function createItem<T extends CreateItemProps>(props: Exact<CreateItemProps, T>): ItemState;
+//#endregion
+export { CreateItemProps, ItemState, createItem };

package/dist/menu/item/createItem.svelte.mjs

@@ -0,0 +1,86 @@
+import { getRoot } from "../root/context.mjs";
+import { flushSync } from "svelte";
+import { uid } from "uid";
+import { createAttachmentKey } from "svelte/attachments";
+//#region src/menu/item/createItem.svelte.ts
+function createItem(props) {
+	const root = getRoot();
+	const itemId = $derived(props.id ?? `menuitem-${uid()}`);
+	return { props: {
+		"data-menu-item": "",
+		get "aria-disabled"() {
+			return props.disabled ? "true" : void 0;
+		},
+		get "data-disabled"() {
+			return props.disabled ? "" : void 0;
+		},
+		get "data-id"() {
+			return itemId;
+		},
+		get "data-root-id"() {
+			return root.id;
+		},
+		get id() {
+			return itemId;
+		},
+		get tabindex() {
+			return root.highlightedItemId === itemId ? 0 : -1;
+		},
+		onkeydown(event) {
+			if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return;
+			let preventDefault = false;
+			let pendingHighlighted = null;
+			const item = event.currentTarget;
+			const items = [...document.querySelectorAll(`[data-menu-item][data-root-id="${root.id}"]:not([data-disabled])`)];
+			const currentIndex = items.indexOf(item);
+			const nextKeyName = root.orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+			const previousKeyName = root.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+			switch (event.key) {
+				case previousKeyName:
+					pendingHighlighted = items[currentIndex === 0 ? items.length - 1 : currentIndex - 1]?.dataset.id ?? null;
+					preventDefault = true;
+					break;
+				case nextKeyName:
+					pendingHighlighted = items[(currentIndex + 1) % items.length]?.dataset.id ?? null;
+					preventDefault = true;
+					break;
+				case "Home":
+					pendingHighlighted = items[0]?.dataset.id ?? null;
+					preventDefault = true;
+					break;
+				case "End":
+					pendingHighlighted = items.at(-1)?.dataset.id ?? null;
+					preventDefault = true;
+					break;
+				default: break;
+			}
+			if (pendingHighlighted !== null) {
+				root.highlightedItemId = pendingHighlighted;
+				flushSync();
+				items.find((el) => el.dataset.id === pendingHighlighted)?.focus();
+			}
+			if (preventDefault) {
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		},
+		onmouseover: (event) => {
+			if (root.shouldHighlightOnHover) {
+				root.highlightedItemId = itemId;
+				flushSync();
+				event.currentTarget.focus();
+			}
+		},
+		onmouseleave: () => {
+			if (root.shouldHighlightOnHover && root.highlightedItemId === itemId) root.highlightedItemId = null;
+		},
+		role: "menuitem",
+		[createAttachmentKey()]: () => {
+			return () => {
+				if (root.highlightedItemId === itemId) root.highlightedItemId = null;
+			};
+		}
+	} };
+}
+//#endregion
+export { createItem };

package/dist/menu/item/index.d.mts

@@ -1,14 +1,2 @@
-import { Exact } from "@svelte-thing/type-utils";
-import { HTMLAttributes } from "svelte/elements";
-
-//#region src/menu/item/createItem.svelte.d.ts
-interface CreateItemProps {
-  disabled: boolean | null | undefined;
-  id: string | null | undefined;
-}
-interface ItemState {
-  props: HTMLAttributes<HTMLElement>;
-}
-declare function createItem<T extends CreateItemProps>(props: Exact<CreateItemProps, T>): ItemState;
-//#endregion
+import { CreateItemProps, ItemState, createItem } from "./createItem.svelte.mjs";
 export { CreateItemProps, ItemState, createItem };

package/dist/menu/item/index.mjs

@@ -1,86 +1,2 @@
-import { t as getRoot } from "../../context-BJAwVB1S.mjs";
-import { flushSync } from "svelte";
-import { uid } from "uid";
-import { createAttachmentKey } from "svelte/attachments";
-//#region src/menu/item/createItem.svelte.ts
-function createItem(props) {
-	const root = getRoot();
-	const itemId = $derived(props.id ?? `menuitem-${uid()}`);
-	return { props: {
-		"data-menu-item": "",
-		get "aria-disabled"() {
-			return props.disabled ? "true" : void 0;
-		},
-		get "data-disabled"() {
-			return props.disabled ? "" : void 0;
-		},
-		get "data-id"() {
-			return itemId;
-		},
-		get "data-root-id"() {
-			return root.id;
-		},
-		get id() {
-			return itemId;
-		},
-		get tabindex() {
-			return root.highlightedItemId === itemId ? 0 : -1;
-		},
-		onkeydown(event) {
-			if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return;
-			let preventDefault = false;
-			let pendingHighlighted = null;
-			const item = event.currentTarget;
-			const items = [...document.querySelectorAll(`[data-menu-item][data-root-id="${root.id}"]:not([data-disabled])`)];
-			const currentIndex = items.indexOf(item);
-			const nextKeyName = root.orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
-			const previousKeyName = root.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
-			switch (event.key) {
-				case previousKeyName:
-					pendingHighlighted = items[currentIndex === 0 ? items.length - 1 : currentIndex - 1]?.dataset.id ?? null;
-					preventDefault = true;
-					break;
-				case nextKeyName:
-					pendingHighlighted = items[(currentIndex + 1) % items.length]?.dataset.id ?? null;
-					preventDefault = true;
-					break;
-				case "Home":
-					pendingHighlighted = items[0]?.dataset.id ?? null;
-					preventDefault = true;
-					break;
-				case "End":
-					pendingHighlighted = items.at(-1)?.dataset.id ?? null;
-					preventDefault = true;
-					break;
-				default: break;
-			}
-			if (pendingHighlighted !== null) {
-				root.highlightedItemId = pendingHighlighted;
-				flushSync();
-				items.find((el) => el.dataset.id === pendingHighlighted)?.focus();
-			}
-			if (preventDefault) {
-				event.stopPropagation();
-				event.preventDefault();
-			}
-		},
-		onmouseover: (event) => {
-			if (root.shouldHighlightOnHover) {
-				root.highlightedItemId = itemId;
-				flushSync();
-				event.currentTarget.focus();
-			}
-		},
-		onmouseleave: () => {
-			if (root.shouldHighlightOnHover && root.highlightedItemId === itemId) root.highlightedItemId = null;
-		},
-		role: "menuitem",
-		[createAttachmentKey()]: () => {
-			return () => {
-				if (root.highlightedItemId === itemId) root.highlightedItemId = null;
-			};
-		}
-	} };
-}
-//#endregion
+import { createItem } from "./createItem.svelte.mjs";
 export { createItem };

package/dist/menu/popup/createPopup.svelte.d.mts

@@ -0,0 +1,19 @@
+import { HTMLAttributes } from "svelte/elements";
+
+//#region src/menu/popup/createPopup.svelte.d.ts
+type Side = 'left' | 'right' | 'bottom' | 'top' | 'inline-end' | 'inline-start';
+type Align = 'start' | 'end' | 'center';
+interface CreatePopupProps {
+  popover: HTMLAttributes<HTMLElement>['popover'] | null | undefined;
+  align: Align | undefined;
+  side: Side | undefined;
+  alignOffset: number | undefined;
+  positionAnchor: string | null | undefined;
+  sideOffset: number | undefined;
+}
+interface PopupState {
+  props: HTMLAttributes<HTMLElement>;
+}
+declare function createPopup(props: CreatePopupProps): PopupState;
+//#endregion
+export { CreatePopupProps, PopupState, createPopup };

package/dist/menu/popup/createPopup.svelte.mjs

@@ -0,0 +1,121 @@
+import { getRoot } from "../root/context.mjs";
+import { flushSync, untrack } from "svelte";
+import { createAttachmentKey } from "svelte/attachments";
+import { assertNever } from "@svelte-thing/type-utils";
+import { on } from "svelte/events";
+//#region src/menu/popup/createPopup.svelte.ts
+function createPopup(props) {
+	const root = getRoot();
+	return { props: {
+		"data-menu-popup": "",
+		get "data-root-id"() {
+			return root.id;
+		},
+		get "data-open"() {
+			return root.isOpen ? "" : void 0;
+		},
+		get "data-closed"() {
+			return root.isOpen ? void 0 : "";
+		},
+		get "data-side"() {
+			return props.side ?? "bottom";
+		},
+		get "data-align"() {
+			return props.align ?? "center";
+		},
+		get popover() {
+			return props.popover ?? "";
+		},
+		get id() {
+			return root.popupId;
+		},
+		get style() {
+			const positionAnchor = props.positionAnchor === void 0 ? root.anchorName : props.positionAnchor;
+			const styles = [positionAnchor === null ? void 0 : `position-anchor: ${positionAnchor}`, `justify-self: anchor-${props.align ?? "center"}`];
+			const side = props.side ?? "bottom";
+			const sideOffset = props.sideOffset ?? 0;
+			if (side === "bottom") styles.push(`top: calc(anchor(bottom) + ${sideOffset}px);`);
+			else if (side === "top") styles.push(`bottom: calc(anchor(top) + ${sideOffset}px);`);
+			else if (side === "left") styles.push(`right: calc(anchor(left) + ${sideOffset}px);`);
+			else if (side === "right") styles.push(`left: calc(anchor(right) + ${sideOffset}px);`);
+			else if (side === "inline-end") styles.push(`inset-inline-end: calc(anchor(end) + ${sideOffset}px);`);
+			else if (side === "inline-start") styles.push(`inset-inline-start: calc(anchor(start) + ${sideOffset}px);`);
+			else assertNever(side);
+			return styles.filter(Boolean).join("; ");
+		},
+		get tabindex() {
+			return root.isOpen ? -1 : void 0;
+		},
+		[createAttachmentKey()](element) {
+			const update = (event) => {
+				if (event && event.newState !== "open") return;
+				root.isOpen = event ? true : element.matches(":popover-open");
+				flushSync();
+				if (root.isOpen) element.focus();
+			};
+			const open = () => {
+				element.showPopover();
+			};
+			const close = () => {
+				element.hidePopover();
+			};
+			root.open = open;
+			root.close = close;
+			$effect(() => {
+				if (root._propIsOpen === true && !element.matches(":popover-open")) element.showPopover();
+				else if (root._propIsOpen === false && element.matches(":popover-open")) element.hidePopover();
+				untrack(() => {
+					update();
+				});
+			});
+			update();
+			const offBefore = on(element, "beforetoggle", update);
+			const offAfter = on(element, "toggle", update);
+			return () => {
+				offBefore();
+				offAfter();
+				root.open = () => {
+					throw new Error("Attempted to open before popup initialization");
+				};
+				root.close = () => {
+					throw new Error("Attempted to close before popup initialization");
+				};
+			};
+		},
+		onkeydown(event) {
+			if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return;
+			const popup = event.currentTarget;
+			if (document.activeElement !== popup) return;
+			let preventDefault = false;
+			let pendingHighlighted = null;
+			const items = [...document.querySelectorAll(`[data-menu-item][data-root-id="${root.id}"]:not([data-disabled])`)];
+			const nextKeyName = root.orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+			const previousKeyName = root.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+			switch (event.key) {
+				case previousKeyName:
+				case "End":
+					pendingHighlighted = items.at(-1)?.dataset.id ?? null;
+					preventDefault = true;
+					break;
+				case nextKeyName:
+				case "Home":
+					pendingHighlighted = items[0]?.dataset.id ?? null;
+					preventDefault = true;
+					break;
+				default: break;
+			}
+			if (pendingHighlighted !== null) {
+				root.highlightedItemId = pendingHighlighted;
+				flushSync();
+				items.find((el) => el.dataset.id === pendingHighlighted)?.focus();
+			}
+			if (preventDefault) {
+				event.stopPropagation();
+				event.preventDefault();
+			}
+		},
+		role: "menu"
+	} };
+}
+//#endregion
+export { createPopup };

package/dist/menu/popup/index.d.mts

@@ -1,19 +1,2 @@
-import { HTMLAttributes } from "svelte/elements";
-
-//#region src/menu/popup/createPopup.svelte.d.ts
-type Side = 'left' | 'right' | 'bottom' | 'top' | 'inline-end' | 'inline-start';
-type Align = 'start' | 'end' | 'center';
-interface CreatePopupProps {
-  popover: HTMLAttributes<HTMLElement>['popover'] | null | undefined;
-  align: Align | undefined;
-  side: Side | undefined;
-  alignOffset: number | undefined;
-  positionAnchor: string | null | undefined;
-  sideOffset: number | undefined;
-}
-interface PopupState {
-  props: HTMLAttributes<HTMLElement>;
-}
-declare function createPopup(props: CreatePopupProps): PopupState;
-//#endregion
+import { CreatePopupProps, PopupState, createPopup } from "./createPopup.svelte.mjs";
 export { CreatePopupProps, PopupState, createPopup };

package/dist/menu/popup/index.mjs

@@ -1,121 +1,2 @@
-import { t as getRoot } from "../../context-BJAwVB1S.mjs";
-import { flushSync, untrack } from "svelte";
-import { createAttachmentKey } from "svelte/attachments";
-import { assertNever } from "@svelte-thing/type-utils";
-import { on } from "svelte/events";
-//#region src/menu/popup/createPopup.svelte.ts
-function createPopup(props) {
-	const root = getRoot();
-	return { props: {
-		"data-menu-popup": "",
-		get "data-root-id"() {
-			return root.id;
-		},
-		get "data-open"() {
-			return root.isOpen ? "" : void 0;
-		},
-		get "data-closed"() {
-			return root.isOpen ? void 0 : "";
-		},
-		get "data-side"() {
-			return props.side ?? "bottom";
-		},
-		get "data-align"() {
-			return props.align ?? "center";
-		},
-		get popover() {
-			return props.popover ?? "";
-		},
-		get id() {
-			return root.popupId;
-		},
-		get style() {
-			const positionAnchor = props.positionAnchor === void 0 ? root.anchorName : props.positionAnchor;
-			const styles = [positionAnchor === null ? void 0 : `position-anchor: ${positionAnchor}`, `justify-self: anchor-${props.align ?? "center"}`];
-			const side = props.side ?? "bottom";
-			const sideOffset = props.sideOffset ?? 0;
-			if (side === "bottom") styles.push(`top: calc(anchor(bottom) + ${sideOffset}px);`);
-			else if (side === "top") styles.push(`bottom: calc(anchor(top) + ${sideOffset}px);`);
-			else if (side === "left") styles.push(`right: calc(anchor(left) + ${sideOffset}px);`);
-			else if (side === "right") styles.push(`left: calc(anchor(right) + ${sideOffset}px);`);
-			else if (side === "inline-end") styles.push(`inset-inline-end: calc(anchor(end) + ${sideOffset}px);`);
-			else if (side === "inline-start") styles.push(`inset-inline-start: calc(anchor(start) + ${sideOffset}px);`);
-			else assertNever(side);
-			return styles.filter(Boolean).join("; ");
-		},
-		get tabindex() {
-			return root.isOpen ? -1 : void 0;
-		},
-		[createAttachmentKey()](element) {
-			const update = (event) => {
-				if (event && event.newState !== "open") return;
-				root.isOpen = event ? true : element.matches(":popover-open");
-				flushSync();
-				if (root.isOpen) element.focus();
-			};
-			const open = () => {
-				element.showPopover();
-			};
-			const close = () => {
-				element.hidePopover();
-			};
-			root.open = open;
-			root.close = close;
-			$effect(() => {
-				if (root._propIsOpen === true && !element.matches(":popover-open")) element.showPopover();
-				else if (root._propIsOpen === false && element.matches(":popover-open")) element.hidePopover();
-				untrack(() => {
-					update();
-				});
-			});
-			update();
-			const offBefore = on(element, "beforetoggle", update);
-			const offAfter = on(element, "toggle", update);
-			return () => {
-				offBefore();
-				offAfter();
-				root.open = () => {
-					throw new Error("Attempted to open before popup initialization");
-				};
-				root.close = () => {
-					throw new Error("Attempted to close before popup initialization");
-				};
-			};
-		},
-		onkeydown(event) {
-			if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return;
-			const popup = event.currentTarget;
-			if (document.activeElement !== popup) return;
-			let preventDefault = false;
-			let pendingHighlighted = null;
-			const items = [...document.querySelectorAll(`[data-menu-item][data-root-id="${root.id}"]:not([data-disabled])`)];
-			const nextKeyName = root.orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
-			const previousKeyName = root.orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
-			switch (event.key) {
-				case previousKeyName:
-				case "End":
-					pendingHighlighted = items.at(-1)?.dataset.id ?? null;
-					preventDefault = true;
-					break;
-				case nextKeyName:
-				case "Home":
-					pendingHighlighted = items[0]?.dataset.id ?? null;
-					preventDefault = true;
-					break;
-				default: break;
-			}
-			if (pendingHighlighted !== null) {
-				root.highlightedItemId = pendingHighlighted;
-				flushSync();
-				items.find((el) => el.dataset.id === pendingHighlighted)?.focus();
-			}
-			if (preventDefault) {
-				event.stopPropagation();
-				event.preventDefault();
-			}
-		},
-		role: "menu"
-	} };
-}
-//#endregion
+import { createPopup } from "./createPopup.svelte.mjs";
 export { createPopup };

package/dist/menu/root/context.d.mts

@@ -0,0 +1,6 @@
+import { RootState } from "./createRoot.svelte.mjs";
+
+//#region src/menu/root/context.d.ts
+declare const getRoot: () => RootState, setRoot: (context: RootState) => RootState;
+//#endregion
+export { getRoot, setRoot };

package/dist/{context-BJAwVB1S.mjs → menu/root/context.mjs}

@@ -2,4 +2,4 @@ import { createContext } from "svelte";
 //#region src/menu/root/context.ts
 const [getRoot, setRoot] = createContext();
 //#endregion
-export { setRoot as n, getRoot as t };
+export { getRoot, setRoot };

package/dist/menu/root/createRoot.svelte.d.mts

@@ -0,0 +1,25 @@
+//#region src/menu/root/createRoot.svelte.d.ts
+type Orientation = 'horizontal' | 'vertical';
+interface CreateRootProps {
+  anchorName: string | undefined;
+  id: string | null | undefined;
+  isOpen: boolean | undefined;
+  orientation: Orientation | undefined;
+  shouldHighlightOnHover: boolean | undefined;
+}
+interface RootState {
+  anchorName: string;
+  close: () => void;
+  highlightedItemId: string | null;
+  id: string;
+  isOpen: boolean;
+  open: () => void;
+  orientation: Orientation;
+  popupId: string;
+  shouldHighlightOnHover: boolean;
+  triggerId: string;
+  _propIsOpen: boolean | undefined;
+}
+declare function createRoot(props: CreateRootProps): RootState;
+//#endregion
+export { CreateRootProps, Orientation, RootState, createRoot };