@povio/ui 2.1.14 → 2.1.15

package/dist/InlineIconButton.js

@@ -0,0 +1,13 @@
+import { Button } from "./Button.js";
+import { jsx } from "react/jsx-runtime";
+const InlineIconButton = ({ label,...props }) => {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		iconOnly: true,
+		variant: "text",
+		size: "none",
+		width: "hug",
+		children: label
+	});
+};
+export { InlineIconButton };

package/dist/InputClear.js

@@ -0,0 +1,19 @@
+import { CloseIcon } from "./Close.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { ns } from "./i18n.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+const InputClear = ({ onClear, className, style }) => {
+	const { t } = useTranslation("ui");
+	return /* @__PURE__ */ jsx(InlineIconButton, {
+		color: "secondary",
+		className: clsx("group-hover/date-picker-content:flex! group-hover/select-content:flex! hidden! group-hover:flex! group-focus-within:flex! items-center", className),
+		label: t(($) => $.ui.clearAlt),
+		icon: CloseIcon,
+		onPress: onClear,
+		excludeFromTabOrder: true,
+		style
+	});
+};
+export { InputClear };

package/dist/InputContent.js

@@ -0,0 +1,94 @@
+import { Loader } from "./Loader.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { Typography } from "./Typography.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { inputSide } from "./input.cva.js";
+import { FormFieldLabel } from "./FormFieldLabel.js";
+import { InputClear } from "./InputClear.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { isValidElement, useMemo } from "react";
+import useMeasure from "react-use-measure";
+const InputContent = ({ leadingIcon: LeadingIcon, trailingIcon: TrailingIcon, unit, isLoading, isDisabled, action, isClearable, value, onChange, onBlur, children, headerProps, as, size }) => {
+	const inputSideCva = UIStyle.useConfig()?.input?.sideCva ?? inputSide;
+	const [leadingContentRef, { width: leadingWidth }] = useMeasure();
+	const [trailingContentRef, { width: trailingWidth }] = useMeasure();
+	const [labelContentRef, { width: labelWidth }] = useMeasure();
+	const isLeadingIconElement = LeadingIcon && isValidElement(LeadingIcon);
+	const isTrailingIconElement = TrailingIcon && isValidElement(TrailingIcon);
+	const showClear = isClearable && value != null && value !== "";
+	const style = useMemo(() => {
+		const leftPadding = as === "filter" ? labelWidth + leadingWidth : leadingWidth;
+		return {
+			paddingLeft: `calc(var(${inputSideCva({
+				size,
+				type: "var"
+			})}) + ${leftPadding}px + ${leftPadding > 0 ? "var(--spacing-2)" : "0px"})`,
+			paddingRight: `calc(var(${inputSideCva({
+				size,
+				type: "var"
+			})}) + ${trailingWidth}px + ${trailingWidth > 0 ? "var(--spacing-2)" : "0px"})`
+		};
+	}, [
+		leadingWidth,
+		trailingWidth,
+		labelWidth,
+		as,
+		size,
+		inputSideCva
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("group/input-content relative", { "h-full": as === "inline" }),
+		children: [
+			as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
+				ref: labelContentRef,
+				as,
+				...headerProps
+			}),
+			children(style),
+			LeadingIcon && /* @__PURE__ */ jsx("div", {
+				ref: leadingContentRef,
+				className: clsx("absolute top-1/2 -translate-y-1/2", !isLeadingIconElement && "pointer-events-none", inputSideCva({
+					size,
+					type: "left"
+				})),
+				children: isLeadingIconElement ? LeadingIcon : /* @__PURE__ */ jsx(LeadingIcon, { className: "size-6 text-interactive-text-secondary-idle" })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				ref: trailingContentRef,
+				className: clsx("absolute top-1/2 flex -translate-y-1/2 items-center gap-2", !isTrailingIconElement && !action && !showClear && "pointer-events-none", inputSideCva({
+					size,
+					type: "right"
+				})),
+				children: [
+					showClear && !isDisabled && /* @__PURE__ */ jsx(InputClear, { onClear: () => {
+						onChange?.("");
+						onBlur?.({ target: { value: "" } });
+					} }),
+					unit && /* @__PURE__ */ jsx(Typography, {
+						as: "span",
+						size: "label-2",
+						variant: "prominent-1",
+						className: "text-text-default-3",
+						children: unit
+					}),
+					isLoading && /* @__PURE__ */ jsx("div", {
+						className: "inline-flex",
+						children: /* @__PURE__ */ jsx(Loader, {})
+					}),
+					!isLoading && action && /* @__PURE__ */ jsx(InlineIconButton, {
+						color: "secondary",
+						icon: action.icon,
+						isDisabled,
+						onPress: action.onClick,
+						excludeFromTabOrder: true,
+						label: action.altText,
+						className: action.className
+					}),
+					!isLoading && !action && TrailingIcon && (isTrailingIconElement ? TrailingIcon : /* @__PURE__ */ jsx(TrailingIcon, { className: "size-6 text-interactive-text-secondary-idle" }))
+				]
+			})
+		]
+	});
+};
+export { InputContent };

