@lobehub/ui 1.98.3 → 1.99.0

package/es/ChatItem/style.js

@@ -6,8 +6,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     css = _ref.css,
     token = _ref.token,
     isDarkMode = _ref.isDarkMode,
-    responsive = _ref.responsive,
-    prefixCls = _ref.prefixCls;
+    responsive = _ref.responsive;
   var placement = _ref2.placement,
     type = _ref2.type,
     title = _ref2.title,
@@ -22,7 +21,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
   var editingStylish = editing && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        width: 100%;\n      "])));
   return {
     actions: cx(css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          align-self: ", ";\n          justify-content: ", ";\n        "])), type === 'block' ? 'flex-end' : placement === 'left' ? 'flex-start' : 'flex-end', placement === 'left' ? 'flex-end' : 'flex-start'), editing && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n            pointer-events: none !important;\n            opacity: 0 !important;\n          "])))),
-    alert: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        span[role='img'] {\n          align-self: flex-start;\n          width: 16px;\n          height: 16px;\n          margin-top: 3px;\n        }\n\n        .", "-alert-description {\n          text-align: justify;\n          word-break: break-all;\n          word-wrap: break-word;\n        }\n\n        &.", "-alert-with-description {\n          padding-block: 12px;\n          padding-inline: 12px;\n\n          .", "-alert-message {\n            font-size: 14px;\n            font-weight: 600;\n            text-align: justify;\n            word-break: break-all;\n            word-wrap: break-word;\n          }\n        }\n      "])), prefixCls, prefixCls, prefixCls),
+    alert: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""]))),
     avatarContainer: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n        position: relative;\n        flex: none;\n        width: ", "px;\n        height: ", "px;\n      "])), avatarSize, avatarSize),
     avatarGroupContainer: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n        width: ", "px;\n      "])), avatarSize),
     container: cx(type === 'pure' && pureContainerStylish, css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          position: relative;\n          width: 100%;\n          max-width: 100vw;\n          padding: 12px 16px;\n\n          time {\n            display: inline-block;\n            white-space: nowrap;\n          }\n\n          div[role='chat-item-actions'] {\n            display: flex;\n          }\n\n          time,\n          div[role='chat-item-actions'] {\n            pointer-events: none;\n            opacity: 0;\n            transition: opacity 200ms ", ";\n          }\n\n          &:hover {\n            time,\n            div[role='chat-item-actions'] {\n              pointer-events: unset;\n              opacity: 1;\n            }\n          }\n\n          ", " {\n            padding: 4px 16px;\n          }\n        "])), token.motionEaseOut, responsive.mobile)),

package/es/Form/components/FormGroup.js

@@ -5,8 +5,10 @@ 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 { Icon } from "../..";
 import { Collapse } from 'antd';
+import { useResponsive } from 'antd-style';
 import { ChevronDown } from 'lucide-react';
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -17,9 +19,29 @@ var FormGroup = /*#__PURE__*/memo(function (_ref) {
     children = _ref.children,
     extra = _ref.extra,
     props = _objectWithoutProperties(_ref, _excluded);
+  var _useResponsive = useResponsive(),
+    mobile = _useResponsive.mobile;
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
+  var titleContent = /*#__PURE__*/_jsxs("div", {
+    className: styles.title,
+    children: [icon && /*#__PURE__*/_jsx(Icon, {
+      icon: icon
+    }), title]
+  });
+  if (mobile) return /*#__PURE__*/_jsxs(Flexbox, {
+    className: className,
+    children: [/*#__PURE__*/_jsxs(Flexbox, {
+      className: styles.mobileGroupHeader,
+      horizontal: true,
+      justify: 'space-between',
+      children: [titleContent, extra]
+    }), /*#__PURE__*/_jsx("div", {
+      className: styles.mobileGroupBody,
+      children: children
+    })]
+  });
   return /*#__PURE__*/_jsx(Collapse, _objectSpread({
     className: cx(styles.group, className),
     defaultActiveKey: [1],
@@ -40,12 +62,7 @@ var FormGroup = /*#__PURE__*/memo(function (_ref) {
       children: children,
       extra: extra,
       key: 1,
-      label: /*#__PURE__*/_jsxs("div", {
-        className: styles.title,
-        children: [icon && /*#__PURE__*/_jsx(Icon, {
-          icon: icon
-        }), title]
-      })
+      label: titleContent
     }]
   }, props), 1);
 });

package/es/Form/components/style.d.ts

@@ -4,5 +4,7 @@ export declare const useStyles: (props?: string | number | undefined) => import(
     group: string;
     icon: import("antd-style").SerializedStyles;
     item: import("antd-style").SerializedStyles;
+    mobileGroupBody: import("antd-style").SerializedStyles;
+    mobileGroupHeader: import("antd-style").SerializedStyles;
     title: import("antd-style").SerializedStyles;
 }>;

package/es/Form/components/style.js

@@ -1,7 +1,8 @@
 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, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 import { createStyles } from 'antd-style';
 import { isNumber } from 'lodash-es';
+import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref, itemMinWidth) {
   var css = _ref.css,
     cx = _ref.cx,
@@ -14,7 +15,9 @@ export var useStyles = createStyles(function (_ref, itemMinWidth) {
     formTitle: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n\n      text-align: left;\n\n      > div {\n        font-weight: 500;\n        line-height: 1;\n      }\n\n      > small {\n        display: block;\n\n        line-height: 1;\n        color: ", ";\n        word-wrap: break-word;\n        white-space: pre-wrap;\n      }\n\n      .", "-tag {\n        font-family: ", ";\n      }\n    "])), token.colorTextDescription, prefixCls, token.fontFamilyCode),
     group: cx(isDarkMode && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          .", "-collapse-content {\n            background: transparent;\n          }\n\n          .", "-collapse-header {\n            background: ", ";\n          }\n        "])), prefixCls, prefixCls, token.colorFillTertiary), css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n        .", "-collapse-header {\n          align-items: center !important;\n          border-radius: 0 !important;\n        }\n\n        .", "-collapse-content-box {\n          padding-top: 0 !important;\n          padding-bottom: 0 !important;\n        }\n\n        .", "-form-item-label {\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n        }\n      "])), prefixCls, prefixCls, prefixCls)),
     icon: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      transition: all 100ms ", ";\n    "])), token.motionEaseOut),
