@lobehub/ui 1.9.0 → 1.11.0

package/es/ActionIcon/index.js

@@ -36,7 +36,7 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
       borderRadius = 5;
       break;
     case 'small':
-      blockSize = 28;
+      blockSize = 24;
       borderRadius = 5;
       break;
     case 'site':
@@ -57,7 +57,7 @@ var ActionIcon = /*#__PURE__*/memo(function (_ref) {
     }, style)
   }, props), {}, {
     children: /*#__PURE__*/_jsx(Icon, {
-      size: size === 'site' ? 'small' : size,
+      size: size === 'site' ? 'normal' : size,
       icon: icon
     })
   }));

package/es/ActionIcon/style.js

@@ -7,6 +7,6 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   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)
+    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.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, glass && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          backdrop-filter: saturate(180%) blur(10px);\n        "]))), token.colorText, token.colorFillSecondary, token.colorText, token.colorFill)
   };
 });

package/es/EditableMessageList/index.js

@@ -1,13 +1,13 @@
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import IconAction from "../ActionIcon";
+import { messagesReducer } from "../Chat";
+import { ControlInput } from "../components/ControlInput";
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Select } from 'antd';
 import isEqual from 'fast-deep-equal';
+import { TrashIcon } from 'lucide-react';
 import { memo, useEffect, useReducer } from 'react';
 import { Flexbox } from 'react-layout-kit';
-import IconAction from "../ActionIcon";
-import { messagesReducer } from "../Chat";
-import { ControlInput } from "../components/ControlInput";
-import { TrashIcon } from 'lucide-react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
@@ -70,8 +70,8 @@ export var EditableMessageList = /*#__PURE__*/memo(function (_ref) {
           placeholder: item.role === 'user' ? '请填入输入的样例内容' : '请填入输出的样例'
         }), /*#__PURE__*/_jsx(IconAction, {
           icon: TrashIcon,
-          title: '删除',
-          size: 'small',
+          placement: "right",
+          title: "Delete",
           onClick: function onClick() {
             dispatch({
               type: 'deleteMessage',

package/es/EditableText/index.js

@@ -26,10 +26,7 @@ var EditableText = /*#__PURE__*/memo(function (_ref) {
       title: 'Edit',
       placement: "right",
       icon: Edit3,
-      size: {
-        fontSize: 14,
-        blockSize: 24
-      },
+      size: "small",
       onClick: function onClick() {
         setEdited(!edited);
       }

package/es/Highlighter/style.js

@@ -1,7 +1,6 @@
 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,
@@ -11,7 +10,7 @@ export var useStyles = createStyles(function (_ref, type) {
   var buttonHoverCls = "".concat(prefix, "-hover-btn");
   var langHoverCls = "".concat(prefix, "-hover-lang");
   return {
-    container: cx(prefix, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: relative;\n\n          overflow: auto;\n\n          background-color: ", ";\n          border-radius: ", "px;\n\n          transition: background-color 100ms ", ";\n          ", "\n          &:hover {\n            background-color: ", ";\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\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        "])), type === 'block' ? rgba(token.colorBgElevated, 0.6) : 'transparent', token.borderRadius, token.motionEaseOut, type === 'ghost' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            border: 1px solid ", ";\n          "])), token.colorBorder), type === 'prue' ? 'transparent' : token.colorFillTertiary, buttonHoverCls, langHoverCls, type === 'prue' ? 0 : "16px 24px")),
+    container: cx(prefix, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          position: relative;\n\n          overflow: auto;\n\n          background-color: ", ";\n          border-radius: ", "px;\n\n          transition: background-color 100ms ", ";\n          ", "\n          &:hover {\n            background-color: ", ";\n            .", " {\n              opacity: 1;\n            }\n\n            .", " {\n              opacity: 1;\n            }\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        "])), type === 'block' ? token.colorFillTertiary : 'transparent', token.borderRadius, token.motionEaseOut, type === 'ghost' && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            border: 1px solid ", ";\n          "])), token.colorBorder), type === 'prue' ? 'transparent' : token.colorFillTertiary, buttonHoverCls, langHoverCls, type === 'prue' ? 0 : "16px 24px")),
     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,4 +1,5 @@
 /// <reference types="react" />
+import { SvgProps } from "../types";
 import { LucideIcon } from 'lucide-react';
 export declare type IconSize = 'large' | 'normal' | 'small' | {
     fontSize?: number;

package/es/Icon/index.js

@@ -13,12 +13,15 @@ var Icon = function Icon(_ref) {
   var SvgIcon = icon;
   switch (size) {
     case 'large':
-    case 'normal':
       fontSize = 24;
       strokeWidth = 2;
       break;
-    case 'small':
+    case 'normal':
       fontSize = 20;
+      strokeWidth = 2;
+      break;
+    case 'small':
+      fontSize = 14;
       strokeWidth = 1.5;
       break;
     default:

package/es/Input/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { InputProps as AntdInputProps } from 'antd';
+import { TextAreaProps as AntdTextAreaProps } from 'antd/es/input/TextArea';
+export interface InputProps extends AntdInputProps {
+    ref?: any;
+    type?: 'ghost' | 'block';
+}
+export declare const Input: import("react").NamedExoticComponent<InputProps>;
+export interface TextAreaProps extends AntdTextAreaProps {
+    ref?: any;
+    type?: 'ghost' | 'block';
+}
+export declare const TextArea: import("react").NamedExoticComponent<TextAreaProps>;

package/es/Input/index.js

@@ -0,0 +1,38 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "type"],
+  _excluded2 = ["className", "type"];
+import { Input as AntInput } from 'antd';
+import { forwardRef, memo } from 'react';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Input = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'ghost' : _ref$type,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles({
+      type: type
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsx(AntInput, _objectSpread({
+    ref: ref,
+    className: cx(styles.input, className)
+  }, props));
+}));
+export var TextArea = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var className = _ref2.className,
+    _ref2$type = _ref2.type,
+    type = _ref2$type === void 0 ? 'ghost' : _ref2$type,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var _useStyles2 = useStyles({
+      type: type
+    }),
+    styles = _useStyles2.styles,
+    cx = _useStyles2.cx;
+  return /*#__PURE__*/_jsx(AntInput.TextArea, _objectSpread({
+    ref: ref,
+    className: cx(styles.textarea, className)
+  }, props));
+}));

