@jinmi/ui 0.0.0-stage → 6.0.1

package/es/base-ui/FloatingPanel/FloatingPanel.mjs

@@ -0,0 +1,331 @@
+"use client";
+import { ModalBackdrop, ModalClose, ModalContent, ModalFooter, ModalHeader, ModalPopup, ModalPortal, ModalRoot, ModalTitle } from "../Modal/atoms.mjs";
+import { styles } from "./style.mjs";
+import { ToastDodge } from "./ToastDodge.mjs";
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "antd-style";
+import { X } from "lucide-react";
+//#region src/base-ui/FloatingPanel/FloatingPanel.tsx
+const DEFAULT_MIN_HEIGHT = 180;
+const DEFAULT_MIN_WIDTH = 320;
+const defaultMotionProps = {
+	animate: {
+		opacity: 1,
+		scale: 1,
+		x: 0,
+		y: 0
+	},
+	exit: {
+		opacity: 0,
+		scale: .98,
+		transition: {
+			duration: .14,
+			ease: [
+				.4,
+				0,
+				1,
+				1
+			]
+		},
+		y: 12
+	},
+	initial: {
+		opacity: 0,
+		scale: .98,
+		y: 12
+	},
+	transition: {
+		duration: .2,
+		ease: [
+			.32,
+			.72,
+			0,
+			1
+		]
+	}
+};
+const topMotionProps = {
+	animate: {
+		opacity: 1,
+		scale: 1,
+		x: 0,
+		y: 0
+	},
+	exit: {
+		opacity: 0,
+		scale: .98,
+		transition: {
+			duration: .14,
+			ease: [
+				.4,
+				0,
+				1,
+				1
+			]
+		},
+		y: -12
+	},
+	initial: {
+		opacity: 0,
+		scale: .98,
+		y: -12
+	},
+	transition: {
+		duration: .2,
+		ease: [
+			.32,
+			.72,
+			0,
+			1
+		]
+	}
+};
+const resolveOffset = (offset) => {
+	if (typeof offset === "object") return {
+		x: offset.x ?? 8,
+		y: offset.y ?? 8
+	};
+	return {
+		x: offset,
+		y: offset
+	};
+};
+const getPlacementStyle = (placement, offset) => {
+	const { x, y } = resolveOffset(offset);
+	const isTop = placement.startsWith("top");
+	const isLeft = placement.endsWith("Left");
+	const px = (value) => typeof value === "number" ? `${value}px` : value;
+	const blockInset = `calc(${px(y)} + var(--floating-panel-reserve-block-end, 0px))`;
+	const inlineInset = `calc(${px(x)} + var(--floating-panel-reserve-inline-end, 0px))`;
+	return {
+		alignItems: isTop ? "flex-start" : "flex-end",
+		justifyContent: isLeft ? "flex-start" : "flex-end",
+		paddingBlockEnd: isTop ? void 0 : blockInset,
+		paddingBlockStart: isTop ? blockInset : void 0,
+		paddingInlineEnd: isLeft ? void 0 : inlineInset,
+		paddingInlineStart: isLeft ? inlineInset : void 0
+	};
+};
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const getViewportMaxSize = () => ({
+	height: Math.max(DEFAULT_MIN_HEIGHT, window.innerHeight - 16),
+	width: Math.max(DEFAULT_MIN_WIDTH, window.innerWidth - 16)
+});
+const getResizeHandles = (placement) => {
+	switch (placement) {
+		case "bottomLeft": return [
+			"top",
+			"right",
+			"topRight"
+		];
+		case "topLeft": return [
+			"bottom",
+			"right",
+			"bottomRight"
+		];
+		case "topRight": return [
+			"bottom",
+			"left",
+			"bottomLeft"
+		];
+		default: return [
+			"top",
+			"left",
+			"topLeft"
+		];
+	}
+};
+const getResizeHandleClassName = (s, handle) => {
+	return {
+		bottom: s.resizeHandleBottom,
+		bottomLeft: s.resizeHandleBottomLeft,
+		bottomRight: s.resizeHandleBottomRight,
+		left: s.resizeHandleLeft,
+		right: s.resizeHandleRight,
+		top: s.resizeHandleTop,
+		topLeft: s.resizeHandleTopLeft,
+		topRight: s.resizeHandleTopRight
+	}[handle];
+};
+const resolveResizeSize = ({ handle, maxHeight, maxWidth, minHeight, minWidth, startHeight, startWidth, startX, startY, x, y }) => {
+	const deltaX = x - startX;
+	const deltaY = y - startY;
+	const growsLeft = handle.includes("Left") || handle === "left";
+	const growsRight = handle.includes("Right") || handle === "right";
+	const growsTop = handle.includes("top") || handle === "top";
+	const growsBottom = handle.includes("bottom") || handle === "bottom";
+	const nextWidth = growsLeft ? startWidth - deltaX : growsRight ? startWidth + deltaX : startWidth;
+	const nextHeight = growsTop ? startHeight - deltaY : growsBottom ? startHeight + deltaY : startHeight;
+	return {
+		height: clamp(nextHeight, minHeight, maxHeight),
+		width: clamp(nextWidth, minWidth, maxWidth)
+	};
+};
+const FloatingPanel = memo(({ afterClose, ariaLabel, children, className, classNames, closable = true, closeIcon, closeLabel = "Close", defaultOpen, actions, footer, getContainer, height, keyboard = true, mask = false, maskClosable = true, maxHeight, maxWidth, minHeight = DEFAULT_MIN_HEIGHT, minWidth = DEFAULT_MIN_WIDTH, modal = false, motionProps, offset = 8, onClose, onOpenChange, onResize, onResizeEnd, open, placement = "bottomRight", resizable = true, styles: semanticStyles, title, width = 640, zIndex }) => {
+	const s = styles;
+	const isTop = placement.startsWith("top");
+	const container = getContainer === false ? void 0 : getContainer;
+	const [resizeSize, setResizeSize] = useState();
+	const latestResizeSizeRef = useRef(void 0);
+	const resizeCleanupRef = useRef(void 0);
+	const activeResizeSize = resizeSize?.sourceWidth === width && resizeSize.sourceHeight === height ? resizeSize : void 0;
+	useEffect(() => () => {
+		resizeCleanupRef.current?.();
+	}, []);
+	const popupStyle = useMemo(() => ({
+		...getPlacementStyle(placement, offset),
+		...semanticStyles?.wrapper
+	}), [
+		offset,
+		placement,
+		semanticStyles?.wrapper
+	]);
+	const handleOpenChange = useCallback((nextOpen, eventDetails) => {
+		if (!nextOpen) {
+			if (keyboard === false && eventDetails.reason === "escape-key") return;
+			if (maskClosable === false && eventDetails.reason === "outside-press") return;
+			onClose?.();
+		}
+		onOpenChange?.(nextOpen, eventDetails);
+	}, [
+		keyboard,
+		maskClosable,
+		onClose,
+		onOpenChange
+	]);
+	const showHeader = title !== void 0 || actions !== void 0 || closable;
+	const resolvedMotionProps = motionProps ?? (isTop ? topMotionProps : defaultMotionProps);
+	const resizeHandles = useMemo(() => getResizeHandles(placement), [placement]);
+	const handleResizeStart = useCallback((handle) => (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		const panel = event.currentTarget.parentElement;
+		if (!panel) return;
+		const rect = panel.getBoundingClientRect();
+		const viewportMaxSize = getViewportMaxSize();
+		const resolvedMaxWidth = Math.max(minWidth, maxWidth ?? viewportMaxSize.width);
+		const resolvedMaxHeight = Math.max(minHeight, maxHeight ?? viewportMaxSize.height);
+		const startX = event.clientX;
+		const startY = event.clientY;
+		const handleResizeMove = (moveEvent) => {
+			const nextSize = resolveResizeSize({
+				handle,
+				maxHeight: resolvedMaxHeight,
+				maxWidth: resolvedMaxWidth,
+				minHeight,
+				minWidth,
+				startHeight: rect.height,
+				startWidth: rect.width,
+				startX,
+				startY,
+				x: moveEvent.clientX,
+				y: moveEvent.clientY
+			});
+			const nextState = {
+				...nextSize,
+				sourceHeight: height,
+				sourceWidth: width
+			};
+			latestResizeSizeRef.current = nextSize;
+			setResizeSize(nextState);
+			onResize?.(nextSize);
+		};
+		const handleResizeEnd = () => {
+			resizeCleanupRef.current?.();
+			resizeCleanupRef.current = void 0;
+			if (latestResizeSizeRef.current) onResizeEnd?.(latestResizeSizeRef.current);
+		};
+		resizeCleanupRef.current?.();
+		window.addEventListener("pointermove", handleResizeMove);
+		window.addEventListener("pointerup", handleResizeEnd);
+		resizeCleanupRef.current = () => {
+			window.removeEventListener("pointermove", handleResizeMove);
+			window.removeEventListener("pointerup", handleResizeEnd);
+		};
+	}, [
+		height,
+		maxHeight,
+		maxWidth,
+		minHeight,
+		minWidth,
+		onResize,
+		onResizeEnd,
+		width
+	]);
+	return /* @__PURE__ */ jsx(ModalRoot, {
+		defaultOpen,
+		modal,
+		open,
+		zIndex,
+		onExitComplete: afterClose,
+		onOpenChange: handleOpenChange,
+		children: /* @__PURE__ */ jsxs(ModalPortal, {
+			container,
+			children: [mask && /* @__PURE__ */ jsx(ModalBackdrop, {
+				className: classNames?.backdrop,
+				style: semanticStyles?.backdrop
+			}), /* @__PURE__ */ jsxs(ModalPopup, {
+				"aria-label": ariaLabel,
+				className: cx(s.wrapper, classNames?.wrapper),
+				motionProps: resolvedMotionProps,
+				panelClassName: cx(s.panel, isTop && s.panelTop, className, classNames?.panel),
+				popupStyle,
+				width: activeResizeSize?.width ?? width,
+				style: {
+					height: activeResizeSize?.height ?? height,
+					minHeight,
+					minWidth,
+					width: activeResizeSize?.width,
+					...semanticStyles?.panel
+				},
+				children: [
+					placement === "bottomRight" && /* @__PURE__ */ jsx(ToastDodge, {}),
+					resizable && resizeHandles.map((handle) => /* @__PURE__ */ jsx("div", {
+						"aria-hidden": true,
+						"data-floating-panel-resize-handle": handle,
+						style: semanticStyles?.resizeHandle,
+						className: cx(s.resizeHandle, getResizeHandleClassName(s, handle), classNames?.resizeHandle),
+						onPointerDown: handleResizeStart(handle)
+					}, handle)),
+					showHeader && /* @__PURE__ */ jsxs(ModalHeader, {
+						className: cx(s.header, classNames?.header),
+						style: semanticStyles?.header,
+						children: [title !== void 0 ? /* @__PURE__ */ jsx(ModalTitle, {
+							className: cx(s.title, classNames?.title),
+							style: semanticStyles?.title,
+							children: title
+						}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
+							className: s.headerActions,
+							children: [actions && /* @__PURE__ */ jsx("div", {
+								className: cx(s.actions, classNames?.actions),
+								style: semanticStyles?.actions,
+								children: actions
+							}), closable && /* @__PURE__ */ jsx(ModalClose, {
+								"aria-label": closeLabel,
+								className: cx(s.close, classNames?.close),
+								style: semanticStyles?.close,
+								children: closeIcon ?? /* @__PURE__ */ jsx(X, { size: 16 })
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsx(ModalContent, {
+						className: cx(s.body, classNames?.body),
+						style: semanticStyles?.body,
+						children
+					}),
+					footer && /* @__PURE__ */ jsx(ModalFooter, {
+						className: cx(s.footer, classNames?.footer),
+						style: semanticStyles?.footer,
+						children: footer
+					})
+				]
+			})]
+		})
+	});
+});
+FloatingPanel.displayName = "FloatingPanel";
+//#endregion
+export { FloatingPanel };
+
+//# sourceMappingURL=FloatingPanel.mjs.map

package/es/base-ui/FloatingPanel/FloatingPanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FloatingPanel.mjs","names":[],"sources":["../../../src/base-ui/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { cx } from 'antd-style';\r\nimport { X } from 'lucide-react';\r\nimport type { MotionProps } from 'motion/react';\r\nimport type { CSSProperties, PointerEvent as ReactPointerEvent } from 'react';\r\nimport { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';\r\n\r\nimport type { ModalRootProps } from '../Modal';\r\nimport {\r\n  ModalBackdrop,\r\n  ModalClose,\r\n  ModalContent,\r\n  ModalFooter,\r\n  ModalHeader,\r\n  ModalPopup,\r\n  ModalPortal,\r\n  ModalRoot,\r\n  ModalTitle,\r\n} from '../Modal';\r\nimport { styles } from './style';\r\nimport { ToastDodge } from './ToastDodge';\r\nimport type {\r\n  FloatingPanelOffset,\r\n  FloatingPanelPlacement,\r\n  FloatingPanelProps,\r\n  FloatingPanelResizeHandle,\r\n  FloatingPanelSize,\r\n} from './type';\r\n\r\nconst DEFAULT_MIN_HEIGHT = 180;\r\nconst DEFAULT_MIN_WIDTH = 320;\r\n\r\ninterface InternalFloatingPanelSize extends FloatingPanelSize {\r\n  sourceHeight?: number | string;\r\n  sourceWidth?: number | string;\r\n}\r\n\r\nconst defaultMotionProps: MotionProps = {\r\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\r\n  exit: {\r\n    opacity: 0,\r\n    scale: 0.98,\r\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\r\n    y: 12,\r\n  },\r\n  initial: { opacity: 0, scale: 0.98, y: 12 },\r\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\r\n};\r\n\r\nconst topMotionProps: MotionProps = {\r\n  animate: { opacity: 1, scale: 1, x: 0, y: 0 },\r\n  exit: {\r\n    opacity: 0,\r\n    scale: 0.98,\r\n    transition: { duration: 0.14, ease: [0.4, 0, 1, 1] },\r\n    y: -12,\r\n  },\r\n  initial: { opacity: 0, scale: 0.98, y: -12 },\r\n  transition: { duration: 0.2, ease: [0.32, 0.72, 0, 1] },\r\n};\r\n\r\nconst resolveOffset = (offset: FloatingPanelOffset) => {\r\n  if (typeof offset === 'object') {\r\n    return {\r\n      x: offset.x ?? 8,\r\n      y: offset.y ?? 8,\r\n    };\r\n  }\r\n\r\n  return { x: offset, y: offset };\r\n};\r\n\r\nconst getPlacementStyle = (\r\n  placement: FloatingPanelPlacement,\r\n  offset: FloatingPanelOffset,\r\n): CSSProperties => {\r\n  const { x, y } = resolveOffset(offset);\r\n  const isTop = placement.startsWith('top');\r\n  const isLeft = placement.endsWith('Left');\r\n\r\n  const px = (value: number | string) => (typeof value === 'number' ? `${value}px` : value);\r\n  const blockInset = `calc(${px(y)} + var(--floating-panel-reserve-block-end, 0px))`;\r\n  const inlineInset = `calc(${px(x)} + var(--floating-panel-reserve-inline-end, 0px))`;\r\n\r\n  return {\r\n    alignItems: isTop ? 'flex-start' : 'flex-end',\r\n    justifyContent: isLeft ? 'flex-start' : 'flex-end',\r\n    paddingBlockEnd: isTop ? undefined : blockInset,\r\n    paddingBlockStart: isTop ? blockInset : undefined,\r\n    paddingInlineEnd: isLeft ? undefined : inlineInset,\r\n    paddingInlineStart: isLeft ? inlineInset : undefined,\r\n  };\r\n};\r\n\r\nconst clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max);\r\n\r\nconst getViewportMaxSize = () => ({\r\n  height: Math.max(DEFAULT_MIN_HEIGHT, window.innerHeight - 16),\r\n  width: Math.max(DEFAULT_MIN_WIDTH, window.innerWidth - 16),\r\n});\r\n\r\nconst getResizeHandles = (placement: FloatingPanelPlacement): FloatingPanelResizeHandle[] => {\r\n  switch (placement) {\r\n    case 'bottomLeft': {\r\n      return ['top', 'right', 'topRight'];\r\n    }\r\n    case 'topLeft': {\r\n      return ['bottom', 'right', 'bottomRight'];\r\n    }\r\n    case 'topRight': {\r\n      return ['bottom', 'left', 'bottomLeft'];\r\n    }\r\n    default: {\r\n      return ['top', 'left', 'topLeft'];\r\n    }\r\n  }\r\n};\r\n\r\nconst getResizeHandleClassName = (s: typeof styles, handle: FloatingPanelResizeHandle) => {\r\n  const handleClassMap: Record<FloatingPanelResizeHandle, string> = {\r\n    bottom: s.resizeHandleBottom,\r\n    bottomLeft: s.resizeHandleBottomLeft,\r\n    bottomRight: s.resizeHandleBottomRight,\r\n    left: s.resizeHandleLeft,\r\n    right: s.resizeHandleRight,\r\n    top: s.resizeHandleTop,\r\n    topLeft: s.resizeHandleTopLeft,\r\n    topRight: s.resizeHandleTopRight,\r\n  };\r\n\r\n  return handleClassMap[handle];\r\n};\r\n\r\nconst resolveResizeSize = ({\r\n  handle,\r\n  maxHeight,\r\n  maxWidth,\r\n  minHeight,\r\n  minWidth,\r\n  startHeight,\r\n  startWidth,\r\n  startX,\r\n  startY,\r\n  x,\r\n  y,\r\n}: {\r\n  handle: FloatingPanelResizeHandle;\r\n  maxHeight: number;\r\n  maxWidth: number;\r\n  minHeight: number;\r\n  minWidth: number;\r\n  startHeight: number;\r\n  startWidth: number;\r\n  startX: number;\r\n  startY: number;\r\n  x: number;\r\n  y: number;\r\n}): FloatingPanelSize => {\r\n  const deltaX = x - startX;\r\n  const deltaY = y - startY;\r\n  const growsLeft = handle.includes('Left') || handle === 'left';\r\n  const growsRight = handle.includes('Right') || handle === 'right';\r\n  const growsTop = handle.includes('top') || handle === 'top';\r\n  const growsBottom = handle.includes('bottom') || handle === 'bottom';\r\n\r\n  const nextWidth = growsLeft ? startWidth - deltaX : growsRight ? startWidth + deltaX : startWidth;\r\n  const nextHeight = growsTop\r\n    ? startHeight - deltaY\r\n    : growsBottom\r\n      ? startHeight + deltaY\r\n      : startHeight;\r\n\r\n  return {\r\n    height: clamp(nextHeight, minHeight, maxHeight),\r\n    width: clamp(nextWidth, minWidth, maxWidth),\r\n  };\r\n};\r\n\r\nconst FloatingPanel = memo<FloatingPanelProps>(\r\n  ({\r\n    afterClose,\r\n    ariaLabel,\r\n    children,\r\n    className,\r\n    classNames,\r\n    closable = true,\r\n    closeIcon,\r\n    closeLabel = 'Close',\r\n    defaultOpen,\r\n    actions,\r\n    footer,\r\n    getContainer,\r\n    height,\r\n    keyboard = true,\r\n    mask = false,\r\n    maskClosable = true,\r\n    maxHeight,\r\n    maxWidth,\r\n    minHeight = DEFAULT_MIN_HEIGHT,\r\n    minWidth = DEFAULT_MIN_WIDTH,\r\n    modal = false,\r\n    motionProps,\r\n    offset = 8,\r\n    onClose,\r\n    onOpenChange,\r\n    onResize,\r\n    onResizeEnd,\r\n    open,\r\n    placement = 'bottomRight',\r\n    resizable = true,\r\n    styles: semanticStyles,\r\n    title,\r\n    width = 640,\r\n    zIndex,\r\n  }) => {\r\n    const s = styles;\r\n    const isTop = placement.startsWith('top');\r\n    const container = getContainer === false ? undefined : getContainer;\r\n    const [resizeSize, setResizeSize] = useState<InternalFloatingPanelSize>();\r\n    const latestResizeSizeRef = useRef<FloatingPanelSize | undefined>(undefined);\r\n    const resizeCleanupRef = useRef<(() => void) | undefined>(undefined);\r\n    const activeResizeSize =\r\n      resizeSize?.sourceWidth === width && resizeSize.sourceHeight === height\r\n        ? resizeSize\r\n        : undefined;\r\n\r\n    useEffect(\r\n      () => () => {\r\n        resizeCleanupRef.current?.();\r\n      },\r\n      [],\r\n    );\r\n\r\n    const popupStyle = useMemo(\r\n      () => ({\r\n        ...getPlacementStyle(placement, offset),\r\n        ...semanticStyles?.wrapper,\r\n      }),\r\n      [offset, placement, semanticStyles?.wrapper],\r\n    );\r\n\r\n    const handleOpenChange = useCallback<NonNullable<ModalRootProps['onOpenChange']>>(\r\n      (nextOpen, eventDetails) => {\r\n        if (!nextOpen) {\r\n          if (keyboard === false && eventDetails.reason === 'escape-key') return;\r\n          if (maskClosable === false && eventDetails.reason === 'outside-press') return;\r\n          onClose?.();\r\n        }\r\n\r\n        onOpenChange?.(nextOpen, eventDetails);\r\n      },\r\n      [keyboard, maskClosable, onClose, onOpenChange],\r\n    );\r\n\r\n    const showHeader = title !== undefined || actions !== undefined || closable;\r\n    const resolvedMotionProps = motionProps ?? (isTop ? topMotionProps : defaultMotionProps);\r\n    const resizeHandles = useMemo(() => getResizeHandles(placement), [placement]);\r\n\r\n    const handleResizeStart = useCallback(\r\n      (handle: FloatingPanelResizeHandle) => (event: ReactPointerEvent<HTMLDivElement>) => {\r\n        event.preventDefault();\r\n        event.stopPropagation();\r\n\r\n        const panel = event.currentTarget.parentElement;\r\n        if (!panel) return;\r\n\r\n        const rect = panel.getBoundingClientRect();\r\n        const viewportMaxSize = getViewportMaxSize();\r\n        const resolvedMaxWidth = Math.max(minWidth, maxWidth ?? viewportMaxSize.width);\r\n        const resolvedMaxHeight = Math.max(minHeight, maxHeight ?? viewportMaxSize.height);\r\n        const startX = event.clientX;\r\n        const startY = event.clientY;\r\n\r\n        const handleResizeMove = (moveEvent: PointerEvent) => {\r\n          const nextSize = resolveResizeSize({\r\n            handle,\r\n            maxHeight: resolvedMaxHeight,\r\n            maxWidth: resolvedMaxWidth,\r\n            minHeight,\r\n            minWidth,\r\n            startHeight: rect.height,\r\n            startWidth: rect.width,\r\n            startX,\r\n            startY,\r\n            x: moveEvent.clientX,\r\n            y: moveEvent.clientY,\r\n          });\r\n\r\n          const nextState = { ...nextSize, sourceHeight: height, sourceWidth: width };\r\n          latestResizeSizeRef.current = nextSize;\r\n          setResizeSize(nextState);\r\n          onResize?.(nextSize);\r\n        };\r\n\r\n        const handleResizeEnd = () => {\r\n          resizeCleanupRef.current?.();\r\n          resizeCleanupRef.current = undefined;\r\n\r\n          if (latestResizeSizeRef.current) onResizeEnd?.(latestResizeSizeRef.current);\r\n        };\r\n\r\n        resizeCleanupRef.current?.();\r\n        window.addEventListener('pointermove', handleResizeMove);\r\n        window.addEventListener('pointerup', handleResizeEnd);\r\n        resizeCleanupRef.current = () => {\r\n          window.removeEventListener('pointermove', handleResizeMove);\r\n          window.removeEventListener('pointerup', handleResizeEnd);\r\n        };\r\n      },\r\n      [height, maxHeight, maxWidth, minHeight, minWidth, onResize, onResizeEnd, width],\r\n    );\r\n\r\n    return (\r\n      <ModalRoot\r\n        defaultOpen={defaultOpen}\r\n        modal={modal}\r\n        open={open}\r\n        zIndex={zIndex}\r\n        onExitComplete={afterClose}\r\n        onOpenChange={handleOpenChange}\r\n      >\r\n        <ModalPortal container={container}>\r\n          {mask && (\r\n            <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\r\n          )}\r\n          <ModalPopup\r\n            aria-label={ariaLabel}\r\n            className={cx(s.wrapper, classNames?.wrapper)}\r\n            motionProps={resolvedMotionProps}\r\n            panelClassName={cx(s.panel, isTop && s.panelTop, className, classNames?.panel)}\r\n            popupStyle={popupStyle}\r\n            width={activeResizeSize?.width ?? width}\r\n            style={{\r\n              height: activeResizeSize?.height ?? height,\r\n              minHeight,\r\n              minWidth,\r\n              width: activeResizeSize?.width,\r\n              ...semanticStyles?.panel,\r\n            }}\r\n          >\r\n            {placement === 'bottomRight' && <ToastDodge />}\r\n            {resizable &&\r\n              resizeHandles.map((handle) => (\r\n                <div\r\n                  aria-hidden\r\n                  data-floating-panel-resize-handle={handle}\r\n                  key={handle}\r\n                  style={semanticStyles?.resizeHandle}\r\n                  className={cx(\r\n                    s.resizeHandle,\r\n                    getResizeHandleClassName(s, handle),\r\n                    classNames?.resizeHandle,\r\n                  )}\r\n                  onPointerDown={handleResizeStart(handle)}\r\n                />\r\n              ))}\r\n            {showHeader && (\r\n              <ModalHeader\r\n                className={cx(s.header, classNames?.header)}\r\n                style={semanticStyles?.header}\r\n              >\r\n                {title !== undefined ? (\r\n                  <ModalTitle\r\n                    className={cx(s.title, classNames?.title)}\r\n                    style={semanticStyles?.title}\r\n                  >\r\n                    {title}\r\n                  </ModalTitle>\r\n                ) : (\r\n                  <span />\r\n                )}\r\n                <div className={s.headerActions}>\r\n                  {actions && (\r\n                    <div\r\n                      className={cx(s.actions, classNames?.actions)}\r\n                      style={semanticStyles?.actions}\r\n                    >\r\n                      {actions}\r\n                    </div>\r\n                  )}\r\n                  {closable && (\r\n                    <ModalClose\r\n                      aria-label={closeLabel}\r\n                      className={cx(s.close, classNames?.close)}\r\n                      style={semanticStyles?.close}\r\n                    >\r\n                      {closeIcon ?? <X size={16} />}\r\n                    </ModalClose>\r\n                  )}\r\n                </div>\r\n              </ModalHeader>\r\n            )}\r\n            <ModalContent className={cx(s.body, classNames?.body)} style={semanticStyles?.body}>\r\n              {children}\r\n            </ModalContent>\r\n            {footer && (\r\n              <ModalFooter\r\n                className={cx(s.footer, classNames?.footer)}\r\n                style={semanticStyles?.footer}\r\n              >\r\n                {footer}\r\n              </ModalFooter>\r\n            )}\r\n          </ModalPopup>\r\n        </ModalPortal>\r\n      </ModalRoot>\r\n    );\r\n  },\r\n);\r\n\r\nFloatingPanel.displayName = 'FloatingPanel';\r\n\r\nexport { FloatingPanel };\r\n"],"mappings":"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"}

package/es/base-ui/FloatingPanel/ToastDodge.mjs

@@ -0,0 +1,81 @@
+import { PANEL_ALIGN_INLINE_VAR, PANEL_RESERVE_VAR, TOAST_SHIFT_X_VAR, TOAST_SHIFT_Y_VAR, TOAST_WIDTH_VAR, resolveToastDodge } from "../Toast/dodge.mjs";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/base-ui/FloatingPanel/ToastDodge.tsx
+const TOAST_VARS = [
+	TOAST_SHIFT_X_VAR,
+	TOAST_SHIFT_Y_VAR,
+	TOAST_WIDTH_VAR
+];
+let owner;
+const ToastDodge = () => {
+	const probeRef = useRef(null);
+	const reserveRef = useRef(0);
+	const tokenRef = useRef({});
+	const insetRef = useRef(void 0);
+	useEffect(() => {
+		const root = document.documentElement;
+		const panel = probeRef.current?.parentElement;
+		const token = tokenRef.current;
+		const wrapper = panel?.parentElement;
+		const clear = () => {
+			reserveRef.current = 0;
+			if (wrapper instanceof HTMLElement) {
+				wrapper.style.removeProperty(PANEL_RESERVE_VAR);
+				wrapper.style.removeProperty(PANEL_ALIGN_INLINE_VAR);
+			}
+			if (owner !== token) return;
+			owner = void 0;
+			for (const name of TOAST_VARS) root.style.removeProperty(name);
+		};
+		if (!panel) return;
+		const apply = () => {
+			if (!(panel instanceof HTMLElement) || !(wrapper instanceof HTMLElement)) return;
+			if (!insetRef.current) {
+				const padding = getComputedStyle(wrapper);
+				insetRef.current = {
+					x: Number.parseFloat(padding.paddingInlineEnd) || 0,
+					y: Number.parseFloat(padding.paddingBlockEnd) || 0
+				};
+			}
+			const inset = insetRef.current;
+			const maxHeight = Number.parseFloat(getComputedStyle(panel).maxHeight);
+			const reserved = reserveRef.current;
+			const clamped = panel.offsetHeight >= maxHeight - .5 ? reserved : 0;
+			const dodge = resolveToastDodge({
+				panelHeight: panel.offsetHeight + clamped,
+				panelOffsetX: inset.x,
+				panelOffsetY: inset.y,
+				panelWidth: panel.offsetWidth,
+				viewportHeight: wrapper.clientHeight,
+				viewportWidth: wrapper.clientWidth
+			});
+			owner = token;
+			reserveRef.current = dodge.reserve;
+			root.style.setProperty(TOAST_SHIFT_X_VAR, `${dodge.shiftX}px`);
+			root.style.setProperty(TOAST_SHIFT_Y_VAR, `${dodge.shiftY}px`);
+			wrapper.style.setProperty(PANEL_RESERVE_VAR, `${dodge.reserve}px`);
+			wrapper.style.setProperty(PANEL_ALIGN_INLINE_VAR, `${dodge.alignInline}px`);
+			if (dodge.width === 360) root.style.removeProperty(TOAST_WIDTH_VAR);
+			else root.style.setProperty(TOAST_WIDTH_VAR, `${dodge.width}px`);
+		};
+		const observer = new ResizeObserver(apply);
+		observer.observe(panel);
+		window.addEventListener("resize", apply);
+		apply();
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("resize", apply);
+			clear();
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		hidden: true,
+		ref: probeRef
+	});
+};
+//#endregion
+export { ToastDodge };
+
+//# sourceMappingURL=ToastDodge.mjs.map

package/es/base-ui/FloatingPanel/ToastDodge.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastDodge.mjs","names":[],"sources":["../../../src/base-ui/FloatingPanel/ToastDodge.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\r\n\r\nimport {\r\n  PANEL_ALIGN_INLINE_VAR,\r\n  PANEL_RESERVE_VAR,\r\n  resolveToastDodge,\r\n  TOAST_SHIFT_X_VAR,\r\n  TOAST_SHIFT_Y_VAR,\r\n  TOAST_WIDTH,\r\n  TOAST_WIDTH_VAR,\r\n} from '../Toast/dodge';\r\n\r\nconst TOAST_VARS = [TOAST_SHIFT_X_VAR, TOAST_SHIFT_Y_VAR, TOAST_WIDTH_VAR];\r\n\r\n// A closing panel unmounts after its exit animation, so it can outlive the\r\n// panel that replaced it. Only the panel that wrote the vars may clear them.\r\nlet owner: object | undefined;\r\n\r\n// Mounted inside the panel so it lives exactly as long as the panel does, and\r\n// reads its own parentElement to measure it.\r\nexport const ToastDodge = () => {\r\n  const probeRef = useRef<HTMLSpanElement>(null);\r\n  const reserveRef = useRef(0);\r\n  const tokenRef = useRef({});\r\n  const insetRef = useRef<{ x: number; y: number }>(undefined);\r\n\r\n  useEffect(() => {\r\n    const root = document.documentElement;\r\n    const panel = probeRef.current?.parentElement;\r\n\r\n    const token = tokenRef.current;\r\n    const wrapper = panel?.parentElement;\r\n    const clear = () => {\r\n      reserveRef.current = 0;\r\n      // The reserve lives on this panel's own wrapper, so it is always ours to\r\n      // drop; the toast vars are global and only the last writer may clear them.\r\n      if (wrapper instanceof HTMLElement) {\r\n        wrapper.style.removeProperty(PANEL_RESERVE_VAR);\r\n        wrapper.style.removeProperty(PANEL_ALIGN_INLINE_VAR);\r\n      }\r\n      if (owner !== token) return;\r\n      owner = undefined;\r\n      for (const name of TOAST_VARS) root.style.removeProperty(name);\r\n    };\r\n\r\n    if (!panel) return;\r\n\r\n    const apply = () => {\r\n      if (!(panel instanceof HTMLElement) || !(wrapper instanceof HTMLElement)) return;\r\n      // Read the resting insets once, before anything is reserved: the wrapper\r\n      // padding animates, so sampling it later feeds the transition's midpoint\r\n      // back into the verdict and the reserve ratchets upward every frame.\r\n      if (!insetRef.current) {\r\n        const padding = getComputedStyle(wrapper);\r\n        insetRef.current = {\r\n          x: Number.parseFloat(padding.paddingInlineEnd) || 0,\r\n          y: Number.parseFloat(padding.paddingBlockEnd) || 0,\r\n        };\r\n      }\r\n      // Layout size, never getBoundingClientRect: the rect carries the entrance\r\n      // animation's transform, so measuring mid-flight reports a scaled-down\r\n      // panel and the toast lands short of the gutter.\r\n      const inset = insetRef.current;\r\n      // Measure the panel as if it were not already yielding, otherwise the\r\n      // reserve it applies shrinks the panel and flips the next verdict.\r\n      // Only add the reserve back when max-height is what is holding the panel\r\n      // down; a panel shorter than its cap was never shrunk by it.\r\n      const maxHeight = Number.parseFloat(getComputedStyle(panel).maxHeight);\r\n      const reserved = reserveRef.current;\r\n      const clamped = panel.offsetHeight >= maxHeight - 0.5 ? reserved : 0;\r\n      const dodge = resolveToastDodge({\r\n        panelHeight: panel.offsetHeight + clamped,\r\n        panelOffsetX: inset.x,\r\n        panelOffsetY: inset.y,\r\n        panelWidth: panel.offsetWidth,\r\n        viewportHeight: wrapper.clientHeight,\r\n        viewportWidth: wrapper.clientWidth,\r\n      });\r\n\r\n      owner = token;\r\n      reserveRef.current = dodge.reserve;\r\n      root.style.setProperty(TOAST_SHIFT_X_VAR, `${dodge.shiftX}px`);\r\n      root.style.setProperty(TOAST_SHIFT_Y_VAR, `${dodge.shiftY}px`);\r\n      wrapper.style.setProperty(PANEL_RESERVE_VAR, `${dodge.reserve}px`);\r\n      wrapper.style.setProperty(PANEL_ALIGN_INLINE_VAR, `${dodge.alignInline}px`);\r\n      if (dodge.width === TOAST_WIDTH) root.style.removeProperty(TOAST_WIDTH_VAR);\r\n      else root.style.setProperty(TOAST_WIDTH_VAR, `${dodge.width}px`);\r\n    };\r\n\r\n    const observer = new ResizeObserver(apply);\r\n    observer.observe(panel);\r\n    window.addEventListener('resize', apply);\r\n    apply();\r\n\r\n    return () => {\r\n      observer.disconnect();\r\n      window.removeEventListener('resize', apply);\r\n      clear();\r\n    };\r\n  }, []);\r\n\r\n  return <span aria-hidden hidden ref={probeRef} />;\r\n};\r\n"],"mappings":";;;;AAYA,MAAM,aAAa;CAAC;CAAmB;CAAmB;AAAe;AAIzE,IAAI;AAIJ,MAAa,mBAAmB;CAC9B,MAAM,WAAW,OAAwB,IAAI;CAC7C,MAAM,aAAa,OAAO,CAAC;CAC3B,MAAM,WAAW,OAAO,CAAC,CAAC;CAC1B,MAAM,WAAW,OAAiC,KAAA,CAAS;CAE3D,gBAAgB;EACd,MAAM,OAAO,SAAS;EACtB,MAAM,QAAQ,SAAS,SAAS;EAEhC,MAAM,QAAQ,SAAS;EACvB,MAAM,UAAU,OAAO;EACvB,MAAM,cAAc;GAClB,WAAW,UAAU;GAGrB,IAAI,mBAAmB,aAAa;IAClC,QAAQ,MAAM,eAAe,iBAAiB;IAC9C,QAAQ,MAAM,eAAe,sBAAsB;GACrD;GACA,IAAI,UAAU,OAAO;GACrB,QAAQ,KAAA;GACR,KAAK,MAAM,QAAQ,YAAY,KAAK,MAAM,eAAe,IAAI;EAC/D;EAEA,IAAI,CAAC,OAAO;EAEZ,MAAM,cAAc;GAClB,IAAI,EAAE,iBAAiB,gBAAgB,EAAE,mBAAmB,cAAc;GAI1E,IAAI,CAAC,SAAS,SAAS;IACrB,MAAM,UAAU,iBAAiB,OAAO;IACxC,SAAS,UAAU;KACjB,GAAG,OAAO,WAAW,QAAQ,gBAAgB,KAAK;KAClD,GAAG,OAAO,WAAW,QAAQ,eAAe,KAAK;IACnD;GACF;GAIA,MAAM,QAAQ,SAAS;GAKvB,MAAM,YAAY,OAAO,WAAW,iBAAiB,KAAK,CAAC,CAAC,SAAS;GACrE,MAAM,WAAW,WAAW;GAC5B,MAAM,UAAU,MAAM,gBAAgB,YAAY,KAAM,WAAW;GACnE,MAAM,QAAQ,kBAAkB;IAC9B,aAAa,MAAM,eAAe;IAClC,cAAc,MAAM;IACpB,cAAc,MAAM;IACpB,YAAY,MAAM;IAClB,gBAAgB,QAAQ;IACxB,eAAe,QAAQ;GACzB,CAAC;GAED,QAAQ;GACR,WAAW,UAAU,MAAM;GAC3B,KAAK,MAAM,YAAY,mBAAmB,GAAG,MAAM,OAAO,GAAG;GAC7D,KAAK,MAAM,YAAY,mBAAmB,GAAG,MAAM,OAAO,GAAG;GAC7D,QAAQ,MAAM,YAAY,mBAAmB,GAAG,MAAM,QAAQ,GAAG;GACjE,QAAQ,MAAM,YAAY,wBAAwB,GAAG,MAAM,YAAY,GAAG;GAC1E,IAAI,MAAM,UAAA,KAAuB,KAAK,MAAM,eAAe,eAAe;QACrE,KAAK,MAAM,YAAY,iBAAiB,GAAG,MAAM,MAAM,GAAG;EACjE;EAEA,MAAM,WAAW,IAAI,eAAe,KAAK;EACzC,SAAS,QAAQ,KAAK;EACtB,OAAO,iBAAiB,UAAU,KAAK;EACvC,MAAM;EAEN,aAAa;GACX,SAAS,WAAW;GACpB,OAAO,oBAAoB,UAAU,KAAK;GAC1C,MAAM;EACR;CACF,GAAG,CAAC,CAAC;CAEL,OAAO,oBAAC,QAAD;EAAM,eAAA;EAAY,QAAA;EAAO,KAAK;CAAW,CAAA;AAClD"}

package/es/base-ui/FloatingPanel/index.d.mts

@@ -0,0 +1,3 @@
+import { FloatingPanelOffset, FloatingPanelPlacement, FloatingPanelProps } from "./type.mjs";
+import { FloatingPanel } from "./FloatingPanel.mjs";
+export { FloatingPanel, type FloatingPanelOffset, type FloatingPanelPlacement, type FloatingPanelProps };

package/es/base-ui/FloatingPanel/style.mjs

@@ -0,0 +1,185 @@
+import { TOAST_DODGE_DURATION, TOAST_DODGE_EASE } from "../Toast/dodge.mjs";
+import { createStaticStyles } from "antd-style";
+//#region src/base-ui/FloatingPanel/style.ts
+const styles = createStaticStyles(({ css, cssVar }) => ({
+	body: css`
+    overflow: hidden auto;
+    flex: 1;
+    min-height: 0;
+    padding: 0;
+  `,
+	close: css`
+    position: static;
+
+    width: 32px;
+    height: 32px;
+    margin-inline-end: -4px;
+    border-radius: 8px;
+  `,
+	actions: css`
+    display: flex;
+    flex: none;
+    gap: 4px;
+    align-items: center;
+  `,
+	footer: css`
+    flex: none;
+    border-block-start: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+	header: css`
+    flex: none;
+    min-height: 48px;
+    border-block-end: 1px solid ${cssVar.colorBorderSecondary};
+  `,
+	headerActions: css`
+    display: flex;
+    flex: none;
+    gap: 4px;
+    align-items: center;
+  `,
+	panel: css`
+    transform-origin: 100% 100%;
+
+    width: calc(100dvw - 32px);
+    max-height: calc(100dvh - 32px - var(--floating-panel-reserve-block-end, 0px));
+    border-radius: 12px;
+
+    box-shadow: ${cssVar.boxShadowSecondary}, var(--jinmi-ring);
+  `,
+	panelTop: css`
+    transform-origin: 100% 0;
+  `,
+	resizeHandle: css`
+    touch-action: none;
+    position: absolute;
+    z-index: 1;
+    background: transparent;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+
+      border-radius: 999px;
+
+      opacity: 0;
+      background: ${cssVar.colorPrimary};
+
+      transition: opacity 120ms ease;
+    }
+
+    &:hover::after,
+    &:focus-visible::after {
+      opacity: 0.55;
+    }
+  `,
+	resizeHandleBottom: css`
+    cursor: ns-resize;
+    inset-block-end: -4px;
+    inset-inline: 16px;
+    height: 8px;
+
+    &::after {
+      inset-block-end: 3px;
+      inset-inline: 0;
+      height: 2px;
+    }
+  `,
+	resizeHandleBottomLeft: css`
+    cursor: nesw-resize;
+
+    inset-block-end: -5px;
+    inset-inline-start: -5px;
+
+    width: 16px;
+    height: 16px;
+  `,
+	resizeHandleBottomRight: css`
+    cursor: nwse-resize;
+
+    inset-block-end: -5px;
+    inset-inline-end: -5px;
+
+    width: 16px;
+    height: 16px;
+  `,
+	resizeHandleLeft: css`
+    cursor: ew-resize;
+    inset-block: 16px;
+    inset-inline-start: -4px;
+    width: 8px;
+
+    &::after {
+      inset-block: 0;
+      inset-inline-start: 3px;
+      width: 2px;
+    }
+  `,
+	resizeHandleRight: css`
+    cursor: ew-resize;
+    inset-block: 16px;
+    inset-inline-end: -4px;
+    width: 8px;
+
+    &::after {
+      inset-block: 0;
+      inset-inline-end: 3px;
+      width: 2px;
+    }
+  `,
+	resizeHandleTop: css`
+    cursor: ns-resize;
+    inset-block-start: -4px;
+    inset-inline: 16px;
+    height: 8px;
+
+    &::after {
+      inset-block-start: 3px;
+      inset-inline: 0;
+      height: 2px;
+    }
+  `,
+	resizeHandleTopLeft: css`
+    cursor: nwse-resize;
+
+    inset-block-start: -5px;
+    inset-inline-start: -5px;
+
+    width: 16px;
+    height: 16px;
+  `,
+	resizeHandleTopRight: css`
+    cursor: nesw-resize;
+
+    inset-block-start: -5px;
+    inset-inline-end: -5px;
+
+    width: 16px;
+    height: 16px;
+  `,
+	title: css`
+    overflow: hidden;
+    flex: 1;
+
+    min-width: 0;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  `,
+	wrapper: css`
+    overflow: hidden;
+    transition:
+      padding-block-end ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE},
+      padding-block-start ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE},
+      padding-inline-end ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE},
+      padding-inline-start ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE};
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  `
+}));
+//#endregion
+export { styles };
+
+//# sourceMappingURL=style.mjs.map

package/es/base-ui/FloatingPanel/style.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/FloatingPanel/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { TOAST_DODGE_DURATION, TOAST_DODGE_EASE } from '../Toast/dodge';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  body: css`\n    overflow: hidden auto;\n    flex: 1;\n    min-height: 0;\n    padding: 0;\n  `,\n  close: css`\n    position: static;\n\n    width: 32px;\n    height: 32px;\n    margin-inline-end: -4px;\n    border-radius: 8px;\n  `,\n  actions: css`\n    display: flex;\n    flex: none;\n    gap: 4px;\n    align-items: center;\n  `,\n  footer: css`\n    flex: none;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  header: css`\n    flex: none;\n    min-height: 48px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n  headerActions: css`\n    display: flex;\n    flex: none;\n    gap: 4px;\n    align-items: center;\n  `,\n  panel: css`\n    transform-origin: 100% 100%;\n\n    width: calc(100dvw - 32px);\n    max-height: calc(100dvh - 32px - var(--floating-panel-reserve-block-end, 0px));\n    border-radius: 12px;\n\n    box-shadow: ${cssVar.boxShadowSecondary}, var(--jinmi-ring);\n  `,\n  panelTop: css`\n    transform-origin: 100% 0;\n  `,\n  resizeHandle: css`\n    touch-action: none;\n    position: absolute;\n    z-index: 1;\n    background: transparent;\n\n    &::after {\n      content: '';\n\n      position: absolute;\n\n      border-radius: 999px;\n\n      opacity: 0;\n      background: ${cssVar.colorPrimary};\n\n      transition: opacity 120ms ease;\n    }\n\n    &:hover::after,\n    &:focus-visible::after {\n      opacity: 0.55;\n    }\n  `,\n  resizeHandleBottom: css`\n    cursor: ns-resize;\n    inset-block-end: -4px;\n    inset-inline: 16px;\n    height: 8px;\n\n    &::after {\n      inset-block-end: 3px;\n      inset-inline: 0;\n      height: 2px;\n    }\n  `,\n  resizeHandleBottomLeft: css`\n    cursor: nesw-resize;\n\n    inset-block-end: -5px;\n    inset-inline-start: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  resizeHandleBottomRight: css`\n    cursor: nwse-resize;\n\n    inset-block-end: -5px;\n    inset-inline-end: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  resizeHandleLeft: css`\n    cursor: ew-resize;\n    inset-block: 16px;\n    inset-inline-start: -4px;\n    width: 8px;\n\n    &::after {\n      inset-block: 0;\n      inset-inline-start: 3px;\n      width: 2px;\n    }\n  `,\n  resizeHandleRight: css`\n    cursor: ew-resize;\n    inset-block: 16px;\n    inset-inline-end: -4px;\n    width: 8px;\n\n    &::after {\n      inset-block: 0;\n      inset-inline-end: 3px;\n      width: 2px;\n    }\n  `,\n  resizeHandleTop: css`\n    cursor: ns-resize;\n    inset-block-start: -4px;\n    inset-inline: 16px;\n    height: 8px;\n\n    &::after {\n      inset-block-start: 3px;\n      inset-inline: 0;\n      height: 2px;\n    }\n  `,\n  resizeHandleTopLeft: css`\n    cursor: nwse-resize;\n\n    inset-block-start: -5px;\n    inset-inline-start: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  resizeHandleTopRight: css`\n    cursor: nesw-resize;\n\n    inset-block-start: -5px;\n    inset-inline-end: -5px;\n\n    width: 16px;\n    height: 16px;\n  `,\n  title: css`\n    overflow: hidden;\n    flex: 1;\n\n    min-width: 0;\n\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  `,\n  wrapper: css`\n    overflow: hidden;\n    transition:\n      padding-block-end ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE},\n      padding-block-start ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE},\n      padding-inline-end ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE},\n      padding-inline-start ${TOAST_DODGE_DURATION} ${TOAST_DODGE_EASE};\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;CAMT,OAAO,GAAG;;;;;;;;CAQV,SAAS,GAAG;;;;;;CAMZ,QAAQ,GAAG;;oCAEuB,OAAO,qBAAqB;;CAE9D,QAAQ,GAAG;;;kCAGqB,OAAO,qBAAqB;;CAE5D,eAAe,GAAG;;;;;;CAMlB,OAAO,GAAG;;;;;;;kBAOM,OAAO,mBAAmB;;CAE1C,UAAU,GAAG;;;CAGb,cAAc,GAAG;;;;;;;;;;;;;;oBAcC,OAAO,aAAa;;;;;;;;;;CAUtC,oBAAoB,GAAG;;;;;;;;;;;;CAYvB,wBAAwB,GAAG;;;;;;;;;CAS3B,yBAAyB,GAAG;;;;;;;;;CAS5B,kBAAkB,GAAG;;;;;;;;;;;;CAYrB,mBAAmB,GAAG;;;;;;;;;;;;CAYtB,iBAAiB,GAAG;;;;;;;;;;;;CAYpB,qBAAqB,GAAG;;;;;;;;;CASxB,sBAAsB,GAAG;;;;;;;;;CASzB,OAAO,GAAG;;;;;;;;;CASV,SAAS,GAAG;;;0BAGY,qBAAqB,GAAG,iBAAiB;4BACvC,qBAAqB,GAAG,iBAAiB;2BAC1C,qBAAqB,GAAG,iBAAiB;6BACvC,qBAAqB,GAAG,iBAAiB;;;;;;AAMtE,EAAE"}