@lobehub/ui 5.11.0 → 5.12.1

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 { cx, useTheme } from 'antd-style';\nimport type { ReactNode } from 'react';\nimport { memo, useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useAppElement } from '@/ThemeProvider';\nimport { registerDevSingleton } from '@/utils/devSingleton';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\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 { styles } from './style';\nimport type { ImperativeModalProps, ModalConfirmConfig, ModalInstance } from './type';\nimport { acquireModalZIndex } from './zIndexManager';\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 theme = useTheme();\n  const [loading, setLoading] = useState(false);\n\n  const { cancelText = 'Cancel', content, okButtonProps, okText = 'OK', onCancel, onOk } = config;\n\n  const { danger, className: okUserCls, style: okUserStyle, ...restOkProps } = okButtonProps ?? {};\n  const okBgColor = danger ? theme.colorError : theme.colorPrimary;\n  const okTextColor = safeReadableColor(okBgColor);\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: '16px 24px' }}>{content}</div>}\n      <ModalFooter>\n        <button\n          className={cx(styles.buttonBase, styles.cancelButton)}\n          type=\"button\"\n          onClick={handleCancel}\n        >\n          {cancelText}\n        </button>\n        <button\n          {...restOkProps}\n          disabled={loading}\n          style={{ color: okTextColor, ...okUserStyle }}\n          type=\"button\"\n          className={cx(\n            styles.buttonBase,\n            danger ? styles.dangerOkButton : styles.okButton,\n            okUserCls,\n          )}\n          onClick={handleOk}\n        >\n          {loading && <span className={styles.loadingSpinner} />}\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 zIndexRef = useRef<number | undefined>(undefined);\n    const prevOpenRef = useRef(false);\n    if (isOpen && !prevOpenRef.current) {\n      zIndexRef.current = acquireModalZIndex();\n    }\n    prevOpenRef.current = isOpen;\n    const zIndex = zIndexRef.current ?? 1000;\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\n              className={classNames?.backdrop}\n              style={{ zIndex, ...semanticStyles?.backdrop }}\n            />\n            <ModalPopup\n              className={classNames?.popup}\n              popupStyle={{ zIndex: zIndex + 1, ...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 { cx, useTheme } from 'antd-style';\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';\nimport { safeReadableColor } from '@/utils/safeReadableColor';\n\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 { styles } from './style';\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 theme = useTheme();\n  const [loading, setLoading] = useState(false);\n\n  const { cancelText = 'Cancel', content, okButtonProps, okText = 'OK', onCancel, onOk } = config;\n\n  const { danger, className: okUserCls, style: okUserStyle, ...restOkProps } = okButtonProps ?? {};\n  const okBgColor = danger ? theme.colorError : theme.colorPrimary;\n  const okTextColor = safeReadableColor(okBgColor);\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: '16px 24px' }}>{content}</div>}\n      <ModalFooter>\n        <button\n          className={cx(styles.buttonBase, styles.cancelButton)}\n          type=\"button\"\n          onClick={handleCancel}\n        >\n          {cancelText}\n        </button>\n        <button\n          {...restOkProps}\n          disabled={loading}\n          style={{ color: okTextColor, ...okUserStyle }}\n          type=\"button\"\n          className={cx(\n            styles.buttonBase,\n            danger ? styles.dangerOkButton : styles.okButton,\n            okUserCls,\n          )}\n          onClick={handleOk}\n        >\n          {loading && <span className={styles.loadingSpinner} />}\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/Modal/style.mjs

