@puzzle-ui/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,195 @@
+"use client";
+import { Transition } from "../../utilities/transition/index.js";
+import { registerOverlay } from "../overlay-stack/index.js";
+import { useFloatingPosition } from "../floating-position/use-floating-position.js";
+import "./popout.css";
+import { cn, debounce } from "@puzzle-ui/core";
+import { cloneElement, createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { useThemeScope } from "@puzzle-ui/theme/scope-context";
+// src/components/overlays/popout/index.tsx
+const PopoutPositionedContext = createContext(true);
+const usePopoutPositioned = () => useContext(PopoutPositionedContext);
+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 = useThemeScope();
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const [mounted, setMounted] = useState(false);
+	const [anchorElement, setAnchorElement] = useState(null);
+	const [portalContainer, setPortalContainer] = useState(null);
+	const [contentElement, setContentElement] = useState(null);
+	const anchorRef = useRef(null);
+	const contentRef = useRef(null);
+	const pointerDocumentRef = useRef(null);
+	const isOpen = open ?? internalOpen;
+	const changeOpenState = useCallback((nextOpen) => {
+		if (open === void 0) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [open, onOpenChange]);
+	const debouncedClose = useMemo(() => debounce(() => changeOpenState(false), Math.max(0, exitDelay)), [changeOpenState, exitDelay]);
+	const cancelDebouncedClose = useCallback(() => {
+		debouncedClose.cancel();
+	}, [debouncedClose]);
+	const scheduleClose = useCallback(() => {
+		if (exitDelay > 0) debouncedClose();
+		else changeOpenState(false);
+	}, [
+		debouncedClose,
+		exitDelay,
+		changeOpenState
+	]);
+	const removePointerListeners = useCallback((handler) => {
+		const ownerDocument = pointerDocumentRef.current;
+		if (!ownerDocument) return;
+		ownerDocument.removeEventListener("pointerup", handler);
+		ownerDocument.removeEventListener("pointercancel", handler);
+		pointerDocumentRef.current = null;
+	}, []);
+	const handleDocumentPointerUp = useCallback(() => {
+		removePointerListeners(handleDocumentPointerUp);
+		debouncedClose();
+	}, [debouncedClose, removePointerListeners]);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	useEffect(() => {
+		return () => {
+			debouncedClose.cancel();
+			removePointerListeners(handleDocumentPointerUp);
+		};
+	}, [
+		debouncedClose,
+		handleDocumentPointerUp,
+		removePointerListeners
+	]);
+	const handleTriggerRef = useCallback((node) => {
+		anchorRef.current = node;
+		setAnchorElement(node);
+		setPortalContainer(themeScope ? themeScope.portalTarget : node?.ownerDocument.body ?? null);
+		setRef(trigger.props.ref, node);
+	}, [trigger, themeScope]);
+	const handleContentRef = useCallback((node) => {
+		contentRef.current = node;
+		setContentElement(node);
+	}, []);
+	const { style: positionStyle, placement, isPositioned } = useFloatingPosition({
+		anchor: anchorElement,
+		content: contentElement,
+		enabled: mounted && isOpen,
+		position,
+		align,
+		offset,
+		collisionPadding,
+		matchTriggerWidth
+	});
+	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
+	]);
+	useEffect(() => {
+		if (!isOpen || !portalContainer || !anchorElement) return;
+		const ownerDocument = anchorElement.ownerDocument;
+		return 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 = cloneElement(trigger, {
+		ref: handleTriggerRef,
+		className: 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__ */ jsxs(Fragment$1, { children: [triggerElement, portalContainer && createPortal(/* @__PURE__ */ jsx(Transition, {
+		visible: isOpen,
+		template: "fade",
+		duration: 200,
+		unmountOnExit: true,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: handleContentRef,
+			className: cn("puzzle-popout__content", contentClassName),
+			"data-placement": placement,
+			style: contentStyle,
+			onPointerEnter: action === "hover" ? cancelDebouncedClose : void 0,
+			onPointerLeave: action === "hover" ? scheduleClose : void 0,
+			children: /* @__PURE__ */ jsx(PopoutPositionedContext.Provider, {
+				value: isPositioned,
+				children
+			})
+		})
+	}), portalContainer)] });
+};
+export { Popout, usePopoutPositioned };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/overlays/popout/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  cloneElement,\n  createContext,\n  useCallback,\n  useContext,\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\n// Content is hidden, and therefore unfocusable, until it has been positioned.\nconst PopoutPositionedContext = createContext(true);\n\nconst usePopoutPositioned = (): boolean => useContext(PopoutPositionedContext);\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              <PopoutPositionedContext.Provider value={isPositioned}>\n                {children}\n              </PopoutPositionedContext.Provider>\n            </div>\n          </Transition>,\n          portalContainer,\n        )}\n    </>\n  );\n};\n\nexport {\n  Popout,\n  usePopoutPositioned,\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/popout.css

@@ -0,0 +1,15 @@
+.puzzle-popout__content {
+  z-index: var(--puzzle-z-index-popover, 1400);
+  box-sizing: border-box;
+  overscroll-behavior: contain;
+  max-width: calc(100vw - 1rem);
+  max-height: calc(100dvh - 1rem);
+  color: var(--puzzle-color-text, #171717);
+  background-color: var(--puzzle-color-surface, #fff);
+  border: 1px solid var(--puzzle-color-border, #e5e5e5);
+  border-radius: var(--puzzle-radius-md, 8px);
+  box-shadow: var(--puzzle-elevation-8, 0 12px 32px #00000029);
+  padding: var(--puzzle-space-3, .75rem);
+  position: fixed;
+  overflow: auto;
+}

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

@@ -0,0 +1,163 @@
+"use client";
+const require_index = require("../popout/index.cjs");
+;/* empty css              */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/overlays/popover/index.tsx
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type='hidden'])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex='-1'])",
+	"[contenteditable='true']"
+].join(",");
+const getFocusable = (dialog) => Array.from(dialog.querySelectorAll(FOCUSABLE_SELECTOR));
+/** Returns whether focus actually landed inside the dialog. */
+const focusFirst = (dialog) => {
+	(getFocusable(dialog)[0] ?? dialog).focus({ preventScroll: true });
+	return dialog.contains(dialog.ownerDocument.activeElement);
+};
+const setRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+};
+const PopoverContent = ({ id, title, ariaLabel, closable, closeLabel, skipAutoFocusRef, dialogRef, anchorRef, onClose, children, className }) => {
+	const titleId = `${id}-title`;
+	(0, react.useEffect)(() => {
+		const dialog = dialogRef.current;
+		if (!dialog) return;
+		if (skipAutoFocusRef.current) {
+			skipAutoFocusRef.current = false;
+			return;
+		}
+		const surface = dialog.parentElement;
+		if (focusFirst(dialog) || !surface) return;
+		const observer = new ((dialog.ownerDocument.defaultView?.MutationObserver) ?? MutationObserver)(() => {
+			if (surface.style.visibility !== "hidden") {
+				observer.disconnect();
+				focusFirst(dialog);
+			}
+		});
+		observer.observe(surface, {
+			attributes: true,
+			attributeFilter: ["style"]
+		});
+		return () => observer.disconnect();
+	}, [dialogRef, skipAutoFocusRef]);
+	const handleBlur = (event) => {
+		const next = event.relatedTarget;
+		if (next && !event.currentTarget.contains(next) && !anchorRef.current?.contains(next)) onClose();
+	};
+	const handleKeyDown = (event) => {
+		if (event.key !== "Tab") return;
+		const dialog = event.currentTarget;
+		const focusable = getFocusable(dialog);
+		const active = dialog.ownerDocument.activeElement;
+		const first = focusable[0] ?? dialog;
+		const last = focusable[focusable.length - 1] ?? dialog;
+		if (event.shiftKey && (active === first || active === dialog)) {
+			event.preventDefault();
+			anchorRef.current?.focus({ preventScroll: true });
+		} else if (!event.shiftKey && active === last) {
+			event.preventDefault();
+			onClose();
+			anchorRef.current?.focus({ preventScroll: true });
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: dialogRef,
+		id,
+		role: "dialog",
+		"aria-labelledby": title != null ? titleId : void 0,
+		"aria-label": title == null ? ariaLabel : void 0,
+		tabIndex: -1,
+		className: (0, _puzzle_ui_core.cn)("puzzle-popover", className),
+		onBlur: handleBlur,
+		onKeyDown: handleKeyDown,
+		children: [(title != null || closable) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "puzzle-popover__header",
+			children: [title != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: titleId,
+				className: "puzzle-popover__title",
+				children: title
+			}), closable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "puzzle-popover__close",
+				"aria-label": closeLabel,
+				onClick: () => {
+					onClose();
+					anchorRef.current?.focus({ preventScroll: true });
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"aria-hidden": "true",
+					children: "×"
+				})
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "puzzle-popover__body",
+			children
+		})]
+	});
+};
+const Popover = ({ trigger, children, title, "aria-label": ariaLabel, closable = false, closeLabel = "Close", position = "bottom", align = "center", offset = 8, open, defaultOpen, onOpenChange, className, triggerClassName }) => {
+	const popoverId = (0, react.useId)();
+	const anchorRef = (0, react.useRef)(null);
+	const dialogRef = (0, react.useRef)(null);
+	const [internalOpen, setInternalOpen] = (0, react.useState)(defaultOpen ?? false);
+	const isOpen = open ?? internalOpen;
+	const skipAutoFocusRef = (0, react.useRef)(isOpen);
+	const handleOpenChange = (0, react.useCallback)((nextOpen) => {
+		if (open === void 0) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [open, onOpenChange]);
+	const handleTriggerRef = (0, react.useCallback)((node) => {
+		anchorRef.current = node;
+		setRef(trigger.props.ref, node);
+	}, [trigger]);
+	const handleTriggerKeyDown = (event) => {
+		trigger.props.onKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== "Tab" || event.shiftKey || !isOpen || !dialogRef.current) return;
+		event.preventDefault();
+		focusFirst(dialogRef.current);
+	};
+	const triggerElement = (0, react.cloneElement)(trigger, {
+		ref: handleTriggerRef,
+		onKeyDown: handleTriggerKeyDown,
+		"aria-haspopup": "dialog",
+		"aria-expanded": isOpen,
+		"aria-controls": isOpen ? popoverId : void 0
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Popout, {
+		trigger: triggerElement,
+		position,
+		align,
+		action: "click",
+		toggleOnClick: true,
+		offset,
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		closeOnOutsideClick: true,
+		closeOnEscape: true,
+		className: triggerClassName,
+		contentClassName: "puzzle-popover__surface",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverContent, {
+			id: popoverId,
+			title,
+			ariaLabel,
+			closable,
+			closeLabel,
+			skipAutoFocusRef,
+			dialogRef,
+			anchorRef,
+			onClose: () => handleOpenChange(false),
+			className,
+			children
+		})
+	});
+};
+exports.Popover = Popover;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn","useId","useRef","useState","useCallback","cloneElement","Popout"],"sources":["../../../../src/components/overlays/popover/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  cloneElement,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type FocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type RefAttributes,\n  type RefObject,\n} from \"react\";\nimport { cn } from \"@puzzle-ui/core\";\nimport { Popout, type PopoutAlignment, type PopoutPosition } from \"../popout\";\nimport \"./popover.css\";\n\ntype PopoverTriggerProps = HTMLAttributes<HTMLElement> &\n  RefAttributes<HTMLElement>;\n\n/**\n * Non-modal dialog anchored to a trigger, for interactive content such as\n * links, form controls or actions. Use Tooltip for non-interactive hints.\n */\ntype PopoverProps = {\n  trigger: ReactElement<PopoverTriggerProps>;\n  children: ReactNode;\n  /** Visible heading; also used as the dialog's accessible name. */\n  title?: ReactNode;\n  /** Accessible name when there is no visible title. */\n  \"aria-label\"?: string;\n  /** Renders a close button inside the popover. */\n  closable?: boolean;\n  closeLabel?: string;\n  position?: PopoutPosition;\n  align?: PopoutAlignment;\n  offset?: number;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  className?: string;\n  triggerClassName?: string;\n};\n\ntype PopoverContentProps = {\n  id: string;\n  title?: ReactNode;\n  ariaLabel?: string;\n  closable: boolean;\n  closeLabel: string;\n  skipAutoFocusRef: RefObject<boolean>;\n  dialogRef: RefObject<HTMLDivElement | null>;\n  anchorRef: RefObject<HTMLElement | null>;\n  onClose: () => void;\n  children: ReactNode;\n  className?: string;\n};\n\nconst FOCUSABLE_SELECTOR = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled]):not([type='hidden'])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"[tabindex]:not([tabindex='-1'])\",\n  \"[contenteditable='true']\",\n].join(\",\");\n\nconst getFocusable = (dialog: HTMLElement): HTMLElement[] =>\n  Array.from(dialog.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR));\n\n/** Returns whether focus actually landed inside the dialog. */\nconst focusFirst = (dialog: HTMLElement): boolean => {\n  const target = getFocusable(dialog)[0] ?? dialog;\n\n  target.focus({ preventScroll: true });\n\n  return dialog.contains(dialog.ownerDocument.activeElement);\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 PopoverContent = ({\n  id,\n  title,\n  ariaLabel,\n  closable,\n  closeLabel,\n  skipAutoFocusRef,\n  dialogRef,\n  anchorRef,\n  onClose,\n  children,\n  className,\n}: PopoverContentProps) => {\n  const titleId = `${id}-title`;\n\n  // Popout keeps the surface `visibility: hidden` until it is positioned, and\n  // hidden elements cannot receive focus; retry once the surface is revealed.\n  useEffect(() => {\n    const dialog = dialogRef.current;\n\n    if (!dialog) return;\n\n    if (skipAutoFocusRef.current) {\n      skipAutoFocusRef.current = false;\n      return;\n    }\n\n    const surface = dialog.parentElement;\n\n    if (focusFirst(dialog) || !surface) return;\n\n    const MutationObserverConstructor =\n      dialog.ownerDocument.defaultView?.MutationObserver ?? MutationObserver;\n    const observer = new MutationObserverConstructor(() => {\n      if (surface.style.visibility !== \"hidden\") {\n        observer.disconnect();\n        focusFirst(dialog);\n      }\n    });\n\n    observer.observe(surface, { attributes: true, attributeFilter: [\"style\"] });\n\n    return () => observer.disconnect();\n  }, [dialogRef, skipAutoFocusRef]);\n\n  // Non-modal: moving focus outside both the popover and its trigger closes it.\n  const handleBlur = (event: FocusEvent<HTMLDivElement>) => {\n    const next = event.relatedTarget as Node | null;\n\n    if (\n      next &&\n      !event.currentTarget.contains(next) &&\n      !anchorRef.current?.contains(next)\n    ) {\n      onClose();\n    }\n  };\n\n  // The popover is portaled, so keep Tab order anchored to the trigger.\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (event.key !== \"Tab\") return;\n\n    const dialog = event.currentTarget;\n    const focusable = getFocusable(dialog);\n    const active = dialog.ownerDocument.activeElement;\n    const first = focusable[0] ?? dialog;\n    const last = focusable[focusable.length - 1] ?? dialog;\n\n    if (event.shiftKey && (active === first || active === dialog)) {\n      event.preventDefault();\n      anchorRef.current?.focus({ preventScroll: true });\n    } else if (!event.shiftKey && active === last) {\n      event.preventDefault();\n      onClose();\n      anchorRef.current?.focus({ preventScroll: true });\n    }\n  };\n\n  return (\n    <div\n      ref={dialogRef}\n      id={id}\n      role=\"dialog\"\n      aria-labelledby={title != null ? titleId : undefined}\n      aria-label={title == null ? ariaLabel : undefined}\n      tabIndex={-1}\n      className={cn(\"puzzle-popover\", className)}\n      onBlur={handleBlur}\n      onKeyDown={handleKeyDown}\n    >\n      {(title != null || closable) && (\n        <div className=\"puzzle-popover__header\">\n          {title != null && (\n            <div id={titleId} className=\"puzzle-popover__title\">\n              {title}\n            </div>\n          )}\n\n          {closable && (\n            <button\n              type=\"button\"\n              className=\"puzzle-popover__close\"\n              aria-label={closeLabel}\n              onClick={() => {\n                onClose();\n                anchorRef.current?.focus({ preventScroll: true });\n              }}\n            >\n              <span aria-hidden=\"true\">&times;</span>\n            </button>\n          )}\n        </div>\n      )}\n\n      <div className=\"puzzle-popover__body\">{children}</div>\n    </div>\n  );\n};\n\nconst Popover = ({\n  trigger,\n  children,\n  title,\n  \"aria-label\": ariaLabel,\n  closable = false,\n  closeLabel = \"Close\",\n  position = \"bottom\",\n  align = \"center\",\n  offset = 8,\n  open,\n  defaultOpen,\n  onOpenChange,\n  className,\n  triggerClassName,\n}: PopoverProps) => {\n  const popoverId = useId();\n  const anchorRef = useRef<HTMLElement | null>(null);\n  const dialogRef = useRef<HTMLDivElement | null>(null);\n  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);\n  const isOpen = open ?? internalOpen;\n\n  // A popover that is already open on first render must not steal focus.\n  const skipAutoFocusRef = useRef(isOpen);\n\n  const handleOpenChange = useCallback(\n    (nextOpen: boolean) => {\n      if (open === undefined) {\n        setInternalOpen(nextOpen);\n      }\n\n      onOpenChange?.(nextOpen);\n    },\n    [open, onOpenChange],\n  );\n\n  const handleTriggerRef = useCallback(\n    (node: HTMLElement | null) => {\n      anchorRef.current = node;\n      setRef(trigger.props.ref, node);\n    },\n    [trigger],\n  );\n\n  // Tab from the trigger moves into the open popover instead of skipping it.\n  const handleTriggerKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    trigger.props.onKeyDown?.(event);\n\n    if (\n      event.defaultPrevented ||\n      event.key !== \"Tab\" ||\n      event.shiftKey ||\n      !isOpen ||\n      !dialogRef.current\n    ) {\n      return;\n    }\n\n    event.preventDefault();\n    focusFirst(dialogRef.current);\n  };\n\n  const triggerElement = cloneElement(trigger, {\n    ref: handleTriggerRef,\n    onKeyDown: handleTriggerKeyDown,\n    \"aria-haspopup\": \"dialog\",\n    \"aria-expanded\": isOpen,\n    \"aria-controls\": isOpen ? popoverId : undefined,\n  });\n\n  return (\n    <Popout\n      trigger={triggerElement}\n      position={position}\n      align={align}\n      action=\"click\"\n      toggleOnClick\n      offset={offset}\n      open={isOpen}\n      onOpenChange={handleOpenChange}\n      closeOnOutsideClick\n      closeOnEscape\n      className={triggerClassName}\n      contentClassName=\"puzzle-popover__surface\"\n    >\n      <PopoverContent\n        id={popoverId}\n        title={title}\n        ariaLabel={ariaLabel}\n        closable={closable}\n        closeLabel={closeLabel}\n        skipAutoFocusRef={skipAutoFocusRef}\n        dialogRef={dialogRef}\n        anchorRef={anchorRef}\n        onClose={() => handleOpenChange(false)}\n        className={className}\n      >\n        {children}\n      </PopoverContent>\n    </Popout>\n  );\n};\n\nexport { Popover, type PopoverProps };\n"],"mappings":"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"}

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

