@lobehub/ui 2.23.2 → 2.24.1

package/es/Empty/Empty.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { EmptyProps } from './type';
+declare const Empty: import("react").NamedExoticComponent<EmptyProps>;
+export default Empty;

package/es/Empty/Empty.js

@@ -0,0 +1,97 @@
+'use client';
+
+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); }
+var _excluded = ["title", "description", "icon", "image", "emoji", "imageSize", "iconColor", "action", "children", "imageProps", "align", "actionProps", "type", "titleProps", "descriptionProps"];
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { Empty as AntEmpty } from 'antd';
+import { useTheme } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import Block from "../Block";
+import FluentEmoji from "../FluentEmoji";
+import Icon from "../Icon";
+import Text from "../Text";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Empty = /*#__PURE__*/memo(function (_ref) {
+  var title = _ref.title,
+    description = _ref.description,
+    icon = _ref.icon,
+    image = _ref.image,
+    emoji = _ref.emoji,
+    _ref$imageSize = _ref.imageSize,
+    imageSize = _ref$imageSize === void 0 ? 48 : _ref$imageSize,
+    iconColor = _ref.iconColor,
+    action = _ref.action,
+    children = _ref.children,
+    imageProps = _ref.imageProps,
+    align = _ref.align,
+    actionProps = _ref.actionProps,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type,
+    titleProps = _ref.titleProps,
+    descriptionProps = _ref.descriptionProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var isPage = type === 'page';
+  var alignValue = align || (isPage ? 'flex-start' : 'center');
+  var isCenter = alignValue === 'center';
+  var fallbackImage = AntEmpty.PRESENTED_IMAGE_SIMPLE;
+  var hasImage = image || emoji || icon;
+  var cover = hasImage ? image ? image : /*#__PURE__*/_jsxs(Block, _objectSpread(_objectSpread({
+    align: 'center',
+    flex: 'none',
+    height: imageSize,
+    justify: "center",
+    variant: 'outlined',
+    width: imageSize
+  }, imageProps), {}, {
+    style: _objectSpread({
+      marginBottom: 4
+    }, imageProps === null || imageProps === void 0 ? void 0 : imageProps.style),
+    children: [icon && /*#__PURE__*/_jsx(Icon, {
+      color: iconColor || (theme.isDarkMode ? theme.colorTextQuaternary : theme.colorTextSecondary),
+      icon: icon,
+      size: imageSize * 0.66
+    }), emoji && /*#__PURE__*/_jsx(FluentEmoji, {
+      emoji: emoji,
+      size: imageSize * 0.75,
+      type: 'anim'
+    })]
+  })) : fallbackImage;
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    align: alignValue,
+    gap: 8,
+    padding: 16
+  }, rest), {}, {
+    children: [cover, /*#__PURE__*/_jsxs(Flexbox, {
+      align: alignValue,
+      gap: isPage ? 4 : 1,
+      children: [title && /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({
+        align: isCenter ? 'center' : undefined,
+        fontSize: isPage ? 24 : 16,
+        weight: 'bold'
+      }, titleProps), {}, {
+        children: title
+      })), description && /*#__PURE__*/_jsx(Text, _objectSpread(_objectSpread({
+        align: isCenter ? 'center' : undefined,
+        color: isPage ? theme.colorTextSecondary : theme.colorTextDescription,
+        fontSize: isPage ? 16 : 14
+      }, descriptionProps), {}, {
+        children: description
+      }))]
+    }), children, action && /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+      gap: 4
+    }, actionProps), {}, {
+      children: action
+    }))]
+  }));
+});
+Empty.displayName = 'Empty';
+export default Empty;

package/es/Empty/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Empty';
+export type * from './type';

package/es/Empty/index.js

@@ -0,0 +1 @@
+export { default } from "./Empty";

package/es/Empty/type.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { FlexboxProps } from 'react-layout-kit';
+import { BlockProps } from "../Block";
+import { IconProps } from "../Icon";
+import { TextProps } from "../Text";
+export interface EmptyProps extends Omit<FlexboxProps, 'title'> {
+    action?: ReactNode;
+    actionProps?: Omit<FlexboxProps, 'children'>;
+    description?: ReactNode;
+    descriptionProps?: Omit<TextProps, 'children'>;
+    emoji?: string;
+    icon?: IconProps['icon'];
+    iconColor?: IconProps['color'];
+    image?: ReactNode;
+    imageProps?: Omit<BlockProps, 'children'>;
+    imageSize?: number;
+    title?: ReactNode;
+    titleProps?: Omit<TextProps, 'children'>;
+    type?: 'default' | 'page';
+}

package/es/Empty/type.js

@@ -0,0 +1 @@
+export {};

package/es/Highlighter/Highlighter.js

