@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/overlays/overlay-stack/index.js

@@ -0,0 +1,193 @@
+import { createContext, createElement, useContext } from "react";
+// src/components/overlays/overlay-stack/index.ts
+const OverlayPriorityContext = createContext(0);
+const overlayStacks = /* @__PURE__ */ new WeakMap();
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"area[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type='hidden'])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"iframe",
+	"object",
+	"embed",
+	"[contenteditable='true']",
+	"[tabindex]:not([tabindex='-1'])"
+].join(",");
+const focusElement = (element) => {
+	if (!element?.isConnected) return;
+	try {
+		element.focus({ preventScroll: true });
+	} catch {
+		element.focus();
+	}
+};
+const getFocusableElements = (container) => {
+	return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) => {
+		if (element.hidden || element.closest("[hidden], [inert], [aria-hidden='true']") || element.getAttribute("aria-disabled") === "true") return false;
+		const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+		return style?.display !== "none" && style?.visibility !== "hidden";
+	});
+};
+const getTopOverlay = (entries) => {
+	return entries.reduce((top, entry) => {
+		if (!top || entry.priority > top.priority || entry.priority === top.priority && entry.order > top.order) return entry;
+		return top;
+	}, void 0);
+};
+const focusInitial = (entry) => {
+	const content = entry.getContent?.();
+	if (!content) return;
+	const autofocus = content.querySelector("[autofocus]");
+	const focusable = getFocusableElements(content);
+	const target = autofocus ?? focusable[0] ?? content;
+	if (target === content && !content.hasAttribute("tabindex")) content.setAttribute("tabindex", "-1");
+	focusElement(target);
+};
+const restoreInertSnapshots = (stack) => {
+	for (const [element, snapshot] of stack.inertSnapshots) {
+		element.inert = snapshot.inert;
+		if (snapshot.ariaHidden === null) element.removeAttribute("aria-hidden");
+		else element.setAttribute("aria-hidden", snapshot.ariaHidden);
+	}
+	stack.inertSnapshots.clear();
+};
+const getBodyBranch = (element, body) => {
+	let current = element;
+	while (current?.parentElement && current.parentElement !== body) current = current.parentElement;
+	return current?.parentElement === body ? current : null;
+};
+const syncModalIsolation = (stack) => {
+	restoreInertSnapshots(stack);
+	const top = getTopOverlay(stack.entries);
+	if (!top?.modal) return;
+	const content = top.getContent?.();
+	const layer = top.getLayer?.() ?? content;
+	if (!content || !layer) return;
+	const body = content.ownerDocument.body;
+	const activeBranch = getBodyBranch(layer, body);
+	if (!activeBranch) return;
+	for (const child of Array.from(body.children)) {
+		if (!(child instanceof content.ownerDocument.defaultView.HTMLElement)) continue;
+		if (child === activeBranch || child.contains(activeBranch)) continue;
+		stack.inertSnapshots.set(child, {
+			inert: child.inert,
+			ariaHidden: child.getAttribute("aria-hidden")
+		});
+		child.inert = true;
+		child.setAttribute("aria-hidden", "true");
+	}
+};
+const createOverlayStack = (ownerDocument) => {
+	const stack = {
+		entries: [],
+		nextOrder: 0,
+		inertSnapshots: /* @__PURE__ */ new Map(),
+		syncIsolation: () => {
+			syncModalIsolation(stack);
+		},
+		handleKeyDown: (event) => {
+			const top = getTopOverlay(stack.entries);
+			if (!top) return;
+			if (event.key === "Escape" && !event.defaultPrevented) {
+				event.preventDefault();
+				event.stopPropagation();
+				top.onEscape();
+				return;
+			}
+			if (event.key !== "Tab" || !top.modal) return;
+			const content = top.getContent?.();
+			if (!content) return;
+			const focusable = getFocusableElements(content);
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			const active = ownerDocument.activeElement;
+			if (!first || !last) {
+				event.preventDefault();
+				focusElement(content);
+				return;
+			}
+			if (event.shiftKey) {
+				if (active === first || !content.contains(active)) {
+					event.preventDefault();
+					focusElement(last);
+				}
+				return;
+			}
+			if (active === last || !content.contains(active)) {
+				event.preventDefault();
+				focusElement(first);
+			}
+		},
+		handleFocusIn: (event) => {
+			const top = getTopOverlay(stack.entries);
+			if (!top?.modal) return;
+			const content = top.getContent?.();
+			if (!content) return;
+			const target = event.target;
+			if (target instanceof ownerDocument.defaultView.HTMLElement) {
+				if (content.contains(target)) {
+					top.lastFocused = target;
+					return;
+				}
+			}
+			const lastFocused = top.lastFocused;
+			focusElement(lastFocused?.isConnected && content.contains(lastFocused) ? lastFocused : getFocusableElements(content)[0] ?? content);
+		}
+	};
+	ownerDocument.addEventListener("keydown", stack.handleKeyDown, true);
+	ownerDocument.addEventListener("focusin", stack.handleFocusIn, true);
+	return stack;
+};
+const registerOverlay = (ownerDocument, onEscape, priority = 0, options = {}) => {
+	const stack = overlayStacks.get(ownerDocument) ?? createOverlayStack(ownerDocument);
+	overlayStacks.set(ownerDocument, stack);
+	const activeElement = ownerDocument.activeElement;
+	const entry = {
+		onEscape,
+		priority,
+		order: stack.nextOrder++,
+		modal: options.modal ?? false,
+		getContent: options.getContent,
+		getLayer: options.getLayer,
+		previousFocus: activeElement instanceof ownerDocument.defaultView.HTMLElement ? activeElement : null,
+		lastFocused: null
+	};
+	stack.entries.push(entry);
+	stack.syncIsolation();
+	if (entry.modal) focusInitial(entry);
+	const unregister = (() => {
+		const index = stack.entries.indexOf(entry);
+		if (index === -1) return;
+		const wasTop = getTopOverlay(stack.entries) === entry;
+		stack.entries.splice(index, 1);
+		stack.syncIsolation();
+		if (stack.entries.length === 0) {
+			ownerDocument.removeEventListener("keydown", stack.handleKeyDown, true);
+			ownerDocument.removeEventListener("focusin", stack.handleFocusIn, true);
+			overlayStacks.delete(ownerDocument);
+		}
+		if (!wasTop || !entry.modal) return;
+		Promise.resolve().then(() => {
+			const nextTop = getTopOverlay(stack.entries);
+			if (nextTop?.modal) {
+				const content = nextTop.getContent?.();
+				if (content && !content.contains(ownerDocument.activeElement)) focusInitial(nextTop);
+				return;
+			}
+			if (entry.previousFocus?.isConnected) focusElement(entry.previousFocus);
+		});
+	});
+	unregister.isTop = () => {
+		return getTopOverlay(stack.entries) === entry;
+	};
+	return unregister;
+};
+const OverlayStackProvider = ({ priority, children }) => {
+	return createElement(OverlayPriorityContext.Provider, { value: priority }, children);
+};
+const useOverlayPriority = () => useContext(OverlayPriorityContext);
+export { OverlayStackProvider, registerOverlay, useOverlayPriority };
+
+//# sourceMappingURL=index.js.map

