@lobehub/ui 1.77.0 → 1.79.0

package/README.md

@@ -2,9 +2,9 @@
 
 <div align="center">
 
-<img height="120" src="https://npm.elemecdn.com/@lobehub/assets-logo@1.0.0/assets/logo-3d.webp">
+<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-logo/1.0.0/files/assets/logo-3d.webp">
 <img height="120" src="https://gw.alipayobjects.com/zos/kitchen/qJ3l3EPsdW/split.svg">
-<img height="120" src="https://npm.elemecdn.com/fluentui-emoji/icons/modern/lollipop.svg">
+<img height="120" src="https://registry.npmmirror.com/@lobehub/assets-emoji/1.3.0/files/assets/lollipop.webp">
 
 <h1>Lobe UI</h1>
 

package/es/Highlighter/index.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
+import { type CopyButtonProps } from "../CopyButton";
 import { DivProps } from "../types";
 export interface HighlighterProps extends DivProps {
     /**
      * @description The code content to be highlighted
      */
     children: string;
+    copyButtonSize?: CopyButtonProps['size'];
     /**
      * @description Whether to show the copy button
      * @default true

package/es/Highlighter/index.js

@@ -1,17 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "language", "className", "style", "copyable", "showLanguage", "type", "spotlight"];
+var _excluded = ["copyButtonSize", "children", "language", "className", "style", "copyable", "showLanguage", "type", "spotlight"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { memo } from 'react';
 import CopyButton from "../CopyButton";
 import Spotlight from "../Spotlight";
+import Tag from "../Tag";
 import SyntaxHighlighter from "./SyntaxHighlighter";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var Highlighter = /*#__PURE__*/memo(function (_ref) {
-  var children = _ref.children,
+  var _ref$copyButtonSize = _ref.copyButtonSize,
+    copyButtonSize = _ref$copyButtonSize === void 0 ? 'site' : _ref$copyButtonSize,
+    children = _ref.children,
     language = _ref.language,
     className = _ref.className,
     style = _ref.style,
@@ -37,8 +40,9 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     }), copyable && /*#__PURE__*/_jsx(CopyButton, {
       className: styles.button,
       content: children,
-      placement: "left"
-    }), showLanguage && language && /*#__PURE__*/_jsx("div", {
+      placement: "left",
+      size: copyButtonSize
+    }), showLanguage && language && /*#__PURE__*/_jsx(Tag, {
       className: styles.lang,
       children: language.toLowerCase()
     }), /*#__PURE__*/_jsx(SyntaxHighlighter, {

package/es/Highlighter/style.js

@@ -5,14 +5,15 @@ export var useStyles = createStyles(function (_ref, type) {
   var token = _ref.token,
     css = _ref.css,
     cx = _ref.cx,
-    prefixCls = _ref.prefixCls;
+    prefixCls = _ref.prefixCls,
+    stylish = _ref.stylish;
   var prefix = "".concat(prefixCls, "-highlighter");
   var buttonHoverCls = "".concat(prefix, "-hover-btn");
   var langHoverCls = "".concat(prefix, "-hover-lang");
   var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, type === 'block' ? token.colorFillTertiary : token.colorFillQuaternary);
   return {
-    button: cx(buttonHoverCls, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 51;\n          top: ", ";\n          right: ", ";\n\n          opacity: 0;\n        "])), type === 'pure' ? 0 : '8px', type === 'pure' ? 0 : '8px')),
+    button: cx(buttonHoverCls, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          top: ", ";\n          right: ", ";\n\n          opacity: 0;\n        "])), type === 'pure' ? 0 : '8px', type === 'pure' ? 0 : '8px')),
     container: cx(prefix, type !== 'pure' && typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          overflow: auto;\n          border-radius: ", "px;\n          transition: background-color 100ms ", ";\n\n          &:hover {\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n\n          .prism-code {\n            background: none !important;\n          }\n\n          pre {\n            margin: 0 !important;\n            padding: ", " !important;\n            background: none !important;\n          }\n\n          code {\n            background: transparent !important;\n          }\n        "])), token.borderRadius, token.motionEaseOut, buttonHoverCls, langHoverCls, type === 'pure' ? 0 : "16px 24px")),
-    lang: cx(langHoverCls, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 50;\n          right: 8px;\n          bottom: 8px;\n\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.colorTextPlaceholder))
+    lang: cx(langHoverCls, stylish.blur, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 2;\n          right: 0;\n          bottom: 8px;\n\n          font-family: ", ";\n          color: ", ";\n\n          opacity: 0;\n\n          transition: opacity 0.1s;\n        "])), token.fontFamilyCode, token.colorTextSecondary))
   };
 });

package/es/Logo/index.js

@@ -5,6 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { useTheme } from 'antd-style';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import Divider from "./Divider";
 import LogoHighContrast from "./LogoHighContrast";
 import LogoText from "./LogoText";
@@ -23,13 +24,12 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
+    styles = _useStyles.styles;
   var logoComponent;
   switch (type) {
     case '3d':
       {
-        return /*#__PURE__*/_jsx("img", _objectSpread({
+        logoComponent = /*#__PURE__*/_jsx("img", _objectSpread({
           alt: "lobehub",
           src: LOGO_3D,
           style: _objectSpread({
@@ -37,10 +37,11 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
             width: size
           }, style)
         }, props));
+        break;
       }
     case 'flat':
       {
-        return /*#__PURE__*/_jsx("img", {
+        logoComponent = /*#__PURE__*/_jsx("img", {
           alt: "lobehub",
           src: LOGO_FLAT,
           style: _objectSpread({
@@ -48,25 +49,28 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
             width: size
           }, style)
         });
+        break;
       }
     case 'high-contrast':
       {
-        return /*#__PURE__*/_jsx(LogoHighContrast, _objectSpread({
+        logoComponent = /*#__PURE__*/_jsx(LogoHighContrast, _objectSpread({
           style: _objectSpread({
             height: size,
             width: size
           }, style)
         }, props));
+        break;
       }
     case 'text':
       {
-        return /*#__PURE__*/_jsx(LogoText, _objectSpread({
+        logoComponent = /*#__PURE__*/_jsx(LogoText, _objectSpread({
           className: className,
           style: _objectSpread({
             height: size,
             width: 'auto'
           }, style)
         }, props));
+        break;
       }
     case 'combine':
       {
@@ -86,27 +90,29 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
             }
           })]
         });
+        break;
       }
   }
+  if (!extra) return logoComponent;
   var extraSize = Math.round(size / 3 * 1.9);
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: cx(styles.flexCenter, className),
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    align: 'center',
+    className: className,
+    horizontal: true,
     style: style
   }, props), {}, {
-    children: [logoComponent, extra && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Divider, {
-        style: {
-          color: theme.colorBorder,
-          height: extraSize,
-          width: extraSize
-        }
-      }), /*#__PURE__*/_jsx("div", {
-        className: styles.extraTitle,
-        style: {
-          fontSize: extraSize
-        },
-        children: extra
-      })]
+    children: [logoComponent, /*#__PURE__*/_jsx(Divider, {
+      style: {
+        color: theme.colorFill,
+        height: extraSize,
+        width: extraSize
+      }
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.extraTitle,
+      style: {
+        fontSize: extraSize
+      },
+      children: extra
     })]
   }));
 });

package/es/Logo/style.d.ts

@@ -2,5 +2,4 @@ export declare const LOGO_3D: string;
 export declare const LOGO_FLAT: string;
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     extraTitle: import("antd-style").SerializedStyles;
-    flexCenter: import("antd-style").SerializedStyles;
 }>;

package/es/Logo/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject;
 import { createStyles } from 'antd-style';
 import { genCdnUrl } from "../utils/genCdnUrl";
 export var LOGO_3D = genCdnUrl({
@@ -15,7 +15,6 @@ export var LOGO_FLAT = genCdnUrl({
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   return {
-    extraTitle: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      font-weight: 300;\n      white-space: nowrap;\n    "]))),
-    flexCenter: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n    "])))
+    extraTitle: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      font-weight: 300;\n      white-space: nowrap;\n    "])))
   };
 });

package/es/Markdown/CodeBlock.js

@@ -18,6 +18,10 @@ var Code = /*#__PURE__*/memo(function (properties) {
   if (!children) return;
   return /*#__PURE__*/_jsx(Highlighter, {
     className: styles,
+    copyButtonSize: {
+      blockSize: 28,
+      fontSize: 16
+    },
     language: (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || 'markdown',
     type: "block",
     children: Array.isArray(children) ? children[0] : children

package/package.json

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