@@ -1,12 +1,12 @@
 'use client';
 
-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); }
 var _excluded = ["animated", "fullFeatured", "actionIconSize", "children", "language", "className", "copyable", "showLanguage", "variant", "shadow", "wrap", "bodyRender", "actionsRender", "enableTransformer", "theme", "icon", "fileName", "allowChangeLanguage", "defaultExpand"];
 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; }
 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; }
 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; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 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); }
+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); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 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."); }
 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); }
@@ -85,7 +85,16 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
       /* eslint-enable sort-keys-fix/sort-keys-fix */
     });
   }, [styles]);
-  var tirmedChildren = children.trim();
+
+  // Safely handle children with boundary check
+  var tirmedChildren = useMemo(function () {
+    if (children === null || children === undefined) return '';
+    if (typeof children !== 'string') {
+      console.warn('Highlighter: children should be a string, received:', _typeof(children));
+      return String(children);
+    }
+    return children.trim();
+  }, [children]);
   var copyContentRef = useRef(tirmedChildren);
   useEffect(function () {
     copyContentRef.current = tirmedChildren;

package/es/Highlighter/SyntaxHighlighter/StaticRenderer.js

@@ -3,6 +3,11 @@
 import { memo } from 'react';
 import { useHighlight } from "../../hooks/useHighlight";
 import { jsx as _jsx } from "react/jsx-runtime";
+// Escape HTML for fallback to prevent XSS
+var escapeHtml = function escapeHtml(str) {
+  return str.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#039;');
+};
+
 /**
  * Static renderer for syntax highlighting without animation
  * Uses useHighlight hook to generate HTML and renders it directly
@@ -15,7 +20,9 @@ var StaticRenderer = /*#__PURE__*/memo(function (_ref) {
     language = _ref.language,
     style = _ref.style,
     theme = _ref.theme;
-  var _useHighlight = useHighlight(children, {
+  // Safely handle empty or invalid children
+  var safeChildren = children !== null && children !== void 0 ? children : '';
+  var _useHighlight = useHighlight(safeChildren, {
       enableTransformer: enableTransformer,
       language: language,
       theme: theme
@@ -26,7 +33,7 @@ var StaticRenderer = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsx("div", {
     className: containerClassName,
     dangerouslySetInnerHTML: {
-      __html: data || "<pre><code>".concat(children, "</code></pre>")
+      __html: data || "<pre><code>".concat(escapeHtml(safeChildren), "</code></pre>")
     },
     dir: "ltr",
     style: style

package/es/Highlighter/SyntaxHighlighter/StreamRenderer.js

@@ -97,7 +97,10 @@ var StreamRenderer = /*#__PURE__*/memo(function (_ref5) {
     theme = _ref5.theme;
   var _useStyles = useStyles(),
     cx = _useStyles.cx;
-  var _useHighlight = useHighlight(children, {
+
+  // Safely handle empty or invalid children
+  var safeChildren = children !== null && children !== void 0 ? children : '';
+  var _useHighlight = useHighlight(safeChildren, {
       enableTransformer: enableTransformer,
       language: language,
       streaming: true,
@@ -114,7 +117,7 @@ var StreamRenderer = /*#__PURE__*/memo(function (_ref5) {
       style: style,
       children: /*#__PURE__*/_jsx("pre", {
         children: /*#__PURE__*/_jsx("code", {
-          children: children
+          children: safeChildren
         })
       })
     });

package/es/Skeleton/Skeleton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { SkeletonProps } from './type';
+declare const Skeleton: import("react").NamedExoticComponent<SkeletonProps>;
+export default Skeleton;

package/es/Skeleton/Skeleton.js

@@ -0,0 +1,83 @@
+'use client';
+
+var _excluded = ["active", "avatar", "title", "paragraph", "className", "classNames", "styles", "style", "width", "height", "gap"];
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import SkeletonAvatar from "./SkeletonAvatar";
+import SkeletonParagraph from "./SkeletonParagraph";
+import SkeletonTitle from "./SkeletonTitle";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Skeleton = /*#__PURE__*/memo(function (_ref) {
+  var _avatarProps$active, _titleProps$active, _paragraphProps$activ;
+  var active = _ref.active,
+    _ref$avatar = _ref.avatar,
+    avatar = _ref$avatar === void 0 ? false : _ref$avatar,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? true : _ref$title,
+    _ref$paragraph = _ref.paragraph,
+    paragraph = _ref$paragraph === void 0 ? true : _ref$paragraph,
+    className = _ref.className,
+    classNames = _ref.classNames,
+    customStyles = _ref.styles,
+    style = _ref.style,
+    width = _ref.width,
+    height = _ref.height,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 16 : _ref$gap,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  var showAvatar = Boolean(avatar);
+  var showTitle = Boolean(title);
+  var showParagraph = Boolean(paragraph);
+  var avatarProps = _typeof(avatar) === 'object' ? avatar : undefined;
+  var titleProps = _typeof(title) === 'object' ? title : undefined;
+  var paragraphProps = _typeof(paragraph) === 'object' ? paragraph : undefined;
+  var rootStyle = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), customStyles === null || customStyles === void 0 ? void 0 : customStyles.root), width !== undefined ? {
+    width: width
+  } : {}), height !== undefined ? {
+    height: height
+  } : {});
+  var avatarActive = (_avatarProps$active = avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.active) !== null && _avatarProps$active !== void 0 ? _avatarProps$active : active;
+  var titleActive = (_titleProps$active = titleProps === null || titleProps === void 0 ? void 0 : titleProps.active) !== null && _titleProps$active !== void 0 ? _titleProps$active : active;
+  var paragraphActive = (_paragraphProps$activ = paragraphProps === null || paragraphProps === void 0 ? void 0 : paragraphProps.active) !== null && _paragraphProps$activ !== void 0 ? _paragraphProps$activ : active;
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    align: showParagraph ? 'flex-start' : 'center',
+    className: cx(className, classNames === null || classNames === void 0 ? void 0 : classNames.root),
+    gap: gap,
+    horizontal: true,
+    style: rootStyle,
+    width: '100%'
+  }, rest), {}, {
+    children: [showAvatar && /*#__PURE__*/_jsx(SkeletonAvatar, _objectSpread(_objectSpread({}, avatarProps), {}, {
+      active: avatarActive,
+      className: cx(styles.avatar, classNames === null || classNames === void 0 ? void 0 : classNames.avatar, avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className),
+      style: _objectSpread(_objectSpread({}, avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.style), customStyles === null || customStyles === void 0 ? void 0 : customStyles.avatar)
+    })), /*#__PURE__*/_jsxs(Flexbox, {
+      gap: gap,
+      width: '100%',
+      children: [showTitle && /*#__PURE__*/_jsx(SkeletonTitle, _objectSpread(_objectSpread({}, titleProps), {}, {
+        active: titleActive,
+        className: cx(classNames === null || classNames === void 0 ? void 0 : classNames.title, titleProps === null || titleProps === void 0 ? void 0 : titleProps.className),
+        style: _objectSpread(_objectSpread({}, titleProps === null || titleProps === void 0 ? void 0 : titleProps.style), customStyles === null || customStyles === void 0 ? void 0 : customStyles.title)
+      })), showParagraph && /*#__PURE__*/_jsx(SkeletonParagraph, _objectSpread(_objectSpread({}, paragraphProps), {}, {
+        active: paragraphActive,
+        className: cx(classNames === null || classNames === void 0 ? void 0 : classNames.paragraph, paragraphProps === null || paragraphProps === void 0 ? void 0 : paragraphProps.className),
+        style: _objectSpread(_objectSpread({}, paragraphProps === null || paragraphProps === void 0 ? void 0 : paragraphProps.style), customStyles === null || customStyles === void 0 ? void 0 : customStyles.paragraph)
+      }))]
+    })]
+  }));
+});
+Skeleton.displayName = 'Skeleton';
+export default Skeleton;

package/es/Skeleton/SkeletonAvatar.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { SkeletonAvatarProps } from './type';
+declare const SkeletonAvatar: import("react").NamedExoticComponent<SkeletonAvatarProps>;
+export default SkeletonAvatar;

package/es/Skeleton/SkeletonAvatar.js

@@ -0,0 +1,46 @@
+'use client';
+
+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); }
+var _excluded = ["active", "shape", "size", "width", "height", "style", "className"];
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { memo } from 'react';
+import SkeletonBlock from "./SkeletonBlock";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_SIZE = 40;
+var SkeletonAvatar = /*#__PURE__*/memo(function (_ref) {
+  var active = _ref.active,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
+    size = _ref.size,
+    width = _ref.width,
+    height = _ref.height,
+    style = _ref.style,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles,
+    theme = _useStyles.theme;
+  var defaultSize = size !== null && size !== void 0 ? size : DEFAULT_SIZE;
+  var finalWidth = width !== null && width !== void 0 ? width : defaultSize;
+  var finalHeight = height !== null && height !== void 0 ? height : defaultSize;
+  var borderRadius = shape === 'circle' ? '50%' : "".concat(theme.borderRadius, "px");
+  return /*#__PURE__*/_jsx(SkeletonBlock, _objectSpread({
+    active: active,
+    className: cx(styles.avatar, className),
+    height: finalHeight,
+    style: _objectSpread({
+      borderRadius: borderRadius
+    }, style),
+    width: finalWidth
+  }, rest));
+});
+SkeletonAvatar.displayName = 'SkeletonAvatar';
+export default SkeletonAvatar;

package/es/Skeleton/SkeletonBlock.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SkeletonBlockProps } from "./type";
+declare const SkeletonBlock: import("react").NamedExoticComponent<SkeletonBlockProps>;
+export default SkeletonBlock;

package/es/Skeleton/SkeletonBlock.js

@@ -0,0 +1,27 @@
+'use client';
+
+import { memo } from 'react';
+import Block from "../Block";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var SkeletonBlock = /*#__PURE__*/memo(function (_ref) {
+  var _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '100%' : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? '1em' : _ref$height,
+    active = _ref.active,
+    style = _ref.style,
+    className = _ref.className;
+  var _useStyles = useStyles(),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsx(Block, {
+    className: cx(styles.base, active && styles.active, className),
+    height: height,
+    style: style,
+    variant: 'filled',
+    width: width
+  });
+});
+SkeletonBlock.displayName = 'SkeletonBlock';
+export default SkeletonBlock;

package/es/Skeleton/SkeletonButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { SkeletonButtonProps } from './type';
+declare const SkeletonButton: import("react").NamedExoticComponent<SkeletonButtonProps>;
+export default SkeletonButton;

package/es/Skeleton/SkeletonButton.js

@@ -0,0 +1,57 @@
+'use client';
+
+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); }
+var _excluded = ["active", "block", "shape", "size", "width", "height", "style", "className"];
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { memo } from 'react';
+import SkeletonBlock from "./SkeletonBlock";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var HEIGHT_MAP = {
+  default: 36,
+  large: 46,
+  small: 28
+};
+var SkeletonButton = /*#__PURE__*/memo(function (_ref) {
+  var active = _ref.active,
+    _ref$block = _ref.block,
+    block = _ref$block === void 0 ? false : _ref$block,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? 'default' : _ref$shape,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'default' : _ref$size,
+    width = _ref.width,
+    height = _ref.height,
+    style = _ref.style,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    theme = _useStyles.theme;
+  var resolvedSize = size !== null && size !== void 0 ? size : 'default';
+  var baseHeight = height !== null && height !== void 0 ? height : HEIGHT_MAP[resolvedSize];
+  var defaultWidth = block ? '100%' : shape === 'circle' ? baseHeight : 80;
+  var finalWidth = width !== null && width !== void 0 ? width : defaultWidth;
+  var RADIUS_MAP = {
+    default: theme.borderRadius,
+    large: theme.borderRadiusLG,
+    small: theme.borderRadiusSM
+  };
+  var borderRadius = shape === 'circle' ? '50%' : shape === 'round' ? "".concat(theme.borderRadius * 2, "px") : RADIUS_MAP[resolvedSize];
+  return /*#__PURE__*/_jsx(SkeletonBlock, _objectSpread({
+    active: active,
+    className: className,
+    height: baseHeight,
+    style: _objectSpread({
+      borderRadius: borderRadius
+    }, style),
+    width: finalWidth
+  }, rest));
+});
+SkeletonButton.displayName = 'SkeletonButton';
+export default SkeletonButton;

package/es/Skeleton/SkeletonParagraph.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { SkeletonParagraphProps } from './type';
+declare const SkeletonParagraph: import("react").NamedExoticComponent<SkeletonParagraphProps>;
+export default SkeletonParagraph;

package/es/Skeleton/SkeletonParagraph.js

@@ -0,0 +1,64 @@
+'use client';
+
+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); }
+var _excluded = ["active", "rows", "gap", "width", "height", "fontSize", "lineHeight", "style", "className"];
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import SkeletonBlock from "./SkeletonBlock";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_ROWS = 3;
+var SkeletonParagraph = /*#__PURE__*/memo(function (_ref) {
+  var active = _ref.active,
+    _ref$rows = _ref.rows,
+    rows = _ref$rows === void 0 ? DEFAULT_ROWS : _ref$rows,
+    gap = _ref.gap,
+    width = _ref.width,
+    height = _ref.height,
+    fontSize = _ref.fontSize,
+    lineHeight = _ref.lineHeight,
+    style = _ref.style,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var rowGap = gap;
+  var rowCount = Math.max(rows, 1);
+  var baseFontSize = fontSize !== null && fontSize !== void 0 ? fontSize : 14;
+  var resolvedLineHeight = lineHeight !== null && lineHeight !== void 0 ? lineHeight : 1.6;
+  var computedHeight = height ? height : Math.round(baseFontSize * resolvedLineHeight);
+  var marginBlock = computedHeight - baseFontSize;
+  var widthList = Array.isArray(width) ? width : null;
+  var getRowWidth = function getRowWidth(index) {
+    var _ref2, _widthList$index;
+    if (widthList) return (_ref2 = (_widthList$index = widthList[index]) !== null && _widthList$index !== void 0 ? _widthList$index : widthList.at(-1)) !== null && _ref2 !== void 0 ? _ref2 : '100%';
+    if (width !== undefined) return width;
+    if (index === rowCount - 1) return '66%';
+    return '100%';
+  };
+  var containerStyle = _objectSpread({
+    gap: rowGap
+  }, style);
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: className,
+    gap: gap || marginBlock,
+    style: containerStyle,
+    width: '100%'
+  }, rest), {}, {
+    children: Array.from({
+      length: rowCount
+    }).map(function (_, index) {
+      return /*#__PURE__*/_jsx(SkeletonBlock, {
+        active: active,
+        height: baseFontSize,
+        width: getRowWidth(index)
+      }, index);
+    })
+  }));
+});
+SkeletonParagraph.displayName = 'SkeletonParagraph';
+export default SkeletonParagraph;