package/es/Input/style.d.ts

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

package/es/Input/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 type = _ref2.type;
+  return {
+    input: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n\n    max-width: 100%;\n    height: 36px;\n    padding: 0 12px;\n\n    background-color: ", ";\n    border: 1px solid ", ";\n\n    transition: background-color 100ms ", ";\n\n    input {\n      background: transparent;\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n  "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, token.motionEaseOut, token.colorFillTertiary),
+    textarea: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n\n    max-width: 100%;\n    padding: 8px 12px;\n\n    background-color: ", ";\n    border: 1px solid ", ";\n\n    transition: background-color 100ms ", ";\n\n    textarea {\n      background: transparent;\n    }\n\n    &:hover {\n      background-color: ", ";\n    }\n  "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, token.motionEaseOut, token.colorFillTertiary)
+  };
+});

package/es/Markdown/style.js

@@ -6,7 +6,7 @@ export var useStyles = createStyles(function (_ref) {
     token = _ref.token,
     isDarkMode = _ref.isDarkMode;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n\n      p {\n        margin: 20px auto;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n        color: ", ";\n        background: ", ";\n        border-radius: 4px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      ul li {\n        line-height: 1.8;\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, isDarkMode ? token['cyan-7'] : token.colorPrimaryText, isDarkMode ? token['cyan-1'] : token.colorPrimaryBg, token.colorBorder, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius),
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n\n      p {\n        margin: 20px auto;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n        p {\n          font-style: italic;\n          color: ", ";\n        }\n      }\n\n      p:not(:last-child) {\n        margin-bottom: 1em;\n      }\n\n      a {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      img {\n        max-width: 100%;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n        color: ", ";\n        background: ", ";\n        border-radius: 4px;\n      }\n\n      table {\n        border-spacing: 0;\n\n        width: 100%;\n        margin-block-start: 1em;\n        margin-block-end: 1em;\n        margin-inline-start: 0px;\n        margin-inline-end: 0px;\n        padding: 8px;\n\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      }\n\n      th,\n      td {\n        padding-block-start: 10px;\n        padding-block-end: 10px;\n        padding-inline-start: 16px;\n        padding-inline-end: 16px;\n      }\n\n      thead {\n        tr {\n          th {\n            background: ", ";\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      ul li {\n        line-height: 1.8;\n      }\n\n      pre {\n        border-radius: ", "px;\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, isDarkMode ? token['cyan-7'] : token.colorPrimaryText, isDarkMode ? token['cyan-1'] : token.colorPrimaryBg, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius),
     code: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding: 2px 4px;\n      font-family: ", " !important;\n      color: ", ";\n      border-radius: 4px;\n    "])), token.fontFamilyCode, isDarkMode ? token.cyan8 : token.pink7)
   };
 });

package/es/MessageInput/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { type TextAreaProps } from "../index";
 import { ButtonProps } from 'antd';
 /**
  * @title MessageInputProps
@@ -30,6 +31,7 @@ export interface MessageInputProps {
     renderButtons?: (text: string) => ButtonProps[];
     height?: number;
     className?: string;
+    type?: TextAreaProps['type'];
 }
 declare const MessageInput: import("react").NamedExoticComponent<MessageInputProps>;
 export default MessageInput;

package/es/MessageInput/index.js

@@ -1,6 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import { Button, Input } from 'antd';
+import { TextArea } from "./..";
+import { Button } from 'antd';
 import { cx } from 'antd-style';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -14,7 +15,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var MessageInput = /*#__PURE__*/memo(function (_ref) {
-  var onCancel = _ref.onCancel,
+  var type = _ref.type,
+    onCancel = _ref.onCancel,
     defaultValue = _ref.defaultValue,
     onConfirm = _ref.onConfirm,
     renderButtons = _ref.renderButtons,
@@ -26,9 +28,9 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
     setRole = _useState2[1];
   return /*#__PURE__*/_jsxs(Flexbox, {
     gap: 8,
-    children: [/*#__PURE__*/_jsx(Input.TextArea, {
+    children: [/*#__PURE__*/_jsx(TextArea, {
+      type: type,
       value: tempSystemRole,
-      allowClear: true,
       placeholder: '例如：你是一名擅长翻译的翻译官，请将用户所输入的英文都翻译为中文。',
       style: {
         height: height !== null && height !== void 0 ? height : 200
@@ -44,15 +46,15 @@ var MessageInput = /*#__PURE__*/memo(function (_ref) {
         return /*#__PURE__*/_jsx(Button, _objectSpread({}, buttonProps), index);
       }) : /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(Button, {
-          type: 'primary',
+          type: "primary",
           onClick: function onClick() {
             onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(tempSystemRole);
           },
-          children: "\u8BBE\u5B9A"
+          children: "Confirm"
         }), /*#__PURE__*/_jsx(Button, {
-          type: 'text',
+          type: "text",
           onClick: onCancel,
-          children: "\u53D6\u6D88"
+          children: "Cancel"
         })]
       })
     })]

package/es/SearchBar/index.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-import { InputProps } from 'antd';
+import { InputProps } from "../index";
 export interface SearchBarProps extends InputProps {
     shortKey?: string;
     enableShortKey?: boolean;
-    type?: 'ghost' | 'block';
 }
 declare const SearchBar: import("react").NamedExoticComponent<SearchBarProps>;
 export default SearchBar;

package/es/SearchBar/index.js

@@ -1,10 +1,10 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "value", "onChange", "style", "placeholder", "type", "enableShortKey", "shortKey"];
+var _excluded = ["className", "value", "onChange", "placeholder", "enableShortKey", "shortKey"];
 var _navigator;
-import { Icon } from "./..";
-import { Input, Tag } from 'antd';
+import { Icon, Input } from "./..";
+import { Tag } from 'antd';
 import { Search } from 'lucide-react';
 import { memo, useEffect, useRef, useState } from 'react';
 import { useStyles } from "./style";
@@ -16,10 +16,7 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
   var className = _ref.className,
     value = _ref.value,
     _onChange = _ref.onChange,
-    style = _ref.style,
     placeholder = _ref.placeholder,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'ghost' : _ref$type,
     enableShortKey = _ref.enableShortKey,
     _ref$shortKey = _ref.shortKey,
     shortKey = _ref$shortKey === void 0 ? 'f' : _ref$shortKey,
@@ -32,9 +29,7 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     inputValue = _useState4[0],
     setInputValue = _useState4[1];
-  var _useStyles = useStyles({
-      type: type
-    }),
+  var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var inputRef = useRef(null);
@@ -42,8 +37,9 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
     if (!enableShortKey) return;
     var handler = function handler(ev) {
       if ((isAppleDevice ? ev.metaKey : ev.ctrlKey) && ev.key === shortKey) {
+        var _inputRef$current;
         ev.preventDefault();
-        inputRef.current.focus();
+        (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
       }
     };
     document.addEventListener('keydown', handler);
@@ -52,16 +48,14 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
     };
   }, []);
   return /*#__PURE__*/_jsxs("div", {
-    className: cx(styles.search, className),
+    className: styles.search,
     children: [/*#__PURE__*/_jsx(Input, _objectSpread({
       ref: inputRef,
-      className: styles.input,
+      className: cx(styles.input, className),
       prefix: /*#__PURE__*/_jsx(Icon, {
         className: styles.icon,
         icon: Search,
-        size: {
-          fontSize: 14
-        },
+        size: "small",
         style: {
           marginRight: 4
         }
@@ -69,9 +63,6 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
       allowClear: true,
       value: value,
       placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Type keywords...',
-      style: _objectSpread(_objectSpread({}, style), {}, {
-        borderColor: 'transparent'
-      }),
       onChange: function onChange(e) {
         setInputValue(e.target.value);
         setShowTag(e.target.value ? false : true);

package/es/SearchBar/style.d.ts

@@ -1,6 +1,4 @@
-export declare const useStyles: (props?: {
-    type: 'ghost' | 'block';
-} | undefined) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     search: import("antd-style").SerializedStyles;
     input: import("antd-style").SerializedStyles;
     tag: import("antd-style").SerializedStyles;

package/es/SearchBar/style.js

@@ -1,15 +1,13 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
-export var useStyles = createStyles(function (_ref, _ref2) {
+export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
-  var type = _ref2.type;
   return {
-    search: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n    height: 36px;\n  "]))),
-    input: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    height: inherit;\n    padding: 0 8px 0 12px;\n    transition: background-color 100ms ", ";\n\n    ", "\n\n    &:hover {\n      background-color: ", " !important;\n    }\n\n    input {\n      background: transparent;\n    }\n  "])), token.motionEaseOut, type === 'block' ? css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          background-color: ", " !important;\n        "])), rgba(token.colorBgElevated, 0.6)) : css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          background: transparent !important;\n          border: 1px solid ", " !important;\n        "])), token.colorBorder), token.colorFillTertiary),
-    tag: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 5;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  "]))),
-    icon: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextPlaceholder)
+    search: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    position: relative;\n    max-width: 100%;\n  "]))),
+    input: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: relative;\n    padding: 0 8px 0 12px;\n  "]))),
+    tag: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: absolute;\n    z-index: 5;\n    top: 50%;\n    right: 0;\n    transform: translateY(-50%);\n  "]))),
+    icon: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), token.colorTextPlaceholder)
   };
 });

package/es/Snippet/style.js

@@ -1,9 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
 import { createStyles } from 'antd-style';
-import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref, type) {
   var css = _ref.css,
     token = _ref.token;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      max-width: 100%;\n      height: 36px;\n      padding: 0 8px 0 12px;\n\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n      ", "\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      .ant-highlighter-shiki {\n        overflow: auto;\n        flex: 1;\n      }\n      .prism-code {\n        background: none !important;\n      }\n\n      pre {\n        margin: 0 !important;\n        padding-top: 6px !important;\n        line-height: 1;\n        background: none !important;\n      }\n\n      code[class*='language-'] {\n        background: none !important;\n      }\n    "])), token.borderRadius, token.motionEaseOut, type === 'block' ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), rgba(token.colorBgElevated, 0.6)) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            border: 1px solid ", ";\n          "])), token.colorBorder), token.colorFillTertiary);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      max-width: 100%;\n      height: 36px;\n      padding: 0 8px 0 12px;\n\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ";\n      ", "\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      .ant-highlighter-shiki {\n        overflow: auto;\n        flex: 1;\n      }\n      .prism-code {\n        background: none !important;\n      }\n\n      pre {\n        margin: 0 !important;\n        padding-top: 6px !important;\n        line-height: 1;\n        background: none !important;\n      }\n\n      code[class*='language-'] {\n        background: none !important;\n      }\n    "])), token.borderRadius, token.motionEaseOut, type === 'block' ? css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            background-color: ", ";\n          "])), token.colorFillTertiary) : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            border: 1px solid ", ";\n          "])), token.colorBorder), token.colorFillTertiary);
 });

