@lobehub/ui 4.3.2 → 4.3.3

package/es/HotkeyInput/HotkeyInput.mjs

@@ -6,13 +6,13 @@ import Hotkey_default from "../Hotkey/Hotkey.mjs";
 import ActionIcon_default from "../ActionIcon/ActionIcon.mjs";
 import { useTranslation } from "../i18n/useTranslation.mjs";
 import hotkey_default from "../i18n/resources/en/hotkey.mjs";
-import { useStyles } from "./style.mjs";
+import { styles, variants } from "./style.mjs";
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cx, useThemeMode } from "antd-style";
 import useMergeState from "use-merge-value";
-import { cva } from "class-variance-authority";
-import { Undo2Icon } from "lucide-react";
 import { isEqual } from "es-toolkit/compat";
+import { Undo2Icon } from "lucide-react";
 import { useHotkeys, useRecordHotkeys } from "react-hotkeys-hook";
 
 //#region src/HotkeyInput/HotkeyInput.tsx
@@ -21,7 +21,7 @@ const HotkeyInput = memo(({ value = "", defaultValue = "", resetValue = "", onCh
 	const [hasConflict, setHasConflict] = useState(false);
 	const [hasInvalidCombination, setHasInvalidCombination] = useState(false);
 	const inputRef = useRef(null);
-	const { cx, styles, theme } = useStyles();
+	const { isDarkMode } = useThemeMode();
 	const { t } = useTranslation(hotkey_default);
 	const isAppleDevice = useMemo(() => checkIsAppleDevice(isApple), [isApple]);
 	const [hotkeyValue, setHotkeyValue] = useMergeState(defaultValue, {
@@ -29,37 +29,6 @@ const HotkeyInput = memo(({ value = "", defaultValue = "", resetValue = "", onCh
 		onChange,
 		value
 	});
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: {
-			disabled: false,
-			error: false,
-			shadow: false,
-			variant: "outlined"
-		},
-		variants: {
-			variant: {
-				filled: styles.filled,
-				outlined: styles.outlined,
-				borderless: styles.borderless
-			},
-			shadow: {
-				false: null,
-				true: styles.shadow
-			},
-			focused: {
-				false: null,
-				true: styles.focused
-			},
-			error: {
-				fales: null,
-				true: styles.error
-			},
-			disabled: {
-				false: null,
-				true: styles.disabled
-			}
-		}
-	}), [styles]);
 	const [recordedKeys, { start, stop, isRecording, resetKeys }] = useRecordHotkeys();
 	useHotkeys("*", () => {
 		inputRef.current?.blur();
@@ -173,7 +142,7 @@ const HotkeyInput = memo(({ value = "", defaultValue = "", resetValue = "", onCh
 					error: hasConflict || hasInvalidCombination,
 					focused: isFocused,
 					shadow,
-					variant: variant || (theme.isDarkMode ? "filled" : "outlined")
+					variant: variant || (isDarkMode ? "filled" : "outlined")
 				})),
 				horizontal: true,
 				justify: "space-between",

package/es/HotkeyInput/HotkeyInput.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"HotkeyInput.mjs","names":["hotkeyMessages","useControlledState","modifiers: string[]","normalKeys: string[]","normalizedKey: any","Flexbox","Hotkey","ActionIcon"],"sources":["../../src/HotkeyInput/HotkeyInput.tsx"],"sourcesContent":["'use client';\n\nimport type { InputRef } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { isEqual } from 'es-toolkit/compat';\nimport { Undo2Icon } from 'lucide-react';\nimport {\n  type FocusEvent,\n  type MouseEvent,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useHotkeys, useRecordHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Hotkey from '@/Hotkey';\nimport { NORMATIVE_MODIFIER, checkIsAppleDevice, splitKeysByPlus } from '@/Hotkey/utils';\nimport hotkeyMessages from '@/i18n/resources/en/hotkey';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { useStyles } from './style';\nimport type { HotkeyInputProps } from './type';\n\nconst HotkeyInput = memo<HotkeyInputProps>(\n  ({\n    value = '',\n    defaultValue = '',\n    resetValue = '',\n    onChange,\n    onConflict,\n    placeholder,\n    disabled,\n    shadow,\n    allowReset = true,\n    style,\n    className,\n    hotkeyConflicts = [],\n    variant,\n    texts,\n    isApple,\n    onBlur,\n    onReset,\n    onFocus,\n  }) => {\n    const [isFocused, setIsFocused] = useState(false);\n    const [hasConflict, setHasConflict] = useState(false);\n    const [hasInvalidCombination, setHasInvalidCombination] = useState(false);\n    const inputRef = useRef<InputRef>(null);\n    const { cx, styles, theme } = useStyles();\n    const { t } = useTranslation(hotkeyMessages);\n    const isAppleDevice = useMemo(() => checkIsAppleDevice(isApple), [isApple]);\n    const [hotkeyValue, setHotkeyValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            disabled: false,\n            error: false,\n            shadow: false,\n            variant: 'outlined',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n            shadow: {\n              false: null,\n              true: styles.shadow,\n            },\n            focused: {\n              false: null,\n              true: styles.focused,\n            },\n            error: {\n              fales: null,\n              true: styles.error,\n            },\n            disabled: {\n              false: null,\n              true: styles.disabled,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    // 使用 useRecordHotkeys 处理快捷键录入\n    const [recordedKeys, { start, stop, isRecording, resetKeys }] = useRecordHotkeys();\n\n    useHotkeys(\n      '*',\n      () => {\n        inputRef.current?.blur();\n      },\n      {\n        enableOnContentEditable: true,\n        enableOnFormTags: true,\n        enabled: isRecording && !disabled,\n        keydown: false,\n        keyup: true,\n        preventDefault: true,\n      },\n    );\n\n    // 处理按键，保证格式正确：修饰键在前，最多一个非修饰键在后\n    const formatKeys = useCallback((keysSet: Set<string>) => {\n      const modifiers: string[] = [];\n      const normalKeys: string[] = [];\n\n      for (const key of keysSet) {\n        // 处理不同表示的修饰键\n        const normalizedKey: any = key.toLowerCase();\n        if (NORMATIVE_MODIFIER.includes(normalizedKey)) {\n          // 统一修饰键表示\n          if (\n            (!isAppleDevice && normalizedKey === 'ctrl') ||\n            (isAppleDevice && normalizedKey === 'meta')\n          ) {\n            if (!modifiers.includes('mod')) modifiers.push('mod');\n          } else if (!modifiers.includes(normalizedKey)) {\n            modifiers.push(normalizedKey);\n          }\n        } else {\n          normalKeys.push(key);\n        }\n      }\n\n      // 至少需要一个修饰键\n      if (modifiers.length === 0 && normalKeys.length > 0) {\n        return { isValid: false, keys: [] };\n      }\n\n      // 只允许一个非修饰键，如果有多个，只保留最后一个\n      const finalKey = normalKeys.length > 0 ? [normalKeys.at(-1)] : [];\n      const shortcuts = [modifiers, finalKey];\n\n      return {\n        // 组合必须包含至少一个按键\n        isValid: shortcuts.every((k) => k.length > 0),\n        keys: shortcuts.flat(),\n      };\n    }, []);\n\n    // 获取格式化后的按键字符串\n    const { isValid, keys } = formatKeys(recordedKeys);\n    const keysString = keys.join('+');\n\n    // 检查快捷键冲突\n    const checkHotkeyConflict = useCallback(\n      (newHotkey: string): boolean => {\n        return hotkeyConflicts\n          .filter((conflictKey) => conflictKey !== resetValue)\n          .some((conflictKey) => {\n            const newKeys = splitKeysByPlus(newHotkey);\n            const conflictKeys = splitKeysByPlus(conflictKey);\n            return isEqual(newKeys, conflictKeys);\n          });\n      },\n      [hotkeyConflicts],\n    );\n\n    // 当按键组合完成时处理结果\n    useEffect(() => {\n      if (recordedKeys.size > 0 && !isRecording) {\n        if (!isValid) {\n          setHasInvalidCombination(true);\n          setHasConflict(false);\n          return;\n        }\n\n        setHasInvalidCombination(false);\n        const newKeysString = keysString;\n\n        // 检查冲突\n        const conflict = checkHotkeyConflict(newKeysString);\n        if (conflict) {\n          setHasConflict(true);\n          onConflict?.(newKeysString);\n        } else {\n          setHasConflict(false);\n          setHotkeyValue?.(newKeysString);\n        }\n      }\n    }, [\n      recordedKeys,\n      isRecording,\n      isValid,\n      keysString,\n      checkHotkeyConflict,\n      setHotkeyValue,\n      onConflict,\n    ]);\n\n    // 处理输入框焦点\n    const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      setIsFocused(true);\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      start(); // 开始记录\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {\n      setIsFocused(false);\n      stop(); // 停止记录\n      onBlur?.(e);\n    };\n\n    // 重置功能\n    const handleReset = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setHotkeyValue?.(resetValue);\n      resetKeys();\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      setIsFocused(false);\n      stop(); // 停止记录\n      onReset?.(hotkeyValue, resetValue);\n    };\n\n    const handleClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      if (disabled || isFocused) return;\n      inputRef.current?.focus();\n    };\n\n    const placeholderText = placeholder ?? t('hotkey.placeholder');\n    const resetTitle = texts?.reset ?? t('hotkey.reset');\n    const conflictText = texts?.conflicts ?? t('hotkey.conflict');\n    const invalidText = texts?.invalidCombination ?? t('hotkey.invalidCombination');\n\n    return (\n      <Flexbox\n        className={className}\n        gap={8}\n        style={{\n          position: 'relative',\n          ...style,\n        }}\n      >\n        <Flexbox\n          align={'center'}\n          className={cx(\n            variants({\n              disabled,\n              error: hasConflict || hasInvalidCombination,\n              focused: isFocused,\n              shadow,\n              variant: variant || (theme.isDarkMode ? 'filled' : 'outlined'),\n            }),\n          )}\n          horizontal\n          justify={'space-between'}\n          onClick={handleClick}\n        >\n          <div style={{ pointerEvents: 'none' }}>\n            {isRecording ? (\n              <span className={styles.placeholder}>\n                {keys.length > 0 ? <Hotkey keys={keysString} /> : placeholderText}\n              </span>\n            ) : hotkeyValue ? (\n              <Hotkey keys={hotkeyValue} />\n            ) : (\n              <span className={styles.placeholder}>{placeholderText}</span>\n            )}\n          </div>\n\n          {/* 隐藏的输入框，用于接收焦点 */}\n          <input\n            className={styles.hiddenInput}\n            disabled={disabled}\n            onBlur={handleBlur}\n            onFocus={handleFocus}\n            readOnly\n            ref={inputRef as any}\n            style={{ pointerEvents: 'none' }}\n          />\n\n          {!isFocused && allowReset && hotkeyValue && hotkeyValue !== resetValue && !disabled && (\n            <ActionIcon\n              icon={Undo2Icon}\n              onClick={handleReset}\n              size={'small'}\n              title={resetTitle}\n              variant={'filled'}\n            />\n          )}\n        </Flexbox>\n        {hasConflict && <div className={styles.errorText}>{conflictText}</div>}\n        {hasInvalidCombination && <div className={styles.errorText}>{invalidText}</div>}\n      </Flexbox>\n    );\n  },\n);\n\nHotkeyInput.displayName = 'HotkeyInput';\n\nexport default HotkeyInput;\n"],"mappings":"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"}
+{"version":3,"file":"HotkeyInput.mjs","names":["hotkeyMessages","useControlledState","modifiers: string[]","normalKeys: string[]","normalizedKey: any","Flexbox","Hotkey","ActionIcon"],"sources":["../../src/HotkeyInput/HotkeyInput.tsx"],"sourcesContent":["'use client';\n\nimport type { InputRef } from 'antd';\nimport { cx, useThemeMode } from 'antd-style';\nimport { isEqual } from 'es-toolkit/compat';\nimport { Undo2Icon } from 'lucide-react';\nimport {\n  type FocusEvent,\n  type MouseEvent,\n  memo,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport { useHotkeys, useRecordHotkeys } from 'react-hotkeys-hook';\nimport useControlledState from 'use-merge-value';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport Hotkey from '@/Hotkey';\nimport { NORMATIVE_MODIFIER, checkIsAppleDevice, splitKeysByPlus } from '@/Hotkey/utils';\nimport hotkeyMessages from '@/i18n/resources/en/hotkey';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { styles, variants } from './style';\nimport type { HotkeyInputProps } from './type';\n\nconst HotkeyInput = memo<HotkeyInputProps>(\n  ({\n    value = '',\n    defaultValue = '',\n    resetValue = '',\n    onChange,\n    onConflict,\n    placeholder,\n    disabled,\n    shadow,\n    allowReset = true,\n    style,\n    className,\n    hotkeyConflicts = [],\n    variant,\n    texts,\n    isApple,\n    onBlur,\n    onReset,\n    onFocus,\n  }) => {\n    const [isFocused, setIsFocused] = useState(false);\n    const [hasConflict, setHasConflict] = useState(false);\n    const [hasInvalidCombination, setHasInvalidCombination] = useState(false);\n    const inputRef = useRef<InputRef>(null);\n    const { isDarkMode } = useThemeMode();\n    const { t } = useTranslation(hotkeyMessages);\n    const isAppleDevice = useMemo(() => checkIsAppleDevice(isApple), [isApple]);\n    const [hotkeyValue, setHotkeyValue] = useControlledState(defaultValue, {\n      defaultValue,\n      onChange,\n      value,\n    });\n\n    // 使用 useRecordHotkeys 处理快捷键录入\n    const [recordedKeys, { start, stop, isRecording, resetKeys }] = useRecordHotkeys();\n\n    useHotkeys(\n      '*',\n      () => {\n        inputRef.current?.blur();\n      },\n      {\n        enableOnContentEditable: true,\n        enableOnFormTags: true,\n        enabled: isRecording && !disabled,\n        keydown: false,\n        keyup: true,\n        preventDefault: true,\n      },\n    );\n\n    // 处理按键，保证格式正确：修饰键在前，最多一个非修饰键在后\n    const formatKeys = useCallback((keysSet: Set<string>) => {\n      const modifiers: string[] = [];\n      const normalKeys: string[] = [];\n\n      for (const key of keysSet) {\n        // 处理不同表示的修饰键\n        const normalizedKey: any = key.toLowerCase();\n        if (NORMATIVE_MODIFIER.includes(normalizedKey)) {\n          // 统一修饰键表示\n          if (\n            (!isAppleDevice && normalizedKey === 'ctrl') ||\n            (isAppleDevice && normalizedKey === 'meta')\n          ) {\n            if (!modifiers.includes('mod')) modifiers.push('mod');\n          } else if (!modifiers.includes(normalizedKey)) {\n            modifiers.push(normalizedKey);\n          }\n        } else {\n          normalKeys.push(key);\n        }\n      }\n\n      // 至少需要一个修饰键\n      if (modifiers.length === 0 && normalKeys.length > 0) {\n        return { isValid: false, keys: [] };\n      }\n\n      // 只允许一个非修饰键，如果有多个，只保留最后一个\n      const finalKey = normalKeys.length > 0 ? [normalKeys.at(-1)] : [];\n      const shortcuts = [modifiers, finalKey];\n\n      return {\n        // 组合必须包含至少一个按键\n        isValid: shortcuts.every((k) => k.length > 0),\n        keys: shortcuts.flat(),\n      };\n    }, []);\n\n    // 获取格式化后的按键字符串\n    const { isValid, keys } = formatKeys(recordedKeys);\n    const keysString = keys.join('+');\n\n    // 检查快捷键冲突\n    const checkHotkeyConflict = useCallback(\n      (newHotkey: string): boolean => {\n        return hotkeyConflicts\n          .filter((conflictKey) => conflictKey !== resetValue)\n          .some((conflictKey) => {\n            const newKeys = splitKeysByPlus(newHotkey);\n            const conflictKeys = splitKeysByPlus(conflictKey);\n            return isEqual(newKeys, conflictKeys);\n          });\n      },\n      [hotkeyConflicts],\n    );\n\n    // 当按键组合完成时处理结果\n    useEffect(() => {\n      if (recordedKeys.size > 0 && !isRecording) {\n        if (!isValid) {\n          setHasInvalidCombination(true);\n          setHasConflict(false);\n          return;\n        }\n\n        setHasInvalidCombination(false);\n        const newKeysString = keysString;\n\n        // 检查冲突\n        const conflict = checkHotkeyConflict(newKeysString);\n        if (conflict) {\n          setHasConflict(true);\n          onConflict?.(newKeysString);\n        } else {\n          setHasConflict(false);\n          setHotkeyValue?.(newKeysString);\n        }\n      }\n    }, [\n      recordedKeys,\n      isRecording,\n      isValid,\n      keysString,\n      checkHotkeyConflict,\n      setHotkeyValue,\n      onConflict,\n    ]);\n\n    // 处理输入框焦点\n    const handleFocus = (e: FocusEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      setIsFocused(true);\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      start(); // 开始记录\n      onFocus?.(e);\n    };\n\n    const handleBlur = (e: FocusEvent<HTMLInputElement>) => {\n      setIsFocused(false);\n      stop(); // 停止记录\n      onBlur?.(e);\n    };\n\n    // 重置功能\n    const handleReset = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setHotkeyValue?.(resetValue);\n      resetKeys();\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      setIsFocused(false);\n      stop(); // 停止记录\n      onReset?.(hotkeyValue, resetValue);\n    };\n\n    const handleClick = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      if (disabled || isFocused) return;\n      inputRef.current?.focus();\n    };\n\n    const placeholderText = placeholder ?? t('hotkey.placeholder');\n    const resetTitle = texts?.reset ?? t('hotkey.reset');\n    const conflictText = texts?.conflicts ?? t('hotkey.conflict');\n    const invalidText = texts?.invalidCombination ?? t('hotkey.invalidCombination');\n\n    return (\n      <Flexbox\n        className={className}\n        gap={8}\n        style={{\n          position: 'relative',\n          ...style,\n        }}\n      >\n        <Flexbox\n          align={'center'}\n          className={cx(\n            variants({\n              disabled,\n              error: hasConflict || hasInvalidCombination,\n              focused: isFocused,\n              shadow,\n              variant: variant || (isDarkMode ? 'filled' : 'outlined'),\n            }),\n          )}\n          horizontal\n          justify={'space-between'}\n          onClick={handleClick}\n        >\n          <div style={{ pointerEvents: 'none' }}>\n            {isRecording ? (\n              <span className={styles.placeholder}>\n                {keys.length > 0 ? <Hotkey keys={keysString} /> : placeholderText}\n              </span>\n            ) : hotkeyValue ? (\n              <Hotkey keys={hotkeyValue} />\n            ) : (\n              <span className={styles.placeholder}>{placeholderText}</span>\n            )}\n          </div>\n\n          {/* 隐藏的输入框，用于接收焦点 */}\n          <input\n            className={styles.hiddenInput}\n            disabled={disabled}\n            onBlur={handleBlur}\n            onFocus={handleFocus}\n            readOnly\n            ref={inputRef as any}\n            style={{ pointerEvents: 'none' }}\n          />\n\n          {!isFocused && allowReset && hotkeyValue && hotkeyValue !== resetValue && !disabled && (\n            <ActionIcon\n              icon={Undo2Icon}\n              onClick={handleReset}\n              size={'small'}\n              title={resetTitle}\n              variant={'filled'}\n            />\n          )}\n        </Flexbox>\n        {hasConflict && <div className={styles.errorText}>{conflictText}</div>}\n        {hasInvalidCombination && <div className={styles.errorText}>{invalidText}</div>}\n      </Flexbox>\n    );\n  },\n);\n\nHotkeyInput.displayName = 'HotkeyInput';\n\nexport default HotkeyInput;\n"],"mappings":"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"}

package/es/HotkeyInput/style.mjs

@@ -1,20 +1,22 @@
-import { createStyles } from "antd-style";
+import { staticStylish } from "../styles/theme/customStylishStatic.mjs";
+import { createStaticStyles } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/HotkeyInput/style.ts
-const useStyles = createStyles(({ css: css$1, token, stylish }) => {
+const styles = createStaticStyles(({ css: css$1, cssVar: cssVar$1 }) => {
 	return {
-		borderless: stylish.variantBorderless,
-		disabled: stylish.disabled,
+		borderless: staticStylish.variantBorderless,
+		disabled: staticStylish.disabled,
 		error: css$1`
-      border: 1px solid ${token.colorError};
+      border: 1px solid ${cssVar$1.colorError};
     `,
 		errorText: css$1`
       font-size: 12px;
-      color: ${token.colorError};
+      color: ${cssVar$1.colorError};
     `,
-		filled: stylish.variantFilled,
+		filled: staticStylish.variantFilled,
 		focused: css$1`
-      background: ${token.colorFillSecondary} !important;
+      background: ${cssVar$1.colorFillSecondary} !important;
     `,
 		hiddenInput: css$1`
       cursor: text;
@@ -29,9 +31,9 @@ const useStyles = createStyles(({ css: css$1, token, stylish }) => {
 
       opacity: 0;
     `,
-		outlined: stylish.variantOutlined,
+		outlined: staticStylish.variantOutlined,
 		placeholder: css$1`
-      color: ${token.colorTextDescription};
+      color: ${cssVar$1.colorTextDescription};
     `,
 		root: css$1`
       cursor: pointer;
@@ -42,13 +44,43 @@ const useStyles = createStyles(({ css: css$1, token, stylish }) => {
       height: 36px;
       padding-block: 0;
       padding-inline: 12px;
-
-      border-radius: ${token.borderRadius}px;
+      border-radius: ${cssVar$1.borderRadius};
     `,
-		shadow: stylish.shadow
+		shadow: staticStylish.shadow
 	};
 });
+const variants = cva(styles.root, {
+	defaultVariants: {
+		disabled: false,
+		error: false,
+		shadow: false,
+		variant: "outlined"
+	},
+	variants: {
+		variant: {
+			filled: styles.filled,
+			outlined: styles.outlined,
+			borderless: styles.borderless
+		},
+		shadow: {
+			false: null,
+			true: styles.shadow
+		},
+		focused: {
+			false: null,
+			true: styles.focused
+		},
+		error: {
+			fales: null,
+			true: styles.error
+		},
+		disabled: {
+			false: null,
+			true: styles.disabled
+		}
+	}
+});
 
 //#endregion
-export { useStyles };
+export { styles, variants };
 //# sourceMappingURL=style.mjs.map

package/es/HotkeyInput/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/HotkeyInput/style.ts"],"sourcesContent":["import { createStyles } from 'antd-style';\n\nexport const useStyles = createStyles(({ css, token, stylish }) => {\n  return {\n    borderless: stylish.variantBorderless,\n    disabled: stylish.disabled,\n    error: css`\n      border: 1px solid ${token.colorError};\n    `,\n    errorText: css`\n      font-size: 12px;\n      color: ${token.colorError};\n    `,\n    filled: stylish.variantFilled,\n    focused: css`\n      background: ${token.colorFillSecondary} !important;\n    `,\n    hiddenInput: css`\n      cursor: text;\n\n      position: absolute;\n      z-index: -1;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n\n      width: 100%;\n      height: 100%;\n\n      opacity: 0;\n    `,\n    outlined: stylish.variantOutlined,\n    placeholder: css`\n      color: ${token.colorTextDescription};\n    `,\n    root: css`\n      cursor: pointer;\n\n      position: relative;\n\n      max-width: 100%;\n      height: 36px;\n      padding-block: 0;\n      padding-inline: 12px;\n\n      border-radius: ${token.borderRadius}px;\n    `,\n    shadow: stylish.shadow,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,YAAK,OAAO,cAAc;AACjE,QAAO;EACL,YAAY,QAAQ;EACpB,UAAU,QAAQ;EAClB,OAAO,KAAG;0BACY,MAAM,WAAW;;EAEvC,WAAW,KAAG;;eAEH,MAAM,WAAW;;EAE5B,QAAQ,QAAQ;EAChB,SAAS,KAAG;oBACI,MAAM,mBAAmB;;EAEzC,aAAa,KAAG;;;;;;;;;;;;;EAahB,UAAU,QAAQ;EAClB,aAAa,KAAG;eACL,MAAM,qBAAqB;;EAEtC,MAAM,KAAG;;;;;;;;;;uBAUU,MAAM,aAAa;;EAEtC,QAAQ,QAAQ;EACjB;EACD"}
+{"version":3,"file":"style.mjs","names":["lobeStaticStylish","cssVar"],"sources":["../../src/HotkeyInput/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n  return {\n    borderless: lobeStaticStylish.variantBorderless,\n    disabled: lobeStaticStylish.disabled,\n    error: css`\n      border: 1px solid ${cssVar.colorError};\n    `,\n    errorText: css`\n      font-size: 12px;\n      color: ${cssVar.colorError};\n    `,\n    filled: lobeStaticStylish.variantFilled,\n    focused: css`\n      background: ${cssVar.colorFillSecondary} !important;\n    `,\n    hiddenInput: css`\n      cursor: text;\n\n      position: absolute;\n      z-index: -1;\n      inset-block-start: 0;\n      inset-inline-start: 0;\n\n      width: 100%;\n      height: 100%;\n\n      opacity: 0;\n    `,\n    outlined: lobeStaticStylish.variantOutlined,\n    placeholder: css`\n      color: ${cssVar.colorTextDescription};\n    `,\n    root: css`\n      cursor: pointer;\n\n      position: relative;\n\n      max-width: 100%;\n      height: 36px;\n      padding-block: 0;\n      padding-inline: 12px;\n      border-radius: ${cssVar.borderRadius};\n    `,\n    shadow: lobeStaticStylish.shadow,\n  };\n});\n\nexport const variants = cva(styles.root, {\n  defaultVariants: {\n    disabled: false,\n    error: false,\n    shadow: false,\n    variant: 'outlined',\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    variant: {\n      filled: styles.filled,\n      outlined: styles.outlined,\n      borderless: styles.borderless,\n    },\n    shadow: {\n      false: null,\n      true: styles.shadow,\n    },\n    focused: {\n      false: null,\n      true: styles.focused,\n    },\n    error: {\n      fales: null,\n      true: styles.error,\n    },\n    disabled: {\n      false: null,\n      true: styles.disabled,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;;AAKA,MAAa,SAAS,oBAAoB,EAAE,YAAK,uBAAa;AAC5D,QAAO;EACL,YAAYA,cAAkB;EAC9B,UAAUA,cAAkB;EAC5B,OAAO,KAAG;0BACYC,SAAO,WAAW;;EAExC,WAAW,KAAG;;eAEHA,SAAO,WAAW;;EAE7B,QAAQD,cAAkB;EAC1B,SAAS,KAAG;oBACIC,SAAO,mBAAmB;;EAE1C,aAAa,KAAG;;;;;;;;;;;;;EAahB,UAAUD,cAAkB;EAC5B,aAAa,KAAG;eACLC,SAAO,qBAAqB;;EAEvC,MAAM,KAAG;;;;;;;;;uBASUA,SAAO,aAAa;;EAEvC,QAAQD,cAAkB;EAC3B;EACD;AAEF,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,UAAU;EACV,OAAO;EACP,QAAQ;EACR,SAAS;EACV;CAED,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB;EACD,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;GACd;EACD,SAAS;GACP,OAAO;GACP,MAAM,OAAO;GACd;EACD,OAAO;GACL,OAAO;GACP,MAAM,OAAO;GACd;EACD,UAAU;GACR,OAAO;GACP,MAAM,OAAO;GACd;EACF;CAEF,CAAC"}

package/es/Icon/Icon.d.mts

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

package/es/Icon/Icon.mjs

@@ -2,21 +2,13 @@
 
 import { useIconContext } from "./components/IconProvider.mjs";
 import { calcSize } from "./components/utils.mjs";
-import { useStyles } from "./style.mjs";
+import { variants } from "./style.mjs";
 import { isValidElement, memo, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { cx } from "antd-style";
 
 //#region src/Icon/Icon.tsx
 const Icon = memo(({ icon, size: iconSize, color, fill = "transparent", className, focusable, spin, fillRule, fillOpacity, ref, ...rest }) => {
-	const { styles, cx } = useStyles();
-	const variants = useMemo(() => cva("anticon", {
-		defaultVariants: { spin: false },
-		variants: { spin: {
-			false: null,
-			true: styles.spin
-		} }
-	}), [styles]);
 	const { color: colorConfig, fill: fillConfig, fillOpacity: fillOpacityConfig, fillRule: fillRuleConfig, focusable: focusableConfig, className: classNameConfig, size: sizeConfig, ...restConfig } = useIconContext();
 	const { size, strokeWidth } = useMemo(() => calcSize(iconSize || sizeConfig), [iconSize, sizeConfig]);
 	const SvgIcon = icon;

package/es/Icon/Icon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.mjs","names":[],"sources":["../../src/Icon/Icon.tsx"],"sourcesContent":["'use client';\n\nimport { cva } from 'class-variance-authority';\nimport { LucideIcon } from 'lucide-react';\nimport { isValidElement, memo, useMemo } from 'react';\n\nimport { useIconContext } from './components/IconProvider';\nimport { calcSize } from './components/utils';\nimport { useStyles } from './style';\nimport type { IconProps } from './type';\n\nconst Icon = memo<IconProps>(\n  ({\n    icon,\n    size: iconSize,\n    color,\n    fill = 'transparent',\n    className,\n    focusable,\n    spin,\n    fillRule,\n    fillOpacity,\n    ref,\n    ...rest\n  }) => {\n    const { styles, cx } = useStyles();\n\n    const variants = useMemo(\n      () =>\n        cva('anticon', {\n          defaultVariants: {\n            spin: false,\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            spin: {\n              false: null,\n              true: styles.spin,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    const {\n      color: colorConfig,\n      fill: fillConfig,\n      fillOpacity: fillOpacityConfig,\n      fillRule: fillRuleConfig,\n      focusable: focusableConfig,\n      className: classNameConfig,\n      size: sizeConfig,\n      ...restConfig\n    } = useIconContext();\n\n    const { size, strokeWidth } = useMemo(\n      () => calcSize(iconSize || sizeConfig),\n      [iconSize, sizeConfig],\n    );\n\n    const SvgIcon = icon as LucideIcon;\n\n    return (\n      <span\n        className={cx(variants({ spin }), classNameConfig, className)}\n        role=\"img\"\n        {...restConfig}\n        {...rest}\n      >\n        {icon &&\n          (isValidElement(icon) ? (\n            icon\n          ) : (\n            <SvgIcon\n              color={color || colorConfig}\n              fill={fill || fillConfig}\n              fillOpacity={fillOpacity || fillOpacityConfig}\n              fillRule={fillRule || fillRuleConfig}\n              focusable={focusable || focusableConfig}\n              height={size}\n              ref={ref}\n              size={size}\n              strokeWidth={strokeWidth}\n              width={size}\n            />\n          ))}\n      </span>\n    );\n  },\n);\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,OAAO,MACV,EACC,MACA,MAAM,UACN,OACA,OAAO,eACP,WACA,WACA,MACA,UACA,aACA,KACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,OAAO,WAAW;CAElC,MAAM,WAAW,cAEb,IAAI,WAAW;EACb,iBAAiB,EACf,MAAM,OACP;EAED,UAAU,EACR,MAAM;GACJ,OAAO;GACP,MAAM,OAAO;GACd,EACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;CAED,MAAM,EACJ,OAAO,aACP,MAAM,YACN,aAAa,mBACb,UAAU,gBACV,WAAW,iBACX,WAAW,iBACX,MAAM,YACN,GAAG,eACD,gBAAgB;CAEpB,MAAM,EAAE,MAAM,gBAAgB,cACtB,SAAS,YAAY,WAAW,EACtC,CAAC,UAAU,WAAW,CACvB;CAED,MAAM,UAAU;AAEhB,QACE,oBAAC;EACC,WAAW,GAAG,SAAS,EAAE,MAAM,CAAC,EAAE,iBAAiB,UAAU;EAC7D,MAAK;EACL,GAAI;EACJ,GAAI;YAEH,SACE,eAAe,KAAK,GACnB,OAEA,oBAAC;GACC,OAAO,SAAS;GAChB,MAAM,QAAQ;GACd,aAAa,eAAe;GAC5B,UAAU,YAAY;GACtB,WAAW,aAAa;GACxB,QAAQ;GACH;GACC;GACO;GACb,OAAO;IACP;GAED;EAGZ;AAED,KAAK,cAAc;AAEnB,mBAAe"}
+{"version":3,"file":"Icon.mjs","names":[],"sources":["../../src/Icon/Icon.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { LucideIcon } from 'lucide-react';\nimport { isValidElement, memo, useMemo } from 'react';\n\nimport { useIconContext } from './components/IconProvider';\nimport { calcSize } from './components/utils';\nimport { variants } from './style';\nimport type { IconProps } from './type';\n\nconst Icon = memo<IconProps>(\n  ({\n    icon,\n    size: iconSize,\n    color,\n    fill = 'transparent',\n    className,\n    focusable,\n    spin,\n    fillRule,\n    fillOpacity,\n    ref,\n    ...rest\n  }) => {\n    const {\n      color: colorConfig,\n      fill: fillConfig,\n      fillOpacity: fillOpacityConfig,\n      fillRule: fillRuleConfig,\n      focusable: focusableConfig,\n      className: classNameConfig,\n      size: sizeConfig,\n      ...restConfig\n    } = useIconContext();\n\n    const { size, strokeWidth } = useMemo(\n      () => calcSize(iconSize || sizeConfig),\n      [iconSize, sizeConfig],\n    );\n\n    const SvgIcon = icon as LucideIcon;\n\n    return (\n      <span\n        className={cx(variants({ spin }), classNameConfig, className)}\n        role=\"img\"\n        {...restConfig}\n        {...rest}\n      >\n        {icon &&\n          (isValidElement(icon) ? (\n            icon\n          ) : (\n            <SvgIcon\n              color={color || colorConfig}\n              fill={fill || fillConfig}\n              fillOpacity={fillOpacity || fillOpacityConfig}\n              fillRule={fillRule || fillRuleConfig}\n              focusable={focusable || focusableConfig}\n              height={size}\n              ref={ref}\n              size={size}\n              strokeWidth={strokeWidth}\n              width={size}\n            />\n          ))}\n      </span>\n    );\n  },\n);\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":";;;;;;;;;;AAWA,MAAM,OAAO,MACV,EACC,MACA,MAAM,UACN,OACA,OAAO,eACP,WACA,WACA,MACA,UACA,aACA,KACA,GAAG,WACC;CACJ,MAAM,EACJ,OAAO,aACP,MAAM,YACN,aAAa,mBACb,UAAU,gBACV,WAAW,iBACX,WAAW,iBACX,MAAM,YACN,GAAG,eACD,gBAAgB;CAEpB,MAAM,EAAE,MAAM,gBAAgB,cACtB,SAAS,YAAY,WAAW,EACtC,CAAC,UAAU,WAAW,CACvB;CAED,MAAM,UAAU;AAEhB,QACE,oBAAC;EACC,WAAW,GAAG,SAAS,EAAE,MAAM,CAAC,EAAE,iBAAiB,UAAU;EAC7D,MAAK;EACL,GAAI;EACJ,GAAI;YAEH,SACE,eAAe,KAAK,GACnB,OAEA,oBAAC;GACC,OAAO,SAAS;GAChB,MAAM,QAAQ;GACd,aAAa,eAAe;GAC5B,UAAU,YAAY;GACtB,WAAW,aAAa;GACxB,QAAQ;GACH;GACC;GACO;GACb,OAAO;IACP;GAED;EAGZ;AAED,KAAK,cAAc;AAEnB,mBAAe"}

package/es/Icon/components/IconProvider.d.mts

@@ -1,11 +1,11 @@
 import { IconProps } from "../type.mjs";
-import * as react41 from "react";
+import * as react11 from "react";
 import { ReactNode } from "react";
 
 //#region src/Icon/components/IconProvider.d.ts
 type IconContentConfig = Omit<IconProps, 'icon' | 'ref'>;
-declare const IconContext: react41.Context<IconContentConfig>;
-declare const IconProvider: react41.NamedExoticComponent<{
+declare const IconContext: react11.Context<IconContentConfig>;
+declare const IconProvider: react11.NamedExoticComponent<{
   children: ReactNode;
   config?: IconContentConfig;
 }>;

package/es/Icon/style.mjs

@@ -1,19 +1,28 @@
-import { createStyles, keyframes } from "antd-style";
+import { createStaticStyles, keyframes } from "antd-style";
+import { cva } from "class-variance-authority";
 
 //#region src/Icon/style.ts
-const useStyles = createStyles(({ css: css$1 }) => {
-	return { spin: css$1`
-      animation: ${keyframes`
+const spin = keyframes`
   0% {
     rotate: 0deg;
   }
   100% {
     rotate: 360deg;
   }
-  `} 1s linear infinite;
+`;
+const styles = createStaticStyles(({ css: css$1 }) => {
+	return { spin: css$1`
+      animation: ${spin} 1s linear infinite;
     ` };
 });
+const variants = cva("anticon", {
+	defaultVariants: { spin: false },
+	variants: { spin: {
+		false: null,
+		true: styles.spin
+	} }
+});
 
 //#endregion
-export { useStyles };
+export { variants };
 //# sourceMappingURL=style.mjs.map

package/es/Icon/style.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Icon/style.ts"],"sourcesContent":["import { createStyles, keyframes } from 'antd-style';\n\nexport const useStyles = createStyles(({ css }) => {\n  const spin = keyframes`\n  0% {\n    rotate: 0deg;\n  }\n  100% {\n    rotate: 360deg;\n  }\n  `;\n  return {\n    spin: css`\n      animation: ${spin} 1s linear infinite;\n    `,\n  };\n});\n"],"mappings":";;;AAEA,MAAa,YAAY,cAAc,EAAE,iBAAU;AASjD,QAAO,EACL,MAAM,KAAG;mBATE,SAAS;;;;;;;IAUA;OAErB;EACD"}
+{"version":3,"file":"style.mjs","names":[],"sources":["../../src/Icon/style.ts"],"sourcesContent":["import { createStaticStyles, keyframes } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nconst spin = keyframes`\n  0% {\n    rotate: 0deg;\n  }\n  100% {\n    rotate: 360deg;\n  }\n`;\n\nexport const styles = createStaticStyles(({ css }) => {\n  return {\n    spin: css`\n      animation: ${spin} 1s linear infinite;\n    `,\n  };\n});\n\nexport const variants = cva('anticon', {\n  defaultVariants: {\n    spin: false,\n  },\n  /* eslint-disable sort-keys-fix/sort-keys-fix */\n  variants: {\n    spin: {\n      false: null,\n      true: styles.spin,\n    },\n  },\n  /* eslint-enable sort-keys-fix/sort-keys-fix */\n});\n"],"mappings":";;;;AAGA,MAAM,OAAO,SAAS;;;;;;;;AAStB,MAAa,SAAS,oBAAoB,EAAE,iBAAU;AACpD,QAAO,EACL,MAAM,KAAG;mBACM,KAAK;OAErB;EACD;AAEF,MAAa,WAAW,IAAI,WAAW;CACrC,iBAAiB,EACf,MAAM,OACP;CAED,UAAU,EACR,MAAM;EACJ,OAAO;EACP,MAAM,OAAO;EACd,EACF;CAEF,CAAC"}

package/es/Image/Image.mjs

@@ -1,31 +1,24 @@
 'use client';
 
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
-import { FALLBACK_DARK, FALLBACK_LIGHT, useStyles } from "./style.mjs";
+import { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants } from "./style.mjs";
 import usePreview_default from "./components/usePreview.mjs";
-import { memo, useMemo } from "react";
+import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Image, Skeleton } from "antd";
-import { cva } from "class-variance-authority";
+import { cssVar, cx, useThemeMode } from "antd-style";
 
 //#region src/Image/Image.tsx
 const Image$1 = memo(({ ref, style, preview, isLoading, maxHeight = "100%", maxWidth = "100%", minHeight, minWidth, actions, className, alwaysShowActions, variant = "filled", objectFit = "cover", classNames, styles: customStyles, onClick, width, height, ...rest }) => {
-	const { styles, cx, theme } = useStyles({ alwaysShowActions });
+	const { isDarkMode } = useThemeMode();
+	const actionsClassName = alwaysShowActions ? styles.actionsVisible : styles.actionsHidden;
 	const mergePreivew = usePreview_default(preview);
-	const variants = useMemo(() => cva(styles.root, {
-		defaultVariants: { variant: "filled" },
-		variants: { variant: {
-			filled: styles.filled,
-			outlined: styles.outlined,
-			borderless: styles.borderless
-		} }
-	}), [styles]);
 	if (isLoading) return /* @__PURE__ */ jsx("div", {
 		onClick,
 		children: /* @__PURE__ */ jsx(Skeleton.Avatar, {
 			active: true,
 			style: {
-				borderRadius: theme.borderRadius,
+				borderRadius: cssVar.borderRadius,
 				height,
 				maxHeight,
 				maxWidth,
@@ -40,12 +33,12 @@ const Image$1 = memo(({ ref, style, preview, isLoading, maxHeight = "100%", maxW
 		ref,
 		style,
 		children: [actions && /* @__PURE__ */ jsx("div", {
-			className: styles.actions,
+			className: cx(actionsClassName, alwaysShowActions ? "" : "actions-hidden"),
 			children: actions
 		}), /* @__PURE__ */ jsx(Image, {
 			className: cx(styles.image, classNames?.image),
 			classNames: { root: cx(styles.wrapper, classNames?.wrapper) },
-			fallback: theme.isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT,
+			fallback: isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT,
 			height,
 			loading: "lazy",
 			onClick,

package/es/Image/Image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Image.mjs","names":["Image","usePreview","Flexbox","AntImage"],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport { Image as AntImage, Skeleton } from 'antd';\nimport { cva } from 'class-variance-authority';\nimport { memo, useMemo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport usePreview from './components/usePreview';\nimport { FALLBACK_DARK, FALLBACK_LIGHT, useStyles } from './style';\nimport type { ImageProps } from './type';\n\nconst Image = memo<ImageProps>(\n  ({\n    ref,\n    style,\n    preview,\n    isLoading,\n    maxHeight = '100%',\n    maxWidth = '100%',\n    minHeight,\n    minWidth,\n    actions,\n    className,\n    alwaysShowActions,\n    variant = 'filled',\n    objectFit = 'cover',\n    classNames,\n    styles: customStyles,\n    onClick,\n    width,\n    height,\n    ...rest\n  }) => {\n    const { styles, cx, theme } = useStyles({\n      alwaysShowActions,\n    });\n    const mergePreivew = usePreview(preview);\n\n    const variants = useMemo(\n      () =>\n        cva(styles.root, {\n          defaultVariants: {\n            variant: 'filled',\n          },\n          /* eslint-disable sort-keys-fix/sort-keys-fix */\n          variants: {\n            variant: {\n              filled: styles.filled,\n              outlined: styles.outlined,\n              borderless: styles.borderless,\n            },\n          },\n          /* eslint-enable sort-keys-fix/sort-keys-fix */\n        }),\n      [styles],\n    );\n\n    if (isLoading)\n      return (\n        <div onClick={onClick}>\n          <Skeleton.Avatar\n            active\n            style={{\n              borderRadius: theme.borderRadius,\n              height,\n              maxHeight,\n              maxWidth,\n              minHeight,\n              minWidth,\n              width,\n            }}\n          />\n        </div>\n      );\n\n    return (\n      <Flexbox className={cx(variants({ variant }), className)} ref={ref} style={style}>\n        {actions && <div className={styles.actions}>{actions}</div>}\n        <AntImage\n          className={cx(styles.image, classNames?.image)}\n          classNames={{\n            root: cx(styles.wrapper, classNames?.wrapper),\n          }}\n          fallback={theme.isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT}\n          height={height}\n          loading={'lazy'}\n          onClick={onClick}\n          preview={preview === false ? false : (mergePreivew as any)}\n          style={{\n            maxHeight,\n            maxWidth,\n            minHeight,\n            minWidth,\n            objectFit: objectFit || 'cover',\n            ...customStyles?.image,\n          }}\n          styles={{\n            root: customStyles?.wrapper,\n          }}\n          width={width}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,UAAQ,MACX,EACC,KACA,OACA,SACA,WACA,YAAY,QACZ,WAAW,QACX,WACA,UACA,SACA,WACA,mBACA,UAAU,UACV,YAAY,SACZ,YACA,QAAQ,cACR,SACA,OACA,QACA,GAAG,WACC;CACJ,MAAM,EAAE,QAAQ,IAAI,UAAU,UAAU,EACtC,mBACD,CAAC;CACF,MAAM,eAAeC,mBAAW,QAAQ;CAExC,MAAM,WAAW,cAEb,IAAI,OAAO,MAAM;EACf,iBAAiB,EACf,SAAS,UACV;EAED,UAAU,EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;GACpB,EACF;EAEF,CAAC,EACJ,CAAC,OAAO,CACT;AAED,KAAI,UACF,QACE,oBAAC;EAAa;YACZ,oBAAC,SAAS;GACR;GACA,OAAO;IACL,cAAc,MAAM;IACpB;IACA;IACA;IACA;IACA;IACA;IACD;IACD;GACE;AAGV,QACE,qBAACC;EAAQ,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;EAAO;EAAY;aACxE,WAAW,oBAAC;GAAI,WAAW,OAAO;aAAU;IAAc,EAC3D,oBAACC;GACC,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;GAC9C,YAAY,EACV,MAAM,GAAG,OAAO,SAAS,YAAY,QAAQ,EAC9C;GACD,UAAU,MAAM,aAAa,gBAAgB;GACrC;GACR,SAAS;GACA;GACT,SAAS,YAAY,QAAQ,QAAS;GACtC,OAAO;IACL;IACA;IACA;IACA;IACA,WAAW,aAAa;IACxB,GAAG,cAAc;IAClB;GACD,QAAQ,EACN,MAAM,cAAc,SACrB;GACM;GACP,GAAI;IACJ;GACM;EAGf;AAED,QAAM,cAAc;AAEpB,oBAAeH"}
+{"version":3,"file":"Image.mjs","names":["Image","usePreview","Flexbox","AntImage"],"sources":["../../src/Image/Image.tsx"],"sourcesContent":["'use client';\n\nimport { Image as AntImage, Skeleton } from 'antd';\nimport { cssVar, cx, useThemeMode } from 'antd-style';\nimport { memo } from 'react';\n\nimport { Flexbox } from '@/Flex';\n\nimport usePreview from './components/usePreview';\nimport { FALLBACK_DARK, FALLBACK_LIGHT, styles, variants } from './style';\nimport type { ImageProps } from './type';\n\nconst Image = memo<ImageProps>(\n  ({\n    ref,\n    style,\n    preview,\n    isLoading,\n    maxHeight = '100%',\n    maxWidth = '100%',\n    minHeight,\n    minWidth,\n    actions,\n    className,\n    alwaysShowActions,\n    variant = 'filled',\n    objectFit = 'cover',\n    classNames,\n    styles: customStyles,\n    onClick,\n    width,\n    height,\n    ...rest\n  }) => {\n    const { isDarkMode } = useThemeMode();\n    const actionsClassName = alwaysShowActions ? styles.actionsVisible : styles.actionsHidden;\n    const mergePreivew = usePreview(preview);\n\n    if (isLoading)\n      return (\n        <div onClick={onClick}>\n          <Skeleton.Avatar\n            active\n            style={{\n              borderRadius: cssVar.borderRadius,\n              height,\n              maxHeight,\n              maxWidth,\n              minHeight,\n              minWidth,\n              width,\n            }}\n          />\n        </div>\n      );\n\n    return (\n      <Flexbox className={cx(variants({ variant }), className)} ref={ref} style={style}>\n        {actions && (\n          <div className={cx(actionsClassName, alwaysShowActions ? '' : 'actions-hidden')}>\n            {actions}\n          </div>\n        )}\n        <AntImage\n          className={cx(styles.image, classNames?.image)}\n          classNames={{\n            root: cx(styles.wrapper, classNames?.wrapper),\n          }}\n          fallback={isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT}\n          height={height}\n          loading={'lazy'}\n          onClick={onClick}\n          preview={preview === false ? false : (mergePreivew as any)}\n          style={{\n            maxHeight,\n            maxWidth,\n            minHeight,\n            minWidth,\n            objectFit: objectFit || 'cover',\n            ...customStyles?.image,\n          }}\n          styles={{\n            root: customStyles?.wrapper,\n          }}\n          width={width}\n          {...rest}\n        />\n      </Flexbox>\n    );\n  },\n);\n\nImage.displayName = 'Image';\n\nexport default Image;\n"],"mappings":";;;;;;;;;;;AAYA,MAAMA,UAAQ,MACX,EACC,KACA,OACA,SACA,WACA,YAAY,QACZ,WAAW,QACX,WACA,UACA,SACA,WACA,mBACA,UAAU,UACV,YAAY,SACZ,YACA,QAAQ,cACR,SACA,OACA,QACA,GAAG,WACC;CACJ,MAAM,EAAE,eAAe,cAAc;CACrC,MAAM,mBAAmB,oBAAoB,OAAO,iBAAiB,OAAO;CAC5E,MAAM,eAAeC,mBAAW,QAAQ;AAExC,KAAI,UACF,QACE,oBAAC;EAAa;YACZ,oBAAC,SAAS;GACR;GACA,OAAO;IACL,cAAc,OAAO;IACrB;IACA;IACA;IACA;IACA;IACA;IACD;IACD;GACE;AAGV,QACE,qBAACC;EAAQ,WAAW,GAAG,SAAS,EAAE,SAAS,CAAC,EAAE,UAAU;EAAO;EAAY;aACxE,WACC,oBAAC;GAAI,WAAW,GAAG,kBAAkB,oBAAoB,KAAK,iBAAiB;aAC5E;IACG,EAER,oBAACC;GACC,WAAW,GAAG,OAAO,OAAO,YAAY,MAAM;GAC9C,YAAY,EACV,MAAM,GAAG,OAAO,SAAS,YAAY,QAAQ,EAC9C;GACD,UAAU,aAAa,gBAAgB;GAC/B;GACR,SAAS;GACA;GACT,SAAS,YAAY,QAAQ,QAAS;GACtC,OAAO;IACL;IACA;IACA;IACA;IACA,WAAW,aAAa;IACxB,GAAG,cAAc;IAClB;GACD,QAAQ,EACN,MAAM,cAAc,SACrB;GACM;GACP,GAAI;IACJ;GACM;EAGf;AAED,QAAM,cAAc;AAEpB,oBAAeH"}

package/es/Image/PreviewGroup.d.mts

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

package/es/Image/components/Toolbar.mjs

@@ -1,13 +1,12 @@
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import ActionIcon_default from "../../ActionIcon/ActionIcon.mjs";
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { FlipHorizontal, FlipVertical, RotateCcw, RotateCw, ZoomIn, ZoomOut } from "lucide-react";
 
 //#region src/Image/components/Toolbar.tsx
 const Toolbar = memo(({ children, info, minScale, maxScale }) => {
-	const { styles } = useStyles();
 	const { transform: { scale }, actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn } } = info;
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
 		className: styles.toolbar,

package/es/Image/components/Toolbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.mjs","names":["Flexbox","ActionIcon"],"sources":["../../../src/Image/components/Toolbar.tsx"],"sourcesContent":["import { FlipHorizontal, FlipVertical, RotateCcw, RotateCw, ZoomIn, ZoomOut } from 'lucide-react';\nimport type { ToolbarRenderInfoType } from 'rc-image/lib/Preview';\nimport { type ReactNode, memo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport { useStyles } from '../style';\n\nexport interface ToolbarProps {\n  children?: ReactNode;\n  info: Omit<ToolbarRenderInfoType, 'current' | 'total'>;\n  maxScale: number;\n  minScale: number;\n}\n\nconst Toolbar = memo<ToolbarProps>(({ children, info, minScale, maxScale }) => {\n  const { styles } = useStyles();\n  const {\n    transform: { scale },\n    actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },\n  } = info;\n\n  return (\n    <Flexbox className={styles.toolbar} gap={4} horizontal>\n      <ActionIcon icon={FlipHorizontal} onClick={onFlipX} />\n      <ActionIcon icon={FlipVertical} onClick={onFlipY} />\n      <ActionIcon icon={RotateCcw} onClick={onRotateLeft} />\n      <ActionIcon icon={RotateCw} onClick={onRotateRight} />\n      <ActionIcon disabled={scale === minScale} icon={ZoomOut} onClick={onZoomOut} />\n      <ActionIcon disabled={scale === maxScale} icon={ZoomIn} onClick={onZoomIn} />\n      {children}\n    </Flexbox>\n  );\n});\n\nexport default Toolbar;\n"],"mappings":";;;;;;;;AAgBA,MAAM,UAAU,MAAoB,EAAE,UAAU,MAAM,UAAU,eAAe;CAC7E,MAAM,EAAE,WAAW,WAAW;CAC9B,MAAM,EACJ,WAAW,EAAE,SACb,SAAS,EAAE,SAAS,SAAS,cAAc,eAAe,WAAW,eACnE;AAEJ,QACE,qBAACA;EAAQ,WAAW,OAAO;EAAS,KAAK;EAAG;;GAC1C,oBAACC;IAAW,MAAM;IAAgB,SAAS;KAAW;GACtD,oBAACA;IAAW,MAAM;IAAc,SAAS;KAAW;GACpD,oBAACA;IAAW,MAAM;IAAW,SAAS;KAAgB;GACtD,oBAACA;IAAW,MAAM;IAAU,SAAS;KAAiB;GACtD,oBAACA;IAAW,UAAU,UAAU;IAAU,MAAM;IAAS,SAAS;KAAa;GAC/E,oBAACA;IAAW,UAAU,UAAU;IAAU,MAAM;IAAQ,SAAS;KAAY;GAC5E;;GACO;EAEZ;AAEF,sBAAe"}
+{"version":3,"file":"Toolbar.mjs","names":["Flexbox","ActionIcon"],"sources":["../../../src/Image/components/Toolbar.tsx"],"sourcesContent":["import { FlipHorizontal, FlipVertical, RotateCcw, RotateCw, ZoomIn, ZoomOut } from 'lucide-react';\nimport type { ToolbarRenderInfoType } from 'rc-image/lib/Preview';\nimport { type ReactNode, memo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from '../style';\n\nexport interface ToolbarProps {\n  children?: ReactNode;\n  info: Omit<ToolbarRenderInfoType, 'current' | 'total'>;\n  maxScale: number;\n  minScale: number;\n}\n\nconst Toolbar = memo<ToolbarProps>(({ children, info, minScale, maxScale }) => {\n  const {\n    transform: { scale },\n    actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },\n  } = info;\n\n  return (\n    <Flexbox className={styles.toolbar} gap={4} horizontal>\n      <ActionIcon icon={FlipHorizontal} onClick={onFlipX} />\n      <ActionIcon icon={FlipVertical} onClick={onFlipY} />\n      <ActionIcon icon={RotateCcw} onClick={onRotateLeft} />\n      <ActionIcon icon={RotateCw} onClick={onRotateRight} />\n      <ActionIcon disabled={scale === minScale} icon={ZoomOut} onClick={onZoomOut} />\n      <ActionIcon disabled={scale === maxScale} icon={ZoomIn} onClick={onZoomIn} />\n      {children}\n    </Flexbox>\n  );\n});\n\nexport default Toolbar;\n"],"mappings":";;;;;;;;AAgBA,MAAM,UAAU,MAAoB,EAAE,UAAU,MAAM,UAAU,eAAe;CAC7E,MAAM,EACJ,WAAW,EAAE,SACb,SAAS,EAAE,SAAS,SAAS,cAAc,eAAe,WAAW,eACnE;AAEJ,QACE,qBAACA;EAAQ,WAAW,OAAO;EAAS,KAAK;EAAG;;GAC1C,oBAACC;IAAW,MAAM;IAAgB,SAAS;KAAW;GACtD,oBAACA;IAAW,MAAM;IAAc,SAAS;KAAW;GACpD,oBAACA;IAAW,MAAM;IAAW,SAAS;KAAgB;GACtD,oBAACA;IAAW,MAAM;IAAU,SAAS;KAAiB;GACtD,oBAACA;IAAW,UAAU,UAAU;IAAU,MAAM;IAAS,SAAS;KAAa;GAC/E,oBAACA;IAAW,UAAU,UAAU;IAAU,MAAM;IAAQ,SAAS;KAAY;GAC5E;;GACO;EAEZ;AAEF,sBAAe"}

package/es/Image/components/usePreview.mjs

@@ -1,15 +1,15 @@
 import Icon_default from "../../Icon/Icon.mjs";
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import Preview_default from "./Preview.mjs";
 import Toolbar_default from "./Toolbar.mjs";
 import { useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 import { X } from "lucide-react";
 
 //#region src/Image/components/usePreview.tsx
 const usePreview = (props) => {
 	const [visible, setVisible] = useState(false);
-	const { cx, styles } = useStyles();
 	return useMemo(() => {
 		if (props === false) return props;
 		const { onVisibleChange, onOpenChange, minScale = .32, maxScale = 32, toolbarAddon, rootClassName, imageRender, toolbarRender, actionsRender, ...rest } = props === true ? {} : props || {};

package/es/Image/components/usePreview.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePreview.mjs","names":["Toolbar","Icon","Preview"],"sources":["../../../src/Image/components/usePreview.tsx"],"sourcesContent":["import type { ImageProps as AntdImageProps } from 'antd';\nimport { X } from 'lucide-react';\nimport { useMemo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useStyles } from '../style';\nimport type { ImagePreviewOptions } from '../type';\nimport Preview from './Preview';\nimport Toolbar from './Toolbar';\n\nexport const usePreview = (\n  props: ImagePreviewOptions | boolean | undefined,\n): AntdImageProps['preview'] => {\n  const [visible, setVisible] = useState(false);\n  const { cx, styles } = useStyles();\n\n  return useMemo(() => {\n    if (props === false) return props;\n\n    const {\n      onVisibleChange,\n      onOpenChange,\n      minScale = 0.32,\n      maxScale = 32,\n      toolbarAddon,\n      rootClassName,\n      imageRender,\n      toolbarRender,\n      actionsRender,\n      ...rest\n    }: ImagePreviewOptions = (props === true ? {} : props || {}) as ImagePreviewOptions;\n\n    return {\n      actionsRender:\n        actionsRender ||\n        ((_, info) => {\n          const originalNode = (\n            <Toolbar info={info} maxScale={maxScale} minScale={minScale}>\n              {toolbarAddon}\n            </Toolbar>\n          );\n          // 向后兼容 toolbarRender\n          if (toolbarRender) return toolbarRender(originalNode, info);\n          return originalNode;\n        }),\n      closeIcon: <Icon color={'#fff'} icon={X} />,\n      imageRender: (originalNode, info) => {\n        const node = <Preview visible={visible}>{originalNode}</Preview>;\n        if (imageRender) return imageRender(node, info);\n        return node;\n      },\n      maxScale,\n      minScale,\n      onOpenChange: (open: boolean) => {\n        setVisible(open);\n        // 支持新的 onOpenChange\n        onOpenChange?.(open);\n        // 向后兼容旧的 onVisibleChange\n        onVisibleChange?.(open, !open);\n      },\n      rootClassName: cx(styles.preview, rootClassName),\n      styles: { mask: { backdropFilter: 'blur(8px)' } },\n      ...rest,\n    };\n  }, [props, visible, styles]);\n};\n\nexport default usePreview;\n"],"mappings":";;;;;;;;;AAWA,MAAa,cACX,UAC8B;CAC9B,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,EAAE,IAAI,WAAW,WAAW;AAElC,QAAO,cAAc;AACnB,MAAI,UAAU,MAAO,QAAO;EAE5B,MAAM,EACJ,iBACA,cACA,WAAW,KACX,WAAW,IACX,cACA,eACA,aACA,eACA,eACA,GAAG,SACqB,UAAU,OAAO,EAAE,GAAG,SAAS,EAAE;AAE3D,SAAO;GACL,eACE,mBACE,GAAG,SAAS;IACZ,MAAM,eACJ,oBAACA;KAAc;KAAgB;KAAoB;eAChD;MACO;AAGZ,QAAI,cAAe,QAAO,cAAc,cAAc,KAAK;AAC3D,WAAO;;GAEX,WAAW,oBAACC;IAAK,OAAO;IAAQ,MAAM;KAAK;GAC3C,cAAc,cAAc,SAAS;IACnC,MAAM,OAAO,oBAACC;KAAiB;eAAU;MAAuB;AAChE,QAAI,YAAa,QAAO,YAAY,MAAM,KAAK;AAC/C,WAAO;;GAET;GACA;GACA,eAAe,SAAkB;AAC/B,eAAW,KAAK;AAEhB,mBAAe,KAAK;AAEpB,sBAAkB,MAAM,CAAC,KAAK;;GAEhC,eAAe,GAAG,OAAO,SAAS,cAAc;GAChD,QAAQ,EAAE,MAAM,EAAE,gBAAgB,aAAa,EAAE;GACjD,GAAG;GACJ;IACA;EAAC;EAAO;EAAS;EAAO,CAAC;;AAG9B,yBAAe"}
+{"version":3,"file":"usePreview.mjs","names":["Toolbar","Icon","Preview"],"sources":["../../../src/Image/components/usePreview.tsx"],"sourcesContent":["import type { ImageProps as AntdImageProps } from 'antd';\nimport { cx } from 'antd-style';\nimport { X } from 'lucide-react';\nimport { useMemo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { styles } from '../style';\nimport type { ImagePreviewOptions } from '../type';\nimport Preview from './Preview';\nimport Toolbar from './Toolbar';\n\nexport const usePreview = (\n  props: ImagePreviewOptions | boolean | undefined,\n): AntdImageProps['preview'] => {\n  const [visible, setVisible] = useState(false);\n\n  return useMemo(() => {\n    if (props === false) return props;\n\n    const {\n      onVisibleChange,\n      onOpenChange,\n      minScale = 0.32,\n      maxScale = 32,\n      toolbarAddon,\n      rootClassName,\n      imageRender,\n      toolbarRender,\n      actionsRender,\n      ...rest\n    }: ImagePreviewOptions = (props === true ? {} : props || {}) as ImagePreviewOptions;\n\n    return {\n      actionsRender:\n        actionsRender ||\n        ((_, info) => {\n          const originalNode = (\n            <Toolbar info={info} maxScale={maxScale} minScale={minScale}>\n              {toolbarAddon}\n            </Toolbar>\n          );\n          // 向后兼容 toolbarRender\n          if (toolbarRender) return toolbarRender(originalNode, info);\n          return originalNode;\n        }),\n      closeIcon: <Icon color={'#fff'} icon={X} />,\n      imageRender: (originalNode, info) => {\n        const node = <Preview visible={visible}>{originalNode}</Preview>;\n        if (imageRender) return imageRender(node, info);\n        return node;\n      },\n      maxScale,\n      minScale,\n      onOpenChange: (open: boolean) => {\n        setVisible(open);\n        // 支持新的 onOpenChange\n        onOpenChange?.(open);\n        // 向后兼容旧的 onVisibleChange\n        onVisibleChange?.(open, !open);\n      },\n      rootClassName: cx(styles.preview, rootClassName),\n      styles: { mask: { backdropFilter: 'blur(8px)' } },\n      ...rest,\n    };\n  }, [props, visible, styles]);\n};\n\nexport default usePreview;\n"],"mappings":";;;;;;;;;;AAYA,MAAa,cACX,UAC8B;CAC9B,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAE7C,QAAO,cAAc;AACnB,MAAI,UAAU,MAAO,QAAO;EAE5B,MAAM,EACJ,iBACA,cACA,WAAW,KACX,WAAW,IACX,cACA,eACA,aACA,eACA,eACA,GAAG,SACqB,UAAU,OAAO,EAAE,GAAG,SAAS,EAAE;AAE3D,SAAO;GACL,eACE,mBACE,GAAG,SAAS;IACZ,MAAM,eACJ,oBAACA;KAAc;KAAgB;KAAoB;eAChD;MACO;AAGZ,QAAI,cAAe,QAAO,cAAc,cAAc,KAAK;AAC3D,WAAO;;GAEX,WAAW,oBAACC;IAAK,OAAO;IAAQ,MAAM;KAAK;GAC3C,cAAc,cAAc,SAAS;IACnC,MAAM,OAAO,oBAACC;KAAiB;eAAU;MAAuB;AAChE,QAAI,YAAa,QAAO,YAAY,MAAM,KAAK;AAC/C,WAAO;;GAET;GACA;GACA,eAAe,SAAkB;AAC/B,eAAW,KAAK;AAEhB,mBAAe,KAAK;AAEpB,sBAAkB,MAAM,CAAC,KAAK;;GAEhC,eAAe,GAAG,OAAO,SAAS,cAAc;GAChD,QAAQ,EAAE,MAAM,EAAE,gBAAgB,aAAa,EAAE;GACjD,GAAG;GACJ;IACA;EAAC;EAAO;EAAS;EAAO,CAAC;;AAG9B,yBAAe"}

package/es/Image/components/usePreviewGroup.mjs

@@ -1,15 +1,15 @@
 import Icon_default from "../../Icon/Icon.mjs";
-import { useStyles } from "../style.mjs";
+import { styles } from "../style.mjs";
 import Preview_default from "./Preview.mjs";
 import Toolbar_default from "./Toolbar.mjs";
 import { useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+import { cx } from "antd-style";
 import { X } from "lucide-react";
 
 //#region src/Image/components/usePreviewGroup.tsx
 const usePreview = (props) => {
 	const [visible, setVisible] = useState(false);
-	const { cx, styles: componentStyles } = useStyles();
 	return useMemo(() => {
 		if (props === false) return props;
 		const { onVisibleChange, onOpenChange, minScale = .32, maxScale = 32, toolbarAddon, rootClassName, imageRender, toolbarRender, ...rest } = props === true ? {} : props || {};
@@ -24,7 +24,7 @@ const usePreview = (props) => {
 				if (toolbarRender) return toolbarRender(originalNode, info);
 				return originalNode;
 			},
-			classNames: { root: cx(componentStyles.preview, rootClassName) },
+			classNames: { root: cx(styles.preview, rootClassName) },
 			closeIcon: /* @__PURE__ */ jsx(Icon_default, {
 				color: "#fff",
 				icon: X
@@ -49,7 +49,7 @@ const usePreview = (props) => {
 	}, [
 		props,
 		visible,
-		componentStyles
+		styles
 	]);
 };
 var usePreviewGroup_default = usePreview;

package/es/Image/components/usePreviewGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"usePreviewGroup.mjs","names":["Toolbar","Icon","Preview"],"sources":["../../../src/Image/components/usePreviewGroup.tsx"],"sourcesContent":["import type { GroupPreviewConfig } from 'antd/es/image/PreviewGroup';\nimport { X } from 'lucide-react';\nimport { useMemo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { useStyles } from '../style';\nimport type { PreviewGroupPreviewOptions } from '../type';\nimport Preview from './Preview';\nimport Toolbar from './Toolbar';\n\nexport const usePreview = (\n  props: PreviewGroupPreviewOptions | boolean | undefined,\n): GroupPreviewConfig | boolean => {\n  const [visible, setVisible] = useState(false);\n  const { cx, styles: componentStyles } = useStyles();\n\n  return useMemo(() => {\n    if (props === false) return props;\n\n    const {\n      onVisibleChange,\n      onOpenChange,\n      minScale = 0.32,\n      maxScale = 32,\n      toolbarAddon,\n      rootClassName,\n      imageRender,\n      toolbarRender,\n      ...rest\n    }: PreviewGroupPreviewOptions = (\n      props === true ? {} : props || {}\n    ) as PreviewGroupPreviewOptions;\n\n    return {\n      actionsRender: (_, info) => {\n        const originalNode = (\n          <Toolbar info={info} maxScale={maxScale} minScale={minScale}>\n            {toolbarAddon}\n          </Toolbar>\n        );\n        if (toolbarRender) return toolbarRender(originalNode, info);\n        return originalNode;\n      },\n      classNames: {\n        root: cx(componentStyles.preview, rootClassName),\n      },\n      closeIcon: <Icon color={'#fff'} icon={X} />,\n      imageRender: (originalNode, info) => {\n        const node = <Preview visible={visible}>{originalNode}</Preview>;\n        if (imageRender) return imageRender(node, info);\n        return node;\n      },\n      maxScale,\n      minScale,\n      onOpenChange: (open: boolean, info: { current: number }) => {\n        setVisible(open);\n        // 支持新的 onOpenChange\n        onOpenChange?.(open, info);\n        // 向后兼容旧的 onVisibleChange (注意参数差异)\n        onVisibleChange?.(open, !open, info.current);\n      },\n      ...rest,\n    };\n  }, [props, visible, componentStyles]);\n};\n\nexport default usePreview;\n"],"mappings":";;;;;;;;;AAWA,MAAa,cACX,UACiC;CACjC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;CAC7C,MAAM,EAAE,IAAI,QAAQ,oBAAoB,WAAW;AAEnD,QAAO,cAAc;AACnB,MAAI,UAAU,MAAO,QAAO;EAE5B,MAAM,EACJ,iBACA,cACA,WAAW,KACX,WAAW,IACX,cACA,eACA,aACA,eACA,GAAG,SAEH,UAAU,OAAO,EAAE,GAAG,SAAS,EAAE;AAGnC,SAAO;GACL,gBAAgB,GAAG,SAAS;IAC1B,MAAM,eACJ,oBAACA;KAAc;KAAgB;KAAoB;eAChD;MACO;AAEZ,QAAI,cAAe,QAAO,cAAc,cAAc,KAAK;AAC3D,WAAO;;GAET,YAAY,EACV,MAAM,GAAG,gBAAgB,SAAS,cAAc,EACjD;GACD,WAAW,oBAACC;IAAK,OAAO;IAAQ,MAAM;KAAK;GAC3C,cAAc,cAAc,SAAS;IACnC,MAAM,OAAO,oBAACC;KAAiB;eAAU;MAAuB;AAChE,QAAI,YAAa,QAAO,YAAY,MAAM,KAAK;AAC/C,WAAO;;GAET;GACA;GACA,eAAe,MAAe,SAA8B;AAC1D,eAAW,KAAK;AAEhB,mBAAe,MAAM,KAAK;AAE1B,sBAAkB,MAAM,CAAC,MAAM,KAAK,QAAQ;;GAE9C,GAAG;GACJ;IACA;EAAC;EAAO;EAAS;EAAgB,CAAC;;AAGvC,8BAAe"}
+{"version":3,"file":"usePreviewGroup.mjs","names":["Toolbar","componentStyles","Icon","Preview"],"sources":["../../../src/Image/components/usePreviewGroup.tsx"],"sourcesContent":["import { cx } from 'antd-style';\nimport type { GroupPreviewConfig } from 'antd/es/image/PreviewGroup';\nimport { X } from 'lucide-react';\nimport { useMemo, useState } from 'react';\n\nimport Icon from '@/Icon';\n\nimport { styles as componentStyles } from '../style';\nimport type { PreviewGroupPreviewOptions } from '../type';\nimport Preview from './Preview';\nimport Toolbar from './Toolbar';\n\nexport const usePreview = (\n  props: PreviewGroupPreviewOptions | boolean | undefined,\n): GroupPreviewConfig | boolean => {\n  const [visible, setVisible] = useState(false);\n\n  return useMemo(() => {\n    if (props === false) return props;\n\n    const {\n      onVisibleChange,\n      onOpenChange,\n      minScale = 0.32,\n      maxScale = 32,\n      toolbarAddon,\n      rootClassName,\n      imageRender,\n      toolbarRender,\n      ...rest\n    }: PreviewGroupPreviewOptions = (\n      props === true ? {} : props || {}\n    ) as PreviewGroupPreviewOptions;\n\n    return {\n      actionsRender: (_, info) => {\n        const originalNode = (\n          <Toolbar info={info} maxScale={maxScale} minScale={minScale}>\n            {toolbarAddon}\n          </Toolbar>\n        );\n        if (toolbarRender) return toolbarRender(originalNode, info);\n        return originalNode;\n      },\n      classNames: {\n        root: cx(componentStyles.preview, rootClassName),\n      },\n      closeIcon: <Icon color={'#fff'} icon={X} />,\n      imageRender: (originalNode, info) => {\n        const node = <Preview visible={visible}>{originalNode}</Preview>;\n        if (imageRender) return imageRender(node, info);\n        return node;\n      },\n      maxScale,\n      minScale,\n      onOpenChange: (open: boolean, info: { current: number }) => {\n        setVisible(open);\n        // 支持新的 onOpenChange\n        onOpenChange?.(open, info);\n        // 向后兼容旧的 onVisibleChange (注意参数差异)\n        onVisibleChange?.(open, !open, info.current);\n      },\n      ...rest,\n    };\n  }, [props, visible, componentStyles]);\n};\n\nexport default usePreview;\n"],"mappings":";;;;;;;;;;AAYA,MAAa,cACX,UACiC;CACjC,MAAM,CAAC,SAAS,cAAc,SAAS,MAAM;AAE7C,QAAO,cAAc;AACnB,MAAI,UAAU,MAAO,QAAO;EAE5B,MAAM,EACJ,iBACA,cACA,WAAW,KACX,WAAW,IACX,cACA,eACA,aACA,eACA,GAAG,SAEH,UAAU,OAAO,EAAE,GAAG,SAAS,EAAE;AAGnC,SAAO;GACL,gBAAgB,GAAG,SAAS;IAC1B,MAAM,eACJ,oBAACA;KAAc;KAAgB;KAAoB;eAChD;MACO;AAEZ,QAAI,cAAe,QAAO,cAAc,cAAc,KAAK;AAC3D,WAAO;;GAET,YAAY,EACV,MAAM,GAAGC,OAAgB,SAAS,cAAc,EACjD;GACD,WAAW,oBAACC;IAAK,OAAO;IAAQ,MAAM;KAAK;GAC3C,cAAc,cAAc,SAAS;IACnC,MAAM,OAAO,oBAACC;KAAiB;eAAU;MAAuB;AAChE,QAAI,YAAa,QAAO,YAAY,MAAM,KAAK;AAC/C,WAAO;;GAET;GACA;GACA,eAAe,MAAe,SAA8B;AAC1D,eAAW,KAAK;AAEhB,mBAAe,MAAM,KAAK;AAE1B,sBAAkB,MAAM,CAAC,MAAM,KAAK,QAAQ;;GAE9C,GAAG;GACJ;IACA;EAAC;EAAO;EAASF;EAAgB,CAAC;;AAGvC,8BAAe"}