@lobehub/ui 2.19.0 → 2.20.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 = ["sentences", "as", "typingSpeed", "initialDelay", "pauseDuration", "deletingSpeed", "loop", "className", "color", "showCursor", "hideCursorWhileTyping", "cursorCharacter", "cursorClassName", "cursorColor", "cursorBlinkDuration", "cursorStyle", "textColors", "variableSpeed", "onSentenceComplete", "startOnVisible", "reverseMode"];
4
+ var _excluded = ["sentences", "as", "typingSpeed", "initialDelay", "pauseDuration", "deletingSpeed", "deletePauseDuration", "loop", "className", "color", "showCursor", "hideCursorWhileTyping", "cursorCharacter", "cursorClassName", "cursorColor", "cursorBlinkDuration", "cursorFade", "cursorStyle", "textColors", "variableSpeed", "onSentenceComplete", "startOnVisible", "reverseMode", "segmentMode"];
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; }
@@ -33,6 +33,8 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
33
33
  pauseDuration = _ref$pauseDuration === void 0 ? 2000 : _ref$pauseDuration,
34
34
  _ref$deletingSpeed = _ref.deletingSpeed,
35
35
  deletingSpeed = _ref$deletingSpeed === void 0 ? 50 : _ref$deletingSpeed,
36
+ _ref$deletePauseDurat = _ref.deletePauseDuration,
37
+ deletePauseDuration = _ref$deletePauseDurat === void 0 ? 0 : _ref$deletePauseDurat,
36
38
  _ref$loop = _ref.loop,
37
39
  loop = _ref$loop === void 0 ? true : _ref$loop,
38
40
  _ref$className = _ref.className,
@@ -48,6 +50,8 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
48
50
  cursorColor = _ref.cursorColor,
49
51
  _ref$cursorBlinkDurat = _ref.cursorBlinkDuration,
50
52
  cursorBlinkDuration = _ref$cursorBlinkDurat === void 0 ? 0.8 : _ref$cursorBlinkDurat,
53
+ _ref$cursorFade = _ref.cursorFade,
54
+ cursorFade = _ref$cursorFade === void 0 ? true : _ref$cursorFade,
51
55
  _ref$cursorStyle = _ref.cursorStyle,
52
56
  cursorStyle = _ref$cursorStyle === void 0 ? 'pipe' : _ref$cursorStyle,
53
57
  _ref$textColors = _ref.textColors,
@@ -58,6 +62,8 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
58
62
  startOnVisible = _ref$startOnVisible === void 0 ? false : _ref$startOnVisible,
59
63
  _ref$reverseMode = _ref.reverseMode,
60
64
  reverseMode = _ref$reverseMode === void 0 ? false : _ref$reverseMode,
65
+ _ref$segmentMode = _ref.segmentMode,
66
+ segmentMode = _ref$segmentMode === void 0 ? 'grapheme' : _ref$segmentMode,
61
67
  props = _objectWithoutProperties(_ref, _excluded);
62
68
  var _useStyles = useStyles(),
63
69
  styles = _useStyles.styles,
@@ -82,10 +88,36 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
82
88
  _useState10 = _slicedToArray(_useState9, 2),
83
89
  isVisible = _useState10[0],
84
90
  setIsVisible = _useState10[1];
91
+ var _useState11 = useState(false),
92
+ _useState12 = _slicedToArray(_useState11, 2),
93
+ isDeletePausing = _useState12[0],
94
+ setIsDeletePausing = _useState12[1];
85
95
  var containerRef = useRef(null);
86
96
  var textArray = useMemo(function () {
87
97
  return Array.isArray(sentences) ? sentences : [sentences];
88
98
  }, [sentences]);
