@lobehub/ui 1.62.0 → 1.64.0

package/es/ChatItem/style.d.ts

@@ -10,7 +10,7 @@ export declare const useStyles: (props?: {
     alert: import("antd-style").SerializedStyles;
     avatarContainer: import("antd-style").SerializedStyles;
     container: string;
-    editingContainer: import("antd-style").SerializedStyles;
+    editingContainer: string;
     editingInput: import("antd-style").SerializedStyles;
     loading: import("antd-style").SerializedStyles;
     message: string;

package/es/ChatItem/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref, _ref2) {
@@ -15,20 +15,20 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     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 ? isDarkMode ? token.colorFill : rgba(token.colorPrimary, 0.08) : isDarkMode ? token.colorFillSecondary : token.colorBgContainer, 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 pureContainerStylish = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      margin-bottom: -16px;\n      transition: background-color 100ms ", ";\n    "])), token.motionEaseOut);
   var typeStylish = type === 'block' ? blockStylish : pureStylish;
   return {
     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)),
-    editingContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        padding: 8px 12px 12px;\n        border: 1px solid ", ";\n\n        &:active,\n        &:hover {\n          border-color: ", ";\n        }\n      "])), token.colorBorderSecondary, token.colorBorder),
-    editingInput: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        min-height: 80px;\n      "]))),
-    loading: css(_templateObject10 || (_templateObject10 = _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(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
-    messageContainer: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: ", ";\n      "])), placement === 'left' ? 'flex-start' : 'flex-end'),
-    messageContent: css(_templateObject13 || (_templateObject13 = _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'),
+    editingContainer: cx(css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          padding: 8px 12px 12px;\n          border: 1px solid ", ";\n\n          &:active,\n          &:hover {\n            border-color: ", ";\n          }\n        "])), token.colorBorderSecondary, token.colorBorder), type === 'pure' && css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n            background: ", ";\n            border-radius: ", "px;\n          "])), token.colorFillQuaternary, token.borderRadius)),
+    editingInput: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        min-height: 32px;\n      "]))),
+    loading: css(_templateObject11 || (_templateObject11 = _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(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          position: relative;\n        "])))),
+    messageContainer: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        align-items: ", ";\n      "])), placement === 'left' ? 'flex-start' : 'flex-end'),
+    messageContent: css(_templateObject14 || (_templateObject14 = _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'),
     messageExtra: cx('message-extra'),
-    name: css(_templateObject14 || (_templateObject14 = _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')
+    name: css(_templateObject15 || (_templateObject15 = _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/EditableMessage/index.js

@@ -49,7 +49,8 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
       setTyping(false);
     },
     placeholder: placeholder,
-    style: styles === null || styles === void 0 ? void 0 : styles.input
+    style: styles === null || styles === void 0 ? void 0 : styles.input,
+    text: text
   }) : /*#__PURE__*/_jsxs(_Fragment, {
     children: [!expand && isEdit ? /*#__PURE__*/_jsx(MessageInput, {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.input,
@@ -63,7 +64,8 @@ var EditableMessage = /*#__PURE__*/memo(function (_ref) {
         setTyping(false);
       },
       placeholder: placeholder,
-      style: styles === null || styles === void 0 ? void 0 : styles.input
+      style: styles === null || styles === void 0 ? void 0 : styles.input,
+      text: text
     }) : /*#__PURE__*/_jsx(Markdown, {
       className: classNames === null || classNames === void 0 ? void 0 : classNames.markdown,
       style: styles === null || styles === void 0 ? void 0 : styles.markdown,

package/es/List/ListItem/index.d.ts

@@ -3,10 +3,15 @@ import { CSSProperties, HTMLAttributes, ReactNode } from 'react';
  * 卡片列表项的属性
  */
 export interface ListItemProps {
+    /**
+     * 渲染操作区域的 React 节点
+     */
+    actions?: ReactNode;
     /**
      * 是否处于激活状态
      */
     active: boolean;
+    addon?: ReactNode;
     /**
      * 头像的 React 节点
      */
@@ -43,10 +48,7 @@ export interface ListItemProps {
      * @param hover - 是否悬停
      */
     onHoverChange?: (hover: boolean) => void;
-    /**
-     * 渲染操作区域的 React 节点
-     */
-    renderActions?: ReactNode;
+    pin?: boolean;
     /**
      * 是否显示操作区域
      */
@@ -60,5 +62,5 @@ export interface ListItemProps {
      */
     title: ReactNode;
 }
-declare const ListItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ListItemProps & HTMLAttributes<any> & import("react").RefAttributes<HTMLElement>>>;
+declare const ListItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ListItemProps & HTMLAttributes<any> & import("react").RefAttributes<HTMLDivElement>>>;
 export default ListItem;

package/es/List/ListItem/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["active", "avatar", "loading", "description", "date", "title", "onHoverChange", "renderActions", "className", "style", "showAction", "children", "classNames"];
+var _excluded = ["active", "avatar", "loading", "description", "date", "title", "onHoverChange", "actions", "className", "style", "showAction", "children", "classNames", "pin"];
 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 { LoadingOutlined, MessageOutlined } from '@ant-design/icons';
@@ -14,7 +14,7 @@ import { getChatItemTime } from "./time";
  */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, reference) {
+var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var active = _ref.active,
     avatar = _ref.avatar,
     loading = _ref.loading,
@@ -22,31 +22,31 @@ var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, refere
     date = _ref.date,
     title = _ref.title,
     onHoverChange = _ref.onHoverChange,
-    renderActions = _ref.renderActions,
+    actions = _ref.actions,
     className = _ref.className,
     style = _ref.style,
     showAction = _ref.showAction,
     children = _ref.children,
     _ref$classNames = _ref.classNames,
     classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
+    pin = _ref.pin,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useStyles = useStyles(),
+  var _useStyles = useStyles(pin),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
     className: cx(styles.container, active && styles.active, className),
-    ref: reference,
-    style: style
-  }, props), {}, {
     onMouseEnter: function onMouseEnter() {
       onHoverChange === null || onHoverChange === void 0 ? void 0 : onHoverChange(true);
     },
     onMouseLeave: function onMouseLeave() {
       onHoverChange === null || onHoverChange === void 0 ? void 0 : onHoverChange(false);
     },
+    ref: ref,
+    style: style
+  }, props), {}, {
     children: /*#__PURE__*/_jsxs(Flexbox, {
       align: 'flex-start',
-      className: styles.inner,
       distribution: 'space-between',
       gap: 8,
       horizontal: true,
@@ -72,15 +72,17 @@ var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, refere
       }), loading ? /*#__PURE__*/_jsx(LoadingOutlined, {
         spin: true
       }) : showAction ? /*#__PURE__*/_jsx(Flexbox, {
+        className: styles.actions,
         gap: 4,
         horizontal: true,
         onClick: function onClick(e) {
+          e.preventDefault();
           e.stopPropagation();
         },
         style: {
           display: showAction ? undefined : 'none'
         },
-        children: renderActions
+        children: actions
       }) : date && /*#__PURE__*/_jsx("div", {
         className: cx(styles.time, classNames.time),
         children: getChatItemTime(date)

package/es/List/ListItem/style.d.ts

@@ -1,9 +1,10 @@
-export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+export declare const useStyles: (props?: boolean | undefined) => import("antd-style").ReturnStyles<{
+    actions: import("antd-style").SerializedStyles;
     active: import("antd-style").SerializedStyles;
     container: import("antd-style").SerializedStyles;
     content: import("antd-style").SerializedStyles;
     desc: import("antd-style").SerializedStyles;
-    inner: import("antd-style").SerializedStyles;
+    pin: import("antd-style").SerializedStyles;
     time: import("antd-style").SerializedStyles;
     title: import("antd-style").SerializedStyles;
 }>;

package/es/List/ListItem/style.js

@@ -1,16 +1,17 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import { createStyles } from 'antd-style';
-export var useStyles = createStyles(function (_ref) {
+export var useStyles = createStyles(function (_ref, pin) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), token.colorText, token.colorFillTertiary, token.colorFill),
-    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n      transition: background-color 200ms ", ";\n\n      &:active {\n        background-color: ", " !important;\n      }\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), token.colorTextTertiary, token.motionEaseOut, token.colorFill, token.colorFillSecondary),
-    content: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n    "]))),
-    desc: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n      margin-top: 2px;\n\n      font-size: 12px;\n      color: ", ";\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])), token.colorTextDescription),
-    inner: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      transition: scale 400ms ", ";\n\n      &:active {\n        scale: 0.95;\n      }\n    "])), token.motionEaseOut),
-    time: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      font-size: 12px;\n      color: ", ";\n    "])), token.colorTextPlaceholder),
-    title: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n\n      font-size: 16px;\n      color: ", ";\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])), token.colorText)
+    actions: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n      top: 50%;\n      right: 16px;\n      transform: translateY(-50%);\n    "]))),
+    active: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), token.colorText, token.colorFillSecondary, token.colorFill),
+    container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n      background: ", ";\n      transition: background-color 200ms ", ";\n\n      &:active {\n        background-color: ", " !important;\n      }\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), token.colorTextTertiary, pin ? token.colorFillTertiary : 'transparent', token.motionEaseOut, pin ? token.colorFill : token.colorFillSecondary, pin ? token.colorFill : token.colorFillTertiary),
+    content: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n    "]))),
+    desc: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n      margin-top: 2px;\n\n      font-size: 12px;\n      color: ", ";\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])), token.colorTextDescription),
+    pin: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      background-color: ", ";\n    "])), token.colorFillTertiary),
+    time: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      font-size: 12px;\n      color: ", ";\n    "])), token.colorTextPlaceholder),
+    title: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n\n      font-size: 16px;\n      color: ", ";\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])), token.colorText)
   };
 });

