@lobehub/ui 1.132.6 → 1.133.0

package/es/A/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { AnchorProps } from 'antd';
+import { AProps } from "../types";
+declare const A: import("react").ForwardRefExoticComponent<AProps & AnchorProps & import("react").RefAttributes<any>>;
+export default A;

package/es/A/index.js

@@ -0,0 +1,23 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { createElement, forwardRef, useContext, useMemo } from 'react';
+import { ConfigContext } from "../ConfigProvider";
+import { jsx as _jsx } from "react/jsx-runtime";
+var createContainer = function createContainer(as) {
+  return /*#__PURE__*/forwardRef(function (props, ref) {
+    return /*#__PURE__*/createElement(as, _objectSpread(_objectSpread({}, props), {}, {
+      ref: ref
+    }));
+  });
+};
+var A = /*#__PURE__*/forwardRef(function (props, ref) {
+  var config = useContext(ConfigContext);
+  var AContainer = useMemo(function () {
+    return createContainer((config === null || config === void 0 ? void 0 : config.aAs) || 'a');
+  }, [config]);
+  return /*#__PURE__*/_jsx(AContainer, _objectSpread({
+    ref: ref
+  }, props));
+});
+export default A;

package/es/ConfigProvider/index.d.ts

@@ -2,6 +2,7 @@ import { ElementType, ReactNode } from 'react';
 import { CDN, CdnApi } from "../utils/genCdnUrl";
 type CdnFn = ({ pkg, version, path }: CdnApi) => string;
 export interface Config {
+    aAs?: ElementType;
     customCdnFn?: CdnFn;
     imgAs?: ElementType;
     proxy?: CDN | 'custom';

package/es/CopyButton/index.js

@@ -5,7 +5,7 @@ var _excluded = ["content", "className", "placement", "size"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { Copy } from 'lucide-react';
+import { Check, Copy } from 'lucide-react';
 import { memo } from 'react';
 import ActionIcon from "../ActionIcon";
 import { useCopied } from "../hooks/useCopied";
@@ -23,9 +23,10 @@ var CopyButton = /*#__PURE__*/memo(function (_ref) {
     copied = _useCopied.copied,
     setCopied = _useCopied.setCopied;
   return /*#__PURE__*/_jsx(ActionIcon, _objectSpread(_objectSpread({}, rest), {}, {
+    active: copied,
     className: className,
     glass: true,
-    icon: Copy,
+    icon: copied ? Check : Copy,
     onClick: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -42,7 +43,7 @@ var CopyButton = /*#__PURE__*/memo(function (_ref) {
     })),
     placement: placement,
     size: size,
-    title: copied ? '✅ Success' : 'Copy'
+    title: 'Copy'
   }));
 });
 export default CopyButton;

package/es/Highlighter/FullFeatured.js

@@ -5,7 +5,6 @@ var _excluded = ["children", "language", "className", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { Select } from 'antd';
-import { useResponsive } from 'antd-style';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { memo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
@@ -29,8 +28,6 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
     className = _ref.className,
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _useResponsive = useResponsive(),
-    mobile = _useResponsive.mobile;
   var _useState = useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     expand = _useState2[0],
@@ -63,10 +60,7 @@ export var Highlighter = /*#__PURE__*/memo(function (_ref) {
           fontSize: 14,
           strokeWidth: 3
         }
-      }), mobile ? /*#__PURE__*/_jsx("span", {
-        className: styles.select,
-        children: lang.toLowerCase()
-      }) : /*#__PURE__*/_jsx(Select, {
+      }), /*#__PURE__*/_jsx(Select, {
         className: styles.select,
         onSelect: setLang,
         options: options,

package/es/Markdown/CodeBlock.js

@@ -18,9 +18,9 @@ var useCode = function useCode(raw) {
     children = _raw$props.children,
     className = _raw$props.className;
   if (!children) return;
-  var content = Array.isArray(children) ? children[0] : children;
+  var content = (Array.isArray(children) ? children[0] : children).trim();
   var lang = (className === null || className === void 0 ? void 0 : className.replace('language-', '')) || FALLBACK_LANG;
-  var isSingleLine = countLines(content) <= 1 && content.length <= 6;
+  var isSingleLine = countLines(content) <= 1 && content.length <= 48;
   return {
     content: content,
     isSingleLine: isSingleLine,

package/es/Markdown/index.js

@@ -68,7 +68,9 @@ var Markdown = /*#__PURE__*/memo(function (_ref) {
     className: className,
     "data-code-type": "markdown",
     onDoubleClick: onDoubleClick,
-    style: style,
+    style: _objectSpread({
+      overflow: 'hidden'
+    }, style),
     children: /*#__PURE__*/_jsx(ImageGallery, {
       enable: enableImageGallery,
       children: /*#__PURE__*/_jsx(ReactMarkdown, _objectSpread(_objectSpread({

package/es/Markdown/markdown.style.js

@@ -1,6 +1,7 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 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) {
   var token = _ref.token,
     isDarkMode = _ref.isDarkMode,
@@ -14,20 +15,20 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     _ref2$lineHeight = _ref2.lineHeight,
     lineHeight = _ref2$lineHeight === void 0 ? 1.8 : _ref2$lineHeight;
   return {
-    __root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        --lobe-markdown-font-size: ", "px;\n        --lobe-markdown-header-multiple: ", ";\n        --lobe-markdown-margin-multiple: ", ";\n        --lobe-markdown-line-height: ", ";\n        --lobe-markdown-border-radius: ", ";\n\n        position: relative;\n\n        width: 100%;\n\n        font-size: var(--lobe-markdown-font-size);\n        line-height: var(--lobe-markdown-line-height);\n        word-break: break-word;\n      "])), fontSize, headerMultiple, marginMultiple, lineHeight, token.borderRadiusLG),
+    __root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        --lobe-markdown-font-size: ", "px;\n        --lobe-markdown-header-multiple: ", ";\n        --lobe-markdown-margin-multiple: ", ";\n        --lobe-markdown-line-height: ", ";\n        --lobe-markdown-border-radius: ", ";\n        --lobe-markdown-border-color: ", ";\n\n        position: relative;\n\n        width: 100%;\n\n        font-size: var(--lobe-markdown-font-size);\n        line-height: var(--lobe-markdown-line-height);\n        word-break: break-word;\n      "])), fontSize, headerMultiple, marginMultiple, lineHeight, token.borderRadiusLG, isDarkMode ? token.colorBorderSecondary : rgba(token.colorBorderSecondary, 0.5)),
     a: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        a {\n          color: ", ";\n\n          &:hover {\n            color: ", ";\n          }\n        }\n      "])), token.colorInfoText, token.colorInfoHover),
     blockquote: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        blockquote {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          margin-inline: 0;\n          padding-block: 0;\n          padding-inline: 1em;\n\n          color: ", ";\n\n          border-inline-start: solid 4px ", ";\n        }\n      "])), token.colorTextSecondary, token.colorBorder),
-    code: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        code:not(:has(span)) {\n          display: inline-block;\n\n          padding-block: 0.2em;\n          padding-inline: 0.4em;\n\n          font-family: ", ";\n          font-size: 0.875em;\n          line-height: 1;\n          word-break: break-word;\n\n          background: ", ";\n          border: 1px solid ", ";\n          border-radius: 0.25em;\n        }\n      "])), token.fontFamilyCode, token.colorFillSecondary, token.colorBorderSecondary),
-    details: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        details {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          padding-block: 0.75em;\n          padding-inline: 1em;\n\n          background: ", ";\n          border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n          box-shadow: inset 0 0 0 1px ", ";\n\n          summary {\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            list-style: none;\n\n            &::before {\n              content: '';\n\n              position: absolute;\n              inset-inline-end: 1.25em;\n              transform: rotateZ(-45deg);\n\n              display: block;\n\n              width: 0.4em;\n              height: 0.4em;\n\n              font-family: ", ";\n\n              border-block-end: 1.5px solid ", ";\n              border-inline-end: 1.5px solid ", ";\n\n              transition: transform 200ms ", ";\n            }\n          }\n\n          &[open] {\n            summary {\n              padding-block-end: 0.75em;\n              border-block-end: 1px dashed ", ";\n\n              &::before {\n                transform: rotateZ(45deg);\n              }\n            }\n          }\n        }\n      "])), token.colorFillTertiary, token.colorBorderSecondary, token.fontFamily, token.colorTextSecondary, token.colorTextSecondary, token.motionEaseOut, token.colorBorder),
+    code: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        code:not(:has(span)) {\n          display: inline-block;\n\n          margin-inline: 0.25em;\n          padding-block: 0.2em;\n          padding-inline: 0.4em;\n\n          font-family: ", ";\n          font-size: 0.875em;\n          line-height: 1;\n          word-break: break-word;\n\n          background: ", ";\n          border: 1px solid var(--lobe-markdown-border-color);\n          border-radius: 0.25em;\n        }\n      "])), token.fontFamilyCode, token.colorFillSecondary),
+    details: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        details {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          padding-block: 0.75em;\n          padding-inline: 1em;\n\n          background: ", ";\n          border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n          box-shadow: inset 0 0 0 1px var(--lobe-markdown-border-color);\n\n          summary {\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            list-style: none;\n\n            &::before {\n              content: '';\n\n              position: absolute;\n              inset-inline-end: 1.25em;\n              transform: rotateZ(-45deg);\n\n              display: block;\n\n              width: 0.4em;\n              height: 0.4em;\n\n              font-family: ", ";\n\n              border-block-end: 1.5px solid ", ";\n              border-inline-end: 1.5px solid ", ";\n\n              transition: transform 200ms ", ";\n            }\n          }\n\n          &[open] {\n            summary {\n              padding-block-end: 0.75em;\n              border-block-end: 1px dashed ", ";\n\n              &::before {\n                transform: rotateZ(45deg);\n              }\n            }\n          }\n        }\n      "])), token.colorFillTertiary, token.fontFamily, token.colorTextSecondary, token.colorTextSecondary, token.motionEaseOut, token.colorBorder),
     header: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n        h1,\n        h2,\n        h3,\n        h4,\n        h5 {\n          margin-block: max(\n            calc(\n              var(--lobe-markdown-header-multiple) * var(--lobe-markdown-margin-multiple) * 0.4em\n            ),\n            var(--lobe-markdown-font-size)\n          );\n          font-weight: 600;\n        }\n\n        h1 {\n          font-size: calc(\n            var(--lobe-markdown-font-size) * (1 + 1.5 * var(--lobe-markdown-header-multiple))\n          );\n        }\n\n        h2 {\n          font-size: calc(\n            var(--lobe-markdown-font-size) * (1 + var(--lobe-markdown-header-multiple))\n          );\n        }\n\n        h3 {\n          font-size: calc(\n            var(--lobe-markdown-font-size) * (1 + 0.5 * var(--lobe-markdown-header-multiple))\n          );\n        }\n\n        h4 {\n          font-size: calc(\n            var(--lobe-markdown-font-size) * (1 + 0.25 * var(--lobe-markdown-header-multiple))\n          );\n        }\n\n        h5 {\n          font-size: calc(var(--lobe-markdown-font-size) * 1);\n        }\n      "]))),
     hr: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        hr {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1.5em);\n\n          border-color: ", ";\n          border-style: dashed;\n          border-width: 1px;\n          border-block-start: none;\n          border-inline-start: none;\n          border-inline-end: none;\n        }\n      "])), token.colorBorderSecondary),
-    img: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        img {\n          max-width: 100%;\n        }\n\n        > img,\n        > p > img {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n          box-shadow: 0 0 0 1px ", ";\n        }\n      "])), token.colorBorderSecondary),
+    img: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        img {\n          max-width: 100%;\n        }\n\n        > img,\n        > p > img {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n          box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n        }\n      "]))),
     kbd: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        kbd {\n          cursor: default;\n          user-select: none;\n\n          transform: translateY(-0.2em);\n\n          display: inline-block;\n\n          min-width: 1em;\n          margin-inline: 0.25em;\n          padding-block: 0.2em;\n          padding-inline: 0.4em;\n\n          font-family: ", ";\n          font-size: 0.875em;\n          font-weight: 500;\n          line-height: 1;\n          color: ", ";\n          text-align: center;\n\n          background: ", ";\n          border: 1px solid ", ";\n          border-radius: 0.25em;\n          box-shadow: 0 2px 0 1px ", ";\n\n          &:hover {\n            transform: translateY(0);\n            box-shadow: none;\n          }\n        }\n      "])), token.fontFamily, token.colorBgLayout, isDarkMode ? token.colorText : '#333', isDarkMode ? token.colorTextSecondary : '#000', isDarkMode ? token.colorTextSecondary : '#000'),
-    list: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        li {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.4em);\n        }\n\n        ul,\n        ol {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          margin-inline-start: 1em;\n          padding-inline-start: 0;\n          list-style-position: outside;\n\n          ul,\n          ol {\n            margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.4em);\n          }\n\n          li {\n            margin-inline-start: 1em;\n          }\n        }\n\n        ol {\n          list-style: auto;\n        }\n\n        ul {\n          list-style-type: none;\n\n          li {\n            &::before {\n              content: '-';\n              display: inline-block;\n              margin-inline: -1em 0.5em;\n              opacity: 0.5;\n            }\n          }\n        }\n      "]))),
+    list: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n        li {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 0.33em);\n        }\n\n        ul,\n        ol {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          margin-inline-start: 1em;\n          padding-inline-start: 0;\n          list-style-position: outside;\n\n          ul,\n          ol {\n            margin-block: 0;\n          }\n\n          li {\n            margin-inline-start: 1em;\n          }\n        }\n\n        ol {\n          list-style: auto;\n        }\n\n        ul {\n          list-style-type: none;\n\n          li {\n            &::before {\n              content: '-';\n              display: inline-block;\n              margin-inline: -1em 0.5em;\n              opacity: 0.5;\n            }\n          }\n        }\n      "]))),
     p: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n        p {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          line-height: var(--lobe-markdown-line-height);\n          letter-spacing: 0.02em;\n        }\n      "]))),
     pre: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n        pre,\n        [data-code-type='highlighter'] {\n          border: none;\n\n          > code {\n            padding: 0 !important;\n\n            font-family: ", ";\n            font-size: 0.875em;\n            line-height: 1.6;\n\n            border: none !important;\n          }\n        }\n      "])), token.fontFamilyCode),
     strong: css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        strong {\n          font-weight: 600;\n        }\n      "]))),
-    table: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        table {\n          overflow: hidden;\n          display: table;\n          border-spacing: 0;\n          border-collapse: collapse;\n\n          box-sizing: border-box;\n          width: 100%;\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n\n          text-align: start;\n          overflow-wrap: break-word;\n\n          background: ", ";\n          border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n          box-shadow: inset 0 0 0 1px ", ";\n\n          thead {\n            background: ", ";\n          }\n\n          tr {\n            box-shadow: inset 0 -1px 0 ", ";\n          }\n\n          th,\n          td {\n            padding-block: 0.75em;\n            padding-inline: 1em;\n            text-align: start;\n            vertical-align: top;\n          }\n        }\n      "])), token.colorFillQuaternary, token.colorBorderSecondary, token.colorFillQuaternary, token.colorBorderSecondary),
-    video: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        > video,\n        > p > video {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n          box-shadow: 0 0 0 1px ", ";\n        }\n\n        video {\n          max-width: 100%;\n        }\n      "])), token.colorBorderSecondary)
+    table: css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n        table {\n          overflow: hidden;\n          display: table;\n          border-spacing: 0;\n          border-collapse: collapse;\n\n          box-sizing: border-box;\n          width: 100%;\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n\n          text-align: start;\n          overflow-wrap: break-word;\n\n          background: ", ";\n          border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n          box-shadow: inset 0 0 0 1px var(--lobe-markdown-border-color);\n\n          thead {\n            background: ", ";\n          }\n\n          tr {\n            box-shadow: inset 0 1px 0 var(--lobe-markdown-border-color);\n          }\n\n          th,\n          td {\n            padding-block: 0.75em;\n            padding-inline: 1em;\n            text-align: start;\n            vertical-align: top;\n          }\n        }\n      "])), token.colorFillQuaternary, token.colorFillQuaternary),
+    video: css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n        > video,\n        > p > video {\n          margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n          border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n          box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n        }\n\n        video {\n          max-width: 100%;\n        }\n      "])))
   };
 });

package/es/mdx/Cards.d.ts

@@ -0,0 +1,15 @@
+import { FC, PropsWithChildren } from 'react';
+import { type FlexboxProps } from 'react-layout-kit';
+import { type IconProps } from '../Icon';
+export interface CardProps extends Omit<FlexboxProps, 'children'> {
+    desc?: string;
+    href?: string;
+    icon?: IconProps['icon'];
+    iconProps?: Omit<IconProps, 'icon'>;
+    image?: string;
+    title: string;
+}
+declare const Card: FC<CardProps>;
+declare const Cards: FC<PropsWithChildren>;
+export default Cards;
+export { Card };

package/es/mdx/Cards.js

@@ -0,0 +1,84 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _excluded = ["icon", "title", "desc", "href", "iconProps", "image"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { createStyles } from 'antd-style';
+import { Flexbox } from 'react-layout-kit';
+import A from "../A";
+import Icon from "../Icon";
+import Img from "../Img";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    cx = _ref.cx,
+    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      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),
+    container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      --rows: 3;\n\n      display: grid;\n      grid-template-columns: repeat(\n        auto-fill,\n        minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr)\n      );\n      gap: 1em;\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n    "]))),
+    content: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      gap: 0.75em;\n      padding: 1em;\n    "]))),
+    icon: icon
+  };
+});
+var Card = function Card(_ref2) {
+  var icon = _ref2.icon,
+    title = _ref2.title,
+    desc = _ref2.desc,
+    href = _ref2.href,
+    iconProps = _ref2.iconProps,
+    image = _ref2.image,
+    rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsx(A, {
+    href: href,
+    children: /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+      align: 'flex-start',
+      className: styles.card
+    }, rest), {}, {
+      children: [image && /*#__PURE__*/_jsx(Img, {
+        alt: title,
+        height: 100,
+        src: image,
+        style: {
+          height: 'auto',
+          width: '100%'
+        },
+        width: 250
+      }), /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+        align: 'flex-start',
+        className: styles.content,
+        horizontal: true
+      }, rest), {}, {
+        children: [!image && icon && /*#__PURE__*/_jsx(Icon, _objectSpread({
+          className: styles.icon,
+          icon: icon,
+          size: {
+            fontSize: '1.5em'
+          }
+        }, iconProps)), /*#__PURE__*/_jsxs("div", {
+          children: [/*#__PURE__*/_jsx("h3", {
+            children: title
+          }), desc && /*#__PURE__*/_jsx("p", {
+            children: desc
+          })]
+        })]
+      }))]
+    }))
+  });
+};
+var Cards = function Cards(_ref3) {
+  var children = _ref3.children;
+  var _useStyles2 = useStyles(),
+    styles = _useStyles2.styles;
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.container,
+    children: children
+  });
+};
+export default Cards;
+export { Card };

