@lobehub/ui 1.77.0 → 1.78.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/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.78.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",