@k8ordo/ui 1.0.0

package/dist/components/overlays/dropdown-menu/sub-menu.mjs

@@ -0,0 +1,143 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import { useCanHover } from "../_internal/use-can-hover.mjs";
+import { useHoverIntent } from "../_internal/use-hover-intent.mjs";
+import { useListNavigation } from "../_internal/use-list-navigation.mjs";
+import { useOpenContext, usePopoverContext } from "../popover/hooks.mjs";
+import { Popover } from "../popover/popover.mjs";
+import { ChevronIcon } from "../../icons/lucide.mjs";
+import { MenuContextProvider, useMenuContext } from "./hooks.mjs";
+import { cloneWithIndex, itemClass, panelClass } from "./shared.mjs";
+import { useSafeTriangle } from "./use-safe-triangle.mjs";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/overlays/dropdown-menu/sub-menu.tsx
+const SUBMENU_CLOSE_DELAY = 150;
+const safeTriangleClass = cn("after:absolute after:z-10", "after:top-(--safe-top) after:left-(--safe-left)", "after:h-(--safe-height) after:w-(--safe-width)", "after:[clip-path:var(--safe-clip)]");
+const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"ArrowRight",
+	"Home",
+	"End"
+]);
+const SubMenu = ({ label, children, index = 0 }) => {
+	const { isOpen: isParentOpen } = useOpenContext();
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		placement: "right-start",
+		trapFocus: false,
+		role: "menu",
+		children: /* @__PURE__ */ jsx(SubMenuInner, {
+			index,
+			isParentOpen,
+			label,
+			children
+		})
+	});
+};
+const SubMenuInner = ({ label, index, isParentOpen, children }) => {
+	const parentMenu = useMenuContext();
+	const popover = usePopoverContext();
+	const canHover = useCanHover("(hover: hover) and (pointer: fine)");
+	const triggerRef = useRef(null);
+	const panelRef = useRef(null);
+	const intent = useHoverIntent({
+		onOpen: popover.onOpen,
+		onClose: popover.onClose,
+		closeDelay: SUBMENU_CLOSE_DELAY,
+		enabled: canHover
+	});
+	const [activeIndex, setActiveIndex] = useState(null);
+	const nav = useListNavigation({
+		open: popover.isOpen,
+		activeIndex,
+		setActiveIndex,
+		loop: true,
+		autoActivateOnOpen: false
+	});
+	useEffect(() => {
+		if (!isParentOpen) {
+			intent.cancel();
+			popover.onClose();
+		}
+	}, [
+		isParentOpen,
+		intent,
+		popover
+	]);
+	const openedByKeyboardRef = useRef(false);
+	const wasOpenRef = useRef(false);
+	useEffect(() => {
+		const wasOpen = wasOpenRef.current;
+		wasOpenRef.current = popover.isOpen;
+		if (!wasOpen || popover.isOpen) return;
+		const byKeyboard = openedByKeyboardRef.current;
+		openedByKeyboardRef.current = false;
+		if (!byKeyboard) return;
+		const active = document.activeElement;
+		if (active === null || active === document.body || (panelRef.current?.contains(active) ?? false)) triggerRef.current?.focus();
+	}, [popover.isOpen]);
+	const openByKeyboard = () => {
+		openedByKeyboardRef.current = true;
+		popover.onOpen();
+		setActiveIndex(0);
+	};
+	const handleTriggerKeyDown = (event) => {
+		if (event.key === "Enter" || event.key === " " || event.key === "ArrowRight") {
+			event.preventDefault();
+			openByKeyboard();
+		}
+	};
+	const navContentProps = nav.getContentProps();
+	const handlePanelKeyDown = (event) => {
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			event.stopPropagation();
+			popover.onClose();
+			return;
+		}
+		navContentProps.onKeyDown(event);
+		if (NAVIGATION_KEYS.has(event.key)) event.stopPropagation();
+	};
+	const updateSafeTriangle = useSafeTriangle(panelRef, popover.isOpen && canHover);
+	const parentItemProps = parentMenu.getItemProps(index);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("button", {
+		"aria-controls": popover.isOpen ? `${popover.rootId}_list` : void 0,
+		"aria-expanded": popover.isOpen,
+		"aria-haspopup": "menu",
+		className: cn(itemClass, "relative flex items-center justify-between gap-2", popover.isOpen && "bg-bg-subtle", popover.isOpen && canHover && safeTriangleClass),
+		"data-submenu-trigger": "",
+		onClick: popover.onOpen,
+		onKeyDown: handleTriggerKeyDown,
+		onMouseEnter: intent.hoverStart,
+		onMouseLeave: intent.hoverEnd,
+		onPointerMove: updateSafeTriangle,
+		role: "menuitem",
+		type: "button",
+		...parentItemProps,
+		ref: mergeRefs(triggerRef, popover.setTriggerRef, parentItemProps.ref),
+		children: [/* @__PURE__ */ jsx("span", { children: label }), /* @__PURE__ */ jsx(ChevronIcon, {
+			direction: "right",
+			size: "sm"
+		})]
+	}), /* @__PURE__ */ jsx(MenuContextProvider, {
+		value: {
+			...nav,
+			closeRoot: parentMenu.closeRoot
+		},
+		children: /* @__PURE__ */ jsx(Popover.Content, { renderItem: (props) => /* @__PURE__ */ jsx("div", {
+			...props,
+			className: panelClass,
+			onKeyDown: handlePanelKeyDown,
+			onMouseEnter: intent.hoverStart,
+			onMouseLeave: intent.hoverEnd,
+			ref: mergeRefs(props.ref, panelRef),
+			role: "menu",
+			tabIndex: -1,
+			children: cloneWithIndex(children)
+		}) })
+	})] });
+};
+//#endregion
+export { SubMenu };

