ajo-ui 0.1.0

package/dist/navigation-menu.js

@@ -0,0 +1,330 @@
+import { text, triggerAttrs } from "./utils.js";
+import { n as popup, t as contentAttrs } from "./chunks/popup-C8Bb3l_g.js";
+import { t as bar } from "./chunks/bar-CVafh6C1.js";
+import { callHandler, id, listen, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/navigation-menu.tsx
+var RootContext = context(null);
+var ItemContext = context(null);
+var triggers = (root) => Array.from(root.querySelectorAll("[data-navigation-menu-trigger=\"true\"]")).filter((trigger) => !trigger.disabled && trigger.offsetParent !== null && trigger.closest("[data-slot=\"navigation-menu\"]") === root);
+var FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+var NavigationMenuRoot = function* ({ defaultValue, value }) {
+	let closeDelay = 300;
+	const closeFocus = { current: null };
+	let onValueChange;
+	let openDelay = 200;
+	let pendingFocus = "";
+	const state = bar(this, {
+		triggers: () => triggers(this),
+		initialValue: String(value ?? defaultValue ?? ""),
+		onValueChange: (next, event) => onValueChange?.(next, event)
+	});
+	const openTrigger = () => triggers(this).find((trigger) => trigger.dataset.value === state.value);
+	const focusPanel = (trigger) => {
+		const contentId = trigger.getAttribute("aria-controls");
+		(contentId ? document.getElementById(contentId) : null)?.querySelector(FOCUSABLE)?.focus();
+	};
+	const close = (event, focus) => {
+		pendingFocus = "";
+		closeFocus.current = focus ?? null;
+		state.close(event);
+	};
+	listen(this, "keydown", (event) => {
+		if (event.defaultPrevented) return;
+		const target = event.target;
+		if (target?.closest("[data-slot=\"navigation-menu\"]") !== this) return;
+		const trigger = target?.closest("[data-navigation-menu-trigger=\"true\"]");
+		if (!trigger) {
+			if (event.key === "Escape" && state.value) {
+				event.preventDefault();
+				close(event, openTrigger());
+			}
+			return;
+		}
+		if (state.handle(event)) return;
+		if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			const next = trigger.dataset.value ?? "";
+			if (state.value === next) if (event.key === "ArrowDown") focusPanel(trigger);
+			else close(event);
+			else {
+				pendingFocus = next;
+				state.setValue(next, event);
+			}
+		}
+	});
+	listen(this, "focusout", (event) => {
+		if (!state.value) return;
+		const next = event.relatedTarget;
+		if (next && this.contains(next)) return;
+		if (!next && this.contains(document.activeElement)) return;
+		close(event);
+	});
+	for (const args of this) {
+		closeDelay = Math.max(0, Number(args.closeDelay ?? 300));
+		onValueChange = args.onValueChange;
+		openDelay = Math.max(0, Number(args.openDelay ?? 200));
+		state.sync(args.value != null ? String(args.value ?? "") : void 0);
+		if (pendingFocus && pendingFocus !== state.value) pendingFocus = "";
+		if (closeFocus.current) {
+			const target = closeFocus.current;
+			closeFocus.current = null;
+			if (!state.value) queueMicrotask(() => {
+				if (!state.value) target.focus();
+			});
+		}
+		RootContext({
+			close,
+			closeDelay,
+			follow: (next, event) => {
+				pendingFocus = "";
+				state.follow(next, event);
+			},
+			gap: args.gap,
+			open: (next, event) => {
+				if (pendingFocus !== next) pendingFocus = "";
+				state.setValue(next, event);
+			},
+			openDelay,
+			placement: args.placement,
+			takeFocus: (value) => {
+				if (!value || pendingFocus !== value) return false;
+				pendingFocus = "";
+				return true;
+			},
+			value: state.value
+		});
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+NavigationMenuRoot.is = "nav";
+/** Unstyled root landmark and state provider for a navigation menu. */
+var NavigationMenu = ({ children, class: classes, closeDelay, defaultValue, gap, onValueChange, openDelay, placement, value, ...attrs }) => /* @__PURE__ */ jsx(NavigationMenuRoot, {
+	...statefulRootAttrs(attrs),
+	closeDelay,
+	defaultValue,
+	gap,
+	onValueChange,
+	openDelay,
+	placement,
+	value,
+	"attr:class": classes,
+	"attr:data-slot": "navigation-menu",
+	children
+});
+/** Unstyled horizontal list of navigation menu items. */
+var NavigationMenuList = ({ children, class: classes, ...attrs }) => /* @__PURE__ */ jsx("ul", {
+	...attrs,
+	class: classes,
+	"data-slot": "navigation-menu-list",
+	children
+});
+var NavigationMenuItemRoot = function* ({ value }) {
+	const fallback = value ?? id("navigation-menu-item");
+	let disabled = false;
+	let itemValue = String(fallback);
+	let root = null;
+	let item;
+	item = popup(this, {
+		prefix: "navigation-menu",
+		profile: "navigation",
+		initialOpen: false,
+		disabled: () => disabled,
+		hover: {
+			openDelay: () => root?.openDelay ?? 200,
+			closeDelay: () => root?.closeDelay ?? 300
+		},
+		onOpenChange: (next, event) => {
+			if (next) root?.open(itemValue, event);
+			else if (root?.value === itemValue) root.close(event);
+		},
+		reference: (view) => view.trigger,
+		source: (view) => view.trigger,
+		referenceHidden: "close",
+		dismiss: {
+			escape: false,
+			outside: true,
+			inside: (view) => [view.trigger, view.content],
+			onDismiss: (event) => closeItem(event)
+		},
+		onPosition: () => {
+			if (root?.takeFocus(itemValue)) item.content?.querySelector(FOCUSABLE)?.focus();
+		},
+		onSync: (opened) => {
+			if (!opened) cause = "";
+		}
+	});
+	let cause = "";
+	const registerTriggerHover = (hovering, event) => {
+		if (hovering) {
+			if (!item.open) cause = "hover";
+			item.hold("trigger", event);
+			if (!disabled) root?.follow(itemValue, event);
+		} else {
+			if (!item.open && cause === "hover") cause = "";
+			item.release("trigger", event);
+		}
+	};
+	const registerContentHover = (hovering, event) => hovering ? item.hold("content", event) : item.release("content", event);
+	const registerTriggerFocus = (event) => {
+		if (!disabled) root?.follow(itemValue, event);
+	};
+	const openItem = (event) => {
+		if (disabled) return;
+		cause = "press";
+		item.cancelHover();
+		if (root) root.open(itemValue, event);
+		else item.setOpen(true, event);
+	};
+	const closeItem = (event) => root ? root.close(event) : item.close(event);
+	const clickTrigger = (event) => {
+		if (disabled) return;
+		if (!item.open) openItem(event);
+		else if (cause === "hover") {
+			cause = "press";
+			item.cancelHover();
+		} else closeItem(event);
+	};
+	for (const args of this) {
+		root = RootContext();
+		itemValue = String(args.value ?? fallback);
+		disabled = Boolean(args.disabled);
+		const opened = item.sync(root ? root.value === itemValue : null, {
+			placement: root?.placement,
+			gap: root?.gap
+		});
+		if (!opened) cause = "";
+		ItemContext({
+			adoptTriggerId: item.adoptTriggerId,
+			clickTrigger,
+			close: closeItem,
+			contentId: item.contentId,
+			contentStyle: item.contentStyle,
+			disabled,
+			open: opened,
+			registerContentHover,
+			registerTriggerFocus,
+			registerTriggerHover,
+			setContent: item.setContent,
+			setTrigger: item.setTrigger,
+			triggerId: item.triggerId,
+			value: itemValue
+		});
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+};
+NavigationMenuItemRoot.is = "li";
+/** Unstyled top-level item inside a NavigationMenuList. */
+var NavigationMenuItem = ({ children, class: classes, disabled, value, ...attrs }) => /* @__PURE__ */ jsx(NavigationMenuItemRoot, {
+	...statefulRootAttrs(attrs),
+	disabled,
+	value,
+	"attr:class": classes,
+	"attr:data-disabled": disabled ? "true" : void 0,
+	"attr:data-slot": "navigation-menu-item",
+	children
+});
+/** Unstyled button that opens an item content panel. */
+var NavigationMenuTrigger = ({ children, class: classes, disabled, id: idArg, ref, textValue, type = "button", "set:onclick": onClick, "set:onfocus": onFocus, "set:onmouseenter": onMouseEnter, "set:onmouseleave": onMouseLeave, ...attrs }) => {
+	const item = ItemContext();
+	const disabledFlag = Boolean(disabled ?? item?.disabled);
+	const label = textValue ?? text(children);
+	const adoptedId = item?.adoptTriggerId(idArg);
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		...triggerAttrs({
+			controls: item?.contentId,
+			expanded: Boolean(item?.open),
+			id: adoptedId ?? idArg,
+			open: Boolean(item?.open),
+			ref,
+			setTrigger: item?.setTrigger,
+			triggerId: item?.triggerId
+		}),
+		class: classes,
+		"data-label": label,
+		"data-navigation-menu-trigger": "true",
+		"data-slot": "navigation-menu-trigger",
+		"data-value": item?.value,
+		disabled: disabledFlag,
+		type,
+		"set:onclick": (event) => {
+			callHandler(onClick, event);
+			if (event.defaultPrevented || disabledFlag) return;
+			item?.clickTrigger(event);
+		},
+		"set:onfocus": (event) => {
+			callHandler(onFocus, event);
+			if (event.defaultPrevented || disabledFlag) return;
+			item?.registerTriggerFocus(event);
+		},
+		"set:onmouseenter": (event) => {
+			callHandler(onMouseEnter, event);
+			if (event.defaultPrevented || disabledFlag) return;
+			item?.registerTriggerHover(true, event);
+		},
+		"set:onmouseleave": (event) => {
+			callHandler(onMouseLeave, event);
+			item?.registerTriggerHover(false, event);
+		},
+		children
+	});
+};
+/** Unstyled popover panel for a NavigationMenuItem. */
+var NavigationMenuContent = ({ children, class: classes, ref, style, "set:onmouseenter": onMouseEnter, "set:onmouseleave": onMouseLeave, ...attrs }) => {
+	const item = ItemContext();
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		...contentAttrs({
+			id: item?.contentId,
+			open: Boolean(item?.open),
+			ref,
+			setContent: item?.setContent,
+			style: item?.contentStyle(style),
+			tabindex: "-1"
+		}),
+		"aria-labelledby": item?.triggerId,
+		class: classes,
+		"data-slot": "navigation-menu-content",
+		"set:onmouseenter": (event) => {
+			callHandler(onMouseEnter, event);
+			item?.registerContentHover(true, event);
+		},
+		"set:onmouseleave": (event) => {
+			callHandler(onMouseLeave, event);
+			item?.registerContentHover(false, event);
+		},
+		children
+	});
+};
+/** Unstyled link for use inside or directly within a navigation menu item. */
+var NavigationMenuLink = ({ active, as = "a", children, class: classes, type = "button", "set:onclick": onClick, ...attrs }) => {
+	const item = ItemContext();
+	const state = active ? "true" : void 0;
+	const current = active ? "page" : void 0;
+	const click = (event) => {
+		callHandler(onClick, event);
+		if (!event.defaultPrevented) item?.close(event);
+	};
+	if (as === "button") return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		class: classes,
+		"data-active": state,
+		"data-slot": "navigation-menu-link",
+		type,
+		"set:onclick": click,
+		children
+	});
+	return /* @__PURE__ */ jsx("a", {
+		...attrs,
+		"aria-current": current,
+		class: classes,
+		"data-active": state,
+		"data-slot": "navigation-menu-link",
+		"set:onclick": click,
+		children
+	});
+};
+//#endregion
+export { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger };

