@lobehub/ui 1.34.0 → 1.35.0

package/es/ActionIcon/style.js

@@ -9,6 +9,6 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var active = _ref2.active,
     glass = _ref2.glass;
   return {
-    block: cx(glass && stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          cursor: pointer;\n\n          position: relative;\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 ", ", scale 400ms ", ",\n            background-color 100ms ", ";\n\n          &:hover {\n            color: ", ";\n            background-color: ", ";\n          }\n\n          &:active {\n            scale: 0.8;\n            color: ", ";\n            background-color: ", ";\n          }\n        "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, token.motionEaseOut, token.colorText, token.colorFillSecondary, token.colorText, token.colorFill))
+    block: cx(glass && stylish.blur, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n          cursor: pointer;\n\n          position: relative;\n\n          display: flex;\n          flex: none;\n          align-items: center;\n          justify-content: center;\n\n          color: ", ";\n\n          background: ", ";\n\n          transition:\n            color 600ms ", ",\n            scale 400ms ", ",\n            background-color 100ms ", ";\n\n          &:hover {\n            color: ", ";\n            background-color: ", ";\n          }\n\n          &:active {\n            scale: 0.8;\n            color: ", ";\n            background-color: ", ";\n          }\n        "])), active ? token.colorText : token.colorTextTertiary, active ? token.colorFillTertiary : 'transparent', token.motionEaseOut, token.motionEaseOut, token.motionEaseOut, token.colorText, token.colorFillSecondary, token.colorText, token.colorFill))
   };
 });

package/es/ChatItem/index.d.ts