package/es/List/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 declare const List: {
-    Item: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./ListItem").ListItemProps & import("react").HTMLAttributes<any> & import("react").RefAttributes<HTMLElement>>>;
+    Item: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<import("./ListItem").ListItemProps & import("react").HTMLAttributes<any> & import("react").RefAttributes<HTMLDivElement>>>;
 };
 export default List;

package/es/TokenTag/index.d.ts

@@ -4,14 +4,16 @@ export interface TokenTagProps extends DivProps {
     /**
      * @default 'left'
      */
-    displayMode?: 'left' | 'used';
+    displayMode?: 'remained' | 'used';
     /**
      * @description Maximum value for the token
      */
     maxValue: number;
     text?: {
         overload?: string;
+        remained?: string;
         tokens?: string;
+        used?: string;
     };
     /**
      * @description Current value of the token

package/es/TokenTag/index.js

@@ -3,7 +3,8 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["className", "displayMode", "maxValue", "value", "text"];
 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 { forwardRef } from 'react';
+import { useHover } from 'ahooks';
+import { forwardRef, useRef } from 'react';
 import FluentEmoji from "../FluentEmoji";
 import { ICON_SIZE, useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -11,11 +12,13 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
     _ref$displayMode = _ref.displayMode,
-    displayMode = _ref$displayMode === void 0 ? 'left' : _ref$displayMode,
+    displayMode = _ref$displayMode === void 0 ? 'remained' : _ref$displayMode,
     maxValue = _ref.maxValue,
     value = _ref.value,
     text = _ref.text,
     props = _objectWithoutProperties(_ref, _excluded);
+  var reference = useRef(ref);
+  var isHovering = useHover(reference);
   var valueLeft = maxValue - value;
   var percent = valueLeft / maxValue;
   var type;
@@ -35,12 +38,12 @@ var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     cx = _useStyles.cx;
   return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
     className: cx(styles.container, className),
-    ref: ref
+    ref: reference
   }, props), {}, {
     children: [/*#__PURE__*/_jsx(FluentEmoji, {
       emoji: emoji,
       size: ICON_SIZE
-    }), valueLeft > 0 ? (text === null || text === void 0 ? void 0 : text.tokens) || "Tokens ".concat(displayMode === 'left' ? valueLeft : value) : (text === null || text === void 0 ? void 0 : text.overload) || 'Overload']
+    }), valueLeft > 0 ? [displayMode === 'remained' ? (text === null || text === void 0 ? void 0 : text.remained) || 'Remained' : (text === null || text === void 0 ? void 0 : text.used) || 'Used', displayMode === 'remained' ? valueLeft : value, isHovering ? (text === null || text === void 0 ? void 0 : text.tokens) || 'Tokens' : ''].join(' ') : (text === null || text === void 0 ? void 0 : text.overload) || 'Overload']
   }));
 });
 export default TokenTag;