package/dist/InputItem.js

@@ -0,0 +1,54 @@
+import { Checkbox } from "./Checkbox.js";
+import { DatePicker } from "./DatePicker.js";
+import { TextInput } from "./TextInput.js";
+import { Select } from "./Select.js";
+import { DateRangePicker } from "./DateRangePicker.js";
+import { DateTimePicker } from "./DateTimePicker.js";
+import { TimePicker } from "./TimePicker.js";
+import { NumberInput } from "./NumberInput.js";
+import { PasswordInput } from "./PasswordInput.js";
+import { TextArea } from "./TextArea.js";
+import { Autocomplete } from "./Autocomplete.js";
+import { QueryAutocomplete } from "./QueryAutocomplete.js";
+import { Slider } from "./Slider.js";
+import { Toggle } from "./Toggle.js";
+import { Segment } from "./Segment.js";
+import { jsx } from "react/jsx-runtime";
+var componentRegistry = {
+	toggle: Toggle,
+	checkbox: Checkbox,
+	numberInput: NumberInput,
+	slider: Slider,
+	textInput: TextInput,
+	passwordInput: PasswordInput,
+	textArea: TextArea,
+	select: Select,
+	autocomplete: Autocomplete,
+	queryAutocomplete: QueryAutocomplete,
+	segment: Segment,
+	datePicker: DatePicker,
+	dateTimePicker: DateTimePicker,
+	timePicker: TimePicker,
+	dateRangePicker: DateRangePicker,
+	unknown: null
+};
+function InputItem({ form, inputDef }) {
+	const { name, label, placeholder, props, inputWrapper, render, type } = inputDef;
+	const formControl = {
+		control: form.control,
+		name
+	};
+	if (render) return render(formControl, form);
+	if (!type) return null;
+	const Component = componentRegistry[type];
+	const usesChildrenAsLabel = ["toggle", "checkbox"].includes(type);
+	const inputComponent = /* @__PURE__ */ jsx(Component, {
+		...props ?? {},
+		label: usesChildrenAsLabel ? void 0 : label,
+		placeholder,
+		formControl,
+		children: usesChildrenAsLabel ? label : void 0
+	});
+	return inputWrapper ? inputWrapper(inputComponent, label) : inputComponent;
+}
+export { InputItem };

package/dist/InputUpload.js

