@lobehub/ui 1.151.1 → 1.151.3

package/es/mdx/Card.d.ts

@@ -1,3 +1,4 @@
+import { TagProps } from 'antd';
 import { FC } from 'react';
 import { type FlexboxProps } from 'react-layout-kit';
 import { type IconProps } from "../Icon";
@@ -7,6 +8,8 @@ export interface CardProps extends Omit<FlexboxProps, 'children'> {
     icon?: IconProps['icon'];
     iconProps?: Omit<IconProps, 'icon'>;
     image?: string;
+    tag?: string;
+    tagColor?: TagProps['color'];
     title: string;
 }
 declare const Card: FC<CardProps>;

package/es/mdx/Card.js

@@ -3,8 +3,9 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["icon", "title", "desc", "href", "iconProps", "className", "image"];
+var _excluded = ["tag", "tagColor", "icon", "title", "desc", "href", "iconProps", "className", "image"];
 var _templateObject, _templateObject2, _templateObject3;
+import { Tag } from 'antd';
 import { createStyles } from 'antd-style';
 import { Flexbox } from 'react-layout-kit';
 import A from "../A";
@@ -18,13 +19,16 @@ var useStyles = createStyles(function (_ref) {
     token = _ref.token;
   var icon = cx(css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin-block: 0.1em;\n    opacity: 0.5;\n    transition: opacity 0.2s ", ";\n  "])), token.motionEaseInOut));
   return {
-    card: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      --lobe-markdown-header-multiple: 0;\n      --lobe-markdown-margin-multiple: 1;\n\n      overflow: hidden;\n\n      height: 100%;\n\n      color: ", ";\n\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n      transition: all 0.2s ", ";\n\n      h3,\n      p {\n        margin-block: 0;\n      }\n\n      p {\n        color: ", ";\n        transition: color 0.2s ", ";\n      }\n\n      &:hover {\n        background: ", ";\n        box-shadow: 0 0 0 1px ", ";\n\n        p {\n          color: ", ";\n        }\n\n        .", " {\n          opacity: 1;\n        }\n      }\n    "])), token.colorText, token.motionEaseInOut, token.colorTextDescription, token.motionEaseInOut, token.colorFillQuaternary, token.colorBorder, token.colorTextSecondary, icon),
-    content: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      gap: 0.75em;\n      width: 100%;\n      padding: 1em;\n    "]))),
+    card: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      --lobe-markdown-header-multiple: 0.2;\n      --lobe-markdown-margin-multiple: 1;\n\n      overflow: hidden;\n\n      height: 100%;\n\n      color: ", ";\n\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n\n      transition: all 0.2s ", ";\n\n      h3,\n      p {\n        margin-block: 0;\n      }\n\n      p {\n        color: ", ";\n        transition: color 0.2s ", ";\n      }\n\n      &:hover {\n        background: ", ";\n        box-shadow: 0 0 0 1px ", ";\n\n        p {\n          color: ", ";\n        }\n\n        .", " {\n          opacity: 1;\n        }\n      }\n    "])), token.colorText, token.motionEaseInOut, token.colorTextDescription, token.motionEaseInOut, token.colorFillQuaternary, token.colorBorder, token.colorTextSecondary, icon),
+    content: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      width: 100%;\n      padding: 1.4em;\n    "]))),
     icon: icon
   };
 });
 var Card = function Card(_ref2) {
-  var icon = _ref2.icon,
+  var tag = _ref2.tag,
+    _ref2$tagColor = _ref2.tagColor,
+    tagColor = _ref2$tagColor === void 0 ? 'blue' : _ref2$tagColor,
+    icon = _ref2.icon,
     title = _ref2.title,
     desc = _ref2.desc,
     href = _ref2.href,
@@ -50,25 +54,45 @@ var Card = function Card(_ref2) {
           width: '100%'
         },
         width: 250
-      }), /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+      }), tag && /*#__PURE__*/_jsx(Flexbox, {
+        align: 'flex-start',
+        className: styles.content,
+        style: {
+          paddingBottom: '0.2em',
+          paddingTop: '1.8em'
+        },
+        children: /*#__PURE__*/_jsx(Tag, {
+          bordered: false,
+          color: tagColor,
+          style: {
+            borderRadius: '1em',
+            fontSize: '0.8em',
+            fontWeight: 500,
+            paddingBlock: '0.1em',
+            paddingInline: '0.6em'
+          },
+          children: tag
+        })
+      }), /*#__PURE__*/_jsxs(Flexbox, {
         align: desc ? 'flex-start' : 'center',
         className: styles.content,
-        horizontal: true
-      }, rest), {}, {
+        gap: '0.75em',
+        horizontal: true,
         children: [!image && icon && /*#__PURE__*/_jsx(Icon, _objectSpread({
           className: styles.icon,
           icon: icon,
           size: {
             fontSize: '1.5em'
           }
-        }, iconProps)), /*#__PURE__*/_jsxs("div", {
+        }, iconProps)), /*#__PURE__*/_jsxs(Flexbox, {
+          gap: '0.2em',
           children: [/*#__PURE__*/_jsx("h3", {
             children: title
           }), desc && /*#__PURE__*/_jsx("p", {
             children: desc
           })]
         })]
-      }))]
+      })]
     }))
   });
 };

package/package.json

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