@lobehub/ui 1.78.0 → 1.80.0

package/es/ChatHeader/ChatHeaderTitle.js

@@ -33,7 +33,7 @@ var ChatHeaderTitle = /*#__PURE__*/memo(function (_ref2) {
       children: [/*#__PURE__*/_jsx("div", {
         className: styles.titleWithDesc,
         children: title
-      }), /*#__PURE__*/_jsx(Flexbox, {
+      }), tag && /*#__PURE__*/_jsx(Flexbox, {
         className: styles.tag,
         horizontal: true,
         children: tag

package/es/Logo/index.js

@@ -5,6 +5,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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 { useTheme } from 'antd-style';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import Divider from "./Divider";
 import LogoHighContrast from "./LogoHighContrast";
 import LogoText from "./LogoText";
@@ -23,13 +24,12 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
   var _useStyles = useStyles(),
-    styles = _useStyles.styles,
-    cx = _useStyles.cx;
+    styles = _useStyles.styles;
   var logoComponent;
   switch (type) {
     case '3d':
       {
-        return /*#__PURE__*/_jsx("img", _objectSpread({
+        logoComponent = /*#__PURE__*/_jsx("img", _objectSpread({
           alt: "lobehub",
           src: LOGO_3D,
           style: _objectSpread({
@@ -37,10 +37,11 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
             width: size
           }, style)
         }, props));
+        break;
       }
     case 'flat':
       {
-        return /*#__PURE__*/_jsx("img", {
+        logoComponent = /*#__PURE__*/_jsx("img", {
           alt: "lobehub",
           src: LOGO_FLAT,
           style: _objectSpread({
@@ -48,25 +49,28 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
             width: size
           }, style)
         });
+        break;
       }
     case 'high-contrast':
       {
-        return /*#__PURE__*/_jsx(LogoHighContrast, _objectSpread({
+        logoComponent = /*#__PURE__*/_jsx(LogoHighContrast, _objectSpread({
           style: _objectSpread({
             height: size,
             width: size
           }, style)
         }, props));
+        break;
       }
     case 'text':
       {
-        return /*#__PURE__*/_jsx(LogoText, _objectSpread({
+        logoComponent = /*#__PURE__*/_jsx(LogoText, _objectSpread({
           className: className,
           style: _objectSpread({
             height: size,
             width: 'auto'
           }, style)
         }, props));
+        break;
       }
     case 'combine':
       {
@@ -86,27 +90,29 @@ var Logo = /*#__PURE__*/memo(function (_ref) {
             }
           })]
         });
+        break;
       }
   }
+  if (!extra) return logoComponent;
   var extraSize = Math.round(size / 3 * 1.9);
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
-    className: cx(styles.flexCenter, className),
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
+    align: 'center',
+    className: className,
+    horizontal: true,
     style: style
   }, props), {}, {
-    children: [logoComponent, extra && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Divider, {
-        style: {
-          color: theme.colorBorder,
-          height: extraSize,
-          width: extraSize
-        }
-      }), /*#__PURE__*/_jsx("div", {
-        className: styles.extraTitle,
-        style: {
-          fontSize: extraSize
-        },
-        children: extra
-      })]
+    children: [logoComponent, /*#__PURE__*/_jsx(Divider, {
+      style: {
+        color: theme.colorFill,
+        height: extraSize,
+        width: extraSize
+      }
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.extraTitle,
+      style: {
+        fontSize: extraSize
+      },
+      children: extra
     })]
   }));
 });

package/es/Logo/style.d.ts

@@ -2,5 +2,4 @@ export declare const LOGO_3D: string;
 export declare const LOGO_FLAT: string;
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
     extraTitle: import("antd-style").SerializedStyles;
-    flexCenter: import("antd-style").SerializedStyles;
 }>;

package/es/Logo/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
+var _templateObject;
 import { createStyles } from 'antd-style';
 import { genCdnUrl } from "../utils/genCdnUrl";
 export var LOGO_3D = genCdnUrl({
@@ -15,7 +15,6 @@ export var LOGO_FLAT = genCdnUrl({
 export var useStyles = createStyles(function (_ref) {
   var css = _ref.css;
   return {
-    extraTitle: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      font-weight: 300;\n      white-space: nowrap;\n    "]))),
-    flexCenter: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      display: flex;\n      align-items: center;\n    "])))
+    extraTitle: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      font-weight: 300;\n      white-space: nowrap;\n    "])))
   };
 });

package/es/MobileNavBar/MobileNavBarTitle.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export interface MobileNavBarTitleProps {
+    desc?: string | ReactNode;
+    tag?: ReactNode;
+    title: string | ReactNode;
+}
+declare const MobileNavBarTitle: import("react").NamedExoticComponent<MobileNavBarTitleProps>;
+export default MobileNavBarTitle;

package/es/MobileNavBar/MobileNavBarTitle.js

@@ -0,0 +1,68 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { createStyles } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+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 {
+    desc: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n\n    width: 100%;\n\n    font-size: 12px;\n    line-height: 1;\n    color: ", ";\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "])), token.colorTextTertiary),
+    tag: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    flex: none;\n  "]))),
+    title: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    overflow: hidden;\n\n    font-size: 16px;\n    font-weight: bold;\n    line-height: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "]))),
+    titleContainer: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    flex: 1;\n  "]))),
+    titleWithDesc: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    overflow: hidden;\n\n    font-weight: bold;\n    line-height: 1;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  "])))
+  };
+});
+var MobileNavBarTitle = /*#__PURE__*/memo(function (_ref2) {
+  var title = _ref2.title,
+    desc = _ref2.desc,
+    tag = _ref2.tag;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  if (desc) return /*#__PURE__*/_jsxs(Flexbox, {
+    align: 'center',
+    flex: 1,
+    gap: 4,
+    justify: 'center',
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      className: styles.titleContainer,
+      gap: 4,
+      horizontal: true,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: styles.titleWithDesc,
+        children: title
+      }), tag && /*#__PURE__*/_jsx(Flexbox, {
+        className: styles.tag,
+        horizontal: true,
+        children: tag
+      })]
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      horizontal: true,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.desc,
+        children: desc
+      })
+    })]
+  });
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    align: 'center',
+    flex: 1,
+    gap: 4,
+    horizontal: true,
+    justify: 'center',
+    children: [/*#__PURE__*/_jsx("div", {
+      className: styles.title,
+      children: title
+    }), /*#__PURE__*/_jsx(Flexbox, {
+      className: styles.tag,
+      horizontal: true,
+      children: tag
+    })]
+  });
+});
+export default MobileNavBarTitle;

