@lobehub/ui 1.2.0 → 1.4.0

package/es/ContextMenu/style.js

@@ -0,0 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, prefixCls) {
+  var css = _ref.css,
+    cx = _ref.cx,
+    token = _ref.token;
+  return {
+    container: cx(prefixCls, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      user-select: none;\n      scrollbar-width: none;\n\n      overflow-y: auto;\n      overscroll-behavior: contain;\n\n      box-sizing: border-box;\n      width: 200px;\n      padding: 5px;\n\n      font-size: ", ";\n\n      background: ", ";\n      border: 1px solid ", ";\n      border-radius: 8px;\n      outline: 0;\n      box-shadow: ", ";\n\n      &::-webkit-scrollbar {\n        display: none;\n      }\n    "])), token.fontSize, token.colorBgContainer, token.colorBorder, token.boxShadowSecondary)),
+    button: cx("".concat(prefixCls, "-button"), css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      all: unset;\n\n      cursor: default;\n      user-select: none;\n\n      padding: 12px 10px;\n\n      font-size: ", "px;\n      line-height: 1;\n      color: ", ";\n\n      background: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n\n      -webkit-tap-highlight-color: transparent;\n\n      &:hover {\n        background: ", ";\n        border-color: transparent;\n      }\n\n      &:focus-visible {\n        border-color: ", ";\n        box-shadow: 0 0 0 2px ", ";\n      }\n    "])), token.fontSize, token.colorText, token.colorBgContainer, token.colorBorder, token.borderRadius, token.colorPrimaryBg, token.colorPrimary, token.colorPrimaryBg))
+  };
+});

package/es/ContextMenu/types/index.d.ts

@@ -0,0 +1,5 @@
+import { MenuItemType } from './menuItem';
+export * from './menuItem';
+export interface MenuProps {
+    items: MenuItemType[];
+}

package/es/ContextMenu/types/index.js

@@ -0,0 +1,2 @@
+export * from "./menuItem";
+export {};

package/es/ContextMenu/types/menuItem.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+interface CommonType {
+    key: string;
+    label: string;
+    onClick?: () => void;
+    icon?: ReactNode;
+}
+export interface GeneralItemType extends CommonType {
+    disabled?: boolean;
+    danger?: boolean;
+    shortcut?: ('meta' | 'control' | 'shift' | 'alt' | string)[];
+}
+export interface SubMenuType extends CommonType {
+    children: MenuItemType[];
+}
+export interface MenuDividerType {
+    type: 'divider';
+    dashed?: boolean;
+}
+export declare type MenuItemType = GeneralItemType | SubMenuType | MenuDividerType;
+export {};

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";
 import type { NumberSize, Size } from 're-resizable';
-import React from 'react';
+import { ReactNode } 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 {
     /**
@@ -81,6 +81,12 @@ export interface DraggablePanelProps extends DivProps {
      * @type CSSProperties
      */
     hanlderStyle?: React.CSSProperties;
+    children: ReactNode;
+    className?: string;
+    classNames?: {
+        handle?: string;
+        content?: string;
+    };
 }
-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,
@@ -39,7 +39,9 @@ var DraggablePanel = function DraggablePanel(_ref) {
     className = _ref.className,
     showHandlerWhenUnexpand = _ref.showHandlerWhenUnexpand,
     destroyOnClose = _ref.destroyOnClose,
-    hanlderStyle = _ref.hanlderStyle;
+    hanlderStyle = _ref.hanlderStyle,
+    _ref$classNames = _ref.classNames,
+    classNames = _ref$classNames === void 0 ? {} : _ref$classNames;
   var ref = useRef(null);
   var isHovering = useHover(ref);
   var isVertical = placement === 'top' || placement === 'bottom';
@@ -132,13 +134,10 @@ var DraggablePanel = function DraggablePanel(_ref) {
     }, [styles, placement]),
     Arrow = _useMemo.Arrow,
     arrowPlacement = _useMemo.className;
-  var handler =
-  /*#__PURE__*/
-  // @ts-ignore
-  _jsx(Center
+  var handler = /*#__PURE__*/_jsx(Center
   // @ts-ignore
   , {
-    className: cx(styles["toggle".concat(arrowPlacement)]),
+    className: cx(styles["toggle".concat(arrowPlacement)], classNames.handle),
     style: {
       opacity: isExpand ? !pin ? 0 : undefined : showHandlerWhenUnexpand ? 1 : 0
     },
@@ -164,7 +163,7 @@ var DraggablePanel = function DraggablePanel(_ref) {
   // @ts-ignore
   _jsx(Resizable, _objectSpread(_objectSpread({}, sizeProps), {}, {
     style: style,
-    className: styles.panel,
+    className: cx(styles.panel, classNames.content),
     enable: canResizing ? resizing : undefined,
     handleClasses: resizeHandleClassNames,
     onResizeStop: function onResizeStop(e, direction, ref, delta) {
@@ -193,5 +192,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/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;
+}>;

package/es/Highlighter/style.js

@@ -0,0 +1,18 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+export var useStyles = createStyles(function (_ref, type) {
+  var token = _ref.token,
+    css = _ref.css,
+    cx = _ref.cx,
+    prefixCls = _ref.prefixCls;
+  var prefix = "".concat(prefixCls, "-highlighter");
+  var buttonHoverCls = "".concat(prefix, "-hover-btn");
+  var langHoverCls = "".concat(prefix, "-hover-lang");
+  return {
+    container: cx(prefix, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          overflow: auto;\n          position: relative;\n          transition: background-color 100ms ", ";\n          background-color: ", ";\n          border-radius: ", "px;\n\n          ", "\n\n          &:hover {\n            background-color: ", ";\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\n          &:hover {\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\n          }\n        "])), token.motionEaseOut, type === 'block' ? rgba(token.colorBgElevated, 0.6) : 'transparent', token.borderRadius, type === 'ghost' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            border: 1px solid ", ";\n          "])), token.colorBorder), type === 'prue' ? 'transparent' : token.colorFillTertiary, type === 'prue' ? 0 : "16px 24px", buttonHoverCls, langHoverCls)),
+    button: cx(buttonHoverCls, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: absolute;\n          z-index: 51;\n          top: 8px;\n          right: 8px;\n\n          opacity: 0;\n        "])))),
+    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))
+  };
+});

package/es/Icon/index.d.ts

@@ -1,6 +1,5 @@
-import { SvgProps } from "../types";
+/// <reference types="react" />
 import { LucideIcon } from 'lucide-react';
-import React from 'react';
 export declare type IconSize = 'large' | 'normal' | 'small' | {
     fontSize?: number;
     strokeWidth?: number;
@@ -17,5 +16,5 @@ export interface IconProps extends SvgProps {
      */
     icon: LucideIcon;
 }
-declare const _default: React.NamedExoticComponent<IconProps>;
+declare const _default: import("react").NamedExoticComponent<IconProps>;
 export default _default;