package/es/Skeleton/SkeletonTags.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { SkeletonTagsProps } from './type';
+declare const SkeletonTags: import("react").NamedExoticComponent<SkeletonTagsProps>;
+export default SkeletonTags;

package/es/Skeleton/SkeletonTags.js

@@ -0,0 +1,81 @@
+'use client';
+
+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); }
+var _excluded = ["active", "className", "count", "gap", "height", "size", "style", "width"];
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import SkeletonBlock from "./SkeletonBlock";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_COUNT = 1;
+var HEIGHT_MAP = {
+  large: 28,
+  middle: 22,
+  small: 20
+};
+var DEFAULT_WIDTH_MAP = {
+  large: 64,
+  middle: 48,
+  small: 36
+};
+var SkeletonTags = /*#__PURE__*/memo(function (_ref) {
+  var _ref2;
+  var active = _ref.active,
+    className = _ref.className,
+    _ref$count = _ref.count,
+    count = _ref$count === void 0 ? DEFAULT_COUNT : _ref$count,
+    gap = _ref.gap,
+    height = _ref.height,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'middle' : _ref$size,
+    style = _ref.style,
+    width = _ref.width,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    theme = _useStyles.theme;
+  var resolvedGap = (_ref2 = gap !== null && gap !== void 0 ? gap : theme.paddingXS) !== null && _ref2 !== void 0 ? _ref2 : 4;
+  var resolvedCount = Math.max(count, 1);
+  var resolvedHeight = height !== null && height !== void 0 ? height : HEIGHT_MAP[size];
+  var widthList = Array.isArray(width) ? width : null;
+  var defaultWidth = DEFAULT_WIDTH_MAP[size];
+  var RADIUS_MAP = {
+    large: theme.borderRadius,
+    middle: theme.borderRadiusSM,
+    small: theme.borderRadiusXS
+  };
+  var getWidth = function getWidth(index) {
+    var _ref3, _widthList$index;
+    if (widthList) return (_ref3 = (_widthList$index = widthList[index]) !== null && _widthList$index !== void 0 ? _widthList$index : widthList.at(-1)) !== null && _ref3 !== void 0 ? _ref3 : defaultWidth;
+    if (width !== undefined) return width;
+    return defaultWidth;
+  };
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: className,
+    horizontal: true,
+    style: _objectSpread({
+      gap: resolvedGap
+    }, style)
+  }, rest), {}, {
+    children: Array.from({
+      length: resolvedCount
+    }).map(function (_, index) {
+      return /*#__PURE__*/_jsx(SkeletonBlock, {
+        active: active,
+        height: resolvedHeight,
+        style: {
+          borderRadius: RADIUS_MAP[size]
+        },
+        width: getWidth(index)
+      }, index);
+    })
+  }));
+});
+SkeletonTags.displayName = 'SkeletonTags';
+export default SkeletonTags;