package/es/MobileNavBar/index.d.ts

@@ -0,0 +1,28 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface MobileNavBarProps {
+    center?: ReactNode;
+    className?: string;
+    classNames?: {
+        center?: string;
+        left?: string;
+        right?: string;
+    };
+    contentStyles?: {
+        center?: CSSProperties;
+        left?: CSSProperties;
+        right?: CSSProperties;
+    };
+    gap?: {
+        center?: number;
+        left?: number;
+        right?: number;
+    };
+    left?: ReactNode;
+    onBackClick?: () => void;
+    right?: ReactNode;
+    safeArea?: boolean;
+    showBackButton?: boolean;
+    style?: CSSProperties;
+}
+declare const MobileNavBar: import("react").NamedExoticComponent<MobileNavBarProps>;
+export default MobileNavBar;

package/es/MobileNavBar/index.js

@@ -0,0 +1,73 @@
+import { ChevronLeft } from 'lucide-react';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import ActionIcon from "../ActionIcon";
+import MobileSafeArea from "../MobileSafeArea";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var MobileNavBar = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    _ref$safeArea = _ref.safeArea,
+    safeArea = _ref$safeArea === void 0 ? true : _ref$safeArea,
+    style = _ref.style,
+    center = _ref.center,
+    left = _ref.left,
+    right = _ref.right,
+    gap = _ref.gap,
+    classNames = _ref.classNames,
+    onBackClick = _ref.onBackClick,
+    showBackButton = _ref.showBackButton,
+    contentStyles = _ref.contentStyles;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    className: cx(styles.container, className),
+    style: style,
+    children: [safeArea && /*#__PURE__*/_jsx(MobileSafeArea, {
+      position: 'bottom'
+    }), /*#__PURE__*/_jsxs(Flexbox, {
+      align: 'center',
+      className: styles.inner,
+      flex: 1,
+      horizontal: true,
+      justify: 'space-between',
+      children: [/*#__PURE__*/_jsxs(Flexbox, {
+        align: 'center',
+        className: cx(styles.left, classNames === null || classNames === void 0 ? void 0 : classNames.left),
+        flex: 1,
+        gap: gap === null || gap === void 0 ? void 0 : gap.left,
+        horizontal: true,
+        style: contentStyles === null || contentStyles === void 0 ? void 0 : contentStyles.left,
+        children: [showBackButton && /*#__PURE__*/_jsx(ActionIcon, {
+          icon: ChevronLeft,
+          onClick: function onClick() {
+            return onBackClick === null || onBackClick === void 0 ? void 0 : onBackClick();
+          },
+          size: {
+            fontSize: 24
+          }
+        }), left]
+      }), /*#__PURE__*/_jsx(Flexbox, {
+        align: 'center',
+        className: cx(styles.center, classNames === null || classNames === void 0 ? void 0 : classNames.center),
+        flex: 1,
+        gap: gap === null || gap === void 0 ? void 0 : gap.center,
+        horizontal: true,
+        justify: 'center',
+        style: contentStyles === null || contentStyles === void 0 ? void 0 : contentStyles.center,
+        children: center
+      }), /*#__PURE__*/_jsx(Flexbox, {
+        align: 'center',
+        className: cx(styles.right, classNames === null || classNames === void 0 ? void 0 : classNames.right),
+        flex: 1,
+        gap: gap === null || gap === void 0 ? void 0 : gap.right,
+        horizontal: true,
+        style: contentStyles === null || contentStyles === void 0 ? void 0 : contentStyles.right,
+        children: right
+      })]
+    })]
+  });
+});
+export default MobileNavBar;