package/es/mdx/FileTree.d.ts

@@ -0,0 +1,24 @@
+import { FC, ReactNode } from 'react';
+import { type IconProps } from '../Icon';
+export interface _FileTreeProps {
+    children: ReactNode;
+}
+declare const _FileTree: FC<_FileTreeProps>;
+export interface FolderProps {
+    children: ReactNode;
+    defaultOpen?: boolean;
+    icon?: IconProps['icon'];
+    name: string;
+}
+declare const Folder: FC<FolderProps>;
+export interface FileProps {
+    icon?: IconProps['icon'];
+    name: string;
+}
+declare const File: FC<FileProps>;
+export type FileTreeProps = typeof _FileTree & {
+    File: typeof File;
+    Folder: typeof Folder;
+};
+declare const FileTree: FileTreeProps;
+export default FileTree;

package/es/mdx/FileTree.js

@@ -0,0 +1,79 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles } from 'antd-style';
+import { FileIcon, FolderIcon, FolderOpen } from 'lucide-react';
+import { useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import Icon from "../Icon";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      padding-block: 0.75em;\n      padding-inline: 1em;\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    "])), token.colorTextSecondary),
+    folder: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      &:hover {\n        color: ", ";\n      }\n    "])), token.colorText),
+    folderChildren: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      padding-inline-start: 1em;\n    "])))
+  };
+});
+var _FileTree = function _FileTree(_ref2) {
+  var children = _ref2.children;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.container,
+    children: children
+  });
+};
+var Folder = function Folder(_ref3) {
+  var name = _ref3.name,
+    defaultOpen = _ref3.defaultOpen,
+    _ref3$icon = _ref3.icon,
+    icon = _ref3$icon === void 0 ? FolderIcon : _ref3$icon,
+    children = _ref3.children;
+  var _useState = useState(defaultOpen),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var _useStyles2 = useStyles(),
+    styles = _useStyles2.styles;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      className: styles.folder,
+      gap: 4,
+      horizontal: true,
+      onClick: function onClick() {
+        return setOpen(!open);
+      },
+      children: [/*#__PURE__*/_jsx(Icon, {
+        icon: open ? FolderOpen : icon
+      }), /*#__PURE__*/_jsx("span", {
+        children: name
+      })]
+    }), open && /*#__PURE__*/_jsx(Flexbox, {
+      className: styles.folderChildren,
+      children: children
+    })]
+  });
+};
+var File = function File(_ref4) {
+  var name = _ref4.name,
+    _ref4$icon = _ref4.icon,
+    icon = _ref4$icon === void 0 ? FileIcon : _ref4$icon;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    align: 'center',
+    gap: 4,
+    horizontal: true,
+    children: [/*#__PURE__*/_jsx(Icon, {
+      icon: icon
+    }), /*#__PURE__*/_jsx("span", {
+      children: name
+    })]
+  });
+};
+var FileTree = _FileTree;
+FileTree.Folder = Folder;
+FileTree.File = File;
+export default FileTree;