package/es/Skeleton/SkeletonTitle.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { SkeletonTitleProps } from './type';
+declare const SkeletonTitle: import("react").NamedExoticComponent<SkeletonTitleProps>;
+export default SkeletonTitle;

package/es/Skeleton/SkeletonTitle.js

@@ -0,0 +1,45 @@
+'use client';
+
+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); }
+var _excluded = ["active", "fontSize", "lineHeight", "height", "width", "style", "className"];
+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; }
+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; }
+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; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { memo } from 'react';
+import SkeletonBlock from "./SkeletonBlock";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var DEFAULT_FONT_SIZE = 18;
+var SkeletonTitle = /*#__PURE__*/memo(function (_ref) {
+  var _ref2;
+  var active = _ref.active,
+    fontSize = _ref.fontSize,
+    lineHeight = _ref.lineHeight,
+    height = _ref.height,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? '60%' : _ref$width,
+    style = _ref.style,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    theme = _useStyles.theme;
+  var baseFontSize = (_ref2 = fontSize !== null && fontSize !== void 0 ? fontSize : theme.fontSize) !== null && _ref2 !== void 0 ? _ref2 : DEFAULT_FONT_SIZE;
+  var resolvedLineHeight = lineHeight !== null && lineHeight !== void 0 ? lineHeight : 1.6;
+  var computedHeight = height ? height : Math.round(baseFontSize * resolvedLineHeight);
+  var marginBlock = computedHeight - baseFontSize;
+  return /*#__PURE__*/_jsx(SkeletonBlock, _objectSpread({
+    active: active,
+    className: className,
+    height: Math.round(baseFontSize + marginBlock * 0.5),
+    style: _objectSpread({
+      marginBlock: Math.round(marginBlock * 0.5 / 2)
+    }, style),
+    width: width
+  }, rest));
+});
+SkeletonTitle.displayName = 'SkeletonTitle';
+export default SkeletonTitle;