package/dist/components/overlays/overlay-stack/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/overlays/overlay-stack/index.ts"],"sourcesContent":["import {\n  createContext,\n  createElement,\n  useContext,\n  type PropsWithChildren,\n} from \"react\";\n\ntype OverlayRegistrationOptions = {\n  modal?: boolean;\n  getContent?: () => HTMLElement | null;\n  getLayer?: () => HTMLElement | null;\n};\n\ntype OverlayEntry = {\n  onEscape: () => void;\n  priority: number;\n  order: number;\n  modal: boolean;\n  getContent?: () => HTMLElement | null;\n  getLayer?: () => HTMLElement | null;\n  previousFocus: HTMLElement | null;\n  lastFocused: HTMLElement | null;\n};\n\ntype InertSnapshot = {\n  inert: boolean;\n  ariaHidden: string | null;\n};\n\ntype OverlayStack = {\n  entries: OverlayEntry[];\n  nextOrder: number;\n  inertSnapshots: Map<HTMLElement, InertSnapshot>;\n  handleKeyDown: (event: KeyboardEvent) => void;\n  handleFocusIn: (event: FocusEvent) => void;\n  syncIsolation: () => void;\n};\n\ntype OverlayRegistration = (() => void) & {\n  isTop: () => boolean;\n};\n\ntype OverlayStackProviderProps = PropsWithChildren<{\n  priority: number;\n}>;\n\nconst OverlayPriorityContext = createContext(0);\n\nconst overlayStacks = new WeakMap<Document, OverlayStack>();\n\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"area[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled]):not([type='hidden'])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"iframe\",\n  \"object\",\n  \"embed\",\n  \"[contenteditable='true']\",\n  \"[tabindex]:not([tabindex='-1'])\",\n].join(\",\");\n\nconst focusElement = (element: HTMLElement | null) => {\n  if (!element?.isConnected) {\n    return;\n  }\n\n  try {\n    element.focus({ preventScroll: true });\n  } catch {\n    element.focus();\n  }\n};\n\nconst getFocusableElements = (container: HTMLElement) => {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  ).filter((element) => {\n    if (\n      element.hidden ||\n      element.closest(\"[hidden], [inert], [aria-hidden='true']\") ||\n      element.getAttribute(\"aria-disabled\") === \"true\"\n    ) {\n      return false;\n    }\n\n    const style = element.ownerDocument.defaultView?.getComputedStyle(element);\n\n    return style?.display !== \"none\" && style?.visibility !== \"hidden\";\n  });\n};\n\nconst getTopOverlay = (entries: OverlayEntry[]) => {\n  return entries.reduce<OverlayEntry | undefined>((top, entry) => {\n    if (\n      !top ||\n      entry.priority > top.priority ||\n      (entry.priority === top.priority && entry.order > top.order)\n    ) {\n      return entry;\n    }\n\n    return top;\n  }, undefined);\n};\n\nconst focusInitial = (entry: OverlayEntry) => {\n  const content = entry.getContent?.();\n\n  if (!content) {\n    return;\n  }\n\n  const autofocus = content.querySelector<HTMLElement>(\"[autofocus]\");\n\n  const focusable = getFocusableElements(content);\n\n  const target = autofocus ?? focusable[0] ?? content;\n\n  if (target === content && !content.hasAttribute(\"tabindex\")) {\n    content.setAttribute(\"tabindex\", \"-1\");\n  }\n\n  focusElement(target);\n};\n\nconst restoreInertSnapshots = (stack: OverlayStack) => {\n  for (const [element, snapshot] of stack.inertSnapshots) {\n    element.inert = snapshot.inert;\n\n    if (snapshot.ariaHidden === null) {\n      element.removeAttribute(\"aria-hidden\");\n    } else {\n      element.setAttribute(\"aria-hidden\", snapshot.ariaHidden);\n    }\n  }\n\n  stack.inertSnapshots.clear();\n};\n\nconst getBodyBranch = (\n  element: HTMLElement,\n  body: HTMLElement,\n): HTMLElement | null => {\n  let current: HTMLElement | null = element;\n\n  while (current?.parentElement && current.parentElement !== body) {\n    current = current.parentElement;\n  }\n\n  return current?.parentElement === body ? current : null;\n};\n\nconst syncModalIsolation = (stack: OverlayStack) => {\n  restoreInertSnapshots(stack);\n\n  const top = getTopOverlay(stack.entries);\n\n  // A non-modal overlay above a modal must remain interactive.\n  if (!top?.modal) {\n    return;\n  }\n\n  const content = top.getContent?.();\n  const layer = top.getLayer?.() ?? content;\n\n  if (!content || !layer) {\n    return;\n  }\n\n  const body = content.ownerDocument.body;\n  const activeBranch = getBodyBranch(layer, body);\n\n  if (!activeBranch) {\n    return;\n  }\n\n  for (const child of Array.from(body.children)) {\n    if (!(child instanceof content.ownerDocument.defaultView!.HTMLElement)) {\n      continue;\n    }\n\n    if (child === activeBranch || child.contains(activeBranch)) {\n      continue;\n    }\n\n    stack.inertSnapshots.set(child, {\n      inert: child.inert,\n      ariaHidden: child.getAttribute(\"aria-hidden\"),\n    });\n\n    child.inert = true;\n    child.setAttribute(\"aria-hidden\", \"true\");\n  }\n};\n\nconst createOverlayStack = (ownerDocument: Document): OverlayStack => {\n  const stack: OverlayStack = {\n    entries: [],\n    nextOrder: 0,\n    inertSnapshots: new Map(),\n\n    syncIsolation: () => {\n      syncModalIsolation(stack);\n    },\n\n    handleKeyDown: (event) => {\n      const top = getTopOverlay(stack.entries);\n\n      if (!top) {\n        return;\n      }\n\n      if (event.key === \"Escape\" && !event.defaultPrevented) {\n        event.preventDefault();\n        event.stopPropagation();\n\n        top.onEscape();\n        return;\n      }\n\n      // Only the topmost modal controls Tab navigation.\n      if (event.key !== \"Tab\" || !top.modal) {\n        return;\n      }\n\n      const content = top.getContent?.();\n\n      if (!content) {\n        return;\n      }\n\n      const focusable = getFocusableElements(content);\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      const active = ownerDocument.activeElement;\n\n      if (!first || !last) {\n        event.preventDefault();\n        focusElement(content);\n        return;\n      }\n\n      if (event.shiftKey) {\n        if (active === first || !content.contains(active)) {\n          event.preventDefault();\n          focusElement(last);\n        }\n\n        return;\n      }\n\n      if (active === last || !content.contains(active)) {\n        event.preventDefault();\n        focusElement(first);\n      }\n    },\n\n    handleFocusIn: (event) => {\n      const top = getTopOverlay(stack.entries);\n\n      if (!top?.modal) {\n        return;\n      }\n\n      const content = top.getContent?.();\n\n      if (!content) {\n        return;\n      }\n\n      const target = event.target;\n\n      if (target instanceof ownerDocument.defaultView!.HTMLElement) {\n        if (content.contains(target)) {\n          top.lastFocused = target;\n          return;\n        }\n      }\n\n      const lastFocused = top.lastFocused;\n\n      focusElement(\n        lastFocused?.isConnected && content.contains(lastFocused)\n          ? lastFocused\n          : (getFocusableElements(content)[0] ?? content),\n      );\n    },\n  };\n\n  ownerDocument.addEventListener(\"keydown\", stack.handleKeyDown, true);\n\n  ownerDocument.addEventListener(\"focusin\", stack.handleFocusIn, true);\n\n  return stack;\n};\n\nconst registerOverlay = (\n  ownerDocument: Document,\n  onEscape: () => void,\n  priority = 0,\n  options: OverlayRegistrationOptions = {},\n): OverlayRegistration => {\n  const stack =\n    overlayStacks.get(ownerDocument) ?? createOverlayStack(ownerDocument);\n\n  overlayStacks.set(ownerDocument, stack);\n\n  const activeElement = ownerDocument.activeElement;\n\n  const entry: OverlayEntry = {\n    onEscape,\n    priority,\n    order: stack.nextOrder++,\n    modal: options.modal ?? false,\n    getContent: options.getContent,\n    getLayer: options.getLayer,\n    previousFocus:\n      activeElement instanceof ownerDocument.defaultView!.HTMLElement\n        ? activeElement\n        : null,\n    lastFocused: null,\n  };\n\n  stack.entries.push(entry);\n  stack.syncIsolation();\n\n  if (entry.modal) {\n    focusInitial(entry);\n  }\n\n  const unregister = (() => {\n    const index = stack.entries.indexOf(entry);\n\n    if (index === -1) {\n      return;\n    }\n\n    const wasTop = getTopOverlay(stack.entries) === entry;\n\n    stack.entries.splice(index, 1);\n    stack.syncIsolation();\n\n    if (stack.entries.length === 0) {\n      ownerDocument.removeEventListener(\"keydown\", stack.handleKeyDown, true);\n\n      ownerDocument.removeEventListener(\"focusin\", stack.handleFocusIn, true);\n\n      overlayStacks.delete(ownerDocument);\n    }\n\n    if (!wasTop || !entry.modal) {\n      return;\n    }\n\n    Promise.resolve().then(() => {\n      const nextTop = getTopOverlay(stack.entries);\n\n      // Als een overlay boven de gesloten overlay actief blijft,\n      // moet focus binnen die overlay blijven.\n      if (nextTop?.modal) {\n        const content = nextTop.getContent?.();\n\n        if (content && !content.contains(ownerDocument.activeElement)) {\n          focusInitial(nextTop);\n        }\n\n        return;\n      }\n\n      // Herstel focus alleen als er geen modal overlay meer actief is.\n      if (entry.previousFocus?.isConnected) {\n        focusElement(entry.previousFocus);\n      }\n    });\n  }) as OverlayRegistration;\n\n  unregister.isTop = () => {\n    return getTopOverlay(stack.entries) === entry;\n  };\n\n  return unregister;\n};\n\nconst OverlayStackProvider = ({\n  priority,\n  children,\n}: OverlayStackProviderProps) => {\n  return createElement(\n    OverlayPriorityContext.Provider,\n    { value: priority },\n    children,\n  );\n};\n\nconst useOverlayPriority = () => useContext(OverlayPriorityContext);\n\nexport { OverlayStackProvider, registerOverlay, useOverlayPriority };\n\nexport type { OverlayRegistration, OverlayRegistrationOptions };\n"],"mappings":"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"}

