@zendir/ui 0.5.0 → 0.6.1

package/dist/react/core/overlays/Popover.d.ts

@@ -1,6 +1,5 @@
 import { default as React } from 'react';
-
-export type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+export type PopoverPlacement = "top" | "top-start" | "top-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end" | "right" | "right-start" | "right-end";
 export interface PopoverProps {
     /** Trigger element */
     trigger: React.ReactElement;
@@ -17,7 +16,7 @@ export interface PopoverProps {
     /** Close on content click */
     closeOnClick?: boolean;
     /** Width: 'trigger' matches trigger width, number for px, 'auto' */
-    width?: 'trigger' | 'auto' | number;
+    width?: "trigger" | "auto" | number;
     /** Custom style for popover panel */
     style?: React.CSSProperties;
 }

package/dist/react/core/overlays/Popover.js

@@ -1,294 +1,315 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, useState, useRef, useCallback, useEffect, useContext, createContext } from "react";
 import { useTheme } from "../../theme/ThemeProvider.js";
-const PopoverContext = createContext({ close: () => {
-} });
-const Popover = memo(function Popover2({
-  trigger,
-  children,
-  placement = "bottom-start",
-  hover = false,
-  open: controlledOpen,
-  onOpenChange,
-  closeOnClick = true,
-  width = "auto",
-  style
-}) {
-  const { tokens, theme } = useTheme();
-  const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
-  const [internalOpen, setInternalOpen] = useState(false);
-  const triggerRef = useRef(null);
-  const popoverRef = useRef(null);
-  const hoverTimeout = useRef();
-  const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
-  const setOpen = useCallback((val) => {
-    if (controlledOpen === void 0) setInternalOpen(val);
-    onOpenChange == null ? void 0 : onOpenChange(val);
-  }, [controlledOpen, onOpenChange]);
-  const close = useCallback(() => setOpen(false), [setOpen]);
-  useEffect(() => {
-    if (!isOpen) return;
-    const handler = (e) => {
-      if (triggerRef.current && !triggerRef.current.contains(e.target) && popoverRef.current && !popoverRef.current.contains(e.target)) {
-        close();
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, [isOpen, close]);
-  useEffect(() => {
-    if (!isOpen) return;
-    const handler = (e) => {
-      if (e.key === "Escape") close();
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [isOpen, close]);
-  useEffect(() => {
-    return () => {
-      clearTimeout(hoverTimeout.current);
-    };
-  }, []);
-  const [position, setPosition] = useState({ position: "fixed", left: 0, top: 0 });
-  const [positioned, setPositioned] = useState(false);
-  useEffect(() => {
-    if (!isOpen) setPositioned(false);
-  }, [isOpen]);
-  useEffect(() => {
-    if (!isOpen || !triggerRef.current) return;
-    const gap = 8;
-    const viewportPadding = 8;
-    const updatePosition = () => {
-      var _a, _b, _c;
-      const rect = (_a = triggerRef.current) == null ? void 0 : _a.getBoundingClientRect();
-      if (!rect) return;
-      const panelWidth = width === "trigger" ? rect.width : typeof width === "number" ? width : ((_b = popoverRef.current) == null ? void 0 : _b.offsetWidth) ?? 220;
-      const panelHeight = ((_c = popoverRef.current) == null ? void 0 : _c.offsetHeight) ?? 220;
-      let left = rect.left;
-      let top = rect.bottom + gap;
-      if (placement.startsWith("top")) {
-        top = rect.top - panelHeight - gap;
-      } else if (placement.startsWith("bottom")) {
-        top = rect.bottom + gap;
-      } else if (placement.startsWith("left")) {
-        left = rect.left - panelWidth - gap;
-      } else if (placement.startsWith("right")) {
-        left = rect.right + gap;
-      }
-      if (placement.startsWith("top") || placement.startsWith("bottom")) {
-        if (placement.endsWith("-start")) {
-          left = rect.left;
-        } else if (placement.endsWith("-end")) {
-          left = rect.right - panelWidth;
-        } else {
-          left = rect.left + (rect.width - panelWidth) / 2;
-        }
-      } else {
-        if (placement.endsWith("-start")) {
-          top = rect.top;
-        } else if (placement.endsWith("-end")) {
-          top = rect.bottom - panelHeight;
-        } else {
-          top = rect.top + (rect.height - panelHeight) / 2;
-        }
-      }
-      left = Math.max(viewportPadding, Math.min(left, window.innerWidth - panelWidth - viewportPadding));
-      top = Math.max(viewportPadding, Math.min(top, window.innerHeight - panelHeight - viewportPadding));
-      const pos = {
-        position: "fixed",
-        zIndex: 9990,
-        left,
-        top
-      };
-      if (width === "trigger") {
-        pos.width = rect.width;
-        pos.minWidth = rect.width;
-      } else if (typeof width === "number") {
-        pos.width = width;
-      }
-      setPosition(pos);
-      setPositioned(true);
-    };
-    const raf = requestAnimationFrame(updatePosition);
-    window.addEventListener("resize", updatePosition);
-    window.addEventListener("scroll", updatePosition, true);
-    return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener("resize", updatePosition);
-      window.removeEventListener("scroll", updatePosition, true);
-    };
-  }, [isOpen, placement, width]);
-  const triggerProps = {};
-  if (hover) {
-    triggerProps.onMouseEnter = () => {
-      clearTimeout(hoverTimeout.current);
-      setOpen(true);
-    };
-    triggerProps.onMouseLeave = () => {
-      hoverTimeout.current = setTimeout(close, 150);
-    };
-  } else {
-    triggerProps.onClick = () => setOpen(!isOpen);
-  }
-  const popoverHoverProps = hover ? {
-    onMouseEnter: () => clearTimeout(hoverTimeout.current),
-    onMouseLeave: () => {
-      hoverTimeout.current = setTimeout(close, 150);
-    }
-  } : {};
-  return /* @__PURE__ */ jsxs(PopoverContext.Provider, { value: { close }, children: [
-    /* @__PURE__ */ jsx("div", { ref: triggerRef, style: { display: "inline-flex" }, "aria-expanded": isOpen, "aria-haspopup": "true", ...triggerProps, children: trigger }),
-    isOpen && /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: popoverRef,
-        role: "dialog",
-        onClick: closeOnClick ? close : void 0,
-        ...popoverHoverProps,
-        style: {
-          ...position,
-          visibility: positioned ? "visible" : "hidden",
-          backgroundColor: isTransparentTheme ? "rgba(15, 12, 30, 0.85)" : tokens.colors.background.elevated,
-          border: `1px solid ${tokens.colors.border.muted}`,
-          borderRadius: tokens.borderRadius.md,
-          boxShadow: tokens.shadows.lg,
-          padding: tokens.spacing.xs,
-          maxWidth: "min(320px, calc(100vw - 16px))",
-          fontFamily: tokens.typography.fontFamily.primary,
-          animation: `zendir-popover-enter 150ms ${tokens.animation.easing.default}`,
-          ...isTransparentTheme ? {
-            backdropFilter: "blur(16px)",
-            WebkitBackdropFilter: "blur(16px)"
-          } : {},
-          ...style
-        },
-        children
-      }
-    ),
-    /* @__PURE__ */ jsx("style", { children: `
+import { createContext, memo, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/core/overlays/Popover.tsx
+/**
+* @zendir/ui - Popover & Menu Components
+*
+* General-purpose popover for dropdown menus, sort controls, action menus,
+* and contextual information. Portal-rendered with auto-positioning.
+*
+* Astro UX Compliance:
+* - Consistent with Dialog/Tooltip styling
+* - Focus trap for keyboard navigation
+* - Escape to close
+* - Click outside to close
+* - Reduced motion support
+*
+* @example
+* ```tsx
+* <Popover
+*   trigger={<Button variant="secondary">Sort</Button>}
+*   placement="bottom-start"
+* >
+*   <Menu>
+*     <Menu.Item onClick={...}>Sort by Time</Menu.Item>
+*     <Menu.Item onClick={...}>Sort by Name</Menu.Item>
+*     <Menu.Divider />
+*     <Menu.Item onClick={...} destructive>Clear All</Menu.Item>
+*   </Menu>
+* </Popover>
+* ```
+*/
+var PopoverContext = createContext({ close: () => {} });
+var Popover = memo(function Popover({ trigger, children, placement = "bottom-start", hover = false, open: controlledOpen, onOpenChange, closeOnClick = true, width = "auto", style }) {
+	const { tokens, theme } = useTheme();
+	const isTransparentTheme = theme === "transparent" || theme === "transparent-bold" || theme === "transparent-minimal";
+	const [internalOpen, setInternalOpen] = useState(false);
+	const triggerRef = useRef(null);
+	const popoverRef = useRef(null);
+	const hoverTimeout = useRef();
+	const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+	const setOpen = useCallback((val) => {
+		if (controlledOpen === void 0) setInternalOpen(val);
+		onOpenChange?.(val);
+	}, [controlledOpen, onOpenChange]);
+	const close = useCallback(() => setOpen(false), [setOpen]);
+	useEffect(() => {
+		if (!isOpen) return;
+		const handler = (e) => {
+			if (triggerRef.current && !triggerRef.current.contains(e.target) && popoverRef.current && !popoverRef.current.contains(e.target)) close();
+		};
+		document.addEventListener("mousedown", handler);
+		return () => document.removeEventListener("mousedown", handler);
+	}, [isOpen, close]);
+	useEffect(() => {
+		if (!isOpen) return;
+		const handler = (e) => {
+			if (e.key === "Escape") close();
+		};
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	}, [isOpen, close]);
+	useEffect(() => {
+		return () => {
+			clearTimeout(hoverTimeout.current);
+		};
+	}, []);
+	const [position, setPosition] = useState({
+		position: "fixed",
+		left: 0,
+		top: 0
+	});
+	const [positioned, setPositioned] = useState(false);
+	useEffect(() => {
+		if (!isOpen) setPositioned(false);
+	}, [isOpen]);
+	useEffect(() => {
+		if (!isOpen || !triggerRef.current) return;
+		const gap = 8;
+		const viewportPadding = 8;
+		const updatePosition = () => {
+			const rect = triggerRef.current?.getBoundingClientRect();
+			if (!rect) return;
+			const panelWidth = width === "trigger" ? rect.width : typeof width === "number" ? width : popoverRef.current?.offsetWidth ?? 220;
+			const panelHeight = popoverRef.current?.offsetHeight ?? 220;
+			let left = rect.left;
+			let top = rect.bottom + gap;
+			if (placement.startsWith("top")) top = rect.top - panelHeight - gap;
+			else if (placement.startsWith("bottom")) top = rect.bottom + gap;
+			else if (placement.startsWith("left")) left = rect.left - panelWidth - gap;
+			else if (placement.startsWith("right")) left = rect.right + gap;
+			if (placement.startsWith("top") || placement.startsWith("bottom")) if (placement.endsWith("-start")) left = rect.left;
+			else if (placement.endsWith("-end")) left = rect.right - panelWidth;
+			else left = rect.left + (rect.width - panelWidth) / 2;
+			else if (placement.endsWith("-start")) top = rect.top;
+			else if (placement.endsWith("-end")) top = rect.bottom - panelHeight;
+			else top = rect.top + (rect.height - panelHeight) / 2;
+			left = Math.max(viewportPadding, Math.min(left, window.innerWidth - panelWidth - viewportPadding));
+			top = Math.max(viewportPadding, Math.min(top, window.innerHeight - panelHeight - viewportPadding));
+			const pos = {
+				position: "fixed",
+				zIndex: 9990,
+				left,
+				top
+			};
+			if (width === "trigger") {
+				pos.width = rect.width;
+				pos.minWidth = rect.width;
+			} else if (typeof width === "number") pos.width = width;
+			setPosition(pos);
+			setPositioned(true);
+		};
+		const raf = requestAnimationFrame(updatePosition);
+		window.addEventListener("resize", updatePosition);
+		window.addEventListener("scroll", updatePosition, true);
+		return () => {
+			cancelAnimationFrame(raf);
+			window.removeEventListener("resize", updatePosition);
+			window.removeEventListener("scroll", updatePosition, true);
+		};
+	}, [
+		isOpen,
+		placement,
+		width
+	]);
+	const triggerProps = {};
+	if (hover) {
+		triggerProps.onMouseEnter = () => {
+			clearTimeout(hoverTimeout.current);
+			setOpen(true);
+		};
+		triggerProps.onMouseLeave = () => {
+			hoverTimeout.current = setTimeout(close, 150);
+		};
+	} else triggerProps.onClick = () => setOpen(!isOpen);
+	const popoverHoverProps = hover ? {
+		onMouseEnter: () => clearTimeout(hoverTimeout.current),
+		onMouseLeave: () => {
+			hoverTimeout.current = setTimeout(close, 150);
+		}
+	} : {};
+	return /* @__PURE__ */ jsxs(PopoverContext.Provider, {
+		value: { close },
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: triggerRef,
+				style: { display: "inline-flex" },
+				"aria-expanded": isOpen,
+				"aria-haspopup": "true",
+				...triggerProps,
+				children: trigger
+			}),
+			isOpen && /* @__PURE__ */ jsx("div", {
+				ref: popoverRef,
+				role: "dialog",
+				onClick: closeOnClick ? close : void 0,
+				...popoverHoverProps,
+				style: {
+					...position,
+					visibility: positioned ? "visible" : "hidden",
+					backgroundColor: isTransparentTheme ? "rgba(15, 12, 30, 0.85)" : tokens.colors.background.elevated,
+					border: `1px solid ${tokens.colors.border.muted}`,
+					borderRadius: tokens.borderRadius.md,
+					boxShadow: tokens.shadows.lg,
+					padding: tokens.spacing.xs,
+					maxWidth: "min(320px, calc(100vw - 16px))",
+					fontFamily: tokens.typography.fontFamily.primary,
+					animation: `zendir-popover-enter 150ms ${tokens.animation.easing.default}`,
+					...isTransparentTheme ? {
+						backdropFilter: "blur(16px)",
+						WebkitBackdropFilter: "blur(16px)"
+					} : {},
+					...style
+				},
+				children
+			}),
+			/* @__PURE__ */ jsx("style", { children: `
         @keyframes zendir-popover-enter {
           from { opacity: 0; transform: translateY(-4px) scale(0.98); }
           to { opacity: 1; transform: translateY(0) scale(1); }
         }
       ` })
-  ] });
+		]
+	});
 });
-const MenuRoot = memo(function Menu2({ children, style }) {
-  return /* @__PURE__ */ jsx("div", { role: "menu", style: { minWidth: "min(160px, calc(100vw - 32px))", ...style }, children });
+var MenuRoot = memo(function Menu({ children, style }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "menu",
+		style: {
+			minWidth: "min(160px, calc(100vw - 32px))",
+			...style
+		},
+		children
+	});
 });
-const MenuItem = memo(function MenuItem2({
-  onClick,
-  icon,
-  children,
-  disabled = false,
-  destructive = false,
-  shortcut
-}) {
-  const { tokens } = useTheme();
-  const { close } = useContext(PopoverContext);
-  const [isHovered, setIsHovered] = useState(false);
-  const handleClick = useCallback(() => {
-    if (disabled) return;
-    onClick == null ? void 0 : onClick();
-    close();
-  }, [disabled, onClick, close]);
-  const handleKeyDown = useCallback((e) => {
-    var _a, _b, _c, _d, _e;
-    const item = e.currentTarget;
-    const siblings = (_a = item.parentElement) == null ? void 0 : _a.querySelectorAll('[role="menuitem"]:not([disabled])');
-    if (!siblings) return;
-    const items = Array.from(siblings);
-    const idx = items.indexOf(item);
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      (_b = items[(idx + 1) % items.length]) == null ? void 0 : _b.focus();
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      (_c = items[(idx - 1 + items.length) % items.length]) == null ? void 0 : _c.focus();
-    } else if (e.key === "Home") {
-      e.preventDefault();
-      (_d = items[0]) == null ? void 0 : _d.focus();
-    } else if (e.key === "End") {
-      e.preventDefault();
-      (_e = items[items.length - 1]) == null ? void 0 : _e.focus();
-    }
-  }, []);
-  const color = destructive ? tokens.colors.status.critical : disabled ? tokens.colors.text.tertiary : tokens.colors.text.primary;
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      role: "menuitem",
-      tabIndex: disabled ? -1 : 0,
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      disabled,
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: tokens.spacing.sm,
-        width: "100%",
-        padding: `${tokens.spacing.sm} ${tokens.spacing.sm}`,
-        minHeight: 44,
-        border: "none",
-        background: isHovered && !disabled ? `${destructive ? tokens.colors.status.critical : tokens.colors.accent.primary}12` : "transparent",
-        color,
-        fontSize: tokens.typography.fontSize.sm,
-        fontWeight: tokens.typography.fontWeight.normal,
-        fontFamily: tokens.typography.fontFamily.primary,
-        cursor: disabled ? "not-allowed" : "pointer",
-        borderRadius: tokens.borderRadius.sm,
-        textAlign: "left",
-        transition: tokens.animation.fast,
-        opacity: disabled ? 0.5 : 1,
-        outline: "none"
-      },
-      children: [
-        icon && /* @__PURE__ */ jsx("span", { style: { flexShrink: 0, display: "flex" }, children: icon }),
-        /* @__PURE__ */ jsx("span", { style: { flex: 1 }, children }),
-        shortcut && /* @__PURE__ */ jsx("span", { style: {
-          fontSize: tokens.typography.fontSize.xxs,
-          color: tokens.colors.text.tertiary,
-          fontFamily: tokens.typography.fontFamily.mono,
-          flexShrink: 0
-        }, children: shortcut })
-      ]
-    }
-  );
+var MenuItem = memo(function MenuItem({ onClick, icon, children, disabled = false, destructive = false, shortcut }) {
+	const { tokens } = useTheme();
+	const { close } = useContext(PopoverContext);
+	const [isHovered, setIsHovered] = useState(false);
+	const handleClick = useCallback(() => {
+		if (disabled) return;
+		onClick?.();
+		close();
+	}, [
+		disabled,
+		onClick,
+		close
+	]);
+	const handleKeyDown = useCallback((e) => {
+		const item = e.currentTarget;
+		const siblings = item.parentElement?.querySelectorAll("[role=\"menuitem\"]:not([disabled])");
+		if (!siblings) return;
+		const items = Array.from(siblings);
+		const idx = items.indexOf(item);
+		if (e.key === "ArrowDown") {
+			e.preventDefault();
+			items[(idx + 1) % items.length]?.focus();
+		} else if (e.key === "ArrowUp") {
+			e.preventDefault();
+			items[(idx - 1 + items.length) % items.length]?.focus();
+		} else if (e.key === "Home") {
+			e.preventDefault();
+			items[0]?.focus();
+		} else if (e.key === "End") {
+			e.preventDefault();
+			items[items.length - 1]?.focus();
+		}
+	}, []);
+	const color = destructive ? tokens.colors.status.critical : disabled ? tokens.colors.text.tertiary : tokens.colors.text.primary;
+	return /* @__PURE__ */ jsxs("button", {
+		role: "menuitem",
+		tabIndex: disabled ? -1 : 0,
+		onClick: handleClick,
+		onKeyDown: handleKeyDown,
+		disabled,
+		onMouseEnter: () => setIsHovered(true),
+		onMouseLeave: () => setIsHovered(false),
+		style: {
+			display: "flex",
+			alignItems: "center",
+			gap: tokens.spacing.sm,
+			width: "100%",
+			padding: `${tokens.spacing.sm} ${tokens.spacing.sm}`,
+			minHeight: 44,
+			border: "none",
+			background: isHovered && !disabled ? `${destructive ? tokens.colors.status.critical : tokens.colors.accent.primary}12` : "transparent",
+			color,
+			fontSize: tokens.typography.fontSize.sm,
+			fontWeight: tokens.typography.fontWeight.normal,
+			fontFamily: tokens.typography.fontFamily.primary,
+			cursor: disabled ? "not-allowed" : "pointer",
+			borderRadius: tokens.borderRadius.sm,
+			textAlign: "left",
+			transition: tokens.animation.fast,
+			opacity: disabled ? .5 : 1,
+			outline: "none"
+		},
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				style: {
+					flexShrink: 0,
+					display: "flex"
+				},
+				children: icon
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: { flex: 1 },
+				children
+			}),
+			shortcut && /* @__PURE__ */ jsx("span", {
+				style: {
+					fontSize: tokens.typography.fontSize.xxs,
+					color: tokens.colors.text.tertiary,
+					fontFamily: tokens.typography.fontFamily.mono,
+					flexShrink: 0
+				},
+				children: shortcut
+			})
+		]
+	});
 });
-const MenuDivider = memo(function MenuDivider2() {
-  const { tokens } = useTheme();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "separator",
-      style: {
-        height: "1px",
-        backgroundColor: tokens.colors.border.muted,
-        margin: `${tokens.spacing.xs} 0`
-      }
-    }
-  );
+var MenuDivider = memo(function MenuDivider() {
+	const { tokens } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		style: {
+			height: "1px",
+			backgroundColor: tokens.colors.border.muted,
+			margin: `${tokens.spacing.xs} 0`
+		}
+	});
 });
-const MenuLabel = memo(function MenuLabel2({ children }) {
-  const { tokens } = useTheme();
-  return /* @__PURE__ */ jsx("div", { style: {
-    padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
-    fontSize: tokens.typography.fontSize.xxs,
-    fontWeight: tokens.typography.fontWeight.bold,
-    color: tokens.colors.text.tertiary,
-    textTransform: "uppercase",
-    letterSpacing: "0.06em"
-  }, children });
+var MenuLabel = memo(function MenuLabel({ children }) {
+	const { tokens } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			padding: `${tokens.spacing.xs} ${tokens.spacing.sm}`,
+			fontSize: tokens.typography.fontSize.xxs,
+			fontWeight: tokens.typography.fontWeight.bold,
+			color: tokens.colors.text.tertiary,
+			textTransform: "uppercase",
+			letterSpacing: "0.06em"
+		},
+		children
+	});
 });
-const Menu = Object.assign(MenuRoot, {
-  Item: MenuItem,
-  Divider: MenuDivider,
-  Label: MenuLabel
+var Menu = Object.assign(MenuRoot, {
+	Item: MenuItem,
+	Divider: MenuDivider,
+	Label: MenuLabel
 });
-export {
-  Menu,
-  Popover
-};
-//# sourceMappingURL=Popover.js.map
+//#endregion
+export { Menu, Popover, Popover as default };
+
+//# sourceMappingURL=Popover.js.map