@@ -0,0 +1,28 @@
+import { PopoutAlignment, PopoutPosition } from "../popout/index.cjs";
+import { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from "react";
+type PopoverTriggerProps = HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>;
+/**
+ * Non-modal dialog anchored to a trigger, for interactive content such as
+ * links, form controls or actions. Use Tooltip for non-interactive hints.
+ */
+type PopoverProps = {
+  trigger: ReactElement<PopoverTriggerProps>;
+  children: ReactNode;
+  /** Visible heading; also used as the dialog's accessible name. */
+  title?: ReactNode;
+  /** Accessible name when there is no visible title. */
+  "aria-label"?: string;
+  /** Renders a close button inside the popover. */
+  closable?: boolean;
+  closeLabel?: string;
+  position?: PopoutPosition;
+  align?: PopoutAlignment;
+  offset?: number;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  triggerClassName?: string;
+};
+declare const Popover: ({ trigger, children, title, "aria-label": ariaLabel, closable, closeLabel, position, align, offset, open, defaultOpen, onOpenChange, className, triggerClassName }: PopoverProps) => import("react").JSX.Element;
+export { Popover, type PopoverProps };

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

@@ -0,0 +1,28 @@
+import { PopoutAlignment, PopoutPosition } from "../popout/index.js";
+import { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from "react";
+type PopoverTriggerProps = HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>;
+/**
+ * Non-modal dialog anchored to a trigger, for interactive content such as
+ * links, form controls or actions. Use Tooltip for non-interactive hints.
+ */
+type PopoverProps = {
+  trigger: ReactElement<PopoverTriggerProps>;
+  children: ReactNode;
+  /** Visible heading; also used as the dialog's accessible name. */
+  title?: ReactNode;
+  /** Accessible name when there is no visible title. */
+  "aria-label"?: string;
+  /** Renders a close button inside the popover. */
+  closable?: boolean;
+  closeLabel?: string;
+  position?: PopoutPosition;
+  align?: PopoutAlignment;
+  offset?: number;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  triggerClassName?: string;
+};
+declare const Popover: ({ trigger, children, title, "aria-label": ariaLabel, closable, closeLabel, position, align, offset, open, defaultOpen, onOpenChange, className, triggerClassName }: PopoverProps) => import("react").JSX.Element;
+export { Popover, type PopoverProps };

package/dist/components/overlays/popover/index.js

@@ -0,0 +1,163 @@
+"use client";
+import { Popout } from "../popout/index.js";
+import "./popover.css";
+import { cn } from "@puzzle-ui/core";
+import { cloneElement, useCallback, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/overlays/popover/index.tsx
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type='hidden'])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex='-1'])",
+	"[contenteditable='true']"
+].join(",");
+const getFocusable = (dialog) => Array.from(dialog.querySelectorAll(FOCUSABLE_SELECTOR));
+/** Returns whether focus actually landed inside the dialog. */
+const focusFirst = (dialog) => {
+	(getFocusable(dialog)[0] ?? dialog).focus({ preventScroll: true });
+	return dialog.contains(dialog.ownerDocument.activeElement);
+};
+const setRef = (ref, value) => {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+};
+const PopoverContent = ({ id, title, ariaLabel, closable, closeLabel, skipAutoFocusRef, dialogRef, anchorRef, onClose, children, className }) => {
+	const titleId = `${id}-title`;
+	useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog) return;
+		if (skipAutoFocusRef.current) {
+			skipAutoFocusRef.current = false;
+			return;
+		}
+		const surface = dialog.parentElement;
+		if (focusFirst(dialog) || !surface) return;
+		const observer = new ((dialog.ownerDocument.defaultView?.MutationObserver) ?? MutationObserver)(() => {
+			if (surface.style.visibility !== "hidden") {
+				observer.disconnect();
+				focusFirst(dialog);
+			}
+		});
+		observer.observe(surface, {
+			attributes: true,
+			attributeFilter: ["style"]
+		});
+		return () => observer.disconnect();
+	}, [dialogRef, skipAutoFocusRef]);
+	const handleBlur = (event) => {
+		const next = event.relatedTarget;
+		if (next && !event.currentTarget.contains(next) && !anchorRef.current?.contains(next)) onClose();
+	};
+	const handleKeyDown = (event) => {
+		if (event.key !== "Tab") return;
+		const dialog = event.currentTarget;
+		const focusable = getFocusable(dialog);
+		const active = dialog.ownerDocument.activeElement;
+		const first = focusable[0] ?? dialog;
+		const last = focusable[focusable.length - 1] ?? dialog;
+		if (event.shiftKey && (active === first || active === dialog)) {
+			event.preventDefault();
+			anchorRef.current?.focus({ preventScroll: true });
+		} else if (!event.shiftKey && active === last) {
+			event.preventDefault();
+			onClose();
+			anchorRef.current?.focus({ preventScroll: true });
+		}
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: dialogRef,
+		id,
+		role: "dialog",
+		"aria-labelledby": title != null ? titleId : void 0,
+		"aria-label": title == null ? ariaLabel : void 0,
+		tabIndex: -1,
+		className: cn("puzzle-popover", className),
+		onBlur: handleBlur,
+		onKeyDown: handleKeyDown,
+		children: [(title != null || closable) && /* @__PURE__ */ jsxs("div", {
+			className: "puzzle-popover__header",
+			children: [title != null && /* @__PURE__ */ jsx("div", {
+				id: titleId,
+				className: "puzzle-popover__title",
+				children: title
+			}), closable && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "puzzle-popover__close",
+				"aria-label": closeLabel,
+				onClick: () => {
+					onClose();
+					anchorRef.current?.focus({ preventScroll: true });
+				},
+				children: /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: "×"
+				})
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "puzzle-popover__body",
+			children
+		})]
+	});
+};
+const Popover = ({ trigger, children, title, "aria-label": ariaLabel, closable = false, closeLabel = "Close", position = "bottom", align = "center", offset = 8, open, defaultOpen, onOpenChange, className, triggerClassName }) => {
+	const popoverId = useId();
+	const anchorRef = useRef(null);
+	const dialogRef = useRef(null);
+	const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+	const isOpen = open ?? internalOpen;
+	const skipAutoFocusRef = useRef(isOpen);
+	const handleOpenChange = useCallback((nextOpen) => {
+		if (open === void 0) setInternalOpen(nextOpen);
+		onOpenChange?.(nextOpen);
+	}, [open, onOpenChange]);
+	const handleTriggerRef = useCallback((node) => {
+		anchorRef.current = node;
+		setRef(trigger.props.ref, node);
+	}, [trigger]);
+	const handleTriggerKeyDown = (event) => {
+		trigger.props.onKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== "Tab" || event.shiftKey || !isOpen || !dialogRef.current) return;
+		event.preventDefault();
+		focusFirst(dialogRef.current);
+	};
+	const triggerElement = cloneElement(trigger, {
+		ref: handleTriggerRef,
+		onKeyDown: handleTriggerKeyDown,
+		"aria-haspopup": "dialog",
+		"aria-expanded": isOpen,
+		"aria-controls": isOpen ? popoverId : void 0
+	});
+	return /* @__PURE__ */ jsx(Popout, {
+		trigger: triggerElement,
+		position,
+		align,
+		action: "click",
+		toggleOnClick: true,
+		offset,
+		open: isOpen,
+		onOpenChange: handleOpenChange,
+		closeOnOutsideClick: true,
+		closeOnEscape: true,
+		className: triggerClassName,
+		contentClassName: "puzzle-popover__surface",
+		children: /* @__PURE__ */ jsx(PopoverContent, {
+			id: popoverId,
+			title,
+			ariaLabel,
+			closable,
+			closeLabel,
+			skipAutoFocusRef,
+			dialogRef,
+			anchorRef,
+			onClose: () => handleOpenChange(false),
+			className,
+			children
+		})
+	});
+};
+export { Popover };
+
+//# sourceMappingURL=index.js.map