package/es/StroyBook/style.js

@@ -9,6 +9,6 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   return {
     editor: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: stretch;\n        justify-content: stretch;\n\n        width: inherit;\n        min-height: inherit;\n        ", "\n      "])), mobile && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          flex-direction: column;\n        "])))),
     left: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        overflow: auto;\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n\n        ", "\n      "])), !noPadding && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          padding: 40px 24px;\n        "])))),
-    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        --leva-sizes-controlWidth: 66%;\n        --leva-colors-elevation1: ", ";\n        --leva-colors-elevation2: transparent;\n        --leva-colors-elevation3: ", ";\n        --leva-colors-accent1: ", ";\n        --leva-colors-accent2: ", ";\n        --leva-colors-accent3: ", ";\n        --leva-colors-highlight1: ", ";\n        --leva-colors-highlight2: ", ";\n        --leva-colors-highlight3: ", ";\n        --leva-colors-vivid1: ", ";\n        --leva-shadows-level1: unset;\n        --leva-shadows-level2: unset;\n        --leva-fonts-mono: ", ";\n\n        padding: 6px 0;\n        background: ", ";\n        > div {\n          background: transparent;\n          > div {\n            background: transparent;\n          }\n        }\n        input:checked + label > svg {\n          stroke: ", ";\n        }\n      "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.fontFamilyCode, token.colorBgLayout, token.colorBorder)
+    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        --leva-sizes-controlWidth: 66%;\n        --leva-colors-elevation1: ", ";\n        --leva-colors-elevation2: transparent;\n        --leva-colors-elevation3: ", ";\n        --leva-colors-accent1: ", ";\n        --leva-colors-accent2: ", ";\n        --leva-colors-accent3: ", ";\n        --leva-colors-highlight1: ", ";\n        --leva-colors-highlight2: ", ";\n        --leva-colors-highlight3: ", ";\n        --leva-colors-vivid1: ", ";\n        --leva-shadows-level1: unset;\n        --leva-shadows-level2: unset;\n        --leva-fonts-mono: ", ";\n\n        padding: 6px 0;\n        background: ", ";\n        > div {\n          background: transparent;\n          > div {\n            background: transparent;\n          }\n        }\n\n        input:checked + label > svg {\n          stroke: ", ";\n        }\n\n        button {\n          --leva-colors-accent2: ", ";\n        }\n      "])), token.colorFillSecondary, token.colorFillSecondary, token.colorPrimary, token.colorPrimaryHover, token.colorPrimaryActive, token.colorTextTertiary, token.colorTextSecondary, token.colorText, token.colorWarning, token.fontFamilyCode, token.colorBgLayout, token.colorBgLayout, token.colorFillSecondary)
   };
 });

