@nizivo/react 0.0.0-stage → 0.1.0

package/dist/_engines/react-aria/menu.client.js

@@ -0,0 +1,225 @@
+"use client";
+import { mergeProps } from "../../contracts/merge-props.js";
+import { details } from "../../contracts/details.js";
+import { stateAttrs } from "../../contracts/state.js";
+import { defined, engineDom } from "./dom.js";
+import { EngineLocale } from "./locale.client.js";
+import { popupStyle, resolveSide, toPlacement } from "./overlay.client.js";
+import { ReturnFocus, useTabOut, useTriggerRef } from "./popup.client.js";
+import { Children, createContext, createElement, isValidElement, use, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Header, Menu, MenuItem, MenuSection, MenuTrigger, Popover, RootMenuTriggerStateContext, Separator, useLocale } from "react-aria-components";
+//#region src/_engines/react-aria/menu.client.tsx
+/**
+* Uncontrolled checkbox and radio state, kept by the Root: the popup and everything in it unmount on
+* close, so state held there would reset on every open. A checkbox item is identified by its text, a
+* radio group by its items' values; without either, the state lasts while the popup is open.
+*/
+const Kept = createContext(null);
+function useKept(key, initial, read) {
+	const store = use(Kept);
+	const [value, setValue] = useState(() => {
+		const kept = key === void 0 ? void 0 : store?.get(key);
+		return read(kept) ? kept : initial;
+	});
+	return [value, (next) => {
+		if (key !== void 0) store?.set(key, next);
+		setValue(next);
+	}];
+}
+const isBoolean = (value) => typeof value === "boolean";
+const isChoice = (value) => typeof value === "string" || value === null;
+/** The `value` props of the radio items under `children`, through fragments and wrappers. */
+function itemValues(children, out = []) {
+	Children.forEach(children, (child) => {
+		if (!isValidElement(child)) return;
+		if (typeof child.props.value === "string") out.push(child.props.value);
+		else itemValues(child.props.children, out);
+	});
+	return out;
+}
+const Root = ({ open, defaultOpen, onOpenChange, children }) => {
+	const [store] = useState(() => /* @__PURE__ */ new Map());
+	return /* @__PURE__ */ jsx(EngineLocale, { children: /* @__PURE__ */ jsx(Kept, {
+		value: store,
+		children: /* @__PURE__ */ jsx(MenuTrigger, {
+			...defined({
+				isOpen: open,
+				defaultOpen
+			}),
+			onOpenChange: (isOpen) => onOpenChange?.(isOpen, details("unknown")),
+			children
+		})
+	}) });
+};
+const Trigger = ({ render, children, ...dom }) => {
+	const open = use(RootMenuTriggerStateContext)?.isOpen ?? false;
+	return /* @__PURE__ */ jsx(Button, {
+		render: (p, rp) => {
+			const s = {
+				open,
+				pressed: rp.isPressed && !open,
+				focusVisible: rp.isFocusVisible,
+				disabled: rp.isDisabled
+			};
+			return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+		},
+		children
+	});
+};
+/**
+* The engine names the menu by its trigger (`aria-labelledby`), which would outrank an `aria-label`
+* the leaf passes; with one, the label names the menu instead.
+*/
+function listDom(engine, list) {
+	const out = engineDom(engine);
+	if (list["aria-label"] !== void 0) delete out["aria-labelledby"];
+	return out;
+}
+const Popup = ({ side, align, sideOffset, container, list, render, children, ...dom }) => {
+	const { direction } = useLocale();
+	const popup = useRef(null);
+	const tabOut = useTabOut(popup);
+	const trigger = useTriggerRef();
+	return /* @__PURE__ */ jsxs(Popover, {
+		placement: toPlacement(side, align),
+		offset: sideOffset,
+		...defined({ UNSTABLE_portalContainer: container ?? void 0 }),
+		render: (p, rp) => {
+			const s = {
+				entering: rp.isEntering,
+				exiting: rp.isExiting,
+				side: resolveSide(rp.placement, side, direction)
+			};
+			const engine = {
+				...engineDom(p),
+				style: popupStyle(p.style)
+			};
+			const attrs = stateAttrs({
+				open: !rp.isExiting,
+				...s,
+				align
+			});
+			return render(mergeProps(engine, dom, attrs, { ref: popup }), s);
+		},
+		children: [/* @__PURE__ */ jsx(ReturnFocus, {
+			trigger,
+			popup
+		}), /* @__PURE__ */ jsx(Menu, {
+			render: (p) => createElement("div", mergeProps(listDom(p, list), list, { onKeyDown: tabOut })),
+			children
+		})]
+	});
+};
+const Item = ({ textValue, disabled, onAction, closeOnSelect, href, target, rel, download, hrefLang, ping, referrerPolicy, render, children, ...dom }) => /* @__PURE__ */ jsx(MenuItem, {
+	...defined({
+		textValue,
+		isDisabled: disabled,
+		onAction,
+		shouldCloseOnSelect: closeOnSelect,
+		href,
+		target,
+		rel,
+		download,
+		hrefLang,
+		ping,
+		referrerPolicy
+	}),
+	render: (p, rp) => {
+		const s = {
+			highlighted: rp.isFocused,
+			disabled: rp.isDisabled,
+			focusVisible: rp.isFocusVisible,
+			checked: false
+		};
+		return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+	},
+	children
+});
+/**
+* React Aria derives checkbox semantics from a selection scope (a Menu or MenuSection with
+* `selectionMode`), which would turn every item in that scope into a checkbox. A checkbox item owns
+* its own state instead: the adapter keeps it, toggles it on the item's action and writes the
+* `menuitemcheckbox` role and `aria-checked` the engine would have written.
+*/
+const CheckboxItem = ({ checked, defaultChecked, onCheckedChange, textValue, disabled, onAction, closeOnSelect, render, children, ...dom }) => {
+	const [own, setOwn] = useKept(textValue === void 0 ? void 0 : `checkbox:${textValue}`, defaultChecked ?? false, isBoolean);
+	const isChecked = checked ?? own;
+	return /* @__PURE__ */ jsx(MenuItem, {
+		...defined({
+			textValue,
+			isDisabled: disabled
+		}),
+		shouldCloseOnSelect: closeOnSelect ?? false,
+		onAction: () => {
+			const next = !isChecked;
+			if (checked === void 0) setOwn(next);
+			onCheckedChange?.(next, details("item-press"));
+			onAction?.();
+		},
+		render: (p, rp) => {
+			const s = {
+				highlighted: rp.isFocused,
+				disabled: rp.isDisabled,
+				focusVisible: rp.isFocusVisible,
+				checked: isChecked
+			};
+			const aria = {
+				role: "menuitemcheckbox",
+				"aria-checked": isChecked
+			};
+			return render(mergeProps(engineDom(p), aria, dom, stateAttrs(s)), s);
+		},
+		children
+	});
+};
+/** A single-selection scope: React Aria gives its items `menuitemradio` and `aria-checked`. */
+const RadioGroup = ({ value, defaultValue, onValueChange, render, children, ...dom }) => {
+	const values = itemValues(children);
+	const [own, setOwn] = useKept(values.length === 0 ? void 0 : `radio:${values.join("\0")}`, defaultValue ?? null, isChoice);
+	const current = value === void 0 ? own : value;
+	return /* @__PURE__ */ jsx(MenuSection, {
+		selectionMode: "single",
+		disallowEmptySelection: true,
+		selectedKeys: current === null ? [] : [current],
+		onSelectionChange: (selection) => {
+			if (selection === "all") return;
+			const [key] = selection;
+			if (key === void 0) return;
+			if (value === void 0) setOwn(String(key));
+			onValueChange?.(String(key), details("unknown"));
+		},
+		render: (p) => render(mergeProps(engineDom(p), dom), {}),
+		children
+	});
+};
+const RadioItem = ({ value, textValue, disabled, onAction, closeOnSelect, render, children, ...dom }) => /* @__PURE__ */ jsx(MenuItem, {
+	id: value,
+	...defined({
+		textValue,
+		isDisabled: disabled,
+		onAction,
+		shouldCloseOnSelect: closeOnSelect
+	}),
+	render: (p, rp) => {
+		const s = {
+			highlighted: rp.isFocused,
+			disabled: rp.isDisabled,
+			focusVisible: rp.isFocusVisible,
+			checked: rp.isSelected
+		};
+		return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+	},
+	children
+});
+const Group = ({ render, children, ...dom }) => /* @__PURE__ */ jsx(MenuSection, {
+	render: (p) => render(mergeProps(engineDom(p), dom), {}),
+	children
+});
+const GroupLabel = ({ render, children, ...dom }) => /* @__PURE__ */ jsx(Header, {
+	render: (p) => render(mergeProps(engineDom(p), dom), {}),
+	children
+});
+const Separator$1 = ({ render, ...dom }) => /* @__PURE__ */ jsx(Separator, { render: (p) => render(mergeProps(engineDom(p), dom), {}) });
+//#endregion
+export { CheckboxItem, Group, GroupLabel, Item, Popup, RadioGroup, RadioItem, Root, Separator$1 as Separator, Trigger };