-    item: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      padding: 8px 0;\n\n      .", "-row {\n        justify-content: space-between;\n\n        > div {\n          flex: unset !important;\n          flex-grow: unset !important;\n        }\n      }\n\n      .", "-form-item-required::before {\n        align-self: flex-start;\n      }\n\n      ", "\n\n      ", " {\n        padding: 16px 0;\n\n        .", "-row {\n          flex-direction: column;\n          gap: 4px;\n        }\n\n        .", "-form-item-control {\n          flex: 1;\n          width: 100%;\n        }\n      }\n    "])), prefixCls, prefixCls, itemMinWidth && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        .", "-form-item-control {\n          width: ", ";\n        }\n      "])), prefixCls, isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth), responsive.mobile, prefixCls, prefixCls),
-    title: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      font-size: 16px;\n      font-weight: 600;\n\n      .anticon {\n        color: ", ";\n      }\n    "])), token.colorPrimary)
+    item: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      padding: 8px 0;\n\n      .", "-row {\n        justify-content: space-between;\n\n        > div {\n          flex: unset !important;\n          flex-grow: unset !important;\n        }\n      }\n\n      .", "-form-item-required::before {\n        align-self: flex-start;\n      }\n\n      ", "\n\n      ", " {\n        padding: 16px 0;\n\n        ", "\n      }\n    "])), prefixCls, prefixCls, itemMinWidth && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n        .", "-form-item-control {\n          width: ", ";\n        }\n      "])), prefixCls, isNumber(itemMinWidth) ? "".concat(itemMinWidth, "px") : itemMinWidth), responsive.mobile, itemMinWidth ? css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n              .", "-row {\n                flex-direction: column;\n                gap: 4px;\n              }\n\n              .", "-form-item-control {\n                flex: 1;\n                width: 100%;\n              }\n            "])), prefixCls, prefixCls) : css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n              .", "-row {\n                flex-wrap: wrap;\n                gap: 4px;\n              }\n            "])), prefixCls)),
+    mobileGroupBody: css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n      padding: 0 16px;\n      background: ", ";\n      border-top: 1px solid ", ";\n      border-bottom: 1px solid ", ";\n    "])), token.colorFillQuaternary, rgba(token.colorBorderSecondary, 0.5), rgba(token.colorBorderSecondary, 0.5)),
+    mobileGroupHeader: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n      padding: 16px;\n    "]))),
+    title: css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n      display: flex;\n      gap: 8px;\n      align-items: center;\n\n      font-size: 16px;\n      font-weight: 600;\n\n      .anticon {\n        color: ", ";\n      }\n\n      ", " {\n        font-size: 14px;\n        font-weight: 400;\n        opacity: 0.5;\n      }\n    "])), token.colorPrimary, responsive.mobile)
   };
 });

