@lobehub/ui 4.9.2 → 4.10.0

package/es/Popover/PopoverStandalone.mjs

@@ -0,0 +1,166 @@
+'use client';
+
+import { placementMap } from "../utils/placement.mjs";
+import { useIsClient } from "../hooks/useIsClient.mjs";
+import { parseTrigger } from "./parseTrigger.mjs";
+import { PopoverArrowIcon } from "./ArrowIcon.mjs";
+import { usePopoverPortalContainer } from "./PopoverPortal.mjs";
+import { styles } from "./style.mjs";
+import { cloneElement, isValidElement, memo, useCallback, useEffect, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { mergeRefs } from "react-merge-refs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { Popover } from "@base-ui/react/popover";
+
+//#region src/Popover/PopoverStandalone.tsx
+/**
+* Popover component - displays floating content relative to a trigger element
+* Compatible with Ant Design Popover API
+*/
+const PopoverStandalone = memo(({ children, content, arrow: originArrow = true, inset = false, trigger = "hover", placement = "top", styles: styleProps, classNames, className, open, onOpenChange, defaultOpen = false, mouseEnterDelay = .1, mouseLeaveDelay = .1, openDelay, closeDelay, portalled = true, getPopupContainer, disabled = false, zIndex, ref: refProp }) => {
+	const arrow = inset ? false : originArrow;
+	const isClient = useIsClient();
+	const popoverHandle = useMemo(() => Popover.createHandle(), []);
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));
+	useEffect(() => {
+		if (open === void 0) return;
+		setUncontrolledOpen(open);
+	}, [open]);
+	const resolvedOpen = disabled ? false : open ?? uncontrolledOpen;
+	const handleOpenChange = useCallback((nextOpen) => {
+		if (disabled && nextOpen) return;
+		onOpenChange?.(nextOpen);
+		if (open === void 0) setUncontrolledOpen(nextOpen);
+	}, [
+		onOpenChange,
+		open,
+		disabled
+	]);
+	const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);
+	const resolvedOpenDelay = openDelay ?? mouseEnterDelay * 1e3;
+	const resolvedCloseDelay = closeDelay ?? mouseLeaveDelay * 1e3;
+	const placementConfig = placementMap[placement] ?? placementMap.top;
+	const baseSideOffset = arrow ? 10 : 6;
+	const resolvedSideOffset = useMemo(() => {
+		if (!inset) return baseSideOffset;
+		return ({ side, positioner }) => {
+			if (side === "left" || side === "right" || side === "inline-start" || side === "inline-end") return -positioner.width;
+			return -positioner.height;
+		};
+	}, [baseSideOffset, inset]);
+	const portalContainer = usePopoverPortalContainer();
+	const triggerElement = useMemo(() => {
+		const triggerProps = {
+			closeDelay: resolvedCloseDelay,
+			delay: resolvedOpenDelay,
+			disabled,
+			openOnHover: openOnHover && !disabled
+		};
+		if (isValidElement(children)) return /* @__PURE__ */ jsx(Popover.Trigger, {
+			handle: popoverHandle,
+			...triggerProps,
+			render: (props) => {
+				const { type, ref: triggerRef, ...restProps } = props;
+				const resolvedProps = typeof children.type === "string" && children.type === "button" ? props : restProps;
+				return cloneElement(children, {
+					...mergeProps(children.props, resolvedProps),
+					ref: mergeRefs([
+						children.ref,
+						triggerRef,
+						refProp
+					])
+				});
+			}
+		});
+		return /* @__PURE__ */ jsx(Popover.Trigger, {
+			handle: popoverHandle,
+			...triggerProps,
+			ref: refProp,
+			children
+		});
+	}, [
+		children,
+		disabled,
+		openOnHover,
+		popoverHandle,
+		refProp,
+		resolvedOpenDelay,
+		resolvedCloseDelay
+	]);
+	const customContainer = useMemo(() => {
+		if (!getPopupContainer || !isClient) return void 0;
+	}, [getPopupContainer, isClient]);
+	const resolvedClassNames = useMemo(() => ({
+		arrow: cx(styles.arrow, classNames?.arrow),
+		popup: cx(styles.popup, className),
+		positioner: cx(styles.positioner, classNames?.root),
+		viewport: cx(styles.viewport, classNames?.content)
+	}), [
+		className,
+		classNames?.arrow,
+		classNames?.content,
+		classNames?.root
+	]);
+	const resolvedStyles = useMemo(() => ({
+		arrow: styleProps?.arrow,
+		positioner: {
+			...styleProps?.root,
+			zIndex: zIndex ?? 1100
+		},
+		viewport: styleProps?.content
+	}), [
+		styleProps?.arrow,
+		styleProps?.content,
+		styleProps?.root,
+		zIndex
+	]);
+	const popup = useMemo(() => /* @__PURE__ */ jsx(Popover.Positioner, {
+		align: placementConfig.align,
+		className: resolvedClassNames.positioner,
+		"data-hover-trigger": openOnHover || void 0,
+		"data-placement": placement,
+		side: placementConfig.side,
+		sideOffset: resolvedSideOffset,
+		style: resolvedStyles.positioner,
+		children: /* @__PURE__ */ jsxs(Popover.Popup, {
+			className: resolvedClassNames.popup,
+			children: [arrow && /* @__PURE__ */ jsx(Popover.Arrow, {
+				className: resolvedClassNames.arrow,
+				style: resolvedStyles.arrow,
+				children: /* @__PURE__ */ jsx(PopoverArrowIcon, {})
+			}), /* @__PURE__ */ jsx(Popover.Viewport, {
+				className: resolvedClassNames.viewport,
+				style: resolvedStyles.viewport,
+				children: content
+			})]
+		})
+	}), [
+		arrow,
+		content,
+		openOnHover,
+		placement,
+		placementConfig.align,
+		placementConfig.side,
+		resolvedClassNames,
+		resolvedSideOffset,
+		resolvedStyles
+	]);
+	if (!content) return children;
+	const resolvedPortalContainer = customContainer ?? portalContainer;
+	return /* @__PURE__ */ jsxs(Popover.Root, {
+		defaultOpen,
+		handle: popoverHandle,
+		onOpenChange: handleOpenChange,
+		open: resolvedOpen,
+		children: [triggerElement, portalled ? resolvedPortalContainer ? /* @__PURE__ */ jsx(Popover.Portal, {
+			container: resolvedPortalContainer,
+			children: popup
+		}) : null : popup]
+	});
+});
+PopoverStandalone.displayName = "PopoverStandalone";
+
+//#endregion
+export { PopoverStandalone };
+//# sourceMappingURL=PopoverStandalone.mjs.map