package/es/Skeleton/index.d.ts

@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react';
+import type { SkeletonProps } from "./type";
+import SkeletonAvatar from './SkeletonAvatar';
+import SkeletonBlock from './SkeletonBlock';
+import SkeletonButton from './SkeletonButton';
+import SkeletonParagraph from './SkeletonParagraph';
+import SkeletonTags from './SkeletonTags';
+import SkeletonTitle from './SkeletonTitle';
+interface ISkeleton {
+    (props: SkeletonProps): ReactNode;
+    Avatar: typeof SkeletonAvatar;
+    Block: typeof SkeletonBlock;
+    Button: typeof SkeletonButton;
+    Paragraph: typeof SkeletonParagraph;
+    Tags: typeof SkeletonTags;
+    Title: typeof SkeletonTitle;
+}
+declare const Skeleton: ISkeleton;
+export default Skeleton;
+export { default as SkeletonAvatar } from './SkeletonAvatar';
+export { default as SkeletonBlock } from './SkeletonBlock';
+export { default as SkeletonButton } from './SkeletonButton';
+export { default as SkeletonParagraph } from './SkeletonParagraph';
+export { default as SkeletonTags } from './SkeletonTags';
+export { default as SkeletonTitle } from './SkeletonTitle';
+export type * from './type';