package/dist/components/overlays/dropdown-menu/use-safe-triangle.d.mts

@@ -0,0 +1,18 @@
+import { PointerEvent, RefObject } from "react";
+//#region src/components/overlays/dropdown-menu/use-safe-triangle.d.ts
+/**
+ * ポインタ位置とサブメニューの手前側 2 角を結ぶ「safe triangle」を
+ * トリガーの ::after に clip-path で描くための CSS 変数を更新する。
+ *
+ * 三角形の内側はトリガーの当たり判定として扱われるため、サブメニューへ
+ * 斜めに移動しても途中の兄弟項目で mouseleave が発火しない。
+ * ポインタが動くたびに頂点を追従させ、離れる方向に動けば三角形は狭まる。
+ *
+ * getBoundingClientRect（強制同期レイアウト）を pointermove の生の頻度で
+ * 呼ばないよう、更新は requestAnimationFrame で 1 フレーム 1 回に間引く。
+ *
+ * 参考: https://ics.media/entry/260803/
+ */
+declare const useSafeTriangle: (panelRef: RefObject<HTMLElement | null>, enabled: boolean) => ((event: PointerEvent<HTMLElement>) => void);
+//#endregion
+export { useSafeTriangle };

package/dist/components/overlays/dropdown-menu/use-safe-triangle.mjs