package/es/mdx/Pre.js

@@ -6,11 +6,10 @@ import Snippet from "../Snippet";
 import { FALLBACK_LANG } from "../hooks/useHighlight";
 import { jsx as _jsx } from "react/jsx-runtime";
 var useStyles = createStyles(function (_ref) {
-  var css = _ref.css,
-    token = _ref.token;
+  var css = _ref.css;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin-block: 1em;\n    border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n    box-shadow: inset 0 0 0 1px ", ";\n  "])), token.colorBorderSecondary),
-    highlight: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    pre {\n      padding: 1em !important;\n    }\n  "])))
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n    margin-block: 1em;\n    border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n    box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n  "]))),
+    highlight: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    pre {\n      overflow-x: hidden !important;\n      padding: 1em !important;\n    }\n  "])))
   };
 });
 export var Pre = function Pre(_ref2) {

package/es/mdx/Steps.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+declare const Steps: FC<PropsWithChildren>;
+export default Steps;

package/es/mdx/Steps.js

@@ -0,0 +1,21 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject;
+import { createStyles } from 'antd-style';
+import { jsx as _jsx } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token;
+  return {
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      --lobe-markdown-header-multiple: 0.5;\n      --lobe-markdown-margin-multiple: 1;\n\n      position: relative;\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      padding-inline-start: 2.5em;\n\n      &::before {\n        content: '';\n\n        position: absolute;\n        inset-block-start: 0.25em;\n        inset-inline-start: 0.9em;\n\n        display: block;\n\n        width: 1px;\n        height: calc(100% - 0.5em);\n\n        background: ", ";\n      }\n\n      h3 {\n        counter-increment: step;\n\n        &:not(:first-child) {\n          margin-block-start: 2em;\n        }\n\n        &::before {\n          content: counter(step);\n\n          position: absolute;\n          z-index: 1;\n          inset-inline-start: 0;\n\n          display: inline-block;\n\n          width: 1.8em;\n          height: 1.8em;\n          margin-block-start: 0.3em;\n\n          font-size: 0.8em;\n          font-weight: 500;\n          line-height: 1.8em;\n          color: ", ";\n          text-align: center;\n\n          background: ", ";\n          border-radius: 9999px;\n          box-shadow: 0 0 0 2px ", ";\n        }\n      }\n    "])), token.colorBorderSecondary, token.colorTextSecondary, token.colorBgElevated, token.colorBgLayout)
+  };
+});
+var Steps = function Steps(_ref2) {
+  var children = _ref2.children;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.container,
+    children: children
+  });
+};
+export default Steps;