99
+
100
+ // Helper function to split text based on segment mode
101
+ var splitText = useCallback(function (text) {
102
+ // Use Intl.Segmenter if available
103
+ if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
104
+ var segmenter = new Intl.Segmenter(undefined, {
105
+ granularity: segmentMode
106
+ });
107
+ return Array.from(segmenter.segment(text), function (segment) {
108
+ return segment.segment;
109
+ });
110
+ }
111
+
112
+ // Fallback when Intl.Segmenter is not available
113
+ if (segmentMode === 'word') {
114
+ // Simple word splitting fallback
115
+ return text.split(/(\s+)/).filter(Boolean);
116
+ }
117
+
118
+ // Grapheme fallback
119
+ return Array.from(text);
120
+ }, [segmentMode]);
89
121
  var getRandomSpeed = useCallback(function () {
90
122
  if (!variableSpeed) return typingSpeed;
91
123
  var min = variableSpeed.min,
@@ -121,7 +153,19 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
121
153
  if (!isVisible) return;
122
154
  var timeout;
123
155
  var currentText = textArray[currentTextIndex];
124
- var processedText = reverseMode ? currentText.split('').reverse().join('') : currentText;
156
+ // Split text based on segment mode
157
+ var textSegments = splitText(currentText);
158
+ var processedText = reverseMode ? textSegments.reverse().join('') : currentText;
159
+
160
+ // Handle delete pause state
161
+ if (isDeletePausing) {
162
+ timeout = setTimeout(function () {
163
+ setIsDeletePausing(false);
164
+ }, deletePauseDuration);
165
+ return function () {
166
+ return clearTimeout(timeout);
167
+ };
168
+ }
125
169
  var executeTypingAnimation = function executeTypingAnimation() {
126
170
  if (isDeleting) {
127
171
  if (displayedText === '') {
@@ -136,19 +180,24 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
136
180
  return (prev + 1) % textArray.length;
137
181
  });
138
182
  setCurrentCharIndex(0);
139
- timeout = setTimeout(function () {}, pauseDuration);
183
+ if (deletePauseDuration > 0) {
184
+ setIsDeletePausing(true);
185
+ return;
186
+ }
140
187
  } else {
141
188
  timeout = setTimeout(function () {
142
189
  setDisplayedText(function (prev) {
143
- return prev.slice(0, -1);
190
+ var segments = splitText(prev);
191
+ return segments.slice(0, -1).join('');
144
192
  });
145
193
  }, deletingSpeed);
146
194
  }
147
195
  } else {
148
- if (currentCharIndex < processedText.length) {
196
+ var processedSegments = splitText(processedText);
197
+ if (currentCharIndex < processedSegments.length) {
149
198
  timeout = setTimeout(function () {
150
199
  setDisplayedText(function (prev) {
151
- return prev + processedText[currentCharIndex];
200
+ return prev + processedSegments[currentCharIndex];
152
201
  });
153
202
  setCurrentCharIndex(function (prev) {
154
203
  return prev + 1;
@@ -170,7 +219,7 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
170
219
  return function () {
171
220
  return clearTimeout(timeout);
172
221
  };
173
- }, [currentCharIndex, displayedText, isDeleting, typingSpeed, deletingSpeed, pauseDuration, textArray, currentTextIndex, loop, initialDelay, isVisible, reverseMode, variableSpeed, onSentenceComplete, getRandomSpeed]);
222
+ }, [currentCharIndex, displayedText, isDeleting, isDeletePausing, typingSpeed, deletingSpeed, deletePauseDuration, pauseDuration, textArray, currentTextIndex, loop, initialDelay, isVisible, reverseMode, variableSpeed, onSentenceComplete, getRandomSpeed, splitText]);
174
223
  var getCursorStyle = function getCursorStyle() {
175
224
  if (cursorCharacter) return styles.cursorCustom;
176
225
  switch (cursorStyle) {
@@ -192,12 +241,20 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
192
241
  }
193
242
  }
194
243
  };
195
- var shouldHideCursor = hideCursorWhileTyping && (currentCharIndex < textArray[currentTextIndex].length || isDeleting);
244
+ var currentTextLength = splitText(textArray[currentTextIndex]).length;
245
+ var isTyping = currentCharIndex < currentTextLength && !isDeleting;
246
+ var isAfterTyping = currentCharIndex === currentTextLength && !isDeleting;
247
+ var shouldHideCursor = function () {
248
+ if (hideCursorWhileTyping === true) return true; // 完全隐藏
249
+ if (hideCursorWhileTyping === 'typing') return isTyping || isDeleting; // 打字和删除时隐藏
250
+ if (hideCursorWhileTyping === 'afterTyping') return isAfterTyping; // 打字完成后隐藏
251
+ return false;
252
+ }();
196
253
  var textColor = getCurrentTextColor();
197
254
  var finalCursorColor = getCurrentCursorColor();
198
255
 
199
- // Split displayed text into characters for animation
200
- var characters = displayedText.split('');
256
+ // Split displayed text for animation
257
+ var characters = splitText(displayedText);
201
258
  return /*#__PURE__*/createElement(Component, _objectSpread({
202
259
  className: cx(styles.container, className),
203
260
  ref: containerRef
@@ -225,11 +282,11 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
225
282
  children: char === ' ' ? "\xA0" : char
226
283
  }, "".concat(currentTextIndex, "-").concat(index));
227
284
  })
228
- }), showCursor && /*#__PURE__*/_jsx(motion.span, {
285
+ }), showCursor && (cursorFade ? /*#__PURE__*/_jsx(motion.span, {
229
286
  animate: {
230
- opacity: 1
287
+ opacity: shouldHideCursor ? 0 : 1
231
288
  },
232
- className: cx(getCursorStyle(), cursorClassName, shouldHideCursor && styles.cursorHidden),
289
+ className: cx(getCursorStyle(), cursorClassName),
233
290
  initial: {
234
291
  opacity: 0
235
292
  },
@@ -237,13 +294,20 @@ var TypewriterEffect = /*#__PURE__*/memo(function (_ref) {
237
294
  backgroundColor: finalCursorColor
238
295
  } : undefined,
239
296
  transition: {
240
- duration: cursorBlinkDuration,
297
+ duration: shouldHideCursor ? 0.2 : cursorBlinkDuration,
241
298
  ease: 'easeInOut',
242
- repeat: Number.POSITIVE_INFINITY,
299
+ repeat: shouldHideCursor ? 0 : Number.POSITIVE_INFINITY,
243
300
  repeatType: 'reverse'
244
301
  },
245
302
  children: cursorCharacter
246
- })]
303
+ }) : /*#__PURE__*/_jsx("span", {
304
+ className: cx(getCursorStyle(), cursorClassName),
305
+ style: {
306
+ backgroundColor: finalCursorColor,
307
+ opacity: shouldHideCursor ? 0 : 1
308
+ },
309
+ children: cursorCharacter
310
+ }))]
247
311
  }));
