@lobehub/ui 1.2.0 → 1.3.0

package/es/ActionIcon/index.d.ts

@@ -1,7 +1,7 @@
-import { DivProps } from "../types";
+/// <reference types="react" />
 import { LucideIcon } from 'lucide-react';
-import React from 'react';
-export declare type ActionIconSize = 'large' | 'normal' | 'small' | {
+import { DivProps } from "../types";
+export declare type ActionIconSize = 'large' | 'normal' | 'small' | 'site' | {
     blockSize?: number;
     fontSize?: number;
     strokeWidth?: number;
@@ -23,6 +23,11 @@ export interface ActionIconProps extends DivProps {
      * @type LucideIcon
      */
     icon: LucideIcon;
+    /**
+     * @description Glass blur style
+     * @default 'false'
+     */
+    glass?: boolean;
 }
-declare const _default: React.NamedExoticComponent<ActionIconProps>;
-export default _default;
+declare const ActionIcon: import("react").NamedExoticComponent<ActionIconProps>;
+export default ActionIcon;

package/es/ActionIcon/index.js

@@ -1,21 +1,25 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "active", "icon", "size", "style"];
+var _excluded = ["className", "active", "icon", "size", "style", "glass"];
 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 { Icon } from "./..";
-import React from 'react';
+import { memo } from 'react';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var ActionIcon = function ActionIcon(_ref) {
+var ActionIcon = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
     active = _ref.active,
     icon = _ref.icon,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'normal' : _ref$size,
     style = _ref.style,
+    glass = _ref.glass,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(active),
+  var _useStyles = useStyles({
+      active: Boolean(active),
+      glass: Boolean(glass)
+    }),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var blockSize;
@@ -33,6 +37,10 @@ var ActionIcon = function ActionIcon(_ref) {
       blockSize = 28;
       borderRadius = 5;
       break;
+    case 'site':
+      blockSize = 34;
+      borderRadius = 5;
+      break;
     default:
       blockSize = (size === null || size === void 0 ? void 0 : size.blockSize) || 36;
       borderRadius = (size === null || size === void 0 ? void 0 : size.borderRadius) || 5;
@@ -47,9 +55,9 @@ var ActionIcon = function ActionIcon(_ref) {
     }, style)
   }, props), {}, {
     children: /*#__PURE__*/_jsx(Icon, {
-      size: size,
+      size: size === 'site' ? 'small' : size,
       icon: icon
     })
   }));
-};
-export default /*#__PURE__*/React.memo(ActionIcon);
+});
+export default ActionIcon;

package/es/ActionIcon/style.d.ts

@@ -1,3 +1,6 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: {
+    active: boolean;
+    glass: boolean;
+} | undefined) => import("antd-style").ReturnStyles<{
     block: import("antd-style").SerializedStyles;
 }>;

package/es/ActionIcon/style.js

@@ -1,10 +1,12 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject;
+var _templateObject, _templateObject2;
 import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref, active) {
+export var useStyles = createStyles(function (_ref, _ref2) {
   var css = _ref.css,
     token = _ref.token;
+  var active = _ref2.active,
+    glass = _ref2.glass;
   return {
-    block: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      display: flex;\n      flex: none;\n      align-items: center;\n      justify-content: center;\n\n      color: ", ";\n\n      background: ", ";\n\n      transition: color 600ms ", ", background-color 100ms ", ";\n\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n\n      &:active {\n        color: ", ";\n        background-color: ", ";\n      }\n    "])), active ? token.colorText : token.colorTextQuaternary, active ? token.colorFill : 'transparent', token.motionEaseOut, token.motionEaseOut, token.colorText, token.colorFillTertiary, token.colorText, token.colorFill)
+    block: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        cursor: pointer;\n\n        display: flex;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n\n        color: ", ";\n\n        background: ", ";\n\n        transition: color 600ms ", ",\n          background-color 100ms ", ";\n\n        ", "\n\n        &:hover {\n          color: ", ";\n          background-color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n          background-color: ", ";\n        }\n      "])), active ? token.colorText : token.colorTextQuaternary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, glass && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          backdrop-filter: saturate(180%) blur(10px);\n        "]))), token.colorText, active ? token.colorFillSecondary : token.colorFillTertiary, token.colorText, token.colorFill)
   };
 });

package/es/CopyButton/index.d.ts

