@lobehub/ui 4.0.0 → 4.1.1

package/README.md

@@ -119,7 +119,7 @@ import hotkeyMessages from '@lobehub/ui/i18n/resources/hotkey';
 
 ### ConfigProvider (Motion)
 
-You must pass a motion component via `ConfigProvider` (or `ThemeProvider`).
+You must pass a motion component via `ConfigProvider`.
 If your app uses `LazyMotion`, pass `m`:
 
 ```tsx

package/es/Accordion/Accordion.d.mts

@@ -1,8 +1,8 @@
 import { AccordionProps } from "./type.mjs";
-import * as react0 from "react";
+import * as react63 from "react";
 
 //#region src/Accordion/Accordion.d.ts
-declare const Accordion: react0.NamedExoticComponent<AccordionProps & react0.RefAttributes<HTMLDivElement>>;
+declare const Accordion: react63.NamedExoticComponent<AccordionProps & react63.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { Accordion };
 //# sourceMappingURL=Accordion.d.mts.map

package/es/Accordion/AccordionItem.d.mts

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

package/es/Accordion/AccordionItem.mjs

@@ -1,13 +1,13 @@
 'use client';
 
-import { MotionComponent } from "../MotionProvider/index.mjs";
+import { useMotionComponent } from "../MotionProvider/index.mjs";
 import { useAccordionContext } from "./context.mjs";
 import { useStyles } from "./style.mjs";
 import FlexBasic_default from "../Flex/FlexBasic.mjs";
 import Block_default from "../Block/Block.mjs";
 import Text_default from "../Text/Text.mjs";
 import ArrowIcon_default from "./ArrowIcon.mjs";
-import { memo, use, useCallback, useMemo } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/Accordion/AccordionItem.tsx
@@ -103,7 +103,7 @@ const AccordionItem = memo(({ itemKey, title, children, action, disabled = false
 		},
 		...contextMotionProps
 	}), [isOpen, contextMotionProps]);
-	const m = use(MotionComponent);
+	const Motion = useMotionComponent();
 	const contentElement = useMemo(() => {
 		if (disableAnimation || !keepContentMounted) {
 			if (keepContentMounted) return /* @__PURE__ */ jsx("div", {
@@ -128,7 +128,7 @@ const AccordionItem = memo(({ itemKey, title, children, action, disabled = false
 				})
 			});
 		}
-		return /* @__PURE__ */ jsx(m.div, {
+		return /* @__PURE__ */ jsx(Motion.div, {
 			...motionProps,
 			style: { overflow: "hidden" },
 			children: /* @__PURE__ */ jsx("div", {

package/es/Accordion/AccordionItem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.mjs","names":["ArrowIcon","Text","Flexbox","Block"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["'use client';\n\nimport { KeyboardEvent, memo, use, useCallback, useMemo } from 'react';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport { MotionComponent } from '@/MotionProvider';\nimport Text from '@/Text';\n\nimport ArrowIcon from './ArrowIcon';\nimport { useAccordionContext } from './context';\nimport { useStyles } from './style';\nimport type { AccordionItemProps } from './type';\n\nconst AccordionItem = memo<AccordionItemProps>(\n  ({\n    itemKey,\n    title,\n    children,\n    action,\n    disabled = false,\n    hideIndicator: itemHideIndicator,\n    indicatorPlacement: itemIndicatorPlacement,\n    indicator: customIndicator,\n    classNames,\n    paddingInline = 16,\n    paddingBlock = 8,\n    padding,\n    ref,\n    variant: customVariant,\n    styles: customStyles,\n    headerWrapper,\n  }) => {\n    const { cx, styles } = useStyles();\n    const context = useAccordionContext();\n\n    const {\n      isExpanded,\n      onToggle,\n      hideIndicator: contextHideIndicator,\n      indicatorPlacement: contextIndicatorPlacement,\n      keepContentMounted,\n      disableAnimation,\n      motionProps: contextMotionProps,\n      variant = 'filled',\n    } = context;\n\n    const isOpen = isExpanded(itemKey);\n    const hideIndicatorFinal = itemHideIndicator ?? contextHideIndicator ?? false;\n    const indicatorPlacementFinal = itemIndicatorPlacement ?? contextIndicatorPlacement ?? 'start';\n\n    const handleToggle = useCallback(() => {\n      if (!disabled) {\n        onToggle(itemKey);\n      }\n    }, [disabled, itemKey, onToggle]);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (disabled) return;\n\n        switch (e.key) {\n          case 'Enter':\n          case ' ': {\n            e.preventDefault();\n            handleToggle();\n            break;\n          }\n        }\n      },\n      [disabled, handleToggle],\n    );\n\n    // Build indicator\n    const indicator = useMemo(() => {\n      if (hideIndicatorFinal) return null;\n\n      if (customIndicator) {\n        if (typeof customIndicator === 'function') {\n          return (\n            <span\n              aria-hidden=\"true\"\n              className={cx(styles.indicator, classNames?.indicator)}\n              style={customStyles?.indicator}\n            >\n              {customIndicator({ isDisabled: disabled, isOpen })}\n            </span>\n          );\n        }\n        return (\n          <span\n            aria-hidden=\"true\"\n            className={cx(styles.indicator, classNames?.indicator)}\n            style={customStyles?.indicator}\n          >\n            {customIndicator}\n          </span>\n        );\n      }\n\n      return (\n        <span\n          aria-hidden=\"true\"\n          className={cx(styles.indicator, classNames?.indicator)}\n          style={customStyles?.indicator}\n        >\n          <ArrowIcon className={cx(styles.icon, isOpen && styles.iconRotate)} />\n        </span>\n      );\n    }, [\n      hideIndicatorFinal,\n      customIndicator,\n      disabled,\n      isOpen,\n      cx,\n      styles,\n      classNames,\n      customStyles,\n    ]);\n\n    // Animation variants\n    const motionProps = useMemo(\n      () => ({\n        animate: isOpen ? 'enter' : 'exit',\n        exit: 'exit',\n        initial: false,\n        variants: {\n          enter: {\n            height: 'auto',\n            opacity: 1,\n            transition: {\n              duration: 0.2,\n              ease: [0.4, 0, 0.2, 1],\n            },\n          },\n          exit: {\n            height: 0,\n            opacity: 0,\n            transition: {\n              duration: 0.2,\n              ease: [0.4, 0, 0.2, 1],\n            },\n          },\n        },\n        ...contextMotionProps,\n      }),\n      [isOpen, contextMotionProps],\n    );\n\n    const m = use(MotionComponent);\n\n    // Render content\n    const contentElement = useMemo(() => {\n      if (disableAnimation || !keepContentMounted) {\n        if (keepContentMounted) {\n          return (\n            <div\n              className={cx('accordion-content', styles.content, classNames?.content)}\n              role=\"region\"\n              style={{\n                display: isOpen ? 'block' : 'none',\n                ...customStyles?.content,\n              }}\n            >\n              <div className={styles.contentInner}>{children}</div>\n            </div>\n          );\n        }\n\n        return (\n          isOpen && (\n            <div\n              className={cx('accordion-content', styles.content, classNames?.content)}\n              role=\"region\"\n              style={customStyles?.content}\n            >\n              <div className={styles.contentInner}>{children}</div>\n            </div>\n          )\n        );\n      }\n\n      return (\n        <m.div {...motionProps} style={{ overflow: 'hidden' }}>\n          <div\n            className={cx('accordion-content', styles.content, classNames?.content)}\n            role=\"region\"\n            style={customStyles?.content}\n          >\n            <div className={styles.contentInner}>{children}</div>\n          </div>\n        </m.div>\n      );\n    }, [\n      disableAnimation,\n      keepContentMounted,\n      isOpen,\n      cx,\n      styles,\n      classNames,\n      customStyles,\n      children,\n      motionProps,\n    ]);\n\n    const titleNode = useMemo(\n      () =>\n        typeof title === 'string' ? (\n          <Text className={classNames?.title} ellipsis style={customStyles?.title}>\n            {title}\n          </Text>\n        ) : (\n          title\n        ),\n      [title, classNames?.title, customStyles?.title],\n    );\n\n    const actionNode = useMemo(\n      () =>\n        action && (\n          <Flexbox\n            align={'center'}\n            className={cx('accordion-action', styles.action, classNames?.action)}\n            flex={'none'}\n            gap={4}\n            horizontal\n            onClick={(e) => e.stopPropagation()}\n            style={customStyles?.action}\n          >\n            {action}\n          </Flexbox>\n        ),\n      [action, cx, styles, classNames?.action, customStyles?.action],\n    );\n\n    const headerElement = useMemo(() => {\n      const header = (\n        <Block\n          className={cx('accordion-header', styles.header, classNames?.header)}\n          clickable={!disabled}\n          gap={4}\n          horizontal\n          justify={'space-between'}\n          onClick={handleToggle}\n          onKeyDown={handleKeyDown}\n          padding={padding}\n          paddingBlock={paddingBlock}\n          paddingInline={paddingInline}\n          ref={ref}\n          style={{\n            alignItems: 'center',\n            cursor: disabled ? 'not-allowed' : 'pointer',\n            opacity: disabled ? 0.5 : undefined,\n            overflow: 'hidden',\n            width: '100%',\n            ...customStyles?.header,\n          }}\n          variant={customVariant || variant}\n        >\n          {indicatorPlacementFinal === 'start' ? (\n            <>\n              <Flexbox\n                align={'center'}\n                flex={1}\n                gap={2}\n                horizontal\n                style={{\n                  overflow: 'hidden',\n                }}\n              >\n                {titleNode}\n                {indicator}\n              </Flexbox>\n              <Flexbox align={'center'} flex={'none'} gap={4} horizontal>\n                {actionNode}\n              </Flexbox>\n            </>\n          ) : (\n            <>\n              <Flexbox\n                align={'center'}\n                flex={1}\n                gap={2}\n                horizontal\n                style={{\n                  overflow: 'hidden',\n                }}\n              >\n                {titleNode}\n              </Flexbox>\n              <Flexbox align={'center'} flex={'none'} gap={4} horizontal>\n                {actionNode}\n                {indicator}\n              </Flexbox>\n            </>\n          )}\n        </Block>\n      );\n      if (headerWrapper) {\n        return headerWrapper(header);\n      }\n      return header;\n    }, [\n      cx,\n      styles,\n      classNames,\n      disabled,\n      handleToggle,\n      handleKeyDown,\n      padding,\n      paddingBlock,\n      paddingInline,\n      ref,\n      customVariant,\n      variant,\n      indicatorPlacementFinal,\n      titleNode,\n      indicator,\n      actionNode,\n      headerWrapper,\n    ]);\n\n    return (\n      <div\n        className={cx('accordion-item', styles.item, classNames?.base)}\n        style={customStyles?.base}\n      >\n        {headerElement}\n        {contentElement}\n      </div>\n    );\n  },\n);\n\nAccordionItem.displayName = 'AccordionItem';\n\nexport default AccordionItem;\n"],"mappings":"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"}
+{"version":3,"file":"AccordionItem.mjs","names":["ArrowIcon","Text","Flexbox","Block"],"sources":["../../src/Accordion/AccordionItem.tsx"],"sourcesContent":["'use client';\n\nimport { KeyboardEvent, memo, useCallback, useMemo } from 'react';\n\nimport Block from '@/Block';\nimport { Flexbox } from '@/Flex';\nimport { useMotionComponent } from '@/MotionProvider';\nimport Text from '@/Text';\n\nimport ArrowIcon from './ArrowIcon';\nimport { useAccordionContext } from './context';\nimport { useStyles } from './style';\nimport type { AccordionItemProps } from './type';\n\nconst AccordionItem = memo<AccordionItemProps>(\n  ({\n    itemKey,\n    title,\n    children,\n    action,\n    disabled = false,\n    hideIndicator: itemHideIndicator,\n    indicatorPlacement: itemIndicatorPlacement,\n    indicator: customIndicator,\n    classNames,\n    paddingInline = 16,\n    paddingBlock = 8,\n    padding,\n    ref,\n    variant: customVariant,\n    styles: customStyles,\n    headerWrapper,\n  }) => {\n    const { cx, styles } = useStyles();\n    const context = useAccordionContext();\n\n    const {\n      isExpanded,\n      onToggle,\n      hideIndicator: contextHideIndicator,\n      indicatorPlacement: contextIndicatorPlacement,\n      keepContentMounted,\n      disableAnimation,\n      motionProps: contextMotionProps,\n      variant = 'filled',\n    } = context;\n\n    const isOpen = isExpanded(itemKey);\n    const hideIndicatorFinal = itemHideIndicator ?? contextHideIndicator ?? false;\n    const indicatorPlacementFinal = itemIndicatorPlacement ?? contextIndicatorPlacement ?? 'start';\n\n    const handleToggle = useCallback(() => {\n      if (!disabled) {\n        onToggle(itemKey);\n      }\n    }, [disabled, itemKey, onToggle]);\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent) => {\n        if (disabled) return;\n\n        switch (e.key) {\n          case 'Enter':\n          case ' ': {\n            e.preventDefault();\n            handleToggle();\n            break;\n          }\n        }\n      },\n      [disabled, handleToggle],\n    );\n\n    // Build indicator\n    const indicator = useMemo(() => {\n      if (hideIndicatorFinal) return null;\n\n      if (customIndicator) {\n        if (typeof customIndicator === 'function') {\n          return (\n            <span\n              aria-hidden=\"true\"\n              className={cx(styles.indicator, classNames?.indicator)}\n              style={customStyles?.indicator}\n            >\n              {customIndicator({ isDisabled: disabled, isOpen })}\n            </span>\n          );\n        }\n        return (\n          <span\n            aria-hidden=\"true\"\n            className={cx(styles.indicator, classNames?.indicator)}\n            style={customStyles?.indicator}\n          >\n            {customIndicator}\n          </span>\n        );\n      }\n\n      return (\n        <span\n          aria-hidden=\"true\"\n          className={cx(styles.indicator, classNames?.indicator)}\n          style={customStyles?.indicator}\n        >\n          <ArrowIcon className={cx(styles.icon, isOpen && styles.iconRotate)} />\n        </span>\n      );\n    }, [\n      hideIndicatorFinal,\n      customIndicator,\n      disabled,\n      isOpen,\n      cx,\n      styles,\n      classNames,\n      customStyles,\n    ]);\n\n    // Animation variants\n    const motionProps = useMemo(\n      () => ({\n        animate: isOpen ? 'enter' : 'exit',\n        exit: 'exit',\n        initial: false,\n        variants: {\n          enter: {\n            height: 'auto',\n            opacity: 1,\n            transition: {\n              duration: 0.2,\n              ease: [0.4, 0, 0.2, 1],\n            },\n          },\n          exit: {\n            height: 0,\n            opacity: 0,\n            transition: {\n              duration: 0.2,\n              ease: [0.4, 0, 0.2, 1],\n            },\n          },\n        },\n        ...contextMotionProps,\n      }),\n      [isOpen, contextMotionProps],\n    );\n\n    const Motion = useMotionComponent();\n\n    // Render content\n    const contentElement = useMemo(() => {\n      if (disableAnimation || !keepContentMounted) {\n        if (keepContentMounted) {\n          return (\n            <div\n              className={cx('accordion-content', styles.content, classNames?.content)}\n              role=\"region\"\n              style={{\n                display: isOpen ? 'block' : 'none',\n                ...customStyles?.content,\n              }}\n            >\n              <div className={styles.contentInner}>{children}</div>\n            </div>\n          );\n        }\n\n        return (\n          isOpen && (\n            <div\n              className={cx('accordion-content', styles.content, classNames?.content)}\n              role=\"region\"\n              style={customStyles?.content}\n            >\n              <div className={styles.contentInner}>{children}</div>\n            </div>\n          )\n        );\n      }\n\n      return (\n        <Motion.div {...motionProps} style={{ overflow: 'hidden' }}>\n          <div\n            className={cx('accordion-content', styles.content, classNames?.content)}\n            role=\"region\"\n            style={customStyles?.content}\n          >\n            <div className={styles.contentInner}>{children}</div>\n          </div>\n        </Motion.div>\n      );\n    }, [\n      disableAnimation,\n      keepContentMounted,\n      isOpen,\n      cx,\n      styles,\n      classNames,\n      customStyles,\n      children,\n      motionProps,\n    ]);\n\n    const titleNode = useMemo(\n      () =>\n        typeof title === 'string' ? (\n          <Text className={classNames?.title} ellipsis style={customStyles?.title}>\n            {title}\n          </Text>\n        ) : (\n          title\n        ),\n      [title, classNames?.title, customStyles?.title],\n    );\n\n    const actionNode = useMemo(\n      () =>\n        action && (\n          <Flexbox\n            align={'center'}\n            className={cx('accordion-action', styles.action, classNames?.action)}\n            flex={'none'}\n            gap={4}\n            horizontal\n            onClick={(e) => e.stopPropagation()}\n            style={customStyles?.action}\n          >\n            {action}\n          </Flexbox>\n        ),\n      [action, cx, styles, classNames?.action, customStyles?.action],\n    );\n\n    const headerElement = useMemo(() => {\n      const header = (\n        <Block\n          className={cx('accordion-header', styles.header, classNames?.header)}\n          clickable={!disabled}\n          gap={4}\n          horizontal\n          justify={'space-between'}\n          onClick={handleToggle}\n          onKeyDown={handleKeyDown}\n          padding={padding}\n          paddingBlock={paddingBlock}\n          paddingInline={paddingInline}\n          ref={ref}\n          style={{\n            alignItems: 'center',\n            cursor: disabled ? 'not-allowed' : 'pointer',\n            opacity: disabled ? 0.5 : undefined,\n            overflow: 'hidden',\n            width: '100%',\n            ...customStyles?.header,\n          }}\n          variant={customVariant || variant}\n        >\n          {indicatorPlacementFinal === 'start' ? (\n            <>\n              <Flexbox\n                align={'center'}\n                flex={1}\n                gap={2}\n                horizontal\n                style={{\n                  overflow: 'hidden',\n                }}\n              >\n                {titleNode}\n                {indicator}\n              </Flexbox>\n              <Flexbox align={'center'} flex={'none'} gap={4} horizontal>\n                {actionNode}\n              </Flexbox>\n            </>\n          ) : (\n            <>\n              <Flexbox\n                align={'center'}\n                flex={1}\n                gap={2}\n                horizontal\n                style={{\n                  overflow: 'hidden',\n                }}\n              >\n                {titleNode}\n              </Flexbox>\n              <Flexbox align={'center'} flex={'none'} gap={4} horizontal>\n                {actionNode}\n                {indicator}\n              </Flexbox>\n            </>\n          )}\n        </Block>\n      );\n      if (headerWrapper) {\n        return headerWrapper(header);\n      }\n      return header;\n    }, [\n      cx,\n      styles,\n      classNames,\n      disabled,\n      handleToggle,\n      handleKeyDown,\n      padding,\n      paddingBlock,\n      paddingInline,\n      ref,\n      customVariant,\n      variant,\n      indicatorPlacementFinal,\n      titleNode,\n      indicator,\n      actionNode,\n      headerWrapper,\n    ]);\n\n    return (\n      <div\n        className={cx('accordion-item', styles.item, classNames?.base)}\n        style={customStyles?.base}\n      >\n        {headerElement}\n        {contentElement}\n      </div>\n    );\n  },\n);\n\nAccordionItem.displayName = 'AccordionItem';\n\nexport default AccordionItem;\n"],"mappings":"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"}

package/es/ActionIcon/ActionIcon.d.mts

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

package/es/Alert/Alert.d.mts

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

package/es/AutoComplete/Select.d.mts

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

package/es/Avatar/AvatarGroup/index.d.mts

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

package/es/Burger/Burger.d.mts

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

package/es/CodeEditor/CodeEditor.d.mts

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

package/es/Collapse/Collapse.d.mts

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

package/es/ConfigProvider/index.d.mts

@@ -1,7 +1,7 @@
 import { MotionComponentType } from "../MotionProvider/index.mjs";
-import { TranslationResources } from "../i18n/types.mjs";
+import { TranslationResourcesInput } from "../i18n/types.mjs";
 import { CDN, CdnApi } from "../utils/genCdnUrl.mjs";
-import * as react66 from "react";
+import * as react55 from "react";
 import { ElementType, ReactNode } from "react";
 
 //#region src/ConfigProvider/index.d.ts
@@ -17,9 +17,9 @@ interface ConfigProviderProps {
   config?: Config;
   locale?: string;
   motion: MotionComponentType;
-  resources?: TranslationResources[] | Record<string, TranslationResources>;
+  resources?: TranslationResourcesInput;
 }
-declare const ConfigProvider: react66.NamedExoticComponent<ConfigProviderProps>;
+declare const ConfigProvider: react55.NamedExoticComponent<ConfigProviderProps>;
 type CdnFn = ({
   pkg,
   version,

package/es/ConfigProvider/index.mjs

@@ -2,7 +2,7 @@
 
 import { MotionComponent } from "../MotionProvider/index.mjs";
 import { genCdnUrl } from "../utils/genCdnUrl.mjs";
-import { createContext, memo, use, useMemo } from "react";
+import { createContext, memo, use, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/ConfigProvider/index.tsx
@@ -11,19 +11,45 @@ const I18nContextInternal = createContext({
 	locale: "en",
 	t: (key) => key
 });
+const isThenable = (value) => typeof value?.then === "function";
 const ConfigProvider = memo(({ children, config, locale, resources, motion }) => {
+	const fallbackLocale = locale ?? "en";
+	const [resolvedResources, setResolvedResources] = useState(() => resources && !isThenable(resources) ? resources : void 0);
+	const [resolvedLocale, setResolvedLocale] = useState(fallbackLocale);
+	const latestRequestId = useRef(0);
+	useEffect(() => {
+		const requestId = ++latestRequestId.current;
+		if (!resources) {
+			setResolvedResources(void 0);
+			setResolvedLocale(fallbackLocale);
+			return;
+		}
+		if (isThenable(resources)) {
+			const targetLocale = fallbackLocale;
+			resources.then((nextResources) => {
+				if (latestRequestId.current !== requestId) return;
+				setResolvedResources(nextResources);
+				setResolvedLocale(targetLocale);
+			}).catch(() => {
+				if (latestRequestId.current !== requestId) return;
+			});
+			return;
+		}
+		setResolvedResources(resources);
+		setResolvedLocale(fallbackLocale);
+	}, [fallbackLocale, resources]);
+	const currentResources = isThenable(resources) ? resolvedResources : resources;
+	const currentLocale = isThenable(resources) ? resolvedLocale : fallbackLocale;
 	return /* @__PURE__ */ jsx(I18nContextInternal, {
 		value: useMemo(() => {
-			const currentLocale = locale || "en";
-			const currentResources = resources || [];
-			const resourceList = Array.isArray(currentResources) ? currentResources : Object.values(currentResources);
+			const resourceList = Array.isArray(currentResources) ? currentResources : currentResources ? Object.values(currentResources) : [];
 			const mergedResources = Object.assign({}, ...resourceList);
 			const t = (key) => mergedResources[key] || key;
 			return {
 				locale: currentLocale,
 				t
 			};
-		}, [locale, resources]),
+		}, [currentLocale, currentResources]),
 		children: /* @__PURE__ */ jsx(ConfigContext, {
 			value: config ?? null,
 			children: /* @__PURE__ */ jsx(MotionComponent, {

package/es/ConfigProvider/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":["cdnFallback: CdnFn"],"sources":["../../src/ConfigProvider/index.tsx"],"sourcesContent":["'use client';\n\nimport { ElementType, ReactNode, createContext, memo, use, useMemo } from 'react';\n\nimport { MotionComponent, type MotionComponentType } from '@/MotionProvider';\nimport type { I18nContextValue, TranslationKey, TranslationResources } from '@/i18n/types';\nimport { CDN, CdnApi, genCdnUrl } from '@/utils/genCdnUrl';\n\nexport interface Config {\n  aAs?: ElementType;\n  customCdnFn?: CdnFn;\n  imgAs?: ElementType;\n  imgUnoptimized?: boolean;\n  proxy?: CDN | 'custom';\n}\n\nexport const ConfigContext = createContext<Config | null>(null);\n\n// Internal i18n context\nconst I18nContextInternal = createContext<I18nContextValue>({\n  locale: 'en',\n  t: (key: TranslationKey) => key,\n});\n\nexport interface ConfigProviderProps {\n  children: ReactNode;\n  config?: Config;\n  // i18n props - flattened at top level\n  locale?: string;\n  motion: MotionComponentType;\n  resources?: TranslationResources[] | Record<string, TranslationResources>;\n}\n\nconst ConfigProvider = memo<ConfigProviderProps>(\n  ({ children, config, locale, resources, motion }) => {\n    const i18nValue = useMemo((): I18nContextValue => {\n      const currentLocale = locale || 'en';\n      const currentResources = resources || [];\n      const resourceList = Array.isArray(currentResources)\n        ? currentResources\n        : Object.values(currentResources);\n      const mergedResources = Object.assign({}, ...resourceList);\n      const t = (key: TranslationKey): string => mergedResources[key] || key;\n      return { locale: currentLocale, t };\n    }, [locale, resources]);\n\n    return (\n      <I18nContextInternal value={i18nValue}>\n        <ConfigContext value={config ?? null}>\n          <MotionComponent value={motion}>{children}</MotionComponent>\n        </ConfigContext>\n      </I18nContextInternal>\n    );\n  },\n);\n\n// useCdnFn\nexport type CdnFn = ({ pkg, version, path }: CdnApi) => string;\n\nconst cdnFallback: CdnFn = ({ pkg, version, path }) =>\n  genCdnUrl({ path, pkg, proxy: 'aliyun', version });\n\nexport const useCdnFn = (): CdnFn => {\n  const config = use(ConfigContext);\n  if (!config) return cdnFallback;\n  if (config?.proxy !== 'custom')\n    return ({ pkg, version, path }) =>\n      genCdnUrl({ path, pkg, proxy: config.proxy as any, version });\n  return config?.customCdnFn || cdnFallback;\n};\n\n// useI18n hook\nexport const useI18n = () => use(I18nContextInternal);\n\n// Export I18nContext for external reference\nexport { I18nContextInternal as I18nContext };\n\nexport default ConfigProvider;\n"],"mappings":";;;;;;;;AAgBA,MAAa,gBAAgB,cAA6B,KAAK;AAG/D,MAAM,sBAAsB,cAAgC;CAC1D,QAAQ;CACR,IAAI,QAAwB;CAC7B,CAAC;AAWF,MAAM,iBAAiB,MACpB,EAAE,UAAU,QAAQ,QAAQ,WAAW,aAAa;AAYnD,QACE,oBAAC;EAAoB,OAZL,cAAgC;GAChD,MAAM,gBAAgB,UAAU;GAChC,MAAM,mBAAmB,aAAa,EAAE;GACxC,MAAM,eAAe,MAAM,QAAQ,iBAAiB,GAChD,mBACA,OAAO,OAAO,iBAAiB;GACnC,MAAM,kBAAkB,OAAO,OAAO,EAAE,EAAE,GAAG,aAAa;GAC1D,MAAM,KAAK,QAAgC,gBAAgB,QAAQ;AACnE,UAAO;IAAE,QAAQ;IAAe;IAAG;KAClC,CAAC,QAAQ,UAAU,CAAC;YAInB,oBAAC;GAAc,OAAO,UAAU;aAC9B,oBAAC;IAAgB,OAAO;IAAS;KAA2B;IAC9C;GACI;EAG3B;AAKD,MAAMA,eAAsB,EAAE,KAAK,SAAS,WAC1C,UAAU;CAAE;CAAM;CAAK,OAAO;CAAU;CAAS,CAAC;AAEpD,MAAa,iBAAwB;CACnC,MAAM,SAAS,IAAI,cAAc;AACjC,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,QAAQ,UAAU,SACpB,SAAQ,EAAE,KAAK,SAAS,WACtB,UAAU;EAAE;EAAM;EAAK,OAAO,OAAO;EAAc;EAAS,CAAC;AACjE,QAAO,QAAQ,eAAe;;AAIhC,MAAa,gBAAgB,IAAI,oBAAoB;AAKrD,6BAAe"}
+{"version":3,"file":"index.mjs","names":["cdnFallback: CdnFn"],"sources":["../../src/ConfigProvider/index.tsx"],"sourcesContent":["'use client';\n\nimport {\n  ElementType,\n  ReactNode,\n  createContext,\n  memo,\n  use,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { MotionComponent, type MotionComponentType } from '@/MotionProvider';\nimport type {\n  I18nContextValue,\n  TranslationKey,\n  TranslationResourcesInput,\n  TranslationResourcesMap,\n} from '@/i18n/types';\nimport { CDN, CdnApi, genCdnUrl } from '@/utils/genCdnUrl';\n\nexport interface Config {\n  aAs?: ElementType;\n  customCdnFn?: CdnFn;\n  imgAs?: ElementType;\n  imgUnoptimized?: boolean;\n  proxy?: CDN | 'custom';\n}\n\nexport const ConfigContext = createContext<Config | null>(null);\n\n// Internal i18n context\nconst I18nContextInternal = createContext<I18nContextValue>({\n  locale: 'en',\n  t: (key: TranslationKey) => key,\n});\n\nexport interface ConfigProviderProps {\n  children: ReactNode;\n  config?: Config;\n  // i18n props - flattened at top level\n  locale?: string;\n  motion: MotionComponentType;\n  resources?: TranslationResourcesInput;\n}\n\nconst isThenable = (value: unknown): value is Promise<TranslationResourcesMap> =>\n  typeof (value as { then?: unknown })?.then === 'function';\n\nconst ConfigProvider = memo<ConfigProviderProps>(\n  ({ children, config, locale, resources, motion }) => {\n    const fallbackLocale = locale ?? 'en';\n    const [resolvedResources, setResolvedResources] = useState<TranslationResourcesMap | undefined>(\n      () => (resources && !isThenable(resources) ? resources : undefined),\n    );\n    const [resolvedLocale, setResolvedLocale] = useState(fallbackLocale);\n    const latestRequestId = useRef(0);\n\n    useEffect(() => {\n      const requestId = ++latestRequestId.current;\n\n      if (!resources) {\n        setResolvedResources(undefined);\n        setResolvedLocale(fallbackLocale);\n        return;\n      }\n\n      if (isThenable(resources)) {\n        const targetLocale = fallbackLocale;\n        resources\n          .then((nextResources) => {\n            if (latestRequestId.current !== requestId) return;\n            setResolvedResources(nextResources);\n            setResolvedLocale(targetLocale);\n          })\n          .catch(() => {\n            if (latestRequestId.current !== requestId) return;\n          });\n        return;\n      }\n\n      setResolvedResources(resources);\n      setResolvedLocale(fallbackLocale);\n    }, [fallbackLocale, resources]);\n\n    const currentResources = isThenable(resources) ? resolvedResources : resources;\n    const currentLocale = isThenable(resources) ? resolvedLocale : fallbackLocale;\n\n    const i18nValue = useMemo((): I18nContextValue => {\n      const resourceList = Array.isArray(currentResources)\n        ? currentResources\n        : currentResources\n          ? Object.values(currentResources)\n          : [];\n      const mergedResources = Object.assign({}, ...resourceList);\n      const t = (key: TranslationKey): string => mergedResources[key] || key;\n      return { locale: currentLocale, t };\n    }, [currentLocale, currentResources]);\n\n    return (\n      <I18nContextInternal value={i18nValue}>\n        <ConfigContext value={config ?? null}>\n          <MotionComponent value={motion}>{children}</MotionComponent>\n        </ConfigContext>\n      </I18nContextInternal>\n    );\n  },\n);\n\n// useCdnFn\nexport type CdnFn = ({ pkg, version, path }: CdnApi) => string;\n\nconst cdnFallback: CdnFn = ({ pkg, version, path }) =>\n  genCdnUrl({ path, pkg, proxy: 'aliyun', version });\n\nexport const useCdnFn = (): CdnFn => {\n  const config = use(ConfigContext);\n  if (!config) return cdnFallback;\n  if (config?.proxy !== 'custom')\n    return ({ pkg, version, path }) =>\n      genCdnUrl({ path, pkg, proxy: config.proxy as any, version });\n  return config?.customCdnFn || cdnFallback;\n};\n\n// useI18n hook\nexport const useI18n = () => use(I18nContextInternal);\n\n// Export I18nContext for external reference\nexport { I18nContextInternal as I18nContext };\n\nexport default ConfigProvider;\n"],"mappings":";;;;;;;;AA+BA,MAAa,gBAAgB,cAA6B,KAAK;AAG/D,MAAM,sBAAsB,cAAgC;CAC1D,QAAQ;CACR,IAAI,QAAwB;CAC7B,CAAC;AAWF,MAAM,cAAc,UAClB,OAAQ,OAA8B,SAAS;AAEjD,MAAM,iBAAiB,MACpB,EAAE,UAAU,QAAQ,QAAQ,WAAW,aAAa;CACnD,MAAM,iBAAiB,UAAU;CACjC,MAAM,CAAC,mBAAmB,wBAAwB,eACzC,aAAa,CAAC,WAAW,UAAU,GAAG,YAAY,OAC1D;CACD,MAAM,CAAC,gBAAgB,qBAAqB,SAAS,eAAe;CACpE,MAAM,kBAAkB,OAAO,EAAE;AAEjC,iBAAgB;EACd,MAAM,YAAY,EAAE,gBAAgB;AAEpC,MAAI,CAAC,WAAW;AACd,wBAAqB,OAAU;AAC/B,qBAAkB,eAAe;AACjC;;AAGF,MAAI,WAAW,UAAU,EAAE;GACzB,MAAM,eAAe;AACrB,aACG,MAAM,kBAAkB;AACvB,QAAI,gBAAgB,YAAY,UAAW;AAC3C,yBAAqB,cAAc;AACnC,sBAAkB,aAAa;KAC/B,CACD,YAAY;AACX,QAAI,gBAAgB,YAAY,UAAW;KAC3C;AACJ;;AAGF,uBAAqB,UAAU;AAC/B,oBAAkB,eAAe;IAChC,CAAC,gBAAgB,UAAU,CAAC;CAE/B,MAAM,mBAAmB,WAAW,UAAU,GAAG,oBAAoB;CACrE,MAAM,gBAAgB,WAAW,UAAU,GAAG,iBAAiB;AAa/D,QACE,oBAAC;EAAoB,OAZL,cAAgC;GAChD,MAAM,eAAe,MAAM,QAAQ,iBAAiB,GAChD,mBACA,mBACE,OAAO,OAAO,iBAAiB,GAC/B,EAAE;GACR,MAAM,kBAAkB,OAAO,OAAO,EAAE,EAAE,GAAG,aAAa;GAC1D,MAAM,KAAK,QAAgC,gBAAgB,QAAQ;AACnE,UAAO;IAAE,QAAQ;IAAe;IAAG;KAClC,CAAC,eAAe,iBAAiB,CAAC;YAIjC,oBAAC;GAAc,OAAO,UAAU;aAC9B,oBAAC;IAAgB,OAAO;IAAS;KAA2B;IAC9C;GACI;EAG3B;AAKD,MAAMA,eAAsB,EAAE,KAAK,SAAS,WAC1C,UAAU;CAAE;CAAM;CAAK,OAAO;CAAU;CAAS,CAAC;AAEpD,MAAa,iBAAwB;CACnC,MAAM,SAAS,IAAI,cAAc;AACjC,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,QAAQ,UAAU,SACpB,SAAQ,EAAE,KAAK,SAAS,WACtB,UAAU;EAAE;EAAM;EAAK,OAAO,OAAO;EAAc;EAAS,CAAC;AACjE,QAAO,QAAQ,eAAe;;AAIhC,MAAa,gBAAgB,IAAI,oBAAoB;AAKrD,6BAAe"}

package/es/CopyButton/CopyButton.d.mts

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

package/es/DatePicker/DatePicker.d.mts

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

package/es/DraggablePanel/components/DraggablePanelBody.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react37 from "react";
+import * as react43 from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelBody.d.ts
 type DraggablePanelBodyProps = DivProps;
-declare const DraggablePanelBody: react37.NamedExoticComponent<DivProps>;
+declare const DraggablePanelBody: react43.NamedExoticComponent<DivProps>;
 //#endregion
 export { DraggablePanelBody, DraggablePanelBodyProps };
 //# sourceMappingURL=DraggablePanelBody.d.mts.map

package/es/DraggablePanel/components/DraggablePanelContainer.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react38 from "react";
+import * as react44 from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelContainer.d.ts
 type DraggablePanelContainerProps = DivProps;
-declare const DraggablePanelContainer: react38.NamedExoticComponent<DivProps>;
+declare const DraggablePanelContainer: react44.NamedExoticComponent<DivProps>;
 //#endregion
 export { DraggablePanelContainer, DraggablePanelContainerProps };
 //# sourceMappingURL=DraggablePanelContainer.d.mts.map

package/es/DraggablePanel/components/DraggablePanelFooter.d.mts

@@ -1,9 +1,9 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react39 from "react";
+import * as react45 from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelFooter.d.ts
 type DraggablePanelFooterProps = DivProps;
-declare const DraggablePanelFooter: react39.NamedExoticComponent<DivProps>;
+declare const DraggablePanelFooter: react45.NamedExoticComponent<DivProps>;
 //#endregion
 export { DraggablePanelFooter, DraggablePanelFooterProps };
 //# sourceMappingURL=DraggablePanelFooter.d.mts.map

package/es/DraggablePanel/components/DraggablePanelHeader.d.mts

@@ -1,5 +1,5 @@
 import { DivProps } from "../../types/index.mjs";
-import * as react40 from "react";
+import * as react46 from "react";
 
 //#region src/DraggablePanel/components/DraggablePanelHeader.d.ts
 interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {
@@ -9,7 +9,7 @@ interface DraggablePanelHeaderProps extends Omit<DivProps, 'children'> {
   setPin?: (pin: boolean) => void;
   title?: string;
 }
-declare const DraggablePanelHeader: react40.NamedExoticComponent<DraggablePanelHeaderProps>;
+declare const DraggablePanelHeader: react46.NamedExoticComponent<DraggablePanelHeaderProps>;
 //#endregion
 export { DraggablePanelHeader, DraggablePanelHeaderProps };
 //# sourceMappingURL=DraggablePanelHeader.d.mts.map

package/es/DraggableSideNav/DraggableSideNav.d.mts

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

package/es/Drawer/Drawer.d.mts

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

package/es/Dropdown/Dropdown.d.mts

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

package/es/EditableText/EditableText.d.mts

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

package/es/EmojiPicker/EmojiPicker.d.mts

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

package/es/Flex/FlexBasic.d.mts

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

package/es/FontLoader/index.d.mts

@@ -1,10 +1,10 @@
-import * as react65 from "react";
+import * as react58 from "react";
 
 //#region src/FontLoader/index.d.ts
 interface FontLoaderProps {
   url: string;
 }
-declare const FontLoader: react65.NamedExoticComponent<FontLoaderProps>;
+declare const FontLoader: react58.NamedExoticComponent<FontLoaderProps>;
 //#endregion
 export { FontLoader, FontLoaderProps };
 //# sourceMappingURL=index.d.mts.map

package/es/Footer/Footer.d.mts

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

package/es/Form/components/FormGroup.d.mts

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

package/es/Form/components/FormItem.d.mts

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

package/es/Form/components/FormSubmitFooter.d.mts

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

package/es/Form/components/FormSubmitFooter.mjs

@@ -1,6 +1,6 @@
 'use client';
 
-import { MotionComponent } from "../../MotionProvider/index.mjs";
+import { useMotionComponent } from "../../MotionProvider/index.mjs";
 import FlexBasic_default from "../../Flex/FlexBasic.mjs";
 import Icon_default from "../../Icon/Icon.mjs";
 import Button_default from "../../Button/Button.mjs";
@@ -9,7 +9,7 @@ import { useSubmitFooterStyles } from "../style.mjs";
 import { useFormContext } from "./FormProvider.mjs";
 import form_default from "../../i18n/resources/en/form.mjs";
 import { merge, removeUndefined } from "./merge.mjs";
-import { memo, use, useEffect, useMemo, useState } from "react";
+import { memo, useEffect, useMemo, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Form } from "antd";
 import { InfoIcon } from "lucide-react";
@@ -17,7 +17,7 @@ import isEqual from "fast-deep-equal";
 
 //#region src/Form/components/FormSubmitFooter.tsx
 const FormSubmitFooter = memo(({ enableReset = true, buttonProps, float, onReset, saveButtonProps, resetButtonProps, enableUnsavedWarning, children, texts, className, ...rest }) => {
-	const Motion = use(MotionComponent);
+	const Motion = useMotionComponent();
 	const { form, initialValues, submitLoading } = useFormContext();
 	const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 	const values = Form.useWatch([], form) || {};

package/es/Form/components/FormSubmitFooter.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormSubmitFooter.mjs","names":["formMessages","useStyles","Icon","Button","Flexbox"],"sources":["../../../src/Form/components/FormSubmitFooter.tsx"],"sourcesContent":["'use client';\n\nimport { Form } from 'antd';\nimport isEqual from 'fast-deep-equal';\nimport { InfoIcon } from 'lucide-react';\nimport { memo, use, useEffect, useMemo, useState } from 'react';\n\nimport Button from '@/Button';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { MotionComponent } from '@/MotionProvider';\nimport formMessages from '@/i18n/resources/en/form';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { useSubmitFooterStyles as useStyles } from '../style';\nimport type { FormSubmitFooterProps } from '../type';\nimport { useFormContext } from './FormProvider';\nimport { merge, removeUndefined } from './merge';\n\nconst FormSubmitFooter = memo<FormSubmitFooterProps>(\n  ({\n    enableReset = true,\n    buttonProps,\n    float,\n    onReset,\n    saveButtonProps,\n    resetButtonProps,\n    enableUnsavedWarning,\n    children,\n    texts,\n    className,\n    ...rest\n  }) => {\n    const Motion = use(MotionComponent);\n    const { form, initialValues, submitLoading } = useFormContext();\n    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n    const values = Form.useWatch([], form) || {};\n    const { t } = useTranslation(formMessages);\n\n    const { cx, styles, theme } = useStyles();\n\n    const v = useMemo(() => removeUndefined(values), [values]);\n\n    const initialV = useMemo(() => removeUndefined(initialValues), [initialValues]);\n\n    const mergedV = useMemo(() => merge(initialV, v), [v, initialV]);\n\n    useEffect(() => {\n      setHasUnsavedChanges(!isEqual(mergedV, initialV));\n    }, [mergedV, initialV, submitLoading]);\n\n    const unsavedWarningText = texts?.unSavedWarning ?? t('form.unsavedWarning');\n    const unsavedText = texts?.unSaved ?? t('form.unsavedChanges');\n    const resetText = texts?.reset ?? t('form.reset');\n    const submitText = texts?.submit ?? t('form.submit');\n\n    const fn = (e: BeforeUnloadEvent) => {\n      if (hasUnsavedChanges) {\n        e.returnValue = unsavedWarningText;\n      } else {\n        delete e.returnValue;\n      }\n    };\n\n    useEffect(() => {\n      if (!enableUnsavedWarning) return;\n      if (typeof window === 'undefined' || !hasUnsavedChanges) return;\n      // 添加离开页面的提示\n      window.addEventListener('beforeunload', fn);\n      return () => window.removeEventListener('beforeunload', fn);\n    }, [enableUnsavedWarning, hasUnsavedChanges, unsavedWarningText]);\n\n    const content = (\n      <>\n        {(float || hasUnsavedChanges) && (\n          <>\n            <Icon\n              color={theme.colorTextDescription}\n              icon={InfoIcon}\n              size={12}\n              style={{ marginLeft: 8 }}\n            />\n            <span\n              style={{\n                color: theme.colorTextDescription,\n                flex: 'none',\n                fontSize: 12,\n                marginRight: float ? 16 : 4,\n              }}\n            >\n              {unsavedText}\n            </span>\n          </>\n        )}\n        {children}\n        {enableReset && (float || hasUnsavedChanges) && (\n          <Button\n            htmlType=\"button\"\n            onClick={() => {\n              onReset?.(v, initialV);\n              form?.resetFields();\n            }}\n            shape={float ? 'round' : undefined}\n            variant={'filled'}\n            {...buttonProps}\n            {...resetButtonProps}\n          >\n            {resetText}\n          </Button>\n        )}\n        <Button\n          htmlType=\"submit\"\n          loading={submitLoading}\n          shape={float ? 'round' : undefined}\n          type=\"primary\"\n          {...buttonProps}\n          {...saveButtonProps}\n        >\n          {submitText}\n        </Button>\n      </>\n    );\n\n    if (!float)\n      return (\n        <Flexbox\n          align={'center'}\n          className={cx(styles.footer, className)}\n          gap={8}\n          horizontal\n          justify={'flex-end'}\n          {...rest}\n        >\n          {content}\n        </Flexbox>\n      );\n\n    return (\n      <Motion.div\n        animate={hasUnsavedChanges ? 'visible' : 'hidden'}\n        className={styles.floatFooter}\n        initial={'hidden'}\n        transition={{ duration: 0.1, ease: 'easeOut' }}\n        variants={{\n          hidden: {\n            opacity: 0,\n            x: '-50%',\n            y: 20,\n          },\n          visible: {\n            opacity: 1,\n            x: '-50%',\n            y: 0,\n          },\n        }}\n      >\n        <Flexbox\n          align={'center'}\n          className={className}\n          gap={8}\n          horizontal\n          justify={'center'}\n          {...rest}\n        >\n          {content}\n        </Flexbox>\n      </Motion.div>\n    );\n  },\n);\n\nFormSubmitFooter.displayName = 'FormSubmitFooter';\n\nexport default FormSubmitFooter;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,MAAM,mBAAmB,MACtB,EACC,cAAc,MACd,aACA,OACA,SACA,iBACA,kBACA,sBACA,UACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,SAAS,IAAI,gBAAgB;CACnC,MAAM,EAAE,MAAM,eAAe,kBAAkB,gBAAgB;CAC/D,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;CACjE,MAAM,SAAS,KAAK,SAAS,EAAE,EAAE,KAAK,IAAI,EAAE;CAC5C,MAAM,EAAE,MAAM,eAAeA,aAAa;CAE1C,MAAM,EAAE,IAAI,QAAQ,UAAUC,uBAAW;CAEzC,MAAM,IAAI,cAAc,gBAAgB,OAAO,EAAE,CAAC,OAAO,CAAC;CAE1D,MAAM,WAAW,cAAc,gBAAgB,cAAc,EAAE,CAAC,cAAc,CAAC;CAE/E,MAAM,UAAU,cAAc,MAAM,UAAU,EAAE,EAAE,CAAC,GAAG,SAAS,CAAC;AAEhE,iBAAgB;AACd,uBAAqB,CAAC,QAAQ,SAAS,SAAS,CAAC;IAChD;EAAC;EAAS;EAAU;EAAc,CAAC;CAEtC,MAAM,qBAAqB,OAAO,kBAAkB,EAAE,sBAAsB;CAC5E,MAAM,cAAc,OAAO,WAAW,EAAE,sBAAsB;CAC9D,MAAM,YAAY,OAAO,SAAS,EAAE,aAAa;CACjD,MAAM,aAAa,OAAO,UAAU,EAAE,cAAc;CAEpD,MAAM,MAAM,MAAyB;AACnC,MAAI,kBACF,GAAE,cAAc;MAEhB,QAAO,EAAE;;AAIb,iBAAgB;AACd,MAAI,CAAC,qBAAsB;AAC3B,MAAI,OAAO,WAAW,eAAe,CAAC,kBAAmB;AAEzD,SAAO,iBAAiB,gBAAgB,GAAG;AAC3C,eAAa,OAAO,oBAAoB,gBAAgB,GAAG;IAC1D;EAAC;EAAsB;EAAmB;EAAmB,CAAC;CAEjE,MAAM,UACJ;GACI,SAAS,sBACT,8CACE,oBAACC;GACC,OAAO,MAAM;GACb,MAAM;GACN,MAAM;GACN,OAAO,EAAE,YAAY,GAAG;IACxB,EACF,oBAAC;GACC,OAAO;IACL,OAAO,MAAM;IACb,MAAM;IACN,UAAU;IACV,aAAa,QAAQ,KAAK;IAC3B;aAEA;IACI,IACN;EAEJ;EACA,gBAAgB,SAAS,sBACxB,oBAACC;GACC,UAAS;GACT,eAAe;AACb,cAAU,GAAG,SAAS;AACtB,UAAM,aAAa;;GAErB,OAAO,QAAQ,UAAU;GACzB,SAAS;GACT,GAAI;GACJ,GAAI;aAEH;IACM;EAEX,oBAACA;GACC,UAAS;GACT,SAAS;GACT,OAAO,QAAQ,UAAU;GACzB,MAAK;GACL,GAAI;GACJ,GAAI;aAEH;IACM;KACR;AAGL,KAAI,CAAC,MACH,QACE,oBAACC;EACC,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,UAAU;EACvC,KAAK;EACL;EACA,SAAS;EACT,GAAI;YAEH;GACO;AAGd,QACE,oBAAC,OAAO;EACN,SAAS,oBAAoB,YAAY;EACzC,WAAW,OAAO;EAClB,SAAS;EACT,YAAY;GAAE,UAAU;GAAK,MAAM;GAAW;EAC9C,UAAU;GACR,QAAQ;IACN,SAAS;IACT,GAAG;IACH,GAAG;IACJ;GACD,SAAS;IACP,SAAS;IACT,GAAG;IACH,GAAG;IACJ;GACF;YAED,oBAACA;GACC,OAAO;GACI;GACX,KAAK;GACL;GACA,SAAS;GACT,GAAI;aAEH;IACO;GACC;EAGlB;AAED,iBAAiB,cAAc;AAE/B,+BAAe"}
+{"version":3,"file":"FormSubmitFooter.mjs","names":["formMessages","useStyles","Icon","Button","Flexbox"],"sources":["../../../src/Form/components/FormSubmitFooter.tsx"],"sourcesContent":["'use client';\n\nimport { Form } from 'antd';\nimport isEqual from 'fast-deep-equal';\nimport { InfoIcon } from 'lucide-react';\nimport { memo, useEffect, useMemo, useState } from 'react';\n\nimport Button from '@/Button';\nimport { Flexbox } from '@/Flex';\nimport Icon from '@/Icon';\nimport { useMotionComponent } from '@/MotionProvider';\nimport formMessages from '@/i18n/resources/en/form';\nimport { useTranslation } from '@/i18n/useTranslation';\n\nimport { useSubmitFooterStyles as useStyles } from '../style';\nimport type { FormSubmitFooterProps } from '../type';\nimport { useFormContext } from './FormProvider';\nimport { merge, removeUndefined } from './merge';\n\nconst FormSubmitFooter = memo<FormSubmitFooterProps>(\n  ({\n    enableReset = true,\n    buttonProps,\n    float,\n    onReset,\n    saveButtonProps,\n    resetButtonProps,\n    enableUnsavedWarning,\n    children,\n    texts,\n    className,\n    ...rest\n  }) => {\n    const Motion = useMotionComponent();\n    const { form, initialValues, submitLoading } = useFormContext();\n    const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);\n    const values = Form.useWatch([], form) || {};\n    const { t } = useTranslation(formMessages);\n\n    const { cx, styles, theme } = useStyles();\n\n    const v = useMemo(() => removeUndefined(values), [values]);\n\n    const initialV = useMemo(() => removeUndefined(initialValues), [initialValues]);\n\n    const mergedV = useMemo(() => merge(initialV, v), [v, initialV]);\n\n    useEffect(() => {\n      setHasUnsavedChanges(!isEqual(mergedV, initialV));\n    }, [mergedV, initialV, submitLoading]);\n\n    const unsavedWarningText = texts?.unSavedWarning ?? t('form.unsavedWarning');\n    const unsavedText = texts?.unSaved ?? t('form.unsavedChanges');\n    const resetText = texts?.reset ?? t('form.reset');\n    const submitText = texts?.submit ?? t('form.submit');\n\n    const fn = (e: BeforeUnloadEvent) => {\n      if (hasUnsavedChanges) {\n        e.returnValue = unsavedWarningText;\n      } else {\n        delete e.returnValue;\n      }\n    };\n\n    useEffect(() => {\n      if (!enableUnsavedWarning) return;\n      if (typeof window === 'undefined' || !hasUnsavedChanges) return;\n      // 添加离开页面的提示\n      window.addEventListener('beforeunload', fn);\n      return () => window.removeEventListener('beforeunload', fn);\n    }, [enableUnsavedWarning, hasUnsavedChanges, unsavedWarningText]);\n\n    const content = (\n      <>\n        {(float || hasUnsavedChanges) && (\n          <>\n            <Icon\n              color={theme.colorTextDescription}\n              icon={InfoIcon}\n              size={12}\n              style={{ marginLeft: 8 }}\n            />\n            <span\n              style={{\n                color: theme.colorTextDescription,\n                flex: 'none',\n                fontSize: 12,\n                marginRight: float ? 16 : 4,\n              }}\n            >\n              {unsavedText}\n            </span>\n          </>\n        )}\n        {children}\n        {enableReset && (float || hasUnsavedChanges) && (\n          <Button\n            htmlType=\"button\"\n            onClick={() => {\n              onReset?.(v, initialV);\n              form?.resetFields();\n            }}\n            shape={float ? 'round' : undefined}\n            variant={'filled'}\n            {...buttonProps}\n            {...resetButtonProps}\n          >\n            {resetText}\n          </Button>\n        )}\n        <Button\n          htmlType=\"submit\"\n          loading={submitLoading}\n          shape={float ? 'round' : undefined}\n          type=\"primary\"\n          {...buttonProps}\n          {...saveButtonProps}\n        >\n          {submitText}\n        </Button>\n      </>\n    );\n\n    if (!float)\n      return (\n        <Flexbox\n          align={'center'}\n          className={cx(styles.footer, className)}\n          gap={8}\n          horizontal\n          justify={'flex-end'}\n          {...rest}\n        >\n          {content}\n        </Flexbox>\n      );\n\n    return (\n      <Motion.div\n        animate={hasUnsavedChanges ? 'visible' : 'hidden'}\n        className={styles.floatFooter}\n        initial={'hidden'}\n        transition={{ duration: 0.1, ease: 'easeOut' }}\n        variants={{\n          hidden: {\n            opacity: 0,\n            x: '-50%',\n            y: 20,\n          },\n          visible: {\n            opacity: 1,\n            x: '-50%',\n            y: 0,\n          },\n        }}\n      >\n        <Flexbox\n          align={'center'}\n          className={className}\n          gap={8}\n          horizontal\n          justify={'center'}\n          {...rest}\n        >\n          {content}\n        </Flexbox>\n      </Motion.div>\n    );\n  },\n);\n\nFormSubmitFooter.displayName = 'FormSubmitFooter';\n\nexport default FormSubmitFooter;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,MAAM,mBAAmB,MACtB,EACC,cAAc,MACd,aACA,OACA,SACA,iBACA,kBACA,sBACA,UACA,OACA,WACA,GAAG,WACC;CACJ,MAAM,SAAS,oBAAoB;CACnC,MAAM,EAAE,MAAM,eAAe,kBAAkB,gBAAgB;CAC/D,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,MAAM;CACjE,MAAM,SAAS,KAAK,SAAS,EAAE,EAAE,KAAK,IAAI,EAAE;CAC5C,MAAM,EAAE,MAAM,eAAeA,aAAa;CAE1C,MAAM,EAAE,IAAI,QAAQ,UAAUC,uBAAW;CAEzC,MAAM,IAAI,cAAc,gBAAgB,OAAO,EAAE,CAAC,OAAO,CAAC;CAE1D,MAAM,WAAW,cAAc,gBAAgB,cAAc,EAAE,CAAC,cAAc,CAAC;CAE/E,MAAM,UAAU,cAAc,MAAM,UAAU,EAAE,EAAE,CAAC,GAAG,SAAS,CAAC;AAEhE,iBAAgB;AACd,uBAAqB,CAAC,QAAQ,SAAS,SAAS,CAAC;IAChD;EAAC;EAAS;EAAU;EAAc,CAAC;CAEtC,MAAM,qBAAqB,OAAO,kBAAkB,EAAE,sBAAsB;CAC5E,MAAM,cAAc,OAAO,WAAW,EAAE,sBAAsB;CAC9D,MAAM,YAAY,OAAO,SAAS,EAAE,aAAa;CACjD,MAAM,aAAa,OAAO,UAAU,EAAE,cAAc;CAEpD,MAAM,MAAM,MAAyB;AACnC,MAAI,kBACF,GAAE,cAAc;MAEhB,QAAO,EAAE;;AAIb,iBAAgB;AACd,MAAI,CAAC,qBAAsB;AAC3B,MAAI,OAAO,WAAW,eAAe,CAAC,kBAAmB;AAEzD,SAAO,iBAAiB,gBAAgB,GAAG;AAC3C,eAAa,OAAO,oBAAoB,gBAAgB,GAAG;IAC1D;EAAC;EAAsB;EAAmB;EAAmB,CAAC;CAEjE,MAAM,UACJ;GACI,SAAS,sBACT,8CACE,oBAACC;GACC,OAAO,MAAM;GACb,MAAM;GACN,MAAM;GACN,OAAO,EAAE,YAAY,GAAG;IACxB,EACF,oBAAC;GACC,OAAO;IACL,OAAO,MAAM;IACb,MAAM;IACN,UAAU;IACV,aAAa,QAAQ,KAAK;IAC3B;aAEA;IACI,IACN;EAEJ;EACA,gBAAgB,SAAS,sBACxB,oBAACC;GACC,UAAS;GACT,eAAe;AACb,cAAU,GAAG,SAAS;AACtB,UAAM,aAAa;;GAErB,OAAO,QAAQ,UAAU;GACzB,SAAS;GACT,GAAI;GACJ,GAAI;aAEH;IACM;EAEX,oBAACA;GACC,UAAS;GACT,SAAS;GACT,OAAO,QAAQ,UAAU;GACzB,MAAK;GACL,GAAI;GACJ,GAAI;aAEH;IACM;KACR;AAGL,KAAI,CAAC,MACH,QACE,oBAACC;EACC,OAAO;EACP,WAAW,GAAG,OAAO,QAAQ,UAAU;EACvC,KAAK;EACL;EACA,SAAS;EACT,GAAI;YAEH;GACO;AAGd,QACE,oBAAC,OAAO;EACN,SAAS,oBAAoB,YAAY;EACzC,WAAW,OAAO;EAClB,SAAS;EACT,YAAY;GAAE,UAAU;GAAK,MAAM;GAAW;EAC9C,UAAU;GACR,QAAQ;IACN,SAAS;IACT,GAAG;IACH,GAAG;IACJ;GACD,SAAS;IACP,SAAS;IACT,GAAG;IACH,GAAG;IACJ;GACF;YAED,oBAACA;GACC,OAAO;GACI;GACX,KAAK;GACL;GACA,SAAS;GACT,GAAI;aAEH;IACO;GACC;EAGlB;AAED,iBAAiB,cAAc;AAE/B,+BAAe"}

package/es/FormModal/FormModal.d.mts

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