package/es/mdx/Tabs.d.ts

@@ -0,0 +1,16 @@
+import { FC, ReactNode } from 'react';
+export interface _TabItemProps {
+    children: ReactNode;
+}
+declare const _TabItem: FC<_TabItemProps>;
+export interface _TabsProps {
+    children: ReactNode[];
+    defaultIndex?: number | string;
+    items: string[];
+}
+declare const _Tabs: FC<_TabsProps>;
+export type TabsProps = typeof _Tabs & {
+    Tab: typeof _TabItem;
+};
+declare const Tabs: TabsProps;
+export default Tabs;

package/es/mdx/Tabs.js

@@ -0,0 +1,62 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles } from 'antd-style';
+import { isString } from 'lodash-es';
+import { useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import TabsNav from "../TabsNav";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    prefixCls = _ref.prefixCls;
+  return {
+    body: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding-inline: 1em;\n    "]))),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      --lobe-markdown-margin-multiple: 1;\n\n      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);\n      background: ", ";\n      border-radius: calc(var(--lobe-markdown-border-radius) * 1px);\n      box-shadow: 0 0 0 1px var(--lobe-markdown-border-color);\n    "])), token.colorFillQuaternary),
+    header: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      border-block-end: 1px solid var(--lobe-markdown-border-color);\n      .", "-tabs-tab-btn {\n        font-size: var(--lobe-markdown-font-size);\n        line-height: var(--lobe-markdown-line-height);\n      }\n    "])), prefixCls)
+  };
+});
+var _TabItem = function _TabItem(_ref2) {
+  var children = _ref2.children;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  return /*#__PURE__*/_jsx("div", {
+    className: styles.body,
+    children: isString(children) ? /*#__PURE__*/_jsx("p", {
+      children: children
+    }) : children
+  });
+};
+var _Tabs = function _Tabs(_ref3) {
+  var _ref3$defaultIndex = _ref3.defaultIndex,
+    defaultIndex = _ref3$defaultIndex === void 0 ? '0' : _ref3$defaultIndex,
+    items = _ref3.items,
+    children = _ref3.children;
+  var _useState = useState(String(defaultIndex)),
+    _useState2 = _slicedToArray(_useState, 2),
+    activeIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
+  var _useStyles2 = useStyles(),
+    styles = _useStyles2.styles;
+  var index = Number(activeIndex);
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    className: styles.container,
+    children: [/*#__PURE__*/_jsx(TabsNav, {
+      activeKey: activeIndex,
+      className: styles.header,
+      items: items.map(function (item, i) {
+        return {
+          key: String(i),
+          label: item
+        };
+      }),
+      onChange: setActiveIndex,
+      variant: 'compact'
+    }), (children === null || children === void 0 ? void 0 : children[index]) || '']
+  });
+};
+var Tabs = _Tabs;
+Tabs.Tab = _TabItem;
+export default Tabs;