@@ -0,0 +1,57 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+//#region src/components/overlays/dropdown-menu/use-safe-triangle.ts
+/**
+* ポインタ位置とサブメニューの手前側 2 角を結ぶ「safe triangle」を
+* トリガーの ::after に clip-path で描くための CSS 変数を更新する。
+*
+* 三角形の内側はトリガーの当たり判定として扱われるため、サブメニューへ
+* 斜めに移動しても途中の兄弟項目で mouseleave が発火しない。
+* ポインタが動くたびに頂点を追従させ、離れる方向に動けば三角形は狭まる。
+*
+* getBoundingClientRect（強制同期レイアウト）を pointermove の生の頻度で
+* 呼ばないよう、更新は requestAnimationFrame で 1 フレーム 1 回に間引く。
+*
+* 参考: https://ics.media/entry/260803/
+*/
+const useSafeTriangle = (panelRef, enabled) => {
+	const pointerRef = useRef(null);
+	const frameRef = useRef(null);
+	useEffect(() => () => {
+		if (frameRef.current !== null) cancelAnimationFrame(frameRef.current);
+	}, []);
+	return useCallback((event) => {
+		if (!enabled) return;
+		pointerRef.current = {
+			x: event.clientX,
+			y: event.clientY,
+			trigger: event.currentTarget
+		};
+		if (frameRef.current !== null) return;
+		frameRef.current = requestAnimationFrame(() => {
+			frameRef.current = null;
+			const pointer = pointerRef.current;
+			const panel = panelRef.current;
+			if (!pointer || !panel) return;
+			const panelRect = panel.getBoundingClientRect();
+			if (panelRect.width === 0 && panelRect.height === 0) return;
+			const { trigger } = pointer;
+			const triggerRect = trigger.getBoundingClientRect();
+			const { style } = trigger;
+			const opensRight = panelRect.left + panelRect.width / 2 >= triggerRect.left + triggerRect.width / 2;
+			const width = opensRight ? panelRect.left - pointer.x : pointer.x - panelRect.right;
+			if (width <= 0) {
+				style.setProperty("--safe-width", "0px");
+				return;
+			}
+			style.setProperty("--safe-top", `${panelRect.top - triggerRect.top}px`);
+			style.setProperty("--safe-height", `${panelRect.height}px`);
+			style.setProperty("--safe-width", `${width}px`);
+			style.setProperty("--safe-left", `${(opensRight ? pointer.x : panelRect.right) - triggerRect.left}px`);
+			style.setProperty("--safe-y", `${pointer.y - panelRect.top}px`);
+			style.setProperty("--safe-clip", opensRight ? "polygon(0 var(--safe-y), 100% 0, 100% 100%)" : "polygon(100% var(--safe-y), 0 0, 0 100%)");
+		});
+	}, [panelRef, enabled]);
+};
+//#endregion
+export { useSafeTriangle };

package/dist/components/overlays/list-box/hooks.d.mts

@@ -0,0 +1,35 @@
+import { Option } from "../../../types/variables.mjs";
+import { ListNavigation } from "../_internal/use-list-navigation.mjs";
+//#region src/components/overlays/list-box/hooks.d.ts
+type MenuContext = ListNavigation & {
+  options: readonly Option[];
+  selectedIndex: number;
+  handleSelect: (index: number) => void;
+};
+declare const MenuContextProvider: import("react").Context<MenuContext | null>;
+declare const useMenuContent: () => {
+  options: readonly Readonly<{
+    value: string;
+    label: string;
+  }>[];
+  selectedIndex: number;
+  contentProps: {
+    onKeyDown: (event: import("react").KeyboardEvent<HTMLElement>) => void;
+  };
+};
+declare const useMenuItem: (index: number) => {
+  selected: boolean;
+  props: {
+    ref: (node: HTMLElement | null) => void;
+    tabIndex: number;
+    onFocus: () => void;
+    role: 'option';
+    'aria-selected': boolean;
+    onClick: () => void;
+  };
+};
+declare const useMenuTrigger: () => {
+  valueLabel: string;
+};
+//#endregion
+export { MenuContextProvider, useMenuContent, useMenuItem, useMenuTrigger };

package/dist/components/overlays/list-box/hooks.mjs