package/dist/_engines/react-aria/overlay.client.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { UNSAFE_PortalProvider } from "react-aria/PortalProvider";
+//#region src/_engines/react-aria/overlay.client.tsx
+/** Nested overlays rendered inside `children` portal into `container` (§12.1 L2). */
+function OverlayScope({ container, children }) {
+	return /* @__PURE__ */ jsx(UNSAFE_PortalProvider, {
+		getContainer: () => container.current ?? (typeof document === "undefined" ? null : document.body),
+		children
+	});
+}
+/** React Aria's inert exemption, as props for an element the adapter renders itself. */
+const TOP_LAYER = { "data-react-aria-top-layer": "" };
+/** Logical side + alignment → a React Aria placement. */
+function toPlacement(side, align) {
+	if (align === "center") return side;
+	if (side === "top" || side === "bottom") return `${side} ${align}`;
+	return `${side} ${align === "start" ? "top" : "bottom"}`;
+}
+/** The resolved physical side: the engine's placement after flip and RTL, else the requested side. */
+function resolveSide(placement, requested, direction) {
+	if (placement === "top" || placement === "bottom" || placement === "left" || placement === "right") return placement;
+	if (requested === "start") return direction === "rtl" ? "right" : "left";
+	if (requested === "end") return direction === "rtl" ? "left" : "right";
+	return requested;
+}
+/**
+* The engine's positioning style without its fixed `z-index` (popups sit in the one
+* `--nz-z-overlay` band, §12.1), plus the runtime variables Nizivo documents (§8.3).
+*/
+function popupStyle(style) {
+	if (typeof style !== "object" || style === null) return void 0;
+	const out = {};
+	for (const [key, value] of Object.entries(style)) if (key !== "zIndex") out[key] = value;
+	if (out["--trigger-width"] != null) out["--nz-trigger-width"] = out["--trigger-width"];
+	if (out["--trigger-anchor-point"] != null) out["--nz-transform-origin"] = out["--trigger-anchor-point"];
+	if (typeof out["maxHeight"] === "number") out["--nz-available-height"] = `${out["maxHeight"]}px`;
+	return out;
+}
+//#endregion
+export { OverlayScope, TOP_LAYER, popupStyle, resolveSide, toPlacement };