package/es/mdx/index.d.ts

@@ -1,6 +1,9 @@
-import { FC } from 'react';
 export { default as Callout, type CalloutProps } from './Callout';
+export { Card, type CardProps, default as Cards } from './Cards';
+export { default as FileTree, type FileTreeProps } from './FileTree';
 export { default as Image, type ImageProps } from './Image';
+export { default as mdxComponents } from './mdxComponents';
 export { default as Pre, type PreProps, PreSingleLine } from './Pre';
+export { default as Steps } from './Steps';
+export { default as Tabs, type TabsProps } from './Tabs';
 export { default as Video, type VideoProps } from './Video';
-export declare const mdxComponents: Record<string, FC<any>>;

package/es/mdx/index.js

@@ -1,13 +1,9 @@
-import Callout from "./Callout";
-import Image from "./Image";
-import Video from "./Video";
 export { default as Callout } from "./Callout";
+export { Card, default as Cards } from "./Cards";
+export { default as FileTree } from "./FileTree";
 export { default as Image } from "./Image";
+export { default as mdxComponents } from "./mdxComponents";
 export { default as Pre, PreSingleLine } from "./Pre";
-export { default as Video } from "./Video";
-export var mdxComponents = {
-  Callout: Callout,
-  Image: Image,
-  LobeCallout: Callout,
-  Video: Video
-};
+export { default as Steps } from "./Steps";
+export { default as Tabs } from "./Tabs";
+export { default as Video } from "./Video";

