@lobehub/ui 1.11.4 → 1.13.0

package/es/ColorScales/ScaleRow.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface IScaleRow {
+    name: string;
+    title: 'light' | 'lightA' | 'dark' | 'darkA';
+    scale: string[];
+}
+declare const ScaleRow: import("react").NamedExoticComponent<IScaleRow>;
+export default ScaleRow;

package/es/ColorScales/ScaleRow.js

@@ -0,0 +1,61 @@
+import { Space, message } from 'antd';
+import copy from 'copy-to-clipboard';
+import { memo } from 'react';
+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 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;
+  }
+  return /*#__PURE__*/_jsxs(Space, {
+    size: 2,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: styles.scaleRowTitle,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.text,
+        children: title
+      })
+    }, title), scale.map(function (color, index) {
+      return /*#__PURE__*/_jsx("div", {
+        className: styles.scaleBox,
+        title: color,
+        style: style,
+        onClick: function onClick() {
+          var content = "token.".concat(name).concat(index + 1).concat(isAlpha ? 'A' : '', " /* ").concat(color, " */");
+          copy(content);
+          message.success(content);
+        },
+        children: /*#__PURE__*/_jsx("div", {
+          className: styles.scaleItem,
+          style: {
+            backgroundColor: color
+          }
+        })
+      }, index);
+    })]
+  });
+});
+export default ScaleRow;

package/es/ColorScales/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ColorScaleItem } from "../styles/colors";
+export interface ColorScalesProps {
+    name: string;
+    scale: ColorScaleItem;
+    midHighLight: number;
+}
+declare const ColorScales: import("react").NamedExoticComponent<ColorScalesProps>;
+export default ColorScales;

package/es/ColorScales/index.js

@@ -0,0 +1,64 @@
+import { Space } from 'antd';
+import { memo } from 'react';
+import ScaleRow from "./ScaleRow";
+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 name = _ref.name,
+    scale = _ref.scale,
+    midHighLight = _ref.midHighLight;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.view,
+    children: /*#__PURE__*/_jsx("div", {
+      style: {
+        padding: '8px 16px 32px 0'
+      },
+      children: /*#__PURE__*/_jsxs(Space, {
+        direction: 'vertical',
+        size: 2,
+        children: [/*#__PURE__*/_jsxs(Space, {
+          size: 2,
+          children: [/*#__PURE__*/_jsx("div", {
+            className: styles.scaleRowTitle
+          }, "scale-num"), new Array(scale.light.length).fill('').map(function (_, index) {
+            var isMidHighlight = midHighLight === index;
+            return /*#__PURE__*/_jsx("div", {
+              className: styles.scaleBox,
+              children: /*#__PURE__*/_jsx("div", {
+                className: styles.scaleBox,
+                children: /*#__PURE__*/_jsx("div", {
+                  className: styles.scaleItem,
+                  style: {
+                    opacity: 0.5,
+                    fontWeight: isMidHighlight ? 700 : 400
+                  },
+                  children: index + 1
+                })
+              })
+            }, '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")]
+      })
+    })
+  });
+});
+export default ColorScales;

package/es/ColorScales/style.d.ts

@@ -0,0 +1,11 @@
+export declare const alphaBg: {
+    light: string;
+    dark: string;
+};
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    view: import("antd-style").SerializedStyles;
+    scaleBox: import("antd-style").SerializedStyles;
+    scaleItem: import("antd-style").SerializedStyles;
+    scaleRowTitle: import("antd-style").SerializedStyles;
+    text: import("antd-style").SerializedStyles;
+}>;

package/es/ColorScales/style.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { createStyles } from 'antd-style';
+export var alphaBg = {
+  light: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==) 0% 0% / 26px',
+  dark: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAAZUlEQVRIDe2VMQoAMAgDa9/g/1/oIzrpZBCh2dLFkkoDF0Fz99OdiOjks+2/7S8fRRmMMIVoRGSoYzvvqF8ZIMKlC1GhQBc6IkPzq32QmdAzkEGihpWOSPsAss8HegYySNSw0hE9WQ4StafZFqkAAAAASUVORK5CYII=) 0% 0% / 26px'
+};
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    view: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n  "]))),
+    scaleBox: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    position: relative;\n\n    width: 48px;\n    height: 32px;\n\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    background-size: 16px 16px;\n    &:active {\n      transform: scale(0.95);\n    }\n  "]))),
+    scaleItem: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 100%;\n    height: 100%;\n  "]))),
+    scaleRowTitle: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    width: 64px;\n    height: 32px;\n  "]))),
+    text: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    opacity: 0.5;\n  "])))
+  };
+});

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: {