@lobehub/ui 3.3.0 → 3.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
 
3
3
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- var _excluded = ["content", "language", "setLanguage", "showLanguage", "className", "style", "allowChangeLanguage", "fileName", "icon", "actionsRender", "copyable", "variant", "shadow", "wrap", "defaultExpand", "children"];
4
+ var _excluded = ["content", "language", "setLanguage", "showLanguage", "className", "classNames", "styles", "style", "allowChangeLanguage", "fileName", "icon", "actionsRender", "copyable", "variant", "shadow", "wrap", "defaultExpand", "children"];
5
5
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
6
6
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
7
7
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -72,6 +72,8 @@ export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref2) {
72
72
  setLanguage = _ref2.setLanguage,
73
73
  showLanguage = _ref2.showLanguage,
74
74
  className = _ref2.className,
75
+ classNames = _ref2.classNames,
76
+ customStyles = _ref2.styles,
75
77
  style = _ref2.style,
76
78
  _ref2$allowChangeLang = _ref2.allowChangeLanguage,
77
79
  allowChangeLanguage = _ref2$allowChangeLang === void 0 ? false : _ref2$allowChangeLang,
@@ -196,11 +198,12 @@ export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref2) {
196
198
  }, rest), {}, {
197
199
  children: [/*#__PURE__*/_jsxs(Flexbox, {
198
200
  align: 'center',
199
- className: headerVariants({
201
+ className: cx(headerVariants({
200
202
  variant: variant
201
- }),
203
+ }), classNames === null || classNames === void 0 ? void 0 : classNames.header),
202
204
  horizontal: true,
203
205
  justify: 'space-between',
206
+ style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.header,
204
207
  children: [/*#__PURE__*/_jsx(ActionIcon, {
205
208
  icon: expand ? ChevronDown : ChevronRight,
206
209
  onClick: handleToggleExpand,
@@ -222,9 +225,10 @@ export var HighlighterFullFeatured = /*#__PURE__*/memo(function (_ref2) {
222
225
  children: actions
223
226
  })]
224
227
  }), /*#__PURE__*/_jsx(Flexbox, {
225
- className: bodyVariants({
228
+ className: cx(bodyVariants({
226
229
  expand: expand
227
- }),
230
+ }), classNames === null || classNames === void 0 ? void 0 : classNames.body),
231
+ style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.body,
228
232
  children: children
229
233
  })]
230
234
  }));
@@ -1,6 +1,6 @@
1
1
  'use client';
2
2
 
3
- var _excluded = ["animated", "fullFeatured", "actionIconSize", "children", "language", "className", "copyable", "showLanguage", "variant", "shadow", "wrap", "bodyRender", "actionsRender", "enableTransformer", "theme", "icon", "fileName", "allowChangeLanguage", "defaultExpand"];
3
+ var _excluded = ["animated", "fullFeatured", "actionIconSize", "children", "language", "className", "classNames", "styles", "copyable", "showLanguage", "variant", "shadow", "wrap", "bodyRender", "actionsRender", "enableTransformer", "theme", "icon", "fileName", "allowChangeLanguage", "defaultExpand"];
4
4
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
6
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -34,6 +34,8 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
34
34
  _ref$language = _ref.language,
35
35
  language = _ref$language === void 0 ? 'markdown' : _ref$language,
36
36
  className = _ref.className,
37
+ classNames = _ref.classNames,
38
+ customStyles = _ref.styles,
37
39
  _ref$copyable = _ref.copyable,
38
40
  copyable = _ref$copyable === void 0 ? true : _ref$copyable,
39
41
  _ref$showLanguage = _ref.showLanguage,