@@ -0,0 +1,34 @@
+import { ActionIconSize, TooltipProps } from "../index";
+import { DivProps } from "../types";
+import { ReactNode } from 'react';
+export interface CopyButtonProps extends DivProps {
+    /**
+     * @description The text content to be copied
+     */
+    content: string;
+    /**
+     * @description The size of the icon
+     * @enum ['large', 'normal', 'small', 'site']
+     * @default 'site'
+     */
+    size?: ActionIconSize;
+    /**
+     * @description Additional class name
+     */
+    className?: string;
+    /**
+     * @description The placement of the tooltip
+     * @enum ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom']
+     * @default 'right'
+     */
+    placement?: TooltipProps['placement'];
+    /**
+     * @description A function that returns the children to be rendered
+  
+     */
+    render?: (props: {
+        handleCopy: () => void;
+    }) => ReactNode;
+}
+declare const CopyButton: ({ content, className, placement, size, render, ...props }: CopyButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CopyButton;

package/es/CopyButton/index.js

@@ -0,0 +1,49 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["content", "className", "placement", "size", "render"];
+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 { useCopied } from "../hooks/useCopied";
+import { ActionIcon, Tooltip } from "./..";
+import copy from 'copy-to-clipboard';
+import { Copy } from 'lucide-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+var CopyButton = function CopyButton(_ref) {
+  var content = _ref.content,
+    className = _ref.className,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'right' : _ref$placement,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'site' : _ref$size,
+    render = _ref.render,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useCopied = useCopied(),
+    copied = _useCopied.copied,
+    setCopied = _useCopied.setCopied;
+  var handleCopy = function handleCopy() {
+    copy(content);
+    setCopied();
+  };
+  var children = render ? render({
+    handleCopy: handleCopy
+  }) : /*#__PURE__*/_jsx(ActionIcon, _objectSpread(_objectSpread({}, props), {}, {
+    icon: Copy,
+    className: className,
+    size: size,
+    glass: true,
+    onClick: function onClick() {
+      copy(content);
+      setCopied();
+    }
+  }));
+  return /*#__PURE__*/_jsx(Tooltip, {
+    arrow: false,
+    placement: placement,
+    title: copied ? /*#__PURE__*/_jsx(_Fragment, {
+      children: "\u2705 Success"
+    }) : 'Copy',
+    children: children
+  });
+};
+export default CopyButton;

package/es/DraggablePanel/index.d.ts

@@ -1,7 +1,7 @@
-import type { DivProps } from "../types";
+/// <reference types="react" />
 import type { NumberSize, Size } from 're-resizable';
-import React from 'react';
 import type { Props as RndProps } from 'react-rnd';
+import { DivProps } from "../types";
 export declare type placementType = 'right' | 'left' | 'top' | 'bottom';
 export interface DraggablePanelProps extends DivProps {
     /**
@@ -82,5 +82,5 @@ export interface DraggablePanelProps extends DivProps {
      */
     hanlderStyle?: React.CSSProperties;
 }
-declare const _default: React.NamedExoticComponent<DraggablePanelProps>;
-export default _default;
+declare const DraggablePanel: import("react").NamedExoticComponent<DraggablePanelProps>;
+export default DraggablePanel;

package/es/DraggablePanel/index.js

@@ -5,7 +5,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import { useHover } from 'ahooks';
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from 'lucide-react';
 import { Resizable } from 're-resizable';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { Center } from 'react-layout-kit';
 import useControlledState from 'use-merge-value';
 import { useStyle } from "./style";
@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var DEFAULT_HEIGHT = 180;
 var DEFAULT_WIDTH = 280;
-var DraggablePanel = function DraggablePanel(_ref) {
+var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
   var _ref$pin = _ref.pin,
     pin = _ref$pin === void 0 ? 'true' : _ref$pin,
     _ref$mode = _ref.mode,
@@ -193,5 +193,5 @@ var DraggablePanel = function DraggablePanel(_ref) {
     style: _defineProperty({}, "border".concat(arrowPlacement, "Width"), 1),
     children: [expandable && showExpand && handler, destroyOnClose ? isExpand && inner : inner]
   });
-};
-export default /*#__PURE__*/React.memo(DraggablePanel);
+});
+export default DraggablePanel;

package/es/DraggablePanel/style.js

@@ -1,7 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
 import { createStyles, css, cx } from 'antd-style';