package/es/List/ListItem/style.js

@@ -8,7 +8,7 @@ export var useStyles = createStyles(function (_ref) {
     actions: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: absolute;\n      top: 50%;\n      right: 16px;\n      transform: translateY(-50%);\n    "]))),
     active: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      color: ", ";\n      background-color: ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), token.colorText, token.colorFillSecondary, token.colorFill),
     container: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      color: ", ";\n      background: transparent;\n      transition: background-color 200ms ", ";\n\n      &:active {\n        background-color: ", ";\n      }\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), token.colorTextTertiary, token.motionEaseOut, token.colorFillSecondary, token.colorFillTertiary),
-    content: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n      padding-top: 6px;\n    "]))),
+    content: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n      align-self: center;\n    "]))),
     desc: css(_templateObject5 || (_templateObject5 = _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.colorTextDescription),
     pin: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      background-color: ", ";\n\n      &:active {\n        background-color: ", " !important;\n      }\n\n      &:hover {\n        background-color: ", ";\n      }\n    "])), token.colorFillTertiary, token.colorFill, token.colorFill),
     time: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n      font-size: 12px;\n      color: ", ";\n    "])), token.colorTextPlaceholder),

package/es/MobileTabBar/style.js

@@ -10,7 +10,7 @@ export var useStyles = createStyles(function (_ref) {
     isDarkMode = _ref.isDarkMode;
   return {
     active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), token.colorPrimary),
-    container: cx(stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        flex: none;\n        width: 100vw;\n        background: ", ";\n      "])), rgba(isDarkMode ? token.colorBgLayout : token.colorBgContainer, 0.5))),
+    container: cx(stylish.blur, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        flex: none;\n\n        width: 100vw;\n        padding-bottom: 12px;\n\n        background: ", ";\n      "])), rgba(isDarkMode ? token.colorBgLayout : token.colorBgContainer, 0.5))),
     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      width: 48px;\n      height: 48px;\n      color: ", ";\n    "])), token.colorTextSecondary),

package/es/Modal/index.js

@@ -1,17 +1,20 @@
 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 = ["children", "title", "className", "wrapClassName", "width"];
+var _excluded = ["children", "title", "className", "wrapClassName", "width", "onCancel", "open", "destroyOnClose"];
 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; }
-import { Modal as AntModal, ConfigProvider } from 'antd';
-import { createStyles } from 'antd-style';
+import { Modal as AntModal } from 'antd';
+import { Drawer } from 'antd';
+import { createStyles, useResponsive } from 'antd-style';
 import { X } from 'lucide-react';
-import { lighten } from 'polished';
 import { memo } from 'react';
+import ActionIcon from "../ActionIcon";
 import Icon from "../Icon";
+import MobileSafeArea from "../MobileSafeArea";
 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,
@@ -28,34 +31,62 @@ var Modal = /*#__PURE__*/memo(function (_ref2) {
     wrapClassName = _ref2.wrapClassName,
     _ref2$width = _ref2.width,
     width = _ref2$width === void 0 ? 700 : _ref2$width,
+    onCancel = _ref2.onCancel,
+    open = _ref2.open,
+    destroyOnClose = _ref2.destroyOnClose,
     props = _objectWithoutProperties(_ref2, _excluded);
+  var _useResponsive = useResponsive(),
+    mobile = _useResponsive.mobile;
   var _useStyles = useStyles(),
     styles = _useStyles.styles,
     cx = _useStyles.cx,
     theme = _useStyles.theme;
-  return /*#__PURE__*/_jsx(ConfigProvider, {
-    theme: {
-      token: {
-        colorBgElevated: lighten(0.005, theme.colorBgContainer)
+  if (mobile) return /*#__PURE__*/_jsxs(Drawer, {
+    bodyStyle: {
+      padding: 0
+    },
+    closeIcon: /*#__PURE__*/_jsx(ActionIcon, {
+      icon: X,
+      size: {
+        blockSize: 32,
+        fontSize: 20
       }
+    }),
+    destroyOnClose: destroyOnClose,
+    drawerStyle: {
+      background: theme.colorBgContainer
+    },
+    headerStyle: {
+      padding: '8px 4px'
     },
-    children: /*#__PURE__*/_jsx(AntModal, _objectSpread(_objectSpread({
-      centered: true,
-      className: cx(styles.content, className),
-      closable: true,
-      closeIcon: /*#__PURE__*/_jsx(Icon, {
-        icon: X,
-        size: {
-          fontSize: 20
-        }
-      }),
-      maskClosable: true,
-      title: title,
-      width: width,
-      wrapClassName: cx(styles.wrap, wrapClassName)
-    }, props), {}, {
-      children: children
-    }))
+    height: '75vh',
+    maskClassName: cx(styles.wrap, wrapClassName),
+    onClose: onCancel,
+    open: open,
+    placement: 'bottom',
+    title: title,
+    children: [children, /*#__PURE__*/_jsx(MobileSafeArea, {
+      position: 'bottom'
+    })]
   });
+  return /*#__PURE__*/_jsx(AntModal, _objectSpread(_objectSpread({
+    className: cx(styles.content, className),
+    closable: true,
+    closeIcon: /*#__PURE__*/_jsx(Icon, {
+      icon: X,
+      size: {
+        fontSize: 20
+      }
+    }),
+    destroyOnClose: destroyOnClose,
+    maskClosable: true,
+    onCancel: onCancel,
+    open: open,
+    title: title,
+    width: width,
+    wrapClassName: cx(styles.wrap, wrapClassName)
+  }, props), {}, {
+    children: children
+  }));
 });
 export default Modal;

package/es/ThemeProvider/GlobalStyle/antdOverride.js

@@ -3,5 +3,5 @@ var _templateObject;
 import { css } from 'antd-style';
 import { readableColor } from 'polished';
 export default (function (token) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", "-btn-primary {\n    color: ", " !important;\n  }\n\n  .", "-tooltip-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-height: unset;\n    padding: 4px 8px;\n\n    color: ", " !important;\n\n    background-color: ", " !important;\n    border-radius: ", "px !important;\n  }\n\n  .", "-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n\n  .", "-switch-handle::before {\n    background: ", " !important;\n  }\n"])), token.prefixCls, readableColor(token.colorPrimary), token.prefixCls, token.colorBgLayout, token.colorText, token.borderRadiusSM, token.prefixCls, token.colorText, token.prefixCls, token.colorBgContainer);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", "-btn {\n    box-shadow: none;\n  }\n\n  .", "-btn-primary:not(.", "-btn-dangerous) {\n    color: ", ";\n\n    &:hover {\n      color: ", " !important;\n    }\n\n    &:active {\n      color: ", " !important;\n    }\n  }\n\n  .", "-tooltip-inner {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n\n    min-height: unset;\n    padding: 4px 8px;\n\n    color: ", " !important;\n\n    background-color: ", " !important;\n    border-radius: ", "px !important;\n  }\n\n  .", "-tooltip-arrow {\n    &::before,\n    &::after {\n      background: ", " !important;\n    }\n  }\n\n  .", "-switch-handle::before {\n    background: ", " !important;\n  }\n\n  .", "-alert {\n    span[role='img'] {\n      align-self: flex-start;\n      width: 16px;\n      height: 16px;\n      margin-top: 3px;\n    }\n\n    .", "-alert-description {\n      text-align: justify;\n      word-break: break-all;\n      word-wrap: break-word;\n    }\n\n    &.", "-alert-with-description {\n      padding-block: 12px;\n      padding-inline: 12px;\n\n      .", "-alert-message {\n        font-size: 14px;\n        font-weight: 600;\n        text-align: justify;\n        word-break: break-all;\n        word-wrap: break-word;\n      }\n    }\n  }\n\n  @media (max-width: 575px) {\n    .", "-tooltip {\n      display: none !important;\n    }\n  }\n"])), token.prefixCls, token.prefixCls, token.prefixCls, readableColor(token.colorPrimary), readableColor(token.colorPrimary), readableColor(token.colorPrimaryActive), token.prefixCls, token.colorBgLayout, token.colorText, token.borderRadiusSM, token.prefixCls, token.colorText, token.prefixCls, token.colorBgContainer, token.prefixCls, token.prefixCls, token.prefixCls, token.prefixCls, token.prefixCls);
 });

package/package.json

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