@@ -0,0 +1,43 @@
+"use client";
+import { useMessages } from "../../../i18n/context.mjs";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { useOpenContext } from "../popover/hooks.mjs";
+import { useMemo } from "react";
+//#region src/components/overlays/list-box/hooks.ts
+const [MenuContextProvider, useMenuContext] = createSafeContext("useMenuContext must be used within a ListBox.Root");
+const useMenuContent = () => {
+	const menu = useMenuContext();
+	return useMemo(() => ({
+		options: menu.options,
+		selectedIndex: menu.selectedIndex,
+		contentProps: menu.getContentProps()
+	}), [menu]);
+};
+const useMenuItem = (index) => {
+	const menu = useMenuContext();
+	const { onClose } = useOpenContext();
+	return useMemo(() => ({
+		selected: menu.selectedIndex === index,
+		props: {
+			role: "option",
+			"aria-selected": menu.selectedIndex === index,
+			...menu.getItemProps(index),
+			onClick: () => {
+				menu.handleSelect(index);
+				onClose();
+			}
+		}
+	}), [
+		index,
+		menu,
+		onClose
+	]);
+};
+const useMenuTrigger = () => {
+	const menu = useMenuContext();
+	const defaultLabel = useMessages().listBoxPlaceholder;
+	const valueLabel = menu.selectedIndex < 0 ? defaultLabel : menu.options[menu.selectedIndex]?.label ?? defaultLabel;
+	return useMemo(() => ({ valueLabel }), [valueLabel]);
+};
+//#endregion
+export { MenuContextProvider, useMenuContent, useMenuItem, useMenuTrigger };

package/dist/components/overlays/list-box/index.d.mts

@@ -0,0 +1,2 @@
+import { ListBox } from "./list-box.mjs";
+export { ListBox };

package/dist/components/overlays/list-box/index.mjs

@@ -0,0 +1,2 @@
+import { ListBox } from "./list-box.mjs";
+export { ListBox };

package/dist/components/overlays/list-box/list-box.d.mts

@@ -0,0 +1,28 @@
+import { Button } from "../../buttons/button/button.mjs";
+import "../../buttons/button/index.mjs";
+import { Option, Placement } from "../../../types/variables.mjs";
+import { ComponentProps, FC, PropsWithChildren, ReactElement } from "react";
+//#region src/components/overlays/list-box/list-box.d.ts
+declare const ListBox: {
+  readonly Root: FC<PropsWithChildren<{
+    placement?: Placement;
+    options: readonly Option[];
+    value?: Option['value'];
+    defaultValue?: Option['value'];
+    onChange?: (value: Option['value']) => void;
+  }>>;
+  readonly Content: FC<{
+    helpContent?: ReactElement;
+  }>;
+  readonly Trigger: FC<{
+    size?: ComponentProps<typeof Button>['size'];
+    label?: string;
+  }>;
+  readonly IconTrigger: FC<{
+    size?: ComponentProps<typeof Button>['size'];
+    icon: ReactElement;
+    label?: string;
+  }>;
+};
+//#endregion
+export { ListBox };

package/dist/components/overlays/list-box/list-box.mjs