-var offset = 17;
+var offset = 16;
 var toggleLength = 40;
 var toggleShort = 16;
 export var useStyle = createStyles(function (_ref, prefix) {
@@ -20,7 +20,7 @@ export var useStyle = createStyles(function (_ref, prefix) {
     toggleRight: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-right"), commonToggle, css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        right: -", "px;\n        width: ", "px;\n        height: 100%;\n        > div {\n          top: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-top: -20px;\n\n          border-radius: 0 4px 4px 0;\n        }\n      "])), offset, toggleShort, toggleShort, toggleLength)),
     toggleTop: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-top"), commonToggle, css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        top: -", "px;\n        width: 100%;\n        height: ", "px;\n\n        > div {\n          left: 50%;\n\n          width: ", "px;\n          height: ", "px;\n          margin-left: -20px;\n\n          border-radius: 4px 4px 0 0;\n        }\n      "])), offset, toggleShort, toggleLength, toggleShort)),
     toggleBottom: cx("".concat(prefix, "-toggle"), "".concat(prefix, "-toggle-bottom"), commonToggle, css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        bottom: -", "px;\n        width: 100%;\n        height: ", "px;\n\n        > div {\n          left: 50%;\n\n          width: ", "px;\n          height: 16px;\n          margin-left: -20px;\n\n          border-radius: 0 0 4px 4px;\n        }\n      "])), offset, toggleShort, toggleLength)),
-    panel: cx("".concat(prefix, "-fixed"), css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        background: ", ";\n        transition: all 0.2s ", ";\n      "])), token.colorBgContainer, token.motionEaseOut)),
+    panel: cx("".concat(prefix, "-fixed"), css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        transition: all 0.2s ", ";\n      "])), token.motionEaseOut)),
     handlerIcon: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition: all 0.2s ", ";\n    "])), token.motionEaseOut),
     leftHandle: cx(css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n        ", ";\n\n        &::before {\n          left: 50%;\n          width: 2px;\n          height: 100%;\n        }\n      "])), commonHandle), "".concat(prefix, "-left-handle")),
     rightHandle: cx(css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n        ", ";\n        &::before {\n          right: 50%;\n          width: 2px;\n          height: 100%;\n        }\n      "])), commonHandle), "".concat(prefix, "-right-handle")),

package/es/DraggablePanel/utils.d.ts

@@ -1,2 +1,2 @@
 import { placementType } from './index';
-export declare const revesePlacement: (placement: placementType) => "left" | "right" | "bottom" | "top";
+export declare const revesePlacement: (placement: placementType) => "top" | "left" | "right" | "bottom";

package/es/EditableText/ControlInput.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { InputProps } from 'antd';
+export interface ControlInputProps extends Omit<InputProps, 'onChange' | 'value' | 'onAbort'> {
+    onChange?: (value: string) => void;
+    onValueChanging?: (value: string) => void;
+    value?: string;
+    onChangeEnd?: (value: string) => void;
+}
+export declare const ControlInput: import("react").NamedExoticComponent<ControlInputProps>;

package/es/EditableText/ControlInput.js

@@ -0,0 +1,88 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "onChange", "onValueChanging", "onChangeEnd"];
+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 { Button, ConfigProvider, Input } from 'antd';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var ControlInput = /*#__PURE__*/memo(function (_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    onValueChanging = _ref.onValueChanging,
+    onChangeEnd = _ref.onChangeEnd,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(value || ''),
+    _useState2 = _slicedToArray(_useState, 2),
+    input = _useState2[0],
+    setInput = _useState2[1];
+  var inputRef = useRef(null);
+  var isChineseInput = useRef(false);
+  var isFocusing = useRef(false);
+  var updateValue = useCallback(function () {
+    onChange === null || onChange === void 0 ? void 0 : onChange(input);
+  }, [input]);
+  useEffect(function () {
+    if (typeof value !== 'undefined') setInput(value);
+  }, [value]);
+  return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
+    ref: inputRef
+  }, props), {}, {
+    value: input,
+    onCompositionStart: function onCompositionStart() {
+      isChineseInput.current = true;
+    },
+    onCompositionEnd: function onCompositionEnd() {
+      isChineseInput.current = false;
+    },
+    onFocus: function onFocus() {
+      isFocusing.current = true;
+    },
+    onBlur: function onBlur() {
+      isFocusing.current = false;
+      onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(input);
+    },
+    onChange: function onChange(e) {
+      setInput(e.target.value);
+      onValueChanging === null || onValueChanging === void 0 ? void 0 : onValueChanging(e.target.value);
+    },
+    onPressEnter: function onPressEnter(e) {
+      if (!e.shiftKey && !isChineseInput.current) {
+        e.preventDefault();
+        updateValue();
+        isFocusing.current = false;
+        onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(input);
+      }
+    },
+    suffix: value === input ? /*#__PURE__*/_jsx("span", {}) : /*#__PURE__*/_jsxs(ConfigProvider, {
+      theme: {
+        token: {
+          fontSize: 14
+        }
+      },
+      children: [/*#__PURE__*/_jsx(Button, {
+        type: 'link',
+        size: 'small',
+        onClick: function onClick() {
+          setInput(value);
+        },
+        style: {
+          padding: 0
+        },
+        children: "\u91CD\u7F6E"
+      }), /*#__PURE__*/_jsx(Button, {
+        type: 'link',
+        size: 'small',
+        style: {
+          padding: 0
+        },
+        onClick: function onClick() {
+          updateValue();
+        },
+        children: "\u4FDD\u5B58 \u21B5"
+      })]
+    })
+  }));
+});

