@lobehub/ui 4.8.0 → 4.9.0

package/es/Modal/imperative.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"imperative.mjs","names":["modalStack: TModalStackItem[]","EMPTY_STACK: TModalStackItem[]"],"sources":["../../src/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { memo, useState, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\n\nimport { ModalStackItem } from './ModalStackItem';\nimport { RawModalStackItem } from './RawModalStackItem';\nimport type {\n  ImperativeModalProps,\n  ModalInstance,\n  RawModalComponent,\n  RawModalComponentProps,\n  RawModalInstance,\n  RawModalKeyOptions,\n  RawModalOptions,\n} from './type';\n\ntype ModalStackItemBase = {\n  id: string;\n};\n\ntype ModalStackItemModal = ModalStackItemBase & {\n  kind: 'modal';\n  props: ImperativeModalProps;\n};\n\ntype ModalStackItemRaw = ModalStackItemBase & {\n  component: RawModalComponent;\n  kind: 'raw';\n  open: boolean;\n  options?: RawModalOptions<PropertyKey, PropertyKey>;\n  props: Record<string, unknown>;\n};\n\ntype TModalStackItem = ModalStackItemModal | ModalStackItemRaw;\n\ntype ModalStackProps = {\n  stack: TModalStackItem[];\n};\n\nexport type ModalHostProps = {\n  root?: HTMLElement | ShadowRoot | null;\n};\n\nconst MODAL_PORTAL_ATTR = 'data-lobe-ui-modal-portal';\n\n// Reuse one portal container per root (document.body by default).\nconst containerMap = new WeakMap<object, HTMLElement>();\n\nlet modalStack: TModalStackItem[] = [];\nlet modalSeed = 0;\nconst listeners = new Set<() => void>();\nconst rawDestroyTimers = new Map<string, number>();\n\nconst notify = () => {\n  listeners.forEach((listener) => listener());\n};\n\nconst subscribe = (listener: () => void) => {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n};\n\nconst EMPTY_STACK: TModalStackItem[] = [];\nconst getSnapshot = () => modalStack;\nconst getServerSnapshot = () => EMPTY_STACK;\n\nconst getOrCreateContainer = (root: HTMLElement | ShadowRoot): HTMLElement => {\n  const cached = containerMap.get(root);\n  if (cached && cached.isConnected) return cached;\n\n  const el = document.createElement('div');\n  el.setAttribute(MODAL_PORTAL_ATTR, 'true');\n  root.append(el);\n  containerMap.set(root, el);\n  return el;\n};\n\nconst resolveRoot = (root?: HTMLElement | ShadowRoot | null): HTMLElement | ShadowRoot | null => {\n  if (root) return root;\n  return document.body;\n};\n\nconst ModalPortal = ({\n  children,\n  root,\n}: {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | null;\n}) => {\n  const [container, setContainer] = useState<HTMLElement | null>(() => {\n    const resolved = resolveRoot(root);\n    if (!resolved) return null;\n    return getOrCreateContainer(resolved);\n  });\n\n  if (!container) {\n    setContainer(getOrCreateContainer(document.body));\n  }\n\n  if (!container) return null;\n  return createPortal(children, container);\n};\n\nconst updateModal = (id: string, nextProps: Partial<ImperativeModalProps>) => {\n  let changed = false;\n  modalStack = modalStack.map((item) => {\n    if (item.id !== id) return item;\n    if (item.kind !== 'modal') return item;\n    changed = true;\n    return {\n      ...item,\n      props: { ...item.props, ...nextProps },\n    };\n  });\n\n  if (changed) notify();\n};\n\nconst updateRawProps = (id: string, nextProps: Record<string, unknown>) => {\n  let changed = false;\n  modalStack = modalStack.map((item) => {\n    if (item.id !== id) return item;\n    if (item.kind !== 'raw') return item;\n    changed = true;\n    return {\n      ...item,\n      props: { ...item.props, ...nextProps },\n    };\n  });\n\n  if (changed) notify();\n};\n\nconst setRawOpen = (id: string, open: boolean) => {\n  let changed = false;\n  modalStack = modalStack.map((item) => {\n    if (item.id !== id) return item;\n    if (item.kind !== 'raw') return item;\n    if (item.open === open) return item;\n    changed = true;\n    return { ...item, open };\n  });\n\n  if (open) {\n    const timer = rawDestroyTimers.get(id);\n    if (timer) {\n      clearTimeout(timer);\n      rawDestroyTimers.delete(id);\n    }\n  }\n\n  if (changed) notify();\n};\n\nconst closeModal = (id: string) => {\n  const target = modalStack.find((item) => item.id === id);\n  if (!target) return;\n\n  if (target.kind === 'modal') {\n    updateModal(id, { open: false });\n    return;\n  }\n\n  setRawOpen(id, false);\n\n  const shouldDestroy = target.options?.destroyOnClose ?? true;\n  if (!shouldDestroy) return;\n\n  const delay = target.options?.destroyDelay ?? 200;\n  const existing = rawDestroyTimers.get(id);\n  if (existing) clearTimeout(existing);\n  const timer = window.setTimeout(() => {\n    rawDestroyTimers.delete(id);\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    destroyModal(id);\n  }, delay);\n  rawDestroyTimers.set(id, timer);\n};\n\nconst destroyModal = (id: string) => {\n  const timer = rawDestroyTimers.get(id);\n  if (timer) {\n    clearTimeout(timer);\n    rawDestroyTimers.delete(id);\n  }\n  const nextStack = modalStack.filter((item) => item.id !== id);\n  if (nextStack.length === modalStack.length) return;\n  modalStack = nextStack;\n  notify();\n};\n\nconst ModalStack = memo(({ stack }: ModalStackProps) => {\n  const isClient = useIsClient();\n  if (!isClient) return null;\n  return stack.map((item) => {\n    if (item.kind === 'modal') {\n      return (\n        <ModalStackItem\n          id={item.id}\n          key={item.id}\n          onClose={closeModal}\n          onDestroy={destroyModal}\n          onUpdate={updateModal}\n          props={item.props}\n        />\n      );\n    }\n\n    return (\n      <RawModalStackItem\n        component={item.component}\n        id={item.id}\n        key={item.id}\n        onClose={closeModal}\n        onUpdate={updateRawProps}\n        open={item.open}\n        options={item.options}\n        props={item.props}\n      />\n    );\n  });\n});\n\nModalStack.displayName = 'ModalStack';\n\nexport const ModalHost = ({ root }: ModalHostProps) => {\n  const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n  const isClient = useIsClient();\n  if (!isClient) return null;\n  if (stack.length === 0) return null;\n\n  return (\n    <ModalPortal root={root}>\n      <ModalStack stack={stack} />\n    </ModalPortal>\n  );\n};\n\nexport const createModal = (props: ImperativeModalProps): ModalInstance => {\n  const id = `modal-${Date.now()}-${modalSeed++}`;\n  modalStack = [\n    ...modalStack,\n    { id, kind: 'modal', props: { ...props, open: props.open ?? true } },\n  ];\n  notify();\n\n  return {\n    close: () => closeModal(id),\n    destroy: () => destroyModal(id),\n    setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }),\n    update: (nextProps) => updateModal(id, nextProps),\n  };\n};\n\nexport function createRawModal<P extends RawModalComponentProps>(\n  component: RawModalComponent<P>,\n  props: Omit<P, 'open' | 'onClose'>,\n  options?: RawModalOptions,\n): RawModalInstance<P>;\n// eslint-disable-next-line no-redeclare\nexport function createRawModal<P, OpenKey extends keyof P, CloseKey extends keyof P>(\n  component: RawModalComponent<P>,\n  props: Omit<P, OpenKey | CloseKey>,\n  options: RawModalKeyOptions<OpenKey, CloseKey>,\n): RawModalInstance<P, OpenKey, CloseKey>;\n// eslint-disable-next-line no-redeclare\nexport function createRawModal<P, OpenKey extends keyof P, CloseKey extends keyof P>(\n  component: RawModalComponent<P>,\n  props: Omit<P, OpenKey | CloseKey>,\n  options?: RawModalOptions<OpenKey, CloseKey>,\n): RawModalInstance<P, OpenKey, CloseKey> {\n  const id = `modal-${Date.now()}-${modalSeed++}`;\n  modalStack = [\n    ...modalStack,\n    {\n      component,\n      id,\n      kind: 'raw',\n      open: true,\n      options,\n      props: props as Record<string, unknown>,\n    },\n  ];\n  notify();\n\n  return {\n    close: () => closeModal(id),\n    destroy: () => destroyModal(id),\n    setCanDismissByClickOutside: (value) => updateRawProps(id, { maskClosable: value }),\n    update: (nextProps) => updateRawProps(id, nextProps as Record<string, unknown>),\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"imperative.mjs","names":["modalStack: TModalStackItem[]","EMPTY_STACK: TModalStackItem[]"],"sources":["../../src/Modal/imperative.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { memo, useEffect, useState, useSyncExternalStore } from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { useIsClient } from '@/hooks/useIsClient';\nimport { registerDevSingleton } from '@/utils/devSingleton';\n\nimport { ModalStackItem } from './ModalStackItem';\nimport { RawModalStackItem } from './RawModalStackItem';\nimport type {\n  ImperativeModalProps,\n  ModalInstance,\n  RawModalComponent,\n  RawModalComponentProps,\n  RawModalInstance,\n  RawModalKeyOptions,\n  RawModalOptions,\n} from './type';\n\ntype ModalStackItemBase = {\n  id: string;\n};\n\ntype ModalStackItemModal = ModalStackItemBase & {\n  kind: 'modal';\n  props: ImperativeModalProps;\n};\n\ntype ModalStackItemRaw = ModalStackItemBase & {\n  component: RawModalComponent;\n  kind: 'raw';\n  open: boolean;\n  options?: RawModalOptions<PropertyKey, PropertyKey>;\n  props: Record<string, unknown>;\n};\n\ntype TModalStackItem = ModalStackItemModal | ModalStackItemRaw;\n\ntype ModalStackProps = {\n  stack: TModalStackItem[];\n};\n\nexport type ModalHostProps = {\n  root?: HTMLElement | ShadowRoot | null;\n};\n\nconst MODAL_PORTAL_ATTR = 'data-lobe-ui-modal-portal';\n\n// Reuse one portal container per root (document.body by default).\nconst containerMap = new WeakMap<object, HTMLElement>();\n\nlet modalStack: TModalStackItem[] = [];\nlet modalSeed = 0;\nconst listeners = new Set<() => void>();\nconst rawDestroyTimers = new Map<string, number>();\n\nconst notify = () => {\n  listeners.forEach((listener) => listener());\n};\n\nconst subscribe = (listener: () => void) => {\n  listeners.add(listener);\n  return () => listeners.delete(listener);\n};\n\nconst EMPTY_STACK: TModalStackItem[] = [];\nconst getSnapshot = () => modalStack;\nconst getServerSnapshot = () => EMPTY_STACK;\n\nconst getOrCreateContainer = (root: HTMLElement | ShadowRoot): HTMLElement => {\n  const cached = containerMap.get(root);\n  if (cached && cached.isConnected) return cached;\n\n  const el = document.createElement('div');\n  el.setAttribute(MODAL_PORTAL_ATTR, 'true');\n  root.append(el);\n  containerMap.set(root, el);\n  return el;\n};\n\nconst resolveRoot = (root?: HTMLElement | ShadowRoot | null): HTMLElement | ShadowRoot | null => {\n  if (root) return root;\n  return document.body;\n};\n\nconst ModalPortal = ({\n  children,\n  root,\n}: {\n  children: ReactNode;\n  root?: HTMLElement | ShadowRoot | null;\n}) => {\n  const [container, setContainer] = useState<HTMLElement | null>(() => {\n    const resolved = resolveRoot(root);\n    if (!resolved) return null;\n    return getOrCreateContainer(resolved);\n  });\n\n  if (!container) {\n    setContainer(getOrCreateContainer(document.body));\n  }\n\n  if (!container) return null;\n  return createPortal(children, container);\n};\n\nconst updateModal = (id: string, nextProps: Partial<ImperativeModalProps>) => {\n  let changed = false;\n  modalStack = modalStack.map((item) => {\n    if (item.id !== id) return item;\n    if (item.kind !== 'modal') return item;\n    changed = true;\n    return {\n      ...item,\n      props: { ...item.props, ...nextProps },\n    };\n  });\n\n  if (changed) notify();\n};\n\nconst updateRawProps = (id: string, nextProps: Record<string, unknown>) => {\n  let changed = false;\n  modalStack = modalStack.map((item) => {\n    if (item.id !== id) return item;\n    if (item.kind !== 'raw') return item;\n    changed = true;\n    return {\n      ...item,\n      props: { ...item.props, ...nextProps },\n    };\n  });\n\n  if (changed) notify();\n};\n\nconst setRawOpen = (id: string, open: boolean) => {\n  let changed = false;\n  modalStack = modalStack.map((item) => {\n    if (item.id !== id) return item;\n    if (item.kind !== 'raw') return item;\n    if (item.open === open) return item;\n    changed = true;\n    return { ...item, open };\n  });\n\n  if (open) {\n    const timer = rawDestroyTimers.get(id);\n    if (timer) {\n      clearTimeout(timer);\n      rawDestroyTimers.delete(id);\n    }\n  }\n\n  if (changed) notify();\n};\n\nconst closeModal = (id: string) => {\n  const target = modalStack.find((item) => item.id === id);\n  if (!target) return;\n\n  if (target.kind === 'modal') {\n    updateModal(id, { open: false });\n    return;\n  }\n\n  setRawOpen(id, false);\n\n  const shouldDestroy = target.options?.destroyOnClose ?? true;\n  if (!shouldDestroy) return;\n\n  const delay = target.options?.destroyDelay ?? 200;\n  const existing = rawDestroyTimers.get(id);\n  if (existing) clearTimeout(existing);\n  const timer = window.setTimeout(() => {\n    rawDestroyTimers.delete(id);\n    // eslint-disable-next-line @typescript-eslint/no-use-before-define\n    destroyModal(id);\n  }, delay);\n  rawDestroyTimers.set(id, timer);\n};\n\nconst destroyModal = (id: string) => {\n  const timer = rawDestroyTimers.get(id);\n  if (timer) {\n    clearTimeout(timer);\n    rawDestroyTimers.delete(id);\n  }\n  const nextStack = modalStack.filter((item) => item.id !== id);\n  if (nextStack.length === modalStack.length) return;\n  modalStack = nextStack;\n  notify();\n};\n\nconst ModalStack = memo(({ stack }: ModalStackProps) => {\n  const isClient = useIsClient();\n  if (!isClient) return null;\n  return stack.map((item) => {\n    if (item.kind === 'modal') {\n      return (\n        <ModalStackItem\n          id={item.id}\n          key={item.id}\n          onClose={closeModal}\n          onDestroy={destroyModal}\n          onUpdate={updateModal}\n          props={item.props}\n        />\n      );\n    }\n\n    return (\n      <RawModalStackItem\n        component={item.component}\n        id={item.id}\n        key={item.id}\n        onClose={closeModal}\n        onUpdate={updateRawProps}\n        open={item.open}\n        options={item.options}\n        props={item.props}\n      />\n    );\n  });\n});\n\nModalStack.displayName = 'ModalStack';\n\nexport const ModalHost = ({ root }: ModalHostProps) => {\n  const stack = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n  const isClient = useIsClient();\n\n  useEffect(() => {\n    if (!isClient) return;\n    // Enforce singleton per portal root (dev-only).\n    const scope = root ?? document.body;\n    return registerDevSingleton('ModalHost', scope);\n  }, [isClient, root]);\n\n  if (!isClient) return null;\n  if (stack.length === 0) return null;\n\n  return (\n    <ModalPortal root={root}>\n      <ModalStack stack={stack} />\n    </ModalPortal>\n  );\n};\n\nexport const createModal = (props: ImperativeModalProps): ModalInstance => {\n  const id = `modal-${Date.now()}-${modalSeed++}`;\n  modalStack = [\n    ...modalStack,\n    { id, kind: 'modal', props: { ...props, open: props.open ?? true } },\n  ];\n  notify();\n\n  return {\n    close: () => closeModal(id),\n    destroy: () => destroyModal(id),\n    setCanDismissByClickOutside: (value) => updateModal(id, { maskClosable: value }),\n    update: (nextProps) => updateModal(id, nextProps),\n  };\n};\n\nexport function createRawModal<P extends RawModalComponentProps>(\n  component: RawModalComponent<P>,\n  props: Omit<P, 'open' | 'onClose'>,\n  options?: RawModalOptions,\n): RawModalInstance<P>;\n// eslint-disable-next-line no-redeclare\nexport function createRawModal<P, OpenKey extends keyof P, CloseKey extends keyof P>(\n  component: RawModalComponent<P>,\n  props: Omit<P, OpenKey | CloseKey>,\n  options: RawModalKeyOptions<OpenKey, CloseKey>,\n): RawModalInstance<P, OpenKey, CloseKey>;\n// eslint-disable-next-line no-redeclare\nexport function createRawModal<P, OpenKey extends keyof P, CloseKey extends keyof P>(\n  component: RawModalComponent<P>,\n  props: Omit<P, OpenKey | CloseKey>,\n  options?: RawModalOptions<OpenKey, CloseKey>,\n): RawModalInstance<P, OpenKey, CloseKey> {\n  const id = `modal-${Date.now()}-${modalSeed++}`;\n  modalStack = [\n    ...modalStack,\n    {\n      component,\n      id,\n      kind: 'raw',\n      open: true,\n      options,\n      props: props as Record<string, unknown>,\n    },\n  ];\n  notify();\n\n  return {\n    close: () => closeModal(id),\n    destroy: () => destroyModal(id),\n    setCanDismissByClickOutside: (value) => updateRawProps(id, { maskClosable: value }),\n    update: (nextProps) => updateRawProps(id, nextProps as Record<string, unknown>),\n  };\n}\n"],"mappings":"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"}

package/es/MotionProvider/index.d.mts

@@ -1,4 +1,4 @@
-import * as react27 from "react";
+import * as react69 from "react";
 import { Context, ReactNode } from "react";
 import * as motion_react0 from "motion/react";
 import * as m from "motion/react-m";
@@ -6,7 +6,7 @@ import * as m from "motion/react-m";
 //#region src/MotionProvider/index.d.ts
 type MotionComponentType = typeof motion_react0.motion | typeof m;
 declare const MotionComponent: Context<MotionComponentType>;
-declare const MotionProvider: react27.NamedExoticComponent<{
+declare const MotionProvider: react69.NamedExoticComponent<{
   children: ReactNode;
   motion: MotionComponentType;
 }>;

package/es/SearchBar/SearchBar.d.mts

@@ -1,8 +1,8 @@
 import { SearchBarProps } from "./type.mjs";
-import * as react34 from "react";
+import * as react49 from "react";
 
 //#region src/SearchBar/SearchBar.d.ts
-declare const SearchBar: react34.NamedExoticComponent<SearchBarProps>;
+declare const SearchBar: react49.NamedExoticComponent<SearchBarProps>;
 //#endregion
 export { SearchBar };
 //# sourceMappingURL=SearchBar.d.mts.map

package/es/Segmented/Segmented.d.mts

@@ -1,8 +1,8 @@
 import { SegmentedProps } from "./type.mjs";
-import * as react31 from "react";
+import * as react14 from "react";
 
 //#region src/Segmented/Segmented.d.ts
-declare const Segmented: react31.NamedExoticComponent<SegmentedProps>;
+declare const Segmented: react14.NamedExoticComponent<SegmentedProps>;
 //#endregion
 export { Segmented };
 //# sourceMappingURL=Segmented.d.mts.map

package/es/Select/Select.d.mts

@@ -1,8 +1,8 @@
 import { SelectProps } from "./type.mjs";
-import * as react7 from "react";
+import * as react13 from "react";
 
 //#region src/Select/Select.d.ts
-declare const Input: react7.NamedExoticComponent<SelectProps>;
+declare const Input: react13.NamedExoticComponent<SelectProps>;
 //#endregion
 export { Input };
 //# sourceMappingURL=Select.d.mts.map

package/es/SideNav/SideNav.d.mts

@@ -1,8 +1,8 @@
 import { SideNavProps } from "./type.mjs";
-import * as react43 from "react";
+import * as react11 from "react";
 
 //#region src/SideNav/SideNav.d.ts
-declare const SideNav: react43.NamedExoticComponent<SideNavProps>;
+declare const SideNav: react11.NamedExoticComponent<SideNavProps>;
 //#endregion
 export { SideNav };
 //# sourceMappingURL=SideNav.d.mts.map

package/es/SliderWithInput/SliderWithInput.d.mts

@@ -1,8 +1,8 @@
 import { SliderWithInputProps } from "./type.mjs";
-import * as react62 from "react";
+import * as react10 from "react";
 
 //#region src/SliderWithInput/SliderWithInput.d.ts
-declare const SliderWithInput: react62.NamedExoticComponent<SliderWithInputProps>;
+declare const SliderWithInput: react10.NamedExoticComponent<SliderWithInputProps>;
 //#endregion
 export { SliderWithInput };
 //# sourceMappingURL=SliderWithInput.d.mts.map

package/es/SortableList/components/DragHandle.d.mts

@@ -1,9 +1,9 @@
 import { ActionIconProps } from "../../ActionIcon/type.mjs";
 import "../../ActionIcon/index.mjs";
-import * as react76 from "react";
+import * as react106 from "react";
 
 //#region src/SortableList/components/DragHandle.d.ts
-declare const DragHandle: react76.NamedExoticComponent<ActionIconProps>;
+declare const DragHandle: react106.NamedExoticComponent<ActionIconProps>;
 //#endregion
 export { DragHandle };
 //# sourceMappingURL=DragHandle.d.mts.map

package/es/SortableList/components/SortableItem.d.mts

@@ -1,6 +1,6 @@
 import { FlexboxProps } from "../../Flex/type.mjs";
 import "../../Flex/index.mjs";
-import * as react74 from "react";
+import * as react104 from "react";
 import "@dnd-kit/core";
 
 //#region src/SortableList/components/SortableItem.d.ts
@@ -9,7 +9,7 @@ interface SortableItemProps extends Omit<FlexboxProps, 'id'> {
   id: string | number;
   variant?: 'borderless' | 'filled' | 'outlined';
 }
-declare const SortableItem: react74.NamedExoticComponent<SortableItemProps>;
+declare const SortableItem: react104.NamedExoticComponent<SortableItemProps>;
 //#endregion
 export { SortableItem };
 //# sourceMappingURL=SortableItem.d.mts.map

package/es/Tag/Tag.mjs

@@ -5,13 +5,12 @@ import { variants } from "./styles.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 import { Tag } from "antd";
-import { cx, useTheme } from "antd-style";
+import { cssVar, cx } from "antd-style";
 
 //#region src/Tag/Tag.tsx
 const Tag$1 = ({ className, ref, size = "middle", color, variant = "filled", children, onClick, style, ...rest }) => {
-	const theme = useTheme();
 	const colors = useMemo(() => {
-		let textColor = theme.colorTextSecondary;
+		let textColor = cssVar.colorTextSecondary;
 		let backgroundColor;
 		let borderColor;
 		const isBorderless = variant === "borderless";
@@ -20,17 +19,17 @@ const Tag$1 = ({ className, ref, size = "middle", color, variant = "filled", chi
 		const isPresetSystemColors = color && presetSystemColors.has(color);
 		const isHexColor = color && color.startsWith("#");
 		if (isPresetColor) {
-			textColor = colorsPreset(theme, color);
-			backgroundColor = isBorderless ? "transparent" : colorsPreset(theme, color, "fillTertiary");
-			borderColor = colorsPreset(theme, color, isFilled ? "fillQuaternary" : "fillTertiary");
+			textColor = colorsPreset(color);
+			backgroundColor = isBorderless ? "transparent" : colorsPreset(color, "fillTertiary");
+			borderColor = colorsPreset(color, isFilled ? "fillQuaternary" : "fillTertiary");
 		}
 		if (isPresetSystemColors) {
-			textColor = colorsPresetSystem(theme, color);
-			backgroundColor = isBorderless ? "transparent" : colorsPresetSystem(theme, color, "fillTertiary");
-			borderColor = colorsPresetSystem(theme, color, isFilled ? "fillQuaternary" : "fillTertiary");
+			textColor = colorsPresetSystem(color);
+			backgroundColor = isBorderless ? "transparent" : colorsPresetSystem(color, "fillTertiary");
+			borderColor = colorsPresetSystem(color, isFilled ? "fillQuaternary" : "fillTertiary");
 		}
 		if (isHexColor) {
-			textColor = theme.colorBgLayout;
+			textColor = cssVar.colorBgLayout;
 			backgroundColor = isBorderless ? "transparent" : color;
 		}
 		return {
@@ -38,11 +37,7 @@ const Tag$1 = ({ className, ref, size = "middle", color, variant = "filled", chi
 			borderColor,
 			textColor
 		};
-	}, [
-		color,
-		theme,
-		variant
-	]);
+	}, [color, variant]);
 	return /* @__PURE__ */ jsx(Tag, {
 		className: cx(variants({
 			size,

package/es/Tag/Tag.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.mjs","names":["Tag: FC<TagProps>","AntTag","Tag"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["'use client';\n\nimport { Tag as AntTag } from 'antd';\nimport { cx, useTheme } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from '@/Tag/utils';\n\nimport { variants } from './styles';\nimport type { TagProps } from './type';\n\nconst Tag: FC<TagProps> = ({\n  className,\n  ref,\n  size = 'middle',\n  color,\n  variant = 'filled',\n  children,\n  onClick,\n  style,\n  ...rest\n}) => {\n  const theme = useTheme();\n\n  const colors = useMemo(() => {\n    let textColor = theme.colorTextSecondary;\n    let backgroundColor;\n    let borderColor;\n    const isBorderless = variant === 'borderless';\n    const isFilled = variant === 'filled';\n    const isPresetColor = color && presetColors.includes(color);\n    const isPresetSystemColors = color && presetSystemColors.has(color);\n    const isHexColor = color && color.startsWith('#');\n\n    if (isPresetColor) {\n      textColor = colorsPreset(theme, color);\n      backgroundColor = isBorderless ? 'transparent' : colorsPreset(theme, color, 'fillTertiary');\n      borderColor = colorsPreset(theme, color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n    }\n    if (isPresetSystemColors) {\n      textColor = colorsPresetSystem(theme, color);\n      backgroundColor = isBorderless\n        ? 'transparent'\n        : colorsPresetSystem(theme, color, 'fillTertiary');\n      borderColor = colorsPresetSystem(theme, color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n    }\n    if (isHexColor) {\n      textColor = theme.colorBgLayout;\n      backgroundColor = isBorderless ? 'transparent' : color;\n    }\n\n    return {\n      backgroundColor,\n      borderColor,\n      textColor,\n    };\n  }, [color, theme, variant]);\n\n  return (\n    <AntTag\n      className={cx(variants({ size, variant: variant as any }), className)}\n      color={color}\n      onClick={onClick}\n      ref={ref}\n      style={{\n        background: colors?.backgroundColor,\n        borderColor: colors?.borderColor,\n        color: colors?.textColor,\n        cursor: onClick ? 'pointer' : undefined,\n        ...style,\n      }}\n      variant={variant === 'borderless' ? 'outlined' : variant}\n      {...rest}\n    >\n      {children}\n    </AntTag>\n  );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;AAWA,MAAMA,SAAqB,EACzB,WACA,KACA,OAAO,UACP,OACA,UAAU,UACV,UACA,SACA,OACA,GAAG,WACC;CACJ,MAAM,QAAQ,UAAU;CAExB,MAAM,SAAS,cAAc;EAC3B,IAAI,YAAY,MAAM;EACtB,IAAI;EACJ,IAAI;EACJ,MAAM,eAAe,YAAY;EACjC,MAAM,WAAW,YAAY;EAC7B,MAAM,gBAAgB,SAAS,aAAa,SAAS,MAAM;EAC3D,MAAM,uBAAuB,SAAS,mBAAmB,IAAI,MAAM;EACnE,MAAM,aAAa,SAAS,MAAM,WAAW,IAAI;AAEjD,MAAI,eAAe;AACjB,eAAY,aAAa,OAAO,MAAM;AACtC,qBAAkB,eAAe,gBAAgB,aAAa,OAAO,OAAO,eAAe;AAC3F,iBAAc,aAAa,OAAO,OAAO,WAAW,mBAAmB,eAAe;;AAExF,MAAI,sBAAsB;AACxB,eAAY,mBAAmB,OAAO,MAAM;AAC5C,qBAAkB,eACd,gBACA,mBAAmB,OAAO,OAAO,eAAe;AACpD,iBAAc,mBAAmB,OAAO,OAAO,WAAW,mBAAmB,eAAe;;AAE9F,MAAI,YAAY;AACd,eAAY,MAAM;AAClB,qBAAkB,eAAe,gBAAgB;;AAGnD,SAAO;GACL;GACA;GACA;GACD;IACA;EAAC;EAAO;EAAO;EAAQ,CAAC;AAE3B,QACE,oBAACC;EACC,WAAW,GAAG,SAAS;GAAE;GAAe;GAAgB,CAAC,EAAE,UAAU;EAC9D;EACE;EACJ;EACL,OAAO;GACL,YAAY,QAAQ;GACpB,aAAa,QAAQ;GACrB,OAAO,QAAQ;GACf,QAAQ,UAAU,YAAY;GAC9B,GAAG;GACJ;EACD,SAAS,YAAY,eAAe,aAAa;EACjD,GAAI;EAEH;GACM;;AAIb,MAAI,cAAc;AAElB,kBAAeC"}
+{"version":3,"file":"Tag.mjs","names":["Tag: FC<TagProps>","AntTag","Tag"],"sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["'use client';\n\nimport { Tag as AntTag } from 'antd';\nimport { cssVar, cx } from 'antd-style';\nimport { type FC, useMemo } from 'react';\n\nimport { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from '@/Tag/utils';\n\nimport { variants } from './styles';\nimport type { TagProps } from './type';\n\nconst Tag: FC<TagProps> = ({\n  className,\n  ref,\n  size = 'middle',\n  color,\n  variant = 'filled',\n  children,\n  onClick,\n  style,\n  ...rest\n}) => {\n  const colors = useMemo(() => {\n    let textColor = cssVar.colorTextSecondary;\n    let backgroundColor;\n    let borderColor;\n    const isBorderless = variant === 'borderless';\n    const isFilled = variant === 'filled';\n    const isPresetColor = color && presetColors.includes(color);\n    const isPresetSystemColors = color && presetSystemColors.has(color);\n    const isHexColor = color && color.startsWith('#');\n\n    if (isPresetColor) {\n      textColor = colorsPreset(color);\n      backgroundColor = isBorderless ? 'transparent' : colorsPreset(color, 'fillTertiary');\n      borderColor = colorsPreset(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n    }\n    if (isPresetSystemColors) {\n      textColor = colorsPresetSystem(color);\n      backgroundColor = isBorderless ? 'transparent' : colorsPresetSystem(color, 'fillTertiary');\n      borderColor = colorsPresetSystem(color, isFilled ? 'fillQuaternary' : 'fillTertiary');\n    }\n    if (isHexColor) {\n      textColor = cssVar.colorBgLayout;\n      backgroundColor = isBorderless ? 'transparent' : color;\n    }\n\n    return {\n      backgroundColor,\n      borderColor,\n      textColor,\n    };\n  }, [color, variant]);\n\n  return (\n    <AntTag\n      className={cx(variants({ size, variant: variant as any }), className)}\n      color={color}\n      onClick={onClick}\n      ref={ref}\n      style={{\n        background: colors?.backgroundColor,\n        borderColor: colors?.borderColor,\n        color: colors?.textColor,\n        cursor: onClick ? 'pointer' : undefined,\n        ...style,\n      }}\n      variant={variant === 'borderless' ? 'outlined' : variant}\n      {...rest}\n    >\n      {children}\n    </AntTag>\n  );\n};\n\nTag.displayName = 'Tag';\n\nexport default Tag;\n"],"mappings":";;;;;;;;;;AAWA,MAAMA,SAAqB,EACzB,WACA,KACA,OAAO,UACP,OACA,UAAU,UACV,UACA,SACA,OACA,GAAG,WACC;CACJ,MAAM,SAAS,cAAc;EAC3B,IAAI,YAAY,OAAO;EACvB,IAAI;EACJ,IAAI;EACJ,MAAM,eAAe,YAAY;EACjC,MAAM,WAAW,YAAY;EAC7B,MAAM,gBAAgB,SAAS,aAAa,SAAS,MAAM;EAC3D,MAAM,uBAAuB,SAAS,mBAAmB,IAAI,MAAM;EACnE,MAAM,aAAa,SAAS,MAAM,WAAW,IAAI;AAEjD,MAAI,eAAe;AACjB,eAAY,aAAa,MAAM;AAC/B,qBAAkB,eAAe,gBAAgB,aAAa,OAAO,eAAe;AACpF,iBAAc,aAAa,OAAO,WAAW,mBAAmB,eAAe;;AAEjF,MAAI,sBAAsB;AACxB,eAAY,mBAAmB,MAAM;AACrC,qBAAkB,eAAe,gBAAgB,mBAAmB,OAAO,eAAe;AAC1F,iBAAc,mBAAmB,OAAO,WAAW,mBAAmB,eAAe;;AAEvF,MAAI,YAAY;AACd,eAAY,OAAO;AACnB,qBAAkB,eAAe,gBAAgB;;AAGnD,SAAO;GACL;GACA;GACA;GACD;IACA,CAAC,OAAO,QAAQ,CAAC;AAEpB,QACE,oBAACC;EACC,WAAW,GAAG,SAAS;GAAE;GAAe;GAAgB,CAAC,EAAE,UAAU;EAC9D;EACE;EACJ;EACL,OAAO;GACL,YAAY,QAAQ;GACpB,aAAa,QAAQ;GACrB,OAAO,QAAQ;GACf,QAAQ,UAAU,YAAY;GAC9B,GAAG;GACJ;EACD,SAAS,YAAY,eAAe,aAAa;EACjD,GAAI;EAEH;GACM;;AAIb,MAAI,cAAc;AAElB,kBAAeC"}

package/es/Tag/utils.mjs

@@ -1,3 +1,4 @@
+import { cssVar } from "antd-style";
 import { camelCase } from "es-toolkit/compat";
 
 //#region src/Tag/utils.ts
@@ -23,13 +24,17 @@ const presetSystemColors = new Set([
 	"info",
 	"processing"
 ]);
-const colorsPreset = (theme, type, ...keys) => theme[camelCase([type, ...keys].join("-"))];
-const colorsPresetSystem = (theme, type, ...keys) => {
-	return theme[camelCase([
+const toKebabCase = (value) => value.replaceAll(/([a-z])([A-Z])/g, "$1-$2").replaceAll(/([a-z])(\d)/g, "$1-$2").replaceAll(/(\d)([A-Z])/g, "$1-$2").replaceAll(/([A-Z]+)([A-Z][a-z])/g, "$1-$2").toLowerCase();
+const getCssVar = (tokenKey) => {
+	return cssVar[tokenKey] || `var(--ant-${toKebabCase(tokenKey)})`;
+};
+const colorsPreset = (type, ...keys) => getCssVar(camelCase([type, ...keys].join("-")));
+const colorsPresetSystem = (type, ...keys) => {
+	return getCssVar(camelCase([
 		"color",
 		type === "processing" ? "info" : type,
 		...keys
-	].join("-"))];
+	].join("-")));
 };
 
 //#endregion

package/es/Tag/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/Tag/utils.ts"],"sourcesContent":["import { camelCase } from 'es-toolkit/compat';\n\nexport const presetColors = [\n  'red',\n  'volcano',\n  'orange',\n  'gold',\n  'yellow',\n  'lime',\n  'green',\n  'cyan',\n  'blue',\n  'geekblue',\n  'purple',\n  'magenta',\n  'gray',\n];\n\nexport const presetSystemColors = new Set(['error', 'warning', 'success', 'info', 'processing']);\n\nexport const colorsPreset = (theme: any, type: string, ...keys: string[]) =>\n  theme[camelCase([type, ...keys].join('-'))] as string;\n\nexport const colorsPresetSystem = (theme: any, type: string, ...keys: string[]) => {\n  const t = type === 'processing' ? 'info' : type;\n  return theme[camelCase(['color', t, ...keys].join('-'))] as string;\n};\n"],"mappings":";;;AAEA,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,qBAAqB,IAAI,IAAI;CAAC;CAAS;CAAW;CAAW;CAAQ;CAAa,CAAC;AAEhG,MAAa,gBAAgB,OAAY,MAAc,GAAG,SACxD,MAAM,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC;AAE5C,MAAa,sBAAsB,OAAY,MAAc,GAAG,SAAmB;AAEjF,QAAO,MAAM,UAAU;EAAC;EADd,SAAS,eAAe,SAAS;EACP,GAAG;EAAK,CAAC,KAAK,IAAI,CAAC"}
+{"version":3,"file":"utils.mjs","names":[],"sources":["../../src/Tag/utils.ts"],"sourcesContent":["import { cssVar } from 'antd-style';\nimport { camelCase } from 'es-toolkit/compat';\n\nexport const presetColors = [\n  'red',\n  'volcano',\n  'orange',\n  'gold',\n  'yellow',\n  'lime',\n  'green',\n  'cyan',\n  'blue',\n  'geekblue',\n  'purple',\n  'magenta',\n  'gray',\n];\n\nexport const presetSystemColors = new Set(['error', 'warning', 'success', 'info', 'processing']);\n\nconst toKebabCase = (value: string) =>\n  value\n    .replaceAll(/([a-z])([A-Z])/g, '$1-$2')\n    .replaceAll(/([a-z])(\\d)/g, '$1-$2')\n    .replaceAll(/(\\d)([A-Z])/g, '$1-$2')\n    .replaceAll(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')\n    .toLowerCase();\n\nconst getCssVar = (tokenKey: string) => {\n  const mapped = (cssVar as Record<string, string>)[tokenKey];\n  return mapped || `var(--ant-${toKebabCase(tokenKey)})`;\n};\n\nexport const colorsPreset = (type: string, ...keys: string[]) =>\n  getCssVar(camelCase([type, ...keys].join('-')));\n\nexport const colorsPresetSystem = (type: string, ...keys: string[]) => {\n  const t = type === 'processing' ? 'info' : type;\n  return getCssVar(camelCase(['color', t, ...keys].join('-')));\n};\n"],"mappings":";;;;AAGA,MAAa,eAAe;CAC1B;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD;AAED,MAAa,qBAAqB,IAAI,IAAI;CAAC;CAAS;CAAW;CAAW;CAAQ;CAAa,CAAC;AAEhG,MAAM,eAAe,UACnB,MACG,WAAW,mBAAmB,QAAQ,CACtC,WAAW,gBAAgB,QAAQ,CACnC,WAAW,gBAAgB,QAAQ,CACnC,WAAW,yBAAyB,QAAQ,CAC5C,aAAa;AAElB,MAAM,aAAa,aAAqB;AAEtC,QADgB,OAAkC,aACjC,aAAa,YAAY,SAAS,CAAC;;AAGtD,MAAa,gBAAgB,MAAc,GAAG,SAC5C,UAAU,UAAU,CAAC,MAAM,GAAG,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC;AAEjD,MAAa,sBAAsB,MAAc,GAAG,SAAmB;AAErE,QAAO,UAAU,UAAU;EAAC;EADlB,SAAS,eAAe,SAAS;EACH,GAAG;EAAK,CAAC,KAAK,IAAI,CAAC,CAAC"}

package/es/ThemeProvider/GlobalStyle/antdOverride.mjs

@@ -25,7 +25,14 @@ var antdOverride_default = (token) => {
       }
     }
 
-    .${token.prefixCls}-tooltip-inner {
+    .${token.prefixCls}-tooltip-arrow::before,
+      .${token.prefixCls}-tooltip-arrow::after,
+      .${token.prefixCls}-tooltip-container {
+      color: ${token.colorBgLayout} !important;
+      background: ${token.colorText} !important;
+    }
+
+    .${token.prefixCls}-tooltip-container {
       display: flex;
       align-items: center;
       justify-content: center;
@@ -34,17 +41,6 @@ var antdOverride_default = (token) => {
       padding-block: 4px;
       padding-inline: 8px;
       border-radius: ${token.borderRadiusSM}px !important;
-
-      color: ${token.colorBgLayout} !important;
-
-      background-color: ${token.colorText} !important;
-    }
-
-    .${token.prefixCls}-tooltip-arrow {
-      &::before,
-      &::after {
-        background: ${token.colorText} !important;
-      }
     }
 
     .${token.prefixCls}-switch-handle::before {
@@ -69,9 +65,7 @@ var antdOverride_default = (token) => {
       ${token.stylish.blur};
     }
 
-    .${token.prefixCls}-popover-inner,
-      .${token.prefixCls}-dropdown-menu,
-      .${token.prefixCls}-select-dropdown {
+    .${token.prefixCls}-dropdown-menu, .${token.prefixCls}-select-dropdown {
       border-radius: ${token.borderRadius}px !important;
       box-shadow:
         0 0 15px 0 #00000008,

package/es/ThemeProvider/GlobalStyle/antdOverride.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"antdOverride.mjs","names":[],"sources":["../../../src/ThemeProvider/GlobalStyle/antdOverride.ts"],"sourcesContent":["import { Theme, css } from 'antd-style';\nimport { readableColor, rgba } from 'polished';\n\nexport default (token: Theme) => {\n  const readColor = readableColor(token.colorPrimary);\n  return css`\n    .${token.prefixCls}-checkbox-inner:after {\n      border-color: ${readableColor(token.colorPrimary)} !important;\n    }\n\n    .${token.prefixCls}-btn {\n      box-shadow: none;\n    }\n\n    .${token.prefixCls}-btn-primary:not(:disabled) {\n      color: ${readColor} !important;\n\n      &:hover {\n        color: ${readColor} !important;\n      }\n\n      &:active {\n        color: ${readColor} !important;\n      }\n    }\n\n    .${token.prefixCls}-tooltip-inner {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      min-height: unset;\n      padding-block: 4px;\n      padding-inline: 8px;\n      border-radius: ${token.borderRadiusSM}px !important;\n\n      color: ${token.colorBgLayout} !important;\n\n      background-color: ${token.colorText} !important;\n    }\n\n    .${token.prefixCls}-tooltip-arrow {\n      &::before,\n      &::after {\n        background: ${token.colorText} !important;\n      }\n    }\n\n    .${token.prefixCls}-switch-handle::before {\n      background: ${token.colorBgContainer} !important;\n    }\n\n    .${token.prefixCls}-image-preview-close,\n      .${token.prefixCls}-image-preview-switch-right,\n      .${token.prefixCls}-image-preview-switch-left {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: 32px;\n      height: 32px;\n      padding: 0;\n\n      background: ${rgba(token.colorBgMask, 0.1)};\n\n      border-radius: ${token.borderRadiusLG}px;\n\n      ${token.stylish.blur};\n    }\n\n    .${token.prefixCls}-popover-inner,\n      .${token.prefixCls}-dropdown-menu,\n      .${token.prefixCls}-select-dropdown {\n      border-radius: ${token.borderRadius}px !important;\n      box-shadow:\n        0 0 15px 0 #00000008,\n        0 2px 30px 0 #00000014,\n        0 0 0 1px ${token.isDarkMode ? token.colorFillTertiary : token.colorBorder} inset !important;\n    }\n\n    .${token.prefixCls}-modal-content {\n      border: 1px solid ${token.colorBorderSecondary} !important;\n    }\n\n    .${token.prefixCls}-radio-wrapper\n      .${token.prefixCls}-radio-checked\n      .${token.prefixCls}-radio-inner:after {\n      background: ${readColor};\n    }\n  `;\n};\n"],"mappings":";;;;AAGA,4BAAgB,UAAiB;CAC/B,MAAM,YAAY,cAAc,MAAM,aAAa;AACnD,QAAO,GAAG;OACL,MAAM,UAAU;sBACD,cAAc,MAAM,aAAa,CAAC;;;OAGjD,MAAM,UAAU;;;;OAIhB,MAAM,UAAU;eACR,UAAU;;;iBAGR,UAAU;;;;iBAIV,UAAU;;;;OAIpB,MAAM,UAAU;;;;;;;;uBAQA,MAAM,eAAe;;eAE7B,MAAM,cAAc;;0BAET,MAAM,UAAU;;;OAGnC,MAAM,UAAU;;;sBAGD,MAAM,UAAU;;;;OAI/B,MAAM,UAAU;oBACH,MAAM,iBAAiB;;;OAGpC,MAAM,UAAU;SACd,MAAM,UAAU;SAChB,MAAM,UAAU;;;;;;;;;oBASL,KAAK,MAAM,aAAa,GAAI,CAAC;;uBAE1B,MAAM,eAAe;;QAEpC,MAAM,QAAQ,KAAK;;;OAGpB,MAAM,UAAU;SACd,MAAM,UAAU;SAChB,MAAM,UAAU;uBACF,MAAM,aAAa;;;;oBAItB,MAAM,aAAa,MAAM,oBAAoB,MAAM,YAAY;;;OAG5E,MAAM,UAAU;0BACG,MAAM,qBAAqB;;;OAG9C,MAAM,UAAU;SACd,MAAM,UAAU;SAChB,MAAM,UAAU;oBACL,UAAU"}
+{"version":3,"file":"antdOverride.mjs","names":[],"sources":["../../../src/ThemeProvider/GlobalStyle/antdOverride.ts"],"sourcesContent":["import { Theme, css } from 'antd-style';\nimport { readableColor, rgba } from 'polished';\n\nexport default (token: Theme) => {\n  const readColor = readableColor(token.colorPrimary);\n  return css`\n    .${token.prefixCls}-checkbox-inner:after {\n      border-color: ${readableColor(token.colorPrimary)} !important;\n    }\n\n    .${token.prefixCls}-btn {\n      box-shadow: none;\n    }\n\n    .${token.prefixCls}-btn-primary:not(:disabled) {\n      color: ${readColor} !important;\n\n      &:hover {\n        color: ${readColor} !important;\n      }\n\n      &:active {\n        color: ${readColor} !important;\n      }\n    }\n\n    .${token.prefixCls}-tooltip-arrow::before,\n      .${token.prefixCls}-tooltip-arrow::after,\n      .${token.prefixCls}-tooltip-container {\n      color: ${token.colorBgLayout} !important;\n      background: ${token.colorText} !important;\n    }\n\n    .${token.prefixCls}-tooltip-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      min-height: unset;\n      padding-block: 4px;\n      padding-inline: 8px;\n      border-radius: ${token.borderRadiusSM}px !important;\n    }\n\n    .${token.prefixCls}-switch-handle::before {\n      background: ${token.colorBgContainer} !important;\n    }\n\n    .${token.prefixCls}-image-preview-close,\n      .${token.prefixCls}-image-preview-switch-right,\n      .${token.prefixCls}-image-preview-switch-left {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n\n      width: 32px;\n      height: 32px;\n      padding: 0;\n\n      background: ${rgba(token.colorBgMask, 0.1)};\n\n      border-radius: ${token.borderRadiusLG}px;\n\n      ${token.stylish.blur};\n    }\n\n    .${token.prefixCls}-dropdown-menu, .${token.prefixCls}-select-dropdown {\n      border-radius: ${token.borderRadius}px !important;\n      box-shadow:\n        0 0 15px 0 #00000008,\n        0 2px 30px 0 #00000014,\n        0 0 0 1px ${token.isDarkMode ? token.colorFillTertiary : token.colorBorder} inset !important;\n    }\n\n    .${token.prefixCls}-modal-content {\n      border: 1px solid ${token.colorBorderSecondary} !important;\n    }\n\n    .${token.prefixCls}-radio-wrapper\n      .${token.prefixCls}-radio-checked\n      .${token.prefixCls}-radio-inner:after {\n      background: ${readColor};\n    }\n  `;\n};\n"],"mappings":";;;;AAGA,4BAAgB,UAAiB;CAC/B,MAAM,YAAY,cAAc,MAAM,aAAa;AACnD,QAAO,GAAG;OACL,MAAM,UAAU;sBACD,cAAc,MAAM,aAAa,CAAC;;;OAGjD,MAAM,UAAU;;;;OAIhB,MAAM,UAAU;eACR,UAAU;;;iBAGR,UAAU;;;;iBAIV,UAAU;;;;OAIpB,MAAM,UAAU;SACd,MAAM,UAAU;SAChB,MAAM,UAAU;eACV,MAAM,cAAc;oBACf,MAAM,UAAU;;;OAG7B,MAAM,UAAU;;;;;;;;uBAQA,MAAM,eAAe;;;OAGrC,MAAM,UAAU;oBACH,MAAM,iBAAiB;;;OAGpC,MAAM,UAAU;SACd,MAAM,UAAU;SAChB,MAAM,UAAU;;;;;;;;;oBASL,KAAK,MAAM,aAAa,GAAI,CAAC;;uBAE1B,MAAM,eAAe;;QAEpC,MAAM,QAAQ,KAAK;;;OAGpB,MAAM,UAAU,mBAAmB,MAAM,UAAU;uBACnC,MAAM,aAAa;;;;oBAItB,MAAM,aAAa,MAAM,oBAAoB,MAAM,YAAY;;;OAG5E,MAAM,UAAU;0BACG,MAAM,qBAAqB;;;OAG9C,MAAM,UAAU;SACd,MAAM,UAAU;SAChB,MAAM,UAAU;oBACL,UAAU"}

package/es/ThemeProvider/ThemeProvider.d.mts

@@ -1,8 +1,8 @@
 import { ThemeProviderProps } from "./type.mjs";
-import * as react33 from "react";
+import * as react9 from "react";
 
 //#region src/ThemeProvider/ThemeProvider.d.ts
-declare const ThemeProvider: react33.NamedExoticComponent<ThemeProviderProps>;
+declare const ThemeProvider: react9.NamedExoticComponent<ThemeProviderProps>;
 //#endregion
 export { ThemeProvider };
 //# sourceMappingURL=ThemeProvider.d.mts.map

package/es/ThemeProvider/ThemeProvider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.mjs","names":["ThemeProvider","lobeCustomStylish","theme","lobeCustomToken","FontLoader","AntdThemeProvider","AntdConfigProvider","GlobalStyle"],"sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["'use client';\n\nimport { App } from 'antd';\nimport {\n  ThemeProvider as AntdThemeProvider,\n  CustomStylishParams,\n  CustomTokenParams,\n  GetAntdTheme,\n} from 'antd-style';\nimport { merge } from 'es-toolkit/compat';\nimport { memo, useCallback, useMemo } from 'react';\n\nimport { useCdnFn } from '@/ConfigProvider';\nimport FontLoader from '@/FontLoader';\nimport { lobeCustomStylish, lobeCustomToken } from '@/styles';\nimport { createLobeAntdTheme } from '@/styles/theme/antdTheme';\nimport { LobeCustomToken } from '@/types/customToken';\n\nimport AntdConfigProvider from './ConfigProvider';\nimport GlobalStyle from './GlobalStyle';\nimport { LOBE_THEME_APP_ID } from './constants';\nimport type { ThemeProviderProps } from './type';\n\nconst ThemeProvider = memo<ThemeProviderProps>(\n  ({\n    children,\n    customStylish,\n    customToken,\n    enableCustomFonts = true,\n    enableGlobalStyle = true,\n    customFonts,\n    customTheme = {},\n    className,\n    style,\n    theme: antdTheme,\n    ...rest\n  }) => {\n    const genCdnUrl = useCdnFn();\n\n    const webfontUrls = useMemo(\n      () =>\n        customFonts || [\n          genCdnUrl({ path: 'css/index.css', pkg: '@lobehub/webfont-mono' }),\n          genCdnUrl({\n            path: 'css/index.css',\n            pkg: '@lobehub/webfont-harmony-sans',\n          }),\n          genCdnUrl({\n            path: 'css/index.css',\n            pkg: '@lobehub/webfont-harmony-sans-sc',\n          }),\n          genCdnUrl({ path: 'dist/katex.min.css', pkg: 'katex' }),\n        ],\n      [customFonts, genCdnUrl],\n    );\n\n    const stylish = useCallback(\n      (theme: CustomStylishParams) => ({ ...lobeCustomStylish(theme), ...customStylish?.(theme) }),\n      [customStylish],\n    );\n\n    const token = useCallback(\n      (theme: CustomTokenParams) => ({ ...lobeCustomToken(theme), ...customToken?.(theme) }),\n      [customToken],\n    );\n\n    const theme = useCallback<GetAntdTheme>(\n      (appearance) => {\n        const lobeTheme = createLobeAntdTheme({\n          appearance,\n          neutralColor: customTheme.neutralColor,\n          primaryColor: customTheme.primaryColor,\n        });\n        return merge(lobeTheme, antdTheme);\n      },\n      [customTheme.primaryColor, customTheme.neutralColor, antdTheme],\n    );\n\n    return (\n      <>\n        {enableCustomFonts &&\n          webfontUrls?.length > 0 &&\n          webfontUrls.map((webfont) => <FontLoader key={webfont} url={webfont} />)}\n        <AntdThemeProvider<LobeCustomToken>\n          customStylish={stylish}\n          customToken={token}\n          theme={theme}\n          {...rest}\n        >\n          <AntdConfigProvider>\n            {enableGlobalStyle && <GlobalStyle />}\n            <App className={className} style={{ minHeight: 'inherit', width: 'inherit', ...style }}>\n              <div id={LOBE_THEME_APP_ID} style={{ display: 'contents' }}>\n                {children}\n              </div>\n            </App>\n          </AntdConfigProvider>\n        </AntdThemeProvider>\n      </>\n    );\n  },\n);\n\nThemeProvider.displayName = 'LobeThemeProvider';\n\nexport default ThemeProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,MAAMA,kBAAgB,MACnB,EACC,UACA,eACA,aACA,oBAAoB,MACpB,oBAAoB,MACpB,aACA,cAAc,EAAE,EAChB,WACA,OACA,OAAO,WACP,GAAG,WACC;CACJ,MAAM,YAAY,UAAU;CAE5B,MAAM,cAAc,cAEhB,eAAe;EACb,UAAU;GAAE,MAAM;GAAiB,KAAK;GAAyB,CAAC;EAClE,UAAU;GACR,MAAM;GACN,KAAK;GACN,CAAC;EACF,UAAU;GACR,MAAM;GACN,KAAK;GACN,CAAC;EACF,UAAU;GAAE,MAAM;GAAsB,KAAK;GAAS,CAAC;EACxD,EACH,CAAC,aAAa,UAAU,CACzB;CAED,MAAM,UAAU,aACb,aAAgC;EAAE,GAAGC,sBAAkBC,QAAM;EAAE,GAAG,gBAAgBA,QAAM;EAAE,GAC3F,CAAC,cAAc,CAChB;CAED,MAAM,QAAQ,aACX,aAA8B;EAAE,GAAGC,oBAAgBD,QAAM;EAAE,GAAG,cAAcA,QAAM;EAAE,GACrF,CAAC,YAAY,CACd;CAED,MAAM,QAAQ,aACX,eAAe;AAMd,SAAO,MALW,oBAAoB;GACpC;GACA,cAAc,YAAY;GAC1B,cAAc,YAAY;GAC3B,CAAC,EACsB,UAAU;IAEpC;EAAC,YAAY;EAAc,YAAY;EAAc;EAAU,CAChE;AAED,QACE,8CACG,qBACC,aAAa,SAAS,KACtB,YAAY,KAAK,YAAY,oBAACE,sBAAyB,KAAK,WAAd,QAAyB,CAAC,EAC1E,oBAACC;EACC,eAAe;EACf,aAAa;EACN;EACP,GAAI;YAEJ,qBAACC,qCACE,qBAAqB,oBAACC,wBAAc,EACrC,oBAAC;GAAe;GAAW,OAAO;IAAE,WAAW;IAAW,OAAO;IAAW,GAAG;IAAO;aACpF,oBAAC;IAAI,IAAI;IAAmB,OAAO,EAAE,SAAS,YAAY;IACvD;KACG;IACF,IACa;GACH,IACnB;EAGR;AAED,gBAAc,cAAc;AAE5B,4BAAeP"}
+{"version":3,"file":"ThemeProvider.mjs","names":["ThemeProvider","lobeCustomStylish","theme","lobeCustomToken","FontLoader","AntdThemeProvider","AntdConfigProvider","GlobalStyle"],"sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["'use client';\n\nimport { App } from 'antd';\nimport {\n  ThemeProvider as AntdThemeProvider,\n  CustomStylishParams,\n  CustomTokenParams,\n  GetAntdTheme,\n} from 'antd-style';\nimport { merge } from 'es-toolkit/compat';\nimport { memo, useCallback, useMemo } from 'react';\n\nimport { useCdnFn } from '@/ConfigProvider';\nimport FontLoader from '@/FontLoader';\nimport { lobeCustomStylish, lobeCustomToken } from '@/styles';\nimport { createLobeAntdTheme } from '@/styles/theme/antdTheme';\nimport { LobeCustomToken } from '@/types/customToken';\n\nimport AntdConfigProvider from './ConfigProvider';\nimport GlobalStyle from './GlobalStyle';\nimport { LOBE_THEME_APP_ID } from './constants';\nimport type { ThemeProviderProps } from './type';\n\nconst ThemeProvider = memo<ThemeProviderProps>(\n  ({\n    children,\n    customStylish,\n    customToken,\n    enableCustomFonts = true,\n    enableGlobalStyle = true,\n    customFonts,\n    customTheme = {},\n    className,\n    style,\n    theme: antdTheme,\n    ...rest\n  }) => {\n    const genCdnUrl = useCdnFn();\n\n    const webfontUrls = useMemo(\n      () =>\n        customFonts || [\n          genCdnUrl({ path: 'css/index.css', pkg: '@lobehub/webfont-mono' }),\n          genCdnUrl({\n            path: 'css/index.css',\n            pkg: '@lobehub/webfont-harmony-sans',\n          }),\n          genCdnUrl({\n            path: 'css/index.css',\n            pkg: '@lobehub/webfont-harmony-sans-sc',\n          }),\n          genCdnUrl({ path: 'dist/katex.min.css', pkg: 'katex' }),\n        ],\n      [customFonts, genCdnUrl],\n    );\n\n    const stylish = useCallback(\n      (theme: CustomStylishParams) => ({ ...lobeCustomStylish(theme), ...customStylish?.(theme) }),\n      [customStylish],\n    );\n\n    const token = useCallback(\n      (theme: CustomTokenParams) => ({ ...lobeCustomToken(theme), ...customToken?.(theme) }),\n      [customToken],\n    );\n\n    const theme = useCallback<GetAntdTheme>(\n      (appearance) => {\n        const lobeTheme = createLobeAntdTheme({\n          appearance,\n          neutralColor: customTheme.neutralColor,\n          primaryColor: customTheme.primaryColor,\n        });\n        return merge(lobeTheme, antdTheme);\n      },\n      [customTheme.primaryColor, customTheme.neutralColor, antdTheme],\n    );\n\n    return (\n      <>\n        {enableCustomFonts &&\n          webfontUrls?.length > 0 &&\n          webfontUrls.map((webfont) => <FontLoader key={webfont} url={webfont} />)}\n        <AntdThemeProvider<LobeCustomToken>\n          customStylish={stylish}\n          customToken={token}\n          theme={theme}\n          {...rest}\n        >\n          <AntdConfigProvider>\n            {enableGlobalStyle && <GlobalStyle />}\n\n            <App className={className} style={{ minHeight: 'inherit', width: 'inherit', ...style }}>\n              <div id={LOBE_THEME_APP_ID} style={{ display: 'contents' }}>\n                {children}\n              </div>\n            </App>\n          </AntdConfigProvider>\n        </AntdThemeProvider>\n      </>\n    );\n  },\n);\n\nThemeProvider.displayName = 'LobeThemeProvider';\n\nexport default ThemeProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;AAuBA,MAAMA,kBAAgB,MACnB,EACC,UACA,eACA,aACA,oBAAoB,MACpB,oBAAoB,MACpB,aACA,cAAc,EAAE,EAChB,WACA,OACA,OAAO,WACP,GAAG,WACC;CACJ,MAAM,YAAY,UAAU;CAE5B,MAAM,cAAc,cAEhB,eAAe;EACb,UAAU;GAAE,MAAM;GAAiB,KAAK;GAAyB,CAAC;EAClE,UAAU;GACR,MAAM;GACN,KAAK;GACN,CAAC;EACF,UAAU;GACR,MAAM;GACN,KAAK;GACN,CAAC;EACF,UAAU;GAAE,MAAM;GAAsB,KAAK;GAAS,CAAC;EACxD,EACH,CAAC,aAAa,UAAU,CACzB;CAED,MAAM,UAAU,aACb,aAAgC;EAAE,GAAGC,sBAAkBC,QAAM;EAAE,GAAG,gBAAgBA,QAAM;EAAE,GAC3F,CAAC,cAAc,CAChB;CAED,MAAM,QAAQ,aACX,aAA8B;EAAE,GAAGC,oBAAgBD,QAAM;EAAE,GAAG,cAAcA,QAAM;EAAE,GACrF,CAAC,YAAY,CACd;CAED,MAAM,QAAQ,aACX,eAAe;AAMd,SAAO,MALW,oBAAoB;GACpC;GACA,cAAc,YAAY;GAC1B,cAAc,YAAY;GAC3B,CAAC,EACsB,UAAU;IAEpC;EAAC,YAAY;EAAc,YAAY;EAAc;EAAU,CAChE;AAED,QACE,8CACG,qBACC,aAAa,SAAS,KACtB,YAAY,KAAK,YAAY,oBAACE,sBAAyB,KAAK,WAAd,QAAyB,CAAC,EAC1E,oBAACC;EACC,eAAe;EACf,aAAa;EACN;EACP,GAAI;YAEJ,qBAACC,qCACE,qBAAqB,oBAACC,wBAAc,EAErC,oBAAC;GAAe;GAAW,OAAO;IAAE,WAAW;IAAW,OAAO;IAAW,GAAG;IAAO;aACpF,oBAAC;IAAI,IAAI;IAAmB,OAAO,EAAE,SAAS,YAAY;IACvD;KACG;IACF,IACa;GACH,IACnB;EAGR;AAED,gBAAc,cAAc;AAE5B,4BAAeP"}

package/es/Toc/Toc.d.mts

@@ -1,8 +1,8 @@
 import { TocProps } from "./type.mjs";
-import * as react41 from "react";
+import * as react15 from "react";
 
 //#region src/Toc/Toc.d.ts
-declare const Toc: react41.NamedExoticComponent<TocProps>;
+declare const Toc: react15.NamedExoticComponent<TocProps>;
 //#endregion
 export { Toc };
 //# sourceMappingURL=Toc.d.mts.map

package/es/Tooltip/TooltipFloating.mjs

@@ -4,7 +4,7 @@ import { useMotionComponent } from "../MotionProvider/index.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Hotkey_default from "../Hotkey/Hotkey.mjs";
 import { styles } from "./style.mjs";
-import React, { useMemo } from "react";
+import { useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "antd-style";
 import { AnimatePresence } from "motion/react";
@@ -12,21 +12,61 @@ import { FloatingArrow } from "@floating-ui/react";
 import { useDebounce } from "ahooks";
 
 //#region src/Tooltip/TooltipFloating.tsx
-const TooltipFloating = ({ open, title, placement, floatingStyles, setFloating, floatingProps, arrow: arrow$1, arrowRef, context, hotkey, hotkeyProps, layoutAnimation = true, className, classNames, styles: styleProps, zIndex }) => {
+const tooltipAnimateState = {
+	opacity: 1,
+	scale: 1,
+	y: 0
+};
+const tooltipExitState = {
+	opacity: 0,
+	scale: .98,
+	y: 4
+};
+const tooltipInitialState = {
+	opacity: 0,
+	scale: .96,
+	y: 6
+};
+const tooltipTransition = {
+	duration: .14,
+	ease: [
+		.4,
+		0,
+		.2,
+		1
+	]
+};
+const contentAnimateState = { opacity: 1 };
+const contentExitState = { opacity: 0 };
+const contentInitialState = { opacity: 0 };
+const contentTransition = { duration: .3 };
+const TooltipFloating = ({ open, title, placement, floatingStyles, setFloating, floatingProps, arrow: arrow$1, arrowRef, context, hotkey, hotkeyProps, isInitialShow, layoutAnimation = true, className, classNames, styles: styleProps, zIndex }) => {
+	const basePlacement = String(placement || "top").split("-")[0];
 	const transformOrigin = useMemo(() => {
-		switch (String(placement || "top").split("-")[0]) {
+		switch (basePlacement) {
 			case "top": return "bottom center";
 			case "bottom": return "top center";
 			case "left": return "center right";
 			case "right": return "center left";
 			default: return "center";
 		}
-	}, [placement]);
+	}, [basePlacement]);
 	const hasTransform = useDebounce(Boolean(floatingStyles?.transform), {
 		leading: false,
 		wait: 16
 	});
 	const Motion = useMotionComponent();
+	const TooltipContent = hotkey ? /* @__PURE__ */ jsxs(FlexBasic_default, {
+		align: "center",
+		gap: 8,
+		horizontal: true,
+		justify: "space-between",
+		children: [/* @__PURE__ */ jsx("span", { children: title }), /* @__PURE__ */ jsx(Hotkey_default, {
+			inverseTheme: true,
+			keys: hotkey,
+			...hotkeyProps
+		})]
+	}) : title;
 	return /* @__PURE__ */ jsx(AnimatePresence, { children: open && title && /* @__PURE__ */ jsx("div", {
 		className: cx(styles.tooltip, layoutAnimation && hasTransform && styles.tooltipLayout, classNames?.container, classNames?.root, className),
 		ref: setFloating,
@@ -43,42 +83,24 @@ const TooltipFloating = ({ open, title, placement, floatingStyles, setFloating,
 		},
 		...floatingProps,
 		children: /* @__PURE__ */ jsxs(Motion.div, {
-			animate: {
-				opacity: 1,
-				scale: 1
-			},
-			exit: {
-				opacity: 0,
-				scale: .98
-			},
-			initial: {
-				opacity: 0,
-				scale: .96
-			},
+			animate: tooltipAnimateState,
+			exit: tooltipExitState,
+			initial: tooltipInitialState,
 			style: { transformOrigin },
-			transition: {
-				duration: .12,
-				ease: [
-					.4,
-					0,
-					.2,
-					1
-				]
-			},
+			transition: tooltipTransition,
 			children: [/* @__PURE__ */ jsx("div", {
 				className: cx(styles.content, classNames?.content),
 				style: styleProps?.content,
-				children: hotkey ? /* @__PURE__ */ jsxs(FlexBasic_default, {
-					align: "center",
-					gap: 8,
-					horizontal: true,
-					justify: "space-between",
-					children: [/* @__PURE__ */ jsx("span", { children: title }), /* @__PURE__ */ jsx(Hotkey_default, {
-						inverseTheme: true,
-						keys: hotkey,
-						...hotkeyProps
-					})]
-				}) : title
+				children: layoutAnimation ? /* @__PURE__ */ jsx(AnimatePresence, {
+					mode: "popLayout",
+					children: /* @__PURE__ */ jsx(Motion.div, {
+						animate: contentAnimateState,
+						exit: contentExitState,
+						initial: isInitialShow ? false : contentInitialState,
+						transition: contentTransition,
+						children: TooltipContent
+					}, String(title))
+				}) : TooltipContent
 			}), arrow$1 && context && /* @__PURE__ */ jsx(FloatingArrow, {
 				className: cx(styles.arrow, classNames?.arrow),
 				context,

package/es/Tooltip/TooltipFloating.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipFloating.mjs","names":["Flexbox","Hotkey","arrow"],"sources":["../../src/Tooltip/TooltipFloating.tsx"],"sourcesContent":["'use client';\n\nimport type { FloatingContext, Placement } from '@floating-ui/react';\nimport { FloatingArrow } from '@floating-ui/react';\nimport { useDebounce } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { AnimatePresence } from 'motion/react';\nimport type { CSSProperties, ReactNode, RefObject } from 'react';\nimport React, { useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Hotkey from '@/Hotkey';\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { styles } from './style';\nimport type { TooltipProps } from './type';\n\ntype TooltipFloatingProps = {\n  arrow?: boolean;\n  arrowRef?: RefObject<SVGSVGElement | null>;\n\n  className?: TooltipProps['className'];\n  classNames?: TooltipProps['classNames'];\n  context?: FloatingContext;\n\n  floatingProps?: Record<string, any>;\n  floatingStyles: CSSProperties;\n\n  hotkey?: TooltipProps['hotkey'];\n  hotkeyProps?: TooltipProps['hotkeyProps'];\n\n  /**\n   * @description Whether to enable layout animation when switching between tooltips\n   * @default true\n   */\n  layoutAnimation?: boolean;\n\n  open: boolean;\n  placement?: Placement;\n\n  setFloating: (node: HTMLElement | null) => void;\n  styles?: TooltipProps['styles'];\n  title?: ReactNode;\n  zIndex?: TooltipProps['zIndex'];\n};\n\nconst TooltipFloating = ({\n  open,\n  title,\n  placement,\n  floatingStyles,\n  setFloating,\n  floatingProps,\n  arrow,\n  arrowRef,\n  context,\n  hotkey,\n  hotkeyProps,\n  layoutAnimation = true,\n\n  className,\n  classNames,\n  styles: styleProps,\n  zIndex,\n}: TooltipFloatingProps) => {\n  const transformOrigin = useMemo(() => {\n    const basePlacement = String(placement || 'top').split('-')[0];\n    switch (basePlacement) {\n      case 'top': {\n        return 'bottom center';\n      }\n      case 'bottom': {\n        return 'top center';\n      }\n      case 'left': {\n        return 'center right';\n      }\n      case 'right': {\n        return 'center left';\n      }\n      default: {\n        return 'center';\n      }\n    }\n  }, [placement]);\n\n  const hasTransform = useDebounce(Boolean(floatingStyles?.transform), {\n    leading: false,\n    wait: 16,\n  });\n\n  const Motion = useMotionComponent();\n  return (\n    <AnimatePresence>\n      {open && title && (\n        <div\n          className={cx(\n            styles.tooltip,\n            layoutAnimation && hasTransform && styles.tooltipLayout,\n            classNames?.container,\n            classNames?.root,\n            className,\n          )}\n          key=\"tooltip\"\n          ref={setFloating as any}\n          role=\"tooltip\"\n          style={\n            styleProps?.root\n              ? {\n                  ...floatingStyles,\n                  zIndex,\n                  ...styleProps.container,\n                  ...styleProps.root,\n                }\n              : {\n                  ...floatingStyles,\n                  zIndex,\n                  ...styleProps?.container,\n                }\n          }\n          {...floatingProps}\n        >\n          <Motion.div\n            animate={{ opacity: 1, scale: 1 }}\n            exit={{ opacity: 0, scale: 0.98 }}\n            initial={{ opacity: 0, scale: 0.96 }}\n            style={{ transformOrigin }}\n            transition={{ duration: 0.12, ease: [0.4, 0, 0.2, 1] }}\n          >\n            <div className={cx(styles.content, classNames?.content)} style={styleProps?.content}>\n              {hotkey ? (\n                <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>\n                  <span>{title}</span>\n                  <Hotkey inverseTheme keys={hotkey} {...hotkeyProps} />\n                </Flexbox>\n              ) : (\n                title\n              )}\n            </div>\n            {arrow && context && (\n              <FloatingArrow\n                className={cx(styles.arrow, classNames?.arrow)}\n                context={context}\n                height={6}\n                ref={arrowRef as any}\n                style={styleProps?.arrow}\n                width={12}\n              />\n            )}\n          </Motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport default TooltipFloating;\n"],"mappings":";;;;;;;;;;;;;;AA8CA,MAAM,mBAAmB,EACvB,MACA,OACA,WACA,gBACA,aACA,eACA,gBACA,UACA,SACA,QACA,aACA,kBAAkB,MAElB,WACA,YACA,QAAQ,YACR,aAC0B;CAC1B,MAAM,kBAAkB,cAAc;AAEpC,UADsB,OAAO,aAAa,MAAM,CAAC,MAAM,IAAI,CAAC,IAC5D;GACE,KAAK,MACH,QAAO;GAET,KAAK,SACH,QAAO;GAET,KAAK,OACH,QAAO;GAET,KAAK,QACH,QAAO;GAET,QACE,QAAO;;IAGV,CAAC,UAAU,CAAC;CAEf,MAAM,eAAe,YAAY,QAAQ,gBAAgB,UAAU,EAAE;EACnE,SAAS;EACT,MAAM;EACP,CAAC;CAEF,MAAM,SAAS,oBAAoB;AACnC,QACE,oBAAC,6BACE,QAAQ,SACP,oBAAC;EACC,WAAW,GACT,OAAO,SACP,mBAAmB,gBAAgB,OAAO,eAC1C,YAAY,WACZ,YAAY,MACZ,UACD;EAED,KAAK;EACL,MAAK;EACL,OACE,YAAY,OACR;GACE,GAAG;GACH;GACA,GAAG,WAAW;GACd,GAAG,WAAW;GACf,GACD;GACE,GAAG;GACH;GACA,GAAG,YAAY;GAChB;EAEP,GAAI;YAEJ,qBAAC,OAAO;GACN,SAAS;IAAE,SAAS;IAAG,OAAO;IAAG;GACjC,MAAM;IAAE,SAAS;IAAG,OAAO;IAAM;GACjC,SAAS;IAAE,SAAS;IAAG,OAAO;IAAM;GACpC,OAAO,EAAE,iBAAiB;GAC1B,YAAY;IAAE,UAAU;IAAM,MAAM;KAAC;KAAK;KAAG;KAAK;KAAE;IAAE;cAEtD,oBAAC;IAAI,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;IAAE,OAAO,YAAY;cACzE,SACC,qBAACA;KAAQ,OAAO;KAAU,KAAK;KAAG;KAAW,SAAS;gBACpD,oBAAC,oBAAM,QAAa,EACpB,oBAACC;MAAO;MAAa,MAAM;MAAQ,GAAI;OAAe;MAC9C,GAEV;KAEE,EACLC,WAAS,WACR,oBAAC;IACC,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;IACrC;IACT,QAAQ;IACR,KAAK;IACL,OAAO,YAAY;IACnB,OAAO;KACP;IAEO;IA9CT,UA+CA,GAEQ;;AAItB,8BAAe"}
+{"version":3,"file":"TooltipFloating.mjs","names":["tooltipAnimateState: Target","tooltipExitState: Target","tooltipInitialState: Target","tooltipTransition: Transition","contentAnimateState: Target","contentExitState: Target","contentInitialState: Target","contentTransition: Transition","Flexbox","Hotkey","arrow"],"sources":["../../src/Tooltip/TooltipFloating.tsx"],"sourcesContent":["'use client';\n\nimport type { FloatingContext, Placement } from '@floating-ui/react';\nimport { FloatingArrow } from '@floating-ui/react';\nimport { useDebounce } from 'ahooks';\nimport { cx } from 'antd-style';\nimport { AnimatePresence, type Target, type Transition } from 'motion/react';\nimport type { CSSProperties, ReactNode, RefObject } from 'react';\nimport { useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\nimport Hotkey from '@/Hotkey';\nimport { useMotionComponent } from '@/MotionProvider';\n\nimport { styles } from './style';\nimport type { TooltipProps } from './type';\n\n// Tooltip container animation\nconst tooltipAnimateState: Target = { opacity: 1, scale: 1, y: 0 };\nconst tooltipExitState: Target = { opacity: 0, scale: 0.98, y: 4 };\nconst tooltipInitialState: Target = { opacity: 0, scale: 0.96, y: 6 };\nconst tooltipTransition: Transition = { duration: 0.14, ease: [0.4, 0, 0.2, 1] };\n\n// Tooltip content animation (for switching between tooltips)\nconst contentAnimateState: Target = { opacity: 1 };\nconst contentExitState: Target = { opacity: 0 };\nconst contentInitialState: Target = { opacity: 0 };\nconst contentTransition: Transition = { duration: 0.3 };\n\ntype TooltipFloatingProps = {\n  arrow?: boolean;\n  arrowRef?: RefObject<SVGSVGElement | null>;\n\n  className?: TooltipProps['className'];\n  classNames?: TooltipProps['classNames'];\n  context?: FloatingContext;\n\n  floatingProps?: Record<string, any>;\n  floatingStyles: CSSProperties;\n\n  hotkey?: TooltipProps['hotkey'];\n\n  hotkeyProps?: TooltipProps['hotkeyProps'];\n  /**\n   * @description Whether this is the initial show (first appearance, not switching between tooltips)\n   */\n  isInitialShow?: boolean;\n\n  /**\n   * @description Whether to enable layout animation when switching between tooltips\n   * @default true\n   */\n  layoutAnimation?: boolean;\n  open: boolean;\n  placement?: Placement;\n\n  setFloating: (node: HTMLElement | null) => void;\n  styles?: TooltipProps['styles'];\n  title?: ReactNode;\n  zIndex?: TooltipProps['zIndex'];\n};\n\nconst TooltipFloating = ({\n  open,\n  title,\n  placement,\n\n  floatingStyles,\n  setFloating,\n  floatingProps,\n  arrow,\n  arrowRef,\n  context,\n  hotkey,\n  hotkeyProps,\n  isInitialShow,\n  layoutAnimation = true,\n\n  className,\n  classNames,\n  styles: styleProps,\n  zIndex,\n}: TooltipFloatingProps) => {\n  const basePlacement = String(placement || 'top').split('-')[0];\n\n  const transformOrigin = useMemo(() => {\n    switch (basePlacement) {\n      case 'top': {\n        return 'bottom center';\n      }\n      case 'bottom': {\n        return 'top center';\n      }\n      case 'left': {\n        return 'center right';\n      }\n      case 'right': {\n        return 'center left';\n      }\n      default: {\n        return 'center';\n      }\n    }\n  }, [basePlacement]);\n\n  const hasTransform = useDebounce(Boolean(floatingStyles?.transform), {\n    leading: false,\n    wait: 16,\n  });\n\n  const Motion = useMotionComponent();\n\n  const TooltipContent = hotkey ? (\n    <Flexbox align={'center'} gap={8} horizontal justify={'space-between'}>\n      <span>{title}</span>\n      <Hotkey inverseTheme keys={hotkey} {...hotkeyProps} />\n    </Flexbox>\n  ) : (\n    title\n  );\n  return (\n    <AnimatePresence>\n      {open && title && (\n        <div\n          className={cx(\n            styles.tooltip,\n            layoutAnimation && hasTransform && styles.tooltipLayout,\n            classNames?.container,\n            classNames?.root,\n            className,\n          )}\n          key=\"tooltip\"\n          ref={setFloating as any}\n          role=\"tooltip\"\n          style={\n            styleProps?.root\n              ? {\n                  ...floatingStyles,\n                  zIndex,\n                  ...styleProps.container,\n                  ...styleProps.root,\n                }\n              : {\n                  ...floatingStyles,\n                  zIndex,\n                  ...styleProps?.container,\n                }\n          }\n          {...floatingProps}\n        >\n          <Motion.div\n            animate={tooltipAnimateState}\n            exit={tooltipExitState}\n            initial={tooltipInitialState}\n            style={{ transformOrigin }}\n            transition={tooltipTransition}\n          >\n            <div className={cx(styles.content, classNames?.content)} style={styleProps?.content}>\n              {layoutAnimation ? (\n                <AnimatePresence mode=\"popLayout\">\n                  <Motion.div\n                    animate={contentAnimateState}\n                    exit={contentExitState}\n                    initial={isInitialShow ? false : contentInitialState}\n                    key={String(title)}\n                    transition={contentTransition}\n                  >\n                    {TooltipContent}\n                  </Motion.div>\n                </AnimatePresence>\n              ) : (\n                TooltipContent\n              )}\n            </div>\n            {arrow && context && (\n              <FloatingArrow\n                className={cx(styles.arrow, classNames?.arrow)}\n                context={context}\n                height={6}\n                ref={arrowRef as any}\n                style={styleProps?.arrow}\n                width={12}\n              />\n            )}\n          </Motion.div>\n        </div>\n      )}\n    </AnimatePresence>\n  );\n};\n\nexport default TooltipFloating;\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAMA,sBAA8B;CAAE,SAAS;CAAG,OAAO;CAAG,GAAG;CAAG;AAClE,MAAMC,mBAA2B;CAAE,SAAS;CAAG,OAAO;CAAM,GAAG;CAAG;AAClE,MAAMC,sBAA8B;CAAE,SAAS;CAAG,OAAO;CAAM,GAAG;CAAG;AACrE,MAAMC,oBAAgC;CAAE,UAAU;CAAM,MAAM;EAAC;EAAK;EAAG;EAAK;EAAE;CAAE;AAGhF,MAAMC,sBAA8B,EAAE,SAAS,GAAG;AAClD,MAAMC,mBAA2B,EAAE,SAAS,GAAG;AAC/C,MAAMC,sBAA8B,EAAE,SAAS,GAAG;AAClD,MAAMC,oBAAgC,EAAE,UAAU,IAAK;AAmCvD,MAAM,mBAAmB,EACvB,MACA,OACA,WAEA,gBACA,aACA,eACA,gBACA,UACA,SACA,QACA,aACA,eACA,kBAAkB,MAElB,WACA,YACA,QAAQ,YACR,aAC0B;CAC1B,MAAM,gBAAgB,OAAO,aAAa,MAAM,CAAC,MAAM,IAAI,CAAC;CAE5D,MAAM,kBAAkB,cAAc;AACpC,UAAQ,eAAR;GACE,KAAK,MACH,QAAO;GAET,KAAK,SACH,QAAO;GAET,KAAK,OACH,QAAO;GAET,KAAK,QACH,QAAO;GAET,QACE,QAAO;;IAGV,CAAC,cAAc,CAAC;CAEnB,MAAM,eAAe,YAAY,QAAQ,gBAAgB,UAAU,EAAE;EACnE,SAAS;EACT,MAAM;EACP,CAAC;CAEF,MAAM,SAAS,oBAAoB;CAEnC,MAAM,iBAAiB,SACrB,qBAACC;EAAQ,OAAO;EAAU,KAAK;EAAG;EAAW,SAAS;aACpD,oBAAC,oBAAM,QAAa,EACpB,oBAACC;GAAO;GAAa,MAAM;GAAQ,GAAI;IAAe;GAC9C,GAEV;AAEF,QACE,oBAAC,6BACE,QAAQ,SACP,oBAAC;EACC,WAAW,GACT,OAAO,SACP,mBAAmB,gBAAgB,OAAO,eAC1C,YAAY,WACZ,YAAY,MACZ,UACD;EAED,KAAK;EACL,MAAK;EACL,OACE,YAAY,OACR;GACE,GAAG;GACH;GACA,GAAG,WAAW;GACd,GAAG,WAAW;GACf,GACD;GACE,GAAG;GACH;GACA,GAAG,YAAY;GAChB;EAEP,GAAI;YAEJ,qBAAC,OAAO;GACN,SAAS;GACT,MAAM;GACN,SAAS;GACT,OAAO,EAAE,iBAAiB;GAC1B,YAAY;cAEZ,oBAAC;IAAI,WAAW,GAAG,OAAO,SAAS,YAAY,QAAQ;IAAE,OAAO,YAAY;cACzE,kBACC,oBAAC;KAAgB,MAAK;eACpB,oBAAC,OAAO;MACN,SAAS;MACT,MAAM;MACN,SAAS,gBAAgB,QAAQ;MAEjC,YAAY;gBAEX;QAHI,OAAO,MAAM,CAIP;MACG,GAElB;KAEE,EACLC,WAAS,WACR,oBAAC;IACC,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;IACrC;IACT,QAAQ;IACR,KAAK;IACL,OAAO,YAAY;IACnB,OAAO;KACP;IAEO;IArDT,UAsDA,GAEQ;;AAItB,8BAAe"}

package/es/Tooltip/TooltipGroup.mjs

@@ -155,6 +155,11 @@ const TooltipGroup = ({ children, layoutAnimation = true, ...sharedProps }) => {
 		};
 	}, [clearTimers]);
 	const portalRoot = active?.item.getPopupContainer && active?.triggerEl ? active.item.getPopupContainer(active.triggerEl) : void 0;
+	const openRef = useRef(open);
+	useEffect(() => {
+		openRef.current = open;
+	}, [open]);
+	const isInitialShow = !openRef.current && open;
 	const floatingNode = /* @__PURE__ */ jsx(TooltipFloating_default, {
 		arrow: active?.item.arrow,
 		arrowRef,
@@ -164,6 +169,7 @@ const TooltipGroup = ({ children, layoutAnimation = true, ...sharedProps }) => {
 		floatingStyles,
 		hotkey: active?.item.hotkey,
 		hotkeyProps: active?.item.hotkeyProps,
+		isInitialShow,
 		layoutAnimation,
 		open,
 		placement: floatingPlacement,