@@ -0,0 +1,111 @@
+import { UIConfig } from "./uiConfig.context.js";
+import { FormField } from "./FormField.js";
+import { FileUtils } from "./file.utils.js";
+import { InputUploadContent } from "./InputUploadContent.js";
+import { InputUploadFilled } from "./InputUploadFilled.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useState } from "react";
+import { mergeRefs, useLabels } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+var InputUploadBase = ({ ref: _ref, label, tooltipText, variant, helperText, isRequired, isDisabled, headerClassName, errorClassName, isHeaderHidden, error, className, onChange, onInvalidFileType, value, defaultValue, allowsMultiple = false, hideLabel, acceptedFileTypes,...rest }) => {
+	const ui = UIConfig.useConfig();
+	const [internalFiles, setInternalFiles] = useState(() => {
+		if (value !== void 0) {
+			if (allowsMultiple) return value || [];
+			return value ? [value] : [];
+		}
+		if (defaultValue !== void 0) {
+			if (allowsMultiple) return defaultValue || [];
+			return defaultValue ? [defaultValue] : [];
+		}
+		return [];
+	});
+	const files = value !== void 0 ? (() => {
+		if (allowsMultiple) return value || [];
+		return value ? [value] : [];
+	})() : internalFiles;
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		isHeaderHidden,
+		hideLabel: hideLabel ?? ui.input.hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const labelProps = useLabels({ "aria-label": label });
+	const updateFiles = (newFiles) => {
+		if (value === void 0) setInternalFiles(newFiles);
+		if (allowsMultiple) onChange?.(newFiles);
+		else onChange?.(newFiles[0] || null);
+	};
+	const handleFileSelect = (inputFiles) => {
+		const acceptedFiles = inputFiles.filter((file) => FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
+		const invalidFiles = inputFiles.filter((file) => !FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
+		if (allowsMultiple) {
+			updateFiles([...files, ...acceptedFiles]);
+			if (invalidFiles.length > 0) onInvalidFileType?.(invalidFiles.map((file) => file.name));
+		} else {
+			if (acceptedFiles.length > 0) updateFiles([acceptedFiles[0]]);
+			if (invalidFiles.length > 0) onInvalidFileType?.(invalidFiles[0].name);
+		}
+	};
+	const handleSelect = (inputFiles) => {
+		if (!inputFiles) return;
+		handleFileSelect(Array.from(inputFiles));
+	};
+	const handleDrop = async (e) => {
+		if (!e.items) return;
+		const promises = [];
+		e.items.forEach((item) => {
+			if (item.kind === "file") promises.push(item.getFile());
+		});
+		handleFileSelect(await Promise.all(promises));
+	};
+	const handleRemove = () => {
+		updateFiles([]);
+	};
+	return /* @__PURE__ */ jsx(FormField, {
+		...formFieldProps,
+		labelProps,
+		className: clsx("w-full", className),
+		children: files.length > 0 ? /* @__PURE__ */ jsx(InputUploadFilled, {
+			files,
+			onRemove: handleRemove,
+			isDisabled
+		}) : /* @__PURE__ */ jsx(InputUploadContent, {
+			...rest,
+			label,
+			error,
+			allowsMultiple,
+			acceptedFileTypes,
+			variant,
+			isDisabled,
+			onSelect: handleSelect,
+			onDrop: handleDrop
+		})
+	});
+};
+const InputUpload = (props) => {
+	if ("formControl" in props && props.formControl) {
+		const { formControl, ref,...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(InputUploadBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(InputUploadBase, { ...props });
+};
+export { InputUpload };

package/dist/InputUploadContent.js

@@ -0,0 +1,52 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { Typography } from "./Typography.js";
+import { Button as Button$1 } from "./Button.js";
+import { TextButton } from "./TextButton.js";
+import { inputSize } from "./input.cva.js";
+import { ns } from "./i18n.js";
+import { UploadIcon } from "./Upload.js";
+import { inputUploadButton, inputUploadDropZone } from "./inputUploadButton.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { DropZone, FileTrigger } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+const InputUploadContent = (props) => {
+	const { variant, isDisabled, error,...rest } = props;
+	const { t } = useTranslation("ui");
+	const inputSizeCva = UIStyle.useConfig()?.input?.sizeCva ?? inputSize;
+	return /* @__PURE__ */ jsx(FileTrigger, {
+		...rest,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-rac": "",
+			"data-disabled": isDisabled || void 0,
+			"data-invalid": !!error || void 0,
+			className: inputUploadButton({
+				variant,
+				className: "group/input-upload"
+			}),
+			children: [/* @__PURE__ */ jsxs(DropZone, {
+				...rest,
+				isDisabled,
+				className: clsx(inputUploadDropZone({ variant }), inputSizeCva({ size: "default" })),
+				children: [/* @__PURE__ */ jsx(Typography, {
+					variant: "default",
+					size: "label-1",
+					as: "span",
+					className: "min-w-0 flex-fill select-none truncate text-text-default-3",
+					children: t(($) => $.ui.fileUpload.emptyText)
+				}), variant === "nested" && /* @__PURE__ */ jsx(TextButton, {
+					isDisabled,
+					icon: UploadIcon,
+					children: t(($) => $.ui.fileUpload.upload)
+				})]
+			}), variant !== "nested" && /* @__PURE__ */ jsx(Button$1, {
+				size: "s",
+				width: "hug",
+				isDisabled,
+				className: "truncate",
+				children: t(($) => $.ui.fileUpload.uploadFile)
+			})]
+		})
+	});
+};
+export { InputUploadContent };

package/dist/InputUploadFilled.js

@@ -0,0 +1,26 @@
+import { CloseIcon } from "./Close.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { Typography } from "./Typography.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { inputSize } from "./input.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+const InputUploadFilled = ({ files, onRemove, isDisabled }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: clsx("flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle", (UIStyle.useConfig()?.input?.sizeCva ?? inputSize)({ size: "default" })),
+		children: [/* @__PURE__ */ jsx(Typography, {
+			variant: "default",
+			size: "label-1",
+			as: "span",
+			className: "flex-fill select-none truncate text-ellipsis text-text-default-1",
+			children: files.map((file) => file.name).join(", ")
+		}), /* @__PURE__ */ jsx(InlineIconButton, {
+			label: "Remove files",
+			color: "secondary",
+			icon: CloseIcon,
+			isDisabled,
+			onPress: onRemove
+		})]
+	});
+};
+export { InputUploadFilled };