@@ -2,43 +2,46 @@ import { type AlertProps } from 'antd';
 import { ReactNode } from 'react';
 import { MetaData } from "../types/meta";
 export interface ChatItemProps {
+    /**
+     * @description Actions to be displayed in the chat item
+     */
     actions?: ReactNode;
     /**
-     * @description Whether to show alert and alert config
+     * @description Props for Alert component
      */
     alert?: AlertProps;
     /**
-     * @description Avatar config
+     * @description Metadata for the avatar
      */
     avatar: MetaData;
     /**
-     * @description Whether to add spacing between chat items
-     * @default true
+     * @description Whether to add border spacing
+     */
+    borderSpacing?: number | string;
+    /**
+     * @description Custom CSS class name for the chat item
      */
-    borderSpacing?: boolean;
     className?: string;
     /**
-     * @title Whether the component is in edit mode or not
-     * @default false
+     * @description Whether the chat item is in editing mode
      */
     editing?: boolean;
     /**
-     * @description Whether to show a loading spinner
-     * @default false
+     * @description Whether the chat item is in loading state
      */
     loading?: boolean;
     /**
-     * @description The message to be displayed
+     * @description The message content of the chat item
      */
     message?: string;
     /**
-     * @title Callback function when the value changes
-     * @param value - The new value
+     * @description Callback when the message content changes
+     * @param value - The new message content
      */
     onChange?: (value: string) => void;
     /**
-     * @title Callback function when the editing state changes
-     * @param editing - Whether the component is in edit mode or not
+     * @description Callback when the editing mode changes
+     * @param editing - The new editing mode
      */
     onEditingChange?: (editing: boolean) => void;
     /**
@@ -48,20 +51,18 @@ export interface ChatItemProps {
     placement?: 'left' | 'right';
     /**
      * @description Whether the chat item is primary
-     * @default false
      */
     primary?: boolean;
     /**
-     * @description Whether to show name of the chat item
-     * @default false
+     * @description Whether to show the title of the chat item
      */
     showTitle?: boolean;
     /**
-     * @description Time of chat message
+     * @description The timestamp of the chat item
      */
     time?: number;
     /**
-     * @description The type of chat item
+     * @description The type of the chat item
      * @default 'block'
      */
     type?: 'block' | 'pure';

package/es/ChatItem/index.js

@@ -18,8 +18,7 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
   var actions = _ref.actions,
     className = _ref.className,
     primary = _ref.primary,
-    _ref$borderSpacing = _ref.borderSpacing,
-    borderSpacing = _ref$borderSpacing === void 0 ? true : _ref$borderSpacing,
+    borderSpacing = _ref.borderSpacing,
     loading = _ref.loading,
     message = _ref.message,
     _ref$placement = _ref.placement,
@@ -36,7 +35,6 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
     properties = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles({
       avatarSize: AVATAR_SIZE,
-      borderSpacing: borderSpacing,
       placement: placement,
       primary: primary,
       showTitle: showTitle,
@@ -68,33 +66,37 @@ var ChatItem = /*#__PURE__*/memo(function (_ref) {
       })]
     }), /*#__PURE__*/_jsxs("div", {
       className: styles.messageContainer,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: cx(styles.name, 'chat-item-name'),
-        children: [showTitle ? avatar.title || 'untitled' : undefined, time && /*#__PURE__*/_jsx("span", {
-          className: "chat-item-time",
+      children: [/*#__PURE__*/_jsxs("title", {
+        className: styles.name,
+        children: [showTitle ? avatar.title || 'untitled' : undefined, time && /*#__PURE__*/_jsx("time", {
           children: formatTime(time)
         })]
-      }), alert ? /*#__PURE__*/_jsx(Alert, _objectSpread({
-        showIcon: true
-      }, alert)) : /*#__PURE__*/_jsx("div", {
-        className: styles.message,
-        style: editing ? {
-          padding: 12
-        } : {},
-        children: /*#__PURE__*/_jsx(EditableMessage, {
-          editing: editing,
-          onChange: onChange,
-          onEditingChange: onEditingChange,
-          value: String(message || '...')
-        })
-      }), !editing && /*#__PURE__*/_jsx("div", {
-        className: cx(styles.actions, 'chat-item-actions'),
-        children: actions
+      }), /*#__PURE__*/_jsxs("div", {
+        className: styles.messageContent,
+        children: [alert ? /*#__PURE__*/_jsx(Alert, _objectSpread({
+          className: styles.alert,
+          showIcon: true
+        }, alert)) : /*#__PURE__*/_jsx("div", {
+          className: styles.message,
+          style: editing ? {
+            padding: 12
+          } : {},
+          children: /*#__PURE__*/_jsx(EditableMessage, {
+            editing: editing,
+            onChange: onChange,
+            onEditingChange: onEditingChange,
+            value: String(message || '...')
+          })
+        }), !editing && /*#__PURE__*/_jsx("div", {
+          className: styles.actions,
+          role: "chat-item-actions",
+          children: actions
+        })]
       })]
     }), borderSpacing && /*#__PURE__*/_jsx("div", {
       style: {
         flex: 'none',
-        width: AVATAR_SIZE
+        width: borderSpacing
       }
     })]
   }));

package/es/ChatItem/style.d.ts

@@ -1,17 +1,18 @@
 export declare const useStyles: (props?: {
     avatarSize: number;
-    borderSpacing: boolean;
     placement?: "left" | "right" | undefined;
     primary?: boolean | undefined;
     showTitle?: boolean | undefined;
     title?: string | undefined;
     type?: "block" | "pure" | undefined;
 } | undefined) => import("antd-style").ReturnStyles<{
-    actions: string;
+    actions: import("antd-style").SerializedStyles;
+    alert: import("antd-style").SerializedStyles;
     avatarContainer: import("antd-style").SerializedStyles;
     container: string;
     loading: import("antd-style").SerializedStyles;
     message: string;
     messageContainer: import("antd-style").SerializedStyles;
+    messageContent: import("antd-style").SerializedStyles;
     name: import("antd-style").SerializedStyles;
 }>;

package/es/ChatItem/style.js

@@ -10,19 +10,20 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     title = _ref2.title,
     primary = _ref2.primary,
     avatarSize = _ref2.avatarSize,