package/es/Skeleton/index.js

@@ -0,0 +1,21 @@
+import SkeletonParent from "./Skeleton";
+import SkeletonAvatar from "./SkeletonAvatar";
+import SkeletonBlock from "./SkeletonBlock";
+import SkeletonButton from "./SkeletonButton";
+import SkeletonParagraph from "./SkeletonParagraph";
+import SkeletonTags from "./SkeletonTags";
+import SkeletonTitle from "./SkeletonTitle";
+var Skeleton = SkeletonParent;
+Skeleton.Block = SkeletonBlock;
+Skeleton.Avatar = SkeletonAvatar;
+Skeleton.Title = SkeletonTitle;
+Skeleton.Paragraph = SkeletonParagraph;
+Skeleton.Button = SkeletonButton;
+Skeleton.Tags = SkeletonTags;
+export default Skeleton;
+export { default as SkeletonAvatar } from "./SkeletonAvatar";
+export { default as SkeletonBlock } from "./SkeletonBlock";
+export { default as SkeletonButton } from "./SkeletonButton";
+export { default as SkeletonParagraph } from "./SkeletonParagraph";
+export { default as SkeletonTags } from "./SkeletonTags";
+export { default as SkeletonTitle } from "./SkeletonTitle";

package/es/Skeleton/style.d.ts

@@ -0,0 +1,6 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    active: import("antd-style").SerializedStyles;
+    avatar: import("antd-style").SerializedStyles;
+    base: import("antd-style").SerializedStyles;
+    text: import("antd-style").SerializedStyles;
+}>;

package/es/Skeleton/style.js

@@ -0,0 +1,16 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+import { createStyles, keyframes } from 'antd-style';
+var shimmer = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: .5;\n  }\n  100% {\n    opacity: 1;\n  }\n"])));
+export var useStyles = createStyles(function (_ref) {
+  var _token$paddingXS;
+  var css = _ref.css,
+    token = _ref.token;
+  var spacing = (_token$paddingXS = token.paddingXS) !== null && _token$paddingXS !== void 0 ? _token$paddingXS : 8;
+  return {
+    active: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      background: ", ";\n      animation: ", " 2s linear infinite;\n    "])), token.colorFillSecondary, shimmer),
+    avatar: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      flex-shrink: 0;\n    "]))),
+    base: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      user-select: none;\n\n      position: relative;\n\n      overflow: hidden;\n\n      border-radius: ", "px;\n\n      background: ", ";\n    "])), token.borderRadius, token.colorFillTertiary),
+    text: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      display: flex;\n      flex: 1;\n      flex-direction: column;\n      gap: ", "px;\n\n      width: 100%;\n    "])), spacing)
+  };
+});