@@ -0,0 +1,150 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { Button } from "../../buttons/button/button.mjs";
+import { useListNavigation } from "../_internal/use-list-navigation.mjs";
+import { useControllableState } from "../../../hooks/controllable-state/index.mjs";
+import { useOpenContext } from "../popover/hooks.mjs";
+import { Popover } from "../popover/popover.mjs";
+import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
+import { CheckIcon, ChevronIcon } from "../../icons/lucide.mjs";
+import { MenuContextProvider, useMenuContent, useMenuItem, useMenuTrigger } from "./hooks.mjs";
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/overlays/list-box/list-box.tsx
+const Root = ({ children, placement = "bottom", options, value, defaultValue, onChange }) => {
+	const [selectedValue, setSelectedValue] = useControllableState({
+		value,
+		defaultValue,
+		onChange: (next) => {
+			if (next !== void 0) onChange?.(next);
+		}
+	});
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		flipDisabled: true,
+		placement,
+		role: "listbox",
+		children: /* @__PURE__ */ jsx(MenuProvider, {
+			onChange: setSelectedValue,
+			options,
+			value: selectedValue,
+			children
+		})
+	});
+};
+const MenuProvider = ({ children, options, onChange, value }) => {
+	const { isOpen } = useOpenContext();
+	const selectedIndex = options.findIndex((option) => option.value === value);
+	const [activeIndex, setActiveIndex] = useState(null);
+	const nav = useListNavigation({
+		open: isOpen,
+		activeIndex,
+		setActiveIndex,
+		selectedIndex,
+		loop: true
+	});
+	const handleSelect = (index) => {
+		const next = options[index]?.value;
+		if (next !== void 0 && next !== "") onChange(next);
+	};
+	return /* @__PURE__ */ jsx(MenuContextProvider, {
+		value: {
+			...nav,
+			options,
+			selectedIndex,
+			handleSelect
+		},
+		children
+	});
+};
+const Content = ({ helpContent }) => {
+	const { options, contentProps } = useMenuContent();
+	const helpId = useId();
+	return /* @__PURE__ */ jsx(Popover.Content, { renderItem: ({ ref, ...listProps }) => /* @__PURE__ */ jsxs("div", {
+		className: "bg-bg-raised border-border-subtle vertical:max-h-none vertical:min-w-0 vertical:max-w-48 vertical:min-h-40 flex max-h-48 min-w-40 flex-col rounded-lg border py-2 shadow-md",
+		ref,
+		children: [helpContent === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			id: helpId,
+			children: helpContent
+		}), /* @__PURE__ */ jsx("div", {
+			...listProps,
+			...contentProps,
+			"aria-describedby": helpContent === void 0 ? void 0 : helpId,
+			className: "vertical:overflow-x-auto vertical:overflow-y-visible flex min-h-0 min-w-0 flex-col overflow-y-auto",
+			children: options.map(({ value, label }, idx) => /* @__PURE__ */ jsx(Item, {
+				index: idx,
+				label
+			}, value))
+		})]
+	}) });
+};
+const Item = ({ label, index }) => {
+	const { props, selected } = useMenuItem(index);
+	return /* @__PURE__ */ jsxs("button", {
+		className: cn("flex w-full items-center justify-between px-3 py-2 text-left transition-colors", "hover:bg-bg-subtle", "focus-visible:border-transparent focus-visible:bg-bg-subtle focus-visible:outline-hidden"),
+		type: "button",
+		...props,
+		children: [label, selected && /* @__PURE__ */ jsx("span", {
+			className: "text-fg-success",
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		})]
+	});
+};
+const useTriggerLabels = (label) => {
+	const { valueLabel } = useMenuTrigger();
+	const labelId = useId();
+	const valueId = useId();
+	return {
+		valueLabel,
+		labelId,
+		valueId,
+		labelledBy: label === void 0 ? valueId : `${labelId} ${valueId}`
+	};
+};
+const Trigger = ({ size = "md", label }) => {
+	const { valueLabel, labelId, valueId, labelledBy } = useTriggerLabels(label);
+	return /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsxs(Fragment$1, { children: [label !== void 0 && /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		id: labelId,
+		children: label
+	}), /* @__PURE__ */ jsx(Button, {
+		...props,
+		"aria-labelledby": labelledBy,
+		color: "base",
+		endIcon: /* @__PURE__ */ jsx(ChevronIcon, { direction: "down" }),
+		fullWidth: true,
+		size,
+		type: "button",
+		variant: "solid",
+		children: /* @__PURE__ */ jsx("span", {
+			id: valueId,
+			children: valueLabel
+		})
+	})] }) });
+};
+const IconTrigger = ({ size = "md", icon, label }) => {
+	const { valueLabel, labelId, valueId, labelledBy } = useTriggerLabels(label);
+	return /* @__PURE__ */ jsx(Popover.Trigger, { renderItem: (props) => /* @__PURE__ */ jsxs(Fragment$1, { children: [label !== void 0 && /* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		id: labelId,
+		children: label
+	}), /* @__PURE__ */ jsxs(IconButton, {
+		"aria-labelledby": labelledBy,
+		label: label ?? valueLabel,
+		size,
+		tooltipDisabled: true,
+		...props,
+		children: [icon, /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			id: valueId,
+			children: valueLabel
+		})]
+	})] }) });
+};
+const ListBox = {
+	Root,
+	Content,
+	Trigger,
+	IconTrigger
+};
+//#endregion
+export { ListBox };

package/dist/components/overlays/modal/index.d.mts

@@ -0,0 +1,2 @@
+import { Modal } from "./modal.mjs";
+export { Modal };

package/dist/components/overlays/modal/index.mjs