package/dist/popover.js

@@ -0,0 +1,307 @@
+import { popupStyle, triggerAttrs } from "./utils.js";
+import { n as popup, t as contentAttrs } from "./chunks/popup-C8Bb3l_g.js";
+import { t as PopupSurface } from "./chunks/popup-surface-BDCgtVU0.js";
+import { callHandler, callRef, statefulRootAttrs } from "ajo-cloves";
+import { context } from "ajo/context";
+import { Fragment, jsx, jsxs } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/popover.tsx
+var PopoverContext = context(null);
+/** Shared root body for both interaction modes; the mode is fixed per host. */
+function* popoverEngine(initial, mode) {
+	let closeDelay = 300;
+	let disabled = false;
+	let onOpenChange;
+	let openDelay = 700;
+	let popover;
+	popover = popup(this, {
+		prefix: "popover",
+		profile: "popover",
+		initialOpen: Boolean(initial.open ?? initial.defaultOpen),
+		disabled: () => disabled,
+		hover: mode === "hover" ? {
+			openDelay: () => openDelay,
+			closeDelay: () => closeDelay
+		} : void 0,
+		onOpenChange: (next, event) => onOpenChange?.(next, event),
+		reference: (view) => view.reference ?? view.trigger,
+		referenceHidden: "close",
+		dismiss: {
+			prevent: mode === "hover",
+			outside: true,
+			onDismiss: (event, view) => {
+				view.cancelHover();
+				view.setOpen(false, event);
+				if (mode === "click") queueMicrotask(() => view.trigger?.focus());
+			}
+		}
+	});
+	const close = (event) => {
+		popover.cancelHover();
+		popover.close(event);
+	};
+	const openWithDelay = (event) => popover.hold("trigger", event);
+	const registerTriggerHover = (hovering, event) => hovering ? popover.hold("trigger", event) : popover.release("trigger", event);
+	const registerContentHover = (hovering, event) => hovering ? popover.hold("content", event) : popover.release("content", event);
+	const registerTriggerFocus = (focused, event) => focused ? popover.hold("focus-trigger", event) : popover.release("focus-trigger", event);
+	const registerContentFocus = (focused, event) => focused ? popover.hold("focus-content", event) : popover.release("focus-content", event);
+	for (const args of this) {
+		closeDelay = Math.max(0, Number(args.closeDelay ?? 300));
+		disabled = Boolean(args.disabled);
+		onOpenChange = args.onOpenChange;
+		openDelay = Math.max(0, Number(args.openDelay ?? 700));
+		const opened = popover.sync(args.open == null ? null : Boolean(args.open), {
+			placement: args.placement,
+			gap: args.gap
+		});
+		PopoverContext({
+			...popover,
+			close: mode === "hover" ? close : popover.close,
+			description: args.description,
+			disabled,
+			label: args.label,
+			open: opened,
+			openOn: mode,
+			...mode === "hover" ? {
+				openWithDelay,
+				registerContentFocus,
+				registerContentHover,
+				registerTriggerFocus,
+				registerTriggerHover
+			} : {}
+		});
+		yield /* @__PURE__ */ jsx(Fragment, { children: args.children });
+	}
+}
+var PopoverClickRoot = function* (args) {
+	yield* popoverEngine.call(this, args, "click");
+};
+var PopoverHoverRoot = function* (args) {
+	yield* popoverEngine.call(this, args, "hover");
+};
+/** Unstyled root provider for a popover. */
+var Popover = ({ children, class: classes, "data-slot": slot = "popover", closeDelay, defaultOpen, description, disabled, gap, label, onOpenChange, open, openDelay, openOn = "click", placement, ...attrs }) => openOn === "hover" ? /* @__PURE__ */ jsx(PopoverHoverRoot, {
+	...statefulRootAttrs(attrs),
+	closeDelay,
+	defaultOpen,
+	description,
+	disabled,
+	gap,
+	label,
+	onOpenChange,
+	open,
+	openDelay,
+	placement,
+	"attr:class": classes,
+	"attr:data-slot": slot,
+	children
+}) : /* @__PURE__ */ jsx(PopoverClickRoot, {
+	...statefulRootAttrs(attrs),
+	defaultOpen,
+	description,
+	disabled,
+	gap,
+	label,
+	onOpenChange,
+	open,
+	placement,
+	"attr:class": classes,
+	"attr:data-slot": slot,
+	children
+});
+/** Unstyled button that opens a Popover. */
+var PopoverTrigger = (args) => {
+	const popover = PopoverContext();
+	const all = args;
+	if (popover?.openOn === "hover") {
+		const { as = "button", children, class: classes, "data-slot": slot = "popover-trigger", disabled, id, ref, type = "button", "set:onblur": onBlur, "set:onfocus": onFocus, "set:onkeydown": onKeydown, "set:onmouseleave": onMouseLeave, "set:onmouseenter": onMouseEnter, ...attrs } = all;
+		const disabledFlag = Boolean(disabled ?? popover.disabled);
+		const common = {
+			...attrs,
+			...triggerAttrs({
+				controls: popover.contentId,
+				expanded: popover.open,
+				haspopup: "dialog",
+				id,
+				open: popover.open,
+				ref,
+				setTrigger: popover.setTrigger,
+				triggerId: popover.triggerId
+			}),
+			class: classes,
+			"data-slot": slot,
+			"set:onblur": (event) => {
+				callHandler(onBlur, event);
+				popover.registerTriggerFocus?.(false, event);
+			},
+			"set:onfocus": (event) => {
+				callHandler(onFocus, event);
+				if (event.defaultPrevented || disabledFlag) return;
+				popover.registerTriggerFocus?.(true, event);
+			},
+			"set:onkeydown": (event) => {
+				callHandler(onKeydown, event);
+			},
+			"set:onmouseleave": (event) => {
+				callHandler(onMouseLeave, event);
+				popover.registerTriggerHover?.(false, event);
+			},
+			"set:onmouseenter": (event) => {
+				callHandler(onMouseEnter, event);
+				if (event.defaultPrevented || disabledFlag) return;
+				popover.registerTriggerHover?.(true, event);
+			}
+		};
+		if (as === "a") {
+			const anchor = attrs;
+			return /* @__PURE__ */ jsx("a", {
+				...common,
+				"aria-disabled": disabledFlag ? "true" : void 0,
+				href: disabledFlag ? void 0 : anchor.href,
+				tabIndex: disabledFlag ? -1 : anchor.tabIndex,
+				children
+			});
+		}
+		if (as === "span") return /* @__PURE__ */ jsx("span", {
+			...common,
+			"aria-disabled": disabledFlag ? "true" : void 0,
+			children
+		});
+		return /* @__PURE__ */ jsx("button", {
+			...common,
+			disabled: disabledFlag,
+			type,
+			children
+		});
+	}
+	const { children, "data-slot": slot = "popover-trigger", disabled, id, ref, type = "button", "set:onclick": onClick, ...attrs } = all;
+	const disabledFlag = Boolean(disabled ?? popover?.disabled);
+	return /* @__PURE__ */ jsx("button", {
+		...attrs,
+		...triggerAttrs({
+			controls: popover?.contentId,
+			expanded: Boolean(popover?.open),
+			haspopup: "dialog",
+			id,
+			open: Boolean(popover?.open),
+			ref,
+			setTrigger: popover?.setTrigger,
+			triggerId: popover?.triggerId
+		}),
+		"data-slot": slot,
+		disabled: disabledFlag,
+		"set:onclick": (event) => {
+			callHandler(onClick, event);
+			if (event.defaultPrevented) return;
+			popover?.setOpen(!popover.open, event);
+		},
+		type,
+		children
+	});
+};
+/** Optional explicit anchor used to position PopoverContent independently of the trigger. */
+var PopoverAnchor = ({ children, class: classes, "data-slot": slot = "popover-anchor", ref, ...attrs }) => {
+	const popover = PopoverContext();
+	const reference = (element) => {
+		popover?.setReference(element);
+		callRef(ref, element);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		class: classes,
+		"data-slot": slot,
+		ref: reference,
+		children
+	});
+};
+/** Unstyled floating panel for a Popover. */
+var PopoverContent = (args) => {
+	const popover = PopoverContext();
+	const titleId = popover ? `${popover.contentId}-title` : void 0;
+	const descriptionId = popover?.description ? `${popover.contentId}-description` : void 0;
+	const heading = popover ? /* @__PURE__ */ jsxs("div", {
+		"data-slot": "popover-header",
+		children: [/* @__PURE__ */ jsx("h2", {
+			"data-slot": "popover-title",
+			id: titleId,
+			children: popover.label
+		}), popover.description ? /* @__PURE__ */ jsx("p", {
+			"data-slot": "popover-description",
+			id: descriptionId,
+			children: popover.description
+		}) : null]
+	}) : null;
+	if (popover?.openOn === "hover") {
+		const { arrow = false, children, class: classes, "data-slot": slot = "popover-content", ref, style, "set:onfocusin": onFocusIn, "set:onfocusout": onFocusOut, "set:onmouseleave": onMouseLeave, "set:onmouseenter": onMouseEnter, ...attrs } = args;
+		return /* @__PURE__ */ jsxs("div", {
+			...attrs,
+			...contentAttrs({
+				id: popover.contentId,
+				open: popover.open,
+				ref,
+				setContent: popover.setContent,
+				style: popover.contentStyle(style),
+				tabindex: "-1"
+			}),
+			"aria-describedby": descriptionId,
+			"aria-labelledby": titleId,
+			class: classes,
+			"data-arrow": arrow ? "true" : void 0,
+			"data-slot": slot,
+			role: "dialog",
+			"set:onfocusout": (event) => {
+				callHandler(onFocusOut, event);
+				const next = event.relatedTarget;
+				if (next && popover.content?.contains(next)) return;
+				popover.registerContentFocus?.(false, event);
+			},
+			"set:onfocusin": (event) => {
+				callHandler(onFocusIn, event);
+				popover.registerContentFocus?.(true, event);
+			},
+			"set:onmouseleave": (event) => {
+				callHandler(onMouseLeave, event);
+				popover.registerContentHover?.(false, event);
+			},
+			"set:onmouseenter": (event) => {
+				callHandler(onMouseEnter, event);
+				popover.registerContentHover?.(true, event);
+			},
+			children: [
+				/* @__PURE__ */ jsx(PopupSurface, {
+					arrow,
+					popup: popover
+				}),
+				heading,
+				children
+			]
+		});
+	}
+	const { arrow = false, children, class: classes, "data-slot": slot = "popover-content", ref, style, ...attrs } = args;
+	return /* @__PURE__ */ jsxs("div", {
+		...attrs,
+		...contentAttrs({
+			id: popover?.contentId,
+			open: Boolean(popover?.open),
+			ref,
+			setContent: popover?.setContent,
+			style: popover?.contentStyle(style) ?? popupStyle(style),
+			tabindex: "-1"
+		}),
+		"aria-describedby": descriptionId,
+		"aria-labelledby": titleId,
+		class: classes,
+		"data-arrow": arrow ? "true" : void 0,
+		"data-slot": slot,
+		role: "dialog",
+		children: [
+			/* @__PURE__ */ jsx(PopupSurface, {
+				arrow,
+				popup: popover
+			}),
+			heading,
+			children
+		]
+	});
+};
+//#endregion
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/progress.js