@@ -3,7 +3,7 @@ import { createStaticStyles } from "antd-style";
 const styles = createStaticStyles(({ css, cssVar }) => ({
 	backdrop: css`
     position: fixed;
-    z-index: 1000;
+    z-index: 1200;
     inset: 0;
 
     background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);
@@ -109,7 +109,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     pointer-events: none;
 
     position: fixed;
-    z-index: 1001;
+    z-index: 1201;
     inset: 0;
 
     display: flex;
@@ -132,7 +132,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     border: 1px solid ${cssVar.colorBorderSecondary};
     border-radius: 12px;
 
-    background: ${cssVar.colorBgContainer};
+    background: ${cssVar.colorBgElevated};
     box-shadow: ${cssVar.boxShadow};
 
     transition:
@@ -300,7 +300,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
 	viewport: css`
     position: fixed;
-    z-index: 1000;
+    z-index: 1200;
     inset: 0;
     overflow: auto;
   `

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  backdrop: css`\n    position: fixed;\n    z-index: 1000;\n    inset: 0;\n\n    background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n\n    transition: opacity 150ms ease-out;\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      opacity: 0;\n    }\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    position: absolute;\n    inset-block-start: 12px;\n    inset-inline-end: 12px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 150ms ease-out;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  closeInline: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 150ms ease-out;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  content: css`\n    overflow: hidden auto;\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n\n  footer: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n\n  header: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n\n  headerDraggable: css`\n    cursor: default;\n    user-select: none;\n  `,\n\n  popup: css`\n    pointer-events: none;\n\n    position: fixed;\n    z-index: 1001;\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  popupInner: css`\n    pointer-events: auto;\n\n    position: relative;\n\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n    width: calc(100% - 32px);\n    max-width: 520px;\n    max-height: calc(100dvh - 64px);\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 12px;\n\n    background: ${cssVar.colorBgContainer};\n    box-shadow: ${cssVar.boxShadow};\n\n    transition:\n      transform 150ms cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 150ms ease-out;\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: scale(0.96) translateY(4px);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  buttonBase: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    height: 36px;\n    padding-block: 0;\n    padding-inline: 16px;\n    border: 1px solid ${cssVar.colorBorder};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1;\n\n    transition: all 150ms ease-out;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n\n  cancelButton: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover:not(:disabled) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  loadingSpinner: css`\n    @keyframes modal-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    display: inline-block;\n\n    width: 14px;\n    height: 14px;\n    border: 2px solid currentcolor;\n    border-block-start-color: transparent;\n    border-radius: 50%;\n\n    animation: modal-spin 0.6s linear infinite;\n  `,\n\n  dangerOkButton: css`\n    border-color: ${cssVar.colorError};\n    color: #fff;\n    background: ${cssVar.colorError};\n\n    &:hover:not(:disabled) {\n      border-color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active:not(:disabled) {\n      border-color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorActive};\n    }\n  `,\n\n  fullscreenPopupInner: css`\n    width: 100% !important;\n    max-width: 100% !important;\n    height: 100dvh !important;\n    max-height: 100dvh !important;\n    border: none;\n    border-radius: 0;\n  `,\n\n  fullscreenToggle: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 150ms ease-out;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  headerActions: css`\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    margin-inline-end: -4px;\n  `,\n\n  okButton: css`\n    border-color: ${cssVar.colorPrimary};\n    color: #fff;\n    background: ${cssVar.colorPrimary};\n\n    &:hover:not(:disabled) {\n      border-color: ${cssVar.colorPrimaryHover};\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active:not(:disabled) {\n      border-color: ${cssVar.colorPrimaryActive};\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  denyAnimation: css`\n    @keyframes modal-deny {\n      0% {\n        outline-color: ${cssVar.colorPrimary};\n        outline-offset: 0;\n      }\n\n      100% {\n        outline-color: transparent;\n        outline-offset: 4px;\n      }\n    }\n\n    outline: 2px solid transparent;\n    animation: modal-deny 400ms ease-out;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 1000;\n    inset: 0;\n    overflow: auto;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;qCAKsB,OAAO,iBAAiB;;;;;;;;;CAU3D,OAAO,GAAG;;;;;;;;;;;;;;;qBAeS,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;;;;;;eAOvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;2BAInB,OAAO,mBAAmB;;;;CAKnD,aAAa,GAAG;;;;;;;;;;;qBAWG,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;;;;;;eAOvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;2BAInB,OAAO,mBAAmB;;;;CAKnD,SAAS,GAAG;;;;;CAMZ,QAAQ,GAAG;;;;;;;;oCAQuB,OAAO,qBAAqB;;CAG9D,QAAQ,GAAG;;;;;;;kCAOqB,OAAO,qBAAqB;;CAG5D,iBAAiB,GAAG;;;;CAKpB,OAAO,GAAG;;;;;;;;;;;CAYV,YAAY,GAAG;;;;;;;;;;;;;wBAaO,OAAO,qBAAqB;;;kBAGlC,OAAO,iBAAiB;kBACxB,OAAO,UAAU;;;;;;;;;;;;CAajC,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,YAAY,GAAG;;;;;;;;;;;wBAWO,OAAO,YAAY;qBACtB,OAAO,eAAe;;;;;;;;;2BAShB,OAAO,mBAAmB;;;;;;;;;CAUnD,cAAc,GAAG;aACN,OAAO,UAAU;kBACZ,OAAO,iBAAiB;;;sBAGpB,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;CAkBnB,gBAAgB,GAAG;oBACD,OAAO,WAAW;;kBAEpB,OAAO,WAAW;;;sBAGd,OAAO,gBAAgB;oBACzB,OAAO,gBAAgB;;;;sBAIrB,OAAO,iBAAiB;oBAC1B,OAAO,iBAAiB;;;CAI1C,sBAAsB,GAAG;;;;;;;;CASzB,kBAAkB,GAAG;;;;;;;;;;;qBAWF,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;;;;;;eAOvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;2BAInB,OAAO,mBAAmB;;;;CAKnD,eAAe,GAAG;;;;;;CAOlB,UAAU,GAAG;oBACK,OAAO,aAAa;;kBAEtB,OAAO,aAAa;;;sBAGhB,OAAO,kBAAkB;oBAC3B,OAAO,kBAAkB;;;;sBAIvB,OAAO,mBAAmB;oBAC5B,OAAO,mBAAmB;;;CAI5C,eAAe,GAAG;;;yBAGK,OAAO,aAAa;;;;;;;;;;;;;CAc3C,UAAU,GAAG;;;;;;CAMd,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Modal/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  backdrop: css`\n    position: fixed;\n    z-index: 1200;\n    inset: 0;\n\n    background: color-mix(in srgb, ${cssVar.colorBgContainer} 60%, transparent);\n\n    transition: opacity 150ms ease-out;\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      opacity: 0;\n    }\n  `,\n\n  close: css`\n    cursor: pointer;\n\n    position: absolute;\n    inset-block-start: 12px;\n    inset-inline-end: 12px;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 150ms ease-out;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  closeInline: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 32px;\n    height: 32px;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 150ms ease-out;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  content: css`\n    overflow: hidden auto;\n    padding-block: 12px;\n    padding-inline: 16px;\n  `,\n\n  footer: css`\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    justify-content: flex-end;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n\n  header: css`\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n\n    padding-block: 12px;\n    padding-inline: 16px;\n    border-block-end: 1px solid ${cssVar.colorBorderSecondary};\n  `,\n\n  headerDraggable: css`\n    cursor: default;\n    user-select: none;\n  `,\n\n  popup: css`\n    pointer-events: none;\n\n    position: fixed;\n    z-index: 1201;\n    inset: 0;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  `,\n\n  popupInner: css`\n    pointer-events: auto;\n\n    position: relative;\n\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n\n    box-sizing: border-box;\n    width: calc(100% - 32px);\n    max-width: 520px;\n    max-height: calc(100dvh - 64px);\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: 12px;\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow: ${cssVar.boxShadow};\n\n    transition:\n      transform 150ms cubic-bezier(0.22, 1, 0.36, 1),\n      opacity 150ms ease-out;\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: scale(0.96) translateY(4px);\n      opacity: 0;\n    }\n  `,\n\n  title: css`\n    margin: 0;\n\n    font-size: 16px;\n    font-weight: 600;\n    line-height: 1.5;\n    color: ${cssVar.colorText};\n  `,\n\n  buttonBase: css`\n    cursor: pointer;\n\n    display: inline-flex;\n    gap: 6px;\n    align-items: center;\n    justify-content: center;\n\n    height: 36px;\n    padding-block: 0;\n    padding-inline: 16px;\n    border: 1px solid ${cssVar.colorBorder};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: 14px;\n    font-weight: 500;\n    line-height: 1;\n\n    transition: all 150ms ease-out;\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n\n    &:disabled {\n      cursor: not-allowed;\n      opacity: 0.5;\n    }\n  `,\n\n  cancelButton: css`\n    color: ${cssVar.colorText};\n    background: ${cssVar.colorBgContainer};\n\n    &:hover:not(:disabled) {\n      border-color: ${cssVar.colorPrimaryBorder};\n      color: ${cssVar.colorPrimaryText};\n    }\n  `,\n\n  loadingSpinner: css`\n    @keyframes modal-spin {\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    display: inline-block;\n\n    width: 14px;\n    height: 14px;\n    border: 2px solid currentcolor;\n    border-block-start-color: transparent;\n    border-radius: 50%;\n\n    animation: modal-spin 0.6s linear infinite;\n  `,\n\n  dangerOkButton: css`\n    border-color: ${cssVar.colorError};\n    color: #fff;\n    background: ${cssVar.colorError};\n\n    &:hover:not(:disabled) {\n      border-color: ${cssVar.colorErrorHover};\n      background: ${cssVar.colorErrorHover};\n    }\n\n    &:active:not(:disabled) {\n      border-color: ${cssVar.colorErrorActive};\n      background: ${cssVar.colorErrorActive};\n    }\n  `,\n\n  fullscreenPopupInner: css`\n    width: 100% !important;\n    max-width: 100% !important;\n    height: 100dvh !important;\n    max-height: 100dvh !important;\n    border: none;\n    border-radius: 0;\n  `,\n\n  fullscreenToggle: css`\n    cursor: pointer;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 28px;\n    height: 28px;\n    padding: 0;\n    border: none;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    color: ${cssVar.colorTextTertiary};\n\n    background: transparent;\n\n    transition: all 150ms ease-out;\n\n    &:hover {\n      color: ${cssVar.colorText};\n      background: ${cssVar.colorFillSecondary};\n    }\n\n    &:focus-visible {\n      outline: 2px solid ${cssVar.colorPrimaryBorder};\n      outline-offset: 1px;\n    }\n  `,\n\n  headerActions: css`\n    display: flex;\n    gap: 4px;\n    align-items: center;\n    margin-inline-end: -4px;\n  `,\n\n  okButton: css`\n    border-color: ${cssVar.colorPrimary};\n    color: #fff;\n    background: ${cssVar.colorPrimary};\n\n    &:hover:not(:disabled) {\n      border-color: ${cssVar.colorPrimaryHover};\n      background: ${cssVar.colorPrimaryHover};\n    }\n\n    &:active:not(:disabled) {\n      border-color: ${cssVar.colorPrimaryActive};\n      background: ${cssVar.colorPrimaryActive};\n    }\n  `,\n\n  denyAnimation: css`\n    @keyframes modal-deny {\n      0% {\n        outline-color: ${cssVar.colorPrimary};\n        outline-offset: 0;\n      }\n\n      100% {\n        outline-color: transparent;\n        outline-offset: 4px;\n      }\n    }\n\n    outline: 2px solid transparent;\n    animation: modal-deny 400ms ease-out;\n  `,\n\n  viewport: css`\n    position: fixed;\n    z-index: 1200;\n    inset: 0;\n    overflow: auto;\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,UAAU,GAAG;;;;;qCAKsB,OAAO,iBAAiB;;;;;;;;;CAU3D,OAAO,GAAG;;;;;;;;;;;;;;;qBAeS,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;;;;;;eAOvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;2BAInB,OAAO,mBAAmB;;;;CAKnD,aAAa,GAAG;;;;;;;;;;;qBAWG,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;;;;;;eAOvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;2BAInB,OAAO,mBAAmB;;;;CAKnD,SAAS,GAAG;;;;;CAMZ,QAAQ,GAAG;;;;;;;;oCAQuB,OAAO,qBAAqB;;CAG9D,QAAQ,GAAG;;;;;;;kCAOqB,OAAO,qBAAqB;;CAG5D,iBAAiB,GAAG;;;;CAKpB,OAAO,GAAG;;;;;;;;;;;CAYV,YAAY,GAAG;;;;;;;;;;;;;wBAaO,OAAO,qBAAqB;;;kBAGlC,OAAO,gBAAgB;kBACvB,OAAO,UAAU;;;;;;;;;;;;CAajC,OAAO,GAAG;;;;;;aAMC,OAAO,UAAU;;CAG5B,YAAY,GAAG;;;;;;;;;;;wBAWO,OAAO,YAAY;qBACtB,OAAO,eAAe;;;;;;;;;2BAShB,OAAO,mBAAmB;;;;;;;;;CAUnD,cAAc,GAAG;aACN,OAAO,UAAU;kBACZ,OAAO,iBAAiB;;;sBAGpB,OAAO,mBAAmB;eACjC,OAAO,iBAAiB;;;CAIrC,gBAAgB,GAAG;;;;;;;;;;;;;;;;;CAkBnB,gBAAgB,GAAG;oBACD,OAAO,WAAW;;kBAEpB,OAAO,WAAW;;;sBAGd,OAAO,gBAAgB;oBACzB,OAAO,gBAAgB;;;;sBAIrB,OAAO,iBAAiB;oBAC1B,OAAO,iBAAiB;;;CAI1C,sBAAsB,GAAG;;;;;;;;CASzB,kBAAkB,GAAG;;;;;;;;;;;qBAWF,OAAO,eAAe;;aAE9B,OAAO,kBAAkB;;;;;;;eAOvB,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;2BAInB,OAAO,mBAAmB;;;;CAKnD,eAAe,GAAG;;;;;;CAOlB,UAAU,GAAG;oBACK,OAAO,aAAa;;kBAEtB,OAAO,aAAa;;;sBAGhB,OAAO,kBAAkB;oBAC3B,OAAO,kBAAkB;;;;sBAIvB,OAAO,mBAAmB;oBAC5B,OAAO,mBAAmB;;;CAI5C,eAAe,GAAG;;;yBAGK,OAAO,aAAa;;;;;;;;;;;;;CAc3C,UAAU,GAAG;;;;;;CAMd,EAAE"}

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

@@ -60,7 +60,7 @@ const PopoverGroup = ({ children, contentLayoutAnimation = false, disableDestroy
 						arrow: item.styles?.arrow,
 						positioner: {
 							...item.styles?.root,
-							zIndex: item.zIndex ?? 1100
+							...item.zIndex !== void 0 ? { zIndex: item.zIndex } : {}
 						},
 						viewport: item.styles?.content
 					};

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverGroup.mjs","names":["BasePopover"],"sources":["../../../src/base-ui/Popover/PopoverGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { type FC, type ReactNode, useCallback, useMemo, useRef, useState } from 'react';\n\nimport {\n  useDestroyOnInvalidActiveTriggerElement,\n  useHidePopupWhenPositionerAtOrigin,\n} from '@/utils/destroyOnInvalidActiveTriggerElement';\nimport { parseTrigger } from '@/utils/parseTrigger';\nimport { placementMap } from '@/utils/placement';\n\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport {\n  PopoverArrow,\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverViewport,\n} from './atoms';\nimport { PopoverProvider } from './context';\nimport {\n  PopoverGroupHandleContext,\n  type PopoverGroupItem,\n  PopoverGroupPropsContext,\n  type PopoverGroupSharedProps,\n} from './groupContext';\nimport { usePopoverPortalContainer } from './PopoverPortal';\n\ntype PopoverGroupProps = PopoverGroupSharedProps & {\n  children: ReactNode;\n};\n\nconst PopoverGroup: FC<PopoverGroupProps> = ({\n  children,\n  contentLayoutAnimation = false,\n  disableDestroyOnInvalidTrigger = false,\n  disableZeroOriginGuard = false,\n  ...sharedProps\n}) => {\n  const [{ handle, key }, setHandleState] = useState(() => ({\n    handle: BasePopover.createHandle<PopoverGroupItem>(),\n    key: 0,\n  }));\n  const activeItemRef = useRef<PopoverGroupItem | null>(null);\n  const destroy = useCallback(() => {\n    activeItemRef.current = null;\n    setHandleState(({ key }) => ({\n      handle: BasePopover.createHandle<PopoverGroupItem>(),\n      key: key + 1,\n    }));\n  }, []);\n  const close = useCallback(() => {\n    handle.close();\n  }, [handle]);\n  const contextValue = useMemo(() => ({ close }), [close]);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    activeItemRef.current?.onOpenChange?.(open);\n  }, []);\n\n  useDestroyOnInvalidActiveTriggerElement(handle.store, destroy, {\n    enabled: !disableDestroyOnInvalidTrigger,\n  });\n  useHidePopupWhenPositionerAtOrigin(handle.store, { enabled: !disableZeroOriginGuard });\n\n  const portalContainer = usePopoverPortalContainer();\n\n  return (\n    <PopoverGroupHandleContext value={handle}>\n      <PopoverGroupPropsContext value={sharedProps}>\n        {children}\n        <BasePopover.Root handle={handle} key={key} onOpenChange={handleOpenChange}>\n          {({ payload }) => {\n            const item = (payload as PopoverGroupItem | null) ?? null;\n            activeItemRef.current = item;\n\n            if (!item?.content) return null;\n\n            const arrow = item.arrow ?? false;\n            const placement = item.placement ?? 'top';\n            const { openOnHover } = parseTrigger(item.trigger ?? 'hover');\n\n            const placementConfig = placementMap[placement] ?? placementMap.top;\n            const resolvedSideOffset = arrow ? 10 : 6;\n\n            const resolvedClassNames = {\n              arrow: item.classNames?.arrow,\n              popup: item.className,\n              positioner: item.classNames?.root,\n              viewport: item.classNames?.content,\n            };\n\n            const resolvedStyles = {\n              arrow: item.styles?.arrow,\n              positioner: {\n                ...item.styles?.root,\n                zIndex: item.zIndex ?? 1100,\n              },\n              viewport: item.styles?.content,\n            };\n\n            const contentNode = (\n              <PopoverProvider value={contextValue}>{item.content}</PopoverProvider>\n            );\n\n            const popup = (\n              <PopoverPositioner\n                align={placementConfig.align}\n                className={resolvedClassNames.positioner}\n                data-layout-animation={contentLayoutAnimation || undefined}\n                hoverTrigger={openOnHover}\n                placement={placement}\n                side={placementConfig.side}\n                sideOffset={resolvedSideOffset}\n                style={resolvedStyles.positioner}\n                {...item.positionerProps}\n              >\n                <PopoverPopup\n                  className={resolvedClassNames.popup}\n                  data-layout-animation={contentLayoutAnimation || undefined}\n                  {...item.popupProps}\n                >\n                  {arrow && (\n                    <PopoverArrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n                      {PopoverArrowIcon}\n                    </PopoverArrow>\n                  )}\n                  {contentLayoutAnimation ? (\n                    <PopoverViewport\n                      className={resolvedClassNames.viewport}\n                      style={resolvedStyles.viewport}\n                    >\n                      {contentNode}\n                    </PopoverViewport>\n                  ) : (\n                    <div className={resolvedClassNames.viewport} style={resolvedStyles.viewport}>\n                      {contentNode}\n                    </div>\n                  )}\n                </PopoverPopup>\n              </PopoverPositioner>\n            );\n\n            return portalContainer ? (\n              <PopoverPortal container={portalContainer}>{popup}</PopoverPortal>\n            ) : null;\n          }}\n        </BasePopover.Root>\n      </PopoverGroupPropsContext>\n    </PopoverGroupHandleContext>\n  );\n};\n\nPopoverGroup.displayName = 'PopoverGroup';\n\nexport default PopoverGroup;\n"],"mappings":";;;;;;;;;;;;;AAiCA,MAAM,gBAAuC,EAC3C,UACA,yBAAyB,OACzB,iCAAiC,OACjC,yBAAyB,OACzB,GAAG,kBACC;CACJ,MAAM,CAAC,EAAE,QAAQ,OAAO,kBAAkB,gBAAgB;EACxD,QAAQA,QAAY,cAAgC;EACpD,KAAK;EACN,EAAE;CACH,MAAM,gBAAgB,OAAgC,KAAK;CAC3D,MAAM,UAAU,kBAAkB;AAChC,gBAAc,UAAU;AACxB,kBAAgB,EAAE,WAAW;GAC3B,QAAQA,QAAY,cAAgC;GACpD,KAAK,MAAM;GACZ,EAAE;IACF,EAAE,CAAC;CACN,MAAM,QAAQ,kBAAkB;AAC9B,SAAO,OAAO;IACb,CAAC,OAAO,CAAC;CACZ,MAAM,eAAe,eAAe,EAAE,OAAO,GAAG,CAAC,MAAM,CAAC;CAExD,MAAM,mBAAmB,aAAa,SAAkB;AACtD,gBAAc,SAAS,eAAe,KAAK;IAC1C,EAAE,CAAC;AAEN,yCAAwC,OAAO,OAAO,SAAS,EAC7D,SAAS,CAAC,gCACX,CAAC;AACF,oCAAmC,OAAO,OAAO,EAAE,SAAS,CAAC,wBAAwB,CAAC;CAEtF,MAAM,kBAAkB,2BAA2B;AAEnD,QACE,oBAAC,2BAAD;EAA2B,OAAO;YAChC,qBAAC,0BAAD;GAA0B,OAAO;aAAjC,CACG,UACD,oBAACA,QAAY,MAAb;IAA0B;IAAkB,cAAc;eACtD,EAAE,cAAc;KAChB,MAAM,OAAQ,WAAuC;AACrD,mBAAc,UAAU;AAExB,SAAI,CAAC,MAAM,QAAS,QAAO;KAE3B,MAAM,QAAQ,KAAK,SAAS;KAC5B,MAAM,YAAY,KAAK,aAAa;KACpC,MAAM,EAAE,gBAAgB,aAAa,KAAK,WAAW,QAAQ;KAE7D,MAAM,kBAAkB,aAAa,cAAc,aAAa;KAChE,MAAM,qBAAqB,QAAQ,KAAK;KAExC,MAAM,qBAAqB;MACzB,OAAO,KAAK,YAAY;MACxB,OAAO,KAAK;MACZ,YAAY,KAAK,YAAY;MAC7B,UAAU,KAAK,YAAY;MAC5B;KAED,MAAM,iBAAiB;MACrB,OAAO,KAAK,QAAQ;MACpB,YAAY;OACV,GAAG,KAAK,QAAQ;OAChB,QAAQ,KAAK,UAAU;OACxB;MACD,UAAU,KAAK,QAAQ;MACxB;KAED,MAAM,cACJ,oBAAC,iBAAD;MAAiB,OAAO;gBAAe,KAAK;MAA0B,CAAA;KAGxE,MAAM,QACJ,oBAAC,mBAAD;MACE,OAAO,gBAAgB;MACvB,WAAW,mBAAmB;MAC9B,yBAAuB,0BAA0B,KAAA;MACjD,cAAc;MACH;MACX,MAAM,gBAAgB;MACtB,YAAY;MACZ,OAAO,eAAe;MACtB,GAAI,KAAK;gBAET,qBAAC,cAAD;OACE,WAAW,mBAAmB;OAC9B,yBAAuB,0BAA0B,KAAA;OACjD,GAAI,KAAK;iBAHX,CAKG,SACC,oBAAC,cAAD;QAAc,WAAW,mBAAmB;QAAO,OAAO,eAAe;kBACtE;QACY,CAAA,EAEhB,yBACC,oBAAC,iBAAD;QACE,WAAW,mBAAmB;QAC9B,OAAO,eAAe;kBAErB;QACe,CAAA,GAElB,oBAAC,OAAD;QAAK,WAAW,mBAAmB;QAAU,OAAO,eAAe;kBAChE;QACG,CAAA,CAEK;;MACG,CAAA;AAGtB,YAAO,kBACL,oBAAC,eAAD;MAAe,WAAW;gBAAkB;MAAsB,CAAA,GAChE;;IAEW,EA5EoB,IA4EpB,CACM;;EACD,CAAA;;AAIhC,aAAa,cAAc"}
+{"version":3,"file":"PopoverGroup.mjs","names":["BasePopover"],"sources":["../../../src/base-ui/Popover/PopoverGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { type FC, type ReactNode, useCallback, useMemo, useRef, useState } from 'react';\n\nimport {\n  useDestroyOnInvalidActiveTriggerElement,\n  useHidePopupWhenPositionerAtOrigin,\n} from '@/utils/destroyOnInvalidActiveTriggerElement';\nimport { parseTrigger } from '@/utils/parseTrigger';\nimport { placementMap } from '@/utils/placement';\n\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport {\n  PopoverArrow,\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverViewport,\n} from './atoms';\nimport { PopoverProvider } from './context';\nimport {\n  PopoverGroupHandleContext,\n  type PopoverGroupItem,\n  PopoverGroupPropsContext,\n  type PopoverGroupSharedProps,\n} from './groupContext';\nimport { usePopoverPortalContainer } from './PopoverPortal';\n\ntype PopoverGroupProps = PopoverGroupSharedProps & {\n  children: ReactNode;\n};\n\nconst PopoverGroup: FC<PopoverGroupProps> = ({\n  children,\n  contentLayoutAnimation = false,\n  disableDestroyOnInvalidTrigger = false,\n  disableZeroOriginGuard = false,\n  ...sharedProps\n}) => {\n  const [{ handle, key }, setHandleState] = useState(() => ({\n    handle: BasePopover.createHandle<PopoverGroupItem>(),\n    key: 0,\n  }));\n  const activeItemRef = useRef<PopoverGroupItem | null>(null);\n  const destroy = useCallback(() => {\n    activeItemRef.current = null;\n    setHandleState(({ key }) => ({\n      handle: BasePopover.createHandle<PopoverGroupItem>(),\n      key: key + 1,\n    }));\n  }, []);\n  const close = useCallback(() => {\n    handle.close();\n  }, [handle]);\n  const contextValue = useMemo(() => ({ close }), [close]);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    activeItemRef.current?.onOpenChange?.(open);\n  }, []);\n\n  useDestroyOnInvalidActiveTriggerElement(handle.store, destroy, {\n    enabled: !disableDestroyOnInvalidTrigger,\n  });\n  useHidePopupWhenPositionerAtOrigin(handle.store, { enabled: !disableZeroOriginGuard });\n\n  const portalContainer = usePopoverPortalContainer();\n\n  return (\n    <PopoverGroupHandleContext value={handle}>\n      <PopoverGroupPropsContext value={sharedProps}>\n        {children}\n        <BasePopover.Root handle={handle} key={key} onOpenChange={handleOpenChange}>\n          {({ payload }) => {\n            const item = (payload as PopoverGroupItem | null) ?? null;\n            activeItemRef.current = item;\n\n            if (!item?.content) return null;\n\n            const arrow = item.arrow ?? false;\n            const placement = item.placement ?? 'top';\n            const { openOnHover } = parseTrigger(item.trigger ?? 'hover');\n\n            const placementConfig = placementMap[placement] ?? placementMap.top;\n            const resolvedSideOffset = arrow ? 10 : 6;\n\n            const resolvedClassNames = {\n              arrow: item.classNames?.arrow,\n              popup: item.className,\n              positioner: item.classNames?.root,\n              viewport: item.classNames?.content,\n            };\n\n            const resolvedStyles = {\n              arrow: item.styles?.arrow,\n              positioner: {\n                ...item.styles?.root,\n                ...(item.zIndex !== undefined ? { zIndex: item.zIndex } : {}),\n              },\n              viewport: item.styles?.content,\n            };\n\n            const contentNode = (\n              <PopoverProvider value={contextValue}>{item.content}</PopoverProvider>\n            );\n\n            const popup = (\n              <PopoverPositioner\n                align={placementConfig.align}\n                className={resolvedClassNames.positioner}\n                data-layout-animation={contentLayoutAnimation || undefined}\n                hoverTrigger={openOnHover}\n                placement={placement}\n                side={placementConfig.side}\n                sideOffset={resolvedSideOffset}\n                style={resolvedStyles.positioner}\n                {...item.positionerProps}\n              >\n                <PopoverPopup\n                  className={resolvedClassNames.popup}\n                  data-layout-animation={contentLayoutAnimation || undefined}\n                  {...item.popupProps}\n                >\n                  {arrow && (\n                    <PopoverArrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n                      {PopoverArrowIcon}\n                    </PopoverArrow>\n                  )}\n                  {contentLayoutAnimation ? (\n                    <PopoverViewport\n                      className={resolvedClassNames.viewport}\n                      style={resolvedStyles.viewport}\n                    >\n                      {contentNode}\n                    </PopoverViewport>\n                  ) : (\n                    <div className={resolvedClassNames.viewport} style={resolvedStyles.viewport}>\n                      {contentNode}\n                    </div>\n                  )}\n                </PopoverPopup>\n              </PopoverPositioner>\n            );\n\n            return portalContainer ? (\n              <PopoverPortal container={portalContainer}>{popup}</PopoverPortal>\n            ) : null;\n          }}\n        </BasePopover.Root>\n      </PopoverGroupPropsContext>\n    </PopoverGroupHandleContext>\n  );\n};\n\nPopoverGroup.displayName = 'PopoverGroup';\n\nexport default PopoverGroup;\n"],"mappings":";;;;;;;;;;;;;AAiCA,MAAM,gBAAuC,EAC3C,UACA,yBAAyB,OACzB,iCAAiC,OACjC,yBAAyB,OACzB,GAAG,kBACC;CACJ,MAAM,CAAC,EAAE,QAAQ,OAAO,kBAAkB,gBAAgB;EACxD,QAAQA,QAAY,cAAgC;EACpD,KAAK;EACN,EAAE;CACH,MAAM,gBAAgB,OAAgC,KAAK;CAC3D,MAAM,UAAU,kBAAkB;AAChC,gBAAc,UAAU;AACxB,kBAAgB,EAAE,WAAW;GAC3B,QAAQA,QAAY,cAAgC;GACpD,KAAK,MAAM;GACZ,EAAE;IACF,EAAE,CAAC;CACN,MAAM,QAAQ,kBAAkB;AAC9B,SAAO,OAAO;IACb,CAAC,OAAO,CAAC;CACZ,MAAM,eAAe,eAAe,EAAE,OAAO,GAAG,CAAC,MAAM,CAAC;CAExD,MAAM,mBAAmB,aAAa,SAAkB;AACtD,gBAAc,SAAS,eAAe,KAAK;IAC1C,EAAE,CAAC;AAEN,yCAAwC,OAAO,OAAO,SAAS,EAC7D,SAAS,CAAC,gCACX,CAAC;AACF,oCAAmC,OAAO,OAAO,EAAE,SAAS,CAAC,wBAAwB,CAAC;CAEtF,MAAM,kBAAkB,2BAA2B;AAEnD,QACE,oBAAC,2BAAD;EAA2B,OAAO;YAChC,qBAAC,0BAAD;GAA0B,OAAO;aAAjC,CACG,UACD,oBAACA,QAAY,MAAb;IAA0B;IAAkB,cAAc;eACtD,EAAE,cAAc;KAChB,MAAM,OAAQ,WAAuC;AACrD,mBAAc,UAAU;AAExB,SAAI,CAAC,MAAM,QAAS,QAAO;KAE3B,MAAM,QAAQ,KAAK,SAAS;KAC5B,MAAM,YAAY,KAAK,aAAa;KACpC,MAAM,EAAE,gBAAgB,aAAa,KAAK,WAAW,QAAQ;KAE7D,MAAM,kBAAkB,aAAa,cAAc,aAAa;KAChE,MAAM,qBAAqB,QAAQ,KAAK;KAExC,MAAM,qBAAqB;MACzB,OAAO,KAAK,YAAY;MACxB,OAAO,KAAK;MACZ,YAAY,KAAK,YAAY;MAC7B,UAAU,KAAK,YAAY;MAC5B;KAED,MAAM,iBAAiB;MACrB,OAAO,KAAK,QAAQ;MACpB,YAAY;OACV,GAAG,KAAK,QAAQ;OAChB,GAAI,KAAK,WAAW,KAAA,IAAY,EAAE,QAAQ,KAAK,QAAQ,GAAG,EAAE;OAC7D;MACD,UAAU,KAAK,QAAQ;MACxB;KAED,MAAM,cACJ,oBAAC,iBAAD;MAAiB,OAAO;gBAAe,KAAK;MAA0B,CAAA;KAGxE,MAAM,QACJ,oBAAC,mBAAD;MACE,OAAO,gBAAgB;MACvB,WAAW,mBAAmB;MAC9B,yBAAuB,0BAA0B,KAAA;MACjD,cAAc;MACH;MACX,MAAM,gBAAgB;MACtB,YAAY;MACZ,OAAO,eAAe;MACtB,GAAI,KAAK;gBAET,qBAAC,cAAD;OACE,WAAW,mBAAmB;OAC9B,yBAAuB,0BAA0B,KAAA;OACjD,GAAI,KAAK;iBAHX,CAKG,SACC,oBAAC,cAAD;QAAc,WAAW,mBAAmB;QAAO,OAAO,eAAe;kBACtE;QACY,CAAA,EAEhB,yBACC,oBAAC,iBAAD;QACE,WAAW,mBAAmB;QAC9B,OAAO,eAAe;kBAErB;QACe,CAAA,GAElB,oBAAC,OAAD;QAAK,WAAW,mBAAmB;QAAU,OAAO,eAAe;kBAChE;QACG,CAAA,CAEK;;MACG,CAAA;AAGtB,YAAO,kBACL,oBAAC,eAAD;MAAe,WAAW;gBAAkB;MAAsB,CAAA,GAChE;;IAEW,EA5EoB,IA4EpB,CACM;;EACD,CAAA;;AAIhC,aAAa,cAAc"}

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

@@ -88,7 +88,7 @@ const PopoverStandalone = memo(({ children, content, arrow = false, trigger = "h
 		arrow: styleProps?.arrow,
 		positioner: {
 			...styleProps?.root,
-			zIndex: zIndex ?? 1100
+			...zIndex !== void 0 ? { zIndex } : {}
 		},
 		viewport: styleProps?.content
 	}), [

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

@@ -1 +1 @@
-{"version":3,"file":"PopoverStandalone.mjs","names":["BasePopover"],"sources":["../../../src/base-ui/Popover/PopoverStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { memo, useCallback, useMemo, useState } from 'react';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { parseTrigger } from '@/utils/parseTrigger';\nimport { placementMap } from '@/utils/placement';\n\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport {\n  PopoverArrow,\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverRoot,\n  PopoverTriggerElement,\n  PopoverViewport,\n} from './atoms';\nimport { PopoverProvider } from './context';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { type PopoverProps } from './type';\n\n/**\n * Popover component - displays floating content relative to a trigger element\n * Compatible with Ant Design Popover API\n */\nexport const PopoverStandalone = memo<PopoverProps>(\n  ({\n    children,\n    content,\n    arrow = false,\n    trigger = 'hover',\n    placement = 'top',\n    styles: styleProps,\n    classNames,\n    className,\n    open,\n    onOpenChange,\n    defaultOpen = false,\n    mouseEnterDelay = 0.1,\n    mouseLeaveDelay = 0.1,\n    openDelay,\n    closeDelay,\n    getPopupContainer,\n    disabled = false,\n    zIndex,\n    nativeButton,\n    ref: refProp,\n    positionerProps,\n    triggerProps,\n    popupProps,\n    backdropProps,\n    portalProps,\n  }) => {\n    const isClient = useIsClient();\n    const popoverHandle = useMemo(() => BasePopover.createHandle(), []);\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n    const close = useCallback(() => {\n      popoverHandle.close();\n    }, [popoverHandle]);\n    const contextValue = useMemo(() => ({ close }), [close]);\n\n    const mergedOpen = open ?? uncontrolledOpen;\n    const resolvedOpen = disabled ? false : mergedOpen;\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean) => {\n        // Don't open if disabled\n        if (disabled && nextOpen) return;\n\n        onOpenChange?.(nextOpen);\n        if (open === undefined) {\n          setUncontrolledOpen(nextOpen);\n        }\n      },\n      [onOpenChange, open, disabled],\n    );\n\n    // Parse trigger mode\n    const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);\n\n    // Calculate delays (milliseconds take precedence over seconds)\n    const resolvedOpenDelay = openDelay ?? mouseEnterDelay * 1000;\n    const resolvedCloseDelay = closeDelay ?? mouseLeaveDelay * 1000;\n\n    // Get placement configuration\n    const placementConfig = placementMap[placement] ?? placementMap.top;\n    const resolvedSideOffset = arrow ? 10 : 6;\n\n    // Determine portal container\n    const portalContainer = usePopoverPortalContainer();\n\n    const { resolvedNativeButton } = useNativeButton({\n      children,\n      nativeButton,\n    });\n\n    const resolvedClassNames = useMemo(\n      () => ({\n        arrow: classNames?.arrow,\n        popup: className,\n        positioner: classNames?.root,\n        trigger: classNames?.trigger,\n        viewport: classNames?.content,\n      }),\n      [className, classNames?.arrow, classNames?.content, classNames?.root, classNames?.trigger],\n    );\n\n    // Render trigger element\n    const triggerElement = useMemo(() => {\n      const baseTriggerProps = {\n        closeDelay: resolvedCloseDelay,\n        delay: resolvedOpenDelay,\n        disabled,\n        openOnHover: openOnHover && !disabled,\n        ...triggerProps,\n      };\n\n      return (\n        <PopoverTriggerElement\n          handle={popoverHandle}\n          {...baseTriggerProps}\n          className={resolvedClassNames.trigger}\n          nativeButton={resolvedNativeButton}\n          ref={refProp as any}\n        >\n          {children}\n        </PopoverTriggerElement>\n      );\n    }, [\n      children,\n      disabled,\n      openOnHover,\n      popoverHandle,\n      refProp,\n      resolvedClassNames.trigger,\n      resolvedNativeButton,\n      resolvedOpenDelay,\n      resolvedCloseDelay,\n      triggerProps,\n    ]);\n\n    // Custom container from getPopupContainer\n    const customContainer = useMemo(() => {\n      if (!getPopupContainer || !isClient) return undefined;\n      // We need a reference element, but we don't have it until render\n      // This will be handled by the portal container logic\n      return undefined;\n    }, [getPopupContainer, isClient]);\n\n    const resolvedStyles = useMemo(\n      () => ({\n        arrow: styleProps?.arrow,\n        positioner: {\n          ...styleProps?.root,\n          zIndex: zIndex ?? 1100,\n        },\n        viewport: styleProps?.content,\n      }),\n      [styleProps?.arrow, styleProps?.content, styleProps?.root, zIndex],\n    );\n\n    const popup = useMemo(\n      () => (\n        <PopoverPositioner\n          align={placementConfig.align}\n          className={resolvedClassNames.positioner}\n          hoverTrigger={openOnHover}\n          placement={placement}\n          side={placementConfig.side}\n          sideOffset={resolvedSideOffset}\n          style={resolvedStyles.positioner}\n          {...positionerProps}\n        >\n          <PopoverPopup className={resolvedClassNames.popup} {...popupProps}>\n            {arrow && (\n              <PopoverArrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n                {PopoverArrowIcon}\n              </PopoverArrow>\n            )}\n            <PopoverViewport\n              className={resolvedClassNames.viewport}\n              style={resolvedStyles.viewport}\n            >\n              <PopoverProvider value={contextValue}>{content}</PopoverProvider>\n            </PopoverViewport>\n          </PopoverPopup>\n        </PopoverPositioner>\n      ),\n      [\n        arrow,\n        content,\n        contextValue,\n        openOnHover,\n        placement,\n        placementConfig.align,\n        placementConfig.side,\n        popupProps,\n        positionerProps,\n        resolvedClassNames,\n        resolvedSideOffset,\n        resolvedStyles,\n      ],\n    );\n\n    // Don't render popup if no content\n    if (!content) {\n      return children;\n    }\n\n    const resolvedPortalContainer = customContainer ?? portalContainer;\n\n    return (\n      <PopoverRoot\n        defaultOpen={defaultOpen}\n        handle={popoverHandle}\n        open={resolvedOpen}\n        onOpenChange={handleOpenChange}\n      >\n        {triggerElement}\n        {backdropProps && <BasePopover.Backdrop {...backdropProps} />}\n        {resolvedPortalContainer ? (\n          <PopoverPortal container={resolvedPortalContainer} {...portalProps}>\n            {popup}\n          </PopoverPortal>\n        ) : null}\n      </PopoverRoot>\n    );\n  },\n);\n\nPopoverStandalone.displayName = 'PopoverStandalone';\n"],"mappings":"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"}
+{"version":3,"file":"PopoverStandalone.mjs","names":["BasePopover"],"sources":["../../../src/base-ui/Popover/PopoverStandalone.tsx"],"sourcesContent":["'use client';\n\nimport { Popover as BasePopover } from '@base-ui/react/popover';\nimport { memo, useCallback, useMemo, useState } from 'react';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { parseTrigger } from '@/utils/parseTrigger';\nimport { placementMap } from '@/utils/placement';\n\nimport { PopoverArrowIcon } from './ArrowIcon';\nimport {\n  PopoverArrow,\n  PopoverPopup,\n  PopoverPortal,\n  PopoverPositioner,\n  PopoverRoot,\n  PopoverTriggerElement,\n  PopoverViewport,\n} from './atoms';\nimport { PopoverProvider } from './context';\nimport { usePopoverPortalContainer } from './PopoverPortal';\nimport { type PopoverProps } from './type';\n\n/**\n * Popover component - displays floating content relative to a trigger element\n * Compatible with Ant Design Popover API\n */\nexport const PopoverStandalone = memo<PopoverProps>(\n  ({\n    children,\n    content,\n    arrow = false,\n    trigger = 'hover',\n    placement = 'top',\n    styles: styleProps,\n    classNames,\n    className,\n    open,\n    onOpenChange,\n    defaultOpen = false,\n    mouseEnterDelay = 0.1,\n    mouseLeaveDelay = 0.1,\n    openDelay,\n    closeDelay,\n    getPopupContainer,\n    disabled = false,\n    zIndex,\n    nativeButton,\n    ref: refProp,\n    positionerProps,\n    triggerProps,\n    popupProps,\n    backdropProps,\n    portalProps,\n  }) => {\n    const isClient = useIsClient();\n    const popoverHandle = useMemo(() => BasePopover.createHandle(), []);\n    const [uncontrolledOpen, setUncontrolledOpen] = useState(Boolean(defaultOpen));\n    const close = useCallback(() => {\n      popoverHandle.close();\n    }, [popoverHandle]);\n    const contextValue = useMemo(() => ({ close }), [close]);\n\n    const mergedOpen = open ?? uncontrolledOpen;\n    const resolvedOpen = disabled ? false : mergedOpen;\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean) => {\n        // Don't open if disabled\n        if (disabled && nextOpen) return;\n\n        onOpenChange?.(nextOpen);\n        if (open === undefined) {\n          setUncontrolledOpen(nextOpen);\n        }\n      },\n      [onOpenChange, open, disabled],\n    );\n\n    // Parse trigger mode\n    const { openOnHover } = useMemo(() => parseTrigger(trigger), [trigger]);\n\n    // Calculate delays (milliseconds take precedence over seconds)\n    const resolvedOpenDelay = openDelay ?? mouseEnterDelay * 1000;\n    const resolvedCloseDelay = closeDelay ?? mouseLeaveDelay * 1000;\n\n    // Get placement configuration\n    const placementConfig = placementMap[placement] ?? placementMap.top;\n    const resolvedSideOffset = arrow ? 10 : 6;\n\n    // Determine portal container\n    const portalContainer = usePopoverPortalContainer();\n\n    const { resolvedNativeButton } = useNativeButton({\n      children,\n      nativeButton,\n    });\n\n    const resolvedClassNames = useMemo(\n      () => ({\n        arrow: classNames?.arrow,\n        popup: className,\n        positioner: classNames?.root,\n        trigger: classNames?.trigger,\n        viewport: classNames?.content,\n      }),\n      [className, classNames?.arrow, classNames?.content, classNames?.root, classNames?.trigger],\n    );\n\n    // Render trigger element\n    const triggerElement = useMemo(() => {\n      const baseTriggerProps = {\n        closeDelay: resolvedCloseDelay,\n        delay: resolvedOpenDelay,\n        disabled,\n        openOnHover: openOnHover && !disabled,\n        ...triggerProps,\n      };\n\n      return (\n        <PopoverTriggerElement\n          handle={popoverHandle}\n          {...baseTriggerProps}\n          className={resolvedClassNames.trigger}\n          nativeButton={resolvedNativeButton}\n          ref={refProp as any}\n        >\n          {children}\n        </PopoverTriggerElement>\n      );\n    }, [\n      children,\n      disabled,\n      openOnHover,\n      popoverHandle,\n      refProp,\n      resolvedClassNames.trigger,\n      resolvedNativeButton,\n      resolvedOpenDelay,\n      resolvedCloseDelay,\n      triggerProps,\n    ]);\n\n    // Custom container from getPopupContainer\n    const customContainer = useMemo(() => {\n      if (!getPopupContainer || !isClient) return undefined;\n      // We need a reference element, but we don't have it until render\n      // This will be handled by the portal container logic\n      return undefined;\n    }, [getPopupContainer, isClient]);\n\n    const resolvedStyles = useMemo(\n      () => ({\n        arrow: styleProps?.arrow,\n        positioner: {\n          ...styleProps?.root,\n          ...(zIndex !== undefined ? { zIndex } : {}),\n        },\n        viewport: styleProps?.content,\n      }),\n      [styleProps?.arrow, styleProps?.content, styleProps?.root, zIndex],\n    );\n\n    const popup = useMemo(\n      () => (\n        <PopoverPositioner\n          align={placementConfig.align}\n          className={resolvedClassNames.positioner}\n          hoverTrigger={openOnHover}\n          placement={placement}\n          side={placementConfig.side}\n          sideOffset={resolvedSideOffset}\n          style={resolvedStyles.positioner}\n          {...positionerProps}\n        >\n          <PopoverPopup className={resolvedClassNames.popup} {...popupProps}>\n            {arrow && (\n              <PopoverArrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n                {PopoverArrowIcon}\n              </PopoverArrow>\n            )}\n            <PopoverViewport\n              className={resolvedClassNames.viewport}\n              style={resolvedStyles.viewport}\n            >\n              <PopoverProvider value={contextValue}>{content}</PopoverProvider>\n            </PopoverViewport>\n          </PopoverPopup>\n        </PopoverPositioner>\n      ),\n      [\n        arrow,\n        content,\n        contextValue,\n        openOnHover,\n        placement,\n        placementConfig.align,\n        placementConfig.side,\n        popupProps,\n        positionerProps,\n        resolvedClassNames,\n        resolvedSideOffset,\n        resolvedStyles,\n      ],\n    );\n\n    // Don't render popup if no content\n    if (!content) {\n      return children;\n    }\n\n    const resolvedPortalContainer = customContainer ?? portalContainer;\n\n    return (\n      <PopoverRoot\n        defaultOpen={defaultOpen}\n        handle={popoverHandle}\n        open={resolvedOpen}\n        onOpenChange={handleOpenChange}\n      >\n        {triggerElement}\n        {backdropProps && <BasePopover.Backdrop {...backdropProps} />}\n        {resolvedPortalContainer ? (\n          <PopoverPortal container={resolvedPortalContainer} {...portalProps}>\n            {popup}\n          </PopoverPortal>\n        ) : null}\n      </PopoverRoot>\n    );\n  },\n);\n\nPopoverStandalone.displayName = 'PopoverStandalone';\n"],"mappings":"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"}

package/es/base-ui/Popover/atoms.d.mts

@@ -53,6 +53,7 @@ declare const PopoverPositioner: {
     align,
     side,
     sideOffset,
+    style,
     ...rest
   }: PopoverPositionerAtomProps): _$react_jsx_runtime0.JSX.Element;
   displayName: string;

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

@@ -2,6 +2,7 @@
 import { useNativeButton } from "../../hooks/useNativeButton.mjs";
 import { FloatingLayerProvider } from "../../hooks/useFloatingLayer.mjs";
 import { placementMap } from "../../utils/placement.mjs";
+import { useLayerZIndex } from "../zIndex/useLayerZIndex.mjs";
 import { PopoverArrowIcon } from "./ArrowIcon.mjs";
 import { usePopoverPortalContainer } from "./PopoverPortal.mjs";
 import { styles } from "./style.mjs";
@@ -9,7 +10,7 @@ import { cloneElement, isValidElement, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { mergeProps } from "@base-ui/react/merge-props";
-import { mergeRefs } from "react-merge-refs";
+import { mergeRefs, useMergeRefs } from "react-merge-refs";
 import { Popover } from "@base-ui/react/popover";
 //#region src/base-ui/Popover/atoms.tsx
 const PopoverRoot = Popover.Root;
@@ -62,16 +63,26 @@ const PopoverPortal = ({ container, root, children, ...rest }) => {
 	});
 };
 PopoverPortal.displayName = "PopoverPortal";
-const PopoverPositioner = ({ children, className, hoverTrigger, placement, align, side, sideOffset, ...rest }) => {
+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 composedRef = useMergeRefs([setPositionerNode, zRef]);
+	const resolvedStyle = typeof style === "function" ? (state) => ({
+		zIndex,
+		...style(state)
+	}) : {
+		zIndex,
+		...style
+	};
 	return /* @__PURE__ */ jsx(Popover.Positioner, {
 		align: align ?? placementConfig?.align ?? "center",
 		"data-hover-trigger": hoverTrigger || void 0,
 		"data-placement": placement,
-		ref: setPositionerNode,
+		ref: composedRef,
 		side: side ?? placementConfig?.side ?? "bottom",
 		sideOffset: sideOffset ?? 6,
+		style: resolvedStyle,
 		className: (state) => cx(styles.positioner, typeof className === "function" ? className(state) : className),
 		...rest,
 		children: /* @__PURE__ */ jsx(FloatingLayerProvider, {

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 } from 'react-merge-refs';\n\nimport { FloatingLayerProvider } from '@/hooks/useFloatingLayer';\nimport { useNativeButton } from '@/hooks/useNativeButton';\nimport { placementMap } from '@/utils/placement';\n\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  ...rest\n}: PopoverPositionerAtomProps) => {\n  const placementConfig = placement ? placementMap[placement] : undefined;\n  const [positionerNode, setPositionerNode] = useState<HTMLDivElement | null>(null);\n\n  return (\n    <BasePopover.Positioner\n      align={align ?? placementConfig?.align ?? 'center'}\n      data-hover-trigger={hoverTrigger || undefined}\n      data-placement={placement}\n      ref={setPositionerNode}\n      side={side ?? placementConfig?.side ?? 'bottom'}\n      sideOffset={sideOffset ?? 6}\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":";;;;;;;;;;;;;;AAuBA,MAAa,cAAcA,QAAY;AACvC,MAAa,kBAAkBA,QAAY;AAS3C,MAAa,yBAAyB,EACpC,UACA,WACA,cACA,KAAK,SACL,GAAG,WAC6B;CAChC,MAAM,EAAE,8BAA8B,yBAAyB,gBAAgB;EAC7E;EACA;EACD,CAAC;AAEF,KAAI,eAAe,SAAS,CAC1B,QACE,oBAACA,QAAY,SAAb;EACE,GAAI;EACJ,cAAc;EACd,SAAS,OAAO,UAAU;GAGxB,MAAM,uBAAuB;AAC3B,QAAI,6BAA8B,QAAO;IAEzC,MAAM,EAAE,MAAM,KAAK,YAAY,GAAG,cAAc;AAChD,WAAO;OACL;GAEJ,MAAM,cAAc,WAAY,SAAiB,OAAO,cAAc;GACtE,MAAM,gBACJ,OAAQ,YAAoB,cAAc,aACrC,YAAoB,UAAU,MAAM,GACpC,YAAoB;GAC3B,MAAM,iBACJ,OAAQ,cAAsB,aAAc,UAAkB,MAAM,GAAG;AAEzE,UAAO,aAAa,UAAiB;IACnC,GAAG;IACH,WAAW,GAAG,eAAe,eAAe;IAC5C,KAAK,UAAU;KAAE,SAAiB;KAAM,MAAc;KAAK;KAAQ,CAAC;IACrE,CAAC;;EAEJ,CAAA;AAIN,QACE,oBAACA,QAAY,SAAb;EACE,GAAI;EACO;EACX,cAAc;EACd,KAAK;EAEJ;EACmB,CAAA;;AAI1B,sBAAsB,cAAc;AAgBpC,MAAa,iBAAiB,EAAE,WAAW,MAAM,UAAU,GAAG,WAAmC;CAC/F,MAAM,mBAAmB,0BAA0B,KAAK;CACxD,MAAM,oBAAoB,aAAa;AAEvC,KAAI,CAAC,kBAAmB,QAAO;AAE/B,QACE,oBAACA,QAAY,QAAb;EAAoB,WAAW;EAAmB,GAAI;EACnD;EACkB,CAAA;;AAIzB,cAAc,cAAc;AAO5B,MAAa,qBAAqB,EAChC,UACA,WACA,cACA,WACA,OACA,MACA,YACA,GAAG,WAC6B;CAChC,MAAM,kBAAkB,YAAY,aAAa,aAAa,KAAA;CAC9D,MAAM,CAAC,gBAAgB,qBAAqB,SAAgC,KAAK;AAEjF,QACE,oBAACA,QAAY,YAAb;EACE,OAAO,SAAS,iBAAiB,SAAS;EAC1C,sBAAoB,gBAAgB,KAAA;EACpC,kBAAgB;EAChB,KAAK;EACL,MAAM,QAAQ,iBAAiB,QAAQ;EACvC,YAAY,cAAc;EAC1B,YAAY,UACV,GAAG,OAAO,YAAY,OAAO,cAAc,aAAa,UAAU,MAAM,GAAG,UAAU;EAEvF,GAAI;YAEJ,oBAAC,uBAAD;GAAuB,OAAO;GAAiB;GAAiC,CAAA;EACzD,CAAA;;AAI7B,kBAAkB,cAAc;AAIhC,MAAa,gBAAgB,EAAE,WAAW,GAAG,WAAkC;AAC7E,QACE,oBAACA,QAAY,OAAb;EACE,YAAY,UACV,GAAG,OAAO,OAAO,OAAO,cAAc,aAAa,UAAU,MAAM,GAAG,UAAU;EAElF,GAAI;EACJ,CAAA;;AAIN,aAAa,cAAc;AAI3B,MAAa,gBAAgB,EAAE,WAAW,UAAU,GAAG,WAAkC;AACvF,QACE,oBAACA,QAAY,OAAb;EACE,YAAY,UACV,GAAG,OAAO,OAAO,OAAO,cAAc,aAAa,UAAU,MAAM,GAAG,UAAU;EAElF,GAAI;YAEH,YAAY;EACK,CAAA;;AAIxB,aAAa,cAAc;AAI3B,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAAqC;AACnF,QACE,oBAACA,QAAY,UAAb;EACE,YAAY,UACV,GAAG,OAAO,UAAU,OAAO,cAAc,aAAa,UAAU,MAAM,GAAG,UAAU;EAErF,GAAI;EACJ,CAAA;;AAIN,gBAAgB,cAAc"}
+{"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/style.mjs

@@ -59,6 +59,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
 
     min-width: 120px;
     max-width: var(--available-width);
+    border: 1px solid ${cssVar.colorBorderSecondary};
     border-radius: ${cssVar.borderRadius};
 
     color: ${cssVar.colorText};

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Popover/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    --lobe-popover-arrow-offset-block: 5px;\n    --lobe-popover-arrow-offset-inline: 8px;\n\n    pointer-events: none;\n\n    position: absolute;\n    transform-origin: center;\n\n    display: flex;\n\n    width: 12px;\n    height: 6px;\n\n    transition: inset-inline-start var(--lobe-popover-animation-duration)\n      var(--lobe-popover-animation-ease-out);\n\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    & [data-role='fill'] {\n      fill: ${cssVar.colorBgElevated};\n    }\n\n    & [data-role='stroke'] {\n      fill: none;\n      stroke: ${cssVar.colorBorder};\n      stroke-width: 1px;\n    }\n\n    &[data-side='top'] {\n      inset-block-end: calc(var(--lobe-popover-arrow-offset-block) * -1);\n      transform: rotate(180deg);\n    }\n\n    &[data-side='left'] {\n      inset-inline-end: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n      transform: rotate(90deg);\n    }\n\n    &[data-side='right'] {\n      inset-inline-start: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n      transform: rotate(-90deg);\n    }\n\n    &[data-side='bottom'] {\n      inset-block-start: calc(var(--lobe-popover-arrow-offset-block) * -1);\n    }\n  `,\n\n  popup: css`\n    position: relative;\n    transform-origin: var(--transform-origin);\n\n    min-width: 120px;\n    max-width: var(--available-width);\n    border-radius: ${cssVar.borderRadius};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    outline: none;\n    box-shadow:\n      0 0 15px 0 #00000008,\n      0 2px 30px 0 #00000014;\n\n    transition-timing-function: var(--lobe-popover-animation-ease-out);\n    transition-duration: var(--lobe-popover-animation-duration);\n    transition-property: opacity, transform;\n\n    &[data-layout-animation] {\n      transition-property: opacity, transform, width, height;\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0)\n        scale(var(--lobe-popover-animation-scale));\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transition-timing-function: var(--lobe-popover-animation-ease-in);\n      transition-duration: var(--lobe-popover-animation-duration-exit);\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n  `,\n\n  positioner: css`\n    --lobe-popover-animation-duration: 150ms;\n    --lobe-popover-animation-translate: 6px;\n    --lobe-popover-animation-scale: 0.96;\n    --lobe-popover-animation-ease-in: ease-in;\n    --lobe-popover-animation-duration-exit: 75ms;\n    --lobe-popover-animation-ease-out: ${cssVar.motionEaseOut};\n    --lobe-popover-translate-x: 0;\n    --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n\n    z-index: 1100;\n\n    width: min(var(--positioner-width), var(--available-width));\n    height: var(--positioner-height);\n\n    transition-timing-function: var(--lobe-popover-animation-ease-out);\n    transition-duration: var(--lobe-popover-animation-duration);\n    transition-property: none;\n\n    &[data-layout-animation] {\n      transition-property:\n        inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n\n    /* Fallback: never show a popover when the anchor is hidden or the positioner falls back to (0,0). */\n    &[data-anchor-hidden],\n    &[data-zero-origin='true'] {\n      pointer-events: none;\n      visibility: hidden;\n    }\n\n    &[data-placement='top'],\n    &[data-placement='topLeft'],\n    &[data-placement='topRight'] {\n      --lobe-popover-translate-x: 0;\n      --lobe-popover-translate-y: var(--lobe-popover-animation-translate);\n    }\n\n    &[data-placement='bottom'],\n    &[data-placement='bottomLeft'],\n    &[data-placement='bottomRight'] {\n      --lobe-popover-translate-x: 0;\n      --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n    }\n\n    &[data-placement='left'],\n    &[data-placement='leftTop'],\n    &[data-placement='leftBottom'] {\n      --lobe-popover-translate-x: var(--lobe-popover-animation-translate);\n      --lobe-popover-translate-y: 0;\n    }\n\n    &[data-placement='right'],\n    &[data-placement='rightTop'],\n    &[data-placement='rightBottom'] {\n      --lobe-popover-translate-x: calc(var(--lobe-popover-animation-translate) * -1);\n      --lobe-popover-translate-y: 0;\n    }\n  `,\n\n  root: css`\n    user-select: none;\n    position: relative;\n    filter: drop-shadow(0 2px 8px rgb(0 0 0 / 12%));\n  `,\n\n  viewport: css`\n    --lobe-popover-viewport-inline-padding: 12px;\n\n    position: relative;\n\n    overflow: clip;\n\n    max-width: var(--available-width);\n    padding-block: 12px;\n    padding-inline: var(--lobe-popover-viewport-inline-padding);\n\n    [data-previous],\n    [data-current] {\n      transform: translateX(0);\n      opacity: 1;\n      transition:\n        transform var(--lobe-popover-animation-duration) var(--lobe-popover-animation-ease-out),\n        opacity calc(var(--lobe-popover-animation-duration) / 2)\n          var(--lobe-popover-animation-ease-out);\n    }\n\n    [data-previous] {\n      position: absolute;\n      inset-block-start: 12px;\n      inset-inline-start: var(--lobe-popover-viewport-inline-padding);\n    }\n\n    &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n      transform: translateX(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='right'] [data-current][data-starting-style] {\n      transform: translateX(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n      transform: translateX(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-current][data-starting-style] {\n      transform: translateX(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n      transform: translateY(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-current][data-starting-style] {\n      transform: translateY(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n      transform: translateY(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-current][data-starting-style] {\n      transform: translateY(-50%);\n      opacity: 0;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;cAwBE,OAAO,gBAAgB;;;;;gBAKrB,OAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAwBjC,OAAO,GAAG;;;;;;qBAMS,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BvC,YAAY,GAAG;;;;;;yCAMwB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D5D,MAAM,GAAG;;;;;CAMT,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEd,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Popover/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    --lobe-popover-arrow-offset-block: 5px;\n    --lobe-popover-arrow-offset-inline: 8px;\n\n    pointer-events: none;\n\n    position: absolute;\n    transform-origin: center;\n\n    display: flex;\n\n    width: 12px;\n    height: 6px;\n\n    transition: inset-inline-start var(--lobe-popover-animation-duration)\n      var(--lobe-popover-animation-ease-out);\n\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n\n    & [data-role='fill'] {\n      fill: ${cssVar.colorBgElevated};\n    }\n\n    & [data-role='stroke'] {\n      fill: none;\n      stroke: ${cssVar.colorBorder};\n      stroke-width: 1px;\n    }\n\n    &[data-side='top'] {\n      inset-block-end: calc(var(--lobe-popover-arrow-offset-block) * -1);\n      transform: rotate(180deg);\n    }\n\n    &[data-side='left'] {\n      inset-inline-end: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n      transform: rotate(90deg);\n    }\n\n    &[data-side='right'] {\n      inset-inline-start: calc(var(--lobe-popover-arrow-offset-inline) * -1);\n      transform: rotate(-90deg);\n    }\n\n    &[data-side='bottom'] {\n      inset-block-start: calc(var(--lobe-popover-arrow-offset-block) * -1);\n    }\n  `,\n\n  popup: css`\n    position: relative;\n    transform-origin: var(--transform-origin);\n\n    min-width: 120px;\n    max-width: var(--available-width);\n    border: 1px solid ${cssVar.colorBorderSecondary};\n    border-radius: ${cssVar.borderRadius};\n\n    color: ${cssVar.colorText};\n\n    background: ${cssVar.colorBgElevated};\n    outline: none;\n    box-shadow:\n      0 0 15px 0 #00000008,\n      0 2px 30px 0 #00000014;\n\n    transition-timing-function: var(--lobe-popover-animation-ease-out);\n    transition-duration: var(--lobe-popover-animation-duration);\n    transition-property: opacity, transform;\n\n    &[data-layout-animation] {\n      transition-property: opacity, transform, width, height;\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0)\n        scale(var(--lobe-popover-animation-scale));\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transition-timing-function: var(--lobe-popover-animation-ease-in);\n      transition-duration: var(--lobe-popover-animation-duration-exit);\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n  `,\n\n  positioner: css`\n    --lobe-popover-animation-duration: 150ms;\n    --lobe-popover-animation-translate: 6px;\n    --lobe-popover-animation-scale: 0.96;\n    --lobe-popover-animation-ease-in: ease-in;\n    --lobe-popover-animation-duration-exit: 75ms;\n    --lobe-popover-animation-ease-out: ${cssVar.motionEaseOut};\n    --lobe-popover-translate-x: 0;\n    --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n\n    z-index: 1100;\n\n    width: min(var(--positioner-width), var(--available-width));\n    height: var(--positioner-height);\n\n    transition-timing-function: var(--lobe-popover-animation-ease-out);\n    transition-duration: var(--lobe-popover-animation-duration);\n    transition-property: none;\n\n    &[data-layout-animation] {\n      transition-property:\n        inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n\n    /* Fallback: never show a popover when the anchor is hidden or the positioner falls back to (0,0). */\n    &[data-anchor-hidden],\n    &[data-zero-origin='true'] {\n      pointer-events: none;\n      visibility: hidden;\n    }\n\n    &[data-placement='top'],\n    &[data-placement='topLeft'],\n    &[data-placement='topRight'] {\n      --lobe-popover-translate-x: 0;\n      --lobe-popover-translate-y: var(--lobe-popover-animation-translate);\n    }\n\n    &[data-placement='bottom'],\n    &[data-placement='bottomLeft'],\n    &[data-placement='bottomRight'] {\n      --lobe-popover-translate-x: 0;\n      --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);\n    }\n\n    &[data-placement='left'],\n    &[data-placement='leftTop'],\n    &[data-placement='leftBottom'] {\n      --lobe-popover-translate-x: var(--lobe-popover-animation-translate);\n      --lobe-popover-translate-y: 0;\n    }\n\n    &[data-placement='right'],\n    &[data-placement='rightTop'],\n    &[data-placement='rightBottom'] {\n      --lobe-popover-translate-x: calc(var(--lobe-popover-animation-translate) * -1);\n      --lobe-popover-translate-y: 0;\n    }\n  `,\n\n  root: css`\n    user-select: none;\n    position: relative;\n    filter: drop-shadow(0 2px 8px rgb(0 0 0 / 12%));\n  `,\n\n  viewport: css`\n    --lobe-popover-viewport-inline-padding: 12px;\n\n    position: relative;\n\n    overflow: clip;\n\n    max-width: var(--available-width);\n    padding-block: 12px;\n    padding-inline: var(--lobe-popover-viewport-inline-padding);\n\n    [data-previous],\n    [data-current] {\n      transform: translateX(0);\n      opacity: 1;\n      transition:\n        transform var(--lobe-popover-animation-duration) var(--lobe-popover-animation-ease-out),\n        opacity calc(var(--lobe-popover-animation-duration) / 2)\n          var(--lobe-popover-animation-ease-out);\n    }\n\n    [data-previous] {\n      position: absolute;\n      inset-block-start: 12px;\n      inset-inline-start: var(--lobe-popover-viewport-inline-padding);\n    }\n\n    &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n      transform: translateX(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='right'] [data-current][data-starting-style] {\n      transform: translateX(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n      transform: translateX(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-current][data-starting-style] {\n      transform: translateX(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n      transform: translateY(-50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-current][data-starting-style] {\n      transform: translateY(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n      transform: translateY(50%);\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-current][data-starting-style] {\n      transform: translateY(-50%);\n      opacity: 0;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;cAwBE,OAAO,gBAAgB;;;;;gBAKrB,OAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAwBjC,OAAO,GAAG;;;;;;wBAMY,OAAO,qBAAqB;qBAC/B,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BvC,YAAY,GAAG;;;;;;yCAMwB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D5D,MAAM,GAAG;;;;;CAMT,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmEd,EAAE"}

package/es/base-ui/ScrollArea/atoms.d.mts

@@ -4,12 +4,19 @@ import { ScrollArea } from "@base-ui/react/scroll-area";
 
 //#region src/base-ui/ScrollArea/atoms.d.ts
 type ScrollAreaRootProps = React.ComponentProps<typeof ScrollArea.Root>;
+type ScrollAreaFadeOrientation = 'vertical' | 'horizontal' | 'both';
 type ScrollAreaViewportProps = React.ComponentProps<typeof ScrollArea.Viewport> & {
   /**
    * Enable gradient scroll fade on the viewport edges.
+   *
+   * - `true` / `'vertical'`: fade top and bottom edges.
+   * - `'horizontal'`: fade start and end edges.
+   * - `'both'`: fade all four edges (combined via `mask-composite: intersect`).
+   * - `false`: no fade.
+   *
    * @default false
    */
-  scrollFade?: boolean;
+  scrollFade?: boolean | ScrollAreaFadeOrientation;
 };
 type ScrollAreaContentProps = React.ComponentProps<typeof ScrollArea.Content>;
 type ScrollAreaScrollbarProps = React.ComponentProps<typeof ScrollArea.Scrollbar>;
@@ -59,5 +66,5 @@ declare const ScrollAreaCorner: {
   displayName: string;
 };
 //#endregion
-export { ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps };
+export { ScrollAreaContent, ScrollAreaContentProps, ScrollAreaCorner, ScrollAreaCornerProps, ScrollAreaFadeOrientation, ScrollAreaRoot, ScrollAreaRootProps, ScrollAreaScrollbar, ScrollAreaScrollbarProps, ScrollAreaThumb, ScrollAreaThumbProps, ScrollAreaViewport, ScrollAreaViewportProps };
 //# sourceMappingURL=atoms.d.mts.map

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

@@ -16,10 +16,17 @@ const ScrollAreaRoot = ({ className, ...rest }) => {
 	});
 };
 ScrollAreaRoot.displayName = "ScrollAreaRoot";
+const resolveFadeClass = (scrollFade) => {
+	if (!scrollFade) return void 0;
+	const orientation = scrollFade === true ? "vertical" : scrollFade;
+	if (orientation === "horizontal") return styles.viewportFadeHorizontal;
+	if (orientation === "both") return styles.viewportFadeBoth;
+	return styles.viewportFade;
+};
 const ScrollAreaViewport = ({ className, scrollFade = false, ...rest }) => {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(ScrollAreaGlobalStyle, {}), /* @__PURE__ */ jsx(ScrollArea.Viewport, {
 		...rest,
-		className: mergeStateClassName(cx(styles.viewport, scrollFade && styles.viewportFade), className)
+		className: mergeStateClassName(cx(styles.viewport, resolveFadeClass(scrollFade)), className)
 	})] });
 };
 ScrollAreaViewport.displayName = "ScrollAreaViewport";

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

@@ -1 +1 @@
-{"version":3,"file":"atoms.mjs","names":["BaseScrollArea"],"sources":["../../../src/base-ui/ScrollArea/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { cx } from 'antd-style';\nimport type React from 'react';\n\nimport ScrollAreaGlobalStyle from './globalStyle';\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\nexport type ScrollAreaRootProps = React.ComponentProps<typeof BaseScrollArea.Root>;\nexport type ScrollAreaViewportProps = React.ComponentProps<typeof BaseScrollArea.Viewport> & {\n  /**\n   * Enable gradient scroll fade on the viewport edges.\n   * @default false\n   */\n  scrollFade?: boolean;\n};\nexport type ScrollAreaContentProps = React.ComponentProps<typeof BaseScrollArea.Content>;\nexport type ScrollAreaScrollbarProps = React.ComponentProps<typeof BaseScrollArea.Scrollbar>;\nexport type ScrollAreaThumbProps = React.ComponentProps<typeof BaseScrollArea.Thumb>;\nexport type ScrollAreaCornerProps = React.ComponentProps<typeof BaseScrollArea.Corner>;\n\nexport const ScrollAreaRoot = ({ className, ...rest }: ScrollAreaRootProps) => {\n  return (\n    <BaseScrollArea.Root {...rest} className={mergeStateClassName(styles.root, className) as any} />\n  );\n};\n\nScrollAreaRoot.displayName = 'ScrollAreaRoot';\n\nexport const ScrollAreaViewport = ({\n  className,\n  scrollFade = false,\n  ...rest\n}: ScrollAreaViewportProps) => {\n  return (\n    <>\n      <ScrollAreaGlobalStyle />\n      <BaseScrollArea.Viewport\n        {...rest}\n        className={\n          mergeStateClassName(\n            cx(styles.viewport, scrollFade && styles.viewportFade),\n            className,\n          ) as any\n        }\n      />\n    </>\n  );\n};\n\nScrollAreaViewport.displayName = 'ScrollAreaViewport';\n\nexport const ScrollAreaContent = ({ className, ...rest }: ScrollAreaContentProps) => {\n  return (\n    <BaseScrollArea.Content\n      {...rest}\n      className={mergeStateClassName(styles.content, className) as any}\n    />\n  );\n};\n\nScrollAreaContent.displayName = 'ScrollAreaContent';\n\nexport const ScrollAreaScrollbar = ({ className, ...rest }: ScrollAreaScrollbarProps) => {\n  return (\n    <BaseScrollArea.Scrollbar\n      {...rest}\n      className={mergeStateClassName(styles.scrollbar, className) as any}\n    />\n  );\n};\n\nScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';\n\nexport const ScrollAreaThumb = ({ className, ...rest }: ScrollAreaThumbProps) => {\n  return (\n    <BaseScrollArea.Thumb\n      {...rest}\n      className={mergeStateClassName(styles.thumb, className) as any}\n    />\n  );\n};\n\nScrollAreaThumb.displayName = 'ScrollAreaThumb';\n\nexport const ScrollAreaCorner = ({ className, ...rest }: ScrollAreaCornerProps) => {\n  return (\n    <BaseScrollArea.Corner\n      {...rest}\n      className={mergeStateClassName(styles.corner, className) as any}\n    />\n  );\n};\n\nScrollAreaCorner.displayName = 'ScrollAreaCorner';\n"],"mappings":";;;;;;;AASA,MAAM,uBACJ,MACA,cACG;AACH,KAAI,OAAO,cAAc,WAAY,SAAQ,UAAkB,GAAG,MAAM,UAAU,MAAM,CAAC;AACzF,QAAO,GAAG,MAAM,UAAU;;AAgB5B,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAAgC;AAC7E,QACE,oBAACA,WAAe,MAAhB;EAAqB,GAAI;EAAM,WAAW,oBAAoB,OAAO,MAAM,UAAU;EAAW,CAAA;;AAIpG,eAAe,cAAc;AAE7B,MAAa,sBAAsB,EACjC,WACA,aAAa,OACb,GAAG,WAC0B;AAC7B,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,uBAAD,EAAyB,CAAA,EACzB,oBAACA,WAAe,UAAhB;EACE,GAAI;EACJ,WACE,oBACE,GAAG,OAAO,UAAU,cAAc,OAAO,aAAa,EACtD,UACD;EAEH,CAAA,CACD,EAAA,CAAA;;AAIP,mBAAmB,cAAc;AAEjC,MAAa,qBAAqB,EAAE,WAAW,GAAG,WAAmC;AACnF,QACE,oBAACA,WAAe,SAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,SAAS,UAAU;EACzD,CAAA;;AAIN,kBAAkB,cAAc;AAEhC,MAAa,uBAAuB,EAAE,WAAW,GAAG,WAAqC;AACvF,QACE,oBAACA,WAAe,WAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,WAAW,UAAU;EAC3D,CAAA;;AAIN,oBAAoB,cAAc;AAElC,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAAiC;AAC/E,QACE,oBAACA,WAAe,OAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,OAAO,UAAU;EACvD,CAAA;;AAIN,gBAAgB,cAAc;AAE9B,MAAa,oBAAoB,EAAE,WAAW,GAAG,WAAkC;AACjF,QACE,oBAACA,WAAe,QAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,QAAQ,UAAU;EACxD,CAAA;;AAIN,iBAAiB,cAAc"}
+{"version":3,"file":"atoms.mjs","names":["BaseScrollArea"],"sources":["../../../src/base-ui/ScrollArea/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\nimport { cx } from 'antd-style';\nimport type React from 'react';\n\nimport ScrollAreaGlobalStyle from './globalStyle';\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\nexport type ScrollAreaRootProps = React.ComponentProps<typeof BaseScrollArea.Root>;\n\nexport type ScrollAreaFadeOrientation = 'vertical' | 'horizontal' | 'both';\n\nexport type ScrollAreaViewportProps = React.ComponentProps<typeof BaseScrollArea.Viewport> & {\n  /**\n   * Enable gradient scroll fade on the viewport edges.\n   *\n   * - `true` / `'vertical'`: fade top and bottom edges.\n   * - `'horizontal'`: fade start and end edges.\n   * - `'both'`: fade all four edges (combined via `mask-composite: intersect`).\n   * - `false`: no fade.\n   *\n   * @default false\n   */\n  scrollFade?: boolean | ScrollAreaFadeOrientation;\n};\nexport type ScrollAreaContentProps = React.ComponentProps<typeof BaseScrollArea.Content>;\nexport type ScrollAreaScrollbarProps = React.ComponentProps<typeof BaseScrollArea.Scrollbar>;\nexport type ScrollAreaThumbProps = React.ComponentProps<typeof BaseScrollArea.Thumb>;\nexport type ScrollAreaCornerProps = React.ComponentProps<typeof BaseScrollArea.Corner>;\n\nexport const ScrollAreaRoot = ({ className, ...rest }: ScrollAreaRootProps) => {\n  return (\n    <BaseScrollArea.Root {...rest} className={mergeStateClassName(styles.root, className) as any} />\n  );\n};\n\nScrollAreaRoot.displayName = 'ScrollAreaRoot';\n\nconst resolveFadeClass = (\n  scrollFade: ScrollAreaViewportProps['scrollFade'],\n): string | undefined => {\n  if (!scrollFade) return undefined;\n  const orientation: ScrollAreaFadeOrientation = scrollFade === true ? 'vertical' : scrollFade;\n  if (orientation === 'horizontal') return styles.viewportFadeHorizontal;\n  if (orientation === 'both') return styles.viewportFadeBoth;\n  return styles.viewportFade;\n};\n\nexport const ScrollAreaViewport = ({\n  className,\n  scrollFade = false,\n  ...rest\n}: ScrollAreaViewportProps) => {\n  return (\n    <>\n      <ScrollAreaGlobalStyle />\n      <BaseScrollArea.Viewport\n        {...rest}\n        className={\n          mergeStateClassName(cx(styles.viewport, resolveFadeClass(scrollFade)), className) as any\n        }\n      />\n    </>\n  );\n};\n\nScrollAreaViewport.displayName = 'ScrollAreaViewport';\n\nexport const ScrollAreaContent = ({ className, ...rest }: ScrollAreaContentProps) => {\n  return (\n    <BaseScrollArea.Content\n      {...rest}\n      className={mergeStateClassName(styles.content, className) as any}\n    />\n  );\n};\n\nScrollAreaContent.displayName = 'ScrollAreaContent';\n\nexport const ScrollAreaScrollbar = ({ className, ...rest }: ScrollAreaScrollbarProps) => {\n  return (\n    <BaseScrollArea.Scrollbar\n      {...rest}\n      className={mergeStateClassName(styles.scrollbar, className) as any}\n    />\n  );\n};\n\nScrollAreaScrollbar.displayName = 'ScrollAreaScrollbar';\n\nexport const ScrollAreaThumb = ({ className, ...rest }: ScrollAreaThumbProps) => {\n  return (\n    <BaseScrollArea.Thumb\n      {...rest}\n      className={mergeStateClassName(styles.thumb, className) as any}\n    />\n  );\n};\n\nScrollAreaThumb.displayName = 'ScrollAreaThumb';\n\nexport const ScrollAreaCorner = ({ className, ...rest }: ScrollAreaCornerProps) => {\n  return (\n    <BaseScrollArea.Corner\n      {...rest}\n      className={mergeStateClassName(styles.corner, className) as any}\n    />\n  );\n};\n\nScrollAreaCorner.displayName = 'ScrollAreaCorner';\n"],"mappings":";;;;;;;AASA,MAAM,uBACJ,MACA,cACG;AACH,KAAI,OAAO,cAAc,WAAY,SAAQ,UAAkB,GAAG,MAAM,UAAU,MAAM,CAAC;AACzF,QAAO,GAAG,MAAM,UAAU;;AAyB5B,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAAgC;AAC7E,QACE,oBAACA,WAAe,MAAhB;EAAqB,GAAI;EAAM,WAAW,oBAAoB,OAAO,MAAM,UAAU;EAAW,CAAA;;AAIpG,eAAe,cAAc;AAE7B,MAAM,oBACJ,eACuB;AACvB,KAAI,CAAC,WAAY,QAAO,KAAA;CACxB,MAAM,cAAyC,eAAe,OAAO,aAAa;AAClF,KAAI,gBAAgB,aAAc,QAAO,OAAO;AAChD,KAAI,gBAAgB,OAAQ,QAAO,OAAO;AAC1C,QAAO,OAAO;;AAGhB,MAAa,sBAAsB,EACjC,WACA,aAAa,OACb,GAAG,WAC0B;AAC7B,QACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,uBAAD,EAAyB,CAAA,EACzB,oBAACA,WAAe,UAAhB;EACE,GAAI;EACJ,WACE,oBAAoB,GAAG,OAAO,UAAU,iBAAiB,WAAW,CAAC,EAAE,UAAU;EAEnF,CAAA,CACD,EAAA,CAAA;;AAIP,mBAAmB,cAAc;AAEjC,MAAa,qBAAqB,EAAE,WAAW,GAAG,WAAmC;AACnF,QACE,oBAACA,WAAe,SAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,SAAS,UAAU;EACzD,CAAA;;AAIN,kBAAkB,cAAc;AAEhC,MAAa,uBAAuB,EAAE,WAAW,GAAG,WAAqC;AACvF,QACE,oBAACA,WAAe,WAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,WAAW,UAAU;EAC3D,CAAA;;AAIN,oBAAoB,cAAc;AAElC,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAAiC;AAC/E,QACE,oBAACA,WAAe,OAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,OAAO,UAAU;EACvD,CAAA;;AAIN,gBAAgB,cAAc;AAE9B,MAAa,oBAAoB,EAAE,WAAW,GAAG,WAAkC;AACjF,QACE,oBAACA,WAAe,QAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,QAAQ,UAAU;EACxD,CAAA;;AAIN,iBAAiB,cAAc"}