@@ -123,13 +125,17 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
123
125
  var originalBody = useMemo(function () {
124
126
  return /*#__PURE__*/_jsx(SyntaxHighlighter, {
125
127
  animated: animated,
128
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.content,
126
129
  enableTransformer: enableTransformer,
127
130
  language: lang === null || lang === void 0 ? void 0 : lang.toLowerCase(),
131
+ style: _objectSpread({
132
+ height: '100%'
133
+ }, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content),
128
134
  theme: theme,
129
135
  variant: variant,
130
136
  children: tirmedChildren
131
137
  });
132
- }, [animated, enableTransformer, lang, theme, tirmedChildren, variant]);
138
+ }, [animated, enableTransformer, lang, theme, tirmedChildren, variant, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content]);
133
139
  var displayName = useMemo(function () {
134
140
  if (fileName) return fileName;
135
141
  return getCodeLanguageDisplayName(language);
@@ -146,6 +152,7 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
146
152
  actionsRender: actionsRender,
147
153
  allowChangeLanguage: allowChangeLanguage,
148
154
  className: className,
155
+ classNames: classNames,
149
156
  content: tirmedChildren,
150
157
  copyable: copyable,
151
158
  defaultExpand: defaultExpand,
@@ -155,6 +162,7 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
155
162
  setLanguage: setLang,
156
163
  shadow: shadow,
157
164
  showLanguage: showLanguage,
165
+ styles: customStyles,
158
166
  variant: variant,
159
167
  wrap: wrap
160
168
  }, rest), {}, {
@@ -25,7 +25,7 @@ export var useStyles = createStyles(function (_ref) {
25
25
  lang: cx(langHoverCls, stylish.blur, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: 2;\n inset-block-end: 8px;\n inset-inline-end: 8px;\n\n font-family: ", ";\n color: ", ";\n\n opacity: 0;\n background: ", ";\n\n transition: opacity 0.1s;\n "])), token.fontFamilyCode, token.colorTextSecondary, token.colorFillQuaternary)),
26
26
  nowrap: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n pre,\n code {\n text-wrap: nowrap;\n }\n "]))),
27
27
  outlined: stylish.variantOutlinedWithoutHover,
28
- root: cx(prefix, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n position: relative;\n\n overflow: hidden;\n\n width: 100%;\n border-radius: ", "px;\n\n transition: background-color 100ms ", ";\n\n &:hover {\n .", " {\n opacity: 1;\n }\n\n .", " {\n opacity: 1;\n }\n }\n\n code {\n background: transparent !important;\n }\n "])), token.borderRadius, token.motionEaseOut, actionsHoverCls, langHoverCls)),
28
+ root: cx(prefix, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n position: relative;\n\n overflow: hidden;\n\n width: 100%;\n border-radius: ", "px;\n\n transition: background-color 100ms ", ";\n\n &:hover {\n .", " {\n opacity: 1;\n }\n\n .", " {\n opacity: 1;\n }\n }\n\n pre {\n height: 100%;\n font-size: 12px;\n }\n\n code {\n background: transparent !important;\n }\n "])), token.borderRadius, token.motionEaseOut, actionsHoverCls, langHoverCls)),
29
29
  select: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n user-select: none;\n\n position: absolute;\n inset-inline-start: 50%;\n transform: translateX(-50%);\n\n min-width: 100px;\n\n font-size: 14px;\n color: ", ";\n text-align: center;\n "])), token.colorTextDescription),
30
30
  shadow: stylish.shadow,
31
31
  wrap: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n pre,\n code {\n text-wrap: wrap;\n }\n "])))
@@ -1,4 +1,4 @@
1
- import { ReactNode, type Ref } from 'react';
1
+ import { CSSProperties, ReactNode, type Ref } from 'react';
2
2
  import { FlexboxProps } from 'react-layout-kit';
3
3
  import type { BuiltinTheme } from 'shiki';
4
4
  import type { ActionIconProps } from "../ActionIcon";
@@ -29,6 +29,11 @@ export interface HighlighterProps extends Omit<FlexboxProps, 'children' | 'wrap'
29
29
  originalNode: ReactNode;
30
30
  }) => ReactNode;
31
31
  children: string;
32
+ classNames?: {
33
+ body?: string;
34
+ content?: string;
35
+ header?: string;
36
+ };
32
37
  copyable?: boolean;
33
38
  defaultExpand?: boolean;
34
39
  enableTransformer?: boolean;
@@ -38,6 +43,11 @@ export interface HighlighterProps extends Omit<FlexboxProps, 'children' | 'wrap'
38
43
  language: string;
39
44
  shadow?: boolean;
40
45
  showLanguage?: boolean;
46
+ styles?: {
47
+ body?: CSSProperties;
48
+ content?: CSSProperties;
49
+ header?: CSSProperties;
50
+ };
41
51
  theme?: 'lobe-theme' | BuiltinTheme;
42
52
  variant?: 'filled' | 'outlined' | 'borderless';
43
53
  wrap?: boolean;
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
 
3
3
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- var _excluded = ["showLanguage", "content", "children", "className", "copyable", "actionsRender", "style", "variant", "shadow", "language", "fileName", "defaultExpand"];
4
+ var _excluded = ["showLanguage", "styles", "classNames", "content", "children", "className", "copyable", "actionsRender", "style", "variant", "shadow", "language", "fileName", "defaultExpand"];
5
5
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
6
6
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
7
7
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -55,6 +55,8 @@ var MermaidHeaderLanguage = /*#__PURE__*/memo(function (_ref) {
55
55
  });
56
56
  export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref2) {
57
57
  var showLanguage = _ref2.showLanguage,
58
+ customStyles = _ref2.styles,
59
+ classNames = _ref2.classNames,
58
60
  content = _ref2.content,
59
61
  children = _ref2.children,
60
62
  className = _ref2.className,
@@ -164,11 +166,12 @@ export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref2) {
164
166
  }, rest), {}, {
165
167
  children: [/*#__PURE__*/_jsxs(Flexbox, {
166
168
  align: 'center',
167
- className: headerVariants({
169
+ className: cx(headerVariants({
168
170
  variant: variant
169
- }),
171
+ }), classNames === null || classNames === void 0 ? void 0 : classNames.header),
170
172
  horizontal: true,
171
173
  justify: 'space-between',
174
+ style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.header,
172
175
  children: [/*#__PURE__*/_jsx(ActionIcon, {
173
176
  icon: expand ? ChevronDown : ChevronRight,
174
177
  onClick: handleToggleExpand,
@@ -185,9 +188,10 @@ export var MermaidFullFeatured = /*#__PURE__*/memo(function (_ref2) {
185
188
  children: actions
186
189
  })]
187
190
  }), /*#__PURE__*/_jsx(Flexbox, {
188
- className: bodyVariants({
191
+ className: cx(bodyVariants({
189
192
  expand: expand
190
- }),
193
+ }), classNames === null || classNames === void 0 ? void 0 : classNames.body),
194
+ style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.body,
191
195
  children: children
192
196
  })]
193
197
  }));
@@ -1,7 +1,7 @@
1
1
  'use client';
2
2
 
3
3
  function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
- var _excluded = ["children", "actionIconSize", "fullFeatured", "copyable", "showLanguage", "language", "style", "variant", "shadow", "enablePanZoom", "defaultExpand", "className", "bodyRender", "fileName", "actionsRender", "theme"];
4
+ var _excluded = ["children", "actionIconSize", "fullFeatured", "copyable", "showLanguage", "language", "style", "styles", "classNames", "variant", "shadow", "enablePanZoom", "defaultExpand", "className", "bodyRender", "fileName", "actionsRender", "theme"];
5
5
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
6
6
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
7
7
  function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -30,6 +30,8 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
30
30
  _ref$language = _ref.language,
31
31
  language = _ref$language === void 0 ? 'mermaid' : _ref$language,
32
32
  style = _ref.style,
33
+ customStyles = _ref.styles,
34
+ classNames = _ref.classNames,
33
35
  _ref$variant = _ref.variant,
34
36
  variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
35
37
  shadow = _ref.shadow,
@@ -98,12 +100,14 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
98
100
  }, [actionIconSize, actionsRender, getCopyContent, originalActions, tirmedChildren]);