package/dist/Inputs.js

@@ -0,0 +1,15 @@
+import { InputItem } from "./InputItem.js";
+import { jsx } from "react/jsx-runtime";
+function Inputs({ form, inputDefs, children }) {
+	if (!children) return inputDefs.map((inputDef) => /* @__PURE__ */ jsx(InputItem, {
+		form,
+		inputDef
+	}, String(inputDef.name)));
+	const childrenParams = {};
+	for (const inputDef of inputDefs) childrenParams[inputDef.name] = /* @__PURE__ */ jsx(InputItem, {
+		form,
+		inputDef
+	});
+	return children(childrenParams);
+}
+export { Inputs };

package/dist/Italic.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const ItalicIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 25 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M6.743 19a.92.92 0 0 1-.678-.277.92.92 0 0 1-.277-.679q0-.401.277-.678a.92.92 0 0 1 .678-.276H9.82l3.424-10.18h-3.078a.92.92 0 0 1-.678-.277.92.92 0 0 1-.277-.679.92.92 0 0 1 .277-.678.92.92 0 0 1 .678-.276h7.762q.4 0 .678.277a.92.92 0 0 1 .277.679.92.92 0 0 1-.277.678.92.92 0 0 1-.678.276h-2.754l-3.423 10.18h2.753q.4 0 .678.277.277.277.277.679a.92.92 0 0 1-.277.678.92.92 0 0 1-.678.276z"
+	})
+});
+export { ItalicIcon };

package/dist/Link.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const LinkIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M7.039 16.538q-1.884 0-3.211-1.327Q2.5 13.883 2.5 12q0-1.883 1.328-3.212 1.328-1.328 3.21-1.328h3.02q.318 0 .534.216a.73.73 0 0 1 .216.535q0 .318-.216.534a.73.73 0 0 1-.534.215h-3.02q-1.26 0-2.149.89A2.93 2.93 0 0 0 4 12q0 1.26.89 2.149.888.89 2.147.89h3.02q.32 0 .535.215a.73.73 0 0 1 .216.535q0 .318-.216.534a.73.73 0 0 1-.534.215zM9 12.75a.73.73 0 0 1-.534-.216A.73.73 0 0 1 8.25 12q0-.32.216-.535A.73.73 0 0 1 9 11.25h6q.319 0 .534.216a.73.73 0 0 1 .216.534q0 .319-.216.534a.73.73 0 0 1-.534.216zm4.942 3.788a.73.73 0 0 1-.534-.215.73.73 0 0 1-.216-.535q0-.319.216-.534a.73.73 0 0 1 .534-.216h3.02q1.26 0 2.148-.89Q20 13.26 20 12t-.89-2.15a2.93 2.93 0 0 0-2.147-.889h-3.02a.73.73 0 0 1-.535-.215.73.73 0 0 1-.216-.535q0-.318.216-.534a.73.73 0 0 1 .534-.216h3.02q1.883 0 3.21 1.328 1.328 1.328 1.328 3.21 0 1.884-1.328 3.211-1.327 1.328-3.21 1.328z"
+	})
+});
+export { LinkIcon };

package/dist/Link2.js

@@ -0,0 +1,19 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { LinkContext } from "./link.context.js";
+import { link } from "./link.cva.js";
+import { jsx } from "react/jsx-runtime";
+import { Link } from "react-aria-components";
+const Link$1 = ({ variant,...props }) => {
+	const linkContext = LinkContext.useLinkContext();
+	const linkCva = UIStyle.useConfig()?.link?.cva ?? link;
+	const LinkComponent = linkContext?.LinkComponent ?? Link;
+	if (!props.to && props.href) props.to = props.href;
+	return /* @__PURE__ */ jsx(LinkComponent, {
+		...props,
+		className: linkCva({
+			variant,
+			className: props.className
+		})
+	});
+};
+export { Link$1 as Link };