package/es/EditableText/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ControlInputProps } from './ControlInput';
+export declare type EditableTextProps = ControlInputProps;
+declare const EditableText: import("react").NamedExoticComponent<ControlInputProps>;
+export default EditableText;

package/es/EditableText/index.js

@@ -0,0 +1,35 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { EditOutlined } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import { memo, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { ControlInput } from "./ControlInput";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var EditableText = /*#__PURE__*/memo(function (_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    edited = _useState2[0],
+    setEdited = _useState2[1];
+  return edited ? /*#__PURE__*/_jsx(ControlInput, {
+    value: value,
+    onChangeEnd: function onChangeEnd() {
+      setEdited(false);
+    },
+    onChange: onChange
+  }) : /*#__PURE__*/_jsxs(Flexbox, {
+    horizontal: true,
+    gap: 8,
+    children: [value, /*#__PURE__*/_jsx(Tooltip, {
+      title: '编辑',
+      children: /*#__PURE__*/_jsx(EditOutlined, {
+        onClick: function onClick() {
+          setEdited(!edited);
+        }
+      })
+    })]
+  });
+});
+export default EditableText;

package/es/Highlighter/SyntaxHighlighter/Prism.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface PrismProps {
+    children: string;
+    language: string;
+    isDarkMode: boolean;
+}
+export declare const Prism: import("react").NamedExoticComponent<PrismProps>;

package/es/Highlighter/SyntaxHighlighter/Prism.js

@@ -0,0 +1,40 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 { Highlight, themes } from 'prism-react-renderer';
+import { memo } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Prism = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    language = _ref.language,
+    isDarkMode = _ref.isDarkMode;
+  return /*#__PURE__*/_jsx(Highlight, {
+    theme: isDarkMode ? themes.jettwaveDark : themes.jettwaveLight,
+    code: children,
+    language: language,
+    children: function children(_ref2) {
+      var className = _ref2.className,
+        style = _ref2.style,
+        tokens = _ref2.tokens,
+        getLineProps = _ref2.getLineProps,
+        getTokenProps = _ref2.getTokenProps;
+      return /*#__PURE__*/_jsx("pre", {
+        className: className,
+        style: style,
+        children: tokens.map(function (line, i) {
+          return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, getLineProps({
+            line: line,
+            key: i
+          })), {}, {
+            children: line.map(function (token, key) {
+              return /*#__PURE__*/_jsx("span", _objectSpread({}, getTokenProps({
+                token: token,
+                key: key
+              })), i);
+            })
+          }), i);
+        })
+      });
+    }
+  });
+});

package/es/Highlighter/SyntaxHighlighter/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { HighlighterProps } from '../index';
+export declare type SyntaxHighlighterProps = Pick<HighlighterProps, 'language' | 'children' | 'theme'>;
+declare const SyntaxHighlighter: import("react").NamedExoticComponent<SyntaxHighlighterProps>;
+export default SyntaxHighlighter;

package/es/Highlighter/SyntaxHighlighter/index.js