99
101
  var defaultBody = useMemo(function () {
100
102
  return /*#__PURE__*/_jsx(SyntaxMermaid, {
103
+ className: classNames === null || classNames === void 0 ? void 0 : classNames.content,
101
104
  enablePanZoom: enablePanZoom,
105
+ style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.content,
102
106
  theme: theme,
103
107
  variant: variant,
104
108
  children: tirmedChildren
105
109
  });
106
- }, [enablePanZoom, theme, tirmedChildren, variant]);
110
+ }, [enablePanZoom, theme, tirmedChildren, variant, classNames === null || classNames === void 0 ? void 0 : classNames.content, customStyles === null || customStyles === void 0 ? void 0 : customStyles.content]);
107
111
  var body = useMemo(function () {
108
112
  if (!bodyRender) return defaultBody;
109
113
  return bodyRender({
@@ -114,6 +118,7 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
114
118
  if (fullFeatured) return /*#__PURE__*/_jsx(FullFeatured, _objectSpread(_objectSpread({
115
119
  actionsRender: actionsRender,
116
120
  className: className,
121
+ classNames: classNames,
117
122
  content: tirmedChildren,
118
123
  copyable: copyable,
119
124
  defaultExpand: defaultExpand,
@@ -122,6 +127,7 @@ var Mermaid = /*#__PURE__*/memo(function (_ref) {
122
127
  shadow: shadow,
123
128
  showLanguage: showLanguage,
124
129
  style: style,
130
+ styles: customStyles,
125
131
  variant: variant
126
132
  }, rest), {}, {
127
133
  children: body
@@ -1,5 +1,11 @@
1
1
  'use client';
2
2
 
3
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
4
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
5
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
7
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
8
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
3
9
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
4
10
  function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
5
11
  function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -17,7 +23,9 @@ var SyntaxMermaid = /*#__PURE__*/memo(function (_ref) {
17
23
  children = _ref.children,
18
24
  customTheme = _ref.theme,
19
25
  variant = _ref.variant,
20
- enablePanZoom = _ref.enablePanZoom;
26
+ enablePanZoom = _ref.enablePanZoom,
27
+ className = _ref.className,
28
+ style = _ref.style;
21
29
  var isDefaultTheme = customTheme === 'lobe-theme' || !customTheme;
22
30
  var background = useMemo(function () {
23
31
  var _mermaidThemes$find;
@@ -76,6 +84,7 @@ var SyntaxMermaid = /*#__PURE__*/memo(function (_ref) {
76
84
  if (!blobUrl) return null;
77
85
  return /*#__PURE__*/_jsx(Image, {
78
86
  alt: 'mermaid',
87
+ className: className,
79
88
  maxHeight: 480,
80
89
  minWidth: 300,
81
90
  objectFit: 'contain',
@@ -84,7 +93,7 @@ var SyntaxMermaid = /*#__PURE__*/memo(function (_ref) {
84
93
  } : false,
85
94
  ref: ref,
86
95
  src: blobUrl,
87
- style: {
96
+ style: _objectSpread({
88
97
  background: variant === 'filled' ? background : undefined,
89
98
  borderRadius: 0,
90
99
  margin: 0,
@@ -92,7 +101,7 @@ var SyntaxMermaid = /*#__PURE__*/memo(function (_ref) {
92
101
  padding: variant === 'borderless' ? 0 : 16,
93
102
  position: 'relative',
94
103
  width: '100%'
95
- },
104
+ }, style),
96
105
  variant: 'borderless',
97
106
  width: '100%'
98
107
  });
@@ -1,11 +1,13 @@
1
1
  import type { MermaidConfig } from 'mermaid/dist/config.type';
2
- import type { ReactNode, Ref } from 'react';
2
+ import { CSSProperties, ReactNode, Ref } from 'react';
3
3
  import type { ActionIconProps } from "../ActionIcon";
4
4
  import type { DivProps } from "../types";
5
5
  export interface SyntaxMermaidProps {
6
6
  children: string;
7
+ className?: string;
7
8
  enablePanZoom?: MermaidProps['enablePanZoom'];
8
9
  ref?: Ref<HTMLDivElement>;
10
+ style?: CSSProperties;
9
11
  theme?: MermaidProps['theme'];
10
12
  variant?: MermaidProps['variant'];
11
13
  }
@@ -22,6 +24,11 @@ export interface MermaidProps extends DivProps {
22
24
  originalNode: ReactNode;
23
25
  }) => ReactNode;
24
26
  children: string;
27
+ classNames?: {
28
+ body?: string;
29
+ content?: string;
30
+ header?: string;
31
+ };
25
32
  copyable?: boolean;
26
33
  defaultExpand?: boolean;
27
34
  enablePanZoom?: boolean;
@@ -30,6 +37,11 @@ export interface MermaidProps extends DivProps {
30
37
  language?: string;
31
38
  shadow?: boolean;
32
39
  showLanguage?: boolean;
40
+ styles?: {
41
+ body?: CSSProperties;
42
+ content?: CSSProperties;
43
+ header?: CSSProperties;
44
+ };
33
45
  theme?: 'lobe-theme' | MermaidConfig['theme'];
34
46
  variant?: 'filled' | 'outlined' | 'borderless';
35
47
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "3.3.0",
3
+ "version": "3.3.1",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",