@lobehub/ui 1.57.0 → 1.59.0

package/es/ActionIcon/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { LucideIcon } from 'lucide-react';
+import { type IconProps } from "../Icon";
 import { type TooltipProps } from "../Tooltip";
 import { DivProps } from "../types";
 export type ActionIconSize = 'large' | 'normal' | 'small' | 'site' | {
@@ -19,6 +19,8 @@ export interface ActionIconProps extends DivProps {
      * @default false
      */
     arrow?: boolean;
+    color?: IconProps['color'];
+    fill?: IconProps['fill'];
     /**
      * @description Glass blur style
      * @default 'false'
@@ -28,7 +30,7 @@ export interface ActionIconProps extends DivProps {
      * @description The icon element to be rendered
      * @type LucideIcon
      */
-    icon?: LucideIcon;
+    icon?: IconProps['icon'];
     /**
      * @description Set the loading status of ActionIcon
      */

package/es/ActionIcon/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow", "spotlight", "onClick", "children", "loading", "tooltipDelay"];
+var _excluded = ["color", "fill", "className", "active", "icon", "size", "style", "glass", "title", "placement", "arrow", "spotlight", "onClick", "children", "loading", "tooltipDelay"];
 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 { Loader2 } from 'lucide-react';
@@ -53,7 +53,9 @@ var calcSize = function calcSize(size) {
   };
 };
 var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var className = _ref.className,
+  var color = _ref.color,
+    fill = _ref.fill,
+    className = _ref.className,
     active = _ref.active,
     icon = _ref.icon,
     _ref$size = _ref.size,
@@ -84,11 +86,14 @@ var ActionIcon = /*#__PURE__*/forwardRef(function (_ref, ref) {
     borderRadius = _useMemo.borderRadius;
   var content = /*#__PURE__*/_jsxs(_Fragment, {
     children: [icon && /*#__PURE__*/_jsx(Icon, {
+      color: color,
+      fill: fill,
       icon: icon,
       size: size === 'site' ? 'normal' : size
     }), children]
   });
   var spin = /*#__PURE__*/_jsx(Icon, {
+    color: color,
     icon: Loader2,
     size: size === 'site' ? 'normal' : size,
     spin: true

package/es/Icon/index.d.ts

@@ -6,6 +6,8 @@ export type IconSize = 'large' | 'normal' | 'small' | {
     strokeWidth?: number;
 };
 export interface IconProps extends DivProps {
+    color?: string;
+    fill?: string;
     /**
      * @description The icon element to be rendered
      * @type LucideIcon

package/es/Icon/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["icon", "size", "className", "spin"];
+var _excluded = ["icon", "size", "color", "fill", "className", "spin"];
 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 { memo, useMemo } from 'react';
@@ -48,6 +48,8 @@ var calcSize = function calcSize(size) {
 var Icon = /*#__PURE__*/memo(function (_ref) {
   var icon = _ref.icon,
     size = _ref.size,
+    color = _ref.color,
+    fill = _ref.fill,
     className = _ref.className,
     spin = _ref.spin,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -65,6 +67,8 @@ var Icon = /*#__PURE__*/memo(function (_ref) {
     role: "img"
   }, props), {}, {
     children: /*#__PURE__*/_jsx(SvgIcon, {
+      color: color,
+      fill: fill !== null && fill !== void 0 ? fill : 'transparent',
       focusable: false,
       height: fontSize,
       size: fontSize,

package/es/List/ListItem/index.js

@@ -33,14 +33,8 @@ var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, refere
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx;
-  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
-    align: 'flex-start',
+  return /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
     className: cx(styles.container, active && styles.active, className),
-    distribution: 'space-between',
-    gap: 8,
-    horizontal: true,
-    paddingBlock: 12,
-    paddingInline: 16,
     ref: reference,
     style: style
   }, props), {}, {
@@ -50,41 +44,48 @@ var ListItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, refere
     onMouseLeave: function onMouseLeave() {
       onHoverChange === null || onHoverChange === void 0 ? void 0 : onHoverChange(false);
     },
-    children: [avatar !== null && avatar !== void 0 ? avatar : /*#__PURE__*/_jsx(MessageOutlined, {
-      style: {
-        marginTop: 4
-      }
-    }), /*#__PURE__*/_jsxs(Flexbox, {
-      className: styles.content,
-      children: [/*#__PURE__*/_jsx(Flexbox, {
-        distribution: 'space-between',
-        horizontal: true,
-        children: /*#__PURE__*/_jsx("div", {
-          className: styles.title,
-          children: title
-        })
-      }), description && /*#__PURE__*/_jsx("div", {
-        className: styles.desc,
-        children: description
-      }), /*#__PURE__*/_jsx("div", {
-        className: styles.textOverlay
-      })]
-    }), loading ? /*#__PURE__*/_jsx(LoadingOutlined, {
-      spin: true
-    }) : showAction ? /*#__PURE__*/_jsx(Flexbox, {
-      gap: 4,
+    children: /*#__PURE__*/_jsxs(Flexbox, {
+      align: 'flex-start',
+      className: styles.inner,
+      distribution: 'space-between',
+      gap: 8,
       horizontal: true,
-      onClick: function onClick(e) {
-        e.stopPropagation();
-      },
-      style: {
-        display: showAction ? undefined : 'none'
-      },
-      children: renderActions
-    }) : date && /*#__PURE__*/_jsx("div", {
-      className: cx(styles.time, classNames.time),
-      children: getChatItemTime(date)
-    }), children]
+      paddingBlock: 12,
+      paddingInline: 16,
+      children: [avatar !== null && avatar !== void 0 ? avatar : /*#__PURE__*/_jsx(MessageOutlined, {
+        style: {
+          marginTop: 4
+        }
+      }), /*#__PURE__*/_jsxs(Flexbox, {
+        className: styles.content,
+        children: [/*#__PURE__*/_jsx(Flexbox, {
+          distribution: 'space-between',
+          horizontal: true,
+          children: /*#__PURE__*/_jsx("div", {
+            className: styles.title,
+            children: title
+          })
+        }), description && /*#__PURE__*/_jsx("div", {
+          className: styles.desc,
+          children: description
+        })]
+      }), loading ? /*#__PURE__*/_jsx(LoadingOutlined, {
+        spin: true
+      }) : showAction ? /*#__PURE__*/_jsx(Flexbox, {
+        gap: 4,
+        horizontal: true,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+        },
+        style: {
+          display: showAction ? undefined : 'none'
+        },
+        children: renderActions
+      }) : date && /*#__PURE__*/_jsx("div", {
+        className: cx(styles.time, classNames.time),
+        children: getChatItemTime(date)
+      }), children]
+    })
   }));
 }));
 export default ListItem;

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

@@ -3,7 +3,7 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
     container: import("antd-style").SerializedStyles;
     content: import("antd-style").SerializedStyles;
     desc: import("antd-style").SerializedStyles;
-    textOverlay: import("antd-style").SerializedStyles;
+    inner: import("antd-style").SerializedStyles;
     time: import("antd-style").SerializedStyles;
     title: import("antd-style").SerializedStyles;
 }>;

package/es/List/ListItem/style.js

@@ -1,21 +1,16 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 import { createStyles } from 'antd-style';
-import { convertAlphaToSolid } from "../../utils/colorUtils";
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
-    cx = _ref.cx,
     token = _ref.token;
-  var textOverlay = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    --overlay-background: ", ";\n\n    position: absolute;\n    z-index: 10;\n    top: 0;\n    right: 0;\n\n    width: 32px;\n    height: 44px;\n\n    background: linear-gradient(to right, transparent, var(--overlay-background));\n  "])), token.colorBgContainer);
-  var overlayColor = convertAlphaToSolid(token.colorFillContent, token.colorBgContainer);
-  var hoverOverlay = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .", " {\n      --overlay-background: ", ";\n    }\n  "])), cx(textOverlay), overlayColor);
   return {
-    active: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      color: ", ";\n      background: ", ";\n\n      ", "\n    "])), token.colorText, token.colorFillContent, hoverOverlay),
-    container: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        ", "\n      }\n    "])), token.colorTextTertiary, token.colorFillContent, hoverOverlay),
-    content: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n    "]))),
-    desc: css(_templateObject6 || (_templateObject6 = _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),
-    textOverlay: textOverlay,
-    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      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])))
+    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)
   };
 });

package/package.json

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