package/dist/_engines/react-aria/popup.client.js

@@ -0,0 +1,127 @@
+"use client";
+import { use, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { OverlayTriggerStateContext, PopoverContext } from "react-aria-components";
+//#region src/_engines/react-aria/popup.client.tsx
+const TABBABLE = "a[href], area[href], button, input, select, textarea, iframe, summary, [tabindex], [contenteditable]:not([contenteditable=\"false\"])";
+/**
+* The tabbable element after (or before) `from` in its dialog, else in the document, skipping `skip`
+* (the popup itself). `inert` is not checked: the engine marks the page inert while the popup is
+* open, and lifts it as the popup closes.
+*/
+function adjacentTabbable(from, backwards, skip) {
+	const root = from.closest("[role=\"dialog\"], [role=\"alertdialog\"], dialog") ?? from.ownerDocument;
+	const order = backwards ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;
+	const candidates = [...root.querySelectorAll(TABBABLE)].filter((element) => element.tabIndex >= 0 && !element.matches(":disabled") && (skip === null || !skip.contains(element)) && !from.contains(element) && (from.compareDocumentPosition(element) & order) !== 0 && element.getClientRects().length > 0);
+	return backwards ? candidates.at(-1) : candidates[0];
+}
+/**
+* Tab and Shift+Tab out of a menu or listbox popup (§12.2 Dismiss stack; APG menu button): the popup
+* closes and focus moves to the element after (or before) its trigger. React Aria 1.22.1 keeps Tab
+* inside its modal popovers, so the adapter handles the key on the popup's list element.
+*/
+function useTabOut(popup) {
+	const state = use(OverlayTriggerStateContext);
+	const context = use(PopoverContext);
+	const trigger = typeof context === "object" && context !== null && "triggerRef" in context ? context.triggerRef : void 0;
+	return (event) => {
+		if (event.key !== "Tab" || event.altKey || event.ctrlKey || event.metaKey) return;
+		const from = typeof trigger === "object" && trigger !== null && "current" in trigger ? trigger.current : void 0;
+		if (state === null || !(from instanceof HTMLElement)) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const target = adjacentTabbable(from, event.shiftKey, popup.current) ?? from;
+		state.close();
+		requestAnimationFrame(() => target.focus());
+	};
+}
+function isElementRef(value) {
+	return typeof value === "object" && value !== null && "current" in value && (value.current === null || value.current instanceof HTMLElement);
+}
+/** The enclosing MenuTrigger's, Select's or DialogTrigger's trigger, from the engine's PopoverContext. */
+function useTriggerRef() {
+	const context = use(PopoverContext);
+	const ref = typeof context === "object" && context !== null && "triggerRef" in context ? context.triggerRef : void 0;
+	return isElementRef(ref) ? ref : void 0;
+}
+/** The family's open popups and their triggers: the parent-overlay step below. */
+const OPEN = /* @__PURE__ */ new Map();
+/**
+* React Aria's FocusScope dispatches this cancelable event on the element it is about to focus when a
+* scope unmounts with focus lost to <body> (react-aria 3.53.1, FocusScope `restoreFocusToElement`); a
+* prevented event leaves focus alone. It is how `returnFocus` overrides the engine's choice.
+*/
+const ENGINE_RESTORE = "react-aria-focus-scope-restore";
+/** A focus target: on the page, and not <body> (where focus is when nothing has it). */
+const usable = (element) => element instanceof HTMLElement && element.isConnected && element !== element.ownerDocument.body;
+/** Whether the popup is still in the DOM: Strict Mode's mount-time replay of the effect. */
+const mounted = (popup) => popup.current?.isConnected === true;
+/** The element a `returnFocus` ref or function names, if any. */
+const named = (target) => typeof target === "function" ? target() : typeof target === "object" ? target.current : null;
+/**
+* Focus return (§12.2): `returnFocus` (`true`, an element ref, a function returning one, or `false`)
+* → the original trigger if still connected → the element that had focus as the popup opened → the
+* parent overlay's trigger (a Dialog opened from a Menu item returns to the Menu button) → <body>,
+* with a development warning. Rendered inside every modal popup of the family (Dialog, Menu,
+* Select).
+*
+* React Aria returns focus to the element that had it when the popup opened, which covers the
+* common case; this completes the chain where it has nowhere to go: a popup open on the server
+* (`defaultOpen`) or opened from code with nothing focused, and a Dialog opened from an item of a
+* Menu that had no focus origin of its own loses its opener with the Menu. Each popup registers
+* itself while open, so one opened from inside another records that one's trigger as its parent
+* step. It never moves focus that went somewhere (an outside click on a control, Tab out of a
+* menu).
+*/
+function ReturnFocus({ trigger, popup, target = true }) {
+	const [origin] = useState(() => {
+		const opener = globalThis.document?.activeElement;
+		let parent;
+		for (const [open, openTrigger] of OPEN) if (opener != null && open.current?.contains(opener)) parent = openTrigger?.current;
+		return [opener, parent];
+	});
+	const latest = useRef(target);
+	useLayoutEffect(() => {
+		latest.current = target;
+	});
+	const shown = useRef(false);
+	useEffect(() => {
+		if (mounted(popup)) shown.current = true;
+	});
+	useLayoutEffect(() => {
+		const element = trigger?.current;
+		OPEN.set(popup, trigger);
+		return () => {
+			OPEN.delete(popup);
+			const doc = document;
+			let handled = false;
+			const onRestore = (event) => {
+				const own = latest.current;
+				const to = named(own);
+				if (event.defaultPrevented || mounted(popup) || own !== false && !usable(to)) return;
+				event.preventDefault();
+				handled = true;
+				if (usable(to)) to.focus();
+			};
+			doc.addEventListener(ENGINE_RESTORE, onRestore, true);
+			requestAnimationFrame(() => {
+				doc.removeEventListener(ENGINE_RESTORE, onRestore, true);
+				const own = latest.current;
+				if (handled || !shown.current || own === false || mounted(popup) || (doc.activeElement ?? doc.body) !== doc.body) return;
+				const next = [
+					named(own),
+					element,
+					...origin
+				].find(usable);
+				if (next) next.focus();
+				else if (process.env.NODE_ENV !== "production") console.warn("Nizivo: an overlay closed and focus had nowhere to return (its trigger, the element that opened it and its parent overlay are gone), so it is on <body>. Pass `returnFocus` an element that stays on the page.");
+			});
+		};
+	}, [
+		trigger,
+		popup,
+		origin
+	]);
+	return null;
+}
+//#endregion
+export { ReturnFocus, useTabOut, useTriggerRef };

package/dist/_engines/react-aria/select.client.js

@@ -0,0 +1,170 @@
+"use client";
+import { mergeProps } from "../../contracts/merge-props.js";
+import { details } from "../../contracts/details.js";
+import { stateAttrs } from "../../contracts/state.js";
+import { defined, engineDom } from "./dom.js";
+import { EngineLocale } from "./locale.client.js";
+import { popupStyle, resolveSide, toPlacement } from "./overlay.client.js";
+import { ReturnFocus, useTabOut, useTriggerRef } from "./popup.client.js";
+import { createElement, use, useEffect, useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Header, ListBox, ListBoxItem, ListBoxSection, Popover, Select, SelectStateContext, SelectValue, Separator, useLocale } from "react-aria-components";
+//#region src/_engines/react-aria/select.client.tsx
+/**
+* React Aria 1.22.1 resets the state on the form's `reset`, then the browser resets the hidden native
+* <select> to its empty first option, and React never writes the value back (its prop did not
+* change after the reset): the trigger showed the default while FormData had ''. After the browser's
+* reset, the hidden <select> takes the state's value again.
+*/
+function FormReset({ root }) {
+	const value = use(SelectStateContext)?.value;
+	const latest = useRef(value);
+	useLayoutEffect(() => {
+		latest.current = value;
+	});
+	useEffect(() => {
+		const select = root.current?.querySelector("select");
+		const form = select?.form;
+		const onReset = () => {
+			setTimeout(() => {
+				if (select) select.value = String(latest.current ?? "");
+			});
+		};
+		form?.addEventListener("reset", onReset);
+		return () => form?.removeEventListener("reset", onReset);
+	}, [root]);
+	return null;
+}
+const Root = ({ value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, name, required, disabled, invalid, placeholder, "aria-label": label, "aria-labelledby": labelledBy, render, children, ...dom }) => {
+	const root = useRef(null);
+	return /* @__PURE__ */ jsx(EngineLocale, { children: /* @__PURE__ */ jsxs(Select, {
+		...defined({
+			value,
+			defaultValue,
+			isOpen: open,
+			defaultOpen,
+			name,
+			isRequired: required,
+			isDisabled: disabled,
+			isInvalid: invalid,
+			placeholder,
+			"aria-label": label,
+			"aria-labelledby": labelledBy
+		}),
+		onChange: (key) => onValueChange?.(key == null ? null : String(key), details("unknown")),
+		onOpenChange: (isOpen) => onOpenChange?.(isOpen, details("unknown")),
+		validationBehavior: "native",
+		render: (p, rp) => {
+			const s = {
+				open: rp.isOpen,
+				disabled: rp.isDisabled
+			};
+			const attrs = stateAttrs({
+				...s,
+				required: rp.isRequired,
+				invalid
+			});
+			return render(mergeProps(engineDom(p), dom, attrs, { ref: root }), s);
+		},
+		children: [children, /* @__PURE__ */ jsx(FormReset, { root })]
+	}) });
+};
+const Trigger = ({ id, "aria-label": label, "aria-describedby": describedBy, render, children, ...dom }) => {
+	const open = use(SelectStateContext)?.isOpen ?? false;
+	return /* @__PURE__ */ jsx(Button, {
+		...defined({
+			id,
+			"aria-label": label,
+			"aria-describedby": describedBy
+		}),
+		render: (p, rp) => {
+			const s = {
+				open,
+				pressed: rp.isPressed && !open,
+				focusVisible: rp.isFocusVisible,
+				disabled: rp.isDisabled
+			};
+			return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+		},
+		children
+	});
+};
+const Value = ({ render, children, ...dom }) => /* @__PURE__ */ jsx(SelectValue, {
+	render: (p, rp) => {
+		const s = { placeholder: rp.isPlaceholder };
+		return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+	},
+	children
+});
+const Popup = ({ side, align, sideOffset, container, list, render, children, ...dom }) => {
+	const { direction } = useLocale();
+	const popup = useRef(null);
+	const tabOut = useTabOut(popup);
+	const trigger = useTriggerRef();
+	return /* @__PURE__ */ jsxs(Popover, {
+		placement: toPlacement(side, align),
+		offset: sideOffset,
+		...defined({ UNSTABLE_portalContainer: container ?? void 0 }),
+		render: (p, rp) => {
+			const s = {
+				entering: rp.isEntering,
+				exiting: rp.isExiting,
+				side: resolveSide(rp.placement, side, direction)
+			};
+			const engine = {
+				...engineDom(p),
+				style: popupStyle(p.style)
+			};
+			const attrs = stateAttrs({
+				open: !rp.isExiting,
+				...s,
+				align
+			});
+			return render(mergeProps(engine, dom, attrs, { ref: popup }), s);
+		},
+		children: [/* @__PURE__ */ jsx(ReturnFocus, {
+			trigger,
+			popup
+		}), /* @__PURE__ */ jsx(ListBox, {
+			render: (p) => createElement("div", mergeProps(engineDom(p), list, { onKeyDown: tabOut })),
+			children
+		})]
+	});
+};
+const Item = ({ value, textValue, disabled, render, children, ...dom }) => /* @__PURE__ */ jsx(ListBoxItem, {
+	id: value,
+	...defined({
+		textValue,
+		isDisabled: disabled
+	}),
+	render: (p, rp) => {
+		const s = {
+			highlighted: rp.isFocused,
+			selected: rp.isSelected,
+			disabled: rp.isDisabled,
+			focusVisible: rp.isFocusVisible
+		};
+		return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+	},
+	children
+});
+const Group = ({ render, children, ...dom }) => /* @__PURE__ */ jsx(ListBoxSection, {
+	render: (p) => render(mergeProps(engineDom(p), dom), {}),
+	children
+});
+const GroupLabel = ({ render, children, ...dom }) => /* @__PURE__ */ jsx(Header, {
+	render: (p) => render(mergeProps(engineDom(p), dom), {}),
+	children
+});
+/** ARIA allows only option and group inside a listbox (axe aria-required-children), so the rule is
+* presentational: React Aria's role="separator" and its orientation are dropped. */
+function presentational(props) {
+	const { role: _role, "aria-orientation": _orientation, ...rest } = engineDom(props);
+	return {
+		...rest,
+		role: "presentation"
+	};
+}
+const Separator$1 = ({ render, ...dom }) => /* @__PURE__ */ jsx(Separator, { render: (p) => render(mergeProps(presentational(p), dom), {}) });
+//#endregion
+export { Group, GroupLabel, Item, Popup, Root, Separator$1 as Separator, Trigger, Value };

package/dist/_engines/react-aria/tabs.client.js

@@ -0,0 +1,95 @@
+"use client";
+import { mergeProps } from "../../contracts/merge-props.js";
+import { details } from "../../contracts/details.js";
+import { stateAttrs } from "../../contracts/state.js";
+import { defined, engineDom } from "./dom.js";
+import { EngineLocale } from "./locale.client.js";
+import { createContext, use } from "react";
+import { jsx } from "react/jsx-runtime";
+import { I18nProvider, Tab, TabList, TabPanel, Tabs, useLocale } from "react-aria-components";
+//#region src/_engines/react-aria/tabs.client.tsx
+/**
+* The nearest Tabs root's `dir`, for its list. A root without `dir` inherits it, so a strip nested in
+* the panel of a `dir` root keys the way CSS lays it out (the attribute is inherited). Unset at every
+* level: the direction of the locale (EngineLocale).
+*/
+const Dir = createContext(void 0);
+/**
+* The arrows' direction (M26). React Aria has one direction input, the locale `I18nProvider` is
+* given, and only the tab list reads it (`useTabList` and `useSelectableCollection`, for the
+* arrows). So the list alone gets a locale whose direction is `dir`: the scope's locale when it
+* already has that direction (every render without `dir` is unchanged), else `ar` or `en`. Nothing
+* in the list formats, collates or speaks a string (the tabs delegate has no type-ahead), and each
+* tab's content gets the scope's locale back (`Tab`), so that locale only carries the direction to
+* the list's own hooks. A script subtag (`en-Arab-US`) would keep the language, but
+* WebKit 27.2 derives `Intl.Locale` text direction from the language only and reads it as `ltr`.
+* The provider is always rendered, so changing `dir` never remounts the list and drops focus.
+*/
+function Directed({ children }) {
+	const dir = use(Dir);
+	const { locale, direction } = useLocale();
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		locale: dir === void 0 || dir === direction ? locale : dir === "rtl" ? "ar" : "en",
+		children
+	});
+}
+const Root = ({ value, defaultValue, onValueChange, activationMode, disabled, render, children, ...dom }) => {
+	const inherited = use(Dir);
+	return /* @__PURE__ */ jsx(EngineLocale, { children: /* @__PURE__ */ jsx(Dir, {
+		value: dom.dir ?? inherited,
+		children: /* @__PURE__ */ jsx(Tabs, {
+			...defined({
+				selectedKey: value,
+				defaultSelectedKey: defaultValue,
+				isDisabled: disabled
+			}),
+			keyboardActivation: activationMode,
+			onSelectionChange: (key) => onValueChange?.(String(key), details("unknown")),
+			render: (p) => {
+				const s = { disabled: disabled === true };
+				return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+			},
+			children
+		})
+	}) });
+};
+const List = ({ "aria-label": label, "aria-labelledby": labelledBy, "aria-describedby": describedBy, render, children, ...dom }) => /* @__PURE__ */ jsx(Directed, { children: /* @__PURE__ */ jsx(TabList, {
+	...defined({
+		"aria-label": label,
+		"aria-labelledby": labelledBy,
+		"aria-describedby": describedBy
+	}),
+	render: (p, rp) => {
+		const s = { disabled: rp.state.isDisabled };
+		return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+	},
+	children
+}) });
+const Tab$1 = ({ value, disabled, render, children, ...dom }) => /* @__PURE__ */ jsx(Tab, {
+	id: value,
+	...defined({ isDisabled: disabled }),
+	render: (p, rp) => {
+		const s = {
+			selected: rp.isSelected,
+			disabled: rp.isDisabled,
+			focusVisible: rp.isFocusVisible
+		};
+		return render(mergeProps(engineDom(p), dom, stateAttrs(s)), s);
+	},
+	children: /* @__PURE__ */ jsx(EngineLocale, { children })
+});
+const Panel = ({ value, keepMounted, render, children, ...dom }) => /* @__PURE__ */ jsx(TabPanel, {
+	id: value,
+	shouldForceMount: keepMounted,
+	render: (p, rp) => {
+		const s = {
+			selected: !rp.isInert,
+			focusVisible: rp.isFocusVisible
+		};
+		const hidden = rp.isInert ? { hidden: true } : void 0;
+		return render(mergeProps(engineDom(p), dom, hidden, stateAttrs({ focusVisible: s.focusVisible })), s);
+	},
+	children
+});
+//#endregion
+export { List, Panel, Root, Tab$1 as Tab };