package/es/ThemeProvider/index.d.ts

@@ -1,10 +1,6 @@
+/// <reference types="react" />
 import { extractStaticStyle, type ThemeMode } from 'antd-style';
-import React from 'react';
 export interface ThemeProviderProps {
-    /**
-     * @description Custom tokens to be used in the theme
-     */
-    token?: any;
     /**
      * @description The children of the ThemeProvider component
      */
@@ -22,5 +18,5 @@ export interface ThemeProviderProps {
      */
     cache?: typeof extractStaticStyle.cache;
 }
-declare const ThemeProvider: React.FC<ThemeProviderProps>;
+declare const ThemeProvider: import("react").NamedExoticComponent<ThemeProviderProps>;
 export default ThemeProvider;

package/es/ThemeProvider/index.js

@@ -1,36 +1,26 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { lobeCustomStylish, lobeCustomToken, lobeTheme } from "../styles";
 import { App } from 'antd';
 import { ThemeProvider as AntdThemeProvider, StyleProvider, setupStyled } from 'antd-style';
-import React, { useCallback } from 'react';
+import { memo } from 'react';
 // @ts-ignore
 import ReactFontLoader from 'react-font-loader';
 import { ThemeContext } from 'styled-components';
-import { createCustomToken, getAntdTheme, getCustomStylish } from "../styles";
 import GlobalStyle from "./GlobalStyle";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var ThemeProvider = function ThemeProvider(_ref) {
-  var token = _ref.token,
-    children = _ref.children,
+var ThemeProvider = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
     themeMode = _ref.themeMode;
   setupStyled({
     ThemeContext: ThemeContext
   });
-  var getCustomToken = useCallback(function (params) {
-    var base = createCustomToken(params);
-    if (token) {
-      return _objectSpread(_objectSpread({}, base), token);
-    } else {
-      return base;
-    }
-  }, [token]);
   return /*#__PURE__*/_jsx(StyleProvider, {
     speedy: process.env.NODE_ENV === 'production',
     children: /*#__PURE__*/_jsxs(AntdThemeProvider, {
       themeMode: themeMode,
-      theme: getAntdTheme,
-      customStylish: getCustomStylish,
-      customToken: getCustomToken,
+      theme: lobeTheme,
+      customStylish: lobeCustomStylish,
+      customToken: lobeCustomToken,
       children: [/*#__PURE__*/_jsx(ReactFontLoader, {
         url: "https://raw.githubusercontent.com/IKKI2000/harmonyos-fonts/main/css/harmonyos_sans.css"
       }), /*#__PURE__*/_jsx(ReactFontLoader, {
@@ -44,5 +34,5 @@ var ThemeProvider = function ThemeProvider(_ref) {
       })]
     })
   });
-};
+});
 export default ThemeProvider;