package/es/TokenTag/style.js

@@ -26,6 +26,6 @@ export var useStyles = createStyles(function (_ref, type) {
       }
   }
   return {
-    container: cx(percentStyle, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        user-select: none;\n\n        overflow: hidden;\n        display: flex;\n        gap: 4px;\n        align-items: center;\n\n        height: ", "px;\n        padding: 0 ", "px 0 ", "px;\n\n        font-family: ", ";\n\n        background: ", ";\n        border-radius: ", "px;\n      "])), HEIGHT, (HEIGHT - ICON_SIZE) * 1.2, (HEIGHT - ICON_SIZE) / 2, token.fontFamilyCode, token.colorFillSecondary, HEIGHT / 2))
+    container: cx(percentStyle, css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        user-select: none;\n\n        overflow: hidden;\n        display: flex;\n        flex: 0;\n        gap: 4px;\n        align-items: center;\n\n        min-width: fit-content;\n        height: ", "px;\n        padding: 0 ", "px 0 ", "px;\n\n        font-family: ", ";\n        font-size: 13px;\n        line-height: 1;\n\n        background: ", ";\n        border-radius: ", "px;\n      "])), HEIGHT, (HEIGHT - ICON_SIZE) * 1.2, (HEIGHT - ICON_SIZE) / 2, token.fontFamilyCode, token.colorFillSecondary, HEIGHT / 2))
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.62.0",
+  "version": "1.64.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",