-    showTitle = _ref2.showTitle,
-    borderSpacing = _ref2.borderSpacing;
+    showTitle = _ref2.showTitle;
   var blockStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n      background-color: ", ";\n      border-radius: ", "px;\n      transition: background-color 100ms ", ";\n    "])), primary ? token.colorFillSecondary : token.colorFillTertiary, token.borderRadiusLG, token.motionEaseOut);
   var pureStylish = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      padding-top: ", ";\n    "])), title ? 0 : '6px');
   var pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
   return {
-    actions: cx(css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          position: absolute;\n          display: flex;\n          align-items: flex-start;\n          justify-content: ", ";\n        "])), placement === 'left' ? 'flex-end' : 'flex-start'), type === 'block' && borderSpacing ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n              right: ", ";\n              bottom: 0;\n              left: ", ";\n              transform: translateX(", ");\n            "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', placement === 'left' ? '100%' : '-100%') : css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n              right: ", ";\n              bottom: ", ";\n              left: ", ";\n            "])), placement === 'left' ? '0' : 'unset', type === 'block' ? '-40px' : '-32px', placement === 'right' ? '0' : 'unset')),
-    avatarContainer: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
-    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px;\n\n          .chat-item-time,\n          .chat-item-actions {\n            display: none;\n          }\n\n          &:hover {\n            .chat-item-time {\n              display: inline-block;\n            }\n\n            .chat-item-actions {\n              display: flex;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse')),
-    loading: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
-    message: cx(typeStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
-    messageContainer: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        position: relative;\n\n        .ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n        }\n      "]))),
+    actions: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        display: flex;\n        align-items: flex-start;\n        align-self: ", ";\n        justify-content: ", ";\n      "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'),
+    alert: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        span[role='img'] {\n          align-self: flex-start;\n          width: 16px;\n          height: 16px;\n          margin-top: 3px;\n        }\n\n        .ant-alert-description {\n          text-align: justify;\n          word-break: break-all;\n          word-wrap: break-word;\n        }\n\n        &.ant-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n\n          .ant-alert-message {\n            font-size: 14px;\n            font-weight: 600;\n            text-align: justify;\n            word-break: break-all;\n            word-wrap: break-word;\n          }\n        }\n      "]))),
+    avatarContainer: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
+    container: cx(type === 'pure' && pureContainerStylish, css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          position: relative;\n\n          display: flex;\n          flex-direction: ", ";\n          gap: 12px;\n          align-items: flex-start;\n          justify-content: revert;\n\n          width: 100%;\n          padding: 12px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n        "])), placement === 'left' ? 'row' : 'row-reverse', token.motionEaseOut)),
+    loading: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: absolute;\n        right: ", ";\n        bottom: 0;\n        left: ", ";\n\n        display: flex;\n        align-items: center;\n        justify-content: center;\n\n        width: 16px;\n        height: 16px;\n\n        color: ", ";\n\n        background: ", ";\n        border-radius: 50%;\n      "])), placement === 'left' ? '-4px' : 'unset', placement === 'right' ? '-4px' : 'unset', token.colorBgLayout, token.colorPrimary),
+    message: cx(typeStylish, css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
+    messageContainer: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: ", ";\n      "])), placement === 'left' ? 'flex-start' : 'flex-end'),
+    messageContent: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        position: revert;\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 8px;\n        align-items: ", ";\n      "])), type === 'block' ? placement === 'left' ? 'row' : 'row-reverse' : 'column', placement === 'left' ? 'flex-start' : 'flex-end'),
     name: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        position: ", ";\n        top: ", ";\n        right: ", ";\n        left: ", ";\n\n        display: flex;\n        flex-direction: ", ";\n        gap: 4px;\n\n        margin-bottom: 6px;\n\n        font-size: 12px;\n        line-height: 1;\n        color: ", ";\n        text-align: ", ";\n      "])), showTitle ? 'relative' : 'absolute', showTitle ? 'unset' : '-16px', placement === 'right' ? '0' : 'unset', placement === 'left' ? '0' : 'unset', placement === 'left' ? 'row' : 'row-reverse', token.colorTextDescription, placement === 'left' ? 'left' : 'right')
   };
 });

package/es/ChatList/index.d.ts

@@ -7,7 +7,12 @@ export interface ChatListProps extends DivProps {
      * @description Data of chat messages to be displayed
      */
     data: ChatMessage[];
-    onActionClick: (actionKey: string, messageId: string) => void;
+    /**
+     * @description Callback function triggered when an action is clicked
+     * @param {string} actionKey - The key of the action
+     * @param {string} messageId - The id of the message
+     */
+    onActionClick?: (actionKey: string, messageId: string) => void;
     /**
      * @description Whether to show name of the chat item
      * @default false

package/es/ChatList/index.js

@@ -9,7 +9,8 @@ import ActionsBar from "./ActionsBar";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 var ChatList = /*#__PURE__*/memo(function (_ref) {
-  var _onActionClick = _ref.onActionClick,
+  var _ref$onActionClick = _ref.onActionClick,
+    _onActionClick = _ref$onActionClick === void 0 ? function () {} : _ref$onActionClick,
     className = _ref.className,
     data = _ref.data,
     _ref$type = _ref.type,
@@ -31,7 +32,6 @@ var ChatList = /*#__PURE__*/memo(function (_ref) {
           primary: item.role === 'user'
         }),
         avatar: item.meta,
-        borderSpacing: type === 'chat',
         message: item.content,
         placement: type === 'chat' ? item.role === 'user' ? 'right' : 'left' : 'left',
         primary: item.role === 'user',

package/es/CodeEditor/style.js

@@ -8,7 +8,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     isDarkMode = _ref.isDarkMode;
   var type = _ref2.type,
     resize = _ref2.resize;
-  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n\n      transition: background-color 100ms ", ",\n        border-color 200ms ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorderSecondary, token.borderRadius, token.motionEaseOut, token.motionEaseOut, type === 'block' ? token.colorFillSecondary : token.colorFillQuaternary, token.colorBorder);
+  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding: 8px 12px;\n\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n\n      transition:\n        background-color 100ms ", ",\n        border-color 200ms ", ";\n\n      &:hover {\n        background-color: ", ";\n        border-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorderSecondary, token.borderRadius, token.motionEaseOut, token.motionEaseOut, type === 'block' ? token.colorFillSecondary : token.colorFillQuaternary, token.colorBorder);
   return {
     container: cx(type !== 'pure' && typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          overflow-x: hidden;\n          overflow-y: auto;\n          height: fit-content;\n        "])))),
     editor: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        resize: ", ";\n        height: fit-content;\n        font-family: ", " !important;\n\n        pre {\n          word-wrap: break-word;\n          white-space: pre-wrap;\n\n          &.shiki {\n            margin: 0;\n          }\n        }\n      "])), resize ? 'vertical' : 'none', token.fontFamilyCode),

package/es/ColorScales/style.js

@@ -9,7 +9,7 @@ export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    scaleBox: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    position: relative;\n\n    width: 48px;\n    height: 32px;\n\n    background-position: 0 0, 0 8px, 8px -8px, -8px 0;\n    background-size: 16px 16px;\n\n    transition: scale 400ms ", ";\n\n    &:active {\n      scale: 0.8;\n    }\n  "])), token.motionEaseOut),
+    scaleBox: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    cursor: pointer;\n\n    position: relative;\n\n    width: 48px;\n    height: 32px;\n\n    background-position:\n      0 0,\n      0 8px,\n      8px -8px,\n      -8px 0;\n    background-size: 16px 16px;\n\n    transition: scale 400ms ", ";\n\n    &:active {\n      scale: 0.8;\n    }\n  "])), token.motionEaseOut),
     scaleItem: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    width: 100%;\n    height: 100%;\n  "]))),
     scaleRowTitle: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    width: 64px;\n    height: 32px;\n  "]))),
     text: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    opacity: 0.5;\n  "]))),

package/es/DraggablePanel/index.js

@@ -70,6 +70,10 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     showExpand = _useState2[0],
     setShowExpand = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isResizing = _useState4[0],
+    setIsResizing = _useState4[1];
   var canResizing = resize !== false && isExpand;
   var resizeHandleClassNames = useMemo(function () {
     if (!canResizing) return {};
@@ -185,16 +189,20 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
       });
     },
     onResizeStart: function onResizeStart() {
+      setIsResizing(true);
       setShowExpand(false);
     },
     onResizeStop: function onResizeStop(e, direction, reference_, delta) {
+      setIsResizing(false);
       setShowExpand(true);
       onSizeChange === null || onSizeChange === void 0 ? void 0 : onSizeChange(delta, {
         height: reference_.style.height,
         width: reference_.style.width
       });
     },
-    style: style,
+    style: _objectSpread({
+      transition: isResizing ? 'unset' : undefined
+    }, style),
     children: children
   }));
   if (fullscreen) return /*#__PURE__*/_jsx("div", {
@@ -206,7 +214,7 @@ var DraggablePanel = /*#__PURE__*/memo(function (_ref) {
     // @ts-ignore
     styles[mode === 'fixed' ? 'fixed' : "".concat(placement, "Float")], className),
     ref: reference,
-    style: _defineProperty({}, "border".concat(arrowPlacement, "Width"), 1),
+    style: isExpand ? _defineProperty({}, "border".concat(arrowPlacement, "Width"), 1) : {},
     children: [expandable && showExpand && handler, destroyOnClose ? isExpand && inner : inner]
   });
 });

package/es/GradientButton/style.js

@@ -8,7 +8,7 @@ export var useStyles = createStyles(function (_ref) {
     stylish = _ref.stylish;
   return {
     bg: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n      z-index: -1;\n      top: 0;\n      left: 0;\n\n      width: 100%;\n      height: 100%;\n\n      background: ", ";\n      border-radius: inherit;\n    "])), token.colorBgLayout),
-    button: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n      z-index: 1;\n      background: ", ";\n      border: none;\n\n      &::before {\n        ", "\n        content: '';\n\n        position: absolute;\n        z-index: 0;\n        inset: 0;\n\n        overflow: hidden;\n\n        padding: 1px;\n\n        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n\n        mask-composite: xor;\n      }\n\n      > span {\n        position: relative;\n        z-index: 10;\n      }\n\n      &:hover {\n        &::before {\n          mask: unset;\n        }\n      }\n    "])), token.colorBgLayout, stylish.gradientAnimation),
+    button: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n      z-index: 1;\n      background: ", ";\n      border: none;\n\n      &::before {\n        ", "\n        content: '';\n\n        position: absolute;\n        z-index: 0;\n        inset: 0;\n\n        overflow: hidden;\n\n        padding: 1px;\n\n        mask:\n          linear-gradient(#fff 0 0) content-box,\n          linear-gradient(#fff 0 0);\n\n        mask-composite: xor;\n      }\n\n      > span {\n        position: relative;\n        z-index: 10;\n      }\n\n      &:hover {\n        &::before {\n          mask: unset;\n        }\n      }\n    "])), token.colorBgLayout, stylish.gradientAnimation),
     glow: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      ", "\n      position: absolute;\n      z-index: -1;\n      top: 0;\n      left: 0;\n\n      width: 100%;\n      height: 100%;\n\n      opacity: ", ";\n      filter: blur(", "em);\n      border-radius: inherit;\n    "])), stylish.gradientAnimation, isDarkMode ? 0.5 : 0.3, isDarkMode ? 1.5 : 1)
   };
 });

package/es/Header/style.js

@@ -9,7 +9,7 @@ export var useStyles = createStyles(function (_ref) {
     cx = _ref.cx;
   return {
     content: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: 64px;\n    padding: 0 24px;\n    background-color: ", ";\n    border-bottom: 1px solid ", ";\n\n    ", " {\n      padding: 0 12px;\n    }\n  "])), rgba(token.colorBgLayout, 0.4), token.colorSplit, responsive.mobile),
-    header: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      grid-area: head;\n      align-self: stretch;\n      width: 100%;\n    "])))),
+    header: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    grid-area: head;\n    align-self: stretch;\n    width: 100%;\n  "])))),
     left: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    z-index: 10;\n  "]))),
     right: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    z-index: 10;\n    display: flex;\n    flex: 1;\n    justify-content: space-between;\n\n    &-aside {\n      display: flex;\n      align-items: center;\n\n      ", " {\n        justify-content: center;\n        margin: 8px 16px;\n        padding-top: 24px;\n        border-top: 1px solid ", ";\n      }\n    }\n  "])), responsive.mobile, token.colorBorder)
   };

package/es/Input/style.js

@@ -6,7 +6,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     css = _ref.css,
     token = _ref.token;
   var type = _ref2.type;
-  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n      transition: background-color 100ms ", ",\n        border-color 200ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:focus {\n        border-color: ", ";\n      }\n\n      &.ant-input-affix-wrapper-focused {\n        border-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, token.motionEaseOut, token.motionEaseOut, token.colorFillTertiary, token.colorTextQuaternary, token.colorTextQuaternary);
+  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n      transition:\n        background-color 100ms ", ",\n        border-color 200ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:focus {\n        border-color: ", ";\n      }\n\n      &.ant-input-affix-wrapper-focused {\n        border-color: ", ";\n      }\n    "])), type === 'block' ? token.colorFillTertiary : 'transparent', type === 'block' ? 'transparent' : token.colorBorder, token.motionEaseOut, token.motionEaseOut, token.colorFillTertiary, token.colorTextQuaternary, token.colorTextQuaternary);
   return {
     input: cx(type !== 'pure' && typeStylish, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          position: relative;\n          max-width: 100%;\n          height: ", ";\n          padding: ", ";\n\n          input {\n            background: transparent;\n          }\n        "])), type === 'pure' ? 'unset' : '36px', type === 'pure' ? '0' : '0 12px')),
     textarea: cx(type !== 'pure' && typeStylish, css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          position: relative;\n          max-width: 100%;\n          padding: ", ";\n\n          textarea {\n            background: transparent;\n          }\n        "])), type === 'pure' ? '0' : '8px 12px'))

package/es/SideNav/style.js

@@ -4,5 +4,5 @@ import { createStyles } from 'antd-style';
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      display: flex;\n      flex: none;\n      flex-direction: column;\n      align-items: center;\n      justify-content: space-between;\n\n      width: 64px;\n      height: 100%;\n      min-height: 640px;\n      padding: 16px 0;\n\n      background: ", ";\n      border-right: 1px solid ", ";\n    "])), token.colorBgContainer, token.colorBorder);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    flex: none;\n    flex-direction: column;\n    align-items: center;\n    justify-content: space-between;\n\n    width: 64px;\n    height: 100%;\n    min-height: 640px;\n    padding: 16px 0;\n\n    background: ", ";\n    border-right: 1px solid ", ";\n  "])), token.colorBgContainer, token.colorBorder);
 });

package/es/styles/algorithms/generateCustomStylish.js

@@ -10,7 +10,7 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
     blur: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      backdrop-filter: saturate(180%) blur(10px);\n    "]))),
     bottomScrollbar: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        width: 0;\n        height: 4px;\n        background-color: transparent;\n\n        &-thumb {\n          background-color: ", ";\n          border-radius: 4px;\n          transition: background-color 500ms ", ";\n        }\n\n        &-corner {\n          display: none;\n          width: 0;\n          height: 0;\n        }\n      }\n    "])), token.colorFill, token.motionEaseOut),
     gradientAnimation: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      background-image: linear-gradient(\n        -45deg,\n        ", ",\n        ", ",\n        ", ",\n        ", "\n      );\n      background-size: 400% 400%;\n      border-radius: inherit;\n      animation: 5s ", " 5s ease infinite;\n    "])), token.gold, token.magenta, token.geekblue, token.cyan, gradient),
-    markdown: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\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      pre {\n        border: none;\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\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: 0;\n        margin-inline-end: 0;\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\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      li {\n        line-height: 1.8;\n\n        &::marker {\n          color: ", ";\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
+    markdown: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      color: ", ";\n\n      h1,\n      h2,\n      h3,\n      h4,\n      h5 {\n        font-weight: 600;\n      }\n\n      p {\n        margin-block-start: 0;\n        margin-block-end: 0;\n\n        font-size: 14px;\n        line-height: 1.8;\n        color: ", ";\n        text-align: justify;\n        word-break: break-all;\n        word-wrap: break-word;\n\n        + * {\n          margin-block-end: 0.5em;\n        }\n      }\n\n      blockquote {\n        margin: 16px 0;\n        padding: 0 12px;\n\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      pre {\n        border: none;\n        border-radius: ", "px;\n      }\n\n      > :not([data-code-type='highlighter']) code {\n        padding: 2px 6px;\n\n        font-size: ", "px;\n        color: ", ";\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\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: 0;\n        margin-inline-end: 0;\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\n            &:first-child {\n              border-top-left-radius: ", "px;\n              border-bottom-left-radius: ", "px;\n            }\n\n            &:last-child {\n              border-top-right-radius: ", "px;\n              border-bottom-right-radius: ", "px;\n            }\n          }\n        }\n      }\n\n      li {\n        line-height: 1.8;\n\n        &::marker {\n          color: ", ";\n        }\n      }\n\n      details {\n        margin-bottom: 1em;\n        padding: 12px 16px;\n\n        background: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n\n        transition: all 400ms ", ";\n      }\n\n      details[open] {\n        summary {\n          padding-bottom: 12px;\n          border-bottom: 1px solid ", ";\n        }\n      }\n    "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.borderRadius, token.fontSizeSM, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, token.colorFillTertiary, token.colorBorderSecondary, token.borderRadiusLG, token.motionEaseOut, token.colorBorder),
     noScrollbar: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      ::-webkit-scrollbar {\n        display: none;\n        width: 0;\n        height: 0;\n        background-color: transparent;\n      }\n    "]))),
     resetLinkColor: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorTextSecondary, token.colorText)
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.34.0",
+  "version": "1.35.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",
@@ -28,17 +28,15 @@
   ],
   "scripts": {
     "build": "father build",
-    "build:theme": "npm run build --prefix=packages/dumi-theme-lobehub",
     "build:watch": "father dev",
     "ci": "npm run lint && npm run type-check",
-    "clean": "rm -r es lib dist coverage .dumi/tmp .eslintcache node_modules/.cache packages/dumi-theme-lobehub/dist packages/dumi-theme-lobehub/node_modules/.cache",
+    "clean": "rm -r es lib dist coverage .dumi/tmp .eslintcache node_modules/.cache",
     "dev": "dumi dev",
-    "dev:theme": "npm run dev --prefix=packages/dumi-theme-lobehub",
-    "docs:build": "npm run build:theme && dumi build",
+    "docs:build": "dumi build",
     "doctor": "father doctor",
-    "lint": "eslint \"{src,tests,packages}/**/*.{js,jsx,ts,tsx}\" --fix",
+    "lint": "eslint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix",
     "lint:md": "remark . --quiet --frail --output",
-    "lint:style": "stylelint \"{src,tests,packages}/**/*.{js,jsx,ts,tsx}\" --fix",
+    "lint:style": "stylelint \"{src,tests}/**/*.{js,jsx,ts,tsx}\" --fix",
     "prepare": "husky install && npm run setup",
     "prepublishOnly": "father doctor && npm run build",
     "prettier": "prettier -c --write --no-error-on-unmatched-pattern \"**/**\"",
@@ -116,18 +114,18 @@
     "@types/react-dom": "^18",
     "@vitest/coverage-v8": "latest",
     "antd-style": "^3",
+    "babel-plugin-antd-style": "latest",
     "commitlint": "^17",
     "concurrently": "^8",
     "cross-env": "^7",
     "dumi": "^2",
-    "dumi-assets-types": "^1",
-    "dumi-theme-lobehub": "workspace:latest",
+    "dumi-theme-lobehub": "latest",
     "eslint": "^8",
     "father": "^4",
     "husky": "^8",
     "jsdom": "^22",
     "lint-staged": "^13",
-    "prettier": "^2",
+    "prettier": "^3",
     "react": "^18",
     "react-dom": "^18",
     "remark": "^14",