@lobehub/ui 5.2.2 → 5.4.0

package/es/HotkeyInput/HotkeyInput.mjs

@@ -12,11 +12,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cx, useThemeMode } from "antd-style";
 import useMergeState from "use-merge-value";
 import { isEqual } from "es-toolkit/compat";
-import { Undo2Icon } from "lucide-react";
+import { Undo2Icon, XIcon } from "lucide-react";
 import { useHotkeys, useRecordHotkeys } from "react-hotkeys-hook";
 
 //#region src/HotkeyInput/HotkeyInput.tsx
-const HotkeyInput = memo(({ value = "", defaultValue = "", resetValue = "", onChange, onConflict, placeholder, disabled, shadow, allowReset = true, style, className, hotkeyConflicts = [], variant, texts, isApple, onBlur, onReset, onFocus }) => {
+const HotkeyInput = memo(({ value = "", defaultValue = "", resetValue = "", onChange, onClear, onConflict, placeholder, disabled, shadow, allowClear, allowReset = true, style, className, hotkeyConflicts = [], variant, texts, isApple, onBlur, onReset, onFocus }) => {
 	const [isFocused, setIsFocused] = useState(false);
 	const [hasConflict, setHasConflict] = useState(false);
 	const [hasInvalidCombination, setHasInvalidCombination] = useState(false);
@@ -106,6 +106,17 @@ const HotkeyInput = memo(({ value = "", defaultValue = "", resetValue = "", onCh
 		stop();
 		onBlur?.(e);
 	};
+	const handleClear = (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setHotkeyValue?.("");
+		resetKeys();
+		setHasConflict(false);
+		setHasInvalidCombination(false);
+		setIsFocused(false);
+		stop();
+		onClear?.(hotkeyValue);
+	};
 	const handleReset = (e) => {
 		e.preventDefault();
 		e.stopPropagation();
@@ -125,6 +136,7 @@ const HotkeyInput = memo(({ value = "", defaultValue = "", resetValue = "", onCh
 	};
 	const placeholderText = placeholder ?? t("hotkey.placeholder");
 	const resetTitle = texts?.reset ?? t("hotkey.reset");
+	const clearTitle = texts?.clear ?? t("hotkey.clear");
 	const conflictText = texts?.conflicts ?? t("hotkey.conflict");
 	const invalidText = texts?.invalidCombination ?? t("hotkey.invalidCombination");
 	return /* @__PURE__ */ jsxs(FlexBasic_default, {
@@ -167,12 +179,22 @@ const HotkeyInput = memo(({ value = "", defaultValue = "", resetValue = "", onCh
 						onBlur: handleBlur,
 						onFocus: handleFocus
 					}),
-					!isFocused && allowReset && hotkeyValue && hotkeyValue !== resetValue && !disabled && /* @__PURE__ */ jsx(ActionIcon_default, {
-						icon: Undo2Icon,
-						size: "small",
-						title: resetTitle,
-						variant: "filled",
-						onClick: handleReset
+					!isFocused && hotkeyValue && !disabled && (allowReset || allowClear) && /* @__PURE__ */ jsxs(FlexBasic_default, {
+						horizontal: true,
+						gap: 4,
+						children: [allowReset && hotkeyValue !== resetValue && /* @__PURE__ */ jsx(ActionIcon_default, {
+							icon: Undo2Icon,
+							size: "small",
+							title: resetTitle,
+							variant: "filled",
+							onClick: handleReset
+						}), allowClear && /* @__PURE__ */ jsx(ActionIcon_default, {
+							icon: XIcon,
+							size: "small",
+							title: clearTitle,
+							variant: "filled",
+							onClick: handleClear
+						})]
 					})
 				]
 			}),

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 { cx, useThemeMode } from 'antd-style';\nimport { isEqual } from 'es-toolkit/compat';\nimport { Undo2Icon } from 'lucide-react';\nimport {\n  type FocusEvent,\n  memo,\n  type MouseEvent,\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 { checkIsAppleDevice, NORMATIVE_MODIFIER, 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          horizontal\n          align={'center'}\n          justify={'space-between'}\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          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            readOnly\n            className={styles.hiddenInput}\n            disabled={disabled}\n            ref={inputRef as any}\n            style={{ pointerEvents: 'none' }}\n            onBlur={handleBlur}\n            onFocus={handleFocus}\n          />\n\n          {!isFocused && allowReset && hotkeyValue && hotkeyValue !== resetValue && !disabled && (\n            <ActionIcon\n              icon={Undo2Icon}\n              size={'small'}\n              title={resetTitle}\n              variant={'filled'}\n              onClick={handleReset}\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, XIcon } from 'lucide-react';\nimport {\n  type FocusEvent,\n  memo,\n  type MouseEvent,\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 { checkIsAppleDevice, NORMATIVE_MODIFIER, 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    onClear,\n    onConflict,\n    placeholder,\n    disabled,\n    shadow,\n    allowClear,\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    const handleClear = (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      setHotkeyValue?.('');\n      resetKeys();\n      setHasConflict(false);\n      setHasInvalidCombination(false);\n      setIsFocused(false);\n      stop();\n      onClear?.(hotkeyValue);\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 clearTitle = texts?.clear ?? t('hotkey.clear');\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          horizontal\n          align={'center'}\n          justify={'space-between'}\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          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            readOnly\n            className={styles.hiddenInput}\n            disabled={disabled}\n            ref={inputRef as any}\n            style={{ pointerEvents: 'none' }}\n            onBlur={handleBlur}\n            onFocus={handleFocus}\n          />\n\n          {!isFocused && hotkeyValue && !disabled && (allowReset || allowClear) && (\n            <Flexbox horizontal gap={4}>\n              {allowReset && hotkeyValue !== resetValue && (\n                <ActionIcon\n                  icon={Undo2Icon}\n                  size={'small'}\n                  title={resetTitle}\n                  variant={'filled'}\n                  onClick={handleReset}\n                />\n              )}\n              {allowClear && (\n                <ActionIcon\n                  icon={XIcon}\n                  size={'small'}\n                  title={clearTitle}\n                  variant={'filled'}\n                  onClick={handleClear}\n                />\n              )}\n            </Flexbox>\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/type.d.mts

@@ -3,6 +3,7 @@ import { InputProps } from "antd";
 
 //#region src/HotkeyInput/type.d.ts
 interface HotkeyInputProps {
+  allowClear?: boolean;
   allowReset?: boolean;
   className?: string;
   defaultValue?: string;
@@ -11,6 +12,7 @@ interface HotkeyInputProps {
   isApple?: boolean;
   onBlur?: InputProps['onBlur'];
   onChange?: (value: string) => void;
+  onClear?: (currentValue: string) => void;
   onConflict?: (conflictKey: string) => void;
   onFocus?: InputProps['onFocus'];
   onReset?: (currentValue: string, resetValue: string) => void;
@@ -19,6 +21,7 @@ interface HotkeyInputProps {
   shadow?: boolean;
   style?: CSSProperties;
   texts?: {
+    clear?: string;
     conflicts?: string;
     invalidCombination?: string;
     reset?: string;

package/es/Icon/Icon.d.mts

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

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

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

package/es/Image/Image.mjs

@@ -12,7 +12,7 @@ import { cssVar, cx, useThemeMode } from "antd-style";
 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 { isDarkMode } = useThemeMode();
 	const actionsClassName = alwaysShowActions ? styles.actionsVisible : styles.actionsHidden;
-	const mergePreivew = usePreview_default(preview);
+	const mergePreview = usePreview_default(preview);
 	if (isLoading) return /* @__PURE__ */ jsx("div", {
 		onClick,
 		children: /* @__PURE__ */ jsx(Skeleton.Avatar, {
@@ -40,7 +40,7 @@ const Image$1 = memo(({ ref, style, preview, isLoading, maxHeight = "100%", maxW
 			fallback: isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT,
 			height,
 			loading: "lazy",
-			preview: preview === false ? false : mergePreivew,
+			preview: preview === false ? false : mergePreview,
 			width,
 			classNames: { root: cx(styles.wrapper, classNames?.wrapper) },
 			style: {

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 { 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          fallback={isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT}\n          height={height}\n          loading={'lazy'}\n          preview={preview === false ? false : (mergePreivew as any)}\n          width={width}\n          classNames={{\n            root: cx(styles.wrapper, classNames?.wrapper),\n          }}\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          onClick={onClick}\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,UAAU,aAAa,gBAAgB;GAC/B;GACR,SAAS;GACT,SAAS,YAAY,QAAQ,QAAS;GAC/B;GACP,YAAY,EACV,MAAM,GAAG,OAAO,SAAS,YAAY,QAAQ,EAC9C;GACD,OAAO;IACL;IACA;IACA;IACA;IACA,WAAW,aAAa;IACxB,GAAG,cAAc;IAClB;GACD,QAAQ,EACN,MAAM,cAAc,SACrB;GACQ;GACT,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 mergePreview = 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          fallback={isDarkMode ? FALLBACK_DARK : FALLBACK_LIGHT}\n          height={height}\n          loading={'lazy'}\n          preview={preview === false ? false : (mergePreview as any)}\n          width={width}\n          classNames={{\n            root: cx(styles.wrapper, classNames?.wrapper),\n          }}\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          onClick={onClick}\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,UAAU,aAAa,gBAAgB;GAC/B;GACR,SAAS;GACT,SAAS,YAAY,QAAQ,QAAS;GAC/B;GACP,YAAY,EACV,MAAM,GAAG,OAAO,SAAS,YAAY,QAAQ,EAC9C;GACD,OAAO;IACL;IACA;IACA;IACA;IACA,WAAW,aAAa;IACxB,GAAG,cAAc;IAClB;GACD,QAAQ,EACN,MAAM,cAAc,SACrB;GACQ;GACT,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 react58 from "react";
+import * as react35 from "react";
 
 //#region src/Image/PreviewGroup.d.ts
-declare const PreviewGroup: react58.NamedExoticComponent<PreviewGroupProps>;
+declare const PreviewGroup: react35.NamedExoticComponent<PreviewGroupProps>;
 //#endregion
 export { PreviewGroup };
 //# sourceMappingURL=PreviewGroup.d.mts.map

package/es/Image/components/Toolbar.mjs

@@ -1,46 +1,126 @@
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
+import TooltipGroup_default from "../../Tooltip/TooltipGroup.mjs";
 import ActionIcon_default from "../../ActionIcon/ActionIcon.mjs";
+import { useTranslation } from "../../i18n/useTranslation.mjs";
+import { downloadBlob } from "../../utils/downloadBlob.mjs";
 import { styles } from "../style.mjs";
-import { memo } from "react";
+import image_default from "../../i18n/resources/en/image.mjs";
+import { getClipboardBlob } from "../../utils/blobToPng.mjs";
+import { memo, useCallback, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { FlipHorizontal, FlipVertical, RotateCcw, RotateCw, ZoomIn, ZoomOut } from "lucide-react";
+import { message } from "antd";
+import { Copy, Download, FlipHorizontal, FlipVertical, RotateCcw, RotateCw, ZoomIn, ZoomOut } from "lucide-react";
 
 //#region src/Image/components/Toolbar.tsx
+const getFileNameFromUrl = (url) => {
+	try {
+		const match = new URL(url).pathname.match(/\/([^/]+)$/);
+		return match ? decodeURIComponent(match[1]) : "image";
+	} catch {
+		return "image";
+	}
+};
+const getExtensionFromMimeType = (mimeType) => {
+	return {
+		"image/svg+xml": "svg",
+		"image/png": "png",
+		"image/jpeg": "jpg",
+		"image/jpg": "jpg",
+		"image/webp": "webp",
+		"image/gif": "gif"
+	}[mimeType?.toLowerCase()] || mimeType?.split("/")[1]?.split("+")[0] || "png";
+};
 const Toolbar = memo(({ children, info, minScale, maxScale }) => {
-	const { transform: { scale }, actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn } } = info;
-	return /* @__PURE__ */ jsxs(FlexBasic_default, {
-		horizontal: true,
-		className: styles.toolbar,
-		gap: 4,
-		children: [
-			/* @__PURE__ */ jsx(ActionIcon_default, {
-				icon: FlipHorizontal,
-				onClick: onFlipX
-			}),
-			/* @__PURE__ */ jsx(ActionIcon_default, {
-				icon: FlipVertical,
-				onClick: onFlipY
-			}),
-			/* @__PURE__ */ jsx(ActionIcon_default, {
-				icon: RotateCcw,
-				onClick: onRotateLeft
-			}),
-			/* @__PURE__ */ jsx(ActionIcon_default, {
-				icon: RotateCw,
-				onClick: onRotateRight
-			}),
-			/* @__PURE__ */ jsx(ActionIcon_default, {
-				disabled: scale === minScale,
-				icon: ZoomOut,
-				onClick: onZoomOut
-			}),
-			/* @__PURE__ */ jsx(ActionIcon_default, {
-				disabled: scale === maxScale,
-				icon: ZoomIn,
-				onClick: onZoomIn
-			}),
-			children
-		]
+	const { t } = useTranslation(image_default);
+	const [containerEl, setContainerEl] = useState(null);
+	const [copyLoading, setCopyLoading] = useState(false);
+	const [downloadLoading, setDownloadLoading] = useState(false);
+	const { transform: { scale }, actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn }, image: { url } } = info;
+	const handleDownload = useCallback(async () => {
+		setDownloadLoading(true);
+		try {
+			const blob = await (await fetch(url, { mode: "cors" })).blob();
+			const blobUrl = URL.createObjectURL(blob);
+			let fileName = getFileNameFromUrl(url);
+			const ext = getExtensionFromMimeType(blob.type);
+			if (!fileName.includes(".")) fileName = `${fileName}.${ext}`;
+			else if (fileName.endsWith(".svg+xml")) fileName = fileName.replace(/\.svg\+xml$/i, ".svg");
+			await downloadBlob(blobUrl, fileName);
+			URL.revokeObjectURL(blobUrl);
+			message.success(t("image.downloadSuccess"));
+		} catch {
+			message.error(t("image.downloadFailed"));
+		} finally {
+			setDownloadLoading(false);
+		}
+	}, [url, t]);
+	const handleCopy = useCallback(async () => {
+		setCopyLoading(true);
+		try {
+			const clipboardBlob = await getClipboardBlob(await (await fetch(url, { mode: "cors" })).blob());
+			await navigator.clipboard.write([new ClipboardItem(clipboardBlob)]);
+			message.success(t("image.copySuccess"));
+		} catch {
+			message.error(t("image.copyFailed"));
+		} finally {
+			setCopyLoading(false);
+		}
+	}, [url, t]);
+	return /* @__PURE__ */ jsx(TooltipGroup_default, {
+		popupContainer: containerEl ?? void 0,
+		children: /* @__PURE__ */ jsxs(FlexBasic_default, {
+			horizontal: true,
+			className: styles.toolbar,
+			gap: 4,
+			ref: setContainerEl,
+			children: [
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					icon: FlipHorizontal,
+					title: t("image.flipHorizontal"),
+					onClick: onFlipX
+				}),
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					icon: FlipVertical,
+					title: t("image.flipVertical"),
+					onClick: onFlipY
+				}),
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					icon: RotateCcw,
+					title: t("image.rotateLeft"),
+					onClick: onRotateLeft
+				}),
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					icon: RotateCw,
+					title: t("image.rotateRight"),
+					onClick: onRotateRight
+				}),
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					disabled: scale === minScale,
+					icon: ZoomOut,
+					title: t("image.zoomOut"),
+					onClick: onZoomOut
+				}),
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					disabled: scale === maxScale,
+					icon: ZoomIn,
+					title: t("image.zoomIn"),
+					onClick: onZoomIn
+				}),
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					icon: Copy,
+					loading: copyLoading,
+					title: t("image.copy"),
+					onClick: handleCopy
+				}),
+				/* @__PURE__ */ jsx(ActionIcon_default, {
+					icon: Download,
+					loading: downloadLoading,
+					title: t("image.download"),
+					onClick: handleDownload
+				}),
+				children
+			]
+		})
 	});
 });
 var Toolbar_default = 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 { memo, type ReactNode } 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 horizontal className={styles.toolbar} gap={4}>\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;EAAW,WAAW,OAAO;EAAS,KAAK;;GAClD,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":["imageMessages","TooltipGroup","Flexbox","ActionIcon"],"sources":["../../../src/Image/components/Toolbar.tsx"],"sourcesContent":["import { message } from 'antd';\nimport {\n  Copy,\n  Download,\n  FlipHorizontal,\n  FlipVertical,\n  RotateCcw,\n  RotateCw,\n  ZoomIn,\n  ZoomOut,\n} from 'lucide-react';\nimport { type ToolbarRenderInfoType } from 'rc-image/lib/Preview';\nimport { memo, type ReactNode, useCallback, useState } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\nimport imageMessages from '@/i18n/resources/en/image';\nimport { useTranslation } from '@/i18n/useTranslation';\nimport { TooltipGroup } from '@/Tooltip';\nimport { getClipboardBlob } from '@/utils/blobToPng';\nimport { downloadBlob } from '@/utils/downloadBlob';\n\nimport { styles } from '../style';\n\nconst getFileNameFromUrl = (url: string): string => {\n  try {\n    const pathname = new URL(url).pathname;\n    const match = pathname.match(/\\/([^/]+)$/);\n    return match ? decodeURIComponent(match[1]) : 'image';\n  } catch {\n    return 'image';\n  }\n};\n\nconst getExtensionFromMimeType = (mimeType: string): string => {\n  const map: Record<string, string> = {\n    'image/svg+xml': 'svg',\n    'image/png': 'png',\n    'image/jpeg': 'jpg',\n    'image/jpg': 'jpg',\n    'image/webp': 'webp',\n    'image/gif': 'gif',\n  };\n  return map[mimeType?.toLowerCase()] || mimeType?.split('/')[1]?.split('+')[0] || 'png';\n};\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 { t } = useTranslation(imageMessages);\n  const [containerEl, setContainerEl] = useState<HTMLElement | null>(null);\n  const [copyLoading, setCopyLoading] = useState(false);\n  const [downloadLoading, setDownloadLoading] = useState(false);\n  const {\n    transform: { scale },\n    actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },\n    image: { url },\n  } = info;\n\n  const handleDownload = useCallback(async () => {\n    setDownloadLoading(true);\n    try {\n      const response = await fetch(url, { mode: 'cors' });\n      const blob = await response.blob();\n      const blobUrl = URL.createObjectURL(blob);\n      let fileName = getFileNameFromUrl(url);\n      const ext = getExtensionFromMimeType(blob.type);\n      if (!fileName.includes('.')) {\n        fileName = `${fileName}.${ext}`;\n      } else if (fileName.endsWith('.svg+xml')) {\n        fileName = fileName.replace(/\\.svg\\+xml$/i, '.svg');\n      }\n      await downloadBlob(blobUrl, fileName);\n      URL.revokeObjectURL(blobUrl);\n      message.success(t('image.downloadSuccess'));\n    } catch {\n      message.error(t('image.downloadFailed'));\n    } finally {\n      setDownloadLoading(false);\n    }\n  }, [url, t]);\n\n  const handleCopy = useCallback(async () => {\n    setCopyLoading(true);\n    try {\n      const response = await fetch(url, { mode: 'cors' });\n      const blob = await response.blob();\n      const clipboardBlob = await getClipboardBlob(blob);\n      await navigator.clipboard.write([new ClipboardItem(clipboardBlob)]);\n      message.success(t('image.copySuccess'));\n    } catch {\n      message.error(t('image.copyFailed'));\n    } finally {\n      setCopyLoading(false);\n    }\n  }, [url, t]);\n\n  return (\n    <TooltipGroup popupContainer={containerEl ?? undefined}>\n      <Flexbox horizontal className={styles.toolbar} gap={4} ref={setContainerEl}>\n        <ActionIcon icon={FlipHorizontal} title={t('image.flipHorizontal')} onClick={onFlipX} />\n        <ActionIcon icon={FlipVertical} title={t('image.flipVertical')} onClick={onFlipY} />\n        <ActionIcon icon={RotateCcw} title={t('image.rotateLeft')} onClick={onRotateLeft} />\n        <ActionIcon icon={RotateCw} title={t('image.rotateRight')} onClick={onRotateRight} />\n        <ActionIcon\n          disabled={scale === minScale}\n          icon={ZoomOut}\n          title={t('image.zoomOut')}\n          onClick={onZoomOut}\n        />\n        <ActionIcon\n          disabled={scale === maxScale}\n          icon={ZoomIn}\n          title={t('image.zoomIn')}\n          onClick={onZoomIn}\n        />\n        <ActionIcon\n          icon={Copy}\n          loading={copyLoading}\n          title={t('image.copy')}\n          onClick={handleCopy}\n        />\n        <ActionIcon\n          icon={Download}\n          loading={downloadLoading}\n          title={t('image.download')}\n          onClick={handleDownload}\n        />\n        {children}\n      </Flexbox>\n    </TooltipGroup>\n  );\n});\n\nexport default Toolbar;\n"],"mappings":"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"}

package/es/Input/Input.d.mts

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

package/es/Input/InputOPT.d.mts

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

package/es/Input/InputPassword.d.mts

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

package/es/Input/TextArea.d.mts

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

package/es/Layout/components/LayoutFooter.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
 import "../../index.mjs";
-import * as react63 from "react";
+import * as react28 from "react";
 
 //#region src/Layout/components/LayoutFooter.d.ts
-declare const LayoutFooter: react63.NamedExoticComponent<DivProps>;
+declare const LayoutFooter: react28.NamedExoticComponent<DivProps>;
 //#endregion
 export { LayoutFooter };
 //# sourceMappingURL=LayoutFooter.d.mts.map

package/es/Layout/components/LayoutHeader.d.mts

@@ -1,8 +1,8 @@
 import { LayoutHeaderProps } from "../type.mjs";
-import * as react64 from "react";
+import * as react29 from "react";
 
 //#region src/Layout/components/LayoutHeader.d.ts
-declare const LayoutHeader: react64.NamedExoticComponent<LayoutHeaderProps>;
+declare const LayoutHeader: react29.NamedExoticComponent<LayoutHeaderProps>;
 //#endregion
 export { LayoutHeader };
 //# sourceMappingURL=LayoutHeader.d.mts.map

package/es/Layout/components/LayoutMain.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
 import "../../index.mjs";
-import * as react59 from "react";
+import * as react30 from "react";
 
 //#region src/Layout/components/LayoutMain.d.ts
-declare const LayoutMain: react59.NamedExoticComponent<DivProps>;
+declare const LayoutMain: react30.NamedExoticComponent<DivProps>;
 //#endregion
 export { LayoutMain };
 //# sourceMappingURL=LayoutMain.d.mts.map

package/es/Layout/components/LayoutSidebar.d.mts

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

package/es/Layout/components/LayoutSidebarInner.d.mts

@@ -1,8 +1,8 @@
 import { LayoutSidebarInnerProps } from "../type.mjs";
-import * as react61 from "react";
+import * as react32 from "react";
 
 //#region src/Layout/components/LayoutSidebarInner.d.ts
-declare const LayoutSidebarInner: react61.NamedExoticComponent<LayoutSidebarInnerProps>;
+declare const LayoutSidebarInner: react32.NamedExoticComponent<LayoutSidebarInnerProps>;
 //#endregion
 export { LayoutSidebarInner };
 //# sourceMappingURL=LayoutSidebarInner.d.mts.map

package/es/Layout/components/LayoutToc.d.mts

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

package/es/List/ListItem/index.d.mts

@@ -1,8 +1,8 @@
 import { ListItemProps } from "../type.mjs";
-import * as react72 from "react";
+import * as react27 from "react";
 
 //#region src/List/ListItem/index.d.ts
-declare const ListItem: react72.NamedExoticComponent<ListItemProps>;
+declare const ListItem: react27.NamedExoticComponent<ListItemProps>;
 //#endregion
 export { ListItem };
 //# sourceMappingURL=index.d.mts.map

package/es/Markdown/Markdown.d.mts

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

package/es/Markdown/Markdown.mjs

@@ -13,7 +13,7 @@ import { cx } from "antd-style";
 
 //#region src/Markdown/Markdown.tsx
 const Markdown = memo((props) => {
-	const { ref, children = "", className, style, fullFeaturedCodeBlock, onDoubleClick, animated, enableLatex = true, enableMermaid = true, enableImageGallery, enableCustomFootnotes, enableGithubAlert, enableStream = true, componentProps, rehypePluginsAhead, allowHtml, borderRadius, fontSize = props.variant === "chat" ? 14 : void 0, headerMultiple = props.variant === "chat" ? .25 : void 0, marginMultiple = props.variant === "chat" ? 1 : void 0, variant = "default", reactMarkdownProps, lineHeight = props.variant === "chat" ? 1.6 : void 0, rehypePlugins, remarkPlugins, remarkPluginsAhead, components = {}, customRender, showFootnotes = true, citations, ...rest } = props;
+	const { ref, children = "", className, style, fullFeaturedCodeBlock, onDoubleClick, animated, enableLatex = true, enableMermaid = true, enableImageGallery, enableCustomFootnotes, enableGithubAlert, enableStream = true, componentProps, rehypePluginsAhead, allowHtml, borderRadius, fontSize = props.variant === "chat" ? 14 : void 0, headerMultiple = props.variant === "chat" ? .25 : void 0, marginMultiple = props.variant === "chat" ? 1 : void 0, variant = "default", reactMarkdownProps, lineHeight = props.variant === "chat" ? 1.6 : void 0, rehypePlugins, remarkPlugins, remarkPluginsAhead, components = {}, customRender, showFootnotes = true, streamSmoothingPreset, citations, ...rest } = props;
 	const delayedAnimated = useDelayedAnimated(animated);
 	const Render = useCallback(({ enableStream: enableStream$1, children: children$1, reactMarkdownProps: reactMarkdownProps$1 }) => {
 		const defaultDOM = /* @__PURE__ */ jsx(enableStream$1 ? StreamdownRender_default : MarkdownRender_default, {
@@ -55,6 +55,7 @@ const Markdown = memo((props) => {
 				remarkPlugins,
 				remarkPluginsAhead,
 				showFootnotes,
+				streamSmoothingPreset,
 				variant,
 				children: /* @__PURE__ */ jsx(Render, {
 					enableStream: enableStream && delayedAnimated,

package/es/Markdown/Markdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Markdown.mjs","names":["enableStream","StreamdownRender","MarkdownRender","reactMarkdownProps","children","PreviewGroup","Typography"],"sources":["../../src/Markdown/Markdown.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useCallback } from 'react';\n\nimport { PreviewGroup } from '@/Image';\n\nimport { MarkdownProvider } from './components/MarkdownProvider';\nimport { useDelayedAnimated } from './components/useDelayedAnimated';\nimport { variants } from './style';\nimport { MarkdownRender, StreamdownRender } from './SyntaxMarkdown';\nimport { type MarkdownProps } from './type';\nimport Typography from './Typography';\n\nconst Markdown = memo<MarkdownProps>((props) => {\n  const {\n    ref,\n    children = '',\n    className,\n    style,\n    fullFeaturedCodeBlock,\n    onDoubleClick,\n    animated,\n    enableLatex = true,\n    enableMermaid = true,\n    enableImageGallery,\n    enableCustomFootnotes,\n    enableGithubAlert,\n    enableStream = true,\n    componentProps,\n    rehypePluginsAhead,\n    allowHtml,\n    borderRadius,\n    fontSize = props.variant === 'chat' ? 14 : undefined,\n    headerMultiple = props.variant === 'chat' ? 0.25 : undefined,\n    marginMultiple = props.variant === 'chat' ? 1 : undefined,\n    variant = 'default',\n    reactMarkdownProps,\n    lineHeight = props.variant === 'chat' ? 1.6 : undefined,\n    rehypePlugins,\n    remarkPlugins,\n    remarkPluginsAhead,\n    components = {},\n    customRender,\n    showFootnotes = true,\n    citations,\n    ...rest\n  } = props;\n\n  const delayedAnimated = useDelayedAnimated(animated);\n\n  const Render = useCallback(\n    ({\n      enableStream,\n      children,\n      reactMarkdownProps,\n    }: Pick<MarkdownProps, 'children' | 'enableStream' | 'reactMarkdownProps'>) => {\n      const DefaultRender = enableStream ? StreamdownRender : MarkdownRender;\n      const defaultDOM = <DefaultRender {...reactMarkdownProps}>{children}</DefaultRender>;\n      return customRender ? customRender(defaultDOM, { text: children }) : defaultDOM;\n    },\n    [customRender],\n  );\n\n  return (\n    <PreviewGroup enable={enableImageGallery}>\n      <Typography\n        borderRadius={borderRadius}\n        className={cx(variants({ enableLatex, variant }), className)}\n        data-code-type=\"markdown\"\n        fontSize={fontSize}\n        headerMultiple={headerMultiple}\n        lineHeight={lineHeight}\n        marginMultiple={marginMultiple}\n        ref={ref}\n        style={style}\n        onDoubleClick={onDoubleClick}\n        {...rest}\n      >\n        <MarkdownProvider\n          allowHtml={allowHtml}\n          animated={delayedAnimated}\n          citations={citations}\n          componentProps={componentProps}\n          components={components}\n          enableCustomFootnotes={enableCustomFootnotes}\n          enableGithubAlert={enableGithubAlert}\n          enableLatex={enableLatex}\n          enableMermaid={enableMermaid}\n          fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n          rehypePlugins={rehypePlugins}\n          rehypePluginsAhead={rehypePluginsAhead}\n          remarkPlugins={remarkPlugins}\n          remarkPluginsAhead={remarkPluginsAhead}\n          showFootnotes={showFootnotes}\n          variant={variant}\n        >\n          <Render\n            enableStream={enableStream && delayedAnimated}\n            reactMarkdownProps={reactMarkdownProps}\n          >\n            {children}\n          </Render>\n        </MarkdownProvider>\n      </Typography>\n    </PreviewGroup>\n  );\n});\n\nMarkdown.displayName = 'Markdown';\n\nexport default Markdown;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,WAAW,MAAqB,UAAU;CAC9C,MAAM,EACJ,KACA,WAAW,IACX,WACA,OACA,uBACA,eACA,UACA,cAAc,MACd,gBAAgB,MAChB,oBACA,uBACA,mBACA,eAAe,MACf,gBACA,oBACA,WACA,cACA,WAAW,MAAM,YAAY,SAAS,KAAK,QAC3C,iBAAiB,MAAM,YAAY,SAAS,MAAO,QACnD,iBAAiB,MAAM,YAAY,SAAS,IAAI,QAChD,UAAU,WACV,oBACA,aAAa,MAAM,YAAY,SAAS,MAAM,QAC9C,eACA,eACA,oBACA,aAAa,EAAE,EACf,cACA,gBAAgB,MAChB,WACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB,SAAS;CAEpD,MAAM,SAAS,aACZ,EACC,8BACA,sBACA,+CAC6E;EAE7E,MAAM,aAAa,oBADGA,iBAAeC,2BAAmBC;GACtB,GAAIC;aAAqBC;IAAyB;AACpF,SAAO,eAAe,aAAa,YAAY,EAAE,MAAMA,YAAU,CAAC,GAAG;IAEvE,CAAC,aAAa,CACf;AAED,QACE,oBAACC;EAAa,QAAQ;YACpB,oBAACC;GACe;GACd,WAAW,GAAG,SAAS;IAAE;IAAa;IAAS,CAAC,EAAE,UAAU;GAC5D,kBAAe;GACL;GACM;GACJ;GACI;GACX;GACE;GACQ;GACf,GAAI;aAEJ,oBAAC;IACY;IACX,UAAU;IACC;IACK;IACJ;IACW;IACJ;IACN;IACE;IACQ;IACR;IACK;IACL;IACK;IACL;IACN;cAET,oBAAC;KACC,cAAc,gBAAgB;KACV;KAEnB;MACM;KACQ;IACR;GACA;EAEjB;AAEF,SAAS,cAAc;AAEvB,uBAAe"}
+{"version":3,"file":"Markdown.mjs","names":["enableStream","StreamdownRender","MarkdownRender","reactMarkdownProps","children","PreviewGroup","Typography"],"sources":["../../src/Markdown/Markdown.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { memo, useCallback } from 'react';\n\nimport { PreviewGroup } from '@/Image';\n\nimport { MarkdownProvider } from './components/MarkdownProvider';\nimport { useDelayedAnimated } from './components/useDelayedAnimated';\nimport { variants } from './style';\nimport { MarkdownRender, StreamdownRender } from './SyntaxMarkdown';\nimport { type MarkdownProps } from './type';\nimport Typography from './Typography';\n\nconst Markdown = memo<MarkdownProps>((props) => {\n  const {\n    ref,\n    children = '',\n    className,\n    style,\n    fullFeaturedCodeBlock,\n    onDoubleClick,\n    animated,\n    enableLatex = true,\n    enableMermaid = true,\n    enableImageGallery,\n    enableCustomFootnotes,\n    enableGithubAlert,\n    enableStream = true,\n    componentProps,\n    rehypePluginsAhead,\n    allowHtml,\n    borderRadius,\n    fontSize = props.variant === 'chat' ? 14 : undefined,\n    headerMultiple = props.variant === 'chat' ? 0.25 : undefined,\n    marginMultiple = props.variant === 'chat' ? 1 : undefined,\n    variant = 'default',\n    reactMarkdownProps,\n    lineHeight = props.variant === 'chat' ? 1.6 : undefined,\n    rehypePlugins,\n    remarkPlugins,\n    remarkPluginsAhead,\n    components = {},\n    customRender,\n    showFootnotes = true,\n    streamSmoothingPreset,\n    citations,\n    ...rest\n  } = props;\n\n  const delayedAnimated = useDelayedAnimated(animated);\n\n  const Render = useCallback(\n    ({\n      enableStream,\n      children,\n      reactMarkdownProps,\n    }: Pick<MarkdownProps, 'children' | 'enableStream' | 'reactMarkdownProps'>) => {\n      const DefaultRender = enableStream ? StreamdownRender : MarkdownRender;\n      const defaultDOM = <DefaultRender {...reactMarkdownProps}>{children}</DefaultRender>;\n      return customRender ? customRender(defaultDOM, { text: children }) : defaultDOM;\n    },\n    [customRender],\n  );\n\n  return (\n    <PreviewGroup enable={enableImageGallery}>\n      <Typography\n        borderRadius={borderRadius}\n        className={cx(variants({ enableLatex, variant }), className)}\n        data-code-type=\"markdown\"\n        fontSize={fontSize}\n        headerMultiple={headerMultiple}\n        lineHeight={lineHeight}\n        marginMultiple={marginMultiple}\n        ref={ref}\n        style={style}\n        onDoubleClick={onDoubleClick}\n        {...rest}\n      >\n        <MarkdownProvider\n          allowHtml={allowHtml}\n          animated={delayedAnimated}\n          citations={citations}\n          componentProps={componentProps}\n          components={components}\n          enableCustomFootnotes={enableCustomFootnotes}\n          enableGithubAlert={enableGithubAlert}\n          enableLatex={enableLatex}\n          enableMermaid={enableMermaid}\n          fullFeaturedCodeBlock={fullFeaturedCodeBlock}\n          rehypePlugins={rehypePlugins}\n          rehypePluginsAhead={rehypePluginsAhead}\n          remarkPlugins={remarkPlugins}\n          remarkPluginsAhead={remarkPluginsAhead}\n          showFootnotes={showFootnotes}\n          streamSmoothingPreset={streamSmoothingPreset}\n          variant={variant}\n        >\n          <Render\n            enableStream={enableStream && delayedAnimated}\n            reactMarkdownProps={reactMarkdownProps}\n          >\n            {children}\n          </Render>\n        </MarkdownProvider>\n      </Typography>\n    </PreviewGroup>\n  );\n});\n\nMarkdown.displayName = 'Markdown';\n\nexport default Markdown;\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,WAAW,MAAqB,UAAU;CAC9C,MAAM,EACJ,KACA,WAAW,IACX,WACA,OACA,uBACA,eACA,UACA,cAAc,MACd,gBAAgB,MAChB,oBACA,uBACA,mBACA,eAAe,MACf,gBACA,oBACA,WACA,cACA,WAAW,MAAM,YAAY,SAAS,KAAK,QAC3C,iBAAiB,MAAM,YAAY,SAAS,MAAO,QACnD,iBAAiB,MAAM,YAAY,SAAS,IAAI,QAChD,UAAU,WACV,oBACA,aAAa,MAAM,YAAY,SAAS,MAAM,QAC9C,eACA,eACA,oBACA,aAAa,EAAE,EACf,cACA,gBAAgB,MAChB,uBACA,WACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,mBAAmB,SAAS;CAEpD,MAAM,SAAS,aACZ,EACC,8BACA,sBACA,+CAC6E;EAE7E,MAAM,aAAa,oBADGA,iBAAeC,2BAAmBC;GACtB,GAAIC;aAAqBC;IAAyB;AACpF,SAAO,eAAe,aAAa,YAAY,EAAE,MAAMA,YAAU,CAAC,GAAG;IAEvE,CAAC,aAAa,CACf;AAED,QACE,oBAACC;EAAa,QAAQ;YACpB,oBAACC;GACe;GACd,WAAW,GAAG,SAAS;IAAE;IAAa;IAAS,CAAC,EAAE,UAAU;GAC5D,kBAAe;GACL;GACM;GACJ;GACI;GACX;GACE;GACQ;GACf,GAAI;aAEJ,oBAAC;IACY;IACX,UAAU;IACC;IACK;IACJ;IACW;IACJ;IACN;IACE;IACQ;IACR;IACK;IACL;IACK;IACL;IACQ;IACd;cAET,oBAAC;KACC,cAAc,gBAAgB;KACV;KAEnB;MACM;KACQ;IACR;GACA;EAEjB;AAEF,SAAS,cAAc;AAEvB,uBAAe"}