@lobehub/ui 1.63.0 → 1.64.0

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.63.0",
+  "version": "1.64.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",