package/dist/Loader.js

@@ -0,0 +1,32 @@
+import { loader, loaderWrapper } from "./loader.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+const Loader = ({ size, className,...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: loaderWrapper({
+			size,
+			className
+		}),
+		children: /* @__PURE__ */ jsxs("svg", {
+			className: loader({
+				size,
+				className
+			}),
+			xmlns: "http://www.w3.org/2000/svg",
+			fill: "none",
+			viewBox: "0 0 24 24",
+			...props,
+			children: [/* @__PURE__ */ jsx("circle", {
+				className: "opacity-20",
+				cx: "12",
+				cy: "12",
+				r: "10",
+				stroke: "currentColor",
+				strokeWidth: "4"
+			}), /* @__PURE__ */ jsx("path", {
+				fill: "currentColor",
+				d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+			})]
+		})
+	});
+};
+export { Loader };

package/dist/Menu.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+const MenuIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 24 24",
+	className: "fill-current",
+	...props,
+	children: /* @__PURE__ */ jsx("path", {
+		fill: "currentColor",
+		d: "M2 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1M2 12a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1M3 17a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2z"
+	})
+});
+export { MenuIcon };

package/dist/Menu2.js

@@ -0,0 +1,9 @@
+import { MenuDesktop } from "./MenuDesktop.js";
+import { MenuMobile } from "./MenuMobile.js";
+import { useBreakpoint } from "./useBreakpoint.js";
+import { jsx } from "react/jsx-runtime";
+const Menu = (props) => {
+	if (useBreakpoint("md")) return /* @__PURE__ */ jsx(MenuDesktop, { ...props });
+	return /* @__PURE__ */ jsx(MenuMobile, { ...props });
+};
+export { Menu };

package/dist/MenuDesktop.js

@@ -0,0 +1,53 @@
+import { MenuPopover } from "./MenuPopover.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MenuTrigger } from "react-aria-components";
+import React, { useRef, useState } from "react";
+import { useHover } from "react-aria";
+var CLOSE_DELAY = 100;
+const MenuDesktop = ({ trigger, items, closeDelay = CLOSE_DELAY, triggerOnHover = false,...props }) => {
+	const [isOpen, setIsOpen] = useState(false);
+	const timeoutRef = useRef(null);
+	const isHoveringTrigger = useRef(false);
+	const openMenu = () => {
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+		setIsOpen(true);
+	};
+	const closeMenu = () => {
+		if (isHoveringTrigger.current) return;
+		timeoutRef.current = setTimeout(() => {
+			setIsOpen(false);
+			timeoutRef.current = null;
+		}, closeDelay);
+	};
+	const { hoverProps } = useHover({
+		isDisabled: !triggerOnHover,
+		onHoverChange: (isHovering) => {
+			if (isHovering) {
+				isHoveringTrigger.current = true;
+				openMenu();
+			} else {
+				isHoveringTrigger.current = false;
+				closeMenu();
+			}
+		}
+	});
+	let triggerComponent = trigger;
+	if (triggerOnHover) triggerComponent = React.cloneElement(trigger, hoverProps);
+	return /* @__PURE__ */ jsxs(MenuTrigger, {
+		isOpen: triggerOnHover ? isOpen : void 0,
+		onOpenChange: setIsOpen,
+		children: [triggerComponent, /* @__PURE__ */ jsx(MenuPopover, {
+			...props,
+			offset: 0,
+			items,
+			isOpen: triggerOnHover ? isOpen : void 0,
+			isNonModal: triggerOnHover,
+			onMouseEnter: triggerOnHover ? openMenu : void 0,
+			onMouseLeave: triggerOnHover ? closeMenu : void 0
+		})]
+	});
+};
+export { MenuDesktop };

package/dist/MenuItem.js