package/es/components/ControlInput.d.ts

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

package/es/components/ControlInput.js

@@ -2,7 +2,9 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["value", "onChange", "onValueChanging", "onChangeEnd"];
-import { Button, ConfigProvider, Input } from 'antd';
+import { ActionIcon, Input } from "./..";
+import { ConfigProvider, Space } from 'antd';
+import { RotateCcw, Save } from 'lucide-react';
 import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -54,33 +56,28 @@ export var ControlInput = /*#__PURE__*/memo(function (_ref) {
         onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(input);
       }
     },
-    suffix: value === input ? /*#__PURE__*/_jsx("span", {}) : /*#__PURE__*/_jsxs(ConfigProvider, {
+    suffix: value === input ? /*#__PURE__*/_jsx("span", {}) : /*#__PURE__*/_jsx(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"
-      })]
+      children: /*#__PURE__*/_jsxs(Space, {
+        size: 2,
+        children: [/*#__PURE__*/_jsx(ActionIcon, {
+          title: "Reset",
+          icon: RotateCcw,
+          size: "small",
+          onClick: function onClick() {
+            setInput(value);
+          }
+        }), /*#__PURE__*/_jsx(ActionIcon, {
+          title: "\u2705 Save",
+          icon: Save,
+          size: "small",
+          onClick: updateValue
+        })]
+      })
     })
   }));
 });