package/es/mdx/mdxComponents.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const mdxComponents: Record<string, FC<any>>;
+export default mdxComponents;

package/es/mdx/mdxComponents.js

@@ -0,0 +1,24 @@
+import Callout from "./Callout";
+import Cards, { Card } from "./Cards";
+import FileTree from "./FileTree";
+import Image from "./Image";
+import Steps from "./Steps";
+import Tabs from "./Tabs";
+import Video from "./Video";
+var mdxComponents = {
+  Callout: Callout,
+  Card: Card,
+  Cards: Cards,
+  FileTree: FileTree,
+  Image: Image,
+  LobeCallout: Callout,
+  LobeCard: Card,
+  LobeCards: Cards,
+  LobeFileTree: FileTree,
+  LobeSteps: Steps,
+  LobeTabs: Tabs,
+  Steps: Steps,
+  Tabs: Tabs,
+  Video: Video
+};
+export default mdxComponents;

package/es/types/index.d.ts

@@ -1,4 +1,4 @@
-import { type HTMLAttributes } from 'react';
+import { AnchorHTMLAttributes, type HTMLAttributes } from 'react';
 export * from './chatMessage';
 export * from './customStylish';
 export * from './customToken';
@@ -8,5 +8,6 @@ export type DivProps = HTMLAttributes<HTMLDivElement>;
 export type VideoProps = HTMLAttributes<HTMLVideoElement>;
 export type SvgProps = HTMLAttributes<SVGSVGElement>;
 export type ImgProps = HTMLAttributes<HTMLImageElement>;
+export type AProps = AnchorHTMLAttributes<HTMLAnchorElement>;
 export type InputProps = HTMLAttributes<HTMLInputElement>;
 export type TextAreaProps = HTMLAttributes<HTMLTextAreaElement>;

package/package.json

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