@lobehub/ui 5.42.5 → 5.42.7

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

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

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

@@ -1,6 +1,7 @@
 "use client";
 import { placementMap } from "../../utils/placement.mjs";
 import { useDestroyOnInvalidActiveTriggerElement, useHidePopupWhenPositionerAtOrigin, usePopupHandleStore } from "../../utils/destroyOnInvalidActiveTriggerElement.mjs";
+import { useRepopOnFarTriggerSwitch } from "../../utils/useRepopOnFarTriggerSwitch.mjs";
 import { parseTrigger } from "../../utils/parseTrigger.mjs";
 import { PopoverArrowIcon } from "./ArrowIcon.mjs";
 import { usePopoverPortalContainer } from "./PopoverPortal.mjs";
@@ -12,7 +13,7 @@ import { useCallback, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
 //#region src/base-ui/Popover/PopoverGroup.tsx
-const PopoverGroup = ({ children, contentLayoutAnimation = false, disableDestroyOnInvalidTrigger = false, disableZeroOriginGuard = false, ...sharedProps }) => {
+const PopoverGroup = ({ children, contentLayoutAnimation = true, disableDestroyOnInvalidTrigger = false, disableZeroOriginGuard = false, ...sharedProps }) => {
 	const [{ handle, key }, setHandleState] = useState(() => ({
 		handle: Popover.createHandle(),
 		key: 0
@@ -42,6 +43,7 @@ const PopoverGroup = ({ children, contentLayoutAnimation = false, disableDestroy
 	const store = usePopupHandleStore(handle);
 	useDestroyOnInvalidActiveTriggerElement(store, destroy, { enabled: !disableDestroyOnInvalidTrigger });
 	useHidePopupWhenPositionerAtOrigin(store, { enabled: !disableZeroOriginGuard });
+	const repop = useRepopOnFarTriggerSwitch(store, { enabled: contentLayoutAnimation });
 	const portalContainer = usePopoverPortalContainer();
 	return /* @__PURE__ */ jsx(PopoverGroupHandleContext, {
 		value: handle,
@@ -81,6 +83,7 @@ const PopoverGroup = ({ children, contentLayoutAnimation = false, disableDestroy
 						align: placementConfig.align,
 						className: resolvedClassNames.positioner,
 						"data-layout-animation": contentLayoutAnimation || void 0,
+						"data-repop": repop || void 0,
 						hoverTrigger: openOnHover,
 						placement,
 						side: placementConfig.side,
@@ -90,6 +93,7 @@ const PopoverGroup = ({ children, contentLayoutAnimation = false, disableDestroy
 						children: /* @__PURE__ */ jsxs(PopoverPopup, {
 							className: resolvedClassNames.popup,
 							"data-layout-animation": contentLayoutAnimation || void 0,
+							"data-repop": repop || void 0,
 							...item.popupProps,
 							children: [arrow && /* @__PURE__ */ jsx(PopoverArrow, {
 								className: resolvedClassNames.arrow,
@@ -97,6 +101,7 @@ const PopoverGroup = ({ children, contentLayoutAnimation = false, disableDestroy
 								children: PopoverArrowIcon
 							}), /* @__PURE__ */ jsx(PopoverViewport, {
 								className: resolvedClassNames.viewport,
+								"data-repop": repop || void 0,
 								style: resolvedStyles.viewport,
 								children: contentNode
 							})]

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  usePopupHandleStore,\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 { isHoverOnlyTriggerElement, shouldCancelHoverOnlyPressOpen } from './hoverOnlyPress';\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(\n    (\n      nextOpen: boolean,\n      eventDetails?: { cancel?: () => void; reason?: string; trigger?: unknown },\n    ) => {\n      const item = activeItemRef.current;\n      // The press belongs to the trigger that fired it, which is not necessarily\n      // the member currently showing — judging by `activeItemRef` cancels every\n      // click member's first press, since the active one is a hover member (or\n      // none, which also reads as hover-only).\n      const hoverOnlyTrigger = isHoverOnlyTriggerElement(eventDetails?.trigger);\n      const openOnClick =\n        hoverOnlyTrigger === null\n          ? parseTrigger(item?.trigger ?? 'hover').openOnClick\n          : !hoverOnlyTrigger;\n\n      if (shouldCancelHoverOnlyPressOpen(openOnClick, nextOpen, eventDetails?.reason)) {\n        eventDetails?.cancel?.();\n        return;\n      }\n\n      item?.onOpenChange?.(nextOpen);\n    },\n    [],\n  );\n\n  const store = usePopupHandleStore(handle);\n  useDestroyOnInvalidActiveTriggerElement(store, destroy, {\n    enabled: !disableDestroyOnInvalidTrigger,\n  });\n  useHidePopupWhenPositionerAtOrigin(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                  <PopoverViewport\n                    className={resolvedClassNames.viewport}\n                    style={resolvedStyles.viewport}\n                  >\n                    {contentNode}\n                  </PopoverViewport>\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":"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"}
+{"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  usePopupHandleStore,\n} from '@/utils/destroyOnInvalidActiveTriggerElement';\nimport { parseTrigger } from '@/utils/parseTrigger';\nimport { placementMap } from '@/utils/placement';\nimport { useRepopOnFarTriggerSwitch } from '@/utils/useRepopOnFarTriggerSwitch';\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 { isHoverOnlyTriggerElement, shouldCancelHoverOnlyPressOpen } from './hoverOnlyPress';\nimport { usePopoverPortalContainer } from './PopoverPortal';\n\ntype PopoverGroupProps = PopoverGroupSharedProps & {\n  children: ReactNode;\n};\n\nconst PopoverGroup: FC<PopoverGroupProps> = ({\n  children,\n  contentLayoutAnimation = true,\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(\n    (\n      nextOpen: boolean,\n      eventDetails?: { cancel?: () => void; reason?: string; trigger?: unknown },\n    ) => {\n      const item = activeItemRef.current;\n      // The press belongs to the trigger that fired it, which is not necessarily\n      // the member currently showing — judging by `activeItemRef` cancels every\n      // click member's first press, since the active one is a hover member (or\n      // none, which also reads as hover-only).\n      const hoverOnlyTrigger = isHoverOnlyTriggerElement(eventDetails?.trigger);\n      const openOnClick =\n        hoverOnlyTrigger === null\n          ? parseTrigger(item?.trigger ?? 'hover').openOnClick\n          : !hoverOnlyTrigger;\n\n      if (shouldCancelHoverOnlyPressOpen(openOnClick, nextOpen, eventDetails?.reason)) {\n        eventDetails?.cancel?.();\n        return;\n      }\n\n      item?.onOpenChange?.(nextOpen);\n    },\n    [],\n  );\n\n  const store = usePopupHandleStore(handle);\n  useDestroyOnInvalidActiveTriggerElement(store, destroy, {\n    enabled: !disableDestroyOnInvalidTrigger,\n  });\n  useHidePopupWhenPositionerAtOrigin(store, { enabled: !disableZeroOriginGuard });\n  const repop = useRepopOnFarTriggerSwitch(store, { enabled: contentLayoutAnimation });\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                data-repop={repop || 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                  data-repop={repop || undefined}\n                  {...item.popupProps}\n                >\n                  {arrow && (\n                    <PopoverArrow className={resolvedClassNames.arrow} style={resolvedStyles.arrow}>\n                      {PopoverArrowIcon}\n                    </PopoverArrow>\n                  )}\n                  <PopoverViewport\n                    className={resolvedClassNames.viewport}\n                    data-repop={repop || undefined}\n                    style={resolvedStyles.viewport}\n                  >\n                    {contentNode}\n                  </PopoverViewport>\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":"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"}

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

@@ -4,8 +4,8 @@ import { Popover } from "@base-ui/react/popover";
 type PopoverGroupItem = Omit<PopoverProps, 'children' | 'open' | 'defaultOpen' | 'ref'>;
 type PopoverGroupSharedProps = Omit<PopoverProps, 'children' | 'content' | 'defaultOpen' | 'open' | 'ref'> & {
   /**
-   * @description Whether to enable content layout animation when switching triggers
-   * @default false
+   * @description Morph the shared popup (position, size, content) when switching triggers
+   * @default true
    */
   contentLayoutAnimation?: boolean;
   /**

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

@@ -1 +1 @@
-{"version":3,"file":"groupContext.mjs","names":[],"sources":["../../../src/base-ui/Popover/groupContext.ts"],"sourcesContent":["'use client';\n\nimport type { Popover as BasePopover } from '@base-ui/react/popover';\nimport { createContext, use } from 'react';\n\nimport type { PopoverProps } from './type';\n\nexport type PopoverGroupItem = Omit<PopoverProps, 'children' | 'open' | 'defaultOpen' | 'ref'>;\n\nexport type PopoverGroupSharedProps = Omit<\n  PopoverProps,\n  'children' | 'content' | 'defaultOpen' | 'open' | 'ref'\n> & {\n  /**\n   * @description Whether to enable content layout animation when switching triggers\n   * @default false\n   */\n  contentLayoutAnimation?: boolean;\n  /**\n   * Disable the \"destroy on invalid trigger (display:none / disconnected)\" guard for performance.\n   * @default false\n   */\n  disableDestroyOnInvalidTrigger?: boolean;\n  /**\n   * Disable the \"hide when positioner falls back to (0,0)\" visual guard for performance.\n   * @default false\n   */\n  disableZeroOriginGuard?: boolean;\n};\n\nexport type PopoverGroupHandle = ReturnType<typeof BasePopover.createHandle<PopoverGroupItem>>;\n\nexport const PopoverGroupHandleContext = createContext<PopoverGroupHandle | null>(null);\nexport const PopoverGroupPropsContext = createContext<PopoverGroupSharedProps | null>(null);\n\n/**\n * Handle of the enclosing `PopoverGroup`, or `null` outside one. Lets a trigger's\n * neighbourhood drive the shared popup imperatively — `open(triggerId)` needs the\n * trigger to carry a matching `triggerProps.id`.\n */\nexport const usePopoverGroupHandle = () => use(PopoverGroupHandleContext);\n"],"mappings":";;;AAgCA,MAAa,4BAA4B,cAAyC,IAAI;AACtF,MAAa,2BAA2B,cAA8C,IAAI;;;;;;AAO1F,MAAa,8BAA8B,IAAI,yBAAyB"}
+{"version":3,"file":"groupContext.mjs","names":[],"sources":["../../../src/base-ui/Popover/groupContext.ts"],"sourcesContent":["'use client';\n\nimport type { Popover as BasePopover } from '@base-ui/react/popover';\nimport { createContext, use } from 'react';\n\nimport type { PopoverProps } from './type';\n\nexport type PopoverGroupItem = Omit<PopoverProps, 'children' | 'open' | 'defaultOpen' | 'ref'>;\n\nexport type PopoverGroupSharedProps = Omit<\n  PopoverProps,\n  'children' | 'content' | 'defaultOpen' | 'open' | 'ref'\n> & {\n  /**\n   * @description Morph the shared popup (position, size, content) when switching triggers\n   * @default true\n   */\n  contentLayoutAnimation?: boolean;\n  /**\n   * Disable the \"destroy on invalid trigger (display:none / disconnected)\" guard for performance.\n   * @default false\n   */\n  disableDestroyOnInvalidTrigger?: boolean;\n  /**\n   * Disable the \"hide when positioner falls back to (0,0)\" visual guard for performance.\n   * @default false\n   */\n  disableZeroOriginGuard?: boolean;\n};\n\nexport type PopoverGroupHandle = ReturnType<typeof BasePopover.createHandle<PopoverGroupItem>>;\n\nexport const PopoverGroupHandleContext = createContext<PopoverGroupHandle | null>(null);\nexport const PopoverGroupPropsContext = createContext<PopoverGroupSharedProps | null>(null);\n\n/**\n * Handle of the enclosing `PopoverGroup`, or `null` outside one. Lets a trigger's\n * neighbourhood drive the shared popup imperatively — `open(triggerId)` needs the\n * trigger to carry a matching `triggerProps.id`.\n */\nexport const usePopoverGroupHandle = () => use(PopoverGroupHandleContext);\n"],"mappings":";;;AAgCA,MAAa,4BAA4B,cAAyC,IAAI;AACtF,MAAa,2BAA2B,cAA8C,IAAI;;;;;;AAO1F,MAAa,8BAA8B,IAAI,yBAAyB"}

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

@@ -15,8 +15,9 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     width: 12px;
     height: 6px;
 
-    transition: inset-inline-start var(--lobe-popover-animation-duration)
-      var(--lobe-popover-animation-ease-out);
+    transition:
+      inset-inline-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),
+      inset-block-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease);
 
     & > svg {
       display: block;
@@ -57,6 +58,7 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     position: relative;
     transform-origin: var(--transform-origin);
 
+    box-sizing: border-box;
     min-width: 120px;
     max-width: var(--available-width);
     border: 1px solid ${cssVar.colorBorderSecondary};
@@ -74,10 +76,25 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     transition-duration: var(--lobe-popover-animation-duration);
     transition-property: opacity, transform;
 
+    /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size
+       one frame later; the box only morphs if width/height actually read them. */
     &[data-layout-animation] {
+      width: var(--popup-width, auto);
+      height: var(--popup-height, auto);
+
+      transition-timing-function:
+        var(--lobe-popover-animation-ease-out), var(--lobe-popover-animation-ease-out),
+        var(--lobe-popover-layout-ease), var(--lobe-popover-layout-ease);
+      transition-duration:
+        var(--lobe-popover-animation-duration), var(--lobe-popover-animation-duration),
+        var(--lobe-popover-layout-duration), var(--lobe-popover-layout-duration);
       transition-property: opacity, transform, width, height;
     }
 
+    &[data-repop] {
+      transition: none;
+    }
+
     &[data-starting-style],
     &[data-ending-style] {
       transform: translate3d(var(--lobe-popover-translate-x), var(--lobe-popover-translate-y), 0)
@@ -103,6 +120,34 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     --lobe-popover-animation-ease-out: ${cssVar.motionEaseOut};
     --lobe-popover-translate-x: 0;
     --lobe-popover-translate-y: calc(var(--lobe-popover-animation-translate) * -1);
+    --lobe-popover-layout-duration: 380ms;
+    --lobe-popover-layout-ease: linear(
+      0,
+      0.041,
+      0.14,
+      0.268,
+      0.407,
+      0.541,
+      0.661,
+      0.765,
+      0.849,
+      0.915,
+      0.964,
+      0.998,
+      1.02,
+      1.032,
+      1.038,
+      1.039,
+      1.036,
+      1.032,
+      1.027,
+      1.022,
+      1.016,
+      1.012,
+      1.008,
+      1.005,
+      1.003
+    );
 
     z-index: 1100;
 
@@ -114,11 +159,14 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     transition-property: none;
 
     &[data-layout-animation] {
+      transition-timing-function: var(--lobe-popover-layout-ease);
+      transition-duration: var(--lobe-popover-layout-duration);
       transition-property:
         inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;
     }
 
-    &[data-instant] {
+    &[data-instant],
+    &[data-repop] {
       transition: none;
     }
 
@@ -156,6 +204,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       --lobe-popover-translate-x: calc(var(--lobe-popover-animation-translate) * -1);
       --lobe-popover-translate-y: 0;
     }
+
+    @media (prefers-reduced-motion: reduce) {
+      --lobe-popover-layout-duration: 0s;
+    }
   `,
 	root: css`
     user-select: none;
@@ -164,65 +216,96 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
 	viewport: css`
     --lobe-popover-viewport-inline-padding: 12px;
+    --lobe-popover-content-shift: 8px;
+    --lobe-popover-content-blur: 4px;
 
     position: relative;
     overflow: clip;
     padding-block: 12px;
     padding-inline: var(--lobe-popover-viewport-inline-padding);
 
+    /* Old and new content overlap in one clip box while the box morphs; blurring both layers
+       during the crossfade turns the misaligned overlap into a soft smear instead of garbled text. */
     [data-previous],
     [data-current] {
       transform: translateX(0);
       opacity: 1;
+      filter: blur(0);
       transition:
-        transform var(--lobe-popover-animation-duration) var(--lobe-popover-animation-ease-out),
-        opacity calc(var(--lobe-popover-animation-duration) / 2)
-          var(--lobe-popover-animation-ease-out);
+        transform var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),
+        opacity calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out),
+        filter calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out);
+    }
+
+    [data-current] {
+      transition-delay:
+        0s, calc(var(--lobe-popover-layout-duration) / 6),
+        calc(var(--lobe-popover-layout-duration) / 6);
     }
 
+    [data-previous][data-ending-style],
+    [data-current][data-starting-style] {
+      filter: blur(var(--lobe-popover-content-blur));
+    }
+
+    /* Freeze both layers at their own final width so neither re-wraps while the box morphs;
+       the viewport clip reveals the new content as the box grows over it. */
     [data-previous] {
       position: absolute;
       inset-block-start: 12px;
       inset-inline-start: var(--lobe-popover-viewport-inline-padding);
+      width: calc(var(--popup-width) - var(--lobe-popover-viewport-inline-padding) * 2 - 2px);
+    }
+
+    &[data-transitioning] [data-current] {
+      width: calc(var(--positioner-width) - var(--lobe-popover-viewport-inline-padding) * 2 - 2px);
+    }
+
+    &[data-repop] [data-previous] {
+      display: none;
+    }
+
+    &[data-repop] [data-current] {
+      transition: none;
     }
 
     &[data-activation-direction~='right'] [data-previous][data-ending-style] {
-      transform: translateX(-50%);
+      transform: translateX(calc(var(--lobe-popover-content-shift) * -1));
       opacity: 0;
     }
 
     &[data-activation-direction~='right'] [data-current][data-starting-style] {
-      transform: translateX(50%);
+      transform: translateX(var(--lobe-popover-content-shift));
       opacity: 0;
     }
 
     &[data-activation-direction~='left'] [data-previous][data-ending-style] {
-      transform: translateX(50%);
+      transform: translateX(var(--lobe-popover-content-shift));
       opacity: 0;
     }
 
     &[data-activation-direction~='left'] [data-current][data-starting-style] {
-      transform: translateX(-50%);
+      transform: translateX(calc(var(--lobe-popover-content-shift) * -1));
       opacity: 0;
     }
 
     &[data-activation-direction~='down'] [data-previous][data-ending-style] {
-      transform: translateY(-50%);
+      transform: translateY(calc(var(--lobe-popover-content-shift) * -1));
       opacity: 0;
     }
 
     &[data-activation-direction~='down'] [data-current][data-starting-style] {
-      transform: translateY(50%);
+      transform: translateY(var(--lobe-popover-content-shift));
       opacity: 0;
     }
 
     &[data-activation-direction~='up'] [data-previous][data-ending-style] {
-      transform: translateY(50%);
+      transform: translateY(var(--lobe-popover-content-shift));
       opacity: 0;
     }
 
     &[data-activation-direction~='up'] [data-current][data-starting-style] {
-      transform: translateY(-50%);
+      transform: translateY(calc(var(--lobe-popover-content-shift) * -1));
       opacity: 0;
     }
   `

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: 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    overflow: clip;\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEf,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:\n      inset-inline-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),\n      inset-block-start var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease);\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    box-sizing: border-box;\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    /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n       one frame later; the box only morphs if width/height actually read them. */\n    &[data-layout-animation] {\n      width: var(--popup-width, auto);\n      height: var(--popup-height, auto);\n\n      transition-timing-function:\n        var(--lobe-popover-animation-ease-out), var(--lobe-popover-animation-ease-out),\n        var(--lobe-popover-layout-ease), var(--lobe-popover-layout-ease);\n      transition-duration:\n        var(--lobe-popover-animation-duration), var(--lobe-popover-animation-duration),\n        var(--lobe-popover-layout-duration), var(--lobe-popover-layout-duration);\n      transition-property: opacity, transform, width, height;\n    }\n\n    &[data-repop] {\n      transition: none;\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    --lobe-popover-layout-duration: 380ms;\n    --lobe-popover-layout-ease: linear(\n      0,\n      0.041,\n      0.14,\n      0.268,\n      0.407,\n      0.541,\n      0.661,\n      0.765,\n      0.849,\n      0.915,\n      0.964,\n      0.998,\n      1.02,\n      1.032,\n      1.038,\n      1.039,\n      1.036,\n      1.032,\n      1.027,\n      1.022,\n      1.016,\n      1.012,\n      1.008,\n      1.005,\n      1.003\n    );\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-timing-function: var(--lobe-popover-layout-ease);\n      transition-duration: var(--lobe-popover-layout-duration);\n      transition-property:\n        inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n    }\n\n    &[data-instant],\n    &[data-repop] {\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    @media (prefers-reduced-motion: reduce) {\n      --lobe-popover-layout-duration: 0s;\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    --lobe-popover-content-shift: 8px;\n    --lobe-popover-content-blur: 4px;\n\n    position: relative;\n    overflow: clip;\n    padding-block: 12px;\n    padding-inline: var(--lobe-popover-viewport-inline-padding);\n\n    /* Old and new content overlap in one clip box while the box morphs; blurring both layers\n       during the crossfade turns the misaligned overlap into a soft smear instead of garbled text. */\n    [data-previous],\n    [data-current] {\n      transform: translateX(0);\n      opacity: 1;\n      filter: blur(0);\n      transition:\n        transform var(--lobe-popover-layout-duration) var(--lobe-popover-layout-ease),\n        opacity calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out),\n        filter calc(var(--lobe-popover-layout-duration) / 2) var(--lobe-popover-animation-ease-out);\n    }\n\n    [data-current] {\n      transition-delay:\n        0s, calc(var(--lobe-popover-layout-duration) / 6),\n        calc(var(--lobe-popover-layout-duration) / 6);\n    }\n\n    [data-previous][data-ending-style],\n    [data-current][data-starting-style] {\n      filter: blur(var(--lobe-popover-content-blur));\n    }\n\n    /* Freeze both layers at their own final width so neither re-wraps while the box morphs;\n       the viewport clip reveals the new content as the box grows over it. */\n    [data-previous] {\n      position: absolute;\n      inset-block-start: 12px;\n      inset-inline-start: var(--lobe-popover-viewport-inline-padding);\n      width: calc(var(--popup-width) - var(--lobe-popover-viewport-inline-padding) * 2 - 2px);\n    }\n\n    &[data-transitioning] [data-current] {\n      width: calc(var(--positioner-width) - var(--lobe-popover-viewport-inline-padding) * 2 - 2px);\n    }\n\n    &[data-repop] [data-previous] {\n      display: none;\n    }\n\n    &[data-repop] [data-current] {\n      transition: none;\n    }\n\n    &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n      transform: translateX(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='right'] [data-current][data-starting-style] {\n      transform: translateX(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n      transform: translateX(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-current][data-starting-style] {\n      transform: translateX(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n      transform: translateY(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-current][data-starting-style] {\n      transform: translateY(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n      transform: translateY(var(--lobe-popover-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-current][data-starting-style] {\n      transform: translateY(calc(var(--lobe-popover-content-shift) * -1));\n      opacity: 0;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;cAyBE,OAAO,gBAAgB;;;;;gBAKrB,OAAO,YAAY;;;;;;;;;;;;;;;;;;;;;;;CAwBjC,OAAO,GAAG;;;;;;;wBAOY,OAAO,qBAAqB;qBAC/B,OAAO,aAAa;;aAE5B,OAAO,UAAU;;kBAEZ,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CvC,YAAY,GAAG;;;;;;yCAMwB,OAAO,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6F5D,MAAM,GAAG;;;;;CAMT,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+Ff,EAAE"}

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

@@ -28,10 +28,7 @@ declare const ScrollAreaViewport: {
   ({ className, scrollFade, ...rest }: ScrollAreaViewportProps): React.JSX.Element;
   displayName: string;
 };
-declare const ScrollAreaContent: {
-  ({ className, ...rest }: ScrollAreaContentProps): React.JSX.Element;
-  displayName: string;
-};
+declare const ScrollAreaContent: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ScrollAreaContentProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const ScrollAreaScrollbar: {
   ({ className, ...rest }: ScrollAreaScrollbarProps): React.JSX.Element;
   displayName: string;

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

@@ -30,13 +30,7 @@ const ScrollAreaViewport = ({ className, scrollFade = false, ...rest }) => {
 	})] });
 };
 ScrollAreaViewport.displayName = "ScrollAreaViewport";
-const ScrollAreaContent = ({ className, ...rest }) => {
-	return /* @__PURE__ */ jsx(ScrollArea.Content, {
-		...rest,
-		className: mergeStateClassName(styles.content, className)
-	});
-};
-ScrollAreaContent.displayName = "ScrollAreaContent";
+const ScrollAreaContent = ScrollArea.Content;
 const ScrollAreaScrollbar = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
 		...rest,

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>;\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;CACH,IAAI,OAAO,cAAc,YAAY,QAAQ,UAAkB,GAAG,MAAM,UAAU,KAAK,CAAC;CACxF,OAAO,GAAG,MAAM,SAAS;AAC3B;AAwBA,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAAgC;CAC7E,OACE,oBAACA,WAAe,MAAhB;EAAqB,GAAI;EAAM,WAAW,oBAAoB,OAAO,MAAM,SAAS;CAAW,CAAA;AAEnG;AAEA,eAAe,cAAc;AAE7B,MAAM,oBACJ,eACuB;CACvB,IAAI,CAAC,YAAY,OAAO,KAAA;CACxB,MAAM,cAAyC,eAAe,OAAO,aAAa;CAClF,IAAI,gBAAgB,cAAc,OAAO,OAAO;CAChD,IAAI,gBAAgB,QAAQ,OAAO,OAAO;CAC1C,OAAO,OAAO;AAChB;AAEA,MAAa,sBAAsB,EACjC,WACA,aAAa,OACb,GAAG,WAC0B;CAC7B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,uBAAD,CAAwB,CAAA,GACxB,oBAACA,WAAe,UAAhB;EACE,GAAI;EACJ,WACE,oBAAoB,GAAG,OAAO,UAAU,iBAAiB,UAAU,CAAC,GAAG,SAAS;CAEnF,CAAA,CACD,EAAA,CAAA;AAEN;AAEA,mBAAmB,cAAc;AAEjC,MAAa,qBAAqB,EAAE,WAAW,GAAG,WAAmC;CACnF,OACE,oBAACA,WAAe,SAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,SAAS,SAAS;CACzD,CAAA;AAEL;AAEA,kBAAkB,cAAc;AAEhC,MAAa,uBAAuB,EAAE,WAAW,GAAG,WAAqC;CACvF,OACE,oBAACA,WAAe,WAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,WAAW,SAAS;CAC3D,CAAA;AAEL;AAEA,oBAAoB,cAAc;AAElC,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAAiC;CAC/E,OACE,oBAACA,WAAe,OAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,OAAO,SAAS;CACvD,CAAA;AAEL;AAEA,gBAAgB,cAAc;AAE9B,MAAa,oBAAoB,EAAE,WAAW,GAAG,WAAkC;CACjF,OACE,oBAACA,WAAe,QAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,QAAQ,SAAS;CACxD,CAAA;AAEL;AAEA,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 = BaseScrollArea.Content;\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;CACH,IAAI,OAAO,cAAc,YAAY,QAAQ,UAAkB,GAAG,MAAM,UAAU,KAAK,CAAC;CACxF,OAAO,GAAG,MAAM,SAAS;AAC3B;AAwBA,MAAa,kBAAkB,EAAE,WAAW,GAAG,WAAgC;CAC7E,OACE,oBAACA,WAAe,MAAhB;EAAqB,GAAI;EAAM,WAAW,oBAAoB,OAAO,MAAM,SAAS;CAAW,CAAA;AAEnG;AAEA,eAAe,cAAc;AAE7B,MAAM,oBACJ,eACuB;CACvB,IAAI,CAAC,YAAY,OAAO,KAAA;CACxB,MAAM,cAAyC,eAAe,OAAO,aAAa;CAClF,IAAI,gBAAgB,cAAc,OAAO,OAAO;CAChD,IAAI,gBAAgB,QAAQ,OAAO,OAAO;CAC1C,OAAO,OAAO;AAChB;AAEA,MAAa,sBAAsB,EACjC,WACA,aAAa,OACb,GAAG,WAC0B;CAC7B,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,uBAAD,CAAwB,CAAA,GACxB,oBAACA,WAAe,UAAhB;EACE,GAAI;EACJ,WACE,oBAAoB,GAAG,OAAO,UAAU,iBAAiB,UAAU,CAAC,GAAG,SAAS;CAEnF,CAAA,CACD,EAAA,CAAA;AAEN;AAEA,mBAAmB,cAAc;AAEjC,MAAa,oBAAoBA,WAAe;AAEhD,MAAa,uBAAuB,EAAE,WAAW,GAAG,WAAqC;CACvF,OACE,oBAACA,WAAe,WAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,WAAW,SAAS;CAC3D,CAAA;AAEL;AAEA,oBAAoB,cAAc;AAElC,MAAa,mBAAmB,EAAE,WAAW,GAAG,WAAiC;CAC/E,OACE,oBAACA,WAAe,OAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,OAAO,SAAS;CACvD,CAAA;AAEL;AAEA,gBAAgB,cAAc;AAE9B,MAAa,oBAAoB,EAAE,WAAW,GAAG,WAAkC;CACjF,OACE,oBAACA,WAAe,QAAhB;EACE,GAAI;EACJ,WAAW,oBAAoB,OAAO,QAAQ,SAAS;CACxD,CAAA;AAEL;AAEA,iBAAiB,cAAc"}

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

@@ -2,15 +2,6 @@ import { focusRing } from "../focusRing.mjs";
 import { createStaticStyles } from "antd-style";
 //#region src/base-ui/ScrollArea/style.ts
 const styles = createStaticStyles(({ css, cssVar }) => ({
-	content: css`
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-
-    font-size: ${cssVar.fontSizeSM};
-    line-height: 1.375rem;
-    color: ${cssVar.colorText};
-  `,
 	corner: css`
     background: ${cssVar.colorFillSecondary};
   `,

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  content: css`\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.375rem;\n    color: ${cssVar.colorText};\n  `,\n\n  corner: css`\n    background: ${cssVar.colorFillSecondary};\n  `,\n\n  root: css`\n    position: relative;\n    box-sizing: border-box;\n  `,\n\n  scrollbar: css`\n    pointer-events: none;\n\n    margin: 3px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    opacity: 0;\n    background: transparent;\n\n    transition:\n      opacity 150ms,\n      width 150ms,\n      height 150ms;\n\n    &::before {\n      content: '';\n      position: absolute;\n    }\n\n    &[data-scrolling] {\n      transition-duration: 0ms, 150ms, 150ms;\n    }\n\n    &[data-hovering],\n    &[data-scrolling] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n\n    &[data-orientation='vertical'] {\n      width: 3px;\n\n      &::before {\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n        width: 16px;\n        height: 100%;\n      }\n\n      &:hover {\n        width: 6px;\n      }\n    }\n\n    &[data-orientation='horizontal'] {\n      height: 3px;\n\n      &::before {\n        inset-block-start: 50%;\n        transform: translateY(-50%);\n        width: 100%;\n        height: 16px;\n      }\n\n      &:hover {\n        height: 6px;\n      }\n    }\n  `,\n\n  thumb: css`\n    width: 100%;\n    height: 100%;\n    border-radius: inherit;\n    background: ${cssVar.colorTextQuaternary};\n  `,\n\n  viewport: css`\n    position: relative;\n    overscroll-behavior: auto;\n    height: 100%;\n    outline: none;\n\n    ${focusRing};\n  `,\n\n  viewportFade: css`\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to bottom,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-top),\n      #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching top/bottom doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-top-in {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-top-in, lobe-scroll-area-fade-bottom-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self y), scroll(self y);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeHorizontal: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to right,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-left),\n      #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching start/end doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-left-in {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-left-in, lobe-scroll-area-fade-right-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeBoth: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    mask-composite: intersect;\n\n    /*\n     * Combine vertical + horizontal fades by intersecting two gradient masks\n     * so the four corners stay transparent only when both axes overflow.\n     */\n    mask-image:\n      linear-gradient(\n        to bottom,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-top),\n        #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n        transparent 100%\n      ),\n      linear-gradient(\n        to right,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-left),\n        #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n        transparent 100%\n      );\n    mask-repeat: no-repeat, no-repeat;\n    mask-size:\n      100% 100%,\n      100% 100%;\n\n    @supports (animation-timeline: scroll()) {\n      @keyframes lobe-scroll-area-fade-top-in-both {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out-both {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-left-in-both {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out-both {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name:\n        lobe-scroll-area-fade-top-in-both, lobe-scroll-area-fade-bottom-out-both,\n        lobe-scroll-area-fade-left-in-both, lobe-scroll-area-fade-right-out-both;\n      animation-duration: 1ms, 1ms, 1ms, 1ms;\n      animation-timing-function: linear, linear, linear, linear;\n      animation-fill-mode: both, both, both, both;\n      animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%,\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,SAAS,GAAG;;;;;iBAKG,OAAO,WAAW;;aAEtB,OAAO,UAAU;;CAG5B,QAAQ,GAAG;kBACK,OAAO,mBAAmB;;CAG1C,MAAM,GAAG;;;;CAKT,WAAW,GAAG;;;;qBAIK,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzC,OAAO,GAAG;;;;kBAIM,OAAO,oBAAoB;;CAG3C,UAAU,GAAG;;;;;;MAMT,UAAU;;CAGd,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGvB,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ScrollArea/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nimport { focusRing } from '@/base-ui/focusRing';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  corner: css`\n    background: ${cssVar.colorFillSecondary};\n  `,\n\n  root: css`\n    position: relative;\n    box-sizing: border-box;\n  `,\n\n  scrollbar: css`\n    pointer-events: none;\n\n    margin: 3px;\n    border-radius: ${cssVar.borderRadiusSM};\n\n    opacity: 0;\n    background: transparent;\n\n    transition:\n      opacity 150ms,\n      width 150ms,\n      height 150ms;\n\n    &::before {\n      content: '';\n      position: absolute;\n    }\n\n    &[data-scrolling] {\n      transition-duration: 0ms, 150ms, 150ms;\n    }\n\n    &[data-hovering],\n    &[data-scrolling] {\n      pointer-events: auto;\n      opacity: 1;\n    }\n\n    &[data-orientation='vertical'] {\n      width: 3px;\n\n      &::before {\n        inset-inline-start: 50%;\n        transform: translateX(-50%);\n        width: 16px;\n        height: 100%;\n      }\n\n      &:hover {\n        width: 6px;\n      }\n    }\n\n    &[data-orientation='horizontal'] {\n      height: 3px;\n\n      &::before {\n        inset-block-start: 50%;\n        transform: translateY(-50%);\n        width: 100%;\n        height: 16px;\n      }\n\n      &:hover {\n        height: 6px;\n      }\n    }\n  `,\n\n  thumb: css`\n    width: 100%;\n    height: 100%;\n    border-radius: inherit;\n    background: ${cssVar.colorTextQuaternary};\n  `,\n\n  viewport: css`\n    position: relative;\n    overscroll-behavior: auto;\n    height: 100%;\n    outline: none;\n\n    ${focusRing};\n  `,\n\n  viewportFade: css`\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to bottom,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-top),\n      #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching top/bottom doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-top-in {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-top-in, lobe-scroll-area-fade-bottom-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self y), scroll(self y);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeHorizontal: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    /* Fade the CONTENT via mask, so it works on background images too. */\n    mask-image: linear-gradient(\n      to right,\n      transparent 0,\n      #000 var(--lobe-scroll-area-fade-left),\n      #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n      transparent 100%\n    );\n    mask-repeat: no-repeat;\n    mask-size: 100% 100%;\n\n    /* Scroll-driven animation: use scroll position to drive the mask. */\n    @supports (animation-timeline: scroll()) {\n      /*\n       * Important: drive fade by *distance to edges* (first/last 40px),\n       * so reaching start/end doesn't cause a sudden snap.\n       */\n      @keyframes lobe-scroll-area-fade-left-in {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name: lobe-scroll-area-fade-left-in, lobe-scroll-area-fade-right-out;\n      animation-duration: 1ms, 1ms;\n      animation-timing-function: linear, linear;\n      animation-fill-mode: both, both;\n      animation-timeline: scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n\n  viewportFadeBoth: css`\n    --scroll-area-overflow-x-start: inherit;\n    --scroll-area-overflow-x-end: inherit;\n    --scroll-area-overflow-y-start: inherit;\n    --scroll-area-overflow-y-end: inherit;\n    --lobe-scroll-area-fade-size: 40px;\n    --lobe-scroll-area-fade-top: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-start, 0px)\n    );\n    --lobe-scroll-area-fade-bottom: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-y-end, 0px)\n    );\n    --lobe-scroll-area-fade-left: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-start, 0px)\n    );\n    --lobe-scroll-area-fade-right: min(\n      var(--lobe-scroll-area-fade-size),\n      var(--scroll-area-overflow-x-end, 0px)\n    );\n\n    mask-composite: intersect;\n\n    /*\n     * Combine vertical + horizontal fades by intersecting two gradient masks\n     * so the four corners stay transparent only when both axes overflow.\n     */\n    mask-image:\n      linear-gradient(\n        to bottom,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-top),\n        #000 calc(100% - var(--lobe-scroll-area-fade-bottom)),\n        transparent 100%\n      ),\n      linear-gradient(\n        to right,\n        transparent 0,\n        #000 var(--lobe-scroll-area-fade-left),\n        #000 calc(100% - var(--lobe-scroll-area-fade-right)),\n        transparent 100%\n      );\n    mask-repeat: no-repeat, no-repeat;\n    mask-size:\n      100% 100%,\n      100% 100%;\n\n    @supports (animation-timeline: scroll()) {\n      @keyframes lobe-scroll-area-fade-top-in-both {\n        from {\n          --lobe-scroll-area-fade-top: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-top: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-bottom-out-both {\n        from {\n          --lobe-scroll-area-fade-bottom: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-bottom: 0;\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-left-in-both {\n        from {\n          --lobe-scroll-area-fade-left: 0;\n        }\n\n        to {\n          --lobe-scroll-area-fade-left: var(--lobe-scroll-area-fade-size);\n        }\n      }\n\n      @keyframes lobe-scroll-area-fade-right-out-both {\n        from {\n          --lobe-scroll-area-fade-right: var(--lobe-scroll-area-fade-size);\n        }\n\n        to {\n          --lobe-scroll-area-fade-right: 0;\n        }\n      }\n\n      animation-name:\n        lobe-scroll-area-fade-top-in-both, lobe-scroll-area-fade-bottom-out-both,\n        lobe-scroll-area-fade-left-in-both, lobe-scroll-area-fade-right-out-both;\n      animation-duration: 1ms, 1ms, 1ms, 1ms;\n      animation-timing-function: linear, linear, linear, linear;\n      animation-fill-mode: both, both, both, both;\n      animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n\n      animation-range:\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%,\n        0 var(--lobe-scroll-area-fade-size),\n        calc(100% - var(--lobe-scroll-area-fade-size)) 100%;\n    }\n  `,\n}));\n"],"mappings":";;;AAIA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;kBACK,OAAO,mBAAmB;;CAG1C,MAAM,GAAG;;;;CAKT,WAAW,GAAG;;;;qBAIK,OAAO,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDzC,OAAO,GAAG;;;;kBAIM,OAAO,oBAAoB;;CAG3C,UAAU,GAAG;;;;;;MAMT,UAAU;;CAGd,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8DjB,wBAAwB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8D3B,kBAAkB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyGvB,EAAE"}

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

@@ -42,7 +42,7 @@ declare const variants: (props?: ({
   mark?: boolean | null | undefined;
   shiny?: boolean | null | undefined;
   strong?: boolean | null | undefined;
-  type?: "danger" | "success" | "info" | "warning" | "secondary" | null | undefined;
+  type?: "danger" | "warning" | "success" | "info" | "secondary" | null | undefined;
   underline?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 //#endregion

package/es/base-ui/Tooltip/TooltipGroup.mjs

@@ -8,12 +8,13 @@ import { TooltipArrowIcon } from "./ArrowIcon.mjs";
 import { styles } from "./style.mjs";
 import TooltipContent from "./TooltipContent.mjs";
 import { useDestroyOnInvalidActiveTriggerElement, useHidePopupWhenPositionerAtOrigin, usePopupHandleStore } from "../../utils/destroyOnInvalidActiveTriggerElement.mjs";
+import { useRepopOnFarTriggerSwitch } from "../../utils/useRepopOnFarTriggerSwitch.mjs";
 import { useCallback, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { Tooltip } from "@base-ui/react/tooltip";
 //#region src/base-ui/Tooltip/TooltipGroup.tsx
-const TooltipGroup = ({ children, disableDestroyOnInvalidTrigger = false, disableZeroOriginGuard = false, layoutAnimation = false, popupContainer, ...sharedProps }) => {
+const TooltipGroup = ({ children, disableDestroyOnInvalidTrigger = false, disableZeroOriginGuard = false, layoutAnimation = true, popupContainer, ...sharedProps }) => {
 	const [{ handle, key }, setHandleState] = useState(() => ({
 		handle: Tooltip.createHandle(),
 		key: 0
@@ -34,6 +35,7 @@ const TooltipGroup = ({ children, disableDestroyOnInvalidTrigger = false, disabl
 	const store = usePopupHandleStore(handle);
 	useDestroyOnInvalidActiveTriggerElement(store, destroy, { enabled: !disableDestroyOnInvalidTrigger });
 	useHidePopupWhenPositionerAtOrigin(store, { enabled: !disableZeroOriginGuard });
+	const repop = useRepopOnFarTriggerSwitch(store, { enabled: layoutAnimation });
 	return /* @__PURE__ */ jsx(TooltipGroupHandleContext, {
 		value: handle,
 		children: /* @__PURE__ */ jsxs(TooltipGroupPropsContext, {
@@ -70,6 +72,7 @@ const TooltipGroup = ({ children, disableDestroyOnInvalidTrigger = false, disabl
 					};
 					const body = /* @__PURE__ */ jsx(Tooltip.Viewport, {
 						className: resolvedClassNames.viewport,
+						"data-repop": repop || void 0,
 						style: resolvedStyles.viewport,
 						children: /* @__PURE__ */ jsx(TooltipContent, {
 							hotkey: item.hotkey,
@@ -82,6 +85,7 @@ const TooltipGroup = ({ children, disableDestroyOnInvalidTrigger = false, disabl
 						className: resolvedClassNames.positioner,
 						"data-layout-animation": layoutAnimation || void 0,
 						"data-placement": placement,
+						"data-repop": repop || void 0,
 						side: placementConfig.side,
 						sideOffset: baseSideOffset,
 						style: resolvedStyles.positioner,
@@ -90,6 +94,7 @@ const TooltipGroup = ({ children, disableDestroyOnInvalidTrigger = false, disabl
 						children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
 							className: resolvedClassNames.popup,
 							"data-layout-animation": layoutAnimation || void 0,
+							"data-repop": repop || void 0,
 							style: resolvedStyles.popup,
 							...item.popupProps,
 							children: [arrow && /* @__PURE__ */ jsx(Tooltip.Arrow, {

package/es/base-ui/Tooltip/TooltipGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipGroup.mjs","names":["BaseTooltip"],"sources":["../../../src/base-ui/Tooltip/TooltipGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { cx } from 'antd-style';\nimport { type FC, useCallback, useRef, useState } from 'react';\n\nimport { getFloatingCollisionPadding } from '@/base-ui/floating';\nimport { useFloatingLayer } from '@/hooks/useFloatingLayer';\nimport { useAppElement } from '@/ThemeProvider';\nimport {\n  useDestroyOnInvalidActiveTriggerElement,\n  useHidePopupWhenPositionerAtOrigin,\n  usePopupHandleStore,\n} from '@/utils/destroyOnInvalidActiveTriggerElement';\nimport { placementMap } from '@/utils/placement';\n\nimport { TooltipArrowIcon } from './ArrowIcon';\nimport {\n  TooltipGroupHandleContext,\n  type TooltipGroupItem,\n  TooltipGroupPropsContext,\n} from './groupContext';\nimport { styles } from './style';\nimport TooltipContent from './TooltipContent';\nimport { type TooltipGroupProps } from './type';\n\nconst TooltipGroup: FC<TooltipGroupProps> = ({\n  children,\n  disableDestroyOnInvalidTrigger = false,\n  disableZeroOriginGuard = false,\n  layoutAnimation = false,\n  popupContainer,\n  ...sharedProps\n}) => {\n  const [{ handle, key }, setHandleState] = useState(() => ({\n    handle: BaseTooltip.createHandle<TooltipGroupItem>(),\n    key: 0,\n  }));\n  const activeItemRef = useRef<TooltipGroupItem | null>(null);\n\n  const destroy = useCallback(() => {\n    activeItemRef.current = null;\n    setHandleState(({ key }) => ({\n      handle: BaseTooltip.createHandle<TooltipGroupItem>(),\n      key: key + 1,\n    }));\n  }, []);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    activeItemRef.current?.onOpenChange?.(open);\n  }, []);\n\n  const appElement = useAppElement();\n  const floatingLayerContainer = useFloatingLayer();\n  const portalContainer = floatingLayerContainer ?? appElement;\n\n  const store = usePopupHandleStore(handle);\n  useDestroyOnInvalidActiveTriggerElement(store, destroy, {\n    enabled: !disableDestroyOnInvalidTrigger,\n  });\n  useHidePopupWhenPositionerAtOrigin(store, { enabled: !disableZeroOriginGuard });\n\n  return (\n    <TooltipGroupHandleContext value={handle}>\n      <TooltipGroupPropsContext value={sharedProps}>\n        {/* Outside Root on purpose: the handle/key reset remounts Root's subtree; children must\n            survive it. Triggers bind to the group via the handle, not DOM nesting. */}\n        {children}\n        <BaseTooltip.Root handle={handle} key={key} onOpenChange={handleOpenChange}>\n          {({ payload }) => {\n            const item = (payload as TooltipGroupItem | null) ?? null;\n            activeItemRef.current = item;\n\n            if (!item || (item.title == null && !item.hotkey)) {\n              return null;\n            }\n\n            const arrow = item.arrow ?? false;\n            const placement = item.placement ?? 'top';\n            const placementConfig = placementMap[placement] ?? placementMap.top;\n            const baseSideOffset = arrow ? 8 : 6;\n\n            const resolvedClassNames = {\n              arrow: cx(styles.arrow, item.classNames?.arrow),\n              popup: cx(\n                styles.popup,\n                item.className,\n                item.classNames?.root,\n                item.classNames?.container,\n              ),\n              positioner: styles.positioner,\n              viewport: cx(styles.viewport, item.classNames?.content),\n            };\n\n            const resolvedStyleProps = (() => {\n              if (typeof item.styles === 'function') return undefined;\n              return item.styles;\n            })();\n\n            const resolvedStyles = {\n              arrow: resolvedStyleProps?.arrow,\n              popup: {\n                ...resolvedStyleProps?.root,\n                ...resolvedStyleProps?.container,\n              },\n              positioner: {\n                zIndex: item.zIndex ?? 114_514,\n              },\n              viewport: resolvedStyleProps?.content,\n            };\n\n            const body = (\n              <BaseTooltip.Viewport\n                className={resolvedClassNames.viewport}\n                style={resolvedStyles.viewport}\n              >\n                <TooltipContent\n                  hotkey={item.hotkey}\n                  hotkeyProps={item.hotkeyProps}\n                  title={item.title}\n                />\n              </BaseTooltip.Viewport>\n            );\n\n            const popup = (\n              <BaseTooltip.Positioner\n                align={placementConfig.align}\n                className={resolvedClassNames.positioner}\n                data-layout-animation={layoutAnimation || undefined}\n                data-placement={placement}\n                side={placementConfig.side}\n                sideOffset={baseSideOffset}\n                style={resolvedStyles.positioner}\n                {...item.positionerProps}\n                collisionPadding={\n                  item.positionerProps?.collisionPadding ?? getFloatingCollisionPadding()\n                }\n              >\n                <BaseTooltip.Popup\n                  className={resolvedClassNames.popup}\n                  data-layout-animation={layoutAnimation || undefined}\n                  style={resolvedStyles.popup}\n                  {...item.popupProps}\n                >\n                  {arrow && (\n                    <BaseTooltip.Arrow\n                      className={resolvedClassNames.arrow}\n                      style={resolvedStyles.arrow}\n                    >\n                      {TooltipArrowIcon}\n                    </BaseTooltip.Arrow>\n                  )}\n                  {body}\n                </BaseTooltip.Popup>\n              </BaseTooltip.Positioner>\n            );\n\n            const resolvedPortalContainer =\n              item.popupContainer ?? popupContainer ?? portalContainer;\n\n            return resolvedPortalContainer ? (\n              <BaseTooltip.Portal container={resolvedPortalContainer}>{popup}</BaseTooltip.Portal>\n            ) : null;\n          }}\n        </BaseTooltip.Root>\n      </TooltipGroupPropsContext>\n    </TooltipGroupHandleContext>\n  );\n};\n\nTooltipGroup.displayName = 'TooltipGroup';\n\nexport default TooltipGroup;\n"],"mappings":"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"}
+{"version":3,"file":"TooltipGroup.mjs","names":["BaseTooltip"],"sources":["../../../src/base-ui/Tooltip/TooltipGroup.tsx"],"sourcesContent":["'use client';\n\nimport { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { cx } from 'antd-style';\nimport { type FC, useCallback, useRef, useState } from 'react';\n\nimport { getFloatingCollisionPadding } from '@/base-ui/floating';\nimport { useFloatingLayer } from '@/hooks/useFloatingLayer';\nimport { useAppElement } from '@/ThemeProvider';\nimport {\n  useDestroyOnInvalidActiveTriggerElement,\n  useHidePopupWhenPositionerAtOrigin,\n  usePopupHandleStore,\n} from '@/utils/destroyOnInvalidActiveTriggerElement';\nimport { placementMap } from '@/utils/placement';\nimport { useRepopOnFarTriggerSwitch } from '@/utils/useRepopOnFarTriggerSwitch';\n\nimport { TooltipArrowIcon } from './ArrowIcon';\nimport {\n  TooltipGroupHandleContext,\n  type TooltipGroupItem,\n  TooltipGroupPropsContext,\n} from './groupContext';\nimport { styles } from './style';\nimport TooltipContent from './TooltipContent';\nimport { type TooltipGroupProps } from './type';\n\nconst TooltipGroup: FC<TooltipGroupProps> = ({\n  children,\n  disableDestroyOnInvalidTrigger = false,\n  disableZeroOriginGuard = false,\n  layoutAnimation = true,\n  popupContainer,\n  ...sharedProps\n}) => {\n  const [{ handle, key }, setHandleState] = useState(() => ({\n    handle: BaseTooltip.createHandle<TooltipGroupItem>(),\n    key: 0,\n  }));\n  const activeItemRef = useRef<TooltipGroupItem | null>(null);\n\n  const destroy = useCallback(() => {\n    activeItemRef.current = null;\n    setHandleState(({ key }) => ({\n      handle: BaseTooltip.createHandle<TooltipGroupItem>(),\n      key: key + 1,\n    }));\n  }, []);\n\n  const handleOpenChange = useCallback((open: boolean) => {\n    activeItemRef.current?.onOpenChange?.(open);\n  }, []);\n\n  const appElement = useAppElement();\n  const floatingLayerContainer = useFloatingLayer();\n  const portalContainer = floatingLayerContainer ?? appElement;\n\n  const store = usePopupHandleStore(handle);\n  useDestroyOnInvalidActiveTriggerElement(store, destroy, {\n    enabled: !disableDestroyOnInvalidTrigger,\n  });\n  useHidePopupWhenPositionerAtOrigin(store, { enabled: !disableZeroOriginGuard });\n  const repop = useRepopOnFarTriggerSwitch(store, { enabled: layoutAnimation });\n\n  return (\n    <TooltipGroupHandleContext value={handle}>\n      <TooltipGroupPropsContext value={sharedProps}>\n        {/* Outside Root on purpose: the handle/key reset remounts Root's subtree; children must\n            survive it. Triggers bind to the group via the handle, not DOM nesting. */}\n        {children}\n        <BaseTooltip.Root handle={handle} key={key} onOpenChange={handleOpenChange}>\n          {({ payload }) => {\n            const item = (payload as TooltipGroupItem | null) ?? null;\n            activeItemRef.current = item;\n\n            if (!item || (item.title == null && !item.hotkey)) {\n              return null;\n            }\n\n            const arrow = item.arrow ?? false;\n            const placement = item.placement ?? 'top';\n            const placementConfig = placementMap[placement] ?? placementMap.top;\n            const baseSideOffset = arrow ? 8 : 6;\n\n            const resolvedClassNames = {\n              arrow: cx(styles.arrow, item.classNames?.arrow),\n              popup: cx(\n                styles.popup,\n                item.className,\n                item.classNames?.root,\n                item.classNames?.container,\n              ),\n              positioner: styles.positioner,\n              viewport: cx(styles.viewport, item.classNames?.content),\n            };\n\n            const resolvedStyleProps = (() => {\n              if (typeof item.styles === 'function') return undefined;\n              return item.styles;\n            })();\n\n            const resolvedStyles = {\n              arrow: resolvedStyleProps?.arrow,\n              popup: {\n                ...resolvedStyleProps?.root,\n                ...resolvedStyleProps?.container,\n              },\n              positioner: {\n                zIndex: item.zIndex ?? 114_514,\n              },\n              viewport: resolvedStyleProps?.content,\n            };\n\n            const body = (\n              <BaseTooltip.Viewport\n                className={resolvedClassNames.viewport}\n                data-repop={repop || undefined}\n                style={resolvedStyles.viewport}\n              >\n                <TooltipContent\n                  hotkey={item.hotkey}\n                  hotkeyProps={item.hotkeyProps}\n                  title={item.title}\n                />\n              </BaseTooltip.Viewport>\n            );\n\n            const popup = (\n              <BaseTooltip.Positioner\n                align={placementConfig.align}\n                className={resolvedClassNames.positioner}\n                data-layout-animation={layoutAnimation || undefined}\n                data-placement={placement}\n                data-repop={repop || undefined}\n                side={placementConfig.side}\n                sideOffset={baseSideOffset}\n                style={resolvedStyles.positioner}\n                {...item.positionerProps}\n                collisionPadding={\n                  item.positionerProps?.collisionPadding ?? getFloatingCollisionPadding()\n                }\n              >\n                <BaseTooltip.Popup\n                  className={resolvedClassNames.popup}\n                  data-layout-animation={layoutAnimation || undefined}\n                  data-repop={repop || undefined}\n                  style={resolvedStyles.popup}\n                  {...item.popupProps}\n                >\n                  {arrow && (\n                    <BaseTooltip.Arrow\n                      className={resolvedClassNames.arrow}\n                      style={resolvedStyles.arrow}\n                    >\n                      {TooltipArrowIcon}\n                    </BaseTooltip.Arrow>\n                  )}\n                  {body}\n                </BaseTooltip.Popup>\n              </BaseTooltip.Positioner>\n            );\n\n            const resolvedPortalContainer =\n              item.popupContainer ?? popupContainer ?? portalContainer;\n\n            return resolvedPortalContainer ? (\n              <BaseTooltip.Portal container={resolvedPortalContainer}>{popup}</BaseTooltip.Portal>\n            ) : null;\n          }}\n        </BaseTooltip.Root>\n      </TooltipGroupPropsContext>\n    </TooltipGroupHandleContext>\n  );\n};\n\nTooltipGroup.displayName = 'TooltipGroup';\n\nexport default TooltipGroup;\n"],"mappings":"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"}

package/es/base-ui/Tooltip/groupContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"groupContext.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/groupContext.ts"],"sourcesContent":["'use client';\n\nimport type { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { createContext } from 'react';\n\nimport type { TooltipProps } from './type';\n\nexport type TooltipGroupItem = Omit<TooltipProps, 'children' | 'open' | 'defaultOpen' | 'ref'>;\n\nexport type TooltipGroupSharedProps = Omit<\n  TooltipProps,\n  'children' | 'defaultOpen' | 'open' | 'ref' | 'title'\n> & {\n  /**\n   * @description Whether to enable content layout animation when switching triggers\n   * @default false\n   */\n  layoutAnimation?: boolean;\n};\n\nexport type TooltipGroupHandle = ReturnType<typeof BaseTooltip.createHandle<TooltipGroupItem>>;\n\nexport const TooltipGroupHandleContext = createContext<TooltipGroupHandle | null>(null);\nexport const TooltipGroupPropsContext = createContext<TooltipGroupSharedProps | null>(null);\n"],"mappings":";;;AAsBA,MAAa,4BAA4B,cAAyC,IAAI;AACtF,MAAa,2BAA2B,cAA8C,IAAI"}
+{"version":3,"file":"groupContext.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/groupContext.ts"],"sourcesContent":["'use client';\n\nimport type { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';\nimport { createContext } from 'react';\n\nimport type { TooltipProps } from './type';\n\nexport type TooltipGroupItem = Omit<TooltipProps, 'children' | 'open' | 'defaultOpen' | 'ref'>;\n\nexport type TooltipGroupSharedProps = Omit<\n  TooltipProps,\n  'children' | 'defaultOpen' | 'open' | 'ref' | 'title'\n> & {\n  /**\n   * @description Morph the shared popup (position, size, content) when switching triggers\n   * @default true\n   */\n  layoutAnimation?: boolean;\n};\n\nexport type TooltipGroupHandle = ReturnType<typeof BaseTooltip.createHandle<TooltipGroupItem>>;\n\nexport const TooltipGroupHandleContext = createContext<TooltipGroupHandle | null>(null);\nexport const TooltipGroupPropsContext = createContext<TooltipGroupSharedProps | null>(null);\n"],"mappings":";;;AAsBA,MAAa,4BAA4B,cAAyC,IAAI;AACtF,MAAa,2BAA2B,cAA8C,IAAI"}

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

@@ -15,6 +15,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     width: 8px;
     height: 4px;
 
+    transition:
+      inset-inline-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),
+      inset-block-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease);
+
     & > svg {
       display: block;
       width: 100%;
@@ -46,7 +50,6 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     }
   `,
 	popup: css`
-
     /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity
        transition ends the browser otherwise drops the layer and re-rasterizes with pixel
        snapping — a visible one-frame shift when the measured width is fractional
@@ -57,7 +60,13 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     position: relative;
     transform-origin: var(--transform-origin);
 
-    max-width: min(320px, var(--available-width));
+    box-sizing: border-box;
+
+    /* The 320px cap lives on the viewport, not here: Base UI measures content with
+       --available-width set to max-content, and min(320px, max-content) is invalid, which
+       recorded unclamped sizes. A percentage cap is out too — it tracks the positioner, which
+       snaps to the new size and would freeze the shrink half of the morph. */
+    max-width: var(--available-width);
     border: 1px solid ${cssVar.colorFill};
     border-radius: ${cssVar.borderRadiusSM};
 
@@ -79,7 +88,12 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
     transition-duration: var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration);
     transition-property: opacity, transform;
 
+    /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size
+       one frame later; the box only morphs if width/height actually read them. */
     &[data-layout-animation] {
+      width: var(--popup-width, auto);
+      height: var(--popup-height, auto);
+
       transition-timing-function:
         var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out),
         var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease);
@@ -89,6 +103,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       transition-property: opacity, transform, width, height;
     }
 
+    &[data-repop] {
+      transition: none;
+    }
+
     &[data-starting-style],
     &[data-ending-style] {
       transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)
@@ -192,7 +210,8 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
         inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;
     }
 
-    &[data-instant] {
+    &[data-instant],
+    &[data-repop] {
       transition: none;
     }
 
@@ -240,21 +259,22 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
 	viewport: css`
     --lobe-tooltip-viewport-inline-padding: 8px;
-    --lobe-tooltip-content-shift: 40%;
+    --lobe-tooltip-content-shift: 8px;
+    --lobe-tooltip-content-blur: 4px;
 
     position: relative;
 
     overflow: clip;
-    display: flex;
-    gap: 6px;
-    align-items: center;
 
+    max-width: calc(320px - 2px);
     padding-block: 4px;
     padding-inline: var(--lobe-tooltip-viewport-inline-padding);
 
     overflow-wrap: break-word;
     white-space: normal;
 
+    /* Old and new text overlap in one clip box while the box morphs; blurring both layers during
+       the crossfade turns the misaligned overlap into a soft smear instead of garbled text. */
     [data-previous],
     [data-current] {
       transform: translateX(0);
@@ -264,16 +284,44 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
       align-items: center;
 
       opacity: 1;
+      filter: blur(0);
 
       transition:
         transform var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),
-        opacity calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease);
+        opacity calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease),
+        filter calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease);
     }
 
+    [data-current] {
+      transition-delay:
+        0s, calc(var(--lobe-tooltip-layout-duration) / 6),
+        calc(var(--lobe-tooltip-layout-duration) / 6);
+    }
+
+    [data-previous][data-ending-style],
+    [data-current][data-starting-style] {
+      filter: blur(var(--lobe-tooltip-content-blur));
+    }
+
+    /* Freeze both layers at their own final width so neither re-wraps while the box morphs;
+       the viewport clip reveals the new text as the box grows over it. */
     [data-previous] {
       position: absolute;
       inset-block-start: 4px;
       inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);
+      width: calc(var(--popup-width) - var(--lobe-tooltip-viewport-inline-padding) * 2 - 2px);
+    }
+
+    &[data-transitioning] [data-current] {
+      width: calc(var(--positioner-width) - var(--lobe-tooltip-viewport-inline-padding) * 2 - 2px);
+    }
+
+    &[data-repop] [data-previous] {
+      display: none;
+    }
+
+    &[data-repop] [data-current] {
+      transition: none;
     }
 
     &[data-activation-direction~='right'] [data-previous][data-ending-style] {

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

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    --lobe-tooltip-arrow-offset-block: 4px;\n    --lobe-tooltip-arrow-offset-inline: 6px;\n\n    pointer-events: none;\n\n    position: absolute;\n    transform-origin: center;\n\n    display: flex;\n\n    width: 8px;\n    height: 4px;\n\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      fill: ${cssVar.colorBgElevated};\n    }\n\n    & [data-role='stroke'] {\n      stroke: ${cssVar.colorBorderSecondary};\n    }\n\n    &[data-side='top'] {\n      inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n      transform: rotate(180deg);\n    }\n\n    &[data-side='left'] {\n      inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n      transform: rotate(90deg);\n    }\n\n    &[data-side='right'] {\n      inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n      transform: rotate(-90deg);\n    }\n\n    &[data-side='bottom'] {\n      inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n    }\n  `,\n\n  popup: css`\n\n    /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity\n       transition ends the browser otherwise drops the layer and re-rasterizes with pixel\n       snapping — a visible one-frame shift when the measured width is fractional\n       (single-line tooltips). */\n    will-change: transform, opacity;\n    user-select: none;\n\n    position: relative;\n    transform-origin: var(--transform-origin);\n\n    max-width: min(320px, var(--available-width));\n    border: 1px solid ${cssVar.colorFill};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.2;\n    color: ${cssVar.colorTextLabel};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow:\n      0 1px 2px 0 rgb(0 0 0 / 3%),\n      0 1px 6px -1px rgb(0 0 0 / 2%),\n      0 2px 4px 0 rgb(0 0 0 / 2%);\n\n    /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the\n       fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads\n       as a dropped frame. The spring stays on transform only. */\n    transition-timing-function:\n      var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out);\n    transition-duration: var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration);\n    transition-property: opacity, transform;\n\n    &[data-layout-animation] {\n      transition-timing-function:\n        var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out),\n        var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease);\n      transition-duration:\n        var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration),\n        var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration);\n      transition-property: opacity, transform, width, height;\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)\n        scale(var(--lobe-tooltip-animation-scale));\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transition-timing-function: var(--lobe-tooltip-animation-ease-in);\n      transition-duration: var(--lobe-tooltip-animation-duration-exit);\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n  `,\n\n  positioner: css`\n    /* Springs baked as linear(): stiffness 700 / damping 38 (enter) and 380 / 28 (glide),\n       both zeta ~0.72 with ~4% overshoot. Durations are the springs' settle times —\n       change them together with the curves, not independently. */\n    --lobe-tooltip-animation-duration: 280ms;\n    --lobe-tooltip-fade-duration: 160ms;\n    --lobe-tooltip-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);\n    --lobe-tooltip-animation-duration-exit: 100ms;\n    --lobe-tooltip-animation-translate: 3px;\n    --lobe-tooltip-animation-scale: 0.97;\n    --lobe-tooltip-animation-ease-in: cubic-bezier(0.4, 0, 1, 1);\n    --lobe-tooltip-animation-ease-out: linear(\n      0,\n      0.041,\n      0.14,\n      0.268,\n      0.407,\n      0.541,\n      0.662,\n      0.765,\n      0.849,\n      0.915,\n      0.964,\n      0.998,\n      1.02,\n      1.032,\n      1.038,\n      1.039,\n      1.036,\n      1.032,\n      1.027,\n      1.022,\n      1.016,\n      1.012,\n      1.008,\n      1.005,\n      1.003\n    );\n    --lobe-tooltip-layout-duration: 380ms;\n    --lobe-tooltip-layout-ease: linear(\n      0,\n      0.041,\n      0.14,\n      0.268,\n      0.407,\n      0.541,\n      0.661,\n      0.765,\n      0.849,\n      0.915,\n      0.964,\n      0.998,\n      1.02,\n      1.032,\n      1.038,\n      1.039,\n      1.036,\n      1.032,\n      1.027,\n      1.022,\n      1.016,\n      1.012,\n      1.008,\n      1.005,\n      1.003\n    );\n    --lobe-tooltip-translate-x: 0;\n    --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n\n    will-change: transform, opacity;\n\n    z-index: 114514;\n\n    width: min(var(--positioner-width), 320px, var(--available-width));\n    height: var(--positioner-height);\n\n    transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n    transition-duration: var(--lobe-tooltip-animation-duration);\n    transition-property: none;\n\n    &[data-layout-animation] {\n      transition-timing-function: var(--lobe-tooltip-layout-ease);\n      transition-duration: var(--lobe-tooltip-layout-duration);\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 tooltip 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-tooltip-translate-x: 0;\n      --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);\n    }\n\n    &[data-placement='bottom'],\n    &[data-placement='bottomLeft'],\n    &[data-placement='bottomRight'] {\n      --lobe-tooltip-translate-x: 0;\n      --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n    }\n\n    &[data-placement='left'],\n    &[data-placement='leftTop'],\n    &[data-placement='leftBottom'] {\n      --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);\n      --lobe-tooltip-translate-y: 0;\n    }\n\n    &[data-placement='right'],\n    &[data-placement='rightTop'],\n    &[data-placement='rightBottom'] {\n      --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);\n      --lobe-tooltip-translate-y: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      --lobe-tooltip-animation-duration: 0s;\n      --lobe-tooltip-fade-duration: 0s;\n      --lobe-tooltip-animation-duration-exit: 0s;\n      --lobe-tooltip-layout-duration: 0s;\n    }\n  `,\n\n  viewport: css`\n    --lobe-tooltip-viewport-inline-padding: 8px;\n    --lobe-tooltip-content-shift: 40%;\n\n    position: relative;\n\n    overflow: clip;\n    display: flex;\n    gap: 6px;\n    align-items: center;\n\n    padding-block: 4px;\n    padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n    overflow-wrap: break-word;\n    white-space: normal;\n\n    [data-previous],\n    [data-current] {\n      transform: translateX(0);\n\n      display: flex;\n      gap: 6px;\n      align-items: center;\n\n      opacity: 1;\n\n      transition:\n        transform var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),\n        opacity calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease);\n    }\n\n    [data-previous] {\n      position: absolute;\n      inset-block-start: 4px;\n      inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);\n    }\n\n    &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n      transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='right'] [data-current][data-starting-style] {\n      transform: translateX(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n      transform: translateX(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-current][data-starting-style] {\n      transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n      transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-current][data-starting-style] {\n      transform: translateY(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n      transform: translateY(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-current][data-starting-style] {\n      transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;cAkBE,OAAO,gBAAgB;;;;gBAIrB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CAuB1C,OAAO,GAAG;;;;;;;;;;;;;wBAaY,OAAO,UAAU;qBACpB,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;aAEtB,OAAO,eAAe;;kBAEjB,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCvC,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsIf,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8Ef,EAAE"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Tooltip/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n  arrow: css`\n    --lobe-tooltip-arrow-offset-block: 4px;\n    --lobe-tooltip-arrow-offset-inline: 6px;\n\n    pointer-events: none;\n\n    position: absolute;\n    transform-origin: center;\n\n    display: flex;\n\n    width: 8px;\n    height: 4px;\n\n    transition:\n      inset-inline-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),\n      inset-block-start var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease);\n\n    & > svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      fill: ${cssVar.colorBgElevated};\n    }\n\n    & [data-role='stroke'] {\n      stroke: ${cssVar.colorBorderSecondary};\n    }\n\n    &[data-side='top'] {\n      inset-block-end: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n      transform: rotate(180deg);\n    }\n\n    &[data-side='left'] {\n      inset-inline-end: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n      transform: rotate(90deg);\n    }\n\n    &[data-side='right'] {\n      inset-inline-start: calc(var(--lobe-tooltip-arrow-offset-inline) * -1);\n      transform: rotate(-90deg);\n    }\n\n    &[data-side='bottom'] {\n      inset-block-start: calc(var(--lobe-tooltip-arrow-offset-block) * -1);\n    }\n  `,\n\n  popup: css`\n    /* Keep the popup on its own compositor layer for its whole lifetime: when the opacity\n       transition ends the browser otherwise drops the layer and re-rasterizes with pixel\n       snapping — a visible one-frame shift when the measured width is fractional\n       (single-line tooltips). */\n    will-change: transform, opacity;\n    user-select: none;\n\n    position: relative;\n    transform-origin: var(--transform-origin);\n\n    box-sizing: border-box;\n\n    /* The 320px cap lives on the viewport, not here: Base UI measures content with\n       --available-width set to max-content, and min(320px, max-content) is invalid, which\n       recorded unclamped sizes. A percentage cap is out too — it tracks the positioner, which\n       snaps to the new size and would freeze the shrink half of the morph. */\n    max-width: var(--available-width);\n    border: 1px solid ${cssVar.colorFill};\n    border-radius: ${cssVar.borderRadiusSM};\n\n    font-size: ${cssVar.fontSizeSM};\n    line-height: 1.2;\n    color: ${cssVar.colorTextLabel};\n\n    background: ${cssVar.colorBgElevated};\n    box-shadow:\n      0 1px 2px 0 rgb(0 0 0 / 3%),\n      0 1px 6px -1px rgb(0 0 0 / 2%),\n      0 2px 4px 0 rgb(0 0 0 / 2%);\n\n    /* Opacity gets its own monotonic curve: running it on the overshooting spring makes the\n       fade look finished at ~0.96, pause, then visibly step to 1 at the clamp point — reads\n       as a dropped frame. The spring stays on transform only. */\n    transition-timing-function:\n      var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out);\n    transition-duration: var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration);\n    transition-property: opacity, transform;\n\n    /* Base UI writes the old size into --popup-width/height on a trigger switch and the new size\n       one frame later; the box only morphs if width/height actually read them. */\n    &[data-layout-animation] {\n      width: var(--popup-width, auto);\n      height: var(--popup-height, auto);\n\n      transition-timing-function:\n        var(--lobe-tooltip-fade-ease), var(--lobe-tooltip-animation-ease-out),\n        var(--lobe-tooltip-layout-ease), var(--lobe-tooltip-layout-ease);\n      transition-duration:\n        var(--lobe-tooltip-fade-duration), var(--lobe-tooltip-animation-duration),\n        var(--lobe-tooltip-layout-duration), var(--lobe-tooltip-layout-duration);\n      transition-property: opacity, transform, width, height;\n    }\n\n    &[data-repop] {\n      transition: none;\n    }\n\n    &[data-starting-style],\n    &[data-ending-style] {\n      transform: translate3d(var(--lobe-tooltip-translate-x), var(--lobe-tooltip-translate-y), 0)\n        scale(var(--lobe-tooltip-animation-scale));\n      opacity: 0;\n    }\n\n    &[data-ending-style] {\n      transition-timing-function: var(--lobe-tooltip-animation-ease-in);\n      transition-duration: var(--lobe-tooltip-animation-duration-exit);\n    }\n\n    &[data-instant] {\n      transition: none;\n    }\n  `,\n\n  positioner: css`\n    /* Springs baked as linear(): stiffness 700 / damping 38 (enter) and 380 / 28 (glide),\n       both zeta ~0.72 with ~4% overshoot. Durations are the springs' settle times —\n       change them together with the curves, not independently. */\n    --lobe-tooltip-animation-duration: 280ms;\n    --lobe-tooltip-fade-duration: 160ms;\n    --lobe-tooltip-fade-ease: cubic-bezier(0.33, 1, 0.68, 1);\n    --lobe-tooltip-animation-duration-exit: 100ms;\n    --lobe-tooltip-animation-translate: 3px;\n    --lobe-tooltip-animation-scale: 0.97;\n    --lobe-tooltip-animation-ease-in: cubic-bezier(0.4, 0, 1, 1);\n    --lobe-tooltip-animation-ease-out: linear(\n      0,\n      0.041,\n      0.14,\n      0.268,\n      0.407,\n      0.541,\n      0.662,\n      0.765,\n      0.849,\n      0.915,\n      0.964,\n      0.998,\n      1.02,\n      1.032,\n      1.038,\n      1.039,\n      1.036,\n      1.032,\n      1.027,\n      1.022,\n      1.016,\n      1.012,\n      1.008,\n      1.005,\n      1.003\n    );\n    --lobe-tooltip-layout-duration: 380ms;\n    --lobe-tooltip-layout-ease: linear(\n      0,\n      0.041,\n      0.14,\n      0.268,\n      0.407,\n      0.541,\n      0.661,\n      0.765,\n      0.849,\n      0.915,\n      0.964,\n      0.998,\n      1.02,\n      1.032,\n      1.038,\n      1.039,\n      1.036,\n      1.032,\n      1.027,\n      1.022,\n      1.016,\n      1.012,\n      1.008,\n      1.005,\n      1.003\n    );\n    --lobe-tooltip-translate-x: 0;\n    --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n\n    will-change: transform, opacity;\n\n    z-index: 114514;\n\n    width: min(var(--positioner-width), 320px, var(--available-width));\n    height: var(--positioner-height);\n\n    transition-timing-function: var(--lobe-tooltip-animation-ease-out);\n    transition-duration: var(--lobe-tooltip-animation-duration);\n    transition-property: none;\n\n    &[data-layout-animation] {\n      transition-timing-function: var(--lobe-tooltip-layout-ease);\n      transition-duration: var(--lobe-tooltip-layout-duration);\n      transition-property:\n        inset-block-start, inset-inline-start, inset-inline-end, inset-block-end, transform;\n    }\n\n    &[data-instant],\n    &[data-repop] {\n      transition: none;\n    }\n\n    /* Fallback: never show a tooltip 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-tooltip-translate-x: 0;\n      --lobe-tooltip-translate-y: var(--lobe-tooltip-animation-translate);\n    }\n\n    &[data-placement='bottom'],\n    &[data-placement='bottomLeft'],\n    &[data-placement='bottomRight'] {\n      --lobe-tooltip-translate-x: 0;\n      --lobe-tooltip-translate-y: calc(var(--lobe-tooltip-animation-translate) * -1);\n    }\n\n    &[data-placement='left'],\n    &[data-placement='leftTop'],\n    &[data-placement='leftBottom'] {\n      --lobe-tooltip-translate-x: var(--lobe-tooltip-animation-translate);\n      --lobe-tooltip-translate-y: 0;\n    }\n\n    &[data-placement='right'],\n    &[data-placement='rightTop'],\n    &[data-placement='rightBottom'] {\n      --lobe-tooltip-translate-x: calc(var(--lobe-tooltip-animation-translate) * -1);\n      --lobe-tooltip-translate-y: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      --lobe-tooltip-animation-duration: 0s;\n      --lobe-tooltip-fade-duration: 0s;\n      --lobe-tooltip-animation-duration-exit: 0s;\n      --lobe-tooltip-layout-duration: 0s;\n    }\n  `,\n\n  viewport: css`\n    --lobe-tooltip-viewport-inline-padding: 8px;\n    --lobe-tooltip-content-shift: 8px;\n    --lobe-tooltip-content-blur: 4px;\n\n    position: relative;\n\n    overflow: clip;\n\n    max-width: calc(320px - 2px);\n    padding-block: 4px;\n    padding-inline: var(--lobe-tooltip-viewport-inline-padding);\n\n    overflow-wrap: break-word;\n    white-space: normal;\n\n    /* Old and new text overlap in one clip box while the box morphs; blurring both layers during\n       the crossfade turns the misaligned overlap into a soft smear instead of garbled text. */\n    [data-previous],\n    [data-current] {\n      transform: translateX(0);\n\n      display: flex;\n      gap: 6px;\n      align-items: center;\n\n      opacity: 1;\n      filter: blur(0);\n\n      transition:\n        transform var(--lobe-tooltip-layout-duration) var(--lobe-tooltip-layout-ease),\n        opacity calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease),\n        filter calc(var(--lobe-tooltip-layout-duration) / 2) var(--lobe-tooltip-fade-ease);\n    }\n\n    [data-current] {\n      transition-delay:\n        0s, calc(var(--lobe-tooltip-layout-duration) / 6),\n        calc(var(--lobe-tooltip-layout-duration) / 6);\n    }\n\n    [data-previous][data-ending-style],\n    [data-current][data-starting-style] {\n      filter: blur(var(--lobe-tooltip-content-blur));\n    }\n\n    /* Freeze both layers at their own final width so neither re-wraps while the box morphs;\n       the viewport clip reveals the new text as the box grows over it. */\n    [data-previous] {\n      position: absolute;\n      inset-block-start: 4px;\n      inset-inline-start: var(--lobe-tooltip-viewport-inline-padding);\n      width: calc(var(--popup-width) - var(--lobe-tooltip-viewport-inline-padding) * 2 - 2px);\n    }\n\n    &[data-transitioning] [data-current] {\n      width: calc(var(--positioner-width) - var(--lobe-tooltip-viewport-inline-padding) * 2 - 2px);\n    }\n\n    &[data-repop] [data-previous] {\n      display: none;\n    }\n\n    &[data-repop] [data-current] {\n      transition: none;\n    }\n\n    &[data-activation-direction~='right'] [data-previous][data-ending-style] {\n      transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='right'] [data-current][data-starting-style] {\n      transform: translateX(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-previous][data-ending-style] {\n      transform: translateX(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='left'] [data-current][data-starting-style] {\n      transform: translateX(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-previous][data-ending-style] {\n      transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='down'] [data-current][data-starting-style] {\n      transform: translateY(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-previous][data-ending-style] {\n      transform: translateY(var(--lobe-tooltip-content-shift));\n      opacity: 0;\n    }\n\n    &[data-activation-direction~='up'] [data-current][data-starting-style] {\n      transform: translateY(calc(var(--lobe-tooltip-content-shift) * -1));\n      opacity: 0;\n    }\n  `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;cAsBE,OAAO,gBAAgB;;;;gBAIrB,OAAO,qBAAqB;;;;;;;;;;;;;;;;;;;;;;CAuB1C,OAAO,GAAG;;;;;;;;;;;;;;;;;;wBAkBY,OAAO,UAAU;qBACpB,OAAO,eAAe;;iBAE1B,OAAO,WAAW;;aAEtB,OAAO,eAAe;;kBAEjB,OAAO,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDvC,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuIf,UAAU,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2Gf,EAAE"}

package/es/utils/useRepopOnFarTriggerSwitch.mjs

@@ -0,0 +1,62 @@
+import { useLayoutEffect, useRef, useState } from "react";
+const REPOP_ANIMATION = [[{
+	opacity: 0,
+	scale: .97
+}, {
+	opacity: 1,
+	scale: 1
+}], {
+	duration: 200,
+	easing: "cubic-bezier(0.33, 1, 0.68, 1)"
+}];
+const centerOf = (el) => {
+	const rect = el.getBoundingClientRect();
+	return {
+		x: rect.left + rect.width / 2,
+		y: rect.top + rect.height / 2
+	};
+};
+const prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const useRepopOnFarTriggerSwitch = (store, options) => {
+	const enabled = options?.enabled ?? true;
+	const threshold = options?.threshold ?? 280;
+	const activeTrigger = store.useState?.("activeTriggerElement") ?? store.state.activeTriggerElement ?? null;
+	const open = store.useState?.("open") ?? Boolean(store.state.open);
+	const popupElement = store.useState?.("popupElement") ?? store.state.popupElement ?? null;
+	const lastRef = useRef({
+		center: null,
+		el: null
+	});
+	const [repop, setRepop] = useState(false);
+	useLayoutEffect(() => {
+		if (!open || !enabled) {
+			lastRef.current = {
+				center: null,
+				el: null
+			};
+			setRepop(false);
+			return;
+		}
+		const last = lastRef.current;
+		if (activeTrigger === last.el) return;
+		const center = activeTrigger ? centerOf(activeTrigger) : null;
+		const far = Boolean(last.el && last.center && center && Math.hypot(center.x - last.center.x, center.y - last.center.y) > threshold);
+		lastRef.current = {
+			center,
+			el: activeTrigger
+		};
+		setRepop(far);
+		if (far && popupElement && !prefersReducedMotion()) popupElement.animate?.(...REPOP_ANIMATION);
+	}, [
+		activeTrigger,
+		enabled,
+		open,
+		popupElement,
+		threshold
+	]);
+	return repop;
+};
+//#endregion
+export { useRepopOnFarTriggerSwitch };
+
+//# sourceMappingURL=useRepopOnFarTriggerSwitch.mjs.map

package/es/utils/useRepopOnFarTriggerSwitch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRepopOnFarTriggerSwitch.mjs","names":[],"sources":["../../src/utils/useRepopOnFarTriggerSwitch.ts"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react';\n\ntype PopupStoreLike = {\n  state: {\n    activeTriggerElement?: Element | null;\n    open?: boolean;\n    popupElement?: HTMLElement | null;\n  };\n  useState?: (...args: any[]) => unknown;\n};\n\nexport const FAR_TRIGGER_SWITCH_THRESHOLD = 280;\n\nconst REPOP_ANIMATION: [Keyframe[], KeyframeAnimationOptions] = [\n  [\n    { opacity: 0, scale: 0.97 },\n    { opacity: 1, scale: 1 },\n  ],\n  { duration: 200, easing: 'cubic-bezier(0.33, 1, 0.68, 1)' },\n];\n\nconst centerOf = (el: Element) => {\n  const rect = el.getBoundingClientRect();\n  return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };\n};\n\nconst prefersReducedMotion = () =>\n  typeof window !== 'undefined' &&\n  typeof window.matchMedia === 'function' &&\n  window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\n// A morph across a long distance reads as a stray box flying over the page, so past `threshold`\n// the switch is made instant and the popup re-plays a short enter animation at the new anchor.\nexport const useRepopOnFarTriggerSwitch = (\n  store: PopupStoreLike,\n  options?: { enabled?: boolean; threshold?: number },\n): boolean => {\n  const enabled = options?.enabled ?? true;\n  const threshold = options?.threshold ?? FAR_TRIGGER_SWITCH_THRESHOLD;\n\n  const activeTrigger =\n    (store.useState?.('activeTriggerElement') as Element | null | undefined) ??\n    store.state.activeTriggerElement ??\n    null;\n  const open = (store.useState?.('open') as boolean | undefined) ?? Boolean(store.state.open);\n  const popupElement =\n    (store.useState?.('popupElement') as HTMLElement | null | undefined) ??\n    store.state.popupElement ??\n    null;\n\n  const lastRef = useRef<{ center: { x: number; y: number } | null; el: Element | null }>({\n    center: null,\n    el: null,\n  });\n  const [repop, setRepop] = useState(false);\n\n  useLayoutEffect(() => {\n    if (!open || !enabled) {\n      lastRef.current = { center: null, el: null };\n      setRepop(false);\n      return;\n    }\n    const last = lastRef.current;\n    if (activeTrigger === last.el) return;\n\n    const center = activeTrigger ? centerOf(activeTrigger) : null;\n    const far = Boolean(\n      last.el &&\n      last.center &&\n      center &&\n      Math.hypot(center.x - last.center.x, center.y - last.center.y) > threshold,\n    );\n    lastRef.current = { center, el: activeTrigger };\n    setRepop(far);\n\n    if (far && popupElement && !prefersReducedMotion()) {\n      popupElement.animate?.(...REPOP_ANIMATION);\n    }\n  }, [activeTrigger, enabled, open, popupElement, threshold]);\n\n  return repop;\n};\n"],"mappings":";AAaA,MAAM,kBAA0D,CAC9D,CACE;CAAE,SAAS;CAAG,OAAO;AAAK,GAC1B;CAAE,SAAS;CAAG,OAAO;AAAE,CACzB,GACA;CAAE,UAAU;CAAK,QAAQ;AAAiC,CAC5D;AAEA,MAAM,YAAY,OAAgB;CAChC,MAAM,OAAO,GAAG,sBAAsB;CACtC,OAAO;EAAE,GAAG,KAAK,OAAO,KAAK,QAAQ;EAAG,GAAG,KAAK,MAAM,KAAK,SAAS;CAAE;AACxE;AAEA,MAAM,6BACJ,OAAO,WAAW,eAClB,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,kCAAkC,CAAC,CAAC;AAIxD,MAAa,8BACX,OACA,YACY;CACZ,MAAM,UAAU,SAAS,WAAW;CACpC,MAAM,YAAY,SAAS,aAAA;CAE3B,MAAM,gBACH,MAAM,WAAW,sBAAsB,KACxC,MAAM,MAAM,wBACZ;CACF,MAAM,OAAQ,MAAM,WAAW,MAAM,KAA6B,QAAQ,MAAM,MAAM,IAAI;CAC1F,MAAM,eACH,MAAM,WAAW,cAAc,KAChC,MAAM,MAAM,gBACZ;CAEF,MAAM,UAAU,OAAwE;EACtF,QAAQ;EACR,IAAI;CACN,CAAC;CACD,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CAExC,sBAAsB;EACpB,IAAI,CAAC,QAAQ,CAAC,SAAS;GACrB,QAAQ,UAAU;IAAE,QAAQ;IAAM,IAAI;GAAK;GAC3C,SAAS,KAAK;GACd;EACF;EACA,MAAM,OAAO,QAAQ;EACrB,IAAI,kBAAkB,KAAK,IAAI;EAE/B,MAAM,SAAS,gBAAgB,SAAS,aAAa,IAAI;EACzD,MAAM,MAAM,QACV,KAAK,MACL,KAAK,UACL,UACA,KAAK,MAAM,OAAO,IAAI,KAAK,OAAO,GAAG,OAAO,IAAI,KAAK,OAAO,CAAC,IAAI,SACnE;EACA,QAAQ,UAAU;GAAE;GAAQ,IAAI;EAAc;EAC9C,SAAS,GAAG;EAEZ,IAAI,OAAO,gBAAgB,CAAC,qBAAqB,GAC/C,aAAa,UAAU,GAAG,eAAe;CAE7C,GAAG;EAAC;EAAe;EAAS;EAAM;EAAc;CAAS,CAAC;CAE1D,OAAO;AACT"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "5.42.5",
+  "version": "5.42.7",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",