package/es/Skeleton/type.d.ts

@@ -0,0 +1,55 @@
+import { CSSProperties } from 'react';
+export interface SkeletonBlockProps {
+    active?: boolean;
+    className?: string;
+    height?: number | string;
+    style?: CSSProperties;
+    width?: number | string;
+}
+export interface SkeletonTitleProps extends Omit<SkeletonBlockProps, 'height'> {
+    fontSize?: number;
+    height?: number;
+    lineHeight?: number;
+    width?: number | string;
+}
+export interface SkeletonParagraphProps extends Omit<SkeletonBlockProps, 'width' | 'height'> {
+    fontSize?: number;
+    gap?: number;
+    height?: number;
+    lineHeight?: number;
+    rows?: number;
+    width?: number | string | (number | string)[];
+}
+export interface SkeletonTagsProps extends Omit<SkeletonBlockProps, 'width'> {
+    count?: number;
+    gap?: number;
+    size?: 'small' | 'middle' | 'large';
+    width?: number | string | (number | string)[];
+}
+export interface SkeletonAvatarProps extends SkeletonBlockProps {
+    shape?: 'circle' | 'square';
+    size?: number | string;
+}
+export interface SkeletonButtonProps extends SkeletonBlockProps {
+    block?: boolean;
+    shape?: 'circle' | 'round' | 'default';
+    size?: 'large' | 'small' | 'default';
+}
+export interface SkeletonProps extends SkeletonBlockProps {
+    avatar?: SkeletonAvatarProps | boolean;
+    classNames?: {
+        avatar?: string;
+        paragraph?: string;
+        root?: string;
+        title?: string;
+    };
+    gap?: number;
+    paragraph?: SkeletonParagraphProps | boolean;
+    styles?: {
+        avatar?: CSSProperties;
+        paragraph?: CSSProperties;
+        root?: CSSProperties;
+        title?: CSSProperties;
+    };
+    title?: SkeletonTitleProps | boolean;
+}

package/es/Skeleton/type.js

@@ -0,0 +1 @@
+export {};

package/es/hooks/useHighlight.js

@@ -102,13 +102,14 @@ var useStreamingHighlighter = function useStreamingHighlighter(text, options) {
     setResult = _useState2[1];
   var tokenizerRef = useRef(null);
   var previousTextRef = useRef('');
-  var latestTextRef = useRef(text);
+  var safeText = text !== null && text !== void 0 ? text : '';
+  var latestTextRef = useRef(safeText);
   var preStyleRef = useRef(undefined);
   var colorReplacementsRef = useRef(colorReplacements);
   var linesRef = useRef([[]]);
   useEffect(function () {
-    latestTextRef.current = text;
-  }, [text]);
+    latestTextRef.current = safeText;
+  }, [safeText]);
   useEffect(function () {
     colorReplacementsRef.current = colorReplacements;
   }, [colorReplacements]);
@@ -281,8 +282,8 @@ var useStreamingHighlighter = function useStreamingHighlighter(text, options) {
   useEffect(function () {
     if (!enabled) return;
     if (!tokenizerRef.current) return;
-    updateTokens(text);
-  }, [enabled, text, updateTokens]);
+    updateTokens(safeText);
+  }, [enabled, safeText, updateTokens]);
   return result;
 };
 
