@lobehub/ui 1.153.0 → 1.153.5

package/README.md

@@ -10,7 +10,7 @@
 
 Lobe UI is an open-source UI component library for building _AIGC_ web apps
 
-English ・ [简体中文](./README.zh-CN.md) ・ [Changelog](./CHANGELOG.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link]
+[Documents](https://ui.lobehub.com) · [Changelog](./CHANGELOG.md) · [Report Bug][github-issues-link] · [Request Feature][github-issues-link]
 
 <!-- SHIELD GROUP -->
 
@@ -41,7 +41,11 @@ English ・ [简体中文](./README.zh-CN.md) ・ [Changelog](./CHANGELOG.md) ·
 - [🤯 Usage](#-usage)
 - [⌨️ Local Development](#️-local-development)
 - [🤝 Contributing](#-contributing)
-- [🔗 More Products](#-more-products)
+- [🩷 Sponsor](#-sponsor)
+- [🔗 Links](#-links)
+  - [More Products](#more-products)
+  - [Design Resources](#design-resources)
+  - [Development Resources](#development-resources)
 
 ####
 
@@ -155,13 +159,26 @@ Every bit counts and your one-time donation sparkles in our galaxy of support! Y
 
 </div>
 
-## 🔗 More Products
+## 🔗 Links
 
-- **[🤖 Lobe Chat][lobe-chat] :** An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application.
-- **[🤯 Lobe Theme][lobe-theme] :** The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.
-- **[🥨 Lobe Icons][lobe-icons] :** Popular AI / LLM Model Brand SVG Logo and Icon Collection.
-- **[🌏 Lobe i18n][lobe-i18n] :** Lobe i18n is an automation tool for the i18n (internationalization) translation process, powered by ChatGPT. It supports features such as automatic splitting of large files, incremental updates, and customization options for the OpenAI model, API proxy, and temperature.
-- **[💌 Lobe Commit][lobe-commit] :** Lobe Commit is a CLI tool that leverages Langchain/ChatGPT to generate Gitmoji-based commit messages.
+### More Products
+
+- **[🤯 Lobe Chat](https://github.com/lobehub/lobe-chat)** - An open-source, extensible (Function Calling), high-performance chatbot framework. It supports one-click free deployment of your private ChatGPT/LLM web application.
+- **[🅰️ Lobe Theme](https://github.com/lobehub/sd-webui-lobe-theme)** - The modern theme for stable diffusion webui, exquisite interface design, highly customizable UI, and efficiency boosting features.
+- **[🧸 Lobe Vidol](https://github.com/lobehub/lobe-vidol)** - Experience the magic of virtual idol creation with Lobe Vidol, enjoy the elegance of our Exquisite UI Design, dance along using MMD Dance Support, and engage in Smooth Conversations.
+
+### Design Resources
+
+- **[🍭 Lobe UI](https://ui.lobehub.com)** - An open-source UI component library for building AIGC web apps.
+- **[🥨 Lobe Icons](https://lobehub.com/icons)** - Popular AI / LLM Model Brand SVG Logo and Icon Collection.
+- **[📊 Lobe Charts](https://charts.lobehub.com)** - React modern charts components built on recharts
+
+### Development Resources
+
+- **[🎤 Lobe TTS](https://tts.lobehub.com)** - A high-quality & reliable TTS/STT library for Server and Browser
+- **[🌏 Lobe i18n](https://github.com/lobehub/lobe-cli-toolbox/blob/master/packages/lobe-i18n)** - Automation ai tool for the i18n (internationalization) translation process.
+
+[More Resources](https://lobehub.com/resources)
 
 <div align="right">
 
@@ -210,11 +227,6 @@ This project is [MIT](./LICENSE) licensed.
 [github-releasedate-shield]: https://img.shields.io/github/release-date/lobehub/lobe-ui?labelColor=black&style=flat-square
 [github-stars-link]: https://github.com/lobehub/lobe-ui/network/stargazers
 [github-stars-shield]: https://img.shields.io/github/stars/lobehub/lobe-ui?color=ffcb47&labelColor=black&style=flat-square
-[lobe-chat]: https://github.com/lobehub/lobe-chat
-[lobe-commit]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-commit
-[lobe-i18n]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-i18n
-[lobe-theme]: https://github.com/lobehub/sd-webui-lobe-theme
-[lobe-icons]: https://github.com/lobehub/lobe-icons
 [npm-downloads-link]: https://www.npmjs.com/package/@lobehub/ui
 [npm-downloads-shield]: https://img.shields.io/npm/dt/@lobehub/ui?labelColor=black&style=flat-square
 [npm-release-link]: https://www.npmjs.com/package/@lobehub/ui

package/es/AuroraBackground/index.js

@@ -12,13 +12,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
   var isDarkMode = _ref.isDarkMode,
-    css = _ref.css;
+    css = _ref.css,
+    responsive = _ref.responsive;
   var aurora = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    background-position: 50% 50%, 50% 50%;\n  }\n  100% {\n    background-position: 350% 50%, 350% 50%;\n  }\n"])));
   var dark = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    background-image: repeating-linear-gradient(\n        100deg,\n        rgb(0, 0, 0) 0%,\n        rgb(0, 0, 0) 7%,\n        rgba(0, 0, 0, 0%) 10%,\n        rgba(0, 0, 0, 0%) 12%,\n        rgb(0, 0, 0) 16%\n      ),\n      repeating-linear-gradient(\n        100deg,\n        rgb(59, 130, 246) 10%,\n        rgb(165, 180, 252) 15%,\n        rgb(147, 197, 253) 20%,\n        rgb(221, 214, 254) 25%,\n        rgb(96, 165, 250) 30%\n      );\n  "])));
   var light = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    background-image: repeating-linear-gradient(\n        100deg,\n        rgb(255, 255, 255) 0%,\n        rgb(255, 255, 255) 7%,\n        rgba(0, 0, 0, 0%) 10%,\n        rgba(0, 0, 0, 0%) 12%,\n        rgb(255, 255, 255) 16%\n      ),\n      repeating-linear-gradient(\n        100deg,\n        rgb(59, 130, 246) 10%,\n        rgb(165, 180, 252) 15%,\n        rgb(147, 197, 253) 20%,\n        rgb(221, 214, 254) 25%,\n        rgb(96, 165, 250) 30%\n      );\n  "])));
   var background = isDarkMode ? dark : light;
   return {
-    bg: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      ", ";\n      animation: ", " 100s linear infinite;\n\n      background-size: 300%, 200%;\n      background-position:\n        50% 50%,\n        50% 50%;\n      filter: blur(10px) invert(", ");\n\n      pointer-events: none;\n\n      position: absolute;\n      inset: -10px;\n\n      mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);\n\n      opacity: ", ";\n\n      will-change: transform;\n\n      max-height: 100vh;\n\n      &::after {\n        ", ";\n        position: absolute;\n\n        content: '';\n\n        inset: 0;\n\n        animation: ", " 100s linear infinite;\n\n        mix-blend-mode: difference;\n        background-attachment: fixed;\n        background-size: 200%, 100%;\n      }\n    "])), background, aurora, isDarkMode ? 0 : 1, isDarkMode ? 0.3 : 0.6, background, aurora),
+    bg: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      ", ";\n      animation: ", " 100s linear infinite;\n\n      background-size: 300%, 200%;\n      background-position:\n        50% 50%,\n        50% 50%;\n      filter: blur(10px) invert(", ");\n\n      pointer-events: none;\n\n      position: absolute;\n      inset: -10px;\n\n      mask-image: radial-gradient(at 100% 0, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0%) 70%);\n\n      opacity: ", ";\n\n      will-change: transform;\n\n      max-height: 100vh;\n\n      &::after {\n        ", ";\n        position: absolute;\n\n        content: '';\n\n        inset: 0;\n\n        animation: ", " 100s linear infinite;\n\n        mix-blend-mode: difference;\n        background-attachment: fixed;\n        background-size: 200%, 100%;\n      }\n\n      ", " {\n        transform: scale(2);\n        max-height: 25vh;\n      }\n    "])), background, aurora, isDarkMode ? 0 : 1, isDarkMode ? 0.3 : 0.6, background, aurora, responsive.mobile),
     wrapper: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: absolute;\n      z-index: 0;\n      inset: 0;\n      overflow: hidden;\n    "])))
   };
 });

package/es/Hero/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { ElementType } from 'react';
 export interface HeroAction {
     /**
      * @description Icon name from LucideIcon package
@@ -24,6 +24,7 @@ export interface HeroAction {
     type?: 'primary' | 'default';
 }
 export interface HeroProps {
+    Link?: ElementType;
     /**
      * @description Array of action buttons to be displayed
      * @default []

package/es/Hero/index.js

@@ -2,9 +2,10 @@
 
 import { Button, ConfigProvider } from 'antd';
 import { useResponsive } from 'antd-style';
-import * as LucideIcon from 'lucide-react';
+import { Github } from 'lucide-react';
 import { memo, useCallback } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
+import A from "../A";
 import AuroraBackground from "../AuroraBackground";
 import GradientButton from "../GradientButton";
 import Icon from "../Icon";
@@ -15,11 +16,13 @@ import { Fragment as _Fragment } from "react/jsx-runtime";
 var Hero = /*#__PURE__*/memo(function (_ref) {
   var title = _ref.title,
     description = _ref.description,
-    actions = _ref.actions;
+    actions = _ref.actions,
+    Link = _ref.Link;
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile;
+  var LinkRender = Link || A;
   var ButtonGroups = useCallback(function () {
     return Boolean(actions === null || actions === void 0 ? void 0 : actions.length) && /*#__PURE__*/_jsx(Flexbox, {
       className: styles.actions,
@@ -33,27 +36,28 @@ var Hero = /*#__PURE__*/memo(function (_ref) {
           icon = _ref2.icon,
           type = _ref2.type;
         // @ts-ignore
-        var ButtonIcon = icon && LucideIcon[icon];
-        return /*#__PURE__*/_jsx("a", {
+        var ButtonIcon = icon === 'Github' ? /*#__PURE__*/_jsx(Icon, {
+          icon: Github
+        }) : icon;
+        var content = type === 'primary' ? /*#__PURE__*/_jsx(GradientButton, {
+          block: mobile,
+          icon: ButtonIcon,
+          size: "large",
+          children: text
+        }, index) : /*#__PURE__*/_jsx(Button, {
+          block: mobile,
+          icon: ButtonIcon,
+          size: "large",
+          type: "primary",
+          children: text
+        }, index);
+        return openExternal ? /*#__PURE__*/_jsx(A, {
           href: link,
-          rel: "noreferrer",
           target: openExternal ? '_blank' : undefined,
-          children: type === 'primary' ? /*#__PURE__*/_jsx(GradientButton, {
-            block: mobile,
-            icon: ButtonIcon && /*#__PURE__*/_jsx(Icon, {
-              icon: ButtonIcon
-            }),
-            size: "large",
-            children: text
-          }, index) : /*#__PURE__*/_jsx(Button, {
-            block: mobile,
-            icon: ButtonIcon && /*#__PURE__*/_jsx(Icon, {
-              icon: ButtonIcon
-            }),
-            size: "large",
-            type: "primary",
-            children: text
-          }, index)
+          children: content
+        }, text) : /*#__PURE__*/_jsx(LinkRender, {
+          to: link,
+          children: content
         }, text);
       })
     });
@@ -75,11 +79,15 @@ var Hero = /*#__PURE__*/memo(function (_ref) {
           distribution: 'center',
           horizontal: true,
           children: /*#__PURE__*/_jsxs(Center, {
-            children: [title && /*#__PURE__*/_jsx("h1", {
+            children: [title && /*#__PURE__*/_jsx(Center, {
+              as: 'h1',
               className: styles.title,
               dangerouslySetInnerHTML: {
                 __html: title
-              }
+              },
+              gap: '0.25em',
+              horizontal: true,
+              wrap: 'wrap'
             }), description && /*#__PURE__*/_jsx("p", {
               className: styles.desc,
               dangerouslySetInnerHTML: {

package/es/Hero/style.js

@@ -10,13 +10,6 @@ export var useStyles = createStyles(function (_ref) {
     actions: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin-block-start: 24px;\n\n    button {\n      padding-inline: 32px !important;\n      font-weight: 500;\n    }\n\n    ", " {\n      flex-direction: column;\n      gap: 16px;\n      width: 100%;\n      margin-block-start: 24px;\n\n      button {\n        width: 100%;\n      }\n    }\n  "])), responsive.mobile),
     container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    box-sizing: border-box;\n    text-align: center;\n  "]))),
     desc: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-block-start: 0;\n    font-size: ", "px;\n    color: ", ";\n    text-align: center;\n\n    ", " {\n      margin-block: 24px;\n      margin-inline: 16px;\n      font-size: ", "px;\n    }\n  "])), token.fontSizeHeading3, token.colorTextSecondary, responsive.mobile, token.fontSizeHeading5),
-    title: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    z-index: 10;\n    margin: 0;\n    font-size: 100px;\n\n    ", "\n\n    b {\n      ", "\n      position: relative;\n      z-index: 5;\n      background-clip: text;\n\n      -webkit-text-fill-color: transparent;\n\n      &::selection {\n        -webkit-text-fill-color: #000 !important;\n      }\n    }\n  "])), responsive({
-      mobile: {
-        display: 'flex',
-        flexDirection: 'column',
-        fontSize: 72,
-        lineHeight: 1.2
-      }
-    }), stylish.gradientAnimation)
+    title: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    z-index: 10;\n\n    margin: 0;\n\n    font-size: min(100px, 10vw);\n    line-height: 1.2;\n    text-align: center;\n\n    b {\n      ", "\n      position: relative;\n      z-index: 5;\n      background-clip: text;\n\n      -webkit-text-fill-color: transparent;\n\n      &::selection {\n        -webkit-text-fill-color: #000 !important;\n      }\n    }\n\n    ", " {\n      font-size: 64px;\n    }\n  "])), stylish.gradientAnimation, responsive.mobile)
   };
 });

package/es/ThemeProvider/index.d.ts

@@ -1,7 +1,8 @@
+import { StyleProviderProps as AntdStyleProviderProps } from '@ant-design/cssinjs';
 import { ThemeProviderProps as AntdThemeProviderProps, CustomStylishParams, CustomTokenParams } from 'antd-style';
 import { CSSProperties } from 'react';
 import { NeutralColors, PrimaryColors } from "../styles";
-export interface ThemeProviderProps extends AntdThemeProviderProps<any> {
+export interface ThemeProviderProps extends AntdThemeProviderProps<any>, Pick<AntdStyleProviderProps, 'cache' | 'ssrInline'> {
     className?: string;
     /**
      * @description Webfont loader css strings

package/es/ThemeProvider/index.js

@@ -2,7 +2,7 @@
 
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "customStylish", "customToken", "enableCustomFonts", "enableGlobalStyle", "customFonts", "customTheme", "className", "style", "theme"];
+var _excluded = ["children", "customStylish", "customToken", "enableCustomFonts", "enableGlobalStyle", "customFonts", "customTheme", "className", "style", "cache", "ssrInline", "theme"];
 import { App } from 'antd';
 import { ThemeProvider as AntdThemeProvider, StyleProvider } from 'antd-style';
 import { merge } from 'lodash-es';
@@ -28,8 +28,10 @@ var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
     customTheme = _ref$customTheme === void 0 ? {} : _ref$customTheme,
     className = _ref.className,
     style = _ref.style,
+    cache = _ref.cache,
+    ssrInline = _ref.ssrInline,
     antdTheme = _ref.theme,
-    res = _objectWithoutProperties(_ref, _excluded);
+    rest = _objectWithoutProperties(_ref, _excluded);
   var genCdnUrl = useCdnFn();
   var webfontUrls = customFonts || [genCdnUrl({
     path: 'css/index.css',
@@ -68,12 +70,15 @@ var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
         url: webfont
       }, webfont);
     }), /*#__PURE__*/_jsx(StyleProvider, {
+      cache: cache,
+      prefix: rest === null || rest === void 0 ? void 0 : rest.prefixCls,
       speedy: process.env.NODE_ENV === 'production',
+      ssrInline: ssrInline,
       children: /*#__PURE__*/_jsxs(AntdThemeProvider, _objectSpread(_objectSpread({
         customStylish: stylish,
-        customToken: token
-      }, res), {}, {
-        theme: theme,
+        customToken: token,
+        theme: theme
+      }, rest), {}, {
         children: [enableGlobalStyle && /*#__PURE__*/_jsx(GlobalStyle, {}), /*#__PURE__*/_jsx(App, {
           className: className,
           style: _objectSpread({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.153.0",
+  "version": "1.153.5",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -35,6 +35,7 @@
     "build:watch": "father dev",
     "ci": "npm run lint:circular && npm run lint && npm run type-check",
     "clean": "rm -r es lib dist coverage .dumi/tmp .eslintcache node_modules/.cache",
+    "dev": "dumi dev",
     "docs:build": "dumi build",
     "docs:build-analyze": "ANALYZE=1 dumi build",
     "docs:dev": "dumi dev",
@@ -43,7 +44,7 @@
     "lint:circular": "dpdm src/**/*.{ts,tsx}  --warning false  --tree false  --exit-code circular:1  -T true",
     "lint:md": "remark . --quiet --frail --output",
     "lint:style": "stylelint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix",
-    "prepare": "husky install && npm run setup",
+    "prepare": "husky && npm run setup",
     "prepublishOnly": "father doctor && npm run build",
     "prettier": "prettier -c --write --no-error-on-unmatched-pattern \"**/**\"",
     "pull": "git pull",
@@ -76,7 +77,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/core": "^6.2.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
@@ -88,7 +89,7 @@
     "@react-spring/web": "^9.7.5",
     "@shikijs/transformers": "^1.23.1",
     "@splinetool/runtime": "^0.9.526",
-    "chroma-js": "^2.6.0",
+    "chroma-js": "^3.1.2",
     "dayjs": "^1.11.13",
     "emoji-mart": "^5.6.0",
     "emoji-regex": "^10.4.0",
@@ -120,7 +121,7 @@
     "ts-md5": "^1.3.1",
     "url-join": "^5.0.0",
     "use-merge-value": "^1.2.0",
-    "uuid": "^10.0.0"
+    "uuid": "^11.0.3"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.5.1",
@@ -141,15 +142,15 @@
     "@vitest/coverage-v8": "~1.2.2",
     "babel-plugin-antd-style": "^1.0.4",
     "commitlint": "^19.6.0",
-    "concurrently": "^8.2.2",
+    "concurrently": "^9.1.0",
     "cross-env": "^7.0.3",
     "dpdm": "^3.14.0",
     "dumi": "^2.4.14",
-    "dumi-theme-lobehub": "^1.8.2",
+    "dumi-theme-lobehub": "^1.10.4",
     "eslint": "^8.57.1",
     "father": "^4.5.1",
-    "husky": "9.0.11",
-    "jsdom": "^24.1.3",
+    "husky": "^9.1.7",
+    "jsdom": "^25.0.1",
     "lint-staged": "^15.2.10",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
@@ -158,19 +159,20 @@
     "remark-cli": "^11.0.0",
     "semantic-release": "^21.1.2",
     "stylelint": "^15.11.0",
-    "typescript": "^5.6.3",
+    "typescript": "^5.7.2",
     "unist-util-is": "^6.0.0",
     "unist-util-visit": "^5.0.0",
     "vitest": "~1.2.2"
   },
   "peerDependencies": {
+    "@ant-design/cssinjs": ">=1",
     "ahooks": ">=3",
     "antd": ">=5.13.0",
     "antd-style": ">=3",
     "lucide-react": ">=0.396.0",
     "react": ">=18",
     "react-dom": ">=18",
-    "unified": ">=10.0.0"
+    "unified": ">=10"
   },
   "publishConfig": {
     "access": "public",

package/README.zh-CN.md

@@ -1,224 +0,0 @@
-<a name="readme-top"></a>
-
-<div align="center">
-
-<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-logo/1.0.0/files/assets/logo-3d.webp">
-<img height="120" src="https://gw.alipayobjects.com/zos/kitchen/qJ3l3EPsdW/split.svg">
-<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-emoji/1.3.0/files/assets/lollipop.webp">
-
-<h1>Lobe UI</h1>
-
-Lobe UI 是一个用于构建 _AIGC_ 网页应用的开源 UI 组件库
-
-[English](./README.md) ・ 简体中文 ・ [更新日志](./CHANGELOG.md) · [报告问题][github-issues-link] · [请求功能][github-issues-link]
-
-<!-- SHIELD GROUP -->
-
-[![][npm-release-shield]][npm-release-link]
-[![][vercel-shield]][vercel-link]
-[![][discord-shield]][discord-link]
-[![][npm-downloads-shield]][npm-downloads-link]
-[![][github-releasedate-shield]][github-releasedate-link]
-[![][github-action-test-shield]][github-action-test-link]
-[![][github-action-release-shield]][github-action-release-link]<br/>
-[![][github-contributors-shield]][github-contributors-link]
-[![][github-forks-shield]][github-forks-link]
-[![][github-stars-shield]][github-stars-link]
-[![][github-issues-shield]][github-issues-link]
-[![][github-license-shield]][github-license-link]
-
-[![][banner]][vercel-link]
-
-</div>
-
-<details>
-<summary><kbd>目录</kbd></summary>
-
-#### 目录
-
-- [📦 安装](#-安装)
-  - [使用 NextJS 编译](#使用-nextjs-编译)
-- [🤯 使用](#-使用)
-- [⌨️ 本地开发](#️-本地开发)
-- [🤝 贡献](#-贡献)
-- [🔗 更多产品](#-更多产品)
-
-####
-
-</details>
-
-## 📦 安装
-
-> \[!IMPORTANT]\
-> 该包仅支持 [ESM](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c)。
-
-要安装 Lobe UI，请运行以下命令：
-
-[![][bun-shield]][bun-link]
-
-```bash
-$ bun add @lobehub/ui
-```
-
-### 使用 NextJS 编译
-
-> \[!NOTE]\
-> 为了正确使用 nextjs ssr，请在 `next.config.js` 中添加 `transpilePackages: ['@lobehub/ui']`。例如：
-
-```js
-// next.config.js
-const nextConfig = {
-  // ...其他配置
-
-  transpilePackages: ['@lobehub/ui'],
-};
-```
-
-<div align="right">
-
-[![][back-to-top]](#readme-top)
-
-</div>
-
-## 🤯 使用
-
-> \[!NOTE]\
-> LobeUI 组件是基于 [Antd](https://ant.design/components/overview/) 开发的，完全兼容 Antd 组件，
-> 推荐使用 [antd-style](https://ant-design.github.io/antd-style/) 作为默认的 css-in-js 样式解决方案。
-
-```tsx
-import { ThemeProvider, Button } from '@lobehub/ui'
-import { Button } from 'antd'
-
-export default () => (
-  <ThemeProvider>
-    <Button>Hello AIGC</Button>
-  </ThemeProvider>
-)
-```
-
-<div align="right">
-
-[![][back-to-top]](#readme-top)
-
-</div>
-
-## ⌨️ 本地开发
-
-您可以使用 Github Codespaces 进行在线开发：
-
-[![][codespaces-shield]][codespaces-link]
-
-或者克隆到本地进行开发：
-
-```bash
-$ git clone https://github.com/lobehub/lobe-ui.git
-$ cd lobe-ui
-$ bun install
-$ bun start
-```
-
-<div align="right">
-
-[![][back-to-top]](#readme-top)
-
-</div>
-
-## 🤝 贡献
-
-欢迎各种类型的贡献，如果您有兴趣贡献代码，请随时查看我们的 GitHub [问题][github-issues-link]，并展示您的才华。
-
-[![][pr-welcome-shield]][pr-welcome-link]
-
-[![][contributors-contrib]][contributors-link]
-
-<div align="right">
-
-[![][back-to-top]](#readme-top)
-
-</div>
-
-## 🩷 感谢赞助
-
-每一分支持都珍贵无比，汇聚成我们支持的璀璨银河！你就像一颗划破夜空的流星，瞬间点亮我们前行的道路。感谢你对我们的信任 —— 你的支持笔就像星辰导航，一次又一次地为项目指明前进的光芒。
-
-<a href="https://opencollective.com/lobehub" target="_blank">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/lobehub/.github/blob/main/static/sponsor-dark.png?raw=true">
-    <img  src="https://github.com/lobehub/.github/blob/main/static/sponsor-light.png?raw=true">
-  </picture>
-</a>
-
-<div align="right">
-
-[![][back-to-top]](#readme-top)
-
-</div>
-
-## 🔗 更多产品
-
-- **[🤖 Lobe Chat][lobe-chat] :** 一个开源、可扩展（函数调用）、高性能的聊天机器人框架。支持一键免费部署私有 ChatGPT/LLM 网页应用程序。
-- **[🤯 Lobe Theme][lobe-theme] :** 稳定扩散 WebUI 的现代主题，精美的界面设计，高度可定制的 UI 和提高效率的功能。
-- **[🌏 Lobe i18n][lobe-i18n] :** Lobe i18n 是一个由 ChatGPT 提供支持的自动化工具，用于 i18n（国际化）翻译过程。它支持诸如大文件的自动拆分、增量更新和对 OpenAI 模型、API 代理和温度的自定义选项等功能。
-- **[💌 Lobe Commit][lobe-commit] :** Lobe Commit 是一个利用 Langchain/ChatGPT 生成基于 Gitmoji 的提交消息的 CLI 工具。
-
-<div align="right">
-
-[![][back-to-top]](#readme-top)
-
-</div>
-
----
-
-<details><summary><h4>📝 License</h4></summary>
-
-[![][fossa-license-shield]][fossa-license-link]
-
-</details>
-
-Copyright © 2023 [LobeHub][profile-link]. <br />
-This project is [MIT](./LICENSE) licensed.
-
-<!-- LINK GROUP -->
-
-[back-to-top]: https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square
-[banner]: https://github-production-user-asset-6210df.s3.amazonaws.com/17870709/268452017-960ab8a1-e4b7-4648-beb1-77daf4b6034a.png
-[bun-link]: https://bun.sh
-[bun-shield]: https://img.shields.io/badge/-speedup%20with%20bun-black?logo=bun&style=for-the-badge
-[codespaces-link]: https://codespaces.new/lobehub/lobe-ui
-[codespaces-shield]: https://github.com/codespaces/badge.svg
-[contributors-contrib]: https://contrib.rocks/image?repo=lobehub/lobe-ui
-[contributors-link]: https://github.com/lobehub/lobe-ui/graphs/contributors
-[discord-link]: https://discord.gg/AYFPHvv2jT
-[discord-shield]: https://img.shields.io/discord/1127171173982154893?color=5865F2&label=discord&labelColor=black&logo=discord&logoColor=white&style=flat-square
-[fossa-license-link]: https://app.fossa.com/projects/git%2Bgithub.com%2Flobehub%2Flobe-ui
-[fossa-license-shield]: https://app.fossa.com/api/projects/git%2Bgithub.com%2Flobehub%2Flobe-ui.svg?type=large
-[github-action-release-link]: https://github.com/actions/workflows/lobehub/lobe-ui/release.yml
-[github-action-release-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-ui/release.yml?label=release&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
-[github-action-test-link]: https://github.com/actions/workflows/lobehub/lobe-ui/test.yml
-[github-action-test-shield]: https://img.shields.io/github/actions/workflow/status/lobehub/lobe-ui/test.yml?label=test&labelColor=black&logo=githubactions&logoColor=white&style=flat-square
-[github-contributors-link]: https://github.com/lobehub/lobe-ui/graphs/contributors
-[github-contributors-shield]: https://img.shields.io/github/contributors/lobehub/lobe-ui?color=c4f042&labelColor=black&style=flat-square
-[github-forks-link]: https://github.com/lobehub/lobe-ui/network/members
-[github-forks-shield]: https://img.shields.io/github/forks/lobehub/lobe-ui?color=8ae8ff&labelColor=black&style=flat-square
-[github-issues-link]: https://github.com/lobehub/lobe-ui/issues
-[github-issues-shield]: https://img.shields.io/github/issues/lobehub/lobe-ui?color=ff80eb&labelColor=black&style=flat-square
-[github-license-link]: https://github.com/lobehub/lobe-ui/blob/master/LICENSE
-[github-license-shield]: https://img.shields.io/github/license/lobehub/lobe-ui?color=white&labelColor=black&style=flat-square
-[github-releasedate-link]: https://github.com/lobehub/lobe-ui/releases
-[github-releasedate-shield]: https://img.shields.io/github/release-date/lobehub/lobe-ui?labelColor=black&style=flat-square
-[github-stars-link]: https://github.com/lobehub/lobe-ui/network/stargazers
-[github-stars-shield]: https://img.shields.io/github/stars/lobehub/lobe-ui?color=ffcb47&labelColor=black&style=flat-square
-[lobe-chat]: https://github.com/lobehub/lobe-chat
-[lobe-commit]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-commit
-[lobe-i18n]: https://github.com/lobehub/lobe-commit/tree/master/packages/lobe-i18n
-[lobe-theme]: https://github.com/lobehub/sd-webui-lobe-theme
-[npm-downloads-link]: https://www.npmjs.com/package/@lobehub/ui
-[npm-downloads-shield]: https://img.shields.io/npm/dt/@lobehub/ui?labelColor=black&style=flat-square
-[npm-release-link]: https://www.npmjs.com/package/@lobehub/ui
-[npm-release-shield]: https://img.shields.io/npm/v/@lobehub/ui?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square
-[pr-welcome-link]: https://github.com/lobehub/lobe-chat/pulls
-[pr-welcome-shield]: https://img.shields.io/badge/🤯_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge
-[profile-link]: https://github.com/lobehub
-[vercel-link]: https://ui.lobehub.com
-[vercel-shield]: https://img.shields.io/website?down_message=offline&label=vercel&labelColor=black&logo=vercel&style=flat-square&up_message=online&url=https%3A%2F%2Fui.lobehub.com