package/dist/components/overlays/popout/index.cjs

@@ -0,0 +1,190 @@
+"use client";
+const require_index = require("../../utilities/transition/index.cjs");
+const require_index$1 = require("../overlay-stack/index.cjs");
+const require_use_floating_position = require("../floating-position/use-floating-position.cjs");
+;/* empty css             */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_dom = require("react-dom");
+let _puzzle_ui_theme_scope_context = require("@puzzle-ui/theme/scope-context");
+// src/components/overlays/popout/index.tsx
+const setRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+};
+const Popout = ({ trigger, children, position = "bottom", align = "start", action = "click", offset = 8, collisionPadding = 8, exitDelay = 150, open, defaultOpen = false, onOpenChange, closeOnOutsideClick = true, closeOnEscape = true, toggleOnClick = false, matchTriggerWidth = false, className, contentClassName }) => {
+	const themeScope = (0, _puzzle_ui_theme_scope_context.useThemeScope)();
+	const [internalOpen, setInternalOpen] = (0, react.useState)(defaultOpen);
+	const [mounted, setMounted] = (0, react.useState)(false);
+	const [anchorElement, setAnchorElement] = (0, react.useState)(null);
+	const [portalContainer, setPortalContainer] = (0, react.useState)(null);
+	const [contentElement, setContentElement] = (0, react.useState)(null);
+	const anchorRef = (0, react.useRef)(null);
+	const contentRef = (0, react.useRef)(null);
+	const pointerDocumentRef = (0, react.useRef)(null);
+	const isOpen = open ?? internalOpen;
+	const changeOpenState = (0, react.useCallback)((nextOpen) => {
+		if (open === void 0) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [open, onOpenChange]);
+	const debouncedClose = (0, react.useMemo)(() => (0, _puzzle_ui_core.debounce)(() => changeOpenState(false), Math.max(0, exitDelay)), [changeOpenState, exitDelay]);
+	const cancelDebouncedClose = (0, react.useCallback)(() => {
+		debouncedClose.cancel();
+	}, [debouncedClose]);
+	const scheduleClose = (0, react.useCallback)(() => {
+		if (exitDelay > 0) debouncedClose();
+		else changeOpenState(false);
+	}, [
+		debouncedClose,
+		exitDelay,
+		changeOpenState
+	]);
+	const removePointerListeners = (0, react.useCallback)((handler) => {
+		const ownerDocument = pointerDocumentRef.current;
+		if (!ownerDocument) return;
+		ownerDocument.removeEventListener("pointerup", handler);
+		ownerDocument.removeEventListener("pointercancel", handler);
+		pointerDocumentRef.current = null;
+	}, []);
+	const handleDocumentPointerUp = (0, react.useCallback)(() => {
+		removePointerListeners(handleDocumentPointerUp);
+		debouncedClose();
+	}, [debouncedClose, removePointerListeners]);
+	(0, react.useEffect)(() => {
+		setMounted(true);
+	}, []);
+	(0, react.useEffect)(() => {
+		return () => {
+			debouncedClose.cancel();
+			removePointerListeners(handleDocumentPointerUp);
+		};
+	}, [
+		debouncedClose,
+		handleDocumentPointerUp,
+		removePointerListeners
+	]);
+	const handleTriggerRef = (0, react.useCallback)((node) => {
+		anchorRef.current = node;
+		setAnchorElement(node);
+		setPortalContainer(themeScope ? themeScope.portalTarget : node?.ownerDocument.body ?? null);
+		setRef(trigger.props.ref, node);
+	}, [trigger, themeScope]);
+	const handleContentRef = (0, react.useCallback)((node) => {
+		contentRef.current = node;
+		setContentElement(node);
+	}, []);
+	const { style: positionStyle, placement, isPositioned } = require_use_floating_position.useFloatingPosition({
+		anchor: anchorElement,
+		content: contentElement,
+		enabled: mounted && isOpen,
+		position,
+		align,
+		offset,
+		collisionPadding,
+		matchTriggerWidth
+	});
+	(0, react.useEffect)(() => {
+		if (!isOpen || !closeOnOutsideClick || !portalContainer) return;
+		const ownerDocument = anchorElement?.ownerDocument;
+		const ownerWindow = ownerDocument?.defaultView;
+		if (!ownerDocument || !ownerWindow) return;
+		const handlePointerDown = (event) => {
+			const target = event.target;
+			if (!(target instanceof ownerWindow.Node)) return;
+			if (anchorRef.current?.contains(target) || contentRef.current?.contains(target)) return;
+			cancelDebouncedClose();
+			changeOpenState(false);
+		};
+		ownerDocument.addEventListener("pointerdown", handlePointerDown);
+		return () => {
+			ownerDocument.removeEventListener("pointerdown", handlePointerDown);
+		};
+	}, [
+		isOpen,
+		closeOnOutsideClick,
+		portalContainer,
+		anchorElement,
+		cancelDebouncedClose,
+		changeOpenState
+	]);
+	(0, react.useEffect)(() => {
+		if (!isOpen || !portalContainer || !anchorElement) return;
+		const ownerDocument = anchorElement.ownerDocument;
+		return require_index$1.registerOverlay(ownerDocument, () => {
+			if (!closeOnEscape) return;
+			cancelDebouncedClose();
+			changeOpenState(false);
+			if (contentRef.current?.contains(ownerDocument.activeElement)) anchorRef.current?.focus({ preventScroll: true });
+		});
+	}, [
+		isOpen,
+		portalContainer,
+		anchorElement,
+		closeOnEscape,
+		cancelDebouncedClose,
+		changeOpenState
+	]);
+	const handlePointerEnter = (event) => {
+		trigger.props.onPointerEnter?.(event);
+		if (action !== "hover") return;
+		cancelDebouncedClose();
+		changeOpenState(true);
+	};
+	const handlePointerLeave = (event) => {
+		trigger.props.onPointerLeave?.(event);
+		if (action !== "hover") return;
+		scheduleClose();
+	};
+	const handlePointerUp = (event) => {
+		trigger.props.onPointerUp?.(event);
+	};
+	const handlePointerDown = (event) => {
+		trigger.props.onPointerDown?.(event);
+		if (action !== "down" || event.defaultPrevented) return;
+		changeOpenState(true);
+		const ownerDocument = event.currentTarget.ownerDocument;
+		removePointerListeners(handleDocumentPointerUp);
+		pointerDocumentRef.current = ownerDocument;
+		ownerDocument.addEventListener("pointerup", handleDocumentPointerUp);
+		ownerDocument.addEventListener("pointercancel", handleDocumentPointerUp);
+	};
+	const handleClick = (event) => {
+		trigger.props.onClick?.(event);
+		if (action !== "click" || event.defaultPrevented) return;
+		changeOpenState(toggleOnClick ? !isOpen : true);
+	};
+	const triggerElement = (0, react.cloneElement)(trigger, {
+		ref: handleTriggerRef,
+		className: (0, _puzzle_ui_core.cn)(trigger.props.className, className),
+		onPointerEnter: handlePointerEnter,
+		onPointerLeave: handlePointerLeave,
+		onPointerDown: handlePointerDown,
+		onPointerUp: handlePointerUp,
+		onClick: handleClick
+	});
+	if (!mounted) return triggerElement;
+	const contentStyle = {
+		...positionStyle ?? {},
+		visibility: isPositioned ? "visible" : "hidden",
+		pointerEvents: isOpen && isPositioned ? "auto" : "none"
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [triggerElement, portalContainer && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Transition, {
+		visible: isOpen,
+		template: "fade",
+		duration: 200,
+		unmountOnExit: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: handleContentRef,
+			className: (0, _puzzle_ui_core.cn)("puzzle-popout__content", contentClassName),
+			"data-placement": placement,
+			style: contentStyle,
+			onPointerEnter: action === "hover" ? cancelDebouncedClose : void 0,
+			onPointerLeave: action === "hover" ? scheduleClose : void 0,
+			children
+		})
+	}), portalContainer)] });
+};
+exports.Popout = Popout;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/overlays/popout/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useThemeScope","useState","useRef","useCallback","useMemo","debounce","useFloatingPosition","registerOverlay","cloneElement","cn","createPortal","Transition"],"sources":["../../../../src/components/overlays/popout/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type MouseEvent,\n  type PointerEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { cn, debounce } from \"@puzzle-ui/core\";\nimport { useThemeScope } from \"@puzzle-ui/theme/scope-context\";\n\nimport { Transition } from \"../../utilities/transition\";\nimport { registerOverlay } from \"../overlay-stack\";\nimport { useFloatingPosition } from \"../floating-position\";\n\nimport \"./popout.css\";\n\ntype PopoutPosition = \"top\" | \"right\" | \"bottom\" | \"left\";\n\ntype PopoutAlignment = \"start\" | \"center\" | \"end\";\n\ntype PopoutAction = \"hover\" | \"click\" | \"down\";\n\ntype PopoutTriggerProps = HTMLAttributes<HTMLElement> &\n  RefAttributes<HTMLElement>;\n\ntype PopoutProps = {\n  trigger: ReactElement<PopoutTriggerProps>;\n  children: ReactNode;\n  position?: PopoutPosition;\n  align?: PopoutAlignment;\n  action?: PopoutAction;\n  offset?: number;\n  collisionPadding?: number;\n  exitDelay?: number;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  closeOnOutsideClick?: boolean;\n  closeOnEscape?: boolean;\n  toggleOnClick?: boolean;\n  matchTriggerWidth?: boolean;\n  className?: string;\n  contentClassName?: string;\n};\n\nconst setRef = <T,>(ref: Ref<T> | undefined, value: T | null): void => {\n  if (typeof ref === \"function\") {\n    ref(value);\n  } else if (ref) {\n    ref.current = value;\n  }\n};\n\nconst Popout = ({\n  trigger,\n  children,\n  position = \"bottom\",\n  align = \"start\",\n  action = \"click\",\n  offset = 8,\n  collisionPadding = 8,\n  exitDelay = 150,\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  closeOnOutsideClick = true,\n  closeOnEscape = true,\n  toggleOnClick = false,\n  matchTriggerWidth = false,\n  className,\n  contentClassName,\n}: PopoutProps) => {\n  const themeScope = useThemeScope();\n\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const [mounted, setMounted] = useState(false);\n\n  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);\n\n  const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(\n    null,\n  );\n\n  const [contentElement, setContentElement] = useState<HTMLDivElement | null>(\n    null,\n  );\n\n  const anchorRef = useRef<HTMLElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const pointerDocumentRef = useRef<Document | null>(null);\n\n  const isOpen = open ?? internalOpen;\n\n  const changeOpenState = useCallback(\n    (nextOpen: boolean) => {\n      if (open === undefined) {\n        setInternalOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [open, onOpenChange],\n  );\n\n  const debouncedClose = useMemo(\n    () => debounce(() => changeOpenState(false), Math.max(0, exitDelay)),\n    [changeOpenState, exitDelay],\n  );\n\n  const cancelDebouncedClose = useCallback(() => {\n    debouncedClose.cancel();\n  }, [debouncedClose]);\n\n  const scheduleClose = useCallback(() => {\n    if (exitDelay > 0) {\n      debouncedClose();\n    } else {\n      changeOpenState(false);\n    }\n  }, [debouncedClose, exitDelay, changeOpenState]);\n\n  const removePointerListeners = useCallback((handler: EventListener) => {\n    const ownerDocument = pointerDocumentRef.current;\n\n    if (!ownerDocument) {\n      return;\n    }\n\n    ownerDocument.removeEventListener(\"pointerup\", handler);\n    ownerDocument.removeEventListener(\"pointercancel\", handler);\n\n    pointerDocumentRef.current = null;\n  }, []);\n\n  const handleDocumentPointerUp = useCallback(() => {\n    removePointerListeners(handleDocumentPointerUp);\n    debouncedClose();\n  }, [debouncedClose, removePointerListeners]);\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    return () => {\n      debouncedClose.cancel();\n      removePointerListeners(handleDocumentPointerUp);\n    };\n  }, [debouncedClose, handleDocumentPointerUp, removePointerListeners]);\n\n  const handleTriggerRef = useCallback(\n    (node: HTMLElement | null) => {\n      anchorRef.current = node;\n      setAnchorElement(node);\n\n      setPortalContainer(\n        themeScope\n          ? themeScope.portalTarget\n          : (node?.ownerDocument.body ?? null),\n      );\n\n      setRef(trigger.props.ref, node);\n    },\n    [trigger, themeScope],\n  );\n\n  const handleContentRef = useCallback((node: HTMLDivElement | null) => {\n    contentRef.current = node;\n    setContentElement(node);\n  }, []);\n\n  const {\n    style: positionStyle,\n    placement,\n    isPositioned,\n  } = useFloatingPosition({\n    anchor: anchorElement,\n    content: contentElement,\n    enabled: mounted && isOpen,\n    position,\n    align,\n    offset,\n    collisionPadding,\n    matchTriggerWidth,\n  });\n\n  // Outside click\n  useEffect(() => {\n    if (!isOpen || !closeOnOutsideClick || !portalContainer) {\n      return;\n    }\n\n    const ownerDocument = anchorElement?.ownerDocument;\n    const ownerWindow = ownerDocument?.defaultView;\n\n    if (!ownerDocument || !ownerWindow) {\n      return;\n    }\n\n    const handlePointerDown = (event: globalThis.PointerEvent) => {\n      const target = event.target;\n\n      if (!(target instanceof ownerWindow.Node)) {\n        return;\n      }\n\n      if (\n        anchorRef.current?.contains(target) ||\n        contentRef.current?.contains(target)\n      ) {\n        return;\n      }\n\n      cancelDebouncedClose();\n      changeOpenState(false);\n    };\n\n    ownerDocument.addEventListener(\"pointerdown\", handlePointerDown);\n\n    return () => {\n      ownerDocument.removeEventListener(\"pointerdown\", handlePointerDown);\n    };\n  }, [\n    isOpen,\n    closeOnOutsideClick,\n    portalContainer,\n    anchorElement,\n    cancelDebouncedClose,\n    changeOpenState,\n  ]);\n\n  // Escape: only the topmost registered overlay handles the key.\n  useEffect(() => {\n    if (!isOpen || !portalContainer || !anchorElement) {\n      return;\n    }\n\n    const ownerDocument = anchorElement.ownerDocument;\n\n    return registerOverlay(ownerDocument, () => {\n      if (!closeOnEscape) {\n        return;\n      }\n\n      cancelDebouncedClose();\n      changeOpenState(false);\n\n      if (contentRef.current?.contains(ownerDocument.activeElement)) {\n        anchorRef.current?.focus({ preventScroll: true });\n      }\n    });\n  }, [\n    isOpen,\n    portalContainer,\n    anchorElement,\n    closeOnEscape,\n    cancelDebouncedClose,\n    changeOpenState,\n  ]);\n\n  const handlePointerEnter = (event: PointerEvent<HTMLElement>) => {\n    trigger.props.onPointerEnter?.(event);\n\n    if (action !== \"hover\") {\n      return;\n    }\n\n    cancelDebouncedClose();\n    changeOpenState(true);\n  };\n\n  const handlePointerLeave = (event: PointerEvent<HTMLElement>) => {\n    trigger.props.onPointerLeave?.(event);\n\n    if (action !== \"hover\") {\n      return;\n    }\n\n    scheduleClose();\n  };\n\n  const handlePointerUp = (event: PointerEvent<HTMLElement>) => {\n    trigger.props.onPointerUp?.(event);\n  };\n\n  const handlePointerDown = (event: PointerEvent<HTMLElement>) => {\n    trigger.props.onPointerDown?.(event);\n\n    if (action !== \"down\" || event.defaultPrevented) {\n      return;\n    }\n\n    changeOpenState(true);\n\n    const ownerDocument = event.currentTarget.ownerDocument;\n\n    removePointerListeners(handleDocumentPointerUp);\n\n    pointerDocumentRef.current = ownerDocument;\n\n    ownerDocument.addEventListener(\"pointerup\", handleDocumentPointerUp);\n    ownerDocument.addEventListener(\"pointercancel\", handleDocumentPointerUp);\n  };\n\n  const handleClick = (event: MouseEvent<HTMLElement>) => {\n    trigger.props.onClick?.(event);\n\n    if (action !== \"click\" || event.defaultPrevented) {\n      return;\n    }\n\n    changeOpenState(toggleOnClick ? !isOpen : true);\n  };\n\n  const triggerElement = cloneElement(trigger, {\n    ref: handleTriggerRef,\n    className: cn(trigger.props.className, className),\n    onPointerEnter: handlePointerEnter,\n    onPointerLeave: handlePointerLeave,\n    onPointerDown: handlePointerDown,\n    onPointerUp: handlePointerUp,\n    onClick: handleClick,\n  });\n\n  if (!mounted) {\n    return triggerElement;\n  }\n\n  const contentStyle: CSSProperties = {\n    ...(positionStyle ?? {}),\n    visibility: isPositioned ? \"visible\" : \"hidden\",\n    pointerEvents: isOpen && isPositioned ? \"auto\" : \"none\",\n  };\n\n  return (\n    <>\n      {triggerElement}\n\n      {portalContainer &&\n        createPortal(\n          <Transition\n            visible={isOpen}\n            template=\"fade\"\n            duration={200}\n            unmountOnExit\n          >\n            <div\n              ref={handleContentRef}\n              className={cn(\"puzzle-popout__content\", contentClassName)}\n              data-placement={placement}\n              style={contentStyle}\n              onPointerEnter={\n                action === \"hover\" ? cancelDebouncedClose : undefined\n              }\n              onPointerLeave={action === \"hover\" ? scheduleClose : undefined}\n            >\n              {children}\n            </div>\n          </Transition>,\n          portalContainer,\n        )}\n    </>\n  );\n};\n\nexport {\n  Popout,\n  type PopoutProps,\n  type PopoutPosition,\n  type PopoutAlignment,\n  type PopoutAction,\n  type PopoutTriggerProps,\n};\n"],"mappings":"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"}