package/es/Popover/PopoverStandalone.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverStandalone.mjs","names":["BasePopover"],"sources":["../../src/Popover/PopoverStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport type { Side } from '@base-ui/react/utils/useAnchorPositioning';\nimport { cx } from 'antd-style';\nimport {\n  cloneElement,\n  isValidElement,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { mergeRefs } from 'react-merge-refs';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { placementMap } from '@/utils/placement';\n\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { parseTrigger } from './parseTrigger';\nimport { styles } from './style';\nimport type { PopoverProps } from './type';\n\n/**\n * Popover component - displays floating content relative to a trigger element\n * Compatible with Ant Design Popover API\n */\nexport const PopoverStandalone = memo<PopoverProps>(\n  ({\n    children,\n    content,\n    arrow: originArrow = true,\n    inset = false,\n    trigger = 'hover',\n    placement = 'top',\n    styles: styleProps,\n    classNames,\n    className,\n    open,\n    onOpenChange,\n    defaultOpen = false,\n    mouseEnterDelay = 0.1,\n    mouseLeaveDelay = 0.1,\n    openDelay,\n    closeDelay,\n    portalled = true,\n    getPopupContainer,\n    disabled = false,\n    zIndex,\n    ref: refProp,\n  }) => {\n    const arrow = inset ? false : originArrow;\n    const isClient = useIsClient();\n    const popoverHandle = useMemo(() => BasePopover.createHandle(), []);\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n\n    // Sync controlled state\n    useEffect(() => {\n      if (open === undefined) return;\n      setUncontrolledOpen(open);\n    }, [open]);\n\n    const mergedOpen = open ?? uncontrolledOpen;\n    const resolvedOpen = disabled ? false : mergedOpen;\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean) => {\n        // Don't open if disabled\n        if (disabled && nextOpen) return;\n\n        onOpenChange?.(nextOpen);\n        if (open === undefined) {\n          setUncontrolledOpen(nextOpen);\n        }\n      },\n      [onOpenChange, open, disabled],\n    );\n\n    // Parse trigger mode\n    const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);\n\n    // Calculate delays (milliseconds take precedence over seconds)\n    const resolvedOpenDelay = openDelay ?? mouseEnterDelay * 1000;\n    const resolvedCloseDelay = closeDelay ?? mouseLeaveDelay * 1000;\n\n    // Get placement configuration\n    const placementConfig = placementMap[placement] ?? placementMap.top;\n    const baseSideOffset = arrow ? 10 : 6;\n    const resolvedSideOffset = useMemo(() => {\n      if (!inset) return baseSideOffset;\n      return ({\n        side,\n        positioner,\n      }: {\n        positioner: { height: number; width: number };\n        side: Side;\n      }) => {\n        if (\n          side === 'left' ||\n          side === 'right' ||\n          side === 'inline-start' ||\n          side === 'inline-end'\n        ) {\n          return -positioner.width;\n        }\n        return -positioner.height;\n      };\n    }, [baseSideOffset, inset]);\n\n    // Determine portal container\n    const portalContainer = usePopoverPortalContainer();\n\n    // Render trigger element\n    const triggerElement = useMemo(() => {\n      const triggerProps = {\n        closeDelay: resolvedCloseDelay,\n        delay: resolvedOpenDelay,\n        disabled,\n        openOnHover: openOnHover && !disabled,\n      };\n\n      if (isValidElement(children)) {\n        return (\n          <BasePopover.Trigger\n            handle={popoverHandle}\n            {...triggerProps}\n            render={(props) => {\n              // Remove type=\"button\" for non-button elements\n              // eslint-disable-next-line unused-imports/no-unused-vars, @typescript-eslint/no-unused-vars\n              const { type, ref: triggerRef, ...restProps } = props as any;\n              const resolvedProps =\n                typeof (children as any).type === 'string' && (children as any).type === 'button'\n                  ? props\n                  : restProps;\n              const mergedProps = mergeProps((children as any).props, resolvedProps);\n              return cloneElement(children as any, {\n                ...mergedProps,\n                ref: mergeRefs([(children as any).ref, triggerRef, refProp]),\n              });\n            }}\n          />\n        );\n      }\n      return (\n        <BasePopover.Trigger handle={popoverHandle} {...triggerProps} ref={refProp}>\n          {children}\n        </BasePopover.Trigger>\n      );\n    }, [\n      children,\n      disabled,\n      openOnHover,\n      popoverHandle,\n      refProp,\n      resolvedOpenDelay,\n      resolvedCloseDelay,\n    ]);\n\n    // Custom container from getPopupContainer\n    const customContainer = useMemo(() => {\n      if (!getPopupContainer || !isClient) return undefined;\n      // We need a reference element, but we don't have it until render\n      // This will be handled by the portal container logic\n      return undefined;\n    }, [getPopupContainer, isClient]);\n\n    const resolvedClassNames = useMemo(\n      () => ({\n        arrow: cx(styles.arrow, classNames?.arrow),\n        popup: cx(styles.popup, className),\n        positioner: cx(styles.positioner, classNames?.root),\n        viewport: cx(styles.viewport, classNames?.content),\n      }),\n      [className, classNames?.arrow, classNames?.content, classNames?.root],\n    );\n\n    const resolvedStyles = useMemo(\n      () => ({\n        arrow: styleProps?.arrow,\n        positioner: {\n          ...styleProps?.root,\n          zIndex: zIndex ?? 1100,\n        },\n        viewport: styleProps?.content,\n      }),\n      [styleProps?.arrow, styleProps?.content, styleProps?.root, zIndex],\n    );\n\n    const popup = useMemo(\n      () => (\n        <BasePopover.Positioner\n          align={placementConfig.align}\n          className={resolvedClassNames.positioner}\n          data-hover-trigger={openOnHover || undefined}\n          data-placement={placement}\n          side={placementConfig.side}\n          sideOffset={resolvedSideOffset}\n          style={resolvedStyles.positioner}\n        >\n          <BasePopover.Popup className={resolvedClassNames.popup}>\n            {arrow && (\n              <BasePopover.Arrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n                <PopoverArrowIcon />\n              </BasePopover.Arrow>\n            )}\n            <BasePopover.Viewport\n              className={resolvedClassNames.viewport}\n              style={resolvedStyles.viewport}\n            >\n              {content}\n            </BasePopover.Viewport>\n          </BasePopover.Popup>\n        </BasePopover.Positioner>\n      ),\n      [\n        arrow,\n        content,\n        openOnHover,\n        placement,\n        placementConfig.align,\n        placementConfig.side,\n        resolvedClassNames,\n        resolvedSideOffset,\n        resolvedStyles,\n      ],\n    );\n\n    // Don't render popup if no content\n    if (!content) {\n      return children;\n    }\n\n    const resolvedPortalContainer = customContainer ?? portalContainer;\n\n    return (\n      <BasePopover.Root\n        defaultOpen={defaultOpen}\n        handle={popoverHandle}\n        onOpenChange={handleOpenChange}\n        open={resolvedOpen}\n      >\n        {triggerElement}\n        {portalled ? (\n          resolvedPortalContainer ? (\n            <BasePopover.Portal container={resolvedPortalContainer}>{popup}</BasePopover.Portal>\n          ) : null\n        ) : (\n          popup\n        )}\n      </BasePopover.Root>\n    );\n  },\n);\n\nPopoverStandalone.displayName = 'PopoverStandalone';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,oBAAoB,MAC9B,EACC,UACA,SACA,OAAO,cAAc,MACrB,QAAQ,OACR,UAAU,SACV,YAAY,OACZ,QAAQ,YACR,YACA,WACA,MACA,cACA,cAAc,OACd,kBAAkB,IAClB,kBAAkB,IAClB,WACA,YACA,YAAY,MACZ,mBACA,WAAW,OACX,QACA,KAAK,cACD;CACJ,MAAM,QAAQ,QAAQ,QAAQ;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,gBAAgB,cAAcA,QAAY,cAAc,EAAE,EAAE,CAAC;CACnE,MAAM,CAAC,kBAAkB,uBAAuB,SAAS,QAAQ,YAAY,CAAC;AAG9E,iBAAgB;AACd,MAAI,SAAS,OAAW;AACxB,sBAAoB,KAAK;IACxB,CAAC,KAAK,CAAC;CAGV,MAAM,eAAe,WAAW,QADb,QAAQ;CAG3B,MAAM,mBAAmB,aACtB,aAAsB;AAErB,MAAI,YAAY,SAAU;AAE1B,iBAAe,SAAS;AACxB,MAAI,SAAS,OACX,qBAAoB,SAAS;IAGjC;EAAC;EAAc;EAAM;EAAS,CAC/B;CAGD,MAAM,EAAE,gBAAgB,cAAc,aAAa,QAAQ,EAAE,CAAC,QAAQ,CAAC;CAGvE,MAAM,oBAAoB,aAAa,kBAAkB;CACzD,MAAM,qBAAqB,cAAc,kBAAkB;CAG3D,MAAM,kBAAkB,aAAa,cAAc,aAAa;CAChE,MAAM,iBAAiB,QAAQ,KAAK;CACpC,MAAM,qBAAqB,cAAc;AACvC,MAAI,CAAC,MAAO,QAAO;AACnB,UAAQ,EACN,MACA,iBAII;AACJ,OACE,SAAS,UACT,SAAS,WACT,SAAS,kBACT,SAAS,aAET,QAAO,CAAC,WAAW;AAErB,UAAO,CAAC,WAAW;;IAEpB,CAAC,gBAAgB,MAAM,CAAC;CAG3B,MAAM,kBAAkB,2BAA2B;CAGnD,MAAM,iBAAiB,cAAc;EACnC,MAAM,eAAe;GACnB,YAAY;GACZ,OAAO;GACP;GACA,aAAa,eAAe,CAAC;GAC9B;AAED,MAAI,eAAe,SAAS,CAC1B,QACE,oBAACA,QAAY;GACX,QAAQ;GACR,GAAI;GACJ,SAAS,UAAU;IAGjB,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,cAAc;IAChD,MAAM,gBACJ,OAAQ,SAAiB,SAAS,YAAa,SAAiB,SAAS,WACrE,QACA;AAEN,WAAO,aAAa,UAAiB;KACnC,GAFkB,WAAY,SAAiB,OAAO,cAAc;KAGpE,KAAK,UAAU;MAAE,SAAiB;MAAK;MAAY;MAAQ,CAAC;KAC7D,CAAC;;IAEJ;AAGN,SACE,oBAACA,QAAY;GAAQ,QAAQ;GAAe,GAAI;GAAc,KAAK;GAChE;IACmB;IAEvB;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAGF,MAAM,kBAAkB,cAAc;AACpC,MAAI,CAAC,qBAAqB,CAAC,SAAU,QAAO;IAI3C,CAAC,mBAAmB,SAAS,CAAC;CAEjC,MAAM,qBAAqB,eAClB;EACL,OAAO,GAAG,OAAO,OAAO,YAAY,MAAM;EAC1C,OAAO,GAAG,OAAO,OAAO,UAAU;EAClC,YAAY,GAAG,OAAO,YAAY,YAAY,KAAK;EACnD,UAAU,GAAG,OAAO,UAAU,YAAY,QAAQ;EACnD,GACD;EAAC;EAAW,YAAY;EAAO,YAAY;EAAS,YAAY;EAAK,CACtE;CAED,MAAM,iBAAiB,eACd;EACL,OAAO,YAAY;EACnB,YAAY;GACV,GAAG,YAAY;GACf,QAAQ,UAAU;GACnB;EACD,UAAU,YAAY;EACvB,GACD;EAAC,YAAY;EAAO,YAAY;EAAS,YAAY;EAAM;EAAO,CACnE;CAED,MAAM,QAAQ,cAEV,oBAACA,QAAY;EACX,OAAO,gBAAgB;EACvB,WAAW,mBAAmB;EAC9B,sBAAoB,eAAe;EACnC,kBAAgB;EAChB,MAAM,gBAAgB;EACtB,YAAY;EACZ,OAAO,eAAe;YAEtB,qBAACA,QAAY;GAAM,WAAW,mBAAmB;cAC9C,SACC,oBAACA,QAAY;IAAM,WAAW,mBAAmB;IAAO,OAAO,eAAe;cAC5E,oBAAC,qBAAmB;KACF,EAEtB,oBAACA,QAAY;IACX,WAAW,mBAAmB;IAC9B,OAAO,eAAe;cAErB;KACoB;IACL;GACG,EAE3B;EACE;EACA;EACA;EACA;EACA,gBAAgB;EAChB,gBAAgB;EAChB;EACA;EACA;EACD,CACF;AAGD,KAAI,CAAC,QACH,QAAO;CAGT,MAAM,0BAA0B,mBAAmB;AAEnD,QACE,qBAACA,QAAY;EACE;EACb,QAAQ;EACR,cAAc;EACd,MAAM;aAEL,gBACA,YACC,0BACE,oBAACA,QAAY;GAAO,WAAW;aAA0B;IAA2B,GAClF,OAEJ;GAEe;EAGxB;AAED,kBAAkB,cAAc"}

package/es/Popover/groupContext.d.mts

@@ -0,0 +1,14 @@
+import { PopoverProps } from "./type.mjs";
+import "react";
+
+//#region src/Popover/groupContext.d.ts
+type PopoverGroupSharedProps = Omit<PopoverProps, 'children' | 'content' | 'defaultOpen' | 'open' | 'ref'> & {
+  /**
+   * @description Whether to enable content layout animation when switching triggers
+   * @default true
+   */
+  contentLayoutAnimation?: boolean;
+};
+//#endregion
+export { PopoverGroupSharedProps };
+//# sourceMappingURL=groupContext.d.mts.map

package/es/Popover/groupContext.mjs

@@ -0,0 +1,11 @@
+'use client';
+
+import { createContext } from "react";
+
+//#region src/Popover/groupContext.ts
+const PopoverGroupHandleContext = createContext(null);
+const PopoverGroupPropsContext = createContext(null);
+
+//#endregion
+export { PopoverGroupHandleContext, PopoverGroupPropsContext };
+//# sourceMappingURL=groupContext.mjs.map

package/es/Popover/groupContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"groupContext.mjs","names":[],"sources":["../../src/Popover/groupContext.ts"],"sourcesContent":["'use client';\n\nimport type { PopoverHandle } from '@base-ui/react/popover/store/PopoverHandle';\nimport { createContext } from 'react';\n\nimport type { PopoverProps } from './type';\n\nexport type PopoverGroupItem = Omit<PopoverProps, 'children' | 'open' | 'defaultOpen' | 'ref'>;\n\nexport type PopoverGroupSharedProps = Omit<\n  PopoverProps,\n  'children' | 'content' | 'defaultOpen' | 'open' | 'ref'\n> & {\n  /**\n   * @description Whether to enable content layout animation when switching triggers\n   * @default true\n   */\n  contentLayoutAnimation?: boolean;\n};\n\nexport const PopoverGroupHandleContext = createContext<PopoverHandle<PopoverGroupItem> | null>(\n  null,\n);\nexport const PopoverGroupPropsContext = createContext<PopoverGroupSharedProps | null>(null);\n"],"mappings":";;;;;AAoBA,MAAa,4BAA4B,cACvC,KACD;AACD,MAAa,2BAA2B,cAA8C,KAAK"}

package/es/Popover/index.d.mts

@@ -0,0 +1,5 @@
+import { PopoverPlacement, PopoverProps, PopoverTrigger } from "./type.mjs";
+import { parseTrigger } from "./parseTrigger.mjs";
+import { Popover } from "./Popover.mjs";
+import { PopoverGroup } from "./PopoverGroup.mjs";
+export { PopoverGroup, type PopoverPlacement, type PopoverProps, type PopoverTrigger, Popover as default, parseTrigger };

package/es/Popover/index.d.ts

@@ -0,0 +1 @@
+export * from './index.d.mts';

package/es/Popover/index.js

@@ -0,0 +1 @@
+export * from './index.mjs';

package/es/Popover/index.mjs

@@ -0,0 +1,5 @@
+import { parseTrigger } from "./parseTrigger.mjs";
+import Popover_default from "./Popover.mjs";
+import PopoverGroup_default from "./PopoverGroup.mjs";
+
+export { PopoverGroup_default as PopoverGroup, Popover_default as default, parseTrigger };

package/es/Popover/parseTrigger.d.mts

@@ -0,0 +1,14 @@
+import { PopoverTrigger } from "./type.mjs";
+
+//#region src/Popover/parseTrigger.d.ts
+
+/**
+ * Parses trigger prop to determine hover and click behavior
+ */
+declare function parseTrigger(trigger: PopoverTrigger): {
+  openOnClick: boolean;
+  openOnHover: boolean;
+};
+//#endregion
+export { parseTrigger };
+//# sourceMappingURL=parseTrigger.d.mts.map

package/es/Popover/parseTrigger.mjs

@@ -0,0 +1,18 @@
+'use client';
+
+//#region src/Popover/parseTrigger.ts
+/**
+* Parses trigger prop to determine hover and click behavior
+*/
+function parseTrigger(trigger) {
+	const triggers = Array.isArray(trigger) ? trigger : [trigger];
+	const normalizedTriggers = new Set(triggers.flatMap((item) => item === "both" ? ["hover", "click"] : [item]));
+	return {
+		openOnClick: normalizedTriggers.has("click"),
+		openOnHover: normalizedTriggers.has("hover")
+	};
+}
+
+//#endregion
+export { parseTrigger };
+//# sourceMappingURL=parseTrigger.mjs.map

package/es/Popover/parseTrigger.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseTrigger.mjs","names":[],"sources":["../../src/Popover/parseTrigger.ts"],"sourcesContent":["'use client';\n\nimport type { PopoverTrigger } from './type';\n\n/**\n * Parses trigger prop to determine hover and click behavior\n */\nexport function parseTrigger(trigger: PopoverTrigger): {\n  openOnClick: boolean;\n  openOnHover: boolean;\n} {\n  const triggers = Array.isArray(trigger) ? trigger : [trigger];\n  const normalizedTriggers = new Set(\n    triggers.flatMap((item) => (item === 'both' ? ['hover', 'click'] : [item])),\n  );\n  return {\n    openOnClick: normalizedTriggers.has('click'),\n    openOnHover: normalizedTriggers.has('hover'),\n  };\n}\n"],"mappings":";;;;;;AAOA,SAAgB,aAAa,SAG3B;CACA,MAAM,WAAW,MAAM,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ;CAC7D,MAAM,qBAAqB,IAAI,IAC7B,SAAS,SAAS,SAAU,SAAS,SAAS,CAAC,SAAS,QAAQ,GAAG,CAAC,KAAK,CAAE,CAC5E;AACD,QAAO;EACL,aAAa,mBAAmB,IAAI,QAAQ;EAC5C,aAAa,mBAAmB,IAAI,QAAQ;EAC7C"}

package/es/Popover/style.mjs

@@ -0,0 +1,218 @@
+import { createStaticStyles } from "antd-style";
+
+//#region src/Popover/style.ts
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => ({
+	arrow: css$1`
+    --lobe-popover-arrow-offset-block: 5px;
+    --lobe-popover-arrow-offset-inline: 8px;
+
+    pointer-events: none;
+
+    position: absolute;
+    transform-origin: center;
+
+    display: flex;
+
+    width: 12px;
+    height: 6px;
+
+    transition: inset-inline-start var(--lobe-popover-animation-duration) var(--lobe-popover-animation-ease-out);
+
+    & > svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+
+    & [data-role='fill'] {
+      fill: ${cssVar$1.colorBgElevated};
+    }
+
+    & [data-role='stroke'] {
+      fill: none;
+      stroke: ${cssVar$1.colorBorder};
+      stroke-width: 1px;
+    }
+
+    &[data-side='top'] {
+      inset-block-end: calc(var(--lobe-popover-arrow-offset-block) * -1);
+      transform: rotate(180deg);
+    }
+
+    &[data-side='left'] {
+      inset-inline-end: calc(var(--lobe-popover-arrow-offset-inline) * -1);
+      transform: rotate(90deg);
+    }
+
+    &[data-side='right'] {
+      inset-inline-start: calc(var(--lobe-popover-arrow-offset-inline) * -1);
+      transform: rotate(-90deg);
+    }
+
+    &[data-side='bottom'] {
+      inset-block-start: calc(var(--lobe-popover-arrow-offset-block) * -1);
+    }
+  `,
+	popup: css$1`
+    position: relative;
+    transform-origin: var(--transform-origin);
+
+    width: var(--popup-width, auto);
+    min-width: 120px;
+    height: var(--popup-height, auto);
+    border-radius: ${cssVar$1.borderRadius};
+
+    color: ${cssVar$1.colorText};
+
+    background: ${cssVar$1.colorBgElevated};
+    outline: none;
+    box-shadow:
+      0 0 15px 0 #00000008,
+      0 2px 30px 0 #00000014,
+      0 0 0 1px ${cssVar$1.colorBorder} inset;
+
+    transition-timing-function: var(--lobe-popover-animation-ease-out);
+    transition-duration: var(--lobe-popover-animation-duration);
+    transition-property: width, height, opacity, transform;
+
+    &[data-starting-style],
+    &[data-ending-style] {
+      transform: translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0)
+        scale(var(--lobe-popover-animation-scale));
+      opacity: 0;
+    }
+
+    &[data-ending-style] {
+      transition-timing-function: var(--lobe-popover-animation-ease-in);
+      transition-duration: var(--lobe-popover-animation-duration-exit);
+    }
+
+    &[data-instant] {
+      transition: none;
+    }
+  `,
+	positioner: css$1`
+    --lobe-popover-animation-duration: 150ms;
+    --lobe-popover-animation-translate: 6px;
+    --lobe-popover-animation-scale: 0.96;
+    --lobe-popover-animation-ease-in: ease-in;
+    --lobe-popover-animation-duration-exit: 75ms;
+    --lobe-popover-animation-ease-out: ${cssVar$1.motionEaseOut};
+    --lobe-popover-translate-x: 0;
+    --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);
+
+    z-index: 1100;
+
+    width: var(--positioner-width);
+    max-width: var(--available-width);
+    height: var(--positioner-height);
+
+    transition-timing-function: var(--lobe-popover-animation-ease-out);
+    transition-duration: var(--lobe-popover-animation-duration);
+    transition-property: inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;
+
+    &[data-instant] {
+      transition: none;
+    }
+
+    &[data-placement='top'],
+    &[data-placement='topLeft'],
+    &[data-placement='topRight'] {
+      --lobe-popover-translate-x: 0;
+      --lobe-popover-translate-y: var(--lobe-popover-animation-translate);
+    }
+
+    &[data-placement='bottom'],
+    &[data-placement='bottomLeft'],
+    &[data-placement='bottomRight'] {
+      --lobe-popover-translate-x: 0;
+      --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);
+    }
+
+    &[data-placement='left'],
+    &[data-placement='leftTop'],
+    &[data-placement='leftBottom'] {
+      --lobe-popover-translate-x: var(--lobe-popover-animation-translate);
+      --lobe-popover-translate-y: 0;
+    }
+
+    &[data-placement='right'],
+    &[data-placement='rightTop'],
+    &[data-placement='rightBottom'] {
+      --lobe-popover-translate-x: calc(var(--lobe-popover-animation-translate) * -1);
+      --lobe-popover-translate-y: 0;
+    }
+  `,
+	root: css$1`
+    user-select: none;
+    position: relative;
+    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 12%));
+  `,
+	viewport: css$1`
+    --lobe-popover-viewport-inline-padding: 12px;
+
+    position: relative;
+
+    overflow: clip;
+
+    width: 100%;
+    height: 100%;
+    padding-block: 12px;
+    padding-inline: var(--lobe-popover-viewport-inline-padding);
+
+    [data-previous],
+    [data-current] {
+      transform: translateX(0);
+      width: calc(var(--popup-width) - 2 * var(--lobe-popover-viewport-inline-padding));
+      opacity: 1;
+      transition:
+        transform var(--lobe-popover-animation-duration) var(--lobe-popover-animation-ease-out),
+        opacity calc(var(--lobe-popover-animation-duration) / 2)
+          var(--lobe-popover-animation-ease-out);
+    }
+
+    &[data-activation-direction~='right'] [data-previous][data-ending-style] {
+      transform: translateX(-50%);
+      opacity: 0;
+    }
+
+    &[data-activation-direction~='right'] [data-current][data-starting-style] {
+      transform: translateX(50%);
+      opacity: 0;
+    }
+
+    &[data-activation-direction~='left'] [data-previous][data-ending-style] {
+      transform: translateX(50%);
+      opacity: 0;
+    }
+
+    &[data-activation-direction~='left'] [data-current][data-starting-style] {
+      transform: translateX(-50%);
+      opacity: 0;
+    }
+
+    &[data-activation-direction~='down'] [data-previous][data-ending-style] {
+      transform: translateY(-50%);
+      opacity: 0;
+    }
+
+    &[data-activation-direction~='down'] [data-current][data-starting-style] {
+      transform: translateY(50%);
+      opacity: 0;
+    }
+
+    &[data-activation-direction~='up'] [data-previous][data-ending-style] {
+      transform: translateY(50%);
+      opacity: 0;
+    }
+
+    &[data-activation-direction~='up'] [data-current][data-starting-style] {
+      transform: translateY(-50%);
+      opacity: 0;
+    }
+  `
+}));
+
+//#endregion
+export { styles };
+//# sourceMappingURL=style.mjs.map

package/es/Popover/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":["cssVar"],"sources":["../../src/Popover/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    --lobe-popover-arrow-offset-block: 5px;\n    --lobe-popover-arrow-offset-inline: 8px;\n\n    pointer-events: none;\n\n    position: absolute;\n    transform-origin: center;\n\n    display: flex;\n\n    width: 12px;\n    height: 6px;\n\n    transition: inset-inline-start var(--lobe-popover-animation-duration) var(--lobe-popover-animation-ease-out);\n\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    & [data-role='fill'] {\n      fill: ${cssVar.colorBgElevated};\n    }\n\n    & [data-role='stroke'] {\n      fill: none;\n      stroke: ${cssVar.colorBorder};\n      stroke-width: 1px;\n    }\n\n    &[data-side='top'] {\n      inset-block-end: calc(var(--lobe-popover-arrow-offset-block) * -1);\n      transform: rotate(180deg);\n    }\n\n    &[data-side='left'] {\n      inset-inline-end: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n      transform: rotate(90deg);\n    }\n\n    &[data-side='right'] {\n      inset-inline-start: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n      transform: rotate(-90deg);\n    }\n\n    &[data-side='bottom'] {\n      inset-block-start: calc(var(--lobe-popover-arrow-offset-block) * -1);\n    }\n  `,\n\n  popup: css`\n    position: relative;\n    transform-origin: var(--transform-origin);\n\n    width: var(--popup-width, auto);\n    min-width: 120px;\n    height: var(--popup-height, auto);\n    border-radius: ${cssVar.borderRadius};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    outline: none;\n    box-shadow:\n      0 0 15px 0 #00000008,\n      0 2px 30px 0 #00000014,\n      0 0 0 1px ${cssVar.colorBorder} inset;\n\n    transition-timing-function: var(--lobe-popover-animation-ease-out);\n    transition-duration: var(--lobe-popover-animation-duration);\n    transition-property: width, height, opacity, transform;\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0)\n        scale(var(--lobe-popover-animation-scale));\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transition-timing-function: var(--lobe-popover-animation-ease-in);\n      transition-duration: var(--lobe-popover-animation-duration-exit);\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n  `,\n\n  positioner: css`\n    --lobe-popover-animation-duration: 150ms;\n    --lobe-popover-animation-translate: 6px;\n    --lobe-popover-animation-scale: 0.96;\n    --lobe-popover-animation-ease-in: ease-in;\n    --lobe-popover-animation-duration-exit: 75ms;\n    --lobe-popover-animation-ease-out: ${cssVar.motionEaseOut};\n    --lobe-popover-translate-x: 0;\n    --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n\n    z-index: 1100;\n\n    width: var(--positioner-width);\n    max-width: var(--available-width);\n    height: var(--positioner-height);\n\n    transition-timing-function: var(--lobe-popover-animation-ease-out);\n    transition-duration: var(--lobe-popover-animation-duration);\n    transition-property: inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n\n    &[data-instant] {\n      transition: none;\n    }\n\n    &[data-placement='top'],\n    &[data-placement='topLeft'],\n    &[data-placement='topRight'] {\n      --lobe-popover-translate-x: 0;\n      --lobe-popover-translate-y: var(--lobe-popover-animation-translate);\n    }\n\n    &[data-placement='bottom'],\n    &[data-placement='bottomLeft'],\n    &[data-placement='bottomRight'] {\n      --lobe-popover-translate-x: 0;\n      --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n    }\n\n    &[data-placement='left'],\n    &[data-placement='leftTop'],\n    &[data-placement='leftBottom'] {\n      --lobe-popover-translate-x: var(--lobe-popover-animation-translate);\n      --lobe-popover-translate-y: 0;\n    }\n\n    &[data-placement='right'],\n    &[data-placement='rightTop'],\n    &[data-placement='rightBottom'] {\n      --lobe-popover-translate-x: calc(var(--lobe-popover-animation-translate) * -1);\n      --lobe-popover-translate-y: 0;\n    }\n  `,\n\n  root: css`\n    user-select: none;\n    position: relative;\n    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 12%));\n  `,\n\n  viewport: css`\n    --lobe-popover-viewport-inline-padding: 12px;\n\n    position: relative;\n\n    overflow: clip;\n\n    width: 100%;\n    height: 100%;\n    padding-block: 12px;\n    padding-inline: var(--lobe-popover-viewport-inline-padding);\n\n    [data-previous],\n    [data-current] {\n      transform: translateX(0);\n      width: calc(var(--popup-width) - 2 * var(--lobe-popover-viewport-inline-padding));\n      opacity: 1;\n      transition:\n        transform var(--lobe-popover-animation-duration) var(--lobe-popover-animation-ease-out),\n        opacity calc(var(--lobe-popover-animation-duration) / 2)\n          var(--lobe-popover-animation-ease-out);\n    }\n\n    &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n      transform: translateX(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='right'] [data-current][data-starting-style] {\n      transform: translateX(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n      transform: translateX(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-current][data-starting-style] {\n      transform: translateX(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n      transform: translateY(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-current][data-starting-style] {\n      transform: translateY(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n      transform: translateY(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-current][data-starting-style] {\n      transform: translateY(-50%);\n      opacity: 0;\n    }\n  `,\n}));\n"],"mappings":";;;AAEA,MAAa,SAAS,oBAAoB,EAAE,YAAK,wBAAc;CAC7D,OAAO,KAAG;;;;;;;;;;;;;;;;;;;;;;;cAuBEA,SAAO,gBAAgB;;;;;gBAKrBA,SAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAwBjC,OAAO,KAAG;;;;;;;qBAOSA,SAAO,aAAa;;aAE5BA,SAAO,UAAU;;kBAEZA,SAAO,gBAAgB;;;;;kBAKvBA,SAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;CAuBnC,YAAY,KAAG;;;;;;yCAMwBA,SAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+C5D,MAAM,KAAG;;;;;CAMT,UAAU,KAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Dd,EAAE"}

package/es/Popover/type.d.mts

@@ -0,0 +1,112 @@
+import { Placement } from "../utils/placement.mjs";
+import { CSSProperties, ReactElement, ReactNode, Ref } from "react";
+
+//#region src/Popover/type.d.ts
+type PopoverPlacement = Placement;
+type PopoverTrigger = 'hover' | 'click' | 'both' | ('hover' | 'click')[];
+interface PopoverProps {
+  /**
+   * 是否显示箭头, 在 `inset` 下无法使用
+   * @default true
+   */
+  arrow?: boolean;
+  /**
+   * 触发元素
+   */
+  children: ReactElement | ReactNode;
+  /**
+   * 弹出容器类名
+   */
+  className?: string;
+  /**
+   * 自定义类名
+   */
+  classNames?: {
+    arrow?: string;
+    content?: string;
+    root?: string;
+  };
+  /**
+   * 关闭延迟（毫秒），优先级高于 mouseLeaveDelay
+   */
+  closeDelay?: number;
+  /**
+   * 弹出内容
+   */
+  content: ReactNode;
+  /**
+   * 默认打开状态
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * 是否禁用
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 获取弹出容器
+   */
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  /**
+   * 是否嵌入 trigger 内部显示
+   * @default false
+   */
+  inset?: boolean;
+  /**
+   * 鼠标移入延迟（秒）
+   * @default 0.1
+   */
+  mouseEnterDelay?: number;
+  /**
+   * 鼠标移出延迟（秒）
+   * @default 0.1
+   */
+  mouseLeaveDelay?: number;
+  /**
+   * 打开状态变化回调
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * 受控的打开状态
+   */
+  open?: boolean;
+  /**
+   * 打开延迟（毫秒），优先级高于 mouseEnterDelay
+   */
+  openDelay?: number;
+  /**
+   * 弹出位置
+   * @default 'top'
+   */
+  placement?: PopoverPlacement;
+  /**
+   * 是否使用 Portal 渲染
+   * @default true
+   */
+  portalled?: boolean;
+  /**
+   * ref
+   */
+  ref?: Ref<HTMLElement>;
+  /**
+   * 自定义样式
+   */
+  styles?: {
+    arrow?: CSSProperties;
+    content?: CSSProperties;
+    root?: CSSProperties;
+  };
+  /**
+   * 触发方式
+   * @default 'hover'
+   */
+  trigger?: PopoverTrigger;
+  /**
+   * z-index
+   */
+  zIndex?: number;
+}
+//#endregion
+export { PopoverPlacement, PopoverProps, PopoverTrigger };
+//# sourceMappingURL=type.d.mts.map