@@ -0,0 +1,39 @@
+import { toNumber } from "./utils.js";
+import { clamp } from "ajo-cloves";
+import { jsx } from "ajo/jsx-runtime";
+//#region packages/ajo-ui/src/progress.tsx
+var state = (value, max) => {
+	if (value == null) return "indeterminate";
+	if (value >= max) return "complete";
+	return "loading";
+};
+var percent = (value, max) => value == null || max <= 0 ? 0 : clamp(value / max * 100, 0, 100);
+/** Unstyled progress bar with determinate and indeterminate states. */
+var Progress = ({ "aria-label": ariaLabel, "aria-valuetext": ariaValueText, getValueLabel, indicatorClass, max = 100, role = "progressbar", value = null, ...attrs }) => {
+	const maxValue = Math.max(1, toNumber(max, 100));
+	const current = value == null ? null : clamp(toNumber(value, 0), 0, maxValue);
+	const progress = percent(current, maxValue);
+	const progressState = state(current, maxValue);
+	const valueText = current == null ? ariaValueText : ariaValueText ?? getValueLabel?.(current, maxValue);
+	return /* @__PURE__ */ jsx("div", {
+		...attrs,
+		"aria-label": ariaLabel,
+		"aria-valuemax": maxValue,
+		"aria-valuemin": "0",
+		"aria-valuenow": current == null ? void 0 : current,
+		"aria-valuetext": valueText,
+		"data-max": maxValue,
+		"data-slot": "progress",
+		"data-state": progressState,
+		"data-value": current == null ? void 0 : current,
+		role,
+		children: /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			class: indicatorClass,
+			"data-slot": "progress-indicator",
+			style: current == null ? void 0 : `transform:translateX(-${100 - progress}%)`
+		})
+	});
+};
+//#endregion
+export { Progress };