@lobehub/ui 1.12.0 → 1.14.0

package/es/ColorScales/ScaleRow.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export interface IScaleRow {
+    name: string;
     title: 'light' | 'lightA' | 'dark' | 'darkA';
     scale: string[];
 }

package/es/ColorScales/ScaleRow.js

@@ -5,23 +5,27 @@ import { alphaBg, useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var ScaleRow = /*#__PURE__*/memo(function (_ref) {
-  var title = _ref.title,
+  var name = _ref.name,
+    title = _ref.title,
     scale = _ref.scale;
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
   var style = {};
+  var isAlpha = false;
   switch (title) {
     case 'lightA':
       style = {
         backgroundColor: '#fff',
         background: alphaBg.light
       };
+      isAlpha = true;
       break;
     case 'darkA':
       style = {
         backgroundColor: '#000',
         background: alphaBg.dark
       };
+      isAlpha = true;
       break;
     default:
       break;
@@ -35,13 +39,15 @@ var ScaleRow = /*#__PURE__*/memo(function (_ref) {
         children: title
       })
     }, title), scale.map(function (color, index) {
+      if (index === 0 || index === 12) return null;
       return /*#__PURE__*/_jsx("div", {
         className: styles.scaleBox,
         title: color,
         style: style,
         onClick: function onClick() {
-          copy(color);
-          message.success(color);
+          var content = "token.".concat(name).concat(index).concat(isAlpha ? 'A' : '', " /* ").concat(color, " */");
+          copy(content);
+          message.success(content);
         },
         children: /*#__PURE__*/_jsx("div", {
           className: styles.scaleItem,

package/es/ColorScales/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { ColorScaleItem } from "../styles/colors";
 export interface ColorScalesProps {
+    name: string;
     scale: ColorScaleItem;
     midHighLight: number;
 }

package/es/ColorScales/index.js

@@ -5,7 +5,8 @@ import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var ColorScales = /*#__PURE__*/memo(function (_ref) {
-  var scale = _ref.scale,
+  var name = _ref.name,
+    scale = _ref.scale,
     midHighLight = _ref.midHighLight;
   var _useStyles = useStyles(),
     styles = _useStyles.styles;
@@ -23,6 +24,7 @@ var ColorScales = /*#__PURE__*/memo(function (_ref) {
           children: [/*#__PURE__*/_jsx("div", {
             className: styles.scaleRowTitle
           }, "scale-num"), new Array(scale.light.length).fill('').map(function (_, index) {
+            if (index === 0 || index === 12) return null;
             var isMidHighlight = midHighLight === index;
             return /*#__PURE__*/_jsx("div", {
               className: styles.scaleBox,
@@ -34,21 +36,25 @@ var ColorScales = /*#__PURE__*/memo(function (_ref) {
                     opacity: 0.5,
                     fontWeight: isMidHighlight ? 700 : 400
                   },
-                  children: index + 1
+                  children: index
                 })
               })
             }, 'num' + index);
           })]
         }, "scale-title"), /*#__PURE__*/_jsx(ScaleRow, {
+          name: name,
           title: "light",
           scale: scale.light
         }, "light"), /*#__PURE__*/_jsx(ScaleRow, {
+          name: name,
           title: "lightA",
           scale: scale.lightA
         }, "lightA"), /*#__PURE__*/_jsx(ScaleRow, {
+          name: name,
           title: "dark",
           scale: scale.dark
         }, "dark"), /*#__PURE__*/_jsx(ScaleRow, {
+          name: name,
           title: "darkA",
           scale: scale.darkA
         }, "darkA")]

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -4,7 +4,6 @@ import { Loading3QuartersOutlined as Loading } from '@ant-design/icons';
 import { memo, useEffect } from 'react';
 import { Center } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
-import { Prism } from "./Prism";
 import { useThemeMode } from 'antd-style';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -12,14 +11,12 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
-    language = _ref.language,
-    appearance = _ref.theme;
+    language = _ref.language;
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     theme = _useStyles.theme;
   var _useThemeMode = useThemeMode(),
     isDarkMode = _useThemeMode.isDarkMode;
-  var isDarkTheme = appearance ? appearance === 'dark' : isDarkMode;
   var _useHighlight = useHighlight(function (s) {
       return [s.codeToHtml, !s.highlighter];
     }, shallow),
@@ -32,10 +29,10 @@ var SyntaxHighlighter = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [isLoading ? /*#__PURE__*/_jsx("div", {
       className: styles.prism,
-      children: /*#__PURE__*/_jsx(Prism, {
-        language: language,
-        isDarkMode: isDarkTheme,
-        children: children
+      children: /*#__PURE__*/_jsx("pre", {
+        children: /*#__PURE__*/_jsx("code", {
+          children: children
+        })
       })
     }) : /*#__PURE__*/_jsx("div", {
       dangerouslySetInnerHTML: {