ajo-ui 0.1.0

package/dist/command.js

@@ -0,0 +1,263 @@
+import { defaultResultsLabel, flag, matchesTokens, resolveFilter, text } from "./utils.js";
+import { t as collection } from "./chunks/collection-DtRB63U4.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from "./dialog.js";
+import { announce, callHandler, controlled, dom, id, listen, roving, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/command.tsx
+var CommandContext = context(null);
+var defaultFilter = (value, search, keywords) => matchesTokens(search, [value, ...keywords].join(" "));
+var commandItems = collection("command");
+var CommandRoot = function* ({ defaultSearch, defaultValue, search, value }) {
+	const commandId = id("command");
+	let announceResults = false;
+	let disabled = false;
+	let lastResultCount = -1;
+	let loop = true;
+	let onSearchChange;
+	let onValueChange;
+	let resultsLabel;
+	const valueState = controlled(this, {
+		fallback: String(value ?? defaultValue ?? ""),
+		onChange: (next, event) => onValueChange?.(next, event)
+	});
+	const searchState = controlled(this, {
+		fallback: String(search ?? defaultSearch ?? ""),
+		onChange: (next, event) => onSearchChange?.(next, event)
+	});
+	const live = announce(this);
+	const itemId = (itemValue) => `${commandId}-item-${encodeURIComponent(itemValue)}`;
+	const setValue = (next, event) => {
+		if (next === valueState.value) return;
+		valueState.set(next, event);
+	};
+	const setSearch = (next, event) => {
+		if (next === searchState.value) return;
+		searchState.set(next, event);
+		announceResults = true;
+	};
+	const nav = roving(this, {
+		items: () => commandItems.items(this),
+		loop: () => loop,
+		current: () => commandItems.items(this).find((item) => item.dataset.value === valueState.value),
+		onMove: (target, event) => {
+			setValue(target.dataset.value ?? "", event);
+			target.scrollIntoView({ block: "nearest" });
+		}
+	});
+	listen(this, "keydown", (event) => {
+		if (!event.target?.closest("[data-slot=\"command\"]")) return;
+		if (nav.handle(event)) return;
+		if (event.key === "Enter") {
+			const item = commandItems.items(this).find((candidate) => candidate.dataset.value === valueState.value);
+			if (!item) return;
+			event.preventDefault();
+			item.click();
+		} else if (event.key === "Escape") {
+			if (!searchState.value) return;
+			event.preventDefault();
+			setSearch("", event);
+		}
+	});
+	for (const args of this) {
+		disabled = Boolean(args.disabled);
+		loop = args.loop !== false;
+		onSearchChange = args.onSearchChange;
+		onValueChange = args.onValueChange;
+		resultsLabel = args.resultsLabel;
+		searchState.sync(args.search != null ? String(args.search) : void 0);
+		valueState.sync(args.value != null ? String(args.value) : void 0);
+		const filter = resolveFilter(args.filter, defaultFilter);
+		const matches = (itemValue, keywords = []) => filter(itemValue, searchState.value, keywords);
+		CommandContext({
+			activeId: valueState.value ? itemId(valueState.value) : "",
+			disabled,
+			itemId,
+			listId: `${commandId}-list`,
+			matches,
+			search: searchState.value,
+			setValue,
+			setSearch,
+			value: valueState.value
+		});
+		if (dom(this)) queueMicrotask(() => {
+			const visible = commandItems.sweep(this);
+			if (!valueState.controlled) {
+				const nextValue = (visible.find((item) => item.dataset.value === valueState.value) ?? visible[0])?.dataset.value ?? "";
+				if (nextValue !== valueState.value) valueState.init(nextValue);
+			}
+			if (announceResults && visible.length !== lastResultCount) live.polite((resultsLabel ?? defaultResultsLabel)(visible.length));
+			lastResultCount = visible.length;
+			announceResults = false;
+		});
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+/** Searchable command menu. */
+var Command = ({ children, class: classes, defaultSearch, defaultValue, disabled, filter, loop, onSearchChange, onValueChange, resultsLabel, search, value, ...attrs }) => /* @__PURE__ */ jsx(CommandRoot, {
+	...statefulRootAttrs(attrs),
+	defaultSearch,
+	defaultValue,
+	disabled,
+	filter,
+	loop,
+	onSearchChange,
+	onValueChange,
+	resultsLabel,
+	search,
+	value,
+	"attr:class": classes,
+	"attr:data-slot": "command",
+	children
+});
+/** Native dialog wrapper for a Command palette. */
+var CommandDialog = ({ children, class: classes, defaultOpen, description, commandClass, onOpenChange, open, showCloseButton, closeClass, closeIconClass, closeLabel = "Close", descriptionClass, onEscapeKeyDown, title, titleClass, onPointerDownOutside, ...attrs }) => /* @__PURE__ */ jsx(Dialog, {
+	defaultOpen,
+	onOpenChange,
+	open,
+	class: "contents",
+	children: /* @__PURE__ */ jsxs(DialogContent, {
+		...attrs,
+		class: classes,
+		"data-slot": "command-dialog",
+		onEscapeKeyDown,
+		onPointerDownOutside,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				class: titleClass,
+				children: [/* @__PURE__ */ jsx(DialogTitle, { children: title ?? "Command Palette" }), /* @__PURE__ */ jsx(DialogDescription, {
+					class: descriptionClass,
+					children: description ?? "Search for a command to run..."
+				})]
+			}),
+			showCloseButton !== false ? /* @__PURE__ */ jsx(DialogClose, {
+				"aria-label": closeLabel,
+				class: closeClass,
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					class: closeIconClass
+				})
+			}) : null,
+			/* @__PURE__ */ jsx(Command, {
+				class: commandClass,
+				children
+			})
+		]
+	})
+});
+/** Search input for a Command menu. */
+var CommandInput = ({ class: classes, disabled, iconClass, onValueChange, placeholder = "Type a command or search...", type: _type, value, wrapperClass, "set:oninput": onInput, ...attrs }) => {
+	const command = CommandContext();
+	const disabledFlag = Boolean(disabled ?? command?.disabled);
+	const shown = value == null ? command?.search ?? "" : String(value);
+	return /* @__PURE__ */ jsxs("div", {
+		class: wrapperClass,
+		"data-slot": "command-input-wrapper",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			class: iconClass
+		}), /* @__PURE__ */ jsx("input", {
+			...attrs,
+			"aria-activedescendant": command?.activeId || void 0,
+			"aria-autocomplete": "list",
+			"aria-controls": command?.listId,
+			"aria-expanded": "true",
+			class: classes,
+			"data-slot": "command-input",
+			disabled: disabledFlag,
+			placeholder,
+			role: "combobox",
+			"set:oninput": (event) => {
+				const next = event.target.value;
+				callHandler(onInput, event);
+				if (event.defaultPrevented) return;
+				onValueChange?.(next, event);
+				command?.setSearch(next, event);
+			},
+			"set:value": shown,
+			type: "search"
+		})]
+	});
+};
+/** Scrollable list for command options. */
+var CommandList = ({ children, class: classes, ...attrs }) => {
+	const command = CommandContext();
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		class: classes,
+		"data-slot": "command-list",
+		id: command?.listId,
+		role: "listbox",
+		children
+	});
+};
+/** Empty state shown when filtering hides every command item. */
+var CommandEmpty = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-slot": "command-empty",
+	children
+});
+/** Group of related command items. */
+var CommandGroup = ({ children, class: classes, forceMount, heading, headingClass, ...attrs }) => /* @__PURE__ */ jsxs("div", {
+	...attrs,
+	class: classes,
+	"data-force-mount": flag(forceMount),
+	"data-slot": "command-group",
+	role: "group",
+	children: [heading ? /* @__PURE__ */ jsx("div", {
+		class: headingClass,
+		"data-slot": "command-group-heading",
+		children: heading
+	}) : null, children]
+});
+/** Visual separator between command groups. */
+var CommandSeparator = ({ class: classes, ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	class: classes,
+	"data-slot": "command-separator",
+	role: "separator"
+});
+/** Selectable command option. */
+var CommandItem = ({ children, class: classes, disabled, forceMount, id: idArg, keywords = [], onSelect, value, ...attrs }) => {
+	const command = CommandContext();
+	const itemValue = String(value ?? text(children));
+	const disabledFlag = Boolean(disabled ?? command?.disabled);
+	const hidden = !forceMount && command ? !command.matches(itemValue, keywords) : false;
+	const highlighted = command?.value === itemValue;
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		...commandItems.attrs({
+			disabled: disabledFlag,
+			value: itemValue
+		}),
+		"aria-disabled": flag(disabledFlag),
+		"aria-selected": highlighted ? "true" : "false",
+		class: classes,
+		"data-highlighted": flag(highlighted),
+		"data-slot": "command-item",
+		hidden: hidden || void 0,
+		id: idArg ?? command?.itemId(itemValue),
+		role: "option",
+		"set:onclick": (event) => {
+			if (disabledFlag) return;
+			onSelect?.(itemValue, event);
+			if (event.defaultPrevented) return;
+			command?.setValue(itemValue, event);
+		},
+		"set:onpointermove": (event) => {
+			if (disabledFlag) return;
+			command?.setValue(itemValue, event);
+		},
+		children
+	});
+};
+/** Right-aligned shortcut hint inside a CommandItem. */
+var CommandShortcut = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("span", {
+	...attrs,
+	class: classes,
+	"data-slot": "command-shortcut",
+	children
+});
+//#endregion
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };

package/dist/context-menu.js

@@ -0,0 +1,112 @@
+import { withSlot } from "./utils.js";
+import { t as pointReference } from "./chunks/position-D6_i_SRn.js";
+import { _ as provideContextMenuComposition, a as MenuItem, c as MenuRadioItem, d as MenuSub, f as MenuSubContent, g as menuInvocation, i as MenuGroup, l as MenuSeparator, n as MenuCheckboxItem, o as MenuLabel, p as MenuSubTrigger, r as MenuContent, s as MenuRadioGroup, t as Menu, u as MenuShortcut } from "./chunks/menu-B45IyHHC.js";
+import { callHandler, listen, restore, statefulRootAttrs } from "ajo-cloves";
+import { jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/context-menu.tsx
+var ContextMenuRoot = function* () {
+	const focus = restore(this);
+	let invoker = null;
+	let point = {
+		x: 0,
+		y: 0
+	};
+	let reference = null;
+	const invoke = (controller, x, y, event, source, focusIntent) => {
+		point.x = x;
+		point.y = y;
+		if (source !== invoker || !reference) {
+			invoker = source;
+			point = {
+				x,
+				y
+			};
+			reference = pointReference(source, () => point);
+		}
+		focus.capture(source);
+		controller(reference, source, event, focusIntent);
+	};
+	listen(this, "contextmenu", (event) => {
+		if (event.target?.closest("[data-menu-sub-content=\"true\"],[data-menu-content=\"true\"]")) event.preventDefault();
+	});
+	for (const args of this) {
+		provideContextMenuComposition(invoke, focus.restore);
+		yield /* @__PURE__ */ jsx(Menu, {
+			disabled: args.disabled,
+			onOpenChange: args.onOpenChange,
+			children: args.children
+		});
+	}
+};
+/** Root provider for a context menu. */
+var ContextMenu = ({ children, class: classes, disabled, onOpenChange, ...attrs }) => /* @__PURE__ */ jsx(ContextMenuRoot, {
+	...statefulRootAttrs(attrs),
+	disabled,
+	onOpenChange,
+	"attr:class": classes,
+	"attr:data-slot": "context-menu",
+	children
+});
+/** The single region that invokes its ContextMenu by pointer or keyboard. */
+var ContextMenuTrigger = ({ children, class: classes, disabled, id, ref, tabindex, "set:oncontextmenu": onContextMenu, "set:onkeydown": onKeydown, ...attrs }) => {
+	const menu = menuInvocation();
+	const disabledFlag = Boolean(disabled ?? menu?.disabled);
+	const adoptedId = menu?.adoptTriggerId(id);
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		"aria-controls": menu?.contentId,
+		"aria-disabled": disabledFlag ? "true" : void 0,
+		"aria-expanded": menu?.open ? "true" : "false",
+		"aria-haspopup": "menu",
+		class: classes,
+		"data-disabled": disabledFlag ? "true" : void 0,
+		"data-slot": "context-menu-trigger",
+		"data-state": menu?.open ? "open" : "closed",
+		id: adoptedId ?? id,
+		ref,
+		"set:oncontextmenu": (event) => {
+			const element = event.currentTarget;
+			callHandler(onContextMenu, event);
+			if (event.defaultPrevented || disabledFlag) return;
+			event.preventDefault();
+			menu?.invoke(event.clientX, event.clientY, event, element, "content");
+		},
+		"set:onkeydown": (event) => {
+			const element = event.currentTarget;
+			callHandler(onKeydown, event);
+			if (event.defaultPrevented || disabledFlag) return;
+			if (event.key !== "ContextMenu" && !(event.key === "F10" && event.shiftKey)) return;
+			event.preventDefault();
+			const rect = element.getBoundingClientRect();
+			menu?.invoke(rect.left, rect.bottom, event, element, "first");
+		},
+		tabindex: disabledFlag ? void 0 : tabindex ?? 0,
+		children
+	});
+};
+/** Popover menu content opened by a ContextMenuTrigger. */
+var ContextMenuContent = withSlot(MenuContent, "context-menu-content");
+/** Standard context menu action item. */
+var ContextMenuItem = withSlot(MenuItem, "context-menu-item");
+/** Checkable context menu item. */
+var ContextMenuCheckboxItem = withSlot(MenuCheckboxItem, "context-menu-checkbox-item");
+/** Radio group inside a context menu. */
+var ContextMenuRadioGroup = withSlot(MenuRadioGroup, "context-menu-radio-group");
+/** Radio item inside a context menu radio group. */
+var ContextMenuRadioItem = withSlot(MenuRadioItem, "context-menu-radio-item");
+/** Group of context menu items. */
+var ContextMenuGroup = withSlot(MenuGroup, "context-menu-group");
+/** Non-interactive label inside a context menu. */
+var ContextMenuLabel = withSlot(MenuLabel, "context-menu-label");
+/** Visual separator between context menu groups. */
+var ContextMenuSeparator = withSlot(MenuSeparator, "context-menu-separator");
+/** Right-aligned shortcut hint inside a context menu item. */
+var ContextMenuShortcut = withSlot(MenuShortcut, "context-menu-shortcut");
+/** Root provider for a context submenu. */
+var ContextMenuSub = withSlot(MenuSub, "context-menu-sub");
+/** Trigger item that opens a context submenu. */
+var ContextMenuSubTrigger = withSlot(MenuSubTrigger, "context-menu-sub-trigger");
+/** Content for a context submenu. */
+var ContextMenuSubContent = withSlot(MenuSubContent, "context-menu-sub-content");
+//#endregion
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };

