@lobehub/ui 1.132.7 → 1.133.0

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/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/index.d.ts

@@ -1,7 +1,9 @@
 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';

package/es/mdx/index.js

@@ -1,7 +1,9 @@
 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 Steps } from "./Steps";
 export { default as Tabs } from "./Tabs";
 export { default as Video } from "./Video";

package/es/mdx/mdxComponents.js

@@ -1,17 +1,23 @@
 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
 };

package/package.json

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