@lobehub/ui 1.1.0 → 1.3.0

package/README.md

@@ -66,17 +66,20 @@ $ pnpm start
 
 <!-- CONTRIBUTION GROUP -->
 
-> 📊 Total: <kbd>**3**</kbd>
+> 📊 Total: <kbd>**4**</kbd>
 
 <a href="https://github.com/canisminor1990" title="canisminor1990">
   <img src="https://avatars.githubusercontent.com/u/17870709?v=4" width="50" />
 </a>
-<a href="https://github.com/actions-user" title="actions-user">
-  <img src="https://avatars.githubusercontent.com/u/65916846?v=4" width="50" />
+<a href="https://github.com/arvinxx" title="arvinxx">
+  <img src="https://avatars.githubusercontent.com/u/28616219?v=4" width="50" />
 </a>
 <a href="https://github.com/apps/dependabot" title="dependabot[bot]">
   <img src="https://avatars.githubusercontent.com/in/29110?v=4" width="50" />
 </a>
+<a href="https://github.com/actions-user" title="actions-user">
+  <img src="https://avatars.githubusercontent.com/u/65916846?v=4" width="50" />
+</a>
 
 <!-- CONTRIBUTION END -->
 

package/es/ActionIcon/index.d.ts

@@ -1,15 +1,33 @@
-import { DivProps } from "../types";
+/// <reference types="react" />
 import { LucideIcon } from 'lucide-react';
-import React from 'react';
+import { DivProps } from "../types";
+export declare type ActionIconSize = 'large' | 'normal' | 'small' | 'site' | {
+    blockSize?: number;
+    fontSize?: number;
+    strokeWidth?: number;
+    borderRadius?: number;
+};
 export interface ActionIconProps extends DivProps {
+    /**
+     * @description Whether the icon is active or not
+     * @default false
+     */
     active?: boolean;
-    size?: 'large' | 'normal' | 'small' | {
-        blockSize: number;
-        fontSize: number;
-        strokeWidth: number;
-        borderRadius: number;
-    };
+    /**
+     * @description Size of the icon
+     * @default 'normal'
+     */
+    size?: ActionIconSize;
+    /**
+     * @description The icon element to be rendered
+     * @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,74 +1,53 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["active", "icon", "size", "style"];
-var _templateObject;
+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 React from 'react';
-import styled from 'styled-components';
+import { Icon } from "./..";
+import { memo } from 'react';
+import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-var Block = styled.div(_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: all 0.2s ", ";\n\n  &:hover {\n    background: ", ";\n  }\n\n  &:active {\n    color: ", ";\n    background: ", ";\n  }\n"])), function (_ref) {
-  var active = _ref.active,
-    theme = _ref.theme;
-  return active ? theme.colorText : theme.colorTextQuaternary;
-}, function (_ref2) {
-  var active = _ref2.active,
-    theme = _ref2.theme;
-  return active ? theme.colorFill : 'transparent';
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.motionEaseOut;
-}, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.colorFillTertiary;
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.colorText;
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.colorFill;
-});
-var ActionIcon = function ActionIcon(_ref7) {
-  var active = _ref7.active,
-    icon = _ref7.icon,
-    _ref7$size = _ref7.size,
-    size = _ref7$size === void 0 ? 'normal' : _ref7$size,
-    style = _ref7.style,
-    props = _objectWithoutProperties(_ref7, _excluded);
+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: Boolean(active),
+      glass: Boolean(glass)
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
   var blockSize;
-  var fontSize;
-  var strokeWidth;
   var borderRadius;
-  var Icon = icon;
   switch (size) {
     case 'large':
       blockSize = 44;
-      fontSize = 24;
-      strokeWidth = 2;
       borderRadius = 8;
       break;
     case 'normal':
       blockSize = 36;
-      fontSize = 24;
-      strokeWidth = 2;
       borderRadius = 5;
       break;
     case 'small':
       blockSize = 28;
-      fontSize = 20;
-      strokeWidth = 1.5;
+      borderRadius = 5;
+      break;
+    case 'site':
+      blockSize = 34;
       borderRadius = 5;
       break;
     default:
       blockSize = (size === null || size === void 0 ? void 0 : size.blockSize) || 36;
-      fontSize = (size === null || size === void 0 ? void 0 : size.fontSize) || 24;
-      strokeWidth = (size === null || size === void 0 ? void 0 : size.strokeWidth) || 2;
       borderRadius = (size === null || size === void 0 ? void 0 : size.borderRadius) || 5;
       break;
   }
-  return /*#__PURE__*/_jsx(Block, _objectSpread(_objectSpread({
-    active: active,
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: cx(styles.block, className),
     style: _objectSpread({
       width: blockSize,
       height: blockSize,
@@ -76,9 +55,9 @@ var ActionIcon = function ActionIcon(_ref7) {
     }, style)
   }, props), {}, {
     children: /*#__PURE__*/_jsx(Icon, {
-      size: fontSize,
-      strokeWidth: strokeWidth
+      size: size === 'site' ? 'small' : size,
+      icon: icon
     })
   }));
-};
-export default /*#__PURE__*/React.memo(ActionIcon);
+});
+export default ActionIcon;

package/es/ActionIcon/style.d.ts

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

package/es/ActionIcon/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, _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 ", ",\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,26 +1,86 @@
-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 {
+    /**
+     * @description Whether the panel can be pinned or not
+     * @default true
+     */
     pin?: boolean;
+    /**
+     * @description The mode of the panel, fixed or float
+     * @default 'fixed'
+     */
     mode?: 'fixed' | 'float';
+    /**
+     * @description The placement of the panel, right, left, top or bottom
+     * @default 'right'
+     */
     placement: placementType;
+    /**
+     * @description The minimum width of the panel
+     */
     minWidth?: number;
+    /**
+     * @description The minimum height of the panel
+     */
     minHeight?: number;
+    /**
+     * @description Whether the panel can be resized or not
+     * @default true
+     */
     resize?: RndProps['enableResizing'];
+    /**
+     * @description The size of the panel
+     */
     size?: Partial<Size>;
+    /**
+     * @description Callback function when the size of the panel changes
+     */
     onSizeChange?: (delta: NumberSize, size?: Size) => void;
+    /**
+     * @description Callback function when the panel is being resized
+     */
     onSizeDragging?: (delta: NumberSize, size?: Size) => void;
+    /**
+     * @description Whether the panel is expandable or not
+     * @default true
+     */
     expandable?: boolean;
+    /**
+     * @description Whether the panel is expanded or not
+     */
     expand?: boolean;
+    /**
+     * @description The default expand state of the panel
+     * @default true
+     */
     defaultExpand?: boolean;
+    /**
+     * @description Callback function when the expand state of the panel changes
+     */
     onExpandChange?: (expand: boolean) => void;
+    /**
+     * @description The default size of the panel
+     */
     defaultSize?: Partial<Size>;
+    /**
+     * @description Whether the panel should be destroyed when closed or not
+     * @default false
+     */
     destroyOnClose?: boolean;
+    /**
+     * @description Whether the panel handler should be shown when unexpanded or not
+     * @default true
+     */
     showHandlerWhenUnexpand?: boolean;
+    /**
+     * @description The style of the panel handler
+     * @type CSSProperties
+     */
     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

@@ -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;