@@ -295,7 +296,10 @@ export var useHighlight = function useHighlight(text, _ref3) {
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
   var theme = useTheme();
-  var lang = language.toLowerCase();
+
+  // Safely handle language and text with boundary checks
+  var safeText = text !== null && text !== void 0 ? text : '';
+  var lang = (language !== null && language !== void 0 ? language : 'plaintext').toLowerCase();
 
   // Match supported languages
   var matchedLanguage = useMemo(function () {
@@ -340,9 +344,9 @@ export var useHighlight = function useHighlight(text, _ref3) {
   // Build cache key
   var cacheKey = useMemo(function () {
     // Use hash for long text
-    var hash = text.length < MD5_LENGTH_THRESHOLD ? text : Md5.hashStr(text);
+    var hash = safeText.length < MD5_LENGTH_THRESHOLD ? safeText : Md5.hashStr(safeText);
     return [matchedLanguage, builtinTheme || (isDarkMode ? 'd' : 'l'), hash].filter(Boolean).join('-');
-  }, [text, matchedLanguage, isDarkMode, builtinTheme]);
+  }, [safeText, matchedLanguage, isDarkMode, builtinTheme]);
 
   // Use SWR to get highlighted HTML
   var response = useSWR(streaming ? null : cacheKey, /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
@@ -359,10 +363,10 @@ export var useHighlight = function useHighlight(text, _ref3) {
             _context3.next = 6;
             break;
           }
-          return _context3.abrupt("return", text);
+          return _context3.abrupt("return", safeText);
         case 6:
           _context3.next = 8;
-          return codeToHtml(text, {
+          return codeToHtml(safeText, {
             colorReplacements: builtinTheme ? undefined : colorReplacements,
             lang: matchedLanguage,
             theme: builtinTheme || (isDarkMode ? 'slack-dark' : 'slack-ochin'),
@@ -384,10 +388,10 @@ export var useHighlight = function useHighlight(text, _ref3) {
             _context3.next = 21;
             break;
           }
-          return _context3.abrupt("return", text);
+          return _context3.abrupt("return", safeText);
         case 21:
           _context3.next = 23;
-          return _codeToHtml(text, {
+          return _codeToHtml(safeText, {
             lang: matchedLanguage,
             theme: isDarkMode ? 'dark-plus' : 'light-plus'
           });
@@ -398,7 +402,7 @@ export var useHighlight = function useHighlight(text, _ref3) {
           _context3.prev = 27;
           _context3.t1 = _context3["catch"](15);
           // Fallback to plain text
-          fallbackHtml = "<pre class=\"fallback\"><code>".concat(escapeHtml(text), "</code></pre>");
+          fallbackHtml = "<pre class=\"fallback\"><code>".concat(escapeHtml(safeText), "</code></pre>");
           return _context3.abrupt("return", fallbackHtml);
         case 31:
         case "end":
@@ -414,7 +418,7 @@ export var useHighlight = function useHighlight(text, _ref3) {
     revalidateOnReconnect: false
   });
   var effectiveTheme = builtinTheme || (isDarkMode ? 'slack-dark' : 'slack-ochin');
-  var streamingResult = useStreamingHighlighter(text, {
+  var streamingResult = useStreamingHighlighter(safeText, {
     colorReplacements: builtinTheme ? undefined : colorReplacements[effectiveTheme],
     enabled: streaming,
     language: matchedLanguage,

package/es/index.d.ts

@@ -20,6 +20,7 @@ export { default as Drawer, type DrawerProps } from './Drawer';
 export { default as Dropdown, type DropdownMenuItemType, type DropdownProps } from './Dropdown';
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { default as EmojiPicker, type EmojiPickerProps } from './EmojiPicker';
+export { default as Empty, type EmptyProps } from './Empty';
 export { default as FileTypeIcon, type FileTypeIconProps } from './FileTypeIcon';
 export { default as FluentEmoji, type FluentEmojiProps } from './FluentEmoji';
 export { default as FontLoader, type FontLoaderProps } from './FontLoader';
@@ -60,6 +61,7 @@ export { default as SearchBar, type SearchBarProps } from './SearchBar';
 export { default as Segmented, type SegmentedProps } from './Segmented';
 export { default as Select, type SelectProps } from './Select';
 export { default as SideNav, type SideNavProps } from './SideNav';
+export { default as Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonBlock, type SkeletonBlockProps, SkeletonButton, type SkeletonButtonProps, SkeletonParagraph, type SkeletonParagraphProps, type SkeletonProps, SkeletonTags, type SkeletonTagsProps, SkeletonTitle, type SkeletonTitleProps, } from './Skeleton';
 export { default as SliderWithInput, type SliderWithInputProps } from './SliderWithInput';
 export { default as Snippet, type SnippetProps } from './Snippet';
 export { default as SortableList, type SortableListProps } from './SortableList';

package/es/index.js

@@ -20,6 +20,7 @@ export { default as Drawer } from "./Drawer";
 export { default as Dropdown } from "./Dropdown";
 export { default as EditableText } from "./EditableText";
 export { default as EmojiPicker } from "./EmojiPicker";
+export { default as Empty } from "./Empty";
 export { default as FileTypeIcon } from "./FileTypeIcon";
 export { default as FluentEmoji } from "./FluentEmoji";
 export { default as FontLoader } from "./FontLoader";
@@ -60,6 +61,7 @@ export { default as SearchBar } from "./SearchBar";
 export { default as Segmented } from "./Segmented";
 export { default as Select } from "./Select";
 export { default as SideNav } from "./SideNav";
+export { default as Skeleton, SkeletonAvatar, SkeletonBlock, SkeletonButton, SkeletonParagraph, SkeletonTags, SkeletonTitle } from "./Skeleton";
 export { default as SliderWithInput } from "./SliderWithInput";
 export { default as Snippet } from "./Snippet";
 export { default as SortableList } from "./SortableList";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "2.23.2",
+  "version": "2.24.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",