package/dist/data-table.js

@@ -0,0 +1,5 @@
+import "./checkbox.js";
+import { t as DataTable } from "./chunks/data-table-DpkWv4y4.js";
+import "./select.js";
+import "./toolbar.js";
+export { DataTable, DataTable as default };

package/dist/dialog.js

@@ -0,0 +1,207 @@
+import { triggerAttrs } from "./utils.js";
+import { callHandler, callRef, controlled, id, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/dialog.tsx
+var DialogContext = context(null);
+var dialog = () => {
+	const value = DialogContext();
+	if (!value) throw new Error("Dialog component must be used within Dialog.");
+	return value;
+};
+var outside = (element, event) => {
+	const rect = element.getBoundingClientRect();
+	return event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom;
+};
+var DialogRoot = function* ({ defaultOpen, open }) {
+	const dialogId = id("dialog");
+	const watched = /* @__PURE__ */ new WeakSet();
+	let content = null;
+	let modal = true;
+	let onOpenChange;
+	let syncing = false;
+	let trigger = null;
+	const state = controlled(this, {
+		fallback: Boolean(open ?? defaultOpen),
+		onChange: (next, event) => onOpenChange?.(next, event)
+	});
+	let current = state.value;
+	const focusTrigger = () => queueMicrotask(() => trigger?.focus());
+	const sync = () => queueMicrotask(() => {
+		if (!content) return;
+		syncing = true;
+		try {
+			if (current && !content.open) if (modal) content.showModal();
+			else content.show();
+			else if (!current && content.open) content.close();
+		} finally {
+			queueMicrotask(() => syncing = false);
+		}
+	});
+	const setOpen = (next, event) => {
+		if (next === current) return;
+		state.set(next, event);
+		current = state.value;
+		sync();
+		if (!next) focusTrigger();
+	};
+	const setContent = (element) => {
+		content = element;
+		if (!element || watched.has(element)) return;
+		watched.add(element);
+		element.addEventListener("close", (event) => {
+			if (syncing || current === false) return;
+			state.accept(false, event);
+			current = state.value;
+			focusTrigger();
+		}, { signal: this.signal });
+	};
+	for (const args of this) {
+		modal = args.modal !== false;
+		onOpenChange = args.onOpenChange;
+		current = state.sync(args.open == null ? void 0 : Boolean(args.open));
+		DialogContext({
+			close: (event) => setOpen(false, event),
+			contentId: `${dialogId}-content`,
+			descriptionId: `${dialogId}-description`,
+			modal,
+			open: current,
+			setContent,
+			setOpen,
+			setTrigger: (element) => trigger = element,
+			titleId: `${dialogId}-title`,
+			triggerId: `${dialogId}-trigger`
+		});
+		sync();
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+/** Unstyled root provider for a native dialog. */
+var Dialog = ({ children, class: classes, "data-slot": slot = "dialog", defaultOpen, modal, onOpenChange, open, ...attrs }) => /* @__PURE__ */ jsx(DialogRoot, {
+	...statefulRootAttrs(attrs),
+	defaultOpen,
+	modal,
+	onOpenChange,
+	open,
+	"attr:class": classes,
+	"attr:data-slot": slot,
+	children
+});
+/** Unstyled button that opens the nearest Dialog. */
+var DialogTrigger = ({ children, "data-slot": slot = "dialog-trigger", disabled, id, ref, type = "button", "set:onclick": onClick, ...attrs }) => {
+	const ctx = dialog();
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		...triggerAttrs({
+			controls: ctx.contentId,
+			expanded: ctx.open,
+			id,
+			open: ctx.open,
+			ref,
+			setTrigger: ctx.setTrigger,
+			triggerId: ctx.triggerId
+		}),
+		"data-slot": slot,
+		disabled,
+		type,
+		"set:onclick": (event) => {
+			callHandler(onClick, event);
+			if (event.defaultPrevented || disabled) return;
+			ctx.setOpen(true, event);
+		},
+		children
+	});
+};
+/** Unstyled button that closes the nearest Dialog. */
+var DialogClose = ({ children, "data-slot": slot = "dialog-close", disabled, type = "button", "set:onclick": onClick, ...attrs }) => {
+	const ctx = dialog();
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		"data-slot": slot,
+		disabled,
+		type,
+		"set:onclick": (event) => {
+			callHandler(onClick, event);
+			if (event.defaultPrevented || disabled) return;
+			ctx.close(event);
+		},
+		children
+	});
+};
+/** Unstyled native dialog panel. */
+var DialogContent = ({ children, class: classes, "data-slot": slot = "dialog-content", onEscapeKeyDown, onPointerDownOutside, ref, "aria-describedby": describedBy, "aria-labelledby": labelledBy, "set:oncancel": onCancel, "set:onclick": onClick, "set:onkeydown": onKeydown, ...attrs }) => {
+	const ctx = dialog();
+	const reference = (element) => {
+		ctx.setContent(element);
+		callRef(ref, element);
+	};
+	return /* @__PURE__ */ jsxs("dialog", {
+		...attrs,
+		"aria-describedby": describedBy ?? ctx.descriptionId,
+		"aria-labelledby": labelledBy ?? ctx.titleId,
+		"aria-modal": ctx.modal ? "true" : void 0,
+		class: classes,
+		"data-slot": slot,
+		"data-state": ctx.open ? "open" : "closed",
+		id: ctx.contentId,
+		ref: reference,
+		"set:oncancel": (event) => {
+			callHandler(onCancel, event);
+			if (event.defaultPrevented) return;
+			if (event.cancelable) event.preventDefault();
+			ctx.close(event);
+		},
+		"set:onclick": (event) => {
+			callHandler(onClick, event);
+			if (event.defaultPrevented) return;
+			const target = event.currentTarget;
+			if (event.target === target && outside(target, event)) {
+				onPointerDownOutside?.(event);
+				if (!event.defaultPrevented) ctx.close(event);
+			}
+		},
+		"set:onkeydown": (event) => {
+			if (event.key === "Escape") onEscapeKeyDown?.(event);
+			callHandler(onKeydown, event);
+		},
+		children: [children, /* @__PURE__ */ jsx("div", {
+			"data-slot": "dialog-portal",
+			skip: true,
+			style: "display:contents"
+		}, "dialog-portal")]
+	});
+};
+/** Unstyled header area for dialog title and description. */
+var DialogHeader = ({ children, "data-slot": slot = "dialog-header", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	"data-slot": slot,
+	children
+});
+/** Unstyled footer area for dialog actions. */
+var DialogFooter = ({ children, "data-slot": slot = "dialog-footer", ...attrs }) => /* @__PURE__ */ jsx("div", {
+	...attrs,
+	"data-slot": slot,
+	children
+});
+/** Accessible title for DialogContent. */
+var DialogTitle = ({ children, "data-slot": slot = "dialog-title", id, ...attrs }) => {
+	const ctx = DialogContext();
+	return /* @__PURE__ */ jsx("h2", {
+		...attrs,
+		"data-slot": slot,
+		id: id ?? ctx?.titleId,
+		children
+	});
+};
+/** Accessible description for DialogContent. */
+var DialogDescription = ({ children, "data-slot": slot = "dialog-description", id, ...attrs }) => {
+	const ctx = DialogContext();
+	return /* @__PURE__ */ jsx("p", {
+		...attrs,
+		"data-slot": slot,
+		id: id ?? ctx?.descriptionId,
+		children
+	});
+};
+//#endregion
+export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger };

package/dist/direction.js

@@ -0,0 +1,22 @@
+import { statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/direction.tsx
+/** Direction inherited by direction-aware components. */
+var DirectionContext = context("ltr");
+var DirectionRoot = function* () {
+	for (const { children, dir } of this) {
+		DirectionContext(dir);
+		yield /* @__PURE__ */ jsx(Fragment, { children });
+	}
+};
+/** Unstyled provider that sets direction context and an inherited HTML `dir` attribute. */
+var DirectionProvider = ({ children, dir = "ltr", ...attrs }) => /* @__PURE__ */ jsx(DirectionRoot, {
+	...statefulRootAttrs(attrs),
+	dir,
+	"attr:data-slot": "direction-provider",
+	"attr:dir": dir,
+	children
+});
+//#endregion
+export { DirectionContext, DirectionProvider };