package/es/MobileNavBar/style.d.ts

@@ -0,0 +1,7 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    center: import("antd-style").SerializedStyles;
+    container: string;
+    inner: import("antd-style").SerializedStyles;
+    left: import("antd-style").SerializedStyles;
+    right: import("antd-style").SerializedStyles;
+}>;

package/es/MobileNavBar/style.js

@@ -0,0 +1,17 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    cx = _ref.cx,
+    stylish = _ref.stylish;
+  return {
+    center: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      height: 100%;\n    "]))),
+    container: cx(stylish.blurStrong, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        flex: 0;\n\n        width: 100vw;\n\n        background: linear-gradient(\n          to bottom,\n          ", ",\n          ", "\n        );\n        border-bottom: 1px solid ", ";\n      "])), rgba(token.colorBgLayout, 0.8), rgba(token.colorBgLayout, 0.4), token.colorBorder)),
+    inner: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: relative;\n\n      width: 100%;\n      height: 44px;\n      min-height: 44px;\n      max-height: 44px;\n      padding: 0 6px;\n    "]))),
+    left: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      justify-content: flex-start;\n      height: 100%;\n    "]))),
+    right: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      justify-content: flex-end;\n      height: 100%;\n    "])))
+  };
+});

package/es/MobileSafeArea/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DivProps } from "../types";
+export interface MobileSafeAreaProps extends DivProps {
+    position: 'top' | 'bottom';
+}
+declare const MobileSafeArea: React.NamedExoticComponent<MobileSafeAreaProps>;
+export default MobileSafeArea;

package/es/MobileSafeArea/index.js

@@ -0,0 +1,20 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["position", "className"];
+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 React, { memo } from 'react';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var MobileSafeArea = /*#__PURE__*/memo(function (_ref) {
+  var position = _ref.position,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  return /*#__PURE__*/_jsx("div", _objectSpread({
+    className: cx(styles.container, styles[position], className)
+  }, props));
+});
+export default MobileSafeArea;

package/es/MobileSafeArea/style.d.ts

