@lobehub/ui 5.24.0 → 5.26.0

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingSheet.mjs","names":[],"sources":["../../../src/base-ui/FloatingSheet/FloatingSheet.tsx"],"sourcesContent":["import { cx } from 'antd-style';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { FloatingSheetHeader } from './FloatingSheetHeader';\nimport { clamp, dampenValue, resolveSize } from './helpers';\nimport { styles } from './style';\nimport type { FloatingSheetProps } from './type';\nimport { useSheetDrag } from './useSheetDrag';\nimport { useSnapPoints } from './useSnapPoints';\n\nconst ANIMATION_MS = 300;\n\nexport function FloatingSheet({\n  open: openProp,\n  onOpenChange,\n  defaultOpen = false,\n  snapPoints: snapPointsProp,\n  activeSnapPoint: activeSnapPointProp,\n  onSnapPointChange,\n  minHeight: minHeightProp = 200,\n  maxHeight: maxHeightProp = 0.8,\n  restingHeight: restingHeightProp,\n  mode = 'overlay',\n  variant = 'elevated',\n  width = '100%',\n  title,\n  headerActions,\n  dismissible = true,\n  closeThreshold = 0.25,\n  children,\n  className,\n}: FloatingSheetProps) {\n  const s = styles;\n\n  // Controlled / uncontrolled open state\n  const isControlled = openProp !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isOpen = isControlled ? openProp : internalOpen;\n\n  const setOpen = useCallback(\n    (value: boolean) => {\n      if (!isControlled) setInternalOpen(value);\n      onOpenChange?.(value);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  // Container measurement via ResizeObserver\n  const containerRef = useRef<HTMLElement | null>(null);\n  const sheetRef = useRef<HTMLDivElement>(null);\n  const [containerHeight, setContainerHeight] = useState(0);\n\n  useEffect(() => {\n    const parent = sheetRef.current?.parentElement;\n    if (!parent) return;\n    containerRef.current = parent;\n\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setContainerHeight(entry.contentRect.height);\n      }\n    });\n    observer.observe(parent);\n    setContainerHeight(parent.getBoundingClientRect().height);\n\n    return () => observer.disconnect();\n  }, []);\n\n  // Resolve min/max to px\n  const minHeightPx = useMemo(\n    () => resolveSize(minHeightProp, containerHeight),\n    [minHeightProp, containerHeight],\n  );\n  const maxHeightPx = useMemo(\n    () => resolveSize(maxHeightProp, containerHeight),\n    [maxHeightProp, containerHeight],\n  );\n  const restingHeightPx = useMemo(\n    () =>\n      restingHeightProp !== undefined\n        ? clamp(resolveSize(restingHeightProp, containerHeight), minHeightPx, maxHeightPx)\n        : minHeightPx,\n    [restingHeightProp, containerHeight, minHeightPx, maxHeightPx],\n  );\n\n  // Snap points\n  const hasSnapPoints = !!snapPointsProp && snapPointsProp.length > 0;\n  const { snapPointHeights, findActiveIndex, getSnapRelease } = useSnapPoints({\n    closeThreshold,\n    containerHeight,\n    containerRef,\n    maxHeightPx,\n    minHeightPx,\n    snapPoints: snapPointsProp ?? [],\n  });\n\n  // Compute the \"resting\" height for the current open + snap state\n  const restingHeight = useMemo(() => {\n    if (!containerHeight) return 0;\n    if (hasSnapPoints && activeSnapPointProp !== undefined) {\n      const resolved = resolveSize(activeSnapPointProp, containerHeight);\n      return clamp(resolved, minHeightPx, maxHeightPx);\n    }\n    if (hasSnapPoints && snapPointHeights.length > 0) {\n      return snapPointHeights[0];\n    }\n    return restingHeightPx;\n  }, [\n    containerHeight,\n    hasSnapPoints,\n    activeSnapPointProp,\n    snapPointHeights,\n    minHeightPx,\n    maxHeightPx,\n    restingHeightPx,\n  ]);\n\n  const [height, setHeight] = useState(isOpen ? restingHeight : 0);\n  const [isAnimating, setIsAnimating] = useState(false);\n  // Keeps sheet visible during close animation (height → 0)\n  const [isClosing, setIsClosing] = useState(false);\n  const heightBeforeDrag = useRef(0);\n  const prevOpenRef = useRef(isOpen);\n\n  // Handle open/close transitions\n  useEffect(() => {\n    const wasOpen = prevOpenRef.current;\n    prevOpenRef.current = isOpen;\n\n    if (isOpen && !wasOpen) {\n      // Opening: animate from 0 → resting height\n      setIsClosing(false);\n      setIsAnimating(true);\n      setHeight(restingHeight);\n      const timer = setTimeout(() => setIsAnimating(false), ANIMATION_MS);\n      return () => clearTimeout(timer);\n    }\n\n    if (!isOpen && wasOpen) {\n      // Closing: animate from current height → 0, then hide\n      setIsClosing(true);\n      setIsAnimating(true);\n      setHeight(0);\n      const timer = setTimeout(() => {\n        setIsAnimating(false);\n        setIsClosing(false);\n      }, ANIMATION_MS);\n      return () => clearTimeout(timer);\n    }\n  }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Sync height when resting height changes (container resize, snap point change)\n  useEffect(() => {\n    if (isOpen && !isDragging) {\n      setHeight(restingHeight);\n    }\n  }, [restingHeight]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Drag handlers\n  const onDragChange = useCallback(\n    (draggedDistance: number) => {\n      const newHeight = heightBeforeDrag.current + draggedDistance;\n\n      if (hasSnapPoints) {\n        const highest = snapPointHeights.at(-1) ?? maxHeightPx;\n        const lowest = snapPointHeights[0] ?? minHeightPx;\n\n        if (newHeight > highest) {\n          const overshoot = newHeight - highest;\n          setHeight(highest + dampenValue(overshoot));\n        } else if (newHeight < lowest) {\n          const undershoot = lowest - newHeight;\n          setHeight(Math.max(0, lowest - dampenValue(undershoot)));\n        } else {\n          setHeight(newHeight);\n        }\n      } else {\n        setHeight(clamp(newHeight, 0, maxHeightPx));\n      }\n    },\n    [hasSnapPoints, snapPointHeights, maxHeightPx, minHeightPx],\n  );\n\n  const onDragEnd = useCallback(\n    (draggedDistance: number, velocity: number) => {\n      setIsAnimating(true);\n      const currentHeight = heightBeforeDrag.current + draggedDistance;\n\n      if (hasSnapPoints) {\n        const activeIndex = findActiveIndex(heightBeforeDrag.current);\n        const result = getSnapRelease({\n          activeIndex,\n          currentHeight,\n          dismissible,\n          draggedDistance,\n          velocity,\n        });\n\n        if (result.type === 'dismiss') {\n          setIsClosing(true);\n          setHeight(0);\n          const timer = setTimeout(() => {\n            setOpen(false);\n            setIsAnimating(false);\n            setIsClosing(false);\n          }, ANIMATION_MS);\n          return () => clearTimeout(timer);\n        }\n\n        setHeight(result.height);\n        const originalSnapValue = snapPointsProp?.find(\n          (sp) =>\n            resolveSize(sp, containerHeight) === result.height ||\n            clamp(resolveSize(sp, containerHeight), minHeightPx, maxHeightPx) === result.height,\n        );\n        if (originalSnapValue !== undefined) {\n          onSnapPointChange?.(originalSnapValue);\n        }\n      } else {\n        if (dismissible && currentHeight < minHeightPx * closeThreshold) {\n          setIsClosing(true);\n          setHeight(0);\n          const timer = setTimeout(() => {\n            setOpen(false);\n            setIsAnimating(false);\n            setIsClosing(false);\n          }, ANIMATION_MS);\n          return () => clearTimeout(timer);\n        }\n        setHeight(clamp(currentHeight, minHeightPx, maxHeightPx));\n      }\n\n      setTimeout(() => setIsAnimating(false), ANIMATION_MS);\n    },\n    [\n      hasSnapPoints,\n      findActiveIndex,\n      getSnapRelease,\n      dismissible,\n      snapPointsProp,\n      containerHeight,\n      minHeightPx,\n      maxHeightPx,\n      closeThreshold,\n      setOpen,\n      onSnapPointChange,\n    ],\n  );\n\n  const { isDragging, handleProps } = useSheetDrag({\n    enabled: isOpen ?? false,\n    onDragChange,\n    onDragEnd,\n  });\n\n  // Record height at drag start\n  useEffect(() => {\n    if (isDragging) {\n      heightBeforeDrag.current = height;\n    }\n  }, [isDragging]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const isVisible = isOpen || isClosing || height > 0;\n  const shouldAnimate = !isDragging && isAnimating;\n  const inlineOverflowUp =\n    mode === 'inline' && isVisible ? Math.max(0, height - restingHeightPx) : 0;\n\n  return (\n    <div\n      data-floating-sheet=\"\"\n      data-state={isOpen ? 'open' : 'closed'}\n      ref={sheetRef}\n      className={cx(\n        s.root,\n        variant === 'embedded' ? s.embedded : s.elevated,\n        mode === 'overlay' ? s.overlay : s.inline,\n        mode === 'overlay' ? s.overlayRadius : s.inlineRadius,\n        shouldAnimate && s.transition,\n        !isVisible && s.hidden,\n        className,\n      )}\n      style={{\n        height: isVisible ? height : 0,\n        marginTop: inlineOverflowUp ? -inlineOverflowUp : undefined,\n        width,\n      }}\n    >\n      <FloatingSheetHeader\n        handleProps={handleProps}\n        headerActions={headerActions}\n        isDragging={isDragging}\n        title={title}\n      />\n      <div className={s.content}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"FloatingSheet.mjs","names":[],"sources":["../../../src/base-ui/FloatingSheet/FloatingSheet.tsx"],"sourcesContent":["import { cx } from 'antd-style';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport { FloatingSheetHeader } from './FloatingSheetHeader';\nimport { clamp, dampenValue, resolveSize } from './helpers';\nimport { styles } from './style';\nimport type { FloatingSheetProps } from './type';\nimport { useSheetDrag } from './useSheetDrag';\nimport { useSnapPoints } from './useSnapPoints';\n\nconst ANIMATION_MS = 300;\n\nexport function FloatingSheet({\n  open: openProp,\n  onOpenChange,\n  defaultOpen = false,\n  snapPoints: snapPointsProp,\n  activeSnapPoint: activeSnapPointProp,\n  onSnapPointChange,\n  minHeight: minHeightProp = 200,\n  maxHeight: maxHeightProp = 0.8,\n  restingHeight: restingHeightProp,\n  mode = 'overlay',\n  variant = 'elevated',\n  width = '100%',\n  title,\n  headerActions,\n  dismissible = true,\n  closeThreshold = 0.25,\n  children,\n  className,\n}: FloatingSheetProps) {\n  const s = styles;\n\n  // Controlled / uncontrolled open state\n  const isControlled = openProp !== undefined;\n  const [internalOpen, setInternalOpen] = useState(defaultOpen);\n  const isOpen = isControlled ? openProp : internalOpen;\n\n  const setOpen = useCallback(\n    (value: boolean) => {\n      if (!isControlled) setInternalOpen(value);\n      onOpenChange?.(value);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  // Container measurement via ResizeObserver\n  const containerRef = useRef<HTMLElement | null>(null);\n  const sheetRef = useRef<HTMLDivElement>(null);\n  const [containerHeight, setContainerHeight] = useState(0);\n\n  useEffect(() => {\n    const parent = sheetRef.current?.parentElement;\n    if (!parent) return;\n    containerRef.current = parent;\n\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        setContainerHeight(entry.contentRect.height);\n      }\n    });\n    observer.observe(parent);\n    setContainerHeight(parent.getBoundingClientRect().height);\n\n    return () => observer.disconnect();\n  }, []);\n\n  // Resolve min/max to px\n  const minHeightPx = useMemo(\n    () => resolveSize(minHeightProp, containerHeight),\n    [minHeightProp, containerHeight],\n  );\n  const maxHeightPx = useMemo(\n    () => resolveSize(maxHeightProp, containerHeight),\n    [maxHeightProp, containerHeight],\n  );\n  const restingHeightPx = useMemo(\n    () =>\n      restingHeightProp !== undefined\n        ? clamp(resolveSize(restingHeightProp, containerHeight), minHeightPx, maxHeightPx)\n        : minHeightPx,\n    [restingHeightProp, containerHeight, minHeightPx, maxHeightPx],\n  );\n\n  // Snap points\n  const hasSnapPoints = !!snapPointsProp && snapPointsProp.length > 0;\n  const { snapPointHeights, findActiveIndex, getSnapRelease } = useSnapPoints({\n    closeThreshold,\n    containerHeight,\n    containerRef,\n    maxHeightPx,\n    minHeightPx,\n    snapPoints: snapPointsProp ?? [],\n  });\n\n  // Compute the \"resting\" height for the current open + snap state\n  const restingHeight = useMemo(() => {\n    if (!containerHeight) return 0;\n    if (hasSnapPoints && activeSnapPointProp !== undefined) {\n      const resolved = resolveSize(activeSnapPointProp, containerHeight);\n      return clamp(resolved, minHeightPx, maxHeightPx);\n    }\n    if (hasSnapPoints && snapPointHeights.length > 0) {\n      return snapPointHeights[0];\n    }\n    return restingHeightPx;\n  }, [\n    containerHeight,\n    hasSnapPoints,\n    activeSnapPointProp,\n    snapPointHeights,\n    minHeightPx,\n    maxHeightPx,\n    restingHeightPx,\n  ]);\n\n  const [height, setHeight] = useState(isOpen ? restingHeight : 0);\n  const [isAnimating, setIsAnimating] = useState(false);\n  // Keeps sheet visible during close animation (height → 0)\n  const [isClosing, setIsClosing] = useState(false);\n  const heightBeforeDrag = useRef(0);\n  const prevOpenRef = useRef(isOpen);\n\n  // Handle open/close transitions\n  useEffect(() => {\n    const wasOpen = prevOpenRef.current;\n    prevOpenRef.current = isOpen;\n\n    if (isOpen && !wasOpen) {\n      // Opening: animate from 0 → resting height\n      setIsClosing(false);\n      setIsAnimating(true);\n      setHeight(restingHeight);\n      const timer = setTimeout(() => setIsAnimating(false), ANIMATION_MS);\n      return () => clearTimeout(timer);\n    }\n\n    if (!isOpen && wasOpen) {\n      // Closing: animate from current height → 0, then hide\n      setIsClosing(true);\n      setIsAnimating(true);\n      setHeight(0);\n      const timer = setTimeout(() => {\n        setIsAnimating(false);\n        setIsClosing(false);\n      }, ANIMATION_MS);\n      return () => clearTimeout(timer);\n    }\n  }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Sync height when resting height changes (container resize, snap point change)\n  useEffect(() => {\n    if (isOpen && !isDragging) {\n      setHeight(restingHeight);\n    }\n  }, [restingHeight]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Drag handlers\n  const onDragChange = useCallback(\n    (draggedDistance: number) => {\n      const newHeight = heightBeforeDrag.current + draggedDistance;\n\n      if (hasSnapPoints) {\n        const highest = snapPointHeights.at(-1) ?? maxHeightPx;\n        const lowest = snapPointHeights[0] ?? minHeightPx;\n\n        if (newHeight > highest) {\n          const overshoot = newHeight - highest;\n          setHeight(highest + dampenValue(overshoot));\n        } else if (newHeight < lowest) {\n          const undershoot = lowest - newHeight;\n          setHeight(Math.max(0, lowest - dampenValue(undershoot)));\n        } else {\n          setHeight(newHeight);\n        }\n      } else {\n        setHeight(clamp(newHeight, 0, maxHeightPx));\n      }\n    },\n    [hasSnapPoints, snapPointHeights, maxHeightPx, minHeightPx],\n  );\n\n  const onDragEnd = useCallback(\n    (draggedDistance: number, velocity: number) => {\n      setIsAnimating(true);\n      const currentHeight = heightBeforeDrag.current + draggedDistance;\n\n      if (hasSnapPoints) {\n        const activeIndex = findActiveIndex(heightBeforeDrag.current);\n        const result = getSnapRelease({\n          activeIndex,\n          currentHeight,\n          dismissible,\n          draggedDistance,\n          velocity,\n        });\n\n        if (result.type === 'dismiss') {\n          setIsClosing(true);\n          setHeight(0);\n          const timer = setTimeout(() => {\n            setOpen(false);\n            setIsAnimating(false);\n            setIsClosing(false);\n          }, ANIMATION_MS);\n          return () => clearTimeout(timer);\n        }\n\n        setHeight(result.height);\n        const originalSnapValue = snapPointsProp?.find(\n          (sp) =>\n            resolveSize(sp, containerHeight) === result.height ||\n            clamp(resolveSize(sp, containerHeight), minHeightPx, maxHeightPx) === result.height,\n        );\n        if (originalSnapValue !== undefined) {\n          onSnapPointChange?.(originalSnapValue);\n        }\n      } else {\n        if (dismissible && currentHeight < minHeightPx * closeThreshold) {\n          setIsClosing(true);\n          setHeight(0);\n          const timer = setTimeout(() => {\n            setOpen(false);\n            setIsAnimating(false);\n            setIsClosing(false);\n          }, ANIMATION_MS);\n          return () => clearTimeout(timer);\n        }\n        setHeight(clamp(currentHeight, minHeightPx, maxHeightPx));\n      }\n\n      setTimeout(() => setIsAnimating(false), ANIMATION_MS);\n    },\n    [\n      hasSnapPoints,\n      findActiveIndex,\n      getSnapRelease,\n      dismissible,\n      snapPointsProp,\n      containerHeight,\n      minHeightPx,\n      maxHeightPx,\n      closeThreshold,\n      setOpen,\n      onSnapPointChange,\n    ],\n  );\n\n  const { isDragging, handleProps } = useSheetDrag({\n    enabled: isOpen ?? false,\n    onDragChange,\n    onDragEnd,\n  });\n\n  // Record height at drag start\n  useEffect(() => {\n    if (isDragging) {\n      heightBeforeDrag.current = height;\n    }\n  }, [isDragging]); // eslint-disable-line react-hooks/exhaustive-deps\n\n  const isVisible = isOpen || isClosing || height > 0;\n  const shouldAnimate = !isDragging && isAnimating;\n  const inlineOverflowUp =\n    mode === 'inline' && isVisible ? Math.max(0, height - restingHeightPx) : 0;\n\n  return (\n    <div\n      data-floating-sheet=\"\"\n      data-state={isOpen ? 'open' : 'closed'}\n      ref={sheetRef}\n      className={cx(\n        s.root,\n        variant === 'embedded' ? s.embedded : s.elevated,\n        mode === 'overlay' ? s.overlay : s.inline,\n        mode === 'overlay' ? s.overlayRadius : s.inlineRadius,\n        shouldAnimate && s.transition,\n        !isVisible && s.hidden,\n        className,\n      )}\n      style={{\n        height: isVisible ? height : 0,\n        marginTop: inlineOverflowUp ? -inlineOverflowUp : undefined,\n        width,\n      }}\n    >\n      <FloatingSheetHeader\n        handleProps={handleProps}\n        headerActions={headerActions}\n        isDragging={isDragging}\n        title={title}\n      />\n      <div className={s.content}>{children}</div>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/es/base-ui/Input/style.d.mts

@@ -24,7 +24,7 @@ declare const styles: {
 declare const rootVariants: (props?: ({
   shadow?: boolean | null | undefined;
   size?: "large" | "middle" | "small" | null | undefined;
-  variant?: "outlined" | "borderless" | "filled" | null | undefined;
+  variant?: "filled" | "borderless" | "outlined" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion
 export { rootVariants, styles };

package/es/base-ui/Modal/atoms.mjs

@@ -57,11 +57,12 @@ const AnimatedModalRoot = ({ open, children, onExitComplete: onExitCompleteProp,
 };
 const NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }) => {
 	const { zIndex, ref: popupRef } = useLayerZIndex("modal", explicitZIndex);
+	const layer = useMemo(() => ({
+		popupRef,
+		zIndex
+	}), [zIndex, popupRef]);
 	return /* @__PURE__ */ jsx(ModalLayerProvider, {
-		value: useMemo(() => ({
-			popupRef,
-			zIndex
-		}), [zIndex, popupRef]),
+		value: layer,
 		children: /* @__PURE__ */ jsx(Dialog.Root, {
 			modal: true,
 			...rest,
@@ -197,8 +198,9 @@ const ModalTrigger = ({ children, className, nativeButton, ref: refProp, ...rest
 			const { type, ...restProps } = props;
 			return restProps;
 		})();
+		const mergedProps = mergeProps(children.props, resolvedProps);
 		return cloneElement(children, {
-			...mergeProps(children.props, resolvedProps),
+			...mergedProps,
 			ref: mergeRefs([
 				children.ref,
 				props.ref,

package/es/base-ui/Modal/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n  return cx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n  onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n  const [isPresent, setIsPresent] = useState(!!open);\n\n  useEffect(() => {\n    if (open) setIsPresent(true);\n  }, [open]);\n\n  const handleExitComplete = useCallback(() => {\n    setIsPresent(false);\n    onExitCompleteProp?.();\n  }, [onExitCompleteProp]);\n\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  if (!isPresent) return null;\n\n  return (\n    <ModalOpenContext value={open}>\n      <ModalActionsContext value={actions}>\n        <ModalLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </ModalLayerProvider>\n      </ModalActionsContext>\n    </ModalOpenContext>\n  );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n  return (\n    <ModalLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </ModalLayerProvider>\n  );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n  <Dialog.Viewport\n    {...rest}\n    className={mergeStateClassName(styles.viewport, className as any) as any}\n  />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n  const open = useModalOpen();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n  if (open !== null) {\n    return (\n      <Dialog.Backdrop\n        {...rest}\n        className={cx(styles.backdrop, className as string)}\n        style={{ ...layerStyle, ...style, transition: 'none' }}\n        render={\n          <Motion.div\n            animate={{ opacity: open ? 1 : 0 }}\n            initial={{ opacity: 0 }}\n            transition={backdropTransition}\n          />\n        }\n      />\n    );\n  }\n\n  return (\n    <Dialog.Backdrop\n      {...rest}\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\n      style={{ ...layerStyle, ...style }}\n    />\n  );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  popupStyle?: React.CSSProperties;\n  width?: number | string;\n};\nexport const ModalPopup = ({\n  className,\n  children,\n  width,\n  style,\n  motionProps,\n  panelClassName,\n  popupStyle,\n  ref: forwardedRef,\n  ...rest\n}: ModalPopupProps) => {\n  const open = useModalOpen();\n  const actions = useModalActions();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  if (open !== null && actions) {\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={cx(styles.popup, className as string)}\n        ref={composedRef as any}\n        style={{ ...popupZIndexStyle, ...popupStyle }}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...modalMotionConfig}\n              {...motionProps}\n              className={cx(styles.popupInner, panelClassName)}\n              key=\"modal-popup-panel\"\n              style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName(styles.popup, className as any) as any}\n      ref={composedRef as any}\n      style={{ ...popupZIndexStyle, ...popupStyle }}\n    >\n      <div\n        className={cx(styles.popupInner, panelClassName)}\n        style={{ maxWidth: width ?? undefined, ...style }}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeader = ({ className, ...rest }: ModalHeaderProps) => (\n  <div {...rest} className={cx(styles.header, className)} />\n);\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitle = ({ className, ...rest }: ModalTitleProps) => (\n  <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\n);\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContent = ({ className, ...rest }: ModalContentProps) => (\n  <div {...rest} className={cx(styles.content, className)} />\n);\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooter = ({ className, ...rest }: ModalFooterProps) => (\n  <div {...rest} className={cx(styles.footer, className)} />\n);\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalClose = ({ className, children, ...rest }: ModalCloseProps) => (\n  <Dialog.Close {...rest} className={mergeStateClassName(styles.close, className as any) as any}>\n    {children ?? <X size={16} />}\n  </Dialog.Close>\n);\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: ModalTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props as any;\n      return restProps;\n    })();\n\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\n    return cloneElement(children as any, {\n      ...mergedProps,\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <Dialog.Trigger\n        {...rest}\n        className={className}\n        nativeButton={resolvedNativeButton}\n        render={renderer as any}\n      />\n    );\n  }\n\n  return (\n    <Dialog.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Dialog.Trigger>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA6BA,MAAM,uBACJ,MACA,cACG;CACH,IAAI,OAAO,cAAc,YAAY,QAAQ,UAAkB,GAAG,MAAM,UAAU,KAAK,CAAC;CACxF,OAAO,GAAG,MAAM,SAAS;AAC3B;AAKA,MAAM,mBAAmB,cAA8B,IAAI;AAM3D,MAAM,sBAAsB,cAA4C,IAAI;AAE5E,MAAa,qBAAqB,IAAI,gBAAgB;AACtD,MAAa,wBAAwB,IAAI,mBAAmB;AAQ5D,MAAM,qBAAqB,EACzB,MACA,UACA,gBAAgB,oBAChB,QAAQ,gBACR,GAAG,WACmD;CACtD,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC,CAAC,IAAI;CAEjD,gBAAgB;EACd,IAAI,MAAM,aAAa,IAAI;CAC7B,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,qBAAqB,kBAAkB;EAC3C,aAAa,KAAK;EAClB,qBAAqB;CACvB,GAAG,CAAC,kBAAkB,CAAC;CAEvB,MAAM,UAAU,eAAe,EAAE,gBAAgB,mBAAmB,IAAI,CAAC,kBAAkB,CAAC;CAE5F,MAAM,EAAE,QAAQ,KAAK,aAAa,eAA+B,SAAS,cAAc;CACxF,MAAM,QAAQ,eACL;EAAY;EAAgD;CAAO,IAC1E,CAAC,QAAQ,QAAQ,CACnB;CAEA,IAAI,CAAC,WAAW,OAAO;CAEvB,OACE,oBAAC,kBAAD;EAAkB,OAAO;EACvB,UAAA,oBAAC,qBAAD;GAAqB,OAAO;GAC1B,UAAA,oBAAC,oBAAD;IAAoB,OAAO;IACzB,UAAA,oBAAC,OAAO,MAAR;KAAa,OAAA;KAAM,MAAA;KAAK,GAAI;KACzB;IACU,CAAA;GACK,CAAA;EACD,CAAA;CACL,CAAA;AAEtB;AAEA,MAAM,wBAAwB,EAAE,QAAQ,gBAAgB,UAAU,GAAG,WAA2B;CAC9F,MAAM,EAAE,QAAQ,KAAK,aAAa,eAA+B,SAAS,cAAc;CAKxF,OACE,oBAAC,oBAAD;EAAoB,OALR,eACL;GAAY;GAAgD;EAAO,IAC1E,CAAC,QAAQ,QAAQ,CAGc;EAC7B,UAAA,oBAAC,OAAO,MAAR;GAAa,OAAA;GAAM,GAAI;GACpB;EACU,CAAA;CACK,CAAA;AAExB;AAEA,MAAa,aAAa,EAAE,MAAM,gBAAgB,GAAG,WAA2B;CAC9E,IAAI,SAAS,KAAA,GACX,OAAO,oBAAC,mBAAD;EAAyB;EAAsB;EAAgB,GAAI;CAAO,CAAA;CAEnF,OAAO,oBAAC,sBAAD,EAAsB,GAAI,KAAO,CAAA;AAC1C;AAMA,MAAa,eAAe,EAAE,WAAW,GAAG,WAA6B;CACvE,MAAM,aAAa,cAAc;CACjC,OAAO,oBAAC,OAAO,QAAR;EAAe,WAAW,aAAa,cAAc,KAAA;EAAW,GAAI;CAAO,CAAA;AACpF;AAIA,MAAa,iBAAiB,EAAE,WAAW,GAAG,WAC5C,oBAAC,OAAO,UAAR;CACE,GAAI;CACJ,WAAW,oBAAoB,OAAO,UAAU,SAAgB;AACjE,CAAA;AAKH,MAAa,iBAAiB,EAAE,WAAW,OAAO,GAAG,WAA+B;CAClF,MAAM,OAAO,aAAa;CAC1B,MAAM,QAAQ,cAAc;CAC5B,MAAM,SAAS,mBAAmB;CAClC,MAAM,aAAa,OAAO,WAAW,KAAA,IAAY,EAAE,QAAQ,MAAM,OAAO,IAAI,KAAA;CAE5E,IAAI,SAAS,MACX,OACE,oBAAC,OAAO,UAAR;EACE,GAAI;EACJ,WAAW,GAAG,OAAO,UAAU,SAAmB;EAClD,OAAO;GAAE,GAAG;GAAY,GAAG;GAAO,YAAY;EAAO;EACrD,QACE,oBAAC,OAAO,KAAR;GACE,SAAS,EAAE,SAAS,OAAO,IAAI,EAAE;GACjC,SAAS,EAAE,SAAS,EAAE;GACtB,YAAY;EACb,CAAA;CAEJ,CAAA;CAIL,OACE,oBAAC,OAAO,UAAR;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,UAAU,SAAgB;EAChE,OAAO;GAAE,GAAG;GAAY,GAAG;EAAM;CAClC,CAAA;AAEL;AASA,MAAa,cAAc,EACzB,WACA,UACA,OACA,OACA,aACA,gBACA,YACA,KAAK,cACL,GAAG,WACkB;CACrB,MAAM,OAAO,aAAa;CAC1B,MAAM,UAAU,gBAAgB;CAChC,MAAM,QAAQ,cAAc;CAC5B,MAAM,SAAS,mBAAmB;CAClC,MAAM,mBAAmB,OAAO,WAAW,KAAA,IAAY,EAAE,QAAQ,MAAM,SAAS,EAAE,IAAI,KAAA;CACtF,MAAM,cAAc,aAAa,CAAC,cAAc,OAAO,QAAQ,CAAC;CAEhE,IAAI,SAAS,QAAQ,SACnB,OACE,oBAAC,OAAO,OAAR;EACE,GAAI;EACJ,WAAW,GAAG,OAAO,OAAO,SAAmB;EAC/C,KAAK;EACL,OAAO;GAAE,GAAG;GAAkB,GAAG;EAAW;EAE5C,UAAA,oBAAC,iBAAD;GAAiB,gBAAgB,QAAQ;GACtC,UAAA,OACC,8BAAC,OAAO,KAAR;IACE,GAAI;IACJ,GAAI;IACJ,WAAW,GAAG,OAAO,YAAY,cAAc;IAC/C,KAAI;IACJ,OAAO;KAAE,UAAU,SAAS,KAAA;KAAW,YAAY;KAAQ,GAAG;IAAM;GAG1D,GADT,QACS,IACV;EACW,CAAA;CACL,CAAA;CAIlB,OACE,oBAAC,OAAO,OAAR;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,OAAO,SAAgB;EAC7D,KAAK;EACL,OAAO;GAAE,GAAG;GAAkB,GAAG;EAAW;EAE5C,UAAA,oBAAC,OAAD;GACE,WAAW,GAAG,OAAO,YAAY,cAAc;GAC/C,OAAO;IAAE,UAAU,SAAS,KAAA;IAAW,GAAG;GAAM;GAE/C;EACE,CAAA;CACO,CAAA;AAElB;AAMA,MAAa,eAAe,EAAE,WAAW,GAAG,WAC1C,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,OAAO,QAAQ,SAAS;AAAI,CAAA;AAK3D,MAAa,cAAc,EAAE,WAAW,GAAG,WACzC,oBAAC,OAAO,OAAR;CAAc,GAAI;CAAM,WAAW,oBAAoB,OAAO,OAAO,SAAgB;AAAW,CAAA;AAKlG,MAAa,mBAAoD,OAAO;AAMxE,MAAa,gBAAgB,EAAE,WAAW,GAAG,WAC3C,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,OAAO,SAAS,SAAS;AAAI,CAAA;AAO5D,MAAa,eAAe,EAAE,WAAW,GAAG,WAC1C,oBAAC,OAAD;CAAK,GAAI;CAAM,WAAW,GAAG,OAAO,QAAQ,SAAS;AAAI,CAAA;AAK3D,MAAa,cAAc,EAAE,WAAW,UAAU,GAAG,WACnD,oBAAC,OAAO,OAAR;CAAc,GAAI;CAAM,WAAW,oBAAoB,OAAO,OAAO,SAAgB;CAClF,UAAA,YAAY,oBAAC,GAAD,EAAG,MAAM,GAAK,CAAA;AACf,CAAA;AAYhB,MAAa,gBAAgB,EAC3B,UACA,WACA,cACA,KAAK,SACL,GAAG,WACoB;CACvB,MAAM,EAAE,8BAA8B,yBAAyB,gBAAgB;EAC7E;EACA;CACF,CAAC;CAED,MAAM,YAAY,UAAe;EAC/B,MAAM,uBAAuB;GAC3B,IAAI,8BAA8B,OAAO;GAEzC,MAAM,EAAE,MAAM,GAAG,cAAc;GAC/B,OAAO;EACT,EAAA,CAAG;EAGH,OAAO,aAAa,UAAiB;GACnC,GAFkB,WAAY,SAAiB,OAAO,aAEzC;GACb,KAAK,UAAU;IAAE,SAAiB;IAAM,MAAc;IAAK;GAAO,CAAC;EACrE,CAAC;CACH;CAEA,IAAI,eAAe,QAAQ,GACzB,OACE,oBAAC,OAAO,SAAR;EACE,GAAI;EACO;EACX,cAAc;EACd,QAAQ;CACT,CAAA;CAIL,OACE,oBAAC,OAAO,SAAR;EACE,GAAI;EACO;EACX,cAAc;EACd,KAAK;EAEJ;CACa,CAAA;AAEpB"}
+{"version":3,"file":"atoms.mjs","names":[],"sources":["../../../src/base-ui/Modal/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Dialog } from '@base-ui/react/dialog';\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { AnimatePresence } from 'motion/react';\nimport type React from 'react';\nimport {\n  cloneElement,\n  createContext,\n  isValidElement,\n  use,\n  useCallback,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useMotionComponent } from '@/MotionProvider';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { backdropTransition, modalMotionConfig } from './constants';\nimport { ModalLayerProvider, useModalLayer } from './ModalLayerContext';\nimport { styles } from './style';\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n  return cx(base, className);\n};\n\n// --- Animation Contexts (granular to minimize re-renders) ---\n\n// State: open boolean, null = non-animated mode\nconst ModalOpenContext = createContext<boolean | null>(null);\n\n// Actions: stable callbacks, null = non-animated mode\ninterface ModalAnimationActions {\n  onExitComplete: () => void;\n}\nconst ModalActionsContext = createContext<ModalAnimationActions | null>(null);\n\nexport const useModalOpen = () => use(ModalOpenContext);\nexport const useModalActions = () => use(ModalActionsContext);\n\n// --- Root ---\nexport type ModalRootProps = Dialog.Root.Props & {\n  onExitComplete?: () => void;\n  zIndex?: number;\n};\n\nconst AnimatedModalRoot = ({\n  open,\n  children,\n  onExitComplete: onExitCompleteProp,\n  zIndex: explicitZIndex,\n  ...rest\n}: Omit<ModalRootProps, 'open'> & { open: boolean }) => {\n  const [isPresent, setIsPresent] = useState(!!open);\n\n  useEffect(() => {\n    if (open) setIsPresent(true);\n  }, [open]);\n\n  const handleExitComplete = useCallback(() => {\n    setIsPresent(false);\n    onExitCompleteProp?.();\n  }, [onExitCompleteProp]);\n\n  const actions = useMemo(() => ({ onExitComplete: handleExitComplete }), [handleExitComplete]);\n\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n\n  if (!isPresent) return null;\n\n  return (\n    <ModalOpenContext value={open}>\n      <ModalActionsContext value={actions}>\n        <ModalLayerProvider value={layer}>\n          <Dialog.Root modal open {...rest}>\n            {children}\n          </Dialog.Root>\n        </ModalLayerProvider>\n      </ModalActionsContext>\n    </ModalOpenContext>\n  );\n};\n\nconst NonAnimatedModalRoot = ({ zIndex: explicitZIndex, children, ...rest }: ModalRootProps) => {\n  const { zIndex, ref: popupRef } = useLayerZIndex<HTMLDivElement>('modal', explicitZIndex);\n  const layer = useMemo(\n    () => ({ popupRef: popupRef as (node: HTMLElement | null) => void, zIndex }),\n    [zIndex, popupRef],\n  );\n  return (\n    <ModalLayerProvider value={layer}>\n      <Dialog.Root modal {...rest}>\n        {children}\n      </Dialog.Root>\n    </ModalLayerProvider>\n  );\n};\n\nexport const ModalRoot = ({ open, onExitComplete, ...rest }: ModalRootProps) => {\n  if (open !== undefined) {\n    return <AnimatedModalRoot open={open} onExitComplete={onExitComplete} {...rest} />;\n  }\n  return <NonAnimatedModalRoot {...rest} />;\n};\n\n// --- Portal ---\nexport type ModalPortalProps = React.ComponentProps<typeof Dialog.Portal> & {\n  container?: HTMLElement | null;\n};\nexport const ModalPortal = ({ container, ...rest }: ModalPortalProps) => {\n  const appElement = useAppElement();\n  return <Dialog.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\n// --- Viewport ---\nexport type ModalViewportProps = React.ComponentProps<typeof Dialog.Viewport>;\nexport const ModalViewport = ({ className, ...rest }: ModalViewportProps) => (\n  <Dialog.Viewport\n    {...rest}\n    className={mergeStateClassName(styles.viewport, className as any) as any}\n  />\n);\n\n// --- Backdrop ---\nexport type ModalBackdropProps = React.ComponentProps<typeof Dialog.Backdrop>;\nexport const ModalBackdrop = ({ className, style, ...rest }: ModalBackdropProps) => {\n  const open = useModalOpen();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const layerStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex } : undefined;\n\n  if (open !== null) {\n    return (\n      <Dialog.Backdrop\n        {...rest}\n        className={cx(styles.backdrop, className as string)}\n        style={{ ...layerStyle, ...style, transition: 'none' }}\n        render={\n          <Motion.div\n            animate={{ opacity: open ? 1 : 0 }}\n            initial={{ opacity: 0 }}\n            transition={backdropTransition}\n          />\n        }\n      />\n    );\n  }\n\n  return (\n    <Dialog.Backdrop\n      {...rest}\n      className={mergeStateClassName(styles.backdrop, className as any) as any}\n      style={{ ...layerStyle, ...style }}\n    />\n  );\n};\n\n// --- Popup ---\nexport type ModalPopupProps = React.ComponentProps<typeof Dialog.Popup> & {\n  motionProps?: Record<string, any>;\n  panelClassName?: string;\n  popupStyle?: React.CSSProperties;\n  width?: number | string;\n};\nexport const ModalPopup = ({\n  className,\n  children,\n  width,\n  style,\n  motionProps,\n  panelClassName,\n  popupStyle,\n  ref: forwardedRef,\n  ...rest\n}: ModalPopupProps) => {\n  const open = useModalOpen();\n  const actions = useModalActions();\n  const layer = useModalLayer();\n  const Motion = useMotionComponent();\n  const popupZIndexStyle = layer?.zIndex !== undefined ? { zIndex: layer.zIndex + 1 } : undefined;\n  const composedRef = useMergeRefs([forwardedRef, layer?.popupRef]);\n\n  if (open !== null && actions) {\n    return (\n      <Dialog.Popup\n        {...rest}\n        className={cx(styles.popup, className as string)}\n        ref={composedRef as any}\n        style={{ ...popupZIndexStyle, ...popupStyle }}\n      >\n        <AnimatePresence onExitComplete={actions.onExitComplete}>\n          {open ? (\n            <Motion.div\n              {...modalMotionConfig}\n              {...motionProps}\n              className={cx(styles.popupInner, panelClassName)}\n              key=\"modal-popup-panel\"\n              style={{ maxWidth: width ?? undefined, transition: 'none', ...style }}\n            >\n              {children}\n            </Motion.div>\n          ) : null}\n        </AnimatePresence>\n      </Dialog.Popup>\n    );\n  }\n\n  return (\n    <Dialog.Popup\n      {...rest}\n      className={mergeStateClassName(styles.popup, className as any) as any}\n      ref={composedRef as any}\n      style={{ ...popupZIndexStyle, ...popupStyle }}\n    >\n      <div\n        className={cx(styles.popupInner, panelClassName)}\n        style={{ maxWidth: width ?? undefined, ...style }}\n      >\n        {children}\n      </div>\n    </Dialog.Popup>\n  );\n};\n\n// --- Header ---\nexport type ModalHeaderProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalHeader = ({ className, ...rest }: ModalHeaderProps) => (\n  <div {...rest} className={cx(styles.header, className)} />\n);\n\n// --- Title ---\nexport type ModalTitleProps = React.ComponentProps<typeof Dialog.Title>;\nexport const ModalTitle = ({ className, ...rest }: ModalTitleProps) => (\n  <Dialog.Title {...rest} className={mergeStateClassName(styles.title, className as any) as any} />\n);\n\n// --- Description ---\nexport type ModalDescriptionProps = React.ComponentProps<typeof Dialog.Description>;\nexport const ModalDescription: React.FC<ModalDescriptionProps> = Dialog.Description;\n\n// --- Content ---\nexport type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalContent = ({ className, ...rest }: ModalContentProps) => (\n  <div {...rest} className={cx(styles.content, className)} />\n);\n\n// --- Footer ---\nexport type ModalFooterProps = React.HTMLAttributes<HTMLDivElement> & {\n  ref?: React.Ref<HTMLDivElement>;\n};\nexport const ModalFooter = ({ className, ...rest }: ModalFooterProps) => (\n  <div {...rest} className={cx(styles.footer, className)} />\n);\n\n// --- Close ---\nexport type ModalCloseProps = React.ComponentProps<typeof Dialog.Close>;\nexport const ModalClose = ({ className, children, ...rest }: ModalCloseProps) => (\n  <Dialog.Close {...rest} className={mergeStateClassName(styles.close, className as any) as any}>\n    {children ?? <X size={16} />}\n  </Dialog.Close>\n);\n\n// --- Trigger ---\nexport type ModalTriggerProps = Omit<\n  React.ComponentPropsWithRef<typeof Dialog.Trigger>,\n  'children' | 'render'\n> & {\n  children?: React.ReactNode;\n  nativeButton?: boolean;\n};\n\nexport const ModalTrigger = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: ModalTriggerProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  const renderer = (props: any) => {\n    const resolvedProps = (() => {\n      if (isNativeButtonTriggerElement) return props as any;\n      // eslint-disable-next-line unused-imports/no-unused-vars\n      const { type, ...restProps } = props as any;\n      return restProps;\n    })();\n\n    const mergedProps = mergeProps((children as any).props, resolvedProps);\n    return cloneElement(children as any, {\n      ...mergedProps,\n      ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n    });\n  };\n\n  if (isValidElement(children)) {\n    return (\n      <Dialog.Trigger\n        {...rest}\n        className={className}\n        nativeButton={resolvedNativeButton}\n        render={renderer as any}\n      />\n    );\n  }\n\n  return (\n    <Dialog.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Dialog.Trigger>\n  );\n};\n"],"mappings":"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"}

package/es/base-ui/Modal/imperative.mjs

@@ -11,7 +11,8 @@ import { createPortal } from "react-dom";
 //#region src/base-ui/Modal/imperative.tsx
 const ModalPortalWrapper = ({ children, root }) => {
 	const appElement = useAppElement();
-	return createPortal(children, root ?? appElement ?? document.body);
+	const container = root ?? appElement ?? document.body;
+	return createPortal(children, container);
 };
 const ConfirmBody = ({ config }) => {
 	const { close } = useModalContext();

package/es/base-ui/Modal/imperative.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"imperative.mjs","names":[],"sources":["../../../src/base-ui/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useState, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\n\nimport { Button } from '../Button';\nimport {\n  ModalBackdrop,\n  ModalClose,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalPopup,\n  ModalPortal,\n  ModalRoot,\n  ModalTitle,\n} from './atoms';\nimport { ModalContext, useModalContext } from './context';\nimport type { ImperativeModalProps, ModalConfirmConfig, ModalInstance } from './type';\n\n// --- Shared types ---\n\ntype ModalStackEntry = {\n  id: string;\n  props: ImperativeModalProps;\n};\n\n// --- Shared components (stack-independent) ---\n\nconst ModalPortalWrapper = ({\n  children,\n  root,\n}: {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | null;\n}) => {\n  const appElement = useAppElement();\n  const container = root ?? appElement ?? document.body;\n  return createPortal(children, container);\n};\n\nconst ConfirmBody = ({ config }: { config: ModalConfirmConfig }) => {\n  const { close } = useModalContext();\n  const [loading, setLoading] = useState(false);\n\n  const { cancelText = 'Cancel', content, okButtonProps, okText = 'OK', onCancel, onOk } = config;\n\n  const handleCancel = useCallback(() => {\n    close();\n    onCancel?.();\n  }, [close, onCancel]);\n\n  const handleOk = useCallback(async () => {\n    if (onOk) {\n      try {\n        const result = onOk();\n        if (result && typeof (result as any).then === 'function') {\n          setLoading(true);\n          await result;\n          setLoading(false);\n        }\n      } catch {\n        setLoading(false);\n        return;\n      }\n    }\n    close();\n  }, [close, onOk]);\n\n  return (\n    <>\n      {content && <div style={{ padding: '12px 16px' }}>{content}</div>}\n      <ModalFooter>\n        <Button onClick={handleCancel}>{cancelText}</Button>\n        <Button loading={loading} type=\"primary\" {...okButtonProps} onClick={handleOk}>\n          {okText}\n        </Button>\n      </ModalFooter>\n    </>\n  );\n};\nConfirmBody.displayName = 'ConfirmBody';\n\n// --- Factory ---\n\nexport interface ModalHostProps {\n  root?: HTMLElement | ShadowRoot | null;\n}\n\nexport interface ModalSystem {\n  confirmModal: (config: ModalConfirmConfig) => { close: () => void; destroy: () => void };\n  createModal: (props: ImperativeModalProps) => ModalInstance;\n  ModalHost: React.FC<ModalHostProps>;\n}\n\nlet systemSeed = 0;\n\nexport function createModalSystem(): ModalSystem {\n  const systemId = systemSeed++;\n  const singletonName = systemId === 0 ? 'BaseModalHost' : `BaseModalHost-${systemId}`;\n\n  // --- Stack state (isolated per system) ---\n  let modalStack: ModalStackEntry[] = [];\n  let modalSeed = 0;\n  const listeners = new Set<() => void>();\n\n  const notify = () => listeners.forEach((l) => l());\n  const subscribe = (l: () => void) => {\n    listeners.add(l);\n    return () => listeners.delete(l);\n  };\n  const EMPTY: ModalStackEntry[] = [];\n  const getSnapshot = () => modalStack;\n  const getServerSnapshot = () => EMPTY;\n\n  // --- Stack operations ---\n\n  const updateModal = (id: string, next: Partial<ImperativeModalProps>) => {\n    let changed = false;\n    modalStack = modalStack.map((item) => {\n      if (item.id !== id) return item;\n      changed = true;\n      return { ...item, props: { ...item.props, ...next } };\n    });\n    if (changed) notify();\n  };\n\n  const closeModal = (id: string) => {\n    updateModal(id, { open: false });\n  };\n\n  const destroyModal = (id: string) => {\n    const next = modalStack.filter((item) => item.id !== id);\n    if (next.length === modalStack.length) return;\n    modalStack = next;\n    notify();\n  };\n\n  // --- Stack Item (captures operations via closure) ---\n\n  const StackItem = memo(({ entry }: { entry: ModalStackEntry }) => {\n    const { id, props } = entry;\n    const {\n      children,\n      classNames,\n      content,\n      footer,\n      maskClosable,\n      onOpenChange,\n      onOpenChangeComplete,\n      open,\n      styles: semanticStyles,\n      title,\n      width,\n    } = props;\n\n    const isOpen = open ?? true;\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, eventDetails?: { reason: string }) => {\n        if (!nextOpen && maskClosable === false && eventDetails?.reason === 'outside-press') return;\n        if (!nextOpen) closeModal(id);\n        onOpenChange?.(nextOpen);\n      },\n      [id, maskClosable, onOpenChange],\n    );\n\n    const handleExitComplete = useCallback(() => {\n      onOpenChangeComplete?.(false);\n      destroyModal(id);\n    }, [id, onOpenChangeComplete]);\n\n    const close = useCallback(() => closeModal(id), [id]);\n    const setCanDismissByClickOutside = useCallback(\n      (value: boolean) => updateModal(id, { maskClosable: value }),\n      [id],\n    );\n\n    const showTitle = title !== undefined && title !== false && title !== null;\n\n    return (\n      <ModalContext value={{ close, setCanDismissByClickOutside }}>\n        <ModalRoot\n          open={isOpen}\n          onExitComplete={handleExitComplete}\n          onOpenChange={handleOpenChange}\n        >\n          <ModalPortal>\n            <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n            <ModalPopup\n              className={classNames?.popup}\n              popupStyle={semanticStyles?.popup}\n              width={width}\n            >\n              {showTitle && (\n                <ModalHeader className={classNames?.header} style={semanticStyles?.header}>\n                  <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n                    {title}\n                  </ModalTitle>\n                  <ModalClose className={classNames?.close} style={semanticStyles?.close} />\n                </ModalHeader>\n              )}\n              <ModalContent className={classNames?.content} style={semanticStyles?.content}>\n                {content ?? children}\n              </ModalContent>\n              {footer}\n            </ModalPopup>\n          </ModalPortal>\n        </ModalRoot>\n      </ModalContext>\n    );\n  });\n  StackItem.displayName = 'ModalStackItem';\n\n  const StackRenderer = memo(({ stack }: { stack: ModalStackEntry[] }) => {\n    const isClient = useIsClient();\n    if (!isClient) return null;\n    return stack.map((entry) => <StackItem entry={entry} key={entry.id} />);\n  });\n  StackRenderer.displayName = 'ModalStackRenderer';\n\n  // --- ModalHost ---\n\n  const Host = ({ root }: ModalHostProps) => {\n    const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n    const isClient = useIsClient();\n\n    useEffect(() => {\n      if (!isClient) return;\n      const scope = root ?? document.body;\n      return registerDevSingleton(singletonName, scope);\n    }, [isClient, root]);\n\n    if (!isClient) return null;\n    if (stack.length === 0) return null;\n\n    return (\n      <ModalPortalWrapper root={root}>\n        <StackRenderer stack={stack} />\n      </ModalPortalWrapper>\n    );\n  };\n\n  // --- createModal ---\n\n  const create = (props: ImperativeModalProps): ModalInstance => {\n    const id = `base-modal-${Date.now()}-${modalSeed++}`;\n    modalStack = [...modalStack, { id, props: { ...props, open: props.open ?? true } }];\n    notify();\n\n    return {\n      close: () => closeModal(id),\n      destroy: () => destroyModal(id),\n      setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }),\n      update: (nextProps) => updateModal(id, nextProps),\n    };\n  };\n\n  // --- confirmModal ---\n\n  const confirm = (config: ModalConfirmConfig) => {\n    const instance = create({\n      content: <ConfirmBody config={config} />,\n      styles: { content: { padding: 0 } },\n      title: config.title,\n      width: 420,\n    });\n\n    return {\n      close: instance.close,\n      destroy: instance.destroy,\n    };\n  };\n\n  return { ModalHost: Host, confirmModal: confirm, createModal: create };\n}\n\n// --- Default global instance (backward compatible) ---\n\nconst defaultSystem = createModalSystem();\nexport const ModalHost = defaultSystem.ModalHost;\nexport const createModal = defaultSystem.createModal;\nexport const confirmModal = defaultSystem.confirmModal;\n"],"mappings":"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"}
+{"version":3,"file":"imperative.mjs","names":[],"sources":["../../../src/base-ui/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useState, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\n\nimport { Button } from '../Button';\nimport {\n  ModalBackdrop,\n  ModalClose,\n  ModalContent,\n  ModalFooter,\n  ModalHeader,\n  ModalPopup,\n  ModalPortal,\n  ModalRoot,\n  ModalTitle,\n} from './atoms';\nimport { ModalContext, useModalContext } from './context';\nimport type { ImperativeModalProps, ModalConfirmConfig, ModalInstance } from './type';\n\n// --- Shared types ---\n\ntype ModalStackEntry = {\n  id: string;\n  props: ImperativeModalProps;\n};\n\n// --- Shared components (stack-independent) ---\n\nconst ModalPortalWrapper = ({\n  children,\n  root,\n}: {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | null;\n}) => {\n  const appElement = useAppElement();\n  const container = root ?? appElement ?? document.body;\n  return createPortal(children, container);\n};\n\nconst ConfirmBody = ({ config }: { config: ModalConfirmConfig }) => {\n  const { close } = useModalContext();\n  const [loading, setLoading] = useState(false);\n\n  const { cancelText = 'Cancel', content, okButtonProps, okText = 'OK', onCancel, onOk } = config;\n\n  const handleCancel = useCallback(() => {\n    close();\n    onCancel?.();\n  }, [close, onCancel]);\n\n  const handleOk = useCallback(async () => {\n    if (onOk) {\n      try {\n        const result = onOk();\n        if (result && typeof (result as any).then === 'function') {\n          setLoading(true);\n          await result;\n          setLoading(false);\n        }\n      } catch {\n        setLoading(false);\n        return;\n      }\n    }\n    close();\n  }, [close, onOk]);\n\n  return (\n    <>\n      {content && <div style={{ padding: '12px 16px' }}>{content}</div>}\n      <ModalFooter>\n        <Button onClick={handleCancel}>{cancelText}</Button>\n        <Button loading={loading} type=\"primary\" {...okButtonProps} onClick={handleOk}>\n          {okText}\n        </Button>\n      </ModalFooter>\n    </>\n  );\n};\nConfirmBody.displayName = 'ConfirmBody';\n\n// --- Factory ---\n\nexport interface ModalHostProps {\n  root?: HTMLElement | ShadowRoot | null;\n}\n\nexport interface ModalSystem {\n  confirmModal: (config: ModalConfirmConfig) => { close: () => void; destroy: () => void };\n  createModal: (props: ImperativeModalProps) => ModalInstance;\n  ModalHost: React.FC<ModalHostProps>;\n}\n\nlet systemSeed = 0;\n\nexport function createModalSystem(): ModalSystem {\n  const systemId = systemSeed++;\n  const singletonName = systemId === 0 ? 'BaseModalHost' : `BaseModalHost-${systemId}`;\n\n  // --- Stack state (isolated per system) ---\n  let modalStack: ModalStackEntry[] = [];\n  let modalSeed = 0;\n  const listeners = new Set<() => void>();\n\n  const notify = () => listeners.forEach((l) => l());\n  const subscribe = (l: () => void) => {\n    listeners.add(l);\n    return () => listeners.delete(l);\n  };\n  const EMPTY: ModalStackEntry[] = [];\n  const getSnapshot = () => modalStack;\n  const getServerSnapshot = () => EMPTY;\n\n  // --- Stack operations ---\n\n  const updateModal = (id: string, next: Partial<ImperativeModalProps>) => {\n    let changed = false;\n    modalStack = modalStack.map((item) => {\n      if (item.id !== id) return item;\n      changed = true;\n      return { ...item, props: { ...item.props, ...next } };\n    });\n    if (changed) notify();\n  };\n\n  const closeModal = (id: string) => {\n    updateModal(id, { open: false });\n  };\n\n  const destroyModal = (id: string) => {\n    const next = modalStack.filter((item) => item.id !== id);\n    if (next.length === modalStack.length) return;\n    modalStack = next;\n    notify();\n  };\n\n  // --- Stack Item (captures operations via closure) ---\n\n  const StackItem = memo(({ entry }: { entry: ModalStackEntry }) => {\n    const { id, props } = entry;\n    const {\n      children,\n      classNames,\n      content,\n      footer,\n      maskClosable,\n      onOpenChange,\n      onOpenChangeComplete,\n      open,\n      styles: semanticStyles,\n      title,\n      width,\n    } = props;\n\n    const isOpen = open ?? true;\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean, eventDetails?: { reason: string }) => {\n        if (!nextOpen && maskClosable === false && eventDetails?.reason === 'outside-press') return;\n        if (!nextOpen) closeModal(id);\n        onOpenChange?.(nextOpen);\n      },\n      [id, maskClosable, onOpenChange],\n    );\n\n    const handleExitComplete = useCallback(() => {\n      onOpenChangeComplete?.(false);\n      destroyModal(id);\n    }, [id, onOpenChangeComplete]);\n\n    const close = useCallback(() => closeModal(id), [id]);\n    const setCanDismissByClickOutside = useCallback(\n      (value: boolean) => updateModal(id, { maskClosable: value }),\n      [id],\n    );\n\n    const showTitle = title !== undefined && title !== false && title !== null;\n\n    return (\n      <ModalContext value={{ close, setCanDismissByClickOutside }}>\n        <ModalRoot\n          open={isOpen}\n          onExitComplete={handleExitComplete}\n          onOpenChange={handleOpenChange}\n        >\n          <ModalPortal>\n            <ModalBackdrop className={classNames?.backdrop} style={semanticStyles?.backdrop} />\n            <ModalPopup\n              className={classNames?.popup}\n              popupStyle={semanticStyles?.popup}\n              width={width}\n            >\n              {showTitle && (\n                <ModalHeader className={classNames?.header} style={semanticStyles?.header}>\n                  <ModalTitle className={classNames?.title} style={semanticStyles?.title}>\n                    {title}\n                  </ModalTitle>\n                  <ModalClose className={classNames?.close} style={semanticStyles?.close} />\n                </ModalHeader>\n              )}\n              <ModalContent className={classNames?.content} style={semanticStyles?.content}>\n                {content ?? children}\n              </ModalContent>\n              {footer}\n            </ModalPopup>\n          </ModalPortal>\n        </ModalRoot>\n      </ModalContext>\n    );\n  });\n  StackItem.displayName = 'ModalStackItem';\n\n  const StackRenderer = memo(({ stack }: { stack: ModalStackEntry[] }) => {\n    const isClient = useIsClient();\n    if (!isClient) return null;\n    return stack.map((entry) => <StackItem entry={entry} key={entry.id} />);\n  });\n  StackRenderer.displayName = 'ModalStackRenderer';\n\n  // --- ModalHost ---\n\n  const Host = ({ root }: ModalHostProps) => {\n    const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n    const isClient = useIsClient();\n\n    useEffect(() => {\n      if (!isClient) return;\n      const scope = root ?? document.body;\n      return registerDevSingleton(singletonName, scope);\n    }, [isClient, root]);\n\n    if (!isClient) return null;\n    if (stack.length === 0) return null;\n\n    return (\n      <ModalPortalWrapper root={root}>\n        <StackRenderer stack={stack} />\n      </ModalPortalWrapper>\n    );\n  };\n\n  // --- createModal ---\n\n  const create = (props: ImperativeModalProps): ModalInstance => {\n    const id = `base-modal-${Date.now()}-${modalSeed++}`;\n    modalStack = [...modalStack, { id, props: { ...props, open: props.open ?? true } }];\n    notify();\n\n    return {\n      close: () => closeModal(id),\n      destroy: () => destroyModal(id),\n      setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }),\n      update: (nextProps) => updateModal(id, nextProps),\n    };\n  };\n\n  // --- confirmModal ---\n\n  const confirm = (config: ModalConfirmConfig) => {\n    const instance = create({\n      content: <ConfirmBody config={config} />,\n      styles: { content: { padding: 0 } },\n      title: config.title,\n      width: 420,\n    });\n\n    return {\n      close: instance.close,\n      destroy: instance.destroy,\n    };\n  };\n\n  return { ModalHost: Host, confirmModal: confirm, createModal: create };\n}\n\n// --- Default global instance (backward compatible) ---\n\nconst defaultSystem = createModalSystem();\nexport const ModalHost = defaultSystem.ModalHost;\nexport const createModal = defaultSystem.createModal;\nexport const confirmModal = defaultSystem.confirmModal;\n"],"mappings":"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"}

package/es/base-ui/Popover/atoms.mjs

@@ -66,7 +66,8 @@ PopoverPortal.displayName = "PopoverPortal";
 const PopoverPositioner = ({ children, className, hoverTrigger, placement, align, side, sideOffset, style, ...rest }) => {
 	const placementConfig = placement ? placementMap[placement] : void 0;
 	const [positionerNode, setPositionerNode] = useState(null);
-	const { zIndex, ref: zRef } = useLayerZIndex("floating", typeof style !== "function" && style?.zIndex != null && typeof style.zIndex === "number" ? style.zIndex : void 0);
+	const explicitZIndex = typeof style !== "function" && style?.zIndex != null && typeof style.zIndex === "number" ? style.zIndex : void 0;
+	const { zIndex, ref: zRef } = useLayerZIndex("floating", explicitZIndex);
 	const composedRef = useMergeRefs([setPositionerNode, zRef]);
 	const resolvedStyle = typeof style === "function" ? (state) => ({
 		zIndex,

package/es/base-ui/Popover/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["BasePopover"],"sources":["../../../src/base-ui/Popover/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { cx } from 'antd-style';\nimport {\n  cloneElement,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  isValidElement,\n  useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { styles } from './style';\nimport { type PopoverPlacement } from './type';\n\nexport const PopoverRoot = BasePopover.Root;\nexport const PopoverBackdrop = BasePopover.Backdrop;\n\nexport type PopoverTriggerElementProps = Omit<\n  ComponentPropsWithRef<typeof BasePopover.Trigger>,\n  'children' | 'render'\n> & {\n  children: ComponentProps<typeof BasePopover.Trigger>['children'];\n};\n\nexport const PopoverTriggerElement = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: PopoverTriggerElementProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        {...rest}\n        nativeButton={resolvedNativeButton}\n        render={(props, state) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return props as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = props as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          const baseClassName =\n            typeof (mergedProps as any).className === 'function'\n              ? (mergedProps as any).className(state)\n              : (mergedProps as any).className;\n          const extraClassName =\n            typeof (className as any) === 'function' ? (className as any)(state) : className;\n\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: cx(baseClassName, extraClassName),\n            ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverTriggerElement.displayName = 'PopoverTriggerElement';\n\nexport type PopoverPortalAtomProps = Omit<\n  ComponentProps<typeof BasePopover.Portal>,\n  'container'\n> & {\n  /**\n   * Portal container. When not provided, it uses the shared container created by `usePopoverPortalContainer`.\n   */\n  container?: HTMLElement | null;\n  /**\n   * Root element used by `usePopoverPortalContainer` to create the default container.\n   */\n  root?: HTMLElement | ShadowRoot | null;\n};\n\nexport const PopoverPortal = ({ container, root, children, ...rest }: PopoverPortalAtomProps) => {\n  const defaultContainer = usePopoverPortalContainer(root);\n  const resolvedContainer = container ?? defaultContainer;\n\n  if (!resolvedContainer) return null;\n\n  return (\n    <BasePopover.Portal container={resolvedContainer} {...rest}>\n      {children}\n    </BasePopover.Portal>\n  );\n};\n\nPopoverPortal.displayName = 'PopoverPortal';\n\nexport type PopoverPositionerAtomProps = ComponentProps<typeof BasePopover.Positioner> & {\n  hoverTrigger?: boolean;\n  placement?: PopoverPlacement;\n};\n\nexport const PopoverPositioner = ({\n  children,\n  className,\n  hoverTrigger,\n  placement,\n  align,\n  side,\n  sideOffset,\n  style,\n  ...rest\n}: PopoverPositionerAtomProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <BasePopover.Positioner\n      align={align ?? placementConfig?.align ?? 'center'}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={composedRef as any}\n      side={side ?? placementConfig?.side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n      style={resolvedStyle}\n      className={(state) =>\n        cx(styles.positioner, typeof className === 'function' ? className(state) : className)\n      }\n      {...rest}\n    >\n      <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n    </BasePopover.Positioner>\n  );\n};\n\nPopoverPositioner.displayName = 'PopoverPositioner';\n\nexport type PopoverPopupAtomProps = ComponentProps<typeof BasePopover.Popup>;\n\nexport const PopoverPopup = ({ className, ...rest }: PopoverPopupAtomProps) => {\n  return (\n    <BasePopover.Popup\n      className={(state) =>\n        cx(styles.popup, typeof className === 'function' ? className(state) : className)\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverPopup.displayName = 'PopoverPopup';\n\nexport type PopoverArrowAtomProps = ComponentProps<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = ({ className, children, ...rest }: PopoverArrowAtomProps) => {\n  return (\n    <BasePopover.Arrow\n      className={(state) =>\n        cx(styles.arrow, typeof className === 'function' ? className(state) : className)\n      }\n      {...rest}\n    >\n      {children ?? PopoverArrowIcon}\n    </BasePopover.Arrow>\n  );\n};\n\nPopoverArrow.displayName = 'PopoverArrow';\n\nexport type PopoverViewportAtomProps = ComponentProps<typeof BasePopover.Viewport>;\n\nexport const PopoverViewport = ({ className, ...rest }: PopoverViewportAtomProps) => {\n  return (\n    <BasePopover.Viewport\n      className={(state) =>\n        cx(styles.viewport, typeof className === 'function' ? className(state) : className)\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverViewport.displayName = 'PopoverViewport';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["BasePopover"],"sources":["../../../src/base-ui/Popover/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { cx } from 'antd-style';\nimport {\n  cloneElement,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  isValidElement,\n  useState,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { placementMap } from '@/utils/placement';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { styles } from './style';\nimport { type PopoverPlacement } from './type';\n\nexport const PopoverRoot = BasePopover.Root;\nexport const PopoverBackdrop = BasePopover.Backdrop;\n\nexport type PopoverTriggerElementProps = Omit<\n  ComponentPropsWithRef<typeof BasePopover.Trigger>,\n  'children' | 'render'\n> & {\n  children: ComponentProps<typeof BasePopover.Trigger>['children'];\n};\n\nexport const PopoverTriggerElement = ({\n  children,\n  className,\n  nativeButton,\n  ref: refProp,\n  ...rest\n}: PopoverTriggerElementProps) => {\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  if (isValidElement(children)) {\n    return (\n      <BasePopover.Trigger\n        {...rest}\n        nativeButton={resolvedNativeButton}\n        render={(props, state) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return props as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = props as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          const baseClassName =\n            typeof (mergedProps as any).className === 'function'\n              ? (mergedProps as any).className(state)\n              : (mergedProps as any).className;\n          const extraClassName =\n            typeof (className as any) === 'function' ? (className as any)(state) : className;\n\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: cx(baseClassName, extraClassName),\n            ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <BasePopover.Trigger\n      {...rest}\n      className={className}\n      nativeButton={resolvedNativeButton}\n      ref={refProp}\n    >\n      {children}\n    </BasePopover.Trigger>\n  );\n};\n\nPopoverTriggerElement.displayName = 'PopoverTriggerElement';\n\nexport type PopoverPortalAtomProps = Omit<\n  ComponentProps<typeof BasePopover.Portal>,\n  'container'\n> & {\n  /**\n   * Portal container. When not provided, it uses the shared container created by `usePopoverPortalContainer`.\n   */\n  container?: HTMLElement | null;\n  /**\n   * Root element used by `usePopoverPortalContainer` to create the default container.\n   */\n  root?: HTMLElement | ShadowRoot | null;\n};\n\nexport const PopoverPortal = ({ container, root, children, ...rest }: PopoverPortalAtomProps) => {\n  const defaultContainer = usePopoverPortalContainer(root);\n  const resolvedContainer = container ?? defaultContainer;\n\n  if (!resolvedContainer) return null;\n\n  return (\n    <BasePopover.Portal container={resolvedContainer} {...rest}>\n      {children}\n    </BasePopover.Portal>\n  );\n};\n\nPopoverPortal.displayName = 'PopoverPortal';\n\nexport type PopoverPositionerAtomProps = ComponentProps<typeof BasePopover.Positioner> & {\n  hoverTrigger?: boolean;\n  placement?: PopoverPlacement;\n};\n\nexport const PopoverPositioner = ({\n  children,\n  className,\n  hoverTrigger,\n  placement,\n  align,\n  side,\n  sideOffset,\n  style,\n  ...rest\n}: PopoverPositionerAtomProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([setPositionerNode, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <BasePopover.Positioner\n      align={align ?? placementConfig?.align ?? 'center'}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={composedRef as any}\n      side={side ?? placementConfig?.side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n      style={resolvedStyle}\n      className={(state) =>\n        cx(styles.positioner, typeof className === 'function' ? className(state) : className)\n      }\n      {...rest}\n    >\n      <FloatingLayerProvider value={positionerNode}>{children}</FloatingLayerProvider>\n    </BasePopover.Positioner>\n  );\n};\n\nPopoverPositioner.displayName = 'PopoverPositioner';\n\nexport type PopoverPopupAtomProps = ComponentProps<typeof BasePopover.Popup>;\n\nexport const PopoverPopup = ({ className, ...rest }: PopoverPopupAtomProps) => {\n  return (\n    <BasePopover.Popup\n      className={(state) =>\n        cx(styles.popup, typeof className === 'function' ? className(state) : className)\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverPopup.displayName = 'PopoverPopup';\n\nexport type PopoverArrowAtomProps = ComponentProps<typeof BasePopover.Arrow>;\n\nexport const PopoverArrow = ({ className, children, ...rest }: PopoverArrowAtomProps) => {\n  return (\n    <BasePopover.Arrow\n      className={(state) =>\n        cx(styles.arrow, typeof className === 'function' ? className(state) : className)\n      }\n      {...rest}\n    >\n      {children ?? PopoverArrowIcon}\n    </BasePopover.Arrow>\n  );\n};\n\nPopoverArrow.displayName = 'PopoverArrow';\n\nexport type PopoverViewportAtomProps = ComponentProps<typeof BasePopover.Viewport>;\n\nexport const PopoverViewport = ({ className, ...rest }: PopoverViewportAtomProps) => {\n  return (\n    <BasePopover.Viewport\n      className={(state) =>\n        cx(styles.viewport, typeof className === 'function' ? className(state) : className)\n      }\n      {...rest}\n    />\n  );\n};\n\nPopoverViewport.displayName = 'PopoverViewport';\n"],"mappings":"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"}

package/es/base-ui/Popover/context.mjs

@@ -1,9 +1,11 @@
 "use client";
 import { createContext, memo, use } from "react";
 import { jsx } from "react/jsx-runtime";
-const PopoverContext = createContext({ close: process.env.NODE_ENV === "production" ? () => void 0 : () => {
+//#region src/base-ui/Popover/context.tsx
+const noop = process.env.NODE_ENV === "production" ? () => void 0 : () => {
 	throw new Error("usePopoverContext must be used within a PopoverProvider");
-} });
+};
+const PopoverContext = createContext({ close: noop });
 const PopoverProvider = memo(({ children, value }) => {
 	return /* @__PURE__ */ jsx(PopoverContext, {
 		value,

package/es/base-ui/Popover/context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/base-ui/Popover/context.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, memo, type ReactNode, use } from 'react';\n\nexport type PopoverContextValue = {\n  close: () => void;\n};\n\nconst noop =\n  process.env.NODE_ENV === 'production'\n    ? () => void 0\n    : () => {\n        throw new Error('usePopoverContext must be used within a PopoverProvider');\n      };\n\nexport const PopoverContext = createContext<PopoverContextValue>({\n  close: noop,\n});\n\nexport const PopoverProvider = memo<{ children: ReactNode; value: PopoverContextValue }>(\n  ({ children, value }) => {\n    return <PopoverContext value={value}>{children}</PopoverContext>;\n  },\n);\n\nexport const usePopoverContext = () => {\n  return use(PopoverContext);\n};\n"],"mappings":";;;AAeA,MAAa,iBAAiB,cAAmC,EAC/D,OAPA,QAAQ,IAAI,aAAa,qBACf,KAAK,UACL;CACJ,MAAM,IAAI,MAAM,yDAAyD;AAC3E,EAIN,CAAC;AAED,MAAa,kBAAkB,MAC5B,EAAE,UAAU,YAAY;CACvB,OAAO,oBAAC,gBAAD;EAAuB;EAAQ;CAAyB,CAAA;AACjE,CACF;AAEA,MAAa,0BAA0B;CACrC,OAAO,IAAI,cAAc;AAC3B"}
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../src/base-ui/Popover/context.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, memo, type ReactNode, use } from 'react';\n\nexport type PopoverContextValue = {\n  close: () => void;\n};\n\nconst noop =\n  process.env.NODE_ENV === 'production'\n    ? () => void 0\n    : () => {\n        throw new Error('usePopoverContext must be used within a PopoverProvider');\n      };\n\nexport const PopoverContext = createContext<PopoverContextValue>({\n  close: noop,\n});\n\nexport const PopoverProvider = memo<{ children: ReactNode; value: PopoverContextValue }>(\n  ({ children, value }) => {\n    return <PopoverContext value={value}>{children}</PopoverContext>;\n  },\n);\n\nexport const usePopoverContext = () => {\n  return use(PopoverContext);\n};\n"],"mappings":";;;;AAQA,MAAM,OACJ,QAAQ,IAAI,aAAa,qBACf,KAAK,UACL;CACJ,MAAM,IAAI,MAAM,yDAAyD;AAC3E;AAEN,MAAa,iBAAiB,cAAmC,EAC/D,OAAO,KACT,CAAC;AAED,MAAa,kBAAkB,MAC5B,EAAE,UAAU,YAAY;CACvB,OAAO,oBAAC,gBAAD;EAAuB;EAAQ;CAAyB,CAAA;AACjE,CACF;AAEA,MAAa,0BAA0B;CACrC,OAAO,IAAI,cAAc;AAC3B"}

package/es/base-ui/Select/atoms.mjs

@@ -84,7 +84,8 @@ const SelectPortal = ({ container, ...rest }) => {
 };
 SelectPortal.displayName = "SelectPortal";
 const SelectPositioner = ({ align, alignItemWithTrigger, className, side, sideOffset, style, ref: forwardedRef, ...rest }) => {
-	const { zIndex, ref: zRef } = useLayerZIndex("floating", typeof style !== "function" && style?.zIndex != null && typeof style.zIndex === "number" ? style.zIndex : void 0);
+	const explicitZIndex = typeof style !== "function" && style?.zIndex != null && typeof style.zIndex === "number" ? style.zIndex : void 0;
+	const { zIndex, ref: zRef } = useLayerZIndex("floating", explicitZIndex);
 	const composedRef = useMergeRefs([forwardedRef, zRef]);
 	const resolvedStyle = typeof style === "function" ? (state) => ({
 		zIndex,

package/es/base-ui/Select/atoms.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["styles","menuStyles"],"sources":["../../../src/base-ui/Select/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Select } from '@base-ui/react/select';\nimport { cx, useThemeMode } from 'antd-style';\nimport {\n  cloneElement,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  isValidElement,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { styles, triggerVariants } from './style';\nimport { type SelectSize, type SelectVariant } from './type';\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n  return cx(base, className);\n};\n\nexport const SelectRoot = Select.Root;\nexport const SelectBackdrop = Select.Backdrop;\nexport const SelectSeparator = Select.Separator;\n\nexport type SelectTriggerProps = Omit<\n  ComponentPropsWithRef<typeof Select.Trigger>,\n  'children' | 'render'\n> & {\n  children: ComponentProps<typeof Select.Trigger>['children'];\n  shadow?: boolean;\n  size?: SelectSize;\n  variant?: SelectVariant;\n};\n\nexport const SelectTrigger = ({\n  children,\n  className,\n  nativeButton,\n  shadow,\n  size = 'middle',\n  variant,\n  ref: refProp,\n  ...rest\n}: SelectTriggerProps) => {\n  const { isDarkMode } = useThemeMode();\n  const resolvedVariant = variant ?? (isDarkMode ? 'filled' : 'outlined');\n  const baseClassName = triggerVariants({ shadow, size, variant: resolvedVariant });\n\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  if (isValidElement(children)) {\n    return (\n      <Select.Trigger\n        {...rest}\n        nativeButton={resolvedNativeButton}\n        render={(props, state) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return props as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = props as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          const childClassName =\n            typeof (mergedProps as any).className === 'function'\n              ? (mergedProps as any).className(state)\n              : (mergedProps as any).className;\n          const extraClassName = typeof className === 'function' ? className(state) : className;\n\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: cx(baseClassName, childClassName, extraClassName),\n            ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <Select.Trigger\n      {...rest}\n      className={mergeStateClassName(baseClassName, className) as any}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Select.Trigger>\n  );\n};\n\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport type SelectIconProps = ComponentProps<typeof Select.Icon>;\n\nexport const SelectIcon = ({ className, ...rest }: SelectIconProps) => {\n  return <Select.Icon className={mergeStateClassName(styles.icon, className) as any} {...rest} />;\n};\n\nSelectIcon.displayName = 'SelectIcon';\n\nexport type SelectValueProps = ComponentProps<typeof Select.Value>;\n\nexport const SelectValue = ({ className, ...rest }: SelectValueProps) => {\n  return <Select.Value className={mergeStateClassName(styles.value, className) as any} {...rest} />;\n};\n\nSelectValue.displayName = 'SelectValue';\n\nexport type SelectPortalProps = ComponentProps<typeof Select.Portal> & {\n  /**\n   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n   */\n  container?: HTMLElement | null;\n};\n\nexport const SelectPortal = ({ container, ...rest }: SelectPortalProps) => {\n  const appElement = useAppElement();\n  return <Select.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nSelectPortal.displayName = 'SelectPortal';\n\nexport type SelectPositionerProps = ComponentProps<typeof Select.Positioner>;\n\nexport const SelectPositioner = ({\n  align,\n  alignItemWithTrigger,\n  className,\n  side,\n  sideOffset,\n  style,\n  ref: forwardedRef,\n  ...rest\n}: SelectPositionerProps) => {\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([forwardedRef, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <Select.Positioner\n      align={align ?? 'start'}\n      alignItemWithTrigger={alignItemWithTrigger ?? false}\n      className={mergeStateClassName(styles.positioner, className) as any}\n      ref={composedRef as any}\n      side={side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n      style={resolvedStyle}\n      {...rest}\n    />\n  );\n};\n\nSelectPositioner.displayName = 'SelectPositioner';\n\nexport type SelectPopupProps = ComponentProps<typeof Select.Popup>;\n\nexport const SelectPopup = ({ className, ...rest }: SelectPopupProps) => {\n  return (\n    <Select.Popup\n      className={mergeStateClassName(cx(menuStyles.popup, styles.popup), className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectPopup.displayName = 'SelectPopup';\n\nexport type SelectListProps = ComponentProps<typeof Select.List>;\n\nexport const SelectList = ({ className, ...rest }: SelectListProps) => {\n  return <Select.List className={mergeStateClassName(styles.list, className) as any} {...rest} />;\n};\n\nSelectList.displayName = 'SelectList';\n\nexport type SelectItemProps = ComponentProps<typeof Select.Item>;\n\nexport const SelectItem = ({ className, ...rest }: SelectItemProps) => {\n  return (\n    <Select.Item\n      className={mergeStateClassName(cx(menuStyles.item, styles.item), className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectItem.displayName = 'SelectItem';\n\nexport type SelectItemTextProps = ComponentProps<typeof Select.ItemText>;\n\nexport const SelectItemText = ({ className, ...rest }: SelectItemTextProps) => {\n  return (\n    <Select.ItemText\n      className={mergeStateClassName(cx(menuStyles.label, styles.itemText), className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectItemText.displayName = 'SelectItemText';\n\nexport type SelectItemIndicatorProps = ComponentProps<typeof Select.ItemIndicator>;\n\nexport const SelectItemIndicator = ({ className, ...rest }: SelectItemIndicatorProps) => {\n  return (\n    <Select.ItemIndicator\n      className={mergeStateClassName(styles.itemIndicator, className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectItemIndicator.displayName = 'SelectItemIndicator';\n\nexport type SelectGroupProps = ComponentProps<typeof Select.Group>;\n\nexport const SelectGroup = ({ className, ...rest }: SelectGroupProps) => {\n  return <Select.Group className={mergeStateClassName(styles.group, className) as any} {...rest} />;\n};\n\nSelectGroup.displayName = 'SelectGroup';\n\nexport type SelectGroupLabelProps = ComponentProps<typeof Select.GroupLabel>;\n\nexport const SelectGroupLabel = ({ className, ...rest }: SelectGroupLabelProps) => {\n  return (\n    <Select.GroupLabel\n      className={\n        mergeStateClassName(cx(menuStyles.groupLabel, styles.groupLabel), className) as any\n      }\n      {...rest}\n    />\n  );\n};\n\nSelectGroupLabel.displayName = 'SelectGroupLabel';\n\nexport type SelectScrollUpArrowProps = ComponentProps<typeof Select.ScrollUpArrow>;\n\nexport const SelectScrollUpArrow = ({ className, ...rest }: SelectScrollUpArrowProps) => {\n  return (\n    <Select.ScrollUpArrow\n      className={mergeStateClassName(styles.scrollArrow, className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectScrollUpArrow.displayName = 'SelectScrollUpArrow';\n\nexport type SelectScrollDownArrowProps = ComponentProps<typeof Select.ScrollDownArrow>;\n\nexport const SelectScrollDownArrow = ({ className, ...rest }: SelectScrollDownArrowProps) => {\n  return (\n    <Select.ScrollDownArrow\n      className={mergeStateClassName(styles.scrollArrow, className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectScrollDownArrow.displayName = 'SelectScrollDownArrow';\n\nexport type SelectArrowProps = ComponentProps<typeof Select.Arrow>;\n\nexport const SelectArrow = ({ className, ...rest }: SelectArrowProps) => {\n  return <Select.Arrow className={mergeStateClassName(styles.arrow, className) as any} {...rest} />;\n};\n\nSelectArrow.displayName = 'SelectArrow';\n"],"mappings":"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"}
+{"version":3,"file":"atoms.mjs","names":["styles","menuStyles"],"sources":["../../../src/base-ui/Select/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { mergeProps } from '@base-ui/react/merge-props';\nimport { Select } from '@base-ui/react/select';\nimport { cx, useThemeMode } from 'antd-style';\nimport {\n  cloneElement,\n  type ComponentProps,\n  type ComponentPropsWithRef,\n  isValidElement,\n} from 'react';\nimport { mergeRefs, useMergeRefs } from 'react-merge-refs';\n\nimport { styles as menuStyles } from '@/base-ui/DropdownMenu/sharedStyle';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { useAppElement } from '@/ThemeProvider';\n\nimport { useLayerZIndex } from '../zIndex';\nimport { styles, triggerVariants } from './style';\nimport { type SelectSize, type SelectVariant } from './type';\n\nconst mergeStateClassName = <TState,>(\n  base: string,\n  className: string | ((state: TState) => string | undefined) | undefined,\n) => {\n  if (typeof className === 'function') return (state: TState) => cx(base, className(state));\n  return cx(base, className);\n};\n\nexport const SelectRoot = Select.Root;\nexport const SelectBackdrop = Select.Backdrop;\nexport const SelectSeparator = Select.Separator;\n\nexport type SelectTriggerProps = Omit<\n  ComponentPropsWithRef<typeof Select.Trigger>,\n  'children' | 'render'\n> & {\n  children: ComponentProps<typeof Select.Trigger>['children'];\n  shadow?: boolean;\n  size?: SelectSize;\n  variant?: SelectVariant;\n};\n\nexport const SelectTrigger = ({\n  children,\n  className,\n  nativeButton,\n  shadow,\n  size = 'middle',\n  variant,\n  ref: refProp,\n  ...rest\n}: SelectTriggerProps) => {\n  const { isDarkMode } = useThemeMode();\n  const resolvedVariant = variant ?? (isDarkMode ? 'filled' : 'outlined');\n  const baseClassName = triggerVariants({ shadow, size, variant: resolvedVariant });\n\n  const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({\n    children,\n    nativeButton,\n  });\n\n  if (isValidElement(children)) {\n    return (\n      <Select.Trigger\n        {...rest}\n        nativeButton={resolvedNativeButton}\n        render={(props, state) => {\n          // Base UI's trigger props include `type=\"button\"` by default.\n          // If we render into a non-<button> element, that prop is invalid and can warn.\n          const resolvedProps = (() => {\n            if (isNativeButtonTriggerElement) return props as any;\n            // eslint-disable-next-line unused-imports/no-unused-vars\n            const { type, ref: triggerRef, ...restProps } = props as any;\n            return restProps;\n          })();\n\n          const mergedProps = mergeProps((children as any).props, resolvedProps);\n          const childClassName =\n            typeof (mergedProps as any).className === 'function'\n              ? (mergedProps as any).className(state)\n              : (mergedProps as any).className;\n          const extraClassName = typeof className === 'function' ? className(state) : className;\n\n          return cloneElement(children as any, {\n            ...mergedProps,\n            className: cx(baseClassName, childClassName, extraClassName),\n            ref: mergeRefs([(children as any).ref, (props as any).ref, refProp]),\n          });\n        }}\n      />\n    );\n  }\n\n  return (\n    <Select.Trigger\n      {...rest}\n      className={mergeStateClassName(baseClassName, className) as any}\n      nativeButton={resolvedNativeButton}\n      ref={refProp as any}\n    >\n      {children}\n    </Select.Trigger>\n  );\n};\n\nSelectTrigger.displayName = 'SelectTrigger';\n\nexport type SelectIconProps = ComponentProps<typeof Select.Icon>;\n\nexport const SelectIcon = ({ className, ...rest }: SelectIconProps) => {\n  return <Select.Icon className={mergeStateClassName(styles.icon, className) as any} {...rest} />;\n};\n\nSelectIcon.displayName = 'SelectIcon';\n\nexport type SelectValueProps = ComponentProps<typeof Select.Value>;\n\nexport const SelectValue = ({ className, ...rest }: SelectValueProps) => {\n  return <Select.Value className={mergeStateClassName(styles.value, className) as any} {...rest} />;\n};\n\nSelectValue.displayName = 'SelectValue';\n\nexport type SelectPortalProps = ComponentProps<typeof Select.Portal> & {\n  /**\n   * When `container` is not provided, it uses a shared container created by `usePortalContainer`.\n   */\n  container?: HTMLElement | null;\n};\n\nexport const SelectPortal = ({ container, ...rest }: SelectPortalProps) => {\n  const appElement = useAppElement();\n  return <Select.Portal container={container ?? appElement ?? undefined} {...rest} />;\n};\n\nSelectPortal.displayName = 'SelectPortal';\n\nexport type SelectPositionerProps = ComponentProps<typeof Select.Positioner>;\n\nexport const SelectPositioner = ({\n  align,\n  alignItemWithTrigger,\n  className,\n  side,\n  sideOffset,\n  style,\n  ref: forwardedRef,\n  ...rest\n}: SelectPositionerProps) => {\n  const explicitZIndex =\n    typeof style !== 'function' && style?.zIndex != null && typeof style.zIndex === 'number'\n      ? style.zIndex\n      : undefined;\n  const { zIndex, ref: zRef } = useLayerZIndex<HTMLDivElement>('floating', explicitZIndex);\n  const composedRef = useMergeRefs([forwardedRef, zRef]);\n\n  const resolvedStyle =\n    typeof style === 'function'\n      ? (state: any) => ({ zIndex, ...style(state) })\n      : { zIndex, ...style };\n\n  return (\n    <Select.Positioner\n      align={align ?? 'start'}\n      alignItemWithTrigger={alignItemWithTrigger ?? false}\n      className={mergeStateClassName(styles.positioner, className) as any}\n      ref={composedRef as any}\n      side={side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\n      style={resolvedStyle}\n      {...rest}\n    />\n  );\n};\n\nSelectPositioner.displayName = 'SelectPositioner';\n\nexport type SelectPopupProps = ComponentProps<typeof Select.Popup>;\n\nexport const SelectPopup = ({ className, ...rest }: SelectPopupProps) => {\n  return (\n    <Select.Popup\n      className={mergeStateClassName(cx(menuStyles.popup, styles.popup), className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectPopup.displayName = 'SelectPopup';\n\nexport type SelectListProps = ComponentProps<typeof Select.List>;\n\nexport const SelectList = ({ className, ...rest }: SelectListProps) => {\n  return <Select.List className={mergeStateClassName(styles.list, className) as any} {...rest} />;\n};\n\nSelectList.displayName = 'SelectList';\n\nexport type SelectItemProps = ComponentProps<typeof Select.Item>;\n\nexport const SelectItem = ({ className, ...rest }: SelectItemProps) => {\n  return (\n    <Select.Item\n      className={mergeStateClassName(cx(menuStyles.item, styles.item), className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectItem.displayName = 'SelectItem';\n\nexport type SelectItemTextProps = ComponentProps<typeof Select.ItemText>;\n\nexport const SelectItemText = ({ className, ...rest }: SelectItemTextProps) => {\n  return (\n    <Select.ItemText\n      className={mergeStateClassName(cx(menuStyles.label, styles.itemText), className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectItemText.displayName = 'SelectItemText';\n\nexport type SelectItemIndicatorProps = ComponentProps<typeof Select.ItemIndicator>;\n\nexport const SelectItemIndicator = ({ className, ...rest }: SelectItemIndicatorProps) => {\n  return (\n    <Select.ItemIndicator\n      className={mergeStateClassName(styles.itemIndicator, className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectItemIndicator.displayName = 'SelectItemIndicator';\n\nexport type SelectGroupProps = ComponentProps<typeof Select.Group>;\n\nexport const SelectGroup = ({ className, ...rest }: SelectGroupProps) => {\n  return <Select.Group className={mergeStateClassName(styles.group, className) as any} {...rest} />;\n};\n\nSelectGroup.displayName = 'SelectGroup';\n\nexport type SelectGroupLabelProps = ComponentProps<typeof Select.GroupLabel>;\n\nexport const SelectGroupLabel = ({ className, ...rest }: SelectGroupLabelProps) => {\n  return (\n    <Select.GroupLabel\n      className={\n        mergeStateClassName(cx(menuStyles.groupLabel, styles.groupLabel), className) as any\n      }\n      {...rest}\n    />\n  );\n};\n\nSelectGroupLabel.displayName = 'SelectGroupLabel';\n\nexport type SelectScrollUpArrowProps = ComponentProps<typeof Select.ScrollUpArrow>;\n\nexport const SelectScrollUpArrow = ({ className, ...rest }: SelectScrollUpArrowProps) => {\n  return (\n    <Select.ScrollUpArrow\n      className={mergeStateClassName(styles.scrollArrow, className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectScrollUpArrow.displayName = 'SelectScrollUpArrow';\n\nexport type SelectScrollDownArrowProps = ComponentProps<typeof Select.ScrollDownArrow>;\n\nexport const SelectScrollDownArrow = ({ className, ...rest }: SelectScrollDownArrowProps) => {\n  return (\n    <Select.ScrollDownArrow\n      className={mergeStateClassName(styles.scrollArrow, className) as any}\n      {...rest}\n    />\n  );\n};\n\nSelectScrollDownArrow.displayName = 'SelectScrollDownArrow';\n\nexport type SelectArrowProps = ComponentProps<typeof Select.Arrow>;\n\nexport const SelectArrow = ({ className, ...rest }: SelectArrowProps) => {\n  return <Select.Arrow className={mergeStateClassName(styles.arrow, className) as any} {...rest} />;\n};\n\nSelectArrow.displayName = 'SelectArrow';\n"],"mappings":"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"}

package/es/base-ui/Toast/hostGuard.mjs

@@ -0,0 +1,26 @@
+//#region src/base-ui/Toast/hostGuard.ts
+const hostOrder = [];
+const listeners = /* @__PURE__ */ new Set();
+const emit = () => {
+	for (const listener of listeners) listener();
+};
+const registerToastHost = (id) => {
+	hostOrder.push(id);
+	emit();
+	return () => {
+		const index = hostOrder.indexOf(id);
+		if (index !== -1) hostOrder.splice(index, 1);
+		emit();
+	};
+};
+const isActiveToastHost = (id) => hostOrder[0] === id;
+const subscribeToastHost = (listener) => {
+	listeners.add(listener);
+	return () => {
+		listeners.delete(listener);
+	};
+};
+//#endregion
+export { isActiveToastHost, registerToastHost, subscribeToastHost };
+
+//# sourceMappingURL=hostGuard.mjs.map

package/es/base-ui/Toast/hostGuard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hostGuard.mjs","names":[],"sources":["../../../src/base-ui/Toast/hostGuard.ts"],"sourcesContent":["const hostOrder: string[] = [];\nconst listeners = new Set<() => void>();\n\nconst emit = (): void => {\n  for (const listener of listeners) listener();\n};\n\nexport const registerToastHost = (id: string): (() => void) => {\n  hostOrder.push(id);\n  emit();\n  return () => {\n    const index = hostOrder.indexOf(id);\n    if (index !== -1) hostOrder.splice(index, 1);\n    emit();\n  };\n};\n\nexport const isActiveToastHost = (id: string): boolean => hostOrder[0] === id;\n\nexport const subscribeToastHost = (listener: () => void): (() => void) => {\n  listeners.add(listener);\n  return () => {\n    listeners.delete(listener);\n  };\n};\n\nexport const __resetToastHostRegistryForTests = (): void => {\n  hostOrder.length = 0;\n};\n"],"mappings":";AAAA,MAAM,YAAsB,CAAC;AAC7B,MAAM,4BAAY,IAAI,IAAgB;AAEtC,MAAM,aAAmB;CACvB,KAAK,MAAM,YAAY,WAAW,SAAS;AAC7C;AAEA,MAAa,qBAAqB,OAA6B;CAC7D,UAAU,KAAK,EAAE;CACjB,KAAK;CACL,aAAa;EACX,MAAM,QAAQ,UAAU,QAAQ,EAAE;EAClC,IAAI,UAAU,IAAI,UAAU,OAAO,OAAO,CAAC;EAC3C,KAAK;CACP;AACF;AAEA,MAAa,qBAAqB,OAAwB,UAAU,OAAO;AAE3E,MAAa,sBAAsB,aAAuC;CACxE,UAAU,IAAI,QAAQ;CACtB,aAAa;EACX,UAAU,OAAO,QAAQ;CAC3B;AACF"}

package/es/base-ui/Toast/imperative.mjs

@@ -3,9 +3,11 @@ import { useIsClient } from "../../hooks/useIsClient.mjs";
 import { useAppElement } from "../../ThemeProvider/AppElementContext.mjs";
 import { acquireLayerZIndex } from "../zIndex/manager.mjs";
 import { ToastContext } from "./context.mjs";
+import { isActiveToastHost, registerToastHost, subscribeToastHost } from "./hostGuard.mjs";
+import { markToastHostNotReady, markToastHostReady, runWhenToastHostReady } from "./pendingQueue.mjs";
 import { viewportVariants } from "./style.mjs";
 import ToastItem from "./Toast.mjs";
-import { memo, useEffect, useState } from "react";
+import { memo, useEffect, useId, useState, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { Toast } from "@base-ui/react/toast";
@@ -41,6 +43,8 @@ const activeToastIds = {
 	"top-right": /* @__PURE__ */ new Set()
 };
 const getManager = (position) => toastManagers[position];
+let toastIdCounter = 0;
+const generateToastId = () => `toast-${Date.now().toString(36)}-${(toastIdCounter++).toString(36)}`;
 const normalizeOptions = (optionsOrMessage, type) => {
 	if (typeof optionsOrMessage === "string") return {
 		description: optionsOrMessage,
@@ -52,43 +56,49 @@ const normalizeOptions = (optionsOrMessage, type) => {
 	};
 };
 const createToastInstance = (id, position) => ({
-	close: () => getManager(position).close(id),
+	close: () => runWhenToastHostReady(() => getManager(position).close(id)),
 	id,
 	update: (options) => {
-		getManager(position).update(id, {
+		runWhenToastHostReady(() => getManager(position).update(id, {
 			data: options,
 			description: options.description,
 			title: options.title
-		});
+		}));
 	}
 });
 const addToast = (options) => {
 	const position = options.placement ?? globalState.position;
 	const manager = getManager(position);
 	const onRemove = options.onRemove;
-	const id = manager.add({
-		data: options,
-		description: options.description,
-		onClose: options.onClose,
-		onRemove: () => {
-			activeToastIds[position].delete(id);
-			onRemove?.();
-		},
-		timeout: options.duration ?? globalState.duration,
-		title: options.title
-	});
+	const id = generateToastId();
 	activeToastIds[position].add(id);
+	runWhenToastHostReady(() => {
+		manager.add({
+			id,
+			data: options,
+			description: options.description,
+			onClose: options.onClose,
+			onRemove: () => {
+				activeToastIds[position].delete(id);
+				onRemove?.();
+			},
+			timeout: options.duration ?? globalState.duration,
+			title: options.title
+		});
+	});
 	return createToastInstance(id, position);
 };
 const dismissToast = (id) => {
 	if (id) for (const [position, manager] of Object.entries(toastManagers)) {
 		activeToastIds[position].delete(id);
-		manager.close(id);
+		runWhenToastHostReady(() => manager.close(id));
 	}
 	else for (const [position, manager] of Object.entries(toastManagers)) {
 		const ids = Array.from(activeToastIds[position]);
-		for (const toastId of ids) manager.close(toastId);
 		activeToastIds[position].clear();
+		runWhenToastHostReady(() => {
+			for (const toastId of ids) manager.close(toastId);
+		});
 	}
 };
 const createSuccessToast = (optionsOrMessage) => {
@@ -169,7 +179,11 @@ const ToastHost = memo(({ root, className, duration = 5e3, limit = 5, position =
 	const isClient = useIsClient();
 	const appElement = useAppElement();
 	const [viewportZIndex, setViewportZIndex] = useState(void 0);
+	const hostId = useId();
+	useEffect(() => registerToastHost(hostId), [hostId]);
+	const isActive = useSyncExternalStore(subscribeToastHost, () => isActiveToastHost(hostId), () => false);
 	useEffect(() => {
+		if (!isActive) return;
 		globalState = {
 			duration,
 			limit,
@@ -180,12 +194,21 @@ const ToastHost = memo(({ root, className, duration = 5e3, limit = 5, position =
 		duration,
 		limit,
 		position,
-		swipeDirection
+		swipeDirection,
+		isActive
 	]);
 	useEffect(() => {
+		if (!isActive) return;
 		setViewportZIndex(acquireLayerZIndex("toast"));
-	}, []);
-	if (!isClient) return null;
+	}, [isActive]);
+	useEffect(() => {
+		if (!isActive || !isClient) return void 0;
+		markToastHostReady();
+		return () => {
+			markToastHostNotReady();
+		};
+	}, [isActive, isClient]);
+	if (!isClient || !isActive) return null;
 	const container = root ?? appElement ?? document.body;
 	return ALL_POSITIONS.map((pos) => /* @__PURE__ */ jsx(ToastContext, {
 		value: {