@@ -0,0 +1,2 @@
+import { Modal } from "./modal.mjs";
+export { Modal };

package/dist/components/overlays/modal/modal.d.mts

@@ -0,0 +1,15 @@
+import { ModalSide } from "../../../types/variables.mjs";
+import { FC, PropsWithChildren, Ref } from "react";
+//#region src/components/overlays/modal/modal.d.ts
+declare const Modal: FC<PropsWithChildren<{
+  ref?: Ref<HTMLDialogElement>;
+  side?: ModalSide;
+  defaultOpen?: boolean;
+  isOpen?: boolean;
+  onClose?: () => void;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+}>>;
+//#endregion
+export { Modal };

package/dist/components/overlays/modal/modal.mjs

@@ -0,0 +1,72 @@
+"use client";
+import { cn } from "../../../helpers/cn.mjs";
+import { mergeRefs } from "../../../helpers/merge-refs.mjs";
+import { ToastProvider } from "../../feedback/toast/provider.mjs";
+import { ModalDialogProvider } from "../_internal/modal-dialog-context.mjs";
+import { PortalRootProvider } from "../../providers/portal-root.mjs";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/overlays/modal/modal.tsx
+const Modal = ({ ref, side = "center", defaultOpen, isOpen, onClose, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, children }) => {
+	const dialogRef = useRef(null);
+	const mergedRef = useMemo(() => mergeRefs(dialogRef, ref), [ref]);
+	const [dialogOpen, setDialogOpen] = useState(defaultOpen ?? false);
+	const [registeredLabelledBy, setRegisteredLabelledBy] = useState(void 0);
+	const [registeredDescribedBy, setRegisteredDescribedBy] = useState(void 0);
+	const realDialogOpen = isOpen === true || isOpen === false ? isOpen : dialogOpen;
+	const realOnClose = useCallback(() => {
+		onClose?.();
+		if (isOpen === void 0) return;
+		setDialogOpen(false);
+	}, [isOpen, onClose]);
+	const modalDialogContext = useMemo(() => ({
+		registerLabelledBy: setRegisteredLabelledBy,
+		registerDescribedBy: setRegisteredDescribedBy
+	}), []);
+	const labelledBy = ariaLabelledBy ?? (ariaLabel === void 0 ? registeredLabelledBy : void 0);
+	const describedBy = ariaDescribedBy ?? registeredDescribedBy;
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog || realDialogOpen === dialog.open) return;
+		if (realDialogOpen) dialog.showModal();
+		else dialog.close();
+	}, [realDialogOpen]);
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog || isOpen !== void 0) return void 0;
+		const observer = new MutationObserver(() => {
+			setDialogOpen(dialog.open);
+		});
+		observer.observe(dialog, {
+			attributes: true,
+			attributeFilter: ["open"]
+		});
+		return () => {
+			observer.disconnect();
+		};
+	}, [isOpen]);
+	return /* @__PURE__ */ jsx("dialog", {
+		"aria-describedby": describedBy,
+		"aria-label": ariaLabel,
+		"aria-labelledby": labelledBy,
+		className: cn("ao-modal bg-bg-raised text-fg-base z-modal shadow-md backdrop:bg-back-drop", side === "center" && "ao-modal-center m-auto max-h-128 w-5/6 max-w-2xl rounded-lg vertical:h-5/6 vertical:max-h-168 vertical:w-auto vertical:max-w-lg", side === "bottom" && "ao-modal-bottom mt-auto w-screen max-w-screen rounded-t-lg", side === "right" && "ao-modal-right ml-auto h-svh max-h-none w-screen max-w-sm rounded-l-lg", side === "left" && "ao-modal-left mr-auto h-svh max-h-none w-screen max-w-sm rounded-r-lg"),
+		onClick: (e) => {
+			if (e.target === e.currentTarget) dialogRef.current?.close();
+		},
+		onClose: realOnClose,
+		ref: mergedRef,
+		children: /* @__PURE__ */ jsx(ModalDialogProvider, {
+			value: modalDialogContext,
+			children: /* @__PURE__ */ jsx(PortalRootProvider, {
+				value: dialogRef,
+				children: /* @__PURE__ */ jsx(ToastProvider, {
+					portalRef: dialogRef,
+					position: "absolute",
+					children
+				})
+			})
+		})
+	});
+};
+//#endregion
+export { Modal };