@@ -0,0 +1,5 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    bottom: import("antd-style").SerializedStyles;
+    container: import("antd-style").SerializedStyles;
+    top: import("antd-style").SerializedStyles;
+}>;

package/es/MobileSafeArea/style.js

@@ -0,0 +1,11 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    bottom: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding-bottom: env(safe-area-inset-bottom);\n    "]))),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      overflow: hidden;\n      flex: 0;\n      width: 100vw;\n    "]))),
+    top: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      padding-top: env(safe-area-inset-top);\n    "])))
+  };
+});

package/es/MobileTabBar/index.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface MobileTabBarItemProps {
+    icon: ReactNode | ((active: boolean) => ReactNode);
+    key: string;
+    title: ReactNode | ((active: boolean) => ReactNode);
+}
+export interface MobileTabBarProps {
+    activeKey?: string;
+    className?: string;
+    defaultActiveKey?: string;
+    items: MobileTabBarItemProps[];
+    onChange?: (key: string) => void;
+    safeArea?: boolean;
+    style?: CSSProperties;
+}
+declare const MobileTabBar: import("react").NamedExoticComponent<MobileTabBarProps>;
+export default MobileTabBar;

package/es/MobileTabBar/index.js

@@ -0,0 +1,61 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { memo, useEffect, useState } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import MobileSafeArea from "../MobileSafeArea";
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var MobileTabBar = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    _ref$safeArea = _ref.safeArea,
+    safeArea = _ref$safeArea === void 0 ? true : _ref$safeArea,
+    style = _ref.style,
+    items = _ref.items,
+    activeKey = _ref.activeKey,
+    defaultActiveKey = _ref.defaultActiveKey,
+    onChange = _ref.onChange;
+  var _useState = useState(activeKey || defaultActiveKey || items[0].key),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentActive = _useState2[0],
+    setCurrentActive = _useState2[1];
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  useEffect(function () {
+    onChange === null || onChange === void 0 ? void 0 : onChange(currentActive);
+  }, [currentActive]);
+  return /*#__PURE__*/_jsxs(Flexbox, {
+    className: cx(styles.container, className),
+    style: style,
+    children: [/*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      className: styles.inner,
+      horizontal: true,
+      justify: 'space-around',
+      children: items.map(function (item) {
+        var active = activeKey ? item.key === activeKey : item.key === currentActive;
+        return /*#__PURE__*/_jsxs(Flexbox, {
+          align: 'center',
+          className: cx(styles.tab, active && styles.active),
+          gap: 4,
+          justify: 'center',
+          onClick: function onClick() {
+            return setCurrentActive(item.key);
+          },
+          children: [/*#__PURE__*/_jsx(Flexbox, {
+            align: 'center',
+            className: styles.icon,
+            justify: 'center',
+            children: typeof item.icon === 'function' ? item.icon(active) : item.icon
+          }), /*#__PURE__*/_jsx("div", {
+            className: styles.title,
+            children: typeof item.title === 'function' ? item.title(active) : item.title
+          })]
+        }, item.key);
+      })
+    }), safeArea && /*#__PURE__*/_jsx(MobileSafeArea, {
+      position: 'bottom'
+    })]
+  });
+});
+export default MobileTabBar;

package/es/MobileTabBar/style.d.ts

@@ -0,0 +1,8 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    active: import("antd-style").SerializedStyles;
+    container: string;
+    icon: import("antd-style").SerializedStyles;
+    inner: import("antd-style").SerializedStyles;
+    tab: import("antd-style").SerializedStyles;
+    title: import("antd-style").SerializedStyles;
+}>;

package/es/MobileTabBar/style.js

@@ -0,0 +1,18 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+import { createStyles } from 'antd-style';
+import { rgba } from 'polished';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    cx = _ref.cx,
+    stylish = _ref.stylish;
+  return {
+    active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), token.colorPrimary),
+    container: cx(stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        flex: 0;\n\n        width: 100vw;\n\n        background: ", ";\n        border-top: 1px solid ", ";\n      "])), rgba(token.colorBgContainer, 0.5), token.colorBorder)),
+    icon: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      width: 24px;\n      height: 24px;\n      font-size: 24px;\n    "]))),
+    inner: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      width: 100%;\n      height: 48px;\n    "]))),
+    tab: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      width: 48px;\n      height: 48px;\n      padding-top: env(safe-area-inset-top);\n\n      color: ", ";\n    "])), token.colorTextSecondary),
+    title: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      font-size: 12px;\n      line-height: 1;\n    "])))
+  };
+});