@@ -0,0 +1,21 @@
+import { ArrowRightIcon } from "./ArrowRight.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { menuItemCva } from "./menu.cva.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { MenuItem } from "react-aria-components";
+const MenuItem$1 = ({ label, content, children, className,...item }) => {
+	const hasSubmenu = !!children && children?.length > 0;
+	const menuItemCva$1 = UIStyle.useConfig()?.menu?.itemCva ?? menuItemCva;
+	return /* @__PURE__ */ jsxs(MenuItem, {
+		...item,
+		textValue: label,
+		"aria-label": label,
+		className: clsx(menuItemCva$1({
+			...item,
+			isMobile: false
+		}), className),
+		children: [content ?? label, hasSubmenu && /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-6" })]
+	});
+};
+export { MenuItem$1 as MenuItem };

package/dist/MenuMobile.js

@@ -0,0 +1,64 @@
+import { ArrowLeftIcon } from "./ArrowLeft.js";
+import { UIStyle } from "./uiStyle.context.js";
+import { menuCva, menuItemCva } from "./menu.cva.js";
+import { MenuItem as MenuItem$1 } from "./MenuItem.js";
+import { BottomSheet } from "./BottomSheet.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Button, Menu } from "react-aria-components";
+import { useRef, useState } from "react";
+const MenuMobile = ({ trigger, items,...props }) => {
+	const uiStyle = UIStyle.useConfig();
+	const menuItemCva$1 = uiStyle?.menu?.itemCva ?? menuItemCva;
+	const menuCva$1 = uiStyle?.menu?.cva ?? menuCva;
+	const activeItemRef = useRef(null);
+	const activeItemParentsRef = useRef([]);
+	const [isOpen, setIsOpen] = useState(false);
+	const [activeItem, setActiveItem] = useState(null);
+	const onAction = (item) => {
+		if (!item.children) {
+			activeItemRef.current = null;
+			activeItemParentsRef.current = [];
+			setActiveItem(null);
+			setIsOpen(false);
+			return;
+		}
+		if (activeItemRef.current) activeItemParentsRef.current.push(activeItemRef.current);
+		activeItemRef.current = item;
+		setActiveItem(activeItemRef.current);
+	};
+	const onClose = () => {
+		if (activeItemRef.current) return;
+		setIsOpen(false);
+	};
+	const onBack = () => {
+		activeItemRef.current = activeItemParentsRef.current.pop() ?? null;
+		setActiveItem(activeItemRef.current);
+	};
+	return /* @__PURE__ */ jsx(BottomSheet, {
+		isOpen,
+		onOpenChange: setIsOpen,
+		trigger,
+		isDismissable: true,
+		children: () => /* @__PURE__ */ jsxs(Fragment, { children: [activeItem && /* @__PURE__ */ jsxs(Button, {
+			className: clsx(menuItemCva$1({
+				...props,
+				isMobile: true
+			})),
+			onPress: onBack,
+			children: [/* @__PURE__ */ jsx(ArrowLeftIcon, { className: "size-6" }), activeItem.label]
+		}), /* @__PURE__ */ jsx(Menu, {
+			autoFocus: true,
+			onClose,
+			className: menuCva$1({
+				...props,
+				isMobile: true
+			}),
+			children: (activeItem?.children ?? items).map((item, index) => /* @__PURE__ */ jsx(MenuItem$1, {
+				...item,
+				onAction: () => onAction(item)
+			}, index))
+		})] })
+	});
+};
+export { MenuMobile };

package/dist/MenuPopover.js

@@ -0,0 +1,30 @@
+import { UIStyle } from "./uiStyle.context.js";
+import { menuCva, menuPopoverCva, menuPopoverWrapperCva } from "./menu.cva.js";
+import { MenuItem as MenuItem$1 } from "./MenuItem.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Menu, Popover, SubmenuTrigger } from "react-aria-components";
+const MenuPopover = ({ items, className,...props }) => {
+	const uiStyle = UIStyle.useConfig();
+	const menuPopoverCva$1 = uiStyle?.menu?.popoverCva ?? menuPopoverCva;
+	const menuPopoverWrapperCva$1 = uiStyle?.menu?.popoverWrapperCva ?? menuPopoverWrapperCva;
+	const menuCva$1 = uiStyle?.menu?.cva ?? menuCva;
+	return /* @__PURE__ */ jsx(Popover, {
+		...props,
+		className: clsx(menuPopoverCva$1({ ...props }), className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: menuPopoverWrapperCva$1({ ...props }),
+			children: /* @__PURE__ */ jsx(Menu, {
+				className: menuCva$1({
+					...props,
+					isMobile: false
+				}),
+				children: items.map((item, index) => !item.children || item.children.length === 0 ? /* @__PURE__ */ jsx(MenuItem$1, { ...item }, index) : /* @__PURE__ */ jsxs(SubmenuTrigger, { children: [/* @__PURE__ */ jsx(MenuItem$1, { ...item }), /* @__PURE__ */ jsx(MenuPopover, {
+					offset: 0,
+					items: item.children
+				})] }, index))
+			})
+		})
+	});
+};
+export { MenuPopover };