package/es/index.d.ts

@@ -10,6 +10,7 @@ export { default as EditableMessageList, type EditableMessageListProps, } from '
 export { default as EditableText, type EditableTextProps } from './EditableText';
 export { default as Highlighter, SyntaxHighlighter, type HighlighterProps, type SyntaxHighlighterProps, } from './Highlighter';
 export { default as Icon, type IconProps, type IconSize } from './Icon';
+export { Input, TextArea, type InputProps, type TextAreaProps } from './Input';
 export { default as List } from './List';
 export { default as Logo, type LogoProps } from './Logo';
 export { default as Markdown, type MarkdownProps } from './Markdown';

package/es/index.js

@@ -9,6 +9,7 @@ export { default as EditableMessageList } from "./EditableMessageList";
 export { default as EditableText } from "./EditableText";
 export { default as Highlighter, SyntaxHighlighter } from "./Highlighter";
 export { default as Icon } from "./Icon";
+export { Input, TextArea } from "./Input";
 export { default as List } from "./List";
 export { default as Logo } from "./Logo";
 export { default as Markdown } from "./Markdown";

package/es/styles/algorithms/generateColorPalette.d.ts

@@ -0,0 +1,11 @@
+import { ColorScaleItem } from "../colors";
+import { AliasToken } from 'antd/es/theme/interface';
+export declare const generateColorPalette: ({ type, scale, appearance, }: {
+    type: 'Primary' | 'Success' | 'Warning' | 'Error' | 'Info' | string;
+    scale: ColorScaleItem;
+    appearance: 'light' | 'dark';
+}) => Partial<AliasToken>;
+export declare const generateColorNeutralPalette: ({ scale, appearance, }: {
+    scale: ColorScaleItem;
+    appearance: 'light' | 'dark';
+}) => Partial<AliasToken>;