package/es/Tag/index.d.ts

@@ -2,6 +2,7 @@ import { type TagProps as AntTagProps } from 'antd';
 import { ReactNode } from 'react';
 export interface TagProps extends AntTagProps {
     icon?: ReactNode;
+    size?: 'default' | 'small';
 }
 declare const Tag: import("react").NamedExoticComponent<TagProps>;
 export default Tag;

package/es/Tag/index.js

@@ -1,7 +1,7 @@
 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", "children"];
+var _excluded = ["icon", "children", "size"];
 var _templateObject, _templateObject2;
 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; }
@@ -16,19 +16,22 @@ var useStyles = createStyles(function (_ref) {
     css = _ref.css,
     token = _ref.token;
   return {
-    count: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n\n    height: 20px;\n    padding: 0 8px;\n\n    font-size: 12px;\n    line-height: 1;\n\n    background: ", ";\n    border: ", "px;\n  "])), token.colorFillTertiary, token.borderRadius),
+    small: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: 2px 6px;\n    line-height: 1;\n  "]))),
     tag: cx(css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    color: ", " !important;\n    background: ", ";\n    border: ", "px;\n\n    &:hover {\n      color: ", ";\n      background: ", ";\n    }\n  "])), token.colorTextSecondary, token.colorFillSecondary, token.borderRadius, token.colorText, token.colorFill))
   };
 });
 var Tag = /*#__PURE__*/memo(function (_ref2) {
   var icon = _ref2.icon,
     children = _ref2.children,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'default' : _ref2$size,
     props = _objectWithoutProperties(_ref2, _excluded);
   var _useStyles = useStyles(),
-    styles = _useStyles.styles;
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
   return /*#__PURE__*/_jsx(AntTag, _objectSpread(_objectSpread({
     bordered: false,
-    className: styles.tag
+    className: cx(styles.tag, size === 'small' && styles.small)
   }, props), {}, {
     children: /*#__PURE__*/_jsxs(Flexbox, {
       align: 'center',

package/es/index.d.ts

@@ -48,6 +48,10 @@ export { default as LogoThree, type LogoThreeProps } from './LogoThree';
 export { default as Markdown, type MarkdownProps } from './Markdown';
 export { default as MessageInput, type MessageInputProps } from './MessageInput';
 export { default as MessageModal, type MessageModalProps } from './MessageModal';
+export { default as MobileNavBar, type MobileNavBarProps } from './MobileNavBar';
+export { default as MobileNavBarTitle, type MobileNavBarTitleProps, } from './MobileNavBar/MobileNavBarTitle';
+export { default as MobileSafeArea, type MobileSafeAreaProps } from './MobileSafeArea';
+export { default as MobileTabBar, type MobileTabBarItemProps, type MobileTabBarProps, } from './MobileTabBar';
 export { default as SearchBar, type SearchBarProps } from './SearchBar';
 export { default as SideNav, type SideNavProps } from './SideNav';
 export { default as SliderWithInput, type SliderWithInputProps } from './SliderWithInput';

package/es/index.js

@@ -47,6 +47,10 @@ export { default as LogoThree } from "./LogoThree";
 export { default as Markdown } from "./Markdown";
 export { default as MessageInput } from "./MessageInput";
 export { default as MessageModal } from "./MessageModal";
+export { default as MobileNavBar } from "./MobileNavBar";
+export { default as MobileNavBarTitle } from "./MobileNavBar/MobileNavBarTitle";
+export { default as MobileSafeArea } from "./MobileSafeArea";
+export { default as MobileTabBar } from "./MobileTabBar";
 export { default as SearchBar } from "./SearchBar";
 export { default as SideNav } from "./SideNav";
 export { default as SliderWithInput } from "./SliderWithInput";

package/package.json

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