package/dist/components/overlays/popout/index.d.cts

@@ -0,0 +1,26 @@
+import { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from "react";
+type PopoutPosition = "top" | "right" | "bottom" | "left";
+type PopoutAlignment = "start" | "center" | "end";
+type PopoutAction = "hover" | "click" | "down";
+type PopoutTriggerProps = HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>;
+type PopoutProps = {
+  trigger: ReactElement<PopoutTriggerProps>;
+  children: ReactNode;
+  position?: PopoutPosition;
+  align?: PopoutAlignment;
+  action?: PopoutAction;
+  offset?: number;
+  collisionPadding?: number;
+  exitDelay?: number;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  closeOnOutsideClick?: boolean;
+  closeOnEscape?: boolean;
+  toggleOnClick?: boolean;
+  matchTriggerWidth?: boolean;
+  className?: string;
+  contentClassName?: string;
+};
+declare const Popout: ({ trigger, children, position, align, action, offset, collisionPadding, exitDelay, open, defaultOpen, onOpenChange, closeOnOutsideClick, closeOnEscape, toggleOnClick, matchTriggerWidth, className, contentClassName }: PopoutProps) => import("react").JSX.Element;
+export { Popout, type PopoutAction, type PopoutAlignment, type PopoutPosition, type PopoutProps, type PopoutTriggerProps };

package/dist/components/overlays/popout/index.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from "react";
+type PopoutPosition = "top" | "right" | "bottom" | "left";
+type PopoutAlignment = "start" | "center" | "end";
+type PopoutAction = "hover" | "click" | "down";
+type PopoutTriggerProps = HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>;
+type PopoutProps = {
+  trigger: ReactElement<PopoutTriggerProps>;
+  children: ReactNode;
+  position?: PopoutPosition;
+  align?: PopoutAlignment;
+  action?: PopoutAction;
+  offset?: number;
+  collisionPadding?: number;
+  exitDelay?: number;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  closeOnOutsideClick?: boolean;
+  closeOnEscape?: boolean;
+  toggleOnClick?: boolean;
+  matchTriggerWidth?: boolean;
+  className?: string;
+  contentClassName?: string;
+};
+declare const Popout: ({ trigger, children, position, align, action, offset, collisionPadding, exitDelay, open, defaultOpen, onOpenChange, closeOnOutsideClick, closeOnEscape, toggleOnClick, matchTriggerWidth, className, contentClassName }: PopoutProps) => import("react").JSX.Element;
+export { Popout, type PopoutAction, type PopoutAlignment, type PopoutPosition, type PopoutProps, type PopoutTriggerProps };