@lobehub/ui 1.74.0 → 1.76.0

package/es/Form/components/FormGroup.js

@@ -5,6 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Icon } from "../..";
 import { Collapse } from 'antd';
+import { ChevronDown } from 'lucide-react';
 import { memo } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -22,6 +23,19 @@ var FormGroup = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsx(Collapse, _objectSpread({
     className: cx(styles.group, className),
     defaultActiveKey: [1],
+    expandIcon: function expandIcon(_ref2) {
+      var isActive = _ref2.isActive;
+      return /*#__PURE__*/_jsx(Icon, {
+        className: styles.icon,
+        icon: ChevronDown,
+        size: {
+          fontSize: 16
+        },
+        style: isActive ? {} : {
+          rotate: '-90deg'
+        }
+      });
+    },
     items: [{
       children: children,
       extra: extra,

package/es/Form/components/style.d.ts

@@ -2,6 +2,7 @@ export declare const useStyles: (props?: string | number | undefined) => import(
     footer: import("antd-style").SerializedStyles;
     formTitle: import("antd-style").SerializedStyles;
     group: string;
+    icon: import("antd-style").SerializedStyles;
     item: import("antd-style").SerializedStyles;
     title: import("antd-style").SerializedStyles;
 }>;

package/es/Form/components/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import { createStyles } from 'antd-style';
 import { isNumber } from 'lodash-es';
 export var useStyles = createStyles(function (_ref, itemMinWidth) {
@@ -10,8 +10,9 @@ export var useStyles = createStyles(function (_ref, itemMinWidth) {
   return {
     footer: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n    "]))),
     formTitle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n\n      text-align: left;\n\n      > div {\n        font-weight: 500;\n        line-height: 1;\n      }\n\n      > small {\n        display: block;\n\n        line-height: 1;\n        color: ", ";\n        word-wrap: break-word;\n        white-space: pre-wrap;\n      }\n\n      .ant-tag {\n        font-family: ", ";\n      }\n    "])), token.colorTextDescription, token.fontFamilyCode),
-    group: cx(isDarkMode && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          .ant-collapse-content {\n            background: transparent;\n          }\n\n          .ant-collapse-header {\n            background: ", ";\n          }\n        "])), token.colorFillTertiary), css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        .ant-collapse-header {\n          border-radius: 0 !important;\n        }\n\n        .ant-collapse-content-box {\n          padding-top: 0 !important;\n          padding-bottom: 0 !important;\n        }\n\n        .ant-form-item-label {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n        }\n      "])))),
-    item: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      padding: 8px 0;\n\n      .ant-row {\n        justify-content: space-between;\n\n        > div {\n          flex: unset !important;\n          flex-grow: unset !important;\n        }\n      }\n\n      ", "\n    "])), itemMinWidth && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        .ant-form-item-control {\n          width: ", ";\n        }\n      "])), isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth)),
-    title: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      font-size: 16px;\n      font-weight: 600;\n\n      .anticon {\n        color: ", ";\n      }\n    "])), token.colorPrimary)
+    group: cx(isDarkMode && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          .ant-collapse-content {\n            background: transparent;\n          }\n\n          .ant-collapse-header {\n            background: ", ";\n          }\n        "])), token.colorFillTertiary), css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        .ant-collapse-header {\n          align-items: center !important;\n          border-radius: 0 !important;\n        }\n\n        .ant-collapse-content-box {\n          padding-top: 0 !important;\n          padding-bottom: 0 !important;\n        }\n\n        .ant-form-item-label {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n        }\n      "])))),
+    icon: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      transition: all 100ms ", ";\n    "])), token.motionEaseOut),
+    item: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      padding: 8px 0;\n\n      .ant-row {\n        justify-content: space-between;\n\n        > div {\n          flex: unset !important;\n          flex-grow: unset !important;\n        }\n      }\n\n      ", "\n    "])), itemMinWidth && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        .ant-form-item-control {\n          width: ", ";\n        }\n      "])), isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth)),
+    title: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      font-size: 16px;\n      font-weight: 600;\n\n      .anticon {\n        color: ", ";\n      }\n    "])), token.colorPrimary)
   };
 });

package/es/LogoThree/index.js