package/dist/components/overlays/popover/anchor-positioning.d.mts

@@ -0,0 +1,26 @@
+import { Placement } from "../../../types/variables.mjs";
+import { CSSProperties } from "react";
+//#region src/components/overlays/popover/anchor-positioning.d.ts
+/**
+ * CSS Anchor Positioning による配置ヘルパー。
+ *
+ * placement を position-area / position-try-fallbacks / 対向辺マージン（offset 相当）へ
+ * 変換する。旧 floating-ui のミドルウェア（offset / flip / autoUpdate）の置き換え。
+ *
+ * 注意: CSS Anchor Positioning は Baseline newly available（2026-01）で、
+ * 縦書き / RTL のインライン軸補正にエンジン差（既知の interop バグ）がある。
+ */
+type AnchorCSSProperties = CSSProperties & {
+  positionAnchor?: string;
+  positionArea?: string;
+  positionTryFallbacks?: string;
+  '--ao-anchor'?: string;
+};
+declare const toAnchorName: (id: string) => string;
+/**
+ * Popover content（位置決め対象）に適用する style。
+ * `flipDisabled` のときは position-try-fallbacks を付けず、はみ出しても反転しない。
+ */
+declare const getContentAnchorStyle: (anchorName: string, placement: Placement, flipDisabled: boolean) => AnchorCSSProperties;
+//#endregion
+export { getContentAnchorStyle, toAnchorName };

package/dist/components/overlays/popover/anchor-positioning.mjs

@@ -0,0 +1,49 @@
+//#region src/components/overlays/popover/anchor-positioning.ts
+const POSITION_AREA = {
+	top: "top",
+	"top-start": "top span-right",
+	"top-end": "top span-left",
+	bottom: "bottom",
+	"bottom-start": "bottom span-right",
+	"bottom-end": "bottom span-left",
+	left: "left",
+	"left-start": "left span-bottom",
+	"left-end": "left span-top",
+	right: "right",
+	"right-start": "right span-bottom",
+	"right-end": "right span-top"
+};
+const GAP = "8px";
+const sideGap = (side) => {
+	switch (side) {
+		case "top": return { marginBottom: GAP };
+		case "bottom": return { marginTop: GAP };
+		case "left": return { marginRight: GAP };
+		case "right": return { marginLeft: GAP };
+		default: return {};
+	}
+};
+const toAnchorName = (id) => `--ao-popover-${id.replaceAll(/[^a-zA-Z0-9_-]/gu, "")}`;
+/**
+* Popover content（位置決め対象）に適用する style。
+* `flipDisabled` のときは position-try-fallbacks を付けず、はみ出しても反転しない。
+*/
+const getContentAnchorStyle = (anchorName, placement, flipDisabled) => {
+	const side = placement.split("-")[0] ?? "bottom";
+	return {
+		position: "fixed",
+		inset: "auto",
+		margin: 0,
+		overflow: "visible",
+		background: "transparent",
+		border: 0,
+		padding: 0,
+		...sideGap(side),
+		positionAnchor: anchorName,
+		"--ao-anchor": anchorName,
+		positionArea: POSITION_AREA[placement],
+		...flipDisabled ? {} : { positionTryFallbacks: "flip-block, flip-inline, flip-block flip-inline" }
+	};
+};
+//#endregion
+export { getContentAnchorStyle, toAnchorName };

package/dist/components/overlays/popover/escape-stack.d.mts

@@ -0,0 +1,7 @@
+//#region src/components/overlays/popover/escape-stack.d.ts
+/**
+ * ポップオーバーを最上位レイヤーとして積む。戻り値を呼ぶと取り除かれる。
+ */
+declare const pushEscapeLayer: (close: () => void) => (() => void);
+//#endregion
+export { pushEscapeLayer };