@@ -0,0 +1,58 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useHighlight } from "../../hooks/useHighlight";
+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";
+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;
+  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),
+    _useHighlight2 = _slicedToArray(_useHighlight, 2),
+    codeToHtml = _useHighlight2[0],
+    isLoading = _useHighlight2[1];
+  useEffect(function () {
+    useHighlight.getState().initHighlighter();
+  }, []);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isLoading ? /*#__PURE__*/_jsx("div", {
+      className: styles.prism,
+      children: /*#__PURE__*/_jsx(Prism, {
+        language: language,
+        isDarkMode: isDarkTheme,
+        children: children
+      })
+    }) : /*#__PURE__*/_jsx("div", {
+      dangerouslySetInnerHTML: {
+        __html: codeToHtml(children, language, isDarkTheme) || ''
+      },
+      className: styles.shiki
+    }), isLoading && /*#__PURE__*/_jsxs(Center, {
+      horizontal: true,
+      gap: 8,
+      className: styles.loading,
+      children: [/*#__PURE__*/_jsx(Loading, {
+        spin: true,
+        style: {
+          color: theme.colorTextTertiary
+        }
+      }), "shiki rendering..."]
+    })]
+  });
+});
+export default SyntaxHighlighter;

package/es/Highlighter/SyntaxHighlighter/style.d.ts

@@ -0,0 +1,5 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    shiki: string;
+    prism: import("antd-style").SerializedStyles;
+    loading: import("antd-style").SerializedStyles;
+}>;

package/es/Highlighter/SyntaxHighlighter/style.js

@@ -0,0 +1,15 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    cx = _ref.cx,
+    prefixCls = _ref.prefixCls;
+  var prefix = "".concat(prefixCls, "-highlighter");
+  return {
+    shiki: cx("".concat(prefix, "-shiki"), css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        .shiki {\n          overflow-x: scroll;\n          background: none !important;\n        }\n      "])))),
+    prism: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      pre {\n        overflow-x: scroll;\n        font-family: ", " !important;\n      }\n    "])), token.fontFamilyCode),
+    loading: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: absolute;\n      top: 0;\n      right: 0;\n      color: ", ";\n      padding: 4px 8px;\n      backdrop-filter: saturate(180%) blur(10px);\n      border-radius: ", ";\n    "])), token.colorTextTertiary, token.borderRadiusSM)
+  };
+});

package/es/Highlighter/index.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { DivProps } from "../types";
+import SyntaxHighlighter, { type SyntaxHighlighterProps } from './SyntaxHighlighter';
+export { SyntaxHighlighter, SyntaxHighlighterProps };
+export interface HighlighterProps extends DivProps {
+    /**
+     * @description The code content to be highlighted
+     */
+    children: string;
+    /**
+     * @description The language of the code content
+     */
+    language: string;
+    /**
+     * @description Whether to show language tag
+     * @default true
+     */
+    showLanguage?: boolean;
+    /**
+     * @description Whether to show the copy button
+     * @default true
+     */
+    copyable?: boolean;
+    /**
+     * @description The theme of the code block
+     * @default 'light'
+     */
+    theme?: 'dark' | 'light';
+    /**
+     * @description The type of the code block
+     * @default 'block'
+     */
+    type?: 'ghost' | 'block' | 'prue';
+}
+export declare const Highlighter: import("react").NamedExoticComponent<HighlighterProps>;
+export default Highlighter;

package/es/Highlighter/index.js

@@ -0,0 +1,42 @@
+import { memo } from 'react';
+import CopyButton from "../CopyButton";
+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 { SyntaxHighlighter };
+export var Highlighter = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+    language = _ref.language,
+    className = _ref.className,
+    style = _ref.style,
+    theme = _ref.theme,
+    _ref$copyable = _ref.copyable,
+    copyable = _ref$copyable === void 0 ? true : _ref$copyable,
+    _ref$showLanguage = _ref.showLanguage,
+    showLanguage = _ref$showLanguage === void 0 ? true : _ref$showLanguage,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'block' : _ref$type;
+  var _useStyles = useStyles(type),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var container = cx(styles.container, className);
+  return /*#__PURE__*/_jsxs("div", {
+    "data-code-type": "highlighter",
+    className: container,
+    style: style,
+    children: [copyable && /*#__PURE__*/_jsx(CopyButton, {
+      placement: "left",
+      content: children,
+      className: styles.button
+    }), showLanguage && language && /*#__PURE__*/_jsx("div", {
+      className: styles.lang,
+      children: language.toLowerCase()
+    }), /*#__PURE__*/_jsx(SyntaxHighlighter, {
+      theme: theme,
+      language: language === null || language === void 0 ? void 0 : language.toLowerCase(),
+      children: children.trim()
+    })]
+  });
+});
+export default Highlighter;

package/es/Highlighter/style.d.ts

@@ -0,0 +1,5 @@
+export declare const useStyles: (props?: "block" | "ghost" | "prue" | undefined) => import("antd-style").ReturnStyles<{
+    container: string;
+    button: string;
+    lang: string;
+}>;