@@ -3,6 +3,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Canvas } from '@react-three/fiber';
 import { Suspense, memo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import LobeHubLogo from "../Logo";
 import Loading from "./Loading";
 import Logo from "./Logo";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,24 +13,30 @@ var LogoThree = /*#__PURE__*/memo(function (_ref) {
     size = _ref$size === void 0 ? 320 : _ref$size,
     style = _ref.style,
     className = _ref.className;
-  return /*#__PURE__*/_jsx(Canvas, {
-    camera: {
-      fov: 16,
-      position: [10, 1, 0]
-    },
-    className: className,
-    style: size ? _objectSpread({
-      height: size,
-      maxHeight: size,
-      maxWidth: size,
-      width: size
-    }, style) : style,
-    children: /*#__PURE__*/_jsx(Suspense, {
-      fallback: /*#__PURE__*/_jsx(Loading, {
-        size: size / 2 > 48 ? 48 : size / 2
-      }),
-      children: /*#__PURE__*/_jsx(Logo, {
-        rotation: [0, 1.5, 0]
+  return /*#__PURE__*/_jsx(ErrorBoundary, {
+    fallback: /*#__PURE__*/_jsx(LobeHubLogo, {
+      size: size,
+      type: "3d"
+    }),
+    children: /*#__PURE__*/_jsx(Canvas, {
+      camera: {
+        fov: 16,
+        position: [10, 1, 0]
+      },
+      className: className,
+      style: size ? _objectSpread({
+        height: size,
+        maxHeight: size,
+        maxWidth: size,
+        width: size
+      }, style) : style,
+      children: /*#__PURE__*/_jsx(Suspense, {
+        fallback: /*#__PURE__*/_jsx(Loading, {
+          size: size / 2 > 48 ? 48 : size / 2
+        }),
+        children: /*#__PURE__*/_jsx(Logo, {
+          rotation: [0, 1.5, 0]
+        })
       })
     })
   });

package/es/Markdown/index.js

@@ -5,7 +5,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Collapse, Divider, Typography } from 'antd';
 import { memo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import ReactMarkdown from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import Code from "./Code";
 import CodeBlock from "./CodeBlock";
@@ -35,13 +37,23 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsx(Typography, {
     className: className,
     style: style,
-    children: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({
-      className: styles.markdown,
-      components: components,
-      remarkPlugins: [remarkGfm]
-    }, props), {}, {
-      children: children
-    }))
+    children: /*#__PURE__*/_jsx(ErrorBoundary, {
+      fallback: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({
+        className: styles.markdown,
+        components: components,
+        remarkPlugins: [remarkGfm]
+      }, props), {}, {
+        children: children
+      })),
+      children: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({
+        className: styles.markdown,
+        components: components,
+        rehypePlugins: [rehypeRaw],
+        remarkPlugins: [remarkGfm]
+      }, props), {}, {
+        children: children
+      }))
+    })
   });
 });
 export default Markdown;

package/es/TokenTag/style.js

@@ -6,7 +6,8 @@ export var ICON_SIZE = 20;
 export var useStyles = createStyles(function (_ref, _ref2) {
   var cx = _ref.cx,
     css = _ref.css,
-    token = _ref.token;
+    token = _ref.token,
+    isDarkMode = _ref.isDarkMode;
   var type = _ref2.type,
     shape = _ref2.shape;
   var percentStyle;
@@ -27,7 +28,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
         break;
       }
   }
-  var roundStylish = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding: 0 ", "px 0 ", "px;\n      background: ", ";\n      border-radius: ", "px;\n    "])), (HEIGHT - ICON_SIZE) * 1.2, (HEIGHT - ICON_SIZE) / 2, token.colorFillSecondary, HEIGHT / 2);
+  var roundStylish = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      padding: 0 ", "px 0 ", "px;\n      background: ", ";\n      border-radius: ", "px;\n    "])), (HEIGHT - ICON_SIZE) * 1.2, (HEIGHT - ICON_SIZE) / 2, isDarkMode ? token.colorFillSecondary : token.colorFillTertiary, HEIGHT / 2);
   var squareStylish = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      border-radius: ", "px;\n    "])), token.borderRadiusSM);
   return {
     container: cx(percentStyle, shape === 'round' ? roundStylish : squareStylish, css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          user-select: none;\n\n          overflow: hidden;\n          display: flex;\n          flex: 0;\n          gap: 4px;\n          align-items: center;\n\n          min-width: fit-content;\n          height: ", "px;\n\n          font-family: ", ";\n          font-size: 13px;\n          line-height: 1;\n        "])), HEIGHT, token.fontFamilyCode))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.74.0",
+  "version": "1.76.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -95,10 +95,12 @@
     "prism-react-renderer": "^2",
     "rc-footer": "^0",
     "re-resizable": "^6",
+    "react-error-boundary": "^4",
     "react-layout-kit": "^1.7.1",
     "react-markdown": "^8",
     "react-rnd": "^10",
     "react-simple-code-editor": "^0",
+    "rehype-raw": "^6",
     "remark-gfm": "^3",
     "shiki-es": "^0",
     "styled-components": "^6",