248
312
  });
249
313
  TypewriterEffect.displayName = 'TypewriterEffect';
@@ -1,2 +1,2 @@
1
- export type { CursorStyle, TypewriterEffectProps } from './type';
1
+ export type { CursorStyle, SegmentMode, TypewriterEffectProps } from './type';
2
2
  export { default } from './TypewriterEffect';
@@ -1,5 +1,6 @@
1
1
  import type { ElementType, ReactNode } from 'react';
2
2
  export type CursorStyle = 'pipe' | 'underscore' | 'dot' | 'block';
3
+ export type SegmentMode = 'grapheme' | 'word';
3
4
  export interface TypewriterEffectProps {
4
5
  /**
5
6
  * Custom element type for the container
@@ -32,21 +33,35 @@ export interface TypewriterEffectProps {
32
33
  * Cursor color (defaults to color if not provided)
33
34
  */
34
35
  cursorColor?: string;
36
+ /**
37
+ * Cursor fade animation
38
+ * @default true
39
+ */
40
+ cursorFade?: boolean;
35
41
  /**
36
42
  * Style of the cursor (ignored if cursorCharacter is provided)
37
43
  * @default 'pipe'
38
44
  */
39
45
  cursorStyle?: CursorStyle;
46
+ /**
47
+ * Pause duration after deleting complete before next sentence (milliseconds)
48
+ * @default 0
49
+ */
50
+ deletePauseDuration?: number;
40
51
  /**
41
52
  * Speed of deleting characters (milliseconds per character)
42
53
  * @default 50
43
54
  */
44
55
  deletingSpeed?: number;
45
56
  /**
46
- * Hide cursor while typing
57
+ * Hide cursor behavior
58
+ * - false: always show cursor
59
+ * - 'typing': hide cursor while typing
60
+ * - 'afterTyping': hide cursor after typing complete (during pause)
61
+ * - true: completely hide cursor
47
62
  * @default false
48
63
  */
49
- hideCursorWhileTyping?: boolean;
64
+ hideCursorWhileTyping?: boolean | 'typing' | 'afterTyping';
50
65
  /**
51
66
  * Initial delay before starting animation (milliseconds)
52
67
  * @default 0
@@ -71,6 +86,13 @@ export interface TypewriterEffectProps {
71
86
  * @default false
72
87
  */
73
88
  reverseMode?: boolean;
89
+ /**
90
+ * Segment mode for text splitting
91
+ * - 'grapheme': split by character (emoji-safe)
92
+ * - 'word': split by word
93
+ * @default 'grapheme'
94
+ */
95
+ segmentMode?: SegmentMode;
74
96
  /**
75
97
  * Array of sentences to display
76
98
  */
@@ -7,4 +7,4 @@ export { default as GridBackground, type GridBackgroundProps, GridShowcase, type
7
7
  export { default as Hero, type HeroAction, type HeroProps } from './Hero';
8
8
  export { default as Spotlight, type SpotlightProps } from './Spotlight';
9
9
  export { default as SpotlightCard, type SpotlightCardProps } from './SpotlightCard';
10
- export { type CursorStyle, default as TypewriterEffect, type TypewriterEffectProps, } from './TypewriterEffect';
10
+ export { type CursorStyle, type SegmentMode, default as TypewriterEffect, type TypewriterEffectProps, } from './TypewriterEffect';
@@ -0,0 +1,4 @@
1
+ /// <reference types="react" />
2
+ import type { LoadingDotsProps } from './type';
3
+ declare const LoadingDots: import("react").NamedExoticComponent<LoadingDotsProps>;
4
+ export default LoadingDots;
@@ -0,0 +1,125 @@
1
+ 'use client';
2
+
3
+ import { memo } from 'react';
4
+ import { useStyles } from "./style";
5
+ import { jsx as _jsx } from "react/jsx-runtime";
6
+ import { Fragment as _Fragment } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ var LoadingDots = /*#__PURE__*/memo(function (_ref) {
9
+ var _ref$size = _ref.size,
10
+ size = _ref$size === void 0 ? 8 : _ref$size,
11
+ color = _ref.color,
12
+ _ref$variant = _ref.variant,
13
+ variant = _ref$variant === void 0 ? 'dots' : _ref$variant,
14
+ className = _ref.className;
15
+ var _useStyles = useStyles({
16
+ color: color,
17
+ size: size
18
+ }),
19
+ styles = _useStyles.styles,
20
+ cx = _useStyles.cx;
21
+ var renderDots = function renderDots() {
22
+ switch (variant) {
23
+ case 'pulse':
24
+ {
25
+ return /*#__PURE__*/_jsx("div", {
26
+ className: styles.pulseDot,
27
+ style: {
28
+ animationDelay: '0s'
29
+ }
30
+ });
31
+ }
32
+ case 'wave':
33
+ {
34
+ return /*#__PURE__*/_jsxs(_Fragment, {
35
+ children: [/*#__PURE__*/_jsx("div", {
36
+ className: styles.waveDot,
37
+ style: {
38
+ animationDelay: '0s'
39
+ }
40
+ }), /*#__PURE__*/_jsx("div", {
41
+ className: styles.waveDot,
42
+ style: {
43
+ animationDelay: '0.12s'
44
+ }
45
+ }), /*#__PURE__*/_jsx("div", {
46
+ className: styles.waveDot,
47
+ style: {
48
+ animationDelay: '0.24s'
49
+ }
50
+ })]
51
+ });
52
+ }
53
+ case 'orbit':
54
+ {
55
+ return /*#__PURE__*/_jsxs("div", {
56
+ className: styles.orbitContainer,
57
+ children: [/*#__PURE__*/_jsx("div", {
58
+ className: styles.orbitDot,
59
+ style: {
60
+ animationDelay: '0s'
61
+ }
62
+ }), /*#__PURE__*/_jsx("div", {
63
+ className: styles.orbitDot,
64
+ style: {
65
+ animationDelay: '-0.4s'
66
+ }
67
+ }), /*#__PURE__*/_jsx("div", {
68
+ className: styles.orbitDot,
69
+ style: {
70
+ animationDelay: '-0.8s'
71
+ }
72
+ })]
73
+ });
74
+ }
75
+ case 'typing':
76
+ {
77
+ return /*#__PURE__*/_jsxs(_Fragment, {
78
+ children: [/*#__PURE__*/_jsx("div", {
79
+ className: styles.typingDot,
80
+ style: {
81
+ animationDelay: '0s'
82
+ }
83
+ }), /*#__PURE__*/_jsx("div", {
84
+ className: styles.typingDot,
85
+ style: {
86
+ animationDelay: '0.15s'
87
+ }
88
+ }), /*#__PURE__*/_jsx("div", {
89
+ className: styles.typingDot,
90
+ style: {
91
+ animationDelay: '0.3s'
92
+ }
93
+ })]
94
+ });
95
+ }
96
+ default:
97
+ {
98
+ return /*#__PURE__*/_jsxs(_Fragment, {
99
+ children: [/*#__PURE__*/_jsx("div", {
100
+ className: styles.defaultDot,
101
+ style: {
102
+ animationDelay: '0s'
103
+ }
104
+ }), /*#__PURE__*/_jsx("div", {
105
+ className: styles.defaultDot,
106
+ style: {
107
+ animationDelay: '0.15s'
108
+ }
109
+ }), /*#__PURE__*/_jsx("div", {
110
+ className: styles.defaultDot,
111
+ style: {
112
+ animationDelay: '0.3s'
113
+ }
114
+ })]
115
+ });
116
+ }
117
+ }
118
+ };
119
+ return /*#__PURE__*/_jsx("div", {
120
+ className: cx(variant === 'orbit' ? styles.orbitWrapper : styles.container, className),
121
+ children: renderDots()
122
+ });
123
+ });
124
+ LoadingDots.displayName = 'LoadingDots';
125
+ export default LoadingDots;
@@ -0,0 +1,2 @@
1
+ export { default } from './LoadingDots';
2
+ export type * from './type';
@@ -0,0 +1 @@
1
+ export { default } from "./LoadingDots";
@@ -0,0 +1,13 @@
1
+ export declare const useStyles: (props?: {
2
+ color?: string | undefined;
3
+ size: number;
4
+ } | undefined) => import("antd-style").ReturnStyles<{
5
+ container: import("antd-style").SerializedStyles;
6
+ defaultDot: import("antd-style").SerializedStyles;
7
+ orbitContainer: import("antd-style").SerializedStyles;
8
+ orbitDot: import("antd-style").SerializedStyles;
9
+ orbitWrapper: import("antd-style").SerializedStyles;
10
+ pulseDot: import("antd-style").SerializedStyles;
11
+ typingDot: import("antd-style").SerializedStyles;
12
+ waveDot: import("antd-style").SerializedStyles;
13
+ }>;
@@ -0,0 +1,25 @@
1
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
2
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
3
+ import { createStyles } from 'antd-style';
4
+ export var useStyles = createStyles(function (_ref, _ref2) {
5
+ var token = _ref.token,
6
+ css = _ref.css;
7
+ var size = _ref2.size,
8
+ color = _ref2.color;
9
+ var dotColor = color || token.colorPrimary;
10
+ return {
11
+ container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n gap: 6px;\n align-items: center;\n justify-content: center;\n\n padding: ", "px;\n "])), token.paddingXS),
12
+ // Default variant (fade)
13
+ defaultDot: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n\n background-color: ", ";\n\n animation: fade-animation 1.2s ease-in-out infinite;\n\n @keyframes fade-animation {\n 0%,\n 100% {\n opacity: 0.3;\n }\n\n 50% {\n opacity: 1;\n }\n }\n "])), size, size, dotColor),
14
+ orbitContainer: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n position: relative;\n width: ", "px;\n height: ", "px;\n "])), size * 4, size * 4),
15
+ orbitDot: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform-origin: ", "px 0;\n\n width: ", "px;\n height: ", "px;\n margin-block-start: -", "px;\n margin-inline-start: -", "px;\n border-radius: 50%;\n\n background-color: ", ";\n\n animation: orbit-animation 1.2s linear infinite;\n\n @keyframes orbit-animation {\n 0% {\n transform: rotate(0deg) translateX(", "px);\n }\n\n 100% {\n transform: rotate(360deg) translateX(", "px);\n }\n }\n "])), size * 2, size, size, size / 2, size / 2, dotColor, size * 2, size * 2),
16
+ // Orbit variant
17
+ orbitWrapper: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n width: ", "px;\n height: ", "px;\n padding: ", "px;\n "])), size * 5, size * 5, token.paddingXS),
18
+ // Pulse variant
19
+ pulseDot: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n\n background-color: ", ";\n\n animation: pulse-animation 1.2s ease-in-out infinite;\n\n @keyframes pulse-animation {\n 0%,\n 100% {\n transform: scale(0.8);\n opacity: 0.3;\n }\n\n 50% {\n transform: scale(1.3);\n opacity: 1;\n }\n }\n "])), size, size, dotColor),
20
+ // Typing variant
21
+ typingDot: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n\n background-color: ", ";\n\n animation: typing-animation 1.2s ease-in-out infinite;\n\n @keyframes typing-animation {\n 0%,\n 100% {\n transform: scale(0.6);\n opacity: 0.2;\n }\n\n 25% {\n transform: scale(1);\n opacity: 1;\n }\n\n 50%,\n 75% {\n transform: scale(0.6);\n opacity: 0.2;\n }\n }\n "])), size, size, dotColor),
22
+ // Wave variant
23
+ waveDot: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: ", "px;\n height: ", "px;\n border-radius: 50%;\n\n background-color: ", ";\n\n animation: wave-animation 1.24s ease-in-out infinite;\n\n @keyframes wave-animation {\n 0%,\n 100% {\n transform: translateY(0);\n }\n\n 25% {\n transform: translateY(-", "px);\n }\n\n 50% {\n transform: translateY(0);\n }\n }\n "])), size, size, dotColor, size * 1.5)
24
+ };
25
+ });
@@ -0,0 +1,22 @@
1
+ export type LoadingDotsVariant = 'dots' | 'pulse' | 'wave' | 'orbit' | 'typing';
2
+ export interface LoadingDotsProps {
3
+ /**
4
+ * 自定义类名
5
+ */
6
+ className?: string;
7
+ /**
8
+ * 点的颜色
9
+ * @description 如果不提供,将使用主题的 colorPrimary
10
+ */
11
+ color?: string;
12
+ /**
13
+ * 点的大小(直径)
14
+ * @default 8
15
+ */
16
+ size?: number;
17
+ /**
18
+ * 动画变体
19
+ * @default 'dots'
20
+ */
21
+ variant?: LoadingDotsVariant;
22
+ }
@@ -0,0 +1 @@
1
+ export {};
@@ -5,6 +5,7 @@ export { default as ChatItem, type ChatItemProps } from './ChatItem';
5
5
  export { ChatActionsBar, type ChatActionsBarProps, default as ChatList, type ChatListProps, type OnActionsClick, type OnAvatatsClick, type OnMessageChange, type RenderAction, type RenderErrorMessage, type RenderItem, type RenderMessage, type RenderMessageExtra, } from './ChatList';
6
6
  export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
7
7
  export { default as EditableMessageList, type EditableMessageListProps, } from './EditableMessageList';
8
+ export { default as LoadingDots, type LoadingDotsProps } from './LoadingDots';
8
9
  export { default as MessageInput, type MessageInputProps } from './MessageInput';
9
10
  export { default as MessageModal, type MessageModalProps } from './MessageModal';
10
11
  export { default as TokenTag, type TokenTagProps } from './TokenTag';
package/es/chat/index.js CHANGED
@@ -5,6 +5,7 @@ export { default as ChatItem } from "./ChatItem";
5
5
  export { ChatActionsBar, default as ChatList } from "./ChatList";
6
6
  export { default as EditableMessage } from "./EditableMessage";
7
7
  export { default as EditableMessageList } from "./EditableMessageList";
8
+ export { default as LoadingDots } from "./LoadingDots";
8
9
  export { default as MessageInput } from "./MessageInput";
9
10
  export { default as MessageModal } from "./MessageModal";
10
11
  export { default as TokenTag } from "./TokenTag";
@@ -1,7 +1,7 @@
1
1
  var FONT_EMOJI = "\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Apple Color Emoji\",\"Twemoji Mozilla\",\"Noto Color Emoji\",\"Android Emoji\"";
2
2
  var FONT_EN = "\"HarmonyOS Sans\",\"Segoe UI\",\"SF Pro Display\",-apple-system,BlinkMacSystemFont,Roboto,Oxygen,Ubuntu,Cantarell,\"Open Sans\",\"Helvetica Neue\",sans-serif";
3
3
  var FONT_CN = "\"HarmonyOS Sans SC\",\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft Yahei UI\",\"Microsoft Yahei\",\"Source Han Sans CN\",sans-serif";
4
- var FONT_CODE = "Hack,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace";
4
+ var FONT_CODE = "Hack,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas";
5
5
  export var baseToken = {
6
6
  borderRadius: 8,
7
7
  borderRadiusLG: 12,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lobehub/ui",
3
- "version": "2.19.0",
3
+ "version": "2.20.1",
4
4
  "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
5
5
  "keywords": [
6
6
  "lobehub",